/* ============================================================
   UBX 2026 — Responsive-Ebene
   Die Sections stylen inline (React style-Objekte); Inline-Styles
   können keine Media Queries. Darum laufen alle Spaltenraster über
   Custom Properties, die hier je Breakpoint neu gesetzt werden.
   Inline bleibt: gridTemplateColumns: 'var(--g-3)'.
   ============================================================ */

:root {
  --g-hero:    1.12fr 0.88fr;  /* Hero: Text | Bild            */
  --g-facts:   repeat(3, 1fr); /* 3 Fakten-Kacheln im Hero     */
  --g-split-a: 1.05fr 0.95fr;  /* Rückblick                    */
  --g-split-b: 1.1fr 0.9fr;    /* Schwestern-Band              */
  --g-split-c: 0.9fr 1.1fr;    /* Kontakt / Formular           */
  --g-2:       repeat(2, 1fr);
  --g-3:       repeat(3, 1fr);
  --g-4:       repeat(4, 1fr);
}

/* Tablet — vier- und dreispaltige Kachelraster auf zwei Spalten. */
@media (max-width: 1024px) {
  :root { --g-3: repeat(2, 1fr); --g-4: repeat(2, 1fr); }
}

/* Phone — alles einspaltig, nur kleine Kacheln bleiben zu zweit. */
@media (max-width: 860px) {
  :root {
    --g-hero: 1fr;
    --g-split-a: 1fr;
    --g-split-b: 1fr;
    --g-split-c: 1fr;
    --g-2: 1fr;
    --g-3: 1fr;
    --g-4: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  :root { --g-facts: 1fr; --g-4: 1fr; }
}

/* Grid- und Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen.
   Ohne min-width:0 erzwingt ein langes Wort horizontales Scrollen. */
#root [style*="grid"] > *,
#root [style*="flex"] > * { min-width: 0; }

/* Medien nie breiter als ihr Container. */
#root img, #root video { max-width: 100%; }

/* Lange E-Mails/URLs im Fliesstext umbrechen statt ueberlaufen lassen.
   Ueberschriften bleiben ausgenommen: dort wuerde break-word ein langes Wort
   mitten im Wort trennen ("Unternehmertu/m"), was schlechter aussieht als der
   minimale Ueberhang in die Spaltenluecke. */
#root p, #root a, #root li { overflow-wrap: break-word; }

/* Auf schmalen Displays ist ein Wortumbruch besser als seitliches Scrollen. */
@media (max-width: 860px) {
  #root h1, #root h2, #root h3, #root h4 { overflow-wrap: break-word; }
}

/* ------------------------------------------------------- Navigation */
.ubx-nav-desktop { display: flex; gap: 28px; }
.ubx-nav-toggle  { display: none; }

@media (max-width: 900px) {
  .ubx-nav-desktop, .ubx-header-cta { display: none; }
  .ubx-nav-toggle { display: inline-flex; }
}

/* Mobiles Menü — als Overlay unter dem Header. */
.ubx-nav-mobile {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px var(--gutter) 18px;
  /* Deckend: halbtransparent schien der Hero-Text durch die Menüpunkte. */
  background: var(--bg);
  max-height: calc(100vh - 78px); overflow-y: auto;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.ubx-nav-mobile a {
  padding: 13px 4px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.ubx-nav-mobile a:last-of-type { border-bottom: none; }

/* Auf Touch-Geräten hat Parallax keinen Nutzen und kostet Scroll-Performance. */
@media (hover: none) {
  .ubx-parallax { background-attachment: scroll !important; }
}

/* Kopfzeile auf kleinen Displays entlasten: kleineres Logo, Label des
   Zurück-Links weg (der ‹-Pfeil und aria-label bleiben). */
@media (max-width: 560px) {
  .ubx-logo { height: 40px !important; }
  .ubx-back-label { display: none; }
  /* Unterseiten: das Logo führt zur Startseite, der ‹-Link entfällt, damit
     Wortmarke und Anmelde-Knopf in eine Zeile passen. */
  .ubx-back { display: none !important; }
  .ubx-lockup { height: 42px !important; }
  .ubx-jury-platzhalter { aspect-ratio: 16 / 7 !important; }
}

/* Kurzer Knopftext für schmale Kopfzeilen. */
.ubx-cta-kurz { display: none; }
@media (max-width: 420px) {
  .ubx-cta-lang { display: none; }
  .ubx-cta-kurz { display: inline; }
}

/* Finger statt Maus: Bedienelemente mindestens 44 px hoch. */
@media (pointer: coarse) {
  .ubx-sub-cta { min-height: 44px !important; }
  .ubx-chip { min-height: 44px !important; }
  .ubx-touch { display: inline-flex !important; align-items: center; min-height: 44px; }
  footer a:not([aria-label]) { display: inline-flex; align-items: center; min-height: 44px; }
  .ubx-nav-mobile a { min-height: 48px; display: flex; align-items: center; }
}


/* Das Etikett aus dem Design-System (Badge) setzt white-space: nowrap
   fest im Inline-Stil. Lange Hinweise wie „Vorläufiges Programm —
   Änderungen vorbehalten" schieben damit auf 320px-Geräten die ganze
   Seite waagerecht auf. Die Komponente teilen wir uns mit der
   UBX-Seite und fassen sie deshalb nicht an — hier wird der
   Zeilenumbruch nur für schmale Displays wieder erlaubt. */
@media (max-width: 460px) {
  span[style*="white-space: nowrap"] {
    white-space: normal !important;
  }
}


/* Sprunglink zum Inhalt. Liegt außerhalb des Blickfelds, bis er den
   Fokus bekommt — dann fährt er sichtbar in die linke obere Ecke. */
.ubx-skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--wine-700);
  color: var(--text-on-wine);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--dur) var(--ease-out);
}
.ubx-skip:focus { top: 12px; }

main:focus { outline: none; }