/* RHD Partnercockpit — Stylesheet.
   Gestaltung adaptiert von rhd-bremen.de (Werte aus dem Live-DOM gemessen): Grün #007656
   als einzige Signalfarbe, warmes Off-White #F9F7F5 mit warmem Braun-Text #3C332D statt
   Grau/Schwarz, Pill-Buttons in zwei Varianten, Sand #BCAD90 als diagonale Akzentfläche
   (auf der Website ist Sand bewusst KEIN Kopfzeilen-Ton, sondern der schräge Anschnitt).
   Was NICHT übernommen wurde: 50px-Überschriften, Hero-Bilder, Marketing-Sektionen — das
   Portal bleibt ein Arbeitswerkzeug mit dichter Liste. */
:root {
  --sand:#BCAD90; --sandD:#9C8F73; --sand-bg:#F4F1EB;
  --green:#007656; --greenD:#005C44;
  --ink:#3C332D; --muted:#6B6259; --line:#E6E0D8; --bg:#F9F7F5;
  --red:#9B1C17; --red-bg:#FBE9E7; --red-line:#F1D3CF;
  --ok:#005C44; --ok-bg:#E6F0EC; --ok-line:#C6DED4;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --r-s:10px; --r-m:14px; --r-pill:999px;
  --cut:6px;   /* Neigung des diagonalen Kopfabschlusses */
  /* Die Hausschrift der Website (Causten Round) ist lizenzpflichtig und per CSP nicht
     nachladbar. Avenir Next ist die vorinstallierte geometrische Rundschrift auf Apple-
     Geräten; Century Gothic (mit Office auf Windows) nur für kurze Zeilen — im Fließtext
     ist ihre kleine x-Höhe unleserlich. */
  --font:"Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:"Avenir Next", Avenir, "Century Gothic", "URW Gothic", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, sans-serif;
  color-scheme:light;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.55; }
h1, .card h2, .kpi .n, .anf b { font-family:var(--font-display); }
.wrap { max-width:760px; margin:0 auto; padding:var(--s4); }

/* ── Kopf: weiß wie auf rhd-bremen.de, farbiges Logo, darunter der Sand-Keil ──
   Der diagonale Schnitt ist das einzige Ornament der Hausgestaltung. Er sitzt genau
   einmal, am Kopfabschluss, und liegt auf einem leeren Pseudo-Element — er kann
   prinzipiell keinen Text abschneiden. Ohne clip-path bleibt ein sauberes Sandband. */
header { background:#fff; border-bottom:3px solid var(--green); }
header .wrap { display:flex; align-items:center; gap:var(--s5); padding-top:var(--s4); padding-bottom:var(--s4); }
header::after { content:""; display:block; height:10px; background:var(--sand);
  clip-path:polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
.marke { flex-shrink:0; display:flex; align-items:center; }
.logo-img { height:34px; width:auto; display:block; }
h1 { font-size:18px; margin:0; font-weight:600; letter-spacing:.01em; color:var(--green); }
.sub { font-size:13px; line-height:1.5; color:var(--muted); max-width:62ch; }
@media (min-width:721px) { :root { --cut:12px; } header::after { height:16px; } }
@media (max-width:420px) { .logo-img { height:27px; } header .wrap { gap:var(--s4); } }
@media (max-width:360px) { .sub { display:none; } }

/* ── Flächen ───────────────────────────────────────────────────────────── */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:var(--s4); margin-top:var(--s3); }
.card h2 { margin:0 0 var(--s1); font-size:18px; font-weight:600; color:var(--green); }
.anf { border:1px solid var(--line); border-radius:var(--r-m); padding:14px var(--s4); margin-top:var(--s3); background:#fff; }
.anf b { font-size:16px; overflow-wrap:anywhere; }
.anf .row { display:grid; grid-template-columns:1fr auto; align-items:start; gap:6px 10px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.meta { font-size:13px; color:var(--muted); margin-top:var(--s1); overflow-wrap:anywhere; }
.anf .fakten { display:grid; grid-template-columns:max-content 1fr; gap:2px var(--s3); margin:var(--s2) 0 0; font-size:13px; }
.anf .fakten dt { color:var(--muted); }
.anf .fakten dd { margin:0; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
@media (max-width:360px) { .anf .fakten { grid-template-columns:1fr; gap:0; } .anf .fakten dd { margin-bottom:5px; } }

/* ── Text ──────────────────────────────────────────────────────────────── */
/* Label-Device aus der Hausgestaltung: klein, gesperrt, versal. */
label, .kpi .l { display:block; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
label { margin:var(--s3) 0 var(--s1); }
/* Lesetexte bekommen die 1,6-Zeilenhöhe der Website — Listen bleiben dicht. */
.hint { font-size:14px; line-height:1.6; color:var(--muted); margin-top:10px; max-width:62ch; }
.notiz { border-left:3px solid var(--sandD); background:var(--sand-bg); border-radius:0 var(--r-s) var(--r-s) 0; padding:10px var(--s3); font-size:14px; line-height:1.6; color:var(--ink); margin-top:var(--s3); max-width:62ch; }

/* ── Eingaben ──────────────────────────────────────────────────────────── */
/* 16px: darunter zoomt Mobile Safari beim Fokus ins Feld. */
input, textarea { width:100%; border:1px solid var(--line); border-radius:var(--r-s); padding:11px var(--s3); font-size:16px; color:var(--ink); background:#fff; font-family:inherit; }
input:focus, textarea:focus { outline:2px solid var(--green); border-color:var(--green); }
.fg { border:0; border-top:1px solid var(--line); margin:18px 0 0; padding:0; }
.fg legend { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; padding:0 var(--s2) 0 0; }
.suchfeld { margin-top:var(--s3); }

/* ── Aktionen: die zwei Button-Formen der Website ──────────────────────── */
/* Primär bekommt einen transparenten 2px-Rand, damit beide exakt gleich hoch sind. */
.btn { display:block; width:100%; margin-top:var(--s4); background:var(--green); color:#fff;
  border:2px solid transparent; border-radius:var(--r-pill); padding:11px var(--s4);
  font-size:16px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn:disabled { opacity:.55; cursor:default; }
.btn + .btn { margin-top:var(--s2); }
.btn.sec { background:#fff; color:var(--green); border:2px solid var(--green); font-weight:600; }
.btn:hover { background:var(--greenD); }
.btn.sec:hover { background:var(--sand-bg); border-color:var(--greenD); color:var(--greenD); }
.btn:active { filter:brightness(.95); }
/* Karten-Aktion: dieselbe Sekundär-Form, eine Stufe kleiner. */
.btn-klein { display:inline-block; background:#fff; color:var(--green); border:2px solid var(--green);
  border-radius:var(--r-pill); padding:8px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-klein:hover { background:var(--sand-bg); border-color:var(--greenD); color:var(--greenD); }
.linkbtn { background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; text-decoration:underline; font-family:inherit; padding:0; }
.linkbtn:hover { color:var(--ink); }
.btn, .btn-klein, .chip, .tab { transition:background-color .15s, border-color .15s, color .15s; }
.btn:focus-visible, .btn-klein:focus-visible, .chip:focus-visible, .linkbtn:focus-visible, .tab:focus-visible,
details.legende summary:focus-visible, a:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

/* ── Navigation & Filter ───────────────────────────────────────────────── */
.tabs { display:flex; gap:var(--s2); margin-top:var(--s4); flex-wrap:wrap; }
.tab { border:1px solid var(--line); background:#fff; border-radius:var(--r-pill); padding:9px var(--s4); font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit; }
.chips { display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3); }
.chip { border:1px solid var(--line); background:#fff; border-radius:var(--r-pill); padding:10px 14px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit; }
.tab.on, .chip.on { background:var(--green); border-color:var(--green); color:#fff; }
.tab:hover, .chip:hover { border-color:var(--green); color:var(--greenD); }
.tab.on:hover, .chip.on:hover { background:var(--greenD); border-color:var(--greenD); color:#fff; }
.top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:var(--s4); flex-wrap:wrap; }
.top > div { min-width:0; }

/* ── Zustände ──────────────────────────────────────────────────────────── */
.badge { display:inline-block; border-radius:var(--r-pill); padding:3px 10px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.err { background:var(--red-bg); color:var(--red); border:1px solid var(--red-line); border-radius:var(--r-s); padding:10px var(--s3); font-size:14px; margin-top:var(--s3); }
.ok { background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line); border-radius:var(--r-s); padding:10px var(--s3); font-size:14px; margin-top:var(--s3); }
.mat-gruppe { margin-top:var(--s5); }
.mat-gruppe > b { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.aktionen { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:10px; }
/* Betrachter für Angebot/Vertrag — bewusst als Overlay, damit die Liste dahinter erhalten bleibt. */
.viewer { position:fixed; inset:0; background:rgba(27,38,32,.55); display:flex; align-items:center; justify-content:center; padding:var(--s3); z-index:50; }
.viewer-box { background:#fff; border-radius:var(--r-m); width:min(920px,100%); height:min(88vh,100%); display:flex; flex-direction:column; overflow:hidden; }
.viewer-kopf { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.viewer-akt { display:flex; gap:var(--s2); flex-wrap:wrap; }
.viewer-akt .btn-klein { text-decoration:none; }
.viewer-pdf { flex:1; width:100%; border:0; background:var(--bg); overflow:auto; }
.typwahl-box { height:auto; max-height:88vh; }
.typwahl-liste { padding:var(--s3) var(--s4) var(--s4); display:grid; gap:var(--s2); overflow:auto; }
.typ-knopf { text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--r-s); padding:14px var(--s4); font-size:15px; font-family:inherit; color:var(--ink); cursor:pointer; }
.typ-knopf:hover { border-color:var(--green); color:var(--greenD); }
.typ-knopf:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.pdf-slot { margin:8px auto; max-width:100%; background:#fff; box-shadow:0 1px 4px rgba(27,38,32,.15); }
.pdf-seite { display:block; max-width:100%; height:auto; }
.viewer-pdf { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.viewer-hinweis { margin:0; padding:var(--s2) var(--s4) var(--s3); }
@media (max-width:600px) { .viewer { padding:0; } .viewer-box { height:100%; border-radius:0; } }

.anford { margin-top:var(--s3); padding:10px var(--s3); background:var(--sand-bg); border-radius:var(--r-s); font-size:13px; }
.anford > b { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:6px; }
.anford-z { margin-top:3px; color:var(--ink); }
.anford-z.da { color:var(--muted); }
.anford-z span { color:var(--muted); }
.anford-z .linkbtn { margin-left:4px; color:var(--green); }
.up-status { display:block; margin-top:6px; font-size:13px; }
.up-status.s-ok  { color:var(--ok); font-weight:600; }
.up-status.s-err { color:var(--red); font-weight:600; }

/* ── Kennzahlen & Legende ──────────────────────────────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:var(--s3); }
.kpi { background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:var(--s3) 14px; }
.kpi .n { font-size:26px; line-height:1.2; font-weight:700; color:var(--greenD); font-variant-numeric:tabular-nums; }
details.legende { margin-top:var(--s4); font-size:13px; }
details.legende summary { cursor:pointer; font-weight:600; color:var(--muted); }
details.legende p { margin:var(--s2) 0 0; color:var(--ink); line-height:1.6; }
footer { text-align:center; font-size:12px; color:var(--muted); padding:var(--s5) var(--s4); }
footer a { color:var(--muted); }

/* ── Ladezustand ───────────────────────────────────────────────────────── */
.skel { height:72px; border-radius:var(--r-m); margin-top:10px;
  background:linear-gradient(90deg,#EFEAE3 25%,#F8F5F1 37%,#EFEAE3 63%);
  background-size:400% 100%; animation:skel 1.2s ease infinite; }
@keyframes skel { from{background-position:100% 0} to{background-position:0 0} }
@media (prefers-reduced-motion:reduce) { .skel { animation:none; background:#EFEAE3; } }

/* ── Druck ─────────────────────────────────────────────────────────────── */
@media print {
  body { background:#fff; }
  header { background:#fff; border-bottom:2px solid var(--green); }
  header::after { display:none; }
  .logo-img { height:26px; }
  .suchfeld, .chips, .tabs, .linkbtn, .btn, .btn-klein, .up-status, footer, details.legende { display:none; }
  .card, .anf, .kpi { break-inside:avoid; }
  .badge { border:1px solid currentColor; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

/* Startpasswort: muss fehlerfrei abgelesen und weitergegeben werden können — daher
   Festbreitenschrift, großzügiger Zeichenabstand und ein ruhiger Untergrund. */
.code { display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17px; font-weight:700; letter-spacing:.06em; background:#fff; border:1px solid var(--ok-line);
  border-radius:var(--r-s); padding:8px 12px; margin:6px 0; user-select:all; word-break:break-all; }
/* Sperren ist der einzige Schritt hier, der jemandem etwas wegnimmt — er darf sich nicht
   wie „Weiter" anfühlen, aber auch nicht schreien. Kontur statt Fläche. */
.btn-klein.warn { color:#9B1C17; border-color:#F0C8C4; }
.btn-klein.warn:hover { background:#FBE9E7; }

/* Nachrichtenverlauf zum Vorgang. Bewusst wie ein Brief­wechsel gesetzt und nicht wie ein
   Messenger: die Nachricht des Partners rechts, unsere Antwort links, beide mit Absender und
   Zeit — der Verlauf wird auch von Kollegen gelesen, die später dazukommen. */
.verlauf { padding:var(--s3) var(--s4); }
.msg { max-width:min(560px, 88%); margin:0 0 var(--s3); }
.msg-kopf { font-size:11.5px; color:var(--muted); margin-bottom:3px; }
.msg-text { border-radius:var(--r-m); padding:10px var(--s3); font-size:15px; line-height:1.5; white-space:normal; }
.von-rhd .msg-text { background:#fff; border:1px solid var(--line); border-top-left-radius:4px; }
.von-mir { margin-left:auto; }
.von-mir .msg-kopf { text-align:right; }
.von-mir .msg-text { background:var(--sand-bg); border:1px solid #E4DED4; border-top-right-radius:4px; }
.chat-fuss { display:flex; gap:var(--s2); align-items:flex-end; padding:var(--s3) var(--s4); border-top:1px solid var(--line); background:#fff; }
.chat-fuss textarea { flex:1; margin:0; font:inherit; font-size:16px; padding:10px var(--s3);
  border:1px solid var(--line); border-radius:var(--r-s); resize:vertical; min-height:44px; background:#fff; color:var(--ink); }
.chat-fuss textarea:focus { outline:2px solid var(--green); outline-offset:1px; }
.chat-fuss .btn { width:auto; margin:0; white-space:nowrap; }
/* Antwort des Vertriebs: der einzige Ort, an dem eine Karte den Blick auf sich ziehen darf. */
.btn-klein.neu { background:var(--green); color:#fff; border-color:var(--green); font-weight:700; }
.btn-klein.neu:hover { background:var(--greenD); border-color:var(--greenD); color:#fff; }

/* Anmeldeformular für neue Partner: zwei Felder nebeneinander, sobald Platz da ist. */
.feldreihe { display:flex; gap:var(--s3); flex-wrap:wrap; }
.feldreihe > div { flex:1 1 220px; }
.wb-zeile { border-left:3px solid var(--sand); padding-left:var(--s3); margin-bottom:var(--s3); }
.check { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; margin-bottom:var(--s3); font-weight:400; }
.check input { width:20px; height:20px; margin:1px 0 0; flex:none; }
select { width:100%; font:inherit; font-size:16px; padding:10px var(--s3); border:1px solid var(--line);
  border-radius:var(--r-s); background:#fff; color:var(--ink); margin-bottom:var(--s3); }
textarea { width:100%; font:inherit; font-size:16px; padding:10px var(--s3); border:1px solid var(--line);
  border-radius:var(--r-s); background:#fff; color:var(--ink); margin-bottom:var(--s3); resize:vertical; }