/* =====================================================================
   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. Darunter wandert eine sehr kleine Blase
   langsam hin und her – vom „D" bis zum letzten „o".
   --------------------------------------------------------------- */
/* 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;
}

/* Die Blase: 4 px, unterhalb der Grundlinie, wandert über die volle
   Breite des Links und damit genau vom ersten bis zum letzten Buchstaben.
   14 s je Richtung – langsam genug, um nicht abzulenken. */
.dl-signatur-blase {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lila, #DCD3F5);
  opacity: .75;
  pointer-events: none;
  animation: dl-blase 14s ease-in-out infinite alternate;
}

.dl-signatur-link:hover .dl-signatur-blase,
.dl-signatur-link:focus-visible .dl-signatur-blase {
  background: var(--lime, #D8F26E);
  opacity: 1;
}

@keyframes dl-blase {
  from { left: 0; }
  to   { left: calc(100% - 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .dl-signatur-blase { animation: none; left: 0; }
}

/* 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": eine Reihe, gemeinsame Mittelachse
   ---------------------------------------------------------------
   Vorgabe vom 18.08.2026: die vier Logos sollen sauber nebeneinander
   liegen. Gemessen bei 1440 px lagen sie das nicht: die Mitten der
   vier Marken standen auf 913 / 927 / 927 / 927 px – Grünhorn war
   14 px zu hoch. Ursache ist ein von Hand gesetzter Versatz
   (`.ml-gh{top:-11px}` bzw. `-8px`), der einen Höhenunterschied
   ausgleichen sollte, den es so nicht mehr gibt.

   Statt den Versatz nachzujustieren wird er entfernt und die Reihe
   auf eine gemeinsame Achse gestellt.

   Die Höhe steht je Marke ausdrücklich und nicht als `max-height`:
   die Logos sind Inline-SVG ohne `width`/`height`-Attribut, und mit
   `height:auto` fallen sie auf 0 zusammen (nachgemessen). Die Werte
   bleiben je Logo verschieden – ein rundes Signet muss größer stehen
   als eine Wortmarke, sonst wirkt es kleiner. Gleich ist die
   Mittelachse, nicht die Zahl. */
/* `.bekannt .wrap .logos` und nicht `.bekannt .logos`: unter 640 px
   steht im Inline-Block eine Regel mit genau dieser Spezifität, die
   die Reihe zum 2x2-Raster macht. Mit dem kürzeren Selektor verliert
   die Reihe dort – gemessen zwei Mittelachsen statt einer. */
.bekannt .wrap .logos,
.bekannt .logos{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,4vw,72px);
  grid-template-columns:none;
  width:100%;
}
.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%}
.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}

@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}
}

/* 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. */
  section[class]:not(.hero){
    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}