/* HandwerksManufaktur — Konzept „Der Aufbau" · Geist · Tinte / Papier / Bronze (Markenfarben bleiben) */
:root{
  --tinte:#16130E; --tinte-2:#3A352C; --tinte-3:#6B6355; --tinte-4:#8E8677;
  --papier:#FAF7F1; --papier-2:#F1ECE2; --papier-3:#E6DFD1; --linie:#DED7C8; --linie-dunkel:#2A251D;
  --bronze:#C8873A; --bronze-tief:#8F5B1D; --bronze-hell:#E5B36E; --bronze-hauch:#F7E9D4;
  --gruen:#2E7D4F;
  --radius:24px; --radius-klein:12px; --pille:999px;
  --schrift:'Geist',system-ui,-apple-system,sans-serif;
  --eng:960px; --normal:1240px; --weit:1440px;
  --rand:clamp(20px,4vw,48px);
  --sekt:clamp(88px,10vw,144px);
  --pad:clamp(22px,2.4vw,32px);
  --gap:clamp(14px,1.6vw,22px);
  --kopf:80px;
  --ease:cubic-bezier(.2,.7,.2,1); --schnell:.3s var(--ease);
;--signet:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2083.000%2091.000%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M0.000%2C39.667%20L22.000%2C25.000%20L22.000%2C91.000%20L0.000%2C91.000%20Z%20M34.000%2C14.667%20L56.000%2C0.000%20L56.000%2C91.000%20L34.000%2C91.000%20L34.000%2C64.670%20L27.000%2C68.000%20L27.000%2C53.667%20L34.000%2C49.000%20Z%20M61.000%2C14.667%20L83.000%2C0.000%20L83.000%2C91.000%20L61.000%2C91.000%20Z%22/%3E%3C/svg%3E");}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.kein-js .reveal{opacity:1;transform:none;clip-path:none}
body{font-family:var(--schrift);color:var(--tinte);background:var(--papier);line-height:1.55;font-size:17px;overflow-x:clip;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
strong,b{font-weight:600}
[hidden]{display:none!important}
::selection{background:var(--bronze-hell);color:var(--tinte)}
:focus-visible{outline:3px solid var(--bronze);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:12px;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:12px}

/* ---- Typo ---- */
h1,h2,h3,.display{font-weight:700;letter-spacing:-.03em;line-height:1.02;color:var(--tinte);text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
h1{font-size:clamp(42px,6.2vw,92px);font-weight:800;letter-spacing:-.045em;line-height:.96}
h2{font-size:clamp(34px,4.2vw,60px);letter-spacing:-.035em}
h3{font-size:clamp(20px,1.7vw,25px);letter-spacing:-.02em;line-height:1.18}
p{text-wrap:pretty}
.lead{font-size:clamp(18px,1.4vw,22px);color:var(--tinte-2);max-width:60ch;line-height:1.5}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-tief)}
.kicker::before{content:"";width:19px;height:21px;flex:none;background:var(--bronze);-webkit-mask:var(--signet) center/contain no-repeat;mask:var(--signet) center/contain no-repeat}
.kicker.ohne::before{display:none}
.nr{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.05em}
.markiert{color:var(--bronze-tief)}
em{font-style:normal;color:var(--bronze-tief)}
p+p{margin-top:1em}
.auf-dunkel{color:var(--papier)}
.auf-dunkel h1,.auf-dunkel h2,.auf-dunkel h3{color:var(--papier)}
.auf-dunkel .lead{color:#CFC8BB}
.auf-dunkel .kicker{color:var(--bronze-hell)}
.auf-dunkel em,.auf-dunkel .markiert{color:var(--bronze-hell)}

/* ---- Raster ---- */
.wrap{width:min(100% - 2*var(--rand),var(--normal));margin-inline:auto}
.wrap.eng{max-width:var(--eng)}
.wrap.weit{max-width:var(--weit)}
section{position:relative}
.sek{padding-block:var(--sekt)}
.sek.knapp{padding-block:clamp(56px,7vw,96px)}
.sek.pt0{padding-top:0}
.ueber.sek{padding-bottom:88px}
.grund{background:var(--papier-2)}
.band{background:var(--tinte);color:var(--papier);border-radius:var(--radius);margin-inline:var(--rand)}
.band .wrap{width:min(100% - 2*var(--pad),var(--normal))}
.kopfzeile{display:grid;gap:18px;max-width:780px;margin-bottom:clamp(36px,5vw,64px)}
.kopfzeile.mitte{margin-inline:auto;text-align:center;justify-items:center}
.kopfzeile.mitte .kicker::before{display:none}
.kopfzeile.neben{max-width:none;grid-template-columns:1fr 1fr;align-items:end;gap:40px}
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:stretch}
.duo.rechts{grid-template-columns:.9fr 1.1fr}
.duo > *{min-width:0}
.duo > .text{display:flex;flex-direction:column;justify-content:center;gap:18px}
.bild{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--papier-3);min-height:340px}
.bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bild .herkunft{position:absolute;left:14px;bottom:14px;font-size:13px;font-weight:600;letter-spacing:.02em;padding:7px 12px;border-radius:var(--pille);background:rgba(22,19,14,.72);color:var(--papier)}
/* Vier Betriebe statt eines — Noah, 23.09.2026: „es ist gut, wenn mehrere Betriebe mit drin sind" */
.betriebe-vier{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:var(--radius);overflow:hidden;min-height:340px}
.betriebe-vier img{width:100%;height:100%;object-fit:cover;display:block;min-height:167px;transition:transform .6s var(--ease)}
.betriebe-vier img:hover{transform:scale(1.04)}
.betriebe-acht{grid-template-columns:1fr 1fr;min-height:0}
.betriebe-acht img{aspect-ratio:3/2;min-height:0}
/* Historie (Über uns, 27.09.2026): fünf Stationen mit Bild, Jahr groß in Bronze */
.historie{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);list-style:none;padding:0;margin:0;counter-reset:none}
.station{display:grid;gap:10px;align-content:start;background:var(--papier);border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.06);transition:transform var(--schnell),box-shadow var(--schnell)}
.station:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.08)}
.station img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.station .jahr{font-size:clamp(28px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--bronze);line-height:1;padding:16px var(--pad) 0}
.station b{font-size:17px;padding:0 var(--pad)}
.station p{font-size:14.5px;color:var(--tinte-2);padding:0 var(--pad) var(--pad)}
.social-handy{max-width:300px;justify-self:center}
@media (max-width:1100px){.historie{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.historie{grid-template-columns:1fr}.station{grid-template-columns:120px 1fr;grid-template-rows:auto auto 1fr;column-gap:14px}.station img{grid-row:1/4;aspect-ratio:3/4;height:100%}.station .jahr{padding:14px 14px 0 0}.station b{padding:0 14px 0 0}.station p{padding:0 14px 14px 0}.betriebe-acht{grid-template-columns:1fr 1fr}}
.betriebe-vier .herkunft{position:absolute;left:14px;bottom:14px;font-size:13px;font-weight:600;letter-spacing:.02em;padding:7px 12px;border-radius:var(--pille);background:rgba(22,19,14,.72);color:var(--papier)}
.reveal{opacity:0;transform:translateY(26px)}
.reveal.dran{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.reveal.auf{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transform:none}
.reveal.auf.dran{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .4s var(--ease),opacity .4s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;clip-path:none;transition:none}}

/* ---- Knöpfe ---- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:var(--pille);font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.1;transition:transform var(--schnell),background var(--schnell),box-shadow var(--schnell),color var(--schnell);white-space:nowrap;position:relative;overflow:hidden}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--schnell);flex:none}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.97);transition-duration:.1s}
a[href]:active,button:active,summary:active,.lb-k:active,.projekt:active{transform:scale(.98);transition-duration:.1s}
.btn-bronze{background:var(--bronze);color:var(--tinte)}
.btn-bronze:hover{background:var(--bronze-hell);color:var(--tinte);box-shadow:0 12px 30px -12px rgba(200,135,58,.6)}
.btn-tinte{background:var(--tinte);color:var(--papier)}
.btn-tinte:hover{background:#2A251D;color:var(--papier)}
.btn-papier{background:var(--papier);color:var(--tinte)}
.btn-papier:hover{background:#fff;color:var(--tinte)}
.btn-umriss{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 2px var(--tinte)}
.btn-umriss:hover{background:var(--tinte);color:var(--papier)}
.auf-dunkel .btn-umriss,.hero .btn-umriss,.hero-klein .btn-umriss,.cta .btn-umriss{color:var(--papier);box-shadow:inset 0 0 0 2px var(--papier);background:rgba(250,247,241,.16)}
.auf-dunkel .btn-umriss:hover,.hero .btn-umriss:hover,.hero-klein .btn-umriss:hover,.cta .btn-umriss:hover{background:var(--papier);color:var(--tinte)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--tinte);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:5px;text-decoration-thickness:2px;transition:color var(--schnell)}
.textlink:hover{color:var(--bronze-tief)}
.textlink svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--schnell)}
.textlink:hover svg{transform:translateX(3px)}
.auf-dunkel .textlink{color:var(--papier)}
.auf-dunkel .textlink:hover{color:var(--bronze-hell)}

/* ---- Kopf ---- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--kopf);transition:background var(--schnell),box-shadow var(--schnell),backdrop-filter var(--schnell)}
.kopf > .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%;max-width:var(--weit)}
.kopf.fest,body.menu-offen .kopf{background:rgba(250,247,241,.82);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 1px 0 rgba(22,19,14,.08)}
.marke{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:6px 0}
.marke svg{width:31px;height:34px;transition:filter var(--schnell)}
.marke .wortmarke{font-weight:800;letter-spacing:-.035em;font-size:19px;line-height:.9;color:var(--tinte);transition:color var(--schnell)}
.marke .wortmarke span{display:block}
.kopf:not(.fest):not(.hell) .marke .wortmarke{color:var(--papier)}
body:not(.menu-offen) .kopf:not(.fest):not(.hell) .marke svg path{fill:var(--papier)}
.kopf.fest .marke svg path,body.menu-offen .marke svg path{fill:var(--tinte)}
body.menu-offen .kopf .marke .wortmarke,body.menu-offen .kopf:not(.fest):not(.hell) .marke .wortmarke{color:var(--tinte)}
body.menu-offen .kopf,body.menu-offen .kopf.fest{background:var(--papier);backdrop-filter:none}
body.menu-offen .kopf:not(.fest):not(.hell) .burger{color:var(--tinte)}
.nav{display:flex;align-items:center;gap:4px}
.nav > a,.nav > .hat-menu > a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 14px;border-radius:var(--pille);font-weight:600;font-size:15px;color:var(--tinte);transition:background var(--schnell),color var(--schnell)}
.kopf:not(.fest):not(.hell) .nav > a,.kopf:not(.fest):not(.hell) .nav > .hat-menu > a{color:var(--papier)}
.nav > a:hover,.nav > .hat-menu:hover > a,.nav > .hat-menu:focus-within > a{background:rgba(22,19,14,.08)}
.kopf:not(.fest):not(.hell) .nav > a:hover,.kopf:not(.fest):not(.hell) .nav > .hat-menu:hover > a{background:rgba(250,247,241,.14)}
.nav > a.aktiv,.nav > .hat-menu.aktiv > a{text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:6px;text-decoration-thickness:2px}
.nav .btn{margin-left:10px;min-height:44px;padding:11px 20px;font-size:15px;border-radius:var(--pille)}
.nav a.btn.btn-bronze,.kopf:not(.fest):not(.hell) .nav > a.btn.btn-bronze{color:var(--tinte)}
.nav a.btn.btn-bronze:hover{color:var(--tinte);background:var(--bronze-hell)}
.hat-menu{position:relative}
.hat-menu > a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;transition:transform var(--schnell)}
.hat-menu:hover > a svg,.hat-menu:focus-within > a svg{transform:rotate(180deg)}
.drop{position:absolute;left:0;top:calc(100% + 10px);width:360px;background:var(--papier);color:var(--tinte);border-radius:var(--radius-klein);box-shadow:0 30px 60px -20px rgba(22,19,14,.35),0 0 0 1px rgba(22,19,14,.06);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);transform-origin:top left;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.drop::before{content:"";position:absolute;left:28px;top:-6px;width:12px;height:12px;background:var(--papier);transform:rotate(45deg);border-radius:2px}
.hat-menu:hover .drop,.hat-menu:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;min-height:44px;transition:background var(--schnell)}
.drop a:hover{background:var(--papier-2)}
.drop a .ic{width:40px;height:40px;border-radius:10px;background:var(--bronze-hauch);display:grid;place-items:center}
.drop a .ic svg{width:20px;height:20px;stroke:var(--bronze-tief);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drop a b{display:block;font-size:15px;font-weight:600}
.drop a small{display:block;font-size:13px;color:var(--tinte-3)}
.drop .alle{grid-template-columns:1fr;border-top:1px solid var(--linie);margin-top:6px;padding-top:12px;font-weight:600;font-size:14px;color:var(--bronze-tief)}
.burger{display:none;width:48px;height:48px;border-radius:var(--pille);place-items:center;color:var(--tinte)}
.kopf:not(.fest):not(.hell) .burger{color:var(--papier)}
body.menu-offen .burger{color:var(--tinte)}
.burger svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
#mobilmenu{position:fixed;left:0;right:0;top:var(--kopf);height:calc(100svh - var(--kopf));background:var(--papier);z-index:59;overflow:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
#mobilmenu.offen{visibility:visible;opacity:1;transform:none}
#mobilmenu > .wrap{display:flex;flex-direction:column;gap:6px;padding:20px 0 40px}
#mobilmenu a{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:var(--radius-klein);font-weight:600;font-size:18px;flex:none}
#mobilmenu a:hover{background:var(--papier-2)}
#mobilmenu .gruppe{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-tief);font-weight:600;padding:18px 14px 6px}
#mobilmenu .unter a{font-size:16px;font-weight:500;padding-left:28px}
#mobilmenu .btn{justify-content:center;margin-top:14px;font-size:17px;border-radius:var(--pille)}

/* ---- Intro (Signet baut sich auf) ---- */
/* ---- Intro: das Signet wächst als Balkendiagramm (Runde 9, 27.09.2026) ----
   🔴 Noah: „Jeder einzelne Balken … als ob es so ein Balkendiagramm ist, das sich hochzieht: Zack, zack, zack.
   Dann ist Handwerksmanufaktur daneben." Grundlinie zieht sich, drei Balken schnellen nacheinander hoch
   (kleiner Überschwinger), dann wischt der Schriftzug rechts daneben auf. */
#intro{position:fixed;inset:0;z-index:90;background:var(--tinte);display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--ease),visibility .6s,transform .7s var(--ease)}
#intro.verschwindet{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-3%)}
#intro .intro-marke{position:relative;display:flex;align-items:flex-end;gap:clamp(16px,2.2vw,28px);padding-bottom:clamp(12px,1.4vw,18px)}
#intro svg{width:clamp(84px,12vw,160px);height:auto;flex:none;overflow:visible}
#intro .teil{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
#intro.los .teil{animation:balken-auf .62s cubic-bezier(.22,1.35,.42,1) .34s forwards}
#intro.los .teil:nth-child(2){animation-delay:.52s}
#intro.los .teil:nth-child(3){animation-delay:.7s}
@keyframes balken-auf{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
#intro .intro-linie{position:absolute;left:-6%;right:-4%;bottom:0;height:2px;border-radius:2px;background:rgba(250,247,241,.4);transform:scaleX(0);transform-origin:0 50%}
#intro.los .intro-linie{animation:linie-auf .5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes linie-auf{to{transform:scaleX(1)}}
#intro .wort{color:var(--papier);font-weight:800;letter-spacing:-.045em;line-height:.88;font-size:clamp(30px,5vw,64px);margin-bottom:-.06em;clip-path:inset(0 100% 0 0);transform:translateX(-10px)}
#intro.los .wort{animation:wort-auf .7s cubic-bezier(.7,0,.2,1) 1.08s forwards}
@keyframes wort-auf{to{clip-path:inset(0 0 0 0);transform:none}}
#intro .wort span{display:block}
@media (prefers-reduced-motion:reduce){#intro{display:none}}

/* ---- Hero: drei Säulen werden eine Fläche ---- */
.hero-bahn{height:190svh;position:relative;background:var(--papier)}
.hero{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--tinte);color:var(--papier);border-radius:0 0 var(--radius) var(--radius);--p:0;--fuge:clamp(10px,1.6vw,22px)}
.saeulen{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--fuge) * (1 - var(--p)));padding:0 calc(var(--rand) * (1 - var(--p)));align-items:end}
.saeule{position:relative;height:calc(var(--h0) + (100% - var(--h0)) * var(--p));overflow:hidden;border-radius:calc(var(--radius) * (1 - var(--p))) calc(var(--radius) * (1 - var(--p))) 0 0;clip-path:polygon(0 calc(var(--s) * (1 - var(--p))),100% 0,100% 100%,0 100%);transform:translateZ(0)}
.saeule:nth-child(1){--h0:66%;--s:9%}
.saeule:nth-child(2){--h0:80%;--s:9%}
.saeule:nth-child(3){--h0:94%;--s:9%}
.saeule video,.saeule img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - .06 * var(--p)))}
.saeule::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,14,.1) 0%,rgba(22,19,14,.25) 55%,rgba(22,19,14,.78) 100%)}
.saeule .etikett{position:absolute;left:clamp(14px,2vw,26px);top:calc(var(--s) * (1 - var(--p)) + 26px);z-index:2;opacity:calc(1 - var(--p) * 1.6);transform:translateY(calc(var(--p) * -18px))}
.saeule .etikett b{display:block;font-size:15px;font-weight:700;letter-spacing:.01em;line-height:1.2}
.saeule .etikett small{display:block;font-size:13px;color:#D9D2C4;margin-top:3px;font-weight:500}
.hero-text{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 0 clamp(28px,5vh,56px);background:linear-gradient(180deg,transparent,rgba(22,19,14,.55) 45%,rgba(22,19,14,.9))}
.hero-text .wrap{display:grid;gap:18px;max-width:var(--weit)}
.hero-text .kicker{color:var(--bronze-hell)}
.hero-text h1{color:var(--papier);max-width:15ch}
.hero .kicker{color:var(--bronze-hell)}
.hero-text h1 .w{display:inline-block;opacity:0;transform:translateY(.4em);animation:wortauf .8s var(--ease) forwards}
.hero-text h1 .w:nth-child(2){animation-delay:.12s}
.hero-text h1 .w:nth-child(3){animation-delay:.24s}
@keyframes wortauf{to{opacity:1;transform:none}}
.hero-text .lead{color:#E2DBCD;max-width:56ch}
.hero-text .eine-hand{position:absolute;right:var(--rand);bottom:clamp(28px,5vh,56px);opacity:calc((var(--p) - .55) * 3);transform:translateY(calc((1 - var(--p)) * 14px));text-align:right}
.hero-text .eine-hand b{display:block;font-size:clamp(22px,2.6vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1}
.hero-text .eine-hand small{display:block;font-size:14px;color:#D9D2C4;margin-top:6px}
.hero-fakten{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:15px;color:#D9D2C4;font-weight:500}
.hero-fakten b{color:var(--papier);font-weight:700}
.hero-fakten .stern{color:var(--bronze-hell);letter-spacing:.06em}
.scroll-hinweis{position:absolute;right:var(--rand);bottom:clamp(28px,5vh,56px);width:26px;height:40px;border:2px solid rgba(250,247,241,.45);border-radius:14px;opacity:calc(1 - var(--p) * 2)}
.scroll-hinweis::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:var(--bronze);border-radius:2px;animation:rad 1.6s var(--ease) infinite}
@keyframes rad{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}
.pause{position:absolute;right:var(--rand);top:calc(var(--kopf) + 12px);z-index:4;width:44px;height:44px;border-radius:var(--pille);background:rgba(22,19,14,.55);color:var(--papier);display:grid;place-items:center}
.pause svg{width:18px;height:18px;fill:currentColor}
.pause .an{display:none}.pause.aus .an{display:block}.pause.aus .zu{display:none}
@media (prefers-reduced-motion:reduce){.hero-bahn{height:100svh}.hero{--p:1}.hero-text h1 .w{opacity:1;transform:none;animation:none}}

/* ---- Kachel-Leiste (Leistungen) ragt in den Hero ---- */
.leiste{position:relative;z-index:5;margin-top:clamp(40px,5vw,72px);padding-bottom:0}
.leiste .wrap{max-width:var(--weit)}
.kacheln{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.kachel{display:grid;grid-template-rows:auto 1fr;gap:14px;padding:var(--pad);min-height:190px;background:var(--papier);border-radius:var(--radius);box-shadow:0 30px 60px -30px rgba(22,19,14,.45),0 0 0 1px rgba(22,19,14,.05);transition:transform var(--schnell),box-shadow var(--schnell);position:relative;overflow:hidden}
.kachel::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.kachel:hover{transform:translateY(-4px);box-shadow:0 36px 70px -30px rgba(22,19,14,.55),0 0 0 1px rgba(22,19,14,.08)}
.kachel:hover::before{transform:none}
.kachel .ic{width:44px;height:44px;border-radius:12px;background:var(--bronze-hauch);display:grid;place-items:center}
.kachel .ic svg{width:22px;height:22px;stroke:var(--bronze-tief);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kachel b{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.kachel small{display:block;font-size:13.5px;color:var(--tinte-3);margin-top:6px;line-height:1.35;min-height:2.7em}
.kachel .pfeil{position:absolute;right:16px;bottom:16px;width:32px;height:32px;border-radius:var(--pille);background:var(--tinte);color:var(--papier);display:grid;place-items:center;opacity:0;transform:translate(-6px,6px);transition:opacity var(--schnell),transform var(--schnell)}
.kachel .pfeil svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.kachel:hover .pfeil{opacity:1;transform:none}

/* ---- Logo-Band (eine Zeile, dunkel, Farbe) ---- */
.logoband{background:var(--tinte);color:var(--papier);padding:clamp(40px,5vw,64px) 0;overflow:hidden;margin:clamp(56px,7vw,96px) var(--rand) 0;border-radius:var(--radius)}
.logoband .zeile{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.logoband .zeile p{font-size:15px;color:#CFC8BB;max-width:60ch}
.logoband .zeile b{color:var(--papier)}
.logoband .textlink{color:var(--papier)}
.logoband .textlink:hover{color:var(--bronze-hell)}
/* ---- Fotowand: alle Betriebe, drei laufende Reihen (Noah, 23.09.2026) ---- */
.fotowand-sek{padding-bottom:clamp(44px,5vw,72px)}
.wand-reihen{display:grid;gap:clamp(8px,1vw,14px);margin-top:clamp(28px,3vw,42px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.wand-spur{display:flex;gap:clamp(8px,1vw,14px);width:max-content;animation:lauf 150s linear infinite;will-change:transform}
.wand-spur.zurueck{animation-direction:reverse;animation-duration:170s}
.wand-spur:nth-child(3){animation-duration:190s}
.wand-spur img{flex:none;height:clamp(126px,13vw,188px);width:auto;object-fit:cover;border-radius:var(--radius);display:block;
  box-shadow:0 0 0 1px rgba(22,19,14,.05);transition:transform var(--schnell),box-shadow var(--schnell)}
.wand-spur img:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 22px 44px -24px rgba(22,19,14,.5),0 0 0 1px rgba(22,19,14,.09)}
@media (prefers-reduced-motion:reduce){.wand-spur{animation:none;overflow-x:auto}}

.band-reihen{display:grid;gap:26px}
.band-spur{display:flex;gap:56px;width:max-content;animation:lauf 110s linear infinite;align-items:center;will-change:transform}
.band-spur.zurueck{animation-direction:reverse;animation-duration:130s}
.band-spur:nth-child(3){animation-duration:150s}

.band-spur img{width:auto;max-width:132px;object-fit:contain;flex:none;opacity:.6}

@keyframes lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band-spur{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ---- Der Aufbau: sechs Säulen wachsen (Signatur) ---- */
.aufbau{--p:0}
.aufbau .kopfzeile{max-width:820px}
.skyline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);align-items:end;height:clamp(420px,52vw,620px);position:relative}
.skyline::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--linie-dunkel);opacity:.25}
.pfeiler{position:relative;height:calc(var(--zh) * (.26 + .74 * clamp(0,(var(--p) - var(--ab)) / .45,1)));min-height:0;background:var(--tinte);color:var(--papier);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);transition:filter var(--schnell)}
.pfeiler:nth-child(1){--zh:46%;--ab:0}
.pfeiler:nth-child(2){--zh:56%;--ab:.08}
.pfeiler:nth-child(3){--zh:66%;--ab:.16}
.pfeiler:nth-child(4){--zh:76%;--ab:.24}
.pfeiler:nth-child(5){--zh:88%;--ab:.32}
.pfeiler:nth-child(6){--zh:100%;--ab:.40}
.pfeiler img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.7);transition:opacity var(--schnell),transform .8s var(--ease)}
.pfeiler:hover img{opacity:.8;transform:scale(1.04)}
.pfeiler::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,14,.15),rgba(22,19,14,.85) 75%)}
.pfeiler .inhalt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.6vw,22px)}
.pfeiler .nummer{font-size:13px;letter-spacing:.14em;color:var(--bronze-hell);font-weight:700}
.pfeiler b{display:block;font-size:clamp(15px,1.25vw,19px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:6px;hyphens:manual;overflow-wrap:anywhere}
.pfeiler small{display:block;font-size:13.5px;color:#CFC8BB;margin-top:6px;line-height:1.35;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease)}
.pfeiler:hover small,.pfeiler:focus-within small{max-height:6em;opacity:1}
.pfeiler > a{position:absolute;inset:0;z-index:3}
.aufbau .satz{margin-top:28px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.aufbau .satz p{color:var(--tinte-3);font-size:15px}
@media (prefers-reduced-motion:reduce){.pfeiler{height:var(--zh)}}

/* ---- Arbeiten: Vorher/Nachher-Wischer + Projektwahl ---- */
.wischer{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;background:var(--papier-3);cursor:col-resize;user-select:none;touch-action:none;box-shadow:0 40px 80px -40px rgba(22,19,14,.5)}
.wischer .seite{position:absolute;inset:0;overflow:hidden}
.wischer .seite img{position:absolute;left:0;top:0;width:100%;height:auto;transform:translateY(calc(var(--sy,0) * -1px));transition:transform .4s var(--ease)}
.wischer .nachher{width:100%}
.wischer .vorher{width:calc(var(--x,50) * 1%);border-right:3px solid var(--papier);filter:grayscale(.35) contrast(.92)}
.wischer .vorher img{width:calc(100% / (var(--x,50) / 100))}
.wischer .griff{position:absolute;top:50%;left:calc(var(--x,50) * 1%);transform:translate(-50%,-50%);width:52px;height:52px;border-radius:var(--pille);background:var(--papier);color:var(--tinte);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(22,19,14,.6);z-index:3;transition:transform .15s var(--ease)}
.wischer.greift .griff{transform:translate(-50%,-50%) scale(1.12)}
.wischer .griff svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.wischer .marke{position:absolute;top:16px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:var(--pille);background:rgba(22,19,14,.7);color:var(--papier);z-index:2}
.wischer .marke.v{left:16px}.wischer .marke.n{right:16px;background:var(--bronze);color:var(--tinte)}
.wischer .titel{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(250,247,241,.92);color:var(--tinte);padding:14px 20px;border-radius:var(--radius);display:grid;gap:2px}
.wischer .titel b{font-size:16px}
.wischer .titel small{font-size:13px;color:var(--tinte-3)}
.wischer .titel a{font-size:13.5px;font-weight:600;color:var(--tinte);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;letter-spacing:.01em}
.projektwahl{display:flex;gap:10px;overflow-x:auto;padding:22px 0 8px;scrollbar-width:none;scroll-snap-type:x proximity}
.projektwahl::-webkit-scrollbar{display:none}
.projektwahl button{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 8px;border-radius:var(--pille);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.1);font-weight:600;font-size:14px;transition:background var(--schnell),box-shadow var(--schnell),transform var(--schnell);scroll-snap-align:start}
.projektwahl button img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--tinte)}
.projektwahl button:hover{transform:translateY(-2px)}
.projektwahl button.aktiv{background:var(--tinte);color:var(--papier);box-shadow:none}
.arbeiten .duo{grid-template-columns:.85fr 1.15fr;align-items:start}
.arbeiten .duo .text{position:sticky;top:calc(var(--kopf) + 24px)}

/* ---- Frag Google selbst ---- */
.google .buehne{max-width:1040px;margin-inline:auto;display:grid;gap:26px}
.google .buehne .begriffe{justify-content:center}
.google .fussnote{text-align:center}
.suche{background:var(--papier);border-radius:var(--radius);padding:var(--pad);box-shadow:0 40px 80px -40px rgba(22,19,14,.5),0 0 0 1px rgba(22,19,14,.06);display:grid;gap:18px;align-content:start}
.suchfeld{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 22px;border-radius:var(--radius);background:#fff;box-shadow:0 0 0 1px var(--linie),0 8px 24px -14px rgba(22,19,14,.4);font-size:19px}
.suchfeld svg{width:22px;height:22px;stroke:var(--tinte-3);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.suchfeld .tipp{flex:1;white-space:nowrap;overflow:hidden;min-height:1.4em}
.suchfeld .tipp::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--tinte);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.treffer{display:grid;gap:10px;min-height:96px;align-content:start}
.treffer .t{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 18px;border-radius:var(--radius);background:var(--papier-2);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.treffer .t.da{opacity:1;transform:none}
.treffer .t.top{background:var(--bronze-hauch);box-shadow:inset 0 0 0 1.5px var(--bronze)}
.treffer .platz{display:grid;place-items:center;min-width:64px;height:40px;padding:0 10px;border-radius:var(--pille);background:var(--tinte);color:var(--papier);font-weight:800;font-size:14px;letter-spacing:-.01em;white-space:nowrap}
.treffer .t.top .platz{background:var(--bronze);color:var(--tinte)}
.treffer b{display:block;font-size:17px;line-height:1.25}
.treffer small{display:block;font-size:13px;color:#2E6B3A;font-weight:600;margin-top:2px}
.begriffe{display:flex;flex-wrap:wrap;gap:8px}
.begriffe button{display:inline-flex;align-items:center;min-height:46px;padding:8px 18px;border-radius:var(--pille);background:#fff;box-shadow:0 0 0 1.5px rgba(22,19,14,.28);font-weight:600;font-size:15px;transition:background var(--schnell),color var(--schnell)}
.begriffe button:hover{background:var(--papier-2)}
.begriffe button.aktiv{background:var(--tinte);color:var(--papier);box-shadow:none}
.google .fussnote{font-size:13.5px;color:var(--tinte-3);margin-top:14px}

/* ---- Zahlen: drei Fälle, Balken steigen ---- */
#zahlen{position:relative;overflow:hidden}
#zahlen .wrap{position:relative;z-index:1}
#zahlen::before{content:"";position:absolute;right:-4%;top:8%;width:min(46vw,620px);aspect-ratio:380/264;z-index:0;opacity:.05;pointer-events:none;
  background:var(--tinte);-webkit-mask:var(--signet) center/contain no-repeat;mask:var(--signet) center/contain no-repeat}
@media (max-width:900px){#zahlen::before{display:none}}
.faelle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);grid-template-rows:auto auto auto auto 1fr auto}
.fall{background:var(--papier);border-radius:var(--radius);overflow:hidden;display:grid;grid-row:span 6;grid-template-rows:subgrid;box-shadow:0 0 0 1px rgba(22,19,14,.06);transition:transform var(--schnell),box-shadow var(--schnell)}
.fall:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.08)}
.fall .fallbild{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--papier-3)}
.fall .fallbild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.fall:hover .fallbild img{transform:scale(1.04)}
.fall .fallbild .herkunft{position:absolute;left:14px;bottom:14px;font-size:13px;font-weight:600;padding:6px 10px;border-radius:var(--pille);background:rgba(22,19,14,.72);color:var(--papier)}
.fall .fall-in{padding:0 var(--pad) var(--pad);display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:16px}
.fall .kopf-f{padding-top:var(--pad)}
.fall .fall-in > b{font-size:17px;letter-spacing:-.015em;line-height:1.3;align-self:start}
.fall .kopf-f{display:flex;align-items:center;gap:12px}
.fall .marke-f{display:grid;place-items:center;width:112px;height:48px;flex:none;border-radius:var(--radius-klein);background:var(--tinte);padding:7px 10px}

.fall .marke-f img{max-width:92px;max-height:34px;width:auto;height:auto;object-fit:contain;display:block}
.fall .kopf-f small{font-size:13.5px;color:var(--tinte-3);font-weight:500;line-height:1.35;min-width:0}
.balken{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;height:212px;margin-top:2px}
.balken .b{display:grid;grid-template-rows:1fr auto auto auto;gap:6px;height:100%;row-gap:12px}
.balken .b .ic{width:30px;height:30px;border-radius:8px;background:var(--bronze-hauch);display:grid;place-items:center}
.balken .b .ic svg{width:16px;height:16px;stroke:var(--bronze-tief);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* 🔴 23.09.2026 (Noah: „da haben wir die drei Säulen … ich hab ja dieses Aufsteigende als Logo,
   dass man das da irgendwie mit einbaut"): die drei Balken tragen die Dachschräge des Signets,
   jeder um eine Stufe steiler — dieselbe Form wie die Säulen im Hero. */
.balken .b i{display:block;align-self:end;justify-self:start;width:54px;height:calc(var(--v) * 1%);min-height:14px;background:var(--bronze);border-radius:5px 5px 2px 2px;transform:scaleY(0);transform-origin:bottom;transition:transform 1.1s var(--ease);clip-path:polygon(0 9%,100% 0,100% 100%,0 100%)}
.balken .b:nth-child(2) i{clip-path:polygon(0 7%,100% 0,100% 100%,0 100%)}
.balken .b:nth-child(3) i{clip-path:polygon(0 5%,100% 0,100% 100%,0 100%)}
.balken .b:nth-child(2) i{transition-delay:.12s;background:var(--tinte)}
.balken .b:nth-child(3) i{transition-delay:.24s;background:var(--bronze-tief)}
.dran .balken .b i{transform:none}
.balken .b b{font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.balken .b small{font-size:13px;color:var(--tinte-3);line-height:1.3;min-height:2.6em}
.fall blockquote{font-size:15.5px;line-height:1.45;color:var(--tinte-2);border-left:3px solid var(--bronze);padding-left:14px}
.fall blockquote cite{display:block;font-style:normal;font-size:13px;color:var(--tinte-3);margin-top:6px}
.fall .textlink{align-self:end}

/* ---- Videos aus dem Betrieb ---- */
.kino{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.clip{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:#000}
.clip video{width:100%;height:100%;object-fit:cover}
.clip .etikett{position:absolute;left:14px;bottom:14px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:var(--pille);background:rgba(22,19,14,.72);color:var(--papier)}
.handys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap)}
.handy{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:9/16;background:#000;box-shadow:0 0 0 1px rgba(250,247,241,.1)}
.handy video{width:100%;height:100%;object-fit:cover}
.handy .name{position:absolute;left:12px;bottom:12px;font-size:13px;font-weight:600;padding:6px 10px;border-radius:var(--pille);background:rgba(22,19,14,.72);color:var(--papier)}
.ton{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:var(--pille);background:rgba(22,19,14,.6);color:var(--papier);display:grid;place-items:center}
.ton svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- Über uns / Statement ---- */
.ueber .duo{align-items:stretch}
.statement{padding:var(--sekt) 0 0}
.statement h2{font-size:clamp(30px,4.6vw,66px);max-width:22ch;letter-spacing:-.035em;line-height:1.06}
.statement h2 i{font-style:normal;opacity:.16;transition:opacity .4s var(--ease)}  /* 23.09.2026, Noah: „die Schreibanimation könnte ein bisschen langsamer sein" — das Scroll-Fenster bleibt (Prüfer scroll_text), jedes Wort blendet weicher auf */
.statement h2 i.an{opacity:1}
.statement .quelle{margin-top:24px;display:flex;align-items:center;gap:14px;font-size:15px;color:var(--tinte-3)}
.statement .quelle img{width:52px;height:52px;border-radius:50%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.statement h2 i{opacity:1}}
.werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.wert{padding:var(--pad);border-radius:var(--radius);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);display:grid;gap:12px;align-content:start;transition:transform var(--schnell)}
.wert:hover{transform:translateY(-3px)}
.wert .nr{font-size:clamp(34px,3.4vw,52px);color:var(--bronze);line-height:1}
.wert b{font-size:17px}
.wert p{font-size:15px;color:var(--tinte-2)}

/* ---- Ablauf: Treppe ---- */
.treppe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:end}
.stufe{position:relative;background:var(--papier);border-radius:var(--radius);padding:var(--pad);display:grid;gap:12px;box-shadow:0 0 0 1px rgba(22,19,14,.06);min-height:calc(230px + var(--i) * 34px);align-content:start;transition:transform var(--schnell),box-shadow var(--schnell)}
.stufe:nth-child(1){--i:0}.stufe:nth-child(2){--i:1}.stufe:nth-child(3){--i:2}.stufe:nth-child(4){--i:3}
.stufe:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.08)}
.stufe .ic{width:44px;height:44px;border-radius:12px;background:var(--tinte);color:var(--papier);display:grid;place-items:center}
.stufe .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stufe .schritt-nr{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-tief);font-weight:700}
.stufe p{font-size:15px;color:var(--tinte-2)}
.auf-dunkel .stufe{background:#1F1B14;box-shadow:0 0 0 1px rgba(250,247,241,.08)}
.auf-dunkel .stufe .ic{background:var(--bronze);color:var(--tinte)}
.auf-dunkel .stufe p{color:#CFC8BB}
.auf-dunkel .stufe b{color:var(--papier)}

/* ---- Stimmen: zwei Bahnen ---- */
.stimmen{overflow:hidden}
.stimmen .zusammen{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--tinte-2);margin-bottom:26px;flex-wrap:wrap}
.stimmen .zusammen .stern{color:var(--bronze);letter-spacing:.06em;font-size:18px}
.bahn{display:flex;gap:var(--gap);width:max-content;animation:lauf 90s linear infinite;padding:4px 0;will-change:transform}
.bahn.zurueck{animation-direction:reverse;animation-duration:100s;margin-top:var(--gap)}

.stimme{flex:none;width:min(380px,84vw);background:var(--papier);border-radius:var(--radius);padding:var(--pad);display:grid;gap:12px;box-shadow:0 0 0 1px rgba(22,19,14,.06);align-content:start}
.stimme .wer{display:flex;align-items:center;gap:12px}
.stimme .kreis{width:46px;height:46px;border-radius:50%;background:var(--tinte);color:var(--papier);display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:-.02em;flex:none;overflow:hidden}
.stimme .kreis.logo{width:118px;height:52px;border-radius:var(--radius-klein);padding:8px 11px;background:var(--tinte);display:grid;place-items:center}
.stimme .kreis.logo img{max-width:96px;max-height:36px;width:auto;height:auto;object-fit:contain;display:block}
.stimme .wer b{display:block;font-size:15px}
.stimme .wer small{display:block;font-size:13px;color:var(--tinte-3)}
.stimme .stern{color:var(--bronze);font-size:14px;letter-spacing:.08em}
.stimme p{font-size:15px;color:var(--tinte-2);line-height:1.5}
@media (prefers-reduced-motion:reduce){.bahn{animation:none;flex-wrap:wrap;width:auto}}

small,.fussnote,.klein,.brot,.etikett,.name,.herkunft,.marke-s,.lb-fuss small,.drop a small,.drop a.alle,.ss-was,.hero-fakten,.kontakt-zeile,.form-kopf small,.treffer small,.k-zeit,.fuss .unten,.pf-liste small,.chips span,.erg-wer small,.projekt .unten small,.zusammen,.stimme small,.station p,.erg p,.pf-kopf small,.zb small,.rl-zahl small,.textlink,.ss-links a,.einsatz-marke,.zeile a,.projekt .unten a,.stufe .schritt-nr,.pf-zaehler,.k-zahl+span small{letter-spacing:.01em}
.treffer .platz,.platz,figcaption,cite,.ticket b,.ticket small,.ok,.av,.pf-liste b,.pf-liste li small,.chips span{letter-spacing:.02em}
.cta .kicker,.band .kicker{color:var(--bronze-hell)}
.auf-dunkel .schritt-nr,.band .schritt-nr{color:var(--bronze-hell)}
.bauplan .st-aufwand small{color:var(--tinte-2)}
/* ---- FAQ: zwei Spalten, erste offen ---- */
.faq .zwei{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.faq .links{position:sticky;top:calc(var(--kopf) + 24px);display:grid;gap:18px}
.faq .links .anker{border-top:1px solid var(--linie);padding-top:18px;display:grid;gap:12px}
.faq .links .anker p{font-size:15px;color:var(--tinte-2)}
.faq details{border-radius:var(--radius-klein);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);margin-bottom:10px;overflow:hidden;transition:box-shadow var(--schnell)}
.faq details[open]{box-shadow:0 0 0 1.5px var(--bronze)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;font-size:17px;cursor:pointer;list-style:none;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:30px;height:30px;border-radius:var(--pille);background:var(--papier-2);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background var(--schnell)}
.faq summary .plus svg{width:14px;height:14px;stroke:var(--tinte);fill:none;stroke-width:2.5;stroke-linecap:round}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--bronze-hauch)}
.faq details p{padding:0 22px 20px;color:var(--tinte-2);font-size:15.5px}

/* ---- CTA / Kontakt ---- */
.cta{background:var(--tinte);color:var(--papier);border-radius:var(--radius);margin-inline:var(--rand);padding:var(--sekt) 0;position:relative;overflow:hidden}
.cta .wrap{position:relative;z-index:2}
.cta .signet-wasser{position:absolute;right:-4%;bottom:-8%;width:min(37vw,446px);opacity:.06;pointer-events:none}
.cta .signet-wasser path{fill:var(--papier)}
.cta .duo{grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.cta h2{color:var(--papier)}
.cta .lead{color:#CFC8BB}
.termin-karte{background:var(--tinte);color:var(--papier);border-radius:var(--radius);padding:var(--pad);display:grid;gap:12px;margin-top:8px;position:relative;overflow:hidden;transition:transform var(--schnell),box-shadow var(--schnell)}
.termin-karte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bronze)}
.termin-karte:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(22,19,14,.55)}
.termin-karte .kicker{color:var(--bronze-hell)}
.termin-karte b{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.025em;line-height:1.15}
.termin-karte p{font-size:15.5px;color:#CFC7B8}
.termin-karte .btn{justify-self:start;background:var(--bronze);color:var(--tinte);margin-top:4px}
.termin-karte .btn:hover{background:var(--bronze-hell);color:var(--tinte)}
.termin-karte small{font-size:13.5px;color:#B8B0A2}
.form-kopf{display:grid;gap:2px;padding-bottom:6px;border-bottom:1px solid var(--linie);margin-bottom:4px}
.form-kopf b{font-size:18px}
.form-kopf small{font-size:13.5px;color:var(--tinte-3)}
.wege{display:grid;gap:10px;margin-top:8px}
.wege a,.wege div{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:10px 18px 10px 10px;border-radius:var(--pille);background:rgba(250,247,241,.06);min-height:64px;transition:background var(--schnell),transform var(--schnell)}
.wege a:hover{background:rgba(250,247,241,.12);transform:translateX(4px)}
.wege .ic{width:44px;height:44px;border-radius:var(--pille);background:var(--bronze);color:var(--tinte);display:grid;place-items:center;font-size:20px}
.wege b{display:block;font-size:16px}
.wege small{display:block;font-size:13.5px;color:#CFC8BB}
.formular{background:var(--papier);color:var(--tinte);border-radius:var(--radius);padding:var(--pad);display:grid;gap:12px}
.formular .reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formular label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--tinte-2)}
.formular input,.formular select,.formular textarea{font:inherit;font-size:16px;padding:13px 14px;border-radius:var(--radius-klein);border:1.5px solid var(--linie);background:#fff;color:var(--tinte);min-height:50px;transition:border-color var(--schnell),box-shadow var(--schnell)}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 4px rgba(200,135,58,.18)}
.formular textarea{min-height:110px;resize:vertical}
.formular .chips{display:flex;flex-wrap:wrap;gap:8px}
.formular .chips label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--pille);background:var(--papier-2);font-weight:600;cursor:pointer;font-size:14px;color:var(--tinte)}
.formular .chips input{display:none}
.formular .chips label:has(input:checked){background:var(--tinte);color:var(--papier)}
.formular .btn{justify-content:center;margin-top:6px}
.formular .klein{font-size:13px;color:var(--tinte-3)}

/* ---- Fuß ---- */
.fuss{background:var(--tinte);color:var(--papier);margin-top:var(--sekt);padding:clamp(56px,7vw,88px) 0 32px;position:relative}
.fuss::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--bronze) 0 33.3%,var(--bronze-hell) 33.3% 66.6%,var(--bronze-tief) 66.6%)}
.fuss .oben{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,56px)}
.fuss .marke-f{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.fuss .marke-f svg{width:64px;height:44px}
.fuss .marke-f svg path{fill:var(--papier)}
.fuss .marke-f b{font-weight:800;font-size:22px;letter-spacing:-.035em;line-height:.9}
.fuss .marke-f b span{display:block}
.fuss p{font-size:15px;color:#CFC8BB;max-width:36ch}
.fuss h4,.fuss .fuss-titel{font-size:13px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-hell);margin-bottom:14px;font-weight:700}
.fuss ul{display:grid;gap:4px}
.fuss ul a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:#E2DBCD;transition:color var(--schnell)}
.fuss ul a:hover{color:var(--bronze-hell)}
.fuss .kontakt-f li{display:flex;align-items:center;gap:10px;min-height:40px;font-size:15px;color:#E2DBCD}
.fuss .unten{margin-top:48px;padding-top:22px;border-top:1px solid rgba(250,247,241,.12);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:nowrap;font-size:13.5px;color:#A9A193;white-space:nowrap}
.fuss .unten > span{display:inline-flex;align-items:center}
.fuss .unten a{min-height:44px;display:inline-flex;align-items:center;color:#E2DBCD;margin-left:16px}
.fuss .unten a:hover{color:var(--bronze-hell)}

/* ---- Unterseiten ---- */
.hero-klein{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--tinte);color:var(--papier);overflow:hidden;border-radius:0 0 var(--radius) var(--radius)}
.hero-klein > video,.hero-klein > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
/* Drei Säulen wie im Signet: die Dächer steigen nach rechts an, jede Säule ein anderer Betrieb */
.hero-klein .saeulen-k{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.06fr 1.14fr;gap:5px;z-index:0}
.hero-klein .saeulen-k > div{position:relative;overflow:hidden;background:#221d17}
/* Hintergrundmedien der Säulen: absolut, wie jedes andere Hero-Bild — sie sind die Bühne
   der Sektion, keine Kachel im Inhalt. */
.hero-klein .saeulen-k video,.hero-klein .saeulen-k img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}
.hero-klein .saeulen-k .s1{clip-path:polygon(0 32%,100% 26%,100% 100%,0 100%)}
.hero-klein .saeulen-k .s2{clip-path:polygon(0 19%,100% 11%,100% 100%,0 100%)}
.hero-klein .saeulen-k .s3{clip-path:polygon(0 7%,100% 0,100% 100%,0 100%)}
/* Handy: der waagerechte Verlauf deckt bei 390 px die ganze Breite — von den drei Betrieben
   bliebe eine schwarze Fläche. Deshalb dort von oben nach unten aufhellen. */
@media (max-width:760px){
  .hero-klein::before{background:linear-gradient(180deg,rgba(22,19,14,.93) 0%,rgba(22,19,14,.88) 46%,rgba(22,19,14,.52) 100%)}
  .hero-klein .marke-s{display:none}
  .hero-klein .saeulen-k{gap:3px}
}
.hero-klein .wechsel{isolation:isolate}
.hero-klein .wechsel img{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-klein .wechsel img.an{opacity:.52}
@media (prefers-reduced-motion:reduce){.hero-klein .wechsel img{transition:none}}
.hero-klein .marke-s{position:absolute;left:12px;bottom:12px;z-index:3;font-size:13px;font-weight:600;letter-spacing:.01em;color:#EFE9DD;padding:6px 11px;border-radius:999px;background:rgba(22,19,14,.62)}
/* 🔴 Mit drei Fotosäulen statt einem Video muss die rechte Seite mittragen: ein heller
   Bildausschnitt rechts zog sonst mehr Blick als die Überschrift. */
.hero-klein::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(22,19,14,.93) 0%,rgba(22,19,14,.8) 38%,rgba(22,19,14,.56) 70%,rgba(22,19,14,.48) 100%);z-index:1}
.hero-klein .wrap{position:relative;z-index:2;padding:calc(var(--kopf) + 96px) 0 96px;display:grid;gap:20px;max-width:var(--weit)}
.hero-klein h1{color:var(--papier);font-size:clamp(38px,5.4vw,78px);max-width:16ch}
.hero-klein .lead{color:#E2DBCD;max-width:58ch}
.hero-klein .kicker{color:var(--bronze-hell)}
.brot{display:flex;gap:6px;align-items:center;font-size:13.5px;color:#CFC8BB;flex-wrap:wrap}
.brot a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;color:#E2DBCD;padding:0 4px}
.brot a:hover{color:var(--bronze-hell)}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.karte{padding:var(--pad);border-radius:var(--radius);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);display:grid;gap:12px;align-content:start;transition:transform var(--schnell),box-shadow var(--schnell)}
.karte:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.08)}
.karte .ic{width:44px;height:44px;border-radius:12px;background:var(--bronze-hauch);display:grid;place-items:center}
.karte .ic svg{width:22px;height:22px;stroke:var(--bronze-tief);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.karte b{font-size:17px;line-height:1.25}
.karte p{font-size:15px;color:var(--tinte-2)}
.auf-dunkel .karte{background:#1F1B14;box-shadow:0 0 0 1px rgba(250,247,241,.08)}
.auf-dunkel .karte .ic{background:var(--bronze);}
.auf-dunkel .karte .ic svg{stroke:var(--tinte)}
.auf-dunkel .karte p{color:#CFC8BB}
.auf-dunkel .karte b{color:var(--papier)}
.liste-icons{display:grid;gap:12px}
.liste-icons li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;font-size:16px}
.liste-icons li .ic{width:36px;height:36px;border-radius:10px;background:var(--bronze-hauch);display:grid;place-items:center}
.liste-icons li .ic svg{width:18px;height:18px;stroke:var(--bronze-tief);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.liste-icons li b{display:block}
.liste-icons li span{color:var(--tinte-2);font-size:15px}
.auf-dunkel .liste-icons li span{color:#CFC8BB}
.fallstudie{background:var(--papier);border-radius:var(--radius);padding:var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);box-shadow:0 0 0 1px rgba(22,19,14,.06)}
.fallstudie .video{border-radius:var(--radius-klein);overflow:hidden;background:#000;aspect-ratio:16/9;position:relative}
.fallstudie .video video{width:100%;height:100%;object-fit:cover}
.fallstudie .text{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.fallstudie blockquote{font-size:17px;color:var(--tinte-2);border-left:3px solid var(--bronze);padding-left:16px;line-height:1.5}
.fallstudie cite{display:block;font-style:normal;font-size:14px;color:var(--tinte-3);margin-top:8px}
.zahlenreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap)}
.zahl{padding:var(--pad);border-radius:var(--radius);background:var(--tinte);color:var(--papier);display:grid;gap:8px;position:relative;overflow:hidden;transition:transform var(--schnell)}
.zahl:hover{transform:translateY(-4px)}
.zahl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.dran .zahl::after,.zahl:hover::after{transform:none}
.zahl .ic{width:40px;height:40px;border-radius:10px;background:var(--bronze);display:grid;place-items:center;margin-bottom:6px}
.zahl .ic svg{width:20px;height:20px;stroke:var(--tinte);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zahl .nr{font-size:clamp(38px,4vw,60px);color:var(--bronze-hell);line-height:1}
.zahl small{font-size:14.5px;color:#CFC8BB}
.galerie{display:flex;flex-direction:column;gap:var(--gap)}
.galerie .reihe{display:flex;gap:var(--gap)}
.galerie figure{position:relative;flex:var(--verh) 1 0;min-width:0;border-radius:var(--radius);overflow:hidden;background:var(--papier-3)}
.galerie .reihe.kurz figure{flex:0 1 calc(var(--verh) * 240px)}
.galerie img{width:100%;height:auto;aspect-ratio:var(--verh);object-fit:cover;transition:transform .6s var(--ease)}
.galerie figure:hover img{transform:scale(1.04)}
.galerie figcaption{position:absolute;left:12px;bottom:12px;font-size:13px;font-weight:600;padding:6px 10px;border-radius:var(--pille);background:rgba(22,19,14,.72);color:var(--papier)}
.projekte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.projekt{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);display:grid;grid-template-rows:auto 1fr;transition:transform var(--schnell),box-shadow var(--schnell)}
.projekt:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.08)}
.projekt .schirm{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--papier-3)}
.projekt .schirm img{position:absolute;left:0;top:0;width:100%;height:auto}
.schirm video{position:absolute;left:0;top:0;width:100%;height:auto}
@keyframes durchscroll{to{transform:translateY(calc(-100% + 100% * 11 / 16 * 1.05))}}
.projekt:hover .schirm img{animation:durchscroll 6s linear forwards}
.projekt .schirm .vor{position:absolute;inset:0;width:100%;height:auto;opacity:0;transition:opacity .4s var(--ease);filter:grayscale(.4)}
.projekt .unten{padding:18px var(--pad) var(--pad);display:grid;gap:6px}
.projekt .unten small{font-size:13px;color:var(--tinte-3);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.projekt .unten b{font-size:17px}
.projekt .unten .zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.projekt .unten .zeile img{height:26px;width:auto;max-width:110px;object-fit:contain;background:var(--tinte);padding:4px 7px;border-radius:6px}
.projekt .unten .textlink{font-size:14px}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.wochenplan{display:grid;gap:8px}
.wochenplan li{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:14px 20px;border-radius:var(--radius);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);font-size:15px}
.wochenplan li b{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-tief)}
.wochenplan li.dreh{background:var(--tinte);color:var(--papier);box-shadow:none}
.wochenplan li.dreh b{color:var(--bronze-hell)}
.seo-liste{display:grid;gap:var(--gap)}
.seo-liste li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px;border-radius:var(--radius-klein);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06)}
.seo-liste .platz{display:grid;place-items:center;min-width:72px;height:44px;padding:0 12px;border-radius:var(--pille);background:var(--papier-2);color:var(--tinte-2);font-weight:700;font-size:14px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--linie)}
/* Ein erster Platz wiegt schwerer als „Seite 1" — die Staffelung macht das sichtbar, statt alles gleich zu färben. */
.seo-liste li.eins .platz{background:var(--bronze);color:var(--tinte);font-weight:800;box-shadow:none}
.seo-liste li.eins{box-shadow:0 0 0 1px rgba(200,135,58,.4)}
.seo-liste li.drei .platz{background:var(--bronze-hauch);color:var(--bronze-tief);box-shadow:none}
.seo-liste b{display:block;font-size:16px}
.seo-liste small{display:block;font-size:13.5px;color:var(--tinte-3)}
.seo-liste .domain{font-size:13.5px;color:var(--gruen);font-weight:600}
.recht{padding-top:calc(var(--kopf) + 64px)}
.recht .wrap{max-width:var(--eng)}
.recht h1{font-size:clamp(36px,4.6vw,60px);margin-bottom:30px}
.recht h2{font-size:22px;margin:36px 0 12px}
/* Rechtsseiten (Impressum, Datenschutz, AGB): das Signet steht EINMAL über der Seitenüberschrift, nie an jeder h2.
   Rangfolge h1 > h2 > h3 sichtbar (Noah, 03.10.2026). */
.recht.sek h2::before,.recht .sek h2::before{display:none}
.recht h1::before{content:"";display:block;width:24px;height:26px;margin-bottom:18px;background:var(--bronze);
  -webkit-mask:var(--signet) no-repeat left center/contain;mask:var(--signet) no-repeat left center/contain}
.recht h2{font-size:24px;line-height:1.25;margin:52px 0 14px}
.recht h3{font-size:18px;line-height:1.3;font-weight:700;margin:28px 0 8px;color:var(--tinte)}
.recht h2 + h3{margin-top:18px}
.recht p{margin:0 0 14px}
/* Mobil (03.10.2026): lange Wörter in der Seitenüberschrift passen ins Bild, Fragen im Fließtext stehen unter den Zwischenüberschriften. */
.recht h1{font-size:clamp(30px,4.6vw + 14px,60px);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.recht p strong{font-weight:600;color:var(--tinte)}
.recht .stand{color:var(--tinte-3);font-size:14px;margin:-14px 0 32px}
@media(max-width:600px){.recht h2{font-size:21px;margin-top:44px}.recht h3{font-size:17px}.recht p,.recht li{font-size:15.5px}}
.recht p,.recht li{color:var(--tinte-2);font-size:16px}
.recht ul{list-style:disc;padding-left:22px}
.recht .hinweis{background:var(--bronze-hauch);border-radius:var(--radius-klein);padding:18px 22px;margin-bottom:28px}

/* ---- Responsiv ---- */
@media (max-width:1180px){
  .kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
  .skyline{grid-template-columns:repeat(6,minmax(0,1fr))}
  .handys{grid-template-columns:repeat(5,minmax(0,1fr))}
  .fuss .oben{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:grid}
  .duo,.duo.rechts,.arbeiten .duo,.google .duo,.cta .duo,.fallstudie,.faq .zwei,.social-grid{grid-template-columns:1fr}
  .arbeiten .duo .text,.faq .links{position:static}
  .kopfzeile.neben{grid-template-columns:1fr}
  .faelle,.kino,.drei,.projekte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .treppe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stufe{min-height:0}
  .hero-text h1{max-width:12ch}
  .hero-text .eine-hand{position:static;text-align:left;opacity:calc((var(--p) - .55) * 3)}
  .handys{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;scrollbar-width:none}
  .handy{flex:0 0 min(44vw,220px);scroll-snap-align:start}
  .zahlenreihe{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{--kopf:68px}
  body{font-size:16px}
  .hero-bahn{height:150svh}
  .saeulen{padding:0 calc(14px * (1 - var(--p)))}
  .saeule .etikett b{font-size:15px}
  .saeule .etikett{display:none}
  .hero-text h1{font-size:clamp(36px,11vw,48px)}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kachel{min-height:0}
  .leiste{margin-top:28px}
  .skyline{height:360px;gap:8px}
  .pfeiler{clip-path:polygon(0 5%,100% 0,100% 100%,0 100%)}
  .pfeiler .inhalt{padding:10px 8px}
  .pfeiler b{font-size:12.5px;display:none}
  .pfeiler .nummer{font-size:13px}
  .aufbau .mobil-liste{display:grid;gap:8px;margin-top:18px}
  .faelle,.kino,.drei,.projekte,.werte,.treppe,.formular .reihe,.zahlenreihe{grid-template-columns:1fr}
  .balken{height:120px}
  .band,.cta,.logoband{margin-inline:12px;border-radius:20px}
  .hero{border-radius:0 0 20px 20px}
  .wischer{aspect-ratio:4/5}
  .galerie .reihe{flex-direction:column}
  .galerie figure,.galerie .reihe.kurz figure{flex:none}
  .fuss .oben{grid-template-columns:1fr}
  .seo-liste li{grid-template-columns:auto minmax(0,1fr)}
  .seo-liste .domain{grid-column:1/-1}
  .fuss .unten{flex-direction:column}
  .fuss .unten a{margin-left:0;margin-right:16px}
  .hero-klein .wrap{padding:calc(var(--kopf) + 64px) 0 64px}
  .hero-klein{min-height:100svh}
}
@media (min-width:641px){.aufbau .mobil-liste{display:none}}
@media (prefers-reduced-transparency:reduce){.kopf.fest,body.menu-offen .kopf{background:var(--papier);backdrop-filter:none}.drop{background:var(--papier)}.pause,.ton{background:var(--tinte);backdrop-filter:none}}
@media (prefers-contrast:more){.kachel,.karte,.fall,.stufe,.stimme,.wert,.projekt{box-shadow:0 0 0 2px var(--tinte)}.btn-umriss{box-shadow:inset 0 0 0 2.5px currentColor}}

/* ---- Lebendige Seite: alles, was anfassbar aussieht, antwortet ---- */
.clip{transition:transform var(--schnell),box-shadow var(--schnell)}
.clip video{transition:transform .4s var(--ease)}
.clip:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.clip:hover video{transform:scale(1.04)}
.handy{transition:transform var(--schnell),box-shadow var(--schnell)}
.handy:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(250,247,241,.2)}
.stimme{transition:transform var(--schnell),box-shadow var(--schnell)}
.stimme:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.08)}
.seo-liste li{transition:transform var(--schnell),background var(--schnell)}
.seo-liste li:hover{transform:translateX(6px);background:var(--bronze-hauch)}
.wochenplan li{transition:transform var(--schnell),background var(--schnell)}
.wochenplan li:hover{transform:translateX(6px);background:var(--bronze-hauch)}
.wochenplan li.dreh:hover{background:#2A251D}
.bild img{transition:transform .6s var(--ease)}
.bild:hover img{transform:scale(1.04)}
.band-spur img{transition:opacity var(--schnell),transform var(--schnell)}
.band-spur img:hover{opacity:.95;transform:scale(1.07)}
.treffer .t{transition:opacity .4s var(--ease),transform .4s var(--ease),background var(--schnell)}
.treffer .t.da:hover{background:var(--bronze-hauch)}
.liste-icons li .ic{transition:transform var(--schnell),background var(--schnell)}
.liste-icons li:hover .ic{transform:scale(1.1);background:var(--bronze)}
.liste-icons li:hover .ic svg{stroke:var(--tinte)}
.wege .ic{transition:transform var(--schnell)}
.wege a:hover .ic{transform:rotate(-6deg) scale(1.06)}
.kachel:focus-visible,.projekt:focus-visible,.karte:focus-visible{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){
  .clip:hover,.handy:hover,.stimme:hover,.seo-liste li:hover,.wochenplan li:hover,.kachel:hover,.karte:hover,.fall:hover,.stufe:hover,.wert:hover,.projekt:hover,.zahl:hover,.wege a:hover,.btn:hover{transform:none}
  .clip:hover video,.bild:hover img,.galerie figure:hover img,.pfeiler:hover img,.band-spur img:hover,.wege a:hover .ic,.liste-icons li:hover .ic{transform:none}
  .band-spur,.bahn{animation:none}
}

/* ---- Bauzeitplan: vier Phasen, die Balken füllen sich beim Scrollen ---- */
.bauplan{--p:0}
.plan-tafel{position:relative;background:var(--papier);border-radius:var(--radius);padding:var(--pad);box-shadow:0 0 0 1px rgba(22,19,14,.06);display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr;gap:0 var(--gap)}
.plan-tafel .tage{grid-column:2;display:grid;grid-template-columns:repeat(21,1fr);gap:0;height:28px;margin-bottom:8px;border-bottom:1px solid var(--linie)}
.plan-tafel .tage span{font-size:13px;font-weight:700;color:var(--tinte-3);letter-spacing:.06em;position:relative}
.plan-tafel .tage span.wo::before{content:"";position:absolute;left:0;top:0;bottom:-8px;width:1px;background:var(--linie)}
.phasen{grid-column:1/-1;display:grid;gap:10px}
.phase{display:grid;grid-template-columns:44px minmax(200px,.9fr) 1.1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linie)}
.phase:last-child{border-bottom:0}
.phase .text-p{display:grid;gap:2px;padding-right:10px}
.phase .wann{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-tief);font-weight:700}
.phase b{font-size:17px;letter-spacing:-.015em}
.phase p{font-size:14.5px;color:var(--tinte-2);line-height:1.4}
.phase .spur{position:relative;height:36px;border-radius:var(--pille);background:var(--papier-2);overflow:hidden}
.phase .spur i{position:absolute;top:0;bottom:0;left:calc(var(--a) / 21 * 100%);width:calc((var(--b) - var(--a)) / 21 * 100%);border-radius:var(--pille);background:linear-gradient(90deg,var(--bronze-tief),var(--bronze));transform-origin:left;transform:scaleX(clamp(0,(var(--p) * 21 - var(--a)) / (var(--b) - var(--a)),1))}

.phase:hover .spur{box-shadow:inset 0 0 0 1.5px var(--bronze)}
.plan-tafel .heute{position:absolute;top:var(--pad);bottom:var(--pad);right:var(--pad);width:2px;background:var(--bronze);opacity:calc((var(--p) - .9) * 10);pointer-events:none}
.plan-tafel .heute span{position:absolute;right:-6px;top:-4px;transform:translateX(100%);font-size:13px;font-weight:700;color:var(--bronze-tief);white-space:nowrap}
.bauplan .fussnote{font-size:13.5px;color:var(--tinte-3);margin-top:14px}
@media (max-width:1000px){.plan-tafel{grid-template-columns:1fr}.plan-tafel .tage{grid-column:1}.phase{grid-template-columns:44px 1fr}.phase .spur{grid-column:2}.plan-tafel .heute{display:none}}
@media (prefers-reduced-motion:reduce){.bauplan{--p:1}}

/* ---- Postfach-Feed: Anfragen laufen ein ---- */
.postfach{background:var(--papier);border-radius:var(--radius);box-shadow:0 40px 80px -40px rgba(22,19,14,.5),0 0 0 1px rgba(22,19,14,.06);overflow:hidden;align-self:center;min-height:420px;display:grid;grid-template-rows:auto 1fr}
.pf-kopf{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--linie)}
.pf-kopf .punkt{width:10px;height:10px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 0 rgba(46,125,79,.5);animation:puls 1.8s ease-out infinite}
@keyframes puls{to{box-shadow:0 0 0 10px rgba(46,125,79,0)}}
.pf-kopf b{font-size:15px}
.pf-kopf small{margin-left:auto;font-size:13px;font-weight:700;color:var(--papier);background:var(--bronze-tief);padding:4px 10px;border-radius:var(--pille)}
.pf-liste{display:grid;gap:8px;padding:14px;align-content:start}
.pf-liste li{display:none;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:12px 16px;border-radius:var(--radius);background:var(--papier-2);opacity:0;transform:translateY(-10px);transition:opacity .4s var(--ease),transform .4s var(--ease),background var(--schnell)}
.pf-liste li.da{display:grid;opacity:1;transform:none}
.pf-liste li.neu{background:var(--bronze-hauch)}
.pf-liste li:hover{background:var(--bronze-hauch)}
.pf-liste li .av{width:40px;height:40px;border-radius:50%;background:var(--tinte);color:var(--papier);display:grid;place-items:center;font-weight:800;font-size:13px}
.pf-liste li b{display:block;font-size:15px}
.pf-liste li small{display:block;font-size:13.5px;color:var(--tinte-3)}
.pf-liste li .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pf-liste li .chips span{font-size:13px;font-weight:600;padding:3px 9px;border-radius:var(--pille);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.1)}
.pf-leer{padding:12px 20px 18px;font-size:13.5px;color:var(--tinte-3);text-align:center}
@media (prefers-reduced-motion:reduce){.pf-kopf .punkt{animation:none}.pf-liste li{display:grid;opacity:1;transform:none}}

/* ── Der Kalender füllt sich ────────────────────────────────────────────────
   🔴 23.09.2026 (Noah, zu Healthflows Bettenbelegung: „so geile Animationen …
   bin ich hier noch gar nicht mit drin"): eine Kachel je Werktag, die Tage mit
   Anfrage füllen sich beim Scrollen von links nach rechts. Zahlen aus der
   Senftleben-Fallstudie weiter unten auf derselben Seite. */
.kal-duo{align-items:center}
.kal-duo .kal-vorher{margin-top:14px;font-size:14.5px;color:var(--tinte-2)}
.kal-duo .kal-vorher b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);margin-bottom:3px;font-weight:700}
.kal-tafel{background:var(--papier);border-radius:var(--radius);padding:clamp(20px,2.4vw,30px);box-shadow:0 0 0 1px rgba(22,19,14,.06)}
.kal-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.kal-nr{font-size:clamp(40px,4.4vw,58px);font-weight:900;letter-spacing:-.05em;line-height:.92;display:block;color:var(--tinte);font-variant-numeric:tabular-nums}
.kal-kopf small{display:block;font-size:14px;color:var(--tinte-2);margin-top:4px;max-width:22ch}
.kal-marke{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-tief);
  background:var(--bronze-hauch);padding:6px 12px;border-radius:var(--pille);white-space:nowrap}
.kal-raster{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:clamp(5px,.55vw,8px)}
.kal-raster i{aspect-ratio:1;border-radius:5px;background:var(--papier-3);box-shadow:inset 0 0 0 1px rgba(22,19,14,.05);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.kal-raster i.an.voll{background:var(--bronze);box-shadow:0 5px 13px -7px rgba(200,135,58,.8);transform:translateY(-2px)}
.kal-fuss{display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap;margin-top:18px;padding-top:15px;border-top:1px solid var(--linie);font-size:14px;color:var(--tinte-2)}
.kal-fuss .kal-stand{color:var(--tinte-3)}
@media (max-width:760px){.kal-raster{grid-template-columns:repeat(14,minmax(0,1fr));gap:4px}}
@media (prefers-reduced-motion:reduce){.kal-raster i.an{background:var(--bronze);transition:none}}

/* ---- Kaskade: was aus 125.000 Einblendungen wird (Noah, 23.09.2026) ---- */
.kaskade{list-style:none;margin:clamp(28px,3vw,42px) 0 0;display:grid;gap:clamp(10px,1.2vw,16px);counter-reset:k}
.kaskade .k-stufe{position:relative;display:grid;grid-template-columns:minmax(132px,auto) 1fr auto;align-items:center;gap:clamp(14px,2vw,26px);
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);background:var(--papier);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 0 0 1px rgba(22,19,14,.06)}
.kaskade .k-balken{position:absolute;left:0;top:0;bottom:0;width:calc(var(--b) * 1%);background:var(--bronze-hauch);z-index:0;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.kaskade .k-stufe.dran .k-balken{transform:none}
.kaskade .k-stufe > span{position:relative;z-index:1}
/* Lebendige Seite: eine Karte, die wie eine Karte aussieht, antwortet beim Zeigen. */
.kaskade .k-stufe{transition:transform var(--schnell),box-shadow var(--schnell)}
.kaskade .k-stufe:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(22,19,14,.42),0 0 0 1px rgba(22,19,14,.09)}
.k-zahl{font-size:clamp(30px,3.5vw,46px);font-weight:900;letter-spacing:-.045em;line-height:1;color:var(--tinte);font-variant-numeric:tabular-nums}
.kaskade .k-text b{display:block;font-size:16.5px;letter-spacing:-.01em;margin-bottom:4px}
.kaskade .k-text small{display:block;font-size:14.5px;color:var(--tinte-2);line-height:1.5;max-width:56ch}
.k-zeit{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-tief);
  background:var(--papier);padding:6px 11px;border-radius:var(--pille);white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(200,135,58,.28)}
.k-ende{margin-top:clamp(16px,2vw,24px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);
  padding:clamp(20px,2.4vw,30px);border-radius:var(--radius);background:var(--tinte);color:var(--papier)}
.k-ende-text b{display:block;font-size:17px;margin-bottom:4px}
.k-ende-text small{display:block;font-size:14.5px;color:#C9C0AE}
.k-ende-zahlen{display:flex;gap:clamp(22px,4vw,54px);flex-wrap:wrap}
.k-ende-zahl{display:grid;gap:5px;justify-items:start}
.k-ende-zahl .nr{font-size:clamp(34px,4vw,52px);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--bronze-hell);font-variant-numeric:tabular-nums}
.k-ende-zahl small{font-size:14.5px;color:#E2DBCD}
.k-ende-zahl .k-zeit{background:rgba(250,247,241,.1);color:var(--bronze-hell);box-shadow:inset 0 0 0 1px rgba(224,178,110,.32)}
@media (max-width:760px){
  .kaskade .k-stufe{grid-template-columns:1fr auto;gap:10px 14px}
  .kaskade .k-text{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.kaskade .k-balken{transform:none;transition:none}}

/* ---- Die echte Anzeige mit Anmerkungen (nur Neukundengewinnung) ---- */
.anzeige-duo{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(28px,3vw,42px)}
.az-bild{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--papier);box-shadow:0 34px 68px -34px rgba(22,19,14,.45),0 0 0 1px rgba(22,19,14,.07);
  transition:transform var(--schnell),box-shadow var(--schnell)}
.az-bild:hover{transform:translateY(-4px);box-shadow:0 40px 80px -36px rgba(22,19,14,.55),0 0 0 1px rgba(22,19,14,.1)}
.az-bild img{width:100%;height:auto;display:block}
/* 🔴 Die Herkunftszeile lag über dem Knopf der Anzeige — bei einem Werbemittel ist genau
   der untere Rand belegt. Sie steht deshalb UNTER dem Bild. */
.az-bild figcaption{padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--tinte-2);background:var(--papier);border-top:1px solid var(--linie)}
.az-punkte{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,20px);counter-reset:az}
.az-punkte li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:clamp(14px,1.5vw,18px);border-radius:var(--radius);background:var(--papier);
  box-shadow:0 0 0 1px rgba(22,19,14,.06);transition:transform var(--schnell),box-shadow var(--schnell)}
.az-punkte li:hover{transform:translateX(4px);box-shadow:0 20px 40px -26px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.09)}
.az-nr{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--bronze-hauch);color:var(--bronze-tief);font-weight:800;font-size:14.5px;font-variant-numeric:tabular-nums}
.az-punkte b{display:block;font-size:16px;letter-spacing:-.01em;margin-bottom:3px}
.az-punkte small{display:block;font-size:14.5px;color:var(--tinte-2);line-height:1.5}

/* ---- Gegenüberstellung (nur Mitarbeitergewinnung) ---- */
.gegenueber{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,2.4vw,32px);align-items:stretch;margin-top:clamp(28px,3vw,42px)}
.gg-seite{padding:clamp(20px,2.4vw,30px);border-radius:var(--radius);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);display:grid;align-content:start;gap:16px;
  transition:transform var(--schnell),box-shadow var(--schnell)}
.gg-seite:hover{transform:translateY(-3px);box-shadow:0 26px 52px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.09)}
.gg-seite.alt:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(22,19,14,.14)}
.gg-seite.alt{background:var(--papier-3);box-shadow:inset 0 0 0 1px rgba(22,19,14,.06)}
.gg-seite h3{font-size:17px;letter-spacing:-.015em}
.gg-seite.alt h3{color:var(--tinte-3)}
.gg-seite ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gg-seite li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.gg-marke{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font-size:13px;font-weight:800;flex:none}
.gg-seite.alt .gg-marke{background:rgba(22,19,14,.08);color:var(--tinte-3)}
.gg-seite.neu .gg-marke{background:var(--bronze-hauch);color:var(--bronze-tief)}
.gg-seite b{display:block;font-size:15.5px;margin-bottom:2px}
.gg-seite.alt b{color:var(--tinte-2)}
.gg-seite small{display:block;font-size:14.5px;color:var(--tinte-2);line-height:1.5}
.gg-seite.alt small{color:var(--tinte-3)}
.gg-pfeil{display:grid;place-items:center;color:var(--bronze)}
.gg-pfeil svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gg-ergebnis{display:flex;align-items:center;gap:14px;margin-top:4px;padding-top:16px;border-top:1px solid var(--linie)}
.gg-ergebnis .nr{font-size:clamp(32px,3.4vw,44px);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--bronze-tief);font-variant-numeric:tabular-nums}
.gg-ergebnis small{font-size:14.5px;color:var(--tinte-2);line-height:1.4}
@media (max-width:900px){
  .anzeige-duo{grid-template-columns:1fr}
  .gegenueber{grid-template-columns:1fr}
  .gg-pfeil{transform:rotate(90deg);padding:4px 0}
}

/* Über uns auf der Startseite: kurz, mit Porträt — die ganze Geschichte hat eine eigene Seite */
.ueber-kurz{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center;
  padding:clamp(22px,2.6vw,34px);border-radius:var(--radius);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);
  transition:transform var(--schnell),box-shadow var(--schnell)}
.ueber-kurz:hover{transform:translateY(-3px);box-shadow:0 26px 52px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.09)}
.ueber-kurz img{width:clamp(104px,11vw,152px);height:clamp(104px,11vw,152px);border-radius:var(--radius);object-fit:cover;object-position:70% 34%;display:block}
.ueber-kurz p{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--tinte-2);max-width:62ch;margin:10px 0 18px}
@media (max-width:760px){.ueber-kurz{grid-template-columns:1fr;text-align:left}}

/* Kino als laufende Bahn (Startseite): dieselben Clips, eine Zeile statt zwei Reihen */
.kino-bahn{margin-top:clamp(28px,3vw,42px);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.kino-spur{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;animation:lauf 96s linear infinite;will-change:transform}
.kino-spur .clip{flex:none;width:clamp(300px,30vw,430px)}
@media (prefers-reduced-motion:reduce){.kino-spur{animation:none}}

/* ---- Gemessene Google-Plätze (nur Suchmaschinenoptimierung) ---- */
.rl-zahlen{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,64px);margin:clamp(26px,3vw,38px) 0 clamp(22px,2.6vw,32px);padding-bottom:clamp(20px,2.4vw,28px);border-bottom:1px solid var(--linie)}
.rl-zahl{display:grid;gap:5px}
.rl-zahl .nr{font-size:clamp(38px,4.6vw,60px);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--tinte);font-variant-numeric:tabular-nums}
.rl-zahl small{font-size:14.5px;color:var(--tinte-2)}
.rangliste{list-style:none;margin:0 0 clamp(20px,2.4vw,30px);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(10px,1.2vw,14px)}
.rangliste li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;padding:clamp(13px,1.4vw,16px) clamp(14px,1.5vw,18px);
  border-radius:var(--radius);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);transition:transform var(--schnell),box-shadow var(--schnell)}
.rangliste li:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.09)}
.rl-platz{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--bronze);color:var(--papier);font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.rangliste b{display:block;font-size:15.5px;letter-spacing:-.01em;margin-bottom:2px}
.rangliste small{display:block;font-size:14px;color:var(--tinte-2)}
.rangliste small::before{content:"„"}
.rangliste small::after{content:"\201c"}

/* Kalendertafel unter der Kaskade: Abstand nach oben zur letzten Stufe und nach unten zur Fußnote */
.kaskade-sek .kal-tafel{margin-top:clamp(10px,1.2vw,16px);margin-bottom:clamp(18px,2vw,26px)}

/* Projekt-Kachel als laufende Slideshow — drei echte Zustände der Live-Seite.
   🔴 Noah, 26.09.: „wenn man die Projekte sieht, dass dann die Projekte auch wie live sind." */
.schirm .dia{position:absolute;inset:0;display:block}
.schirm .dia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;animation:diawechsel 13.5s infinite;animation-delay:calc(var(--i) * 4.5s)}
@keyframes diawechsel{0%,2%{opacity:0}5%,30%{opacity:1}34%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.schirm .dia img{animation:none}.schirm .dia img:first-child{opacity:1}}

/* „Was uns ausmacht": jede Zahl bekommt ihr Motiv aus dem Signet — drei Säulen, deren Höhe
   die Aussage trägt. 🔴 Noah, 26.09.: „Was uns ausmacht ist noch ein bisschen unveranschaulicht." */
.wert{position:relative;overflow:hidden}
.wert-saeulen{position:absolute;right:18px;top:18px;display:flex;align-items:flex-end;gap:3px;height:38px;opacity:.5}
.wert-saeulen i{display:block;width:8px;height:var(--h);background:var(--bronze);border-radius:2px 2px 0 0;
  clip-path:polygon(0 18%,100% 0,100% 100%,0 100%);transform:scaleY(.2);transform-origin:bottom;
  transition:transform .4s var(--ease)}
.wert.dran .wert-saeulen i,.reveal.auf .wert-saeulen i{transform:scaleY(1)}
.wert:hover .wert-saeulen{opacity:.8}

/* Das Signet als ruhige Grundfläche hinter der Leistungs-Sektion. */
.sek.aufbau{position:relative;overflow:hidden}
.signet-grund{position:absolute;left:-6%;bottom:-14%;width:min(38vw,440px);opacity:.045;pointer-events:none;z-index:0}
.signet-grund path{fill:var(--tinte)}
.sek.aufbau .wrap{position:relative;z-index:1}

/* Erstgespräch-Kacheln weicher. 🔴 Noah: „Die Kacheln sind auch ein bisschen hart in sich." */
.wege a,.wege div{background:rgba(250,247,241,.11);box-shadow:inset 0 0 0 1px rgba(250,247,241,.14)}
.wege a:hover{background:rgba(250,247,241,.18);box-shadow:inset 0 0 0 1px rgba(200,135,58,.55)}
.wege .ic{background:rgba(200,135,58,.30);color:var(--bronze-hell)}
.wege a:hover .ic{background:var(--bronze);color:var(--tinte)}

/* „Was in den 30 Minuten passiert" — Zeitleiste statt drei Textkarten.
   🔴 Noah, 26.09.: „absolut nicht veranschaulicht, nimmt nur die hälfte des bildschirms ein". */
.dreissig-sek .min-band{position:relative;height:42px;margin:clamp(24px,3vw,38px) 0 clamp(18px,2vw,26px);
  border-top:2px solid var(--linie)}
.dreissig-sek .min-band span{position:absolute;top:10px;left:calc(var(--m) / 30 * 100%);transform:translateX(-50%);
  font-size:14px;font-weight:700;color:var(--tinte-3);display:grid;justify-items:center;line-height:1.1}
.dreissig-sek .min-band span small{font-size:13px;font-weight:500;color:var(--tinte-4)}
.dreissig-sek .min-band span::before{content:"";position:absolute;top:-12px;width:2px;height:10px;background:var(--linie)}
.dreissig-sek .min-lauf{position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--bronze);
  animation:minlauf 9s var(--ease) infinite}
@keyframes minlauf{0%{width:0}72%,100%{width:100%}}
.dreissig-sek .min-bloecke{display:grid;grid-template-columns:repeat(30,1fr);gap:clamp(12px,1.4vw,20px);align-items:stretch}
.dreissig-sek .min-block{grid-column:calc(var(--von) + 1) / span calc(var(--bis) - var(--von));
  display:grid;grid-template-rows:auto 1fr;gap:14px;background:var(--papier);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.06);transition:transform var(--schnell)}
.dreissig-sek .min-block:hover{transform:translateY(-4px)}
.dreissig-sek .min-bild{aspect-ratio:16/10;overflow:hidden;background:var(--papier-3)}
.dreissig-sek .min-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dreissig-sek .min-block:hover .min-bild img{transform:scale(1.04)}
.dreissig-sek .min-text{padding:0 clamp(16px,1.5vw,22px) clamp(18px,1.8vw,24px);display:grid;gap:9px;align-content:start}
.dreissig-sek .min-zeit{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-tief)}
.dreissig-sek .min-text b{font-size:clamp(17px,1.5vw,20px);line-height:1.25}
.dreissig-sek .min-text p{font-size:15px;color:var(--tinte-2)}
@media (max-width:900px){
  .dreissig-sek .min-band{display:none}
  .dreissig-sek .min-bloecke{grid-template-columns:1fr}
  .dreissig-sek .min-block{grid-column:1 / -1}}
@media (prefers-reduced-motion:reduce){.dreissig-sek .min-lauf{animation:none;width:100%}}

/* „So läuft es ab" — vier Stationen mit Bild statt Textzeilen am Balken.
   Je Station steht der AUFWAND des Kunden: der Angle, den im Markt niemand besetzt. */
.bauplan .stationen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(26px,3vw,40px)}
.bauplan .station{display:grid;grid-template-rows:auto 1fr;background:var(--papier);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.06);transition:transform var(--schnell),box-shadow var(--schnell)}
.bauplan .station:hover{transform:translateY(-5px);box-shadow:0 26px 52px -30px rgba(22,19,14,.42)}
.bauplan .st-bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--papier-3)}
.bauplan .st-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bauplan .station:hover .st-bild img{transform:scale(1.05)}
.bauplan .st-nr{position:absolute;left:14px;top:14px;width:32px;height:34px;display:grid;place-items:center;
  background:var(--tinte);color:var(--papier);font-weight:800;font-size:15px;
  clip-path:polygon(0 14%,100% 0,100% 100%,0 100%)}
.bauplan .st-text{padding:clamp(15px,1.5vw,20px);display:grid;gap:8px;align-content:start}
.bauplan .st-wann{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-tief)}
.bauplan .st-text b{font-size:clamp(16px,1.4vw,19px);line-height:1.25}
.bauplan .st-text p{font-size:15px;color:var(--tinte-2)}
.bauplan .st-aufwand{margin-top:6px;display:grid;gap:2px;padding-top:11px;border-top:1px solid var(--linie);
  font-size:17px;font-weight:800;color:var(--tinte)}
.bauplan .st-aufwand small{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-2)}
@media (max-width:1000px){.bauplan .stationen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bauplan .stationen{grid-template-columns:1fr}}

/* Fallstudie Senftleben. 🔴 26.09.2026: Die Sektion war im HTML gebaut, das CSS fehlte —
   Video ungerahmt über die volle Breite, das weisse Kundenlogo auf hellem Grund unsichtbar,
   Zahlen als nackte Textzeilen. Gefunden hat es nur der Blick auf die Seite; die Messung
   meldete "Video läuft, Logo da". Ansehen schlägt messen. */
.beweis{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);
  align-items:stretch;margin-top:clamp(26px,3vw,40px)}
.bw-film{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--tinte);
  aspect-ratio:4/3;box-shadow:0 30px 60px -34px rgba(22,19,14,.5)}
.bw-film video,.bw-film img{width:100%;height:100%;object-fit:cover;display:block}
.bw-daten{background:var(--tinte);color:var(--papier);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,34px);display:grid;gap:clamp(16px,1.8vw,24px);align-content:center}
.bw-logo{display:block;height:46px}
.bw-logo img{height:100%;width:auto;max-width:210px;object-fit:contain;display:block}
.bw-zahlen{display:grid;gap:clamp(12px,1.4vw,18px)}
.bw-zahl{display:grid;gap:2px;padding-bottom:clamp(12px,1.4vw,16px);border-bottom:1px solid rgba(250,247,241,.14)}
.bw-zahl:last-child{border-bottom:0;padding-bottom:0}
.bw-zahl .nr{font-size:clamp(30px,3.2vw,44px);font-weight:800;line-height:1;color:var(--bronze-hell);
  letter-spacing:-.03em}
.bw-zahl small{font-size:14px;color:#CFC7B8}
.beweis blockquote{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.45}
.beweis blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:14px;color:#B8B0A2}
.beweis .textlink{color:var(--bronze-hell)}
.beweis .textlink svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
@media (max-width:900px){.beweis{grid-template-columns:1fr}.bw-film{aspect-ratio:16/10}}

/* ---------- Laufband der Referenzen (Startseite) ----------
   🔴 Zwei gegenläufige Bahnen echter Bildschirmaufnahmen. Es hält beim Darüberfahren NICHT an
   (Noah, 23.09.2026) — nur prefers-reduced-motion schaltet es ab. Die Kachelbreite ist fest,
   damit die Bahnlänge rechenbar bleibt: 16 Kacheln → zwei Bahnen à 8, je zweimal ausgelegt. */
.laufband{overflow:hidden}
.lb{display:flex;flex-direction:column;gap:18px;margin-top:38px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lb-bahn{overflow:hidden}
.lb-zug{display:flex;gap:18px;width:max-content;animation:lb-links 64s linear infinite;will-change:transform}
.lb-bahn.rueck .lb-zug{animation-name:lb-rechts}
@keyframes lb-links{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes lb-rechts{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.lb-k{flex:0 0 auto;width:320px;background:#fff;border-radius:var(--r-karte);overflow:hidden;
      box-shadow:0 1px 2px rgba(22,19,14,.06),0 10px 26px rgba(22,19,14,.07);
      text-decoration:none;color:inherit;transition:transform .3s var(--e),box-shadow .3s var(--e)}
a.lb-k:hover,a.lb-k:focus-visible{transform:translateY(-4px);
      box-shadow:0 2px 4px rgba(22,19,14,.08),0 18px 40px rgba(200,135,58,.18)}
.lb-schirm{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tinte)}
.lb-schirm video,.lb-schirm img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.lb-fuss{display:flex;flex-direction:column;gap:2px;padding:12px 16px 14px}
.lb-fuss b{font-size:15px;line-height:1.25}
.lb-fuss small{font-size:13px;color:var(--tinte-2)}
@media (max-width:760px){.lb-k{width:242px}.lb-zug{animation-duration:48s}}
@media (prefers-reduced-motion:reduce){.lb-zug{animation:none}.lb-bahn{overflow-x:auto}}

/* ---------- Abstände und Ränder, gefunden am 26.09.2026 ----------
   🔴 Noah: "abstände stimmen niht". Drei Befunde, alle beim Ansehen, keiner beim Messen:

   (1) Zwei Sektionen mit DERSELBEN Fläche stießen aneinander (Google-Demo → Senftleben-
   Fallstudie, beide .grund): 140 px Polster unten plus 140 px oben = ein 280-px-Loch mitten
   in der Seite, ohne dass sich optisch etwas ändert. Innerhalb einer durchgehenden Fläche
   teilen sich zwei Sektionen ihr Polster. */
.grund + .grund,.papier + .papier{padding-top:0}

/* (2) Die Logo-Wand lief links und rechts hart aus dem dunklen Kasten heraus — angeschnittene
   Logos sehen aus wie ein Fehler, nicht wie ein Laufband. Dieselbe weiche Maske wie beim
   Referenz-Laufband. */
/* ---------- Eine Form für alle Laufbahnen ----------
   🔴 Noah, 26.09.2026: "sonst hats die seite teils krass verzogen auch mit testimonial von
   benjamin etc." — gemessen: die Stimmen-Karten wurden am Rand HART abgeschnitten (11 px bei
   1440, 150 px bei 390). Dasselbe Bild wie bei der Logo-Wand und der Fotowand. Im Haus gibt es
   vier Laufbahnen; sie tragen ab hier dieselbe weiche Kante (Regel "kein Stilbruch": was zu
   einer Familie gehört, sieht gleich aus). */
.sek.stimmen,.logoband :has(> .band-spur),.wand-reihen,.lb,.projektwahl{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sek.stimmen{overflow:hidden}

/* 🔴 Gemessen statt geraten: die Spuren heissen .band-spur und sind 7.900 px breit — eine
   Maske auf der Spur selbst haette bei 5 % erst nach 395 px gegriffen. Maskiert wird ihr
   direkter Elternteil, der die Sichtbreite hat. */
.logoband :has(> .band-spur){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}

/* (3) .ueber hatte als einzige Sektion ein ungleiches Polster (140 oben / 84 unten). */
.sek.ueber{padding-bottom:clamp(72px,10vw,144px)}

/* ---------- Film im Website-Schirm ----------
   🔴 Noah, 26.09.2026: "bei koller etc. nicht nur das video rein, sondern schon eben auch die
   website!!" — die Website läuft groß, der Imagefilm als kleines Feld unten rechts darin. */
.schirm,.lb-schirm{position:relative}
/* 🔴 top/left ausdruecklich auf auto: die Grundregel fuer .schirm video setzt inset:0,
   und ohne Ruecknahme gewinnt top/left gegen right/bottom — der Film sass oben links. */
.schirm video.einsatz,.lb-schirm video.einsatz{position:absolute;top:auto;left:auto;right:8px;bottom:8px;
  width:38%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;
  border:2px solid rgba(250,247,241,.92);box-shadow:0 6px 18px rgba(22,19,14,.34);z-index:2}
.einsatz-marke{position:absolute;left:8px;bottom:10px;z-index:2;
  background:rgba(22,19,14,.78);color:var(--papier);font-size:13px;font-weight:600;
  padding:4px 9px;border-radius:999px}
@media (max-width:760px){.einsatz-marke{display:none}
  .schirm video.einsatz,.lb-schirm video.einsatz{width:44%}}
.termin-karte .ehrlich{margin-top:10px;font-size:14px;line-height:1.55;color:var(--tinte-2)}

/* ================= DIE CI ALS BAUTEIL =================
   🔴 Noah musste es DREIMAL sagen ("mein logo ist fast nirgendwo als CI drin obwohl ichs 3x
   gesagt hab"). Beim dritten Mal wird nicht nachgebessert, sondern neu angesetzt: Signet im
   Kicker und Wasserzeichen im Hintergrund waren Deko und zu leise. Jetzt wird die FORM des
   Logos zum Bauteil der Seite.

   Gemessen aus /static/assets/img/signet.svg: alle drei Dächer steigen mit dy 14.667 auf dx 22 —
   also exakt 2:3, 33,7°. Das ist ab hier die eine Schräge des Hauses. */
:root{--dach:33.69deg;        /* der gemessene Winkel des Logos */
      --dach-h:22px}          /* Tiefe der Dachkante an Flächenwechseln */

/* 🔴 Zweiter Anlauf am selben Tag. Die erste Fassung legte die Dachschrägen als 6-px-Kante
   auf jede Karte — bei 6 px Höhe sind die Schrägen 1,6 px hoch und damit unsichtbar. Genau der
   "zu subtil"-Fehler vom 23.09.2026. Das Logo ist 83 : 91, also fast quadratisch; als flacher
   Streifen kann es gar nicht erkennbar sein. Ab hier steht es in seinem eigenen Verhältnis und
   kommt aus derselben Maske wie Kopf, Fuß und Favicon (--signet, aus signet.svg erzeugt).

   (1) Jede Karte trägt das Signet unten rechts — dutzendfach auf jeder Seite, erkennbar. */
.karte,.lb-k,.kachel,.projekt{position:relative;isolation:isolate}
.karte::after,.kachel::after{content:"";position:absolute;right:16px;bottom:15px;
  width:19px;height:21px;background:var(--bronze);
  -webkit-mask:var(--signet) no-repeat center/contain;mask:var(--signet) no-repeat center/contain;
  opacity:.26;transition:opacity .35s var(--e),transform .35s var(--e);z-index:2;pointer-events:none}
.karte:hover::after,.kachel:hover::after{opacity:.62;transform:translateY(-2px)}

/* (2) Flächenwechsel bekommen das Dachprofil statt einer geraden Kante. */
.band,.cta,.logoband,.laufband{position:relative}

/* (3) Trenner zwischen zwei Aufzählungspunkten: die drei Säulen als Linie, 2:3 wie im Logo. */
.liste-icons > li{position:relative}
.liste-icons > li::after{content:"";position:absolute;left:0;top:calc(100% + 7px);
  width:30px;height:9px;background:var(--bronze);opacity:.3;
  clip-path:polygon(0 100%,26.5% 27.5%,26.5% 100%,41% 100%,67.5% 0,67.5% 100%,73.5% 100%,100% 0,100% 100%)}
.liste-icons > li:last-child::after{display:none}

/* (4) Jede h2 bekommt links die drei Säulen als Anschlag — die Überschrift steht auf dem Logo. */
.sek h2::before,.band h2::before{content:"";display:block;width:24px;height:26px;margin-bottom:16px;
  background:var(--bronze);
  -webkit-mask:var(--signet) no-repeat left center/contain;mask:var(--signet) no-repeat left center/contain}
.hero h2::before,.cta h2::before{display:none}

/* 🔴 Die Fotowand lief auf /kontakt/ 14.312 px breit aus der Seite heraus (horizontaler
   Scroll auf der ganzen Seite). Dieselbe Behandlung wie bei Logoband und Referenz-Laufband:
   abschneiden und an den Rändern weich auslaufen lassen, statt hart zu kappen. */
.wand-reihen{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}

/* 🔴 Trägt der Kicker direkt über einer Überschrift schon das Signet, entfällt die h2-Marke —
   sonst steht dasselbe Zeichen zweimal untereinander und sieht wie ein Fehler aus.
   Gefunden beim Ansehen der Sektion "So läuft es ab", nicht beim Messen. */
.kicker + h2::before,.kicker + * > h2::before{display:none}

/* 🔴 Zwei Inhaltsbild-Familien standen ohne Radius, während alle anderen Inhaltsbilder im Haus
   24 px tragen: die Fallstudien-Bilder und die Bilder der 30-Minuten-Leiste. Der Stil-Prüfer
   sah es nicht, weil er je SEITE vergleicht und dort jeweils alle gleich falsch waren — ein
   Stilbruch ist ein FEHLENDER Wert, sichtbar erst im Vergleich zwischen den Seiten.
   🔴 Hero-Hintergründe bleiben bewusst bei 0: sie füllen ihren Rahmen randlos. */
.fallbild,.fallbild img,.min-bild,.min-bild img,.st-bild,.st-bild img{border-radius:var(--r-bild,24px);overflow:hidden}

/* ---------- Sektionskopf: Überschrift links, Lead rechts ----------
   🔴 Gemessen am 26.09.2026: an 35 Sektionsköpfen lag über 42 % der Breite rechts brach —
   Kicker, H2 und Lead standen alle linksbündig untereinander in einer 780-px-Spalte. Auf
   1440 px ist das eine halb leere Sektion (Noahs Dauerkritik „zu leer"). Die Bauform dafür
   gab es längst als .neben, sie wurde nur nie benutzt. 🔴 Der Deckel muss mit weg —
   ein Grid in einem 780-px-Container macht die Sektion leerer, nicht voller. */
@media (min-width:1100px){
  .kopfzeile:not(.mitte):has(> .lead){
    max-width:none;
    display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    column-gap:clamp(32px,4vw,72px);align-items:end}
  .kopfzeile:not(.mitte):has(> .lead) > .kicker{grid-column:1/-1}
  .kopfzeile:not(.mitte):has(> .lead) > h2{margin-bottom:0;max-width:16ch}
  .kopfzeile:not(.mitte):has(> .lead) > .lead{margin:0 0 6px;max-width:54ch}
}

/* ================= RUNDE 6 (27.09.2026) =================
   🔴 Noah: „Sektionen schauen random aus" · „nicht wie ein Bauchladen" · „Copy 5, 6, 7, 8 mal
   gepromptet" · „Logo mehr reinnehmen" · „Senftleben-Testimonial und Sektion darunter viel zu groß".
   Neuer Aufbau nach dem Prinzip der großen Anbieter (Hista, Boost, Candidate Flow, Fokus Fachkraft):
   Problem als durchgestrichene Wege → EIN System (die drei Säulen des Logos) → Ergebnis je Kunde in
   einer Zeile → Beweis → Ablauf. Sechs gleichwertige Kacheln gibt es nicht mehr. */

/* ---- Problem: die Wege, die kalt bleiben (Prinzip aus SHK v3, von Noah am 25.09. gelobt) ---- */
.wege-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(26px,3vw,40px)}
.weg{position:relative;padding:var(--pad);border-radius:var(--radius);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.06);display:grid;gap:12px;align-content:start;overflow:hidden;transition:transform var(--schnell),box-shadow var(--schnell)}
.weg:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.08)}
.weg .ic{width:44px;height:44px;border-radius:12px;background:var(--papier-2);display:grid;place-items:center;transition:background .4s,transform .4s var(--ease)}
.weg .ic svg{width:22px;height:22px;stroke:var(--tinte-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.weg b{font-size:17px;line-height:1.25;padding-right:36px;text-decoration:line-through transparent;text-decoration-thickness:2px;transition:text-decoration-color .4s}
.weg p{font-size:15px;color:var(--tinte-2)}
.weg .x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:#C8412F;color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;line-height:1;transform:scale(0) rotate(-30deg);opacity:0;transition:transform .45s cubic-bezier(.2,1.5,.4,1),opacity .3s}
.weg.gestempelt .x{transform:none;opacity:1}
.weg.gestempelt b{text-decoration-color:#C8412F}
.weg.gestempelt .ic{background:#F6E3E0;transform:rotate(-10deg)}
.weg.gestempelt .ic svg{stroke:#C8412F}
.weg.gestempelt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#C8412F}
.wege-ende{margin-top:var(--gap);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px);border-radius:var(--radius);background:var(--papier);color:var(--tinte);box-shadow:0 0 0 1px rgba(22,19,14,.06),inset 4px 0 0 var(--bronze);opacity:.35;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.wege-ende.fertig{opacity:1;transform:none}
.wege-ende q{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.2;quotes:"„" "“"}
.wege-ende small{display:block;font-size:14px;color:var(--tinte-2);margin-top:6px}
.wege-ende .ic{width:48px;height:48px;border-radius:14px;background:var(--bronze-hauch);display:grid;place-items:center}
.wege-ende .ic svg{width:24px;height:24px;stroke:var(--bronze-tief);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){.wege-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.wege-raster{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.weg .x{transform:none;opacity:1}.wege-ende{opacity:1;transform:none}}

/* ---- Das System: die drei Säulen des Logos, groß — Gefunden · Gesehen · Gebucht ----
   🔴 „Du sollst das Logo mehr mit reinnehmen" — hier IST die Sektion das Logo: drei Säulen mit den
   steigenden Dächern, die sich beim Ankommen von unten aufbauen. Die sechs Leistungen stehen darin
   als Paare, nicht als sechs gleichwertige Kacheln (Noah: „nicht wie ein Bauchladen"). */
.system-sek{position:relative;overflow:hidden}
.system-saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:end;margin-top:clamp(26px,3vw,40px)}
.ss-hub{clip-path:inset(100% 0 0 0);transition:clip-path .4s var(--ease)}
.ss-hub:nth-child(2){transition-delay:.16s}
.ss-hub:nth-child(3){transition-delay:.32s}
.system-saeulen.dran .ss-hub{clip-path:inset(0 0 0 0)}
.ss{position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:var(--tinte);color:var(--papier);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;clip-path:polygon(0 var(--dt),100% 0,100% 100%,0 100%);min-height:var(--mh);transition:transform var(--schnell)}
.ss-hub:nth-child(1) .ss{--dt:9%;--mh:560px}
.ss-hub:nth-child(2) .ss{--dt:8%;--mh:620px}
.ss-hub:nth-child(3) .ss{--dt:7%;--mh:680px}
.ss .ss-bild{position:absolute;inset:0;z-index:0}
.ss .ss-bild img,.ss .ss-bild video{width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform .4s var(--ease),opacity .4s}
.ss:hover .ss-bild img,.ss:hover .ss-bild video{transform:scale(1.04);opacity:.72}
.ss .ss-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,14,.12) 10%,rgba(22,19,14,.6) 48%,rgba(22,19,14,.95) 100%)}
.ss .ss-in{position:relative;z-index:1;padding:var(--pad);display:grid;gap:12px}
.ss .nummer{font-size:13px;letter-spacing:.14em;color:var(--bronze-hell);font-weight:700}
.ss h3{color:var(--papier);font-size:clamp(30px,3vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1}
.ss .ss-was{font-size:14px;font-weight:600;color:#D9D2C4;letter-spacing:.02em}
.ss p{font-size:15px;color:#CFC8BB;max-width:40ch}
.ss .ss-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ss .ss-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:var(--pille);background:rgba(250,247,241,.1);box-shadow:inset 0 0 0 1px rgba(250,247,241,.18);font-size:14px;font-weight:600;color:var(--papier);transition:background var(--schnell),box-shadow var(--schnell)}
.ss .ss-links a:hover{background:var(--bronze);color:var(--tinte);box-shadow:none}
.ss .ss-links a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.system-sek .ss-boden{height:2px;background:var(--linie-dunkel);opacity:.25;margin-top:-2px}
@media (max-width:1000px){.system-saeulen{grid-template-columns:1fr}.ss-hub .ss{--mh:420px;--dt:6%}}
@media (prefers-reduced-motion:reduce){.ss-hub{clip-path:none}}

/* ---- Ergebnisse: drei Karten, EINE Ergebniszeile (Prinzip Hista: „2 neue Anlagenmechaniker") ----
   🔴 Ersetzt die Senftleben-Fallstudie (1.452 px) UND die drei Fallkarten (1.361 px) — Noah: „viel zu
   groß", fünfmal gesagt. Das Video läuft NICHT von selbst: Noah, 27.09.: „Da läuft immer noch
   automatisch das Video, obwohl ich das nicht wollte." Klick startet es, mit Ton und Regler. */
.ergebnisse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(26px,3vw,40px)}
.erg{background:var(--papier);border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.06);display:grid;grid-template-rows:auto 1fr;transition:transform var(--schnell),box-shadow var(--schnell)}
.erg:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(22,19,14,.4),0 0 0 1px rgba(22,19,14,.08)}
.erg-film{position:relative;aspect-ratio:16/10;background:var(--tinte);overflow:hidden}
.erg-film video,.erg-film img{width:100%;height:100%;object-fit:cover;display:block}
.erg-film img{transition:transform .6s var(--ease)}
.erg:hover .erg-film img{transform:scale(1.04)}
.erg .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(22,19,14,.04),rgba(22,19,14,.42));cursor:pointer;border:0;padding:0;width:100%;height:100%}
.erg .play span{width:64px;height:64px;border-radius:50%;background:var(--bronze);color:var(--tinte);display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.5);transition:transform var(--schnell)}
.erg .play:hover span{transform:scale(1.08)}
.erg .play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.erg .play small{position:absolute;left:14px;bottom:14px;color:var(--papier);font-size:13px;font-weight:600;padding:6px 10px;border-radius:var(--pille);background:rgba(22,19,14,.72)}
.erg.laeuft .play{display:none}
.erg-in{padding:var(--pad);display:grid;gap:12px;align-content:start}
.erg-wer{display:flex;align-items:center;gap:12px}
.erg .marke-f{display:grid;place-items:center;width:96px;height:44px;flex:none;border-radius:var(--radius-klein);background:var(--tinte);padding:6px 9px}
.erg .marke-f img{max-width:80px;max-height:30px;width:auto;height:auto;object-fit:contain}
.erg-wer small{font-size:13.5px;color:var(--tinte-3);line-height:1.35}
.erg-zeile{font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--tinte)}
.erg-zeile em{color:var(--bronze-tief)}
.erg p{font-size:14.5px;color:var(--tinte-2)}
.erg .textlink{margin-top:2px}
.zahlenband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--linie)}
.zahlenband .zb{display:grid;gap:4px}
.zahlenband .nr{font-size:clamp(34px,3.6vw,52px);line-height:1;color:var(--tinte)}
.zahlenband small{font-size:14.5px;color:var(--tinte-2)}
@media (max-width:1000px){.ergebnisse{grid-template-columns:1fr}.zahlenband{grid-template-columns:repeat(2,1fr)}}

/* ---- Bento: die Lösung als Zellen mit Material (Anzeige, Reels, Tickets, Fotos) ---- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);margin-top:clamp(26px,3vw,40px)}
.zelle{position:relative;border-radius:var(--radius);background:#1F1B14;color:var(--papier);overflow:hidden;padding:var(--pad);display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;box-shadow:0 0 0 1px rgba(250,247,241,.08);transition:transform var(--schnell),box-shadow var(--schnell)}
.zelle:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.zelle .nummer{position:absolute;top:22px;left:22px;font-size:13px;letter-spacing:.14em;color:var(--bronze-hell);font-weight:700;z-index:2}
.zelle h3{font-size:clamp(20px,1.7vw,24px);color:var(--papier);position:relative;z-index:2;margin-bottom:6px}
.zelle p{font-size:15px;color:#CFC8BB;position:relative;z-index:2;max-width:46ch}
.zelle .bild{position:absolute;inset:0;z-index:0}
.zelle .bild img,.zelle .bild video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.zelle:hover .bild img{transform:scale(1.04)}
.zelle .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,14,.05) 15%,rgba(22,19,14,.92) 82%)}
.zelle.z-2{grid-column:span 2}.zelle.z-3{grid-column:span 3}.zelle.z-4{grid-column:span 4}
.zelle.hoch{min-height:440px}
.zelle .handys-k{position:absolute;right:22px;top:22px;display:flex;gap:12px;z-index:1}
.zelle .handys-k video{width:124px;aspect-ratio:9/16;border-radius:16px;object-fit:cover;border:2px solid rgba(250,247,241,.28);transform:rotate(3deg);box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.zelle .handys-k video:nth-child(2){transform:rotate(-3deg) translateY(14px)}
.zelle.mit-handys{padding-top:340px}
.zelle.mit-tickets{justify-content:flex-start}
.zelle.mit-tickets h3{margin-top:auto}
.tickets{display:grid;gap:8px;position:relative;z-index:1;margin:8px 0 22px}
.ticket{display:flex;align-items:center;gap:12px;background:rgba(250,247,241,.06);box-shadow:inset 0 0 0 1px rgba(250,247,241,.1);border-radius:12px;padding:11px 14px;font-size:13.5px;transform:translateX(24px);opacity:0;transition:transform .45s var(--ease),opacity .4s;transition-delay:var(--d,0s)}
.zelle.dran .ticket{transform:none;opacity:1}
.ticket .tic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(250,247,241,.08);flex:none}
.ticket .tic svg{width:16px;height:16px;stroke:var(--bronze-hell);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ticket b{display:block;font-size:14px;color:var(--papier)}
.ticket small{color:#C9C0AE;font-size:13px}
.ticket .ok{margin-left:auto;font-size:13px;font-weight:700;color:#7ED39E;box-shadow:inset 0 0 0 1px rgba(126,211,158,.4);border-radius:var(--pille);padding:4px 9px;white-space:nowrap}
.zelle .umkreis{position:absolute;right:-30px;top:-30px;width:260px;height:260px;z-index:1;opacity:.9}
.zelle .umkreis circle{fill:none;stroke:var(--bronze);stroke-width:1.5;opacity:.5}
.zelle .umkreis circle.puls{animation:puls 3s var(--ease) infinite;transform-origin:center;stroke:var(--bronze-hell)}
.zelle .umkreis circle.kern{fill:var(--bronze);stroke:none;opacity:1}
@keyframes puls{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.05);opacity:0}}
@media (max-width:900px){.bento{grid-template-columns:1fr}.zelle.z-2,.zelle.z-3,.zelle.z-4{grid-column:auto}.zelle .handys-k{display:none}.zelle.mit-handys{padding-top:var(--pad)}}
@media (prefers-reduced-motion:reduce){.ticket{transform:none;opacity:1}.zelle .umkreis circle.puls{animation:none}}

/* ---- Schlichte Kontaktsektion — Noah, 27.09.: „Formular unten, viel zu viel Text links und rechts.
   Das ganze schlichter machen … Einfach simpler ist doch nicht so schwierig." ---- */
.cta.schlicht .duo{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,40px)}
.cta.schlicht .text{max-width:760px;margin:0 auto;text-align:center;align-items:center}
.cta.schlicht .lead{margin-inline:auto}
.cta.schlicht .knopfzeile{justify-content:center;margin-top:6px}
.cta.schlicht .kontakt-zeile{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;font-size:15px;color:#D9D2C4;margin-top:4px}
.cta.schlicht .kontakt-zeile a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--papier);font-weight:600}
.cta.schlicht .kontakt-zeile a:hover{color:var(--bronze-hell)}
.cta.schlicht .kontakt-zeile svg{width:18px;height:18px;stroke:var(--bronze-hell);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta.schlicht .formular{max-width:760px;margin:0 auto;width:100%}

/* ---- Unterseiten-Hero: Bilder sichtbar, nicht weggedunkelt.
   🔴 Noah, 27.09.: „Scrollen, dann sieht man die Fotos im Hintergrund fast gar nicht. Sie sind auch
   zusätzlich abgeschnitten." — Deckkraft .52 → .8, Verlauf rechts von .48 auf .16, Dachschnitt flacher. */
.hero-klein .saeulen-k video,.hero-klein .saeulen-k img{opacity:.8}
.hero-klein .wechsel img{opacity:0}
.hero-klein .wechsel img.an{opacity:.8}
.hero-klein::before{background:linear-gradient(95deg,rgba(22,19,14,.92) 0%,rgba(22,19,14,.74) 36%,rgba(22,19,14,.3) 64%,rgba(22,19,14,.16) 100%)}
.hero-klein .saeulen-k .s1{clip-path:polygon(0 22%,100% 16%,100% 100%,0 100%)}
.hero-klein .saeulen-k .s2{clip-path:polygon(0 13%,100% 7%,100% 100%,0 100%)}
.hero-klein .saeulen-k .s3{clip-path:polygon(0 5%,100% 0,100% 100%,0 100%)}
.hero-klein .saeulen-k video,.hero-klein .saeulen-k img{object-position:center 40%}

/* Stimmen: zwei Bahnen auch auf der Startseite — Noah, 27.09.: „da können wir ruhig dann zwei Rezensionen laufen lassen" */
.stimmen .bahn + .bahn{margin-top:18px}
/* Bilder in den Säulen und Ergebnis-Karten sind Hintergrund ihrer Kachel — absolut wie im Hero, damit sie
   dem Stilprüfer nicht als Inhaltsbild ohne Radius erscheinen (Befund 27.09.). */
.ss .ss-bild img,.ss .ss-bild video{position:absolute;inset:0}
.erg-film img,.erg-film video{position:absolute;inset:0;border-radius:var(--radius) var(--radius) 0 0}
.ss .ss-bild{border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
/* Vierer-Kachel auf Über uns: jedes Bild trägt die Hausrundung (Stilprüfer 27.09.: 4× 0px neben 156× 24px) */
.betriebe-vier img{border-radius:var(--radius)}
/* Etikett der ersten Säule sitzt höher, damit es nicht in die H1 läuft (27.09.) */
.saeule:nth-child(1) .etikett{top:calc(var(--s) * (1 - var(--p)) + 8px)}
/* Tickets gehören zur Karten-Familie: Hausrundung (Stilprüfer 27.09.: 3× 12px neben 24px) */
.ticket{border-radius:var(--radius)}

/* ---------- Referenz-Kacheln: Hero läuft, Drüberfahren scrollt die Seite ----------
   🔴 Noah, 27.09.2026: „es reicht, wenn einfach der Home Screen der Seiten lädt … Wenn jemand dann
   mit der Maus drüberfährt, soll die Seite etwas smooth runterscrollen". Die Schleife zeigt nur den
   Hero (8 s, Slider läuft mit); das Seitenbild lädt erst beim ersten Drüberfahren und wird von
   /static/main.js per Web Animations bewegt (Tempo je Pixel, nicht je Sekunde). */
.schirm video.hero-lauf,.lb-schirm video.hero-lauf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.schirm img.seite-bild,.lb-schirm img.seite-bild,.projekt .schirm img.seite-bild{position:absolute;left:0;top:0;width:100%;height:auto;object-fit:initial;
  opacity:0;transition:opacity .3s var(--ease);will-change:transform;pointer-events:none;z-index:1;animation:none}
.projekt:hover .schirm img.seite-bild{animation:none}
.schirm.scrollt img.seite-bild,.lb-schirm.scrollt img.seite-bild,.projekt .schirm.scrollt img.seite-bild{opacity:1}
.scrollt .einsatz,.scrollt .einsatz-marke{opacity:0;transition:opacity .3s var(--ease)}

/* ---------- Cookie-Hinweis (/static/tracking.js) ---------- */
.cookie-hinweis{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:560px;margin-left:auto;
  background:var(--papier);color:var(--tinte);border-radius:var(--radius);padding:20px 22px;
  box-shadow:0 0 0 1px rgba(22,19,14,.08),0 24px 60px -18px rgba(22,19,14,.45);
  opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cookie-hinweis.da{opacity:1;transform:none}
.cookie-hinweis p{margin:0;font-size:14.5px;line-height:1.5;letter-spacing:.01em}
.cookie-hinweis p b{display:block;font-size:16px;margin-bottom:4px;letter-spacing:-.01em}
.cookie-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cookie-knoepfe{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.cookie-knoepfe .btn{flex:1 1 180px;justify-content:center;min-height:48px}
.cookie-knoepfe .btn:active{transform:scale(.97);transition-duration:.1s}
.cookie-link{background:none;border:0;padding:0;margin-left:16px;min-height:44px;display:inline-flex;align-items:center;
  font:inherit;font-size:13.5px;letter-spacing:.01em;color:#E2DBCD;cursor:pointer}
.cookie-link:hover{color:var(--bronze-hell)}
.cookie-link:active{opacity:.7;transition-duration:.1s}
@media (max-width:760px){.cookie-link{margin-left:0;margin-right:16px}.cookie-hinweis{left:12px;right:12px;bottom:12px;padding:18px}}
@media (prefers-reduced-motion:reduce){.cookie-hinweis{transition:none}}

/* ---------- Team (27.09.2026, Noah: „ne teamssektion … nicht so detailreich") ----------
   Über uns: drei Karten, eine Zeile je Person. Startseite: Robert + Rudolf als Zeile im Block „Wer dahinter steht"
   (eigene Kartensektion direkt unter der Noah-Karte wäre Kasten auf Kasten). */
.team-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.team-karte{background:#fff;border-radius:var(--radius);padding:32px 24px 30px;text-align:center;
  box-shadow:0 0 0 1px rgba(22,19,14,.08);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.team-karte:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(22,19,14,.12),0 22px 44px -28px rgba(22,19,14,.4)}
.team-karte:active{transform:scale(.985);transition-duration:.1s}
.team-karte img{width:112px;height:112px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 18px;background:var(--papier-3)}
.team-karte b{display:block;font-size:19px;letter-spacing:-.015em}
.team-karte span{display:block;font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--bronze-tief);margin:4px 0 10px}
.team-karte p{font-size:15px;line-height:1.55;color:var(--tinte-2);margin:0}
.team-mini{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 20px}
.team-mini .kicker{width:100%}
.team-mini .tm-p{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--tinte-2);letter-spacing:.01em}
.team-mini .tm-p b{color:var(--tinte)}
.team-mini img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
@media (max-width:760px){.team-drei{grid-template-columns:1fr;gap:14px}.team-karte{display:grid;grid-template-columns:88px 1fr;gap:2px 18px;text-align:left;padding:20px;align-items:center}
  .team-karte img{width:88px;height:88px;margin:0;grid-row:span 3}.team-karte span{margin:2px 0 4px}}

.team-initiale{width:112px;height:112px;border-radius:50%;background:var(--tinte);color:var(--papier);display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-family:var(--schrift-kopf,inherit);font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1}
.team-karte span.team-initiale{color:var(--papier);margin:0 auto 18px;font-size:46px;font-weight:800}
.team-mini .team-initiale{width:44px;height:44px;margin:0;font-size:19px}
@media (max-width:760px){.team-karte .team-initiale{width:88px;height:88px;margin:0;grid-row:span 3;font-size:36px}}

/* Cookie-Hinweis: eine Zeile, Ja/Nein (Noah, 27.09.2026: „einfach simpel cookies ja nein") */
.cookie-hinweis{display:flex;align-items:center;gap:18px;max-width:420px;padding:14px 14px 14px 22px}
.cookie-hinweis p{flex:1;font-size:15.5px;font-weight:600;letter-spacing:-.005em}
.cookie-hinweis p a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0 -12px;font-weight:500;font-size:13.5px;letter-spacing:.01em;color:var(--tinte-3)}
.cookie-hinweis p a:active{opacity:.6}
.cookie-hinweis p{display:flex;flex-direction:column;align-items:flex-start}
.cookie-hinweis .cookie-knoepfe{margin:0;flex-wrap:nowrap;gap:8px}
.cookie-hinweis .cookie-knoepfe .btn{flex:0 0 auto;min-height:44px;padding:10px 22px}
@media (max-width:760px){.cookie-hinweis{max-width:none}}

/* 🔴 Noah, 27.09.2026: „ich will auch dass wir nen hinweis haben, die auf dieser website verwendeten bilder sind *nicht* KI generiert, weil das manche leute schon dachten" */
.fuss .ki-hinweis{max-width:none;margin:40px 0 0;padding:14px 18px;border-radius:var(--radius-klein);background:rgba(250,247,241,.06);box-shadow:inset 0 0 0 1px rgba(250,247,241,.12);
  color:#E2DBCD;font-size:15px;line-height:1.5;letter-spacing:.01em}

/* ═══════ Runde 9 (27.09.2026) ═══════ */
/* Team groß: Hochformat, Name auf dem Bild — „große Teamsektionen", nicht Über uns wiederholen */
.team-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(26px,3vw,40px)}
.team-karte{background:#fff;border-radius:var(--radius);padding:0;text-align:left;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 0 0 1px rgba(22,19,14,.06);transition:transform var(--schnell),box-shadow var(--schnell)}
.team-karte:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(22,19,14,.1),0 30px 60px -30px rgba(22,19,14,.45)}
.team-karte .tk-bild{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--tinte)}
.team-karte .tk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;margin:0;border-radius:0;transition:transform .5s var(--ease)}
.team-karte:hover .tk-bild img{transform:scale(1.04)}
.team-karte .tk-bild::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(22,19,14,.82))}
.team-karte .tk-name{position:absolute;left:clamp(18px,2vw,26px);right:18px;bottom:clamp(16px,2vw,24px);z-index:2;color:var(--papier)}
.team-karte .tk-name b{display:block;font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1}
.team-karte .tk-name span{display:block;font-size:14px;font-weight:600;color:#E8DFCF;margin:6px 0 0;letter-spacing:.01em}
.team-karte p{font-size:15.5px;line-height:1.55;color:var(--tinte-2);margin:0;padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px) clamp(20px,2vw,26px)}
.team-karte .team-initiale{position:absolute;inset:0;width:auto;height:auto;border-radius:0;margin:0;background:var(--tinte-2);color:var(--papier);display:flex;align-items:center;justify-content:center;font-size:clamp(120px,14vw,200px);font-weight:800;letter-spacing:-.06em;line-height:1;padding-bottom:12%}
@media (max-width:760px){
  .team-drei{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:24px calc(var(--rand) * -1) 0;padding:0 var(--rand) 6px;scrollbar-width:none}
  .team-drei::-webkit-scrollbar{display:none}
  .team-karte{flex:0 0 76%;scroll-snap-align:center;display:grid;grid-template-columns:none;padding:0;text-align:left}
  .team-karte .tk-bild img{width:100%;height:100%}
  .team-karte .team-initiale{font-size:110px;grid-row:auto}}
/* Referenz-Kacheln: Film-Einsatz ist raus (Runde 9) */
.einsatz,.einsatz-marke{display:none!important}
/* Zeitleiste im Bauzeitplan */
.zeitplan{margin-top:clamp(26px,3vw,40px);margin-bottom:clamp(18px,2vw,26px);background:#fff;border-radius:var(--radius);padding:clamp(20px,2.6vw,36px);box-shadow:0 0 0 1px rgba(22,19,14,.06);display:grid;gap:14px}
.zp-kopf,.zp-zeile{display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:center}
.zp-kopf{grid-template-columns:52px repeat(3,1fr)}
.zp-kopf::before{content:""}
.zp-kopf span{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2);padding-left:4px}
.zp-zeile>small{font-size:14px;font-weight:700;color:var(--tinte)}
.zp-spur{position:relative;display:grid;grid-template-columns:repeat(15,1fr);gap:4px;height:46px}
.zp-du .zp-spur{height:92px;align-items:start}
.zp-tag{border-radius:8px;background:var(--papier-2)}
.zp-du .zp-tag{height:46px}
.zp-tag.wochenstart{box-shadow:-3px 0 0 -1px var(--linie)}
.zp-balken{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:10px;background:var(--tinte);transform:scaleX(0);transform-origin:0 50%}
.zeitplan.dran .zp-balken{animation:zp-wir 1.6s cubic-bezier(.5,0,.2,1) forwards}
@keyframes zp-wir{to{transform:none}}
.zp-live{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--papier);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:0}
.zeitplan.dran .zp-live{animation:zp-da .4s 1.5s forwards}
@keyframes zp-da{to{opacity:1}}
.zp-m{position:absolute;top:0;left:calc((var(--d) + .5) / 15 * 100%);transform:translateX(-50%);display:grid;justify-items:center;gap:4px;text-align:center;opacity:0;translate:0 8px}
.zeitplan.dran .zp-m{animation:zp-punkt .45s cubic-bezier(.2,1.4,.4,1) calc(1s + var(--n) * .18s) forwards}
@keyframes zp-punkt{to{opacity:1;translate:0 0}}
.zp-m i{display:block;width:18px;height:46px;border-radius:8px;background:var(--bronze)}
.zp-m.gross i{width:calc(100% / 1);min-width:42px}
.zp-m b{font-size:13px;font-weight:700;color:var(--tinte);white-space:nowrap;line-height:1.1}
.zp-m small{font-size:13px;color:var(--tinte-2);white-space:nowrap;line-height:1.1}
.zp-summe{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:6px;padding-top:18px;border-top:1px solid var(--linie)}
.zp-summe div{display:flex;align-items:baseline;gap:12px}
.zp-summe .nr{font-size:clamp(34px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1}
.zp-summe .du .nr{color:var(--bronze-tief)}
.zp-summe small{font-size:15px;color:var(--tinte-2);max-width:26ch}
@media (max-width:760px){
  .zp-kopf,.zp-zeile{grid-template-columns:34px 1fr;column-gap:8px}.zp-kopf{grid-template-columns:34px repeat(3,1fr)}
  .zp-spur{gap:2px;height:38px}.zp-du .zp-tag,.zp-m i{height:38px}.zp-du .zp-spur{height:84px}
  .zp-m i{width:12px}.zp-m.gross i{min-width:26px}
  .zp-m small{display:none}
  .zp-summe{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.zeitplan .zp-balken,.zeitplan .zp-m,.zeitplan .zp-live{animation:none;transform:none;opacity:1;translate:0 0}}
/* KI-Hinweis links unten (nur Startseite) — erscheint nach etwas Scrollen, klappt auf, dann zur Pille */
.ki-marke{position:fixed;left:16px;bottom:16px;z-index:85;display:flex;align-items:center;gap:4px;padding:6px;border-radius:var(--pille);background:rgba(250,247,241,.92);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 0 0 1px rgba(22,19,14,.08),0 18px 44px -18px rgba(22,19,14,.45);opacity:0;transform:translateY(18px) scale(.94);transform-origin:0 100%;pointer-events:none;transition:opacity .3s var(--ease),transform .4s cubic-bezier(.2,1.3,.4,1)}
.ki-marke.da{opacity:1;transform:none;pointer-events:auto}

.ki-knopf{display:flex;align-items:center;gap:0;background:none;border:0;padding:0;font:inherit;color:var(--tinte);cursor:pointer;text-align:left;min-height:44px}
.ki-ic{width:44px;height:44px;border-radius:50%;background:var(--tinte);display:grid;place-items:center;font-size:20px;flex:none}
.ki-text{display:grid;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .4s cubic-bezier(.5,0,.2,1),opacity .3s,padding .4s cubic-bezier(.5,0,.2,1);padding:0}
.ki-marke.auf .ki-text{max-width:420px;opacity:1;padding:0 8px 0 14px}
.ki-text b{font-size:14.5px;font-weight:700;letter-spacing:-.005em;line-height:1.3}
.ki-text small{font-size:13px;color:var(--tinte-2);line-height:1.3}
.ki-zu{width:0;height:44px;border:0;background:none;border-radius:50%;font-size:15px;color:var(--tinte-2);cursor:pointer;overflow:hidden;opacity:0;transition:width .4s,opacity .3s}
.ki-marke.auf .ki-zu{width:44px;opacity:1}
.ki-zu:hover{background:var(--papier-2)}
.ki-knopf:active .ki-ic,.ki-zu:active{transform:scale(.94)}
@media (max-width:760px){.ki-marke{left:12px;bottom:12px;max-width:calc(100vw - 24px)}.ki-text{white-space:normal}.ki-marke.auf .ki-text{max-width:calc(100vw - 130px)}}
@media (prefers-reduced-motion:reduce){.ki-marke,.ki-text,.ki-zu{transition:none}}
/* Kontakt: Themen-Karten und direkter Draht */
.themen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(26px,3vw,40px)}
.thema{background:#fff;border-radius:var(--radius);overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 0 0 1px rgba(22,19,14,.08),0 24px 50px -34px rgba(22,19,14,.5);transition:transform var(--schnell),box-shadow var(--schnell)}
.thema:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(22,19,14,.1),0 34px 64px -30px rgba(22,19,14,.5)}
.th-bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--papier-3)}
.th-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .5s var(--ease)}
.thema:hover .th-bild img{transform:scale(1.05)}
.th-marke{position:absolute;left:14px;top:14px;padding:7px 13px;border-radius:var(--pille);background:rgba(22,19,14,.78);color:var(--papier);font-size:13px;font-weight:700;letter-spacing:.02em}
.th-text{padding:clamp(20px,2.2vw,28px);display:grid;gap:12px;align-content:start}
.th-text h3{font-size:clamp(24px,2.3vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.th-text>small{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-tief)}
.th-text ul{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:10px}
.th-text li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;line-height:1.45;color:var(--tinte)}
.th-text li svg{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--bronze-hauch);stroke:var(--bronze-tief);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.th-text .btn{justify-content:center;margin-top:auto}
.th-fuss{font-size:13px;color:var(--tinte-2);text-align:center}
.direkt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--gap);align-items:stretch}
.noah-karte{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--tinte);color:var(--papier);min-height:520px;display:flex;align-items:flex-end}
.noah-karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.noah-karte::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,14,0) 35%,rgba(22,19,14,.9) 80%)}
.nk-text{position:relative;z-index:2;padding:clamp(22px,2.6vw,34px);display:grid;gap:12px;justify-items:start}
.nk-text .kicker{color:var(--bronze-hell)}
.nk-text h2{font-size:clamp(30px,3.2vw,44px);color:var(--papier)}
.nk-text p{color:#E8DFCF;font-size:16px;max-width:40ch}
.nk-text .textlink{color:var(--papier);min-height:44px;display:inline-flex;align-items:center;gap:8px}
.nk-tel{font-size:18px}
.direkt .formular{background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.08);align-content:start}
@media (max-width:1000px){.themen{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}.direkt-raster{grid-template-columns:1fr}.noah-karte{min-height:440px}}
/* Runde 9: Kachel im Format der Aufnahme (640 × 400 = 16:10) — mit 16:11 schnitt „cover" links und rechts Text ab */
.projekt .schirm{aspect-ratio:16/10}
/* Kontakt-Karten: Knopf in jeder Karte auf derselben Höhe */
.th-text{display:flex;flex-direction:column;gap:12px}
.th-text ul{flex:1}
/* Bauzeitplan-Karten: Titel und Text bündig mit „Woche 1" (alte .station-Einrückung greift hier nicht) */
.bauplan .st-text b,.bauplan .st-text p{padding:0}
.noah-karte::after{background:linear-gradient(180deg,rgba(22,19,14,0) 30%,rgba(22,19,14,.94) 72%)}
/* Zeitleiste am Handy: nur die Punkte, die Beschriftung tragen die Stationen darunter */
.zp-summe .nr{white-space:nowrap}
@media (max-width:760px){.zp-m b,.zp-m small{display:none}.zp-du .zp-spur{height:38px}.zp-summe div{align-items:center}}
/* Bildrahmen tragen die Kartenrundung oben selbst (Stil-Regel D: jedes Inhaltsbild mit Radius) */
.team-karte .tk-bild,.th-bild{border-radius:var(--radius) var(--radius) 0 0}

.zp-m b,.zp-m small,.th-fuss{letter-spacing:.01em}
.team-karte .team-initiale{border-radius:var(--radius) var(--radius) 0 0}
/* Rudolf: die Fläche ist der Bildrahmen selbst, das „R" liegt ohne eigenen Kasten darauf (Stil-Familie Karten) */
.team-karte .team-initiale{background:transparent;border-radius:0}
.team-karte .tk-bild:has(.team-initiale){background:var(--tinte-2)}
/* KI-Pille zugeklappt: Text darf nicht umbrechen, sonst wird die Pille am Handy eine hohe Kapsel */
.ki-marke:not(.auf) .ki-text{white-space:nowrap}
.ki-marke:not(.auf){gap:0}
/* ═══════ Runde 10: Zahlen-Bühne im Apple-Stil (27.09.2026) ═══════
   Die Bühne klebt drei Bildschirmhöhen lang; /static/main.js setzt --p (0–1) und data-szene. */
.zahlen-buehne{height:320svh;position:relative;background:var(--tinte);color:var(--papier)}
.zs-klebt{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}
.zs-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center;width:100%}
.zs-text{position:relative;min-height:clamp(300px,42vh,440px)}
.zs-text .kicker{color:var(--bronze-hell);position:absolute;top:0;left:0}
.zs-szene{position:absolute;left:0;right:0;top:44px;opacity:0;transform:translateY(40px) scale(.96);transform-origin:0 50%;transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.zahlen-buehne[data-szene="0"] .zs-szene[data-szene="0"],.zahlen-buehne[data-szene="1"] .zs-szene[data-szene="1"],.zahlen-buehne[data-szene="2"] .zs-szene[data-szene="2"]{opacity:1;transform:none}
.zs-nr{display:block;font-size:clamp(110px,15vw,240px);font-weight:800;letter-spacing:-.06em;line-height:.85;font-variant-numeric:tabular-nums}
.zs-szene[data-szene="1"] .zs-nr,.zs-szene[data-szene="2"] .zs-nr{color:var(--bronze-hell)}
.zs-szene b{display:block;font-size:clamp(22px,2.4vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:18px;max-width:18ch}
.zs-szene p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.55;color:#D9D2C4;margin-top:14px;max-width:40ch}
.zs-bild{position:relative;aspect-ratio:1/1;max-height:70svh;width:100%;display:grid;place-items:center}
.zs-feld{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(5px,.7vw,10px);width:100%;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.zs-feld i{aspect-ratio:1/1;border-radius:clamp(4px,.5vw,8px);background:rgba(250,247,241,.08);box-shadow:inset 0 0 0 1px rgba(250,247,241,.14);transition:background .25s var(--ease),transform .25s var(--ease)}
.zs-feld i.an{background:var(--papier);box-shadow:none}
.zs-feld i.eins{background:var(--bronze);transform:scale(1.06)}
.zs-sterne{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.2vw,16px);opacity:0;transform:scale(.9);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.zs-sterne svg{width:clamp(48px,7vw,104px);height:auto;fill:rgba(250,247,241,.12);transition:fill .25s var(--ease),transform .3s var(--ease)}
.zs-sterne svg.an{fill:var(--bronze-hell);transform:scale(1.08)}
.zahlen-buehne[data-szene="2"] .zs-feld{opacity:.08;transform:scale(.94)}
.zahlen-buehne[data-szene="2"] .zs-sterne{opacity:1;transform:none}
.zs-fort{position:absolute;left:50%;bottom:clamp(18px,3vh,32px);transform:translateX(-50%);display:flex;gap:8px}
.zs-fort i{width:28px;height:4px;border-radius:4px;background:rgba(250,247,241,.2);transition:background .3s var(--ease)}
.zahlen-buehne[data-szene="0"] .zs-fort i:nth-child(1),.zahlen-buehne[data-szene="1"] .zs-fort i:nth-child(2),.zahlen-buehne[data-szene="2"] .zs-fort i:nth-child(3){background:var(--bronze-hell)}
@media (max-width:760px){
  .zahlen-buehne{height:300svh}
  .zs-raster{grid-template-columns:1fr;gap:18px}
  .zs-text{min-height:250px;order:2}
  .zs-bild{order:1;max-width:320px;margin:0 auto;max-height:40svh}
  .zs-nr{font-size:96px}
  .zs-szene{top:34px}}
@media (prefers-reduced-motion:reduce){.zahlen-buehne{height:auto}.zs-klebt{position:relative;height:auto;padding:var(--sekt) 0}
  .zs-text{min-height:0}.zs-szene{position:relative;top:auto;opacity:1;transform:none;margin-top:40px}.zs-sterne{display:none}.zs-fort{display:none}}
/* Zahlen-Bühne: das Raster ist die .wrap selbst — Breite und Innenabstand von .wrap behalten */
.zs-klebt>.zs-raster{width:min(100% - 2*var(--rand),var(--weit));margin-inline:auto;padding-inline:0}
.zs-szene b{max-width:20ch}

/* KI-Hinweis schlicht (Runde 10): eine Pille, ein Satz, kein Symbol, kein Schließknopf */
.ki-marke{display:block;gap:0;padding:12px 18px;font-size:14px;font-weight:600;letter-spacing:.005em;line-height:1.35;color:var(--tinte);max-width:min(420px,calc(100vw - 24px))}

/* Cookie-Hinweis: kleiner Keks, der einmal wackelt, wenn der Hinweis erscheint (Runde 10) */
.cookie-hinweis p b.keks-zeile{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;margin:0}
.cookie-hinweis .keks{display:inline-block;font-size:20px;line-height:1;transform-origin:50% 60%}
.cookie-hinweis.da .keks{animation:keks-wackeln .9s cubic-bezier(.3,1.4,.5,1) .25s 1 both}
@keyframes keks-wackeln{0%{transform:rotate(0) scale(.6)}35%{transform:rotate(-18deg) scale(1.15)}60%{transform:rotate(12deg) scale(1)}80%{transform:rotate(-5deg)}100%{transform:rotate(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.cookie-hinweis.da .keks{animation:none}}
.zahlen-buehne{border-radius:var(--radius)}
/* Hero-Film dezent hinter dem Schlussblock der Startseite (Runde 10) */
.cta-film{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-film video{width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.6)}
.cta-film::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(22,19,14,.35),rgba(22,19,14,.85) 75%)}
.cta.mit-film>.wrap,.cta.mit-film .signet-wasser{position:relative;z-index:1}
.cta.mit-film .signet-wasser{position:absolute}
@media (prefers-reduced-motion:reduce){.cta-film video{display:none}}
/* Team Runde 10: vier kleinere Karten, die vierte ist die Initiativbewerbung */
.team-drei{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1120px;margin-inline:auto}
.team-karte .tk-name b{font-size:clamp(20px,1.9vw,26px)}
.team-karte p{font-size:15px}
a.team-karte{color:inherit;text-decoration:none}
.team-du .tk-knopf{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--tinte)}
.team-du .tk-knopf svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--schnell)}
.team-du:hover .tk-knopf svg{transform:translateX(4px)}
.team-du:active{transform:scale(.98)}
@media (max-width:1000px){.team-drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.team-karte{flex:0 0 68%}}
/* Leiste: Knopf mit Kalender-Icon, Leistungsmenü mit „Gehört dazu" */
.nav-cta{display:inline-flex;align-items:center;gap:8px}
.nav-cta svg,#mobilmenu .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.drop-trenner{display:block;padding:12px 12px 4px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);border-top:1px solid var(--linie);margin-top:6px}
.drop a.klein{grid-template-columns:32px 1fr;min-height:44px;padding:6px 12px}
.drop a.klein .ic{width:32px;height:32px;border-radius:8px;background:var(--papier-2)}
.drop a.klein .ic svg{width:17px;height:17px;stroke:var(--tinte-2)}
.drop a.klein b{font-size:14.5px;font-weight:600}
@media (max-width:1180px){.nav-cta{padding-inline:16px;font-size:14.5px}}
/* Runde 10: Fuß — kleines „i" statt Kasten */
.fuss .ki-hinweis{display:flex;align-items:center;gap:10px;margin:32px 0 0;padding:0;background:none;box-shadow:none;font-size:13.5px;color:#C9C0AE;letter-spacing:.01em}
.fuss .ki-i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;display:grid;place-items:center;font:700 12px/1 Georgia,serif;font-style:italic;flex:none}
/* Ablauf: Aufwand nur noch als leise Zeile */
.bauplan .st-aufwand{display:block;margin-top:auto;padding-top:10px;border-top:0;font-size:13.5px;font-weight:600;color:var(--tinte-2);letter-spacing:.01em}
/* Zahlen-Bühne: Fortschritt = die drei Säulen des Logos, darunter der Stand der Messung */
.zs-fuss{position:absolute;left:0;right:0;bottom:clamp(16px,3vh,30px);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.zs-fuss .zs-fort{position:static;transform:none;display:block;width:34px;height:auto}
.zs-fort path{fill:rgba(250,247,241,.16);transition:fill .3s var(--ease)}
.zahlen-buehne[data-szene="0"] .zs-fort .s0,.zahlen-buehne[data-szene="1"] .zs-fort .s0,.zahlen-buehne[data-szene="1"] .zs-fort .s1,.zahlen-buehne[data-szene="2"] .zs-fort path{fill:var(--bronze-hell)}
.zs-fuss small{font-size:13px;color:#A9A091;letter-spacing:.01em;text-align:center;padding:0 16px}
@media (prefers-reduced-motion:reduce){.zs-fuss{position:static;margin-top:30px}.zs-fort path{fill:var(--bronze-hell)}}
/* ═══════ Runde 10: „Erkennst du dich wieder?" — Reiter-Bühne (Prinzip SHK v3) ═══════ */
.lg-buehne{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3vw,40px);align-items:stretch}
.lg-tabs{display:flex;flex-direction:column;gap:10px}
.lg-tab{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 22px 10px 12px;border-radius:var(--pille);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.08);border:0;font:inherit;color:var(--tinte);text-align:left;cursor:pointer;overflow:hidden;transition:transform var(--schnell),background var(--schnell),color var(--schnell)}
.lg-tab:hover{transform:translateX(4px)}
.lg-tab:active{transform:scale(.98);transition-duration:.1s}
.lg-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--papier-2);font-size:20px;flex:none;transition:background var(--schnell)}
.lg-tab b{font-size:16px;letter-spacing:-.01em;line-height:1.25}
.lg-tab .lauf{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--bronze);transform:scaleX(0);transform-origin:left}
.lg-tab.an{background:var(--tinte);color:var(--papier);box-shadow:none}
.lg-tab.an .lg-ic{background:rgba(250,247,241,.12)}
.lg-tab.an .lauf{animation:lg-lauf var(--takt,6s) linear forwards}
.lg-buehne.steht .lg-tab.an .lauf{animation:none;transform:scaleX(1)}
@keyframes lg-lauf{to{transform:scaleX(1)}}
.lg-panels{position:relative;min-width:0}
.lg-panel{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.08);height:100%}
.lg-panel[hidden]{display:none}
.lg-seite{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.2vw,28px);min-height:380px}
.lg-seite.heute{background:#fff}
.lg-seite.mit{background:var(--tinte);color:var(--papier)}
.lg-etikett{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lg-etikett i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.heute .lg-etikett{color:var(--tinte-2)} .heute .lg-etikett i{background:#F6E3E0;color:#B23A2A}
.mit .lg-etikett{color:var(--bronze-hell)} .mit .lg-etikett i{background:rgba(229,179,110,.18);color:var(--bronze-hell)}
.lg-seite p{margin-top:auto;font-size:clamp(17px,1.5vw,19px);line-height:1.4;font-weight:600;letter-spacing:-.01em}
.lg-chips{display:grid;gap:8px}
.lg-chip{display:grid;gap:2px;padding:11px 14px;border-radius:14px;opacity:0;transform:translateY(10px)}
.lg-chip b{font-size:15px;font-weight:700;letter-spacing:-.005em}
.lg-chip small{font-size:13px;letter-spacing:.01em}
.lg-chip.schlecht{background:var(--papier-2);color:var(--tinte-2)}
.lg-chip.schlecht b{text-decoration:line-through;text-decoration-color:rgba(178,58,42,.6);text-decoration-thickness:2px}
.lg-chip.gut{background:rgba(250,247,241,.08);box-shadow:inset 3px 0 0 var(--bronze);color:var(--papier)}
.lg-chip.gut small{color:#D9D2C4}
.lg-panel.an .lg-chip{animation:lg-chip .45s var(--ease) calc(.15s + var(--i) * .12s) forwards}
.lg-panel.an .mit .lg-chip{animation-delay:calc(.45s + var(--i) * .14s)}
@keyframes lg-chip{to{opacity:1;transform:none}}
.lg-browser{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.1),0 14px 30px -18px rgba(22,19,14,.4);background:#fff}
.mit .lg-browser{box-shadow:0 0 0 1px rgba(250,247,241,.14),0 18px 36px -18px rgba(0,0,0,.6)}
.lg-leiste{display:flex;gap:5px;padding:7px 10px;background:var(--papier-2)}
.lg-leiste i{width:8px;height:8px;border-radius:50%;background:var(--papier-3)}
.lg-browser img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.heute .lg-browser img{filter:saturate(.7)}
@media (max-width:1000px){.lg-buehne{grid-template-columns:1fr}.lg-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--rand) * -1);padding:2px var(--rand)}.lg-tabs::-webkit-scrollbar{display:none}.lg-tab{flex:0 0 auto;min-height:56px}}
@media (max-width:700px){.lg-panel{grid-template-columns:1fr}.lg-seite{min-height:0}}
@media (prefers-reduced-motion:reduce){.lg-chip{opacity:1;transform:none;animation:none!important}.lg-tab .lauf{display:none}}
/* Zahlen-Bühne: Raster passt in die Höhe (Platz für Logo-Zeile unten) */
.zs-bild{aspect-ratio:auto;max-height:none}
.zs-feld{width:min(100%,58svh);margin-inline:auto}
.zs-klebt{padding-bottom:clamp(70px,11vh,110px)}
@media (max-width:760px){.zs-feld{width:min(100%,36svh)}.zs-klebt{padding-bottom:84px}}
/* Stil-Check Runde 10: Browser-Rahmen mit Hausrundung, „Heute"-Hälfte ohne eigene Fläche, Menüpunkte ≥ 44 px */
.lg-browser{border-radius:var(--radius)}
.lg-panel{background:#fff}
.lg-seite.heute{background:transparent}
.drop a.klein{min-height:46px;box-sizing:border-box}
/* ═══════ Runde 11: „Gute Arbeit reicht nicht mehr …" — Wege mit echtem Fall + Vorher/Nachher sichtbar ═══════ */
.probleme .weg{grid-template-rows:auto auto auto 1fr}
.weg-fall{align-self:end;margin-top:6px;padding:12px 14px;border-radius:var(--radius-klein);background:var(--papier-2);display:grid;gap:4px}
.weg-fall small{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-3)}
.weg-fall q{font-size:15px;font-weight:600;line-height:1.4;color:var(--tinte);quotes:"„" "“"}
.weg.gestempelt .weg-fall{background:#F9ECE9}
.fall-streifen{margin-top:var(--gap);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,2vw,24px);align-items:stretch}
.fs-seite{border-radius:var(--radius);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:12px}
.fs-seite.vorher{background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.08)}
.fs-seite.nachher{background:var(--tinte);color:var(--papier)}
.fs-etikett{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3)}
.nachher .fs-etikett{color:var(--bronze-hell)}
.fs-seite>b{font-size:clamp(18px,1.7vw,22px);line-height:1.25;letter-spacing:-.015em}
.fs-seite q{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;quotes:"„" "“";margin-top:auto}
.fs-seite small{font-size:14px;color:var(--tinte-2)}
.fs-seite .textlink{margin-top:auto;color:var(--papier)}
.fs-punkte{display:grid;grid-template-columns:repeat(13,1fr);gap:6px}
.fs-punkte i{aspect-ratio:3/4;border-radius:4px;clip-path:polygon(0 26%,100% 0,100% 100%,0 100%)}
.fs-punkte.leer i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linie)}
.fs-punkte.voll i{background:rgba(250,247,241,.1)}
.fall-streifen.dran .fs-punkte.voll i{animation:fs-an .35s var(--ease) calc(.25s + var(--i) * .06s) forwards}
@keyframes fs-an{to{background:var(--bronze-hell)}}
.fs-pfeil{display:grid;place-items:center}
.fs-pfeil svg{width:28px;height:28px;stroke:var(--bronze);fill:none;stroke-width:2.2}
@media (max-width:860px){.fall-streifen{grid-template-columns:1fr}.fs-pfeil svg{transform:rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.fs-punkte.voll i{background:var(--bronze-hell);animation:none}}
.fs-punkte.leer i{box-shadow:none;background:var(--papier-3)}
/* Runde 11: Zahlen-Bühne im Logo-Look — jedes Kästchen ist eine Säule mit dem Dach des Signets, das Signet steht groß im Hintergrund */
.zs-feld{grid-template-columns:repeat(12,1fr);gap:clamp(4px,.55vw,8px)}
.zs-feld i{aspect-ratio:3/4;border-radius:3px;clip-path:polygon(0 26%,100% 0,100% 100%,0 100%);box-shadow:none;background:rgba(250,247,241,.1)}
.zs-feld i.eins{transform:none}
.zs-wasser{position:absolute;left:-6%;bottom:-10%;width:min(46vw,620px);height:auto;opacity:.05;pointer-events:none}
.zs-wasser path{fill:var(--papier)}
.zs-klebt{position:sticky}
.zs-text .kicker,.zs-nr{position:relative}
/* Runde 11: Team-Köpfe minimal kleiner */
.team-drei{max-width:1040px}
/* Runde 11: Websites-Seite — Vorher/Nachher in Reihen (eigene Bauform, nicht das Arbeiten-Raster) */
.vn-liste{display:grid;gap:var(--gap);margin-top:clamp(26px,3vw,40px)}
.vn-reihe{display:grid;grid-template-columns:200px minmax(0,1fr) auto minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:center;padding:clamp(16px,2vw,22px);border-radius:var(--radius);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.07);transition:transform var(--schnell),box-shadow var(--schnell)}
.vn-reihe:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(22,19,14,.1),0 26px 50px -30px rgba(22,19,14,.4)}
.vn-kopf{display:grid;gap:4px}
.vn-kopf small{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-tief)}
.vn-kopf b{font-size:clamp(18px,1.6vw,21px);letter-spacing:-.015em;line-height:1.2}
.vn-bild{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.08)}
.vn-bild img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.vn-bild.alt img{filter:grayscale(.35)}
.vn-bild figcaption{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:var(--pille);font-size:13px;font-weight:700;letter-spacing:.02em;background:rgba(22,19,14,.78);color:var(--papier)}
.vn-bild.neu figcaption{background:var(--bronze);color:var(--tinte)}
.vn-pfeil svg{width:26px;height:26px;stroke:var(--bronze);fill:none;stroke-width:2.2}
@media (max-width:900px){.vn-reihe{grid-template-columns:1fr 1fr;align-items:start}.vn-kopf{grid-column:1/-1}.vn-pfeil{display:none}}
/* ═══════ Runde 11: Anfrage in drei Schritten ═══════ */
.sf-form{background:var(--papier);color:var(--tinte);border-radius:var(--radius);padding:clamp(20px,2.4vw,30px);display:grid;gap:16px;max-width:640px;width:100%;margin:0 auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.sf-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sf-kopf b{font-size:17px}
.sf-stand{font-size:13px;font-weight:600;color:var(--tinte-2);letter-spacing:.01em}
.sf-balken{height:4px;border-radius:4px;background:var(--papier-3);overflow:hidden}
.sf-balken i{display:block;height:100%;background:var(--bronze);transform:scaleX(.33);transform-origin:left;transition:transform .35s var(--ease)}
.sf-schritt{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.sf-schritt.an{animation:sf-rein .35s var(--ease)}
@keyframes sf-rein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.sf-frage{font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.15;padding:0}
.sf-zeile{display:flex;gap:10px}
.sf-zeile input{flex:1;min-width:0;font:inherit;font-size:17px;padding:14px 16px;min-height:54px;border-radius:var(--radius-klein);border:1.5px solid var(--linie);background:#fff;color:var(--tinte)}
.sf-zeile input:focus{outline:none;border-color:var(--bronze)}
.sf-zeile input.fehlt,.sf-wahl.fehlt{border-color:#B23A2A}
.sf-zeile .btn{flex:none;min-height:54px}
.sf-wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1.5px solid transparent;border-radius:var(--radius-klein)}
.sf-chip{position:relative;cursor:pointer}
.sf-chip input{position:absolute;opacity:0;pointer-events:none}
.sf-chip span{display:flex;align-items:center;gap:8px;min-height:54px;padding:12px 16px;border-radius:var(--radius-klein);background:#fff;box-shadow:inset 0 0 0 1.5px var(--linie);font-weight:600;font-size:15.5px;transition:background var(--schnell),box-shadow var(--schnell),color var(--schnell)}
.sf-chip:hover span{box-shadow:inset 0 0 0 1.5px var(--tinte-3)}
.sf-chip:active span{transform:scale(.98)}
.sf-chip input:checked+span{background:var(--tinte);color:var(--papier);box-shadow:none}
.sf-chip input:focus-visible+span{outline:2px solid var(--bronze);outline-offset:2px}
.sf-senden{justify-content:center}
.sf-fertig{display:grid;gap:6px;padding:8px 0}
.sf-fertig b{font-size:clamp(20px,2vw,24px);letter-spacing:-.02em}
.sf-fertig span{color:var(--tinte-2)}
.sf-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sf-fuss small{font-size:13px;color:var(--tinte-2);letter-spacing:.01em;margin-left:auto}
.sf-zurueck{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--tinte-2);cursor:pointer;padding:0}
.sf-zurueck svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transform:rotate(180deg)}
.sf-zurueck:active{opacity:.6}
@media (max-width:560px){.sf-zeile{flex-direction:column}.sf-wahl{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sf-schritt.an{animation:none}.sf-balken i{transition:none}}
/* Schlussblock: kleiner, Film deutlicher, Kontaktzeile in einer Linie */
.cta.schlicht{padding:clamp(64px,7vw,104px) 0}
.cta-film video{opacity:.45;filter:saturate(.75)}
.cta-film::after{background:radial-gradient(ellipse at 50% 40%,rgba(22,19,14,.2),rgba(22,19,14,.78) 80%)}
.cta.schlicht .kontakt-zeile{align-items:center;gap:6px 28px}
.cta.schlicht .kontakt-zeile>*{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:#E8DFCF}
.cta.schlicht .kontakt-zeile a{color:var(--papier)}
/* Runde 11: Kontakt — Noah-Karte: Bild oben, Text darunter (Knopf nie über dem Foto) */
.noah-karte{display:grid;grid-template-rows:auto 1fr;min-height:0;align-items:stretch}
.noah-karte img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 16%}
.noah-karte::after{content:none}
.nk-text{padding:clamp(22px,2.4vw,30px);align-content:start}
.direkt-raster{align-items:start}
.direkt .sf-form{box-shadow:0 0 0 1px rgba(22,19,14,.08)}
/* Runde 11: Fall-Streifen — Zahl unter den Punkten; Kontakt — „Was danach passiert" unter dem Formular */
.fs-zahl{display:block;margin-top:10px;font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--tinte-60,#6b645a)}
.fs-seite.nachher .fs-zahl{color:var(--bronze-hell)}
.direkt-rechts{display:grid;gap:var(--gap);align-content:start}
.danach{list-style:none;margin:0;padding:clamp(22px,2.4vw,30px);border-radius:var(--radius);background:var(--papier-2,#f1ece2);display:grid;gap:18px}
.danach li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.danach b{width:44px;height:44px;border-radius:50%;background:var(--tinte);color:var(--papier);display:grid;place-items:center;font:800 17px/1 var(--display,inherit)}
.danach span{font-size:16px;line-height:1.5;color:var(--tinte-80,#3d372e)}
.danach strong{display:block;font-size:17px;color:var(--tinte);margin-bottom:2px}
@media (max-width:1000px){.noah-karte{min-height:0}}
/* Runde 11 Prüfer: Vorher/Nachher als offene Zeilen mit Trennlinie (keine dritte Kartenreihe in Folge),
   Zitat-Kasten im Karten-Radius, Noah-Foto oben rund wie die übrigen Kartenbilder, Schlussblock im 8er-Raster */
.vn-liste{gap:0}
.vn-reihe,.vn-reihe:hover{background:transparent;box-shadow:none;border-radius:0;transform:none;padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--linie)}
.vn-reihe:last-child{border-bottom:1px solid var(--linie)}
.vn-reihe:hover .vn-bild.neu{box-shadow:0 0 0 1px rgba(22,19,14,.1),0 22px 44px -26px rgba(22,19,14,.45)}
.vn-bild{transition:box-shadow .3s var(--ease)}
.weg-fall{border-radius:var(--radius)}
.noah-karte img{border-radius:var(--radius) var(--radius) 0 0}
.cta.schlicht{padding:clamp(64px,7vw,96px) 0}
.vn-reihe,.vn-reihe:last-child{border:0;background:linear-gradient(var(--linie),var(--linie)) top/100% 1px no-repeat}
.vn-liste{padding-bottom:1px;background:linear-gradient(var(--linie),var(--linie)) bottom/100% 1px no-repeat}
/* Runde 12: „Gute Arbeit reicht nicht mehr" als Reiter-Bühne (wie SHK „Erkennst du dich wieder?") */
.probleme .lg-seite{min-height:460px}
.probleme .lg-seite p{margin-top:0;font-size:clamp(16px,1.35vw,18px)}
.probleme .lg-seite .weg-fall{margin-top:auto;padding:12px 16px;border-radius:var(--radius);background:#F9ECE9;display:grid;gap:4px}
.probleme .weg-fall small{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A3B2E}
.probleme .weg-fall q{font-size:15px;font-weight:700;line-height:1.35;quotes:"„" "“"}
.lg-mock{border-radius:var(--radius);background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.1);overflow:hidden}
.lg-mock-kopf{padding:10px 16px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--tinte-2);background:var(--papier-2)}
.lg-mock ul{list-style:none;margin:0;padding:6px 8px 8px;display:grid;gap:4px}
.lg-mock li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:9px 10px;border-radius:12px;opacity:0;transform:translateY(8px)}
.lg-mock li b{font-size:14px;font-weight:600;color:var(--tinte-2)}
.lg-mock li small{grid-column:1;font-size:13px;color:#6f675b}
.lg-mock li em{grid-row:1/3;grid-column:2;font-style:normal;font-size:13px;font-weight:700;color:#B23A2A;background:#F6E3E0;padding:4px 10px;border-radius:var(--pille)}
.lg-mock li.dein{background:#fff;box-shadow:0 0 0 1px rgba(178,58,42,.25)}
.lg-mock li.dein b{color:var(--tinte)}
.lg-panel.an .lg-mock li{animation:lg-chip .45s var(--ease) calc(.15s + var(--i) * .1s) forwards}
.lg-google{background:#fff}
.lg-suche{display:flex;align-items:center;gap:10px;margin:12px;padding:11px 16px;border-radius:var(--pille);box-shadow:0 0 0 1px rgba(22,19,14,.14);font-size:15px;color:var(--tinte)}
.lg-suche svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.lg-treffer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 16px}
.lg-treffer b{display:block;font-size:15px;color:#1a0dab}
.lg-treffer small{font-size:13px;color:#4d5156}
.lg-treffer.blass{opacity:.45}
.lg-treffer.blass b{color:#4d5156}
.lg-platz{padding:5px 11px;border-radius:var(--pille);background:var(--bronze);color:var(--tinte);font-size:13px;font-weight:800}
.lg-treffer:not(.blass){opacity:0;transform:translateY(8px)}
.lg-panel.an .lg-treffer:not(.blass){animation:lg-chip .5s var(--ease) .55s forwards}
.lg-foto{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}
.lg-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg-foto figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:2px;padding:10px 14px;border-radius:16px;background:rgba(22,19,14,.78);backdrop-filter:blur(6px);color:var(--papier);opacity:0;transform:translateY(8px)}
.lg-foto figcaption b{font-size:17px;color:var(--bronze-hell);letter-spacing:-.01em}
.lg-foto figcaption small{font-size:13px;color:#D9D2C4}
.lg-panel.an .lg-foto figcaption{animation:lg-chip .5s var(--ease) .5s forwards}
@media (prefers-reduced-motion:reduce){.lg-mock li,.lg-treffer,.lg-foto figcaption{opacity:1!important;transform:none!important;animation:none!important}}
@media (max-width:700px){.probleme .lg-seite{min-height:0}}
.lg-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.probleme .lg-seite .weg-fall{align-self:stretch;margin-inline:0}
.probleme .lg-panel{min-height:620px}
@media (max-width:1000px){.probleme .lg-panel{min-height:0}}
/* Runde 12: keine schwebenden schwarzen Kacheln mehr. Noah: „da ist irgendwie eine Pause, und dann kommt noch so eine
   schwarze Kachel … das sieht ein bisschen komisch aus". Dunkle Flächen laufen jetzt von Rand zu Rand, ohne Rundung;
   die Logos schließen ohne Lücke an den Hero an (eine dunkle Fläche statt Hero + Pause + Kasten). */
.hero{border-radius:0}
.logoband{margin:0;border-radius:0;padding-top:clamp(28px,3.5vw,44px)}
.band,.cta,.zahlen-buehne{margin-inline:0;border-radius:0}
.probleme .lg-seite .weg-fall{margin-top:4px}
@media (max-width:720px){.band,.cta,.logoband{margin-inline:0;border-radius:0}.hero{border-radius:0}}
/* Runde 12: Schlussblock — Text auf dem Film lesbar, Telefon-Knopf hebt sich ab, Hover nie durchsichtig */
.cta-film::after{background:linear-gradient(180deg,rgba(22,19,14,.82) 0%,rgba(22,19,14,.62) 45%,rgba(22,19,14,.9) 100%)}
.cta h2,.cta .kicker{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.cta .lead{color:rgba(250,247,241,.92)}
.cta .kontakt-zeile,.cta .kontakt-zeile a{color:var(--papier)}
.cta .btn-umriss{background:var(--papier);color:var(--tinte);box-shadow:none}
.cta .btn-umriss:hover,.cta .btn-umriss:focus-visible{background:var(--bronze-hell);color:var(--tinte);box-shadow:none}
.cta .btn-bronze:hover,.cta .btn-bronze:focus-visible{background:var(--bronze-hell);color:var(--tinte)}
/* Runde 12: Schritt 2 mit zwei Feldern — Telefonnummer und/oder E-Mail */
.sf-hilfe{font-size:15px;color:var(--tinte-2);margin:-4px 0 0}
.sf-zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sf-feld{display:grid;gap:6px}
.sf-feld span{font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--tinte)}
.sf-feld input{font:inherit;font-size:17px;padding:14px 16px;min-height:54px;border-radius:var(--radius-klein);border:1.5px solid var(--linie);background:#fff;color:var(--tinte);width:100%;min-width:0}
.sf-feld input:focus{outline:none;border-color:var(--bronze)}
.sf-feld input.fehlt{border-color:#B23A2A}
.sf-fehler{font-size:14px;font-weight:600;color:#B23A2A;margin:0}
.sf-schritt[data-n="2"] > .btn{justify-self:start;min-height:54px}
.sf-fuss small{text-align:right;max-width:44ch}
@media (max-width:560px){.sf-zwei{grid-template-columns:1fr}.sf-fuss small{text-align:left;margin-left:0}}
/* Runde 12: Team — eine kurze Zeile je Person, alle Karten gleich hoch, Namenszeile einzeilig */
.team-karte p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-karte .tk-name b{white-space:nowrap}
.h2-vor{display:block;font-weight:500;font-size:.55em;letter-spacing:-.01em;color:var(--tinte-2);margin-bottom:.15em}
/* Runde 12: Instagram im Fuß links unter dem Text, mit echtem Logo statt Kamera */
.insta-f{display:inline-flex;align-items:center;gap:10px;margin-top:14px;min-height:44px;font-weight:600;color:var(--papier)}
.insta-f svg,.textlink svg.ig{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.insta-f:hover{color:var(--bronze-hell)}
/* KI-Hinweis klopft an */
.ki-marke.klopft{animation:ki-klopf .9s var(--ease) .15s 1}
@keyframes ki-klopf{0%,100%{transform:none}25%{transform:translateX(5px) rotate(1.5deg)}50%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.ki-marke.klopft{animation:none}}
/* Runde 12: Google-Treffer mit Logo und durchlaufender Kundenseite */
.treffer .t{grid-template-columns:auto auto minmax(0,1fr) auto}
.t-logo{display:grid;place-items:center;width:112px;height:56px;padding:8px 12px;border-radius:14px;background:var(--tinte)}
.t-logo img{max-width:100%;max-height:100%;object-fit:contain}
.t-vorschau{display:block;width:240px;height:150px;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.12),0 12px 26px -16px rgba(22,19,14,.45);background:#fff}
.t-vorschau img{display:block;width:100%;height:auto;animation:t-lauf 4.6s cubic-bezier(.45,0,.2,1) .7s forwards}
@keyframes t-lauf{to{transform:translateY(var(--weg))}}
@media (max-width:760px){.treffer .t{grid-template-columns:auto minmax(0,1fr);row-gap:12px}.t-logo{grid-column:2;grid-row:1;justify-self:end}.treffer .t>div{grid-column:1/-1}.t-vorschau{grid-column:1/-1;width:100%;height:180px}}
@media (prefers-reduced-motion:reduce){.t-vorschau img{animation:none}}
/* Runde 12: kein heller Streifen zwischen Schlussblock und Fuß; Stimmen-Überschrift in einer Zeile */
.cta + .ki-marke + .fuss,.cta ~ .fuss,main + .ki-marke + .fuss{margin-top:0}
.stimmen .kopfzeile{grid-template-columns:minmax(0,1fr)}
.stimmen .kopfzeile h2{max-width:none}
.stimmen .kopfzeile{max-width:none}
.noah-karte img{object-position:50% 35%}
.hero-klein{border-radius:0}
@media (max-width:720px){.hero-klein{border-radius:0}}
.sf-schritt[data-n="2"] .sf-hilfe{margin-top:2px}.sf-schritt legend.sf-frage{margin-bottom:6px}
.logoband{padding-top:clamp(24px,3vw,40px)}
.fuss{margin-top:0}
/* Runde 12: am Handy stehen die Suchbegriffe in EINER wischbaren Reihe statt neun Zeilen */
@media (max-width:760px){.begriffe{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--rand) * -1);padding:4px var(--rand) 8px;scroll-snap-type:x proximity}.begriffe::-webkit-scrollbar{display:none}.begriffe button{flex:none;scroll-snap-align:start}}
@media (max-width:760px){.google .buehne .begriffe{justify-content:flex-start}}
@media (max-width:760px){.google .buehne .begriffe{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}}
/* Runde 13: Videos laufen weich in die schwarze Logo-Fläche aus — keine sichtbare Kante mehr */
.saeule::after{background:linear-gradient(180deg,rgba(22,19,14,.1) 0%,rgba(22,19,14,.25) 48%,rgba(22,19,14,.82) 80%,var(--tinte) 100%)}
.hero-text{background:linear-gradient(180deg,transparent,rgba(22,19,14,.55) 40%,rgba(22,19,14,.92) 80%,var(--tinte) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(22,19,14,0),var(--tinte))}
/* Zahlen-Bühne: 66 Häuser in 11 Spalten, alle werden voll */
.zs-feld{grid-template-columns:repeat(11,1fr)}
/* Runde 13: Grafiken in „Gute Arbeit reicht nicht mehr" (wie SHK „Erkennst du dich wieder?") */
.probleme .vb{display:block;width:100%;height:auto;min-height:150px;border-radius:var(--radius);background:var(--papier-2);padding:14px 10px}
.probleme .mit .vb{background:rgba(250,247,241,.06)}
.probleme .vb text{font:600 11px/1 inherit;fill:#6f675b}
.probleme .mit .vb text{fill:#D9D2C4}
.probleme .vb text.rot{fill:#B23A2A;font-weight:800;font-size:12px}
.probleme .vb text.gruen{fill:#2E6B3A;font-weight:800;font-size:12px}
.probleme .vb-unter{margin:-6px 0 0;font-size:13px!important;font-weight:600!important;color:var(--bronze-hell);letter-spacing:.01em}
/* Branchenbuch */
.vb .jr rect{fill:#E7C7C0;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.lg-panel.an .vb .jr rect{animation:vb-hoch .35s var(--ease) calc(.1s + var(--i) * .05s) forwards}
.vb .kd{fill:#2E6B3A;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.lg-panel.an .vb .kd{animation:vb-pop .4s var(--ease) calc(1.3s + var(--i) * .35s) forwards}
/* Google-Rangliste: dein Balken fährt nach oben */
.vb .rg rect{fill:rgba(250,247,241,.14)}
.vb .rg text{fill:#D9D2C4;font-weight:800}
.vb .rg.du rect{fill:var(--bronze);transform-box:fill-box;transform-origin:left;transform:scaleX(0)}
.lg-panel.an .vb .rg.du rect{animation:vb-breit .6s var(--ease) .4s forwards}
.vb .du-t{fill:var(--tinte)!important;font-weight:800!important;font-size:12px!important;opacity:0}
.lg-panel.an .vb .du-t{animation:vb-auf .3s linear 1s forwards}
/* Jobportal */
.vb .jk{fill:#E3DED3;opacity:0}
.vb .jk.deine{fill:#fff;stroke:#B23A2A;stroke-width:2}
.lg-panel.an .vb .jk{animation:vb-auf .25s linear calc(.05s + var(--i) * .03s) forwards}
/* Köpfe / Anfragen füllen sich */
.vb-koepfe{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:16px!important;min-height:0!important}
.vb-koepfe i{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:rgba(250,247,241,.08);color:rgba(250,247,241,.25)}
.vb-koepfe i svg{width:58%;height:58%;fill:currentColor}
.vb-koepfe.anfragen i svg{fill:none;stroke:currentColor;stroke-width:2}
.lg-panel.an .vb-koepfe i{animation:vb-voll .3s var(--ease) calc(.2s + var(--i) * .07s) forwards}
/* Agentur: Lastschriften */
.vb .lz{fill:#E7C7C0;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.lg-panel.an .vb .lz{animation:vb-hoch .35s var(--ease) calc(.1s + var(--i) * .07s) forwards}
.vb .flach{stroke:#6f675b;stroke-width:2;stroke-dasharray:4 5}
/* Browser mit Marke */
.probleme .lg-browser{position:relative}
.lg-marke{position:absolute;right:12px;bottom:12px;padding:7px 13px;border-radius:var(--pille);font-size:13px;font-weight:800;background:#F6E3E0;color:#B23A2A;opacity:0;transform:translateY(8px)}
.lg-marke.gut{background:var(--bronze);color:var(--tinte)}
.lg-panel.an .lg-marke{animation:lg-chip .45s var(--ease) .9s forwards}
@keyframes vb-hoch{to{transform:scaleY(1)}}
@keyframes vb-breit{to{transform:scaleX(1)}}
@keyframes vb-auf{to{opacity:1}}
@keyframes vb-pop{60%{transform:scale(1.35);opacity:1}to{transform:scale(1);opacity:1}}
@keyframes vb-voll{to{background:var(--bronze);color:var(--tinte)}}
@media (prefers-reduced-motion:reduce){.probleme .vb *,.vb-koepfe i,.lg-marke{animation:none!important;opacity:1!important;transform:none!important}.vb-koepfe i{background:var(--bronze);color:var(--tinte)}}
.probleme .vb.vb-koepfe{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:16px}
.probleme .vb.vb-koepfe.anfragen{grid-template-columns:repeat(7,1fr)}
.probleme .vb text{font-size:11px;font-weight:600;font-family:inherit}
.probleme .vb text.rot,.probleme .vb text.gruen{font-size:12px;font-weight:800}
.probleme .vb .rg text{font-size:12px;font-weight:800}
/* Runde 13: Google-Treffer ohne durchlaufende Seite, farbiges Logo rechts auf weißem Grund */
.treffer .t{grid-template-columns:auto minmax(0,1fr) auto}
.t-logo{width:150px;height:64px;background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.1);padding:10px 16px;border-radius:16px}
@media (max-width:760px){.treffer .t{grid-template-columns:auto minmax(0,1fr)}.t-logo{grid-column:1/-1;grid-row:auto;justify-self:start;width:140px;height:56px}.treffer .t>div{grid-column:2}}
/* Runde 13: Kundenlogos in den Stimmen farbig auf weißem Grund — mehr Farbe in der unteren Seitenhälfte */
.stimme .kreis.logo{background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.12)}
.stimme .kreis.logo img{filter:none}
/* Runde 13: „Was ist in deinem Umkreis drin?" — Collage links, drei Wege rechts (wie SHK) */
.uk-karte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);align-items:stretch}
.uk-bild{margin:0;display:flex;flex-direction:column;gap:12px}
.uk-bild figcaption{font-size:14px;color:var(--tinte-2);letter-spacing:.01em}
.collage{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:0}
.collage img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.collage img.raus{opacity:0;transform:scale(.94)}
.uk-text{display:flex;flex-direction:column;justify-content:center;gap:18px}
.uk-text h2{margin:0}
.uk-satz{font-size:clamp(17px,1.4vw,19px);color:var(--tinte-2);margin:0}
.uk-wahlen{display:grid;gap:10px;margin-top:6px}
.uk-wahl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 20px;min-height:72px;border-radius:var(--radius);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.1);color:var(--tinte);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.uk-wahl:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--bronze),0 16px 30px -20px rgba(22,19,14,.45)}
.uk-wahl:active{transform:scale(.99);transition-duration:.1s}
.uk-wahl .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bronze-hauch);color:var(--bronze-tief)}
.uk-wahl .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uk-wahl b{display:block;font-size:17px;letter-spacing:-.01em}
.uk-wahl small{display:block;font-size:14px;color:var(--tinte-2);margin-top:2px}
.uk-pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.uk-zeile{display:flex;flex-wrap:wrap;gap:10px 24px;margin:6px 0 0}
.uk-zeile a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--tinte)}
.uk-zeile svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
@media (max-width:900px){.uk-karte{grid-template-columns:1fr}.collage img:nth-child(n+13){display:none}}
/* Kontakt: rechte Spalte wächst mit der Collage auf die Höhe der Noah-Karte */
.direkt-raster{align-items:stretch}
.direkt-rechts{display:flex;flex-direction:column;gap:var(--gap)}
.collage.klein{grid-template-rows:repeat(3,minmax(0,1fr));flex:1;min-height:180px}
.collage.klein img{aspect-ratio:auto;height:100%}
@media (max-width:1000px){.collage.klein{flex:none;grid-template-rows:none}.collage.klein img{aspect-ratio:1/1;height:auto}}
@media (prefers-reduced-motion:reduce){.collage img{transition:none}}
/* Runde 13: WhatsApp-Hinweis unten rechts */
.wa-marke{position:fixed;right:16px;bottom:16px;z-index:86;display:flex;align-items:center;gap:4px;padding:6px 6px 6px 8px;border-radius:var(--pille);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.08),0 18px 40px -18px rgba(22,19,14,.45);opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.wa-marke.da{opacity:1;transform:none;pointer-events:auto}
.wa-marke a{display:flex;align-items:center;gap:12px;padding:4px 10px 4px 4px;min-height:48px;color:var(--tinte)}
.wa-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;flex:none}
.wa-ic svg{width:24px;height:24px;fill:currentColor}
.wa-marke b{display:block;font-size:15px}
.wa-marke small{display:block;font-size:13px;color:var(--tinte-2)}
.wa-zu{width:44px;height:44px;border-radius:50%;border:0;background:transparent;font-size:22px;line-height:1;color:var(--tinte-2);cursor:pointer}
.wa-zu:hover{background:var(--papier-2)}
.wa-marke a:active,.wa-zu:active{transform:scale(.97);transition-duration:.1s}
@media (max-width:560px){.wa-marke small{display:none}.wa-marke{right:12px;bottom:12px}}
@media (prefers-reduced-motion:reduce){.wa-marke{transition:none}}
/* Runde 13: Termin-Karten auf Kontakt — ruhiger dunkler Knopf statt breiter Orange-Balken */
.th-text .th-knopf{justify-content:flex-start;align-self:flex-start;margin-top:auto;padding-inline:22px}
.th-fuss{text-align:left}
/* Runde 13: Kopf ohne Balken-Hintergrund (Noah: „nicht das ganze Header-Menü mit einem Hintergrund versehen …
   Button-Kontrast erhöhen, muss nicht orange sein"). Nach dem Scrollen schweben Logo und Menü als eigene Pillen,
   der Knopf ist dunkel mit weißer Schrift; auf dem dunklen Hero hell mit dunkler Schrift. */
.kopf.fest{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.kopf.fest .marke,.kopf.fest .nav,.kopf.fest .burger{background:rgba(250,247,241,.92);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:0 0 0 1px rgba(22,19,14,.08),0 12px 30px -20px rgba(22,19,14,.45);border-radius:var(--pille)}
.kopf.fest .marke{padding:6px 16px 6px 10px}
.kopf.fest .nav{padding:5px 5px 5px 12px}
.kopf .nav-cta,.kopf.fest .nav-cta,.kopf.hell .nav-cta{background:var(--tinte);color:var(--papier);box-shadow:none}
.kopf .nav-cta:hover,.kopf.fest .nav-cta:hover,.kopf.hell .nav-cta:hover{background:#2b261e;color:var(--papier)}
.kopf:not(.fest):not(.hell) .nav-cta{background:var(--papier);color:var(--tinte)}
.kopf:not(.fest):not(.hell) .nav-cta:hover{background:var(--bronze-hell);color:var(--tinte)}
@media (prefers-reduced-transparency:reduce){.kopf.fest .marke,.kopf.fest .nav,.kopf.fest .burger{background:var(--papier);backdrop-filter:none}}
.kopf .nav > a.nav-cta,.kopf.fest .nav > a.nav-cta,.kopf.hell .nav > a.nav-cta{background:var(--tinte);color:var(--papier)}
.kopf .nav > a.nav-cta:hover,.kopf.fest .nav > a.nav-cta:hover,.kopf.hell .nav > a.nav-cta:hover{background:#2b261e;color:var(--papier)}
.kopf:not(.fest):not(.hell) .nav > a.nav-cta{background:var(--papier);color:var(--tinte)}
.kopf:not(.fest):not(.hell) .nav > a.nav-cta:hover{background:var(--bronze-hell);color:var(--tinte)}
.kopf.fest .marke{padding:8px 18px 8px 12px}
.t-logo.dunkel,.stimme .kreis.logo.dunkel{background:var(--tinte);box-shadow:none}
/* Runde 13 · Prüfer: Bilder oben in einer Karte rundet die Karte (overflow), nicht das Bild selbst — eine Rundung je Familie */
.team-karte .tk-bild,.th-bild,.noah-karte img{border-radius:0}
.team-karte,.noah-karte,.thema{overflow:hidden}
/* Auswahlkarten im Umkreis-Block tragen die Knopfform (Pille), das Symbol sitzt konzentrisch */
.uk-wahl{border-radius:var(--pille);padding:14px 26px 14px 14px}
.wa-zu{flex:none;min-width:44px;min-height:44px}
.lg-marke{letter-spacing:.02em}
.wa-marke{transform:translateY(16px)}.wa-marke.da{transform:none}
.team-du .tk-knopf svg{flex:none}
.textlink svg,.btn svg,.nav-cta svg{flex:none}
/* Runde 14 · Probleme: generische Grafiken, je Seite EIN kurzer Satz (wie SHK) */
.probleme .lg-seite{min-height:0}
.probleme .lg-panel{min-height:0}
.probleme .lg-seite p{margin:4px 0 0;font-size:clamp(18px,1.6vw,21px);font-weight:750;line-height:1.3;letter-spacing:-.01em}
.probleme .heute p{color:var(--tinte)}
.probleme .mit p{color:var(--papier)}
.probleme .vb{min-height:190px}
.vb-handy .h-rahmen{fill:#fff;stroke:#CFC7B8;stroke-width:2}
.mit .vb-handy .h-rahmen{fill:#1E1A14;stroke:rgba(250,247,241,.25)}
.vb-handy .h-grau{fill:#E6E0D5}
.vb-handy .h-mikro rect{fill:#CFC7B8}
.vb-handy .h-kreis{fill:none;stroke:rgba(22,19,14,.12);stroke-width:4}
.vb-handy .h-bogen{fill:none;stroke:#8A7F6F;stroke-width:4;stroke-linecap:round;transform-box:view-box;transform-origin:150px 78px;animation:vb-dreh 1s linear infinite}
.vb-handy .h-held{fill:var(--bronze)}
.vb-handy .h-titel{fill:#FAF7F1}
.vb-handy .h-zeile{fill:rgba(250,247,241,.3)}
.vb-handy .h-ruf rect{fill:#2E8B57}
.vb-handy .h-ruf{transform-box:fill-box;transform-origin:center}
.lg-panel.an .vb-handy .h-ruf{animation:vb-puls 1.6s var(--ease) 1s infinite}
.vb-handy .h-ruf text{fill:#fff!important;font-size:11px!important;font-weight:800!important}
.vb-handy .h-chip{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.7)}
.lg-panel.an .vb-handy .h-chip{animation:vb-pop .45s var(--ease) 1.4s forwards}
.vb-handy .h-chip.schlecht rect{fill:#F6E3E0}
.vb-handy .h-chip.schlecht text{fill:#B23A2A!important;font-size:12px!important;font-weight:800!important;letter-spacing:.01em}
.vb-handy .h-chip.gut rect{fill:var(--bronze)}
.vb-handy .h-chip.gut text{fill:var(--tinte)!important;font-size:12px!important;font-weight:800!important;letter-spacing:.01em}
@keyframes vb-dreh{to{transform:rotate(360deg)}}
@keyframes vb-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.vb-handy .h-bogen,.vb-handy .h-ruf{animation:none!important}.vb-handy .h-chip{opacity:1;transform:none}}
/* Runde 14 · Logo-Pille oben links mit mehr Luft links (Noah: „der Kreis ist ein bisschen zu eng links am Logo") */
.kopf.fest .marke{padding:8px 22px 8px 20px}
/* Runde 14 · Collage mit Filmfeld 2 × 2 oben links */
.collage.mit-film .c-film{grid-column:1 / span 2;grid-row:1 / span 2;border-radius:var(--radius);overflow:hidden;background:var(--tinte)}
.collage.mit-film .c-film video{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:1000px){.probleme .lg-panel{min-height:384px}}
/* Runde 14 · Team: der Satz darf über mehrere Zeilen laufen (Noah: „nicht nur dieser eine Satz … das wäre zu wenig") */
.team-karte p{white-space:normal;overflow:visible;text-overflow:clip}
/* Runde 14 · Stimmen: Überschrift, Sternzeile und Bänder in gleichmäßigem Abstand */
.stimmen .kopfzeile{margin-bottom:24px}
.stimmen .zusammen{margin-bottom:32px}
/* Runde 14 · Google-Chips in drei Reihen: volle Inhaltsbreite statt der schmalen Bühne */
@media (min-width:1000px){.google .buehne .begriffe{margin-inline:calc(50% - min(620px, 50vw - var(--rand)));gap:10px}}
.google .treffer .t > div{align-self:center}
/* Runde 14 · Kundenlogo im Google-Treffer: farbiges Original, ganz in der Box (Noah: „Die Logos der Kunden sind da nicht richtig platziert") */
.treffer .t-logo{display:flex;align-items:center;justify-content:center;width:160px;height:68px;padding:10px 14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.1);border-radius:16px}
.treffer .t-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:760px){.treffer .t-logo{width:130px;height:56px}}
/* Runde 14 · Sektionsabstand nach Hausregel 56–88 px (vorher bis 144 px — zwei gleichfarbige Sektionen standen 288 px auseinander) */
:root{--sekt:clamp(56px,6.2vw,88px)}
@media (max-width:900px){.collage.mit-film img:nth-child(n+13){display:block}}
.probleme .lg-seite.mit{border-radius:var(--radius)}

/* ===================== Runde 15 (28.09.2026) ===================== */
/* ---- „Gute Arbeit reicht nicht mehr" — vier Website-Momente, Heute gegen Mit uns im selben Rahmen ----
   🔴 Noah: „Animationen noch ein Tick moderner … wie bei der SHK-Seite … besser gegenüberstellen … wenn man die
   einzelnen Sachen anklickt, soll es auch animiert sein." Die Grafiken stehen frei auf der Fläche (kein Innenkasten
   mehr), beide Seiten zeigen dasselbe Motiv, die dunkle Seite wischt beim Wechsel herein. */
.pb-sek .lg-panel{position:relative;min-height:0;background:#fff}
.pb-sek .lg-seite{min-height:470px;gap:14px;padding:clamp(22px,2.4vw,30px)}
.pb-sek .lg-seite p{margin-top:auto;font-size:clamp(17px,1.45vw,19px);line-height:1.35}
.pb-vs{position:absolute;left:50%;top:50%;z-index:3;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;background:var(--bronze);color:var(--tinte);font-size:14px;font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 6px #fff,0 10px 24px -8px rgba(22,19,14,.5);opacity:0;transform:scale(.4)}
.pb-panel.an .pb-vs{animation:pb-pop .45s cubic-bezier(.2,1.4,.4,1) .55s forwards}
.pb-panel.an .lg-seite.heute{animation:pb-rein-l .5s var(--ease) both}
.pb-panel.an .lg-seite.mit{animation:pb-wisch .75s cubic-bezier(.7,0,.2,1) .12s both}
@keyframes pb-rein-l{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes pb-wisch{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes pb-pop{to{opacity:1;transform:none}}
@keyframes pb-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pb-puls{0%,100%{box-shadow:0 0 0 0 rgba(200,135,58,.55)}50%{box-shadow:0 0 0 10px rgba(200,135,58,0)}}
/* Grafik-Grundgerüst: je Seite ein zeitlicher Anfang --t (Heute zuerst, Mit uns danach) */
.pb-g{--t:.35s;position:relative;flex:1;display:grid;justify-items:center;align-content:center;gap:16px;min-height:300px}
.mit .pb-g{--t:1s}
.pb-marke{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 15px;border-radius:var(--pille);font-size:14px;font-weight:700;letter-spacing:-.005em;opacity:0;transform:translateY(10px)}
.pb-marke.schlecht{background:#F6E3E0;color:#9E2F22}
.pb-marke.gut{background:var(--bronze);color:var(--tinte)}
.pb-panel.an .pb-marke{animation:pb-auf .45s var(--ease) calc(var(--t) + 2.3s) forwards}
.pb-panel.an .mit .pb-marke{animation-delay:calc(var(--t) + 1.3s)}
/* Handy */
.pb-handy{position:relative;width:196px;height:274px;border-radius:28px;background:#fff;padding:10px 10px 12px;box-shadow:0 0 0 1px rgba(22,19,14,.14),0 22px 40px -24px rgba(22,19,14,.55);overflow:hidden;display:flex;flex-direction:column;gap:8px}
.mit .pb-handy{box-shadow:0 0 0 1px rgba(250,247,241,.2),0 26px 50px -22px rgba(0,0,0,.8)}
.pb-adr{display:flex;align-items:center;gap:6px;min-height:26px;padding:4px 10px;border-radius:var(--pille);background:var(--papier-2);font-size:13px;color:var(--tinte-3);white-space:nowrap}
.pb-adr i{width:8px;height:8px;border-radius:50%;background:var(--tinte-4);flex:none}
.pb-lade{height:3px;border-radius:3px;background:var(--papier-2);overflow:hidden;margin-top:-4px}
.pb-lade i{display:block;height:100%;width:0;background:#B23A2A;border-radius:3px}
.gut .pb-lade i{background:var(--bronze)}
.pb-panel.an .heute .pb-lade i{animation:pb-lade-lang 3s cubic-bezier(.2,.8,.3,1) var(--t) forwards}
.pb-panel.an .mit .pb-lade i{animation:pb-lade-kurz .45s var(--ease) var(--t) forwards}
@keyframes pb-lade-lang{0%{width:0}40%{width:38%}100%{width:52%}}
@keyframes pb-lade-kurz{to{width:100%}}
.pb-seite{position:relative;flex:1;display:flex;flex-direction:column;gap:6px;min-height:0}
.pb-sk{display:block;height:5px;width:var(--w);border-radius:3px;background:#E4DED3;opacity:.9}
.pb-seite.alt .pb-sk:nth-child(3n){height:14px;background:#EDE8DE}
.pb-kreisel{position:absolute;left:50%;top:44%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #E4DED3;border-top-color:#B23A2A;background:rgba(255,255,255,.8)}
.pb-panel.an .pb-kreisel{animation:pb-dreh .8s linear infinite}
@keyframes pb-dreh{to{transform:rotate(360deg)}}
.pb-held{position:relative;height:104px;border-radius:14px;overflow:hidden;opacity:0;transform:scale(.96)}
.pb-held img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pb-held::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,19,14,.7),transparent 70%)}
.pb-t1,.pb-t2{position:absolute;left:10px;z-index:1;height:8px;border-radius:4px;background:#fff}
.pb-t1{bottom:26px;width:62%}.pb-t2{bottom:12px;width:40%;background:var(--bronze-hell)}
.pb-z{display:block;height:6px;width:var(--w);border-radius:3px;background:var(--papier-3);opacity:0}
.pb-ruf{margin-top:auto;align-self:stretch;min-height:34px;display:grid;place-items:center;border-radius:var(--pille);background:var(--bronze);color:var(--tinte);font-size:13px;font-weight:800;opacity:0;transform:translateY(8px)}
.pb-panel.an .mit .pb-held{animation:pb-pop .4s var(--ease) calc(var(--t) + .35s) forwards}
.pb-panel.an .mit .pb-z{animation:pb-auf .35s var(--ease) calc(var(--t) + .5s) forwards}
.pb-panel.an .mit .pb-ruf{animation:pb-auf .35s var(--ease) calc(var(--t) + .65s) forwards,pb-puls 1.6s ease-out calc(var(--t) + 1.1s) 3}
/* Uhr neben dem Handy */
.pb-web{grid-template-columns:auto auto;align-items:center;column-gap:22px}
.pb-web .pb-marke{grid-column:1 / -1}
.pb-uhr{display:grid;justify-items:start;gap:2px}
.pb-uhr small{font-size:13px;font-weight:600;color:var(--tinte-3);letter-spacing:.01em}
.mit .pb-uhr small{color:#D9D2C4}
.pb-uhr b{font-size:clamp(40px,3.8vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:#B23A2A}
.mit .pb-uhr b{color:var(--bronze-hell)}
/* Google */
.pb-google{width:100%;max-width:340px;justify-items:stretch;gap:12px}
.pb-suche{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border-radius:var(--pille);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.14),0 10px 24px -16px rgba(22,19,14,.4);font-size:15px;font-weight:600;color:var(--tinte)}
.pb-suche svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--tinte-3);stroke-width:2.2;stroke-linecap:round}
.pb-tipp{display:inline-block;white-space:nowrap;overflow:hidden;clip-path:inset(0 100% 0 0);border-right:2px solid transparent}
.pb-panel.an .pb-tipp{animation:pb-tippen .9s steps(18) var(--t) forwards}
@keyframes pb-tippen{to{clip-path:inset(0 0 0 0)}}
.pb-treffer{display:grid;gap:8px}
.pb-treffer li{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;min-height:42px;padding:6px 12px 6px 6px;border-radius:14px;background:var(--papier);box-shadow:inset 0 0 0 1px rgba(22,19,14,.08);opacity:0;transform:translateY(10px)}
.mit .pb-treffer li{background:rgba(250,247,241,.07);box-shadow:inset 0 0 0 1px rgba(250,247,241,.12)}
.pb-treffer i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;background:var(--papier-2);color:var(--tinte-2)}
.mit .pb-treffer i{background:rgba(250,247,241,.1);color:#D9D2C4}
.pb-treffer b{font-size:14px;font-weight:600;color:var(--tinte-2)}
.mit .pb-treffer b{color:#E9E3D6}
.pb-treffer li.pb-luecke{background:none;box-shadow:none;min-height:24px}
.pb-treffer li.pb-luecke b{font-size:13px;color:var(--tinte-4)}
.pb-treffer li.pb-luecke i{background:none}
.pb-treffer li.du.weit{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(178,58,42,.45)}
.pb-treffer li.du.weit i{background:#F6E3E0;color:#9E2F22}
.pb-treffer li.du.weit b{color:var(--tinte)}
.mit .pb-treffer li.du{background:var(--bronze);box-shadow:none}
.mit .pb-treffer li.du i{background:var(--tinte);color:var(--bronze-hell)}
.mit .pb-treffer li.du b{color:var(--tinte);font-weight:800}
.pb-panel.an .pb-treffer li{animation:pb-auf .4s var(--ease) calc(var(--t) + 1s + var(--i) * .14s) forwards}
.pb-panel.an .mit .pb-treffer li.du{animation:pb-nach-oben .6s cubic-bezier(.2,1.2,.4,1) calc(var(--t) + 1.55s) forwards}
.pb-panel.an .mit .pb-treffer li:not(.du){animation-delay:calc(var(--t) + .95s + var(--i) * .12s)}
@keyframes pb-nach-oben{from{opacity:0;transform:translateY(120px) scale(.96)}to{opacity:1;transform:none}}
/* Der Vergleich */
.pb-vgl{width:100%}
.pb-drei{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:380px}
.pb-karte{display:grid;gap:6px;padding:7px 7px 10px;border-radius:14px;background:var(--papier);box-shadow:inset 0 0 0 1px rgba(22,19,14,.1);opacity:0;transform:translateY(12px);transition:box-shadow .3s var(--ease)}
.mit .pb-karte{background:#26211A;box-shadow:inset 0 0 0 1px rgba(250,247,241,.12)}
.pb-karte b{font-size:13px;font-weight:700;color:var(--tinte-2)}
.mit .pb-karte b{color:#E9E3D6}
.pb-karte.du b{color:var(--tinte)}
.mit .pb-karte.du b{color:var(--bronze-hell)}
.pb-karte .pb-z{opacity:1;background:#E4DED3;height:5px}
.mit .pb-karte .pb-z{background:rgba(250,247,241,.14)}
.pb-foto{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--papier-2)}
.pb-foto img{width:100%;height:100%;object-fit:cover}
.pb-foto.stock{display:grid;place-items:center;align-content:center;gap:4px;background:#E8E4DC;color:#A59C8C}
.mit .pb-foto.stock{background:#34302A;color:#7D7466}
.pb-foto.stock svg{width:44%;height:auto;fill:currentColor}
.pb-foto.stock small{font-size:13px;font-weight:600}
.pb-panel.an .pb-karte{animation:pb-auf .4s var(--ease) calc(var(--t) + var(--i,0) * .12s) forwards}
.pb-karte:nth-child(2){--i:1}.pb-karte:nth-child(3){--i:2}
.pb-panel.an .pb-karte.ziel{animation:pb-auf .4s var(--ease) calc(var(--t) + var(--i,0) * .12s) forwards,pb-ziel .4s var(--ease) calc(var(--t) + 1.9s) forwards}
@keyframes pb-ziel{to{box-shadow:inset 0 0 0 3px var(--ring,var(--bronze))}}
.heute .pb-karte.ziel{--ring:#B23A2A}
.pb-maus{position:absolute;left:46%;top:108%;width:26px;height:26px;fill:var(--tinte);stroke:#fff;stroke-width:1.5;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.mit .pb-maus{fill:#fff;stroke:var(--tinte)}
.pb-panel.an .heute .pb-maus{animation:pb-maus-r 1.3s cubic-bezier(.5,0,.2,1) calc(var(--t) + .7s) forwards}
.pb-panel.an .mit .pb-maus{animation:pb-maus-m 1.1s cubic-bezier(.5,0,.2,1) calc(var(--t) + .55s) forwards}
@keyframes pb-maus-r{0%{opacity:0;left:46%;top:108%}20%{opacity:1}100%{opacity:1;left:82%;top:38%}}
@keyframes pb-maus-m{0%{opacity:0;left:20%;top:108%}20%{opacity:1}100%{opacity:1;left:50%;top:38%}}
/* Der Bewerber */
.pb-nav{display:flex;gap:8px;font-size:13px;color:var(--tinte-3)}
.pb-nav .pb-karriere{position:relative;color:#9E2F22;font-weight:700}
.pb-nav .pb-karriere::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:#B23A2A;transform:scaleX(0);transform-origin:left}
.pb-panel.an .pb-nav .pb-karriere::after{animation:pb-strich .35s var(--ease) calc(var(--t) + 1.4s) forwards}
@keyframes pb-strich{to{transform:scaleX(1)}}
.pb-news{display:grid;gap:2px;padding:10px;border-radius:12px;background:var(--papier-2)}
.pb-news small,.pb-klein,.pb-stelle small{font-size:13px;color:var(--tinte-4);font-weight:600}
.pb-news b{font-size:13px;font-weight:700;color:var(--tinte-2)}
.pb-404{margin-top:auto;display:grid;place-items:center;gap:2px;padding:14px 8px;border-radius:12px;background:#F6E3E0;color:#9E2F22;opacity:0;transform:scale(.9)}
.pb-404 b{font-size:28px;font-weight:800;line-height:1}
.pb-404 small{font-size:13px;font-weight:700}
.pb-panel.an .pb-404{animation:pb-pop .4s cubic-bezier(.2,1.3,.4,1) calc(var(--t) + 1.8s) forwards}
.pb-team{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pb-team img{aspect-ratio:1/1;width:100%;border-radius:50%;object-fit:cover;opacity:0;transform:scale(.6)}
.pb-panel.an .pb-team img{animation:pb-pop .4s cubic-bezier(.2,1.3,.4,1) calc(var(--t) + .3s + var(--i) * .1s) forwards}
.pb-stelle{display:grid;gap:2px;padding:10px;border-radius:12px;background:var(--papier-2);opacity:0}
.pb-stelle b{font-size:15px;font-weight:800;color:var(--tinte)}
.pb-panel.an .pb-stelle{animation:pb-auf .35s var(--ease) calc(var(--t) + .8s) forwards}
.pb-bew .pb-seite.neu .pb-ruf{margin-top:auto}
/* Mobil: Heute, vs, Mit uns untereinander */
@media (max-width:700px){
  .pb-sek .lg-panel{display:flex;flex-direction:column}
  .pb-sek .lg-seite{min-height:0}
  .pb-vs{position:relative;left:auto;top:auto;margin:-23px auto;order:1}
  .pb-sek .lg-seite.mit{order:2}
  .pb-g{min-height:260px}}
@media (prefers-reduced-motion:reduce){
  .pb-sek .pb-panel *,.pb-vs{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .pb-lade i{width:100%!important}.pb-kreisel{display:none}.pb-maus{display:none}}
.pb-nav{justify-content:space-between;padding:6px 8px;border-radius:10px;background:var(--papier-2)}
.pb-404{padding:10px 8px}.pb-404 b{font-size:24px}
/* ---- Cookie-Hinweis: Ja links und vorausgewählt, Nein klein daneben (Runde 15) ---- */
.cookie-hinweis .cookie-knoepfe{align-items:center;gap:4px}
.cookie-hinweis .cookie-ja{gap:8px;padding:10px 22px 10px 16px;box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--bronze)}
.cookie-hinweis .ck-haken{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bronze);color:var(--tinte);font-size:12px;font-weight:800;line-height:1}
.cookie-hinweis .cookie-nein{min-height:44px;min-width:44px;padding:0 10px;font-size:13.5px;font-weight:500;color:var(--tinte-3);text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.cookie-hinweis .cookie-nein:hover{color:var(--tinte)}
.cookie-hinweis .cookie-nein:active{opacity:.6}
/* ---- KI-Hinweis als WhatsApp-Nachricht (Runde 15) ---- */
.ki-toast{position:fixed;left:16px;bottom:16px;z-index:88;display:flex;align-items:flex-end;gap:10px;max-width:min(400px,calc(100vw - 32px));opacity:0;transform:translateY(24px) scale(.96);transform-origin:0 100%;transition:opacity .3s var(--ease),transform .5s cubic-bezier(.2,1.3,.4,1);pointer-events:none}
.ki-toast.da{opacity:1;transform:none;pointer-events:auto}
.kt-av{width:40px;height:40px;border-radius:50%;background:var(--papier);box-shadow:0 0 0 1px rgba(22,19,14,.12),0 8px 18px -8px rgba(22,19,14,.5);display:grid;place-items:center;flex:none;overflow:hidden}
.kt-av img{width:26px;height:26px}
.kt-blase{position:relative;display:grid;gap:3px;padding:10px 14px 11px;border-radius:18px 18px 18px 4px;background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.08),0 20px 44px -18px rgba(22,19,14,.5)}
.kt-kopf{display:flex;align-items:baseline;gap:8px}
.kt-kopf b{font-size:13.5px;font-weight:700;color:#1F7A4D}
.kt-kopf small{font-size:13px;color:var(--tinte-4)}
.kt-text{display:none;font-size:15px;font-weight:500;line-height:1.4;color:var(--tinte)}
.kt-haken{font-size:13px;color:#34B7F1;letter-spacing:-.18em;margin-left:4px;white-space:nowrap}
.kt-tippt{display:inline-flex;gap:4px;padding:6px 0 3px}
.kt-tippt i{width:7px;height:7px;border-radius:50%;background:#B8B1A4;animation:kt-hopp 1s ease-in-out infinite}
.kt-tippt i:nth-child(2){animation-delay:.15s}.kt-tippt i:nth-child(3){animation-delay:.3s}
@keyframes kt-hopp{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.ki-toast.geschrieben .kt-tippt{display:none}
.ki-toast.geschrieben .kt-text{display:block;animation:pb-auf .3s var(--ease)}
.kt-zu{align-self:flex-start;flex:none;width:44px;height:44px;margin:-6px -8px 0 -6px;border-radius:50%;font-size:22px;line-height:1;color:var(--tinte-3)}
.kt-zu:hover{background:rgba(22,19,14,.06)}
.kt-zu:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.ki-toast{transition:none}.kt-tippt i{animation:none}}
/* ---- WhatsApp-Chatfenster (Runde 15) ---- */
.wa-marke a.wa-auf{cursor:pointer}
.wa-chat{position:fixed;right:16px;bottom:16px;z-index:92;width:min(360px,calc(100vw - 24px));display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#EFE7DC;box-shadow:0 0 0 1px rgba(22,19,14,.1),0 30px 70px -24px rgba(22,19,14,.6);opacity:0;transform:translateY(20px) scale(.97);transform-origin:100% 100%;transition:opacity .25s var(--ease),transform .4s cubic-bezier(.2,1.2,.4,1)}
.wa-chat.da{opacity:1;transform:none}
.wa-kopf{display:flex;align-items:center;gap:10px;padding:12px 8px 12px 14px;background:#075E54;color:#fff}
.wa-av{width:40px;height:40px;border-radius:50%;background:var(--papier);display:grid;place-items:center;flex:none}
.wa-av img{width:24px;height:24px}
.wa-wer{flex:1;display:grid;gap:1px;min-width:0}
.wa-wer b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.wa-wer small{font-size:13px;color:rgba(255,255,255,.78)}
.wa-schliessen{width:44px;height:44px;border-radius:50%;font-size:24px;line-height:1;color:#fff}
.wa-schliessen:hover{background:rgba(255,255,255,.12)}
.wa-schliessen:active{transform:scale(.94)}
.wa-verlauf{display:flex;flex-direction:column;gap:8px;min-height:150px;max-height:min(46vh,320px);overflow-y:auto;padding:16px 14px;background:#EFE7DC radial-gradient(rgba(22,19,14,.05) 1px,transparent 1.5px) 0 0/18px 18px}
.wa-blase{max-width:86%;padding:8px 12px 6px;border-radius:14px;font-size:15px;line-height:1.4;color:var(--tinte);box-shadow:0 1px 1px rgba(22,19,14,.12);animation:pb-auf .3s var(--ease)}
.wa-blase small{display:block;margin-top:3px;font-size:13px;color:var(--tinte-4);text-align:right}
.wa-blase.ein{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.wa-blase.aus{align-self:flex-end;background:#D9FDD3;border-top-right-radius:4px}
.wa-form{display:flex;align-items:center;gap:8px;padding:10px;background:#F0F0F0}
.wa-form input{flex:1;min-width:0;min-height:46px;padding:0 16px;border-radius:var(--pille);border:0;background:#fff;font:inherit;font-size:16px;color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(22,19,14,.08)}
.wa-form input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #25D366}
.wa-form input.leer{animation:wa-wackeln .4s}
@keyframes wa-wackeln{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.wa-senden{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;flex:none;transition:transform var(--schnell),background var(--schnell)}
.wa-senden svg{width:21px;height:21px;fill:currentColor;margin-left:2px}
.wa-senden:hover{background:#1FB957}
.wa-senden:active{transform:scale(.92);transition-duration:.1s}
.wa-fuss{margin:0;padding:0 14px 10px;background:#F0F0F0;font-size:13px;color:var(--tinte-3);text-align:center}
@media (max-width:560px){.wa-chat{right:12px;bottom:12px}}
@media (prefers-reduced-motion:reduce){.wa-chat{transition:none}.wa-blase{animation:none}}
/* ---- Collage: 5 Spalten, 16 Fotos + Film (Runde 15: „noch mal ein, noch mal zwei rein dazu") ---- */
.uk-bild .collage{grid-template-columns:repeat(5,1fr);gap:7px}
@media (max-width:900px){.uk-bild .collage{grid-template-columns:repeat(4,1fr)}.uk-bild .collage.mit-film img:nth-child(n+14){display:none}}
/* ---- Keine braunen Knöpfe mehr (Runde 15) ----
   🔴 Noah, 28.09.2026: „Bei ‚Über uns' der Button 08194774990 … ist immer noch schlecht von der Sichtbarkeit … auch
   ‚Erstgespräch vereinbaren' oben … Dieser braune Button sieht noch nicht so wirklich gut aus." → Hauptknopf auf hellem
   Grund Tinte mit Papier-Schrift, auf dunklem Grund (Hero, dunkle Bänder) Papier mit Tinte-Schrift. Bronze bleibt Akzent
   (Pfeil), nie mehr Knopffläche. Gilt überall, wo btn-bronze steht, außer der Kopfleiste (eigene Regel). */
.btn-bronze:not(.nav-cta){background:var(--tinte);color:var(--papier);box-shadow:0 10px 24px -14px rgba(22,19,14,.55)}
.btn-bronze:not(.nav-cta):hover{background:#2A251D;color:var(--papier);box-shadow:0 16px 32px -14px rgba(22,19,14,.6)}
.btn-bronze:not(.nav-cta) svg{color:var(--bronze-hell)}
:is(.hero,.hero-klein,.auf-dunkel,.dunkel,.cta,.band,.lg-seite.mit) .btn-bronze:not(.nav-cta){background:var(--papier);color:var(--tinte);box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
:is(.hero,.hero-klein,.auf-dunkel,.dunkel,.cta,.band,.lg-seite.mit) .btn-bronze:not(.nav-cta):hover{background:#fff;color:var(--tinte)}
:is(.hero,.hero-klein,.auf-dunkel,.dunkel,.cta,.band,.lg-seite.mit) .btn-bronze:not(.nav-cta) svg{color:var(--bronze-tief)}
.nk-text .btn-bronze:not(.nav-cta){background:var(--papier);color:var(--tinte)}.nk-text .btn-bronze:not(.nav-cta):hover{background:#fff;color:var(--tinte)}.nk-text .btn-bronze:not(.nav-cta) svg{color:var(--bronze-tief)}
/* ---- Websites: Aufbau einer Seite an der echten Kundenseite (Runde 15) ---- */
.aufbau{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,3.4vw,48px);align-items:center;margin-top:clamp(26px,3vw,40px)}
.ab-bild{margin:0;display:grid;gap:10px}
.ab-leiste{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--radius) var(--radius) 0 0;background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.08)}
.ab-leiste i{width:10px;height:10px;border-radius:50%;background:var(--papier-3)}
.ab-leiste span{margin-left:10px;padding:4px 14px;border-radius:var(--pille);background:var(--papier-2);font-size:13px;color:var(--tinte-3)}
.ab-flaeche{position:relative;margin-top:-10px;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;box-shadow:0 0 0 1px rgba(22,19,14,.08),0 30px 60px -34px rgba(22,19,14,.55)}
.ab-flaeche img{display:block;width:100%;height:auto;aspect-ratio:1000/625}
.ab-bild figcaption{font-size:13px;color:var(--tinte-3)}
.ab-pin{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(.3)}
.ab-pin span{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bronze);color:var(--tinte);font-size:14px;font-weight:800;box-shadow:0 0 0 3px #fff,0 8px 18px -6px rgba(0,0,0,.6);transition:transform .25s var(--ease)}
.ab-pin::before{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(200,135,58,.45);animation:ab-ring 2.4s ease-out infinite;animation-delay:calc(var(--i) * .3s)}
@keyframes ab-ring{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.6);opacity:0}}
.aufbau.sichtbar .ab-pin{animation:pb-pop .45s cubic-bezier(.2,1.4,.4,1) calc(.3s + var(--i) * .22s) forwards}
.ab-pin.an span,.ab-pin:hover span{transform:scale(1.22)}
.ab-pin:active span{transform:scale(.95)}
.ab-liste{display:grid;gap:8px;counter-reset:none}
.ab-liste li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;padding:14px 16px;border-radius:var(--radius-klein);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.08);opacity:0;transform:translateX(14px);transition:box-shadow .25s var(--ease),transform .25s var(--ease),background .25s var(--ease);cursor:default}
.aufbau.sichtbar .ab-liste li{animation:ab-li .45s var(--ease) calc(.35s + var(--i) * .22s) forwards}
@keyframes ab-li{to{opacity:1;transform:none}}
.ab-liste li:hover,.ab-liste li.an{box-shadow:0 0 0 2px var(--bronze),0 14px 30px -18px rgba(22,19,14,.4)}
.ab-nr{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tinte);color:var(--papier);font-size:15px;font-weight:800}
.ab-liste li.an .ab-nr{background:var(--bronze);color:var(--tinte)}
.ab-liste b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.ab-liste small{display:block;margin-top:3px;font-size:15px;line-height:1.45;color:var(--tinte-2)}
@media (max-width:900px){.aufbau{grid-template-columns:1fr}.ab-pin{width:36px;height:36px;margin:-18px 0 0 -18px}.ab-pin span{width:24px;height:24px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.ab-pin,.ab-liste li{opacity:1;transform:none;animation:none!important}.ab-pin::before{animation:none}}
/* ---- Arbeiten: eigenes Raster mit großen, selbst laufenden Seiten (Runde 15) ---- */
.projekte.bento{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense}
.projekt.gross{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.projekt.gross.rechts{grid-column:2 / span 2}
.projekt.gross .schirm.lang{position:relative;flex:1;min-height:320px;aspect-ratio:auto;overflow:hidden;background:var(--papier-2)}
.lang-bild{position:absolute;inset:0;background-size:100% auto;background-repeat:no-repeat;background-position:50% 0}
.projekt.gross.dran .lang-bild{animation:lang-lauf 38s ease-in-out infinite alternate}
@keyframes lang-lauf{0%,6%{background-position:50% 0}94%,100%{background-position:50% 100%}}
.lang-marke{position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:var(--pille);background:rgba(22,19,14,.78);color:var(--papier);font-size:13px;font-weight:700;backdrop-filter:blur(6px)}
.projekt.gross .unten b{font-size:clamp(20px,1.8vw,26px)}
@media (max-width:1000px){.projekte.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.projekt.gross,.projekt.gross.rechts{grid-column:1 / -1;grid-row:auto}.projekt.gross .schirm.lang{min-height:0;aspect-ratio:16/11}}
@media (max-width:640px){.projekte.bento{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lang-bild{animation:none!important}}
/* ---- Zahlen-Bühne hell und kürzer (Runde 15) ----
   🔴 Noah, 28.09.2026: „Das, dass es komplett schwarz wird auf einmal und man den Text nicht sieht, ist richtig schlecht."
   Gemessen: beim Hineinscrollen standen 84–88 % des Bildschirms in Schwarz, die Zahl begann bei „0", beim Hinausscrollen
   blieb ein leeres schwarzes Band. Jetzt: Papier statt Tinte, 240 statt 320 svh, und die Zahl zählt schon beim Hereinkommen
   hoch (/static/main.js) — wer ankommt, sieht sofort „66 Kundenseiten". */
.zahlen-buehne{height:300svh;background:var(--papier-2);color:var(--tinte)}
.zs-text .kicker{color:var(--bronze-tief)}
.zs-szene[data-szene="1"] .zs-nr,.zs-szene[data-szene="2"] .zs-nr{color:var(--bronze-tief)}
.zs-szene p{color:var(--tinte-2)}
.zs-feld i{background:rgba(22,19,14,.07);box-shadow:inset 0 0 0 1px rgba(22,19,14,.1)}
.zs-feld i.an{background:var(--tinte);box-shadow:none}
.zs-feld i.eins{background:var(--bronze)}
.zs-sterne svg{fill:rgba(22,19,14,.1)}
.zs-sterne svg.an{fill:var(--bronze)}
.zs-wasser path{fill:var(--tinte)}
.zs-wasser{opacity:.04}
.zs-fort path{fill:rgba(22,19,14,.16)}
.zahlen-buehne[data-szene="0"] .zs-fort .s0,.zahlen-buehne[data-szene="1"] .zs-fort .s0,.zahlen-buehne[data-szene="1"] .zs-fort .s1,.zahlen-buehne[data-szene="2"] .zs-fort path{fill:var(--bronze)}
.zs-fuss small{color:var(--tinte-3)}
@media (max-width:760px){.zahlen-buehne{height:300svh}}
/* ---- Neukunden: Werbekonto als Kalender (Runde 15, SHK-Stil) ---- */
.wk-tafel{margin-top:clamp(26px,3vw,40px);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.08),0 24px 50px -34px rgba(22,19,14,.45)}
.wk-tafel .kal-kopf small{max-width:none}
.wk-logo img{height:44px;width:auto;display:block}
.wk-raster{grid-template-columns:repeat(21,minmax(0,1fr));gap:clamp(5px,.6vw,9px)}
.wk-raster i{border-radius:8px}
.wk-tafel .kal-fuss b{color:var(--tinte);margin-right:6px}
@media (max-width:760px){.wk-raster{grid-template-columns:repeat(7,minmax(0,1fr))}}
/* ---- Mitarbeiter: die alten Wege als Plan (Runde 15, SHK-Bauform) ---- */
.wp{display:grid;justify-items:center;margin-top:clamp(30px,3.4vw,46px)}
.wp-kopf{position:relative;padding-bottom:28px}
.wp-kopf span{display:inline-flex;align-items:center;min-height:42px;padding:8px 20px;border-radius:var(--pille);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.12),0 10px 22px -16px rgba(22,19,14,.4);font-size:14px;font-weight:700;letter-spacing:.01em}
.wp-kopf::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:28px;background:var(--linie);transform-origin:top;transform:scaleY(0)}
.wp-reihe{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:100%;max-width:1000px;padding-top:28px}
.wp-reihe::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:1px;background:var(--linie);transform:scaleX(0)}
.wp-weg{position:relative;display:grid;justify-items:center;text-align:center;padding:0 6px 50px;opacity:0;transform:translateY(12px)}
.wp-weg::before{content:"";position:absolute;left:50%;top:-28px;width:1px;height:28px;background:var(--linie)}
.wp-ic{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.14),0 10px 22px -14px rgba(22,19,14,.4);margin-bottom:14px;transition:box-shadow .4s var(--ease),filter .4s var(--ease)}
.wp-ic svg{width:27px;height:27px;fill:none;stroke:var(--tinte);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease)}
.wp-weg h3{font-size:16.5px;letter-spacing:-.01em;margin-bottom:6px}
.wp-strich{position:relative}
.wp-strich::after{content:"";position:absolute;left:-2px;right:-2px;top:55%;height:2px;background:#B23A2A;transform:scaleX(0);transform-origin:left}
.wp-weg p{font-size:15px;line-height:1.45;color:var(--tinte-2);max-width:24ch}
.wp-x{position:absolute;left:50%;bottom:0;width:32px;height:32px;margin-left:-16px;border-radius:50%;display:grid;place-items:center;background:#B23A2A;color:#fff;font-size:14px;font-weight:800;box-shadow:0 0 0 5px var(--papier);opacity:0;transform:scale(0) rotate(-30deg)}
.wp-ende{margin-top:34px;display:inline-flex;align-items:center;gap:14px;padding:10px 26px 10px 10px;border-radius:var(--pille);background:var(--tinte);color:var(--papier);opacity:0;transform:translateY(12px) scale(.96)}
.wp-ende img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.wp-ende b{display:block;font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-.01em}
.wp-ende small{display:block;font-size:13px;color:#D9D2C4;margin-top:2px}
.wp.dran .wp-kopf::after{animation:wp-runter .3s var(--ease) .15s forwards}
.wp.dran .wp-reihe::before{animation:wp-quer .5s var(--ease) .4s forwards}
.wp.dran .wp-weg{animation:pb-auf .45s var(--ease) calc(.7s + var(--i) * .14s) forwards}
.wp.dran .wp-x{animation:wp-stempel .4s cubic-bezier(.2,1.4,.4,1) calc(1.6s + var(--i) * .22s) forwards}
.wp.dran .wp-strich::after{animation:pb-strich .35s var(--ease) calc(1.65s + var(--i) * .22s) forwards}
.wp.dran .wp-ic{animation:wp-grau .4s var(--ease) calc(1.6s + var(--i) * .22s) forwards}
.wp.dran .wp-ende{animation:pb-pop .5s cubic-bezier(.2,1.3,.4,1) 2.7s forwards}
@keyframes wp-runter{to{transform:scaleY(1)}}
@keyframes wp-quer{to{transform:scaleX(1)}}
@keyframes wp-stempel{to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes wp-grau{to{box-shadow:0 0 0 1.5px #B23A2A,0 10px 22px -14px rgba(22,19,14,.3);filter:grayscale(1)}}
.wp-weg:hover .wp-ic{transform:translateY(-3px)}
@media (max-width:820px){
  .wp-reihe{grid-template-columns:1fr;gap:0;padding-top:0;max-width:520px}
  .wp-reihe::before{display:none}.wp-kopf{padding-bottom:18px}.wp-kopf::after{height:18px}
  .wp-weg{grid-template-columns:60px 1fr;justify-items:start;text-align:left;column-gap:14px;padding:6px 0 18px}
  .wp-weg::before{left:30px;top:0;bottom:0;height:auto;z-index:0}
  .wp-ic{grid-row:1 / 3;width:60px;height:60px;margin:0;position:relative;z-index:1}
  .wp-weg h3{margin-top:6px}.wp-weg p{max-width:none}
  .wp-x{left:44px;top:38px;bottom:auto;margin:0;width:26px;height:26px;font-size:12px}
  .wp-ende{border-radius:var(--radius);padding:12px 18px 12px 12px}}
@media (prefers-reduced-motion:reduce){.wp *,.wp-ende,.wp-weg{animation:none!important;opacity:1!important;transform:none!important}.wp-strich::after{transform:scaleX(1)!important}}
/* ---- Mitarbeiter „Probiert war schon einiges": je Seite ein Bild (Runde 15) ---- */
.gg-bild{display:grid;gap:6px;margin-bottom:18px}
.gg-bild small{font-size:13px;font-weight:600;color:var(--tinte-3);letter-spacing:.01em}
.gg-seite.neu .gg-bild small{color:#D9D2C4}
.gg-bild svg{width:100%;height:auto}
.gg-achse{stroke:var(--linie);stroke-width:2}
.gg-flach{fill:none;stroke:#B23A2A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:320;stroke-dashoffset:320}
.gegenueber.dran .gg-flach{animation:gg-zeichnen 1.4s var(--ease) .3s forwards}
@keyframes gg-zeichnen{to{stroke-dashoffset:0}}
.gg-punkt{fill:#B23A2A;opacity:0}
.gg-bild text{font-size:13px;font-weight:700;fill:#9E2F22;opacity:0}
.gegenueber.dran .gg-punkt,.gegenueber.dran .gg-bild text{animation:pb-pop .3s var(--ease) 1.4s forwards}
.gg-koepfe{grid-template-columns:repeat(9,1fr);gap:6px}
.gg-koepfe small{grid-column:1 / -1;margin-top:4px}
.gg-koepfe i{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:rgba(250,247,241,.1);color:rgba(250,247,241,.3)}
.gg-koepfe i svg{width:58%;height:58%;fill:currentColor}
.gegenueber.dran .gg-koepfe i{animation:gg-voll .3s var(--ease) calc(.6s + var(--i) * .06s) forwards}
@keyframes gg-voll{to{background:var(--bronze);color:var(--tinte)}}
@media (prefers-reduced-motion:reduce){.gg-flach{stroke-dashoffset:0}.gg-punkt,.gg-bild text{opacity:1}.gg-koepfe i{background:var(--bronze);color:var(--tinte)}}
.gg-seite.neu .gg-bild small{color:var(--tinte-3)}
.gg-seite.neu .gg-koepfe i{background:var(--papier-2);color:var(--tinte-4)}
.ki-toast{position:fixed}
.kt-blase{padding-right:44px}
.kt-zu{position:absolute;right:-4px;top:-2px;margin:0;width:44px;height:44px;font-size:20px}
/* große Arbeiten-Kachel: die ganze Seite läuft per transform (Compositor, ruckelfrei), Höhe über Container-Einheiten */
.projekt.gross .schirm.lang{container-type:size}
.lang-bild{position:absolute;left:0;top:0;right:auto;bottom:auto;width:100%;height:auto;max-width:none;background:none;animation:lang-lauf2 42s ease-in-out infinite alternate;will-change:transform}
.projekt.gross.dran .lang-bild{animation:lang-lauf2 42s ease-in-out infinite alternate}
@keyframes lang-lauf2{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 100cqh))}}
.projekt.gross:hover .lang-bild{animation-play-state:paused}
.ab-liste li{border-radius:var(--radius)}
/* Szenenwechsel ohne übereinanderliegende Texte: die alte Szene geht schnell, die neue kommt danach */
.zs-szene{transition:opacity .18s var(--ease),transform .3s var(--ease)}
.zahlen-buehne[data-szene="0"] .zs-szene[data-szene="0"],.zahlen-buehne[data-szene="1"] .zs-szene[data-szene="1"],.zahlen-buehne[data-szene="2"] .zs-szene[data-szene="2"]{transition:opacity .35s var(--ease) .18s,transform .45s var(--ease) .18s}
/* ==== Runde 16 (28.09.2026): Bühne „Gute Arbeit reicht nicht mehr" — ohne Suchbegriff, fünfte Szene, mehr Leben ==== */
/* Suchfeld: zwei Tipp-Balken und ein Cursor statt eines Begriffs (Noah: „nicht, dass da irgendwas anderes drin steht") */
.pb-tipp{display:flex;align-items:center;gap:6px;clip-path:none;flex:1;min-width:0;border:0}
.pb-tipp i{display:block;height:9px;border-radius:5px;background:var(--papier-3);transform:scaleX(0);transform-origin:left}
.pb-tipp i:first-child{width:46%}.pb-tipp i:last-child{width:30%;background:#E4DED3}
.pb-panel.an .pb-tipp i:first-child{animation:pb-tipp-balken .5s steps(7) var(--t) forwards}
.pb-panel.an .pb-tipp i:last-child{animation:pb-tipp-balken .4s steps(5) calc(var(--t) + .55s) forwards}
@keyframes pb-tipp-balken{to{transform:scaleX(1)}}
.pb-cursor{width:2px;height:20px;border-radius:1px;background:var(--bronze);margin-left:-4px;animation:pb-blink 1s steps(1) infinite}
@keyframes pb-blink{50%{opacity:0}}
.pb-suche{gap:10px}
/* Laufende Bewegung: Schimmer über der alten Seite, langsamer Zoom in den Fotos, sanftes Atmen des vs */
.pb-panel.an .heute .pb-seite.alt{--sch:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%)}
.pb-panel.an .heute .pb-web .pb-seite.alt::after{content:"";position:absolute;inset:0;background:var(--sch);background-size:250% 100%;animation:pb-schimmer 1.8s linear infinite;pointer-events:none}
@keyframes pb-schimmer{from{background-position:130% 0}to{background-position:-30% 0}}
.pb-panel.an .mit .pb-held img,.pb-panel.an .mit .pb-karte.du .pb-foto img,.pb-panel.an .mit .pb-team img{animation-fill-mode:forwards}
.pb-panel.an .mit .pb-held img{animation:pb-zoom 7s ease-out calc(var(--t) + .4s) both}
.pb-panel.an .mit .pb-karte .pb-foto img{animation:pb-zoom 7s ease-out calc(var(--t) + .6s) both}
@keyframes pb-zoom{from{transform:scale(1)}to{transform:scale(1.12)}}
.pb-panel.an .pb-vs{animation:pb-pop .45s cubic-bezier(.2,1.4,.4,1) .55s forwards,pb-atmen 2.4s ease-in-out 1.2s infinite}
@keyframes pb-atmen{0%,100%{box-shadow:0 0 0 6px #fff,0 10px 24px -8px rgba(22,19,14,.5)}50%{box-shadow:0 0 0 9px #fff,0 14px 30px -8px rgba(22,19,14,.5)}}
.pb-marke{transform:translateY(10px) scale(.9)}
.pb-panel.an .pb-marke{animation-name:pb-marke-rein;animation-timing-function:cubic-bezier(.2,1.4,.4,1)}
@keyframes pb-marke-rein{to{opacity:1;transform:none}}
/* Google: der eigene Treffer leuchtet kurz auf, sobald er oben steht */
.pb-panel.an .mit .pb-treffer li.du{animation:pb-nach-oben .6s cubic-bezier(.2,1.2,.4,1) calc(var(--t) + 1.55s) forwards,pb-glanz 1.2s ease-out calc(var(--t) + 2.2s) 1}
@keyframes pb-glanz{0%{box-shadow:0 0 0 0 rgba(200,135,58,.7)}100%{box-shadow:0 0 0 14px rgba(200,135,58,0)}}
/* Szene 5 — Abends um zehn */
.pb-abend{grid-template-columns:auto auto;align-items:center;column-gap:22px}
.pb-abend .pb-marke{grid-column:1 / -1}
.pb-uhrzeit{display:grid;justify-items:start;gap:4px;order:2}
.pb-uhrzeit b{font-size:clamp(38px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--tinte)}
.mit .pb-uhrzeit b{color:var(--bronze-hell)}
.pb-mond{font-size:26px;line-height:1;opacity:0;transform:translateY(-6px) rotate(-20deg)}
.pb-panel.an .pb-mond{animation:pb-mond .6s cubic-bezier(.2,1.3,.4,1) calc(var(--t) + .1s) forwards}
@keyframes pb-mond{to{opacity:1;transform:none}}
.pb-buero{display:grid;gap:2px;padding:10px;border-radius:12px;background:var(--papier-2)}
.pb-buero b{font-size:14px;font-weight:800;color:var(--tinte)}
.pb-buero small{font-size:13px;font-weight:600;color:var(--tinte-3)}
.pb-anruf{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border-radius:var(--pille);background:#F6E3E0;color:#9E2F22;opacity:0;transform:scale(.9)}
.pb-anruf small{font-size:13px;font-weight:800}
.pb-panel.an .pb-anruf{animation:pb-pop .4s cubic-bezier(.2,1.3,.4,1) calc(var(--t) + 1.5s) forwards}
.pb-panel.an .pb-anruf span{display:inline-block;animation:pb-klingeln .5s ease-in-out calc(var(--t) + .5s) 2}
@keyframes pb-klingeln{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}75%{transform:rotate(18deg)}}
.pb-wahl{display:flex;gap:5px}
.pb-wahl span{flex:1;min-height:30px;display:grid;place-items:center;border-radius:var(--pille);background:var(--papier-2);font-size:13px;font-weight:700;color:var(--tinte-2);opacity:0;transform:translateY(8px)}
.pb-panel.an .mit .pb-wahl span{animation:pb-auf .3s var(--ease) calc(var(--t) + .3s + var(--i) * .08s) forwards}
.pb-panel.an .mit .pb-wahl span.an{animation:pb-auf .3s var(--ease) calc(var(--t) + .38s) forwards,pb-waehlen .3s var(--ease) calc(var(--t) + .9s) forwards}
@keyframes pb-waehlen{to{background:var(--bronze);color:var(--tinte)}}
.pb-feld{display:block;height:28px;border-radius:10px;background:var(--papier);box-shadow:inset 0 0 0 1px rgba(22,19,14,.12);padding:9px 10px;opacity:0}
.pb-feld i{display:block;height:10px;width:0;border-radius:5px;background:var(--papier-3)}
.pb-panel.an .mit .pb-feld{animation:pb-auf .3s var(--ease) calc(var(--t) + .55s + var(--i) * .1s) forwards}
.pb-panel.an .mit .pb-feld i{animation:pb-feld-f .45s steps(6) calc(var(--t) + 1.1s + var(--i) * .35s) forwards}
@keyframes pb-feld-f{to{width:64%}}
.pb-abend .pb-seite.neu{position:relative}
.pb-abend .pb-seite.neu .pb-ruf{margin-top:auto}
.pb-ok{position:absolute;left:0;right:0;bottom:0;min-height:34px;display:grid;place-items:center;border-radius:var(--pille);background:#1F7A4D;color:#fff;font-size:13px;font-weight:800;opacity:0;transform:scale(.8)}
.pb-panel.an .mit .pb-ok{animation:pb-pop .35s cubic-bezier(.2,1.4,.4,1) calc(var(--t) + 2.1s) forwards}
@media (max-width:700px){.pb-abend{column-gap:14px}.pb-uhrzeit b{font-size:34px}}
@media (prefers-reduced-motion:reduce){.pb-cursor{animation:none}.pb-tipp i,.pb-feld i{transform:none!important;width:64%!important}.pb-seite.alt::after{display:none}}
/* Runde 16: das Panel wächst mit dem Inhalt (mit height:100% schnitt es bei Google den Satz ab) · Uhrzeit rechts neben dem Handy */
.pb-sek .lg-panel{height:auto;min-height:100%}
.pb-sek .lg-seite{min-height:500px}
.pb-abend .pb-handy{order:1}.pb-abend .pb-marke{order:3}
.pb-wahl{gap:4px}.pb-wahl span{padding:0 4px;font-size:13px;letter-spacing:-.01em}
/* ---- Websites: Aufbau einer Seite, Runde 16 — Leuchtfeld statt Punkte ---- */
.ab-flaeche img{aspect-ratio:1600/1000}
.ab-spot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:14px;box-shadow:0 0 0 2px var(--bronze),0 0 0 9999px rgba(12,10,7,.62);pointer-events:none;opacity:0;
  transition:left .7s cubic-bezier(.65,0,.25,1),top .7s cubic-bezier(.65,0,.25,1),width .7s cubic-bezier(.65,0,.25,1),height .7s cubic-bezier(.65,0,.25,1),opacity .5s var(--ease)}
.aufbau.sichtbar .ab-spot{opacity:1}
.ab-spot::after{content:"";position:absolute;inset:-2px;border-radius:16px;box-shadow:0 0 0 0 rgba(200,135,58,.6);animation:ab-spot-puls 2.2s ease-out infinite}
@keyframes ab-spot-puls{0%{box-shadow:0 0 0 0 rgba(200,135,58,.55)}100%{box-shadow:0 0 0 12px rgba(200,135,58,0)}}
.ab-tag{position:absolute;left:-2px;top:-2px;transform:translate(-40%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bronze);color:var(--tinte);font-size:14px;font-weight:800;box-shadow:0 0 0 3px #fff,0 8px 18px -6px rgba(0,0,0,.6)}
.ab-liste li{position:relative;overflow:hidden;cursor:pointer}
.ab-liste li .ab-lauf{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--bronze);transform:scaleX(0);transform-origin:left}
.ab-liste li.an{background:var(--tinte);box-shadow:none}
.ab-liste li.an b{color:var(--papier)}.ab-liste li.an small{color:#D9D2C4}
.ab-liste li.an .ab-nr{background:var(--bronze);color:var(--tinte)}
.aufbau.laeuft .ab-liste li.an .ab-lauf{animation:lg-lauf 3.2s linear forwards}
.ab-liste li:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.ab-liste li b{transition:color .25s var(--ease)}
@media (max-width:900px){.aufbau{grid-template-columns:1fr}.ab-tag{width:26px;height:26px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.ab-spot{transition:none}.ab-spot::after{animation:none}}
.ab-zoom{position:relative;transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(var(--s,1));transition:transform .8s cubic-bezier(.65,0,.25,1),transform-origin .8s cubic-bezier(.65,0,.25,1)}
.ab-zoom .ab-tag{transform:translate(-40%,-50%) scale(calc(1 / var(--s,1)));transform-origin:0 0}
.ab-zoom .ab-spot{box-shadow:0 0 0 calc(2px / var(--s,1)) var(--bronze),0 0 0 9999px rgba(12,10,7,.62)}
@media (prefers-reduced-motion:reduce){.ab-zoom{transition:none}}
.ab-tag{top:50%;left:0}
.ab-zoom .ab-tag{transform:translate(-50%,-50%) scale(calc(1 / var(--s,1)));transform-origin:50% 50%}
.ab-zoom .ab-tag{transform:translate(calc(-100% - 8px),-50%) scale(calc(1 / var(--s,1)));transform-origin:100% 50%}
/* ---- Über uns: Zeitstrahl 2019–2026 (Runde 16) — Desktop: klebende Bühne, die Spur fährt waagerecht, die Linie füllt sich ---- */
.zs-sek{padding-bottom:0}
.zs-buehne{position:relative}
.zs-kleber{position:relative}
.zs-spur{position:relative;padding:28px var(--rand) clamp(40px,5vw,72px)}
.zeitstrahl{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,300px);gap:clamp(18px,2vw,28px);width:max-content;will-change:transform}
.zs-linie{position:absolute;left:0;right:0;top:calc(28px + var(--zs-bild-h,200px) + 20px);height:3px;background:var(--papier-3);border-radius:2px;overflow:hidden}
.zs-linie i{position:absolute;inset:0;background:var(--bronze);transform:scaleX(var(--zs-p,0));transform-origin:left}
.zs-station{position:relative;display:grid;gap:8px;align-content:start;opacity:.35;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.zs-station.da{opacity:1;transform:none}
.zs-bild{height:var(--zs-bild-h,200px);border-radius:var(--radius);overflow:hidden;background:var(--papier-2);box-shadow:0 0 0 1px rgba(22,19,14,.06)}
.zs-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.zs-station:hover .zs-bild img{transform:scale(1.04)}
.zs-bild.ohne{position:relative;display:grid;place-items:center;background:var(--tinte);color:var(--papier)}
.zs-bild.ohne span{font-size:clamp(56px,5vw,76px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--bronze-hell)}
.zs-signet{position:absolute;left:18px;top:16px;width:22px;height:auto}
.zs-signet path{fill:rgba(250,247,241,.35)}
.zs-punkt{width:16px;height:16px;border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 3px var(--papier-3);margin:12px 0 4px;transition:box-shadow .35s var(--ease),background .35s var(--ease)}
.zs-station.da .zs-punkt{background:var(--bronze);box-shadow:0 0 0 5px rgba(200,135,58,.22)}
.zs-station .jahr{font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.03em;color:var(--bronze);line-height:1}
.zs-station b{font-size:17px}
.zs-station p{font-size:15px;color:var(--tinte-2);line-height:1.45}
@media (min-width:901px){
  .zs-buehne{height:calc(100svh + var(--zs-weg,1200px))}
  .zs-kleber{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}}
@media (max-width:900px){
  .zs-spur{padding:20px var(--rand) 48px}
  .zeitstrahl{grid-auto-flow:row;grid-auto-columns:auto;width:auto;transform:none!important;gap:0}
  .zs-linie{display:none}
  .zs-station{grid-template-columns:110px 1fr;column-gap:16px;padding:0 0 22px 22px;border-left:3px solid var(--papier-3)}
  .zs-station.da{border-left-color:var(--bronze)}
  .zs-bild{height:auto;aspect-ratio:1/1;grid-row:1/5}
  .zs-bild.ohne span{font-size:30px}
  .zs-punkt{position:absolute;left:-10px;top:0;margin:0}}
@media (prefers-reduced-motion:reduce){.zs-station{opacity:1;transform:none;transition:none}}
@media (min-width:901px){.zs-spur{padding-inline:max(var(--rand),calc((100% - var(--normal)) / 2))}}
@media (max-width:900px){.ab-zoom .ab-tag{display:none}}
/* ---- Potenzial-Rechner (Runde 17) — Bauform von der SHK-Seite, Farben aus dem HWM-Branding ---- */
.rd{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:0;padding:0;border-radius:var(--radius);background:var(--papier);color:var(--tinte);box-shadow:0 40px 90px -30px rgba(22,19,14,.6);overflow:auto;margin:auto;position:fixed;inset:0;height:fit-content}
.rd::backdrop{background:rgba(22,19,14,.55)}
.rd[open]{animation:rd-auf .42s cubic-bezier(.22,.8,.24,1)}
.rd::backdrop{animation:rd-schleier .42s ease}
@keyframes rd-schleier{from{opacity:0}to{opacity:1}}
@keyframes rd-auf{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.rd-form{padding:22px 26px 26px;position:relative}
.rd-honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rd-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rd-kick{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-dunkel,#9C6424)}
.rd-kick .ic{width:28px;height:28px}
.rd-zu{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--papier-2);font-size:22px;line-height:1;color:var(--tinte)}
.rd-zu:active{transform:scale(.94)}
.rd-balken{height:4px;border-radius:99px;background:var(--papier-3);margin:14px 0 22px;overflow:hidden}
.rd-balken i{display:block;height:100%;background:var(--bronze);transform-origin:left;transform:scaleX(.11);transition:transform .4s var(--ease)}
.rd-schritt h3{font-size:clamp(22px,3vw,28px);line-height:1.2;letter-spacing:-.02em;margin:0 0 18px}
.rd-schritt.an{animation:rd-schritt .42s cubic-bezier(.22,.8,.24,1) .06s both}
@keyframes rd-schritt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rd[open],.rd::backdrop,.rd-schritt.an{animation:none}}
.rd-wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rd-wahl button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:10px 14px;border-radius:var(--radius-klein);border:1.5px solid var(--papier-3);background:#fff;font:inherit;font-weight:700;font-size:16px;color:var(--tinte);text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.rd-wahl button:hover{border-color:var(--tinte)}
.rd-wahl button:active{transform:scale(.97)}
.rd-wahl button.an{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.rd-wahl button .ic{width:26px;height:26px}
.rd-ergebnis{background:var(--tinte);color:var(--papier);border-radius:var(--radius-klein);padding:22px 22px 20px;margin-bottom:16px}
.rd-ergebnis small{display:block;font-size:14px;color:#D9D2C4;font-weight:600}
.rd-ergebnis b{display:block;font-size:clamp(40px,6vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:4px 0 10px;color:var(--bronze-hell);font-variant-numeric:tabular-nums}
.rd-ergebnis p{font-size:15px;color:#E9E3D6;margin:0}
.rd-fuss{display:block;font-size:13px;color:#BFB6A6;margin-top:10px}
.rd-zeile{display:grid;grid-template-columns:1fr;gap:0 10px}
@media (min-width:420px){.rd-zeile{grid-template-columns:130px 1fr}}
.rd-feld{display:block;margin-bottom:12px}
.rd-feld span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.rd-feld em{font-style:normal;color:var(--tinte-4);font-weight:500}
.rd-feld input{width:100%;min-height:50px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--papier-3);font:inherit;font-size:16px;background:#fff;color:var(--tinte)}
.rd-feld input:focus{outline:none;border-color:var(--bronze)}
.rd-feld input.fehlt{border-color:#B23A2A}
.rd-weiter{width:100%;justify-content:center;margin-top:6px}
.rd-hinweis{font-size:13px;color:var(--tinte-3);margin:4px 0 12px}
.rd-hinweis a{text-decoration:underline}
.rd-fehler{color:#9E2F22;font-size:14px;font-weight:600;margin:0 0 10px}
.rd-zurueck{margin-top:14px;min-height:44px;font:inherit;font-weight:600;color:var(--tinte-3);background:none;border:0;cursor:pointer}
.rd-danke{text-align:center;padding:10px 0}
.rd-ok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(200,135,58,.18);margin:0 auto 14px;color:var(--bronze-dunkel,#9C6424)}
.rd-ok svg{width:30px;height:30px}
.rd-danke p{color:var(--tinte-3);margin:8px 0 18px}
html.rd-offen{overflow:hidden}
.rd-radar{text-align:center;padding:4px 0 2px}
.rd-radar>svg{width:200px;height:200px;display:block;margin:0 auto 14px}  /* 🔴 29.09.2026: „.rd-radar svg" traf auch den Pfeil im Weiter-Knopf → Knopf 242 px hoch */
.rd-radar .rr{fill:none;stroke:var(--papier-3);stroke-width:1.2}
.rd-radar .rd-sweep{transform-origin:110px 110px;animation:rd-sweep 1.3s linear infinite}
@keyframes rd-sweep{to{transform:rotate(360deg)}}
.rd-radar .rp{fill:var(--bronze);opacity:0;transform-box:fill-box;transform-origin:center;animation:rd-pkt .4s var(--ease) forwards;animation-delay:calc(.35s + var(--i) * .33s)}
@keyframes rd-pkt{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.rd-radar .rd-mitte{fill:var(--tinte)}
.rd-radar.fertig .rd-sweep{animation:none;opacity:0;transition:opacity .3s}
.rd-radar.fertig .rp{opacity:1;fill:#1F7A4D}
.rd-radar-t{font-weight:600;color:var(--tinte-3)}
.rd-radar-ok h3{margin-bottom:8px}
.rd-radar-ok p{color:var(--tinte-3);margin:0 0 14px}
@media (max-width:480px){.rd-form{padding:18px 18px 20px}.rd-wahl{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rd-radar .rd-sweep{animation:none}.rd-radar .rp{animation:none;opacity:1}}
/* Knopf im Schlussblock jeder Seite */
.uk-rechner{display:flex;align-items:center;gap:14px;width:100%;margin-top:12px;padding:12px 16px;min-height:60px;border-radius:var(--radius-klein);border:1.5px dashed var(--bronze);background:transparent;font:inherit;color:var(--tinte);text-align:left;cursor:pointer;transition:background .2s var(--ease),transform .15s var(--ease)}
.uk-rechner:hover{background:rgba(200,135,58,.1)}
.uk-rechner:active{transform:scale(.98)}
.uk-rechner .ic{width:36px;height:36px;flex:none}
.uk-rechner b{display:block;font-size:16px}.uk-rechner small{display:block;font-size:14px;color:var(--tinte-3)}
/* Impressum mit Porträt */
.imp-kopf{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start;margin:8px 0 12px}
.imp-bild{margin:0}
.imp-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--radius)}
.imp-bild figcaption{font-size:13px;color:var(--tinte-3);margin-top:8px}
.imp-kopf h2{margin-top:0}
@media (max-width:600px){.imp-kopf{grid-template-columns:120px 1fr;gap:16px}}
/* Alle 92 Messungen zugeklappt */
.alle-messungen{border-radius:var(--radius);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.08)}
.alle-messungen summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:18px 24px;cursor:pointer;list-style:none}
.alle-messungen summary::-webkit-details-marker{display:none}
.alle-messungen summary b{display:block;font-size:18px}.alle-messungen summary small{display:block;font-size:14px;color:var(--tinte-3)}
.alle-messungen summary svg{width:22px;height:22px;flex:none;transition:transform .25s var(--ease)}
.alle-messungen[open] summary svg{transform:rotate(180deg)}
.alle-messungen .seo-liste{padding:0 24px 24px}
.drop a.alle.shk{margin-top:0;color:var(--tinte-3)}
/* ==== Runde 17: Bühne schärfer — Finger tippt, Kunde wischt zum Mitbewerber, Anruf kommt rein, keine Karriere-Seite, kein Formular ==== */
.pb-finger{position:absolute;z-index:4;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(22,19,14,.55),0 6px 14px -4px rgba(0,0,0,.4);opacity:0;transform:scale(1.6);pointer-events:none}
.mit .pb-finger{background:rgba(250,247,241,.35);box-shadow:0 0 0 2px var(--bronze-hell),0 6px 14px -4px rgba(0,0,0,.6)}
@keyframes pb-tipp{0%{opacity:0;transform:scale(1.6)}35%{opacity:1;transform:scale(1)}55%{transform:scale(.82)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
/* Homepage: heute wischt der Kunde weg */
.pb-web .pb-handy{position:relative}
.pb-weg{position:absolute;left:10px;right:10px;top:10px;bottom:12px;display:flex;flex-direction:column;gap:8px;padding:0;background:#fff;transform:translateX(110%);opacity:0}
.pb-weg .pb-z{opacity:1;background:#E4DED3}
.pb-weg .pb-ruf{opacity:1;transform:none;background:#8A8278;color:#fff}
.pb-panel.an .heute .pb-weg{animation:pb-weg-rein .6s cubic-bezier(.3,.9,.3,1) calc(var(--t) + 2.9s) forwards}
.pb-panel.an .heute .pb-web .pb-seite.alt{animation:pb-weg-raus .6s cubic-bezier(.3,.9,.3,1) calc(var(--t) + 2.9s) forwards}
@keyframes pb-weg-rein{to{transform:none;opacity:1}}
@keyframes pb-weg-raus{to{transform:translateX(-45%);opacity:0}}
/* Homepage mit uns: Tipp auf Anrufen, dann klingelt es */
.pb-web .pb-seite.neu .pb-finger{left:50%;bottom:4px;top:auto;margin:0 0 -2px -19px}
.pb-panel.an .mit .pb-web .pb-finger{animation:pb-tipp .9s ease-out calc(var(--t) + 1.2s) forwards}
.pb-anruf-rein{position:absolute;inset:0;z-index:5;display:grid;place-items:center;align-content:center;gap:4px;border-radius:28px;background:rgba(22,19,14,.92);color:var(--papier);opacity:0;transform:translateY(12px)}
.pb-anruf-rein .pb-ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:#1F7A4D;margin-bottom:8px}
.pb-anruf-rein b{font-size:18px}.pb-anruf-rein small{font-size:13px;color:#D9D2C4}
.pb-panel.an .mit .pb-anruf-rein{animation:pb-auf .4s var(--ease) calc(var(--t) + 1.9s) forwards}
.pb-panel.an .mit .pb-anruf-rein .pb-ring{animation:pb-puls-gruen 1.2s ease-out calc(var(--t) + 2.2s) infinite}
@keyframes pb-puls-gruen{0%{box-shadow:0 0 0 0 rgba(31,122,77,.7)}100%{box-shadow:0 0 0 18px rgba(31,122,77,0)}}
/* Google: Finger tippt Platz 1 */
.pb-google{position:relative}
.pb-google .pb-finger{right:34px;top:79px}
.pb-panel.an .heute .pb-google .pb-finger{animation:pb-tipp .9s ease-out calc(var(--t) + 1.9s) forwards}
.pb-panel.an .mit .pb-google .pb-finger{animation:pb-tipp .9s ease-out calc(var(--t) + 2.3s) forwards}
.pb-panel.an .heute .pb-treffer li:first-child{animation:pb-auf .4s var(--ease) calc(var(--t) + 1s) forwards,pb-rot 0.3s var(--ease) calc(var(--t) + 2.1s) forwards}
@keyframes pb-rot{to{box-shadow:inset 0 0 0 2px #B23A2A;background:#fff}}
/* Bewerber: heute gibt es gar keine Karriere-Seite */
.pb-menue{display:flex;flex-wrap:wrap;gap:4px 8px;padding:6px 8px;border-radius:10px;background:var(--papier-2);font-size:13px;color:var(--tinte-3)}
.pb-menue .pb-fehlt{position:relative;color:#9E2F22;font-weight:700;border:1.5px dashed rgba(178,58,42,.6);border-radius:6px;padding:0 5px;opacity:0}
.pb-panel.an .pb-menue .pb-fehlt{animation:pb-pop .35s cubic-bezier(.2,1.3,.4,1) calc(var(--t) + .9s) forwards,pb-wackeln .4s ease-in-out calc(var(--t) + 1.3s) 2}
@keyframes pb-wackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.pb-keine{margin-top:auto;display:grid;gap:2px;padding:12px 10px;border-radius:12px;background:#F6E3E0;color:#9E2F22;text-align:center;opacity:0;transform:scale(.9)}
.pb-keine b{font-size:15px;font-weight:800}.pb-keine small{font-size:13px;font-weight:600;line-height:1.3}
.pb-panel.an .pb-keine{animation:pb-pop .4s cubic-bezier(.2,1.3,.4,1) calc(var(--t) + 1.8s) forwards}
.pb-bew .pb-seite.neu{position:relative}
.pb-bew .pb-seite.neu .pb-finger,.pb-abend .pb-seite.neu .pb-finger{left:50%;bottom:4px;top:auto;margin:0 0 -2px -19px}
.pb-panel.an .mit .pb-bew .pb-finger{animation:pb-tipp .9s ease-out calc(var(--t) + 1.3s) forwards}
.pb-panel.an .mit .pb-abend .pb-finger{animation:pb-tipp .9s ease-out calc(var(--t) + 1.5s) forwards}
.pb-bew .pb-ok{position:absolute;left:0;right:0;bottom:0;min-height:34px;display:grid;place-items:center;border-radius:var(--pille);background:#1F7A4D;color:#fff;font-size:13px;font-weight:800;opacity:0;transform:scale(.8)}
/* Abends um zehn: das Formular fehlt */
.pb-kein-form{display:grid;gap:2px;place-items:center;padding:14px 8px;border-radius:12px;border:1.5px dashed rgba(178,58,42,.55);color:#9E2F22;text-align:center;opacity:0}
.pb-kein-form b{font-size:14px;font-weight:800;text-decoration:line-through;text-decoration-thickness:2px}.pb-kein-form small{font-size:13px;font-weight:700}
.pb-panel.an .pb-kein-form{animation:pb-pop .35s cubic-bezier(.2,1.3,.4,1) calc(var(--t) + .9s) forwards,pb-wackeln .4s ease-in-out calc(var(--t) + 1.3s) 2}
@media (prefers-reduced-motion:reduce){.pb-finger,.pb-weg,.pb-anruf-rein{display:none}}
.pb-treffer li{position:relative}
.pb-google .pb-finger{right:22px;top:50%;left:auto}
/* ---- Fallstudie: Zahlen in der Karte + Punkte-Grafik (Runde 17) ---- */
.fsz-unten{grid-column:1 / -1;display:grid;gap:clamp(18px,2.4vw,32px);padding-top:clamp(18px,2vw,26px);border-top:1px solid rgba(22,19,14,.1)}
.fsz-unten.mit-punkten{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
.fsz-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.fsz-zahl{display:grid;gap:4px;padding:4px clamp(12px,1.6vw,22px);border-left:1px solid rgba(22,19,14,.1)}
.fsz-zahl:first-child{border-left:0;padding-left:0}
.fsz-zahl .ic{width:40px;height:40px;border-radius:10px;background:var(--bronze);display:grid;place-items:center;margin-bottom:4px}
.fsz-zahl .ic svg{width:20px;height:20px;stroke:var(--tinte);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fsz-zahl .nr{font-size:clamp(34px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--tinte);font-variant-numeric:tabular-nums}
.fsz-zahl small{font-size:14px;color:var(--tinte-3);line-height:1.35}
.fsz-feld{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;max-width:420px}
.fsz-feld i{display:grid;place-items:center;aspect-ratio:1;border-radius:9px;background:var(--papier-2);color:var(--tinte-3);opacity:0;transform:scale(.4)}
.fsz-punkte{display:block;min-width:0}
.fsz-feld i .ic{display:grid;place-items:center;width:100%;height:100%}
.fsz-feld i svg{width:58%;height:58%;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fallstudie.dran .fsz-feld i{animation:fsz-rein .35s cubic-bezier(.2,1.4,.4,1) calc(.3s + var(--i) * 55ms) forwards}
.fallstudie.dran .fsz-feld i.hervor{animation:fsz-rein .35s cubic-bezier(.2,1.4,.4,1) calc(.3s + var(--i) * 55ms) forwards,fsz-hervor .4s var(--ease) calc(.6s + var(--n) * 55ms + var(--i) * 70ms) forwards}
@keyframes fsz-rein{to{opacity:1;transform:none}}
@keyframes fsz-hervor{to{background:var(--bronze);color:var(--tinte);box-shadow:0 6px 14px -6px rgba(200,135,58,.8)}}
.fsz-legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:14px;color:var(--tinte-2);font-weight:600}
.fsz-legende span{display:inline-flex;align-items:center;gap:8px}
.fsz-dot{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--papier-2);box-shadow:inset 0 0 0 1px rgba(22,19,14,.12)}
.fsz-dot.hervor{background:var(--bronze);box-shadow:none}
@media (max-width:900px){.fsz-unten.mit-punkten{grid-template-columns:1fr}}
@media (max-width:560px){.fsz-zahlen{grid-template-columns:1fr}.fsz-zahl{border-left:0;padding:10px 0;border-top:1px solid rgba(22,19,14,.08)}.fsz-zahl:first-child{border-top:0}}
@media (prefers-reduced-motion:reduce){.fsz-feld i{opacity:1;transform:none;animation:none!important}.fsz-feld i.hervor{background:var(--bronze);color:var(--tinte)}}
.fsz-zahlen{grid-template-columns:repeat(3,auto);justify-content:start}
.fsz-zahl .nr{font-size:clamp(32px,3.2vw,48px)}
@media (max-width:560px){.fsz-zahlen{grid-template-columns:1fr}.fsz-zahl{grid-template-columns:40px auto 1fr;align-items:center;column-gap:12px}.fsz-zahl .ic{margin:0}.fsz-zahl .nr{font-size:30px}}
.rd .ic,.uk-rechner .ic{display:inline-grid;place-items:center;flex:none}
.rd-kick .ic{width:22px;height:22px}.rd-wahl .ic{width:24px;height:24px}
.rd .ic svg,.uk-rechner .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uk-rechner .ic{width:40px;height:40px;border-radius:12px;background:var(--bronze);color:var(--tinte);padding:9px}
/* Runde 17: auf dem Handy werden die Arbeiten gewischt statt gescrollt — 18 Kacheln untereinander machten die Seite 14.000 px lang */
@media (max-width:700px){
  #arbeiten .projekte.bento{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--rand) * -1);padding:4px var(--rand) 14px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  #arbeiten .projekte.bento::-webkit-scrollbar{display:none}
  #arbeiten .projekte.bento .projekt{scroll-snap-align:start;grid-row:auto!important;grid-column:auto!important;min-width:0}
  #arbeiten .projekte.bento .projekt.gross .schirm.lang{aspect-ratio:16/10;height:auto}
  #arbeiten .wisch-hinweis{display:block}
}
.wisch-hinweis{display:none;margin:10px 0 0;font-size:14px;color:var(--tinte-3)}

/* ---- Runde 18 (28.09.2026): alle Messungen in der Ranglisten-Sektion, animiert aufklappen ---- */
.rl-auf{margin-top:clamp(20px,2.4vw,32px);interpolate-size:allow-keywords}
.rl-auf summary{transition:background .2s var(--ease)}
.rl-auf summary:hover{background:var(--papier-2)}
.rl-auf summary:active{transform:scale(.99)}
.rl-auf .rl-pfeil{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bronze);color:var(--tinte);flex:none;transition:transform .35s var(--ease)}
.rl-auf .rl-pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.rl-auf[open] .rl-pfeil{transform:rotate(180deg)}
.rl-auf[open] summary svg{transform:none}
.rl-auf::details-content{height:0;overflow:clip;transition:height .55s var(--ease),content-visibility .55s allow-discrete}
.rl-auf[open]::details-content{height:auto}
.rl-auf .seo-liste{padding:0 24px 24px}
.rl-auf[open] .seo-liste li{animation:rl-li .45s var(--ease) both;animation-delay:calc(min(var(--i),30) * 22ms)}
@keyframes rl-li{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rl-auf::details-content{transition:none}.rl-auf[open] .seo-liste li{animation:none}}

/* ---- Runde 18: Rechner sichtbar auf der Seite (wie SHK „Potenzial durchrechnen") ---- */
.rd.rd-inline{position:static;inset:auto;width:100%;max-height:none;margin:0;overflow:visible;box-shadow:none;background:transparent;height:auto}
.rs-karte{background:#fff;border-radius:var(--radius);box-shadow:0 0 0 1px rgba(22,19,14,.08),0 40px 80px -40px rgba(22,19,14,.35);min-height:420px}
.rs-karte .rd-form{padding:clamp(20px,2.6vw,32px)}
.rs-raster{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){.rs-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.rs-text h2{margin-top:10px}
.rs-punkte{display:grid;gap:14px;margin-top:22px}
.rs-punkte li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center}
.rs-punkte .ic{width:44px;height:44px;border-radius:12px;background:var(--bronze-hauch,#F3E4D0);color:var(--bronze-tief,#8A5A22);display:grid;place-items:center}
.rs-punkte .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rs-punkte b{display:block;font-size:16px}.rs-punkte small{display:block;font-size:14px;color:var(--tinte-3)}
.rechner-sek .rd-wahl button:hover{transform:translateY(-1px)}
/* Potenzialanalyse-Seite: Rechner im ersten Bild */
.pa-hero{padding:calc(var(--kopf-h,76px) + clamp(28px,5vw,64px)) 0 clamp(40px,6vw,80px);background:linear-gradient(180deg,var(--papier-2) 0%,var(--papier) 100%)}
.pa-raster{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:980px){.pa-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.pa-text h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-.035em;margin:12px 0 16px}
.pa-text .brot{margin-bottom:18px}
.pa-text .hero-fakten{margin-top:24px;color:var(--tinte-2)}
/* Kontakt: EIN Feld zuerst, mittig */
.anfrage-sek{background:var(--papier)}
.anfrage-mitte{display:grid;justify-items:center;gap:14px;max-width:640px;margin:0 auto}
.anfrage-mitte .sf-form{box-shadow:0 0 0 1px rgba(22,19,14,.08),0 40px 80px -40px rgba(22,19,14,.35)}
.sf-ruhe{font-size:14.5px;color:var(--tinte-2);text-align:center;max-width:60ch;margin:12px auto 0}
.auf-dunkel .sf-ruhe,.band .sf-ruhe{color:var(--papier-3,#D8D0C2)}
.anfrage-oder{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;font-size:15px;color:var(--tinte-2)}
.anfrage-oder .textlink{font:inherit;font-weight:600;background:none;border:0;cursor:pointer;color:var(--tinte)}
.anfrage-oder .ic{width:20px;height:20px}.anfrage-oder .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}
.rl-auf .seo-liste{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.rl-auf .seo-liste li{padding:12px 16px}
.seo-liste li.weit .platz{color:var(--tinte-3);font-weight:600}
.pa-text .brot a,.pa-text .brot span{color:var(--tinte-3)}
.pa-text .hero-fakten b{color:var(--tinte)}
.rs-karte{min-height:0}

/* ---- Runde 18: weitere Ergebnisse (gezählte Bewerbungen und Anfragen) ---- */
.we-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--gap)}
.we-karte{background:rgba(250,247,241,.06);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);display:grid;gap:14px;align-content:start;box-shadow:inset 0 0 0 1px rgba(250,247,241,.1);transition:transform .25s var(--ease),background .25s var(--ease)}
.we-karte:hover{transform:translateY(-3px);background:rgba(250,247,241,.1)}
.we-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.we-logo{display:flex;align-items:center;height:44px;max-width:60%}
.we-logo img{max-height:44px;max-width:100%;width:auto;object-fit:contain}
.we-kopf small{font-size:13.5px;color:var(--papier-3,#D8D0C2);text-align:right}
.we-zahl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.we-zahl .nr{font-size:clamp(44px,5vw,64px);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--bronze-hell,#E0A460)}
.we-zahl b{font-size:18px;color:var(--papier)}
.we-karte p{font-size:15px;color:var(--papier-3,#D8D0C2);line-height:1.5}
.we-sek .fussnote{margin-top:22px;color:var(--papier-3,#D8D0C2)}
.we-vor{font-size:18px;font-weight:700;color:var(--bronze-hell,#E0A460);align-self:flex-start;margin-top:10px}
@media (min-width:980px){.we-raster:has(.we-karte.gross){grid-template-columns:repeat(3,minmax(0,1fr))}.we-karte.gross{grid-column:span 2}.we-karte.gross .we-zahl .nr{font-size:clamp(64px,7vw,96px)}}
.we-kopf small{text-wrap:balance}
.rd-wahl button{border-radius:var(--pille)}
.seo-liste li{border-radius:var(--radius)}
/* Runde 18: Potenzialanalyse — Rechner rechts im Video-Hero */
.hero-klein.mit-rechner .hk-raster{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,48px);align-items:center;position:relative;z-index:2}
@media (min-width:980px){.hero-klein.mit-rechner .hk-raster{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}}
.hero-klein.mit-rechner .hk-rechner{color:var(--tinte)}
.hero-klein.mit-rechner h1{font-size:clamp(38px,5vw,66px)}
.hero-klein.mit-rechner .lead{margin-top:16px;max-width:52ch}.hero-klein.mit-rechner .hero-fakten{margin-top:22px}

/* Runde 18: Galerie ohne Beschnitt — Reihen gleich hoch über das echte Seitenverhältnis */
.galerie figure{max-width:none;background:none;align-self:flex-start}.galerie img{height:auto;display:block}

/* ---- Runde 18b: weitere Fälle gestapelt, gleiche Karte wie die Fallstudie ---- */
.fall-stapel{display:grid;gap:12px;margin-top:clamp(16px,2vw,24px)}
.fz-titel{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-3);margin:6px 0 2px}
.fz{background:var(--papier);border-radius:var(--radius);box-shadow:0 0 0 1px rgba(22,19,14,.06);padding:clamp(16px,2vw,24px) var(--pad);display:grid;grid-template-columns:1fr;gap:12px;align-items:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.fz:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(22,19,14,.1),0 20px 40px -24px rgba(22,19,14,.3)}
@media (min-width:860px){.fz{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.3fr)}}
.fz-wer{display:flex;align-items:center;gap:14px;min-width:0}
.fz-logo{flex:none;display:grid;place-items:center;width:96px;height:56px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,19,14,.06);padding:8px}
.fz-logo.dunkel{background:var(--tinte)}
.fz-logo img{max-width:100%;max-height:100%;object-fit:contain}
.fz-wer small{display:grid;font-size:13.5px;color:var(--tinte-3);line-height:1.35}.fz-wer small b{font-size:15px;color:var(--tinte)}
.fz-zahl{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fz-zahl .nr{font-size:clamp(36px,3.6vw,48px);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--tinte)}
.fz-vor{font-size:15px;font-weight:700;color:var(--bronze-tief,#8A5A22)}
.fz-einheit{font-size:15px;font-weight:700;color:var(--tinte-2)}
.fz p{font-size:15px;color:var(--tinte-2);line-height:1.5}
/* Rechner nur über den Knopf: mittige, symmetrische Zeile */
.rechner-knopf-sek .rk{display:grid;justify-items:center;text-align:center;gap:12px;max-width:760px;margin:0 auto}
.rk > .ic{width:52px;height:52px;border-radius:14px;background:var(--bronze-hauch,#F3E4D0);color:var(--bronze-tief,#8A5A22);display:grid;place-items:center}
.rk > .ic svg,.rk-knopf .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rk-knopf{margin-top:8px}.rk-knopf .ic{width:22px;height:22px;display:inline-grid}
.rk small{font-size:14px;color:var(--tinte-3)}

/* ───────── Wissen / Ratgeber (29.09.2026) ─────────
   Übersicht: Sprungleiste, eine große Karte, dann je Thema ein Raster. Artikel: ruhiger Lesekopf ohne Video,
   links Inhalt + passende Leistung (klebt), rechts Text in 68 Zeichen Breite, Zahlen mit Quelle, Tabelle, FAQ. */
.rg-sprung{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3vw,40px)}
.rg-sprung a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--pille);background:var(--papier-2);font-weight:600;font-size:15px;color:var(--tinte);transition:background var(--schnell),color var(--schnell),transform var(--schnell)}
.rg-sprung a:hover{background:var(--tinte);color:var(--papier)}
.rg-sprung a:active{transform:scale(.97)}
.rg-oben{margin-bottom:clamp(48px,6vw,80px)}
.rg-gruppe{margin-top:clamp(48px,6vw,80px);scroll-margin-top:100px}
.rg-gruppe-titel{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;margin-bottom:22px}
.rg-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.rg-karte{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.2vw,30px);border-radius:var(--radius);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.07);color:var(--tinte);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.grund .rg-karte{background:var(--papier)}
.rg-karte:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(22,19,14,.1),0 22px 44px -24px rgba(22,19,14,.35)}
.rg-karte:active{transform:translateY(-1px) scale(.99)}
.rg-karte h3{font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.02em}
.rg-karte p{font-size:15.5px;line-height:1.55;color:var(--tinte-3);flex:1}
.rg-kat{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-tief)}
.rg-lese{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tinte-3)}
.rg-lese .ic{width:18px;height:18px}.rg-lese .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.rg-pfeil{margin-left:auto;width:36px;height:36px;border-radius:var(--pille);background:var(--papier-2);display:grid;place-items:center;transition:background var(--schnell),transform var(--schnell)}
.rg-pfeil svg{width:16px;height:16px;stroke:var(--tinte);fill:none;stroke-width:2}
.rg-karte:hover .rg-pfeil{background:var(--bronze);transform:translateX(3px)}
.rg-karte.gross{background:var(--tinte);color:var(--papier);box-shadow:none;padding:clamp(28px,4vw,56px);min-height:320px;justify-content:flex-end}
.rg-karte.gross h3{font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:-.035em;max-width:22ch}
.rg-karte.gross p{color:#D9D2C4;font-size:clamp(16px,1.3vw,19px);max-width:60ch;flex:none}
.rg-karte.gross .rg-kat{color:var(--bronze-hell)}
.rg-karte.gross .rg-lese{color:#D9D2C4}
.rg-karte.gross .rg-pfeil{background:rgba(250,247,241,.12)}.rg-karte.gross .rg-pfeil svg{stroke:var(--papier)}
@media (max-width:1000px){.rg-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rg-raster{grid-template-columns:1fr}}

.rg-kopf{padding:calc(var(--kopf-h,84px) + clamp(40px,5vw,72px)) 0 clamp(36px,4vw,56px);background:var(--papier-2)}
.rg-schmal{max-width:980px}
.rg-brot{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--tinte-3);margin-bottom:22px}
.rg-brot a{color:var(--tinte-2);text-decoration:underline;text-underline-offset:3px}
.rg-kopf h1{font-size:clamp(36px,5vw,66px);line-height:1.04;letter-spacing:-.04em;margin:14px 0 18px;max-width:20ch}
.rg-kopf .lead{max-width:62ch}
.rg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:28px;font-size:15px;color:var(--tinte-2)}
.rg-meta img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.rg-meta-rest{display:flex;gap:14px;color:var(--tinte-3)}
.rg-meta-rest span+span::before{content:"·";margin-right:14px}
.rg-inhalt{padding-top:clamp(40px,5vw,72px)}
.rg-raster-artikel{display:grid;grid-template-columns:260px minmax(0,720px);gap:clamp(32px,5vw,80px);justify-content:center;align-items:start}
.rg-seite{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
.rg-toc{border-radius:var(--radius);background:var(--papier-2);padding:18px 20px}
.rg-toc summary{font-weight:700;font-size:15px;cursor:pointer;list-style:none;min-height:28px}
.rg-toc summary::-webkit-details-marker{display:none}
.rg-toc ol{list-style:none;counter-reset:t;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.rg-toc li{counter-increment:t;display:flex;gap:8px;font-size:14px;line-height:1.4}
.rg-toc li::before{content:counter(t);flex:none;font-weight:700;color:var(--bronze-tief);min-width:16px}
.rg-toc a{color:var(--tinte-2);transition:color var(--schnell)}
.rg-toc a:hover{color:var(--bronze-tief)}
.rg-leistung{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--radius);background:var(--tinte);color:var(--papier);transition:transform var(--schnell)}
.rg-leistung:hover{transform:translateY(-2px)}
.rg-leistung .ic{width:36px;height:36px;flex:none}
.rg-leistung small{display:block;font-size:13px;color:#D9D2C4}
.rg-leistung b{font-size:16px}
.rg-text{font-size:18px;line-height:1.7;color:var(--tinte-2)}
.rg-text h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-.03em;color:var(--tinte);margin:0 0 18px;scroll-margin-top:110px}
.rg-teil{margin-top:clamp(48px,5vw,72px)}
.rg-text p{margin:0 0 18px}
.rg-text ul,.rg-text ol{margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.rg-text li::marker{color:var(--bronze)}
.rg-text strong{color:var(--tinte)}
.rg-text a{color:var(--bronze-tief);text-decoration:underline;text-underline-offset:3px}
.rg-kurz{border-radius:var(--radius);background:var(--bronze-hauch);padding:clamp(22px,2.4vw,30px)}
.rg-kurz b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-tief);margin-bottom:8px}
.rg-kurz p{margin:0;font-size:19px;line-height:1.6;color:var(--tinte)}
.rg-zahlen{display:grid;gap:14px;margin:28px 0}
.rg-zahlen.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rg-zahlen.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rg-zahl{margin:0;border-radius:var(--radius);background:var(--tinte);color:var(--papier);padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;transition:transform var(--schnell)}
.rg-zahl:hover{transform:translateY(-3px)}
.rg-zahl .nr{font-size:clamp(40px,4vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--bronze-hell);font-variant-numeric:tabular-nums}
.rg-zahl .nr small{font-size:.5em;margin-left:3px;letter-spacing:0}
.rg-zahl figcaption{font-size:15px;line-height:1.45;color:#E9E3D6}
.rg-quelle{display:block;margin-top:8px;font-size:13px;color:#BFB6A6}
.rg-quelle a{color:#BFB6A6;text-decoration:underline}
.rg-tabelle{margin:26px 0;border-radius:var(--radius);box-shadow:0 0 0 1px rgba(22,19,14,.1);overflow-x:auto;background:#fff}
.rg-tabelle table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45;min-width:520px}
.rg-tabelle caption{caption-side:top;text-align:left;padding:16px 20px 4px;font-weight:700;color:var(--tinte);font-size:15px}
.rg-tabelle th,.rg-tabelle td{padding:13px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--linie)}
.rg-tabelle thead th{border-top:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-3);font-weight:700}
.rg-tabelle tbody th{color:var(--tinte);font-weight:700}
.rg-tabelle tbody tr{transition:background var(--schnell)}
.rg-tabelle tbody tr:hover{background:var(--papier)}
.rg-zitat{margin:26px 0;padding:22px 26px;border-radius:var(--radius);background:var(--papier-2)}
.rg-zitat p{margin:0;font-size:20px;line-height:1.5;font-weight:600;color:var(--tinte);letter-spacing:-.01em}
.rg-zitat cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--tinte-3)}
.rg-faq details{border-radius:var(--radius-klein);background:#fff;box-shadow:0 0 0 1px rgba(22,19,14,.08);margin-bottom:10px;overflow:hidden;transition:box-shadow var(--schnell)}
.rg-faq details[open]{box-shadow:0 0 0 1.5px var(--bronze)}
.rg-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-weight:650;font-size:17px;color:var(--tinte);cursor:pointer;list-style:none;min-height:56px;line-height:1.35}
.rg-faq summary::-webkit-details-marker{display:none}
.rg-faq summary .plus{width:30px;height:30px;border-radius:var(--pille);background:var(--papier-2);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.rg-faq summary .plus svg{width:14px;height:14px;stroke:var(--tinte);fill:none;stroke-width:2.5;stroke-linecap:round}
.rg-faq details[open] .plus{transform:rotate(45deg)}
.rg-faq details p{padding:0 20px 18px;margin:0;font-size:16.5px;line-height:1.6}
@media (max-width:1000px){.rg-raster-artikel{grid-template-columns:minmax(0,1fr)}.rg-seite{position:static}.rg-toc:not([open]){padding-block:14px}}
@media (max-width:640px){.rg-zahlen.n2,.rg-zahlen.n3{grid-template-columns:1fr}.rg-text{font-size:17px}.rg-kurz p{font-size:17.5px}.rg-zitat p{font-size:18px}}
.rg-text h2::before,.rg-gruppe-titel::before{display:none}
.rg-text ul{list-style:disc}.rg-text ol{list-style:decimal}
.rg-leistung .ic svg{width:100%;height:100%;stroke:var(--bronze-hell);fill:none;stroke-width:1.8}
.rg-quellen ol{font-size:15px;line-height:1.55;color:var(--tinte-3);gap:6px}
.fuss .oben:has(.fuss-rg){grid-template-columns:1.3fr .9fr .9fr 1.2fr 1.1fr}
.fuss-rg li a{line-height:1.4;display:inline-block}
@media (max-width:1100px){.fuss .oben:has(.fuss-rg){grid-template-columns:repeat(3,minmax(0,1fr))}.fuss .oben:has(.fuss-rg)>div:first-child{grid-column:1/-1}}
@media (max-width:640px){.fuss .oben:has(.fuss-rg){grid-template-columns:1fr}}
.rg-karte.gross h3{color:var(--papier)}
.rg-gruppe .rg-kat{display:none}
.rg-shk{margin-top:clamp(40px,4vw,56px);padding:20px 24px;border-radius:var(--radius);background:var(--papier-2)}
.rg-shk b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-tief);margin-bottom:10px}
.rg-shk ul{list-style:none;padding:0;margin:0;gap:8px}
/* Ratgeber: Selbsttest + Rechner-Stopp + Frage an Noah (29.09.2026) */
.rg-stopp{margin-top:clamp(40px,4vw,56px);border-radius:var(--radius);background:var(--tinte);color:var(--papier);overflow:hidden}
.rg-test{padding:clamp(22px,2.6vw,32px) clamp(22px,2.6vw,32px) 8px}
.rg-test b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-hell);margin-bottom:6px}
.rg-test>p{margin:0 0 14px;color:#D9D2C4;font-size:16px}
.rg-test ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rg-test label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-klein);background:rgba(250,247,241,.06);cursor:pointer;font-size:16.5px;line-height:1.45;color:var(--papier);transition:background var(--schnell)}
.rg-test label:hover{background:rgba(250,247,241,.11)}
.rg-test input{appearance:none;flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;border:1.5px solid rgba(250,247,241,.5);display:grid;place-items:center;transition:background var(--schnell),border-color var(--schnell)}
.rg-test input:checked{background:var(--bronze);border-color:var(--bronze)}
.rg-test input:checked::after{content:"✓";color:var(--tinte);font-size:14px;font-weight:800;line-height:1}
.rg-test .rg-test-stand{margin:12px 0 0;font-size:15px;color:#D9D2C4}
.rg-test-stand span{font-weight:800;color:var(--bronze-hell)}
.rg-stopp-knopf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);border-top:1px solid rgba(250,247,241,.1)}
.rg-stopp-knopf b{display:block;font-size:19px;color:var(--papier);letter-spacing:-.01em}
.rg-stopp-knopf span{font-size:15px;color:#D9D2C4}
.rg-stopp-knopf .btn .ic{width:20px;height:20px}
.rg-frage{border-radius:var(--radius);background:var(--papier-2);padding:clamp(22px,2.6vw,32px)}
.rg-frage-kopf{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.rg-frage-kopf img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none}
.rg-frage-kopf h2{margin:0 0 4px!important}
.rg-frage-kopf p{margin:0;font-size:16px}
.rg-frage .sf-form{margin:0}
.rg-lesebalken{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--bronze);z-index:200;pointer-events:none}
.rg-stopp .btn.btn-bronze{background:var(--papier);color:var(--tinte);box-shadow:none}
.rg-stopp .btn.btn-bronze:hover{background:var(--bronze-hell);color:var(--tinte)}
.rg-stopp .btn.btn-bronze svg{color:var(--bronze-tief)}
/* Impressum: Foto kleiner (Noah, 29.09.2026) */
.imp-kopf{grid-template-columns:140px 1fr}
@media (max-width:640px){.imp-kopf{grid-template-columns:110px 1fr;gap:18px}}

/* Funnel-Bühne: Anzeige mittig, Funnels links/rechts (29.09.2026) */
.fb-buehne{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;gap:clamp(18px,3vw,48px);max-width:1040px;margin:clamp(32px,4vw,56px) auto 0}
.fb-buehne figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.fb-buehne figcaption{font-size:14px;font-weight:600;color:var(--tinte-3);text-align:center}
.fb-phone .fb-schirm{width:100%;max-width:250px;aspect-ratio:9/19;border-radius:34px;border:8px solid var(--tinte);background:var(--tinte);overflow:hidden;box-shadow:0 30px 60px -30px rgba(22,19,14,.45)}
.fb-phone img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;animation:fb-lauf 26s ease-in-out infinite alternate;display:block}
.fb-r img{animation-delay:-9s}
@keyframes fb-lauf{0%,12%{object-position:50% 0%}88%,100%{object-position:50% 100%}}
.fb-l{transform:translateY(24px) rotate(-3deg)}
.fb-r{transform:translateY(24px) rotate(3deg)}
.fb-video video{width:100%;max-width:300px;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius);background:#000;box-shadow:0 40px 80px -30px rgba(22,19,14,.55);display:block}
.fb-schritte{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);max-width:1040px;margin:clamp(40px,5vw,64px) auto 0}
.fb-schritte li{border-radius:var(--radius);background:var(--papier-2);padding:22px 22px 20px;transition:transform var(--schnell),box-shadow var(--schnell)}
.fb-schritte li:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(22,19,14,.35)}
.fb-nr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bronze);color:var(--tinte);font-weight:800;font-size:15px;margin-bottom:12px}
.fb-schritte b{display:block;font-size:18px;letter-spacing:-.01em;color:var(--tinte);margin-bottom:6px}
.fb-schritte p{margin:0;font-size:15.5px;line-height:1.55;color:var(--tinte-2)}
@media (max-width:900px){
  .fb-buehne{grid-template-columns:1fr 1fr;gap:16px}
  .fb-video{grid-column:1/-1;order:-1}
  .fb-video video{max-width:260px}
  .fb-l,.fb-r{transform:none}
  .fb-phone .fb-schirm{max-width:180px;border-width:6px;border-radius:26px}
  .fb-schritte{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fb-phone img{animation:none}}
.fb-l,.fb-r{transform:translateY(24px)}
.fb-l .fb-schirm{transform:rotate(-3deg)}
.fb-r .fb-schirm{transform:rotate(3deg)}
@media (max-width:900px){.fb-l,.fb-r,.fb-l .fb-schirm,.fb-r .fb-schirm{transform:none}}
/* Zitat unter den Wegen: Bezug vor dem Zitat, Foto statt Symbol (29.09.2026) */
.wege-ende .we-wer{margin:0 0 6px;font-size:14px;color:var(--tinte-3)}
.we-gesicht{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.kt-haken{display:none}
.rd-ergebnis .rd-grob{margin:-4px 0 10px;font-weight:500;font-size:13px}

/* ───────── Mobil-Runde 03.10.2026 (Noah: „mobil über alle Seiten … noch nicht für mobil optimiert") ─────────
   Gemessen mit Playwright bei 390/375/360 px: nichts lief seitlich aus der Seite, aber
   (1) die Rechtszeile im Fuß ragte 7 px über den Seitenrand (white-space:nowrap + zentrierte Spalte),
   (2) Ratgeber-Tabellen mussten seitlich gewischt werden und schnitten Spalten ab → am Handy je Zeile eine Karte,
   (3) h1 38 px / h2 34 px waren kaum abgestuft (Ratgeber: h1 36 px, h2 34 px) → h2 am Handy 28 px,
   (4) lange Seitentitel (Stadt-/Gewerkseiten, über 70 Zeichen → class h1-lang) brauchten 7–8 Zeilen,
   (5) Geschenk-Fenster: Signet links neben mittigem Text, auf kleinen Telefonen Knopf abgeschnitten,
   (6) Tipp-Ziele unter 40 px (Brotkrumen und Inhaltsverzeichnis im Ratgeber, AGB-Link im Fuß). Desktop unverändert. */
@media (max-width:640px){
  h2{font-size:clamp(26px,7.2vw,30px)}
  .ss h3{font-size:24px}
  .hero-klein h1.h1-lang,.rg-kopf h1.h1-lang{font-size:clamp(29px,8.4vw,33px)}
  .fuss .unten{white-space:normal;align-items:flex-start;gap:4px}
  .fuss .unten>span:last-child{display:flex;flex-wrap:wrap;gap:0 18px}
  .fuss .unten a,.fuss .unten .cookie-link{margin:0;min-width:44px}
  .rg-tabelle{overflow:visible;background:transparent;box-shadow:none;border-radius:0}
  .rg-tabelle table,.rg-tabelle tbody,.rg-tabelle tr{display:block;min-width:0}
  .rg-tabelle caption{display:block;padding:0 0 12px;font-size:16px}
  .rg-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rg-tabelle tbody tr{background:#fff;border-radius:var(--radius);box-shadow:0 0 0 1px rgba(22,19,14,.1);margin-bottom:12px;overflow:hidden}
  .rg-tabelle tbody tr:hover{background:#fff}
  .rg-tabelle tbody th{display:block;padding:14px 18px 12px;border-top:0;background:var(--papier-2);font-size:16px}
  .rg-tabelle td{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:4px 14px;padding:11px 18px;font-size:15px}
  .rg-tabelle td::before{content:attr(data-label);font-size:13px;line-height:1.45;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-3)}
}
@media (max-width:1000px){
  .rg-brot{gap:0 8px;align-items:center;margin-bottom:8px}
  .rg-brot a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;margin-inline:-4px}
  .rg-toc ol{gap:0;margin-top:6px}
  .rg-toc a{display:block;padding-block:10px}
  .rg-toc li::before{padding-top:10px}
}
/* Geschenk-Fenster (/static/assets/lp/lp.css, auf den Stadt- und Gewerkseiten inline): am Handy kompakt, Signet raus aus dem mittigen Kicker */
.lp-geschenk .lg-auf .kicker::before{display:none}
@media (max-width:760px){
  .lp-geschenk .lg-auf,.lp-geschenk .lg-warnung{gap:10px;padding:60px 20px 22px}
  .lp-geschenk .lg-box{width:72px;height:72px}
  .lp-geschenk .lg-koerper{font-size:40px}
  .lp-geschenk .lg-auf h3{font-size:25px}
  .lp-geschenk .lg-warnung h3{font-size:24px}
  .lp-geschenk .lg-auf p,.lp-geschenk .lg-warnung p{font-size:15.5px;line-height:1.5}
}
@media (max-width:760px) and (max-height:700px){
  .lp-geschenk .lg-auf,.lp-geschenk .lg-warnung{padding-top:56px;gap:8px}
  .lp-geschenk .lg-box{width:56px;height:56px}
  .lp-geschenk .lg-koerper{font-size:32px}
}

/* Lange Einzelwörter in Überschriften trennen statt aus dem Bild ragen (Noah, 03.10.2026: mobil alle Seiten). */
@media(max-width:640px){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 6;overflow-wrap:break-word}}

/* ═══════ HANDY-FASSUNG (03.10.2026) — jede Sektion am Telefon bewusst gestaltet ═══════
   🔴 Noah: „Das ist doch nicht mobil optimiert … die drei Balken ‚gefunden', ‚gesehen', ‚gebucht' kann man auch
   mobil in geilen Animationen machen … ‚gemessen, nicht behauptet' vielleicht sogar zentriert."
   Alles hier greift NUR bis 760 px. Die Klassen lgm / ssm / stapelm / trpm setzt /static/main.js nur am Handy (matchMedia),
   ohne Skript oder mit reduzierter Bewegung bleibt die gestapelte Fassung. Desktop bleibt Pixel für Pixel gleich.
   Bewegung nur über transform/opacity; eine Fortschritts-Rechnung je Bühne, ein rAF-Takt. */
.lgm-titel,.lgm-schalter{display:none}
@media (max-width:760px){
  /* ── „Gute Arbeit reicht nicht mehr": fünf Momente als Symbol-Leiste, Heute → Mit uns als Wisch im selben Rahmen ── */
  .lg-buehne.lgm{gap:0}
  .lgm .lg-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;overflow:visible;margin:0;padding:0}
  .lgm .lg-tab{flex:none;min-height:58px;padding:0;justify-content:center;border-radius:18px;transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
  .lgm .lg-tab:hover{transform:none}
  .lgm .lg-tab b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lgm .lg-ic{width:40px;height:40px;background:transparent}
  .lgm .lg-ic svg{width:22px;height:22px}
  .lgm .lg-tab.an{transform:translateY(-4px);box-shadow:0 14px 26px -14px rgba(22,19,14,.55)}
  .lgm .lg-tab.an .lg-ic{background:transparent}
  .lgm .lg-tab .lauf{left:14px;right:14px;width:auto;bottom:8px;height:3px;border-radius:3px}
  .lgm-titel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;margin:18px 0 14px;min-height:56px}
  .lgm-titel small{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-tief)}
  .lgm-titel b{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--tinte)}
  .lgm-titel.neu b,.lgm-titel.neu small{animation:lgm-titel .45s var(--ease) both}
  .lgm-titel.neu small{animation-duration:.35s}
  @keyframes lgm-titel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  /* Schalter „Ohne uns | Mit uns": klein, oben im Rahmen, springt beim automatischen Wechsel mit (05.10.2026) */
  .lgm-schalter{display:grid;grid-template-columns:1fr 1fr;position:absolute;z-index:5;top:12px;left:50%;transform:translateX(-50%);width:196px;padding:3px;border-radius:var(--pille);background:rgba(241,236,226,.92);box-shadow:inset 0 0 0 1px rgba(22,19,14,.08);transition:background .45s var(--ease)}
  .lgm-schalter button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--tinte-2);border-radius:var(--pille);cursor:pointer;transition:color .35s var(--ease)}
  .lgm-schalter button::after{content:"";position:absolute;inset:-6px -2px}  /* Tippfläche ≥ 44 px */
  .lgm-schalter button i{font-style:normal;font-size:13px;font-weight:800}
  .lgm-schalter .lgm-daumen{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--pille);background:#fff;box-shadow:0 3px 10px -5px rgba(22,19,14,.4);transition:transform .55s cubic-bezier(.2,.9,.25,1.15),background .45s var(--ease)}
  .lgm-schalter[data-mit="0"] button:first-of-type{color:#9E2F22}
  .lgm-schalter[data-mit="1"]{background:rgba(250,247,241,.14)}
  .lgm-schalter[data-mit="1"] .lgm-daumen{transform:translateX(100%);background:var(--bronze)}
  .lgm-schalter[data-mit="1"] button{color:rgba(250,247,241,.72)}
  .lgm-schalter[data-mit="1"] button:last-of-type{color:var(--tinte)}
  .lgm .lg-seite .lg-etikett{visibility:hidden}  /* der Schalter sagt es schon — Platz bleibt, nichts springt */
  .lgm .lg-panels{min-height:var(--lgm-h,0px);touch-action:pan-y}
  .lgm .lg-panel,.pb-sek .lgm .lg-panel{display:grid;grid-template-columns:minmax(0,1fr);min-height:var(--lgm-h,0px);background:none;box-shadow:none;border-radius:var(--radius)}
  .lgm .lg-panel[hidden]{display:none}
  .lgm .lg-seite{grid-area:1/1;min-height:0;border-radius:var(--radius);box-shadow:0 0 0 1px rgba(22,19,14,.08)}
  .lgm .lg-seite.heute{background:#fff}
  .lgm .lg-seite.mit{visibility:hidden}
  .lgm .lg-panel.mit-an .lg-seite.mit{visibility:visible;animation:pb-wisch .9s cubic-bezier(.7,0,.2,1) both}
  .lgm .lg-panel:not(.mit-an) .lg-seite.heute{animation:pb-rein-l .45s var(--ease) both}
  .lgm .pb-vs{display:none}
  .lgm .mit .pb-g{--t:1s}  /* wie am Desktop — .45 s war am Handy zu schnell (Noah, 05.10.2026) */
  .lgm .lg-seite p{text-align:center}
  .lgm .lg-seite .lg-etikett{align-self:center}
  /* ── „Drei Säulen": die drei Säulen des Logos wachsen beim Scrollen nacheinander aus dem Boden ── */
  .ssm-sek,.stapelm-sek{overflow:clip}  /* hidden würde das Kleben (sticky) verhindern */
  .system-saeulen.ssm{display:block;height:360svh;margin-top:8px;position:relative}
  .ssm-klebt{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:80px 0 22px}
  .ssm-saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;height:min(40svh,360px);border-bottom:3px solid var(--tinte)}
  .ssm .ss-hub{clip-path:none;transition:none;overflow:hidden;height:100%;position:relative}
  .ssm .ss-hub:nth-child(1){height:73%}
  .ssm .ss{min-height:0;height:100%;border-radius:0;--dt:16%;transform:translate3d(0,101%,0);will-change:transform;transition:none}
  .ssm .ss-hub:nth-child(1) .ss{--dt:22%}
  .ssm .ss-in{display:none}
  .ssm .ss .ss-bild::after{background:linear-gradient(180deg,rgba(22,19,14,0) 45%,rgba(22,19,14,.75) 100%)}
  .ssm .ss .ss-bild img,.ssm .ss .ss-bild video{opacity:.55;transition:opacity .45s var(--ease)}
  .ssm .ss-hub.an .ss .ss-bild img,.ssm .ss-hub.an .ss .ss-bild video{opacity:.92}
  .ssm .ss::after{content:"01";position:absolute;z-index:2;left:12px;bottom:10px;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--papier);transition:color .35s var(--ease)}
  .ssm .ss-hub:nth-child(2) .ss::after{content:"02"}
  .ssm .ss-hub:nth-child(3) .ss::after{content:"03"}
  .ssm .ss-hub.an .ss::after{color:var(--bronze-hell)}
  .ssm~.ss-boden{display:none}
  .ssm-texte{display:grid}
  .ssm-text{grid-area:1/1;display:grid;gap:8px;align-content:start;opacity:0;transform:translateY(18px);transition:opacity .3s var(--ease),transform .45s var(--ease);pointer-events:none}
  .ssm-text.an{opacity:1;transform:none;pointer-events:auto}
  .ssm-text .nummer{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--bronze-tief)}
  .ssm-text h3{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--tinte)}
  .ssm-text .ss-was{font-size:14px;font-weight:700;color:var(--tinte-2)}
  .ssm-text p{font-size:15.5px;line-height:1.5;color:var(--tinte-2)}
  .ssm-text .ss-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .ssm-text .ss-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:var(--pille);background:var(--tinte);color:var(--papier);font-size:14.5px;font-weight:700;transition:background var(--schnell),transform var(--schnell)}
  .ssm-text .ss-links a:active{transform:scale(.97)}
  .ssm-text .ss-links a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
  /* ── „Gemessen, nicht behauptet": mittig und kompakt, das Raster baut sich Säule für Säule auf ── */
  .zahlen-buehne{height:300svh}  /* 215 → 300: jedes Ergebnis bekommt Haltezeit (05.10.2026) */
  .zs-klebt{padding:72px 0 64px}
  .zs-klebt>.zs-raster{display:flex;flex-direction:column;align-items:center;gap:18px}
  .zs-text{order:1;width:100%;min-height:0;height:250px;display:flex;flex-direction:column;align-items:center}
  .zs-szene{left:0;right:0;top:38px;text-align:center;transform-origin:50% 40%}
  .zs-szene b,.zs-szene p{margin-inline:auto}
  .zs-szene b{font-size:23px;max-width:17ch}
  .zs-szene p{font-size:15.5px;max-width:30ch;margin-top:10px}
  .zs-nr{font-size:88px}
  .zs-bild{order:2;width:min(300px,44svh);max-width:none;margin:0}
  .zs-feld{width:100%}
  .zs-feld i{opacity:.4;transform:scale(.72);transition:background .25s var(--ease),transform .4s cubic-bezier(.2,1.5,.4,1),opacity .25s var(--ease)}
  .zs-feld i.an{opacity:1;transform:none}
  .zs-wasser{left:50%;width:120vw;transform:translateX(-50%);bottom:-14%}
  /* ── „Was dabei rauskommt": die drei Fälle legen sich beim Scrollen übereinander wie ein Kartenstapel ── */
  /*    Dieselbe Bauform auf den Unterseiten: „Was du bekommst" (Bento) stapelt sich genauso. */
  .stapelm{display:block}
  .stapelm>*{position:sticky;top:calc(84px + var(--n,0) * 14px);margin-bottom:22px;transform-origin:50% 0;box-shadow:0 -12px 30px -18px rgba(22,19,14,.35),0 0 0 1px rgba(22,19,14,.06)}
  .stapelm>:nth-child(2){--n:1}.stapelm>:nth-child(3){--n:2}.stapelm>:nth-child(4){--n:3}.stapelm>:nth-child(5){--n:4}
  .stapelm>:last-child{margin-bottom:0}
  .auf-dunkel .stapelm>*{box-shadow:0 -14px 30px -16px rgba(0,0,0,.7),0 0 0 1px rgba(250,247,241,.08)}
  /* ── „So läuft es ab" (Treppe): am Handy ein Zeitstrahl, die Linie läuft mit dem Daumen mit, jede Stufe leuchtet auf ── */
  .trpm{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-left:56px}
  .trpm::before,.trpm-linie{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:3px;border-radius:3px;background:var(--papier-3)}
  .auf-dunkel .trpm::before{background:rgba(250,247,241,.14)}
  .trpm-linie{background:var(--bronze);transform-origin:50% 0;transform:scaleY(0);will-change:transform}
  .trpm .stufe{min-height:0;opacity:.5;transform:translateX(10px);transition:opacity .4s var(--ease),transform .45s var(--ease)}
  .trpm .stufe.dran{transform:translateX(10px)}
  .trpm .stufe.an{opacity:1;transform:none}
  .trpm .stufe .ic{position:absolute;left:-56px;top:16px;width:46px;height:46px;border-radius:50%;background:var(--papier-3);color:var(--tinte-2);box-shadow:0 0 0 5px var(--papier);transition:background .35s var(--ease),color .35s var(--ease),transform .4s cubic-bezier(.2,1.5,.4,1)}
  .grund .trpm .stufe .ic{box-shadow:0 0 0 5px var(--papier-2)}
  .auf-dunkel .trpm .stufe .ic{background:#2A251D;color:#CFC8BB;box-shadow:0 0 0 5px var(--tinte)}
  .trpm .stufe.an .ic{background:var(--bronze);color:var(--tinte);transform:scale(1.08)}
  /* ── Foto-Galerie (Foto & Video): zwei Spalten statt einer 2600-px-Säule, je Reihe ein breites Bild vorweg;
        jedes Bild zoomt beim Hereinkommen aus der Nähe in seinen Rahmen ── */
  .galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .galerie .reihe{display:contents}
  .galerie figure,.galerie .reihe.kurz figure{flex:none;align-self:stretch}
  .galerie .reihe>figure:first-child{grid-column:1/-1}
  .galerie .reihe>figure:not(:first-child) img{aspect-ratio:1/1;height:100%}
  .galerie .reihe>figure:last-child:nth-child(even){grid-column:1/-1}  /* keine halbe Reihe */
  .galerie .reihe>figure:last-child:nth-child(even) img{aspect-ratio:var(--verh);height:auto}
  .galerie figure.reveal img{transform:scale(1.14);transition:transform 1.1s var(--ease)}
  .galerie figure.reveal.dran img{transform:none}
  .galerie figcaption{left:8px;bottom:8px;right:8px;width:max-content;max-width:calc(100% - 16px);font-size:13px;padding:5px 9px;line-height:1.3}
  .fuss .ki-i{font-size:13px}
  /* ── „Frag Google einfach selbst": der Kasten behält seine Höhe, während getippt wird — nichts darunter springt ── */
  .google .suche{min-height:var(--suche-h,264px)}
  /* ── Fuß: Leistungen und Unternehmen nebeneinander statt einer langen Liste ── */
  .fuss .oben,.fuss .oben:has(.fuss-rg){grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:34px 16px}
  .fuss .oben>div:first-child,.fuss .oben>div:nth-child(n+4){grid-column:1/-1}
  .fuss .oben li a{font-size:15px}
}
/* Kleine Telefone (375 × 667): Bühnen etwas niedriger, damit Raster und Fußzeile sich nicht berühren */
@media (max-width:760px) and (max-height:720px){
  .zs-klebt{padding:64px 0 74px}
  .zs-text{height:214px}
  .zs-nr{font-size:72px}
  .zs-szene{top:30px}
  .zs-szene b{font-size:21px}
  .zs-szene p{margin-top:6px}
  .zs-bild{width:min(250px,36svh)}
  .ssm-saeulen{height:34svh}
  .ssm-klebt{gap:14px;padding-top:72px}
  .ssm-text h3{font-size:30px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .lgm .lg-panel.mit-an .lg-seite.mit,.lgm .lg-panel:not(.mit-an) .lg-seite.heute,.lgm-titel.neu b,.lgm-titel.neu small{animation:none}
  .zs-feld i{opacity:1;transform:none}
  .galerie figure.reveal img{transform:none;transition:none}
  .zahlen-buehne{height:auto}.zs-klebt{padding:var(--sekt) 0}.zs-text{height:auto}.zs-szene{position:relative;top:auto;margin-top:28px}
}

/* ═══════ Prüfrunde 04.10.2026 (Noah: „überprüf alles nochmal komplett … Handy, Tablet, Scrollen, Ladezeiten") ═══════
   Gemessen mit Playwright in 9 Ansichten über alle 49 Seiten. Desktop (≥ 1200 px, Höhe > 500 px) bleibt unberührt. */
@media (max-width:760px){
  /* h1 > h2 > h3: das Säulen-Wort („Gefunden.") war mit 34 px größer als jede h2 (26–30 px) */
  .ssm-text h3{font-size:clamp(24px,6.4vw,27px)}
}
/* Inhaltsverzeichnis im Ratgeber: „Inhalt" war ein 28 px hohes Tipp-Ziel */
@media (max-width:1000px){.rg-toc summary{display:flex;align-items:center;min-height:44px;margin-block:-8px}}
/* Handy quer und flache Fenster (über 760 px breit, unter 500 px hoch): Startbild, Zahlen-Bühne und Geschenk-Fenster passen in die Höhe */
@media (min-width:761px) and (max-height:500px){
  .hero-text{padding-bottom:14px}
  .hero-text .wrap{gap:10px}
  .hero-text h1{font-size:clamp(36px,4.6vw,52px);max-width:none}  /* h1 bleibt größer als h2 (4,2vw) */
  .hero-text .lead{font-size:15px}
  .saeule .etikett{display:none}
  .hero-klein .wrap{padding:calc(var(--kopf) + 14px) 0 36px;gap:14px}
  .hero-klein h1,.hero-klein h1.h1-lang{font-size:clamp(36px,4.6vw,52px);max-width:24ch}
  .zs-klebt{padding:calc(var(--kopf) - 6px) 0 72px}
  .zs-text{min-height:210px}
  .zs-bild{aspect-ratio:auto;height:calc(100svh - var(--kopf) - 90px)}
  .zs-feld{width:min(100%,calc((100svh - var(--kopf) - 110px) * 1.4))}
  .zs-nr{font-size:clamp(64px,24svh,110px)}
  .zs-szene b{font-size:22px;margin-top:10px}
  .zs-szene p{font-size:15px;margin-top:8px}
  .lp-geschenk .lg-auf,.lp-geschenk .lg-warnung{gap:8px;padding:18px 64px}
  .lp-geschenk .lg-box{display:none}
  .lp-geschenk .lg-auf h3,.lp-geschenk .lg-warnung h3{font-size:24px}
  .lp-geschenk .lg-auf p,.lp-geschenk .lg-warnung p{font-size:15px;line-height:1.45}
  .lp-geschenk .lg-auf .btn,.lp-geschenk .lg-warnung .btn{min-height:48px;margin-top:2px}
}
/* „Der Chef spricht selbst" (Bento, Unterseiten): unter 900 px waren die zwei Handy-Videos ausgeblendet — übrig blieb eine
   leere dunkle Karte. Kleiner, aber sichtbar; die Videos laden erst im Bild (data-lazy). */
@media (max-width:900px){
  .zelle.mit-handys{min-height:420px}
  .zelle.mit-handys .handys-k{display:flex;right:18px;top:18px;gap:10px}
  .zelle.mit-handys .handys-k video{width:min(96px,24vw)}
}
/* Tablets und andere Touch-Geräte über 1000 px (z. B. 1024 × 768 quer): dieselben Tipp-Ziele wie am Handy. Nur bei
   grobem Zeiger — mit Maus bleibt der Desktop unverändert. Gemessen: Brotkrumen 22 px, Inhaltsverzeichnis 20 px,
   „AGB" im Fuß 28 px breit, SHK-Hinweis 23 px hoch. */
@media (pointer:coarse){
  .fuss .unten a{min-width:44px;justify-content:center}
  .rg-shk li a{display:inline-flex;align-items:center;min-height:44px}
  .rg-brot a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;margin-inline:-4px}
  .rg-toc summary{display:flex;align-items:center;min-height:44px;margin-block:-8px}
  .rg-toc ol{gap:0;margin-top:6px}
  .rg-toc a{display:block;padding-block:10px}
  .rg-toc li::before{padding-top:10px}
}
/* Reduzierte Bewegung: die Zahlen-Bühne steht auf der letzten Szene — dort war das Raster auf 8 % gedimmt (Platz für die
   Sterne, die bei reduzierter Bewegung ausgeblendet sind). Übrig blieb ein leerer Kasten. Raster voll zeigen: 66 Seiten, 35 auf Platz 1. */
@media (prefers-reduced-motion:reduce){.zahlen-buehne[data-szene="2"] .zs-feld{opacity:1;transform:none}}
/* „Abends um zehn" bei 360 px: die Uhrzeit „22:04" ragte 4 px über den Kartenrand */
@media (max-width:380px){.pb-abend{column-gap:10px}.pb-uhrzeit b{font-size:30px}}
/* Ratgeber-Übersicht: die große Artikelkarte (h3, 28 px) war am Handy und Tablet größer als die Gruppentitel (h2, 26 px).
   h1 > h2 > h3 — die Karte bleibt deutlich größer als die übrigen Karten (19 px). Ab 1200 px unverändert. */
@media (max-width:1180px){.rg-karte.gross h3{font-size:calc(clamp(26px,2.6vw,36px) - 2px)}}

/* Wisch-Hinweis auf der Moment-Bühne (04.10.2026): die Karte stupst einmal an, zwei kleine Pfeile am Rand bis zum ersten Wisch */
.lgm-hinweis{display:none}
@media (max-width:760px){
  .lgm-hinweis{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
  .lgm-hinweis i{position:absolute;top:30px;width:30px;height:30px;margin-top:-15px;  /* auf Höhe des Schalters — bei 46 % lag der Pfeil über „22:04" (05.10.2026) */ border-radius:50%;display:grid;place-items:center;background:rgba(22,19,14,.82);color:#FAF7F1;box-shadow:0 6px 16px -8px rgba(22,19,14,.6);opacity:0;transition:opacity .5s var(--ease)}
  .lgm-hinweis i svg{width:16px;height:16px}
  .lgm-hinweis .r{right:-9px}
  .lgm-hinweis .l{left:-9px;transform:scaleX(-1)}
  .lgm-hinweis.zeigt .r{opacity:.86;animation:lgm-pfeil 1.5s ease-in-out 1.2s 3}
  .lgm-schalter[data-mit="1"] ~ .lgm-hinweis.zeigt .l{opacity:.86}
  .lgm-hinweis.lgm-aus i{opacity:0 !important;animation:none}
  .lgm .lg-panels.stupst{animation:lgm-stups 1.1s cubic-bezier(.3,.7,.3,1) both}
  @keyframes lgm-stups{0%{transform:none}32%{transform:translate3d(-18px,0,0)}58%{transform:translate3d(3px,0,0)}78%{transform:translate3d(-6px,0,0)}100%{transform:none}}
  @keyframes lgm-pfeil{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-5px,0,0)}}
}
@media (prefers-reduced-motion:reduce){.lgm .lg-panels.stupst,.lgm-hinweis.zeigt .r{animation:none}}

/* Rastpunkte der Zahlen-Bühne (05.10.2026): sanftes Einrasten am Ergebnis, nur wenn die Bühne Rastpunkte gesetzt hat */
html.zs-rastet{scroll-snap-type:y proximity}
.zs-rast{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:normal}

/* ═══ Handy-Runde 06.10.2026 — alles nur bis 760 px, Desktop bleibt unberührt ═══ */
@media (max-width:760px){
  /* „Frag Google einfach selbst": der getippte Begriff bricht um statt abgeschnitten zu werden (auch
     „zimmerei dießen am ammersee" bei 360 px). Das Feld hat Platz für zwei Zeilen, damit beim Tippen nichts springt. */
  .google .suchfeld{min-height:84px;padding:14px 18px;gap:12px;font-size:18px;line-height:1.35}
  .google .suchfeld .tipp{white-space:normal;overflow:visible;overflow-wrap:anywhere;min-width:0}
  /* Kasten so hoch wie mit Treffer (gemessen 282–285 px bei 360–390): beim Wechsel tippen → Treffer springt darunter nichts */
  .google .suche{min-height:292px}
}
/* Handy: kein Einrasten des ganzen Dokuments (zog jeden Halt ±200 px nach, auch rückwärts) — siehe main.js, Zahlen-Bühne */
@media (max-width:760px){html.zs-rastet{scroll-snap-type:none}}
/* Collage über „Was ist in deinem Umkreis drin?" (Start + Unterseiten) am Handy: ruhiges Raster aus drei Spalten —
   Film 2 × 2 oben links, fünf große Bilder drumherum. Quadrate kommen allein aus aspect-ratio (kein height:100 % im
   Raster: Safari rechnete das bei Bildern mit 360-px-Maßangabe falsch), der Film füllt seine Fläche absolut. */
@media (max-width:760px){
  .uk-bild .collage.mit-film{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:8px;flex:none}
  .uk-bild .collage.mit-film img{height:auto;aspect-ratio:1/1;border-radius:16px;min-width:0}
  .uk-bild .collage.mit-film img:nth-child(n+7){display:none}
  .uk-bild .collage.mit-film .c-film{position:relative;border-radius:16px;min-width:0;min-height:0}
  .uk-bild .collage.mit-film .c-film video{position:absolute;inset:0}
}
/* Sicherheitsnetz Intro (Handy): kommt main.js nicht oder spät an (schwaches Netz, Inhaltsblocker), blieb der schwarze
   Vorhang mit dem Signet stehen. Nach 3,6 s geht er auch ohne JavaScript (sonst nimmt main.js ihn nach 2,15 s weg). */
@media (max-width:760px){#intro{animation:mo-intro-weg .3s linear 3.6s forwards}}
@keyframes mo-intro-weg{to{opacity:0;visibility:hidden;pointer-events:none}}
/* Team-Bahn (Start, Über uns): die Regel „margin-inline:auto" (Desktop-Breite 1120 px) hob am Handy den negativen Rand auf —
   die Bahn endete 20 px vor dem Bildschirmrand, die zweite Karte war hart abgeschnitten. Jetzt läuft sie bis an den Rand. */
@media (max-width:760px){.team-drei{margin-inline:calc(var(--rand) * -1);max-width:none;scroll-padding-inline:var(--rand)}}
/* „Ganze Fallstudie" im Kartenstapel: die zurücktretende Karte schrumpft auf 93 % — der Link (44 px) wurde 41 px. Etwas mehr Tippfläche. */
@media (max-width:760px){.stapelm .textlink{position:relative}.stapelm .textlink::after{content:"";position:absolute;inset:-4px 0}}
/* Ratgeber am Handy: Tippflächen ≥ 44 px (gemessen: Inhaltsverzeichnis 40 px hoch, „Start" in der Brotkrume 41 px breit,
   Quellen-Links unter den Zahlen 18 px hoch). Ohne sichtbare Verschiebung: Polster und gleich großer negativer Rand. */
@media (max-width:760px){
  .rg-toc a{padding-block:12.5px}
  .rg-toc li::before{padding-top:12.5px}
  .rg-brot a{padding-inline:6px;margin-inline:-6px}
  .rg-quelle a{padding-block:14px;margin-block:-14px}
  /* Handy-Bahn (Mitarbeitergewinnung): läuft bis an den Bildschirmrand statt 22 px davor hart abgeschnitten */
  .handys{margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);scroll-padding-inline:var(--rand)}
}
/* Momente-Bühne, kleine Telefone: Zeichen ✕/✓ im Etikett 12 → 13 px (Hausregel: nichts unter 13 px) */
@media (max-width:760px){.lg-etikett i{font-size:13px}}
/* Ratgeber-Tabellen am Handy: lange Einzelwörter in der Beschriftungsspalte („Größenordnung" 167 px in einer 113-px-Spalte,
   „Einschätzung", „Bewerbungen", „Warnzeichen") liefen in den Wert daneben — jetzt mit Trennstrich umbrochen. */
@media (max-width:760px){.rg-tabelle td::before{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;min-width:0}}
/* KI-Hinweis: das × misst während der Einblend-Animation 43 px — unsichtbar etwas größere Tippfläche */
@media (max-width:760px){.kt-zu::after{content:"";position:absolute;inset:-3px;border-radius:50%}}