/* ============================================================
   DOMUS Seniorum Partner-Portal — Gestaltungslinie nach P16:
   solide, hochwertig, ruhig. Creme-Flächen, Gold/Messing-Akzente,
   dunkle Serifen-Überschriften, klare Sans-Serif-Lesetexte.
   Kein Build-Schritt, keine externen Quellen.
   ============================================================ */

:root {
    --creme: #f9f5ec;
    --creme-tief: #f1ead9;
    --karte: #fffdf8;
    --linie: #e6dcc6;
    --linie-zart: #efe7d5;

    --tinte: #2b251c;
    --tinte-weich: #5c5344;
    --tinte-leise: #8a7f6b;

    --gold: #a8834b;
    --gold-dunkel: #8d6c39;
    --gold-hell: #c9a86b;
    --gold-hauch: #f3ead9;

    --nacht: #26211a;
    --nacht-hell: #383025;

    --gruen: #4a7c59;
    --gruen-hauch: #e9f1ea;
    --rot: #a2543f;
    --rot-hauch: #f7e9e4;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --radius: 10px;
    --schatten: 0 1px 3px rgba(43, 37, 28, 0.07), 0 6px 18px rgba(43, 37, 28, 0.05);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--creme);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--tinte);
    letter-spacing: 0.01em;
    margin: 0 0 0.5em;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }

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

p { margin: 0 0 0.9em; }

/* ---------- Grundgerüst: links Navigation, rechts Content ---------- */

.portal {
    display: flex;
    min-height: 100vh;
}

.seitenleiste {
    width: 250px;
    flex-shrink: 0;
    background: var(--nacht);
    color: #d8cfbe;
    display: flex;
    flex-direction: column;
    padding: 28px 0 20px;
}

.marke {
    padding: 0 26px 24px;
    border-bottom: 1px solid var(--nacht-hell);
}

.marke .marke-name {
    font-family: var(--serif);
    font-size: 1.45rem;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--gold-hell);
    text-transform: uppercase;
}

.marke .marke-zusatz {
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a8f7a;
    margin-top: 6px;
}

.navigation {
    flex: 1;
    padding: 18px 0;
}

/* Flex statt block, damit der Zaehler neben dem Text stehen bleibt.
   Vorher trug er float: right und rutschte bei langen Beschriftungen
   (seit A2a "Premiumbereitschaften") in die naechste Zeile. */
.navigation a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 26px;
    color: #d8cfbe;
    text-decoration: none;
    font-size: 1.16rem;
    border-left: 3px solid transparent;
}

.navigation a:hover {
    background: var(--nacht-hell);
    color: #f2ead9;
}

.navigation a.aktiv {
    border-left-color: var(--gold-hell);
    background: var(--nacht-hell);
    color: var(--gold-hell);
    font-weight: 600;
}

.navigation .nav-gruppe {
    padding: 18px 26px 6px;
    font-size: 0.84rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7d7460;
}

.seitenleiste-fuss {
    padding: 16px 26px 0;
    border-top: 1px solid var(--nacht-hell);
    font-size: 0.98rem;
}

.seitenleiste-fuss .nutzer-name {
    color: #f2ead9;
    font-weight: 600;
}

.seitenleiste-fuss .nutzer-rolle {
    color: #9a8f7a;
    font-size: 0.88rem;
    margin-bottom: 10px;
}

.abmelden-knopf {
    background: none;
    border: 1px solid #5c5344;
    color: #d8cfbe;
    border-radius: 7px;
    padding: 8px 16px;
    font-size: 0.95rem;
    cursor: pointer;
}

.abmelden-knopf:hover {
    border-color: var(--gold-hell);
    color: var(--gold-hell);
}

.inhalt {
    flex: 1;
    min-width: 0;
    padding: 34px 44px 60px;
    max-width: 1100px;
}

.inhalt-kopf {
    margin-bottom: 26px;
}

.inhalt-kopf h1 {
    margin-bottom: 4px;
}

.inhalt-kopf .untertitel {
    color: var(--tinte-leise);
    font-size: 1.08rem;
}

/* ---------- Profilreife-Balken (auf jeder Betreiber-Seite oben) ---------- */

.profilreife {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 14px 20px;
    margin-bottom: 28px;
    box-shadow: var(--schatten);
    position: relative;
    cursor: help;
}

.profilreife-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.profilreife-titel {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.12rem;
}

.profilreife-wert {
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--tinte-weich);
}

.profilreife-bahn {
    height: 13px;
    background: var(--creme-tief);
    border-radius: 6px;
    overflow: hidden;
}

.profilreife-fuellung {
    height: 100%;
    border-radius: 6px;
    background: #b9ad97; /* grau unter 40 % */
    transition: width 0.4s ease;
}

.profilreife-fuellung.gruen { background: var(--gruen); } /* 40 bis 90 % */
.profilreife-fuellung.gold {  /* volle 100 %: sattes Gold (K1, Huib 10.07.26) */
    background: linear-gradient(90deg, var(--gold-dunkel), var(--gold) 55%, #c39a45);
    box-shadow: inset 0 1px 2px rgba(255, 244, 214, 0.55);
}

.profilreife-hinweis {
    font-size: 0.95rem;
    color: var(--tinte-leise);
    margin: 8px 0 0;
}

/* Mouse-Over am Profilreife-Balken: Stand je Reifestufe (Huib, 10.07.26).
   Blendet sanft ein und wieder aus (Huib-Nachtrag briefing-04). */
.profilreife-info {
    position: absolute;
    top: calc(100% + 10px);
    left: 20px;
    z-index: 30;
    min-width: 380px;
    max-width: 520px;
    background: #fff;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 10px 32px rgba(43, 36, 24, 0.18);
    padding: 20px 24px;
    font-size: 1.12rem;
    cursor: default;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

.profilreife:hover .profilreife-info,
.profilreife:focus-within .profilreife-info {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
}

.profilreife-info-tabelle {
    width: 100%;
    border-collapse: collapse;
}

.profilreife-info-tabelle td {
    padding: 7px 0;
    font-size: 1.12rem;
}

.profilreife-info-tabelle td:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
    padding-left: 24px;
}

.profilreife-info-linie {
    border-top: 1px solid var(--linie);
    margin: 12px 0;
}

.profilreife-info-appell {
    margin: 0;
    font-size: 1.12rem;
    color: var(--tinte);
}

.profilreife-info-dank {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--gold);
    font-weight: 600;
}

/* ---------- Karten & Kacheln ---------- */

.karte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: var(--schatten);
}

.karte.neutral { border-left-color: var(--linie); }
.karte.gruen { border-left-color: var(--gruen); }
.karte.gold { border-left-color: var(--gold); }

.objekt-auswahl-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.objekt-auswahl-kopf h2,
.objekt-auswahl-aktiv,
.objekt-auswahl-formular .feld {
    margin-top: 0;
}

.objekt-auswahl-formular {
    min-width: min(100%, 420px);
}

.objekt-auswahl-hinweis {
    margin-bottom: 0;
}

.profilreife-titel small {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 500;
}

.auftrag-bestaetigung {
    border-left-color: var(--gruen);
}

.auftrag-bestaetigung h2 {
    margin-top: 14px;
}

.auftrag-schritte {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.auftrag-schritte li {
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--linie);
    background: #fff;
}

.auftrag-schritte li.erledigt {
    border-color: var(--gruen);
    background: var(--gruen-hauch);
}

.auftrag-schritte li.aktuell {
    border-color: var(--gold);
    background: var(--gold-hauch);
}

.auftrag-schritte strong,
.auftrag-schritte span {
    display: block;
}

.modell-wege {
    display: grid;
    /* Genau zwei Wege (Erfolgspartnerschaft, Premiumlisting): zwei gleich breite
       Spalten ueber die volle Kartenbreite. Der Kartenrand liefert links wie
       rechts denselben Abstand. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.modell-weg {
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 20px;
    background: #fffdf8;
    /* Spalte als Flex, damit der Knopf beider Wege unten auf gleicher Linie
       steht, auch wenn die Texte unterschiedlich lang sind. */
    display: flex;
    flex-direction: column;
}

.modell-weg h3 {
    margin-top: 0;
}

.modell-weg form {
    margin-top: auto;
}

/* Kompakte Wahlknoepfe: natuerliche Breite (nicht ueber die ganze Spalte),
   horizontal zentriert. Durch margin-top:auto am Formular stehen beide unten auf
   gleicher Linie. */
.modell-weg .knopf {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-top: 12px;
}

.auftrag-schritte span {
    margin-top: 8px;
    color: var(--tinte-weich);
}

/* Zweispaltige Kopfkarte "Abrechnungsmodus dieses Hauses": Text links, Bild
   rechts. Die rechte Spalte ist begrenzt, damit der Text die Hauptflaeche
   behaelt. */
.modus-zweispaltig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 26px;
    /* Bild auf die Hoehe der Textspalte bringen, damit Text und Bild harmonieren. */
    align-items: stretch;
}

.modus-zweispaltig .modus-text > :first-child {
    margin-top: 0;
}

/* Platzhalter, bis Huib das endgueltige Bild festlegt (24.08.26). */
.bild-platzhalter {
    border: 1px dashed var(--linie);
    border-radius: 10px;
    background: var(--gold-hauch);
    min-height: 180px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--tinte-weich);
    font-size: 0.95rem;
    text-align: center;
}

@media (max-width: 760px) {
    .auftrag-schritte { grid-template-columns: 1fr; }
    .modell-wege { grid-template-columns: 1fr; }
    .modus-zweispaltig { grid-template-columns: 1fr; }
}

.kachel-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.kachel {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--schatten);
    display: block;
    text-decoration: none;
    color: inherit;
}

a.kachel:hover {
    border-color: var(--gold-hell);
    color: inherit;
}

.kachel h3 {
    margin-bottom: 6px;
}

.kachel .kachel-wert {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--gold-dunkel);
}

.kachel .kachel-hinweis {
    font-size: 0.95rem;
    color: var(--tinte-leise);
    margin: 4px 0 0;
}

/* ---------- Kennzahlen (Vermittlungsbilanz, M4b) ---------- */

.kennzahlen-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.kennzahl {
    display: flex;
    flex-direction: column;
}

.kennzahl .kennzahl-wert {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--gold-dunkel);
}

.kennzahl .kennzahl-text {
    font-size: 0.95rem;
    color: var(--tinte-leise);
}

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

.feld {
    margin-bottom: 18px;
}

.feld label {
    display: block;
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 6px;
    color: var(--tinte-weich);
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="tel"],
.feld select,
.feld textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: #fff;
    font-size: 1.08rem;
    font-family: var(--sans);
    color: var(--tinte);
}

.feld textarea {
    resize: vertical;
    line-height: 1.55;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-hauch);
}

.feld .feld-hinweis {
    font-size: 0.95rem;
    color: var(--tinte-leise);
    margin-top: 5px;
}

/* Nur-lesen-Werte im Profil (Identitätszone, K9) */
.feld .feld-wert {
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--creme, #f9f5ec);
    font-size: 1.08rem;
    color: var(--tinte-weich);
}

.formular-zwischentitel {
    margin: 26px 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--linie);
}

.formular-zeile .feld-schmal {
    max-width: 180px;
}

.feld-fehler {
    color: var(--rot);
    font-size: 0.98rem;
    margin-top: 5px;
}

.formular-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 760px) {
    .formular-zeile { grid-template-columns: 1fr; }
}

.merken {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    color: var(--tinte-weich);
    margin-bottom: 18px;
}

/* ---------- Knöpfe ---------- */

.knopf {
    display: inline-block;
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 26px;
    font-size: 1.08rem;
    font-weight: 600;
    font-family: var(--sans);
    cursor: pointer;
    text-decoration: none;
}

.knopf:hover { background: var(--gold-dunkel); color: #fff; }

.knopf.breit { width: 100%; text-align: center; }

.knopf.leise {
    background: transparent;
    color: var(--gold-dunkel);
    border: 1px solid var(--gold);
}

.knopf.leise:hover {
    background: var(--gold-hauch);
    color: var(--gold-dunkel);
}

.knopf.warnend {
    background: transparent;
    color: var(--rot);
    border: 1px solid var(--rot);
}

.knopf.warnend:hover { background: var(--rot-hauch); }

.knopf-zeile {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- Tabellen ---------- */

.tabelle-huelle { overflow-x: auto; }

table.liste {
    width: 100%;
    border-collapse: collapse;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
}

table.liste th {
    text-align: left;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    padding: 12px 16px;
    background: var(--creme-tief);
    border-bottom: 1px solid var(--linie);
}

table.liste td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--linie-zart);
    font-size: 1.05rem;
    vertical-align: middle;
}

table.liste tr:last-child td { border-bottom: none; }

table.liste tr:hover td { background: #fdfaf2; }

/* Geldbetraege bleiben mit ihrem Euro-Zeichen in einer Zeile (Huib,
   28.07.26: in der Rechnungsliste rutschte das Euro-Zeichen unter den
   Betrag). Rechtsbuendig, damit die Stellen untereinander stehen und sich
   mehrere Rechnungen leichter vergleichen lassen. */
table.liste td.betrag,
table.liste th.betrag {
    white-space: nowrap;
    text-align: right;
}

/* ---------- Etiketten (Pills) ---------- */

.etikett {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    border: 1px solid var(--linie);
    background: var(--creme);
    color: var(--tinte-weich);
    white-space: nowrap;
}

.etikett.gold {
    background: var(--gold-hauch);
    border-color: var(--gold-hell);
    color: var(--gold-dunkel);
}

.etikett.gruen {
    background: var(--gruen-hauch);
    border-color: #b5cdbb;
    color: var(--gruen);
}

.etikett.rot {
    background: var(--rot-hauch);
    border-color: #dbb5a8;
    color: var(--rot);
}

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

.meldung {
    border-radius: var(--radius);
    padding: 13px 18px;
    margin-bottom: 22px;
    font-size: 1.05rem;
    border: 1px solid;
}

.meldung.erfolg {
    background: var(--gruen-hauch);
    border-color: #b5cdbb;
    color: #33573f;
}

.meldung.fehler {
    background: var(--rot-hauch);
    border-color: #dbb5a8;
    color: #7d3f2e;
}

.meldung ul { margin: 0; padding-left: 18px; }

/* ---------- Gast-Seiten (Login, Einladung, Passwort) ---------- */

body.gast {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.gast-marke {
    text-align: center;
    margin-bottom: 26px;
}

.gast-marke .marke-name {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinte);
}

.gast-marke .marke-zusatz {
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-dunkel);
    margin-top: 4px;
}

.gast-karte {
    width: 100%;
    max-width: 430px;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 34px 36px 30px;
    box-shadow: var(--schatten);
}

.gast-karte h1 {
    font-size: 1.65rem;
    text-align: center;
    margin-bottom: 6px;
}

.gast-karte .gast-untertitel {
    text-align: center;
    color: var(--tinte-leise);
    font-size: 1.05rem;
    margin-bottom: 24px;
}

.gast-fuss {
    margin-top: 18px;
    text-align: center;
    font-size: 1.02rem;
}

.gast-hinweis {
    margin-top: 26px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--tinte-leise);
    max-width: 430px;
}

/* ---------- Querlogin ---------- */

.querlogin-leiste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--gold-hauch);
    border: 1px solid var(--gold-hell);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 11px 18px;
    margin-bottom: 22px;
    font-size: 1.05rem;
    color: var(--gold-dunkel);
}

.querlogin-leiste form { margin: 0; }

.querlogin-form {
    display: inline;
    margin: 0;
}

/* Aktions-Link als Button-Element (für POST-Formulare) */
.link-knopf {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--gold-dunkel);
    cursor: pointer;
    text-decoration: underline;
}

.link-knopf:hover { color: var(--gold); }

.aktionen-zelle a { margin-right: 10px; }

/* ---------- Gruppen-Überschriften (Betreiber-Liste) ---------- */

.gruppen-titel {
    margin: 26px 0 12px;
    padding-left: 12px;
    border-left: 3px solid var(--gold);
    font-size: 1.35rem;
}

.gruppen-zahl {
    color: var(--tinte-leise);
    font-weight: 400;
    font-size: 1.05rem;
}

/* ---------- Inbox-Zähler in der Navigation (briefing-05) ---------- */

.navigation a .nav-zaehler {
    flex: 0 0 auto;
    min-width: 26px;
    text-align: center;
    background: var(--gold);
    color: #fff;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.navigation a.aktiv .nav-zaehler {
    background: #fff;
    color: var(--gold-dunkel);
}

/* ---------- Profilreife-Haken (briefing-04) ---------- */

.haken-spalten {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}

.haken-titel {
    font-size: 1.05rem;
    color: var(--tinte-weich);
    margin: 0 0 10px;
}

.haken-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 1.05rem;
    cursor: pointer;
}

.haken-zeile input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
}

/* ---------- Material-Upload (briefing-03) ---------- */

.upload-zone {
    margin: 10px 0 4px;
    padding: 44px 24px;
    border: 2px dashed var(--gold-hell);
    border-radius: var(--radius);
    background: var(--creme);
    text-align: center;
    cursor: pointer;
}

.upload-zone.aktiv {
    border-color: var(--gold);
    background: var(--gold-hauch);
}

.upload-zone-titel {
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--tinte);
    margin-bottom: 6px;
}

.upload-zone-oder {
    color: var(--tinte-leise);
    margin-bottom: 14px;
}

.upload-fortschritt { margin-top: 14px; }

.upload-zeile {
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--karte);
    margin-bottom: 10px;
}

.upload-zeile-name {
    font-weight: 600;
    margin-bottom: 8px;
    word-break: break-word;
}

.upload-zeile-status {
    margin-top: 6px;
    font-size: 1rem;
    color: var(--tinte-leise);
}

.upload-zeile.erfolgreich .upload-zeile-status { color: var(--gruen); }
.upload-zeile.fehlgeschlagen .upload-zeile-status { color: var(--rot); }
.upload-zeile.fehlgeschlagen { border-color: #dbb5a8; background: var(--rot-hauch); }

.fortschritt-bahn {
    height: 12px;
    border-radius: 999px;
    background: var(--creme-tief);
    overflow: hidden;
}

.fortschritt-fuellung {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--gold);
    transition: width 0.2s ease;
}

.knopf-zeile-eng {
    margin-top: 0;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-zeile {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.filter-zeile .feld { margin-bottom: 8px; }

.status-formular {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.status-formular select,
.status-formular input[type="text"] {
    font-family: var(--sans);
    font-size: 0.98rem;
    padding: 8px 10px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: #fff;
    color: var(--tinte);
}

.status-formular input[type="text"] { min-width: 180px; }

/* ---------- Kleinkram ---------- */

.abstand-oben { margin-top: 26px; }

.trennlinie {
    border: none;
    border-top: 1px solid var(--linie);
    margin: 24px 0;
}

.leise-schrift {
    color: var(--tinte-leise);
    font-size: 1rem;
}

/* ---------- Nachrichten-Verlauf (briefing-07) ---------- */

.nachrichten-verlauf {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.nachricht-blase {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--schatten);
    max-width: 82%;
}

/* Eigene Nachrichten rechts, gold akzentuiert; die Gegenseite links. */
.nachricht-blase.eigene {
    align-self: flex-end;
    border-left: 3px solid var(--gold);
    background: var(--gold-hauch);
}

.nachricht-blase.gegenseite {
    align-self: flex-start;
    border-left: 3px solid var(--linie);
}

/* Systemnachricht (A2b-1): automatisch erzeugt, gehoert keiner der beiden
   Gespraechsseiten. Deshalb bewusst KEINE Sprechblase an einer Seite,
   sondern ein mittiger, ruhiger Hinweis ueber die volle Breite. Sie darf
   weder nach dem Haus noch nach Huib aussehen. */
.nachricht-blase.system {
    align-self: stretch;
    max-width: 100%;
    border-left: 3px solid var(--linie);
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

.nachricht-blase.system .nachricht-absender {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85em;
}

.nachricht-kopf {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 6px;
}

.nachricht-absender {
    font-weight: 700;
    color: var(--tinte-weich);
    font-size: 1rem;
}

.nachricht-zeit {
    color: var(--tinte-leise);
    font-size: 0.9rem;
    white-space: nowrap;
}

.nachricht-text {
    color: var(--tinte);
    font-size: 1.08rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .nachricht-blase { max-width: 100%; }
}

/* Umschalter Sortierung: aktive Wahl gefüllt, die andere leise. */
.sortier-zeile {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sortier-zeile .knopf { padding: 8px 16px; font-size: 0.98rem; }

/* Schreibfeld wandert mit der Sortierung: bei „Neueste zuerst" liegt es
   oben (direkt über der neuesten Nachricht), bei „Älteste zuerst" unten. */
.nachrichten-bereich {
    display: flex;
    flex-direction: column;
}

.nachrichten-bereich.neu-zuerst .schreiben-block {
    order: -1;
}

/* Nummerierte Blätterung (Archiv) */
.blaetterung {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 22px 0 4px;
}

.blaetterung .knopf { padding: 8px 15px; font-size: 0.98rem; }
.blaetterung .seiten-zahl { min-width: 42px; text-align: center; }
.blaetterung .deaktiviert { opacity: 0.45; pointer-events: none; }

/* Tablet-Tauglichkeit (Desktop-first, P16) */
@media (max-width: 900px) {
    .portal { flex-direction: column; }
    .seitenleiste { width: 100%; flex-direction: column; padding-bottom: 8px; }
    .inhalt { padding: 24px 20px 48px; }
    .objekt-auswahl-kopf { align-items: stretch; flex-direction: column; }
    .objekt-auswahl-formular { min-width: 0; width: 100%; }
}

/* Infoblock: Bild-Text-Tandem (briefing-08-ui).
   Desktop: Bild links, Text fließt rechts daneben und unter dem Bild
   linksbündig über die volle Breite weiter. Mobil: Bild oben. */
.infoblock-tandem::after { content: ""; display: table; clear: both; }
.infoblock-tandem .infoblock-bild {
    float: left;
    width: 240px;
    max-width: 40%;
    height: auto;
    margin: 4px 20px 10px 0;
    border-radius: 8px;
}
.infoblock-tandem p { margin: 0 0 12px; }
.infoblock-tandem.nur-bild .infoblock-bild { max-width: 100%; }

@media (max-width: 760px) {
    .infoblock-tandem .infoblock-bild {
        float: none;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 0 14px;
    }
}

/* Nummerierte Ablauf-Erklärung (Kontaktanfragen) */
.ablauf-liste { margin: 6px 0 0; padding-left: 20px; }
.ablauf-liste li { margin: 4px 0; }

/* Checkbox-Zeile (z. B. Bild entfernen) */
.kontroll-zeile { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.kontroll-zeile input { width: auto; }

/* 2FA-Schalter in der Seitenleiste (briefing-09), über dem Abmelden-Knopf */
.zwei-fa-schalter {
    margin: 12px 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zwei-fa-status { font-size: 0.82rem; opacity: 0.75; line-height: 1.3; }