/* ── Sponti-Website (Marketing/Legal, ausserhalb der App) ──────────────────
   Genutzt von index.php, ueber-sponti.php, datenschutz.php - eigenständiges,
   bewusst "wie eine richtige Website" wirkendes Design statt App-Shell-Optik.
   Nutzt dieselben Marken-Farben wie die App (design-tokens.css), aber eigene
   Layout-/Typografie-Sprache (Nav-Leiste statt Zurück-Button, grosszügigere
   Abstände, breitere Lesespalte). ── */

.site-body, .site-body *, .site-body *::before, .site-body *::after { box-sizing: border-box; }

body.site-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif;
  scrollbar-color: var(--line-strong) transparent;
}
.site-body::-webkit-scrollbar { width: 12px; }
.site-body::-webkit-scrollbar-track { background: transparent; }
.site-body::-webkit-scrollbar-thumb {
  background-color: var(--line-strong);
  border-radius: 8px;
  border: 3px solid var(--bg);
}
.site-body::-webkit-scrollbar-thumb:hover { background-color: var(--muted-aaa); }

/* Gleiche Topo-Hintergrund-Idee wie im Hero (s. .site-hero::before), nur
   dezenter und auf den oberen Bereich begrenzt - für Unterseiten (Über
   Sponti, Datenschutz), NICHT für die App (s. User-Feedback 2026-07-12). */
.site-subpage { position: relative; }
.site-subpage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 480px;
  background: url('/assets/img/bg-topo.png') center top / cover no-repeat;
  opacity: .16;
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
}

/* ── Nav ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: rgba(10, 24, 32, .68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
/* Logo links, Links+CTA als Gruppe rechtsbündig direkt nebeneinander -
   nicht ueber die ganze Breite verteilt (s. User-Feedback 2026-07-12). */
.site-nav-home { margin-right: auto; }
.site-nav-logo { height: 22px; display: block; }
.site-nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); }
.site-nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: color .15s;
}
.site-nav-links a:hover { color: var(--text); }
.site-nav-current {
  color: var(--text);
  font-size: .88rem;
  font-weight: 500;
  cursor: default;
}
.site-nav-cta {
  color: var(--bg) !important;
  background: var(--accent-green);
  padding: .5rem 1.1rem;
  border-radius: 10px;
  font-weight: 700 !important;
  text-decoration: none;
}
.site-nav-cta:hover { background: var(--accent-light); color: var(--bg) !important; }

/* ── Hero ──
   Hero + Showcase bilden zusammen einen Block ("das ist Sponti + so sieht's
   aus"), die Trennlinie kommt daher erst NACH der Showcase, nicht dazwischen
   (s. User-Feedback 2026-07-12: unklar, zu welchem Abschnitt Showcase
   gehört). */
.site-hero {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
  overflow: hidden;
}
.site-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/bg-topo.png') center top / cover no-repeat;
  opacity: .3;
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}
.site-hero-inner {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.hero-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.hero-mascot { width: 92px; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
/* Immer Flex-Column mit definiertem Gap - unabhaengig von der Breakpoint,
   sonst haben Titel/Text auf Mobile keinen echten Abstand (nur Zeilenhoehe,
   s. User-Feedback 2026-07-12), waehrend Desktop ueber .hero-row-Gap einen
   sichtbaren Abstand bekommt. */
.hero-text { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.hero-title {
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -.01em;
}
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  max-width: 40ch;
}
.hero-pitch {
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 40ch;
}

/* Ab Tablet-Breite: Figur neben statt über dem Text, spart Scroll-Strecke.
   Der CTA-Button bleibt bewusst ausserhalb von .hero-row (eigene, über
   .site-hero-inner zentrierte Zeile) - sonst zentriert sich die Figur gegen
   Titel+Text+Button zusammen statt nur gegen Titel+Text. */
@media (min-width: 700px) {
  .site-hero-inner { max-width: 780px; }
  .hero-row { flex-direction: row; align-items: center; text-align: left; gap: 2.5rem; }
  .hero-mascot { width: 128px; flex: none; }
  .hero-text { align-items: flex-start; gap: .9rem; }
  .hero-subtitle { max-width: 36ch; }
  .hero-pitch { max-width: 36ch; }
}
.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 2.25rem;
  border-radius: 16px;
  background: var(--accent-green);
  color: var(--bg);
  font-size: 1.05rem;
  font-weight: 750;
  text-decoration: none;
  border: 3px solid #163028;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.site-btn:hover { background: var(--accent-light); }
.site-btn:active { transform: scale(.97); }

/* Grösser/schwerer als der Fliesstext darüber - der Button ist die
   eigentliche Handlung, soll optisch nicht vom Absatz erschlagen werden
   (s. User-Feedback 2026-07-12). */
.hero-cta {
  margin: .75rem auto 0;
  min-height: 60px;
  padding: 0 3rem;
  font-size: 1.15rem;
}

/* ── Screenshot-Showcase (zeigt statt nur zu beschreiben, s. User-Feedback
   2026-07-12: "kein echter Content-Screenshot auf der Landingpage") ── */
.site-showcase {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) 1.5rem clamp(2.5rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
/* Zwei Spalten schon ab Mobile statt gestapelt (s. User-Feedback
   2026-07-12: "man muss ziemlich scrollen") - auf schmalem Mobile eine
   gemeinsame Caption statt zweier fast identischer Texte, spart die Hoehe,
   die die Nebeneinander-Anordnung sonst durch kleinere Bilder "verlieren"
   wuerde; ab Tablet-Breite wieder je eine eigene Caption pro Bild
   (s. User-Feedback: "auf Desktop die beiden Texte nicht zusammenmachen"). */
.showcase-shots {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: .5rem;
}
.showcase-shot {
  margin: 0;
  flex: 0 1 280px;
  min-width: 0;
}
.showcase-img {
  margin: 0;
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 44px rgba(0,0,0,.35);
}
.showcase-shot-caption {
  display: none;
  margin: 1.5rem 0 0;
  text-align: left;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}
.showcase-caption-mobile {
  display: block;
  margin: 1.25rem auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 480px) {
  .showcase-shot-caption { display: block; }
  .showcase-caption-mobile { display: none; }
}

/* ── Scroll-Reveal: Screenshots kommen von aussen zusammen, Value-Cards
   blenden gestaffelt ein. Zwei Ebenen, je nach Browser-Support:
   1) Basis/Fallback (alle Browser inkl. Safari/Firefox ohne Scroll-Driven-
      Animations-Support): JS (site-reveal.js) togglet .is-visible per
      IntersectionObserver, einmalig beim Reinscrollen, CSS-Transition.
   2) Progressive Enhancement (Chrome/Edge, s. @supports unten): echte
      scroll-positionsgebundene Animation via animation-timeline:view() -
      Fortschritt haengt direkt an der Scrollposition des Elements, kein
      "hartes" Einmal-Antriggern mehr, JS wird dafuer gar nicht gebraucht.
   Beide Ebenen sind reine Optik (Inhalt immer im DOM), automatisch
   responsive (an Element-/Viewportgroesse gebunden, kein fixer Pixelwert)
   und respektieren prefers-reduced-motion vollstaendig. */
.showcase-shots .showcase-img {
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,.8,.3,1);
}
.showcase-shots .showcase-shot:first-child .showcase-img { transform: rotate(-3deg) translateX(-56%); }
.showcase-shots .showcase-shot:last-child .showcase-img { transform: rotate(3deg) translateX(56%); }
.site-showcase.is-visible .showcase-shot:first-child .showcase-img { opacity: 1; transform: rotate(-3deg) translateX(2%); }
.site-showcase.is-visible .showcase-shot:last-child .showcase-img { opacity: 1; transform: rotate(3deg) translateX(-2%); }

@keyframes reveal-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes reveal-left { from { opacity: 0; transform: translateX(-56%); } to { opacity: 1; transform: rotate(-3deg) translateX(2%); } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(56%); } to { opacity: 1; transform: rotate(3deg) translateX(-2%); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .showcase-shots .showcase-img {
      transition: none;
      animation: reveal-left linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .showcase-shots .showcase-shot:first-child .showcase-img { animation-name: reveal-left; }
    .showcase-shots .showcase-shot:last-child .showcase-img { animation-name: reveal-right; }
  }
}
/* ── Section-Überschrift ── */
.site-section-title {
  max-width: 960px;
  margin: 0 auto 1.5rem;
  padding: clamp(2.5rem, 6vw, 3.5rem) 1.5rem 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: -.005em;
}

/* ── Value-Props (eine einheitliche Kachel-Sektion statt zweier
   unterschiedlich gestalteter Blöcke, s. User-Feedback 2026-07-12) ── */
/* Feste statt fluide Spaltenzahl (kein auto-fit) - bei 6 Karten sonst
   ungleiche letzte Zeile möglich, je nach Viewport-Breite. 1/2/3 Spalten
   teilen 6 alle ohne Rest. */
.site-values {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1.5rem clamp(3.5rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 600px) {
  .site-values { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .site-values { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: left;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.site-values.is-visible .value-card { opacity: 1; transform: none; }
.site-values.is-visible .value-card:nth-child(2) { transition-delay: .08s; }
.site-values.is-visible .value-card:nth-child(3) { transition-delay: .16s; }
.site-values.is-visible .value-card:nth-child(4) { transition-delay: .24s; }
.site-values.is-visible .value-card:nth-child(5) { transition-delay: .32s; }
.site-values.is-visible .value-card:nth-child(6) { transition-delay: .4s; }

/* Scroll-Driven-Animations-Browser: jede Karte haengt an ihrer eigenen
   View-Timeline, kein manuelles Stagger noetig - Karten derselben Zeile
   erscheinen zusammen, spaetere Zeilen folgen automatisch beim Scrollen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .value-card {
      transition: none;
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-card { opacity: 1; transform: none; transition: none; }
  .showcase-shots .showcase-img { opacity: 1; transition: none; }
  .showcase-shots .showcase-shot:first-child .showcase-img { transform: rotate(-3deg) translateX(2%); }
  .showcase-shots .showcase-shot:last-child .showcase-img { transform: rotate(3deg) translateX(-2%); }
}
/* Kein JS (site-reveal.js konnte nicht laufen) -> nach kurzer Wartezeit
   ebenfalls sichtbar statt dauerhaft ausgeblendet (progressive enhancement,
   s. .no-js-reveal-fallback in site-reveal.js). */
.no-js .value-card { opacity: 1; transform: none; }
.no-js .showcase-shots .showcase-img { opacity: 1; }
.no-js .showcase-shots .showcase-shot:first-child .showcase-img { transform: rotate(-3deg) translateX(2%); }
.no-js .showcase-shots .showcase-shot:last-child .showcase-img { transform: rotate(3deg) translateX(-2%); }
.value-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-lt);
  color: var(--accent-light);
  margin-bottom: 1rem;
}
.value-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--text);
}
.value-card p {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.75rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8rem;
  color: var(--muted-aaa);
}
.site-footer-made-in { display: inline-flex; align-items: center; gap: .4rem; }
.site-footer-made-in img { display: block; border-radius: 2px; }
/* Nur auf Mobile sichtbar - auf Desktop/Tablet stehen dieselben Links schon
   im Header (s. User-Feedback 2026-07-12). */
.site-footer-links { display: none; gap: 1.25rem; }
.site-footer .site-footer-links a {
  color: var(--accent-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(141, 164, 123, .4);
}
.site-footer .site-footer-links a:hover { color: var(--accent-light); text-decoration-color: var(--accent-light); }
.site-footer a { color: var(--muted-aaa); text-decoration: none; }
.site-footer a:hover { color: var(--muted); }

/* ── Legal/Content-Seiten (ueber-sponti.php, datenschutz.php) ── */
.site-page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem clamp(4rem, 8vw, 6rem);
}
.site-back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
}
.site-back:hover { color: var(--text); }
.site-page h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 1.75rem;
}
.site-page h1.section-divider { margin-top: 3.5rem; }
.site-page h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 2.25rem 0 .6rem;
}
.site-page h2.no-top-margin { margin-top: 0; }
.site-page h3 {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 1.75rem 0 .6rem;
}
.site-page .h3-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.site-page p {
  margin: 0 0 .9rem;
  line-height: 1.7;
  font-size: .96rem;
  color: var(--text);
}
.site-page ul {
  margin: 0 0 .9rem;
  padding-left: 1.25rem;
  line-height: 1.7;
  font-size: .96rem;
}
.site-page table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: .5rem 0 1rem; }
.site-page th, .site-page td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.site-page th { color: var(--muted); font-weight: 600; }
.site-page a { color: var(--accent-green); }
#operator-name-canvas { vertical-align: baseline; margin: 0; padding: 0; display: inline-block; position: relative; top: 4px; }

.site-intro p { margin-bottom: 1.1rem; }
.donate-disclaimer { font-size: .82rem; color: var(--muted-aaa); margin-bottom: 2rem !important; }

.donate-card {
  margin-bottom: 2.5rem;
}
.donate-presets { display: flex; gap: .6rem; margin: 0 0 1rem; flex-wrap: wrap; }
.donate-preset {
  padding: .55rem 1.15rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.donate-preset:hover { background: rgba(255,255,255,.05); }
.donate-preset.active { background: var(--accent-green); border-color: var(--accent-green); color: var(--bg); }
.donate-custom { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; font-size: .88rem; color: var(--muted); }
.donate-custom span { white-space: nowrap; }
.donate-stepper { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.donate-stepper input { width: 4.4rem; padding: .5rem .3rem; border: none; background: transparent; color: inherit; text-align: center; font-size: .92rem; }
.donate-stepper input::-webkit-outer-spin-button,
.donate-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.donate-stepper input[type=number] { -moz-appearance: textfield; }
.donate-step { width: 2.1rem; border: none; background: transparent; color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.donate-step:hover { background: rgba(255,255,255,.08); color: var(--text); }
.donate-step:first-child { border-right: 1px solid var(--line-strong); }
.donate-step:last-child { border-left: 1px solid var(--line-strong); }
#donate-submit {
  padding: .75rem 2rem;
  border-radius: 10px;
  border: none;
  background: var(--accent-green);
  color: var(--bg);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  width: auto;
}
#donate-submit:hover { background: var(--accent-light); }
#donate-submit:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  /* Header bleibt auf Mobile eine einzige Zeile (Logo + CTA) - die
     Textlinks wandern in den Footer statt in eine zweite Header-Zeile
     umzubrechen (s. User-Feedback 2026-07-12). */
  .site-nav { padding: .9rem 1.1rem; }
  .site-nav-links { display: none; }
  .site-nav-cta { padding: .42rem .8rem; font-size: .82rem; }
  .site-nav-logo { height: 19px; }
  .site-footer-links { display: flex; }
  .site-hero { padding: 1.75rem 1.25rem 2rem; }
  .site-showcase { padding-left: 1.25rem; padding-right: 1.25rem; }
  .site-values { padding-left: 1.25rem; padding-right: 1.25rem; gap: 1rem; }
  .value-card { padding: 1.35rem 1.25rem; }
  .site-btn { min-height: 50px; padding: 0 1.5rem; font-size: 1rem; width: 100%; max-width: 320px; }
  /* Nach der generischen .site-btn-Mobilregel, damit der Hero-CTA nicht auf
     die gleiche Grösse wie andere Buttons zurückfällt (war auf Mobile
     unbeabsichtigt kleiner als auf Desktop, s. User-Feedback 2026-07-12). */
  .hero-cta { min-height: 56px; padding: 0 2rem; font-size: 1.05rem; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: .75rem; }
  #donate-submit { width: 100%; }
}