/* =========================================================================
   HeimdallMedia v2 — Design-Tokens und Komponenten
   Alles unter .hm-v2 gescopet, damit der bestehende Auftritt unberührt bleibt.
   Bifröst-Konzept: Gold ist der Marken-Akzent, das Spektrum erscheint nur als Licht.
   ========================================================================= */

body.hm-v2 {
  /* Sagt dem Browser, dass die Seite dunkel ist. Ohne das rendert er
     Auswahllisten, Scrollbalken und Autofill in Systemweiss - eigene
     option-Farben greifen dort nicht, die Liste zeichnet das Betriebssystem. */
  color-scheme: dark;

  --bg:        #08080a;
  --surface:   #101014;
  --surface-2: #16161c;
  --border:    #22222a;
  --text:      #ffffff;
  /* Deutlich heller als der Ausgangswert #8e9199. Grauer Text auf dunklem
     Grund war schlecht lesbar - im Zweifel Weiss oder Gold statt Grau. */
  --muted:     #c6cad2;
  /* Markengold, uebernommen von der bestehenden Startseite (dort 48x im Einsatz) */
  --gold:      #daa520;
  --gold-hell: #f2c860;

  /* Bifröst - durchgehend eine warme Goldfamilie: hell, Markengold, Bronze,
     dunkles Kupfer. Kein Farbspektrum, kein Regenbogen. */
  --bif-1: #ffe3a6;
  --bif-2: #daa520;
  --bif-3: #b8792c;
  --bif-4: #6b4517;

  /* Cabinet Grotesk statt Clash Display: offener gezeichnet, auf kleinen
     Bildschirmen deutlich ruhiger zu lesen - behaelt aber Charakter. */
  --font-display: 'Cabinet Grotesk', 'Arial Black', sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-body:    'Satoshi', -apple-system, 'Segoe UI', sans-serif;

  --pad-x: 5vw;
  --axis: 4.5vw;
  --ease: cubic-bezier(.16, 1, .3, 1);

  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  /* Mittlere Strichstaerke statt Regular - heller Text auf dunklem Grund
     wirkt sonst duenner, als er ist. */
  font-weight: 500;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* --- Elementor zaehmen -------------------------------------------------- */
body.hm-v2 .e-con,
body.hm-v2 .e-con-inner { --content-width: 1560px; }
body.hm-v2 h1, body.hm-v2 h2, body.hm-v2 h3, body.hm-v2 h4 {
  font-family: var(--font-display);
  /* Cabinet Grotesk gibt es in 500, 700 und 800 - kein 600. Ohne passenden
     Schnitt rechnet der Browser die Staerke selbst hoch, was unsauber aussieht. */
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}
body.hm-v2 p { margin: 0; }
body.hm-v2 a { color: inherit; text-decoration: none; }
body.hm-v2 :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
body.hm-v2 img { display: block; max-width: 100%; height: auto; }

/* Schreibmarke waehrend die Überschrift getippt wird */
body.hm-v2 .hm-tippt::after {
  content: ''; display: inline-block;
  width: .06em; height: .78em; margin-left: .06em;
  background: var(--gold); vertical-align: baseline;
  animation: hm-caret .7s steps(2) infinite;
}
@keyframes hm-caret { 50% { opacity: 0; } }

/* Serif-Kursiv fuer einzelne betonte Woerter in Ueberschriften */
body.hm-v2 em,
body.hm-v2 .hm-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* --- Typo-Skala --------------------------------------------------------- */
/* Die H1 muss mit Logo, Vorzeile, Fließtext und Schaltflächen zusammen in
   einen Bildschirm passen - deshalb hier bewusst kleiner als im Entwurf. */
body.hm-v2 .hm-h1 .elementor-heading-title { font-size: clamp(2.6rem, 6.4vw, 6.6rem); line-height: .96; letter-spacing: -.035em; }
body.hm-v2 .hm-h2 .elementor-heading-title { font-size: clamp(2.1rem, 5vw, 4.6rem);  line-height: 1.02; letter-spacing: -.03em; }
body.hm-v2 .hm-h2-s .elementor-heading-title { font-size: clamp(1.9rem, 2.9vw, 2.9rem); line-height: 1.05; letter-spacing: -.03em; }
body.hm-v2 .hm-h3 .elementor-heading-title { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; }
body.hm-v2 .hm-lead,
body.hm-v2 .hm-lead .elementor-widget-container { font-size: clamp(1.14rem, 1.4vw, 1.42rem); color: #d2d6dd; max-width: 62ch; }
body.hm-v2 .hm-lead p { color: #d2d6dd; max-width: 62ch; line-height: 1.68; }

/* Hervorhebungen bekommen Farbe statt nur Fettung - Gold liest sich auf
   dunklem Grund besser heraus als ein zweites Weiss. */
body.hm-v2 strong,
body.hm-v2 b,
body.hm-v2 .hm-lead strong,
body.hm-v2 .hm-manifest strong {
  color: var(--gold-hell);
  font-weight: 700;
}

body.hm-v2 .hm-eyebrow .elementor-heading-title {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .22em; color: var(--gold);
}
body.hm-v2 .hm-eyebrow .elementor-heading-title::before {
  content: ''; width: 1.6rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* --- Grain + Vignette + Achse (aus dem FX-Widget) ----------------------- */
/* Liegt zwischen Szene und Inhalt. Ohne diese Ebene kaempft weisse Schrift
   gegen das Gold der Brücke. */
.hm-dim {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(6, 6, 8, .62);
}
.hm-grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hm-vignette {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%);
}
.hm-axis {
  position: fixed; left: var(--axis, 4.5vw); top: 0; bottom: 0; width: 2px;
  z-index: 40; pointer-events: none; background: var(--border);
}
.hm-axis__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--bif-1), var(--bif-2) 34%, var(--bif-3) 68%, var(--bif-4));
  /* Schein ebenfalls in Gold - der frühere blaue Anteil passte nicht zur Marke. */
  box-shadow: 0 0 12px rgba(218, 165, 32, .55), 0 0 30px rgba(184, 121, 44, .3);
}
.hm-axis__head {
  position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; top: calc(100% - 4.5px);
  border-radius: 50%; background: #fff; box-shadow: 0 0 14px 2px currentColor;
}
.hm-cursor {
  position: fixed; z-index: 9999; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); pointer-events: none; mix-blend-mode: difference; opacity: 0;
  transform: translate(-50%, -50%);
  transition: width .3s var(--ease), height .3s var(--ease), opacity .3s;
}
.hm-cursor.is-live { opacity: 1; }
.hm-cursor.is-big { width: 46px; height: 46px; background: rgba(224,172,43,.25); }

/* --- Hero --------------------------------------------------------------- */
/* Die Header-Hoehe traegt hm-fx.js als --hm-header ein. Ohne den Abzug
   ragt der Hero genau um die Header-Hoehe unter die Falz. */
body.hm-v2 #hm-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--hm-header, 0px)) !important;
}
/* Die Brücke liegt hinter der ganzen Seite, nicht nur hinter dem Hero -
   beim Scrollen fährt die Kamera darüber hinweg. */
#hm-bifrost {
  position: fixed; inset: 0; width: 100vw; height: 100svh;
  z-index: 0; pointer-events: none;
}
body.hm-v2 .e-con { position: relative; z-index: 1; }
body.hm-v2 #hm-hero > .e-con-inner { position: relative; z-index: 2; }
/* Das Effekt-Widget darf keinen eigenen Positionierungskontext aufmachen,
   sonst haengt das Canvas an einem Element ohne Hoehe. */
body.hm-v2 #hm-hero .elementor-widget-html { position: static; z-index: 0; }

/* --- Buttons ------------------------------------------------------------ */
body.hm-v2 .hm-btn .elementor-button {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.25rem 2.5rem; border-radius: 999px;
  background: var(--gold); color: #0a0a0c;
  font-family: var(--font-body); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.01em; white-space: nowrap; border: 0;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
body.hm-v2 .hm-btn .elementor-button:hover { box-shadow: 0 8px 40px rgba(224,172,43,.32); }
body.hm-v2 .hm-btn-ghost .elementor-button {
  background: transparent; color: var(--text); border: 1px solid var(--border);
}
body.hm-v2 .hm-btn-ghost .elementor-button:hover {
  border-color: var(--gold); box-shadow: 0 8px 40px rgba(224,172,43,.12);
}

/* --- Manifest ----------------------------------------------------------- */
body.hm-v2 .hm-manifest p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 3.4rem); line-height: 1.22; letter-spacing: -.025em;
  max-width: 22ch; color: var(--text);
}
/* Ausgangsfarbe bewusst nicht zu dunkel: der Satz soll auch lesbar sein,
   bevor ihn das Scrollen aufhellt - oder falls das Skript nicht laeuft. */
body.hm-v2 .hm-manifest .hm-w { color: #55596a; transition: color .5s var(--ease); }
body.hm-v2 .hm-manifest .hm-w.is-on { color: var(--text); }

/* --- Leistungen --------------------------------------------------------- */
body.hm-v2 [id^="hm-svc-"] {
  border-bottom: 1px solid var(--border);
  transition: padding-left .5s var(--ease), background .45s var(--ease);
  cursor: pointer;
}
body.hm-v2 [id^="hm-svc-"]:hover {
  padding-left: 1.5rem;
  background: linear-gradient(90deg, rgba(224,172,43,.07), transparent 60%);
}
body.hm-v2 .hm-svc-name .elementor-heading-title {
  font-size: clamp(1.55rem, 3.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.03em;
  transition: color .35s;
}
body.hm-v2 [id^="hm-svc-"]:hover .hm-svc-name .elementor-heading-title { color: var(--gold); }
body.hm-v2 .hm-svc-desc p { font-size: 1rem; color: var(--muted); max-width: 52ch; }

/* Stichpunkte klappen beim Ueberfahren auf. Sie stehen im Markup und sind
   damit fuer Suchmaschinen und Vorlesehilfen immer vorhanden - nur optisch
   zurueckgehalten, bis die Zeile im Fokus ist. Ersetzt die fruehere
   Bildvorschau: die Referenz-Screenshots stehen weiter unten ohnehin. */
body.hm-v2 .hm-svc-mehr {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease);
}
body.hm-v2 .hm-svc-mehr .elementor-widget-container { overflow: hidden; }
body.hm-v2 .hm-svc-mehr p {
  margin-top: .7rem; font-size: .95rem; color: var(--gold-hell); max-width: 70ch;
}
body.hm-v2 [id^="hm-svc-"]:hover .hm-svc-mehr,
body.hm-v2 [id^="hm-svc-"]:focus-within .hm-svc-mehr {
  grid-template-rows: 1fr; opacity: 1;
}
/* Auf Touch-Geraeten gibt es kein Ueberfahren - dort immer sichtbar. */
@media (hover: none) {
  body.hm-v2 .hm-svc-mehr { grid-template-rows: 1fr; opacity: 1; }
}
body.hm-v2 .hm-svc-idx .elementor-heading-title {
  font-family: var(--font-body); font-size: .74rem; letter-spacing: .18em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Vorschaubild am Cursor */
/* --- Karten: leichte Neigung zum Zeiger ---------------------------------
   Kostet fast nichts (eine CSS-Variable pro Mausbewegung) und gibt den
   Karten Tiefe, ohne dass eine Animationsbibliothek noetig waere. */
body.hm-v2 [id^="hm-case-"] {
  transform: perspective(1100px) rotateX(var(--hm-rx, 0deg)) rotateY(var(--hm-ry, 0deg));
  transition: transform .45s var(--ease), border-color .4s var(--ease);
}
body.hm-v2 [id^="hm-case-"].hm-neigt { transition: transform .09s linear, border-color .4s var(--ease); }
body.hm-v2 [id^="hm-case-"]:hover { border-color: var(--gold); }

/* --- Bilder werden aufgedeckt statt eingeblendet ------------------------- */
body.hm-v2 .hm-case-shot img,
body.hm-v2 .hm-portraet img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease), transform .8s var(--ease);
}
body.hm-v2 .hm-case-shot.is-auf img,
body.hm-v2 .hm-portraet.is-auf img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  body.hm-v2 .hm-case-shot img,
  body.hm-v2 .hm-portraet img { clip-path: none !important; }
  body.hm-v2 [id^="hm-case-"] { transform: none !important; }
}

.hm-peek {
  position: fixed; z-index: 60; width: 320px; aspect-ratio: 4/3; border-radius: 14px;
  overflow: hidden; pointer-events: none; opacity: 0;
  transform: scale(.9) translate(-50%, -50%);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.hm-peek.is-on { opacity: 1; transform: scale(1) translate(-50%, -50%); }
.hm-peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .3s; }
.hm-peek img.is-on { opacity: 1; }

/* --- Referenzen (horizontal) --------------------------------------------
   Der Streifen wandert seitwaerts, waehrend man vertikal scrollt.

   Umgesetzt mit position:sticky statt mit einer gepinnten Scroll-Animation.
   Der Unterschied ist entscheidend: Eine Bibliothek wie ScrollTrigger setzt
   beim Pinnen einen Platzhalter ins Layout und rechnet ihn beim Verlassen
   wieder heraus - dabei entstand der Versatz, der sich ueber drei Anlaeufe
   nicht beheben liess. Hier ist die Sektionshoehe fest im Stylesheet
   hinterlegt (--hm-cases-hoehe, von hm-fx.js einmal gesetzt). Es wird
   nichts eingefuegt und nichts entfernt, also kann auch nichts springen.

   Auf dem Handy wird daraus natives Wischen - erzwungenes Scrollen fuehlt
   sich dort falsch an. */
/* Das Theme setzt scroll-behavior:smooth auf <html>. Bei einer an den
   Scroll gekoppelten Bewegung ist das schaedlich: Das Mausrad wirkt traege
   und der Streifen laeuft der Seite hinterher - was sich wie Ruckeln
   anfuehlt. Weiche Ankerspruenge macht hm-fx.js gezielt selbst. */
html:has(body.hm-v2) { scroll-behavior: auto; }

body.hm-v2 #hm-cases-pin {
  position: relative;
  height: var(--hm-cases-hoehe, 300vh);
}
body.hm-v2 #hm-cases-buehne {
  position: sticky; top: 0;
  /* Ohne diese drei Zeilen wird die Buehne als Flex-Element so breit wie
     ihr Inhalt (gemessen: 8490 px). Ihr overflow greift dann nie, die Karten
     wachsen unbegrenzt und die Seite wird auf dem Handy 47 Bildschirme lang.
     min-width:0 ist der entscheidende Teil - Flex-Elemente schrumpfen sonst
     nicht unter ihre Inhaltsbreite. */
  width: 100%; max-width: 100%; min-width: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
body.hm-v2 #hm-cases-track {
  width: max-content;
  max-width: none;
  will-change: transform;
}
/* Karten behalten ihre Breite, egal was der Elternteil vorgibt. */
body.hm-v2 [id^="hm-case-"] { flex: 0 0 auto; }
body.hm-v2 .hm-case-shot { width: 100%; max-width: 100%; overflow: hidden; }
body.hm-v2 .hm-case-shot img { width: 100%; max-width: 100%; }

/* Rueckfall und Handy: normales Wischen statt gekoppelter Bewegung */
body.hm-v2 #hm-cases-pin.hm-wischen { height: auto !important; }
body.hm-v2 #hm-cases-pin.hm-wischen #hm-cases-buehne {
  position: static; height: auto;
  width: 100%; max-width: 100vw; min-width: 0;
  display: block;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 5vw;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.hm-v2 #hm-cases-pin.hm-wischen #hm-cases-buehne::-webkit-scrollbar { display: none; }
body.hm-v2 #hm-cases-pin.hm-wischen #hm-cases-track {
  transform: none !important;
  display: flex; width: max-content;
}
body.hm-v2 #hm-cases-pin.hm-wischen #hm-cases-track > * { scroll-snap-align: center; }

/* Fortschrittsbalken unter den Karten */
.hm-cases-leiste {
  position: relative; height: 3px; border-radius: 999px;
  background: var(--border); margin: 1.6rem 5vw 0; overflow: hidden;
}
.hm-cases-leiste i {
  position: absolute; inset: 0 auto 0 0; width: 20%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hell));
  border-radius: 999px;
}
.hm-cases-pfeile { display: flex; gap: .6rem; justify-content: flex-end; margin: 1rem 5vw 0; }
.hm-cases-pfeile button {
  width: 3rem; height: 3rem; border: 1px solid var(--border); border-radius: 50%;
  background: transparent; color: var(--text); font-size: 1.2rem; cursor: pointer;
  transition: border-color .25s, background .25s, color .25s, opacity .25s;
}
.hm-cases-pfeile button:hover:not(:disabled) {
  border-color: var(--gold); background: rgba(218, 165, 32, .12); color: var(--gold-hell);
}
.hm-cases-pfeile button:disabled { opacity: .3; cursor: default; }
body.hm-v2 [id^="hm-case-"] {
  position: relative; z-index: 42;
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
body.hm-v2 [id^="hm-case-"]:hover { border-color: var(--gold) !important; transform: translateY(-6px); }
/* Festes Seitenverhaeltnis reserviert den Platz, bevor das Bild da ist.
   Ohne das aendert sich die Hoehe beim Nachladen und die gepinnte
   Referenz-Sektion springt, weil GSAP mit alten Werten gerechnet hat. */
body.hm-v2 .hm-case-shot,
body.hm-v2 .hm-case-shot img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: top center;
}
body.hm-v2 .hm-case-shot img { transition: transform .8s var(--ease); }
body.hm-v2 [id^="hm-case-"]:hover .hm-case-shot img { transform: scale(1.04); }
body.hm-v2 .hm-case-name .elementor-heading-title { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
body.hm-v2 .hm-case-txt p { color: var(--muted); font-size: .95rem; }
body.hm-v2 .hm-tag .elementor-heading-title {
  display: inline-block; padding: .22rem .6rem; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-body); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* --- Zahlen ------------------------------------------------------------- */
body.hm-v2 .hm-stat-n .elementor-heading-title {
  font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(140deg, var(--text) 30%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
body.hm-v2 .hm-stat-l p { font-size: .84rem; color: var(--muted); }

/* --- Prozess ------------------------------------------------------------ */
body.hm-v2 [id^="hm-step-"] { position: relative; }
body.hm-v2 [id^="hm-step-"]::before {
  content: ''; position: absolute; left: -5px; top: .55rem; width: 11px; height: 11px;
  border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
  transition: all .4s var(--ease);
}
body.hm-v2 [id^="hm-step-"].is-on::before {
  border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px rgba(224,172,43,.14);
}
body.hm-v2 #hm-proz-list { position: relative; }
body.hm-v2 #hm-proz-list::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--border);
}
body.hm-v2 .hm-step-n .elementor-heading-title {
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .2em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}

/* --- Terminal ----------------------------------------------------------- */
.hm-term {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #0d0d12, #0a0a0e);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(218, 165, 32, .1);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .84rem;
}
.hm-term__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .95rem; border-bottom: 1px solid var(--border); }
.hm-term__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.hm-term__name { margin-left: .5rem; color: var(--muted); font-size: .74rem; letter-spacing: .06em; }
.hm-term__body { padding: 1.1rem; min-height: 270px; line-height: 1.85; color: #fff; }
.hm-term__l { display: block; white-space: pre-wrap; }
.hm-term__l .k { color: var(--bif-3); }
.hm-term__l .g { color: var(--bif-2); }
.hm-term__l .y { color: var(--gold); }
.hm-term__l .d { color: #80858f; }
.hm-term__cur { display: inline-block; width: 7px; height: 1em; background: var(--bif-2); vertical-align: -2px; animation: hm-blink 1s steps(2) infinite; }
@keyframes hm-blink { 50% { opacity: 0; } }

/* --- FAQ (Toggle-Widget) ------------------------------------------------
   Elementor setzt links ein Pfeil-SVG. Ersetzt durch einen Ring mit Plus
   rechts aussen: beim Oeffnen dreht der senkrechte Strich weg, der Ring
   fuellt sich golden und leuchtet auf. Die Antwort bekommt eine Lichtlinie,
   die von oben mitwaechst - dasselbe Motiv wie die Achse am Seitenrand. */
body.hm-v2 .hm-faq .elementor-toggle-item { border-bottom: 1px solid var(--border); }

body.hm-v2 .hm-faq .elementor-toggle-icon svg,
body.hm-v2 .hm-faq .elementor-toggle-icon i { display: none !important; }

body.hm-v2 .hm-faq .elementor-tab-title {
  position: relative;
  padding: 1.5rem 4.6rem 1.5rem 0 !important;
  border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: -.02em; color: var(--text);
  transition: color .3s var(--ease);
}
body.hm-v2 .hm-faq .elementor-tab-title:hover,
body.hm-v2 .hm-faq .elementor-tab-title.elementor-active { color: var(--gold-hell); }

body.hm-v2 .hm-faq .elementor-toggle-icon {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 2.9rem; height: 2.9rem; margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--border); border-radius: 50%;
  transition: border-color .4s var(--ease), background-color .4s var(--ease),
              box-shadow .5s var(--ease);
}
/* Die beiden Striche des Pluszeichens */
body.hm-v2 .hm-faq .elementor-toggle-icon::before,
body.hm-v2 .hm-faq .elementor-toggle-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 2px; margin: -1px 0 0 -7.5px;
  background: var(--gold-hell); border-radius: 2px;
  transition: transform .45s var(--ease), background-color .4s var(--ease);
}
body.hm-v2 .hm-faq .elementor-toggle-icon::after { transform: rotate(90deg); }

body.hm-v2 .hm-faq .elementor-tab-title:hover .elementor-toggle-icon {
  border-color: var(--gold); background-color: rgba(218, 165, 32, .12);
}

/* Geoeffnet: Ring gefuellt, Plus wird zu Minus */
body.hm-v2 .hm-faq .elementor-tab-title.elementor-active .elementor-toggle-icon {
  border-color: var(--gold); background-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(218, 165, 32, .14), 0 0 26px rgba(218, 165, 32, .32);
}
body.hm-v2 .hm-faq .elementor-tab-title.elementor-active .elementor-toggle-icon::before,
body.hm-v2 .hm-faq .elementor-tab-title.elementor-active .elementor-toggle-icon::after {
  background: #0a0a0c;
}
body.hm-v2 .hm-faq .elementor-tab-title.elementor-active .elementor-toggle-icon::after {
  transform: rotate(0deg);
}

body.hm-v2 .hm-faq .elementor-tab-content {
  position: relative; border: 0;
  padding: 0 4.6rem 1.7rem 1.5rem !important;
  color: var(--muted); max-width: 78ch;
}
body.hm-v2 .hm-faq .elementor-tab-content::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 1.7rem; width: 2px;
  border-radius: 2px; transform-origin: top;
  background: linear-gradient(180deg, var(--gold), rgba(218, 165, 32, 0));
  animation: hm-linie .6s var(--ease) both;
}
@keyframes hm-linie { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 760px) {
  body.hm-v2 .hm-faq .elementor-tab-title { padding-right: 3.6rem !important; }
  body.hm-v2 .hm-faq .elementor-toggle-icon { width: 2.4rem; height: 2.4rem; }
  body.hm-v2 .hm-faq .elementor-toggle-icon::before,
  body.hm-v2 .hm-faq .elementor-toggle-icon::after { width: 13px; margin-left: -6.5px; }
  body.hm-v2 .hm-faq .elementor-tab-content { padding-right: 1rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.hm-v2 .hm-faq .elementor-tab-content::before { animation: none; }
}

/* --- Portrait ------------------------------------------------------------ */
body.hm-v2 .hm-portraet img {
  width: 100%; height: auto; display: block;
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
body.hm-v2 .hm-portraet:hover img { transform: scale(1.03); }
/* Sanfter Übergang in den Seitenhintergrund, damit das Bild nicht als
   harte Kachel im Dunkel klebt. */
body.hm-v2 .hm-portraet { position: relative; }
body.hm-v2 .hm-portraet::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(8, 8, 10, .55));
}

/* --- Header -------------------------------------------------------------- */
body.hm-v2 #hm-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
}
body.hm-v2 #hm-header.is-stuck {
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}
body.hm-v2 .hm-logo img { height: 44px; width: auto; transition: opacity .3s var(--ease); }
body.hm-v2 .hm-logo:hover img { opacity: .75; }
body.hm-v2 .hm-logo-lg img { height: 66px; }

body.hm-v2 .hm-nav-link .elementor-button {
  position: relative; padding: .3rem 0; background: none; border: 0; border-radius: 0;
  color: #d2d6dd; font-family: var(--font-body); font-weight: 600; font-size: 1.02rem;
  transition: color .25s;
}
body.hm-v2 .hm-nav-link .elementor-button::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
body.hm-v2 .hm-nav-link .elementor-button:hover { color: var(--text); }
body.hm-v2 .hm-nav-link .elementor-button:hover::after { transform: scaleX(1); transform-origin: left; }
body.hm-v2 .hm-header-cta .elementor-button { padding: .85rem 1.6rem; font-size: .98rem; }

/* Der Hero startet unter dem Header, weil dieser fixiert ist. */
body.hm-v2 #hm-hero { padding-top: calc(var(--hm-header, 84px) + 60px); }

/* --- Footer -------------------------------------------------------------- */
body.hm-v2 #hm-footer { background: var(--bg); position: relative; z-index: 2; }
body.hm-v2 .hm-footer-titel .elementor-heading-title {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
body.hm-v2 .hm-footer-link .elementor-button {
  padding: 0; background: none; border: 0; border-radius: 0;
  color: #c6cad2; font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  text-align: left; justify-content: flex-start; transition: color .25s;
}
body.hm-v2 .hm-footer-link .elementor-button:hover { color: var(--gold); box-shadow: none; transform: none; }
body.hm-v2 .hm-footer-claim p { color: var(--muted); font-size: .93rem; max-width: 34ch; }
body.hm-v2 .hm-footer-klein p { color: var(--muted); font-size: .82rem; }

@media (max-width: 900px) {
  body.hm-v2 #hm-header .hm-nav-link { display: none; }
  /* Die Kopfzeile ist eine Flex-Reihe aus drei Bloecken mit festen Breiten.
     Auf schmalen Bildschirmen passen die nicht nebeneinander, brechen um
     und der Kopf wird dreizeilig - gemessen 236 px hoch. Hier werden die
     festen Breiten aufgehoben und der Umbruch unterbunden. */
  body.hm-v2 #hm-header { padding: .7rem 1.1rem !important; flex-wrap: nowrap !important; }
  body.hm-v2 #hm-header > .e-con,
  body.hm-v2 #hm-header > .e-con-inner > .e-con {
    width: auto !important; flex: 0 0 auto !important; min-width: 0 !important;
  }
  body.hm-v2 #hm-header > .e-con:last-child,
  body.hm-v2 #hm-header > .e-con-inner > .e-con:last-child { margin-left: auto; }
  body.hm-v2 .hm-logo img { height: 34px; }
  body.hm-v2 .hm-header-cta .elementor-button {
    padding: .62rem 1rem; font-size: .88rem;
  }
}

/* --- Kontaktformular ----------------------------------------------------- */
body.hm-v2 .hm-form .elementor-field-group { margin-bottom: 4px; }
body.hm-v2 .hm-form .elementor-field-label {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .5rem;
}
/* Elementor erzeugt pro Seite eigenes CSS mit sehr hoher Spezifitaet
   (.elementor-1013 .elementor-element-xyz …). Dagegen kommt eine
   Klassenregel nicht an - hier ist !important der ehrliche Weg. */
body.hm-v2 .hm-form .elementor-field-textual,
body.hm-v2 .hm-form input[type="text"],
body.hm-v2 .hm-form input[type="email"],
body.hm-v2 .hm-form input[type="tel"],
body.hm-v2 .hm-form textarea,
body.hm-v2 .hm-form select {
  width: 100% !important;
  padding: .95rem 1.1rem !important;
  background-color: rgba(255, 255, 255, .04) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
body.hm-v2 .hm-form .elementor-field-textual::placeholder { color: #8d929c !important; opacity: 1; }
body.hm-v2 .hm-form .elementor-field-textual:focus {
  border-color: var(--gold) !important;
  background-color: rgba(255, 255, 255, .07) !important;
  box-shadow: 0 0 0 4px rgba(224, 172, 43, .12) !important;
  outline: none !important;
}
/* Elementor gibt dem Auswahlfeld 'elementor-field-textual', nicht
   'elementor-field' - mit dem falschen Selektor greift hier nichts. */
body.hm-v2 .hm-form select {
  appearance: none; cursor: pointer;
  color-scheme: dark;
  /* Eigener Pfeil, weil appearance:none den Standardpfeil entfernt */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23e0ac2b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1.1rem center !important;
  padding-right: 2.6rem !important;
}
body.hm-v2 .hm-form select option,
body.hm-v2 .hm-form select optgroup {
  background-color: #101014; color: #fff;
}
/* Autofill faerbt Felder sonst hellblau ein */
body.hm-v2 .hm-form input:-webkit-autofill,
body.hm-v2 .hm-form input:-webkit-autofill:hover,
body.hm-v2 .hm-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #14141a inset;
  caret-color: #fff;
}
body.hm-v2 .hm-form textarea.elementor-field { min-height: 130px; resize: vertical; }
body.hm-v2 .hm-form .elementor-button,
body.hm-v2 .hm-form button[type="submit"] {
  width: 100%; margin-top: 10px; padding: 1.15rem 1.5rem;
  background-color: var(--gold) !important;
  /* Dunkle Schrift auf Gold. Weiss auf Gold kommt nur auf 2,1:1 und ist
     damit weit unter dem Mindestwert. */
  color: #0a0a0c !important;
  border: 0; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em;
  cursor: pointer; transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
body.hm-v2 .hm-form .elementor-button span,
body.hm-v2 .hm-form .elementor-button-text { color: #0a0a0c !important; }
body.hm-v2 .hm-form .elementor-button:hover {
  box-shadow: 0 10px 46px rgba(224, 172, 43, .36); transform: translateY(-1px);
}
body.hm-v2 .hm-form .elementor-message {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--border); color: var(--text); font-size: .95rem;
}
body.hm-v2 .hm-form .elementor-message-success { border-color: var(--gold); }

/* Die Ankunft hatte zusaetzlich einen eigenen Lichtkegel. Zusammen mit dem
   Tor und der Brücke wurde der Bereich so hell, dass die Formularfelder
   verschwanden - deshalb deutlich zurueckgenommen. */
body.hm-v2 #hm-cta { position: relative; }
body.hm-v2 #hm-cta::before {
  content: ''; position: absolute; left: 50%; top: 30%;
  width: min(90vw, 760px); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255, 217, 138, .05), transparent 62%);
}
/* Eigener Grund hinter dem Formular, damit die Felder immer stehen. */
body.hm-v2 #hm-cta .hm-form {
  position: relative; z-index: 2;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  background: rgba(8, 8, 10, .72);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}

/* --- Terminwahl ---------------------------------------------------------- */

/* Hello Elementors reset.css faerbt JEDEN button bei :hover und :focus
   pink (#cc3366) und gibt ihm einen pinken Rahmen. Das muss fuer alle
   Schaltflaechen im Dialog neutralisiert werden, sonst blitzt die Farbe
   beim Ueberfahren auf. */
.hm-modal button,
.hm-modal button:hover,
.hm-modal button:focus,
.hm-modal button:disabled {
  background-color: transparent;
  color: inherit;
  border-color: var(--border);
  box-shadow: none;
}

.hm-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; }
.hm-modal[hidden] { display: none; }
.hm-modal__hg {
  position: absolute; inset: 0; background: rgba(4, 4, 6, .8);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity .26s var(--ease);
}
.hm-modal.is-auf .hm-modal__hg { opacity: 1; }
.hm-modal__box {
  position: relative; width: min(94vw, 940px); max-height: 90svh; overflow: auto;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: #0d0d12; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7), 0 0 0 1px rgba(224, 172, 43, .1);
  transform: translateY(18px) scale(.98); opacity: 0;
  transition: transform .34s var(--ease), opacity .34s var(--ease);
}
.hm-modal.is-auf .hm-modal__box { transform: none; opacity: 1; }
.hm-modal__zu {
  position: absolute; top: 1rem; right: 1.1rem; width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--border); border-radius: 50%; background: none;
  color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: color .25s, border-color .25s;
}
.hm-modal__zu:hover { color: var(--gold); border-color: var(--gold); }
.hm-modal__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .6rem;
}
.hm-modal__titel {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--text); letter-spacing: -.02em; margin-bottom: .5rem;
}
.hm-modal__hinweis {
  color: var(--muted); font-size: .92rem; margin-bottom: 1.6rem;
  padding: .7rem .95rem; border-left: 2px solid var(--gold);
  background: rgba(224, 172, 43, .06); border-radius: 0 8px 8px 0;
}
.hm-modal__hinweis strong { color: var(--text); }
.hm-modal__spalten { display: grid; grid-template-columns: 1fr 240px; gap: clamp(1.2rem, 2.5vw, 2.2rem); }

.hm-kal__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.hm-kal__monat { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.hm-kal__nav {
  width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 8px;
  background: none; color: var(--text); cursor: pointer; font-size: 1rem; line-height: 1;
  transition: border-color .25s, color .25s, opacity .25s;
}
.hm-kal__nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.hm-kal__nav:disabled { opacity: .25; cursor: default; }
.hm-kal__wochentage, .hm-kal__gitter {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.hm-kal__wochentage {
  margin-bottom: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #d2d6dd; text-align: center;
}
.hm-kal__tag {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 10px; background: none;
  color: var(--text); font-family: var(--font-body);
  font-size: 1.02rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
/* Farbe zeigt an, was anklickbar ist - nicht die Helligkeit.

   Vorher standen freie Tage in Weiß und gesperrte auf #34363d. Auf dunklem
   Grund waren die gesperrten damit praktisch unsichtbar, man konnte nicht
   einmal lesen, welches Datum gemeint ist.

   Jetzt tragen freie Tage das Gold, mit dem auf dieser Seite jede Aktion
   ausgezeichnet ist, und gesperrte stehen in Weiß - lesbar, aber ohne
   Aufforderungscharakter. Dass sie nicht gehen, sagen Schraffur und
   Durchstreichung, nicht mehr die Dunkelheit. */
.hm-modal .hm-kal__tag:not(:disabled) { color: var(--gold-hell); }
.hm-modal .hm-kal__tag:hover:not(:disabled) { border-color: var(--gold); background-color: rgba(224, 172, 43, .12); color: var(--gold-hell); }
.hm-modal .hm-kal__tag.is-aktiv,
.hm-modal .hm-kal__tag.is-aktiv:hover { background-color: var(--gold); border-color: var(--gold); color: #0a0a0c; font-weight: 700; }
.hm-kal__tag.is-knapp:not(.is-aktiv) { border-color: rgba(224, 172, 43, .45); }
/* Spezifischer als die Sammelregel oben, sonst sehen gesperrte Tage
   aus wie freie. */
.hm-modal .hm-kal__tag:disabled { cursor: default; color: var(--text); border-color: #22222a; font-weight: 500; }
/* Vergangene Tage und Wochenenden - gar nicht erst im Angebot. */
.hm-modal .hm-kal__tag.is-aus { opacity: .75; }
/* Ausgebucht: dieselbe Lesbarkeit, aber als belegt erkennbar. */
.hm-modal .hm-kal__tag.is-voll {
  position: relative; color: var(--text); border-color: #22222a;
  background-image: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(255, 255, 255, .07) 4px 8px);
}

.hm-slots__titel {
  font-family: var(--font-display); font-size: 1rem; color: var(--text); margin-bottom: .8rem;
}
.hm-slots__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.hm-slot {
  padding: .62rem .3rem; border: 1px solid var(--border); border-radius: 9px;
  background: none; color: var(--text); font-family: var(--font-body);
  font-size: .95rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: border-color .2s, background .2s;
}
/* Gleiche Aufteilung wie im Kalender: frei ist gold, belegt bleibt weiß
   und lesbar - erkennbar an der Durchstreichung. */
.hm-modal .hm-slot:not(:disabled) { color: var(--gold-hell); }
.hm-modal .hm-slot:hover:not(:disabled) { border-color: var(--gold); background-color: rgba(224, 172, 43, .14); color: var(--gold-hell); }
.hm-modal .hm-kal__nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.hm-modal .hm-modal__zu:hover { border-color: var(--gold); color: var(--gold); }
.hm-modal .hm-slot.is-belegt {
  color: var(--text); cursor: default; text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, .5); font-weight: 500;
  border-color: #22222a; background-color: rgba(255, 255, 255, .03);
}

/* Gewählter Termin über dem Formular */
body.hm-v2 .hm-termin-anzeige {
  display: inline-block; margin-top: .8rem; padding: .55rem 1rem;
  border: 1px solid var(--gold); border-radius: 999px;
  background: rgba(224, 172, 43, .1); color: var(--text); font-size: .9rem; font-weight: 500;
}
/* Ohne diese Zeile gewinnt display:inline-block gegen hidden und es steht
   eine leere Pille unter der Schaltflaeche. */
body.hm-v2 .hm-termin-anzeige[hidden] { display: none; }
/* Das Feld füllt der Kalender - Tippen wäre nur eine Fehlerquelle. */
body.hm-v2 .hm-form input[name="form_fields[termin]"] { pointer-events: none; opacity: .85; }

@media (max-width: 760px) {
  .hm-modal__box { width: 96vw; padding: 1.1rem .9rem 1.3rem; border-radius: 16px; }
  .hm-modal__titel { font-size: 1.45rem; padding-right: 2.2rem; }
  .hm-modal__eyebrow { font-size: .64rem; letter-spacing: .12em; padding-right: 2.2rem; }
  .hm-modal__hinweis { font-size: .86rem; padding: .6rem .75rem; margin-bottom: 1.1rem; }
  .hm-modal__spalten { grid-template-columns: 1fr; gap: 1.4rem; }
  /* Ohne min-width:0 blaeht das breiteste Kind die Rasterspalte auf und
     der Kalender wird breiter als das Fenster. */
  .hm-modal__spalten > * { min-width: 0; }
  .hm-kal__gitter, .hm-kal__wochentage { gap: 4px; }
  .hm-kal__tag { font-size: .95rem; border-radius: 8px; }
  .hm-kal__wochentage { font-size: .62rem; letter-spacing: .06em; }
  .hm-slots__liste { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .hm-slot { padding: .7rem .2rem; font-size: .88rem; }
  .hm-modal__zu { top: .7rem; right: .7rem; }
}

/* --- Rechtstexte (Impressum, Datenschutz) --------------------------------
   Durchgehend weisse Schrift, Verweise in Gold. Rechtstexte werden gelesen,
   nicht ueberflogen - deshalb ruhige Zeilenlaenge und klare Gliederung. */
body.hm-v2 .hm-recht-titel .elementor-heading-title { margin-bottom: .4rem; }

body.hm-v2 .hm-recht-text,
body.hm-v2 .hm-recht-text p,
body.hm-v2 .hm-recht-text li,
body.hm-v2 .hm-recht-text td,
body.hm-v2 .hm-recht-text span {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 78ch;
}
body.hm-v2 .hm-recht-text p { margin: 0 0 1.1rem; }

body.hm-v2 .hm-recht-text h2,
body.hm-v2 .hm-recht-text h3,
body.hm-v2 .hm-recht-text h4 {
  color: #ffffff;
  font-family: var(--font-display);
  margin: 2.4rem 0 .8rem;
  line-height: 1.2;
}
body.hm-v2 .hm-recht-text h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
body.hm-v2 .hm-recht-text h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
body.hm-v2 .hm-recht-text h4 { font-size: 1.1rem; }
body.hm-v2 .hm-recht-text > *:first-child { margin-top: 0; }

body.hm-v2 .hm-recht-text strong,
body.hm-v2 .hm-recht-text b { color: #ffffff; font-weight: 700; }

/* Verweise in Gold, mit Unterstrich der beim Überfahren kräftiger wird */
body.hm-v2 .hm-recht-text a {
  color: var(--gold-hell);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(218, 165, 32, .5);
  word-break: break-word;
  transition: color .25s, box-shadow .25s;
}
body.hm-v2 .hm-recht-text a:hover,
body.hm-v2 .hm-recht-text a:focus-visible {
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--gold);
}

body.hm-v2 .hm-recht-text ul,
body.hm-v2 .hm-recht-text ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
body.hm-v2 .hm-recht-text li { margin-bottom: .45rem; }
body.hm-v2 .hm-recht-text li::marker { color: var(--gold); }

body.hm-v2 .hm-recht-text hr {
  border: 0; height: 1px; background: var(--border); margin: 2.2rem 0;
}
body.hm-v2 .hm-recht-text table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; }
body.hm-v2 .hm-recht-text th,
body.hm-v2 .hm-recht-text td {
  text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border);
}
body.hm-v2 .hm-recht-text th { color: var(--gold-hell); font-weight: 700; }

@media (max-width: 760px) {
  body.hm-v2 #hm-recht { padding-top: 120px !important; }
  body.hm-v2 .hm-recht-text, body.hm-v2 .hm-recht-text p { font-size: 1rem; }
}

/* --- Marquee ------------------------------------------------------------ */
/* Solider Grund, sonst scheint die Brücke durch das Laufband und beides
   überlagert sich unleserlich. */
.hm-marq { border-block: 1px solid var(--border); overflow: hidden; padding: 1.5rem 0; background: var(--bg); }
body.hm-v2 #hm-marquee { position: relative; z-index: 2; background: var(--bg); }
.hm-marq__t { display: flex; gap: 3rem; width: max-content; will-change: transform; }
.hm-marq__t span {
  display: inline-flex; align-items: center; gap: 3rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 3rem); letter-spacing: -.03em;
  white-space: nowrap; color: var(--text);
}
.hm-marq__t i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
/* Umriss-Woerter: Der Strich war in Rahmenfarbe und damit fast unsichtbar.
   Jetzt weiss - lesbar, und der Wechsel zwischen gefuellt und offen bleibt. */
.hm-marq__t .o {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .85);
  text-stroke: 1.4px rgba(255, 255, 255, .85);
}

/* --- Reveals ------------------------------------------------------------ */
body.hm-v2 .hm-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
body.hm-v2 .hm-rv.is-in { opacity: 1; transform: none; }

/* --- Inline-Link --------------------------------------------------------- */
body.hm-v2 .hm-lnk, body.hm-v2 .hm-lead a {
  color: var(--text); box-shadow: inset 0 -1px 0 var(--gold);
  transition: color .3s, box-shadow .3s;
}
body.hm-v2 .hm-lnk:hover, body.hm-v2 .hm-lead a:hover { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  body.hm-v2 { --axis: 1.15rem; --pad-x: 1.35rem; }
  .hm-cursor, .hm-peek { display: none; }
  /* Auf dem Handy bleibt es horizontal - Wischen ist dort die natuerliche
     Geste und spart enorm viel Seitenlaenge. */
  .hm-cases-pfeile { display: none; }

  /* Kartenbreite an den Bildschirm binden. Die 620 px aus dem Seitenaufbau
     sprengen jedes Handy - hier gewinnt die Bildschirmbreite. */
  body.hm-v2 [id^="hm-case-"] {
    width: 84vw !important;
    max-width: 84vw !important;
    flex: 0 0 84vw !important;
  }
  /* Der Einleitungsblock etwas schmaler als die Karten: so schaut die erste
     Karte schon herein und lädt zum Wischen ein. */
  body.hm-v2 #hm-cases-track > .e-con:first-child {
    width: 76vw !important; max-width: 76vw !important; flex: 0 0 76vw !important;
    align-self: flex-start;
  }

  /* Überschriften auf dem Handy weiter setzen. Die enge Laufweite wirkt auf
     grossen Bildschirmen elegant, auf kleinen kleben die Buchstaben. */
  body.hm-v2 .hm-h1 .elementor-heading-title {
    letter-spacing: -.025em;
    line-height: 1.08;
    /* Gemessen statt geschaetzt: Bei 390 px Bildschirm stehen 351 px zur
       Verfuegung, der laengere Satz braucht bei 41,6 px aber 447 px. Damit
       jeder Satz in eine Zeile passt, sind rund 32 px noetig.
       Das !important ist noetig, weil die Grundregel ein clamp-Minimum von
       2,6 rem hat - das gewinnt sonst gegen jeden kleineren Wert. */
    font-size: clamp(1.5rem, 7.9vw, 2rem) !important;
  }
  /* Den Umbruch macht ein <br> im Markup, auf jeder Breite gleich.
     Hier steht bewusst 'inline' und nicht einfach nichts: Frueher stand an
     dieser Stelle display:block. Diese Regel aus der Datei zu streichen
     genuegt nicht, solange das Theme auf dem Server noch die alte Fassung
     ausliefert - eingebettetes CSS kann ueberschreiben, aber nichts
     entfernen. Ohne den ausdruecklichen Wert stuenden auf dem Handy zwei
     Umbrueche uebereinander und damit eine Leerzeile mitten in der
     Ueberschrift. */
  body.hm-v2 .hm-h1 .hm-z { display: inline; }
  /* Die Kopfzeile darueber brach mitten im Ortsnamen um, weil der grosse
     Zeichenabstand sie auf 380 px zog. Enger gesetzt passt sie in eine
     Zeile; bricht sie auf noch schmaleren Geraeten doch, sitzt der
     Trennstrich jetzt auf Hoehe der ersten Zeile statt in der Mitte. */
  body.hm-v2 .hm-eyebrow .elementor-heading-title {
    align-items: flex-start;
    font-size: .66rem; letter-spacing: .13em; line-height: 1.5;
  }
  body.hm-v2 .hm-eyebrow .elementor-heading-title::before {
    width: 1.1rem; margin-top: .5em; flex: 0 0 auto;
  }
  body.hm-v2 .hm-h2 .elementor-heading-title,
  body.hm-v2 .hm-h2-s .elementor-heading-title { letter-spacing: -.01em; line-height: 1.1; }
  body.hm-v2 .hm-svc-name .elementor-heading-title { letter-spacing: -.01em; }
  body.hm-v2 #hm-cases-track { gap: 14px !important; padding-inline: 5vw !important; }
  body.hm-v2 .hm-case-name .elementor-heading-title { font-size: 1.35rem; }
  /* Enger gesetzt: mit 1,7 Zeilenabstand wird jede Karte unnötig hoch. */
  body.hm-v2 .hm-case-txt p { font-size: .93rem; line-height: 1.5; }
  body.hm-v2 .hm-case-shot { aspect-ratio: 16 / 11; }
  body.hm-v2 #hm-cases-pin { padding-block: 40px 10px !important; }
}

/* --- Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.hm-v2 *, body.hm-v2 *::before, body.hm-v2 *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body.hm-v2 .hm-rv { opacity: 1 !important; transform: none !important; }
  body.hm-v2 .hm-manifest .hm-w { color: var(--text) !important; }
  /* Das Canvas bleibt sichtbar.
     Frueher stand hier display:none - wer im Betriebssystem weniger Bewegung
     eingestellt hat, sah die Brücke ueberhaupt nicht mehr, die Seite stand
     vor Schwarz. Die Einstellung heisst "weniger Bewegung", nicht "weniger
     Gestaltung". hm-fx.js zeichnet in diesem Fall genau ein stehendes Bild.
     Nebenwirkung des alten display:none: clientWidth war null, das Canvas
     blieb auf seiner Standardgroesse von 300x150 - dadurch lief auch der
     Rueckfall im Skript ins Leere.

     Der Wert steht hier ausdruecklich und nicht einfach gar nicht: Die alte
     Regel liegt weiterhin im Stylesheet des Themes auf dem Server. Sie aus
     dieser Datei zu streichen genuegt nicht - eingebettetes CSS kann
     ueberschreiben, aber nichts entfernen. */
  body.hm-v2 #hm-bifrost { display: block; }
  body.hm-v2 #hm-cases-pin { scroll-snap-type: none; }
}

/* Hinweis des Formular-Auffangnetzes (siehe hm-fx.js). Erscheint nur, wenn
   Elementors Versand nicht zur Verfuegung steht. */
body.hm-v2 .hm-form-hinweis {
  margin-top: 14px;
  color: var(--gold-hell);
  font-size: .92rem;
  line-height: 1.5;
}

/* --- Einwilligungsbanner (Complianz) ------------------------------------
   Complianz 7 steuert sein Aussehen ueber CSS-Variablen am Banner selbst.
   Die zu setzen ist deutlich haltbarer, als seine Selektoren zu ueberbieten:
   das Plugin rechnet damit, und ein Update verschiebt keine Spezifitaet.
   Nur was keine Variable hat, steht weiter unten als Regel.

   Die Schriftgroessen kommen ab Werk mit 12 px - auf dunklem Grund zu klein.
   Sie liegen jetzt auf der Groesse des uebrigen Fliesstextes. */
body.hm-v2 .cmplz-cookiebanner {
  --cmplz_banner_background_color: #0E0E12;
  --cmplz_banner_border_color: #2A2A33;
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 18px 18px 18px 18px;
  --cmplz_banner_width: 560px;
  --cmplz_text_color: #FFFFFF;

  --cmplz_title_font_size: 18px;
  --cmplz_text_font_size: 14px;
  --cmplz_text_line_height: calc(14px * 1.6);
  --cmplz_button_font_size: 15px;
  --cmplz_link_font_size: 13px;
  --cmplz_category_header_title_font_size: 14px;
  --cmplz_category_body_font_size: 13px;

  --cmplz_hyperlink_color: var(--gold-hell);

  --cmplz_button_accept_background_color: var(--gold);
  --cmplz_button_accept_border_color: var(--gold);
  --cmplz_button_accept_text_color: #0A0A0C;

  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: #3A3A45;
  --cmplz_button_deny_text_color: #FFFFFF;

  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: #3A3A45;
  --cmplz_button_settings_text_color: #FFFFFF;

  --cmplz_button_border_radius: 999px 999px 999px 999px;

  --cmplz_slider_active_color: var(--gold);
  --cmplz_slider_inactive_color: #3A3A45;
  --cmplz_slider_bullet_color: #FFFFFF;
  --cmplz_category_header_always_active_color: var(--gold-hell);

  font-family: var(--font-body);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
}

body.hm-v2 .cmplz-cookiebanner .cmplz-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
}
body.hm-v2 .cmplz-cookiebanner .cmplz-divider { background: #22222A; border: 0; }
body.hm-v2 .cmplz-cookiebanner .cmplz-logo img { max-height: 30px; width: auto; }

body.hm-v2 .cmplz-cookiebanner .cmplz-close { color: #FFF; opacity: .55; }
body.hm-v2 .cmplz-cookiebanner .cmplz-close:hover { opacity: 1; color: var(--gold-hell); }

body.hm-v2 .cmplz-cookiebanner .cmplz-btn {
  font-family: var(--font-body); font-weight: 600;
  padding: .8em 1.4em;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
/* Hello Elementor faerbt in reset.css jedes button:hover pink. Ohne eigene
   Hover-Farben schlaegt das hier durch - dieselbe Falle wie im Terminkalender. */
body.hm-v2 .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  background-color: var(--gold-hell); border-color: var(--gold-hell); color: #0A0A0C;
}
body.hm-v2 .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
body.hm-v2 .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
body.hm-v2 .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
  background-color: rgba(218, 165, 32, .12);
  border-color: var(--gold); color: var(--gold-hell);
}
body.hm-v2 .cmplz-cookiebanner .cmplz-btn:focus-visible,
body.hm-v2 .cmplz-cookiebanner .cmplz-link:focus-visible {
  outline: 2px solid var(--gold-hell); outline-offset: 3px;
}

body.hm-v2 .cmplz-cookiebanner .cmplz-category {
  background: #131318; border: 1px solid #22222A; border-radius: 10px;
}
body.hm-v2 .cmplz-cookiebanner .cmplz-category .cmplz-description { color: var(--muted); }

/* Der kleine Reiter, der nach der Entscheidung unten stehen bleibt. */
body.hm-v2 #cmplz-manage-consent .cmplz-manage-consent {
  background: #0E0E12; color: #FFF;
  border: 1px solid #2A2A33; border-bottom: 0;
  font-family: var(--font-body); font-size: 13px;
}
body.hm-v2 #cmplz-manage-consent .cmplz-manage-consent:hover { color: var(--gold-hell); }

/* --- Leistungsseiten: Karten "Was du bekommst" -------------------------- */
/* Eigene Klassen statt hm-svc-name: Die Leistungsliste auf der Startseite
   ist gross gesetzt, weil sie dort die Hauptrolle spielt. In diesen Karten
   ist die Ueberschrift nur Beschriftung - mit der grossen Schrift sprengte
   sie die Karte und erschlug den Text darunter. */
body.hm-v2 .hm-karte-titel .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; color: var(--text);
}
body.hm-v2 .hm-karte-text p {
  font-size: .95rem; line-height: 1.6; color: var(--muted); max-width: none;
}

/* Fliesstext der Leistungsseiten etwas ruhiger als der Hero-Lead */
body.hm-v2 .hm-fliess p {
  font-size: 1.05rem; line-height: 1.7; color: #d2d6dd; max-width: 62ch;
}
body.hm-v2 .hm-fliess strong { color: var(--text); }

/* --- Referenzkarten anklickbar ------------------------------------------ */
/* Zwei Schritte statt einem: Ein Fingertipp oeffnet den Schleier, der zweite
   fuehrt zur Seite. Auf dem Handy gibt es kein Ueberfahren - ohne diesen
   Zwischenschritt wuesste niemand, dass die Karte ueberhaupt anklickbar ist,
   und ein einzelner Tipp wuerde die Seite unerwartet verlassen. */
body.hm-v2 [id^="hm-case-"][data-hm-url] { cursor: pointer; }

body.hm-v2 .hm-case-schleier {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: rgba(6, 6, 9, .74);
  opacity: 0; pointer-events: none;
  transition: opacity .32s var(--ease);
}
body.hm-v2 [id^="hm-case-"].hm-case-auf .hm-case-schleier { opacity: 1; }
body.hm-v2 [id^="hm-case-"].hm-case-auf {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold) inset, 0 26px 70px rgba(0, 0, 0, .55);
}

body.hm-v2 .hm-case-besuch {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  background: var(--gold); color: #0a0a0c;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  transform: translateY(8px) scale(.97);
  transition: transform .32s var(--ease), background-color .25s var(--ease);
}
body.hm-v2 [id^="hm-case-"].hm-case-auf .hm-case-besuch { transform: none; }
body.hm-v2 .hm-case-besuch::after { content: '↗'; font-size: 1.05em; }

/* Am Zeigergeraet genuegt das Ueberfahren - dort ist die Absicht ohnehin
   sichtbar, und ein Pflicht-Klick zum Aufdecken waere nur im Weg. */
@media (hover: hover) and (pointer: fine) {
  body.hm-v2 [id^="hm-case-"][data-hm-url]:hover .hm-case-schleier { opacity: 1; }
  body.hm-v2 [id^="hm-case-"][data-hm-url]:hover .hm-case-besuch { transform: none; }
}

/* --- Referenz-Streifen: waagerecht, fuer alle gleich -------------------- */
/* Die frueheren Sonderregeln fuer "Bewegung reduziert" entfallen: Es gibt
   keinen scroll-gekoppelten Modus mehr, den man abschalten muesste. Der
   Streifen ist ein normaler Scroll-Kasten, das Rad wird nur umgelenkt. */
body.hm-v2 #hm-cases-pin { height: auto !important; }
body.hm-v2 #hm-cases-buehne { cursor: grab; }
body.hm-v2 #hm-cases-buehne.hm-zieht { cursor: grabbing; scroll-behavior: auto; }
body.hm-v2 #hm-cases-buehne.hm-zieht * { user-select: none; }
body.hm-v2 #hm-cases-buehne:focus-visible {
  outline: 2px solid var(--gold-hell); outline-offset: 4px;
}

/* --- Schaltflächen auf schmalen Schirmen -------------------------------- */
/* white-space:nowrap haelt Beschriftungen auf breiten Schirmen in einer Zeile
   - das ist gewollt. Auf dem Handy laesst es sie aber aus dem Bild laufen:
   "Kürzlich abgeschlossene Projekte ansehen" braucht 435 px, ein iPhone hat
   390. Gemessen ragten drei Schaltflaechen heraus, nicht nur diese eine.

   Deshalb hier: Umbruch erlauben, Breite begrenzen, und die Beschriftung
   mittig setzen, damit zwei Zeilen nicht schief wirken. */
body.hm-v2 .elementor-button { max-width: 100%; }

@media (max-width: 760px) {
  body.hm-v2 .hm-btn .elementor-button,
  body.hm-v2 .hm-btn-ghost .elementor-button {
    white-space: normal;
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 1.05rem 1.4rem;
    font-size: 1.02rem;
    line-height: 1.3;
  }
  /* Der Kopfzeilen-Knopf bleibt klein - er steht neben dem Logo. */
  body.hm-v2 .hm-header-cta .elementor-button {
    width: auto; white-space: nowrap; padding: .7rem 1.1rem; font-size: .9rem;
  }
  /* Knopfreihen untereinander statt nebeneinander. */
  body.hm-v2 .e-con-inner > .e-con.e-flex[class*="elementor-element"] > .hm-btn,
  body.hm-v2 .hm-btn + .hm-btn-ghost { width: 100%; }
}

/* Sehr schmale Geraete (iPhone SE der ersten Reihe, 320 px).
   Rechnung: 320 px minus 2x16 px Rand = 288 px. Das Logo belegt davon 210,
   der Abstand 24 - fuer die Schaltflaeche blieben 54 px. Deshalb hier beides
   verkleinern, statt die Beschriftung umbrechen zu lassen: Ein zweizeiliger
   Knopf neben dem Logo sieht schlechter aus als ein kleinerer. */
@media (max-width: 380px) {
  body.hm-v2 #hm-header { padding-inline: 3vw !important; gap: 10px !important; }
  body.hm-v2 #hm-header .hm-logo img { max-width: 132px; }
  body.hm-v2 .hm-header-cta .elementor-button {
    padding: .6rem .85rem; font-size: .8rem; letter-spacing: -.02em;
  }
}