/* FORJA — forja.software
   Alles lokal: Schriften, Bilder, Stile. Keine externen Dienste, keine
   Cookies, kein Zählpixel. Das hält die Datenschutzerklärung kurz. */

@font-face { font-family:'Plex'; font-weight:400; font-style:normal;
  font-display:swap; src:url('fonts/IBMPlexSans-400.woff2') format('woff2') }
@font-face { font-family:'Plex'; font-weight:500; font-style:normal;
  font-display:swap; src:url('fonts/IBMPlexSans-500.woff2') format('woff2') }
@font-face { font-family:'Plex'; font-weight:600; font-style:normal;
  font-display:swap; src:url('fonts/IBMPlexSans-600.woff2') format('woff2') }
@font-face { font-family:'Plex'; font-weight:700; font-style:normal;
  font-display:swap; src:url('fonts/IBMPlexSans-700.woff2') format('woff2') }

:root {
  --esse:#17171C; --graphit:#272630; --stahl:#6B6A78; --asche:#D7D6DE;
  --papier:#F4F3F7; --glut:#FF4E02; --impuls:#B07CF0; --werkbank:#43307F;
  --weiss:#FFFFFF;
  --schrift:'Plex',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,
    Arial,sans-serif;
  --spalte:1120px; --lesen:66ch;
  --rand:clamp(20px,5vw,48px);
}

* { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms!important;
    transition-duration:.01ms!important }
}
body {
  margin:0; background:var(--papier); color:var(--graphit);
  font-family:var(--schrift); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block }
a { color:var(--werkbank) }
a:focus-visible, button:focus-visible {
  outline:3px solid var(--glut); outline-offset:3px; border-radius:2px }

.huelle { max-width:var(--spalte); margin:0 auto;
  padding-left:var(--rand); padding-right:var(--rand) }
.band { padding-block:clamp(64px,9vw,104px) }
.band.dunkel { background:var(--esse); color:var(--papier) }
.band.hell { background:var(--weiss) }
.band.papier { background:var(--papier) }

.marke { font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--glut) }
.band.hell .marke, .band.papier .marke { color:var(--werkbank) }
h1,h2,h3 { letter-spacing:-.02em; text-wrap:balance; margin:0 }
h2 { font-size:clamp(28px,4.2vw,40px); font-weight:700; line-height:1.14 }
h3 { font-size:19px; font-weight:600; line-height:1.3 }
.lead { font-size:clamp(18px,2.1vw,21px); line-height:1.55; max-width:var(--lesen);
  color:var(--stahl) }
.band.dunkel .lead { color:#B9B8C6 }
p { max-width:var(--lesen) }
.strich { width:64px; height:4px; background:var(--glut); border:0; margin:0 }

/* ---------- Kopf ---------- */
.kopf { position:relative; overflow:hidden; background:var(--esse);
  color:var(--papier); padding-block:clamp(56px,10vw,110px) }
.kopf::before { content:''; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 28% 14%, #4A3794 0%,
    rgba(26,25,36,0) 62%); opacity:.85 }
.kopf .huelle { position:relative }

/* ---------- Berliner Wahrzeichen als Hintergrund ----------
   Am Rand, angeschnitten, hoechstens zwei je Flaeche — Graphit auf Hell,
   Papier auf Dunkel, nie hinter der Textspalte. */
.band { position:relative; overflow:hidden }
.band > .huelle { position:relative; z-index:1 }
.deko { position:absolute; pointer-events:none; user-select:none;
  opacity:.075; z-index:0 }
.kopf .deko, .band.dunkel .deko { filter:brightness(0) invert(1); opacity:.085 }
.d-or { right:-5%;  top:-12%;    width:min(34vw,420px) }
.d-ur { right:-6%;  bottom:-16%; width:min(34vw,420px) }
.d-ol { left:-6%;   top:-14%;    width:min(31vw,370px) }
.d-ul { left:-7%;   bottom:-18%; width:min(33vw,390px) }
.kopf .d-or { right:-5%; top:-12%; width:min(44vw,460px) }
.kopf .d-ul { left:-7%; bottom:-22%; width:min(38vw,380px) }
@media (max-width:900px) {
  .deko { opacity:.05 }
  .kopf .deko, .band.dunkel .deko { opacity:.06 }
  .d-or,.d-ur,.d-ol,.d-ul { width:min(46vw,260px) }
}
.kopf img.wort { width:min(340px,74vw) }
.unterzeile { font-size:clamp(13px,1.7vw,15.5px); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#A8A7B6;
  margin:16px 0 0 }
.kopfzeile { font-size:clamp(26px,4.4vw,40px); font-weight:700; line-height:1.16;
  margin:24px 0 0; max-width:19ch }
.kopf .lead { margin-top:18px }

.gruendung { margin-top:40px; border-left:3px solid var(--glut);
  padding:4px 0 4px 20px; max-width:62ch }
.gruendung .titel { font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--glut) }
.gruendung p { font-size:15.5px; line-height:1.55; color:#C7C6D2; margin:10px 0 0 }
.gruendung .klein { font-size:13.5px; color:#8E8D9C; margin-top:10px }
.gruendung a { color:#C7C6D2 }

/* ---------- Schaltflächen ---------- */
.knopfreihe { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px }
.knopf { display:inline-flex; align-items:center; gap:10px;
  font:inherit; font-size:16px; font-weight:600; text-decoration:none;
  padding:15px 26px; border-radius:8px; border:2px solid transparent;
  background:var(--glut); color:#fff; transition:background .15s, transform .15s }
.knopf:hover { background:#E64600; transform:translateY(-1px) }
.knopf.leise { background:transparent; border-color:#56556A; color:var(--papier) }
.knopf.leise:hover { background:rgba(255,255,255,.07); border-color:#7C7B91 }
.band.hell .knopf.leise, .band.papier .knopf.leise {
  border-color:var(--asche); color:var(--graphit) }
.band.hell .knopf.leise:hover { background:var(--papier) }
.knopf .pfeil { font-size:19px; line-height:1 }

/* ---------- Raster ---------- */
.dreier { display:grid; gap:26px; margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.karte { background:var(--weiss); border:1px solid var(--asche);
  border-radius:12px; padding:28px 26px; min-width:0 }
.band.hell .karte { background:var(--papier); border-color:#E4E3EB }
.karte .wer { font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--werkbank); margin-bottom:12px }
.karte ul { margin:14px 0 0; padding-left:20px; color:var(--stahl);
  font-size:15.5px; line-height:1.55 }
.karte li { margin-bottom:7px }
.karte li::marker { color:var(--glut) }

/* ---------- Agentinnen ---------- */
.agenten { display:grid; gap:18px; margin-top:44px }
.agent { display:grid; grid-template-columns:86px 1fr auto; gap:10px 24px;
  align-items:start; background:var(--weiss); border:1px solid var(--asche);
  border-radius:12px; padding:24px 26px }
.band.dunkel .agent { background:#201F2A; border-color:#34333F }
.agent .kuerzel { font-size:26px; font-weight:700; color:var(--werkbank);
  line-height:1.1; letter-spacing:.02em }
.band.dunkel .agent .kuerzel { color:var(--impuls) }
.agent .lang { font-size:12.5px; color:var(--stahl); font-weight:500;
  margin-top:2px; line-height:1.3 }
.agent .was { min-width:0 }
.agent .was p { margin:0; font-size:16px; max-width:52ch }
.band.dunkel .agent .was p { color:#D6D5E0 }
.stand { font-size:12.5px; font-weight:600; letter-spacing:.04em;
  padding:6px 13px; border-radius:999px; white-space:nowrap; align-self:center }
.stand.laeuft { background:#E2F3E8; color:#1C6B3A }
.stand.bau { background:#FFE9DC; color:#A33500 }
.band.dunkel .stand.laeuft { background:#1C3A28; color:#86D7A5 }
.band.dunkel .stand.bau { background:#422213; color:#FFA172 }
@media (max-width:620px) {
  .agent { grid-template-columns:1fr; gap:12px }
  .stand { justify-self:start }
}

/* ---------- Geschichte ---------- */
.geschichte { display:grid; gap:40px; margin-top:44px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start }
.geschichte p { font-size:17.5px }
.geschichte p + p { margin-top:18px }
.zitat { border-left:3px solid var(--glut); padding:6px 0 6px 22px;
  font-size:21px; font-weight:600; line-height:1.38; color:var(--esse);
  max-width:28ch }
@media (max-width:860px) { .geschichte { grid-template-columns:1fr; gap:28px } }

/* ---------- Founder ---------- */
.preis { display:grid; gap:0; margin-top:44px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border:1px solid #34333F; border-radius:14px; overflow:hidden }
.preis > div { padding:34px 32px; min-width:0 }
.preis .zahl { background:#201F2A; border-right:1px solid #34333F }
.preis .betrag { font-size:clamp(40px,7vw,58px); font-weight:700;
  color:var(--papier); line-height:1; letter-spacing:-.02em }
.preis .betrag .usp { font-size:15px; font-weight:500; color:#9B9AA8;
  display:block; margin-top:12px; letter-spacing:0 }
.preis .plaetze { margin-top:26px; font-size:14px; color:#9B9AA8 }
.preis .plaetze b { color:var(--glut) }
.preis ul { margin:0; padding-left:20px; font-size:16px; line-height:1.5;
  color:#D6D5E0 }
.preis li { margin-bottom:12px }
.preis li::marker { color:var(--glut) }
.preis li b { color:var(--papier) }
@media (max-width:760px) {
  .preis { grid-template-columns:1fr }
  .preis .zahl { border-right:0; border-bottom:1px solid #34333F }
}

.hinweiskasten { margin-top:34px; border:1px solid #34333F; border-left:3px solid
  var(--glut); border-radius:10px; padding:20px 24px; background:#1C1B24;
  font-size:14.5px; line-height:1.55; color:#B9B8C6; max-width:74ch }
.hinweiskasten b { color:var(--papier) }
.band.hell .hinweiskasten, .band.papier .hinweiskasten {
  background:var(--papier); border-color:var(--asche);
  border-left-color:var(--glut); color:var(--stahl) }
.band.hell .hinweiskasten b { color:var(--graphit) }

/* ---------- Fuß ---------- */
.fuss { background:var(--graphit); color:#9B9AA8; font-size:14px;
  padding-block:44px }
.fuss .reihe { display:flex; flex-wrap:wrap; gap:18px 36px;
  justify-content:space-between; align-items:flex-start }
.fuss a { color:#C7C6D2; text-decoration:none }
.fuss a:hover { color:#fff; text-decoration:underline }
.fuss nav { display:flex; gap:22px; flex-wrap:wrap }
.fuss .klein { margin-top:26px; font-size:12.5px; line-height:1.6;
  color:#7C7B91; max-width:80ch }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width:76ch }
.rechtstext h2 { font-size:clamp(24px,3.4vw,32px); margin-top:52px }
.rechtstext h2:first-of-type { margin-top:34px }
.rechtstext h3 { margin-top:30px; color:var(--werkbank) }
.rechtstext p, .rechtstext li { font-size:16.5px }
.rechtstext ul { padding-left:22px }
.rechtstext li { margin-bottom:9px }
.rechtstext dl { display:grid; grid-template-columns:auto 1fr; gap:6px 24px;
  margin:18px 0 0; font-size:16.5px }
.rechtstext dt { font-weight:600 }
.rechtstext dd { margin:0 }
@media (max-width:560px) { .rechtstext dl { grid-template-columns:1fr; gap:2px 0 }
  .rechtstext dd { margin-bottom:10px } }
.zurueck { display:inline-block; margin-top:48px; font-size:15px }

/* =======================================================================
   Ein Abschnitt, ein Bildschirm
   Jeder Abschnitt ist mindestens so hoch wie das Sichtfeld und zentriert
   seinen Inhalt. Dazu rastet das Scrollen ein — aber nur, wenn das Fenster
   gross genug ist, dass der Inhalt wirklich hineinpasst. Auf kleinen oder
   flachen Bildschirmen bleibt das Scrollen frei, sonst waeren Teile des
   Textes nicht mehr erreichbar.
   ======================================================================= */
.kopf, .band { min-height:100svh; display:flex; align-items:center }
.kopf > .huelle, .band > .huelle { width:100%; flex:1 1 auto }

@media (min-width:900px) and (min-height:700px) {
  html { scroll-snap-type:y mandatory }
  .kopf, .band { scroll-snap-align:start; scroll-snap-stop:always }
  .fuss { scroll-snap-align:end }
}
@media (prefers-reduced-motion:reduce) { html { scroll-snap-type:none } }

/* Beim Einrasten darf nichts ueberstehen: etwas engere Masse. */
@media (min-height:700px) {
  .kopf, .band { padding-block:clamp(40px,5vh,72px) }
  .dreier { margin-top:clamp(26px,3.4vh,44px); gap:clamp(18px,2vw,26px) }
  .agenten { margin-top:clamp(22px,3vh,40px); gap:clamp(11px,1.5vh,18px) }
  .agent { padding:clamp(15px,2vh,24px) clamp(20px,2vw,26px) }
  .preis { margin-top:clamp(24px,3.4vh,44px) }
  .preis > div { padding:clamp(22px,3.2vh,34px) clamp(24px,2.4vw,32px) }
  .preis li { margin-bottom:clamp(7px,1.2vh,12px) }
  .geschichte { margin-top:clamp(24px,3.4vh,44px) }
  .hinweiskasten { margin-top:clamp(18px,2.6vh,34px) }
  .karte { padding:clamp(20px,2.6vh,28px) clamp(20px,2vw,26px) }
  .gruendung { margin-top:clamp(22px,3vh,40px) }
  .knopfreihe { margin-top:clamp(22px,3.2vh,38px) }
}

/* Die Rechtstexte sind lang — dort kein Einrasten und keine feste Hoehe. */
body.rechtsseite .band, body.rechtsseite .kopf { min-height:0; display:block }
body.rechtsseite { scroll-snap-type:none }
html:has(body.rechtsseite) { scroll-snap-type:none }

.gegenleistung { margin-top:clamp(16px,2.4vh,28px); font-size:14.5px;
  line-height:1.5; color:#A8A7B6; max-width:76ch;
  border-left:3px solid var(--glut); padding-left:16px }
.gegenleistung b { color:var(--papier) }

/* Flache Bildschirme: Kopf und Fliesstext eine Spur enger fassen. */
@media (max-height:800px) and (min-width:900px) {
  .kopf img.wort { width:min(276px,60vw) }
  .unterzeile { margin-top:12px; font-size:13px }
  .kopfzeile { margin-top:18px }
  .kopf .lead { margin-top:14px }
  .gruendung p { margin-top:8px; font-size:14.5px }
  .gruendung .klein { margin-top:8px; font-size:12.5px }
  .lead { font-size:18px }
  .karte ul { font-size:15px }
  .karte li { margin-bottom:5px }
  .agent .was p { font-size:15px }
  .geschichte p { font-size:16.5px }
  .geschichte p + p { margin-top:13px }
  .zitat { font-size:19px }
  .preis ul { font-size:15px }
  h2 { font-size:clamp(26px,3.6vw,34px) }
}

/* Sehr flache Bildschirme: die vier Agentinnen brauchen am meisten Platz. */
@media (max-height:740px) and (min-width:900px) {
  .agent { padding:13px 22px; gap:8px 20px }
  .agent .kuerzel { font-size:23px }
  .agent .lang { font-size:11.5px }
  .agent .was p { font-size:14.5px; line-height:1.45 }
  .agenten { gap:10px; margin-top:20px }
  .stand { font-size:12px; padding:5px 11px }
  .band .lead { margin-top:18px }
}

/* Auf den Rechtsseiten laeuft der Text lang — die Wahrzeichen dort an den
   oberen und unteren Rand heften, damit sie nicht mitten im Lesetext liegen. */
body.rechtsseite main.band { position:relative; overflow:hidden }
body.rechtsseite .d-ur { bottom:4%; right:-8% }
body.rechtsseite .d-ol { top:3%; left:-8% }