/* ==========================================================================
   Schriften - lokal ausgeliefert
   
   Vorher lud die Seite webfont.js von ajax.googleapis.com und darueber
   Montserrat in 18 Schnitten plus Poppins, das im CSS gar nicht vorkommt.
   Dabei ging bei jedem Aufruf die IP-Adresse der Besucher an Google -
   ohne Einwilligung, was in Deutschland abmahnfaehig ist.
   
   Jetzt zwei Dateien vom eigenen Server. Als Variable Fonts decken sie
   alle benoetigten Staerken (300 bis 700) ab.
   ========================================================================== */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-variable.woff2') format('woff2-variations'),
         url('../fonts/montserrat-variable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-variable-italic.woff2') format('woff2-variations'),
         url('../fonts/montserrat-variable-italic.woff2') format('woff2');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

/* Poppins traegt den Fliesstext: .text, .text-nachhilfe und die
   Formularfelder verlangen sie. Sie fehlte bisher - live kam sie ueber
   webfont.js von Google, und beim Abloesen davon ist sie durchgerutscht.
   Ohne die Datei fiel der Browser auf eine Systemschrift zurueck, der
   Fliesstext sah deshalb anders aus als auf der Live-Seite.

   Nur die Latin-Teilmenge (die deutschen Umlaute liegen darin), drei
   Schnitte, zusammen 23 KB. Google lud fuer dieselbe Seite 18 Schnitte
   Montserrat und Poppins regular.

   Ein Unterschied zu vorher, bewusst: Live gab es nur Poppins regular,
   fette Stellen hat der Browser daraus selbst verzerrt. Jetzt liegen 600
   und 700 als eigene Schnitte bei - Fettes sieht dadurch sauberer aus. */

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ff0000;
}


textarea {
    overflow: auto;
    width: 100%;
}

.wpcf7 {
    display: grid;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-column: 2;
    grid-column-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    -ms-grid-row: 2;
    grid-row-start: 2;
    
}
   
.wpcf7 p {

    margin-top: 0;
    margin-bottom: 10px;
}


label {
    display: block;
    margin-bottom: 5px;
    font-weight: normal;
    color: #1c3661;
    font-size: 1em;
    margin-top: 0;
    
}

input {
    line-height: normal;
    display: block;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}



element.style {
    color: rgb(51, 51, 51);
}

.navlink {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: 20px;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    border-bottom: 3px solid transparent;
    color: #333;
    line-height: 98px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
}
.w-inline-block {
    max-width: 100%;
    display: inline-block;
}
a {
    background-color: transparent;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

/* ==========================================================================
   Kontaktformular (inc/contact-form.php)
   Ersetzt das entfernte Plugin simple-basic-contact-form.
   Farben aus dem Logo: #1c3661 Marineblau, #026666 Petrol.
   ========================================================================== */

.bib-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 100%;
}

.bib-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.bib-form label {
    font-weight: 600;
    font-size: 15px;
    color: #1c3661;
    line-height: 1.4;
}

.bib-form input[type="text"],
.bib-form input[type="email"],
.bib-form input[type="tel"],
.bib-form textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: #16202e;
    background: #ffffff;
    border: 1px solid #d9e0e7;
    border-radius: 4px;
    box-sizing: border-box;
}

.bib-form input[type="text"]:focus,
.bib-form input[type="email"]:focus,
.bib-form input[type="tel"]:focus,
.bib-form textarea:focus {
    border-color: #026666;
    outline: 2px solid #026666;
    outline-offset: 1px;
}

.bib-form textarea {
    resize: vertical;
    min-height: 130px;
}

.bib-form__row--check {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.bib-form__row--check label {
    font-weight: 400;
    font-size: 14px;
    color: #4d5a6a;
}

.bib-form__row--check input {
    margin-top: 4px;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: #026666;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots im Dokument.
   Bewusst kein display:none - manche Bots ueberspringen solche Felder. */
.bib-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bib-form button[type="submit"] {
    align-self: flex-start;
    padding: 13px 28px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #026666;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.bib-form button[type="submit"]:hover {
    background: #014b4b;
}

.bib-form button[type="submit"]:focus-visible {
    outline: 2px solid #1c3661;
    outline-offset: 2px;
}

.bib-form__hint {
    font-size: 14px;
    color: #4d5a6a;
    margin: 0;
}

.bib-form__hint a {
    color: #026666;
}

.bib-form__notice {
    padding: 14px 16px;
    border-radius: 4px;
    border-left: 3px solid;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 18px;
}

.bib-form__notice--success {
    background: #dfeceb;
    border-left-color: #026666;
    color: #014b4b;
}

.bib-form__notice--error {
    background: #f8ece1;
    border-left-color: #a9541b;
    color: #a9541b;
}

/* Sprungziel nach dem Absenden: etwas Luft, damit die Meldung nicht
   direkt unter dem Seitenkopf klebt. */
#kontaktformular {
    scroll-margin-top: 115px;
}

@media screen and (max-width: 991px) {
    #kontaktformular {
        scroll-margin-top: 76px;
    }
}

/* --- Pflichtfelder, Fehler und Zeichenzähler ---------------------------- */

.bib-form__pflicht {
    color: #a9541b;
}

.bib-form__fehler {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.4;
    color: #a9541b;
    font-weight: 600;
}

/* Rote Umrandung für Felder, die noch nicht stimmen */
.bib-form__row--fehler input[type="text"],
.bib-form__row--fehler input[type="email"],
.bib-form__row--fehler input[type="tel"],
.bib-form__row--fehler textarea {
    border-color: #a9541b;
    border-width: 2px;
    background: #fdf7f2;
}

.bib-form__row--fehler input[type="checkbox"] {
    outline: 2px solid #a9541b;
    outline-offset: 2px;
}

.bib-form__row--fehler label {
    color: #a9541b;
}

.bib-form__zaehler {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #4d5a6a;
}

.bib-form__zaehler--ok {
    color: #026666;
}

/* --- Sprungmarken -------------------------------------------------------
   Früher lag vor jedem Abschnitt ein leeres 100px-Kästchen (.section-2),
   das per margin-top:-100px nach oben gezogen wurde, damit der Sprung
   etwas früher landet. Das erzeugte URLs wie #nachhilfe2 und fünf
   überflüssige Elemente im Markup. scroll-margin-top macht dasselbe
   sauberer - und die Adressen heissen jetzt #nachhilfe. */

.section,
.section.nachhilfe,
#about,
#nachhilfe,
#bildung,
#dyskalkulie,
#contact {
    /* Die Kopfzeile klebt beim Scrollen oben und ist 103 Pixel hoch. Bei
       100 lag der Abschnittsanfang drei Pixel darunter - knapp daneben.
       115 laesst etwas Luft. */
    scroll-margin-top: 115px;
}

/* Weiches Scrollen zu den Abschnitten.
   Das machte bis August 2026 Webflows JavaScript - es fing jeden Klick auf
   einen Verweis mit # ab und animierte den Sprung selbst. Dafuer lud die
   Seite 195 KB. Heute koennen das alle Browser von sich aus, es braucht
   diese eine Zeile.

   Wer in seinem System "Bewegung reduzieren" eingestellt hat, springt
   weiterhin ohne Animation - fuer manche Menschen loest die Bewegung
   Schwindel aus. */
html {
    scroll-behavior: smooth;
}

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

@media screen and (max-width: 991px) {
    /* Dort ist die Kopfzeile 62 Pixel hoch. Bei 60 lag der
       Abschnittsanfang zwei Pixel darunter. */
    .section,
    #about,
    #nachhilfe,
    #bildung,
    #dyskalkulie,
    #contact {
        scroll-margin-top: 76px;
    }
}

/* --- Symbole ------------------------------------------------------------
   Ersetzen das frühere Skript von kit.fontawesome.com. Damit sie sich wie
   die bisherigen Font-Symbole verhalten, übernehmen sie Größe und Farbe
   aus dem umgebenden Text. */

.bib-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    vertical-align: -0.125em;
}

/* --- Karte --------------------------------------------------------------
   Eigene Karte mit Leaflet (js/karte.js). Sie sitzt in der rechten Spalte
   unter der Anschrift, ist also schmal - deshalb hochkant-naeher Zuschnitt
   und eine Deckelung nach oben, damit sie die Spalte nicht dominiert. */

.bib-karte {
    position: relative;
    width: 100%;
    margin-top: 24px;
    aspect-ratio: 4 / 3;
    max-height: 260px;
    border-radius: 6px;
    overflow: hidden;
    /* Bis die Kacheln da sind, steht hier ein ruhiger Grundton statt
       eines weissen Lochs. */
    background: #e8ecef;
}

/* Leaflet setzt eine eigene Schrift; die Seite hat ihre. */
.bib-karte.leaflet-container {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    background: #e8ecef;
}

/* Der Marker: eigenes SVG statt Leaflets Bilddatei. Traegt damit die
   Farbe von hier und bleibt auf jedem Bildschirm scharf. */
.bib-karte__pin svg {
    width: 34px;
    height: 34px;
    fill: #026666;
    /* Auf hellen Kacheln braucht die Nadel eine Kante, sonst verschwimmt
       sie mit dem Untergrund. */
    filter: drop-shadow(0 1px 2px rgba(10, 18, 32, 0.45));
}

/* --- Popup am Marker ---------------------------------------------------- */

.bib-karte .leaflet-popup-content-wrapper {
    padding: 2px 4px;
    border-radius: 6px;
    background: #1c3661;
    color: #fff;
    box-shadow: 0 4px 16px rgba(10, 18, 32, 0.3);
}

.bib-karte .leaflet-popup-content {
    margin: 12px 16px;
    font-size: 14px;
    line-height: 1.55;
}

.bib-karte .leaflet-popup-content strong {
    /* Im uebrigen Stylesheet ist <strong> petrolfarben - auf dem dunklen
       Grund waere das kaum zu lesen. */
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 15px;
}

.bib-karte .leaflet-popup-tip {
    background: #1c3661;
}

.bib-karte .leaflet-popup-close-button {
    color: #b7c6da;
}

.bib-karte .leaflet-popup-close-button:hover {
    color: #fff;
}

.bib-karte__weg {
    display: inline-block;
    margin-top: 6px;
    color: #7fd4d4;
    font-weight: 600;
    text-decoration: underline;
}

.bib-karte__weg:hover,
.bib-karte__weg:focus-visible {
    color: #fff;
}

/* --- Bedienelemente ----------------------------------------------------- */

.bib-karte .leaflet-control-zoom a {
    color: #1c3661;
    border-radius: 0;
}

.bib-karte .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.8);
}

.bib-karte .leaflet-control-attribution a {
    color: #026666;
}

.bib-karte__quelle {
    margin: 9px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4d5a6a;
}

.bib-karte__quelle a {
    color: #026666;
    font-weight: 600;
}

@media screen and (max-width: 991px) {
    /* Einspaltig ist die Spalte so breit wie der Bildschirm - dann darf
       die Karte etwas hoeher werden. */
    .bib-karte {
        max-height: 320px;
    }
}

/* --- Mobilmenue ---------------------------------------------------------
   Frueher steuerte Webflow das Auf- und Zuklappen. js/navigation.js setzt
   jetzt nur noch die Klasse "bib-menu-offen" am body - alles Sichtbare
   steht hier. Die Klassennamen sind die von Webflow, damit sich am
   Aussehen nichts aendert. */

/* Beide Knoepfe sind seit dem Umbau echte <button> statt <div>: nur so
   lassen sie sich mit der Tastatur bedienen. Die Browser-Optik dafuer
   nehmen wir wieder zurueck. */
.burgermenu,
.burgermenu-2 {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* Beim Oeffnen springt der Fokus auf das X. Der blaue Standardring des
   Browsers passt nicht zur Seite. */
.burgermenu:focus-visible,
.burgermenu-2:focus-visible {
    outline: 2px solid #026666;
    outline-offset: 3px;
    border-radius: 3px;
}

@media screen and (max-width: 991px) {
    /* Statt display none/flex zu schalten, blenden wir mit visibility aus.
       display laesst sich nicht weich ueberblenden - visibility schon,
       wenn man die Verzoegerung bis zum Ende der Blende schiebt. */
    .mobilemenu {
        display: flex;
        visibility: hidden;
        opacity: 0;
        transition: opacity 200ms ease, visibility 0s linear 200ms;
    }

    body.bib-menu-offen .mobilemenu {
        visibility: visible;
        opacity: 1;
        transition: opacity 200ms ease;
    }

    /* Der Abschnitt, in dem man gerade steht - dieselbe Anzeige wie in
       der Menueleiste oben. Den durchsichtigen Rand tragen alle, sonst
       ruckten die uebrigen Punkte um drei Pixel, sobald einer markiert
       ist. */
    .mobilemenulink {
        border-bottom: 3px solid transparent;
    }

    .mobilemenulink.ist-aktiv {
        border-bottom-color: rgba(0, 102, 102, 0.45);
    }

    body.bib-menu-offen .burgermenu {
        display: none;
    }

    body.bib-menu-offen .burgermenu-2 {
        display: block;
    }

    /* Solange das Menue offen ist, soll die Seite darunter nicht scrollen. */
    body.bib-menu-offen {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobilemenu {
        transition: none;
    }
}

/* --- Bildergalerie ------------------------------------------------------
   Ersatz fuer Webflows Lightbox, siehe js/galerie.js. */

/* Der Mauszeiger soll zeigen, dass hier etwas passiert. */
a.bib-galerie {
    cursor: zoom-in;
}

.bib-lightbox {
    position: fixed;
    inset: 0;
    /* Muss ueber der Kopfzeile liegen - die klebt beim Scrollen oben und
       hat z-index 9999. Mit 9950 lugte sie mitten durch die Galerie. */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Nicht reines Schwarz: ein Hauch vom Blau des Logos wirkt weniger
       hart und passt zum Rest der Seite. */
    background: rgba(10, 18, 32, 0.97);
    /* Wie beim Mobilmenue: visibility statt display, damit sich die Blende
       ueberhaupt abspielen kann. Ausgeblendet ist der Kasten damit auch
       fuer Screenreader und die Tabulatortaste weg. */
    visibility: hidden;
    opacity: 0;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.bib-lightbox.ist-offen {
    visibility: visible;
    opacity: 1;
    transition: opacity 180ms ease;
}

body.bib-lightbox-offen {
    overflow: hidden;
}

.bib-lightbox__buehne {
    /* figure bringt von Haus aus Aussenabstand mit. */
    margin: 0;
    padding: 0 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
}

.bib-lightbox__bild {
    display: block;
    width: auto;
    height: auto;
    max-width: min(1200px, 92vw);
    max-height: 78vh;
    object-fit: contain;
    border-radius: 4px;
    background: #0a1220;
}

.bib-lightbox__text {
    max-width: 60ch;
    margin: 0;
    color: #e7ecf3;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.bib-lightbox__text[hidden] {
    display: none;
}

.bib-lightbox__zaehler {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    margin: 0;
    color: #9fb0c6;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.bib-lightbox__knopf {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.bib-lightbox__knopf:hover,
.bib-lightbox__knopf:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

.bib-lightbox__knopf:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.bib-lightbox__knopf[hidden] {
    display: none;
}

.bib-lightbox__knopf svg {
    width: 24px;
    height: 24px;
}

.bib-lightbox__zu {
    top: 16px;
    right: 16px;
}

.bib-lightbox__zurueck {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.bib-lightbox__vor {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
    /* Am Telefon ist neben dem Bild kein Platz fuer die Pfeile - sie
       ruecken unter das Bild, links und rechts vom Zaehler. */
    .bib-lightbox__buehne {
        padding: 0 12px;
    }

    .bib-lightbox__bild {
        max-height: 66vh;
    }

    .bib-lightbox__knopf {
        width: 44px;
        height: 44px;
    }

    .bib-lightbox__zurueck,
    .bib-lightbox__vor {
        top: auto;
        bottom: 12px;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bib-lightbox {
        transition: none;
    }
}

/* --- Reiter -------------------------------------------------------------
   Die Reiter waren <a> ohne href und damit mit der Tastatur nicht
   erreichbar. Jetzt sind es <button>; die Browser-Optik dafuer nehmen wir
   zurueck, alles andere kommt weiter aus den Webflow-Klassen. */
button.w-tab-link {
    border: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

/* --- Hinweis-Karussell --------------------------------------------------
   Ersetzt Webflows Slider, siehe js/slider.js. */

/* Alle Folien liegen uebereinander in derselben Gitterzelle.
   
   Zuerst stand hier display:none fuer die inaktiven Folien - dann richtet
   sich die Hoehe des Kastens nach der gezeigten Folie. Das ging aber nur
   als Auf-, nicht als Ueberblendung: Die alte Folie verschwand
   schlagartig, dazwischen blitzte der Hintergrund durch, und die neue
   blendete aus dem Nichts auf. Fuer ein echtes Ueberblenden muessen beide
   einen Moment gleichzeitig da sein.
   
   Der Preis: Der Kasten ist so hoch wie die laengste Folie. Am Telefon,
   wo .slider-2 height:auto hat, bleibt bei kurzen Folien etwas Luft
   stehen. Dafuer springt die Hoehe beim Wechsel nicht mehr. */
.w-slider-mask {
    display: grid;
}

.w-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    /* visibility erst am Ende umschalten, sonst waere die abgehende Folie
       sofort weg und es gaebe wieder nichts zu ueberblenden. */
    transition: opacity 700ms ease, visibility 0s linear 700ms;
}

.w-slide.bib-folie-aktiv {
    opacity: 1;
    visibility: visible;
    transition: opacity 700ms ease;
}

/* Pfeile und Punkte sind seit dem Umbau echte <button>. */
button.w-slider-arrow-left,
button.w-slider-arrow-right,
button.w-slider-dot {
    padding: 0;
    border: 0;
    font: inherit;
    background-color: transparent;
    cursor: pointer;
}

button.w-slider-dot {
    /* Die Hintergrundfarbe kommt aus webflow.css, die darf nicht weg. */
    background-color: rgba(255, 255, 255, 0.4);
}

button.w-slider-dot.w-active {
    background-color: #fff;
}

button.w-slider-arrow-left:focus-visible,
button.w-slider-arrow-right:focus-visible,
button.w-slider-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.w-slider-arrow-left[hidden],
.w-slider-arrow-right[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .w-slide {
        transition: none;
    }
}

/* --- Knopf "Kontakt aufnehmen" -----------------------------------------
   Webflow liess den Knopf beim Klick kurz weiss aufblitzen - eine
   Interaktion aus dem Baukasten, 195 KB JavaScript im Ruecken. Auf einen
   Hover-Zustand hatte er dagegen gar keine Antwort. Beides erledigen hier
   drei Zeilen CSS. */
.button {
    /* 200 ms wie in Webflows Interaktion. */
    transition: background-color 200ms ease, color 200ms ease;
}

.button:hover,
.button:focus-visible {
    /* Marineblau aus dem Logo - genau der Wert, den Webflows Interaktion
       gesetzt hat (rgb 28, 54, 97). */
    background-color: #1c3661;
    color: #fff;
}

.button:active {
    background-color: #fff;
    color: #026666;
}

/* --- Hover im Menü und im Footer ---------------------------------------
   Diese Faerbung machte Webflow mit JavaScript: ein Ereignis fuer
   "Maus drueber" und eines fuer "Maus weg", jeweils 200 ms Uebergang von
   #333 auf Petrol. Die Werte hier stammen aus genau diesen Daten, damit es
   sich anfuehlt wie vorher.

   :focus-visible ist neu dazugekommen - wer mit der Tastatur durch das
   Menue geht, sah bisher gar nicht, wo er steht. */

.navlink,
.footerlink {
    transition: color 200ms ease-in, border-bottom-color 200ms ease-in;
}

/*
 * Der Balken unter den Menuepunkten.
 *
 * Im Webflow-Export hing er an :focus - er erschien also erst beim
 * Anklicken und blieb danach stehen, bis man woanders hin klickte.
 * Gemeint war er als Hinweis beim Ueberfahren. Hier wird er von :focus
 * geloest und an :hover gehaengt.
 *
 * :focus-visible behaelt ihn: Wer mit der Tastatur durch das Menue geht,
 * braucht die Markierung. Der Unterschied zu :focus ist genau der Fall,
 * um den es geht - :focus-visible springt bei einem Mausklick nicht an.
 */
.navlink:focus {
    border-bottom-color: transparent;
}

.navlink:hover,
.navlink:focus-visible,
.footerlink:hover,
.footerlink:focus-visible {
    color: #006666;
}

.navlink:hover,
.navlink:focus-visible {
    border-bottom-color: #006666;
}

/*
 * Der Abschnitt, in dem man gerade steht (js/navigation.js).
 * Etwas blasser als der Hover-Balken: Er zeigt an, wo man ist, und soll
 * dem, worauf man gerade zeigt, nicht die Aufmerksamkeit wegnehmen.
 */
.navlink.ist-aktiv {
    border-bottom-color: rgba(0, 102, 102, 0.45);
}

.navlink.ist-aktiv:hover,
.navlink.ist-aktiv:focus-visible {
    border-bottom-color: #006666;
}

@media (prefers-reduced-motion: reduce) {
    .navlink,
    .footerlink {
        transition: none;
    }
}

/* Das Briefumschlag-Symbol im Footer ist fest petrolfarben und wuerde beim
   Hover als einziges stehenbleiben. */
.footerlink:hover .text-block-3,
.footerlink:focus-visible .text-block-3 {
    color: inherit;
}