/* Klassik Open Air im Jagdschloss Grunewald – Gestaltung
   Leitidee: Die Seite ist ein Abend. Von der Ankunft im hellen Licht bis zur blauen Stunde.
   Siehe relaunch/LEITIDEE.md */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Farben aus dem Ort */
  --kalk: #FBF8F2;          /* Schlossfassade – Grundton */
  --kalk-warm: #F7EFE2;     /* frühes Abendlicht */
  --gold: #F2E1C2;          /* Abendgold */
  --rose: #EBCDBB;          /* Sonnenuntergang */
  --daemmer: #3E4A66;       /* blaue Stunde – Abschluss */
  --daemmer-tief: #343E57;
  --rot: #C5281C;           /* Logo-Rot – nur für Handlungen */
  --rot-tief: #A82118;
  --silber: #8A8580;        /* Logo-Silbergrau */
  --tinte: #2B2A33;         /* Schrift */
  --tinte-mittel: #55525A;
  --linie: rgba(43,42,51,0.14);

  --display: 'Playfair Display', Georgia, serif;
  --text: 'DM Sans', system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --breite: 1240px;
  --rand: max(var(--gutter), calc((100vw - var(--breite)) / 2 + var(--gutter)));
  --leiste: 76px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--leiste) + 16px); }
body { font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; color: var(--tinte); background: var(--kalk); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ═══ LEISTE mit Abenduhr ═══ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--leiste);
  display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center; gap: 2rem;
  padding: 0 var(--rand);
  background: var(--kalk); box-shadow: 0 1px 0 var(--linie);
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.nav-logo { display: block; min-width: 0; }
.nav-logo img { height: 44px; width: auto; max-width: none; }  /* nie stauchen */
.abenduhr { justify-self: center; display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--display); color: var(--tinte); white-space: nowrap; }
.abenduhr-zeit { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.abenduhr-name { font-style: italic; color: var(--silber); font-size: 1.05rem; }
.nav-links { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
.nav-links a { font-size: 1rem; font-weight: 500; color: var(--tinte); text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"]:not(.nav-ticket) { color: var(--rot); }
.nav-ticket { padding: 11px 22px; background: var(--rot); color: #fff !important; border-radius: 2px; }
.nav-ticket:hover { background: var(--rot-tief); }
.hamburger { display: none; cursor: pointer; padding: 8px; background: none; border: 0; justify-self: end; }
.hamburger svg { width: 28px; height: 28px; stroke: var(--tinte); }

.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══ HANDLUNGEN ═══ */
.knopf, .btn-red { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border-radius: 2px; background: var(--rot); color: #fff; font-weight: 500; font-size: 1.05rem; text-decoration: none; border: 0; cursor: pointer; transition: background 0.25s; }
.knopf:hover, .btn-red:hover { background: var(--rot-tief); }
.textlink, .btn-line { color: var(--tinte); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.textlink:hover, .btn-line:hover { color: var(--rot); }

/* ═══ TITELPAAR – überall gleiches Verhältnis ═══ */
.titel { --t: clamp(3rem, 5.4vw, 5.8rem); font-family: var(--display); color: var(--tinte); }
.titel .haupt { display: block; font-size: var(--t); font-weight: 400; letter-spacing: -0.012em; line-height: 1; }
.titel .unter { display: block; font-size: calc(var(--t) * 0.4); font-style: italic; color: var(--rot); margin-top: 0.45em; line-height: 1.1; }
.titel.klein { --t: clamp(2.4rem, 4vw, 3.6rem); }

/* ═══ UHRZEIT über jedem Abschnitt (statt Label) ═══ */
.zeit { display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--display); color: var(--silber); margin-bottom: 1rem; }
.zeit b { font-weight: 400; font-size: 1.35rem; color: var(--tinte); font-variant-numeric: tabular-nums; }
.zeit i { font-size: 1.15rem; }
.zeit::after { content: ''; flex: 0 0 48px; height: 1px; background: currentColor; align-self: center; opacity: 0.6; }
.label { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--silber); margin-bottom: 0.8rem; }

/* ═══ ÜBERSCHRIFTEN UND TEXT ═══ */
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--gutter); }
.h2 { font-family: var(--display); font-size: clamp(2.1rem, 3.6vw, 3.2rem); color: var(--tinte); margin-bottom: 1.2rem; letter-spacing: -0.005em; }
.lead { font-size: 1.15rem; color: var(--tinte-mittel); max-width: 36rem; }
.prose p { color: var(--tinte-mittel); margin-bottom: 1rem; max-width: 62ch; }
.prose a { color: var(--rot); }
.note { font-size: 0.95rem; color: var(--silber); }

/* ═══ HIMMEL: Abschnitte gehen ineinander über ═══ */
.licht-tag     { background: var(--kalk); }
.licht-abend   { background: linear-gradient(180deg, var(--kalk) 0%, var(--kalk-warm) 100%); }
.licht-pause   { background: linear-gradient(180deg, var(--kalk-warm) 0%, var(--gold) 100%); }
.licht-sonne   { background: linear-gradient(180deg, var(--gold) 0%, var(--rose) 100%); }
.licht-blau    { background: linear-gradient(180deg, var(--rose) 0%, #8E8FA5 12%, var(--daemmer) 30%, var(--daemmer-tief) 100%); color: #fff; }
.licht-blau .h2, .licht-blau .zeit b { color: #fff; }
.licht-blau .zeit { color: rgba(255,255,255,0.72); }
.abschnitt { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

/* ═══ SEITENKOPF der Unterseiten ═══ */
.kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); min-height: 70vh; padding-top: var(--leiste); background: var(--kalk); }
.kopf-text { padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem) var(--rand); display: flex; flex-direction: column; justify-content: center; }
.kopf-bild { position: relative; overflow: hidden; }
.kopf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kopf.ohne-bild { grid-template-columns: 1fr; min-height: 0; }
.kopf.ohne-bild .kopf-text { padding-top: 4rem; padding-bottom: 2.5rem; }
.crumbs { font-size: 0.95rem; color: var(--silber); margin-bottom: 1.6rem; }
.crumbs a { color: var(--tinte-mittel); text-decoration: none; }
.crumbs a:hover { color: var(--rot); }
.kopf h1:not(.titel) { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.2rem); color: var(--tinte); }
.kopf-lead { margin-top: 1.4rem; font-size: 1.15rem; color: var(--tinte-mittel); max-width: 34rem; }

/* ═══ TICKETWAHL: drei Abende ═══ */
.wahl { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(2rem, 5vw, 4rem); border-top: 1.5px solid var(--tinte); border-bottom: 1.5px solid var(--tinte); scroll-margin-top: 30vh; }
.wahl a { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.6rem 1.6rem 1.8rem; text-decoration: none; color: var(--tinte); transition: background 0.3s, color 0.3s; }
.wahl a + a { border-left: 1px solid var(--linie); }
.wahl-cta { font-weight: 500; color: var(--rot); margin-bottom: 0.6rem; transition: color 0.3s; }
.wahl-tag { color: var(--tinte-mittel); transition: color 0.3s; }
.wahl-datum { font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.05; }
.wahl a:hover, .wahl a:focus-visible { background: var(--rot); color: #fff; }
.wahl a:hover .wahl-cta, .wahl a:hover .wahl-tag, .wahl a:focus-visible .wahl-cta, .wahl a:focus-visible .wahl-tag { color: #fff; }
.wahl-info { margin-top: 1.2rem; color: var(--tinte-mittel); }
.wahl-info a { color: var(--tinte); }
@media (max-width: 860px) { .wahl { grid-template-columns: 1fr; } .wahl a + a { border-left: 0; border-top: 1px solid var(--linie); } }

/* ═══ WEITEREMPFEHLEN ═══ */
.teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; }
.teilen-text { opacity: 0.8; }
.teilen a, .teilen button { font: inherit; font-weight: 500; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 5px; padding: 0; }
.teilen a:hover, .teilen button:hover { text-decoration-color: var(--rot); }

/* ═══ FOOTER – Ende der blauen Stunde ═══ */
footer { background: var(--daemmer-tief); color: rgba(255,255,255,0.9); padding: 4rem var(--rand) 1.8rem; }
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255,255,255,0.16); }
.footer-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.2rem; }
.footer-desc { font-size: 1rem; color: rgba(255,255,255,0.78); max-width: 300px; }
.footer-col h2 { font-family: var(--display); font-style: italic; font-size: 1.1rem; color: rgba(255,255,255,0.7); margin-bottom: 0.9rem; }
.footer-col a { display: block; font-size: 1rem; color: #fff; text-decoration: none; margin-bottom: 0.5rem; }
.footer-col a:hover, .footer-col a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rot); text-underline-offset: 5px; }
.footer-bottom { margin-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom p, .footer-bottom a { font-size: 0.92rem; color: rgba(255,255,255,0.72); text-decoration: none; }
.footer-legal { display: flex; gap: 2rem; }
.footer-legal a:hover, .footer-legal a[aria-current="page"] { color: #fff; text-decoration: underline; }

@media (max-width: 1100px) { .abenduhr-name { display: none; } .nav { gap: 1.2rem; } .nav-links { gap: 1.1rem; } .nav-links a { font-size: 0.95rem; } .nav-logo img { height: 38px; } }
@media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .kopf { grid-template-columns: 1fr; min-height: 0; }
  .kopf-text { padding: 2.5rem 1.25rem 2rem; }
  .kopf-bild { aspect-ratio: 4/3; }
}
@media (max-width: 820px) {
  :root { --leiste: 64px; }
  .nav { padding: 0 1.25rem; gap: 1rem; }
  .nav-logo img { height: 32px; }
  .abenduhr-zeit { font-size: 1.1rem; }
  .nav-links { display: none; }
  .hamburger { display: block; }
  .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: var(--leiste); left: 0; right: 0; background: var(--kalk); padding: 1.5rem 1.25rem 2rem; gap: 1.2rem; box-shadow: 0 12px 24px rgba(43,42,51,0.08); }
  .nav-links.open .nav-ticket { align-self: stretch; text-align: center; padding: 14px; }
  footer { padding: 3rem 1.25rem 1.5rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ═══ RECHTSTEXTE ═══ */
.rechtstext { padding: 1rem 0 6rem; }
.rechtstext .wrap { max-width: calc(820px + var(--rand)); margin: 0; padding-left: var(--rand); }
.rechtstext h2 { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--tinte); margin: 2.6rem 0 0.8rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.05rem; font-weight: 600; margin: 1.8rem 0 0.5rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-mittel); margin-bottom: 0.9rem; }
.rechtstext ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.rechtstext a { color: var(--rot); }
.rechtstext a.knopf { color: #fff; }  /* roter Knopf: Schrift bleibt weiß (404-Seite) */
.rechtstext address { font-style: normal; font-size: 1.05rem; color: var(--tinte); margin-bottom: 1rem; }
.rechtstext .stand { margin-top: 3rem; font-size: 0.95rem; color: var(--silber); }
@media (max-width: 820px) { .rechtstext .wrap { padding-left: 1.25rem; } }