/* ===== renoplan-Optik (Variante 1: clean/modern) – projektweit =====
   Warmes Off-White, weiße Karten, dezente Rahmen, petrolblauer Akzent, Inter.
   Überschreibt mit !important die Inline-Styles der einzelnen Templates. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#FAF8F4; --card:#FFFFFF; --text:#1A1A1A; --mute:#6B6B68; --border:#E5E0D6;
  --accent:#2E5A75; --accent-d:#244a61; --accent-warm:#B89540;
  --ok:#6E8A55; --warn:#B25A35; --bad:#7A2A2A;
  --radius:6px; --radius-sm:4px;
}

*{ box-sizing:border-box; }
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  background:var(--bg) !important; color:var(--text) !important;
  font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1;
}
h1,h2,h3,h4{ font-family:'Inter',sans-serif !important; letter-spacing:-.01em; color:var(--text); font-weight:600; }
a{ color:var(--accent); }

/* ---- Titel-/Befehlsleisten ---- */
.top, .leiste, .topbar, header{
  background:var(--card) !important; color:var(--text) !important;
  border-bottom:1px solid var(--border) !important; box-shadow:none !important;
  padding:.5rem .9rem !important; min-height:52px;
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
.top a, .top strong, .leiste a, .leiste strong, .topbar a, header a, header strong{ color:var(--text) !important; }
.top .fort, .fort{ color:var(--mute) !important; font-size:.8rem; }

/* ---- Buttons (XP-Look ersetzt) ---- */
.btn, .dl, button, input[type=submit]{
  font-family:'Inter',sans-serif !important; font-size:.8rem !important; font-weight:500 !important;
  color:var(--text) !important; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .8rem !important; border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  background:var(--card) !important; box-shadow:none !important; transition:all .12s ease;
}
.btn:hover, .dl:hover, button:hover, input[type=submit]:hover{
  border-color:var(--accent) !important; color:var(--accent) !important;
  background:#fff !important; }
.btn:active, button:active{ transform:translateY(1px); }
/* primäre Aktion (= .btn ohne .grau/.sek) gefüllt im Akzent */
.btn:not(.grau):not(.sek):not(.sekundaer){
  background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
.btn:not(.grau):not(.sek):not(.sekundaer):hover{
  background:var(--accent-d) !important; color:#fff !important; border-color:var(--accent-d) !important; }
.btn.grau, .btn.sek, .btn.sekundaer{
  background:var(--card) !important; color:var(--text) !important; border-color:var(--border) !important; }
.btn:disabled, button:disabled{ color:var(--mute) !important; background:#f1efe9 !important;
  border-color:var(--border) !important; cursor:not-allowed; }

/* ---- Eingabefelder ---- */
input[type=text], input[type=password], input:not([type]), textarea, select{
  border:1px solid var(--border) !important; border-radius:var(--radius-sm) !important;
  background:#fff !important; padding:.45rem .6rem; font-family:'Inter',sans-serif;
  font-size:.85rem; color:var(--text); }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(46,90,117,.12); }

/* ---- Karten / Panels / Blätter ---- */
.karte, .card, .grp, .blatt, .info, .win{
  background:var(--card) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius) !important; box-shadow:0 1px 2px rgba(0,0,0,.03) !important; }
.karte{ padding:1rem 1.1rem; }
.hint{ color:var(--mute) !important; }

/* ---- Tabellen (renoplan table.data) ---- */
table th, .kopf th{
  background:transparent !important; color:var(--mute) !important; text-align:left;
  padding:10px 14px !important; border-bottom:2px solid var(--text) !important;
  font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
table td{ padding:12px 14px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
table tr:hover td{ background:rgba(0,0,0,.02); }

/* ---- Linke Gliederungs-Leiste ---- */
.nav{ background:var(--card) !important; border-right:1px solid var(--border) !important; }
.filter{ background:var(--bg) !important; border-bottom:1px solid var(--border) !important; }
.baum .node, .node{ color:var(--text); border-radius:0; }
.node:hover{ background:rgba(46,90,117,.06) !important; }
.node.sel{ background:rgba(46,90,117,.12) !important;
  box-shadow:inset 3px 0 0 var(--accent) !important; }
.node.nb{ color:var(--mute) !important; }

/* ---- Reiter (Eingabe/Output) ---- */
.tabs, .otabs{ border-bottom:1px solid var(--border) !important; }
.tabs label, .filter label, .otabs label{
  background:transparent !important; border:1px solid transparent !important;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0 !important; color:var(--mute) !important;
  font-weight:500; }
/* aktiver Reiter (Radio-gesteuert in den Templates) */
#rI:checked~.tabs label[for=rI],#rE:checked~.tabs label[for=rE],
#rO:checked~.tabs label[for=rO],#rA:checked~.tabs label[for=rA]{
  background:var(--card) !important; color:var(--text) !important;
  border-color:var(--border) !important; border-bottom-color:var(--card) !important; }

/* ---- Pills / Badges ---- */
.pill{ border-radius:999px !important; font-size:.7rem; padding:.12rem .55rem; font-weight:600; }
.pill.fe{ background:rgba(110,138,85,.15) !important; color:var(--ok) !important; }
.pill.of{ background:rgba(178,90,53,.13) !important; color:var(--warn) !important; }
.pill.nb{ background:#efece6 !important; color:var(--mute) !important; }
.badge.geheim{ background:rgba(122,42,42,.12); color:var(--bad); }
.badge.firma{ background:rgba(46,90,117,.12); color:var(--accent); }

/* ---- Status-Streifen (Eingabe-Reiter .pkt) auf Theme-Töne ---- */
.pkt{ border-radius:var(--radius-sm) !important; }
.pkt.rot{ border-left-color:var(--warn) !important; }
.pkt.gelb{ border-left-color:var(--accent-warm) !important; }
.pkt.gruen{ border-left-color:var(--ok) !important; }
.ew{ color:var(--bad) !important; }

/* ---- Fortschritt ---- */
progress{ accent-color:var(--accent); height:8px; border-radius:999px; }

/* ---- Drag-&-Drop-Ziel in der Gliederung ---- */
.node.dz{ outline:2px dashed var(--accent-warm) !important; outline-offset:-2px;
          background:rgba(184,149,64,.12) !important; }