/* ============================================================
   SIM112 — gemeinsames Stylesheet
   Schriften lokal eingebunden, keine Verbindung zu Dritt-Servern
   ============================================================ */

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

:root{
  --navy:#133654;
  --navy-deep:#0E2940;
  --navy-black:#0B2135;
  --orange:#F26F27;
  --orange-ink:#C8541A;
  --ink:#28415A;
  --muted:#4A6075;
  --faint:#8296AA;
  --line:#DCE4EC;
  --tint:#F4F7FA;
  --paper:#FFFFFF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:Montserrat,system-ui,sans-serif;letter-spacing:-0.012em;margin:0}
a{color:var(--orange-ink)}
a:hover{color:var(--navy)}
img{max-width:100%}
.kicker{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-ink);margin:0 0 14px
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;z-index:50;background:#fff;color:var(--navy);padding:10px 16px}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:56px 0 72px;isolation:isolate}
.hero::after{
  content:"";position:absolute;right:0;top:0;width:240px;height:240px;background:var(--orange);
  clip-path:polygon(100% 0,100% 100%,0 0);z-index:1
}
.hero .wrap{position:relative;z-index:2}
.hero img.logo{width:150px;height:auto;display:block;margin-bottom:56px}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.07;font-weight:800;text-wrap:balance}
.hero h1 span{color:var(--orange)}
.hero p.lead{margin:24px 0 0;font-size:clamp(17px,2.4vw,21px);line-height:1.5;color:#C8D4E0;max-width:34em}
.hero .kicker{color:#F7A571}
.hero p.aud{margin:40px 0 0;font-size:14px;color:#8FA4B8;border-top:1px solid rgba(255,255,255,.2);padding-top:18px;max-width:34em}

/* ---------- Hero mit Hintergrundvideo (Startseite) ---------- */
.hero--film{
  display:flex;
  min-height:clamp(540px,80vh,780px);
  padding:48px 0 64px;
  background:var(--navy);
}
.hero--film > .wrap{width:100%;display:flex;flex-direction:column}
.hero--film .hero-text{margin-top:56px}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy)}
.hero-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* der Clip ist Hintergrund, nicht Bildmotiv: leicht entsättigt und abgedunkelt */
  filter:saturate(.72) contrast(1.04) brightness(.82);
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(19,54,84,.93) 0%, rgba(19,54,84,.84) 38%, rgba(19,54,84,.46) 70%, rgba(19,54,84,.30) 100%),
    linear-gradient(to top, rgba(19,54,84,.80) 0%, rgba(19,54,84,0) 48%);
}
.hero--film h1{font-size:clamp(38px,7vw,68px)}
.hero--film p.lead{max-width:30em;color:#D5DFE9}
.hero--film img.logo{margin-bottom:auto}
@media (prefers-reduced-motion:reduce){
  .hero-media video{display:none}
}

/* ---------- Story ---------- */
.story{padding:76px 0 68px}
.story .inner{max-width:60ch}
.story p{margin:0 0 20px;font-size:clamp(17px,2.1vw,19.5px);line-height:1.62;color:var(--ink)}
.story p:last-child{margin-bottom:0}
.story .ask,.ask{
  margin:34px 0;padding:0 0 0 28px;border-left:5px solid var(--orange);
  font-family:Montserrat,sans-serif;font-size:clamp(20px,2.8vw,26px);line-height:1.34;
  font-weight:600;color:var(--navy);text-wrap:balance
}
.story .sig{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;color:var(--faint)}
.story .sig b{display:block;font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:2px}

/* ---------- Sections ---------- */
section{padding:64px 0}
section.tinted{background:var(--tint)}
h2{font-size:clamp(25px,3.6vw,34px);line-height:1.18;font-weight:800;margin-bottom:10px}
h2 span{color:var(--orange)}
.rule{width:56px;height:4px;background:var(--orange);margin:18px 0 28px}
.prose{max-width:62ch}
.prose p{margin:0 0 16px;color:var(--muted)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--navy);font-weight:600}

/* ---------- Facts ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:8px}
.fact{border-top:3px solid var(--navy);padding-top:16px}
.fact b{display:block;font-family:Montserrat,sans-serif;font-size:38px;font-weight:800;color:var(--orange);line-height:1}
.fact span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--muted)}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:8px}
.card{background:var(--paper);border-left:5px solid var(--orange);padding:24px 26px}
section.tinted .card{background:var(--paper)}
.card h3{font-size:19px;font-weight:700;margin-bottom:8px}
.card p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- Ablauf (nummerierte Schritte) ---------- */
.steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.steps li{display:flex;gap:22px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps .no{
  font-family:Montserrat,sans-serif;font-size:13px;font-weight:800;color:#fff;background:var(--orange);
  width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center
}
.steps h3{font-size:18px;font-weight:700;margin-bottom:5px}
.steps p{margin:0;font-size:15.5px;line-height:1.56;color:var(--muted);max-width:66ch}

/* ---------- Checklist ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 32px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink)}
.checks li::before{content:"—";color:var(--orange);font-weight:700;flex-shrink:0}

/* ---------- Dark panel ---------- */
.panel{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:40px 40px}
.panel::after{content:"";position:absolute;right:0;top:0;width:72px;height:72px;background:var(--orange);clip-path:polygon(100% 0,100% 100%,0 0)}
.panel h2,.panel h3{color:#fff}
.panel p{color:#C8D4E0;max-width:62ch}
.panel .kicker{color:#F7A571}

/* ---------- Exchange ---------- */
.exchange{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:8px}
.ex{padding:28px 30px}
.ex.get{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.ex.get::after{content:"";position:absolute;right:0;top:0;width:56px;height:56px;background:var(--orange);clip-path:polygon(100% 0,100% 100%,0 0)}
.ex.give{background:var(--tint)}
.ex h3{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.ex.get h3{color:#F7A571}
.ex.give h3{color:var(--orange-ink)}
.ex ul{margin:0;padding-left:20px}
.ex li{margin-bottom:9px;font-size:15.5px;line-height:1.55}
.ex.get li{color:#E2EAF2}
.ex.give li{color:var(--ink)}
.ex li:last-child{margin-bottom:0}

/* ---------- CTA / contact ---------- */
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.btn{
  display:inline-block;padding:15px 26px;font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;
  text-decoration:none;border:2px solid var(--orange);background:var(--orange);color:#fff;
}
.btn:hover{background:var(--orange-ink);border-color:var(--orange-ink);color:#fff}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.light:hover{background:#fff;color:var(--navy);border-color:#fff}
.contact{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;justify-content:space-between}
.contact .who{font-family:Montserrat,sans-serif;font-size:21px;font-weight:700;margin:0 0 4px;color:#fff}
.contact .role{margin:0 0 16px;font-size:14.5px;color:#8FA4B8}
.contact .lines{margin:0;font-size:16px;line-height:1.8;color:#C8D4E0}
.contact .lines a{color:#F7A571;text-decoration:none}
.contact .lines a:hover{color:#fff}
.contact img.logo{width:132px;height:auto;display:block}

/* ---------- Statushinweis ---------- */
.status{
  background:var(--tint);border-left:5px solid var(--navy);padding:22px 26px;margin-top:8px;max-width:68ch
}
.status h3{font-size:17px;font-weight:700;margin-bottom:7px}
.status p{margin:0;font-size:15.5px;line-height:1.56;color:var(--muted)}

/* ---------- Rechtstexte ---------- */
.pagehead{background:var(--navy);color:#fff;padding:34px 0 44px;position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;right:0;top:0;width:140px;height:140px;background:var(--orange);clip-path:polygon(100% 0,100% 100%,0 0)}
.pagehead .wrap{position:relative;z-index:1}
.pagehead img.logo{width:124px;height:auto;display:block;margin-bottom:36px}
.pagehead h1{font-size:clamp(28px,5vw,42px);line-height:1.1;font-weight:800}
.pagehead h1 span{color:var(--orange)}
.legal{padding:56px 0 72px}
.legal .inner{max-width:72ch}
.legal h2{font-size:clamp(20px,2.6vw,25px);font-weight:800;margin:44px 0 6px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:17px;font-weight:700;margin:26px 0 6px}
.legal p{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--ink)}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:7px;font-size:16px;line-height:1.6;color:var(--ink)}
.legal address{font-style:normal;margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--ink)}
.legal .hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.legal .note{background:var(--tint);border-left:5px solid var(--orange);padding:20px 24px;margin:0 0 14px}
.legal .note p:last-child{margin-bottom:0}
.legal .meta{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--faint)}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:#8FA4B8;padding:28px 0;font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer a{color:#C8D4E0;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer nav{display:flex;gap:22px;flex-wrap:wrap}

@media (max-width:640px){
  body{font-size:16px}
  section{padding:48px 0}
  .hero{padding:40px 0 56px}
  .hero img.logo{width:124px;margin-bottom:36px}
  .hero::after{width:140px;height:140px}
  .hero--film{min-height:clamp(480px,86vh,660px);padding:36px 0 48px}
  .hero--film .hero-text{margin-top:40px}
  .panel,.ex{padding:26px 24px}
  .steps li{gap:16px}
  .legal{padding:40px 0 56px}
}