/* MSY Studio · System „Nacht“ · Stil für Studio-Seiten und Kundenentwürfe. Verbindlich: DESIGN.md.
   Basis: Anthrazit, Kreide, Messing. Display: Archivo (variabel, wdth 62–125). Text: Newsreader (variabel, opsz).
   Alles lokal: Schriften unter /static/fonts, Bewegung in /static/nacht.js mit /static/vendor (GSAP, ScrollTrigger, Lenis). */

/* ---------- Schriften (SIL OFL 1.1, Dateien von fonts.gstatic.com, Stand 2026-09-24) ---------- */
/* Pfade relativ zur CSS-Datei, damit auch file://-Tests (render.py, screenshots.py) die Schriften finden */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-latin.woff2") format("woff2");
  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:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-latin-ext.woff2") format("woff2");
  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:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-italic-latin.woff2") format("woff2");
  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:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-italic-latin-ext.woff2") format("woff2");
  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:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/newsreader-latin.woff2") format("woff2");
  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:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/newsreader-latin-ext.woff2") format("woff2");
  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:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url("fonts/newsreader-italic-latin.woff2") format("woff2");
  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:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url("fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  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}

/* ---------- Farben und Maße ---------- */
:root{
  --nacht:#121110;
  --kohle:#191817;
  --russ:#222120;
  --linie:rgba(239,233,223,.13);
  --linie-stark:rgba(239,233,223,.3);
  --kreide:#efe9df;
  --kreide-70:rgba(239,233,223,.72);
  --kreide-40:rgba(239,233,223,.42);
  --asche:#a69f93;
  --messing:#c9a45c;
  --messing-hell:#e6c982;
  --messing-tief:#8a6a30;
  --akzent:var(--messing);
  --akzent-hell:var(--messing-hell);
  --auf-akzent:#121110;
  --schleier:18,17,16;          /* RGB der Grundfläche für Verläufe über Bildern */
  --bild-helligkeit:.64;        /* Hero-Bild unter Kreide-Text abdunkeln */

  --display:"Archivo","Arial Narrow",Arial,Helvetica,sans-serif;
  --text:"Newsreader",Georgia,"Times New Roman",serif;

  --rand:clamp(20px,4.5vw,72px);
  --gutter:clamp(16px,1.7vw,24px);
  --breit:1360px;

  --t-hero:clamp(2.625rem,1rem + 5vw,6rem);
  --t-h2:clamp(2rem,1.1rem + 3.2vw,4.5rem);
  --t-h3:clamp(1.375rem,1.15rem + .9vw,1.875rem);
  --t-lead:clamp(1.125rem,1rem + .55vw,1.4375rem);
  --t-text:1.0625rem;
  --t-klein:.9375rem;
  --t-label:clamp(.8125rem,.75rem + .25vw,.9375rem);   /* 13px Handy, 15px Desktop (vorher 11px: Rubriken, Zähler, Formularlabels waren zu klein) */
  --t-zahl:clamp(3.75rem,2rem + 6.5vw,8.75rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --leiste:0px;                 /* Höhe der Entwurfsleiste, setzt nacht.js */
  color-scheme:dark;
}

/* Tag-Basis (helle Fläche) für Praxis, Einzelhandel, Verein, Bäckerei. Es dreht sich nur die Fläche. */
[data-basis="tag"]{
  --nacht:#ece6da;
  --kohle:#e4ddcf;
  --russ:#d9d1c1;
  --linie:rgba(18,17,16,.14);
  --linie-stark:rgba(18,17,16,.3);
  --kreide:#171614;
  --kreide-70:rgba(23,22,20,.74);
  --kreide-40:rgba(23,22,20,.45);
  --asche:#5f5a52;
  --auf-akzent:#f3ede2;
  --schleier:236,230,218;
  --bild-helligkeit:1;
  color-scheme:light;
}

/* Welten: nur der Akzent wechselt. Namen wie app/branchen.py::welt_fuer, Konzeptnamen als Alias. */
[data-welt="handwerk"]{--akzent:#d08a5a;--akzent-hell:#e4a778;--auf-akzent:#121110}
[data-welt="gastronomie"],[data-welt="gastro"]{--akzent:#d99a3e;--akzent-hell:#ebb45f;--auf-akzent:#121110}
[data-welt="praxis"]{--akzent:#4f6b4a;--akzent-hell:#5f7f59;--auf-akzent:#f3ede2}
[data-welt="friseur"]{--akzent:#c9a45c;--akzent-hell:#e6c982;--auf-akzent:#121110}
[data-welt="fitness"]{--akzent:#d97b4a;--akzent-hell:#ee9a6c;--auf-akzent:#121110}
[data-welt="einzelhandel"]{--akzent:#7d5219;--akzent-hell:#92601f;--auf-akzent:#f3ede2}   /* warmes Ocker auf Tag (5,4:1 / 4,3:1 auf #ece6da) */
[data-welt="dienstleister"]{--akzent:#c9a45c;--akzent-hell:#e6c982;--auf-akzent:#121110}   /* Nacht, Messing wie die Studio-Karte (KONZEPT.md 5, Welt 07) */
[data-welt="verein"]{--akzent:#2f6b45;--akzent-hell:#3d8557;--auf-akzent:#f3ede2}
[data-welt="baeckerei"]{--akzent:#a3562b;--akzent-hell:#bf6a3a;--auf-akzent:#f3ede2}
[data-welt="kfz"]{--akzent:#8fb3c9;--akzent-hell:#aacbe0;--auf-akzent:#121110}   /* Nacht, Stahlblau (Hebebühne, Chrom) */
[data-basis="tag"][data-welt="dienstleister"]{--akzent:#8a6a2a;--akzent-hell:#a3803a;--auf-akzent:#f3ede2}   /* Tag-Variante: Bronze statt Messing, lesbar auf Papier */
.ueber__portrait{display:block;width:180px;height:180px;border-radius:50%;object-fit:cover;border:2px solid var(--akzent);margin:0 0 1.5rem}
.unterseite__einstieg{max-width:72ch}
.unterseite__cta{margin-top:3rem}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--nacht);color:var(--kreide);
  font-family:var(--text);font-size:var(--t-text);line-height:1.55;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul,ol,dl,address{margin:0;font-style:normal}
ul,ol{padding:0;list-style:none}
::selection{background:var(--akzent);color:var(--auf-akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:4px}
.sprung{position:absolute;left:-200vw;top:8px;z-index:200;background:var(--akzent);color:var(--auf-akzent);padding:10px 16px;font-family:var(--display);font-weight:600;font-size:.875rem}
.sprung:focus{left:var(--rand)}
.ikon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex:none}
.nur-lesbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nur-mobil{display:none !important}
@media (max-width:899px){.nur-desktop{display:none !important}.nur-mobil{display:inline !important}}
.nur-breit{display:none}
@media (min-width:1600px){.nur-breit{display:inline}}

/* Filmkorn: nur große Bildschirme mit feinem Zeiger, auf dem Handy nie (Leistung, Schmutzeindruck) */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  body::after{
    content:"";position:fixed;inset:-50%;z-index:9000;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:320px 320px;
    opacity:.085;mix-blend-mode:overlay;
    animation:korn 1.2s steps(6) infinite;
  }
}
@keyframes korn{
  0%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-4%)}
  60%{transform:translate(-4%,-1%)}
  80%{transform:translate(3%,3%)}
  100%{transform:translate(0,0)}
}

/* ---------- Typografie ---------- */
.display,h1,h2,h3,.knopf,.label,.nav,.zahl,.marke{font-family:var(--display)}
h1,h2{font-weight:800;font-stretch:88%;letter-spacing:-.035em;line-height:.96;text-wrap:pretty}
@media (max-width:39.99em){h1,.hero__titel{-webkit-hyphens:auto;hyphens:auto}}   /* lange Wörter wie „Kostenvoranschlag“ laufen auf dem Handy sonst aus dem Hero */
h3{font-weight:700;font-stretch:94%;letter-spacing:-.02em;line-height:1.08;font-size:var(--t-h3)}
h1 em,h2 em,.hero__titel em,.zitat em{font-family:var(--text);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.06em;color:var(--akzent-hell)}
.label{
  font-size:var(--t-label);font-weight:600;font-stretch:112%;
  letter-spacing:.18em;text-transform:uppercase;color:var(--asche);line-height:1.2;
}
.label--hell{color:var(--kreide)}
.label--akzent{color:var(--akzent)}
.lead{font-size:var(--t-lead);line-height:1.4;color:var(--kreide-70);text-wrap:pretty;max-width:34em}
.klein{font-size:var(--t-klein);color:var(--asche)}
.zahl{font-weight:800;font-stretch:82%;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.85em;letter-spacing:.02em}
strong,b{font-weight:600}
.absatz{max-width:38em;text-wrap:pretty}
.absatz + .absatz{margin-top:1em}
.h2{font-size:var(--t-h2)}
.h3{font-family:var(--display);font-weight:700;font-stretch:94%;letter-spacing:-.02em;line-height:1.08;font-size:var(--t-h3)}
.textlink{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:.9375rem;letter-spacing:.01em;color:var(--kreide);padding-bottom:4px;position:relative}
.textlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--akzent);transform:scaleX(.35);transform-origin:left;transition:transform .5s var(--ease)}
.textlink:hover::after{transform:scaleX(1)}
.textlink svg{width:14px;height:14px}
.prosa a{color:var(--akzent-hell);border-bottom:1px solid color-mix(in srgb,var(--akzent) 50%,transparent)}

/* Lücke: was der Kunde noch liefern muss. Nie erfinden, immer markieren. */
mark.luecke,.luecke{
  background:transparent;font-family:var(--display);font-weight:500;font-size:max(.85em,.6875rem);letter-spacing:.02em;
  color:var(--akzent-hell);border-bottom:1px dotted var(--akzent);padding:0 .15em;
}
.luecke::before{content:"‹"}.luecke::after{content:"›"}

/* ---------- Raster ---------- */
.bahn{width:min(100% - 2*var(--rand),var(--breit));margin-inline:auto}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.abschnitt{padding-block:clamp(88px,11vw,168px)}
.abschnitt--eng{padding-block:clamp(56px,7vw,112px)}
main.mit-kopfabstand{padding-top:calc(var(--leiste) + clamp(104px,14vw,168px))}
.rubrik{display:flex;align-items:center;gap:20px;margin-bottom:clamp(40px,5vw,72px)}
.rubrik__nr{font-family:var(--display);font-weight:500;font-stretch:110%;font-size:var(--t-label);letter-spacing:.14em;color:var(--akzent);font-variant-numeric:tabular-nums}
.rubrik__name{font-family:var(--display);font-size:var(--t-label);font-weight:600;font-stretch:112%;letter-spacing:.18em;text-transform:uppercase;color:var(--kreide-70)}
.rubrik__linie{flex:1;height:1px;background:var(--linie)}
.rubrik__seite{font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;color:var(--asche);font-variant-numeric:tabular-nums;text-align:right}
.linie{height:1px;background:var(--linie);border:0}
.titelzeile{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.titelzeile > h1,.titelzeile > h2{grid-column:1/9}
.titelzeile > .lead{grid-column:9/13;font-size:var(--t-text);color:var(--asche);max-width:none;padding-bottom:.35em}
@media (max-width:899px){
  .titelzeile > h1,.titelzeile > h2{grid-column:1/-1}
  .titelzeile > .lead{grid-column:1/-1;padding-bottom:0}
  .rubrik__seite{display:none}
}

/* ---------- Knöpfe ---------- */
.knopf{
  --f:var(--kreide);--b:var(--linie-stark);--h:var(--akzent);
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:18px 30px;border-radius:999px;border:1px solid var(--b);
  font-family:var(--display);font-weight:600;font-stretch:100%;font-size:.9375rem;letter-spacing:.01em;line-height:1;
  color:var(--f);background:transparent;cursor:pointer;white-space:nowrap;
  transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
  overflow:hidden;isolation:isolate;text-decoration:none;
}
.knopf::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--h);border-radius:inherit;
  transform:translateY(102%);transition:transform .55s var(--ease);
}
.knopf:hover{color:var(--auf-akzent);border-color:var(--h)}
.knopf:hover::before{transform:translateY(0)}
.knopf--voll{--f:var(--auf-akzent);--b:var(--akzent);background:var(--akzent);--h:var(--akzent-hell)}
.knopf--voll:hover{border-color:var(--akzent-hell)}
.knopf--klein{padding:13px 22px;font-size:.875rem}
.knopf svg{width:16px;height:16px;flex:none;transition:transform .45s var(--ease)}
.knopf:hover svg{transform:translateX(4px)}
.knopf > span{display:inline-flex;align-items:center;gap:14px}
.knopfzeile{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- Kopf ---------- */
.kopf{
  position:fixed;left:0;right:0;top:var(--leiste);z-index:100;
  padding:22px var(--rand);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  transition:padding .5s var(--ease);
}
.kopf::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(18,17,16,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
  opacity:0;transition:opacity .5s var(--ease);
}
[data-basis="tag"] .kopf::before{background:rgba(236,230,218,.82)}
.kopf--fest{padding-block:14px}
.kopf--fest::before{opacity:1}
.kopf__fortschritt{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--akzent);transform-origin:left;transform:scaleX(0);opacity:0;transition:opacity .4s}
.kopf--fest .kopf__fortschritt{opacity:1}
.marke{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-weight:700;font-stretch:118%;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(.875rem,.8rem + .25vw,1rem);line-height:1;   /* 14 bis 16px (vorher 13px) */
  color:var(--kreide);
}
.marke__punkt{width:7px;height:7px;background:var(--akzent);border-radius:50%;flex:none}
/* Studio-Marke: Hauptlogo Nr. 15 (Zeichen MS/Y, C:\Projekte\Marke) als Vektor in Textfarbe plus "STUDIO" gesperrt; Kunden-Entwürfe behalten Punkt + Firmenname */
.marke--studio{gap:12px;letter-spacing:.24em}
.marke__zeichen{height:clamp(26px,1.35rem + .5vw,32px);width:auto;display:block;flex:none;fill:currentColor;color:inherit}
.marke--studio .marke__wort{display:block;line-height:1;padding-top:2px}
.fuss .marke--studio .marke__zeichen{height:34px}
@media (max-width:899px){
  /* schlägt die mobile Regel .kopf .marke{display:block} (weiter unten) durch höhere Spezifität: Zeichen und Wort bleiben nebeneinander */
  .kopf .marke.marke--studio{display:inline-flex;align-items:center;gap:10px;overflow:visible;letter-spacing:.2em;font-size:.875rem}
  .kopf .marke.marke--studio .marke__zeichen{height:24px}
}
.nav{display:flex;gap:clamp(20px,2.6vw,40px);justify-self:center}
.nav a{font-size:clamp(.9375rem,.85rem + .25vw,1rem);font-weight:600;font-stretch:104%;letter-spacing:.04em;color:var(--kreide-70);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--akzent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--kreide)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.kopf__rechts{justify-self:end;display:flex;align-items:center;gap:14px}
.menue-knopf{display:none;background:none;border:1px solid var(--linie-stark);border-radius:999px;padding:11px 16px;font-family:var(--display);font-weight:600;font-size:.875rem;letter-spacing:.06em;cursor:pointer;color:var(--kreide)}
@media (max-width:899px){
  .kopf{grid-template-columns:1fr auto;padding:16px var(--rand);gap:12px}
  .vorschau-seite .kopf{padding-block:8px}   /* unter der Entwurfsleiste: Leiste + Kopf zusammen rund 100 px der Falz */
  .menue-knopf{padding:8px 14px}
  .kopf .marke{display:block;font-size:.875rem;letter-spacing:.1em;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.2}   /* Block statt Flex, damit lange Firmennamen mit … enden */
  .kopf .marke__punkt{display:inline-block;vertical-align:middle;margin-right:10px;position:relative;top:-1px}
  .menue-knopf{flex:none}
  .kopf--fest{padding-block:12px}
  .nav{display:none}
  .kopf__rechts .knopf{display:none}
  .menue-knopf{display:inline-flex}
}
.menue{
  position:fixed;inset:0;z-index:99;background:var(--nacht);color:var(--kreide);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--rand);padding-top:calc(var(--leiste) + 80px);padding-bottom:40px;
  transform:translateY(-100%);transition:transform .7s var(--ease);visibility:hidden;overflow:auto;
}
.menue.offen,.menue:target{transform:translateY(0);visibility:visible}
html.js .menue__zu{display:none}
.menue a.gross{font-family:var(--display);font-weight:800;font-stretch:88%;font-size:clamp(2.25rem,11vw,4.5rem);letter-spacing:-.035em;line-height:1;display:block;padding:10px 0;border-bottom:1px solid var(--linie)}
.menue .menue__fuss{margin-top:32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
@media (min-width:900px){.menue{display:none}}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:end;
  /* Oben so viel Abstand, dass der Textblock unter der Labelzeile (.hero__oben, absolut bei rand+72px) beginnt: auf kurzen
     Fenstern (Laptop 1366x768, 125-%-Skalierung) wächst der Hero über 100vh hinaus, statt dass Titel und Label sich überlagern */
  padding:calc(var(--rand) + 124px + var(--leiste)) var(--rand) clamp(28px,3.4vw,44px);
  isolation:isolate;overflow:hidden;
}
.hero__medien{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--kohle)}
.hero__medien picture,.hero__medien img,.hero__medien video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__medien img{object-position:62% 45%;filter:brightness(var(--bild-helligkeit)) contrast(1.06) saturate(.9);transform-origin:center}
.hero__medien video{opacity:0;transition:opacity 1.2s;object-position:62% 45%;filter:brightness(calc(var(--bild-helligkeit) + .08)) contrast(1.06) saturate(.92)}
.hero__medien video.spielt{opacity:1}
.hero__schleier{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(var(--schleier),.92) 0%,rgba(var(--schleier),.62) 42%,rgba(var(--schleier),.18) 75%,rgba(var(--schleier),.05) 100%),
    linear-gradient(0deg,var(--nacht) 0%,rgba(var(--schleier),.55) 26%,rgba(var(--schleier),0) 60%),
    linear-gradient(180deg,rgba(var(--schleier),.78) 0%,rgba(var(--schleier),.3) 18%,rgba(var(--schleier),0) 38%);
}
.hero__oben{position:absolute;top:calc(var(--rand) + 72px + var(--leiste));left:var(--rand);right:var(--rand);display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.hero__oben .label{display:flex;align-items:center;gap:12px;font-size:clamp(.8125rem,.7rem + .3vw,1rem);color:var(--kreide-70)}   /* Desktop 16px, Handy 13px, heller als Fließtext-Labels: die Zeile muss ohne Hinsehen lesbar sein */
.hero__oben .label::before{content:"";width:28px;height:1px;background:var(--akzent);flex:none}
/* Labels über hellen Bildstellen (Fenster, Praxis, Backstube): weicher Halo in der Grundfarbe; rechtes Label darf umbrechen, nie das linke verdrängen */
.hero__oben .label{text-shadow:0 0 14px rgba(var(--schleier),.95),0 0 4px rgba(var(--schleier),.9)}
.hero__oben > .label:last-child{max-width:56%;min-width:0;text-align:right;justify-content:flex-end;white-space:nowrap}
/* Der Text des rechten Labels steckt in einem span: eine Zeile, Ellipse statt Umbruch (das Template hängt Leistungen nur bis ~40 Zeichen an),
   dazu eine schmale Fläche in der Grundfarbe, weil das Label bei Gastronomie und Bäckerei über dem hellen Fenster steht */
.hero__oben > .label:last-child > span{min-width:0;overflow:hidden;text-overflow:ellipsis;background:rgba(var(--schleier),.45);padding:5px 8px;margin:-5px -8px;border-radius:2px}
.hero__inhalt{width:min(100%,var(--breit));margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(32px,4vw,56px);align-items:end}
.hero__text{grid-column:1/11;display:grid;gap:clamp(22px,2.6vw,36px)}
.hero__titel{font-size:var(--t-hero);max-width:11.2em}
.hero__titel--lang{font-size:clamp(2.25rem,.9rem + 3.6vw,4.5rem);max-width:13.5em}   /* ab sieben Wörtern, sonst vier Zeilen bei 1280 */
.hero__titel .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em;padding-right:.04em;margin-right:-.04em}
.hero__titel .w > span{display:inline-block}
.hero__unten{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap}
.hero__unten .lead{max-width:30em}
.hero__aktionen{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:899px){
  .hero{padding-top:calc(168px + var(--leiste))}   /* Label bei 96px (Entwurf 84px), darf dreizeilig werden */
  .hero__oben{top:calc(96px + var(--leiste))}
  .vorschau-seite .hero__oben{top:calc(84px + var(--leiste))}
  .vorschau-seite .hero__oben > .label:first-child{max-width:calc(100% - 104px)}   /* rechts sitzt mobil der Entwurf-Stempel (rund 90 px gedreht) */
  .hero__oben .label::before{width:20px}
  .hero__oben > :last-child{display:none}
  .hero__text{grid-column:1/-1}
  .hero__titel{font-size:clamp(2.625rem,11.5vw,3.25rem)}
  .hero__titel--lang{font-size:clamp(2.125rem,9.5vw,2.75rem)}
  .hero__medien img,.hero__medien video{object-position:36% 40%}
  .hero__schleier{background:
    linear-gradient(0deg,var(--nacht) 0%,rgba(var(--schleier),.82) 32%,rgba(var(--schleier),.35) 62%,rgba(var(--schleier),.15) 100%),
    linear-gradient(180deg,rgba(var(--schleier),.6) 0%,rgba(var(--schleier),0) 34%)}
}

/* Kennzeile: eine Zeile Fakten unter dem Hero (statt Zahlenkacheln). Lücken erlaubt. */
.kennzeile{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kennzeile .bahn{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter)}
.kennzeile .bahn > div{padding:22px 0;display:grid;gap:6px;align-content:start}
.kennzeile .bahn > div + div{padding-left:24px;border-left:1px solid var(--linie)}
.kennzeile b{font-family:var(--display);font-weight:600;font-stretch:96%;letter-spacing:-.01em;font-size:1.0625rem}
.kennzeile span{color:var(--asche);font-size:var(--t-klein)}
.kennzeile--vier .bahn{grid-template-columns:repeat(4,1fr)}
@media (max-width:899px){
  .kennzeile .bahn,.kennzeile--vier .bahn{grid-template-columns:1fr}
  .kennzeile .bahn > div + div{padding-left:0;border-left:0;border-top:1px solid var(--linie)}
  .kennzeile .bahn > div{padding:16px 0}
}

/* ---------- Ablauf: Nummern klein in Akzent, der Titel trägt den Schritt ---------- */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:56px;border-top:1px solid var(--linie)}
.schritt{padding-top:28px;display:grid;gap:18px;position:relative;align-content:start}
.schritt::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:1px;background:var(--akzent)}
.schritt__nr{font-family:var(--display);font-weight:500;font-stretch:110%;font-size:var(--t-label);letter-spacing:.14em;color:var(--akzent);font-variant-numeric:tabular-nums}
.schritt h3{max-width:12em;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem)}
.schritt p{color:var(--kreide-70);max-width:30em}
.schritt__dauer{display:flex;gap:12px;align-items:center;font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);font-weight:600}
.schritt__dauer::before{content:"";width:20px;height:1px;background:var(--akzent)}
@media (max-width:899px){
  .schritte{grid-template-columns:1fr;row-gap:0;border-top:0}
  .schritt{border-top:1px solid var(--linie);padding-block:32px;gap:14px}
  .schritt::before{width:40px}
}

/* ---------- Haltung (Zwischenbild mit Weltenliste, nur Studio) ---------- */
.haltung{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(120px,16vw,240px);color:#efe9df}
.haltung__bild{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#151413}
.haltung__bild img{width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
.haltung__schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,17,16,.55),rgba(18,17,16,.15) 60%,rgba(18,17,16,.5))}
.haltung .h2{font-size:clamp(2.125rem,1.2rem + 3.6vw,4.75rem);max-width:12em;color:#efe9df}
.haltung .absatz{color:rgba(239,233,223,.78);margin-top:36px;font-size:var(--t-lead);line-height:1.45;max-width:26em}
.haltung .absatz a{color:#e6c982}
.haltung .bahn{display:grid;grid-template-columns:7fr 4fr;column-gap:clamp(40px,6vw,120px);row-gap:56px;align-items:end}
.welten{display:grid;border-top:1px solid rgba(239,233,223,.22)}
.welten li{display:grid;grid-template-columns:2.5rem 1fr auto;gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(239,233,223,.16);font-family:var(--display);font-size:.9375rem;font-weight:600;font-stretch:96%;letter-spacing:-.005em;color:#efe9df}
.welten li .nr{font-size:var(--t-label);font-weight:500;letter-spacing:.14em;color:rgba(239,233,223,.55);font-stretch:110%;font-variant-numeric:tabular-nums}
.welten li .farbe{display:inline-flex;align-items:center;gap:10px;font-family:var(--text);font-weight:400;font-size:var(--t-klein);color:rgba(239,233,223,.72);letter-spacing:0}
.welten li .farbe::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 1px rgba(239,233,223,.25)}
.welten li .farbe.tag::before{background:linear-gradient(135deg,#ece6da 50%,var(--akzent) 50%)}
.haltung .welten-kopf{margin-bottom:16px;color:rgba(239,233,223,.72)}
@media (max-width:899px){.haltung .bahn{grid-template-columns:1fr}}

/* ---------- Beispiele: Galerie mit Mockups (nur Studio) ---------- */
.galerie{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(56px,7vw,112px)}
.karte{display:grid;gap:18px;align-content:start;position:relative}
.karte:nth-child(6n+1){grid-column:1/8}
.karte:nth-child(6n+2){grid-column:8/13;margin-top:9vw}
.karte:nth-child(6n+3){grid-column:1/6;margin-top:-3vw}
.karte:nth-child(6n+4){grid-column:6/13;margin-top:3vw}
.karte:nth-child(6n+5){grid-column:1/8;margin-top:1vw}
.karte:nth-child(6n+6){grid-column:8/13;margin-top:9vw}
.karte__nr{position:absolute;left:-2px;top:-1.15em;font-family:var(--display);font-weight:500;font-stretch:110%;font-size:var(--t-label);letter-spacing:.14em;color:var(--akzent);font-variant-numeric:tabular-nums}
.karte figcaption{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:baseline}
.karte__name{font-family:var(--display);font-weight:600;font-stretch:96%;font-size:1.0625rem;letter-spacing:-.01em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.karte__tag{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);border:1px solid color-mix(in srgb,var(--akzent) 45%,transparent);border-radius:999px;padding:5px 9px;font-stretch:110%}
.karte__meta{grid-column:1;color:var(--asche);font-size:var(--t-klein)}
.karte__link{grid-column:2;grid-row:1/3;align-self:center}
@media (max-width:899px){
  .karte,.karte:nth-child(n){grid-column:1/-1;margin-top:0}
  .karte figcaption{grid-template-columns:1fr}
  .karte__link{grid-column:1;grid-row:auto;justify-self:start}
}

/* Mockup einer Kundenseite: lebendiges HTML in cqw; keine Schrift unter 11 px */
.mock{
  container-type:inline-size;position:relative;width:100%;
  background:var(--m-hg,#121110);color:var(--m-text,#efe9df);
  border:1px solid var(--linie);overflow:hidden;
  display:grid;grid-template-rows:auto auto 1fr auto;
  font-family:var(--display);
  --m-akzent:var(--akzent);--m-akzent-hell:var(--akzent-hell);--m-auf:var(--auf-akzent);
  --m-linie:rgba(239,233,223,.16);
  --m-asche:rgba(239,233,223,.6);
}
.mock--tag{--m-hg:#ece6da;--m-text:#171614;--m-linie:rgba(23,22,20,.16);--m-asche:rgba(23,22,20,.6)}
.mock__leiste{display:flex;justify-content:center;align-items:center;height:5.2cqw;border-bottom:1px solid var(--m-linie);font-size:max(11px,1.55cqw);letter-spacing:.06em;color:var(--m-asche);font-weight:500;position:relative}
.mock__leiste::before,.mock__leiste::after{content:"";position:absolute;top:50%;width:.9cqw;height:.9cqw;border-radius:50%;background:var(--m-linie);transform:translateY(-50%)}
.mock__leiste::before{left:2.4cqw}.mock__leiste::after{left:4.2cqw}
.mock__kopf{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 4cqw;font-size:max(11px,1.7cqw)}
.mock__marke{font-weight:700;font-stretch:118%;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:1.2cqw}
.mock__marke::before{content:"";width:1cqw;height:1cqw;border-radius:50%;background:var(--m-akzent)}
.mock__nav{display:flex;gap:3cqw;font-weight:600;color:var(--m-asche)}
.mock__cta{border:1px solid var(--m-akzent);color:var(--m-akzent);border-radius:99cqw;padding:1.2cqw 2.4cqw;font-weight:600;font-size:max(11px,1.5cqw)}
.mock--tag .mock__cta{color:var(--m-text)}
.mock__held{position:relative;overflow:hidden;margin:0 4cqw;height:44cqw;min-height:150px}   /* Höhe relativ zur Kartenbreite, nie abgeschnitten */
.mock__held img,.mock__held picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--m-pos,center)}
.mock__held img{transform:scale(1.15);transition:transform 1.4s var(--ease);filter:brightness(.82) contrast(1.05)}
.mock--tag .mock__held img{filter:brightness(.92) contrast(1.02)}
.karte:hover .mock__held img{transform:scale(1.21)}
.mock__held::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,17,16,.9) 0%,rgba(18,17,16,.35) 45%,rgba(18,17,16,.05) 100%)}
.mock__text{position:absolute;left:4.5cqw;right:4.5cqw;bottom:4.5cqw;z-index:1;display:grid;gap:1.8cqw;color:#efe9df}
.mock__label{font-size:max(11px,1.35cqw);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#efe9df;opacity:.85}
.mock__titel{font-weight:800;font-stretch:88%;font-size:max(18px,5.4cqw);line-height:.96;letter-spacing:-.035em;max-width:11em;text-wrap:balance}
.mock__titel em{font-family:var(--text);font-style:italic;font-weight:400;font-size:1.06em;color:var(--m-akzent-hell)}
.mock--tag .mock__titel em{color:#efe9df}
.mock__knopf{justify-self:start;background:var(--m-akzent);color:var(--m-auf);border-radius:99cqw;padding:1.7cqw 3.2cqw;font-size:max(11px,1.6cqw);font-weight:600;margin-top:.6cqw}
.mock__band{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;padding:3cqw 4cqw 3.4cqw;font-size:max(11px,1.65cqw);border-top:1px solid var(--m-linie);margin:3cqw 4cqw 0}
.mock__band div{display:grid;gap:.8cqw}
.mock__band b{font-weight:600;font-stretch:96%;font-size:max(12px,1.9cqw);letter-spacing:-.01em}
.mock__band span{color:var(--m-asche);font-family:var(--text);font-size:max(11px,1.8cqw);line-height:1.35}
.mock__band i{font-style:normal;color:var(--m-akzent);font-size:max(11px,1.3cqw);letter-spacing:.12em;font-weight:500}
@container (max-width:520px){
  .mock__leiste{height:8cqw;font-size:max(11px,2.6cqw)}
  .mock__leiste::before,.mock__leiste::after{width:1.4cqw;height:1.4cqw}
  .mock__leiste::before{left:3.5cqw}.mock__leiste::after{left:6.2cqw}
  .mock__kopf{font-size:max(11px,2.7cqw);padding:3.6cqw 4.5cqw}
  .mock__marke::before{width:1.6cqw;height:1.6cqw}
  .mock__nav{display:none}
  .mock__cta{font-size:max(11px,2.5cqw);padding:1.8cqw 3.4cqw}
  .mock__label{font-size:max(11px,2.3cqw)}
  .mock__titel{font-size:max(20px,8.2cqw)}
  .mock__knopf{font-size:max(11px,2.7cqw);padding:2.6cqw 4.8cqw}
  .mock__band{grid-template-columns:1fr 1fr;gap:4cqw;font-size:max(11px,2.6cqw);padding:4cqw 4.5cqw 5cqw;margin-top:4cqw}
  .mock__band div:nth-child(3){display:none}
  .mock__band b{font-size:max(12px,3.1cqw)}.mock__band span{font-size:max(11px,2.9cqw)}.mock__band i{font-size:max(11px,2.2cqw)}
  .mock__text{gap:2.6cqw;left:5cqw;right:5cqw;bottom:5cqw}
  .mock__held{height:56cqw;min-height:190px}
}
@media (max-width:899px){.mock__held{height:62cqw}}

/* ---------- Preise: drei Spalten, Haarlinien, kein Etikett (nur Studio) ---------- */
.preise{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.paket{padding:clamp(32px,3.5vw,52px) clamp(24px,2.6vw,40px) clamp(40px,4vw,56px) 0;display:grid;gap:26px;align-content:start;position:relative}
.paket + .paket{padding-left:clamp(24px,2.6vw,40px);border-left:1px solid var(--linie)}
.paket--empf::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--akzent)}
.paket__kopf{display:grid;gap:10px}
.paket__kopf .label{display:flex;gap:12px;align-items:center}
.paket__kopf .label i{font-style:normal;color:var(--akzent)}
.paket__fuer{color:var(--asche);max-width:24em;min-height:3.2em}
.paket__preis{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.paket__preis .zahl{font-size:var(--t-zahl)}
.paket__preis .zahl small{font-size:.42em;font-weight:600;font-stretch:96%;letter-spacing:-.01em;color:var(--akzent);margin-left:.06em}
.paket__einheit{font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-weight:600;width:100%}
.paket ul{display:grid;border-top:1px solid var(--linie)}
.paket li{padding:13px 0 13px 22px;border-bottom:1px solid var(--linie);position:relative;font-size:var(--t-klein);color:var(--kreide-70)}
.paket li::before{content:"";position:absolute;left:0;top:calc(13px + .55em);width:6px;height:6px;border-radius:50%;background:var(--akzent)}
.paket li.leer{color:var(--asche)}
.paket li.leer::before{background:transparent;border:1px solid var(--linie-stark)}
.paket .knopf{justify-self:start;margin-top:6px}
.preise__hinweis{margin-top:28px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--asche);font-size:var(--t-klein)}
.preise__hinweis span{max-width:44em}
@media (max-width:899px){
  .preise{grid-template-columns:1fr}
  .paket{padding:36px 0 44px}
  .paket + .paket{padding-left:0;border-left:0;border-top:1px solid var(--linie)}
  .paket--empf::before{top:-1px}
  .paket__fuer{min-height:0}
}

/* ---------- Formular und Abschnitt mit Bild (Generator, Kontakt) ---------- */
.generator{position:relative;isolation:isolate;overflow:hidden}
.generator__bild{position:absolute;inset:0;z-index:-2;background:var(--kohle)}
.generator__bild img{width:100%;height:100%;object-fit:cover;filter:brightness(calc(var(--bild-helligkeit) + .16))}
.generator__schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--nacht) 0%,rgba(var(--schleier),.35) 30%,rgba(var(--schleier),.55) 100%)}
.generator .raster{row-gap:48px;align-items:start}
.generator__text{grid-column:1/6;display:grid;gap:28px;align-content:start}
.generator__text .h2{font-size:clamp(2.25rem,1.2rem + 3.6vw,4.75rem)}
.generator__text .absatz{color:var(--kreide-70);font-size:var(--t-lead);line-height:1.42}
.formular{grid-column:7/13;display:grid;gap:8px;padding:clamp(28px,3vw,44px);border:1px solid var(--linie-stark);background:rgba(var(--schleier),.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.formular__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:22px}
.feld{display:grid;gap:10px;padding:18px 0 6px;border-bottom:1px solid var(--linie-stark);position:relative}
.feld::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.feld:focus-within::after{transform:scaleX(1)}
.feld label,.feld legend{display:flex;justify-content:space-between;gap:12px;padding:0}
.feld label span.opt,.feld .opt{color:var(--asche);text-transform:none;letter-spacing:.02em;font-family:var(--text);font-size:var(--t-klein);font-weight:400}
.feld input,.feld select,.feld textarea{
  width:100%;background:transparent;border:0;padding:6px 0 12px;
  font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.01em;color:var(--kreide);
  -webkit-appearance:none;appearance:none;border-radius:0;
}
.feld textarea{font-family:var(--text);font-size:1.0625rem;resize:vertical;min-height:120px}
.feld input::placeholder,.feld textarea::placeholder{color:var(--kreide-40)}
.feld select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23c9a45c' stroke-width='1.5'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px top 12px;padding-right:28px}
.feld select option{background:var(--kohle);color:var(--kreide)}
.feld select:invalid{color:var(--kreide-40)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none}
.feld--fehler{border-bottom-color:#d9694f}
.feld__fehler{font-family:var(--display);font-size:var(--t-klein);color:#e8927b}
.feld small,.feld .hinweis{font-size:var(--t-klein);color:var(--asche)}
.kaestchen{display:flex;gap:14px;align-items:flex-start;font-size:var(--t-klein);color:var(--kreide-70);padding:10px 0}
.kaestchen input{width:18px;height:18px;margin:.2em 0 0;accent-color:var(--akzent);flex:none}
.formular__zeile{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.formular__zeile > .feld{align-self:start}   /* Eingabe direkt unter dem Label, auch wenn das Nachbarfeld einen Hinweis trägt */
.formular__fuss{display:grid;gap:18px;margin-top:28px}
.formular__fuss .klein{max-width:34em}
.formular output{display:block;font-size:var(--t-klein);color:var(--akzent-hell);min-height:1.4em}
.meldung{border:1px solid var(--linie-stark);border-left:3px solid var(--akzent);padding:18px 22px;display:grid;gap:8px;margin-bottom:24px;color:var(--kreide-70)}
.meldung--fehler{border-left-color:#d9694f}
.meldung__titel{font-family:var(--display);font-weight:600;color:var(--kreide)}
@media (max-width:899px){
  .generator__text,.formular{grid-column:1/-1}
  .formular__zeile{grid-template-columns:1fr}
  .formular{padding:24px 20px}
  .formular__kopf > .label:last-child{display:none}
}

/* ---------- Fragen ---------- */
.fragen{border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:3.5rem 1fr auto;gap:20px;align-items:baseline;
  padding:26px 0;font-family:var(--display);font-weight:600;font-stretch:94%;font-size:clamp(1.125rem,1rem + .7vw,1.5rem);letter-spacing:-.015em;
  transition:color .3s;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--akzent-hell)}
.frage summary .nr{font-size:var(--t-label);font-weight:500;letter-spacing:.14em;color:var(--akzent);font-stretch:110%;font-variant-numeric:tabular-nums}
.frage summary .plus{width:34px;height:34px;border:1px solid var(--linie-stark);border-radius:50%;position:relative;align-self:center;transition:transform .5s var(--ease),border-color .3s}
.frage summary .plus::before,.frage summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.frage summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.frage[open] summary .plus{transform:rotate(45deg);border-color:var(--akzent)}
.frage__inhalt{padding:0 0 30px 3.5rem;color:var(--kreide-70);display:grid;gap:12px}
.frage__inhalt p{max-width:36em}
@media (max-width:899px){
  .frage summary{grid-template-columns:2.25rem 1fr auto;gap:14px;padding:22px 0}
  .frage__inhalt{padding-left:calc(2.25rem + 14px)}
}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--linie);padding:clamp(56px,7vw,104px) 0 32px;position:relative;overflow:hidden}
.fuss__oben{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px}
.fuss__claim{grid-column:1/6;display:grid;gap:22px;align-content:start}
.fuss__claim p{color:var(--asche);max-width:24em}
.fuss__spalte{display:grid;gap:0 16px;align-content:start;font-size:var(--t-klein)}
.fuss__spalte .label{margin-bottom:6px}
.fuss__spalte a{color:var(--kreide-70);transition:color .3s}
.fuss__spalte > a:not(.knopf){display:block;padding:8px 0}   /* Klickfläche rund 40 px, statt 23 px Text mit 14 px Abstand */
.fuss__spalte > .knopf{justify-self:start;margin-top:10px}
.fuss__spalte > .klein{padding-top:8px}
.fuss__spalte a:hover{color:var(--kreide)}
.fuss__oben > .fuss__spalte:nth-child(2){grid-column:7/9}
.fuss__oben > .fuss__spalte:nth-child(3){grid-column:9/11}
.fuss__oben > .fuss__spalte:nth-child(4){grid-column:11/13}
.fuss__wort{margin-top:clamp(56px,8vw,120px);font-family:var(--display);font-weight:800;font-stretch:76%;font-size:clamp(4.5rem,17vw,17rem);line-height:.78;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--linie-stark);white-space:nowrap;user-select:none;overflow:hidden}
/* Studio-Fuß: statt des Konturworts das Logo (Zeichen + STUDIO) als Kontur über die ganze Breite, Strich 1 px wie vorher */
.fuss__wort--marke{font-size:0;line-height:0;-webkit-text-stroke:0;color:var(--linie-stark);overflow:visible;padding:2px 0}
.fuss__wort--marke svg{display:block;width:100%;height:auto;overflow:visible}
.fuss__unten{margin-top:32px;padding-top:24px;border-top:1px solid var(--linie);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8125rem;color:var(--asche);font-family:var(--display);letter-spacing:.02em}
.fuss__unten span{max-width:44em}
@media (max-width:899px){
  .fuss__claim,.fuss__oben > .fuss__spalte:nth-child(n){grid-column:1/-1}
  .fuss__oben{row-gap:32px}
  .fuss__spalte{grid-template-columns:1fr 1fr}
  .fuss__spalte .label{grid-column:1/-1}
}

/* ---------- Bilder, Reveal, Vorhang ---------- */
.bild{position:relative;overflow:hidden;background:var(--kohle)}
.bild img{width:100%;height:100%;object-fit:cover}
html.gsap [data-reveal]{opacity:0}
html.gsap .hero__titel .w > span{transform:translateY(110%)}
html.gsap [data-vorhang]{clip-path:inset(0 0 100% 0)}

/* ---------- Kundenseite: Bausteine ---------- */
.k-hero{min-height:88vh;min-height:88svh}
.k-hero .hero__titel{max-width:10.5em}
.leistungen{display:grid;border-top:1px solid var(--linie)}
.leistung{display:grid;grid-template-columns:4rem 1fr 1.2fr auto;gap:24px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--linie);position:relative;transition:padding .5s var(--ease)}
.leistung:hover{padding-left:12px}
.leistung::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--akzent);transition:width .6s var(--ease)}
.leistung:hover::before{width:100%}
.leistung .nr{font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;color:var(--akzent);font-weight:500;font-variant-numeric:tabular-nums}
.leistung h3{font-size:clamp(1.375rem,1.1rem + 1.2vw,2.125rem)}
.leistung p{color:var(--kreide-70);max-width:30em}
.leistung .etikett{display:inline-block;margin-top:8px;font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-weight:600}
.leistung .pfeil{width:34px;height:34px;border:1px solid var(--linie-stark);border-radius:50%;display:grid;place-items:center;align-self:center;transition:background .4s,border-color .4s,color .4s}
.leistung .pfeil svg{width:14px;height:14px}
.leistung:hover .pfeil{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
@media (max-width:899px){
  .leistung{grid-template-columns:2.25rem 1fr auto;grid-template-areas:"nr h3 pfeil" "nr p pfeil";row-gap:10px;padding:22px 0;column-gap:14px}
  .leistung .nr{grid-area:nr;padding-top:.5em}
  .leistung h3{grid-area:h3}
  .leistung p{grid-area:p}
  .leistung .pfeil{grid-area:pfeil}
  .leistung:hover{padding-left:0}
}
.ueber{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px;align-items:center}
.ueber__bild{grid-column:1/7;aspect-ratio:4/5;position:relative}
.ueber__bild .zitat{position:absolute;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);font-family:var(--display);font-weight:800;font-stretch:88%;letter-spacing:-.03em;line-height:1;font-size:clamp(1.75rem,1.2rem + 2.2vw,3.25rem);color:#efe9df;text-wrap:balance}
.ueber__bild .zitat em{font-family:var(--text);font-style:italic;font-weight:400;color:var(--akzent-hell);font-size:1.06em}
.ueber__text{grid-column:8/13;display:grid;gap:28px;align-content:center}
.ueber__text .h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.75rem)}
.ueber__text .absatz{color:var(--kreide-70)}
.ueber__fakten{display:grid;gap:0;border-top:1px solid var(--linie)}
.ueber__fakten div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--linie);font-size:var(--t-klein)}
.ueber__fakten div span:first-child{color:var(--asche);flex:none}
.ueber__fakten div span:last-child{text-align:right}
.ueber__punkte{display:grid;gap:8px;color:var(--kreide-70);font-size:var(--t-klein)}
.ueber__punkte li{position:relative;padding-left:18px}
.ueber__punkte li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--akzent)}
@media (max-width:899px){.ueber__bild,.ueber__text{grid-column:1/-1}.ueber__bild{aspect-ratio:4/4.4}}
.kontakt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px;align-items:start}
.kontakt__text{grid-column:1/6;display:grid;gap:28px}
.kontakt__text .h2{font-size:clamp(2rem,1.2rem + 2.8vw,4rem)}
.kontakt__daten{display:grid;gap:0;border-top:1px solid var(--linie)}
.kontakt__daten div{display:grid;grid-template-columns:7rem 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--linie);font-size:var(--t-klein)}
.kontakt__daten div span:first-child{color:var(--asche);font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding-top:.3em}
.kontakt .formular{grid-column:7/13}
@media (max-width:899px){.kontakt__text,.kontakt .formular{grid-column:1/-1}.kontakt__daten div{grid-template-columns:5.5rem 1fr}}
/* Zeiten und Termine (Kundenseite): bis zu zwei Listen nebeneinander, Zeilen wie .ueber__fakten. Lücken erlaubt. */
.zeiten{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:48px;align-items:start}
.zeiten__liste{grid-column:span 6;display:grid;gap:18px;align-content:start}
.zeiten__liste .ueber__fakten div span:last-child{color:var(--kreide)}
.zeiten__liste .ueber__fakten div span:first-child{max-width:55%}
.zeiten__liste > .klein{max-width:34em}
.ueber__fakten div.geschlossen span:last-child{color:var(--asche)}   /* Ruhetag, geschlossen (vorschau_generisch.html) */
@media (max-width:899px){.zeiten__liste{grid-column:1/-1}}

/* ---------- Entwurfsrahmen (gehört dem Studio, nicht der Kundenseite) ---------- */
/* Der Rahmen bleibt in Studio-Farben, egal welche Welt oder Basis die Kundenseite trägt. */
.entwurf-rahmen{
  --nacht:#0f0e0d;--kohle:#171615;--kreide:#efe9df;--kreide-70:rgba(239,233,223,.72);--kreide-40:rgba(239,233,223,.42);
  --asche:#a69f93;--linie:rgba(239,233,223,.14);--linie-stark:rgba(239,233,223,.3);
  --akzent:#c9a45c;--akzent-hell:#e6c982;--auf-akzent:#121110;--schleier:15,14,13;
  background:var(--nacht);color:var(--kreide);color-scheme:dark;
}
.entwurf-leiste{
  position:sticky;top:0;z-index:120;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px var(--rand);border-bottom:1px solid var(--linie);
  font-family:var(--display);font-size:.8125rem;
}
.entwurf-leiste .links{display:flex;gap:14px;align-items:center;flex:1 1 auto;min-width:0}
.entwurf-leiste .links > *{white-space:nowrap}
.entwurf-leiste .links b{flex:0 0 auto;max-width:30ch;overflow:hidden;text-overflow:ellipsis;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-stretch:112%;font-size:.6875rem}
.entwurf-leiste .stempel{border:1px solid var(--akzent);color:var(--akzent);padding:4px 8px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-radius:2px;flex:none}
.entwurf-leiste .meta{color:var(--asche);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.entwurf-leiste .status{color:var(--kreide-70)}
.entwurf-leiste .rechts{display:flex;gap:10px;align-items:center;flex:none}
.entwurf-leiste .preis{color:var(--asche);margin-right:8px;font-variant-numeric:tabular-nums;text-decoration:none}
.entwurf-leiste .preis:hover{color:var(--kreide)}
.entwurf-leiste .knopf{padding:10px 16px;font-size:.75rem}
@media (max-width:899px){
  .entwurf-leiste{padding:6px var(--rand);gap:10px}
  .entwurf-leiste .rechts .preis,.entwurf-leiste .rechts .knopf:not(.knopf--voll),.entwurf-leiste .links .meta,.entwurf-leiste .links b{display:none}
  .entwurf-leiste .knopf{padding:13px 14px}   /* Klickfläche 40 px hoch (12 px Schrift, Zeile 1, Rand 1 px) */
  .entwurf-leiste .links{gap:10px}
  .entwurf-leiste .links .nur-mobil{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* nie unter den Bestellknopf rutschen */
}
/* Stempel im Hero: klein, unten rechts, leicht gedreht */
.entwurf-stempel{
  position:absolute;right:var(--rand);bottom:clamp(28px,3.4vw,44px);z-index:2;pointer-events:none;
  display:grid;gap:2px;text-align:center;padding:8px 12px;transform:rotate(-4deg);
  border:1.5px solid var(--akzent);border-radius:3px;color:var(--akzent);background:rgba(var(--schleier),.35);
  font-family:var(--display);font-weight:700;font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;line-height:1.1;
}
.entwurf-stempel small{display:block;font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:none;color:var(--kreide-70)}
/* Mobil passen beide Hero-Knöpfe oft in eine Zeile; dort darf der Stempel nicht liegen. Er sitzt stattdessen oben rechts
   auf Höhe der Überzeile (das rechte Label ist mobil ausgeblendet), ohne Unterzeile. */
@media (max-width:899px){
  .entwurf-stempel{font-size:.6875rem;padding:7px 10px;bottom:auto;top:calc(var(--leiste) + 78px);right:var(--rand)}
  .entwurf-stempel small{display:none}
}
/* Band und Erklärung unter der Kundenseite */
.entwurf-fuss{border-top:1px solid var(--linie);padding-block:clamp(56px,7vw,104px)}
.entwurf-band .bahn{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;align-items:center}
.entwurf-band__text{grid-column:1/8;display:grid;gap:16px}
.entwurf-band__text .h3{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);max-width:18em}
.entwurf-band__text .klein{max-width:46em}
.entwurf-band__aktionen{grid-column:8/13;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.entwurf-fuss .erklaerung{margin-top:clamp(40px,5vw,72px)}
@media (max-width:899px){
  .entwurf-band__text,.entwurf-band__aktionen{grid-column:1/-1}
  .entwurf-band__aktionen{justify-content:flex-start}
}
.erklaerung{border:1px solid var(--linie-stark);padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 32px;align-items:start;background:rgba(0,0,0,.12)}
[data-basis="tag"] .erklaerung{background:rgba(255,255,255,.25)}
.erklaerung .label{padding-top:.4em}
.erklaerung p{color:var(--kreide-70);max-width:44em}
.erklaerung p + p{margin-top:.8em}
.erklaerung ul{display:grid;gap:8px;margin-top:12px;color:var(--kreide-70);font-size:var(--t-klein)}
.erklaerung li{position:relative;padding-left:18px}   /* Punkt absolut, nicht flex: Links im Text bleiben Fließtext */
.erklaerung li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--akzent)}
.erklaerung a{color:var(--akzent-hell)}
@media (max-width:899px){.erklaerung{grid-template-columns:minmax(0,1fr)}}

/* ---------- Prosa (Rechtstexte, Inhaltsseiten) ---------- */
.prosa{max-width:44em;color:var(--kreide-70)}
.prosa h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);color:var(--kreide);margin:2.2em 0 .6em}
.prosa h3{font-size:var(--t-h3);color:var(--kreide);margin:1.8em 0 .5em}
.prosa p,.prosa ul,.prosa ol{margin:0 0 1em}
.prosa ul{list-style:disc;padding-left:1.2em}
.prosa ol{list-style:decimal;padding-left:1.2em}
.prosa table{border-collapse:collapse;width:100%;font-size:var(--t-klein);margin:0 0 1.5em}
.prosa th,.prosa td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.prosa th{font-family:var(--display);font-weight:600;color:var(--kreide)}

/* ---------- Nuancen je Branche (DESIGN.md 8.2): je Welt höchstens zwei Entscheidungen, alles als Klasse, nichts inline ---------- */
/* Praxis: Titel ruhiger (700 / 94 %), sonst dieselbe Skala */
.hero__titel--ruhig{font-weight:700;font-stretch:94%;letter-spacing:-.025em;line-height:1}
/* Gastronomie: Titel wie ein Kartenblatt in der Serife; die Gegenstimme bleibt kursiv in Akzent-hell */
.hero__titel--serif{font-family:var(--text);font-weight:500;font-stretch:100%;letter-spacing:-.02em;line-height:1.02;font-optical-sizing:auto;max-width:12em}
.hero__titel--serif em{font-size:1em;font-weight:400}
/* Zwei Spalten im Schritte-Raster (Praxis: Mitbringen und Kosten; Gastro: Feiern und Anfahrt; Friseur: Für wen und Wann) */
.schritte--zwei{grid-template-columns:repeat(2,1fr)}
.schritte + .schritte{margin-top:clamp(40px,5vw,72px)}
.schritt .ueber__punkte{margin-top:2px}
@media (max-width:899px){.schritte--zwei{grid-template-columns:1fr}.schritte + .schritte{margin-top:0}}
/* Friseur: Leistungszeile mit Preisspalte. Preise trägt der Betrieb ein (Lücke), nie Beispielpreise. */
.leistungen + .klein{margin-top:28px;max-width:44em}
.leistungen--preise .leistung{grid-template-columns:4rem 1fr 1.2fr 9rem auto}
.leistung .preis{font-family:var(--display);font-weight:600;font-stretch:96%;font-size:var(--t-klein);text-align:right;font-variant-numeric:tabular-nums;color:var(--kreide-70);white-space:nowrap}
@media (max-width:899px){
  .leistungen--preise .leistung{grid-template-columns:2.25rem 1fr auto;grid-template-areas:"nr h3 pfeil" "nr p pfeil" "nr preis pfeil"}
  .leistung .preis{grid-area:preis;text-align:left}
}
/* Über-uns-Bild auf hellem Foto (Tag-Basis): heller Schleier von unten, Zitat in Kreide der Tag-Basis */
.ueber__bild--hell::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(236,230,218,.92) 0%,rgba(236,230,218,.6) 30%,rgba(236,230,218,0) 62%)}
.ueber__bild--hell .zitat{z-index:1;color:#171614}
.ueber__bild--hell .zitat em{color:var(--akzent)}
/* Tag-Basis, Hero: hellere Fotos brauchen mehr Schleier, damit Titel und Lead auf jedem Ausschnitt lesbar bleiben (DESIGN.md 3.2) */
/* Stapelung: .hero__medien ist ein eigener Stapelkontext (position + z-index), darin liegt der Schleier mit z-index -1 HINTER dem Bild
   und wirkt nicht (so auch im Konzept; Nacht-Seiten leben von brightness(.64) und behalten die freigegebene Optik). Auf Tag-Basis
   muss der Schleier über dem Bild liegen, sonst steht dunkler Text auf ungefiltertem Foto. */
[data-basis="tag"] .hero__medien .hero__schleier{z-index:1;background:
  linear-gradient(90deg,rgba(var(--schleier),.8) 0%,rgba(var(--schleier),.55) 30%,rgba(var(--schleier),.12) 52%,rgba(var(--schleier),0) 64%),
  linear-gradient(0deg,var(--nacht) 0%,rgba(var(--schleier),.3) 12%,rgba(var(--schleier),0) 28%),
  linear-gradient(180deg,rgba(var(--schleier),.3) 0%,rgba(var(--schleier),0) 16%)}
/* Tag-Basis: dunkle Schrift auf sichtbarem Foto braucht einen hellen Schein statt eines dicken Schleiers (Partner, 26.09.) */
[data-basis="tag"] .hero__text{text-shadow:0 1px 2px rgba(var(--schleier),.5)}
/* Tag: kein Kasten hinter dem rechten Label (auf Papierfarbe wirkt er wie ein grauer Fleck im Foto); beide Labels dunkler, damit sie
   auf dem hellen Bild lesbar bleiben, der Halo in Papierfarbe bleibt */
[data-basis="tag"] .hero__oben .label{color:var(--kreide);text-shadow:0 0 8px rgba(var(--schleier),.85),0 0 2px rgba(var(--schleier),.9)}
/* Rechtes Label auf Tag: keine Fläche dahinter (Partner: Kasten sieht nach Markierung aus). Helle Schrift mit dunklem, engem
   Schatten wie eine Bildunterschrift, lesbar auf dunklem Regal wie auf heller Wand */
[data-basis="tag"] .hero__oben > .label:last-child:not(:first-child){color:#f6f1e6;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.55)}   /* nur das zweite Label; einzelne Labels (Einzelhandel) bleiben dunkel */
[data-basis="tag"] .hero__oben > .label:last-child > span{background:none;padding:0;margin:0;border-radius:0}
/* Mobil: statt Schein ein heller Streifen nur hinter dem Textblock; das Foto bleibt oben und unten sichtbar, nichts wird weichgezeichnet (laggt auf Android) */
@media (max-width:899px){
  [data-basis="tag"] .hero__text{text-shadow:none;margin-left:calc(-1 * var(--gutter,16px));margin-right:calc(-1 * var(--gutter,16px));padding:20px var(--gutter,16px) 18px;
    background:linear-gradient(180deg,rgba(var(--schleier),0) 0%,rgba(var(--schleier),.8) 9%,rgba(var(--schleier),.84) 91%,rgba(var(--schleier),0) 100%)}
  /* Überzeile oben über dem Foto: heller Streifen, sonst steht dunkle Schrift auf dunklem Fotorand */
  [data-basis="tag"] .hero__oben{left:0;right:0;padding:10px var(--rand) 8px;background:linear-gradient(180deg,rgba(var(--schleier),0) 0%,rgba(var(--schleier),.78) 18%,rgba(var(--schleier),.8) 82%,rgba(var(--schleier),0) 100%)}
  /* Tag-Basis mobil: Foto und Text getrennt statt übereinander. Das Foto steht oben ganz frei (Ausschnitt unten, wo die Dinge liegen),
     der Text folgt darunter auf Papier. Nichts liegt über Tasse, Brille und Buch (Partner, 26.09.). */
  [data-basis="tag"] .hero{display:block;min-height:0;padding:0 0 clamp(24px,3vw,40px)}
  [data-basis="tag"] .hero__medien{position:relative;inset:auto;z-index:0;height:min(62vh,560px)}
  [data-basis="tag"] .hero__medien img,[data-basis="tag"] .hero__medien video{object-position:60% 72% !important}
  [data-basis="tag"] .hero__medien .hero__schleier{background:linear-gradient(180deg,rgba(var(--schleier),.5) 0%,rgba(var(--schleier),0) 22%,rgba(var(--schleier),0) 84%,var(--nacht) 100%)}
  [data-basis="tag"] .hero__inhalt{position:relative;padding:18px var(--rand) 0;row-gap:24px}
  [data-basis="tag"] .hero__text{background:none;margin:0;padding:0;text-shadow:none}
}
@media (max-width:899px){
  [data-basis="tag"] .hero__medien .hero__schleier{background:
    linear-gradient(0deg,var(--nacht) 0%,rgba(var(--schleier),.55) 22%,rgba(var(--schleier),.18) 48%,rgba(var(--schleier),0) 100%),
    linear-gradient(180deg,rgba(var(--schleier),.3) 0%,rgba(var(--schleier),0) 20%)}
}
.leistung p .etikett{margin-left:.6em}
/* Tag-Basis, Kontakt mit Bild: hellerer Schleier über dem Foto, damit Labels und Lücken lesbar bleiben */
[data-basis="tag"] .generator__schleier{background:linear-gradient(180deg,var(--nacht) 0%,rgba(var(--schleier),.72) 30%,rgba(var(--schleier),.8) 100%)}
/* Die Erklärung liegt immer im Studio-Rahmen (dunkel), auch unter einer Tag-Kundenseite */
.entwurf-rahmen .erklaerung{background:rgba(0,0,0,.12)}
/* Tag-Basis: Akzent im Text dunkel genug (Lücken, Gegenstimme im Titel; Zitat auf dunklem Bild bleibt hell) */
[data-basis="tag"] mark.luecke,[data-basis="tag"] .luecke{color:var(--akzent)}
[data-basis="tag"] h1 em,[data-basis="tag"] h2 em,[data-basis="tag"] .hero__titel em{color:var(--akzent)}
[data-basis="tag"] .formular output{color:var(--akzent)}

/* ---------- Studio-Unterseiten (DESIGN.md 5.14): Seitenkopf, Textraster, Hinweise, Zeitleiste, Tabellen, Formularseiten, Admin ---------- */
/* Studio auf Tag-Basis (Rechtstexte): Messing ist für helle Flächen zu hell, deshalb Messing-tief als Akzent. Welten setzen ihren eigenen. */
[data-basis="tag"]:not([data-welt]){--akzent:#8a6a30;--akzent-hell:#7a5c28;--auf-akzent:#f3ede2}
.abschnitt--erst{padding-top:0}                                   /* erste Sektion unter main.mit-kopfabstand */
.abschnitt__nach{margin-top:clamp(40px,5vw,64px)}                 /* Nachsatz unter einer Liste (Textlink, Hinweis) */
.generator--seite{padding-top:calc(var(--leiste) + clamp(150px,17vw,230px))}   /* Generator als Seite: Bild bis unter den Kopf */
.titelzeile .label{display:block;margin-bottom:18px}
.text-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:48px;align-items:start}
.text-raster > .prosa{grid-column:1/8}
.text-raster > aside{grid-column:9/13;display:grid;gap:28px;align-content:start}
.text-raster > aside .knopfzeile{margin-top:8px}
.text-raster > aside > div{display:grid;gap:14px;align-content:start}
.stapel{display:grid;gap:14px;align-content:start}
.stapel > *{margin:0}
.prosa,.hinweise dd,.meldung p,.ueber__fakten,.kontakt__daten,.erklaerung{overflow-wrap:anywhere}
.prosa h1{font-size:var(--t-h2);color:var(--kreide);margin:0 0 .5em}
.prosa .stand{font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-weight:600;margin:0 0 2.5em}
.prosa h2:first-child,.prosa .stand + h2{margin-top:0}
.prosa strong{color:var(--kreide)}
.prosa a.knopf{color:var(--f);border-bottom:0}
.prosa a.knopf:hover{color:var(--auf-akzent)}
.prosa .erklaerung{margin:1.5em 0 2.5em}
.prosa .erklaerung p{max-width:none}
.prosa .erklaerung h3{margin:0 0 .3em}
.hinweise{display:grid;border-top:1px solid var(--linie)}
.hinweise > div{padding:16px 0;border-bottom:1px solid var(--linie);display:grid;gap:6px}
.hinweise dt{font-family:var(--display);font-weight:600;font-stretch:96%;letter-spacing:-.01em;font-size:1.0625rem;color:var(--kreide);display:flex;gap:12px;align-items:baseline}
.hinweise dt .nr{font-size:var(--t-label);font-weight:500;letter-spacing:.14em;color:var(--akzent);font-stretch:110%;font-variant-numeric:tabular-nums;flex:none}
.hinweise dd{margin:0;color:var(--kreide-70);font-size:var(--t-klein);max-width:40em}
.hinweise a,.meldung a,.ueber__fakten a,.kennzeile a{color:var(--akzent-hell)}
.ueber__fakten div span:first-child{font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding-top:.3em}
.ueber__fakten div span:last-child{color:var(--kreide)}
.ueber__fakten div b{font-weight:600}
.ueber__fakten address{font-style:normal}
.zeitleiste{display:grid;border-top:1px solid var(--linie)}
.zeitleiste > div{display:grid;grid-template-columns:4rem 1.1fr 1.5fr 1.1fr;column-gap:24px;padding:24px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.zeitleiste .nr{font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;color:var(--akzent);font-weight:500;font-variant-numeric:tabular-nums}
.zeitleiste h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem)}
.zeitleiste p{color:var(--kreide-70);font-size:var(--t-klein);max-width:28em}
.zeitleiste p b{display:block;font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-weight:600;margin-bottom:6px}
.klartext{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:24px;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--linie)}
.klartext > div{padding-top:22px;display:grid;gap:8px;align-content:start;position:relative}
.klartext > div::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:1px;background:var(--akzent)}
.klartext b{font-family:var(--display);font-weight:600;font-stretch:96%;letter-spacing:-.01em;font-size:1.0625rem}
.klartext span{color:var(--asche);font-size:var(--t-klein);max-width:26em}
.welten li a{color:inherit}
.welten li a:hover{color:var(--akzent-hell)}
.meldung--ok{border-left-color:var(--akzent)}
.meldung p{max-width:48em}
.formular fieldset{border:0;margin:0;padding:0;min-width:0}
.formular fieldset.feld{padding-top:18px}
.feld > legend{margin-bottom:8px}
.feld .kaestchen{justify-content:flex-start;align-items:flex-start;padding:8px 0}
.feld .kaestchen input{-webkit-appearance:auto;appearance:auto;width:18px;height:18px;padding:0;border:0;background:transparent;margin:.2em 0 0}
.feld .kaestchen span{text-transform:none;letter-spacing:0}
.kaestchen-stapel{display:grid;gap:2px}
.kaestchen a{color:var(--akzent-hell)}
.feld--block{border-bottom:0;padding:0}
.kasten{border:1px solid var(--linie-stark);padding:clamp(20px,2.6vw,32px);margin:22px 0 10px;display:grid;gap:14px}
.kasten .prosa{font-size:var(--t-klein);max-height:22rem;overflow:auto;padding-right:8px;max-width:none}
.kasten .prosa h2{font-size:var(--t-h3)}
.kasten .prosa h3{font-size:1.125rem}
.nur-fuer-bots{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.bestellung{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px;align-items:start}
.bestellung__info{grid-column:1/5;display:grid;gap:36px;align-content:start}
.bestellung > .formular{grid-column:5/13}
.frage summary h2,.frage summary h3{font:inherit;font-stretch:inherit;letter-spacing:inherit;line-height:inherit;margin:0;text-wrap:pretty}
.tabelle-huelle{overflow-x:auto}
.tabelle{width:100%;border-collapse:collapse;font-size:var(--t-klein);border-top:1px solid var(--linie)}
.tabelle caption{text-align:left;font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-weight:600;padding:0 0 14px;caption-side:top}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:14px 20px 14px 0;border-bottom:1px solid var(--linie);color:var(--kreide-70)}
.tabelle td:last-child,.tabelle th:last-child{padding-right:0}
.tabelle thead th{font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-weight:600;padding-top:14px}
.tabelle tbody th{font-family:var(--display);font-weight:600;font-stretch:96%;color:var(--kreide);letter-spacing:-.01em;font-size:1rem}
.tabelle td.ja{color:var(--akzent-hell)}
.tabelle td.nein{color:var(--asche)}
.tabelle a{color:var(--akzent-hell)}
.tabelle .klein{display:block}
.tabelle .preis-zelle{font-family:var(--display);font-weight:800;font-stretch:82%;font-size:1.875rem;letter-spacing:-.03em;color:var(--kreide);display:flex;align-items:baseline;gap:10px;line-height:1}
.tabelle .preis-zelle small{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-stretch:110%}
.pille{display:inline-block;font-family:var(--display);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:5px 9px;border:1px solid var(--linie-stark);border-radius:999px;color:var(--asche);white-space:nowrap}
.pille--akzent{color:var(--akzent-hell);border-color:color-mix(in srgb,var(--akzent) 55%,transparent)}
.pille--ok{color:#9fcf98;border-color:rgba(159,207,152,.5)}
.pille--fehler{color:#e8927b;border-color:rgba(232,146,123,.5)}
.admin{padding-top:calc(var(--leiste) + 32px)}
.admin__kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--linie);margin-bottom:48px}
.admin__kopf .marke{gap:14px}
.admin__zahlen{display:grid;grid-template-columns:repeat(6,1fr);column-gap:var(--gutter);row-gap:24px;margin-bottom:24px}
.admin__zahlen div{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--linie);align-content:start}
.admin__zahlen .zahl{font-size:clamp(2rem,1.5rem + 2vw,3.5rem)}
.admin__zahlen .zahl.offen{color:var(--akzent-hell)}
.admin h2{font-size:var(--t-h3);margin:64px 0 20px;display:flex;align-items:baseline;gap:14px}
.admin h2 .nr{font-size:var(--t-label);font-weight:500;letter-spacing:.14em;color:var(--akzent);font-stretch:110%}
.admin__json{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.875rem;line-height:1.55;color:var(--kreide-70);padding:clamp(20px,3vw,32px);border:1px solid var(--linie-stark)}
@media (max-width:899px){
  .text-raster > .prosa,.text-raster > aside,.bestellung__info,.bestellung > .formular{grid-column:1/-1}
  .zeitleiste > div{grid-template-columns:2.25rem 1fr;row-gap:10px}
  .zeitleiste h3,.zeitleiste p{grid-column:2}
  .klartext{grid-template-columns:1fr}
  .admin__zahlen{grid-template-columns:repeat(2,1fr)}
  .prosa table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prosa table tbody,.prosa table thead{display:table;width:100%}
  .tabelle--stapel thead{display:none}
  .tabelle--stapel,.tabelle--stapel tbody,.tabelle--stapel tr,.tabelle--stapel th,.tabelle--stapel td{display:block;width:100%}
  .tabelle--stapel tbody th{border-bottom:0;padding:18px 0 6px}
  .tabelle--stapel td{border-bottom:0;padding:4px 0}
  .tabelle--stapel td:last-child{border-bottom:1px solid var(--linie);padding-bottom:18px}
  .tabelle--stapel td[data-spalte]::before{content:attr(data-spalte) ": ";font-family:var(--display);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-weight:600}
  .tabelle--stapel .preis-zelle{display:inline-flex;vertical-align:middle;font-size:1.5rem}
}

/* ---------- Bewegung aus, wenn gewünscht ---------- */
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  html.gsap [data-reveal]{opacity:1}
  html.gsap .hero__titel .w > span{transform:none}
  html.gsap [data-vorhang]{clip-path:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- Startseite: Hero mit Geräten, echte Beispielseiten statt Stimmungsbild (07.10.2026) ---------- */
.hero__inhalt--geraete{align-items:center}
.hero__inhalt--geraete .hero__text{grid-column:1/7}
.hero__inhalt--geraete .hero__titel{font-size:clamp(2.5rem,1rem + 3.4vw,4.4rem);max-width:12em}
.hero__inhalt--geraete .hero__unten .lead{max-width:26em}
.hero__geraete{grid-column:7/13;position:relative;aspect-ratio:1.18;align-self:center}
.geraet{position:absolute;margin:0;overflow:hidden;background:#111;box-shadow:0 40px 90px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.35)}
.geraet img{width:100%;height:auto;display:block}
.geraet--desktop{right:0;top:2%;width:88%;border-radius:10px;border:1px solid rgba(239,233,223,.16);transform:rotate(-1.2deg)}
.geraet--handy{left:0;bottom:2%;width:27%;border-radius:26px;border:5px solid #1c1b1a;transform:rotate(2.5deg)}
.geraet--zwei{display:none}
@media (max-width:899px){
  .hero__inhalt--geraete .hero__text{grid-column:1/-1}
  .hero__geraete{grid-column:1/-1;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:6px 7% 0}
  .geraet{position:static}
  .geraet--desktop{display:none}
  .geraet--handy{width:auto;transform:rotate(-2deg)}
  .geraet--zwei{display:block;transform:rotate(2deg);margin-top:26px}
}

/* ---------- Beispielseiten: sechs Browserfenster in zwei Spalten, Seite scrollt beim Zeigen ---------- */
.echte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(44px,5vw,72px)}
.echt{display:grid;gap:18px;align-content:start}
.echt:nth-child(even){margin-top:clamp(0px,3vw,48px)}
.echt__schau{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--linie-stark);background:#0f0e0d;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:transform .6s var(--ease),box-shadow .6s}
.echt__schau:hover{transform:translateY(-4px);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.echt__text{display:grid;gap:12px;align-content:start;padding:4px 2px 0}
.echt__leiste{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-bottom:1px solid var(--linie);font-family:var(--display);font-size:.8125rem;letter-spacing:.04em;color:var(--asche)}
.echt__leiste i{width:9px;height:9px;border-radius:50%;background:var(--linie-stark);flex:none}
.echt__leiste > span{margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.echt__bild{display:block;aspect-ratio:4/3.2;overflow:hidden;position:relative}
.echt__bild img{width:100%;height:auto;display:block;transition:transform 7s linear}
.echt__schau:hover .echt__bild img,.echt__schau:focus-visible .echt__bild img{transform:translateY(-39%)}   /* 1583/1200 Bild in 4:3.2 Rahmen */
.echt__nr{font-family:var(--display);font-weight:500;font-stretch:110%;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);font-variant-numeric:tabular-nums}
.echt__name{font-family:var(--display);font-weight:700;font-stretch:94%;font-size:clamp(1.375rem,1.15rem + .9vw,1.75rem);letter-spacing:-.015em;line-height:1.15;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.echt__meta{color:var(--asche);font-size:var(--t-klein)}
.echt .knopfzeile{margin-top:4px}
@media (max-width:899px){
  .echte{grid-template-columns:1fr}
  .echt:nth-child(even){margin-top:0}
  .echt__bild{aspect-ratio:4/3.6}
}

/* ---------- Helle Abschnitte (Tag-Basis) auf der Startseite: Ablauf und Preise atmen zwischen den dunklen ---------- */
.abschnitt[data-basis="tag"]{background:var(--nacht);color:var(--kreide);--akzent:#8a6a2a;--akzent-hell:#a3803a}   /* color hier setzen: body hat die dunkle Grundfarbe schon berechnet, Kinder erben sonst Kreide-hell */

/* ---------- Handy: fester Balken „Entwurf anfordern“, im Hero und am Formular ausgeblendet (nacht.js) ---------- */
.cta-leiste{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:none;transition:transform .5s var(--ease),opacity .4s}
.cta-leiste .knopf{width:100%;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.cta-leiste.aus{transform:translateY(130%);opacity:0;pointer-events:none}
@media (max-width:899px){.cta-leiste{display:block}}

/* ---------- Motive: zwei Layouts nebeneinander (Startseite) ---------- */
.motive{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px}
.motiv{display:grid;gap:14px;align-content:start}
.motiv .echt__schau{box-shadow:0 24px 60px rgba(0,0,0,.18)}
.motiv .echt__name{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.motiv .echt__meta{max-width:30em}
@media (max-width:899px){.motive{grid-template-columns:1fr}}
.motive--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.motive--drei .echt__bild{aspect-ratio:4/4}
@media (max-width:899px){.motive--drei{grid-template-columns:1fr}}
.paket__ab{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--asche);margin-right:.35em;letter-spacing:.02em}

/* Branchenseiten (/website-fuer-<slug>) und Branchenliste der Startseite */
.prosa p { margin: 0 0 1.1em; line-height: 1.6; }
.punkte--gross { max-width: 72ch; padding-left: 1.4em; }
.punkte--gross li { margin: 0 0 .9em; line-height: 1.55; }
.punkte--gross strong { font-weight: 600; }
.probe { margin: 0 0 1.5rem; padding: 1.2rem 1.4rem; border-left: 2px solid currentColor; max-width: 68ch; }
.probe p { margin: 0; line-height: 1.55; }
.probe__titel { font-weight: 700; font-size: 1.35rem; margin-bottom: .5rem !important; letter-spacing: -.01em; }
.branchen-liste { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem .8rem; }
.branchen-liste a { display: inline-block; padding: .55rem .9rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; }
.branchen-liste a:hover, .branchen-liste a:focus-visible { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.andere-branchen { margin-top: 1.4rem; line-height: 1.8; }