/* ================================================================
   BELOWMARK MASTER STYLESHEET — SIGNATURE LUXURY REAL ESTATE TERMINAL
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* Crisp Light Luxury Fintech Palette (Default) */
  --bg: #f8fafc;
  --bg-2: #ffffff;
  --bg-3: #f1f5f9;
  --bg-4: #e2e8f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-heavy: rgba(255, 255, 255, 0.96);
  --backdrop: rgba(15, 23, 42, 0.45);

  /* Lines & Borders */
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --line-highlight: #cbd5e1;
  --border-emerald: rgba(5, 150, 105, 0.35);

  /* Typography & Foreground */
  --fg: #0f172a;
  --fg-2: #334155;
  --fg-3: #64748b;
  --fg-muted: #94a3b8;

  /* Signature Emerald Accent */
  --accent: #059669;
  --accent-2: #10b981;
  --accent-dim: rgba(5, 150, 105, 0.08);
  --accent-glow: rgba(5, 150, 105, 0.2);
  --accent-text: #ffffff;

  /* Warning / Caution / Amber */
  --warn: #d97706;
  --warn-2: #b45309;
  --warn-dim: rgba(217, 119, 6, 0.1);
  --warn-glow: rgba(217, 119, 6, 0.2);

  /* Danger / Auction Red */
  --danger: #dc2626;
  --danger-2: #b91c1c;
  --danger-dim: rgba(220, 38, 38, 0.1);
  --seal: #dc2626;

  /* Live & Action */
  --live: #ea580c;
  --live-dim: rgba(234, 88, 12, 0.12);
  --info: #0284c7;
  --info-dim: rgba(2, 132, 199, 0.1);
  --wa: #16a34a;
  --wa-dim: rgba(22, 163, 74, 0.1);

  /* Geometry & Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Typography Stacks */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: var(--font-mono);

  --panel: linear-gradient(158deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
  --panel-r: 18px;
  --control-h: 44px;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 12px 28px -4px rgba(15, 23, 42, 0.12), 0 0 1px rgba(15, 23, 42, 0.1);
  --shadow-modal: 0 25px 60px -15px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Deep Obsidian Luxury Palette */
  --bg: #06080d;
  --bg-2: #0a0e16;
  --bg-3: #101622;
  --bg-4: #172030;
  --bg-card: #0d131e;
  --bg-card-hover: #121a29;
  --bg-glass: rgba(13, 19, 30, 0.78);
  --bg-glass-heavy: rgba(8, 12, 18, 0.94);
  --backdrop: rgba(4, 6, 10, 0.85);

  /* Lines & Borders */
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-highlight: rgba(255, 255, 255, 0.16);
  --border-emerald: rgba(16, 185, 129, 0.35);

  /* Typography & Foreground */
  --fg: #f8fafc;
  --fg-2: #94a3b8;
  --fg-3: #64748b;
  --fg-muted: #475569;

  /* Signature Emerald Accent */
  --accent: #10b981;
  --accent-2: #34d399;
  --accent-dim: rgba(16, 185, 129, 0.14);
  --accent-glow: rgba(16, 185, 129, 0.25);
  --accent-text: #04140b;

  /* Warning / Caution / Amber */
  --warn: #f59e0b;
  --warn-2: #fbbf24;
  --warn-dim: rgba(245, 158, 11, 0.14);
  --warn-glow: rgba(245, 158, 11, 0.25);

  /* Danger / Auction Red */
  --danger: #ef4444;
  --danger-2: #f87171;
  --danger-dim: rgba(239, 68, 68, 0.14);
  --seal: #ef4444;

  /* Live & Action */
  --live: #f97316;
  --live-dim: rgba(249, 115, 22, 0.15);
  --info: #38bdf8;
  --info-dim: rgba(56, 189, 248, 0.12);
  --wa: #25d366;
  --wa-dim: rgba(37, 211, 102, 0.14);

  --panel: linear-gradient(158deg, rgba(18, 25, 39, 0.72), rgba(10, 14, 22, 0.94));

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 12px 36px -8px rgba(0, 0, 0, 0.55), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  --shadow-hover: 0 22px 48px -10px rgba(0, 0, 0, 0.75), 0 0 24px rgba(16, 185, 129, 0.16);
  --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Accessibility & Focus States */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

button, input, select, textarea, a {
  touch-action: manipulation;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.app-body {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 16px));
}

@media (min-width: 761px) {
  body.app-body {
    padding-bottom: 36px;
  }
}

/* For You Focus Mode: Lock body scroll & maximize focus */
body.in-foryou-mode {
  overflow: hidden !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  position: fixed;
  width: 100%;
}
body.in-foryou-mode .sitefoot {
  display: none !important;
}

a {
  color: var(--info);
  text-decoration: none;
  transition: color .18s ease;
}
a:hover {
  color: var(--accent-2);
  text-decoration: none;
}
b, strong {
  font-weight: 600;
  color: var(--fg);
}

.wrap, .shell {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 24px;
}
.hidden {
  display: none !important;
}

.empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--fg-3);
  background: var(--bg-card);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  margin: 28px 0;
  box-shadow: var(--shadow-sm);
}
.empty .empty-icon {
  font-size: 2.8rem;
  margin-bottom: 14px;
  opacity: 0.85;
}
.empty h3 {
  color: var(--fg);
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.empty p {
  max-width: 460px;
  margin: 0 auto 20px;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.6;
}

.mobile-only { display: none !important; }
.desktop-only { display: block; }
@media (max-width: 760px) {
  .mobile-only { display: flex !important; }
  .desktop-only { display: none !important; }
  .wrap, .shell { padding: 0 16px; }
}

/* ================================================================
   1. APP HEADER & TOP NAVIGATION (UNIFIED PROFILE & CLEAN LOGO)
   ================================================================ */

header.top {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--line);
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: max(8px, env(safe-area-inset-top, 8px)) 0 8px;
  transition: all .2s ease;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

/* Header Left: Official Logo */
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Authentic Belowmark Pure Wordmark */
.mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--fg);
  text-transform: uppercase;
  transition: transform .18s ease, opacity .18s ease;
  user-select: none;
}
.mark:hover {
  transform: translateY(-1px);
  opacity: 0.92;
  text-decoration: none;
}
.mark-text {
  position: relative;
  padding-top: 3px;
  border-top: 2.5px solid #ef4444;
  line-height: 1;
  color: var(--fg);
}

/* Watchlist Star Button */
.header-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
}
.header-watch-btn:hover {
  border-color: var(--warn);
  background: var(--warn-dim);
  color: var(--warn-2);
}
.header-watch-btn .star-icon {
  color: var(--warn);
  font-size: 13.5px;
}
.header-watch-btn .watch-badge-n {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-2);
  color: var(--fg);
  padding: 1px 6px;
  border-radius: 999px;
}

/* Header Right: User Account Capsule & Dropdown Menu */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-menu-container {
  position: relative;
}

.user-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
}
.user-pill-btn:hover, .user-pill-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--bg-4);
  box-shadow: 0 0 14px var(--accent-glow);
}
.user-avatar-icon {
  font-size: 13.5px;
  opacity: 0.9;
}
.user-pill-mail {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--fg);
}
.user-pill-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-2);
  border: 1px solid var(--border-emerald);
  white-space: nowrap;
}
.user-pill-badge.warn {
  background: var(--warn-dim);
  color: var(--warn-2);
  border-color: var(--warn-glow);
}
.user-chevron {
  font-size: 11px;
  color: var(--fg-3);
  transition: transform .2s ease;
}
.user-pill-btn[aria-expanded="true"] .user-chevron {
  transform: rotate(180deg);
}

/* User Dropdown Menu Card */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 290px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  z-index: 10000;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: dropdown-in .18s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .user-dropdown-menu {
  background: #0a0e15;
  border-color: var(--line-highlight);
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.user-dropdown-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-4);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.user-dropdown-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.user-dropdown-info b {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}
.user-status-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-2);
}

.user-dropdown-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.user-dropdown-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  font-weight: 600;
}

/* Language Segmented Group inside Dropdown */
.lang-switch-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.lang-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  text-decoration: none;
  transition: all .15s ease;
}
.lang-opt:hover {
  color: var(--fg);
  text-decoration: none;
}
.lang-opt.active {
  background: var(--bg-4);
  color: var(--fg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.user-dropdown-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dd-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  text-align: left;
  transition: all 0.16s ease;
}

.dd-nav-item:hover {
  background: var(--bg-3);
  border-color: var(--line-soft);
  color: var(--fg);
}

.dd-nav-icon {
  font-size: 15px;
  line-height: 1;
}

.dd-nav-text {
  flex: 1;
  letter-spacing: -0.01em;
}

.dd-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--bg-3);
  color: var(--fg-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
  width: 100%;
  text-align: left;
}
.dd-action-btn:hover {
  border-color: var(--line-highlight);
  background: var(--bg-4);
  color: var(--fg);
  text-decoration: none;
}

.user-dropdown-footer {
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.dd-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: var(--danger-dim);
  color: var(--danger-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}
.dd-logout-btn:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* ==================== PROFILE DIALOG MODAL ==================== */
.profile-dialog {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 520px;
  width: calc(100% - 24px);
  margin: auto;
  overflow: visible;
  color: var(--fg);
  z-index: 10001;
  outline: none !important;
}

.profile-dialog::backdrop {
  background: rgba(3, 5, 8, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.profile-dialog-window {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: none !important;
}

[data-theme="dark"] .profile-dialog-window {
  background: linear-gradient(180deg, #111723 0%, #090c12 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.profile-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pdh-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pdh-avatar-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.06));
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pdh-avatar-icon {
  font-size: 20px;
  line-height: 1;
}

.pdh-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pdh-info h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdh-mail {
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2-Segment Control (Konto & Tarif | Passwort ändern) */
.profile-segmented-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 14px 20px 0;
  padding: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.prof-seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.prof-seg-btn:hover {
  color: var(--fg-2);
}

.prof-seg-btn.active {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .prof-seg-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Tab Panels */
.profile-tab-content {
  padding: 16px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 72vh;
  overflow-y: auto;
  outline: none !important;
}

/* Glass Card */
.prof-glass-card {
  padding: 18px;
  border-radius: 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-theme="dark"] .prof-glass-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border-color: rgba(255, 255, 255, 0.09);
}

.pgc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pgc-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  display: block;
}

.pgc-header h4 {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 750;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.pgc-validity {
  font-size: 12.5px;
  color: var(--fg-2);
  font-weight: 550;
}

.pgc-perks-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pgc-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-2);
}

.pgc-perk span:first-child {
  color: #10b981;
  font-weight: 700;
  font-size: 13px;
}

.pgc-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.btn-upgrade-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
  transition: all 0.18s ease;
}

.btn-upgrade-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5);
}

.btn-portal-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-portal-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Market Card */
.prof-market-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-theme="dark"] .prof-market-card {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.06);
}

.pmc-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pmc-flag {
  font-size: 20px;
  line-height: 1;
}

.pmc-details b {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--fg);
}

.pmc-details small {
  display: block;
  font-size: 11.5px;
  color: var(--fg-3);
}

.market-access-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.45;
}

/* Legal Footnote */
.prof-legal-footnote {
  padding-top: 8px;
  text-align: center;
}

.plf-links {
  font-size: 11.5px;
  color: var(--fg-3);
}

.plf-links a {
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.plf-links a:hover {
  color: var(--fg);
}

/* Password Form Box */
.prof-form-box {
  padding: 18px;
  border-radius: 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-theme="dark"] .prof-form-box {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

.pfb-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}

.pfb-head p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--fg-3);
}

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pf-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
}

.pf-field input {
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
  outline: none !important;
}
[data-theme="dark"] .pf-field input {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.pf-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.prof-feedback-msg {
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.4;
}

.prof-feedback-msg.success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.prof-feedback-msg.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.btn-save-pass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
  transition: all 0.18s ease;
}

.btn-save-pass:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45);
}

.btn-save-pass:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font-size: 13.5px;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
}
.header-icon-btn:hover {
  border-color: var(--accent);
  background: var(--bg-4);
  color: var(--accent-2);
}

/* Desktop Tabs inside Header Row */
.tabs.desktop-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  background: var(--bg-3);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.tabs.desktop-tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .18s ease;
  white-space: nowrap;
  border-radius: 999px;
}
.tabs button:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.05);
}
.tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.tab-icon {
  font-size: 13.5px;
}

@media (max-width: 900px) {
  .desktop-tabs { display: none !important; }
  .header-watch-btn .watch-label { display: none; }
  .user-pill-mail { display: none; }
}

/* ================================================================
   2. FOR YOU (DISCOVER) — DUAL MODE: STORY FEED & RADAR TERMINAL
   ================================================================ */

.discover-tab-section {
  padding-top: 24px;
}

.discover-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.discover-title-wrap h2 {
  font-size: 23px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.025em;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.discover-meta-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.meta-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 3px 11px;
  border-radius: 999px;
}

.meta-stat-pill b {
  color: var(--fg);
  font-family: var(--font-mono);
}

.meta-stat-pill.highlight {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: var(--fg-2);
}

.meta-stat-pill.highlight b {
  color: var(--accent-2);
}

/* Segmented Control Mode Switcher */
.mode-switcher {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
}
.mode-btn {
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mode-btn:hover { color: var(--fg); }
.mode-btn.active {
  background: var(--bg-4);
  color: var(--fg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Filter Pill Row */
.pill-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.pill-row::-webkit-scrollbar { display: none; }

.pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pill:hover {
  border-color: var(--fg-3);
  color: var(--fg);
  background: var(--bg-3);
  transform: translateY(-1px);
}
.pill.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-2);
  box-shadow: 0 0 16px var(--accent-glow);
}
.pill b {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* -------------------------------------------------------------
   FOR YOU MODE 1: LUXURY STORY FEED
   ------------------------------------------------------------- */

#tab-foryou {
  padding-top: 10px;
}
#tab-foryou .discover-feed-wrapper {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.discover-feed-wrapper {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.discover-feed-reel {
  height: calc(100vh - 140px);
  max-height: 820px;
  min-height: 520px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.discover-feed-reel::-webkit-scrollbar { display: none; }

[data-theme="dark"] .discover-feed-reel {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #090e17 0%, #06090f 100%);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Desktop Navigation Controls */
.reel-nav-controls {
  position: absolute;
  right: -58px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 20;
}
@media (max-width: 1100px) {
  .reel-nav-controls {
    right: 14px;
    bottom: 14px;
    top: auto;
    transform: none;
    flex-direction: row;
  }
}
.reel-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-glass-heavy);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(16px);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
}
.reel-nav-btn:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}
.reel-nav-btn:active {
  transform: scale(0.95);
}

.discover-slide {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

[data-theme="dark"] .discover-slide {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 90% 12%, rgba(16, 185, 129, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(56, 189, 248, 0.07) 0%, transparent 45%),
    linear-gradient(180deg, rgba(13, 19, 30, 0.96) 0%, rgba(8, 12, 20, 0.98) 100%);
}

.discover-slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vh, 26px);
  height: 100%;
}
/* Mittig, solange Platz ist — und ohne oben abzuschneiden, wenn nicht.
   `justify-content: center` verschluckt bei Ueberlauf den Anfang der Karte;
   automatische Aussenabstaende fallen in dem Fall einfach auf null zurueck. */
.discover-slide-content > :first-child { margin-top: auto; }
.discover-slide-content > :last-child { margin-bottom: auto; }

.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  backdrop-filter: blur(10px);
}
.tag-badge.icra {
  background: var(--danger-dim);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}
.tag-badge.ihale {
  background: var(--info-dim);
  color: #93c5fd;
  border-color: rgba(56, 189, 248, 0.35);
}
.tag-badge.live {
  background: var(--live-dim);
  color: #ffaa75;
  border-color: var(--live);
}
.tag-badge.soon {
  background: var(--warn-dim);
  color: var(--warn-2);
  border-color: var(--warn);
}
.tag-badge.verified {
  background: var(--accent-dim);
  color: var(--accent-2);
  border-color: var(--accent);
}

/* ----------------------------------------------------------------
   FOR-YOU-KARTE — eine Frage je Block, von oben nach unten:
   wo ist das, was ist das, wann ist der Termin, in welchem Korridor
   darf geboten werden, was kostet der Zuschlag zusätzlich, was ist
   an den Angaben unsicher.

   Vorher standen drei gleich große Kästen nebeneinander, von denen
   zwei dieselbe Zahl trugen (5/10), und der größte Block der Karte
   trug nur das Wort „Amtliche Versteigerung" — im deutschen Datensatz
   ist der Abschlag nie gesetzt, also lief jede Karte in diesen Fall.
   ---------------------------------------------------------------- */

/* Kopfzeile: Ort, Aktenzeichen, Position, Merkliste */
.ds-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ds-head-where {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds-place {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-file {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
}
.ds-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ds-counter {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.ds-counter i {
  font-style: normal;
  opacity: 0.45;
  margin: 0 1px;
}
.ds-disc {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 750;
  color: var(--accent-2);
  background: var(--accent-dim);
  border: 1px solid var(--border-emerald);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Was es ist */
.ds-ident {
  min-width: 0;
}
.ds-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}
.ds-addr {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-2);
}

/* Wann — einmal, statt Badge oben plus Kasten plus Datum darunter */
.ds-when {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.ds-when-icon {
  font-size: 13px;
  line-height: 1;
  color: var(--fg-3);
}
.ds-when-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ds-when-text b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.ds-when-text span {
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-when.tone-live {
  border-color: rgba(249, 115, 22, 0.4);
  background: var(--live-dim);
}
.ds-when.tone-live .ds-when-icon,
.ds-when.tone-live .ds-when-text b { color: #fdba74; }
.ds-when.tone-urgent {
  border-color: rgba(245, 158, 11, 0.34);
  background: var(--warn-dim);
}
.ds-when.tone-urgent .ds-when-icon,
.ds-when.tone-urgent .ds-when-text b { color: var(--warn-2); }
.ds-when.tone-off { opacity: 0.75; }
.ds-stage {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--fg-3);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* Bietkorridor */
.ds-ladder {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
  padding: 13px 15px 12px;
}
[data-theme="dark"] .ds-ladder {
  background: rgba(13, 19, 30, 0.6);
}
.ds-ladder-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ds-ladder-label {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-3);
}
.ds-ladder-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.ds-bar {
  display: flex;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-4);
}
.ds-bar-zone { display: block; height: 100%; }
.ds-bar-zone.blocked { background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.32) 0 5px, rgba(239, 68, 68, 0.16) 5px 10px); }
.ds-bar-zone.risky { background: rgba(245, 158, 11, 0.55); }
.ds-bar-zone.clear { background: linear-gradient(90deg, rgba(16, 185, 129, 0.6), rgba(52, 211, 153, 0.85)); }

.ds-ladder-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 11px;
}
.ds-leg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds-leg-key {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  text-transform: uppercase;
  line-height: 1.25;
}
.ds-leg-key .dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: 0 0 auto;
  transform: translateY(-1px);
}
.ds-leg-key .dot.blocked { background: rgba(239, 68, 68, 0.6); }
.ds-leg-key .dot.risky { background: rgba(245, 158, 11, 0.75); }
.ds-leg b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ds-leg small {
  font-size: 10.5px;
  color: var(--fg-muted);
  line-height: 1.25;
}
.ds-ladder-waived {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--warn-2);
}
.ds-ladder-empty { display: flex; align-items: center; }
.ds-ladder-none {
  font-size: 12.5px;
  color: var(--fg-3);
}

/* Was der Zuschlag zusätzlich kostet */
.ds-costs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ds-cost {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--bg-3);
  min-width: 0;
}
[data-theme="dark"] .ds-cost {
  background: rgba(255, 255, 255, 0.025);
}
.ds-cost > span {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.ds-cost > b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.ds-cost > small {
  font-size: 10.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Was an den Angaben unsicher ist — steht im Datensatz und gehört auf die
   Karte, nicht nur ins Dossier. */
.ds-flags {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--warn-2);
  opacity: 0.85;
}
.ds-flags span { margin-right: 4px; }

/* Nebensachen, eine Zeile, notfalls seitlich scrollbar */
.ds-facts {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 1px;
}
.ds-facts::-webkit-scrollbar { display: none; }
.ds-fact {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--bg-3);
  font-size: 11.5px;
  font-weight: 550;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
}
[data-theme="dark"] .ds-fact {
  background: rgba(255, 255, 255, 0.03);
}
.ds-fact-link:hover {
  border-color: rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}

/* Aktionen: eine Hauptsache, zwei Nebensachen */
.discover-slide-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.btn-dossier {
  flex: 1 1 auto;
  min-height: 46px;
  border-radius: var(--radius);
  border: 0;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #04140b;
  font: inherit;
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .18s ease, transform .18s ease;
  box-shadow: 0 6px 20px -6px rgba(16, 185, 129, 0.55);
}
.btn-dossier:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-dossier:active { transform: translateY(0); }

.btn-official-link {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 15px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: all .18s ease;
}
.btn-official-link:hover {
  border-color: var(--line-highlight);
  color: var(--fg);
  background: rgba(255, 255, 255, 0.08);
}

.btn-whatsapp {
  flex: 0 0 auto;
  width: 46px;
  min-height: 46px;
  border-radius: var(--radius);
  border: 1px solid rgba(37, 211, 102, 0.28);
  background: rgba(37, 211, 102, 0.07);
  color: #25d366;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all .18s ease;
}
.btn-whatsapp:hover { background: rgba(37, 211, 102, 0.16); }

.btn-star-round {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-3);
  font-size: 15px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .18s ease;
}
[data-theme="dark"] .btn-star-round {
  background: rgba(255, 255, 255, 0.03);
}
.btn-star-round:hover {
  border-color: var(--warn);
  color: var(--warn);
}
.btn-star-round.on {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-dim);
}
/* Floating Vertical Progress Dots */
/* Neben der Karte, nicht darin — bei `right: 14px` lagen die Punkte auf dem
   Karteninhalt und dem Merkzettel-Stern. */
.discover-dots {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
  pointer-events: none;
}
.discover-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fg-3);
  opacity: 0.35;
  transition: all .24s ease;
}
.discover-dots span.on {
  height: 18px;
  border-radius: 4px;
  background: var(--accent-2);
  opacity: 1;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.7);
}

.hint-bounce {
  font-size: 11.5px;
  color: var(--fg-3);
  text-align: center;
  margin-top: 4px;
  opacity: 0.8;
  animation: pulseHint 2.4s infinite ease-in-out;
}
@keyframes pulseHint {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 760px) {
  .discover-tab-section {
    padding-top: 6px;
  }
  #tab-foryou {
    padding: 0;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #tab-foryou .discover-feed-wrapper {
    height: calc(100dvh - 56px - 60px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 56px - 60px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 4px 6px;
    box-sizing: border-box;
  }
  .discover-feed-reel {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    border-radius: var(--radius);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    border: 1px solid var(--line);
  }
  .discover-slide {
    padding: 14px 15px;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .discover-slide-content {
    gap: 11px;
    height: 100%;
    min-height: 100%;
  }

  .ds-place { font-size: 11.5px; }
  .ds-title { font-size: 19px; }
  .ds-addr { font-size: 13px; }

  .ds-when { padding: 8px 11px; gap: 9px; }
  .ds-when-text b { font-size: 13.5px; }
  .ds-when-text span { font-size: 11px; }

  .ds-ladder { padding: 11px 12px 10px; }
  .ds-ladder-value { font-size: 17px; }
  .ds-ladder-legend { gap: 8px; margin-top: 9px; }
  .ds-leg b { font-size: 14.5px; }
  .ds-leg-key { font-size: 9.5px; letter-spacing: 0.02em; }
  .ds-leg small { font-size: 9.5px; }

  .ds-costs { gap: 8px; }
  .ds-cost { padding: 8px 10px; }
  .ds-cost > span { font-size: 9.5px; letter-spacing: 0.03em; }
  .ds-cost > b { font-size: 14px; }
  .ds-cost > small { font-size: 9.5px; }

  .ds-flags { font-size: 11px; }
  .ds-fact { height: 25px; font-size: 11px; padding: 0 9px; }

  .discover-slide-actions { padding-top: 11px; gap: 7px; }
  .btn-dossier { min-height: 44px; font-size: 14px; }
  .btn-official-link { min-height: 44px; padding: 0 12px; font-size: 12.5px; }
  .btn-whatsapp { width: 44px; min-height: 44px; }

  .reel-nav-controls,
  .discover-dots {
    display: none !important;
  }
}

/* Sehr kleine Geräte: die Beträge dürfen umbrechen statt abzuschneiden. */
@media (max-width: 360px) {
  .ds-ladder-legend,
  .ds-costs { grid-template-columns: 1fr; }
  .ds-leg small { display: none; }
}

/* ================================================================
   RADAR REDESIGN: EXECUTIVE DASHBOARD & HIGH-END TERMINAL
   ================================================================ */

.discover-radar-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 1. Hero KPI Panel */
.radar-hero-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .radar-hero-panel {
  background: linear-gradient(160deg, rgba(16, 24, 38, 0.92) 0%, rgba(9, 13, 22, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.radar-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.radar-title-badge-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.radar-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.9);
  animation: pulse-dot 1.8s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.live-pulse-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.radar-title-badge-group h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.radar-hero-sub {
  margin: 0;
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.4;
}

.btn-foryou-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: var(--accent-2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.btn-foryou-switch:hover {
  background: var(--accent);
  color: #04140b;
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}
.foryou-sparkle { font-size: 14px; }
.foryou-arrow { font-size: 14px; transition: transform .2s ease; }
.btn-foryou-switch:hover .foryou-arrow { transform: translateX(3px); }

/* KPI Grid */
.radar-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.radar-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--bg-3);
  border: 1px solid var(--line);
}
[data-theme="dark"] .radar-kpi-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
.radar-kpi-item.highlight {
  background: var(--accent-dim);
  border-color: rgba(16, 185, 129, 0.3);
}

.kpi-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kpi-amount {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.kpi-amount.text-emerald {
  color: var(--accent-2);
}
.kpi-footnote {
  font-size: 11.5px;
  color: var(--fg-muted);
}

/* 2. Quick Filters Bar */
.radar-filter-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.radar-filter-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: all .18s ease;
  user-select: none;
}
.radar-filter-pill:hover {
  border-color: var(--accent);
  background: var(--bg-3);
  transform: translateY(-1px);
}
.radar-filter-pill.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-2);
}
.rfp-icon {
  font-size: 18px;
  line-height: 1;
}
.rfp-icon.star {
  color: var(--warn);
}
.rfp-label {
  font-size: 12px;
  font-weight: 550;
  color: var(--fg-2);
  flex: 1;
  white-space: nowrap;
}
.radar-filter-pill:hover .rfp-label {
  color: var(--fg);
}
.rfp-badge {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 7px;
  border-radius: 999px;
}

/* 3. Section Containers */
.radar-priority-box,
.radar-feed-box {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.radar-box-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.box-head-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.box-badge-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.box-head-text h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.box-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-3);
}

.box-head-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--accent-2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  transition: all .18s ease;
  white-space: nowrap;
}
.box-head-action-btn:hover {
  border-bottom-color: var(--accent-2);
  transform: translateX(2px);
}
.box-head-action-btn .arr {
  font-size: 14px;
}

/* Priority Deal Cards */
.radar-priority-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radar-priority-card {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.radar-priority-card:hover {
  border-color: var(--accent);
  background: var(--bg-4);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 16px var(--accent-glow);
  transform: translateX(4px);
}

.rpc-rank-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpc-rank-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--warn-2);
  background: var(--warn-dim);
  border: 1px solid rgba(245, 158, 11, 0.25);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.rpc-main-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rpc-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rpc-loc-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--info);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpc-type-tag {
  font-size: 11px;
  font-weight: 550;
  color: var(--fg-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.rpc-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.rpc-values {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-3);
  flex-wrap: wrap;
}
.rpc-values b {
  color: var(--fg-2);
  font-family: var(--font-mono);
}
.rpc-sep {
  opacity: 0.4;
}

.rpc-action-col {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
  flex-shrink: 0;
}

.rpc-disc-badge {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 750;
  color: var(--fg-3);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.rpc-disc-badge.has-discount {
  color: var(--accent-2);
  background: var(--accent-dim);
  border-color: rgba(16, 185, 129, 0.3);
}

.rpc-deadline {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--info);
  white-space: nowrap;
}

.rpc-arrow {
  font-size: 15px;
  color: var(--fg-3);
  transition: transform .2s ease, color .2s ease;
}
.radar-priority-card:hover .rpc-arrow {
  color: var(--accent-2);
  transform: translate(2px, -2px);
}

/* Mobile Responsiveness for Radar */
@media (max-width: 760px) {
  .radar-hero-panel {
    padding: 16px 16px;
    gap: 14px;
    border-radius: var(--radius);
  }
  .radar-title-badge-group h2 {
    font-size: 18.5px;
  }
  .radar-hero-sub {
    font-size: 11.5px;
  }
  .btn-foryou-switch {
    width: 100%;
    justify-content: center;
    height: 38px;
    font-size: 12px;
  }
  .radar-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-top: 10px;
  }
  .radar-kpi-item {
    padding: 8px 8px;
    gap: 2px;
  }
  .kpi-tag {
    font-size: 8.5px;
  }
  .kpi-amount {
    font-size: 15px;
  }
  .kpi-footnote {
    display: none;
  }

  .radar-filter-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }
  .radar-filter-strip::-webkit-scrollbar { display: none; }
  .radar-filter-pill {
    flex: 0 0 auto;
    padding: 8px 12px;
    gap: 6px;
    border-radius: 999px;
    scroll-snap-align: start;
  }
  .rfp-icon { font-size: 14px; }
  .rfp-label { font-size: 11px; }
  .rfp-badge { font-size: 10.5px; padding: 1px 5px; }

  .radar-priority-box,
  .radar-feed-box {
    padding: 16px 12px;
    border-radius: var(--radius);
  }
  .box-head-text h3 {
    font-size: 16.5px;
  }
  .box-sub {
    font-size: 11px;
  }

  .radar-priority-card {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 10px;
  }
  .rpc-rank-num {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .rpc-title {
    font-size: 13px;
  }
  .rpc-loc-tag {
    font-size: 10.5px;
  }
  .rpc-type-tag {
    font-size: 9.5px;
    padding: 0 5px;
  }
  .rpc-values {
    font-size: 10.5px;
  }
  .rpc-action-col {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .rpc-disc-badge {
    font-size: 11.5px;
    padding: 1px 6px;
  }
  .rpc-deadline {
    font-size: 10px;
  }
  .rpc-arrow {
    display: none;
  }
}

.discover-city-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.discover-city-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .18s ease;
}
.discover-city-list button:hover {
  background: var(--bg-4);
  border-color: var(--accent);
  color: var(--accent-2);
}
.discover-city-list button b {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-2);
}

/* ================================================================
   3. İHALELER & İCRA — HIGH-END TERMINAL FILTER RADAR
   ================================================================ */

.toolbar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

/* Vier gleiche Spalten. Damit keine Zeile halb leer endet, sitzt die Sortierung
   nicht mehr hier, sondern in der Schalterzeile darunter — sie filtert nichts,
   sie ordnet nur an. Übrig bleiben 8 Felder: genau zwei volle Zeilen. */
.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 16px 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* `display` aus einer Klassenregel schlägt das `display: none` des Browsers
   für [hidden]. Ohne diese beiden Zeilen setzt JavaScript zwar `hidden`, das
   Bedienelement bleibt aber stehen — Filter ohne Deckung im Bestand wären
   weiter sichtbar und würden weiter etwas versprechen. */
.field[hidden],
.chip[hidden] {
  display: none;
}

.field.grow {
  grid-column: 1 / -1;
}

.field label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.field label .hint {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: none;
  font-weight: 400;
}
.field label kbd {
  font-family: var(--font-mono);
  background: var(--bg-4);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
}

/* Custom Styled Inputs and Select Dropdowns */
.field input[type="search"],
.field input[type="text"],
.field input[type="number"],
.field select {
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font-family: inherit;
  font-size: 13.5px;
  transition: all .18s ease;
  width: 100%;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.field input:focus,
.field select:focus {
  border-color: var(--accent);
  background: var(--bg-4);
  box-shadow: 0 0 0 3px var(--accent-dim);
  outline: none;
}

/* Der Schieberegler ist flach — die Ränder bringen ihn auf dieselbe Gesamthöhe
   wie ein Eingabefeld, sonst steht seine Zeile schief. */
.field input[type="range"] {
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-4);
  border-radius: 999px;
  outline: none;
  margin: 19px 0;
  cursor: pointer;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid #fff;
  box-shadow: 0 0 10px var(--accent-glow);
  cursor: pointer;
  transition: transform .15s ease;
}
.field input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.field label b {
  color: var(--accent-2);
  font-family: var(--font-mono);
}

/* Schalterzeile: Umschalter links, Anzeigeoptionen rechts. Alle Elemente auf
   einer Höhe, damit die Reihe eine Grundlinie hat. */
.chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.chips > *,
.chips-display > * { height: 38px; }

/* Anzeigeoptionen bleiben als Block zusammen und rechtsbündig — sonst reißt es
   bei schmaler Leiste einzelne Schalter unter die Filter-Schalter. */
.chips-display {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
  height: auto;
}
.chip-spacer { flex: 1; min-width: 0; height: 0; }

/* Schmal: die Leiste stapelt, jede Gruppe nimmt die volle Breite. */
@media (max-width: 720px) {
  /* Der Suchhinweis drängt sich sonst neben die Beschriftung und bricht sie um. */
  .field label .hint { display: none; }
  .chip-spacer { display: none; }
  .chips-display { width: 100%; margin-left: 0; }
  .sortfield { width: 100%; }
  .sortfield select { flex: 1; max-width: none; }
  .viewtoggle { flex: 1; }
  .viewtoggle button { flex: 1; }
  .btn-reset { flex: 1; }
}

/* Die Sortierung steht hier statt im Filterraster — sie schränkt nichts ein. */
.sortfield {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sortfield > label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
  white-space: nowrap;
}
.sortfield select {
  height: 38px;
  max-width: 260px;
  padding: 0 34px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  text-overflow: ellipsis;
}
.sortfield select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  outline: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
}
.chip:hover {
  border-color: var(--fg-3);
  color: var(--fg);
  background: var(--bg-4);
}
.chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-2);
  box-shadow: 0 0 14px var(--accent-glow);
}
.chip input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.chip b {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 999px;
}


/* View Switcher */
.viewtoggle {
  display: inline-flex;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.viewtoggle button {
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  height: 100%;
  padding: 0 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.viewtoggle button:hover { color: var(--fg); }
.viewtoggle button.on {
  background: var(--bg-4);
  color: var(--fg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-reset {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}
.btn-reset:hover {
  border-color: var(--danger);
  color: var(--danger-2);
  background: var(--danger-dim);
}

.resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 22px;
  font-size: 13.5px;
  color: var(--fg-3);
}
.resultbar .count {
  font-weight: 600;
  color: var(--fg-2);
}
.resultbar .count b {
  color: var(--fg);
  font-family: var(--font-mono);
}

@media (max-width: 1024px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .filters { grid-template-columns: 1fr; }
}

/* ================================================================
   4. LISTING CARDS (HIGH-CONTRAST 16:9 MEDIA SHOWCASE)
   ================================================================ */

.grid, .mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
  gap: 22px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1440px) {
  .grid, .mgrid {
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    gap: 24px;
  }
}

@media (max-width: 760px) {
  .grid, .mgrid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    width: 100%;
  }
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  background: var(--panel);
  padding: 20px 22px 18px;
  gap: 14px;
  transition: border-color .22s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .22s ease;
  position: relative;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.card:hover {
  border-color: var(--line-highlight);
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

@media (max-width: 760px) {
  .card {
    padding: 14px 12px;
    gap: 10px;
    border-radius: var(--radius);
  }
  .card-numbers {
    padding: 10px 10px;
    gap: 8px;
  }
  .card-price-block b, .card-discount-block b {
    font-size: 15px;
  }
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.card-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.card-hero-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--border-emerald);
}

.card-discount-tag {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--accent-2);
  line-height: 1.2;
}
.card-discount-tag.has-discount {
  color: #6ee7b7;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.card-savings-hint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 600;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}
/* Objektmerkmale unter der Karte (app-de.js:309–316).
   Die Grundregeln waren in der Arbeitskopie verlorengegangen; übrig blieb nur
   die :hover-Variante, die eine Rahmenfarbe auf einem Element ohne Rahmen
   setzte. Die Reihe fiel dadurch auf reinen Fließtext zurück.
   Wiederhergestellt aus HEAD, aber auf Tokens umgestellt: die Vorlage stammt
   aus der Zeit vor dem hellen Standarddesign und hatte rgba(255,255,255,.05)
   als Fläche — auf weißer Karte unsichtbar. Alles in der Reihe ist gleich
   hoch und mittig, damit die Zeile eine Linie behält. */
.discover-chips-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 10px 0 18px;
}
.dchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  font-size: 12px;
  color: var(--fg-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  white-space: nowrap;
}
.dchip.dchip-interactive {
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dchip.dchip-interactive:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-4);
}
[data-theme="dark"] .dchip.dchip-interactive:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.card-location-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.card-location-line b {
  color: var(--fg);
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--fg);
  min-height: 2.8em;
  letter-spacing: 0;
}

.card-numbers {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 8px 0 14px;
}
.card-price-block { display: flex; flex-direction: column; }
.card-price-block label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--fg-3);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.card-price-block b {
  font-size: 17px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.card-price-block small {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}

.card-discount-block { display: flex; flex-direction: column; text-align: right; }
.card-discount-block label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--fg-3);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.card-discount-block b {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-2);
  margin-top: 2px;
}
.card-discount-block small {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}

.card-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.btn-card-dossier {
  flex: 1;
  min-height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .18s ease;
}
.btn-card-dossier:hover {
  border-color: var(--accent);
  color: var(--accent-2);
  background: var(--bg-4);
}
.btn-card-wa {
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(37, 211, 102, 0.35);
  background: var(--wa-dim);
  color: var(--wa);
  font-size: 15px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .18s ease;
  text-decoration: none;
}
.btn-card-wa:hover {
  background: var(--wa);
  color: #fff;
}

.star {
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-3);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .18s ease;
}
.star:hover, .star.on {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-dim);
}

/* Status Badges */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.status.live {
  background: var(--live-dim);
  color: #ff9d66;
  border: 1px solid var(--live);
}
.status.live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live);
  animation: live-pulse 1.5s infinite;
}
.status.soon {
  background: var(--warn-dim);
  color: var(--warn-2);
  border: 1px solid var(--warn);
}
.status.later {
  background: var(--bg-3);
  color: var(--fg-2);
  border: 1px solid var(--line);
}
.status.past {
  background: var(--bg-3);
  color: var(--fg-3);
  border: 1px solid var(--line);
}

/* Compact Table View */
.row {
  display: grid;
  grid-template-columns: 140px 1.4fr 120px 100px 120px 100px 140px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-card);
  transition: background .15s ease;
  font-size: 13.5px;
}
.row:hover {
  background: var(--bg-card-hover);
}
.row.watched {
  border-left: 3px solid var(--warn);
}

/* ================================================================
   5. DETAIL DOSSIER (ULTRA-LUXURY BOTTOM SHEET & MODAL)
   ================================================================ */

dialog#detail {
  border: 1px solid var(--line-highlight);
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  color: var(--fg);
  padding: 0;
  max-width: 880px;
  width: 92vw;
  max-height: 88vh;
  box-shadow: var(--shadow-modal);
}

dialog#detail::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dlg-handle {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  margin: 12px auto 6px;
}

.dlg-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(16px);
}
.dlg-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 3px;
  display: block;
}
.dlg-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.35;
  /* Der feste Kopf begleitet das Scrollen. Ein Aushangtitel über vier Zeilen
     verdeckt dabei den halben Dialog. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dlg-head-actions { display: flex; align-items: center; gap: 8px; }
.dlg-star-btn, .close-x {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .18s ease;
}
.dlg-star-btn.on { color: var(--warn); border-color: var(--warn); background: var(--warn-dim); }
.close-x:hover { background: var(--bg-4); color: var(--fg); }

.dlg-body {
  padding: 24px 28px 36px;
  overflow-y: auto;
  max-height: calc(88vh - 130px);
}

/* ----------------------------------------------------------------
   DOSSIER — Kopf, Abschnitte, Fehlstellen.

   Der Dialog zeigte vorher zwölf Felder „keine Angabe" in gleich großen
   Kästen und darüber einen Banner, der aus zwei Zahlen einen Satz über das
   Grundbuch machte. Jetzt: gefüllte Felder als Felder, Fehlstellen als
   benannte Fehlstellen, keine Bewertung, die nicht im Aushang steht.
/* -------------------------------------------------------------
   DOSSIER 3.0: QUICK ACTIONS & TAB SYSTEM
   ------------------------------------------------------------- */

/* Quick Actions Toolbar: Compact, sleek pill buttons */
.dlg-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 16px;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.dlg-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .16s ease;
}

.dlg-action-pill:hover {
  background: var(--bg-4);
  color: var(--fg);
  border-color: var(--line-highlight);
  transform: translateY(-1px);
}

.dlg-action-pill.primary {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.dlg-action-pill.primary:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

/* Tab Navigation Bar (Segmented Control) */
.dlg-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dlg-tabs::-webkit-scrollbar { display: none; }

.dlg-tab-btn {
  flex: 1;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--fg-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .16s ease;
}

.dlg-tab-btn:hover {
  color: var(--fg);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .dlg-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dlg-tab-btn.active {
  background: var(--bg-2);
  color: var(--fg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.dlg-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: dlgTabFade .18s ease forwards;
}

.dlg-tab-pane.hidden {
  display: none !important;
}

@keyframes dlgTabFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Wertgrenzen 4er-Grid / 2x2 Matrix */
.dlg-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 10px 0 16px;
}

@media (min-width: 640px) {
  .dlg-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dlg-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.dlg-stat-card.highlight {
  border-color: rgba(5, 150, 105, 0.35);
  background: linear-gradient(145deg, var(--bg-2), var(--bg-3));
}

.dlg-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dlg-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.dlg-stat-sub {
  font-size: 11px;
  color: var(--fg-muted);
}

.dq-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.dq-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.dq-file {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-3);
}
.dq-title {
  margin: 0;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.dq-addr {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-2);
  line-height: 1.4;
}
.dq-where {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--fg-3);
}

.dq-locked {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(234, 179, 8, 0.32);
  background: rgba(234, 179, 8, 0.07);
}
.dq-locked b { display: block; font-size: 14.5px; color: var(--warn-2); margin-bottom: 6px; }
.dq-locked p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }

/* Abschnittstitel mit Fundstelle rechts */
.dlg-body h4.dq-h {
  justify-content: space-between;
  flex-wrap: wrap;
}
.dq-cite {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0;
}

/* Termin */
.dq-when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}
.dq-when-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dq-when-main b { font-size: 17px; font-weight: 750; color: var(--fg); letter-spacing: -0.02em; }
.dq-when-main span { font-size: 13px; color: var(--fg-2); }
.dq-when-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12.5px;
  color: var(--fg-2);
  text-align: right;
}
.dq-when-side small { font-size: 11px; color: var(--fg-muted); }
@media (max-width: 560px) {
  .dq-when-side { align-items: flex-start; text-align: left; }
}
.dq-when.tone-live { border-color: rgba(249, 115, 22, 0.4); background: var(--live-dim); }
.dq-when.tone-live .dq-when-main b { color: #fdba74; }
.dq-when.tone-urgent { border-color: rgba(245, 158, 11, 0.34); background: var(--warn-dim); }
.dq-when.tone-urgent .dq-when-main b { color: var(--warn-2); }
.dq-when.tone-off { opacity: 0.8; }

/* Der Bietkorridor aus dem Feed, hier eine Spur größer. */
.dlg-body .ds-ladder { margin-bottom: 14px; }
.dlg-body .ds-ladder-value { font-size: 22px; }
.dlg-body .ds-leg b { font-size: 19px; }

.dq-facts-tight { margin-top: 12px; }

/* Fußnote unter einem Abschnitt: was die Zahl darüber nicht bedeutet. */
.dq-foot {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Fehlstellen — benannt statt als leerer Kasten */
.dq-gaps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line-soft);
}
.dq-gaps li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  background: var(--bg-3);
}
.dq-gaps li b {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--warn-2);
}
.dq-gaps li span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
}

/* Quellen: eine Reihe gleichrangiger Knöpfe */
.dq-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.dlg-body h4 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 26px 0 14px;
  border-left: 3.5px solid var(--accent);
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dlg-body h4:first-child { margin-top: 0; }

/* -------------------------------------------------------------
   DOSSIER 2.0: VERDICT BANNER
   ------------------------------------------------------------- */
.dossier-verdict-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-emerald);
  box-shadow: var(--shadow-sm);
}
.dossier-verdict-banner.caution {
  background: linear-gradient(135deg, var(--warn-dim) 0%, var(--bg-2) 100%);
  border-color: rgba(245, 158, 11, 0.4);
}
.dossier-verdict-banner.danger {
  background: linear-gradient(135deg, var(--danger-dim) 0%, var(--bg-2) 100%);
  border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .dossier-verdict-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(13, 19, 30, 0.95) 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .dossier-verdict-banner.caution {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(13, 19, 30, 0.95) 100%);
}
[data-theme="dark"] .dossier-verdict-banner.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(13, 19, 30, 0.95) 100%);
}
.verdict-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.verdict-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.verdict-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-2);
  border: 1px solid var(--accent);
}
.dossier-verdict-banner.caution .verdict-tag {
  background: var(--warn-dim);
  color: var(--warn-2);
  border-color: var(--warn);
}
.verdict-text {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
}

/* -------------------------------------------------------------
   DOSSIER 2.0: INTERACTIVE BID & TOTAL COST CALCULATOR
   ------------------------------------------------------------- */
.calc-box {
  background: var(--bg-3);
  border: 1px solid var(--line-highlight);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.calc-header label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
}
.calc-bid-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}
.calc-bid-input-wrap span {
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 600;
}
.calc-bid-input {
  background: transparent;
  border: 0;
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  width: 140px;
  text-align: right;
}
.calc-bid-input:focus {
  outline: none;
}
.calc-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
  height: 6px;
  border-radius: 3px;
}
.calc-slider-marks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}

.calc-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 4px 0;
}
.calc-item {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calc-item label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
  font-weight: 600;
}
.calc-item b {
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.calc-summary-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-emerald);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
[data-theme="dark"] .calc-summary-hero {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(10, 14, 22, 0.9) 100%);
}
.calc-total-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calc-total-block label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.calc-total-block b {
  font-family: var(--font-mono);
  font-size: clamp(20px, 3.2vw, 26px);
  color: var(--accent-2);
  font-weight: 800;
  line-height: 1.1;
}
.calc-arbitrage-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.calc-arbitrage-pill label {
  font-size: 11px;
  color: var(--fg-3);
}
.calc-arbitrage-pill b {
  font-family: var(--font-mono);
  font-size: 17px;
  color: #6ee7b7;
  font-weight: 700;
}

/* -------------------------------------------------------------
   DOSSIER 2.0: RISK & CAVEATS MATRIX
   ------------------------------------------------------------- */
.risk-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin: 12px 0 20px;
}
.risk-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.risk-card.warn {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.04);
}
.risk-card.danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.05);
}
.risk-card.clean {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.03);
}
.risk-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.risk-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.risk-title-line b {
  font-size: 13.5px;
  color: var(--fg);
}
.risk-points-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--danger-2);
  background: var(--danger-dim);
  padding: 2px 6px;
  border-radius: 4px;
}
.risk-details p {
  margin: 0;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.45;
}

/* -------------------------------------------------------------
   DOSSIER 2.0: INVESTOR DEAL PIPELINE MANAGER
   ------------------------------------------------------------- */
.pipeline-box {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 14px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--fg-3);
}
.pipeline-header b {
  color: var(--fg);
}
.pipeline-stages-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pipeline-stages-row::-webkit-scrollbar { display: none; }
.pipeline-btn {
  flex: 1 0 auto;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all .18s ease;
  white-space: nowrap;
}
.pipeline-btn:hover {
  border-color: var(--accent);
  color: var(--fg);
}
.pipeline-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent-2);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* -------------------------------------------------------------
   DOSSIER 2.0: PRIVATE INVESTOR NOTES
   ------------------------------------------------------------- */
.notes-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 20px;
}
.notes-textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  resize: vertical;
  line-height: 1.5;
  transition: border-color .18s ease;
}
.notes-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
.notes-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--fg-3);
}

/* -------------------------------------------------------------
   PRINT STYLES FOR EXECUTIVE DOSSIER MEMO
   ------------------------------------------------------------- */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  header.top, .bottom-nav, .mobile-filter-bar, .toolbar, .tabs, .sitefoot, #toast, .dlg-head-actions, .kitrow, .discover-top-bar, .pill-row {
    display: none !important;
  }
  dialog#detail {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .dlg-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .facts > div, .calc-box, .risk-card, .dossier-verdict-banner {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
  }
  .dossier-header-title, .calc-total-block b, .dlg-head h3 {
    color: #0f172a !important;
  }
}

/* Zwei Spalten gehen bei gerader Anzahl glatt auf. Keine feste Zeilenhöhe:
   dieselbe Liste trägt im Dossier einen langen Absatz zum Bebauungsstand, der
   sonst jede einspaltige Angabe daneben auf seine Höhe aufbläst. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  margin-bottom: 16px;
}
/* Ungerade Anzahl: der letzte Eintrag nimmt die ganze Breite, statt eine
   halb leere Zeile stehen zu lassen. */
.facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.facts > div {
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.facts > div span:first-child {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--fg-3);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.facts > div span:last-child {
  font-size: 14.5px;
  color: var(--fg);
  font-weight: 600;
  word-break: break-word;
}

/* Gleich breite Felder statt einer Zeile unterschiedlich langer Pillen —
   acht Kopierfelder nebeneinander lasen sich sonst wie ein Fließtext. */
.kit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.kitchip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--fg-2);
  transition: all .18s ease;
}
.kitchip:hover {
  border-color: var(--accent);
  color: var(--fg);
  background: var(--bg-4);
}
.kitchip span { font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; }
.kitchip b { color: var(--fg); font-family: var(--font-mono); }

.kitrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 22px; }

.primarybtn {
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all .18s ease;
}
.primarybtn:hover {
  background: var(--accent);
  color: var(--accent-text);
}

.note {
  font-size: 13.5px;
  color: var(--fg-2);
  background: var(--warn-dim);
  border-left: 3.5px solid var(--warn);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 14px 0 18px;
  line-height: 1.6;
}
.note b { color: var(--warn-2); }

.rawtext {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  color: var(--fg-2);
}

@media (max-width: 760px) {
  dialog#detail {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    height: 92vh;
    border-radius: 24px 24px 0 0;
    margin: auto 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .dlg-head { padding: 14px 20px 12px; }
  .dlg-body { padding: 16px 20px 24px; max-height: calc(92vh - 120px); }
  .facts { grid-template-columns: 1fr; }
  .calc-breakdown-grid { grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   6. MOBIL BOTTOM NAVIGATION
   ================================================================ */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--line);
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.bnav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  position: relative;
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.bnav-btn:focus,
.bnav-btn:focus-visible,
.bnav-btn:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.bnav-icon {
  font-size: 19px;
  line-height: 1;
  transition: transform .18s ease;
  position: relative;
}

.bnav-label {
  font-size: 10.5px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.bnav-btn:hover { color: var(--fg); }
.bnav-btn.active { color: var(--accent-2); }
.bnav-btn.active .bnav-icon { transform: translateY(-1px) scale(1.08); }
.bnav-btn.active::after {
  content: '';
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
  width: 18px;
  height: 2.5px;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
}

/* ================================================================
   7. TOAST NOTIFICATIONS & FOOTER
   ================================================================ */

.toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-glass-heavy);
  border: 1px solid var(--accent);
  color: var(--fg);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px);
  animation: toast-in .2s ease;
}
.toast-icon {
  color: var(--accent-2);
  font-size: 16px;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ================================================================
   7b. GEMEINSAME BAUTEILE DES DASHBOARDS

   Diese Klassen standen im Markup, hatten aber keine einzige Regel — die
   Schaltflächen erschienen deshalb als graue Systemknöpfe. Statt jede
   einzeln zu behandeln, teilen sie sich hier eine Grundform.
   ================================================================ */

/* Mobile Suchzeile des İhaleler-Reiters: die Klassen standen im Markup,
   hatten aber keine einzige Regel — das Suchfeld erschien als graues
   Systemfeld und lief unter die Filtrele-Schaltfläche. */
.mobile-filter-bar { align-items: center; gap: 10px; margin-bottom: 14px; }
.mobile-search-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.mobile-search-box:focus-within {
  border-color: var(--accent);
  background: var(--bg-4);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.mobile-search-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
}
.mobile-search-box input::placeholder { color: var(--fg-3); }

/* Auf dem Telefon startet die Filterwand zu, sonst steht ein ganzer
   Bildschirm Filter vor dem ersten Treffer. Die Filtrele-Schaltfläche
   schaltet .open — vorher togglete sie eine Klasse ohne Regel. */
@media (max-width: 760px) {
  #toolbar { display: none; }
  #toolbar.open { display: block; }
}

.btn-ghost,
.btn-primary-ghost,
.btn-more,
.btn-filter-toggle,
.dd-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.btn-ghost:hover,
.btn-more:hover,
.btn-filter-toggle:hover {
  border-color: var(--line-highlight);
  background: var(--bg-4);
  color: var(--fg);
}
.btn-sm { height: 34px; padding: 0 14px; font-size: 12.5px; }

.btn-primary-ghost {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-2);
}
.btn-primary-ghost:hover { background: rgba(16, 185, 129, 0.22); color: var(--accent-2); }

/* Ein Abschnitt, dessen einzige Schaltfläche ausgeblendet ist, hinterlässt
   sonst eine Überschrift ohne Inhalt — etwa „Abonelik" bei laufendem Zugang. */
.user-dropdown-section:has(.dd-action-btn):not(:has(.dd-action-btn:not(.hidden))) {
  display: none;
}

.morewrap { display: flex; justify-content: center; margin: 26px 0 8px; }
.btn-more { min-width: 240px; }

/* Kopfzeile eines Bereichs: Titel links, Aktionen rechts, gemeinsame Grundlinie. */
.watchlist-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.watchlist-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--fg); }
.watchlist-actions { display: flex; align-items: center; gap: 10px; }

.muted { margin: 0; color: var(--fg-3); font-size: 13.5px; }
.hintline { margin: 6px 0 0; }

.stats:not(:empty) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  overflow: hidden;
}

/* Kopfzeile der Listenansicht. Raster, Abstand und Polsterung müssen mit
   `.row` übereinstimmen, sonst stehen die Beschriftungen neben ihren Spalten. */
.lhead {
  display: grid;
  grid-template-columns: 140px 1.4fr 120px 100px 120px 100px 140px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Ladezustand. Er blieb beim Ausfall des Skripts sichtbar stehen — deshalb
   trägt er jetzt eine erkennbare Form statt nackten Fließtexts. */
.discover-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 320px;
  padding: 40px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  color: var(--fg-2);
  font-size: 14px;
}
.discover-loading-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line-highlight);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Rehber & Kaynaklar — reiner Lesetext, deshalb auf Lesebreite begrenzt. */
.prose { max-width: 74ch; color: var(--fg-2); font-size: 14.5px; line-height: 1.7; }
.prose h2 { margin: 32px 0 12px; font-size: 22px; color: var(--fg); }
.prose h3 { margin: 26px 0 10px; font-size: 17px; color: var(--fg); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--info); }
.prose a:hover { color: var(--accent-2); }
.about-hero h2 { margin-top: 0; }

/* Sieben feste Spalten ergeben zusammen 720px und quellen auf dem Telefon
   aus ihrem 359px breiten Behälter heraus. Dort stapelt die Zeile stattdessen:
   Zustand und Ort über die volle Breite, die Kennzahlen darunter zu dritt. */
@media (max-width: 760px) {
  .lhead { display: none; }
  .row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 14px;
  }
  .row > *:nth-child(1),
  .row > *:nth-child(2),
  .row > *:nth-child(7) { grid-column: 1 / -1; }
}

/* ================================================================
   8. PUBLIC SITE — SHELL, FOOTER, LANDING PAGE
   One rhythm, one panel recipe, one header pattern. Every grid in
   here is built from equal columns so sections line up vertically.
   ================================================================ */

.site {
  /* Vertical rhythm of the whole landing page. */
  --sec-y: clamp(52px, 5.4vw, 82px);
  /* Gutter between the two halves of every split section. */
  --split-gap: clamp(28px, 3.4vw, 52px);
  --sticky-top: 96px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The landing page reads at text width, not terminal width. */
/* Volle Bildschirmbreite. Lesbar bleibt die Seite über die Maßgrenzen der
   Textblöcke weiter unten, nicht über eine schmale Shell. */
.site .shell { max-width: none; padding-inline: clamp(18px, 2.6vw, 48px); }

/* Every landing section carries the same divider and rhythm. */
.site main.landing > section {
  scroll-margin-top: 84px;
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
  border-top: 1px solid var(--line);
}
.site main.landing > section.hero { border-top: 0; }

/* -------------------------------------------------------------
   BEWEGUNG BEIM SCROLLEN
   Die Klassen vergibt JavaScript. Ohne JavaScript und bei reduzierter
   Bewegung greift hier nichts — die Seite steht dann sofort vollständig da.
   Eingeblendet wird über `translate`, nicht über `transform`, damit die
   Hover-Anhebungen der Karten davon unberührt bleiben.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .site .reveal {
    opacity: 0;
    translate: 0 15px;
    transition: opacity .55s ease, translate .55s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  .site .reveal.in { opacity: 1; translate: none; }

  /* Balken wachsen auf ihren Wert, statt fertig dazustehen. */
  .chart .cbar i { transition: height .85s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--i, 0) * 45ms); }
  .chart.reveal:not(.in) .cbar i { height: 0; min-height: 0; }
  .chart .cbar b { transition: opacity .4s ease .3s; }
  .chart.reveal:not(.in) .cbar b { opacity: 0; }

  /* Breite steht als Inline-Wert fest — deshalb über die Skalierung wachsen. */
  ol.counties .ctrack i,
  .samplecard .bartrack i {
    transform-origin: left center;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  ol.counties.reveal:not(.in) .ctrack i,
  .samplecard.reveal:not(.in) .bartrack i { transform: scaleX(0); }

  /* Die Zeilen des Boards laufen in ihrer Sortierreihenfolge ein. */
  .board .brow { transition: opacity .45s ease, translate .45s ease; transition-delay: calc(var(--i, 0) * 60ms + 150ms); }
  .board.reveal:not(.in) .brow { opacity: 0; translate: 0 8px; }
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}
.skiplink:focus {
  left: 12px;
  top: 12px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius-xs);
  font-weight: 700;
}

@media (max-width: 780px) {
  .site .shell { padding-inline: 18px; }
}

/* -------------------------------------------------------------
   SITE HEADER
   ------------------------------------------------------------- */
.sitebar {
  border-bottom: 1px solid var(--line);
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 12px 0;
}
.sitebar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.sitenav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}
.sitenav > a {
  color: var(--fg-2);
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.sitenav > a:hover { color: var(--fg); background: var(--bg-3); }

.marketswitch,
.langswitch {
  display: inline-flex;
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin: 0 4px;
}
.marketswitch button,
.langswitch button {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  min-width: 38px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.langswitch button:hover,
.marketswitch button:hover { color: var(--fg); }
.langswitch button[aria-pressed="true"],
.marketswitch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
}

/* Markt + Sprache: ein Pill, Auswahl im aufklappenden Feld (natives <details>). */
.regionmenu { position: relative; margin: 0 4px; }
.regionmenu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.regionmenu summary::-webkit-details-marker { display: none; }
.regionmenu summary::after { content: '▾'; color: var(--fg-3); }
.regionmenu summary:hover,
.regionmenu[open] summary { border-color: var(--line-highlight); color: var(--fg); }
.regionpanel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 120;
  display: grid;
  gap: 10px;
  min-width: 280px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.regionrow {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.regionrow .marketswitch,
.regionrow .langswitch { margin: 0; justify-self: start; }

/* Both header buttons share one height so the row has a single baseline. */
.sitenav .solidlink,
.sitenav .ghostlink {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.sitenav .ghostlink {
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.sitenav .ghostlink:hover { border-color: var(--line-highlight); background: var(--bg-3); color: var(--fg); }
.sitenav .solidlink {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}
.sitenav .solidlink:hover { filter: brightness(1.08); }

@media (max-width: 1080px) {
  .sitenav > a[href^="#"] { display: none; }
}
@media (max-width: 780px) {
  .sitebar { padding: 9px 0; }
  .sitebar .shell { gap: 10px; }
  /* flex 0 0: die Wortmarke darf nie unter ihre Textbreite schrumpfen,
     sonst läuft „BELOWMARK" über die Nachbarlinks. */
  .mark { flex: 0 0 auto; font-size: 17px; letter-spacing: .12em; white-space: nowrap; }
  .sitenav { flex: 0 0 auto; gap: 6px; }
  /* Textlinks (auch die /#…-Links der Unterseiten) weichen in den Fuß;
     Anmelden bleibt als kompakte Schaltfläche erreichbar. */
  .sitenav > a:not(.ghostlink):not(.solidlink) { display: none; }
  .sitenav .ghostlink { height: 34px; padding: 0 12px; font-size: 12.5px; }
  .sitenav .regionmenu { margin: 0; }
  .regionmenu summary { height: 34px; padding: 0 10px; }
  .regionmenu .regiontext { display: none; }
  /* Das Feld hängt unter der ganzen Kopfzeile (Bezug: .sitebar, sticky),
     sonst ragt es links aus dem Bildschirm. */
  .regionmenu { position: static; }
  .regionpanel { left: 12px; right: 12px; top: calc(100% + 6px); min-width: 0; }
  .sitenav .solidlink { height: 34px; padding: 0 14px; font-size: 12.5px; }
}
/* Anmelde-Zeile im Hero: nur auf schmalen Telefonen, wo die
   Kopfzeile keine Anmelden-Schaltfläche mehr trägt. */
.hero-login { display: none; }
.hero-login a { color: var(--accent-2); font-weight: 600; }

@media (max-width: 480px) {
  /* Für vier Elemente ist kein Platz: Anmelden übernimmt die Hero-Zeile. */
  .sitenav .ghostlink { display: none; }
  .mark { font-size: 15px; letter-spacing: .1em; }
  .marketswitch button,
  .langswitch button { min-width: 32px; padding: 5px 8px; }
  .sitenav .solidlink { padding: 0 12px; font-size: 12px; }
  .hero-login { display: block; }
}

/* -------------------------------------------------------------
   SITE FOOTER
   ------------------------------------------------------------- */
.sitefoot {
  border-top: 1px solid var(--line);
  padding: 36px 0 44px;
  font-size: 13px;
  color: var(--fg-3);
}
.sitefoot .shell, .sitefoot .wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 28px;
}
.sitefoot .mark.small { grid-row: 1; }
.sitefoot > .shell > span { grid-row: 1; line-height: 1.5; }
.footlinks {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.footlinks a { color: var(--fg-3); text-decoration: none; }
.footlinks a:hover { color: var(--fg); }
.footlinks a.withdraw { color: var(--warn-2); font-weight: 650; }
.footlinks a.cancel { color: var(--fg-2); }

@media (max-width: 760px) {
  body.app-body .sitefoot { display: none !important; }
}

@media (max-width: 700px) {
  .sitefoot .shell, .sitefoot .wrap { grid-template-columns: 1fr; }
  .sitefoot > .shell > span { grid-row: auto; }
}

/* -------------------------------------------------------------
   SHARED TYPE: SECTION HEADERS, BUTTONS
   ------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.display {
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 20px;
  letter-spacing: -0.022em;
  color: var(--fg);
  text-wrap: balance;
}
.display.sec {
  font-size: clamp(27px, 3.1vw, 38px);
  line-height: 1.18;
  margin-bottom: 16px;
}

.lede {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.65;
  margin: 0 0 14px;
  max-width: 62ch;
}
.lede:last-child { margin-bottom: 0; }
.lede.rule {
  border-left: 3px solid var(--danger);
  padding: 10px 16px;
  color: var(--fg);
  font-weight: 500;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.09), transparent 70%);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* Section header block — same construction in every section. */
.sechead { max-width: 780px; margin: 0 0 clamp(28px, 3vw, 44px); }
.sechead > :last-child { margin-bottom: 0; }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  text-decoration: none;
  text-align: center;
  transition: border-color .18s ease, background .18s ease, filter .18s ease;
}
.btn:hover { border-color: var(--line-highlight); background: var(--bg-4); color: var(--fg); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}
.btn.primary:hover { filter: brightness(1.08); color: var(--accent-text); }
.btn.wide { width: 100%; }

.ctanote {
  font-size: 12.5px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  margin: 14px 0 0;
}

/* -------------------------------------------------------------
   HERO — two equal halves, both vertically centred
   ------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--split-gap);
  align-items: center;
  padding-top: clamp(48px, 5.5vw, 84px);
  padding-bottom: clamp(48px, 5.5vw, 84px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -180px;
  left: -140px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.herotext { position: relative; z-index: 1; }

.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-pill-badge .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
  animation: pulse-dot 1.8s infinite ease-in-out;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.55; }
}

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
}

/* -------------------------------------------------------------
   LIVE BOARD — fixed column grid so every row aligns
   ------------------------------------------------------------- */
.board {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-highlight);
  border-radius: var(--panel-r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.boardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.boardtitle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.boardtitle::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 9px var(--accent-2);
  animation: pulse-dot 2s infinite ease-in-out;
}
.boardstand {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
}
.boardrows { display: flex; flex-direction: column; flex: 1; }

.brow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px 82px 40px 58px;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s ease;
  font-size: 13px;
}
.brow:last-child { border-bottom: 0; }
.brow:hover { background: rgba(255, 255, 255, 0.03); }
.brow.live { background: rgba(249, 115, 22, 0.05); }

.bwhere { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bwhere b {
  color: var(--fg);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bwhere i { font-style: normal; font-size: 11.5px; color: var(--fg-3); }
.bwhere .bcav {
  font-style: normal;
  font-size: 11px;
  color: var(--warn);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bwhere .bcav.clean { color: var(--fg-muted); }

.bfrist {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg-3);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
}
.brow.live .bfrist {
  color: var(--live);
  border-color: rgba(249, 115, 22, 0.35);
  background: var(--live-dim);
}
.bheat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bheat.hot { color: #fb923c; font-weight: 700; }
.bheat.cold { color: var(--fg-muted); }
.bprice { justify-self: center; height: 13px; }
.bdisc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--accent-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bdisc small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}
.conf-belastbar { background: rgba(16, 185, 129, 0.15); color: var(--accent-2); border: 1px solid rgba(16, 185, 129, 0.3); }
.conf-mittel { background: rgba(245, 158, 11, 0.15); color: var(--warn-2); border: 1px solid rgba(245, 158, 11, 0.3); }
.conf-grob, .conf-dünn { background: rgba(239, 68, 68, 0.12); color: var(--danger-2); border: 1px solid rgba(239, 68, 68, 0.25); }

.boardfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-3);
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-3);
}
.seal {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ink);
  color: #e2e8f0;
  box-shadow: 0 0 0 1px var(--line);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.boardempty { padding: 40px 20px; text-align: center; color: var(--fg-3); font-size: 13.5px; }

@media (max-width: 620px) {
  /* Zwei Zeilen je Eintrag: Ort + Abschlag, darunter die Frist. */
  .brow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding: 13px 14px; }
  .bwhere { grid-column: 1; grid-row: 1; }
  .bdisc { grid-column: 2; grid-row: 1; align-self: start; }
  .bfrist { grid-column: 1 / -1; grid-row: 2; justify-self: start; width: auto; text-align: left; }
  .bheat, .bprice { display: none; }
}

/* -------------------------------------------------------------
   KEY FIGURES — one strip, six equal cells, hairline dividers
   ------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  overflow: hidden;
}
.site main.landing > section.figures {
  padding: 0;
  border-top: 0;
  /* Das Panel ist hier die Section selbst — Seitenabstand muss außen liegen,
     sonst klafft er innerhalb des Rahmens vor der ersten und nach der letzten Zelle. */
  margin-inline: clamp(18px, 2.6vw, 48px);
  margin-bottom: var(--sec-y);
}
.fig {
  background: var(--bg-card);
  padding: 22px clamp(16px, 1.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background .18s ease;
}
.fig:hover { background: var(--bg-card-hover); }
.fig b {
  font-family: var(--font-mono);
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--fg);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.fig span { font-size: 11.5px; color: var(--fg-2); line-height: 1.45; }
.fig.held b { color: var(--warn-2); }

@media (max-width: 1080px) { .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fig { padding: 16px 14px; } }

/* -------------------------------------------------------------
   OPPORTUNITY CARDS — four equal cards, aligned internals
   ------------------------------------------------------------- */
.opp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.opp-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, border-color .22s ease;
}
.opp-card:hover { transform: translateY(-4px); border-color: var(--line-highlight); }
.opp-media {
  position: relative;
  min-height: 120px;
  overflow: hidden;
  background: radial-gradient(circle at 85% 15%, rgba(5, 150, 105, 0.08), transparent 50%),
              linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 14px 12px 14px;
}
[data-theme="dark"] .opp-media {
  background: radial-gradient(circle at 85% 15%, rgba(52, 211, 153, 0.12), transparent 50%),
              linear-gradient(145deg, #0f172a 0%, #090e17 100%);
}
.opp-dossier-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.7;
  pointer-events: none;
}
.opp-dossier-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.opp-court-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 5px;
  backdrop-filter: blur(4px);
}
.opp-dossier-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 20px;
}
.opp-file-tag {
  color: #64748b;
  font-family: var(--font-mono);
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.opp-file-tag b { color: #94a3b8; font-weight: 600; }
.opp-verified-stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #34d399;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: rgba(52, 211, 153, 0.08);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid rgba(52, 211, 153, 0.2);
}
.opp-badge {
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.opp-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 11px;
}
.opp-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
/* Two lines reserved so every card's location and price row start level. */
.opp-title { font-size: 15.5px; font-weight: 700; color: var(--fg); margin: 0; line-height: 1.35; min-height: 2.7em; }
.opp-location { font-size: 12.5px; color: var(--fg-3); }
.opp-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
}
.opp-prices div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opp-prices div + div { border-left: 1px solid var(--line); padding-left: 10px; }
.opp-prices span { color: var(--fg-3); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.opp-prices b { display: flex; align-items: center; height: 18px; font-family: var(--font-mono); color: var(--fg); font-size: 12.5px; white-space: nowrap; }
.opp-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-3);
}
.opp-btn {
  flex: 0 0 auto;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.opp-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-2); }

@media (max-width: 1100px) { .opp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .opp-grid { grid-template-columns: 1fr; } .opp-title { min-height: 0; } }

/* -------------------------------------------------------------
   SAMPLE OBJECT CARD — two equal halves
   ------------------------------------------------------------- */
.sample {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--split-gap);
  align-items: start;
}
.sampletext { position: sticky; top: var(--sticky-top); }
.samplecard { position: relative; }

.samplecard .card.locked {
  background: var(--panel);
  border: 1px solid var(--line-highlight);
  border-radius: var(--panel-r);
  padding: 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.samplecard .cardtop { display: flex; align-items: center; justify-content: space-between; }
.samplecard .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
}
.samplecard .status.live { background: var(--live-dim); color: var(--live); border: 1px solid rgba(249, 115, 22, 0.4); }
.samplecard .status.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 6px var(--live); }
.samplecard .status.soon { background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.samplecard .star { font-size: 17px; color: var(--fg-3); }
.samplecard .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.samplecard .tag,
.opp-chips .tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--bg-3);
  color: var(--fg-2);
  border: 1px solid var(--line);
}
.samplecard .tag.icra, .opp-chips .tag.icra { background: rgba(239, 68, 68, 0.14); color: var(--danger-2); border-color: rgba(239, 68, 68, 0.32); }
.samplecard .tag.ihale, .opp-chips .tag.ihale { background: rgba(56, 189, 248, 0.14); color: var(--info); border-color: rgba(56, 189, 248, 0.32); }
.samplecard .tag.seg, .opp-chips .tag.seg { background: rgba(255, 255, 255, 0.05); color: var(--fg); font-family: var(--font-sans); letter-spacing: 0; }
.samplecard .tag.conf-belastbar, .opp-chips .tag.conf-belastbar { background: rgba(16, 185, 129, 0.13); color: var(--accent-2); border-color: rgba(16, 185, 129, 0.32); }
.samplecard .tag.warn, .opp-chips .tag.warn { background: rgba(245, 158, 11, 0.13); color: var(--warn-2); border-color: rgba(245, 158, 11, 0.32); }

.samplecard .where { font-size: 14px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 6px; }
/* Schwärzung: schwarzer Marker-Balken, in beiden Themes gleich — kein Lade-Shimmer. */
:root { --ink: #0b0f19; }
.redact {
  display: inline-block;
  height: 14px;
  max-width: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 6px),
    var(--ink);
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 3px;
  vertical-align: middle;
  cursor: help;
}
.redact.tall { height: 28px; }
.opp-court-badge .redact, .opp-file-tag .redact { height: 11px; }

.samplecard .priceblock {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.samplecard .pricecol { display: flex; flex-direction: column; gap: 6px; }
.samplecard .price-note { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); }
.samplecard .discount.best {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 800;
  color: var(--accent-2);
  letter-spacing: -0.04em;
  line-height: 1;
}
.samplecard .discount.best small {
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-family: var(--font-sans);
  margin-top: 5px;
}
.samplecard .discount.best .netto { font-style: normal; font-size: 11px; color: var(--warn-2); margin-top: 3px; }

.samplecard .bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.samplecard .barrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) 92px; align-items: center; gap: 10px; }
.samplecard .barlabel { color: var(--fg-3); font-size: 11.5px; }
.samplecard .bartrack { height: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; }
.samplecard .bartrack i { display: block; height: 100%; border-radius: 4px; min-width: 3px; }
.samplecard .bartrack i.bid { background: var(--accent); }
.samplecard .bartrack i.allin { background: var(--warn); }
.samplecard .bartrack i.mkt { background: var(--fg-3); }
.samplecard .barval { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }

.samplecard .quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 20px;
  font-size: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.samplecard .quick div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.samplecard .quick span:first-child { color: var(--fg-3); white-space: nowrap; }
.samplecard .quick span:last-child { font-family: var(--font-mono); color: var(--fg-2); font-weight: 500; text-align: right; }

.samplecard .against {
  padding: 13px 16px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
}
.samplecard .against b {
  display: block;
  color: var(--warn-2);
  font-size: 11px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--font-mono);
}
.samplecard .against ul { margin: 0; padding-left: 16px; color: var(--fg-2); line-height: 1.5; }
.samplecard .against li { margin-bottom: 4px; }
.samplecard .against li i { font-style: normal; font-weight: 600; color: var(--fg); display: block; }
.samplecard .against.clean { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.25); border-left-color: var(--accent); }
.samplecard .against.clean b { color: var(--accent-2); margin-bottom: 0; }

.samplecard .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lockedbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  background: var(--bg-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 1000px) {
  .sample { grid-template-columns: 1fr; }
  .sampletext { position: static; }
}
@media (max-width: 620px) {
  .samplecard .card.locked { padding: 18px; }
  /* Zwei Spalten kollidieren hier — Label und Wert brauchen die volle Breite. */
  .samplecard .quick { grid-template-columns: 1fr; }
  .samplecard .actions { grid-template-columns: 1fr; }
  .samplecard .barrow { grid-template-columns: 62px minmax(0, 1fr) 82px; gap: 8px; }
  .samplecard .priceblock { flex-direction: column; align-items: flex-start; gap: 12px; }
  .samplecard .discount.best { align-items: flex-start; }
}

/* -------------------------------------------------------------
   DATA PROOF — head, histogram, map + leaderboard
   ------------------------------------------------------------- */
.proofhead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--split-gap);
  align-items: stretch;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.proofhead-text { display: flex; flex-direction: column; justify-content: center; }
.proofhead-text .lede { max-width: 72ch; }
/* Equal rows keep both notes the same height whatever the copy length. */
.proofhead-notes { display: grid; grid-auto-rows: 1fr; gap: 14px; }

.costnote-box, .costnote,
.agenote-box, .agenote {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.55;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.costnote-box, .costnote {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09), rgba(245, 158, 11, 0.02));
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 3px solid var(--warn);
}
.agenote-box, .agenote {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.09), rgba(56, 189, 248, 0.02));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-left: 3px solid var(--info);
}
.costnote-box b, .costnote b,
.agenote-box b, .agenote b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.costnote-box b, .costnote b { color: var(--warn-2); }
.agenote-box b, .agenote b { color: var(--info); }

@media (max-width: 900px) { .proofhead-grid { grid-template-columns: 1fr; } }

.chart {
  margin: 0 0 clamp(28px, 3vw, 44px);
  padding: 26px 24px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  box-shadow: var(--shadow-card);
}
.chartbars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  height: 236px;
  /* Room for the axis labels that sit under the baseline. */
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-highlight);
}
.cbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  transition: transform .18s ease;
}
.cbar:hover { transform: translateY(-3px); }
.cbar b {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.cbar:hover b { color: var(--fg); }
.cbar i {
  display: block;
  width: 100%;
  height: var(--h, 10%);
  min-height: 4px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.55), rgba(16, 185, 129, 0.16));
  border-radius: 5px 5px 0 0;
  border-top: 2px solid var(--accent);
}
.cbar.median i {
  background: linear-gradient(180deg, var(--accent-2), rgba(16, 185, 129, 0.35));
  border-top-color: #fff;
}
.cbar.median b { color: var(--accent-2); font-weight: 700; }
.cbar.over i { background: linear-gradient(180deg, rgba(239, 68, 68, 0.45), rgba(239, 68, 68, 0.12)); border-top-color: var(--danger); }
.cbar span {
  position: absolute;
  bottom: -22px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.chart figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--fg-3);
}
.medianflag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-2);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Map and leaderboard stretch to the same height — no dead column. */
.countyblock {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 20px;
  align-items: stretch;
}
.countyside {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.countyhead { margin-bottom: 14px; }
.countyhead h4 { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: var(--fg); }
.countyhead p { margin: 0; font-size: 12.5px; color: var(--fg-3); }

.map-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.map-filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.map-filter-btn:hover, .map-filter-btn.active {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.5);
  color: var(--accent-2);
}

.mapfig {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#leaflet-map {
  width: 100%;
  flex: 1;
  min-height: 420px;
  border-radius: var(--radius-sm);
  background: #06090e;
  border: 1px solid var(--line);
  z-index: 1;
}
#mapcap { margin-top: 12px; font-size: 11.5px; color: var(--fg-3); line-height: 1.5; }

.radar-marker { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.radar-marker .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 10px var(--accent);
  z-index: 2;
}
.radar-marker .pulse {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.4);
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  z-index: 1;
}
@keyframes radar-ping {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.leaflet-popup-content-wrapper {
  background: rgba(10, 14, 22, 0.96) !important;
  border: 1px solid var(--line-highlight) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8) !important;
}
.leaflet-popup-tip { background: rgba(10, 14, 22, 0.96) !important; }
.map-popup-title { font-size: 13.5px; font-weight: 700; color: var(--fg); margin-bottom: 5px; }
.map-popup-stat { font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); font-weight: 700; }

ol.counties {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 8px;
}
ol.counties li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 68px 48px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  transition: background .15s ease, border-color .15s ease;
  font-size: 13px;
}
ol.counties li:hover { border-color: var(--line-highlight); background: var(--bg-card-hover); }
.cname { display: flex; flex-direction: column; min-width: 0; }
.cname b { color: var(--fg); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cname i { font-style: normal; font-size: 10.5px; letter-spacing: .04em; color: var(--fg-3); }
.ctrack { height: 6px; background: rgba(255, 255, 255, 0.07); border-radius: 3px; overflow: hidden; }
.ctrack i { display: block; height: 100%; background: var(--accent); border-radius: 3px; min-width: 3px; }
.ccount { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); text-align: right; font-variant-numeric: tabular-nums; }
.ccount small { font-size: 9.5px; color: var(--fg-3); }
.cmed { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: var(--accent-2); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .countyblock { grid-template-columns: 1fr; }
  ol.counties { grid-auto-rows: auto; }
}
@media (max-width: 560px) {
  ol.counties li { grid-template-columns: minmax(0, 1fr) 60px 46px; }
  .ctrack { display: none; }
}

/* -------------------------------------------------------------
   METHOD — three equal steps
   ------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.step {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, border-color .18s ease;
}
.step:hover { transform: translateY(-3px); border-color: var(--line-highlight); }
.stepno {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-dim);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 5px 11px;
  border-radius: var(--radius-xs);
  margin-bottom: 16px;
}
.step h4 { font-size: 17.5px; font-weight: 700; margin: 0 0 10px; color: var(--fg); line-height: 1.3; }
.step p { margin: 0; font-size: 13.5px; color: var(--fg-2); line-height: 1.6; }

.honest {
  padding: 20px 24px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--panel-r);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.honest b { color: var(--accent-2); font-size: 14px; font-weight: 700; }
.honest span { max-width: 92ch; font-size: 13.5px; color: var(--fg-2); line-height: 1.6; }

@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 14px; } }

/* -------------------------------------------------------------
   GRENZEN DER EIGENEN ZAHLEN
   Bewusst als Liste statt als Kartenraster: das ist eine Bilanz,
   keine Auswahl. Die Zahl steht links in ihrer eigenen Spalte,
   damit die vier Posten beim Überfliegen eine Spalte bilden.
   ------------------------------------------------------------- */
.ledger {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.ledger li {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 4px 28px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.ledger-n {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 700;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ledger-t {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.35;
}
.ledger-p {
  max-width: 78ch;
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.65;
}

@media (max-width: 760px) {
  .ledger li {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  /* Auf dem Telefon steht die Zahl über ihrer Zeile — eine eigene
     Zahlenspalte ließe für den Satz daneben keine lesbare Breite. */
  .ledger-n { grid-row: auto; font-size: 21px; }
}

/* -------------------------------------------------------------
   COMPARISON MATRIX
   ------------------------------------------------------------- */
.matrix-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.matrix-table th, .matrix-table td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: top;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
  border-bottom: 1px solid var(--line-soft);
}
.matrix-table col:first-child, .matrix-table th:first-child { width: 30%; }
.matrix-table th {
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.matrix-table td b { display: block; color: var(--fg); }
.matrix-table th.bm-col, .matrix-table td.bm-col {
  background: rgba(16, 185, 129, 0.05);
  color: var(--fg);
}
.matrix-table th.bm-col { color: var(--accent-2); }
.matrix-table tr:last-child td { border-bottom: none; }
.check-yes { color: var(--accent-2); font-weight: 700; font-family: var(--font-mono); margin-right: 4px; }
.check-no { color: var(--danger-2); font-family: var(--font-mono); margin-right: 4px; }

@media (max-width: 760px) {
  .matrix-table, .matrix-table tbody, .matrix-table tr, .matrix-table td { display: block; width: 100%; }
  .matrix-table thead { display: none; }
  .matrix-table tr { border-bottom: 1px solid var(--line); }
  .matrix-table tr:last-child { border-bottom: 0; }
  .matrix-table td { border-bottom: 0; padding: 6px 18px; }
  .matrix-table td:first-child { padding-top: 16px; }
  .matrix-table td:last-child { padding-bottom: 16px; }
}

/* -------------------------------------------------------------
   FAQ
   ------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--split-gap);
  align-items: start;
}
.faq-side { position: sticky; top: var(--sticky-top); }
.faq-legal-card {
  margin-top: 24px;
  background: var(--panel);
  border: 1px solid var(--line-highlight);
  border-radius: var(--panel-r);
  padding: 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-legal-card h4 { font-size: 14.5px; font-weight: 700; color: var(--fg); margin: 0; display: flex; align-items: center; gap: 8px; }
.faq-legal-card p { font-size: 13px; color: var(--fg-2); line-height: 1.55; margin: 0; }
.faq-legal-links { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-legal-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-2);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.faq-legal-links a:hover { background: rgba(16, 185, 129, 0.2); border-color: var(--accent-2); color: var(--accent-2); }
.faq-contact-box {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.faq-contact-box a { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--info); text-decoration: none; white-space: nowrap; }
.faq-contact-box a:hover { text-decoration: underline; }

.qlist { display: flex; flex-direction: column; gap: 10px; }
.qlist details {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease;
}
.qlist details[open] { border-color: var(--line-highlight); background: var(--bg-card-hover); }
.qlist summary {
  padding: 17px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
}
.qlist summary::-webkit-details-marker { display: none; }
.qlist summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-2);
}
.qlist details[open] summary::after { content: '−'; }
.qlist p { padding: 0 22px 16px; margin: 0; max-width: 82ch; font-size: 13.5px; color: var(--fg-2); line-height: 1.65; }
.qlist .qsrc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--line-soft);
}
.qlist .qsrc b { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); }
.qlist .qsrc a {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--info);
  font-size: 11.5px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.qlist .qsrc a:hover { border-color: var(--info); background: var(--info-dim); color: var(--info); }
.qlist details.open-question { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.04); }

@media (max-width: 980px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
}

/* -------------------------------------------------------------
   SOURCES
   ------------------------------------------------------------- */
.srclist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
.srclist div {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.srclist dt { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--fg); word-break: break-word; }
.srclist dd { margin: 0; font-size: 12.5px; color: var(--fg-3); line-height: 1.55; }
@media (max-width: 960px) { .srclist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .srclist { grid-template-columns: 1fr; } }
/* -------------------------------------------------------------
   AUTH VIEW STYLES (LOGIN.HTML)
   ------------------------------------------------------------- */
.authshell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 56px;
  padding: 72px 24px;
  align-items: center;
  min-height: calc(100vh - 200px);
}
.authside {
  display: flex;
  flex-direction: column;
}
.authlist {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.authlist li {
  position: relative;
  padding-left: 24px;
  color: var(--fg-2);
  font-size: 14px;
}
.authlist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-2);
  font-weight: 700;
}

.card-auth {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 36px 32px;
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .card-auth {
  border-color: var(--line-highlight);
  background: linear-gradient(155deg, rgba(16, 23, 36, 0.95), rgba(10, 14, 22, 0.98));
  box-shadow: var(--shadow-modal);
}
.authtabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 24px;
}
.authtabs button {
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
}
.authtabs button[aria-selected="true"] {
  background: var(--bg-4);
  color: var(--fg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.card-auth form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-auth label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-auth label .hint {
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 400;
}
.card-auth input[type="email"],
.card-auth input[type="password"],
.card-auth input[type="text"] {
  width: 100%;
  height: 46px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card-auth input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.markets {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 4px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.markets legend {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 6px;
}
.markets .radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}
.markets .radio i {
  font-style: normal;
  color: var(--accent-2);
  font-size: 11px;
}
.market-access-note {
  margin: 8px 0 0;
  color: var(--fg-3);
  font-size: 11.5px;
  line-height: 1.55;
}
.markets .market-access-note {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.user-dropdown-section .market-access-note {
  margin-top: 9px;
}

.formerr {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-sm);
  color: var(--danger-2);
  font-size: 12.5px;
  margin: 8px 0 0;
}

/* Kündigungsseite: Die Bestätigung ist ein Nachweis. Deshalb ist das Formular
   bewusst ruhig, klar gegliedert und mit gut sichtbaren Eingabefehlern gesetzt. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.legal #cancelform,
.legal #withdrawform {
  display: grid;
  gap: 10px;
  max-width: 680px;
  margin: 24px 0 18px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--line-highlight);
  border-radius: var(--radius);
}
.legal #cancelform h3,
.legal #withdrawform h3 {
  margin: 12px 0 2px;
  font-size: 15px;
}
.legal #cancelform h3:first-child,
.legal #withdrawform h3:first-child { margin-top: 0; }
.legal #cancelform label:not(.radio),
.legal #withdrawform label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 650;
}
.legal #cancelform .hint,
.legal #withdrawform .hint {
  flex: 0 1 auto;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 400;
  text-align: right;
}
.legal #cancelform input[type="email"],
.legal #cancelform input[type="text"],
.legal #cancelform textarea,
.legal #withdrawform input[type="email"],
.legal #withdrawform input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.legal #cancelform input[type="email"],
.legal #cancelform input[type="text"],
.legal #withdrawform input[type="email"],
.legal #withdrawform input[type="text"] {
  min-height: 46px;
  padding: 0 13px;
}
.legal #cancelform textarea {
  min-height: 92px;
  padding: 11px 13px;
  line-height: 1.5;
  resize: vertical;
}
.legal #cancelform input:focus,
.legal #cancelform textarea:focus,
.legal #withdrawform input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.legal #cancelform [aria-invalid="true"],
.legal #withdrawform [aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-dim);
}
.legal #cancelform #reasonwrap { display: grid; gap: 10px; }
.legal #cancelform .sidenote,
.legal #withdrawform .sidenote {
  margin: -4px 0 4px;
  color: var(--fg-3);
  font-size: 11.5px;
  line-height: 1.5;
}
.legal #form > .sidenote {
  max-width: 680px;
  margin: 0;
  color: var(--fg-3);
  font-size: 12.5px;
  line-height: 1.6;
}
.legal #done,
.legal #withdraw-done { max-width: 680px; }
.legal #outcome {
  border-left: 3px solid var(--accent);
  margin: 16px 0;
  padding: 10px 14px;
  background: var(--accent-dim);
  color: var(--fg);
  line-height: 1.6;
}
@media (max-width: 560px) {
  .legal #cancelform,
  .legal #withdrawform { padding: 18px; }
  .legal #cancelform label:not(.radio),
  .legal #withdrawform label { align-items: flex-start; flex-direction: column; gap: 3px; }
  .legal #cancelform .hint,
  .legal #withdrawform .hint { text-align: left; }
}
.planfoot {
  font-size: 11.5px;
  color: var(--fg-3);
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .authshell { grid-template-columns: 1fr; gap: 36px; padding: 40px 16px; }
}

/* -------------------------------------------------------------
   LEGAL VIEW STYLES (RECHT.HTML)
   ------------------------------------------------------------- */
.legalshell {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
.draftnote, .trnote {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
  margin: 24px 0;
}
.draftnote {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--fg);
}
.draftnote b { color: var(--danger-2); }
.trnote {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--fg);
}
.trnote b { color: var(--info); }

.legalshell section {
  margin: 48px 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.legalshell h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--fg);
  margin: 0 0 6px;
}
.legalshell h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 28px 0 10px;
}
.legalshell p {
  font-size: 14.5px;
  color: var(--fg-2);
  line-height: 1.7;
  margin: 0 0 14px;
}
.legalshell .basis {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 24px;
}
.legalfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.legalfacts div {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.legalfacts dt {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 700;
  margin-bottom: 4px;
}
.legalfacts dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--fg);
}
.ph {
  color: var(--danger-2);
  background: rgba(239, 68, 68, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
}

/* -------------------------------------------------------------
   TKGM LIVE CADASTRE & SATELLITE VIEWER
   ------------------------------------------------------------- */

.tkgm-live-box {
  background: var(--bg-3);
  border: 1px solid var(--border-emerald);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tkgm-live-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tkgm-detail-map {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-sm);
  background: #0b1118;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
}
.tkgm-live-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  font-size: 12px;
}
.tkgm-live-item {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.tkgm-live-item label {
  color: var(--fg-3);
  font-size: 10.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}
.tkgm-live-item b {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.tkgm-polygon-label {
  background: rgba(10, 14, 20, 0.94) !important;
  color: #ffffff !important;
  border: 1px solid #ef4444 !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(239, 68, 68, 0.3) !important;
  text-align: center;
}
.tkgm-polygon-label::before {
  display: none !important;
}

/* ================================================================
   9. PUBLIC PRICING — RECHERCHEZUGANG, NICHT PREISTABELLE
   ================================================================ */

.pricing-intro { max-width: 720px; }
.pricing-lede { max-width: 62ch; margin: 0; color: var(--fg-2); font-size: 16px; line-height: 1.65; }

/* The evidence chain: three equal steps on one continuous rail. */
.pricing-proofline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: clamp(32px, 3.4vw, 48px) 0 clamp(24px, 2.6vw, 36px);
}
.pricing-proofline li {
  position: relative;
  min-width: 0;
  padding: 24px 22px 0 0;
  border-top: 1px solid var(--line-highlight);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.pricing-proofline li:last-child { padding-right: 0; }
/* Tick mark on the rail at the start of each step. */
.pricing-proofline li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 9px;
  background: var(--line-highlight);
}
.pricing-proof-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 22px;
  margin-top: -35px;
  border: 1px solid var(--line-highlight);
  background: var(--bg);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.pricing-proof-mark.source { border-color: rgba(52, 211, 153, .55); color: var(--accent-2); }
.pricing-proof-mark.compare { border-color: rgba(245, 158, 11, .55); color: var(--warn-2); }
.pricing-proof-mark.decision { border-color: rgba(239, 68, 68, .65); color: var(--danger-2); }
.pricing-proofline b, .pricing-proofline small { display: block; }
.pricing-proofline b { color: var(--fg); font-size: 12.5px; letter-spacing: .01em; }
.pricing-proofline small { margin-top: 3px; color: var(--fg-2); font-size: 11.5px; line-height: 1.4; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 26px 24px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, border-color .22s ease;
}
.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: rgba(255, 255, 255, .08);
}
.pricing-card:hover { transform: translateY(-4px); border-color: var(--line-highlight); }

/* Fixed blocks: tier, price, alt-price. Feature lists start on the same
   line in all three cards, and the CTA row is flush at the bottom. */
.pricing-card-top { min-height: 76px; padding-right: 90px; }
.pricing-tier {
  display: block;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pricing-card-top p { margin: 8px 0 0; color: var(--fg-2); font-size: 13px; line-height: 1.45; }
.pricing-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 74px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line-soft);
}
.pricing-price b {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 600;
  letter-spacing: -.03em;
  /* Das Leerzeichen vor dem € ist im Mono-Font sonst so breit wie eine Ziffer. */
  word-spacing: -.34em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pricing-price span { color: var(--fg-3); font-size: 12px; line-height: 1.3; }
.pricing-alt { min-height: 22px; margin: 0 0 18px; color: var(--fg-2); font-size: 12px; }
.pricing-alt b { color: var(--accent-2); font-family: var(--font-mono); }
/* Cards without an alternative price still reserve the same slot. */
.pricing-card > .pricing-price + .pricing-list { margin-top: 22px; }

.pricing-list { display: grid; gap: 11px; padding: 0; margin: 0 0 24px; list-style: none; }
.pricing-list li { position: relative; padding-left: 19px; color: var(--fg-2); font-size: 12.5px; line-height: 1.5; }
.pricing-list li::before {
  content: '';
  position: absolute;
  top: .5em;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--fg-3);
  transform: rotate(45deg);
}
.pricing-cta { width: 100%; margin-top: auto; }
.pricing-foot { min-height: 30px; margin: 12px 0 0; color: var(--fg-3); font-size: 11px; line-height: 1.45; }

.pricing-investor {
  border-color: rgba(16, 185, 129, .5);
  background:
    linear-gradient(150deg, rgba(16, 185, 129, .1), transparent 44%),
    linear-gradient(158deg, rgba(20, 29, 44, .86), rgba(11, 16, 25, .97) 60%);
}
.pricing-investor::before { background: var(--accent); }
.pricing-investor .pricing-tier { color: var(--accent-2); }
.pricing-investor .pricing-list li::before { border-color: var(--accent-2); }
.pricing-ribbon {
  position: absolute;
  top: 3px;
  right: 0;
  padding: 6px 12px 7px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0 0 0 8px;
}
.pricing-pro::before { background: var(--info); }
.pricing-pro .pricing-tier { color: var(--info); }
.pricing-pro .pricing-list li::before { border-color: var(--info); }
.pricing-pro .pricing-cta { border-color: rgba(56, 189, 248, .4); color: var(--fg); }
.pricing-pro .pricing-cta:hover { border-color: var(--info); }

.pricing-disclaimer {
  max-width: 110ch;
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  padding: 14px 18px;
  border-left: 2px solid rgba(245, 158, 11, .8);
  background: rgba(245, 158, 11, .04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-pro { grid-column: span 2; }
  .pricing-pro .pricing-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-card-top { padding-right: 24px; }
  .pricing-investor .pricing-card-top { padding-right: 90px; }
}
@media (max-width: 680px) {
  .pricing-proofline {
    grid-template-columns: 1fr;
    gap: 16px;
    border-left: 1px solid var(--line-highlight);
    padding-left: 20px;
  }
  .pricing-proofline li { padding: 0; border-top: 0; }
  .pricing-proofline li::after { display: none; }
  .pricing-proof-mark { margin: 0 0 0 -35px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; }
  .pricing-pro { grid-column: auto; }
  .pricing-pro .pricing-list { grid-template-columns: 1fr; }
  .pricing-card-top { min-height: auto; padding-right: 24px; }
  .pricing-investor .pricing-card-top { padding-right: 90px; }
  .pricing-price { min-height: 0; }
}
/* Investor checkout keeps the choice deliberate: one market, one cadence. */
.billing-dialog {
  width: min(100% - 32px, 540px);
  padding: 0;
  overflow: hidden;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--line-highlight);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
}
.billing-dialog::backdrop { background: rgba(3, 6, 10, .78); backdrop-filter: blur(5px); }
.billing-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(16, 185, 129, .13), transparent 62%);
}
.billing-kicker {
  margin: 0 0 5px;
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.billing-dialog h3 {
  margin: 0;
  color: var(--fg);
  font-size: 21px;
  letter-spacing: -.03em;
}
.billing-dialog-lede {
  margin: 0;
  padding: 18px 24px 14px;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.55;
}
.billing-options {
  display: grid;
  gap: 10px;
  padding: 0 24px;
}
.billing-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 78px;
  padding: 14px 16px;
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.billing-option:hover {
  transform: translateY(-1px);
  background: var(--bg-card-hover);
  border-color: var(--line-highlight);
}
.billing-option.featured {
  border-color: rgba(16, 185, 129, .48);
  background: rgba(16, 185, 129, .08);
}
.billing-option-copy { display: grid; gap: 3px; }
.billing-option-copy b { font-size: 13px; }
.billing-option-copy small,
.billing-option strong small {
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 500;
}
.billing-option strong {
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.05em;
  white-space: nowrap;
}
.billing-option strong small { margin-left: 3px; font-family: var(--font-sans); letter-spacing: 0; }
.billing-option:disabled { cursor: not-allowed; opacity: .66; }
.billing-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 24px 0;
  padding: 12px;
  color: var(--fg-2);
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.45;
  cursor: pointer;
}
.billing-consent:focus-within { border-color: var(--accent-2); }
.billing-consent input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent-2);
}
.billing-consent-copy { display: grid; gap: 3px; }
.billing-consent-copy b { color: var(--fg); font-size: 11px; }
.billing-consent-copy a { color: var(--info); }
.billing-dialog-foot {
  margin: 16px 24px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--fg-3);
  font-size: 10.5px;
  line-height: 1.5;
}
.billing-pro-link {
  display: inline-flex;
  margin: 14px 24px 22px;
  color: var(--info);
  font-size: 12px;
  font-weight: 600;
}
.billing-dialog .close-x {
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .billing-dialog-head,
  .billing-dialog-lede { padding-left: 18px; padding-right: 18px; }
  .billing-options { padding: 0 18px; }
  .billing-consent { margin-left: 18px; margin-right: 18px; }
  .billing-dialog-foot { margin-left: 18px; margin-right: 18px; }
  .billing-pro-link { margin-left: 18px; }
  .billing-option { padding: 13px; }
}

/* ================================================================
   DASHBOARD 2 — TÜRKİYE

   Bir kural: her sekmenin kendi işi ve kendi rengi var. Aynı kart iki
   sekmede birden görünmez. Ortak olan tek şey parsel penceresi (.pv),
   çünkü satılan şey her yerde aynı şey — tapudaki bir kayıt.

   Sekmenin rengi <body data-pane="…"> üzerinden gelir; aşağıdaki her
   bileşen --pane değişkenini okur, kendi rengini seçmez.
   ================================================================ */

:root {
  --pane: var(--accent);
  --pane-2: var(--accent-2);
  --pane-dim: var(--accent-dim);
  --violet: #a78bfa;
  --violet-dim: rgba(167, 139, 250, 0.14);
  --hair: rgba(255, 255, 255, 0.07);
}

body[data-pane="discover"] { --pane: #f97316; --pane-2: #fb923c; --pane-dim: rgba(249, 115, 22, .14); }
body[data-pane="auctions"] { --pane: #10b981; --pane-2: #34d399; --pane-dim: rgba(16, 185, 129, .14); }
body[data-pane="market"]   { --pane: #38bdf8; --pane-2: #7dd3fc; --pane-dim: rgba(56, 189, 248, .13); }
body[data-pane="watch"]    { --pane: #a78bfa; --pane-2: #c4b5fd; --pane-dim: rgba(167, 139, 250, .14); }
body[data-pane="about"]    { --pane: #94a3b8; --pane-2: #cbd5e1; --pane-dim: rgba(148, 163, 184, .12); }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Sekmeler */

body[data-pane] .tabs.desktop-tabs {
  gap: 2px;
  margin-top: 10px;
  border-bottom: 1px solid var(--hair);
}
body[data-pane] .tabs button {
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px 11px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}
body[data-pane] .tabs button .tab-icon {
  font-size: 13px;
  line-height: 1.35;
  opacity: .55;
  transition: color .18s ease, opacity .18s ease;
}
.tab-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.tab-copy b { font-size: 13.5px; font-weight: 700; }
.tab-copy small {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: .01em;
}
body[data-pane] .tabs button:hover { background: rgba(255, 255, 255, .025); color: var(--fg-2); }
body[data-pane] .tabs button[aria-selected="true"] {
  color: var(--fg);
  background: transparent;
  border-bottom-color: var(--tab-c, var(--accent));
}
body[data-pane] .tabs button[aria-selected="true"] .tab-icon { opacity: 1; color: var(--tab-c, var(--accent)); }
body[data-pane] .tabs button[aria-selected="true"] .tab-copy small { color: var(--fg-3); }
#nav-discover { --tab-c: #f97316; }
#nav-auctions { --tab-c: #10b981; }
#nav-market   { --tab-c: #38bdf8; }
#nav-watch    { --tab-c: #a78bfa; }
#nav-about    { --tab-c: #94a3b8; }

/* ---------------------------------------------------------------- Bölüm başlığı */

.tabpane { padding-top: 22px; }
.tabpane.hidden { display: none; }

.pane-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hair);
}
.pane-head-copy { max-width: 64ch; }
.pane-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pane);
}
.pane-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--pane);
  border-radius: 2px;
}
.pane-head h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.12;
}
.pane-lede {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.62;
  color: var(--fg-2);
}
.pane-head-meta {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.pane-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: .02em;
}
.pane-meta-item b {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.pane-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 64px 4px;
  color: var(--fg-3);
  font-size: 14px;
}
.pane-loading-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--hair);
  border-top-color: var(--pane);
  animation: pane-spin .9s linear infinite;
}
@keyframes pane-spin { to { transform: rotate(360deg); } }

/* ================================================================
   PARSEL PENCERESİ — bu uygulamanın imzası
   ================================================================ */

.pv {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #0b1119;
  isolation: isolate;
}
.pv-plan,
.pv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.pv::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to top, rgba(4, 7, 12, .88), rgba(4, 7, 12, 0));
  pointer-events: none;
}
.pv-stamp {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  color: #e2e8f0;
  background: rgba(6, 8, 13, .72);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
  padding: 3px 7px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.pv-precision {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(6, 8, 13, .74);
  border: 1px solid currentColor;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.pv-precision::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.pv-exact .pv-precision { color: var(--accent-2); }
.pv-approx .pv-precision { color: var(--warn-2); }
.pv-none .pv-precision { color: var(--fg-3); }

/* Kesin koordinat varken ortada bir artı işareti: resmin ortası taşınmazdır. */
.pv-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  z-index: 2;
  pointer-events: none;
}
.pv-cross::before,
.pv-cross::after {
  content: "";
  position: absolute;
  background: var(--accent-2);
  box-shadow: 0 0 0 1px rgba(4, 7, 12, .6);
}
.pv-cross::before { left: 50%; top: 0; width: 1.5px; height: 100%; margin-left: -.75px; }
.pv-cross::after { top: 50%; left: 0; height: 1.5px; width: 100%; margin-top: -.75px; }

.pv-thumb { aspect-ratio: 16 / 9; border-radius: 9px; }
.pv-thumb .pv-precision { font-size: 0; gap: 0; padding: 4px; border-radius: 50%; }
.pv-thumb .pv-precision::before { width: 5px; height: 5px; }
.pv-thumb .pv-stamp { font-size: 8.5px; letter-spacing: .08em; padding: 2px 5px; left: 5px; bottom: 5px; }
.pv-thumb .pv-cross { width: 16px; height: 16px; margin: -8px 0 0 -8px; }

/* ================================================================
   1. BUGÜN — triyaj tablosu
   ================================================================ */

.tri-head { padding: 6px 0 28px; }
.tri-date {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pane);
}
.tri-head h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.tri-head h1 span { color: var(--pane); }
.tri-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-2);
}
.tri-lede b { color: var(--fg); font-weight: 700; }

.tri-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 34px;
}
.tri-fig {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  padding: 15px 16px 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--tone, var(--fg-muted));
  border-radius: 4px 12px 12px 4px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.tri-fig:hover { transform: translateY(-2px); border-color: var(--tone); background: var(--bg-card-hover); }
.tri-fig b {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--tone, var(--fg));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tri-fig span { font-size: 11.5px; color: var(--fg-3); line-height: 1.35; }
.tri-fig.tone-live { --tone: #f97316; }
.tri-fig.tone-warn { --tone: #fbbf24; }
.tri-fig.tone-info { --tone: #38bdf8; }
.tri-fig.tone-accent { --tone: #34d399; }

.tri-section { margin-bottom: 34px; }
.tri-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.tri-sec-head h2 {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.tri-sec-head p { margin: 0; font-size: 12.5px; color: var(--fg-3); }
.tri-link {
  background: none;
  border: 0;
  color: var(--pane);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 0;
}
.tri-link:hover { text-decoration: underline; }
.tri-nothing {
  margin: 0;
  padding: 28px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
  border: 1px dashed var(--hair);
  border-radius: 12px;
}

.tri-board {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
.tri-row {
  display: grid;
  grid-template-columns: 40px 116px minmax(0, 1fr) 78px 132px 72px auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  transition: background .16s ease;
}
.tri-row:first-child { border-top: 0; }
.tri-row:hover { background: rgba(255, 255, 255, .022); }
.tri-row.is-live { box-shadow: inset 2px 0 0 var(--live); }
.tri-rank {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: .04em;
}
.tri-view { width: 116px; }
.tri-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tri-main > b {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tri-main > small { font-size: 11.5px; color: var(--fg-3); }
.tri-main .mono { font-size: 10.5px; letter-spacing: .06em; }
.tri-why {
  font-size: 11px;
  color: var(--warn-2);
  line-height: 1.3;
  margin-top: 2px;
}
.tri-why.ok { color: var(--accent-2); }
.tri-disc { text-align: right; }
.tri-disc b {
  display: block;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tri-disc small { font-size: 10px; color: var(--fg-muted); font-family: var(--font-mono); }
.tri-money { text-align: right; }
.tri-money b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tri-money small { font-size: 10.5px; color: var(--fg-3); }
.tri-when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-2);
  text-align: right;
}
.tri-when.live { color: var(--live); font-weight: 600; }
.tri-act { display: flex; gap: 6px; align-items: center; }

.tri-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.tri-closing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tri-close-card {
  display: block;
  text-align: left;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.tri-close-card:hover { border-color: var(--line-highlight); transform: translateY(-2px); }
.tri-close-card .pv { border-radius: 0; }
.tri-close-body { display: block; padding: 11px 13px 13px; }
.tri-close-body b { display: block; font-size: 13.5px; font-weight: 700; }
.tri-close-body small { display: block; font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.tri-close-num {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tri-close-num i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--live);
}

.tri-density {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
.tri-dens-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 44px 40px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
}
.tri-dens-row:first-child { border-top: 0; }
.tri-dens-row:hover { background: rgba(255, 255, 255, .025); }
.tri-dens-name { font-size: 12.5px; font-weight: 600; }
.tri-dens-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.tri-dens-track i { display: block; height: 100%; background: var(--pane); border-radius: 3px; }
.tri-dens-n {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.tri-dens-m {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: right;
  color: var(--accent-2);
}

/* ================================================================
   2. İHALELER — parsel kartı ve karşılaştırma tablosu
   ================================================================ */

.lot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.lot {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lot:hover {
  border-color: var(--line-highlight);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.lot.is-live { border-color: rgba(249, 115, 22, .4); }

.lot-view { position: relative; }
.lot-view .pv { border-radius: 0; }
.lot-view-top {
  position: absolute;
  inset: 8px 8px auto 8px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.lot-view-top > * { pointer-events: auto; }
.lot-view-top .status { backdrop-filter: blur(6px); }
/* Kesinlik rozeti ile durum rozeti çakışmasın: rozet ikinci sıraya iner. */
.lot-view .pv-precision { top: 42px; }

.lot-star {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(6, 8, 13, .72);
  backdrop-filter: blur(6px);
  color: var(--fg-2);
  font-size: 14px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.lot-star:hover { color: var(--warn-2); border-color: var(--warn); }
.lot-star.on { color: var(--warn-2); border-color: var(--warn); background: var(--warn-dim); }

.lot-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px 15px 15px;
  flex: 1;
}
.lot-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.lot-type {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid currentColor;
}
.lot-type.icra { color: var(--danger-2); }
.lot-type.ihale { color: var(--info); }
.lot-multi { color: var(--warn-2); }

.lot-place {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.024em;
  line-height: 1.18;
}
.lot-place span { color: var(--fg-muted); font-weight: 500; }
.lot-place small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: 0;
}
.lot-head {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lot-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.lot-facts dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 3px;
}
.lot-facts dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* İndirim şeridi — yüzde ve neye dayandığı bir arada */
.dbar { display: flex; flex-direction: column; gap: 5px; }
.dbar-top { display: flex; align-items: baseline; gap: 7px; }
.dbar-top b {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dbar-top span { font-size: 11.5px; color: var(--fg-3); }
.dbar-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.dbar-track i { display: block; height: 100%; border-radius: 3px; }
.dbar small { font-size: 10.5px; color: var(--fg-muted); }
.dbar.is-strong .dbar-top b { color: var(--accent-2); }
.dbar.is-strong .dbar-track i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.dbar.is-soft .dbar-top b { color: var(--warn-2); }
.dbar.is-soft .dbar-track i { background: linear-gradient(90deg, rgba(245, 158, 11, .55), var(--warn-2)); }
.dbar-empty { gap: 2px; }
.dbar-none { font-size: 13px; font-weight: 600; color: var(--fg-3); }

/* Amtlicher Vergleich: eine andere Messgröße, also auch eine andere Farbe.
   Grün ist für den Inseratsvergleich reserviert — sähen beide gleich aus,
   läse ein Nutzer in elf Provinzen etwas anderes als in den übrigen 65,
   ohne den Unterschied zu bemerken. Der gestrichelte Balken sagt zusätzlich:
   gröber, weil Provinz statt Bezirk. */
.dbar.is-official .dbar-top b { color: var(--info); }
.dbar.is-official .dbar-track {
  background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, .07) 5px 6px);
}
.dbar.is-official .dbar-track i {
  background: linear-gradient(90deg, rgba(96, 165, 250, .45), var(--info));
}

/* Marktdicke. Nur der dünne Fall wird farblich hervorgehoben — eine Warnung
   auf jeder Zeile wäre keine. */
.depth {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--fg-muted);
}
.depth.is-thin { color: var(--warn-2); }

.lot-money {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.lot-money > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lot-money dt { font-size: 11.5px; color: var(--fg-3); }
.lot-money dd { margin: 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lot-money-main dt { color: var(--fg-2); }
.lot-money-main dd { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

.lot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.cav {
  font-size: 11px;
  line-height: 1.3;
  max-width: 58%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cav-ok { color: var(--fg-muted); }
.cav-warn { color: var(--warn-2); }

.lot-open {
  flex: 0 0 auto;
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px solid var(--pane);
  background: var(--pane-dim);
  color: var(--pane-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.lot-open:hover { background: var(--pane); color: #04140b; }

/* Karşılaştırma tablosu */
.lot-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
/* Kopfzeile und Datenzeile sind zwei getrennte Raster. Damit die Spalten
   übereinander stehen, darf keine Spur von ihrem Inhalt abhängen: keine
   auto-Spur, keine min-content-Breite. Alles fest, nur die Ortsspalte dehnt
   sich. */
.ltr-head,
.ltr {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 124px 92px 116px 108px 62px 126px 104px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}
.ltr-head > *,
.ltr > * { min-width: 0; overflow: hidden; }
.ltr-head {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: rgba(255, 255, 255, .02);
  border-bottom: 1px solid var(--hair);
}
.ltr { border-top: 1px solid var(--line-soft); transition: background .16s ease; }
.ltr:hover { background: rgba(255, 255, 255, .022); }
.ltr.watched { box-shadow: inset 2px 0 0 var(--warn); }
.ltr-view { width: 92px; }
.ltr-place { min-width: 0; }
.ltr-place b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltr-place small { display: block; font-size: 10.5px; color: var(--fg-3); font-family: var(--font-mono); }
.ltr-kind { font-size: 12px; color: var(--fg-2); }
.ltr-num { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.ltr-num b { font-size: 13.5px; color: var(--fg); font-weight: 700; }
.ltr-disc {
  font-family: var(--font-mono);
  font-size: 15px;
  text-align: right;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.ltr-disc.strong { color: var(--accent-2); font-weight: 600; }
.ltr-when { font-size: 11px; }
.ltr-act { display: flex; gap: 6px; justify-content: flex-end; }
.ltr-act .lot-open { padding: 6px 10px; font-size: 11.5px; }
.ltr-act .lot-star { width: 28px; height: 28px; background: transparent; }

/* ================================================================
   3. EMSALLER — gerçek fotoğraflı pazar ilanları
   ================================================================ */

.toolbar-slim { margin-bottom: 14px; }

.cmp-hint {
  margin: 0 0 16px;
  padding: 13px 16px;
  font-size: 12.5px;
  color: var(--fg-3);
  border: 1px dashed var(--hair);
  border-radius: 12px;
}
.cmp-bench {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.cmp-bench > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: var(--bg-card);
}
.cmp-bench b {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--pane-2);
  font-variant-numeric: tabular-nums;
}
.cmp-bench span { font-size: 11.5px; color: var(--fg-3); }

.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}
.cmp {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.cmp:hover { border-color: var(--line-highlight); transform: translateY(-3px); }
.cmp-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  overflow: hidden;
}
.cmp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  color: var(--fg-muted);
  z-index: 0;
}
.cmp-photo img { position: relative; z-index: 1; }
.cmp-below {
  position: absolute;
  left: 9px;
  bottom: 9px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  padding: 4px 8px;
  border-radius: 6px;
  color: #04140b;
  background: var(--accent-2);
}
.cmp-body { display: flex; flex-direction: column; gap: 9px; padding: 13px 14px 14px; flex: 1; }
.cmp-perm2 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--pane-2);
  font-variant-numeric: tabular-nums;
}
.cmp-perm2 small {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-muted);
}
.cmp-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.012em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cmp-place { margin: 0; font-size: 12px; color: var(--fg-3); }
.cmp-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.cmp-facts dt {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.cmp-facts dd { margin: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
  font-size: 11px;
  color: var(--fg-muted);
}
.cmp-foot a { color: var(--pane-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cmp-foot a:hover { text-decoration: underline; }

/* ================================================================
   4. TAKİBİM — aşama hattı
   ================================================================ */

.pipe-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.pipe-summary > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--bg-card); }
.pipe-summary b {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  color: var(--pane-2);
  font-variant-numeric: tabular-nums;
}
.pipe-summary span { font-size: 11.5px; color: var(--fg-3); }

.pipe-lanes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.pipe-lane {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .014);
  border: 1px solid var(--hair);
  border-radius: 14px;
  min-height: 120px;
}
.pipe-lane.is-empty { opacity: .55; }
.pipe-lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--hair);
}
.pipe-lane-head b { font-size: 12.5px; font-weight: 700; }
.pipe-lane-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--violet-dim);
  color: var(--violet);
}
.pipe-lane-head small { margin-left: auto; font-size: 10.5px; color: var(--fg-muted); font-family: var(--font-mono); }
.pipe-lane-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 8px; }

.pipe-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: 10px;
}
.pipe-item.is-live { border-color: rgba(249, 115, 22, .4); }
.pipe-item-view { width: 74px; }
.pipe-item-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pipe-item-title {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipe-item-title:hover { color: var(--pane-2); }
.pipe-item-main small { font-size: 10.5px; color: var(--fg-3); }
.pipe-item-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}
.pipe-dep { color: var(--fg-muted); }
.pipe-when { color: var(--fg-3); }
.pipe-when.live { color: var(--live); font-weight: 600; }
.pipe-item-move {
  grid-column: 1 / -1;
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  padding-top: 2px;
}
.pipe-item-move button {
  width: 26px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pipe-item-move button:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
.pipe-item-move button:disabled { opacity: .3; cursor: default; }
.pipe-drop:hover { border-color: var(--danger) !important; color: var(--danger-2) !important; }

/* ================================================================
   5. KAYNAK — belge düzeni, kart yok
   ================================================================ */

.ref-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 34px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.ref-figures > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 16px 0; background: var(--bg); }
.ref-figures b {
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.ref-figures span { font-size: 11.5px; color: var(--fg-3); line-height: 1.35; }

.ref-block { margin-bottom: 38px; max-width: 900px; }
.ref-block h3 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pane-2);
}
.ref-note { margin: 0 0 12px; font-size: 12.5px; color: var(--fg-3); }

.ref-sources { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: src; }
.ref-sources li {
  position: relative;
  padding: 14px 0 14px 40px;
  border-top: 1px solid var(--hair);
  counter-increment: src;
}
.ref-sources li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
}
.ref-sources b { font-size: 14px; font-weight: 700; }
.ref-sources p { margin: 3px 0 0; font-size: 12.5px; color: var(--fg-2); line-height: 1.55; }
.ref-sources code {
  display: block;
  margin-top: 7px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  background: rgba(255, 255, 255, .025);
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
}

.ref-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ref-table th {
  text-align: left;
  padding: 8px 12px 8px 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--hair);
}
.ref-table td {
  padding: 10px 12px 10px 0;
  font-size: 13px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--line-soft);
}
.ref-table td.mono { color: var(--fg); font-size: 12.5px; }
.ref-table td:first-child { color: var(--fg); font-weight: 600; }

.ref-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.ref-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--hair); }
.ref-step-n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pane-2);
  padding-top: 1px;
}
.ref-steps b { font-size: 13.5px; font-weight: 700; }
.ref-steps p { margin: 3px 0 0; font-size: 12.5px; color: var(--fg-2); line-height: 1.55; }

.ref-warning ul { margin: 10px 0 0; padding-left: 18px; }
.ref-warning li { font-size: 12.5px; color: var(--fg-2); line-height: 1.65; margin-bottom: 6px; }

/* ================================================================
   DOSYA (detay)
   ================================================================ */

.dos-block { margin-bottom: 28px; }
.dos-block h4 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.dos-map-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-left-width: 2px;
}
.dos-map-frame.is-exact { border-left-color: var(--accent); }
.dos-map-frame.is-approx { border-left-color: var(--warn); }
.dos-map-frame.is-none { border-left-color: var(--fg-muted); }
.dos-map-frame .tkgm-detail-map {
  width: 100%;
  height: 300px;
  background: var(--bg-3);
}
.dos-map-stamp {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 500;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #e2e8f0;
  background: rgba(6, 8, 13, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  padding: 4px 9px;
  backdrop-filter: blur(6px);
}
.tkgm-live-status { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
.tkgm-note.approx { color: var(--warn-2); }
.tkgm-note.none { color: var(--fg-3); }
.tkgm-live-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin-top: 12px;
  background: var(--hair);
}
.tkgm-live-details:empty { display: none; }
.tkgm-live-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg-card); }
.tkgm-live-item label { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-muted); }
.tkgm-live-item b { font-size: 13px; font-weight: 600; }

.dos-place-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dos-link {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .02);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}
.dos-link:hover { border-color: var(--accent); color: var(--accent-2); }

.dos-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-bottom: 16px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.dos-num { display: flex; flex-direction: column; gap: 3px; padding: 14px 15px; background: var(--bg-card); }
.dos-num label { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); }
.dos-num b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dos-num small { font-size: 10.5px; color: var(--fg-3); }
.dos-num.is-lead b { font-size: 22px; color: var(--fg); }
.dos-num.is-gain b { color: var(--accent-2); }

.dos-cal { list-style: none; margin: 0; padding: 0; }
.dos-cal-step {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--bg-card);
}
.dos-cal-step.is-live { border-color: var(--live); background: var(--live-dim); }
.dos-cal-step.is-done { opacity: .5; }
.dos-cal-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.dos-cal-dates { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dos-cal-dates i { font-style: normal; color: var(--fg-muted); padding: 0 4px; }
.dos-cal-state { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.dos-cal-step.is-live .dos-cal-state { color: var(--live); font-weight: 600; }
.dos-cal-single { margin: 0; font-size: 13px; }
.dos-cal-single.muted { color: var(--fg-3); }

.dos-cav-note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--fg-3); }

.dos-fold {
  border-top: 1px solid var(--hair);
  padding: 4px 0;
  margin-bottom: 4px;
}
.dos-fold > summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dos-fold > summary::-webkit-details-marker { display: none; }
.dos-fold > summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
  width: 14px;
}
.dos-fold[open] > summary::before { content: "–"; }
.dos-fold[open] > summary { color: var(--fg); }
.dos-fold h5 {
  margin: 20px 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.dos-fold .muted { font-size: 12.5px; color: var(--fg-3); }

/* ================================================================
   Dar ekran
   ================================================================ */

@media (max-width: 1080px) {
  .tri-split { grid-template-columns: 1fr; gap: 26px; }

  /* Mittelbreite Fenster: Sicherheit und Verfahrensstand fallen weg, damit die
     verbleibenden Spalten nicht zusammengequetscht werden. Kopf und Zeile
     werden über dieselbe Kindposition ausgeblendet — sonst verschieben sich
     Überschrift und Wert gegeneinander. */
  .ltr-head, .ltr { grid-template-columns: 80px minmax(0, 1fr) 116px 84px 108px 60px 96px; }
  .ltr-head > :nth-child(6),
  .ltr-head > :nth-child(8),
  .ltr > :nth-child(6),
  .ltr > :nth-child(8) { display: none; }
}

@media (max-width: 760px) {
  .tabpane { padding-top: 16px; }
  .pane-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pane-head-meta { gap: 18px; }

  .tri-head { padding: 2px 0 22px; }
  .tri-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tri-fig b { font-size: 24px; }

  /* Auf dem Telefon bekommt der Ort die ganze erste Zeile. Vorher teilte er
     sie sich mit den beiden Knöpfen und blieb auf „AYDIN / S…" stehen. */
  .tri-row {
    grid-template-columns: 26px 88px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank view main main"
      "rank view disc act"
      "rank money money money";
    gap: 6px 10px;
    padding: 12px 12px 13px;
  }
  .tri-main > b { white-space: normal; }
  .tri-rank { grid-area: rank; align-self: start; padding-top: 3px; }

  /* 88 Pixel breit trägt keinen Stempel mehr — er wurde mitten im Wort
     abgeschnitten. Ada und Parsel stehen ohnehin in der Zeile daneben. */
  .tri-view .pv-stamp { display: none; }
  .tri-view .pv::after { display: none; }
  .tri-view { grid-area: view; width: 88px; align-self: start; }
  .tri-main { grid-area: main; }
  .tri-disc { grid-area: disc; text-align: left; display: flex; align-items: baseline; gap: 7px; }
  .tri-disc b { font-size: 16px; }
  .tri-money { grid-area: money; text-align: left; display: flex; align-items: baseline; gap: 9px; margin-top: 4px; }
  .tri-act { grid-area: act; align-self: center; }
  .tri-when { display: none; }

  .tri-closing { grid-template-columns: 1fr; }

  .lot-grid { grid-template-columns: 1fr; }
  .lot-place { font-size: 17px; }

  /* Auf dem Telefon bleibt die Tabelle eine Tabelle und wird seitlich
     geschoben. Stapelt man die Spalten, ist es keine Gegenüberstellung mehr —
     dafür gibt es die Kartenansicht daneben. Alle Spalten kommen zurück. */
  .lot-table { overflow-x: auto; }
  .ltr-head, .ltr {
    min-width: 790px;
    grid-template-columns: 80px minmax(0, 1fr) 104px 80px 104px 96px 56px 112px 96px;
  }
  .ltr-head > :nth-child(6),
  .ltr-head > :nth-child(8),
  .ltr > :nth-child(6),
  .ltr > :nth-child(8) { display: block; }

  .cmp-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .cmp-bench { grid-template-columns: 1fr; }
  .pipe-summary { grid-template-columns: 1fr; }
  .pipe-lanes { grid-auto-columns: 82vw; }
  .ref-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-figures > div { padding-right: 12px; }
  .dos-map-frame .tkgm-detail-map { height: 220px; }
  .ref-table { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lot:hover, .cmp:hover, .tri-fig:hover, .tri-close-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- Filtreler,
   ikinci geçiş: dört alan hep açık, gerisi katlı. Ölçüt basit — sonuç
   kartlarının ilk ekranda görünmesi. */

body[data-pane] .toolbar {
  padding: 14px 16px 12px;
  margin-bottom: 16px;
}
.filters-lead {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(150px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.toolbar-slim .filters-lead {
  grid-template-columns: minmax(220px, 1.6fr) repeat(5, minmax(140px, 1fr));
}

.filter-more { margin-top: 12px; }
.filter-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
}
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--pane);
  transition: transform .15s ease;
}
.filter-more[open] > summary::before { transform: rotate(90deg); }
.filter-more > summary:hover { color: var(--fg); }
.filter-more .filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 12px;
  align-items: end;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.filter-more .chips { margin-top: 12px; }
.filter-count-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--pane-dim);
  color: var(--pane-2);
}

.toolbar-foot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

/* Küçük pencere: 148 pikselde damga okunmaz, kırpılmış görünür. */
.pv-mini { aspect-ratio: 16 / 9; border-radius: 8px; }
.pv-mini .pv-stamp { display: none; }
.pv-mini::after { display: none; }
.pv-mini .pv-precision { font-size: 0; gap: 0; padding: 3px; border-radius: 50%; right: 5px; top: 5px; }
.pv-mini .pv-precision::before { width: 4px; height: 4px; }
.pv-mini .pv-cross { width: 12px; height: 12px; margin: -6px 0 0 -6px; }

/* Bugün sekmesindeki satır düğmeleri: on tanesi alt alta dolu turuncu
   durunca sayfa düğmeden ibaret görünüyordu. Dolgu yalnızca üzerine
   gelince. */
.tri-act .lot-open {
  background: transparent;
  border-color: var(--hair);
  color: var(--fg-2);
}
.tri-act .lot-open:hover { background: var(--pane); border-color: var(--pane); color: #04140b; }
.tri-act .lot-star { background: transparent; }

.pipe-lanes { grid-auto-columns: minmax(216px, 1fr); }

@media (max-width: 760px) {
  /* Kopfzeile der Trefferliste: zwei Zeilen untereinander statt drei
     umgebrochene Fragmente nebeneinander. */
  body[data-pane] .resultbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  body[data-pane] .resultbar .count { font-size: 12px; line-height: 1.5; }

  .filters-lead,
  .toolbar-slim .filters-lead { grid-template-columns: 1fr; }
  .toolbar-foot { justify-content: space-between; }
  .toolbar-foot .sortfield { flex: 1 1 100%; }
  .toolbar-foot .btn-reset { flex: 0 0 auto; }
}

/* Zahl und Währungszeichen gehören zusammen — in der schmalen Spur brach
   sonst das ₺ allein in die nächste Zeile. */
.pipe-item-nums > span { white-space: nowrap; }

/* Herkunftsnachweis unter jedem Objekt. Bewusst leise gesetzt: er muss
   lesbar und auffindbar sein, aber nicht mit der Sache konkurrieren. */
.dos-source {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.dos-source a { color: var(--fg-3); text-decoration: underline; }
.dos-source a:hover { color: var(--info); }

/* Deutschland: quellengebundene Bilder, Dokumente und Kartenhinweise. */
.de-evidence-panel {
  display: grid;
  gap: 10px;
  margin: 4px 0 16px;
}
.de-evidence-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}
.de-evidence-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.de-evidence-badge--ok { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.de-evidence-badge--review { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.de-evidence-badge--missing { color: var(--fg-3); background: var(--bg-3); }
.de-evidence-media,
.de-evidence-parcel,
.de-evidence-documents {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-3);
}
/* Ein Kasten, der nur einen Satz und den Link zur Quelle trägt, sagt dasselbe
   wie das Abzeichen darüber. Als Zeile statt als Kasten steht er nicht mehr
   gleichrangig neben den Blöcken, die wirklich etwas zeigen. */
.de-evidence-media--status,
.de-evidence-documents--status {
  padding: 0;
  border: 0;
  background: none;
}
.de-evidence-media--status p,
.de-evidence-documents--status p {
  margin: 0 0 2px;
  font-size: 11.5px;
  color: var(--fg-3);
}
.de-evidence-media--status a,
.de-evidence-documents--status a { font-size: 11.5px; }
.de-evidence-media p,
.de-evidence-documents p,
.de-evidence-map-status { margin: 0 0 8px; color: var(--fg-2); font-size: 12px; }
.de-evidence-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.de-evidence-photo { margin: 0; }
.de-evidence-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.de-evidence-photo figcaption { margin-top: 4px; color: var(--fg-3); font-size: 10px; }
.de-evidence-parcel dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.de-evidence-fact dt { color: var(--fg-3); font-size: 10px; }
.de-evidence-fact dd { margin: 2px 0 0; font-size: 12px; font-weight: 700; }
.de-evidence-map-hint,
.de-evidence-official-map { display: grid; gap: 3px; margin-top: 8px; }
.de-evidence-map-hint small,
.de-evidence-official-map small,
.de-evidence-map-basis { color: var(--fg-3); font-size: 10px; }
.de-evidence-source,
.de-evidence-map,
.de-evidence-official-map a,
.de-evidence-document {
  color: var(--info);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
}
.de-evidence-documents { display: flex; flex-wrap: wrap; gap: 10px; }
.card-media-unavailable {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: var(--fg-3);
  background: var(--bg-3);
  font-size: 12px;
}

@media (max-width: 560px) {
  .de-evidence-gallery,
  .de-evidence-parcel dl { grid-template-columns: 1fr; }
}

/* ==================== ZVG INVESTOR RATGEBER ==================== */
.guide-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 10px 0;
}
.guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37, 99, 235, 0.15);
  color: var(--accent);
  border: 1px solid rgba(37, 99, 235, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.guide-hero h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--fg);
}
.guide-hero p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.guide-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.guide-card:hover {
  border-color: rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.guide-card-icon {
  font-size: 28px;
  margin-bottom: 12px;
  display: inline-block;
}
.guide-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--fg);
}
.guide-card > p {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 14px;
  line-height: 1.5;
}
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
}
.guide-list li {
  position: relative;
  padding-left: 16px;
}
.guide-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}
.guide-list b {
  color: var(--fg);
}
.guide-callout {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 16px;
  padding: 24px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.guide-callout h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--fg);
}
.guide-callout p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
@media (max-width: 600px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   BELOWMARK DEDICATED UPGRADE & PRICING EXPERIENCE (/upgrade)
   ================================================================ */

.upgrade-page {
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 10% 40%, rgba(37, 99, 235, 0.04) 0%, transparent 50%),
              var(--bg);
  min-height: 100vh;
  color: var(--fg);
}

.upgrade-sitebar {
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.upgrade-nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.upgrade-nav-badge {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-2);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 3px 10px;
  border-radius: 999px;
}

.upgrade-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-2);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  transition: all 0.2s ease;
}

.upgrade-back-link:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-highlight);
  text-decoration: none;
}

.upgrade-user-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-2);
}

.upgrade-user-indicator .u-email {
  font-weight: 600;
  color: var(--fg);
}

.upgrade-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* Upgrade Hero */
.upgrade-hero-section {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 40px;
}

.upgrade-hero-pill {
  margin: 0 auto 20px;
  display: inline-flex;
}

.upgrade-headline {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  color: var(--fg);
}

.upgrade-lede {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 720px;
  margin: 0 auto 28px;
}

.upgrade-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 16px;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: 999px;
}

/* Account Status Banner */
.account-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 24px;
  margin-bottom: 48px;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .account-status-banner {
  background: linear-gradient(135deg, rgba(16, 22, 34, 0.95), rgba(10, 14, 22, 0.98));
  border-color: var(--line-highlight);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.asb-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.asb-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.asb-user-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}

.asb-label {
  color: var(--fg-3);
}

.asb-email {
  color: var(--fg);
  font-weight: 700;
}

.asb-market-tag {
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--accent-2);
}

.asb-sub-line {
  font-size: 13px;
  color: var(--fg-2);
  margin-top: 2px;
}

.asb-plan-value {
  font-weight: 700;
  color: var(--warn);
}

.asb-login-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s;
}

.asb-login-link:hover {
  opacity: 0.9;
  text-decoration: none;
}

.asb-ready-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-2);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
}

/* Section Headings */
.upgrade-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}

.upgrade-section-head h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}

.upgrade-section-head .lede {
  font-size: 15px;
  color: var(--fg-2);
  margin: 0;
}

/* Pricing Grid 3-Cards */
.plans-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 48px;
}

.plan-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

[data-theme="dark"] .plan-card {
  background: linear-gradient(165deg, rgba(17, 24, 38, 0.88), rgba(9, 13, 20, 0.96));
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
}

.plan-card:hover {
  border-color: var(--line-highlight);
  transform: translateY(-3px);
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.15);
}

.plan-card.active-plan {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 20px 48px -10px rgba(16, 185, 129, 0.2);
  background: var(--panel);
}

.plan-card.featured-plan {
  border-color: rgba(16, 185, 129, 0.4);
  background: var(--panel);
}

[data-theme="dark"] .plan-card.active-plan {
  background: linear-gradient(165deg, rgba(16, 32, 38, 0.92), rgba(8, 16, 22, 0.98));
}
[data-theme="dark"] .plan-card.featured-plan {
  background: linear-gradient(165deg, rgba(14, 28, 36, 0.92), rgba(7, 14, 20, 0.98));
}

.plan-popular-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #04140b;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  white-space: nowrap;
}

.plan-type-tag {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-bottom: 8px;
}

.plan-type-tag.highlight-tag {
  color: var(--accent-2);
}

.plan-type-tag.pro-tag {
  color: var(--info);
}

.plan-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 6px;
}

.plan-desc {
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.5;
  margin: 0 0 24px;
  min-height: 40px;
}

.plan-price-block {
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 24px;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-main .currency {
  font-size: 24px;
  font-weight: 700;
  color: var(--fg-2);
}

.price-main .period-pre {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-3);
  margin-right: 4px;
}

.price-main .amount {
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 800;
  color: var(--fg);
  line-height: 1;
}

.price-main .period {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg-3);
}

.price-saving-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-2);
  background: rgba(16, 185, 129, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
}

.price-tax-note {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 6px;
}

.plan-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  flex-grow: 1;
}

.p-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}

.p-feat span:first-child {
  color: var(--accent);
  font-weight: 800;
  flex-shrink: 0;
}

.p-feat.highlight {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.btn-select-plan {
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-highlight);
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-select-plan:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.plan-card.active-plan .btn-select-plan {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.btn-pro-inquire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--info);
  font-size: 14.5px;
  font-weight: 700;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-pro-inquire:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: var(--info);
  text-decoration: none;
  color: #fff;
}

/* Interactive Checkout Action Box */
.checkout-panel-section {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  margin-bottom: 64px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

[data-theme="dark"] .checkout-panel-section {
  background: linear-gradient(158deg, rgba(18, 26, 40, 0.95), rgba(10, 15, 24, 0.98));
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.7), 0 0 32px rgba(16, 185, 129, 0.15);
}

.checkout-panel-glow {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.cp-kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-2);
  display: block;
  margin-bottom: 4px;
}

.cp-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg);
}

.cp-selected-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.css-label {
  font-size: 13px;
  color: var(--fg-3);
}

.css-badge {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}

.css-badge b {
  color: var(--fg);
  font-size: 14.5px;
}

.css-badge .css-price {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-2);
  font-size: 14px;
}

.cp-legal-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-soft);
  padding: 20px;
  border-radius: var(--radius);
}

.upgrade-consent {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.cp-actions-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.btn-checkout-glow {
  flex: 1;
  min-width: 280px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #04140b;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35), 0 0 1px 1px rgba(255, 255, 255, 0.2) inset;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-checkout-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.3) inset;
}

.btn-checkout-glow:active {
  transform: translateY(0);
}

.btn-portal-secondary {
  padding: 15px 22px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-highlight);
  color: var(--fg-2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-portal-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg);
}

.cp-footer-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}

.cp-note-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--fg-3);
}

/* Feature Comparison Table */
.upgrade-comparison-section {
  margin-bottom: 64px;
}

.matrix-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.upgrade-matrix-table {
  width: 100%;
  border-collapse: collapse;
}

.upgrade-matrix-table th {
  background: var(--bg-3);
  padding: 18px 24px;
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.upgrade-matrix-table th.bm-col-highlight {
  background: rgba(16, 185, 129, 0.1);
  color: var(--accent-2);
  font-weight: 800;
}

.upgrade-matrix-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  vertical-align: middle;
}

.upgrade-matrix-table td small {
  display: block;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 3px;
}

.upgrade-matrix-table td.bm-col-highlight {
  background: rgba(16, 185, 129, 0.04);
}

.text-dim {
  color: var(--fg-3);
  font-weight: 600;
}

.lock-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-2);
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.cross-no {
  color: var(--danger);
  font-weight: 700;
  font-size: 15px;
}

/* ROI Story Card */
.upgrade-roi-section {
  margin-bottom: 64px;
}

.roi-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(16, 185, 129, 0.06) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.roi-icon {
  font-size: 36px;
  flex-shrink: 0;
}

.roi-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--fg);
  margin: 0 0 10px;
}

.roi-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 10px;
}

.roi-sub {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--warn);
  margin: 0;
}

/* FAQ Accordion */
.upgrade-faq-section {
  margin-bottom: 48px;
}

.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: var(--line-highlight);
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  font-size: 16px;
  color: var(--fg-3);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-answer {
  padding: 0 24px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-2);
}

.faq-answer p {
  margin: 0;
}

/* Mobile Responsiveness for Upgrade Page */
@media (max-width: 960px) {
  .plans-grid-3 {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .account-status-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .checkout-panel-section {
    padding: 24px 20px;
  }

  .cp-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .upgrade-matrix-table th, .upgrade-matrix-table td {
    padding: 12px 14px;
  }
}


/* =================================================================
   KONTOSEITE  (/konto · /hesap)

   Die Seite liest sich als Kontoauszug, nicht als Einstellungsmaske:
   eine Spalte, ruhige Flächen, Haarlinien statt Kästen, jede Zahl und
   jedes Datum in der Ziffernschrift. Fläche, Radius und Kante kommen
   aus dem Tokensatz (--panel / --panel-r / --line); Smaragd bedeutet
   "läuft", Bernstein "Frist läuft", Rot ausschließlich "Gefahr" und
   steht deshalb nur an der Kündigung.

   Zwei Regeln tragen die Seite und dürfen nicht fallen:
   1. Beide Rasterkinder sind auf minmax(0,…) begrenzt. Ohne das drückt
      die min-content-Breite der Tarifzeile (vier Karten à 310px) die
      einzige Spalte auf 1280px, und `html { overflow-x: hidden }`
      schneidet den Rest lautlos ab statt zu scrollen.
   2. [hidden] gewinnt gegen die display-Regeln der Knöpfe. Sonst
      bleiben "Abo kündigen" und der Stripe-Knopf sichtbar, obwohl das
      Skript sie längst abgeschaltet hat.
   ================================================================= */

.konto-page {
  background:
    radial-gradient(circle at 50% -10%, var(--accent-dim) 0%, transparent 60%),
    var(--bg);
  min-height: 100vh;
  color: var(--fg);
  /* `html, body { overflow-x: hidden }` (style.css:165) macht den body zum
     Bildlaufkasten. Klebende Kinder des body haften dann an einem Kasten,
     der selbst nie scrollt — sie fahren mit dem Inhalt aus dem Bild, und die
     Reiterleiste dieser Seite klebte nirgends. Der Wert steht weiter auf
     `html`; der Viewport erbt ihn von dort, und der body gibt den Bildlauf
     wieder ab. Die Seite selbst läuft an keiner Breite über — nachgemessen
     von 320px bis 1920px —, ihr Schutz ist dieses `hidden` also nicht. */
  overflow-x: visible;
}

/* Das hidden-Attribut ist auf dieser Seite der einzige Schalter für
   Knöpfe, die es nur unter Bedingungen gibt. .konto-btn setzt aber
   display:inline-flex und schlägt die UA-Regel [hidden]{display:none}.
   Ohne diese Zeile verspricht die Seite Vorgänge, die es nicht gibt. */
.konto-page [hidden] { display: none !important; }

/* `.site .shell` hebt die Breitenbegrenzung auf; hier steht dieselbe
   Spezifität dagegen. Der Text läuft auf Lesebreite, nicht auf
   Terminalbreite. */
.site .konto-main {
  max-width: 1080px;
  margin: 0 auto;
  padding-block: clamp(26px, 4vw, 48px) 88px;
}

.konto-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: start;
}
/* Beide Kinder müssen schrumpfen dürfen — siehe Regel 1 im Kopf. */
.konto-index,
.konto-sections { min-width: 0; }

/* ---- Kopf ---------------------------------------------------------- */

.konto-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: clamp(18px, 2.4vw, 26px);
  margin-bottom: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--line);
}
.konto-head h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 8px;
}
.konto-head-mail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-3);
  /* An @ . - _ trennen, nicht mitten im Wort: eine Adresse muss
     vorlesbar bleiben. */
  overflow-wrap: anywhere;
  word-break: normal;
}
.konto-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.konto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-2);
  white-space: nowrap;
}
/* Der Punkt trägt den Zustand mit, damit er nicht allein an der Farbe
   hängt. */
.konto-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .55;
}
/* Kleine Schrift in Akzentfarbe ist der schlechteste Kontrast der Seite.
   Auf hellem Grund erreicht --accent (#059669) nur 3,4:1; darum tragen die
   beiden Stellen mit 10–11,5px Akzenttext hier ein dunkleres Grün. Im
   dunklen Design bleibt es beim Token, dort stimmt der Kontrast. */
.konto-chip.aktiv   { border-color: var(--border-emerald); background: var(--accent-dim); color: #046c50; }
.konto-chip.achtung { border-color: rgba(217, 119, 6, 0.34); background: var(--warn-dim);  color: var(--warn-2); }
.konto-chip.ende    { border-color: rgba(220, 38, 38, 0.32); background: var(--danger-dim); color: var(--danger-2); }
[data-theme="dark"] .konto-chip.aktiv { color: var(--accent-2); }

/* ---- Störungsbanner ------------------------------------------------ */

.konto-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid rgba(217, 119, 6, 0.34);
  border-left-width: 3px;
  background: var(--warn-dim);
  border-radius: var(--radius);
  padding: 15px 18px;
  margin-bottom: 14px;
}
#konto-banner:not(:empty) { margin-bottom: clamp(18px, 2.4vw, 28px); }
.konto-banner.info { border-color: rgba(2, 132, 199, 0.34); background: var(--info-dim); }
.konto-banner.ende,
.konto-banner.schlecht { border-color: rgba(220, 38, 38, 0.34); background: var(--danger-dim); }
[data-theme="dark"] .konto-banner          { background: linear-gradient(120deg, var(--warn-dim), rgba(10, 14, 22, 0.9)); }
[data-theme="dark"] .konto-banner.info     { background: linear-gradient(120deg, var(--info-dim), rgba(10, 14, 22, 0.9)); }
[data-theme="dark"] .konto-banner.ende,
[data-theme="dark"] .konto-banner.schlecht { background: linear-gradient(120deg, var(--danger-dim), rgba(10, 14, 22, 0.9)); }
.konto-banner b    { display: block; margin-bottom: 4px; color: var(--fg); font-size: 14px; font-weight: 700; }
.konto-banner span { display: block; color: var(--fg-2); font-size: 13px; line-height: 1.6; }
.konto-banner-icon { font-size: 16px; line-height: 1.4; flex-shrink: 0; }

/* ---- Bereichswahl -------------------------------------------------- */

/* Am Schreibtisch eine Leiste am Rand, auf dem Telefon ein Segment-
   umschalter über drei gleiche Spalten. Nie eine Zeile, die seitlich
   wegläuft: der dritte Reiter wäre dort ohne Hinweis unerreichbar. */
.konto-index {
  position: sticky;
  top: 82px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
}
.konto-index a {
  position: relative;
  color: var(--fg-3);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: color .16s ease, background .16s ease;
}
.konto-index a:hover { color: var(--fg); background: var(--bg-3); }
.konto-index a.on {
  color: var(--fg);
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
/* Der aktive Reiter trägt eine Marke, nicht nur eine Tönung. */
.konto-index a.on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2.5px;
  border-radius: 999px;
  background: var(--accent);
}

/* ---- Abschnitte ---------------------------------------------------- */

.konto-sections { display: flex; flex-direction: column; }

/* Die Kopfleiste klebt (56px), unter 960px zusätzlich die Reiterleiste.
   Ohne diesen Abstand landet jedes Sprungziel hinter beiden. */
.konto-sec,
.konto-card,
.konto-status { scroll-margin-top: 96px; }
@media (max-width: 960px) {
  .konto-sec,
  .konto-card,
  .konto-status { scroll-margin-top: 132px; }
}
.konto-sec.hidden { display: none !important; }
.konto-sec > .eyebrow { margin-bottom: 10px; }
.konto-sec > h2 {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.konto-sec > p.lede { font-size: 14.5px; margin-bottom: clamp(18px, 2.2vw, 24px); max-width: 58ch; }

/* Karten stapeln über eine Regel, nicht über Inline-Ränder an jeder
   zweiten Karte. */
.konto-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  padding: clamp(18px, 2.2vw, 26px);
}
[data-theme="dark"] .konto-card { background: var(--panel); }
.konto-card + .konto-card { margin-top: clamp(14px, 1.6vw, 20px); }

/* Kartenüberschrift: eine Klasse statt fünfmal derselben Inline-Größe. */
.konto-card-head { margin-bottom: 16px; }
.konto-card-head:last-child { margin-bottom: 0; }
.konto-card h3,
.konto-card-head h3 {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.012em;
  margin: 0;
}
.konto-card-head p {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.6;
  margin: 5px 0 0;
  max-width: 64ch;
}
.konto-card h3 + .konto-facts,
.konto-card-head + .konto-facts { margin-top: 0; }
/* Eine zweite Ebene innerhalb derselben Karte (z. B. "Widerrufen"
   unter "Abo kündigen") steht kleiner und mit Luft darüber. */
.konto-sub {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.konto-sub h3 { font-size: 14.5px; font-weight: 700; }

/* ---- Zugangs-Kopfkarte --------------------------------------------- */

/* Die erste Karte beantwortet die einzige Frage, mit der die Seite
   geöffnet wird: was habe ich, und bis wann. Deshalb steht der Zustand
   groß und die Belege daneben — nicht beides als gleichrangige
   Wertzeile. */
.konto-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 24px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--panel-r);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .konto-status { background: var(--panel); }
.konto-status.laeuft { border-color: var(--border-emerald); }
.konto-status.endet  { border-color: rgba(217, 119, 6, 0.34); }
.konto-status.aus    { border-color: rgba(220, 38, 38, 0.3); }

.konto-status-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.konto-status-titel {
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--fg);
}
.konto-status-sub {
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 60ch;
}
/* Restlaufzeit als Balken: eine Zahl allein sagt nicht, ob 12 Tage viel
   oder wenig sind. Ohne Enddatum entfällt der Balken ganz. */
.konto-lauf { margin-top: 18px; }
.konto-lauf-spur {
  height: 5px;
  border-radius: 999px;
  background: var(--bg-4);
  overflow: hidden;
}
.konto-lauf-fuell {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.konto-status.endet .konto-lauf-fuell { background: linear-gradient(90deg, var(--warn), var(--warn-2)); }
.konto-lauf-text {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--fg-3);
}
.konto-lauf-text b { font-weight: 700; color: var(--fg-2); }

/* ---- Wertzeilen ---------------------------------------------------- */

/* Haarlinienband. Die Trennlinien sind Schatten an Zelle rechts und unten,
   nicht eine 1px-Lücke auf gefärbtem Grund: bei einer Zahl von Werten, die
   nicht auf die Spalten aufgeht, bliebe sonst der Rest der letzten Zeile als
   grauer Block stehen. Die überstehenden Schatten schneidet overflow:hidden
   am Rand weg. */
.konto-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}
[data-theme="dark"] .konto-facts { background: var(--bg-card); }
.konto-facts:empty { display: none; }
.konto-fact {
  padding: 13px 16px;
  min-width: 0;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.konto-fact dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.konto-fact dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.35;
  /* Ein langer Wert bricht um, statt vom overflow:hidden des Bandes
     lautlos abgeschnitten zu werden. */
  overflow-wrap: anywhere;
}
.konto-fact dd small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  line-height: 1.5;
  margin-top: 4px;
  overflow-wrap: normal;
}
.konto-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---- Tarife -------------------------------------------------------- */

/* ---- Zyklus-Umschalter (Monat / 3 Monate / 12 Monate) --------------- */
.cycle-switch-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 20px;
}
.cycle-switch {
  display: inline-flex;
  align-items: center;
  background: var(--bg-3);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  gap: 3px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .cycle-switch {
  background: var(--bg-card);
  border-color: var(--line);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.cycle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  white-space: nowrap;
}
.cycle-btn:hover:not(.active) {
  color: var(--fg-2);
  background: rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] .cycle-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-2);
}
.cycle-btn.active {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  font-weight: 700;
}
[data-theme="dark"] .cycle-btn.active {
  background: var(--bg-3);
  color: #ffffff;
  border-color: var(--line-highlight);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.cycle-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cycle-badge.save {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--border-emerald);
}
.cycle-badge.best {
  background: rgba(16, 185, 129, 0.16);
  color: var(--accent);
  border: 1px solid var(--border-emerald);
}
[data-theme="dark"] .cycle-badge.save {
  background: rgba(16, 185, 129, 0.18);
  color: var(--accent-2);
  border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="dark"] .cycle-badge.best {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}
.konto-plan-saving {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--border-emerald);
  margin-top: 6px;
  margin-bottom: 8px;
  width: fit-content;
}
[data-theme="dark"] .konto-plan-saving {
  background: rgba(16, 185, 129, 0.16);
  color: var(--accent-2);
}

.konto-plans-wrap { position: relative; margin-top: 4px; }

.konto-plans-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.konto-plans-nav { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.konto-plans-arrow {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 17px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  user-select: none;
  padding: 0;
}
.konto-plans-arrow:hover:not(:disabled) { background: var(--bg-3); border-color: var(--line-highlight); color: var(--accent); }
.konto-plans-arrow:disabled { opacity: .35; cursor: not-allowed; }

/* Grundform ist die wischbare Zeile — das ist die Form, die auf einem
   Telefon trägt. Ab 720px ersetzt ein Raster sie: dort ist Platz für
   alle Tarife nebeneinander, und eine abgeschnittene dritte Karte wäre
   ausgerechnet an der Kaufentscheidung der schlechteste Zustand. */
.konto-plans {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-highlight) transparent;
}
.konto-plans::-webkit-scrollbar { height: 5px; }
.konto-plans::-webkit-scrollbar-track { background: transparent; }
.konto-plans::-webkit-scrollbar-thumb { background: var(--line-highlight); border-radius: 999px; }

.konto-plan {
  display: flex;
  flex-direction: column;
  flex: 0 0 min(84vw, 290px);
  width: min(84vw, 290px);
  scroll-snap-align: start;
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: border-color .18s ease, transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s ease;
  box-sizing: border-box;
}
[data-theme="dark"] .konto-plan { background: var(--bg-card); }
.konto-plan:hover { border-color: var(--line-highlight); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.konto-plan.laufend {
  border-color: var(--border-emerald);
  background: linear-gradient(165deg, var(--accent-dim), var(--bg-2) 58%);
}
.konto-plan.empfohlen {
  border-color: var(--accent);
  box-shadow: 0 4px 22px -8px var(--accent-glow);
}
[data-theme="dark"] .konto-plan.laufend { background: linear-gradient(165deg, var(--accent-dim), var(--bg-card) 58%); }

/* Auszeichnung als Band an der Oberkante, wie auf der Preisseite —
   die Karte selbst bleibt dadurch ruhig. */
.konto-plan-band {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--accent);
}
.konto-plan-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  min-height: 14px;
  margin-bottom: 10px;
}
.konto-plan.laufend .konto-plan-tag,
.konto-plan.empfohlen .konto-plan-tag { color: #046c50; font-weight: 800; }
[data-theme="dark"] .konto-plan.laufend .konto-plan-tag,
[data-theme="dark"] .konto-plan.empfohlen .konto-plan-tag { color: var(--accent-2); }

/* Die min-height-Anker halten Titel, Preis und Fußknopf aller Karten
   auf einer Grundlinie — sonst tanzt das Raster, sobald ein Tarif
   keinen Monatspreis hat. */
.konto-plan h3 {
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin: 0;
  min-height: 2.6em;
  line-height: 1.3;
}
.konto-plan-preis {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
  word-spacing: -0.3em;
  color: var(--fg);
  line-height: 1;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
/* Ein Wort statt eines Betrags gehört nicht in die Ziffernschrift: in
   27px Mono schreit "Auf Anfrage" lauter als jeder echte Preis daneben. */
.konto-plan-preis.wort {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  word-spacing: normal;
  color: var(--fg-2);
}
.konto-plan-preis small { font-size: 12.5px; font-weight: 500; color: var(--fg-3); margin-left: 5px; letter-spacing: 0; word-spacing: normal; }
.konto-plan-je { font-size: 12px; color: var(--fg-3); margin: 7px 0 16px; min-height: 1.3em; }
.konto-plan ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.konto-plan li { font-size: 13px; color: var(--fg-2); line-height: 1.5; padding-left: 19px; position: relative; }
.konto-plan li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  transform: rotate(45deg);
  border: 1px solid var(--accent);
}
.konto-plan .konto-btn { margin-top: auto; width: 100%; }

.konto-plans-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fg-3);
}
.konto-plans-hint span { display: inline-flex; align-items: center; gap: 5px; }
.konto-plans-dots { display: flex; gap: 5px; align-items: center; }
.konto-plans-dot {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.konto-plans-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--line-highlight);
  transition: width .2s ease, background .2s ease;
}
.konto-plans-dot.active::before { width: 15px; background: var(--accent); }

/* Ab hier trägt ein Raster: keine Pfeile, keine Punkte, kein Wischtext,
   weil es nichts mehr zu wischen gibt. */
@media (min-width: 720px) {
  .konto-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
    padding-bottom: 0;
  }
  .konto-plan { flex: initial; width: auto; max-width: none; }
  .konto-plans-nav,
  .konto-plans-hint { display: none; }
}

/* Der ehrliche Leerfall steht über der Zeile, linksbündig wie Fließtext —
   er ist eine Auskunft, keine Karte. */
#konto-plans-leer { text-align: left; margin: 0 0 4px; }
.konto-plans:empty { display: none; }

/* ---- Knöpfe -------------------------------------------------------- */

/* Der Umschalter für Hell/Dunkel stand auf den Textseiten ohne Stil in der
   Kopfleiste und sah aus wie ein Betriebssystem-Knopf. Er folgt jetzt der
   Form der übrigen Icon-Knöpfe.

   Ausgenommen sind die beiden Dashboards: app.html und app-de.html geben dem
   Knopf zusätzlich .header-icon-btn (style.css:1096). Ohne das :not() würde
   diese spätere Regel die dortigen 36px still auf 38px ziehen — gleiche
   Spezifität, und die letzte gewinnt. */
.theme-toggle-btn:not(.header-icon-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.theme-toggle-btn:not(.header-icon-btn):hover { background: var(--bg-4); border-color: var(--line-highlight); }
.theme-toggle-btn .theme-icon { display: block; }

.konto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-h);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.konto-btn:hover:not(:disabled) { background: var(--bg-3); border-color: var(--line-highlight); }
.konto-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Weiss auf dem Token-Smaragd erreicht hell nur 2,5–3,8:1. Der wichtigste
   Knopf der Seite darf nicht ihr schlechtest lesbarer sein, darum hier ein
   tieferes Grün: beide Enden des Verlaufs liegen über 4,9:1. Im dunklen
   Design ist die Schrift ohnehin fast schwarz (--accent-text #04140b), dort
   bleibt es beim Token. */
.konto-btn.primaer {
  background: linear-gradient(135deg, #046c50, #05815b);
  border-color: transparent;
  color: #ffffff;
  font-weight: 750;
}
[data-theme="dark"] .konto-btn.primaer {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
}
.konto-btn.primaer:hover:not(:disabled) { box-shadow: 0 4px 20px -4px var(--accent-glow); }
.konto-btn.gefahr { border-color: rgba(220, 38, 38, 0.34); color: var(--danger-2); background: var(--danger-dim); }
.konto-btn.gefahr:hover:not(:disabled) { background: rgba(220, 38, 38, 0.18); border-color: var(--danger); }
.konto-btn-reihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.konto-btn-reihe:empty { display: none; }
/* Eine Reihe, in der jeder Knopf versteckt ist, darf keinen Abstand
   erzeugen. :has trägt das ohne Skript. */
.konto-btn-reihe:not(:has(> *:not([hidden]))) { display: none; }

/* ---- Historie ------------------------------------------------------ */

.konto-liste { display: flex; flex-direction: column; gap: 10px; }
.konto-eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
}
[data-theme="dark"] .konto-eintrag { background: var(--bg-card); }
.konto-eintrag b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.konto-eintrag-datum { font-size: 12px; color: var(--fg-3); margin-top: 3px; }
.konto-eintrag .konto-betrag {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}
.konto-eintrag-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--fg-3);
}
/* Kein nowrap: die Texte kommen aus Serverdaten und sind nicht
   längenbegrenzt. Jede Angabe bekommt stattdessen eine eigene Kachel. */
.konto-eintrag-meta span {
  background: var(--bg-3);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
}
.konto-eintrag-meta code {
  grid-column: 1 / -1;
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* ---- Formular ------------------------------------------------------ */

.konto-feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-width: 420px; }
.konto-feld label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.konto-feld input {
  min-height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
}
/* Der globale Fokusring liegt in :where() und hat Spezifität 0. Er wird
   hier nicht ersetzt, sondern ergänzt — sonst hätte ausgerechnet das
   Passwortfeld keinen sichtbaren Fokus mehr. */
.konto-feld input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.konto-meldung {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-2);
}
.konto-meldung.gut     { border-color: var(--border-emerald); background: var(--accent-dim); color: var(--accent); }
.konto-meldung.schlecht{ border-color: rgba(220, 38, 38, 0.34); background: var(--danger-dim); color: var(--danger-2); }
[data-theme="dark"] .konto-meldung.gut { color: var(--accent-2); }

/* --fg-3 (#64748b) erreicht auf dem dunklen Kartengrund höchstens 3,9:1 und
   kann 4,5:1 gar nicht mehr schaffen. Die Kleinschrift der Seite wechselt im
   dunklen Design deshalb auf --fg-2 (7,4:1). Hell bleibt --fg-3 (4,8:1). */
[data-theme="dark"] .konto-fact dt,
[data-theme="dark"] .konto-fact dd small,
[data-theme="dark"] .konto-hinweis,
[data-theme="dark"] .konto-leer,
[data-theme="dark"] .konto-lauf-text,
[data-theme="dark"] .konto-plan-tag,
[data-theme="dark"] .konto-eintrag-datum,
[data-theme="dark"] .konto-eintrag-meta,
[data-theme="dark"] .konto-eintrag-meta code,
[data-theme="dark"] .konto-plans-hint { color: var(--fg-2); }

.konto-hinweis { font-size: 12.5px; color: var(--fg-3); line-height: 1.65; margin: 14px 0 0; max-width: 76ch; }
.konto-hinweis:first-child { margin-top: 0; }
.konto-hinweis a { color: var(--fg-2); }

/* ---- Leer- und Ladezustand ----------------------------------------- */

/* Solange die Antwort aussteht, halten die Blöcke ihre Höhe frei, deren
   Inhalt für jedes angemeldete Konto sicher kommt: die Wertzeile und der
   Laufzeitbalken. Für die Tarifzeile wird nichts reserviert — wie viele
   Tarife der Server nennt, weiß die Seite vorher nicht, und eine geratene
   Höhe würde beim Eintreffen genauso springen, nur später. */
.konto-page:not([data-geladen]) #zugang-facts {
  display: block;
  min-height: 74px;
}
.konto-page:not([data-geladen]) #zugang-lauf {
  display: block !important;
  min-height: 34px;
  visibility: hidden;
}

/* Skelett statt erfundener Werte: Fläche in der Höhe, die der echte
   Inhalt später einnimmt, damit beim Eintreffen nichts springt. */
.konto-skelett {
  display: inline-block;
  min-width: 90px;
  height: 1em;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-4), var(--bg-3), var(--bg-4));
  background-size: 200% 100%;
  opacity: .7;
  animation: konto-schimmer 1.4s ease-in-out infinite;
}
@keyframes konto-schimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .konto-skelett { animation: none; }
}
.konto-leer {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.6;
  text-align: center;
}

/* ---- Umbrüche ------------------------------------------------------ */

@media (max-width: 960px) {
  /* minmax(0,1fr) statt 1fr — siehe Regel 1 im Kopf dieses Blocks. */
  .konto-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Die Leiste klebt unter der Kopfleiste (63px hoch) und ist damit eine
     zweite Werkzeugzeile, keine schwebende Pille: als abgerundeter Kasten
     liefe der Inhalt an ihren Ecken sichtbar vorbei. Deshalb volle Breite —
     die negative Marge hebt genau das Polster von `.site .shell` auf — mit
     mattiertem Grund und einer Haarlinie als Abschluss. */
  .konto-index {
    position: sticky;
    top: 63px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-inline: calc(-1 * clamp(18px, 2.6vw, 48px));
    padding: 7px clamp(18px, 2.6vw, 48px);
    margin-bottom: clamp(20px, 3vw, 28px);
    background: var(--bg-glass-heavy);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .konto-index a {
    justify-content: center;
    text-align: center;
    padding: 9px 8px;
    font-size: 12.5px;
    line-height: 1.25;
    /* Auf drei gleichen Spalten bricht "Zahlung & Rechnungen" auf zwei
       Zeilen um, statt seitlich aus dem Bild zu laufen. */
    hyphens: auto;
  }
  .konto-index a.on { background: var(--bg-2); }
  .konto-index a.on::before { display: none; }
}

@media (max-width: 620px) {
  .site .konto-main { padding-block: 18px 64px; }
  .konto-head { display: block; }
  .konto-eintrag { grid-template-columns: minmax(0, 1fr); }
  .konto-eintrag .konto-betrag { text-align: left; margin-top: 6px; }
  .konto-btn-reihe { gap: 8px; }
  .konto-btn-reihe .konto-btn { width: 100%; }
  .konto-feld { max-width: none; }
  /* Die Wortmarke braucht auf dem Telefon die ganze Breite; das Abzeichen
     sagt ohnehin dasselbe wie die Überschrift darunter. */
  .konto-page .upgrade-nav-badge { display: none; }
}

/* Rechnerposten: Beschriftung, Betrag, Herkunft — drei Zeilen fester Ordnung,
   damit die Beträge nebeneinander auf einer Höhe stehen. */
.calc-item small {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--fg-muted);
}
.calc-slider-marks span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.calc-slider-marks span i {
  font-style: normal;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}
@media (max-width: 560px) {
  .dq-cite { margin-left: 0; width: 100%; }
}

/* =================================================================
   VORSCHAU OHNE WERTE  (Konto ohne bezahlten Zugang)

   Der Server liefert diesen Konten jede Zeile ohne Betrag, Fläche,
   Termin und Kennung; `meta.previewOnly` schaltet hier um. Die Sperre
   ist bewusst ruhig gestaltet: sie soll zeigen, wie das Produkt
   aussieht, nicht mit Schlössern zuschreien. Ein Verwischen (blur)
   wäre hier falsch — es sähe nach verborgenen Werten aus, die im
   Druckbild oder in den Entwicklerwerkzeugen doch dastehen. Die Werte
   sind nicht verborgen, sie sind nicht da.
   ================================================================= */

.card-locked {
  position: relative;
  border-style: dashed;
}
.card-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 9px,
    var(--line-soft) 9px 10px
  );
  opacity: .5;
}
[data-theme="dark"] .card-locked::after { opacity: .35; }

/* Der Platzhaltertext steht in der Ziffernschrift, damit er dieselbe
   Spalte hält wie die Zahl, die er vertritt. */
[data-access="preview"] .card-locked .fig b,
[data-access="preview"] .card-locked .konto-num {
  font-family: var(--font-mono);
  color: var(--fg-muted);
  font-weight: 600;
}

/* Abgeschaltete Bedienelemente: erkennbar aus, nicht bloss blass. */
.field-locked { opacity: .55; }
.field-locked label,
.field-locked select,
.field-locked input { cursor: not-allowed; }

.sumline-locked {
  font-size: 12.5px;
  color: var(--fg-3);
  font-style: normal;
}

/* Hinweisstreifen über dem Raster. Ohne ihn sieht der Interessent
   tausende leere Karten und erfährt den Grund nur im Kontomenü. */
.preview-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid var(--border-emerald);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.55;
}
.preview-note b { color: var(--fg); font-weight: 700; }
.preview-note a {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #046c50, #05815b);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
[data-theme="dark"] .preview-note a {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
}
@media (max-width: 620px) {
  .preview-note a { margin-left: 0; width: 100%; justify-content: center; }
}

/* =================================================================
   REVERSE BIDDING CALCULATOR & KI-GUTACHTEN-RÖNTGENBLICK
   ================================================================= */

/* --- Modus-Umschalter im Rechner --- */
.calc-mode-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.calc-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.calc-mode-btn:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.calc-mode-btn.active {
  background: var(--bg-hover);
  color: var(--fg);
  border: 1px solid var(--line-highlight);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- Strategie-Auswahl (Flip vs Rent) --- */
.rev-strategy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.rev-strat-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: all .15s ease;
}
.rev-strat-btn b { color: var(--fg); font-size: 13.5px; }
.rev-strat-btn small { color: var(--fg-3); font-size: 11px; }
.rev-strat-btn:hover { border-color: var(--line-highlight); }
.rev-strat-btn.active {
  border-color: var(--accent);
  background: rgba(16, 185, 129, 0.08);
}
.rev-strat-btn.active b { color: var(--accent-2); }

/* --- Inputs & Pills --- */
.rev-inputs-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.rev-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rev-field-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rev-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rev-pill {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .12s ease;
}
.rev-pill:hover { border-color: var(--fg-3); color: var(--fg); }
.rev-pill.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent-2);
}
.rev-num-input {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  width: 100%;
  box-sizing: border-box;
}
.rev-num-input:focus {
  outline: none;
  border-color: var(--accent);
}
.rev-input-addon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-3);
}
.rev-input-addon input { max-width: 150px; }

/* --- Result Hero Card --- */
.bidding-hero-card {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s ease;
}
.bidding-hero-card.status-safe {
  border-color: rgba(16, 185, 129, 0.6);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, var(--bg-card) 100%);
}
.bidding-hero-card.status-risky {
  border-color: rgba(245, 158, 11, 0.6);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, var(--bg-card) 100%);
}
.bidding-hero-card.status-blocked {
  border-color: rgba(239, 68, 68, 0.6);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, var(--bg-card) 100%);
}

.bh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bh-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--fg-2);
}
.status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-safe .status-badge { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.status-risky .status-badge { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.status-blocked .status-badge { background: rgba(239, 68, 68, 0.2); color: #f87171; }

.bh-amount-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.bh-val {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--fg);
}
.status-safe .bh-val { color: #34d399; }
.status-risky .bh-val { color: #fbbf24; }
.status-blocked .bh-val { color: #f87171; }

.btn-apply-bid {
  background: var(--accent);
  color: #041810;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn-apply-bid:hover { opacity: .9; }

.bh-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.bh-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.bh-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bh-item span { font-size: 11px; color: var(--fg-3); }
.bh-item b { font-family: var(--font-mono); font-size: 13px; color: var(--fg); }

/* --- KI-RÖNTGENBLICK TAB --- */
.ai-header-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.ai-header-left {
  max-width: 480px;
}
.ai-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.ai-header-panel h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}
.ai-header-panel p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.btn-ai-scan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-ai-scan:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}
.btn-ai-scan:active { transform: translateY(0); }

.ai-custom-toggle-wrap {
  margin-bottom: 16px;
}
.btn-link-subtle {
  background: transparent;
  border: none;
  color: var(--fg-3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
}
.btn-link-subtle:hover { color: var(--fg-2); text-decoration: underline; }
.ai-custom-box {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-custom-textarea {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 12px;
  border-radius: var(--radius-xs);
  min-height: 100px;
  resize: vertical;
}

/* Spinner */
.ai-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  text-align: center;
}
.ai-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}
.ai-loading-panel b { color: var(--fg); font-size: 14px; }
.ai-loading-sub { color: var(--fg-3); font-size: 12px; }

/* Verdict Hero */
.ai-verdict-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-highlight);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.ai-gauge-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid #34d399;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.05);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.15);
}
.ai-gauge-circle.risk-low { border-color: #34d399; color: #34d399; }
.ai-gauge-circle.risk-med { border-color: #fbbf24; color: #fbbf24; }
.ai-gauge-circle.risk-high { border-color: #f87171; color: #f87171; }
.ai-gauge-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.ai-gauge-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-3);
  margin-top: 3px;
}
.ai-summary-col {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-level-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-2);
}
.ai-summary-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg);
}

/* Red Flags */
.ai-redflags-box {
  padding: 14px 18px;
  background: rgba(239, 68, 68, 0.08);
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.ai-redflags-box h4 {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #f87171;
}
.ai-redflags-box ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
}

/* 4 Pillars */
.ai-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 680px) {
  .ai-pillars-grid { grid-template-columns: 1fr; }
}
.ai-pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg);
}
.apc-head .apc-icon { font-size: 16px; }
.apc-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-2);
}
.apc-list li { margin-bottom: 4px; }
.apc-list li:last-child { margin-bottom: 0; }

/* Tactical Advice */
.ai-tactical-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-sm);
}
.atb-icon { font-size: 24px; line-height: 1; }
.atb-content { display: flex; flex-direction: column; gap: 4px; }
.atb-content b { font-size: 13.5px; color: #34d399; }
.atb-content p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fg); }

/* ==========================================================================
   PREDICTIVE ZUSCHLAGS-KI & BIETER-PSYCHOLOGIE
   ========================================================================== */
.pred-card {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.pred-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pred-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}
.pred-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pred-badge.badge-quiet { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.pred-badge.badge-normal { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.pred-badge.badge-hot { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.pred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  padding: 12px;
  background: var(--bg-3);
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
}
.pred-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pred-stat label {
  font-size: 10.5px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pred-stat b {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 750;
  color: var(--fg);
}
.pred-stat small {
  font-size: 11px;
  color: var(--fg-2);
}

.pred-advice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
}
.pred-advice-icon { font-size: 16px; flex: 0 0 auto; }

/* ==========================================================================
   TOPOGRAPHIE & INFRASTRUKTUR-RADAR
   ========================================================================== */
.topo-card {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.topo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.topo-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}
.topo-slope-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
}
.topo-slope-badge.flat { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.topo-slope-badge.moderate { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.topo-slope-badge.steep { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.topo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.topo-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
}
.topo-item label {
  font-size: 10.5px;
  color: var(--fg-3);
  text-transform: uppercase;
}
.topo-item b {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
}
.topo-item small {
  font-size: 11px;
  color: var(--fg-2);
}

.topo-view-banner {
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.3);
  font-size: 12px;
  color: #38bdf8;
  font-weight: 600;
}