/* ═════════════════════════════════════════════════════════════════════════
   Seitenweit, 21.09.2026 — sichtbare Desktop-Navigation.

   Unter 1100 px bleibt der zentrale Menüknopf wie bisher. Ab 1100 px ist
   genug Platz zwischen Wortmarke und Kopfaktionen: dann stehen die fünf
   Hauptpunkte direkt im Kopf, an derselben Stelle wie vorher der Knopf,
   also gemessen mittig. Das Overlay-Menü führt dieselben Punkte.
   ═════════════════════════════════════════════════════════════════════════ */
.kopfnav { display: none; }

@media (min-width: 1100px) {
  .header .nav-bars { display: none; }
  .kopfnav {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: clamp(20px, 1.7vw, 30px);
    transform: translate(-50%, -50%);
  }
  .kopfnav a {
    position: relative;
    padding: 12px 1px;
    color: var(--ink, #19191C);
    font: 600 15px/1 var(--sans, Figtree, system-ui, sans-serif);
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
  }
  .kopfnav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    height: 2px;
    border-radius: 1px;
    background: var(--cta, #22C7D6);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .kopfnav a:hover::after,
  .kopfnav a[aria-current="page"]::after { transform: scaleX(1); }
  .kopfnav a:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 4px; border-radius: 2px; }
  [dir="rtl"] .kopfnav a::after { transform-origin: right center; }
}

@media (prefers-reduced-motion: reduce) {
  .kopfnav a::after { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Seitenweit, 22.09.2026 — Wortmarke mit Domain, Sprachwahl rechts.

   1. „acessio.de": das „de" ist Figtree ExtraBold als Kontur (die Wortmarke
      ist dieselbe Schrift, gemessen am Seitenverhältnis des „o"). Gleiche
      Kastenhöhe wie die Wortmarke, Unterkante bündig: damit steht es auf
      derselben Grundlinie. Der cyanfarbene Punkt wird zum Domainpunkt.
   2. Sprachwahl bei den Kopfaktionen, dort wo sie gesucht wird. Am Phone
      steht sie links vom Menüknopf, der ganz außen bleibt.
   ═════════════════════════════════════════════════════════════════════════ */
.brand .brand__de {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: var(--marke-h);
  margin-inline-start: calc(var(--marke-h) * 0.03);
}
[dir="rtl"] .brand .brand__de { margin-inline-start: 0; margin-left: calc(var(--marke-h) * 0.03); }

.header__actions { --marke: 34px; }
.header__actions .sprachwahl { transform: none; }
.header__actions .sprachwahl > summary { height: 40px; }
.header__actions .sprachwahl__liste { inset-inline-start: auto; inset-inline-end: 0; }
/* Unter 861 px blendete global-cd den ganzen Aktionskasten aus (dort stand
   nur der Handlungsaufruf). Jetzt bleibt er für die Sprachwahl sichtbar,
   der Handlungsaufruf fehlt dort weiterhin wie bisher. */
@media (max-width: 860px) {
  .header > .header__actions { display: flex; order: 2; margin-inline-start: auto; gap: 10px; --marke: 30px; }
  .header__actions .nav-cta { display: none; }
  .header__actions .sprachwahl > summary { height: 36px; }
  .header > .nav-bars { order: 3; margin-inline-start: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Footer, 22.09.2026 — Gliederung neu.
   Absender (ein Satz, Anschrift, Bewertung), dann Leistungen, Branchen,
   (Städte & Regionen), acessio. Unten Rechtliches und Sprachen in einer
   Zeile. Am Phone sind die Gruppen aufklappbar (fuss-20260922.js), die
   Links stehen trotzdem im HTML. Farben kommen aus dem Sockel (--fuss-*).
   ═════════════════════════════════════════════════════════════════════════ */
.footer__gliederung--neu { grid-template-columns: minmax(0, 1fr); gap: 0; }
.footer__gliederung--neu .footer__gruppe { min-width: 0; }
.footer__gliederung--neu .footer__gruppe > summary { list-style: none; cursor: default; }
.footer__gliederung--neu .footer__gruppe > summary::-webkit-details-marker { display: none; }
.footer__gliederung--neu .footer__liste { gap: 9px; }
.footer__absender { display: grid; gap: 14px; align-content: start; padding-bottom: 26px; }
.footer__satz { max-width: 30ch; margin: 0; color: var(--fuss-schrift); font-size: 15px; font-weight: 600; line-height: 1.4; }
.footer__adresse { margin: 0; color: var(--fuss-leise); font-size: 14.5px; font-style: normal; line-height: 1.6; }
.footer__adresse a { color: inherit; text-decoration: none; }
.footer__adresse a:hover, .footer__adresse a:focus-visible { color: var(--fuss-schrift); text-decoration: underline; }
.footer__absender .footer__grating { justify-self: start; color: var(--fuss-schrift); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.footer__sockel .footer__marke .brand .brand__de path { fill-opacity: .62; }

@media (max-width: 699px) {
  .footer__gliederung--neu .footer__gruppe:not(.footer__absender) { border-top: 1px solid var(--fuss-linie); }
  .footer__gliederung--neu .footer__gruppe > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin: 0;
    cursor: pointer;
  }
  .footer__gliederung--neu .footer__gruppe > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-inline-end: 4px;
    border-right: 1.6px solid var(--fuss-schrift);
    border-bottom: 1.6px solid var(--fuss-schrift);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 180ms ease;
  }
  .footer__gliederung--neu .footer__gruppe[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .footer__gliederung--neu .footer__gruppe[open] .footer__liste { padding-bottom: 14px; }
  .footer__gliederung--neu .footer__gruppe a { min-height: 40px; }
}
@media (min-width: 700px) {
  .footer__gliederung--neu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px clamp(28px, 3vw, 48px); }
  .footer__gliederung--neu .footer__absender { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (min-width: 960px) {
  .footer__gliederung--vier { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__gliederung--fuenf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
  .footer__gliederung--vier { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer__gliederung--fuenf { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .footer__gliederung--neu .footer__absender { grid-column: auto; }
}

.footer__meta--neu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid var(--fuss-linie);
  font-size: 13.5px;
}
.footer__meta--neu .footer__jahr { order: 3; flex-basis: 100%; text-align: start; }
.footer__recht, .footer__sprachen { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer__recht a, .footer__sprachen a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--fuss-leise);
  text-decoration: none;
}
.footer__recht a:hover, .footer__sprachen a:hover,
.footer__recht a:focus-visible, .footer__sprachen a:focus-visible { color: var(--fuss-schrift); text-decoration: underline; }
.footer__sprachen a[aria-current] { color: var(--fuss-schrift); font-weight: 700; }
@media (max-width: 699px) {
  .footer__recht a, .footer__sprachen a { min-height: 44px; }
}

/* Sprachen im Menü-Overlay: eine ruhige Zeile unter dem Handlungsaufruf.
   Doppelte Klasse, weil die Menüregeln für „.site-menu nav a" sonst greifen
   (große Schrift, rechtsbündiges Raster). */
.site-menu .site-menu__sprachen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: initial;
  gap: 4px 18px;
  margin-top: 22px;
  text-align: center;
}
.site-menu .site-menu__sprachen a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--ink-2, #2B2B2F);
  font: 500 15px/1.2 var(--sans, Figtree, system-ui, sans-serif);
  letter-spacing: 0;
  text-decoration: none;
}
.site-menu .site-menu__sprachen a[aria-current] { color: var(--ink, #19191C); font-weight: 700; }
.site-menu .site-menu__sprachen a:focus-visible { outline: 2px solid var(--ink, #19191C); outline-offset: 2px; }

/* Sprachwahl im Kopf ruhiger: Textknopf ohne Rand, Rand erst beim Überfahren.
   Am Phone steht sie im Menü und im Footer, der Kopf bleibt Marke + Menü. */
.header__actions .sprachwahl > summary { border-color: transparent; }
.header__actions .sprachwahl > summary:hover,
.header__actions .sprachwahl[open] > summary { border-color: var(--line-2); }
.header .brand .brand__de { color: #6B6B72; }
@media (max-width: 760px) {
  .header > .header__actions { display: none; }
  .header > .nav-bars { margin-inline-start: auto; }
}

/* ── Prüfbefunde 22.09.2026 ──────────────────────────────────────────────
   Fokus und Ankersprünge landen nicht mehr unter dem festen Kopf.
   Sanftes Scrollen nur, wenn keine reduzierte Bewegung gewünscht ist. */
html { scroll-padding-top: calc(var(--kopf-hoehe, 90px) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* Fünf Kontaktwege seit 22.09.2026 (WhatsApp dazu). */
@media (min-width: 900px) { .footer__actions { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ═════════════════════════════════════════════════════════════════════════
   Gezeichnet, 22.09.2026 abends (Victor: „im gezeichneten AWGE-Stil …
   Formular und Call-to-Action … einzelne Elemente mit diesem Gezeichneten").
   Gleiche Tusche wie im Shop (shopgen/zeichen.cjs), keine neue Farbe.
   Dehnbare Ränder: SVG mit preserveAspectRatio="none" und nicht skalierten
   Strichen, darum überall gleich dick.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --zg-rand: url(/assets/img/zeichen/knopf-rand.svg);
  /* „an“-Fassungen zeichnen sich alle paar Sekunden neu (SMIL in der Datei). */
  --zg-knopf: url(/assets/img/zeichen/knopf-rand-an.svg);
  --zg-pfeil: url(/assets/img/zeichen/pfeil-an.svg);
  --zg-pfeil-knopf: url(/assets/img/zeichen/pfeil-knopf-an.svg);
  --zg-kreis: url(/assets/img/zeichen/kreis-an.svg);
  --zg-kreis-voll: url(/assets/img/zeichen/kreis-voll-an.svg);
  --zg-linie: url(/assets/img/zeichen/linie-an.svg);
  --zg-nav: url(/assets/img/zeichen/nav-strich-an.svg);
  --zg-feld: url(/assets/img/zeichen/feld-rand.svg);
  --zg-papier: url(/assets/img/zeichen/papier-rand.svg);
  --zg-radius: 16px 26px 18px 24px / 24px 16px 26px 18px;
  /* Knopf oben rechts: Umschlag, durchgestrichen, Pfeil, durchgestrichen, Haken. */
  --zg-navfolge: url(/assets/img/zeichen/nav-folge.svg);
}

/* Knöpfe: unregelmäßige Kante, handgezogener Doppelrand, versetzter Druckschatten. */
:is(.btn--primary, .lp-button) {
  position: relative;
  isolation: isolate;
  border-radius: var(--zg-radius);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 160ms ease;
}
:is(.btn--primary, .lp-button)::before {
  content: "";
  position: absolute;
  inset: -5px -6px -6px -5px;
  z-index: 1;
  background: var(--zg-rand) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.btn--primary { box-shadow: 2px 3px 0 var(--ink, #19191C); }
.lp-button { box-shadow: 4px 5px 0 var(--cta, #22C7D6); }
:is(.btn--primary, .lp-button):hover { transform: translate(-1px, -2px) rotate(-1deg); }
.btn--primary:hover { box-shadow: 4px 5px 0 var(--ink, #19191C); }
.lp-button:hover { box-shadow: 6px 7px 0 var(--cta, #22C7D6); }
:is(.btn--primary, .lp-button):active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink, #19191C); }

/* Textmarker als Pinselzug statt glatter Fläche. */
:root .mk {
  /* inline statt inline-block: dann bekommt jede Zeile ihren eigenen Strich in Textbreite
     (box-decoration-break: clone steht schon in global-cd-20260909.css). */
  display: inline;
  background-color: transparent;
  background-image: url(/assets/img/zeichen/marker-cyan.svg);
  /* Zeilenweise wiederholt: bei zwei Zeilen bekommt jede ihren eigenen Strich,
     statt dass der ganze Block eingefärbt wird. */
  /* 28.09.2026: no-repeat statt repeat-y. Die nach oben wiederholte Kachel lugte als dünner
     Streifen über dem Wort hervor (Victor: „dieser Strich oben"). Mehrzeilig malt
     box-decoration-break: clone je Zeile trotzdem einen eigenen Strich. */
  background-repeat: no-repeat;
  background-position: 0 0.2em;
  background-size: 100% 0.96em;
}
:root .mk--creme { background-image: url(/assets/img/zeichen/marker-lila.svg); }
/* Branchen-Hero: dort stand .mk auf inline-block, damit die alte Fläche keine Unterlängen
   verdeckt. Der gezeichnete Strich wird pro Zeile gemalt, die Ausnahme ist nicht mehr nötig. */
:root .praxis-hero h1 { hyphens: manual; }
:root .praxis-hero h1 .mk { display: inline; padding: 0 0.12em 0.04em; hyphens: manual; overflow-wrap: normal; }
:root .mk--terra { background-image: url(/assets/img/zeichen/marker-lime.svg); }

/* Schlussblock der Startseite: Pfeil zeigt auf den Knopf, ab Desktop. Der Rand-Pseudo des
   Knopfs wird nach links oben verlängert und trägt den Pfeil als zweite Ebene. */
@media (min-width: 1100px) {
  .final__cta.btn--primary::before {
    inset: -64px -6px -6px -148px;
    background:
      var(--zg-pfeil) 0 0 / 124px 83px no-repeat,
      var(--zg-knopf) right bottom / calc(100% - 143px) calc(100% - 58px) no-repeat;
  }
  [dir="rtl"] .final__cta.btn--primary::before { inset: -6px -6px -6px -5px; background: var(--zg-rand) 0 0 / 100% 100% no-repeat; }
}

/* Footer: lange Liste klappt auf (global.py, „N weitere"). */
.footer__mehr { display: grid; gap: 9px; }
.footer__mehr[open] > summary { margin-bottom: 0; }
.footer__mehr > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: var(--fuss-schrift);
  font-size: 14.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.footer__mehr > summary::-webkit-details-marker { display: none; }
.footer__mehr > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.footer__mehr[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.footer__mehr > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* ── Anfrageformular, gezeichnet ─────────────────────────────────────── */
.contact-page .enquiry-form {
  isolation: isolate;
  background: #fff;
  border: 0;
  border-radius: 6px 10px 8px 12px;
  box-shadow: 10px 12px 0 #eae7ff;
}
.contact-page .enquiry-form::before {
  content: "";
  position: absolute;
  inset: -7px -8px -8px -7px;
  z-index: 2;
  background: var(--zg-papier) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.contact-page .enquiry-form::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 118px;
  height: 44px;
  margin-left: -59px;
  z-index: 3;
  background: url(/assets/img/zeichen/klebe.svg) center / contain no-repeat;
  transform: rotate(-4deg);
  pointer-events: none;
}
.contact-page .enquiry-form .field input:not([type=radio]):not([type=checkbox]),
.contact-page .enquiry-form .field textarea,
.contact-page .enquiry-form .field select {
  border: 0;
  border-radius: 10px 14px 9px 13px;
  background: #fbfaf8 var(--zg-feld) 0 0 / 100% 100% no-repeat;
}
.contact-page .enquiry-form .field input:not([type=radio]):not([type=checkbox]):focus,
.contact-page .enquiry-form .field textarea:focus,
.contact-page .enquiry-form .field select:focus {
  outline: 2px solid var(--cta-tief, #0E8A97);
  outline-offset: 3px;
  box-shadow: 4px 5px 0 #ddf8fa;
}
.contact-page .goal-options span {
  border: 0;
  border-radius: var(--zg-radius);
  background: #fff var(--zg-rand) 0 0 / 100% 100% no-repeat;
  font-weight: 600;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.contact-page .goal-options label:hover span { transform: rotate(-1deg); }
.contact-page .goal-options input:checked + span {
  background-color: var(--ink, #19191C);
  color: #fff;
  box-shadow: 3px 4px 0 var(--cta, #22C7D6);
  transform: rotate(-1.5deg);
}
.contact-page .submit-button {
  position: relative;
  isolation: isolate;
  justify-content: center;
  border-radius: var(--zg-radius);
  background: var(--ink, #19191C);
  color: #fff;
  font-weight: 750;
  font-size: 17px;
  letter-spacing: 0.01em;
  box-shadow: 5px 6px 0 var(--cta, #22C7D6);
  transform: rotate(-0.6deg);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-page .submit-button::before {
  content: "";
  position: absolute;
  inset: -5px -6px -6px -5px;
  background: var(--zg-knopf) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.contact-page .submit-button:hover { background: #000; transform: rotate(0deg) translate(-1px, -2px); box-shadow: 7px 8px 0 var(--cta, #22C7D6); }
.contact-page .submit-button:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--cta, #22C7D6); }
.contact-page .contact-copy h1 em {
  background: url(/assets/img/zeichen/unterstrich.svg) 0 100% / 100% 0.3em no-repeat;
  padding-bottom: 0.06em;
}
@media (min-width: 1100px) {
  .contact-page .contact-copy { position: relative; }
  .contact-page .contact-copy::after {
    content: "";
    position: absolute;
    right: -58px;
    top: 150px;
    width: 124px;
    height: 83px;
    background: var(--zg-pfeil) center / contain no-repeat;
    transform: rotate(-18deg);
    pointer-events: none;
  }
  .contact-page .personal-contact { position: relative; }
  .contact-page .personal-contact::after {
    content: "";
    position: absolute;
    left: 58%;
    top: 108%;
    width: 190px;
    height: 190px;
    background: url(/assets/img/zeichen/figur-brief.svg) center / contain no-repeat;
    transform: rotate(9deg);
    pointer-events: none;
  }
  [dir="rtl"] .contact-page .contact-copy::after { right: auto; left: -58px; transform: scaleX(-1) rotate(-18deg); }
}

.f-action__icon img { width: 100%; height: 100%; }

/* Pfeil im Knopf: gezeichnet statt „→“, nimmt die Schriftfarbe, zeichnet sich neu. */
/* Ein Pfeil für alle Handlungsknöpfe: der gezeichnete. Das alte ↗ der Leistungsseiten weg. */
.lp-button > span[aria-hidden="true"] { display: none; }
:is(.btn--primary, .lp-button)::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.6em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--zg-pfeil-knopf) center / contain no-repeat;
  mask: var(--zg-pfeil-knopf) center / contain no-repeat;
}
[dir="rtl"] :is(.btn--primary, .lp-button)::after { content: ""; transform: scaleX(-1); }
[dir="rtl"] .btn--primary:hover::after { transform: scaleX(-1) translateX(4px); }

/* Zeichenweg der Startseite: gezeichnete Kreise und Handlinie. */
:root .zeichenweg__zeichen {
  border: 0;
  border-radius: 0;
  background: transparent var(--zg-kreis) center / 100% 100% no-repeat;
}
:root .zeichenweg__schritt.is-aktiv .zeichenweg__zeichen {
  background: transparent var(--zg-kreis-voll) center / 100% 100% no-repeat;
  color: #fff;
}
@media (min-width: 820px) {
  :root .zeichenweg::before {
    top: calc(var(--z-gr) / 2 - 6px);
    height: 12px;
    background: var(--zg-linie) 0 50% / 100% 100% no-repeat;
  }
}

/* Navigation: gezeichneter Unterstrich statt Balken. */
@media (min-width: 1360px) {
  :root .kopfnav a::after {
    bottom: 1px;
    height: 8px;
    border-radius: 0;
    background: var(--zg-nav) 0 50% / 100% 100% no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Stille Fassungen: gleiche Zeichnung, ohne Neuzeichnen. */
  :root {
    --zg-knopf: var(--zg-rand);
    --zg-pfeil: url(/assets/img/zeichen/pfeil.svg);
    --zg-pfeil-knopf: url(/assets/img/zeichen/pfeil-knopf.svg);
    --zg-kreis: url(/assets/img/zeichen/kreis.svg);
    --zg-kreis-voll: url(/assets/img/zeichen/kreis-voll.svg);
    --zg-linie: url(/assets/img/zeichen/linie.svg);
    --zg-nav: url(/assets/img/zeichen/nav-strich.svg);
  }
  :is(.btn--primary, .lp-button, .contact-page .submit-button, .contact-page .goal-options span) { transition: none; }
  :is(.btn--primary, .lp-button):hover { transform: none; }
}

/* Alte Branchen-Pilotseiten (zahnarzt, friseur, anwalt …): Dort kommt der Primärknopf noch aus
   assets/css/system.css und ist eine fast weiße Pille auf heller Fläche. Gleiche Form und Farbe
   wie überall sonst, ohne das übrige Layout dieser Seiten anzufassen. */
.btn.btn-primary {
  position: relative;
  isolation: isolate;
  background: var(--cta, #22C7D6);
  color: var(--ink, #19191C);
  -webkit-text-fill-color: var(--ink, #19191C);
  border-radius: var(--zg-radius);
  box-shadow: 2px 3px 0 var(--ink, #19191C);
}
.btn.btn-primary:hover { background: var(--cta-hover, #16B4C2); box-shadow: 4px 5px 0 var(--ink, #19191C); transform: translate(-1px, -2px); }
.btn.btn-primary::before {
  content: "";
  position: absolute;
  inset: -5px -6px -6px -5px;
  z-index: 1;
  background: var(--zg-knopf) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.btn.btn-primary .btn-arrow { display: none; }
.btn.btn-primary::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.6em;
  height: 0.95em;
  margin-inline-start: 6px;
  background: currentColor;
  -webkit-mask: var(--zg-pfeil-knopf) center / contain no-repeat;
  mask: var(--zg-pfeil-knopf) center / contain no-repeat;
}

/* ── Alte Branchen-Pilotseiten geradeziehen (Prüfung 22.09.2026) ─────────
   Diese neun Seiten (zahnarzt, friseur, anwalt, chirurgie, coaching, hotel,
   optiker, restaurant, steuerberater) laden noch assets/css/system.css, ein
   Farbsatz für dunklen Grund. Auf der hellen Fläche stand dadurch weiße
   Schrift auf Weiß (über 40 Stellen je Seite), und über dem Kopf lag eine
   zweite Navigation. Die Seiten behalten ihr Layout, bekommen aber die
   Farbrollen und die eine Signalfarbe der übrigen Website. */
body:has(.sub-hero) {
  --bg-base: #F3F1F0;
  --bg-elevated: #ffffff;
  --bg-card: rgba(25, 25, 28, .03);
  --bg-card-hover: rgba(25, 25, 28, .06);
  --bg-glass: rgba(243, 241, 240, .72);
  --border-subtle: rgba(25, 25, 28, .08);
  --border-default: rgba(25, 25, 28, .14);
  --border-strong: rgba(25, 25, 28, .28);
  --text-primary: #19191C;
  --text-secondary: #4A4A4F;
  --text-tertiary: #6E6A66;
  --text-muted: #7A756F;
  --accent-blue: #0E8A97;
  --accent-blue-soft: rgba(34, 199, 214, .16);
  --accent-amber: #0E8A97;
  --accent-magenta: #0E8A97;
  --accent-emerald: #0E8A97;
}
/* Die Seite hat oben schon den globalen Kopf; die alte Leiste darüber entfällt. */
:root .nav-wrap,
:root .mobile-menu { display: none; }

/* Große Überschriften nicht mitten im Wort trennen (Prüfung: „Web-sites“, „ers-ten“, „leich-ter“). */
@media (max-width: 700px) {
  :is(h1, h2, .display, .final__gross, .article-hero__title, .references-overview__title, .mk) {
    hyphens: manual;
    overflow-wrap: break-word;
  }
}

/* Fußnoten auf /projekt-herzberg waren 9–11 px groß: Trefffläche auf 24 px bringen. */
a[id^="hz-ref"] { position: relative; }
a[id^="hz-ref"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* Sterne gezeichnet (23.09.2026). Die Zeichen bleiben im Quelltext, sichtbar ist die Zeichnung;
   die Farbe kommt aus der Stelle, an der sie steht. */
:root .stars {
  display: inline-block;
  width: 5.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  overflow: hidden;
  background: currentColor;
  -webkit-mask: url(/assets/img/zeichen/sterne.svg) left center / contain no-repeat;
  mask: url(/assets/img/zeichen/sterne.svg) left center / contain no-repeat;
  color: var(--stern, #E3A008);
  text-indent: -9em;
  letter-spacing: 0;
}
:root .ref-bewertet .stars { color: var(--cta, #22C7D6); }

/* ── Kontaktbereich hell (23.09.2026) ────────────────────────────────────
   Victor: „dann machen wir den Footer-Bereich, dort wo accessible steht,
   global auf der ganzen Seite jetzt auch weiß wie der Hintergrund. Die
   weißen Symbole werden schwarz gemacht. Das C bleibt türkis."
   Der Sockel darunter bleibt, wie er ist; der schwarze Block dazwischen
   fällt weg, damit oben und unten dieselbe Fläche steht. */
:root .footer {
  --fuss-schrift: #19191C;
  --fuss-leise: rgba(25, 25, 28, .66);
  --fuss-linie: rgba(25, 25, 28, .16);
  background: var(--canvas, #F3F1F0);
  color: var(--ink, #19191C);
  border-top: 1px solid rgba(25, 25, 28, .10);
  /* Ohne den schwarzen Block braucht der Kopf des Bereichs weniger Vorlauf. */
  padding-block: clamp(64px, 8vw, 112px) 36px;
}
:root .footer__eyebrow { color: var(--cta-tief, #0E8A97); }
:root .footer__tagline { color: var(--ink, #19191C); }
:root .f-action,
:root .f-action__icon,
:root .f-action__label { color: var(--ink, #19191C); }
:root .f-action__value { color: rgba(25, 25, 28, .62); }
:root .footer a:focus-visible { outline-color: var(--ink, #19191C); }

/* Das gezeichnete „(c)" läuft in der Zeile mit und wächst mit der Schrift. */
:root .footer__tagline .klammer {
  display: inline-block;
  width: 0.78em;
  margin: 0 0.02em;
  vertical-align: -0.11em;
}
:root .footer__tagline .klammer img { display: block; width: 100%; height: auto; }

/* Worterklärung statt Werbesatz: ruhiger Satz, etwas schmaler als vorher. */
:root .footer__glosse {
  max-width: 46ch;
  color: rgba(25, 25, 28, .70);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.6;
}

/* Oldschool-Telefon neben der Rufnummer im Abschluss; der ganze Link bleibt klickbar. */
.final__tel { display: inline-flex; align-items: center; gap: 10px; }
.final__telzeichen { display: block; width: 30px; height: 30px; flex: none; }
.final__telzeichen img { display: block; width: 100%; height: 100%; }

/* ── Fußtitel als Tippschleife (23.09.2026) ─────────────────────────────
   Victor: „acessio.de schreiben, dann wird es, als wäre es mit der Maus
   markiert, gelöscht, dann accessible hingeschrieben, ein bisschen
   langsamer, und das wiederholt sich alle 15 bis 20 Sekunden."
   Grundstellung ohne Skript und bei reduzierter Bewegung: „accessible". */
:root .footer__tagline { display: block; text-align: center; }
.tagline__tipp {
  display: inline-block;
  min-height: 1em;
  white-space: nowrap;
  text-align: left;          /* wächst nach rechts, während der Kasten mittig bleibt */
  border-radius: 0.06em;
  transition: background-color 160ms ease;
}
/* Schreibstrich, solange getippt wird. */
.footer__tagline.is-tippt .tagline__tipp::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.78em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: -0.06em;
  animation: tag-cursor 620ms steps(1, end) infinite;
}
/* Markierung wie mit der Maus, in der Farbe des Knopfes. */
.footer__tagline.is-markiert .tagline__tipp { background-color: rgba(34, 199, 214, .34); }
@keyframes tag-cursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ── Der Knopf in der Kopfzeile erzählt den Weg (23.09.2026) ─────────────
   Victor: „zuerst zeichnet sich so ein Briefumschlag, dann streichen wir den
   einmal durch … dann einen Pfeil … dann einen Haken." Die Folge steckt in
   der Datei und läuft einmal; bei reduzierter Bewegung steht gleich der Haken. */
:root .nav-cta::after {
  content: "";
  width: 19px;
  height: 19px;
  flex: none;
  background: var(--zg-navfolge) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  :root { --zg-navfolge: url(/assets/img/zeichen/nav-folge-still.svg); }
}

/* /projekte: dieselbe Ruhe wie auf der Startseite (23.09.2026, Victor: „die blauen Ränder
   und die lila Kästen … das müssen wir natürlich auch hier machen"). */
:root .reference-card__frame {
  padding: 0;
  border: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(25, 25, 28, .05), 0 26px 44px -30px rgba(25, 25, 28, .45);
}
:root .reference-card--blue .reference-card__frame,
:root .reference-card--purple .reference-card__frame,
:root .reference-card--green .reference-card__frame { background: #fff; }
:root .reference-card__frame img { border: 0; box-shadow: none; border-radius: 14px; }

/* ── Handy-Feinschliff 24.09.2026 (Victor) ───────────────────────────────── */
/* Fünf Kontaktwege: auf dem Handy 2 + 2 + 1, der letzte mittig statt links („Büro mittig"). */
@media (max-width: 899px) {
  .footer__actions > .f-action:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
}
/* Markierung im Fußtitel läuft von rechts nach links, langsam. */
.footer__tagline .tagline__tipp {
  background-image: linear-gradient(rgba(34, 199, 214, .34), rgba(34, 199, 214, .34));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0% 100%;
  transition: background-size 900ms cubic-bezier(.2, .7, .3, 1);
}
.footer__tagline.is-markiert .tagline__tipp { background-color: transparent; background-size: 100% 100%; }
/* Hamburger-Menü: Einträge kommen nacheinander, nicht als Block. */
.site-menu:not([hidden]) nav a { animation: menue-rein 420ms cubic-bezier(.2, .7, .3, 1) both; }
.site-menu:not([hidden]) nav a:nth-child(1) { animation-delay: 40ms; }
.site-menu:not([hidden]) nav a:nth-child(2) { animation-delay: 90ms; }
.site-menu:not([hidden]) nav a:nth-child(3) { animation-delay: 140ms; }
.site-menu:not([hidden]) nav a:nth-child(4) { animation-delay: 190ms; }
.site-menu:not([hidden]) nav a:nth-child(5) { animation-delay: 240ms; }
.site-menu:not([hidden]) > .btn { animation: menue-rein 420ms 320ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes menue-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .site-menu:not([hidden]) nav a, .site-menu:not([hidden]) > .btn { animation: none; }
  .footer__tagline .tagline__tipp { transition: none; }
}

/* projekte: Website-Karten 28.09.2026 */
/* Ganzseiten-Aufnahmen (1080 px breit) für S.A. Folientechnik, Stuttgarter Denkmale und Quest Immobilien.
   Die Karte zeigt den Seitenanfang wie bei Lindenthal/Herzberg. Mit der Maus fährt die Aufnahme langsam bis
   zum Seitenende durch und kehrt beim Verlassen zurück; auf Touch-Geräten und bei reduzierter Bewegung steht
   sie still. --seite-hoehe ist Bildhöhe/Bildbreite, --seite-rahmen die Rahmenhöhe/-breite (4:3, ab 780px 16:11). */
.reference-card--seite { --seite-rahmen: 0.75; --seite-hoehe: 8; --seite-dauer: 9s; }
.reference-card--seite-folientechnik { --seite-hoehe: 7.983; --seite-dauer: 9s; }   /* 8622 / 1080 */
.reference-card--seite-denkmale { --seite-hoehe: 6.48; --seite-dauer: 7.4s; }         /* 6998 / 1080 */
.reference-card--seite-quest { --seite-hoehe: 7.396; --seite-dauer: 8.4s; }           /* 7988 / 1080 */
@media (max-width: 780px) { .reference-card--seite { --seite-rahmen: 0.6875; } }
:root .reference-card--seite .reference-card__frame img {
  display: block;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transform-origin: top center; /* greift die alte a:hover-Skalierung (Touch, reduzierte Bewegung), bleibt der Seitenanfang stehen */
  transition: transform 900ms var(--ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root .reference-card--seite:hover .reference-card__frame img {
    transform: translateY(calc(-100% * (1 - var(--seite-rahmen) / var(--seite-hoehe))));
    box-shadow: none;
    transition: transform var(--seite-dauer) linear;
  }
}
/* Kennzeichnung nicht veröffentlichter Stände: „Entwurf" liegt oben links auf der Aufnahme und bleibt beim Durchfahren stehen. */
.reference-card__stand {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 7px 10px 6px;
  border-radius: 999px;
  background: rgba(25, 25, 28, .84);
  color: #F3F1F0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* projektprofil: Belegblock + Telefonfeld 28.09.2026 */
/* Telefon (optional) und Rückmeldeweg in einer Reihe; die Chips übernehmen die Zeichnung der Anliegen-Knöpfe. */
.contact-page .kontaktweg { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.contact-page .kontaktweg legend { font: 600 14px/1.4 var(--sans); margin-bottom: 9px; padding: 0; }
.contact-page .kontaktweg .goal-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-page .kontaktweg .goal-options span { min-height: 52px; font-size: 14px; }
/* Zweispaltig braucht das Telefonfeld mehr Platz als die zwei Chips, sonst wird der Platzhalter abgeschnitten. */
@media (min-width: 1101px) { .contact-page .form-row--kontakt { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
@media (min-width: 601px) and (max-width: 899px) { .contact-page .form-row--kontakt { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.contact-page .form-status__schneller .nobr { white-space: nowrap; }
.contact-page .form-status__schneller { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(25, 25, 28, .14); }
.contact-page .form-status__schneller a, .contact-page .form-status__referenz a { text-underline-offset: 4px; }
/* Belegblock: unter dem Formular (Handy), unter Victors Kontaktkarte (Desktop). */
.contact-page .contact-beleg { display: grid; gap: 16px; max-width: 46ch; padding-top: 24px; border-top: 1px solid rgba(25, 25, 28, .14); }
.contact-page .contact-beleg__bewertung { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: max-content; max-width: 100%; color: var(--ink, #19191C); font: 600 15px/1.3 var(--sans); text-decoration: none; }
.contact-page .contact-beleg__bewertung b { font-weight: 750; }
.contact-page .contact-beleg__bewertung:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-page .contact-beleg__bewertung:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 4px; border-radius: 4px; }
.contact-page .contact-beleg__zitat { margin: 0; }
.contact-page .contact-beleg__zitat blockquote { margin: 0; }
.contact-page .contact-beleg__zitat p { font: 500 clamp(19px, 1.5vw, 22px)/1.35 var(--sans); letter-spacing: -.015em; max-width: 30ch; text-wrap: balance; }
.contact-page .contact-beleg__zitat figcaption { margin-top: 10px; font: 400 14px/1.5 var(--sans); color: #57534f; }
.contact-page .contact-beleg__zitat figcaption a { color: inherit; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .contact-page .contact-layout { grid-template-rows: auto minmax(0, 1fr); }
  .contact-page .contact-layout > .enquiry-form { grid-column: 2; grid-row: 1 / span 2; }
  .contact-page .contact-beleg { grid-column: 1; grid-row: 2; align-self: start; }
}
@media (min-width: 1100px) {
  /* Die gezeichnete Figur hängt unter der Kontaktkarte (personal-contact::after, 190px); der Beleg rückt darunter. */
  .contact-page .contact-beleg { margin-top: 120px; }
}

/* menue: anruf-zeile 28.09.2026 */
/* Anruf und WhatsApp als ruhige Zeile unter „Vorhaben besprechen"; Doppelklasse wie bei den Sprachen,
   damit die großen Menüregeln nicht greifen. */
.site-menu .site-menu__anruf {
  margin: 0;
  text-align: center;
  color: var(--ink-2, #2B2B2F);
  font: 500 15px/1.4 var(--sans, Figtree, system-ui, sans-serif);
  letter-spacing: 0;
}
.site-menu .site-menu__anruf a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(43, 43, 47, .35);
  transition: color 200ms var(--ease, ease);
}
.site-menu .site-menu__anruf a:hover,
.site-menu .site-menu__anruf a:focus-visible { color: var(--cta-text, #097078); text-decoration-color: currentColor; }
.site-menu .site-menu__anruf a:focus-visible { outline: 2px solid var(--ink, #19191C); outline-offset: 2px; }
.site-menu:not([hidden]) > .site-menu__anruf { animation: menue-rein 420ms 380ms cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .site-menu:not([hidden]) > .site-menu__anruf { animation: none; }
}

/* leistungen: weiter-zeile 28.09.2026 */
/* Schmale Zeile nach „Was zu dieser Leistung gehört": Knopfziel des Heros als Textlink plus Telefon.
   Spezifisch genug gegen „.page-leistungen main p" (Außenabstand). */
main p.lp-weiter.lp-wrap {
  margin: -40px auto 0;
  padding: 0 0 44px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-muted, #5B5966);
}
.lp-weiter a {
  color: var(--lp-ink, #19191C);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  display: inline-block;
  padding-block: 8px;
}
.lp-weiter a:hover,
.lp-weiter a:focus-visible { color: var(--lp-accent, #097078); }

/* projektprofil: Rückruf-Karte 28.09.2026 (Victor: „Lieber einen Rückruf?" mit gezeichnetem Hörer,
   freie Zeiten, Nummer, Eintrag im Kalender). Verborgen, wenn die Function nicht antwortet. */
.contact-page .rueckruf { margin-top: 28px; padding: 22px 22px 20px; background: #fff; border: 1px solid rgba(25, 25, 28, .08); border-radius: var(--zg-radius, 18px); box-shadow: 0 1px 0 rgba(25, 25, 28, .04), 0 22px 44px -32px rgba(25, 25, 28, .35); max-width: 46ch; }
.contact-page .rueckruf[data-rueckruf-state="aus"] { display: none; }
.contact-page .rueckruf__kopf { display: flex; gap: 14px; align-items: flex-start; }
.contact-page .rueckruf__hoerer { flex: none; width: 52px; height: 52px; }
.contact-page .rueckruf__hoerer img { display: block; width: 100%; height: 100%; }
.contact-page .rueckruf h2 { margin: 2px 0 4px; font: 600 clamp(20px, 1.7vw, 24px)/1.15 var(--sans); letter-spacing: -.018em; color: var(--ink); }
.contact-page .rueckruf__kopf p { margin: 0; font-size: 15px; line-height: 1.5; color: #57534f; max-width: none; }
.contact-page .rueckruf__lade, .contact-page .rueckruf__leer { margin: 16px 0 0; font-size: 14.5px; color: #57534f; }
.contact-page .rueckruf__tage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.contact-page .rueckruf__tag { padding: 7px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font: 600 14px/1 var(--sans); color: var(--ink); cursor: pointer; }
.contact-page .rueckruf__tag[aria-selected="true"] { background: var(--ink); color: #fff; }
.contact-page .rueckruf__zeiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; max-height: 176px; overflow-y: auto; padding-right: 2px; }
.contact-page .rueckruf__zeit { padding: 9px 4px; border: 1.5px solid rgba(25, 25, 28, .25); border-radius: 10px; background: #fff; font: 500 14.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.contact-page .rueckruf__zeit:hover { border-color: var(--ink); }
.contact-page .rueckruf__zeit[aria-pressed="true"] { background: var(--cta, #22C7D6); border-color: var(--ink); }
.contact-page .rueckruf__tag:focus-visible, .contact-page .rueckruf__zeit:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 2px; }
.contact-page .rueckruf__form { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(25, 25, 28, .12); }
.contact-page .rueckruf__wahl { margin: 0; font-size: 15px; color: var(--ink); }
.contact-page .rueckruf__feld { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.contact-page .rueckruf__feld input { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(25, 25, 28, .3); border-radius: 10px; font: 400 16px/1.3 var(--sans); background: #fff; }
.contact-page .rueckruf__feld input:focus { outline: 3px solid var(--cta, #22C7D6); outline-offset: 1px; border-color: var(--ink); }
.contact-page .rueckruf__honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-page .rueckruf__einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: #57534f; font-weight: 400; }
.contact-page .rueckruf__einwilligung input { margin-top: 3px; flex: none; }
.contact-page .rueckruf__hinweis { margin: 0; font-size: 13px; color: #57534f; }
.contact-page .rueckruf__hinweis a { color: inherit; text-underline-offset: 3px; }
.contact-page .rueckruf__form .btn { justify-self: start; }
.contact-page .rueckruf__status { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.contact-page .rueckruf__status[data-art="fehler"] { color: #9b2c2c; }
.contact-page .rueckruf__status[data-art="ok"] { font-weight: 600; }
@media (max-width: 599px) { .contact-page .rueckruf { padding: 18px 16px 16px; } .contact-page .rueckruf__zeiten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Rückruf-Karte: [hidden] muss gegen display:grid gewinnen; die gezeichnete Umschlag-Figur der
   Kontaktkarte würde in die Karte ragen, deshalb aus, wenn die Karte da ist. */
.contact-page .rueckruf__form[hidden], .contact-page .rueckruf__status[hidden], .contact-page .rueckruf__slots[hidden] { display: none; }
.contact-page .contact-copy:has(.rueckruf:not([data-rueckruf-state="aus"])) .personal-contact::after { display: none; }
/* Rückruf-Karte, zweite Fassung (Victor 28.09.2026): drei gezeichnete Uhren statt Zeitraster,
   gezeichnetes Fragezeichen in der Überschrift. */
.contact-page .rueckruf__wort { white-space: nowrap; }
.contact-page .rueckruf__frz { display: inline-block; height: .92em; width: auto; vertical-align: -.1em; margin-left: .06em; } /* Seite setzt img auf block */
.contact-page .rueckruf__uhren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.contact-page .rueckruf__uhr { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border: 1.5px solid rgba(25, 25, 28, .18); border-radius: 16px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: border-color 140ms ease, transform 140ms ease; }
.contact-page .rueckruf__uhr:hover { border-color: var(--ink); transform: translateY(-1px); }
.contact-page .rueckruf__uhr[aria-pressed="true"] { border-color: var(--ink); background: var(--cta, #22C7D6); }
.contact-page .rueckruf__uhr:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 2px; }
.contact-page .rueckruf__blatt { position: relative; width: 72px; height: 72px; }
.contact-page .rueckruf__blatt img { display: block; width: 100%; height: 100%; }
.contact-page .rueckruf__zeiger { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-page .rueckruf__uhrzeit { margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.contact-page .rueckruf__tageszeit { font-size: 12.5px; color: #57534f; }
.contact-page .rueckruf__uhr[aria-pressed="true"] .rueckruf__tageszeit { color: var(--ink); }
@media (max-width: 599px) { .contact-page .rueckruf__uhren { gap: 8px; } .contact-page .rueckruf__blatt { width: 64px; height: 64px; } .contact-page .rueckruf__uhr { padding: 10px 4px 8px; } }

/* Branchenseiten: „Zum Weiterlesen" (weiterlesen.py, 28.09.2026) — drei Ratgeberlinks vor dem Schluss. */
.br-lesen { padding-block: clamp(28px, 4vw, 56px) 0; }
.br-lesen nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 10px; }
.br-lesen nav a { color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cta, #22C7D6); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.br-lesen nav a:hover { color: var(--cta-tief, #0E8A97); }