/* =====================================================================
   DL Lindenthal – UI-Layer
   Gemeinsame Komponenten aller drei Websites. Wird nach dl-brand.css
   geladen und behebt gezielt die im Auftrag benannten Punkte:
   Footer-Icons, Safe-Area, Rechtstexte, Hero-Karten, Bewertungen,
   klickbare Karten, Instagram-Sektion, Schreibeffekt, Ausrichtung.
   ===================================================================== */

/* ---------------------------------------------------------------
   1) Grundlagen: kein horizontaler Überlauf, Safe-Area
   --------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
html,
body { max-width: 100%; overflow-x: clip; }

/* Offenes Mobilmenü: der Hintergrund bleibt stehen.
   Die Scrollposition wird von dl-nav.js gemerkt und wiederhergestellt. */
html.dl-menue-offen,
html.dl-menue-offen body { overflow: hidden; }
html.dl-menue-offen body {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}
/* Der fixierte body traegt bei offenem Menue ein negatives top (die
   gemerkte Scrollposition). Ein position: sticky gesetzter Kopf folgt
   diesem Versatz und wandert mit aus dem Bild – nach dem Oeffnen weit
   unten auf der Seite lag der Burger dann ausserhalb des Sichtfelds und
   war nicht mehr zu treffen: das Menue liess sich nicht mehr schliessen.
   Bei offenem Menue wird der Kopf deshalb am Viewport festgemacht. Die
   Hoehe, die er dabei aus dem Fluss nimmt, gleicht dl-nav.js im
   body-Versatz wieder aus, damit der Hintergrund nicht springt. */
html.dl-menue-offen header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Mobilmenü: Safe-Area und eigenes Scrollen bei vielen Einträgen. */
header .nav-mobil {
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
header .nav-mobil a { min-height: 44px; display: flex; align-items: center; }

/* Kopfzeile respektiert die Display-Aussparung oben. */
header { padding-top: env(safe-area-inset-top, 0px); }

/* Dekorative Ringe/Punkte dürfen nie eine Scrollbreite erzeugen. */
.ring,
.dots,
.welle,
.f-welle { pointer-events: none; }

/* Seitlicher Sicherheitsabstand auf Geräten mit Display-Aussparung. */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--wrap-pad, 20px), env(safe-area-inset-left));
    padding-right: max(var(--wrap-pad, 20px), env(safe-area-inset-right));
  }
}

/* Lange Wörter, URLs und E-Mail-Adressen brechen um statt zu sprengen. */
p,
li,
dd,
td,
th,
h1, h2, h3, h4, h5, h6,
.lead,
.f-brand p { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------
   2) Footer – Social-Icons (Bild 1)
   Touch-Fläche mindestens 48 x 48 px, Icon 26 px.
   --------------------------------------------------------------- */
.f-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.f-social a {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, .26);
  display: grid;
  place-items: center;
  color: #E4E1F5;
  padding: 0;
  opacity: 1;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.f-social a:hover {
  color: var(--ink, #232150);
  background: var(--lime, #D8F26E);
  border-color: var(--lime, #D8F26E);
  transform: translateY(-2px);
}
.f-social a:focus-visible {
  outline: 3px solid var(--lime, #D8F26E);
  outline-offset: 3px;
}
.f-social svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Footer-Inhalte dürfen auf keiner Breite abgeschnitten werden. */
footer .f-grid > div { min-width: 0; }
footer a,
footer span,
footer p { overflow-wrap: anywhere; }
footer .f-bottom { gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   Kontaktformulare: eine Spalte, auf jeder Breite (Vorgabe 14.08.2026)
   --------------------------------------------------------------- */
/* Vorname und Nachname duerfen auf keiner Breite nebeneinander
   stehen.
   Der Zweispalter ist `.form-row` im Seitenstil:
       .form-row{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
   Gemessen bei 1440 px stand dadurch Vorname neben E-Mail und
   Nachname neben Telefon – zwei Spalten, Lesereihenfolge quer.
   `header`-artige Spezifitaet reicht hier nicht, weil die Seitenregel
   dieselbe hat (0,1,0); `form .form-row` (0,1,1) sticht sie. */
form .form-row {
  grid-template-columns: minmax(0, 1fr);
}
.form,
form .ff,
form .ff.voll {
  grid-template-columns: minmax(0, 1fr);
}
.form input,
.form select,
.form textarea,
.ff input,
.ff select,
.ff textarea {
  width: 100%;
  max-width: none;
}

/* Zwischen 641 und 1020 px steht .f-grid auf zwei Spalten (Regel im
   Seitenkopf). Fuenf Kinder ergeben dort drei Reihen, und „Rechtliches"
   sitzt als fuenftes allein in der letzten – gemessen bei 1000 px:

     Reihe 1   f-brand · Praxis
     Reihe 2   Kontakt · Öffnungszeiten
     Reihe 3   Rechtliches            <- allein

   Die Markenspalte ueber beide Spalten zu ziehen macht aus fuenf Kindern
   drei volle Reihen ohne Waise. Ab 1021 px bleibt die einreihige
   Fuenfspalten-Anordnung unberuehrt (bei 1440 px gemessen: alle fuenf auf
   derselben Grundlinie, „Rechtliches" ganz rechts). */
@media (min-width: 641px) and (max-width: 1020px) {
  footer .f-grid > .f-brand { grid-column: 1 / -1; }
}

/* Abstand nach unten, damit der WhatsApp-Knopf und die CMS-Leiste
   nichts überlagern. */
footer { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  footer .f-grid { gap: 26px; }
  footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------
   3) Rechtstexte: Impressum, Datenschutz, AGB (Punkt 4)
   --------------------------------------------------------------- */
/* Nur der Inhaltsbereich wird schmaler. Ohne die Eingrenzung auf <main>
   traf die Regel jedes .wrap – auch das im Kopf- und Fussbereich. Dadurch
   sassen Logo, Navigation und Fusszeile auf den Rechtstexten enger als auf
   allen anderen Seiten. */
.dl-recht main .wrap,
.rechtstext main .wrap { max-width: 812px; }

/* Eine gemeinsame linke Kante fuer die ganze Seite.
   Vorher lagen drei verschiedene Spaltenbreiten uebereinander:
     .hero-inner   812px  – Ueberschrift, Vorspann, Stand
     .prosa        760px  – Zwischenueberschriften und Fliesstext
     .adresse      760px  – Kasten im Textfluss
   Alle drei waren mit `margin: 0 auto` mittig gesetzt. Im 808 px
   breiten Inhaltsfeld begann der Fliesstext dadurch 24 px weiter
   rechts als die H1 darueber – eine sichtbare Stufe an der linken
   Kante. Jetzt fuellt jeder Block das Feld des `.wrap`; dessen
   Hoechstbreite steht oben auf 812 px, damit die Spalte so breit
   bleibt wie die Kaesten bisher waren (760 px netto).

   `:not(.wrap)` ist der Kern: auf der Kopfsektion tragen `wrap` und
   `hero-inner` DASSELBE Element (`<div class="wrap hero-inner reveal">`).
   Ohne den Ausschluss hob `max-width: none` die 812 px des Rahmens
   wieder auf – gleiche Spezifitaet, spaetere Regel gewinnt. Gemessen bei
   1440 px: Ueberschrift bei x=20 ueber die volle Breite, Fliesstext bei
   x=327 in der mittigen Spalte. Zwei linke Kanten auf einer Seite,
   auf allen drei Rechtstexten und allen drei Websites. */
.dl-recht main .hero-inner:not(.wrap),
.dl-recht main .prosa,
.rechtstext main .hero-inner:not(.wrap),
.rechtstext main .prosa {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.dl-recht table,
.rechtstext table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.dl-tabelle-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
}
.dl-recht a { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 640px) {
  .dl-recht h1 { font-size: clamp(26px, 7.5vw, 38px); }
  .dl-recht h2 { font-size: clamp(19px, 5.4vw, 25px); }
  .dl-recht p,
  .dl-recht li { font-size: 15px; line-height: 1.65; }
}

/* ---------------------------------------------------------------
   4) Hero-Informationskarten (Punkt 5)
   Weiß = Person, Lime = Tempo, Dunkelblau = Qualität.
   Auf schmalen Displays werden die Karten unter das Bild gestapelt,
   damit nichts über den Rand ragt.
   --------------------------------------------------------------- */
.hero-foto .tag {
  max-width: min(80%, 260px);
  line-height: 1.35;
}
@media (max-width: 720px) {
  /* Vorgabe vom 15.08.2026: die drei Kacheln liegen auch auf dem Handy
     im Bild – genau wie auf dem Rechner. Vorher wurden sie herausgeloest
     und ueber dem Foto gestapelt.

     Der Container bleibt im Markup (er traegt die CMS-Felder), faellt aber
     mit `display:contents` aus dem Layout. Nur so richten sich die Kacheln
     weiter an `.hero-foto` aus, das `position:relative` traegt. */
  .dl-hero-karten { display: contents; }
  .hero-foto .tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    max-width: min(72%, 215px);
    font-size: 12px;
    padding: 6px 11px;
  }
}

/* ---------------------------------------------------------------
   5) Feedbacken (Punkt 6)
   Anonymisierte Profil-Illustrationen statt Stockfotos.
   --------------------------------------------------------------- */
.dl-avatar {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-family: 'Schibsted Grotesk', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  background: var(--dl-av, #6D5BD0);
  overflow: hidden;
  flex: none;
}
.dl-avatar span { line-height: 1; font-size: .82em; }
.dl-avatar svg { width: 62%; height: 62%; opacity: .9; }
.dl-avatar.av-1 { --dl-av: linear-gradient(135deg, #6D5BD0, #8E7CE8); }
.dl-avatar.av-2 { --dl-av: linear-gradient(135deg, #2F9E7E, #57C7A3); }
.dl-avatar.av-3 { --dl-av: linear-gradient(135deg, #C86A2E, #E9A05A); }
.dl-avatar.av-4 { --dl-av: linear-gradient(135deg, #2C6BB5, #5A9BE0); }
.dl-avatar.av-5 { --dl-av: linear-gradient(135deg, #A4436F, #D0779E); }
.dl-avatar.av-6 { --dl-av: linear-gradient(135deg, #4A487A, #7A76B8); }

.t-person .dl-avatar { width: 44px; height: 44px; font-size: 15px; }
.google .avatare .dl-avatar { font-size: 12px; }

/* Bewertungszahl bleibt einzeilig. */
.google > span:last-child { white-space: nowrap; }
@media (max-width: 420px) {
  .google { flex-wrap: wrap; row-gap: 6px; }
  .google > span:last-child { white-space: normal; }
}

/* Untertitel „Feedback" darf nicht umbrechen. */
.t-person span > span { white-space: nowrap; }

/* ---------------------------------------------------------------
   6) Vollständig klickbare Karten (Punkt 7 und 10)
   Umgesetzt als Stretched-Link: kein verschachteltes <a>, der
   vorhandene Link spannt seine Klickfläche über die ganze Karte.
   --------------------------------------------------------------- */
.dl-karte { position: relative; }
.dl-karte .dl-karte-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* Inhalte, die selbst anklickbar bleiben sollen, liegen darüber. */
.dl-karte a:not(.dl-karte-link),
.dl-karte button { position: relative; z-index: 2; }

.dl-karte:hover { cursor: pointer; }
.dl-karte:focus-within {
  outline: 3px solid var(--lila-tief, #6D5BD0);
  outline-offset: 3px;
}
.dl-karte .dl-karte-link:focus-visible { outline: none; }

/* Sichtbare Hover-Rückmeldung für die ganze Karte. */
.l-card.dl-karte,
.r-card.dl-karte,
.rg-card.dl-karte {
  transition: transform .22s var(--ease, ease), box-shadow .22s var(--ease, ease);
}
.l-card.dl-karte:hover,
.r-card.dl-karte:hover,
.rg-card.dl-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(35, 33, 80, .14);
}
@media (prefers-reduced-motion: reduce) {
  .l-card.dl-karte:hover,
  .r-card.dl-karte:hover,
  .rg-card.dl-karte:hover { transform: none; }
}

/* Textauswahl innerhalb der Karte bleibt möglich. */
.dl-karte p,
.dl-karte li,
.dl-karte h3 { position: relative; z-index: 2; pointer-events: none; }
.dl-karte p a,
.dl-karte li a { pointer-events: auto; }

/* ---------------------------------------------------------------
   7) Instagram-Sektion (Punkt 9, Bild 7)
   --------------------------------------------------------------- */
.dl-insta {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--creme, #F3F0EA);
  overflow: hidden;
}
.dl-insta-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.dl-insta-phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  background: var(--ink, #232150);
  border-radius: 34px;
  padding: 12px;
  box-shadow: 0 26px 60px rgba(35, 33, 80, .28);
}
.dl-insta-phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
}
.dl-insta-screen {
  background: var(--ink, #232150);
  border-radius: 24px;
  padding: 34px 16px 16px;
  color: #fff;
}
.dl-insta-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.dl-insta-kopf b { font-size: 14px; }
.dl-insta-marke {
  background: var(--lime, #D8F26E);
  color: var(--ink, #232150);
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
}
.dl-insta-profil {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.dl-insta-profil > .dl-avatar,
.dl-insta-profil > img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
}
.dl-insta-zahlen {
  display: flex;
  gap: 14px;
  text-align: center;
}
.dl-insta-zahlen span {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #C7C3E4;
  line-height: 1.3;
}
.dl-insta-zahlen b { font-size: 15px; color: #fff; }
.dl-insta-bio {
  font-size: 12px;
  color: #D5D2EC;
  line-height: 1.55;
  margin-bottom: 12px;
}
.dl-insta-bio b { color: #fff; display: block; font-size: 13px; }
.dl-insta-knoepfe { display: flex; gap: 8px; margin-bottom: 14px; }
.dl-insta-knoepfe span {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.dl-insta-knoepfe span:first-child { background: #2A7FF0; }
.dl-insta-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.dl-insta-raster i {
  display: block;
  aspect-ratio: 1;
  border-radius: 5px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 8px, rgba(255, 255, 255, .03) 8px 16px),
    rgba(255, 255, 255, .07);
}
.dl-insta-txt { min-width: 0; }
.dl-insta-txt h2 { margin: 10px 0 14px; }
.dl-insta-txt p { color: var(--grau, #4A487A); max-width: 54ch; }
.dl-insta-liste { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 11px; }
.dl-insta-liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  color: var(--ink, #232150);
}
.dl-insta-liste svg { width: 19px; height: 19px; flex: none; color: var(--lila-tief, #6D5BD0); margin-top: 2px; }

@media (max-width: 860px) {
  .dl-insta-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dl-insta-txt { text-align: left; }
  .dl-insta-phone { max-width: 280px; }
}

/* ---------------------------------------------------------------
   8) Schreibeffekt in der Ratgeber-Überschrift (Punkt 11)
   Kein Layoutsprung: der fertige Text steht unsichtbar im Fluss.
   --------------------------------------------------------------- */
.dl-typer { position: relative; display: inline-block; }
.dl-typer-mass { visibility: hidden; }
/* Der Cursor beansprucht Breite (3px + 3px Abstand). Ohne dieselbe
   Reserve im Platzhalter bricht der sichtbare Text eine Zeile frueher
   um und ragt aus der reservierten Hoehe heraus – er lag dann ueber
   der Karte darunter. */
.dl-typer-mass::after {
  content: "";
  display: inline-block;
  width: 6px;
}
.dl-typer-sicht {
  position: absolute;
  inset: 0;
  display: block;
}
.dl-typer-cursor {
  display: inline-block;
  width: 3px;
  height: .95em;
  margin-left: 3px;
  vertical-align: -.12em;
  background: var(--lila-tief, #6D5BD0);
  animation: dl-blinken 1s steps(2, start) infinite;
}
@keyframes dl-blinken { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dl-typer-cursor { display: none; }
  .dl-typer-mass { visibility: visible; }
  .dl-typer-sicht { display: none; }
}

/* ---------------------------------------------------------------
   9) Gemeinsame untere Ausrichtung (Punkt 21, Bild 6)
   Textspalte und Bildspalte enden auf derselben Linie.
   --------------------------------------------------------------- */
.dl-buendig { align-items: stretch; }
.dl-buendig > * {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Ohne die Höhenangabe rechnet der innere Flex-Kontext mit der
     Inhaltshöhe statt mit der gestreckten Spaltenhöhe – der letzte
     Knopf bliebe dann einige Pixel über der Grundlinie stehen. */
  height: 100%;
}
/* Der letzte Aktionsknopf der Textspalte wird nach unten geschoben,
   damit er mit der Unterkante der Bildspalte abschließt. Es wird keine
   feste Höhe gesetzt – die Spalten wachsen weiterhin mit dem Inhalt. */
/* Das !important überschreibt gezielt den festen oberen Abstand, den
   das Seiten-Stylesheet innerhalb einer Media-Query auf denselben
   Knopf setzt. Ohne das bliebe er einige Pixel über der Grundlinie. */
.dl-buendig a.btn.dl-buendig-schluss,
.dl-buendig .dl-buendig-schluss {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  align-self: flex-start;
}
.dl-buendig > * > img,
.dl-buendig > * > picture,
.dl-buendig > * > figure { margin-top: auto; }

/* Ausnahmen: Textspalten, die Block bleiben. Als Flex-Spalte wuerde ihr
   einleitender Chip `.kicker` auf die volle Spaltenbreite gedehnt – das
   Seiten-Stylesheet setzt dort `display:inline-block`, was von
   `.dl-buendig > *` ueberschrieben wird. Dazu zieht `height:100%` mit dem
   nach unten geschobenen Knopf eine Luecke zwischen Text, Aufzaehlung und
   Knopf auf.

   .k-info   Kontaktspalte (S-01): Chip „Kontakt" 538 statt 101 px breit,
             Abstand WhatsApp-Kasten/Liste 46 statt 26 px.
   .clip-txt Praxisalltag-Spalte (A3): Chip „Aus dem Praxisalltag" auf voller
             Breite, Knopf am Spaltenfuss statt der 22 px aus dem Stylesheet.

   Das Raster behaelt `dl-buendig`: die Buendigkeit unten traegt weiterhin
   die jeweils andere Spalte (Formular bzw. Telefonrahmen). */
.dl-buendig .k-info,
.dl-buendig .clip-txt {
  display: block;
  height: auto;
}

@media (max-width: 860px) {
  .dl-buendig > * { display: block; }
  .dl-buendig .dl-buendig-schluss { margin-top: 18px; }
}

/* ---------------------------------------------------------------
   10) Kontaktformular (Punkt 8 und 22)
   --------------------------------------------------------------- */
.form input,
.form select,
.form textarea { max-width: 100%; }
/* Platzhalterfarbe: #8C89B0 erreichte auf Weiß nur 3,32:1
   (Audit-Befund 9). #6B6790 sind 5,29:1 auf Weiß und 4,65:1 auf Creme. */
.form input::placeholder,
.form textarea::placeholder { color: #6B6790; opacity: 1; }
.form .dl-pflicht { color: var(--lila-tief, #6D5BD0); }
.form .dl-fehler {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #C0392B;
}
.form .dl-feld-fehler input,
.form .dl-feld-fehler select,
.form .dl-feld-fehler textarea {
  border-color: #C0392B !important;
  background: #FDF3F2;
}
.form .dl-zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grau, #4A487A);
}
.form .dl-zustimmung input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 1px 0 0;
  accent-color: var(--lila-tief, #6D5BD0);
}
.form .dl-melden {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.form .dl-melden[data-art="fehler"] { background: #FDF3F2; color: #8E2C20; }
.form .dl-melden[data-art="ok"] { background: rgba(216, 242, 110, .3); color: var(--ink, #232150); }

@media (max-width: 640px) {
  .k-grid,
  .kontakt-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Herkunftshinweis auf aggregierten Ratgeber-Kacheln der Hub-Seite */
.r-quelle {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lila-tief, #6D5BD0);
  background: rgba(109, 91, 208, .12);
  padding: 4px 9px;
  border-radius: 7px;
}

/* ---------------------------------------------------------------
   BMI-Ergebnis auf der Abnehmen-Seite
   „Ihr BMI" war weiß und damit kaum vom Fließtext zu unterscheiden.
   Es erhält jetzt denselben Lilaton wie die Kategorie-Pille daneben
   („Adipositas Grad …").
   --------------------------------------------------------------- */
.r-ergebnis .bmi-zeile .label {
  color: var(--lila, #DCD3F5);
  opacity: 1;
}

/* Signatur in der Fußzeile */
.f-bottom .dl-signatur {
  opacity: .55;
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .f-bottom .dl-signatur { width: 100%; }
}

/* ===============================================================
   Mobil, Tablet und Textumbruch
   =============================================================== */

/* ---------------------------------------------------------------
   1) Trefferflächen der Karussell-Punkte
   Die Punkte unter den Zitaten sind 9 × 9 px groß – deutlich unter
   dem Mindestmaß von 24 × 24 px und auf Touchgeräten kaum zu
   treffen. Der sichtbare Punkt bleibt unverändert; vergrößert wird
   nur die unsichtbare Trefferfläche. Der Abstand wächst von 8 auf
   16 px, damit sich benachbarte Flächen nicht überlappen.
   --------------------------------------------------------------- */
.kar-dots { gap: 16px; }
.kar-dots > button { position: relative; }
.kar-dots > button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
/* Auf Touchgeräten senkrecht auf 44 px – waagerecht würde es
   sonst mit dem Nachbarpunkt kollidieren. */
html.dl-touch .kar-dots > button::after { height: 44px; }

/* Hinweis zu den Icon-Größen: Sie unterscheiden sich je Bauteil
   (.hero-panel li svg 18px, .th-punkte svg 19px, .l-ic svg 23px,
   .f-punkte svg 16px). Das ist Absicht und je Bauteil auf allen Seiten
   gleich – hier wird bewusst nicht vereinheitlicht. */

/* ---------------------------------------------------------------
   2) Lange deutsche Zusammensetzungen
   „Umsatzsteuer-Identifikationsnummer" (34 Zeichen) und ähnliche
   Wörter sprengen auf schmalen Displays die Spalte oder reißen
   große Lücken. Die Silbentrennung greift, weil <html lang="de">
   gesetzt ist.
   --------------------------------------------------------------- */
p, li, dd, dt, .faq-a, figcaption {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   3) Zeilenlänge
   Die frühere Deckelung auf 68ch galt nur für <p> und <li>. Der
   Adresskasten, die Tabellen und die Knöpfe daneben blieben bei der
   vollen Spaltenbreite – der Fließtext endete dadurch rund 250 px
   vor ihnen und die rechte Kante der Seite war zweimal gebrochen.
   Die Spalte selbst begrenzt die Zeilenlänge jetzt: `.dl-recht main
   .wrap` steht auf 812 px, netto 760 px.
   --------------------------------------------------------------- */

/* Ausgleich für Überschriften und Absätze: kein einzelnes Wort
   mehr auf der letzten Zeile. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------------------------------------------------------------
   4) Kleinstschrift in der Fußzeile
   12,5 px sind auf Mobilgeräten grenzwertig.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .f-bottom,
  .f-bottom .dl-signatur,
  .f-zeiten .f-akuthin { font-size: 13px; }
}

/* ---------------------------------------------------------------
   5) Signatur: „Acessio" als Link mit Wellenbewegung
   Die Welle liegt in einem Streifen mit overflow:hidden und wird
   per transform verschoben – das läuft auf dem Compositor und
   erzeugt kein Umbrechen des Textes.
   --------------------------------------------------------------- */
.dl-signatur-link {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  padding-bottom: 3px;
  transition: color 200ms 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;
}
.dl-signatur-welle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.dl-signatur-welle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5' viewBox='0 0 16 5'%3E%3Cpath d='M0 2.5c2-2 6-2 8 0s6 2 8 0' fill='none' stroke='%23D8F26E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 16px 5px;
}
/* Nur auf Geräten mit echtem Zeigegerät – auf Touch gibt es kein
   Überfahren, dort bleibt der Link schlicht antippbar. */
@media (hover: hover) {
  .dl-signatur-link:hover .dl-signatur-welle { opacity: 1; }
  .dl-signatur-link:hover .dl-signatur-welle::before {
    animation: dl-welle 1.1s linear infinite;
  }
}
.dl-signatur-link:focus-visible .dl-signatur-welle { opacity: 1; }

@keyframes dl-welle {
  from { transform: translateX(0); }
  to   { transform: translateX(-16px); }
}

@media (prefers-reduced-motion: reduce) {
  .dl-signatur-welle::before { animation: none !important; }
}

/* ===============================================================
   Bearbeiten auf der Seite („Stift")
   Nur sichtbar, wenn der Editor ausdrücklich angefordert wurde –
   dl-edit.js setzt dafür die Klasse dl-bearbeiten am <html>.

   Die Leiste ist Teil desselben Werkzeugs wie die Adminoberfläche und
   benutzt deren Marken: --ink, --lila-tief, --lime, --linie, --radius.
   Ein Schatten, ein Radius, keine Verläufe, keine Glasoptik.

   Höhe: dl-edit.js misst die Leiste und schreibt sie nach
   --dl-edit-leiste-hoehe. Die Seite hält unten genau so viel Platz
   frei – so verdeckt die Leiste auch dann nichts, wenn sie umbricht.
   =============================================================== */
.dl-edit-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ink, #232150);
  color: #fff;
  font: 500 14px/1.4 system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(35, 33, 80, .06);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
/* Zwei Zeilen: oben der Ort, unten die Handlungen. Auf schmalen
   Bildschirmen bleibt es bei zwei Zeilen, statt alles zu stauchen. */
.dl-edit-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}
.dl-edit-ort { row-gap: 4px; }
.dl-edit-aktionen { gap: 8px 10px; }
.dl-edit-titel {
  font-weight: 700;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, .28);
}
/* Website und Seite: Beschriftung leiser, Wert deutlich – die drei
   Auftritte sehen einander ähnlich, hier wird verwechselt. */
.dl-edit-ortsangabe { white-space: nowrap; }
.dl-edit-ortsmarke {
  font-weight: 400;
  /* Reines Weiß mit 78 % auf --ink liegt bei rund 8:1. */
  color: rgba(255, 255, 255, .78);
  margin-right: 2px;
}
.dl-edit-zaehler {
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
/* Zustand nicht nur über Farbe: der Zähler nennt die Zahl im Text. */
.dl-edit-zaehler[data-offen="1"] {
  color: var(--lime, #D8F26E);
  font-weight: 700;
}
.dl-edit-link {
  color: #fff;
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-underline-offset: 3px;
}
.dl-edit-link:hover { color: var(--lime, #D8F26E); }
.dl-edit-status {
  flex: 1 1 240px;
  min-width: 0;
  color: rgba(255, 255, 255, .9);
}
.dl-edit-status[data-art="ok"] { color: var(--lime, #D8F26E); }
/* --signal (#E8503A) erreicht auf dem dunklen --ink keine 4,5:1.
   Deshalb hier die aufgehellte Fassung derselben Farbe. */
.dl-edit-status[data-art="fehler"] { color: #FFB4A8; }
.dl-edit-knopf {
  border: 0;
  border-radius: var(--radius, 14px);
  padding: 10px 18px;
  min-height: 44px;
  min-width: 44px;
  font: 600 14px/1.2 system-ui, sans-serif;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms var(--ease, ease);
}
.dl-edit-knopf:hover { background: rgba(255, 255, 255, .26); }
.dl-edit-knopf:disabled { opacity: .45; cursor: not-allowed; }
/* Entwurf speichern: die harmlose Handlung, ruhig in Weiß. */
.dl-edit-speichern { background: var(--weiss, #FFFFFF); color: var(--ink, #232150); }
.dl-edit-speichern:hover { background: var(--creme, #F3F0EA); }
/* Veröffentlichen: die Hauptaktion, in Lila. */
.dl-edit-veroeffentlichen { background: var(--lila-tief, #6D5BD0); color: #fff; }
.dl-edit-veroeffentlichen:hover { background: #7d6ddb; }
/* Sichtbarer Fokus auf allem, was bedient wird. */
.dl-edit-leiste :focus-visible {
  outline: 2px solid var(--lila-tief, #6D5BD0);
  outline-offset: 2px;
}
/* Auf --ink hat --lila-tief zu wenig Abstand – dort in Weiß. */
.dl-edit-knopf:focus-visible,
.dl-edit-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Abstand, damit die Leiste keinen Seiteninhalt verdeckt. Der Wert
   kommt gemessen aus dl-edit.js; 96px ist der Rückfall, falls die
   Messung noch nicht gelaufen ist. */
html.dl-bearbeiten body {
  padding-bottom: calc(var(--dl-edit-leiste-hoehe, 96px) + 12px);
}
html.dl-bearbeiten {
  scroll-padding-bottom: calc(var(--dl-edit-leiste-hoehe, 96px) + 12px);
}

/* Zwei Beschriftungen, eine sichtbar. Breit die ausführliche. */
.dl-edit-kurz { display: none; }

/* Schmale Bildschirme: kürzere Beschriftungen, engere Abstände, die
   Meldung bekommt eine eigene Zeile. Nichts wird gestaucht, nichts
   scrollt quer – die Leiste wird lieber höher. */
@media (max-width: 640px) {
  .dl-edit-leiste {
    font-size: 13px;
    gap: 6px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .dl-edit-lang { display: none; }
  .dl-edit-kurz { display: inline; }
  /* „Bearbeiten" wiederholt nur, was die Leiste ohnehin zeigt; die
     Region trägt den Namen weiterhin über aria-label. */
  .dl-edit-titel { display: none; }
  .dl-edit-zeile { gap: 4px 10px; }
  .dl-edit-ort { font-size: 12px; }
  .dl-edit-link { margin-left: 0; }
  .dl-edit-status { flex: 1 1 100%; order: -1; }
  .dl-edit-knopf { padding: 10px 14px; }
}

/* Bearbeitbare Felder */
html.dl-bearbeiten .dl-edit-feld {
  position: relative;
  cursor: pointer;
  outline: 1px dashed rgba(109, 91, 208, .5);
  outline-offset: 3px;
}
html.dl-bearbeiten .dl-edit-feld:hover { outline-color: var(--lila-tief, #6D5BD0); }
html.dl-bearbeiten .dl-edit-feld:focus-visible {
  outline: 2px solid var(--lila-tief, #6D5BD0);
  outline-offset: 2px;
}
/* Der Stift ist ein Pseudoelement – so landet er nie im gespeicherten
   Text und überlebt das Nachladen der Inhalte durch dl-cms.js.
   Als Zeichnung, nicht als Emoji: Emoji sehen je nach Gerät anders aus
   und lesen sich mit Sprachausgabe als Wort vor. */
html.dl-bearbeiten .dl-edit-feld::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--lila-tief, #6D5BD0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 15px 15px;
  box-shadow: 0 2px 8px rgba(35, 33, 80, .06);
  opacity: 0;
  transition: opacity 150ms var(--ease, ease);
  pointer-events: none;
  z-index: 5;
}
html.dl-bearbeiten .dl-edit-feld:hover::after,
html.dl-bearbeiten .dl-edit-feld:focus-visible::after { opacity: 1; }
html.dl-bearbeiten .dl-edit-feld[contenteditable="true"]::after { content: none; }
.dl-edit-aktiv {
  outline: 2px solid var(--lila-tief, #6D5BD0) !important;
  background: rgba(220, 211, 245, .28);
}
/* Geändert, noch nicht gespeichert. */
.dl-edit-geaendert { outline: 2px solid var(--lila-tief, #6D5BD0) !important; }
/* Gespeichert, aber noch nicht veröffentlicht – die Markierung bleibt,
   bis „Veröffentlichen" gelaufen ist. Sonst sieht die Seite fertig aus,
   während draußen noch der alte Text steht. */
.dl-edit-entwurf { outline: 2px solid var(--lime-tief, #5C6E17) !important; }

@media (prefers-reduced-motion: reduce) {
  html.dl-bearbeiten .dl-edit-feld::after { transition: none; }
  .dl-edit-knopf { transition: none; }
}

/* ===============================================================
   Audit-Befund 2 · Eingabefelder mindestens 16 px auf Mobilgeräten
   ---------------------------------------------------------------
   Safari auf iOS zoomt beim Antippen jedes Feldes, dessen Schrift
   kleiner als 16 px ist – und zoomt danach nicht von selbst zurück.
   Man tippt eine Adresse ein und steht anschließend auf einer
   vergrößerten Seite, die quer scrollt.

   Betroffen waren: .form input/select/textarea (14,5 px),
   .ff input/select/textarea (14,5 px) und .bk-feld input/textarea
   (15 px) im Buchungsdialog.

   Die Felder sollen dadurch nicht klobiger werden: das Polster geht
   um denselben Betrag zurück, um den die Schrift wächst.
   Rechnung für .ff input (Polster 13 px, Schrift 14,5 px):
       vorher   13 + 14,5 · 1,4 + 13  =  46,3 px
       nachher  12 + 16   · 1,3 + 12  =  44,8 px
   Also gleich hoch geblieben – und weiterhin über der 44-px-Marke
   aus Befund 8.

   Nicht nur eine Breitengrenze: gemessen mit tools/pw-geraete-check.js
   im Profil „quer-mit-touch" (844 × 390, hasTouch) stand vorher jedes
   Feld wieder bei 14,5 px bzw. 15 px – dasselbe Telefon, nur quer
   gehalten, war 844 px breit und fiel damit aus der 760-px-Regel
   heraus. Auf einem Tablet galt sie nie. Der Zoom hängt aber am Gerät,
   nicht an der Fensterbreite, deshalb steht die Zeigerbedingung
   gleichberechtigt daneben: grober Zeiger ohne Hover ist dieselbe
   Prüfung, mit der dl-brand.css das Hamburger-Menü schaltet.

   Die 760 px bleiben als zweiter Zweig stehen, damit auch ein schmal
   gezogenes Desktopfenster die Feldmaße des Buchungsdialogs bekommt
   (dl-booking.css schaltet dort auf Vollbild).
   =============================================================== */
@media (max-width: 760px), (pointer: coarse) and (hover: none) {
  .form input,
  .form select,
  .form textarea,
  .ff input,
  .ff select,
  .ff textarea,
  .bk-feld input,
  .bk-feld select,
  .bk-feld textarea,
  .bk-panel input,
  .bk-panel select,
  .bk-panel textarea {
    font-size: 16px;
    line-height: 1.3;
  }
  .form input,
  .form select,
  .form textarea,
  .ff input,
  .ff select,
  .ff textarea {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .bk-feld input,
  .bk-feld select,
  .bk-feld textarea {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* ===============================================================
   Audit-Befund 8 · Tippflächen mindestens 44 × 44 px
   ---------------------------------------------------------------
   Gemessen wurden 13 bis 15 zu kleine Ziele je Seite; die Reihe der
   Navigationslinks lag bei 21 px Höhe, das Logo bei 27 px.

   Zwei Wege, je nach Bauteil:
     – wo Platz ist, wächst das Element selbst (min-height, Polster)
     – wo das Layout unverändert bleiben muss, legt ein Pseudoelement
       eine unsichtbare Fläche darüber. Dasselbe Verfahren wie oben
       bei den Karussellpunkten.
   Sichtbar ändert sich dadurch nichts.
   =============================================================== */
header .nav-links a,
header .nav-mobil a,
footer .f-grid a,
.ip-liste a,
.f-bottom .dl-signatur-link { position: relative; }

header .nav-links a::after,
header .nav-mobil a::after,
footer .f-grid a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------
   Nachtrag zum Befund, gemessen statt gerechnet
   ---------------------------------------------------------------
   Ein Pseudoelement über 44 px vergrößert die Fläche nur dann, wenn
   daneben Platz ist. Bei den Fußzeilen-Links liegen die Zeilen 32 px
   auseinander; zwei benachbarte 44-px-Flächen überlappen sich dort um
   12 px, und die spätere gewinnt den Treffertest. Gemessen wurden
   deshalb weiterhin 32 px effektive Höhe, obwohl die Regel oben
   greift (tools/pw-geraete-check.js, Feld „begrenzt durch").

   Wo die Nachbarn zu nah stehen, hilft nur echte Höhe. Das macht die
   Fußzeile am Telefon länger – anders ist die Fläche nicht zu haben.
   Beschränkt auf Fingerbedienung, damit die Fußzeile am Schreibtisch
   unverändert bleibt; mit Maus reichen die 32 px.
   --------------------------------------------------------------- */
@media (max-width: 760px), (pointer: coarse) and (hover: none) {
  footer .f-grid a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* Die Fläche kommt jetzt aus der Höhe – das Pseudoelement würde
     nur wieder in die Nachbarzeile ragen. */
  footer .f-grid a::after { content: none; }
}

/* Kontaktangaben im lila Feld der Kontaktseite: Telefon und E-Mail
   sind 23 px hoch. Hier stehen über und unter dem Link nur Beschriftung
   und Zusatzzeile, keine weiteren Ziele – die Zeilen liegen 81 px
   auseinander. Ein Pseudoelement passt also, ohne dass ein anderes
   Ziel darunter verschwindet, und das Feld behält seine Maße. */
.ip-liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Das Logo in der Kopfzeile ist je nach Breite 25 bis 34 px hoch. */
header .dl-logo {
  min-height: 44px;
  justify-content: center;
}

/* Symbolknöpfe: im Fuß die beiden Social-Verweise, im Buchungs-
   dialog Schließen und Monatswechsel, in den Karussells die Pfeile. */
.f-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.bk-close,
.bk-monat .bk-pfeile button,
.t-nav button,
.kar-nav button {
  min-width: 44px;
  min-height: 44px;
}
/* Die FAQ-Aufklapper stehen hier bewusst nicht: sie sind durch ihr
   Polster (20 px oben und unten) bereits rund 61 px hoch. */

/* ---------------------------------------------------------------
   Wortmarke „DL" auf dem Handy groesser
   Vorgabe vom 15.08.2026. Auf dem Rechner bleibt sie unveraendert:
   die Regel greift nur unterhalb der Umbruchbreite der Navigation.
   --------------------------------------------------------------- */
@media (max-width: 780px) {
  header .logo img,
  header .logo svg,
  header .dl-logo img,
  header .dl-logo svg { height: 40px; width: auto; }
  header .logo-mark { font-size: 26px; }
}