/* ===========================================================================
   Leistungen: Aussehen der Unterseiten unter /leistungen/ UND des Overlays
   auf der Startseite.

   Warum eine gemeinsame Datei: Der Text einer Leistung steht genau einmal,
   naemlich auf der Unterseite. Das Overlay holt ihn von dort. Wenn beide
   Wege denselben Text zeigen, muessen sie auch dieselben Regeln benutzen,
   sonst laeuft das Aussehen nach der ersten Textaenderung auseinander.

   Schriftgroessen sind bewusst gross gewaehlt. Zu uns kommen viele aeltere
   Patienten; 17px Fliesstext ist hier die Untergrenze, nicht der Luxus.
   =========================================================================== */

/* --- Inhaltsbereich, identisch auf Unterseite und im Overlay --- */
.lst-inhalt {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text, #2C332E);
}
.lst-inhalt > * + * { margin-top: 20px; }
.lst-inhalt p { font-size: 17px; line-height: 1.75; }
.lst-inhalt strong { color: var(--forest-ink, #1C3125); font-weight: 600; }

.lst-lead {
  font-size: 19px;
  line-height: 1.68;
  color: var(--forest-ink, #1C3125);
  font-weight: 400;
}

.lst-block { margin-top: 34px; }
.lst-block h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--forest-ink, #1C3125);
  margin-bottom: 14px;
}
.lst-block h2 em { font-style: italic; color: var(--gold, #A88948); }

/* Aufzaehlungen: der Haken sitzt in einer eigenen Spalte, damit mehrzeilige
   Punkte sauber unter dem Text bleiben und nicht unter das Zeichen rutschen. */
.lst-liste { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 12px; }
.lst-liste li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 10px;
  font-size: 16.5px;
  line-height: 1.65;
}
.lst-liste li::before {
  content: "";
  width: 20px; height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--sage-mist, #DCE5DC);
  /* Haken als Hintergrundbild: kein zusaetzliches Markup je Punkt noetig. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4A38' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Kasten fuer ehrliche Abgrenzungen ("das bieten wir nicht an").
   Bewusst kein Warnrot: es ist keine Gefahr, sondern eine Auskunft. */
.lst-hinweis {
  margin-top: 26px;
  background: var(--cream-soft, #F2EDE1);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.14));
  border-left: 4px solid var(--gold, #A88948);
  border-radius: 14px;
  padding: 18px 20px;
}
.lst-hinweis p { font-size: 16px; line-height: 1.7; margin: 0; }
.lst-hinweis p + p { margin-top: 10px; }
.lst-hinweis-titel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest, #2A4A38);
  margin-bottom: 8px;
}

/* --- Overlay auf der Startseite ---------------------------------------
   Bauart wie die uebrigen Dialoge der Seite (.modal / .modal-overlay /
   .modal-panel / .modal-close, geoeffnet ueber die Klasse "open"), damit
   Verhalten und Bedienung ueberall gleich sind. Eigene Klassen nur dort,
   wo dieses Overlay wirklich etwas anderes tut.
   --------------------------------------------------------------------- */
.lst-modal .modal-panel {
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--cream, #F8F5EE);
  border-radius: 28px;
  padding: 0;
  overflow: hidden;
}

.lst-modal-head {
  padding: 34px 40px 22px;
  background: linear-gradient(180deg, var(--white, #fff) 0%, var(--cream, #F8F5EE) 100%);
  border-bottom: 1px solid var(--line, rgba(26,31,27,0.07));
  flex-shrink: 0;
}
.lst-modal-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted, #676E68);
  margin-bottom: 12px;
}
.lst-modal-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--line-strong, rgba(26,31,27,0.14)); }
.lst-modal-titel {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 4.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--forest-ink, #1C3125);
  margin: 0;
  /* Der Fokusring beim Oeffnen soll sichtbar sein, ohne den Titel zu
     verschieben: deshalb Umriss statt Rahmen. */
  outline-offset: 6px;
}
.lst-modal-titel em { font-style: italic; color: var(--gold, #A88948); }

.lst-modal-body {
  padding: 28px 40px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}
.lst-modal-body .lst-block:first-child { margin-top: 0; }

.lst-modal-foot {
  padding: 20px 40px 26px;
  border-top: 1px solid var(--line, rgba(26,31,27,0.07));
  background: var(--white, #fff);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.lst-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)), background 0.4s, color 0.4s, box-shadow 0.4s;
  cursor: pointer;
}
.lst-btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)); }
.lst-btn-haupt { background: var(--forest, #2A4A38); color: var(--cream, #F8F5EE); }
.lst-btn-haupt:hover { background: var(--forest-ink, #1C3125); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(28,49,37,0.22); }
.lst-btn-haupt:hover svg { transform: translateX(4px); }
.lst-btn-still { background: transparent; color: var(--forest, #2A4A38); border-color: var(--line-strong, rgba(26,31,27,0.14)); }
.lst-btn-still:hover { background: var(--sage-mist, #DCE5DC); transform: translateY(-2px); }

.lst-modal-laedt { padding: 40px 0; text-align: center; color: var(--muted, #676E68); font-size: 16px; }

/* Menuekachel: sie oeffnet jetzt ein Overlay, bleibt aber ein echter Link
   auf die Unterseite. Der Zeiger soll das zeigen. */
.mega-leistung { cursor: pointer; }

/* --- Verweise im Leistungsabschnitt der Startseite ---------------------
   Sie sind nicht nur Zierde: ueber das Mega-Menue kommt man nur am
   Rechner auf die Unterseiten, das mobile Menue kennt sie nicht. Ohne
   diese Verweise waeren die Seiten auf dem Handy unerreichbar und fuer
   Suchmaschinen so gut wie unverlinkt.
   ---------------------------------------------------------------------- */
/* Jeder Leistungsblock ist direkt anspringbar. Der Abstand haelt die feste
   Kopfleiste frei, sonst steht die Ueberschrift beim Sprung darunter. */
.service-item[id] { scroll-margin-top: 96px; }

.service-mehr {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.service-mehr a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 44px Zielflaeche: mit zittrigen Fingern trifft man kleiner nicht. */
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--forest, #2A4A38);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)), border-color 0.4s;
}
.service-mehr a svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)); }
.service-mehr a:hover { color: var(--gold, #A88948); border-bottom-color: var(--gold, #A88948); }
.service-mehr a:hover svg { transform: translateX(4px); }

.services-alle {
  max-width: 1280px;
  margin: 34px auto 0;
  text-align: center;
}
.services-alle a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 32px;
  border-radius: 100px;
  border: 1.5px solid var(--forest, #2A4A38);
  color: var(--forest, #2A4A38);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)), color 0.4s, transform 0.4s;
}
.services-alle a svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)); }
.services-alle a:hover { background: var(--forest, #2A4A38); color: var(--cream, #F8F5EE); transform: translateY(-2px); }
.services-alle a:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .service-mehr a svg, .services-alle a, .services-alle a svg { transition: none; }
  .service-mehr a:hover svg, .services-alle a:hover, .services-alle a:hover svg { transform: none; }
}

@media (max-width: 640px) {
  .lst-modal .modal-panel { max-height: 92vh; border-radius: 22px; }
  .lst-modal-head { padding: 26px 22px 18px; }
  .lst-modal-body { padding: 22px 22px 26px; }
  .lst-modal-foot { padding: 16px 22px 20px; }
  .lst-modal-foot .lst-btn { flex: 1 1 100%; justify-content: center; }
  .lst-inhalt, .lst-inhalt p { font-size: 16.5px; }
  .lst-block h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lst-btn, .lst-btn svg { transition: none; }
  .lst-btn-haupt:hover, .lst-btn-still:hover { transform: none; }
}

/* ===========================================================================
   Grundgeruest des Overlays.       (10.08.2026, Nachtrag)

   Warum das hier stehen MUSS und nicht nur in index.html: Die Regeln fuer
   .modal, .modal-overlay und .modal-close stehen im Style-Block der
   Startseite. Die Unterseiten unter /leistungen/ laden diesen Block nicht.
   Dort war das Overlay deshalb kein Overlay, sondern ein gewoehnlicher
   Kasten, der unten an den Seiteninhalt gehaengt wurde: Er erschien
   unterhalb der Fusszeile, man musste erst hochscrollen, und weil der
   Schliessen-Knopf ausser Sicht lag, blieb er offen stehen. Ab dem zweiten
   Klick wirkte das Menue dann tot.

   Alle Regeln haengen an .lst-modal, damit sie auf der Startseite nichts
   ueberschreiben, was dort schon richtig steht.
   =========================================================================== */
.lst-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lst-modal.open { display: flex; }

.lst-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 49, 37, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 0;
  cursor: pointer;
}

.lst-modal .modal-panel {
  position: relative;
  z-index: 1;
}

.lst-modal .modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.14));
  color: var(--forest, #2A4A38);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)), color 0.4s, transform 0.4s;
}
.lst-modal .modal-close:hover {
  background: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
  transform: rotate(90deg);
}

/* Der Hintergrund darf nicht mitscrollen, solange das Overlay offen ist. */
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lst-modal .modal-close { transition: none; }
  .lst-modal .modal-close:hover { transform: none; }
}


/* ===================================================================
   LEISTUNGSTEXT-20260908
   Tabelle, Quellenangabe und Liste fuer die ergaenzten Textbloecke der
   Leistungsseiten. Bewusst schlicht: die Seiten leben von Ruhe, und
   eine Tabelle mit Rahmen um jede Zelle wirkt wie ein Formular.
   Die Tabelle rollt auf schmalen Schirmen in ihrem eigenen Rahmen,
   damit die SEITE nicht waagerecht rollt.
   =================================================================== */
.lst-tab-huelle { overflow-x: auto; margin: 22px 0 6px; }
.lst-tab { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 480px; }
.lst-tab-cap { caption-side: top; text-align: left; font-size: 14.5px;
  color: #55605A; line-height: 1.5; padding-bottom: 12px; }
.lst-tab th, .lst-tab td { text-align: left; padding: 11px 14px 11px 0;
  border-bottom: 1px solid rgba(28,49,37,0.12); vertical-align: top; }
.lst-tab thead th { font-size: 12.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #55605A; font-weight: 600;
  border-bottom-width: 2px; }
.lst-tab tbody th { font-weight: 600; color: #1C3125; white-space: nowrap;
  padding-right: 22px; }
.lst-tab .lst-wert { font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap; padding-right: 22px; color: #14241B; font-weight: 500; }
.lst-tab tbody tr:last-child th, .lst-tab tbody tr:last-child td { border-bottom: none; }

.lst-quelle { font-size: 14px; color: #55605A; line-height: 1.6;
  border-left: 3px solid rgba(28,49,37,0.16); padding-left: 14px; margin-top: 18px; }

.lst-liste { margin: 16px 0 0; padding-left: 20px; }
.lst-liste li { margin-bottom: 9px; line-height: 1.6; }

@media (max-width: 640px) {
  .lst-tab { font-size: 15px; }
  .lst-tab th, .lst-tab td { padding: 10px 12px 10px 0; }
}