/* =================================================================
   UXOVIA · KOPFLEISTE
   Eine Leiste fuer alle Seiten. Vorher trug die Startseite eine eigene
   Fassung mit Aufklappmenue und die Unterseiten eine flache Liste aller
   Seitennamen — gleiche Hoehe, aber unterschiedlicher Aufbau, und jede
   Aenderung musste an zwei Stellen nachgezogen werden.

   Masse am Vorbild ausgemessen: Leiste 81 px, Menuepunkte 14 px / 500 auf
   36 px Hoehe mit 8 x 12 px Polster und 6 px Radius, Knopf ebenso 36 px hoch.
   ================================================================= */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav, 500);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

/* Der Inhalt fluchtet mit dem Seiteninhalt: derselbe 1280-px-Container mit
   demselben Innenabstand. */
.topbar-innen {
  display: flex; align-items: center; gap: 24px;
  width: 100%; max-width: 1280px; margin-inline: auto;
  padding: 20px var(--gutter); min-height: 81px; box-sizing: border-box;
}

.topbar-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.topbar-marke img { display: block; }
.topbar-signet { width: 40px; height: 40px; }
/* width: auto ist Pflicht, seit das <img> ein width-Attribut traegt.
   Ohne das gewinnt der Attributwert und die Marke wird gestaucht,
   sobald die Hoehe hier unten auf 15 oder 13 px faellt. */
.topbar-wortmarke { height: 19px; width: auto; }

/* Marke links, dann Leerraum, dann Menue und Knopf zusammen am rechten Ende:
   der Weg vom letzten Menuepunkt zur Buchung ist damit der kuerzeste. */
.topbar-menue { display: flex; align-items: center; justify-content: flex-end; gap: 28px; flex: 1; }

.topbar-link {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 8px 12px;
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: var(--w-medium);
  color: var(--text-2); text-decoration: none; border-radius: 6px;
  background: none; border: 0; cursor: pointer;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-link:hover { color: var(--text); }
/* Nur der Punkt der geoeffneten Seite traegt eine Flaeche — beim Ueberfahren
   wechselt bewusst nur die Textfarbe, damit nichts aufpoppt. */
.topbar-link.is-active { color: var(--text); background: rgba(255, 255, 255, 0.055); }

/* ─────────────────── Aufklappmenue ─────────────────── */
.topbar-auf { position: relative; }
.topbar-auf > button { gap: 6px; }
.topbar-auf svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease-out, ease); }
.topbar-auf[data-offen="true"] svg { transform: rotate(180deg); }

.topbar-klapp {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); padding-top: 14px; z-index: 70;
}
.topbar-auf[data-offen="true"] .topbar-klapp { display: block; }
.topbar-klapp-inhalt {
  width: 330px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  animation: topbarKlappAuf 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes topbarKlappAuf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-klapp-inhalt { animation: none; }
  .topbar-auf svg { transition: none; }
}

.topbar-klapp a {
  display: block; text-decoration: none; padding: 12px 14px; border-radius: 10px;
  transition: background 0.2s var(--ease-out, ease);
}
.topbar-klapp a:hover { background: var(--surface-2); }
.topbar-klapp b { display: block; font-size: 14px; font-weight: var(--w-medium); color: var(--text); margin-bottom: 3px; }
.topbar-klapp span { display: block; font-size: 12px; color: var(--text-legible); line-height: 1.5; }
.topbar-klapp-fuss { border-top: 1px solid var(--border-faint); margin: 6px 6px 4px; padding: 10px 8px 6px; }
.topbar-klapp-fuss a { padding: 0; font-size: 14px; color: var(--brand-hover); transition: color 0.2s var(--ease-out, ease); }
.topbar-klapp-fuss a:hover { background: none; color: var(--text); }

/* Zwei Beschriftungen fuer einen Knopf: am Rechner die vollstaendige, am
   Telefon die kurze — dort teilt sich der Knopf die Zeile mit Marke und
   Menuetaste. Der jeweils andere Text ist ausgeblendet, nicht nur unsichtbar,
   und wird damit auch nicht vorgelesen. */

/* Die Leiste schrumpfte bis zum 21.08.2026 ab 400px Scrollweg von 81 auf
   62px und wurde dunkler. Entfallen: die Leiste sieht jetzt immer gleich aus,
   egal wo man steht. Damit gibt es auch keinen Sprung mehr beim Zurueck-
   scrollen und keine zwei Hoehen, gegen die Sprungmarken und das Mobilmenue
   rechnen muessten. Der dunklere Ton der verdichteten Fassung bleibt, denn
   die Leiste steht die meiste Zeit ueber Inhalt und nicht ueber dem Hero. */

/* ─────────────────── Menuetaste ───────────────────
   Drei Striche, die sich beim Oeffnen zum Kreuz drehen — kein Austausch
   zweier Zeichen, sondern eine Bewegung. */
.topbar-burger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 44px; height: 44px; flex-shrink: 0;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); cursor: pointer; padding: 0;
}
.topbar-burger span {
  display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
}
.topbar-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.topbar-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ─────────────────── Menue am Telefon ───────────────────
   Der Inhalt entsteht in topbar.js aus der Leiste selbst, damit die acht
   Seiten nichts doppelt tragen. */
.mob-menue {
  position: fixed; inset: 81px 0 0; z-index: calc(var(--z-nav, 500) - 5);
  background: rgba(6, 7, 11, 0.97);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  padding: 22px var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.28s var(--ease-out, ease),
              transform 0.28s var(--ease-out, ease),
              visibility 0s linear 0.28s;
}
.mob-menue.ist-offen {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.28s var(--ease-out, ease),
              transform 0.28s var(--ease-out, ease),
              visibility 0s;
}
/* Solange das Menue offen ist, scrollt nur das Menue. */
html.mobmenue-offen, html.mobmenue-offen body { overflow: hidden; }

.mob-menue a { display: block; text-decoration: none; }
.mob-gruppe {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-legible); margin: 0 0 10px;
}
.mob-fall {
  padding: 14px 16px; margin-bottom: 8px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color 0.2s var(--ease-out, ease);
}
.mob-fall:active { border-color: var(--border-brand, rgba(255, 255, 255, 0.2)); }
.mob-fall b { display: block; font-size: 15px; font-weight: var(--w-medium); color: var(--text); margin-bottom: 3px; }
.mob-fall span { display: block; font-size: 13px; color: var(--text-legible); line-height: 1.5; }

.mob-seiten { margin-top: 22px; }
/* Wie die Anwendungsfaelle darueber eine angefasste Flaeche, nur eine Stufe
   ruhiger: --surface statt --surface-2. Vorher waren es nackte Zeilen mit
   einer haarfeinen Linie darunter, die neben den Karten kaum auffielen und
   nicht nach etwas aussahen, das man antippen kann. Der Winkel rechts sagt,
   dass es weitergeht. */
/* Mit .mob-menue davor, sonst gewinnt `.mob-menue a { display: block }`
   weiter oben und die Beschriftung klebt an der Oberkante statt mittig
   zu sitzen. */
.mob-menue .mob-seite {
  position: relative;
  display: flex; align-items: center; min-height: 56px;
  padding: 0 44px 0 16px; margin-bottom: 8px;
  font-size: 16px; font-weight: var(--w-medium); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.2s var(--ease-out, ease), background 0.2s var(--ease-out, ease);
}
.mob-seite:active { border-color: var(--border-brand, rgba(255, 255, 255, 0.2)); background: var(--surface-2); }
.mob-seite::after {
  content: ""; position: absolute; inset-inline-end: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-inline-end: 2px solid var(--text-legible); border-top: 2px solid var(--text-legible);
  transform: rotate(45deg);
}
.mob-fuss { margin-top: 26px; }
.mob-fuss .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }

/* ─────────────────── Schmale Fenster ───────────────────
   Unter 900 px weichen die Menuepunkte der Menuetaste: nebeneinander waeren
   sie nicht mehr treffsicher, ersatzlos entfallen duerfen sie aber nicht —
   die Anwendungsfaelle sind die Seiten, auf denen entschieden wird.

   Die Grenze lag bis zum 21.08.2026 bei 760px. Zwischen 761 und rund 810px
   standen vier Menuepunkte, die Wortmarke und der Buchungsknopf nebeneinander
   und brauchten mehr Platz als da war: bei 768px, dem Tablet im Hochformat,
   war der Knopf um 23px abgeschnitten und las sich „Gespraech buche".
   900px ist ausserdem die Breite, ab der Hero und ROI-Rechner einspaltig
   werden — eine Grenze statt drei. */
@media (max-width: 900px) {
  .topbar-menue { gap: 10px; }
  .topbar-link:not(.topbar-cta), .topbar-auf { display: none; }
  .topbar-burger { display: flex; }
  /* Der Knopf gibt nicht nach: schrumpft er, bricht „Gespraech buchen" um
     oder wird abgeschnitten. Platz nimmt stattdessen die Wortmarke, siehe
     unten bei 480px. */
  .topbar-cta { flex: none; white-space: nowrap; }
  .mob-menue { inset: 81px 0 0; }
}
/* ─────────────────── Telefon hochkant ───────────────────
   Der Knopf hiess hier bis zum 21.08.2026 nur „Termin". Ausgeschrieben sagt
   er, was man bekommt, und das ist die wichtigste Schaltflaeche der Seite.
   Er passt aber nur, wenn die Wortmarke weicht: bei 320px braucht die Leiste
   sonst 405px und die Menuetaste stand 25px ausserhalb des Bildes.

   Das Signet allein traegt die Marke auf dieser Breite — es ist dasselbe
   Zeichen wie im Browsertab und auf dem Startbildschirm. Ab 481px, also im
   Querformat und auf jedem Tablet, kommt der Schriftzug zurueck.
   Gemessen am 21.08.2026 bei 320, 360, 390 und 430px. */
/* Der Schriftzug bleibt auch auf dem Telefon stehen. Er war am 21.08.2026
   kurz ausgeblendet, weil „Gespraech buchen" sonst nicht danebenpasste — die
   Leiste braucht bei 320px in voller Groesse 415px. Statt die Marke zu
   opfern, schrumpfen jetzt alle drei Teile gemeinsam: Signet, Schriftzug und
   Knopf. Die Menuetaste bleibt bei 44px, sie ist ein Tastziel.
   Gemessen am 21.08.2026 bei 320, 360, 390, 430 und 480px. */
@media (max-width: 560px) {
  .topbar-innen { gap: 10px; padding-inline: 16px; }
  .topbar-marke { gap: 8px; }
  .topbar-signet { width: 32px; height: 32px; }
  .topbar-wortmarke { height: 15px; }
  .topbar-cta { padding: 0 12px; font-size: 13px; }
}
/* Bei 320px blieben mit 10px Polster nur 2px Reserve zum Bildrand. Schrift-
   rendering schwankt zwischen Geraeten um mehr als das, deshalb hier etwas
   mehr Luft — ueber das Polster, nicht ueber die Schriftgroesse: 13px sind
   an einem Knopf schon die Untergrenze. */
@media (max-width: 380px) {
  .topbar-innen { gap: 6px; padding-inline: 12px; }
  .topbar-marke { gap: 6px; }
  .topbar-signet { width: 28px; height: 28px; }
  .topbar-wortmarke { height: 13px; }
  .topbar-cta { padding: 0 8px; }
}

/* Ueber 900 px bleibt das Menue geschlossen, auch wenn es offen stand, als
   das Fenster breiter wurde. */
@media (min-width: 901px) { .mob-menue { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .topbar, .topbar-innen, .topbar-signet,
  .topbar-burger span, .mob-menue { transition: none; }
  .mob-menue.ist-offen { transition: none; }
}

/* ─────────────────── Sprungmarken ───────────────────
   Die Leiste steht fest ueber dem Inhalt. Ohne diesen Abstand landet jedes
   Ankerziel genau darunter und die ersten 82 px sind verdeckt — sichtbar,
   seit die Menuepunkte auf "/#ablauf" zeigen und damit auch von den
   Unterseiten aus springen, wo das sanfte Scrollen der Startseite nicht
   greift. Gilt fuer den nativen Sprung wie fuer scrollIntoView. */
:where(section, .section, [data-anker])[id] {
  scroll-margin-top: calc(81px + 1.25rem);
}