/* ==========================================================================
   EINSTELLUNGEN — hier und nur hier anfassen, um Look & Feel zu ändern.
   Der Rest der Datei (ab "LAYOUT — ab hier nichts mehr anfassen") ist reines
   Handwerk und muss für Änderungen nicht angerührt werden.
   ========================================================================== */
:root{

  /* ------------------------------------------------------------------
     LOCATION-THEMES: Diese Datei bedient mehrere Standorte gemeinsam.
     Der Standard hier in :root ist die PURiNO-B2B-Farbwelt (Business
     Events). Ein einzelner Standort kann davon abweichen, indem er im
     <body> ein data-theme-Attribut setzt (siehe index.php) — z. B.
     data-theme="wedding" für die Hochzeitsseite. Der passende Theme-Block
     steht direkt im Anschluss an diesen :root-Block und überschreibt dort
     nur die Werte, die abweichen sollen. Neue Standorte brauchen i.d.R.
     KEIN eigenes Theme — sie nutzen einfach diesen B2B-Standard.
     ------------------------------------------------------------------ */

  /* --- FARBEN: Hauptflächen ----------------------------------------------
     Quelle: PURiNO-B2B-Broschüre (Juli 2026). --paper ist der Seitengrund,
     --white für Karten/Formularfelder. */
  --paper:              #F8F8F8;  /* Seitengrund */
  --white:              #FFFFFF;  /* Karten, Formularfelder */

  /* --- FARBEN: Marke & Call-to-Action -------------------------------------
     --burgundy ist die PURiNO-Markenfarbe: Logo, CTA-Buttons, dunkle
     Flächen (u. a. Footer). --burgundy-dk ist der Hover-Zustand von CTAs. */
  --burgundy:           #560F12;
  --burgundy-dk:        #3A0A0C;

  /* --- FARBEN: Akzentflächen (Sektionshintergründe) -----------------------
     Je eine Farbe pro Akzent-Sektion. WICHTIG (Kontrastregel §5 im
     PROJECT.md): Auf allen drei Flächen IMMER --ink als Textfarbe
     verwenden. Weißer Text auf diesen drei Farben ist nicht zulässig
     (fällt bei WCAG AA durch). */
  --coral:              #F06848;  /* Sektion "warum", "formate" (B2B) */
  --yellow:             #F0C800;  /* Sektion "workshops" */
  --teal:               #48C0B0;  /* Sektion "kulinarik" */

  /* --- FARBEN: Text -------------------------------------------------------
     --ink ist die alleinige Textfarbe auf Akzentflächen (siehe oben) und
     die Standard-Textfarbe im Fließtext. --ink-soft für Sekundärtext. */
  --ink:                #101010;
  --ink-soft:           #5A5A5A;

  /* --- FARBEN: Linien ------------------------------------------------- */
  --line:               #E2E2E2;

  /* --- FARBEN: Zuordnung historischer Token-Namen auf die B2B-Palette ----
     Der Rest dieser Datei (unterhalb von "LAYOUT") verwendet ältere
     Token-Namen aus der ursprünglichen Hochzeitsseite (--gold, --champagne,
     --cream, ...), die dort absichtlich NICHT umbenannt wurden, um die
     Layout-Regeln nicht doppelt zu pflegen. Für den B2B-Standard bilden wir
     diese alten Namen einfach auf die neue Palette ab. Ein Standort mit
     data-theme="wedding" (Block direkt unten) setzt sie auf die
     ursprünglichen Hochzeits-Farbwerte zurück. */
  --champagne:          var(--paper);   /* B2B kennt keine eigene Champagner-Fläche */
  --cream:              var(--paper);
  --champagne-strong:   var(--line);    /* kräftigere Variante für Rahmen/Pillen */
  --cream-strong:       var(--line);
  --gold:               var(--burgundy);      /* alter "Schmuck"-Ton -> Markenfarbe Burgund */
  --gold-light:         var(--burgundy);
  --ink-on-gold:        var(--white);          /* Text auf Burgund-Flächen: Weiß (§5) */
  --gold-hover-a:       var(--burgundy-dk);    /* Hover-Verlauf des Haupt-Buttons */
  --gold-hover-b:       var(--burgundy-dk);
  --card-border:        rgba(16,16,16,.12);
  --shadow:             0 24px 60px rgba(16,16,16,.10);
  --shadow-soft:        0 18px 44px rgba(16,16,16,.08);

  /* --- FARBEN: Status-Hinweise (Formular-Feedback) ------------------------
     Unabhängig vom Standort-Theme — Erfolg bleibt grün, Fehler bleibt rot. */
  --notice-ok-bg:       #EAF3DE;
  --notice-ok-text:     #27500A;
  --notice-fail-bg:     #FCEBEB;
  --notice-fail-text:   #791F1F;

  /* --- SCHRIFTEN ----------------------------------------------------------
     --font-display für Überschriften (H1/H2/H3), --font-body für Fließtext.
     Für B2B-Standorte (dieser Standard hier) gilt durchgängig Raleway
     (Google Fonts, Link in index.php, Gewichte 400/700/800). Die frühere
     kalligrafische Schrift-Variable für H2 gehört nur noch zur
     Hochzeitsseite und steht deshalb nicht hier, sondern ausschließlich im
     Hochzeits-Theme-Block weiter unten (dort definiert) — B2B lädt sie gar
     nicht erst. */
  --font-display:       "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body:          "Meta Pro","MetaPro","Meta","Raleway",Arial,sans-serif;

  /* --- SCHRIFTEN: Satzregeln für Überschriften, pro Standort umschaltbar --
     H1/H3 teilen sich eine Auszeichnung, H2 hat historisch eine eigene
     (auf der Hochzeitsseite z. B. eine andere Schriftfamilie). Damit ein
     Standort seine Überschriften-Optik komplett umschalten kann, ohne die
     Regeln unterhalb von "LAYOUT" zu berühren, steckt jede einzelne
     Eigenschaft hier in einem eigenen Token. B2B (Standard): Raleway,
     Versalien, kräftig, weiträumig, kompakte Zeilenhöhe (Broschüre-Look). */
  --heading-13-font:      var(--font-display);
  --heading-13-weight:    800;
  --heading-13-transform: uppercase;
  --heading-13-spacing:   .02em;
  --heading-13-leading:   1.15;
  --heading-2-font:       var(--font-display);
  --heading-2-weight:     800;
  --heading-2-transform:  uppercase;
  --heading-2-spacing:    .02em;
  --heading-2-leading:    1.15;

  /* --- HERO: Textfarbe & Abdunkelung -------------------------------------
     Der Hero liegt über einem Foto — --hero-ink ist die (helle) Textfarbe
     für Eyebrow/H1/Fließtext im Hero, --hero-scrim die Abdunkelung darüber.
     --hero-scrim ist bewusst kräftig (mehrere Verläufe kombiniert), damit
     die Überschrift auch auf hellen/unruhigen Fotostellen AA-lesbar bleibt
     (siehe Kontrastregel §5: mind. 3:1 für großen Text). Bei einem neuen,
     sehr hellen Hero-Foto hier zuerst die Deckkraft erhöhen, nicht die
     Textfarbe ändern. */
  --hero-ink:            var(--white);
  --hero-scrim:
    linear-gradient(100deg, rgba(16,16,16,.92) 0%, rgba(16,16,16,.78) 45%, rgba(16,16,16,.45) 72%, rgba(16,16,16,.20) 100%),
    linear-gradient(0deg, rgba(16,16,16,.78) 0%, rgba(16,16,16,.20) 55%, rgba(16,16,16,0) 100%);

  /* --- FORM (Ecken-Radius) -------------------------------------------------
     Ein zentraler Radius-Wert pro Größe steuert alle abgerundeten Ecken.
     B2B nutzt flache, sachliche Radien (Broschüre-Duktus). */
  --radius-lg:          16px;
  --radius-md:          12px;
  --radius-sm:          8px;

  /* --- HINTERGRUND-MUSTER: Rosen-Ranke an den Seitenrändern --------------
     Große Rosen-Ranke (SVG, assets/pattern-floral.svg, Deckkraft bereits sehr
     niedrig direkt in der Datei eingebacken, aktuell 0.09), läuft als schmale
     Spalte am linken UND rechten Seitenrand vertikal durch (repeat-y), rechts
     automatisch gespiegelt. Die Mitte der Seite bleibt dadurch automatisch
     frei. Deaktivieren: --pattern-floral auf "none" setzen. Spaltenbreite
     über --pattern-width, Ausblenden zur Mitte hin über --pattern-fade. */
  --pattern-floral:    none; /* Rosen-Ranke deaktiviert; zum Reaktivieren: url("assets/pattern-floral.svg") */
  --pattern-width:      190px;
  --pattern-fade:      linear-gradient(90deg, black 0%, black 55%, transparent 100%);

  /* --- MOBILER SLIDER: Randabstand -----------------------------------------
     Bildgruppen mit mehr als zwei Elementen werden auf Mobil (≤680px) zu
     einem wischbaren Slider und brechen dafür aus dem Seitenrand aus (siehe
     LAYOUT-Abschnitt "MOBILER SLIDER"). Dieser Wert MUSS zum Seitenrand von
     .wrap bei ≤680px passen (siehe dortige Media-Query) — beide sind hier auf
     denselben Wert gestützt, damit sie nie auseinanderlaufen. */
  --wrap-gutter-mobile: 14px;

  /* --- ANIMATIONEN: zentrale Regler ----------------------------------------
     Alle Dauern und Kurven für die dezenten Animationen der Seite stecken
     ausschließlich hier — wer die Geschwindigkeit insgesamt drosseln oder
     eine Animation ausschalten möchte, braucht nur diese Werte zu ändern,
     nicht script.js oder die LAYOUT-Regeln. Bewusst zurückhaltend gewählt
     (Kundenwunsch: hochwertig statt auffällig). */
  --dur-reveal:            500ms;  /* Einblenden von Überschriften/Absätzen/Karten beim Scrollen */
  --reveal-distance:       16px;   /* Aufwärtsbewegung beim Einblenden */
  --ease-standard:         cubic-bezier(.16,.84,.44,1); /* weiche Beschleunigungskurve für die meisten Animationen (bewusst kein "linear") */
  --stagger-step:          60ms;   /* zeitlicher Versatz je Karte innerhalb einer Kartengruppe */
  --stagger-cap:           300ms;  /* Obergrenze für den Gesamtversatz einer Kartengruppe */
  --dur-hero-slide:        5000ms; /* Standzeit je Hero-Titelbild (steuert auch die Rotation in script.js) */
  --dur-hero-crossfade:    1000ms; /* Überblendung zwischen zwei Hero-Titelbildern */
  --hero-kenburns-scale:   1.06;   /* Ziel-Vergrößerung des gerade aktiven Hero-Titelbilds */
  --ease-kenburns:         linear; /* eigene, lineare Kurve für die sehr langsame Vergrößerung — bei so langer Dauer wirkt eine Beschleunigungskurve ungleichmäßig */
  --dur-header:            250ms;  /* Kopfzeile: Übergang beim Kompakter-Werden ab ca. 40px Scrolltiefe */
  --dur-count-up:          900ms;  /* Hochzählen der Personenzahlen (Raumkarten, Kapazitäts-Banner) */
  --dur-hover:             150ms;  /* Buttons: Anheben beim Überfahren */
  --dur-faq:               250ms;  /* FAQ: weiches Einblenden der Antwort beim Aufklappen */
  --dur-slider-hint:       700ms;  /* einmaliger Wisch-Hinweis-Impuls je Mobil-Slider */
  --slider-hint-distance:  14px;   /* Weite des Wisch-Hinweis-Impulses */
}

/* ==========================================================================
   LOCATION-THEME "wedding" — stellt die ursprünglichen Hochzeitsseiten-Farben
   wieder her. Wird über <body data-theme="wedding"> aktiviert (siehe
   index.php). Nur Standorte mit eigener Trauungs-Sektion (Schlüssel
   "trauung" in der Standort-JSON) bekommen dieses Attribut — aktuell also
   ausschließlich site/data/locations/krefeld.json. NICHT anfassen, ohne die
   Hochzeitsseite erneut optisch zu prüfen: jeder Wert hier ist 1:1 aus der
   ursprünglichen Fassung dieser Datei übernommen.
   ========================================================================== */
body[data-theme="wedding"]{
  --paper:              #FFFDF9;
  --champagne:          #F1E8D9;
  --cream:              #F8F4E7;
  --champagne-strong:   #E4D0B2;
  --cream-strong:       #F1E9D0;
  --gold:               #C8A165;
  --gold-light:         #D9B77E;
  --gold-hover-a:       #e2c48f;
  --gold-hover-b:       #d3ac72;
  --ink:                #4A4038;
  --ink-soft:           #8A7A6D;
  --ink-on-gold:        #4A3B1F;
  --line:               #EADFC7;
  --card-border:        rgba(151,120,80,.14);
  --shadow:             0 24px 60px rgba(90,68,42,.10);
  --shadow-soft:        0 18px 44px rgba(90,68,42,.08);
  /* --burgundy wird auf der Hochzeitsseite nicht als Markenfarbe genutzt,
     aber von ein paar Layout-Regeln (u. a. Footer, Hero-Platzhalterfarbe vor
     dem Laden der Fotos) referenziert. Damit die Hochzeitsseite optisch
     unverändert bleibt, setzen wir --burgundy/--burgundy-dk hier auf die
     ursprünglichen dunklen Töne dieser Stellen (statt auf echtes Burgund). */
  --burgundy:           #4A4038;
  --burgundy-dk:        #332b23;
  --radius-lg:         28px;
  --radius-md:         24px;
  --radius-sm:         14px;

  /* Überschriften: ursprüngliche Auszeichnung wiederherstellen (keine
     Versalien, engere/negative statt weite Laufweite, geringeres
     Schriftgewicht, Hausschrift statt Raleway). --font-hand ist die
     kalligrafische Skript-Schrift für H2 und gehört ausschließlich hierher
     ins Hochzeits-Theme (siehe Kommentar oben bei --font-display/--font-body);
     für B2B existiert dieses Token gar nicht. */
  --font-hand:            "Alex Brush", cursive;
  --heading-13-font:      var(--font-body);
  --heading-13-weight:    700;
  --heading-13-transform: none;
  --heading-13-spacing:   -.02em;
  --heading-13-leading:   1.12;
  --heading-2-font:       var(--font-hand);
  --heading-2-weight:     500;
  --heading-2-transform:  none;
  --heading-2-spacing:    0;
  --heading-2-leading:    0.75;

  /* Hero-Abdunkelung: gleiche Stärke wie B2B (siehe Kontrastregel §5), aber
     warmton statt neutralschwarz, damit der Farbcharakter des Hero-Fotos
     erhalten bleibt. */
  --hero-scrim:
    linear-gradient(100deg, rgba(40,32,22,.92) 0%, rgba(40,32,22,.78) 45%, rgba(40,32,22,.45) 72%, rgba(40,32,22,.20) 100%),
    linear-gradient(0deg, rgba(40,32,22,.78) 0%, rgba(40,32,22,.20) 55%, rgba(40,32,22,0) 100%);
}

/* ==========================================================================
   LAYOUT — ab hier nichts mehr anfassen (Struktur, keine Design-Werte mehr)
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--font-body);
  line-height:1.68;
}
img{max-width:100%;display:block}
a{color:inherit}
figure{margin:0}
.wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.section{padding:96px 0;position:relative;isolation:isolate}
/* Rosen-Ranke je Sektion: ::before = linker Rand, ::after = rechter Rand
   (per scaleX(-1) gespiegelt, nutzt dieselbe SVG-Datei). Beide liegen HINTER
   dem Inhalt (z-index:-1), sind auf --pattern-width schmal begrenzt und
   blenden zur Mitte hin sanft aus (--pattern-fade). Betrifft alle .section,
   aber nicht .hero (eigenes Fotobild) und nicht Header/Footer. */
.section::before,
.section::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:-1;
  pointer-events:none;
  width:var(--pattern-width);
  background-image:var(--pattern-floral);
  background-repeat:repeat-y;
  background-position:top left;
  background-size:var(--pattern-width) auto;
  mask-image:var(--pattern-fade);
  -webkit-mask-image:var(--pattern-fade);
}
.section::before{ left:0; }
.section::after{ right:0; transform:scaleX(-1); }
/* Sektionsfarben: Klassennamen sind aus historischen Gründen "pink/sage/lilac"
   geblieben, liefern jetzt aber ausschließlich Creme- bzw. Champagner-Verläufe. */
.section-pink{background:linear-gradient(180deg,var(--champagne) 0%, var(--white) 100%)}
.section-sage{background:linear-gradient(180deg,var(--cream) 0%, var(--white) 100%)}
.section-lilac{background:linear-gradient(180deg,var(--cream) 0%, var(--white) 100%)}
/* Neue B2B-Akzentflächen (siehe CONTRACT.md): flache, kräftige Farbfläche
   statt sanftem Verlauf — passend zum sachlichen Broschüren-Look. Text in
   diesen Sektionen ist immer --ink (Kontrastregel §5), siehe Overrides
   für .eyebrow weiter unten. */
.section-coral{background:var(--coral)}
.section-yellow{background:var(--yellow)}
.section-teal{background:var(--teal)}
.section-coral,
.section-yellow,
.section-teal{color:var(--ink)}
.section-coral .eyebrow,
.section-yellow .eyebrow,
.section-teal .eyebrow{color:var(--ink)}
/* Karten auf Akzentflächen: kräftig deckend statt dem halbtransparenten
   Weiß aus .feature-card & Co. (das lässt sonst die Akzentfarbe blass
   durchscheinen) — klar abgesetztes weißes Panel, wie in der Broschüre. */
.section-coral .feature-card,
.section-coral .room-card,
.section-coral .culinary-grid article,
.section-coral .steps li,
.section-yellow .feature-card,
.section-yellow .room-card,
.section-yellow .culinary-grid article,
.section-yellow .steps li,
.section-teal .feature-card,
.section-teal .room-card,
.section-teal .culinary-grid article,
.section-teal .steps li{
  background:var(--white);
  border-color:var(--card-border);
}
.narrow{max-width:860px;margin:auto;text-align:center}
.narrow-copy{max-width:980px}
.align-start{align-items:start}

/* Überschriften: einheitlich Raleway (--font-display), Versalien, wie in
   der B2B-Broschüre. Gilt für h1/h2/h3 auf der gesamten Seite. */
h1,h3{
  margin:0 0 18px;
  font-family:var(--heading-13-font);
  font-weight:var(--heading-13-weight);
  text-transform:var(--heading-13-transform);
  letter-spacing:var(--heading-13-spacing);
  line-height:var(--heading-13-leading);
}
h1{font-size:clamp(2.35rem,5vw,5.2rem)}
h3{font-size:clamp(1.1rem,2vw,1.52rem)}
h2{
  margin:0 0 18px;
  font-family:var(--heading-2-font);
  font-weight:var(--heading-2-weight);
  text-transform:var(--heading-2-transform);
  letter-spacing:var(--heading-2-spacing);
  line-height:var(--heading-2-leading);
  color:var(--ink);
  font-size:clamp(1.95rem,4.05vw,3.75rem);
}
p{margin:0 0 18px}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  color:var(--gold);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
  opacity:.55;
}
.eyebrow-center{justify-content:center}
.eyebrow-center::after{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
  opacity:.55;
}
/* Kleines Detail beim Einblenden: der Strich wächst von 0 auf volle Breite
   (per transform:scaleX statt width, damit ausschließlich transform/opacity
   animiert werden). Greift nur, wenn der Strich zu einem Überschriftsblock
   gehört, der gerade per Scroll-Reveal eingeblendet wird (siehe ".reveal"
   weiter unten) — ohne JS bzw. außerhalb eines Reveal-Blocks bleibt der
   Strich immer in voller Breite sichtbar. */
html.js .reveal .eyebrow::before,
html.js .reveal .eyebrow-center::after{
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform var(--dur-reveal) var(--ease-standard);
  transition-delay:120ms;
}
html.js .reveal.is-visible .eyebrow::before,
html.js .reveal.is-visible .eyebrow-center::after{transform:scaleX(1)}
.benefits{font-weight:700;letter-spacing:.03em;color:var(--ink-soft)}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px max(20px,calc((100vw - 1180px)/2));
  background:rgba(255,253,249,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--card-border);
  transition:padding var(--dur-header) var(--ease-standard), background var(--dur-header) var(--ease-standard);
}
/* Kompakter ab ca. 40px Scrolltiefe (siehe script.js, ".is-scrolled"-Klasse).
   Bewusst ein sanfter Übergang statt eines Sprungs — dadurch "ruckt" der
   Inhalt darunter nicht, obwohl sich die Kopfzeilenhöhe minimal ändert. Der
   Schatten kommt separat über ::after (opacity-Transition), damit hier keine
   zusätzliche, layoutwirksame Eigenschaft animiert werden muss. */
.site-header.is-scrolled{
  padding-top:9px;
  padding-bottom:9px;
  background:var(--white);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:16px;
  background:linear-gradient(180deg, rgba(16,16,16,.10), transparent);
  opacity:0;
  transition:opacity var(--dur-header) var(--ease-standard);
  pointer-events:none;
}
.site-header.is-scrolled::after{opacity:1}
.brand{text-decoration:none}
.brand-logo{display:block;height:36px;width:auto;transform-origin:left center;transition:transform var(--dur-header) var(--ease-standard)}
.site-header.is-scrolled .brand-logo{transform:scale(.88)}
@media (prefers-reduced-motion: reduce){
  .site-header,.brand-logo,.site-header::after{transition:none}
}
.brand-sub{display:block;font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft);margin-top:2px}
.main-nav{display:flex;gap:22px;align-items:center}
.main-nav a{text-decoration:none;font-size:.94rem;transition:color .25s ease}
.main-nav a:hover{color:var(--gold)}
.nav-cta{
  padding:11px 18px;
  border-radius:999px;
  background:var(--champagne-strong);
  font-weight:700;
}
.nav-toggle{
  display:none;
  border:1px solid var(--card-border);
  background:var(--white);
  color:var(--ink);
  border-radius:999px;
  padding:10px 16px;
  font:inherit;
}

.hero{
  position:relative;
  min-height:84vh;
  display:grid;
  align-items:end;
  overflow:hidden;
  color:var(--hero-ink);
  background:var(--burgundy-dk); /* Platzhalterfarbe, solange kein Foto geladen ist */
}
.hero-slider,
.hero-slide,
.hero-overlay{position:absolute;inset:0}
.hero-slide{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1); /* Ruhezustand; die Vergrößerung passiert erst während des aktiven Zustands (Ken Burns, s.u.) */
  transition:opacity var(--dur-hero-crossfade) var(--ease-standard), transform var(--dur-hero-slide) var(--ease-kenburns);
}
/* Ken Burns: das aktive Titelbild wächst sehr langsam über seine ganze
   Standzeit (--dur-hero-slide) leicht auf --hero-kenburns-scale. Wechselt es
   danach in den Ruhezustand zurück, läuft dieselbe Transition rückwärts ab —
   unsichtbar, weil das Bild dann längst wegüberblendet ist. */
.hero-slide.is-active{opacity:1;transform:scale(var(--hero-kenburns-scale))}
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:opacity var(--dur-hero-crossfade) var(--ease-standard)}
  .hero-slide.is-active{transform:scale(1)}
}
.hero-overlay{
  background:var(--hero-scrim);
}
.hero-content{position:relative;padding:110px 0 80px}
.hero-panel{
  max-width:760px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.hero-content h1{max-width:700px}
/* Explizite helle Farbe direkt auf der Hero-Überschrift (zusätzlich zur
   Vererbung von .hero{color:var(--hero-ink)}) — so bleibt sie auch dann
   hell, wenn später irgendwo eine allgemeine h1-Regel eine eigene Farbe
   setzt. */
#hero-title{color:var(--hero-ink)}
.hero-content .eyebrow{color:var(--hero-ink)} /* Eyebrow sitzt auf dem Foto, nicht auf einer Akzentfläche — immer hell */
.hero-content p{max-width:670px;font-size:1.08rem;color:var(--hero-ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-dots{display:flex;gap:10px;margin-top:28px}
.hero-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.45);
  padding:0;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.hero-dot.is-active{background:var(--white);transform:scale(1.15)}

.hero-credit{
  position:absolute;
  right:16px;
  bottom:14px;
  z-index:2;
  font-size:.72rem;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  letter-spacing:.02em;
  /* Lesbarkeit auf hellen Fotos (§11 WP-G): derselbe Schatten wie
     .photo-credit — ohne ihn verschwindet der Nachweis auf hellen
     Bildstellen fast vollständig. */
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.hero-credit:hover{color:var(--white);text-decoration:underline}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border:0;
  border-radius:999px;
  padding:15px 24px;
  font-weight:700;
  cursor:pointer;
  transition:transform var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard), background var(--dur-hover) var(--ease-standard);
  box-shadow:0 12px 28px rgba(151,120,80,.20);
}
.button:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(151,120,80,.24)}
.button:focus-visible{outline:3px solid var(--ink-soft);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .button:hover{transform:none}
}
.button-yellow{
  background:linear-gradient(135deg,var(--gold-light) 0%, var(--gold) 100%);
  color:var(--ink-on-gold);
}
.button-yellow:hover{background:linear-gradient(135deg,var(--gold-hover-a) 0%, var(--gold-hover-b) 100%)}
.button.small{padding:11px 18px;font-size:.92rem}

.section-heading{margin-bottom:44px}
.intro{padding-top:82px}
.intro-gallery,
.planning-gallery,
.culinary-photos,
.ceremony-gallery,
.impressions-grid{display:grid;gap:20px}
.intro-gallery{grid-template-columns:.86fr 1.28fr .86fr;margin-top:46px}
.intro-gallery figure{position:relative;height:460px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);background:var(--white)}
.intro-gallery figure.portrait{height:460px}
.intro-gallery img,
.planning-gallery img,
.culinary-photos img,
.ceremony-gallery img,
.impressions-grid img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.intro-gallery figure:hover img,
.planning-gallery figure:hover img,
.culinary-photos figure:hover img,
.ceremony-gallery figure:hover img,
.impressions-grid figure:hover img{transform:scale(1.025)}

.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
/* "workshops" (6 Karten, neu): nutzt dieselbe Karten-Optik wie .feature-card
   (siehe Selektorliste unten), nur mit 3 statt 2 Spalten. */
.workshop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feature-card,
.room-card,
.culinary-grid article,
.steps li,
.faq-list details,
.inquiry-form,
.capacity-banner{
  background:rgba(255,255,255,.86);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-soft);
}
.feature-card{
  padding:32px;
  border-radius:var(--radius-lg);
}

.room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
/* WP-H: ".room-card" ist absichtlich NICHT auf ".room-grid" verschachtelt
   (kein ".room-grid .room-card"-Selektor), sondern gilt global — der Typ
   "cards" entscheidet in cards.php ausschließlich anhand von "image" ist
   gesetzt", ob eine Karte als ".room-card" oder ".feature-card" gerendert
   wird, unabhängig vom äußeren Raster ("grid_class": feature-grid/room-grid/
   workshop-grid). Dadurch bekommt eine Karte mit Bild automatisch dieselbe
   Optik (Bild oben bündig, auf Kartenbreite und Eckenradius beschnitten,
   feste Bildhöhe per object-fit:cover, gleiche Kartenhöhe in der Reihe durch
   den Grid-Standard "align-items:stretch") — in jeder der drei Ausprägungen,
   auch wenn nur ein Teil der Karten ein Bild hat. Bitte diesen Selektor bei
   künftigen Änderungen NICHT auf ".room-grid" einschränken. */
.room-card{overflow:hidden;border-radius:var(--radius-lg)}
.room-card img{width:100%;height:300px;object-fit:cover}
.room-card>div{padding:28px}
/* Fotonachweis (§11): "room-card" hat kein <figure> als Rahmen fürs Bild
   (anders als die Galerie-Typen) — ".media-frame" übernimmt hier dieselbe
   Rolle (Positionierungskontext), wird aber nur ausgegeben, wenn ein
   Nachweis existiert (siehe cards.php/rooms.php). */
.media-frame{position:relative;display:block}
.room-capacity{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.62em;
  font-weight:600;
  color:var(--gold);
  vertical-align:middle;
  white-space:nowrap;
}
.room-capacity-icon{width:15px;height:15px;flex:none}
.capacity-banner{margin-top:30px;padding:34px;border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--cream),var(--white))}

.culinary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.culinary-grid article{padding:26px;border-radius:var(--radius-md)}
.culinary-photos{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:34px}
.culinary-photos figure{position:relative;height:340px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft)}
.culinary-photos figure.wide{grid-column:span 2;height:430px}

.two-col{display:grid;grid-template-columns:.82fr 1.18fr;gap:62px}
.planning-gallery{grid-column:1/-1;grid-template-columns:.82fr 1.36fr .82fr;margin-top:10px}
.planning-gallery figure{position:relative;height:390px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft)}
.planning-gallery figure.tall{height:390px}

.ceremony-gallery{grid-template-columns:1.38fr .82fr;margin-top:42px}
.ceremony-gallery figure{position:relative;height:470px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft)}

.photo-credit{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:2;
  font-size:.7rem;
  /* Der Nachweis liegt auf Fotos jeder Helligkeit. Ein Textschatten allein
     reicht auf hellen Bildstellen nicht — deshalb zusätzlich eine dezent
     abgedunkelte Pille hinter dem Text. Sie ist auf dunklen Bildern kaum
     sichtbar und rettet die Lesbarkeit auf hellen. */
  color:rgba(255,255,255,.92);
  text-decoration:none;
  letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  background:rgba(0,0,0,.34);
  padding:3px 8px;
  border-radius:999px;
  backdrop-filter:blur(2px);
}
.photo-credit:hover{color:var(--white);text-decoration:underline}
/* Kleine Kacheln (§11 WP-G, Punkt 6): auf Mobil ist in den Bildkacheln wenig
   Platz. Entscheidung: der Nachweis bleibt IMMER sichtbar (kein Nur-Hover) —
   auf Touch-Geräten gibt es kein Hover, ein Fotonachweis ist aber meist eine
   rechtliche Pflicht und darf nicht verschwinden. Stattdessen wird er hier
   spürbar kleiner und etwas näher an die Ecke gerückt, bleibt aber lesbar. */
@media (max-width:680px){
  .photo-credit{font-size:.62rem;right:10px;bottom:8px}
}

.ai-badge{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:2;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--white);
  background:rgba(74,64,56,.62);
  padding:4px 10px;
  border-radius:999px;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  padding:0;
  margin:0;
  list-style:none;
}
.steps li{padding:26px;border-radius:var(--radius-md)}
.steps strong{display:block;margin-bottom:10px}

.impressions-section{background:linear-gradient(180deg,var(--white) 0%, var(--champagne) 100%)}
.impressions-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:260px}
.impressions-grid figure{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);background:var(--white)}
.impressions-grid figure.tall{grid-row:span 2}
.impressions-grid figure.wide{grid-column:span 2}

.inquiry{background:linear-gradient(180deg,var(--cream) 0%, var(--white) 100%)}
.inquiry-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.inquiry-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding:30px;
  border-radius:var(--radius-lg);
}
.inquiry-form label{display:grid;gap:8px;font-weight:700}
.inquiry-form label:nth-last-of-type(-n+2),
.inquiry-form button{grid-column:1/-1}
.form-checkgroup{
  grid-column:1/-1;
  border:0;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.form-checkgroup legend{
  font-weight:700;
  padding:0 0 4px;
  color:var(--ink);
}
.form-checkgroup legend .legend-hint{
  font-weight:400;
  color:var(--ink-soft);
  font-size:.85em;
}
.form-checkgroup .checkbox-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:400;
  cursor:pointer;
}
.form-checkgroup .checkbox-label input{
  width:auto;
  accent-color:var(--gold);
}
#formular-status{grid-column:1/-1}
.form-notice{
  display:none;
  margin:16px 0 0;
  padding:14px 20px;
  border-radius:var(--radius-sm);
  font-weight:600;
}
.form-notice.is-visible{display:block}
.form-notice-ok{background:var(--notice-ok-bg);color:var(--notice-ok-text)}
.form-notice-fail{background:var(--notice-fail-bg);color:var(--notice-fail-text)}
.form-checkgroup .checkgroup-text{
  margin-left:26px;
  max-width:360px;
}
input,select,textarea{
  width:100%;
  font:inherit;
  color:var(--ink);
  border:1px solid var(--champagne-strong);
  border-radius:var(--radius-sm);
  padding:13px 14px;
  background:var(--white);
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(200,161,101,.22);
}

.faq-list{max-width:950px;margin:auto;display:grid;gap:16px}
.faq-list details{
  border-radius:var(--radius-lg);
  padding:0 22px;
  overflow:hidden;
}
.faq-list summary{
  list-style:none;
  font-weight:700;
  font-size:1.05rem;
  cursor:pointer;
  padding:22px 4px;
  position:relative;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--gold);
  font-size:1.4rem;
  line-height:1;
}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{margin:0 0 18px;padding:0 4px}
.faq-list details p:first-of-type{padding-top:0}
/* Weiches Aufklappen: <details> selbst springt technisch bedingt sofort auf
   volle Höhe (eine Höhen-Animation ist laut Vorgabe nicht erlaubt), aber der
   Inhalt blendet sanft ein statt hart zu erscheinen — reine
   transform/opacity-Animation, einmalig beim Öffnen. */
.faq-list details[open] p{
  animation:faq-content-in var(--dur-faq) var(--ease-standard);
}
@keyframes faq-content-in{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .faq-list details[open] p{animation:none}
}
.center{text-align:center;margin-top:38px}

footer{padding:32px 0;background:var(--burgundy);color:var(--white);text-align:center}
footer p{margin:0}
footer .footer-legal{margin-top:10px;font-size:.82rem}
footer .footer-legal a{color:rgba(255,255,255,.72);text-decoration:none}
footer .footer-legal a:hover{color:var(--white);text-decoration:underline}

.legal-page{max-width:760px;margin:0 auto;padding:120px 0 90px}
.legal-page h1{font-size:clamp(2rem,4vw,2.6rem);margin-bottom:28px}
.legal-page h2{font-family:var(--font-body);text-transform:none;letter-spacing:normal;font-size:1.15rem;font-weight:700;margin:34px 0 12px;color:var(--ink)}
.legal-page h3{font-family:var(--font-body);text-transform:none;letter-spacing:normal;font-size:.98rem;font-weight:700;margin:22px 0 10px;color:var(--ink)}
.legal-page p,.legal-page li{color:var(--ink-soft);line-height:1.7;margin:0 0 14px}
.legal-page ul{margin:0 0 14px;padding-left:20px}
.legal-page a{color:var(--gold)}
.legal-page .back-link{display:inline-block;margin-bottom:30px;font-weight:700;color:var(--ink)}

/* ==========================================================================
   SCROLL-REVEAL: sanftes Einblenden von Überschriften, Absätzen und Karten
   (WP-E, Teil 2.1). script.js vergibt die Klasse ".reveal" an die
   betreffenden Elemente und setzt danach einmalig ".is-visible", sobald ein
   Element beim Scrollen sichtbar wird (IntersectionObserver, danach wird der
   Beobachter für dieses Element wieder abgemeldet). Innerhalb einer
   Kartengruppe wird zusätzlich --stagger-step/--stagger-cap als
   Verzögerung je Karte gesetzt (per style.transitionDelay).
   PFLICHT: Ohne JavaScript darf nichts unsichtbar bleiben. Deshalb greift
   der unsichtbare Ausgangszustand ausschließlich unter "html.js" — diese
   Klasse setzt ein winziges Inline-Skript im <head> von index.php, das nur
   läuft, wenn JavaScript überhaupt aktiv ist. Ohne JS bleibt ".reveal" also
   einfach ganz normal sichtbar.
   ========================================================================== */
html.js .reveal{
  opacity:0;
  transform:translateY(var(--reveal-distance));
}
.reveal{
  transition:opacity var(--dur-reveal) var(--ease-standard), transform var(--dur-reveal) var(--ease-standard);
}
html.js .reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  /* Barrierefreiheit hat Vorrang: Inhalte erscheinen sofort, keine Bewegung. */
  html.js .reveal{opacity:1; transform:none; transition:none}
}

/* Zahlen-Hochzähleffekt (WP-E, Teil 2.4): tabular-nums verhindert, dass die
   Karte während des Hochzählens minimal in der Breite "zittert", weil
   Ziffern wie "1" und "8" sonst unterschiedlich breit sind. */
.count-up{font-variant-numeric:tabular-nums}

@media (max-width: 980px){
  .main-nav{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    padding:24px 20px;
    background:rgba(255,253,249,.98);
    border-bottom:1px solid var(--card-border);
  }
  .main-nav.open{display:flex}
  .nav-toggle{display:inline-flex}
  .hero{min-height:78vh}
  .hero-panel{max-width:100%}
  .feature-grid,.room-grid,.culinary-grid,.steps,.workshop-grid{grid-template-columns:1fr 1fr}
  .two-col,.inquiry-grid{grid-template-columns:1fr}
  .inquiry-form{grid-template-columns:1fr}
  .planning-gallery,.intro-gallery{grid-template-columns:1fr 1fr}
  .planning-gallery figure:last-child,
  .intro-gallery figure:last-child{grid-column:1/-1}
  .ceremony-gallery{grid-template-columns:1fr}
  .impressions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 680px){
  .section{padding:72px 0}
  .wrap{width:min(100% - (var(--wrap-gutter-mobile) * 2),1180px)}
  .site-header{padding:14px 16px}
  .brand-logo{height:32px}
  .brand-sub{font-size:.68rem}
  .hero{min-height:74vh}
  .hero-content{padding:88px 0 50px}
  .hero-panel{padding:0}
  .hero-content p{font-size:1rem}
  .feature-grid,.room-grid,.culinary-grid,.steps,.inquiry-form,.workshop-grid,
  .intro-gallery,.planning-gallery,.culinary-photos,.ceremony-gallery,.impressions-grid{grid-template-columns:1fr}
  .intro-gallery figure,
  .intro-gallery figure.portrait,
  .planning-gallery figure,
  .planning-gallery figure.tall,
  .culinary-photos figure,
  .culinary-photos figure.wide,
  .ceremony-gallery figure,
  .impressions-grid figure,
  .impressions-grid figure.tall,
  .impressions-grid figure.wide{
    grid-column:auto;
    grid-row:auto;
    height:310px;
  }
  .room-card img{height:230px}
  .impressions-grid{grid-auto-rows:auto}
}

/* ==========================================================================
   MOBILER SLIDER (WP-E, Teil 1): Bildgruppen mit mehr als zwei Elementen
   werden auf Mobil (≤680px) statt einer endlosen vertikalen Stapelung zu
   einem horizontal wischbaren Slider (Scroll-Snap, keine JS-Bibliothek).
   Die ">2 Elemente"-Regel wird über :has(> :nth-child(3)) direkt in CSS
   geprüft — trifft das nicht zu (z. B. nur 2 Bilder), bleibt es bei der
   normalen, oben stehenden Ein-Spalten-Stapelung. script.js ergänzt dazu
   lediglich Punkt-Indikatoren und einen einmaligen Wisch-Hinweis; die
   Slider-Mechanik selbst braucht kein JavaScript.
   Betroffen: .intro-gallery, .culinary-photos, .planning-gallery,
   .impressions-grid, .room-grid (auch die "Formate"-Karten, die dieselbe
   Klasse nutzen). AUSDRÜCKLICH NICHT betroffen (Textinhalte, die für SEO und
   Lesbarkeit vollständig und in Reihenfolge sichtbar bleiben müssen):
   .feature-grid, .workshop-grid, .steps.
   ========================================================================== */
/* Punkt-Indikatoren: existieren nur im DOM, wenn script.js einen Slider
   qualifiziert hat, bleiben aber außerhalb von Mobil verborgen — Desktop/
   Tablet zeigen dieselben Gruppen weiterhin als normales Raster. Muss VOR
   der Media-Query stehen, damit deren display:flex bei ≤680px gewinnt. */
.slider-dots{display:none}
@media (max-width: 680px){
  .intro-gallery:has(> :nth-child(3)),
  .culinary-photos:has(> :nth-child(3)),
  .planning-gallery:has(> :nth-child(3)),
  .impressions-grid:has(> :nth-child(3)),
  .room-grid:has(> :nth-child(3)){
    display:flex;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none; /* Firefox */
    gap:14px;
    /* Anschnitt-Effekt: aus dem Seitenrand ausbrechen (negative Margin),
       dann denselben Wert wieder als Innenabstand hinzufügen — so liegt der
       erste/letzte Slide optisch bündig mit dem restlichen Seiteninhalt,
       während der Track selbst bis an den Bildschirmrand reicht. Die Seite
       selbst bleibt dabei horizontal nicht scrollbar, weil der Track nie
       breiter wird als der Viewport. */
    margin-inline:calc(-1 * var(--wrap-gutter-mobile));
    padding-inline:var(--wrap-gutter-mobile);
    padding-block:2px 12px;
    scroll-padding-inline:var(--wrap-gutter-mobile);
  }
  .intro-gallery:has(> :nth-child(3))::-webkit-scrollbar,
  .culinary-photos:has(> :nth-child(3))::-webkit-scrollbar,
  .planning-gallery:has(> :nth-child(3))::-webkit-scrollbar,
  .impressions-grid:has(> :nth-child(3))::-webkit-scrollbar,
  .room-grid:has(> :nth-child(3))::-webkit-scrollbar{display:none} /* Chrome/Safari */

  .intro-gallery:has(> :nth-child(3)) > *,
  .culinary-photos:has(> :nth-child(3)) > *,
  .planning-gallery:has(> :nth-child(3)) > *,
  .impressions-grid:has(> :nth-child(3)) > *,
  .room-grid:has(> :nth-child(3)) > *{
    flex:0 0 82%; /* < 100%: das nächste Element ragt sichtbar ins Bild (Anschnitt = stärkstes Wisch-Signal) */
    scroll-snap-align:center;
    grid-column:auto;
    grid-row:auto;
    height:auto;
  }
  .intro-gallery:has(> :nth-child(3)) figure,
  .culinary-photos:has(> :nth-child(3)) figure,
  .planning-gallery:has(> :nth-child(3)) figure,
  .impressions-grid:has(> :nth-child(3)) figure{
    height:280px;
  }

  /* Punkt-Indikatoren: von script.js direkt hinter den jeweiligen Slider
     eingefügt (".slider-dots"), nur sichtbar, wenn der Slider aktiv ist. */
  .slider-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:12px 0 0;
  }
  .slider-dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--card-border);
    cursor:pointer;
    transition:transform var(--dur-hover) var(--ease-standard), background var(--dur-hover) var(--ease-standard);
  }
  .slider-dot.is-active{background:var(--gold);transform:scale(1.35)}

  /* Einmaliger Hinweis-Impuls: der Track verschiebt sich beim ersten
     Sichtbarwerden kurz nach links und wieder zurück (script.js vergibt
     ".slider-hint-play" einmalig, nur wenn noch nicht selbst gewischt wurde
     und nicht bei reduzierter Bewegung). Reine transform-Animation, der
     Scroll-Zustand selbst wird dabei nicht verändert. */
  @keyframes slider-hint-nudge{
    0%{transform:translateX(0)}
    35%{transform:translateX(calc(-1 * var(--slider-hint-distance)))}
    100%{transform:translateX(0)}
  }
  .slider-hint-play{animation:slider-hint-nudge var(--dur-slider-hint) var(--ease-standard) 1}
}
@media (prefers-reduced-motion: reduce){
  .slider-hint-play{animation:none}
}

/* ==========================================================================
   STANDORT-AUSWAHL (Fallback-Ansicht in index.php, wenn eine Domain zu
   keinem Standort passt — z. B. die Haupt-/Auswahl-Domain).
   ========================================================================== */
.picker{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  overflow:hidden;
}
.picker-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(74,64,56,.55) 0%, rgba(74,64,56,.72) 100%), url("assets/hero-standort.jpg") center/cover no-repeat;
}
.picker-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:480px;
  background:var(--paper);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:48px 40px;
  text-align:center;
}
.picker-logo{width:150px;height:auto;margin:0 auto 20px;display:block}
/* Neutral statt Standort-Marke: die Auswahlseite gehört zu keinem Standort,
   --gold würde hier je nach Theme burgund- oder goldfarben einfärben. */
.picker-eyebrow{margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.picker h1{margin:0 0 14px;font-size:clamp(2rem,6vw,2.8rem)}
.picker-sub{margin:0 0 28px;color:var(--ink-soft);line-height:1.6;font-size:.98rem}
.picker-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.picker-label{font-size:.85rem;font-weight:700;color:var(--ink)}
.picker-select{
  width:100%;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238A7A6D'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:20px;
}
.picker-select:focus{outline:2px solid var(--ink-soft);outline-offset:2px}
.picker-button{width:100%;margin-top:6px}
.picker-error{margin:-4px 0 0;font-size:.82rem;color:var(--notice-fail-text)}
@media (max-width:520px){
  .picker-card{padding:36px 26px}
}