/* Ergänzungen für den Pflegebereich. Alles andere kommt aus prelomed.css —
   hier stehen nur Muster, für die es dort noch keine Entsprechung gibt. */

/* Bereichszeichen im Kopfband. Kreis und Durchsichtigkeit sind vom
   vorhandenen .band-zeichen der Startseite übernommen — nur steht es hier
   neben der Überschrift statt darüber und ist etwas größer. */
.pfl-kopfzeile {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 10px;
}

.zentren-kopf .pfl-kopfzeile h1 {
    margin: 0;
}

.pfl-kopfzeichen {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    color: var(--pm-weiss);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
}

.pfl-kopfzeichen svg {
    width: 29px;
    height: 29px;
}

@media (max-width: 700px) {
    .pfl-kopfzeile {
        gap: 12px;
    }

    .pfl-kopfzeichen {
        width: 46px;
        height: 46px;
    }

    .pfl-kopfzeichen svg {
        width: 23px;
        height: 23px;
    }
}

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

.pfl-gebiet {
    margin: 8px 0 0;
    font-size: .9375rem;
    color: var(--pm-gedaempft);
}

.pfl-gebiet strong {
    color: var(--pm-text);
    font-weight: 600;
}

.pfl-zeichen {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    aspect-ratio: 1;
    font-size: 2rem;
    font-weight: 800;
    color: var(--pm-weiss);
    background: linear-gradient(140deg, #1a5c96, #104378);
    border-radius: 50%;
}

.pfl-ankreuzliste {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.eintrag-form .pfl-ankreuzliste > legend,
.filter .pfl-ankreuzliste > legend,
.verwaltungsformular .pfl-ankreuzliste > legend,
.pfl-ankreuzliste > legend {
    padding: 0;
    margin: 0 0 8px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-navy);
}

.eintrag-form .pfl-ankreuzliste label,
.filter .pfl-ankreuzliste label,
.verwaltungsformular .pfl-ankreuzliste label,
.pfl-ankreuzliste label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 3px 0;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

.pfl-ankreuzliste input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: none;
    margin: 0;
    padding: 0;
}

.pfl-bezirkswahl {
    max-height: 26rem;
    overflow-y: auto;
    padding: 12px 14px;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
}

.pfl-bezirksland {
    margin: 0 0 12px;
}

.eintrag-form .pfl-bezirksland > summary,
.filter .pfl-bezirksland > summary,
.verwaltungsformular .pfl-bezirksland > summary,
.pfl-bezirksland > summary {
    padding: 5px 0;
    font-weight: 600;
    color: var(--pm-navy);
    cursor: pointer;
}

.pfl-bezirksland ul {
    margin: 6px 0 0;
    padding: 0 0 0 8px;
    list-style: none;
    columns: 2;
}

@media (max-width: 640px) {
    .pfl-bezirksland ul {
        columns: 1;
    }
}

.eintrag-form .pfl-bezirksland label,
.filter .pfl-bezirksland label,
.verwaltungsformular .pfl-bezirksland label,
.pfl-bezirksland label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: .9375rem;
    break-inside: avoid;
    cursor: pointer;
}

.pfl-bezirksland input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: none;
}

.eintrag-form .pfl-zustimmung,
.pfl-zustimmung {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    font-size: .9375rem;
    line-height: 1.55;
}

.eintrag-form .pfl-zustimmung > span {
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--pm-text);
}

.pfl-zustimmung input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
}

.pfl-warnung {
    padding: 16px 18px;
    margin: 0 0 20px;
    font-size: .9375rem;
    line-height: 1.55;
    color: #7c4a03;
    background: #fdf6e7;
    border: 1px solid #f0d9a8;
    border-radius: var(--pm-radius);
}

.pfl-rechtstext {
    margin: 26px 0 0;
    padding: 16px 18px;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--pm-gedaempft);
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
}

.pfl-melden {
    margin: 20px 0 0;
    font-size: .875rem;
}

.pfl-melden > summary {
    color: var(--pm-link);
    cursor: pointer;
}

.pfl-kontaktzeile {
    display: block;
    padding: 5px 0;
    color: var(--pm-weiss);
    word-break: break-word;
}

.pfl-kontaktzeile:hover {
    color: var(--pm-weiss);
}

/* ===== Auswahlfelder =================================================
   auswahl.js baut jedes <select> mit acht oder mehr Optionen in ein
   Suchfeld um: Das <select> verschwindet, an seine Stelle tritt
   <div class="auswahl"> mit <input class="auswahl-eingabe">. Die Regeln
   für .zentren-suche input und .filter select greifen dann nicht mehr,
   und das Feld war deutlich kleiner als sein Nachbar.

   Achtung: .auswahl gibt es zweimal. In prelomed.css ist es die
   Filter-Ziehharmonika der Fachrichtungsseite (mit border-top), in
   auswahl.css die Hülle des Suchfeldes. Beide Regeln treffen dieselben
   Elemente — deshalb wird border-top hier ausdrücklich zurückgenommen. */
.zentren-suche .auswahl {
    flex: 1 1 240px;
    min-width: 0;
    border-top: 0;
}

.zentren-suche .auswahl-eingabe {
    padding: .7rem 2.4rem .7rem .95rem;
    font-size: 1rem;
    color: var(--pm-text);
    border: 0;
    border-radius: 10px;
    background-position: right .8rem center;
    background-size: 20px 20px;
}

/* Zwei Felder nebeneinander plus Schaltfläche brauchen mehr als die
   560 Pixel, mit denen die Apothekensuche auskommt. */
.zentren-suche.pfl-suchform {
    max-width: 760px;
}

.filter .auswahl {
    margin: 0 0 16px;
    border-top: 0;
}

.filter .auswahl-eingabe {
    padding: 9px 28px 9px 10px;
    font-size: 1rem;
    color: var(--pm-text);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
    background-position: right 8px center;
}

/* Dieselbe Angleichung in den Formularen: Wird ein Feld umgebaut und das
   daneben nicht, standen bisher zwei verschieden große Felder in einer
   Spalte. */
.eintrag-form .auswahl {
    border-top: 0;
}

.eintrag-form .auswahl-eingabe {
    padding: 9px 30px 9px 11px;
    font-size: .9375rem;
    color: var(--pm-text);
    border: 1px solid var(--pm-rand);
    border-radius: 8px;
    background-position: right 9px center;
}

/* auswahl.css hebt das geöffnete Feld mit einer dunkleren Randfarbe hervor.
   Die Regel dort hat dieselbe Spezifität wie meine, steht aber früher —
   ohne diesen Nachtrag wäre die Hervorhebung weg. */
.filter .auswahl-offen .auswahl-eingabe,
.eintrag-form .auswahl-offen .auswahl-eingabe {
    border-color: var(--pm-navy);
}

/* ===== Eintragsseite =================================================
   Vorteile und Ablauf verwenden .argumente und .ablaufschritte aus
   prelomed.css — dieselben Muster wie auf den Seiten für Webdesign und
   Fotoshooting. Hier stehen nur die Ergänzungen: das Symbol in der
   Vorteilskarte und die Verbindungslinie zwischen den Ablaufschritten. */
/* Die ganze Seite steht in .zentren-seite, also auf 1140 Pixeln. Damit
   fuellen Vorteile, Ablauf und Formular die Breite. Fliesstext bekommt
   trotzdem eine Obergrenze — ueber die volle Breite verliert man beim
   Zeilenwechsel die Zeile. */
.pfl-eintragseite .abschnittstitel {
    margin: 44px 0 18px;
}

/* Drei Felder nebeneinander brauchen mehr Grundbreite als die 200 Pixel
   des Bestandsmusters, sonst rutscht bei mittleren Fenstern eines allein
   in die naechste Zeile. */
@media (min-width: 900px) {
    .pfl-eintragseite .eintrag-form .feldreihe .feld {
        flex: 1 1 260px;
    }

    .pfl-eintragseite .eintrag-form .feld-schmal {
        flex: 0 1 160px;
    }
}

@media (min-width: 1100px) {
    .argumente.pfl-argumente,
    .ablaufschritte.pfl-ablauf {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Der Leitgedanke steht vor allem anderen. Kein Kasten, keine Farbe —
   nur Schriftgröße und Zeilenbreite. Text zum Lesen bleibt auf gut 46rem
   begrenzt, auch wenn der Behälter 1140 Pixel breit ist; über die volle
   Breite verliert man beim Zeilenwechsel die Zeile. */
.pfl-mission {
    max-width: 46rem;
    margin: 8px auto 44px;
    padding: 0 0 32px;
    text-align: center;
    border-bottom: 1px solid var(--pm-rand);
}

.pfl-mission h2 {
    margin: 0 0 20px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.25;
    color: var(--pm-navy);
}

.pfl-mission h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: 16px auto 0;
    background: var(--pm-gold);
    border-radius: 2px;
}

.pfl-mission-lauf {
    margin: 0 0 16px;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--pm-text);
}

/* Der erste Absatz trägt die Bilder — er darf etwas größer sein und
   führt so vom Titel in den Text. */
.pfl-mission-lauf:first-of-type {
    font-size: 1.1875rem;
    line-height: 1.65;
    color: var(--pm-navy);
}

/* Der Kernsatz steht allein zwischen den Absätzen. Etwas größer, in
   Navy, mit Luft darüber und darunter — er ist die Stelle, an der der
   Text kurz innehält. */
.pfl-mission-kern {
    max-width: 34rem;
    margin: 30px auto;
    font-size: 1.3125rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--pm-navy);
}

.pfl-mission-lauf:last-child {
    margin-bottom: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--pm-navy);
}

@media (max-width: 700px) {
    .pfl-mission {
        margin-bottom: 32px;
        padding-bottom: 24px;
        text-align: left;
    }

    .pfl-mission h2::after {
        margin-left: 0;
    }
}

.pfl-argumentkopf {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
}

.argumente.pfl-argumente h3 {
    margin: 0;
}

.pfl-argumentzeichen {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: var(--pm-weiss);
    background: linear-gradient(140deg, #1a5c96, #104378);
    border-radius: 11px;
}

.pfl-argumentzeichen svg {
    width: 21px;
    height: 21px;
}

/* Die Schritte stehen als Karten im Raster. Eine durchgehende Linie
   dahinter macht aus vier Kacheln einen Ablauf — sie liegt hinter den
   Karten und wird von deren weißem Grund unterbrochen, sodass sie nur in
   den Zwischenräumen zu sehen ist. Bei nur einer Spalte, also auf
   schmalen Ansichten, bleibt sie weg. */
.pfl-ablauf {
    position: relative;
}

@media (min-width: 900px) {
    .pfl-ablauf::before {
        content: "";
        position: absolute;
        left: 37px;
        right: 37px;
        top: 37px;
        height: 2px;
        background: var(--pm-rand);
    }

    .ablaufschritte.pfl-ablauf li {
        position: relative;
        z-index: 1;
    }
}

.ablaufschritte.pfl-ablauf li::before {
    box-shadow: 0 0 0 4px var(--pm-weiss);
}

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

@media (min-width: 900px) {
    .pfl-fragen {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 48px;
        border-top: 0;
    }

    .pfl-fragen > details {
        border-top: 1px solid var(--pm-rand);
        border-bottom: 0;
    }
}

.pfl-fragen > details {
    border-bottom: 1px solid var(--pm-rand);
}

.pfl-fragen > details > summary {
    padding: 14px 2px;
    font-weight: 600;
    color: var(--pm-navy);
    cursor: pointer;
    list-style: none;
}

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

.pfl-fragen > details > summary::after {
    content: "+";
    float: right;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--pm-gedaempft);
}

.pfl-fragen > details[open] > summary::after {
    content: "–";
}

.pfl-fragen > details > p {
    margin: 0;
    padding: 0 2px 16px;
    font-size: .9375rem;
    line-height: 1.65;
}

/* Die aufgeklappte Liste bringt auswahl.css bereits fertig mit — weißes
   Feld, Rundung, Schatten, Haken am Gewählten. Hier wird nur die
   Schriftgröße an das jeweilige Eingabefeld angeglichen, damit Feld und
   Liste zusammenpassen.

   .auswahl-leer gibt es wie .auswahl zweimal: in prelomed.css als Hinweis
   unter der Filterliste (mit margin-top), in auswahl.css als Zeile „Kein
   Treffer“ in der Liste. Der Außenabstand wird hier zurückgenommen. */
.zentren-suche .auswahl-eintrag,
.filter .auswahl-eintrag,
.eintrag-form .auswahl-eintrag {
    padding: 8px 11px;
    font-size: .9375rem;
}

.zentren-suche .auswahl-leer,
.filter .auswahl-leer,
.eintrag-form .auswahl-leer {
    margin: 0;
}

.zentren-suche .auswahl-liste {
    border: 0;
    border-radius: 10px;
}

/* Hinweiszeile unter einem Filterfeld. .filter select bringt einen
   Außenabstand nach unten mit, den der Hinweis übernehmen muss, damit er
   am Feld klebt statt am nächsten. */
.filter .pfl-filterhinweis {
    margin: -12px 0 16px;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--pm-gedaempft);
}

/* Nur die Fassung mit Zeichen wird zum Flex-Container. Ohne diese
   Einschränkung träfe es auch den Warnkasten auf der Anbieterseite, und
   dessen <strong> würde dort zu einem eigenen Flex-Element — der Satz
   zerfiele in drei nebeneinander stehende Spalten. */
.pfl-warnung-zeichen {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Das Zeichen steht als eigene Spalte. Bei float sprängen nur die ersten
   Zeilen ein und der Rest liefe darunter durch — bei einem Kasten über die
   volle Breite fällt das unangenehm auf. */
.pfl-warnzeichen {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    color: #7c4a03;
}

.pfl-warnzeichen svg {
    width: 24px;
    height: 24px;
}

/* ===== Sprachband =====================================================
   Steht über dem Inhalt der Eintragsseite. Flaggen als kleine SVG statt
   Emoji: Emoji-Flaggen stellt Windows nicht als Flagge dar, sondern als
   Buchstabenpaar wie "UA" — auf einem Windows-Rechner wäre das Band also
   unbrauchbar.

   Neben jeder Flagge steht der Sprachname in der jeweiligen Sprache.
   Flaggen allein wären hier heikel: Sprache und Staat sind nicht
   dasselbe, und gerade zwischen Ukrainisch und Russisch ist die
   Zuordnung über eine Flagge für manche Menschen eine Zumutung. */
.pfl-sprachband {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 28px;
    padding: 14px 16px;
    background: var(--pm-flaeche);
    border: 1px solid var(--pm-rand);
    border-radius: var(--pm-radius);
}

.pfl-sprachband-text {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-navy);
}

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

.pfl-sprache {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: .875rem;
    color: var(--pm-text);
    text-decoration: none;
    background: var(--pm-weiss);
    border: 1px solid var(--pm-rand);
    border-radius: 999px;
}

a.pfl-sprache:hover {
    color: var(--pm-navy);
    border-color: var(--pm-blau);
}

.pfl-sprache-aktiv {
    font-weight: 600;
    color: var(--pm-weiss);
    background: var(--pm-navy);
    border-color: var(--pm-navy);
}

.pfl-sprache svg {
    width: 21px;
    height: 14px;
    flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.pfl-rechtsvorbehalt {
    max-width: 46rem;
    margin: 36px 0 0;
    padding-top: 18px;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--pm-gedaempft);
    border-top: 1px solid var(--pm-rand);
}