/* ============================================================
   Startseite — Bühne

   Signature: Das Foto laeuft randlos ueber die volle Breite, und der
   Textblock schiebt sich von unten IN das Bild hinein. Genau dieser
   eine Regelbruch macht den Unterschied zwischen „zusammengesetzt"
   und „gestaltet" – alles andere bleibt bewusst ruhig.

   Keine Kaestchen mehr: Google-Bewertung und Staedte sind eine duenne
   Textzeile, kein umrandeter Block.
   ============================================================ */
:root{ --kante:2px; }

.kopf{background:var(--paper);padding-top:112px}
@media(max-width:900px){.kopf{padding-top:100px}}

/* ---------- Bild: randlos ---------- */
.kopf-bild{position:relative;width:100%;aspect-ratio:2000/1129;max-height:64svh;overflow:hidden;
  clip-path:inset(100% 0 0 0);animation:aufziehen 1.2s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes aufziehen{to{clip-path:inset(0 0 0 0)}}
.kopf-motiv{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out}
.kopf-motiv.an{opacity:1}
.kopf-motiv img{display:block;width:100%;height:100%;object-fit:cover}

/* Muss ueber dem einschiebenden Textblock bleiben – sonst verschwindet
   die Marke dahinter. Deshalb oben rechts statt unten rechts. */
.kopf-360{position:absolute;right:clamp(14px,3vw,40px);top:clamp(14px,3vw,34px);
  display:flex;align-items:center;gap:12px;background:rgba(14,11,9,.86);backdrop-filter:blur(8px);
  color:#fff;text-decoration:none;padding:11px 16px 11px 12px;border-radius:var(--kante);
  border:1px solid rgba(230,201,138,.35);opacity:0;
  animation:einlaufen .7s cubic-bezier(.16,1,.3,1) .9s forwards;transition:.2s}
.kopf-360:hover{border-color:var(--gold);transform:translateY(-2px)}
.kopf-360 .ic{flex:0 0 auto;font:700 .8rem/1 Arial,sans-serif;background:var(--gold);color:#1a1206;
  padding:8px 9px;border-radius:var(--kante)}
.kopf-360 b{display:block;font-family:var(--serif);font-size:1rem;font-weight:600;line-height:1.2}
.kopf-360 small{display:block;font-size:.76rem;color:rgba(255,255,255,.66)}

/* ---------- Textblock: schiebt sich ins Bild ---------- */
.kopf-unten{position:relative;z-index:2;margin-top:calc(-1 * clamp(56px,7.5vw,124px))}
.kopf-raster{max-width:1240px;margin:0 auto;background:var(--paper);
  padding:clamp(24px,3vw,42px) 26px clamp(6px,1vw,14px);
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,64px);align-items:end}
@media(max-width:820px){.kopf-raster{grid-template-columns:1fr;gap:16px;align-items:start}}

.kopf-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold-d);margin-bottom:12px}
.kopf-eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}

/* Gross. Der Kontrast zwischen dieser Zeile und allem Uebrigen ist das,
   was „gross" wirken laesst – nicht viele mittelgrosse Elemente. */
.kopf-h1{font-family:var(--serif);font-weight:600;line-height:.98;margin:0 0 12px;
  font-size:clamp(2.1rem,5.2vw,4.4rem);color:var(--ink);letter-spacing:-.035em}
.kopf-h1 em{font-style:normal;color:var(--gold-d)}
.kopf-sub{font-size:clamp(.96rem,1.25vw,1.14rem);line-height:1.45;color:var(--muted);margin:0;max-width:52ch}

.kopf-preis{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:6px}
.kopf-preis .ab{font-size:1rem;font-weight:600;color:var(--muted)}
.kopf-preis .wert{font-family:var(--serif);font-weight:600;line-height:.85;letter-spacing:-.04em;
  font-size:clamp(2.8rem,6vw,5rem);color:var(--gold-d)}
.kopf-preis .einheit{font-size:.88rem;line-height:1.3;color:var(--muted)}

/* Eine duenne Zeile statt umrandeter Kaestchen */
.kopf-zeile{max-width:1240px;margin:0 auto;background:var(--paper);
  padding:0 26px clamp(18px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
  font-size:.86rem;color:var(--muted)}
.kopf-zeile a{color:var(--ink2);text-decoration:none;white-space:nowrap}
.kopf-zeile a:hover{color:var(--gold-d)}
.kopf-zeile b{color:var(--ink);font-weight:600}
.kopf-zeile .orte{color:var(--muted)}

.kopf-text>*,.kopf-preis,.kopf-zeile{opacity:0;transform:translateY(14px);
  animation:einlaufen .7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes einlaufen{to{opacity:1;transform:none}}
.kopf-eyebrow{animation-delay:.5s}.kopf-h1{animation-delay:.56s}.kopf-sub{animation-delay:.64s}
.kopf-preis{animation-delay:.7s}.kopf-zeile{animation-delay:.78s}

@media(prefers-reduced-motion:reduce){
  .kopf-bild,.kopf-text>*,.kopf-preis,.kopf-zeile,.kopf-360{
    animation:none;opacity:1;transform:none;clip-path:none}
}

/* ---------- Suchband ---------- */
.kopf-suche-band{position:relative;z-index:1;margin-top:26px;background:var(--ink);
  border-top:1px solid rgba(255,255,255,.13);padding:22px 0 24px;
  opacity:0;animation:einlaufen .8s cubic-bezier(.16,1,.3,1) .8s forwards}
.kopf-suche-band .bs{background:none;border:0;box-shadow:none;padding:0;max-width:none;margin:0}
.kopf-suche-band .bs-feld input,.kopf-suche-band .bs-auf button,
.kopf-suche-band .bs-knopf{border-radius:var(--kante)}
.kopf-hebel{margin-bottom:14px}
.kopf-hebel b{display:block;font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.1rem);
  color:var(--gold-l);letter-spacing:-.01em;line-height:1.1}
.kopf-hebel span{display:block;font-size:.94rem;line-height:1.55;color:rgba(255,255,255,.7);
  margin-top:5px;max-width:78ch}
.kopf-klein{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.7);margin:12px 0 0;max-width:110ch}
.kopf-klein .stand{color:rgba(255,255,255,.45);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .kopf-bild img,.kopf-gruss>*,.kopf-360,.kopf-suche-band{
    animation:none;opacity:1;transform:none;clip-path:none}
}

/* ---------- Region: Karte statt Städte-Liste ----------
   Echte Landesgrenzen (GeoJSON, Mercator projiziert), NRW angehoben.
   Kein Bild, kein fremder Dienst: reines SVG, skaliert verlustfrei.
   Der Abschnitt hat dunkelgruenen Grund – die Farben sind darauf gerechnet. */
.region-raster{display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr;gap:clamp(28px,5vw,72px);align-items:center;text-align:left}
@media(max-width:900px){.region-raster{grid-template-columns:1fr;gap:30px}}

.region-karte{position:relative;display:flex;justify-content:center;padding-bottom:34px}
.karte{width:100%;max-width:330px;height:auto;overflow:visible}
.karte-rest path{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.2);stroke-width:1.2;stroke-linejoin:round}
.karte-nrw path{fill:url(#kNrw);stroke:#f0d9a4;stroke-width:1.4;stroke-linejoin:round}
.karte-punkt .kern{fill:#16302a;stroke:#fff;stroke-width:2.5}
.karte-punkt .welle{fill:none;stroke:#fff;stroke-width:2;opacity:0;animation:kartePuls 3s ease-out infinite}
.karte-punkt .welle2{animation-delay:1.5s}
@keyframes kartePuls{0%{r:7;opacity:.75}100%{r:28;opacity:0}}
@media(prefers-reduced-motion:reduce){.karte-punkt .welle{animation:none}}

.region-marke{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  background:#fff;color:var(--ink);padding:9px 18px;border-radius:var(--kante);text-align:center;
  box-shadow:0 14px 30px rgba(0,0,0,.35)}
.region-marke b{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.2}
.region-marke span{font-size:.68rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-d)}

.region-text .eyebrow{justify-content:flex-start}
.region-text h2{margin:14px 0 10px;color:#fff}
.region-text .lead{color:rgba(255,255,255,.78);margin:0}
.region-zeiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 30px;
  margin:24px 0 14px;padding:0;list-style:none}
.region-zeiten li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.region-zeiten b{font-weight:600;color:#fff}
.region-zeiten span{font-size:.9rem;color:var(--gold-l);white-space:nowrap}
.region-fuss{font-size:.84rem;color:rgba(255,255,255,.55);margin:0 0 22px;line-height:1.6}
.region-cta{display:flex}

/* Zahlenband in EINER Zeile – auf schmalen Schirmen schiebbar statt umbrechend */
.band .wrap{display:flex;flex-wrap:nowrap;gap:clamp(14px,3vw,44px);justify-content:space-between;
  overflow-x:auto;scrollbar-width:none}
.band .wrap::-webkit-scrollbar{display:none}
.band .stat{flex:1 1 auto;text-align:center;white-space:nowrap;border-right:1px solid rgba(255,255,255,.1)}
.band .stat:last-child{border-right:0}
.band .stat b{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.band .stat small{font-size:clamp(.68rem,1vw,.78rem);letter-spacing:1.4px}

/* ---------- Einwilligung ---------- */
.hb-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:3000;max-width:560px;
  margin:0 auto;background:var(--ink);color:#fff;padding:20px 22px;border-radius:var(--kante,2px);
  box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.hb-consent p{margin:0;flex:1 1 280px;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.82)}
.hb-consent a{color:var(--gold-l);text-decoration:underline;text-underline-offset:3px}
.hb-consent-knoepfe{display:flex;gap:9px;flex:0 0 auto}
.hb-consent button{padding:11px 18px;border:0;border-radius:var(--kante,2px);cursor:pointer;
  font:inherit;font-weight:700;font-size:.9rem;transition:.18s}
.hb-consent .ja{background:var(--gold);color:#1a1206}
.hb-consent .ja:hover{background:var(--gold-l)}
.hb-consent .nein{background:none;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.25)}
.hb-consent .nein:hover{color:#fff;border-color:#fff}
@media(max-width:520px){.hb-consent{left:10px;right:10px;bottom:10px;padding:16px 18px}
  .hb-consent-knoepfe{width:100%}.hb-consent button{flex:1}}

/* Kleine Quellbilder NICHT auf Bühnenbreite zoomen (wird Matsch):
   Bild in Originalschärfe mittig, dahinter es selbst als unscharfe Füllung. */
.kopf-motiv.zart::before{content:"";position:absolute;inset:0;background-image:var(--hbg);
  background-size:cover;background-position:center;filter:blur(26px) brightness(.72) saturate(1.05);transform:scale(1.12)}
.kopf-motiv.zart img{position:relative;object-fit:contain}
.kopf-motiv.zart{display:grid;place-items:center}
.kopf-motiv.zart img{width:auto;height:auto;max-width:min(92%,1100px);max-height:86%;
  box-shadow:0 24px 70px rgba(0,0,0,.45);border-radius:2px}

/* ===== Gerahmte Slideshow (Inhaber-Idee 21.07.): Weißraum seitlich,
   Motive schieben statt überblenden, Deko-Pfeile geben den Anstoß ===== */
.kopf-bild{background:var(--paper)}
.kopf-buehne{position:relative;max-width:1240px;height:100%;margin:0 auto;overflow:hidden;border-radius:2px}
.kopf-motiv{opacity:1;transform:translateX(103%);transition:transform .95s cubic-bezier(.22,1,.36,1)}
.kopf-motiv.an{transform:translateX(0)}
.kopf-motiv.raus{transform:translateX(-103%)}
.kopf-motiv.sofort{transition:none}
.kopf-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;
  border-radius:50%;background:rgba(20,17,13,.5);color:#f4efe6;display:grid;place-items:center;
  font-size:1.6rem;line-height:1;pointer-events:none;backdrop-filter:blur(4px);
  font-family:var(--sans);padding-bottom:4px}
.kopf-pfeil.links{left:14px}.kopf-pfeil.rechts{right:14px}
.kopf-pfeil.rechts.stoss{animation:stoss-r .9s ease}
.kopf-pfeil.links.stoss{animation:stoss-l .9s ease}
@keyframes stoss-r{30%{transform:translateY(-50%) translateX(12px);background:rgba(193,147,74,.9)}}
@keyframes stoss-l{30%{transform:translateY(-50%) translateX(-12px);background:rgba(193,147,74,.9)}}
@media(max-width:680px){.kopf-pfeil{width:36px;height:36px;font-size:1.3rem}
  .kopf-pfeil.links{left:8px}.kopf-pfeil.rechts{right:8px}}

/* ===== Kopf v3 (21.07.): fast randlos, filmische Blende, Preis präsent ===== */
.kopf-buehne{max-width:none;margin:0 clamp(10px,1.6vw,24px)}
.kopf-pfeil{display:none}
.kopf-motiv{transform:scale(1.055);opacity:0;
  transition:opacity 1.5s ease, transform 7.5s linear}
.kopf-motiv.an{opacity:1;transform:scale(1)}
/* Textblock schneidet bewusst ins Bild — der eine Regelbruch bleibt */
.kopf-unten{margin-top:calc(-1 * clamp(64px,8.5vw,140px))}
/* „ab 15 €": kein Beiläufig mehr */
.kopf-preis .ab{font-size:1.05rem;font-weight:700;color:var(--ink2);letter-spacing:.5px;text-transform:uppercase}
.kopf-preis .wert{font-weight:800;font-size:clamp(3.4rem,7vw,6rem);color:var(--gold-d);
  text-shadow:0 1px 0 rgba(20,17,13,.08)}
.kopf-preis .einheit{font-family:var(--mono);font-size:.8rem;letter-spacing:.6px;text-transform:uppercase;color:var(--ink2)}
@media(prefers-reduced-motion:reduce){.kopf-motiv{transition:none;transform:none}}

/* Standzeile + Anruf-Knopf unterm Preis (21.07.) */
.kopf-standzeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.6px;color:var(--muted)}
.kopf-tel{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);color:var(--ink);
  font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.4px;padding:7px 14px;
  border-radius:2px;text-decoration:none;transition:.2s;white-space:nowrap}
.kopf-tel:hover{background:var(--ink);color:var(--paper)}