/* =========================================================
   HypnoX Akademie – gemeinsame Stildatei (hypnox.css)
   Bündelt das Design aller Seiten an einer zentralen Stelle.
   Zusammengeführt am 21.07.2026 aus den bisher einzeln in die
   Seiten eingebauten Stilen. Das Aussehen bleibt unverändert.
   ========================================================= */

/* --- Farbtabelle -----------------------------------------
   Die einzige Stelle, an der die Farben der Website stehen.
   In den Seiten steht ueberall var(--name, #wert): der zweite
   Wert ist nur ein Rueckfall, falls diese Datei einmal nicht
   geladen wird (alter Cache). Geaendert wird HIER.

   Angelegt am 28.08.2026. Die Werte sind unveraendert die
   bisherigen - dieser Schritt aendert die Optik nicht, er macht
   sie steuerbar. Namen sind nach ROLLE vergeben, nicht nach
   Farbton: aus --hx-akzent kann jede Akzentfarbe werden.
   Varianten mit -b/-c/-d sind fast gleiche Toene aus den alten
   Seiten; sie duerfen beim Umgestalten denselben Wert bekommen.
   --------------------------------------------------------- */
:root {
  --hx-akzent: #C9A24D;
  --hx-akzent-tief: #B08D38;
  --hx-akzent-hell: #D4AE5C;
  --hx-akzent-leucht: #EBD199;
  --hx-akzent-leucht-b: #EBD199;
  --hx-akzent-glanz: #F2DFAE;
  --hx-akzent-schatten: #A8812F;
  --hx-akzent-cta: #D4AE5C;
  --hx-akzent-cta-tief: #B08D38;
  --hx-akzent-zart: #E3C482;
  --hx-akzent-blass: #F7EFDD;
  --hx-aktion: #F0A85C;
  --hx-aktion-tief: #E08A38;
  --hx-aktion-2: #E99649;
  --hx-aktion-3: #C9762F;
  --hx-gold: #E5B94E;
  --hx-auf-aktion: #16110A;
  --hx-grund: #16213A;
  --hx-grund-b: #131E36;
  --hx-grund-c: #182642;
  --hx-grund-d: #101A2E;
  --hx-grund-tief: #0B1222;
  --hx-grund-tief-b: #0A1120;
  --hx-flaeche: #1B2A47;
  --hx-flaeche-b: #1D2C4A;
  --hx-flaeche-c: #1C2B48;
  --hx-flaeche-d: #1B2A47;
  --hx-flaeche-e: #1A2844;
  --hx-flaeche-f: #1C2B48;
  --hx-flaeche-hoch: #223256;
  --hx-flaeche-hoch-b: #203053;
  --hx-flaeche-hoch-c: #223256;
  --hx-flaeche-hoch-d: #243458;
  --hx-flaeche-mittel: #263962;
  --hx-flaeche-hell: #2A3D68;
  --hx-neutral: #17161F;
  --hx-neutral-tief: #100F17;
  --hx-schwarz: #000000;
  --hx-weiss: #FAF7F2;
  --hx-weiss-b: #FAF7F2;
  --hx-weiss-c: #FAF7F2;
  --hx-text-hell: #F1ECE3;
  --hx-text-hell-2: #EDE7DC;
  --hx-text-hell-3: #E4DCCE;
  --hx-text-hell-3-b: #E4DCCE;
  --hx-text-hell-4: #DED5C5;
  --hx-text-sekundaer: #D8CFBE;
  --hx-text-sekundaer-b: #D3CAB8;
  --hx-text-sekundaer-c: #D3CAB8;
  --hx-text-sekundaer-d: #D8CFBE;
  --hx-text-sekundaer-2: #CCC3B1;
  --hx-text: #C2B9A7;
  --hx-text-b: #C2B9A7;
  --hx-text-c: #C2B9A7;
  --hx-text-leise: #B6AD9B;
  --hx-text-leise-b: #B6AD9B;
  --hx-text-leiser: #A79E8D;
  --hx-text-still: #A29985;
  --hx-text-still-b: #A29985;
  --hx-text-still-c: #A29985;
  --hx-text-still-2: #8E8575;
  --hx-text-still-3: #877E6F;
  --hx-text-still-3-b: #877E6F;
  --hx-text-matt: #8F8676;
  --hx-platzhalter: #8B8271;
  --hx-text-matt-2: #979082;
  --hx-warn: #C46A6A;
  --hx-warn-hell: #F1B4B4;
  --hx-fehler: #B3261E;
  --hx-whatsapp: #25D366;
  --hx-notiz: #C96442;
  /* Schrift */
  --hx-schrift: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Markenfarben als Zahlentripel, fuer halbtransparente Flaechen */
  --hx-akzent-rgb: 201,162,77;
  --hx-akzent-cta-rgb: 201,162,77;
  --hx-akzent-matt-rgb: 168,129,47;
  --hx-akzent-schatten-rgb: 168,129,47;
  --hx-glanz-rgb: 201,162,77;
  --hx-aktion-rgb: 240,168,92;
  --hx-aktion-2-rgb: 233,150,73;
  --hx-aktion-tief-rgb: 224,138,56;
  --hx-gold-rgb: 229,185,78;
  --hx-grund-rgb: 22,33,58;
  --hx-grund-b-rgb: 19,30,54;
  --hx-grund-tief-rgb: 11,18,34;
  --hx-flaeche-rgb: 27,42,71;
  --hx-flaeche-hell-rgb: 42,61,104;
  --hx-neutral-rgb: 23,22,31;

  /* Kopfzeile - helle Leiste wie auf der Startseite */
  --hx-kopf-rgb: 244,238,228;
  --hx-kopf-linie: rgba(22,33,58,.12);
  --hx-kopf-text: #16213A;
  --hx-kopf-text-leise: rgba(22,33,58,.72);
  --hx-kopf-flaeche: #FFFFFF;
  --hx-auf-gold: #171208;
  --hx-kopf-akzent: #8A6A26;

}

/* --- Grundlagen --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--hx-grund, #121C25); }
::selection { background: var(--hx-akzent, #40B4AB); color: var(--hx-weiss, #FFFFFF); }

/* --- Kopfzeile / mobiles Menü (Burger) --- */
.hx-burger { display: none; }
.hx-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; z-index: 90; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateZ(0); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s; }
/* Menuepunkte nie umbrechen; enge Desktop-Breiten: alles kompakter, damit Login passt */
.hx-nav a { white-space: nowrap; }
@media (max-width: 1240px) {
  .hx-nav { gap: 14px !important; font-size: 13.5px !important; }
  /* Kurzform, damit Menue + Aktions-Button + Login nebeneinander passen */
  .hx-cta-header { font-size: 0 !important; padding: 0 16px !important; }
  .hx-cta-header::before { content: "Erstgespräch"; font-size: 13.5px; }
}
@media (max-width: 1024px) {
  .hx-nav { display: none !important; }
  .hx-cta-header { display: none !important; }
  .hx-login-header { display: none !important; }
  .hx-burger { display: inline-flex !important; }
  .hx-mobile-menu { display: flex !important; }
  #hx-menu-toggle:checked ~ .hx-mobile-menu, .hx-mobile-menu.hx-open { opacity: 1 !important; visibility: visible !important; transform: translateZ(0) !important; pointer-events: auto !important; }
}
@media (max-width: 620px) { .hx-cta-header { font-size: 0 !important; padding: 0 16px !important; } .hx-cta-header::before { content: "Erstgespräch"; font-size: 14px; } }

/* --- Untermenue "Ausbildung" (reines CSS, kein JS) --- */
.hx-drop { position: relative; display: inline-flex; align-items: center; }
.hx-drop > a { display: inline-flex; align-items: center; gap: 5px; }
/* unsichtbare Bruecke, damit der Zeiger den Weg ins Untermenue schafft */
.hx-drop::after { content: ""; position: absolute; top: 100%; left: -16px; right: -16px; height: 18px; }
.hx-drop-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 260px; padding: 8px; background: var(--hx-flaeche-b, #192633); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; box-shadow: 0 26px 64px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.hx-drop:hover .hx-drop-menu, .hx-drop:focus-within .hx-drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.hx-drop-menu a { display: block; padding: 11px 14px; border-radius: 11px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--hx-text-sekundaer, #C9C7D1); text-decoration: none; transition: background .2s ease, color .2s ease; }
.hx-drop-menu a:hover, .hx-drop-menu a:focus-visible { background: rgba(var(--hx-akzent-rgb, 64,180,171),0.14); color: var(--hx-weiss-b, #FDFDFD); }
.hx-drop > a svg { transition: transform .22s ease; flex-shrink: 0; }
.hx-drop:hover > a svg, .hx-drop:focus-within > a svg { transform: rotate(180deg); }

/* --- Sonderbutton Aktion (Orange, damit das Tuerkis dem Erstgespraech-CTA bleibt) --- */
.hx-special { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: linear-gradient(180deg, var(--hx-aktion, #F0A85C) 0%, var(--hx-aktion-tief, #E08A38) 100%); color: var(--hx-auf-aktion, #16110A) !important; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(var(--hx-aktion-tief-rgb, 224,138,56),0.34); transition: filter .2s ease, transform .2s ease; }
.hx-special:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hx-special-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--hx-auf-aktion, #16110A); opacity: .5; flex-shrink: 0; }
@media (max-width: 1240px) { .hx-special { height: 30px; padding: 0 12px; font-size: 12.5px; } }

/* --- Mobiles Menue: Unterpunkte --- */
.hx-mob-sub { padding: 12px 6px 12px 22px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--hx-text-leise-b, #A9A7B4) !important; }

/* --- Haekchen-Listen --- */
.hx-list { list-style: none; margin: 0; padding: 0; }
.hx-list li { position: relative; padding: 0 0 0 26px; margin-bottom: 10px; font-size: 15.5px; line-height: 1.5; color: var(--hx-text, #B5B3BF); }
.hx-list li:last-child { margin-bottom: 0; }
.hx-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312C8B8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* --- Aufklappbare Fragen (details/summary) --- */
.hx-faq { border-bottom: 1px solid rgba(255,255,255,0.09); }
.hx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; position: relative; font-weight: 600; font-size: clamp(16px, 2.1vw, 18px); color: var(--hx-weiss-b, #FDFDFD); }
.hx-faq summary::-webkit-details-marker { display: none; }
.hx-faq p, .hx-faq ul { margin: 0 0 24px; padding-right: 36px; font-size: 16px; line-height: 1.65; color: var(--hx-text-leise, #ABA9B4); }
.hx-faq ul { padding-left: 0; }

/* --- Zwei Abo-Karten nebeneinander --- */
.hx-abos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
@media (max-width: 880px) { .hx-abos { grid-template-columns: 1fr; } }

/* --- Animationen --- */
@keyframes hx-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes hx-spin-rev { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes hx-reveal { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* --- Karten --- */
.hx-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease; }
.hx-card:hover { transform: translateY(-6px); border-color: rgba(var(--hx-akzent-rgb, 64,180,171),0.4) !important; box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--hx-akzent-cta-rgb, 55,154,146),0.05), inset 0 1px 0 rgba(255,255,255,0.06) !important; }

/* --- Produkt-Karten (Shop / Behandlungsseminar) --- */
.hx-prod { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease; }
.hx-prod:hover { transform: translateY(-6px); border-color: rgba(var(--hx-akzent-rgb, 64,180,171),0.4) !important; box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--hx-akzent-cta-rgb, 55,154,146),0.05) !important; }

/* --- Video-Player --- */
.hx-vidwrap { position: relative; }
.hx-playbtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 68px; border: none; border-radius: 999px; background: rgba(var(--hx-akzent-rgb, 64,180,171),0.92); box-shadow: 0 10px 30px rgba(0,0,0,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: transform .2s ease, background .2s ease; }
.hx-playbtn:hover { transform: translate(-50%,-50%) scale(1.08); background: var(--hx-akzent, #40B4AB); }
.hx-playbtn svg { margin-left: 3px; }
.hx-vidwrap.is-playing .hx-playbtn { opacity: 0; pointer-events: none; }
.hx-vidwrap.is-playing:hover .hx-playbtn, .hx-vidwrap.is-playing:focus-within .hx-playbtn { opacity: 1; pointer-events: auto; }

/* --- FAQ-Aufklapper --- */
.hx-faq > summary { list-style: none; }
.hx-faq > summary::-webkit-details-marker { display: none; }
.hx-faq-sign { position: relative; flex-shrink: 0; width: 20px; height: 20px; transition: transform .25s ease; }
.hx-faq-sign::before, .hx-faq-sign::after { content: ""; position: absolute; background: var(--hx-akzent, #40B4AB); border-radius: 2px; }
.hx-faq-sign::before { top: 50%; left: 1px; right: 1px; height: 2px; transform: translateY(-50%); }
.hx-faq-sign::after { left: 50%; top: 1px; bottom: 1px; width: 2px; transform: translateX(-50%); }
.hx-faq[open] .hx-faq-sign { transform: rotate(45deg); }

/* --- FAQ auf schmalen Bildschirmen: Frage oben ausrichten, sauber positionieren --- */
@media (max-width: 620px) {
  .hx-faq > summary { align-items: flex-start !important; gap: 12px !important; padding: 18px 18px !important; font-size: 16px !important; line-height: 1.35; }
  .hx-faq-sign { margin-top: 2px; }
  .hx-faq p { padding-left: 18px !important; padding-right: 18px !important; }
}

/* --- Formularfelder (Kontakt / Partner) --- */
.hx-field { transition: border-color .25s ease, background .25s ease; }
.hx-field:focus { outline: none; border-color: rgba(var(--hx-akzent-rgb, 64,180,171),0.6) !important; background: rgba(var(--hx-akzent-rgb, 64,180,171),0.05) !important; }
.hx-field::placeholder { color: var(--hx-platzhalter, #6A6874); }

/* --- Tour-Termine (Show) --- */
.hx-tour { transition: border-color .3s ease, background .3s ease; }
.hx-tour:hover { border-color: rgba(var(--hx-akzent-rgb, 64,180,171),0.4) !important; background: rgba(var(--hx-akzent-rgb, 64,180,171),0.05) !important; }

/* --- Weitere responsive Umbrüche --- */
@media (max-width: 860px) { .hx-hero-grid { grid-template-columns: 1fr !important; text-align: center; } .hx-hero-portrait { order: -1; margin: 0 auto 8px !important; } .hx-hero-cta { justify-content: center !important; } .hx-hero-meta { justify-content: center !important; } }
@media (max-width: 820px) { .hx-contact-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 780px) { .hx-angebote { grid-template-columns: 1fr !important; } }

/* --- Direktvergleich Seminar / Einzelsitzung --- */
.hx-vgl-lbl { display: none; }
@media (max-width: 760px) {
  .hx-vgl { grid-template-columns: 1fr !important; }
  .hx-vgl-eck, .hx-vgl-head { display: none !important; }
  .hx-vgl-key { padding-top: 20px !important; padding-bottom: 8px !important; font-size: 16px !important; }
  .hx-vgl-lbl { display: inline; color: var(--hx-text-hell, #EDECF2); font-weight: 600; }
}

/* --- Ablauf: vier Karten zweispaltig, auf Mobil einspaltig --- */
@media (max-width: 720px) { .hx-ablauf-2 { grid-template-columns: 1fr !important; } }


/* =========================================================
   KOPFZEILE - helle Leiste (28.08.2026)
   Der Kopf entsteht in hx-header.js mit Stilen direkt am
   Element. Damit die Farben trotzdem hier zentral stehen,
   werden sie an dieser Stelle ueberschrieben - deshalb die
   !important-Angaben. Am Aufbau des Kopfes aendert das nichts.
   ========================================================= */
.hx-kopf { color: var(--hx-kopf-text, #16213A); }
/* Das Logo liegt als weisse Grafik vor; auf heller Leiste wird es dunkel gestellt */
.hx-kopf .hx-logo { filter: brightness(0) saturate(100%); opacity: .88; }
.hx-nav { color: var(--hx-kopf-text-leise, rgba(22,33,58,.72)) !important; }
.hx-nav a { color: var(--hx-kopf-text-leise, rgba(22,33,58,.72)) !important; transition: color .2s ease; }
.hx-nav a:hover { color: var(--hx-kopf-text, #16213A) !important; }
/* hervorgehobener Punkt (Webinar) und die geoeffnete Seite */
.hx-nav a[style*="var(--hx-akzent,"] { color: var(--hx-kopf-akzent, #8A6A26) !important; }
.hx-nav a[style*="var(--hx-weiss-b,"] { color: var(--hx-kopf-text, #16213A) !important; }
.hx-login-header { color: var(--hx-kopf-text-leise, rgba(22,33,58,.72)) !important; }
.hx-login-header:hover { color: var(--hx-kopf-text, #16213A) !important; }
/* Erstgespraech-Knopf: Gold mit dunkler Schrift */
.hx-cta-header { color: var(--hx-auf-gold, #171208) !important;
  box-shadow: 0 8px 24px rgba(var(--hx-akzent-rgb, 201,162,77),.28); }
.hx-cta-header:hover { filter: brightness(1.04); }
/* Untermenue auf heller Leiste */
.hx-drop-menu { background: var(--hx-kopf-flaeche, #FFFFFF) !important;
  border-color: var(--hx-kopf-linie, rgba(22,33,58,.12)) !important;
  box-shadow: 0 24px 56px rgba(22,33,58,.16) !important; }
.hx-drop-menu a { color: var(--hx-kopf-text-leise, rgba(22,33,58,.72)); }
.hx-drop-menu a:hover, .hx-drop-menu a:focus-visible {
  background: rgba(var(--hx-akzent-rgb, 201,162,77),.14);
  color: var(--hx-kopf-akzent, #8A6A26); }
/* Burger */
.hx-burger { border-color: var(--hx-kopf-linie, rgba(22,33,58,.12)) !important;
  background: rgba(22,33,58,.04) !important; }
.hx-burger svg { stroke: var(--hx-kopf-text, #16213A) !important; }
/* Mobiles Menue */
.hx-mobile-menu { background: var(--hx-kopf-flaeche, #FFFFFF) !important;
  border-bottom-color: var(--hx-kopf-linie, rgba(22,33,58,.12)) !important;
  box-shadow: 0 30px 60px rgba(22,33,58,.18) !important; }
.hx-mobile-menu > a { border-bottom-color: var(--hx-kopf-linie, rgba(22,33,58,.10)) !important;
  color: var(--hx-kopf-text, #16213A) !important; }
.hx-mobile-menu > a[style*="var(--hx-akzent,"] { color: var(--hx-kopf-akzent, #8A6A26) !important; }
.hx-mob-sub { color: var(--hx-kopf-text-leise, rgba(22,33,58,.72)) !important; }
.hx-mobile-menu > a:last-child { color: var(--hx-auf-gold, #171208) !important;
  border-bottom: 0 !important; }


/* =========================================================
   HANDY: mehrspaltige Raster untereinander (28.08.2026)
   Die Raster stehen in den Seiten direkt am Element, eine
   Medienabfrage ist dort nicht moeglich. Deshalb hier: unter
   760 px stehen gleichrangige Spalten untereinander, damit auf
   dem Handy nichts gequetscht wird. Symbol-plus-Text-Raster
   (z. B. 60px 1fr) und selbstumbrechende Raster (auto-fit)
   bleiben unberuehrt.
   ========================================================= */
@media (max-width: 760px) {
  [style*="grid-template-columns: 1.02fr 0.98fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 1.3fr 0.7fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 190px"],
  [style*="grid-template-columns: 180px 1fr"],
  [style*="grid-template-columns: 190px 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 300px 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr) !important"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   SHOWSEITE - Freisteller Mr. Yasin im Hero (28.08.2026)
   Das Foto liegt ueber dem dunklen Verlauf und unter der
   Abdunklung. Es ist bewusst gedimmt, damit Titel und Text
   darueber gut lesbar bleiben.
   ========================================================= */
.hx-hero-yasin {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 104%;
  width: auto;
  max-width: none;
  display: block;
  filter: brightness(.46) contrast(1.06) saturate(.82);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hx-hero-yasin { height: 88%; filter: brightness(.40) contrast(1.06) saturate(.82); }
}
@media (max-width: 560px) {
  .hx-hero-yasin { height: 82%; }
}

/* =========================================================
   FUSSLEISTE  (.hx-fuss)
   Erzeugt von werkzeug/footer-verteilen.py aus hx-footer.json.
   Nicht von Hand in den Seiten aendern - tests/validate-footer.py
   bricht den Deploy sonst ab.
   Bewusst nur mit --hx-*-Variablen gebaut, die alle 42 Seiten haben.
   ========================================================= */
.hx-fuss{background:var(--hx-grund-b,#131D27);color:var(--hx-text-still,#8B8894);
  border-top:1px solid rgba(255,255,255,.08)}
.hx-fuss-innen{max-width:1120px;margin:0 auto;padding:clamp(44px,6vw,72px) 24px 30px}
.hx-fuss a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s}
.hx-fuss a:hover,.hx-fuss a:focus-visible{color:var(--hx-akzent,#40B4AB)}
.hx-fuss-logo{height:30px;width:auto;display:block;opacity:.9}

.hx-fuss-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px}
.hx-fuss-marke p{margin:14px 0 0;max-width:30ch;font-size:14.5px;line-height:1.6;
  color:var(--hx-text-matt-2,#56545F)}
.hx-fuss-spalte h4{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hx-text-matt-2,#56545F);margin:0 0 14px}
.hx-fuss-spalte a{display:block;padding:6px 0;font-size:14.5px;opacity:.86}
.hx-fuss-spalte a:hover{opacity:1}

.hx-fuss-unten{display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;margin-top:44px;padding-top:22px;font-size:13px;
  border-top:1px solid rgba(255,255,255,.08);color:var(--hx-text-matt-2,#56545F)}
.hx-fuss-recht{display:flex;flex-wrap:wrap;gap:20px}

.hx-fuss--schlank .hx-fuss-innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:20px;padding-bottom:0}
.hx-fuss--schlank .hx-fuss-recht{font-size:14.5px}
.hx-fuss--schlank .hx-fuss-adresse{max-width:1120px;margin:0 auto;
  padding:22px 24px 32px;font-size:13px;color:var(--hx-text-matt-2,#56545F)}

.hx-fuss--minimal .hx-fuss-innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px;padding:26px 24px;font-size:14.5px}
.hx-fuss--minimal .hx-fuss-adresse{font-size:13px;color:var(--hx-text-matt-2,#56545F)}

@media(max-width:900px){
  .hx-fuss-raster{grid-template-columns:1fr 1fr;gap:26px}
  .hx-fuss-marke{grid-column:1/-1}
}
@media(max-width:560px){
  .hx-fuss-innen{padding-inline:20px}
  .hx-fuss-spalte a{font-size:14px;padding:5px 0}
  .hx-fuss-unten{flex-direction:column;align-items:flex-start;gap:12px}
}
/* Erst auf sehr schmalen Geraeten eine Spalte - zwei Spalten halten die
   Fussleiste am Handy halb so lang. */
@media(max-width:359px){.hx-fuss-raster{grid-template-columns:1fr}}