/* ---- Farb- und Formklima (zentrale Tokens) ----
   Vorher war jede helle Flaeche reines #FFFFFF und jede Panel-Flaeche das kalte
   Blaugrau #EDF2F7 - das wirkte klinisch. Jetzt: warmes Off-White + Sandton,
   dazu zwei Schattenstufen und ein Punktraster fuer die dunklen Sektionen. */
:root {
  --osa-ink: #1A103F;
  --osa-ink-2: #2c1e63;
  --osa-ink-3: #241650;
  --osa-lime: #D7FF35;
  --osa-paper: #FBF8F2;   /* warmes Off-White statt reinem Weiss */
  --osa-mist: #F0EADC;    /* warmer Sandton statt kaltem #EDF2F7 */
  --osa-card: #FFFDF8;    /* Karten einen Hauch heller als der Grund */
  --osa-line: #E5DBC7;    /* warme Trennlinie */
  --osa-muted: #4A4368;
  --osa-shadow-1: 0 1px 2px rgba(26, 16, 63, 0.05);
  --osa-shadow-2: 0 12px 32px rgba(26, 16, 63, 0.09);
  --osa-dots: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  /* Inhaltsbreite: Der Rand waechst mit dem Fenster (6vw), begrenzt auf 140px.
     Ergebnis: der Inhalt belegt rund 85 % der Fensterbreite - nutzt also viel
     Bildschirm, laeuft aber sichtbar nicht mehr in die Fensterkante.
     Vorher: 4vw / max 72px -> nur ~55-64px Rand, praktisch randlos. */
  --osa-inner-max: 1840px;
  --osa-gutter: clamp(20px, 6vw, 140px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--osa-ink); background-color: var(--osa-paper); -webkit-font-smoothing: antialiased; }
::selection { background-color: var(--osa-lime); color: var(--osa-ink); }

body .wrapper { width: 100%; overflow-x: hidden; }

body .wrapper .section-inner { width: 100%; max-width: var(--osa-inner-max); margin: 0 auto; padding-left: var(--osa-gutter); padding-right: var(--osa-gutter); }

body .wrapper section { padding-top: 56px; padding-bottom: 56px; }

body .wrapper .section-head { margin-bottom: 32px; }
/* Lime-Balken als Auftakt jeder Sektion - gibt den Ueberschriften Halt */
body .wrapper .section-head::before { content: ""; display: block; width: 44px; height: 4px; background-color: var(--osa-lime); margin-bottom: 18px; }
/* Kraeftige, enge Ueberschriften statt Light-300 */
body .wrapper .section-title { font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--osa-ink); margin: 0; letter-spacing: -1px; }
body .wrapper .section-lead { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--osa-muted); max-width: 640px; margin: 16px 0 0; }
body .wrapper .section-head-light .section-title { color: #FFFFFF; }
body .wrapper .section-head-light .section-lead { color: #C7C1E0; }
body .wrapper .section-cta { margin-top: 36px; display: flex; justify-content: center; }

body .wrapper .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; padding: 16px 24px; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
body .wrapper .btn .arrow { transition: transform 0.25s ease; flex-shrink: 0; }
body .wrapper .btn:hover .arrow { transform: translateX(4px); }
body .wrapper .btn-primary { background-color: var(--osa-lime); color: var(--osa-ink); }
body .wrapper .btn-primary:hover { background-color: #c7f015; box-shadow: 0 10px 24px rgba(215, 255, 53, 0.28); }
body .wrapper .btn-dark { background-color: var(--osa-ink); color: #FFFFFF; }
body .wrapper .btn-dark:hover { background-color: var(--osa-ink-2); box-shadow: var(--osa-shadow-2); }
body .wrapper .btn-outline { background-color: transparent; color: var(--osa-ink); border-color: var(--osa-ink); }
body .wrapper .btn-outline:hover { background-color: var(--osa-ink); color: #FFFFFF; }

body .wrapper .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
body .wrapper .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 768px) {
  body .wrapper section { padding-top: 68px; padding-bottom: 68px; }
  body .wrapper .section-title { font-size: 46px; letter-spacing: -1.6px; }
  body .wrapper .section-lead { font-size: 18px; }
  body .wrapper .btn { padding: 20px 32px; }
}
@media (min-width: 1024px) {
  body .wrapper section { padding-top: 76px; padding-bottom: 76px; }
  body .wrapper .section-title { font-size: 58px; letter-spacing: -2px; }
}