/* Design „Signal“ – Schwarz, Weiß und Signalorange (angelehnt an ein Agentur-Layout):
   Foto über die ganze Breite, Überschriften in Großbuchstaben, riesiger Schriftzug „EBNIT“ unten im Kopfbereich,
   oranges Laufband, eckige Knöpfe mit orangem Pfeilfeld.
   Wird nach style.css geladen und überschreibt nur, was anders ist. */

:root {
  --papier: #F4F3F0;
  --tinte: #111111;
  --tinte-2: #262626;
  --schwarz: #0E0E0E;
  --orange: #FF4D1A;
  --orange-2: #E63E0E;
  --wald: #C2410C;
  --minze: #FFE3D8;
  --minze-2: #FF4D1A;
  --salbei: #EDEBE6;
  --muted: #4B4B4B;
  --line: #DAD7D0;
  --r-xl: 0px;
  --r-lg: 0px;
  --r-md: 0px;
}

h1, h2 { text-transform: uppercase; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
h3 { font-weight: 600; }
.btn, .nav a, .nav-auf, .tafel-go, .karte-tag, .tag, .oberzeile, .hero-label, .person small, .choice span, .menu-btn { border-radius: 0 !important; }

/* Kopfzeile schwarz */
body::before { background: var(--schwarz); }
.top, .top.klein { background: var(--schwarz); }
@supports (backdrop-filter: blur(8px)) { .top { background: rgba(14, 14, 14, .94); } }
.brand img { filter: brightness(0) invert(1); }
.nav a, .nav-auf { color: #fff; font-size: 0.9rem; }
.nav a:hover, .nav-auf:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav > a[aria-current="page"], .nav-auf.aktiv { background: transparent; color: var(--orange); }
.nav > a:last-child { background: #fff; color: var(--schwarz); padding-right: 3.4rem; }
.nav > a:last-child::after { content: "↗"; position: absolute; right: 0; top: 0; bottom: 0; width: 2.5rem; display: grid; place-items: center; background: var(--orange); color: #fff; }
.nav > a:last-child:hover { background: #fff; color: var(--schwarz); }
.nav-sub a { color: var(--tinte); }
.menu-btn { background: #fff; color: var(--schwarz); }
.menu-btn:hover { background: var(--orange); color: #fff; }
.tel-btn { background: var(--orange); color: #fff; border-radius: 0; }
.nav.open { border-radius: 0; }
.nav.open .nav-sub a { border-radius: 0; }
.nav.open .nav-sub a[aria-current="page"] { background: var(--orange); color: #fff; }

/* Kopfbereich: Foto über die ganze Breite, riesiger Schriftzug */
.hero { background: var(--schwarz); color: #fff; }
.hero h1 { color: #fff; }
.hero .lead { color: #D6D6D6; }
.oberzeile { color: #fff; box-shadow: none; padding: 0; }
.oberzeile::before { background: var(--orange); box-shadow: none; border-radius: 0; }
.hero.mit-bild { padding: 0; position: relative; isolation: isolate; overflow: hidden; }
.hero.mit-bild .hero-grid { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: clamp(30rem, 78vh, 48rem); padding-block: 7rem 3rem; pointer-events: none; position: relative; }
.hero.mit-bild .hero-text { position: relative; z-index: 2; pointer-events: auto; max-width: 44rem; }
.hero.mit-bild .hero-foto { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero.mit-bild .hero-foto img.hero-bild { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.hero.mit-bild .hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .7)); }
.hero h1, .hero-start h1 { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.4rem); max-width: 18ch; }
.hero.mit-bild.hero-start .hero-grid { padding-bottom: calc(2.5rem + clamp(4rem, 24vw, 26rem)); }
.hero.mit-bild h1, .hero.mit-bild .lead { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hero-start::after { content: attr(data-marke); position: absolute; left: 0; right: 0; bottom: -0.12em; z-index: 1; padding-inline: max(12px, 1vw); color: #fff; font-weight: 700; font-size: clamp(5rem, 31vw, 34rem); line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.hero-label { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; z-index: 1; left: auto; right: max(16px, 2vw); top: 6rem; }
.hero-label::before { background: var(--orange); box-shadow: none; border-radius: 0; }
.hero-pfeil { display: none; }
.hero.ohne-bild { background: var(--schwarz); padding-block: 4rem 3.4rem; }
.kiesel { border-radius: 0; box-shadow: none; }

/* Kennzahlen */
.schild { background: transparent; border-radius: 0; padding: 0.3rem 1.3rem 0.3rem 0; margin-right: 1rem; border-right: 1px solid rgba(255, 255, 255, .25); }
.schild:last-child { border-right: 0; }
.schild b { color: #fff; font-weight: 500; }
.schild span { color: #BDBDBD; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }

/* Knöpfe: weiß mit orangem Pfeilfeld */
.btn { font-weight: 500; padding: 0.95rem 1.3rem; }
.btn-sonne, .btn-tanne, .btn-sun, .btn-pool, .prose .btn { background: var(--schwarz); color: #fff; }
.btn-sonne { padding-right: 3.6rem; position: relative; }
.btn-sonne::after, .prose .btn::after { content: "↗"; position: absolute; right: 0; top: 0; bottom: 0; width: 2.7rem; height: auto; margin: 0; border-radius: 0; display: grid; place-items: center; background: var(--orange); color: #fff; }
.prose .btn { position: relative; padding-right: 3.6rem; }
.btn-sonne:hover, .prose .btn:hover { background: var(--tinte-2); }
.btn-sonne:hover::after, .prose .btn:hover::after { transform: none; background: var(--orange-2); }
.hero .btn-sonne { background: #fff; color: var(--schwarz); }
.hero .btn-hell { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.hero .btn-hell:hover { background: #fff; color: var(--schwarz); }
.btn-hell { box-shadow: inset 0 0 0 1px var(--tinte); }

/* Tafel „Nächste Camps“: weiß, oben rechts im Foto */
.tafel { border-radius: 0; box-shadow: none; }
.tafel h2 { text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.06em; }
.tafel h2::before { background: var(--orange); box-shadow: none; border-radius: 0; }
.tafel-datum { border-radius: 0; background: var(--salbei); }
.tafel-datum span { color: var(--orange-2); }
.tafel-go { background: var(--orange); }
.tafel-go:hover { background: var(--orange-2); }
.hero.mit-bild .hero-foto .tafel { position: absolute; right: max(16px, calc((100vw - var(--wrap)) / 2 + 16px)); top: 6rem; width: min(24rem, 36vw); margin: 0; z-index: 3; pointer-events: auto; }
.hero.mit-bild.mit-tafel .hero-label { display: none; }

/* Laufband: orange, groß */
.laufband { background: var(--orange); margin: 0; padding-block: 0.9rem; }
.laufband span { color: var(--schwarz); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); letter-spacing: -0.02em; }
.laufband i { color: var(--schwarz); font-size: 1.4rem; }

/* Abschnitte */
.section-head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }
.band { border-radius: 0; width: 100%; max-width: none; margin: 0; background: var(--schwarz); color: #EDEDED;
  --tinte: #FFFFFF; --ink: #EDEDED; --muted: #BDBDBD; --line: rgba(255, 255, 255, .16); --panel: #1C1C1C; --wald: #FF8A65; }
.band > .wrap { max-width: var(--wrap); padding-left: var(--gutter); padding-right: var(--gutter-r); }
.band a:not(.btn) { color: #fff; text-decoration-color: var(--orange); }
.band .btn-sonne, .band .prose .btn { background: #fff; color: var(--schwarz); }
.band .prose ul li::marker { color: var(--orange); }
.photo, .karte-rahmen, .split .photo, .gallery .photo { border-radius: 0; }
.karte-tag { background: var(--schwarz); color: #fff; box-shadow: none; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; }
.karte-pfeil { border-radius: 0; background: var(--orange); color: #fff; }
.karte:hover .karte-pfeil { transform: none; background: var(--schwarz); }
.karte h3 { text-transform: uppercase; font-weight: 500; }
.karte:hover h3 { color: var(--orange-2); }
.karte-mehr { border-bottom-color: var(--orange); }
.info, .person, .termin, .monat, .frage, .notice, .form, .preisliste, .termin-datum { border-radius: 0; }
.person small { background: var(--orange); color: #fff; }
.termin-datum { background: var(--orange); }
.termin-datum b, .termin-datum span { color: #fff; }
.preisliste { background: var(--schwarz); }
.preisliste li b { color: var(--orange); }
.frage summary::after { border-radius: 0; background: var(--orange); color: #fff; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="number"], .form input[type="date"], .form select, .form textarea { border-radius: 0; }
.band .form input, .band .form select, .band .form textarea { background: #fff; color: var(--schwarz); }
.form legend .dot { border-radius: 0; background: var(--orange); color: #fff; }
.monat .tage span { border-radius: 0; }
.monat .tage .frei { background: #E8E6E0; }
.monat .tage .belegt { background: var(--orange); }
.belegung-legende i.frei { background: #E8E6E0; }
.belegung-legende i.belegt { background: var(--orange); }
.spiel-buehne { border-radius: 0; }
.spiel-leiste span { border-radius: 0; }

/* Fuß schwarz */
.foot { background: var(--schwarz); color: #BDBDBD; margin-top: 0; padding-top: 0; }
.foot-ruf { background: var(--orange); color: var(--schwarz); border-radius: 0; margin-top: 3rem; }
.foot-ruf h2 { color: var(--schwarz); }
.foot-ruf h2 .hell { color: #fff; }
.foot-ruf .btn-minze { background: var(--schwarz); color: #fff; }
.foot-ruf .btn-minze:hover { background: var(--tinte-2); color: #fff; }
.foot-ruf .btn-hell { color: var(--schwarz); box-shadow: inset 0 0 0 1.5px var(--schwarz); }
.foot-ruf .btn-hell:hover { background: var(--schwarz); color: #fff; }
.foot-logo { filter: brightness(0) invert(1); }
.foot-col strong { color: #fff; }
.foot a { color: #EDEDED; }
.foot a:hover { color: var(--orange); }
.foot-copy { border-top-color: rgba(255, 255, 255, .14); }
.sozial { background: transparent; color: #fff; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.sozial:hover { background: var(--orange); color: #fff; }
.to-top { border-radius: 0; background: var(--orange); }
.partner { padding-bottom: 2.4rem; }

/* Handy */
@media (max-width: 760px) {
  .hero.mit-bild .hero-grid { min-height: 0; padding-block: 2rem 2.6rem; }
  .hero.mit-bild.hero-start .hero-grid { padding-bottom: calc(2.6rem + 24vw); }
  .hero.mit-bild .hero-foto { position: relative; inset: auto; order: 2; margin-top: 1.4rem; width: 100%; pointer-events: auto; }
  .hero.mit-bild .hero-foto img.hero-bild { aspect-ratio: 3 / 2; height: auto; }
  .hero.mit-bild .hero-foto::after { display: none; }
  .hero.mit-bild .hero-foto .tafel { position: relative; right: auto; top: auto; width: auto; margin: -2.4rem 0.6rem 0; }
  .hero-label { display: none; }
}