/* ==========================================================================
   Augenarzt Hamburg (fiktive Musterpraxis)
   Design "Nachtblau und Messing" (Redesign 27.10.2026), ohne Framework.
   Ursprünglich ein Nachbau des Layouts "Coroni" (validthemes).
   Alle Design-Werte stehen zentral in :root, damit Änderungen an einer
   Stelle passieren und nicht pro Abschnitt gesucht werden müssen.
   ========================================================================== */

:root {
  /* Farben "Nachtblau und Messing" (Redesign Oktober 2026).
     Messing hell (--color-accent) nur auf dunklem Grund: auf Creme hat es nur 2:1 Kontrast.
     Auf hellem Grund für Text und Links das dunkle Messing (--color-primary, 5,3:1). */
  --color-primary: #7d5f24;
  --color-primary-dark: #5f4719;
  --color-accent: #c8a96a;
  --color-focus: #a8823a;
  --color-dark: #131a2b;
  --color-dark-raised: #1c2540;
  /* Rot nur noch für Warnungen und Notfälle, nicht mehr als Schmuckfarbe */
  --color-red: #c41a2c;
  --color-green: #1fc157;
  --color-text: #4a4f5c;
  --color-text-strong: #1f2430;
  --color-light-text: #ece8df;
  --color-gray-bg: #f6f2ea;
  --color-warm-bg: #f6f2ea;
  --color-warm-line: #e6dccb;
  --color-hero-bg: #131a2b;
  --color-border: #e6e1d8;
  --color-white: #ffffff;
  --overlay-hero: rgba(19, 26, 43, 0.7);
  --overlay-breadcrumb: rgba(19, 26, 43, 0.75);

  /* Schriften: Zilla Slab (liegt lokal in /fonts) für Überschriften,
     die Systemschrift des Geräts für Fließtext. So lädt die Seite keine fremden Schriften. */
  --font-heading: "Zilla Slab", Rockwell, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Großbuchstaben mit weitem Buchstabenabstand für kurze Titel, wie bei edlen Praxisseiten */
  --tracking-display: 0.22em;

  /* Abstände */
  --section-padding: 120px;
  --section-padding-less: 90px;
  --heading-gap: 60px;
  --header-height: 90px;
  /* Höhe der Hinweisleiste "Fiktive Musterpraxis". 40px gilt nur, bis js/main.js die echte
     Höhe einträgt; die ändert sich, wenn der Text auf schmalen Bildschirmen umbricht. */
  --notice-height: 40px;
  /* So viel Platz brauchen Leiste und Header zusammen; Inhalte beginnen darunter */
  --header-offset: calc(var(--header-height) + var(--notice-height));
  --gutter: 15px;

  /* Effekte */
  --shadow-card: 0 5px 30px 0 rgba(214, 215, 216, 0.57);
  --shadow-header: 0 8px 25px 0 rgba(0, 0, 0, 0.04);
  --radius-button: 4px;
  --radius-card: 6px;

  /* Lesbare Zeilenlänge für Fließtext. "ch" ist die Breite der Ziffer 0;
     normale Buchstaben sind schmaler, 52ch ergeben gemessen ca. 70 Zeichen. */
  --max-line-length: 52ch;

  /* Bewegung: eine ruhige Kurve für alles, die schnell startet und sanft ausläuft */
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-hover: 250ms;
  --duration-reveal: 600ms;
  /* Nur Eigenschaften, die nicht ruckeln (keine Breite, Höhe, Abstände).
     "visibility" steht dabei, damit ein Ausblenden erst am Ende unsichtbar schaltet. */
  --transition:
    color var(--duration-hover) var(--ease-calm),
    background-color var(--duration-hover) var(--ease-calm),
    border-color var(--duration-hover) var(--ease-calm),
    opacity var(--duration-hover) var(--ease-calm),
    transform var(--duration-hover) var(--ease-calm),
    visibility var(--duration-hover) var(--ease-calm);
}

/* ---------- Schriften ---------- */

/* "swap": Der Text erscheint sofort in der Ersatzschrift und wechselt, sobald die Datei da ist */
@font-face {
  font-family: "Zilla Slab";
  src: url("../fonts/zilla-slab-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zilla Slab";
  src: url("../fonts/zilla-slab-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Grundlagen ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Sprungziele landen unter dem festen Header statt dahinter (gilt für alle Anker) */
  scroll-padding-top: calc(var(--header-offset) + 20px);
}

body {
  font-family: var(--font-body);
  /* 16 statt 14 px: Viele Besucher einer Augenarztseite sehen schlechter */
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-dark);
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin-bottom: 15px;
}

a {
  color: var(--color-dark);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-primary);
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Sichtbarer Fokus für Tastaturnutzer, ohne Mausklicks zu umranden */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  animation: focus-ring var(--duration-hover) var(--ease-calm);
}

/* Der Fokusrahmen zieht sich weich von außen an das Element heran */
@keyframes focus-ring {
  from {
    outline-color: transparent;
    outline-offset: 8px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 15px;
  top: -60px;
  z-index: 1000;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 10px 20px;
  font-family: var(--font-heading);
  font-weight: 600;
}

.skip-link:focus {
  top: 15px;
  color: var(--color-white);
}

.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--gutter) * -1);
}

.col-12, .col-8, .col-6, .col-4, .col-2 {
  padding: 0 var(--gutter);
  width: 100%;
}

.default-padding {
  padding: var(--section-padding) 0;
}

.bottom-less {
  padding-bottom: var(--section-padding-less);
}

.bg-gray {
  background-color: var(--color-gray-bg);
}

.bg-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark p {
  color: var(--color-white);
}

.text-center {
  text-align: center;
}

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* Hinweisbox für Platzhalter und Demo-Funktionen */
.notice {
  border-left: 4px solid var(--color-red);
  background: #fff4f5;
  color: var(--color-dark);
  padding: 15px 20px;
  font-size: 13px;
  line-height: 22px;
  margin-top: 30px;
}

.notice strong {
  font-family: var(--font-heading);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 35px;
  border-radius: var(--radius-button);
  border: 2px solid var(--color-dark);
  background: var(--color-dark);
  color: var(--color-white);
  transition: var(--transition);
}

/* Leichter Druck-Effekt beim Klicken, gilt für alle Knöpfe der Seite */
.btn:active,
.btn-pill:active,
.faq-tabs button:active,
.slider-button:active,
.to-top:active {
  transform: scale(0.97);
}

.btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-light {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-dark);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background-color 300ms var(--ease-calm),
    box-shadow 300ms var(--ease-calm);
}

/* Hinweisleiste "Fiktive Musterpraxis": Teil des festen Headers, bleibt beim Scrollen sichtbar.
   Helles Messing mit Nachtblau hat genug Kontrast (siehe Farbregel in :root). */
.fiction-notice {
  background: var(--color-accent);
  color: var(--color-dark);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  padding: 8px var(--gutter);
}

/* Ohne das erbte die Zeile den Absatzabstand und die Leiste wäre unnötig hoch */
.fiction-notice p {
  margin: 0;
}

.fiction-notice a {
  color: var(--color-dark);
  text-decoration: underline;
}

.header-inner {
  display: flex;
  align-items: center;
  min-height: var(--header-height);
}

/* Logo: Augen-Symbol plus Schriftzug, Farbe folgt dem Header-Zustand */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
}

.brand:hover {
  color: var(--color-white);
}

.brand-icon {
  width: 46px;
  height: 46px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  line-height: 1;
}

.brand-text strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
}

.brand-text small {
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 5px;
  color: var(--color-accent);
  white-space: nowrap;
}

.main-nav {
  margin-left: auto;
}

.menu {
  display: flex;
  align-items: center;
}

.menu > li {
  position: relative;
  display: flex;
  align-items: center;
}

.menu > li > a {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 35px 15px;
  color: var(--color-white);
}

.menu > li.has-sub > a {
  padding-right: 4px;
}

.sub-toggle {
  background: none;
  border: 0;
  color: var(--color-white);
  width: 16px;
  height: 24px;
  margin-right: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-toggle .icon {
  width: 9px;
  height: 9px;
  transition: transform var(--duration-hover) var(--ease-calm);
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--color-white);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
}

/* Trennlinie am Listenpunkt statt am Link, damit sie beim Einrücken stehen bleibt */
.sub-menu li {
  border-bottom: 1px solid #f1f1f1;
}

.sub-menu li:last-child {
  border-bottom: 0;
}

.sub-menu a {
  display: block;
  padding: 9px 25px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-dark);
}

/* Einrücken per Verschiebung statt per Innenabstand: bleibt flüssig */
.sub-menu a:hover,
.sub-menu a[aria-current="page"] {
  color: var(--color-primary);
  transform: translateX(5px);
}

.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu,
.has-sub.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Nach Escape ausblenden, auch wenn Maus oder Fokus noch im Menü sind (js/main.js).
   Steht nach den Regeln oben, damit es bei gleicher Gewichtung gewinnt. */
.has-sub.is-dismissed > .sub-menu {
  opacity: 0;
  visibility: hidden;
}

.has-sub.is-open > .sub-toggle .icon {
  transform: rotate(180deg);
}

.header-cta {
  display: flex;
  align-items: center;
  align-self: stretch;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 15px;
  padding-left: 20px;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  padding: 10px 25px;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  white-space: nowrap;
}

.btn-pill .icon {
  width: 12px;
  height: 12px;
}

.btn-pill:hover {
  background: var(--color-accent);
  color: var(--color-dark);
}

.nav-toggle {
  display: none;
}

/* Zustand nach dem Scrollen: Der Header bleibt dunkel und bekommt eine feste Fläche */
.site-header.is-scrolled {
  background: var(--color-dark);
  box-shadow: var(--shadow-header);
}

/* Messing-Unterstrich zeigt Mausziel und aktuelle Seite */
.menu > li > a:hover,
.menu > li > a[aria-current="page"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* ==========================================================================
   Hero (Banner)
   ========================================================================== */

.banner-area {
  position: relative;
  z-index: 1;
  /* Niedriger als vorher (100vh), damit darunter schon Inhalt zu sehen ist */
  min-height: min(82vh, 760px);
  display: flex;
  align-items: center;
  color: var(--color-white);
  /* Auge als weicher Hintergrund wie früher, aber kleiner und nach rechts gerückt */
  background-color: var(--color-hero-bg);
  background-image: url("../img/hero-hintergrund.svg");
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}

.banner-area::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Gleichmäßig abgedunkelt, damit der mittige Text überall gut lesbar ist */
  background: rgba(19, 26, 43, 0.72);
}

.hero-grid {
  padding-top: calc(var(--header-offset) + 50px);
  padding-bottom: 80px;
}

/* Inhalt mittig, wie bei ruhigen, edlen Praxisseiten */
.banner-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.banner-area h1 {
  color: var(--color-light-text);
  font-size: clamp(36px, 6vw, 78px);
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin-bottom: 30px;
}

.hero-intro {
  max-width: var(--max-line-length);
  margin: 0 auto 34px;
  font-size: 18px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.85);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 50px;
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-dark);
}

.btn-solid .icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-hover) var(--ease-calm);
}

.btn-solid:hover {
  color: var(--color-dark);
  background: var(--color-light-text);
}

.btn-solid:hover .icon {
  transform: translateX(3px);
}

.hero-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.banner-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
}

/* Kassenleistungen als ruhige Etiketten statt Punkt-Liste */
.banner-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.banner-list a {
  display: inline-block;
  font-size: 14px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-button);
  color: var(--color-white);
}

.banner-list a:hover {
  color: var(--color-dark);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Abschnittsmarke: kleine Zeile über der Überschrift, mit kurzem Messing-Strich */
.section-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  line-height: 18px;
  margin-bottom: 20px;
  color: var(--color-primary);
}

.section-mark::before {
  flex-shrink: 0;
  content: "";
  width: 32px;
  border-top: 1px solid currentColor;
}

/* Im mittigen Hero steht der Strich links und rechts der Zeile */
.banner-content .section-mark {
  justify-content: center;
  color: var(--color-accent);
}

.banner-content .section-mark::after {
  content: "";
  width: 32px;
  border-top: 1px solid currentColor;
}

.section-number {
  color: inherit;
}

/* ==========================================================================
   Seitenkopf der Unterseiten (Breadcrumb-Bereich)
   ========================================================================== */

.breadcrumb-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: calc(var(--header-offset) + 70px) 0 70px;
  text-align: center;
  background-color: var(--color-hero-bg);
  background-image: url("../img/hero-hintergrund.svg");
  background-size: cover;
  background-position: center right;
}

.breadcrumb-area::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Gleichmäßig abgedunkelt wie auf der Startseite, weil der Text jetzt mittig steht */
  background: rgba(19, 26, 43, 0.78);
  z-index: -1;
}

/* Normale Schreibweise statt Großbuchstaben: Die Titel der Unterseiten sind lang */
.breadcrumb-area h1 {
  max-width: 900px;
  margin: 0 auto 24px;
  color: var(--color-light-text);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

/* Kurzer Messing-Strich unter dem Seitentitel */
.breadcrumb-area h1::after {
  content: "";
  display: block;
  width: 48px;
  margin: 24px auto 0;
  border-top: 1px solid var(--color-accent);
}

/* Brotkrumen klein und ruhig unter der Überschrift */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
}

.breadcrumb li {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb li + li::before {
  content: "/";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.45);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-white);
}

/* ==========================================================================
   Abschnittsüberschrift mit gestrichelter Trennlinie
   ========================================================================== */

.site-heading {
  max-width: 750px;
  margin: -5px auto var(--heading-gap);
  text-align: center;
}

.site-heading h2 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  padding-bottom: 20px;
}

.divider {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  opacity: 0.5;
  vertical-align: middle;
}

.divider img {
  width: 30px;
  height: 30px;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  border-bottom: 2px dashed #999999;
}

.divider::before {
  left: -40px;
}

.divider::after {
  right: -40px;
}

.bg-dark .divider {
  opacity: 0.8;
}

.bg-dark .divider::before,
.bg-dark .divider::after {
  border-color: rgba(255, 255, 255, 0.6);
}

.site-heading p {
  max-width: var(--max-line-length);
  margin: 20px auto 0;
}

/* ==========================================================================
   Kennzahlen (Fun Facts)
   ========================================================================== */

.fun-fact-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: var(--section-padding) 0 70px;
}

/* Sehr blasse Kurvengrafik im Hintergrund, wie in der Vorlage */
.fun-fact-area::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10%;
  width: 100%;
  height: 80%;
  background: url("../img/graph-shape.svg") center / contain no-repeat;
  opacity: 0.03;
  z-index: -1;
}

.fun-fact-area .col-4 {
  margin-bottom: 50px;
}

.fun-fact {
  display: flex;
}

.fun-fact img {
  width: 80px;
  height: 80px;
}

.fun-fact .info {
  padding-left: 20px;
}

.fun-fact h3 {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.fun-fact .timer {
  display: block;
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-strong);
  margin-bottom: 15px;
}

.fun-fact p {
  margin-bottom: -5px;
}

/* ==========================================================================
   Tabelle Kassenleistungen
   ========================================================================== */

.coverage-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.bg-warm {
  background: var(--color-warm-bg);
}

/* Mittige Abschnittsüberschrift in Großbuchstaben mit weitem Buchstabenabstand */
.section-intro {
  max-width: 820px;
  margin: 0 auto var(--heading-gap);
  text-align: center;
}

.section-intro h2 {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin-bottom: 20px;
}

.section-intro p:not(.section-mark) {
  max-width: var(--max-line-length);
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
}

.section-intro .section-mark {
  justify-content: center;
}

.section-intro .section-mark::after {
  content: "";
  width: 32px;
  border-top: 1px solid currentColor;
}

/* Neben den FAQ-Reitern bleibt die Überschrift linksbündig, sonst wirkt die Spalte unruhig */
.faq-layout .section-intro {
  text-align: left;
  margin-left: 0;
}

.faq-layout .section-intro .section-mark {
  justify-content: flex-start;
}

.faq-layout .section-intro .section-mark::after {
  display: none;
}

.table-wrap {
  max-width: 750px;
  margin: 0 auto;
  overflow-x: auto;
}

.home .table-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.coverage-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(60, 45, 20, 0.08);
}

.coverage-table th,
.coverage-table td {
  padding: 16px 20px;
  line-height: 22px;
  vertical-align: top;
}

/* Kopfzeile warm statt kräftigem Blau */
.coverage-table thead th {
  background: var(--color-warm-line);
  color: var(--color-text-strong);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.coverage-table tbody tr + tr th,
.coverage-table tbody tr + tr td {
  border-top: 1px solid var(--color-warm-bg);
}

.coverage-table tbody th {
  font-weight: 600;
  color: var(--color-text-strong);
}

/* Status als farbiges Etikett. Dunkle Schrift auf heller Fläche: Kontrast nach WCAG AA */
.status {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  padding: 2px 10px;
  border-radius: var(--radius-button);
  white-space: nowrap;
}

.is-yes .status {
  color: #13652f;
  background: #e3f5e9;
}

.is-no .status {
  color: #a3101c;
  background: #fde8ea;
}

.is-partly .status {
  color: #7a4300;
  background: #fff0db;
}

/* Farbklassen bleiben für andere Seiten, die sie ohne Etikett nutzen.
   Gleiche dunkle Töne wie die Etiketten: Die hellen Vorlagenfarben hatten auf Weiß
   und Creme zu wenig Kontrast (Grün nur 2,4:1), die neuen liegen über 6,4:1. */
.is-yes {
  color: #13652f;
}

.is-no {
  color: #a3101c;
}

.is-partly {
  color: #7a4300;
}

/* ==========================================================================
   Leistungs-Slider (Symptoms-Bereich der Vorlage)
   ========================================================================== */

.services-area {
  padding: var(--section-padding) 0;
}

.slider {
  position: relative;
}

.slider-track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-track > li {
  flex: 0 0 calc((100% - 60px) / 3);
  scroll-snap-align: start;
}

.service-card {
  height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 50px 30px;
  text-align: center;
}

.service-card .thumb {
  width: 126px;
  height: 126px;
  margin: 0 auto 30px;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  padding: 22px;
}

.service-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-card h3 a {
  color: var(--color-dark);
}

.service-card h3 a:hover {
  color: var(--color-primary);
}

.service-card p {
  color: var(--color-dark);
  margin: 0;
}

.slider-button {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 0;
  background: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: var(--transition);
}

.slider-button:hover {
  opacity: 1;
}

.slider-button:disabled {
  opacity: 0.25;
  cursor: default;
}

.slider-button .icon {
  width: 16px;
  height: 16px;
}

.slider-prev {
  left: -60px;
}

.slider-next {
  right: -60px;
}

/* Variante als festes Raster (Leistungsübersicht) */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* ==========================================================================
   Zwei Karten: übernimmt die Kasse / zahlen Sie selbst
   ========================================================================== */

.responsibilities-area {
  position: relative;
  z-index: 1;
  padding-top: var(--section-padding);
}

/* Weiße Schräge am unteren Rand */
.responsibilities-area::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 100vw solid var(--color-white);
  border-top: 200px solid transparent;
  z-index: -1;
}

.responsibilities-area.has-bottom-space {
  padding-bottom: var(--section-padding);
}

.duty-card {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  height: 100%;
}

.duty-card h3 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 30px 15px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
}

.duty-card h3::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 150%;
  height: 200%;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: var(--color-primary);
  z-index: -1;
}

.duty-card.is-avoid h3::after {
  background: var(--color-red);
}

.duty-card ul {
  padding: 50px;
}

/* Einleitungssatz unter der Kartenüberschrift: gleicher Seitenabstand wie die Liste,
   damit der Text nicht am Kartenrand klebt */
.duty-card .duty-intro {
  margin: 0;
  padding: 30px 50px 0;
}

.duty-card .duty-intro + ul {
  padding-top: 30px;
}

.duty-card li {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.duty-card li:last-child {
  margin-bottom: 0;
}

.duty-card .thumb {
  flex: 0 0 125px;
  width: 125px;
  height: 125px;
  border-radius: 50% 50% 0;
  box-shadow: var(--shadow-card);
  background: var(--color-white);
  padding: 30px;
}

.duty-card .info {
  padding-left: 26px;
}

.duty-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}

.duty-card .info p {
  margin: 0;
}

.responsibilities-area .notice {
  max-width: 750px;
  margin: 40px auto 0;
}

/* ==========================================================================
   Ablauf (Safe-Way-Bereich der Vorlage)
   ========================================================================== */

.steps-area {
  position: relative;
  overflow: hidden;
}

.steps-area .row {
  align-items: center;
}

.steps-list {
  padding-left: 35px;
}

.steps-list li {
  margin-bottom: 30px;
}

.steps-list li:last-child {
  margin-bottom: 0;
}

.steps-list h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

.steps-list h3 .icon {
  color: var(--color-primary);
  width: 18px;
  height: 18px;
}

.steps-list p {
  margin: 0;
}

/* Schwebende Deko-Kreise wie die Moleküle der Vorlage */
.floating-dots span {
  position: absolute;
  border-radius: 50%;
  background: rgba(200, 169, 106, 0.12);
  z-index: -1;
}

/* ==========================================================================
   Warnzeichen (Hand-Washing-Bereich der Vorlage)
   ========================================================================== */

.warning-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: var(--section-padding) 0 70px;
}

.warning-area::before {
  content: "";
  position: absolute;
  left: -80px;
  top: 40px;
  width: 260px;
  height: 260px;
  background: url("../img/deko-iris.svg") center / contain no-repeat;
  opacity: 0.12;
  z-index: -1;
}

.warning-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
}

.warning-list li {
  text-align: center;
  margin-bottom: 50px;
}

.warning-list .thumb {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 15px auto 35px;
  border-radius: 50%;
  padding: 30px;
  background: rgba(255, 255, 255, 0.03);
}

.warning-list .thumb::after {
  content: "";
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  border: 2px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}

.warning-list h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.warning-area .emergency {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 15px;
  margin-top: -10px;
  margin-bottom: 50px;
}

.warning-area .emergency a {
  color: var(--color-white);
  text-decoration: underline;
}

/* ==========================================================================
   FAQ mit Reitern und Akkordeon
   ========================================================================== */

.faq-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.faq-area::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 30px;
  width: 200px;
  height: 200px;
  background: url("../img/deko-sprechblase.svg") right top / contain no-repeat;
  opacity: 0.05;
  z-index: -1;
}

.faq-area .row {
  align-items: center;
}

.faq-area .thumb {
  padding-right: 35px;
}

.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.faq-tabs button {
  border: 0;
  padding: 10px 30px;
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  box-shadow: var(--shadow-card);
  margin-bottom: 15px;
  transition: var(--transition);
}

.faq-tabs button[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-white);
}

.acd-items {
  padding: 50px;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.acd-item {
  margin-bottom: 30px;
}

.acd-item:last-child {
  margin-bottom: 0;
}

.acd-item h3 {
  font-size: 14px;
  margin: 0;
}

.acd-trigger {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-dark);
  padding: 5px 0;
  transition: var(--transition);
}

.acd-trigger:hover {
  color: var(--color-primary);
}

.acd-trigger .icon {
  width: 11px;
  height: 11px;
  transition: transform var(--duration-hover) var(--ease-calm);
}

.acd-trigger[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.acd-panel {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  margin-top: 20px;
}

.acd-panel p:last-child {
  margin: 0;
}

/* Aufklappen: Inhalt gleitet weich herein. Die Höhe springt bewusst ohne
   Animation, weil eine animierte Höhe auf schwachen Handys ruckelt. */
.acd-panel:not([hidden]) {
  animation: slide-in var(--duration-hover) var(--ease-calm);
}

/* Reiterwechsel: neuer Inhalt blendet nur ein, ohne Bewegung */
[role="tabpanel"]:not([hidden]) {
  animation: fade-in 300ms var(--ease-calm);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* ==========================================================================
   Ratgeber-Karten (Blog-Bereich der Vorlage)
   ========================================================================== */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.blog-card {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.blog-card .thumb {
  position: relative;
  overflow: hidden;
}

.blog-card .thumb a {
  display: block;
  position: relative;
}

.blog-card .thumb a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* 75 % statt 50 %: bei hellen Fotos (Sehtafel) lag die erste Titelzeile sonst auf hellem Grund */
  height: 75%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.85) 100%);
}

/* Bild ist breiter als die Karte und gleitet beim Hover nach rechts (Vorlage),
   dazu ein leichter Zoom. Der Rahmen (.thumb) schneidet alles Überstehende ab. */
.blog-card .thumb img {
  max-width: none;
  width: calc(100% + 60px);
  transform: translate3d(-50px, 0, 0);
  transition: transform 300ms var(--ease-calm);
}

.blog-card:hover .thumb img {
  transform: translate3d(0, 0, 0) scale(1.04);
}

.blog-card .title {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.blog-card .title h3 {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 15px;
}

.blog-card .tag {
  display: inline-block;
  background: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0 20px;
  border-radius: 5px;
}

.blog-card .info {
  padding: 30px;
}

.blog-card .meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-dark);
}

.blog-card .meta .icon {
  color: var(--color-primary);
  width: 13px;
  height: 13px;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: underline;
}

.more-link .icon {
  width: 10px;
  height: 10px;
}

/* ==========================================================================
   Inhalt der Unterseiten
   ========================================================================== */

.content-area .row {
  align-items: flex-start;
}

.article h2 {
  font-size: 26px;
  margin: 40px 0 20px;
}

.article h2:first-child {
  margin-top: 0;
}

/* Lesbare Zeilenlänge: höchstens etwa 70 Zeichen pro Zeile */
.article p,
.article li,
.acd-panel p {
  max-width: var(--max-line-length);
}

/* Einfache Listen im Text brauchen sichtbare Punkte; oben sind alle Listenzeichen abgeschaltet.
   Listen mit eigener Klasse (z. B. Häkchen-Listen) haben ihr eigenes Zeichen. */
.article ul:not([class]) {
  list-style: disc;
  padding-left: 1.3em;
  margin-bottom: 20px;
}

.article ul:not([class]) li::marker {
  color: var(--color-primary);
}

.article h3 {
  font-size: 18px;
  margin: 30px 0 15px;
}

.article .lead {
  font-size: 16px;
  line-height: 30px;
  color: var(--color-dark);
}

.article ul.checks {
  margin: 0 0 20px;
}

.article ul.checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.article ul.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Quellenliste: Nummern müssen sichtbar sein, weil die hochgestellten Verweise im Text darauf
   zeigen. Lange URLs dürfen umbrechen, sonst laufen sie auf dem Handy aus dem Bild. */
/* Verlinkte Warnzeichen-Kachel: Schrift bleibt hell auf dunklem Grund, Unterstrich zeigt den Link */
.warning-list h3 a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nummerierte Schrittfolgen im Fließtext brauchen ihre Ziffern (die Grundregel oben entfernt sie) */
.article ol {
  list-style: decimal;
  padding-left: 1.5em;
}

.article ol.source-list {
  list-style: decimal;
  padding-left: 1.5em;
  overflow-wrap: anywhere;
}

.article figure {
  margin: 30px 0;
}

.article figcaption {
  font-size: 12px;
  margin-top: 8px;
}

/* Fotos sind fremde Symbolbilder (Nachweis: img/fotos/BILDNACHWEIS.md).
   Der Hinweis „Symbolbild“ verhindert, dass sie für Aufnahmen der Praxis gehalten werden. */
.photo {
  margin: 0;
}

.photo figcaption {
  font-size: 12px;
  margin-top: 8px;
}

.photo-area {
  padding-bottom: 80px;
}

.photo-area .col-6 {
  margin-bottom: 30px;
}

/* Ambiente-Band der Startseite: nur ein Foto, oben Luft zum Zahlen-Abschnitt */
.photo-band {
  padding-top: 60px;
}

.photo-band img {
  width: 100%;
  height: auto;
}

/* Auf den Karten liegt der Titel über dem Bild, daher der Hinweis oben rechts */
.blog-card .image-note {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
}

.sidebar-item {
  background: var(--color-white);
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
  padding: 30px;
  margin-bottom: 30px;
}

.sidebar-item h2 {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 15px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-links li {
  padding: 8px 0;
}

.sidebar-links a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-links .icon {
  color: var(--color-primary);
  width: 10px;
  height: 10px;
}

.sidebar-links a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

.sidebar-item.is-dark {
  background: var(--color-dark);
}

.sidebar-item.is-dark h2 {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.15);
}

.sidebar-item.is-dark p {
  color: var(--color-light-text);
}

.sidebar-item.is-dark .phone {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 20px;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
}

.hours-table th,
.hours-table td {
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border);
  text-align: left;
  font-weight: 400;
}

.hours-table td {
  text-align: right;
  color: var(--color-dark);
}

/* ==========================================================================
   Kontakt und Formular
   ========================================================================== */

.contact-info li {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.contact-info .icon-circle {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info .icon-circle .icon {
  width: 22px;
  height: 22px;
}

.contact-info h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.contact-info p {
  margin: 0;
}

.contact-form {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  padding: 50px;
}

.contact-form h2 {
  font-size: 26px;
  margin-bottom: 25px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field.is-wide {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--color-dark);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  padding: 12px 15px;
  min-height: 50px;
  transition: var(--transition);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
  outline: 2px solid rgba(125, 95, 36, 0.3);
}

.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 22px;
}

.form-check input {
  margin-top: 5px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.form-actions {
  margin-top: 25px;
}

.demo-badge {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 10px;
  border-radius: 3px;
  margin-bottom: 15px;
}

.map-placeholder {
  margin-top: 10px;
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   Call-to-Action-Leiste
   ========================================================================== */

.cta-area {
  background: var(--color-primary);
  padding: 60px 0;
  color: var(--color-white);
}

.cta-area .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.cta-area h2 {
  color: var(--color-white);
  font-size: 26px;
  margin-bottom: 8px;
}

.cta-area p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-dark);
  color: var(--color-light-text);
}

/* Nur oben/unten, sonst geht der seitliche Abstand des Containers verloren */
.footer-items {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.footer-about {
  padding-right: 15%;
}

.footer-about .brand {
  margin-bottom: 25px;
}

.footer-about p {
  color: var(--color-light-text);
}

.social {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

/* Platzhalter: noch keine echten Profile, deshalb keine Links */
/* Einheitlich in Messing statt in den bunten Markenfarben, passend zum Farbkonzept */
.social span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-top: 10px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
}

.footer-links h2 {
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 30px;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a,
.footer-links li {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-light-text);
  line-height: 20px;
}

.footer-links a:hover {
  color: var(--color-white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 0;
}

/* Auf dem Handy würde der Nach-oben-Knopf sonst den letzten Footer-Link verdecken */
@media (max-width: 767px) {
  .footer-bottom {
    padding-bottom: 80px;
  }
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom p {
  margin: 0;
  color: var(--color-white);
}

.footer-bottom ul {
  display: flex;
}

.footer-bottom li {
  position: relative;
  margin-left: 15px;
  padding-left: 15px;
}

.footer-bottom li + li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  height: 15px;
  border-left: 2px dashed rgba(255, 255, 255, 0.1);
}

.footer-bottom a {
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Zurück-nach-oben-Knopf */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 0;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 90;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top .icon {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

/* ==========================================================================
   Neuer Stil (Paket 1)
   Gilt seitenweit. Nur was ausschließlich die Startseite betrifft, steht unter .home.
   ========================================================================== */

.section-intro.is-light h2 {
  color: var(--color-light-text);
}

.section-intro.is-light .section-mark {
  color: var(--color-accent);
}

.section-intro.is-light p:not(.section-mark) {
  color: rgba(255, 255, 255, 0.8);
}

/* Kennzahlen: große Zahlen, ruhige Beschriftung */
.fun-fact-area {
  padding: 80px 0 30px;
}

.fun-fact img {
  width: 56px;
  height: 56px;
}

.fun-fact h3 {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--color-text);
  margin-bottom: 10px;
}

.fun-fact .timer {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--color-hero-bg);
}

/* Leistungen: Karten mit Nummer, Pfeil-Link und Steuerung über dem Slider */
.home .services-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.home .slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 25px;
}

.home .slider-button {
  position: static;
  margin: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  opacity: 1;
}

.home .slider-button:hover:not(:disabled) {
  background: var(--color-white);
  color: var(--color-hero-bg);
}

.home .slider-button:disabled {
  opacity: 0.3;
}

.slider-pause .icon-play,
.slider-pause.is-paused .icon-pause {
  display: none;
}

.slider-pause.is-paused .icon-play {
  display: block;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 0;
  border-radius: var(--radius-card);
  padding: 30px 28px 28px;
  transition: transform var(--duration-hover) var(--ease-calm), box-shadow var(--duration-hover) var(--ease-calm);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* Die ganze Karte ist klickbar, der Link bleibt aber die Überschrift */
.service-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

.service-card:focus-within {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.service-number {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-primary);
  margin-bottom: 18px;
}

.service-card .thumb {
  width: 64px;
  height: 64px;
  margin: 0 0 22px;
  border: 0;
  border-radius: var(--radius-card);
  padding: 12px;
  background: var(--color-warm-bg);
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.service-card p {
  flex-grow: 1;
  color: var(--color-text);
  margin-bottom: 22px;
}

.service-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.service-more .icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-hover) var(--ease-calm);
}

.service-card:hover .service-more .icon {
  transform: translateX(4px);
}

/* Kostenkarten: runde Ecken, Kopf als Fläche, Hereingleiten von links und rechts */
.home .home-costs {
  background: var(--color-white);
  padding: var(--section-padding) 0;
}

.home .home-costs::after {
  display: none;
}

.home .home-costs .section-intro {
  margin-bottom: 25px;
}

.duty-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(19, 26, 43, 0.08);
}

.duty-card h3 {
  text-align: left;
  padding: 24px 40px;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.duty-card h3::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: none;
}

.duty-card ul {
  padding: 36px 40px;
}

.duty-card .duty-intro {
  padding: 28px 40px 0;
}

.duty-card li {
  align-items: flex-start;
  margin-bottom: 28px;
}

.duty-card .thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 14px;
  border-radius: var(--radius-card);
  box-shadow: none;
  background: var(--color-warm-bg);
}

.duty-card .info {
  padding-left: 20px;
}

.duty-card h4 {
  font-size: 16px;
  margin-bottom: 6px;
}

/* Dunkleres Rot für den Kartenkopf: weiße Schrift braucht mindestens 4,5:1 Kontrast */
.duty-card.is-avoid h3::after {
  background: #c41a2c;
}

.duty-card.from-left.reveal.is-visible {
  animation-name: reveal-from-left;
  animation-duration: 800ms;
}

.duty-card.from-right.reveal.is-visible {
  animation-name: reveal-from-right;
  animation-duration: 800ms;
}

@keyframes reveal-from-left {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
}

@keyframes reveal-from-right {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
}

/* Ablauf als Pfeildiagramm: Schritte nebeneinander, darüber ein geschwungener Pfeil */
.flow {
  position: relative;
  padding-top: 30px;
}

.flow-line {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -10px;
  overflow: visible;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="1" im SVG: die Linie ist genau ein Strich lang und kann "gezeichnet" werden */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.flow-line .flow-arrowhead {
  stroke: var(--color-primary);
}

.flow.reveal.is-visible .flow-line path {
  animation: draw-line 1400ms var(--ease-calm) 200ms backwards;
}

.flow.reveal.is-visible .flow-line .flow-arrowhead {
  animation-duration: 300ms;
  animation-delay: 1500ms;
}

@keyframes draw-line {
  from {
    stroke-dashoffset: 1;
  }
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.flow-step {
  position: relative;
  background: var(--color-warm-bg);
  border-radius: var(--radius-card);
  padding: 28px 24px;
}

/* Pfeil zwischen zwei Schritten */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -25px;
  top: 46px;
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--color-primary);
  border-right: 3px solid var(--color-primary);
  transform: rotate(45deg);
}

.flow-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-hero-bg);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 18px;
}

.flow-step h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.flow-step p {
  font-size: 15px;
  line-height: 25px;
  margin: 0;
}

/* Warnzeichen: Notrufnummern als große Knöpfe, Warnzeichen als Kacheln */
.warning-area::before {
  display: none;
}

.warning-area .emergency {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 0 0 50px;
  text-align: left;
}

.warning-area .emergency .emergency-link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 14px 26px;
  border-radius: var(--radius-button);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}

.warning-area .emergency .emergency-link span {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.warning-area .emergency .emergency-link:hover {
  background: var(--color-white);
  color: var(--color-dark);
}

/* Dunkleres Rot als der Akzent, damit die weiße Schrift genug Kontrast hat */
.warning-area .emergency .emergency-link.is-urgent {
  background: #c41a2c;
  border-color: #c41a2c;
}

.warning-area .emergency .emergency-link.is-urgent:hover {
  background: var(--color-white);
  color: #c41a2c;
}

.warning-list {
  gap: 20px;
}

.warning-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  margin: 0;
  padding: 20px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.warning-list .thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 14px;
  /* Helle Kachel, weil die Linien-Icons dunkel sind und auf Navy sonst verschwinden */
  border-radius: var(--radius-card);
  background: var(--color-white);
}

.warning-list .thumb::after {
  display: none;
}

.warning-list h3 {
  font-size: 17px;
}

/* FAQ: Einleitung und Reiter links, Antworten rechts */
.faq-area::after {
  display: none;
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}

.faq-tabs button {
  border-radius: var(--radius-button);
  box-shadow: none;
  border: 1px solid var(--color-warm-line);
  padding: 8px 22px;
}

.faq-tabs button[aria-selected="true"] {
  background: var(--color-hero-bg);
  border-color: var(--color-hero-bg);
}

.acd-items {
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: 0 10px 40px rgba(60, 45, 20, 0.06);
}

.acd-trigger {
  font-size: 16px;
}

/* Ratgeber: runde Karten wie im Rest der Seite */
.blog-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(19, 26, 43, 0.08);
}

/* Abschnittsüberschriften seitenweit linksbündig und groß, ohne Augen-Trenner */
.site-heading {
  max-width: 750px;
  margin: 0 0 var(--heading-gap);
  text-align: left;
}

.site-heading h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  padding-bottom: 0;
}

.site-heading .divider {
  display: none;
}

.site-heading p {
  margin: 20px 0 0;
  font-size: 17px;
}

/* Artikeltext der Unterseiten */
.article h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--color-hero-bg);
}

/* Kurzer Strich über jeder Zwischenüberschrift gliedert lange Texte ruhig */
.article h2::before {
  content: "";
  display: block;
  width: 32px;
  margin-bottom: 16px;
  border-top: 2px solid var(--color-primary);
}

.article h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-hero-bg);
}

.article .lead {
  font-size: 19px;
  line-height: 32px;
}

/* Knöpfe: normale Schreibweise statt Großbuchstaben, wirkt ruhiger */
.btn {
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  padding: 13px 28px;
}

.notice {
  border-radius: var(--radius-card);
}

/* Seitenleiste mit runden Ecken */
.sidebar-item {
  border-radius: var(--radius-card);
  box-shadow: 0 10px 40px rgba(19, 26, 43, 0.08);
}

.sidebar-item h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
}

.sidebar-item.is-dark {
  background: var(--color-hero-bg);
}

/* Kostenbereich der Unterseiten: ohne weiße Schräge, gleichmäßiger Abstand */
.responsibilities-area::after {
  display: none;
}

.responsibilities-area {
  padding-bottom: var(--section-padding);
}

/* Abschluss-Leiste etwas heller als der Footer darunter, damit beide nicht verschmelzen */
.cta-area {
  background: var(--color-dark-raised);
  border-top: 1px solid rgba(200, 169, 106, 0.35);
}

.cta-area h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: 0;
}

@media (max-width: 991px) {
  .flow-line {
    display: none;
  }

  .flow-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Auf schmalen Bildschirmen zeigt der Pfeil nach unten */
  .flow-step:not(:last-child)::after {
    right: auto;
    left: 40px;
    top: auto;
    bottom: -22px;
    transform: rotate(135deg);
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .warning-list {
    grid-template-columns: 1fr;
  }

  .duty-card h3 {
    padding-left: 22px;
    padding-right: 22px;
  }

  .acd-items {
    padding: 24px;
  }

  .fun-fact .timer {
    font-size: 34px;
  }
}

/* ==========================================================================
   Einblenden beim Scrollen
   Die Klasse "reveal" setzt js/main.js nur bei Elementen unterhalb des
   sichtbaren Bereichs. Ohne JavaScript bleibt also alles sichtbar.
   ========================================================================== */

.reveal:not(.is-visible) {
  opacity: 0;
}

/* "backwards" hält den Startzustand während der Verzögerung (Stagger).
   Nach dem Ende gilt wieder das normale CSS, Hover-Effekte bleiben also intakt. */
.reveal.is-visible {
  animation: reveal-up var(--duration-reveal) var(--ease-calm) backwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* ==========================================================================
   Raster ab Tablet
   ========================================================================== */

@media (min-width: 768px) {
  .col-6 { width: 50%; }
  .col-4 { width: 33.3333%; }
  .col-8 { width: 66.6666%; }
  .col-2 { width: 16.6666%; }
}

/* ==========================================================================
   Unter 1200 px: Navigation enger, damit alles in eine Zeile passt
   ========================================================================== */

@media (max-width: 1199px) {
  .menu > li > a {
    padding-left: 9px;
    padding-right: 9px;
    letter-spacing: 0.3px;
  }

  .header-cta {
    display: none;
  }

  .slider-prev { left: -45px; }
  .slider-next { right: -45px; }
}

/* ==========================================================================
   Unter 992 px: mobile Navigation wie in der Vorlage
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --header-height: 72px;
  }

  /* Auf dem Handy ist der Header immer dunkel und fest, wie auf dem Desktop nach dem Scrollen */
  .site-header,
  .site-header.is-scrolled {
    background: var(--color-dark);
    box-shadow: var(--shadow-header);
    border-bottom: 0;
  }

  .header-inner {
    position: relative;
    justify-content: center;
  }

  .brand-icon {
    width: 40px;
    height: 40px;
  }

  .nav-toggle {
    display: flex;
    position: absolute;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--color-light-text);
  }

  .nav-toggle .icon {
    width: 20px;
    height: 20px;
  }

  .nav-toggle .icon-close {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .icon-open {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .icon-close {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - var(--header-offset));
    overflow-y: auto;
    /* Unsichtbar statt "display: none", damit Öffnen und Schließen weich laufen.
       "visibility: hidden" nimmt das Menü trotzdem aus der Tab-Reihenfolge. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .menu {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--gutter);
  }

  .menu > li {
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .menu > li:first-child {
    border-top: 0;
  }

  .menu > li > a,
  .site-header.is-scrolled .menu > li > a {
    flex: 1;
    padding: 15px 0;
    color: var(--color-light-text);
  }

  .menu > li > a:hover,
  .menu > li > a[aria-current="page"] {
    color: var(--color-accent);
    text-decoration: none;
  }

  .sub-toggle,
  .site-header.is-scrolled .sub-toggle {
    width: 44px;
    height: 44px;
    margin: 0;
    color: var(--color-light-text);
  }

  .sub-menu {
    position: static;
    background: transparent;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border-top: 0;
    padding: 0 0 10px 15px;
    opacity: 1;
    /* "inherit" statt "visible": sonst bliebe ein offenes Untermenü sichtbar,
       obwohl das Hauptmenü schon ausgeblendet ist */
    visibility: inherit;
    transform: none;
    display: none;
  }

  /* "visibility: inherit" auch hier, weil die Desktop-Regeln für diese Zustände
     "visible" setzen und sonst gewinnen: Das Untermenü bliebe unsichtbar klickbar */
  .has-sub:hover > .sub-menu,
  .has-sub:focus-within > .sub-menu {
    display: none;
    visibility: inherit;
  }

  .has-sub.is-open > .sub-menu {
    display: block;
    visibility: inherit;
    animation: slide-in var(--duration-hover) var(--ease-calm);
  }

  .sub-menu li {
    border-bottom: 0;
  }

  /* 9 px oben und unten ergeben mit der Zeilenhöhe eine 44 px hohe Klickfläche */
  .sub-menu a {
    padding: 9px 0;
    color: var(--color-light-text);
  }

  .sub-menu a:hover,
  .sub-menu a[aria-current="page"] {
    color: var(--color-accent);
  }

  .slider-button {
    color: var(--color-white);
  }

  .slider-track > li {
    flex-basis: calc((100% - 30px) / 2);
  }

  .slider {
    padding: 0 30px;
  }

  .slider-prev { left: -10px; }
  .slider-next { right: -10px; }

  .warning-list,
  .blog-grid,
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-area .thumb {
    padding-right: 0;
    margin-bottom: 40px;
  }

  .faq-area .col-6,
  .steps-area .col-6,
  .content-area .col-8,
  .content-area .col-4 {
    width: 100%;
  }

  .content-area .col-4 {
    margin-top: 50px;
  }

  .steps-list {
    padding-left: 0;
    margin-top: 30px;
  }

  .steps-area .thumb img {
    margin: 0 auto;
  }

  /* Klickflächen für Finger: mindestens 44 × 44 px */
  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .brand {
    min-height: 44px;
  }

  .slider-button {
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }
}

/* ==========================================================================
   Unter 768 px: Handy
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --section-padding: 50px;
    --section-padding-less: 20px;
    --heading-gap: 40px;
  }

  .banner-area {
    min-height: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: calc(var(--header-offset) + 30px);
    padding-bottom: 50px;
    gap: 10px;
  }

  .hero-intro {
    font-size: 16px;
    line-height: 26px;
  }

  .banner-list a {
    padding: 11px 16px;
  }

  /* Tabelle wird auf dem Handy zu Karten: jede Zeile ein Block, Spaltenname davor */
  .coverage-table.is-cards,
  .coverage-table.is-cards tbody,
  .coverage-table.is-cards tr,
  .coverage-table.is-cards th,
  .coverage-table.is-cards td {
    display: block;
  }

  .coverage-table.is-cards {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .coverage-table.is-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .coverage-table.is-cards tbody tr {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 6px 0;
    margin-bottom: 12px;
    box-shadow: 0 6px 24px rgba(60, 45, 20, 0.07);
  }

  .coverage-table.is-cards tbody tr + tr th,
  .coverage-table.is-cards tbody tr + tr td {
    border-top: 0;
  }

  .coverage-table.is-cards th,
  .coverage-table.is-cards td {
    padding: 6px 18px;
  }

  .coverage-table.is-cards tbody th {
    font-size: 17px;
    padding-top: 12px;
  }

  .coverage-table.is-cards td::before {
    content: attr(data-label) ": ";
    font-size: 13px;
    color: var(--color-text);
  }

  .breadcrumb-area {
    /* Vorher fest 130px (= 72px Header + 58px); jetzt kommt die Hinweisleiste dazu */
    padding: calc(var(--header-offset) + 58px) 0 70px;
  }

  .breadcrumb-area h1 {
    font-size: 26px;
  }

  .site-heading h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  .fun-fact-area {
    padding-bottom: 0;
  }

  .fun-fact {
    display: block;
    text-align: center;
  }

  .fun-fact img {
    margin: 0 auto 20px;
  }

  .fun-fact .info {
    padding-left: 0;
  }

  .services-area,
  .warning-area {
    padding-bottom: 50px;
  }

  .slider {
    padding: 0;
  }

  .slider-track > li {
    flex-basis: 100%;
  }

  .slider-button {
    position: static;
    margin: 0;
  }

  .slider-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
  }

  .responsibilities-area .col-6 + .col-6 {
    margin-top: 30px;
  }

  /* Neuer Kartenstil auf dem Handy: Icon links klein, Text daneben, weniger Innenabstand */
  .duty-card ul {
    padding: 28px 22px;
  }

  .duty-card .duty-intro {
    padding: 24px 22px 0;
  }

  .duty-card .duty-intro + ul {
    padding-top: 24px;
  }

  .duty-card .thumb {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    padding: 11px;
  }

  .duty-card .info {
    padding-left: 16px;
  }

  .warning-list,
  .blog-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }

  /* Je 7 px weniger als vorher, weil die Fragen-Knöpfe 7 px mehr Innenabstand haben */
  .acd-items {
    padding: 23px 15px 18px;
  }

  .contact-form {
    padding: 30px 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .footer-about {
    padding-right: 0;
    margin-bottom: 40px;
  }

  .footer-links {
    margin-bottom: 40px;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom li:first-child {
    margin-left: 0;
    padding-left: 0;
  }

  /* Bei 320px Breite passen die drei Links nicht in eine Zeile; ohne Umbruch
     wurde die ganze Seite seitlich verschiebbar */
  .footer-bottom ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 25px;
  }

  /* Abstand kommt hier aus "gap"; die Trennlinie hinge nach dem Umbruch sonst
     allein am Zeilenanfang */
  .footer-bottom li {
    margin-left: 0;
    padding-left: 0;
  }

  .footer-bottom li + li::after {
    display: none;
  }

  .cta-area .container {
    flex-direction: column;
    text-align: center;
  }

  .content-area .col-4 {
    margin-top: 30px;
  }

  /* Klickflächen auf dem Handy mindestens 44 px hoch. Der Innenabstand plus
     Zeilenhöhe ergibt jeweils 44 px, die Abstände drumherum werden entsprechend kleiner. */
  .footer-bottom a,
  .warning-area .emergency a {
    display: inline-block;
    min-width: 44px;
    padding: 9px 0;
    text-align: center;
  }

  .footer-links a {
    display: inline-block;
    padding: 12px 0;
  }

  .footer-links li {
    margin-bottom: 0;
  }

  .more-link {
    padding: 9px 0;
  }

  /* Überschriften-Links in den Leistungskarten: 12 px Innenabstand oben und unten,
     dafür je 12 px weniger Außenabstand, damit die Karte gleich aussieht */
  .service-card .thumb {
    margin-bottom: 18px;
  }

  .service-card h3 {
    margin-bottom: 3px;
  }

  .service-card h3 a {
    display: inline-block;
    padding: 12px 0;
  }

  /* Breadcrumb: Links mindestens 44 px hoch, ohne Kasten */
  .breadcrumb {
    padding: 0;
  }

  .breadcrumb a {
    display: inline-block;
    min-width: 44px;
    padding: 9px 0;
  }

  .sidebar-item.is-dark .phone {
    padding: 9px 0;
    margin-bottom: 11px;
  }

  .sidebar-links li {
    padding: 0;
  }

  .sidebar-links a {
    padding: 9px 0;
  }

  /* FAQ-Fragen: 7 px mehr Innenabstand, dafür 7 px weniger Abstand außen herum */
  .acd-trigger {
    min-height: 44px;
    padding: 12px 0;
  }

  .acd-item {
    margin-bottom: 16px;
  }

  .acd-panel {
    margin-top: 13px;
  }
}

/* Wer Bewegung reduziert haben möchte, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .slider-track {
    scroll-behavior: auto;
  }

  /* Sicherheitsnetz: falls ein Element doch als "reveal" markiert ist, sofort zeigen */
  .reveal:not(.is-visible) {
    opacity: 1;
  }
}

/* Artikelliste auf der Ratgeber-Übersicht (ratgeber/index.html) */
.ratgeber-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.ratgeber-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.ratgeber-list h3 {
  margin: 0 0 8px;
}

/* ==========================================================================
   Auflockerung der Leistungsseiten (28.10.2026): Klapptexte, Warnkasten,
   Schritt-Ablauf, Kachel-Liste und Augen-Schema. Nur Farben aus :root.
   ========================================================================== */

/* Klapptexte im Fließtext: ruhiger als die FAQ-Karte, die Frage sieht aus wie eine
   Zwischenüberschrift. Mehrere dürfen gleichzeitig offen sein (js/main.js). */
.article .acd-items.is-inline {
  padding: 0;
  margin: 30px 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid var(--color-warm-line);
  border-radius: 0;
}

.acd-items.is-inline .acd-item {
  margin: 0;
  border-bottom: 1px solid var(--color-warm-line);
}

.acd-items.is-inline .acd-item h3 {
  margin: 0;
  font-size: inherit;
}

.acd-items.is-inline .acd-trigger {
  padding: 18px 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--color-hero-bg);
}

.acd-items.is-inline .acd-trigger:hover {
  color: var(--color-primary);
}

/* Der Pfeil sitzt in einem kleinen Messing-Kreis, damit klar ist: Das lässt sich öffnen */
.acd-items.is-inline .acd-trigger .icon {
  width: 30px;
  height: 30px;
  padding: 9px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
}

.acd-items.is-inline .acd-panel {
  border-top: 0;
  margin: 0;
  padding: 0 0 20px;
}

/* "until-found": Der Text bleibt für die Suche im Browser (Strg+F) auffindbar und klappt
   bei einem Treffer selbst auf. Solange er zu ist, darf er keinen Platz einnehmen. */
.acd-panel[hidden="until-found"] {
  padding: 0;
  margin: 0;
}

/* Warnkasten für Notfälle und Warnzeichen. Rot nur hier, wie in :root festgelegt. */
.alert-box {
  position: relative;
  margin: 30px 0;
  padding: 26px 28px 10px 72px;
  border: 1px solid var(--color-red);
  border-left-width: 4px;
  border-radius: var(--radius-card);
  background: var(--color-white);
}

/* Ausrufezeichen als reine Dekoration, der Text sagt bereits, worum es geht */
.alert-box::before {
  content: "!";
  position: absolute;
  left: 22px;
  top: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}

.alert-box h2::before {
  display: none;
}

.alert-box h2,
.alert-box h3 {
  margin-top: 0;
}

.article .alert-box ul:not([class]) li::marker {
  color: var(--color-red);
}

/* Schritt-Ablauf: nummerierte Schritte untereinander, verbunden durch eine Messing-Linie */
.article ol.step-list {
  list-style: none;
  counter-reset: step;
  margin: 30px 0;
  padding: 0;
}

.article ol.step-list > li {
  position: relative;
  counter-increment: step;
  padding: 0 0 26px 64px;
}

.step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-hero-bg);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 42px;
  text-align: center;
}

/* Verbindungslinie zum nächsten Schritt */
.step-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50px;
  bottom: 8px;
  border-left: 2px solid var(--color-warm-line);
}

.step-list > li > h3:first-child {
  margin-top: 8px;
}

.step-list > li > p:last-child {
  margin-bottom: 0;
}

/* Kachel-Liste: kurze Aufzählungen (z. B. Risikofaktoren) als Raster statt langer Punktliste */
.article ul.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}

.article ul.fact-grid li {
  margin: 0;
  padding: 16px 18px;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-warm-bg);
  font-size: 15px;
  line-height: 1.5;
}

/* Augen-Schema: Querschnitt als Linienzeichnung, das betroffene Teil in Messing */
.article figure.eye-diagram {
  margin: 30px 0;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--color-warm-bg);
}

.eye-diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.eye-diagram figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .article ul.fact-grid {
    grid-template-columns: 1fr;
  }

  .alert-box {
    padding: 64px 20px 6px;
  }

  .alert-box::before {
    left: 20px;
    top: 20px;
  }

  .article figure.eye-diagram {
    padding: 8px;
  }
}

/* Hinweis "Testseite, Domain zu verkaufen" (partials/verkauf.html, 28.10.2026).
   Helles Band direkt unter dem dunklen Seitenkopf, damit es sich von der gelben Leiste oben
   und vom Inhalt deutlich abhebt. Helles Messing nur im dunklen Etikett (Kontrastregel :root). */
.sale-notice {
  background: var(--color-warm-bg);
  border-bottom: 1px solid var(--color-warm-line);
  border-top: 3px solid var(--color-primary);
  padding: 22px 0;
}

.sale-notice-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sale-notice-label {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--radius-button);
  background: var(--color-hero-bg);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.sale-notice p {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 16px;
  line-height: 1.5;
}

.sale-notice strong {
  font-family: var(--font-heading);
  font-size: 18px;
}

.sale-notice a {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .sale-notice-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ==========================================================================
   Quellen (29.10.2026): aufklappbare Belege im Text und gegliederte Quellenliste
   Im Text steht nur eine kleine Ziffer. Ein Klick klappt den Kurzbeleg „(IQWiG, 2024)“
   auf, erst dessen Link springt zur Liste. Der Schalter unten links zeigt alle auf einmal.
   ========================================================================== */

/* "top" statt "vertical-align: super": Die Ziffer hebt sich, ohne die Zeile höher zu machen */
.cite-toggle {
  position: relative;
  top: -0.45em;
  margin-left: 1px;
  padding: 0 2px;
  border: 0;
  background: none;
  font-size: 0.7em;
  line-height: 1;
  color: var(--color-primary);
  border-radius: 3px;
  transition: var(--transition);
}

/* Unsichtbar vergrößerte Klickfläche, damit man die kleine Ziffer auch am Handy trifft */
.cite-toggle::after {
  content: "";
  position: absolute;
  inset: -8px -5px;
}

.cite-toggle:hover,
.cite-toggle[aria-expanded="true"] {
  background: var(--color-warm-line);
  color: var(--color-text-strong);
}

.cite-text {
  display: none;
  font-size: 0.85em;
  color: var(--color-text);
}

.cite-text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cite.is-open .cite-text,
.cites-visible .cite-text {
  display: inline;
}

/* Sind alle Belege ausgeschrieben, wäre die Ziffer davor doppelt */
.cites-visible .cite-toggle {
  display: none;
}

/* Schalter "Quellen im Text": wird von js/main.js nur auf Seiten mit Belegen eingefügt */
.cite-switch {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  padding: 0 16px;
  border: 1px solid var(--color-accent);
  border-radius: 23px;
  background: var(--color-dark);
  color: var(--color-light-text);
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(19, 26, 43, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.cite-switch.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Kleiner Kippschalter: links grau = aus, rechts Messing = an */
.cite-switch-track {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 8px;
  background: #4b5470;
  transition: var(--transition);
}

.cite-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-light-text);
  transition: var(--transition);
}

.cite-switch[aria-pressed="true"] .cite-switch-track {
  background: var(--color-accent);
}

.cite-switch[aria-pressed="true"] .cite-switch-track::after {
  transform: translateX(14px);
  background: var(--color-dark);
}

/* Quellenliste: Gruppen nach Art der Quelle, je Eintrag Nummer, Kurzbeleg, Angabe, Link */
.article .sources-group {
  margin: 45px 0 10px;
  font-size: 14px;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-primary);
}

.article h2 + .sources-group {
  margin-top: 10px;
}

.article ol.sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article .sources-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 16px;
  max-width: 70ch;
  padding: 16px 10px;
  border-top: 1px solid var(--color-border);
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  transition: var(--transition);
}

/* Nach dem Sprung aus dem Text ist der gesuchte Eintrag kurz hinterlegt */
.article .sources-list li:target {
  background: var(--color-gray-bg);
}

.sources-list li > * {
  grid-column: 2;
}

.sources-list .source-number {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-primary);
}

.sources-list .source-key {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text-strong);
}

.sources-list .source-link {
  justify-self: start;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .cite-switch {
    left: 12px;
    bottom: 12px;
  }
}