/* ============================================================
   GOLFAMORE — golfamore.php
   Nutzt tokens.css (Farben, Fonts, Abstände) + seite.css (Hero,
   .t-*-Stufen, Knöpfe). Alle eigenen Klassen mit .ga- präfixiert.

   MERKBILD: eine senkrechte Lime-Kante, die alles halbiert — sie
   schneidet das Hero-Bild, die Preistafel und den Abschluss.
   Grundstimmung dunkel (--pine/--tanne); hell wird die Seite genau
   zweimal: die Mint-Atempause der drei Schritte und die weiße Insel
   des fremden Bestellfensters.

   Lime (#CCFF00) NUR auf Dunkel oder als Fläche mit dunkler Schrift.
   ============================================================ */

.ga *{box-sizing:border-box}
.ga{--ga-max:1180px;--ga-k:50%}
/* .fluss steht in seite.css auf Weiss (0-1-0) — hier trägt die Seite
   ihre eigene Grundfläche, deshalb mit zwei Klassen (0-2-0). */
.ga.fluss{background:var(--pine);color:rgba(255,255,255,.76)}
.ga-edge{width:min(var(--ga-max),100%);margin-inline:auto;padding-inline:var(--inset)}
.ga a{color:var(--lime)}
/* ACHTUNG: .ga a (0-1-1) schlaegt .btn-lime/.btn-gruen (0-1-0) — sonst steht
   Lime auf Lime und der Knopf ist leer. Dieselbe Falle wie am 10.09.2026. */
.ga .btn-lime{color:var(--tanne)}
.ga .btn-lime:hover{color:var(--pine)}
.ga .btn-gruen{color:#fff}
.ga .btn-ghost{color:#fff}
.ga .ga-fenster .btn-gruen{color:#fff}
.ga p{margin:0}

/* Auf Dunkel sind die Stufen aus seite.css auf helle Schrift zu heben —
   .t-lead/.t-klein/.t-text tragen dort --sekundaer bzw. --text. */
.ga-pine,.ga-tanne{color:rgba(255,255,255,.76)}
.ga-pine .t-lead,.ga-tanne .t-lead,.ga-pine .t-klein,.ga-tanne .t-klein,
.ga-pine .t-text,.ga-tanne .t-text{color:rgba(255,255,255,.74)}
.ga-pine .t-mikro,.ga-tanne .t-mikro{color:rgba(255,255,255,.52)}
.ga-pine h2,.ga-pine h3,.ga-tanne h2,.ga-tanne h3{color:#fff}
.ga-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 00 · Hero ---------- */
.ga-hero{min-height:clamp(540px,82svh,840px)}
/* Links trägt der Text, rechts bleibt das Bild licht — dort sitzt die
   Kennzahl. Der senkrechte Verlauf hält die Schlagzeile lesbar. */
.ga-hero::after{background:
  linear-gradient(180deg,rgba(6,26,17,.46) 0%,rgba(6,26,17,.26) 38%,rgba(6,26,17,.6) 72%,rgba(6,26,17,.94) 100%),
  linear-gradient(100deg,rgba(6,26,17,.62) 0%,rgba(6,26,17,.24) 52%,rgba(6,26,17,0) 78%)}
/* Dieselbe Aufnahme, rechts der Kante in Pine getaucht: das Bild sagt die
   Halbierung, bevor ein Wort dasteht. */
.ga-hero-kalt{position:absolute;inset:0;clip-path:inset(0 0 0 var(--ga-hk,52%));
  transition:clip-path .7s var(--ease)}
.ga-hero-kalt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.34) sepia(.55) hue-rotate(83deg) saturate(2.4)}
.ga-hero-kante{position:absolute;top:0;bottom:0;left:var(--ga-hk,52%);width:1px;z-index:2;
  background:var(--lime);box-shadow:0 0 26px 2px rgba(204,255,0,.4);pointer-events:none}
.js .ga-hero-kalt{--ga-hk:100%}
.js .ga-hero-kante{--ga-hk:100%}
.js .ga-hero.ga-an .ga-hero-kalt,.js .ga-hero.ga-an .ga-hero-kante{--ga-hk:52%}
.ga-hero-kante{transition:left .7s var(--ease)}
.ga-hero-unten{align-items:end}
.ga-hero-zahl{text-align:right;opacity:0;animation:sanft .9s .85s forwards}
.ga-hero-wert{font-size:clamp(30px,4.4vw,58px);line-height:.9;color:var(--lime);
  text-shadow:0 2px 22px rgba(6,26,17,.55)}
.ga-hero-zahl .t-mikro{color:rgba(255,255,255,.72);margin-top:8px;display:block}
@media (max-width:760px){
  .ga-hero-unten{grid-template-columns:1fr}
  .ga-hero-zahl{text-align:left;margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .ga-hero-kalt,.ga-hero-kante{transition:none}
  .js .ga-hero-kalt,.js .ga-hero-kante{--ga-hk:52%}
}

/* ---------- Sektionen ---------- */
.ga-sec{padding-block:calc(var(--luft)*.86)}
.ga-pine{background:var(--pine)}
.ga-tanne{background:var(--tanne)}
/* Die Seite laeuft durchgehend dunkel (Andreas, 11.09.2026). Hell bleibt
   einzig das Bestellfenster von Golfamore — ein fremdes weisses Fenster im
   dunklen Raum, und genau so ist es gemeint. */
.ga-marke{margin-bottom:18px}
.ga-marke .t-mikro{color:var(--lime)}
.ga-kopf h2{margin:0;max-width:16ch;text-wrap:balance}
.ga-lead{margin-top:18px;max-width:62ch}
.ga-kaufsek .ga-lead{color:rgba(255,255,255,.74)}

/* ---------- 01 · Die Rechnung ---------- */
.ga-rechnung .ga-kopf{display:grid;gap:22px}
@media (min-width:900px){
  .ga-rechnung .ga-kopf{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:52px}
  .ga-rechnung .ga-lead{margin-top:0}
}

/* Die Tafel läuft randlos über die volle Breite — der einzige Abschnitt
   ohne --inset. Beide Zahlen stehen als Text im DOM; die Maske deckt
   nur auf, was die Kante erreicht hat. */
.ga-tafel{position:relative;margin-top:46px;border-top:1px solid var(--hairline-dunkel);
  border-bottom:1px solid var(--hairline-dunkel);background:rgba(11,65,43,.5);overflow:hidden}
.ga-tafel-kopf,.ga-tafel-fuss{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  padding:14px var(--inset)}
.ga-tafel-kopf{border-bottom:1px solid var(--hairline-dunkel)}
.ga-tafel-fuss{border-top:1px solid var(--hairline-dunkel)}
.ga-quelle{color:rgba(255,255,255,.62);text-decoration:none;position:relative}
.ga-quelle::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-schnell) var(--ease)}
.ga-quelle:hover::after,.ga-quelle:focus-visible::after{transform:scaleX(1)}
.ga-tafel-leib{padding:clamp(22px,3vw,34px) var(--inset) clamp(26px,3.4vw,44px);display:grid;gap:clamp(18px,2.4vw,30px)}
.ga-preiszeile{display:grid;gap:4px;position:relative}
@media (min-width:700px) and (prefers-reduced-motion:no-preference){
  .js .ga-preiszeile{grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:end;
    column-gap:24px;row-gap:0}
  .js .ga-was{padding-bottom:.55em}
  .js .ga-doppel{grid-column:2}
  .js .ga-spar{grid-column:2;justify-self:end}
}
.ga-was{color:rgba(255,255,255,.56)}
/* Die zwei Fassungen derselben Zahl. RUHEZUSTAND — ohne Skript, bei
   reduzierter Bewegung und auf schmalen Fenstern — ist die gestapelte
   Darstellung: oben der halbe Preis groß in Lime, darunter der volle als
   Kontur. Vollständig lesbar, ganz ohne Bewegung. */
.ga-doppel{position:relative;display:grid;gap:2px}
.ga-voll,.ga-halb{display:block;letter-spacing:-.045em;white-space:nowrap;line-height:.9}
.ga-halb{order:1;color:var(--lime);font-size:clamp(44px,9vw,86px)}
.ga-voll{order:2;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.52);
  font-size:clamp(26px,4vw,42px)}
.ga-spar{color:rgba(255,255,255,.5)}

/* DER SCHNITT — nur mit Skript, nur ohne reduzierte Bewegung, erst ab
   561 px: eine Zahl, rechtsbündig, und die Kante deckt links von sich die
   halbierte Fassung auf. Beide Fassungen haben dieselbe Ziffernzahl und
   tabulare Ziffern, also wechselt der Preis Stelle für Stelle. */
@media (min-width:561px) and (prefers-reduced-motion:no-preference){
  .js .ga-doppel{display:block}
  .js .ga-voll,.js .ga-halb{text-align:right;font-size:clamp(52px,15.6vw,212px);line-height:.88}
  .js .ga-voll{color:transparent}
  .js .ga-halb{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ga-k)) 0 0)}
  .js .ga-spar{opacity:0;transform:translateY(4px);
    transition:opacity var(--t-schnell) var(--ease),transform var(--t-schnell) var(--ease)}
  /* Hover zeigt Information, nicht Farbe: die Ersparnis in Euro. */
  .js .ga-preiszeile:hover .ga-spar,.js .ga-preiszeile:focus-within .ga-spar{opacity:1;transform:none}
}

.ga-tafel-kante{position:absolute;inset:0 var(--inset);pointer-events:none}
.ga-tafel-kante i{position:absolute;top:0;bottom:0;left:var(--ga-k);width:1px;background:var(--lime);
  box-shadow:0 0 22px 1px rgba(204,255,0,.32)}

/* Die Staffel: was nach Runde 1 und Runde 2 übrig ist. Haarlinien, keine Kästen. */
.ga-staffel{margin-top:48px;border-top:1px solid var(--hairline-dunkel)}
.ga-sz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 22px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--hairline-dunkel)}
.ga-sz-nr{color:rgba(255,255,255,.34);font-size:15px}
.ga-sz-text{color:rgba(255,255,255,.72);font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:300;font-size:15px}
.ga-sz-wert{font-size:clamp(20px,2.6vw,30px);color:rgba(255,255,255,.6);white-space:nowrap}
.ga-sz.ist-plus .ga-sz-wert{color:var(--lime)}
.ga-fussnote{margin-top:26px;max-width:64ch;color:rgba(255,255,255,.6)}

/* ---------- 02 · Was gerade läuft ---------- */
.ga-feld{border:1px solid var(--hairline-dunkel);background:rgba(7,48,31,.42)}
.ga-feld .ga-tafel-kopf{padding:14px clamp(18px,3vw,30px)}
.ga-leer{padding:clamp(32px,6vw,76px) clamp(18px,3vw,30px)}
/* Der Leerzustand ist der Normalfall — also trägt er die Sektion.
   Konturschrift wie im Hero: dieselbe Geste, andere Fläche. */
.ga-leer-satz{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.035em;line-height:.94;font-size:clamp(30px,6vw,72px);
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5)}
.ga-leer-meta{margin-top:22px;display:block}
.ga-akzeile{padding:clamp(20px,3vw,30px) clamp(18px,3vw,30px);border-bottom:1px solid var(--hairline-dunkel)}
.ga-akzeile:last-child{border-bottom:0}
.ga-akkopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.ga-akzeile h3{margin:0;color:#fff}
.ga-aktext{margin-top:10px;max-width:70ch}
/* .ga-tanne .t-mikro (0-2-0) wuerde die Schriftfarbe schlagen — die Pille
   braucht deshalb selbst zwei Klassen, sonst steht Lime auf Lime. */
.ga .ga-neu{background:var(--lime);color:var(--tinte);padding:5px 9px 4px;border-radius:var(--r-pill)}
.ga-restlinie{position:relative;height:1px;background:var(--hairline-dunkel);margin-top:20px}
.ga-restlinie i{position:absolute;left:0;top:0;bottom:0;background:var(--lime);width:0;
  transition:width var(--t-lang) var(--ease)}
.ga-restlinie.ga-an i{width:var(--rest,0%)}
.ga-akfuss{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;margin-top:12px}
.ga-akgo{color:var(--lime);text-decoration:none}
.ga-akgo span{display:inline-block;transition:transform var(--t-schnell) var(--ease)}
.ga-akgo:hover span{transform:translateX(4px)}

/* ---------- 03 · Die Pause ---------- */
.ga-bildpause{position:relative;height:clamp(300px,46svh,520px);overflow:hidden;background:var(--pine)}
.ga-bildpause img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.ga-bildpause::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,17,.5) 0%,rgba(6,26,17,.18) 46%,rgba(6,26,17,.72) 100%)}
.ga-pausensatz{position:absolute;left:var(--inset);right:var(--inset);bottom:clamp(26px,5vw,54px);z-index:2;
  color:#fff;max-width:16ch;text-wrap:balance}

/* ---------- 04 · 23 Länder ---------- */
.ga-laender{position:relative;overflow:hidden}
.ga-laender-zahl{position:absolute;top:calc(var(--luft)*.4);right:var(--inset);z-index:0;
  font-size:clamp(150px,26vw,360px);line-height:.8;color:transparent;
  -webkit-text-stroke:1.5px rgba(204,255,0,.22);pointer-events:none}
.ga-laender-satz{position:relative;z-index:1;max-width:40ch}
.ga-laender-satz h2{margin:0 0 14px}
.ga-laenderliste{position:relative;z-index:1;list-style:none;margin:clamp(30px,5vw,56px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.6vw,34px)}
.ga-laenderliste li{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.12;font-size:clamp(20px,3.4vw,44px);color:rgba(255,255,255,.34);
  transition:color var(--t-schnell) var(--ease)}
.ga-laenderliste li:hover{color:rgba(255,255,255,.72)}
.ga-laenderliste li.ist-hier{color:var(--lime)}
.ga-laenderliste li.ist-rest{font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:300;
  text-transform:none;letter-spacing:0;font-size:clamp(14px,1.6vw,17px);align-self:center;
  color:rgba(255,255,255,.48)}

/* ---------- 05 · Drei Schritte (Mint) ---------- */
.ga-schritte-raster{display:grid;gap:clamp(30px,4vw,56px)}
@media (min-width:880px){.ga-schritte-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.ga-schrittliste{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;border-top:1px solid var(--hairline-dunkel)}
.ga-schrittliste li{padding:22px 0;border-bottom:1px solid var(--hairline-dunkel)}
.ga-schrittnr{color:var(--lime);display:block;margin-bottom:8px}
.ga-schrittliste h3{margin:0 0 8px;color:#fff}
.ga-schrittliste p{max-width:56ch}
/* Das Hochformat hängt über die Sektionskante in die nächste Fläche —
   die eine Überlappung der Seite. */
.ga-schrittbild{margin:0;position:relative}
.ga-schrittbild img{width:100%;height:clamp(320px,54svh,620px);object-fit:cover;object-position:50% 34%}
@media (min-width:880px){
  .ga-schrittbild{margin-bottom:calc(var(--luft)*-.86 - 60px)}
  .ga-schrittbild img{height:clamp(420px,64svh,720px)}
}

/* ---------- 06 · Standard oder PLUS ---------- */
.ga-vergleich{border:1px solid var(--hairline-dunkel)}
.ga-vkopf,.ga-vfuss{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  padding:14px clamp(18px,3vw,30px)}
.ga-vkopf{border-bottom:1px solid var(--hairline-dunkel)}
.ga-vfuss{border-top:1px solid var(--hairline-dunkel)}
.ga-vleib{display:grid}
@media (min-width:720px){.ga-vleib{grid-template-columns:1fr 1fr}}
.ga-var{padding:clamp(24px,3.4vw,38px) clamp(18px,3vw,30px);border-bottom:1px solid var(--hairline-dunkel)}
@media (min-width:720px){
  .ga-var{border-bottom:0;border-right:1px solid var(--hairline-dunkel)}
  .ga-var:last-child{border-right:0}
}
.ga-var h3{margin:0 0 16px}
.ga-var-plus h3{color:var(--lime)}
/* Die Gegenspalte bekommt KEINE Signalfarbe — sie ist eine Angabe, keine
   Warnung. Unterschieden wird über den Strich, nicht über den Ton. */
.ga-var-nicht li::before{background:rgba(255,255,255,.34)}
.ga-var-nicht li{color:rgba(255,255,255,.6)}
.ga-var ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ga-var li{position:relative;padding-left:22px;font-size:15px;color:rgba(255,255,255,.74);line-height:1.5}
.ga-var li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--lime)}

/* ---------- 07 · Karte sichern (die helle Insel) ---------- */
.ga-kauf{display:grid;gap:clamp(20px,2.6vw,32px);margin-top:clamp(30px,4vw,52px)}
@media (min-width:900px){.ga-kauf{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:stretch}}
.ga-preis{position:relative;overflow:hidden;background:var(--tanne);color:#fff;
  padding:clamp(24px,3.4vw,36px);display:flex;flex-direction:column;gap:10px}
/* Das Echo: die Konturschrift des Heros kehrt genau einmal wieder —
   als Kontur-Zahl hinter dem Preis. */
.ga-echo{position:absolute;right:-.12em;bottom:-.24em;font-size:clamp(140px,19vw,260px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(204,255,0,.18);pointer-events:none}
.ga-preis>*{position:relative;z-index:1}
.ga-preis .t-mikro{color:rgba(255,255,255,.62)}
.ga-preis-zahl{font-size:clamp(52px,7vw,88px);line-height:.92;color:var(--lime)}
.ga-preis-zahl em{font-style:normal;font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:500;
  font-size:.3em;color:rgba(255,255,255,.82)}
.ga-preis-zeilen{margin:auto 0 0;padding-top:22px;display:grid;gap:0}
.ga-preis-zeilen>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--hairline-dunkel);font-size:15px}
.ga-preis-zeilen>div:last-child{border-bottom:0}
.ga-preis-zeilen dt{color:rgba(255,255,255,.62);margin:0}
.ga-preis-zeilen dd{margin:0;color:#fff;font-variant-numeric:tabular-nums}
.ga-powered{display:flex;align-items:center;gap:10px;margin-top:18px;color:rgba(255,255,255,.5)}
.ga-powered .ga-logo-img{height:20px;width:auto}
/* Das fremde Fenster ist als Fenster markiert, nicht kaschiert. */
.ga-fenster{border:1px solid var(--hairline-dunkel);background:var(--weiss);display:flex;flex-direction:column}
/* Im Fenster gilt wieder die helle Schrift der Website (0-3-0 schlaegt die
   Dunkelregeln der Sektion, die auf 0-2-0 stehen). */
.ga .ga-fenster .t-text,.ga .ga-fenster .t-klein{color:var(--text)}
.ga .ga-fenster .t-mikro{color:var(--muted)}
.ga-fenster-kopf{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;
  border-bottom:1px solid var(--linie-karte);color:var(--muted)}
.ga-fenster iframe{display:block;width:100%;border:0;min-height:1000px;flex:1}
.ga-fenster-ersatz{padding:clamp(24px,3.4vw,36px);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ga-fenster-ersatz p{max-width:52ch}

/* ---------- 08 · Abschluss ---------- */
.ga-faq{border-top:1px solid var(--hairline-dunkel)}
.ga-faq details{border-bottom:1px solid var(--hairline-dunkel);padding:18px 0}
.ga-faq summary{cursor:pointer;list-style:none;color:#fff;display:flex;justify-content:space-between;
  gap:18px;align-items:center;font-size:clamp(18px,2.2vw,26px)}
.ga-faq summary::-webkit-details-marker{display:none}
.ga-faq summary::after{content:"+";color:var(--lime);font-size:1.1em;line-height:1;flex:0 0 auto}
.ga-faq details[open] summary::after{content:"–"}
.ga-faq p{margin-top:14px;max-width:66ch}
/* Der letzte Bildschirm ist so gestaltet wie der erste: hier steht die
   Kante waagrecht, darüber die Spitze. */
.ga-abschluss{position:relative;margin-top:clamp(46px,7vw,96px);padding-top:clamp(28px,4vw,44px)}
.ga-abschluss-kante{position:absolute;top:0;left:0;height:1px;width:50%;background:var(--lime);
  box-shadow:0 0 22px 1px rgba(204,255,0,.3)}
.js .ga-abschluss-kante{width:0;transition:width .7s var(--ease)}
.js .ga-abschluss.ga-an .ga-abschluss-kante{width:50%}
.ga-abschluss-zahl{font-size:clamp(58px,11vw,150px);line-height:.86;color:var(--lime)}
.ga-abschluss-satz{color:#fff;margin-top:18px;max-width:14ch;text-wrap:balance}
.ga-abschluss-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,40px)}

/* ---------- Schmale Fenster: der Effekt wird ersetzt, nicht geschrumpft ---------- */
@media (max-width:560px){
  /* Auf 390 px bleibt die gestapelte Darstellung — der Schnitt wird
     ersetzt, nicht geschrumpft. Die Kante entfällt mit ihm. */
  .ga-tafel-kante{display:none}
  .ga-laender-zahl{top:auto;bottom:-.1em;opacity:.7}
}

@media (prefers-reduced-motion:reduce){
  .ga-tafel-kante{display:none}
  .ga-restlinie i{transition:none;width:var(--rest,0%)}
  .ga-hero-kalt,.ga-hero-kante{transition:none}
}

/* Kein Fokusring wird entfernt — er wird gestaltet. */
.ga a:focus-visible,.ga summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.ga .ga-fenster a:focus-visible{outline-color:var(--gruen)}