/* ==========================================================================
   Layer-X Systemlösungen GmbH — Managed IT (Variante Produktseite)
   Aufbau nach Vorlage „Produktseite mit Oberflächen", Marke Layer-X:
   Logo-Verlauf #0AB3FE → #2B7EFE → #5F31FF, Schriften Syne + DM Sans
   wie auf layer-x-it.de.
   ========================================================================== */

@font-face{
  font-family:'Syne';
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url('../fonts/syne.woff2') format('woff2');
  /* Ziffern kommen aus DM Sans: Die kreisrunde Null von Syne liest sich klein wie ein „o" */
  unicode-range:U+0000-002F,U+003A-00DE,U+00E0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/dmsans.woff2') format('woff2');
}

:root{
  --ink:#0A0E1A;
  --ink-2:#3A4259;
  --ink-3:#586080;          /* 5,9:1 auf Weiss, 5,3:1 auf --grau */
  --paper:#FFFFFF;
  --grau:#F2F4F9;
  --karte:#EDF0F6;
  --line:rgba(10,14,26,.08);
  --deep:#070C18;

  /* Weiss auf dem Cyan-Ende ergibt nur 2,36:1 — deshalb zwei Verläufe.
     --verlauf traegt Text (durchgehend >= 5,6:1), --verlauf-deko ist nur Deko. */
  --brand:#2B7EFE;
  --brand-text:#2456C8;     /* 6,48:1 auf Weiss */
  --brand-soft:#E6EEFF;
  --verlauf:linear-gradient(118deg,#1C5FD9 0%,#3A62F0 45%,#5F31FF 100%);
  --verlauf-deko:linear-gradient(118deg,#0AB3FE 0%,#2B7EFE 50%,#5F31FF 100%);
  --verlauf-hell:linear-gradient(100deg,#6FD0FF 0%,#9DB8FF 50%,#BCA8FF 100%);
  --stern:#F5A524;

  --bund:clamp(18px,4vw,32px);
  --breit:1180px;
  --r-knopf:10px;
  --r-klein:14px;
  --r-karte:20px;

  --lift-1:0 1px 2px rgba(10,14,26,.04);
  --lift-2:0 2px 6px rgba(10,14,26,.04),0 12px 28px rgba(10,14,26,.05);
  --lift-3:0 2px 8px rgba(10,14,26,.05),0 22px 48px rgba(10,14,26,.06);

  /* Bewegung — Charakter „Präzise" (IT/B2B): 0,45 s, Feder mit Hauch Überschwingen */
  --e-soft:cubic-bezier(.22,1,.36,1);
  --e-ui:cubic-bezier(.4,0,.2,1);
  --t-rv:.45s;
  --t-ui:.16s;
  --rv-y:10px;
}
@supports (animation-timing-function:linear(0,1)){
  :root{
    --e-soft:linear(0,.0492,.1613,.2979,.4356,.5617,.6701,.759,.8294,.8833,.9233,.9521,.9721,.9857,.9944,.9996,1.0026,1.0039,1.0043,1.0042,1.0037,1.0031,1.0025,1);
  }
}
@media (max-width:700px){:root{--rv-y:6px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:'Syne','DM Sans',system-ui,sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,1.2rem + 3vw,3.5rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,1.15rem + 2vw,2.7rem);letter-spacing:-.03em}
h3{font-size:clamp(1.1rem,1rem + .35vw,1.3rem);line-height:1.25;letter-spacing:-.015em}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:700}

/* Farbiger Teil der Überschrift: immer eigene Zeile */
.akz{
  display:block;
  background:var(--verlauf);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  padding-bottom:.06em;
}
.akz-hell{
  display:block;
  background:var(--verlauf-hell);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.fuehr{font-size:clamp(1.02rem,.98rem + .2vw,1.14rem);color:var(--ink-2)}
.klein{font-size:.9rem;color:var(--ink-3)}

.wrap{width:min(var(--breit),100% - var(--bund)*2);margin-inline:auto}
.sekt{padding:clamp(64px,8vw,108px) 0}
.kopf-mitte{max-width:760px;margin:0 auto clamp(36px,4.5vw,56px);text-align:center}
.kopf-mitte .fuehr{margin-top:16px}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;
  border:0;border-radius:var(--r-knopf);
  font-weight:700;font-size:1rem;line-height:1.2;
  text-decoration:none;text-align:center;
  cursor:pointer;
  transition:transform var(--t-ui) var(--e-ui),box-shadow var(--t-ui) var(--e-ui),background-color var(--t-ui) var(--e-ui);
}
.knopf svg{width:19px;height:19px;flex:none}
.knopf-haupt{
  background:var(--verlauf);color:#fff;
  box-shadow:0 2px 6px rgba(43,126,254,.22),0 12px 26px rgba(58,98,240,.2);
}
.knopf-gross{min-height:64px;font-size:1.08rem;padding:18px 30px;width:100%}
.knopf-rand{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(10,14,26,.14)}
.knopf-hell{background:#fff;color:var(--ink)}
@media (hover:hover){
  .knopf-haupt:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(43,126,254,.26),0 16px 34px rgba(58,98,240,.26)}
  .knopf-rand:hover,.knopf-hell:hover{transform:translateY(-2px)}
}
.knopf:active{transform:translateY(0);transition-duration:60ms}
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{outline:3px solid #3A62F0;outline-offset:3px;border-radius:6px}
.knopf:focus-visible{outline-offset:4px;border-radius:var(--r-knopf)}

.sr{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 14px;z-index:200;border-radius:8px}
.sr:focus{left:12px;top:12px}

/* ---------- Kopfzeile ---------- */
.kopfleiste{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--e-ui),box-shadow .2s var(--e-ui);
}
.kopfleiste.fest{border-bottom-color:var(--line);box-shadow:0 6px 20px rgba(10,14,26,.04)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.marke img{width:168px;height:auto}
.menue{display:flex;gap:30px;margin:0 auto 0 12px;padding:0;list-style:none}
.menue a{font-size:.96rem;font-weight:500;text-decoration:none;color:var(--ink-2);transition:color var(--t-ui)}
.menue a:hover{color:var(--ink)}
.kopf-rechts{display:flex;align-items:center;gap:18px}
.kopf-tel{display:flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;font-size:.98rem}
.kopf-tel svg{width:18px;height:18px;color:var(--brand-text)}
.kopf-rechts .knopf{min-height:44px;padding:10px 18px;font-size:.95rem}
.kopf-mobil{display:none;gap:8px}
.rund{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;border-radius:var(--r-knopf);font-weight:700;font-size:.9rem;text-decoration:none;height:44px}
.rund svg{width:18px;height:18px}
.rund-tel{background:var(--verlauf);color:#fff}
.rund-wa{background:#E7F8EE;color:#0B6B34}

/* ---------- FAQ ---------- */
.faq-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,72px);align-items:start}
.faq-raster > div:first-child{position:sticky;top:104px}
.faq-raster .fuehr{margin:16px 0 22px}
.akk{border-top:1px solid var(--line)}
.akk-f{border-bottom:1px solid var(--line)}
.akk-f button{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:'Syne','DM Sans',sans-serif;font-weight:700;font-size:clamp(1.02rem,.98rem + .25vw,1.15rem);letter-spacing:-.015em;line-height:1.3;
}
.akk-f button svg{width:20px;height:20px;flex:none;color:var(--brand-text);transition:transform .3s var(--e-soft)}
.akk-f button[aria-expanded="true"] svg{transform:rotate(45deg)}
.akk-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--e-soft)}
.akk-a.offen{grid-template-rows:1fr}
.akk-a > div{overflow:hidden}
.akk-a p{color:var(--ink-2);padding-right:36px}
.akk-a > div > div{padding-bottom:22px}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--grau);padding:clamp(52px,6vw,76px) 0 28px;font-size:.95rem}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr));gap:36px}
.fuss .marke img{width:168px}
.fuss-satz{color:var(--ink-2);margin:18px 0 20px;max-width:360px}
.fuss-siegel{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fuss-siegel img{height:40px;width:auto;border-radius:8px;background:#fff;padding:5px 8px;box-shadow:var(--lift-1)}

.fuss h4{font-family:'DM Sans',sans-serif;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text);margin:4px 0 14px}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fuss a{text-decoration:none;color:var(--ink-2)}
.fuss a:hover{color:var(--ink)}
.fuss address{font-style:normal;color:var(--ink-2)}
.fuss-unten{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3);font-size:.86rem;
}
.fuss-unten a{color:var(--ink-3)}
.link-knopf{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-2);font-size:inherit;text-align:left;display:inline-flex;align-items:center;min-height:44px}
.link-knopf:hover{color:var(--ink)}

/* ---------- Overlays: Modal, Pop-up, Cookie-Wall ---------- */
.overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(7,12,24,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--e-ui),visibility 0s linear .25s;
}
.overlay.auf{opacity:1;visibility:visible;transition:opacity .25s var(--e-ui),visibility 0s}
.overlay-karte{
  position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  background:#fff;border-radius:var(--r-karte);
  padding:clamp(24px,4vw,38px);
  box-shadow:0 30px 80px rgba(7,12,24,.3);
  transform:translateY(10px);transition:transform .45s var(--e-soft);
}
.overlay.auf .overlay-karte{transform:none}
.zu{position:absolute;right:12px;top:12px;border-radius:10px;display:grid;place-items:center;background:var(--grau);border:0;cursor:pointer;width:44px;height:44px}
.zu svg{width:18px;height:18px}

/* Quiz */
.quiz-kopf{padding-right:44px}
.quiz-kopf .kicker{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text);margin:0 0 8px}
.quiz-kopf h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)}
.quiz-kopf p{color:var(--ink-2);margin-top:8px;font-size:.96rem}
.fortschritt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:22px 0 22px}
.fortschritt i{height:5px;border-radius:5px;background:var(--karte);position:relative;overflow:hidden}
.fortschritt i::after{content:'';position:absolute;inset:0;background:var(--verlauf-deko);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-soft)}
.fortschritt i.an::after{transform:scaleX(1)}
.schritt{display:none}
.schritt.an{display:block;animation:rein .35s var(--e-soft)}
@keyframes rein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.frage{font-family:'Syne','DM Sans',sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:-.015em;margin:0 0 14px}
.wahl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.wahl button{
  min-height:58px;padding:12px 14px;border-radius:var(--r-klein);
  background:#fff;border:1.5px solid rgba(10,14,26,.13);cursor:pointer;
  font-weight:600;font-size:.95rem;line-height:1.3;text-align:left;
  transition:border-color var(--t-ui),background-color var(--t-ui),transform var(--t-ui);
}
.wahl button:hover{border-color:var(--brand);background:#F6F9FF}
.wahl button:active{transform:scale(.99)}
.zurueck{margin-top:14px;background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:.9rem;min-height:44px;padding:10px 0}
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.feld label{font-size:.88rem;font-weight:600;color:var(--ink-2)}
.feld input,.feld textarea{
  width:100%;min-height:52px;padding:13px 14px;
  border:1.5px solid rgba(10,14,26,.16);border-radius:var(--r-knopf);
  font:inherit;font-size:16px;background:#fff;color:var(--ink);
  transition:border-color var(--t-ui),box-shadow var(--t-ui);
}
.feld input:focus,.feld textarea:focus{outline:none;border-color:#3A62F0;box-shadow:0 0 0 4px rgba(58,98,240,.14)}
.zustimmung{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;margin:6px 0 16px;font-size:.84rem;color:var(--ink-2);line-height:1.45}
.zustimmung input{width:20px;height:20px;margin:1px 0 0;accent-color:#3A62F0}
.fehler{margin:0 0 14px;padding:12px 14px;border-radius:var(--r-knopf);background:#FDECEE;color:#8E1B26;font-size:.92rem;font-weight:600}
.danke{text-align:center;padding:14px 0 6px}
.danke .haken-gross{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-text)}
.danke .haken-gross svg{width:30px;height:30px}
.danke h3{font-size:1.4rem;margin-bottom:10px}
.danke p{color:var(--ink-2)}
.quiz-fuss{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;font-size:.84rem;color:var(--ink-3)}
.quiz-fuss svg{width:16px;height:16px;flex:none;color:var(--brand-text)}

/* Kontakt-FAB (nur mobil) */
.fab{position:fixed;right:14px;bottom:14px;z-index:50;display:none;flex-direction:column;align-items:flex-end;gap:10px;transition:opacity .2s var(--e-ui),visibility 0s linear 0s}
.fab-menue{display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s var(--e-ui),transform .3s var(--e-soft)}
.fab.auf .fab-menue{opacity:1;transform:none;pointer-events:auto}
.fab-menue a{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:10px 16px 10px 12px;font-weight:700;font-size:.92rem;text-decoration:none;box-shadow:var(--lift-3)}
.fab-menue svg{width:20px;height:20px}
.fab-knopf{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:var(--verlauf);color:#fff;box-shadow:0 2px 6px rgba(10,14,26,.06),0 10px 24px rgba(10,14,26,.06)}
.fab-knopf svg{width:24px;height:24px;transition:transform .3s var(--e-soft)}
.fab.auf .fab-knopf svg{transform:rotate(135deg)}

/* ---------- Reveal (einmalig, 10 px, nur opacity + transform) ---------- */
html.js [data-reveal]{opacity:0;transform:translate3d(0,var(--rv-y),0)}
html.js [data-reveal].rv-in{
  opacity:1;transform:none;
  transition:opacity var(--t-rv) var(--e-soft) var(--rv-d,0ms),transform var(--t-rv) var(--e-soft) var(--rv-d,0ms);
}

/* ---------- Rechtsseiten ---------- */
.rechts-kopf{background:var(--grau);padding:clamp(40px,5vw,64px) 0 clamp(30px,4vw,44px)}
.rechts-kopf a{color:var(--brand-text);font-weight:600;text-decoration:none;font-size:.95rem}
.rechts-kopf h1{margin-top:14px}
.legal{max-width:820px}
.legal h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);margin:38px 0 12px}
.legal h3{font-size:1.1rem;margin:26px 0 10px}
.legal p,.legal li{color:var(--ink-2)}
.legal a{color:var(--brand-text)}

/* ==========================================================================
   Seitenbausteine Variante „Managed IT" (Aufbau nach Produktseiten-Vorlage)
   ========================================================================== */
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text);margin:0 0 12px}

/* ---------- Hero ---------- */
/* z-index 2: der Rahmen muss über dem dunklen Band liegen, das ihn unterläuft */
.p-hero{position:relative;z-index:2;padding:clamp(52px,7vw,92px) 0 0;text-align:center;isolation:isolate}
.p-hero::before{
  content:'';position:absolute;inset:0 0 auto 0;height:min(900px,120%);z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% -8%,rgba(10,179,254,.20),transparent 70%),
    radial-gradient(40% 45% at 12% 8%,rgba(95,49,255,.13),transparent 70%),
    radial-gradient(40% 45% at 88% 4%,rgba(43,126,254,.16),transparent 70%);
}
.pille-hero{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 6px;border-radius:999px;
  background:#fff;box-shadow:0 0 0 1px var(--line),var(--lift-1);
  font-size:.86rem;font-weight:600;color:var(--ink-2);
}
.pille-hero i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--verlauf);color:#fff}
.pille-hero svg{width:13px;height:13px}
.p-hero h1{font-size:clamp(2.3rem,1.1rem + 3.9vw,4.1rem);line-height:1.04;letter-spacing:-.04em;margin:26px auto 0;max-width:1100px}
.p-hero .sub{max-width:720px;margin:22px auto 0;font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);color:var(--ink-2)}
.haekchen-zeile{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--ink-2)}
.haekchen-zeile li{display:flex;align-items:center;gap:7px}
.haekchen-zeile svg{width:16px;height:16px;color:var(--brand-text)}
.knopf-zeile{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Glasrahmen mit nachgebauter Oberfläche */
.rahmen-wrap{position:relative;z-index:2;margin:clamp(40px,5vw,64px) auto 0;max-width:1100px;padding:0 var(--bund)}
.rahmen{
  position:relative;padding:10px;border-radius:26px;
  background:rgba(255,255,255,.6);
  box-shadow:0 0 0 1px rgba(10,14,26,.06),0 30px 70px rgba(20,40,120,.06);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform-origin:50% 0;
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rahmen{animation:aufrichten linear both;animation-timeline:view();animation-range:entry 20% cover 42%}
    @keyframes aufrichten{from{transform:scale(.95)}to{transform:none}}
  }
}
.beispiel{
  position:absolute;right:28px;top:-12px;z-index:3;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink-3);box-shadow:0 0 0 1px var(--line);
}
.app{
  display:grid;grid-template-columns:196px minmax(0,1fr);
  border-radius:14px;overflow:hidden;text-align:left;
  background:linear-gradient(160deg,#EEF3FF 0%,#F3F1FF 60%,#F7F5FF 100%);
  font-size:.8rem;line-height:1.35;color:var(--ink);
  min-height:540px;
}
.app-seite{background:rgba(255,255,255,.62);border-right:1px solid rgba(10,14,26,.06);padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.arbeitsraum{display:flex;align-items:center;gap:9px;padding:4px 6px 14px;font-weight:700}
.arbeitsraum b{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:var(--verlauf);color:#fff;font-size:.72rem}
.app-seite a{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500;pointer-events:none}
.app-seite a svg{width:15px;height:15px;flex:none}
.app-seite a.an{background:#fff;color:var(--ink);font-weight:700;box-shadow:var(--lift-1)}
.app-seite a em{margin-left:auto;font-style:normal;font-size:.68rem;font-weight:700;background:var(--verlauf);color:#fff;border-radius:999px;padding:1px 7px}
.app-seite .unten{margin-top:auto;padding:12px 8px 0;border-top:1px solid rgba(10,14,26,.06);color:var(--ink-3);font-size:.74rem}
.app-haupt{padding:18px 22px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.app-leiste{display:flex;justify-content:space-between;align-items:center;gap:12px}
.suche{display:flex;align-items:center;gap:8px;width:min(320px,55%);height:32px;padding:0 12px;border-radius:10px;background:#fff;color:var(--ink-3);box-shadow:0 0 0 1px rgba(10,14,26,.06)}
.suche svg{width:14px;height:14px}
.app-datum{color:var(--ink-3);font-size:.76rem}
.app-titel{font-family:'Syne','DM Sans',sans-serif;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin:4px 0 2px}
.app-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
.app-spalte{display:flex;flex-direction:column;gap:14px;min-width:0}
.ui{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(10,14,26,.04),0 6px 16px rgba(20,40,120,.05);min-width:0}
.ui-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ui-kopf b{font-size:.84rem}
.ui-kopf span{font-size:.72rem;color:var(--ink-3)}
.ui-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ui-liste li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid rgba(10,14,26,.06)}
.ui-liste li:first-child{border-top:0}
.ui-liste .t{min-width:0}
.ui-liste .t b{display:block;font-weight:600;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-liste .t span{font-size:.7rem;color:var(--ink-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.64rem;font-weight:700;color:#fff;background:#5A6484}
.av.a1{background:#2F55D4}.av.a2{background:#0B7468}.av.a3{background:#8A3CB0}.av.a4{background:#A5520F}
.chip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:3px 9px;border-radius:999px;font-size:.68rem;font-weight:700}
.chip.ok{background:#E3F6EC;color:#0B6B34}
.chip.warn{background:#FFF1DC;color:#8A4B00}
.chip.info{background:#E6EEFF;color:#2456C8}
.chip.neu{background:#EFE8FF;color:#5B2BD9}
.punkt{width:8px;height:8px;border-radius:50%;background:#16A36A;display:inline-block;flex:none}
.punkt.gelb{background:#E39A1B}
.gross{font-family:'Syne','DM Sans',sans-serif;font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.gross small{font-size:.8rem;color:var(--ink-3);font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:0;margin-left:4px}
.balken{height:6px;border-radius:6px;background:#E9EDF5;overflow:hidden}
.balken i{display:block;height:100%;border-radius:6px;background:var(--verlauf-deko)}
.balken.gelb i{background:#E39A1B}
.saeulen{display:flex;align-items:flex-end;gap:4px;height:44px;margin-top:10px}
.saeulen i{flex:1;border-radius:3px;background:#16A36A;opacity:.85}
.ring{--p:100;width:64px;height:64px;border-radius:50%;flex:none;background:conic-gradient(#16A36A calc(var(--p)*1%),#E9EDF5 0);display:grid;place-items:center}
.ring::after{content:'';width:48px;height:48px;border-radius:50%;background:#fff;grid-area:1/1}
.ring b{grid-area:1/1;z-index:1;font-size:.78rem}
.kontaktkarte{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 14px}
.kontaktkarte .av{width:54px;height:54px;font-size:.95rem;background:var(--verlauf);color:#fff}
.kontaktkarte b{font-size:.9rem}
.kontaktkarte > span:not(.av):not(.mini-knoepfe){font-size:.72rem;color:var(--ink-3)}
.mini-knoepfe{display:flex;gap:8px;margin-top:6px}
.mini-knoepfe i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#F2F5FB;color:var(--brand-text)}
.mini-knoepfe svg{width:15px;height:15px}
/* Einmaliger Ablauf im Hero: neue Anfrage läuft ein und wird erledigt */
.ui-liste li.einlauf{display:none}
.ui-liste li.einlauf.da{display:grid;animation:reinrutschen .5s var(--e-soft)}
@keyframes reinrutschen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.status-tausch .chip.b{display:none}
.status-tausch.fertig .chip.a{display:none}
.status-tausch.fertig .chip.b{display:inline-flex;animation:reinrutschen .35s var(--e-soft)}

/* ---------- Dunkles Band ---------- */
.band{
  --ueber:clamp(140px,19vw,280px);
  position:relative;z-index:1;color:#fff;
  margin-top:calc(var(--ueber) * -1);
  padding:calc(var(--ueber) + 56px) 0 clamp(64px,8vw,104px);
  background:
    radial-gradient(50% 60% at 78% 30%,rgba(95,49,255,.38),transparent 70%),
    radial-gradient(45% 55% at 18% 70%,rgba(43,126,254,.22),transparent 70%),
    #070C18;
  overflow:hidden;
}
.band-logos{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px;align-items:center}
.band-logos p{margin:0;color:rgba(255,255,255,.78);font-size:.95rem}
/* Eine helle Leiste statt einzelner weißer Kacheln auf Dunkel */
.logo-reihe{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;background:rgba(255,255,255,.96);border-radius:20px;padding:8px 10px}
.logo-reihe span{height:54px;display:grid;place-items:center;padding:6px 12px}
.logo-reihe span + span{box-shadow:inset 1px 0 0 var(--line)}
.logo-reihe img{max-height:32px;width:auto;max-width:100%;object-fit:contain}
.band h2{color:#fff;text-align:center;margin:clamp(56px,7vw,88px) auto 0;max-width:760px}
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(36px,4vw,52px);text-align:center}
.zahl-k .wert{font-family:'Syne','DM Sans',sans-serif;font-weight:700;font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem);letter-spacing:-.04em;line-height:1}
.zahl-k .wert sup{font-size:.42em;letter-spacing:0;margin-left:3px;vertical-align:.95em;color:#B9C8FF}
.zahl-k p{margin:10px auto 0;color:rgba(255,255,255,.76);font-size:.95rem;max-width:210px}

/* ---------- Fakten ---------- */
.fakten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.fakten-links{position:static}
.pillen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pille{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:.8rem;font-weight:700;color:var(--ink)}
.pille svg{width:14px;height:14px;color:var(--brand-text)}
.fakten-links p{color:var(--ink-2);margin-top:20px}
.fakt{padding:28px 0;border-top:1px solid var(--line)}
.fakt:first-child{border-top:0;padding-top:0}
.fakt h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);letter-spacing:-.03em;color:var(--brand-text);margin-bottom:10px}
.fakt p{color:var(--ink-2)}
.zitat{
  margin-top:12px;padding:26px 26px 24px;border-radius:var(--r-karte);background:#fff;
  box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(20,40,120,.06);
}
.zitat blockquote{margin:0;color:var(--brand-text);font-size:1.02rem;line-height:1.6}
.zitat .wer{display:flex;align-items:center;gap:12px;margin-top:18px}
.zitat .wer .av{width:40px;height:40px;font-size:.85rem;background:var(--verlauf);color:#fff}
.zitat .wer b{display:block;font-size:.92rem}
.zitat .wer > span:not(.av) span{font-size:.8rem;color:var(--ink-3)}

/* ---------- Leistungs-Tabs ---------- */
.tabs{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;
  max-width:1080px;margin:0 auto;padding:6px;border-radius:20px;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(20,40,120,.06);
}
.tab{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 8px 16px;border:0;border-radius:14px;background:none;cursor:pointer;
  font-size:.86rem;font-weight:600;line-height:1.25;color:var(--ink-2);text-align:center;
  transition:background-color var(--t-ui),color var(--t-ui);
}
.tab i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-text);transition:background .2s,color .2s}
.tab svg{width:18px;height:18px}
.tab:hover{background:#F6F8FD}
.tab[aria-selected="true"]{background:linear-gradient(180deg,#F1F5FF,#F5F2FF);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(58,98,240,.18)}
.tab[aria-selected="true"] i{background:var(--verlauf);color:#fff}
.tab .lauf{position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:3px;background:rgba(58,98,240,.12);overflow:hidden;opacity:0}
.tab[aria-selected="true"] .lauf{opacity:1}
.tab .lauf b{display:block;height:100%;background:var(--verlauf-deko);transform:scaleX(0);transform-origin:left}
.tabs.laeuft .tab[aria-selected="true"] .lauf b{animation:fuellen var(--tab-dauer,7s) linear forwards}
.tabs.halt .tab .lauf b{animation-play-state:paused}
@keyframes fuellen{to{transform:scaleX(1)}}
.tab-text{max-width:720px;margin:26px auto 22px;text-align:center;color:var(--ink-2);min-height:3.2em;margin-top:8px}
.buehne{
  position:relative;max-width:1080px;margin:0 auto;border-radius:20px;display:grid;padding:clamp(14px,2.4vw,28px);
  background:linear-gradient(160deg,#EEF3FF 0%,#F4F1FF 100%);
  box-shadow:0 0 0 1px rgba(10,14,26,.04);
}
/* Alle Tafeln liegen in derselben Rasterzelle: Die Bühne ist so hoch wie die höchste, nichts springt */
.tafel{grid-area:1 / 1;visibility:hidden}
.tafel.an{visibility:visible;animation:rein .45s var(--e-soft)}
.tafel-raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.tafel-raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.tafel-raster .breit{grid-column:1 / -1}
.tabelle{width:100%;border-collapse:collapse;font-size:.78rem}
.tabelle th{text-align:left;font-weight:600;color:var(--ink-3);font-size:.7rem;padding:0 8px 8px 0}
.tabelle td{padding:9px 8px 9px 0;border-top:1px solid rgba(10,14,26,.06);vertical-align:middle}
.tabelle td:first-child{font-weight:600}
.tabelle .balken{width:100%;min-width:40px;max-width:88px}
.chat{display:flex;flex-direction:column;gap:8px}
.blase{max-width:86%;padding:9px 12px;border-radius:14px;font-size:.78rem;line-height:1.4}
.blase.sie{background:#fff;align-self:flex-start;border-top-left-radius:4px;box-shadow:var(--lift-1)}
.blase.wir{background:#DCF3E4;align-self:flex-end;border-top-right-radius:4px}
.blase small{display:block;font-size:.64rem;color:var(--ink-3);margin-top:3px;text-align:right}
.screenshot{height:74px;border-radius:10px;margin-bottom:6px;background:linear-gradient(180deg,#1F2A44 0 22%,#F3F4F7 22%);position:relative}
.screenshot::after{content:'Fehler 0x800CCC0E';position:absolute;left:10px;right:10px;top:34px;background:#fff;border:1px solid #E1E4EC;border-radius:5px;padding:5px 8px;font-size:.64rem;font-weight:700;color:#B4232F}
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kalender{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:6px}
.kalender i{aspect-ratio:1;border-radius:6px;background:#DDF3E6;display:grid;place-items:center;font-style:normal;font-size:.62rem;font-weight:700;color:#0B6B34}
.kalender i.heute{background:#0E7446;color:#fff}
.etappen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.etappen li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center}
.etappen .n{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:.72rem;background:#E3F6EC;color:#0B6B34}
.etappen .n.jetzt{background:var(--verlauf);color:#fff}
.etappen .n.spaeter{background:#EEF0F5;color:var(--ink-3)}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bk{
  position:relative;overflow:hidden;border-radius:20px;padding:clamp(22px,2.6vw,30px);
  background:linear-gradient(165deg,#EEF3FF,#F4F1FF);display:flex;flex-direction:column;gap:20px;min-height:360px;
}
.bk.s7{grid-column:span 7}.bk.s5{grid-column:span 5}
.bk .kicker{margin:0}
.bk .aussage{font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);line-height:1.45;color:var(--ink-2);margin:0;max-width:520px}
.bk .aussage b{color:var(--ink)}
.bk .ui-bereich{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.bk-foto{padding:0;min-height:380px;background:#1a2340}
.bk-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bk-foto .glas-zitat{
  position:absolute;left:16px;right:16px;bottom:16px;padding:16px 18px;border-radius:14px;
  background:rgba(12,18,34,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:.95rem;line-height:1.5;
}
.bk-foto .glas-zitat span{display:block;margin-top:8px;font-size:.8rem;color:rgba(255,255,255,.78)}
.bericht-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bericht-zahlen div{background:#F6F8FD;border-radius:10px;padding:10px 12px}
.bericht-zahlen b{display:block;font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.bericht-zahlen span{font-size:.7rem;color:var(--ink-3)}
.woche{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:4px}
.woche div{border-radius:10px;padding:8px 6px;text-align:center;font-size:.68rem;background:#F2F5FB;color:var(--ink-3)}
.woche div b{display:block;font-size:.74rem;color:var(--ink);margin-bottom:3px}
.woche div.lx{background:linear-gradient(160deg,#E6EEFF,#EFE8FF);color:#2456C8;font-weight:700}

/* ---------- Schritte ---------- */
.schritte4{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center;list-style:none;margin:0;padding:0}
.schritte4::before{
  content:'';position:absolute;top:22px;left:12.5%;right:12.5%;height:2px;
  background:linear-gradient(90deg,#0AB3FE,#2B7EFE,#5F31FF);opacity:.35;
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--e-soft) .2s;
}
.schritte4.rv-in::before,.schritte4.gezeichnet::before{transform:scaleX(1)}
.schritte4 li{position:relative}
.schritte4 .nr{
  width:44px;height:44px;margin:0 auto 18px;border-radius:14px;display:grid;place-items:center;
  background:var(--verlauf);color:#fff;font-weight:700;font-size:1rem;box-shadow:0 0 0 6px #fff;
}
.schritte4 h3{margin-bottom:8px}
.schritte4 p{color:var(--ink-2);font-size:.96rem;max-width:250px;margin-inline:auto}
.pillen-mitte{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:40px}

/* ---------- Modelle ---------- */
.umschalter-titel{text-align:center;font-weight:600;color:var(--ink-2);margin:0 0 12px}
.umschalter{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto;padding:5px;border-radius:14px;background:#F2F4F9;box-shadow:inset 0 0 0 1px var(--line)}
.umschalter button{border:0;background:none;cursor:pointer;padding:11px 18px;border-radius:10px;min-height:44px;font-weight:600;font-size:.92rem;color:var(--ink-2);transition:background-color var(--t-ui),color var(--t-ui),box-shadow var(--t-ui)}
.umschalter button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--lift-2)}
.modell-band{
  max-width:1080px;margin:34px auto 0;padding:10px 16px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,#E6EEFF,#EFE8FF);text-align:center;font-size:.86rem;font-weight:600;color:#2456C8;
}
.modelle{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px;border-radius:0 0 20px 20px;background:linear-gradient(180deg,#F4F6FC,#fff)}
.modell{
  position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px;border-radius:20px;background:#fff;
  box-shadow:0 0 0 1px var(--line),var(--lift-1);transition:box-shadow .3s var(--e-ui),transform .45s var(--e-soft);
}
.modell.empfohlen{box-shadow:0 0 0 2px #3A62F0,0 18px 40px rgba(58,98,240,.06);transform:translateY(-4px)}
/* Etikett im Fluss über dem Titel, Platz bleibt reserviert, damit die Karten beim Umschalten nicht springen */
.modell .marke-chip{align-self:flex-start;visibility:hidden;opacity:0;transition:opacity .25s var(--e-ui)}
.modell.empfohlen .marke-chip{visibility:visible;opacity:1}
.modell h3{font-size:1.4rem}
.modell .fuer{color:var(--ink-2);font-size:.95rem;margin:0;padding-bottom:14px;border-bottom:1px solid var(--line)}
.modell .enth{font-size:.8rem;font-weight:700;color:var(--ink-3);margin:0}
.modell ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.94rem;color:var(--ink-2)}
.modell li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px}
.modell li svg{width:16px;height:16px;margin-top:3px;color:var(--brand-text)}
.modell li.nein{color:var(--ink-3)}
.modell li.nein svg{color:var(--ink-3)}
.modell .knopf{margin-top:auto}
.preis-hinweis{max-width:760px;margin:26px auto 0;text-align:center;color:var(--ink-2);font-size:.95rem}

/* ---------- Sicherheit (dunkel) ---------- */
.sicher{
  color:#fff;
  background:
    radial-gradient(45% 60% at 85% 20%,rgba(95,49,255,.34),transparent 70%),
    radial-gradient(40% 50% at 10% 90%,rgba(10,179,254,.14),transparent 70%),
    #070C18;
}
.sicher-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.sicher h2{color:#fff}
.sicher .fuehr{color:rgba(255,255,255,.8);margin-top:18px}
.sicher .zitat{background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.12);margin-top:30px}
.sicher .zitat blockquote{color:#E3E9FF}
.sicher .zitat .wer > span:not(.av) span{color:rgba(255,255,255,.78)}
.kacheln4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gk{
  min-height:230px;border-radius:20px;padding:24px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.gk .riesig{font-family:'Syne','DM Sans',sans-serif;font-weight:800;font-size:clamp(2.6rem,2rem + 2vw,3.6rem);letter-spacing:-.04em;line-height:1;background:var(--verlauf-hell);-webkit-background-clip:text;background-clip:text;color:transparent}
.gk p{margin:0;color:rgba(255,255,255,.86);font-size:.95rem;max-width:220px}
.gk small{color:rgba(255,255,255,.68);font-size:.8rem}
.gk svg.karte{width:104px;height:auto}
.karte .land{fill:rgba(185,200,255,.16);stroke:rgba(185,200,255,.5);stroke-width:5}
.karte .pin{fill:#6FD0FF}

/* ---------- FAQ mittig ---------- */
.faq-mitte{max-width:840px;margin:0 auto}

/* ---------- CTA-Kasten ---------- */
.cta-flaeche{
  padding:clamp(56px,7vw,96px) 0;
  background:
    radial-gradient(60% 80% at 80% 100%,rgba(95,49,255,.22),transparent 70%),
    radial-gradient(60% 80% at 10% 0%,rgba(10,179,254,.2),transparent 70%),
    linear-gradient(180deg,#fff,#EAF0FF);
}
.cta-kasten{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(24px,4vw,44px);border-radius:26px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 24px 60px rgba(20,40,120,.06);
}
.cta-kasten h2{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem)}
.cta-kasten p{color:var(--ink-2);margin-top:12px}
.kurz-form .reihe{display:grid;gap:10px;align-items:end;grid-template-columns:repeat(2,minmax(0,1fr))}
.kurz-form .feld{margin:0}
.kurz-form .knopf{min-height:52px}
.kurz-form .zustimmung{margin:14px 0 0}
.kurz-danke{display:flex;gap:14px;align-items:flex-start}
.kurz-danke .haken-gross{margin:0;width:48px;height:48px;flex:none}
.kurz-danke h3{font-size:1.2rem;margin-bottom:4px}
.kurz-danke p{margin:0}

/* ---------- Fußzeile auf Foto ---------- */
.p-fuss{position:relative;isolation:isolate;padding:clamp(80px,12vw,180px) 0 0;color:#fff;overflow:hidden}
.p-fuss > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.p-fuss::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,12,24,.25),rgba(7,12,24,.78) 70%)}
.fuss-glas{
  border-radius:26px 26px 0 0;padding:clamp(28px,4vw,48px) clamp(22px,4vw,48px) 0;
  background:rgba(8,13,26,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.fuss-raster3{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr));gap:32px}
.logo-chip{display:inline-block;background:#fff;border-radius:14px;padding:10px 14px}
.logo-chip img{width:150px}
.fuss-glas .satz{color:rgba(255,255,255,.8);margin:16px 0 0;max-width:340px}
.fuss-glas h4{font-family:'DM Sans',sans-serif;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#B9C8FF;margin:6px 0 14px}
.fuss-glas ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.95rem}
.fuss-glas a,.fuss-glas .link-knopf{color:rgba(255,255,255,.86);text-decoration:none}
.fuss-glas a:hover,.fuss-glas .link-knopf:hover{color:#fff}
.fuss-glas address{font-style:normal;color:rgba(255,255,255,.86);font-size:.95rem}
.fuss-zeile{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding:18px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;color:rgba(255,255,255,.7)}
.markensatz{
  font-family:'Syne','DM Sans',sans-serif;font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(1.7rem,.5rem + 5vw,5.2rem);
  margin:22px 0 -.14em;
  background:var(--verlauf-hell);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;
}

/* ==========================================================================
   Responsiv (Variante Managed IT)
   ========================================================================== */
@media (max-width:1100px){
  .logo-reihe{grid-template-columns:repeat(4,minmax(0,1fr))}
  .logo-reihe span:nth-child(4n+1){box-shadow:none}
  .band-logos{grid-template-columns:minmax(0,1fr);text-align:center}
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app{grid-template-columns:minmax(0,1fr)}
  .app-seite{display:none}
}
@media (max-width:900px){
  .fakten,.sicher-raster,.cta-kasten{grid-template-columns:minmax(0,1fr)}
  .fakten-links{position:static}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .bk.s7,.bk.s5{grid-column:1 / -1}
  .schritte4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .schritte4::before{display:none}
  .modelle{grid-template-columns:minmax(0,1fr)}
  .modell.empfohlen{transform:none}
  .tafel-raster,.tafel-raster.drei{grid-template-columns:minmax(0,1fr)}
  .fuss-raster3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fuss-raster3 > div:first-child{grid-column:1 / -1}
}
@media (max-width:760px){
  .app-raster{grid-template-columns:minmax(0,1fr)}
  .app{min-height:0}
  .app .nur-breit{display:none}
  .tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 42%;scroll-snap-align:start}
  .kurz-form .reihe{grid-template-columns:minmax(0,1fr)}
  .umschalter{flex-direction:column;width:100%}
  .umschalter button{width:100%}
}
@media (max-width:600px){
  .logo-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-reihe span:nth-child(odd){box-shadow:none}
  .kacheln4{grid-template-columns:minmax(0,1fr)}
  .gk{min-height:180px}
  .schritte4{grid-template-columns:minmax(0,1fr)}
  .kacheln{grid-template-columns:minmax(0,1fr)}
  .bericht-zahlen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fuss-raster3{grid-template-columns:minmax(0,1fr)}
  .haekchen-zeile{flex-direction:column;align-items:center}
  .knopf-zeile .knopf{width:100%}
}

/* ---------- Responsiv: gemeinsame Teile ---------- */
@media (max-width:1100px){.menue{display:none}}
@media (max-width:900px){
  .faq-raster{grid-template-columns:minmax(0,1fr)}
  .faq-raster > div:first-child{position:static}
  .fuss-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .kopf-rechts{display:none}
  .kopf-mobil{display:flex}
  .kopf-innen{height:64px}
  .marke img{width:140px}
  .fab{display:flex}
  h1{font-size:clamp(2rem,1.2rem + 4vw,2.6rem)}
}
@media (max-width:600px){
  .wahl{grid-template-columns:minmax(0,1fr)}
  .overlay{padding:0;align-items:flex-end}
  .overlay-karte{width:100%;max-height:92dvh;border-radius:var(--r-karte) var(--r-karte) 0 0}
}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Rechtsseiten: Fußzeile */
.fuss-unten nav{display:flex;gap:18px;flex-wrap:wrap}
.kopfleiste .rund-tel{margin-left:auto}

/* ==========================================================================
   Einwilligung, Pop-up, Kontakt-Knopf und Feinschliff
   ========================================================================== */
/* Fließtext und Listen: letztes Wort nicht allein auf die Zeile */
li,blockquote,figcaption,.fuehr,dd{text-wrap:pretty}
/* Kicker: nur Text in Akzentfarbe — keine Versalien, keine Sperrung */
.kicker,.quiz-kopf .kicker{font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--brand-text)}
/* Fußzeile: Spaltentitel ohne Versalien, Links mit 44-px-Trefferfläche */
.fuss-titel{font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:700;margin:4px 0 6px}
.fuss ul,.fuss-glas ul{gap:0}
.fuss ul a,.fuss .link-knopf,.fuss-glas ul a,.fuss-glas .link-knopf,.fuss-unten nav a{display:inline-flex;align-items:center;min-height:44px}
/* Trefferflächen >= 44 px */
/* Stapel: Wand über allem, Formular über dem Pop-up */
#cw{z-index:130;align-items:center;padding:12px}#modal{z-index:120}#pop{z-index:110}
/* Quiz-Fortschritt als Text */
.fortschritt-text{margin:18px 0 -10px;font-size:.84rem;font-weight:700;color:var(--brand-text)}
.honig{display:none!important}

/* Cookie-Wall nach RGN-Standard: Logo, drei Knöpfe, Einstellungen, Rechtslinks — immer mittig */

.cw .overlay-karte{width:min(520px,100%);text-align:center;border-radius:20px}
.cw-logo{width:150px;margin:0 auto 16px}
.cw h2{font-size:1.4rem;margin-bottom:10px}
.cw p{color:var(--ink-2);font-size:.95rem}
.cw-panel{text-align:left;margin:18px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cw-zeile{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;cursor:pointer}
.cw-zeile + .cw-zeile{border-top:1px solid var(--line)}
.cw-zeile b{display:block;font-size:.95rem}
.cw-zeile span span{display:block;font-size:.84rem;color:var(--ink-2)}
.cw-immer{font-size:.82rem;font-weight:700;color:#0B6B34;white-space:nowrap}
.schalter{appearance:none;-webkit-appearance:none;flex:none;width:48px;height:28px;border-radius:999px;position:relative;cursor:pointer;margin:0;transition:background-color .2s var(--e-ui);background:#7F889C}
.schalter::before{content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--e-soft)}
.schalter:checked{background:#2456C8}
.schalter:checked::before{transform:translateX(20px)}
.cw-knoepfe{display:grid;gap:10px;margin-top:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cw-knoepfe .knopf{min-height:50px;padding:12px 10px}
.knopf-geist{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px rgba(10,14,26,.12)}
.cw-links{margin:10px 0 0;font-size:.84rem;color:var(--ink-3);text-wrap:balance}
.cw-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--ink-3);white-space:nowrap}
@media (max-width:520px){.cw-knoepfe{grid-template-columns:minmax(0,1fr)}}

/* Pop-up nach RGN-Standard: Bild oben mit Badge, Titel, zwei Sätze, drei Punkte, zwei Knöpfe */
.pop .overlay-karte{width:min(26.5rem,100%);padding:0;text-align:center;overflow:hidden auto}
.pop .zu{z-index:2;background:#fff;box-shadow:0 4px 14px rgba(7,12,24,.28)}
.pop-bild{position:relative;aspect-ratio:16/9;overflow:hidden}
.pop-bild img{width:100%;height:100%;object-fit:cover}
.pop-bild::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,24,0) 40%,rgba(7,12,24,.6))}
.pop-badge{position:absolute;left:14px;bottom:12px;z-index:1;background:#fff;color:var(--ink);font-weight:700;font-size:.82rem;padding:6px 12px;border-radius:999px}
.pop-inhalt{padding:22px 24px 12px}
.pop h2{font-size:clamp(1.4rem,1.25rem + .6vw,1.7rem);margin:0 0 10px}
.pop p{color:var(--ink-2);font-size:.96rem}
.pop ul{list-style:none;margin:16px 0 18px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;text-align:left}
.pop li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-weight:600;font-size:.95rem}
.pop li svg{width:18px;height:18px;color:var(--brand-text);margin-top:3px}
.pop-inhalt .knopf{width:100%}
.pop-inhalt .knopf + .knopf{margin-top:10px}
.pop-trust{font-size:.84rem;color:var(--ink-3);margin:12px 0 0}
.pop-nein{background:none;border:0;color:var(--ink-3);text-decoration:underline;min-height:44px;padding:0 12px;cursor:pointer;font-size:.88rem}

/* Kontakt-FAB: erst nach der ersten Bildschirmhöhe, weicht Knöpfen und Links aus */
.fab.weg{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--e-ui),visibility 0s linear .2s}

/* ---------- Seitenspezifisch ---------- */
/* Pause wirkt auch gegen die laufende Balken-Animation (sonst gewinnt die Kurzschreibweise) */
.tabs.halt.laeuft .tab[aria-selected="true"] .lauf b{animation-play-state:paused}
.tab-steuer{display:flex;justify-content:flex-end;max-width:1080px;margin:10px auto 0}
.tab-pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;background:none;cursor:pointer;color:var(--ink-2);font-size:.88rem;font-weight:600;border-radius:10px}
.tab-pause:hover{background:#F2F4F9}
.tab-pause[disabled]{cursor:default;color:var(--ink-3);background:none}
/* Beispiel-Etikett an jeder nachgebauten Oberfläche im Bento */
.bsp{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:#fff;color:var(--ink-2);box-shadow:0 0 0 1px var(--line)}
.bsp-rechts{align-self:flex-end}
/* Bento: nicht dreimal dieselbe Fläche */
.bento .bk:nth-child(2){background:linear-gradient(165deg,#F3EEFF,#FBF8FF)}

/* Markensatz: zwei feste Zeilen */
.markensatz span{display:block;white-space:nowrap}
.chip-lang{white-space:normal}
/* Unterzeilen in den Beispieloberflächen einzeilig, wie in echter Software */
@media (max-width:440px){.geraete th:nth-child(2),.geraete td:nth-child(2){display:none}}

/* ---------- Wand-Knöpfe, mobiler Kopf, Umbruch ---------- */
/* Wand: Ja und Nein nebeneinander, Einstellungen leiser darunter */
@media (max-width:520px){.cw-knoepfe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cw-einst{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;padding:0 14px;border:0;background:none;cursor:pointer;color:var(--ink-2);font-weight:600;font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
.cw-speichern{width:100%;margin-top:10px}
/* Mobiler Kopf: Logo darf nicht schrumpfen, Knöpfe werden zu Symbolen */
.marke{flex:none}
@media (max-width:420px){
  .rund-wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rund-wa{width:44px;padding:0}
  .kopf-innen{gap:12px}
  .marke img{width:124px}
}
@media (max-width:350px){
  .rund-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rund-tel{width:44px;padding:0}
}
/* Umbruch ohne einzelnes Wort: FAQ-Fragen, Auswahlkacheln, Einwilligung */
.akk-f button,.wahl button{text-wrap:balance}
.zustimmung span{text-wrap:pretty}

/* R12: eine Kachel in Marken-Dunkel, damit das Bento nicht aus einer Flächenart besteht */
.bento .bk:nth-child(3){background:radial-gradient(80% 90% at 90% 0%,rgba(95,49,255,.35),transparent 70%),#0E1730;color:#fff}
.bento .bk:nth-child(3) .kicker{color:#AFC3FF}
.bento .bk:nth-child(3) .aussage{color:rgba(255,255,255,.84)}
.bento .bk:nth-child(3) .aussage b{color:#fff}
/* R55: Kurzformular — Felder nebeneinander, Knopf darunter über die volle Breite */
.kurz-form .reihe .knopf{grid-column:1 / -1;width:100%}
@media (max-width:760px){.kurz-form .reihe{grid-template-columns:minmax(0,1fr)}}
/* R57: ISO-Kacheln ohne einzelnes Wort */
.gk p,.gk small{text-wrap:balance}
/* R56: Überschriften mobil eine Spur kleiner, damit der Farbteil einzeilig bleibt */
@media (max-width:420px){h2{font-size:1.55rem}}

/* Knöpfe und Fragen ohne einzelnes Wort */
.knopf,.frage{text-wrap:balance}