/* ==========================================================
   Variablen & Basis
   ========================================================== */
:root{
  --bg: #15171b;
  --bg-elevated: #1c1f25;
  --bg-card: #20232a;
  --border: #2c303a;
  --text: #e9ebef;
  --text-dim: #9aa0ac;
  --accent: #975AC7;
  --accent-hover: #F7B3AD;
  --radius: 10px;
  --font-display: 'Bellota', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.5; padding-bottom:80px; }

a, a:visited {
  color:var(--accent); 
  text-decoration:underline; }
a:hover{ color:var(--accent-hover); }

/* ==========================================================
   Header
   ========================================================== */
header{ padding:24px 20px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10; position:relative; }
.version-badge{
  position:absolute; top:22px; right:20px; font-family:var(--font-mono); font-size:0.72rem;
  color:var(--text-dim); border:1px solid var(--border); padding:4px 10px; border-radius:12px;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right;
}
.version-badge .version-num{ line-height:1; }
.version-badge .version-date{ font-size:0.62rem; opacity:0.75; line-height:1; }
h1{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; margin:0 0 4px; }
.subtitle{ color:var(--text-dim); font-size:0.85rem; }
.city-count{ color:var(--accent); font-size:0.8rem; font-weight:600; margin-top:8px; }
.header-disclaimer{ color:var(--text-dim); font-size:0.68rem; margin-top:6px; opacity:0.8; }
.header-disclaimer a{ color:var(--text-dim); text-decoration:underline; }
.header-disclaimer a:hover{ color:var(--accent-hover); }

/* ==========================================================
   Personen-Umschalter
   ========================================================== */
.person-switcher{ display:flex; gap:6px; overflow-x:auto; padding:12px 20px 0; -ms-overflow-style:none; scrollbar-width:none; }
.person-switcher::-webkit-scrollbar{ display:none; }
.person-switcher-label{ font-size:0.72rem; color:var(--text-dim); padding:8px 2px 0 0; flex-shrink:0; white-space:nowrap; }
.person-btn{
  flex-shrink:0; background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim);
  border-radius:8px; padding:7px 12px; font-size:0.82rem; font-family:var(--font-mono); cursor:pointer; white-space:nowrap;
}
.person-btn.active{ background:var(--accent); border-color:var(--accent); color:#0d1210; font-weight:700; }
.person-btn:hover:not(.active){ border-color:var(--accent-hover); color:var(--text); }

/* ==========================================================
   Suche & Treffer-Vorschau (Hero)
   ========================================================== */
.search-hero{ padding:20px; }
#searchInput{
  width:100%; font-size:1.1rem; padding:14px 16px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:12px; color:var(--text); font-family:var(--font-body);
}
#searchInput:focus{ outline:1px solid var(--accent-hover); border-color:var(--accent-hover); }

.result-hero{
  margin:14px 20px 0; background:var(--bg-card); border:1px solid var(--accent);
  border-radius:14px; padding:20px; display:none;
}
.result-hero.visible{ display:block; }
.result-city{ font-family:var(--font-display); font-size:1.2rem; font-weight:700; }
.result-kreis{ color:var(--text-dim); font-size:0.85rem; margin-top:2px; }
.result-value{ font-family:var(--font-mono); font-size:2.4rem; font-weight:700; color:var(--accent); margin:10px 0 4px; }
.result-note{ font-size:0.85rem; color:var(--text-dim); margin-top:8px; }
.result-actions{ margin-top:14px; display:flex; gap:8px; }

/* ==========================================================
   Toolbar & Städteliste (Bundesland / Kreis / Kacheln)
   ========================================================== */
.toolbar{ display:flex; justify-content:space-between; align-items:center; padding:10px 20px; }
.toolbar h2{ font-family:var(--font-display); font-size:0.95rem; margin:0; color:var(--text-dim); font-weight:400; }

#productList{ padding:0 20px 16px; }
.bundesland-group{ margin-bottom:26px; }
.bundesland-header{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--accent);
  padding:8px 2px; margin-bottom:10px; border-bottom:2px solid var(--accent); display:flex; align-items:baseline; gap:8px;
  cursor:pointer; user-select:none;
}
.bundesland-count{ font-family:var(--font-mono); font-size:0.75rem; color:var(--text-dim); font-weight:400; }
.bundesland-body{ padding-left:4px; }
.kreis-group{ margin-bottom:18px; }
.kreis-header{
  display:flex; align-items:baseline; gap:10px; padding:6px 2px; border-bottom:1px solid var(--border); margin-bottom:8px;
  cursor:pointer; user-select:none;
}
.toggle-icon{ color:var(--accent); font-size:0.8em; width:0.9em; display:inline-block; }
.hidden{ display:none !important; }
.kreis-name{ font-family:var(--font-display); font-weight:700; font-size:0.95rem; }
.kreis-value{ font-family:var(--font-mono); color:var(--accent); font-size:0.9rem; font-weight:700; }
.kreis-cities{ display:flex; flex-wrap:wrap; gap:6px; }
.city-chip{
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  border-radius:16px; padding:6px 12px; font-size:0.82rem; cursor:pointer;
}
.city-chip:hover{ border-color:var(--accent-hover); }
.kreis-cards{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.search-result-list{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; cursor:pointer; display:flex; align-items:flex-start; gap:20px;
}
.card-left{ flex:1; min-width:0; }
.card-name{ font-weight:600; font-size:0.95rem; }
.card-kreis{ font-size:0.75rem; color:var(--text-dim); margin-top:2px; }
.card-note{ font-size:0.8rem; color:var(--text-dim); margin-top:6px; }
.card-qm{ font-size:0.72rem; color:var(--text-dim); margin-top:2px; }
.card-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; text-align:right; }
.card-kalt, .card-warm{ font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:0.9rem; white-space:nowrap; }
.card-kalt span, .card-warm span{ font-family:var(--font-body); font-weight:400; color:var(--text-dim); font-size:0.72rem; }
.empty-state{ padding:40px 20px; text-align:center; color:var(--text-dim); }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer{ padding:28px 20px 90px; text-align:center; border-top:1px solid var(--border); margin-top:20px; }
.footer-nav{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:10px; }
.footer-nav a{ color:var(--text-dim); font-size:0.82rem; text-decoration:none; }
.footer-nav a:hover{ color:var(--accent-hover); }
.footer-credit{ color:var(--text-dim); font-size:0.72rem; opacity:0.8; }

/* ==========================================================
   Buttons: Plus-Button (FAB) & Icon-Buttons
   ========================================================== */
.fab{
  position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#0d1210; border:none; font-size:1.6rem; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.4); z-index:20;
}
.fab:hover{ background:var(--accent-hover); }
.icon-btn{ background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim); border-radius:8px; padding:8px 12px; cursor:pointer; font-size:0.85rem; text-decoration:none; display:inline-block; }
.icon-btn:hover{ color:var(--text); border-color:var(--accent-hover); }

/* ==========================================================
   Modale & Formulare (Anlegen/Bearbeiten, Passwort etc.)
   ========================================================== */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:flex-end; justify-content:center; z-index:50; }
.modal-overlay.hidden{ display:none; }
.modal{ background:var(--bg-elevated); width:100%; max-width:600px; max-height:90vh; overflow-y:auto; border-radius:16px 16px 0 0; padding:20px; border:1px solid var(--border); border-bottom:none; }
@media(min-width:600px){ .modal-overlay{ align-items:center; } .modal{ border-radius:16px; border-bottom:1px solid var(--border); } }
.modal h2{ font-family:var(--font-display); font-size:1.1rem; margin:0 0 16px; }
.field{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:0.8rem; color:var(--text-dim); }
input, textarea, select{ background:var(--bg-card); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:9px 12px; font-family:var(--font-body); font-size:0.9rem; width:100%; }
input:focus, textarea:focus, select:focus{ outline:1px solid var(--accent-hover); border-color:var(--accent-hover); }
.modal-actions{ display:flex; gap:10px; margin-top:18px; justify-content:space-between; }
.btn-primary{ background:var(--accent); color:#0d1210; border:none; border-radius:8px; padding:10px 18px; font-weight:600; cursor:pointer; font-size:0.9rem; }
.btn-secondary{ background:transparent; border:1px solid var(--border); color:var(--text-dim); border-radius:8px; padding:10px 18px; cursor:pointer; font-size:0.9rem; }
.btn-danger{ background:transparent; border:1px solid #d1554a; color:#d1554a; border-radius:8px; padding:10px 18px; cursor:pointer; font-size:0.9rem; }

/* ==========================================================
   Einstellungen, Status-Meldungen & Detailansicht
   ========================================================== */
.settings-section{ margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.settings-section:last-child{ border-bottom:none; }
.settings-section h3{ font-size:0.9rem; margin:0 0 10px; }
.settings-section p{ font-size:0.8rem; color:var(--text-dim); margin:4px 0 10px; }
.status-msg{ font-size:0.8rem; padding:8px 10px; border-radius:6px; margin-top:8px; }
.status-ok{ background:rgba(76,175,109,0.12); color:#4caf6d; }
.status-err{ background:rgba(209,85,74,0.12); color:#d1554a; }
.top-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.detail-row{ display:flex; justify-content:space-between; gap:14px; padding:10px 2px; border-bottom:1px solid var(--border); }
.detail-row:last-child{ border-bottom:none; }
.detail-label{ color:var(--text-dim); font-size:0.82rem; flex-shrink:0; }
.detail-value{ font-size:0.88rem; text-align:right; }
.detail-value a{ color:var(--accent); }
.detail-value a:hover{ color:var(--accent-hover); }

/* ==========================================================
   Höchstsätze-Tabelle (Formular)
   ========================================================== */
.werte-table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
.werte-table th{ text-align:left; font-weight:500; color:var(--text-dim); font-size:0.72rem; padding:4px 6px; }
.werte-table th.num{ text-align:center; }
.werte-table th.qm-col{ text-align:center; width:70px; }
.werte-table td{ padding:3px 4px; }
.werte-table td.pn{ font-family:var(--font-mono); color:var(--text-dim); font-size:0.78rem; white-space:nowrap; padding-right:6px; }
.werte-table input{ padding:6px 8px; font-size:0.82rem; text-align:center; }
.werte-table tr:nth-child(odd) td{ background:rgba(255,255,255,0.02); }
.werte-table td.qm-cell input{ font-size:0.78rem; }
.werte-table td.gesamt-cell{ text-align:center; font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:0.82rem; }
.werte-table input[data-person-heizkosten][data-heiz-auto="1"]{ color:var(--accent); font-style:italic; }
.qm-note{ font-size:0.72rem; color:var(--text-dim); font-weight:400; margin-left:5px; }

/* ==========================================================
   Unterseiten (Info, Impressum, Datenschutz, KdU-Rechner)
   ========================================================== */
.back-link{ display:inline-block; color:var(--text-dim); font-size:0.8rem; text-decoration:none; margin-bottom:10px; }
.back-link:hover{ color:var(--accent-hover); }
/*.info-links, .info-links:visited{ color:var(--accent); text-decoration:underline; }
.info-links:hover{ color:var(--accent-hover); }*/
main{ max-width:640px; margin:0 auto; padding:20px; }
main h2{ font-family:var(--font-display); font-size:1.1rem; margin:28px 0 8px; display:flex; align-items:baseline; gap:8px; }
main h2:first-child{ margin-top:0; }
main h2 .idx{ font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); }
main h3{ font-family:var(--font-display); font-size:1rem; margin:20px 0 8px; }
main p{ color:var(--text-dim); margin:0 0 12px; }
main ul{ color:var(--text-dim); padding-left:20px; margin:0 0 12px; }
main li{ margin-bottom:6px; }
main section{ margin-bottom:32px; }
.hint-box{ border:1px solid var(--border); background:var(--bg-card); border-radius:10px; padding:14px 16px; font-size:0.88rem; color:var(--text-dim); margin-top:20px; }
.placeholder{ border:1px dashed var(--border); border-radius:10px; padding:18px; color:var(--text-dim); font-size:0.9rem; }
.sec-hint{ color:var(--text-dim); font-size:0.82rem; margin-bottom:14px; }

/* ==========================================================
   KdU-Rechner-Seite
   ========================================================== */
details{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); }
details summary{ cursor:pointer; padding:12px 14px; font-size:0.85rem; color:var(--text-dim); user-select:none; }
details summary:hover{ color:var(--text); }
.settings-body{ padding:4px 14px 16px; }
table.settings-table{ width:100%; border-collapse:collapse; font-size:0.85rem; margin-bottom:6px; }
table.settings-table th{ text-align:left; font-weight:500; color:var(--text-dim); font-size:0.72rem; padding:4px 6px; }
table.settings-table td{ padding:3px 4px; }
table.settings-table td input{ padding:6px 8px; font-size:0.82rem; text-align:right; }
table.settings-table td.rowlabel{ font-family:var(--font-mono); color:var(--text-dim); font-size:0.78rem; white-space:nowrap; padding-right:8px; }
.go-btn{ margin-top:10px; width:100%; padding:12px; font-family:var(--font-mono); font-size:0.9rem; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; letter-spacing:0.02em; }
.go-btn:hover{ background:var(--accent-hover); }
.go-btn:disabled{ background:var(--text-dim); cursor:not-allowed; }
table.result{ width:100%; border-collapse:collapse; margin-top:20px; font-size:0.88rem; }
table.result caption{ text-align:left; font-family:var(--font-mono); font-size:0.74rem; color:var(--text-dim); margin-bottom:8px; }
table.result th{ text-align:right; font-weight:600; font-size:0.76rem; color:var(--text-dim); padding:6px 8px; border-bottom:2px solid var(--border); }
table.result th:first-child, table.result td:first-child{ text-align:left; }
table.result td{ text-align:right; padding:7px 8px; border-bottom:1px solid var(--border); font-family:var(--font-mono); }
table.result tr.sum td{ font-weight:700; color:var(--accent); border-top:1px solid var(--border); }
.price-table{ width:100%; border-collapse:collapse; font-size:0.88rem; margin-bottom:4px; }
.price-table th{ text-align:right; font-weight:500; color:var(--text-dim); font-size:0.76rem; padding:6px 8px; }
.price-table th:first-child{ text-align:left; }
.price-table td{ padding:5px 8px; }
.price-table td input{ text-align:right; }
.save-row{ display:flex; gap:10px; margin-top:16px; align-items:center; }
.save-row input{ flex:1; }
.save-row button{ white-space:nowrap; }
.archive-item{ border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:8px; background:var(--bg-card); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.archive-item .name{ font-weight:600; font-size:0.92rem; }
.archive-item .meta{ font-family:var(--font-mono); font-size:0.72rem; color:var(--text-dim); margin-top:2px; }
.archive-item .values{ font-family:var(--font-mono); font-size:0.78rem; color:var(--text); margin-top:6px; }
.archive-item .del{ background:none; border:none; color:#d1554a; font-family:var(--font-mono); font-size:0.74rem; cursor:pointer; padding:2px 6px; flex-shrink:0; }
.archive-item .del:hover{ text-decoration:underline; }
.archive-empty{ color:var(--text-dim); font-size:0.84rem; font-style:italic; padding:14px 2px; }
.footnote{ font-size:0.76rem; color:var(--text-dim); margin-top:26px; border-top:1px solid var(--border); padding-top:12px; }