/* simonmonu.at · Stil. Werte aus _werkzeug/farben.py. Keine Bibliotheken. */

@font-face{font-family:"Schibsted Grotesk";src:url(../assets/fonts/schibsted-grotesk.woff2) format("woff2");font-weight:400 600;font-style:normal;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:"Schibsted Grotesk";src:url(../assets/fonts/schibsted-grotesk-zeichen.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+00D7,U+2190-2199,U+2248,U+2264-2265}
@font-face{font-family:"Fragment Mono";src:url(../assets/fonts/fragment-mono.woff2) format("woff2");font-weight:400;font-style:normal;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:"Fragment Mono";src:url(../assets/fonts/fragment-mono-zeichen.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+00D7,U+2190-2199,U+2248,U+2264-2265}
/* Ersatzschriften mit gemessenen Maßen (_werkzeug/schriften.py), damit beim Tausch nichts verrutscht */
@font-face{font-family:"Schibsted Ersatz";src:local("Arial"),local("Liberation Sans");size-adjust:103.85%;ascent-override:94.04%;descent-override:24.83%;line-gap-override:0%}
@font-face{font-family:"Fragment Ersatz";src:local("Courier New"),local("Liberation Mono");size-adjust:102.98%;ascent-override:92.25%;descent-override:24.28%;line-gap-override:0%}

:root{
  --papier:#FFFFFF;--papier-2:#F7F5F7;--linie:#E2DEE1;--linie-stark:#8A8489;
  --tinte:#181317;--tinte-2:#514B50;--tinte-3:#70696F;
  --signal:#AC20A6;--signal-flaeche:#FBEDF9;
  --sans:"Schibsted Grotesk","Schibsted Ersatz",system-ui,sans-serif;
  --mono:"Fragment Mono","Fragment Ersatz",ui-monospace,monospace;
  --t-display:clamp(2.75rem,1.5rem + 4.2vw,5rem);
  --t-xl:clamp(2.35rem,1.6rem + 2.6vw,3.55rem);
  --t-l:clamp(1.85rem,1.4rem + 1.7vw,2.7rem);
  --t-m:clamp(1.4rem,1.2rem + .8vw,2rem);
  --t-lead:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --t-text:clamp(1.0625rem,1rem + .15vw,1.125rem);
  --t-meta:.84375rem;
  --rand:20px;--spalte:24px;
  --sektion:clamp(72px,8vw,160px);--kopf-inhalt:clamp(40px,4.4vw,72px);
  --e-ein:cubic-bezier(.2,0,0,1);--e-quint:cubic-bezier(.22,1,.36,1);--e-expo:cubic-bezier(.16,1,.3,1);--e-aus:cubic-bezier(.4,0,1,1);--e-inaus:cubic-bezier(.65,0,.35,1);
  --kopfhoehe:64px;
}
@media (min-width:768px){:root{--rand:40px}}
@media (min-width:1024px){:root{--rand:64px}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#130F13;--papier-2:#1D171C;--linie:#342E33;--linie-stark:#797278;
    --tinte:#F2EFF1;--tinte-2:#C1BCC0;--tinte-3:#A29CA1;--signal:#E38FDB;--signal-flaeche:#341D32;color-scheme:dark}
}
:root[data-theme="dark"]{
  --papier:#130F13;--papier-2:#1D171C;--linie:#342E33;--linie-stark:#797278;
  --tinte:#F2EFF1;--tinte-2:#C1BCC0;--tinte-3:#A29CA1;--signal:#E38FDB;--signal-flaeche:#341D32;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopfhoehe) + 16px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:var(--t-text);line-height:1.6;font-weight:400;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--signal-flaeche);color:var(--tinte)}
html{accent-color:var(--tinte);caret-color:var(--signal);font-synthesis:none}
html.umschalten *,html.umschalten *::before,html.umschalten *::after{transition:none!important}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{color:var(--tinte)}
  .knopf:hover::before{transform:scaleX(1);transform-origin:left}
  .knopf-2:hover{color:var(--papier);border-color:var(--tinte)}
  .knopf:hover .pfeil,.tl:hover .pfeil{transform:translate(2px,-2px)}
  .tl:hover{text-decoration-color:currentColor}
  .fuss-spalte a:hover{text-decoration:underline}
  .kopf-nav a:hover::after{transform:scaleX(1)}
}
picture.bild,picture.bild img{width:100%}
strong,b{font-weight:600}
.t-l+p:not(.lead),.t-m+p:not(.lead){margin-top:20px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
h1,h2,h3{font-weight:500;text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.01em;font-size:var(--t-meta);font-variant-numeric:tabular-nums}
.klein{font-size:var(--t-meta);color:var(--tinte-2)}
.t-display{font-size:var(--t-display);line-height:1;letter-spacing:-.03em;font-weight:500}
.t-xl{font-size:var(--t-xl);line-height:1.04;letter-spacing:-.025em}
.t-l{font-size:var(--t-l);line-height:1.1;letter-spacing:-.02em}
.t-m{font-size:var(--t-m);line-height:1.2;letter-spacing:-.015em}
.lead{font-size:var(--t-lead);line-height:1.45;color:var(--tinte-2);max-width:38em;margin-top:24px}
p+p{margin-top:1em}
.kicker{color:var(--tinte-3);margin-bottom:16px}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.sprung{position:absolute;left:var(--rand);top:-100px;background:var(--tinte);color:var(--papier);padding:12px 16px;z-index:100;text-decoration:none}
.sprung:focus{top:8px}

.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--rand)}
.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spalte)}
@media (min-width:768px){.raster{grid-template-columns:repeat(6,1fr)}}
@media (min-width:1024px){.raster{grid-template-columns:repeat(12,1fr)}}
.sek{padding-block:var(--sektion);position:relative}
.sek-kopf,.sek-kopfseite{padding-bottom:0}
/* Linie zwischen Abschnitten: Teil der Zeichnung, nicht Deko je Zeile */
/* Linie zwischen Abschnitten: zieht sich beim Hineinscrollen von links auf */
.sek+.sek::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linie);transform-origin:left;transition:transform 1400ms var(--e-expo)}
.sek-hero+.sek::before,.sek-case-bild::before{display:none}
.sek-kopfseite{padding-top:calc(var(--sektion) * .6);padding-bottom:calc(var(--sektion) * .5)}
.sek-kopfseite .t-xl{max-width:18ch}
.sek-kopf{margin-bottom:var(--kopf-inhalt);max-width:44em}
.sek-kopf .lead{margin-top:16px}

/* --- Kopf ------------------------------------------------------------------ */
.kopf{position:sticky;top:0;z-index:50;height:var(--kopfhoehe);display:flex;align-items:center;gap:16px;padding-inline:var(--rand);
  border-bottom:1px solid var(--linie)}
/* Unschärfe auf eigener Ebene: backdrop-filter am Kopf selbst würde das feste Menü-Blatt in den Kopf einsperren */
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html:has(.menue[open]){overflow:hidden}
.kopf-name{font-weight:500;text-decoration:none;letter-spacing:-.01em;margin-right:auto}
.kopf-nav{display:none;gap:28px}
.kopf-nav a{text-decoration:none;font-size:15px;padding:8px 0;position:relative}
.kopf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--e-ein)}
.kopf-nav a[aria-current]::after{transform:scaleX(1)}
.knopf{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px;background:var(--tinte);color:var(--papier);text-decoration:none;font:inherit;font-weight:500;border:1px solid var(--tinte);cursor:pointer;
  transition:background 240ms var(--e-ein),color 240ms var(--e-ein)}

.knopf-2{background:transparent;color:var(--tinte);border-color:var(--linie-stark)}
.knopf{position:relative;isolation:isolate;overflow:hidden}
.knopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--papier);transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--e-quint)}
.knopf-2::before{background:var(--tinte)}

.knopf-klein{min-height:40px;padding:0 18px;font-size:15px}
.pfeil{transition:transform 240ms var(--e-ein)}

.kopf-cta{min-height:40px;padding:0 14px;font-size:14px}
@media (min-width:768px){.kopf-cta{padding:0 18px;font-size:15px}}
.tl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--linie-stark);transition:text-decoration-color 120ms}

/* alleinstehende Textlinks: Trefferfläche ≥ 24 px hoch */
:is(.alle,.ueber-link,.beleg-links,.knoepfe,.fehler-links,.preis-hinweis) a{display:inline-block;padding-block:6px}

.menue{position:relative}
.menue summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font-weight:500}
.menue summary::-webkit-details-marker{display:none}
.menue summary i{width:18px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;display:block}
.menue-blatt{position:fixed;top:var(--kopfhoehe);left:0;right:0;bottom:0;background:var(--papier);padding:32px var(--rand);overflow:auto;z-index:60}
.menue-blatt nav{display:grid;gap:4px}
.menue-blatt nav a{font-size:var(--t-l);letter-spacing:-.02em;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--linie);font-weight:500}
@media (min-width:1024px){.kopf{gap:24px}.kopf-nav{display:flex}.menue{display:none}}

/* --- Seitenwechsel (Cross-Document View Transitions) ------------------------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:wechsel-aus 240ms var(--e-aus) both}
::view-transition-new(root){animation:wechsel-ein 480ms var(--e-ein) both}
@keyframes wechsel-aus{to{opacity:0;transform:translateY(-24px)}}
@keyframes wechsel-ein{from{opacity:0;transform:translateY(24px)}}
.wechsel{position:fixed;left:0;right:0;top:var(--kopfhoehe);height:1px;background:var(--signal);transform-origin:left;pointer-events:none;opacity:0;z-index:70}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root){animation:none}
  ::view-transition-new(root){animation:wechsel-weich 240ms linear both}
  @keyframes wechsel-weich{from{opacity:0}}
  .wechsel{display:none}
}

/* --- Hero ------------------------------------------------------------------ */
.sek-hero{padding-top:clamp(48px,7vw,112px);padding-bottom:clamp(64px,8vw,128px)}
.spur{color:var(--signal);margin-bottom:clamp(32px,4vw,56px);min-height:1.5em}
@media (min-width:1024px){.spur{text-align:right}}
.hero-innen{position:relative}
.hero-innen h1+.lead{margin-top:44px}
.hero-innen h1{max-width:none}
.hero-innen .lead{max-width:30em}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:40px}
.hero-preise{margin-top:32px;font-size:var(--t-meta);color:var(--tinte-3)}

/* --- Beleg-Leiste --------------------------------------------------------- */
.sek-beleg{padding-block:0;border-block:1px solid var(--linie);background:var(--papier-2)}
.sek-beleg .wrap{padding-block:clamp(24px,3vw,40px)}
.beleg{display:grid;grid-template-columns:1fr;gap:24px 32px;align-items:center}
.beleg-kopf{font-size:var(--t-m);letter-spacing:-.015em}
.beleg-text p{margin-top:8px;color:var(--tinte-2)}
.beleg-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px!important}
.werte{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px}
.werte>div{border-top:1px solid var(--linie-stark);padding-top:10px}
.werte dt{color:var(--tinte-3);font-size:var(--t-meta)}
.werte dd.mono:not(.klein){font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--tinte);letter-spacing:-.01em;margin-top:4px}
.werte .klein{font-size:var(--t-meta);margin-top:2px}
.beleg-quelle{color:var(--tinte-3)}
.werte-breit{grid-template-columns:repeat(2,1fr);margin-block:24px}
@media (min-width:1024px){
  .beleg{grid-template-columns:5fr 7fr;grid-template-areas:"t w" "q q";align-items:end;column-gap:var(--spalte)}
  .beleg-text{grid-area:t}.werte{grid-area:w;grid-template-columns:repeat(4,1fr)}.beleg-quelle{grid-area:q}
  .werte-breit{grid-template-columns:repeat(4,1fr)}
}

/* --- Arbeiten ------------------------------------------------------------- */
.arbeit-meta{margin-top:16px;color:var(--tinte-3);font-size:15px}
.marke{border:1px solid var(--linie-stark);padding:2px 8px;margin-right:8px;color:var(--tinte)}
.marke-demo{border-style:dashed}
.arbeit-titel{font-size:var(--t-m);letter-spacing:-.015em;margin-top:6px}
.arbeit-text{margin-top:8px;color:var(--tinte-2);max-width:34em}
.arbeit-ansehen{display:inline-block;margin-top:14px;text-decoration:underline;text-underline-offset:.25em;text-decoration-color:var(--linie-stark)}
.alle{margin-top:var(--kopf-inhalt)}
@media (min-width:1440px){.arbeiten-rechts{margin-right:calc((100vw - 1440px) / -2 - var(--rand))}}

/* --- Pakete --------------------------------------------------------------- */
.karten{display:grid;gap:var(--spalte);grid-template-columns:1fr}
@media (min-width:768px){.karten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1280px){.karten{grid-template-columns:repeat(4,1fr)}.karten-zwei{grid-template-columns:repeat(2,1fr)}}
.wrap>.t-l+:is(.karten,.schiene),.wrap>.lead+:is(.karten,.schiene){margin-top:var(--kopf-inhalt)}
.wrap>.t-l+.lead{margin-top:16px}
.karte{border:1px solid var(--linie);padding:28px 24px;display:flex;flex-direction:column;gap:12px;background:var(--papier)}
.karte-name{font-size:var(--t-m);letter-spacing:-.015em}
.karte-preis{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);letter-spacing:-.02em;font-weight:500}
.karte-einf{color:var(--tinte-2)}
.karte-fuer{color:var(--tinte-2)}
.karte-liste{border-top:1px solid var(--linie);padding-top:12px;display:grid;gap:4px;font-size:15px;color:var(--tinte-2)}
.karte .knopf{margin-top:auto;justify-content:center}
.karte-auf{border-top:1px solid var(--linie);padding-top:8px;margin-top:auto}
.karte-auf+.knopf{margin-top:0}
.karte-auf summary,.faq summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-weight:500}
.karte-auf summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.karte-auf summary::after,.faq summary::after{content:"+";font-size:1.25em;line-height:1;transition:transform 240ms var(--e-ein)}
.karte-auf[open] summary::after,.faq[open] summary::after{transform:rotate(45deg)}
.karte-auf-inhalt{display:grid;gap:10px;padding-bottom:12px;font-size:15px}
.karte-auf-inhalt h4{font-size:var(--t-meta);font-weight:500;color:var(--tinte-2);margin-top:8px}
.karte-auf-inhalt ul{display:grid;gap:6px;list-style:"– ";padding-left:1em}
.preis-alt{text-decoration:line-through;color:var(--tinte-3)}
.einfuehrung{margin-top:var(--kopf-inhalt);max-width:40em;color:var(--tinte-2)}
.preis-hinweis{margin-top:24px}
.sek-einf .einf-text{grid-column:1/-1;max-width:44em}
@media (min-width:1024px){.sek-einf .einf-text{grid-column:1/9}}

/* --- Ablauf --------------------------------------------------------------- */
.schiene{display:grid;gap:32px;counter-reset:x;position:relative}
.schiene li{border-top:1px solid var(--linie-stark);padding-top:16px;display:grid;gap:8px;align-content:start}
.schiene h3{font-size:var(--t-lead);letter-spacing:-.015em}
.schiene p{color:var(--tinte-2);font-size:15px;max-width:26em}
.ab-nr{color:var(--tinte-3);font-size:var(--t-meta);font-variant-numeric:tabular-nums}
.zahlung{margin-top:var(--kopf-inhalt);max-width:38em;color:var(--tinte-2)}
@media (min-width:768px){.schiene{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.schiene{grid-template-columns:repeat(4,1fr);gap:var(--spalte)}}

/* --- Handwerk, Über mich, Kontakt -------------------------------------- */
.handwerk-text,.problem-text{grid-column:1/-1;max-width:40em}
@media (min-width:1024px){.handwerk-text{grid-column:1/9}.problem-text{grid-column:3/11}}
.statement{max-width:20ch}
.ueber-unten{margin-top:var(--kopf-inhalt)}
.ueber-text{grid-column:1/-1;max-width:36em;color:var(--tinte-2)}
.ueber-link{grid-column:1/-1;margin-top:16px}
@media (min-width:1024px){.ueber-text{grid-column:5/11}.ueber-link{grid-column:5/11}}
.spalte-titel{grid-column:1/-1;margin-bottom:16px}
.text-spalte{grid-column:1/-1;max-width:40em}
@media (min-width:1024px){.spalte-titel{grid-column:1/5}.text-spalte{grid-column:5/12}}
.prinzipien{display:grid;gap:20px;counter-reset:p}
.prinzipien li{padding-top:16px;border-top:1px solid var(--linie)}
.code{margin-block:24px;border:1px solid var(--linie);background:var(--papier-2)}
.code pre{margin:0;padding:20px;overflow:auto;font-family:var(--mono);font-size:var(--t-meta);line-height:1.7;color:var(--tinte)}
.code figcaption{padding:10px 20px;border-top:1px solid var(--linie);color:var(--tinte-3)}
.kontakt-raster{display:grid;gap:var(--kopf-inhalt)}
@media (min-width:1024px){.kontakt-raster{grid-template-columns:7fr 5fr;gap:calc(var(--spalte) * 2)}}
.direkt{display:grid;gap:0;margin-top:16px}
.direkt li{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--linie)}
.direkt-titel{color:var(--tinte-3);font-size:15px}
.tel-gross{font-size:var(--t-xl);letter-spacing:-.025em;margin-top:16px}
.tel-gross a{text-decoration:none}
.hilft{margin-top:var(--kopf-inhalt)}
.hilft-liste{margin-top:16px;display:grid;gap:8px;list-style:"– ";padding-left:1em;color:var(--tinte-2)}
.formular{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
@media (min-width:768px){.formular{grid-template-columns:1fr 1fr}.feld-breit,.formular-fuss,.formular-meldung{grid-column:1/-1}}
.feld{display:grid;gap:6px}
.feld label{font-size:15px;font-weight:500;color:var(--tinte)}
.feld-fehler{font-size:var(--t-meta);color:var(--signal)}
.feld input,.feld select,.feld textarea{font:inherit;color:var(--tinte);background:var(--papier);border:1px solid var(--linie-stark);border-radius:0;min-height:48px;padding:10px 14px;width:100%}
.feld textarea{min-height:140px;resize:vertical}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.feld [aria-invalid="true"]{border-color:var(--signal)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.formular-meldung{min-height:1.6em;color:var(--signal)}
.ring{margin-top:var(--kopf-inhalt);max-width:280px}
.ring-svg{width:100%;height:auto;overflow:visible}
.ring-m{font-size:11px;fill:var(--tinte-3)}
.ring-jetzt{fill:var(--signal)}
.ring-kreis{stroke:var(--linie-stark);stroke-width:1}
.ring-punkt{fill:var(--signal)}
.ring-klein{font-size:10px;fill:var(--tinte-3)}
.ring-gross{font-size:22px;font-weight:500;fill:var(--tinte);letter-spacing:-.01em}
html.js .ring-drehen{transform-origin:150px 150px;animation:ring-ein 1200ms var(--e-inaus) both}
@keyframes ring-ein{from{transform:rotate(-30deg);opacity:0}}

.faq-titel{grid-column:1/-1}.faq-liste{grid-column:1/-1;max-width:44em}
@media (min-width:1024px){.faq-titel{grid-column:1/5}.faq-liste{grid-column:5/12}}
.faq{border-top:1px solid var(--linie)}.faq:last-child{border-bottom:1px solid var(--linie)}
.faq p{padding:0 0 20px;color:var(--tinte-2);max-width:38em}
.drin-titel{grid-column:1/-1}.drin-liste{grid-column:1/-1;display:grid;gap:0}
.drin-liste li{padding:18px 0;border-top:1px solid var(--linie);max-width:40em}
@media (min-width:1024px){.drin-titel{grid-column:1/5}.drin-liste{grid-column:5/12}}
.demo-groß{margin-top:var(--kopf-inhalt)}
.demo-link{display:block;border:1px solid var(--linie)}
.betreuung-text{grid-column:1/-1;max-width:34em}.betreuung-liste{grid-column:1/-1;display:grid;gap:0;margin-top:24px}
.betreuung-liste li{padding:14px 0;border-top:1px solid var(--linie);color:var(--tinte-2)}.betreuung-liste strong{color:var(--tinte);font-weight:500;display:block}
@media (min-width:1024px){.betreuung-text{grid-column:1/6}.betreuung-liste{grid-column:7/13;margin-top:0}}
.empf-text{grid-column:1/-1;max-width:44em}
@media (min-width:1024px){.empf-text{grid-column:3/11}}

/* --- Tabellen, Farben, Cases --------------------------------------------- */
.tab-wrap{overflow-x:auto;margin-top:32px;border-top:1px solid var(--linie-stark)}
.tabelle{width:100%;border-collapse:collapse;font-size:15px}
.tabelle caption{text-align:left;color:var(--tinte-3);padding:12px 0}
.tabelle th,.tabelle td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle thead th{font-weight:500;font-size:var(--t-meta);color:var(--tinte-3)}
.tabelle tbody th{font-weight:500}
.preis-spalte{white-space:nowrap}
.tabelle-spez th{width:30%;color:var(--tinte-2)}
.farbreihe{display:grid;gap:12px;margin-block:20px}
.farbe{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center}
.farbe-feld{display:block;width:56px;height:56px;border:1px solid var(--linie);background:#888}
.farbe-klein{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px}
.vorher-nachher{display:grid;grid-template-columns:1fr 1fr;gap:var(--spalte);margin-top:24px;max-width:640px}
.vorher-nachher figcaption{margin-top:8px;color:var(--tinte-3)}
.vorher-nachher img{border:1px solid var(--linie)}
.sek-abschnitt{padding-block:clamp(40px,5vw,80px)}
.sek-schluss{background:var(--papier-2)}
.sek-schluss .knoepfe{margin-top:32px}

/* --- Rechtstexte ---------------------------------------------------------- */
.rechtstext-innen{grid-column:1/-1;max-width:44em}
@media (min-width:1024px){.rechtstext-innen{grid-column:3/11}}
.rechtstext h2{font-size:var(--t-lead);letter-spacing:-.015em;margin-top:2.2em;margin-bottom:.4em}
.rechtstext ul{list-style:"– ";padding-left:1em;display:grid;gap:8px;margin-top:8px}
.rechtstext p{color:var(--tinte-2)}.stand{margin-top:3em;color:var(--tinte-3)}
.fehler-text{grid-column:1/-1}.fehler-plan{grid-column:1/-1;margin-top:40px}
@media (min-width:1024px){.fehler-text{grid-column:1/7}.fehler-plan{grid-column:8/13;margin-top:0}}
.fehler-rahmen{aspect-ratio:4/3;border:1px dashed var(--signal);display:grid;place-items:center;color:var(--signal)}
.fehler-links{display:grid;gap:8px;margin-top:32px}.fehler-links a{text-decoration:underline;text-underline-offset:.25em}
.seite-404 .sek{min-height:60vh}

/* --- Fuß ---------------------------------------------------------------- */
.fuss{border-top:1px solid var(--linie);padding-top:clamp(48px,6vw,96px);background:var(--papier)}
.fuss-oben{row-gap:40px}
.fuss-marke{grid-column:1/-1;max-width:24em;color:var(--tinte-2)}
.fuss-name{font-size:var(--t-m);letter-spacing:-.015em;color:var(--tinte);font-weight:500;margin-bottom:8px}
.fuss-spalte{grid-column:span 2}
@media (min-width:1024px){.fuss-marke{grid-column:1/6}.fuss-seiten{grid-column:7/9}.fuss-recht{grid-column:9/11}.fuss-kontakt{grid-column:11/13}}
.fuss-titel{color:var(--tinte-3);font-weight:500;font-size:var(--t-meta);letter-spacing:0;margin-bottom:12px}
.fuss-spalte ul{display:grid;gap:2px}
.fuss-spalte a{text-decoration:none;display:inline-block;padding:6px 0;font-size:15px}

.fuss-unten{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center;padding-block:32px 40px;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--linie)}
.fuss-spur{color:var(--signal)}.fuss-c{color:var(--tinte-3)}
.thema{background:none;border:1px solid var(--linie);color:var(--tinte-2);padding:0 12px;min-height:36px;cursor:pointer;display:none}
html.js .thema{display:inline-flex;align-items:center}

/* --- Bewegung -------------------------------------------------------------- */
/* --- Bewegung ------------------------------------------------------------
   Grundsatz: Ohne JavaScript, bei reduzierter Bewegung (html.ruhig) und im Notfall (html.frei, wenn seite.js
   nicht läuft) ist alles sofort sichtbar. Nur html.js ohne diese beiden Klassen setzt Ausgangszustände. */
html.js:not(.ruhig):not(.frei) [data-stagger]>*{opacity:0;transform:translateY(24px)}
[data-stagger]>*{transition:opacity 700ms var(--e-quint),transform 900ms var(--e-quint);transition-delay:calc(var(--i,0) * 70ms)}
html.js:not(.ruhig):not(.frei) [data-stagger].ein>*{opacity:1;transform:none}
/* Überschriften: Zeile für Zeile aus einer Maske */
html.js:not(.ruhig):not(.frei) main :is(h1,h2):is(.t-display,.t-xl,.t-l):not(.geteilt){visibility:hidden}
.zeile{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.zeile-in{display:block;transform:translateY(112%);transition:transform 1000ms var(--e-quint);transition-delay:calc(var(--z,0) * 90ms + var(--v,0ms))}
.geteilt.an .zeile-in{transform:none}
/* Kopfbereich: alles außer der Überschrift wartet auf den Start */
/* Der Einleitungstext bleibt von Anfang an stehen: Er ist der größte Textblock und bestimmt damit das gemessene LCP */
html.js:not(.ruhig):not(.frei) :is(.hero-innen,.sek-kopfseite .wrap)>:not(h1):not(.lead):not(.an){opacity:0}
html.js:not(.ruhig):not(.frei) .sek+.sek:not(.linie-an)::before{transform:scaleX(0)}
/* Ausgangszustände stehen hier als Selektoren (nicht erst per JavaScript gesetzt), damit beim ersten Bild nichts aufblitzt.
   Dieselben Listen stehen in seite.js (beob). */
:is(.sek:not(.sek-hero):not(.sek-kopfseite):not(.rechtstext) .lead,.text-spalte > p,.zahlung,.einfuehrung,.preis-hinweis,.ueber-text,.problem-text > p,.beleg-text){transition:opacity 1000ms var(--e-ein);transition-delay:var(--v,0ms)}
.bw-auf,:is(.arbeit-zeile,.reiter-liste,.fenster-info,.alle,.sek:not(.sek-hero):not(.sek-kopfseite) .knoepfe,.tab-wrap,.farbreihe li,.formular,.direkt,.faq-liste,.betreuung-liste li,.prinzipien li,.code,.hilft-liste,.werte,.ueber-link){transition:opacity 800ms var(--e-quint),transform 1000ms var(--e-quint);transition-delay:var(--v,0ms)}
html.js:not(.ruhig):not(.frei) :is(.sek:not(.sek-hero):not(.sek-kopfseite):not(.rechtstext) .lead,.text-spalte > p,.zahlung,.einfuehrung,.preis-hinweis,.ueber-text,.problem-text > p,.beleg-text):not(.an){opacity:0}
html.js:not(.ruhig):not(.frei) :is(.bw-auf,.arbeit-zeile,.reiter-liste,.fenster-info,.alle,.sek:not(.sek-hero):not(.sek-kopfseite) .knoepfe,.tab-wrap,.farbreihe li,.formular,.direkt,.faq-liste,.betreuung-liste li,.prinzipien li,.code,.hilft-liste,.werte,.ueber-link):not(.an){opacity:0;transform:translateY(24px)}
/* Bilder: öffnen sich von unten, das Bild darin setzt sich dabei */
:is(.fenster-rahmen,.vorher-nachher figure){transition:clip-path 1300ms var(--e-expo);transition-delay:var(--v,0ms)}
:is(.fenster-rahmen,.vorher-nachher figure) :is(img,video){transition:transform 1600ms var(--e-expo),opacity 240ms;transition-delay:var(--v,0ms)}
html.js:not(.ruhig):not(.frei) :is(.fenster-rahmen,.vorher-nachher figure):not(.an){clip-path:inset(100% 0 0 0)}
html.js:not(.ruhig):not(.frei) :is(.fenster-rahmen,.vorher-nachher figure):not(.an) :is(img,video){transform:scale(1.12)}
/* Ablauf: die Linie über den Schritten zieht sich nacheinander auf */
.schiene li{border-top:0;position:relative}
.schiene li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linie-stark);transform-origin:left;transition:transform 1100ms var(--e-expo);transition-delay:calc(var(--i,0) * 160ms)}
html.js:not(.ruhig):not(.frei) .schiene:not(.ein) li::before{transform:scaleX(0)}
/* Maßlinie unter der Startüberschrift: echte Breite, echte Schriftgröße */
.masslinie{position:absolute;height:15px;pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--signal)}
.masslinie::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:currentColor;transform-origin:left;transition:transform 1200ms var(--e-expo)}
.masslinie::after{content:"";position:absolute;inset:0;border-inline:1px solid currentColor;transition:opacity 400ms}
.masslinie span{position:relative;background:var(--papier);padding:0 10px;font-family:var(--mono);font-size:12px;line-height:15px;letter-spacing:.01em;transition:opacity 500ms var(--e-ein) 700ms;white-space:nowrap}
html.js:not(.ruhig) .masslinie:not(.an)::before{transform:scaleX(0)}
html.js:not(.ruhig) .masslinie:not(.an)::after,html.js:not(.ruhig) .masslinie:not(.an) span{opacity:0}
/* Seitenwechsel ohne View Transitions (Firefox, Safari, per Doppelklick): kurz ausblenden, dann weiter */
html.geht :is(main,.fuss){opacity:0;transform:translateY(-12px);transition:opacity 180ms var(--e-aus),transform 180ms var(--e-aus)}
html.geht .wechsel{opacity:1;transform:scaleX(1);transition:transform 180ms var(--e-aus)}
.wechsel{transform:scaleX(0)}

/* Platzhalter, bis das Bild da ist (nur mit JavaScript, nur unterhalb des ersten Schirms) */
html.js picture.bild[data-bild]:not(.geladen){position:relative;display:block;outline:1px dashed var(--signal);outline-offset:-1px}
html.js picture.bild[data-bild]:not(.geladen)::before{content:attr(data-bild);position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:var(--t-meta);color:var(--signal);z-index:1}
html.js picture.bild[data-bild] img{transition:opacity 320ms var(--e-ein)}
html.js picture.bild[data-bild]:not(.geladen) img{opacity:0}

/* Startansicht */
.stueckliste{position:fixed;inset:0;z-index:200;background:var(--papier);display:none;padding:var(--rand);flex-direction:column;justify-content:flex-end;overflow:hidden}
html.intro .stueckliste{display:flex}
html.intro.frei .stueckliste:not(.weg){display:none}
html.intro:not(.frei):not(.intro-aus) :is(.kopf,main,.fuss){visibility:hidden}
.stueckliste ul{max-width:720px;width:100%;display:grid;gap:2px;align-content:start;min-height:calc(9 * 32px)}
.stueckliste .st-summe{min-height:1.6em}
.stueckliste li{display:grid;grid-template-columns:1fr auto auto;gap:24px;padding:4px 0;height:30px;align-items:center;border-bottom:1px solid var(--linie);opacity:0;animation:zeile-ein 240ms var(--e-ein) forwards;color:var(--tinte-2)}
.stueckliste li span:last-child{color:var(--signal)}
.stueckliste .st-kopf{color:var(--tinte-3);margin-bottom:16px}
.stueckliste .st-summe{margin-top:16px;color:var(--signal)}
.stueckliste.weg{animation:st-weg 480ms var(--e-inaus) forwards}
@keyframes zeile-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes st-weg{to{opacity:0;transform:translateY(-24px)}}
@media (prefers-reduced-motion:reduce){.stueckliste li{animation:none;opacity:1}.stueckliste.weg{animation:st-weg-weich 240ms linear forwards}@keyframes st-weg-weich{to{opacity:0}}}

/* Zeiger (nur feine Zeigegeräte) */
@media (pointer:fine){
  html.zeiger,html.zeiger a,html.zeiger button,html.zeiger summary{cursor:none}
  .zeiger-el{position:fixed;left:0;top:0;z-index:300;pointer-events:none;font-size:14px;color:var(--tinte);mix-blend-mode:normal;will-change:transform}
  .zeiger-el::before{content:"+";display:block;width:13px;height:13px;line-height:13px;text-align:center;font-size:16px;transform:translate(-50%,-50%)}
  .zeiger-el.griff::before{content:"";border:1px solid var(--signal);background:transparent;width:13px;height:13px}
  .zeiger-el .zeiger-text{position:absolute;left:14px;top:8px;white-space:nowrap;background:var(--papier);padding:2px 6px;border:1px solid var(--linie);opacity:0}
  .zeiger-el.griff .zeiger-text{opacity:1}
  .zeiger-mass{position:absolute;left:12px;top:10px;white-space:nowrap;font-size:11px;letter-spacing:.02em;color:var(--tinte-3);transition:opacity 160ms}
  .zeiger-el.mit-text .zeiger-mass{opacity:0}
  .zeiger-el.dunkel{--tinte:#F2EFF1;--tinte-3:#A29CA1;--papier:#181317;--linie:#342E33;--signal:#E38FDB}
}

.sek-hero .spur{position:relative}

/* Ohne JavaScript alles sichtbar */
noscript{display:none}
@media print{main *{visibility:visible!important;opacity:1!important;transform:none!important;clip-path:none!important}.kopf,.fuss-unten,.zeiger-el{display:none}}

/* --- Bühne: dunkle Fläche für die Arbeiten und den Kontakt -------------------
   Die Tokens werden im Abschnitt umgestellt, alles darin (Text, Linien, Knöpfe, Formular) folgt von selbst.
   Kontraste gegen #181317: Tinte 16,1, Tinte 2 9,8, Tinte 3 6,8, Signal 8,1, Linie stark 3,9 (UI ≥ 3). */
.sek-arbeiten,.sek-kontakt,.sek-schaufenster,.sek-case-bild,.sek-demo,.sek-anfrage{
  --papier:#181317;--papier-2:#1D171C;--linie:#342E33;--linie-stark:#797278;
  --tinte:#F2EFF1;--tinte-2:#C1BCC0;--tinte-3:#A29CA1;--signal:#E38FDB;--signal-flaeche:#341D32;
  background:var(--papier);color:var(--tinte);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.sek-arbeiten,.sek-kontakt,.sek-schaufenster,.sek-case-bild,.sek-demo,.sek-anfrage){--papier:#1D171C;--papier-2:#241D23}}
:root[data-theme="dark"] :is(.sek-arbeiten,.sek-kontakt,.sek-schaufenster,.sek-case-bild,.sek-demo,.sek-anfrage){--papier:#1D171C;--papier-2:#241D23}
.sek-case-bild{padding-block:var(--kopf-inhalt)}
/* Auf der Bühne trägt der Hauptknopf die Signalfarbe (Text #181317 auf #E38FDB: 8,1) */
:is(.sek-arbeiten,.sek-kontakt,.sek-schaufenster,.sek-case-bild,.sek-demo,.sek-anfrage) .knopf:not(.knopf-2){background:var(--signal);border-color:var(--signal);color:var(--papier)}
.sek-case-bild+.sek::before,.sek-arbeiten+.sek::before,.sek-schaufenster+.sek::before,.sek-demo+.sek::before{display:none}

/* --- Schaufenster: Arbeiten live --------------------------------------- */
.fenster{margin-top:var(--kopf-inhalt)}
.reiter-liste{display:grid;gap:8px;margin-bottom:16px}
@media (min-width:768px){.reiter-liste{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}
.reiter{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:12px 18px;border:1px solid var(--linie);background:transparent;color:var(--tinte-2);cursor:pointer;text-align:left;transition:border-color 240ms var(--e-ein),color 240ms var(--e-ein)}
.reiter-name{font-weight:500}
.reiter-paket{color:var(--tinte);font-size:15px;margin-top:2px}
.reiter[aria-selected="true"] .reiter-paket{color:var(--signal)}
.reiter-marke{font-size:var(--t-meta);color:var(--tinte-3)}
/* Handy: Name und Art links, Paket rechts, eine Zeile weniger je Reiter */
@media (max-width:767px){
  .reiter{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n p" "m p";column-gap:16px;align-items:center;width:100%}
  .reiter-name{grid-area:n}.reiter-marke{grid-area:m}.reiter-paket{grid-area:p;margin-top:0;text-align:right;max-width:9.5em}
}
.fenster-paket{margin-bottom:12px;color:var(--tinte-2)}
.fenster-paket a{color:var(--signal);text-underline-offset:.25em}
.reiter[aria-selected="true"]{border-color:var(--tinte);color:var(--tinte);box-shadow:inset 0 -2px 0 var(--signal)}
@media (hover:hover) and (pointer:fine){.reiter:hover{border-color:var(--linie-stark);color:var(--tinte)}}
.fenster-rahmen{border:1px solid var(--linie-stark);background:var(--papier)}
.fenster-leiste{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 14px;border-bottom:1px solid var(--linie);font-size:var(--t-meta);color:var(--tinte-3)}
.fenster-url{font-family:var(--mono);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fenster-live{color:var(--signal);font-family:var(--mono)}
.fenster-bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--papier-2)}
.fenster-bild iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;transform-origin:0 0;background:#fff;opacity:0;transition:opacity 500ms var(--e-quint)}
.fenster-bild iframe.da{opacity:1}
html:not(.js) .fenster-bild iframe{opacity:1}
/* Demo erst nach Klick bedienbar (Desktop und Handy): sonst scrollt man beim Durchscrollen der Seite in der Demo statt auf der Seite */
.fenster-tippen{display:inline-flex;align-items:center;position:absolute;right:12px;bottom:12px;min-height:44px;padding:0 16px;background:var(--tinte);color:var(--papier);border:0;font-weight:500;cursor:pointer;z-index:2}
.fenster-tippen[hidden],html:not(.js) .fenster-tippen{display:none}
html.js .fenster-bild:not(.aktiv) iframe{pointer-events:none}
.fenster-ohne{padding:24px}
@media (max-width:767px){.fenster-bild{aspect-ratio:3/4}}
.fenster-info{display:grid;gap:10px;margin-top:20px;max-width:46em}
.fenster-text{color:var(--tinte-2)}
.fenster-links{display:flex;flex-wrap:wrap;gap:8px 28px}
.fenster-links a{display:inline-block;padding-block:6px}
.sek-case-bild .fenster{margin-top:0}
.zeiger-el.aus{opacity:0}
/* Arbeiten als Liste ohne Bilder */
.arbeit-liste{margin-top:var(--kopf-inhalt);border-bottom:1px solid var(--linie)}
.arbeit-zeile{display:grid;gap:8px;padding:28px 0;border-top:1px solid var(--linie)}
.arbeit-zeile .arbeit-titel{margin-top:0}
.arbeit-wege{display:flex;flex-wrap:wrap;gap:8px 28px}
.arbeit-wege a{display:inline-block;padding-block:6px}
@media (min-width:1024px){.arbeit-zeile{grid-template-columns:repeat(12,1fr);column-gap:var(--spalte)}.arbeit-zeile>*{grid-column:5/13}.arbeit-zeile>.arbeit-titel{grid-column:1/5;grid-row:1/4}}

/* Farbfelder der Cases */
.f-0B0A09{background:#0B0A09}.f-BBA883{background:#BBA883}.f-F5F1F1{background:#F5F1F1}.f-943A2C{background:#943A2C}.f-F5F4F0{background:#F5F4F0}.f-1A2E26{background:#1A2E26}.f-E8914A{background:#E8914A}.f-FFFFFF{background:#FFFFFF}

/* Sprachumschalter */
.kopf-sprache{display:none;font-size:14px;letter-spacing:.04em;text-decoration:none;padding:8px 6px;min-height:24px;min-width:24px}
.kopf-sprache:hover{text-decoration:underline}
.menue-blatt nav .menue-sprache{font-size:var(--t-m,18px);letter-spacing:0;border-bottom:0;opacity:.75}
@media (min-width:1024px){.kopf-sprache{display:inline-block}}

/* --- Verdichtung und Hero (Okt 2026) -------------------------------------- */
:root{--sektion:clamp(56px,6vw,104px);--kopf-inhalt:clamp(32px,3.4vw,56px)}
.sek-hero{padding-top:clamp(28px,3.6vw,56px);padding-bottom:clamp(40px,4.6vw,72px)}
.spur{margin-bottom:clamp(20px,2.4vw,32px)}
.hero-innen{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-innen>*{grid-column:1}
.hero-innen h1{font-size:clamp(2.9rem,1rem + 5.2vw,5.75rem);line-height:.96;letter-spacing:-.035em;max-width:9.5em;text-wrap:balance}
.hero-innen h1+.lead{margin-top:28px}
.hero-innen .knoepfe{margin-top:32px}
.hero-innen .hero-preise{margin-top:24px}
.hero-bild{margin-top:clamp(28px,5vw,40px)}
.hero-innen .spur{text-align:left}
@media (min-width:1180px){
  .hero-innen{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:var(--spalte)}
  .hero-bild{grid-column:2;grid-row:1 / -1;margin-top:0;align-self:center}
}
.hero-bild .z-schmal{display:block;max-width:250px}
.hero-bild .z-voll{display:none}
@media (min-width:640px){.hero-bild .z-schmal{display:none}.hero-bild .z-voll{display:block;max-width:560px}}

/* Explosionszeichnung: Linie, Papier, Tinte. Magenta nur für die live gemessene Summe. */
.zeichnung{width:100%;height:auto;overflow:visible}
.zeichnung :is(path,rect,circle){fill:none;stroke:var(--tinte);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.zeichnung .pl{fill:var(--papier)}
.zeichnung .g{stroke:var(--linie-stark);stroke-dasharray:3 4;stroke-width:1}
.zeichnung .d{stroke-width:3}
.zeichnung .f{fill:var(--tinte)}
.zeichnung .kt{stroke-width:1}
.zeichnung .h{stroke:var(--linie-stark);stroke-width:1}
.zeichnung .pt{fill:var(--tinte);stroke:none}
.zeichnung text{font-family:var(--mono);font-size:13px;fill:var(--tinte-2);letter-spacing:.01em}
.zeichnung .nm{fill:var(--tinte);font-family:var(--sans);font-size:16.5px;font-weight:500;letter-spacing:0}
.zeichnung .aa{font-family:var(--sans);font-size:64px;font-weight:500;fill:var(--tinte);stroke:none;letter-spacing:-.03em}
.zeichnung .live{fill:var(--signal)}
.zeichnung .ml{stroke:var(--signal)}
/* Beim Scrollen setzen sich die Schichten zusammen (nur wo der Browser Scroll-Animationen kann; sonst bleibt sie auseinandergezogen) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .z-voll :is(.s,.ml,.mtg){animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root block);animation-range:0px 380px}
    .z-voll .s{animation-name:z-zu}
    .z-voll .ml{animation-name:z-mass;transform-origin:128px 663px}
    .z-voll .s1{--i:1}.z-voll .s2{--i:2}.z-voll .s3{--i:3}.z-voll .s4{--i:4}.z-voll .s5{--i:5}
    .z-voll .mtg{animation-name:z-text}
    @keyframes z-zu{to{transform:translateY(calc(var(--i) * 48px))}}
    @keyframes z-mass{to{transform:scaleY(.634)}}
    @keyframes z-text{to{transform:translateY(120px)}}
  }
}

/* Pakete und Messwerte */
.karte-name{font-size:clamp(1.25rem,1.05rem + .55vw,1.65rem);white-space:nowrap}
.werte dd.mono:not(.klein){font-size:clamp(1.75rem,1.15rem + 1.7vw,2.9rem);line-height:1.1;margin-top:8px}
.sek-beleg .wrap{padding-block:clamp(28px,3.4vw,48px)}

.handwerk-bild{grid-column:1/-1;max-width:400px}
@media (min-width:1024px){.handwerk-text{grid-column:1/8}.handwerk-bild{grid-column:8/13;max-width:none;align-self:center}}
.zeichnung .inv{fill:var(--papier);stroke:none;font-size:12px}
.zeichnung .zl{font-size:12px}
.beleg-kopf{line-height:1.2}

/* Datenblatt: die Pakete zum Vergleichen */
.nur-leser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.datenblatt{width:100%;border-collapse:collapse;text-align:left}
.datenblatt thead th{font-weight:400;font-size:var(--t-meta);color:var(--tinte-3);padding:0 16px 12px 0;border-bottom:1px solid var(--linie-stark)}
.datenblatt tbody :is(th,td){padding:22px 16px 22px 0;border-bottom:1px solid var(--linie);vertical-align:top;font-weight:400;color:var(--tinte-2);font-size:15px}
.datenblatt tbody th{width:34%;color:var(--tinte)}
.db-name{display:inline-block;font-size:var(--t-m);letter-spacing:-.015em;font-weight:500;text-decoration:none;line-height:1.2}
.db-name:hover{text-decoration:underline;text-underline-offset:.2em}
.db-fuer{display:block;margin-top:6px;color:var(--tinte-2);font-size:15px;max-width:26em;line-height:1.45}
.datenblatt .db-preis{text-align:right;padding-right:0;white-space:nowrap}
.db-preis>span:first-child{display:block;font-size:clamp(1.35rem,1.05rem + 1vw,2rem);font-weight:500;letter-spacing:-.02em;color:var(--tinte)}
.db-einf{display:block;margin-top:4px;font-size:var(--t-meta);color:var(--tinte-2)}
.datenblatt thead th:last-child{text-align:right;padding-right:0}
@media (max-width:899px){
  .datenblatt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .datenblatt,.datenblatt tbody{display:block}
  .datenblatt tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:22px 0;border-bottom:1px solid var(--linie)}
  .datenblatt tbody :is(th,td){display:block;padding:0;border:0;width:auto}
  .datenblatt tbody th{grid-column:1/-1;margin-bottom:6px}
  .datenblatt td::before{content:attr(data-l);display:block;font-size:var(--t-meta);color:var(--tinte-3)}
  .datenblatt .db-preis{grid-column:1/-1;text-align:left;margin-top:8px}
  .datenblatt .db-preis::before{display:none}
}

/* Arbeiten als nummerierte Liste (Reiter der Startseite) */
.fenster-reiter .reiter-liste{counter-reset:r;grid-template-columns:1fr;gap:0;border-top:1px solid var(--linie-stark)}
.fenster-reiter .reiter{counter-increment:r;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"z n" "z p" "z m";column-gap:16px;row-gap:2px;align-items:baseline;border:0;border-bottom:1px solid var(--linie);padding:18px 4px;min-height:64px;width:100%;box-shadow:none}
.fenster-reiter .reiter::before{content:"0" counter(r);grid-area:z;font-family:var(--mono);font-size:var(--t-meta);color:var(--tinte-3);padding-top:.5em}
.fenster-reiter .reiter-name{grid-area:n;font-size:var(--t-m);letter-spacing:-.015em;line-height:1.15;color:var(--tinte-2)}
.fenster-reiter .reiter-paket{grid-area:p;font-size:var(--t-meta);color:var(--tinte-3);margin:0;text-align:left;max-width:none}
.fenster-reiter .reiter-marke{grid-area:m;font-size:var(--t-meta)}
.fenster-reiter .reiter[aria-selected="true"]{box-shadow:none;border-bottom-color:var(--signal)}
.fenster-reiter .reiter[aria-selected="true"] .reiter-name{color:var(--tinte)}
.fenster-reiter .reiter[aria-selected="true"]::before{color:var(--signal)}
.fenster-reiter .reiter[aria-selected="true"] .reiter-paket{color:var(--tinte-2)}
@media (min-width:900px){
  .fenster-reiter .reiter{grid-template-columns:3.5rem minmax(0,1fr) auto auto;grid-template-areas:"z n p m";column-gap:24px;align-items:center;padding:22px 4px}
  .fenster-reiter .reiter::before{padding-top:0}
  .fenster-reiter .reiter-name{font-size:clamp(1.9rem,1.2rem + 1.8vw,3rem);letter-spacing:-.025em}
  .fenster-reiter .reiter-paket,.fenster-reiter .reiter-marke{font-size:15px;white-space:nowrap}
  .fenster-reiter .reiter-marke{min-width:9.5em;text-align:right}
}
@media (hover:hover) and (pointer:fine){.fenster-reiter .reiter:hover .reiter-name{color:var(--tinte)}}