/* =====================================================================
   DL Lindenthal – Brand-Layer (Logo, Navigation, WhatsApp, Praxisfotos)
   Wird als letztes Stylesheet geladen und überschreibt daher gezielt
   einzelne Regeln der bestehenden Seiten-Styles.
   ===================================================================== */

/* ---------------------------------------------------------------
   1) Logo in der Kopfnavigation
   Das vollständige DL-Lindenthal-Logo ersetzt das frühere
   Text-/Grafik-Branding („Dr." bzw. „DL" + Wortmarke).
   Seitenverhältnis der Bilddatei: 2178 x 512 (4.254 : 1)
   --------------------------------------------------------------- */
.dl-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.dl-logo img {
  display: block;
  width: auto;
  height: 34px;             /* Proportionen bleiben erhalten */
  max-width: 100%;
}
@media (max-width: 520px) {
  .dl-logo img { height: 29px; }
}
@media (max-width: 360px) {
  .dl-logo img { height: 25px; }
}

/* Footer-Logo: Wortmarke in Weiß, freigestellt – ohne helle Box.
   Die Datei logo-dl-voll-weiss.png wird von _build/tools/logo_footer.py
   aus der Originaldatei erzeugt: Hintergrund entfernt, Wortmarke weiß,
   die lila DL-Kachel bleibt unverändert. */
.dl-logo-footer {
  display: inline-flex;
  align-items: center;
  background: none;
  padding: 0;
  line-height: 0;
}
.dl-logo-footer img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 100%;
}

/* Ehemalige Textmarke sicherheitshalber vollständig ausblenden */
.logo-mark { display: none !important; }

/* ---------------------------------------------------------------
   2) Navigation – zwei Kriterien für das Hamburger-Menü
   ---------------------------------------------------------------
   Umgeschaltet wird, sobald EINES von beidem zutrifft:
     a) das Gerät ist ein Touchgerät (grober Zeiger ohne Hover),
     b) das Fenster ist schmaler als SCHMAL_AB (780 px) – dann passt
        die Linkreihe nicht mehr nebeneinander.

   Vorher war a) das einzige Kriterium, und `html.dl-no-touch
   header .burger { display: none !important }` stach jede
   Breitenregel aus. Ein schmales Fenster ohne Touch hatte damit nur
   noch eine quer scrollende Linkreihe (Audit-Befund 3). Die sechs
   konkurrierenden Regelsätze von damals sind hier zu einem
   zusammengefasst; darum stehen ab jetzt auch keine !important mehr
   in diesem Abschnitt – `header .nav-links` (0,1,1) sticht die
   Seitenregel `.nav-links` (0,1,0) ohnehin.

   780 px steht ausserdem als SCHMAL_AB in dl-nav.js. Beide Werte
   müssen zusammenpassen, sonst schliesst das Skript ein Menü, das
   die Seite noch anzeigt.
   --------------------------------------------------------------- */
header .nav-links { display: flex; }
header .burger    { display: none; }
header .nav-mobil { display: none; }
/* Das geöffnete Menü sticht in jeder Lage (0,2,1 gegen 0,1,1). */
header .nav-mobil.offen { display: flex; }

/* b) zu schmal für die Linkreihe */
@media (max-width: 780px) {
  header .nav-links { display: none; }
  header .burger    { display: inline-flex; }
}

/* a) Touchgerät – die Klasse setzt dl-nav.js, sie deckt auch Geräte
      ab, die ihre Zeigermerkmale falsch melden. */
html.dl-touch header .nav-links { display: none; }
html.dl-touch header .burger    { display: inline-flex; }
html.dl-touch header .nav-btns .btn-akut { display: none; }

/* Weder Touch noch schmal: Desktopnavigation. Die Breitenbedingung
   steht hier im @media und nicht am Selektor, damit die Regel bei
   schmalem Fenster gar nicht erst gilt – genau das war der Fehler. */
@media (min-width: 781px) {
  html.dl-no-touch header .nav-links { display: flex; }
  html.dl-no-touch header .burger    { display: none; }
  html.dl-no-touch header .nav-mobil { display: none; }
}

/* Rückfall ohne JavaScript: reine Zeigermerkmale. */
@media (pointer: coarse) and (hover: none) {
  header .nav-links { display: none; }
  header .burger    { display: inline-flex; }
  header .nav-btns .btn-akut { display: none; }
}

/* Schmaler Desktop-Browser: Navigation wird kompakter, nicht ersetzt. */
@media (max-width: 1120px) {
  header .nav        { gap: 10px; }
  header .nav-links  { gap: 15px; font-size: 13.5px; }
  header .nav-btns   { gap: 8px; }
  header .nav-btns .btn { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 900px) {
  header .nav-links { gap: 12px; font-size: 13px; }
  header .nav-btns .btn { padding: 9px 12px; font-size: 12.5px; }
  .dl-logo img { height: 30px; }
}
@media (max-width: 780px) {
  /* Unter 780 px trägt der Burger die Navigation. Übrig bleiben hier
     die Masse der Kopfzeile – die quer scrollende Linkreihe von früher
     ist entfallen, sie war der Ersatz für das fehlende Menü. */
  header .nav { min-width: 0; }
  header .nav-btns { flex: none; min-width: 0; }
  header .nav-btns .btn-akut { display: none; }
  header .dl-logo { min-width: 0; }
  header .dl-logo img { height: 27px; }
}
/* Unter 780 px traegt IMMER der Burger die Navigation – auch wenn die
   Geraeteerkennung „kein Touch" meldet.

   Hier stand eine Ausnahme fuer den schmalen Desktop-Browser: Burger
   aus, Linkreihe umbrechend an. Sie hob die Regel oben (max-width:780px
   -> nav-links aus, burger an) wieder auf und stellte damit genau den
   Zustand her, den Audit-Befund 3 beseitigen sollte.

   Auf einem echten Geraet gemeldet (Samsung, 14.08.2026): Kopfzeile
   zeigte die abgeschnittene Linkreihe „Therapien Über mich Ratgeber
   Kontak", kein Menue erreichbar. Ursache ist `any-pointer: fine`:
   Samsung-Geraete mit S-Pen, DeX oder je verbundener Maus melden das,
   `istTouchgeraet()` in dl-nav.js liefert dann false, die Seite bekommt
   `dl-no-touch` – und diese Ausnahme griff.

   Die Breite entscheidet jetzt allein. Das deckt sich mit
   `menueMoeglich()` im Skript, das bei `istSchmal()` ebenfalls true
   liefert; vorher konnten CSS und Skript auseinanderlaufen. */
@media (max-width: 520px) {
  header .nav-btns .btn { padding: 8px 10px; font-size: 12px; }
}

/* Burger-Optik (drei Striche werden zum X) */
header .burger {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5.5px;
  width: 44px;
  /* 44 statt der früheren 42 px: gemessen wurde der Burger als
     einziges Bedienelement der Kopfzeile unter dem Mindestmaß
     (44 × 42, tools/pw-geraete-check.js). Die Kopfzeile wird davon
     nicht höher – .dl-logo daneben steht schon auf min-height 44px
     (dl-ui.css) und gibt die Zeilenhöhe vor. Die drei Striche sind
     zentriert, ihr Abstand hängt an gap, nicht an der Höhe. */
  height: 44px;
  padding: 0;
  margin-right: -4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink, #232150);
  border-radius: 10px;
}
header .burger:focus-visible {
  outline: 3px solid var(--lila-tief, #6D5BD0);
  outline-offset: 2px;
}
header .burger .b-linie {
  display: block;
  width: 26px;
  height: 2.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease, ease), opacity .22s;
}
header .burger[aria-expanded="true"] .b-linie:nth-child(1) { transform: translateY(8.1px) rotate(45deg); }
header .burger[aria-expanded="true"] .b-linie:nth-child(2) { opacity: 0; transform: scaleX(.3); }
header .burger[aria-expanded="true"] .b-linie:nth-child(3) { transform: translateY(-8.1px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  header .burger .b-linie { transition: none; }
}

header .nav-mobil a:focus-visible,
header .nav-links a:focus-visible {
  outline: 3px solid var(--lila-tief, #6D5BD0);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------
   3) WhatsApp – Banner „Am liebsten WhatsApp?" und Sticky-Button
   --------------------------------------------------------------- */
.msg-links { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.msg-links .wa-banner { margin: 0; }
.msg-links .info-panel { flex: 1; }

.wa-banner {
  background: linear-gradient(135deg, var(--lila-tief, #6D5BD0), #5A48C0);
  border-radius: 16px;
  padding: 17px 19px;
  margin: 14px 0 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wa-banner::before {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  border: 2.5px solid rgba(216,242,110,.25); pointer-events: none;
}
.wa-banner b { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.wa-banner b svg { width: 21px; height: 21px; flex: none; color: var(--lime, #D8F26E); }
.wa-banner p { font-size: 13px; opacity: .9; margin: 6px 0 13px; color: #EDEAF7; }
.wa-banner a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime, #D8F26E); color: var(--ink, #232150);
  font-weight: 700; font-size: 13.5px; padding: 11px 17px; border-radius: 11px;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease, ease), box-shadow .2s;
  animation: wa-anstupsen 4.5s ease-in-out 1.8s infinite;
}
.wa-banner a svg { width: 17px; height: 17px; color: var(--ink, #232150); }
.wa-banner a::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46px;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
  left: -60px; animation: wa-glanz 4.5s ease-in-out 1.8s infinite; pointer-events: none;
}
@keyframes wa-anstupsen {
  0%,14%,100% { transform: scale(1); }
  4%  { transform: scale(1.05) rotate(-1.2deg); }
  8%  { transform: scale(1.03) rotate(1deg); }
  12% { transform: scale(1.04); }
}
@keyframes wa-glanz { 0%,10% { left: -60px; } 22%,100% { left: calc(100% + 20px); } }
.wa-banner a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(216,242,110,.5); animation-play-state: paused; }
.wa-banner a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wa-banner a, .wa-banner a::after { animation: none !important; } }
@media (max-width: 640px) { .wa-banner a { width: 100%; justify-content: center; } }

.wa-fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.42);
  transition: transform .25s var(--ease, ease), box-shadow .25s;
}
.wa-fab svg { width: 31px; height: 31px; }
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(37,211,102,.5); }
.wa-fab:focus-visible { outline: 3px solid var(--ink, #232150); outline-offset: 3px; }
.wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37,211,102,.55);
  animation: wa-puls 2.6s ease-out infinite; pointer-events: none;
}
@keyframes wa-puls { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.55); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::after { animation: none; display: none; } }
@media (max-width: 640px) {
  .wa-fab { width: 52px; height: 52px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .wa-fab svg { width: 28px; height: 28px; }
}

/* Footer: Öffnungszeiten-Spalte */
.f-zeiten span { display: block; padding: 4px 0; opacity: .85; font-size: 14.5px; }
.f-zeiten .f-akuthin { font-size: 12.5px; opacity: .6; margin-top: 4px; }

/* Footer: Social-Media-Icons */
.f-social { display: flex; gap: 10px; margin-top: 16px; }
.f-social a {
  width: 38px; height: 38px; border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.22);
  display: grid; place-items: center; color: #CFCCE8; padding: 0;
  transition: .2s; opacity: 1;
}
.f-social a:hover { color: var(--ink, #232150); background: var(--lime, #D8F26E); border-color: var(--lime, #D8F26E); opacity: 1; }
.f-social svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------
   4) Praxisfoto-Platzhalter (genau vier Plätze)
   Es werden weder alte Bilder noch defekte Bildsymbole geladen.
   --------------------------------------------------------------- */
.dl-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(109,91,208,.07) 0 12px,
      rgba(109,91,208,.02) 12px 24px),
    var(--lila, #DCD3F5);
  border: 1.5px dashed rgba(109,91,208,.45);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
}
.dl-foto picture { display: contents; }
.dl-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
}
.dl-foto-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--lila-tief, #6D5BD0);
}
.dl-foto-inner svg { width: 34px; height: 34px; opacity: .8; }
.dl-foto-label {
  font-family: 'Schibsted Grotesk', 'Inter', sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
}
.dl-foto-sub { font-size: 12.5px; opacity: .75; max-width: 22ch; line-height: 1.45; }
.dl-foto.hat-bild { border-style: solid; border-color: transparent; background: var(--lila, #DCD3F5); }
.dl-foto.hat-bild .dl-foto-inner { display: none; }

/* Die vorhandene Galerie behält ihr Layout: .p-bild gibt die Höhe vor,
   der Platzhalter füllt den Rahmen exakt aus. */
.p-bild > .dl-foto {
  height: 100%;
  aspect-ratio: auto;
  border: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(109, 91, 208, .45);
}
.p-bild > .dl-foto img { border-radius: inherit; }
.p-bild > .dl-foto.hat-bild { box-shadow: none; }

/* ---------------------------------------------------------------
   5) Kleinigkeiten
   --------------------------------------------------------------- */
.dl-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink, #232150); color: #fff;
  padding: 12px 18px; border-radius: 0 0 12px 0; font-weight: 700;
}
.dl-skip:focus { left: 0; }

/* ---------------------------------------------------------------
   6) Feedback-Protokoll vom 15.08.2026
   --------------------------------------------------------------- */

/* Punkt 5b und 25 – Dekor bleibt in seiner Sektion.
   Die Sektionen selbst tragen ihr `overflow:hidden` bereits; hier wird
   nur nachgezogen, wo eine Seite die Regel nicht mitbringt. */
.cta, .hero, .erklaer, .leistungen, .pakete-sec, .weg, .neuster, .beitraege {
  overflow: hidden;
}

/* Punkt 21 – Ein Badge ist so breit wie sein Text.
   In `.erklaer` steht der Kicker in einem Flex-Container und wurde dort
   auf die volle Spaltenbreite gedehnt. */
.kicker {
  width: auto;
  max-width: max-content;
  align-self: flex-start;
}

/* Punkt 20 – die Ausschlusspunkte der Leistungskarten tragen das
   Signalzeichen der Vorlage. */
.paket li.x svg { color: var(--signal, #E8503A); }

/* Punkt 23 und 24 – Mobile: Hero näher an die Navigation.
   Gemessen am 15.08.2026 auf 375 px: Kopfzeile 75 px, danach 66 px
   Innenabstand der Hero-Sektion. Die beiden Knöpfe endeten bei 677 px –
   auf Geräten mit 667 px Höhe (iPhone SE/8) also erst nach dem Scrollen.
   Mit 26 px statt 66 px enden sie bei rund 637 px und stehen im ersten
   Bildschirm. Desktop bleibt unberührt: die Regel gilt nur bis 780 px,
   dieselbe Schwelle, ab der auch das Hamburger-Menü greift. */
@media (max-width: 780px) {
  .hero { padding-top: 26px; }
}

/* ---------------------------------------------------------------
   7) Befunde vom 15.08.2026 (zweite Runde)
   --------------------------------------------------------------- */

/* Datenschutz-Zeile im Kontaktformular.
   `.form input{width:100%}` aus dl-ui.css schlug `.dsgvo input{width:17px}`
   der Seite, weil die Datei später geladen wird. Das Kästchen wurde damit
   535 px breit und drückte den Text auf 137 px – gemessen bei 1440 px:
   die zwei Zeilen liefen über 165 px Höhe. Der Attributselektor hat die
   höhere Spezifität und stellt die Kästchengröße wieder her. */
/* „Direkter Draht": Die Liste steht als `flex:1` in der Spalte und wurde
   auf deren Höhe gestreckt. Das Raster verteilte die überschüssige Höhe
   auf seine Zeilen – jeder Eintrag war 196 px hoch statt 71 px, mit
   klaffenden Lücken zwischen Telefon, E-Mail und Adresse. */
.ip-liste { align-content: start; }

/* CTA-Banner: der lime Kreis saß mit `right:-90px; bottom:-110px` zur
   Hälfte außerhalb und wurde von `overflow:hidden` angeschnitten – der
   beanstandete überstehende gelbe Kreis. Beide Dekor-Kreise rücken
   vollständig in das Banner. */
.cta::before { left: 16px; top: 16px; }
.cta::after { right: 16px; bottom: 16px; }

@media (max-width: 780px) {
  /* Auf schmalen Displays sind 340 bzw. 280 px zu groß für das Banner. */
  .cta::before { width: 190px; height: 190px; border-width: 22px; }
  .cta::after { width: 150px; height: 150px; }
}

/* Abnehm-Rechner: Der Knopf der Ergebniskarte trug `btn-termin` und
   damit das Dunkelblau. Vorgabe ist der Knopf der Erstgespräch-Karte
   (`.paket.pop .btn`) im Neongrün. */
.r-ergebnis .btn,
.r-ergebnis .btn-termin {
  background: var(--lime);
  color: #2E3A08;
}

/* Punkt 6b – Einwilligung und Pflichtfeld-Fußzeile im Formular der
   Startseite. Die Regeln stehen bislang nur inline auf kontakt.html;
   hier stehen sie für die Startseiten.

   Gemessen am 15.08.2026 bei 1440 px: `.form label { display:block }`
   der Seite hat die Zeile flachgelegt – zwei Klassen schlagen eine.
   Das Kästchen klebte am Text, die Folgezeilen sprangen unter das
   Kästchen zurück. Deshalb hier mit `.form label.dsgvo` gleichziehen. */
.dsgvo,
.form label.dsgvo {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--grau, #6B6790);
  margin: 6px 0 20px;
  line-height: 1.45;
}
.dsgvo > span { flex: 1 1 auto; min-width: 0; }
.dsgvo input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-width: 17px;
  max-width: 17px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--lila-tief, #6D5BD0);
}
.form-hinweis {
  margin-top: 14px;
  font-size: 12.5px;
  color: #6B6790;
  text-align: center;
}

/* Sprechzeiten in der Fußzeile waren blasser als die Links daneben.
   Ursache: `.f-zeiten span { opacity:.85 }` trifft sowohl die Hülle
   `span.f-zeiten-liste` als auch die Zeilen darin — die Deckkraft
   multipliziert sich zu 0,72. Die Links tragen sie nur einmal.
   Die Hülle wird deshalb voll deckend; die Zeilen behalten ihre 0,85
   und stehen damit in derselben Farbe wie Impressum, Datenschutz, AGB. */
.f-zeiten .f-zeiten-liste,
.f-zeiten [data-dl="hours"] { opacity: 1; }

/* Punkt 19 – der Rechner stand nicht auf der Fluchtlinie der übrigen
   Sektionen. `.rechner-grid` war auf `max-width:980px; margin:0 auto`
   gedeckelt, während jede andere Sektion die volle Breite der `.wrap`
   nutzt. Gemessen bei 1080 px: Eingabekarte bei 43 px, das Arztfoto der
   Sektion darunter bei 20 px – 23 px Versatz, rechts derselbe Betrag
   (Ergebniskarte 1022 gegen 1045). Der Deckel entfällt. */
.rechner-grid {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ---------------------------------------------------------------
   Fußzeilen-Signatur „Digitales Praxissystem von Acessio"
   Vorgabe vom 15.08.2026: der ganze Satz ist anklickbar, deutlicher
   sichtbar als bisher (er lag auf opacity .55), im Lilaton der Marke,
   beim Überfahren neongrün. (Die wandernde Blase wurde am
   25.08.2026 auf Wunsch entfernt.)
   --------------------------------------------------------------- */
/* dl-ui.css setzt `.f-bottom .dl-signatur{opacity:.55}` und wird nach
   dieser Datei geladen - bei gleicher Spezifitaet gewinnt die spaetere.
   Deshalb hier eine Klasse mehr. */
/* `.f-bottom` selbst liegt auf opacity:.7, die Signatur darin auf .55 -
   multipliziert 0,39. Deckkraft von Vorfahren laesst sich nicht
   zurueckdrehen, deshalb wird die Huelle voll deckend und nur die
   Copyright-Zeile gedaempft. */
footer .f-bottom { opacity: 1; }
footer .f-bottom > span:not(.dl-signatur) { opacity: .7; }
footer .f-bottom .dl-signatur { opacity: 1; }

.f-bottom .dl-signatur-link,
.dl-signatur-link {
  position: relative;
  display: inline-block;
  color: var(--lila, #DCD3F5);
  text-decoration: none;
  font-weight: 700;
  padding-bottom: 6px;
  transition: color 220ms ease;
}

.dl-signatur-link:hover,
.dl-signatur-link:focus-visible { color: var(--lime, #D8F26E); }

.dl-signatur-link:focus-visible {
  outline: 2px solid var(--lime, #D8F26E);
  outline-offset: 3px;
  border-radius: 3px;
}





/* Punkt 19 – der Rechner darf beim Schieben nicht springen.
   Gemessen bei 1440 px: die Ergebniskarte war 464 px hoch, bei einem BMI
   unter 25 aber 506 px – 42 px Sprung, und die ganze Sektion mit ihr.
   Ursache ist allein `#abnahme-ziel`: eine Zeile („Rechnerisches
   Zielgewicht: ca. 81–85 kg") gegen drei Zeilen (Hinweis, dass eine
   Begleitung erst ab BMI 25 vorgesehen ist), 21 gegen 63 px.
   Der Platz für den längeren Fall wird deshalb dauerhaft reserviert.
   In `em`, damit es bei jeder Schriftgröße und Breite mitwächst. */
#abnahme-ziel {
  min-height: calc(3 * 1.55em);
  display: block;
}

@media (max-width: 560px) {
  /* Auf schmalen Displays wachsen beide Zeilen: der Hinweistext auf fünf
     Zeilen, und die Kilogramm-Angabe bricht um („−10 bis −14 kg" gegen
     „—" = 73 gegen 36 px). Gemessen bei 375 px. Beide bekommen ihren
     Platz reserviert, sonst wandert die Karte beim Schieben. */
  #abnahme-ziel { min-height: calc(5 * 1.55em); }
  #abnahme-kg { min-height: calc(2 * 1.1em); }
}

/* „Direkter Draht" und Formular schließen bündig ab.

   Der Weg dahin war nicht das Strecken der Karte, sondern das Angleichen
   der Inhalte: die Karte hat die Sprechzeiten dazubekommen, das Formular
   hat das zusammengelegte Namensfeld und den Wegfall des Telefonfelds
   abgegeben. Gemessen bei 1440 px stehen sich jetzt 664 px Formular und
   634 px linke Spalte gegenüber – 30 px Rest statt der früheren 312.

   Diese 30 px verteilt das Raster beim Strecken; das ist auf 470 px
   Kartenhöhe nicht zu sehen. Die Liste behält ihre natürliche Zeilenhöhe,
   sonst zieht das Raster die vier Einträge auseinander. */
.msg-grid { align-items: stretch; }
.msg-links { align-self: stretch; }
.msg-links .info-panel { flex: 1 1 auto; justify-content: flex-start; }
.info-panel .ip-liste { flex: 0 0 auto; }




/* Die Sprechzeiten im „Direkten Draht": zwei Zeilen untereinander, in der
   Auszeichnung der übrigen Einträge (Neongrün, fett) statt als Fließtext. */
.ip-zeiten { display: block; }
.ip-zeiten > span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--lime, #D8F26E);
  margin-top: 2px;
}

/* Der Notfallhinweis unter dem Formular steht in einer eigenen Zeile.
   Er ist eine Warnung, keine Fußnote zu den Pflichtfeld-Sternchen –
   angehängt an dieselbe Zeile ging er unter. */
.form-hinweis .form-notfall {
  display: block;
  margin-top: 4px;
}

/* Ratgeber-Vorschaukarten: immer genau drei Zeilen Teaser
   ---------------------------------------------------------------
   Rueckmeldung vom 18.08.2026: die Karten wirken uneinheitlich, weil
   der Teaser mal eine, mal drei Zeilen hoch ist - je nachdem, wie lang
   der Text zufaellig ist. Gemessen auf der Ratgeber-Uebersicht: von
   „Nicht einschlafen, nachts wach liegen?" (eine Zeile) bis zu drei
   Zeilen mit Auslassung.

   `min-height` setzt die Untergrenze, `line-clamp` die Obergrenze -
   beides zusammen ergibt immer denselben Block. Ohne das `min-height`
   ruecken Trennlinie, Lesezeit und „Weiterlesen" bei kurzen Teasern
   nach oben, und genau das faellt im Raster auf.

   `line-height` steht hier ausdruecklich, damit die Rechnung nicht von
   der geerbten Zeilenhoehe des Fliesstextes abhaengt. */
.r-body p{
  line-height:1.55;
  min-height:calc(3 * 1.55em);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

/* Mobilmenü als Vollbild-Overlay
   ---------------------------------------------------------------
   Vorgabe vom 18.08.2026: bei offenem Menü darf die Seite dahinter
   nicht mehr durchscheinen. Vorher klappte das Menü nur unter der
   Kopfleiste auf und endete gemessen bei 416 px – darunter lief die
   Startseite weiter (Viewport 812 px).

   Die Kopfleiste bleibt sichtbar und bedienbar: `.nav` liegt mit
   höherem z-index über dem Overlay, sonst wäre der Schließen-Knopf
   verdeckt. Beide sind Kinder von `header`, deshalb genügen kleine
   Werte – der Stapelkontext des Headers gilt.

   Die Höhe der Leiste misst `dl-nav.js` beim Öffnen und legt sie in
   `--dl-kopfhoehe` ab. Ein fester Wert wäre bei anderer Schriftgröße
   oder längerem Logo falsch. */
header .nav{position:relative;z-index:2;background:var(--creme)}

html.dl-menue-offen header .nav-mobil.offen{
  position:fixed;
  inset:0;
  z-index:1;
  height:100dvh;
  max-height:none;
  background:var(--creme);
  padding:calc(var(--dl-kopfhoehe,74px) + 14px) 26px
          calc(28px + env(safe-area-inset-bottom));
  justify-content:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  border-bottom:none;
}

/* Logoreihe „Bekannt aus": proportional und gleichmaessig verteilt
   ---------------------------------------------------------------
   Desktop-Rueckmeldung vom 28.08.2026: die zentrierte Flex-Reihe nutzte
   nur die Mitte der verfuegbaren Breite. Breiten- und Hoehenvorgaben
   konnten zudem vom natuerlichen SVG-Seitenverhaeltnis abweichen.
   Das Desktop-Grid verteilt deshalb vier gleich breite Zellen; jede
   Marke behaelt ihre originale ViewBox-Proportion und optische Groesse.
   Tablet und Handy behalten ihre gesonderte, bereits gepruefte Anordnung. */
.bekannt .medienlogo{
  position:static;
  top:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bekannt .medienlogo svg{display:block;width:auto;max-width:100%}

/* Desktop: vier gleich breite Logo-Zellen nutzen die komplette Restbreite.
   Die SVGs werden nur ueber ihre Breite skaliert; `height:auto` bewahrt das
   jeweilige ViewBox-Seitenverhaeltnis und verhindert optische Stauchung. */
@media(min-width:1021px){
  .bekannt .wrap{gap:clamp(48px,5vw,72px)}
  .bekannt .wrap .logos,
  .bekannt .logos{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:center;
    justify-items:center;
    gap:clamp(24px,2.5vw,40px);
    width:100%;
  }
  .bekannt .medienlogo{width:100%;height:58px}
  .bekannt .medienlogo.ml-gh svg{width:100%;max-width:132px;height:auto}
  .bekannt .medienlogo.ml-fz svg{width:100%;max-width:136px;height:auto}
  .bekannt .medienlogo.ml-wd svg{width:100%;max-width:54px;height:auto}
  .bekannt .medienlogo.ml-jr svg{width:100%;max-width:118px;height:auto}
}

/* Auf schmalen Desktop-Fenstern bleibt rechts der Platz des festen
   WhatsApp-Schalters frei; das Vierer-Grid verteilt den Rest weiterhin
   gleichmaessig. */
@media(min-width:1021px) and (max-width:1200px){
  .bekannt .wrap .logos,
  .bekannt .logos{margin-right:76px}
}

@media(max-width:780px){
  .bekannt .wrap .logos,
  .bekannt .logos{display:flex;grid-template-columns:none}
  .bekannt .medienlogo.ml-gh svg{height:22px}
  .bekannt .medienlogo.ml-fz svg{height:17px}
  .bekannt .medienlogo.ml-wd svg{height:28px}
  .bekannt .medienlogo.ml-jr svg{height:18px}
}

/* Kleine Handys: Die spaet geladene Marken-CSS muss das bereits im
   Seitengeruest angelegte 2x2-Raster ausdruecklich erhalten. Jede Marke
   bekommt dieselbe 52-px-Zeile. Die SVG-Rahmenmitte reicht hier nicht:
   beim filigranen Gruenhorn liegt die sichtbare Farbmasse weit unter der
   Rahmenmitte, beim vertikalen weed.de leicht unter der von Jiroo. Die
   aus den gerenderten Pixeln gemessenen optischen Schwerpunkte werden
   deshalb je Reihe angeglichen, ohne Groesse oder Desktop zu veraendern. */
@media(max-width:640px){
  .bekannt .wrap .logos,
  .bekannt .logos{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 20px;
    width:100%;
    justify-items:stretch;
    align-items:center;
  }
  .bekannt .medienlogo{
    width:100%;
    height:52px;
    min-width:0;
  }
  .bekannt .medienlogo.ml-gh svg{height:34px}
  .bekannt .medienlogo.ml-fz svg{height:26px}
  .bekannt .medienlogo.ml-wd svg{height:42px}
  .bekannt .medienlogo.ml-jr svg{height:28px}
  .bekannt .medienlogo.ml-fz{transform:translateY(13px)}
  .bekannt .medienlogo.ml-jr{transform:translateY(2px)}
}

/* Fußzeilen-Links: keine bleibende Einfärbung nach dem Antippen
   ---------------------------------------------------------------
   Rückmeldung vom 18.08.2026 mit Screenshot: „AGB" stand neongrün
   zwischen Impressum und Datenschutz. Nachgemessen ließ sich das
   nicht bestätigen – weder lokal noch auf den drei Live-Adressen:
   dort trägt jeder Fußzeilen-Link `rgb(207,204,232)`, und keine
   Regel färbt einen einzelnen davon lime.

   Übrig bleibt der Zustand direkt nach der Berührung. Android hält
   ihn im Bildschirmfoto fest, und `:focus` bleibt auf Touch-Geräten
   nach dem Antippen am Element hängen – der Nutzer kommt von der
   AGB-Seite zurück und sieht den Link weiter hervorgehoben.

   Deshalb: Ruhefarbe für alle Zustände festschreiben. Die Ausnahme
   ist `:focus-visible` – das kommt nur bei Tastaturbedienung und
   dort ist die Hervorhebung notwendig, nicht störend. Der
   Tap-Highlight wird ebenfalls neutralisiert.

   `aria-current` bleibt im Markup: die Angabe „Sie sind hier" gehört
   zur Barrierefreiheit und wird vorgelesen, sie muss nur nicht
   farblich herausstechen. */
footer .f-nav a,
footer [role="navigation"] a,
footer [role="group"] a{-webkit-tap-highlight-color:transparent}

footer [role="navigation"] a:link,
footer [role="navigation"] a:visited,
footer [role="navigation"] a:hover,
footer [role="navigation"] a:active,
footer [role="navigation"] a:focus:not(:focus-visible),
footer [role="navigation"] a[aria-current]{
  color:#CFCCE8;
}
footer [role="navigation"] a:focus-visible{color:#CFCCE8}

/* Mobile Abstände zwischen den Sektionen
   ---------------------------------------------------------------
   Rückmeldung vom 18.08.2026 mit mehreren Bildschirmfotos: zwischen
   den Sektionen steht auf dem Handy zu viel Leerraum – teils eine
   halbe Bildschirmhöhe, in der nichts passiert. Betroffen sind alle
   drei Auftritte, am deutlichsten die Startseite des Hubs.

   Der Wunsch war ausdrücklich „etwas verkleinern, aber nicht zu eng –
   die Inhalte brauchen weiterhin Luft". Deshalb keine feste Zahl,
   sondern eine Kürzung der bestehenden Polster um rund ein Drittel,
   und nur unterhalb von 780 px. Am Desktop ändert sich nichts.

   Die Wellen-Trenner zwischen den Sektionen bringen zusätzlich 35 bis
   76 px eigene Höhe mit. Sie werden auf dem Handy flacher gezeichnet –
   dort ist der Bogen ohnehin kaum als Form erkennbar. */
@media(max-width:780px){
  /* `section[class]` statt `section`: die Sektionen tragen eigene
     Regeln ueber ihre Klasse (`.leistungen{padding:88px 0}` und
     aehnliche). Der blosse Elementselektor verliert gegen sie -
     nachgemessen blieben die Polster bei 88 und 96 px. Das
     Attributselektor-Anhaengsel hebt die Spezifitaet gerade so weit.

     Der Hero ist ausgenommen: er steht mit 26/30 px ohnehin eng, eine
     Vereinheitlichung wuerde ihn groesser machen statt kleiner. */
  /* .zahlen und .cta tragen SVG-Wellenkanten (je 54 px, absolut
     positioniert ueber dem Inhalt). Die pauschale Kuerzung schob den
     Inhalt unter die Welle - gemessen am 25.08.2026 auf 390 px:
     17 px Rest oben, -31 px unten, der Knopf lag also in der Welle.
     Beide sind hier ausgenommen und bekommen unten eine eigene,
     wellenbewusste Polsterung. */
  section[class]:not(.hero):not(.zahlen):not(.cta){
    padding-top:clamp(46px,12vw,58px);
    padding-bottom:clamp(46px,12vw,58px);
  }
  section .sec-head{margin-bottom:26px}
  svg.welle{height:26px}
  svg.welle-gross{height:38px}

  /* Aufeinanderfolgende Karten standen teils Kante an Kante
     (Rückmeldung „diese zwei Boxen sitzen zu eng aufeinander"),
     während die Sektionen darüber auseinanderfielen. Beides gehört
     zusammen: enger zwischen den Sektionen, luftiger innerhalb. */
  .info-karten{gap:14px}
  .info-karten + .btn,
  .info-karte + .btn,
  .chip-grid + .btn{margin-top:22px}
}

/* Hinweiskasten „gut zu wissen": Vorspann auf eigene Zeile
   ---------------------------------------------------------------
   Rückmeldung vom 18.08.2026: hinter dem fetten Vorspann brach die
   Zeile mitten im Satz um und ließ eine auffällige Lücke stehen
   („Alle Leistungen sind" … Rest erst darunter). Der Vorspann endet
   auf einem Doppelpunkt – er darf eine eigene Zeile bekommen, dann
   beginnt der Fließtext sauber links darunter. */
.goae-kasten b:first-child{display:block;margin-bottom:2px}

/* Release-Korrekturen 2026-08-21
   ---------------------------------------------------------------
   Die Signalfarbe muss sowohl als Text auf den hellen Hintergruenden
   als auch mit weisser Schrift auf der Flaeche WCAG-AA erreichen.
   #C7341F ergibt 5,33:1 auf Weiss und 4,72:1 auf #FDEEEB.

   Dekorative Ringe und Punktfelder werden auf kleinen und mittleren
   Ansichten ausgeblendet, weil sie dort wiederholt Text ueberlagerten.
   Am breiten Desktop bleibt die Gestaltung erhalten; nur der belegte
   Konflikt rechts unten in der Leistungssektion wird unterdrueckt.

   Bei reduzierter Bewegung setzt dieser spaet geladene Block saemtliche
   CSS-Animationen und -Transitionen wirklich ausser Kraft. Die Inhalte
   bleiben durch die bestehenden Reduced-Motion-Regeln sichtbar. */
:root{--signal:#C7341F}

@media(max-width:1280px){
  .ring,.dots{display:none!important}
}

@media(min-width:1281px){
  .leistungen .dots.d2{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* ---------------------------------------------------------------
   8) Befunde vom 25.08.2026 – halbiertes Desktop-Fenster und
      Wellen-Sektionen auf dem Handy
   --------------------------------------------------------------- */

/* Punkt A – Wellen-Sektionen brauchen die Wellenhoehe zusaetzlich.
   `.zahlen` und `.cta` legen je eine 54 px hohe SVG-Kante absolut
   ueber ihren oberen und unteren Rand. Die Polsterung muss diese
   54 px erst ausgleichen, bevor ueberhaupt Luft entsteht.
   Gemessen auf 390 px vor der Korrektur: 17 px Rest oben,
   -31 px unten (der Knopf ragte in die Welle).
   Rechnung: 54 px Welle + 34-44 px Luft. */
@media (max-width: 780px) {
  section[class].zahlen,
  section[class].cta {
    padding-top: calc(54px + clamp(36px, 9.5vw, 46px));
    padding-bottom: calc(54px + clamp(36px, 9.5vw, 46px));
  }
}

/* Punkt A2 - der obere Abstand fiel trotzdem 24 px groesser aus als
   der untere. Ursache ist kein Polster, sondern der Aussenabstand der
   ersten Zeile im Inhalt (`h2{margin-top:24px}`): `.wrap` traegt weder
   Rahmen noch Polster, der Abstand faellt also mit ihm zusammen und
   schiebt den ganzen Block nach unten. Gemessen: 59 px Luft oben
   gegen 11 px unten. Der Abstand wird in diesen beiden Sektionen
   zurueckgesetzt - die Polsterung allein bestimmt den Rhythmus.
   Gilt auch am Desktop, wo dieselbe Schieflage bestand (90 zu 66). */
section[class].zahlen > .wrap > :first-child,
section[class].cta > .wrap > :first-child {
  margin-top: 0;
}

/* Punkt B – halbiertes Desktop-Fenster (641-1020 px).
   In diesem Band stapelt `.hero-grid` bereits einspaltig, die Spalte
   ist dann rund 735 px breit. Das Foto blieb mit `justify-self:start`
   und `max-width:460px` links kleben - rechts daneben standen 275 px
   Leerraum. Zentriert steht es mittig in der Spalte, und die
   Foto-Badges (`.tag`, negativ versetzt) bleiben an ihm haengen
   statt an den Rand des Fensters zu rutschen. */
@media (max-width: 1020px) {
  .hero .hero-foto {
    justify-self: center;
    margin-inline: auto;
  }
}

/* Punkt C – dieselbe Ursache in der Arzt-Sektion.
   `.arzt-foto` ist ein `position:relative`-Kasten ohne Breitenbegrenzung
   und wurde in der gestapelten Spalte 735 px breit, waehrend das Bild
   darin bei 560 px endet. Der limettengruene Kreis (`::before`,
   `inset:-12px -12px auto auto`) haengt am Kasten, nicht am Bild - er
   schwebte dadurch 175 px rechts neben dem Foto im Leeren.
   `width:fit-content` zieht den Kasten auf die Bildbreite zusammen. */
@media (max-width: 1020px) {
  .arzt-grid .arzt-foto {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}