/* ==========================================================
   Therapeutensuche – TYPO3 Extension Styles
   Farben kommen aus den Variablen der Website (siehe dgpt-base.css).
   Eigene Farbwerte stehen hier nicht mehr.

   Schriftgroessen werden hier bewusst nicht gesetzt. Es gilt ueberall die
   Fliesstextgroesse der Website (siehe dgpt-base.css). Schriftstaerken
   bleiben vorerst wie sie sind.
   ========================================================== */

/* ── Wrapper ────────────────────────────────────────────── */
/* Breite und Ausrichtung kommen von der Seite, nicht von der Erweiterung.
   Eine eigene Breitenangabe mit Zentrierung laeuft gegen die Spalte, in
   der das Inhaltselement steht -- der Kasten sitzt dann versetzt zum
   uebrigen Text. */
.therapeutensuche-wrapper {
    font-family: inherit;
}

/* ── Filter-Section ─────────────────────────────────────── */
/* Kein Rahmen, kein Innenabstand: Filter und Trefferliste laufen ueber
   die volle Breite der Spalte, in der das Inhaltselement steht. */
.therapeutensuche-filter {
    background-color: transparent;
    padding: 0 0 20px 0;
}

.therapeutensuche-filter .form-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Zuruecksetzen-Knopf, gestaltet wie der Login-Knopf im Hauptmenue:
   Blau 2 mit dem Verlauf, den Bootstrap auf seine Knoepfe legt.
   Beim Ueberfahren Wechsel auf das dunklere Blau 1. */
#filter-reset {
    background-color: var(--dgpt-blau-2, #4888a3);
    background-image: var(--bs-gradient);
    border: 0;
    color: var(--dgpt-weiss, #ffffff);
    padding-top: calc(var(--bs-btn-padding-y, 0.375rem) + 2px);
    transition: background-color var(--dgpt-transition-normal, 250ms ease);
}

#filter-reset:hover,
#filter-reset:focus-visible {
    background-color: var(--dgpt-blau-1, #004c6d);
    color: var(--dgpt-weiss, #ffffff);
}

/* Die beiden Felder werden von ihrer Beschriftung nach unten geschoben,
   der Knopf hat keine. Ein unsichtbarer Platzhalter in derselben Hoehe
   bringt ihn auf gleiche Linie.
   Ein leeres label waere fuer Screenreader irrefuehrend, deshalb ein
   reines Abstandselement. */
.therapeutensuche-filter .filter-reset-wrap::before {
    content: '';
    display: block;
    margin-bottom: 0.25rem;
    line-height: 1.5;
    font-weight: 600;
    min-height: 1.5em;
}

/* ── Tabelle ────────────────────────────────────────────── */
.therapeutensuche-content {
    margin-top: 1.25rem;
}

/* Tabelle, Koerper, Zeilen und Zellen stehen alle als Bloecke.
   Wird nur die Zeile auf Block gesetzt, rechnet die Tabelle weiter in
   Spalten -- die Eintraege stehen dann in einer schmalen Spalte links,
   statt die Breite zu nutzen. */
#therapeuten-table {
    display: block;
    width: 100% !important;
}

#therapeuten-table tbody {
    display: block;
    width: 100%;
}

/* Die Trefferliste ist eine Tabelle im Quelltext, wird aber nicht als
   Tabelle dargestellt: Name, Adresse, Kontakt und Spezialisierung stehen
   untereinander, ein Block je Eintrag. Das gilt auf jeder Bildschirmbreite.

   Vier Spalten nebeneinander wurden auf mittelbreiten Bildschirmen so eng,
   dass Namen und Strassennamen mitten im Wort umbrachen.

   Der Tabellenkopf entfaellt damit -- er stuende ueber nichts.
   Fuer Screenreader bleibt die Tabellenstruktur im Quelltext erhalten. */
#therapeuten-table thead {
    display: none;
}

#therapeuten-table tbody tr {
    display: block;
    width: 100%;
}

/* Die Hinterlegung der Klasse table-striped liegt auf den Zellen, nicht
   auf der Zeile. Der Innenabstand muss deshalb ebenfalls an den Zellen
   sitzen -- sonst entstuende zwischen den hinterlegten Bloecken eine
   Luecke. Keine Trennlinien: die abwechselnde Hinterlegung grenzt die
   Eintraege bereits voneinander ab. */
#therapeuten-table tbody td {
    display: block;
    padding: 0 1rem 0.35rem;
}

#therapeuten-table tbody td:first-child {
    padding-top: 1rem;
}

#therapeuten-table tbody td:last-of-type {
    padding-bottom: 1rem;
}

/* ── Name / Titel ───────────────────────────────────────── */
.therapeut-name {
    font-weight: 700;
    color: var(--dgpt-blau-1);
}

/* ── Adresse ────────────────────────────────────────────── */
.therapeut-adresse {
    line-height: 1.5;
}

/* ── Kontakt ────────────────────────────────────────────── */
/* Telefon, E-Mail und Website stehen nebeneinander. Reicht der Platz
   nicht, rutscht die letzte Angabe in die naechste Zeile -- die
   einzelne Angabe selbst bricht nie um. */
.therapeut-kontakt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.kontakt-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.kontakt-item a {
    color: var(--dgpt-blau-1);
    text-decoration: none;
}

.kontakt-item a:hover {
    text-decoration: underline;
}

/* ── SVG Icons ──────────────────────────────────────────── */
/* Etwas groesser als zuvor (18 statt 16) und mittig zur Schrift.
   Die Ausrichtung kommt aus dem inline-flex der Kontaktangabe, nicht
   mehr aus vertical-align -- damit sitzt das Symbol unabhaengig von der
   Schriftgroesse auf der Mitte der Zeile. */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: var(--dgpt-blau-1);
    margin-right: 0.35rem;
}

/* ── Spezialisierung ────────────────────────────────────── */
.therapeut-spez {
    color: var(--dgpt-grau-1);
    line-height: 1.45;
}

/* ── Standort im Modal ──────────────────────────────────── */
/* Die Adresse ist ein Button, soll aber aussehen wie ein Link.
   Ein Button ist hier richtig, weil er etwas oeffnet und nicht wohin
   fuehrt -- fuer Tastatur und Screenreader ist das eindeutig.

   Symbol und Adresse stehen nebeneinander. Dargestellt wird die Adresse
   wie die Links daneben: gleiche Farbe, erst beim Ueberfahren
   unterstrichen. Sonst stuenden in einem Eintrag zwei verschiedene
   Arten von Links.
   Die Unterstreichung liegt nur auf dem Text, nicht auf dem Symbol. */
.therapeut-adresse-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    line-height: inherit;
    text-align: left;
    color: var(--dgpt-blau-1);
    cursor: pointer;
}

.therapeut-adresse-text {
    text-decoration: none;
}

/* Beim Ueberfahren unterstrichen, wie bei den Links daneben. */
.therapeut-adresse-btn:hover .therapeut-adresse-text,
.therapeut-adresse-btn:focus-visible .therapeut-adresse-text {
    text-decoration: underline;
}

/* Kopfzeile des Modals: Name und Adresse untereinander, beides
   normaler Text. Keine Ueberschrift -- das Modal ist kein
   eigenes Dokument mit eigener Gliederung. */
.therapeut-map-kopf {
    margin: 0;
}

.therapeut-map-name {
    display: block;
    font-weight: 700;
}

.therapeut-map-adresse {
    display: block;
}

.therapeut-map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--dgpt-grau-3);
}

.therapeut-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Der Ersatzbereich der Cookie-Erweiterung richtet seinen Inhalt selbst
   mittig aus -- aber nur innerhalb der Hoehe, die er hat.

   Die Erweiterung misst dafuer die Hoehe des Bereichs, den sie ersetzt,
   und schreibt sie als festen Pixelwert direkt an ihr Ersatz-Element
   (cookieOptin.js, replaceExternalContentWithConsent). Bei uns entsteht
   das Ersatz-Element, waehrend das Modal noch geschlossen ist -- gemessen
   wird also null.

   Eine Angabe direkt am Element wiegt schwerer als jede Regel aus einem
   Stylesheet. Deshalb steht hier !important: nur so ueberwiegt unsere
   Hoehe die gemessene Null. */
.therapeut-map-frame .sg-cookie-optin-iframe-consent {
    width: 100%;
    height: 100% !important;
}

/* ── Meldung bei fehlender oder fehlerhafter Datei ──────── */
/* Erscheint statt der Trefferliste, wenn die CSV nicht gelesen werden
   konnte. Die Ursache steht im Systemprotokoll, hier bewusst nicht.

   Bootstrap faerbt seine Meldungen nicht direkt, sondern ueber drei
   Variablen am Element (siehe _alert.scss). Eine Regel, die
   background-color und color setzt, wuerde dagegen verlieren -- deshalb
   werden hier die Variablen gesetzt.

   Die Klasse steht im Template ZUSAETZLICH zu alert und alert-warning,
   nicht an deren Stelle. Von dort kommt die Grunddarstellung. */
.alert.therapeutensuche-meldung {
    --bs-alert-bg: var(--dgpt-blau-2, #4888a3);
    --bs-alert-border: 0;
    --bs-alert-color: var(--dgpt-weiss, #ffffff);
}

/* ── Hinweis im Ausgangszustand ──────────────────────────── */
/* Gleiche Schriftstaerke wie die Beschriftungen der Filterfelder. */
.therapeutensuche-hinweis {
    margin: 1.5rem 0;
    color: var(--dgpt-grau-1);
    font-weight: 600;
}

/* Die Trefferliste ist beim Seitenaufbau versteckt. Sonst blitzt die
   Bedienleiste mit "Keine Daten vorhanden" kurz auf, bevor das
   JavaScript sie ausblendet.

   Versteckt wird der umgebende Bereich, nicht die Tabelle selbst --
   fuer die Tabelle gibt es weiter oben bereits eine Regel mit
   display: block. Zwei Regeln fuer dieselbe ID waeren eine Falle.

   Der Hinweis liegt ausserhalb dieses Bereichs und bleibt sichtbar.
   Eingeblendet wird durch zustandPruefen() in therapeutensuche.js. */
.therapeutensuche-liste {
    display: none;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Auf schmalen Bildschirmen untereinander -- nebeneinander waere
       es zu eng. */
    .therapeut-kontakt {
        flex-direction: column;
        gap: 0.3rem;
    }

    .kontakt-item {
        white-space: normal;
    }

    .therapeut-map-frame {
        aspect-ratio: 1 / 1;
    }
}