/* Hoppster-Webseite. Aufbau wie eine Produktseite: feste Leiste mit Unschärfe, die beim Scrollen
   nach unten wegtaucht (site.js), große Schrift, Bilder aus der App in iPhone-Rahmen, Abschnitte
   blenden beim Scrollen ein. Akzent ist das Rasengrün der App (AccentTone.rasen in Theme.swift).
   Keine fremden Schriften oder Skripte – so steht es in der Datenschutzerklärung. */
:root {
  --akzent: #12784a;
  --akzent-tief: #0b5a36;
  --akzent-weich: rgba(18, 120, 74, 0.10);
  --text: #111;
  --text-2: #6e6e73;
  --hintergrund: #fff;
  --flaeche: #f5f5f7;
  --rand: rgba(0, 0, 0, 0.08);
  --leiste: rgba(255, 255, 255, 0.72);
  --rahmen: #1a1a1c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --akzent: #34a06a;
    --akzent-tief: #2b8a5a;
    --akzent-weich: rgba(52, 160, 106, 0.14);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --hintergrund: #000;
    --flaeche: #131315;
    --rand: rgba(255, 255, 255, 0.10);
    --leiste: rgba(0, 0, 0, 0.62);
    --rahmen: #2a2a2d;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hintergrund); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--akzent); text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }

/* Leiste: immer sichtbar. Oben weiß, sobald gescrollt wird (site.js setzt „gescrollt“) hellgrau und
   durchscheinend wie bei apple.de. Bewusst in hell und dunkel gleich: die Seite ist im Dunkelmodus schwarz,
   die helle Leiste ist der Kontrast dazu. */
.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 52px;
  background: #fff; color: #111;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: background .3s ease, box-shadow .3s ease;
}
.leiste.gescrollt {
  background: rgba(244, 244, 246, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}
.leiste .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.marke { display: flex; align-items: center; gap: 9px; color: #111; font-weight: 600; font-size: 17px; letter-spacing: -0.2px; }
.marke img { width: 24px; height: 24px; border-radius: 6px; }
.leiste nav { display: flex; gap: 28px; }
.leiste nav a { color: #111; font-size: 14px; opacity: .75; transition: opacity .2s; }
.leiste nav a:hover { opacity: 1; }

/* Sektionen */
section { padding: 96px 0; }
.anker { scroll-margin-top: 52px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: clamp(42px, 7vw, 76px); font-weight: 700; }
h2 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; }
h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.15; }
p { margin: 0; }
.gross { font-size: clamp(19px, 2.2vw, 24px); color: var(--text-2); line-height: 1.4; }
.klein { font-size: 14px; color: var(--text-2); }
.gruen { color: var(--akzent); }

/* Auftakt */
.auftakt { padding: 140px 0 0; text-align: center; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 0%, var(--akzent-weich), transparent 70%); }
.auftakt .gross { max-width: 640px; margin: 20px auto 0; }
.abzeichen { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 8px 16px; border-radius: 999px;
  background: var(--flaeche); border: 1px solid var(--rand); font-size: 14px; font-weight: 500; color: var(--text); }
.abzeichen i { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); display: inline-block; }
.buehne { position: relative; height: 560px; margin-top: 56px; overflow: hidden; }
.buehne .phone { position: absolute; left: 50%; bottom: -160px; transform: translateX(-50%); width: 340px; }
.buehne .phone.links { transform: translateX(-118%) rotate(-6deg) translateY(90px); width: 280px; opacity: .92; }
.buehne .phone.rechts { transform: translateX(18%) rotate(6deg) translateY(90px); width: 280px; opacity: .92; }
.buehne::after { content: ""; position: absolute; inset: auto 0 0 0; height: 220px;
  background: linear-gradient(to bottom, transparent, var(--hintergrund)); pointer-events: none; }

/* iPhone: Bild und Gehäuse stecken in einem SVG (Symbol #rahmen oben in index.html), das mit der Breite
   des Telefons mitskaliert – Tasten und Dynamic Island bleiben so immer im richtigen Verhältnis. */
.phone { width: 300px; position: relative; }
.phone svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }

/* Werte */
.werte { background: var(--flaeche); }
.werte .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.werte h3 { margin-bottom: 10px; }
.werte p { color: var(--text-2); font-size: 17px; }
.werte .kopf { grid-column: 1 / -1; max-width: 720px; margin-bottom: 12px; }
.werte .kopf .gross { margin-top: 16px; }

/* Funktionen: Zeilen, Text und Telefon im Wechsel */
.funktion { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; }
.funktion:nth-child(even) .text { order: 2; }
.funktion .text .klein { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--akzent); margin-bottom: 14px; }
.funktion .text h3 { margin-bottom: 14px; }
.funktion .text p { color: var(--text-2); font-size: 18px; max-width: 440px; }
.funktion .bild { display: flex; justify-content: center; }
.funktion .phone { width: 280px; }

/* Zahlen */
.zahlen { background: var(--akzent); color: #fff; }
.zahlen .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.zahlen b { display: block; font-size: clamp(36px, 5vw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.zahlen span { display: block; margin-top: 10px; font-size: 15px; opacity: .85; }
.zahlen p { grid-column: 1 / -1; text-align: center; font-size: 14px; opacity: .7; margin-top: 8px; }

/* Beta: eigener Aufruf zwischen Zahlen und Kontakt. Die drei Schritte stehen da, weil immer
   dieselbe Frage kommt – Tester brauchen weder ein Entwickler-Konto noch Geld, nur TestFlight. */
.beta { background: var(--flaeche); text-align: center; }
.beta .klein { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--akzent); margin-bottom: 14px; }
.beta .gross { max-width: 660px; margin: 18px auto 0; }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 48px 0 40px; text-align: left; }
.schritte > div { background: var(--hintergrund); border: 1px solid var(--rand); border-radius: 18px; padding: 26px 24px; }
.schritte b { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--akzent); color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.schritte h3 { font-size: 19px; margin-bottom: 8px; }
.schritte p { color: var(--text-2); font-size: 16px; }
/* Der Hinweis unter dem Knopf ist auch „klein“, aber kein Kapitälchen-Titel – Zeile darüber zurücknehmen. */
.beta .hinweis { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-2);
  max-width: 560px; margin: 22px auto 0; }

/* Umzug: was aus anderen Apps übernommen wird. Weißer Grund, damit er sich vom grauen
   Beta-Abschnitt darüber absetzt; die Quellen-Karten deshalb umgekehrt auf --flaeche. */
.umzug { text-align: center; }
.umzug .klein { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--akzent); margin-bottom: 14px; }
.umzug .gross { max-width: 680px; margin: 18px auto 0; }
.quellen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 44px 0 36px; text-align: left; }
.quellen > div { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 24px; }
.quellen h3 { font-size: 19px; margin-bottom: 8px; }
.quellen p { color: var(--text-2); font-size: 16px; }
/* Die vier Zusagen darunter: zweispaltig, Haken statt Aufzählungspunkt. */
.haken { list-style: none; padding: 0; margin: 0 auto; max-width: 780px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; text-align: left; }
.haken li { position: relative; padding-left: 28px; color: var(--text-2); font-size: 16px; }
.haken li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--akzent); font-weight: 700; }

/* Kontakt */
.kontakt { text-align: center; }
.kontakt .gross { max-width: 560px; margin: 16px auto 28px; }
.knopf { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--akzent); color: #fff; font-weight: 600; font-size: 17px;
  transition: background .2s, transform .2s; }
.knopf:hover { background: var(--akzent-tief); transform: translateY(-1px); }

/* Fuß */
footer { border-top: 1px solid var(--rand); padding: 28px 0 44px; font-size: 13px; color: var(--text-2); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer a { color: var(--text-2); margin-right: 18px; }
footer a:hover { color: var(--text); }

/* Unterseiten (Impressum, Datenschutz) */
.seite { padding-top: 120px; max-width: 720px; }
.seite h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 12px; }
.seite h2 { font-size: 24px; margin: 44px 0 10px; }
.seite h3 { font-size: 18px; margin: 24px 0 8px; }
.seite p, .seite li { color: var(--text-2); font-size: 17px; }
.seite p { margin-bottom: 14px; }
.seite ul { padding-left: 22px; margin: 0 0 14px; }
.seite li { margin-bottom: 6px; }
.seite address { font-style: normal; color: var(--text); line-height: 1.7; }

/* Einblenden beim Scrollen: normale Abschnitte kommen von unten. In den Funktionszeilen fährt der Text
   von der einen und das Telefon von der anderen Seite herein (Philipp, 20.09.), das Telefon etwas später.
   Die Zeile selbst bleibt sichtbar (kein Versatz), nur ihre beiden Hälften bewegen sich. */
.rein { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rein.da { opacity: 1; transform: none; }
.funktion.rein { opacity: 1; transform: none; }
.funktion .text, .funktion .bild { opacity: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.funktion .text { transform: translateX(-80px); }
.funktion .bild { transform: translateX(80px); transition-delay: .12s; }
.funktion:nth-child(even) .text { transform: translateX(80px); }
.funktion:nth-child(even) .bild { transform: translateX(-80px); }
.funktion.da .text, .funktion.da .bild { opacity: 1; transform: none; }
#funktionen { overflow: hidden; }   /* die Hälften starten außerhalb – kein seitliches Scrollen dadurch */
@media (prefers-reduced-motion: reduce) {
  .rein, .funktion .text, .funktion .bild { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 820px) {
  section { padding: 72px 0; }
  .marke span { display: none; }   /* auf dem Handy nur das Icon, sonst klebt der Name am Menü */
  .leiste nav { gap: 18px; }
  .leiste nav a { font-size: 13px; }
  .auftakt { padding-top: 110px; }
  .buehne { height: 420px; margin-top: 40px; }
  .buehne .phone { width: 260px; bottom: -120px; }
  .buehne .phone.links, .buehne .phone.rechts { display: none; }
  .werte .wrap { grid-template-columns: 1fr; gap: 32px; }
  .funktion { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; text-align: center; }
  .funktion:nth-child(even) .text { order: 0; }
  .funktion .text p { margin: 0 auto; }
  .funktion .phone { width: 240px; }
  .funktion .text { transform: translateX(-40px); }
  .funktion .bild { transform: translateX(40px); }
  .funktion:nth-child(even) .text { transform: translateX(40px); }
  .funktion:nth-child(even) .bild { transform: translateX(-40px); }
  .zahlen .wrap { grid-template-columns: 1fr 1fr; }
  .schritte { grid-template-columns: 1fr; gap: 16px; margin: 36px 0 32px; }
  .quellen { grid-template-columns: 1fr; gap: 14px; margin: 32px 0 28px; }
  .haken { grid-template-columns: 1fr; gap: 10px; }
}

/* Schmale Handys: seit dem Menüpunkt „Beta“ sind es fünf Einträge – enger setzen, sonst bricht die Leiste. */
@media (max-width: 400px) {
  .leiste nav { gap: 13px; }
}