/* ---------------------------------------------------------------------------
   Gestaltung von AccessKlar.

   Bewusst schlicht und ohne CSS-Framework: weniger Abhängigkeiten, schnellere
   Ladezeiten und leicht nachvollziehbar. Farben und Abstände sind als
   Variablen definiert und lassen sich zentral ändern.

   NAMENSREGELN (damit auch in einem Jahr klar ist, wohin eine Regel gehört):

     seite-…    Bausteine aus dem Grundgerüst templates/base.html
                (Kopfzeile, Hauptbereich, Fußzeile) - erscheinen auf JEDER Seite
     sprachwahl-…  die Sprachumschaltung in der Kopfzeile
     meldung-…  Kurzmeldungen von Django (base.html)
     start-…    ausschließlich templates/website/startseite.html

     --aktiv    doppelter Bindestrich = Zustand oder Abwandlung eines Bausteins
                (Beispiel: sprachwahl-knopf--aktiv)

   Neue Seiten bekommen ein eigenes Präfix (z. B. upload-… für die spätere
   Upload-Seite). So lässt sich zu jeder Regel sofort das Template finden -
   und beim Entfernen einer Seite ist klar, welche Regeln mit verschwinden.
   --------------------------------------------------------------------------- */

:root {
    --farbe-text: #1f2933;
    --farbe-text-hell: #52606d;
    --farbe-akzent: #1c5d99;
    --farbe-akzent-hell: #eef4fa;
    --farbe-rahmen: #d9e2ec;
    --farbe-hintergrund: #f7f9fb;
    --breite-inhalt: 60rem;
    --radius: 6px;
}

/* ===========================================================================
   Grundlagen - gelten überall, ohne Klassennamen
   =========================================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* Systemschriften: sehen auf jedem Gerät nativ aus und müssen nicht
       nachgeladen werden (auch ein Datenschutzvorteil: keine externen Fonts). */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--farbe-text);
    background-color: var(--farbe-hintergrund);
}

h1 {
    font-size: 2rem;
    line-height: 1.25;
    margin: 0 0 1rem;
}

h2 {
    font-size: 1.35rem;
    margin: 2.5rem 0 1rem;
}

h3 {
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
}

/* ===========================================================================
   Grundgerüst (templates/base.html)
   =========================================================================== */

/* Begrenzt die Textbreite und zentriert den Inhalt. Wird in Kopfzeile,
   Hauptbereich und Fußzeile gleichermaßen eingesetzt. */
.seite-breite {
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.seite-kopf {
    background: #ffffff;
    border-bottom: 1px solid var(--farbe-rahmen);
}

.seite-kopf-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Marke links, Sprachauswahl rechts. */
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.seite-marke {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
}

.seite-marke-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--farbe-akzent);
    text-decoration: none;
}

.seite-marke-zusatz {
    color: var(--farbe-text-hell);
    font-size: 0.95rem;
}

/* --- Sprachauswahl in der Kopfzeile -------------------------------------- */

.sprachwahl {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.sprachwahl-symbol {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--farbe-text-hell);
    flex-shrink: 0;
}

.sprachwahl-text {
    color: var(--farbe-text-hell);
    font-size: 0.85rem;
}

.sprachwahl-knopf {
    /* Ein Button, der wie ein schlichter Schalter aussieht. */
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.55rem;
    color: var(--farbe-text-hell);
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    cursor: pointer;
}

.sprachwahl-knopf:hover {
    border-color: var(--farbe-akzent);
    color: var(--farbe-akzent);
}

/* Die gerade aktive Sprache wird farblich hervorgehoben. */
.sprachwahl-knopf--aktiv,
.sprachwahl-knopf--aktiv:hover {
    background: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: #ffffff;
    cursor: default;
}

/* Auf schmalen Bildschirmen die Beschriftung ausblenden - das Globus-Symbol
   erklärt sich von selbst und die Kopfzeile bleibt aufgeräumt. */
@media (max-width: 33rem) {
    .sprachwahl-text {
        display: none;
    }
}

/* --- Hauptbereich -------------------------------------------------------- */

.seite-hauptbereich {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

/* --- Kurzmeldungen ------------------------------------------------------- */

/* Der zweite Klassenname entsteht in base.html aus den Django-Kategorien
   (success, error, warning, info). Nur die beiden wichtigsten sind hier
   ausgestaltet; alle übrigen erscheinen im neutralen Grundstil. */
.meldung {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid var(--farbe-rahmen);
    background: #ffffff;
}

.meldung--error {
    border-color: #cf1124;
    background: #ffeeee;
}

.meldung--success {
    border-color: #207561;
    background: #effcf6;
}

/* --- Fußzeile ------------------------------------------------------------ */

.seite-fuss {
    border-top: 1px solid var(--farbe-rahmen);
    background: #ffffff;
    padding: 1.5rem 0;
    color: var(--farbe-text-hell);
    font-size: 0.9rem;
}

.seite-fuss p {
    margin: 0 0 0.35rem;
}

.seite-fuss-klein {
    font-size: 0.8rem;
}

/* ===========================================================================
   Startseite (templates/website/startseite.html)
   =========================================================================== */

/* --- Einstieg ------------------------------------------------------------ */

.start-einstieg-text {
    max-width: 45rem;
    color: var(--farbe-text-hell);
}

/* Aufruf zum Hochladen direkt unter dem Einstiegstext. */
.start-aufruf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.start-aufruf-zusatz {
    color: var(--farbe-text-hell);
    font-size: 0.9rem;
}

/* Hinweiskasten (derzeit ungenutzt, bleibt für kommende Hinweise erhalten). */
.start-hinweis {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--farbe-akzent-hell);
    border-left: 4px solid var(--farbe-akzent);
    border-radius: var(--radius);
    font-size: 0.95rem;
}

/* --- Ablauf in drei Schritten -------------------------------------------- */

.start-schritte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Passt sich automatisch an: nebeneinander auf großen Bildschirmen,
       untereinander auf dem Handy - ganz ohne JavaScript. */
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.start-schritte li {
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    padding: 1.1rem;
}

.start-schritte p {
    margin: 0;
    color: var(--farbe-text-hell);
    font-size: 0.95rem;
}

/* --- Aufzählungen (Berichtsinhalte und Ausblick) ------------------------- */

.start-punkte {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--farbe-text-hell);
}

.start-punkte li {
    margin-bottom: 0.35rem;
}

/* --- Fließtextabschnitte (Zielgruppe und Ausblick) ----------------------- */

.start-fliesstext {
    max-width: 45rem;
    color: var(--farbe-text-hell);
}

/* --- Ausblick auf die geplante Weiterentwicklung ------------------------- */

.start-ausblick {
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--farbe-akzent-hell);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
}

.start-ausblick h2 {
    margin-top: 0;
}

/* Kleine Kennzeichnung, damit sofort klar ist: noch nicht buchbar. */
.start-ausblick-marke {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.15rem 0.6rem;
    background: var(--farbe-akzent);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.start-ausblick-fussnote {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--farbe-text-hell);
    max-width: 45rem;
}

/* --- Zweispaltiges Layout mit Infokasten ---------------------------------- */

/* Auf dem Handy stehen Haupttext und Infokasten untereinander, auf breiten
   Bildschirmen nebeneinander. */
.start-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 55rem) {
    .start-layout {
        /* minmax(0, …) verhindert, dass langer Text die Spalte aufsprengt. */
        grid-template-columns: minmax(0, 1fr) 19rem;
    }
}

/* --- Aufklappbarer Infokasten (rechte Spalte) ------------------------------ */

.start-infobox {
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
}

/* Nur auf breiten Bildschirmen: Der Kasten bleibt beim Scrollen in der
   rechten Spalte stehen ("sticky"), statt mit dem Haupttext mitzuwandern. */
@media (min-width: 55rem) {
    .start-infobox {
        position: sticky;
        top: 1rem;
    }
}

/* Die aufklappbare Überschrift. Das Standard-Aufklappdreieck der Browser
   wird ausgeblendet und durch einen eigenen Pfeil (Chevron) ersetzt. */
.start-infobox-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--farbe-akzent);
}

/* Safari blendet das Dreieck nur über diese Pseudoklasse aus. */
.start-infobox-titel::-webkit-details-marker {
    display: none;
}

/* Pfeil nach unten rechts als Hinweis, dass sich hier etwas aufklappen
   lässt. Der Pfeil ist ein eingebettetes SVG (Chevron), damit er sauber
   skaliert und unabhängig von installierten Schriftarten aussieht. */
.start-infobox-titel::after {
    content: "";
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 50%;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* Im geöffneten Zustand (Attribut "open") dreht sich der Pfeil nach oben. */
.start-infobox[open] .start-infobox-titel::after {
    transform: rotate(180deg);
}

/* Beim Überfahren mit der Maus färben sich Rahmen und Pfeil in der
   Akzentfarbe - dafür gibt es eine zweite SVG-Variante mit blauem Strich. */
.start-infobox-titel:hover::after {
    border-color: var(--farbe-akzent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231c5d99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Sichtbarer Tastatur-Fokus, damit die Bedienung ohne Maus nachvollziehbar
   bleibt. */
.start-infobox-titel:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.start-infobox-inhalt {
    margin-top: 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--farbe-rahmen);
    color: var(--farbe-text-hell);
}

.start-infobox-inhalt h3 {
    margin: 1.5rem 0 0.5rem;
    color: var(--farbe-text);
}

.start-infobox-inhalt p {
    margin: 0 0 0.75rem;
}

/* Foto und kurzer Steckbrief stehen nebeneinander. */
.start-infobox-person {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.start-infobox-foto {
    flex-shrink: 0;
    width: 4.5rem;
    /* Höhe frei lassen, damit das Foto im eigenen Seitenverhältnis bleibt. */
    height: auto;
}

/* Nummerierte Schritte und Aufzählung im Kasten etwas enger als im
   Haupttext. */
.start-infobox-schritte,
.start-infobox-punkte {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
}

.start-infobox-schritte li,
.start-infobox-punkte li {
    margin-bottom: 0.5rem;
}

.start-infobox-schritte p {
    margin: 0.15rem 0 0;
}

/* ===========================================================================
   Upload-Seite (templates/analysen/hochladen.html)
   ======================================================================== */

/* Gleiches Grundmuster wie die Startseite: zwei Spalten am Bildschirm,
   untereinander auf dem Handy. */
.upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 60rem) {
    .upload-layout {
        grid-template-columns: 1fr;
    }
}

.upload-einstieg {
    color: var(--farbe-text-hell);
    margin-bottom: 1.5rem;
}

.upload-formular {
    background: #fff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.upload-feld {
    margin-bottom: 1.25rem;
}

.upload-beschriftung {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

/* Das Dateiauswahlfeld selbst lässt sich kaum gestalten - deshalb bekommt
   es nur einen ruhigen Rahmen und ausreichend Platz zum Antippen. */
.upload-feld-datei {
    display: block;
    width: 100%;
    padding: 0.6rem;
    border: 1px dashed var(--farbe-rahmen);
    border-radius: var(--radius);
    background: var(--farbe-akzent-hell);
}

.upload-hilfstext {
    color: var(--farbe-text-hell);
    font-size: 0.9rem;
    margin: 0.4rem 0 0;
}

/* Texteingabefelder (z. B. optionale E-Mail-Adresse im Upload-Formular oder
   das E-Mail-Feld auf der "Link vergessen"-Seite). */
.upload-feld-text {
    display: block;
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1rem;
}

.upload-feld-text:focus {
    outline: none;
    border-color: var(--farbe-akzent);
    box-shadow: 0 0 0 3px var(--farbe-akzent-hell);
}

/* Fehlermeldungen: rot, aber nicht schreiend - und mit Abstand, damit sie
   nicht mit dem Feld darüber verschmelzen. */
.upload-fehler {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid #b42318;
    background: #fef3f2;
    color: #912018;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.upload-fehler p {
    margin: 0;
}

.upload-feld--einwilligung {
    border-top: 1px solid var(--farbe-rahmen);
    padding-top: 1.25rem;
}

/* Kästchen und Text nebeneinander; der Text bleibt anklickbar, weil beides
   in einem gemeinsamen label steht. */
.upload-einwilligung {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    cursor: pointer;
}

.upload-einwilligung input {
    margin-top: 0.25rem;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
}

.upload-knopf {
    display: inline-block;
    background: var(--farbe-akzent);
    color: #fff;
    border: 1px solid var(--farbe-akzent);
    border-radius: var(--radius);
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.upload-knopf:hover {
    background: #17497a;
}

.upload-knopf--zweitrangig {
    background: #fff;
    color: var(--farbe-akzent);
}

.upload-knopf--zweitrangig:hover {
    background: var(--farbe-akzent-hell);
}

/* --- Fortschrittsanzeige (static/js/upload.js) ---------------------------- */

/* Verborgen, solange das Formular klassisch gesendet wird - sichtbar nur,
   wenn das Skript die Übertragung übernommen hat (Attribut "hidden"). */
.upload-fortschritt {
    margin-top: 1.25rem;
}

.upload-fortschritt-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.upload-fortschritt-prozent {
    font-size: 1.1rem;
    color: var(--farbe-akzent);
}

.upload-fortschritt-menge {
    color: var(--farbe-text-hell);
    font-size: 0.9rem;
}

/* Schiene und Füllung: ein schlichter Balken, der sich weich bewegt. */
.upload-fortschritt-balken {
    height: 0.6rem;
    background: var(--farbe-akzent-hell);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    overflow: hidden;
}

.upload-fortschritt-fuellung {
    height: 100%;
    width: 0;
    background: var(--farbe-akzent);
    /* Weiches Gleiten statt Sprünge zwischen den Fortschrittsmeldungen. */
    transition: width 0.25s ease-out;
}

.upload-fortschritt-status {
    margin-top: 0.5rem;
}

.upload-fortschritt-fehler {
    margin-top: 0.9rem;
}

/* Gesperrter Knopf während des Uploads: sichtbar, aber erkennbar inaktiv. */
.upload-knopf:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Ohne diese Regel würde der Zeiger-Hover den gesperrten Knopf wieder
   "aufwecken" (dunkler einfärben). */
.upload-knopf:disabled:hover {
    background: var(--farbe-akzent);
}

/* --- Datenschutzkasten in der Seitenspalte ------------------------------ */
.upload-datenschutz {
    background: var(--farbe-akzent-hell);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.upload-datenschutz h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.upload-datenschutz-punkte {
    list-style: none;
    margin: 0;
    padding: 0;
}

.upload-datenschutz-punkte li {
    margin-bottom: 0.9rem;
}

.upload-datenschutz-punkte p {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    color: var(--farbe-text-hell);
}

.upload-datenschutz-fussnote {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--farbe-rahmen);
    font-size: 0.9rem;
    color: var(--farbe-text-hell);
}

/* ===========================================================================
   Bestätigungsseite (templates/analysen/bestaetigung.html)
   ======================================================================== */

/* Einspaltig und schmal: Diese Seite hat genau eine Botschaft. */
.bestaetigung {
    max-width: 46rem;
}

.bestaetigung-kopf {
    text-align: center;
    margin-bottom: 2rem;
}

.bestaetigung-haken {
    font-size: 2.5rem;
    line-height: 1;
    color: #067647;
    margin: 0 0 0.5rem;
}

.bestaetigung-einstieg {
    color: var(--farbe-text-hell);
}

/* Der Link ist das Wichtigste auf dieser Seite - deshalb hervorgehoben. */
.bestaetigung-link-kasten {
    background: var(--farbe-akzent-hell);
    border: 1px solid var(--farbe-akzent);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.bestaetigung-link-kasten h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.bestaetigung-link-feld {
    width: 100%;
    padding: 0.6rem;
    margin: 0.5rem 0;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    background: #fff;
    /* Feste Schriftbreite: Die Kennung ist so besser abzulesen. */
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9rem;
}

.bestaetigung-warnung {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--farbe-text-hell);
}

/* Hinweis zum E-Mail-Status unter dem geheimen Link. */
.bestaetigung-email-hinweis {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: #e7f6ee;
    border: 1px solid #067647;
    color: #067647;
    font-size: 0.95rem;
}

.bestaetigung-email-hinweis a {
    color: #055a36;
    text-decoration: underline;
}

.bestaetigung-email-hinweis--warnung {
    background: #fff8e6;
    border-color: #b45309;
    color: #92400e;
}

/* Formular zum nachträglichen Hinterlegen der E-Mail-Adresse: Eingabefeld
   und Knopf stehen nebeneinander. */
.bestaetigung-email-formular {
    margin: 1rem 0 0;
}

.bestaetigung-email-zeile {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}

.bestaetigung-email-zeile .upload-feld-text {
    flex: 1;
}

@media (max-width: 40rem) {
    .bestaetigung-email-zeile {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Beschreibungsliste zweispaltig: links die Bezeichnung, rechts der Wert. */
.bestaetigung-liste {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

@media (max-width: 40rem) {
    .bestaetigung-liste {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.bestaetigung-liste dt {
    font-weight: 600;
    color: var(--farbe-text-hell);
}

.bestaetigung-liste dd {
    margin: 0;
}

.bestaetigung-pruefsumme summary {
    cursor: pointer;
    color: var(--farbe-akzent);
}

.bestaetigung-pruefsumme code {
    display: block;
    margin-top: 0.4rem;
    /* Die Prüfsumme ist 64 Zeichen lang und muss umbrechen dürfen. */
    overflow-wrap: anywhere;
    font-size: 0.85rem;
}

.bestaetigung-pruefsumme-erklaerung {
    font-size: 0.9rem;
    color: var(--farbe-text-hell);
}

.bestaetigung-ausblick {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--farbe-rahmen);
}

.bestaetigung-weiter {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* ===========================================================================
   Statusanzeige der Auftragsseite (templates/analysen/bestaetigung.html,
   Etappe D)
   ======================================================================== */

/* Kasten mit dem Bearbeitungsstand. Schlicht gehalten wie die übrigen
   Abschnitte der Seite; die Farbe trägt allein die Marke ("Pille"). */
.stand {
    margin-bottom: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    background: #fff;
}

.stand h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

/* Fortschrittsbalken unterhalb der Stand-Marke. */
.stand-fortschritt {
    position: relative;
    height: 1.5rem;
    margin: 0 0 1rem;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 999px;
    overflow: hidden;
}

.stand-fortschritt-leiste {
    height: 100%;
    background: var(--farbe-akzent);
    border-radius: 999px;
    transition: width 0.15s ease;
}

/* Bewegung abschalten, wenn der Besucher das in seinem System so
   eingestellt hat (Schwindel-Empfindlichkeit). */
@media (prefers-reduced-motion: reduce) {
    .stand-fortschritt-leiste {
        transition: none;
    }
}

.stand-fortschritt-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--farbe-text);
    /* Schatten, damit der Text auch über der blauen Leiste lesbar bleibt. */
    text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff;
}

/* Zeile mit Drehrad (nur solange es läuft) und der Stand-Marke. */
.stand-zeile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
}

/* Stand-Marke ("Pille"): Der Zustand ist auf einen Blick erkennbar.
   Grundform hier, Farben je Zustand darunter. */
.stand-marke {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
}

.stand--hochgeladen .stand-marke,
.stand--in_extraktion .stand-marke {
    color: #1c5d99;
    background: var(--farbe-akzent-hell);
    border: 1px solid var(--farbe-akzent);
}

.stand--extrahiert .stand-marke {
    color: #067647;
    background: #e7f6ee;
    border: 1px solid #067647;
}

.stand--extraktion_fehlgeschlagen .stand-marke {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #b42318;
}

.stand--geloescht .stand-marke {
    color: var(--farbe-text-hell);
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rahmen);
}

/* Die verständliche Fehlerursache (vom Server formuliert). */
.stand-fehler {
    padding: 0.75rem 1rem;
    border-left: 3px solid #b42318;
    background: #fef3f2;
}

/* Drehrad: reines CSS, ohne Bild und ohne JavaScript - ein halb
   durchsichtiger Ring, von dem ein Segment rotiert. Läuft nur, solange
   die Auswertung läuft (das Element gibt es sonst nicht im Markup). */
.stand-rad {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    border: 2px solid var(--farbe-rahmen);
    border-top-color: var(--farbe-akzent);
    border-radius: 50%;
    animation: stand-rad-drehen 0.9s linear infinite;
}

@keyframes stand-rad-drehen {
    to {
        transform: rotate(360deg);
    }
}

/* Bewegung abschalten, wenn der Besucher das in seinem System so
   eingestellt hat (Schwindel-Empfindlichkeit). */
@media (prefers-reduced-motion: reduce) {
    .stand-rad {
        animation: none;
    }
}

/* ===========================================================================
   Berichtsseite (templates/analysen/bericht.html, Etappe F)
   ======================================================================== */

.bericht {
    max-width: 55rem;
    margin: 0 auto;
}

.bericht-kopf {
    margin-bottom: 2rem;
}

.bericht-kopf h1 {
    margin: 0 0 0.5rem;
}

.bericht-zurueck {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}

.bericht-zurueck a {
    color: var(--farbe-akzent);
    text-decoration: none;
}

.bericht-zurueck a:hover,
.bericht-zurueck a:focus {
    text-decoration: underline;
}

.bericht-meta {
    margin: 0;
    color: var(--farbe-text-hell);
    font-size: 0.95rem;
}

.bericht-meta-trenner {
    margin: 0 0.35rem;
}

.bericht-inhalt {
    background: #ffffff;
    padding: 2rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
}

@media (max-width: 600px) {
    .bericht-inhalt {
        padding: 1.25rem;
    }
}

.bericht-inhalt h2,
.bericht-h1,
.bestaetigung-bericht h3 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    color: var(--farbe-text);
}

.bericht-inhalt h2:first-child,
.bericht-h1:first-child,
.bestaetigung-bericht h3:first-child {
    margin-top: 0;
}

.bericht-inhalt h3,
.bericht-h2,
.bestaetigung-bericht h4 {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.75rem;
    color: var(--farbe-text);
}

/* Dritte Überschriftenebene (z. B. die einzelnen "Befund"-Abschnitte):
   bewusst auffällig gestaltet, damit sie im Fließtext sofort auffallen. */
.bericht-inhalt h4,
.bericht-h3,
.bestaetigung-bericht h5 {
    font-size: 1.05rem;
    margin: 1.75rem 0 0.75rem;
    padding: 0.5rem 0.9rem;
    color: var(--farbe-akzent);
    background: var(--farbe-akzent-hell);
    border-left: 4px solid var(--farbe-akzent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.bericht-trennlinie {
    border: none;
    border-top: 1px solid var(--farbe-rahmen);
    margin: 1.75rem 0;
}

.bericht-inhalt code,
.bestaetigung-bericht code {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.9em;
    background: var(--farbe-akzent-hell);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 3px;
    padding: 0.1em 0.35em;
}

.bericht-inhalt p,
.bestaetigung-bericht p {
    margin: 0 0 1rem;
}

.bericht-inhalt ul,
.bericht-inhalt ol,
.bestaetigung-bericht ul,
.bestaetigung-bericht ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.bericht-inhalt li,
.bestaetigung-bericht li {
    margin-bottom: 0.35rem;
}

.bericht-inhalt strong,
.bestaetigung-bericht strong {
    font-weight: 600;
    color: var(--farbe-text);
}

.bericht-inhalt em,
.bestaetigung-bericht em {
    font-style: italic;
}

.bericht-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}

.bericht-tabelle th,
.bericht-tabelle td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--farbe-rahmen);
    text-align: left;
    vertical-align: top;
}

.bericht-tabelle th {
    background: var(--farbe-akzent-hell);
    color: var(--farbe-text);
    font-weight: 600;
}

.bericht-tabelle tbody tr:nth-child(even) {
    background: var(--farbe-hintergrund);
}

@media (max-width: 600px) {
    /* Schmale Bildschirme: Tabelle horizontal scrollbar machen, statt
       Spalten unleserlich zusammenzuquetschen. */
    .bericht-tabelle {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.bericht-leer {
    color: var(--farbe-text-hell);
    font-style: italic;
}

.bericht-fuss {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--farbe-rahmen);
    color: var(--farbe-text-hell);
    font-size: 0.95rem;
}

.bericht-fuss p {
    margin: 0 0 0.75rem;
}

.bericht-weiter {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.bestaetigung-bericht-link {
    margin-top: 1rem;
}

.bestaetigung-bericht-hinweis {
    color: var(--farbe-text-hell);
    font-style: italic;
    margin: 0 0 1rem;
}


.zahlung-cta {
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 2rem 0;
}

.zahlung-cta h2 {
    margin-top: 0;
    font-size: 1.25rem;
}

.zahlung-cta form {
    margin: 1rem 0 0.5rem;
}

.zahlung-cta-hinweis {
    color: var(--farbe-text-hell);
    font-size: 0.95rem;
    margin: 0;
}

/* ===========================================================================
   Einfache Textseiten (templates/website/datenschutz.html, Etappe I)
   ======================================================================== */

.text-seite {
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    padding: 2rem;
    margin: 2rem 0;
}

.text-seite h1 {
    margin-top: 0;
}

.text-seite ul {
    padding-left: 1.5rem;
    margin: 0 0 1.5rem;
}

.text-seite li {
    margin: 0.5rem 0;
}

.text-seite-fussnote {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--farbe-rahmen);
    color: var(--farbe-text-hell);
    font-size: 0.95rem;
}

/* Hinweis auf den Rechtstext-Seiten, wenn der Besucher eine andere
   Sprache eingestellt hat, als der Text verfügbar ist. */
.rechtshinweis {
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    background: #fff8e6;
    border-left: 4px solid #d9a400;
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.5;
}

.rechtshinweis p {
    margin: 0;
}

.rechtshinweis p + p {
    margin-top: 0.5rem;
}