/* Grünlage Golf — Marketing-Site. Deep-Pine-Design, System-Fonts, kein CDN. */
:root {
  color-scheme: light dark;
  --fairway: #1B5E20;
  --fairway-dark: #0D3B12;
  --pine-deep: #041406;
  --gold: #C9A227;
  --gold-light: #E3C24C;
  --flag: #C62828;
  --sand: #F3EEE2;
  --ink: #1c221c;
  --muted: #6b756b;
  --card: #ffffff;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --maxw: 960px;
}
@media (prefers-color-scheme: dark) {
  :root { --sand: #10160f; --ink: #e8ece8; --muted: #9aa79a; --card: #182117; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); line-height: 1.6;
  color: var(--ink); background: var(--sand);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fairway); }
@media (prefers-color-scheme: dark) { a { color: var(--gold-light); } }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Kopfzeile */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  /* `flex-wrap` und `gap` statt reinem space-between: die Leiste traegt
     inzwischen zehn Eintraege. Ohne Umbruch schiebt die Linkgruppe sich in
     der mittleren Breite (720-1000px) unter den Markennamen, statt in eine
     zweite Zeile zu gehen — genau das war zu sehen, als der zehnte Eintrag
     dazukam. */
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 18px;
  padding: 14px max(24px, calc((100% - var(--maxw)) / 2));
  background: var(--sand);
  border-bottom: 1px solid rgba(127, 127, 127, .18);
}
/* Der Markenname gibt nie Platz ab und bricht nie um — er ist der Anker,
   an dem sich das Auge orientiert. Die Links weichen aus, nicht er. */
.site-nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: inherit;
  text-decoration: none; flex: 0 0 auto; white-space: nowrap; }
.site-nav .brand img { width: 32px; height: 32px; border-radius: 8px; }
/* Abstand ueber `column-gap` statt `margin-left`: bei einem Umbruch traegt
   ein Aussenabstand den Abstand in die naechste Zeile hinein und laesst die
   Reihen ungleich beginnen. */
.site-nav > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  column-gap: 18px; row-gap: 4px; min-width: 0; }
.site-nav a.navlink { margin-left: 0; text-decoration: none; color: var(--muted); font-size: .95rem;
  white-space: nowrap; }
.site-nav a.navlink:hover { color: var(--ink); }

/* Schmal: Brand über den Links, Links sauber umbrechend zentriert —
   nebeneinander wird es darunter zu gedraengt. Die Schwelle liegt bei
   979px und nicht mehr bei 719px, weil zehn Eintraege in einer Zeile
   deutlich mehr Breite brauchen als die acht von vorher. */
@media (max-width: 979px) {
  .site-nav { flex-direction: column; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .site-nav > div { justify-content: center; }
}

/* Hero (Deep Pine) */
.hero {
  background: linear-gradient(160deg, var(--fairway-dark), var(--pine-deep));
  color: #f2f5f0; text-align: center; padding: 72px 24px 84px;
}
.hero img.icon { width: 112px; height: 112px; border-radius: 26px; margin: 0 auto 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.hero h1 { font-size: 2.4rem; margin: 0 0 8px; letter-spacing: -.5px; }
.hero .accent { color: var(--gold-light); }
.hero p.claim { font-size: 1.2rem; color: #cdd6cd; max-width: 34ch; margin: 0 auto 28px; }
.badge {
  display: inline-block; border: 1px solid rgba(227,194,76,.5); color: var(--gold-light);
  padding: 8px 18px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  letter-spacing: .3px;
}
.hero p.subclaim { font-size: .95rem; color: #9fb09f; margin: 14px auto 0; }

/* Store-Verweise im Hero. Nur das iPhone ist verlinkt — für Android läuft der
   geschlossene Test, ein Link ins Leere hilft niemandem. */
.store-links { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.store-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  background: #f2f5f0; color: #12200f; text-decoration: none;
  padding: 10px 26px; border-radius: 12px; line-height: 1.15;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .12s ease;
}
.store-btn:hover { transform: translateY(-2px); }
.store-btn-top { font-size: .78rem; letter-spacing: .2px; }
.store-btn-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -.3px; }
.store-soon { font-size: .88rem; color: #9fb09f; }
.store-req { margin: 4px 0 0; font-size: .82rem; color: #7d8d7d; }

/* Gelände- und Bearbeitungs-Abschnitt: Bild neben Text. Unter 760 px stapelt
   sich beides, das Bild zuerst — auf dem Handy trägt es die Aussage. */
.terrain-layout {
  display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 36px;
  align-items: start; margin-top: 28px;
}
.terrain-layout.reverse { grid-template-columns: 1fr minmax(220px, 320px); }
.terrain-layout.reverse .phone { order: 2; }
.terrain-points { list-style: none; margin: 0; padding: 0; }
.terrain-points li { margin: 12px 0; padding-left: 26px; position: relative; color: var(--muted); }
.terrain-points li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px;
  border-radius: 3px; background: var(--fairway, #1b5e20);
}
.terrain-points li strong { color: var(--ink); }
.terrain-note { margin-top: 22px; color: var(--muted); font-size: .95rem; }
.howto-title { margin: 0 0 10px; font-size: 1.05rem; }
.howto { margin: 0 0 26px; padding-left: 22px; }
.howto li { margin: 10px 0; color: var(--muted); }
.howto li strong { color: var(--ink); }
@media (max-width: 760px) {
  .terrain-layout, .terrain-layout.reverse { grid-template-columns: 1fr; gap: 24px; }
  .terrain-layout.reverse .phone { order: 0; }
}

/* iOS/Android-Umschalter über der Screenshot-Galerie */
.platform-toggle {
  display: flex; justify-content: center; gap: 0; margin: 0 auto 28px;
  width: fit-content; border: 1px solid rgba(27,94,32,.35); border-radius: 999px;
  overflow: hidden; background: rgba(255,255,255,.6);
}
.pt-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 10px 26px; font-size: 1rem; font-weight: 600; color: var(--fairway, #1b5e20);
}
.pt-btn.active { background: var(--fairway, #1b5e20); color: #fff; }

/* Sektionen */
/* Achtung: sitzt auf demselben Element wie .wrap und überschreibt dessen
   padding — horizontales Padding hier mitführen! */
section.block { padding: 64px 24px; scroll-margin-top: 76px; }
section.block h2 { font-size: 1.6rem; margin: 0 0 8px; }
section.block .lead { color: var(--muted); max-width: 60ch; margin: 0 0 36px; }

/* Feature-Grid */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.feature { background: var(--card); border-radius: 16px; padding: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.feature h3 { margin: 0 0 6px; font-size: 1.1rem; }
.feature p { margin: 0; color: var(--muted); font-size: .96rem; }
.feature .ico { font-size: 1.6rem; margin-bottom: 10px; }

/* „Sie denkt mit" — Situationskarten mit Fairway-Akzentkante */
.smart { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.smart-item { background: var(--card); border-radius: 14px; padding: 20px 22px;
  border-left: 3px solid var(--fairway); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.smart-item h3 { margin: 0 0 6px; font-size: 1.05rem; }
.smart-item p { margin: 0; color: var(--muted); font-size: .96rem; }
@media (prefers-color-scheme: dark) { .smart-item { border-left-color: var(--gold-light); } }

/* Platz-erfassen-Band */
.course-band { background: var(--card); border-radius: 20px; padding: 36px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06); border-top: 4px solid var(--gold); }
.course-band ul.course-points { list-style: none; margin: 20px 0; padding: 0; }
.course-band .course-points li { margin: 10px 0; padding-left: 26px; position: relative; }
.course-band .course-points li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.course-band .course-share { margin: 18px 0 0; }

/* Mitmach-Portal-Band — sitzt direkt unter dem Kopfbereich und ist bewusst
   das einzige dunkle Element so weit oben: es soll sich vom Rest der Seite
   abheben, ohne den Kopfbereich zu wiederholen. Farben und Verlauf sind
   dieselben wie beim Datenschutz-Band weiter unten, damit die Seite nicht
   zwei verschiedene dunkle Sprachen spricht. */
.portal-band { background: linear-gradient(160deg, var(--fairway-dark), var(--pine-deep));
  color: #f2f5f0; border-radius: 20px; padding: 36px; border-top: 4px solid var(--gold); }
.portal-band h2 { color: #fff; margin: 4px 0 0; }
.portal-kicker { margin: 0; font-size: .82rem; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold-light); font-weight: 700; }
.portal-band .portal-lead { font-size: 1.08rem; color: #dbe4db; margin: 14px 0 0; max-width: 62ch; }
.portal-band ul.portal-points { list-style: none; margin: 22px 0 0; padding: 0; }
.portal-band .portal-points li { margin: 10px 0; padding-left: 26px; position: relative; color: #dbe4db; }
.portal-band .portal-points li strong { color: #fff; }
.portal-band .portal-points li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.portal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 26px 0 0; }
.portal-cta { display: inline-block; background: var(--gold); color: #241d00; text-decoration: none;
  font-weight: 700; padding: 13px 26px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .12s ease; }
.portal-cta:hover { transform: translateY(-2px); }
.portal-secondary { color: var(--gold-light); text-decoration: underline; font-weight: 600; }
.portal-band .portal-note { margin: 20px 0 0; font-size: .9rem; color: #9fb09f; }
/* Der einzige Navigationslink, der die Seite verlaesst — deshalb als
   einziger in Gold, damit er im Band aus gleichfarbigen Links auffaellt. */
.navlink-portal { color: var(--gold-light); font-weight: 700; }

/* Datenschutz-Band */
.privacy-band { background: linear-gradient(160deg, var(--fairway), var(--fairway-dark));
  color: #f2f5f0; border-radius: 20px; padding: 36px; }
.privacy-band h2 { color: #fff; }
.privacy-band ul { margin: 16px 0 0; padding-left: 20px; }
.privacy-band li { margin: 6px 0; }

/* Screenshot-Galerie */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 24px; }
.phone { background: #000; border-radius: 34px; padding: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.phone img { border-radius: 26px; }
/* Android-Geräterahmen: eckiger und mit schmalerem Rand als das iPhone. */
.shots.android .phone { border-radius: 18px; padding: 7px; }
.shots.android .phone img { border-radius: 12px; }
.phone.placeholder { aspect-ratio: 9/19.5; display: flex; align-items: center; justify-content: center;
  color: #7c887c; font-size: .85rem; text-align: center; background: #11170f; }

/* Apple-Watch-Sektion */
.watch-band { background: linear-gradient(160deg, var(--fairway-dark), var(--pine-deep));
  color: #f2f5f0; border-radius: 20px; padding: 40px 36px; }
.watch-band h2 { color: #fff; }
.watch-band .lead { color: #cdd6cd; }
.watch-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 720px) { .watch-layout { grid-template-columns: 1.05fr 1fr; } }
.watch-features { list-style: none; margin: 0; padding: 0; }
.watch-features li { margin: 14px 0; padding-left: 28px; position: relative; }
.watch-features li strong { color: #fff; }
.watch-features li::before { content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold-light); }
.watch-shots { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.watch { background: #0b0b0b; border-radius: 34px; padding: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,.4); width: 188px; }
.watch img { border-radius: 28px; }

/* Mindestversionen: kompakte Zeile unter den Uhren-Punkten. */
.requirements {
  list-style: none; margin: 32px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(227,194,76,.25);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 24px;
}
.requirements li { color: #cdd6cd; font-size: .93rem; }
.requirements li span { display: block; color: var(--gold-light); font-weight: 600; }

/* Rechtstext-Seiten */
.doc { max-width: 720px; margin: 0 auto; padding: 40px 24px 72px; }
.doc h1 { font-size: 1.6rem; }
.doc h2 { font-size: 1.15rem; margin-top: 1.8em; }
.doc .muted { color: var(--muted); font-size: .85rem; }

/* FAQ */
.faq details { background: var(--card); border-radius: 12px; padding: 4px 18px; margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; }
.faq details p { color: var(--muted); margin-top: 0; }

/* Fußzeile */
footer.site-footer { background: var(--pine-deep); color: #aeb8ae; padding: 40px 24px; }
footer.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
footer.site-footer a { color: #cdd6cd; text-decoration: none; margin-right: 18px; }
footer.site-footer a:hover { color: #fff; }
footer.site-footer .attr { font-size: .82rem; max-width: 42ch; }

/* Mobil: kompaktere Abstände und Kacheln */
@media (max-width: 719px) {
  section.block { padding: 44px 20px; }
  .hero { padding: 48px 20px 56px; }
  .hero h1 { font-size: 2rem; }
  .hero img.icon { width: 92px; height: 92px; }
  .course-band, .privacy-band, .watch-band { padding: 26px 20px; }
  section.block .lead { margin-bottom: 24px; }
}

/* Golftap: Download-Liste und Teaser */
.dl-list { display: flex; flex-direction: column; gap: 12px; }
.dl-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border-radius: 16px; padding: 18px 20px;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .12s ease;
}
.dl-item:hover { transform: translateY(-2px); }
.dl-item .dl-ico { font-size: 1.5rem; line-height: 1.3; }
.dl-item .dl-body { display: flex; flex-direction: column; gap: 2px; }
.dl-item .dl-body strong { color: var(--fairway); }
@media (prefers-color-scheme: dark) { .dl-item .dl-body strong { color: var(--gold-light); } }
.dl-item .dl-body span { color: var(--muted); font-size: .94rem; }
.dl-note { color: var(--muted); font-size: .86rem; margin-top: 20px; }
.golftap-teaser {
  background: linear-gradient(135deg, var(--fairway-dark), var(--pine-deep));
  border-radius: 20px; padding: 36px 32px; color: #eef3ee;
}
.golftap-teaser h2 { color: #fff; margin: 0 0 8px; font-size: 1.6rem; }
.golftap-teaser p { color: #c8d4c8; max-width: 62ch; margin: 0 0 20px; }
.golftap-teaser .tagline {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 10px;
}
.golftap-btn {
  display: inline-block; background: var(--gold); color: #1a1405;
  font-weight: 700; padding: 12px 22px; border-radius: 12px; text-decoration: none;
}
.golftap-btn:hover { background: var(--gold-light); }

/* Statistik-Sektion: Aufzählung links, zwei Telefone (iPhone + Android) rechts. */
.stats-layout { display: grid; grid-template-columns: 1.1fr minmax(300px, 520px); gap: 36px; align-items: center; }
.stats-points { list-style: none; margin: 0; padding: 0; }
.stats-points li { margin: 14px 0; padding-left: 26px; position: relative; color: var(--muted); }
.stats-points li strong { color: var(--fairway-dark, #0D3B12); }
.stats-points li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px;
  border-radius: 3px; background: var(--gold, #C9A227);
}
.stats-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.stats-shots figure { margin: 0; }
.stats-shots figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 10px; }
.stats-shots .phone.android { border-radius: 18px; padding: 7px; }
.stats-shots .phone.android img { border-radius: 12px; }
.stats-note { color: var(--muted); font-size: .95rem; margin-top: 24px; }
@media (max-width: 820px) {
  .stats-layout { grid-template-columns: 1fr; }
}