/* ==========================================================================
   FREIZEIT-LAND GEISELWIND
   Gemeinsames Stylesheet für Landingpage, Karte und App-Konzept.
   Bewusst ein einziges, helles „Sommertag im Park"-Farbthema statt Hell/Dunkel –
   passend zu einem Familienfreizeitpark, der tagsüber besucht wird.
   ========================================================================== */

:root {
  /* Grundpalette: an das echte Corporate Design von freizeit-land.de angelehnt
     (Elementor-Quellcode ausgelesen: Hauptorange #ea5d00, Dunkel #222931). */
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --paper: #ffffff;
  --ink: #222931;
  --ink-soft: #5f656d;
  --line: #e6e8e8;
  --line-strong: #d2d6d8;

  --forest: #222931;
  --forest-deep: #171b20;
  --forest-ink: #f5f6f6;

  --amber: #ea5d00;
  --amber-deep: #b94800;
  --amber-ink: #ffffff;

  --ok: #2e7d4f;
  --warn: #b5720c;
  --crit: #c0392b;
  --crit-bg: #fbe9e6;

  /* Welten-Farben, an den echten Parkplan 2026 angelehnt */
  --z-farm: #e0812a;
  --z-tiere: #4f8f5b;
  --z-herz: #2f6fed;
  --z-piraten: #7a4326;
  --z-drachen: #c1432b;
  --z-raven: #3c2b52;
  --z-forbidden: #7b3fa0;
  --z-safari: #8a9a3a;

  --display: 'Poppins', 'Segoe UI', sans-serif;
  --body: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 6px 20px -8px rgba(34, 41, 49, 0.18);
  --shadow-lift: 0 16px 40px -14px rgba(34, 41, 49, 0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber-deep); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Sichtbarer Tastatur-Fokus: ohne den ist die Seite per Tab nicht bedienbar. */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}
a, button, .btn, .nav-cta, .map-filter, .shop-tab, .map-pin {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}

/* Wer Bewegung reduziert haben möchte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: var(--amber-deep); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0 0 12px; text-wrap: balance; color: var(--ink); }
h1 { font-weight: 800; }

p { margin: 0 0 1em; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; }

/* -------------------------------------------------------------- Disclosure */
.concept-banner {
  background: var(--forest-deep);
  color: var(--forest-ink);
  font-family: var(--body);
  font-size: 14px;
  padding: 10px 20px;
  text-align: center;
  line-height: 1.5;
}
.concept-banner b { color: #ffd98a; }
.concept-banner a { color: #ffe9bd; text-decoration-color: rgba(255,233,189,.5); }

/* -------------------------------------------------------------- Top nav */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
/* Kopfleiste: Logo, ab 1100 px die Hauptlinks (Attraktionen, Saison, Besuch planen, Öffnungszeiten, Sprache), der Kaufweg
   „Tickets & Pass“ als Knopf (Runde 27) und das Menüsymbol. Das volle Menü (.navlinks) klappt bei jeder Breite darunter auf.
   Alles steht im HTML, Skripte ändern die Leiste nicht mehr: kein Verrutschen beim Laden. */
.topnav .wrap { max-width: 1320px; position: relative; display: flex; align-items: center; flex-wrap: nowrap; padding-top: 12px; padding-bottom: 12px; gap: 10px; }
.brand { flex: none; display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; margin-right: auto; }
.brand-logo { height: 30px; width: auto; flex: none; }
.brand-tag { font-family: var(--body); font-weight: 700; font-size: 12.5px; color: var(--ink); line-height: 1.2; padding-left: 12px; border-left: 1px solid var(--line-strong); }
.brand-tag small { display: block; font-family: var(--body); font-weight: 600; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-deep); }
/* Zwischenbreite: Unterzeile weg, sonst drängt sie die Hauptlinks */
@media (max-width: 1460px) { .brand-tag { display: none; } }

/* Hauptlinks direkt in der Leiste (erst ab 1100 px, darunter stehen sie oben im Menü) */
.nav-haupt { display: none; }
@media (min-width: 1100px) {
  .nav-haupt { display: flex; align-items: center; gap: 2px; min-width: 0; }
  .nav-haupt a {
    font-family: var(--body); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink);
    text-decoration: none; padding: 12px 13px; border-radius: 999px; white-space: nowrap;
  }
  .nav-haupt a:hover { background: var(--bg-soft); color: var(--amber-deep); }
  .nav-haupt a[aria-current="page"] { color: var(--amber-deep); background: color-mix(in srgb, var(--amber) 8%, #fff); }
  /* Sprache (Link mit lang-Attribut): leiser, durch einen Strich von den Hauptlinks getrennt */
  .nav-haupt a.nav-sprache, .nav-haupt a[lang] { color: var(--ink-soft); margin-left: 8px; position: relative; }
  .nav-haupt a.nav-sprache::before, .nav-haupt a[lang]::before { content: ""; position: absolute; left: -5px; top: 13px; bottom: 13px; border-left: 1px solid var(--line-strong); }
  .nav-haupt a.nav-sprache:hover, .nav-haupt a[lang]:hover { color: var(--amber-deep); }
}

.nav-cta {
  display: inline-flex; align-items: center; min-height: 44px; flex: none;
  background: var(--amber-deep); color: #fff; font-family: var(--body); font-weight: 700;
  padding: 0 18px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: 14.5px;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 1100px) { .nav-cta { margin-left: 6px; } }

.nav-toggle {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--paper); cursor: pointer; flex: none; position: relative;
}
.nav-toggle:hover { border-color: var(--ink-soft); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; position: absolute; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
}
.nav-toggle span { top: 21px; left: 11px; }
.nav-toggle span::before { top: -7px; left: 0; }
.nav-toggle span::after { top: 7px; left: 0; }

/* Volles Menü: am Handy über die ganze Breite, am Computer als Tafel rechts unter dem Menüsymbol.
   Höhe begrenzt, damit bei kleinen Bildschirmen (Handy quer) alle Einträge erreichbar bleiben, obwohl die Kopfleiste stehen bleibt. */
.navlinks {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 41; flex-direction: column; gap: 0;
  background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 22px 14px; box-shadow: var(--shadow-soft);
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
}
.navlinks.open { display: flex; }
.navlinks a {
  font-family: var(--body); font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none;
  padding: 12px 10px; border-bottom: 1px solid var(--line); min-height: 44px; display: flex; align-items: center;
}
.navlinks a:last-child { border-bottom: none; }
.navlinks a:hover { background: var(--bg-soft); color: var(--amber-deep); }
.navlinks a.active, .navlinks a[aria-current="page"] { color: var(--amber-deep); box-shadow: inset 3px 0 0 var(--amber-deep); }
.navlinks a.nav-sprache, .navlinks a[lang] { color: var(--ink-soft); }
@media (min-width: 1100px) {
  .navlinks { left: auto; right: 24px; width: 340px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; padding: 6px 16px 12px; }
}
@media (max-width: 400px) {
  .brand-logo { height: 24px; }
  .nav-cta { padding: 0 12px; font-size: 13.5px; }
}
@media (max-width: 340px) {
  .topnav .wrap { gap: 6px; }
  .nav-cta { padding: 0 10px; font-size: 13px; }
}

/* -------------------------------------------------------------- Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 999px; text-decoration: none; border: none; cursor: pointer; }
.btn-primary { background: var(--amber-deep); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: #a03e00; transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-ghost { background: var(--paper); color: var(--ink); border: 2px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-deep); }
.nav-cta:hover { background: #a03e00; }

/* -------------------------------------------------------------- Hero */
.hero { padding: 56px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.eyebrow { font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-deep); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--amber-deep); display: inline-block; }
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); }
.hero h1 .hl { color: var(--forest); }
.hero p.lead { font-size: 19px; color: var(--ink-soft); max-width: 54ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero-art { position: relative; }
.hero-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 22px; display: grid; gap: 14px;
}
.hero-card .row { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-soft); }
.hero-card .row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hero-card h3 { font-size: 17px; margin: 0; }

/* -------------------------------------------------------------- Sections */
section { padding: 64px 0; }
section.alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 62ch; margin: 0 0 32px; }
.section-head h2 { font-size: clamp(26px, 3.2vw, 36px); }
.section-head p { color: var(--ink-soft); font-size: 17px; }

/* -------------------------------------------------------------- Findings */
.findings { display: grid; gap: 12px; }
.finding {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--crit);
  border-radius: var(--radius-sm); padding: 16px 18px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.finding:hover { box-shadow: var(--shadow-soft); transform: translateX(2px); }
.finding .n { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--ink-soft); line-height: 1; }
.finding h3 { font-size: 16.5px; margin: 0 0 4px; }
.finding p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.tag { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; align-self: start; }
.tag.crit { background: var(--crit-bg); color: var(--crit); }
.tag.warn { background: #fdf1dc; color: #8a5608; } /* dunkler als --warn: Kontrast 5,5 : 1 statt 3,5 : 1 */

/* -------------------------------------------------------------- Core diagram */
.core-diagram { background: var(--forest-deep); color: var(--forest-ink); border-radius: var(--radius); padding: 34px; margin-top: 8px; }
.core-diagram .center { text-align: center; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .02em; padding-bottom: 22px; border-bottom: 1px dashed rgba(255,255,255,.25); margin-bottom: 22px; }
.core-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.core-col h3 { color: #ffd98a; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.core-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; opacity: .92; }
.core-foot { text-align: center; margin-top: 22px; padding-top: 18px; border-top: 1px dashed rgba(255,255,255,.25); font-family: var(--mono); font-size: 13px; opacity: .85; }

/* -------------------------------------------------------------- Zone cards */
.zones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.zone-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  border-top: 5px solid var(--zc, var(--forest)); box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.zone-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.zone-card:focus-within { box-shadow: var(--shadow-lift); }
.zone-card .zk { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.zone-card h3 { font-size: 18px; margin: 6px 0 6px; }
.zone-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------- Offer */
.offer-band { background: var(--forest-deep); color: var(--forest-ink); border-radius: var(--radius); padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; }
.offer-band .big { font-family: var(--display); font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #ffd98a; }
.offer-band .big small { font-size: 17px; font-weight: 600; color: var(--forest-ink); opacity: .8; }
.offer-band p { margin: 8px 0 0; font-size: 14.5px; opacity: .85; }
.note-strike { text-decoration: line-through; opacity: .55; font-size: 16px; margin-left: 6px; }

/* -------------------------------------------------------------- Table */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--paper); border-radius: var(--radius-sm); overflow: hidden; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
tbody tr:hover td, table tr:hover td { background: var(--bg-soft); }
th { font-family: var(--body); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-soft); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -------------------------------------------------------------- Footer */
footer {
  padding: 40px 0 50px; color: var(--ink-soft); font-size: 13.5px;
  background: var(--bg-soft); border-top: 1px solid var(--line); margin-top: 40px;
}
footer a { color: var(--amber-deep); }
footer a:hover { color: var(--amber-deep); }
footer .fline { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; }
.footer-grid > div { display: flex; flex-direction: column; gap: 5px; }
.footer-h {
  font-family: var(--body); font-weight: 700; font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 4px;
}
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-grid p { margin: 0 0 6px; line-height: 1.5; }

/* -------------------------------------------------------------- Utility */
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--forest-deep); }
.muted { color: var(--ink-soft); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; }
.cta-band { text-align: center; padding: 54px 0; }
.cta-band h2 { font-size: clamp(26px,3.4vw,38px); max-width: 20ch; margin: 0 auto 14px; }
.cta-band p { max-width: 50ch; margin: 0 auto 24px; color: var(--ink-soft); }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .core-cols { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- Druck
   Damit das Angebot als Papierfassung ins Gespräch mitgenommen werden kann. */
/* Deckblatt nur im Druck/PDF */
.print-cover { display: none; }

@media print {
  @page { size: A4; margin: 14mm 13mm 16mm; }
  @page :first { margin: 0; }
  .topnav, .today-bar, .nav-toggle, .cta-band, .hero-actions, .map-toolbar, .poi-sheet, .poi-backdrop,
  .concept-banner, .skip-link, footer { display: none !important; }
  body { font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  section { padding-top: 14px !important; padding-bottom: 14px !important; }
  section.alt { background: none !important; border: none !important; }
  .finding, .kpi, table, tr, .phase, .zone-card, .offer-band, .core-diagram, .arch, .kb-file { break-inside: avoid; }
  h1, h2, h3, .section-head { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
  .two { grid-template-columns: 1fr !important; }
  .scroll { overflow: visible !important; }
  table { width: 100%; }
  .finding:hover, .zone-card:hover { transform: none; box-shadow: none; }

  .print-cover {
    display: flex !important; flex-direction: column; justify-content: space-between;
    width: 210mm; height: 297mm; box-sizing: border-box; padding: 26mm 22mm 20mm;
    background: #171b20; color: #f5f6f6; break-after: page; page-break-after: always;
  }
  .print-cover .pc-logo { height: 15mm; width: auto; }
  .print-cover .pc-eyebrow { font-weight: 700; font-size: 10pt; letter-spacing: .14em; text-transform: uppercase; color: #ffb27a; margin-bottom: 7mm; }
  .print-cover h1 { color: #fff; font-size: 34pt; line-height: 1.05; margin: 0 0 6mm; max-width: 15ch; }
  .print-cover .pc-sub { font-size: 14pt; color: #c9ced3; max-width: 32ch; line-height: 1.4; }
  .print-cover .pc-welten { display: flex; height: 3.2mm; border-radius: 2mm; overflow: hidden; margin: 12mm 0 5mm; max-width: 120mm; }
  .print-cover .pc-welten span { flex: 1; }
  .print-cover .pc-welten-name { font-size: 8.5pt; color: #9aa1a8; letter-spacing: .04em; }
  .print-cover .pc-fuss { display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; font-size: 9.5pt; color: #c9ced3; border-top: 0.3mm solid #3a4048; padding-top: 6mm; }
  .print-cover .pc-fuss b { color: #fff; display: block; font-size: 11pt; margin-bottom: 1mm; }
  .print-cover .pc-vertraulich { border: 0.3mm solid #ffb27a; color: #ffb27a; border-radius: 99mm; padding: 1.5mm 5mm; font-weight: 700; font-size: 8.5pt; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
}

/* Nur für Screenreader: Zwischenüberschriften, die visuell nicht nötig sind. */
.visually-hidden-heading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.interest-fieldset { border: none; padding: 0; margin: 0; }

/* -------------------------------------------------------------- Heute im Park */
.today-bar {
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-family: var(--body); font-size: 13.5px; color: var(--ink-soft);
}
/* Immer eine Zeile (nav.js kürzt den Inhalt, bis er passt), damit Platzhalter und Leiste gleich hoch sind:
   am Computer 38 px plus Linie, am Handy 44 px (Mindestgröße der Links) plus Linie. Englische Seiten genauso. */
.today-bar .wrap { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 10px; min-height: 38px; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; }
.today-platz { min-height: 39px; }
@media (max-width: 760px) { .today-bar .wrap { min-height: 44px; } .today-platz { min-height: 45px; } }
.today-item { flex: none; }
.today-bar b { color: var(--ink); }
.today-bar a { color: var(--amber-deep); font-weight: 600; text-decoration: none; }
.today-bar a:hover { text-decoration: underline; }
/* Punkt: grün nur bei belegt geöffnet, sonst neutral */
.today-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(46,125,79,.18); }
.today-dot.off { background: var(--ink-soft); box-shadow: none; }
.today-sep { color: var(--line-strong); flex: none; }
/* Passt auch die kürzeste Fassung nicht (sehr schmale Geräte): erster Teil endet mit … statt umzubrechen */
.today-bar.today-eng .today-item:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Tageshinweise aus dem CMS werden ganz gezeigt und dürfen umbrechen */
.today-bar.today-umbruch .wrap { flex-wrap: wrap; white-space: normal; gap: 4px 10px; padding-top: 6px; padding-bottom: 6px; }
.today-bar.today-umbruch .today-item { flex: 0 1 auto; }
@media (max-width: 560px) { .today-bar { font-size: 12.5px; } .today-sep { display: none; } .today-bar .wrap { gap: 0 14px; } }
.footer-legal { margin-top: 10px; font-size: 13.5px; }

/* -------------------------------------------------------------- Symbole (assets/icons.svg) */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; display: inline-block; overflow: visible; }
h1 .ico, h2 .ico, h3 .ico { color: var(--amber-deep); margin-right: .12em; }
/* Symbol im abgerundeten Feld – Kasse, Shop, Bestellung, App */
.ico-tile {
  --tile: 44px;
  width: var(--tile); height: var(--tile); flex: none; display: inline-grid; place-items: center;
  border-radius: calc(var(--tile) * .3); color: var(--amber-deep);
  background: color-mix(in srgb, var(--amber) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 18%, transparent);
}
.ico-tile .ico { width: calc(var(--tile) * .52); height: calc(var(--tile) * .52); vertical-align: 0; margin: 0; color: inherit; }
.concept-banner .ico { width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin-right: .35em; color: #ffd98a; }
.rating-star { width: .9em; height: .9em; vertical-align: -0.05em; color: var(--amber); }
/* Überschrift mit führendem Symbol: Folgezeilen bündig zum Text statt unter dem Symbol */
h2:has(> .ico:first-child), h3:has(> .ico:first-child) { display: flex; align-items: flex-start; gap: .4em; }
h2:has(> .ico:first-child) > .ico, h3:has(> .ico:first-child) > .ico { margin: -.02em 0 0; }
/* Ökosystem auf der Startseite: neun Bausteine als 3 × 3, ohne verwaiste Kachel */
.oeko .zones-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .oeko .zones-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .oeko .zones-grid { grid-template-columns: 1fr; } }
.offer-band.offer-words .big { font-size: clamp(26px, 3vw, 34px); }
/* Konzept-Banner auf dem Handy kompakter, damit der Inhalt früher beginnt */
@media (max-width: 560px) {
  .concept-banner { font-size: 12px; line-height: 1.45; padding: 7px 14px; }
}
/* Lange Adressen in Befunden umbrechen statt über den Rand zu ragen */
.finding p, .finding h3 { overflow-wrap: anywhere; }

/* Hinweis aus dem Park-Cockpit in der Heute-Leiste */
.today-hinweis { background: #fff3cd; color: #6b4a00; padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.today-hinweis b { color: #6b4a00; }
.today-bar a.today-cockpit { font-weight: 600; font-size: .92em; color: var(--ink-soft); text-decoration: underline; }

/* Themenwelten mit Foto (Startseite) */
.zone-card.welt-foto { padding-top: 0; overflow: hidden; }
.zone-card.welt-foto img { display: block; width: calc(100% + 36px); max-width: none; margin: 0 -18px 12px; aspect-ratio: 16 / 10; height: auto; object-fit: cover; transition: transform .5s ease; }
.zone-card.welt-foto:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------------ Gäste vs. Park-Team
   Alles mit .intern ist eine Erklärung für das Freizeit-Land-Team und gehört nicht zur späteren Gästeseite.
   Blaupausen-Stil, damit man es auf einen Blick unterscheidet. „Gästeansicht“ blendet es aus. */
:root { --intern: #1d4ed8; --intern-bg: #eef3ff; --intern-linie: #9db5f5; }
.intern {
  position: relative; border: 2px dashed var(--intern-linie); border-radius: 16px; padding: 30px 20px 20px; margin: 18px 0;
  background: var(--intern-bg) linear-gradient(rgba(29,78,216,.05) 1px, transparent 1px) 0 0 / 100% 22px;
  color: #1e2a4a;
}
.intern::before {
  content: "Für das Park-Team · nicht sichtbar für Gäste"; position: absolute; top: -12px; left: 16px;
  font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--intern);
  padding: 6px 10px 6px 26px; border-radius: 999px; box-shadow: 0 2px 6px rgba(29,78,216,.3);
}
.intern::after {
  content: ""; position: absolute; top: -7px; left: 26px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #fff; box-sizing: border-box;
}
.intern h2, .intern h3 { color: #13205c; }
.intern a:not(.btn) { color: var(--intern); }
section.intern, div.intern-kapitel { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
/* Ganze Konzept-Kapitel (z. B. untere Hälfte der Startseite) */
.intern-kapitel { position: relative; background: #f4f7ff linear-gradient(rgba(29,78,216,.045) 1px, transparent 1px) 0 0 / 100% 24px; border-top: 2px dashed var(--intern-linie); }
.intern-kapitel > .intern-kopf { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; padding: 22px 16px 6px; color: #1e2a4a; }
.intern-kopf b { font: 800 13px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--intern); padding: 7px 14px; border-radius: 999px; }
.intern-kopf span { font-size: 14px; }
.intern-kapitel section.alt { background: rgba(255,255,255,.55); }
html.gaeste .intern, html.gaeste .intern-kapitel { display: none !important; }

/* Umschalter im Hinweisbalken */
.ansicht-schalter { display: inline-flex; gap: 2px; padding: 2px; margin-left: 12px; border-radius: 999px; background: rgba(255,255,255,.12); vertical-align: middle; }
.ansicht-schalter button { font: 700 11.5px var(--body); color: #ffe9bd; background: none; border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.ansicht-schalter button[aria-pressed="true"] { background: #fff; color: #171b20; }
.ansicht-schalter button:focus-visible { outline: 2px solid #ffd98a; outline-offset: 1px; }
@media (max-width: 560px) { .ansicht-schalter { display: flex; width: max-content; margin: 6px auto 0; } }
@media print { .ansicht-schalter { display: none; } }

/* Einblenden beim Scrollen */
.eb { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.eb.eb-da { opacity: 1; transform: none; }
@media print { .eb { opacity: 1 !important; transform: none !important; } }

/* Seitenbanner: Park-Team (Blaupause) und System für Mitarbeitende (Schiefer) */
.seiten-banner { border-bottom: 1px solid; font-size: 13.5px; }
.seiten-banner .wrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
.seiten-banner b { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 5px 11px; border-radius: 999px; }
.seiten-banner.team { background: #eef3ff linear-gradient(rgba(29,78,216,.05) 1px, transparent 1px) 0 0 / 100% 12px; border-color: #c7d5fb; color: #1e2a4a; }
.seiten-banner.team b { background: var(--intern); }
.seiten-banner.system { background: #eef1f4; border-color: #d3d9e0; color: #2d3742; }
.seiten-banner.system b { background: #3d4a57; }
.nur-gaeste-hinweis { display: none; padding: 80px 0 100px; text-align: center; }
.nur-gaeste-hinweis h1 { font-size: clamp(26px, 3.4vw, 38px); }
.nur-gaeste-hinweis p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 16px; }
html.gaeste .seiten-banner { display: none; }
html.gaeste body.seite-team .nur-gaeste-hinweis, html.gaeste body.seite-system .nur-gaeste-hinweis { display: block; }
html.gaeste body.seite-team main, html.gaeste body.seite-system main { display: none; }
@media print { .seiten-banner, .nur-gaeste-hinweis { display: none !important; } }

/* Gästeansicht: Menü- und Footer-Links auf Team- und Systemseiten ausblenden */
html.gaeste .navlinks a[href$="pos/"], html.gaeste .navlinks a[href$="kundenbereich/"], html.gaeste .navlinks a[href$="marketing/"],
html.gaeste footer a[href$="pos/"], html.gaeste footer a[href$="kundenbereich/"], html.gaeste footer a[href$="marketing/"],
html.gaeste footer a[href$="vergleich/"], html.gaeste footer a[href$="fragen/"], html.gaeste footer a[href$="cockpit/"] { display: none !important; }
@media (max-width: 560px) {
  .intern { padding: 28px 14px 16px; }
  .intern::before { content: "Für das Park-Team"; }
}

/* Kleine Handys: lange deutsche Wörter in Überschriften trennen statt überlaufen */
@media (max-width: 400px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } }
/* Platz für den Ansicht-Umschalter im Konzept-Banner vorhalten, damit beim Laden nichts springt */
@media (max-width: 480px) { .concept-banner { min-height: 84px; } }
@media (min-width: 481px) and (max-width: 560px) { .concept-banner { min-height: 66px; } }
@media (min-width: 561px) and (max-width: 860px) { .concept-banner { min-height: 70px; } }
@media (min-width: 861px) { .concept-banner { min-height: 49px; } }
html[lang="en"] .concept-banner { min-height: 0; }

/* Kopfbereich mit echtem Foto: Bild hinten, Verlauf darüber für lesbaren Text */
.foto-hero { position: relative; isolation: isolate; overflow: hidden; }
.foto-hero > .hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.foto-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8,20,38,.94) 0%, rgba(8,20,38,.80) 45%, rgba(8,20,38,.28) 100%); }
@media (max-width: 760px) {
  .foto-hero { padding-top: 170px !important; }
  .foto-hero > .hero-bild { height: 300px; bottom: auto; }
  .foto-hero::before { background: linear-gradient(180deg, rgba(8,20,38,0) 0px, rgba(8,20,38,.15) 90px, rgba(8,20,38,.85) 200px, #0b1a2c 300px); }
}
/* Fotostreifen: vier Bilder nebeneinander, am Handy zwei */
.foto-streifen { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 22px 0 0; }
.foto-streifen figure { margin: 0; border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 4/3; background: #e6ebf1; }
.foto-streifen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-streifen figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; font: 700 13px var(--display); color: #fff; background: linear-gradient(transparent, rgba(8,20,38,.78)); }
@media (max-width: 760px) { .foto-streifen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.foto-quelle { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; }

/* News aus der Redaktion (assets/news.js) */
.news-raster { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.news-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.news-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.news-karte:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.news-karte img, .news-ohne-bild { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: linear-gradient(135deg, #ffe2c7, #dbe8fb); }
.news-text { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.news-text small { font: 700 12px var(--body); color: var(--amber-deep); text-transform: uppercase; letter-spacing: .06em; }
.news-text b { font: 800 18px/1.25 var(--display); } .news-text span { font-size: 14.5px; color: var(--ink-soft); }
.news-artikel { max-width: 760px; margin: 0 auto; padding: 36px 0 50px; }
.news-artikel h1 { font-size: clamp(28px,4vw,44px); line-height: 1.1; margin: 6px 0 18px; } .news-artikel > small { font: 700 13px var(--body); color: var(--amber-deep); text-transform: uppercase; letter-spacing: .06em; }
.news-titelbild { width: 100%; border-radius: 18px; margin: 0 0 18px; } .news-inhalt { font-size: 17px; line-height: 1.6; } .news-inhalt img { max-width: 100%; height: auto; border-radius: 12px; }
.news-zurueck { display: inline-block; margin: 0 0 16px; font-weight: 700; }
.news-leer { padding: 30px 0; color: var(--ink-soft); }
@media (max-width: 900px) { .news-raster { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .news-karte { transition: none; } }

/* Nur für Screenreader sichtbar */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.footer-social { font-size:14px; margin:8px 0; }
.footer-social a { display:inline-block; padding:6px 2px; min-height:24px; }

/* Newsletter-Baustein */
.nl-baustein { background:var(--bg-soft); border-top:1px solid var(--line); padding:34px 0; }
.nl-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px 40px; align-items:start; }
.nl-text h2 { margin:0 0 6px; font-size:26px; } .nl-text p { margin:0; color:var(--ink-soft); max-width:46ch; }
.nl-form { display:grid; gap:10px; }
.nl-form > label:first-child { font:700 14px var(--body); }
.nl-form input[type=email] { font:500 16px var(--body); padding:12px 14px; min-height:48px; border:2px solid var(--fl-feldrand,#7a828a); border-radius:12px; background:#fff; color:var(--ink); width:100%; box-sizing:border-box; }
.nl-form input[type=checkbox] { width:18px; height:18px; accent-color:var(--amber-deep); flex:none; }
.nl-ds { display:flex; gap:8px; align-items:flex-start; font:400 13.5px var(--body); color:var(--ink-soft); } .nl-ds input { margin-top:2px; }
.nl-hp { position:absolute; left:-9999px; width:1px; height:1px; }
.nl-meld { min-height:22px; margin:0; font-weight:700; } .nl-ok { color:#1b5e2f; }
.nl-form .btn { justify-self:start; }
@media (max-width:760px) { .nl-in { grid-template-columns:1fr; } }

/* Feldrand mit mindestens 3:1 Kontrast (WCAG 1.4.11): #7a828a auf Weiß 3,9:1, auf #f7f7f7 3,6:1. Gleiche Werte wie im Shop (2 px, 12 px Radius, 48 px hoch).
   Zentraler Baustein mit Spezifität 0,1,2: schlägt die Seitenregeln mit 1 px Rand (0,1,1), ohne die Seiten einzeln anzufassen. */
:root { --fl-feldrand: #7a828a; }
main :is(input:not([type=checkbox],[type=radio],[type=range],[type=hidden],[type=submit],[type=button],[type=reset],[type=file],[type=color],[type=image],.nl-hp), select, textarea) {
  border: 2px solid var(--fl-feldrand); border-radius: 12px; min-height: 48px;
}
main :is(input:not([type=checkbox],[type=radio],[type=range],[type=hidden],[type=submit],[type=button],[type=reset],[type=file],[type=color],[type=image],.nl-hp), select, textarea):focus-visible,
.nl-form input[type=email]:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 2px; border-color: var(--amber-deep);
}

/* Saison-Umschaltung (Startseite, Schnellzugriffe, Kästen): das Attribut hidden gilt auch dort, wo ein Baustein display setzt */
[data-fuer][hidden], [data-geschenk][hidden] { display: none !important; }

/* Touch-Ziele am Handy: mindestens 44 px hoch (Ziel), Inline-Links im Fließtext bleiben ausgenommen */
@media (max-width: 760px) {
  .today-bar a { display: inline-flex; align-items: center; min-height: 44px; }
  .today-bar .wrap { padding-top: 0; padding-bottom: 0; }
  .footer-grid > div > a { display: flex; align-items: center; min-height: 44px; }
  .footer-legal a, .footer-social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
  .footer-grid a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
  .topnav .nav-cta, .nav-toggle { min-height: 44px; }
}

/* Schmale Handys (320 px): kein seitliches Überlaufen auf Preisübersicht, Suche und Gruppen */
@media (max-width: 480px) {
  table.ls-preise th:nth-child(n+2), table.ls-preise td[colspan] { white-space: normal; }

}
.su-form input { min-width: 0; max-width: 100%; }
main .gr-spalten { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }