/*
 * oberflaeche.css — was auf dem Telefon gebraucht wird
 *
 * Der Kern haengt diese Datei an jede Seite, wenn es sie in der Domain
 * gibt. Sie kommt ZULETZT und ergaenzt, statt zu ueberschreiben.
 *
 * WOHER SIE KOMMT
 *
 * Aus den ersten Tests auf einem Telefon, von zwei Testern, die kein
 * anderes Geraet benutzen. Vier Befunde, alle hier beantwortet:
 *
 *   1. Das Menue laeuft rechts aus dem Bild. 703 Pixel in 345 Pixel
 *      Platz, ohne Burger. Die Seite scrollte seitlich.
 *   2. Das Barrierefreiheit-Symbol verschwindet auf schmalen Schirmen.
 *   3. Das Fussmenue steht als Zeile und quetscht sich.
 *   4. Es gibt keine Wahl zwischen hell und dunkel.
 *
 * Verteilt wird sie von _tools/oberflaeche-verteilen.py an alle Domains
 * und an die Vorlagen.
 *
 * --------------------------
 * Autor:   Martin Kornmüller
 * Projekt: 4digEt
 * Stand:   05.10.2026
 */

/* ====================================================================
 * Die Bruecke zur dunklen Fassung
 *
 * In style.css ist --color-primary BEIDES: Hintergrund der Balken und
 * Textfarbe im Inhalt. Hell geht das auf, dunkel nicht. Deshalb haben
 * die Balken jetzt eine eigene Marke, und hier wird sie eingesetzt.
 *
 * In der hellen Fassung ist --color-bar derselbe Wert wie vorher. Es
 * aendert sich also nichts, solange niemand auf dunkel stellt.
 * ================================================================== */

/*
 * MIT RUECKFALL. Steht in einer Domain noch das alte theme-4diget.css,
 * kennt sie --color-bar nicht. Ohne zweiten Wert waere die Angabe dann
 * ungueltig, und der Balken verloere seinen Hintergrund ganz: Kopf und
 * Fuss standen weiss da, obwohl vorher alles stimmte. Genau das ist am
 * 05.10.2026 auf den Domainseiten passiert, die ihr Theme von 4diget.de
 * laden und deshalb noch das alte hatten.
 *
 * Der Rueckfallwert ist derselbe wie --color-primary in der hellen
 * Fassung. Schlimmstenfalls sieht es also aus wie vorher.
 */
header,
footer,
.headermenu,
.headermenu a,
.sub-menu,
.footermenu,
.footermenu a {
    background-color: var(--color-bar, #1C3959);
}

/*
 * Derselbe Fall noch einmal, eine Ebene tiefer.
 *
 * --color-on-primary ist in style.css ebenfalls BEIDES: die Schrift auf
 * den Balken und der Hintergrund von main. Hell faellt das zusammen,
 * dunkel nicht. Die Schrift auf dem Balken muss hell bleiben, der Grund
 * des Inhalts dunkel werden.
 *
 * Darum behaelt --color-on-primary seine Rolle als Schrift, und der
 * Inhalt bekommt --color-content-bg. Hell sind beide Werte dieselben
 * wie vorher, es aendert sich also nichts.
 */
main {
    background-color: var(--color-content-bg, #F0F7F4);
    color: var(--color-text, #1F2933);
}

/*
 * Derselbe Grund fuer den body.
 *
 * style.css setzt ihn auf --color-on-primary. Hell ist das #F0F7F4 und
 * passt. Dunkel ist --color-on-primary die Schrift auf den Balken, also
 * fast weiss — und damit stand hinter der Seite eine helle Flaeche. Zu
 * sehen war sie nur dort, wo main nicht hinreicht: unter dem Fuss bei
 * kurzen Seiten und beim Ueberscrollen am Rand.
 */
body {
    background-color: var(--color-content-bg, #F0F7F4);
}

/*
 * Beim Ueberfahren drehte style.css Grund und Schrift um: heller Grund,
 * dunkle Schrift. Dunkel waere das hell auf hell. Deshalb bleibt es hier
 * beim dunklen Balken, nur eine Spur abgesetzt.
 */
.headermenu a:hover,
.sub-menu li a:hover,
.footermenu a:hover {
    background-color: var(--color-focus-bg, #444444);
    color: var(--color-on-primary, #F0F7F4);
}

/*
 * Schrift auf den Balken, auch ohne eigene Regel.
 *
 * style.css faerbt nur .footermenu und .copyright. Ein schlichtes <p>
 * im Fuss erbt dagegen die Farbe des Fliesstextes, also Schwarz, und
 * steht damit schwarz auf dunkelblau: 1,6:1 und unlesbar. Auf den
 * Domainseiten und auf c301.de stand genau das.
 *
 * Dieselbe Regel fuer den Kopf, aus demselben Grund.
 */
header,
footer {
    color: var(--color-on-primary, #F0F7F4);
}

/*
 * Ein Verweis im Balken ohne eigene Klasse. Ohne diese Regel nimmt der
 * Browser sein eigenes Blau, #0000EE auf dunkelblau.
 */
header a,
footer a {
    color: var(--color-on-primary, #F0F7F4);
}

/*
 * Der Knopf: Schrift und Umrandung.
 *
 * Die Schrift ist hell dunkelblau, dunkel fast schwarz. Die Umrandung
 * gibt es, weil das hellere Orange zum Seitengrund nur noch 2,14:1
 * erreicht und WCAG 1.4.11 fuer ein Bedienelement 3:1 verlangt. Die
 * Linie in #D35400 schafft 3,83:1 und macht die Flaeche erkennbar,
 * auch fuer Augen, die Orange und Hellgruen schlecht trennen.
 */
.button-link,
button.btn-primary {
    background-color: var(--color-accent, #FF8C1A);
    color: var(--color-button-text, #1C3959);
    border: 0.125rem solid var(--color-accent-dark, #D35400);
}

/*
 * WARUM HIER AUCH DER HINTERGRUND STEHT
 *
 * style.css setzt ihn laengst. Trotzdem stand der Knopf auf den
 * Domainseiten noch am 07.10.2026 dunkelgruen da, mit schwarzer Schrift
 * darauf. Der Grund war nicht die Datei, sondern ihr Alter: Die
 * Domainseiten luden style.css, theme-4diget.css und domainverkauf.css
 * ueber eine feste Adresse von 4diget.de. Feste Adressen bekommen kein
 * ?v= angehaengt, also hielt der Browser monatelang seine alte Kopie —
 * jene, in der domainverkauf.css noch eine vollstaendige Stilvorlage mit
 * gruenem Knopf war.
 *
 * Behoben ist das an der Wurzel: Die Domainseiten laden ihre Dateien
 * seit dem 07.10.2026 aus dem eigenen Ordner, und dort haengt der Kern
 * den Zeitstempel an. Diese Zeile ist der Guertel zum Hosentraeger. Sie
 * kostet nichts und faengt den naechsten Fall ab, in dem ein Theme
 * fehlt oder veraltet ist.
 */

/* ====================================================================
 * Der QR-Code steht mittig unter dem Knopf
 *
 * Bisher hing das am Elternteil: Steht der Code in einem div.div-center,
 * zentriert text-align ihn mit. Fehlt die Klasse — und sie fehlte auf
 * jeder Seite, die den Knopf ohne den Baustein setzt — klebte er links.
 *
 * display:block mit width:max-content und automatischen Seitenraendern
 * zentriert den Kasten selbst. Damit liegt der MITTELPUNKT des Codes
 * ueber dem Mittelpunkt des Knopfes, unabhaengig davon, was darueber
 * steht.
 *
 * width:max-content und nicht fit-content: Der Code darf nicht kleiner
 * gerechnet werden als seine Punkte breit sind, sonst liegen sie auf
 * halben Bildpunkten und er wird bei schlechtem Licht unleserlich.
 * ================================================================== */
/*
 * Zwei Namen, weil style.css eine eigene Regel fuer ".div-center .qr"
 * hat. Die ist genauer und gewaenne sonst; der Code bliebe darin
 * inline-block und haenge wieder am text-align des Elternteils.
 */
.qr,
.div-center .qr {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 1rem;
    margin-inline: auto;
}

.qr svg {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.qr-text {
    margin: 0.4rem 0 0;
    text-align: center;
}

/* ====================================================================
 * Ein Verweis im Inhalt, der keine Klasse traegt
 *
 * style.css faerbt nur .main-link und .main-link-nu. Ein schlichtes
 * <a> nimmt deshalb das Blau des Browsers, #0000EE.
 *
 * Hell faellt das kaum auf: auf #F0F7F4 sind das rund 8:1. Dunkel ist
 * es unlesbar. Gemessen am 08.10.2026 auf der Seite lp-profi-plus im
 * dunklen Modus: 1,87:1. Betroffen war der Satz "Mit dem Klick auf die
 * Schaltfläche … wirst du weitergeleitet" auf JEDER Landingpage, denn
 * der Baustein setzt dort einen Verweis ohne Klasse.
 *
 * :not([class]) trifft nur Verweise ganz ohne Klassenangabe. Alles mit
 * .main-link, .button-link oder .footermenu bleibt, wie es war.
 * ================================================================== */

main a:not([class]),
main a.main-link {
    color: var(--color-primary, #1C3959);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

main a:not([class]):hover,
main a:not([class]):focus-visible,
main a.main-link:hover,
main a.main-link:focus-visible {
    color: var(--color-accent-dark, #D35400);
}

/*
 * .main-link steht hier mit dabei, und das ist der zweite Fall
 * derselben Art.
 *
 * In style.css ist .main-link fuer das KOPFMENUE gedacht:
 *
 *     .main-link { color: var(--color-on-primary); }
 *
 * Hell ist --color-on-primary #F0F7F4, also fast weiss. Auf der dunklen
 * Leiste ist das richtig. Im Inhalt steht derselbe Wert aber auf
 * --color-content-bg, und das ist exakt dieselbe Farbe: Kontrast 1,00.
 * Der Verweis war unsichtbar, nicht schlecht lesbar.
 *
 * Gemessen am 08.10.2026 auf lp-profi-plus-update-upsell. Im
 * Mitgliederbereich war dasselbe schon aufgefallen und dort in
 * dashboard.css einzeln geflickt; hier gilt es jetzt fuer jede Domain.
 *
 * Die Beschraenkung auf main ist wichtig: Kopf und Fuss behalten ihre
 * helle Schrift, denn dort stimmt sie.
 */

/* ====================================================================
 * Tabellen
 *
 * style.css kannte bis zum 08.10.2026 keine einzige Tabellenregel. Das
 * fiel nicht auf, weil keine Seite eine hatte. Die Preisvergleiche auf
 * den Plus-Seiten brauchen eine, und ohne Regeln steht sie da wie 1998:
 * ohne Abstand, ohne Linien, Zahlen linksbuendig neben Text.
 *
 * Der Kasten darum scrollt, die Seite nicht. Eine Tabelle darf breiter
 * sein als der Schirm, der Seitenkoerper nie.
 * ================================================================== */

main table {
    display: block;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

main table thead {
    border-bottom: 0.125rem solid var(--color-border-strong, #C9D6E2);
}

main table th,
main table td {
    padding: 0.5rem 0.875rem;
    text-align: left;
    border-bottom: 0.0625rem solid var(--color-border, #F0F0F0);
    white-space: nowrap;
}

main table th {
    color: var(--color-heading, #1C3959);
}

/*
 * Zahlen gehoeren rechts. Erkannt wird eine Zahlenspalte nicht am
 * Inhalt, sondern an der Stelle: Die erste Spalte benennt, alle
 * weiteren rechnen. Das stimmt bei beiden Tabellen im Haus und ist
 * eine Regel statt einer Klasse in jeder Zelle.
 */
main table td + td,
main table th + th {
    text-align: right;
}

main table tbody tr:last-child td {
    border-bottom: 0;
}

/*
 * Bilder und Code-Bloecke blenden auf dunklem Grund sonst.
 * Ein leichter Schleier nimmt die Schaerfe, ohne die Farben zu drehen.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img:not([src$=".svg"]) {
        filter: brightness(0.92);
    }
}

:root[data-theme="dark"] img:not([src$=".svg"]) {
    filter: brightness(0.92);
}

/* ====================================================================
 * Bilder bleiben im Bild
 *
 * In den Seiten stehen Breiten wie width="400px". Am Schreibtisch
 * passt das, auf einem Telefon mit 375 Pixeln nicht: Das Bild schiebt
 * die Seite nach rechts, und man scrollt seitlich durch den ganzen
 * Text. Diese zwei Zeilen beenden das fuer jede Seite auf einmal.
 * ================================================================== */

img,
video,
iframe,
table {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Breite Tabellen rollen in ihrem eigenen Kasten, statt die Seite zu schieben. */
.tabelle-rollt {
    overflow-x: auto;
}

/* ====================================================================
 * Der Umschalter hell und dunkel
 *
 * Drei Zustaende, im Kreis: wie das Geraet, hell, dunkel. Ohne
 * JavaScript erscheint er gar nicht, und dann gilt die Einstellung des
 * Geraets. Das ist der richtige Rueckfall: Er tut, was das Telefon sagt.
 * ================================================================== */

/*
 * Er sitzt im Fuss, weil es den immer gibt. Die Landingpages haben
 * keinen Kopf, und dort erschien er deshalb nie.
 */
.thema-leiste {
    display: flex;
    justify-content: center;
    padding: 0.75rem 1rem 1rem;
}

.thema-schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 0.0625rem solid var(--color-on-primary, #F0F7F4);
    border-radius: 999px;
    background: transparent;
    color: var(--color-on-primary, #F0F7F4);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.thema-schalter:hover,
.thema-schalter:focus-visible {
    background: var(--color-on-primary, #F0F7F4);
    color: var(--color-bar, #1C3959);
}

/*
 * Das Piktogramm ist ein SVG und erbt die Schriftfarbe. Beim
 * Ueberfahren dreht sich beides zusammen um, ohne eine zweite Regel.
 */
.thema-schalter .thema-zeichen {
    display: block;
    flex: 0 0 auto;
}

/* ====================================================================
 * Das Menue auf schmalen Schirmen
 *
 * Unter 48rem wird aus der Zeile ein Burger. Der Knopf entsteht erst
 * durch JavaScript: Ohne JavaScript bleibt das Menue sichtbar und
 * untereinander, und das ist bedienbar. Ein Burger ohne Schalter waere
 * es nicht.
 * ================================================================== */

.menue-knopf {
    display: none;
}

@media (max-width: 48rem) {

    header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    header nav {
        order: 3;
        flex-basis: 100%;
    }

    /* Der Knopf erscheint nur, wenn JavaScript ihn eingesetzt hat. */
    .hat-burger .menue-knopf {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.8rem;
        border: 0.0625rem solid var(--color-on-primary);
        border-radius: var(--radius);
        background: transparent;
        color: var(--color-on-primary);
        font: inherit;
        font-size: 1rem;
        cursor: pointer;
    }

    .hat-burger .menue-balken {
        display: block;
        width: 1.25rem;
        height: 0.125rem;
        background: currentColor;
        box-shadow: 0 0.375rem 0 currentColor, 0 -0.375rem 0 currentColor;
    }

    /* Zu, solange der Knopf nicht gedrueckt ist. */
    .hat-burger nav[hidden] {
        display: none;
    }

    .headermenu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0;
    }

    .headermenu li {
        width: 100%;
    }

    /*
     * DER eigentliche Grund, warum untereinander nicht untereinander
     * war: .headermenu a traegt float: left, .footermenu li ebenso. Ein
     * Float macht seinen Behaelter null Pixel hoch, und dann steht der
     * naechste Block mitten hinein. In der Zeile am Schreibtisch ist das
     * genau richtig, in einer Spalte nicht.
     */
    .headermenu a,
    .headermenu li,
    .footermenu a,
    .footermenu li {
        float: none;
    }

    .headermenu a {
        display: block;
        padding: 0.75rem 1rem;
        font-size: 1.05rem;
    }

    /*
     * Untermenues klappen hier nicht auf, sie stehen einfach da.
     * Ein Schwebemenue gibt es auf einem Telefon nicht, und ein zweiter
     * Schalter im Schalter ist eine Falle fuer den Daumen.
     */
    .sub-menu {
        position: static;
        display: block;
        width: 100%;
        box-shadow: none;
    }

    .sub-menu a {
        padding-left: 2rem;
        font-size: 0.95rem;
    }

    .has-submenu .arrow {
        display: none;
    }

    /*
     * Am Schreibtisch steht der Menuepunkt links und das Untermenue
     * schwebt daneben, dafuer ist .item-wrapper eine Zeile. Untereinander
     * ergibt das einen Punkt links und eingerueckte Zeilen rechts
     * daneben, mittig gesetzt. Hier wird daraus wieder ein Block.
     */
    /* Schlaegt .headermenu > li { display: flex } aus style.css. */
    .headermenu > li.has-submenu {
        display: block;
        height: auto;
    }

    .headermenu .has-submenu > .item-wrapper {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        line-height: normal;
        background: none;
    }

    /*
     * Der Menuepunkt mit Untermenue ist am Schreibtisch eine Zeile mit
     * fester Hoehe, und das Untermenue schwebt darunter. Beides faellt
     * hier weg, sonst steht der Punkt neben seinem ersten Untereintrag.
     */
    .headermenu .has-submenu > .item-wrapper > a {
        display: block;
        padding: 0.75rem 1rem;
    }

    .headermenu .sub-menu {
        width: 100%;
        min-width: 0;
    }

    .headermenu .sub-menu li,
    .headermenu .sub-menu a {
        text-align: left;
    }
}

/* ====================================================================
 * Das Fussmenue
 *
 * Es war eine Zeile mit flex-direction: row. Bei acht Eintraegen
 * quetscht sich das auf einem Telefon zu Brei. Untereinander ist es
 * eine Linkliste, und genau das ist es auch.
 * ================================================================== */

@media (max-width: 48rem) {

    .footermenu,
    .footermenu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .footermenu li {
        width: 100%;
        border-bottom: 0.0625rem solid var(--color-border);
    }

    .footermenu li:last-child {
        border-bottom: 0;
    }

    .footermenu a {
        display: block;
        padding: 0.7rem 1rem;
        text-align: left;
    }
}

/* ====================================================================
 * Der Barrierefreiheit-Eintrag im Menue
 *
 * Dass der schwebende Knopf auf schmalen Schirmen verschwindet, ist
 * Absicht und steht so in bf.css: Er verdeckt Inhalt und streitet mit
 * dem Knopf "nach oben". Statt seiner haengt bf.js einen Eintrag in die
 * Navigation.
 *
 * Nur war diese Navigation auf dem Telefon selbst nicht erreichbar, weil
 * sie rechts aus dem Bild lief. Der Eintrag war damit da und doch nicht
 * da. Mit dem Burger weiter oben steht er jetzt mit den anderen
 * Menuepunkten zusammen, und hier bekommt er deren Aussehen.
 * ================================================================== */

@media (max-width: 48rem) {

    .headermenu .bf-menu-item {
        display: block;
        padding: 0.75rem 1rem;
        color: var(--color-on-primary);
        font-size: 1.05rem;
    }

    .headermenu .bf-menu-item:hover {
        background-color: var(--color-on-primary);
        color: var(--color-primary);
    }
}