/* Kontaktblöcke der Mitarbeiter.
 *
 * Ersetzt das frühere Bootstrap-Spaltenraster. Der Grund: Spalten
 * zwingen zu festen Zwölfteln, weshalb die Blöcke je nach Anzahl von
 * Hand umgebrochen und eingerückt werden mussten. Flexbox verteilt und
 * bricht selbst um.
 *
 * Der Kniff gegen das unruhige Bild: Die Blöcke sind gleich breit und
 * ihr Inhalt bleibt linksbündig, sodass die Textkanten fluchten. Nur
 * die Gruppe als Ganzes wird zentriert.
 */

.kontakt-personen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2.5em var(--luecke);
    margin: 0 auto;
    padding: 1rem 0 0;
    /* Begrenzt, wie viele Blöcke in eine Zeile passen. Die Zahl setzt
       das Programm nach der Anzahl der Personen, damit die Zeilen
       gleichmäßig gefüllt werden: fünf Personen ergeben 3 und 2,
       nicht 4 und 1. */
    --pro-zeile: 4;
    /* Maße in em, nicht rem: Bootstrap 3 setzt die Wurzelschrift auf
       10px, ein rem ist hier also nur 10px statt der üblichen 16px. Die
       Blöcke waren dadurch 175px schmal, und Namen wie Telefonnummern
       brachen um. em bezieht sich auf die Textgröße und wächst mit,
       wenn jemand die Schrift über die A-Schalter vergrößert. */
    --block: 17.5em;
    --luecke: 3em;
    max-width: calc(var(--pro-zeile) * var(--block) + (var(--pro-zeile) - 1) * var(--luecke));
}

/* Breite Schirme haben Platz genug, den Blöcken mehr Luft zu geben. */
@media (min-width: 1200px) {
    .kontakt-personen {
        --luecke: 5em;
    }
}

/* Namen, Telefonnummern und Adressen brechen nicht um. Jeder Block ist
   mindestens --block breit, damit die Textkanten fluchten. Ist ein
   Eintrag länger, wird sein Block breiter, statt den Text zu teilen. */
.kontakt-person {
    flex: 0 0 auto;
    min-width: var(--block);
    text-align: left;
    white-space: nowrap;
}

.kontakt-person .title {
    margin: 0 0 0.6rem;
}

.kontakt-person .list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kontakt-person .list li {
    margin-bottom: 0.35rem;
    /* Notbremse am Handy (dort gilt wieder normaler Umbruch): bricht
       eine sehr lange Adresse um, statt sie aus dem Block laufen zu
       lassen. */
    overflow-wrap: anywhere;
}

/* Doppelnamen sollen nicht mitten im Namensteil umbrechen. */
.kontakt-person .title {
    hyphens: none;
}

/* Auf schmalen Schirmen steht ein Block je Zeile.
 *
 * Damit die Textkanten auch dort fluchten, wird nicht jeder Block für
 * sich mittig gesetzt, sondern nur der Streifen als Ganzes: Er ist so
 * breit wie sein breitester Block, und alle Blöcke füllen ihn aus. So
 * haben alle dieselbe linke Kante.
 *
 * Vorher war jeder Block einzeln so breit wie sein eigener Inhalt.
 * Die längste E-Mail-Adresse machte ihren Block breiter als die
 * anderen, und weil jeder für sich mittig stand, sprangen die Kanten
 * von Block zu Block. */
@media (max-width: 560px) {
    .kontakt-personen {
        flex-direction: column;
        align-items: stretch;
        gap: 2.25em;
        width: max-content;
        max-width: 100%;
    }

    /* Die Breite kommt hier vom Streifen, nicht von --block. Und auf
       sehr schmalen Handys darf eine lange Adresse wieder umbrechen. */
    .kontakt-person {
        min-width: 0;
        white-space: normal;
    }
}

/* Die Knöpfe Datenschutz und Impressum.
 *
 * Früher trennten sie zwei  . Auf schmalen Handys brachen die
 * Knöpfe in zwei Zeilen um, und die festen Leerzeichen blieben an den
 * Zeilenenden stehen, was beide Knöpfe aus der Mitte schob. Jetzt hält
 * Flexbox sie nebeneinander und lässt sie bei Platzmangel etwas
 * schmaler werden, statt umzubrechen. */
.kontakt-knoepfe {
    display: flex;
    justify-content: center;
    gap: 1.25em;
}

.kontakt-knoepfe .btn {
    flex: 0 1 160px;
    min-width: 0;
}