/* ==========================================================================
   LEMORO — Agenturseite, Fassung V3 (08.10.2026, Runde 17)
   Aus Leons Vergleich V1/V2: hell wie V1, gelobte Teile aus V2 (Leistungen-Filme, Ablauf-Balken,
   Branchen, Fragen), neu: Aufmacher mit 3D-Bühne, Arbeiten ohne Textballast, Preise Mieten/Kaufen,
   Code-Werkbank, Fuß als Bühne. Eine Formensprache (U70): EIN Radius (U62), drei Knopfarten,
   Abschnittsköpfe in drei Formen (U32), Petrol nur als Auszeichnung (U23).
   Klassennamen: .werk .werkbank .szene .such .preise .ablauf .station .adresse
   ========================================================================== */

/* --- 0 · Schriften (lokal, OFL) ------------------------------------------ */
@font-face{font-family:"Geist";src:url(fonts/geist-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url(fonts/geist-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";src:url(fonts/geistmono-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";src:url(fonts/geistmono-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}

/* --- 1 · Token ---------------------------------------------------------- */
:root{
  color-scheme:light;
  --grund:#FFFFFF;          /* hell wie V1 (Runde 17) */
  --ton:#F2F6F6;            /* die eine Nachbartonstufe für ganze Abschnitte */
  --tiefe:#E5EDEC;
  --linie:#D7E1E0;
  --linie-zart:rgba(10,20,19,.08);
  --tinte:#0A1413;
  --tinte-2:#27322F;
  --stumm:#4D5B5A;          /* 6,6:1 auf --ton, 7,1:1 auf Weiß */
  --marke:#006666;          /* der Balken aus der Wortmarke */
  --marke-hell:#0B7A78;
  --nacht:#052221;          /* Rückseite der Visitenkarte — nur Fuß und das empfohlene Paket */
  --nacht-2:#0B302E;
  --nacht-linie:rgba(232,242,240,.15);
  --nacht-text:#E8F2F0;
  --nacht-stumm:#A7BEBB;
  --marke-auf-nacht:#43C2B5;
  --frei:#14BE87;           /* nur: „online / frei“ */

  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --rand:clamp(16px,4.45vw,64px);
  --spur:min(100% - 2*var(--rand), 1312px);
  --luft:clamp(52px,6.4vw,80px);

  --aus:cubic-bezier(.23,1,.32,1);        /* hinein, Reaktion */
  --hin-her:cubic-bezier(.77,0,.175,1);   /* Bewegung auf dem Schirm */
  --schub:cubic-bezier(.32,.72,0,1);      /* Fliegen, Blätter */

  --r:14px;                 /* U62: EIN Radius für alles Gestaltete, sichtbar weich (Runde 17: „sehr eckig“) */
  --kopf-h:72px;
  --schatten:0 1px 2px rgba(5,34,33,.05),0 8px 18px -8px rgba(5,34,33,.12),0 30px 60px -28px rgba(5,34,33,.22);
  --schatten-gross:0 2px 4px rgba(5,34,33,.05),0 22px 44px -18px rgba(5,34,33,.24),0 60px 110px -50px rgba(5,34,33,.4);
}
@media (min-width:1680px){:root{--spur:min(100% - 2*var(--rand),1440px)}}

/* --- 2 · Grundlage ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11";overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
a,button,label,summary,input{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,102,102,.14)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--marke);color:#fff}
:focus-visible{outline:2px solid var(--marke);outline-offset:3px;border-radius:var(--r)}
.nacht :focus-visible{outline-color:var(--marke-auf-nacht)}
[hidden]{display:none!important}
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprung{position:fixed;left:12px;top:-60px;z-index:100;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:var(--r);text-decoration:none;font-weight:600}
.sprung:focus{top:12px}

.spur{width:var(--spur);margin-inline:auto}
.kapitel{padding-block:var(--luft)}
.kapitel--ton{background:var(--ton)}

/* --- 3 · Schrift --------------------------------------------------------- */
.titel-xl{font-weight:600;font-size:clamp(40px,min(4.6vw,8.6svh),76px);line-height:1;letter-spacing:-.048em}
.titel-l{font-weight:600;font-size:clamp(32px,4.2vw,62px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.titel-m{font-weight:600;font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.titel-s{font-weight:600;font-size:clamp(19px,1.6vw,22px);line-height:1.22;letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--tinte-2);letter-spacing:-.005em;text-wrap:pretty}
.text{color:var(--stumm);text-wrap:pretty}
.klein{font-size:14px;line-height:1.55;color:var(--stumm)}

/* Die Vorzeile in der Grammatik der Wortmarke: Balken, dann gesperrte Versalien. */
.marke{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-2)}
.marke::before{content:"";width:26px;height:5px;background:var(--marke);flex:none;border-radius:0}
.marke .nr{font-family:var(--mono);letter-spacing:.06em;color:var(--stumm);margin-right:6px}
.nacht .marke{color:var(--nacht-stumm)}
.nacht .marke::before{background:var(--marke-auf-nacht)}

.unterstrich{position:relative;white-space:nowrap}
.unterstrich::after{content:"";position:absolute;left:.02em;right:.02em;bottom:-.02em;height:.08em;min-height:4px;background:var(--marke)}

/* --- 4 · Knöpfe: drei Arten, ein Radius, kein Knopf-im-Knopf (U65) ------- */
.knopf{--k-bg:var(--tinte);--k-fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;
  border-radius:var(--r);background:var(--k-bg);color:var(--k-fg);text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;
  border:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .16s var(--aus)}
.knopf__pfeil{display:inline-flex;flex:none}
.knopf__pfeil svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--aus)}
.knopf:active{transform:scale(.97)}
.knopf:disabled{opacity:.6;cursor:default}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{--k-bg:#1B2B29}
  .knopf:hover .knopf__pfeil svg{transform:translateX(3px)}
}
.knopf--linie{--k-bg:transparent;--k-fg:var(--tinte);box-shadow:inset 0 0 0 1.5px rgba(10,20,19,.2)}
@media (hover:hover) and (pointer:fine){.knopf--linie:hover{--k-bg:transparent;box-shadow:inset 0 0 0 1.5px var(--tinte)}}
.knopf--hell{--k-bg:#fff;--k-fg:var(--tinte)}
@media (hover:hover) and (pointer:fine){.knopf--hell:hover{--k-bg:#DCEFEC}}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

.pfeil-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;position:relative;padding-block:11px;min-height:44px}
.pfeil-link::after{content:"";position:absolute;left:0;right:30px;bottom:6px;height:2px;background:currentColor;transform-origin:0 50%;transform:scaleX(.35);transition:transform .3s var(--aus)}
.pfeil-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--aus)}
@media (hover:hover) and (pointer:fine){.pfeil-link:hover::after{transform:scaleX(1)}.pfeil-link:hover svg{transform:translateX(4px)}}

/* --- 5 · Kopf: eine normale Leiste über die volle Breite (U67) ----------- */
.kopf{position:sticky;top:0;z-index:60;height:var(--kopf-h);background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 transparent;transition:box-shadow .25s ease}
.kopf[data-fest]{box-shadow:0 1px 0 var(--linie)}
.kopf__in{width:var(--spur);margin-inline:auto;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.kopf__marke{display:block;width:126px;color:var(--tinte);text-decoration:none;padding-block:9px;justify-self:start}
.kopf__marke svg{width:100%;height:auto;overflow:visible}
.kopf__nav{display:flex;gap:4px}
.kopf__punkt{position:relative;padding:12px 14px;text-decoration:none;color:var(--tinte-2);font-size:15.5px;font-weight:500;letter-spacing:-.01em;border-radius:var(--r)}
/* Runde 22: der Navigationspunkt ist ein kleiner Ladebalken — dieselbe Form wie Ablauf, Werkbank und Kontakt-Schritte.
   Überfahren zeigt die graue Spur unter dem ganzen Wort, Klick füllt sie in der Marke, die aktive Seite steht voll.
   Kommt man über die Leiste, füllt die neue Seite dort weiter, wo die alte aufgehört hat (werk.js „navlauf“). */
.kopf__punkt::before,.kopf__punkt::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:4px}
.kopf__punkt::before{background:var(--linie);opacity:0;transition:opacity .2s ease}
.kopf__punkt::after{background:var(--marke);transform-origin:0 50%;transform:scaleX(0);transition:transform .2s var(--aus)}
.kopf__punkt[aria-current="page"]{color:var(--tinte)}
.kopf__punkt[aria-current="page"]::before,.kopf__punkt[data-laedt]::before{opacity:1}
.kopf__punkt[aria-current="page"]::after,.kopf__punkt[data-laedt]::after{transform:scaleX(1)}
.kopf__punkt[data-laedt]{color:var(--tinte)}
.kopf__punkt[data-laedt]::after{transition-duration:.45s}
.kopf__punkt[data-ankunft]::after{animation:nav-fuellen .3s var(--aus) both}
@keyframes nav-fuellen{from{transform:scaleX(var(--von,0))}to{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine){
  .kopf__punkt:hover{color:var(--tinte)}
  .kopf__punkt:hover::before{opacity:1}
}
.knopf--kopf{min-height:44px;padding:0 18px;font-size:15px;justify-self:end}
.kopf__menue{display:none}
@media (max-width:1040px){.kopf__punkt{padding:12px 10px}.kopf__punkt::before,.kopf__punkt::after{left:10px;right:10px}}
@media (max-width:959px){
  :root{--kopf-h:64px}
  .kopf__in{grid-template-columns:1fr auto}
  .kopf__nav,.knopf--kopf{display:none}
  .kopf__marke{width:112px}
  .kopf__menue{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 4px 0 14px;border:0;background:transparent;font-weight:600;font-size:15px;cursor:pointer;justify-self:end}
  .kopf__menue i{position:relative;width:24px;height:12px;display:block}
  .kopf__menue i::before,.kopf__menue i::after{content:"";position:absolute;left:0;height:3px;background:currentColor;transition:transform .3s var(--aus),width .3s var(--aus)}
  .kopf__menue i::before{top:0;width:24px}
  .kopf__menue i::after{bottom:0;width:15px}
  .kopf__menue[aria-expanded="true"] i::before{transform:translateY(4.5px) rotate(45deg)}
  .kopf__menue[aria-expanded="true"] i::after{width:24px;transform:translateY(-4.5px) rotate(-45deg)}
}
.blatt-menue{position:fixed;inset:0;z-index:55;background:var(--grund);padding:calc(var(--kopf-h) + 18px) var(--rand) 28px;
  display:flex;flex-direction:column;gap:22px;overflow-y:auto;overscroll-behavior:contain;clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .5s var(--schub),visibility 0s linear .5s}
.blatt-menue[data-offen]{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s var(--schub),visibility 0s}
.blatt-menue nav{display:flex;flex-direction:column}
.blatt-menue nav a{display:block;padding:12px 0;border-bottom:1px solid var(--linie);text-decoration:none;font-weight:600;font-size:clamp(28px,8vw,40px);letter-spacing:-.04em}
.blatt-menue nav a[aria-current="page"]{color:var(--marke)}
.blatt-menue .knopf{align-self:flex-start}
.blatt-menue__fuss{margin-top:auto;display:grid;gap:4px;font-size:15px;color:var(--stumm)}
.blatt-menue__fuss a{display:inline-block;padding-block:10px;text-decoration:none;color:var(--tinte);font-weight:500}
@media (min-width:960px){.blatt-menue{display:none}}

/* --- 6 · Aufmacher: Aufbau wie V1 (Text links), rechts die 3D-Bühne ------
   Zwei Ebenen mit derselben Perspektive: .szene__ebene--hinten liegt UNTER der Textspalte (Suche, Fenster),
   .szene__ebene--vorn ÜBER ihr (Handy, Etikett). Ausnahme zu U2 auf Leons ausdrücklichen Wunsch (Runde 17). */
.auftakt{position:relative;overflow:clip;display:flex;align-items:center;min-height:min(calc(100svh - var(--kopf-h)),900px);
  padding-block:clamp(24px,4svh,56px) clamp(64px,9svh,96px);
  background:radial-gradient(70% 80% at 85% 45%,#EAF3F2 0%,rgba(234,243,242,0) 70%),var(--grund)}
.auftakt__in{position:relative;z-index:2;pointer-events:none}
.auftakt__text{width:min(48%,640px);pointer-events:auto}
.auftakt .marke{margin-bottom:clamp(16px,2.6svh,26px)}
.auftakt .marke .lang{letter-spacing:inherit}
.auftakt__titel .zeile{display:block}
.auftakt__lead{max-width:36ch;margin-top:clamp(16px,2.6svh,26px)}
.auftakt .knoepfe{margin-top:clamp(20px,3.2svh,32px)}
.zusagen{display:grid;gap:8px;margin-top:clamp(18px,3svh,28px);font-size:14.5px;font-weight:500;color:var(--tinte-2)}
.zusagen li{display:flex;align-items:center;gap:8px}
.zusagen svg,.haken svg,.chips svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--marke);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Das Wort, das wechselt: „Ihrem Malerbetrieb / Salon / Restaurant / Hotel“. Nur diese Zeile ändert ihre Breite. */
.wechsel{position:relative;display:inline-block;vertical-align:top}
.wechsel__spur{display:inline-block;overflow:clip;overflow-clip-margin:.12em;padding-bottom:.06em;margin-bottom:-.06em}
.wechsel__wort{display:inline-block;white-space:nowrap}
.wechsel__mass{display:none}
.wechsel::after{content:"";position:absolute;left:.02em;right:.02em;bottom:-.04em;height:.08em;min-height:4px;background:var(--marke);transform-origin:0 50%;transform:scaleX(var(--zug,1))}

.szene{position:absolute;inset:0;pointer-events:none}
.szene__ebene{position:absolute;top:0;bottom:0;right:0;left:calc((100% - var(--spur)) / 2 + var(--spur) * .42);perspective:1700px;perspective-origin:24% 42%}
.szene__ebene--hinten{z-index:1}
.szene__ebene--vorn{z-index:3}
.szene__welt{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translate3d(0,calc(var(--sp,0) * -70px),0) rotateX(calc(var(--sp,0) * 10deg)) rotateY(calc(var(--sp,0) * -5deg))}
.szene__ebene--vorn .szene__welt{transform:translate3d(0,calc(var(--sp,0) * -150px),0) rotateX(calc(var(--sp,0) * 10deg)) rotateY(calc(var(--sp,0) * -5deg))}

.such,.buehnen-fenster,.buehnen-handy,.etikett{position:absolute;transform-origin:0 40%;will-change:transform,opacity;
  transition:transform 1.15s var(--schub),opacity .7s ease,filter .9s ease}
.such{left:4%;top:10%;width:min(480px,64%);padding:16px;border-radius:var(--r);background:#fff;
  box-shadow:0 0 0 1px var(--linie-zart),var(--schatten-gross)}
.such[data-zustand="weg"]{transform:translate3d(-40%,24%,-640px) rotateY(36deg) rotateX(10deg);opacity:0}
.such[data-zustand="da"]{transform:translate3d(0,4%,90px) rotateY(-14deg) rotateX(5deg);opacity:1}
.such[data-zustand="hinten"]{transform:translate3d(-6%,-18%,-420px) rotateY(-16deg) rotateX(5deg);opacity:.5;filter:saturate(.7)}
.such[data-zustand="raus"]{transform:translate3d(-24%,-34%,-1000px) rotateY(8deg);opacity:0}
.such__feld{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:var(--r);background:var(--ton);box-shadow:inset 0 0 0 1px var(--linie);
  font-size:16px;font-weight:500;color:var(--tinte);white-space:nowrap;overflow:hidden}
.such__feld svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--stumm);stroke-width:2;stroke-linecap:round}
.such__marke{width:2px;height:20px;background:var(--marke);flex:none;margin-left:-8px;opacity:0}
.such[data-tippt] .such__marke{opacity:1;animation:blinken 1s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}
.such__liste{display:grid;gap:4px;margin-top:10px}
.such__treffer{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:10px;border-radius:var(--r);transition:background-color .25s ease,transform .25s var(--aus),opacity .4s ease}
.such__treffer i{width:30px;height:30px;border-radius:50%;background:var(--tiefe);display:grid;place-items:center;font:600 13px/1 var(--sans);font-style:normal;color:#fff}
.such__treffer--wir i{background:var(--marke)}
.such__treffer span{display:grid;gap:3px;min-width:0}
.such__treffer small{font:400 11.5px/1.3 var(--mono);color:var(--stumm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.such__treffer b{font-weight:600;font-size:15px;line-height:1.25;color:#0B5C5A;letter-spacing:-.01em}
.such__treffer em{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--stumm);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.such__treffer s{display:block;height:8px;border-radius:var(--r);background:var(--tiefe);text-decoration:none}
.such__treffer s + s{height:7px;background:#EDF2F2}
.such__liste[data-leer] .such__treffer{opacity:0;transform:translateY(8px)}
.such__treffer--wir[data-gewaehlt]{background:var(--ton);transform:scale(.985)}
.such__zeiger{position:absolute;left:0;top:0;width:22px;height:22px;fill:var(--tinte);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;opacity:0;
  transform:translate(330px,240px);transition:transform .8s var(--hin-her),opacity .3s ease}
.such[data-zeiger="hin"] .such__zeiger{opacity:1;transform:translate(220px,104px)}
.such[data-zeiger="klick"] .such__zeiger{opacity:1;transform:translate(220px,104px) scale(.82);transition-duration:.12s}

.buehnen-fenster{left:16%;top:25%;width:min(620px,80%);aspect-ratio:16/10.6;border-radius:var(--r);background:#fff;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 0 0 1px var(--linie-zart),var(--schatten-gross)}
.buehnen-fenster[data-zustand="weg"]{transform:translate3d(-30%,-6%,-160px) rotateY(-16deg) rotateX(5deg) scale(.38);opacity:0}
.buehnen-fenster[data-zustand="da"]{transform:translate3d(0,0,0) rotateY(-16deg) rotateX(4deg);opacity:1}
.buehnen-fenster[data-zustand="raus"]{transform:translate3d(26%,-4%,-820px) rotateY(-30deg);opacity:0}
.buehnen-fenster .fenster__bild img{transition:transform 2.8s cubic-bezier(.65,0,.35,1)}

.szene .buehnen-handy{position:absolute;left:-4%;top:46%;width:clamp(128px,11.6vw,182px);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 40px 70px -30px rgba(5,34,33,.55)}
.buehnen-handy[data-zustand="weg"]{transform:translate3d(-30%,80%,260px) rotateY(52deg) rotateZ(-20deg);opacity:0}
.buehnen-handy[data-zustand="da"]{transform:translate3d(0,0,60px) rotateY(20deg) rotateZ(-5deg) rotateX(4deg);opacity:1}
.buehnen-handy[data-zustand="raus"]{transform:translate3d(30%,90%,200px) rotateY(34deg) rotateZ(12deg);opacity:0}
.etikett{left:13%;top:83%;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--r);background:#fff;font-size:14px;font-weight:600;color:var(--tinte);
  white-space:nowrap;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten)}
.etikett i{width:9px;height:9px;border-radius:50%;background:var(--frei);box-shadow:0 0 0 4px rgba(20,190,135,.18)}
.etikett[data-zustand="weg"]{transform:translate3d(-20%,40%,120px);opacity:0}
.etikett[data-zustand="da"]{transform:translate3d(0,0,120px) rotateY(10deg);opacity:1}
.etikett[data-zustand="raus"]{transform:translate3d(10%,60%,120px);opacity:0}

/* Gemeinsame Gerätebauteile */
.fenster__leiste{height:34px;flex:none;display:flex;align-items:center;gap:7px;padding:0 12px;background:#F6F9F9;border-bottom:1px solid var(--linie-zart)}
.fenster__leiste i{width:9px;height:9px;border-radius:50%;background:#D3DBDA}
.fenster__leiste span{margin-left:10px;flex:1;min-width:0;max-width:340px;height:20px;border-radius:var(--r);background:#E9EFEE;font:400 11px/20px var(--mono);color:var(--stumm);
  padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fenster__bild{position:relative;flex:1;overflow:hidden;background:var(--tiefe)}
.fenster__bild img{position:absolute;left:0;top:0;width:100%;height:auto}
/* Das Handy — ein abgebildetes Gerät, deshalb eigene Rundung (Ausnahme U62). */
.handy{position:relative;display:block;aspect-ratio:390/800;border-radius:26px;background:#0B1110;padding:7px}
.handy__schirm{position:relative;display:block;height:100%;border-radius:20px;overflow:hidden;background:var(--tiefe)}
.handy__schirm img{display:block;width:100%;height:auto}
.handy::before{content:"";position:absolute;z-index:2;left:50%;top:13px;width:32%;height:13px;translate:-50% 0;border-radius:9px;background:#0B1110}


/* Einstieg ohne Abhängigkeit: der Text ist immer da, die Bewegung ist Zugabe. */
@keyframes steigen{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .js .auftakt__titel .zeile{animation:steigen .8s var(--aus) both}
  .js .auftakt__titel .zeile:nth-child(2){animation-delay:.06s}
  .js .auftakt__titel .zeile:nth-child(3){animation-delay:.12s}
  .js .auftakt__lead,.js .auftakt .knoepfe,.js .auftakt .zusagen{animation:steigen .8s var(--aus) .18s both}
}

@media (max-width:1180px){
  .auftakt__text{width:min(52%,600px)}
  .szene__ebene{left:calc((100% - var(--spur)) / 2 + var(--spur) * .46)}
  .such{width:min(380px,62%)}
  .szene .buehnen-handy{left:3%;top:50%}
}
@media (max-width:959px){
  .auftakt{display:block;min-height:0;padding-block:clamp(22px,4svh,40px) 0}
  .auftakt__text{width:auto;max-width:620px}
  .auftakt .marke .lang{display:none}
  .szene{position:relative;inset:auto;height:clamp(300px,82vw,470px);margin-top:10px}
  .szene__ebene{left:0}
  .such{left:calc(var(--rand) - 2%);top:4%;width:min(64%,360px);padding:10px}
  .such__treffer{padding:7px}
  .such__treffer em{display:none}
  .buehnen-fenster{left:24%;top:22%;width:min(72%,520px)}
  .szene .buehnen-handy{left:auto;right:5%;top:30%;width:clamp(96px,23vw,150px)}
  .etikett{left:calc(var(--rand));top:84%;font-size:13px}
}
@media (max-width:600px){
  .zusagen{display:none}
  .auftakt .knoepfe .knopf{flex:1 1 140px;padding:0 14px}
  .auftakt .knoepfe .knopf__pfeil{display:none}
}

/* --- 7 · Belege (Kennzahlen) -------------------------------------------- */
.belege-band{padding-block:clamp(28px,3.4vw,44px)}
.belege{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.beleg{padding:24px clamp(14px,2vw,28px) 22px 0;border-right:1px solid var(--linie);margin-right:clamp(14px,2vw,28px)}
.beleg:last-child{border-right:0;margin-right:0}
.beleg b{display:block;font-weight:600;font-size:clamp(38px,4.2vw,62px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.beleg b i{font-style:normal;font-size:.5em;letter-spacing:-.02em;margin-left:.08em}
.beleg span{display:block;margin-top:12px;font-weight:600;font-size:15px}
.beleg small{display:block;font-size:13.5px;color:var(--stumm);margin-top:2px;line-height:1.45}
@media (max-width:820px){
  .belege{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beleg:nth-child(2){border-right:0;margin-right:0}
  .beleg:nth-child(n+3){border-top:1px solid var(--linie)}
}

/* --- 8 · Abschnittsköpfe: drei Formen (U32) ---------------------------- */
.kapitelkopf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(30px,4vw,48px)}
.kapitelkopf .marke{grid-column:1/-1}
.kapitelkopf__rechts{display:grid;gap:14px;justify-items:start}
.kapitelkopf--breit{grid-template-columns:minmax(0,1fr)}
.kapitelkopf--breit .titel-l{max-width:20ch}
@media (max-width:820px){.kapitelkopf{grid-template-columns:minmax(0,1fr)}}
.abschnittskopf{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(26px,3.4vw,40px)}
.abschnittskopf .text{max-width:60ch}

/* --- 9 · Arbeiten: groß, eng, Text nur beim Überfahren (U68) ----------- */
.werke{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
.werk{position:relative;display:flex;flex-direction:column;min-width:0}
.werk--gross{grid-column:span 7}
.werk--klein{grid-column:span 5}
.werk__fenster{position:relative;flex:1;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#fff;text-decoration:none;color:inherit;
  box-shadow:0 0 0 1px var(--linie-zart),var(--schatten);transition:box-shadow .35s ease,transform .45s var(--aus)}
.werk__bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tiefe)}
.werk--klein .werk__bild{aspect-ratio:auto;flex:1 1 0;min-height:240px}
.werk__bild img{position:absolute;left:0;top:0;display:block;width:100%;height:auto}
/* Runde 18: kein Kasten mehr auf dem Bild. Die Adressleiste ist das Etikett: beim Überfahren wird aus der
   Adresse der Betrieb, rechts erscheint „Ansehen“, der Balken unten läuft mit, während die Seite von selbst
   langsam nach unten fährt (U60 — das Mausrad scrollt immer die Seite). */
.werk__leiste{position:relative;gap:7px;transition:background-color .3s ease}
.fenster__leiste .werk__adresse{position:relative;margin-left:10px;flex:1;min-width:0;max-width:none;height:22px;overflow:hidden;background:none!important;padding:0!important}
.werk__adresse b{display:block;height:22px;font:400 11.5px/22px var(--mono);color:var(--stumm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .4s var(--aus)}
.werk__adresse b:last-child{font:600 13px/22px var(--sans);letter-spacing:-.01em;color:var(--tinte)}
.werk__ansehen{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding-left:12px;font-style:normal;font-weight:600;font-size:13px;color:var(--tinte);
  opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .35s var(--aus)}
.werk__ansehen svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.werk__lauf{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--marke);transform-origin:0 50%;transform:scaleX(0);text-decoration:none;
  transition:transform .45s var(--aus)}
.werk__bild img{will-change:transform;transition:transform .7s var(--aus)}
.werk__zeile{display:none}
.werk__fenster:focus-visible{outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .werk__fenster:hover{box-shadow:0 0 0 1px rgba(10,20,19,.12),var(--schatten-gross);transform:translateY(-3px)}
  .werk__fenster:hover .werk__leiste,.werk__fenster:focus-visible .werk__leiste{background:#fff}
  .werk__fenster:hover .werk__adresse b,.werk__fenster:focus-visible .werk__adresse b{transform:translateY(-100%)}
  .werk__fenster:hover .werk__ansehen,.werk__fenster:focus-visible .werk__ansehen{opacity:1;transform:none}
}
@media not ((hover:hover) and (pointer:fine)){
  .werk__zeile{display:block;margin-top:10px;font-size:14.5px;color:var(--stumm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .werk__zeile b{color:var(--tinte);font-weight:600}
}
@media (max-width:820px){.werk--gross,.werk--klein{grid-column:1/-1}.werk--klein .werk__bild{aspect-ratio:16/10;flex:none;min-height:0}}
.werke__fuss{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;margin-top:clamp(28px,3.4vw,40px)}
.reiter{display:flex;flex-wrap:wrap;gap:8px}
.reiter a,.reiter button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r);background:var(--ton);border:0;
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--tinte-2);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.reiter a small,.reiter button small{font:400 11.5px/1 var(--mono);color:var(--stumm)}
@media (hover:hover) and (pointer:fine){.reiter a:hover,.reiter button:hover{background:var(--tiefe);color:var(--tinte)}}
.reiter [aria-pressed="true"]{background:var(--tinte);color:#fff}
.reiter [aria-pressed="true"] small{color:#A9BAB8}
.kapitel--ton .reiter a,.kapitel--ton .reiter button{background:#fff}

/* Reveal: ein Baustein pro Abschnitt, nie jedes Element (seiten-dna Kap. 7). */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .js .hoch{opacity:0;transform:translateY(22px)}
  .js .hoch[data-da]{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.25,.1,.25,1),transform .7s cubic-bezier(.25,.1,.25,1)}
}

/* --- 10 · Leistungen: drei kleine Filme (aus V2, eingefroren) ------------ */
.dreier{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linie)}
.dreier > *{padding:28px clamp(16px,2.4vw,36px) 6px;border-left:1px solid var(--linie);display:flex;flex-direction:column}
.dreier > :first-child{padding-left:0;border-left:0}
.dreier > :last-child{padding-right:0}
@media (max-width:900px){.dreier{grid-template-columns:minmax(0,1fr)}.dreier > *{padding:28px 0 10px;border-left:0;border-top:1px solid var(--linie)}.dreier > :first-child{border-top:0}}
.leistung h3{margin:24px 0 8px}
.leistung .pfeil-link{margin-top:auto;padding-top:14px;align-self:flex-start}
.haken{display:grid;gap:9px;font-size:15px;color:var(--tinte-2)}
.haken li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start}
.haken li svg{margin-top:3px}

.mini{position:relative;height:230px;font-size:13px;color:var(--tinte-2)}
.mini--gross{height:320px}
/* a · Webdesign auf allen Größen (Runde 17): dieselbe Seite auf Laptop, Tablet und Handy */
.mini-geraete .g{position:absolute;background:#0E1514;box-shadow:0 22px 36px -22px rgba(5,34,33,.55)}
.mini-geraete .g__schirm{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}
.mini-geraete .g__schirm img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.g-laptop{left:2%;top:6%;width:72%;aspect-ratio:16/10;padding:5px;border-radius:10px}
.g-laptop .g__schirm{border-radius:5px}
.g-laptop__fuss{position:absolute;left:-7%;right:-7%;bottom:-9px;height:9px;border-radius:0 0 10px 10px;background:#C9D3D2}
.g-tablet{right:15%;bottom:3%;width:27%;aspect-ratio:410/590;padding:5px;border-radius:12px}
.g-tablet .g__schirm{border-radius:7px}
.g-handy{right:0;bottom:0;width:15%;aspect-ratio:390/800;padding:4px;border-radius:12px}
.g-handy .g__schirm{border-radius:8px}
.g-mass{position:absolute;left:2%;bottom:2px;font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--marke);padding:6px 9px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--linie)}
/* b · Gefunden werden */
.mini-suche{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.mini-suche__feld{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--linie-zart),0 10px 20px -16px rgba(5,34,33,.35);font-size:14px;color:var(--tinte)}
.mini-suche__feld svg{width:15px;height:15px;fill:none;stroke:var(--stumm);stroke-width:2}
.mini-suche__feld .cursor{width:1.5px;height:16px;background:var(--tinte);margin-left:-8px;animation:blinken 1s steps(1) infinite}
.mini-suche__liste{position:relative;height:176px}
.treffer{position:absolute;left:0;right:0;height:38px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center;padding-left:12px}
.treffer i{grid-row:1/3;width:18px;height:18px;border-radius:50%;background:#D9E2E1}
.treffer s{display:block;height:7px;border-radius:var(--r);background:#C9D4D3;text-decoration:none}
.treffer s + s{height:5px;width:70%;background:#DCE4E3}
.treffer--wir{z-index:1}
.treffer--wir i{background:var(--marke)}
.treffer--wir b{font-weight:600;font-size:13.5px;color:var(--tinte);line-height:1}
.treffer--wir em{font-style:normal;font-size:11.5px;color:var(--marke);line-height:1}
.treffer--wir::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;background:var(--marke)}
.mini--gross .mini-suche__liste{height:200px}
.mini--gross .mini-suche__feld{height:50px;font-size:16px}
/* c · Betreuung */
.mini-dienst{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.mini-dienst__status{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--tinte)}
.mini-dienst__status i{width:9px;height:9px;border-radius:50%;background:var(--frei);box-shadow:0 0 0 4px rgba(20,190,135,.16)}
.mini-dienst__status span{margin-left:auto;font:400 12px/1 var(--mono);color:var(--stumm)}
.mini-dienst__tage{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;height:22px}
.mini-dienst__tage b{background:var(--frei);opacity:.85;transform-origin:50% 100%}
.mini-dienst__log{display:grid;border-top:1px solid var(--linie)}
.mini-dienst__log li{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linie);font-size:13px}
.mini-dienst__log time{font:400 11.5px/1 var(--mono);color:var(--stumm)}
.mini-dienst__log svg{width:15px;height:15px;fill:none;stroke:var(--marke);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mini--gross.mini-dienst{padding:22px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten);height:auto}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .js .mini[data-bereit]:not([data-fertig]) .g{opacity:0}
  .js .mini[data-bereit]:not([data-fertig]) .mini-dienst__tage b{transform:scaleY(0)}
  .js .mini[data-bereit]:not([data-fertig]) .mini-dienst__log li{opacity:0}
}

/* --- 11 · Preise: Mieten oder Kaufen, Pakete groß (U69) ---------------- */
.umschalter{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;border-radius:var(--r);background:var(--tiefe);margin-bottom:22px}
.umschalter button{display:grid;gap:2px;justify-items:start;min-height:52px;padding:8px 22px;border:0;border-radius:var(--r);background:transparent;cursor:pointer;text-align:left;
  transition:background-color .25s ease,box-shadow .25s ease}
.umschalter b{font-weight:600;font-size:16px;letter-spacing:-.01em}
.umschalter small{font-size:12.5px;color:var(--stumm)}
.umschalter [aria-checked="true"]{background:#fff;box-shadow:0 1px 2px rgba(5,34,33,.08),0 6px 14px -8px rgba(5,34,33,.3)}
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.paket{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.paket--empfohlen{background:var(--nacht);color:var(--nacht-text);box-shadow:var(--schatten-gross)}
.paket__name{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;font-size:22px;letter-spacing:-.025em}
.paket__name small{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--nacht);padding:7px 10px;border-radius:var(--r);background:var(--marke-auf-nacht)}
.paket__fuer{margin-top:6px;color:var(--stumm);font-size:15px;min-height:3em}
.nacht .paket__fuer{color:var(--nacht-stumm)}
.paket__preis{margin-top:22px;min-height:clamp(54px,5.2vw,74px);display:grid}
.paket__betrag{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;grid-area:1/1}
.paket__betrag span{font-size:16px;color:var(--stumm);font-weight:500}
.paket__betrag b{font-weight:600;font-size:clamp(46px,4.8vw,70px);letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.paket__betrag b.paket__anfrage{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;line-height:1.1}
.paket__betrag small{flex-basis:100%;font-size:13.5px;color:var(--stumm)}
.nacht .paket__betrag span,.nacht .paket__betrag small{color:var(--nacht-stumm)}
.paket__monat{display:grid;gap:2px;margin-top:16px;padding:12px 14px;border-radius:var(--r);background:var(--ton)}
.paket__monat b{font-weight:600;font-size:16px}
.paket__monat span{font-size:13.5px;color:var(--stumm)}
.nacht .paket__monat{background:rgba(232,242,240,.08)}
.nacht .paket__monat b{color:var(--marke-auf-nacht)}
.nacht .paket__monat span{color:var(--nacht-stumm)}
[data-modell="miete"] [data-modell-zeigt="kauf"],[data-modell="kauf"] [data-modell-zeigt="miete"]{display:none}
.umfang{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;margin-top:20px;font-size:13.5px;color:var(--stumm)}
.umfang b{font:500 12.5px/1 var(--mono);color:var(--tinte)}
.umfang__spur{position:relative;height:6px;background:var(--tiefe);overflow:hidden}
.umfang__spur i{position:absolute;inset:0;background:var(--marke);transform-origin:0 50%;transform:scaleX(var(--w,0))}
.nacht .umfang,.nacht .umfang b{color:var(--nacht-stumm)}
.nacht .umfang b{color:var(--nacht-text)}
.nacht .umfang__spur{background:rgba(232,242,240,.14)}
.nacht .umfang__spur i{background:var(--marke-auf-nacht)}
.paket .haken{margin-top:20px}
.nacht .haken{color:var(--nacht-text)}
.nacht .haken svg{stroke:var(--marke-auf-nacht)}
.paket__fuss{margin-top:auto;padding-top:24px}
.paket__fuss .knopf{width:100%;justify-content:space-between}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .js .pakete:not([data-da]) .umfang__spur i{transform:scaleX(0)}
  .js .pakete .umfang__spur i{transition:transform 1.1s var(--hin-her)}
  .js .pakete .paket:nth-child(2) .umfang__spur i{transition-delay:.09s}
  .js .pakete .paket:nth-child(3) .umfang__spur i{transition-delay:.18s}
}
@media (max-width:960px){.pakete{grid-template-columns:minmax(0,1fr)}.paket__fuer{min-height:0}}
.betreuung-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center;margin-top:16px;padding:20px clamp(18px,2.4vw,28px);border-radius:var(--r);background:var(--ton)}
.betreuung-zeile__titel{font-weight:600;font-size:15px;margin-bottom:10px}
.stufen{display:flex;flex-wrap:wrap;gap:10px 32px}
.stufen li{display:grid;grid-template-columns:auto auto;gap:0 12px;align-items:baseline}
.stufen b{font-weight:600}
.stufen span{grid-column:1;font-size:13px;color:var(--stumm)}
.stufen em{grid-column:2;grid-row:1/3;font-style:normal;font-weight:600;font-size:22px;letter-spacing:-.03em}
.stufen em small{font-size:13px;font-weight:400;color:var(--stumm);letter-spacing:0}
@media (max-width:720px){.betreuung-zeile{grid-template-columns:minmax(0,1fr)}}
.steuerhinweis{margin-top:14px;font-size:13.5px;color:var(--stumm)}

/* --- 12 · Ablauf: ein Ladebalken, der sich beim Scrollen füllt (eingefroren) */
.ablauf{position:relative}
.ablauf__spur{position:relative;height:6px;background:var(--linie);margin:30px 0 30px}
.ablauf__spur b{position:absolute;inset:0;background:var(--marke);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.ablauf__zahl{position:absolute;right:0;bottom:14px;font:500 12px/1 var(--mono);letter-spacing:.05em;color:var(--marke);font-variant-numeric:tabular-nums}
.schritte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px clamp(14px,2vw,28px)}
.schritt{position:relative}
.schritt::before{content:"";position:absolute;left:0;top:-42px;width:14px;height:18px;background:var(--marke);transform-origin:50% 100%;transform:scaleY(var(--an,1));transition:transform .4s var(--aus)}
.symbol{width:30px;height:30px;fill:none;stroke:var(--marke);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.schritt__nr{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--stumm)}
.schritt h3{margin:10px 0 8px;font-weight:600;font-size:clamp(18px,1.45vw,21px);letter-spacing:-.025em;line-height:1.15}
.schritt p{font-size:15px;color:var(--stumm);line-height:1.55}
.schritt__dauer{display:inline-block;margin-top:12px;font:500 12px/1 var(--mono);color:var(--marke);letter-spacing:.03em}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .js .ablauf[data-scrub] .ablauf__spur b{transform:scaleX(var(--p,0))}
  .js .ablauf[data-scrub] .schritt{--an:0;opacity:.42;transition:opacity .4s ease}
  .js .ablauf[data-scrub] .schritt[data-an]{--an:1;opacity:1}
}
@media (max-width:900px){
  .ablauf__spur{display:none}
  .schritte{grid-template-columns:minmax(0,1fr);gap:0;border-left:6px solid var(--linie);padding-left:22px}
  .schritt{padding:16px 0}
  .schritt::before{left:-28px;top:18px;width:6px;height:calc(100% - 20px);transform-origin:50% 0}
}

/* --- 13 · Werkbank: so arbeiten wir (Runde 19) ----------------------------
   Vier Schritte über allem, links der Editor (notizen.md → index.html), rechts EIN Fenster: erst die alte Seite
   mit Markierungen, dann baut sich die neue auf — aus Ausschnitten derselben Aufnahme, die am Ende ganz steht (U72).
   Grundzustand im CSS = fertig (neue Seite, Code). Den Film schaltet werk.js über [data-laeuft] und [data-phase]. */
.werkbank{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch;margin-bottom:clamp(30px,3.6vw,48px)}
.wb-schritte{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.wb-schritte li{position:relative;display:flex;align-items:baseline;gap:10px;padding-bottom:12px;font-size:14.5px;font-weight:500;color:var(--tinte-2)}
.wb-schritte b{font:500 12px/1 var(--mono);color:var(--marke)}
.wb-schritte i{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--linie)}
.wb-schritte i::after{content:"";position:absolute;inset:0;background:var(--marke);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.werkbank[data-laeuft] .wb-schritte li{color:var(--stumm)}
.werkbank[data-laeuft] .wb-schritte li[data-an]{color:var(--tinte)}
.werkbank[data-laeuft] .wb-schritte li:not([data-an]):not([data-fertig]) i::after{--p:0}
.wb-schritte i::after{transition:transform .5s var(--hin-her)}

.editor{position:relative;z-index:1;margin:22px -36px 22px 0;border-radius:var(--r);overflow:hidden;background:#0B1716;color:#D5E3E1;box-shadow:var(--schatten-gross);display:flex;flex-direction:column}
.editor__leiste{height:42px;flex:none;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid rgba(232,242,240,.08)}
.editor__leiste i{width:9px;height:9px;border-radius:50%;background:#2B3F3D}
.editor__reiter{margin-left:8px;padding:6px 10px;border-radius:var(--r);font:400 12px/1 var(--mono);color:#7F9996}
.editor__reiter:first-of-type{margin-left:14px}
.editor__reiter[data-an]{background:rgba(232,242,240,.08);color:#E8F2F0}
.code{flex:1;margin:0;padding:22px 0 24px;font:400 clamp(11.5px,1vw,14px)/2.2 var(--mono);overflow:hidden;white-space:pre;tab-size:2}
.code--notizen{display:none}
.werkbank[data-phase="notizen"] .code--notizen{display:block}
.werkbank[data-phase="notizen"] .code--code{display:none}
.code code{display:block}
.code__zeile{display:block;padding:0 40px 0 16px;position:relative;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.code__nr{display:inline-block;width:2.6ch;margin-right:16px;color:#6F8A87;user-select:none}
.code__inhalt{display:inline}
.c-t{color:#43C2B5}.c-a{color:#9FBDB9}.c-s{color:#E7D296}.c-k{color:#8AA5A1;font-style:italic}.c-r{color:#F08A7E;font-weight:600}.c-g{color:#43C2B5;font-weight:600}
.code__zeile[data-tippt]::after{content:"";display:inline-block;width:.55em;height:1.1em;vertical-align:-.18em;margin-left:2px;background:var(--marke-auf-nacht);animation:blinken .9s steps(1) infinite}
.code__zeile[data-an]{background:rgba(67,194,181,.1)}

.vorschau{position:relative;z-index:2;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten-gross);display:flex;flex-direction:column}
/* Runde 21: die Fläche hinter alter und neuer Seite hat den Grundton der neuen Seite (gemessen in werkbank_bilder.py) —
   so liegt beim Übergang nichts Fremdes dazwischen, die neue Seite wächst aus ihrem eigenen Grund. */
.wb-flaeche{position:relative;aspect-ratio:1200/750;overflow:hidden;background:var(--wb-grund,#F4F6F6)}
.wb-alt,.wb-neu{position:absolute;inset:0;transition:opacity .45s ease}
.werkbank[data-wechsel] .wb-flaeche,.werkbank[data-wechsel] .code{opacity:0}
.wb-flaeche,.code{transition:opacity .3s ease}
.wb-alt{opacity:0}
.werkbank[data-phase="alt"] .wb-alt,.werkbank[data-phase="notizen"] .wb-alt{opacity:1}
.werkbank[data-phase="alt"] .wb-neu,.werkbank[data-phase="notizen"] .wb-neu{opacity:0}
.wb-neu > img,.wb-stueck img{position:absolute;inset:0;width:100%;height:100%}
.wb-platz{position:absolute;border-radius:4px;background:color-mix(in srgb,var(--wb-grund,#F4F6F6) 93%,#0A1413);transition:opacity .35s ease}
.wb-stueck{position:absolute;inset:0;clip-path:var(--ci);transition:clip-path .55s var(--aus),opacity .3s ease}
.wb-ganz{transition:opacity .6s ease}
.werkbank[data-laeuft] .code__zeile:not([data-getippt]):not([data-tippt]) .code__inhalt{visibility:hidden}
.werkbank[data-laeuft] .wb-stueck:not([data-an]){clip-path:var(--cz);opacity:0}
.werkbank[data-laeuft]:not([data-fertig]) .wb-ganz{opacity:0}
.werkbank[data-laeuft] .wb-platz[data-weg]{opacity:0}

/* Die alte Seite — bewusst von gestern: Times, blaue Unterstreichungen, Besucherzähler. Größen in cqw, damit sie mit dem Fenster skaliert. */
.alt{position:absolute;inset:0;container-type:inline-size;background:transparent;padding:2cqw 6cqw 0;font-family:"Times New Roman",Times,serif;color:#222}
.alt__seite{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;background:#fff;border:1px solid color-mix(in srgb,var(--wb-grund,#F4F6F6) 78%,#0A1413);border-bottom:0;box-shadow:0 1px 2px rgba(10,20,19,.06),0 8px 28px -12px rgba(10,20,19,.16)}
.alt__kopf{display:grid;gap:.8cqw;padding:2.6cqw 3cqw;background:linear-gradient(var(--alt),#1d2b45);color:#fff}
.alt__kopf b{font-size:5.2cqw;line-height:1;text-shadow:.15cqw .15cqw 0 rgba(0,0,0,.5)}
.alt__kopf i{font-size:2.3cqw;color:#e6e6e6}
.alt__nav{display:flex;background:#ececec;border-bottom:1px solid #aaa;font:2cqw/1 Arial,sans-serif}
.alt__nav u{padding:1.3cqw 1.7cqw;border-right:1px solid #bbb;color:#1a0dab}
.alt__rumpf{display:grid;grid-template-columns:minmax(0,1fr) 27cqw;align-content:start;gap:2.4cqw 3cqw;padding:3cqw;min-height:0;overflow:hidden}
.alt__text{align-self:start;font:1.95cqw/1.4 Verdana,Arial,sans-serif;color:#333}
.alt__text h4{margin:0 0 1.4cqw;font:bold 3.1cqw/1.1 "Times New Roman",serif;color:#B00000}
.alt__text p{margin:0 0 1cqw}
.alt__zaehler{display:inline-block;padding:.4cqw 1cqw;border:1px solid #999;background:#ffffe0;font-size:1.6cqw}
.alt__foto{align-self:start;height:24cqw;display:grid;place-items:end center;padding:.6cqw;border:1px solid #999;background:repeating-linear-gradient(45deg,#e4e4e4 0 .8cqw,#d6d6d6 .8cqw 1.6cqw);font:1.5cqw Arial,sans-serif;color:#666}
.alt__unten{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8cqw 3cqw;padding-top:2cqw;border-top:1px dashed #bbb;font:1.9cqw/1.3 Verdana,Arial,sans-serif;color:#333}
.alt__unten b{grid-column:1/-1;font:bold 2.3cqw/1.1 "Times New Roman",serif;color:#1a0dab;text-decoration:underline}
.alt__unten em{grid-column:1/-1;margin-top:1cqw;font:bold 1.8cqw/1 Arial,sans-serif;font-style:normal;color:#B00000;background:#ffff99;padding:.6cqw 1cqw;justify-self:start}
.alt__fuss{padding:1.4cqw 3cqw;border-top:1px solid #ccc;font:1.5cqw Arial,sans-serif;color:#777}
/* Markierungen: gemessene Ringe um Textblock, Navigation und Foto — wie mit dem Rotstift eingekreist. */
.alt__ring{position:absolute;border:3px solid #D2342A;border-radius:50%;pointer-events:none;opacity:0;transform:scale(1.12) rotate(var(--dreh,-2deg));
  transition:opacity .25s ease,transform .45s var(--aus)}
.alt__ring[data-an]{opacity:1;transform:scale(1) rotate(var(--dreh,-2deg))}
.alt__ring b{position:absolute;right:4%;top:-14px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#D2342A;color:#fff;font:600 13px/1 var(--sans)}
.alt__scan{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(rgba(67,194,181,0),rgba(67,194,181,.28) 85%,var(--marke-auf-nacht));opacity:0;transform:translateY(-100%)}
.werkbank[data-scan] .alt__scan{opacity:1;transform:translateY(460%);transition:transform 1.3s cubic-bezier(.65,0,.35,1),opacity .2s ease}

@media (max-width:900px){
  .werkbank{grid-template-columns:minmax(0,1fr)}
  .wb-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vorschau{grid-row:2}
  .editor{grid-row:3;margin:-24px 14px 0}
  .code{flex:none;max-height:none}
}

.fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linie)}
.fakt{padding:18px 0;border-bottom:1px solid var(--linie)}
.fakt dt{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stumm)}
.fakt dd{margin-top:8px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.fakten--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.fakten--vier .fakt{padding:18px 18px 18px 0;border-right:1px solid var(--linie);margin-right:18px}
.fakten--vier .fakt:last-child{border-right:0;margin-right:0}
@media (max-width:820px){.fakten--vier{grid-template-columns:repeat(2,minmax(0,1fr))}.fakten--vier .fakt:nth-child(2){border-right:0;margin-right:0}}

/* --- 14 · Branchen als Zeilen (eingefroren aus V2) ---------------------- */
.branchen{border-top:1px solid var(--linie)}
.branche{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px clamp(16px,3vw,40px);align-items:center;padding:20px 0;border-bottom:1px solid var(--linie);text-decoration:none}
.branche__nr{font:500 12px/1 var(--mono);color:var(--stumm);letter-spacing:.06em}
.branche__titel{font-weight:600;font-size:clamp(24px,3.2vw,46px);letter-spacing:-.045em;line-height:1.05}
.branche__titel small{display:block;margin-top:6px;font-weight:400;font-size:15px;letter-spacing:0;color:var(--stumm)}
.branche__bilder{display:flex}
.branche__bilder img{width:clamp(64px,7vw,104px);aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:var(--r);box-shadow:0 0 0 1px var(--linie-zart),0 8px 16px -10px rgba(5,34,33,.35);margin-left:-18px;background:var(--tiefe)}
.branche__bilder img:first-child{margin-left:0}
@media (hover:hover) and (pointer:fine){
  .branche .branche__titel{transition:transform .4s var(--aus)}
  .branche:hover .branche__titel{transform:translateX(10px)}
  .branche .branche__bilder img{transition:transform .45s var(--aus)}
  .branche:hover .branche__bilder img{transform:translateY(-4px) rotate(-2deg)}
  .branche:hover .branche__bilder img:nth-child(2){transform:translateY(-6px) rotate(1.5deg)}
}
@media (max-width:720px){.branche{grid-template-columns:44px minmax(0,1fr)}.branche__bilder{grid-column:2}}

/* --- 15 · Fragen (eingefroren aus V2) ---------------------------------- */
.fragen-paar{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:start}
@media (max-width:900px){.fragen-paar{grid-template-columns:minmax(0,1fr)}}
.fragen{border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:16px;align-items:center;padding:20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:clamp(17px,1.35vw,19px);letter-spacing:-.015em}
.frage summary::-webkit-details-marker{display:none}
.frage summary i{position:relative;width:30px;height:30px;border-radius:var(--r);background:var(--tiefe)}
.kapitel--ton .frage summary i{background:#fff}
.frage summary i::before,.frage summary i::after{content:"";position:absolute;left:9px;right:9px;top:14px;height:2px;background:var(--tinte);transition:transform .25s var(--aus)}
.frage summary i::after{transform:rotate(90deg)}
.frage[open] summary i::after{transform:rotate(0)}
.frage[open] summary i{background:var(--marke)}
.frage[open] summary i::before,.frage[open] summary i::after{background:#fff}
.frage__antwort{padding:0 46px 22px 0;color:var(--stumm);max-width:68ch}
.frage__antwort p + p{margin-top:10px}
.frage__antwort a{color:var(--marke);font-weight:500}

/* --- 16 · Fuß: die Bühne am Ende (U7, Runde 17 neu erfunden) ------------
   Oben tippt man den eigenen Betrieb in eine Adresszeile — die Eingabe wandert ins Formular.
   Unten steht die Wortmarke vollständig (nicht angeschnitten), nichts kollidiert mit ihr. */
.nacht{background:var(--nacht);color:var(--nacht-text)}
.nacht .text,.nacht .lead,.nacht .klein{color:var(--nacht-stumm)}
.fuss{position:relative;overflow:clip;padding-bottom:clamp(20px,2.4vw,32px)}
.schluss{padding-block:clamp(60px,7vw,96px) clamp(40px,4.4vw,60px)}
.schluss__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px clamp(32px,5vw,80px);align-items:end}
.schluss__satz{margin-top:22px;font-weight:600;font-size:clamp(40px,5.4vw,84px);line-height:1;letter-spacing:-.055em;max-width:12ch}
.adresse{padding:clamp(18px,2vw,26px);border-radius:var(--r);background:rgba(232,242,240,.06);box-shadow:inset 0 0 0 1px var(--nacht-linie)}
.adresse__titel{display:block;font-weight:600;font-size:16px}
.adresse__leiste{display:flex;align-items:center;gap:10px;height:48px;margin:14px 0 12px;padding:0 16px;border-radius:var(--r);background:#fff;color:var(--tinte);
  font:400 15px/1 var(--mono);white-space:nowrap;overflow:hidden}
.adresse__schloss svg{width:15px;height:15px;fill:none;stroke:var(--stumm);stroke-width:2}
.adresse__url{overflow:hidden;text-overflow:ellipsis;color:var(--stumm)}
.adresse__url b{font-weight:600;color:var(--marke)}
.adresse__zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.adresse__zeile input{min-height:52px;padding:0 16px;border:0;border-radius:var(--r);background:rgba(232,242,240,.1);box-shadow:inset 0 0 0 1px rgba(232,242,240,.32);color:#fff;font-size:16px}
.adresse__zeile input::placeholder{color:var(--nacht-stumm);opacity:1}
.adresse__zeile input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--marke-auf-nacht)}
.adresse__klein{margin-top:12px;font-size:13.5px;color:var(--nacht-stumm)}
.adresse__klein a{color:var(--nacht-text)}
@media (max-width:900px){.schluss__in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.adresse__zeile{grid-template-columns:minmax(0,1fr)}}
.fuss__zeilen{display:grid;gap:4px;padding-top:24px;border-top:1px solid var(--nacht-linie)}
.fuss__zeile{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 24px;align-items:baseline}
.fuss__zeile > span{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nacht-stumm)}
.fuss__zeile div{display:flex;flex-wrap:wrap;gap:0 24px}
.fuss__zeile a{display:inline-block;min-width:44px;padding-block:12px;color:var(--nacht-text);text-decoration:none;font-size:15px}
.fuss__zeile a:hover{color:var(--marke-auf-nacht)}
.fuss__zeile em{font-style:normal;padding-block:9px;font-size:15px;color:var(--nacht-stumm)}
@media (max-width:640px){.fuss__zeile{grid-template-columns:minmax(0,1fr);padding-top:10px}}
.fuss__marke{margin-top:clamp(36px,5vw,72px);color:#fff}
.fuss__marke svg{width:100%;height:auto}
.fuss__unten{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:baseline;margin-top:clamp(18px,2vw,26px);padding-top:16px;border-top:1px solid var(--nacht-linie);
  font-size:13px;color:var(--nacht-stumm)}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:0 20px}
.fuss__unten a{display:inline-block;padding-block:10px;color:var(--nacht-text);text-decoration:none}
.fuss__unten a:hover{color:var(--marke-auf-nacht)}
.fuss__muster{flex-basis:100%;font-size:12.5px;line-height:1.55;max-width:92ch}

/* Mobile Leiste: Anfrage und Mail, sonst nichts. */
.leiste-mobil{display:none}
@media (max-width:719px){
  .fuss{padding-bottom:96px}
  .leiste-mobil{position:fixed;left:10px;right:10px;bottom:10px;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px;padding:8px;border-radius:var(--r);
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--linie-zart),0 12px 30px -12px rgba(5,34,33,.35);
    transform:translateY(calc(100% + 20px));transition:transform .45s var(--schub)}
  .leiste-mobil[data-sichtbar]{transform:none}
  .leiste-mobil .knopf{justify-content:center;padding:0 12px;min-height:48px;font-size:15px}
}

/* --- 17 · Unterseiten --------------------------------------------------- */
.seitenkopf{padding-top:clamp(26px,3.6vw,52px);padding-bottom:clamp(30px,4vw,52px)}
.seitenkopf--knapp{padding-bottom:clamp(22px,2.6vw,34px)}
.pfad{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:400 12.5px/1 var(--mono);color:var(--stumm);letter-spacing:.03em;margin-bottom:22px}
.pfad a{text-decoration:none;color:var(--tinte-2);padding-block:8px}
.pfad a:hover{color:var(--marke)}
.pfad span[aria-hidden]{display:inline-block;width:14px;height:3px;background:var(--linie)}
.seitenkopf__raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px clamp(24px,5vw,80px);align-items:end;margin-top:20px}
.seitenkopf__rechts{display:grid;gap:20px}
.seitenkopf__raster .lead{max-width:46ch}
@media (max-width:900px){.seitenkopf__raster{grid-template-columns:minmax(0,1fr)}}

/* Arbeiten: Suche + Filter + Raster */
/* Runde 19 (U74): große Suche, Branche als Aufklappmenü in Apple-Art — eine Zeile, nichts bricht um. */
.werkzeugleiste{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px 16px;align-items:center;margin-bottom:24px}
.suche{position:relative;display:block}
.suche svg{position:absolute;left:20px;top:50%;width:22px;height:22px;translate:0 -50%;fill:none;stroke:var(--stumm);stroke-width:2;stroke-linecap:round;pointer-events:none}
.suche input{width:100%;min-height:60px;padding:0 20px 0 56px;border:0;border-radius:var(--r);background:var(--ton);box-shadow:inset 0 0 0 1px transparent;font-size:18px;color:var(--tinte);
  transition:box-shadow .2s ease,background-color .2s ease}
.suche input::placeholder{color:#6B7B7A;opacity:1}
.suche input:hover{background:var(--tiefe)}
.suche input:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 2px var(--marke)}
.auswahl{position:relative}
.auswahl__knopf{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:60px;min-width:230px;padding:8px 16px 8px 18px;border:0;
  border-radius:var(--r);background:var(--ton);text-align:left;cursor:pointer;transition:background-color .2s ease}
.auswahl__knopf:hover{background:var(--tiefe)}
.auswahl__titel{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stumm)}
.auswahl__knopf b{grid-row:2;font-weight:600;font-size:16px;white-space:nowrap}
.auswahl__pfeil{grid-column:2;grid-row:1/3;justify-self:end;width:20px;height:20px;fill:none;stroke:var(--tinte);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--aus)}
.auswahl__knopf[aria-expanded="true"] .auswahl__pfeil{transform:rotate(180deg)}
.auswahl__liste{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:100%;width:max-content;padding:6px;border-radius:var(--r);background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 0 0 1px var(--linie-zart),0 18px 40px -12px rgba(5,34,33,.3);
  transform-origin:100% 0;transition:opacity .16s ease-out,transform .16s cubic-bezier(.23,1,.32,1)}
.auswahl__liste[data-zu]{opacity:0;transform:scale(.96) translateY(-4px)}
.auswahl__liste li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;padding:0 14px 0 10px;border-radius:var(--r);
  font-size:15.5px;font-weight:500;cursor:pointer}
.auswahl__liste li small{font:400 12px/1 var(--mono);color:var(--stumm)}
.auswahl__liste li[data-fokus],.auswahl__liste li:hover{background:var(--ton)}
.auswahl__haken{width:18px;height:18px;fill:none;stroke:var(--marke);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.auswahl__liste li[aria-selected="true"] .auswahl__haken{opacity:1}
.werkzeugleiste__zahl{font-size:14px;color:var(--stumm);white-space:nowrap;padding:0 4px}
@media (max-width:760px){.werkzeugleiste{grid-template-columns:minmax(0,1fr) auto}.suche{grid-column:1/-1}.auswahl__knopf{min-width:0}}
html:not(.js) .auswahl{display:none}
.raster-werke{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px}
.raster-werke .werk__bild{aspect-ratio:16/10.5}
@media (max-width:1000px){.raster-werke{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.raster-werke{grid-template-columns:minmax(0,1fr)}}
.leer{display:grid;gap:12px;justify-items:start;padding:40px 0}

/* Leistungen */
.sprungleiste{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.sprungleiste a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:var(--r);background:var(--ton);text-decoration:none;font-weight:600;transition:background-color .2s ease}
.sprungleiste a:hover{background:var(--tiefe)}
.sprungleiste span{font:500 12px/1 var(--mono);color:var(--marke)}
.geraete-buehne{position:relative;height:clamp(360px,44vw,600px)}
.gb{position:absolute;margin:0;border-radius:var(--r);overflow:hidden;background:var(--tiefe);box-shadow:var(--schatten-gross);
  transform:translate3d(0,calc(var(--gb,0) * 1px),0);will-change:transform}
.gb img{width:100%;height:100%;object-fit:cover}
.gb--desktop{left:0;top:0;width:60%;aspect-ratio:4/3}
.gb--tablet{left:46%;top:24%;width:28%;aspect-ratio:3/4;z-index:2}
.gb--tablet img{object-position:52% 50%}
.gb--handy{right:0;top:2%;width:24%;aspect-ratio:3/4;z-index:1}
.gb--handy img{object-position:48% 50%}
@media (max-width:760px){
  .geraete-buehne{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .gb{position:relative;left:auto;top:auto;right:auto;width:auto;transform:none}
  .gb--desktop{grid-column:1/-1}
}
.unterzeile{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px clamp(24px,5vw,80px);align-items:start;margin-top:clamp(28px,3.4vw,44px)}
@media (max-width:900px){.unterzeile{grid-template-columns:minmax(0,1fr)}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r);background:var(--ton);font-size:14.5px;font-weight:500;color:var(--tinte-2)}
.kapitel--ton .chips li{background:#fff}
.typen-kopf{display:grid;gap:8px;margin:clamp(48px,6vw,72px) 0 20px}
.typen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.typen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.typen{grid-template-columns:minmax(0,1fr)}}
.typ{display:grid;gap:6px;align-content:start}
.typ h3{margin-top:12px;font-weight:600;font-size:18px;letter-spacing:-.02em}
.typ__wer{font:500 12px/1.4 var(--mono);color:var(--marke);letter-spacing:.02em}
.typ p:last-child{color:var(--stumm);font-size:15px}
.typ__attrappe{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;height:132px;padding:16px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten);font-size:12.5px}
.kapitel--ton .typ__attrappe{background:#fff}
.typ__buchstabe{position:absolute;right:12px;top:12px;font:600 11px/1 var(--mono);color:var(--stumm)}
.attr-chips{display:flex;flex-wrap:wrap;gap:6px}
.attr-chips b,.attr-zeiten i{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--r);background:var(--ton);font-weight:500;font-style:normal;color:var(--tinte-2);transition:background-color .3s ease,color .3s ease}
.attr-zeiten{display:flex;gap:6px;font-family:var(--mono)}
.attr-chips .an,.attr-zeiten .an{background:var(--tinte);color:#fff}
.attr-zaehler{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:4px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--linie)}
.attr-zaehler i{width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r);background:var(--ton);font-style:normal;font-weight:600}
.attr-zaehler b{font-weight:600}
.attr-text{display:block;padding:9px 11px;border-radius:var(--r);box-shadow:inset 0 0 0 1px #B9C6C5;color:var(--tinte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attr-auswahl{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border-radius:var(--r);box-shadow:inset 0 0 0 1px #B9C6C5;font-weight:500}
.attr-auswahl i{width:8px;height:8px;border-right:2px solid var(--stumm);border-bottom:2px solid var(--stumm);transform:rotate(45deg) translateY(-3px)}
.sicht{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.sicht__suche{display:grid;gap:22px}
.sicht__gewicht{padding:clamp(18px,2vw,26px);border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten)}
.sicht__gewicht figcaption{display:grid;gap:4px;margin-bottom:18px}
.sicht__gewicht figcaption b{font-weight:600;font-size:18px;letter-spacing:-.02em}
.sicht__gewicht figcaption span{font-size:14px;color:var(--stumm)}
@media (max-width:900px){.sicht{grid-template-columns:minmax(0,1fr)}}
.gewicht{display:grid;gap:7px}
.gewicht li{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr) 70px;gap:12px;align-items:center;font-size:13.5px;color:var(--tinte-2)}
.gewicht li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gewicht i{display:block;height:10px;background:var(--marke);transform-origin:0 50%;transform:scaleX(var(--w))}
.gewicht b{font:500 12.5px/1 var(--mono);text-align:right;color:var(--tinte);font-variant-numeric:tabular-nums}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .js .gewicht:not([data-da]) i{transform:scaleX(0)}
  .js .gewicht i{transition:transform .9s var(--hin-her)}
}
.bericht{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:20px;align-items:center;margin-top:clamp(28px,3.4vw,44px);max-width:680px}
.bericht img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.bericht__preis{margin-top:10px;font-size:15px;color:var(--stumm)}
.bericht__preis b{font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--tinte)}
.dienst{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,48px);align-items:start}
@media (max-width:960px){.dienst{grid-template-columns:minmax(0,1fr)}}
.stufen-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:620px){.stufen-raster{grid-template-columns:minmax(0,1fr)}}
.stufe{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.stufe--mitte{box-shadow:inset 0 0 0 2px var(--tinte)}
.stufe h3{font-weight:600;font-size:18px}
.stufe__preis b{display:block;font-size:34px;font-weight:600;letter-spacing:-.045em;line-height:1}
.stufe__preis span{font-size:13px;color:var(--stumm)}
.stufe .haken{font-size:14px}
.stufe__fuer{font-size:14px;line-height:1.5;color:var(--stumm)}

/* Preise-Seite */
.vergleich{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(36px,4vw,56px);border-radius:var(--r);background:var(--ton)}
.vergleich__seite{display:grid;gap:14px;align-content:start;padding:clamp(22px,2.6vw,34px)}
.vergleich__seite + .vergleich__seite{border-left:1px solid var(--linie)}
.vergleich--hell{background:#fff}
@media (max-width:760px){.vergleich{grid-template-columns:1fr}.vergleich__seite + .vergleich__seite{border-left:0;border-top:1px solid var(--linie)}}
.tabelle{width:100%;border-collapse:collapse;font-size:15px}
.tabelle th,.tabelle td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle thead th{font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stumm)}
.tabelle td:first-child,.tabelle th:first-child{padding-left:0}
.tabelle tbody th{font-weight:600}
.tabelle tbody th small{display:inline-block;margin-left:8px;vertical-align:1px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stumm)}
.tabelle .klein{font-size:13.5px}
.tabelle--knapp th,.tabelle--knapp td{white-space:nowrap}
.tabelle--knapp tbody td:nth-child(2){white-space:normal;min-width:220px}
.tabelle .betrag{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:clamp(20px,3vw,48px);align-items:start}
@media (max-width:900px){.rechner{grid-template-columns:minmax(0,1fr)}}
.rechner fieldset{border:0;padding:0;margin:0 0 24px;min-inline-size:0}
.rechner__paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
@media (max-width:420px){.rechner__paar{grid-template-columns:minmax(0,1fr)}}
.rechner legend{font-weight:600;font-size:17px;margin-bottom:12px;padding:0}
.wahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.wahl{position:relative;display:grid;gap:3px;padding:14px 16px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px #C3CFCE;cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease}
.wahl input{position:absolute;opacity:0;pointer-events:none}
.wahl b{font-weight:600}
.wahl span{font-size:13.5px;color:var(--stumm)}
.wahl:hover{box-shadow:inset 0 0 0 1.5px var(--stumm)}
.wahl:has(input:checked){box-shadow:inset 0 0 0 2px var(--tinte);background:#F8FBFB}
.wahl:has(input:checked)::after{content:"";position:absolute;right:14px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.wahl:has(input:focus-visible){outline:2px solid var(--marke);outline-offset:2px}
.zaehler{display:flex;align-items:center;gap:10px}
.zaehler button{width:44px;height:44px;border-radius:var(--r);border:0;background:#fff;box-shadow:inset 0 0 0 1px #C3CFCE;font-size:20px;cursor:pointer}
.zaehler output{min-width:3ch;text-align:center;font-weight:600;font-size:20px;font-variant-numeric:tabular-nums}
fieldset:disabled .zaehler{opacity:.45}
fieldset:disabled .zaehler button{cursor:not-allowed}
fieldset:disabled .wahl{opacity:.45;cursor:not-allowed}
.beleg-zettel{padding:24px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten)}
.beleg-zettel h3{font-weight:600;font-size:18px;margin-bottom:14px}
.beleg-zettel dl{display:grid;grid-template-columns:1fr auto;gap:8px 16px;font-size:15px}
.beleg-zettel dd{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.beleg-zettel .summe{margin-top:16px;padding-top:14px;border-top:2px solid var(--tinte);display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:baseline}
.beleg-zettel .summe b{font-size:30px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.beleg-zettel .knopf{margin-top:20px;width:100%;justify-content:space-between}

/* Ablauf-Seite: eine klebende Bühne, daneben die Stationen */
.stationen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.stationen__buehne{position:sticky;top:calc(var(--kopf-h) + 28px)}
.stationen__rahmen{position:relative;aspect-ratio:4/3.1;border-radius:var(--r);overflow:hidden;background:var(--ton);box-shadow:0 0 0 1px var(--linie-zart)}
.station-bild{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.station-bild[data-aktiv]{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s}
.stationen__lauf{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.6)}
.stationen__lauf b{position:absolute;inset:0;background:var(--marke);transform-origin:0 50%;transform:scaleX(var(--p,1));transition:transform .5s var(--aus)}
.stationen__liste{display:grid}
.station{min-height:62svh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:24px;opacity:.38;transition:opacity .4s ease}
.station[data-aktiv]{opacity:1}
.station:first-child{min-height:44svh;justify-content:flex-start;padding-top:8px}
.station:last-child{min-height:50svh}
.station__nr{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tinte-2)}
.station__nr span{font-family:var(--mono);letter-spacing:.06em;color:#fff;background:var(--marke);padding:5px 7px;border-radius:var(--r)}
.station__teil{font-size:15px;color:var(--tinte-2)}
.station__teil b{font-weight:600}
@media (max-width:900px){
  .stationen{grid-template-columns:minmax(0,1fr)}
  .stationen__buehne{top:calc(var(--kopf-h) + 8px);z-index:2}
  .stationen__rahmen{aspect-ratio:16/10;box-shadow:0 0 0 1px var(--linie-zart),0 16px 30px -18px rgba(5,34,33,.4)}
  .station{min-height:48svh;opacity:1}
}
@media (prefers-reduced-motion:reduce){.station{opacity:1}}
/* Bilder der Stationen */
.ab-foto,.ab-entwurf{position:absolute;inset:0}
.ab-foto > img,.ab-entwurf__skizze{width:100%;height:100%;object-fit:cover}
.ab-notiz{position:absolute;left:10%;right:10%;top:50%;translate:0 -50%;padding:clamp(18px,2.4vw,30px);border-radius:var(--r);background:#fff;box-shadow:var(--schatten-gross);display:grid;align-content:start;gap:16px}
.ab-notiz__kopf{display:grid;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--linie)}
.ab-notiz__kopf b{font-weight:600;font-size:clamp(18px,1.6vw,22px)}
.ab-notiz__kopf span{font:400 12.5px/1 var(--mono);color:var(--stumm)}
.ab-notiz ul{display:grid;gap:12px;font-size:clamp(15px,1.25vw,17px);font-weight:500}
.ab-notiz li{display:flex;align-items:center;gap:12px;opacity:.35;transition:opacity .4s ease}
.ab-notiz li svg{width:22px;height:22px;flex:none;padding:3px;border-radius:50%;background:var(--ton);fill:none;stroke:var(--ton);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:background-color .3s ease,stroke .3s ease}
[data-aktiv] .ab-notiz li{opacity:1}
[data-aktiv] .ab-notiz li svg{background:var(--marke);stroke:#fff}
[data-aktiv] .ab-notiz li:nth-child(2),[data-aktiv] .ab-notiz li:nth-child(2) svg{transition-delay:.35s}
[data-aktiv] .ab-notiz li:nth-child(3),[data-aktiv] .ab-notiz li:nth-child(3) svg{transition-delay:.7s}
[data-aktiv] .ab-notiz li:nth-child(4),[data-aktiv] .ab-notiz li:nth-child(4) svg{transition-delay:1.05s}
.ab-entwurf__fenster{position:absolute;left:12%;right:12%;top:14%;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--schatten-gross);
  clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--hin-her) .5s}
.ab-entwurf__fenster img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
[data-aktiv] .ab-entwurf__fenster{clip-path:inset(0 0 0 0)}
.ab-mail{position:absolute;right:5%;bottom:8%;width:min(62%,320px);padding:16px;border-radius:var(--r);background:#fff;box-shadow:var(--schatten-gross);display:grid;gap:8px;font-size:14px}
.ab-mail span{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:var(--r);background:var(--ton);font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s var(--aus)}
.ab-mail span i{font:500 10.5px/1 var(--mono);font-style:normal;color:var(--marke)}
[data-aktiv] .ab-mail span{opacity:1;transform:none}
[data-aktiv] .ab-mail span:nth-of-type(2){transition-delay:.15s}[data-aktiv] .ab-mail span:nth-of-type(3){transition-delay:.3s}[data-aktiv] .ab-mail span:nth-of-type(4){transition-delay:.45s}
.ab-fortschritt{position:absolute;left:6%;right:6%;bottom:8%;padding:16px 18px;border-radius:var(--r);background:#fff;box-shadow:var(--schatten-gross);display:grid;gap:10px}
.ab-fortschritt p{display:flex;justify-content:space-between;font-size:14px}
.ab-fortschritt p span{font-family:var(--mono);color:var(--marke)}
.ab-fortschritt > i{position:relative;display:block;height:8px;background:var(--tiefe);overflow:hidden}
.ab-fortschritt > i b{position:absolute;inset:0;background:var(--marke);transform-origin:0 50%;transform:scaleX(0);transition:transform 2.2s cubic-bezier(.65,0,.35,1) .3s}
[data-aktiv] .ab-fortschritt > i b{transform:scaleX(1)}
.ab-status{position:absolute;left:6%;top:7%;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--r);background:#fff;box-shadow:var(--schatten);font-size:14px}
.ab-status i{width:10px;height:10px;border-radius:50%;background:var(--frei);box-shadow:0 0 0 0 rgba(20,190,135,.4)}
[data-aktiv] .ab-status i{animation:puls 2.4s ease-out 3}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(20,190,135,.45)}70%{box-shadow:0 0 0 12px rgba(20,190,135,0)}100%{box-shadow:0 0 0 0 rgba(20,190,135,0)}}
.ab-status span{color:var(--stumm);font-size:13px}
.brauchen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 28px}
.brauchen li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:2px 16px;align-items:center}
.brauchen svg{grid-row:1/3;width:52px;height:52px;padding:12px;border-radius:var(--r);background:#fff;fill:none;stroke:var(--marke);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.brauchen b{font-weight:600;font-size:17px}
.brauchen span{font-size:14.5px;color:var(--stumm)}
@media (max-width:900px){.brauchen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.brauchen{grid-template-columns:minmax(0,1fr)}}

/* Agentur */
.ideen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
@media (max-width:900px){.ideen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ideen{grid-template-columns:minmax(0,1fr)}}
.idee-karte{display:grid;gap:6px;text-decoration:none;color:inherit}
.idee-karte__bild{display:flex;flex-direction:column;margin-bottom:10px;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten);transition:transform .45s var(--aus)}
.idee-karte__bild img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.idee-karte small{font:500 12px/1.3 var(--mono);letter-spacing:.03em;color:var(--marke)}
.idee-karte b{font-weight:600;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;line-height:1.25}
@media (hover:hover) and (pointer:fine){.idee-karte:hover .idee-karte__bild{transform:translateY(-4px)}}
.grundsaetze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
@media (max-width:900px){.grundsaetze{grid-template-columns:minmax(0,1fr)}}
.grundsatz{display:grid;gap:12px;align-content:start}
.grundsatz__bild{position:relative;height:160px;margin-bottom:8px;border-radius:var(--r);background:var(--ton);overflow:hidden}
.grundsatz__bild--server{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 22px}
.gs-server,.gs-fremd{position:relative;z-index:1;justify-self:start;padding:9px 12px;border-radius:var(--r);background:#fff;font:500 12.5px/1 var(--mono);box-shadow:0 0 0 1px var(--linie)}
.gs-fremd{justify-self:end;color:var(--stumm);text-decoration:line-through;text-decoration-color:var(--marke);text-decoration-thickness:2px}
.grundsatz__bild--server > i{position:absolute;left:30%;right:30%;height:2px;background:repeating-linear-gradient(90deg,var(--linie) 0 6px,transparent 6px 12px)}
.grundsatz__bild--server > i:nth-of-type(1){top:36%}.grundsatz__bild--server > i:nth-of-type(2){top:50%}.grundsatz__bild--server > i:nth-of-type(3){top:64%}
.grundsatz__bild--server > b{position:absolute;right:22px;bottom:14px;font-weight:600;font-size:46px;letter-spacing:-.05em;line-height:1;color:var(--marke)}
.grundsatz__bild--echt{display:grid;align-content:center;gap:8px;padding:0 22px;font-size:14.5px;font-weight:500}
.grundsatz__bild--echt span{display:flex;align-items:center;gap:8px}
.grundsatz__bild--echt s{color:var(--stumm);text-decoration-color:var(--marke);text-decoration-thickness:2px}
.grundsatz__bild--echt svg{width:17px;height:17px;fill:none;stroke:var(--marke);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.grundsatz__bild--ruhe{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:26px}
.grundsatz__bild--ruhe i{width:14%;height:30%;border-radius:var(--r) var(--r) 0 0;background:var(--tiefe)}
.grundsatz__bild--ruhe i.an{height:78%;background:var(--marke)}

/* Kontakt: drei gleich lange Schritte (Runde 17) */
.anfrage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:960px){.anfrage{grid-template-columns:minmax(0,1fr)}}
.strecke{position:relative;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten);padding:clamp(20px,2.8vw,36px)}
.strecke__stand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:24px}
.strecke__stand button{display:grid;grid-template-columns:auto 1fr;gap:8px 8px;align-content:start;min-height:44px;text-align:left;padding:0;border:0;background:transparent;font-size:13.5px;font-weight:500;color:var(--stumm);cursor:pointer}
.strecke__stand button:disabled{cursor:default}
.strecke__stand button i{grid-column:1/-1;display:block;height:5px;background:var(--tiefe);position:relative;overflow:hidden}
.strecke__stand button i::after{content:"";position:absolute;inset:0;background:var(--tinte);transform-origin:0 50%;transform:scaleX(0);transition:transform .45s var(--hin-her)}
.strecke__stand button span{font-family:var(--mono);font-size:12px}
.strecke__stand button[data-erledigt] i::after,.strecke__stand button[aria-current="step"] i::after{transform:scaleX(1)}
.strecke__stand button[aria-current="step"]{color:var(--tinte)}
.strecke__fenster{min-height:var(--strecke-h,auto)}
.schritt-blatt{min-inline-size:0}
@media (scripting:enabled){.js .strecke[data-aktiv] .schritt-blatt:not([data-sichtbar]){display:none}}
.gruppe{border:0;padding:0;margin:0 0 22px;min-inline-size:0}
.gruppe:last-child{margin-bottom:6px}
.gruppe legend{font-weight:600;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.025em;line-height:1.2;margin-bottom:14px;padding:0}
.wahlen--chips{display:flex;flex-wrap:wrap;gap:8px}
.wahl--chip{display:inline-flex;flex-direction:row;align-items:baseline;gap:8px;padding:15px 18px}
.wahl--chip:has(input:checked){padding-right:40px}
.wahl--chip span{font-size:13px}
.wahlen--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.wahlen--zwei{grid-template-columns:minmax(0,1fr)}}
.feld{display:grid;gap:7px;margin-bottom:14px}
.feld > span{font-weight:500;font-size:14.5px}
.feld > span small{font-weight:400;color:var(--stumm)}
.feld input,.feld textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:var(--r);border:0;background:#fff;box-shadow:inset 0 0 0 1px #AEBDBC;font-size:16px;color:var(--tinte);transition:box-shadow .2s ease}
.feld textarea{min-height:104px;resize:vertical;line-height:1.5}
.feld input::placeholder,.feld textarea::placeholder{color:#6B7B7A;opacity:1}
.feld input:focus,.feld textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--marke)}
.feld [aria-invalid="true"]{box-shadow:inset 0 0 0 2px #B3261E}
.felder-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media (max-width:560px){.felder-2{grid-template-columns:minmax(0,1fr)}}
.strecke__fuss{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:8px;padding-top:18px;border-top:1px solid var(--linie)}
.strecke__bisher{flex:1;min-width:0;font-size:13.5px;color:var(--stumm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strecke__fehler{color:#B3261E;font-size:14px;font-weight:500;min-height:1.4em;margin-top:6px}
.strecke__hinweis{font-size:13px;color:var(--stumm);margin-top:14px}
.strecke__fertig{padding:10px 0}
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.seitenkarte{display:grid;gap:18px}
.seitenkarte__bild{width:140px;aspect-ratio:390/600;border-radius:22px;padding:6px;background:#0B1110;overflow:hidden}
.seitenkarte__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:16px}
.seitenkarte .weg{display:grid;gap:2px;padding-top:14px;border-top:1px solid var(--linie)}
.seitenkarte .weg small{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stumm)}
.seitenkarte .weg a{display:inline-block;padding-block:8px;font-weight:600;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.seitenkarte .weg a:hover{color:var(--marke)}
.danach{display:grid;gap:14px;padding-top:14px;border-top:1px solid var(--linie)}
.danach li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 12px}
.danach .symbol{grid-row:1/3;width:26px;height:26px;margin:0}
.danach b{font-weight:600;font-size:15px}
.danach span{font-size:13.5px;color:var(--stumm)}
@media (max-width:960px){.seitenkarte__bild{display:none}}

/* Branchenseite */
.suchen-paar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.suchen-paar{grid-template-columns:minmax(0,1fr)}}
.suchen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;counter-reset:s}
.suchen li{display:grid;gap:6px;padding-top:16px;border-top:2px solid var(--tinte);counter-increment:s}
.suchen li::before{content:"0" counter(s);font:500 12px/1 var(--mono);color:var(--marke)}
.suchen b{font-weight:600;font-size:18px;letter-spacing:-.02em}
.suchen span{font-size:15px;color:var(--stumm)}
@media (max-width:560px){.suchen{grid-template-columns:minmax(0,1fr)}}
.suchen-paar__typ{display:grid;gap:14px}

/* Projektseite */
.projekt-auftakt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end}
.projekt-auftakt .knoepfe{justify-content:flex-end}
@media (max-width:820px){.projekt-auftakt{grid-template-columns:minmax(0,1fr)}.projekt-auftakt .knoepfe{justify-content:flex-start}}
/* Runde 19: Fenster schmaler, das Handy ist ein Standbild und überlappt das Fenster, rechts bleibt Fläche zum Scrollen.
   Das Fenster fängt das Mausrad erst, wenn die Maus darüber bewegt wurde (U60) — siehe werk.js „lauf“. */
.lauf{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.36fr);gap:clamp(28px,4vw,64px);align-items:center}
.lauf__buehne{position:relative;padding-right:clamp(70px,8vw,120px)}
.lauf__fenster{position:relative;width:100%;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--linie-zart),var(--schatten-gross)}
.lauf__fenster .fenster__bild{height:min(62svh,580px);flex:none;overflow:hidden;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:rgba(10,20,19,.3) transparent}
.lauf__fenster .fenster__bild[data-scrollbar]{overflow-y:auto}
.lauf__fenster .fenster__bild img{position:static}
.lauf__handy{position:absolute;right:0;bottom:-28px;width:clamp(150px,15vw,214px);padding:7px;border-radius:28px;box-shadow:0 0 0 1px rgba(255,255,255,.4),var(--schatten-gross)}
.lauf__handy .handy__schirm{border-radius:22px;height:auto}
.lauf__handy img{width:100%;height:auto}
.lauf__seite{display:grid;gap:16px;align-content:center}
.merkmale.merkmale--eins{grid-template-columns:minmax(0,1fr);margin-top:0}
.merkmale.merkmale--eins li:nth-child(odd){padding-right:0}
.lauf__hinweis{display:flex;align-items:center;gap:10px}
.lauf__hinweis svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media not ((hover:hover) and (pointer:fine)){.lauf__hinweis{display:none}}
@media (max-width:900px){.lauf{grid-template-columns:minmax(0,1fr)}.lauf__buehne{padding-right:64px}.lauf__fenster .fenster__bild{height:46svh}.lauf__handy{width:clamp(110px,28vw,160px)}}
.steckbrief{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linie)}
.steckbrief > div{padding:20px 18px 18px 0;border-right:1px solid var(--linie);margin-right:18px}
.steckbrief > div:last-child{border-right:0;margin-right:0}
.steckbrief dt{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stumm)}
.steckbrief dd{margin-top:10px;font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;line-height:1.1}
.steckbrief dd small{display:block;margin-top:6px;font-weight:400;font-size:13.5px;letter-spacing:0;color:var(--stumm)}
@media (max-width:820px){.steckbrief{grid-template-columns:repeat(2,minmax(0,1fr))}.steckbrief > div:nth-child(2){border-right:0;margin-right:0}.steckbrief > div:nth-child(n+3){border-top:1px solid var(--linie)}}
.idee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px)}
.idee__metapher{font-weight:600;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.045em;line-height:1.04}
.idee__metapher span{color:var(--marke)}
@media (max-width:900px){.idee{grid-template-columns:minmax(0,1fr)}}
.merkmale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linie);margin-top:24px}
.merkmale li{padding:14px 0;border-bottom:1px solid var(--linie);font-weight:500;display:flex;gap:12px;align-items:baseline}
.merkmale li:nth-child(odd){padding-right:16px}
.merkmale li::before{content:"";width:12px;height:4px;background:var(--marke);flex:none;translate:0 -3px}
@media (max-width:620px){.merkmale{grid-template-columns:minmax(0,1fr)}}
.weiter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.weiter a{min-height:44px;display:grid;grid-template-columns:minmax(0,1fr) clamp(110px,14vw,200px);gap:18px;align-items:center;padding:18px;border-radius:var(--r);background:#fff;
  box-shadow:0 0 0 1px var(--linie-zart);text-decoration:none;transition:box-shadow .25s ease}
.weiter a:hover{box-shadow:0 0 0 1.5px var(--tinte)}
.weiter small{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stumm)}
.weiter b{display:block;margin-top:8px;font-weight:600;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.03em}
.weiter img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:var(--r)}
@media (max-width:720px){.weiter{grid-template-columns:minmax(0,1fr)}}

/* Fragen-Seite */
.block{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:20px clamp(30px,5vw,80px);padding-block:clamp(26px,3.4vw,40px);border-top:1px solid var(--linie)}
.block:first-of-type{border-top:0;padding-top:0}
@media (max-width:900px){.block{grid-template-columns:minmax(0,1fr)}}

/* Rechtstexte */
.recht{max-width:78ch;overflow-wrap:break-word}
.recht h2{font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;margin:40px 0 12px}
.recht h3{font-weight:600;font-size:18px;margin:26px 0 8px}
.recht p,.recht li{color:var(--tinte-2);margin-bottom:10px}
.recht ul{list-style:disc;padding-left:22px}
.recht ol{list-style:decimal;padding-left:22px}
.recht a{color:var(--marke)}
.recht table{border-collapse:collapse;width:100%;font-size:15px;margin:10px 0 18px}
@media (max-width:720px){.recht table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
.recht th,.recht td{border-bottom:1px solid var(--linie);padding:8px 10px 8px 0;text-align:left;vertical-align:top}
.recht strong{color:var(--tinte)}
.recht .todo{margin:18px 0;padding:16px 18px;border-radius:var(--r);background:#FFF6D6;box-shadow:inset 0 0 0 1px #E8D27A;color:var(--tinte);font-size:15px}
.recht mark.luecke{background:#FFE55C;color:var(--tinte);font-weight:700;padding:0 3px;border-radius:var(--r)}
.recht .stand{color:var(--stumm);font-size:14.5px}
.recht .inhalt,.recht .kurz{margin:18px 0;padding:18px 20px;border-radius:var(--r);background:var(--ton)}
.recht .inhalt ol{list-style:decimal;padding-left:22px;margin-top:6px}
.recht .betont{border-left:4px solid var(--marke);padding-left:14px;font-weight:500}
.recht .widerspruch{margin:18px 0;padding:18px 20px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--marke)}
.recht .back{display:none}

/* --- 18 · Reduzierte Bewegung: alles fertig, nichts fährt ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .szene__welt{transform:none!important}
  .gb{transform:none!important}
}

/* Druck */
@media print{.kopf,.leiste-mobil,.blatt-menue,.szene{display:none!important}.nacht{background:#fff;color:#000}}

/* --- Hinweis nach Weiterleitung von einer Fehlerseite (Runde 22) -----------
   Kommt nur, wenn weiter.js umgeleitet hat. Sagt, warum man hier ist, und geht von selbst:
   der Balken unten läuft 8 s ab (linear = Zeit), Überfahren hält ihn an. Weg wie gekommen. */
.hinweis{position:fixed;left:var(--rand);bottom:20px;z-index:80;width:min(420px,calc(100% - 2*var(--rand)));display:grid;grid-template-columns:1fr auto;
  align-items:start;gap:4px 12px;padding:18px 14px 22px 20px;background:var(--grund);border-radius:var(--r);box-shadow:var(--schatten-gross);overflow:hidden;
  opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .3s var(--aus)}
.hinweis[data-da]{opacity:1;transform:none}
.hinweis__text{display:grid;gap:4px;font-size:15px;line-height:1.45;color:var(--stumm)}
.hinweis__text b{font-weight:600;color:var(--tinte);font-size:16px}
.hinweis__text code{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;padding:3px 8px;border-radius:6px;background:var(--ton);font:500 12.5px/1.4 var(--mono);color:var(--stumm)}
.hinweis__zu{display:grid;place-items:center;width:44px;height:44px;margin:-10px -6px 0 0;border:0;border-radius:50%;background:none;color:var(--stumm);cursor:pointer;transition:background-color .2s ease,transform .16s var(--aus)}
.hinweis__zu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hinweis__zu:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.hinweis__zu:hover{background:var(--ton);color:var(--tinte)}}
.hinweis__zeit{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--linie)}
.hinweis__zeit i{position:absolute;inset:0;background:var(--marke);transform-origin:0 50%}
@media (prefers-reduced-motion:reduce){.hinweis{transform:none}}