/* ---------------------------------------------------------------------------
   Gestaltung des Access-Analyzers.

   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);
}

/* Kasten mit dem Hinweis, dass der Upload noch nicht bereitsteht. */
.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;
}