/* ------------------------------------------------------------------
   Farben von im.uliversum – https://www.im-uliversum.de
   Markengold #CEA46F, Logogold #C39965, Papier #F3F3F3, Tinte #191919.

   Bewusst nur eine Fassung, und zwar die helle. Die Marke ist hell und
   warm; eine dunkle Fassung wäre eine zweite Marke. Deshalb steht hier
   color-scheme:light – auch wer sein Gerät auf dunkel gestellt hat,
   bekommt das Portal hell, samt Eingabefeldern und Bildlaufleisten.

   Das Markengold trägt auf Weiß nur 2,3:1 und taugt damit nicht für
   Schrift oder Bedienelemente. Es bleibt Marke und Zierrat – Logo,
   Linien, gefüllte Knöpfe mit dunkler Schrift darauf. Für alles, was
   als Text lesbar sein muss, steht daneben ein abgedunkelter Bronzeton
   mit 5,2:1. Keine Paarung liegt unter 4,5:1.

   Wer das Cockpit später für eine andere Agentur aufsetzt, ändert
   diesen Block und die Bildmarke – sonst nichts.
   ------------------------------------------------------------------ */
:root{
  color-scheme:light;
  --ink:#191919; --ink-2:#4A4A4A; --ink-3:#6B645C;
  --paper:#F3F3F3; --surface:#FFFFFF; --surface-2:#FAF8F5;
  --line:#E4DED5; --line-2:#CFC6B8;
  --gold:#CEA46F;                 /* Marke, unverändert von der Website */
  --gold-tief:#C39965;            /* Ton des Logos */
  --accent:#8A6634;               /* Schrift und Linien, 5,2:1 auf Weiß */
  --knopf:#CEA46F; --knopf-ink:#241B0E;   /* gefüllte Knöpfe: Markengold, dunkle Schrift, 7,4:1 */
  --accent-ink:#FFFFFF; --accent-soft:#F9F2E7; --accent-line:#CEA46F;
  --ok:#2F6B4B; --ok-soft:#E1EFE6;
  --warn:#A8500E; --warn-soft:#FAE7D6;
  --crit:#9E2B2B; --crit-soft:#F7E0DE;
  --shadow:0 1px 2px rgba(25,25,25,.05), 0 8px 24px -14px rgba(25,25,25,.26);
  --r:6px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  /* Hausschrift von im.uliversum ist Raleway. Sie wird hier bewusst nicht von
     Google geladen. Sobald sie als WOFF2 mitgeliefert wird, kommt sie hier an
     die erste Stelle. Bis dahin die Systemschrift – kein stiller Rückfall. */
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.012em}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}

/* ============ LOGIN ============ */
.gate{min-height:100vh; display:grid; place-items:center; padding:32px 20px; position:relative; overflow:hidden}
.gate::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px; opacity:.5;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 42%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 42%,#000 10%,transparent 72%);
}
.gate-card{
  position:relative; width:100%; max-width:412px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:34px 32px 28px;
}
.gate-brand{display:flex; align-items:center; gap:10px; margin-bottom:26px}
.gate-card h1{font-size:20px; margin-bottom:6px}
.gate-card .sub{color:var(--ink-2); font-size:13.5px; margin-bottom:24px; max-width:34ch}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:12px; font-weight:600; color:var(--ink-2)}
.field input{
  font:inherit; font-size:14px; padding:9px 11px; border-radius:4px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink);
}
.gate-foot{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-3); line-height:1.6}

.logomark{flex:none; display:block}   /* Maße kommen aus views/logo.php */
.brandname{font-size:14.5px; font-weight:700; letter-spacing:-.02em}
.brandname span{color:var(--accent)}

.btn{
  border:1px solid transparent; border-radius:4px; padding:9px 15px;
  font-size:13.5px; font-weight:600; background:var(--knopf); color:var(--knopf-ink);
  transition:filter .12s ease;
}
.btn:hover{filter:brightness(1.12)}
.btn-full{width:100%; padding:11px}
.btn-ghost{background:transparent; border-color:var(--line-2); color:var(--ink-2)}
.btn-ghost:hover{filter:none; border-color:var(--ink-3); color:var(--ink)}
.btn-sm{padding:5px 11px; font-size:12.5px}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ============ SHELL ============ */
.app{display:none; min-height:100vh; grid-template-columns:246px 1fr}
.app.on{display:grid}
@media (max-width:860px){.app.on{grid-template-columns:1fr}}

.side{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:22px; padding:20px 14px;
}
@media (max-width:860px){.side{border-right:0; border-bottom:1px solid var(--line)}}
.side-brand{display:flex; align-items:center; gap:9px; padding:0 8px 2px}
.org{
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:10px 11px;
  display:flex; flex-direction:column; gap:3px;
}
.org .name{font-size:13px; font-weight:600; line-height:1.3}
.org .meta{font-size:10.5px; color:var(--ink-3)}
nav{display:flex; flex-direction:column; gap:1px}
.navitem{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; background:transparent; border:0;
  padding:8px 10px; border-radius:4px; font-size:13.5px; color:var(--ink-2); font-weight:500;
}
.navitem:hover{background:var(--surface-2); color:var(--ink)}
.navitem[aria-current="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.navitem .cnt{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:10.5px; font-weight:500;
  background:var(--warn-soft); color:var(--warn); padding:1px 6px; border-radius:20px;
}
.side-foot{margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line); font-size:11px; color:var(--ink-3); line-height:1.55}

/* Auf Handybreite steht die Navigation vor jedem Inhalt – 654 Pixel Vorlauf.
   Diese Marke ist nur mit der Tastatur erreichbar und ueberspringt sie. */
.zum-inhalt{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--accent); border:1px solid var(--accent-line);
  border-radius:0 0 4px 0; padding:10px 16px; font-size:13.5px; font-weight:600;
  text-decoration:none;
}
.zum-inhalt:focus{left:0}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px 26px; border-bottom:1px solid var(--line); background:var(--surface);
}
.who{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2)}
.avatar{
  width:27px; height:27px; border-radius:50%; background:var(--knopf); color:var(--knopf-ink);
  display:grid; place-items:center; font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
.content{padding:26px; display:flex; flex-direction:column; gap:22px; max-width:1180px}
@media (max-width:600px){.content,.topbar{padding-left:16px; padding-right:16px}}

.phead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.phead h2{font-size:21px}
.phead .lede{color:var(--ink-2); font-size:13.5px; margin-top:5px; max-width:66ch}

/* ============ PIECES ============ */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-h h3{font-size:14px}
.card-h .note{font-size:11.5px; color:var(--ink-3)}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:12px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; display:flex; flex-direction:column; gap:7px; box-shadow:var(--shadow)}
.tile .val{font-size:27px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.tile .cap{font-size:11.5px; color:var(--ink-3); line-height:1.4}
.tile.attn{border-color:var(--accent-line)}
.tile.attn .val{color:var(--accent)}

.chip{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:11px; font-weight:600; padding:2.5px 8px; border-radius:20px; letter-spacing:.01em;
}
.chip::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.crit{background:var(--crit-soft); color:var(--crit)}
.chip.info{background:var(--accent-soft); color:var(--accent)}
.chip.mute{background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line)}

/* Ein Hinweis, dass rechts noch etwas kommt. Ohne ihn scrollt niemand – auf
   /katalog liegt der einzige Knopf der Seite 1063 Pixel weiter rechts. */
.tbl-wrap{
  overflow-x:auto;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(25,25,25,.14), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(25,25,25,.14), transparent) right / 14px 100% no-repeat scroll;
}
.tbl-wrap table{background:var(--surface)}
table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2);
}
td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.strong{color:var(--ink); font-weight:600; white-space:nowrap}
td .sub{display:block; font-size:11px; color:var(--ink-3); font-weight:400; margin-top:2px; white-space:normal}
/* Kein opacity: Die Deckkraft rechnete Schrift UND Chipflaeche gegen Weiss
   herunter – ausgerechnet in den Zeilen mit „widersprochen", „ausgeschlossen"
   und „nicht eingesetzt", also den rechtlich heikelsten. Stattdessen eine
   ruhigere Flaeche und eine Randmarkierung, die den Kontrast unangetastet
   laesst. */
tr.retired td{background:var(--surface-2)}
tr.retired td:first-child{box-shadow:inset 3px 0 0 var(--line-2)}
tr.retired td.strong{color:var(--ink-2)}

.todo{display:flex; flex-direction:column}
.todo-row{display:flex; gap:13px; padding:14px 18px; border-bottom:1px solid var(--line); align-items:flex-start}
.todo-row:last-child{border-bottom:0}
.bar{width:3px; align-self:stretch; border-radius:3px; flex:none}
.bar.warn{background:var(--warn)} .bar.info{background:var(--gold)}
.todo-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.todo-body .t{font-size:13.5px; font-weight:600; color:var(--ink)}
.todo-body .d{font-size:12.5px; color:var(--ink-2); max-width:72ch}

.log{display:flex; flex-direction:column}
.log-row{display:grid; grid-template-columns:152px 1fr; gap:14px; padding:11px 18px; border-bottom:1px solid var(--line); font-size:12.5px}
.log-row:last-child{border-bottom:0}
@media (max-width:640px){.log-row{grid-template-columns:1fr; gap:3px}}
.log-row .ts{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.log-row .ev{color:var(--ink); font-weight:600}
.log-row .dt{color:var(--ink-3); font-size:11.5px; margin-top:2px}

.legal{
  font-family:"Source Serif 4",Georgia,serif; font-size:14px; line-height:1.62; color:var(--ink-2);
  padding:16px 18px; max-width:70ch;
}
.legal strong{color:var(--ink); font-weight:600}

@media (max-width:520px){.kv{grid-template-columns:1fr; gap:2px 0}.kv dt{margin-top:8px}}

/* ============ Ergänzungen für die laufende Anwendung ============ */
a{color:var(--accent)}
a.navitem{text-decoration:none}
.hinweis{
  border:1px solid var(--line); border-left-width:3px; border-radius:var(--r);
  padding:11px 14px; font-size:13px; background:var(--surface);
}
.hinweis.fehler{border-left-color:var(--crit); background:var(--crit-soft); color:var(--crit)}
.hinweis.ok{border-left-color:var(--ok); background:var(--ok-soft); color:var(--ok)}
.hinweis.info{border-left-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.legal{padding:16px 18px; font-size:12.5px; color:var(--ink-2); line-height:1.65; max-width:82ch}
.legal strong{color:var(--ink)}
.formzeile{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; padding:14px 18px}
.formzeile .field{margin-bottom:0; min-width:200px; flex:1}
input[type="text"],input[type="email"],input[type="password"],input[type="date"],
select,textarea{
  font:inherit; font-size:14px; padding:9px 11px; border-radius:4px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); width:100%;
}
textarea{min-height:76px; resize:vertical}
.tat{display:flex; gap:6px; flex-wrap:wrap}
.kette{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:11px; color:var(--ink-3);
  word-break:break-all;
}
details.detail{padding:0 18px 14px}
details.detail summary{font-size:12px; color:var(--ink-3); cursor:pointer; padding:6px 0}
details.detail pre{
  margin:0; padding:10px 12px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:4px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:11.5px;
  white-space:pre-wrap; word-break:break-word; color:var(--ink-2);
}
.log-row .ts{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:11.5px; color:var(--ink-3)}
.log-row .ev{display:block; font-weight:600; color:var(--ink)}
.log-row .dt{display:block; color:var(--ink-2); font-size:12px; margin-top:2px}

/* ============ Vertrag ============ */
.vertrag-lage{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0}
.vertrag-lage > div{padding:14px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:5px}
.vertrag-lage > div:last-child{border-right:0}
.vertrag-lage .k{font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.vertrag-lage .v{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35}
.vertrag-lage .n{font-size:11.5px; color:var(--ink-3); line-height:1.45}

/* flex-direction ausdrücklich: die Regel nav{flex-direction:column} für die
   Seitenleiste greift sonst auch hier und stellt die Punkte untereinander. */
.vertrag-gliederung{
  display:flex; flex-direction:row; flex-wrap:wrap; gap:6px 14px;
  padding:14px 18px; border-bottom:1px solid var(--line);
  overflow-x:auto; max-width:100%;
}
/* Kein white-space:nowrap: 㤠2 Art und Zweck der Verarbeitung, Datenarten,
   betroffene Personen" ist 394 Pixel breit und schob die ganze Seite auf jedem
   Telefon nach rechts. Umbrechen lassen, und der Kasten scrollt notfalls selbst. */
.vertrag-gliederung a{font-size:12px; color:var(--ink-2); text-decoration:none}
.vertrag-gliederung a:hover{color:var(--accent); text-decoration:underline}

/* Hilfe: laufender Text, der gelesen werden soll – etwas groesser als .legal,
   aber in der Hausschrift, nicht in der Serife des Vertrags. */
.hilfe{padding:6px 22px 22px; max-width:76ch; font-size:13.5px; line-height:1.65; color:var(--ink-2)}
.hilfe h2,.hilfe h3,.hilfe h4{color:var(--ink); margin:18px 0 6px; font-size:13.5px; font-weight:600}
.hilfe h2:first-child,.hilfe h3:first-child{margin-top:12px}
.hilfe p{margin:10px 0}
.hilfe ul,.hilfe ol{margin:8px 0 12px; padding-left:22px}
.hilfe li{margin:4px 0}
.hilfe strong{color:var(--ink); font-weight:600}
.hilfe code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:3px; padding:1px 5px}
.hilfe table{border-collapse:collapse; width:100%; margin:10px 0 14px; font-size:12.5px}
.hilfe th,.hilfe td{text-align:left; vertical-align:top; padding:7px 9px; border-bottom:1px solid var(--line)}
.hilfe th{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.hilfe a{color:var(--accent)}
.hilfe-abschnitt:target{outline:2px solid var(--accent-line); outline-offset:2px}
.hilfe-abschnitt{scroll-margin-top:16px}

.vertrag{
  padding:8px 32px 28px; max-width:74ch;
  font-family:"Source Serif 4",Georgia,serif; font-size:15px; line-height:1.68; color:var(--ink-2);
}
@media (max-width:600px){.vertrag{padding-left:18px; padding-right:18px}}
.vertrag h2{font-size:19px; margin:34px 0 10px; color:var(--ink); scroll-margin-top:16px}
.vertrag h3{font-size:15.5px; margin:30px 0 8px; color:var(--ink); scroll-margin-top:16px}
.vertrag h4{font-size:14px; margin:22px 0 6px; color:var(--ink)}
.vertrag p{margin:0 0 12px}
.vertrag ul,.vertrag ol{margin:0 0 14px; padding-left:22px}
.vertrag li{margin-bottom:5px}
.vertrag strong{color:var(--ink); font-weight:600}
.vertrag hr{border:0; border-top:1px solid var(--line); margin:26px 0}
.vertrag code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.86em;
  background:var(--surface-2); padding:1px 5px; border-radius:3px;
}
.vertrag blockquote{
  margin:0 0 14px; padding:10px 14px; border-left:3px solid var(--accent-line);
  background:var(--surface-2); font-size:14px;
}
.vertrag table{font-family:system-ui,-apple-system,sans-serif; font-size:12.5px; margin-bottom:16px}

.annahme{padding:18px; display:flex; flex-direction:column; gap:14px}
.annahme .erklaerung{
  display:flex; gap:11px; align-items:flex-start; padding:14px 15px;
  border:1px solid var(--line-2); border-radius:5px; background:var(--surface-2);
  font-size:13px; color:var(--ink-2); line-height:1.55;
}
.annahme .erklaerung input{margin-top:2px; accent-color:var(--accent); width:16px; height:16px; flex:none}
.annahme .wer{font-size:12.5px; color:var(--ink-3)}
.annahme .tat{display:flex; gap:9px; align-items:center; flex-wrap:wrap}

@media print{
  .side,.topbar,.annahme,.vertrag-gliederung,.hinweis,form{display:none !important}
  body{background:#fff}
  .app.on{display:block}
  .card{border:0; box-shadow:none}
  .vertrag{max-width:none; padding:0}
  .content{padding:0; max-width:none}
}

/* Ablehnende Schaltflächen sehen anders aus als zustimmende. „Widersprechen"
   und „Sperren" standen vorher als gleiche Geisterknöpfe neben „Genehmigen"
   beziehungsweise „Einladung". */
.btn-warnung{
  background:transparent; border-color:var(--crit); color:var(--crit); font-weight:600;
}
.btn-warnung:hover{filter:none; background:var(--crit-soft)}

/* Die laufende Nummer im Protokoll. Vorher stand hier style="opacity:.7"
   direkt am Element – das ergab 3,06:1 und schlug die Regel für Handybreite,
   weil eine Inline-Anweisung jede Klassenregel übertrifft. */
.log-row .folge{color:var(--ink-3); font-size:10.5px}

/* Das Dateifeld kam sonst nackt aus dem Browser – die einzige Farbe im Portal,
   die nicht aus der Palette stammt. */
input[type="file"]{
  font:inherit; font-size:13px; padding:7px 9px; border-radius:4px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-2); width:100%;
}
input[type="file"]::file-selector-button{
  font:inherit; font-size:12.5px; font-weight:600; margin-right:10px;
  padding:5px 11px; border:1px solid var(--line-2); border-radius:4px;
  background:var(--surface); color:var(--ink-2); cursor:pointer;
}
input[type="file"]::file-selector-button:hover{border-color:var(--ink-3); color:var(--ink)}

/* Prüfsummen brechen um, statt die Spalte breitzuziehen. */
td .sub.kette{font-size:10px; letter-spacing:-.01em; word-break:break-all}