/* =====================================================================
   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;
}

/* 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; }

/* 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)
   --------------------------------------------------------------- */
.dl-recht .wrap,
.rechtstext .wrap { max-width: 860px; }
.dl-recht p,
.dl-recht li { max-width: 72ch; }
.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) {
  .hero-foto { padding-bottom: 0; }
  .hero-foto .tag {
    position: static;
    max-width: none;
    display: inline-flex;
    align-items: center;
  }
  .dl-hero-karten {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .dl-hero-karten .tag { margin: 0; }
}

/* ---------------------------------------------------------------
   5) Google-Bewertungen (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 „Google-Bewertung" 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, 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; }
.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; }
@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%; }
.form input::placeholder,
.form textarea::placeholder { color: #8C89B0; 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%; }
}