:root {
  --teal:    #3AABAA;
  --teal-dk: #2C8C8B;
  --orange:  #E07B54;
  --orange-dk: #C9613C;
  --bg:   #F8F8F6;
  --ink:  #232323;
  --muted: #6B6B66;
  --card: #FFFFFF;
  --gradient-dark:
    radial-gradient(900px circle at 85% 12%, rgba(58,171,170,.28), transparent 60%),
    radial-gradient(700px circle at 8% 92%, rgba(224,123,84,.18), transparent 55%),
    linear-gradient(135deg, #1B3A3A 0%, #0F2A2A 100%);
}

* {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

/* overflow-x: clip auf html UND body — beschneidet den transienten Ueberhang
   der reveal-Animationen (translateX ±60px) zuverlaessig auch auf Mobile und
   verhindert die Aufweitung des Layout-Viewports. clip erzeugt (anders als
   hidden) keinen Scroll-Container und beeintraechtigt daher den sticky-Header
   nicht. Die hidden-Zeile davor ist der Fallback fuer Browser ohne
   clip-Support (Safari < 16, Chrome/WebView < 90). */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background:  var(--bg);
  color:       var(--ink);
  line-height: 1.6;
}

a   { text-decoration: none; }
img { max-width: 100%; display: block; }


/* ── Scrollbar ───────────────────────────────────────────────────────────── */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--bg);
}

::-webkit-scrollbar       { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }

::-webkit-scrollbar-thumb {
  background-color: var(--teal);
  border-radius:     999px;
  border:            3px solid var(--bg);
  background-clip:   padding-box;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--teal-dk); }

.modal-overlay {
  scrollbar-color: var(--teal) rgba(255,255,255,.1);
}

.modal-overlay::-webkit-scrollbar-track  { background: transparent; }
.modal-overlay::-webkit-scrollbar-thumb  { border-color: transparent; }

.wrap {
  width:     90%;
  max-width: 1920px;
  margin:    0 auto;
}


/* ── Scroll animations ───────────────────────────────────────────────────── */

.reveal-left {
  opacity:    0;
  transform:  translateX(-60px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

.reveal-right {
  opacity:    0;
  transform:  translateX(60px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

.reveal-left.active,
.reveal-right.active {
  opacity:   1;
  transform: translateX(0);
}

/* Bewegungsreduktion: Reveal-Inhalte sofort und ohne Verschiebung anzeigen */
@media (prefers-reduced-motion: reduce) {
  .reveal-left,
  .reveal-right {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}