/* ============================================================
   Schmale Fenster und Handys
   ------------------------------------------------------------
   Die Gestaltung der Seiten steht inline im HTML (style=...).
   Inline Angaben schlagen jedes Stylesheet, deshalb arbeiten
   die Regeln hier mit !important. Wo es keine Klasse gibt,
   greifen sie über Merkmale im style Attribut, zum Beispiel
   [style*="88px"] für die Seitenränder.

   Ab 1441px Breite sieht alles aus wie im Entwurf.
   Stufen:  bis 1240px  Menüknopf statt Navigationsleiste
            bis 1100px  schmalere Seitenränder
            bis  860px  Spalten untereinander (Tablet hochkant)
            bis  600px  Handy
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
.seite { width: auto !important; max-width: 1440px; }

/* ---------- ab 1441px: Flächen bis an den Rand, Inhalt bleibt mittig ----------
   Hintergründe (Band, Kopf, graue Flächen, Fußzeile) laufen über die ganze
   Fensterbreite. Der Inhalt behält die Breite aus dem Entwurf (1264px) und
   steht in der Mitte. */
@media (min-width: 1441px) {
  .seite { max-width: none; }
  .seite [style*="88px"] {
    padding-left: max(88px, calc(50% - 632px)) !important;
    padding-right: max(88px, calc(50% - 632px)) !important;
  }
  /* Startseite: das Foto reicht bis zum Rand des 1440px Rahmens */
  .seite [style*="padding: 72px 0 44px 88px"] { padding-right: max(0px, calc(50% - 720px)) !important; }
}
.seite img { max-width: 100%; }

/* Laufband für den Hinweis oben, gebaut von einstellungen.js */
.seite .band.laufend { padding: 0 !important; overflow: hidden; white-space: nowrap; contain: paint; }
.band-lauf { display: inline-flex; will-change: transform; backface-visibility: hidden; }
.band.einblenden { overflow: hidden; animation: band-ein 380ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes band-ein { from { max-height: 0; } to { max-height: 80px; } }
.band-text { padding: 12px 90px 12px 0; }
.band.laufend:hover .band-lauf { animation-play-state: paused !important; }
@media (max-width: 600px) { .band-text { padding: 11px 55px 11px 0; } }

/* Menüknopf, auf dem Desktop unsichtbar */
.menueknopf { display: none; }

/* ---------- bis 1240px: Menüknopf ---------- */
@media (max-width: 1240px) {
  .kopf { position: relative; }
  .menueknopf {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: 1.5px solid #35708f; color: #35708f;
    font: inherit; font-size: 15px; font-weight: 600;
    padding: 10px 16px; cursor: pointer; flex-shrink: 0;
  }
  .menueknopf-striche, .menueknopf-striche::before, .menueknopf-striche::after {
    display: block; width: 18px; height: 2px; background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
  }
  .menueknopf-striche { position: relative; }
  .menueknopf-striche::before, .menueknopf-striche::after { content: ""; position: absolute; left: 0; }
  .menueknopf-striche::before { top: -6px; }
  .menueknopf-striche::after { top: 6px; }
  .menueknopf[aria-expanded="true"] .menueknopf-striche { background: transparent; }
  .menueknopf[aria-expanded="true"] .menueknopf-striche::before { transform: translateY(6px) rotate(45deg); }
  .menueknopf[aria-expanded="true"] .menueknopf-striche::after { transform: translateY(-6px) rotate(-45deg); }

  .kopf-nav { display: none !important; }
  .kopf-nav.offen {
    display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: #fbfcfd; border-bottom: 1px solid #e2e8ea;
    box-shadow: 0 12px 24px rgba(23, 34, 42, 0.08);
    padding: 8px 48px 24px 48px;
    font-size: 17px !important;
  }
  .kopf-nav.offen .navlink { padding: 14px 0; border-bottom: 1px solid #e2e8ea; }
  .kopf-nav.offen .navlink.aktiv::after { display: none; }
  .kopf-nav.offen .navlink.aktiv { font-weight: 600; }
  .kopf-nav.offen .knopf-umriss { margin-top: 20px; text-align: center; padding: 14px 20px !important; }
}

/* ---------- bis 1240px: Startseite, Bild neben dem Titel ---------- */
@media (max-width: 1240px) {
  .seite [style*="grid-template-columns: minmax(0, 1fr) 660px"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  /* Knöpfe brechen nie in sich um, die Reihe darf umbrechen */
  .seite .knopf, .seite .knopf-umriss { white-space: nowrap; }
  .seite [style*="display: flex"]:not(.kopf):not(.kopf *) { flex-wrap: wrap; }
}

/* ---------- bis 1360px: Startseite, Foto neben "Mehr als die Grundversorgung" ----------
   Auf breiten Bildschirmen füllt das Foto die Höhe der Liste daneben.
   Darunter wäre der Ausschnitt zu schmal für die Holzbuchstaben,
   dann bekommt es wieder seine feste Höhe. */
@media (max-width: 1360px) {
  .seite [style*="grid-template-columns: minmax(0, 1fr) 520px"] { grid-template-columns: minmax(0, 1fr) 420px !important; }
  .seite img[style*="flex: 1 1 auto; height: 232px"] { flex: none !important; }
}

/* ---------- bis 1100px: schmalere Ränder ---------- */
@media (max-width: 1100px) {
  .seite [style*="88px"] { padding-left: 48px !important; padding-right: 48px !important; }
  /* Ihre Ärztin: Kopfbereich hat keinen eigenen Rand */
  .seite [style*="max-width: 940px; margin: 0 auto; display: grid"] { padding-left: 48px !important; padding-right: 48px !important; }
  .seite [style*="grid-template-columns: minmax(0, 1fr) 500px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 480px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 460px"] { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) !important; gap: 40px !important; }
  /* Neu bei uns und Leistungen: Bezeichnungsspalte schmaler */
  .seite [style*="grid-template-columns: minmax(0, 1.7fr) 400px"] { grid-template-columns: minmax(0, 1fr) 300px !important; gap: 40px !important; }
  .seite [style*="grid-template-columns: 240px minmax"],
  .seite [style*="grid-template-columns: 230px minmax"] { grid-template-columns: 170px minmax(0, 1fr) !important; gap: 24px !important; }
}

/* ---------- bis 860px: Spalten untereinander ---------- */
@media (max-width: 860px) {
  /* große Zweispalter */
  .seite [style*="grid-template-columns: minmax(0, 1fr) 660px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 500px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 480px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 460px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 420px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 520px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 380px"],
  .seite [style*="grid-template-columns: minmax(0, 1.7fr) 400px"],
  .seite [style*="grid-template-columns: minmax(0, 1fr) 180px"],
  .seite [style*="grid-template-columns: 1fr 1fr"],
  .seite [style*="grid-template-columns: 250px minmax"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important;
  }
  /* Kneipp Siegel nur auf dem Desktop, untereinander steht es verloren da */
  .seite [style*="grid-template-columns: minmax(0, 1fr) 180px"] img { display: none !important; }
  /* Startseite: Bild läuft nicht mehr bis zum Rand */
  .seite [style*="padding: 72px 0 44px 88px"] { padding-right: 48px !important; }

  /* Dreier Raster werden zu Zweiern */
  .seite [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Startseite: Kurzinfos untereinander, ohne senkrechte Trennlinien */
  .seite [style*="repeat(3, minmax(0, 1fr)); gap: 0"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .seite [style*="repeat(3, minmax(0, 1fr)); gap: 0"] > div {
    padding: 20px 0 !important; border-left: none !important; border-bottom: 1px solid #dde5e8;
  }

  /* Wochentage: eine Zeile pro Tag */
  .seite [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .seite [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] > div {
    display: grid !important; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; row-gap: 0 !important;
    padding: 16px 16px !important; border-top-width: 2px !important;
  }
  .seite [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] > div > span:first-child { grid-row: span 2; margin: 0 !important; }

  /* Fußzeile untereinander */
  .fuss { flex-direction: column; align-items: flex-start !important; gap: 18px; }
}

/* ---------- bis 600px: Handy ---------- */
@media (max-width: 600px) {
  .seite [style*="88px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .seite [style*="padding: 72px 0 44px 88px"] { padding-right: 20px !important; }
  .seite [style*="max-width: 940px; margin: 0 auto; display: grid"] { padding: 36px 20px 44px 20px !important; }
  .kopf-nav.offen { padding-left: 20px; padding-right: 20px; }

  /* weniger Luft oben und unten */
  .seite [style*="padding: 64px 88px"], .seite [style*="padding: 72px 88px"],
  .seite [style*="padding: 56px 88px"], .seite [style*="padding: 52px 88px"],
  .seite [style*="padding: 44px 88px"], .seite [style*="padding: 72px 0 44px 88px"] { padding-top: 36px !important; }
  .seite [style*="padding: 64px 88px"]:not([style*="88px 0 88px"]),
  .seite [style*="padding: 72px 88px"]:not([style*="88px 0 88px"]),
  .seite [style*="padding: 56px 88px"]:not([style*="88px 0 88px"]),
  .seite [style*="padding: 44px 88px"],
  .seite [style*="padding: 72px 0 44px 88px"],
  .seite [style*="padding: 8px 88px 76px 88px"] { padding-bottom: 44px !important; }

  /* Kopf */
  .kopf { padding-top: 14px !important; padding-bottom: 14px !important; gap: 12px; }
  .kopf img { width: 40px !important; height: 40px !important; }
  .kopf a { gap: 10px !important; }
  .kopf [style*="font-size: 20px"] { font-size: 17px !important; }
  .kopf [style*="font-size: 14px"] { font-size: 12.5px !important; }
  .menueknopf { padding: 10px 12px; }
  .menueknopf > span:last-child { display: none; }
  .band { font-size: 14px !important; }

  /* Schriftgrößen */
  .seite [style*="font-size: 56px"] { font-size: 38px !important; }
  .seite [style*="font-size: 48px"] { font-size: 32px !important; }
  /* Keine Silbentrennung. Nur ein Wort, das gar nicht in die Zeile passt, wird umbrochen */
  .seite h1, .seite h2 { overflow-wrap: break-word; }
  .seite [style*="font-size: 36px"] { font-size: 30px !important; }
  .seite [style*="font-size: 30px"] { font-size: 26px !important; }
  .seite [style*="font-size: 26px"] { font-size: 23px !important; }
  .seite [style*="font-size: 18px"] { font-size: 17px !important; }

  /* alles einspaltig */
  .seite [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"]:not([style*="gap: 0"]),
  .seite [style*="grid-template-columns: 230px minmax"],
  .seite [style*="grid-template-columns: 240px minmax"],
  .seite [style*="grid-template-columns: 168px minmax"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important;
  }
  .seite [style*="grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px"],
  .seite [style*="grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px"] { gap: 32px !important; }
  /* Grundversorgung: Liste dicht untereinander */
  .seite [style*="repeat(3, minmax(0, 1fr)); gap: 12px 44px"] { gap: 10px !important; }
  /* Preiszeilen und kleine Tabellen bleiben zweispaltig, nur schmaler */
  .seite [style*="grid-template-columns: minmax(0, 1fr) 130px"] { grid-template-columns: minmax(0, 1fr) auto !important; gap: 16px !important; }
  .seite [style*="grid-template-columns: 150px 1fr"] { grid-template-columns: 120px minmax(0, 1fr) !important; }
  .seite [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] > div { grid-template-columns: 132px minmax(0, 1fr); padding: 14px 12px !important; }
  .seite [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] > div > span:first-child { font-size: 19px !important; }

  /* Kontaktkasten: Bezeichnung über dem Wert, damit die E-Mail in eine Zeile passt */
  .seite [style*="grid-template-columns: 96px minmax"] { grid-template-columns: minmax(0, 1fr) !important; gap: 2px !important; }

  /* Knöpfe untereinander und gleich breit */
  .seite [style*="display: flex"]:has(> .knopf, > .knopf-umriss) { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  .seite [style*="display: flex"]:has(> .knopf, > .knopf-umriss) > div { flex-direction: column; align-items: stretch !important; }
  .seite .knopf, .seite .knopf-umriss { display: block; }

  /* Bilder flacher */
  .seite img[style*="height: 380px"], .seite img[style*="height: 330px"],
  .seite img[style*="height: 300px"], .seite img[style*="height: 232px"] { height: 240px !important; }
  .seite [style*="height: 230px"] { height: 200px !important; }

  /* Knöpfe in voller Breite tippbar */
  .seite .knopf, .seite .knopf-umriss { text-align: center; }
}