/* Valtheon Marke, ein Stylesheet für alle Seiten (WEB-07/08, 09.10.2026).
   Farben nur aus den Token in produktlinie/MARKE-UND-NAMEN.md Abschnitt 3. Schriften lokal (SIL OFL),
   keine Abrufe bei Dritten. Großbuchstaben nur per text-transform, Lesetext mindestens 12 px. */
@font-face{font-family:"Space Grotesk";src:url("/space-grotesk.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url("/inter-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --v-bronze:#A9772F;--v-bronze-knopf:#7a561f;--v-bronze-text:#815a22;--v-bronze-tief:#855D22;--v-bronze-hell:#d9b77d;
  --v-papier:#F7F4EF;--v-tinte:#1F2226;--v-anthrazit:#23262B;--v-grau:#5E5A52;--v-linie:#E6E1D8;
  --v-night:#171b20;--v-night-2:#252c33;--v-gut:#2f7650;--v-achtung:#8a5a00;--v-fehler:#9a3e34;
  --weiss:#ffffff;
  --text:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  --titel:"Space Grotesk","Inter",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--v-papier);color:var(--v-tinte);font:400 17px/1.6 var(--text)}
img{max-width:100%;height:auto;display:block}
a{color:var(--v-bronze-text)}
a:hover{color:var(--v-tinte)}
:focus-visible{outline:3px solid var(--v-bronze-knopf);outline-offset:3px}
h1,h2,h3{font-family:var(--titel);font-weight:600;line-height:1.15;color:var(--v-tinte);margin:0 0 .5em}
h1{font-size:clamp(34px,5.4vw,56px);letter-spacing:-.015em}
h2{font-size:clamp(24px,3vw,32px)}
h3{font-size:19px}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:0 0 .4em}
table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--v-linie);vertical-align:top}
th{font-weight:600}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.schmal{max-width:780px}

/* Sprunglink */
.sprung{position:absolute;left:12px;top:-60px;z-index:20;background:var(--v-tinte);color:var(--weiss);padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.sprung:focus{top:12px;color:var(--weiss)}

/* Kopf */
.kopf{background:var(--v-night);color:var(--weiss)}
.kopf-in{display:flex;align-items:center;gap:16px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:10px;color:var(--weiss);text-decoration:none}
.marke svg{width:32px;height:32px;flex:none}
.wortmarke{font-family:var(--titel);font-weight:600;font-size:15px;letter-spacing:.24em;text-transform:uppercase}
.kopf nav{margin-left:auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.kopf nav a{color:var(--v-linie);text-decoration:none;font-size:15px}
.kopf nav a:hover,.kopf nav a[aria-current="page"]{color:var(--weiss);text-decoration:underline;text-underline-offset:5px}
.kopf nav a.ruf{color:var(--weiss);background:var(--v-bronze-knopf);padding:8px 16px;border-radius:999px;text-decoration:none}
.menue{display:none;margin-left:auto;background:transparent;color:var(--weiss);border:1px solid var(--v-linie);border-radius:8px;padding:8px 14px;font:600 14px var(--text)}

/* Kopfbereich einer Seite */
.held{background:var(--v-night);color:var(--weiss);padding:48px 0 64px}
.held h1{color:var(--weiss)}
.held h1 span{color:var(--v-bronze-hell)}
.held p{color:var(--v-linie);max-width:640px;font-size:18px}
.held .ober{color:var(--v-bronze-hell)}
.held figure img{border-radius:26px;border:1px solid var(--v-night-2)}
.ober{display:block;font:600 13px/1.4 var(--titel);letter-spacing:.18em;text-transform:uppercase;color:var(--v-bronze-text);margin:0 0 14px}
.plakette{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--v-gut);color:var(--weiss);text-decoration:none}
.held-raster{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}

/* Knöpfe */
.btn{display:inline-block;font:600 16px/1.2 var(--text);padding:14px 22px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-gold{background:var(--v-bronze-knopf);color:var(--weiss)}
.btn-gold:hover{background:var(--v-tinte);color:var(--weiss)}
.btn-linie{color:var(--v-tinte);border-color:var(--v-tinte);background:transparent}
.held .btn-linie{color:var(--weiss);border-color:var(--v-linie)}
.btn-linie:hover{background:var(--v-linie);color:var(--v-tinte)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--v-linie);color:var(--v-tinte);cursor:not-allowed}
.knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 0}

/* Abschnitte und Karten */
.abschnitt{padding:56px 0}
.abschnitt.weiss{background:var(--weiss)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.karte{background:var(--weiss);border:1px solid var(--v-linie);border-radius:16px;padding:24px;display:flex;flex-direction:column}
.karte p{color:var(--v-grau)}
.karte .mehr{margin-top:auto;font-weight:600}
.karte.dunkel{background:var(--v-tinte);border-color:var(--v-tinte);color:var(--weiss)}
.karte.dunkel h2,.karte.dunkel h3{color:var(--weiss)}
.karte.dunkel p{color:var(--v-linie)}
.status{align-self:flex-start;display:inline-block;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;margin:0 0 10px;border:1px solid currentColor}
.status.da{color:var(--v-gut)}
.status.bald{color:var(--v-achtung)}
.preis{font:600 32px/1.1 var(--titel);color:var(--v-tinte);margin:6px 0 4px}
.karte .preis{color:var(--v-tinte)}
.karte.dunkel .preis{color:var(--v-bronze-hell)}
.preiszeile{font-size:15px;color:var(--v-grau);margin:0 0 14px}
.steuer{font-size:14px;color:var(--v-grau);margin-top:16px}
.hinweis{background:var(--weiss);border:1px solid var(--v-linie);border-left:4px solid var(--v-bronze);border-radius:10px;padding:14px 18px;margin:16px 0}
.ehrlich{border-left-color:var(--v-gut)}
.haken{list-style:none;padding:0}
.haken li{padding-left:28px;position:relative}
.haken li::before{content:"✓";position:absolute;left:0;color:var(--v-gut);font-weight:700}

/* Text- und Pflichtseiten */
.seite{padding:48px 0 64px}
.seite h2{font-size:22px;margin-top:1.6em}
.stand{font-size:14px;color:var(--v-grau);margin-top:28px}
.liste dt{font-weight:600;margin-top:12px}
.liste dd{margin:4px 0 0 0;color:var(--v-grau)}
details{border-bottom:1px solid var(--v-linie);padding:10px 0}
summary{cursor:pointer;font-weight:600}

/* Bestellformular */
.formular{display:grid;gap:16px;max-width:640px}
.formular label{display:block;font-weight:600;margin:0 0 6px}
.formular input,.formular select,.formular textarea{width:100%;font:400 16px var(--text);padding:12px;border:1px solid var(--v-grau);border-radius:8px;background:var(--weiss);color:var(--v-tinte)}
.formular .check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.formular .check input{width:auto;margin-top:5px}
.pflicht{color:var(--v-fehler)}
.fehler{color:var(--v-fehler);font-weight:600}

/* Bilder der App */
.aufnahmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.aufnahmen figure{margin:0}
.aufnahmen img{border-radius:22px;border:1px solid var(--v-linie);background:var(--weiss)}
.aufnahmen figcaption{font-size:14px;color:var(--v-grau);margin-top:8px}

/* Kauf- und Bestellseiten (Klassen kw-*, Struktur von pruefen.mjs geprüft) */
.kw-held,.kw-block{padding:48px max(24px,calc((100% - 1072px)/2))}
.kw-held{background:var(--v-night);color:var(--weiss)}
.kw-held h1{color:var(--weiss)}
.kw-held p{color:var(--v-linie);max-width:680px;font-size:18px}
.kw-held .kw-ober{color:var(--v-bronze-hell)}
.kw-block.hell{background:var(--weiss)}
.kw-ober{display:block;font:600 13px/1.4 var(--titel);letter-spacing:.18em;text-transform:uppercase;color:var(--v-bronze-text);margin:0 0 14px}
.kw-einleitung{max-width:760px}
.kw-stufen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:20px 0}
.kw-karte{background:var(--weiss);border:1px solid var(--v-linie);border-radius:16px;padding:24px;display:flex;flex-direction:column}
.kw-block.hell .kw-karte{background:var(--v-papier)}
.kw-karte.betont{border:2px solid var(--v-bronze)}
.kw-preis{font:600 32px/1.1 var(--titel);margin:6px 0 4px}
.kw-preiszeile{font-size:15px;color:var(--v-grau);margin:0 0 12px}
.kw-vorbestellung,.kw-feinhinweis{font-size:15px;color:var(--v-grau)}
.kw-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.kw-knopf{display:inline-block;font:600 16px/1.2 var(--text);padding:13px 20px;border-radius:10px;text-decoration:none;background:var(--v-bronze-knopf);color:var(--weiss);border:0;cursor:pointer}
.kw-knopf:hover{background:var(--v-tinte);color:var(--weiss)}
.kw-knopf:disabled{background:var(--v-linie);color:var(--v-tinte);cursor:not-allowed}
.kw-knopf.zweit{background:transparent;color:var(--v-tinte);border:1px solid var(--v-tinte)}
.kw-steuer{font-size:14px;color:var(--v-grau)}
.kw-ehrlich{background:var(--weiss);border:1px solid var(--v-linie);border-left:4px solid var(--v-gut);border-radius:10px;padding:14px 18px;margin:16px 0}
.kw-liste,.kw-haken{padding-left:1.25em}
.kw-adresse{font-style:normal}
.kw-form{display:grid;gap:16px;max-width:640px}
.kw-form label{display:block;font-weight:600;margin:0 0 6px}
.kw-form input,.kw-form select,.kw-form textarea{width:100%;font:400 16px var(--text);padding:12px;border:1px solid var(--v-grau);border-radius:8px;background:var(--weiss);color:var(--v-tinte)}
.kw-form input[type=checkbox]{width:auto;margin:4px 10px 0 0}
.kw-form label:has(input[type=checkbox]){display:flex;align-items:flex-start}
.kw-pflicht{color:var(--v-fehler)}

/* Fuß */
.fuss{background:var(--v-night);color:var(--v-linie);font-size:15px;margin-top:0}
.fuss .wrap{padding-top:36px;padding-bottom:36px;display:grid;gap:14px}
.fuss a{color:var(--v-linie)}
.fuss a:hover{color:var(--weiss)}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.fuss .marke{margin-bottom:4px}

@media (max-width:860px){
  .held-raster{grid-template-columns:1fr}
  .menue{display:block}
  .kopf nav{display:none;width:100%;margin-left:0;flex-direction:column;align-items:flex-start;gap:14px;padding:10px 0 4px}
  .kopf nav.offen{display:flex}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  body{font-size:16px}
  .btn{width:100%;text-align:center}
  th,td{padding:8px 6px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.kopf,.fuss,.sprung,.menue{display:none}}