/* GIMA TrustNet – anwendungseigene Ergänzungen zum gemeinsamen GIMA-Stil.
   Alles Grundsätzliche (Seitenmenü, Karten, Tabellen, Knöpfe, Nacht-Modus)
   steht in style.css und ist in allen GIMA-Anwendungen gleich. Hier stehen nur
   die Bestandteile, die es woanders nicht gibt: Quotenbalken, Ergebnisfarben,
   Mailvorschau, Lernseite. */

.bild { width: 100%; height: 100%; display: block; }

/* Der Melde-Eintrag im Seitenmenü ist der wichtigste Knopf der Anwendung. */
.snav-melden { color: var(--gima-orange); font-weight: 600; }
.snav-melden .snav-ic { color: var(--gima-orange); }

/* ── Kachelraster (Startseite) ────────────────────────────────────────────── */
.kachel-grid {
    display: grid; gap: 1.1rem; margin: 1.4rem 0;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.kachel {
    border: 1px solid var(--border); border-radius: 12px; padding: 1.3rem;
    background: var(--surface); text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: .5rem; transition: .18s;
}
a.kachel:hover { border-color: var(--gima-orange); box-shadow: 0 4px 14px rgba(0,0,0,.07); transform: translateY(-2px); }
.kachel-kopf { display: flex; align-items: flex-start; gap: .9rem; }
.kachel-symbol { width: 42px; height: 42px; flex: 0 0 42px; color: var(--gima-orange); }
.kachel h3 { margin: 0 0 .15rem; font-size: 1.06rem; }
.kachel p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }

/* ── Kennzahlen ───────────────────────────────────────────────────────────── */
.zahlen-reihe { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.zahl-block { min-width: 8rem; }
.zahl-wert { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zahl-wert.gut { color: var(--success); }
.zahl-wert.schlecht { color: var(--danger); }
.zahl-wert.warn { color: var(--warning); }
.zahl-text { color: var(--text-muted); font-size: .82rem; }

/* ── Balken: Verteilung der Ergebnisse einer Kampagne ─────────────────────── */
.verteilung { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.verteilung span { display: block; height: 100%; }
.verteilung span[title] { cursor: help; }
.erg-gemeldet   { background: #27ae60; }
.erg-eingegeben { background: #c0392b; }
.erg-geklickt   { background: #e67e22; }
.erg-geoeffnet  { background: #2980b9; }
.erg-zugestellt { background: #b9c0c7; }
.legende { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); margin-top: .7rem; }
.legende span { display: inline-flex; align-items: center; gap: .4rem; }
.punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }

/* Einfacher Quotenbalken (Abteilungen, Verlauf) */
.balken { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; min-width: 60px; }
.balken > span { display: block; height: 100%; border-radius: 4px; }
.balken.klick > span { background: var(--warning); }
.balken.melde > span { background: var(--success); }

/* ── Zustandsmarken ───────────────────────────────────────────────────────── */
.marke { display: inline-block; padding: .18rem .6rem; border-radius: 20px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.marke-entwurf      { background: #edeff1; color: #5c6670; }
.marke-freigegeben  { background: #e3f0fa; color: #1f6ea8; }
.marke-laeuft       { background: #fdeee0; color: #b8621a; }
.marke-beendet      { background: #e4f6ea; color: #1e8449; }
.marke-abgebrochen  { background: #fbe4e2; color: #a93226; }
.marke-neu          { background: #fdeee0; color: #b8621a; }
.marke-pruefung     { background: #e3f0fa; color: #1f6ea8; }
.marke-simulation   { background: #e4f6ea; color: #1e8449; }
.marke-harmlos      { background: #edeff1; color: #5c6670; }
.marke-echt         { background: #fbe4e2; color: #a93226; }
.marke-leicht       { background: #e4f6ea; color: #1e8449; }
.marke-mittel       { background: #fdeee0; color: #b8621a; }
.marke-schwer       { background: #fbe4e2; color: #a93226; }

/* ── Vorschau einer Nachricht ─────────────────────────────────────────────── */
.mailvorschau { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.mailvorschau .kopf {
    background: var(--surface-2); padding: .8rem 1rem; border-bottom: 1px solid var(--border);
    font-size: .88rem; color: var(--text-muted);
}
.mailvorschau .kopf strong { color: var(--text); }
.mailvorschau .rumpf { padding: 1.2rem; color: #222; background: #fff; line-height: 1.65; }
.mailvorschau .rumpf a { color: #1f6ea8; }
.mailvorschau iframe { width: 100%; border: 0; background: #fff; }

/* ── Merkmalsliste (Lernseite, Selbsttest) ────────────────────────────────── */
.merkmale { list-style: none; padding: 0; margin: 1rem 0; }
.merkmale li {
    position: relative; padding: .55rem .6rem .55rem 2.1rem; margin-bottom: .4rem;
    border-left: 3px solid var(--gima-orange); background: var(--surface-2); border-radius: 0 6px 6px 0;
}
.merkmale li::before {
    content: "!"; position: absolute; left: .7rem; top: .5rem; font-weight: 700; color: var(--gima-orange);
}

/* ── Lernseite (öffentlich, ohne Seitenmenü) ──────────────────────────────── */
.lern-shell { max-width: 44rem; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
.lern-kopf { text-align: center; margin-bottom: 2rem; }
.lern-symbol { width: 92px; height: 92px; margin: 0 auto 1rem; color: var(--gima-orange); }
.lern-kopf h1 { font-size: 1.7rem; margin: 0 0 .5rem; }
.lern-kopf p { color: var(--text-muted); }
.lern-fuss { margin-top: 2.4rem; font-size: .84rem; color: var(--text-subtle); text-align: center; line-height: 1.7; }
.beruhigung {
    border: 1px solid var(--success); background: rgba(39,174,96,.08);
    border-radius: 10px; padding: 1rem 1.2rem; margin: 1.4rem 0;
}

/* Nachgebaute Anmeldeseite – schlicht und ohne fremde Marke. */
.koeder-box { max-width: 24rem; margin: 4rem auto; padding: 2rem; border: 1px solid #d5d5d5;
              border-radius: 10px; background: #fff; color: #222; font-family: Arial, sans-serif; }
.koeder-box h1 { font-size: 1.2rem; margin: 0 0 1.4rem; text-align: center; color: #333; }
.koeder-box label { display: block; font-size: .84rem; color: #555; margin-bottom: .3rem; }
.koeder-box input { width: 100%; padding: .6rem; border: 1px solid #ccc; border-radius: 4px;
                    margin-bottom: 1rem; font-size: .95rem; }
.koeder-box button { width: 100%; padding: .65rem; border: 0; border-radius: 4px;
                     background: #1f6ea8; color: #fff; font-size: .95rem; cursor: pointer; }

/* ── Selbsttest ───────────────────────────────────────────────────────────── */
.fall-karte { border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem; margin-bottom: 1.2rem; }
.fall-karte.falsch { border-color: var(--danger); }
.fall-karte.richtig { border-color: var(--success); }
.fall-kopf { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .8rem; }
.fall-nr { font-weight: 700; color: var(--text-subtle); }
.wahl { display: flex; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
.wahl label {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem;
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.wahl label:hover { background: var(--surface-2); }
.ergebnis-box { text-align: center; padding: 2rem 1rem; }
.ergebnis-zahl { font-size: 3rem; font-weight: 700; line-height: 1; }

/* ── Tabellen mit Quoten ──────────────────────────────────────────────────── */
.quote-zelle { display: flex; align-items: center; gap: .6rem; }
.quote-zelle .wert { min-width: 3rem; font-variant-numeric: tabular-nums; }
.hinweis-box {
    border-left: 3px solid var(--info); background: var(--surface-2);
    padding: .9rem 1.1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; font-size: .9rem;
}
.warn-box {
    border-left: 3px solid var(--warning); background: rgba(230,126,34,.08);
    padding: .9rem 1.1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; font-size: .9rem;
}
.gefahr-box {
    border-left: 3px solid var(--danger); background: rgba(231,76,60,.08);
    padding: .9rem 1.1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; font-size: .9rem;
}

/* ── Handbuch ─────────────────────────────────────────────────────────────── */
.handbuch h2 { margin: 2.2rem 0 .8rem; font-size: 1.25rem; color: var(--gima-orange); }
.handbuch h3 { margin: 1.5rem 0 .5rem; font-size: 1.02rem; }
.handbuch p, .handbuch li { line-height: 1.75; }
.handbuch ul, .handbuch ol { padding-left: 1.3rem; margin: .5rem 0 1rem; }
.handbuch li { margin-bottom: .35rem; }
.handbuch table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.handbuch th, .handbuch td { padding: .5rem .7rem; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.handbuch th { color: var(--text-muted); font-weight: 600; }
.inhalt-liste { list-style: none; padding: 0; }
.inhalt-liste a { text-decoration: none; color: var(--gima-orange); }