/* ==========================================================
   tech.dado — style.css  (Design 2, seit 19.10.2026)
   Seitenspezifisch fuer die Unterseiten (Impressum, Datenschutz, 404).
   Kopfzeile, Navigation, Knoepfe und Farben stehen in base.css
   und werden VOR dieser Datei geladen. Dort aendern, nicht hier.
   (Die Bausteine der alten Boost-Stick-Seiten sind am 19.10.2026 raus,
   sie liegen in den Website-Sicherungen.)
   ========================================================== */

body{line-height:1.6}

code{background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:6px; padding:2px 7px;
  font-family:var(--mono); font-size:.88em}

/* ===== Seitenkopf ===== */
.page-head{padding:clamp(56px,9vw,104px) 0 clamp(28px,4vw,44px); text-align:center}
.page-head h1{margin:0 0 14px; font-size:clamp(40px,7vw,76px); line-height:1; font-weight:800; letter-spacing:-.045em;
  background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; padding-bottom:.06em}
.page-head p{color:var(--muted); max-width:620px; margin:0 auto; font-size:18px}
.crumb{display:flex; width:max-content; gap:8px; margin:0 auto 22px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.crumb a{color:var(--silber); text-decoration:none}

/* ===== Abschnitte ===== */
section{padding:clamp(32px,5vw,56px) 0 clamp(64px,9vw,110px)}
h2{font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-.03em; margin:0 0 12px}
h3{font-size:20px; margin:0 0 8px}
.lead{color:var(--muted); max-width:600px; margin:0 auto 34px; font-size:18px}

/* Knopf-Reihe: alle Knoepfe gleich breit, mittig */
.cta-row{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; width:max-content; margin-inline:auto}
.cta-row .btn{width:100%}
@media (max-width:620px){ .cta-row{grid-auto-flow:row; width:100%; max-width:340px} }

/* ===== Fliesstext (Rechtstexte) — als Karte ===== */
.prose{max-width:780px; margin:0 auto; color:var(--muted); font-size:16px;
  padding:clamp(26px,5vw,52px); border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.prose > :first-child{margin-top:0}
.prose h2{font-size:clamp(21px,3vw,25px); margin:38px 0 10px; color:var(--text); letter-spacing:-.02em}
.prose h3{font-size:18px; margin:26px 0 8px; color:var(--text)}
.prose p,.prose li{color:var(--muted)}
.prose ul{padding-left:20px}
.prose a{color:var(--text); text-decoration-color:rgba(233,236,240,.35); text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--silber)}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line); padding:48px 0 34px; color:var(--muted); font-size:14px}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px; margin-bottom:30px}
.foot-grid h2{color:var(--faint); font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px}
.foot-grid a{display:block; color:var(--muted); text-decoration:none; padding:4px 0; transition:color .15s}
.foot-grid a:hover{color:var(--text)}
.foot-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; flex-wrap:wrap;
  gap:8px 20px; justify-content:space-between; align-items:center; color:var(--faint); font-size:13.5px}
.foot-brand{font-weight:800; color:var(--grau); font-size:19px; letter-spacing:-.03em}