/*
 * THANU Translation - Oberflaeche
 *
 * Handgeschrieben, ohne Rahmenwerk. Drei Gruende, die alle mit dem
 * Gegenstand dieser Anwendung zu tun haben:
 *
 * 1. Die Auftraggeberin unterliegt der Verschwiegenheitspflicht. Ein
 *    Rahmenwerk von einem fremden Auslieferungsnetz ist eine Verbindung, die
 *    jeder Besucher zu einem Dritten aufbaut - und bei einer Seite, auf der
 *    Asylverfahren und Gerichtstermine gebucht werden, ist schon die Tatsache
 *    des Aufrufs eine Auskunft.
 * 2. Gebucht wird haeufig vom Handy, oft aus einem Wartebereich mit
 *    schlechtem Empfang. Wenige Kilobyte laden dort, mehrere Megabyte nicht.
 * 3. Ein Rahmenwerk bringt Hunderte Klassen mit, von denen zwanzig benutzt
 *    werden. Was hier steht, wird gebraucht - und laesst sich lesen, ohne
 *    eine fremde Dokumentation aufzuschlagen.
 *
 * Alle Flaechen zum Antippen sind mindestens 48 Pixel hoch.
 */

/*
 * SCHRIFT - UND WARUM NICHTS GELADEN WIRD
 *
 * Montserrat zuerst, falls sie auf dem Geraet vorhanden ist. Geladen wird sie
 * NICHT: Google Fonts uebertraegt die IP-Adresse jedes Besuchers an Google,
 * und das widerspricht der Zusage, mit der diese Anwendung wirbt - eine
 * Dolmetscherin, die zur Verschwiegenheit verpflichtet ist, kann ihre
 * Besucher nicht nebenbei an einen Werbekonzern melden. Selbst ausliefern
 * waere erlaubt, kostet aber je Schnitt mehrere hundert Kilobyte auf genau
 * der Verbindung, die unter 2. schon knapp war.
 *
 * Die Systemschriften dahinter sind Montserrat nahe genug. Die Homepage
 * benutzt fuer Ueberschriften eine Serifenschrift (Playfair Display); die ist
 * hier bewusst NICHT genannt - sie waere auf den wenigsten Geraeten vorhanden
 * und ergaebe dann ein Schriftbild, das mit dem Rest nicht zusammenpasst.
 *
 * Inter steht absichtlich NICHT in der Kette. Auf einem der Arbeitsrechner
 * ist nur der kursive Schnitt installiert, und dann laeuft die ganze Seite
 * kursiv - ein Fehler, der in einem Entwurf schon einmal aufgetreten ist.
 */

/*
 * FARBEN - aus dem Markenblatt zu Firma 7 (THANU Translation):
 *
 *   Gold        #AD802C
 *   Gold hell   #DAAF27
 *   Purpur      #801425
 *
 * Verwandte Toene der Homepage: Crimson #7B1226, Creme #FAFAF6.
 *
 * WICHTIG ZUM GOLD: #AD802C erreicht auf Weiss nur 3,6:1 und faellt damit
 * durch die Lesbarkeitsschwelle von 4,5:1. Es ist hier deshalb KEINE
 * Textfarbe auf hellem Grund, sondern nur Rahmen, Linie und Flaeche. Wo Gold
 * als Schrift gebraucht wird, steht dunkler Grund dahinter, und dort gilt das
 * helle #DAAF27.
 *
 * Getragen wird die Oberflaeche deshalb vom Purpur: #801425 auf Creme sind
 * 8,8:1, Weiss auf #801425 sind 9,1:1 - beides steht auch auf einem
 * Handydisplay in der Sonne.
 */
:root {
    --grund: #faf8f4;
    --flaeche: #ffffff;
    --rand: #e2dacd;          /* warm, nicht grau - passt zum Creme */
    --rand-stark: #c9bda6;
    --text: #23191b;
    --text-leise: #6d5f5c;

    --tief: #3d0910;          /* Kopf- und Fusszeile */
    --tief-hell: #801425;
    --signal: #801425;        /* Purpur - traegt die Schaltflaechen */
    --signal-dunkel: #5e0d1b;
    --crimson: #7b1226;       /* Ton der Homepage, fuer Verweise */

    --gold: #ad802c;          /* NUR Rahmen, Linien, Flaechen */
    --gold-hell: #daaf27;     /* Schrift - ausschliesslich auf dunklem Grund */
    --gold-flaeche: #fdf6e4;

    --gut: #1d6b46;
    --gut-flaeche: #e6f2eb;
    --warnung: #8a5a00;
    --warnung-flaeche: #fdf3dc;
    --fehler: #a81f13;
    --fehler-flaeche: #fbeae8;

    --radius: 7px;
    --schatten: 0 1px 2px rgba(61, 9, 16, .07), 0 4px 14px rgba(61, 9, 16, .05);

    color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;          /* nicht 14 - vieles hier wird am Handy gelesen */
    line-height: 1.6;

    /* Die Fussleiste gehoert an den unteren Rand, auch wenn die Seite kurz
       ist. Ohne das endet sie mitten im Bild, und darunter steht eine leere
       Flaeche - das sieht aus, als waere die Seite abgebrochen. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3 {
    line-height: 1.25;
    text-wrap: balance;
    margin: 0 0 .5em;
    font-weight: 600;
}

h1 { font-size: 1.95rem; letter-spacing: -.015em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }

a { color: var(--crimson); }
a:hover { color: var(--signal-dunkel); }

.leise { color: var(--text-leise); }
.klein { font-size: .9rem; }
.mitte { text-align: center; }
.kein-abstand { margin-bottom: 0; }

/* ---------- Geruest ---------- */

.huelle {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

.huelle.eng { max-width: 33rem; }

.kopf {
    background: var(--tief);
    color: #fff;

    /* Der Goldstreifen unter der Kopfzeile ist der einzige Ort, an dem das
       Gold grossflaechig auftritt. Als Linie ist es unbedenklich - es muss
       nichts gelesen werden, was darauf steht. */
    border-bottom: 3px solid var(--gold);
    padding: .7rem 0;
}

.kopf .huelle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    text-decoration: none;
}

/* Die Kopfzeile nimmt logo-dunkel.png (56 KB), nicht logo.png (688 KB).
   Der Unterschied faellt genau dort auf, wo diese Anwendung benutzt wird:
   im Mobilfunknetz. */
.marke img {
    display: block;
    height: 38px;
    width: auto;
}

.marke-wort {
    font-weight: 600;
    letter-spacing: -.01em;
    font-size: 1.05rem;
}

.marke-zusatz {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--gold-hell);  /* Gold als Schrift - hier erlaubt, dunkler Grund */
}

.kopf nav {
    display: flex;
    gap: .25rem;
    align-items: center;
    flex-wrap: wrap;
}

.kopf nav a {
    color: #f0e2e4;
    text-decoration: none;
    padding: .6rem .7rem;
    border-radius: var(--radius);
    font-size: .95rem;
}

.kopf nav a:hover,
.kopf nav a:focus-visible { background: rgba(255, 255, 255, .13); color: #fff; }
.kopf nav a[aria-current="page"] { background: rgba(255, 255, 255, .17); color: #fff; }

/* Abmelden aendert etwas und gehoert deshalb hinter ein Formular mit
   Sicherheitsmarke, nicht hinter einen Verweis. Aussehen soll es trotzdem wie
   die Verweise daneben - sonst springt in der Kopfzeile ein Bedienelement
   heraus, das gar nicht wichtiger ist als der Rest. */
.kopf nav form { margin: 0; display: inline; }

.kopf nav button.wie-verweis {
    font: inherit;
    font-size: .95rem;
    color: #f0e2e4;
    background: transparent;
    border: 0;
    padding: .6rem .7rem;
    border-radius: var(--radius);
    cursor: pointer;
    min-height: auto;
}

.kopf nav button.wie-verweis:hover,
.kopf nav button.wie-verweis:focus-visible { background: rgba(255, 255, 255, .13); color: #fff; }

main {
    padding: 2rem 0 3rem;
    flex: 1 0 auto;           /* schiebt die Fussleiste nach unten */
}

.fuss {
    background: var(--tief);
    color: #d6bfc3;
    padding: 1.5rem 0;
    font-size: .9rem;
    margin-top: 3rem;
    flex: none;
}

.fuss a { color: #f0dfe2; }
.fuss .huelle { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fuss p { margin: 0; }

/* ---------- Flaechen ---------- */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.5rem;
}

.karte + .karte { margin-top: 1rem; }
.karte > :last-child { margin-bottom: 0; }

/* Die hervorgehobene Karte - fuer das, was auf einer Seite die Hauptsache
   ist. Der Goldbalken links statt einer goldenen Flaeche: eine Linie muss
   nicht gelesen werden, ein Text auf Gold schon. */
.karte.betont { border-left: 5px solid var(--gold); }
.karte.streng { border-left: 5px solid var(--signal); }

.raster {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.trenner { border: 0; border-top: 1px solid var(--rand); margin: 1.5rem 0; }

/* ---------- Formulare ---------- */

.feld { margin-bottom: 1.15rem; }

.feldpaar {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .95rem;
}

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=datetime-local], input[type=number],
input[type=file], select, textarea {
    width: 100%;
    min-height: 48px;
    padding: .6rem .75rem;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 2px solid var(--rand-stark);
    border-radius: var(--radius);
}

textarea { min-height: 7rem; resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 2px;
}

/* Die Umrandung allein reicht nicht als Fehleranzeige - wer Rot und Gruen
   nicht unterscheidet, sieht sie nicht. Der Text unter dem Feld sagt es
   deshalb ausdruecklich. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--fehler);
}

.fehlertext {
    display: block;
    color: var(--fehler);
    font-size: .9rem;
    font-weight: 600;
    margin-top: .3rem;
}

.hinweis-feld { font-size: .88rem; color: var(--text-leise); margin-top: .3rem; }

.pflicht { color: var(--fehler); font-weight: 700; }

.haken {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.45;
}

.haken input { width: 24px; height: 24px; min-height: 0; flex: none; margin-top: .2rem; }

fieldset.wahl { border: 0; padding: 0; margin: 0 0 1.25rem; }

fieldset.wahl legend {
    font-weight: 600;
    font-size: .95rem;
    padding: 0;
    margin-bottom: .5rem;
}

.wahl-feld {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border: 2px solid var(--rand-stark);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin-bottom: .5rem;
    cursor: pointer;
    font-weight: 400;
    background: #fff;
    min-height: 48px;
}

.wahl-feld:has(input:checked) {
    border-color: var(--signal);
    background: var(--gold-flaeche);
}

.wahl-feld input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .2rem; }
.wahl-feld strong { display: block; }
.wahl-feld .leise { font-size: .88rem; }

/* ---------- Schaltflaechen ----------
 *
 * ACHTUNG BEIM ERWEITERN: Eine Abschnittsregel wie `.irgendwas a { color: … }`
 * schlaegt wegen hoeherer Spezifitaet die Regel hier - und dann steht die
 * Beschriftung eines Knopfes in der Abschnittsfarbe auf der Knopffarbe. Im
 * Entwurf der Produktseite war das genau einmal Gold auf Gold und damit
 * unsichtbar. Abschnittsregeln fuer Verweise stehen deshalb weiter unten
 * ausnahmslos mit `:not(.knopf)`.
 */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: .7rem 1.4rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--signal);
    border: 2px solid var(--signal);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.knopf:hover,
.knopf:focus-visible { background: var(--signal-dunkel); border-color: var(--signal-dunkel); color: #fff; }

.knopf.breit { width: 100%; }

.knopf.ruhig {
    background: #fff;
    color: var(--signal);
    border-color: var(--rand-stark);
}

.knopf.ruhig:hover,
.knopf.ruhig:focus-visible { background: var(--gold-flaeche); color: var(--signal-dunkel); border-color: var(--gold); }

.knopf.gefahr { background: var(--fehler); border-color: var(--fehler); }
.knopf.gefahr:hover, .knopf.gefahr:focus-visible { background: #8a180f; border-color: #8a180f; }

.knopf.gross { min-height: 64px; font-size: 1.1rem; }

.knopf-klein { min-height: 44px; padding: .35rem .8rem; font-size: .88rem; }

.knopf-reihe {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

.knopf-reihe form { margin: 0; }

/* ---------- Meldungen ---------- */

.meldung {
    border: 1px solid;
    border-left-width: 5px;
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: 1.25rem;
}

.meldung.gut { background: var(--gut-flaeche); border-color: var(--gut); color: #124630; }
.meldung.warnung { background: var(--warnung-flaeche); border-color: var(--warnung); color: #63410a; }
.meldung.fehler { background: var(--fehler-flaeche); border-color: var(--fehler); color: #7d1710; }
.meldung ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.meldung p:last-child, .meldung li:last-child { margin-bottom: 0; }
.meldung strong { display: block; }

/* Die Zusage - kein Schmuck, sondern der Text, mit dem diese Anwendung wirbt:
 * verschluesselte Ablage, keine Texterkennung, keine Weitergabe ohne
 * Einwilligung. Er steht dort, wo die Datei hochgeladen und verwaltet wird,
 * und nicht nur im Datenschutztext, den niemand aufschlaegt.
 */
.zusage {
    border: 1px solid var(--gold);
    border-left-width: 5px;
    border-radius: var(--radius);
    background: var(--gold-flaeche);
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

.zusage h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.zusage ul { margin: 0; padding-left: 1.2rem; }
.zusage li + li { margin-top: .3rem; }

/* ---------- Kleinteile ---------- */

.pille {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 600;
    padding: .18rem .6rem;
    border-radius: 100px;
    border: 1px solid var(--rand-stark);
    background: #fff;
    white-space: nowrap;
}

.pille.offen { border-color: var(--warnung); color: #63410a; background: var(--warnung-flaeche); }
.pille.gut { border-color: var(--gut); color: #124630; background: var(--gut-flaeche); }
.pille.aus { border-color: var(--rand-stark); color: var(--text-leise); }
.pille.streng { border-color: var(--fehler); color: #7d1710; background: var(--fehler-flaeche); }

/* Die Herkunft einer Anfrage - Homepage oder App. Sie ist der ganze Sinn des
   Feldes: Erst wenn sich ablesen laesst, welcher Weg benutzt wird, ist die
   Frage zu beantworten, ob sich die Pflege des zweiten noch lohnt. Deshalb
   steht sie in der Liste und nicht im Auskunftsbereich. */
.pille.quelle { border-color: var(--gold); background: var(--gold-flaeche); color: #5e4a12; }

.kennzahlen {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-bottom: 1.5rem;
}

.kennzahlen > div {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}

.kz-wert {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kz-name { display: block; font-size: .82rem; color: var(--text-leise); }

/* ---------- Listen als Karten ----------
 *
 * WARUM KEINE TABELLE: Eine Tabelle mit sechs Spalten wird auf dem Handy zu
 * einer Flaeche, die sich waagerecht schieben laesst - und dann ist die
 * Spalte, auf die es ankommt, gerade aus dem Bild. Als Karten steht jede
 * Zeile untereinander und bleibt lesbar. Auf breiten Schirmen greift die
 * Rasterform weiter unten.
 */

.liste { display: grid; gap: .75rem; }

.eintrag {
    display: block;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-left: 4px solid var(--rand-stark);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    text-decoration: none;
    color: inherit;
}

a.eintrag:hover, a.eintrag:focus-visible { border-color: var(--gold); border-left-color: var(--signal); }

.eintrag.wartet { border-left-color: var(--warnung); }
.eintrag.erledigt { border-left-color: var(--gut); }
.eintrag.abgesagt { border-left-color: var(--rand-stark); opacity: .75; }

.eintrag-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .2rem;
}

.eintrag-titel { font-weight: 600; }

.eintrag-zeile {
    display: flex;
    gap: .35rem 1rem;
    flex-wrap: wrap;
    font-size: .9rem;
    color: var(--text-leise);
}

.zeitpunkt { font-variant-numeric: tabular-nums; }

/* Eine Beschreibungsliste fuer Einzelansichten. Zwei Spalten erst, wenn Platz
   ist - untereinander liest sich ein Feldname mit langem Wert am Handy
   besser als eine gequetschte Spalte. */
.daten { margin: 0; }
.daten dt { font-weight: 600; font-size: .88rem; color: var(--text-leise); }
.daten dd { margin: 0 0 .9rem; }
.daten dd:last-child { margin-bottom: 0; }

@media (min-width: 40rem) {
    .daten {
        display: grid;
        grid-template-columns: 11rem 1fr;
        gap: .1rem 1.25rem;
    }

    .daten dt { padding-top: .1rem; }
    .daten dd { margin-bottom: .55rem; }
}

/* Die Blaetterung kommt aus partials/blaetterung.blade.php und nicht aus der
   mitgelieferten Fassung von Laravel - die ist Tailwind-Markup und haette hier
   keine einzige passende Klasse. Deshalb reichen zwei Regeln. */
.blaetterung { margin-top: 1.5rem; }

.blaetterung nav {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* Die abgeschaltete Richtung bleibt stehen statt zu verschwinden: Sonst
   springt der Knopf "Weiter" auf der letzten Seite an die Stelle, an der eben
   noch "Zurueck" war - und wer schnell tippt, blaettert rueckwaerts. */
.blaetterung [aria-disabled="true"] { opacity: .45; cursor: default; }

.leerlauf {
    text-align: center;
    color: var(--text-leise);
    padding: 2rem 1rem;
    border: 2px dashed var(--rand-stark);
    border-radius: var(--radius);
}

.abschnitt { margin-bottom: 2.5rem; }
.abschnitt > h2 { border-bottom: 2px solid var(--gold); padding-bottom: .3rem; }

/* Siehe Hinweis bei den Schaltflaechen: `:not(.knopf)` steht hier, damit ein
   Knopf innerhalb eines Abschnitts seine eigene Beschriftungsfarbe behaelt. */
.abschnitt a:not(.knopf) { color: var(--crimson); }

/* ---------- Einstiegsseite ---------- */

.einstieg {
    background: var(--tief);
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 3px solid var(--gold);
}

.einstieg h1 { margin-bottom: .3rem; }
.einstieg p { color: #eddadd; margin-bottom: 0; }
.einstieg .leise { color: #d6bfc3; }

.wege {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.weg {
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-top: 4px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.35rem;
    text-decoration: none;
    color: inherit;
}

.weg:hover, .weg:focus-visible { border-top-color: var(--signal); }
.weg h2 { font-size: 1.15rem; margin-bottom: .35rem; }
.weg p { color: var(--text-leise); font-size: .95rem; margin-bottom: 0; }
.weg .weg-zeichen { font-size: 1.9rem; line-height: 1; margin-bottom: .5rem; }

/* ---------- Numerologie ---------- */

.zahlen {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.zahlkarte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-top: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.zahlkarte h3 { margin-bottom: .1rem; }

.zahl-gross {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--signal);
    font-variant-numeric: tabular-nums;
}

.zahl-summe { font-size: .95rem; color: var(--text-leise); }

.planet { font-size: .95rem; margin: .5rem 0 .6rem; }
.planet .tamil { font-size: 1.15rem; }

/* Die Rechnung steht sichtbar auf der Seite. Wer ein Ergebnis nicht
   nachrechnen kann, glaubt es blind oder gar nicht - beides ist schlechter
   als eine Zeile, in der jeder Buchstabe mit seinem Wert steht. */
.rechnung {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: flex-end;
    margin: .75rem 0;
}

.rechnung .zeichen {
    display: grid;
    place-items: center;
    min-width: 2.1rem;
    padding: .25rem .3rem;
    border: 1px solid var(--gold);
    border-radius: 5px;
    background: var(--gold-flaeche);
    line-height: 1.15;
}

.rechnung .zeichen b { font-size: 1.05rem; }
.rechnung .zeichen span { font-size: .78rem; color: #5e4a12; font-variant-numeric: tabular-nums; }
.rechnung .gleich { font-weight: 700; padding: 0 .25rem 0 .5rem; align-self: center; }
.rechnung .ergebnis { font-size: 1.3rem; font-weight: 700; align-self: center; font-variant-numeric: tabular-nums; }

/* Die Einordnung - woher die Methode stammt und was daran belegt ist. Sie
   steht bewusst nicht im Kleingedruckten: Ohne sie liest sich die Seite als
   Heilsversprechen, und das ist sie nicht. */
.einordnung {
    border-left: 4px solid var(--rand-stark);
    padding-left: 1rem;
    color: var(--text-leise);
    font-size: .93rem;
}

/* ---------- Tamil lernen ----------
 * Bedient wird das von Kindern, oft am Handy der Eltern. Grosse Zeichen, viel
 * Luft, keine feinen Unterschiede - und keine Punktzahl.
 */

.lernraster {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.lernkarte {
    background: var(--flaeche);
    border: 2px solid var(--rand);
    border-radius: 12px;
    padding: 1rem .6rem;
    text-align: center;
}

.zeichen-gross {
    font-size: 2.8rem;
    line-height: 1.15;
    display: block;
    color: var(--signal);
}

.emoji-gross { font-size: 2.6rem; line-height: 1.15; display: block; }
.umschrift { font-size: 1rem; font-weight: 600; display: block; margin-top: .3rem; }
.bedeutung { font-size: .9rem; color: var(--text-leise); display: block; }

.uebungskarte {
    background: var(--flaeche);
    border: 3px solid var(--gold);
    border-radius: 14px;
    padding: 2rem 1rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.uebungskarte .zeichen-gross { font-size: 5rem; }
.uebungskarte .emoji-gross { font-size: 4.5rem; }

.antworten {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.antwort {
    min-height: 72px;         /* Kinderfinger treffen ungenauer als Erwachsene */
    font: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    background: var(--flaeche);
    color: var(--text);
    border: 3px solid var(--rand-stark);
    border-radius: 12px;
    padding: .9rem;
    cursor: pointer;
}

.antwort:hover:not(:disabled) { border-color: var(--gold); }

/* Richtig und falsch nicht nur an der Farbe: Das Zeichen davor sagt es
   ebenfalls, damit es auch erkennt, wer Rot und Gruen nicht unterscheidet. */
.antwort.richtig { border-color: var(--gut); background: var(--gut-flaeche); color: #124630; }
.antwort.falsch { border-color: var(--fehler); background: var(--fehler-flaeche); color: #7d1710; }
.antwort:disabled { cursor: default; }

/* ---------- Betreiber-Ansicht ----------
 * Bewusst anders als die Betriebsoberflaeche. Wer hier arbeitet, sieht fremde
 * Daten - das muss an jeder Stelle erkennbar sein, nicht nur auf der ersten
 * Seite. Deshalb dunkler Grund, kein Creme, und ein Streifen, der nicht
 * wegzuklicken ist.
 */

.betreiber-streifen {
    background: #6b1008;
    color: #fff;
    text-align: center;
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}

body.betreiber {
    background: #1c1a19;
    color: #ece7e2;
}

body.betreiber .kopf,
body.betreiber .fuss { background: #100e0e; border-bottom-color: #8a6a24; }
body.betreiber .fuss { color: #9d938c; border-top: 1px solid #332f2c; }
body.betreiber .fuss a { color: #c6bcb3; }

body.betreiber h1, body.betreiber h2, body.betreiber h3 { color: #fff; }

body.betreiber .karte,
body.betreiber .eintrag,
body.betreiber .kennzahlen > div {
    background: #262322;
    border-color: #3a3634;
    color: #ece7e2;
    box-shadow: none;
}

body.betreiber .eintrag { border-left-color: #4a4441; }
body.betreiber a.eintrag:hover, body.betreiber a.eintrag:focus-visible { border-color: var(--gold-hell); }

/* Auf diesem Grund traegt das helle Gold als Schrift: #DAAF27 auf #262322
   sind 7,9:1. Das dunkle #AD802C waere hier zu schwach - deshalb tauschen die
   beiden Goldtoene genau hier die Rolle. */
body.betreiber .kz-wert { color: var(--gold-hell); }
body.betreiber .kz-name,
body.betreiber .leise,
body.betreiber .eintrag-zeile,
body.betreiber .hinweis-feld { color: #a79d95; }

body.betreiber a:not(.knopf) { color: var(--gold-hell); }
body.betreiber .abschnitt > h2 { border-bottom-color: #8a6a24; }

body.betreiber label { color: #ece7e2; }

body.betreiber input[type=text], body.betreiber input[type=email],
body.betreiber input[type=password], body.betreiber select, body.betreiber textarea {
    background: #161413;
    color: #ece7e2;
    border-color: #4a4441;
}

/* Die Schaltflaeche bleibt hier in Purpur mit weisser Schrift. Sie wurde NICHT
   auf Gold umgestellt: Gold als Flaeche mit weisser Schrift ergibt 2,4:1 und
   waere unleserlich - der Fehler, der im Entwurf der Produktseite schon
   einmal drin war. */
body.betreiber .knopf.ruhig {
    background: #262322;
    color: var(--gold-hell);
    border-color: #4a4441;
}

body.betreiber .knopf.ruhig:hover,
body.betreiber .knopf.ruhig:focus-visible { background: #332f2c; border-color: var(--gold-hell); color: var(--gold-hell); }

body.betreiber .karte.streng { border-left-color: var(--gold-hell); }

body.betreiber .daten dt { color: #a79d95; }
body.betreiber .trenner { border-top-color: #3a3634; }
body.betreiber .leerlauf { border-color: #3a3634; color: #a79d95; }

body.betreiber .pille { background: #161413; border-color: #4a4441; color: #d8d0c9; }
body.betreiber .pille.gut { border-color: #3f8a63; color: #9fd9bb; background: #16241d; }
body.betreiber .pille.aus { color: #978d86; }

/* Das Grundfeld fuer den Grund des Zugriffs. Es steht VOR dem Verweis in den
   Betrieb, nicht danach - ein Feld hinter der Tuer wird nicht ausgefuellt. */
.grundfeld {
    background: #262322;
    border: 1px solid #4a4441;
    border-left: 5px solid var(--gold-hell);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
}

.grundfeld label { font-weight: 600; }

/* ---------- Anpassungen fuer kleine Schirme ---------- */

@media (max-width: 30rem) {
    body { font-size: 16px; }
    h1 { font-size: 1.5rem; }
    .karte { padding: 1.15rem; }
    .einstieg { padding: 1.5rem 1.15rem; }
    .marke img { height: 32px; }
    .uebungskarte .zeichen-gross { font-size: 4rem; }
    .kopf nav a, .kopf nav button.wie-verweis { padding: .55rem .5rem; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Gedruckt wird hier eine Terminbestaetigung oder eine Anfrage - Navigation
   und Schaltflaechen gehoeren dann nicht aufs Blatt. */
@media print {
    .kopf, .fuss, .knopf, .knopf-reihe, .betreiber-streifen, .blaetterung { display: none !important; }
    body { background: #fff; font-size: 12pt; }
    .karte { box-shadow: none; border: 1px solid #999; }
}