/*
Theme Name: Golfspielen
Theme URI: https://golfspielen.com
Description: Astra-Child-Theme golfspielen.com — Portal-Engine mit dem Design-Handoff von Claude Design (Kit v3, Palette A, 11.11.2026). Komponenten in assets/gs-kit.css (erzeugt, nicht von Hand ändern), hier nur Anpassungen an Astra, WordPress-Inhalte und die Engine. Projektwerte in theme-config.php.
Author: Andreas Rothermund
Template: astra
Version: 2.1.2
Text Domain: golfspielen
*/

/* =========================================================================
   Astra neutralisieren — Kopf und Fuß kommen aus functions.php, Breite steuert das Kit (.wrap / .wrap-a)
   ========================================================================= */
.site-primary-header-wrap, .ast-above-header-wrap, .ast-below-header-wrap, .ast-mobile-header-wrap,
.ast-header-without-markup, .site-footer .ast-small-footer { display: none !important; }
body.gs { background: var(--p-bg); margin: 0; }
.gs #page, .gs .site-content, .gs #content { background: transparent; }
/* Astra: .ast-container ist flex column-reverse mit max-width und Rand — unsere Vorlagen bringen ihre eigene Breite mit */
.gs .site-content > .ast-container { display: block; max-width: none; padding: 0; margin: 0; }
.gs .site-content > .ast-container > #primary { margin: 0; padding: 0; width: 100%; }
.gs-main { display: block; }

/* Sprunglink zum Inhalt: sichtbar bei Tastaturfokus */
.gs .gs-skip:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 1000; background: #fff;
  color: var(--p-primary); padding: 10px 16px; border-radius: 999px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.15); }

/* =========================================================================
   Kopf: Suchfeld und Handy-Menü (assets/kopf.js)
   ========================================================================= */
.gs .hdr .nav a { white-space: nowrap; }
.gs .hdr .tools .menu-btn.gs-such-knopf { display: none; }
.gs .gs-suche { background: #fff; border-bottom: 1px solid var(--p-line-2); padding: 18px 0; }
.gs .gs-suchform { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; max-width: 760px; }
.gs .gs-suchform .fld { flex: 1 1 260px; }
.gs .gs-menu { background: #fff; border-bottom: 1px solid var(--p-line-2); }
.gs .gs-menu nav { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 16px; }
.gs .gs-menu nav a { min-height: 48px; display: flex; align-items: center; font-weight: 700; font-size: 16px; color: var(--p-ink);
  border-bottom: 1px solid var(--p-line-2); }
.gs .gs-menu nav a[aria-current] { color: var(--p-primary); }
@media (max-width: 859px) {
  .gs .hdr .tools .menu-btn.gs-such-knopf { display: inline-flex; }
}
@media (min-width: 860px) { .gs .gs-menu { display: none !important; } }

/* Fuß: Einträge ohne veröffentlichte Seite (vor M3) als Text, nicht als Link */
.gs .foot .gs-ohne-link { display: inline-flex; min-height: 36px; align-items: center; font-size: 14px; color: #9fb0a7; }
.gs .foot .logo img { width: auto; }

/* =========================================================================
   Seitenkopf (Ort, Profil, Artikel, Rechner): Fläche + Brotkrumen + Eyebrow + H1 + Lead
   ========================================================================= */
.gs .phead .wrap, .gs .phead .wrap-a { padding-bottom: 40px; }
.gs .phead .badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.gs .phead .pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.gs .ahead { padding-bottom: 32px; }
.gs .gs-sprung { margin-top: 18px; }

/* =========================================================================
   Fließtext aus WordPress (Seiten aus setup/seiten.py, Text der Anlagendatei) im Kit-Satz .prose
   Das Kit setzt ul/ol ohne Aufzählungszeichen zurück — im Fließtext gilt der Strich des Designs, ol nummeriert.
   ========================================================================= */
.gs .prose ul:not([class]) li, .gs .prose ul.dash li { padding-left: 22px; position: relative; }
.gs .prose ul:not([class]) li + li { margin-top: 6px; }
.gs .prose ul:not([class]) li::before { content: ""; position: absolute; left: 0; top: .82em; width: 10px; height: 2px; background: var(--p-accent); }
.gs .prose ol:not([class]) { list-style: decimal; padding-left: 1.3em; }
.gs .prose ol:not([class]) li + li { margin-top: 6px; }
.gs .prose ol:not([class]) li::marker { color: var(--p-accent-700); font-family: var(--font-mono); font-size: .8em; }
.gs .prose strong { color: var(--p-ink); }
.gs .prose img { max-width: 100%; height: auto; }
.gs .prose figure figcaption { font: 500 12.5px/1.5 var(--font-sans); color: var(--p-muted); margin-top: 8px; }
.gs .prose blockquote { border-left: 4px solid var(--p-accent); padding: 4px 0 4px 18px; color: var(--p-ink-2); font-style: italic; }
.gs .prose .note, .gs .prose .beispiel, .gs .prose .tbl-wrap, .gs .prose .faq { font-size: 15px; }
/* Tabellen im Fließtext wie .tbl (Kit), am Handy waagerecht scrollen */
.gs .prose table:not(.tbl) { width: 100%; border-collapse: collapse; font: 400 14px/1.45 var(--font-sans); border: 1px solid var(--p-line); display: block; overflow-x: auto; }
.gs .prose table:not(.tbl) th { background: var(--p-primary); color: #fff; text-align: left; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; padding: 14px; }
.gs .prose table:not(.tbl) td { padding: 14px; border-top: 1px solid var(--p-line-2); color: var(--p-ink); vertical-align: top; }
.gs .prose table:not(.tbl) tr:nth-child(even) td { background: var(--p-bg-soft); }
.gs .prose .toc { margin-bottom: 36px; }
.gs .prose .toc + * { margin-top: 0; }
/* 2.0.3 (12.11.2026): Inhaltskasten nur mit der Kit-Zählung „01“ — keine Listennummern, keine Fließtext-Unterstreichung */
.gs .prose .toc ol.toc-l { list-style: none; padding-left: 0; margin: 0; }
.gs .prose .toc a:not(.btn) { color: var(--p-ink); text-decoration: none; font-weight: 600; }
.gs .prose .toc a:not(.btn):hover { color: var(--p-primary); text-decoration: underline; text-decoration-color: var(--p-accent); text-underline-offset: 4px; }
.gs .prose h2[id], .gs .prose h3[id], .gs .psec[id] { scroll-margin-top: 16px; }

/* =========================================================================
   Verzeichnis (Plugin golfspielen-anlagen): Vergleich als Tabelle, am Handy als Platzkarten (README § 4)
   ========================================================================= */
.gs .gs-vgl .kz { margin-bottom: 40px; }
.gs .gs-vgl .filter { border: 1px solid var(--p-line); background: #fff; padding: 18px 20px; margin: 20px 0; display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; }
.gs .gs-vgl .filter .lbl { font-size: 13px; font-weight: 700; color: var(--p-ink); }
.gs .gs-vgl .sortieren { display: none; }
.gs .gs-vgl .karten { display: none; }
.gs .gs-vgl .leer { padding: 18px 20px; border: 1px solid var(--p-line); background: var(--p-bg-soft); margin-top: 12px; }
.gs .gs-vgl .anz { font-size: 12.5px; color: var(--p-muted); margin: 10px 0; }
@media (max-width: 859px) {
  .gs .gs-vgl .tbl-wrap { display: none; }
  .gs .gs-vgl .karten { display: grid; gap: 14px; }
  .gs .gs-vgl .sortieren { display: flex; }
  .gs .gs-vgl .filter { padding: 0; border: 0; background: none; }
  .gs .gs-vgl .filter .lbl { display: none; }
}
.gs .pcard[hidden], .gs .tbl tr[hidden] { display: none; }
.gs .pcard .nm a { color: inherit; }
.gs .tbl td a.lnk, .gs .tbl th a.lnk { font-weight: 600; }

/* Abschlagfarben (Farbe nie einziger Hinweis: Name steht daneben) */
.gs .tee i.f-weiss { background: #fff; }
.gs .tee i.f-gelb { background: #f2c230; }
.gs .tee i.f-rot { background: #d64032; }
.gs .tee i.f-blau { background: #2f6fd0; }
.gs .tee i.f-gruen { background: #2e9a54; }
.gs .tee i.f-orange { background: #f3961d; }
.gs .tee i.f-schwarz { background: #1d1d1d; }
.gs .tee i.f-keine { background: transparent; border-style: dashed; }

/* Lageplan-SVG (werkzeug/lageplan.py) übernimmt die Palette über seine CSS-Variablen */
.gs .lp .map { --gs-lageplan-grund: var(--p-primary-50); --gs-lageplan-flaeche: var(--p-primary-100); --gs-lageplan-rand: var(--p-primary);
  --gs-lageplan-text: var(--p-text); display: flex; align-items: center; justify-content: center; }
.gs .lp .map svg { width: 100%; height: 100%; }

/* Profil: Kontakt-Box, Ausstattung, Quellen */
.gs .box dd a { color: var(--p-primary); text-decoration: underline; text-decoration-color: var(--p-accent); text-underline-offset: 3px; }
.gs .psec .note { margin-top: 18px; }
.gs .psec .cmp-note .btn { flex-shrink: 0; }
.gs .gs-fehler { margin-top: 22px; }
.gs .quellen a { color: var(--p-primary); text-decoration: underline; text-decoration-color: var(--p-accent); text-underline-offset: 3px; }
/* Profil-Vorlage des Plugins (golfspielen-anlagen 0.3.0, templates/profil.php) */
.gs .gs-profil .kz { margin-bottom: 44px; }
.gs .gs-profil .psec .h3 { font-size: 21px; margin-top: 28px; }
.gs .gs-profil .psec .h2 + .h3 { margin-top: 0; }
.gs .pmeta { font-size: 14px; color: var(--p-muted); margin: 6px 0 14px; }
.gs .psec .amen + .cmp-note, .gs .psec .stand + .quellen, .gs .psec p + .quellen { margin-top: 16px; }
.gs .gs-quelle { font: 600 10.5px/1 "IBM Plex Mono", monospace; margin-left: 2px; }
.gs .gs-quelle a { color: var(--p-accent-700); text-decoration: none; }
.gs .gs-quelle a:hover, .gs .gs-quelle a:focus-visible { text-decoration: underline; }
.gs .gs-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; font-weight: 600; }
.gs .gs-links a { color: var(--p-primary); }
.gs .near li a { color: inherit; }
.gs .near li a:hover { color: var(--p-primary); text-decoration: underline; }
.gs .near .sz { margin-top: 10px; }

/* =========================================================================
   Rechner (Plugin, Entwurf E) — Ergänzungen zum Kit
   ========================================================================= */
.gs .calc .plist-suche { margin-bottom: 12px; }
.gs .calc .plist button .sub { text-align: right; }
.gs .calc .opt button .tee { pointer-events: none; }
.gs .calc .step .fld + .fld, .gs .calc .step .fld + .seg-feld { margin-top: 16px; }
.gs .calc .seg-feld { display: flex; flex-direction: column; gap: 7px; }
.gs .calc .seg-feld .lbl { font-size: 13px; font-weight: 700; color: var(--p-ink); }
.gs .calc .eigen { margin-top: 14px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.gs .calc .eigen[hidden] { display: none; }
.gs .calc .step > .hint { font-size: 13px; color: var(--p-muted); margin-top: 12px; }
.gs .calc .step > .hint[hidden] { display: none; }
.gs .seg button[disabled] { opacity: .45; cursor: not-allowed; border-style: dashed; }
.gs .calc [hidden] { display: none !important; }   /* Kit setzt display:flex auf .fld/.btn/.plist button — sonst wirkt hidden nicht */
.gs .result .big.leer { font-size: 40px; color: rgba(255,255,255,.55); }
.gs .result .meld { font-size: 14px; line-height: 1.55; color: #e9efeb; margin-top: 10px; }
.gs .result .ph { margin-top: 12px; font-size: 14px; }
.gs .result .ph b { color: var(--p-accent-400); }
.gs .rk .btn { width: 100%; }

/* =========================================================================
   Startseite (Entwurf A)
   ========================================================================= */
.gs .hero .h1 { max-width: 980px; }
.gs .hero .illu svg { width: 100%; height: auto; }
.gs .reg { color: inherit; }
.gs .reg.ohne { cursor: default; }
.gs .reg.ohne:hover { transform: none; box-shadow: none; }
.gs .tool-teaser { background: var(--p-primary-50); border: 1px solid var(--p-primary-100); border-radius: 16px; padding: 40px; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.gs .tool-teaser .result { border-radius: 0; }
@media (max-width: 859px) { .gs .tool-teaser { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 24px; } }
.gs .methodik { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.gs .methodik ul li { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--p-line); }
.gs .methodik ul li:last-child { border-bottom: 1px solid var(--p-line); }
.gs .methodik ul li p { font-size: 14px; color: var(--p-muted); margin-top: 6px; line-height: 1.55; }
@media (max-width: 859px) { .gs .methodik { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.gs .card { color: inherit; }
.gs .card .h3 { font-size: 19px; }
.gs .card p { font-size: 13.5px; color: var(--p-muted); line-height: 1.5; }

/* Suche + 404 */
.gs .gs-treffer { display: flex; flex-direction: column; }
.gs .gs-treffer li { padding: 18px 0; border-top: 1px solid var(--p-line-2); }
.gs .gs-treffer li a { font-family: var(--font-display); font-variation-settings: var(--disp-fvs); font-weight: var(--disp-w); font-size: 21px; color: var(--p-ink); }
.gs .gs-treffer li a:hover { color: var(--p-primary); }
.gs .gs-treffer li p { font-size: 14px; color: var(--p-muted); margin-top: 6px; }
.gs .gs-einstiege { margin-top: 48px; }
.gs .gs-einstiege .h2 { margin-bottom: 20px; font-size: 30px; }

/* Vergleich „alle“ (/golfplaetze/): Entfernungsspalte erst mit Bezugspunkt (assets/vergleich.js entfernt .ohne-km) */
.gs .gs-vgl.ohne-km .km { display: none; }

/* 2.1.1 (12.11.2026): Fotoplätze — Fotoband Startseite, Kopfbild Ratgeber (Textbreite), Kachelbild */
.gs .gs-band { margin: 0; line-height: 0; background: var(--p-bg-soft); }
.gs .gs-band img { display: block; width: 100%; height: clamp(180px, 30vw, 440px); object-fit: cover; object-position: center 60%; }
.gs .prose .gs-kopfbild { margin: 0 0 28px; }
.gs .prose .gs-kopfbild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gs .card .vis.vis-bild { overflow: hidden; background: var(--p-bg-soft); }
.gs .card .vis.vis-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }