/*
 * HubRaum — Aussehen der gemeinsamen Bausteine
 * ============================================
 * Gehoert zu js/gemeinsam.js und tools/website-prerender/bausteine/.
 * Steht im Kopf JEDER Seite, vor deren eigenem <style>.
 *
 * Die Bausteine tragen ihr Aussehen als style-Attribut (wie der Rest der
 * Seite); hier steht nur, was ein Attribut nicht kann: Zustaende (:hover,
 * :focus-within), Animation und das Umbrechen auf schmalen Bildschirmen.
 * Die Breitenregeln greifen -- wie im Kopf der Startseite -- ueber den Text
 * des style-Attributs, so wie React ihn ausgibt ("padding: 110px 40px" mit
 * Leerzeichen nach dem Doppelpunkt).
 */

/* Wortmarke: „HubRaum ■" bricht nirgends um. */
[data-logo] { flex: none; white-space: nowrap; margin-right: 48px; }

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken. */
section[id] { scroll-margin-top: 76px; }

/* ---- Kopfzeile ---- */
[data-desktop-nav] { flex-wrap: nowrap; }
[data-desktop-nav] a { white-space: nowrap; }
[data-burger] { display: none; }
@media (max-width: 1120px) {
  [data-desktop-nav] { gap: 14px !important; font-size: 13px !important; }
  [data-logo] { margin-right: 24px; }
}

/* ---- Anlass-Menue ----
   Offen per :hover (Maus), :focus-within (Tastatur) oder data-offen (Klick
   auf den Pfeil, fuer Tablets ohne Hover). Die unsichtbare Bruecke ::before
   haelt das Menue offen, waehrend die Maus die Luecke zum Panel ueberquert. */
[data-dropdown-panel] {
  display: none; position: absolute; top: 100%; left: -24px; margin-top: 14px; z-index: 60;
  min-width: 470px; padding: 16px 24px 18px; background: #FBF8F2;
  border: 1px solid #ebe3d5; border-radius: 4px; box-shadow: 0 16px 40px rgba(21,19,14,0.14);
}
[data-dropdown-panel]::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
[data-dropdown]:hover [data-dropdown-panel],
[data-dropdown]:focus-within [data-dropdown-panel],
[data-dropdown][data-offen="true"] [data-dropdown-panel] { display: block; }
/* Private Feiern links ueber die volle Hoehe, Beruf und Abschied rechts. */
[data-dropdown-raster] > :first-child { grid-row: span 2; }
[data-dropdown-panel] a:hover { background: #F2EBDF; }

/* ---- Laufband (nur Startseite) ---- */
@keyframes hr-laufband { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[data-laufband-bahn] { animation-name: hr-laufband; animation-timing-function: linear; animation-iteration-count: infinite; }
[data-laufband]:hover [data-laufband-bahn],
[data-laufband]:focus-within [data-laufband-bahn] { animation-play-state: paused; }
[data-laufband] a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  [data-laufband-bahn] { animation: none !important; transform: none !important; }
  [data-laufband-fenster] { overflow-x: auto !important; scrollbar-width: none; }
  [data-laufband-fenster]::-webkit-scrollbar { display: none; }
  [data-laufband-kopie] { display: none !important; }
}

/* ---- Schmal: Tablet und Telefon ----
   Dieselbe Grenze (960 px) und dieselben Regeln wie im Kopf der Startseite,
   damit Kalender, Formular und Anfahrt auf jeder Seite gleich umbrechen. */
@media (max-width: 960px) {
  [data-desktop-nav] { display: none !important; }
  [data-burger] { display: flex !important; }
  header [style*="padding: 18px 40px"] { padding: 15px 20px !important; }
  [data-krumen] ol { padding: 10px 22px !important; }
  section[style*="padding: 110px 40px"] { padding-left: 22px !important; padding-right: 22px !important; padding-top: 68px !important; padding-bottom: 68px !important; }
  [style*="max-width: 1200px"] { max-width: 100% !important; }
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 0.8fr 1.2fr"] { grid-template-columns: 1fr !important; }
  input, textarea, select { min-width: 0; max-width: 100%; }
  [data-form-grid] { display: block !important; }
  [data-form-grid] > * { margin-top: 18px; }
  [data-form-grid] > *:first-child { margin-top: 0; }
  [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="gap: 72px"] { gap: 40px !important; }
  [style*="font-size: 46px"] { font-size: 29px !important; }
  [style*="font-size: 52px"] { font-size: 38px !important; }
  [style*="padding: 32px 34px"] { padding: 20px 16px !important; }
  [style*="padding: 38px 40px"] { padding: 24px 18px !important; }
  [style*="padding: 44px 42px"] { padding: 30px 24px !important; }
  footer[style*="padding: 64px 40px 40px"] { padding: 52px 22px 32px !important; }
  [data-fuss-spalten] { gap: 32px 40px !important; }
  [data-laufband] { font-size: 13px !important; }
  [data-laufband] > a { padding: 0 12px !important; font-size: 11px !important; }
}
@media (min-width: 961px) {
  [data-mobile-menu] { display: none !important; }
}