/* =========================================================
   MetallTrainer Webseite – gemeinsames Stylesheet
   Farben aus der App: Blau #2E6BEE / #1D4FBF, Akzent #F59E0B
   Diese Datei wird von allen vier Seiten geladen.
   ========================================================= */
:root{
  --blau:#2E6BEE; --blau-dunkel:#1D4FBF;
  --stahl:#1B2431;          /* Anthrazit – dunkle Flächen */
  --stahl-hell:#2A3547;
  --papier:#F6F7FA;         /* Seitenhintergrund */
  --weiss:#FFFFFF;
  --tinte:#1B2431;          /* Fließtext */
  --grau:#5B6474;           /* Nebentext */
  --linie:#DDE2EB;
  --amber:#F59E0B;          /* Akzent (Haken im Logo) */
  --gruen:#188A4C;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--papier);color:var(--tinte);line-height:1.6}

/* ---------- Kopfleiste ---------- */
header{background:var(--weiss);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:10}
.kopf{max-width:1040px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinte)}
.marke .icon{width:38px;height:38px;border-radius:9px;overflow:hidden;flex:none}
.marke .name{font-weight:800;font-size:1.15rem;letter-spacing:.2px}
nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav a{padding:8px 14px;border-radius:8px;text-decoration:none;color:var(--grau);font-weight:600;font-size:.95rem}
nav a:hover{background:var(--papier);color:var(--tinte)}
nav a.aktiv{background:var(--blau);color:#fff}
nav a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--blau) 0%,var(--blau-dunkel) 100%);color:#fff;padding:64px 20px 56px}
.hero-innen{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.hero h1{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.2;font-weight:800;margin-bottom:14px}
.hero p.claim{font-size:1.1rem;opacity:.95;max-width:34em;margin-bottom:24px}
.hero .icon-gross{width:150px;height:150px;border-radius:28px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.badge-reihe{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.play-badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:9px 18px;text-decoration:none}
.play-badge .klein{display:block;font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;opacity:.85}
.play-badge .gross{display:block;font-size:1.05rem;font-weight:700;line-height:1.1}
.hinweis-bald{font-size:.85rem;opacity:.85}

/* Bemaßungslinie im Stil einer technischen Zeichnung (Signatur-Element) */
.bemassung{max-width:1040px;margin:0 auto;padding:26px 20px 0;display:flex;justify-content:center}
.mass{position:relative;display:flex;align-items:center;gap:0;color:#fff;font-variant-numeric:tabular-nums;width:min(560px,100%)}
.mass .strich{flex:1;height:1px;background:rgba(255,255,255,.75);position:relative}
.mass .strich::before,.mass .strich::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:rgba(255,255,255,.75)}
.mass .strich::before{left:0}.mass .strich::after{right:0}
.mass .wert{padding:0 16px;text-align:center}
.mass .wert b{font-size:1.6rem;font-weight:800;display:block;line-height:1.1}
.mass .wert span{font-size:.8rem;opacity:.9}

/* ---------- Inhaltsbereiche ---------- */
main{max-width:1040px;margin:0 auto;padding:0 20px 60px}
section{padding:44px 0 8px}
.eyebrow{color:var(--blau);font-weight:800;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
h2{font-size:1.6rem;font-weight:800;margin-bottom:8px}
.untertitel{color:var(--grau);max-width:44em;margin-bottom:26px}

.kartenraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;padding:22px}
.karte h3{font-size:1.05rem;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.karte p{color:var(--grau);font-size:.95rem}
.punkt{width:11px;height:11px;border-radius:50%;flex:none}
.punkt.blau{background:var(--blau)} .punkt.amber{background:var(--amber)}
.punkt.gruen{background:var(--gruen)} .punkt.stahl{background:var(--stahl-hell)}

/* Berufe-Tabelle */
.berufe{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.beruf-zeile{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid var(--linie)}
.beruf-zeile:last-child{border-bottom:none}
.beruf-zeile .kuerzel{flex:none;width:44px;height:44px;border-radius:10px;background:var(--papier);border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--blau);font-size:.82rem}
.beruf-zeile .bname{font-weight:700}
.beruf-zeile .bdetail{color:var(--grau);font-size:.88rem}
.beruf-zeile .rechts{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.beruf-zeile .rechts b{color:var(--blau)}
.beruf-fuss{padding:12px 20px;background:var(--papier);color:var(--grau);font-size:.85rem}

/* Vertrauen (dunkler Block) */
.vertrauen{background:var(--stahl);color:#fff;border-radius:16px;padding:34px 28px;margin-top:44px}
.vertrauen h2{color:#fff}
.vertrauen .kartenraster{margin-top:20px}
.vertrauen .karte{background:var(--stahl-hell);border-color:transparent}
.vertrauen .karte h3{color:#fff}
.vertrauen .karte p{color:#C6CDDA}
.check{color:var(--amber);font-weight:800}

/* Hinweisbox */
.hinweisbox{background:#FFF7E8;border:1px solid #F1DCAE;border-radius:12px;padding:16px 20px;color:#6B5417;font-size:.92rem;margin-top:34px}

/* ---------- Rechtsseiten ---------- */
.rechtsseite{max-width:760px;margin:0 auto;padding:44px 20px 60px}
.rechtsseite h1{font-size:1.9rem;font-weight:800;margin-bottom:6px}
.stand{color:var(--grau);font-size:.9rem;margin-bottom:28px}
.rechtsseite h2{font-size:1.2rem;margin:30px 0 8px}
.rechtsseite h3{font-size:1.02rem;margin:20px 0 6px}
.rechtsseite p, .rechtsseite li{color:#333A48;font-size:.97rem}
.rechtsseite ul{padding-left:22px;margin:8px 0}
.adresse{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:18px 22px;line-height:1.8;margin:10px 0 4px}
.platzhalter{}

/* ---------- Kontakt ---------- */
.mailkarte{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;padding:26px;text-align:center;margin:20px 0}
.mailkarte .mail{display:inline-block;font-size:1.2rem;font-weight:800;color:var(--blau);text-decoration:none;margin:8px 0}

/* ---------- Fußzeile ---------- */
footer{background:var(--stahl);color:#AEB6C5;margin-top:20px}
.fuss{max-width:1040px;margin:0 auto;padding:28px 20px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:.9rem}
.fuss a{color:#fff;text-decoration:none;font-weight:600}
.fuss a:hover{text-decoration:underline}
.fuss .copy{margin-left:auto}

@media (max-width:720px){
  .hero-innen{grid-template-columns:1fr}
  .hero .icon-gross{width:96px;height:96px;order:-1}
  .fuss .copy{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}