/* connect4ai Design-System V1 - siehe DESIGN.md */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-var.ttf") format("truetype-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var.ttf") format("truetype-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --ink:#101418;
  --ink-soft:#3d4854;
  --paper:#f7f6f2;
  --surface:#ffffff;
  --brand:#0b6e4f;
  --brand-dark:#085039;
  --brand-soft:#e3f0ea;
  --accent:#e8a33d;
  --ok:#2e7d32;
  --warn:#e8a33d;
  --bad:#b3402a;
  --line:#dad7cf;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --radius:12px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,20,24,.06);
  --shadow-md:0 8px 24px rgba(16,20,24,.07);
  --max:1120px;
  --font-head:"Fraunces",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;line-height:1.55;
  color:var(--ink);
  background:var(--paper);
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.15;margin:0 0 var(--s3)}
h1{font-size:clamp(1.75rem,4vw,2.25rem)}
h2{font-size:clamp(1.375rem,3vw,1.75rem)}
h3{font-size:1.125rem}
p{margin:0 0 var(--s4)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--brand-soft);outline-offset:1px;box-shadow:0 0 0 1px var(--brand)}
img,svg,video{max-width:100%;height:auto}
button{font:inherit}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:8px 14px;z-index:100;border-radius:0 0 8px 0}
.skip-link:focus{left:0;color:#fff}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
.section{padding:var(--s8) 0}
.section--tight{padding:var(--s6) 0}
.section--surface{background:var(--surface)}
.lead{font-size:1.125rem;color:var(--ink-soft);max-width:60ch}
.muted{color:var(--ink-soft)}
.small{font-size:.875rem}
.text-center{text-align:center}

/* Demo-Banner */
.demo-banner{
  background:var(--ink);color:#fff;
  font-size:.8125rem;text-align:center;
  padding:6px 12px;letter-spacing:.02em;
}
.demo-banner strong{color:var(--accent)}

/* Header */
.site-header{
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:64px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:32px;width:auto;display:block}
.main-nav{display:flex;align-items:center;gap:var(--s5)}
.main-nav a{color:var(--ink);font-weight:500;font-size:.9375rem}
.main-nav a:hover{color:var(--brand);text-decoration:none}
.main-nav a[aria-current="page"]{color:var(--brand);font-weight:600}
.nav-cta{display:inline-flex}
.main-nav a.btn-primary,.main-nav a.btn-primary:hover{color:#fff}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:8px;
  width:44px;height:44px;cursor:pointer;color:var(--ink);
  align-items:center;justify-content:center;
}
@media (max-width:840px){
  .nav-toggle{display:flex}
  .main-nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:var(--s3) var(--s4);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:var(--s3) 0;border-top:1px solid var(--line)}
  .main-nav a:first-child{border-top:0}
  .nav-cta{margin:var(--s3) 0}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 20px;
  border-radius:var(--radius-pill);border:1px solid transparent;
  font-weight:600;font-size:.9375rem;cursor:pointer;text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost{background:transparent;color:var(--brand);padding:6px 12px;min-height:36px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* Hero */
.hero{padding:var(--s8) 0 var(--s7);background:var(--paper)}
.hero-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.hero h1{margin-bottom:var(--s4)}
.hero-search{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3);
  box-shadow:var(--shadow-sm);margin-top:var(--s5);
}
@media (min-width:620px){.hero-search{flex-direction:row}}
.hero-search .field{flex:1}
.hero-search label{font-size:.8125rem;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:2px}
.hero-search input,.hero-search select{
  width:100%;border:0;background:transparent;font:inherit;color:var(--ink);
  padding:8px 0;
}
.hero-search input:focus{outline:none}
.hero-search .field:focus-within{border-radius:8px;box-shadow:0 0 0 3px var(--brand-soft)}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s5);font-size:.875rem;color:var(--ink-soft)}
.hero-stats strong{display:block;color:var(--ink);font-size:1.25rem;font-family:var(--font-head)}

/* Sektionen / Grids */
.grid{display:grid;gap:var(--s4)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media (min-width:480px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
.card, .card-title{overflow-wrap:break-word;word-break:break-word;min-width:0}
.kat-tile .card-title{hyphens:auto}

/* Cards */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:var(--s3);
}
.card--link:hover{border-color:var(--brand);text-decoration:none;box-shadow:var(--shadow-md)}
.card .card-title{font-family:var(--font-head);font-size:1.0625rem;font-weight:600;color:var(--ink);margin:0}
.card .card-sub{font-size:.875rem;color:var(--ink-soft)}
.card-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.price{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--ink)}
.price small{font-weight:500;font-size:.8125rem;color:var(--ink-soft);font-family:var(--font-body)}

/* Kategorie-Kachel */
.kat-tile{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;color:var(--ink)}
.kat-tile .icon{
  width:44px;height:44px;border-radius:10px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;color:var(--brand);flex-shrink:0;
}
.kat-tile .count{font-size:.8125rem;color:var(--ink-soft)}

/* Badges */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:600;line-height:1;
  padding:5px 10px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  white-space:nowrap;
}
.badge .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.badge-usa .dot{background:var(--bad)}
.badge-usa{color:var(--bad);border-color:#e5c3bc;background:#faf0ee}
.badge-eu .dot{background:var(--warn)}
.badge-eu{color:#8a5a10;border-color:#eedcbe;background:#fdf6e8}
.badge-lokal .dot{background:var(--ok)}
.badge-lokal{color:var(--ok);border-color:#c4dcc6;background:#eef6ef}
.badge-verified{color:var(--brand);border-color:var(--brand-soft);background:var(--brand-soft)}
.badge-demo{color:var(--ink-soft)}

/* Sterne */
.stars{position:relative;display:inline-flex;line-height:1;flex-shrink:0}
.stars .stars-back{color:var(--line);display:inline-flex}
.stars .stars-front{position:absolute;left:0;top:0;overflow:hidden;color:var(--accent);display:inline-flex;white-space:nowrap}
.stars svg{width:16px;height:16px;flex-shrink:0}

/* Stepper (Check) */
.stepper{margin:var(--s6) 0}
.stepper-bar{
  height:6px;background:var(--line);border-radius:var(--radius-pill);overflow:hidden;
}
.stepper-fill{height:100%;background:var(--brand);width:0;transition:width .3s ease;border-radius:var(--radius-pill)}
.stepper-meta{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--ink-soft);margin-top:var(--s2)}
.check-step{display:none}
.check-step.active{display:block}
.choice-grid{display:grid;gap:var(--s3);grid-template-columns:1fr;margin:var(--s4) 0}
@media (min-width:560px){.choice-grid{grid-template-columns:repeat(2,1fr)}}
.choice{
  display:flex;gap:var(--s3);align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4);background:var(--surface);cursor:pointer;
}
.choice:hover{border-color:var(--brand)}
.choice input{margin-top:3px;accent-color:var(--brand);width:18px;height:18px;flex-shrink:0}
.choice.selected{border-color:var(--brand);background:var(--brand-soft)}
.choice .choice-label{font-weight:600}
.choice .choice-hint{font-size:.8125rem;color:var(--ink-soft)}
.check-nav{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}

/* Ergebnis */
.result-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);margin:var(--s6) 0}
.amp-select{display:flex;gap:var(--s3);flex-wrap:wrap}
.amp-option{flex:1;min-width:140px}

/* Filterbar (Angebote) */
.filterbar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4);margin:var(--s5) 0;
}
.filterbar form{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:720px){.filterbar form{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.filterbar form{grid-template-columns:repeat(6,1fr)}}
.filterbar label{font-size:.75rem;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:4px}
.filterbar select,.filterbar input{
  width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:var(--surface);color:var(--ink);
}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s4) 0}
.toolbar .count{color:var(--ink-soft);font-size:.875rem}
.pager{display:flex;gap:var(--s2);justify-content:center;margin:var(--s6) 0;flex-wrap:wrap}
.pager a,.pager span{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
  padding:0 12px;font-size:.9375rem;
}
.pager .current{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Detail-Layout */
.detail-grid{display:grid;gap:var(--s6)}
@media (min-width:960px){.detail-grid{grid-template-columns:1fr 340px}}
.price-box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);position:sticky;top:88px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:var(--s3);
}
.list-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.list-check li{padding-left:26px;position:relative}
.list-check li::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--brand-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b6e4f" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg>') center/10px no-repeat;
}
.rating-row{display:flex;align-items:center;gap:var(--s3);font-size:.875rem}
.review{border-top:1px solid var(--line);padding:var(--s4) 0}
.review .subscores{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:.8125rem;color:var(--ink-soft);margin-top:var(--s2)}

/* Formulare */
form .form-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:640px){form .form-grid{grid-template-columns:repeat(2,1fr)}form .form-grid .full{grid-column:1/-1}}
.field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:4px}
.field .hint{font-size:.75rem;color:var(--ink-soft);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:var(--surface);color:var(--ink);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.field .error{color:var(--bad);font-size:.8125rem;margin-top:4px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad)}
.field.invalid .error{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.8125rem;color:var(--ink-soft)}
.form-success{
  background:var(--brand-soft);border:1px solid var(--brand);border-radius:var(--radius);
  padding:var(--s5);color:var(--ink);
}
.form-error-box{background:#faf0ee;border:1px solid var(--bad);border-radius:var(--radius);padding:var(--s4);color:var(--bad);font-size:.9375rem;display:none}

/* Steps "So funktioniert's" */
.steps{counter-reset:step;display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
.step::before{
  counter-increment:step;content:counter(step);
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;
  font-weight:700;margin-bottom:var(--s3);font-family:var(--font-head);
}
.step h3{margin-bottom:var(--s2)}
.tracks{display:grid;gap:var(--s5)}
@media (min-width:900px){.tracks{grid-template-columns:1fr 1fr}}
.track-tabs{display:flex;gap:var(--s2);margin-bottom:var(--s5)}
.track-tab{
  padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--ink);
}
.track-tab[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:var(--s3) 0}
.faq summary{
  cursor:pointer;font-weight:600;list-style:none;padding:var(--s3) 0;
  display:flex;justify-content:space-between;gap:var(--s3);align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:10px;height:10px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .2s;flex-shrink:0;margin-right:6px;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{color:var(--ink-soft);margin:0 0 var(--s3)}

/* Footer */
.site-footer{background:var(--ink);color:#cfd6dd;padding:var(--s8) 0 var(--s6);margin-top:var(--s8)}
.site-footer a{color:#cfd6dd;font-size:.875rem}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media (min-width:720px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-col h3{color:#fff;font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-body);margin-bottom:var(--s3)}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.footer-bottom{
  border-top:1px solid #2a3138;margin-top:var(--s6);padding-top:var(--s5);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  font-size:.8125rem;color:#8b95a1;
}

/* Sektions-Abstand untereinander */
.section + .section, .section + .section--tight, .section--tight + .section, .section--tight + .section--tight{padding-top:var(--s7)}
.section--tight + .section--tight, .section + .section--tight{padding-top:var(--s7)}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
details summary:focus-visible{outline:3px solid var(--brand-soft);outline-offset:2px}
.track-tab:focus-visible{outline:3px solid var(--brand-soft);box-shadow:0 0 0 1px var(--brand)}

/* Utilities */
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.mt-4{margin-top:var(--s4)}.mt-6{margin-top:var(--s6)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.loading{display:flex;align-items:center;gap:var(--s3);color:var(--ink-soft);font-size:.9375rem}
.spinner{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}