/* ===== delta8 Kundenportal · CI-Stylesheet ===== */
:root {
  --navy:#0f2238; --navy-2:#1a3253; --gold:#c8a84b; --gold-d:#a8863a;
  --cream:#f6f1e7; --paper:#fbfaf5; --line:#e6e2d6;
  --grey:#6b7280; --grey-2:#9aa1aa; --white:#ffffff;
  --b-schl:#c8a84b; --b-verw:#d4a437; --b-quar:#3a9a5a; --b-kamm:#2a9595;
  --shadow:0 1px 2px rgba(15,34,56,.06), 0 6px 16px rgba(15,34,56,.04);
  --radius:10px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font: 15px/1.5 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--navy); background: var(--cream); min-height:100vh;
  background-image: radial-gradient(at 80% -10%, rgba(200,168,75,.08), transparent 50%);
}
body.anon { background:
  radial-gradient(at 90% 10%, rgba(200,168,75,.12), transparent 55%),
  radial-gradient(at 10% 90%, rgba(15,34,56,.07), transparent 55%),
  var(--cream); }

/* ===== Topbar ===== */
.topbar { background: var(--navy); color: #fff; padding:12px 22px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
  border-bottom:3px solid var(--gold);
}
.topbar a { color:#fff; text-decoration:none; }
.topbar .brand { display:flex; align-items:center; gap:12px; font-weight:500; line-height:1; }
.topbar .brand .logo-shield { display:block; flex:0 0 auto; }
.topbar .brand-word { font-family:'Playfair Display', Georgia, serif; font-weight:500; font-size:20px; letter-spacing:.2px; line-height:1; display:inline-flex; align-items:baseline; gap:2px; }
.topbar .brand-word .b8 { color: var(--gold); }
.topbar .brand-word .sep { color: var(--gold); margin:0 6px; }
.topbar .brand-word .sub { font-family:'Source Sans 3', sans-serif; font-weight:400; font-size:13px; color:#cfd6e0; letter-spacing:.06em; text-transform:uppercase; line-height:1; }
.topbar nav { margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.topbar nav a { padding:7px 12px; border-radius:6px; transition:background .15s; }
.topbar nav a:hover { background: rgba(255,255,255,.09); }
.topbar nav .who { color: var(--gold); margin-left:8px; font-weight:600; }
.topbar nav .logout { background: var(--gold); color: var(--navy); padding:7px 14px; border-radius:6px; font-weight:700; }
.topbar nav .logout:hover { background: var(--gold-d); }

body.anon .topbar { border-bottom-color:var(--gold); }
body.anon .topbar nav { display:none; }

/* ===== Layout ===== */
.container { max-width:1200px; margin:28px auto; padding:0 22px; }
.footer { text-align:center; padding:28px; color: var(--grey); font-size:13px; }

/* ===== Typo ===== */
h1, h2, h3 { font-family:'Playfair Display', Georgia, serif; font-weight:500; color: var(--navy); margin:0 0 12px; line-height:1.25; }
h1 { font-size:28px; padding-bottom:10px; border-bottom:1px solid var(--gold); display:inline-block; padding-right:18px; }
h2 { font-size:21px; }
h3 { font-size:17px; }
.muted { color: var(--grey); }
code { background:#f0ece0; padding:1px 6px; border-radius:4px; font-size:.92em; }

/* ===== Cards ===== */
.card { background:#fff; border-radius: var(--radius); padding:22px;
  margin:18px 0; box-shadow: var(--shadow);
  border:1px solid var(--line);
  position:relative;
}
.card.center.narrow { max-width:460px; margin:60px auto; }

/* Login: spezieller Hero-Look */
body.anon .card.center.narrow {
  margin-top: 80px;
  padding:32px 28px 28px;
  border-top:4px solid var(--gold);
}
body.anon .card.center.narrow::before {
  content:""; display:block; width:64px; height:64px; margin: 0 auto 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'><polygon points='15,20 115,20 65,116' fill='%23c8a84b'/><line x1='37' y1='34' x2='93' y2='34' stroke='%230f2238' stroke-width='3.5' stroke-linecap='round'/><text x='65' y='86' text-anchor='middle' font-family='Georgia,serif' font-weight='700' font-size='50' fill='%230f2238'>8</text></svg>") center/contain no-repeat;
}
body.anon .card.center.narrow h1 {
  display:block; text-align:center; border:0; padding:0; font-size:24px;
}
body.anon .card.center.narrow h1::after {
  content:"Sicher verwahrt. Mitten in Detmold.";
  display:block; font-family:'Source Sans 3', sans-serif; font-weight:400;
  font-size:14px; color: var(--gold-d); margin-top:4px;
}

/* ===== Formulare ===== */
label { display:block; margin:12px 0; font-weight:600; color:var(--navy); }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], input[type=file], textarea, select {
  width:100%; padding:9px 12px; border:1px solid #cdd3da; border-radius:7px;
  font:inherit; background:#fff; color:var(--navy);
  transition:border .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline:0; border-color: var(--gold); box-shadow:0 0 0 3px rgba(200,168,75,.18);
}
textarea { font-family:'Source Sans 3', sans-serif; }
label input[type=radio], label input[type=checkbox] { width:auto; margin-right:8px; }

fieldset { border:1px solid var(--line); border-radius:7px; padding:12px 14px; margin:12px 0; background:var(--paper); }
fieldset legend { padding:0 6px; font-weight:700; color: var(--navy); font-size:13px; }
.brand-picker { display:block; }
.brand-picker label.cb { display:inline-flex; align-items:center; margin:6px 14px 6px 0; font-weight:500; cursor:pointer; }

/* ===== Buttons ===== */
.btn { display:inline-block; padding:9px 16px; border-radius:7px;
  border:1px solid var(--navy); background:#fff; color:var(--navy);
  cursor:pointer; text-decoration:none; font:inherit; font-weight:600;
  transition:transform .05s, box-shadow .15s, background .15s;
}
.btn:hover { box-shadow:0 2px 6px rgba(15,34,56,.18); }
.btn:active { transform:translateY(1px); }
.btn.primary { background: var(--navy); color:#fff; }
.btn.primary:hover { background: var(--navy-2); }

/* ===== Messages ===== */
.msg { padding:11px 16px; border-radius:7px; margin:12px 0; border:1px solid transparent; }
.msg.ok   { background:#e8f4ec; border-color:#b6d7c2; color:#1d5f37; }
.msg.err  { background:#fde7e9; border-color:#f5b1b6; color:#7a1f25; }
.msg.info { background:#e8f0fc; border-color:#b5cdec; color:#1c3f78; }

/* ===== Tabellen ===== */
.list { width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; box-shadow: var(--shadow); border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--line);
}
.list th, .list td { padding:12px 14px; border-bottom:1px solid #efeee6; text-align:left; vertical-align:top; }
.list thead th { background: var(--navy); color:#fff; font-weight:700; font-family:'Source Sans 3', sans-serif; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.list thead th:first-child { border-top-left-radius: var(--radius); }
.list thead th:last-child  { border-top-right-radius: var(--radius); }
.list tbody tr:last-child td { border-bottom:0; }
.list tbody tr:hover td { background:#fbfaf2; }
.list tr.unread td { background:#fdf4d3; }
.list tr.unread:hover td { background:#fbeec0; }

/* ===== Badges ===== */
.badge { display:inline-block; padding:3px 10px; border-radius:99px; font-size:12px;
  background:#eef1f1; color:var(--navy); font-weight:600; letter-spacing:.02em; }
.badge.st-RECEIVED      { background:#e2ecf9; color:#1c3f78; }
.badge.st-REQUESTED     { background:#fdf0c5; color:#7a5b15; }
.badge.st-CONTENT_READY { background:#dcefe1; color:#1d5f37; }
.badge.st-ARCHIVED      { background:#e6e7ea; color:#444a55; }
.badge.cs-MISSING { background:#fde7e9; color:#7a1f25; }
.badge.cs-PENDING { background:#fdf0c5; color:#7a5b15; }
.badge.cs-ACTIVE  { background:#dcefe1; color:#1d5f37; }
.badge.cs-REVOKED { background:#e6e7ea; color:#444a55; }
.badge.rs-NEW     { background:#fde7e9; color:#7a1f25; }
.badge.rs-PARTIAL { background:#fdf0c5; color:#7a5b15; }
.badge.rs-READ    { background:#dcefe1; color:#1d5f37; }
.badge.brand-schliesserei { background:var(--b-schl); color:var(--navy); }
.badge.brand-verwahrerei  { background:var(--b-verw); color:var(--navy); }
.badge.brand-quartiererei { background:var(--b-quar); color:#fff; }
.badge.brand-kammerei     { background:var(--b-kamm); color:#fff; }

/* ===== Filter Bar ===== */
.filterbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:#fff; padding:14px 16px; border-radius: var(--radius);
  margin:14px 0; box-shadow: var(--shadow); border:1px solid var(--line); }
.filterbar input, .filterbar select { width:auto; min-width:170px; }

/* ===== Form Grid ===== */
.form-grid { display:grid; gap:14px; grid-template-columns: 1fr; }
.form-grid button { justify-self:start; }

/* ===== KPIs (Dashboard) ===== */
.kpis { display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin:18px 0; }
.kpi { display:flex; flex-direction:column; gap:6px; background:#fff; padding:22px;
  border-radius: var(--radius); text-decoration:none; color: var(--navy);
  box-shadow: var(--shadow); border:1px solid var(--line);
  border-top:3px solid var(--gold);
  transition:transform .1s, box-shadow .15s;
}
.kpi:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(15,34,56,.1); }
.kpi .num { font-family:'Playfair Display', Georgia, serif; font-size:36px; font-weight:500; color: var(--navy); line-height:1; }
.kpi span:not(.num) { color: var(--grey); font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; }

/* ===== Drag&Drop Karten (Unzugeordnet) ===== */
.dd-wrap { display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
.dd-list { list-style:none; padding:0; margin:10px 0; max-height:70vh; overflow:auto; }
.dd-card { background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; margin:8px 0; cursor:grab; transition:border .1s, background .1s; }
.dd-card.mail:hover { border-color:var(--gold); }
.dd-card.customer { cursor:default; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.dd-card.over { outline:2px dashed var(--gold); background:#fbf6e2; }

/* ===== File-Dropzone (mit sichtbarem File-Input als Fallback) ===== */
.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:2px dashed #cdd3da; border-radius:10px; padding:22px 18px;
  background:#fcfbf6; transition:.15s; text-align:center; min-height:120px; }
.dropzone:hover  { border-color: var(--gold); background:#fbf6e2; }
.dropzone.over   { border-color: var(--gold); background:#faedc8; }
.dropzone.has-file { border-color: var(--gold-d); background:#f5ecd2; }
.dropzone .dz-label { color: var(--grey); font-weight:600; }
.dropzone .dz-file  { color: var(--navy); font-weight:700; }
.dropzone input[type=file] { width:auto; max-width:100%; padding:6px 0; background:transparent; border:0; }
.dropzone.compact { padding:14px 16px; min-height:0; flex-direction:row; gap:12px; justify-content:flex-start; text-align:left; }

/* ===== PDF-Vorschau (resizable über den Drag-Griff unten rechts) ===== */
.pdf-wrap { width:100%; height:1100px; min-height:400px; resize:vertical; overflow:hidden;
  border:1px solid var(--line); border-radius:8px; background:#fff; margin-top:6px; }
.pdf-wrap iframe { width:100%; height:100%; border:0; display:block; }
@media (max-width: 800px) { .pdf-wrap { height: 600px; } }

/* ===== Misc ===== */
.doc-actions { display:flex; gap:10px; flex-wrap:wrap; }
.hist { padding-left:20px; }
.hist li { margin:5px 0; }
.inline { display:inline; margin-right:8px; }
.inline-form { display:inline-flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }

@media (max-width: 820px) {
  .topbar { padding:10px 14px; gap:12px; }
  .topbar .brand-word .sub { display:none; }
  .topbar nav { width:100%; gap:4px; }
  .container { padding:0 14px; margin:16px auto; }
  .dd-wrap { grid-template-columns:1fr; }
  h1 { font-size:24px; }
}

/* ===== Chronologie / Timeline ===== */
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { display:grid; grid-template-columns: 140px 28px 1fr; gap:10px;
  padding:10px 0; border-bottom:1px solid #f0ece0; align-items:start; }
.timeline li:last-child { border-bottom:0; }
.timeline .ts { color: var(--grey); font-variant-numeric: tabular-nums; font-size:13px; }
.timeline .ico { font-size:18px; line-height:1; text-align:center; }
.timeline .txt { color: var(--navy); }
.timeline .txt small.muted { font-size:12px; }

/* ===== Login-Page kleine Verbesserung ===== */
body.anon .card.center.narrow p { text-align:center; }

/* ===== Multi-Brand-System (v15) ===== */

/* Default Brand-Akzent (Gold = delta8-Dachmarke) */
body { --brand-accent: #c8a84b; }
body.brand-schliesserei { --brand-accent: #c8a84b; }
body.brand-verwahrerei  { --brand-accent: #d4a437; }
body.brand-quartiererei { --brand-accent: #3a9a5a; }
body.brand-kammerei     { --brand-accent: #2a9595; }

/* ----- Brand-Picker (Customer-Startseite) ----- */
.brand-tiles {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-top:18px;
}
.brand-tile-form { margin:0; }
.brand-tile {
  --brand-accent: #c8a84b;
  width:100%; cursor:pointer; text-align:center;
  background:#fff; border:1px solid #e6e2d6; border-radius:14px;
  padding:24px 18px 22px; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  font: inherit; color: var(--navy);
  border-top:4px solid var(--brand-accent);
}
.brand-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,34,56,.08); border-color: var(--brand-accent); }
.brand-tile-mark { display:flex; align-items:center; justify-content:center; }
.brand-tile-short { font-family:'Playfair Display', Georgia, serif; font-size:22px; font-weight:500; margin-top:6px; }
.brand-tile-name  { font-size:13px; color:#6b7280; letter-spacing:.5px; }
.brand-tile-tagline { font-size:13px; color:#6b7280; margin-top:2px; line-height:1.35; }

/* ----- Brand-Header (auf der Brand-Übersichtsseite) ----- */
.brand-header {
  display:flex; align-items:center; gap:18px;
  margin-top:6px; padding:14px 0;
  border-bottom:3px solid var(--brand-accent);
}
.brand-header-mark { flex:0 0 auto; }
.brand-header-text h1 { margin:0; }
.brand-header-text .muted { margin-top:2px; }

/* ----- Module-Grid (auf Brand-Übersichtsseite) ----- */
.module-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:14px; margin-top:18px;
}
.module-card {
  background:#fff; border:1px solid #e6e2d6; border-radius:10px;
  padding:18px; text-decoration:none; color: var(--navy);
  display:flex; flex-direction:column; gap:6px;
  border-left:4px solid var(--brand-accent);
  transition: transform .12s ease, box-shadow .12s ease;
}
.module-card.module-clickable:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,34,56,.06); }
.module-title { font-family:'Playfair Display', Georgia, serif; font-size:19px; font-weight:500; }
.module-hint  { font-size:13px; color: var(--brand-accent); font-weight:600; letter-spacing:.3px; }
.module-card:not(.module-clickable) .module-hint { color:#9ca3af; font-weight:400; font-style:italic; }

/* ----- Brand-Switcher im Topbar ----- */
.brand-switcher { position:relative; }
.brand-switcher-details summary,
.brand-switcher-static {
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 10px; border:1px solid #e6e2d6; border-radius:999px;
  background:#fff; cursor:pointer; list-style:none; user-select:none;
  border-left:3px solid var(--brand-accent);
  font-size:14px; color: var(--navy); line-height:1.2;
}
.brand-switcher-details summary::-webkit-details-marker { display:none; }
.brand-switcher-details[open] summary { background:#f6f1e7; }
.brand-switcher-labels { display:flex; flex-direction:column; gap:1px; }
.brand-switcher-name { font-weight:500; }
.brand-switcher-domain { font-size:11px; color:#6b7280; letter-spacing:.2px; }
.brand-switcher-caret { font-size:11px; color:#6b7280; margin-left:2px; }
.brand-switcher-menu {
  position:absolute; top:calc(100% + 6px); left:0; z-index:50;
  min-width:240px; padding:6px;
  background:#fff; border:1px solid #e6e2d6; border-radius:10px;
  box-shadow: 0 10px 28px rgba(15,34,56,.10);
  display:flex; flex-direction:column; gap:2px;
  white-space:nowrap;
}
.brand-switcher-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px;
  text-decoration:none; color: var(--navy); font-size:14px;
  border-left:3px solid var(--brand-accent);
}
.brand-switcher-item:hover { background:#faf7ee; }
.brand-switcher-back { border-left-color:transparent; color:#6b7280; font-size:13px; margin-top:4px; padding-top:8px; border-top:1px solid #f0ece0; border-radius:0; }

/* ===== Tabs (v17) ===== */
.tabs {
  display:flex; flex-wrap:wrap; gap:2px;
  margin: 14px 0 20px;
  border-bottom: 2px solid #e6e2d6;
}
.tabs button {
  background:transparent; border:0; padding:10px 18px;
  font: 500 15px/1 'Source Sans 3', system-ui, sans-serif;
  color:#6b7280; cursor:pointer;
  border-bottom: 2px solid transparent; margin-bottom:-2px;
  display:inline-flex; align-items:center; gap:8px;
  transition: color .12s ease, border-color .12s ease;
}
.tabs button:hover { color: var(--navy); }
.tabs button.active {
  color: var(--navy);
  border-bottom-color: var(--brand-accent, #c8a84b);
}
.tabs button .tab-count {
  background: var(--brand-accent, #c8a84b); color:#fff;
  font-size:11px; font-weight:600;
  padding: 2px 7px; border-radius:999px; line-height:1.4;
}
.tabs button .tab-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--brand-accent, #c8a84b);
}
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* PDF-Vorschau-Groessen-Buttons */
.pdf-size-controls button { padding:4px 10px; font-size:13px; }
.pdf-size-controls button.active-size {
  background:#f0ece0; border-color:#c5bda3; color: var(--navy); font-weight:600;
}