/* Motiv „Klar“ (07.10.2026): helle Flächen, kräftiger Akzent je Welt, eine Grotesk je Welt, Karten mit Rundungen.
   Gegenstück zum Motiv „Nacht“ (nacht.css). Nur für _vorschau/klar.html; der Entwurfsrahmen des Studios (Leiste, Stempel,
   Band, Erklärung) ist unten in Studio-Farben nachgebaut, damit die Teilvorlagen aus _vorschau/ ohne nacht.css laufen. */

@font-face{font-family:"Archivo";font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/archivo-latin.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:200 800;font-display:swap;src:url("fonts/manrope-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url("fonts/instrument-sans-latin.woff2") format("woff2")}
@font-face{font-family:"Encode Sans";font-weight:100 900;font-stretch:75% 125%;font-display:swap;src:url("fonts/encode-sans-latin.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-weight:100 900;font-display:swap;src:url("fonts/public-sans-latin.woff2") format("woff2")}

:root{
  --akzent:#d9641a;--akzent-hell:#f07a2c;--akzent-knopf:#b75013;--akzent-tief:#8f3e0e;--akzent-zart:#fdeee3;
  --tinte:#1a1512;--tinte-2:#26201b;--tinte-3:#352d26;--nebel:#f7f4f1;--linie:#e6dfd8;--papier:#ffffff;
  --text:#1a1512;--text-2:#5c544d;--hell:#ffffff;--hell-70:rgba(255,255,255,.74);
  --schrift:"Archivo";--rand:clamp(20px,4.5vw,64px);--breit:1180px;--gutter:clamp(16px,1.8vw,28px);
  --r:14px;--r-klein:10px;--r-knopf:12px;
  --t-h1:clamp(2.25rem,1.1rem + 4vw,4.25rem);--t-h2:clamp(1.75rem,1.2rem + 2vw,2.75rem);--t-h3:1.25rem;--t-lead:clamp(1.0625rem,1rem + .4vw,1.25rem);
}
/* Welt → Palette und Schrift (Werte wie ASSETS/baukasten/werkzeug/projekt_anlegen.py::PALETTEN) */
[data-welt="handwerk"]{--akzent:#d9641a;--akzent-hell:#f07a2c;--akzent-knopf:#b75013;--akzent-tief:#8f3e0e;--akzent-zart:#fdeee3;--tinte:#1a1512;--tinte-2:#26201b;--tinte-3:#352d26;--nebel:#f7f4f1;--linie:#ebe4dd;--schrift:"Archivo"}
[data-welt="gastronomie"],[data-welt="gastro"]{--akzent:#b8322c;--akzent-hell:#d6453e;--akzent-knopf:#962620;--akzent-tief:#751d18;--akzent-zart:#fbe9e8;--tinte:#1a1212;--tinte-2:#261a1a;--tinte-3:#352626;--nebel:#f7f2f2;--linie:#ece0e0;--schrift:"Manrope"}
[data-welt="praxis"]{--akzent:#0e7c86;--akzent-hell:#1a9aa6;--akzent-knopf:#0a626a;--akzent-tief:#084b52;--akzent-zart:#e3f3f4;--tinte:#0f1b1d;--tinte-2:#172729;--tinte-3:#223537;--nebel:#f1f5f5;--linie:#dde6e7;--schrift:"Instrument Sans"}
[data-welt="friseur"]{--akzent:#5b3fb3;--akzent-hell:#7557d1;--akzent-knopf:#49328f;--akzent-tief:#38266f;--akzent-zart:#eeeafa;--tinte:#141224;--tinte-2:#1d1a32;--tinte-3:#2a2644;--nebel:#f3f2f8;--linie:#e3e0ee;--schrift:"Encode Sans"}
[data-welt="fitness"]{--akzent:#b8322c;--akzent-hell:#d6453e;--akzent-knopf:#962620;--akzent-tief:#751d18;--akzent-zart:#fbe9e8;--tinte:#141212;--tinte-2:#1f1a1a;--tinte-3:#2e2626;--nebel:#f6f3f3;--linie:#e9dfdf;--schrift:"Archivo"}
[data-welt="einzelhandel"],[data-welt="baeckerei"]{--akzent:#1f9a4b;--akzent-hell:#34b864;--akzent-knopf:#177a3b;--akzent-tief:#116030;--akzent-zart:#e7f5ec;--tinte:#101613;--tinte-2:#18211d;--tinte-3:#26332d;--nebel:#f3f5f4;--linie:#e2e7e4;--schrift:"Public Sans"}
[data-welt="dienstleister"]{--akzent:#1b6fd6;--akzent-hell:#3d8cf0;--akzent-knopf:#1458b0;--akzent-tief:#0f4489;--akzent-zart:#e8f0fc;--tinte:#0f1a2b;--tinte-2:#182538;--tinte-3:#243449;--nebel:#f2f5f9;--linie:#dfe5ee;--schrift:"Instrument Sans"}
[data-welt="verein"]{--akzent:#1f9a4b;--akzent-hell:#34b864;--akzent-knopf:#177a3b;--akzent-tief:#116030;--akzent-zart:#e7f5ec;--tinte:#101613;--tinte-2:#18211d;--tinte-3:#26332d;--nebel:#f3f5f4;--linie:#e2e7e4;--schrift:"Manrope"}
[data-welt="kfz"]{--akzent:#1b6fd6;--akzent-hell:#3d8cf0;--akzent-knopf:#1458b0;--akzent-tief:#0f4489;--akzent-zart:#e8f0fc;--tinte:#0f1a2b;--tinte-2:#182538;--tinte-3:#243449;--nebel:#f2f5f9;--linie:#dfe5ee;--schrift:"Encode Sans"}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--text);font-family:var(--schrift),Arial,sans-serif;font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--akzent);color:#fff}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.bahn{width:min(100% - 2*var(--rand),var(--breit));margin-inline:auto}
.klein{font-size:.9rem;color:var(--text-2)}
.label{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent)}
.h3{font-size:var(--t-h3);font-weight:700}
.nur-mobil{display:none !important}.nur-breit{display:none}
@media (max-width:899px){.nur-desktop{display:none !important}.nur-mobil{display:inline !important}}
@media (min-width:1600px){.nur-breit{display:inline}}
mark.luecke,.luecke{background:var(--akzent-zart);color:var(--akzent-tief);padding:0 .3em;border-radius:4px;font-weight:600;font-style:normal;border:1px dashed var(--akzent)}
.luecke::before{content:"‹"}.luecke::after{content:"›"}
.sprung{position:absolute;left:-200vw;top:8px;z-index:200;background:var(--akzent);color:#fff;padding:10px 16px;font-weight:700;border-radius:var(--r-knopf)}
.sprung:focus{left:var(--rand)}

/* Typografie */
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:var(--t-h1);font-stretch:94%}
h2{font-size:var(--t-h2);font-stretch:95%}
h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--text-2);max-width:34em}
.dunkel .lead{color:var(--hell-70)}
.dachzeile{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);margin-bottom:14px}
.dunkel .dachzeile{color:var(--akzent-hell)}
.titelzeile{display:grid;gap:14px;max-width:46em;margin-bottom:clamp(28px,4vw,48px)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:var(--r-knopf);border:1.5px solid var(--linie);background:var(--papier);color:var(--text);font-weight:700;font-size:1rem;line-height:1.2;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}
.knopf > span{display:inline-flex;align-items:center;gap:10px}
.knopf:hover{border-color:var(--akzent);color:var(--akzent-knopf);transform:translateY(-1px)}
.knopf--voll{background:var(--akzent);border-color:var(--akzent);color:#fff}
.knopf--voll:hover{background:var(--akzent-knopf);border-color:var(--akzent-knopf);color:#fff}
.knopf--klein{padding:10px 16px;font-size:.9rem}
.knopf svg{width:16px;height:16px}
.dunkel .knopf:not(.knopf--voll){background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.dunkel .knopf:not(.knopf--voll):hover{border-color:#fff;color:#fff}
.knopfzeile{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ikon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:var(--papier);border-bottom:1px solid var(--linie)}
.kopf .bahn{display:flex;align-items:center;gap:24px;min-height:72px}
.marke{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.marke__zeichen{width:40px;height:40px;border-radius:10px;background:var(--akzent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem;letter-spacing:.04em;flex:none}
.marke__text{display:grid;line-height:1.1;min-width:0}
.marke__text b{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marke__text small{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:22px;font-weight:600;font-size:.95rem}
.nav a{padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--akzent);color:var(--akzent-knopf)}
.menue{position:relative}
.menue summary{list-style:none;cursor:pointer;display:none}
.menue summary::-webkit-details-marker{display:none}
.menue__liste{display:none}
@media (max-width:899px){
  .kopf .bahn{min-height:64px;gap:12px}
  .nav,.kopf > .bahn > .knopf{display:none}
  .menue summary{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1.5px solid var(--linie);border-radius:var(--r-knopf);font-weight:700;font-size:.9rem}
  .menue[open] .menue__liste{display:grid;position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);box-shadow:0 18px 40px rgba(0,0,0,.14);padding:10px;gap:2px;z-index:60}
  .menue__liste a{padding:12px 14px;border-radius:var(--r-klein);font-weight:600}
  .menue__liste a:hover{background:var(--nebel)}
  .menue__liste .knopf{margin-top:8px;justify-content:center}
}

/* Hero: geteilt, Text auf Papier, Foto als Karte mit Abzeichen (kein Vollbild) */
.hero{position:relative;background:var(--papier);color:var(--text);overflow:hidden}
.hero__raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(40px,6vw,88px) 0 clamp(40px,6vw,80px)}
.hero__text{display:grid;gap:22px}
.hero h1{max-width:11em}
.hero h1 em{font-style:normal;color:var(--akzent)}
.hero__haken{display:grid;gap:10px;margin-top:6px;font-weight:600;font-size:.98rem;color:var(--text)}
.hero__haken li{display:flex;align-items:flex-start;gap:10px}
.hero__haken .ikon{color:var(--akzent);width:22px;height:22px;stroke-width:2.2;flex:none;margin-top:1px}
.hero__karte{position:relative;border-radius:28px;aspect-ratio:4/4.4}
.hero__karte picture,.hero__karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,55% 50%);border-radius:28px}
.hero__karte::after{content:"";position:absolute;inset:0;border-radius:28px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.hero__abzeichen{position:absolute;left:-22px;bottom:32px;z-index:2;background:var(--akzent);color:#fff;border-radius:20px;padding:16px 20px 16px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 18px 40px rgba(0,0,0,.2)}
.hero__abzeichen b{font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.hero__abzeichen span{font-size:.85rem;font-weight:600;line-height:1.25;opacity:.95}
@media (max-width:899px){
  .hero__raster{grid-template-columns:1fr;gap:28px;padding:28px 0 44px}
  .hero__karte{aspect-ratio:4/3;border-radius:20px}
  .hero__karte picture,.hero__karte img,.hero__karte::after{border-radius:20px}
  .hero__abzeichen{left:14px;bottom:-16px;padding:12px 16px}
  .hero__abzeichen b{font-size:1.8rem}
  .hero__haken li:nth-child(n+3){display:none}
}

/* Kennzeile */
.kennzeile{background:var(--akzent);color:#fff}
.kennzeile .bahn{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.kennzeile .bahn > div{padding:20px 0;display:grid;gap:4px}
.kennzeile .bahn > div + div{padding-left:24px;border-left:1px solid rgba(255,255,255,.3)}
.kennzeile b{font-weight:800;font-size:1.05rem}
.kennzeile span{color:rgba(255,255,255,.9);font-size:.92rem}
.kennzeile .luecke{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.7)}
@media (max-width:899px){.kennzeile .bahn{grid-template-columns:1fr}.kennzeile .bahn > div + div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.3)}.kennzeile .bahn > div{padding:14px 0}}

/* Abschnitte */
.abschnitt{padding-block:clamp(56px,7vw,104px)}
.abschnitt--nebel{background:var(--nebel)}
.dunkel{background:var(--tinte);color:#fff}
.dunkel h2,.dunkel h3{color:#fff}
.rubrik{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent)}
.rubrik::after{content:"";flex:1;height:1px;background:var(--linie)}
.dunkel .rubrik{color:var(--akzent-hell)}.dunkel .rubrik::after{background:rgba(255,255,255,.14)}

/* Leistungen: Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gutter)}
.karte{display:grid;gap:12px;align-content:start;padding:24px;border:1px solid var(--linie);border-radius:var(--r);background:var(--papier);transition:transform .3s,box-shadow .3s,border-color .3s;position:relative}
.karte:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.08);border-color:var(--akzent)}
.karte__nr{width:44px;height:44px;border-radius:12px;background:var(--akzent-zart);color:var(--akzent-knopf);display:grid;place-items:center;font-weight:800;font-size:.95rem}
.karte p{color:var(--text-2);font-size:.98rem}
.karte .etikett{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--akzent-knopf);border:1px solid var(--akzent);border-radius:999px;padding:2px 8px}
.karte__pfeil{position:absolute;right:20px;top:24px;color:var(--akzent);opacity:0;transition:opacity .3s}
.karte:hover .karte__pfeil{opacity:1}

/* Ablauf: Zeitstrahl mit Kreisen und Linie */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gutter);position:relative;padding-top:6px}
.schritte::before{content:"";position:absolute;left:22px;right:22px;top:28px;height:2px;background:var(--linie)}
.schritt{display:grid;gap:10px;align-content:start;padding-right:16px}
.schritt__kreis{width:46px;height:46px;border-radius:50%;background:var(--akzent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.05rem;position:relative;z-index:1;box-shadow:0 0 0 6px var(--nebel);margin-bottom:8px}
.schritt p{color:var(--text-2);font-size:.98rem}
.schritt__dauer{display:inline-block;margin-top:4px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--akzent-knopf)}
@media (max-width:899px){.schritte{grid-template-columns:1fr;gap:22px}.schritte::before{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto}.schritt{grid-template-columns:46px 1fr;column-gap:16px}.schritt__kreis{grid-row:1/4;margin:0}}

/* Über uns: Fotokarte mit Zitat, Fakten als Kacheln */
.ueber{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.ueber__bild{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/4.6;background:var(--tinte)}
.ueber__bild picture,.ueber__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.ueber__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 55%)}
.ueber__zitat{position:absolute;left:24px;right:24px;bottom:24px;z-index:1;color:#fff;font-weight:800;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.2;letter-spacing:-.01em}
.ueber .absatz{color:var(--text-2);font-size:var(--t-lead);line-height:1.5;max-width:30em;margin-top:16px}
.ueber .absatz strong{color:var(--text)}
.fakten{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.fakten div{background:var(--nebel);border-radius:14px;padding:14px 16px;display:grid;gap:4px;font-size:.98rem}
.fakten div span:first-child{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.fakten div span:last-child{font-weight:600}
.fakten .fakten--breit{grid-column:1/-1}
.punkte{display:grid;gap:10px;margin-top:22px}
.punkte li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.punkte .ikon{color:var(--akzent);width:22px;height:22px;margin-top:2px;stroke-width:2.2;flex:none}
.ueber__nebensatz{margin-top:18px;color:var(--text-2);font-size:.9rem}
@media (max-width:899px){.ueber{grid-template-columns:1fr}.ueber__bild{aspect-ratio:4/3}}

/* Fragen */
.fragen{display:grid;gap:10px;max-width:52em}
.frage{border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--papier)}
.frage summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px;font-weight:700}
.frage summary::-webkit-details-marker{display:none}
.frage .nr{font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--akzent)}
.frage .plus{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--akzent-zart);color:var(--akzent-knopf);display:grid;place-items:center;font-weight:800;flex:none}
.frage .plus::before{content:"+"}
.frage[open] .plus::before{content:"–"}
.frage__inhalt{padding:0 18px 18px 52px;color:var(--text-2)}

/* Kontakt: farbiger Block, Formular als weiße Karte */
.abschnitt--akzent{background:var(--akzent);color:#fff}
.abschnitt--akzent h2{color:#fff}
.abschnitt--akzent .rubrik{color:rgba(255,255,255,.85)}.abschnitt--akzent .rubrik::after{background:rgba(255,255,255,.3)}
.kontakt__lead{color:rgba(255,255,255,.9);margin-top:14px}
.abschnitt--akzent .kontakt__daten{border-top-color:rgba(255,255,255,.3)}
.abschnitt--akzent .kontakt__daten div{border-bottom-color:rgba(255,255,255,.3);color:#fff}
.abschnitt--akzent .kontakt__daten div span:first-child{color:rgba(255,255,255,.85)}
.abschnitt--akzent .luecke{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.7)}
.abschnitt--akzent .formular{color:var(--text);box-shadow:0 30px 60px rgba(0,0,0,.25)}
.abschnitt--akzent .formular .label{color:var(--akzent)}.abschnitt--akzent .formular .feld .label{color:var(--text-2)}
/* Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.kontakt__daten{display:grid;margin-top:22px;border-top:1px solid var(--linie)}
.kontakt__daten div{display:grid;grid-template-columns:6.5rem 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--linie);font-size:.98rem}
.kontakt__daten div span:first-child{color:var(--text-2);font-weight:600}
.formular{display:grid;gap:14px;padding:clamp(20px,3vw,32px);border-radius:var(--r);background:var(--papier);border:1px solid var(--linie);box-shadow:0 20px 50px rgba(0,0,0,.07)}
.formular__kopf{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.formular__kopf .label:last-child{color:var(--text-2)}
.formular__zeile{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feld{display:grid;gap:6px}
.feld .label{font-size:.75rem;color:var(--text-2)}
.feld .opt{font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-2)}
.feld input,.feld textarea{width:100%;padding:13px 14px;border:1.5px solid var(--linie);border-radius:var(--r-klein);background:var(--nebel);font-size:1rem}
.feld input:focus,.feld textarea:focus{border-color:var(--akzent);background:var(--papier);outline:none}
.feld textarea{min-height:120px;resize:vertical}
.formular__fuss{display:grid;gap:10px}
.formular__fuss .knopf{justify-self:start}
.formular output{display:block;font-size:.9rem;color:var(--akzent-knopf);min-height:1.2em;font-weight:600}
@media (max-width:899px){.kontakt{grid-template-columns:1fr}.formular__zeile{grid-template-columns:1fr}}

/* Fuß */
.fuss{background:var(--tinte);color:#fff;padding:clamp(40px,6vw,72px) 0 28px}
.fuss__oben{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
.fuss__claim p{color:var(--hell-70);margin-top:14px;max-width:28em;font-size:.95rem}
.fuss .marke__text b{color:#fff}.fuss .marke__text small{color:var(--hell-70)}
.fuss__spalte{display:grid;gap:6px;align-content:start;font-size:.95rem}
.fuss__spalte .label{color:var(--akzent-hell);margin-bottom:6px}
.fuss__spalte a{color:var(--hell-70);padding:4px 0}
.fuss__spalte a:hover{color:#fff}
.fuss__spalte .klein{color:rgba(255,255,255,.5)}
.fuss__unten{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.6)}
@media (max-width:899px){.fuss__oben{grid-template-columns:1fr}}

/* ---------- Entwurfsrahmen des Studios (Teilvorlagen aus _vorschau/), Studio-Farben, nicht Welt-Farben ---------- */
.entwurf-rahmen{--nacht:#0f0e0d;--kreide:#efe9df;--kreide-70:rgba(239,233,223,.72);--asche:#a69f93;--s-linie:rgba(239,233,223,.14);--s-akzent:#c9a45c;--s-akzent-hell:#e6c982;background:var(--nacht);color:var(--kreide);font-family:"Archivo",Arial,sans-serif}
.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(--s-linie);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-size:.6875rem}
.entwurf-leiste .stempel{border:1px solid var(--s-akzent);color:var(--s-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}
.entwurf-leiste .knopf{padding:9px 14px;font-size:.75rem;border-radius:999px;background:transparent;border-color:rgba(239,233,223,.3);color:var(--kreide)}
.entwurf-leiste .knopf--voll{background:var(--s-akzent);border-color:var(--s-akzent);color:#121110}
.entwurf-leiste .knopf:hover{border-color:var(--s-akzent-hell);color:var(--kreide);transform:none}
.entwurf-leiste .knopf--voll:hover{background:var(--s-akzent-hell);color:#121110}
.kopf{top:var(--leiste,0px)}
@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:12px 14px}
}
.entwurf-stempel{position:absolute;right:var(--rand);top:clamp(20px,3vw,36px);z-index:2;pointer-events:none;display:grid;gap:2px;text-align:center;padding:8px 12px;transform:rotate(-4deg);border:1.5px solid #e6c982;border-radius:3px;color:#e6c982;background:rgba(15,14,13,.45);font-family:"Archivo",Arial,sans-serif;font-weight:700;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:rgba(239,233,223,.72)}
@media (max-width:899px){.entwurf-stempel small{display:none}.entwurf-stempel{font-size:.6875rem;padding:7px 10px}}
.entwurf-fuss{padding-block:clamp(48px,6vw,88px)}
.entwurf-band .bahn{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:center}
.entwurf-band .label{color:var(--s-akzent)}
.entwurf-band__text{display:grid;gap:14px}
.entwurf-band__text .h3{font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem);max-width:18em;color:var(--kreide)}
.entwurf-band__text .klein{color:var(--kreide-70);max-width:46em}
.entwurf-band__aktionen{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.entwurf-band .knopf{border-radius:999px;background:transparent;border-color:rgba(239,233,223,.3);color:var(--kreide)}
.entwurf-band .knopf--voll{background:var(--s-akzent);border-color:var(--s-akzent);color:#121110}
.erklaerung{margin-top:clamp(36px,5vw,64px);border:1px solid rgba(239,233,223,.3);padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 32px;background:rgba(0,0,0,.12)}
.erklaerung .label{color:var(--s-akzent);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:.92rem}
.erklaerung li{position:relative;padding-left:18px}
.erklaerung li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--s-akzent)}
.erklaerung a{color:var(--s-akzent-hell)}
.erklaerung .luecke{background:rgba(255,255,255,.08);color:#e6c982;border-color:#e6c982}
@media (max-width:899px){.entwurf-band .bahn{grid-template-columns:1fr}.entwurf-band__aktionen{justify-content:flex-start}.erklaerung{grid-template-columns:1fr}}