/* Grundstil: Schriften (selbst gehostet, OFL – Lizenzen in public/fonts/), Grundelemente, Hilfsklassen.
   Schriftdateien: Fontsource 5.3.0, nur der Latin-Ausschnitt (enthaelt Umlaute, €, Gedankenstrich). *//* Farben, Schriften und Abstaende aus der Vorlage A „Produkt zuerst“ (design/entwuerfe/Main.dc.html).
   Werte 1:1 aus deren Inline-Styles; nur --strich-leise ist dunkler (Kontrast 4,5:1 statt 3:1). */
:root {
  /* Grundfarben */
  --nacht: #0d1829;          /* dunkler Grund: Kopf, Aufruf, Fuss */
  --marine: #152743;         /* Text, dunkle Karten */
  --marine-hell: #1e3563;    /* Flaechen auf Marine */
  --tuerkis: #22cbed;        /* Akzent, Hauptknopf */
  --tuerkis-hell: #a5effc;   /* Akzenttext auf Dunkel */
  --tuerkis-grund: #ecfdff;
  /* Handlungsfarbe (Phil, 01.10.2026): Bernstein NUR fuer gefuellte Knoepfe wie „Demo anfragen“. Die Seite ist sonst
     durchgehend kuehl (Marine, Tuerkis, Petrol, Gruen) – die eine warme Farbe heisst „handeln“. Tuerkis bleibt Akzent
     fuer Kennzeilen, Symbole, Links auf Dunkel und den Fokusrahmen. Schrift Nacht auf Bernstein: 8,3 : 1. */
  --cta: #f59e0b;
  --cta-hover: #fbbf24;
  --cta-schrift: var(--nacht);
  --petrol: #0e6f8f;         /* Links, Kicker */
  --gruen: #059669;
  --gruen-text: #047857;
  --bernstein: #b45309;
  --bernstein-dunkel: #7c4a06;
  --bernstein-grund: #fffbeb;

  /* Flaechen und Linien */
  --grund: #fbfcfd;
  --weiss: #ffffff;
  --flaeche: #f0f4fa;        /* getoente Abschnitte, Icon-Kacheln */
  --flaeche-app: #f4f6f9;
  --flaeche-leiste: #e9eef5;
  --etikett: #dae5f3;
  --linie: #dce3ed;
  --linie-leise: #eef1f6;
  --linie-dunkel: rgba(255, 255, 255, 0.08);

  /* Text */
  --text: var(--marine);
  --text-mittel: #3c4b67;
  --text-leise: #55647c;
  --strich-leise: #667389;
  --auf-dunkel: #b8c6dc;
  --auf-dunkel-leise: #a9b8d0;
  --auf-dunkel-nav: #d5deec;
  --auf-dunkel-hell: #e8edf6;
  --auf-dunkel-fuss: #8494a8;

  /* Schriften */
  --schrift-titel: 'Poppins', system-ui, sans-serif;
  --schrift-text: 'Hanken Grotesk', system-ui, sans-serif;

  /* Masse */
  --inhalt: 1200px;
  --rand: 24px;              /* seitlicher Rand; am Handy 16px */
  --abschnitt: 80px;         /* Abstand oben/unten je Abschnitt (96 bis 01.10.2026; Phil: Seite straffer) */
  --radius-knopf: 8px;
  --radius-karte: 14px;
  --radius-box: 16px;
  --schatten-karte: 0 1px 2px rgba(13, 24, 41, 0.06);
  --schatten-box: 0 20px 50px -24px rgba(13, 24, 41, 0.3);
  --schatten-app: 0 24px 48px -24px rgba(13, 24, 41, 0.28), 0 0 0 1px rgba(13, 24, 41, 0.08);   /* leichter seit 01.10. (UX-Review 21): die Bildunterschrift stand im grauen Schleier */

  /* Schriftgroessen */
  --h1: clamp(34px, 5vw, 64px);
  --h2: clamp(28px, 3.4vw, 44px);
  --lead: clamp(17px, 1.5vw, 20px);
}

@media (max-width: 720px) {
  :root { --rand: 16px; --abschnitt: 52px; }
}

/* 300 traegt nur die „360“ der Marke: block statt swap – die Zahl erscheint gleich richtig, statt erst in der
   Ersatzschrift zu stehen und dann umzuspringen. Die Datei wird in Basis.astro vorgeladen. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: block; src: url('/fonts/poppins-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  /* Kontaktlasche (Kontaktlasche.astro): Der Demo-Block der Startseite meldet seine Sichtbarkeit als View-Timeline
     `--t-demo`; die Lasche hoert darauf und blendet sich aus, solange die beiden Gesichter im Bild sind. Der Name muss am
     gemeinsamen Vorfahren stehen. Reines CSS; Browser ohne Unterstuetzung lassen die Lasche einfach stehen. */
  timeline-scope: --t-alltag, --t-demo;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--schrift-titel); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
strong, b { font-weight: 600; }
a { color: var(--petrol); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--marine); }
img, svg { max-width: 100%; }
/* Auch geordnete Listen mit Klasse (Kette, Phasen, Schritte) – `ol.schritte` stand sonst 40 px eingerueckt
   (UX-Review 01.10., Befund 1). Listen ohne Klasse (Rechtstexte) behalten ihre Nummern. */
ul, ol[class] { margin: 0; padding: 0; list-style: none; }

/* Fokus immer sichtbar – auf hellem und dunklem Grund */
:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 3px; border-radius: 4px; }
.hell :focus-visible { outline-color: var(--petrol); }

/* Innenbreite: 1200px Inhalt, sonst Rand */
.innen { width: 100%; max-width: calc(var(--inhalt) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

/* Nur fuer Vorleseprogramme */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sprungmarke zum Inhalt */
.sprung { position: absolute; left: 16px; top: -80px; z-index: 10; padding: 10px 16px; border-radius: var(--radius-knopf); background: var(--tuerkis); color: var(--nacht); font-weight: 600; text-decoration: none; }
.sprung:focus { top: 12px; }

/* Knoepfe (echte Links) */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border-radius: var(--radius-knopf);
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.knopf-gross { min-height: 52px; padding: 0 26px; font-size: 16px; }
.knopf-akzent { background: var(--cta); color: var(--cta-schrift); }
.knopf-akzent:hover { background: var(--cta-hover); color: var(--cta-schrift); }
.knopf-rahmen-dunkel { border: 1px solid rgba(255, 255, 255, 0.28); color: var(--weiss); }
.knopf-rahmen-dunkel:hover { border-color: var(--weiss); color: var(--weiss); }
.knopf-rahmen { border: 1px solid var(--marine); color: var(--marine); }
.knopf-rahmen:hover { background: var(--marine); color: var(--weiss); }

/* Kicker ueber Ueberschriften */
.kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--petrol); }
.dunkel .kicker { color: var(--tuerkis); }

/* Dezente Platzhalter-Marke fuer Preise, Zahlen und offene Angaben */
.ph-marke {
  display: inline-block; margin-left: .35em; padding: 0 4px; border-radius: 4px;
  font-family: var(--schrift-text); font-size: 10.5px; line-height: 1.5; font-weight: 600; letter-spacing: .04em;
  vertical-align: super; white-space: nowrap; text-transform: none;
  color: var(--bernstein); background: var(--bernstein-grund); border: 1px dashed #e7b36a;
}
/* Paket-Marke: ab welchem Paket ein Punkt dabei ist („ab Growth“, „Enterprise“). Keine Platzhalter-Marke –
   die Angabe bleibt, deshalb ruhig und durchgezogen. Petrol auf Tuerkis-Grund: 5,4:1. */
.paket-marke {
  display: inline-block; margin-left: .5em; padding: 1px 7px; border-radius: 999px;
  font-family: var(--schrift-text); font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: .02em;
  vertical-align: .2em; white-space: nowrap; text-transform: none;
  color: var(--petrol); background: var(--tuerkis-grund); border: 1px solid #bfe6ee;
}
.dunkel .ph-marke { color: #fcd9a0; background: rgba(252, 217, 160, 0.08); border-color: rgba(252, 217, 160, 0.45); }

/* ── Handy: eine linke Kante (Phil, 02.10.2026: mittig und linksbuendig wechselten von Abschnitt zu Abschnitt) ──
   Breit stehen die Abschnittskoepfe mittig ueber breitem, symmetrischem Inhalt. Am Handy ist der Inhalt darunter immer
   linksbuendig, und die Einleitungen laufen ueber vier bis sechs Zeilen – mittig gesetzt liest sich das schlecht, und
   Einstieg und Demo-Block (links, mit Knoepfen und Formular) passten nie dazu. Deshalb dort alles links.
   Gilt nur auf Seiten mit <Basis handyLinks>. Bildunterschriften bleiben mittig: Sie gehoeren zum Bild.
   Umstellen auf „alles mittig“: diesen Block entfernen (und Einstieg, Demo-Block und Einleitungen dafuer kuerzen). */
@media (max-width: 720px) {
  body.handy-links .abschnitt-kopf.zentriert { align-items: flex-start; text-align: left; margin-inline: 0; }
  body.handy-links .ablauf ~ .nachsatz,
  body.handy-links .rollen ~ .allein,
  body.handy-links .abschnitt .fussnote,
  body.handy-links .abschnitt .stand,
  body.handy-links .fakten ~ .hinweis,
  body.handy-links .fragen ~ .mehr, body.handy-links .fragen .mehr { text-align: left; margin-inline: 0; }
  body.handy-links .zielgruppen { align-items: flex-start; }
  body.handy-links .zielgruppen .vor { text-align: left; }
  body.handy-links .preismodelle .schalter-block { align-items: stretch; text-align: left; }
  body.handy-links .preismodelle .schalter { display: flex; }
  body.handy-links .preismodelle .schalter label { flex: 1; min-width: 0; }
}

/* ── Markierter Text in den Farben der Marke (Phil, 02.10.2026) ── */
::selection { background: var(--tuerkis); color: var(--nacht); }

/* ── KEIN weicher Seitenwechsel ──
   Am 02.10.2026 fuer rund zwei Stunden eingebaut (Ueberblenden zwischen den Seiten per CSS) und wieder entfernt: Nach
   einem Wechsel zwischen zwei Seiten zeichnete Chromium (149, mit und ohne Fenster) die neue Seite nicht mehr neu –
   sie stand still und reagierte nicht. Ohne die Regel, oder mit „Bewegung reduzieren“, trat das nicht auf. Die Ursache
   ist nicht geklaert (Verdacht: Zusammenspiel mit den Scroll-Animationen). Nicht wieder einbauen, ohne genau das zu
   testen: nach einem Klick auf einen Menuepunkt pruefen, ob die Seite weiter Bilder zeichnet und auf das Mausrad
   reagiert. */
/* ── Druckansicht (Phil, 02.10.2026) ──────────────────────────────────────────────────────────────────────────
   Wer im Browser „Drucken“ oder „Als PDF sichern“ waehlt, bekommt ein sauberes Blatt statt der Website mit Menue,
   Formular und dunklen Flaechen. Gedacht ist es fuer die Preisseite (Pakete, Vergleich, Onboarding, Vertragsmodelle) –
   Makler leiten so etwas an Partner weiter. Die allgemeinen Regeln gelten fuer jede Seite.
   Einen eigenen Druck-Knopf gibt es nicht: Ohne Skript kann die Seite den Druckdialog nicht oeffnen.

   Zwei Dinge praegen diese Datei:
   - Auf A4 hochkant ist die Seite rund 690 px breit. Die Regeln fuer schmale Bildschirme (bis 720 px) greifen also
     auch im Druck – gewollt bei der Vergleichstabelle, bei den Preisboxen hier wieder aufgehoben (drei nebeneinander).
   - Browser drucken ohne Hintergrundfarben. Dunkle Bloecke mit weisser Schrift waeren leer; sie werden hell mit Rahmen.
   `!important`, weil die Regeln der Bausteine sonst vorgehen. */
.nur-druck { display: none; }

@media print {
  @page { size: A4 portrait; margin: 13mm 12mm 14mm; }
  html { scroll-behavior: auto; }
  body { background: #fff !important; color: #152743; font-size: 13px; }
  .nur-druck { display: block; }

  /* Weg: alles, was auf Papier nichts tut. */
  .sprung, .fortschritt, .nav-breit, .aktionen, .aktionen-handy, .lasche, .nach-oben, footer, .aufruf,
  .knopf, .lupe, video, .schalter, .punkt, .hinweis a, form { display: none !important; }

  /* Kopfzeile: nur der Schriftzug, dunkel auf weiss. Das Zeichen hat einen weissen Bogen und fehlt deshalb. */
  .kopf { position: static !important; background: none !important; border-bottom: 1px solid #b9c4d3 !important; }
  .kopf .zeile { min-height: 0 !important; padding: 0 0 8px !important; }
  .kopf .zeichen { display: none !important; }
  .kopf .marke { color: #152743 !important; font-size: 18px !important; }
  .kopf .zahl { color: #0e6f8f !important; }

  /* Dunkle Bloecke hell. */
  .dunkel, .seitenkopf, .abschnitt, .getoent { background: none !important; }
  .seitenkopf { padding: 14px 0 6px !important; }
  .seitenkopf h1 { color: #152743 !important; font-size: 26px !important; }
  .seitenkopf .lead { color: #3c4b67 !important; font-size: 13px !important; max-width: none !important; }
  .kicker { color: #0e6f8f !important; }
  .abschnitt { padding-block: 6px !important; }
  .innen { padding-inline: 0 !important; max-width: none !important; }
  .stapel, .preismodelle { gap: 16px !important; }

  /* Gewaehltes Vertragsmodell als eine Zeile. */
  .schalter-block { align-items: flex-start !important; text-align: left !important; margin: 0 !important; gap: 2px !important; }
  .schalter-titel { margin: 0 !important; }
  .hinweis { font-size: 13px !important; }

  /* Preisboxen: drei nebeneinander, hell. */
  .boxen { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .box { padding: 12px !important; gap: 8px !important; border: 1px solid #8a97aa !important; background: none !important; box-shadow: none !important; opacity: 1 !important; break-inside: avoid; }
  .box.dunkel { border: 2px solid #152743 !important; }
  .box h3 { font-size: 16px !important; color: #152743 !important; }
  .box .zeichen { display: none !important; }
  .box .etikett { background: none !important; color: #0e6f8f !important; border: 1px solid #0e6f8f; padding: 1px 8px !important; font-size: 10px !important; }
  .box .fuer, .box .pro, .box .vorab, .box .merkmale, .box .merkmale * { color: #3c4b67 !important; font-size: 11.5px !important; line-height: 1.4 !important; }
  .box .pro { min-height: 0 !important; }
  .box .betrag { color: #152743 !important; font-size: 26px !important; }
  .box .merkmale { gap: 4px !important; }
  .fussnote, .stand { font-size: 11.5px !important; text-align: left !important; max-width: none !important; margin: 0 !important; color: #3c4b67 !important; }

  /* Vergleichstabelle: Kopf wiederholt sich je Seite, Zeilen brechen nicht um. */
  .vergleich { gap: 4px !important; }
  .zwischen { font-size: 17px !important; break-after: avoid; }
  .zwischen-text { margin: 0 !important; font-size: 12px !important; break-after: avoid; }
  .leistungen .rahmen { border: 1px solid #8a97aa !important; border-radius: 0 !important; overflow: visible !important; }
  .leistungen thead { display: table-header-group; }
  .leistungen thead th { position: static !important; background: none !important; color: #152743 !important; box-shadow: none !important; border-bottom: 1.5px solid #152743 !important; padding: 6px 2px !important; }
  .leistungen .paket-zeichen { display: none !important; }
  .leistungen tr { break-inside: avoid; }
  .leistungen tbody th[scope='row'] { padding: 4px 8px !important; font-size: 11.5px !important; }
  .leistungen td { padding: 3px 2px !important; background: none !important; }
  .leistungen .gruppe th { padding: 9px 8px 3px !important; break-after: avoid; }
  .legende { font-size: 11px !important; }

  /* Onboarding und Vertragsmodelle. */
  .einrichtung { background: none !important; border: 1px solid #8a97aa !important; padding: 12px !important; break-inside: avoid; }
  .einrichtung * { color: #152743 !important; font-size: 12px !important; line-height: 1.4 !important; }
  .einrichtung .betrag { font-size: 20px !important; }
  .einrichtung ul { gap: 3px !important; }
  .einrichtung li { padding: 0 !important; margin: 0 !important; }
  .einrichtung .zeichen { display: none !important; }
  .vertragsmodelle { gap: 8px !important; break-inside: avoid; }
  .vertragsmodelle .raster { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .vertragsmodelle .karte { padding: 10px !important; gap: 6px !important; border: 1px solid #8a97aa !important; background: none !important; box-shadow: none !important; font-size: 11.5px !important; break-inside: avoid; }
  .vertragsmodelle .zeichen { display: none !important; }
  .vertragsmodelle .name { font-size: 15px !important; }
  .vertragsmodelle .betrag { font-size: 18px !important; }
  .vertragsmodelle .titel { font-size: 17px !important; }
  .vertragsmodelle .hinweis { display: none !important; }

  /* Kontaktzeile am Ende des Blatts. */
  .druck-kontakt { margin-top: 10px; padding-top: 8px; border-top: 1px solid #b9c4d3; font-size: 12px; line-height: 1.5; color: #152743; break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
}
.marke[data-astro-cid-6w6wi4sf] {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -.01em;
  color: var(--weiss);
  white-space: nowrap;
  line-height: 1;
}

.zeichen[data-astro-cid-6w6wi4sf] {
  width: 37px;
  height: 36px;
  flex: none;
}

.klein[data-astro-cid-6w6wi4sf] .zeichen[data-astro-cid-6w6wi4sf] {
  width: 31px;
  height: 30px;
}

.zahl[data-astro-cid-6w6wi4sf] {
  font-weight: 300;
  color: var(--tuerkis);
  margin-left: .2em;
}

.klein[data-astro-cid-6w6wi4sf] {
  font-size: 20px;
}
.kopf[data-astro-cid-pbr5acfz] {
  background: var(--nacht);
  border-bottom: 1px solid var(--linie-dunkel);
  position: sticky;
  top: 0;
  z-index: 20;
}

.zeile[data-astro-cid-pbr5acfz] {
  max-width: calc(var(--inhalt) + 2 * var(--rand));
  margin-inline: auto;
  padding: 10px var(--rand);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
}

.fortschritt[data-astro-cid-pbr5acfz] {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .fortschritt[data-astro-cid-pbr5acfz] {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--tuerkis);
    transform-origin: 0;
    transform: scaleX(0);
    animation-name: lesefortschritt;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: auto;
    animation-timeline: scroll(root);
  }
}

@keyframes lesefortschritt {
  to {
    transform: scaleX(1);
  }
}

.marke-link[data-astro-cid-pbr5acfz] {
  display: inline-flex;
  text-decoration: none;
  padding: 6px 0;
}

@keyframes zeichen-drehung {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .marke-link[data-astro-cid-pbr5acfz].dreht .zeichen {
    animation: .55s cubic-bezier(.3, 0, .2, 1) both zeichen-drehung;
  }
}

.nav-breit[data-astro-cid-pbr5acfz] {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0 4px;
  font-size: 16px;
  font-weight: 500;
}

.nav-breit[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 11px;
}

a[data-astro-cid-pbr5acfz].seite {
  gap: 6px;
}

a[data-astro-cid-pbr5acfz].seite .seiten-pfeil {
  color: var(--tuerkis);
  flex-shrink: 0;
}

.nav-breit[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz].seite {
  margin-left: 8px;
  padding-left: 18px;
  border-left: 1px solid #ffffff2e;
}

.nav-breit[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz], .telefon[data-astro-cid-pbr5acfz] {
  color: var(--auf-dunkel-nav);
  text-decoration: none;
}

.nav-breit[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz]:hover, .telefon[data-astro-cid-pbr5acfz]:hover, .nav-breit[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz][aria-current="page"] {
  color: var(--weiss);
}

.nav-breit[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz][aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--tuerkis);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.aktionen[data-astro-cid-pbr5acfz] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
}

.telefon[data-astro-cid-pbr5acfz] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-height: 44px;
  padding-inline: 12px;
}

.telefon[data-astro-cid-pbr5acfz] svg {
  color: var(--tuerkis);
  flex-shrink: 0;
}

@media (width <= 1260px) {
  .telefon[data-astro-cid-pbr5acfz] span[data-astro-cid-pbr5acfz] {
    display: none;
  }

  .telefon[data-astro-cid-pbr5acfz] {
    padding-inline: 10px;
    border: 1px solid #ffffff47;
    border-radius: var(--radius-knopf);
  }
}

.aktionen-handy[data-astro-cid-pbr5acfz] {
  display: none;
}

.menue-knopf[data-astro-cid-pbr5acfz] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-knopf);
  border: 1px solid #ffffff47;
  color: var(--weiss);
}

.menue-knopf[data-astro-cid-pbr5acfz].zu {
  background: var(--marine-hell);
}

.menue-feld[data-astro-cid-pbr5acfz], .menue-schleier[data-astro-cid-pbr5acfz], .menue-knopf[data-astro-cid-pbr5acfz].zu {
  display: none;
}

.menue-feld[data-astro-cid-pbr5acfz] {
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  top: 65px;
  max-height: calc(100dvh - 65px);
  overflow-y: auto;
  scroll-margin-top: 65px;
  background: var(--nacht);
  border-bottom: 1px solid var(--linie-dunkel);
  padding: 4px var(--rand) 18px;
  flex-direction: column;
  box-shadow: 0 24px 40px -20px #0009;
}

.menue-schleier[data-astro-cid-pbr5acfz] {
  position: fixed;
  z-index: 1;
  inset: 65px 0 0;
  background: #080e1a99;
}

.menue-feld[data-astro-cid-pbr5acfz]:target {
  display: flex;
}

.menue-feld[data-astro-cid-pbr5acfz]:target ~ .menue-schleier[data-astro-cid-pbr5acfz] {
  display: block;
}

.menue-feld[data-astro-cid-pbr5acfz]:target ~ .menue-knopf[data-astro-cid-pbr5acfz].auf {
  display: none;
}

.menue-feld[data-astro-cid-pbr5acfz]:target ~ .menue-knopf[data-astro-cid-pbr5acfz].zu {
  display: inline-flex;
}

.menue-feld[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz]:not(.knopf) {
  color: var(--auf-dunkel-nav);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--linie-dunkel);
}

.menue-feld[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz][aria-current="page"] {
  color: var(--weiss);
}

.menue-kontakt[data-astro-cid-pbr5acfz] {
  margin-top: 26px;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
}

.menue-kontakt[data-astro-cid-pbr5acfz] img[data-astro-cid-pbr5acfz] {
  grid-row: 1 / 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px #ffffff2e;
}

.mk-text[data-astro-cid-pbr5acfz] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 6px;
}

.mk-wofuer[data-astro-cid-pbr5acfz] {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--auf-dunkel-leise);
}

.mk-name[data-astro-cid-pbr5acfz] {
  font-family: var(--schrift-titel);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--weiss);
}

.menue-feld[data-astro-cid-pbr5acfz] .menue-kontakt[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz].mk-weg {
  grid-column: 2;
  justify-content: flex-start;
  gap: 8px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--auf-dunkel-nav);
  font-size: 15px;
  font-weight: 500;
}

.menue-kontakt[data-astro-cid-pbr5acfz] a[data-astro-cid-pbr5acfz].mk-weg svg {
  color: var(--tuerkis);
  flex: none;
}

.telefon-handy[data-astro-cid-pbr5acfz] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-knopf);
  border: 1px solid #ffffff47;
  color: var(--tuerkis);
}

.knopf-handy[data-astro-cid-pbr5acfz] {
  min-height: 44px;
  padding: 0 16px;
}

@media (width <= 1080px) {
  .nav-breit[data-astro-cid-pbr5acfz], .aktionen[data-astro-cid-pbr5acfz] {
    display: none;
  }

  .aktionen-handy[data-astro-cid-pbr5acfz] {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .zeile[data-astro-cid-pbr5acfz] {
    min-height: 64px;
    padding-block: 8px;
    gap: 12px;
  }

  .marke-link[data-astro-cid-pbr5acfz] .marke {
    font-size: 20px;
  }

  .marke-link[data-astro-cid-pbr5acfz] .zeichen {
    width: 31px;
    height: 30px;
  }
}

@media (width <= 440px) {
  .telefon-handy[data-astro-cid-pbr5acfz] {
    display: none;
  }
}

@media (width <= 350px) {
  .zeile[data-astro-cid-pbr5acfz] {
    gap: 8px;
  }

  .marke-link[data-astro-cid-pbr5acfz] .marke {
    font-size: 17.5px;
  }

  .marke-link[data-astro-cid-pbr5acfz] .zeichen {
    width: 27px;
    height: 26px;
  }

  .knopf-handy[data-astro-cid-pbr5acfz] {
    padding: 0 12px;
  }
}
.fuss[data-astro-cid-osws6ng6] {
  background: #0a1322;
  border-top: 1px solid #ffffff1a;
  padding: 64px 0 32px;
}

.oben[data-astro-cid-osws6ng6] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 48px;
}

.marke-block[data-astro-cid-osws6ng6] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 340px;
}

.marke-link[data-astro-cid-osws6ng6] {
  display: inline-flex;
  align-self: flex-start;
  text-decoration: none;
  padding: 6px 0;
}

@keyframes fuss-drehung {
  to {
    transform: rotate(360deg);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .marke-link[data-astro-cid-osws6ng6]:hover .zeichen {
    animation: .7s cubic-bezier(.3, 0, .2, 1) fuss-drehung;
  }
}

.claim[data-astro-cid-osws6ng6] {
  font-family: var(--schrift-titel);
  font-size: 17px;
  font-weight: 500;
  color: var(--weiss);
  line-height: 1.35;
}

.hinweis[data-astro-cid-osws6ng6] {
  font-size: 14px;
  line-height: 1.55;
  color: var(--auf-dunkel-leise);
}

.spalten[data-astro-cid-osws6ng6] {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 80px;
  font-size: 15px;
}

nav[data-astro-cid-osws6ng6], .kontakt[data-astro-cid-osws6ng6] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kontakt[data-astro-cid-osws6ng6] {
  gap: 18px;
  min-width: 240px;
}

h2[data-astro-cid-osws6ng6] {
  font-family: var(--schrift-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--auf-dunkel-hell);
  margin-bottom: 2px;
}

nav[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6], .person[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6] {
  color: var(--auf-dunkel-leise);
  text-decoration: none;
}

nav[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6]:hover, .person[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6]:hover {
  color: var(--weiss);
}

.person[data-astro-cid-osws6ng6] {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.person[data-astro-cid-osws6ng6] .wofuer[data-astro-cid-osws6ng6] {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tuerkis);
}

.person[data-astro-cid-osws6ng6] .name[data-astro-cid-osws6ng6] {
  font-weight: 600;
  color: var(--weiss);
}

.person[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.person[data-astro-cid-osws6ng6] a[data-astro-cid-osws6ng6] svg {
  color: var(--tuerkis);
  flex: none;
}

.unten[data-astro-cid-osws6ng6] {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid #ffffff14;
  font-size: 14px;
  color: var(--auf-dunkel-fuss);
}

@media (width <= 720px) {
  .fuss[data-astro-cid-osws6ng6] {
    padding-top: 48px;
  }

  .spalten[data-astro-cid-osws6ng6] {
    gap: 28px 40px;
  }

  .unten[data-astro-cid-osws6ng6] {
    margin-top: 36px;
  }
}
.lasche[data-astro-cid-pfm3unja] {
  display: none;
}

@media (width >= 1360px) {
  .lasche[data-astro-cid-pfm3unja] {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation-name: lasche-da, lasche-weg;
    animation-timing-function: linear, linear;
    animation-fill-mode: both, none;
    animation-duration: auto, auto;
    animation-timeline: --t-alltag, --t-demo;
    animation-range: entry entry 60%, entry 30% exit;
  }

  @keyframes lasche-da {
    to {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  @keyframes lasche-weg {
    from, to {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
  }

  .griff[data-astro-cid-pfm3unja] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    padding: 10px 0 9px;
    border: 0;
    font: inherit;
    cursor: pointer;
    background: var(--nacht);
    color: var(--weiss);
    text-decoration: none;
    border-radius: 14px 0 0 14px;
    box-shadow: 0 10px 30px -12px #0d18298c, 0 0 0 1px #ffffff14;
    transition: background-color .15s;
  }

  .griff[data-astro-cid-pfm3unja] img[data-astro-cid-pfm3unja] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--tuerkis);
  }

  .griff[data-astro-cid-pfm3unja] span[data-astro-cid-pfm3unja] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
  }

  .griff[data-astro-cid-pfm3unja]:hover, .griff[data-astro-cid-pfm3unja]:focus-visible {
    background: var(--marine);
  }

  .karte[data-astro-cid-pfm3unja] {
    position: fixed;
    inset: auto;
    right: 76px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 300px;
    padding: 20px 22px 22px;
    border-radius: var(--radius-box);
    background: var(--marine);
    color: var(--weiss);
    border: 1px solid var(--marine-hell);
    box-shadow: 0 0 0 1px #ffffff1a, 0 24px 56px -20px #0d182999;
  }

  .karte[data-astro-cid-pfm3unja]:popover-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .karte[data-astro-cid-pfm3unja]::backdrop {
    background: none;
  }

  @supports not selector(:popover-open) {
    .karte[data-astro-cid-pfm3unja] {
      display: none;
    }

    .lasche[data-astro-cid-pfm3unja]:hover .karte[data-astro-cid-pfm3unja], .lasche[data-astro-cid-pfm3unja]:focus-within .karte[data-astro-cid-pfm3unja] {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
  }

  .wofuer[data-astro-cid-pfm3unja] {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--tuerkis);
    margin-bottom: 6px;
    padding-right: 30px;
  }

  .zu[data-astro-cid-pfm3unja] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--auf-dunkel-leise);
    cursor: pointer;
    transition: background-color .15s, color .15s;
  }

  .zu[data-astro-cid-pfm3unja]:hover, .zu[data-astro-cid-pfm3unja]:focus-visible {
    background: #ffffff1a;
    color: var(--weiss);
  }

  .name[data-astro-cid-pfm3unja] {
    font-family: var(--schrift-titel);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--weiss);
  }

  .rolle[data-astro-cid-pfm3unja] {
    font-size: 14.5px;
    color: var(--auf-dunkel-leise);
  }

  .wege[data-astro-cid-pfm3unja] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .karte[data-astro-cid-pfm3unja] a[data-astro-cid-pfm3unja] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #ffffff38;
    color: var(--weiss);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    transition: border-color .15s, background-color .15s;
  }

  .karte[data-astro-cid-pfm3unja] a[data-astro-cid-pfm3unja] svg {
    color: var(--tuerkis);
    flex: none;
  }

  .karte[data-astro-cid-pfm3unja] a[data-astro-cid-pfm3unja]:hover, .karte[data-astro-cid-pfm3unja] a[data-astro-cid-pfm3unja]:focus-visible {
    border-color: var(--tuerkis);
    background: #22cbed14;
    color: var(--weiss);
  }

  .lasche[data-astro-cid-pfm3unja]:has(.karte:popover-open) .griff[data-astro-cid-pfm3unja] {
    background: var(--marine);
  }

  @media (prefers-reduced-motion: reduce) {
    .griff[data-astro-cid-pfm3unja] {
      transition: none;
    }
  }
}
.nach-oben[data-astro-cid-wmt32pkk] {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 14;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nacht);
  color: var(--tuerkis);
  text-decoration: none;
  border: 1px solid #fff3;
  box-shadow: 0 10px 28px -10px #0d182999;
  transition: background-color .15s, color .15s;
}

.nach-oben[data-astro-cid-wmt32pkk]:hover {
  background: var(--marine);
  color: var(--weiss);
}

@supports (animation-timeline: scroll()) {
  .nach-oben[data-astro-cid-wmt32pkk] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation-name: nach-oben-da;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: auto;
    animation-timeline: scroll(root);
    animation-range: 600px 900px;
  }

  @keyframes nach-oben-da {
    to {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
}

@media (width >= 1100px) {
  .nach-oben[data-astro-cid-wmt32pkk] {
    right: 24px;
    bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nach-oben[data-astro-cid-wmt32pkk] {
    transition: none;
  }
}