/* Valtheon Dachmarken-Website. Design-Basis EAOS-DS-001.
   Schriften lokal (SIL OFL), keine externen Aufrufe. */

@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --c-ink:#1F2226; --c-anthra:#23262B; --c-slate:#5E5A52; --c-muted:#94908A;
  --c-line:#E6E1D8; --c-nebel:#F7F4EF; --c-weiss:#FFFFFF;
  --c-bronze:#A9772F; --c-bronze-tief:#855D22; --c-bronze-hell:#F1E9DD;
  --accent:var(--c-bronze); --accent-tief:var(--c-bronze-tief); --accent-hell:var(--c-bronze-hell);
  --accent-kontrasttext:#FFFFFF;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --r-sm:4px;--r-md:8px;--r-lg:14px;--r-pill:999px;
  --sh-1:0 1px 2px rgba(31,34,38,.06);--sh-2:0 4px 16px rgba(31,34,38,.08);--sh-3:0 12px 32px rgba(31,34,38,.10);
  --container:1180px;
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-text);color:var(--c-ink);background:var(--c-weiss);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--c-ink);letter-spacing:-.01em}
.t-display{font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.02em}
.t-h1{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.t-h2{font-size:1.5rem}.t-h3{font-size:1.2rem}
.t-lead{font-size:1.18rem;color:var(--c-slate);line-height:1.55}
.t-small{font-size:.875rem}
p{margin-bottom:var(--s-3)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-999px;top:0;background:var(--c-ink);color:#fff;padding:10px 16px;border-radius:var(--r-md);z-index:100}
.skip:focus{left:var(--s-4);top:var(--s-4)}

/* Kopfzeile / Navigation */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:var(--s-3);padding-bottom:var(--s-3)}
.lockup{display:flex;align-items:center;gap:10px}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--c-ink)}
.site-head nav{display:flex;gap:var(--s-5);align-items:center}
.site-head nav a{color:var(--c-slate);font-weight:500;font-size:.95rem}
.site-head nav a:hover{color:var(--accent);text-decoration:none}
.nav-links{display:flex;gap:var(--s-5);align-items:center}
@media(max-width:720px){.nav-links{display:none}}

/* Schaltflaechen */
.btn{font-family:var(--font-text);font-weight:600;font-size:.98rem;padding:13px 24px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-primary{background:var(--accent);color:var(--accent-kontrasttext)}
.btn-primary:hover{background:var(--accent-tief);text-decoration:none}
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:var(--accent-hell);text-decoration:none}
.btn-light{background:#fff;color:var(--c-ink)}
.btn-light:hover{background:var(--c-nebel);text-decoration:none}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Hero */
.hero{background:var(--c-ink);color:#fff;padding:var(--s-9) 0}
.hero h1{color:#fff}
.hero .eyebrow{color:var(--c-bronze);background:rgba(169,119,47,.16)}
.hero .t-lead{color:#D9D3C8;max-width:660px;margin-top:var(--s-5)}
.hero .cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-7)}
.badge-row{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-7)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);font-size:.82rem;font-weight:600;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16)}

/* Abschnitte */
section.block{padding:var(--s-9) 0;border-bottom:1px solid var(--c-line)}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-hell);padding:5px 12px;border-radius:var(--r-pill);margin-bottom:var(--s-4)}
.section-intro{max-width:720px;margin-bottom:var(--s-7)}
.section-intro p{color:var(--c-slate)}

/* Zwei-Ebenen-Kasten */
.layer{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.layer .box{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-5);background:var(--c-nebel)}
.layer .box.base{border-left:4px solid var(--c-bronze)}
.layer .box.mark{border-left:4px solid var(--c-slate)}
.layer .box h4{margin-bottom:var(--s-2);font-size:1.05rem}
.layer .box p{color:var(--c-slate);font-size:.95rem;margin:0}
@media(max-width:760px){.layer{grid-template-columns:1fr}}

/* Markenkarten */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s-5)}
.card{border:1px solid var(--c-line);border-top:4px solid var(--accent);border-radius:var(--r-lg);padding:var(--s-6);background:#fff;box-shadow:var(--sh-1);transition:.15s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.card .tag{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:var(--accent);background:var(--accent-hell);padding:4px 11px;border-radius:var(--r-pill);margin-bottom:var(--s-4);align-self:flex-start}
.card .tag .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.card h3{margin-bottom:var(--s-2)}
.card p{font-size:.96rem;color:var(--c-slate);margin-bottom:var(--s-4)}
.card .foot-row{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--c-line);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.card .status{font-size:.8rem;font-weight:600;color:var(--c-slate)}
.card .status.live{color:var(--accent)}
.card a.more{font-weight:600;font-size:.92rem;color:var(--accent)}
.card .soon{font-size:.85rem;color:var(--c-muted);font-weight:500}

/* Prinzipien */
.princ{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-5)}
.princ .p{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-6);background:var(--c-nebel)}
.princ .p h3{margin-bottom:var(--s-2);font-size:1.15rem}
.princ .p p{color:var(--c-slate);font-size:.95rem;margin:0}
.note{display:flex;gap:var(--s-3);border:1px solid var(--c-line);border-left:4px solid var(--accent);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);background:var(--accent-hell);align-items:flex-start;margin-top:var(--s-6)}
.note svg{flex:0 0 auto;width:22px;height:22px;color:var(--accent)}
.note p{margin:0;font-size:.95rem;color:var(--c-ink)}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:start}
.contact-grid .cbox{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-6);background:#fff}
.contact-grid .cbox h3{margin-bottom:var(--s-3)}
.contact-grid .cbox p{color:var(--c-slate);margin-bottom:var(--s-2)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* Fusszeile */
.site-foot{background:var(--c-ink);color:#C9C4BB;padding:var(--s-8) 0 var(--s-7)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:var(--s-6);justify-content:space-between}
.site-foot .wordmark{color:#fff}
.site-foot a{color:#E4DFD6}
.site-foot .cols{display:flex;gap:var(--s-8);flex-wrap:wrap}
.site-foot h4{color:#fff;font-size:.9rem;margin-bottom:var(--s-3)}
.site-foot ul{list-style:none}
.site-foot li{margin-bottom:var(--s-2);font-size:.92rem}
.site-foot .legal{width:100%;border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s-6);padding-top:var(--s-5);font-size:.85rem;color:#9a968f;display:flex;gap:var(--s-4);flex-wrap:wrap;justify-content:space-between}

/* Rechtstext-Seiten */
.legal-page{padding:var(--s-8) 0}
.legal-page .wrap{max-width:800px}
.legal-page h1{margin-bottom:var(--s-3)}
.legal-page h2{font-size:1.25rem;margin:var(--s-7) 0 var(--s-3)}
.legal-page p{color:var(--c-ink);margin-bottom:var(--s-3)}
.legal-page .muted{color:var(--c-slate)}
.legal-page address{font-style:normal;line-height:1.7}
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--s-5);color:var(--c-slate);font-weight:600}
.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}