/* ===========================================================
   BOULDER JUNGLE — Design System
   Farbkonzept & Typografie abgeleitet vom "Coming Soon"-Flyer:
   Tiefschwarz + Dschungel-Grün + Lime-Akzent + Weiß.
   =========================================================== */

/* Schriften lokal eingebunden (kein Abruf bei Google -> DSGVO-freundlich). Lizenz: SIL Open Font License */
@font-face{ font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/anton-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Permanent Marker'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/poppins-latin-300-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/poppins-latin-800-normal.woff2') format('woff2'); }


:root{
  /* --- Flyer-Farbpalette --- */
  --bg:            #0a0d07;   /* fast schwarz, leicht grün */
  --bg-alt:        #10150c;   /* leicht abgesetzte Section-Fläche */
  --panel:         #161d10;   /* Karten */
  --panel-2:       #1d2716;   /* Karten hover / featured */
  --line:          rgba(247,247,242,.10);
  --line-strong:   rgba(247,247,242,.20);

  --lime:          #c6e01e;   /* Haupt-Akzent aus dem Flyer */
  --lime-dark:     #9db316;
  --lime-soft:     #e3f27a;
  --lime-ink:      #10150a;   /* Text auf Lime */

  --white:         #f7f7f0;
  --muted:         #b7c0a8;
  --muted-2:       #7c886d;

  --leaf-1:        #1f3a17;
  --leaf-2:        #2c4a22;
  --leaf-3:        #3c5c2c;

  --danger:        #e0552f;

  /* --- Typografie --- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-accent:  'Permanent Marker', cursive;
  --font-body:    'Poppins', system-ui, sans-serif;

  --container: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
/* Safety net: nothing should ever be able to push the page wider
   than the viewport on phones (this is what let mobile users drag
   the whole site left/right). */
html, body{ overflow-x: hidden; width:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:400; letter-spacing:.5px; text-transform:uppercase; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; font-size:1rem; }
.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }

/* background texture: faint diagonal facets like the climbing wall */
body{
  background-image:
    radial-gradient(circle at 12% 8%, rgba(198,224,30,.06), transparent 40%),
    radial-gradient(circle at 88% 30%, rgba(198,224,30,.05), transparent 45%),
    linear-gradient(var(--bg), var(--bg));
}

/* ---------- Utility ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color: var(--lime);
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background: var(--lime); display:inline-block;
}
.section-title{
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  color: var(--white);
  margin-bottom:16px;
}
.section-title .hl{ color: var(--lime); }
.section-lead{
  font-size:1.05rem; color: var(--muted); max-width:640px; font-family: var(--font-body); text-transform:none; letter-spacing:0;
}
.section{ padding: 88px 0; position:relative; }
.section--alt{ background: var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--tight{ padding: 56px 0; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(198,224,30,.1); border:1px solid rgba(198,224,30,.4);
  color: var(--lime-soft); font-weight:600; font-size:.82rem;
  padding:6px 14px; border-radius:999px; letter-spacing:.04em;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:.95rem;
  letter-spacing:.03em; border:2px solid transparent; transition:.2s ease;
  text-transform:uppercase;
}
.btn-primary{ background: var(--lime); color: var(--lime-ink); }
.btn-primary:hover{ background: var(--lime-soft); transform: translateY(-2px); }
.btn-outline{ border-color: var(--line-strong); color: var(--white); }
.btn-outline:hover{ border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 20px; font-size:.82rem; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(10,13,7,.97);
  border-bottom:1px solid var(--line);
  transition: background .3s ease, border-color .3s ease;
}
/* Note: intentionally no backdrop-filter here — it would make this
   element a containing block for its position:fixed mobile-nav
   child, breaking the full-screen overlay on phones. */
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; gap:20px;
}
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ width:34px; height:34px; color: var(--lime); }
/* Official logo (monkey + BOULDER JUNGLE), recoloured for the dark theme:
   BOULDER white, monkey/vine/JUNGLE lime — same as on the flyer. */
.logo picture{ display:block; }
.logo-img{ display:block; height:58px; width:auto; }
.site-footer .logo-img{ height:96px; }
@media (max-width:900px){ .logo-img{ height:48px; } }
.logo-text{ display:flex; flex-direction:column; line-height:.92; }
.logo-text .l1{ font-family: var(--font-display); font-size:1.05rem; color:var(--white); letter-spacing:.5px; }
.logo-text .l2{ font-family: var(--font-accent); font-size:1.05rem; color: var(--lime); text-transform:none; }

.main-nav ul{ display:flex; gap:30px; }
.main-nav a{
  font-weight:600; font-size:.86rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--muted); position:relative; padding:6px 0;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--white); }
.main-nav a.btn-primary{ color: var(--lime-ink); }
.main-nav a.btn-primary:hover{ color: var(--lime-ink); }
.main-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background: var(--lime); border-radius:2px;
}
.header-actions{ display:flex; align-items:center; gap:14px; }

/* 44px tap target (accessibility minimum) with the bars centered on
   both axes, so the open/close "X" is always a symmetric, fully
   contained shape regardless of device pixel rounding. */
.nav-toggle{
  display:none; background:none; border:none; width:44px; height:44px; padding:0;
  flex-direction:column; justify-content:center; align-items:center; gap:7px;
  flex-shrink:0; overflow:visible;
}
.nav-toggle span{ display:block; width:26px; height:3px; background: var(--white); border-radius:2px; transition:.25s; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset:64px 0 0 0; background: var(--bg);
    padding:30px 24px; transform: translateX(100%); transition: transform .3s ease;
    overflow-y:auto; border-top:1px solid var(--line);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap:4px; }
  .main-nav a{ display:block; padding:14px 4px; font-size:1.05rem; border-bottom:1px solid var(--line); }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .main-nav .mobile-cta{ display:block; margin-top:20px; }
  /* .main-nav a's own display:block (needed so the nav links stack and
     get a full-width tap target) otherwise beats .btn's display:flex by
     specificity, which left this button's label stuck against the left
     edge instead of centered. Restore flex centering here. */
  .main-nav a.btn-primary{ display:flex; align-items:center; justify-content:center; }
}
@media (min-width:901px){ .main-nav .mobile-cta{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding: 90px 0 100px;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(198,224,30,.10), transparent 55%),
    linear-gradient(180deg, #0a0d07 0%, #0d1109 100%);
  border-bottom:1px solid var(--line);
}
/* Real monstera-leaf photo cutout, tinted dark to sit into the
   near-black hero background instead of reading as a pasted-on
   stock photo. Faded via mask toward the inner edge so it recedes
   behind the hero text/art instead of competing with it. */
.hero-leaf{
  position:absolute; height:auto; pointer-events:none; z-index:1;
  filter: brightness(.5) saturate(1.25) contrast(1.05);
}
.hero-leaf--tl{
  top:-50px; left:-70px; width:230px; transform:rotate(-10deg);
  -webkit-mask-image: linear-gradient(135deg, #000 45%, transparent 88%);
  mask-image: linear-gradient(135deg, #000 45%, transparent 88%);
}
.hero-leaf--br{
  bottom:-80px; right:-60px; width:260px; transform:rotate(8deg) scaleX(-1);
  -webkit-mask-image: linear-gradient(-45deg, #000 45%, transparent 88%);
  mask-image: linear-gradient(-45deg, #000 45%, transparent 88%);
}
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:50px; align-items:center; position:relative; z-index:2; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; background: var(--lime); color: var(--lime-ink);
  font-family: var(--font-display); letter-spacing:.06em; padding:8px 16px; border-radius:6px;
  transform: rotate(-2deg); font-size:.9rem; margin-bottom:22px;
}
.hero-title{
  /* line-height was tighter than the font's own accent-mark space,
     so an Ö/Ä/Ü's umlaut dots could poke into the line above it.
     1.1 keeps the tight poster look but leaves room for umlauts. */
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height:1.1; color: var(--white);
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.hero-title .line2{ display:block; margin-top:14px; }
.hero-title .brush{
  font-family: var(--font-accent); text-transform:none; color: var(--lime);
  display:block; font-size:1.05em; line-height:1; margin-top:6px; letter-spacing:0;
}
.hero-sub{ margin-top:22px; font-size:1.08rem; color: var(--muted); max-width:520px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; }
.hero-stats{ display:flex; gap:30px; margin-top:48px; flex-wrap:wrap; }
.hero-stats .stat-num{ font-family: var(--font-display); font-size:2rem; color: var(--lime); display:block; }
.hero-stats .stat-label{ font-size:.8rem; color: var(--muted); text-transform:uppercase; letter-spacing:.05em; }

.hero-art{
  position:relative; aspect-ratio: 4/5; border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, #1b2413 0 26px, #202b17 26px 52px),
    linear-gradient(180deg, #222d18, #131a0d);
  border:1px solid var(--line-strong); overflow:hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.hero-art::before{
  content:""; position:absolute; inset:0;
  background-image:
    conic-gradient(from 20deg at 20% 30%, rgba(198,224,30,.35), transparent 30%),
    conic-gradient(from 190deg at 75% 70%, rgba(198,224,30,.25), transparent 35%);
  mix-blend-mode: screen;
}
.hero-art .holds{ position:absolute; inset:0; }
.hero-art .hold{
  position:absolute; width:26px; height:26px; background: var(--lime); border-radius: 40% 60% 55% 45%/50% 45% 55% 50%;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
}
/* Internal to-do note, not customer-facing content: marks the
   decorative placeholder graphics that still need a real photo.
   Dashed border reads as "temporary slot" rather than a real tag. */
.hero-art .photo-hint{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:24px;
}
.hero-art .photo-hint span{
  display:inline-flex; align-items:center; gap:8px; max-width:220px; text-align:center;
  background: rgba(10,13,7,.8); border:1px dashed rgba(198,224,30,.55);
  color: var(--lime-soft); font-weight:600; font-size:.82rem; line-height:1.4;
  padding:10px 16px; border-radius:10px; letter-spacing:.02em;
}
.hero-art .photo-hint svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- Benefit / Step / Feature cards ---------- */
/* Cards in a row stretch to equal height (grid default) so rows of
   feature/price cards look uniform — the padding-asymmetry bugs that
   used to make this look bottom-heavy were in .step's padding and
   .price-card's trailing margin specifically; both are fixed at the
   source below, so stretching no longer causes dead-looking gaps. */
.grid{ display:grid; gap:24px; }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width:980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:640px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } .hero-grid{ grid-template-columns:1fr; } }

/* Two-column info/form layouts (Kontakt, Anfahrt, Startseite-Voranmeldung).
   Column ratio + gap come in per-page via --cols/--gap custom properties;
   the !important below guarantees the mobile collapse always wins, since
   those custom properties are set with an inline style attribute. */
.responsive-split{
  display:grid; grid-template-columns: var(--cols, 1fr 1fr); gap: var(--gap, 24px);
  align-items:start; min-width:0;
}
.responsive-split > *{ min-width:0; }
@media (max-width:860px){
  .responsive-split{ grid-template-columns: 1fr !important; }
}

.card{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding:28px; transition:.2s ease;
  /* Cards in a row stretch to equal height for a uniform grid. Centering
     the content vertically (instead of leaving it stuck to the top)
     means a card with a shorter description gets its extra space split
     evenly above and below, instead of all of it landing as dead air
     underneath the text. */
  display:flex; flex-direction:column; justify-content:center;
}
.card:hover{ border-color: var(--line-strong); transform: translateY(-3px); }
.card-icon{
  width:46px; height:46px; border-radius:10px; background: rgba(198,224,30,.12);
  display:flex; align-items:center; justify-content:center; color: var(--lime); margin-bottom:18px;
}
.card-icon svg{ width:24px; height:24px; }
.card h3{ font-size:1.15rem; color: var(--white); margin-bottom:10px; text-transform:none; letter-spacing:0; font-family:var(--font-body); font-weight:700; }
.card p{ color: var(--muted); font-size:.95rem; }

/* No padding-top override here: .step is combined with .card
   (class="card step"), and a padding-top here — even a small one —
   used to win over .card's own "padding:28px" shorthand and cut the
   step card's top padding down to almost nothing, while the bottom
   stayed at 28px. That was the main cause of the "more space at the
   bottom than the top" look on the "Dein erster Besuch" cards. */
.step{ position:relative; }
.step-num{
  font-family: var(--font-display); font-size:2.6rem; color: var(--lime); opacity:.5; line-height:1; margin-bottom:6px; display:block;
}

/* ---------- Farbsystem / Grade chips ---------- */
.grade-row{ display:flex; flex-wrap:wrap; gap:14px; }
.grade-chip{
  flex:1 1 160px; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:18px; display:flex; flex-direction:column; gap:6px; border-left:6px solid var(--dot,var(--lime));
}
.grade-chip .grade{ font-family: var(--font-display); font-size:1.3rem; color: var(--white); }
.grade-chip .level{ font-size:.85rem; color: var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Pricing ---------- */
.price-card{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding:32px; display:flex; flex-direction:column; position:relative;
}
.price-card--featured{
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-color: var(--lime);
  box-shadow: 0 20px 45px rgba(198,224,30,.12);
}
.price-card .ribbon{
  position:absolute; top:-14px; right:24px; background: var(--lime); color: var(--lime-ink);
  font-weight:800; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
}
.price-card h3{ font-size:1.2rem; color:var(--white); text-transform:none; font-family:var(--font-body); font-weight:700; }
.price-card .price{ font-family: var(--font-display); font-size:2.6rem; color: var(--lime); margin:14px 0 4px; }
.price-card .price small{ font-family: var(--font-body); font-size:.95rem; color: var(--muted); text-transform:none; font-weight:500; }
.price-card .desc{ color: var(--muted); font-size:.9rem; margin-bottom:20px; }
.price-card ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; flex:1; }
.price-card li{ display:flex; gap:10px; font-size:.92rem; color: var(--white); align-items:flex-start; }
.price-card li svg{ width:18px; height:18px; color: var(--lime); flex-shrink:0; margin-top:2px; }
/* Strip a trailing margin from whatever ends up last (some price
   cards have a features <ul> + button after .desc, others don't) so
   its own spacing-before-the-next-thing margin doesn't turn into
   extra dead air at the bottom of the card. */
.price-card > *:last-child{ margin-bottom:0; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:6px 0; }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  padding:18px 4px; font-weight:600; color: var(--white); font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family: var(--font-display); font-size:1.5rem; color: var(--lime); flex-shrink:0; margin-left:16px; transition:.2s;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ color: var(--muted); padding: 0 4px 20px; max-width:720px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:.82rem; font-weight:600; color: var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.field input, .field select, .field textarea{
  background: var(--bg-alt); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:13px 14px; color: var(--white); outline:none; transition:.2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--lime); }
.field textarea{ resize:vertical; min-height:110px; }
.checkbox-field{ display:flex; align-items:flex-start; gap:10px; }
.checkbox-field input{ margin-top:4px; accent-color: var(--lime); width:16px; height:16px; }
.checkbox-field label{ font-size:.85rem; color: var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }
.form-note{ font-size:.82rem; color: var(--muted-2); margin-top:14px; }
.form-success{
  display:none; background: rgba(198,224,30,.12); border:1px solid var(--lime); color: var(--lime-soft);
  padding:16px 18px; border-radius: var(--radius-sm); margin-top:18px; font-weight:600;
}
.form-success.is-visible{ display:block; }

/* ---------- Info panels (Kontakt/Anfahrt) ---------- */
.info-panel{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding:28px; }
.info-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.info-row:last-child{ border-bottom:none; }
.info-row svg{ width:22px; height:22px; color: var(--lime); flex-shrink:0; margin-top:2px; }
.info-row h4{ font-family: var(--font-body); text-transform:none; letter-spacing:0; font-size:.95rem; color: var(--white); font-weight:700; margin-bottom:6px; }
.info-row p{ color: var(--muted); font-size:.9rem; }

.map-frame{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
  aspect-ratio: 16/10; background: var(--panel);
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; filter: invert(.9) hue-rotate(180deg) saturate(.7) contrast(.95); }

/* ---------- Timeline (Über uns) ---------- */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background: var(--line-strong); }
.timeline-item{ position:relative; padding-bottom:34px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-34px; top:2px; width:20px; height:20px; border-radius:50%;
  background: var(--bg); border:3px solid var(--lime);
}
.timeline-item .date{ color: var(--lime); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; }
.timeline-item h4{ font-family: var(--font-body); text-transform:none; letter-spacing:0; font-size:1.1rem; margin:6px 0; }
.timeline-item p{ color: var(--muted); font-size:.92rem; }

/* ---------- Legal pages ---------- */
.legal{ max-width: 820px; }
.legal h2{ font-family: var(--font-body); text-transform:none; letter-spacing:0; font-size:1.4rem; margin:38px 0 14px; color:var(--lime-soft); }
.legal h2:first-child{ margin-top:0; }
.legal p, .legal li{ color: var(--muted); font-size:.98rem; line-height:1.75; margin-bottom:14px; }
.legal li{ margin-left:20px; list-style:disc; }
.legal .placeholder, .ph{ color: var(--lime); background: rgba(198,224,30,.12); padding:1px 6px; border-radius:4px; font-weight:600; white-space:nowrap; }
.legal-notice{
  background: rgba(224,85,47,.1); border:1px solid rgba(224,85,47,.4); color:#f3b39e;
  padding:16px 18px; border-radius: var(--radius-sm); margin-bottom:32px; font-size:.9rem;
}

/* ---------- Page hero (subpages) ---------- */
.page-hero{
  padding:56px 0; background: linear-gradient(180deg,#0d1109,#0a0d07); border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.page-hero h1{ font-size: clamp(2.1rem,4.4vw,3.2rem); }
.page-hero .breadcrumb{ color: var(--muted-2); font-size:.85rem; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em; }
.page-hero .breadcrumb a{ color: var(--muted); }
.page-hero .breadcrumb a:hover{ color: var(--lime); }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--lime); color: var(--lime-ink); border-radius: var(--radius);
  padding:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ color: var(--lime-ink); font-size:clamp(1.6rem,3vw,2.2rem); }
.cta-band p{ color: rgba(16,21,10,.75); margin-top:8px; font-family:var(--font-body); text-transform:none; letter-spacing:0; }
.cta-band .btn-outline{ border-color: var(--lime-ink); color: var(--lime-ink); }
.cta-band .btn-outline:hover{ background: var(--lime-ink); color: var(--lime); }

/* ---------- Footer ---------- */
.site-footer{ background: #080a05; border-top:1px solid var(--line); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ color: var(--muted); font-size:.9rem; margin-top:14px; max-width:280px; }
.footer-col h5{ font-family: var(--font-body); text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; color: var(--lime); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color: var(--muted); font-size:.9rem; }
.footer-col a:hover{ color: var(--white); }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color: var(--muted);
}
.footer-social a:hover{ border-color: var(--lime); color: var(--lime); }
.footer-bottom{
  border-top:1px solid var(--line); margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.82rem; color: var(--muted-2);
}
.footer-bottom a{ color: var(--muted-2); }
.footer-bottom a:hover{ color: var(--lime); }

/* ---------- Animations ----------
   Content is visible by default (reliable for no-JS, slow JS,
   crawlers and print). Only the subtle fade-up is progressively
   enhanced once JS confirms the element is in view. */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .reveal.will-animate{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.will-animate.is-visible{ opacity:1; transform:none; }
}

/* ---------- Eröffnungs-Banner (Startseite) ---------- */
.opening-banner{ background: var(--lime); color: var(--lime-ink); position:relative; z-index:3; }
.opening-banner .container{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding-top:20px; padding-bottom:20px; text-align:center;
}
.opening-banner .ob-date{
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.15rem, 2.4vw, 1.5rem); line-height:1.15;
}
.opening-banner .ob-route{
  display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:1rem; line-height:1.45;
}
.opening-banner .ob-route svg{ width:20px; height:20px; flex-shrink:0; }
.opening-banner .ob-route strong{ font-weight:800; }

/* ---------- Hero-Logo (Startseite, rechte Spalte) ---------- */
.hero-logo{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-logo img{ width:100%; max-width:520px; height:auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
@media (max-width:640px){ .hero-logo{ order:-1; } .hero-logo img{ max-width:340px; } }

/* ---------- Onlinebuchung ---------- */
.booking-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:40px; }
.booking-cta .ph{ white-space:normal; }

/* Step cards: numbers line up across the row (top-aligned content). */
.card.step{ justify-content:flex-start; }

/* ---------- Startseite: Feature- & Schritt-Karten ----------
   Uniform cards: content top-aligned so icons/numbers and titles sit on
   the same line across a row; equal height comes from the grid. */
.feature-card, .step-card{ justify-content:flex-start; }
.feature-card p, .step-card p{ font-size:.93rem; line-height:1.6; }
.step-card{ border-top:3px solid var(--lime); }
.step-badge{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:46px; height:46px; border-radius:50%; background: var(--lime); color: var(--lime-ink);
  font-family: var(--font-display); font-size:1.15rem; letter-spacing:.02em; margin-bottom:18px;
}

/* ---------- Über uns: Team (optional) ---------- */
.team-section{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.team-section .eyebrow{ justify-content:center; }
.optional-tag{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  border:1px dashed rgba(198,224,30,.55); color: var(--lime-soft); background: rgba(10,13,7,.6);
  font-size:.8rem; font-weight:600; letter-spacing:.02em; padding:7px 14px; border-radius:999px;
}
.optional-tag svg{ width:15px; height:15px; flex-shrink:0; }
.team-card{ max-width:620px; width:100%; margin-top:36px; align-items:center; padding:44px 36px; }
.team-photo{
  width:132px; height:132px; border-radius:50%; margin-bottom:22px;
  border:2px dashed rgba(198,224,30,.6); background: var(--panel-2); color: var(--lime-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.team-photo svg{ width:28px; height:28px; }
.team-card h3{ font-size:1.4rem; margin-bottom:4px; }
.team-role{ color: var(--lime) !important; font-weight:600; font-size:.85rem !important; text-transform:uppercase; letter-spacing:.06em; }
.team-text{ margin-top:18px; max-width:480px; line-height:1.7; }
.team-quote{ margin-top:18px; font-style:italic; }
.team-quote .ph{ white-space:normal; font-style:normal; }

/* ---------- Anfahrt ---------- */
.route-card{
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--lime);
  border-radius: var(--radius); padding:30px 34px; margin-bottom:28px;
}
.route-label{ color: var(--lime); font-weight:700; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:22px; }
.route-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3,1fr); position:relative; }
.route-steps::before{ /* connecting line between the dots */
  content:""; position:absolute; top:9px; left:10px; right:calc(33.33% - 10px); height:2px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 10px, transparent 10px 18px);
}
.route-steps li{ position:relative; display:flex; flex-direction:column; gap:4px; padding-right:16px; }
.route-dot{ width:20px; height:20px; border-radius:50%; background: var(--bg); border:3px solid var(--lime); margin-bottom:14px; position:relative; z-index:1; }
.route-dot--end{ background: var(--lime); }
.route-steps strong{ font-family: var(--font-display); font-weight:400; font-size:1.35rem; color: var(--white); letter-spacing:.02em; text-transform:uppercase; line-height:1.15; }
.route-steps span:not(.route-dot){ color: var(--muted); font-size:.9rem; }
@media (max-width:700px){
  .route-card{ padding:26px 22px; }
  .route-steps{ grid-template-columns:1fr; gap:22px; }
  .route-steps::before{ display:none; }
  .route-steps li:not(:last-child)::after{ content:""; position:absolute; left:9px; top:22px; bottom:-24px; width:2px;
    background: repeating-linear-gradient(180deg, var(--lime) 0 8px, transparent 8px 14px); }
  .route-steps li{ padding-left:38px; padding-right:0; }
  .route-dot{ position:absolute; left:0; top:2px; margin:0; }
}
.anfahrt-grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap:28px; align-items:stretch; }
.anfahrt-grid > *{ min-width:0; }
.anfahrt-grid .map-frame{ aspect-ratio:auto; min-height:420px; height:100%; }
@media (max-width:860px){ .anfahrt-grid{ grid-template-columns:1fr; } .anfahrt-grid .map-frame{ height:380px; min-height:0; } }
.map-consent{ position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(198,224,30,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(198,224,30,.05) 0 1px, transparent 1px 44px),
    var(--panel); }
.map-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px; text-align:center; }
.map-placeholder > svg{ width:44px; height:44px; color: var(--lime); }
.map-address{ color: var(--white); font-weight:700; font-size:1.05rem; }
.map-note{ color: var(--muted-2); font-size:.8rem; max-width:340px; line-height:1.5; }
.map-note a{ color: var(--lime); text-decoration:underline; }

button.btn{ background:transparent; font-family:inherit; cursor:pointer; }
button.btn-primary{ background: var(--lime); }

/* ---------- Schmale Handys (bis 320px): nichts darf breiter als der Screen werden ---------- */
.grid > *, .hero-grid > *, .form-grid > *{ min-width:0; }
.field input, .field select, .field textarea{ width:100%; max-width:100%; min-width:0; }
.legal .placeholder, .ph{ white-space:normal; overflow-wrap:anywhere; }
.hero-badge{ max-width:100%; flex-wrap:wrap; }
@media (max-width:380px){ .hero-badge{ font-size:.8rem; } }
.legal a{ overflow-wrap:anywhere; }
.field input[type="checkbox"], .field input[type="radio"]{ width:16px; flex-shrink:0; }
.field.checkbox-field{ flex-direction:row; align-items:flex-start; }

/* ---------- Fotos ---------- */
.media-frame{
  position:relative; margin:0; border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--line-strong); box-shadow: 0 30px 60px rgba(0,0,0,.5); background: var(--panel);
}
.media-frame picture, .media-frame img{ display:block; width:100%; height:100%; }
.media-frame img{ object-fit:cover; }
.media-frame--portrait{ aspect-ratio:4/5; }
.media-frame--wide{ aspect-ratio:5/4; }
.split-media{ display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:center; }
.split-media > *{ min-width:0; }
.split-media--reverse > .media-frame{ order:2; }
.feature-grid{ margin-top:32px; gap:16px; }
.feature-grid .feature-card{ padding:22px; }
.feature-grid .card-icon{ margin-bottom:14px; }
@media (max-width:900px){
  .split-media{ grid-template-columns:1fr; gap:36px; }
  .split-media--reverse > .media-frame{ order:0; }
  .media-frame--portrait{ aspect-ratio:16/11; }
}
@media (max-width:640px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .feature-grid{ grid-template-columns:1fr; } }

/* Halle: page hero with photo */
.page-hero--image{ position:relative; overflow:hidden; padding-top:120px; padding-bottom:120px; }
.page-hero--image .container{ position:relative; z-index:2; }
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg picture, .page-hero-bg img{ display:block; width:100%; height:100%; }
.page-hero-bg img{ object-fit:cover; object-position: 70% 35%; filter: saturate(.9) brightness(.85); }
.page-hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,13,7,.97) 0%, rgba(10,13,7,.88) 38%, rgba(10,13,7,.35) 70%, rgba(10,13,7,.15) 100%),
              linear-gradient(0deg, rgba(10,13,7,.85) 0%, transparent 35%);
}
.page-hero--image .section-lead{ max-width:540px; color:#c9d1bd; }
@media (max-width:760px){
  .page-hero--image{ padding-top:80px; padding-bottom:80px; }
  .page-hero-bg img{ object-position: 78% 30%; }
  .page-hero-bg::after{ background: linear-gradient(0deg, rgba(10,13,7,.97) 0%, rgba(10,13,7,.8) 55%, rgba(10,13,7,.55) 100%); }
}
.grid > .card{ justify-content:flex-start; }

/* ---------- Startseite: "Die Halle" zentriert (ohne Bild) ---------- */
.halle-v1{ max-width:1100px; }
.halle-intro{ text-align:center; max-width:760px; margin:0 auto; }
.halle-intro .eyebrow{ justify-content:center; }
.halle-intro .section-lead{ margin-left:auto; margin-right:auto; }
.halle-cards{ margin-top:48px; }
.halle-cards .feature-card{ text-align:center; align-items:center; }
.halle-more{ text-align:center; margin-top:40px; }
@media (max-width:980px){ .halle-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .halle-cards{ grid-template-columns:1fr; } }

/* Kennzeichnung für Beispielbilder (bis echte Fotos da sind) */
.sample-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  background: rgba(10,13,7,.82); color: var(--lime-soft); border:1px dashed rgba(198,224,30,.6);
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}

/* ---------- v1.2: Eröffnungs-Banner direkt unter dem Header, größer ---------- */
.opening-banner .container{ padding-top:26px; padding-bottom:26px; gap:10px; }
.opening-banner .ob-date{ font-size:clamp(1.6rem, 4.2vw, 2.7rem); letter-spacing:.03em; line-height:1.05; }
.opening-banner .ob-route{ font-size:clamp(.95rem, 1.6vw, 1.15rem); }
.opening-banner .ob-route svg{ width:22px; height:22px; }
.opening-banner{ box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* Buchungsfenster (ROLLER) offen: Seite dahinter nicht mitscrollen */
html.roller-open, html.roller-open body{ overflow:hidden !important; overscroll-behavior:none; }
html.roller-open{ scrollbar-gutter: stable; }

/* ---------- Kontaktformular: Fehlermeldung, Honeypot, „Ich bin kein Roboter“ ---------- */
.form-error{
  display:none; background: rgba(224,85,47,.12); border:1px solid rgba(224,85,47,.45); color:#f3b39e;
  padding:14px 16px; border-radius: var(--radius-sm); margin-top:16px; font-size:.9rem; font-weight:600;
}
.form-error.is-visible{ display:block; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.bot-check{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background: var(--bg-alt); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:14px 16px;
}
.bot-check__box{
  position:relative; flex-shrink:0; width:30px; height:30px; border-radius:7px; cursor:pointer;
  background: var(--panel); border:2px solid var(--line-strong); transition:.2s ease; padding:0;
}
.bot-check__box:hover:not(:disabled){ border-color: var(--lime); }
.bot-check__box:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
.bot-check__tick{
  position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px);
  fill:none; stroke: var(--lime-ink); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.6); transition:.2s ease;
}
.bot-check__spinner{
  position:absolute; inset:4px; border-radius:50%; border:3px solid rgba(198,224,30,.25);
  border-top-color: var(--lime); opacity:0;
}
.bot-check.is-loading .bot-check__box{ border-color: transparent; background:transparent; cursor:progress; }
.bot-check.is-loading .bot-check__spinner{ opacity:1; animation: botspin .8s linear infinite; }
.bot-check.is-verified .bot-check__box{ background: var(--lime); border-color: var(--lime); cursor:default; }
.bot-check.is-verified .bot-check__tick{ opacity:1; transform:scale(1); }
.bot-check.is-error .bot-check__box{ border-color:#e0552f; }
@keyframes botspin{ to{ transform:rotate(360deg); } }
.bot-check__text{ display:flex; flex-direction:column; gap:2px; flex:1 1 140px; min-width:0; }
.bot-check__label{ color: var(--white); font-weight:600; font-size:.95rem; }
.bot-check__status{ color: var(--muted); font-size:.8rem; min-height:1em; }
.bot-check.is-verified .bot-check__status{ color: var(--lime); }
.bot-check.is-error .bot-check__status{ color:#f3b39e; }
.bot-check__badge{
  display:inline-flex; align-items:center; gap:6px; color: var(--muted-2);
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.bot-check__badge svg{ width:16px; height:16px; color: var(--lime); }

/* ---------- Preise: Buchungs-Button unter den Preiskarten ---------- */
.price-cta{
  margin-top:32px; display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--lime);
  border-radius: var(--radius); padding:28px 32px;
}
.price-cta h3{ font-family: var(--font-body); text-transform:none; letter-spacing:0; font-size:1.25rem; font-weight:700; color: var(--white); }
.price-cta p{ color: var(--muted); font-size:.95rem; margin-top:6px; }
.price-cta .btn{ flex-shrink:0; }
@media (max-width:640px){ .price-cta{ padding:24px 22px; } .price-cta .btn{ width:100%; } }

/* ---------- Cookie-Banner ---------- */
.link-btn{
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.link-btn:hover{ color: var(--lime); }
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:500;
  max-width:1040px; margin:0 auto;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line-strong); border-top:3px solid var(--lime);
  border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transform: translateY(calc(100% + 32px)); opacity:0; visibility:hidden;
  transition: transform .35s ease, opacity .35s ease, visibility .35s;
}
.cookie-banner.is-visible{ transform:none; opacity:1; visibility:visible; }
.cookie-banner__inner{ display:flex; align-items:center; gap:20px 32px; padding:22px 26px; flex-wrap:wrap; }
.cookie-banner__text{ flex:1 1 380px; min-width:0; }
.cookie-banner__title{ font-family: var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:1.15rem; color: var(--white); margin-bottom:6px; }
.cookie-banner__text p{ color: var(--muted); font-size:.9rem; line-height:1.6; }
.cookie-banner__text a{ color: var(--lime); text-decoration:underline; }
.cookie-banner__actions{ display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; }
.cookie-banner__actions .link-btn{ color: var(--muted); font-size:.85rem; }
.cookie-banner__options{ display:grid; gap:10px; margin-top:14px; }
.cookie-banner__options[hidden]{ display:none; }
.cookie-opt{ display:flex; gap:12px; align-items:flex-start; background: var(--bg-alt); border:1px solid var(--line); border-radius: var(--radius-sm); padding:10px 12px; cursor:pointer; }
.cookie-opt input{ margin-top:4px; width:16px; height:16px; accent-color: var(--lime); flex-shrink:0; }
.cookie-opt span{ color: var(--muted); font-size:.82rem; line-height:1.5; }
.cookie-opt strong{ display:block; color: var(--white); font-size:.9rem; }
@media (max-width:640px){
  .cookie-banner{ left:10px; right:10px; bottom:10px; }
  .cookie-banner__inner{ padding:18px; }
  .cookie-banner__actions{ width:100%; }
  .cookie-banner__actions .btn{ flex:1 1 140px; }
}
.footer-bottom .link-btn{ color: inherit; text-decoration:none; font-size:inherit; }
.footer-bottom .link-btn:hover{ color: var(--lime); }
.cookie-banner [hidden]{ display:none !important; }
.cookie-banner__text .cookie-banner__title{ color: var(--white); font-size:1.2rem; }

.field[hidden]{display:none!important}

/* ---------- Preise 1.4: Preislisten-Karten ---------- */
.price-grid{ align-items:stretch; }
.price-card--list .desc{ margin:8px 0 18px; }
.price-card--list .pl-unit{ font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.price-list{ display:flex; flex-direction:column; gap:0 !important; margin-bottom:26px; flex:1; }
.price-card .price-list li, .price-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 0; border-bottom:1px dashed var(--line); font-size:.95rem; color:var(--white);
}
.price-list li:last-child{ border-bottom:0; }
.pl-label small{ display:block; font-size:.78rem; color:var(--muted); }
.pl-price{ font-family:var(--font-display); font-size:1.45rem; color:var(--lime); white-space:nowrap; line-height:1; }
.pl-old{ font-family:var(--font-body); font-size:.85rem; color:var(--muted); font-weight:500; margin-right:4px; text-decoration-thickness:1.5px; }
.price-card--list .btn{ margin-top:auto; }
.price-extras{ display:grid; grid-template-columns: 1fr 1.4fr; gap:24px; margin-top:24px; }
.price-extra{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 32px; }
.price-extra h3{ font-size:1.1rem; color:var(--white); text-transform:none; font-family:var(--font-body); font-weight:700; margin-bottom:6px; }
.price-extra p{ color:var(--muted); font-size:.92rem; }
.price-extra .price-list{ margin-bottom:0; }
.price-footnote{ margin-top:18px; font-size:.82rem; color:var(--muted); }
@media (max-width:980px){ .price-grid > .price-card:last-child:nth-child(odd){ grid-column:1 / -1; } }
@media (max-width:640px){ .price-extras{ grid-template-columns:1fr; } .price-grid > .price-card:last-child:nth-child(odd){ grid-column:auto; } .price-card{ padding:26px; } }

/* Halle 1.4: Querformat-Bild Gastro */
.media-frame--landscape{ aspect-ratio:3/2; }
.hero-grid--even{ grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .hero-grid--even{ grid-template-columns:1fr; } }
.footer-credit{ flex-basis:100%; font-size:.76rem; opacity:.75; }
.footer-credit a{ text-decoration:underline; text-underline-offset:2px; }

/* Preise 1.6: Tarif-Legende + Verleih */
.tarif-legend{ display:grid; grid-template-columns: 1fr 1.6fr 1fr 1.2fr; gap:1px; margin-top:32px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.tarif{ background:var(--panel); padding:18px 22px; display:flex; flex-direction:column; gap:4px; }
.tarif-name{ font-family:var(--font-display); text-transform:uppercase; color:var(--lime); font-size:1.05rem; letter-spacing:.02em; }
.tarif-desc{ color:var(--muted); font-size:.88rem; line-height:1.45; }
.price-extras--single{ grid-template-columns: minmax(0,520px); }
@media (max-width:980px){ .tarif-legend{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .tarif-legend{ grid-template-columns:1fr; } }
.legal-stand{ font-size:.85rem !important; color:var(--muted-2) !important; margin-bottom:28px !important; }
.legal .legal-num{ color:var(--lime-soft); font-weight:700; margin-right:4px; }
.legal ul{ margin-bottom:10px; }

/* Startseite 1.6: Aktuelles */
.news-section{ padding:40px 0 0; }
.news-section[hidden]{ display:none !important; }
.news-head{ margin-bottom:14px; }
.news-list{ display:flex; flex-direction:column; gap:14px; }
.news-card{
  display:flex; gap:18px; align-items:flex-start;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid rgba(198,224,30,.45);
  border-left:6px solid var(--lime); border-radius:var(--radius); padding:22px 26px;
}
.news-card h3{ font-family:var(--font-body); text-transform:none; font-size:1.15rem; font-weight:700; color:var(--white); margin-bottom:6px; letter-spacing:0; }
.news-card p{ color:var(--muted); line-height:1.65; white-space:pre-line; }
.news-icon{ flex-shrink:0; width:42px; height:42px; border-radius:12px; background:rgba(198,224,30,.14); color:var(--lime); display:flex; align-items:center; justify-content:center; }
.news-icon svg{ width:22px; height:22px; }
@media (max-width:640px){ .news-card{ padding:18px; gap:14px; } .news-icon{ width:36px; height:36px; } }
.hero-title .brush-sub{ display:block; font-size:.68em; margin-top:.18em; }
@media (max-width:480px){ .news-icon{ display:none; } }

/* 1.7: Abos zweispaltig, Öffnungszeiten auf der Startseite */
.price-grid--duo{ max-width:1064px; }
@media (max-width:980px){ .price-grid--duo > .price-card:last-child:nth-child(odd){ grid-column:auto; } }
.hero-hours{ display:flex; gap:14px; align-items:flex-start; margin-top:28px; padding:16px 20px; max-width:520px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--radius); }
.hero-hours svg{ width:24px; height:24px; color:var(--lime); flex-shrink:0; margin-top:2px; }
.hero-hours__title{ display:block; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); margin-bottom:4px; }
.hero-hours__times{ display:flex; flex-wrap:wrap; gap:4px 18px; color:var(--white); font-size:.98rem; }
.hero-hours .nw{ white-space:nowrap; }

/* 1.8: Preise neu */
.tarif-legend--3{ grid-template-columns: 1fr 1.8fr 1fr; }
@media (max-width:980px){ .tarif-legend--3{ grid-template-columns:1fr 1fr; } .tarif-legend--3 .tarif:nth-child(2){ grid-column:1 / -1; order:3; } }
@media (max-width:420px){ .tarif-legend--3{ grid-template-columns:1fr; } .tarif-legend--3 .tarif:nth-child(2){ order:0; } }
.price-split{ display:grid; grid-template-columns: 1fr minmax(0,440px); gap:56px; align-items:center; }
.price-split > .price-card{ width:100%; }
.price-split__intro .section-lead{ margin-top:14px; }
@media (max-width:900px){ .price-split{ grid-template-columns:1fr; gap:28px; } .price-split > .price-card{ max-width:520px; } }
#gutscheine .price-footnote{ margin-top:40px; }