/* h-aero Buchungs-Panel — eigenes CSS mit Präfix hb- (E4), unabhängig vom Tailwind-Build.
   Farben/Schrift aus content/globals/(Sprache)/theme.yaml + tailwind.config.js der Homepage.
   Zwei Betriebsarten: Panel (Desktop ab 1024 px, Griff am rechten Rand) und Inline (Buchungsseite, Klasse hb-inline).
   Achtung: nie "Sternchen-Schrägstrich" in Pfaden hier im Kommentar — beendet ihn und verschluckt die erste Regel. */
.hb-root {
  --hb-primary:#46AC33; --hb-light:#E8E8E8; --hb-middle:#999999; --hb-dark:#313131; --hb-weiss:#ffffff;
  --hb-breite: min(480px, 36vw);
  font-family: "Asap", sans-serif; color: var(--hb-dark); font-size: 15px; line-height: 1.45;
}
.hb-root *, .hb-root *::before, .hb-root *::after { box-sizing: border-box; }
.hb-root [hidden] { display: none !important; }   /* sonst überschreibt display:flex das hidden-Attribut (Befund Prototyp 30.09.) */
.hb-root p, .hb-root label, .hb-root input, .hb-root select, .hb-root textarea, .hb-root button { font-family: inherit; }
.hb-root a { color: inherit; }

/* Griff am rechten Rand (geschlossen) */
.hb-griff {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 60;
  writing-mode: vertical-rl; padding: 18px 10px;
  background: var(--hb-primary); color: var(--hb-weiss); border: 0; border-radius: 10px 0 0 10px;
  font: 600 15px "Asap", sans-serif; letter-spacing: .02em; cursor: pointer; box-shadow: -2px 2px 10px rgba(0,0,0,.25);
}
.hb-root.hb-offen .hb-griff { display: none; }

/* Klingeln: kurzer Ausschlag wie ein Telefon (A3), zwei Zyklen à 0,4 s */
@keyframes hb-klingeln {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  12.5%, 62.5% { transform: translateY(-50%) translateX(-4px); }
  37.5%, 87.5% { transform: translateY(-50%) translateX(3px); }
}
.hb-griff.hb-klingelt { animation: hb-klingeln .4s ease-in-out 2; }

/* Panel */
.hb-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--hb-breite); min-width: 360px; z-index: 60;
  background: var(--hb-weiss); box-shadow: -6px 0 24px rgba(0,0,0,.28);
  display: flex; flex-direction: column; transform: translateX(105%); transition: transform .25s ease;
  visibility: hidden;
}
.hb-root.hb-offen .hb-panel { transform: translateX(0); visibility: visible; }
.hb-kopf { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--hb-dark); color: var(--hb-weiss); }
.hb-titel { margin: 0; font: 600 21px "Baloo Bhai 2", "Asap", sans-serif; color: var(--hb-weiss); }
.hb-zu { background: none; border: 0; color: var(--hb-weiss); font-size: 28px; line-height: 1; cursor: pointer; }

.hb-reiter { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--hb-light); }
.hb-tab { background: var(--hb-weiss); border: 0; border-bottom: 3px solid transparent; padding: 11px 4px; font: 600 14px "Asap", sans-serif; color: var(--hb-middle); cursor: pointer; }
.hb-tab[aria-selected="true"] { color: var(--hb-dark); border-bottom-color: var(--hb-primary); }

.hb-weg { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.hb-info { padding: 14px 18px 4px; }
.hb-info p { margin: 0 0 8px; }
.hb-hinweis { font-size: 13px; color: #555; }

.hb-wahl { display: grid; gap: 10px; padding: 8px 18px 14px; }
.hb-karte { text-align: left; padding: 12px; border: 1px solid var(--hb-light); border-radius: 8px; background: var(--hb-weiss); cursor: pointer; font: inherit; color: var(--hb-dark); }
.hb-karte b { display: block; margin-bottom: 2px; }
.hb-karte span { font-size: 13px; color: #555; }
.hb-karte.hb-aktiv { border-color: var(--hb-primary); box-shadow: 0 0 0 2px rgba(70,172,51,.25); }

/* Kalender (Zoho) */
.hb-zoho { min-height: 460px; padding: 0 0 4px; }
.hb-zoho iframe { display: block; width: 100%; height: 560px; border: 0; }
.hb-zoho-laden { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border: 1px dashed var(--hb-middle); border-radius: 8px; }
.hb-root:not(.hb-inline) .hb-zoho-laden { margin: 0 18px; }

/* Formulare */
.hb-dialog { padding: 14px 18px 18px; border-top: 1px solid var(--hb-light); background: #fafafa; }
.hb-dialog h3 { margin: 0 0 8px; font: 600 17px "Baloo Bhai 2", "Asap", sans-serif; }
.hb-dialog label { display: block; font-size: 13px; margin: 0 0 8px; }
.hb-dialog input:not([type=checkbox]):not([type=radio]), .hb-dialog select, .hb-dialog textarea {
  display: block; width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid #cfcfcf; border-radius: 6px; font: inherit; font-size: 14px; background: var(--hb-weiss); color: var(--hb-dark);
}
.hb-root input[type=checkbox], .hb-root input[type=radio] { width: auto; flex: none; margin: 3px 0 0; padding: 0; }   /* Website-CSS setzt Eingaben sonst auf volle Breite */
.hb-check { display: flex !important; gap: 8px; align-items: flex-start; }
.hb-check span { flex: 1; min-width: 0; }
.hb-schalter { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 8px; font-size: 13px; }
.hb-schalter label { display: flex !important; gap: 6px; align-items: center; margin: 0; font-size: 14px; white-space: nowrap; }
.hb-schalter input[type=radio] { margin: 0; }
.hb-schalter label.hb-aus { opacity: .4; pointer-events: none; }
.hb-knopf { display: inline-block; width: 100%; padding: 10px; border: 0; border-radius: 6px; background: var(--hb-primary); color: var(--hb-weiss) !important; font: 600 15px "Asap", sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.hb-knopf:hover { filter: brightness(.95); }
.hb-knopf[disabled] { opacity: .6; cursor: wait; }
.hb-knopf-schmal { width: auto; padding: 9px 16px; }
.hb-antwort { margin-top: 10px; padding: 10px; border-radius: 6px; background: #eaf6e7; font-size: 13.5px; }
.hb-antwort.hb-fehler { background: #fde2e2; }

/* Fuß */
.hb-fuss { padding: 10px 18px 12px; font-size: 12px; color: var(--hb-middle); border-top: 1px solid var(--hb-light); }
.hb-root:not(.hb-inline) .hb-fuss { padding-right: 92px; }   /* SalesIQ-Blase unten rechts (ca. 60 px + Rand) bleibt frei */
.hb-fuss .hb-knopf { margin-bottom: 8px; }
.hb-fuss a:not(.hb-knopf) { color: var(--hb-middle); text-decoration: underline; }
.hb-fuss .hb-shop { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--hb-primary); text-decoration: none; }
.hb-fuss .hb-shop:hover { text-decoration: underline; }

/* Mobil-Schaltfläche (A4): unten links, damit das SalesIQ-Widget unten rechts frei bleibt */
.hb-mobil {
  display: none; position: fixed; left: 16px; bottom: 16px; z-index: 60;
  padding: 11px 18px; border-radius: 999px; background: var(--hb-primary); color: var(--hb-weiss) !important;
  font: 600 15px "Asap", sans-serif; text-decoration: none; box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
@media (max-width: 1023.98px) {
  .hb-root:not(.hb-inline) .hb-griff, .hb-root:not(.hb-inline) .hb-panel { display: none !important; }
  .hb-root:not(.hb-inline) .hb-mobil { display: inline-block; }
}

/* Hauptnavigation: mit dem Punkt „Demo & Buchung" (Teil D) lief die Leiste bei 1024–1279 px über
   (gemessen 649 statt 640 px) — dort die Innenabstände der Menüpunkte halbieren (Tailwind p-2 → 4 px seitlich). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  header.desktop nav > ul > li { padding-left: 4px; padding-right: 4px; }
}

/* Hotfix Runde 11: ab 1280 px brachen „Über uns", „Demo & Buchung" und der Sprachumschalter um —
   die Nav ist fest w-2/3 (811 px), zehn Punkte brauchen einzeilig 902–968 px. Deshalb: Nav nimmt den
   freien Platz zwischen Logo und Kontakt-Knopf (der nicht schrumpft), Menüpunkte einzeilig mit 6 px
   seitlich (xl:p-3 = 12 px), Umschalter in einer Zeile. ES ist am längsten: 4 px und 15 px Schrift. */
@media (min-width: 1280px) {
  header.desktop .container > a.button-inverted-white { flex-shrink: 0; white-space: nowrap; }
  header.desktop nav { flex: 1 1 auto; width: auto; margin: 0 12px; }
  header.desktop nav > ul > li { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
  header.desktop nav > ul > li:last-child { display: inline-flex; gap: 4px; padding-left: 0; padding-right: 0; }
  html[lang|="es"] header.desktop nav > ul > li { padding-left: 4px; padding-right: 4px; }
  html[lang|="es"] header.desktop nav > ul > li > .menu-root-item { font-size: 15px; }
  html[lang|="es"] header.desktop nav > ul > li:last-child { padding-left: 0; padding-right: 0; }
}

/* Bewegung nur, wenn erwünscht (A3) */
@media (prefers-reduced-motion: reduce) {
  .hb-panel { transition: none; }
  .hb-griff.hb-klingelt { animation: none; }
}

/* Inline-Modus: Buchungsseite (Teil B) — statisch im Seitenfluss, mobil zuerst */
.hb-inline { padding: 0 0 48px; }
.hb-inline .hb-seite { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.hb-inline .hb-einleitung { padding: 32px 0 8px; }
.hb-inline .hb-einleitung h1 { margin: 0 0 10px; font: 600 30px/1.15 "Baloo Bhai 2", "Asap", sans-serif; }
.hb-inline .hb-einleitung p { margin: 0; font-size: 17px; }
.hb-sprung { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 6px; margin: 0; list-style: none; }
.hb-sprung a { display: inline-block; padding: 6px 12px; border: 1px solid var(--hb-primary); border-radius: 999px; font-size: 14px; color: var(--hb-dark); text-decoration: none; }
.hb-sprung a:hover { background: var(--hb-primary); color: var(--hb-weiss); }
.hb-abschnitt { padding: 28px 0 8px; border-top: 1px solid var(--hb-light); margin-top: 20px; scroll-margin-top: 90px; }
.hb-abschnitt h2 { margin: 0 0 8px; font: 600 24px/1.2 "Baloo Bhai 2", "Asap", sans-serif; }
.hb-abschnitt > p { margin: 0 0 14px; max-width: 46em; }
.hb-inline .hb-dialog { border: 1px solid var(--hb-light); border-radius: 8px; }
.hb-inline .hb-zoho { min-height: 0; }
.hb-inline .hb-zoho iframe { height: 620px; border: 1px solid var(--hb-light); border-radius: 8px; }
.hb-raster { display: grid; gap: 18px; }
.hb-raster h3 { margin: 0 0 8px; font: 600 18px "Baloo Bhai 2", "Asap", sans-serif; }
.hb-inline .hb-fuss { margin-top: 28px; padding: 14px 0 0; }
.hb-inline .hb-fuss .hb-knopf { display: none; }
@media (min-width: 900px) {
  .hb-inline .hb-einleitung h1 { font-size: 40px; }
  .hb-raster { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Honeypot: für Menschen unsichtbar, Bots füllen es aus */
.hb-root .hb-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }