/* ==========================================================================
   Praxis Dr. Simone van de Loo - Web Design Stylesheet
   Designed with care, responsiveness and 100% GDPR (DSGVO) compliance.
   No cookies, no external fonts/CDNs, beautiful responsive medical styling.
   ========================================================================== */

/* Design Tokens & Theme Variables */
:root {
    --primary: #009CBC;        /* Markenton. Flächen, Rahmen, Schaltflächen – bleibt unangetastet */
    --primary-hover: #005f78;  /* Hover: Text auf heller Toenung, deshalb dunkler als der Markenton */
    --primary-light: #e6f6f9;  /* Very Light Brand Teal-Blue tint */

    /* Derselbe Ton, nur dunkler – ausschließlich für Schrift.
       --------------------------------------------------------------------
       #009CBC ist die Hausfarbe und bleibt auf jeder Fläche, jedem Rahmen und
       jeder Schaltfläche genau so stehen. Als *Text* auf Weiß erreicht sie
       aber nur 3,2:1, verlangt sind 4,5:1 — betroffen waren Praxisname unter
       dem Logo, Navigationsbeschriftungen, Datumsangaben, die „heute"-Marke
       und die Fußzeilenlinks. Auf der hellen Tönung #e6f6f9 waren es sogar
       nur 2,9:1.

       Deshalb die Trennung: `background-color`, `border-color` und `fill`
       nehmen weiter --primary, jedes `color:` nimmt --primary-text. Gleiche
       Farbfamilie, nur so weit abgedunkelt, dass Schrift lesbar wird:
       5,8:1 auf Weiß, 5,2:1 auf der Tönung. */
    --primary-text: #006e8f;
    --secondary: #0f172a;      /* Deep Slate / Text Primary */
    --text-muted: #475569;     /* Slate Muted */
    --bg-base: #f8fafc;        /* Cool grayish-white */
    --bg-surface: #ffffff;     /* Card background */
    --border-color: #e2e8f0;   /* Light gray border */
    --accent: #f59e0b;         /* Gentle Amber for alerts/important news */

    /* Flächen und Töne, die bis zum Farbschema-Umbau als feste Werte in den
       Regeln standen. Als Variablen genügt für den Dunkelmodus ein einziger
       Block am Ende der Datei. */
    --hero-von: #f0fdfa;       /* Verlauf des Begrüßungsbereichs */
    --hero-bis: #ccfbf1;
    --hero-split-von: #f0f9fb;
    --hero-split-bis: #e6f7fa;
    --flaeche-gedaempft: #f1f5f9;   /* Leiste der Navigation am Telefon */

    /* Kontaktbanner. --secondary ist zugleich Textfarbe und Bannerfläche; im
       Dunkelmodus müssen die beiden auseinandergehen, sonst stünde weiße
       Schrift auf hellem Grund. Deshalb eigene Variablen. */
    --banner-flaeche: #0f172a;
    --banner-text: #ffffff;
    --banner-text-leise: #94a3b8;
    --banner-akzent: #e6f6f9;

    /* Hervorgehobene Meldung (Bernstein) */
    --meldung-flaeche: #fffbeb;
    --meldung-linie: #fde047;
    --meldung-kante: #f97316;
    --meldung-marke-flaeche: #fef3c7;
    --meldung-marke-text: #92400e;

    /* Aufnahmestopp (Bernstein) und Schließzeit (Rot) */
    --warn-flaeche: #fffbeb;
    --warn-linie: #fde68a;
    --warn-kante: #f59e0b;
    --warn-text: #78350f;
    --stopp-flaeche: #fef2f2;
    --stopp-kante: #dc2626;
    --stopp-text: #7f1d1d;

    /* Hinweis zur Barrierefreiheit auf der Kontaktkarte. Das fruehere
       #0284c7 auf #f0f9ff erreichte nur 3,8:1. */
    --zugang-text: #0369a1;
    --zugang-flaeche: #f0f9ff;
    --zugang-kante: #0284c7;

    /* Türkis in verschiedenen Verdünnungen */
    --tinte-stark: rgba(0, 156, 188, 0.3);
    --tinte: rgba(0, 156, 188, 0.25);
    --tinte-fein: rgba(0, 156, 188, 0.15);
    --tinte-flaeche: rgba(0, 156, 188, 0.09);

    /* Schrift auf der türkisen Fläche.
       --------------------------------------------------------------------
       Weiß darauf erreicht nur 3,2:1 — bei „Termin buchen" (13,5 px) und dem
       aktiven Reiter der Datenschutzseite (14,25 px) greift auch die mildere
       Schwelle für große Schrift nicht, dafür sind sie zu klein.

       Statt die Hausfarbe abzudunkeln, wird die Beschriftung dunkel: Die
       Fläche bleibt exakt #009CBC, die Schrift erreicht 5,4:1. Im Dunkelmodus
       war es ohnehin schon so gelöst, dort aus demselben Grund.

       Das bisherige Erscheinungsbild behält seine weißen Schaltflächentexte —
       dort steht die Schrift bei 18,75 px fett und liegt damit über der
       Schwelle. */
    --auf-primaer: #0f172a;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
}

/* Reset & Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Wurzelgröße: ein Hebel für alle Textgrößen, weil sie in rem angegeben
       sind – auch die hervorgehobene Meldung auf der Startseite. Eine Stufe
       unter den früheren 16 px, wie im alten Look. */
    font-size: 15px;
    background-color: var(--bg-base);
    min-height: 100vh;
}

/* --- Tastaturbedienung ---------------------------------------------------
   Wer nicht mit der Maus arbeiten kann, muss sehen, wo er gerade steht.
   :focus-visible zeigt den Rahmen bei Tastaturbedienung, nicht bei jedem Klick. */

:focus-visible {
    outline: 3px solid var(--primary-hover);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Bewegung reduzieren -------------------------------------------------
   Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt eine
   ruhige Seite – einschließlich des weichen Scrollens oben in dieser Datei.
   Bei Migräne, nach einem Schlaganfall oder bei Schwindel kann Bewegung im
   Bild spürbar stören. */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    background-color: var(--bg-base);
    color: var(--secondary);
    line-height: 1.6;
    /* Lange Komposita und URLs brechen notfalls um. Ohne diese Regel schob die
       Überschrift "Verbraucherstreitbeilegung/Universalschlichtungsstelle" das
       Impressum bei 375 px um 50 px über den Bildschirmrand. */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* General Link Mouseover Effects
   --------------------------------------------------------------------------
   .footer-links a ist seit heute ausdrücklich ausgenommen: Diese Regel ist
   spezifischer als .footer-links a:hover (sechs :not() gegen zwei Klassen)
   und gewann deshalb immer, obwohl sie .footer-links nirgends nennt. Zwei
   Folgen: Die eigens gesetzte Unterstreichung kam nie zum Zug, und der
   Hover-Hintergrund (--primary-light) ist exakt die Fläche, auf der die
   Fußzeile selbst steht (footer { background-color: var(--primary-light) }
   weiter unten) – der „Effekt" lag die ganze Zeit unsichtbar unter den
   Links. Gemeldet als „im hellen Modus sieht man in der Fußzeile keinen
   Mauszeiger-Effekt". */
a:not(.btn):not(.logo):not(.nav-links a):not(.link-edit):not(.link-delete):not(.footer-links a) {
    color: var(--primary-text);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1px 4px;
    border-radius: 4px;
}

a:not(.btn):not(.logo):not(.nav-links a):not(.link-edit):not(.link-delete):not(.footer-links a):hover {
    color: var(--primary-hover);
    background-color: var(--primary-light);
    box-shadow: 0 2px 4px rgba(0, 156, 188, 0.06);
}

/* Bilder dürfen ihre Spalte nie sprengen. Ohne diese Regel gab das Foto in der
   Botulinumtoxin-Kachel der Rasterzelle eine Mindestbreite von 314 px – auf
   320-px-Geräten schob das die ganze Startseite 17 px über den Rand. */
/* height: auto gehört dazu, seit die Bilder width- und height-Attribute tragen:
   Die Attribute sind nur da, damit der Browser das Seitenverhältnis schon vor
   dem Laden kennt. Ohne height: auto bliebe ein in der Breite begrenztes Bild
   in der Höhe stehen und wäre verzerrt. Regeln mit Klassenselektor und
   Inline-Angaben setzen ihre eigene Höhe weiterhin durch. */
img {
    max-width: 100%;
    height: auto;
}

/* Rasterkinder haben von sich aus min-width: auto und können deshalb nicht
   unter die Mindestbreite ihres Inhalts schrumpfen. Zusammen mit der Regel
   darüber ist das der zweite Riegel gegen genau diesen Fehler. */
.grid-three > *,
.five-tiles-container > *,
.responsive-two-grid > * {
    min-width: 0;
}

/* App-like container layout */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Header & Navigation */
header {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.nav-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    /* Muss zur Logohöhe passen: bei fester Höhe von 72px ragte das 80px hohe
       Logo aus der Leiste heraus. min-height lässt Luft nach oben. */
    min-height: 96px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--secondary);
}

/* Einzige Stelle für die Logohöhe. Sie stand zuvor zusätzlich in den
   Inline-Blöcken aller Seiten und musste dort jedes Mal mitgepflegt werden. */
.logo-img {
    height: 80px;
    width: auto;
    display: block;
}

.logo-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1.25;
}

.logo-subtitle {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary-text);
    line-height: 1.25;
}

.logo svg {
    color: var(--primary-text);
    width: 32px;
    height: 32px;
}

.nav-links {
    display: flex;
    /* Umbruch erlaubt: Seit dem sechsten Punkt (Studien) und der
       Schriftgrößen-Auswahl in der Kopfleiste passt die Reihe zwischen etwa
       1000 und 1200 px nicht mehr in eine Zeile und schob die Seite über den
       Rand. Jetzt rutscht stattdessen ein Punkt in die zweite Zeile. */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 16px;
    list-style: none;
}

.nav-links li {
    display: block;
}

.nav-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px 14px;
    border-radius: 8px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    min-width: 96px;
    height: 52px;
    gap: 4px;
}

.nav-links a .nav-icon {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    transition: transform 0.25s ease;
}

/* Hover style with elegant transition */
.nav-links a:hover {
    color: var(--primary-text);
    background-color: var(--bg-surface);
    border-color: var(--tinte);
    border-bottom: 3px solid var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 156, 188, 0.08);
}

.nav-links a:hover .nav-icon {
    transform: scale(1.1);
}

.nav-links a.active {
    color: var(--primary-text);
    background-color: var(--bg-surface);
    border: 1px solid var(--tinte-fein);
    border-bottom: 3px solid var(--primary); /* Elegant bottom colored accent */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

.nav-links a.active .nav-icon {
    color: var(--primary-text);
}

/* Hero Section */
.hero {
    padding: 64px 0;
    background: linear-gradient(135deg, var(--hero-von) 0%, var(--hero-bis) 100%);
    border-radius: var(--radius-lg);
    margin: 24px 0;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.hero-split-container {
    display: grid;
    /* minmax(0, ...) is required: plain fr units resolve to minmax(auto, fr), so the
       wide text column would win over the ratio and squeeze the photo to ~130px. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 32px;
    padding: 48px;
    align-items: center;
    background: linear-gradient(135deg, var(--hero-split-von) 0%, var(--hero-split-bis) 100%);
    border-radius: var(--radius-lg);
    margin: 24px 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

@media (max-width: 992px) {
    /* EINE SPALTE, FOTO ZUOBERST.
       ----------------------------------------------------------------------
       Bis 11.08.2026 zweispaltig: Überschrift und Text über die volle Breite,
       darunter die Knöpfe in der linken Zelle und das runde Foto rechts
       daneben. Auf Wunsch der Praxis steht das Teamfoto jetzt **vor** der
       Begrüßung und mittig, und die Knöpfe nehmen die ganze Breite ein.

       Deshalb eine einzige Spalte. Das Foto kommt im Quelltext nach
       .hero-content und wird mit `order: -1` nach vorn geholt — nicht durch
       Umsortieren im HTML, denn am Desktop steht es weiterhin rechts neben
       dem Text und soll dort bleiben.

       `display: contents` hebt die .hero-content-Kinder ins Raster, damit sie
       einzeln platziert werden können — siehe die Regel darunter, warum das
       für ALLE Kinder gelten muss und nicht für eine Aufzählung. */
    .hero-split-container {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 24px 16px !important;
        gap: 20px 16px !important;
        text-align: center;
    }
    .hero-split-container .hero-content {
        display: contents;
    }
    /* JEDES Kind spannt über beide Spalten — nicht nur h1/h2/p.
       ----------------------------------------------------------------------
       Hier standen genau diese drei Selektoren. Weil `display: contents`
       oben ALLE Kinder von .hero-content zu Rasterzellen macht, blieb jedes
       weitere Kind ohne `grid-column` übrig und wurde automatisch platziert
       — es landete in der zweiten Spalte (`auto`) und bestimmte deren Breite.

       Zugeschnappt ist das an `<div data-aufnahmestopp>`, dem Hinweis „keine
       neuen Patienten". Der hat keine Klasse und stand in keiner Regel.
       Nachgemessen bei 375 px: Er zwang die auto-Spalte auf 295 px, womit für
       `minmax(0, 1fr)` genau 0 px blieben — „Termin buchen" (braucht 48 px)
       und „Videosprechstunde" (braucht 83 px) fielen auf 32 px zusammen.
       Seit v1.28.0 ist der Hinweis zweizeilig und damit breit genug, dass es
       auffällt.

       Das ist Falle 19 der Übergabe mit einem Textblock statt einem Bild.
       Deshalb jetzt als Grundregel für alle Kinder, mit den beiden
       Ausnahmen darunter — ein künftiges neues Kind bricht so nichts mehr. */
    .hero-split-container .hero-content > * {
        grid-column: 1 / -1;
        text-align: center;
        /* REIHENFOLGE: Überschriften – Foto – Text – Knöpfe.
           4 ist die Voreinstellung für alles, was unten keine eigene Nummer
           bekommt; untereinander behalten diese Elemente ihre Quelltext-
           Reihenfolge. Damit landet auch ein künftiges neues Kind an einer
           sinnvollen Stelle statt vorn — dieselbe Überlegung wie bei
           grid-column oben (Falle 38). */
        order: 4;
    }
    .hero-split-container .hero-content > h1 { order: 1; }
    .hero-split-container .hero-content > h2 { order: 2; }
    /* Knöpfe über die ganze Breite, untereinander. `align-items: stretch`
       zieht sie auf die volle Spaltenbreite; die Beschriftung steht durch
       `justify-content: center` im .btn selbst mittig. */
    .hero-split-container .hero-buttons {
        grid-column: 1 / -1;
        align-self: center;
        flex-direction: column;
        align-items: stretch;
        gap: 10px !important;
        margin-top: 0 !important;
    }
    /* Engere Innenabstände und Schrift als am Desktop — die Knöpfe stehen
       hier untereinander statt nebeneinander. */
    .hero-split-container .hero-buttons .btn {
        padding: 10px 14px !important;
        font-size: 0.88rem !important;
        line-height: 1.25 !important;
        text-align: center;
    }
    .hero-split-container .hero-buttons .btn svg {
        width: 17px !important;
        height: 17px !important;
        margin-right: 6px !important;
        flex-shrink: 0;
    }
    /* Foto unter die beiden Überschriften und über den Begrüßungstext, mittig
       — wie im bisherigen Erscheinungsbild. `order: 3` setzt es zwischen die
       Überschriften (1 und 2) und alles Übrige (Voreinstellung 4), ohne dass
       am Quelltext oder an der Desktop-Ansicht etwas geändert wird; dort
       steht es weiterhin rechts neben dem Text. */
    .hero-photo {
        grid-column: 1 / -1;
        order: 3;
        align-self: center;
        justify-self: center;
        width: auto !important;
    }
    .hero-split-container .photo-placeholder {
        /* Height follows the inline aspect-ratio, so the circle stays a circle */
        width: clamp(112px, 26vw, 200px) !important;
        height: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
}

.hero-content {
    flex: 1;
    /* 16px instead of 48px: the hero card already pads 48px, and the extra indent
       starved the button row so the three equal buttons could not share one line. */
    padding: 0 16px;
    z-index: 2;
}

.hero-tagline {
    color: var(--primary-text);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.hero h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--secondary);
}

.hero p {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    max-width: 550px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-top: 36px;
}

@media (min-width: 993px) {
    /* Three equal columns keep all buttons the same length and on one line. The
       label may wrap inside its column at narrow desktop widths - that degrades
       gracefully, unlike the old flex-nowrap which overflowed the column by ~150px. */
    .hero-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }
    .hero-buttons .btn {
        width: 100%;
        padding: 8px 10px !important;
        font-size: 0.9rem !important;
        white-space: normal !important;
        line-height: 1.25;
        text-align: center;
    }
    .hero-buttons .btn svg {
        flex-shrink: 0;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--auf-primaer);
    box-shadow: 0 4px 6px rgba(13, 148, 136, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--bg-surface);
    color: var(--secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--bg-base);
}

/* ==========================================================================
   News Box (DAS FLAT-FILE CMS FRONTEND)
   Rule 3: Must completely vanish if no active news is available.
   ========================================================================== */
.news-container {
    background-color: var(--meldung-flaeche);
    border: 1px solid var(--meldung-linie);
    border-left: 6px solid var(--meldung-kante);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    animation: fadeInNews 0.5s ease-out;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.news-badge {
    background-color: var(--meldung-marke-flaeche);
    color: var(--meldung-marke-text);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.news-title {
    font-size: 1.5rem;
    color: var(--secondary);
    margin-bottom: 10px;
    font-weight: 700;
}

.news-body {
    color: var(--text-muted);
    font-size: 1rem;
}

.news-body p {
    margin-bottom: 12px;
}

.news-body p:last-child {
    margin-bottom: 0;
}

/* Listen in Mitteilungen (Wunsch 19.10.2026): Der Reset oben (* { padding: 0 })
   nahm ihnen den Einzug, die Punkte hingen links ueber den Textrand hinaus.
   Jetzt stehen die Punkte buendig mit dem Text darueber, der Listentext ist
   eingerueckt; danach derselbe Abstand wie nach einem Absatz. */
/* Seit v1.52.2 auch im Archiv auf der Seite Aktuelles: Dort steht der Text
   nicht in .news-body, sondern in .blog-item-content-wrapper (main.js) – die
   Punkte hingen dort weiter links heraus. Gleiche drei Behälter wie bei den
   übrigen Mitteilungsregeln (Trennlinie, Farben im Dunkelmodus). */
.news-body ul,
.news-body ol,
.news-container ul,
.news-container ol,
.blog-item-content-wrapper ul,
.blog-item-content-wrapper ol {
    margin: 0 0 12px;
    padding-left: 1.1em;
    list-style-position: outside;
}
.news-body ul,
.news-container ul,
.blog-item-content-wrapper ul { list-style-type: disc; }
.news-body ol,
.news-container ol,
.blog-item-content-wrapper ol { list-style-type: decimal; padding-left: 1.4em; }
.news-body li,
.news-container li,
.blog-item-content-wrapper li { margin: 0 0 4px; padding-left: 0.2em; }
.news-body ul:last-child,
.news-body ol:last-child,
.news-container ul:last-child,
.news-container ol:last-child,
.blog-item-content-wrapper ul:last-child,
.blog-item-content-wrapper ol:last-child { margin-bottom: 0; }

/* Hidden class for complete erasure (Rule 3) */
.news-container.hidden {
    display: none !important;
}

@keyframes fadeInNews {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Info Cards & Overview Grid */
.grid-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--primary-light);
    color: var(--primary-text);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.card-icon svg {
    width: 24px;
    height: 24px;
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--secondary);
}

.card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Hinweis bei Aufnahmestopp – steht an den Schaltflächen zur Terminbuchung,
   solange die Praxis keine neuen Patienten aufnimmt. Information, keine
   Warnung: deutlich lesbar, aber ohne Alarmton. */
.aufnahmestopp-hinweis {
    margin: 14px 0 0;
    padding: 10px 14px;
    background-color: var(--warn-flaeche);
    border: 1px solid var(--warn-linie);
    border-left: 3px solid var(--warn-kante);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--warn-text);
    max-width: 640px;
}

/* Feiertag oder Urlaub – steht über den Sprechzeiten, damit niemand die
   reguläre Zeile für heute gültig hält. */
.schliesszeit-hinweis {
    margin: 0 0 10px;
    padding: 8px 12px;
    background-color: var(--stopp-flaeche);
    border-left: 3px solid var(--stopp-kante);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--stopp-text);
}

/* Zwei freie Zeilen unter den Sprechzeiten (Verwaltungsbereich → Inhalt →
   Sprechzeiten). Gibt es keinen Hinweis, setzt sprechzeiten.js das Element
   gar nicht erst ein – deshalb braucht es hier keine Regel für den leeren
   Fall. Fläche wie die Heute-Zeile: derselbe, bereits durchgemessene Ton. */
.sprechzeiten-zusatz {
    margin: 10px 0 0;
    padding: 8px 12px;
    background-color: var(--tinte-flaeche);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: break-word;
}

/* Geplante Schliesszeiten als Chip, aufklappbar (sprechzeiten.js,
   Bauliste L). Farben aus Variablen, die sich mit dem Farbschema umstellen:
   --primary-text auf --primary-light ist in beiden Schemata durchgemessen
   (Kennzeichnungen der Mitteilungen). */
.schliess-chip-box { margin-top: 12px; }
.schliess-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--primary);
    border-radius: 9999px;
    background-color: var(--primary-light);
    color: var(--primary-text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.schliess-chip::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}
.schliess-chip[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.schliess-chip:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.schliess-liste {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 12px;
    background-color: var(--tinte-flaeche);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.schliess-liste li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 3px 0; }
.schliess-zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.schliess-grund { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .schliess-chip::after { transition: none; } }
@media print {
    .schliess-chip { display: none; }
    .schliess-liste[hidden] { display: block !important; }
}

/* Opening Hours Card Spec */
.hours-list {
    list-style: none;
    margin-top: 12px;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.95rem;
}

.hours-row:last-child {
    border-bottom: none;
}

.hours-day {
    font-weight: 500;
}

/* Tage mit zwei Zeitfenstern bekommen zwei Zeilen untereinander. Die Regel stand
   früher als Inline-Style in home.html und wurde beim Auslagern der Sprechzeiten
   nach sprechzeiten.json hierher geholt – Inline-Werte überschreiben sonst
   zentrale Regeln. */
.hours-time {
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 4px;
}

/* Heutiger Tag: wird von main.js markiert. Zurückhaltend gehalten – eine zarte
   Fläche und ein kleiner Hinweis genügen, um den Tag schnell zu finden. */
.hours-row.heute {
    background-color: var(--tinte-flaeche);
    border-radius: 6px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.hours-row.heute .hours-day {
    font-weight: 700;
    color: var(--primary-text);
}

/* „heute" stand früher als CSS-Inhalt in einem ::after. Optisch dasselbe, aber
   erzeugter Inhalt wird von Vorleseprogrammen nicht zuverlässig wiedergegeben.
   Jetzt ein echtes Element, das sprechzeiten.js einsetzt. */
.heute-marke {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-text);
    white-space: nowrap;
}

.hours-row.heute .hours-time {
    color: var(--secondary);
    font-weight: 600;
}

/* Heutige Sprechzeit in der Kopfzeile der hervorgehobenen Meldung.
   Gleiche Farbsprache wie die Heute-Markierung in den Sprechzeiten.

   KEIN white-space: nowrap MEHR — Falle 9 an neuer Stelle.
   --------------------------------------------------------------------------
   An Tagen mit zwei Zeitfenstern (Montag, Mittwoch, Donnerstag) lautet der
   Text „Heute 08:00 – 11:00 Uhr · 14:00 – 15:00 Uhr". Mit nowrap ist die
   Pille dafür 302 px breit — bei 320 px bleiben ihr aber nur rund 272 px,
   selbst auf einer eigenen Zeile. Sie ragte deshalb 43 px über den Rand.
   Aufgefallen ist es erst am 10.08.2026 (einem Montag): Der letzte
   vollständige Prüflauf lief an einem Samstag, an dem „Heute geschlossen"
   kurz genug war. Wortlängen, die vom Wochentag abhängen, lassen sich mit
   einer festen Testbreite nicht ein für alle Mal abhaken. */
/* Kennzeichnung der Mitteilung samt Datum (Entwurf B, 18.10.2026). Das Datum
   steht IN der Pille, damit es als Datum der Mitteilung gelesen wird und nicht
   als Datum der Sprechzeit daneben. Vorher Inline-Stil im HTML und in main.js
   doppelt; jetzt eine Regel für beide Stellen. */
.mitteilung-kennung {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background-color: var(--bg-surface);
    border: 1px solid rgba(0, 156, 188, 0.15);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-text);
    max-width: 100%;
}

.heute-sprechzeit {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 12px;
    background-color: var(--bg-surface);
    border: 1px solid var(--tinte);
    border-radius: var(--radius-lg);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-text);
    max-width: 100%;
}

.heute-sprechzeit-text {
    overflow-wrap: break-word;
}
/* Die Zeiten als Block: ganz in die zweite Zeile statt mittendrin umbrechen.
   Ein Zeitfenster bleibt immer zusammen (sprechzeiten.js). */
.heute-zeiten { display: inline-block; max-width: 100%; }
.heute-fenster { white-space: nowrap; }

.heute-sprechzeit svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Wenn heute geschlossen ist, keine falsche Erwartung wecken */
.heute-sprechzeit.geschlossen {
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* Trennlinie, die im Adminbereich in Mitteilungen eingefügt werden kann */
.news-body hr,
.blog-item-content-wrapper hr,
.news-container hr {
    border: none;
    border-top: 1px solid var(--tinte-stark);
    margin: 14px 0;
}

/* DAS SCHLOSS IN DER FUSSZEILE IST WEG (18.10.2026).
   --------------------------------------------------------------------------
   Hier standen die Regeln fuer .admin-lock: ein alleinstehendes Schloss, das
   auf jeder Seite in die Fusszeile fuehrte. Es war kein Schutz, sondern ein
   Wegweiser - es zeigte jedem Besucher, wo die Verwaltung der Seite sitzt.
   Die Praxis erreicht /admin.html jetzt ueber ein Lesezeichen.

   Die Regeln sind mit entfernt und nicht nur verwaist stehen geblieben: Eine
   CSS-Regel fuer eine Klasse, die es nicht mehr gibt, faellt niemandem auf
   (Falle 17), und beim naechsten Umbau raetselt jemand, wofuer sie war. */

/* Contact / Call out Banner */
.contact-banner {
    background-color: var(--banner-flaeche);
    color: var(--banner-text);
    padding: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 64px;
    box-shadow: var(--shadow-lg);
}

.contact-banner-content h2 {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.contact-banner-content p {
    color: var(--banner-text-leise);
}

.phone-link {
    font-size: 2rem;
    color: var(--banner-akzent);
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Footer styling */
footer {
    background-color: var(--primary-light);
    color: var(--text-muted);
    padding: 32px 0;
    border-top: 1px solid var(--tinte-fein);
    font-size: 0.9rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.footer-links a {
    color: var(--primary-text);
    text-decoration: none;
    font-weight: 600;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap; /* Prevent line breaks inside individual links */
}

/* Derselbe Farbton wie die Hervorhebung des heutigen Tags bei den
   Sprechzeiten (.hours-row.heute) statt der bisherigen Unterstreichung –
   auf Wunsch, damit „hier wird gerade etwas hervorgehoben" überall gleich
   aussieht. --tinte-flaeche ist kräftiger als --primary-light und hebt sich
   deshalb auch von der eigenen Fläche der Fußzeile ab. Padding/negativer
   Rand oben: ohne sie hätte die Fläche den Text eng umschlossen, ohne
   Luft – wie bei .hours-row.heute, die aus demselben Grund mit negativem
   Rand arbeitet. */
.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--primary-hover);
    background-color: var(--tinte-flaeche);
}

/* Base Nav Icon and Responsive Grid Utilities */
.hidden {
    display: none !important;
}

.nav-icon {
    display: block;
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
}

.responsive-two-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* --- Mitteilungsarchiv: Jahresgruppen & Nachladen -------------------------- */

.archive-year {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-text);
    letter-spacing: 0.06em;
    margin: 28px 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary-light);
}

.archive-year:first-child {
    margin-top: 0;
}

.all-news-container .blog-item {
    margin-bottom: 12px;
}

.archive-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
}

.archive-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- Prominente Mitteilung: Textbegrenzung --------------------------------- */

/* Seit v1.53.1 (Wunsch 21.10.2026): drei Zeilen, dann „mehr anzeigen“ — nur
   auf der Startseite (das Archiv auf Aktuelles klappt eigene Einträge auf).
   Vorher etwa sechs Zeilen (9.6em). 3lh = drei Zeilen der tatsächlichen
   Zeilenhöhe, auch am Telefon (dort 1,5 statt 1,6); 4.8em ist der Rückfall
   für Browser ohne lh. + 12px = ein Absatzabstand: Sonst frisst der Abstand
   nach der Anrede („Liebe Patientinnen und Patienten,“) fast eine Zeile. */
.news-clamped {
    max-height: calc(4.8em + 12px);
    max-height: calc(3lh + 12px);
    overflow: hidden;
    position: relative;
}

.news-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* nur die letzte der drei Zeilen blasst aus */
    height: 1.6em;
    height: 1lh;
    background: linear-gradient(to bottom, transparent, var(--primary-light));
    pointer-events: none;
}

.news-more-toggle {
    margin-top: 10px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-text);
    cursor: pointer;
    align-items: center;
    gap: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.news-more-toggle:hover {
    color: var(--primary-hover);
}

/* Die Stile für Marker und Kartenhinweis liegen in karte.css – sie werden von
   beiden Fassungen der Website genutzt. */

/* Mobile & Tablet Responsiveness */
@media (max-width: 992px) {
    .grid-three {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    /* Anfahrtsskizze: map beside the info points on desktop, stacked below it here */
    .map-card {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    /* 1. Global Font Size Reductions (Texts: 13-14px, Headings: max 14-15px)
       Fester Pixelwert mit !important – die Wurzelgröße greift hier nicht
       durch. Bewusst bei 13,5 px belassen, obwohl die Grundschrift am
       Bildschirm auf 15 px gesenkt wurde: Am Handy wird näher gehalten, und
       für ältere Augen ist weniger hier nicht mehr zumutbar. Wer größer
       braucht, nutzt den Schriftgrößen-Umschalter oben. */
    body, p, li, td, th, span, label, input, textarea, select,
    .news-body, .card p, .external-card-info p, .hours-row, .footer-content p, .back-to-site {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    h1, h2, h3, h4, h5, h6, 
    .hero h1, .hero h2, .news-title, .card h3, .contact-banner-content h2, 
    .external-card-info h4, .brand-title, #form-heading, .privacy-box h1 {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    /* 2. Responsive Grids & Spacers */
    .responsive-two-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .grid-three {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .card {
        padding: 16px !important;
    }

    .card-icon {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 10px !important;
    }

    .card-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* 3. Hero layout compression */
    .hero {
        flex-direction: column;
        padding: 24px 16px !important;
        margin: 12px 0 !important;
        text-align: center;
    }
    .hero-content {
        padding: 0;
    }
    .hero p {
        margin: 0 auto 16px auto !important;
    }
    .hero-buttons {
        flex-direction: column;
        justify-content: center;
        gap: 10px !important;
        width: 100%;
    }
    .btn {
        width: 100%;
        padding: 10px 16px !important;
        font-size: 13.5px !important;
    }

    /* 4. Single-Row Tile Menu Navigation with Scroll */
    .nav-bar {
        flex-direction: column;
        height: auto;
        padding: 10px 8px !important;
        gap: 10px;
    }
    
    /* Praxisname NEBEN dem Logo statt darunter (Wunsch 19.10.2026): spart
       am Telefon gut 50 px Kopfhoehe. Rechts bleibt Platz fuer die beiden
       Ansichtssymbole, die oben rechts schweben. */
    .logo {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 10px !important;
        width: 100% !important;
        padding-right: 84px;
        box-sizing: border-box;
    }

    .logo-img {
        height: 46px !important; /* Auf dem Handy kleiner, damit der Kopf nicht dominiert */
        flex: none;
    }
    .logo-text-container {
        align-items: flex-start !important;
        text-align: left !important;
        min-width: 0;
    }
    .logo-title {
        font-size: 0.92rem !important;
        text-align: left !important;
        line-height: 1.2 !important;
    }
    .logo-subtitle {
        font-size: 0.78rem !important;
        text-align: left !important;
    }

    .map-card {
        padding: 12px !important;
    }
    .map-details-grid {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 12px !important;
    }

    nav {
        width: 100%;
        overflow: hidden;
        padding: 0 4px;
    }

    /* ZWEI ZEILEN STATT ABGESCHNITTENER WÖRTER.
       ----------------------------------------------------------------------
       Sechs Reiter nebeneinander ergaben bei 375 px je 54 px. Nachgemessen
       brauchte „Leistungen" 62 px und „Aktuelles" 56 — beide wurden hart
       beschnitten. Das danebenstehende `text-overflow: ellipsis` half nicht:
       Das <a> ist ein Flex-Container, und dort greift die Regel nicht, es gab
       also nicht einmal Auslassungspunkte.

       Statt die Schrift weiter zu verkleinern (sie stand schon auf 9,5 px)
       brechen die Reiter jetzt in zwei Zeilen zu dritt um. Bei 375 px sind
       das rund 111 px je Reiter — genug für das längste Wort mit Reserve,
       und die Schrift darf zurück auf ein lesbares Maß. */
    .nav-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px !important;
        width: 100% !important;
        background-color: var(--flaeche-gedaempft) !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid var(--border-color) !important;
        justify-content: space-between !important;
    }

    .nav-links::-webkit-scrollbar {
        display: none; /* Chrome/Safari hide scrollbar */
    }

    .nav-links li {
        /* 30 % als Grundmaß ergibt drei Reiter je Zeile; sie wachsen dann auf
           die tatsächlich verfügbare Breite. `flex: 1` allein hätte alle sechs
           weiter in eine Zeile gezwängt. */
        flex: 1 1 30% !important;
        list-style: none !important;
        min-width: 0 !important;
    }

    .nav-links a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 0 !important; /* Fix overlapping by overriding desktop min-width */
        height: 48px !important;
        padding: 4px 2px !important;
        border: 1px solid transparent !important;
        background-color: transparent !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        color: var(--text-muted) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-links a.active {
        color: var(--primary-text) !important;
        background-color: var(--bg-surface) !important;
        border: 1px solid var(--tinte-fein) !important;
        border-bottom: 3px solid var(--primary) !important; /* Elegant bottom colored accent */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        border-radius: 8px !important;
    }

    .nav-links a.active .nav-icon {
        color: var(--primary-text) !important; /* Fix invisible active icon on mobile */
    }

    .nav-links a:hover {
        color: var(--primary-text) !important;
    }

    .nav-icon {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        color: inherit !important; /* Ensure icon color matches parent state */
    }

    /* 5. Mobile Tables to Card-like Tiles Conversion */
    .news-table, .news-table thead, .news-table tbody, .news-table tr, .news-table th, .news-table td {
        display: block !important;
        width: 100% !important;
    }
    .news-table thead {
        display: none !important; /* Hide columns titles on mobile */
    }
    .news-table tr {
        background-color: var(--bg-surface) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        box-shadow: var(--shadow-sm) !important;
    }
    .news-table td {
        padding: 8px 0 !important;
        border-bottom: 1px dashed var(--border-color) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
    }
    .news-table td:last-child {
        border-bottom: none !important;
        padding-top: 10px !important;
        justify-content: flex-end !important;
        gap: 12px !important;
    }
    .news-table td::before {
        content: attr(data-label);
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        float: left;
        text-align: left;
        font-size: 11.5px !important;
    }

    /* Footer styling */
    .footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* External Links Grid */
    .external-links-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .external-card {
        padding: 10px !important;
        gap: 8px !important;
    }
    .external-card-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    .five-tiles-container {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* Wichtige Links & Online Services - 5 Tiles Side-by-side */
.five-tiles-container {
    display: flex;
    gap: 16px;
    width: 100%;
}

.five-tile-card {
    flex: 1;
    min-width: 0;
}

.five-tile-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Expandable Card Details Toggle */
.card-details-expanded {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    margin-top: 0;
    border-top: 1px dashed var(--border-color);
    padding-top: 0;
}

.card-details-expanded.expanded {
    max-height: 2000px; /* high enough to fit the detailed text and images */
    opacity: 1;
    margin-top: 12px;
    padding-top: 12px;
}

.toggle-more-btn {
    background: none;
    border: none;
    color: var(--primary-text);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, transform 0.2s;
}

.toggle-more-btn:hover {
    color: var(--primary-hover);
}

.toggle-more-btn svg {
    transition: transform 0.3s ease;
}

.toggle-more-btn.active svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   Hero & Universal Interactive Button Hover States
   ========================================================================== */
.btn-booking, .btn-video {
    background-color: var(--primary) !important;
    color: var(--auf-primaer) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 4px 6px var(--tinte-fein) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-booking:hover, .btn-video:hover {
    background-color: transparent !important;
    color: var(--primary-text) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 6px 12px rgba(0, 156, 188, 0.12) !important;
    transform: translateY(-2px) !important;
}

.btn-contact {
    background-color: transparent !important;
    color: var(--secondary) !important;
    border: 2px solid var(--primary) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-contact:hover {
    background-color: transparent !important;
    color: var(--primary-text) !important;
    border: 2px solid var(--primary) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   Dunkles Farbschema
   --------------------------------------------------------------------------
   Gesetzt wird das Attribut von ansicht.js, noch bevor der Browser zum ersten
   Mal zeichnet. Es genügt, die Variablen zu tauschen: Die Regeln oben und auch
   die Inline-Angaben in den Seiten greifen ausschließlich darauf zu — das war
   beim Bau dieser Fassung ohnehin die Regel und zahlt sich hier aus.

   Kontraste gegen die Seitenfläche #10151a:
   --secondary  #e6ebef → 14,2:1   (Fließtext, Überschriften)
   --text-muted #a4b0b9 →  7,4:1
   --primary    #2ab4d6 →  7,1:1   (Links)
   Dunkle Schrift #07171c auf --primary → 6,9:1 (Schaltflächen)
   ========================================================================== */

html[data-farbschema="dunkel"] {
    --primary: #2ab4d6;
    --primary-hover: #66d3ec;
    /* Auf dunklem Grund ist der aufgehellte Ton bereits als Schrift lesbar. */
    --primary-text: #2ab4d6;
    --primary-light: #12323b;
    --secondary: #e6ebef;
    --text-muted: #a4b0b9;
    --bg-base: #10151a;
    --bg-surface: #1a2128;
    --border-color: #303a42;

    /* Der aufgehellte Türkiston trägt keine weiße Beschriftung mehr. */
    --auf-primaer: #07171c;

    --hero-von: #12292f;
    --hero-bis: #143840;
    --hero-split-von: #12262d;
    --hero-split-bis: #143741;
    --flaeche-gedaempft: #1a2128;

    /* Das Kontaktbanner war schon hell/dunkel gedacht und bleibt dunkel. */
    --banner-flaeche: #0d2027;
    --banner-text-leise: #9fb0ba;
    --banner-akzent: #bfeaf5;

    --meldung-flaeche: #33240a;
    --meldung-linie: #7a5a12;
    --meldung-marke-flaeche: #4a3410;
    --meldung-marke-text: #f7d998;

    --warn-flaeche: #33240a;
    --warn-linie: #6b5011;
    --warn-text: #f7d998;
    --stopp-flaeche: #3a1416;
    --stopp-kante: #ef4444;
    --stopp-text: #ffc9c9;

    --zugang-text: #a8dcf5;
    --zugang-flaeche: #10262f;
    --zugang-kante: #38a9d8;

    --tinte-stark: rgba(90, 205, 232, 0.35);
    --tinte: rgba(90, 205, 232, 0.3);
    --tinte-fein: rgba(90, 205, 232, 0.2);
    --tinte-flaeche: rgba(90, 205, 232, 0.12);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

/* Fotos wirken auf dunklem Grund überstrahlt. */
html[data-farbschema="dunkel"] .card img,
html[data-farbschema="dunkel"] .hero-photo img,
html[data-farbschema="dunkel"] .photo-placeholder img,
html[data-farbschema="dunkel"] .map-card img {
    filter: brightness(0.92);
}

/* Die Schaltflächen kehren ihre Farben beim Überfahren um: Fläche wird
   durchsichtig, die Schrift nimmt den Türkiston an. Auf dunklem Grund muss
   dann wieder der helle Ton greifen, nicht die dunkle Beschriftung. */
html[data-farbschema="dunkel"] .btn-booking:hover,
html[data-farbschema="dunkel"] .btn-video:hover {
    color: var(--primary) !important;
}

/* Fremde Logos (Krankenkassen, Studienpartner) sind für hellen Grund gezeichnet
   und stehen in den Kacheln auf eigener weißer Fläche. */
html[data-farbschema="dunkel"] .external-card-icon {
    background-color: #ffffff;
}

/* Meldungstexte kommen aus dem Verwaltungsbereich und tragen mitunter feste
   Farben im Text – der Editor übernimmt sie beim Einfügen aus Word. Auf
   dunklem Grund wäre das nahezu unlesbar; dort gilt die Farbe der Umgebung. */
html[data-farbschema="dunkel"] .news-body [style*="color"],
html[data-farbschema="dunkel"] .news-container [style*="color"],
html[data-farbschema="dunkel"] .blog-item-content-wrapper [style*="color"],
html[data-farbschema="dunkel"] .news-body [class*="ql-color"],
html[data-farbschema="dunkel"] .news-container [class*="ql-color"],
html[data-farbschema="dunkel"] .blog-item-content-wrapper [class*="ql-color"] {
    color: inherit !important;
}

/* Hinweis zur Barrierefreiheit auf der Kontaktkarte. Stand als Inline-Stil
   in home.html und liess sich deshalb weder umschalten noch nachbessern. */
.hinweis-zugang {
    margin-top: 16px;
    padding: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--zugang-text);
    background-color: var(--zugang-flaeche);
    border-left: 3px solid var(--zugang-kante);
    border-radius: 4px;
}

/* ==========================================================================
   Zwei abgestimmte Farben für Meldungen
   --------------------------------------------------------------------------
   Gegenstück zu den Regeln, die bis zum 18.10.2026 in style-alt.css standen
   (abgewählte Fassung, siehe doku/abgewaehlte-fassung.md). In news.json steht nur die
   Bedeutung, die Farbe kommt von hier — deshalb stimmt dieselbe Meldung in
   beiden Fassungen und in beiden Farbschemata.
   ========================================================================== */

.praxis-text-akzent  { color: var(--primary-text); font-weight: 600; }
.praxis-text-wichtig { color: var(--stopp-text); font-weight: 600; }

.praxis-marker-akzent,
.praxis-marker-wichtig {
    padding: 1px 5px;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Dunkles Türkis mit heller Schrift, seit v1.53.5. Vorher hellblau hinterlegt —
   auf dem ebenso hellen Grund der Mitteilung kaum zu sehen. Die beiden
   Variablen tauschen im dunklen Farbschema selbst die Rollen (helle Fläche,
   dunkle Schrift); Kontrast in beiden über 5:1. */
.praxis-marker-akzent {
    background-color: var(--primary-text);
    color: var(--primary-light);
    font-weight: 600;
}

/* Nicht --warn-flaeche: Die hervorgehobene Meldung hat selbst einen
   bernsteinfarbenen Grund, die Hinterlegung wäre darauf unsichtbar. Der
   kräftigere Ton der Meldungsmarke hebt sich ab. */
.praxis-marker-wichtig { background-color: var(--meldung-marke-flaeche); }

html[data-farbschema="dunkel"] .news-body .praxis-text-akzent,
html[data-farbschema="dunkel"] .news-container .praxis-text-akzent,
html[data-farbschema="dunkel"] .blog-item-content-wrapper .praxis-text-akzent {
    color: var(--primary-text) !important;
}

html[data-farbschema="dunkel"] .news-body .praxis-text-wichtig,
html[data-farbschema="dunkel"] .news-container .praxis-text-wichtig,
html[data-farbschema="dunkel"] .blog-item-content-wrapper .praxis-text-wichtig {
    color: var(--stopp-text) !important;
}

/* --- Studienkacheln -------------------------------------------------------
   Seit dem 18.10.2026 kommen sie aus studien.json (studien.js) statt fest aus
   dem Quelltext. Die Werte hier sind dieselben, die vorher als Inline-Stil an
   den beiden Kacheln standen - nur einmal statt je Kachel, damit eine neue
   Studie nicht anders aussieht als die alten.

   Jede Zeile einer Kachel entsteht erst, wenn ihr Feld gefuellt ist. Es gibt
   hier deshalb bewusst keine Regel fuer "leer" - ein leeres Feld kommt gar
   nicht erst ins Dokument. */

.studien-kachel {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

/* Die Indikation als kleine Kennzeichnung ueber dem Kuerzel. Dieselbe Paarung
   wie bei den Meldungen: heller Markenton als Flaeche, der dunklere als
   Schrift. Nicht der Markenton selbst - weisse oder dunkle Schrift darauf
   reicht bei dieser Groesse nicht (Uebergabe, Abschnitt 4). */
.studien-marke {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 9999px;
    background-color: var(--primary-light);
    color: var(--primary-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.studien-titel {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 8px;
}

.studien-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Zeitraum und die freien Angaben. Kleiner als die Beschreibung, aber nicht
   blasser - sie sind Angaben, keine Fussnoten. */
.studien-angabe {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 10px 0 0;
}

.studien-angabe-name {
    font-weight: 700;
    color: var(--secondary);
}

.studien-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-text);
}

/* --- Logos der Service-Kacheln -------------------------------------------
   Ein Mass fuer alle fuenf, seit die echten Logos darin stehen (18.10.2026).
   Vorher trug jede Kachel ihre eigene Breite im Stilattribut (56, 72, 120),
   weil die nachgezeichneten SVG jeweils passend gebaut waren. Echte Logos
   haben sehr verschiedene Seitenverhaeltnisse - amsel ist mit 516 zu 122
   viermal so breit wie hoch, dPV knapp anderthalbmal.

   Feste Hoehe, begrenzte Breite, object-fit: contain: Damit stehen die
   Ueberschriften aller fuenf Kacheln auf einer Linie, ohne dass ein Logo
   verzerrt oder auf Briefmarkengroesse schrumpft.

   width/height bleiben als Attribute am Bild stehen (gemessen, nicht
   geraten): Daraus rechnet der Browser die Flaeche vorab aus, sonst springt
   das Layout beim Nachladen. Kein width: auto im Stil - das ueberschreibt die
   Attribute, und solange loading="lazy" greift, misst das Bild dann 0 x 0. */

.tile-logo-box {
    height: 56px;
    width: 100%;
    max-width: 140px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Dieselbe Lage wie bei .external-card-icon, nur eine Kachelreihe weiter:
   Die echten Logos der Fachgesellschaften sind fuer weissen Grund gezeichnet.
   Auf der dunklen Kachel verschwand "Deutsche Hirnstiftung" (dunkelblau) fast
   vollstaendig, und der Untertitel von amsel war kaum noch zu lesen -
   nachgesehen, nicht vermutet. Sie bekommen deshalb im Dunkelmodus ihre
   eigene helle Flaeche, so wie es die Organisationen selbst vorsehen.

   Nicht per filter: invert() aufhellen: Das verfaelscht Markenfarben, und ein
   fremdes Logo in falscher Farbe ist schlimmer als eines auf weissem Grund. */
html[data-farbschema="dunkel"] .tile-logo-box {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 4px 8px;
}

/* Sehr schmale Telefone (bis 360 px): etwas kleiner, damit der Praxisname
   neben dem Logo in zwei statt drei Zeilen passt. Steht bewusst am Ende und
   als eigener Block - mitten im Telefon-Block hatte er dessen restliche
   Regeln auf 360 px beschraenkt (Pruefauf 19.10.2026, Fusszeile bei 375 px). */
@media (max-width: 360px) {
    .logo-img { height: 38px !important; }
    .logo-title { font-size: 0.84rem !important; }
    .logo-subtitle { font-size: 0.72rem !important; }
}

/* Kopf am Telefon: Praxisname EINzeilig, darunter der Name der Aerztin -
   zusammen zwei Zeilen; die beiden Ansichtssymbole bleiben oben rechts
   daneben (Wuensche 19.10.2026). Dafuer ist der Name klein und das Logo
   36 px hoch.
   Rechnung: "Praxis fuer Neurologie in Crailsheim" ist rund 16,6-mal so breit
   wie die Schriftgroesse. Neben Logo (74), Abstaenden und Symbolen (94) bleiben
   100vw - 186 px; abgezogen werden 206 px, damit auch eine Bildlaufleiste
   Platz hat (100vw zaehlt sie mit, Falle 23). Ab 361 px; darunter darf der
   Name umbrechen, sonst wuerde er unleserlich klein.
   Nur bei normaler Schriftstufe - A+ und A++ sollen groesser werden und
   duerfen dann umbrechen (data-schrift aus ansicht.js). */
@media (min-width: 361px) and (max-width: 768px) {
    html:not([data-schrift="gross"]):not([data-schrift="sehr"]) .logo-img { height: 36px !important; }
    html:not([data-schrift="gross"]):not([data-schrift="sehr"]) .logo-title {
        white-space: nowrap;
        font-size: clamp(10px, calc((100vw - 206px) / 16.6), 14px) !important;
    }
    html:not([data-schrift="gross"]):not([data-schrift="sehr"]) .logo-subtitle {
        font-size: clamp(10px, calc((100vw - 206px) / 16.6 * 0.95), 13px) !important;
    }
}

/* ==========================================================================
   Online-Rezeption (arzt-direkt) — eigener Platzhalter, seit v1.52.0
   --------------------------------------------------------------------------
   online-rezeption.js setzt diesen Knopf unten rechts ein. arzt-direkt wird
   erst beim Klick geladen; danach tritt der Knopf des Widgets an genau diese
   Stelle (fixed, 20px vom Rand, Radius 24px, mindestens 64px hoch — Maße aus
   dem Widget übernommen, damit der Wechsel nicht springt).
   ========================================================================== */
#orz-platzhalter {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 8000;            /* wie das Widget; unter dem Aktualisieren-Streifen (9999) */
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    max-width: calc(100vw - 40px);
    padding: 12px 22px 12px 18px;
    border: none;
    border-radius: 24px;
    background-color: var(--primary);
    color: var(--auf-primaer);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
#orz-platzhalter svg { width: 30px; height: 30px; flex: none; }
#orz-platzhalter .orz-titel { display: flex; flex-direction: column; line-height: 1.3; }
#orz-platzhalter .orz-haupt { font-size: 0.95rem; font-weight: 700; }
#orz-platzhalter .orz-unter { font-size: 0.8rem; }
#orz-platzhalter:hover { transform: translateY(-2px); }
#orz-platzhalter:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }
#orz-platzhalter[aria-busy="true"] { cursor: progress; }

/* Damit der schwebende Knopf am Seitenende nichts verdeckt: Platz unter der
   Fußzeile, nur auf Seiten, die ihn haben. */
body:has(#orz-platzhalter) footer,
body:has(arzt-direkt-online-rezeption) footer {
    padding-bottom: 104px;
}

@media (max-width: 599px) {
    #orz-platzhalter { padding: 12px 16px; }   /* wie das Widget unter 600px */
}

/* ==========================================================================
   Kartenkopf: Symbol links, Überschrift rechts daneben — seit v1.52.1
   --------------------------------------------------------------------------
   Gewünscht am 20.10.2026 für Allgemein, Krankheitsbilder,
   Botulinumtoxin-Therapie, Praxis-Sprechzeiten und Kontakt & Anschrift
   (die fünf Karten mit .card-icon). Vorher stand die Überschrift unter dem
   Symbol und kostete eine ganze Zeile. !important, weil die Überschriften
   ihren Abstand inline tragen und der Telefon-Block oben .card-icon mit
   !important setzt.
   ========================================================================== */
.card-kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.card-kopf .card-icon {
    flex: none;
    margin-bottom: 0 !important;
}
.card-kopf > h3 {
    margin: 0 !important;
    min-width: 0;
    overflow-wrap: break-word;
}

@media (max-width: 599px) {
    .card-kopf { gap: 12px; margin-bottom: 10px; }
}

/* Mehrspaltig (über 768px) bricht „Botulinumtoxin-Therapie“ am Bindestrich
   in zwei Zeilen. Damit die Texte nebeneinanderstehender Karten trotzdem auf
   einer Höhe beginnen, haben dort alle Köpfe die Höhe von zwei Zeilen
   (2 × 1,25rem × 1,2 ≈ 60px, gemessen bei 1280px). */
@media (min-width: 769px) {
    .grid-three .card-kopf { min-height: 60px; }
}

/* ==========================================================================
   Kompakter Kopf und Begrüßung — seit v1.53.0 (Wünsche 21.10.2026)
   --------------------------------------------------------------------------
   Am Telefon brauchte der Kopf 177 px (Logozeile + Reiter in zwei Reihen) und
   blieb beim Scrollen stehen; „Online-Rezeption“ begann erst bei 612 px, die
   Mitteilungen bei 909 px. Aus zwei Entwürfen gewählt (A):
   - sechs Reiter in EINER Reihe, „Start“ nur als Haus, Beschriftung nicht
     fett und 10 px (nur der aktive Reiter halbfett); unter 360 px nur Symbole
   - beim Scrollen nach unten fährt die Logozeile weg, nach oben sofort zurück
     (kopfleiste.js; per transform, damit die Seite nicht springt)
   - Begrüßung: kleines Foto links, rechts daneben Praxisname (die h1, klein)
     und Name der Ärztin; Knöpfe nebeneinander
   Am Desktop nur die Begrüßung kompakter (h1 einzeilig, Foto 230 px).
   Gemessen am Entwurf bei 375 px: Kopf 111 px (eingefahren ca. 56),
   Online-Rezeption ab 381 px, Mitteilungen ab 597 px.
   ========================================================================== */
@media (max-width: 768px) {
    /* Logozeile flacher */
    .nav-bar { min-height: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; gap: 6px !important; }

    /* Logozeile fährt weg (kopfleiste.js setzt .kopf-weg und --kopf-versatz) */
    header { transition: transform .22s ease; }
    body.kopf-weg header { transform: translateY(calc(-1 * var(--kopf-versatz, 0px))); }

    /* Sechs Reiter in einer Reihe */
    .nav-links { flex-wrap: nowrap !important; gap: 2px !important; padding: 3px !important; }
    .nav-links li { flex: 1 1 auto !important; }
    .nav-links li:first-child { flex: 0 0 40px !important; }
    .nav-links a {
        height: 44px !important;
        padding: 3px 3px !important;
        gap: 3px !important;
        font-size: 10px !important;
        font-weight: 400 !important;
    }
    .nav-links a.active { font-weight: 600 !important; }
    /* „Start“ nur als Haus; das Wort bleibt für Vorleseprogramme erhalten */
    .nav-links li:first-child span {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }

    /* Begrüßung: Foto links, Praxisname und Ärztin rechts daneben */
    .hero-split-container {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        padding: 16px !important;
        gap: 12px 14px !important;
        margin: 12px 0 !important;
        text-align: left !important;
    }
    .hero-split-container .hero-content > * { text-align: left !important; }
    .hero-photo {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        justify-self: start !important;
        align-self: center !important;
    }
    .hero-split-container .photo-placeholder {
        width: 76px !important;
        border-width: 3px !important;
    }
    .hero-split-container .hero-content > h1 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end;
        margin: 0 !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: var(--text-muted) !important;
    }
    .hero-split-container .hero-content > h2 {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start;
        margin: 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }
    .hero-split-container .hero-content > p {
        margin: 0 !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }
    .hero-split-container .hero-buttons { flex-direction: row !important; gap: 8px !important; }
    .hero-split-container .hero-buttons .btn { flex: 1 1 0; padding: 9px 8px !important; }
}

/* Nur Symbole, wenn die Wörter nicht in ihre Kacheln passen: kopfleiste.js
   misst das und setzt .nur-symbole (Wunsch 21.10.2026). Unter 360 px gilt
   es auch ohne JavaScript — dort passt es nachgemessen nicht mehr. */
@media (max-width: 768px) {
    .nav-links.nur-symbole a span {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .nav-links.nur-symbole a { height: 38px !important; }
    .nav-links.nur-symbole a .nav-icon { width: 20px !important; height: 20px !important; }
    .nav-links.nur-symbole li { flex: 1 1 0 !important; }
}
@media (max-width: 359px) {
    /* Knöpfe nebeneinander: ohne Symbol passt „Online-Rezeption“ in eine
       Zeile (bei 320 px mit Symbol zweizeilig, gemessen) */
    .hero-split-container .hero-buttons .btn svg { display: none !important; }
    .hero-split-container .hero-buttons .btn { padding: 9px 6px !important; white-space: nowrap; }
    .nav-links a span {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .nav-links a { height: 38px !important; }
}

/* Desktop: Begrüßung kompakter */
@media (min-width: 993px) {
    .hero-split-container { padding: 32px 48px !important; gap: 24px !important; margin: 16px 0 !important; }
    .hero-content h1 { font-size: 2rem !important; line-height: 1.25 !important; margin-bottom: 4px !important; }
    .hero-content h2 { font-size: 1.3rem !important; margin-bottom: 12px !important; }
    .hero-buttons { margin-top: 20px !important; }
    .hero-split-container .photo-placeholder { max-width: 230px !important; }
}

/* Fußzeile der hervorgehobenen Mitteilung (v1.53.2, Wunsch 21.10.2026):
   „mehr/weniger anzeigen“ links, „Eine weitere Mitteilung →“ rechtsbündig in
   derselben Zeile. Ist keins von beiden sichtbar, entfällt die Zeile. */
.mitteilung-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-top: 10px;
}
.mitteilung-fuss .news-more-toggle { margin-top: 0; }
.mitteilung-fuss #all-news-link-wrapper { margin-left: auto; }
.mitteilung-fuss:not(:has(> :not(.hidden))) { display: none; }

/* ==========================================================================
   Online-Rezeption an der rechten Inhaltskante — seit v1.53.3, neu in v1.53.4
   --------------------------------------------------------------------------
   Wunsch 21.10.2026: Auf sehr breiten Bildschirmen stand der schwebende Knopf
   ganz außen rechts und ging verloren. Jetzt schließt er rechtsbündig mit dem
   Inhalt ab (.app-container: höchstens 1200 px, 16 px Innenabstand) und
   bleibt beim Scrollen unten.

   Rechnung: rechte Inhaltskante = (Fensterbreite − 1200) / 2 + 16 px. 100%
   statt 100vw, weil sich bei position: fixed die Prozente aufs Fenster OHNE
   Bildlaufleiste beziehen (100vw zählt sie mit, Falle 23). --orz-rechts wird
   erst am Ort der Verwendung ausgerechnet, also dort, wo es fixed ist.

   Das Widget von arzt-direkt liegt im Shadow DOM. online-rezeption.js gibt
   dort Knopf und Fenster eine Regel mit, die „right“ aus --orz-rechts nimmt;
   die Eigenschaft erbt von diesen Wirtselementen hinein.
   NICHT WIEDER per transform/0×0-Rahmen lösen (so in v1.53.3): Das stauchte
   den zugeklappten Knopf und schob die Menüs ⋮ und Sprache aus dem Bild.
   Live gemessen bei 1920 px (21.10.2026, v1.53.4): Inhaltskante, Platzhalter,
   Knopf und Fenster rechts bei 1536 px; zugeklappt 274 × 64 px; beide Menüs
   direkt unter ihren Knöpfen.
   Erst ab 1241 px: darunter liegt die Kante ohnehin nah am Rand, und am
   Telefon füllt das aufgeklappte Widget den Bildschirm.
   ========================================================================== */
@media (min-width: 1241px) {
    #orz-platzhalter {
        right: max(20px, calc((100% - 1200px) / 2 + 16px));
    }
    arzt-direkt-online-rezeption,
    orz-widget-core {
        --orz-rechts: max(20px, calc((100% - 1200px) / 2 + 16px));
    }
}