@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/schriften/plus-jakarta-sans-400.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/schriften/plus-jakarta-sans-500.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/schriften/plus-jakarta-sans-600.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/schriften/plus-jakarta-sans-700.woff2") format("woff2");
}

:root {
    --pm-navy: #1a4a7a;
    --pm-navy-dunkel: #143a5f;
    --pm-blau: #1a80b6;
    --pm-link: #1a80b6;
    --pm-gold: #f0a500;
    --pm-text: #324657;
    --pm-gedaempft: #6b7280;
    --pm-rand: #e2e6ea;
    --pm-flaeche: #f4f6f8;
    --pm-weiss: #ffffff;
    --pm-radius: 3px;
    --pm-schatten: 0 1px 4px rgba(16, 34, 56, .12);
    --pm-breite: 1140px;
    --pm-schrift: "Plus Jakarta Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--pm-schrift);
    font-size: 16px;
    line-height: 1.6;
    color: var(--pm-text);
    background: var(--pm-weiss);
}

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

h1, h2, h3 {
    font-weight: 900;
    line-height: 1.4;
    margin: 0;
}

a {
    color: var(--pm-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--pm-gold);
    outline-offset: 2px;
}

.sprungmarke,
.skip-link {
    position: absolute;
    left: -9999px;
}

.sprungmarke:focus,
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 60;
    background: var(--pm-weiss);
    padding: .5rem 1rem;
    border: 2px solid var(--pm-navy);
}

.kopf {
    padding: 18px 15px 0;
}

.kopf-marke {
    display: flex;
    justify-content: center;
}

.kopf-marke img {
    height: 56px;
    width: auto;
}

.hauptnavigation {
    position: relative;
    max-width: var(--pm-breite);
    margin: 14px auto 0;
}

.navigation-schalter {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 42px;
    margin: 0 auto 14px;
    padding: 0 11px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
    cursor: pointer;
}

.navigation-schalter span:not(.sprungmarke) {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--pm-navy);
}

/* "Praxis eintragen" und Login stehen am Fuß des Klappmenüs — auf dem
   Desktop tragen sie die Kopfleiste und haben im Menü nichts verloren. */
.menue-aktionen {
    display: none;
}

.navigation-liste {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 40px;
    list-style: none;
    margin: 0;
    padding: 0 0 16px;
}

.navigation-liste > li {
    position: relative;
}

.navigation-liste > li > a {
    display: inline-block;
    padding: 6px 0;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.navigation-liste > li > a:hover {
    border-bottom-color: var(--pm-link);
    text-decoration: none;
}

.hat-untermenue > a::after {
    content: "▾";
    margin-left: 6px;
    font-size: .75em;
}

.untermenue {
    position: absolute;
    top: 100%;
    left: 0;

    /* Muss über der Bühne liegen (z-index 50), sonst schneidet das
       Bilderband der Startseite das aufgeklappte Menü ab. Gleicher Wert
       wie beim Mega-Menü, damit beide Klappmenüs sich gleich verhalten. */
    z-index: 60;
    display: none;
    min-width: 260px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
    box-shadow: 0 6px 18px rgba(16, 34, 56, .16);
}

.hat-untermenue:hover .untermenue,
.hat-untermenue:focus-within .untermenue {
    display: block;
}

.untermenue a {
    display: block;
    padding: 9px 18px;
    font-size: .9375rem;
}

.untermenue a:hover {
    background: var(--pm-flaeche);
    text-decoration: none;
}

/* Erster Eintrag des Untermenues: leicht abgesetzt, nicht beworben.
   Kein Farbfeld, keine Signalfarbe — der Punkt soll sich vom Rest abheben,
   ohne wie eine Anzeige zu wirken. Getragen wird die Unterscheidung von
   Symbol, Zweitzeile und der Trennlinie darunter. */

.untermenue-hervor {
    margin: 0 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pm-rand);
}

.untermenue-hervor > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    transition: background .15s ease;
}

.untermenue-hervor > a:hover {
    background: var(--pm-flaeche);
}

.untermenue-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease;
}

.untermenue-symbol svg {
    width: 14px;
    height: 14px;
}

.untermenue-hervor > a:hover .untermenue-symbol {
    color: var(--pm-weiss);
    background: var(--pm-navy);
}

.untermenue-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    text-align: left;
}

.untermenue-text strong {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pm-navy);
}

.untermenue-text > span {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--pm-gedaempft);
}

.anspruch {
    margin: 0;
    padding: 14px 15px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--pm-weiss);
    background: var(--pm-navy);
}

.buehne {
    position: relative;
    z-index: 50;
    min-height: 300px;
    display: grid;
    place-items: center;
    background-color: #dfe6ee;
    background-image: url("/img/Aerzte_Finden_2000x300.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.buehne-inhalt {
    position: relative;
    width: min(900px, calc(100% - 30px));
    padding: 30px 0;
}

.suchleiste {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: stretch;
    background: var(--pm-weiss);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(11, 32, 56, .3);
    overflow: hidden;
}

.suchleiste-feld {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
}

.suchleiste-feld + .suchleiste-feld {
    border-left: 1px solid var(--pm-rand);
}

.suchleiste-feld svg {
    flex: 0 0 auto;
    fill: var(--pm-navy);
}

.suchleiste input {
    width: 100%;
    border: 0;
    font: inherit;
    color: var(--pm-text);
    background: transparent;
}

.suchleiste input::placeholder {
    color: #8a929c;
}

.suchleiste button {
    padding: 16px 36px;
    font: inherit;
    font-weight: 500;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border: 0;
    cursor: pointer;
}

.suchleiste button:hover {
    background: var(--pm-navy-dunkel);
}

.band {
    position: relative;
    margin: 0;
    padding: 22px 20px 24px;
    overflow: hidden;
    text-align: center;
    color: var(--pm-weiss);
    background: linear-gradient(135deg, #17568f 0%, var(--pm-navy) 52%, #0c3462 100%);
}

/* Feines Punktraster statt einer glatten Fläche — sichtbar nur als Struktur,
   nicht als Muster. Liegt hinter dem Inhalt und fängt keine Klicks ab. */
.band::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .13) 1px, transparent 0);
    background-size: 24px 24px;
    opacity: .6;
    pointer-events: none;
}

.band > * {
    position: relative;
    z-index: 1;
}

.band h1,
.band h2 {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;

    /* Zwingend nötig: weiter unten setzt eine Regel für h1/h2 die Schriftfarbe
       auf Navy. Eine solche Regel schlägt die von .band vererbte weiße Farbe —
       ohne diese Zeile steht die Überschrift navy auf navy und ist unsichtbar. */
    color: var(--pm-weiss);
}

/* Goldener Strich unter der Überschrift — greift die Hausfarbe auf,
   ohne dass ein weiteres Farbfeld nötig wäre. */
.band h1::after,
.band h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 10px auto 0;
    background: var(--pm-gold);
    border-radius: 999px;
}

.band p {
    /* Zeilenlänge begrenzen, aber weit genug, dass die üblichen Unterzeilen
       einzeilig bleiben — ein Umbruch mitten im Satz kostet nur Höhe. */
    max-width: 92ch;
    margin: 10px auto 0;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

/* Zeichen über der Überschrift, nur wo eines gesetzt ist */
.band-zeichen {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    color: var(--pm-weiss);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
}

.band-zeichen svg {
    width: 21px;
    height: 21px;
}

@media (max-width: 700px) {
    .band {
        padding: 18px 15px 20px;
    }

    .band h1,
    .band h2 {
        font-size: 1.375rem;
    }

    .band p {
        font-size: .9375rem;
    }
}

.bandtitel {
    margin: 0;
    padding: 18px 15px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--pm-weiss);
    background: var(--pm-navy);
}

.bandtitel span {
    display: block;
    padding-top: 6px;
    font-size: 1.125rem;
    font-weight: 500;
}

.bandlink {
    display: block;
    max-width: var(--pm-breite);
    margin: 28px auto 22px;
    padding: 13px 15px;
    text-align: center;
    color: var(--pm-weiss);
    background: var(--pm-navy);
}

.bandlink:hover {
    background: var(--pm-navy-dunkel);
    text-decoration: none;
}

.raster {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--pm-breite);
    margin: 26px auto 42px;
    padding: 0 15px;
}

.raster-zwei {
    grid-template-columns: repeat(2, 1fr);
}

.raster-drei {
    grid-template-columns: repeat(3, 1fr);
}

.raster-sechs {
    grid-template-columns: repeat(6, 1fr);
}

.fach {
    display: block;
    background: var(--pm-weiss);
    box-shadow: var(--pm-schatten);
}

.fach:hover {
    text-decoration: none;
}

.fach:hover .fach-titel {
    color: var(--pm-navy);
}

.fach-bild {
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
    background: var(--pm-flaeche);
}

.fach-platzhalter {
    aspect-ratio: 3 / 2;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #dfe8f1, #f3f6f9);
    color: var(--pm-navy);
    font-size: 2.5rem;
    font-weight: 900;
}

.fach-titel {
    display: block;
    padding: 16px 12px;
    text-align: center;
    font-size: 1.25rem;
    color: var(--pm-link);
    background: var(--pm-flaeche);
}

.fach-anzahl {
    display: block;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.beitrag {
    display: flex;
    flex-direction: column;
    background: var(--pm-weiss);
    box-shadow: 0 2px 10px rgba(16, 34, 56, .14);
}

.beitrag-kopf {
    position: relative;
}

.beitrag-kopf img {
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
}

.beitrag-marke {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pm-weiss);
    background: rgba(30, 45, 62, .85);
    border-radius: 999px;
}

.beitrag-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
    flex: 1;
    padding: 18px;
}

.beitrag-text h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.35;
}

.beitrag-mehr {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pm-text);
}

.kastenliste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: var(--pm-breite);
    margin: 26px auto 42px;
    padding: 0 15px;
    list-style: none;
}

.kastenliste li {
    flex: 1 1 200px;
    max-width: calc(33% - 10px);
}

.kastenliste a {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 74px;
    padding: 12px 14px;
    text-align: center;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    box-shadow: 0 0 5px rgba(0, 0, 0, .08);
}

.kastenliste a:hover {
    border-color: var(--pm-navy);
    text-decoration: none;
}

/* ===== Servicekacheln auf der Startseite ====================== */

.dienstbereich {
    background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
    border-bottom: 1px solid var(--pm-rand);
}

.dienstbereich-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 30px 20px 40px;
}

.dienstkacheln {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dienstkacheln a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dienstkacheln a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 8px 22px rgba(16, 67, 120, .10);
    transform: translateY(-2px);
}

.dienstkachel-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 12px;
    transition: background .15s ease, color .15s ease;
}

.dienstkachel-symbol svg {
    width: 26px;
    height: 26px;
}

.dienstkacheln a:hover .dienstkachel-symbol {
    color: var(--pm-weiss);
    background: var(--pm-navy);
}

.dienstkachel-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dienstkachel-text strong {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);
}

.dienstkachel-text > span {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--pm-gedaempft);
}

.dienstkachel-pfeil {
    width: 18px;
    height: 18px;
    fill: #c3d2de;
    transition: fill .15s ease, transform .15s ease;
}

.dienstkacheln a:hover .dienstkachel-pfeil {
    fill: var(--pm-navy);
    transform: translateX(2px);
}

@media (max-width: 900px) {
    .dienstkacheln {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .dienstbereich-inhalt {
        padding: 22px 15px 30px;
    }

    .dienstkacheln {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .dienstkacheln a {
        padding: 13px 14px;
        gap: 12px;
        grid-template-columns: 42px minmax(0, 1fr) 18px;
    }

    .dienstkachel-symbol {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .dienstkachel-symbol svg {
        width: 23px;
        height: 23px;
    }
}

.arztkachel {
    text-align: center;
}

.arztkachel img,
.arztkachel .arzt-platzhalter {
    width: 160px;
    height: 200px;
    margin: 0 auto;
    object-fit: cover;
}

.arzt-platzhalter {
    display: grid;
    place-items: center;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    color: var(--pm-navy);
    font-size: 2rem;
    font-weight: 900;
}

.arztkachel h3 {
    margin: 14px 0 8px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.36;
}

.arztkachel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
}

.leer {
    padding: 36px 20px;
    text-align: center;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
}

.knopf {
    display: inline-block;
    padding: 12px 26px;
    font: inherit;
    font-weight: 500;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border: 0;
    border-radius: var(--pm-radius);
    cursor: pointer;
}

.knopf:hover {
    background: var(--pm-navy-dunkel);
    text-decoration: none;
}

.knopf-schlicht {
    color: var(--pm-link);
    background: transparent;
    border: 1px solid var(--pm-rand);
}

.knopf-schlicht:hover {
    background: var(--pm-flaeche);
}

.fuss {
    margin-top: 48px;
    color: #d7e2ee;
    background: var(--pm-navy-dunkel);
}

.partnerband {
    background: var(--pm-flaeche);
    border-top: 1px solid var(--pm-rand);
}

.partnerband-inhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 26px 15px;
}

.partnerband-inhalt p {
    flex: 1 1 380px;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--pm-text);
}

.partnerband-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 34px;
}

.partnerband-logos a {
    display: block;
    line-height: 0;
    opacity: .92;
    transition: opacity .15s ease-out;
}

.partnerband-logos a:hover {
    opacity: 1;
}

.partnerband-logos img {
    display: block;
    width: auto;
    height: 38px;
}

.partnerband-logos a:last-child img {
    height: 30px;
}

@media (max-width: 700px) {
    .partnerband-inhalt {
        gap: 18px;
        padding: 22px 15px;
    }

    .partnerband-logos {
        gap: 24px;
    }

    .partnerband-logos img {
        height: 30px;
    }

    .partnerband-logos a:last-child img {
        height: 24px;
    }
}

.fuss-raster {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 34px;
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 34px 15px 10px;
}

.fuss h2 {
    margin: 0 0 14px;
    font-size: 1.25rem;
    color: var(--pm-weiss);
}

.fuss p {
    margin: 0;
    font-size: .9375rem;
}

.fuss-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
}

.fuss-liste li {
    padding: 3px 0;
}

.fuss a {
    color: #d7e2ee;
}

.fuss-zeile {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 18px 15px 24px;
    font-size: .875rem;
}

.nach-oben {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 40;
    display: none;
    place-items: center;
    padding: 9px 11px;
    color: var(--pm-weiss);
    background: #285481;
    border: 0;
    cursor: pointer;
}

.nach-oben.sichtbar {
    display: grid;
}

.suchseite {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    max-width: var(--pm-breite);
    margin: 28px auto 48px;
    padding: 0 20px;
}

.filter {
    align-self: start;
    padding: 20px;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
}

.filter h2 {
    margin: 0 0 16px;
    font-size: 1.0625rem;
    color: var(--pm-navy);
}

.filter label {
    display: block;
    margin: 0 0 6px;
    font-size: .875rem;
    font-weight: 600;
}

.filter select,
.filter input {
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 16px;
    font: inherit;
    color: var(--pm-text);
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
}

.trefferzahl {
    margin: 0 0 18px;
    color: var(--pm-gedaempft);
}

.trefferliste {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.treffer {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    padding: 18px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.treffer:hover {
    border-color: #b9d1e3;
    box-shadow: 0 6px 20px rgba(16, 67, 120, .10);
    transform: translateY(-1px);
}

.treffer img,
.treffer .arzt-platzhalter {
    width: 96px;
    height: 96px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.treffer h2 {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.treffer h2 a {
    color: var(--pm-navy);
}

.treffer h2 a:hover {
    text-decoration: underline;
}

.treffer-fach {
    margin: 0 0 8px;
    font-size: .9375rem;
    color: var(--pm-text);
}

.treffer-adresse {
    margin: 0;
    color: var(--pm-gedaempft);
    font-size: .9375rem;
}

.marken {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.marke {
    padding: 4px 11px;
    font-size: .75rem;
    color: var(--pm-navy);
    background: #eaf1f8;
    border: 1px solid transparent;
    border-radius: 999px;
}

.blaettern {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 28px 0 0;
}

/* ===== Kopfband der Fachrichtungsseite ======================== */

.fachbanner {
    border-top: 1px solid var(--pm-rand);
    border-bottom: 1px solid var(--pm-rand);
    background: linear-gradient(180deg, #f2f7fb 0%, #fbfcfe 100%);
}

.fachbanner-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 16px 20px 22px;
}

.fachbanner-pfad {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 12px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.fachbanner-pfad a {
    color: var(--pm-gedaempft);
}

.fachbanner-pfad a:hover {
    color: var(--pm-navy);
}

.fachbanner-kopf {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.fachbanner-bild {
    flex: 0 0 auto;
    width: 116px;
    height: 88px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--pm-rand);
}

.fachbanner-text {
    flex: 1 1 320px;
    min-width: 0;
}

.fachbanner h1 {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pm-navy);
}

.fachbanner-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.fachbanner-zahlen li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 13px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
    background: var(--pm-weiss);
    border: 1px solid #d9e6f0;
    border-radius: 999px;
}

.fachbanner-zahlen strong {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.fachbanner .fachtext {
    margin: 18px 0 0;
    font-size: .9375rem;
}

.fachbanner .fachtext p:last-child {
    margin-bottom: 0;
}

/* ===== Kopfzeile ueber der Trefferliste ======================== */

.ergebniskopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--pm-rand);
}

.ergebniskopf h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.ergebniskopf-zusatz {
    font-size: .875rem;
    color: var(--pm-gedaempft);
}

@media (max-width: 700px) {
    .fachbanner-inhalt {
        padding: 12px 15px 18px;
    }

    .fachbanner-kopf {
        gap: 14px;
    }

    .fachbanner-bild {
        width: 72px;
        height: 58px;
    }

    .fachbanner h1 {
        font-size: 1.25rem;
    }
}

/* ===== Leistungsseiten fuer Aerzte ============================ */

.leistungsseite {
    max-width: var(--pm-breite);
    margin: 0 auto 56px;
    padding: 0 20px;
}

.leistungsmarke {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    color: var(--pm-navy);
    background: var(--pm-weiss);
    border: 1px solid #d9e6f0;
    border-radius: 16px;
}

.leistungsmarke svg {
    width: 32px;
    height: 32px;
}

.leistungs-unterzeile {
    margin: 8px 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pm-gedaempft);
}

.abschnittstitel {
    margin: 40px 0 18px;
    padding: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-navy);
    border-bottom: 2px solid var(--pm-rand);
}

.dienstkacheln-schlicht a {
    grid-template-columns: 48px minmax(0, 1fr);
}

.argumente {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.argumente li {
    padding: 20px 22px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-top: 3px solid var(--pm-gold);
    border-radius: 12px;
}

.argumente h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pm-navy);
}

.argumente p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--pm-text);
}

.agenturband {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin: 40px 0 0;
    padding: 26px 28px;
    background: linear-gradient(180deg, #f3f8fc 0%, #fbfcfe 100%);
    border: 1px solid #d9e6f0;
    border-radius: 14px;
}

.agenturband-text {
    flex: 1 1 420px;
    min-width: 0;
}

.agenturband h2 {
    margin: 0 0 10px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.agenturband p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
}

.agenturband-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px !important;
}

.agenturband-aktionen .knopf {
    padding: .6rem 1.2rem;
    font-size: .9375rem;
}

.agenturband-logo {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 20px;
}

.agenturband-logo img {
    display: block;
    width: 240px;
    height: auto;
}

@media (max-width: 760px) {
    .agenturband-logo {
        margin-left: 0;
        padding-left: 0;
    }

    .agenturband-logo img {
        width: 200px;
    }
}

.abschlussband {
    margin: 40px 0 0;
    padding: 34px 28px;
    text-align: center;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-radius: 14px;
}

.abschlussband h2 {
    margin: 0 0 10px;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pm-weiss);
}

.abschlussband p {
    max-width: 62ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
    color: #d7e2ee;
}

.abschlussband-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px !important;
}

.knopf-hell {
    color: var(--pm-navy);
    background: var(--pm-weiss);
}

.knopf-hell:hover {
    background: #e7f0f7;
}

/* Für dunkle Flächen — etwa das navyfarbene Abschlussband. Auf hellem
   Grund wäre er unsichtbar; dafür gibt es .knopf-umriss. */
.knopf-rand {
    color: var(--pm-weiss);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
}

/* Zurückhaltender Knopf auf hellem Grund */
.knopf-umriss {
    color: var(--pm-navy);
    background: transparent;
    border: 1px solid #b9d1e3;
}

.knopf-umriss:hover {
    color: var(--pm-navy);
    background: var(--pm-flaeche);
    border-color: var(--pm-navy);
}

.knopf-rand:hover {
    background: rgba(255, 255, 255, .12);
}

@media (max-width: 700px) {
    .leistungsseite {
        padding: 0 15px;
    }

    .leistungsmarke {
        width: 50px;
        height: 50px;
        border-radius: 13px;
    }

    .leistungsmarke svg {
        width: 26px;
        height: 26px;
    }

    .abschnittstitel {
        margin: 30px 0 14px;
        font-size: 1.125rem;
    }

    .agenturband,
    .abschlussband {
        padding: 22px 18px;
    }
}

/* --- Ablauf, Richtwerte, Referenzen -------------------------- */

.ablaufschritte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.ablaufschritte li {
    position: relative;
    padding: 22px 22px 20px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
}

.ablaufschritte li::before {
    counter-increment: schritt;
    content: counter(schritt);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 0 12px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-radius: 50%;
}

.ablaufschritte h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.ablaufschritte p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
}

.ablauf-hinweis {
    margin: 16px 0 0;
    font-size: .9375rem;
    color: var(--pm-gedaempft);
}

.preisliste {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    overflow: hidden;
}

.preisliste li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 8px 16px;
    padding: 14px 20px;
}

.preisliste li + li {
    border-top: 1px solid var(--pm-rand);
}

.preisliste-was {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pm-navy);
}

.preisliste-wert {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-navy);
    white-space: nowrap;
}

.preisliste-zusatz {
    min-width: 128px;
    font-size: .8125rem;
    text-align: right;
    color: var(--pm-gedaempft);
}

.preisliste-hinweis {
    margin: 14px 0 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--pm-gedaempft);
}

.referenzliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.referenzliste a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 15px 17px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-left: 3px solid var(--pm-navy);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.referenzliste a:hover {
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(16, 67, 120, .10);
    transform: translateY(-1px);
}

.referenzliste strong {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);
}

.referenzliste span {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--pm-gedaempft);
}

.referenzliste .referenz-domain {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pm-link);
}

.referenzliste .referenz-fach {
    margin-top: 6px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pm-navy);
}

.referenzliste a > span:last-child {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--pm-rand);
    font-size: .75rem;
}

@media (max-width: 560px) {
    .preisliste li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .preisliste-zusatz {
        grid-column: 1 / -1;
        min-width: 0;
        text-align: left;
    }
}

/* --- Fotogalerie ---------------------------------------------- */

.fotogalerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.fotogalerie figure {
    margin: 0;
}

.fotogalerie img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 10px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.fotogalerie figure:hover img {
    box-shadow: 0 10px 26px rgba(16, 67, 120, .16);
    transform: translateY(-2px);
}

.fotogalerie figcaption {
    margin: 7px 2px 0;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

@media (max-width: 620px) {
    .fotogalerie {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .fotogalerie figcaption {
        font-size: .75rem;
    }
}

.formular {
    max-width: 640px;
    margin: 32px auto 48px;
    padding: 0 20px;
}

.formular label {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
}

.formular input,
.formular textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 18px;
    font: inherit;
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
}

.hinweis {
    padding: 14px 16px;
    margin: 0 0 20px;
    background: #eaf4ec;
    border: 1px solid #bcdcc4;
    border-radius: var(--pm-radius);
}

.hinweis-fehler {
    background: #fdecec;
    border-color: #f1bcbc;
}

.honigtopf {
    position: absolute;
    left: -9999px;
}

@media (max-width: 1024px) {
    .raster {
        grid-template-columns: repeat(2, 1fr);
    }

    .suchseite,

    .fuss-raster {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .navigation-schalter {
        display: block;
    }

    .navigation-liste {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding-top: 16px;
    }

    .navigation-liste.offen {
        display: flex;
    }

    .anspruch {
        font-size: 1rem;
    }

    .suchleiste {
        grid-template-columns: 1fr;
        border-radius: var(--pm-radius);
    }

    .suchleiste-feld + .suchleiste-feld {
        border-left: 0;
        border-top: 1px solid var(--pm-rand);
    }

    .suchleiste button {
        width: 100%;
        padding: 14px;
    }

    .raster,
    .fuss-raster {
        grid-template-columns: 1fr;
    }

    .treffer {
        grid-template-columns: 72px 1fr;
    }

    .treffer img,
    .treffer .arzt-platzhalter {
        width: 72px;
        height: 72px;
    }
}

.fachkopf {
    max-width: var(--pm-breite);
    margin: 32px auto 0;
    padding: 0 20px;
}

.fachkopf h1 {
    margin: 0 0 14px;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pm-navy);
}

.fachtext {
    max-width: 72ch;
    font-size: 1rem;
    line-height: 1.7;
}

.fachtext-breit {
    max-width: none;
}

.fachtext p {
    margin: 0 0 18px;
}

.fachtext strong {
    font-weight: 700;
}

.fachseite {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 26px;
    max-width: var(--pm-breite);
    margin: 26px auto 48px;
    padding: 0 20px;
    align-items: start;
}

.detailauswahl {
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
    overflow: hidden;
    background: var(--pm-weiss);
}

.detailauswahl-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    font-size: 1.375rem;
    color: var(--pm-weiss);
    background: var(--pm-navy);
}

.detailauswahl-kopf a {
    font-size: .9375rem;
    color: #cfe0f0;
}

.auswahl {
    border-top: 1px solid var(--pm-rand);
}

.auswahl:first-of-type {
    border-top: 0;
}

.auswahl > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-size: 1.125rem;
    color: var(--pm-text);
    cursor: pointer;
    list-style: none;
}

.auswahl > summary::-webkit-details-marker {
    display: none;
}

.auswahl > summary::after {
    content: "›";
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pm-gedaempft);
    transform: rotate(0deg);
}

.auswahl[open] > summary::after {
    transform: rotate(90deg);
}

.auswahl > summary:hover {
    background: var(--pm-flaeche);
}

.auswahl ul {
    margin: 0;
    padding: 0 0 10px;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
}

.auswahl li a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 18px;
    font-size: .9375rem;
}

.auswahl li a:hover {
    background: var(--pm-flaeche);
    text-decoration: none;
}

.auswahl li a span {
    color: var(--pm-gedaempft);
    font-size: .8125rem;
}

.auswahl li a.gewaehlt {
    font-weight: 700;
    background: #eaf1f8;
}

.auswahl li a.gewaehlt::before {
    content: "✕ ";
    color: var(--pm-navy);
}

.plz-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.arztkarte {
    margin: 0 0 20px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-schatten);
    overflow: hidden;
}

.arztkarte h2 {
    margin: 0;
    padding: 16px 20px;
    font-size: 1.375rem;
    border-bottom: 1px solid var(--pm-rand);
}

.arztkarte h2 a {
    color: var(--pm-link);
    font-weight: 700;
}

.arztkarte-koerper {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 22px;
    padding: 20px;
}

.arztkarte-bild img,
.arztkarte-bild .arzt-platzhalter {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--pm-radius);
}

.arztkarte-inhalt .zeile {
    display: flex;
    gap: 10px;
    margin: 0 0 14px;
}

.arztkarte-inhalt .beschriftung {
    font-weight: 700;
    white-space: nowrap;
}

.land {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--pm-weiss);
    background: #1f8fe0;
    border-radius: 50%;
}

.arztkarte-aktion {
    align-self: start;
}

@media (max-width: 1024px) {
    .fachseite {
        grid-template-columns: 1fr;
    }

    .arztkarte-koerper {
        grid-template-columns: 140px 1fr;
    }

    .arztkarte-aktion {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .fachkopf h1 {
        font-size: 1.5rem;
    }

    .arztkarte-koerper {
        grid-template-columns: 1fr;
    }

    .arztkarte-bild {
        max-width: 180px;
    }

    .plz-liste {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .raster {
        grid-template-columns: repeat(2, 1fr);
    }

    .raster-sechs,
    .raster-drei {
        grid-template-columns: repeat(3, 1fr);
    }

    .kastenliste li {
        max-width: calc(50% - 10px);
    }

    .fuss-raster {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .navigation-schalter {
        display: flex;
    }

    .navigation-liste {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding-bottom: 18px;
    }

    .navigation-liste.offen {
        display: flex;
    }

    .untermenue {
        position: static;
        display: block;
        border: 0;
        box-shadow: none;
        text-align: center;
    }

    .untermenue-hervor {
        margin: 0 0 6px;
        padding-bottom: 6px;
    }

    .untermenue-hervor > a {
        justify-content: center;
    }

    .untermenue-text {
        text-align: left;
    }

    .anspruch {
        font-size: 1.125rem;
    }

    .band h1,
    .band h2,
    .bandtitel {
        font-size: 1.375rem;
    }

    .suchleiste {
        grid-template-columns: 1fr;
        border-radius: var(--pm-radius);
    }

    .suchleiste-feld + .suchleiste-feld {
        border-left: 0;
        border-top: 1px solid var(--pm-rand);
    }

    .suchleiste button {
        width: 100%;
        padding: 14px;
    }

    .raster,
    .raster-sechs,
    .raster-drei,
    .raster-zwei {
        grid-template-columns: 1fr;
    }

    .kastenliste li {
        max-width: 100%;
    }

    .fuss-raster {
        grid-template-columns: 1fr;
    }
}

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

    * {
        animation: none !important;
        transition: none !important;
    }
}

.arztseite {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    max-width: var(--pm-breite);
    margin: 28px auto 48px;
    padding: 0 15px;
    align-items: start;
}

.arzt-spalte {
    position: sticky;
    top: 16px;
    padding: 20px;
    background: var(--pm-navy);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 67, 120, .18);
}

.arzt-bildrahmen {
    padding: 8px;
    background: var(--pm-weiss);
    border-radius: 10px;
}

.arzt-bildrahmen img,
.arzt-initialen {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.arzt-initialen {
    display: grid;
    place-items: center;
    background: var(--pm-flaeche);
    color: var(--pm-navy);
    font-size: 2.75rem;
    font-weight: 900;
}

.arzt-termin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 13px 16px;
    text-align: center;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pm-navy);
    background: var(--pm-weiss);
    border-radius: 10px;
}

.arzt-termin:hover {
    background: #eaf1f8;
    text-decoration: none;
}

.arzt-termin svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.arzt-hinweis {
    margin-top: 18px;
    padding-top: 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.arzt-hinweis p {
    margin: 0 0 10px;
    font-size: .875rem;
    color: #d7e2ee;
}

.arzt-hinweis a {
    display: block;
    padding: 8px 10px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-weiss);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
}

.arzt-hinweis a + a {
    margin-top: 8px;
    border-color: transparent;
    font-weight: 400;
    color: #d7e2ee;
}

.arzt-hinweis a:hover {
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
}

.arzt-kopf {
    padding: 0 4px 18px;
    border-bottom: 1px solid var(--pm-rand);
}

.arzt-kopf h1 {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--pm-navy);
}

.arzt-ordination {
    margin: 8px 0 0;
    font-size: 1.0625rem;
    color: var(--pm-gedaempft);
}

.arzt-block {
    margin: 18px 0 0;
    padding: 22px 24px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 34, 58, .04), 0 6px 20px rgba(15, 34, 58, .05);
}

.arzt-block h2 {
    margin: 0 0 14px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.arzt-block p {
    margin: 0;
}

.arzt-block-kompakt {
    display: grid;
    gap: 10px;
}

.arzt-block-zwei {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.arzt-zeile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 10px;
    line-height: 1.5;
}

.arzt-zeile:last-child {
    margin-bottom: 0;
}

.arzt-zeile svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: var(--pm-navy);
    opacity: .8;
}

.arzt-karte {
    display: block;
    margin-top: 4px;
    font-size: .875rem;
}

.arzt-zeiten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0;
}

.arzt-zeiten dt {
    font-weight: 600;
    color: var(--pm-text);
}

.arzt-zeiten dd {
    margin: 0;
    color: var(--pm-text);
}

.arzt-zeit-hinweis {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding: 10px 12px;
    font-size: .875rem;
    color: var(--pm-gedaempft);
    background: var(--pm-flaeche);
    border-radius: 8px;
}

.arzt-leistungen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.arzt-leistungen li {
    padding: 7px 14px;
    font-size: .9375rem;
    color: var(--pm-navy);
    background: #eef4fa;
    border: 1px solid #d7e5f2;
    border-radius: 999px;
}

.arzt-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.arzt-galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--pm-rand);
}

.arzt-galerie span {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

@media (max-width: 900px) {
    .arztseite {
        grid-template-columns: 1fr;
    }

    .arzt-spalte {
        position: static;
        max-width: 380px;
    }

    .arzt-block-zwei {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .arzt-kopf h1 {
        font-size: 1.75rem;
    }
}

.zentrum-aerzte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zentrum-aerzte > li {
    padding: 14px;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 10px;
}

.zentrum-aerzte a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zentrum-aerzte a:hover {
    text-decoration: none;
}

.zentrum-aerzte img,
.zentrum-initialen {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
}

.zentrum-initialen {
    display: grid;
    place-items: center;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    color: var(--pm-navy);
    font-weight: 700;
}

.zentrum-name {
    font-weight: 600;
    color: var(--pm-link);
    line-height: 1.3;
}

.zentrum-aerzte .klein {
    display: block;
    margin-top: 8px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.zentren-kopf {
    background: linear-gradient(135deg, #0d2d4f, #104378 55%, #1a5c96);
    color: var(--pm-weiss);
}

.zentren-kopf-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 44px 15px 40px;
}

.zentren-kopf h1 {
    margin: 0 0 10px;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--pm-weiss);
}

.zentren-kopf p {
    max-width: 640px;
    margin: 0 0 22px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #d5e3f0;
}

.zentren-suche {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 560px;
}

.zentren-suche input[type="search"] {
    flex: 1 1 240px;
    min-width: 0;
    padding: .7rem .95rem;
    font: inherit;
    font-size: 1rem;
    color: var(--pm-text);
    background: var(--pm-weiss);
    border: 0;
    border-radius: 10px;
}

.zentren-suche .knopf {
    padding: .7rem 1.4rem;
    color: var(--pm-navy);
    background: var(--pm-weiss);
    border-color: var(--pm-weiss);
    border-radius: 10px;
}

.zentren-suche .knopf:hover {
    background: #e7f0f8;
    border-color: #e7f0f8;
    color: var(--pm-navy);
}

.zentren-seite {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 26px 15px 48px;
}

.zentren-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.filterchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-navy);
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
}

.filterchip span {
    padding: 1px 7px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--pm-gedaempft);
    background: var(--pm-flaeche);
    border-radius: 999px;
}

.filterchip:hover {
    border-color: var(--pm-navy);
    text-decoration: none;
}

.filterchip-aktiv,
.filterchip-aktiv:hover {
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-color: var(--pm-navy);
}

.filterchip-aktiv span {
    color: var(--pm-weiss);
    background: rgba(255, 255, 255, .18);
}

.zentren-bilanz {
    margin: 0 0 18px;
    font-size: .9375rem;
    color: var(--pm-gedaempft);
}

.zentren-bilanz strong {
    color: var(--pm-navy);
}

.zentren-zuruecksetzen {
    margin-left: 10px;
    font-size: .875rem;
}

.zentrenraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zentrenkarte {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 20px;
    color: inherit;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 34, 58, .04), 0 8px 24px rgba(15, 34, 58, .05);
    transition: transform .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}

.zentrenkarte:hover {
    transform: translateY(-2px);
    border-color: var(--pm-navy);
    box-shadow: 0 4px 10px rgba(15, 34, 58, .07), 0 14px 34px rgba(15, 34, 58, .1);
    text-decoration: none;
}

.zentrenkarte-kopf {
    display: flex;
    align-items: center;
    gap: 13px;
}

.zentrenkarte-zeichen {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--pm-weiss);
    background: linear-gradient(140deg, #1a5c96, #104378);
    border-radius: 12px;
}

/* Standardlogo oder echtes Logo an derselben Stelle wie bisher der Buchstabe */
.zentrenkarte-bild {
    display: block;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: cover;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
}

.zentrenkarte:hover .zentrenkarte-bild {
    border-color: #b9d1e3;
}

.zentrenkarte-titel {
    min-width: 0;
}

.zentrenkarte-name {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pm-navy);
}

.zentrenkarte-land {
    display: block;
    margin-top: 2px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.zentrenkarte-adresse {
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--pm-text);
}

.zentrenkarte-faecher {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.zentrenkarte-faecher span {
    padding: 4px 10px;
    font-size: .75rem;
    color: var(--pm-navy);
    background: #eef4fa;
    border: 1px solid #d7e5f2;
    border-radius: 999px;
}

.zentrenkarte-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--pm-rand);
}

.zentrenkarte-anzahl {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-navy);
}

.zentrenkarte-anzahl-leer {
    font-weight: 400;
    color: var(--pm-gedaempft);
}

.zentrenkarte-pfeil {
    font-size: 1.125rem;
    color: var(--pm-link);
    transition: transform .15s ease-out;
}

.zentrenkarte:hover .zentrenkarte-pfeil {
    transform: translateX(3px);
}

@media (max-width: 700px) {
    .zentren-kopf-inhalt {
        padding: 32px 15px 28px;
    }

    .zentren-kopf h1 {
        font-size: 1.75rem;
    }

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

.arzt-kategorie {
    display: inline-block;
    margin: 8px 0 0;
    padding: 4px 12px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pm-navy);
    background: #eef4fa;
    border: 1px solid #d7e5f2;
    border-radius: 999px;
}

.arzt-galerie a {
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.arzt-galerie a img {
    transition: transform .2s ease-out;
}

.arzt-galerie a:hover img {
    transform: scale(1.04);
}

.zustimmungen {
    margin: 20px 0;
    padding: 18px 20px;
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    background: var(--pm-flaeche);
}

.zustimmungen legend {
    padding: 0 8px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.zustimmung {
    margin: 0 0 16px;
}

.zustimmung:last-of-type {
    margin-bottom: 8px;
}

.zustimmung-titel {
    display: block;
    margin: 0 0 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-text);
}

.zustimmung-titel abbr {
    color: var(--pm-rot);
    text-decoration: none;
}

.zustimmung-zeile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-weight: 400;
    line-height: 1.55;
    cursor: pointer;
}

.zustimmung-zeile input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--pm-navy);
}

.zustimmung-pflicht {
    padding: 14px 16px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-left: 4px solid var(--pm-navy);
    border-radius: 8px;
}

.zustimmungen .field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--pm-rot);
}

.kontaktkopf {
    background: linear-gradient(135deg, #0d2d4f, #104378 55%, #1a5c96);
    color: var(--pm-weiss);
}

.kontaktkopf-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 44px 15px 40px;
}

.kontaktkopf h1 {
    margin: 0 0 12px;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--pm-weiss);
}

.kontaktkopf p {
    max-width: 720px;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #d5e3f0;
}

.kontaktkopf strong {
    color: var(--pm-weiss);
}

.kontaktseite {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 30px;
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 30px 15px 52px;
    align-items: start;
}

.kontaktkarte {
    padding: 26px;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 67, 120, .18);
}

/* Gezeichnetes Motiv statt Foto. Die Regel verwies auf /img/kontakt.jpg —
   die Datei gab es nicht, der Kreis blieb leer. Ein echtes Teamfoto wirkt
   an dieser Stelle besser; dafür genügt es, die Adresse unten zu tauschen. */
.kontaktbild {
    width: 190px;
    height: 190px;
    margin: 0 auto 22px;
    background: #eaf2f9 url("/img/kontakt-standard.svg") center/cover no-repeat;
    border: 4px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(9, 30, 55, .22);
}

@media (max-width: 700px) {
    .kontaktbild {
        width: 130px;
        height: 130px;
        margin-bottom: 16px;
    }
}

.kontaktkarte h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-weiss);
}

.kontaktkarte p {
    margin: 0 0 18px;
    font-size: .9375rem;
    line-height: 1.6;
    color: #d5e3f0;
}

.kontaktpunkte {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.kontaktpunkte li {
    padding: 12px 0;
    font-size: .875rem;
    line-height: 1.55;
    color: #d5e3f0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.kontaktpunkte li span {
    display: block;
    margin-bottom: 2px;
    font-weight: 700;
    color: var(--pm-weiss);
}

.kontaktnotiz {
    margin: 0;
    padding: 12px 14px;
    font-size: .8125rem;
    line-height: 1.5;
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
}

.kontaktformular {
    padding: 28px 30px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 34, 58, .04), 0 8px 26px rgba(15, 34, 58, .06);
}

.kontaktformular label {
    display: block;
    margin: 0 0 6px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.kontaktformular label abbr {
    color: var(--pm-rot);
    text-decoration: none;
}

.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular textarea {
    width: 100%;
    margin: 0 0 18px;
    padding: .7rem .9rem;
    font: inherit;
    font-size: 1rem;
    color: var(--pm-text);
    background: var(--pm-weiss);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
}

.kontaktformular textarea {
    min-height: 150px;
    resize: vertical;
}

.knopf-gross {
    width: 100%;
    justify-content: center;
    padding: .85rem 1.4rem;
    font-size: 1.0625rem;
    border-radius: 10px;
}

.kontakterfolg {
    padding: 12px 0;
    text-align: center;
}

.kontakterfolg-zeichen {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    font-size: 1.75rem;
    color: var(--pm-weiss);
    background: var(--pm-gruen);
    border-radius: 50%;
}

.kontakterfolg h2 {
    margin: 0 0 10px;
    font-size: 1.375rem;
    color: var(--pm-navy);
}

.kontakterfolg p {
    max-width: 460px;
    margin: 0 auto 18px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .kontaktseite {
        grid-template-columns: 1fr;
    }

    .kontaktkopf h1 {
        font-size: 1.75rem;
    }

    .kontaktformular {
        padding: 22px 18px;
    }
}

.arzt-zentren {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.arzt-zentren li {
    padding: 10px 14px;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 8px;
}

.arzt-zentren a {
    font-weight: 600;
}

.arzt-zentren .klein {
    display: block;
    margin-top: 2px;
}

.filterpfad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 10px;
}

.filterpfad-titel {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pm-gedaempft);
}

.filterpfad-marke {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-radius: 999px;
}

.filterpfad-marke:hover {
    background: var(--pm-navy-dunkel);
    text-decoration: none;
}

.filterpfad-marke span[aria-hidden] {
    font-size: 1rem;
    line-height: 1;
    opacity: .75;
}

.filterpfad-zurueck {
    margin-left: auto;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.auswahl-eingrenzung {
    margin-left: 6px;
    font-size: .75rem;
    font-weight: 400;
    color: var(--pm-gedaempft);
}

.auswahl-leer {
    margin: 8px 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--pm-gedaempft);
}

@media (max-width: 700px) {
    .filterpfad-zurueck {
        margin-left: 0;
        width: 100%;
    }
}

/* Schmale Bildschirme: Treffer zuerst, Filter darunter, feste Leiste zum Springen */
.filterleiste {
    display: none;
}

@media (max-width: 900px) {
    .fachseite {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 14px;
    }

    .detailauswahl {
        order: 2;
        scroll-margin-top: 12px;
    }

    .fachseite > :not(.detailauswahl) {
        order: 1;
    }

    .detailauswahl-kopf {
        position: sticky;
        top: 0;
        z-index: 5;
        font-size: 1.125rem;
    }

    .auswahl > summary {
        padding: 14px 16px;
        font-size: 1rem;
    }

    .auswahl li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding: 10px 16px;
    }

    .plz-liste {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }

    .plz-liste li a {
        min-height: 40px;
        padding: 8px 14px;
        border: 1px solid var(--pm-rand);
        border-radius: 999px;
    }

    .filterpfad {
        position: sticky;
        top: 0;
        z-index: 4;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .filterpfad::-webkit-scrollbar {
        display: none;
    }

    .filterpfad-marke {
        flex: 0 0 auto;
        min-height: 36px;
    }

    .filterpfad-zurueck {
        flex: 0 0 auto;
        margin-left: 4px;
    }

    .filterleiste {
        position: fixed;
        z-index: 40;
        right: 14px;
        bottom: 14px;
        left: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 20px;
        font-size: 1rem;
        font-weight: 700;
        color: var(--pm-weiss);
        background: var(--pm-navy);
        border-radius: 999px;
        box-shadow: 0 6px 24px rgba(13, 45, 79, .34);
    }

    .filterleiste:hover,
    .filterleiste:focus {
        color: var(--pm-weiss);
        text-decoration: none;
    }

    .filterleiste-text {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .filterleiste-zahl {
        display: grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        font-size: .8125rem;
        color: var(--pm-navy);
        background: var(--pm-gold);
        border-radius: 999px;
    }

    .filterleiste-treffer {
        font-size: .875rem;
        font-weight: 400;
        color: #cfe0f0;
    }

    .fachseite {
        padding-bottom: 76px;
    }
}

/* Fachrichtungsseite nutzt dasselbe Geruest wie die Suche.
   Die Filterspalte behaelt ihre aufklappbaren Bereiche, bekommt aber
   die helle Darstellung der Suchseite. */
.suchseite.fachseite {
    align-items: start;
}

.filter.detailauswahl {
    padding: 0;
    overflow: hidden;
}

.filter.detailauswahl .detailauswahl-kopf {
    padding: 14px 18px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pm-navy);
    background: transparent;
    border-bottom: 1px solid var(--pm-rand);
}

.filter.detailauswahl .detailauswahl-kopf a {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--pm-link);
}

.filter.detailauswahl .auswahl > summary {
    padding: 11px 18px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pm-text);
}

.filter.detailauswahl .auswahl ul {
    padding: 0 8px 10px;
}

.filter.detailauswahl .auswahl li a {
    padding: 7px 10px;
    border-radius: var(--pm-radius-klein);
}

.filter.detailauswahl .auswahl-leer {
    padding: 0 18px 12px;
}

.filter.detailauswahl .plz-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 12px;
}

.filter.detailauswahl .plz-liste li a {
    padding: 5px 11px;
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
    background: var(--pm-weiss);
}

.treffer-termin {
    margin: 10px 0 0;
}

.treffer-termin .knopf {
    padding: .35rem .9rem;
    font-size: .8125rem;
}

.marke-mehr {
    background: transparent;
    border-style: dashed;
}

.marke-mehr a {
    color: inherit;
}

.fachsuche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.fachsuche input[type="search"] {
    flex: 1 1 320px;
    min-width: 0;
    padding: .5rem .8rem;
    font: inherit;
    font-size: .9375rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.fachraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.fachkachel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: inherit;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 34, 58, .04), 0 8px 24px rgba(15, 34, 58, .05);
    transition: transform .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}

.fachkachel:hover {
    transform: translateY(-2px);
    border-color: var(--pm-navy);
    box-shadow: 0 4px 10px rgba(15, 34, 58, .07), 0 14px 34px rgba(15, 34, 58, .1);
    text-decoration: none;
}

.fachkachel-bild {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(140deg, #1a5c96, #104378);
}

.fachkachel-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease-out;
}

.fachkachel:hover .fachkachel-bild img {
    transform: scale(1.04);
}

.fachkachel-zeichen {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .85);
}

.fachkachel-inhalt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
}

.fachkachel-name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pm-navy);
}

.fachkachel-text {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pm-gedaempft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fachkachel-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--pm-rand);
}

.fachkachel-anzahl {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-text);
}

.fachkachel-pfeil {
    font-size: 1.125rem;
    color: var(--pm-link);
    transition: transform .15s ease-out;
}

.fachkachel:hover .fachkachel-pfeil {
    transform: translateX(3px);
}

@media (max-width: 700px) {
    .fachraster {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .fachkachel-inhalt {
        padding: 12px 14px;
    }

    .fachkachel-name {
        font-size: .9375rem;
    }

    .fachkachel-text {
        display: none;
    }
}

.fachabschnitt {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 14px;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.fachabschnitt::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--pm-rand);
}

.fachabschnitt span {
    order: 3;
    padding: 3px 12px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--pm-gedaempft);
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
}

.fachabschnitt-text {
    margin: -6px 0 14px;
}

.fachliste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.fachknopf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    color: var(--pm-text);
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
    transition: border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}

.fachknopf:hover {
    transform: translateY(-1px);
    border-color: var(--pm-navy);
    box-shadow: 0 4px 12px rgba(15, 34, 58, .09);
    text-decoration: none;
}

.fachknopf-zeichen {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--pm-weiss);
    background: linear-gradient(140deg, #1a5c96, #104378);
    border-radius: 50%;
}

.fachknopf-name {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
}

.fachknopf-anzahl {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pm-gedaempft);
    padding-left: 10px;
    border-left: 1px solid var(--pm-rand);
}

.fachknopf:hover .fachknopf-anzahl {
    color: var(--pm-navy);
}

/* Die erste Kachel bekommt mehr Gewicht — sie ist fast immer Allgemeinmedizin */
.fachraster > li:first-child {
    grid-column: span 2;
}

.fachraster > li:first-child .fachkachel-bild {
    aspect-ratio: 21 / 9;
}

.fachraster > li:first-child .fachkachel-name {
    font-size: 1.25rem;
}

@media (max-width: 700px) {
    .fachraster > li:first-child {
        grid-column: span 2;
    }

    .fachabschnitt {
        font-size: 1.125rem;
        margin: 22px 0 12px;
    }

    .fachknopf {
        padding: 6px 12px 6px 6px;
    }

    .fachknopf-zeichen {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .fachknopf-name {
        font-size: .875rem;
    }
}

.fachbilanz {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 6px;
}

.fachbilanz-zahl {
    padding: 7px 14px;
    font-size: .875rem;
    color: var(--pm-gedaempft);
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
}

.fachbilanz-zahl strong {
    font-size: 1rem;
    color: var(--pm-navy);
}

.eintrag-seite {
    max-width: 780px;
    margin: 28px auto 56px;
    padding: 0 20px;
}

.eintrag-form fieldset {
    margin: 0 0 22px;
    padding: 18px 20px 6px;
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
}

.eintrag-form legend {
    padding: 0 8px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.eintrag-form .feld {
    margin: 0 0 16px;
}

.eintrag-form .feldreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.eintrag-form .feldreihe .feld {
    flex: 1 1 200px;
}

.eintrag-form .feld-schmal {
    flex: 0 1 140px;
}

.eintrag-form label {
    display: block;
    margin: 0 0 5px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-text);
}

.eintrag-form input,
.eintrag-form select,
.eintrag-form textarea {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    font-size: .9375rem;
    color: var(--pm-text);
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 8px;
}

.eintrag-form textarea {
    resize: vertical;
    line-height: 1.5;
}

.eintrag-form input:focus,
.eintrag-form select:focus,
.eintrag-form textarea:focus {
    outline: 2px solid var(--pm-navy);
    outline-offset: 1px;
    border-color: var(--pm-navy);
}

.pflicht {
    font-size: .75rem;
    font-weight: 600;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.feld-hinweis {
    display: block;
    margin-top: 5px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.eintrag-form .field-validation-error,
.eintrag-form span[data-valmsg-for] {
    display: block;
    margin-top: 4px;
    font-size: .8125rem;
    color: #b91c1c;
}

/* Der Honigtopf liegt außerhalb des Sichtfelds, bleibt aber für Roboter im Quelltext */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.eintrag-absenden {
    margin-top: 8px;
}

.knopf-gross {
    padding: .8rem 2rem;
    font-size: 1rem;
}

.eintrag-danke {
    padding: 32px;
    text-align: center;
    background: #f0f7ee;
    border: 1px solid #bcd9b0;
    border-radius: 14px;
}

.eintrag-danke h2 {
    margin: 0 0 12px;
    color: #2f6a2a;
}

.eintrag-danke p {
    margin: 0 auto 20px;
    max-width: 480px;
}

.landingseite {
    display: block;
}

.landingseite .ergebnisse {
    max-width: 900px;
    margin: 0 auto;
}

.landing-mehr {
    margin: 26px 0 8px;
    text-align: center;
}

.ratgeber-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    max-width: 1000px;
    margin: 26px auto 56px;
    padding: 0 20px;
}

.ratgeber-karte {
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    transition: box-shadow .15s ease;
}

.ratgeber-karte:hover {
    box-shadow: 0 4px 14px rgba(16, 42, 67, .12);
}

.ratgeber-karte h2 {
    margin: 0 0 8px;
    font-size: 1.125rem;
    color: var(--pm-navy);
}

.ratgeber-karte p {
    margin: 0 0 12px;
    font-size: .9375rem;
    line-height: 1.55;
}

.ratgeber-stand {
    margin-top: auto;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.ratgeber-artikel {
    max-width: 760px;
    margin: 0 auto 56px;
    padding: 0 20px;
}

.ratgeber-teaser {
    font-size: 1.0625rem;
    color: var(--pm-gedaempft);
}

.ratgeber-inhalt p {
    line-height: 1.65;
}

.ratgeber-fragen {
    margin-top: 34px;
    padding-top: 10px;
    border-top: 1px solid var(--pm-rand);
}

.ratgeber-frage {
    margin: 0 0 10px;
    border: 1px solid var(--pm-rand);
    border-radius: 10px;
    background: var(--pm-weiss);
}

.ratgeber-frage summary {
    padding: 13px 16px;
    font-weight: 600;
    cursor: pointer;
    color: var(--pm-navy);
}

.ratgeber-frage[open] summary {
    border-bottom: 1px solid var(--pm-rand);
}

.ratgeber-frage p {
    margin: 0;
    padding: 13px 16px;
    line-height: 1.6;
}

.ratgeber-fuss {
    margin-top: 34px;
    padding-top: 14px;
    border-top: 1px solid var(--pm-rand);
}

.statistikseite {
    max-width: 860px;
    margin: 0 auto 56px;
    padding: 0 20px;
}

.statistik-block {
    margin: 0 0 34px;
}

.statistik-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.statistik-kachel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    text-align: center;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
}

.statistik-kachel strong {
    font-size: 1.75rem;
    color: var(--pm-navy);
}

.statistik-kachel span {
    font-size: .875rem;
    color: var(--pm-gedaempft);
}

.statistik-tabelle {
    width: 100%;
    border-collapse: collapse;
}

.statistik-tabelle th,
.statistik-tabelle td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--pm-rand);
}

.statistik-tabelle th {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pm-gedaempft);
}

.statistik-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px 18px;
}

.statistik-links li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pm-rand);
}

.statistik-links span {
    color: var(--pm-gedaempft);
}

.statistik-hinweis {
    font-size: .875rem;
    color: var(--pm-gedaempft);
}

.sprachseite {
    max-width: var(--pm-breite);
    margin: 30px auto 56px;
    padding: 0 20px;
}

/* ===== Sprachseite ============================================ */

.sprachmarke {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pm-navy);
    background: var(--pm-weiss);
    border: 1px solid #d9e6f0;
    border-radius: 50%;
}

.sprachfaecher-titel {
    margin: 0 0 14px;
    padding: 0 0 10px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pm-navy);
    border-bottom: 2px solid var(--pm-rand);
}

.sprachfaecher {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sprachfaecher a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    padding: 13px 16px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sprachfaecher a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 6px 18px rgba(16, 67, 120, .10);
    transform: translateY(-1px);
}

.sprachfach-name {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pm-navy);
}

.sprachfach-anzahl {
    flex: 0 0 auto;
    padding: 3px 10px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 999px;
}

.sprachraster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
    max-width: var(--pm-breite);
    margin: 28px auto 56px;
    padding: 0 20px;
}

.sprachraster-haupt {
    min-width: 0;
}

.sprachraster-seite {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 20px;
}

.treffer-sprache {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 3px 11px 3px 9px;
    font-size: .75rem;
    font-weight: 600;
    color: #0f6b4f;
    background: #e3f4ec;
    border-radius: 999px;
}

.treffer-sprache svg {
    flex: 0 0 auto;
    fill: currentColor;
}

.treffer-aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 14px 0 0;
}

.treffer-aktionen .knopf {
    padding: .45rem 1rem;
    font-size: .8125rem;
}

.treffer-route {
    font-size: .8125rem;
    color: var(--pm-link);
}

@media (max-width: 980px) {
    .sprachraster {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .sprachraster-seite {
        position: static;
    }
}

@media (max-width: 700px) {
    .sprachraster {
        padding: 0 15px;
        margin-top: 20px;
    }

    .sprachmarke {
        width: 46px;
        height: 46px;
        font-size: 1.25rem;
    }
}

.landing-verwandt {
    max-width: 900px;
    margin: 26px auto 0;
}

.landing-verwandt h2 {
    font-size: 1.0625rem;
    margin: 0 0 10px;
}

.landing-verwandt ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.landing-verwandt li a {
    display: inline-block;
    padding: 7px 13px;
    font-size: .875rem;
    color: var(--pm-navy);
    text-decoration: none;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
}

.landing-verwandt li a:hover {
    border-color: var(--pm-navy);
}

.arzt-weiter {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--pm-rand);
}

.statistik-held {
    position: relative;
    max-width: 900px;
    margin: 30px auto 10px;
    padding: 42px 24px 34px;
    text-align: center;
    background: linear-gradient(160deg, #f2f7fb 0%, #e8f1f8 100%);
    border-radius: 18px;
    overflow: hidden;
}

.statistik-puls {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 70px;
    opacity: .35;
}

.statistik-puls path {
    stroke: var(--pm-navy);
}

.statistik-held h1 {
    position: relative;
    margin: 0 0 12px;
    color: var(--pm-navy);
}

.statistik-held p {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.statistik-kachel svg {
    width: 30px;
    height: 30px;
    margin: 0 auto 6px;
    fill: var(--pm-navy);
    opacity: .85;
}

.statistik-zweispaltig {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 30px;
    align-items: start;
}

@media (max-width: 760px) {
    .statistik-zweispaltig {
        grid-template-columns: 1fr;
    }
}

.statistik-balken {
    margin: 0;
    padding: 0;
    list-style: none;
}

.statistik-balken li {
    display: grid;
    grid-template-columns: minmax(120px, 170px) 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
}

.balken-name {
    font-size: .9375rem;
    color: var(--pm-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.balken-name {
    color: var(--pm-navy);
}

a.balken-name:hover {
    text-decoration: underline;
}

.balken-grafik {
    width: 100%;
    max-width: 330px;
    height: 14px;
}

.balken-gesamt {
    fill: #c4d8ea;
}

.balken-termin {
    fill: var(--pm-navy);
}

.balken-fach {
    fill: #6f9ec4;
}

.balken-sprache {
    fill: #7fb2a1;
}

.balken-wert {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    color: var(--pm-gedaempft);
}

.statistik-legende {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.statistik-donutbox {
    text-align: center;
    padding: 18px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
}

.statistik-donut {
    width: 180px;
    height: 180px;
    margin: 8px auto;
}

.donut-rest {
    stroke: #e3ecf4;
}

.donut-anteil {
    stroke: var(--pm-navy);
}

.donut-zahl {
    font-size: 24px;
    font-weight: 700;
    fill: var(--pm-navy);
}

.donut-text {
    font-size: 10px;
    fill: var(--pm-gedaempft);
}

.diplom-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.diplom-chips li {
    padding: 6px 13px;
    font-size: .875rem;
    color: var(--pm-navy);
    background: #eef4f9;
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
}

.arzt-abschnitt {
    margin: 26px 0 0;
}

.arzt-abschnitt h2 {
    margin: 0 0 10px;
    font-size: 1.1875rem;
    color: var(--pm-navy);
}

.arzt-abschnitt p {
    line-height: 1.6;
}

.paketseite {
    max-width: 1060px;
    margin: 0 auto 56px;
    padding: 0 20px;
}

.paket-zwischentitel {
    margin: 40px 0 20px;
    text-align: center;
    color: var(--pm-navy);
}

.paketkarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    align-items: stretch;
}

.paketkarte {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
}

.paketkarte-beliebt {
    border-color: var(--pm-navy);
    box-shadow: 0 8px 24px rgba(16, 67, 120, .12);
}

.paket-band {
    position: absolute;
    top: 14px;
    right: -8px;
    padding: 4px 14px;
    font-size: .8125rem;
    color: #fff;
    background: var(--pm-navy);
    border-radius: 4px 0 0 4px;
}

.paketkarte h3 {
    margin: 0;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pm-navy);
}

.paket-unterzeile {
    margin: 4px 0 0;
    color: var(--pm-gedaempft);
}

.paket-preis {
    margin: 14px 0 6px;
}

.paket-preis strong {
    font-size: 2.25rem;
    color: var(--pm-navy);
}

.paket-preis span {
    margin-left: 8px;
    font-size: .875rem;
    color: var(--pm-gedaempft);
}

.paket-leistungen {
    flex: 1;
    margin: 14px 0;
    padding: 0;
    list-style: none;
}

.paket-leistungen li {
    position: relative;
    padding: 6px 0 6px 28px;
    border-bottom: 1px solid var(--pm-rand);
}

.paket-leistungen li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pm-navy);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 14-4-4 1.4-1.4L11 13.2l4.6-4.6L17 10l-6 6Z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 14-4-4 1.4-1.4L11 13.2l4.6-4.6L17 10l-6 6Z"/></svg>') center / contain no-repeat;
}

.paketkarte footer .knopf {
    display: block;
    text-align: center;
}

.paketkarte footer .klein {
    margin-top: 10px;
    color: var(--pm-gedaempft);
}

.paket-zentrum {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 26px 24px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
}

@media (max-width: 760px) {
    .paket-zentrum {
        grid-template-columns: 1fr;
    }
}

.paket-zentrum h3 {
    margin: 0;
    color: var(--pm-navy);
}

.paket-mitte {
    margin-top: 16px;
}

.paket-anfrage {
    max-width: 680px;
    margin: 48px auto 0;
}

.paket-anfrage h2 {
    color: var(--pm-navy);
}

.paket-marke {
    display: inline-block;
    padding: 3px 10px;
    font-size: .8125rem;
    color: var(--pm-navy);
    background: #eef4f9;
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
}

.schnellsuche {
    position: relative;
    max-width: 640px;
    margin: 18px auto 0;
}

.schnellsuche-feld {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 16px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(16, 67, 120, .08);
}

.schnellsuche-feld:focus-within {
    border-color: var(--pm-navy);
}

.schnellsuche-feld svg {
    flex: 0 0 auto;
    fill: var(--pm-gedaempft);
}

.schnellsuche-feld input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    font-size: 1.0625rem;
    background: transparent;
}

.schnellsuche-feld button {
    flex: 0 0 auto;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--pm-navy);
    color: #fff;
    font-size: .9375rem;
    cursor: pointer;
}

.schnellsuche-vorschlaege {
    position: absolute;
    z-index: 200;
    inset: calc(100% + 6px) 0 auto 0;
    max-height: 420px;
    overflow-y: auto;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 67, 120, .16);
    text-align: left;
}

.vorschlag-gruppe {
    margin: 0;
    padding: 10px 16px 4px;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pm-gedaempft);
}

.schnellsuche-vorschlaege .vorschlag {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    text-decoration: none;
    color: var(--pm-text);
}

.schnellsuche-vorschlaege .vorschlag strong {
    font-weight: 600;
    color: var(--pm-navy);
}

.schnellsuche-vorschlaege .vorschlag span {
    font-size: .875rem;
    color: var(--pm-gedaempft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schnellsuche-vorschlaege .vorschlag-alle {
    margin-top: 4px;
    padding-top: 10px;
    padding-bottom: 11px;
    border-top: 1px solid var(--pm-rand);
}

.schnellsuche-vorschlaege .vorschlag-alle strong {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--pm-link);
}

.schnellsuche-vorschlaege .vorschlag:hover,
.schnellsuche-vorschlaege .vorschlag.aktiv {
    background: #eef4f9;
}

/* ===== Suchergebnisseite ===================================== */

.suchkopf {
    border-top: 1px solid var(--pm-rand);
    border-bottom: 1px solid var(--pm-rand);
    background: linear-gradient(180deg, #f2f7fb 0%, #fbfcfe 100%);
}

.suchkopf-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 16px 20px 20px;
}

.suchkopf-pfad {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.suchkopf-pfad a {
    color: var(--pm-gedaempft);
}

.suchkopf-pfad a:hover {
    color: var(--pm-navy);
}

.suchkopf-reihe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.suchkopf h1 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);
}

.suchkopf-begriff {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--pm-gedaempft);
    overflow-wrap: anywhere;
}

.suchkopf .schnellsuche {
    flex: 1 1 380px;
    max-width: 560px;
    margin: 0;
}

.suchkopf .schnellsuche-feld {
    padding: 4px 4px 4px 14px;
}

.suchkopf .schnellsuche-feld input {
    font-size: 1rem;
}

.suchkopf .schnellsuche-feld button {
    padding: 8px 18px;
    font-size: .875rem;
}

.such-merkmale {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.such-merkmal {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    font-size: .8125rem;
    background: var(--pm-weiss);
    border: 1px solid #d3e1ec;
    border-radius: 999px;
}

.such-merkmal b {
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pm-gedaempft);
}

.such-merkmal span {
    font-weight: 600;
    color: var(--pm-navy);
}

.sucheseite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
    max-width: var(--pm-breite);
    margin: 28px auto 56px;
    padding: 0 20px;
}

.suche-haupt {
    min-width: 0;
}

.such-zusammenfassung {
    margin: 0 0 24px;
    padding: 16px 20px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-left: 3px solid var(--pm-navy);
    border-radius: var(--pm-radius);
}

.such-satz {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--pm-text);
}

.such-satz-zusatz {
    margin: 6px 0 0;
    font-size: .9375rem;
    color: var(--pm-text);
}

.such-satz-hinweis {
    margin: 8px 0 0;
    font-size: .875rem;
    color: var(--pm-gedaempft);
}

.suche-gruppe {
    margin: 0 0 30px;
}

.suche-gruppe-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--pm-rand);
}

.suche-gruppe-kopf h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--pm-navy);
}

.suche-anzahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 999px;
}

.suche-karten {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.suche-karte {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.suche-karte:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 6px 18px rgba(16, 67, 120, .10);
    transform: translateY(-1px);
}

.suche-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 50%;
}

.suche-avatar-bild {
    display: block;
    object-fit: cover;
    background: var(--pm-flaeche);
}

.suche-avatar-logo {
    object-fit: contain;
    padding: 4px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
}

.suche-avatar-zentrum {
    color: #0f6b4f;
    background: #e3f4ec;
}

.suche-avatar-apotheke {
    color: #8a5a00;
    background: #fdf1d8;
}

.suche-karte-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.suche-karte-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pm-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suche-karte-fach {
    font-size: .875rem;
    color: var(--pm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suche-karte-ort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.suche-karte-ort svg {
    flex: 0 0 auto;
    fill: var(--pm-gedaempft);
}

.suche-karte-rand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.suche-termin {
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 600;
    color: #0f6b4f;
    background: #e3f4ec;
    border-radius: 999px;
    white-space: nowrap;
}

.suche-pfeil {
    fill: #a9bccd;
    transition: fill .15s ease, transform .15s ease;
}

.suche-karte:hover .suche-pfeil {
    fill: var(--pm-navy);
    transform: translateX(2px);
}

.suche-hinweisfeld {
    padding: 26px 24px;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 10px;
}

.suche-hinweisfeld h2 {
    margin: 0 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.suche-hinweisfeld p {
    margin: 0;
    line-height: 1.6;
}

.suche-hinweisfeld em {
    font-style: normal;
    font-weight: 600;
    color: var(--pm-navy);
}

.suche-hinweisfeld-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 14px !important;
    font-size: .9375rem;
}

.suche-seitlich {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 20px;
}

.suche-box {
    padding: 16px 18px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
}

.suche-box h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pm-gedaempft);
}

.suche-box h2 svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    fill: #a9bccd;
}

.suche-box p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.55;
}

.suche-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Übersichtsseiten ------------------------------------------------- */

.suche-linkliste li + li {
    margin-top: 2px;
}

.suche-linkliste a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease;
}

.suche-linkliste a:hover {
    background: #eef4f9;
    text-decoration: none;
}

.suche-linkliste-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.suche-linkliste strong {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pm-navy);
}

.suche-linkliste-text span {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--pm-gedaempft);
}

.suche-linkliste a > svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: auto;
    fill: #c3d2de;
    transition: fill .15s ease, transform .15s ease;
}

.suche-linkliste a:hover > svg {
    fill: var(--pm-navy);
    transform: translateX(2px);
}

/* --- Tippkasten ------------------------------------------------------- */

.suche-box-tipp {
    background: linear-gradient(180deg, #f3f8fc 0%, #fbfcfe 100%);
    border-color: #d9e6f0;
}

.suche-box-tipp p {
    color: var(--pm-text);
}

.suche-beispiele {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 0;
}

.suche-beispiele li {
    margin: 0;
    padding: 0;
    border: 0;
}

.suche-beispiele a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: .875rem;
    color: var(--pm-navy);
    background: var(--pm-weiss);
    border: 1px solid #dbe6ef;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.suche-beispiele a > svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    fill: #9db4c8;
    transition: fill .15s ease;
}

.suche-beispiele a > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suche-beispiele a:hover {
    text-decoration: none;
    border-color: var(--pm-navy);
    box-shadow: 0 3px 10px rgba(16, 67, 120, .10);
}

.suche-beispiele a:hover > svg {
    fill: var(--pm-navy);
}

/* --- Eintragskasten --------------------------------------------------- */

.suche-box-eintrag {
    border-top: 3px solid var(--pm-gold);
}

.suche-box-marke {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 10px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a5a00;
    background: #fdf1d8;
    border-radius: 999px;
}

.suche-box h2.suche-box-eintrag-titel {
    display: block;
    margin: 0 0 6px;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pm-navy);
}

.suche-box-eintrag .knopf {
    display: block;
    margin-top: 14px;
    padding: 11px 20px;
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
}

@media (max-width: 980px) {
    .sucheseite {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .suche-seitlich {
        position: static;
    }
}

@media (max-width: 700px) {
    .suchkopf-inhalt {
        padding: 12px 15px 16px;
    }

    .suchkopf-reihe {
        gap: 12px;
    }

    .suchkopf h1 {
        font-size: 1.1875rem;
    }

    .suchkopf-begriff {
        font-size: 1rem;
    }

    .suchkopf .schnellsuche {
        flex: 1 1 100%;
        max-width: none;
    }

    .sucheseite {
        padding: 0 15px;
        margin-top: 20px;
    }

    .suche-karte {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 11px;
        padding: 11px 12px;
    }

    .suche-avatar {
        width: 38px;
        height: 38px;
        font-size: .8125rem;
    }

    .suche-termin {
        display: none;
    }
}

.navigation-liste > li > a {
    color: var(--pm-link);
    font-weight: 400;
    font-size: 1.0625rem;
}

.navigation-liste > li > a:hover {
    color: var(--pm-navy);
}

h1 {
    font-size: 30px;
    font-weight: 500;
    color: var(--pm-navy);
}

h2 {
    font-size: 26px;
    font-weight: 500;
    color: var(--pm-navy);
}

h3 {
    font-size: 22px;
    font-weight: 500;
    color: var(--pm-blau);
}

h4 {
    font-size: 21px;
    font-weight: 600;
}

@media (min-width: 981px) {
    .kopf-reihe {
        display: flex;
        align-items: center;
        gap: 26px;
        max-width: var(--pm-breite);
        margin: 0 auto;
        padding: 12px 20px;
    }

    .kopf-reihe .kopf-marke {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    .kopf-reihe .kopf-marke img {
        height: 42px;
    }

    .kopf-reihe .hauptnavigation {
        flex: 1;
        max-width: none;
        margin: 0;
    }

    .kopf-reihe .navigation-liste {
        justify-content: center;
        padding: 0;
        gap: 0 30px;
        flex-wrap: nowrap;
    }

    .kopf-reihe .navigation-liste > li > a {
        white-space: nowrap;
    }
}

.kopf-aktionen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 8px 0;
}

.lupe-schalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.lupe-schalter svg {
    fill: var(--pm-navy);
}

.lupe-schalter:hover {
    background: var(--pm-flaeche);
}

.kopf-eintragen {
    padding: 11px 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, #23598e 0%, var(--pm-navy) 100%);
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(26, 74, 122, .28);
    transition: box-shadow .15s ease, transform .15s ease;
}

.kopf-eintragen:hover {
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(26, 74, 122, .38);
    transform: translateY(-1px);
}

.kopf-anmelden {
    padding: 10px 22px;
    border: 1.5px solid var(--pm-navy);
    border-radius: 999px;
    color: var(--pm-navy);
    font-weight: 500;
    font-size: .9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.kopf-anmelden:hover {
    background: var(--pm-navy);
    color: #fff;
    text-decoration: none;
}

.kopf-suche {
    padding: 14px 20px 18px;
    background: var(--pm-flaeche);
    border-bottom: 1px solid var(--pm-rand);
}

.kopf-reihe {
    position: relative;
}

.kopf-reihe .hauptnavigation {
    position: static;
}

.hat-mega {
    position: static;
}

.megamenue {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    z-index: 60;
    display: none;
    grid-template-columns: auto auto auto;
    gap: 8px 36px;
    width: min(700px, calc(100vw - 40px));
    padding: 26px 34px 24px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-top: 3px solid var(--pm-navy);
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(16, 34, 56, .18);
    text-align: left;
}

.megamenue::before {
    content: "";
    position: absolute;
    inset: -14px 0 auto 0;
    height: 14px;
}

.mega-spalte + .mega-spalte {
    border-left: 1px solid var(--pm-rand);
    padding-left: 36px;
}

.hat-mega:hover .megamenue,
.hat-mega:focus-within .megamenue {
    display: grid;
}

.mega-titel {
    margin: 0 0 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pm-gedaempft);
}

.megamenue ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.megamenue li a {
    display: block;
    max-width: 250px;
    padding: 6px 12px;
    font-size: .875rem;
    margin: 0 0 2px -12px;
    border-radius: 8px;
    color: var(--pm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.megamenue li a:hover {
    color: var(--pm-navy);
    background: #eef4f9;
    text-decoration: none;
}



.mega-alle {
    margin: 10px 0 0;
}

.mega-alle a {
    font-weight: 500;
    color: var(--pm-navy);
}

@media (max-width: 980px) {
    .kopf-aktionen {
        flex-wrap: wrap;
        padding: 10px 15px;
    }
}

@media (max-width: 700px) {
    .hat-mega {
        position: relative;
    }

    .megamenue {
        position: static;
        transform: none;
        display: block;
        width: auto;
        padding: 8px 0 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .megamenue,
    .mega-spalte {
        text-align: center;
    }

    .mega-spalte + .mega-spalte {
        border-left: 0;
        padding-left: 0;
    }

    .megamenue li a {
        max-width: none;
        margin: 0;
        white-space: normal;
    }


}

.mega-spalte-breit {
    min-width: 220px;
}

/* ===== Österreichkarte auf der Bundesländerseite =============== */

.karteseite {
    max-width: var(--pm-breite);
    margin: 28px auto 56px;
    padding: 0 20px;
}

.karterahmen {
    margin: 0 0 40px;
    padding: 18px 20px 14px;
    background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
    border: 1px solid #d9e6f0;
    border-radius: 14px;
}

.oesterreichkarte {
    display: block;
    width: 100%;
    height: auto;
}

/* Jede Fläche ist ein Link — Cursor und Fokus müssen das zeigen */
.karteflaeche {
    cursor: pointer;
    outline: none;
}

.karteflaeche path {
    stroke: var(--pm-weiss);
    stroke-width: 1.6;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill .15s ease;
}

.karteflaeche-0 path { fill: #e8eef4; }
.karteflaeche-1 path { fill: #dbe8f3; }
.karteflaeche-2 path { fill: #b3d0e7; }
.karteflaeche-3 path { fill: #7fadd3; }
.karteflaeche-4 path { fill: #4a85bb; }
.karteflaeche-5 path { fill: #104378; }

.karteflaeche:hover path,
.karteflaeche:focus-visible path {
    fill: var(--pm-gold);
}

.karteflaeche:focus-visible path {
    stroke: var(--pm-navy-dunkel);
    stroke-width: 2.4;
}

/* Nur noch die Eintragszahl, klein und zurückhaltend — die Fläche selbst
   trägt über ihre Färbung schon die Aussage. Die Kürzel sind entfallen. */
.karte-zahl {
    font-size: 15px;
    font-weight: 600;
    fill: var(--pm-navy);
    opacity: .9;
    pointer-events: none;
}

/* Wien misst nur rund 51 × 40 Einheiten. Die Zahl steht dort in der Fläche,
   aber kleiner — sonst passt sie nicht hinein. */
.karte-zahl.karte-eng {
    font-size: 10px;
    font-weight: 700;
    opacity: 1;
}

/* Auf den dunklen Flächen muss die Beschriftung umschlagen */
.karteflaeche-4 .karte-zahl,
.karteflaeche-5 .karte-zahl {
    fill: var(--pm-weiss);
}

.karteflaeche:hover .karte-zahl,
.karteflaeche:focus-visible .karte-zahl {
    fill: var(--pm-navy-dunkel);
}

.kartelegende {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: .75rem;
    color: var(--pm-gedaempft);
}

.kartelegende li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kartelegende li + li {
    margin-left: 2px;
}

.kartelegende span {
    display: block;
    width: 26px;
    height: 12px;
    border-radius: 3px;
}

.kartelegende .karteflaeche-1 { background: #dbe8f3; }
.kartelegende .karteflaeche-2 { background: #b3d0e7; }
.kartelegende .karteflaeche-3 { background: #7fadd3; }
.kartelegende .karteflaeche-4 { background: #4a85bb; }
.kartelegende .karteflaeche-5 { background: #104378; }

/* --- Liste als Ergänzung unter der Karte --------------------- */

.landkarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.landkarten a {
    display: block;
    height: 100%;
    padding: 14px 16px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.landkarten a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 6px 18px rgba(16, 67, 120, .10);
    transform: translateY(-1px);
}

.landkarte-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.landkarte-name {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pm-navy);
}

.landkarte-zahl {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.landkarte-balken {
    display: block;
    height: 6px;
    margin: 9px 0 6px;
    background: var(--pm-flaeche);
    border-radius: 999px;
    overflow: hidden;
}

.landkarte-balken > span {
    display: block;
    height: 100%;
    min-width: 3px;
    background: linear-gradient(90deg, #4a85bb, var(--pm-navy));
    border-radius: 999px;
}

.landkarte-anteil {
    display: block;
    font-size: .75rem;
    color: var(--pm-gedaempft);
}

@media (max-width: 700px) {
    .karteseite {
        padding: 0 15px;
    }

    .karterahmen {
        padding: 12px 12px 10px;
    }

    /* Auf dem Handy ist die Karte schmaler — die Zahlen müssen mitwachsen,
       damit sie lesbar bleiben. */
    .karte-zahl { font-size: 26px; }
    .karte-zahl.karte-eng { font-size: 17px; }

    .kartelegende {
        flex-wrap: wrap;
    }
}

/* ===== Sprachübersicht ======================================== */

.sprachenseite {
    max-width: var(--pm-breite);
    margin: 28px auto 56px;
    padding: 0 20px;
}

.sprachkacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.sprachkacheln a {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 14px;
    height: 100%;
    padding: 14px 16px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sprachkacheln a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 6px 18px rgba(16, 67, 120, .10);
    transform: translateY(-1px);
}

/* Flagge: fester Rahmen mit dünner Kante, damit auch weiße Flaggen sichtbar bleiben */
.sprachflagge {
    grid-row: 1 / span 2;
    display: block;
    width: 46px;
    height: 31px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(16, 67, 120, .18), 0 1px 2px rgba(16, 67, 120, .12);
}

.sprachflagge svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sprachflagge-ersatz {
    display: grid;
    place-items: center;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pm-navy);
    background: #e7f0f7;
    box-shadow: 0 0 0 1px rgba(16, 67, 120, .18);
}

.sprachkachel-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sprachkachel-text strong {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sprachkachel-text > span {
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.sprachkachel-balken {
    grid-column: 2;
    display: block;
    height: 5px;
    background: var(--pm-flaeche);
    border-radius: 999px;
    overflow: hidden;
}

.sprachkachel-balken > span {
    display: block;
    height: 100%;
    min-width: 3px;
    background: linear-gradient(90deg, #7fadd3, var(--pm-navy));
    border-radius: 999px;
}

.sprachkachel-pfeil {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    fill: #c3d2de;
    transition: fill .15s ease, transform .15s ease;
}

.sprachkacheln a:hover .sprachkachel-pfeil {
    fill: var(--pm-navy);
    transform: translateX(2px);
}

@media (max-width: 700px) {
    .sprachenseite {
        padding: 0 15px;
    }

    .sprachkacheln {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}

/* ===== Blogbeiträge auf der Startseite ======================== */

.blogbereich {
    background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
    border-bottom: 1px solid var(--pm-rand);
}

.blogbereich-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 26px 20px 40px;
}

.blogkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.blogkopf-zeile {
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pm-gedaempft);
}

.blogkopf-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pm-navy);
}

.blogkopf-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform .15s ease;
}

.blogkopf-link:hover svg {
    transform: translateX(2px);
}

.blogkacheln {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blogkacheln a {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.blogkacheln a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 8px 22px rgba(16, 67, 120, .12);
    transform: translateY(-2px);
}

.blogkachel-bild {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--pm-flaeche);
    overflow: hidden;
}

.blogkachel-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.blogkacheln a:hover .blogkachel-bild img {
    transform: scale(1.03);
}

/* Fällt das Beitragsbild aus, bleibt die Kachel trotzdem vollständig */
.blogkachel-ersatz {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #a9bccd;
    background: var(--pm-flaeche);
}

.blogkachel-ersatz svg {
    width: 38px;
    height: 38px;
}

.blogkachel-marke {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 11px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pm-weiss);
    background: rgba(16, 67, 120, .88);
    border-radius: 999px;
}

.blogkachel-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 14px 16px 16px;
}

.blogkachel-datum {
    font-size: .75rem;
    color: var(--pm-gedaempft);
}

.blogkachel-titel {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pm-navy);

    /* Höchstens drei Zeilen, damit die Kacheln einer Reihe gleich hoch bleiben */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blogkachel-anriss {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--pm-text);

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1000px) {
    .blogkacheln {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .blogbereich-inhalt {
        padding: 20px 15px 30px;
    }

    .blogkacheln {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

/* ===== Häufige Leistungen auf der Startseite =================== */

.leistungsbereich {
    background: var(--pm-weiss);
}

.leistungsbereich-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 30px 20px 46px;
}

/* --- Grosse Kacheln ------------------------------------------- */

.leistungskacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.leistungskacheln a {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 15px 16px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.leistungskacheln a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 8px 22px rgba(16, 67, 120, .11);
    transform: translateY(-2px);
}

.leistungskachel-zeichen {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 13px;
    transition: color .15s ease, background .15s ease;
}

.leistungskachel-zeichen svg {
    width: 24px;
    height: 24px;
}

.leistungskacheln a:hover .leistungskachel-zeichen {
    color: var(--pm-weiss);
    background: var(--pm-navy);
}

.leistungskachel-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.leistungskachel-name {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);

    /* Zwei Zeilen genügen auch für "Mutter-Kind-Pass-Untersuchungen" */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.leistungskachel-zahl {
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.leistungskachel-pfeil {
    width: 16px;
    height: 16px;
    fill: #c3d2de;
    transition: fill .15s ease, transform .15s ease;
}

.leistungskacheln a:hover .leistungskachel-pfeil {
    fill: var(--pm-navy);
    transform: translateX(2px);
}

/* --- Zwischentitel -------------------------------------------- */

.leistungen-zwischentitel {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0 14px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pm-gedaempft);
}

.leistungen-zwischentitel::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pm-rand);
}

/* --- Kleine Schaltflächen ------------------------------------- */

.leistungsknoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.leistungsknoepfe a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 11px;
    font-size: .875rem;
    color: var(--pm-navy);
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.leistungsknoepfe a:hover {
    text-decoration: none;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-color: var(--pm-navy);
}

.leistungsknoepfe svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    opacity: .75;
}

.leistungsknoepfe a:hover svg {
    opacity: 1;
}

.leistungsknoepfe em {
    font-style: normal;
    font-size: .75rem;
    font-weight: 700;
    color: var(--pm-gedaempft);
}

.leistungsknoepfe a:hover em {
    color: rgba(255, 255, 255, .8);
}

@media (max-width: 560px) {
    .leistungsbereich-inhalt {
        padding: 22px 15px 32px;
    }

    .leistungskacheln {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .leistungsknoepfe a {
        font-size: .8125rem;
        padding: 7px 12px 7px 10px;
    }
}

/* ===== Blättern in der Beitragsliste (WordPress) =============== */

.blogblaettern {
    margin: 22px 0 0;
}

.blogblaettern ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blogblaettern a,
.blogblaettern span {
    display: block;
    min-width: 38px;
    padding: 8px 13px;
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    color: var(--pm-navy);
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 9px;
    text-decoration: none;
}

.blogblaettern a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    background: var(--pm-flaeche);
}

.blogblaettern .current {
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-color: var(--pm-navy);
}

/* ===== Ausgewählte Ärzte auf der Startseite ==================== */

.arztbereich {
    background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%);
}

.arztbereich-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 28px 20px 30px;
}

.arztliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.arztliste a {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 15px 18px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.arztliste a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 8px 22px rgba(16, 67, 120, .11);
    transform: translateY(-2px);
}

/* Einheitlich rund — Foto wie Standardbild. Vorher standen quadratische
   Fotos neben runden Platzhaltern, was die Reihe unruhig machte. */
.arztliste-bild {
    width: 76px;
    height: 76px;
    object-fit: cover;
    background: var(--pm-flaeche);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--pm-rand);
}

.arztliste-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.arztliste-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arztliste-faecher {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.arztliste-faecher span {
    padding: 2px 9px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arztliste-ort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.arztliste-ort svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    fill: #a9bccd;
}

.arztliste-pfeil {
    width: 16px;
    height: 16px;
    fill: #c3d2de;
    transition: fill .15s ease, transform .15s ease;
}

.arztliste a:hover .arztliste-pfeil {
    fill: var(--pm-navy);
    transform: translateX(2px);
}

.arztliste-fuss {
    margin: 20px 0 0;
    text-align: center;
}

@media (max-width: 560px) {
    .arztbereich-inhalt {
        padding: 22px 15px 32px;
    }

    .arztliste {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .arztliste a {
        grid-template-columns: 62px minmax(0, 1fr) 14px;
        gap: 12px;
        padding: 13px 14px;
    }

    .arztliste-bild {
        width: 62px;
        height: 62px;
    }
}

/* ===== Ausgewählte Gesundheitszentren ========================== */

.zentrenbereich {
    background: var(--pm-weiss);
}

.zentrenbereich-inhalt {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 28px 20px 30px;
}

.zentrenliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zentrenliste a {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 15px;
    height: 100%;
    padding: 14px 18px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.zentrenliste a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 8px 22px rgba(16, 67, 120, .11);
    transform: translateY(-2px);
}

/* Echtes Logo vollständig zeigen, das Standardmotiv füllt den Rahmen */
.zentrenliste-bild {
    width: 64px;
    height: 64px;
    object-fit: cover;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
}

.zentrenliste-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.zentrenliste-name {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);

    /* Zwei Zeilen genügen auch für "AGZ – Ärzte und Gesundheitszentrum" */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zentrenliste-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 12px;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

.zentrenliste-ort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.zentrenliste-ort svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    fill: #a9bccd;
}

.zentrenliste-anzahl {
    padding: 2px 9px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 999px;
    white-space: nowrap;
}

.zentrenliste-pfeil {
    width: 16px;
    height: 16px;
    fill: #c3d2de;
    transition: fill .15s ease, transform .15s ease;
}

.zentrenliste a:hover .zentrenliste-pfeil {
    fill: var(--pm-navy);
    transform: translateX(2px);
}

@media (max-width: 560px) {
    .zentrenbereich-inhalt {
        padding: 22px 15px 32px;
    }

    .zentrenliste {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}

/* ===== Ergebnisseite: Schalter und Hinweis ===================== */

.filter-schalter {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 4px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--pm-text);
    cursor: pointer;
}

.filter-schalter input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--pm-navy);
}

/* Hinweis, dass die Trefferliste bewusst begrenzt ist */
.trefferhinweis {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 18px;
    padding: 13px 16px;
    font-size: .875rem;
    line-height: 1.5;
    color: #6b4a08;
    background: #fdf8ee;
    border: 1px solid #f0d9a4;
    border-left: 3px solid var(--pm-gold);
    border-radius: var(--pm-radius);
}

.trefferhinweis svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    fill: #a88318;
}

/* ===== Gesundheitszentrum auf der Arztseite ==================== */

.zentrumskarten {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zentrumskarten > li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 18px;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
}

.zentrumskarte-logo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
}

.zentrumskarte-text {
    min-width: 0;
}

.zentrumskarte-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);
}

.zentrumskarte-marke {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--pm-navy);
    background: #dbe8f3;
    border-radius: 999px;
    white-space: nowrap;
}

.zentrumskarte-anschrift {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 7px 0 0;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--pm-text);
}

.zentrumskarte-anschrift svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    fill: #a9bccd;
}

.zentrumskarte-kontakt {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

.zentrumskarte-kontakt li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .875rem;
    min-width: 0;
}

.zentrumskarte-kontakt svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    fill: #a9bccd;
}

.zentrumskarte-kontakt a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .zentrumskarten > li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        padding: 13px 14px;
    }

    .zentrumskarte-logo {
        width: 52px;
        height: 52px;
    }
}

/* ===== Landingpage Fachrichtung + Ort ========================== */

.landingseite {
    max-width: var(--pm-breite);
    margin: 0 auto;
    padding: 28px 20px 52px;
}

.landingkarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landingkarten a {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 16px;
    align-items: start;
    gap: 16px;
    height: 100%;
    padding: 17px 19px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.landingkarten a:hover {
    text-decoration: none;
    border-color: #b9d1e3;
    box-shadow: 0 8px 24px rgba(16, 67, 120, .11);
    transform: translateY(-2px);
}

.landingkarte-bild {
    width: 72px;
    height: 72px;
    object-fit: cover;
    background: var(--pm-flaeche);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--pm-rand);
}

.landingkarte-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.landingkarte-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.landingkarte-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pm-navy);
}

/* Online-Termin ist das stärkste Auswahlkriterium — deshalb sichtbar
   ausgezeichnet statt in der Fließzeile versteckt. */
.landingkarte-termin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 3px 10px;
    font-size: .6875rem;
    font-weight: 700;
    color: #15803d;
    background: #eaf6ee;
    border: 1px solid #bfe2cd;
    border-radius: 999px;
    white-space: nowrap;
}

.landingkarte-termin svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.landingkarte-faecher {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.landingkarte-faecher span {
    padding: 2px 9px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 999px;
}

.landingkarte-adresse {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--pm-gedaempft);
}

.landingkarte-adresse svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 3px;
    fill: #a9bccd;
}

.landingkarte-adresse strong {
    font-weight: 600;
    color: var(--pm-text);
}

/* Leistungen als eigene Marken. Die Abfrage liefert sie mit "|" verbunden;
   als Fließtext ausgegeben stand dieses Zeichen sichtbar in der Karte. */
.landingkarte-leistungen {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 1px;
}

.landingkarte-leistungen > span {
    padding: 2px 9px;
    font-size: .6875rem;
    line-height: 1.4;
    color: #5c7791;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
}

/* Zähler für die restlichen Leistungen — bewusst unauffälliger */
.landingkarte-leistungen > span.landingkarte-mehr {
    font-weight: 700;
    color: var(--pm-gedaempft);
    background: transparent;
    border-style: dashed;
}

.landingkarte-pfeil {
    align-self: center;
    width: 16px;
    height: 16px;
    fill: #c3d2de;
    transition: fill .15s ease, transform .15s ease;
}

.landingkarten a:hover .landingkarte-pfeil {
    fill: var(--pm-navy);
    transform: translateX(2px);
}

.landing-mehr {
    margin: 26px 0 0;
    text-align: center;
}

.landing-verwandt {
    margin: 34px 0 0;
}

.landing-verwandt nav + nav {
    margin-top: 26px;
}

/* Leerer Ort: kein trauriger grauer Kasten, sondern ein Weg weiter */
.landing-leer {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    max-width: 760px;
    padding: 26px 28px;
    background: linear-gradient(140deg, #f4f8fb, #ffffff);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
}

.landing-leer > svg {
    width: 54px;
    height: 54px;
    padding: 13px;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 50%;
}

.landing-leer h2 {
    margin: 0 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.landing-leer p {
    margin: 0 0 16px;
    font-size: .9375rem;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .landingseite {
        padding: 20px 15px 36px;
    }

    .landingkarten {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .landingkarten a {
        grid-template-columns: 58px minmax(0, 1fr) 14px;
        gap: 13px;
        padding: 14px 15px;
    }

    .landingkarte-bild {
        width: 58px;
        height: 58px;
    }

    .landing-leer {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px;
    }
}

/* ==============================================================
   Handy und Tablet — eine geschlossene Fassung
   ==============================================================

   Das Zeilenlayout der Kopfzeile galt bisher erst ab 981 px. Darunter
   fielen Logo, Menüknopf, Lupe, "Praxis eintragen" und Login in
   gestapelte Blöcke zurück und füllten den halben Bildschirm. Dieser
   Abschnitt steht bewusst am Dateiende, damit er die früheren Regeln
   sicher übersteuert.
   ============================================================== */

@media (max-width: 980px) {

    /* --- Kopfzeile: eine Reihe, Logo links, Bedienung rechts --- */

    /* Die Menütafel wird NICHT positioniert und hat KEINEN eigenen Bildlauf.
       Vier Anläufe mit absoluter und fester Positionierung sind daran
       gescheitert, dass die obersten Punkte hinter der Kopfzeile lagen oder
       aus dem eigenen Bildlauf gerollt waren.

       Jetzt steht die Tafel schlicht im Fluss: Die Kopfzeile bricht um, die
       Liste bildet eine eigene Zeile über die volle Breite und schiebt den
       Seiteninhalt nach unten. Gerollt wird die Seite, nicht die Tafel.
       Damit kann kein Punkt mehr verdeckt oder weggerollt sein — es gibt
       nichts mehr, was ihn verdecken oder wegrollen könnte. */
    .kopf,
    .kopf-reihe {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 10px 15px;
        background: var(--pm-weiss);
        border-bottom: 1px solid var(--pm-rand);
    }

    /* Löst die Verschachtelung auf: Menüknopf und Liste werden dadurch zu
       unmittelbaren Elementen der Kopfzeile und können getrennt umbrechen. */
    .kopf .hauptnavigation {
        display: contents;
    }

    .kopf-marke {
        order: 1;
        flex: 1 1 auto;
        justify-content: flex-start;
        min-width: 0;
    }

    .kopf-marke img {
        height: 40px;
    }

    .kopf-aktionen {
        order: 2;
        flex: 0 0 auto;
        gap: 4px;
        padding: 0;
    }

    /* Auf dem Handy tragen diese beiden zu viel Breite — sie stehen
       stattdessen unten im aufgeklappten Menü. */
    .kopf-eintragen,
    .kopf-anmelden {
        display: none;
    }

    .kopf .navigation-schalter {
        order: 3;
    }

    /* Fingerfreundliche Flächen: 44 px sind das übliche Mindestmaß */
    .lupe-schalter {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
    }

    /* Bewusst align-items: stretch — die drei Streifen haben keine eigene
       Breite und würden bei "center" auf null zusammenfallen. */
    .navigation-schalter {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0 11px;
    }

    /* --- Menü als Klapptafel unter der Kopfzeile ---

       Alle Regeln hier tragen bewusst den Vorsatz .kopf. Die Datei enthält
       aus früheren Ausbaustufen rund zwanzig Handy-Blöcke, die dieselben
       Klassen anfassen; mit einer Klasse mehr im Selektor gewinnen diese
       Regeln unabhängig von der Reihenfolge. */

    /* Feste Tafel unter dem Kopf, die den Rest des Bildschirms füllt.
       Vorher hing sie am Kopf und war höher als der Bildschirm — beim
       Rollen verschwanden die obersten Punkte nach oben aus dem Bild.
       So beginnt sie immer beim ersten Punkt und rollt in sich. */
    /* An den Kopf gehängt statt auf 64 px festgenagelt: top: 100% bezieht
       sich auf die tatsächliche Höhe der Kopfzeile. Bei einer festen Angabe
       verschwanden die obersten Punkte hinter dem Kopf, sobald dieser auch
       nur ein paar Pixel höher wurde als angenommen. Der Kopf ist sticky
       und damit Bezugsrahmen — die Tafel wandert beim Rollen mit. */
    .kopf .navigation-liste {
        order: 9;
        flex: 1 0 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: auto;
        margin: 10px -15px -10px;
        padding: 0 0 12px;
        background: var(--pm-weiss);
        border-top: 1px solid var(--pm-rand);
        text-align: left;
    }

    .kopf .navigation-liste.offen {
        display: flex;
    }

    .kopf .navigation-liste > li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid var(--pm-flaeche);
        text-align: left;
    }

    .kopf .navigation-liste > li > a {
        display: block;
        padding: 12px 20px;
        font-size: 1rem;
        font-weight: 600;
        color: var(--pm-navy);
        text-align: left;
    }

    /* Untermenüs stehen offen: Aufklappen im Aufklappen ist auf dem Handy
       ein Bedienrätsel — man weiß nicht, ob man öffnet oder navigiert. */
    /* Die Aufklappregeln der Desktop-Fassung tragen zwei Klassen und einen
       Zustand (.hat-mega:hover .megamenue) und schlagen damit einen Selektor
       aus zwei Klassen. Sie müssen hier ausdrücklich mitgenannt werden,
       sonst bleibt das Mega-Menü ein dreispaltiges Raster. */
    .kopf .untermenue,
    .kopf .megamenue,
    .kopf .hat-untermenue:hover .untermenue,
    .kopf .hat-untermenue:focus-within .untermenue,
    .kopf .hat-mega:hover .megamenue,
    .kopf .hat-mega:focus-within .megamenue {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        max-width: 100%;
        transform: none;
        margin: 0;
        padding: 2px 0 8px;
        background: var(--pm-flaeche);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-align: left;
    }

    .kopf .megamenue::before {
        display: none;
    }

    .kopf .mega-spalte,
    .kopf .mega-spalte-breit {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .kopf .megamenue ul {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kopf .mega-spalte + .mega-spalte {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--pm-rand);
    }

    .kopf .mega-titel {
        display: block;
        margin: 0;
        padding: 8px 20px 2px;
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--pm-gedaempft);
        text-align: left;
    }

    .kopf .untermenue li,
    .kopf .megamenue li {
        width: auto;
        border: 0;
        text-align: left;
    }

    /* Auf dem Desktop werden lange Fachnamen bei 250 px abgeschnitten.
       Auf dem Handy ist dafür kein Platz — dort brechen sie um. */
    .kopf .untermenue li a,
    .kopf .megamenue li a,
    .kopf .untermenue > li > a,
    .kopf .megamenue a {
        display: block;
        max-width: none;
        margin: 0;
        padding: 9px 20px 9px 32px;
        font-size: .9375rem;
        font-weight: 400;
        line-height: 1.35;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        border-radius: 0;
        text-align: left;
    }

    .kopf .mega-alle {
        margin: 0;
        padding: 6px 0 0;
    }

    /* mega-alle ist ein Absatz mit Link darin — der Innenabstand gehört
       an den Link, damit die ganze Zeile antippbar bleibt. */
    .kopf .mega-alle a {
        padding: 10px 20px 10px 32px;
        font-weight: 600;
    }

    /* Der Aufklapppfeil zeigt auf dem Handy nichts an — alles ist offen */
    .kopf .hat-untermenue > a::after {
        display: none;
    }

    .kopf .untermenue-hervor {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--pm-rand);
    }

    .kopf .untermenue-hervor > a {
        display: flex;
        justify-content: flex-start;
        padding: 12px 20px;
    }

    /* Eintragen und Login am Fuß des Menüs */
    .kopf .menue-aktionen {
        display: flex;
        gap: 10px;
        padding: 14px 20px 4px;
        border-bottom: 0;
    }

    /* Die Regel für Menülinks weiter oben färbt jeden Link in der Liste
       navy und gibt ihm Blockabstände. Für die beiden Schaltflächen am Fuß
       ist das falsch — dort stand weiße Schrift auf navyfarbenem Grund als
       navy auf navy da. Diese Regel ist spezifischer und gewinnt. */
    .kopf .navigation-liste > li.menue-aktionen > a.knopf {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        padding: 11px 16px;
        font-size: .9375rem;
        font-weight: 700;
        color: var(--pm-weiss);
        text-align: center;
    }

    .kopf .navigation-liste > li.menue-aktionen > a.knopf-umriss {
        color: var(--pm-navy);
    }

    /* --- Bühne und Bänder --- */

    .buehne {
        min-height: 190px;
    }

    .kopf-suche {
        padding: 12px 15px 14px;
    }

    /* --- Zweispaltige Seiten werden einspaltig --- */

    .suchseite,
    .fachseite,
    .sprachraster {
        display: block;
    }

    .filter {
        margin-bottom: 22px;
    }

    /* --- Tabellen bekommen einen Schiebebereich statt Überlauf --- */

    .verwaltungstabelle,
    .preisliste {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Nichts darf breiter sein als der Bildschirm --- */

    img,
    svg,
    iframe,
    video {
        max-width: 100%;
    }

    pre,
    code,
    .passwort,
    .geheimnis {
        word-break: break-word;
        white-space: pre-wrap;
    }
}

@media (max-width: 560px) {

    .kopf-marke img {
        height: 34px;
    }

    /* Auf schmalen Geräten sind die Kacheln einspaltig — sonst bleibt
       je Spalte zu wenig Platz für Name und Adresse. */
    .raster,
    .raster-zwei,
    .raster-drei,
    .raster-sechs {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 0 15px;
    }

    .treffer {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .treffer img,
    .treffer .arzt-platzhalter {
        width: 64px;
        height: 64px;
    }

    .treffer-aktionen {
        flex-wrap: wrap;
        gap: 8px;
    }

    .treffer-aktionen .knopf {
        flex: 1 1 140px;
        text-align: center;
    }

    /* Zahlenreihe im Kopfband bricht sonst unschön */
    .fachbanner-zahlen {
        gap: 8px 14px;
    }

    .fachbanner-zahlen strong {
        font-size: 1.125rem;
    }

    .blaettern {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}

/* ===== Statistikseite: volle Breite und Nutzungszahlen ========= */

/* Die Seite war auf 860 px begrenzt — auf einem breiten Bildschirm stand
   sie als schmale Säule in der Mitte, obwohl gerade hier die Fülle des
   Verzeichnisses wirken soll. Abstände bewusst knapp: die Seite lebt von
   den Zahlen, nicht von der Luft dazwischen. */
.statistikseite {
    max-width: 1320px;
    margin: 0 auto 44px;
    padding: 0 28px;
}

.statistik-held {
    max-width: 1320px;
    margin: 18px auto 16px;
    padding: 30px 32px 26px;
}

.statistik-held h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.statistik-held p {
    max-width: 82ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
}

.statistik-block {
    margin: 0 0 22px;
}

.statistik-zweispaltig {
    gap: 22px;
}

/* Vier Kacheln nebeneinander */
.statistik-kacheln {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.statistik-kachel {
    gap: 2px;
    padding: 16px 18px;
}

.statistik-kachel strong {
    font-size: 1.75rem;
    line-height: 1.15;
}

.statistik-kachel svg {
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
}

/* --- Nutzung ---------------------------------------------------- */

.nutzungsblock {
    padding: 22px 26px 20px;
    background: linear-gradient(135deg, #17568f 0%, var(--pm-navy) 55%, #0c3462 100%);
    border-radius: 18px;
    color: var(--pm-weiss);
}

.nutzung-kopf {
    margin: 0 0 16px;
    text-align: center;
}

.nutzung-kopf h2 {
    margin: 0 0 5px;
    font-size: 1.3125rem;
    font-weight: 700;
    color: var(--pm-weiss);
}

.nutzung-kopf p {
    max-width: 70ch;
    margin: 0 auto;
    font-size: .9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}

.nutzungszahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nutzungszahlen li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    padding: 15px 14px;
    text-align: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
}

.nutzungszahlen strong {
    font-size: 1.6875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--pm-weiss);
}

.nutzungszahlen span {
    font-size: .8125rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .78);
}

@media (max-width: 1100px) {
    .statistikseite,
    .statistik-held {
        max-width: var(--pm-breite);
    }
}

@media (max-width: 700px) {
    .statistikseite {
        padding: 0 15px;
        margin-bottom: 40px;
    }

    .statistik-held {
        margin: 16px auto;
        padding: 30px 18px 26px;
        border-radius: 14px;
    }

    .statistik-held h1 {
        font-size: 1.625rem;
    }

    .statistik-kacheln {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .statistik-kachel strong {
        font-size: 1.625rem;
    }

    .nutzungsblock {
        padding: 22px 18px 20px;
        border-radius: 14px;
    }

    .nutzungszahlen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .nutzungszahlen strong {
        font-size: 1.5rem;
    }
}

/* ===== Rechtstexte: Impressum und Datenschutz ================== */

.rechtsseite {
    max-width: 1100px;
    margin: 0 auto 60px;
    padding: 30px 24px 0;
}

.rechtsblock {
    margin: 0 0 34px;
}

.rechtsblock h2 {
    margin: 0 0 12px;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.rechtsblock h3 {
    margin: 22px 0 8px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.rechtsblock p {
    max-width: 84ch;
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 1.7;
}

/* Hinweis mit Kontaktadresse — abgesetzt, damit er nicht im Fließtext untergeht */
.rechtshinweis {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: none;
    margin: 20px 0 0;
    padding: 14px 18px;
    background: var(--pm-flaeche);
    border-left: 3px solid var(--pm-navy);
    border-radius: var(--pm-radius);
    line-height: 1.6;
}

.rechtshinweis svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    fill: var(--pm-navy);
}

/* Die Pflichtangaben als Karten — als Fließtext wären sie schlecht
   auffindbar, gerade darauf kommt es bei einem Impressum aber an. */
.rechtskarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 4px 0 0;
}

.rechtskarte {
    padding: 20px 22px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 14px;
}

.rechtskarte h3 {
    margin: 0 0 10px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pm-gedaempft);
}

.rechtskarte p {
    max-width: none;
    margin: 0;
    line-height: 1.65;
}

.rechtsliste {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rechtsliste li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.rechtsliste svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    fill: #a9bccd;
}

.rechtsdaten {
    margin: 0;
}

.rechtsdaten dt {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pm-gedaempft);
}

.rechtsdaten dd {
    margin: 2px 0 12px;
    font-size: .9375rem;
    line-height: 1.5;
}

.rechtsdaten dd:last-child {
    margin-bottom: 0;
}

.rechtsfuss {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--pm-rand);
}

@media (max-width: 700px) {
    .rechtsseite {
        padding: 22px 15px 0;
        margin-bottom: 40px;
    }

    .rechtsblock h2 {
        font-size: 1.1875rem;
    }

    .rechtskarten {
        grid-template-columns: minmax(0, 1fr);
    }

    .rechtsfuss .knopf {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* ===== Philosophieseite ======================================== */

.philosophie {
    max-width: 1100px;
    margin: 0 auto 64px;
    padding: 32px 24px 0;
}

/* --- Namensherkunft -------------------------------------------

   Hier stand eine gesetzte Wortmarke "Prelomed" mit abgesetzter Mitte.
   Die gibt es als Logo nicht — eine erfundene Schreibweise der Marke
   verwirrt mehr, als sie erklärt. Stattdessen stehen die beiden
   Ursprungsbegriffe als Marken nebeneinander. */

.philo-herkunft {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 20px !important;
}

.philo-herkunft span {
    padding: 9px 20px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 999px;
}

.philo-herkunft em {
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-gold);
}

/* --- Video mit Klickfreigabe ---------------------------------- */

.philo-video {
    margin: 0 0 40px;
}

.videobox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    aspect-ratio: 16 / 9;
    justify-content: center;
    flex-direction: column;
    padding: 28px;
    text-align: center;
    background: linear-gradient(140deg, #17568f 0%, var(--pm-navy) 55%, #0c3462 100%);
    border-radius: 18px;
    cursor: pointer;
    overflow: hidden;
}

/* Feines Punktraster wie in den Bändern */
.videobox::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .12) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
}

.videobox-abspielen {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    transition: background .15s ease, transform .15s ease;
}

.videobox-abspielen svg {
    width: 34px;
    height: 34px;
    margin-left: 4px;
    fill: var(--pm-weiss);
}

.videobox:hover .videobox-abspielen,
.videobox:focus-visible .videobox-abspielen {
    background: rgba(255, 255, 255, .26);
    transform: scale(1.06);
}

.videobox-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 44ch;
}

.videobox-text strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-weiss);
}

.videobox-text > span {
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .76);
}

/* Sobald der Rahmen da ist, tritt die Gestaltung zurück */
.videobox-laeuft {
    display: block;
    padding: 0;
    cursor: default;
}

.videobox-laeuft::after {
    display: none;
}

.videobox iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Die drei Säulen ------------------------------------------ */

.philo-saeulen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 0 0 40px;
}

.philo-saeule {
    padding: 26px 24px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 16px;
}

.philo-zeichen {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 0 14px;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 14px;
}

.philo-zeichen svg {
    width: 26px;
    height: 26px;
}

.philo-saeule h2 {
    margin: 0 0 8px;
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.philo-saeule p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
}

/* --- Fließtext ------------------------------------------------ */

.philo-block {
    margin: 0 0 40px;
}

.philo-block h2 {
    margin: 0 0 14px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.philo-block p {
    max-width: 84ch;
    margin: 0 0 14px;
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* Der Leitsatz trägt die Kernaussage — abgesetzt statt hervorgehoben */
.philo-leitsatz {
    margin: 22px 0 0;
    padding: 18px 22px;
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--pm-navy);
    background: var(--pm-flaeche);
    border-left: 3px solid var(--pm-gold);
    border-radius: var(--pm-radius);
}

/* --- Angebot für Ärztinnen und Ärzte -------------------------- */

.philo-angebot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
    background: linear-gradient(140deg, #f4f8fb, #ffffff);
    border: 1px solid var(--pm-rand);
    border-radius: 18px;
}

.philo-angebot-text h2 {
    margin: 0 0 10px;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.philo-angebot-text p {
    max-width: 70ch;
    margin: 0 0 10px;
    font-size: .9375rem;
    line-height: 1.65;
}

.philo-angebot-text p:last-child {
    margin-bottom: 0;
}

.philo-angebot-aktion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
}

.philo-angebot-aktion .knopf {
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .philo-angebot {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .philosophie {
        padding: 22px 15px 0;
        margin-bottom: 40px;
    }

    .philo-block h2 {
        font-size: 1.25rem;
    }

    .philo-herkunft span {
        font-size: .9375rem;
        padding: 7px 16px;
    }

    .videobox {
        gap: 14px;
        padding: 20px;
        border-radius: 14px;
    }

    .videobox-abspielen {
        width: 62px;
        height: 62px;
    }

    .videobox-abspielen svg {
        width: 26px;
        height: 26px;
    }

    .videobox-text strong {
        font-size: 1.0625rem;
    }

    .philo-leitsatz {
        font-size: 1rem;
        padding: 15px 18px;
    }
}

/* ===== Datenschutzseite ======================================== */

.datenschutz-karte {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.datenschutz-zeichen {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 0 12px;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 12px;
}

.datenschutz-zeichen svg {
    width: 22px;
    height: 22px;
}

/* Diese Karten tragen eine Überschrift in normaler Schreibweise, nicht die
   Versalien der Impressumskarten — hier ist es eine Aussage, kein Etikett. */
.datenschutz-karte h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pm-navy);
}

.datenschutz-karte p {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--pm-text);
}

/* Der Ablauf der Messung als nummerierte Schritte — das ist der Punkt,
   an dem Erklärung mehr wert ist als Rechtsprosa. */
.datenschutz-ablauf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 20px 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.datenschutz-ablauf li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 20px 20px 22px;
    background: var(--pm-flaeche);
    border-radius: 14px;
    counter-increment: schritt;
}

.datenschutz-ablauf li::before {
    content: counter(schritt);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0 0 6px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-radius: 50%;
}

.datenschutz-ablauf strong {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.datenschutz-ablauf span {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--pm-text);
}

/* --- Abschluss mit den verbindlichen Texten -------------------- */

.rechtsblock-abschluss {
    margin-bottom: 0;
}

.datenschutz-abschluss {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
    background: linear-gradient(140deg, #f4f8fb, #ffffff);
    border: 1px solid var(--pm-rand);
    border-radius: 18px;
}

.datenschutz-abschluss h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
}

.datenschutz-abschluss p {
    max-width: 62ch;
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
}

.datenschutz-abschluss-aktion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
}

.datenschutz-abschluss-aktion .knopf {
    text-align: center;
    white-space: nowrap;
}

.datenschutz-fuss {
    margin: 16px 0 0;
    font-size: .8125rem;
    color: var(--pm-gedaempft);
}

@media (max-width: 900px) {
    .datenschutz-abschluss {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .datenschutz-ablauf {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .datenschutz-abschluss {
        padding: 20px;
        border-radius: 14px;
    }

    .datenschutz-abschluss-aktion .knopf {
        flex: 1 1 100%;
    }
}

/* ===== Autoren & Texte ========================================= */

.autorenseite {
    max-width: 1100px;
    margin: 0 auto 64px;
    padding: 32px 24px 0;
}

/* --- Die Aussage zur KI trägt die Seite ----------------------- */

.autoren-ki {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 24px;
    margin: 0 0 40px;
    padding: 30px 32px;
    background: linear-gradient(135deg, #17568f 0%, var(--pm-navy) 55%, #0c3462 100%);
    border-radius: 18px;
    color: var(--pm-weiss);
}

.autoren-ki-zeichen {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    color: var(--pm-weiss);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
}

.autoren-ki-zeichen svg {
    width: 34px;
    height: 34px;
}

.autoren-ki-text h2 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pm-weiss);
}

.autoren-ki-text p {
    max-width: 78ch;
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}

.autoren-ki-text p:last-child {
    margin-bottom: 0;
}

.autoren-ki-text strong {
    color: var(--pm-weiss);
}

/* --- Wer schreibt --------------------------------------------- */

.autoren-block {
    margin: 0 0 40px;
}

.autoren-block h2 {
    margin: 0 0 16px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.autorenkarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.autorenkarte {
    padding: 24px 22px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 16px;
}

.autoren-zeichen {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 0 13px;
    color: var(--pm-navy);
    background: #e7f0f7;
    border-radius: 13px;
}

.autoren-zeichen svg {
    width: 24px;
    height: 24px;
}

.autorenkarte h3 {
    margin: 0 0 7px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.autorenkarte p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
}

/* --- Medizinischer Hinweis ------------------------------------ */

.autoren-warnung-titel {
    display: flex;
    align-items: center;
    gap: 10px;
}

.autoren-warnung-titel svg {
    width: 24px;
    height: 24px;
    fill: #b8860b;
}

/* Bewusst nicht rot: eine Warnfarbe würde den Eindruck erwecken, es sei
   etwas schiefgegangen. Es ist eine ernste, aber normale Rechtsangabe. */
.autoren-warnung {
    padding: 24px 28px;
    background: #fdf8ee;
    border: 1px solid #f0d9a4;
    border-left: 4px solid var(--pm-gold);
    border-radius: var(--pm-radius);
}

.autoren-warnung p {
    max-width: 88ch;
    margin: 0 0 14px;
    font-size: .9375rem;
    line-height: 1.7;
    color: #4a3a1c;
}

.autoren-warnung strong {
    color: #2f2410;
}

.autoren-warnung-schluss {
    margin: 18px 0 0 !important;
    padding-top: 16px;
    border-top: 1px solid #f0d9a4;
    font-size: 1rem !important;
    font-weight: 700;
}

.autoren-hinweis-fehler {
    margin: 18px 0 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--pm-gedaempft);
}

/* --- Mitmachen ------------------------------------------------ */

.autoren-mitmachen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
    background: linear-gradient(140deg, #f4f8fb, #ffffff);
    border: 1px solid var(--pm-rand);
    border-radius: 18px;
}

.autoren-mitmachen-text h2 {
    margin: 0 0 10px;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.autoren-mitmachen-text p {
    max-width: 70ch;
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
}

.autoren-mitmachen-aktion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
}

.autoren-mitmachen-aktion .knopf {
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .autoren-mitmachen {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .autorenseite {
        padding: 22px 15px 0;
        margin-bottom: 40px;
    }

    .autoren-ki {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 22px 20px;
        border-radius: 14px;
    }

    .autoren-ki-zeichen {
        width: 56px;
        height: 56px;
    }

    .autoren-ki-text h2 {
        font-size: 1.25rem;
    }

    .autoren-block h2 {
        font-size: 1.25rem;
    }

    .autoren-warnung {
        padding: 18px 20px;
    }

    .autoren-mitmachen {
        padding: 20px;
        border-radius: 14px;
    }

    .autoren-mitmachen-aktion .knopf {
        flex: 1 1 100%;
    }
}

/* --- Statistik: Balken und Ring enger setzen ------------------- */

.statistik-balken li {
    gap: 10px;
    padding: 4px 0;
}

.statistik-donutbox {
    padding: 14px;
}

.statistik-donut {
    width: 150px;
    height: 150px;
}

/* Die Überschriften der beiden Spalten brauchen weniger Vorlauf */
.statistik-zweispaltig h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
}

/* ===== Kopfband: Unterzeile ==================================== */

/* Die Klasse war nie definiert — der Absatz trug die Standardabstände des
   Browsers (je ein Zeilenmaß oben und unten), daher die große Lücke unter
   der Überschrift. */
.fachbanner-unterzeile {
    margin: 5px 0 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--pm-gedaempft);
}

/* ===== Philosophie: Text über die volle Breite ================= */

.philosophie {
    max-width: 1320px;
}

/* Der Fließtext war auf 84 Zeichen Zeilenlänge begrenzt. Auf Wunsch läuft
   er jetzt über die ganze Breite des Inhaltsbereichs. */
.philo-block p,
.philo-block .philo-herkunft {
    max-width: none;
}

.philo-angebot-text p {
    max-width: none;
}

/* ===== Statistik: enger und ohne Grafik im Text ================ */

/* Die Pulslinie lag als 70 px hohes Band über der unteren Hälfte des
   Kopfbereichs und lief dadurch quer hinter Überschrift und Absatz durch.
   Sie ist rein schmückend — bei kompakter Gestaltung bleibt kein Platz,
   an dem sie nicht mit dem Text kollidiert. Deshalb ausgeblendet statt
   verschoben; das Markup bleibt für später erhalten. */
.statistik-puls {
    display: none;
}

.statistik-held {
    padding: 22px 28px 30px;
    margin: 14px auto 14px;
}

.statistik-held h1 {
    font-size: 1.75rem;
    margin-bottom: 6px;
}

.statistik-held p {
    font-size: .9375rem;
    line-height: 1.55;
}

/* --- Alles eine Spur enger --------------------------------- */

.statistik-block {
    margin: 0 0 18px;
}

.statistik-kacheln {
    gap: 10px;
}

.statistik-kachel {
    padding: 14px 16px;
}

.statistik-kachel strong {
    font-size: 1.625rem;
}

.statistik-kachel span {
    font-size: .8125rem;
}

.nutzungsblock {
    padding: 18px 22px 16px;
}

.nutzung-kopf {
    margin: 0 0 12px;
}

.nutzung-kopf h2 {
    font-size: 1.1875rem;
}

.nutzung-kopf p {
    font-size: .875rem;
}

.nutzungszahlen {
    gap: 10px;
}

.nutzungszahlen li {
    padding: 12px;
}

.nutzungszahlen strong {
    font-size: 1.5rem;
}

.nutzungszahlen span {
    font-size: .75rem;
}

/* Balkenliste: der Name bekommt eine feste Spalte, damit der Balken
   nicht in die Beschriftung läuft. */
.statistik-balken li {
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 64px;
    gap: 10px;
    padding: 3px 0;
}

.balken-wert {
    text-align: right;
    white-space: nowrap;
}

.statistik-donutbox {
    padding: 12px;
}

.statistik-donut {
    width: 132px;
    height: 132px;
}

/* --- Statistik: drei Blöcke in einer Reihe -------------------- */

/* Bundesländer, Online-Termin und Fachrichtungen nebeneinander. Die Ring-
   grafik in der Mitte braucht wenig Breite, die beiden Balkenlisten teilen
   sich den Rest zu gleichen Teilen. */
.statistik-zweispaltig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

/* Die Balken haben keine feste Breite mehr, sondern füllen ihre Spalte.
   Ohne das liefen sie in schmalen Spalten über den Rand hinaus. */
.balken-grafik {
    width: 100%;
    height: 14px;
}

/* Enger als in der vollen Breite: Name und Wert müssen Platz für den
   Balken lassen. */
.statistik-zweispaltig .statistik-balken li {
    grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 52px;
    gap: 8px;
}

.statistik-zweispaltig .balken-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.statistik-zweispaltig .balken-wert {
    font-size: .8125rem;
}

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

@media (max-width: 1100px) {
    /* Zu dritt wird es zu eng — die Ringgrafik rückt neben die
       Bundesländer, die Fachrichtungen darunter. */
    .statistik-zweispaltig {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .statistik-zweispaltig > div:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .statistik-zweispaltig {
        grid-template-columns: minmax(0, 1fr);
    }

    .statistik-zweispaltig > div:last-child {
        grid-column: auto;
    }

    .statistik-zweispaltig .statistik-balken li {
        grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 56px;
    }
}

/* --- Statistik: Kassenverträge -------------------------------- */

.balken-kasse {
    fill: #2f8f6b;
}

/* Kassen und Sprachen nebeneinander. Beide Listen sind gleich aufgebaut,
   deshalb gleiche Breite — die getönte Fläche hebt nur die Kassen hervor,
   weil sie die aussagekräftigere Angabe sind. */
/* Mindestspalte 300 statt 340: Bei 28 px Polsterung bleiben auf einem
   390er Schirm nur 334 px Inhalt — eine 340er Spalte hätte die Seite
   waagrecht verschiebbar gemacht. */
.statistik-paar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    gap: 20px;
}

.statistik-kassen {
    padding: 22px 26px;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 16px;
}

.statistik-sprachen {
    padding: 22px 26px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 16px;
}

.statistik-sprachen h2 {
    margin: 0 0 8px;
}

.statistik-sprachen p {
    max-width: none;
    margin: 0 0 14px;
    font-size: .9375rem;
    line-height: 1.6;
}

/* In zwei Spalten ist weniger Platz — Name und Wert schmaler setzen */
.statistik-paar .statistik-balken li {
    grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 56px;
    gap: 9px;
}

.statistik-paar .balken-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.statistik-kassen h2 {
    margin: 0 0 8px;
}

/* Der Vorspann trägt die eigentliche Aussage — Kassenvertrag oder Wahlarzt
   ist in Österreich die erste Frage vor der Fachrichtung. */
.statistik-vorspann {
    max-width: 92ch;
    margin: 0 0 16px;
    font-size: .9375rem;
    line-height: 1.65;
}



.statistik-kassen .klein {
    margin: 12px 0 0;
    color: var(--pm-gedaempft);
}

@media (max-width: 700px) {
    .statistik-kassen,
    .statistik-sprachen {
        padding: 16px 18px;
        border-radius: 14px;
    }
}

/* ===== Kassenarzt- und Wahlarztseiten ========================== */

/* Der Wechsel zwischen beiden Sichten ist die häufigste Anschlussfrage —
   deshalb steht er über der Liste, nicht am Seitenende. */
.kassenwechsel {
    margin: 0 0 20px;
}

.kassenerklaerung {
    margin: 34px 0 0;
    padding: 24px 28px;
    background: var(--pm-flaeche);
    border-radius: 16px;
}

.kassenerklaerung h2 {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-navy);
}

/* Zwei Spalten, weil es genau zwei Möglichkeiten gibt — nebeneinander
   liest sich der Unterschied schneller als untereinander. */
.kassenerklaerung-paar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.kassenerklaerung-paar > div {
    padding: 18px 20px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
}

.kassenerklaerung-paar h3 {
    margin: 0 0 7px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-navy);
}

.kassenerklaerung-paar p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
}

.kassenerklaerung > .klein {
    margin: 16px 0 0;
    color: var(--pm-gedaempft);
}

@media (max-width: 700px) {
    .kassenerklaerung {
        padding: 18px 20px;
        border-radius: 14px;
    }
}

/* ==============================================================
   Handy: Auffangnetz gegen Querlauf
   ==============================================================

   Geprüft wurden alle 54 Raster, alle festen Breiten und alle Regeln mit
   white-space: nowrap. Feste Breiten über 360 px gibt es keine, negative
   Ränder auch nicht. Was bleibt, sind drei Fälle, in denen einzelne lange
   Inhalte die Seite breiter machen können als den Bildschirm — ein Zustand,
   den man am Handy sofort merkt, weil sich die ganze Seite seitlich schieben
   lässt.
   ============================================================== */

@media (max-width: 700px) {

    /* 1. Lange, ununterbrochene Zeichenketten.
          E-Mail-Adressen, Webadressen und zusammengesetzte Fachbegriffe wie
          „Online-Terminvereinbarung" haben keine Trennstelle, an der der
          Browser von sich aus umbricht. */
    body,
    p, li, dd, dt, td, th,
    h1, h2, h3, h4,
    .landingkarte-adresse,
    .zentrumskarte-anschrift,
    .rechtskarte,
    .kassenerklaerung-paar p {
        overflow-wrap: break-word;
    }

    /* Adressen und Verweise dürfen notfalls mitten im Wort brechen —
       lieber unschön getrennt als über den Rand hinaus. */
    a[href^="mailto:"],
    a[href^="http"],
    .landingkarte-leistungen,
    .rechtsliste a {
        word-break: break-word;
    }

    /* 2. Schaltflächen, die nicht umbrechen sollten — aber auf 390 px
          dürfen sie es. Nebeneinander stehende Knöpfe mit langen
          Beschriftungen sind sonst die häufigste Überlaufursache. */
    .philo-angebot-aktion .knopf,
    .datenschutz-abschluss-aktion .knopf,
    .autoren-mitmachen-aktion .knopf,
    .rechtsfuss .knopf,
    .kassenwechsel .knopf,
    .landing-mehr .knopf {
        white-space: normal;
        width: 100%;
        text-align: center;
    }

    /* 3. Marken und Zähler bleiben zusammen, dürfen aber umbrechen,
          wenn mehrere nebeneinander stehen. */
    .landingkarte-termin,
    .zentrenliste-anzahl,
    .zentrumskarte-marke {
        max-width: 100%;
    }

    /* Die Kassenerklärung steht auf schmalen Geräten untereinander */
    .kassenerklaerung-paar {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Letzte Rückversicherung: Sollte trotz allem etwas überstehen, wird es
   abgeschnitten statt die Seite verschiebbar zu machen. Bewusst nur auf
   dem Handy und nur waagrecht — senkrecht muss die Seite rollen können. */
@media (max-width: 700px) {
    html {
        overflow-x: hidden;
    }
}

/* Unsichtbarer Verweis auf ein Köderprofil. Bewusst nicht display:none —
   manche Absauger überspringen ausgeblendete Elemente. So bleibt er im
   Markup wie ein gewöhnlicher Verweis, ist aber ausserhalb des Bildes. */
.koeder-spur {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* ===== Übersicht der Ortsseiten ================================ */

.landingfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
}

.landingfilter-titel {
    margin-right: 4px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-gedaempft);
}

.landingfilter a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: .875rem;
    color: var(--pm-navy);
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
    text-decoration: none;
}

.landingfilter a:hover {
    background: var(--pm-weiss);
}

.landingfilter a.gewaehlt {
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-color: var(--pm-navy);
}

.landingfilter a span {
    font-size: .75rem;
    opacity: .75;
}

/* Fachrichtungen — die erste Ebene */
.landingliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.landingliste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 12px;
    text-decoration: none;
}

.landingliste a:hover {
    border-color: var(--pm-navy);
}

.landingliste-name {
    font-weight: 600;
    color: var(--pm-navy);
}

.landingliste-zahlen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: .75rem;
    color: var(--pm-gedaempft);
    white-space: nowrap;
}

/* Orte — die zweite Ebene. Viele kleine Kacheln, deshalb kompakt. */
.landingorte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.landingorte a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 12px;
    font-size: .875rem;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 10px;
    text-decoration: none;
}

.landingorte a:hover {
    border-color: var(--pm-navy);
}

.landingorte strong {
    color: var(--pm-navy);
}

.landingorte-ort {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pm-text);
}

.landingorte-zahl {
    margin-left: auto;
    font-size: .75rem;
    color: var(--pm-gedaempft);
}

@media (max-width: 700px) {
    .landingliste,
    .landingorte {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ===== Startseite: Bandüberschriften ============================ */

/* Von 1,875 auf 1,5 rem. Die Bänder tragen Abschnittsüberschriften, keine
   Seitentitel — 30 Pixel konkurrierten mit der Überschrift im Bühnenbild
   darüber und ließen die Startseite lauter wirken, als sie sein muss. */
.band h1,
.band h2 {
    font-size: 1.5rem;
}

@media (max-width: 700px) {
    .band h1,
    .band h2 {
        font-size: 1.3125rem;
    }
}