/* ============================================================================
   AO Consulting · Startseite · Entwurf v5 „Editorial Navy"
   Handschrift wie unser Puchmayr-Entwurf (dunkle Flächen mit schrägen Kanten,
   große Überschriften mit Marker, weiche Schatten, nummerierte Schritte),
   Farben von AO: Blau #2B87DA als Akzent, tiefes Dunkelblau als Bühne.
   Schriften wie live: Poppins (Überschriften), Roboto (Text).
   ============================================================================ */

/* ---------- Schriften (lokal, kein Fremdserver) ---------- */
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url("../fonts/poppins-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url("../fonts/poppins-latin-ext-400.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url("../fonts/poppins-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url("../fonts/poppins-latin-ext-500.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url("../fonts/poppins-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url("../fonts/poppins-latin-ext-600.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url("../fonts/poppins-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url("../fonts/poppins-latin-ext-700.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-weight:600;font-display:swap;src:url("../fonts/caveat-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-weight:400;font-display:swap;src:url("../fonts/roboto-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-weight:400;font-display:swap;src:url("../fonts/roboto-latin-ext-400.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";font-weight:500;font-display:swap;src:url("../fonts/roboto-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-weight:500;font-display:swap;src:url("../fonts/roboto-latin-ext-500.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";font-weight:700;font-display:swap;src:url("../fonts/roboto-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-weight:700;font-display:swap;src:url("../fonts/roboto-latin-ext-700.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --blau:#2b87da;              /* AO-Blau, wie live */
  --blau-dunkel:#1f6fb8;       /* Hover */
  --blau-hell:#8ec3f2;         /* helle Akzente auf dunklem Grund */
  --blau-marker:rgba(43,135,218,.28);
  --blau-tint:rgba(43,135,218,.08);
  --tinte:#25222e;             /* Anthrazit der Live-Seite: dunkle Bühnen */
  --tinte-2:#332f3f;           /* heller Rand des Bühnenverlaufs */
  --tinte-0:#1a1820;           /* dunkler Rand des Bühnenverlaufs */
  --tinte-3:#403a4f;
  --fuss:#17151d;              /* Fußzeile */
  --schleier:37,34,46;         /* Schleier über dem Hero-Foto, als RGB-Tripel */
  --kopf:#25222e;              /* Überschriften auf hellem Grund, wie live */
  --text:#3b4553;
  --text-2:#6b7482;
  --nebel:#f4f6f9;             /* helle Wechselflächen */
  --nebel-2:#e8ecf2;
  --linie:rgba(37,34,46,.11);
  --weiss:#fff;
  --schrift-kopf:"Poppins","Segoe UI",system-ui,sans-serif;
  --schrift-text:"Roboto","Segoe UI",system-ui,sans-serif;
  --radius:6px;                /* Knöpfe: leicht gerundet */
  --radius-k:16px;             /* Karten, Fotos */
  --schatten:0 30px 70px -30px rgba(var(--schleier),.35);
  --schatten-k:0 14px 34px -20px rgba(var(--schleier),.35);
  --ease:cubic-bezier(.22,.8,.3,1);
  --wa:#25d366;--wa-hell:#5ee08d;--wa-dunkel:#128c7e;
  /* Symbolgrößen gelten für die ganze Seite: ein Kästchen mit Zeichen und
     ein Kästchen mit Ziffer. Nichts wird einzeln abweichend gesetzt. */
  --sym:3.2rem;--sym-zeichen:1.6rem;--sym-nr:3.4rem;--sym-flaeche:rgba(43,135,218,.1);
  --breite:1240px;
  --schraeg:3.2vw;             /* Höhe der schrägen Kanten */
  /* Farbanschluss für einwilligung.css und barrierefreiheit.css */
  --navy:#25222e;--navy-deep:#1a1820;--navy-ink:#100e15;--coral:#2b87da;--coral-dark:#1f6fb8;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--schrift-text);font-size:1.0625rem;line-height:1.68;color:var(--text);background:var(--weiss);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
picture{display:block}
h1,h2,h3,h4{font-family:var(--schrift-kopf);color:var(--kopf);margin:0 0 .5em;line-height:1.1;font-weight:700;letter-spacing:-.025em}
h1{font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.06}
h2{font-size:clamp(1.95rem,3.8vw,3.05rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blau-dunkel)}
ul,ol{margin:0;padding:0}
button{font:inherit;cursor:pointer}
svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.dunkel :focus-visible,.hero :focus-visible,body > .fuss :focus-visible{outline-color:#fff}

.innen{width:min(var(--breite),100% - 3rem);margin-inline:auto}
.innen--schmal{width:min(920px,100% - 3rem)}
section{padding-block:clamp(4.5rem,8.5vw,7.5rem);position:relative}

/* dunkle Bühnen mit schrägen Kanten */
.dunkel{background:linear-gradient(160deg,var(--tinte-2) 0,var(--tinte) 60%,var(--tinte-0) 100%);color:rgba(255,255,255,.82)}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}
.dunkel .kicker{color:var(--blau-hell)}
.dunkel .einleitung{color:rgba(255,255,255,.78)}
.schraeg{clip-path:polygon(0 var(--schraeg),100% 0,100% 100%,0 calc(100% - var(--schraeg)));padding-block:calc(clamp(4.5rem,8.5vw,7.5rem) + var(--schraeg))}
.schraeg--oben{clip-path:polygon(0 var(--schraeg),100% 0,100% 100%,0 100%);padding-bottom:clamp(4.5rem,8.5vw,7.5rem)}
.schraeg--unten{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--schraeg)));padding-top:clamp(4.5rem,8.5vw,7.5rem)}
.nebel{background:var(--nebel)}

/* ---------- Sprunglinks, Band ---------- */
.sprung{position:absolute;left:1rem;top:-100px;background:var(--tinte);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius);z-index:200;font-weight:700;text-decoration:none}
.sprung:focus{top:1rem}
.entwurf-band{position:fixed;left:0;right:0;top:0;z-index:120;background:var(--tinte);color:rgba(255,255,255,.85);font-size:.74rem;text-align:center;padding:.3rem 1rem;letter-spacing:.02em;font-family:var(--schrift-kopf)}
.entwurf-band a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.entwurf-band a:hover,.entwurf-band a:focus-visible{color:#fff;text-decoration-thickness:2px}

/* ---------- Schlüsselwort: Marker ---------- */
.hl{position:relative;display:inline-block;white-space:nowrap;padding:0 .1em;margin:0 -.1em;z-index:0}
.hl::before{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.42em;background:var(--blau);opacity:.6;border-radius:3px;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .2s}
.sichtbar .hl::before,.hl.gezeichnet::before,.hero .hl::before{transform:scaleX(1)}
.hero .hl::before{opacity:.6;transition-delay:.6s;transform:scaleX(0)}
.hero .hl.gezeichnet::before,.hero .sichtbar .hl::before{transform:scaleX(1)}
.hl--hell::before{opacity:.75}
.hl::after{display:none}
@media (prefers-reduced-motion:reduce){.hl::before{transition:none;transform:none!important}}

/* ---------- Kopfzeilen ---------- */
.kicker{font-family:var(--schrift-kopf);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blau);font-weight:700;margin:0 0 1.1rem;display:block}
.kopfzeile{max-width:760px;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.kopfzeile--mitte{margin-inline:auto;text-align:center}
.einleitung{font-size:clamp(1.05rem,1.25vw,1.18rem);color:var(--text-2);max-width:62ch}
.kopfzeile--mitte .einleitung{margin-inline:auto}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--schrift-kopf);font-weight:600;font-size:.98rem;padding:.95rem 1.8rem;border-radius:var(--radius);border:1.5px solid transparent;text-decoration:none;white-space:nowrap;min-height:50px;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;line-height:1.15}
.knopf:hover{transform:translateY(-2px)}
.knopf--primaer{position:relative;overflow:hidden;color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#3f9bea 0,#2b87da 45%,#1f6fb8 100%);
  box-shadow:0 12px 26px -12px rgba(43,135,218,.85),0 2px 6px -3px rgba(11,22,40,.4),inset 0 1px 0 rgba(255,255,255,.28)}
.knopf--primaer:hover,.knopf--primaer:focus-visible{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#4ba4ef 0,#2f8fe2 45%,#2276c2 100%);
  box-shadow:0 20px 38px -14px rgba(43,135,218,.95),0 3px 8px -3px rgba(11,22,40,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transform:translateY(-2px)}
.knopf--primaer:active{transform:translateY(0)}
/* Glanz, der beim Überfahren einmal durchläuft */
.knopf--primaer::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);transition:left .6s var(--ease)}
.knopf--primaer:hover::before{left:120%}
/* Pfeil nur bei verlinkten Knöpfen, nicht bei Absenden oder Video laden */
a.knopf--primaer::after{content:"→";font-family:var(--schrift-kopf);transition:transform .25s var(--ease);margin-left:.1rem}
a.knopf--primaer:hover::after{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.knopf--primaer::before{display:none}.knopf--primaer:hover{transform:none}}
.knopf--sekundaer{background:transparent;color:var(--kopf);border-color:var(--kopf)}
.knopf--sekundaer:hover,.knopf--sekundaer:focus-visible{background:var(--kopf);color:#fff}
/* WhatsApp trägt immer sein eigenes Grün und sein Symbol, nie AO-Blau.
   Beim Überfahren wird die Vordergrundfarbe ausdrücklich mitgesetzt, sonst
   verschwindet das Symbol in seinem eigenen Hintergrund. */
.knopf.ist-wa{color:var(--wa-dunkel);border-color:var(--wa)}
.knopf.ist-wa svg{width:var(--sym-zeichen);height:var(--sym-zeichen);flex:none;color:var(--wa)}
.knopf.ist-wa:hover,.knopf.ist-wa:focus-visible{background:var(--wa);color:#fff;border-color:var(--wa)}
.knopf.ist-wa:hover svg,.knopf.ist-wa:focus-visible svg{color:#fff}
.dunkel .knopf.ist-wa,.hero .knopf.ist-wa{color:#fff;border-color:var(--wa)}
.dunkel .knopf.ist-wa svg,.hero .knopf.ist-wa svg{color:var(--wa-hell)}
.knopf--hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.knopf--hell:hover,.knopf--hell:focus-visible{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.knopf--gross{padding:1.05rem 2rem;font-size:1.02rem}
.knopf--breit{width:100%}
.pfeil{font-family:var(--schrift-kopf);font-weight:600;text-decoration:none;color:var(--blau);display:inline-flex;align-items:center;gap:.45rem;font-size:.98rem}
.pfeil::after{content:"→";transition:transform .25s var(--ease)}
.pfeil:hover{color:var(--blau-dunkel)}
.pfeil:hover::after{transform:translateX(5px)}
.tel-link{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--schrift-kopf);font-weight:600;font-size:1.02rem;color:inherit;padding:.6rem 0;transition:color .2s}
.tel-link svg{width:1.25em;height:1.25em;color:var(--blau)}

/* ---------- Kopf (über dem Hero transparent, beim Scrollen weiß) ---------- */
.kopf{position:fixed;left:0;right:0;top:1.55rem;z-index:100;padding:.9rem 0;transition:background .3s,box-shadow .3s,padding .3s,top .3s}
.kopf.geschrumpft{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--linie);padding:.55rem 0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.kopf__innen{width:min(1440px,100% - 3rem);margin-inline:auto;display:flex;align-items:center;gap:2rem;min-height:64px}
.marke{position:relative;z-index:95;display:block}
.marke img{width:auto;height:58px;transition:height .3s}
.marke__weiss{display:block}
.marke__schwarz{display:none}
.kopf.geschrumpft .marke__weiss,.kopf:has(.nav.offen) .marke__weiss{display:none}
.kopf.geschrumpft .marke__schwarz,.kopf:has(.nav.offen) .marke__schwarz{display:block}
.kopf.geschrumpft .marke img{height:50px}
.nav{margin-left:auto}
.nav__liste{display:flex;gap:.1rem;list-style:none}
.nav__liste a{display:block;padding:.55rem .85rem;color:#fff;text-decoration:none;font-family:var(--schrift-kopf);font-weight:500;font-size:.95rem;white-space:nowrap;border-radius:var(--radius);position:relative;transition:color .2s;opacity:.92}
.nav__liste a:hover,.nav__liste a:focus-visible{opacity:1;color:var(--blau-hell)}
/* Seiten ohne dunklen Kopfbereich: der Kopf steht sofort hell */
.kopf--hell{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linie)}
.kopf--hell .marke__weiss{display:none}
.kopf--hell .marke__schwarz{display:block}
.kopf--hell .nav__liste a,.kopf--hell .kopf__tel{color:var(--kopf)}
.kopf--hell .nav__liste a:hover,.kopf--hell .nav__liste a:focus-visible{color:var(--blau)}
.kopf--hell .nav__liste a.aktiv::after{background:var(--blau)}
.kopf--hell .kopf__tel svg{color:var(--blau)}
.kopf--hell .burger span{background:var(--kopf)}
.kopf.geschrumpft .nav__liste a{color:var(--kopf)}
.kopf.geschrumpft .nav__liste a:hover,.kopf.geschrumpft .nav__liste a:focus-visible{color:var(--blau)}
/* Aktiver Punkt: unterstrichen statt eingefaerbt */
.nav__liste a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.24rem;height:2px;border-radius:2px;
  background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease),opacity .2s}
.nav__liste a:hover::after,.nav__liste a:focus-visible::after{transform:scaleX(1)}
.nav__liste a.aktiv{opacity:1}
.nav__liste a.aktiv::after{transform:scaleX(1);opacity:1;background:var(--blau-hell)}
.kopf.geschrumpft .nav__liste a.aktiv::after{background:var(--blau)}
.nav__mobil{display:none}
.kopf__aktionen{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.kopf__tel{display:inline-flex;align-items:center;gap:.45rem;color:#fff;text-decoration:none;font-family:var(--schrift-kopf);font-weight:600;font-size:.95rem;white-space:nowrap}
.kopf__tel svg{color:var(--blau-hell)}
.kopf.geschrumpft .kopf__tel{color:var(--kopf)}
.kopf.geschrumpft .kopf__tel svg{color:var(--blau)}
.kopf__tel:hover{color:var(--blau-hell)}
.kopf__cta{white-space:nowrap;padding:.75rem 1.3rem;min-height:44px;font-size:.92rem}
.burger{display:none;width:48px;height:48px;border:0;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:6px;border-radius:var(--radius)}
.burger span{width:26px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .3s,background .3s;display:block}
.kopf.geschrumpft .burger span,.burger[aria-expanded="true"] span{background:var(--kopf)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:1279px){
  .nav{position:fixed;visibility:hidden;inset:0 0 0 auto;width:min(380px,100%);background:#fff;padding:8.5rem 1.5rem 2rem;transform:translateX(100%);transition:transform .4s var(--ease),visibility 0s .4s;box-shadow:-20px 0 60px -30px rgba(var(--schleier),.4);overflow:auto;z-index:90}
  .nav.offen{transform:none;visibility:visible;transition:transform .4s var(--ease),visibility 0s}
  .nav__liste{flex-direction:column;gap:.25rem}
  .nav__liste a,.kopf.geschrumpft .nav__liste a{font-size:1.2rem;padding:.9rem 1rem;color:var(--kopf);opacity:1}
  .nav__mobil{display:block;margin-top:.5rem}
  .nav__mobil .knopf{display:flex;background:var(--blau);color:#fff;font-size:1.05rem}
  .nav__mobil .knopf:hover{background:var(--blau-dunkel);color:#fff}
  .burger{display:flex;position:relative;z-index:95}
  .kopf__tel{display:none}
}
@media (max-width:560px){.kopf__cta{display:none}.kopf__innen{min-height:56px}.marke img,.kopf.geschrumpft .marke img{height:46px}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(100vh,940px);display:flex;align-items:center;padding:clamp(9rem,16vw,11.5rem) 0 clamp(4rem,7vw,6rem);color:#fff;overflow:hidden;background:var(--tinte)}
.hero__hintergrund{position:absolute;inset:0;z-index:0}
.hero__hintergrund img{width:100%;height:100%;object-fit:cover;object-position:74% 30%;transform:scale(1.04);animation:hero-zoom 16s ease-out forwards}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--schleier),.94) 0,rgba(var(--schleier),.86) 34%,rgba(var(--schleier),.5) 60%,rgba(var(--schleier),.18) 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;z-index:1;background:linear-gradient(180deg,transparent,rgba(var(--schleier),.8))}
.hero__innen{position:relative;z-index:2;width:min(var(--breite),100% - 3rem);margin-inline:auto}
.hero__text{max-width:720px}
.hero__vorzeile{font-family:var(--schrift-kopf);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blau-hell);margin-bottom:1.2rem;opacity:0;animation:auftauchen .8s var(--ease) .1s forwards}
.hero h1 .zeile{display:block}
.hero h1{color:#fff;opacity:0;animation:auftauchen .9s var(--ease) .25s forwards;margin-bottom:1.3rem}
.hero__unter{font-size:clamp(1.08rem,1.35vw,1.25rem);max-width:580px;color:rgba(255,255,255,.86);opacity:0;animation:auftauchen .9s var(--ease) .45s forwards}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0;opacity:0;animation:auftauchen .9s var(--ease) .55s forwards}
.chips li{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--schrift-kopf);font-weight:600;font-size:.88rem;color:#fff}
.chips svg{width:1em;height:1em;color:var(--blau-hell)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:2rem;opacity:0;animation:auftauchen .9s var(--ease) .65s forwards}
.hero__tel{color:#fff}
.hero__tel:hover{color:var(--blau-hell)}
.hero__mikro{font-size:.92rem;color:rgba(255,255,255,.65);margin-top:.8rem;opacity:0;animation:auftauchen .9s var(--ease) .75s forwards}
.hero__bewertung{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2.4rem;font-size:1rem;color:rgba(255,255,255,.82);opacity:0;animation:auftauchen .9s var(--ease) .9s forwards}
.google{width:2.9rem;height:2.9rem;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.google svg{width:1.6rem;height:1.6rem}
.hero__bewertung b{display:flex;align-items:center;gap:.5rem;color:#fff;font-family:var(--schrift-kopf);font-weight:700;font-size:1.22rem;line-height:1.25}
.sterne{color:#f5b301;letter-spacing:.08em;font-size:1.2rem}
.hero__bewertung>div>span{display:block;font-size:.94rem;margin-top:.15rem;opacity:.85}
@keyframes auftauchen{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero__hintergrund img,.hero__vorzeile,.hero h1,.hero__unter,.chips,.hero__cta,.hero__mikro,.hero__bewertung{animation:none;opacity:1;transform:none}}
@media (max-width:980px){
  .hero__hintergrund img{object-position:78% 22%}
  .hero::before{background:linear-gradient(180deg,rgba(var(--schleier),.9) 0,rgba(var(--schleier),.78) 60%,rgba(var(--schleier),.72) 100%)}
}
@media (max-width:560px){
  .hero{min-height:0;padding-top:7.5rem}
  .hero__cta .knopf{flex:1 1 100%}
  .hero__vorzeile{font-size:.7rem;letter-spacing:.1em}
}

/* ---------- Vertrauen: Laufband + Bekannt aus ---------- */
.vertrauen{padding-block:clamp(3.5rem,6vw,5rem);background:#fff}
.vertrauen__titel{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:600;color:var(--kopf);text-align:center;max-width:820px;margin:0 auto 2.6rem;line-height:1.4;letter-spacing:-.01em}
/* Innenabstand, damit die angehobene Kachel beim Hover nicht oben abgeschnitten wird */
.laufband{display:grid;gap:1rem;overflow:hidden;position:relative;padding:10px 0;margin:-10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* Abstand steckt im Außenrand der Kachel, nicht in gap: dadurch ist die Breite
   einer Liste genau die Strecke, um die sie wandern muss. Kein fester Wert im
   Keyframe, also kann die Naht auch nicht verrutschen. */
/* Die ganze Reihe (drei identische Listen) läuft als EIN Element. Vorher lief jede Liste
   für sich; starten die drei Animationen nicht auf die Millisekunde gleich, schieben sich
   an der Nahtstelle zwei Kacheln übereinander (sichtbar als „Fidelius rutscht drüber"). */
.laufband__reihe{display:flex;gap:0;width:max-content;animation:laufen 48s linear infinite;will-change:transform}
.laufband__reihe ul{display:flex;gap:0;list-style:none;flex:none;margin:0;padding:0}
.laufband__reihe--rechts{animation-direction:reverse}
.laufband:hover .laufband__reihe{animation-play-state:paused}
.laufband__reihe li{width:220px;height:108px;margin-right:1rem;background:#fff;border:1px solid var(--linie);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:1rem 1.4rem;box-shadow:0 10px 24px -20px rgba(var(--schleier),.5);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.laufband__reihe li:hover{position:relative;z-index:2;transform:translateY(-3px);border-color:rgba(43,135,218,.45);box-shadow:var(--schatten-k)}
.laufband__reihe img{max-height:62px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1) opacity(.7);transition:filter .3s}
.laufband__reihe li:hover img{filter:none}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@media (prefers-reduced-motion:reduce){.laufband__reihe{animation:none}.laufband__reihe ul[aria-hidden]{display:none}.laufband__reihe{flex-wrap:wrap;width:auto}.laufband{mask-image:none;-webkit-mask-image:none}}
@media (max-width:560px){.laufband__reihe li{width:160px;height:84px;margin-right:.8rem}.laufband__reihe img{max-height:46px}}
.bekannt{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.6rem;align-items:start}
.bekannt__gruppe{min-width:0}
/* Einzeln stehende Gruppe (Unterseiten): mittig und nicht zu breit */
.bekannt--einzeln{grid-template-columns:1fr;justify-items:center;margin-top:2rem}
.bekannt--einzeln .bekannt__gruppe{width:100%;max-width:640px}
.bekannt__titel{text-align:center;font-family:var(--schrift-kopf);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:1.3rem}
.bekannt__liste{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.bekannt__liste li{background:#fff;border:1px solid var(--linie);border-radius:14px;min-height:108px;display:flex;align-items:center;justify-content:center;padding:1rem 1.2rem;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.bekannt__liste li:hover{transform:translateY(-4px);box-shadow:var(--schatten-k);border-color:var(--blau)}
.bekannt__liste a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none}
.bekannt__liste img{max-height:38px;width:auto;max-width:100%;object-fit:contain}
/* Quadratische Siegel und der sehr breite Schriftzug brauchen eigene Maße,
   sonst wirken sie neben den Wortmarken viel kleiner, als sie sind */
.bekannt__liste .logo--quadrat{max-height:64px}
.bekannt__liste .logo--breit{max-height:44px}
.bekannt__liste .logo--kompakt{max-height:44px}
.bekannt__liste .logo--schmal{max-height:35px}
.bekannt__liste li.bekannt__weit{padding-left:.7rem;padding-right:.7rem}
@media (max-width:860px){.bekannt{grid-template-columns:1fr;gap:2.2rem}}
@media (max-width:560px){.bekannt__liste{grid-template-columns:repeat(2,1fr)}}

/* ---------- Kiefer (3D, scrollgesteuert, dunkle Bühne) ---------- */
.kiefer{padding:0;position:relative;min-height:230vh;background:linear-gradient(160deg,var(--tinte-2) 0,var(--tinte) 60%,var(--tinte-0) 100%);color:rgba(255,255,255,.82);clip-path:polygon(0 var(--schraeg),100% 0,100% 100%,0 calc(100% - var(--schraeg)))}
.kiefer__klebt{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding:5.5rem 0 1.5rem}
.kiefer__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;max-height:100%}
.kiefer__text .kicker{margin-bottom:.8rem;color:var(--blau-hell)}
.kiefer__text h2{font-size:clamp(1.9rem,3.2vw,2.9rem);margin-bottom:.7rem;color:#fff}
.kiefer__text .einleitung{font-size:1.02rem;margin-bottom:1.4rem;color:rgba(255,255,255,.75)}
.kiefer__schritte{list-style:none;display:grid;gap:.2rem;margin:0 0 1.2rem;counter-reset:schritt}
.kiefer__schritte li{counter-increment:schritt;display:grid;grid-template-columns:var(--sym) 1fr;gap:.1rem 1rem;align-items:center;padding:.85rem 1rem;border-radius:12px;border:1px solid transparent;opacity:.5;transition:opacity .4s,background .4s,border-color .4s,transform .4s var(--ease)}
.kiefer__icon{grid-row:1/3;width:var(--sym);height:var(--sym);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;font-family:var(--schrift-kopf);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;transition:background .4s,color .4s}
.kiefer__icon svg{display:none}
.kiefer__icon::before{content:"0" counter(schritt)}
.kiefer__schritte li strong{font-family:var(--schrift-kopf);color:#fff;font-size:1.08rem;line-height:1.25;letter-spacing:-.01em}
.kiefer__schritte li > span:not(.kiefer__icon){grid-column:2;font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.45}
.kiefer__schritte li.aktiv{opacity:1;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);transform:translateX(6px)}
.kiefer__schritte li.aktiv .kiefer__icon{background:var(--blau);color:#fff;box-shadow:0 10px 24px -12px rgba(43,135,218,.9)}
.kiefer__text .knopf{margin-top:.4rem}
.kiefer__balken{height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin-bottom:1.4rem;overflow:hidden;max-width:320px}
.kiefer__balken span{display:block;height:100%;width:0;background:var(--blau-hell);transition:width .2s linear}
.kiefer__buehne{position:relative;height:min(560px,calc(100vh - 9rem),100%);width:min(560px,calc(100vh - 9rem),100%);margin-inline:auto}
.kiefer__buehne canvas,.kiefer__fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.kiefer__fallback[hidden]{display:none}
.kiefer__buehne::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(43,135,218,.42),rgba(43,135,218,.12) 55%,transparent);z-index:-1;filter:blur(6px)}
.kiefer__hinweis{position:absolute;left:50%;bottom:-.6rem;transform:translateX(-50%);font-size:.8rem;color:rgba(255,255,255,.55);white-space:nowrap;margin:0}
@media (max-height:800px){.kiefer__klebt{padding-top:5rem}.kiefer__text h2{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:.4rem}.kiefer__text .einleitung{font-size:.92rem;margin-bottom:.8rem}.kiefer__schritte li{padding:.55rem .8rem;grid-template-columns:2.2rem 1fr}.kiefer__schritte li > span:not(.kiefer__icon){font-size:.84rem;line-height:1.3}.kiefer__icon{width:2.2rem;height:2.2rem}.kiefer__balken{margin-bottom:.8rem}}
@media (max-width:980px){
  .kiefer{min-height:0;padding-block:calc(3.5rem + var(--schraeg))}
  .kiefer__klebt{position:static;height:auto;overflow:visible;padding:0;display:block}
  .kiefer__raster{grid-template-columns:1fr;gap:1.2rem;align-content:start;max-height:none}
  .kiefer__buehne{order:-1;height:min(40vh,100vw - 3rem);width:min(40vh,100vw - 3rem)}
  .kiefer__hinweis{display:none}
}
@media (prefers-reduced-motion:reduce){.kiefer{min-height:0}.kiefer__klebt{position:static;height:auto;overflow:visible}.kiefer__balken{display:none}}

/* ---------- Zwei Wege (große Bildkarten) ---------- */
.wege{background:#fff}
.wege__raster{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.weg{position:relative;border-radius:var(--radius-k);background:#fff;border:1px solid var(--linie);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s;box-shadow:0 1px 0 var(--linie)}
.weg:hover{transform:translateY(-6px);box-shadow:var(--schatten)}
.weg__bild{aspect-ratio:16/9;position:relative}
.weg__bild picture{height:100%;overflow:hidden}
.weg__bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.weg:hover .weg__bild img{transform:scale(1.05)}
.weg__icon{position:absolute;left:1.5rem;bottom:-1.6rem;width:var(--sym);height:var(--sym);border-radius:12px;background:var(--blau);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -14px rgba(43,135,218,.9);z-index:2}
.weg__icon svg{width:var(--sym-zeichen);height:var(--sym-zeichen)}
.weg__icon span{display:none}
.weg__inhalt{padding:2.9rem clamp(1.5rem,2.6vw,2.4rem) clamp(1.5rem,2.6vw,2.4rem);display:flex;flex-direction:column;flex:1}
.weg h3{font-size:clamp(1.35rem,1.9vw,1.7rem)}
.weg .pfeil{margin-top:auto;padding-top:1.4rem}
/* Aufzählung: schlanker Haken in AO-Blau statt gefüllter Kreis. Der Kreis war
   der einzige Stelle auf der Seite, an der ein Symbol vollflächig eingefärbt ist,
   und wirkte dadurch schwerer als alles andere. */
.haken{list-style:none;display:grid;gap:.85rem;margin:.9rem 0 0}
.haken li{padding-left:1.9rem;position:relative;line-height:1.5}
.haken li::before{content:"";position:absolute;left:0;top:.16em;width:1.25rem;height:1.25rem;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b87da' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center/100%}
.dunkel .haken li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ec3f2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")}
@media (max-width:860px){.wege__raster{grid-template-columns:1fr}}

/* ---------- Zielgruppen (Kartenraster) ---------- */
.zg__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.zg{background:#fff;border-radius:var(--radius-k);padding:1.8rem 1.6rem;border:1px solid var(--linie);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.zg:hover{transform:translateY(-5px);box-shadow:var(--schatten);border-color:transparent}
.zg__icon{width:var(--sym);height:var(--sym);border-radius:12px;background:var(--sym-flaeche);color:var(--blau);display:grid;place-items:center;margin-bottom:1.2rem}
.zg__icon svg{width:var(--sym-zeichen);height:var(--sym-zeichen)}
.zg h3{font-size:1.2rem;margin-bottom:.6rem}
.zg p{font-size:.98rem;color:var(--text-2);flex:1}
.zg .pfeil{margin-top:1.2rem;font-size:.92rem}
@media (max-width:980px){.zg__raster{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.zg__raster{grid-template-columns:1fr}}

/* ---------- Problem + Test ---------- */
.problem__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.problem__liste{list-style:none;display:grid;gap:1.3rem;margin:0}
.problem__liste li{display:grid;grid-template-columns:3.2rem 1fr;gap:1.1rem;align-items:start}
.problem__liste svg{width:var(--sym);height:var(--sym);padding:.8rem;border-radius:12px;background:var(--sym-flaeche);color:var(--blau)}
.problem__liste strong{display:block;font-family:var(--schrift-kopf);color:var(--kopf);margin-bottom:.2rem;font-size:1.1rem;letter-spacing:-.01em}
.problem__liste span{color:var(--text-2)}
.test{background:var(--tinte);color:#fff;border-radius:var(--radius-k);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--schatten);position:relative;overflow:hidden}
.test::before{content:"";position:absolute;right:-30%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(43,135,218,.45),transparent)}
.test__titel{font-family:var(--schrift-kopf);font-weight:700;color:#fff;font-size:1.2rem;letter-spacing:-.01em;position:relative}
.test__liste{list-style:none;display:grid;gap:.9rem;margin:1.4rem 0;position:relative}
.test__liste li{display:flex;gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:background .2s,transform .2s var(--ease)}
.test__liste li:hover{background:rgba(255,255,255,.12);transform:translateX(4px)}
.test__nr{font-family:var(--schrift-kopf);font-weight:700;font-size:1.35rem;color:#fff;background:var(--blau);width:var(--sym-nr);height:var(--sym-nr);border-radius:12px;display:grid;place-items:center;flex:none;box-shadow:0 10px 22px -12px rgba(43,135,218,.9)}
.test__fuss{margin:0;color:rgba(255,255,255,.65);font-size:.92rem;position:relative}
@media (max-width:860px){.problem__raster{grid-template-columns:1fr}}

/* ---------- Methode (dunkle Bühne, Schritte + Telefon) ---------- */
.methode{overflow:hidden}
.schritte{list-style:none;display:grid;gap:0 clamp(2rem,4vw,4rem);grid-template-columns:1fr 1fr;max-width:1000px;margin:0 auto;counter-reset:frage}
.schritte li{counter-increment:frage;display:grid;grid-template-columns:3.4rem 1fr;gap:.2rem 1.2rem;align-items:start;padding:1.2rem 0;border-top:1px solid rgba(255,255,255,.1)}
.schritte li:nth-child(3),.schritte li:nth-child(4){border-bottom:1px solid rgba(255,255,255,.1)}
.schritte li::before{content:"0" counter(frage);grid-row:1/3;width:var(--sym-nr);height:var(--sym-nr);border-radius:12px;background:var(--blau);color:#fff;display:grid;place-items:center;font-family:var(--schrift-kopf);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;box-shadow:0 12px 26px -12px rgba(43,135,218,.9)}
.schritte h3{font-size:1.2rem;margin:0;color:#fff;align-self:center}
.schritte p{grid-column:2;margin:0;font-size:.98rem;color:rgba(255,255,255,.72)}
.schritte svg{display:none}
.live{display:flex;gap:1rem;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:1rem 1.2rem;color:#fff;text-decoration:none;margin:2rem 0 1.4rem;transition:background .2s}
.live:hover{background:rgba(255,255,255,.12);color:#fff}
.live strong{color:#fff}
.puls{width:.6rem;height:.6rem;border-radius:50%;background:var(--blau-hell);position:relative;flex:none}
.puls::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--blau-hell);animation:puls 1.8s ease-out infinite}
@keyframes puls{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.puls::after{animation:none}}
.methode__cta{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;margin-top:2rem}
@media (max-width:760px){.schritte{grid-template-columns:1fr}.schritte li:nth-child(3){border-bottom:0}}

/* ---------- Was danach passiert (Telefon) ---------- */
.ankunft{background:var(--nebel);overflow:hidden}
.ankunft__raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.ankunft__liste{list-style:none;display:grid;gap:1.5rem;margin:2rem 0}
.ankunft__liste li{display:grid;grid-template-columns:3.1rem 1fr;gap:.25rem 1.1rem;align-items:start}
.ankunft__liste svg{grid-row:1/3;width:3.1rem;height:3.1rem;padding:.85rem;border-radius:12px;background:#fff;color:var(--blau);box-shadow:var(--schatten-k)}
.ankunft__liste strong{font-family:var(--schrift-kopf);color:var(--kopf);font-size:1.12rem;letter-spacing:-.01em}
.ankunft__liste span{color:var(--text-2);font-size:.98rem}
.ankunft .live{background:#fff;border:1px solid var(--linie);color:var(--text);box-shadow:var(--schatten-k);margin:0 0 1.6rem}
.ankunft .live:hover{background:#fff;color:var(--text);box-shadow:var(--schatten)}
.ankunft .live strong{color:var(--kopf)}
.ankunft .puls{background:var(--blau)}
.ankunft .puls::after{border-color:var(--blau)}

/* Gerät: eigene Zeichnung, bewusst ohne Marke und ohne Herstellerlogo */
.telefon-buehne{display:flex;flex-direction:column;align-items:center;gap:1.2rem;position:relative;perspective:1600px}
.telefon-buehne::before{content:"";position:absolute;left:50%;top:46%;width:135%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(43,135,218,.24),transparent 70%);z-index:0;pointer-events:none}
.telefon{position:relative;z-index:1;width:min(300px,100%);aspect-ratio:9/19.5;border-radius:54px;padding:3px;transform-style:preserve-3d;transition:transform .85s var(--ease);
  background:linear-gradient(145deg,#c3c8d1 0%,#565c67 11%,#252a33 30%,#14171d 50%,#252a33 70%,#565c67 89%,#c3c8d1 100%);
  box-shadow:0 50px 90px -35px rgba(var(--schleier),.75),0 10px 26px -14px rgba(var(--schleier),.45)}
.telefon__korpus{position:relative;height:100%;border-radius:51px;background:#05070c;padding:8px;backface-visibility:hidden}
.telefon__schirm{position:relative;height:100%;border-radius:44px;overflow:hidden;display:flex;flex-direction:column;
  padding:56px 11px 16px;
  background:radial-gradient(135% 62% at 74% 4%,#4a8ed0 0,#2b5f9e 26%,#17406e 52%,#102b4c 76%,#0b1d35 100%)}
.telefon__schirm::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 66%,rgba(255,255,255,.07) 100%)}
.telefon__insel{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:86px;height:25px;border-radius:16px;background:#000;z-index:4}
.telefon__insel::after{content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 34% 32%,#33455e,#080e18 72%)}
.telefon__taste{position:absolute;width:3px;border-radius:2px;background:linear-gradient(180deg,#767c87,#2b303a);z-index:0}
.telefon__taste--stumm{left:-3px;top:14%;height:5%}
.telefon__taste--lauter{left:-3px;top:21%;height:8%}
.telefon__taste--leiser{left:-3px;top:31%;height:8%}
.telefon__taste--an{right:-3px;top:25%;height:11%}
.telefon__zeit{text-align:center;color:#fff;font-family:var(--schrift-kopf);margin-bottom:1.3rem;position:relative;z-index:2}
.telefon__datum{display:block;font-size:.78rem;opacity:.85}
.telefon__zeit [data-uhr]{display:block;font-size:3.3rem;font-weight:600;line-height:1;letter-spacing:-.035em;margin-top:.2rem;text-shadow:0 2px 22px rgba(0,0,0,.35)}
.telefon__stapel{list-style:none;display:flex;flex-direction:column;position:relative;z-index:2;margin-top:auto}
.telefon__slot{max-height:0;opacity:0;margin-bottom:0;overflow:hidden;transition:max-height .6s var(--ease),margin-bottom .6s var(--ease),opacity .45s ease}
.telefon__slot.da{max-height:120px;opacity:1;margin-bottom:.45rem}
.telefon__slot.weg{max-height:0;opacity:0;margin-bottom:0}
.telefon__meldung{display:grid;grid-template-columns:36px 1fr;gap:.6rem;align-items:start;
  background:rgba(255,255,255,.18);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.2);border-radius:17px;padding:.6rem .65rem;color:#fff;
  transform:translateY(-8px);transition:transform .6s var(--ease)}
.telefon__slot.da .telefon__meldung{transform:none}
.telefon__icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.telefon__icon--ao{background:linear-gradient(180deg,#4a9de8 0,#1f6fb8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 6px -2px rgba(0,0,0,.5)}
.telefon__icon--ao::after{content:"";width:21px;height:21px;background:url("../img/ao-zeichen-weiss.svg") no-repeat center/contain}
.telefon__inhalt{display:flex;flex-direction:column;min-width:0;line-height:1.32}
.telefon__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.telefon__titel{font-weight:600;font-size:.82rem;letter-spacing:-.015em;white-space:nowrap}
.telefon__zeile em{font-style:normal;flex:none;font-size:.63rem;color:rgba(255,255,255,.68);text-transform:uppercase;letter-spacing:.03em}
.telefon__text{font-size:.78rem;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.05rem}
.telefon__balken{margin-top:1rem;width:36%;height:4px;border-radius:2px;background:rgba(255,255,255,.8);align-self:center;position:relative;z-index:2}
.telefon__schnell{display:flex;justify-content:space-between;padding:0 .55rem;margin-top:.9rem;position:relative;z-index:2}
.telefon__schnell span{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:rgba(255,255,255,.85)}
.telefon__schnell svg{width:15px;height:15px}
.telefon__hinweis{position:relative;z-index:1;font-size:.85rem;color:var(--text-2);text-align:center;margin:0;max-width:320px}
@media (prefers-reduced-motion:reduce){.telefon__slot,.telefon__meldung{transition:none}}
@media (max-width:980px){.ankunft__raster{grid-template-columns:1fr}.telefon-buehne{order:2;margin-top:1rem}.telefon{width:min(270px,100%)}}

/* ---------- Video ---------- */
.video__box{position:relative;border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten);aspect-ratio:16/9;background:var(--tinte)}
.video__box img{width:100%;height:100%;object-fit:cover;opacity:.75}
.video__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__hinweis{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:1.5rem;background:linear-gradient(180deg,rgba(var(--schleier),.1),rgba(var(--schleier),.7))}
.video__hinweis p{color:#fff;font-size:.92rem;max-width:520px;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.video__hinweis a{color:#fff}
.video__hinweis .knopf{border-radius:999px;padding:1rem 1.8rem 1rem 1.4rem}

/* ---------- Fallstudien ---------- */
.fall__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.fall{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-k);padding:2rem;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s;position:relative}
.fall:hover{transform:translateY(-5px);box-shadow:var(--schatten)}
.fall__typ{font-family:var(--schrift-kopf);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin-bottom:1.1rem}
/* Das Ergebnis steht oben, das Zitat belegt es. Vorher stand die Zahl klein
   unter dem Namen und war damit die am schlechtesten sichtbare Aussage. */
.fall__zahlen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0 0 1.4rem;
  padding-bottom:1.3rem;border-bottom:1px solid var(--linie)}
.fall__zahlen b{display:block;font-family:var(--schrift-kopf);font-weight:700;font-size:1.85rem;line-height:1;
  letter-spacing:-.03em;color:var(--blau);margin-bottom:.3rem}
.fall__zahlen span{display:block;font-size:.72rem;line-height:1.25;color:var(--text-2)}
.fall.fall--akzent .fall__zahlen{border-bottom-color:rgba(255,255,255,.16)}
.fall.fall--akzent .fall__zahlen b{color:#fff}
.fall.fall--akzent .fall__zahlen span{color:rgba(255,255,255,.72)}
.fall blockquote{margin:0 0 1.2rem;flex:1}
.fall blockquote p{font-family:var(--schrift-kopf);font-size:1.12rem;line-height:1.35;font-weight:600;color:var(--kopf);letter-spacing:-.01em}
.fall__name{font-size:.92rem;color:var(--text-2);margin-bottom:1rem}
.fall.fall--akzent{background:var(--tinte);color:#fff;border-color:var(--tinte);overflow:hidden}
.fall.fall--akzent::before{content:"";position:absolute;right:-30%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(43,135,218,.5),transparent)}
.fall.fall--akzent .fall__typ{color:var(--blau-hell)}
.fall.fall--akzent blockquote p,.fall.fall--akzent .fall__name{color:#fff}
.fall.fall--akzent .fall__name{color:rgba(255,255,255,.7)}
.fall.fall--akzent .pfeil{color:#fff}
.fall.fall--akzent .pfeil:hover{color:var(--blau-hell)}
.partner-karte{margin-top:1.6rem;display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:2rem;align-items:center;background:#fff;border:1px solid var(--linie);border-radius:var(--radius-k);padding:1.4rem}
.partner-karte picture{border-radius:12px;overflow:hidden;aspect-ratio:3/2}
.partner-karte img{width:100%;height:100%;object-fit:cover}
.partner-karte h3{font-size:1.4rem}
@media (max-width:980px){.fall__raster{grid-template-columns:1fr}.partner-karte{grid-template-columns:1fr}}

/* ---------- Blick in unsere Arbeit (Fotos + Zahlenkacheln) ---------- */
/* ---------- Fotoabzüge: die Arbeiten liegen wie Abzüge auf dem Tisch ----------
   Jedes Bild bekommt einen weißen Papierrand, einen weichen Schatten und einen
   leichten Winkel. Die Bildunterschrift steht in der Handschrift, die auch das
   „Ihr AO Team" im Zitatband schreibt. Beim Hineinscrollen legen sich die Abzüge
   nacheinander an ihren Platz, beim Überfahren richtet sich einer gerade auf.  */
.mosaik__raster{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:1.5rem}
.mosaik__raster li{position:relative;border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten-k);
  --dreh:0deg;opacity:0;transform:translateY(16px) rotate(0deg);
  transition:opacity .5s var(--ease),transform .65s var(--ease),box-shadow .3s var(--ease)}
.mosaik__raster.sichtbar li{opacity:1;transform:rotate(var(--dreh))}
.mosaik__raster li:nth-child(1){--dreh:-1.4deg;transition-delay:0s}
.mosaik__raster li:nth-child(2){--dreh:1deg;transition-delay:.07s}
.mosaik__raster li:nth-child(3){--dreh:1.3deg;transition-delay:.14s}
.mosaik__raster li:nth-child(4){--dreh:-1deg;transition-delay:.21s}
.mosaik__raster li:nth-child(5){--dreh:-1.5deg;transition-delay:.28s}
.mosaik__raster li:nth-child(6){--dreh:1.5deg;transition-delay:.35s}
.mosaik__raster li:nth-child(7){--dreh:-.9deg;transition-delay:.42s}
.mosaik__raster li:nth-child(8){--dreh:1.2deg;transition-delay:.49s}
.mosaik__raster li:nth-child(9){--dreh:-1.2deg;transition-delay:.56s}
.mosaik__raster.sichtbar li:hover{transform:rotate(0deg) translateY(-7px);box-shadow:0 26px 50px -22px rgba(var(--schleier),.55);z-index:2;transition-delay:0s}
.mosaik__gross{grid-column:span 2;grid-row:span 2}
.mosaik__raster picture,.mosaik__raster img{width:100%;height:100%}
.mosaik__raster img{object-fit:cover;transition:transform .8s var(--ease)}
.mosaik__raster li:hover img{transform:scale(1.04)}
/* Der Abzug selbst: Papier ringsum, unten Platz für die Handschrift */
.mosaik__raster li.abzug{background:#fff;border-radius:5px;padding:.6rem .6rem 2.7rem;overflow:visible;
  display:flex;box-shadow:0 16px 34px -20px rgba(var(--schleier),.5),0 2px 6px -3px rgba(var(--schleier),.25)}
.abzug picture{flex:1;min-height:0;overflow:hidden;border-radius:2px;background:var(--nebel)}
.mosaik__raster li.abzug span.bild-label{position:absolute;left:.5rem;right:.5rem;bottom:.45rem;
  background:none;padding:0;border-radius:0;text-align:center;color:var(--kopf);
  font-family:"Caveat",cursive;font-weight:600;font-size:1.08rem;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mosaik__gross.abzug span.bild-label{font-size:1.5rem}
.mosaik__gross.abzug{padding-bottom:3.1rem}
@media (prefers-reduced-motion:reduce){
  .mosaik__raster li{opacity:1;transform:none;transition:none}
  .mosaik__raster.sichtbar li{transform:none}
  .mosaik__raster li:hover img{transform:none}
}
.kachel{background:var(--tinte);color:#fff;padding:1.6rem;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:none}
.kachel--blau{background:var(--blau)}
.kachel b{font-family:var(--schrift-kopf);font-size:clamp(2.2rem,3.4vw,3rem);font-weight:700;line-height:1;letter-spacing:-.03em;display:block;margin-bottom:.4rem}
.kachel > span{font-size:.92rem;color:rgba(255,255,255,.8);line-height:1.4}
@media (max-width:980px){.mosaik__raster{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}.mosaik__gross{grid-column:span 2;grid-row:span 1}}
@media (max-width:560px){.mosaik__raster{grid-auto-rows:165px;gap:1.1rem}.mosaik__raster li.abzug{padding:.4rem .4rem 2.1rem}.mosaik__raster li.abzug span.bild-label,.mosaik__gross.abzug span.bild-label{font-size:1rem}.kachel{padding:1rem;justify-content:center}.kachel b{font-size:1.7rem;margin-bottom:.25rem}.kachel > span{font-size:.78rem;line-height:1.3}}

/* ---------- Klartext ---------- */
.ehrlich__layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.ehrlich__bild{border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten);aspect-ratio:3/4}
.ehrlich__bild img{width:100%;height:100%;object-fit:cover}
.ehrlich__raster{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 2rem}

.ehrlich__icon{display:inline-flex;width:var(--sym);height:var(--sym);border-radius:12px;background:var(--sym-flaeche);color:var(--blau);align-items:center;justify-content:center;margin-bottom:1rem}
.ehrlich__icon svg{width:var(--sym-zeichen);height:var(--sym-zeichen)}
.ehrlich__block h3{font-size:1.2rem}
.ehrlich__block p{margin:0;color:var(--text-2)}
@media (max-width:980px){.ehrlich__layout{grid-template-columns:1fr}.ehrlich__bild{max-width:420px}.ehrlich__raster{grid-template-columns:1fr}}

/* ---------- Zitat (dunkles Band) ---------- */
.zitat{text-align:center}
.zitat blockquote{margin:0 auto;max-width:900px}
.zitat blockquote p{font-family:var(--schrift-kopf);font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:600;line-height:1.3;color:#fff;letter-spacing:-.02em}
.zitat__signatur{margin-top:2.4rem;display:flex;justify-content:center}
.unterschrift{position:relative;display:inline-block}
/* Der Schriftzug ist als Strichzeichnung angelegt: jeder Buchstabe besteht aus
   den Zügen, in denen man ihn wirklich schreibt. Die Züge werden über
   stroke-dashoffset nacheinander gezogen, der Stift sitzt dabei über
   getPointAtLength genau auf der Spitze der Linie. */
.unterschrift__svg{display:block;width:clamp(230px,27vw,340px);height:auto;overflow:visible}
.unterschrift__striche path{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.unterschrift__stift{fill:var(--blau-hell);opacity:0;transition:opacity .35s}
.unterschrift.schreibt .unterschrift__stift{opacity:1}
.unterschrift.fertig .unterschrift__stift{opacity:0;transition:opacity .6s .15s}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.unterschrift__stift{display:none}}

/* ---------- Über uns ---------- */
.ueber__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.ueber__bild{position:relative}
.ueber__oben{position:relative}
.ueber__bild picture{border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten);aspect-ratio:16/9}
.ueber__bild img{width:100%;height:100%;object-fit:cover}
.ueber__badge{position:absolute;right:-1.2rem;bottom:-1.8rem;z-index:3;background:#fff;border-radius:14px;padding:1rem 1.2rem;box-shadow:var(--schatten);display:flex;align-items:center;gap:.9rem;max-width:280px}
.ueber__badge b{font-family:var(--schrift-kopf);font-size:2rem;font-weight:700;color:var(--blau);line-height:1;letter-spacing:-.03em}
.ueber__team{margin-top:4rem;border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten-k);aspect-ratio:16/9}
.ueber__team img{width:100%;height:100%;object-fit:cover}
.ueber__badge span{font-size:.88rem;color:var(--text-2);line-height:1.3}
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:2rem 0}
.zahlen div{background:var(--nebel);border-radius:12px;padding:1.1rem 1.2rem;display:flex;flex-direction:column}
.zahlen dt{font-size:.85rem;color:var(--text-2);order:2}
.zahlen dd{margin:0 0 .2rem;font-family:var(--schrift-kopf);font-weight:700;font-size:1.9rem;color:var(--kopf);line-height:1.1;letter-spacing:-.02em}
.zahlen__text dd{font-size:1.02rem;line-height:1.35;letter-spacing:-.005em;margin-bottom:.35rem}
@media (max-width:860px){.ueber__raster{grid-template-columns:1fr}.ueber__bild{max-width:520px}.ueber__badge{right:0}}
@media (max-width:560px){.zahlen{grid-template-columns:1fr 1fr;gap:.7rem}.zahlen dd{font-size:1.5rem}.zahlen__text dd{font-size:.92rem}}

/* ---------- FAQ ---------- */
.faq__liste{display:grid;gap:0;max-width:880px;margin-inline:auto}
.faq__eintrag{border-bottom:1px solid var(--linie);background:transparent}
.faq__eintrag summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem .4rem;cursor:pointer;font-family:var(--schrift-kopf);font-weight:600;color:var(--kopf);font-size:1.08rem;min-height:44px;letter-spacing:-.01em}
.faq__eintrag summary:hover{color:var(--blau)}
.faq__eintrag summary::-webkit-details-marker{display:none}
.faq summary h3{font:inherit;color:inherit;letter-spacing:inherit;margin:0;display:inline}
.faq__zeichen{width:1.8rem;height:1.8rem;border-radius:50%;position:relative;flex:none;transition:background .3s;background:var(--blau-tint)}
.faq__zeichen::before,.faq__zeichen::after{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:2px;background:var(--blau);transform:translate(-50%,-50%)}
.faq__zeichen::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.faq__eintrag[open] .faq__zeichen{background:var(--blau)}
.faq__eintrag[open] .faq__zeichen::before,.faq__eintrag[open] .faq__zeichen::after{background:#fff}
.faq__eintrag[open] .faq__zeichen::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{padding:0 3rem 1.4rem .4rem;color:var(--text-2)}
.faq__a p{margin:0}
.faq__kontakt{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2.4rem}

/* ---------- Kontakt ---------- */
.kontakt__raster{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.wege-liste{list-style:none;display:grid;gap:.8rem;margin:1.8rem 0}
.weg-karte{display:flex;gap:1rem;align-items:center;padding:1.05rem 1.2rem;border-radius:12px;background:var(--nebel);border:1px solid transparent;text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.weg-karte:hover,.weg-karte:focus-visible{background:#fff;transform:translateX(4px);box-shadow:var(--schatten-k);color:var(--text)}
.weg-karte strong{color:var(--kopf);font-family:var(--schrift-kopf);font-weight:600}
.weg-karte__icon{width:var(--sym);height:var(--sym);border-radius:12px;background:var(--tinte);color:#fff;display:grid;place-items:center;flex:none;transition:background .2s}
.weg-karte__icon svg{width:var(--sym-zeichen);height:var(--sym-zeichen)}
.weg-karte:hover .weg-karte__icon,.weg-karte:focus-visible .weg-karte__icon{background:var(--blau)}
/* WhatsApp behaelt seine eigene Farbe, damit man den Kanal sofort erkennt */
.ist-wa svg{color:var(--wa)}
.hero__tel.ist-wa:hover{color:var(--wa-hell)}
.weg-karte.ist-wa .weg-karte__icon{background:var(--wa);color:#fff}
.weg-karte.ist-wa .weg-karte__icon svg{color:#fff}
.weg-karte.ist-wa:hover .weg-karte__icon,.weg-karte.ist-wa:focus-visible .weg-karte__icon{background:var(--wa-dunkel)}
.kontakt__adresse{font-size:.92rem;color:var(--text-2)}
.kontakt__bild{margin-top:1.8rem;max-width:420px;border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten)}
.kontakt__bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;object-position:center 22%}
.formular{background:#fff;border-radius:var(--radius-k);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--schatten);position:relative}
.formular h3{font-size:1.5rem}
.formular__hinweis{color:var(--text-2);font-size:.95rem;margin-bottom:1.5rem}
.feld{margin-bottom:1.1rem}
.feld label,.feld legend{display:block;font-family:var(--schrift-kopf);font-weight:600;font-size:.9rem;color:var(--kopf);margin-bottom:.4rem}
.feld input[type="text"],.feld input[type="tel"],.feld input[type="email"],.feld textarea{width:100%;border:1.5px solid var(--nebel-2);border-radius:8px;padding:.85rem 1rem;font:inherit;color:var(--text);background:var(--nebel);transition:border-color .2s,box-shadow .2s,background .2s;min-height:50px}
.feld input:focus,.feld textarea:focus{border-color:var(--blau);background:#fff;box-shadow:0 0 0 4px var(--blau-tint);outline:none}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:#c0392b}
.feld--halb{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld--halb .fehler{grid-column:1/-1}
fieldset.feld{border:0;padding:0;margin:0 0 1.1rem;min-width:0}
.pillen{display:flex;flex-wrap:wrap;gap:.5rem}
.pille{position:relative}
.pille input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pille span{display:inline-block;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--nebel-2);background:var(--nebel);font-size:.92rem;color:var(--text);transition:background .2s,color .2s,border-color .2s;min-height:40px;line-height:1.5}
.pille input:checked + span{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.pille input:focus-visible + span{outline:3px solid var(--blau);outline-offset:2px}
.feld--check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.feld--check input{width:1.3rem;height:1.3rem;margin-top:.2rem;accent-color:var(--blau)}
.feld--check label{font-family:var(--schrift-text);font-weight:400;font-size:.92rem;color:var(--text);margin:0}
.feld--check .fehler{grid-column:1/-1}
.fehler{color:#c0392b;font-size:.9rem;margin:.4rem 0 0}
.formular__klein{text-align:center;font-size:.85rem;color:var(--text-2);margin:.8rem 0 0}
.danke{position:absolute;inset:0;background:#fff;border-radius:var(--radius-k);padding:2.4rem;display:flex;flex-direction:column;justify-content:center;text-align:center}
.danke[hidden]{display:none}
.formular.gesendet > :not(.danke){visibility:hidden}
@media (max-width:860px){.kontakt__raster{grid-template-columns:1fr}}
@media (max-width:560px){.feld--halb{grid-template-columns:1fr}}

/* ---------- Fuß ---------- */
body > .fuss{background:var(--fuss);color:rgba(255,255,255,.7);padding:3.5rem 0 5.5rem;position:relative}
.fuss__oben{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:2.5rem 3rem;align-items:start}
.fuss__marke img{width:auto;height:46px;margin-bottom:1.6rem}
/* Kontaktspalte: Telefon, WhatsApp und E-Mail als gleichwertige Zeilen */
.fuss ul.fuss__kontakt{gap:.6rem}
.fuss__kontakt a{display:inline-flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-family:var(--schrift-kopf);font-weight:600;font-size:.95rem}
.fuss__kontakt a:hover,.fuss__kontakt a:focus-visible{color:var(--blau-hell)}
.fuss__kontakt svg{width:1.05rem;height:1.05rem;flex:none;color:var(--blau)}
.fuss__kontakt .ist-wa svg{color:var(--wa-hell)}
.fuss a.ist-wa:hover,.fuss a.ist-wa:focus-visible{color:var(--wa-hell)}
.fuss__adresse{font-style:normal;font-size:.92rem;line-height:1.7;margin-top:1.1rem;color:rgba(255,255,255,.6)}
/* Kanäle: einfarbig, damit fünf Markenfarben den Fuß nicht auseinanderreißen.
   Beim Überfahren bekommt jeder Kanal seine eigene Farbe. */
.fuss ul.fuss__kanaele{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin-top:0}
.fuss__kanaele-titel{margin-bottom:.75rem}
.fuss__kanal{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:10px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.72);
  transition:background .2s,color .2s,transform .2s var(--ease)}
.fuss__kanal svg{width:1.2rem;height:1.2rem}
.fuss__kanal:hover,.fuss__kanal:focus-visible{transform:translateY(-2px);color:#fff;background:var(--blau)}
/* Instagram hat keine flache Marke, sondern den bekannten Verlauf von Gelb
   über Orange und Pink nach Violett. Die anderen Kanäle tragen ebenfalls
   ihre echte Markenfarbe. */
.fuss__kanal--instagram:hover,.fuss__kanal--instagram:focus-visible{
  background:radial-gradient(circle at 28% 106%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.fuss__kanal--facebook:hover,.fuss__kanal--facebook:focus-visible{background:#1877f2}
.fuss__kanal--linkedin:hover,.fuss__kanal--linkedin:focus-visible{background:#0a66c2}
.fuss__kanal--youtube:hover,.fuss__kanal--youtube:focus-visible{background:#ff0000}
.fuss__kanal--tiktok:hover,.fuss__kanal--tiktok:focus-visible{background:#010101}
.fuss__spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.fuss h3{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem;font-weight:700}
.fuss ul{list-style:none;display:grid;gap:.45rem;font-size:.92rem}
.fuss a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s}
.fuss a:hover,.fuss a:focus-visible{color:#fff}
.fuss__unten{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;font-size:.82rem;color:rgba(255,255,255,.5)}
.fuss__unten p{margin:0}
.fuss__unten ul{display:flex;flex-wrap:wrap;gap:1.4rem}
.ein-ausloeser{background:none;border:0;padding:0;color:rgba(255,255,255,.75);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ein-ausloeser:hover{color:#fff}
@media (max-width:980px){.fuss__oben{grid-template-columns:1fr}}
@media (max-width:560px){.fuss__spalten{grid-template-columns:1fr 1fr}body > .fuss{padding-bottom:6.5rem}}

/* ---------- Mobile Schnellleiste ---------- */
.mobil-leiste{display:none}
@media (max-width:860px){
  .mobil-leiste{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:80;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:.4rem;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid var(--linie);border-radius:14px;padding:.4rem;box-shadow:0 16px 40px -18px rgba(var(--schleier),.5)}
  .mobil-leiste a{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem .5rem;border-radius:10px;text-decoration:none;font-family:var(--schrift-kopf);font-weight:600;font-size:.9rem;color:var(--kopf);min-height:44px}
  .mobil-leiste a:hover{background:var(--nebel)}
  .mobil-leiste__cta{background:var(--blau);color:#fff!important}
  .mobil-leiste__cta:hover{background:var(--blau-dunkel)!important}
  html[data-banner-offen] .mobil-leiste{display:none}
  .bf-knopf{bottom:86px!important;right:14px!important;width:50px!important;height:50px!important}
}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.sichtbar{opacity:1;transform:none}
.wege__raster .weg:nth-child(2),.zg:nth-child(2),.fall:nth-child(2){transition-delay:.12s}
.zg:nth-child(3),.fall:nth-child(3){transition-delay:.24s}
.zg:nth-child(4){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.knopf,.weg,.zg,.fall{transition:none}}

/* ---------- Tiefe: sanfter Neigungseffekt ---------- */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
@media (prefers-reduced-motion:reduce){[data-tilt]{transform:none!important}}

/* ---------- Barrierefreiheits-Knopf in AO-Blau ---------- */
.bf-knopf{background:var(--blau)!important;box-shadow:0 10px 30px -10px rgba(43,135,218,.6)!important}
.bf-knopf:hover,.bf-knopf:focus-visible{background:var(--blau-dunkel)!important}

/* ---------- Sichtbarkeit: Praxis in der Mitte, Region drumherum ---------- */
.einleitung--kurz{font-weight:600;color:#fff;margin-bottom:.5rem}
.netz-sektion{overflow:hidden}
.netz-sektion .knopf{margin-top:2.2rem}
.netz__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.netz{position:relative;aspect-ratio:1;width:min(560px,100%);margin-inline:auto}
.netz__ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(255,255,255,.16)}
.netz__ring--1{width:68%;height:68%}
.netz__ring--2{width:96%;height:96%;border-style:solid;border-color:rgba(255,255,255,.1)}
.netz__linien{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.netz__linien line{stroke:var(--blau-hell);stroke-width:.4;opacity:.65;stroke-dasharray:2 5;animation:netzfluss 3.5s linear infinite}
.netz__linien line:nth-child(2n){animation-duration:4.6s}
.netz__linien line:nth-child(3n){animation-duration:5.4s}
@keyframes netzfluss{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
.netz__punkt{position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));width:2.7rem;height:2.7rem;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--blau-hell);
  transform:translate(-50%,-50%);animation:netzatmen 6s ease-in-out infinite}
.netz__punkt svg{width:1.2rem;height:1.2rem}
.netz__punkt:nth-of-type(2n){animation-delay:-1.5s;color:#fff}
.netz__punkt:nth-of-type(3n){animation-delay:-3s}
.netz__punkt:nth-of-type(4n){animation-delay:-4.5s}
@keyframes netzatmen{0%,100%{opacity:.55}50%{opacity:1}}
.netz__kanal{position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));transform:translate(-50%,-50%);white-space:nowrap;
  background:rgba(43,135,218,.26);border:1px solid rgba(143,195,242,.4);color:#fff;
  font-family:var(--schrift-kopf);font-weight:600;font-size:.68rem;letter-spacing:.02em;
  padding:.3rem .62rem;border-radius:999px;backdrop-filter:blur(6px)}
.netz__mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1;border-radius:50%;
  background:#fff;color:var(--kopf);display:grid;place-items:center;align-content:center;gap:.3rem;
  box-shadow:0 0 0 10px rgba(43,135,218,.16),0 24px 50px -20px rgba(0,0,0,.6)}
.netz__mitte svg{width:3.4rem;height:3.4rem;color:var(--blau)}

@media (prefers-reduced-motion:reduce){.netz__linien line,.netz__punkt{animation:none}.netz__punkt{opacity:.85}}
@media (max-width:980px){.netz__raster{grid-template-columns:1fr}.netz{order:2;width:min(420px,100%);margin-top:1rem}}
@media (max-width:620px){.netz__kanal{display:none}.netz__punkt{width:2.5rem;height:2.5rem}.netz__punkt svg{width:1.1rem;height:1.1rem}.netz__mitte b{font-size:.82rem}}

/* Rückseite, Taschenlampe und Kamera-Hinweis */
.telefon.gedreht{transform:rotateY(180deg)}
.telefon__rueck{position:absolute;inset:3px;border-radius:51px;backface-visibility:hidden;transform:rotateY(180deg);
  background:linear-gradient(150deg,#20242c 0,#12151b 45%,#0a0d12 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.telefon__kameramodul{position:absolute;left:9%;top:4.5%;width:40%;aspect-ratio:1;border-radius:26%;
  background:linear-gradient(150deg,#2a2f38,#14171d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:6%;padding:12%}
.telefon__kameramodul i{width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#4a5566 0,#161b23 55%,#05070a 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.09),inset 0 2px 5px rgba(0,0,0,.8),0 1px 2px rgba(255,255,255,.05);
  position:relative}
.telefon__kameramodul i::after{content:"";position:absolute;left:22%;top:18%;width:26%;height:26%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.telefon__blitz{grid-column:1/-1;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5a606c,#2b3038 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .25s,box-shadow .25s}
.telefon__blitz.an{background:#fff8d8;box-shadow:0 0 18px 6px rgba(255,246,199,.85),0 0 60px 26px rgba(255,240,170,.45)}
.telefon__schnell button{width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.16);
  color:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.telefon__schnell button:hover{background:rgba(255,255,255,.28);transform:scale(1.06)}
.telefon__schnell svg{width:15px;height:15px}
.telefon__meldung-hinweis{position:absolute;left:50%;top:44%;transform:translate(-50%,calc(-50% + 8px));z-index:5;margin:0;
  background:rgba(11,14,20,.92);color:#fff;font-size:.78rem;line-height:1.35;text-align:center;
  padding:.55rem .85rem;border-radius:12px;max-width:14rem;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--ease);box-shadow:0 12px 30px -12px rgba(0,0,0,.8)}
.telefon__meldung-hinweis.da{opacity:1;transform:translate(-50%,-50%)}
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.telefon{transition:none}}

/* Mailansicht, wenn eine Meldung angetippt wird */
.telefon__meldung[role="button"]{cursor:pointer}
.telefon__mail{position:absolute;inset:0;z-index:6;background:#fff;color:#25222e;border-radius:36px;overflow:hidden;
  display:flex;flex-direction:column;transform:translateY(12%);opacity:0;cursor:pointer;
  transition:transform .4s var(--ease),opacity .3s}
.telefon__mail.offen{transform:none;opacity:1}
.telefon__mailkopf{padding:2.9rem .9rem .6rem;border-bottom:1px solid #e8ecf2;background:#f7f9fc}
.telefon__zurueck{font-family:var(--schrift-kopf);font-weight:600;font-size:.8rem;color:var(--blau)}
.telefon__mailrumpf{padding:.9rem .95rem 1rem;overflow:auto;font-size:.74rem;line-height:1.5;color:#3b4553}
.telefon__mailrumpf p{margin:0 0 .55rem}
.telefon__betreff{font-family:var(--schrift-kopf);font-weight:700;font-size:.92rem;color:#0f1c30;line-height:1.25;margin-bottom:.7rem!important}
.telefon__absender{display:flex;gap:.55rem;align-items:center;padding-bottom:.7rem;margin-bottom:.7rem;border-bottom:1px solid #eef1f5}
.telefon__avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#4a9de8,#1f6fb8);color:#fff;
  display:grid;place-items:center;font-family:var(--schrift-kopf);font-weight:600;font-size:.66rem;flex:none}
.telefon__absender strong{display:block;font-size:.76rem;color:#0f1c30;font-family:var(--schrift-kopf)}
.telefon__absender em{font-style:normal;font-size:.66rem;color:#6b7482}
.telefon__anhang{display:inline-flex;align-items:center;gap:.35rem;background:#f0f4f9;border:1px solid #e2e8f0;border-radius:8px;
  padding:.3rem .55rem;font-size:.68rem;font-family:var(--schrift-kopf);font-weight:600;color:#0f1c30;margin-bottom:.7rem}
.telefon__anhang svg{width:.85rem;height:.85rem;color:#6b7482}
.telefon__gruss{margin-top:.3rem;color:#25222e}
@media (prefers-reduced-motion:reduce){.telefon__mail{transition:none}}


/* ==========================================================================
   Terminseiten (Ihr Erstgespräch, Ihr Beratungsgespräch)
   ========================================================================== */
/* Kein schräger Schnitt oben: der Kopf liegt darüber und würde angeschnitten */
.dank{padding:9.5rem 0 clamp(5rem,8vw,7rem);position:relative}
.dank__innen{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.dank__text h1{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.06;letter-spacing:-.03em;color:#fff;margin:.5rem 0 1.1rem}
.dank__text .einleitung{color:rgba(255,255,255,.78);max-width:46ch}
.dank__text .kicker{color:var(--blau-hell)}
.dank .hero__bewertung{margin-top:2.2rem;animation-delay:.3s}
.dank__zahlen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.dank__zahlen li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:1.1rem 1.2rem}
.dank__zahlen b{display:block;font-family:var(--schrift-kopf);font-weight:700;font-size:2rem;line-height:1;
  letter-spacing:-.03em;color:#fff;margin-bottom:.45rem}
.dank__zahlen span{display:block;font-size:.84rem;line-height:1.35;color:rgba(255,255,255,.72)}
.dank__bild{display:block;border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten)}
.dank__bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}

.partner{padding:4.5rem 0 1rem}
.vertrauen{padding:4.5rem 0}
.schluss{padding:6rem 0 7rem}
.mitte{text-align:center}
.schluss .einleitung{margin:0 auto 2rem;color:rgba(255,255,255,.78)}
.schluss h2{color:#fff}

/* Das Team: quadratische Bilder, damit alle Köpfe gleich groß wirken */
.team{padding:5rem 0}
.team__raster{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;margin-top:2.6rem}
.team__kopf picture{display:block;border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten-k);background:#fff}
.team__kopf img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform .6s var(--ease)}
.team__kopf:hover img{transform:scale(1.04)}
.team__name{font-family:var(--schrift-kopf);font-weight:700;font-size:1rem;color:var(--kopf);margin:.9rem 0 .1rem}
.team__rolle{font-size:.86rem;color:var(--text-2)}

.zg__raster--drei{grid-template-columns:repeat(3,1fr)}

.hinweis-band{display:flex;align-items:flex-start;gap:1rem;margin-top:2.4rem;padding:1.2rem 1.4rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;color:rgba(255,255,255,.82);font-size:.95rem}
.hinweis-band svg{width:var(--sym-zeichen);height:var(--sym-zeichen);flex:none;color:var(--blau-hell);margin-top:.1rem}
.hinweis-band strong{color:#fff}

@media (max-width:980px){
  .dank__innen{grid-template-columns:1fr}
  .dank{padding:7rem 0 4rem}
  .team__raster{grid-template-columns:repeat(3,1fr)}
  .zg__raster--drei{grid-template-columns:1fr}
}
@media (max-width:620px){
  .dank__zahlen{grid-template-columns:1fr}
  .team__raster{grid-template-columns:repeat(2,1fr);gap:1rem}
}


/* ---------- Willkommensseite: SEPA-Mandat ---------- */
.sepa{padding:5rem 0}
.sepa__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:start}
.sepa__text p{color:var(--text-2)}
.sepa__daten{margin:1.6rem 0;display:grid;gap:.9rem}
.sepa__daten dt{font-family:var(--schrift-kopf);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:.15rem}
.sepa__daten dd{margin:0;font-family:var(--schrift-kopf);font-weight:600;color:var(--kopf)}
.sepa__hinweis{display:flex;gap:.9rem;align-items:flex-start;background:var(--nebel);border-radius:12px;padding:1rem 1.2rem;font-size:.92rem}
.sepa__hinweis svg{width:var(--sym-zeichen);height:var(--sym-zeichen);flex:none;color:var(--blau);margin-top:.1rem}
.feld--drittel{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-bottom:.4rem}
.feld--drittel label{margin-bottom:.4rem}
.erreichen__band{margin-top:2rem;background:#fff;border:1px solid var(--linie);border-radius:var(--radius-k);padding:1.6rem 1.8rem;display:grid;gap:.6rem}
.erreichen__band p{margin:0;color:var(--text-2);font-size:.95rem}
.erreichen__wege{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem}
.erreichen__wege a{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--schrift-kopf);font-weight:600;color:var(--kopf);text-decoration:none}
.erreichen__wege a svg{width:1.15rem;height:1.15rem;color:var(--blau)}
.erreichen__wege a:hover{color:var(--blau)}
.erreichen__wege a.ist-wa:hover{color:var(--wa-dunkel)}
.erreichen__band strong{color:var(--kopf)}
.zg .pfeil{margin-top:1rem;font-size:.92rem;word-break:break-word}
@media (max-width:980px){.sepa__raster{grid-template-columns:1fr}}
@media (max-width:560px){.feld--drittel{grid-template-columns:1fr}}


/* ---------- Reine Textseiten (Gleichstellung, später Impressum und Datenschutz) ---------- */
.rechtstext{padding:9.5rem 0 5rem}
.rechtstext__innen{max-width:760px}
.rechtstext h1{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.03em;margin:.5rem 0 1rem}
.rechtstext .einleitung{margin-bottom:2.6rem}
.rechtstext__block{padding:1.8rem 0;border-top:1px solid var(--linie)}
.rechtstext__block h2{font-size:1.25rem;margin-bottom:.7rem}
.rechtstext__block p{color:var(--text-2);margin-bottom:.8rem}
.rechtstext__block p:last-child{margin-bottom:0}
.rechtstext__hinweis{display:flex;gap:1rem;align-items:flex-start;margin-top:2rem;background:var(--nebel);border-radius:var(--radius-k);padding:1.3rem 1.5rem}
.rechtstext__hinweis svg{width:var(--sym-zeichen);height:var(--sym-zeichen);flex:none;color:var(--blau);margin-top:.15rem}
.rechtstext__hinweis p{margin:0;color:var(--text-2);font-size:.95rem}


/* ---------- Schlichter Kopf für die Seiten nach der Buchung ----------
   Kein Menü, kein zweiter Terminknopf: der Termin steht bereits. Es bleibt,
   was hier gebraucht wird, nämlich schnell anrufen oder kurz schreiben. */
.kopf--schlicht .kopf__innen{justify-content:space-between}
.marke--fest{display:inline-flex;align-items:center}
.kopf--schlicht .kopf__aktionen{gap:.8rem}
.kopf__wa{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .85rem;border-radius:999px;
  border:1.5px solid rgba(37,211,102,.55);background:rgba(37,211,102,.12);color:var(--wa-hell);
  font-family:var(--schrift-kopf);font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s}
.kopf__wa svg{width:1.1rem;height:1.1rem;color:var(--wa-hell)}
.kopf__wa:hover,.kopf__wa:focus-visible{background:var(--wa);border-color:var(--wa);color:#fff}
.kopf__wa:hover svg,.kopf__wa:focus-visible svg{color:#fff}
.kopf--schlicht.geschrumpft .kopf__wa{color:var(--wa-dunkel);border-color:rgba(18,140,126,.45);background:rgba(37,211,102,.12)}
.kopf--schlicht.geschrumpft .kopf__wa svg{color:var(--wa-dunkel)}
.kopf--schlicht.geschrumpft .kopf__wa:hover{color:#fff}
.kopf--schlicht.geschrumpft .kopf__wa:hover svg{color:#fff}
@media (max-width:560px){
  .kopf--schlicht .kopf__tel span{display:none}
  .kopf__wa span{display:none}
  .kopf__wa{padding:.42rem .6rem}
  .mobil-leiste--zwei{grid-template-columns:1fr 1fr}
}


/* ---------- Brotkrume auf den Fallstudienseiten ----------
   Nur auf dunklem Grund im Kopfbereich. Der aktuelle Punkt ist kein Link
   und trägt aria-current, damit Screenreader die Stelle ansagen. */
.krume{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;
  margin:0 0 1.4rem;padding:0;font-family:var(--schrift-kopf);font-size:.87rem;font-weight:500}
.krume li{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.62)}
.krume li+li::before{content:"\203A";opacity:.55}
.krume a{color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);
  transition:color .2s,border-color .2s}
.krume a:hover,.krume a:focus-visible{color:#fff;border-color:#fff}
.krume [aria-current]{color:#fff}

/* Ausgangslage: dieselben Blöcke wie bei „Unser Versprechen“, aber ohne Bild
   daneben, deshalb drei statt zwei Spalten. */
.lage__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem 2rem}
@media (max-width:900px){.lage__raster{grid-template-columns:1fr}}

/* Ergebnisblock: Fließtext links, Kundenstimme rechts */
.ergebnis__layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,4rem);align-items:start}
@media (max-width:900px){.ergebnis__layout{grid-template-columns:1fr}}
.ergebnis__text p{color:var(--text-2)}
.ergebnis__text p+p{margin-top:1rem}
.ergebnis__stimme{background:#fff;border-radius:var(--radius-k);box-shadow:var(--schatten-k);
  padding:1.8rem;border-left:4px solid var(--blau)}
.ergebnis__stimme blockquote{margin:0;font-family:var(--schrift-kopf);font-weight:500;
  font-size:1.08rem;line-height:1.5;color:var(--tinte)}
.ergebnis__stimme blockquote p{margin:0}
.ergebnis__stimme .fall__name{margin:1rem 0 0}

/* Kürzerer Kopfbereich für Unterseiten: die Startseite darf einen ganzen
   Bildschirm füllen, eine Unterseite soll den Inhalt schneller zeigen. */
.hero--kurz{min-height:auto;padding:clamp(8.5rem,14vw,10.5rem) 0 clamp(3.5rem,6vw,5rem)}
.hero--kurz .hero__hintergrund img{object-position:60% 35%;animation:none;transform:none}
.hero--kurz .krume{position:relative;z-index:2}

/* Drei Schritte statt vier: sonst bleibt in der zweiten Reihe ein Loch. */
.schritte--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.schritte--drei li{border-bottom:none}
@media (max-width:900px){.schritte--drei{grid-template-columns:1fr}}

/* ---------- Partnerseite ----------
   Große freigestellte Logos auf ruhigem Grund. Das Logofeld hat überall
   dieselbe Höhe, damit die Karten trotz sehr unterschiedlicher Logoformate
   eine Linie ergeben. */
.pkarten{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,2.2vw,2.2rem)}
@media (max-width:860px){.pkarten{grid-template-columns:1fr}}
.pkarte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-k);
  box-shadow:var(--schatten-k);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pkarte:hover{transform:translateY(-5px);box-shadow:var(--schatten);border-color:var(--blau)}
.pkarte__logo{display:flex;align-items:center;justify-content:center;height:132px;padding:1.4rem 2rem;
  background:linear-gradient(180deg,var(--nebel),#fff);border-bottom:1px solid var(--linie)}
.pkarte__logo img{max-height:72px;max-width:100%;width:auto;object-fit:contain}
.pkarte__inhalt{padding:1.6rem 1.8rem 1.8rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.pkarte .kicker{margin:0}
.pkarte h3{font-size:1.22rem;margin:0}
.pkarte p{margin:0;color:var(--text-2);font-size:.98rem;flex:1}
.pkarte .pfeil{margin-top:.4rem;align-self:flex-start}

/* Hinweis unter dem Partnerband auf der Startseite und den Terminseiten */
.bekannt__mehr{grid-column:1/-1;text-align:center;margin:1.4rem 0 0;font-size:.92rem}
.bekannt--einzeln .bekannt__mehr{margin-top:1.2rem}

/* ---------- Rechtsseiten: Brotkrume, Inhaltsverzeichnis, Stand ---------- */
.krume--hell li{color:var(--text-2)}
.krume--hell a{color:var(--text-2);border-bottom-color:var(--linie)}
.krume--hell a:hover,.krume--hell a:focus-visible{color:var(--blau);border-color:var(--blau)}
.krume--hell [aria-current]{color:var(--kopf)}
.rechtstext__stand{font-size:.88rem;color:var(--text-2);margin:-.6rem 0 2.2rem}
.inhaltsvz{background:var(--nebel);border:1px solid var(--linie);border-radius:var(--radius-k);
  padding:1.6rem 1.8rem;margin:0 0 2.6rem}
.inhaltsvz__titel{font-family:var(--schrift-kopf);font-weight:700;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);margin:0 0 .9rem}
.inhaltsvz ol{margin:0;padding-left:1.3rem;columns:2;column-gap:2.4rem}
@media (max-width:700px){.inhaltsvz ol{columns:1}}
.inhaltsvz li{margin:.3rem 0;break-inside:avoid}
.inhaltsvz a{color:var(--kopf);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.inhaltsvz a:hover,.inhaltsvz a:focus-visible{color:var(--blau);border-color:var(--blau)}
.rechtstext__block{scroll-margin-top:6.5rem}
.rechtstext__block--kopf p:first-of-type{font-size:1.05rem;color:var(--kopf)}
/* Rechtstexte enthalten sehr lange URLs, die sonst die Seite breiter machen */
.rechtstext__block{overflow-wrap:anywhere}
.rechtstext__block a{word-break:break-word}
.inhaltsvz a,.inhaltsvz li{overflow-wrap:anywhere}

/* ---------- Empfehlungsprogramm: Stufenleiter, Feldhilfen ---------- */
.stufen{list-style:none;margin:0;padding:0;counter-reset:stufe;
  display:grid;gap:1.1rem}
.stufe{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius-k);
  padding:1.6rem 1.8rem;box-shadow:var(--schatten-w);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.stufe:hover{transform:translateY(-2px);box-shadow:var(--schatten);border-color:var(--blau)}
.stufe__nr{font-family:var(--schrift-kopf);font-weight:700;font-size:var(--sym-nr);
  line-height:1;color:var(--blau);opacity:.35;min-width:1.6ch;text-align:right}
.stufe__zaehler{font-family:var(--schrift-kopf);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin:0 0 .35rem}
.stufe__lohn{font-size:1.14rem;line-height:1.35;margin:0 0 .5rem;color:var(--kopf)}
.stufe__inhalt p:last-child{margin:0;color:var(--text-2)}
@media (max-width:560px){
  .stufe{grid-template-columns:1fr;gap:.5rem;padding:1.3rem 1.4rem}
  .stufe__nr{text-align:left;font-size:2.4rem}
}
/* Erklärtext unter einem Eingabefeld, kein Fehler */
.feld__hilfe{margin:.35rem 0 0;font-size:.86rem;color:var(--text-2);line-height:1.45}
.feld fieldset .feld--check{margin-top:.6rem}

/* ---------- Ablauf: drei Schritte mit Bild ---------- */
.ablauf__liste{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;
  grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.ablauf__liste{grid-template-columns:1fr;gap:1.3rem;max-width:560px;margin-inline:auto}}
.ablauf__schritt{position:relative;background:#fff;border:1px solid var(--linie);
  border-radius:var(--radius-k);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--schatten-k);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.ablauf__schritt:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:rgba(43,135,218,.4)}
.ablauf__bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--nebel-2)}
.ablauf__bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ablauf__schritt:hover .ablauf__bild img{transform:scale(1.04)}
/* Die Ziffer sitzt auf der Kante zwischen Bild und Text */
.ablauf__nr{position:absolute;top:calc(4 / 3 * 100% / 3);left:0;transform:translateY(-50%);
  z-index:2;width:var(--sym);height:var(--sym);border-radius:0 var(--radius-k) var(--radius-k) 0;
  background:var(--blau);color:#fff;display:grid;place-items:center;
  font-family:var(--schrift-kopf);font-weight:700;font-size:1.5rem;line-height:1;
  box-shadow:0 10px 22px -12px rgba(43,135,218,.9)}
.ablauf__inhalt{padding:1.6rem 1.7rem 1.8rem}
.ablauf__inhalt h3{margin:0 0 .5rem}
.ablauf__inhalt p:last-child{margin:0;color:var(--text-2)}
.ablauf__dauer{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .8rem;
  font-family:var(--schrift-kopf);font-weight:700;font-size:.82rem;letter-spacing:.04em;
  color:var(--blau);background:var(--blau-tint);border-radius:999px;padding:.34rem .8rem}
.ablauf__dauer svg{width:1em;height:1em}
.ablauf__fuss{text-align:center;margin:2.2rem auto 0;max-width:60ch;color:var(--text-2);font-size:.98rem}
/* Sprungmarken dürfen nicht unter dem festen Kopf landen */
section[id]{scroll-margin-top:6.5rem}
/* Danke-Seite: zweispaltiges Raster, heller Pfeil auf dunklem Grund */
.lage__raster--zwei{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.lage__raster--zwei{grid-template-columns:1fr}}
.pfeil--hell{color:var(--blau-hell)}
.pfeil--hell:hover{color:#fff}
.dank__kontakt{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:1.8rem}
.dank__haken{width:var(--sym);height:var(--sym);border-radius:50%;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;margin:0 auto 1.4rem}
.dank__haken svg{width:var(--sym-zeichen);height:var(--sym-zeichen);color:var(--blau-hell)}
/* Rechtsseiten haben sehr lange Komposita in der Überschrift
   („Geschäftsbedingungen", „Datenschutzerklärung"). Auf dem Handy werden
   sie sonst breiter als der Bildschirm. */
.rechtstext h1{hyphens:auto;overflow-wrap:break-word}
@media (max-width:560px){.rechtstext h1{font-size:clamp(1.9rem,8vw,2.4rem)}}

/* ---------- Startseite: Abschluss statt Formular ----------
   Das Formular steht nur noch auf kontakt.html. Damit tut „Gespräch
   vereinbaren" auf jeder Seite dasselbe, statt auf der Startseite zu
   scrollen und überall sonst die Seite zu wechseln. */
.kontakt__abschluss{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-k);
  box-shadow:var(--schatten-k);padding:2.2rem 2rem;align-self:start;text-align:center}
.kontakt__zusage{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.3rem;
  font-family:var(--schrift-kopf);font-weight:700;font-size:.86rem;color:var(--blau);
  background:var(--blau-tint);border-radius:999px;padding:.4rem .95rem}
.kontakt__zusage svg{width:1em;height:1em}
.kontakt__klein{margin:1rem 0 0;font-size:.88rem;color:var(--text-2)}
.kontakt__spalte{display:flex;flex-direction:column;gap:1.3rem;align-self:start}
.kontakt__spalte .wege-liste{margin:0}
.kontakt__spalte .kontakt__adresse{margin:0}
.wege-titel{margin:.4rem 0 -.4rem;font-family:var(--schrift-kopf);font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
/* Teamkachel ohne Foto: Initialen statt kaputtem Bild */
.team__platzhalter{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--radius-k);
  background:linear-gradient(150deg,var(--nebel-2),var(--nebel));border:1px dashed var(--linie);
  font-family:var(--schrift-kopf);font-weight:700;font-size:2.2rem;letter-spacing:.04em;
  color:var(--blau);opacity:.85}

/* Hochformate im Fallstudien-Mosaik: doppelt hoher Kasten statt beschnittener Köpfe.
   Zusätzlich sitzt der Ausschnitt etwas höher, Gesichter stehen selten in der Mitte. */
.mosaik__raster .abzug--hoch{grid-row:span 2}
.mosaik__raster img{object-position:50% 32%}
@media (max-width:700px){.mosaik__raster .abzug--hoch{grid-row:span 1}}
.mosaik__raster .kachel--hoch{grid-row:span 2}
@media (max-width:700px){.mosaik__raster .kachel--hoch{grid-row:span 1}}

/* Fallstudien-Übersicht: die ganze Karte ist anklickbar, nicht nur der Textlink
   unten. Der Link bleibt sichtbar, er ist die erkennbare Handlung; der Rest der
   Karte ist zusätzliche Trefferfläche. */
.fallstudien .fall{position:relative}
.fall__ganz::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.fall{transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.fall:has(.fall__ganz:hover),.fall:has(.fall__ganz:focus-visible){transform:translateY(-4px)}
.fall:has(.fall__ganz:hover) .fall__ganz::after{transform:translateX(5px)}
.fall blockquote,.fall__name,.fall__zahlen{position:relative;z-index:2;pointer-events:none}

/* ---------- Anfahrt mit Karte (erst nach Einwilligung) ---------- */
.karte__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (max-width:900px){.karte__raster{grid-template-columns:1fr}}
.karte__adresse{font-style:normal;margin:1.4rem 0 1.2rem;line-height:1.6;color:var(--kopf)}
.karte__box{position:relative;aspect-ratio:4/3;border-radius:var(--radius-k);overflow:hidden;
  background:linear-gradient(150deg,var(--nebel-2),#fff);border:1px solid var(--linie);
  box-shadow:var(--schatten-k);display:grid;place-items:center}
@media (max-width:560px){.karte__box{aspect-ratio:3/4}}
.karte__box iframe{width:100%;height:100%;border:0;display:block}
.karte__hinweis{text-align:center;padding:2rem 1.8rem;max-width:42ch}
.karte__hinweis h3{margin:0 0 .6rem}
.karte__hinweis p{color:var(--text-2);font-size:.96rem}
.karte__icon{display:grid;place-items:center;width:var(--sym);height:var(--sym);margin:0 auto 1rem;
  border-radius:50%;background:var(--sym-flaeche);color:var(--blau)}
.karte__icon svg{width:var(--sym-zeichen);height:var(--sym-zeichen)}
.karte__hinweis .knopf{margin-top:1.1rem}
.karte__klein{font-size:.82rem;margin-top:1rem}

/* Das Kopfbild der Soforthilfe zeigt zwei Menschen am Schreibtisch. Der
   Standardausschnitt 60%/35% schneidet bei breiten Bändern den oberen Kopf an
   und auf dem Handy den rechten. Deshalb sitzt der Ausschnitt hier oben rechts.
   Regel aus dem QA-Standard: keine angeschnittenen Köpfe. */
.hero--sos .hero__hintergrund img{object-position:97% 4%}

/* --- Soforthilfe: der Kasten „Es ist dringend?" neben dem Formular ------- */
.sos__eilig{margin-top:1.6rem;padding:1.2rem 1.3rem;border:1.5px solid var(--nebel-2);border-radius:14px;background:#fff}
.sos__eilig h3{margin:0 0 .35rem;font-size:1.05rem}
.sos__eilig p{margin:0 0 .9rem;font-size:.94rem;color:var(--text-2)}
.sos__eilig .dank__kontakt{margin:0}

/* --- Terminbuchung: Musteransicht ---------------------------------------
   Im Entwurf steht hier eine Attrappe. Im Livebetrieb sitzt an der Stelle
   das Buchungsfenster von Microsoft Bookings als iframe, geladen erst nach
   Einwilligung, genau wie Karte und Video. */
.buchung__raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;align-items:start}
.buchung__box{border:1.5px solid var(--nebel-2);border-radius:var(--radius-k);background:#fff;overflow:hidden;box-shadow:var(--schatten-k)}
.buchung__tor{padding:clamp(1.6rem,3vw,2.4rem);text-align:center}
.buchung__icon{width:var(--sym);height:var(--sym);border-radius:50%;background:var(--sym-flaeche);color:var(--blau);display:inline-grid;place-items:center;margin-bottom:1rem}
.buchung__icon svg{width:var(--sym-zeichen);height:var(--sym-zeichen)}
.buchung__tor h3{margin-bottom:.5rem}
.buchung__tor p{font-size:.94rem;color:var(--text-2);max-width:46ch;margin-inline:auto}
.buchung__tor .knopf{margin-top:1.1rem}
.buchung__klein{font-size:.82rem;margin-top:1rem}
.buchung__muster{padding:clamp(1.2rem,2.4vw,1.8rem)}
.buchung__band{display:flex;align-items:center;gap:.6rem;background:var(--blau-tint);border:1px dashed var(--blau);border-radius:10px;padding:.6rem .9rem;font-size:.84rem;color:var(--text);margin-bottom:1.3rem}
.buchung__band svg{width:1.1rem;height:1.1rem;color:var(--blau);flex:none}
.dienste{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.4rem}
.dienst{border:1.5px solid var(--nebel-2);border-radius:12px;padding:.9rem 1rem;background:var(--nebel)}
.dienst--aktiv{border-color:var(--blau);background:var(--blau-tint)}
.dienst b{display:block;font-family:var(--schrift-kopf);font-size:.95rem;color:var(--kopf)}
.dienst span{display:block;font-size:.85rem;color:var(--text-2);margin-top:.15rem}
.tage{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:1.1rem}
.tag{flex:none;min-width:66px;text-align:center;border:1.5px solid var(--nebel-2);border-radius:10px;padding:.55rem .4rem;background:#fff;font-size:.82rem;color:var(--text-2);line-height:1.35}
.tag b{display:block;font-family:var(--schrift-kopf);font-size:1.1rem;color:var(--kopf)}
.tag--aktiv{border-color:var(--blau);background:var(--blau);color:rgba(255,255,255,.85)}
.tag--aktiv b{color:#fff}
.tag--leer{opacity:.45}
.zeiten{display:flex;flex-wrap:wrap;gap:.5rem}
.zeit{border:1.5px solid var(--nebel-2);border-radius:999px;padding:.5rem 1rem;font-family:var(--schrift-kopf);font-weight:600;font-size:.9rem;color:var(--kopf);background:#fff;min-height:40px;display:inline-flex;align-items:center}
.zeit--aktiv{border-color:var(--blau);background:var(--blau);color:#fff}
.buchung__fuss{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--linie);font-size:.86rem;color:var(--text-2)}
@media (max-width:980px){.buchung__raster{grid-template-columns:1fr}}
@media (max-width:560px){.dienste{grid-template-columns:1fr}}


/* Schraege Kanten: die Nachbarsektion laeuft hinter die Schraege, damit der
   Freischnitt ihre Farbe traegt statt Weiss. Transparenter Rand + negativer
   Abstand: der Hintergrund fuellt den Rand, der Inhalt bleibt, wo er war. */
.schraeg,.schraeg--oben,.schraeg--unten,.kiefer{z-index:2}
section:has(+ .schraeg),section:has(+ .schraeg--oben),section:has(+ .kiefer){margin-bottom:calc(-1 * var(--schraeg));border-bottom:var(--schraeg) solid transparent;z-index:1}
.schraeg + section,.schraeg--unten + section,.kiefer + section{margin-top:calc(-1 * var(--schraeg));border-top:var(--schraeg) solid transparent;z-index:1}
/* Letzte dunkle Sektion vor der Fusszeile: gerade Unterkante und gleiche Farbe wie die
   Fusszeile, damit beides eine Flaeche wird statt Grau auf Schwarz. */
main > .schraeg:last-child{clip-path:polygon(0 var(--schraeg),100% 0,100% 100%,0 100%);padding-bottom:clamp(4.5rem,8.5vw,7.5rem)}
main > .schraeg--unten:last-child{clip-path:none}
main > .dunkel:last-child{background:linear-gradient(160deg,var(--tinte-2) 0,var(--tinte) 55%,var(--fuss) 100%)}

/* Zwei dunkle Schraegen hintereinander (Netz -> Kiefer): die obere bekommt unten eine
   gerade Kante, sonst kreuzen sich die Schnitte und ein weisser Keil entsteht. */
.schraeg:has(+ .kiefer){clip-path:polygon(0 var(--schraeg),100% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--tinte-2) 0,var(--tinte) 100%)}
section.dunkel + section.kiefer{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--schraeg)));background:linear-gradient(180deg,var(--tinte) 0,var(--tinte) 12%,var(--tinte-0) 100%);z-index:2;margin-top:0;border-top:0}

/* Kiefermodell: Luft zwischen Knopf und unterer Schraege */
.kiefer{padding-bottom:calc(var(--schraeg) + 3.5rem)}
/* "Mehr Fallstudien ansehen" und aehnliche Weiterleitungen unter Kartenreihen: Abstand zu den Karten */
.mitte:has(> .pfeil){margin-top:2.75rem}

/* Kameramodul auf der Rueckseite: zwei grosse Linsen mit Metallring und Glaskoerper,
   Blitz und Mikrofon klein daneben. Ersetzt die zu flache Fassung (Wunsch Ovidiu). */
.telefon__kameramodul{left:7%;top:4%;width:44%;border-radius:24%;padding:9%;gap:8% 10%;
  grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;place-items:center;
  background:linear-gradient(150deg,#262a33,#101318 65%,#0b0d11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.6),0 6px 14px -8px rgba(0,0,0,.9)}
.telefon__kameramodul i{grid-column:1;width:100%;
  background:
    radial-gradient(circle at 50% 50%,#0a0d13 0 30%,#1a2130 31% 40%,#0b0f16 41% 58%,#2b323d 59% 66%,#5d6673 67% 74%,#1c2028 75% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 3px 6px rgba(0,0,0,.9),0 2px 3px rgba(0,0,0,.6),0 0 0 3px #0e1116}
.telefon__kameramodul i::before{content:"";position:absolute;inset:34%;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,#1f3a6b 0,#0a1a33 45%,#02050a 100%);
  box-shadow:inset 0 0 0 1px rgba(120,160,220,.35)}
.telefon__kameramodul i::after{left:24%;top:16%;width:22%;height:22%;
  background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,0) 72%)}
.telefon__kameramodul .telefon__blitz{grid-column:2;grid-row:1;width:52%;
  background:radial-gradient(circle at 45% 40%,#8f929a,#4a4f59 45%,#2a2e36 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -1px 2px rgba(0,0,0,.7)}
.telefon__kameramodul::after{content:"";grid-column:2;grid-row:2;width:18%;aspect-ratio:1;border-radius:50%;
  background:#05070a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.telefon__kameramodul .telefon__blitz.an{background:#fff8d8;box-shadow:0 0 18px 6px rgba(255,246,199,.85),0 0 60px 26px rgba(255,240,170,.45)}