:root{
  --bg:#f7f7f9;
  --surface:#ffffff;
  --surface-2:#f9fafb;
  --text:#0b0b0f;
  --text-2:#374151;
  --muted:#6b7280;
  --muted-2:#9ca3af;
  --primary:#0a84ff;
  --primary-ink:#ffffff;
  --primary-kraeftig:#2563eb;
  --ring:rgba(10,132,255,.25);
  --outline:#e5e7eb;
  --outline-2:#d1d5db;
  --shadow:0 1px 2px rgba(11,11,15,.04);
  --shadow-leiste:2px 0 8px rgba(11,11,15,.08);
  --hover-bg:#f5f6f8;
  --green-bg:#ecfdf5;
  --green-border:#a7f3d0;
  --green-text:#065f46;
  --green-kraeftig:#059669;
  --amber-bg:#fffbeb;
  --amber-border:#fcd34d;
  --amber-text:#92400e;
  --amber-kraeftig:#d97706;
  --blau-bg:#eff6ff;
  --blau-border:#bfdbfe;
  --blau-text:#1e40af;
  --rot-bg:#fef2f2;
  --rot-border:#fca5a5;
  --rot-text:#991b1b;
  --violett-bg:#faf5ff;
  --violett-border:#e9d5ff;
  --violett-text:#6b21a8;
  --violett-kraeftig:#8b5cf6;
  /* Eine verstrichene Frist -- und sonst nichts. */

  --mahnung:#b91c1c;
  --mahnung-hell:#ef4444;
  --slate-bg:#f1f5f9;
  --slate-border:#cbd5e1;
  --slate-text:#0f172a;
  --umkehr-bg:#1f2937;
  --umkehr-text:#f3f4f6;
  --radius:3px;
  --radius-sm:2px;
  --radius-xs:2px;
  --leiste-schmal:64px;
  --leiste-breit:240px;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --satzspiegel:210mm;
  color-scheme: light;
}

/* ============================================================
   Die dunkle Fassung.

   Nicht die helle mit umgedrehter Helligkeit: reines Schwarz auf
   reinem Weiss blendet in der einen Richtung so wie in der anderen.
   Der Grund ist ein sehr dunkles Blaugrau, die Flaeche darueber
   eine Spur heller -- so bleibt die Schichtung sichtbar, ohne dass
   Schatten noetig waeren, die auf dunklem Grund ohnehin nicht wirken.
   Getrennt wird stattdessen durch Linien.

   Die Signalfarben werden heller und ihre Flaechen dunkler: auf
   dunklem Grund traegt ein kraeftiges Rot den Kontrast nicht, ein
   helles schon.
   ============================================================ */

:root[data-thema="dunkel"]{
  --bg:#0e1116;
  --surface:#151a21;
  --surface-2:#1b212a;
  --text:#e8eaed;
  --text-2:#c3c8d0;
  --muted:#8b93a1;
  --muted-2:#6c7684;
  --primary:#4da3ff;
  --primary-ink:#0b0e12;
  --primary-kraeftig:#6cb4ff;
  --ring:rgba(77,163,255,.3);
  --outline:#252c36;
  --outline-2:#333c48;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-leiste:2px 0 10px rgba(0,0,0,.45);
  --hover-bg:#1c222b;
  --green-bg:#10261d;
  --green-border:#1f5c42;
  --green-text:#6ee7b7;
  --green-kraeftig:#34d399;
  --amber-bg:#2a2011;
  --amber-border:#6b5220;
  --amber-text:#fbbf24;
  --amber-kraeftig:#f59e0b;
  --blau-bg:#12203a;
  --blau-border:#1e3a6b;
  --blau-text:#93c5fd;
  --rot-bg:#2a1416;
  --rot-border:#6b2529;
  --rot-text:#fca5a5;
  --violett-bg:#1d1630;
  --violett-border:#4c2f75;
  --violett-text:#d8b4fe;
  --violett-kraeftig:#a78bfa;
  --mahnung:#f87171;
  --mahnung-hell:#fca5a5;
  --slate-bg:#1b212a;
  --slate-border:#333c48;
  --slate-text:#e8eaed;
  --umkehr-bg:#e8eaed;
  --umkehr-text:#151a21;
  color-scheme: dark;
}


.zahl,
.aktenzeichen,
.fundstelle,
.fna-number,
time,
td.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

/* ====== CRITICAL: Prevent Horizontal Overflow ====== */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { 
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.no-underline { 
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ====== Layout Container ====== */
.container-app {
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
  overflow-x: hidden;
}

@media (min-width: 640px) { 
  .container-app { 
    padding-inline: 1.5rem;
  } 
}

@media (min-width: 1024px) { 
  .container-app { 
    padding-inline: 2rem;
  } 
}

/* ====== Grid Layout ====== */
.grid-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .grid-layout {
    grid-template-columns: 2fr 10fr;
    gap: 1.5rem;
  }
}

.grid-layout > * {
  min-width: 0;
  overflow: hidden;
}

/* ====== Sticky Sidebar ====== */
.sidebar-sticky {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  min-width: 0;
}

/* ====== Card Components ====== */
.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.2s ease;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 640px) {
  .card {
    padding: 1.25rem;
  }
}

.card:hover {
  border-color: var(--outline-2);
}

.card-muted { 
  color: var(--muted);
  font-size: 0.95rem;
}

/* ====== Buttons ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.875rem;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--hover-bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .btn {
    padding: 0 1rem;
    height: 40px;
    font-size: 0.95rem;
  }
}

.btn:hover {
  filter: brightness(0.97);
}

.btn:focus { 
  outline: 4px solid var(--ring);
  outline-offset: 1px;
}

.btn-primary { 
  background: var(--primary);
  color: var(--primary-ink);
}

.btn-primary:hover {
  background: rgba(10,132,255,0.9);
}

.btn-ghost { 
  background: var(--surface);
  border-color: var(--outline);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--hover-bg);
}

.btn-danger { 
  background: var(--mahnung-hell);
  color: var(--primary-ink);
}

.btn-muted { 
  background: var(--umkehr-bg);
  color: var(--primary-ink);
}

.btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ====== Chips ====== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 26px;
  padding: 0 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--outline);
  background: var(--slate-bg);
  color: var(--text);
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .chip {
    height: 28px;
    padding: 0 0.75rem;
    font-size: 0.8rem;
  }
}

.chip svg {
  width: 0.75rem;
  height: 0.75rem;
}

.chip:hover {
  filter: brightness(0.97);
}

.chip-green { 
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green-text);
}

.chip-amber { 
  background: var(--amber-bg);
  border-color: var(--amber-border);
  color: var(--amber-text);
}

.chip-slate { 
  background: var(--slate-bg);
  border-color: var(--slate-border);
  color: var(--slate-text);
}

.chip.mini {
  padding: 0.15rem 0.45rem;
  height: auto;
  font-size: 0.65rem;
}

/* ====== Form Elements ====== */
.input,
.select,
.textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--outline);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  height: 40px;
  font-size: 0.95rem;
  transition: 0.15s ease;
}

.textarea { 
  min-height: 120px;
  padding: 10px 12px;
  height: auto;
}

.input:focus,
.select:focus,
.textarea:focus { 
  outline: 4px solid var(--ring);
  border-color: var(--primary);
}

.label { 
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text-2);
}

/* ====== DASHBOARD ====== */
.stats-container {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }
}

@media (min-width: 768px) {
  .stats-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
  }
}

.stats-container > * {
  min-width: 0;
  overflow: hidden;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 0.875rem;
  padding-left: 1.25rem;
  position: relative;
  box-shadow: var(--shadow);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 640px) {
  .stat-card {
    padding: 1rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 768px) {
  .stat-card {
    padding: 1.25rem;
    padding-left: 1.75rem;
  }
}

.stat-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.5rem 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (min-width: 640px) {
  .stat-value {
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 2rem;
  }
}

.stat-red .stat-indicator { background: #ef4444; }
.stat-red .stat-value { color: #ef4444; }
.stat-amber .stat-indicator { background: #f59e0b; }
.stat-amber .stat-value { color: #f59e0b; }
.stat-blue .stat-indicator { background: var(--primary); }
.stat-blue .stat-value { color: var(--primary); }
.stat-green .stat-indicator { background: #10b981; }
.stat-green .stat-value { color: #10b981; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-grid {
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
  }
}

.dashboard-grid > * {
  min-width: 0;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--outline);
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.card-title {
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

@media (min-width: 640px) {
  .card-title {
    font-size: 0.95rem;
  }
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  overflow: hidden;
}

.critical-card {
  border-color: rgba(220, 38, 38, 0.3);
  background: var(--rot-bg);
}

/* ====== Briefing Items ====== */
.briefing-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 640px) {
  .briefing-item {
    padding: 1rem;
    align-items: center;
  }
}

.briefing-item:hover {
  background: var(--hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.briefing-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* .briefing-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .briefing-title {
    font-size: 0.9rem;
    -webkit-line-clamp: 1;
    white-space: nowrap;
  }
} */

.briefing-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.35rem;
  flex-wrap: wrap;
  overflow: hidden;
}

@media (min-width: 640px) {
  .briefing-meta {
    font-size: 0.75rem;
    gap: 0.5rem;
  }
}

.briefing-summary {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .briefing-summary {
    font-size: 0.8rem;
  }
}

.score-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .score-badge {
    min-width: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.95rem;
  }
}

.score-low {
  background: var(--slate-bg);
  color: var(--muted);
}

.score-medium {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.score-high {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.score-critical {
  background: var(--rot-bg);
  color: var(--mahnung);
}

/* ====== Status & Activity ====== */
.status-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--muted);
  gap: 0.5rem;
  flex-wrap: wrap;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.activity-item {
  padding: 0.5rem;
  background: var(--slate-bg);
  border-radius: var(--radius-xs);
  min-width: 0;
  overflow: hidden;
}

.activity-title {
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--green-kraeftig);
  border-radius: 50%;
  flex-shrink: 0;
}

.quick-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
}

.empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  opacity: 0.3;
}

.link-primary {
  color: var(--primary);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.link-primary:hover {
  text-decoration: underline;
}

.bg-critical-light {
  background: rgba(220,38,38,0.1);
  color: var(--mahnung-hell);
  border-color: rgba(220,38,38,0.3);
}

/* ====== APP LAYOUT ====== */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
  padding: 1rem 0;
  width: 100%;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .page-header {
    padding: 1.5rem 0;
  }
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .header-content {
    padding: 0 1.5rem;
  }
}

main {
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  main {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  main {
    padding: 2rem 1.5rem;
  }
}

/* ====== Alerts ====== */
.alert {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-xs);
  margin-bottom: 1rem;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  max-width: 100%;
  overflow: hidden;
}

.alert-success {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green-text);
}

.alert-error {
  background: var(--rot-bg);
  border-color: var(--rot-border);
  color: var(--rot-text);
}

/* ====== Footer ====== */
footer {
  background: var(--surface);
  border-top: 1px solid var(--outline);
  margin-top: auto;
  width: 100%;
  overflow-x: hidden;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .footer-content {
    padding: 2rem 1.5rem;
  }
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--outline);
}

@media (min-width: 768px) {
  .footer-main {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.footer-brand h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .footer-brand h3 {
    font-size: 1.125rem;
  }
}

.footer-brand p {
  font-size: 0.8rem;
  color: var(--muted);
}

@media (min-width: 768px) {
  .footer-brand p {
    font-size: 0.875rem;
  }
}

.footer-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .footer-links {
    gap: 1.5rem;
  }
}

.footer-links a {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

@media (min-width: 768px) {
  .footer-links a {
    font-size: 0.875rem;
  }
}

.footer-links a:hover {
  color: var(--primary);
}

.footer-copyright {
  text-align: center;
  padding-top: 1rem;
  font-size: 0.7rem;
  color: var(--muted);
}

@media (min-width: 768px) {
  .footer-copyright {
    padding-top: 1.5rem;
    font-size: 0.75rem;
  }
}

/* ====== Dev Banner ====== */
.dev-banner {
  background: linear-gradient(90deg, var(--mahnung), var(--primary), var(--mahnung));
  background-size: 200% 100%;
  animation: gradient-shift 6s linear infinite;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  color: var(--primary-ink);
  font-weight: 500;
}

@media (min-width: 768px) {
  .dev-banner {
    font-size: 0.75rem;
  }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ====== NAVBAR ====== */
.navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  width: 100%;
  max-width: 100%;
}

.navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.navbar-main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.navbar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.navbar-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .navbar-title {
    font-size: 1.25rem;
  }
}

.navbar-menu {
  display: none;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.navbar-menu::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .navbar-menu {
    display: flex;
  }
}

.navbar-link {
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.navbar-link:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.navbar-link.active {
  background: var(--blau-bg);
  color: var(--primary);
}

.navbar-user {
  display: none;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .navbar-user {
    display: flex;
  }
}

.navbar-username {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .navbar-username {
    display: flex;
  }
}

.navbar-logout {
  margin: 0;
}

.navbar-logout-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--outline);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.navbar-logout-btn:hover {
  background: var(--hover-bg);
  border-color: var(--outline-2);
}

.navbar-logout-btn span {
  display: none;
}

@media (min-width: 1024px) {
  .navbar-logout-btn span {
    display: inline;
  }
}

.navbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--outline);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.navbar-toggle:hover {
  background: var(--hover-bg);
}

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

.navbar-mobile {
  display: none;
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
  padding: 0.5rem 1rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.navbar-mobile.active {
  display: block;
}

@media (min-width: 768px) {
  .navbar-mobile {
    display: none !important;
  }
}

.navbar-mobile-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.navbar-mobile-link:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.navbar-mobile-link.active {
  background: var(--blau-bg);
  color: var(--primary);
}

.navbar-mobile-logout {
  margin: 0;
}

/* ====== BRIEFING SPECIFIC ====== */
.briefing-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .briefing-container {
        padding: 1.5rem;
    }
}

.briefing-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    padding: 0.5rem;
    box-shadow: var(--shadow);
}

.view-toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.view-toggle-btn:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.view-toggle-btn.active {
    background: var(--primary);
    color: var(--primary-ink);
    border-color: var(--primary);
}

.view-toggle-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.filter-section {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--outline);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--outline);
    cursor: pointer;
}

@media (min-width: 768px) {
    .filter-toggle {
        display: none;
    }
}

.filter-content {
    padding: 1rem;
}

@media (max-width: 767px) {
    .filter-content {
        display: none;
    }
    
    .filter-content.active {
        display: block;
    }
}

.filter-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
    .filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.briefing-list-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1rem;
    border-bottom: 1px solid var(--outline);
    transition: background 0.2s;
}

.briefing-list-item:hover {
    background: var(--surface-2);
}

.briefing-list-item:last-child {
    border-bottom: none;
}

.tag-chip {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    margin: 0.125rem;
    background: var(--hover-bg);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-2);
}

.new-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--amber-bg);
    color: var(--amber-text);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-mobile {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
    width: 100%;
}

@media (min-width: 640px) {
    .btn-mobile {
        width: auto;
    }
}

.urgency-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.urgency-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.urgency-high {
    background: var(--mahnung-hell);
}

.urgency-medium {
    background: var(--amber-kraeftig);
}

.urgency-low {
    background: var(--muted);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.space-y-2 > * + * {
    margin-top: 0.5rem;
}

/* ====== MOBILE OPTIMIERUNG ====== */
@media (max-width: 767px) {
    .briefing-container {
        padding: 0.5rem;
    }
    
    .card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .briefing-list-item {
        padding: 0.75rem;
    }
    
    main {
        padding: 0.75rem;
    }
    
    .filter-section {
        margin-bottom: 1rem;
    }
    
    .briefing-view-toggle {
        margin-bottom: 1rem;
        padding: 0.375rem;
    }
    
    .view-toggle-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .view-toggle-btn svg {
        width: 1rem;
        height: 1rem;
    }
}

/* ====== Utility Classes ====== */
.flex { display: flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-danger { color: #ef4444; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.border { border: 1px solid var(--outline); }
.border-t { border-top: 1px solid var(--outline); }
.border-b { border-bottom: 1px solid var(--outline); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius); }
.rounded-xl { border-radius: var(--radius); }
.rounded-2xl { border-radius: var(--radius); }
.rounded-full { border-radius: var(--radius-sm); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); }
.shadow-md { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }

.transition { 
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.w-full { width: 100%; max-width: 100%; }
.w-auto { width: auto; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.min-w-0 { min-width: 0; }


/* ================= Seitenleiste ================= */

.leiste-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--text);
  color: var(--primary-ink);
  padding: .6rem 1rem;
  text-decoration: none;
}

.leiste-skip:focus {
  left: 0;
}

.leiste {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 90;
  width: var(--leiste-breit);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-end: 1px solid var(--outline);
  overflow: hidden;
  transition: width .12s ease-out;
}

html.leiste-schmal .leiste {
  width: var(--leiste-schmal);
}

html.leiste-schmal .leiste:hover,
html.leiste-schmal .leiste:focus-within {
  width: var(--leiste-breit);
  box-shadow: var(--shadow-leiste);
}

.leiste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-block-end: 1px solid var(--outline);
  flex-shrink: 0;
}

.leiste-marke {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-inline-start: 1.1rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
}

.leiste-marke-zeichen {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  width: 22px;
  flex-shrink: 0;
}

.leiste-klapp {
  width: 34px;
  height: 34px;
  margin-inline-end: .5rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: .75rem;
}

.leiste-klapp:hover {
  background: var(--hover-bg);
  border-color: var(--outline);
  color: var(--text);
}

.leiste-klapp[aria-pressed="true"] i {
  transform: rotate(45deg);
}

.leiste-rollen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.leiste-liste {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
}

.leiste-gruppe {
  margin: .35rem 0 .1rem;
  padding-inline: 1.1rem;
  padding-block-start: .7rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-block-start: 1px solid var(--outline);
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.2rem;
}

.leiste-fuss {
  padding: .4rem 0;
  border-block-start: 1px solid var(--outline);
  flex-shrink: 0;
}

.leiste-ziel {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 40px;
  padding-inline: 1.1rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  border-inline-start: 2px solid transparent;
  transition: background .1s ease, color .1s ease;
}

.leiste-ziel-knopf {
  width: 100%;
  background: none;
  border: 0;
  border-inline-start: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
}

.leiste-ziel:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.leiste-ziel.ist-aktiv {
  color: var(--text);
  background: var(--hover-bg);
  border-inline-start-color: var(--primary);
  font-weight: 600;
}

.leiste-zeichen {
  width: 22px;
  flex-shrink: 0;
  text-align: center;
  font-size: .95rem;
}

.leiste-abmelden {
  margin: 0;
}

html.leiste-schmal .leiste-text {
  opacity: 0;
  transition: opacity .1s ease;
}

html.leiste-schmal .leiste:hover .leiste-text,
html.leiste-schmal .leiste:focus-within .leiste-text {
  opacity: 1;
}

html.leiste-schmal .leiste-klapp {
  opacity: 0;
}

html.leiste-schmal .leiste:hover .leiste-klapp,
html.leiste-schmal .leiste:focus-within .leiste-klapp {
  opacity: 1;
}

body.hat-leiste .main-container,
body.hat-leiste > footer {
  margin-inline-start: var(--leiste-breit);
  width: calc(100% - var(--leiste-breit));
  max-width: calc(100% - var(--leiste-breit));
  transition: margin-inline-start .12s ease-out, width .12s ease-out;
}

html.leiste-schmal body.hat-leiste .main-container,
html.leiste-schmal body.hat-leiste > footer {
  margin-inline-start: var(--leiste-schmal);
  width: calc(100% - var(--leiste-schmal));
  max-width: calc(100% - var(--leiste-schmal));
}

/* ================= Fussleiste, mobil ================= */

.fussleiste,
.mehr-blatt {
  display: none;
}

@media (max-width: 899px) {
  .leiste {
    display: none;
  }

  body.hat-leiste .main-container,
  body.hat-leiste > footer {
    margin-inline-start: 0;
    width: 100%;
    max-width: 100%;
  }

  body.hat-leiste {
    padding-block-end: calc(64px + env(safe-area-inset-bottom) + 1.5rem);
    --leiste-unten: calc(64px + env(safe-area-inset-bottom));
  }

  .fussleiste {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-block-start: 1px solid var(--outline);
    padding-block-end: env(safe-area-inset-bottom);
  }

  .fussleiste-ziel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 60px;
    padding: .4rem .2rem;
    background: none;
    border: 0;
    border-block-start: 2px solid transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: .65rem;
    font-family: inherit;
    cursor: pointer;
  }

  .fussleiste-ziel i {
    font-size: 1.05rem;
  }

  .fussleiste-ziel.ist-aktiv {
    color: var(--primary);
    border-block-start-color: var(--primary);
  }

  .mehr-blatt {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: block;
    background: rgba(11,11,15,.4);
  }

  .mehr-blatt[hidden] {
    display: none;
  }

  .mehr-blatt-inhalt {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    max-height: 85dvh;
    overflow-y: auto;
    background: var(--surface);
    border-start-start-radius: 14px;
    border-start-end-radius: 14px;
    border-block-start: 1px solid var(--outline);
    padding: .375rem 0 calc(.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(11, 11, 15, .12);
  }

  /* Der Griff sagt ohne Worte, dass sich das Blatt wegwischen laesst. */
  .mehr-blatt-griff {
    width: 36px;
    height: 4px;
    margin: .5rem auto .25rem;
    border-radius: var(--radius-sm);
    background: var(--outline);
  }

  .mehr-blatt-gruppe {
    margin: .75rem 0 .125rem;
    padding-inline: 1.25rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
  }

  .mehr-blatt-gruppe:first-of-type {
    margin-block-start: .25rem;
  }

  .mehr-blatt-ziel {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    padding: .8rem 1.25rem;
    background: none;
    border: 0;
    color: var(--text);
    text-decoration: none;
    font-size: .9375rem;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
  }

  .mehr-blatt-ziel i {
    width: 1.125rem;
    font-size: .9375rem;
    text-align: center;
    color: var(--muted);
    flex: none;
  }

  .mehr-blatt-ziel:active {
    background: var(--hover-bg);
  }

  .mehr-blatt-ziel.ist-aktiv {
    color: var(--primary);
    font-weight: 600;
  }

  .mehr-blatt-ziel.ist-aktiv i {
    color: var(--primary);
  }

  .mehr-blatt-schloss {
    margin-inline-start: auto;
    font-size: .75rem !important;
  }

  .mehr-blatt-abmelden {
    margin: .375rem 0 0;
    border-block-start: 1px solid var(--outline);
    padding-block-start: .375rem;
  }

  .mehr-blatt-inhalt form {
    margin: 0;
  }

  body.blatt-offen {
    overflow: hidden;
  }
}

/* ================= Satzspiegel fuer Berichte ================= */

.dokument {
  max-width: var(--satzspiegel);
  margin-inline: auto;
  padding: 2rem 25mm;
  background: var(--surface);
  border: 1px solid var(--outline);
}

.dokument p,
.dokument li {
  max-width: 75ch;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .dokument {
    padding: 1.25rem 1rem;
    border-inline: 0;
  }
}

@media print {
  .leiste,
  .fussleiste,
  .mehr-blatt,
  .page-header,
  body > footer,
  .btn,
  .no-print {
    display: none !important;
  }

  body.hat-leiste .main-container {
    margin-inline-start: 0;
  }

  .dokument {
    max-width: none;
    border: 0;
    padding: 0;
  }
}

/* Kopfzeile darf umbrechen, sonst schieben sich Titel und Datum uebereinander */
.page-header .flex {
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.page-header h1,
.page-header h2 {
  margin: 0;
  min-width: 0;
}

/* Symbole als Strichzeichnung mit Verlauf, keine Emoji */
.stat-icon-svg {
  width: 26px;
  height: 26px;
  display: block;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Ausweg fuer abgelaufene Testzeitraeume: ein Rechtsgebiet dauerhaft kostenlos */
.kostenlos-ausweg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius);
}

.kostenlos-ausweg p {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
  max-width: 62ch;
}

.kostenlos-ausweg form {
  margin: 0;
  flex-shrink: 0;
}

/* Vorschau im Onboarding: die Folge vor der Entscheidung */
.vorschau {
  margin-block-start: 1rem;
  padding: .9rem 1.1rem;
  background: var(--slate-bg);
  border: 1px solid var(--outline);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius);
}

.vorschau-kopf {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.vorschau-quellen {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}

.vorschau-quellen[hidden] {
  display: none;
}

.vorschau-quellen li {
  padding: .15rem .45rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .75rem;
  color: var(--muted);
}

.vorschau-quellen b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.vorschau-rand {
  margin: .6rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--muted);
}

.vorschau-rand[hidden] {
  display: none;
}

.vorschau[hidden] {
  display: none;
}

.vorschau-zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.vorschau-text {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.45;
}

.vorschau.ist-am-rechnen .vorschau-zahl {
  opacity: .35;
}

/* Tarifwahl am Ende des Onboardings, kein Preis */
.tarifwahl {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  background: var(--surface);
}

.tarifwahl legend {
  padding-inline: .4rem;
  font-size: .95rem;
  font-weight: 700;
}

.tarifwahl-feld {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .8rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.tarifwahl-feld + .tarifwahl-feld {
  margin-block-start: .6rem;
}

.tarifwahl-feld:has(input:checked) {
  border-color: var(--primary);
  background: var(--slate-bg);
}

.tarifwahl-feld input {
  margin-block-start: .2rem;
  flex-shrink: 0;
}

.tarifwahl-inhalt {
  display: block;
  min-width: 0;
}

.tarifwahl-titel {
  display: block;
  font-weight: 600;
  font-size: .95rem;
}

.tarifwahl-text {
  display: block;
  margin-block-start: .2rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

/* ================= Onboarding ================= */

.ob-body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }

.ob-kopf { background: var(--surface); border-block-end: 1px solid var(--outline); position: sticky; top: 0; z-index: 20; }
.ob-kopf-inhalt { max-width: 1100px; margin-inline: auto; padding: .8rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ob-marke { display: flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.02em; flex-shrink: 0; }
.ob-marke-zeichen { font-family: var(--mono); font-size: .8rem; }

.ob-schritte { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; overflow-x: auto; }
.ob-schritt { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.ob-schritt-zahl { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--outline); border-radius: var(--radius-sm); font-family: var(--mono); font-size: .72rem; flex-shrink: 0; }
.ob-schritt.ist-aktiv { color: var(--text); font-weight: 600; }
.ob-schritt.ist-aktiv .ob-schritt-zahl { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.ob-schritt.ist-erledigt .ob-schritt-zahl { background: var(--slate-bg); color: var(--text); }

.ob-konto { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }
.ob-konto a, .ob-konto button { background: none; border: 0; padding: 0; color: var(--muted); font-size: .82rem; font-family: inherit; text-decoration: none; cursor: pointer; }
.ob-konto a:hover, .ob-konto button:hover { color: var(--text); text-decoration: underline; }
.ob-konto form { margin: 0; }

.ob-haupt { flex: 1; padding: 2rem 1.25rem 3rem; }
.ob-blatt { max-width: 720px; margin-inline: auto; background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius); padding: 2rem; }
.ob-blatt h1 { margin: 0 0 .6rem; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.02em; }
.ob-vorspann { margin: 0 0 1.75rem; color: var(--muted); font-size: .95rem; line-height: 1.55; max-width: 62ch; }

.ob-gegenueber { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-block-end: 1.75rem; }
.ob-spalte { border: 1px solid var(--outline); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; }
.ob-spalte-ja { border-inline-start: 3px solid var(--primary); }
.ob-spalte-nein { border-inline-start: 3px solid var(--slate-border); background: var(--slate-bg); }
.ob-spalte h2 { margin: 0 0 .7rem; font-size: .95rem; }
.ob-spalte ul { margin: 0; padding-inline-start: 1.1rem; }
.ob-spalte li { margin-block-end: .55rem; font-size: .875rem; line-height: 1.5; }
.ob-spalte li:last-child { margin-block-end: 0; }

.ob-form { margin: 0; }
.ob-zustimmung { display: flex; align-items: flex-start; gap: .7rem; margin-block-end: 1.5rem; font-size: .875rem; line-height: 1.5; }
.ob-zustimmung input { margin-block-start: .2rem; flex-shrink: 0; }
.ob-knopfreihe { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.ob-suche { margin-block-end: .9rem; }
.ob-suche-label { display: block; margin-block-end: .3rem; font-size: .82rem; font-weight: 600; color: var(--muted); }

.ob-baum { max-height: 380px; overflow-y: auto; border: 1px solid var(--outline); border-radius: var(--radius-sm); }
.ob-ast { display: flex; align-items: center; gap: .7rem; padding: .45rem .8rem; border-block-end: 1px solid var(--outline); cursor: pointer; font-size: .875rem; line-height: 1.35; }
.ob-ast[hidden] { display: none; }
.ob-ast:last-child { border-block-end: 0; }
.ob-ast:hover { background: var(--hover-bg); }
.ob-ast input { flex-shrink: 0; }
.ob-ast-nummer { font-size: .72rem; color: var(--muted); min-width: 3.2rem; flex-shrink: 0; }
.ob-ebene-1 { background: var(--slate-bg); font-weight: 600; }
.ob-ebene-2 { padding-inline-start: 1.6rem; }
.ob-ebene-3 { padding-inline-start: 2.6rem; }
.ob-ebene-4 { padding-inline-start: 3.6rem; }
.ob-ebene-3 .ob-ast-name, .ob-ebene-4 .ob-ast-name { color: #4b5563; }

.ob-leer { margin: .8rem 0 0; color: var(--muted); font-size: .875rem; }
.ob-leer[hidden] { display: none; }

.ob-hinweis { margin: .9rem 0 0; padding: .7rem .9rem; background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--radius-sm); color: var(--amber-text); font-size: .85rem; line-height: 1.45; }
.ob-hinweis[hidden] { display: none; }

.ob-gewaehlt { margin-block-start: 1rem; }
.ob-gewaehlt[hidden] { display: none; }
.ob-gewaehlt-label { display: block; margin-block-end: .45rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.ob-gewaehlt-liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.ob-gewaehlt-liste .chip { cursor: pointer; border: 1px solid var(--outline); }

.ob-mehr { margin-block-start: 1.5rem; border: 1px solid var(--outline); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.ob-mehr summary { cursor: pointer; font-size: .9rem; font-weight: 600; }
.ob-mehr-text { margin: .6rem 0 .8rem; color: var(--muted); font-size: .85rem; }
.ob-kacheln { display: grid; gap: .5rem; grid-template-columns: 1fr; }
.ob-kachel { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--outline); border-radius: var(--radius-sm); font-size: .85rem; cursor: pointer; }
.ob-kachel:has(input:checked) { border-color: var(--primary); background: var(--slate-bg); }

.ob-wahl { margin: 0 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--outline); border-radius: var(--radius-sm); }
.ob-wahl legend { padding-inline: .35rem; font-size: .92rem; font-weight: 700; }
.ob-wahl-feld { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; border: 1px solid var(--outline); border-radius: var(--radius-sm); cursor: pointer; }
.ob-wahl-feld + .ob-wahl-feld { margin-block-start: .55rem; }
.ob-wahl-feld:has(input:checked) { border-color: var(--primary); background: var(--slate-bg); }
.ob-wahl-feld input { margin-block-start: .2rem; flex-shrink: 0; }
.ob-wahl-titel { display: block; font-weight: 600; font-size: .92rem; }
.ob-wahl-text { display: block; margin-block-start: .2rem; color: var(--muted); font-size: .85rem; line-height: 1.45; }

.ob-zeitwahl { display: flex; align-items: center; gap: .7rem; margin-block-end: 1.5rem; flex-wrap: wrap; }
.ob-zeitwahl[hidden] { display: none; }
.ob-zeitwahl label { font-size: .875rem; font-weight: 600; }
.ob-zeitwahl .input { width: auto; }
.ob-zeitwahl-hinweis { color: var(--muted); font-size: .82rem; }

.ob-zusammenfassung { margin: 0 0 1.75rem; border: 1px solid var(--outline); border-radius: var(--radius-sm); }
.ob-zusammenfassung > div { display: grid; grid-template-columns: 1fr; gap: .3rem; padding: .85rem 1.1rem; border-block-end: 1px solid var(--outline); }
.ob-zusammenfassung > div:last-child { border-block-end: 0; }
.ob-zusammenfassung dt { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ob-zusammenfassung dd { margin: 0; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .35rem; }

.ob-fuss { display: flex; justify-content: center; gap: 1.25rem; padding: 1.25rem; border-block-start: 1px solid var(--outline); background: var(--surface); }
.ob-fuss a { color: var(--muted); font-size: .82rem; text-decoration: none; }
.ob-fuss a:hover { color: var(--text); text-decoration: underline; }

@media (min-width: 700px) {
  .ob-gegenueber { grid-template-columns: 1fr 1fr; }
  .ob-kacheln { grid-template-columns: 1fr 1fr; }
  .ob-zusammenfassung > div { grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline; }
}

@media (max-width: 699px) {
  .ob-blatt { padding: 1.25rem; }
  .ob-schritt-name { display: none; }
  .ob-schritte { gap: .6rem; }
  .ob-haupt { padding: 1rem .75rem 2rem; }
  .ob-knopfreihe .btn { width: 100%; }
}

/* Fester Hinweis im Onboarding, etwa fehlende Bestaetigung */
.ob-hinweis-fest {
  display: block;
  margin: 0 0 1.5rem;
}

.ob-hinweis-fest strong {
  display: inline;
}

.ob-hinweis-form {
  margin: .7rem 0 0;
}

.ob-hinweis-form .btn {
  height: 32px;
  font-size: .82rem;
}

.ob-auswahl-kuerzen {
  border-color: var(--amber-border);
  background: var(--amber-bg);
}

.ob-auswahl-kuerzen[hidden] {
  display: none;
}

.ob-auswahl-kuerzen legend {
  color: var(--amber-text);
}

.ob-auswahl-kuerzen .ob-wahl-feld {
  background: var(--surface);
}

.ob-kuerzen-text {
  margin: 0 0 .8rem;
  color: var(--amber-text);
  font-size: .85rem;
  line-height: 1.45;
}

.ob-auswahl-kuerzen .fundstelle {
  font-size: .78rem;
  color: var(--muted);
}

.ob-modus { display: inline-flex; border: 1px solid var(--outline); border-radius: var(--radius-sm); overflow: hidden; margin-block-end: 1rem; }
.ob-modus-knopf { padding: .45rem .9rem; font-size: .85rem; background: var(--surface); color: var(--muted); border: 0; cursor: pointer; }
.ob-modus-knopf + .ob-modus-knopf { border-inline-start: 1px solid var(--outline); }
.ob-modus-knopf.ist-aktiv { background: var(--slate-bg); color: var(--text); font-weight: 600; }
.ob-themen { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ob-thema { display: block; padding: .6rem .75rem; border: 1px solid var(--outline); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); }
.ob-thema:hover { background: var(--hover-bg); }
.ob-thema:has(input:checked) { border-color: var(--primary); background: var(--slate-bg); }
.ob-thema input { margin-inline-end: .5rem; }
.ob-thema-name { font-size: .9rem; font-weight: 600; }
.ob-thema-umfasst { display: block; margin-block-start: .2rem; margin-inline-start: 1.4rem; font-size: .75rem; color: var(--muted); line-height: 1.4; }

.kennwort-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block: 1rem 0; padding: .7rem .9rem; border: 1px solid var(--amber-border); background: var(--amber-bg); color: var(--amber-text); border-radius: var(--radius-sm); font-size: .875rem; }

.leiste-ziel.ist-gesperrt { opacity: .6; }
.leiste-schloss { margin-inline-start: auto; font-size: .7rem; }

/* Die untere Leiste liegt fest ueber allem. Jedes Fenster, das bis zum unteren
   Rand reicht, muss ihren Platz aussparen — sonst liegt der Bestaetigungsknopf
   darunter und ist nicht erreichbar. Genau das ist bei der Benachrichtigungs-
   maske zweimal passiert, weil die Regel jeweils nur fuer den Rumpf galt.

   --leiste-unten ist ausserhalb der Leiste 0 und wird in der Medienabfrage
   gesetzt. Fenster rechnen damit, statt die Hoehe erneut zu buchstabieren. */
:root {
  --leiste-unten: 0px;
}

.create-form-content,
.profile-modal-box,
.modal-box,
[data-fenster] {
  max-height: calc(100dvh - 4rem - var(--leiste-unten));
  margin-block-end: calc(2rem + var(--leiste-unten));
}

/* ====== Gesetzeswahl im Umfeld ======
   Ein Treffer ist eine ganze Zeile zum Antippen, kein Wort mit Knopf daneben.
   Auf dem Telefon trifft der Daumen sonst zwischen Kuerzel und Schaltflaeche. */
.gesetze-liste,
.gesetze-treffer {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  overflow: hidden;
}

.gesetze-treffer {
  margin-block-start: .875rem;
}

.gesetze-liste li + li,
.gesetze-treffer li + li {
  border-block-start: 1px solid var(--outline);
}

.gesetze-liste form,
.gesetze-treffer button {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin: 0;
  padding: .75rem .875rem;
  min-height: 48px;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: start;
}

.gesetze-treffer button {
  cursor: pointer;
}

.gesetze-treffer button:active,
.gesetze-treffer button:hover {
  background: var(--hover-bg);
}

.gesetze-kuerzel {
  flex: none;
  min-width: 5.5rem;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 600;
}

.gesetze-titel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .8125rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gesetze-weg,
.gesetze-dazu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* Immer am rechten Rand. Ohne das klebt das Zeichen am Kuerzel, sobald der
     Langtitel auf dem Telefon ausgeblendet ist und nichts mehr schiebt. */
  margin-inline-start: auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.gesetze-weg:hover,
.gesetze-weg:active {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.gesetze-dazu {
  color: var(--primary);
}

.gesetze-suche {
  display: flex;
  gap: .5rem;
}

.gesetze-suche input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding-inline: .75rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;
}

.gesetze-leer {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .875rem;
}

.gesetze-fehler {
  margin: 0 0 .875rem;
  padding: .625rem .75rem;
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-sm);
  background: var(--amber-bg);
  color: var(--amber-text);
  font-size: .875rem;
}

@media (max-width: 560px) {
  /* Auf dem Telefon weicht der Langtitel unter das Kuerzel, statt zu verschwinden.
     Wer BGB von BGBABest unterscheiden will, braucht ihn — nur nicht in derselben
     Zeile. */
  .gesetze-liste form,
  .gesetze-treffer button {
    flex-wrap: wrap;
    row-gap: .125rem;
    padding-block: .625rem;
  }

  .gesetze-kuerzel {
    min-width: 0;
    flex: 1 1 auto;
  }

  .gesetze-titel {
    flex-basis: 100%;
    order: 3;
    white-space: normal;
    font-size: .75rem;
    line-height: 1.35;
  }

  .gesetze-weg,
  .gesetze-dazu {
    order: 2;
  }

  .gesetze-suche { flex-wrap: wrap; }
  .gesetze-suche input { flex-basis: 100%; }
}

.gesetze-vorschlag {
  margin-block-end: 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--slate-border);
  border-radius: var(--radius);
  background: var(--slate-bg);
}

.gesetze-vorschlag-kopf {
  margin: 0 0 .25rem;
  font-size: .9375rem;
  font-weight: 600;
}

.gesetze-vorschlag-text {
  margin: 0 0 .75rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

.gesetze-vorschlag-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
  margin: 0 0 .875rem;
  padding: 0;
  list-style: none;
}

.gesetze-vorschlag-liste li {
  padding: .125rem .4375rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-family: var(--mono);
  font-size: .75rem;
}

.gesetze-vorschlag-mehr {
  font-family: inherit !important;
  border-style: dashed !important;
  color: var(--muted);
}

/* ========== UMFELD AUF DER UEBERSICHT ========== */
.umfeld-kachel-text {
    margin: 0 0 .875rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--muted);
}

.umfeld-kachel-zahlen {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--outline);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.umfeld-kachel-zeile {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .625rem .75rem;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.umfeld-kachel-zeile:hover {
    background: var(--hover-bg);
}

.umfeld-kachel-wert {
    flex: 0 0 2.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.umfeld-kachel-name {
    font-size: .75rem;
    line-height: 1.35;
    color: var(--muted);
}

.umfeld-kachel-warnung {
    display: block;
    margin-top: .75rem;
    padding: .625rem .75rem;
    border: 1px solid var(--outline);
    border-left: 2px solid var(--amber-text);
    border-radius: var(--radius-sm);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--amber-text, var(--amber-text));
    text-decoration: none;
}

.umfeld-kachel-warnung:hover {
    background: var(--hover-bg);
}

/* == Merken-Knopf, ueberall in der Anwendung ============================= */

.merken-knopf {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .5rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: .75rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.merken-knopf:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.merken-knopf[disabled] {
  opacity: .55;
  cursor: default;
}

/* Liegt es schon im Arbeitsbereich, ist der Knopf ein Verweis auf die Karte --
   und muss danach aussehen. Vorher wurde er grau und rahmenlos und stand damit
   schwaecher da als jeder ungeklickte Knopf daneben. */
.merken-knopf.ist-drin {
  border-style: solid;
  border-color: var(--text);
  color: var(--text);
}

.merken-knopf.ist-drin:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Ein Fingerziel von 24 Pixeln Hoehe, das ueber die halbe Bildbreite laeuft, ist
   beides zugleich: schwer absichtlich zu treffen und leicht beim Rollen
   auszuloesen. */
@media (max-width: 700px), (hover: none) {
  .merken-knopf {
    min-height: 2.75rem;
    padding-left: .75rem;
    padding-right: .75rem;
  }
}