/* ══════════════════════════════════════════════════════════════════════════
   JETZT.GOLF – Startseite des ERSTBESUCHS (02.10.2026). Logik und Regeln, wann sie erscheint:
   `erstbesuch.js`. Hier nur das Bild.

   SICHTBAR NUR MIT `html.jg-erstbesuch` – die Klasse setzt das Skript im Kopf der Seite, bevor
   das Erste gemalt wird. Ohne JavaScript bleibt die Statusseite, wie sie war.

   ZWEITER ENTWURF (Befund des Betreibers zum ersten: drei schwarze/farbige Bänder über die volle
   Breite „sehen aus wie ‚ich verkaufe meine Domain‘ … nicht einladend“). Jetzt: oben ein WEISSER
   Begrüßungsblock mit Text, Geschichte und Telefon – Menschen vor Wegen –, darunter drei
   abgerundete Karten. Die Platz-Karte ist hell (das Produkt, freundlich), „Für Golfer“
   Markengrün und „Für Clubs“ Petrol wie der Info-Balken unten auf jeder Seite.
   Die Bausteine (Zeile, große Überschrift, Telefon) sind den Werbeseiten nachgebaut, deren
   Stylesheet diese Seite nicht lädt.
   ══════════════════════════════════════════════════════════════════════════ */

.erstbesuch { display: none; }

/* Während die Startseite steht: Statusseite, Info-Balken und App-Leiste weg – die Karten SIND
   die Wahl. Die Fusszeile bleibt: Impressum und Datenschutz müssen immer erreichbar sein. */
html.jg-erstbesuch .wrap,
html.jg-erstbesuch .jg-infobalken,
html.jg-erstbesuch .jg-tabbar { display: none; }
html.jg-erstbesuch body { padding-bottom: 0; }

html.jg-erstbesuch .erstbesuch {
  display: block;
  padding-bottom: 8px;
  background: var(--jg-bg, #f5f8f6);
}

/* ── Begrüßung ─────────────────────────────────────────────────────────── */

.eb-held {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: clamp(36px, 7vw, 80px) max(var(--jg-gutter, 18px), calc((100% - 1080px) / 2));
  background: #fff;
}

/* Am Rechner steht das Telefon daneben; auf dem Handy fiele es zwischen Text und Karten und
   schöbe die Wege unter den Bildschirmrand – dort entfällt es (das Produkt zeigt die Karte darunter). */
/* ⚠️ DIE HÜLLE `.eb-telefone` (B6, 04.10.2026) MUSS MIT WEG: Mit leeren Kindern bliebe sie ein
   Rasterelement der Höhe 0 – und der `gap` von 40 px stünde trotzdem unter dem Text. */
.eb-telefon,
.eb-telefone { display: none; }

@media (min-width: 860px) {
  .eb-held { grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; }

  .eb-telefone { display: block; }

  /* DAS iPHONE (04.10.2026, nach einer Vorlage des Betreibers): außen ein SILBERNES Metallband
     mit Tasten, darin ein schwarzer Glasrand mit der Insel, darin der Bildschirm mit gezeichneter
     Statusleiste. Bis dahin war es ein dunkler Rahmen mit leerer weißer Leiste oben.
     Die Maße hängen an drei Größen, damit die kleinere Fassung (zwei Telefone ab 1080 px) nur sie
     umstellt: --eb-band (Metall), --eb-glas (schwarzer Rand), --eb-rund (äußere Rundung). */
  .eb-telefon {
    --eb-band: 4px;
    --eb-glas: 7px;
    --eb-rund: 48px;
    position: relative;
    display: block;
    width: 280px;
    padding: var(--eb-band);
    border-radius: var(--eb-rund);
    background: linear-gradient(145deg, #f1f2f4 0%, #c3c6cb 28%, #eef0f2 52%, #a9adb3 78%, #dfe1e4 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .7),
      0 0 0 1px rgba(0, 0, 0, .14),
      0 36px 70px -24px rgba(11, 31, 24, .35);
  }

  /* KEINE SEITENTASTEN (04.10.2026, Ansage des Betreibers: „wir lassen die Tasten einfach weg“) –
     zwei Anläufe sahen bei wenigen Pixeln Breite eher seltsam als echt aus. */

  .eb-glas {
    position: relative;
    padding: var(--eb-glas);
    background: #0b0b0c;
    border-radius: calc(var(--eb-rund) - var(--eb-band));
  }

  /* Insel und Statusleiste wie auf allen gezeichneten Telefonen (werbung.css, `.wb-telefon`):
     die Insel wächst mit der Breite, die Leiste ist EINE SVG-Datei als Hintergrund. */
  .eb-glas::before {                          /* die Insel – mittig in der Statusleiste */
    content: "";
    position: absolute;
    top: var(--eb-glas);
    left: 50%;
    z-index: 1;
    width: 29%;
    aspect-ratio: 3.5;
    margin-top: 3.3%;
    background: #000;
    border-radius: 99px;
    transform: translateX(-50%);
  }

  .eb-bildschirm {
    overflow: hidden;
    padding-top: 15%;
    background: #fff url("/status/werbung/statusleiste.svg") center top / 100% auto no-repeat;
    border-radius: calc(var(--eb-rund) - var(--eb-band) - var(--eb-glas));
  }

  .eb-telefon img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* B6 (04.10.2026): Das Verwaltungs-Telefon erst ab 1080 px – darunter bliebe dem Text neben
     zwei Telefonen keine lesbare Spalte. Bis dahin steht nur der Status, wie vorher. */
  .eb-telefon-verwaltung { display: none; }
}

/* ZWEI TELEFONE AM RECHNER (B6, 04.10.2026): links die Verwaltung mit dem Schalter, rechts der
   Status. Etwas kleiner als das einzelne (240 statt 280 px), das rechte tiefer gesetzt – so liest
   man sie als Ursache und Wirkung, nicht als zwei gleiche Bilder. */
@media (min-width: 1080px) {
  .eb-held { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; }

  .eb-telefone { display: flex; gap: 24px; align-items: flex-start; }

  .eb-telefone .eb-telefon {
    --eb-glas: 6px;
    --eb-rund: 42px;
    width: 240px;
  }

  .eb-telefon-verwaltung { display: block; }
  .eb-telefone .eb-telefon:last-child { margin-top: 56px; }
}

.eb-zeile {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--jg-green, #0f6e56);
}

.eb-gross {
  margin: 0;
  font-size: clamp(36px, 6.4vw, 60px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--jg-ink, #15211c);
  text-wrap: balance;             /* sonst steht „bist.“ allein in der zweiten Zeile (gemessen) */
}

/* Golfer und Club in je einer Zeile mit Symbol (02.10.2026: „wir müssen auch den Club mitnehmen“). */
.eb-seiten {
  display: grid;
  gap: 14px;
  max-width: 600px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.eb-seiten li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 17px;
  line-height: 1.5;
  color: var(--jg-ink, #15211c);
}
.eb-seiten svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--jg-green, #0f6e56);
  background: var(--jg-green-faint, #edf7f1);
  border-radius: 50%;
}
.eb-seiten li + li svg { color: var(--jg-petrol, #0e4c6e); background: #e8f0f5; }

/* ── Die Wege ──────────────────────────────────────────────────────────── */

.eb-frage {
  margin: 0;
  padding: 32px max(var(--jg-gutter, 18px), calc((100% - 1080px) / 2)) 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--jg-muted, #5c6b64);
}

/* Drei Karten – ohne Media Query: unter 3 × 280 px stehen sie untereinander (die Spalte
   entscheidet, nicht das Fenster). */
.eb-wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  padding: 0 max(var(--jg-gutter, 18px), calc((100% - 1080px) / 2));
}

.eb-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
  padding: 24px 22px;
  color: #fff;
  text-decoration: none;
  border-radius: 22px;
  box-shadow: 0 14px 30px -18px rgba(11, 31, 24, .45);
  transition: transform .15s, box-shadow .15s;
}
.eb-kachel:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -18px rgba(11, 31, 24, .5); }
.eb-kachel:focus-within,
.eb-kachel:focus-visible { outline: 3px solid var(--jg-green, #0f6e56); outline-offset: 3px; }

/* Die Platz-Karte hell: Sie trägt das Produkt selbst, und Hell lädt ein. */
.eb-platz  {
  color: var(--jg-ink, #15211c);
  background: #fff;
  border: 1px solid var(--jg-green-rand, #cfe5da);
}
.eb-golfer { background: var(--jg-green, #0f6e56); }
.eb-clubs  { background: var(--jg-petrol, #0e4c6e); }

.eb-symbol { width: 30px; height: 30px; margin-bottom: 4px; }
.eb-platz .eb-symbol { color: var(--jg-green, #0f6e56); }

.eb-titel {
  display: block;
  padding-right: 32px;            /* Platz für den Pfeil */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.eb-unter {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}

.eb-pfeil {
  position: absolute;
  top: 26px;
  right: 20px;
  width: 26px;
  height: 26px;
}

/* Die Platz-Karte ist KEIN Link als Ganzes, weil „Anderen Club wählen“ darin ein eigener Knopf
   ist (ein Knopf im Link wäre ungültiges Markup). Der Hauptlink zieht seine Fläche über die ganze
   Karte (`::after`), der Knopf liegt darüber. */
.eb-platz-link { color: inherit; text-decoration: none; }

/* Unten in der Platz-Karte: „Los geht’s“ als Knopf, daneben „Anderen Club wählen“. Ohne Media
   Query – bricht um, wenn die Karte schmal ist. ⚠️ `.eb-aktionen` und `.eb-los` OHNE `position`:
   Die Linkfläche (`::after`) muss sich an der KARTE ausrichten, nicht am Knopf. */
.eb-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: auto;
  padding-top: 8px;
}
.eb-los {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--jg-green, #0f6e56);
  border-radius: 999px;
}
.eb-los svg { width: 18px; height: 18px; }
.eb-platz:hover .eb-los { background: var(--jg-green-dark, #0b5a46); }
.eb-platz-link::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.eb-platz-link:focus-visible { outline: none; }

.eb-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 15px;
}
.eb-club { font-weight: 600; }
.eb-wert {
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--jg-green, #0f6e56);
  border-radius: 3px;
}
.eb-wert[data-status="false"] { background: var(--jg-red, #c0392b); }
.eb-stand { flex-basis: 100%; font-size: 14px; color: var(--jg-muted, #5c6b64); }

.eb-anderer {
  position: relative;             /* über der Linkfläche */
  z-index: 1;
  padding: 4px 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--jg-green, #0f6e56);   /* ein <button> erbt die Farbe nicht */
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.eb-konto {
  margin: 0;
  padding: 22px var(--jg-gutter, 18px) 18px;
  font-size: 15px;
  text-align: center;
  color: var(--jg-muted, #5c6b64);
}
.eb-konto a { font-weight: 600; color: var(--jg-green, #0f6e56); }

/* Das Zitat des Gründers ganz unten – weiß, ruhig, mittig. */
.eb-gruender {
  margin-top: 26px;
  padding: clamp(40px, 6vw, 64px) max(var(--jg-gutter, 18px), calc((100% - 760px) / 2));
  text-align: center;
  background: #fff;
}
.eb-gruender blockquote { margin: 0; }
.eb-gruender p {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--jg-ink, #15211c);
  text-wrap: pretty;
}
.eb-gruender footer {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--jg-green, #0f6e56);
}
.eb-gruender footer::before { content: "– "; }