/* GlasfaserTeam — Landing Page
   Tokens + Komponenten sind 1:1 aus dem Claude-Design-System
   "GlasfaserTeam Design System" uebernommen. Nicht frei aendern —
   Aenderungen gehoeren ins Design System und werden von dort kopiert.
   Nur der Block "LANDING" am Ende ist seitenspezifisch. */

/* ==== TOKENS: FONTS — lokal, kein Aufruf bei Google ==== */
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
:root{--font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;--font-sans:"Manrope","Helvetica Neue",Arial,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ============================ TOKENS: COLORS ============================ */
:root{
--blue-50:#EEF0FF;--blue-100:#DDE1FF;--blue-200:#BAC1FF;--blue-300:#8E99FF;--blue-400:#5C6BF5;--blue-500:#2B3BEA;--blue-600:#1E2BC4;--blue-700:#18229A;--blue-800:#141B72;--blue-900:#0F1450;
--lime-50:#F6FFDE;--lime-100:#EBFFB4;--lime-200:#DBFF74;--lime-300:#C9F93B;--lime-400:#B4F000;--lime-500:#9BCF00;--lime-600:#7BA400;--lime-700:#5C7A00;
--teal-100:#C9F7EF;--teal-300:#5FE3CE;--teal-500:#00C2A8;--teal-700:#00806F;
--coral-100:#FFDCE0;--coral-300:#FF97A2;--coral-500:#FF4D5E;--coral-700:#C21F30;
--amber-100:#FFEBC2;--amber-300:#FFCC66;--amber-500:#FFB020;--amber-700:#B87400;
--ink-900:#080B18;--ink-800:#0F1426;--ink-700:#1A2036;--ink-600:#2C3450;--ink-500:#4A5570;--ink-400:#6E7A96;--ink-300:#9AA4BC;--ink-200:#C3CADA;--ink-100:#E2E6EF;--ink-50:#F1F3F8;--ink-25:#F8F9FC;--white:#FFFFFF;
--surface-page:var(--ink-25);--surface-card:var(--white);--surface-sunken:var(--ink-50);--surface-inverse:var(--ink-900);--surface-inverse-raised:var(--ink-800);--surface-brand:var(--blue-500);--surface-brand-soft:var(--blue-50);--surface-accent:var(--lime-400);--surface-accent-soft:var(--lime-50);
--text-strong:var(--ink-900);--text-body:var(--ink-700);--text-color-body:var(--ink-700);--text-muted:var(--ink-400);--text-on-brand:var(--white);--text-on-accent:var(--ink-900);--text-on-inverse:var(--ink-50);--text-muted-inverse:var(--ink-300);--text-link:var(--blue-500);--text-link-hover:var(--blue-700);
--border-subtle:var(--ink-100);--border-default:var(--ink-200);--border-strong:var(--ink-900);--border-inverse:rgba(255,255,255,.14);--focus-ring:var(--blue-500);
--status-success:var(--teal-500);--status-success-soft:var(--teal-100);--status-warning:var(--amber-500);--status-warning-soft:var(--amber-100);--status-danger:var(--coral-500);--status-danger-soft:var(--coral-100);--status-info:var(--blue-500);--status-info-soft:var(--blue-50);
}

/* ========================= TOKENS: TYPOGRAPHY ========================= */
:root{
--text-display-1:700 clamp(44px,5.4vw,76px)/1.02 var(--font-display);
--text-display-2:700 clamp(34px,3.8vw,54px)/1.06 var(--font-display);
--text-h1:600 40px/1.1 var(--font-display);
--text-h2:600 30px/1.15 var(--font-display);
--text-h3:600 22px/1.25 var(--font-display);
--text-h4:700 17px/1.3 var(--font-sans);
--text-lead:500 20px/1.55 var(--font-sans);
--text-body-lg:500 17px/1.6 var(--font-sans);
--text-body:500 15px/1.6 var(--font-sans);
--text-body-sm:500 13.5px/1.55 var(--font-sans);
--text-label:600 13px/1.2 var(--font-sans);
--text-caption:600 11.5px/1.3 var(--font-sans);
--text-mono:500 13px/1.5 var(--font-mono);
--text-eyebrow:700 12px/1.2 var(--font-mono);
--tracking-display:-0.025em;--tracking-tight:-0.012em;--tracking-normal:0;--tracking-eyebrow:0.12em;--tracking-caption:0.06em;
}

/* ===================== TOKENS: SPACING / RADIUS / ELEV ================= */
:root{
--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:104px;--space-13:136px;
--gutter:24px;--section-y:104px;--section-y-sm:64px;
--container-max:1240px;--container-narrow:760px;
--control-h-sm:34px;--control-h-md:42px;--control-h-lg:52px;
--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:26px;--radius-pill:999px;--radius-card:var(--radius-lg);--radius-control:var(--radius-sm);
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(8,11,24,.06);
--shadow-sm:0 2px 6px rgba(8,11,24,.06),0 1px 2px rgba(8,11,24,.04);
--shadow-md:0 8px 24px -8px rgba(8,11,24,.14),0 2px 6px rgba(8,11,24,.05);
--shadow-lg:0 24px 60px -20px rgba(8,11,24,.22),0 4px 12px rgba(8,11,24,.06);
--shadow-brand:0 16px 40px -14px rgba(43,59,234,.55);
--shadow-inset-line:inset 0 -1px 0 var(--border-subtle);
--overlay-scrim:rgba(8,11,24,.55);
--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
--dur-fast:120ms;--dur-base:200ms;--dur-slow:360ms;
--motion-hover:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}

/* ============================== BASE ================================== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-color-body);font:var(--text-body);letter-spacing:var(--tracking-normal);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-strong);letter-spacing:var(--tracking-display);text-wrap:balance}
h1{font:var(--text-h1)}h2{font:var(--text-h2)}h3{font:var(--text-h3)}h4{font:var(--text-h4);letter-spacing:var(--tracking-tight)}
p{margin:0}
a{color:var(--text-link);text-decoration-color:color-mix(in oklab,var(--text-link) 35%,transparent);text-underline-offset:3px;transition:var(--motion-hover)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
::selection{background:var(--lime-300);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}

/* ============================ CORE ==================================== */
.gt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:var(--text-label);letter-spacing:var(--tracking-tight);border:1px solid transparent;border-radius:var(--radius-control);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--motion-hover);height:var(--control-h-md);padding:0 18px}
.gt-btn--sm{height:var(--control-h-sm);padding:0 13px;font:var(--text-caption);letter-spacing:var(--tracking-tight)}
.gt-btn--lg{height:var(--control-h-lg);padding:0 26px;font:600 15px/1 var(--font-sans)}
.gt-btn--primary{background:var(--blue-500);color:var(--text-on-brand)}
.gt-btn--primary:hover{background:var(--blue-600);box-shadow:var(--shadow-brand)}
.gt-btn--primary:active{background:var(--blue-700);box-shadow:none;transform:translateY(1px)}
.gt-btn--accent{background:var(--lime-400);color:var(--text-on-accent)}
.gt-btn--accent:hover{background:var(--lime-300)}
.gt-btn--accent:active{background:var(--lime-500);transform:translateY(1px)}
.gt-btn--secondary{background:var(--white);color:var(--text-strong);border-color:var(--border-default)}
.gt-btn--secondary:hover{border-color:var(--ink-900);background:var(--ink-25)}
.gt-btn--secondary:active{background:var(--ink-50);transform:translateY(1px)}
.gt-btn--ghost{background:transparent;color:var(--text-strong)}
.gt-btn--ghost:hover{background:var(--ink-50)}
.gt-btn--inverse{background:var(--white);color:var(--ink-900)}
.gt-btn--inverse:hover{background:var(--lime-400)}
.gt-btn[disabled],.gt-btn[aria-disabled=true]{opacity:.42;pointer-events:none}
.gt-btn--block{width:100%}
.gt-btn__icon{display:inline-flex;width:16px;height:16px}
.gt-btn__icon svg{width:16px;height:16px;stroke-width:2.2}
.gt-logo{display:inline-flex;align-items:baseline;font-family:var(--font-display);font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--text-strong);text-decoration:none}
.gt-logo em{font-style:normal;color:var(--blue-500)}
.gt-logo--inverse{color:#fff}
.gt-logo--inverse em{color:var(--lime-400)}
.gt-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radius-xs);font:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;background:var(--ink-50);color:var(--ink-600)}
.gt-badge--brand{background:var(--blue-50);color:var(--blue-700)}
.gt-badge--accent{background:var(--lime-200);color:var(--lime-700)}
.gt-badge--success{background:var(--status-success-soft);color:var(--teal-700)}
.gt-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.gt-card{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--space-6);transition:var(--motion-hover)}
.gt-card--raised{box-shadow:var(--shadow-md);border-color:transparent}
.gt-card--inverse{background:var(--surface-inverse);border-color:var(--border-inverse);color:var(--text-on-inverse)}
.gt-card--inverse h3,.gt-card--inverse h4{color:#fff}
.gt-card--brand{background:var(--blue-500);border-color:transparent;color:#fff}
.gt-card--brand h3,.gt-card--brand h4{color:#fff}
.gt-card--pad-lg{padding:var(--space-8)}
.gt-stat{display:flex;flex-direction:column;gap:6px}
.gt-stat__value{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1;letter-spacing:var(--tracking-display);color:var(--text-strong)}
.gt-stat__label{font:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--text-muted)}
.gt-stat__hint{font:var(--text-body-sm);color:var(--text-muted)}
.gt-stat--inverse .gt-stat__value{color:#fff}
.gt-stat--inverse .gt-stat__label,.gt-stat--inverse .gt-stat__hint{color:var(--text-muted-inverse)}
.gt-stat--accent .gt-stat__value{color:var(--lime-400)}
.gt-sechead{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--container-narrow)}
.gt-sechead--center{margin:0 auto;text-align:center;align-items:center}
.gt-sechead__eyebrow{display:flex;align-items:center;gap:8px;font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-500)}
.gt-sechead__eyebrow::before{content:"";width:18px;height:2px;background:var(--lime-400)}
.gt-sechead__title{font:var(--text-display-2);letter-spacing:var(--tracking-display);color:var(--text-strong);margin:0}
.gt-sechead__sub{font:var(--text-lead);color:var(--text-muted)}
.gt-sechead--inverse .gt-sechead__title{color:#fff}
.gt-sechead--inverse .gt-sechead__sub{color:var(--text-muted-inverse)}
.gt-sechead--inverse .gt-sechead__eyebrow{color:var(--lime-400)}
.gt-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}
.gt-icon svg{width:100%;height:100%;stroke-width:2}

/* ============================ FORMS =================================== */
.gt-field{display:flex;flex-direction:column;gap:7px}
.gt-field__label{font:var(--text-label);color:var(--text-strong);letter-spacing:var(--tracking-tight)}
.gt-field__label span{color:var(--coral-500)}
.gt-field__hint{font:var(--text-body-sm);color:var(--text-muted)}
.gt-input,.gt-select,.gt-textarea{width:100%;height:var(--control-h-md);padding:0 13px;font:var(--text-body);color:var(--text-strong);background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-control);transition:var(--motion-hover);appearance:none}
.gt-input::placeholder{color:var(--ink-300)}
.gt-input:hover,.gt-select:hover{border-color:var(--ink-400)}
.gt-input:focus,.gt-select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-50)}
.gt-input--lg{height:var(--control-h-lg);font:var(--text-body-lg);padding:0 16px}
.gt-inputwrap{position:relative;display:flex;align-items:center}
.gt-inputwrap .gt-input{padding-left:38px}
.gt-inputwrap__icon{position:absolute;left:12px;display:inline-flex;color:var(--text-muted);pointer-events:none}
.gt-selectwrap{position:relative;display:flex;align-items:center}
.gt-selectwrap .gt-select{padding-right:36px}
.gt-selectwrap__caret{position:absolute;right:12px;display:inline-flex;color:var(--text-muted);pointer-events:none}
.gt-check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font:var(--text-body);color:var(--text-color-body)}
.gt-check input{position:absolute;opacity:0;width:0;height:0}
.gt-check__box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;margin-top:1px;border:1.5px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--white);color:transparent;transition:var(--motion-hover)}
.gt-check__box svg{width:13px;height:13px;stroke-width:3}
.gt-check:hover .gt-check__box{border-color:var(--blue-500)}
.gt-check input:checked + .gt-check__box{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.gt-check input:focus-visible + .gt-check__box{box-shadow:0 0 0 3px var(--blue-100)}

/* ============================ LAYOUT ================================== */
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-7)}
.sec{padding:var(--section-y) 0}
.sec--sm{padding:var(--section-y-sm) 0}
.hero{position:relative;background:var(--ink-900);color:var(--text-on-inverse);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-10);align-items:center;padding:var(--space-12) 0 var(--space-11)}
.hero__rule{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 calc(100% / 6 - 1px),rgba(255,255,255,.05) calc(100% / 6 - 1px) calc(100% / 6));background-size:calc(100% / 6) 100%}
.hero h1{font:var(--text-display-1);letter-spacing:var(--tracking-display);color:#fff}
.hero p.lead{font:var(--text-lead);color:var(--text-muted-inverse);max-width:46ch;margin-top:var(--space-5)}
.hero__panel{position:relative;background:var(--ink-800);border:1px solid var(--border-inverse);border-radius:var(--radius-lg);padding:var(--space-6)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-subtle);border-block:1px solid var(--border-subtle)}
.strip>div{background:var(--surface-page);padding:var(--space-6)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
.step{background:var(--surface-card);padding:var(--space-6)}
.step__no{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);color:var(--blue-500)}
.step h4{margin-top:var(--space-4)}
.step p{font:var(--text-body-sm);color:var(--text-muted);margin-top:var(--space-2)}
.feat{display:flex;flex-direction:column;gap:var(--space-4)}
.feat__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-md);background:var(--blue-50);color:var(--blue-500)}
.cta{background:var(--blue-500);color:#fff;border-radius:var(--radius-xl);padding:var(--space-10);display:grid;grid-template-columns:1.3fr .7fr;gap:var(--space-8);align-items:center}
.cta h2{color:#fff;font:var(--text-display-2);letter-spacing:var(--tracking-display)}
.tbl{width:100%;border-collapse:collapse;font:var(--text-body)}
.tbl th{text-align:left;font:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--text-muted);padding:0 var(--space-4) var(--space-3);border-bottom:1px solid var(--border-default)}
.tbl td{padding:var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--text-color-body)}
.tbl tr:last-child td{border-bottom:0}
.tbl td strong{color:var(--text-strong)}
.quote{font:600 26px/1.35 var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-strong)}

/* ============================ LANDING ================================= */
/* Nur fuer diese Seite. Ein Ziel, ein Formular, keine Navigation. */
.nav{position:sticky;top:0;z-index:20;height:72px;display:flex;align-items:center;background:var(--ink-900);border-bottom:1px solid var(--border-inverse)}
.nav__in{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav__right{display:flex;align-items:center;gap:var(--space-5)}
.nav__tel{display:inline-flex;align-items:center;gap:8px;font:var(--text-label);color:#fff;text-decoration:none}
.nav__tel:hover{color:var(--lime-400)}
.nav__tel svg{width:16px;height:16px;stroke-width:2}

/* Fix: .hero__grid ueberschreibt im Design System das Padding von .wrap.
   Auf schmalen Schirmen klebt der Inhalt sonst am Rand. */
.hero__grid{padding-inline:var(--space-7)}

/* Formular auf Ink-Flaeche */
.hero__panel .gt-field__label{color:#fff}
.hero__panel .gt-field__hint{color:var(--text-muted-inverse)}
.hero__panel .gt-check{color:var(--text-muted-inverse);font:var(--text-body-sm)}
.hero__panel .gt-check a{color:var(--lime-400)}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.panel__title{font:var(--text-h3);color:#fff}
.panel__step{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);color:var(--lime-400)}
.progress{height:3px;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:var(--space-6)}
.progress__bar{height:100%;width:50%;background:var(--lime-400);transition:width var(--dur-slow) var(--ease-out)}
.form__rows{display:flex;flex-direction:column;gap:var(--space-4)}
.form__pair{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-3)}
.form__pair--even{grid-template-columns:1fr 1fr}
.form__foot{margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.form__note{font:var(--text-body-sm);color:var(--text-muted-inverse)}
.form__back{background:none;border:0;padding:0;font:var(--text-body-sm);color:var(--text-muted-inverse);cursor:pointer;text-align:left}
.form__back:hover{color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Kennzeichnung "wir vermitteln, wir bauen nicht" */
.claim{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border-inverse);border-radius:var(--radius-sm);font:var(--text-body-sm);color:var(--text-muted-inverse);margin-top:var(--space-6)}
.claim svg{width:16px;height:16px;stroke-width:2;color:var(--lime-400)}

/* Empfehlungs-Kante im Vergleich (einzige farbige Linkskante im System) */
.tbl tr.rec td{background:var(--lime-50)}
.tbl tr.rec td:first-child{box-shadow:inset 3px 0 0 var(--lime-400)}

/* Angebots-Stack */
.stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.stack li{display:flex;align-items:flex-start;gap:12px;padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle)}
.stack li:last-child{border-bottom:0}
.stack svg{flex:none;width:18px;height:18px;stroke-width:2;color:var(--blue-500);margin-top:2px}
.price{display:flex;align-items:baseline;gap:12px;margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-strong)}
.price__val{font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1;letter-spacing:var(--tracking-display);color:var(--text-strong)}

/* Einwaende */
.faq{border-top:1px solid var(--border-subtle)}
.faq__item{border-bottom:1px solid var(--border-subtle);padding:var(--space-6) 0}
.faq__q{font:var(--text-h4);color:var(--text-strong)}
.faq__a{margin-top:var(--space-2);color:var(--text-color-body);max-width:var(--container-narrow)}

/* Footer */
.foot{background:var(--ink-900);color:var(--text-muted-inverse);padding:var(--space-9) 0}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;font:var(--text-body-sm)}
.foot a{color:var(--text-muted-inverse);text-decoration:none}
.foot a:hover{color:#fff}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5)}

/* Danke-Seite */
.thanks{min-height:100vh;display:flex;align-items:center;background:var(--ink-900)}
.thanks__box{max-width:640px;margin:0 auto;text-align:center;color:var(--text-on-inverse);padding:var(--space-8) var(--space-7)}
.thanks h1{font:var(--text-display-2);color:#fff;letter-spacing:var(--tracking-display)}


/* Textarea (aus components/forms) */
.gt-textarea{height:auto;min-height:120px;padding:11px 13px;line-height:1.55;resize:vertical}
.gt-textarea::placeholder{color:var(--ink-300)}
.gt-textarea:hover{border-color:var(--ink-400)}
.gt-textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-50)}

/* Menue. Aufklappen ueber <details> — nativ, mit Tastatur bedienbar, ohne ARIA-Luegen. */
.menu{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-8);margin-right:auto}
.menu__link,.menu__btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;background:none;border-radius:var(--radius-control);font:var(--text-label);letter-spacing:var(--tracking-tight);color:#fff;text-decoration:none;cursor:pointer;transition:var(--motion-hover)}
.menu__link:hover,.menu__btn:hover{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 -2px 0 var(--lime-400)}
.menu__link[aria-current=page]{box-shadow:inset 0 -2px 0 var(--blue-400)}
.menu__btn svg{width:15px;height:15px;stroke-width:2;transition:transform var(--dur-base) var(--ease-out)}
.menu__item{position:relative}
.menu__item[open] .menu__btn{background:rgba(255,255,255,.07)}
.menu__item[open] .menu__btn svg{transform:rotate(180deg)}
.menu__item summary{list-style:none}
.menu__item summary::-webkit-details-marker{display:none}
.menu__drop{position:absolute;top:calc(100% + 10px);left:0;z-index:30;min-width:320px;margin:0;padding:var(--space-2);list-style:none;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.menu__drop a{display:block;padding:11px 12px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-strong);font:var(--text-label);letter-spacing:var(--tracking-tight)}
.menu__drop a:hover{background:var(--ink-50)}
.menu__drop span{display:block;margin-top:3px;font:var(--text-body-sm);color:var(--text-muted)}

/* Kopf einer Unterseite: gleiche Ink-Flaeche, nur flacher als der Hero. */
.phero{position:relative;background:var(--ink-900);color:var(--text-on-inverse);overflow:hidden}
.phero__in{position:relative;padding:var(--space-11) 0 var(--space-10);max-width:860px}
.phero h1{font:var(--text-display-2);letter-spacing:var(--tracking-display);color:#fff;margin-top:var(--space-5)}
.phero p.lead{font:var(--text-lead);color:var(--text-muted-inverse);max-width:56ch;margin-top:var(--space-5)}
.phero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-7);flex-wrap:wrap;align-items:center}
/* Ghost-Button auf Ink: heller Hover statt --ink-50, sonst verschwindet die Schrift. */
.phero__actions .gt-btn--ghost{border-color:var(--border-inverse)}
.phero__actions .gt-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* Schluss-Formular im Marken-Block. Weisse Karte auf Signalblau. */
.cta--form{grid-template-columns:1fr .95fr;align-items:start}
.cta--form .gt-card{color:var(--text-color-body)}
.cta--form .gt-card h3{color:var(--text-strong)}
.cta__points{display:flex;flex-direction:column;gap:10px;margin-top:var(--space-6)}
.cta__points span{display:flex;align-items:center;gap:10px;font:var(--text-body);color:rgba(255,255,255,.92)}
.cta__points svg{flex:none;width:18px;height:18px;stroke-width:2;color:var(--lime-400)}
.cta .nav__tel{color:#fff}
.cta .nav__tel:hover{color:var(--lime-400)}

/* Value Ladder: vier Stufen, die erste ist der Einstieg ohne Gegenleistung. */
.ladder{display:grid;gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-8)}
.ladder__step{background:var(--surface-card);padding:var(--space-6);display:grid;grid-template-columns:56px 1fr 230px;gap:var(--space-6);align-items:start}
.ladder__no{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;letter-spacing:var(--tracking-display);color:var(--ink-200)}
.ladder__step--free{background:var(--lime-50);box-shadow:inset 3px 0 0 var(--lime-400)}
.ladder__step--free .ladder__no{color:var(--lime-600)}
.ladder__body p{margin-top:var(--space-2);color:var(--text-muted);font:var(--text-body-sm)}
.ladder__meta{font:var(--text-body-sm);color:var(--text-color-body)}
.ladder__meta strong{display:block;margin-bottom:4px;font:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--text-muted)}
.ladder__meta + .ladder__meta{margin-top:var(--space-4)}

/* Kontaktseite: Formular links, Wege zu uns rechts. */
.contact{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-9);align-items:start}
.contact__line{display:flex;align-items:flex-start;gap:12px;padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle)}
.contact__line:last-child{border-bottom:0}
.contact__line svg{flex:none;width:18px;height:18px;stroke-width:2;color:var(--blue-500);margin-top:2px}

/* ============================ RESPONSIVE ============================== */
@media (max-width:1000px){
  .contact{grid-template-columns:1fr;gap:var(--space-8)}
  .cta--form{grid-template-columns:1fr}
  .ladder__step{grid-template-columns:44px 1fr;gap:var(--space-4)}
  .ladder__step>div:last-child{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--space-6)}
  .ladder__meta+.ladder__meta{margin-top:0}
  .phero__in{padding:var(--space-9) 0 var(--space-8)}
  .hero__grid{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-10) var(--space-7) var(--space-9)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr;padding:var(--space-8)}
  .sec{padding:var(--section-y-sm) 0}
}
@media (max-width:920px){
  /* Menue rutscht in eine zweite Zeile. Kein Burger, kein JavaScript.
     Der Kopf klebt hier nicht: zwei Zeilen wuerden dauerhaft ein Fuenftel
     des Bildschirms belegen. Der CTA steht im Hero und am Seitenende. */
  .nav{position:static;height:auto;padding:12px 0}
  .nav__tel{min-height:44px}
  .menu__link,.menu__btn{height:44px}
  .nav__in{flex-wrap:wrap;row-gap:var(--space-3)}
  .menu{order:3;width:100%;margin:0;align-items:flex-start}
  .menu__drop{position:static;min-width:0;margin-top:var(--space-2);box-shadow:none}
}
@media (max-width:640px){
  .wrap{padding:0 var(--space-5)}
  /* Bedienelemente groesser: Finger brauchen 44 px, iOS zoomt unter 16 px Schrift. */
  :root{--control-h-sm:40px;--control-h-md:48px;--control-h-lg:52px}
  .gt-input,.gt-select,.gt-textarea{font-size:16px}
  .gt-textarea{min-height:132px}
  .foot__links a{display:inline-flex;align-items:center;min-height:44px}
  .nav .gt-btn--sm{height:44px;padding:0 16px}
  .gt-logo{align-items:center;min-height:44px}
  .gt-check{padding:var(--space-1) 0}
  /* Formularreihen immer untereinander. Zwei Felder nebeneinander sind hier ~100 px breit. */
  .form__pair,.form__pair--even{grid-template-columns:1fr}
  /* Marken-Block: weniger Innenabstand, damit die Karte darin Platz hat. */
  .cta{padding:var(--space-6)}
  .cta--form .gt-card{padding:var(--space-5)}
  /* Formular soll nach einem Wisch sichtbar sein: Hero-Typo kleiner. */
  .hero h1{font-size:34px;line-height:1.08}
  .hero p.lead{font:var(--text-body-lg);margin-top:var(--space-4)}
  .hero__grid{padding:var(--space-8) var(--space-5) var(--space-9);gap:var(--space-6)}
  .claim{margin-top:var(--space-4)}
  .hero__panel{padding:var(--space-5)}
  .steps{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .form__pair{grid-template-columns:1fr}
  .nav__tel span{display:none}
  .tbl__scroll{overflow-x:auto}
  .tbl{min-width:560px}
}

/* ============================ DRUCK ==================================== */
/* Vergleichsblatt: über den Druckdialog des Browsers wird daraus ein PDF. */
.druck-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
@media print{
  .nicht-drucken{display:none !important}
  body{background:#fff}
  .sec{padding:0}
  .gt-card{border:1px solid var(--ink-200);box-shadow:none;break-inside:avoid}
  .tbl__scroll{overflow:visible}
  .tbl{min-width:0;font-size:11pt}
  .tbl tr.rec td{background:var(--lime-50) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{text-decoration:none;color:var(--ink-900)}
  @page{margin:16mm}
}

/* ==================== LEAD-MAGNET (Checkliste) ========================= */
.magnet{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-9);align-items:start;padding:var(--space-8)}
@media (max-width:1000px){.magnet{grid-template-columns:1fr;gap:var(--space-7)}}

/* ============================ COOKIE-BANNER ============================ */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--ink-900);color:var(--text-on-inverse);border-top:1px solid var(--border-inverse)}
.cookie-banner__in{max-width:var(--container-max);margin:0 auto;padding:var(--space-5) var(--space-7);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.cookie-banner__in p{font:var(--text-body-sm);color:var(--text-muted-inverse);max-width:70ch}
.cookie-banner__in strong{color:#fff}
@media (max-width:640px){.cookie-banner__in{padding:var(--space-4) var(--space-5);flex-direction:column;align-items:stretch;text-align:left}}