/*
 * statechprint.de — Neuaufbau 2026 ("Prototyp neu").
 * Idea: a technical drawing, not a brochure. White paper, graphite ink, a millimetre grid as
 * texture, one signal colour (the brand orange) that only marks what you can do. Product
 * images are our own 3D renderings on white, proof is shown as real documents and screens.
 */
:root {
  --tinte: #15171a;
  --graphit: #23262b;
  --graphit-2: #2e3238;
  --stahl: #4a5058;
  --grau: #6b7079;
  --linie: #e2e4e8;
  --linie-dunkel: #3a3f46;
  --papier: #f5f6f7;
  --weiss: #ffffff;
  --signal: #ff9100;          /* brand orange: buttons, active states, one accent line */
  --signal-text: #b35c00;     /* orange as text on white (4.6 : 1) */
  --signal-zart: #fff4e6;
  --ok: #1f8a4c;

  --titel: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --breite: 1240px;
  --rand: clamp(16px, 4vw, 40px);
  --r: 4px;
  --r-gross: 8px;
  --schatten: 0 1px 2px rgba(21, 23, 26, .06), 0 8px 24px rgba(21, 23, 26, .07);
  --raster: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 24px 24px,
            linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 24px 24px;
  --raster-hell: linear-gradient(rgba(21, 23, 26, .045) 1px, transparent 1px) 0 0 / 24px 24px,
                 linear-gradient(90deg, rgba(21, 23, 26, .045) 1px, transparent 1px) 0 0 / 24px 24px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.62 var(--text); color: var(--tinte); background: var(--weiss); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: var(--tinte); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--signal-text); }
h1, h2, h3 { font-family: var(--titel); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.3vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.7rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--weiss); padding: 8px 14px; }
.springen:focus { left: 8px; }
[hidden] { display: none !important; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.band { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.band.papier { background: var(--papier); }
.band.raster { background: var(--papier); background-image: var(--raster-hell); }
.band.dunkel { background: var(--graphit); background-image: var(--raster); color: #c9ccd2; }
.band.dunkel h2, .band.dunkel h3 { color: var(--weiss); }
.band.eng { padding: 40px 0; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--stahl); margin-bottom: 18px; }
.kicker::before { content: ''; width: 22px; height: 2px; background: var(--signal); }
.dunkel .kicker, .held .kicker { color: #9aa0a8; }
.lead { font-size: 1.18rem; color: var(--stahl); max-width: 40em; }
.dunkel .lead { color: #b5b9c0; }
.kopf { max-width: 760px; margin-bottom: 52px; }
.mono { font-family: var(--mono); }
.leise { color: var(--grau); font-size: .9rem; }

/* ---------- buttons ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .95em 1.5em; border-radius: var(--r); font: 600 1rem/1.2 var(--text); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; min-height: 48px; }
.knopf:hover { transform: translateY(-1px); }
.knopf.signal { background: var(--signal); color: var(--tinte); }
.knopf.signal:hover { background: #ffa12e; color: var(--tinte); }
.knopf.rahmen { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf.rahmen:hover { background: var(--tinte); color: var(--weiss); }
.dunkel .knopf.rahmen, .held .knopf.rahmen { border-color: rgba(255, 255, 255, .55); color: var(--weiss); }
.dunkel .knopf.rahmen:hover, .held .knopf.rahmen:hover { background: var(--weiss); color: var(--tinte); }
.knopf.klein { padding: .55em 1em; min-height: 40px; font-size: .92rem; }
.knopf svg { width: 1.15em; height: 1.15em; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.textlink { font-weight: 600; text-decoration: none; display: inline-flex; gap: .4em; align-items: center; }
.textlink::after { content: '→'; color: var(--signal-text); transition: transform .15s; }
.textlink:hover::after { transform: translateX(3px); }

/* ---------- header ---------- */
.kopfleiste { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--linie); }
.kopfleiste .huelle { display: flex; align-items: center; gap: 28px; height: 72px; }
.wortmarke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); flex: none; }
.wortmarke img { width: auto; height: 38px; }
.wortmarke b { font: 700 1.15rem/1 var(--titel); letter-spacing: .04em; }
.wortmarke small { display: block; font: 500 .62rem/1 var(--mono); letter-spacing: .14em; color: var(--grau); margin-top: 4px; text-transform: uppercase; }
.navi { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.navi > a, .navi .gruppe > button { font: 500 .95rem/1 var(--text); color: var(--tinte); text-decoration: none; padding: 12px 12px; border: 0; background: none; cursor: pointer; border-radius: var(--r); display: inline-flex; gap: 5px; align-items: center; }
.navi > a:hover, .navi .gruppe > button:hover { background: var(--papier); color: var(--tinte); }
.navi > a[aria-current="page"], .navi .gruppe > button.aktiv { box-shadow: inset 0 -2px 0 var(--signal); border-radius: 0; }
.navi .gruppe { position: relative; }
.navi .gruppe > button svg { width: 14px; height: 14px; }
.navi .menue { position: absolute; top: calc(100% + 8px); left: -12px; width: 360px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: 0 24px 48px rgba(21, 23, 26, .16); padding: 8px; display: none; }
.navi .menue::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.navi .gruppe:hover .menue, .navi .gruppe:focus-within .menue { display: block; }
.navi .menue a { display: grid; grid-template-columns: 56px 1fr; gap: 0 12px; align-items: center; padding: 8px; border-radius: var(--r); text-decoration: none; color: var(--tinte); }
.navi .menue a:hover { background: var(--papier); }
.navi .menue img { grid-row: span 2; width: 56px; height: 42px; object-fit: cover; border-radius: 3px; background: var(--papier); }
.navi .menue strong { font-size: .95rem; }
.navi .menue span { font-size: .8rem; color: var(--grau); }
.kopfleiste .konto { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; text-decoration: none; padding: 10px 12px; color: var(--tinte); }
.kopfleiste .konto svg { width: 20px; height: 20px; }
.menueknopf { display: none; width: 46px; height: 46px; border: 1px solid var(--linie); background: var(--weiss); border-radius: var(--r); cursor: pointer; }
.menueknopf svg { width: 22px; height: 22px; }
@media (max-width: 1100px) {
  .menueknopf { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .kopfleiste .konto span { display: none; }
  .navi { position: fixed; left: 0; right: 0; bottom: 0; top: 72px; background: var(--weiss); flex-direction: column; align-items: stretch; padding: 12px var(--rand) 32px; overflow-y: auto; visibility: hidden; transform: translateX(100%); transition: transform .25s; margin: 0; }
  .navi.offen { visibility: visible; transform: none; }
  .navi > a:not(.knopf), .navi .gruppe > button { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--linie); border-radius: 0; box-shadow: none !important; }
  .navi .menue { position: static; display: block; width: auto; box-shadow: none; border: 0; padding: 4px 0 8px; }
  .navi .knopf { margin-top: 18px; }
  body.menue-offen { overflow: hidden; }
}

/* ---------- hero ---------- */
.held { position: relative; background: var(--tinte); background-image: var(--raster); color: var(--weiss); overflow: hidden; isolation: isolate; }
.held .huelle { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; min-height: min(78vh, 720px); padding-top: 56px; padding-bottom: 56px; }
.held h1 { color: var(--weiss); }
.held h1 .signal { color: var(--signal); }
.held .lead { color: #b9bdc4; }
.held .aktionen { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 34px; }
.spezifikation { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; border-top: 1px solid var(--linie-dunkel); }
.spezifikation div { padding: 14px 28px 0 0; margin-right: 28px; border-right: 1px solid var(--linie-dunkel); }
.spezifikation div:last-child { border-right: 0; margin-right: 0; }
.spezifikation b { display: block; font: 600 1.25rem/1.2 var(--mono); color: var(--weiss); }
.spezifikation span { font-size: .8rem; color: #8e939b; }
.held .medien { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--r-gross); overflow: hidden; border: 1px solid var(--linie-dunkel); background: #0f1012; }
.held .medien video, .held .medien img { width: 100%; height: 100%; object-fit: cover; }
.held .medien .massband { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; font: 500 .72rem/1 var(--mono); color: #8e939b; letter-spacing: .08em; }
.held.unter .huelle { min-height: 0; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); padding-top: 72px; padding-bottom: 72px; }
.held.unter h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.held.unter .medien { aspect-ratio: 4 / 3; }
.pfad { font: 500 .78rem/1 var(--mono); color: #8e939b; margin-bottom: 22px; letter-spacing: .06em; }
.pfad a { color: #c9ccd2; text-decoration: none; }
@media (max-width: 900px) { .held .huelle, .held.unter .huelle { grid-template-columns: 1fr; min-height: 0; } .spezifikation { grid-template-columns: 1fr 1fr 1fr; } .spezifikation div { padding-right: 10px; margin-right: 10px; } .spezifikation b { font-size: 1rem; } }

/* ---------- doors ---------- */
.tueren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; background: var(--weiss); }
.tuer { display: flex; flex-direction: column; padding: 30px 30px 28px; text-decoration: none; color: var(--tinte); border-right: 1px solid var(--linie); position: relative; transition: background .2s; }
.tuer:last-child { border-right: 0; }
.tuer:hover { background: var(--papier); color: var(--tinte); }
.tuer::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--signal); transition: width .3s; }
.tuer:hover::before { width: 100%; }
.tuer .nr { font: 600 .78rem/1 var(--mono); color: var(--grau); }
.tuer img { aspect-ratio: 16 / 10; object-fit: cover; margin: 18px 0 20px; border-radius: var(--r); background: var(--papier); }
.tuer p { color: var(--stahl); margin: 0 0 18px; }
.tuer .textlink { margin-top: auto; }
@media (max-width: 900px) { .tueren { grid-template-columns: 1fr; } .tuer { border-right: 0; border-bottom: 1px solid var(--linie); } .tuer:last-child { border-bottom: 0; } }

/* ---------- product cards ---------- */
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.raster-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .raster-2, .raster-3, .raster-4 { grid-template-columns: 1fr; } }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--tinte); transition: box-shadow .2s, border-color .2s; }
a.karte:hover { box-shadow: var(--schatten); border-color: #cfd2d7; color: var(--tinte); }
.karte .bild { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--papier); }
.karte .inhalt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.karte .inhalt p { color: var(--stahl); margin: 0; font-size: .95rem; }
.karte .daten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font: 500 .74rem/1 var(--mono); padding: 6px 8px; border: 1px solid var(--linie); border-radius: 3px; color: var(--stahl); background: var(--weiss); }
.dunkel .chip { border-color: var(--linie-dunkel); color: #b5b9c0; background: transparent; }
.dunkel .karte { background: var(--graphit-2); border-color: var(--linie-dunkel); color: #c9ccd2; }
.dunkel .karte .inhalt p { color: #a9adb4; }
.bu { font-size: .8rem; color: var(--grau); margin-top: 8px; font-family: var(--mono); }

/* ---------- split ---------- */
.geteilt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.geteilt.breit-links { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.geteilt.umgekehrt > :first-child { order: 2; }
.rahmenbild { border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; background: var(--weiss); }
.rahmenbild img, .rahmenbild video { width: 100%; }
.dunkel .rahmenbild { border-color: var(--linie-dunkel); }
@media (max-width: 900px) { .geteilt, .geteilt.breit-links { grid-template-columns: 1fr; } .geteilt.umgekehrt > :first-child { order: 0; } }
.punkte { list-style: none; padding: 0; margin: 0 0 1.4em; }
.punkte li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--linie); }
.dunkel .punkte li { border-color: var(--linie-dunkel); }
.punkte li::before { content: ''; position: absolute; left: 2px; top: 19px; width: 12px; height: 7px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }
.punkte li b { font-weight: 600; }

/* ---------- process ---------- */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); counter-reset: s; border-top: 2px solid var(--tinte); }
.ablauf li { padding: 20px 18px 0 0; counter-increment: s; position: relative; }
.ablauf li::before { content: counter(s, decimal-leading-zero); font: 600 .8rem/1 var(--mono); color: var(--signal-text); display: block; margin-bottom: 12px; }
.ablauf li::after { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--tinte); }
.ablauf b { display: block; font: 700 1.02rem/1.25 var(--titel); margin-bottom: 6px; }
.ablauf span { font-size: .9rem; color: var(--stahl); display: block; }
@media (max-width: 960px) { .ablauf { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } }
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr 1fr; } }

/* ---------- figures ---------- */
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.zahlen div { padding: 26px 20px 24px 0; border-right: 1px solid var(--linie); padding-left: 20px; }
.zahlen div:first-child { padding-left: 0; }
.zahlen div:last-child { border-right: 0; }
.zahlen b { display: block; font: 600 clamp(1.6rem, 3vw, 2.3rem)/1.1 var(--mono); letter-spacing: -.02em; }
.zahlen b small { font-size: .5em; color: var(--grau); margin-left: 4px; }
.zahlen span { font-size: .88rem; color: var(--stahl); }
@media (max-width: 760px) { .zahlen { grid-template-columns: 1fr 1fr; } .zahlen div { padding-left: 0 !important; } .zahlen div:nth-child(2) { border-right: 0; } .zahlen div:nth-child(-n+2) { border-bottom: 1px solid var(--linie); } }

/* ---------- screens (digitalisation) ---------- */
.bildschirm { border-radius: 10px; overflow: hidden; border: 1px solid var(--linie-dunkel); background: #0f1012; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.bildschirm .leiste { height: 26px; display: flex; gap: 6px; align-items: center; padding: 0 10px; background: #1b1d21; }
.bildschirm .leiste i { width: 9px; height: 9px; border-radius: 50%; background: #3a3f46; }
.bildschirm img { width: 100%; }
.papier .bildschirm, .raster .bildschirm { border-color: var(--linie); box-shadow: var(--schatten); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; }
.tabs button { font: 600 .9rem/1 var(--text); padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--linie-dunkel); background: transparent; color: #b5b9c0; cursor: pointer; min-height: 44px; }
.tabs button[aria-selected="true"] { background: var(--signal); color: var(--tinte); border-color: var(--signal); }

/* ---------- packages ---------- */
.paket { border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 26px; background: var(--weiss); display: flex; flex-direction: column; gap: 10px; }
.paket.hervor { border: 2px solid var(--tinte); }
.paket .preis { font: 600 1.5rem/1.1 var(--mono); }
.paket .preis small { font: 400 .8rem var(--text); color: var(--grau); }
.paket ul { margin: 4px 0 12px; padding-left: 1.1em; color: var(--stahl); font-size: .94rem; }
.paket .knopf { margin-top: auto; }

/* ---------- FAQ ---------- */
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 600 1.08rem/1.35 var(--titel); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; font: 500 1.4rem/1 var(--mono); color: var(--signal-text); }
.fragen details[open] summary::after { content: '–'; }
.fragen details p { color: var(--stahl); margin: -6px 0 20px; max-width: 46em; }

/* ---------- forms ---------- */
.formular { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: clamp(20px, 4vw, 36px); }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.feld label, .feldtitel { font-weight: 600; font-size: .9rem; }
.feld input, .feld select, .feld textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid #c8ccd2; border-radius: var(--r); background: var(--weiss); color: var(--tinte); min-height: 48px; width: 100%; }
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(255, 145, 0, .35); }
.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--stahl); margin-bottom: 14px; }
.einwilligung input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--signal); flex: none; }
.ablage { display: block; border: 2px dashed #c8ccd2; border-radius: var(--r-gross); padding: 28px; text-align: center; cursor: pointer; background: var(--papier); background-image: var(--raster-hell); transition: border-color .15s; position: relative; }
.ablage:hover, .ablage.ueber { border-color: var(--signal); }
.ablage input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ablage svg { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--signal-text); }
.ablage small { display: block; color: var(--grau); margin-top: 4px; }
.hp { position: absolute !important; left: -9999px; }
.meldung { padding: 14px 16px; border-radius: var(--r); margin-bottom: 16px; font-weight: 500; }
.meldung.ok { background: #e8f5ed; color: #155d34; }
.meldung.fehler { background: #fbeceb; color: #8e2a20; }
.meldung.info { background: var(--signal-zart); color: #6b3a00; font-weight: 400; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.slots button { font: inherit; text-align: left; padding: 10px 12px; border: 1px solid #c8ccd2; border-radius: var(--r); background: var(--weiss); cursor: pointer; min-height: 48px; }
.slots button small { display: block; color: var(--grau); font-size: .8rem; }
.slots button[aria-pressed="true"] { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }
.slots button[aria-pressed="true"] small { color: #b5b9c0; }

/* ---------- CTA ---------- */
.abschluss { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.abschluss .aktionen { display: flex; gap: 12px; flex-wrap: wrap; }
.abschluss .kontakt { font: 500 .9rem/1.8 var(--mono); color: #9aa0a8; }
.abschluss .kontakt a { color: var(--weiss); text-decoration: none; }
@media (max-width: 760px) { .abschluss { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.fuss { background: var(--tinte); color: #9aa0a8; font-size: .9rem; }
.fuss .huelle { padding-top: 64px; padding-bottom: 28px; }
.fuss .spalten { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.fuss h4 { font: 600 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--weiss); margin: 0 0 16px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 9px; }
.fuss a { color: #c9ccd2; text-decoration: none; }
.fuss a:hover { color: var(--signal); }
.fuss .wortmarke { color: var(--weiss); margin-bottom: 16px; }
.fuss .wortmarke small { color: #8e939b; }
.fuss address { font-style: normal; line-height: 1.75; }
.fuss .unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--linie-dunkel); margin-top: 48px; padding-top: 20px; font-size: .8rem; }
.fuss .unten nav { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px) { .fuss .spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss .spalten { grid-template-columns: 1fr; } }

/* Legal pages and the 404: one readable column. */
.rechtstext { max-width: 760px; }
.rechtstext h1 { margin: 10px 0 18px; hyphens: auto; overflow-wrap: break-word; }
.rechtstext h2 { font-size: 1.2rem; margin: 34px 0 10px; letter-spacing: -.01em; }
.rechtstext p, .rechtstext li { line-height: 1.65; }
.rechtstext p + p { margin-top: 10px; }
.rechtstext .meldung { margin: 18px 0; }
.rechtstext a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Embedded tools (Greifer-Check, Nest-Planer) bring their own styles from /hauptseite/*.css. */
.band.werkzeug { padding-top: 48px; }
.vorschau-hinweis[hidden] { display: none; }
.vorschau-hinweis { position: fixed; right: 10px; bottom: 10px; z-index: 90; font: 600 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--signal); color: var(--tinte); padding: 7px 10px; border-radius: 3px; box-shadow: var(--schatten); }

@media (prefers-reduced-motion: reduce) { video[autoplay] { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .einblenden { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
  .einblenden.sichtbar { opacity: 1; transform: none; }
}
.tabelle-sp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle-sp th, .tabelle-sp td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle-sp th { font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); border-bottom: 2px solid var(--tinte); }

/* ---------- 3D calculator ---------- */
.rechner-kopf .huelle { padding-bottom: 120px !important; }
.r3d { margin-top: -90px; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; }
.r3d-buehne { position: relative; aspect-ratio: 21 / 9; min-height: 380px; border-radius: var(--r-gross); overflow: hidden; background: #1b1d21; background-image: var(--raster); border: 1px solid var(--linie-dunkel); box-shadow: 0 24px 60px rgba(21, 23, 26, .28); }
.r3d-buehne canvas { width: 100% !important; height: 100% !important; display: block; touch-action: none; }
.r3d-ablage { position: absolute; inset: 18px; display: flex; flex-direction: column; justify-content: center; background: rgba(27, 29, 33, .7); border-color: #4a5058; color: #e6e8eb; background-image: none; }
.r3d-ablage small { color: #9aa0a8; }
.r3d-ablage[hidden] { display: none; }
.r3d-laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; background: rgba(21, 23, 26, .7); font-weight: 600; }
.kreisel { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #4a5058; border-top-color: var(--signal); animation: kreis .8s linear infinite; }
@keyframes kreis { to { transform: rotate(360deg); } }
.r3d-werkzeug { position: absolute; top: 12px; left: 12px; display: flex; gap: 4px; flex-wrap: wrap; }
.r3d-werkzeug button { font: 600 .8rem/1 var(--text); padding: 9px 11px; border-radius: 3px; border: 1px solid #4a5058; background: rgba(21, 23, 26, .8); color: #e6e8eb; cursor: pointer; min-height: 36px; }
.r3d-werkzeug button[aria-pressed="true"] { background: var(--signal); color: var(--tinte); border-color: var(--signal); }
.r3d-masse { position: absolute; left: 12px; right: 12px; bottom: 12px; font-size: .78rem; color: #c9ccd2; background: rgba(21, 23, 26, .8); padding: 7px 10px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkknopf { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinte); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.r3d-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .r3d-unten { grid-template-columns: 1fr; } .r3d-buehne { aspect-ratio: 4 / 3; min-height: 300px; } }
.wahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wahl label { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid #c8ccd2; border-radius: var(--r); cursor: pointer; font-weight: 600; font-size: .9rem; }
.wahl label small { font: 500 .74rem/1.2 var(--mono); color: var(--grau); }
.wahl input { position: absolute; opacity: 0; }
.wahl label:has(input:checked) { border-color: var(--tinte); box-shadow: inset 0 -3px 0 var(--signal); }
@media (max-width: 520px) { .wahl { grid-template-columns: 1fr 1fr; } }
.r3d-preis { background: var(--tinte); color: #c9ccd2; border-radius: var(--r-gross); padding: 28px; background-image: var(--raster); min-height: 100%; }
.r3d-preis h3 { color: var(--weiss); }
.r3d-leer p { color: #9aa0a8; }
.preiszeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie-dunkel); }
.preiszeile b { font: 600 1.2rem/1 var(--mono); color: var(--weiss); }
.preiszeile.haupt b { font-size: 2.4rem; color: var(--signal); }
.preiszeile span { font-size: .9rem; }
.r3d-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.r3d-werte div { border: 1px solid var(--linie-dunkel); border-radius: var(--r); padding: 10px 12px; }
.r3d-werte span { display: block; font-size: .74rem; color: #8e939b; }
.r3d-werte b { font: 600 1rem/1.3 var(--mono); color: var(--weiss); }
.r3d-hinweise { margin: 12px 0 0; padding-left: 1.1em; font-size: .88rem; color: #b5b9c0; }
.r3d-hinweise li { margin-bottom: 4px; }
.r3d-preis .warnung { background: rgba(255, 145, 0, .12); color: #ffc680; padding: 10px 12px; border-radius: var(--r); margin-top: 12px; font-size: .9rem; }
.wahl label { position: relative; }
.band:not(.dunkel) .tabs button { border-color: var(--linie); color: var(--stahl); }
.band:not(.dunkel) .tabs button[aria-selected="true"] { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }

/* ---------- order process as drawing sheets ---------- */
.ablauf.zeichnung { border-top: 0; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ablauf.zeichnung li { padding: 0; }
.ablauf.zeichnung li::before, .ablauf.zeichnung li::after { display: none; }
.ablauf.zeichnung svg { width: 100%; height: auto; display: block; background: var(--weiss); border-radius: 2px; margin-bottom: 14px; box-shadow: var(--schatten); }
@media (max-width: 900px) { .ablauf.zeichnung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ablauf.zeichnung { grid-template-columns: 1fr; } }
.leistungen .paket { background: var(--weiss); }
.leistungen .nr { font: 600 .8rem/1 var(--mono); color: var(--signal-text); border-bottom: 2px solid var(--signal); align-self: flex-start; padding-bottom: 6px; }
.leistungen p { color: var(--stahl); margin: 0; font-size: .96rem; }

/* ---------- forms page: three ways in ---------- */
a.paket { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.paket:hover { border-color: var(--tinte); box-shadow: var(--schatten); }
a.paket p { color: var(--stahl); margin: 0; }

/* ---------- customer account ---------- */
.mono { font-family: var(--mono); font-size: .9em; }
.rechts { text-align: right !important; }
.konto-band { background: var(--papier); background-image: var(--raster-hell); min-height: 70vh; }
.konto-anmelden { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.konto-anmelden h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.konto { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.konto > *, .konto-navi nav { min-width: 0; }
.konto[hidden], .konto-anmelden[hidden] { display: none; }
.konto-navi { position: sticky; top: 92px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.konto-kunde b { display: block; font: 700 1rem/1.3 var(--titel); }
.konto-kunde span { font-size: .8rem; color: var(--grau); }
.konto-navi nav { display: flex; flex-direction: column; gap: 2px; }
.konto-navi nav button { font: 600 .94rem/1.2 var(--text); text-align: left; padding: 11px 12px; border: 0; border-radius: var(--r); background: transparent; color: var(--stahl); cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.konto-navi nav button:hover { background: var(--papier); }
.konto-navi nav button[aria-selected="true"] { background: var(--tinte); color: var(--weiss); }
.zaehler { font: 600 .72rem/1 var(--mono); font-style: normal; background: var(--signal); color: var(--tinte); padding: 4px 6px; border-radius: 10px; }
.konto-inhalt { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: clamp(20px, 3.5vw, 36px); min-width: 0; }
.konto-inhalt h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 0; }
.konto-kacheln .paket { font: inherit; text-align: left; cursor: pointer; color: inherit; }
.konto-kacheln .paket:hover { border-color: var(--tinte); }
.konto-kacheln b.gross { font: 600 2.2rem/1 var(--mono); }
.konto-kacheln span:last-child { color: var(--stahl); font-size: .92rem; }
.auftrag { border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 20px; margin-bottom: 18px; }
.auftrag header { display: flex; justify-content: space-between; gap: 16px; align-items: start; flex-wrap: wrap; margin-bottom: 18px; }
.auftrag h3 { margin: 0; }
.auftrag header .kicker { margin-bottom: 8px; }
.stationen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.stationen li { position: relative; padding: 18px 6px 0 0; font-size: .82rem; border-top: 3px solid var(--linie); }
.stationen li::before { content: ''; position: absolute; top: -8px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--weiss); border: 2px solid #c8ccd2; }
.stationen li b { display: block; font-size: .86rem; }
.stationen li span { color: var(--grau); font-family: var(--mono); font-size: .76rem; }
.stationen li.fertig { border-top-color: var(--tinte); }
.stationen li.fertig::before { background: var(--tinte); border-color: var(--tinte); }
.stationen li.aktiv { border-top-color: var(--signal); }
.stationen li.aktiv::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(255, 145, 0, .25); }
.stationen li.aktiv span { color: var(--signal-text); font-weight: 600; }
.mappe-kopf { display: flex; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--tinte); padding-bottom: 18px; margin-bottom: 8px; }
.mappe-kopf img { flex: none; }
.mappe-kopf h2 { margin: 0 0 4px; }
.mappe-kopf p { margin: 0; color: var(--stahl); }
.mappe-kopf .kicker { margin-bottom: 8px; }
.auswahl td { vertical-align: middle; }
.auswahl small { color: var(--grau); }
.auswahl input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--signal); }
.auswahl .menge { width: 72px; font: inherit; padding: 8px; border: 1px solid #c8ccd2; border-radius: var(--r); }
.auswahl tr.aus td:not(:first-child) { opacity: .45; }
.mappe-summe { display: flex; justify-content: flex-end; gap: 28px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.mappe-summe span { display: block; font-size: .8rem; color: var(--grau); }
.mappe-summe b { font: 600 1.1rem/1.2 var(--mono); }
.mappe-summe .haupt b { font-size: 1.6rem; color: var(--signal-text); }
.prototypen .paket p { color: var(--stahl); margin: 0; font-size: .94rem; }
.prototypen .chip { align-self: flex-start; }
.prototypen .knopf { margin-top: auto; }
@media (max-width: 900px) {
  .konto, .konto-anmelden { grid-template-columns: minmax(0, 1fr); }
  .konto-navi { position: static; }
  .konto-navi nav { flex-direction: row; overflow-x: auto; }
  .konto-navi nav button { white-space: nowrap; gap: 8px; }
  .stationen { grid-template-columns: 1fr; }
  .stationen li { border-top: 0; border-left: 3px solid var(--linie); padding: 0 0 14px 20px; }
  .stationen li::before { top: 2px; left: -8px; }
  .stationen li.fertig { border-left-color: var(--tinte); }
  .stationen li.aktiv { border-left-color: var(--signal); }
  .auswahl thead { display: none; }
  .auswahl tr { display: grid; grid-template-columns: 32px 1fr auto; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .auswahl td { border: 0; padding: 0; }
  .auswahl td:nth-child(2) { grid-column: 2 / 4; }
  .auswahl td:nth-child(3) { grid-column: 2; }
  .auswahl td:nth-child(4) { display: none; }
}
#slots { display: flex; flex-direction: column; gap: 6px; }
.slot-tag { display: grid; grid-template-columns: 92px repeat(4, minmax(0, 1fr)); gap: 6px; align-items: center; }
.slot-tag span { font: 600 .86rem/1 var(--mono); color: var(--stahl); }
.slot-tag button { font: 500 .9rem/1 var(--mono); padding: 0 6px; min-height: 44px; border: 1px solid #c8ccd2; border-radius: var(--r); background: var(--weiss); cursor: pointer; }
.slot-tag button:hover { border-color: var(--tinte); }
.slot-tag button[aria-pressed="true"] { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }
@media (max-width: 420px) { .slot-tag { grid-template-columns: repeat(4, minmax(0, 1fr)); } .slot-tag span { grid-column: 1 / -1; } }

/* ---------- Digitalisierung: funding, prototype, price table ---------- */
.leistungen a.paket h3 { margin: 4px 0 0; }
.foerderung { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; background: var(--tinte); background-image: var(--raster); color: #c9ccd2; border-radius: var(--r-gross); padding: clamp(20px, 3.5vw, 32px); border-left: 5px solid var(--signal); }
.foerderung h3 { color: var(--weiss); margin: 0 0 8px; }
.foerderung p { margin: 0; max-width: 62em; font-size: .95rem; }
.foerderung .kicker { color: #9aa0a8; margin-bottom: 10px; }
.ablauf.zeichnung.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prototyp-leiste { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; border-top: 2px solid var(--tinte); padding-top: 22px; }
.prototyp-leiste .daten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prototyp-preis b { display: block; font: 600 1.6rem/1.1 var(--mono); }
.prototyp-preis span { font-size: .84rem; color: var(--grau); }
.prototyp-leiste .aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.preistafel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 6px clamp(14px, 3vw, 28px) 10px; margin-bottom: 40px; overflow-x: auto; }
.preise td small { display: block; color: var(--grau); font-size: .84rem; margin-top: 2px; }
.preise tr.gruppe th { font: 700 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal-text); padding-top: 26px; border-bottom: 1px solid var(--tinte); }
.preise td.mono { white-space: nowrap; }
.markt h3 { margin-top: 0; }
.markt .tabelle-sp { font-size: .9rem; }
@media (max-width: 900px) {
  .ablauf.zeichnung.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prototyp-leiste, .foerderung { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ablauf.zeichnung.vier { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .preise thead { display: none; }
  .preise tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .preise tr.gruppe { display: block; padding: 0; border: 0; }
  .preise td { border: 0; padding: 0; }
  .preise td:first-child { grid-column: 1 / -1; }
  .preise td:nth-child(2) { color: var(--grau); }
  .preise td:nth-child(3), .preise td:nth-child(4) { text-align: left !important; }
  .preise td.leer { display: none; }
  .preise td:nth-child(4)::before { content: 'monatlich '; font-family: var(--text); color: var(--grau); font-size: .8rem; }
}
.kurzliste { list-style: none; margin: 8px 0 28px; padding: 0; counter-reset: k; }
.kurzliste li { counter-increment: k; display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.kurzliste li::before { content: counter(k, decimal-leading-zero); font: 600 .82rem/1.6 var(--mono); color: var(--signal-text); grid-row: span 2; }
.kurzliste b { font: 700 1.02rem/1.3 var(--titel); }
.kurzliste span { color: var(--stahl); font-size: .92rem; }
#digitalisierung .aktionen { display: flex; gap: 12px; flex-wrap: wrap; }
.markt td.mono { white-space: nowrap; }
.handys { display: flex; gap: 16px; justify-content: center; }
.handys img { width: min(46%, 240px); border-radius: 18px; border: 6px solid var(--tinte); box-shadow: var(--schatten); }
.pruefliste td:first-child { white-space: nowrap; }
@media (max-width: 640px) { .pruefliste td:first-child { white-space: normal; } }

/* Werkstoffkatalog (fertigung/werkstoffe.html, data from the ERP) */
.werkstoff-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; }
.werkstoff-filter .chip { cursor: pointer; border: 1px solid var(--linie); background: var(--weiss); font: 600 .82rem/1 var(--text); padding: 8px 12px; border-radius: 999px; }
.werkstoff-filter .chip[aria-pressed="true"] { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }
.werkstoff .farben { display: flex; flex-wrap: wrap; gap: 6px; }
.werkstoff .farbe { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); }
.werkstoff dl.werte { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 6px 0 4px; font-size: .86rem; }
.werkstoff dl.werte dt { color: var(--grau); }
.werkstoff dl.werte dd { margin: 0; font-family: var(--mono); font-size: .8rem; }
.werkstoff-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.werkstoff-fuss .preis { font: 600 1.05rem/1 var(--mono); }
.werkstoff[hidden] { display: none; }

/* Prototype viewer on statechprint.de (p.html via /p/<token>) */
.prototyp-seite { margin: 0; height: 100dvh; display: flex; flex-direction: column; background: #15171a; }
.prototyp-leiste-oben { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 14px; color: #fff; }
.prototyp-leiste-oben img { height: 34px; width: auto; }
.prototyp-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prototyp-titel b, .prototyp-titel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prototyp-titel b { font-size: .92rem; }
.prototyp-titel span { font-size: .76rem; color: rgba(255, 255, 255, .6); }
.prototyp-leiste-oben .knopf.rahmen { color: #fff; border-color: rgba(255, 255, 255, .3); }
.prototyp-buehne { flex: 1; display: flex; min-height: 0; }
.prototyp-buehne iframe { flex: 1; border: 0; width: 100%; background: #fff; }
.prototyp-fehler { margin: auto; max-width: 520px; padding: 24px; text-align: center; color: #fff; }
.prototyp-fehler a:not(.knopf) { color: #fff; }
.prototyp-feedback { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .4); display: flex; justify-content: flex-end; }
.prototyp-feedback[hidden] { display: none; }
.prototyp-feedback .formular { width: min(440px, 100%); height: 100%; overflow-y: auto; border-radius: 0; margin: 0; }
.pf-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pf-kopf h2 { font-size: 1.3rem; margin: 0; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 640px) { .prototyp-leiste-oben #p-vollbild { display: none; } }