/* RAUMRISS Studio · eigener Look für Kundenseiten (Studio, Cases).
   Papier und Signalrot: warmes Papierweiß, schwarze Tinte, Rot nur als Signal.
   Plakatschrift für Überschriften, Space Mono für Etiketten und Nummern, Linie statt Schatten.
   Gilt nur unter html.st-seite, damit glas.css und die anderen Seiten unberührt bleiben. */
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/SpaceMono-Regular.ttf) format("truetype")}
:root{
  --s-grund:#f3efe6;--s-karte:#faf8f3;--s-tinte:#151413;--s-zweit:#5f5a52;--s-dritt:#8a847a;
  --s-linie:#151413;--s-haar:rgba(21,20,19,.22);--s-akzent:#e0341a;--s-akzent-dunkel:#b8260f;
  --s-text:"Archivo",system-ui,-apple-system,sans-serif;
  --s-plakat:"Archivo Plakat","Archivo",system-ui,sans-serif;
  --s-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html.st-seite{background:var(--s-grund);color-scheme:only light;scroll-behavior:smooth;scroll-padding-top:90px}
html.st-seite body{margin:0;background:var(--s-grund);color:var(--s-tinte);font-family:var(--s-text);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
html.st-seite body::before,html.st-seite body::after{display:none}
:where(.st) a{color:inherit}
.st :focus-visible{outline:2px solid var(--s-akzent);outline-offset:3px}
:where(.st) :is(h1,h2,h3,p){margin:0}
.st-rahmen{max-width:1180px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px)) 0 max(20px,env(safe-area-inset-right,0px))}

/* Kopfleiste: dieselbe Rauchglas-Pille wie auf allen Seiten (rr.css), Papier ist nur der Grund */

/* Schrift */
.st-kicker,.st-nr,.st-etikett{font-family:var(--s-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--s-akzent)}
.st-nr{display:block;margin-bottom:16px}
.st-nr::after{content:" ———"}
.st h1{font-family:var(--s-plakat);font-stretch:75%;font-weight:800;font-size:clamp(46px,7.2vw,116px);line-height:.95;letter-spacing:-.01em;margin-top:18px}
.st h2{font-family:var(--s-plakat);font-stretch:75%;font-weight:800;font-size:clamp(34px,4.2vw,60px);line-height:1;max-width:17em}
.st h3{font-family:var(--s-plakat);font-stretch:75%;font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1.05}
.st-unter{font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--s-zweit);max-width:34em}
.st-fein{font-size:14px;color:var(--s-zweit);line-height:1.5}
.st-abschnitt{padding:clamp(64px,9vw,120px) 0;border-top:1.5px solid var(--s-linie)}
.st-abschnitt-kopf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.st-abschnitt-kopf .st-unter{font-size:18px}

/* Knöpfe */
.st-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.st-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;font:inherit;font-weight:600;font-size:16px;text-decoration:none;background:var(--s-akzent);color:#fff;border:0;border-radius:0;cursor:pointer;transition:background .15s}
.st-knopf:hover{background:var(--s-akzent-dunkel)}
.st-knopf.zweit{background:transparent;color:var(--s-tinte);box-shadow:inset 0 0 0 1.5px var(--s-tinte)}
.st-knopf.zweit:hover{background:var(--s-tinte);color:var(--s-grund)}
.st-pfeil{font-family:var(--s-mono);font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--s-akzent);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.st-pfeil::after{content:" →"}

/* Held */
.st-held{padding:calc(44px + env(safe-area-inset-top,0px) + clamp(48px,7vw,96px)) 0 clamp(56px,7vw,96px)}
.st-held-text{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:64px;align-items:end}
.st-held-text .st-kicker,.st-held-text h1{grid-column:1/-1}
.st-held-text .st-unter{grid-column:1;margin-top:34px}
.st-held-text .st-punkte{grid-column:2;grid-row:3/6;align-self:end}
.st-held-text .st-knoepfe,.st-held-text .st-fein{grid-column:1}
.st-held-text .st-fein{margin-top:14px}
.st-punkte{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:16px}
.st-punkte li{display:flex;gap:12px;align-items:baseline}
.st-punkte li::before{content:"";width:9px;height:9px;background:var(--s-akzent);flex:none;transform:translateY(-1px)}
.st-bild{margin:56px 0 0;position:relative}
.st-fx{aspect-ratio:21/9;overflow:hidden;position:relative;border:1.5px solid var(--s-linie);background:#4fb3ff}
.st-fx iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.st-fx-tipp{display:none}
.st-bild figcaption{font-family:var(--s-mono);font-size:13px;color:var(--s-zweit);margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.st-bild figcaption b{color:var(--s-akzent);font-weight:400;text-transform:uppercase}
.st-bild figcaption a{margin-left:auto}

/* Vertrauen */
.st-vertrauen{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--s-linie)}
.st-vertrauen div{padding:22px 20px;display:flex;flex-direction:column;gap:2px}
.st-vertrauen div+div{border-left:1px solid var(--s-haar)}
.st-vertrauen strong{font-size:16px}
.st-vertrauen span{font-size:14px;color:var(--s-zweit)}

/* Raster mit Linie oben */
.st-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px}
.st-drei>div{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1.5px solid var(--s-linie)}
.st-drei b{font-family:var(--s-mono);font-weight:400;font-size:13px;color:var(--s-akzent)}
.st-drei strong{font-size:20px;line-height:1.25}
.st-drei span{font-size:16px;line-height:1.5;color:var(--s-zweit)}
.st-bruecke{font-size:clamp(19px,1.8vw,24px);line-height:1.4;max-width:36em;margin-top:48px}
.st-bruecke b{background:linear-gradient(transparent 62%,rgba(224,52,26,.25) 0)}

/* Referenz */
.st-ref{background:var(--s-tinte);color:var(--s-grund);border-top:0}
.st-ref .st-unter,.st-ref .st-fein{color:#c9c3b8}
.st-ref .st-drei>div{border-top-color:#f3efe6}
.st-ref .st-drei span{color:#c9c3b8}
.st-ref-paar{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:56px}
.st-ref-paar>div{border:1.5px solid #f3efe6;padding:26px 28px}
.st-ref-paar>div.heute{background:var(--s-grund);color:var(--s-tinte);border-color:var(--s-grund)}
.st-ref-paar p{margin-top:10px;font-size:17px;line-height:1.5}
.st-ref .st-knoepfe .st-knopf.zweit{color:var(--s-grund);box-shadow:inset 0 0 0 1.5px var(--s-grund)}
.st-ref .st-knoepfe .st-knopf.zweit:hover{background:var(--s-grund);color:var(--s-tinte)}
.st-ref-zwischen{font-family:var(--s-mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--s-akzent);margin:0 0 20px}

/* Befund */
.st-befund{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:start}
.st-befund .st-unter{margin-top:20px}
.st-karte{border:1.5px solid var(--s-linie);background:var(--s-karte);padding:28px}
.st-karte-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1.5px solid var(--s-linie)}
.st-karte-kopf span{font-weight:700;font-size:18px}
.st-karte-kopf b{font-family:var(--s-mono);font-weight:400;font-size:13px;text-transform:uppercase;color:var(--s-akzent)}
.st-befund-preise>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--s-haar)}
.st-befund-preise b,.st-preis{font-family:var(--s-plakat);font-stretch:75%;font-weight:800;font-size:32px;line-height:1}
.st-liste{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:16px}
.st-liste li{display:flex;gap:12px;align-items:baseline}
.st-liste li::before{content:"—";color:var(--s-akzent);flex:none}
.st-karte-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--s-haar);font-family:var(--s-mono);font-size:12px;text-transform:uppercase;color:var(--s-zweit)}

/* Preise */
.st-pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.st-paket{border:1.5px solid var(--s-linie);background:var(--s-karte);padding:28px;display:flex;flex-direction:column;gap:12px}
.st-paket .st-etikett{display:flex;justify-content:space-between;gap:8px}
.st-paket .wofuer{font-size:17px;line-height:1.4;font-weight:600}
.st-paket .st-liste{margin:4px 0 0;font-size:15px;flex:1;align-content:start}
.st-paket .bringt{font-size:14px;color:var(--s-zweit);padding-top:14px;border-top:1px solid var(--s-haar)}
.st-paket.hervor{background:var(--s-tinte);color:var(--s-grund)}
.st-paket.hervor .bringt{color:#c9c3b8;border-top-color:rgba(243,239,230,.25)}
.st-preis small{font-family:var(--s-text);font-stretch:100%;font-weight:500;font-size:15px}
.st-zusatz{margin-top:24px;max-width:52em}
.st-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.st-zwischen{font-family:var(--s-plakat);font-stretch:75%;font-weight:800;font-size:clamp(26px,2.6vw,36px);line-height:1.05;margin:clamp(56px,7vw,88px) 0 24px!important}
.st-modelle{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.st-modelle .st-karte p{margin-top:10px;color:var(--s-zweit)}
.st-modelle .st-preis{margin-top:14px;display:block}
.st-zahlplan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--s-linie)}
.st-zahlplan li{padding:20px 20px 0 0;display:flex;flex-direction:column;gap:6px}
.st-zahlplan li+li{padding-left:20px;border-left:1px solid var(--s-haar)}
.st-zahlplan strong{font-family:var(--s-plakat);font-stretch:75%;font-weight:800;font-size:40px;line-height:1}
.st-zahlplan span:last-child{font-size:15px;color:var(--s-zweit)}
.st-vergleich{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.st-vergleich>div{border:1.5px solid var(--s-linie);padding:24px}
.st-vergleich>div.wir{background:var(--s-akzent);border-color:var(--s-akzent);color:#fff}
.st-vergleich strong{font-size:18px}
.st-vergleich dl{margin:16px 0 0;display:grid;gap:4px}
.st-vergleich dt{font-family:var(--s-mono);font-size:12px;text-transform:uppercase;color:var(--s-dritt);margin-top:10px}
.st-vergleich .wir dt{color:rgba(255,255,255,.75)}
.st-vergleich dd{margin:0;font-size:15px}
.st-versprechen{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.st-versprechen>div{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1.5px solid var(--s-linie)}
.st-versprechen span{font-size:15px;color:var(--s-zweit)}

/* Technik */
.st-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.st-chips span{font-family:var(--s-mono);font-size:12px;text-transform:uppercase;border:1px solid var(--s-linie);padding:5px 10px}

/* Agenturen */
.st-agentur{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 64px}
.st-agentur .st-unter{margin-top:20px}
.st-agentur ul{list-style:none;margin:0;padding:0;display:grid}
.st-agentur li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--s-haar)}
.st-agentur li:first-child{border-top:1.5px solid var(--s-linie)}
.st-agentur li span{color:var(--s-zweit);font-size:15px}

/* Zitat */
.st-zitat{padding:clamp(64px,9vw,120px) 0;border-top:1.5px solid var(--s-linie)}
.st-zitat blockquote{margin:0;font-family:var(--s-plakat);font-stretch:75%;font-weight:700;font-size:clamp(28px,3.4vw,48px);line-height:1.12;max-width:22em}
.st-zitat cite{display:block;margin-top:24px;font-style:normal;font-family:var(--s-mono);font-size:13px;text-transform:uppercase;color:var(--s-akzent)}

/* Fragen */
.st-faq{max-width:860px}
.st-faq details{border-bottom:1px solid var(--s-haar)}
.st-faq details:first-of-type{border-top:1.5px solid var(--s-linie)}
.st-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-weight:600;font-size:18px}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq summary::after{content:"+";font-family:var(--s-mono);color:var(--s-akzent);font-size:20px;line-height:1}
.st-faq details[open] summary::after{content:"–"}
.st-faq details p{padding:0 0 22px;color:var(--s-zweit);max-width:44em}

/* Anfrage */
.st-anfrage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px 64px;align-items:start}
.st-anfrage .st-unter{margin-top:20px}
.st-person{display:flex;gap:14px;align-items:center;margin-top:28px}
.st-person .mh{width:52px;height:52px;display:grid;place-items:center;background:var(--s-tinte);color:var(--s-grund);font-family:var(--s-mono);font-size:15px;flex:none}
.st-person .klein{font-size:14px;color:var(--s-zweit)}
.st-danach{margin:28px 0 0;padding:0;list-style:none;counter-reset:d;display:grid;gap:10px}
.st-danach li{counter-increment:d;display:flex;gap:14px;align-items:baseline}
.st-danach li::before{content:"0" counter(d);font-family:var(--s-mono);font-size:13px;color:var(--s-akzent);flex:none}
.st-formular{display:grid;grid-template-columns:1fr 1fr;gap:16px;border:1.5px solid var(--s-linie);background:var(--s-karte);padding:28px}
.st-formular label{display:flex;flex-direction:column;gap:6px;font-family:var(--s-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--s-zweit)}
.st-formular .breit{grid-column:1/-1}
.st-formular input,.st-formular select,.st-formular textarea{font:inherit;font-family:var(--s-text);font-size:16px;text-transform:none;letter-spacing:0;color:var(--s-tinte);background:#fff;border:1.5px solid var(--s-linie);border-radius:0;padding:12px 14px;width:100%}
.st-formular textarea{min-height:120px;resize:vertical}
.st-formular input:focus,.st-formular select:focus,.st-formular textarea:focus{outline:2px solid var(--s-akzent);outline-offset:0}
.st-formular .st-knopf{width:100%}
.st-meldung{border-left:3px solid var(--s-akzent);padding:10px 14px;background:#fff;font-size:15px}

/* Cases */
.st-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px 64px;align-items:start}
.st-case .st-unter{margin-top:20px}
.st-case-fakten{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:28px 0 0;padding-top:18px;border-top:1.5px solid var(--s-linie);font-size:15px}
.st-case-fakten dt{font-family:var(--s-mono);font-size:12px;text-transform:uppercase;color:var(--s-dritt);padding-top:2px}
.st-case-fakten dd{margin:0}
.st-case-fakten a{color:var(--s-akzent)}
.st-leer{border:1.5px dashed var(--s-linie);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:24px 48px;align-items:center}
.st-leer .st-knoepfe{margin-top:0}

/* Fuß auf Papier */
html.st-seite .rr-fuss{background:var(--s-grund);border-top:1.5px solid var(--s-linie)}

@media (hover:none){
  .st-fx iframe{pointer-events:none}
  .st-fx-tipp{display:block;position:absolute;inset:0;z-index:2}
}
@media (max-width:960px){
  .st-abschnitt-kopf,.st-befund,.st-agentur,.st-anfrage,.st-case{grid-template-columns:1fr}
  .st-versprechen,.st-zahlplan{grid-template-columns:1fr 1fr}
  .st-zahlplan li:nth-child(3){padding-left:0;border-left:0}
  .st-zahlplan li{padding-bottom:20px}
}
@media (max-width:760px){
  html.st-seite body{font-size:16px}
  .st-held-text{display:block}
  .st-held-text .st-punkte{margin-top:24px}
  .st-fx{aspect-ratio:4/5}
  .st-bild{margin-top:44px}
  .st-bild figcaption a{margin-left:0}
  .st-vertrauen{grid-template-columns:1fr 1fr}
  .st-vertrauen div:nth-child(3){border-left:0}
  .st-vertrauen div:nth-child(n+3){border-top:1px solid var(--s-haar)}
  .st-drei,.st-pakete,.st-modelle,.st-vergleich,.st-ref-paar{grid-template-columns:1fr}
  .st-versprechen{grid-template-columns:1fr}
  .st-formular{grid-template-columns:1fr;padding:20px}
  .st-leer{grid-template-columns:1fr}
  .st-knoepfe .st-knopf{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){html.st-seite{scroll-behavior:auto}}

/* Werkstatt: Terminal, daneben entsteht die App (rr-terminal.js) */
.st-terminal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:stretch}
.tm-fenster{background:#151413;color:#e9e4da;border:1.5px solid var(--s-linie);display:flex;flex-direction:column;min-height:400px;font:13.5px/1.6 var(--s-mono)}
.tm-kopf{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(243,239,230,.14)}
.tm-kopf i{width:10px;height:10px;border-radius:50%;background:#3a3733}
.tm-kopf i:first-child{background:var(--s-akzent)}
.tm-kopf span{margin-left:8px;font-size:12px;color:#8a847a}
.tm-aus{flex:1;padding:14px 16px 6px;overflow:auto;max-height:340px}
.tm-z{white-space:pre-wrap;word-break:break-word}
.tm-z b{color:var(--s-akzent);font-weight:400}
.tm-ok{color:#b9d38c}
.tm-info{color:#c9c3b8}
.tm-info a{color:#fff}
.tm-info b{color:#fff;font-weight:400}
.tm-ein{display:flex;align-items:center;gap:8px;padding:10px 16px 14px;border-top:1px solid rgba(243,239,230,.1)}
.tm-ein b{color:var(--s-akzent);font-weight:400}
.tm-feld{all:unset;flex:1;min-width:0;font:inherit;color:#fff;caret-color:var(--s-akzent)}
.tm-feld::placeholder{color:#5f5a52}
.tm-feld:disabled{opacity:.4}
.tm-ein:focus-within{background:rgba(243,239,230,.04)}
/* Die App baut sich auf: jeder Schritt im Terminal schaltet einen Teil frei */
.tm-app{border:1.5px solid var(--s-linie);background:var(--s-karte);display:flex;flex-direction:column;overflow:hidden;font-size:14px}
.tm-app > *,.tm-seite > *,.tm-haupt > *{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.1)}
.tm-app-kopf{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1.5px solid var(--s-linie);font-family:var(--s-plakat);font-stretch:75%;font-weight:800;font-size:20px}
.tm-live{font-family:var(--s-mono);font-weight:400;font-stretch:100%;font-size:11px;text-transform:uppercase;background:var(--s-akzent);color:#fff;padding:3px 8px;opacity:0;transform:scale(.8)}
.tm-app-koerper{flex:1;display:grid;grid-template-columns:132px 1fr}
.tm-seite{border-right:1px solid var(--s-haar);padding:12px 10px;display:grid;align-content:start;gap:4px;font-size:13px}
.tm-seite span{padding:6px 8px}
.tm-seite .an{background:var(--s-tinte);color:var(--s-grund)}
.tm-haupt{padding:14px;display:grid;align-content:start;gap:12px}
.tm-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tm-zahlen div{border:1px solid var(--s-linie);padding:10px;background:#fff}
.tm-zahlen small{display:block;font-family:var(--s-mono);font-size:10.5px;text-transform:uppercase;color:var(--s-dritt)}
.tm-zahlen b{font-family:var(--s-plakat);font-stretch:75%;font-size:26px;line-height:1.1}
.tm-liste{border-top:1.5px solid var(--s-linie)}
.tm-liste div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--s-haar);font-size:13.5px}
.tm-liste i{font-style:normal;font-family:var(--s-mono);font-size:11px;text-transform:uppercase;color:var(--s-akzent)}
.tm-ki{border-left:3px solid var(--s-akzent);background:#fff;padding:10px 12px;font-size:13.5px}
.tm-ki b{font-family:var(--s-mono);font-weight:400;font-size:11px;text-transform:uppercase;color:var(--s-akzent);margin-right:6px}
/* Startzustand: nur leeres Gerüst */
.tm-app:not(.ist-geruest) .tm-app-kopf b,.tm-app:not(.ist-geruest) .tm-seite{opacity:0;transform:translateY(6px)}
.tm-app:not(.ist-module) .tm-liste,.tm-app:not(.ist-module) .tm-seite span:not(.an){opacity:0;transform:translateY(6px)}
.tm-app:not(.ist-zahlen) .tm-zahlen{opacity:0;transform:translateY(6px)}
.tm-app:not(.ist-ki) .tm-ki,.tm-app:not(.ist-ki) .tm-ki-nav{opacity:0;transform:translateY(6px)}
.tm-app.ist-live .tm-live{opacity:1;transform:none}
@media (max-width:860px){.st-terminal{grid-template-columns:1fr}.tm-fenster{min-height:320px}.tm-app-koerper{grid-template-columns:1fr}.tm-seite{display:none}}

/* Eine Formensprache auf allen Seiten (Max, 03.11.): Knöpfe rund, Karten weich gerundet.
   Papier bleibt der Grund, Linie und Signalrot bleiben, eckig wird nichts mehr. */
html.st-seite{--s-r:22px;--s-r-klein:14px}
html.st-seite :is(.st-knopf,.st-pfeil-knopf,.st-chips span,.w-filter button,.schalter,.tm-live,.st-paket .st-etikett span:last-child:not(:first-child)){border-radius:999px}
html.st-seite .st-knopf.zweit{box-shadow:inset 0 0 0 1.5px var(--s-tinte)}
html.st-seite :is(.st-karte,.st-paket,.st-vergleich>div,.st-ref-paar>div,.st-formular,.st-fx,.st-leer,.konf-auswahl,.konf-ergebnis,.tm-fenster,.tm-app,.p-schluss .st-rahmen>.st-knoepfe){border-radius:var(--s-r)}
html.st-seite :is(.st-fx,.konf-auswahl,.tm-fenster,.tm-app){overflow:hidden}
html.st-seite :is(.st-formular input,.st-formular select,.st-formular textarea,.tm-zahlen div,.baustein,.ersparnis,.tm-ki){border-radius:var(--s-r-klein)}
html.st-seite .schalter{overflow:hidden}
html.st-seite .schalter span{border-radius:999px}
html.st-seite .bausteine{border:0;gap:8px}
html.st-seite .baustein{border:1px solid var(--s-haar)}
html.st-seite .baustein .haken{border-radius:6px}
html.st-seite .balken i,html.st-seite .balken i em{border-radius:9px}
html.st-seite .st-person .mh{border-radius:50%}
.st-person img.mh{object-fit:cover;object-position:50% 30%;padding:0}
html.st-seite .st-vertrauen{border-radius:var(--s-r);border:1.5px solid var(--s-linie);overflow:hidden}
html.st-seite .tm-seite .an{border-radius:10px}

/* Studio-Held: die Werkbank. Terminal und entstehende App auf Millimeterpapier, mit Schnittmarken (Max, 04.11.: Studio-Vibe, Bauen statt fertige Apps) */
.st-held-werk{position:relative;margin-top:clamp(48px,6vw,80px);padding:clamp(18px,2.4vw,32px);border-radius:var(--s-r,22px);
  background-color:#ece6d8;
  background-image:linear-gradient(rgba(21,20,19,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(21,20,19,.07) 1px,transparent 1px),linear-gradient(rgba(21,20,19,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(21,20,19,.035) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;background-position:-1px -1px}
.st-held-werk::before{content:"Werkbank · läuft gerade";position:absolute;top:-11px;left:24px;padding:2px 10px;border-radius:999px;background:var(--s-tinte);color:var(--s-grund);font:12px/1.6 var(--s-mono);text-transform:uppercase;letter-spacing:.04em}
.st-held-werk::after{content:"";position:absolute;inset:8px;pointer-events:none;border-radius:calc(var(--s-r,22px) - 6px);
  background:
    linear-gradient(var(--s-akzent),var(--s-akzent)) top left/18px 1.5px no-repeat,linear-gradient(var(--s-akzent),var(--s-akzent)) top left/1.5px 18px no-repeat,
    linear-gradient(var(--s-akzent),var(--s-akzent)) top right/18px 1.5px no-repeat,linear-gradient(var(--s-akzent),var(--s-akzent)) top right/1.5px 18px no-repeat,
    linear-gradient(var(--s-akzent),var(--s-akzent)) bottom left/18px 1.5px no-repeat,linear-gradient(var(--s-akzent),var(--s-akzent)) bottom left/1.5px 18px no-repeat,
    linear-gradient(var(--s-akzent),var(--s-akzent)) bottom right/18px 1.5px no-repeat,linear-gradient(var(--s-akzent),var(--s-akzent)) bottom right/1.5px 18px no-repeat}
.st-held-werk .st-terminal{position:relative;z-index:1}
.st-held-werk .tm-fenster{box-shadow:0 30px 60px -34px rgba(21,20,19,.55)}
.st-held-werk .tm-app{box-shadow:0 30px 60px -34px rgba(21,20,19,.35)}
.st-werk-fuss{position:relative;z-index:1;margin:14px 0 0}
.st-held:has(.st-held-werk){padding-top:calc(44px + env(safe-area-inset-top,0px) + clamp(40px,5vw,64px))}
.st-held:has(.st-held-werk) h1{font-size:clamp(44px,6vw,92px)}
.st-held:has(.st-held-werk) .st-held-text .st-unter{margin-top:22px}
.st-held:has(.st-held-werk) .st-held-text{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.st-held:has(.st-held-werk) .st-held-text .st-knoepfe{grid-column:2;grid-row:3;margin:0}
.st-held:has(.st-held-werk) .st-held-text .st-fein{grid-column:2;grid-row:4}
.st-held-werk{margin-top:clamp(32px,4vw,52px)}
.st-werk-unten{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;margin-top:16px}
.st-werk-unten .st-werk-fuss{margin:0}
.st-werk-punkte{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0!important;font-size:14.5px}
@media (max-width:860px){.st-held:has(.st-held-werk) .st-held-text .st-knoepfe{margin-top:24px}}

/* Werkbank in Liquid Glass (Max, 04.11.): Terminal als dunkles Rauchglas, App als helles Glas, weiche Farbflächen dahinter */
.st-held-werk .st-terminal{isolation:isolate}
.st-held-werk .st-terminal::before{content:"";position:absolute;z-index:-1;inset:-6% -4%;pointer-events:none;filter:blur(40px);opacity:.9;
  background:radial-gradient(32% 46% at 22% 40%,rgba(224,52,26,.42),transparent 70%),radial-gradient(30% 44% at 74% 62%,rgba(90,140,200,.45),transparent 70%),radial-gradient(26% 36% at 52% 18%,rgba(255,190,120,.5),transparent 70%)}
.st-held-werk .tm-fenster{position:relative;border:0;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,rgba(30,28,26,.9),rgba(14,13,12,.86));-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(21,20,19,.65)}
.st-held-werk .tm-fenster::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(150deg,rgba(255,255,255,.4),rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.st-held-werk .tm-kopf{border-bottom-color:rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.st-held-werk .tm-kopf i{background:rgba(255,255,255,.18)}
.st-held-werk .tm-kopf i:first-child{background:var(--s-akzent)}
.st-held-werk .tm-ein{border-top-color:rgba(255,255,255,.07)}
.st-held-werk .tm-app{position:relative;border:0;border-radius:24px;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.7),rgba(255,255,255,.42) 50%,rgba(255,255,255,.55));-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 30px 60px -30px rgba(21,20,19,.45)}
.st-held-werk .tm-app::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(150deg,rgba(255,255,255,1),rgba(255,255,255,.2) 40%,rgba(21,20,19,.06) 65%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.st-held-werk .tm-app-kopf{border-bottom:1px solid rgba(21,20,19,.1)}
.st-held-werk .tm-seite{border-right-color:rgba(21,20,19,.08)}
.st-held-werk .tm-seite .an{border-radius:12px}
.st-held-werk .tm-zahlen div{border:0;border-radius:16px;background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(21,20,19,.06),0 8px 18px -12px rgba(21,20,19,.3)}
.st-held-werk .tm-liste{border-top:1px solid rgba(21,20,19,.14)}
.st-held-werk .tm-ki{border-radius:16px;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(21,20,19,.05)}
@media (prefers-reduced-transparency:reduce){.st-held-werk .tm-fenster{background:#1a1918}.st-held-werk .tm-app{background:#faf8f3}}

/* Vertrauensleiste als vier weiche Karten statt Tabelle, mit Luft bis zum Abschnitts-Strich (Max, 04.11.) */
html.st-seite .st-vertrauen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border:0;border-radius:0;overflow:visible;margin:clamp(8px,1.5vw,16px) 0 clamp(56px,7vw,96px)}
html.st-seite .st-vertrauen div{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:18px 18px;border:0!important;border-radius:20px;
  background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(255,255,255,.46));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(21,20,19,.06),0 14px 30px -22px rgba(21,20,19,.45);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
html.st-seite .st-vertrauen div:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(21,20,19,.06),0 20px 36px -22px rgba(21,20,19,.5)}
html.st-seite .st-vertrauen div::before{content:"";grid-row:1/3;width:30px;height:30px;border-radius:50%;background:var(--s-akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 6px 14px -6px rgba(224,52,26,.6)}
html.st-seite .st-vertrauen strong{grid-column:2;font-size:15.5px;line-height:1.25}
html.st-seite .st-vertrauen span{grid-column:2;font-size:13.5px;line-height:1.35}
@media (max-width:860px){html.st-seite .st-vertrauen{grid-template-columns:1fr 1fr;gap:10px}html.st-seite .st-vertrauen div{padding:14px}html.st-seite .st-vertrauen div:nth-child(n){border:0!important}}
@media (max-width:420px){html.st-seite .st-vertrauen{grid-template-columns:1fr}}
/* Studio: Preise kurz (ganze Pakete als Link zu /preise) */
.st-pakete-kurz .st-paket{text-decoration:none;color:var(--s-tinte);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.st-pakete-kurz .st-paket:hover{transform:translateY(-3px)}
.st-pakete-kurz .st-preis{margin-top:auto}
.st-pakete-kurz .st-paket.hervor{color:var(--s-grund)}
.st-honig{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Reiter der echten App-Fenster auf Papier (Studio, /agentur): dunkle Schrift statt der hellen für blaue Seiten */
html.st-seite .echt-reiter button{color:var(--s-tinte);background:rgba(21,20,19,.07)}
html.st-seite .echt-reiter button:hover{background:rgba(21,20,19,.14);color:var(--s-tinte)}
html.st-seite .echt-reiter button[aria-selected="true"]{background:var(--s-tinte);color:var(--s-grund)}
html.st-seite .echt-hinweis{color:var(--s-zweit)}

/* Zusagen mit Vertragsstelle und nachprüfbare Messwerte (12.11.2026) */
.st-zusage-unter{margin:-6px 0 22px;max-width:60ch}
.st-zusagen{grid-template-columns:repeat(3,1fr);row-gap:30px}
.st-zusagen small{margin-top:auto;padding-top:6px;font:500 12px/1.3 var(--s-mono,ui-monospace,Menlo,monospace);letter-spacing:.04em;text-transform:uppercase;color:var(--s-zweit);opacity:.8}
.st-gemessen{margin-top:48px;padding:26px 28px;border-radius:24px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--s-haar)}
.st-gemessen ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.st-gemessen li{display:flex;flex-direction:column;gap:4px}
.st-gemessen b{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;line-height:1}
.st-gemessen li span{font-size:14.5px;line-height:1.4;color:var(--s-zweit)}
@media (max-width:900px){.st-zusagen{grid-template-columns:1fr 1fr}.st-gemessen ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.st-zusagen,.st-gemessen ul{grid-template-columns:1fr}.st-gemessen{padding:22px 20px}}

/* Gebaut mit: Schriftzüge statt fremder Logos (12.11.2026) */
.st-gebaut{margin-top:44px;padding-top:20px;border-top:1.5px solid var(--s-linie)}
.st-gebaut ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 24px}
.st-gebaut li{display:flex;flex-direction:column;gap:4px}
.st-gebaut b{font-size:clamp(18px,1.7vw,22px);letter-spacing:-.01em;line-height:1.15}
.st-gebaut small{font-size:14px;line-height:1.4;color:var(--s-zweit)}
.st-gebaut em{display:block;margin-top:16px;font-style:normal;font-size:13.5px;color:var(--s-zweit)}
@media (max-width:900px){.st-gebaut ul{grid-template-columns:repeat(2,minmax(0,1fr))}}