/* ============================================================
   SCHILD-BURGGASSER – Customizer-CSS (komplett, EINE Datei)
   Ersetzt das gesamte bisherige Zusaetzliche CSS.
   Stand v64: Veralteten Kommentar in Abschnitt 48 bereinigt.
   Stand v63: Neuer Abschnitt 53 fuer die Brotkrume
   (.brotkrumen) und den Abschnitt mit weiteren Leistungen
   (.weitere-leistungen) am Fuss der Leistungsseiten.
   53 nummerierte Abschnitte, Stand v64.

   HINWEIS: Diese Datei wird vom Plugin "Praxis
   Schild-Burggasser" geladen. Nicht mehr ins Customizer-CSS
   kopieren, sonst gilt alles doppelt.
   Abschnitt 52 (Preise auf Anfrage) laesst sich im Plugin
   ueber einen Schalter abdrehen, dafuer die zusaetzliche
   Bedingung body:not(.sb-preise-sichtbar).
   ============================================================ */

/* @import MUSS ganz oben stehen, sonst ignorieren Browser ihn.
   Stand v1 lag er mitten in Abschnitt 7 und war damit wirkungslos. */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');


/* ============================================================
   0) LOGO – Handy & Desktop moderat groesser
   ============================================================ */
@media only screen and (max-width: 768px) {
    #rdn-menu .navbar .col-md-4 img,
    #rdn-menu a.custom-logo-link img.custom-logo,
    img.custom-logo {
        max-width: 78% !important;
        width: 78% !important;
        height: auto !important;
    }
}
@media only screen and (min-width: 769px) {
    #rdn-menu .navbar .col-md-4 img,
    #rdn-menu a.custom-logo-link img.custom-logo,
    img.custom-logo {
        max-width: 68% !important;
        width: 68% !important;
        height: auto !important;
    }
}


/* ============================================================
   0c) PRAXISNAME – Name gross, Fachbezeichnung klein
   Unter dem Logo, auf ALLEN Groessen sichtbar.
   ============================================================ */
#rdn-menu .site-branding {
    line-height: 1 !important;
}
#rdn-menu .site-branding .custom-logo-link {
    display: inline-block !important;
}
/* Name – gross, fett, blau */
#rdn-menu .site-branding > .custom-logo-link::after {
    content: "Dr. Gebtraud Schild-Burggasser" !important;
    display: block !important;
    margin-top: 6px !important;
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #4a6a86 !important;
    text-align: left !important;
}
/* Fachbezeichnungen – kleiner, heller */
#rdn-menu .site-branding::after {
    content: "Fachärztin für Augenheilkunde\00000AÄrztin für Allgemeinmedizin" !important;
    white-space: pre !important;
    display: block !important;
    margin-top: 2px !important;
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.3px !important;
    color: #7a8a99 !important;
    text-align: left !important;
}
@media only screen and (max-width: 767px) {
    #rdn-menu .site-branding > .custom-logo-link::after {
        font-size: 15px !important;
    }
    #rdn-menu .site-branding::after {
        font-size: 11px !important;
    }
}


/* ============================================================
   0b) STICKY HEADER – Leiste klebt oben, OHNE festes padding.
   Gilt bewusst nur ab 769px. Am Handy uebernimmt die
   Kontaktleiste aus Abschnitt 19 die Dauer-Erreichbarkeit.
   ============================================================ */
@media only screen and (min-width: 769px) {
    html, body, #rdn-wrapper {
        overflow: visible !important;
    }
    #rdn-menu {
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    }
    /* Eingeloggt: WP-Adminleiste (32px) nicht ueberlappen.
       Besucher sehen diese Leiste nicht. */
    body.admin-bar #rdn-menu {
        top: 32px !important;
    }
    #rdn-menu .navbar { min-height: 0 !important; margin-bottom: 0 !important; }
}


/* ============================================================
   1) CTA-BUTTON "Termin Buchen" – orange
   ============================================================ */
.menu-cta a,
#menu-neu li.menu-cta a {
    background: #c75a2a !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 500;
    text-decoration: none !important;
}
.menu-cta a:hover,
#menu-neu li.menu-cta a:hover {
    background: #a8481f !important;
}


/* ============================================================
   2) MENUE-SCHRIFT – dezent, klein, zart
   ============================================================ */
#rdn-menu .navbar-nav > li > a {
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 7px 10px !important;
}
#rdn-menu .navbar-nav ul.sub-menu > li > a,
#rdn-menu .navbar-nav .dropdown-menu > li > a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #5f5e5a !important;
}
@media only screen and (min-width: 769px) {
    #rdn-menu .navbar-nav {
        text-align: right !important;
    }
    #rdn-menu .navbar-nav > li > a {
        font-size: 15px !important;
        padding: 6px 9px !important;
        letter-spacing: 0 !important;
    }
    #rdn-menu .navbar-nav > li {
        margin: 0 !important;
    }
    #rdn-menu .menu-cta a,
    #rdn-menu #menu-neu li.menu-cta a {
        padding: 7px 14px !important;
        font-size: 15px !important;
    }
}


/* ============================================================
   3) SUBMENUE "Leistungen" – dezent (Desktop-Dropdown)
   HINWEIS: Wird nach dem Flachlegen des Menues zu totem Code
   und kann dann samt Abschnitt 18 entfernt werden.
   ============================================================ */
#rdn-menu .navbar-nav .dropdown-menu,
#rdn-menu .navbar-nav ul.sub-menu {
    background: #eef2f6 !important;
    border: none !important;
    border-top: 3px solid #4a6a86 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10) !important;
}
#rdn-menu .navbar-nav .dropdown-menu > li > a {
    background: transparent !important;
}
#rdn-menu .navbar-nav .dropdown-menu > li > a:hover {
    background: #e3eaf1 !important;
    color: #c75a2a !important;
}


/* ============================================================
   4) SEITENINHALT – Farben (Logo-Welt)
   ============================================================ */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-title,
article h1, article h2, article h3, article h4 {
    color: #4a6a86 !important;
}
.entry-content a,
article a { color: #c75a2a !important; }
.entry-content a:hover,
article a:hover { color: #a8481f !important; }
.entry-content ul li::marker,
article ul li::marker,
.entry-content ol li::marker,
article ol li::marker { color: #c75a2a !important; }

a.elementor-button,
.elementor-button,
.wp-block-button__link,
a.button,
.btn { color: #ffffff !important; }

/* Echter Buchungs-Button (iteam-med).
   Per ID UND per Klasse: IDs muessen auf einer Seite eindeutig sein.
   Erster Button auf einer Seite id="otsbtn02",
   jeder weitere class="otsbtn02". */
#otsbtn02,
a#otsbtn02,
.otsbtn02,
a.otsbtn02 {
    background: #c75a2a !important;
    background-color: #c75a2a !important;
    background-image: none !important;
    border-color: #c75a2a !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-bottom: 0.6em !important;
}
#otsbtn02:hover,
a#otsbtn02:hover,
.otsbtn02:hover,
a.otsbtn02:hover {
    background: #a8481f !important;
    background-color: #a8481f !important;
    color: #ffffff !important;
}


/* ============================================================
   5) INHALTSVERZEICHNIS – dezent
   ============================================================ */
.ez-toc-container,
#ez-toc-container,
div.ez-toc-v2 {
    background: #fafbfb !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
}
.ez-toc-title,
#ez-toc-container .ez-toc-title {
    color: #888780 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 6px !important;
}
.ez-toc-list a,
#ez-toc-container a {
    color: #5f5e5a !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}
.ez-toc-list a:hover,
#ez-toc-container a:hover { color: #c75a2a !important; }
.ez-toc-list li,
#ez-toc-container li { margin: 0 !important; padding: 1px 0 !important; }


/* ============================================================
   6) SEITEN-HEADER (Theme-Banner) – bleibt auf Hoehe 0
   Das Theme rendert hier ein leeres
   <section class="rdn-sub-header" style="background-image: url();">.
   Es wird NICHT mit dem Beitragsbild gefuellt. Deshalb Hoehe 0,
   sonst steht auf jeder Seite ein leerer Streifen.
   Das Beitragsbild laeuft ueber Abschnitt 44.
   ============================================================ */
#rdn-wrapper .rdn-sub-header {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* KEIN Schleier */
#rdn-wrapper .rdn-sub-header::before {
    display: none !important;
}
/* Titel-Text und Breadcrumb ueber dem Bild ausblenden */
#rdn-wrapper .rdn-sub-header .page-title,
#rdn-wrapper .rdn-sub-header .rdn-sub-header-inner,
#rdn-wrapper .rdn-sub-header ul {
    display: none !important;
}


/* ============================================================
   7) LESBARKEIT – Atkinson Hyperlegible
   (@import steht jetzt ganz oben in der Datei)
   ============================================================ */
.entry-content,
.entry-content p,
.entry-content li {
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif;
    color: #232323;
    font-size: 17px;
    line-height: 1.6;
}
.entry-content p { margin-bottom: 0.9em; }
/* H2 – grosser Abschnitts-Anker, viel Luft darueber */
.entry-content h2,
article h2 {
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #4a6a86 !important;
    margin: 2.4em 0 0.6em !important;
}
/* H3 – mittlere Stufe, klar kleiner als H2, ruhig abgesetzt */
.entry-content h3,
article h3 {
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #4a6a86 !important;
    margin: 1.9em 0 0.4em !important;
}
/* H4 – kleinste Stufe, mit Akzentbalken */
.entry-content h4.wp-block-heading {
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #232323 !important;
    border-left: 3px solid #c75a2a !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding-left: 12px !important;
    margin: 1.6em 0 0.4em !important;
}
.entry-content ul,
.entry-content ol { margin-bottom: 1em; }
.entry-content li { margin-bottom: 0.15em; line-height: 1.4; }
.entry-content .wp-block-separator,
.entry-content hr {
    border: 0 !important;
    border-top: 1px solid #e8c4b0 !important;
    background-color: transparent !important;
    background-image: none !important;
    height: 0 !important;
    margin: 1.8em 0 !important;
    opacity: 1 !important;
}


/* ============================================================
   8) BOXEN – Akut / Hinweis / Tel-Zeiten / LARA
   ============================================================ */
.entry-content .akut-box {
    background: #fcf3ee !important;
    border-left: 4px solid #c75a2a !important;
    border-radius: 6px !important;
    padding: 18px 22px !important;
    margin: 1.5em 0 !important;
}
.entry-content .akut-box .akut-titel {
    color: #c75a2a !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 0.5em !important;
}
.entry-content .akut-box p { margin: 0 0 0.6em !important; }
.entry-content .akut-box p:last-child { margin-bottom: 0 !important; }

.entry-content .hinweis-box {
    background: #f6f4f0 !important;
    border-left: 4px solid #888780 !important;
    border-radius: 6px !important;
    padding: 18px 22px !important;
    margin: 1.5em 0 !important;
}
.entry-content .hinweis-box .hinweis-titel {
    color: #5f5e5a !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 0.5em !important;
}
.entry-content .hinweis-box p { margin: 0 0 0.6em !important; }
.entry-content .hinweis-box p:last-child { margin-bottom: 0 !important; }

.entry-content .tel-zeiten { margin: 0.5em 0 1em; }
.entry-content .tel-zeiten td {
    border: none !important;
    padding: 2px 0 !important;
    font-size: 16px;
    line-height: 1.4;
    vertical-align: top;
}
.entry-content .tel-zeiten td:first-child {
    font-weight: 700;
    padding-right: 18px !important;
    white-space: nowrap;
    color: #4a6a86;
}

.entry-content .lara-block {
    background: #e7edf3 !important;
    border: none !important;
    border-left: 4px solid #4a6a86 !important;
    border-radius: 6px !important;
    padding: 20px 24px !important;
    margin: 2em 0 !important;
}
.entry-content .lara-block h3 {
    margin: 0 0 8px !important;
    color: #4a6a86 !important;
    font-size: 18px !important;
    border-left: 0 !important;
    padding-left: 0 !important;
}
.entry-content .lara-block p { margin: 0 0 0.6em !important; color: #232323 !important; }
.entry-content .lara-block p:last-child { margin-bottom: 0 !important; }
.entry-content .lara-block a { color: #c75a2a !important; }


/* ============================================================
   9) LARA-FORMULAR (Contact Form 7)
   ============================================================ */
.entry-content .lara-formular {
    background: #e7edf3 !important;
    border-left: 4px solid #4a6a86 !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
    margin: 1.5em 0 !important;
    max-width: 460px !important;
}
.entry-content .lara-formular .lara-intro {
    color: #4a6a86 !important;
    margin: 0 0 0.8em !important;
    font-size: 15px !important;
}
.entry-content .lara-link {
    display: inline-block !important;
    margin-top: 0.4em !important;
    color: #c75a2a !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #e8c4b0 !important;
    padding-bottom: 1px !important;
}
.entry-content .lara-link:hover {
    color: #a8481f !important;
    border-bottom-color: #a8481f !important;
}


/* ============================================================
   10) KOSTEN-BOX – Preisliste
   ============================================================ */
.entry-content .kosten-box {
    background: #fbf6f2 !important;
    border: 1px solid #ecd4c4 !important;
    border-left: 3px solid #c75a2a !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin: 1.2em 0 !important;
    max-width: 420px !important;
}
.entry-content .kosten-box .kosten-titel {
    color: #c75a2a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 0.5em !important;
}
.entry-content .kosten-box .kosten-titel::before { content: "\20AC  " !important; font-weight: 700 !important; }
.entry-content .kosten-box ul { margin: 0 !important; padding-left: 0 !important; list-style: none !important; }
.entry-content .kosten-box li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 14px !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid #f2e2d6 !important;
    line-height: 1.35 !important;
    font-size: 13.5px !important;
}
.entry-content .kosten-box li:last-child { border-bottom: none !important; }
.entry-content .kosten-box li .preis { font-weight: 700 !important; color: #4a6a86 !important; white-space: nowrap !important; }
.entry-content .kosten-box p { margin: 0.6em 0 0 !important; font-size: 11.5px !important; color: #8a8884 !important; line-height: 1.4 !important; }
.entry-content .kosten-box .platzhalter { color: #c75a2a !important; font-style: italic !important; font-weight: 400 !important; }

.entry-content .kosten-box.zweispaltig { max-width: 640px !important; }
.entry-content .kosten-box .spalten { display: flex !important; gap: 20px !important; flex-wrap: wrap !important; }
.entry-content .kosten-box .spalte { flex: 1 1 240px !important; min-width: 220px !important; }
.entry-content .kosten-box .spalte-titel {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 0.4em !important;
    padding-bottom: 3px !important;
    border-bottom: 2px solid currentColor !important;
}
.entry-content .kosten-box .spalte-kasse .spalte-titel { color: #4a6a86 !important; }
.entry-content .kosten-box .spalte-privat .spalte-titel { color: #c75a2a !important; }
.entry-content .kosten-box .spalte ul { margin: 0 !important; padding-left: 0 !important; list-style: none !important; }
.entry-content .kosten-box .spalte li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid #f2e2d6 !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
}
.entry-content .kosten-box .spalte li:last-child { border-bottom: none !important; }
.entry-content .kosten-box .spalte-kasse li .preis { color: #4a6a86 !important; font-weight: 700 !important; white-space: nowrap !important; }
.entry-content .kosten-box .spalte-privat li .preis { color: #c75a2a !important; font-weight: 700 !important; white-space: nowrap !important; }


/* ============================================================
   11) KASSEN-BOX – ruhig/petrol
   ============================================================ */
.entry-content .kasse-box {
    background: #e9eff4 !important;
    border: 1px solid #c7d6e3 !important;
    border-left: 3px solid #4a6a86 !important;
    border-radius: 6px !important;
    padding: 14px 18px !important;
    margin: 1.2em 0 !important;
}
.entry-content .kasse-box .kasse-titel { color: #4a6a86 !important; font-size: 14px !important; font-weight: 700 !important; margin: 0 0 0.5em !important; }
.entry-content .kasse-box p,
.entry-content .kasse-box li { font-size: 13px !important; line-height: 1.5 !important; margin: 0.3em 0 !important; }
.entry-content .kasse-box ul { margin: 0.4em 0 !important; padding-left: 1.2em !important; }
.entry-content .kasse-box a { color: #c75a2a !important; }


/* ============================================================
   12) SEHBEHELF-HINWEIS-BOX
   ============================================================ */
.entry-content .sehbehelf-box {
    background: #fbf1e8 !important;
    border: 1px solid #e6b48f !important;
    border-left: 5px solid #c75a2a !important;
    border-radius: 6px !important;
    padding: 16px 20px !important;
    margin: 1.4em 0 !important;
}
.entry-content .sehbehelf-box .sehbehelf-titel {
    color: #c75a2a !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 0.5em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.entry-content .sehbehelf-box .sehbehelf-titel::before {
    content: "!" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background: #c75a2a !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
.entry-content .sehbehelf-box p:not(.sehbehelf-titel) {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #4a4a48 !important;
}


/* ============================================================
   13) HANDY – Inhalt minimal kleiner
   ============================================================ */
@media only screen and (max-width: 600px) {
    .entry-content p,
    .entry-content li { font-size: 16px; line-height: 1.55; }
    .entry-content h2, article h2 { font-size: 21px !important; margin: 1.9em 0 0.5em !important; }
    .entry-content h3, article h3 { font-size: 18px !important; margin: 1.6em 0 0.4em !important; }
    .entry-content h4.wp-block-heading { font-size: 15.5px !important; }
    .entry-content .wp-block-separator,
    .entry-content hr { margin: 1.4em 0 !important; }
    .entry-content .akut-box,
    .entry-content .hinweis-box,
    .entry-content .lara-block { padding: 14px 16px !important; }
}


/* ============================================================
   14) MENUE – Burger bis 767px, Desktop-Menue ab 768px
   v2: Schrift und Tap-Flaechen vergroessert. Vorher ca. 25px
   Zeilenhoehe, jetzt ueber 44px (Mindestmass fuer Touch).
   ============================================================ */
@media only screen and (max-width: 767px) {
    #rdn-menu .navbar-toggle,
    #rdn-menu button.navbar-toggle,
    #rdn-menu .navbar-header .navbar-toggle {
        display: block !important;
        float: right !important;
        margin-right: 0 !important;
        padding: 12px 10px !important;
    }
    #rdn-menu .navbar .container { position: relative !important; }
    #rdn-menu #navbar-collapse-1.navbar-collapse.collapse:not(.in):not(.show) { display: none !important; }
    #rdn-menu #navbar-collapse-1.navbar-collapse.collapse.in,
    #rdn-menu #navbar-collapse-1.navbar-collapse.collapse.show,
    #rdn-menu #navbar-collapse-1.navbar-collapse.collapsing { display: block !important; }
    #rdn-menu #navbar-collapse-1.navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        width: 300px !important;
        max-width: 92vw !important;
        background: #ffffff !important;
        border: 1px solid #e8edf2 !important;
        border-top: 3px solid #4a6a86 !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 10px 28px rgba(0,0,0,0.14) !important;
        z-index: 1050 !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        clear: both !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav { margin: 0 !important; width: 100% !important; float: none !important; }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li {
        float: none !important;
        width: 100% !important;
        text-align: right !important;
        border-bottom: 1px solid #eaeff3 !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li:last-child { border-bottom: none !important; }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li > a {
        text-align: right !important;
        padding: 13px 18px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav .dropdown-menu,
    #rdn-menu #navbar-collapse-1 .navbar-nav ul.sub-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background: #eef2f6 !important;
        border: none !important;
        border-right: 3px solid #c75a2a !important;
        box-shadow: none !important;
        padding: 2px 0 !important;
        margin: 0 !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav .dropdown-menu > li > a,
    #rdn-menu #navbar-collapse-1 .navbar-nav ul.sub-menu > li > a {
        text-align: right !important;
        padding: 11px 26px !important;
        font-size: 14px !important;
        color: #5f5e5a !important;
    }
    #rdn-menu #navbar-collapse-1 .menu-cta { padding: 8px 12px !important; }
    #rdn-menu #navbar-collapse-1 .menu-cta a {
        display: block !important;
        text-align: center !important;
        padding: 12px !important;
        font-size: 15px !important;
    }
}
@media only screen and (min-width: 768px) {
    #rdn-menu .navbar-toggle { display: none !important; }
    #rdn-menu #navbar-collapse-1.navbar-collapse {
        display: block !important;
        position: static !important;
        width: auto !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}


/* ============================================================
   15) CONTACT FORM 7 – Styling + Handy-kompakt
   ============================================================ */
.entry-content .wpcf7 { max-width: 460px !important; margin: 1em 0 !important; }
.entry-content .wpcf7 label {
    display: block !important;
    font-size: 13.5px !important;
    color: #232323 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.45em !important;
    font-weight: 600 !important;
}
.entry-content .wpcf7 p { margin: 0 0 0.5em !important; }
.entry-content .wpcf7 input[type="text"],
.entry-content .wpcf7 input[type="tel"],
.entry-content .wpcf7 input[type="email"],
.entry-content .wpcf7 textarea {
    width: 100% !important;
    padding: 7px 10px !important;
    border: 1px solid #c7d6e3 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    margin-top: 3px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
}
.entry-content .wpcf7 input:focus,
.entry-content .wpcf7 textarea:focus { border-color: #4a6a86 !important; outline: none !important; }
.entry-content .wpcf7 textarea { min-height: 70px !important; }
.entry-content .wpcf7 .wpcf7-radio .wpcf7-list-item { display: block !important; margin: 2px 0 !important; font-weight: 400 !important; }
.entry-content .wpcf7 .wpcf7-radio .wpcf7-list-item label { display: inline !important; font-weight: 400 !important; }
.entry-content .wpcf7 .wpcf7-acceptance,
.entry-content .wpcf7 .wpcf7-acceptance label { font-size: 12.5px !important; color: #5f5e5a !important; font-weight: 400 !important; }
.entry-content .wpcf7 input[type="submit"],
.entry-content .wpcf7 .wpcf7-submit {
    background: #c75a2a !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    cursor: pointer !important;
    margin-top: 0.4em !important;
    width: auto !important;
}
.entry-content .wpcf7 input[type="submit"]:hover,
.entry-content .wpcf7 .wpcf7-submit:hover { background: #a8481f !important; }

@media only screen and (max-width: 600px) {
    .entry-content .lara-formular { padding: 12px 12px !important; margin: 1em 0 !important; max-width: 100% !important; }
    .entry-content .wpcf7 { max-width: 100% !important; }
    .entry-content .wpcf7 label { font-size: 13px !important; margin-bottom: 0.35em !important; }
    .entry-content .wpcf7 input[type="text"],
    .entry-content .wpcf7 input[type="tel"],
    .entry-content .wpcf7 input[type="email"],
    .entry-content .wpcf7 textarea { padding: 8px 10px !important; font-size: 16px !important; }
    .entry-content .wpcf7 textarea { min-height: 60px !important; }
    .entry-content .wpcf7 input[type="submit"],
    .entry-content .wpcf7 .wpcf7-submit { width: 100% !important; padding: 12px !important; font-size: 15px !important; }
}
.kl-hinweis {
  background: #f4f1ec;
  border-left: 3px solid #c75a2a;
  padding: 0.8em 1.1em;
  margin-bottom: 1.5em;
  font-size: 0.95em;
}


/* ============================================================
   16) TEL-ZEITEN – Handy: Tag und Zeit gestapelt, kein Umbruch
   Hebt das white-space:nowrap aus Abschnitt 8 fuer Mobil auf.
   ============================================================ */
@media only screen and (max-width: 600px) {
    .entry-content .tel-zeiten td,
    .entry-content .lara-formular table td {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: normal !important;
    }
    .entry-content .tel-zeiten td:first-child,
    .entry-content .lara-formular table td:first-child {
        font-weight: 700 !important;
        padding-bottom: 0 !important;
        color: #4a6a86 !important;
    }
    .entry-content .tel-zeiten td:last-child,
    .entry-content .lara-formular table td:last-child {
        padding-top: 0 !important;
        padding-bottom: 0.6em !important;
    }
}


/* ============================================================
   17) KUNST-HEADER (.seh-header) – Bild volle Breite
   ============================================================ */
.seh-header {
    width: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
    margin: 0 0 30px 0 !important;
}
.seh-header img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}


/* ============================================================
   18) MOBIL – Untermenues im Burger immer offen zeigen
   HINWEIS: Wird nach dem Flachlegen des Menues zu totem Code.
   ============================================================ */
@media only screen and (max-width: 767px) {
    #rdn-menu #navbar-collapse-1 .navbar-nav .dropdown-menu,
    #rdn-menu #navbar-collapse-1 .navbar-nav ul.sub-menu {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* ============================================================
   19) MOBILE KONTAKTLEISTE (.mobil-kontakt)
   Fixe Leiste am unteren Rand, nur unter 768px. Ersetzt den
   fehlenden Sticky-Header am Handy: Anrufen, Termin, E-Mail
   sind immer einen Daumen entfernt.
   Das HTML dazu einmal in den Footer, dann gilt es ueberall.
   ============================================================ */
.mobil-kontakt { display: none; }

@media only screen and (max-width: 767px) {
    .mobil-kontakt {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1060 !important;
        background: #ffffff !important;
        border-top: 1px solid #dde5ec !important;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.10) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    .mobil-kontakt a {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        min-height: 54px !important;
        padding: 8px 4px !important;
        font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;
        color: #4a6a86 !important;
        border-right: 1px solid #eaeff3 !important;
    }
    .mobil-kontakt a:last-child { border-right: none !important; }
    .mobil-kontakt a:active { background: #eef2f6 !important; }
    .mobil-kontakt .mk-icon {
        font-size: 17px !important;
        line-height: 1 !important;
    }
    /* Mittlerer Punkt = Termin, farblich hervorgehoben */
    .mobil-kontakt a.mk-termin {
        background: #c75a2a !important;
        color: #ffffff !important;
        border-right-color: #c75a2a !important;
    }
    .mobil-kontakt a.mk-termin:active { background: #a8481f !important; }

    /* Platz schaffen, damit die Leiste den Footer nicht verdeckt */
    body { padding-bottom: 58px !important; }
}


/* ============================================================
   20) LEISTUNGS-KACHELN (.leistungs-grid)
   Fuer die Leistungen-Uebersicht. 3 Spalten Desktop,
   2 auf Tablet, 1 am Handy. Bild oben, Titel darunter.
   ============================================================ */
.entry-content .leistungs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin: 1.6em 0 2.4em !important;
    padding: 0 !important;
    list-style: none !important;
}
.entry-content .leistungs-grid .kachel {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid #e3eaf1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}
.entry-content .leistungs-grid .kachel:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
    transform: translateY(-2px) !important;
}
.entry-content .leistungs-grid .kachel img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    height: auto !important;
    margin: 0 !important;
}
.entry-content .leistungs-grid .kachel-text {
    padding: 14px 16px 16px !important;
}
.entry-content .leistungs-grid .kachel-titel {
    display: block !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #4a6a86 !important;
    margin: 0 0 4px !important;
}
.entry-content .leistungs-grid .kachel-sub {
    display: block !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: #5f5e5a !important;
    margin: 0 !important;
}
.entry-content .leistungs-grid .kachel:hover .kachel-titel { color: #c75a2a !important; }

@media only screen and (max-width: 900px) {
    .entry-content .leistungs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}
@media only screen and (max-width: 600px) {
    .entry-content .leistungs-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .entry-content .leistungs-grid .kachel-titel { font-size: 17px !important; }
    .entry-content .leistungs-grid .kachel-sub { font-size: 13.5px !important; }
}


/* ============================================================
   21) FOOTER (.sb-footer)
   Loest den alten Inline-Style-Footer ab. Das HTML enthaelt
   jetzt nur noch Struktur und Klassen, alles Optische steht hier.
   Farbwerte auf Kontrast geprueft: Textfarben erreichen auf
   #4a6a86 mindestens 4.5:1.
   ============================================================ */
.sb-footer {
    background: #4a6a86 !important;
    color: #eaf0f5 !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 30px 16px 26px !important;
    margin: 0 !important;
}
.sb-footer-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 28px !important;
    max-width: 1060px !important;
    margin: 0 auto !important;
}
.sb-footer .sb-col {
    flex: 1 1 200px !important;
    max-width: 240px !important;
}
.sb-footer h3,
.sb-footer .sb-col-titel {
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: 0 !important;
    padding: 0 !important;
}
.sb-footer p { margin: 3px 0 !important; }
.sb-footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.75 !important;
}
.sb-footer li { margin: 0 !important; }
.sb-footer .sb-praxis {
    font-weight: 700 !important;
    color: #ffffff !important;
}
.sb-footer .sb-fach {
    margin: 2px 0 10px !important;
    color: #dde6ee !important;
    font-size: 12.5px !important;
    letter-spacing: 0.5px !important;
}
.sb-footer .sb-muted { color: #dde6ee !important; }
.sb-footer .sb-akzent {
    color: #fbdcc0 !important;
    font-weight: 700 !important;
}
.sb-footer .sb-kassen {
    margin-top: 10px !important;
    font-style: italic !important;
    color: #fbdcc0 !important;
}
.sb-footer a {
    color: #eaf0f5 !important;
    text-decoration: none !important;
}
.sb-footer a:hover,
.sb-footer a:focus {
    color: #fbdcc0 !important;
    text-decoration: underline !important;
}
.sb-footer .sb-recht {
    margin-top: 12px !important;
}
.sb-footer .sb-recht a {
    color: #dde6ee !important;
    text-decoration: underline !important;
    margin-right: 14px !important;
}
.sb-footer .sb-recht a:last-child { margin-right: 0 !important; }
.sb-footer .sb-lara-link {
    display: inline-block !important;
    margin-top: 10px !important;
    color: #fbdcc0 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(251,220,192,0.55) !important;
    padding-bottom: 1px !important;
}
.sb-footer .sb-lara-link:hover {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    text-decoration: none !important;
}

/* Seitenlinks als schmale Zeile */
.sb-footer .sb-nav {
    max-width: 1060px !important;
    margin: 24px auto 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,0.18) !important;
    text-align: center !important;
}
.sb-footer .sb-nav a {
    display: inline-block !important;
    color: #dde6ee !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    text-decoration: none !important;
}
.sb-footer .sb-nav a:hover { color: #ffffff !important; text-decoration: underline !important; }

/* Urlaubszeiten und Copyright */
.sb-footer .sb-urlaub {
    max-width: 1060px !important;
    margin: 14px auto 0 !important;
    text-align: center !important;
    font-size: 12.5px !important;
    color: #dde6ee !important;
    line-height: 1.6 !important;
}
.sb-footer .sb-copy {
    max-width: 1060px !important;
    margin: 12px auto 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #dde6ee !important;
}

@media only screen and (max-width: 768px) {
    .sb-footer { padding: 24px 16px 22px !important; }
    .sb-footer-inner { gap: 22px !important; }
    .sb-footer .sb-col {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .sb-footer .sb-nav a { padding: 8px 10px !important; }
}


/* ============================================================
   22) FAQ – Sprungnavigation und aufklappbare Fragen
   Nutzt das native <details>-Element (WordPress-Block "Details").
   Kein JavaScript, funktioniert mit Tastatur und Screenreader.
   ============================================================ */

/* Sprungnavigation oben */
.entry-content .faq-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 1.4em 0 2.2em !important;
    padding: 0 !important;
    list-style: none !important;
}
.entry-content .faq-nav a {
    display: inline-block !important;
    background: #eef2f6 !important;
    border: 1px solid #dde5ec !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #4a6a86 !important;
    text-decoration: none !important;
}
.entry-content .faq-nav a:hover {
    background: #4a6a86 !important;
    border-color: #4a6a86 !important;
    color: #ffffff !important;
}

/* Aufklappbare Frage */
.entry-content details.wp-block-details {
    border: 0 !important;
    border-bottom: 1px solid #e8edf2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.entry-content details.wp-block-details summary {
    cursor: pointer !important;
    list-style: none !important;
    position: relative !important;
    padding: 16px 44px 16px 0 !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #4a6a86 !important;
}
.entry-content details.wp-block-details summary::-webkit-details-marker { display: none !important; }
.entry-content details.wp-block-details summary::marker { content: "" !important; }
.entry-content details.wp-block-details summary:hover { color: #c75a2a !important; }
.entry-content details.wp-block-details summary:focus-visible {
    outline: 2px solid #c75a2a !important;
    outline-offset: 2px !important;
}
/* Plus- und Minuszeichen rechts */
.entry-content details.wp-block-details summary::after {
    content: "+" !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #c75a2a !important;
}
.entry-content details.wp-block-details[open] summary::after {
    content: "\2013" !important;
}
.entry-content details.wp-block-details[open] summary {
    padding-bottom: 6px !important;
}
.entry-content details.wp-block-details > *:not(summary) {
    margin-left: 0 !important;
}
.entry-content details.wp-block-details p {
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    margin: 0 0 0.9em !important;
    padding-right: 44px !important;
}
.entry-content details.wp-block-details > *:last-child {
    margin-bottom: 18px !important;
}

/* Mehr Luft zwischen den Themenblöcken */
.entry-content .faq-block {
    margin: 0 0 2.6em !important;
}
.entry-content .faq-block h2 {
    margin-top: 2.2em !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #4a6a86 !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .faq-nav { gap: 6px !important; margin: 1.2em 0 1.8em !important; }
    .entry-content .faq-nav a { font-size: 13px !important; padding: 8px 13px !important; }
    .entry-content details.wp-block-details summary {
        font-size: 16px !important;
        padding: 14px 38px 14px 0 !important;
    }
    .entry-content details.wp-block-details p {
        font-size: 16px !important;
        padding-right: 0 !important;
    }
}


/* ============================================================
   23) TEAM (.team-grid) – redaktionelles Layout
   Quadratische Bilder, linksbuendig, viel Weissraum.
   Bilder: quadratisch, mindestens 700x700px.
   ============================================================ */
.entry-content .team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 56px 40px !important;
    margin: 2.2em 0 3.4em !important;
    padding: 0 !important;
    list-style: none !important;
}
.entry-content .team-grid.zweispaltig {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 56px 48px !important;
    max-width: 780px !important;
}
.entry-content .team-karte {
    text-align: left !important;
    margin: 0 !important;
}
.entry-content .team-karte img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    height: auto !important;
    margin: 0 0 18px !important;
    border-radius: 2px !important;
    background: #eef2f6 !important;
    filter: saturate(0.92) !important;
}
/* Rolle als gesperrte Versalzeile ueber dem Namen */
.entry-content .team-karte .team-rolle {
    display: block !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    color: #c75a2a !important;
    margin: 0 0 6px !important;
}
.entry-content .team-karte .team-name {
    display: block !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #4a6a86 !important;
    margin: 0 0 4px !important;
}
.entry-content .team-karte .team-seit {
    display: block !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #8b98a5 !important;
    margin: 0 !important;
}
/* Kurze Linie unter dem Namensblock.
   Vorher lief sie ueber die volle Kartenbreite und endete
   hart am rechten Rand.
   Ganz ohne Linie: die naechsten sieben Zeilen loeschen und
   stattdessen margin: 14px 0 0 auf .team-bio setzen. */
.entry-content .team-karte .team-trenner {
    display: block !important;
    width: 40px !important;
    height: 2px !important;
    background: #dde5ec !important;
    margin: 14px 0 12px !important;
}
.entry-content .team-karte .team-bio {
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #3a3a38 !important;
    margin: 0 !important;
}
.entry-content .team-karte .team-bio + .team-bio {
    margin-top: 0.7em !important;
}
.entry-content .team-karte a { color: #c75a2a !important; }

@media only screen and (max-width: 600px) {
    .entry-content .team-grid,
    .entry-content .team-grid.zweispaltig {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        max-width: 100% !important;
    }
    .entry-content .team-karte img {
        max-width: 260px !important;
        margin-bottom: 14px !important;
    }
    .entry-content .team-karte .team-name { font-size: 20px !important; }
}


/* ============================================================
   24) MOBILER HEADER – kompakt und klebend
   Ueberschreibt bewusst Abschnitt 0, 0b und 0c fuer Handys.
   Aenderungen gegenueber vorher:
   - Logo ueber die HOEHE begrenzt statt ueber die Breite.
     width:78% haengt an der Containerbreite und wurde dadurch
     auf grossen Handys riesig.
   - Name und Fachbezeichnungen (Pseudo-Elemente) am Handy aus.
     Beides steht in der Seitenueberschrift und im Footer.
   - Leiste klebt jetzt auch am Handy oben.
   ============================================================ */
@media only screen and (max-width: 767px) {

    /* Leiste klebt */
    html, body, #rdn-wrapper {
        overflow: visible !important;
    }
    #rdn-menu {
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    body.admin-bar #rdn-menu {
        top: 46px !important;
    }

    /* Kompakte Hoehe */
    #rdn-menu .navbar,
    #rdn-menu .navbar-header {
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }
    #rdn-menu .navbar .container {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* Logo ueber die Hoehe steuern, nicht ueber die Breite */
    #rdn-menu .navbar .col-md-4 img,
    #rdn-menu a.custom-logo-link img.custom-logo,
    img.custom-logo {
        width: auto !important;
        max-width: 70vw !important;
        height: auto !important;
        max-height: 46px !important;
        display: block !important;
    }

    /* Name bleibt sichtbar, nur kleiner.
       Die zwei Zeilen Fachbezeichnung am Handy aus. */
    #rdn-menu .site-branding > .custom-logo-link::after {
        display: block !important;
        font-size: 14px !important;
        margin-top: 4px !important;
        line-height: 1.25 !important;
    }
    #rdn-menu .site-branding::after {
        content: none !important;
        display: none !important;
    }

    /* Burger: gross genug zum Treffen, vertikal mittig */
    #rdn-menu .navbar-toggle,
    #rdn-menu button.navbar-toggle,
    #rdn-menu .navbar-header .navbar-toggle {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        float: none !important;
        margin: 0 !important;
        padding: 10px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    #rdn-menu .navbar-header {
        position: relative !important;
    }

    /* Menuepanel unter der Leiste, nicht ueber dem Inhalt kleben */
    #rdn-menu #navbar-collapse-1.navbar-collapse {
        max-height: calc(100vh - 140px) !important;
    }
}

/* Sehr schmale Geraete: Logo noch etwas kleiner */
@media only screen and (max-width: 380px) {
    #rdn-menu .navbar .col-md-4 img,
    #rdn-menu a.custom-logo-link img.custom-logo,
    img.custom-logo {
        max-height: 40px !important;
        max-width: 62vw !important;
    }
}


/* ============================================================
   25) RHYTHMUS UND LUFT
   Durchgang ueber alle Seiten: begrenzte Zeilenlaenge,
   groessere Abstaende vor Ueberschriften, ruhigere Trenner.
   Steht bewusst am Ende, damit es die frueheren Abschnitte
   ergaenzt statt sie zu wiederholen.
   ============================================================ */

/* Zeilenlaenge begrenzen. Ueber 75 Zeichen faellt das Auge beim
   Zeilenwechsel leichter in die falsche Zeile. Betrifft nur
   Fliesstext, nicht Kaesten, Tabellen und Raster. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > .wp-block-group > p,
.entry-content > .wp-block-group > ul {
    max-width: 68ch !important;
}

/* Mehr Luft vor Abschnitten, weniger darunter.
   Die Ueberschrift gehoert optisch zum folgenden Text. */
.entry-content h2,
article h2 {
    margin-top: 3.2em !important;
    margin-bottom: 0.5em !important;
}
.entry-content h2:first-child,
.entry-content > *:first-child h2 {
    margin-top: 0.6em !important;
}
.entry-content h3,
article h3 {
    margin-top: 2.4em !important;
    margin-bottom: 0.35em !important;
}
.entry-content h4.wp-block-heading {
    margin-top: 2em !important;
    margin-bottom: 0.35em !important;
}

/* Erster Absatz nach H2 etwas groesser: fuehrt ins Thema */
.entry-content h2 + p {
    font-size: 18px !important;
    line-height: 1.62 !important;
    color: #2c2c2c !important;
}

/* Kaesten brauchen Abstand nach oben und unten, sonst kleben
   sie am Text und wirken wie ein Absatz mit Farbe */
.entry-content .akut-box,
.entry-content .hinweis-box,
.entry-content .lara-block,
.entry-content .sehbehelf-box,
.entry-content .kasse-box,
.entry-content .kosten-box {
    margin-top: 2.2em !important;
    margin-bottom: 2.2em !important;
}

/* Trenner deutlich zurueckhaltender. Wenn die Abstaende
   stimmen, braucht es kaum noch Linien. */
.entry-content .wp-block-separator,
.entry-content hr {
    border-top-color: #e8edf2 !important;
    margin: 3em auto !important;
    max-width: 68ch !important;
}

/* Listen: mehr Abstand zwischen den Punkten, Text nicht am
   Aufzaehlungszeichen kleben */
.entry-content li {
    margin-bottom: 0.45em !important;
    line-height: 1.6 !important;
    padding-left: 4px !important;
}
.entry-content ul,
.entry-content ol {
    margin-top: 0.8em !important;
    margin-bottom: 1.6em !important;
    padding-left: 1.4em !important;
}

/* Absaetze etwas luftiger */
.entry-content p {
    margin-bottom: 1.05em !important;
}

@media only screen and (max-width: 600px) {
    .entry-content > p,
    .entry-content > ul,
    .entry-content > ol,
    .entry-content > h2,
    .entry-content > h3,
    .entry-content > h4 {
        max-width: 100% !important;
    }
    .entry-content h2, article h2 { margin-top: 2.4em !important; }
    .entry-content h3, article h3 { margin-top: 1.9em !important; }
    .entry-content h2 + p { font-size: 17px !important; }
    .entry-content .wp-block-separator,
    .entry-content hr { margin: 2.2em auto !important; max-width: 100% !important; }
}


/* ============================================================
   26) ZIFFERN
   Atkinson Hyperlegible liefert Ziffern mit unterschiedlicher
   Breite. In Tabellen und Preislisten stehen sie dadurch nicht
   untereinander. tabular-nums schaltet gleich breite Ziffern
   ein, dann fluchten die Spalten.
   ============================================================ */
.entry-content .tel-zeiten,
.entry-content .tel-zeiten td,
.entry-content .kosten-box,
.entry-content .kosten-box li,
.entry-content .kosten-box .preis,
.entry-content table,
.entry-content table td,
.sb-footer,
.sb-footer li,
.sb-footer .sb-urlaub {
    font-variant-numeric: tabular-nums lining !important;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* Zeiten-Tabelle: zweite Spalte rechts an einer Kante ausrichten
   und Bindestrich nicht umbrechen lassen */
.entry-content .tel-zeiten {
    border-collapse: collapse !important;
    width: auto !important;
}
.entry-content .tel-zeiten td:first-child {
    padding-right: 28px !important;
    white-space: nowrap !important;
}
.entry-content .tel-zeiten td:last-child {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums lining !important;
}

/* Ordinationszeiten als Liste: Tag und Zeit gleichmaessig */
.entry-content ul li strong {
    font-variant-numeric: tabular-nums lining !important;
}


/* ============================================================
   27) SPRACHUMSCHALTER (Polylang im Menue)
   Stellt DE und EN als kleinen Schalter dar statt als zwei
   normale Menuepunkte. Aktive Sprache kraeftig, andere ruhig.
   Falls du Flaggen sehen willst: die Regel mit .lang-item img
   loeschen.
   ============================================================ */
#rdn-menu .navbar-nav li.lang-item > a {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 6px 4px !important;
    color: #a5b3c0 !important;
}
#rdn-menu .navbar-nav li.lang-item.current-lang > a {
    color: #4a6a86 !important;
}
#rdn-menu .navbar-nav li.lang-item > a:hover {
    color: #c75a2a !important;
}
/* Flaggen aus, Textkuerzel reichen und sind am Handy klarer */
#rdn-menu .navbar-nav li.lang-item img {
    display: none !important;
}
/* Trennpunkt zwischen den Sprachen */
#rdn-menu .navbar-nav li.lang-item + li.lang-item::before {
    content: "·" !important;
    color: #c7d1da !important;
    padding: 0 2px !important;
}
/* Etwas Abstand zum letzten Menuepunkt davor */
#rdn-menu .navbar-nav li.lang-item:first-of-type {
    margin-left: 14px !important;
}

@media only screen and (min-width: 769px) {
    #rdn-menu .navbar-nav li.lang-item,
    #rdn-menu .navbar-nav li.lang-item + li.lang-item {
        display: inline-block !important;
        float: none !important;
    }
}

/* Am Handy: beide Sprachen nebeneinander in einer eigenen
   Zeile am Ende des Burgermenues, nicht als zwei volle Reihen */
@media only screen and (max-width: 767px) {
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item {
        display: inline-block !important;
        width: auto !important;
        float: none !important;
        border-bottom: none !important;
        text-align: center !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item:first-of-type {
        margin-left: 0 !important;
        border-top: 1px solid #eaeff3 !important;
        padding-top: 6px !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item + li.lang-item {
        border-top: 1px solid #eaeff3 !important;
        padding-top: 6px !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item > a {
        display: inline-block !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        text-align: center !important;
    }
}


/* ============================================================
   28) KORREKTUREN MOBILES MENUE
   Behebt zwei Dinge aus dem Test am Handy:
   - Sprachumschalter stand links, Menue rechts
   - Panel lief rechts ueber den Bildschirmrand hinaus
   ============================================================ */
@media only screen and (max-width: 767px) {

    /* Kein waagrechter Ueberstand. overflow-x: clip statt hidden,
       weil hidden den Sticky-Header wieder ausser Kraft setzt. */
    html, body {
        overflow-x: clip !important;
        overflow-y: visible !important;
        max-width: 100% !important;
    }
    #rdn-wrapper {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /* Panel schmaler und sicher im Bild */
    #rdn-menu #navbar-collapse-1.navbar-collapse {
        width: 270px !important;
        max-width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: auto !important;
    }

    /* Sprachen auf dieselbe rechte Kante wie das Menue */
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item {
        text-align: right !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item:first-of-type {
        margin-left: 0 !important;
        padding-left: 16px !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item:last-of-type {
        padding-right: 10px !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item > a {
        padding: 10px 6px !important;
    }
    /* Die Sprachzeile als ein Block, nicht zwei getrennte Reihen */
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item + li.lang-item {
        border-top: 1px solid #eaeff3 !important;
    }
}

/* Menuepunkte umbrechen lassen statt zu ueberlaufen,
   aber nur an Wortgrenzen, nie mitten im Wort */
#rdn-menu .navbar-nav > li > a {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}


/* ============================================================
   29) WORTTRENNUNG
   Irgendwo im Theme steht eine Regel, die Woerter an beliebiger
   Stelle umbricht. Auf den Kacheln stand dadurch "Kontroll /
   en" und "Au / gen". Hier wird das fuer den gesamten Inhalt
   zurueckgesetzt: umgebrochen wird nur zwischen Woertern.
   ============================================================ */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content span,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content td,
.entry-content summary,
.entry-content .leistungs-grid .kachel-titel,
.entry-content .leistungs-grid .kachel-sub,
.entry-content .team-karte .team-name,
.entry-content .team-karte .team-rolle,
.entry-content .team-karte .team-bio,
.sb-footer,
.sb-footer p,
.sb-footer li {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/* Ausnahme: sehr lange zusammenhaengende Zeichenketten wie
   E-Mail-Adressen oder URLs duerfen umbrechen, sonst laufen
   sie am Handy aus der Spalte */
.entry-content a[href^="mailto:"],
.entry-content a[href^="http"],
.sb-footer a[href^="mailto:"] {
    overflow-wrap: anywhere !important;
}


/* ============================================================
   30) LOGO UND HEADER, NEUE FASSUNG
   Setzt Abschnitt 0, 0c und den Logo-Teil von 24 ausser Kraft.
   Grund: Das neue Logo enthaelt Name und Fachbezeichnungen
   bereits als Bild. Die Pseudo-Elemente aus 0c haben sie ein
   zweites Mal darunter geschrieben.
   Abschnitt 0 und 0c koennen geloescht werden, sobald das hier
   getestet ist. Bis dahin bleiben sie stehen, damit nichts
   verloren geht.
   ============================================================ */

/* Doppelten Namen und Fachbezeichnung entfernen */
#rdn-menu .site-branding > .custom-logo-link::after,
#rdn-menu .site-branding::after,
#rdn-menu .site-branding > .custom-logo-link::before,
#rdn-menu .site-branding::before {
    content: none !important;
    display: none !important;
}

/* Logo stufenlos skalieren: waechst und schrumpft mit dem
   Fenster, bleibt aber zwischen 58 und 118 Pixel Hoehe.
   Ueber die Hoehe gesteuert, weil das Logo Text enthaelt und
   der unter einer bestimmten Groesse unlesbar wird. */
#rdn-menu .navbar .col-md-4 img,
#rdn-menu a.custom-logo-link img.custom-logo,
img.custom-logo {
    width: auto !important;
    max-width: 100% !important;
    height: clamp(78px, 11vw, 140px) !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
}

/* Kopfbereich kompakter, es faellt ja Text darunter weg */
#rdn-menu .site-branding {
    line-height: 1 !important;
    padding-bottom: 0 !important;
}
#rdn-menu .navbar .container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

@media only screen and (max-width: 767px) {
    #rdn-menu .navbar .col-md-4 img,
    #rdn-menu a.custom-logo-link img.custom-logo,
    img.custom-logo {
        /* Das Logo enthaelt Schrift, deshalb hier bewusst gross.
           Bei 78vw Breite bleibt rechts genug Platz fuer den
           Burger. Wenn es dir zu gross ist: 78vw verkleinern. */
        height: auto !important;
        width: 78vw !important;
        max-width: 340px !important;
    }
    #rdn-menu .navbar .container {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}


/* ============================================================
   31) LOGO ALS LINK ZUR STARTSEITE
   Der Logo-Link ist im Theme vorhanden, hat aber als
   Inline-Element manchmal keine klickbare Flaeche. Hier wird
   er zu einem Block mit der Groesse des Bildes.
   ============================================================ */
#rdn-menu .site-branding a.custom-logo-link,
#rdn-menu a.custom-logo-link {
    display: inline-block !important;
    position: relative !important;
    z-index: 2 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 0 !important;
}
#rdn-menu a.custom-logo-link img {
    pointer-events: none !important;
}
/* Falls das Theme ein leeres Element ueber das Logo legt */
#rdn-menu .site-branding {
    position: relative !important;
}


/* ============================================================
   32) BURGERMENUE
   Ersetzt die frueheren Abschnitte 32, 34 und 35, die als drei
   Schichten uebereinander lagen.

   Das Panel klappt unter der Kopfleiste auf und fuellt die
   ganze Flaeche darunter. Der Seiteninhalt ist bei offenem
   Menue nicht mehr sichtbar. Das Logo bleibt oben stehen, es
   ist auch der Link zur Startseite.

   Gestaltung: hellblaue Flaeche, die Punkte als weisse Karte
   darauf. Dadurch sind die Trennlinien sichtbar, auf Weiss
   waren sie es nicht.

   Kein abgedunkelter Hintergrund noetig, es ist ohnehin
   nichts mehr davon zu sehen. Zugeklappt wird ueber das Kreuz
   oder die Escape-Taste, das erledigt das Snippet.

   Zeilenhoehe rund 44px, das uebliche Mindestmass fuer Touch.

   Der Burger wird selbst gezeichnet, zwei Striche, beim
   Oeffnen ein Kreuz. Das haengt an aria-expanded, das setzt
   das Snippet im Footer.

   Der Termin-Button bleibt ausgeblendet, weil die fixe
   Kontaktleiste unten (Abschnitt 19) das uebernimmt.
   ============================================================ */
@media only screen and (max-width: 767px) {

    /* --- Panel: volle Breite, buendig unter der Leiste --- */
    #rdn-menu #navbar-collapse-1.navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: -15px !important;
        right: -15px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        /* Volle Bildschirmhoehe. Da das Panel unterhalb der
           Kopfleiste beginnt, ragt es unten um deren Hoehe
           ueber den Rand hinaus. Das faellt nicht auf, dort
           steht nur Flaeche. Der Seiteninhalt ist damit bei
           offenem Menue vollstaendig verdeckt.
           Die Seite dahinter kann nicht scrollen, das sperrt
           das Snippet ueber overflow am body. */
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        /* Unten Luft fuer die fixe Kontaktleiste aus
           Abschnitt 19, die ueber dem Menue liegen bleibt. */
        padding: 16px 0 90px !important;
        background: #eef2f6 !important;
        border: 0 !important;
        border-top: 1px solid #dde5ec !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 1050 !important;
    }

    /* --- Die Punkte als weisse Karte auf der Flaeche --- */
    #rdn-menu #navbar-collapse-1 .navbar-nav {
        margin: 0 14px !important;
        padding: 0 !important;
        width: auto !important;
        float: none !important;
        background: #ffffff !important;
        border: 1px solid #dde5ec !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li + li {
        border-top: 1px solid #e3eaf1 !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li:not(.menu-cta):not(.lang-item) > a {
        display: block !important;
        position: relative !important;
        text-align: left !important;
        padding: 12px 40px 12px 20px !important;
        min-height: 44px !important;
        font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
        font-size: 15.5px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        color: #3a4a58 !important;
        background: transparent !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li > a:active {
        background: #f5f8fa !important;
    }

    /* Kleiner Pfeil rechts */
    #rdn-menu #navbar-collapse-1 .navbar-nav > li:not(.menu-cta):not(.lang-item) > a::after {
        content: "\203A" !important;
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-52%) !important;
        font-size: 20px !important;
        line-height: 1 !important;
        color: #b9c6d2 !important;
    }

    /* Aktive Seite: orange Kante links, kraeftigere Schrift */
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.current-menu-item > a,
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.current_page_item > a,
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.current-menu-parent > a {
        color: #4a6a86 !important;
        font-weight: 700 !important;
        background: #f7fafc !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.current-menu-item > a::before,
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.current_page_item > a::before,
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.current-menu-parent > a::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 4px !important;
        background: #c75a2a !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.current-menu-item > a::after,
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.current_page_item > a::after {
        color: #c75a2a !important;
    }

    /* --- Termin-Button raus, samt Abstand und Linie --- */
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.menu-cta,
    #rdn-menu #navbar-collapse-1 .menu-cta {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* --- Sprachen als schmale Zeile am Fuss der Karte --- */
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item {
        display: inline-block !important;
        width: auto !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f7fafc !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item:first-of-type {
        border-top: 1px solid #e3eaf1 !important;
        padding-left: 14px !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item + li.lang-item {
        border-top: 1px solid #e3eaf1 !important;
    }
    #rdn-menu #navbar-collapse-1 .navbar-nav > li.lang-item > a {
        display: inline-block !important;
        padding: 12px 8px !important;
        font-size: 12px !important;
        letter-spacing: 1.2px !important;
        min-height: 0 !important;
    }

    /* --- Burger, selbst gezeichnet, offen ein Kreuz --- */
    #rdn-menu .navbar-toggle,
    #rdn-menu button.navbar-toggle,
    #rdn-menu .navbar-header .navbar-toggle {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        cursor: pointer !important;
        z-index: 1060 !important;
    }
    #rdn-menu .navbar-toggle:active {
        background: #eef2f6 !important;
    }

    /* Striche des Themes weg */
    #rdn-menu .navbar-toggle .icon-bar,
    #rdn-menu .navbar-toggle .sr-only {
        display: none !important;
    }
    #rdn-menu .navbar-toggle::before,
    #rdn-menu .navbar-toggle::after {
        content: "" !important;
        position: absolute !important;
        left: 12px !important;
        width: 22px !important;
        height: 2px !important;
        background: #4a6a86 !important;
        border-radius: 2px !important;
        transition: transform 0.18s ease !important;
    }
    #rdn-menu .navbar-toggle::before { top: 18px !important; }
    #rdn-menu .navbar-toggle::after  { top: 26px !important; }

    #rdn-menu .navbar-toggle[aria-expanded="true"]::before {
        transform: translateY(4px) rotate(45deg) !important;
    }
    #rdn-menu .navbar-toggle[aria-expanded="true"]::after {
        transform: translateY(-4px) rotate(-45deg) !important;
    }
}


/* ============================================================
   33) KACHELN, KORREKTUR INNENABSTAND
   .kachel-text ist ein <span>, also ein Inline-Element. Ein
   padding darauf wirkt nicht auf die Bloecke darin, deshalb
   klebte der Text am linken Rand. display:block behebt das.
   Dazu gleiche Kartenhoehe, damit die Reihen ruhig stehen.
   ============================================================ */
.entry-content .leistungs-grid .kachel-text {
    display: block !important;
    padding: 16px 20px 20px !important;
}
.entry-content .leistungs-grid .kachel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.entry-content .leistungs-grid .kachel img {
    flex: 0 0 auto !important;
}
.entry-content .leistungs-grid .kachel-titel {
    margin: 0 0 6px !important;
}
.entry-content .leistungs-grid .kachel-sub {
    margin: 0 !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .leistungs-grid .kachel-text {
        padding: 14px 16px 18px !important;
    }
}


/* ============================================================
   34) TEAM AM HANDY, WAAGRECHTE KARTEN
   Vorher stand ein grosses Bild ueber dem Text, dadurch wurde
   die Seite bei sieben Personen sehr lang und wirkte lose.
   Jetzt: kleines quadratisches Bild links, Text rechts.
   ============================================================ */
@media only screen and (max-width: 600px) {

    .entry-content .team-grid,
    .entry-content .team-grid.zweispaltig {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        max-width: 100% !important;
        margin: 1.4em 0 2.2em !important;
    }

    .entry-content .team-karte {
        display: grid !important;
        grid-template-columns: 84px 1fr !important;
        column-gap: 16px !important;
        align-items: start !important;
        padding: 18px 0 !important;
        border-bottom: 1px solid #eef2f6 !important;
    }
    .entry-content .team-grid .team-karte:last-child {
        border-bottom: none !important;
    }

    .entry-content .team-karte img {
        grid-column: 1 !important;
        grid-row: 1 / span 5 !important;
        width: 84px !important;
        max-width: 84px !important;
        height: 84px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        border-radius: 3px !important;
    }

    .entry-content .team-karte .team-rolle,
    .entry-content .team-karte .team-name,
    .entry-content .team-karte .team-seit,
    .entry-content .team-karte .team-bio {
        grid-column: 2 !important;
    }

    .entry-content .team-karte .team-rolle {
        font-size: 10.5px !important;
        letter-spacing: 1.1px !important;
        margin: 0 0 3px !important;
    }
    .entry-content .team-karte .team-name {
        font-size: 17px !important;
        margin: 0 0 2px !important;
    }
    .entry-content .team-karte .team-seit {
        font-size: 12px !important;
    }
    /* Trennstrich am Handy weglassen, die Karte hat schon
       eine Linie nach unten */
    .entry-content .team-karte .team-trenner {
        display: none !important;
    }
    .entry-content .team-karte .team-bio {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-top: 8px !important;
    }
    .entry-content .team-karte .team-bio + .team-bio {
        margin-top: 0.5em !important;
    }
}


/* ============================================================
   35) THEMENFELD IM FORMULAR
   Das Auswahlfeld "Worum geht es?" steht ganz oben und ist
   das wichtigste Feld. Hier optisch abgesetzt.
   ============================================================ */
.entry-content .lara-formular .thema-wahl {
    background: #ffffff !important;
    border: 2px solid #c75a2a !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin: 0 0 1.2em !important;
}
.entry-content .lara-formular .thema-wahl label {
    font-size: 15px !important;
    color: #232323 !important;
    margin-bottom: 0 !important;
}
.entry-content .lara-formular .thema-wahl strong {
    color: #c75a2a !important;
}
.entry-content .lara-formular select,
.entry-content .wpcf7 select {
    width: 100% !important;
    padding: 10px 12px !important;
    margin-top: 6px !important;
    border: 1px solid #c7d6e3 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    color: #232323 !important;
    box-sizing: border-box !important;
    appearance: auto !important;
}
.entry-content .lara-formular select:focus,
.entry-content .wpcf7 select:focus {
    border-color: #4a6a86 !important;
    outline: none !important;
}


/* ============================================================
   36) FORMULAR-LAYOUT
   Raster: kurze Felder nebeneinander, lange ueber die volle
   Breite. Unter 600px alles untereinander.
   Ueberschreibt die Breite aus Abschnitt 9.
   ============================================================ */
.entry-content .lara-formular {
    max-width: 620px !important;
    padding: 22px 24px !important;
    border-radius: 8px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    align-items: start !important;
}
/* Standard: volle Breite */
.entry-content .lara-formular > * {
    grid-column: 1 / -1 !important;
    margin: 0 0 1.1em !important;
}
/* Halbe Breite fuer kurze Felder */
.entry-content .lara-formular > .feld-halb {
    grid-column: span 1 !important;
}

.entry-content .lara-formular .lara-intro {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 1.2em !important;
}

/* Beschriftungen */
.entry-content .lara-formular label {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #3a4a58 !important;
    line-height: 1.35 !important;
}

/* Eingabefelder einheitlich */
.entry-content .lara-formular input[type="text"],
.entry-content .lara-formular input[type="tel"],
.entry-content .lara-formular input[type="email"],
.entry-content .lara-formular textarea,
.entry-content .lara-formular select {
    width: 100% !important;
    padding: 10px 12px !important;
    margin-top: 5px !important;
    border: 1px solid #c7d6e3 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
}
.entry-content .lara-formular input:focus,
.entry-content .lara-formular textarea:focus,
.entry-content .lara-formular select:focus {
    border-color: #c75a2a !important;
    box-shadow: 0 0 0 3px rgba(199,90,42,0.12) !important;
    outline: none !important;
}
.entry-content .lara-formular textarea {
    min-height: 84px !important;
    resize: vertical !important;
}
.entry-content .lara-formular ::placeholder {
    color: #a8b4c0 !important;
    opacity: 1 !important;
}

/* Kontaktart als Segmentschalter statt Radioliste */
.entry-content .lara-formular .lara-feldgruppe {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #3a4a58 !important;
}
.entry-content .lara-formular .wpcf7-radio {
    display: flex !important;
    gap: 8px !important;
    margin-top: 5px !important;
}
.entry-content .lara-formular .wpcf7-radio .wpcf7-list-item {
    display: block !important;
    margin: 0 !important;
    flex: 1 1 0 !important;
}
.entry-content .lara-formular .wpcf7-radio .wpcf7-list-item label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    border: 1px solid #c7d6e3 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}
.entry-content .lara-formular .wpcf7-radio input[type="radio"] {
    margin: 0 !important;
    accent-color: #c75a2a !important;
}
.entry-content .lara-formular .wpcf7-radio .wpcf7-list-item label:hover {
    border-color: #4a6a86 !important;
}

/* Hinweis und Einwilligung ruhiger */
.entry-content .lara-formular .kl-hinweis {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    padding: 10px 12px !important;
    margin-bottom: 1em !important;
    background: #f4f1ec !important;
}
.entry-content .lara-formular .lara-consent,
.entry-content .lara-formular .wpcf7-acceptance label {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #5f5e5a !important;
    line-height: 1.5 !important;
}

/* Absendeknopf */
.entry-content .lara-formular input[type="submit"],
.entry-content .lara-formular .wpcf7-submit {
    width: auto !important;
    min-width: 200px !important;
    padding: 13px 28px !important;
    font-size: 15px !important;
    margin: 0 !important;
}
.entry-content .lara-formular .wpcf7-spinner {
    vertical-align: middle !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .lara-formular {
        grid-template-columns: 1fr !important;
        padding: 16px 16px !important;
        max-width: 100% !important;
    }
    .entry-content .lara-formular > .feld-halb {
        grid-column: 1 / -1 !important;
    }
    .entry-content .lara-formular input[type="submit"],
    .entry-content .lara-formular .wpcf7-submit {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ============================================================
   37) OPTIONSKARTEN (.option-karte)
   Fuer Abschnitte, in denen mehrere Wege nebeneinander stehen:
   Behandlungsmoeglichkeiten, Linsenarten, Varianten.
   Fliesstext macht daraus eine Textflut, die Karte zeigt auf
   einen Blick, dass es mehrere Optionen gibt.

   Anwendung im Blockeditor: Gruppe-Block um Ueberschrift und
   Text legen, in den erweiterten Einstellungen die CSS-Klasse
   option-karte eintragen.
   ============================================================ */
.entry-content .option-karte {
    background: #ffffff !important;
    border: 1px solid #dde5ec !important;
    border-left: 4px solid #4a6a86 !important;
    border-radius: 6px !important;
    padding: 20px 24px !important;
    margin: 0 0 16px !important;
}
.entry-content .option-karte > h3,
.entry-content .option-karte > h3.wp-block-heading {
    margin-top: 0 !important;
    margin-bottom: 0.5em !important;
    font-size: 19px !important;
    color: #4a6a86 !important;
}
.entry-content .option-karte > p {
    margin-bottom: 0.8em !important;
}
.entry-content .option-karte > p:last-child {
    margin-bottom: 0 !important;
}
/* Aufklapper innerhalb einer Karte enger und ohne Aussenlinie */
.entry-content .option-karte details.wp-block-details {
    border-bottom: 1px solid #eef2f6 !important;
}
.entry-content .option-karte details.wp-block-details:last-of-type {
    border-bottom: none !important;
}
.entry-content .option-karte details.wp-block-details summary {
    font-size: 15.5px !important;
    padding: 11px 40px 11px 0 !important;
}
.entry-content .option-karte details.wp-block-details p {
    font-size: 15.5px !important;
}

/* Die empfohlene oder naheliegendste Option hervorheben:
   zusaetzlich die Klasse option-betont vergeben */
.entry-content .option-karte.option-betont {
    border-left-color: #c75a2a !important;
    background: #fdfaf8 !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .option-karte {
        padding: 16px 16px !important;
        margin-bottom: 12px !important;
    }
    .entry-content .option-karte > h3,
    .entry-content .option-karte > h3.wp-block-heading {
        font-size: 17.5px !important;
    }
}


/* ============================================================
   38) ABLAUF-LISTE (.ablauf-liste)
   Fuer Abschnitte, die einen Ablauf beschreiben: mehrere
   Untersuchungen bei einem Termin, Schritte einer Behandlung.
   Anders als .option-karte, wo man zwischen Wegen waehlt.

   Nummeriert die Ueberschriften automatisch und verbindet sie
   mit einer Linie. Es braucht nur EINE Gruppe um den ganzen
   Abschnitt, nicht eine pro Punkt.

   Anwendung: Gruppe-Block um alle H3 und Absaetze des
   Abschnitts, CSS-Klasse ablauf-liste eintragen.
   ============================================================ */
.entry-content .ablauf-liste {
    counter-reset: schritt !important;
    position: relative !important;
    margin: 1.6em 0 2.4em !important;
    padding-left: 0 !important;
}

/* Ueberschrift wird zum nummerierten Schritt */
.entry-content .ablauf-liste > h3,
.entry-content .ablauf-liste > h3.wp-block-heading {
    counter-increment: schritt !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 6px 52px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    color: #4a6a86 !important;
}
.entry-content .ablauf-liste > h3::before {
    content: counter(schritt) !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #4a6a86 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums lining !important;
}

/* Text zum Schritt, mit verbindender Linie links */
.entry-content .ablauf-liste > p {
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 22px 52px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}
.entry-content .ablauf-liste > p::before {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #e3eaf1 !important;
}
/* Beim letzten Schritt keine Linie mehr nach unten */
.entry-content .ablauf-liste > p:last-child {
    padding-bottom: 0 !important;
}
.entry-content .ablauf-liste > p:last-child::before {
    display: none !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .ablauf-liste > h3,
    .entry-content .ablauf-liste > h3.wp-block-heading {
        padding-left: 44px !important;
        font-size: 17px !important;
    }
    .entry-content .ablauf-liste > h3::before {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    .entry-content .ablauf-liste > p {
        padding-left: 44px !important;
        padding-bottom: 18px !important;
    }
    .entry-content .ablauf-liste > p::before {
        left: 13px !important;
    }
}


/* ============================================================
   39) OPTIONEN OHNE RAHMEN (.optionen)
   Alternative zu .option-karte. Gliedert ueber Haarlinien und
   Abstaende statt ueber Kaesten. Ruhiger, wirkt weniger nach
   Formular.

   Anwendung: HTML-Block mit <div class="optionen"> um die H3
   und Absaetze des Abschnitts.
   ============================================================ */
.entry-content .optionen {
    margin: 1.4em 0 2.4em !important;
}
.entry-content .optionen > h3,
.entry-content .optionen > h3.wp-block-heading {
    margin: 0 !important;
    padding: 22px 0 0 !important;
    border-top: 1px solid #e3eaf1 !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: #4a6a86 !important;
}
.entry-content .optionen > h3:first-child {
    border-top: none !important;
    padding-top: 0 !important;
}
/* Kleiner oranger Strich ueber der Ueberschrift statt Rahmen */
.entry-content .optionen > h3::before {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 3px !important;
    background: #c75a2a !important;
    margin: 0 0 12px !important;
}
.entry-content .optionen > p {
    margin: 0.6em 0 26px !important;
    font-size: 16.5px !important;
    line-height: 1.65 !important;
}
.entry-content .optionen > p:last-child {
    margin-bottom: 0 !important;
}
/* Aufklapper innerhalb eines Abschnitts einruecken,
   damit sie sichtbar zur Ueberschrift darueber gehoeren */
.entry-content .optionen details.wp-block-details,
.entry-content .optionen details {
    margin-left: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
}
.entry-content .optionen details summary {
    font-size: 15.5px !important;
    padding: 11px 40px 11px 0 !important;
}
.entry-content .optionen details p {
    font-size: 15.5px !important;
}
.entry-content .optionen details:last-of-type {
    margin-bottom: 26px !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .optionen > h3,
    .entry-content .optionen > h3.wp-block-heading {
        padding-top: 18px !important;
        font-size: 18px !important;
    }
    .entry-content .optionen > p {
        margin-bottom: 22px !important;
        font-size: 16px !important;
    }
}


/* ============================================================
   40) ABLAUF-LISTE mit Aufklappern
   Ergaenzung zu Abschnitt 38. Wenn innerhalb eines Schritts
   Detailfragen stehen, muessen sie auf derselben Kante wie der
   Text sitzen und die verbindende Linie fortsetzen.
   ============================================================ */
.entry-content .ablauf-liste > details,
.entry-content .ablauf-liste > details.wp-block-details {
    position: relative !important;
    margin: 0 !important;
    padding-left: 52px !important;
    border-bottom: none !important;
}
.entry-content .ablauf-liste > details::after {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #e3eaf1 !important;
}
.entry-content .ablauf-liste > details summary {
    padding: 9px 40px 9px 0 !important;
    font-size: 15.5px !important;
    border-top: 1px solid #eef2f6 !important;
}
.entry-content .ablauf-liste > details p {
    padding-right: 40px !important;
    font-size: 15.5px !important;
}
.entry-content .ablauf-liste > details > *:last-child {
    margin-bottom: 12px !important;
}
/* Letztes Element im Schritt: Linie endet hier */
.entry-content .ablauf-liste > *:last-child::after,
.entry-content .ablauf-liste > *:last-child::before {
    display: none !important;
}
/* Abstand vor dem naechsten nummerierten Schritt.
   margin statt padding, damit die Nummer mitwandert und nicht
   oben im leeren Raum haengen bleibt. */
.entry-content .ablauf-liste > details + h3,
.entry-content .ablauf-liste > details.wp-block-details + h3 {
    margin-top: 28px !important;
    padding-top: 0 !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .ablauf-liste > details,
    .entry-content .ablauf-liste > details.wp-block-details {
        padding-left: 44px !important;
    }
    .entry-content .ablauf-liste > details::after { left: 13px !important; }
    .entry-content .ablauf-liste > details p { padding-right: 0 !important; }
}


/* ============================================================
   41) ABLAUF-LISTE, VARIANTE STUFEN (.ablauf-liste.stufen)
   Fuer Behandlungsstufen. Deutlich anders als die blau
   nummerierten Untersuchungsschritte: eckig statt rund,
   orange, roemische Ziffern.

   Anwendung: <div class="ablauf-liste stufen">

   Wenn dir roemisch zu viel ist: in der Regel weiter unten
   counter(schritt, upper-roman) durch counter(schritt) ersetzen.
   ============================================================ */
.entry-content .ablauf-liste.stufen > h3::before {
    content: counter(schritt, upper-roman) !important;
    background: #c75a2a !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    top: -3px !important;
}
.entry-content .ablauf-liste.stufen > p::before,
.entry-content .ablauf-liste.stufen > details::after {
    background: #f0d6c6 !important;
    left: 16px !important;
}
.entry-content .ablauf-liste.stufen > h3 {
    color: #4a6a86 !important;
    padding-left: 54px !important;
}
.entry-content .ablauf-liste.stufen > p,
.entry-content .ablauf-liste.stufen > details {
    padding-left: 54px !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .ablauf-liste.stufen > h3::before {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    .entry-content .ablauf-liste.stufen > h3,
    .entry-content .ablauf-liste.stufen > p,
    .entry-content .ablauf-liste.stufen > details {
        padding-left: 46px !important;
    }
    .entry-content .ablauf-liste.stufen > p::before,
    .entry-content .ablauf-liste.stufen > details::after {
        left: 14px !important;
    }
}


/* ============================================================
   42) ORTSANGABE IN DER ABLAUF-LISTE (.wo)
   Kleine Zeile unter der Ueberschrift, die sagt, wo ein
   Schritt stattfindet.
   Anwendung: <span class="wo">In unserer Ordination</span>
   direkt nach dem H3.
   ============================================================ */
.entry-content .ablauf-liste .wo {
    display: block !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #8b98a5 !important;
    margin: 0 0 4px !important;
    padding-left: 54px !important;
}
.entry-content .ablauf-liste .wo.wo-extern {
    color: #a5734f !important;
}
@media only screen and (max-width: 600px) {
    .entry-content .ablauf-liste .wo {
        padding-left: 46px !important;
        font-size: 10.5px !important;
    }
}


/* ============================================================
   43) KASTEN INNERHALB EINER ABLAUF-LISTE
   Ein Hinweis- oder Notfallkasten innerhalb eines Schrittes
   muss auf derselben Kante sitzen wie der Text und die
   verbindende Linie fortsetzen.
   ============================================================ */
.entry-content .ablauf-liste > .akut-box,
.entry-content .ablauf-liste > .hinweis-box {
    position: relative !important;
    margin: 4px 0 22px !important;
    margin-left: 54px !important;
    padding: 14px 18px !important;
}
.entry-content .ablauf-liste > .akut-box::after,
.entry-content .ablauf-liste > .hinweis-box::after {
    content: "" !important;
    position: absolute !important;
    left: -43px !important;
    top: -4px !important;
    bottom: -22px !important;
    width: 2px !important;
    background: #e3eaf1 !important;
}
/* Orange Variante: Linie sitzt dort bei 16px statt 15px,
   und der Kasten beginnt bei 54px. Also ein Pixel weiter rechts. */
.entry-content .ablauf-liste.stufen > .akut-box::after,
.entry-content .ablauf-liste.stufen > .hinweis-box::after {
    left: -42px !important;
    background: #f0d6c6 !important;
}
.entry-content .ablauf-liste > .akut-box .akut-titel,
.entry-content .ablauf-liste > .hinweis-box .hinweis-titel {
    font-size: 15.5px !important;
}
.entry-content .ablauf-liste > .akut-box p,
.entry-content .ablauf-liste > .hinweis-box p {
    font-size: 15px !important;
    line-height: 1.55 !important;
}
/* Letztes Element im Ablauf: Linie endet */
.entry-content .ablauf-liste > *:last-child::after {
    display: none !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .ablauf-liste > .akut-box,
    .entry-content .ablauf-liste > .hinweis-box {
        margin-left: 46px !important;
        padding: 12px 14px !important;
    }
    .entry-content .ablauf-liste > .akut-box::after,
    .entry-content .ablauf-liste > .hinweis-box::after {
        left: -37px !important;
    }
    .entry-content .ablauf-liste.stufen > .akut-box::after,
    .entry-content .ablauf-liste.stufen > .hinweis-box::after {
        left: -36px !important;
    }
}


/* ============================================================
   44) HEADERBILD = BEITRAGSBILD (.rdn-featured-image)
   Das Beitragsbild aus der Seitenleiste rendert das Theme als
   <div class="rdn-featured-image"><img ...></div>
   ganz oben im Artikel, innerhalb der Inhaltsspalte .col-md-8.
   Ohne Zutun ist es deshalb nur so breit wie der Fliesstext.

   Hier wird es aus der Spalte herausgeloest und laeuft von
   Fensterkante zu Fensterkante.

   Bildmass 2400 x 800 px, also 3:1. Auf breiten Schirmen
   hoechstens 380px hoch, dann wird oben und unten etwas
   beschnitten. Unter 992px feste Hoehe, dann wird links und
   rechts beschnitten. Das Motiv muss deshalb mittig sitzen.

   ACHTUNG: Die Zahlen 570, 470 und 360 ergeben sich aus den
   festen Bootstrap-Containerbreiten 1170, 970 und 750 plus
   15px Spaltenabstand. Sollte das Bild seitlich verschoben
   stehen statt mittig, verwendet das Theme andere Breiten.
   Dann die vier margin-left-Zeilen loeschen, das Bild ist
   danach wieder so breit wie der Text.
   ============================================================ */

/* Kein waagrechter Rollbalken. clip statt hidden, weil hidden
   die klebende Kopfleiste ausser Kraft setzen wuerde. */
#rdn-wrapper {
    overflow-x: clip !important;
}

/* Weisser Streifen ueber dem Bild.
   Das Theme setzt einen Innenabstand oben auf den
   Inhaltsbereich. Bei reinen Textseiten faellt der nicht auf,
   unter einem randlosen Bild schon.
   :has sorgt dafuer, dass der Abstand nur auf Seiten MIT
   Beitragsbild wegfaellt. Ohne Bild bliebe der Text sonst an
   der Kopfleiste kleben. */
#rdn-wrapper .rdn-main-content:has(.rdn-featured-image),
#rdn-wrapper .rdn-main-content:has(.rdn-featured-image) > .container,
#rdn-wrapper .rdn-main-content:has(.rdn-featured-image) .col-md-8,
#rdn-wrapper .rdn-main-content:has(.rdn-featured-image) article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.rdn-featured-image {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(570px - 50vw) !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 34px !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    border-radius: 0 !important;
}
.rdn-featured-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 3 / 1 !important;
    max-height: 380px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Mittlere Schirme: Container 970 statt 1170 */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .rdn-featured-image {
        margin-left: calc(470px - 50vw) !important;
    }
}

/* Tablet: Container 750, feste Hoehe statt Verhaeltnis */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .rdn-featured-image {
        margin-left: calc(360px - 50vw) !important;
        margin-bottom: 24px !important;
    }
    .rdn-featured-image img {
        aspect-ratio: auto !important;
        height: 220px !important;
        max-height: none !important;
    }
}

/* Handy: Container laeuft fluid, nur der Innenabstand muss weg */
@media only screen and (max-width: 767px) {
    .rdn-featured-image {
        margin-left: -15px !important;
        margin-bottom: 18px !important;
    }
    .rdn-featured-image img {
        aspect-ratio: auto !important;
        height: 170px !important;
        max-height: none !important;
    }
}


/* ============================================================
   45) LEISTUNGS-KACHELN AM HANDY, WAAGRECHTE ZEILEN
   Ueberschreibt den Handy-Teil von Abschnitt 20 und 33.

   Vorher stand pro Leistung eine grosse Karte mit Bild im
   Verhaeltnis 4:3 darueber. Bei acht Leistungen war die Seite
   dadurch sehr lang und man sah nie mehr als anderthalb
   Eintraege auf einmal.

   Jetzt: kleines Bild links, Titel und Zeile darunter rechts,
   feine Trennlinie. Gleiches Muster wie die Teamkarten in
   Abschnitt 34, damit die Seite ruhig bleibt.

   Rueckgaengig machen: diesen Abschnitt loeschen.
   ============================================================ */
@media only screen and (max-width: 600px) {

    .entry-content .leistungs-grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        margin: 1.2em 0 2em !important;
        padding: 0 !important;
        border-top: 1px solid #e3eaf1 !important;
    }

    .entry-content .leistungs-grid .kachel {
        display: grid !important;
        grid-template-columns: 78px 1fr !important;
        column-gap: 14px !important;
        align-items: center !important;
        height: auto !important;
        padding: 12px 26px 12px 0 !important;
        margin: 0 !important;
        position: relative !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #e3eaf1 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }
    .entry-content .leistungs-grid .kachel:hover {
        box-shadow: none !important;
        transform: none !important;
        background: #f7fafc !important;
    }

    .entry-content .leistungs-grid .kachel img {
        grid-column: 1 !important;
        width: 78px !important;
        max-width: 78px !important;
        height: 62px !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        border-radius: 5px !important;
        margin: 0 !important;
    }

    .entry-content .leistungs-grid .kachel-text {
        grid-column: 2 !important;
        display: block !important;
        padding: 0 !important;
    }
    .entry-content .leistungs-grid .kachel-titel {
        font-size: 15.5px !important;
        line-height: 1.3 !important;
        margin: 0 0 2px !important;
    }
    .entry-content .leistungs-grid .kachel-sub {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    /* Pfeil rechts, wie im Menue: zeigt an, dass es weitergeht */
    .entry-content .leistungs-grid .kachel::after {
        content: "\203A" !important;
        position: absolute !important;
        right: 6px !important;
        top: 50% !important;
        transform: translateY(-52%) !important;
        font-size: 20px !important;
        line-height: 1 !important;
        color: #b9c6d2 !important;
    }
}


/* ============================================================
   46) SPRUNGMARKEN (Anker)
   Die Kopfleiste klebt oben. Springt man ueber einen Anker,
   etwa auf /kontakt.../#anfahrt oder ueber die
   FAQ-Sprungnavigation, landet die Ueberschrift genau unter
   der Leiste und ist nicht zu sehen.

   scroll-margin-top haelt den noetigen Abstand frei. Der Wert
   muss etwas groesser sein als die Kopfleiste hoch ist.

   Anker setzt man im Blockeditor: Ueberschrift anklicken,
   rechts unter Erweitert das Feld HTML-Anker ausfuellen,
   zum Beispiel anfahrt. Verlinkt wird dann mit
   /seite/#anfahrt.
   ============================================================ */
.entry-content [id],
.entry-content h2[id],
.entry-content h3[id],
.entry-content h4[id],
.entry-content .wp-block-group[id],
.entry-content details[id] {
    scroll-margin-top: 160px !important;
}

@media only screen and (max-width: 991px) {
    .entry-content [id] {
        scroll-margin-top: 130px !important;
    }
}
@media only screen and (max-width: 767px) {
    .entry-content [id] {
        scroll-margin-top: 110px !important;
    }
}

/* Sanft scrollen statt springen, aber nur wenn das Geraet
   keine reduzierte Bewegung verlangt. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth !important;
    }
}


/* ============================================================
   47) TEAMSEITE, NEUE FASSUNG
   Ueberschreibt Abschnitt 23 und den Handy-Teil aus 34.

   Vorher standen sieben gleich grosse Karten untereinander.
   Das las sich wie eine Aufzaehlung, und die Aerztin ging
   darin unter, obwohl sie der Grund ist, warum jemand die
   Seite ueberhaupt aufruft.

   Jetzt zwei Groessen:
   - .team-karte.gross   grosse Leitkarte, Bild links,
                         Text rechts, ueber die volle Breite.
                         Steht allein, ohne .team-grid drum.
   - .team-karte         engeres Raster, drei bis vier pro
                         Reihe. Halbiert die Seitenlaenge.

   Bilder bekommen weiche Ecken statt scharfer Kanten, das
   passt zu den Kacheln und zum Menue.
   ============================================================ */

/* --- Grosse Leitkarte --- */
.entry-content .team-karte.gross {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    column-gap: 36px !important;
    align-items: start !important;
    margin: 1.8em 0 2.6em !important;
    padding: 0 0 2.2em !important;
    border-bottom: 1px solid #e3eaf1 !important;
    text-align: left !important;
}
.entry-content .team-karte.gross img {
    grid-column: 1 !important;
    grid-row: 1 / span 6 !important;
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    border-radius: 12px !important;
    margin: 0 !important;
    filter: none !important;
}
.entry-content .team-karte.gross .team-rolle,
.entry-content .team-karte.gross .team-name,
.entry-content .team-karte.gross .team-seit,
.entry-content .team-karte.gross .team-trenner,
.entry-content .team-karte.gross .team-bio {
    grid-column: 2 !important;
}
.entry-content .team-karte.gross .team-rolle {
    font-size: 12px !important;
    letter-spacing: 1.4px !important;
    margin: 2px 0 8px !important;
}
.entry-content .team-karte.gross .team-name {
    font-size: 27px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
}
.entry-content .team-karte.gross .team-trenner {
    width: 48px !important;
    height: 3px !important;
    background: #c75a2a !important;
    margin: 16px 0 14px !important;
}
.entry-content .team-karte.gross .team-bio {
    font-size: 16.5px !important;
    line-height: 1.7 !important;
}

/* --- Uebriges Team: engeres Raster --- */
.entry-content .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 36px 26px !important;
    margin: 1.6em 0 2.8em !important;
}
.entry-content .team-grid.zweispaltig {
    grid-template-columns: repeat(auto-fit, minmax(230px, 300px)) !important;
    gap: 36px 30px !important;
    max-width: 720px !important;
    justify-content: start !important;
}
/* Obergrenze fuer die Bildbreite in normalen Karten.
   Ohne sie zieht ein Raster mit nur einer Karte das Bild auf
   die halbe Seitenbreite, und eine Nebenrolle waere groesser
   abgebildet als die Leitkarte. */
.entry-content .team-karte:not(.gross) img {
    width: 100% !important;
    max-width: 210px !important;
    border-radius: 10px !important;
    margin: 0 0 14px !important;
    filter: none !important;
}
.entry-content .team-karte .team-rolle {
    font-size: 10.5px !important;
    letter-spacing: 1.2px !important;
    margin: 0 0 5px !important;
}
.entry-content .team-karte .team-name {
    font-size: 18px !important;
    line-height: 1.25 !important;
}
.entry-content .team-karte .team-seit {
    font-size: 12.5px !important;
}
.entry-content .team-karte .team-trenner {
    width: 32px !important;
    margin: 11px 0 10px !important;
}
.entry-content .team-karte .team-bio {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}

/* --- Tablet --- */
@media only screen and (max-width: 900px) {
    .entry-content .team-karte.gross {
        grid-template-columns: 210px 1fr !important;
        column-gap: 26px !important;
    }
    .entry-content .team-karte.gross img {
        width: 210px !important;
        max-width: 210px !important;
    }
    .entry-content .team-karte.gross .team-name {
        font-size: 23px !important;
    }
    .entry-content .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
        gap: 30px 22px !important;
    }
}

/* --- Handy ---
   Setzt das waagrechte Kartenlayout vollstaendig selbst.
   Die Regeln aus Abschnitt 34 reichen nicht mehr, weil die
   Rasterregel weiter oben in diesem Abschnitt ohne Media
   Query steht und damit spaeter greift. --- */
@media only screen and (max-width: 600px) {

    /* Eine Spalte, waagrechte Karten */
    .entry-content .team-grid,
    .entry-content .team-grid.zweispaltig {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        max-width: 100% !important;
        margin: 1.2em 0 2em !important;
    }

    .entry-content .team-karte:not(.gross) {
        display: grid !important;
        grid-template-columns: 84px 1fr !important;
        column-gap: 16px !important;
        align-items: start !important;
        padding: 16px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #eef2f6 !important;
    }
    .entry-content .team-grid .team-karte:last-child {
        border-bottom: none !important;
    }
    .entry-content .team-karte:not(.gross) img {
        grid-column: 1 !important;
        grid-row: 1 / span 5 !important;
        width: 84px !important;
        max-width: 84px !important;
        height: 84px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }
    .entry-content .team-karte:not(.gross) .team-rolle,
    .entry-content .team-karte:not(.gross) .team-name,
    .entry-content .team-karte:not(.gross) .team-seit,
    .entry-content .team-karte:not(.gross) .team-bio {
        grid-column: 2 !important;
    }
    .entry-content .team-karte:not(.gross) .team-rolle {
        font-size: 10px !important;
        letter-spacing: 1px !important;
        margin: 0 0 3px !important;
    }
    .entry-content .team-karte:not(.gross) .team-name {
        font-size: 17px !important;
        line-height: 1.25 !important;
        margin: 0 0 2px !important;
    }
    .entry-content .team-karte:not(.gross) .team-seit {
        font-size: 12px !important;
    }
    /* Trennstrich weg, die Karte hat schon eine Linie unten */
    .entry-content .team-karte:not(.gross) .team-trenner {
        display: none !important;
    }
    .entry-content .team-karte:not(.gross) .team-bio {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-top: 8px !important;
    }
    .entry-content .team-karte:not(.gross) .team-bio + .team-bio {
        margin-top: 0.5em !important;
    }

    /* Leitkarte gestapelt */

    .entry-content .team-karte.gross {
        display: block !important;
        grid-template-columns: none !important;
        padding-bottom: 1.8em !important;
        margin-bottom: 2em !important;
    }
    .entry-content .team-karte.gross img {
        width: 190px !important;
        max-width: 190px !important;
        height: 190px !important;
        margin: 0 0 16px !important;
        border-radius: 10px !important;
    }
    .entry-content .team-karte.gross .team-rolle {
        font-size: 11px !important;
    }
    .entry-content .team-karte.gross .team-name {
        font-size: 21px !important;
    }
    .entry-content .team-karte.gross .team-trenner {
        display: block !important;
        width: 40px !important;
        margin: 12px 0 12px !important;
    }
    .entry-content .team-karte.gross .team-bio {
        font-size: 15.5px !important;
        line-height: 1.65 !important;
    }
}


/* ============================================================
   48) LOGO, EINE FORMEL FUER ALLE GROESSEN
   Ueberschreibt die Logo-Regeln aus Abschnitt 0, 24 und 30.

   Gesteuert wird ueber die BREITE, nicht ueber die Hoehe.
   Damit bleibt das Verhaeltnis von Logo zu Fenster ueberall
   gleich. Frueher steuerte unter 768px die Breite und darueber
   die Hoehe, deshalb sprang das Logo an der Grenze.

   Datei: 1200 x 380 px, Verhaeltnis 3,16 zu 1.
   Die Hoehe ergibt sich daraus von selbst, das Logo kann
   also nicht verzerren.

   clamp(280px, calc(60px + 26vw), 360px) ergibt:
     390px Fenster  -> 280px breit,  89px hoch
     768px Fenster  -> 280px breit,  89px hoch
    1024px Fenster  -> 326px breit, 103px hoch
    ab 1154px       -> 360px breit, 114px hoch

   Die Obergrenze von 360 ist NICHT frei waehlbar. Daneben
   brauchen die Menuepunkte und der Termin-Button rund 780px.
   Bei einem Container von 1170px bleibt fuer das Logo nicht
   mehr uebrig. Wird die Zahl groesser gesetzt, laeuft das
   Logo in die Menuepunkte hinein.

   Logo und Menue stehen nebeneinander, siehe Abschnitt 50.
   Wenn das Logo groesser sein soll, muss der Kopfbereich
   zweizeilig werden. Das hiesse: Abschnitt 50 loeschen und
   die Spalten auf volle Breite stellen.
   ============================================================ */
#rdn-menu .navbar .col-md-4 img,
#rdn-menu a.custom-logo-link img.custom-logo,
img.custom-logo {
    display: block !important;
    width: clamp(280px, calc(60px + 26vw), 360px) !important;
    height: auto !important;
    max-height: none !important;
    max-width: calc(100vw - 80px) !important;
    margin: 0 !important;
}

/* Kopfbereich: gleich viel Luft oben und unten */
#rdn-menu .navbar .container {
    padding-top: clamp(6px, 0.9vw, 12px) !important;
    padding-bottom: clamp(6px, 0.9vw, 12px) !important;
}


/* ============================================================
   49) LEERE FLAECHE UNTER DEM LOGO
   Bootstrap gibt der Navigationsleiste eine Mindesthoehe von
   50px und 20px Abstand nach unten. Dazu kommen die
   Zeilenabstaende der Spalten und die Grundlinie unter dem
   Logo-Bild.

   Abschnitt 24 hat das bisher nur unter 767px zurueckgesetzt,
   Abschnitt 0b nur ab 769px, und bei genau 768px gar nicht.
   Hier gilt es fuer alle Groessen.

   Falls danach immer noch ein Streifen bleibt: im Inspektor
   das Element unter der Leiste anklicken und schauen, wer den
   Abstand setzt. Kandidaten sind .rdn-sub-header und der
   Bootstrap-Container im Inhaltsbereich.
   ============================================================ */
#rdn-menu .navbar,
#rdn-menu .navbar-header,
#rdn-menu .navbar > .container,
#rdn-menu .navbar .row {
    min-height: 0 !important;
    margin-bottom: 0 !important;
}
#rdn-menu .navbar .row {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
}
#rdn-menu .navbar .col-md-4,
#rdn-menu .navbar .col-md-8 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Das Logo ist ein Block, darunter darf keine Grundlinie
   stehen bleiben */
#rdn-menu .site-branding,
#rdn-menu a.custom-logo-link {
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#rdn-menu .navbar-nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Der Theme-Banner darf keinen Abstand hinterlassen */
#rdn-wrapper .rdn-sub-header {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Am Handy sitzt das Menue absolut, die Leiste darf dort
   nicht die Hoehe des eingeklappten Panels reservieren */
@media only screen and (max-width: 767px) {
    #rdn-menu .navbar .row {
        display: block !important;
    }
    #rdn-menu .navbar-header {
        position: relative !important;
        min-height: 0 !important;
    }
}


/* ============================================================
   50) KOPFBEREICH EINZEILIG
   Setzt die Spalten des Themes wieder auf nebeneinander.
   Abschnitt 49 hatte sie fuer den zweizeiligen Kopf auf
   volle Breite gestellt.

   Logo links in .col-md-4, Menue rechtsbuendig in .col-md-8,
   beide vertikal mittig.

   Gilt erst ab 768px. Darunter liegt das Logo allein in der
   Leiste und rechts sitzt der Burger.
   ============================================================ */
@media only screen and (min-width: 768px) {

    #rdn-menu .navbar .row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    #rdn-menu .navbar .col-md-4 {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #rdn-menu .navbar .col-md-8 {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Menue rechtsbuendig, ohne Trennlinie darueber */
    #rdn-menu #navbar-collapse-1.navbar-collapse {
        border-top: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    #rdn-menu .navbar-nav {
        float: none !important;
        text-align: right !important;
        margin: 0 !important;
        width: 100% !important;
    }
    #rdn-menu .navbar-nav > li {
        float: none !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    #rdn-menu .navbar-nav > li > a {
        padding: 8px 10px !important;
        font-size: 15px !important;
    }
    #rdn-menu .navbar-nav > li:last-child > a {
        padding-right: 0 !important;
    }
    #rdn-menu .navbar-nav > li.menu-cta {
        margin-left: 8px !important;
    }
    #rdn-menu .navbar-nav > li.menu-cta > a {
        padding: 8px 16px !important;
    }
}


/* ============================================================
   51) THEMENKACHELN (.themen-grid)
   Fuer lange Seiten mit mehreren Themenbloecken, vor allem
   die Haeufigen Fragen. Ersetzt dort die Pillenleiste
   .faq-nav aus Abschnitt 22.

   Bewusst OHNE Bild. Fuer Themen wie Kosten oder akute
   Beschwerden gibt es kein sinnvolles Foto, und acht Bilder
   mehr kosten auf einer ohnehin langen Seite zu viel
   Ladezeit.

   Anwendung als HTML-Block:
   <div class="themen-grid">
     <a class="thema" href="#anker">
       <span class="thema-titel">Titel</span>
       <span class="thema-sub">Eine Zeile Erklaerung</span>
     </a>
   </div>

   Die Pillenleiste .faq-nav bleibt im CSS, falls du sie
   woanders brauchst.
   ============================================================ */
.entry-content .themen-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin: 1.6em 0 2.6em !important;
    padding: 0 !important;
    list-style: none !important;
}
.entry-content .themen-grid .thema {
    display: block !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #dde5ec !important;
    border-left: 3px solid #4a6a86 !important;
    border-radius: 8px !important;
    padding: 14px 30px 14px 16px !important;
    text-decoration: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.entry-content .themen-grid .thema:hover {
    border-color: #c75a2a !important;
    border-left-color: #c75a2a !important;
    box-shadow: 0 4px 14px rgba(35,35,35,0.08) !important;
}
.entry-content .themen-grid .thema-titel {
    display: block !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #4a6a86 !important;
    margin: 0 0 3px !important;
}
.entry-content .themen-grid .thema-sub {
    display: block !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #5f5e5a !important;
    margin: 0 !important;
}
.entry-content .themen-grid .thema:hover .thema-titel {
    color: #c75a2a !important;
}
/* Pfeil nach unten, weil es ein Sprung auf derselben Seite ist */
.entry-content .themen-grid .thema::after {
    content: "\2193" !important;
    position: absolute !important;
    right: 12px !important;
    top: 15px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: #b9c6d2 !important;
}
.entry-content .themen-grid .thema:hover::after {
    color: #c75a2a !important;
}

@media only screen and (max-width: 900px) {
    .entry-content .themen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}
@media only screen and (max-width: 600px) {
    .entry-content .themen-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 1.2em 0 2em !important;
    }
    .entry-content .themen-grid .thema {
        padding: 12px 26px 12px 13px !important;
    }
    .entry-content .themen-grid .thema-titel {
        font-size: 14.5px !important;
    }
    .entry-content .themen-grid .thema-sub {
        font-size: 12.5px !important;
    }
}


/* ============================================================
   52) PREISE VORLAEUFIG AUSBLENDEN
   Solange die Preise nicht feststehen, stehen in den
   Kostenboxen Platzhalter wie [[ Preis ]]. Die sollen
   Besucher nicht sehen.

   Diese Regel blendet den Platzhalter aus und schreibt
   stattdessen "auf Anfrage" an dieselbe Stelle. Die Seiten
   selbst bleiben unveraendert, die Platzhalter stehen also
   weiter im Code und du siehst im Editor, wo noch etwas
   fehlt.

   display: none statt unsichtbar machen, damit auch
   Screenreader den Platzhalter nicht vorlesen.

   WENN DIE PREISE DA SIND: diesen ganzen Abschnitt loeschen
   und in den Kostenboxen platzhalter durch den Betrag
   ersetzen. Solange auch nur ein Platzhalter uebrig ist,
   muss der Abschnitt stehen bleiben.
   ============================================================ */
body:not(.sb-preise-sichtbar) .entry-content .kosten-box li .preis.platzhalter,
body:not(.sb-preise-sichtbar) .entry-content .kosten-box .spalte li .preis.platzhalter {
    display: none !important;
}

body:not(.sb-preise-sichtbar) .entry-content .kosten-box li:has(.preis.platzhalter)::after,
body:not(.sb-preise-sichtbar) .entry-content .kosten-box .spalte li:has(.preis.platzhalter)::after {
    content: "auf Anfrage" !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.3 !important;
    color: #8a8884 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Hinweiszeile unter jeder Kostenbox, in der noch etwas
   offen ist. Faellt automatisch weg, sobald kein Platzhalter
   mehr drin steht. */
body:not(.sb-preise-sichtbar) .entry-content .kosten-box:has(.preis.platzhalter)::after {
    content: "Preise, die hier noch nicht stehen, nennen wir Ihnen gerne am Telefon oder beim Termin." !important;
    display: block !important;
    margin-top: 0.8em !important;
    padding-top: 0.6em !important;
    border-top: 1px solid #f2e2d6 !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: #8a8884 !important;
}


/* ============================================================
   53) BROTKRUME UND WEITERE LEISTUNGEN
   Zwei kleine Bausteine fuer die Leistungsseiten.

   a) .brotkrumen
   Eine Zeile ganz oben, vor der Ueberschrift. Zeigt, wo man
   ist, und fuehrt zurueck zur Uebersicht. Wichtig vor allem
   am Handy, wo das Menue hinter dem Burger liegt.

   <div class="brotkrumen">
     <a href="/leistungen-augenarzt-in-1230-wien-dr-schild-burggasser/">Leistungen</a>
     <span>Grauer Star</span>
   </div>

   b) .weitere-leistungen
   Ein Block am Fuss der Seite, VOR dem Terminabschnitt. Nutzt
   das Kachelraster aus Abschnitt 20 in kleiner. Drei bis vier
   verwandte Leistungen, nicht alle.

   <div class="weitere-leistungen">
     <p class="weitere-titel">Weitere Leistungen</p>
     <div class="leistungs-grid klein"> ... Kacheln ... </div>
   </div>
   ============================================================ */

/* --- a) Brotkrume --- */
.entry-content .brotkrumen {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 1.4em !important;
    padding: 0 !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #8b98a5 !important;
}
.entry-content .brotkrumen a {
    color: #4a6a86 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #dde5ec !important;
    padding-bottom: 1px !important;
}
.entry-content .brotkrumen a:hover {
    color: #c75a2a !important;
    border-bottom-color: #c75a2a !important;
}
.entry-content .brotkrumen a + span::before,
.entry-content .brotkrumen a + a::before {
    content: "\203A" !important;
    margin-right: 6px !important;
    color: #b9c6d2 !important;
}

/* --- b) Weitere Leistungen --- */
.entry-content .weitere-leistungen {
    margin: 3em 0 2.4em !important;
    padding-top: 1.6em !important;
    border-top: 1px solid #e3eaf1 !important;
}
.entry-content .weitere-leistungen .weitere-titel {
    margin: 0 0 1em !important;
    font-family: 'Atkinson Hyperlegible', 'Open Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: #8b98a5 !important;
}
.entry-content .weitere-leistungen .leistungs-grid {
    margin: 0 !important;
}
/* Kleinere Kacheln als auf der Uebersichtsseite */
.entry-content .leistungs-grid.klein .kachel-titel {
    font-size: 16px !important;
}
.entry-content .leistungs-grid.klein .kachel-sub {
    font-size: 13px !important;
}
.entry-content .leistungs-grid.klein .kachel-text {
    padding: 12px 14px 14px !important;
}

@media only screen and (max-width: 600px) {
    .entry-content .weitere-leistungen {
        margin: 2.4em 0 2em !important;
        padding-top: 1.2em !important;
    }
    .entry-content .brotkrumen {
        font-size: 12.5px !important;
        margin-bottom: 1.1em !important;
    }
}