/* Grundgestaltung aller Portale (überarbeitet 02.11.2026). Kunden-Stylesheets (<portal>/style.css) überschreiben
   die Variablen unten, v.a. --farbe-hintergrund, --farbe-text, --farbe-link und die Knopffarbe. Klassennamen
   bleiben unverändert, weil der Code sie setzt. */

:root {
    color-scheme: light dark;
    --farbton:215;
    --farbe-hintergrund:#f5f6f8;
    --farbe-flaeche:#ffffff;
    --farbe-text:#1f2430;
    --farbe-text-leise:#5d6575;
    --farbe-rand:#d5d9e0;
    --farbe-akzent:#33507a;
    --farbe-akzent-text:#ffffff;
    --farbe-link:#2b5aa8;
    --farbe-link-besucht:#5b3f99;
    --farbe-meldung:var(--farbe-flaeche);
    --farbe-meldung-titel:#e9ecf1;
    --farbe-chat-meldende:#e6f0fb;
    --farbe-chat-meldende-titel:#d3e4f7;
    --farbe-chat-team:#eef0f3;
    --farbe-chat-team-titel:#e1e4ea;
    --farbe-erfolg:#1e7a3a;
    --farbe-fehler:#b3261e;
    --radius:10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* dunkel in der Markenfarbe statt Schwarz */
        --farbe-hintergrund:hsl(var(--farbton) 32% 13%);
        --farbe-flaeche:hsl(var(--farbton) 26% 17%);
        --farbe-text:#e4e7ec;
        --farbe-text-leise:#a3abb8;
        --farbe-rand:hsl(var(--farbton) 18% 29%);
        --farbe-akzent:#8fb0e6;
        --farbe-akzent-text:#0f1520;
        --farbe-link:#9dbcf2;
        --farbe-link-besucht:#c2a8f0;
        --farbe-meldung-titel:hsl(var(--farbton) 22% 21%);
        --farbe-chat-meldende:hsl(var(--farbton) 34% 21%);
        --farbe-chat-meldende-titel:hsl(var(--farbton) 34% 26%);
        --farbe-chat-team:hsl(var(--farbton) 14% 19%);
        --farbe-chat-team-titel:hsl(var(--farbton) 14% 23%);
        --farbe-erfolg:#7fd39a;
        --farbe-fehler:#ff8a80;
    }
}

/* Grundlagen */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    margin:0; background:var(--farbe-hintergrund); color:var(--farbe-text);
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size:1rem; line-height:1.55;
}
#main-content { max-width:44rem; margin:0 auto; padding:1.5rem 1.25rem 1rem; }

h1, h2, h3 { line-height:1.25; margin:0; overflow-wrap:break-word; color:var(--farbe-ueberschrift, inherit); }
h1 { font-size:1.75rem; font-weight:700; margin:0.25rem 0 1rem; letter-spacing:-0.01em; }
h2 { font-size:1.15rem; font-weight:650; margin:1.75rem 0 0.5rem; }
h3 { font-size:1rem; font-weight:650; margin:1.25rem 0 0.25rem; }
p, .p-like { margin:0 0 1rem; }
/* Silbentrennung nach lang-Attribut; „pretty“ vermeidet ein einzelnes Wort in der letzten Zeile */
p, li, .p-like { hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty;
    /* nur Wörter ab 10 Zeichen, mindestens 4 Zeichen vor und 5 nach der Trennung: kein „Si-cherungen“, „Em-mendingen“, „…stel-le“ */
    hyphenate-limit-chars:10 4 5; }
/* Eigennamen nie trennen: Kundenfirma, Anschrift, Dienstleister (Klasse in common/text/) */
.name, .eingerueckt { hyphens:manual; -webkit-hyphens:manual; }
h1, h2, h3 { text-wrap:balance; }
.p-like { display:block; }
ul, ol { margin:0 0 1rem; padding-left:1.25rem; }
span { overflow-wrap:break-word; }

a { color:var(--farbe-link); text-underline-offset:0.15em; text-decoration-thickness:1px; }
a:visited { color:var(--farbe-link-besucht); }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--farbe-akzent); outline-offset:2px; border-radius:4px; }

/* Kopf mit Logo */
.logo { display:block; float:right; max-width:220px; max-height:56px; width:auto; height:auto; margin:0 0 1.25rem 1rem; }
/* verborgene Mail-Adresse (helper.php): ohne href, daher Link-Aussehen selbst; lange Adressen dürfen umbrechen */
a.mail { color:var(--farbe-link); text-decoration:underline; cursor:pointer; overflow-wrap:anywhere; }
a.mail svg { vertical-align:-0.15em; }

/* Formularelemente */
input, textarea, select, button { font:inherit; }
input[type=text], input[type=password], input:not([type]), textarea, select {
    width:100%; padding:0.6rem 0.75rem; color:var(--farbe-text); background:var(--farbe-flaeche);
    border:1px solid var(--farbe-rand); border-radius:8px;
}
textarea { resize:vertical; min-height:8rem; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--farbe-akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 25%, transparent); }
::placeholder { color:var(--farbe-text-leise); opacity:1; }

button {
    display:inline-block; padding:0.75rem 1.1rem; min-height:3rem; border:0; border-radius:8px; cursor:pointer;
    background-color:var(--farbe-akzent); color:var(--farbe-akzent-text); font-weight:600; line-height:1.3;
    transition:filter 0.15s;
}
button:hover { filter:brightness(1.1); }
button:active { filter:brightness(0.95); }
/* Endgültige Schritte (Token ungültig machen) als Nebenknopf, nicht wie die Hauptaktion */
button[name=invalidate_token], button[name=confirmed_invalidate_token] { background:transparent; color:var(--farbe-fehler); border:1.5px solid var(--farbe-fehler); }

/* Label links, Feld rechts; unter 600px untereinander (siehe unten) */
form.label-links { background:var(--farbe-flaeche); border:1px solid var(--farbe-rand); border-radius:var(--radius); padding:1.25rem; }
form.label-links > label { display:flex; align-items:flex-start; gap:1rem; width:100%; margin-top:1.75rem; }  /* Platz für .hinweis-eingabe */
form.label-links > label:first-of-type { margin-top:0; }
form.label-links > label > :first-child { flex:0 0 32%; padding-top:0.6rem; font-weight:600; }
form.label-links > label > :nth-child(2) { flex:1 1 auto; min-width:0; }
form.label-links button { width:100%; margin-top:1.25rem; }

/* Die beiden Knöpfe auf der Startseite */
.partner-button-container { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin:0.75rem 0 0.5rem; }
.partner-button-container > form { margin:0; }
.partner-button-container > form > button { width:100%; height:100%; }

/* Hinweise, Status */
.font-normal  { font-style:normal; font-weight:normal; }
.font-erfolg  { color:var(--farbe-erfolg); }
.spam-falle   { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.font-fehler  { color:var(--farbe-fehler); }
.font-status-abgeschlossen { color:var(--farbe-erfolg); font-weight:600; }
.font-status-offen         { color:var(--farbe-link); font-weight:600; }
.font-status-anderer       { color:var(--farbe-fehler); font-weight:600; }
.hinweis-eingabe { position:absolute!important; color:var(--farbe-text-leise); font-size:0.8rem; padding-top:0.15rem; }
.hinweis-titel   { margin-bottom:0.25rem; color:var(--farbe-text-leise); font-size:0.85rem; }

/* Token nach dem Melden */
.token-container {
    margin:0.5rem 0 1rem; padding:1rem; text-align:center; border:2px dashed var(--farbe-akzent); border-radius:var(--radius);
    background:var(--farbe-flaeche); font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size:1.35rem; letter-spacing:0.08em; overflow-wrap:anywhere; user-select:all;
}

/* Hilfsklassen */
.eingerueckt   { margin-left:1.5rem; }
.neue-zeile    { clear:both; }
.label-rechts  { width:40%!important; float:right!important; }
.volle-breite  { width:100%; }
.abstand       { margin-top:1rem; }
.viel-abstand  { margin-top:1.5rem; }
.centered      { text-align:center; }
.pw-switch-button { float:right; width:fit-content!important; min-height:0; padding:0.2rem 0.6rem; margin:0!important; font-size:0.85rem; font-weight:500; }

/* Meldungsliste unter /team */
.meldung-container { display:flex; flex-wrap:wrap; width:100%; background:var(--farbe-meldung); border:1px solid var(--farbe-rand); border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; }
.meldung-container > :nth-child(3n + 1) { width:100%; padding:0.75rem 1rem; background:var(--farbe-meldung-titel); font-weight:600; }
.meldung-container > :nth-child(3n + 2) { width:75%; padding:0.75rem 1rem; }
.meldung-container > :nth-child(3n + 3) { width:25%; padding:0.5rem 1rem 0.5rem 0; margin:auto; }
.meldung-container button { width:100%; }

/* Nachrichtenverlauf einer Meldung */
.chat-text { white-space:pre-wrap; overflow-wrap:break-word; margin:0; }
.chat-meldende-person, .chat-team { border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; }
.chat-meldende-person { background:var(--farbe-chat-meldende); margin-right:2rem; }
.chat-team { background:var(--farbe-chat-team); margin-left:2rem; }
.chat-meldende-person > *, .chat-team > * { padding:0.6rem 1rem; }
.chat-meldende-person > :nth-child(odd) { background:var(--farbe-chat-meldende-titel); font-size:0.85rem; color:var(--farbe-text-leise); }
.chat-team > :nth-child(odd) { background:var(--farbe-chat-team-titel); font-size:0.85rem; color:var(--farbe-text-leise); }
.chat-system { margin:0 2rem 1rem; font-style:italic; font-size:0.9rem; color:var(--farbe-text-leise); text-align:center; }

/* Fußzeile */
div.footer { clear:both; margin-top:2.5rem; font-size:0.875rem; color:var(--farbe-text-leise); }
hr.footer { border:0; border-top:1px solid var(--farbe-rand); margin:0 0 0.75rem; }
div.fuss-zeile { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 1.25rem; }
.fuss-impressum { margin-left:auto; }
details.sprachmenue { position:relative; }
details.sprachmenue summary { cursor:pointer; color:var(--farbe-link); list-style:none; }
details.sprachmenue summary::-webkit-details-marker { display:none; }
details.sprachmenue summary::after { content:" ▾"; }
details.sprachmenue[open] summary::after { content:" ▴"; }
details.sprachmenue ul { position:absolute; bottom:100%; left:0; z-index:1; margin:0 0 0.25rem; padding:0.35rem 0; list-style:none;
    background:var(--farbe-flaeche); border:1px solid var(--farbe-rand); border-radius:0.375rem; box-shadow:0 2px 8px rgb(0 0 0 / 0.15); }
details.sprachmenue li a { display:block; padding:0.3rem 0.9rem; white-space:nowrap; }
/* Schmal: „Sprache:“ nur optisch weg (Screenreader lesen es weiter), damit die Fußzeile einzeilig bleibt */
@media (max-width:30rem) { .schmal-aus { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } }

/* Schmale Bildschirme */
@media (max-width:600px) {
    #main-content { padding:1rem 1rem 0.75rem; }
    h1 { font-size:1.5rem; }
    .logo { max-width:160px; max-height:44px; }
    .label-rechts { width:100%!important; float:none!important; }
    form.label-links { padding:1rem; }
    form.label-links > label { flex-direction:column; gap:0.35rem; }
    form.label-links > label > :first-child { flex:none; padding-top:0; }
    form.label-links > label > :nth-child(2) { width:100%; }
    .partner-button-container { grid-template-columns:1fr; }
    .meldung-container > :nth-child(3n + 2), .meldung-container > :nth-child(3n + 3) { width:100%; padding:0.5rem 1rem; }
    .chat-meldende-person { margin-right:0.75rem; }
    .chat-team { margin-left:0.75rem; }
    .chat-system { margin:0 0.75rem 1rem; }
    .eingerueckt { margin-left:1rem; }
}

/* Druck: ohne Knöpfe und Fußzeile, z.B. für den Token */
@media print {
    button, div.footer { display:none; }
    body { background:#fff; color:#000; }
    /* Dunkler Modus und Kunden-CSS setzen helle Schrift – auf Papier unsichtbar */
    :root { --farbe-hintergrund:#fff!important; --farbe-flaeche:#fff!important; --farbe-text:#000!important;
            --farbe-text-leise:#444!important; --farbe-ueberschrift:#000!important; --farbe-link:#000!important;
            --farbe-link-besucht:#000!important; --farbe-rand:#999!important; }
}