/* ==========================================================
   Heldenwerft GmbH – stil.css
   Variante B „Werft" · Stand 31.10.2026
   Basis: Auftragsdock-Styleguide 1.2, für die Dachmarke bewusst
   kräftiger (Archivo 800/900, Umrissschrift, Signal in Buttons).
   ========================================================== */

/* ---------- Schriften (selbst gehostet, keine Google-Verbindung) ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/archivo-600.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/archivo-700.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/archivo-800.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/archivo-900.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --nacht:#0E1A23;          /* tiefer als Tiefwasser, nur Dachmarke */
  --tiefwasser:#152430;
  --dock:#2C4354;
  --stahl:#8D989E;
  --stahl-hell:#C9CFD1;
  --papier:#ECEDEA;
  --papier-weiss:#F7F7F5;
  --linie:#D3D7D6;
  --signal:#EFB100;
  --freigabe:#2F7A57;
  --breite:1320px;
  --rand:32px;
  --f-head:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-text:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tiefwasser);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
a:hover{color:var(--signal)}
h1,h2,h3,p,ul,dl,dd{margin:0}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--breite);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--signal);color:var(--tiefwasser);padding:12px 18px;font-weight:700;z-index:10}
.skip:focus{left:16px;top:16px}

/* Umrissschrift */
.umriss{color:transparent;-webkit-text-stroke:1.5px var(--stahl)}
.umriss-dunkel{color:transparent;-webkit-text-stroke:1.5px var(--tiefwasser)}
@supports not (-webkit-text-stroke:1px black){.umriss{color:var(--stahl)}.umriss-dunkel{color:var(--dock)}}

.mono{font-family:var(--f-mono);font-size:14px;color:var(--stahl)}
.gedimmt{color:var(--dock)}
.dunkel{background:var(--nacht);color:var(--papier-weiss)}
.dunkel .gedimmt{color:var(--stahl-hell)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border-radius:2px;text-decoration:none;font-weight:700;font-size:17px;border:1px solid transparent;transition:background .15s,color .15s}
.knopf-signal{background:var(--signal);color:var(--tiefwasser)}
.knopf-signal:hover{background:#FFC21A;color:var(--tiefwasser)}
.knopf-rahmen{border-color:var(--stahl);color:var(--papier-weiss);font-weight:600}
.knopf-rahmen:hover{border-color:var(--papier-weiss);color:var(--papier-weiss)}
.knopf-dunkel{background:var(--tiefwasser);color:var(--papier-weiss);font-weight:600;min-height:52px;padding:0 24px}
.knopf-dunkel:hover{background:var(--dock);color:var(--papier-weiss)}
.knopf-gross{min-height:60px;padding:0 32px;font-size:18px}

/* ---------- Kopf ---------- */
.kopf{border-bottom:1px solid var(--dock)}
.kopf-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:24px;padding-bottom:24px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke span{font-family:var(--f-head);font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--papier-weiss)}
.marke:hover span{color:var(--papier-weiss)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:28px;font-size:15px;font-weight:500}
.nav a:not(.nav-knopf){text-decoration:none;color:var(--stahl-hell)}
.nav a:not(.nav-knopf):hover{color:var(--papier-weiss)}
.nav-knopf{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--papier-weiss);border-radius:2px;text-decoration:none;color:var(--papier-weiss);font-weight:600}
.nav-knopf:hover{background:var(--papier-weiss);color:var(--tiefwasser)}

/* ---------- Hero ---------- */
.hero-text{padding-top:88px}
.hero-ort{margin-bottom:28px}
.hero h1{font-family:var(--f-head);font-weight:900;font-size:clamp(64px,11vw,168px);line-height:.9;letter-spacing:-.04em;color:var(--papier-weiss)}
.hero-unter{margin-top:12px;font-family:var(--f-head);font-weight:900;font-size:clamp(40px,6.4vw,96px);line-height:.95;letter-spacing:-.035em}
.hero-fuss{margin-top:56px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end;justify-content:space-between}
.hero-fuss p{flex:1 1 420px;max-width:54ch;font-size:19px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.zeichnung{padding-top:64px}

/* Laufband – einziger Bewegungsmoment */
.laufband{border-top:1px solid var(--dock);padding:22px 0;overflow:hidden}
.laufband-spur{display:flex;width:max-content;gap:56px;font-family:var(--f-head);font-weight:800;font-size:44px;letter-spacing:-.02em;white-space:nowrap;animation:laufband 38s linear infinite}
.laufband-spur .hell{color:var(--papier-weiss)}
.laufband-spur .haken{color:var(--signal)}
.laufband-spur .trenner{color:var(--dock)}
@keyframes laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.laufband-spur{animation:none}html{scroll-behavior:auto}}

/* ---------- Abschnitte ---------- */
.abschnitt{border-bottom:1px solid var(--linie)}
.statement{padding-top:120px;padding-bottom:120px}
.statement p{max-width:20ch;font-family:var(--f-head);font-weight:800;font-size:clamp(40px,5.4vw,80px);line-height:1.02;letter-spacing:-.03em}
.statement span{color:var(--stahl)}

.titel-gross{font-family:var(--f-head);font-weight:900;font-size:clamp(48px,7vw,112px);line-height:.92;letter-spacing:-.04em}
.titel{font-family:var(--f-head);font-weight:900;font-size:clamp(40px,4.6vw,72px);line-height:.95;letter-spacing:-.035em}

/* Flotte */
.flotte-kopf{padding-top:96px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.flotte-kopf p{max-width:44ch}
.flotte{padding-bottom:96px}
.dock{display:flex;flex-wrap:wrap;gap:32px;align-items:center;padding:40px 0;border-top:1px solid var(--stahl-hell)}
.dock:first-child{border-top:2px solid var(--tiefwasser)}
.dock:last-child{border-bottom:1px solid var(--stahl-hell)}
.dock-nr{flex:0 0 200px;font-family:var(--f-head);font-weight:900;font-size:120px;line-height:.85;letter-spacing:-.04em}
.dock-inhalt{flex:1 1 420px;min-width:0}
.dock h3{margin-bottom:8px;font-family:var(--f-head);font-weight:800;font-size:clamp(36px,4vw,56px);line-height:1;letter-spacing:-.03em}
.dock p{max-width:56ch}
.status{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--dock)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--stahl)}
.status-betrieb{color:var(--freigabe)}
.status-betrieb::before{background:var(--freigabe)}
.status-helling::before{background:transparent;border:1.5px solid var(--stahl)}
.dock-marke{flex:0 0 auto;display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border:1px solid var(--stahl-hell);border-radius:2px;color:var(--dock);font-weight:500}

/* Prinzip */
.prinzip{background:var(--tiefwasser);color:var(--papier-weiss)}
.prinzip .wrap{padding-top:112px;padding-bottom:112px}
.prinzip .mono{margin-bottom:24px}
.prinzip h2{margin-bottom:72px;max-width:16ch;font-family:var(--f-head);font-weight:900;font-size:clamp(44px,6vw,96px);line-height:.95;letter-spacing:-.04em}
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--dock);border-top:1px solid var(--dock);border-bottom:1px solid var(--dock)}
.schritt{background:var(--tiefwasser);padding:40px 32px}
.schritt:first-child{padding-left:0}
.schritt h3{margin-bottom:20px;font-family:var(--f-head);font-weight:900;font-size:64px;line-height:1;letter-spacing:-.03em}
.schritt p{max-width:34ch;color:var(--stahl-hell)}
.schritt-frei h3{color:var(--freigabe)}

/* Zweispalter */
.zwei{padding-top:112px;padding-bottom:112px;display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.zwei > *{min-width:0}
.zwei .links{flex:1 1 320px}
.zwei .rechts{flex:1 1 560px}
.zwei .links p{margin-top:20px;max-width:40ch}
.branchen{padding:0;list-style:none;border-top:2px solid var(--tiefwasser)}
.branchen li{padding:18px 0;border-bottom:1px solid var(--stahl-hell);font-family:var(--f-head);font-weight:800;font-size:clamp(28px,3.2vw,48px);line-height:1.1;letter-spacing:-.025em}

/* Werft */
.werft{background:var(--papier-weiss)}
.werft h2{flex:1 1 480px;font-family:var(--f-head);font-weight:900;font-size:clamp(56px,8vw,128px);line-height:.88;letter-spacing:-.045em}
.werft .rechts{flex:1 1 420px}
.werft .rechts p{max-width:52ch;font-size:19px}
.fakten{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--tiefwasser)}
.fakten div{padding:16px 16px 16px 0;border-bottom:1px solid var(--stahl-hell)}
.fakten dt{font-size:14px;color:var(--dock)}
.fakten dd{margin-top:2px;font-family:var(--f-head);font-weight:700;font-size:19px}

/* Kontakt */
.kontakt .wrap{padding-top:128px;padding-bottom:96px}
.kontakt h2{margin-bottom:40px;font-family:var(--f-head);font-weight:900;font-size:clamp(64px,11vw,176px);line-height:.86;letter-spacing:-.05em}
.kontakt-zeile{display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:space-between;padding-top:40px;border-top:1px solid var(--dock)}
.kontakt-zeile p{flex:1 1 420px;max-width:50ch;font-size:19px}
.tel{font-family:var(--f-mono);font-size:18px;color:var(--papier-weiss)}

/* Fuß */
.fuss{border-top:1px solid var(--dock)}
.fuss-in{padding-top:28px;padding-bottom:40px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;font-size:14px;color:var(--stahl-hell)}
.fuss nav{display:flex;flex-wrap:wrap;gap:24px}
.fuss a{color:var(--stahl-hell)}

/* ---------- Rechtsseiten ---------- */
.recht-titel{padding-top:88px;padding-bottom:56px}
.recht-titel h1{font-family:var(--f-head);font-weight:900;font-size:clamp(48px,7vw,104px);line-height:.92;letter-spacing:-.04em;color:var(--papier-weiss)}
.recht-titel p{margin-top:20px;color:var(--stahl-hell)}
.recht{padding-top:72px;padding-bottom:96px}
.recht section{display:flex;flex-wrap:wrap;gap:24px 64px;padding:32px 0;border-top:1px solid var(--linie)}
.recht section:first-child{border-top:2px solid var(--tiefwasser)}
.recht h2{flex:0 0 280px;font-family:var(--f-head);font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.recht .inhalt{flex:1 1 520px;min-width:0;max-width:66ch}
.recht .inhalt p + p,.recht .inhalt p + ul,.recht .inhalt ul + p{margin-top:12px}
.recht .inhalt ul{padding-left:20px}
.recht dl{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 24px}
.recht dt{color:var(--dock)}
.recht a{color:var(--tiefwasser);text-decoration-thickness:1px;text-underline-offset:3px}
.recht a:hover{color:var(--dock)}
.recht h3{margin:20px 0 6px;font-family:var(--f-head);font-weight:700;font-size:18px}
.recht h3:first-child{margin-top:0}

/* ---------- Schmal ---------- */
@media (max-width:720px){
  :root{--rand:20px}
  .nav{gap:18px}
  .hero-text{padding-top:56px}
  .dock-nr{flex-basis:100%;font-size:88px}
  .schritt,.schritt:first-child{padding:32px 0}
  .laufband-spur{font-size:30px;gap:36px}
  .recht h2{flex-basis:100%}
  .recht dl{grid-template-columns:1fr}
  .recht dd{margin-bottom:10px}
}