/* ============================================================
   b'steuern — Steuerkalender
   Version 1.0.0
   Alle Maße in rem (Basis 16px). Border-Radius global 0.
   ============================================================ */

/* ---------- 1. Tokens (lokal, kollisionsfrei) ---------- */
.kalender-seite {
  --kal-indigo:      #3D2BD5;
  --kal-indigo-08:   rgba(61, 43, 213, 0.08);
  --kal-teal:        #00A1AA;
  --kal-yellow:      #F6DF35;
  --kal-crimson:     #FF0670;
  --kal-ink:         #0E0C1C;
  --kal-ink-70:      rgba(14, 12, 28, 0.68);
  --kal-ink-60:      rgba(14, 12, 28, 0.60);
  --kal-ink-55:      rgba(14, 12, 28, 0.55);
  --kal-ink-50:      rgba(14, 12, 28, 0.50);
  --kal-ink-45:      rgba(14, 12, 28, 0.45);
  --kal-ink-30:      rgba(14, 12, 28, 0.30);
  --kal-ink-20:      rgba(14, 12, 28, 0.18);
  --kal-ink-15:      rgba(14, 12, 28, 0.15);
  --kal-ink-12:      rgba(14, 12, 28, 0.12);
  --kal-ink-line:    rgba(14, 12, 28, 0.09);
  --kal-ink-06:      rgba(14, 12, 28, 0.06);
  --kal-ink-04:      rgba(14, 12, 28, 0.04);
  --kal-ink-02:      rgba(14, 12, 28, 0.02);
  --kal-cream:       #F5EFE3;
  --kal-paper:       #FFFFFF;
  --kal-display:     'FeatureDeck', 'Times New Roman', serif;
  --kal-body:        'General Sans', system-ui, -apple-system, sans-serif;
  --kal-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --kal-haar:        0.0625rem;          /* 1px Haarlinie */
}

/* ---------- 2. Basis ---------- */
.kalender-seite {
  background: var(--kal-cream);
  font-family: var(--kal-body);
  color: var(--kal-ink);
}
.kalender-seite *,
.kalender-seite *::before,
.kalender-seite *::after { box-sizing: border-box; }

.kalender-seite button,
.kalender-seite [role="button"],
.kalender-seite select,
.kalender-seite input {
  font-family: var(--kal-body);
  border-radius: 0;
}

.kalender-seite :focus-visible {
  outline: 0.125rem solid var(--kal-indigo);
  outline-offset: 0.125rem;
}

/* Remixicon ist fill-basiert */
.kalender-seite i[class^="ri-"],
.kalender-seite i[class*=" ri-"] { fill: currentColor; stroke: none; }

.container-bs {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ---------- 3. Header ---------- */
.hero-inhalt {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 7.5rem;
  padding-bottom: 4.5rem;
}
.label-kaps {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kal-indigo);
}
.hero-h1 {
  margin: 0;
  font-family: var(--kal-display);
  font-weight: 500;
  font-size: 4.75rem;
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--kal-ink);
  max-width: 46rem;
  text-wrap: pretty;
}
.hero-lead {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--kal-ink-60);
  max-width: 45rem;
  text-wrap: pretty;
}

/* ---------- 4. Layout ---------- */
.kalender-layout {
  display: grid;
  grid-template-columns: 21.25rem 1fr;
  gap: 2.5rem;
  align-items: start;
  padding-bottom: 6rem;
}
.kalender-spalte {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 1.5rem;
}
.kalender-haupt {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

/* ---------- 5. Karten ---------- */
.karte-bs {
  background: var(--kal-paper);
  border: var(--kal-haar) solid var(--kal-ink-line);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}
.karte-weit { padding: 2rem; gap: 1.5rem; }

.label-grau {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kal-ink-45);
}
.text-hinweis {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--kal-ink-50);
}
.text-fussnote { display: block; padding-top: 1rem; }
.feld-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* ---------- 6. Toggles ---------- */
.schalter-zeile {
  display: flex;
  border: var(--kal-haar) solid var(--kal-indigo);
}
.schalter-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.8125rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: 0;
  border-right: var(--kal-haar) solid var(--kal-indigo);
  background: var(--kal-paper);
  color: var(--kal-ink-55);
  user-select: none;
  transition: background 150ms var(--kal-ease), color 150ms var(--kal-ease), transform 80ms var(--kal-ease);
}
.schalter-btn:last-child { border-right: 0; }
.schalter-btn:hover { background: var(--kal-indigo-08); }
.schalter-btn:active { transform: scale(0.98); }
.schalter-btn.is-active {
  background: var(--kal-indigo);
  color: var(--kal-paper);
}
.schalter-btn.is-active:hover { background: #362698; }
.schalter-btn i { font-size: 0.9375rem; line-height: 1; display: none; }
.schalter-btn.is-active i { display: block; }
.schalter-zwei .schalter-btn { padding: 0.6875rem 0.375rem; }

/* ---------- 7. Select ---------- */
.land-select {
  width: 100%;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kal-ink);
  background: var(--kal-paper);
  border: var(--kal-haar) solid var(--kal-indigo);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--kal-ink) 50%),
                    linear-gradient(135deg, var(--kal-ink) 50%, transparent 50%);
  background-position: right 1rem top 55%, right 0.6875rem top 55%;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
}

/* ---------- 8. Nächste Termine ---------- */
.termin-liste {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.625rem 0.875rem;
  align-items: baseline;
}
.termin-datum {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kal-ink);
  font-variant-numeric: tabular-nums;
}
.termin-titel { font-size: 0.875rem; line-height: 1.4; color: var(--kal-ink); }
.termin-leer { font-size: 0.875rem; color: var(--kal-ink-50); grid-column: 1 / -1; }

/* ---------- 9. Buttons ---------- */
.btn-primaer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.125rem;
  height: 2.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: var(--kal-haar) solid var(--kal-indigo);
  background: var(--kal-indigo);
  color: var(--kal-paper);
  transition: background 150ms var(--kal-ease), transform 80ms var(--kal-ease);
}
.btn-primaer:hover { background: #362698; }
.btn-primaer:active { transform: scale(0.98); }
.btn-gross { height: 3rem; }
.btn-primaer.is-disabled {
  background: var(--kal-ink-06);
  border-color: var(--kal-ink-12);
  color: var(--kal-ink-30);
  cursor: not-allowed;
  pointer-events: none;
}
.btn-text {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  height: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kal-ink-50);
  text-decoration: underline;
}
.btn-text:hover { background: transparent; color: var(--kal-ink); }

/* ---------- 10. Badges ---------- */
.badge-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge-bs {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kal-ink);
}
.badge-tuerkis   { background: var(--kal-teal);   color: var(--kal-ink); }
.badge-indigo { background: var(--kal-indigo); color: var(--kal-paper); }
.badge-gelb { background: var(--kal-yellow); color: var(--kal-ink); }

/* ---------- 11. Kalender-Kopf ---------- */
.monat-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
}
.monat-titelblock {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.monat-titel {
  font-family: var(--kal-display);
  font-weight: 500;
  font-size: 2.375rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--kal-ink);
  white-space: nowrap;
}
.monat-spanne {
  font-size: 0.875rem;
  color: var(--kal-ink-50);
  font-variant-numeric: tabular-nums;
}
.monat-nav { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--kal-haar) solid var(--kal-ink-12);
  color: var(--kal-ink);
  cursor: pointer;
  transition: border-color 150ms var(--kal-ease), color 150ms var(--kal-ease);
}
.nav-btn:hover { border-color: var(--kal-indigo); color: var(--kal-indigo); }
.nav-btn svg { display: block; }
.nav-zurueck svg { transform: rotate(180deg); }
.btn-heute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--kal-ink);
  border: var(--kal-haar) solid var(--kal-ink);
  color: var(--kal-cream);
  cursor: pointer;
  transition: background 150ms var(--kal-ease), transform 80ms var(--kal-ease);
}
.btn-heute:hover { background: #262336; }
.btn-heute:active { transform: scale(0.98); }

/* ---------- 12. Kalender-Grid ---------- */
.kalender-gitter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: var(--kal-haar) solid var(--kal-ink-12);
}
.gitter-wochentag {
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--kal-haar) solid var(--kal-ink-12);
  border-bottom: var(--kal-haar) solid var(--kal-ink-12);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kal-ink-45);
}
.wochentag-kurz { display: none; }

.gitter-zelle {
  position: relative;
  min-height: 7.75rem;
  padding: 0.625rem;
  border-right: var(--kal-haar) solid var(--kal-ink-12);
  border-bottom: var(--kal-haar) solid var(--kal-ink-12);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--kal-paper);
  min-width: 0;
}
.gitter-zelle.is-out  { background: var(--kal-ink-02); }
.gitter-zelle.is-past { background: var(--kal-ink-04); }
.zelle-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  min-height: 1.25rem;
}
.zelle-zahl {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--kal-ink);
}
.gitter-zelle.is-out  .zelle-zahl { color: var(--kal-ink-15); }
.gitter-zelle.is-past .zelle-zahl { color: var(--kal-ink-30); }
.zelle-heute {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--kal-indigo);
  color: var(--kal-paper);
  padding: 0.1875rem 0.3125rem;
  white-space: nowrap;
}
.zelle-termine {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  min-width: 0;
}
.gitter-zelle.is-past .zelle-termine { opacity: 0.35; }

.termin-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.375rem 0.4375rem;
  cursor: pointer;
  background: var(--kal-akzent, var(--kal-indigo));
  border: var(--kal-haar) solid var(--kal-akzent, var(--kal-indigo));
  color: var(--kal-akzent-fg, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: box-shadow 150ms var(--kal-ease), transform 80ms var(--kal-ease);
}
.termin-chip:hover { box-shadow: 0 0.125rem 0.5rem rgba(14, 12, 28, 0.18); }
.termin-chip:active { transform: scale(0.98); }
.termin-chip.is-selected { box-shadow: 0 0 0 0.125rem var(--kal-ink); }

.zelle-punkte { display: none; gap: 0.1875rem; flex-wrap: wrap; }
.punkt-bs { width: 0.375rem; height: 0.375rem; background: var(--kal-akzent, var(--kal-indigo)); }

/* ---------- 13. Agenda ---------- */
.titel-h2 {
  margin: 0;
  font-family: var(--kal-display);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--kal-ink);
}
.agenda-kopf { display: flex; flex-direction: column; gap: 0.375rem; }
.agenda-liste { display: flex; flex-direction: column; }
.agenda-gruppe {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: var(--kal-haar) solid var(--kal-ink-line);
  align-items: start;
}
.agenda-tag {
  font-family: var(--kal-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.035em;
  color: var(--kal-ink);
  font-variant-numeric: tabular-nums;
}
.agenda-eintraege { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.agenda-eintrag {
  display: grid;
  grid-template-columns: 0.625rem 1fr;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem 0.25rem 0;
  cursor: pointer;
  transition: background 150ms var(--kal-ease);
}
.agenda-eintrag:hover { background: var(--kal-indigo-08); }
.agenda-eintrag.is-selected { background: var(--kal-indigo-08); }
.agenda-marke {
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.3125rem;
  background: var(--kal-akzent, var(--kal-indigo));
}
.agenda-titel { font-size: 1.0625rem; font-weight: 600; color: var(--kal-ink); }
.agenda-meta { font-size: 0.9375rem; line-height: 1.55; color: var(--kal-ink-60); }
.agenda-leer { font-size: 1rem; color: var(--kal-ink-50); }

/* ---------- 14. Detailpanel ---------- */
.detail-karte {
  background: var(--kal-paper);
  border: var(--kal-haar) solid var(--kal-ink-line);
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 18.75rem;
  gap: 2.5rem;
  align-items: start;
}
.detail-haupt { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.detail-art {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.3125rem 0.5rem;
  background: var(--kal-akzent, var(--kal-indigo));
  color: var(--kal-akzent-fg, #fff);
}
.detail-datum {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kal-ink-50);
  font-variant-numeric: tabular-nums;
}
.detail-verschoben { font-size: 0.875rem; color: var(--kal-ink-50); }
.detail-titel {
  font-family: var(--kal-display);
  font-weight: 500;
  font-size: 2.125rem;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--kal-ink);
}
.detail-liste {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.875rem 1.5rem;
  align-items: baseline;
}
.detail-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kal-ink-45);
}
.detail-wert { font-size: 1rem; line-height: 1.6; color: var(--kal-ink); }
.detail-seite {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--kal-cream);
  padding: 1.5rem;
}
.seite-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kal-indigo);
}
.seite-text { font-size: 1rem; line-height: 1.6; color: var(--kal-ink); }
.detail-hinweis {
  border: var(--kal-haar) solid var(--kal-ink-12);
  padding: 1.5rem 2rem;
  font-size: 0.9375rem;
  color: var(--kal-ink-55);
}

/* ============================================================
   BREAKPOINT: Tablet — max-width 991px (61.9375rem)
   ============================================================ */


/* ============================================================
   BREAKPOINT: Mobile Landscape — max-width 767px (47.9375rem)
   ============================================================ */


/* ============================================================
   BREAKPOINT: Mobile Portrait — max-width 479px (29.9375rem)
   ============================================================ */


/* ---------- 15. Reduzierte Bewegung ---------- */


/* ---------- 16. Druck ---------- */


/* ============================================================
   17. Fristenübersicht (C3) — gruppiert und aufklappbar
   Statisches Markup ist zugleich Datenquelle der Engine.
   ============================================================ */

.fristen-liste{padding-top:1rem;padding-bottom:6rem}
.fristen-kopf{max-width:45rem;margin-bottom:2.5rem}
.fristen-h2{margin:0 0 .5rem;font-family:var(--kal-display);font-weight:500;
  font-size:2rem;line-height:1.15;letter-spacing:-.035em}
.fristen-lead{margin:0;font-size:1rem;line-height:1.6;color:var(--kal-ink-55)}

.fristen-gruppe{border-bottom:0.0625rem solid var(--kal-ink-20)}
.gruppe-kopf{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  width:100%;text-align:left;background:transparent;border:0;border-top:0.125rem solid var(--kal-ink);
  padding:1.125rem 0;cursor:pointer;color:var(--kal-ink);transition:background 150ms var(--kal-ease)}
.gruppe-kopf:hover{background:var(--kal-ink-06)}
.gruppe-zeile{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.gruppe-titel{font-family:var(--kal-display);font-weight:500;font-size:1.625rem;letter-spacing:-.035em}
.gruppe-zahl{font-size:.6875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--kal-ink-45)}
.gruppe-pfeil{width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;
  justify-content:center;color:var(--kal-indigo);font-size:1rem;line-height:1;
  transition:transform 200ms var(--kal-ease)}
.gruppe-kopf[aria-expanded="true"] .gruppe-pfeil{transform:rotate(90deg)}
.gruppe-inhalt{display:none;padding-bottom:1.5rem}
.gruppe-kopf[aria-expanded="true"] + .gruppe-inhalt{display:block;animation:kal-auf 220ms var(--kal-ease) both}
@keyframes kal-auf{from{opacity:0;transform:translateY(-0.375rem)}to{opacity:1;transform:none}}

.fristen-block{border-bottom:0.0625rem solid var(--kal-ink-line)}
.frist-zeile{display:grid;grid-template-columns:1.25rem 1fr auto;gap:.25rem 1rem;align-items:center;
  width:100%;text-align:left;background:transparent;border:0;padding:.9375rem 0;cursor:pointer;
  color:var(--kal-ink);transition:background 150ms var(--kal-ease)}
.frist-zeile:hover{background:var(--kal-ink-06)}
.frist-plus{display:inline-flex;align-items:center;justify-content:center;
  color:var(--kal-indigo);font-size:1rem;font-weight:600;line-height:1;width:1.25rem}
.frist-haupt{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.frist-titel{font-size:1.0625rem;font-weight:500;line-height:1.4}
.frist-tags{display:flex;gap:.5rem;flex-wrap:wrap}
.frist-tag{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--kal-ink-55)}
.frist-termin{font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--kal-ink-70)}

.frist-panel{display:none;padding:.5rem 0 1.75rem 2.25rem}
.frist-zeile[aria-expanded="true"] + .frist-panel{display:block;animation:kal-auf 220ms var(--kal-ease) both}
.panel-fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;max-width:60rem}
.feld-fakt{display:flex;flex-direction:column;gap:.375rem}
.feld-label{font-size:.6875rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--kal-ink-45)}
.feld-text{font-size:.9375rem;line-height:1.65}
.panel-service{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  background:var(--kal-paper);padding:1.125rem 1.25rem;margin-top:1.5rem;max-width:60rem}
.service-satz{display:grid;grid-template-columns:1.375rem 1fr;gap:.875rem;align-items:start}
.service-haken{width:1.375rem;height:1.375rem;background:var(--kal-indigo);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.8125rem}
.service-text{font-size:.9375rem;line-height:1.6}
.frist-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.625rem 1.125rem;background:var(--kal-indigo);color:#fff;border:0;
  font-family:var(--kal-body);font-size:.875rem;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background 150ms var(--kal-ease),transform 80ms var(--kal-ease)}
.frist-cta:hover{background:#362698}
.frist-cta:active{transform:scale(.98)}
.frist-cta:focus-visible{outline:0.125rem solid var(--kal-indigo);outline-offset:0.1875rem}

/* ============================================================
   BREAKPOINTS — alle Media Queries gesammelt, absteigend
   ============================================================ */

/* ---------- BREAKPOINT: Tablet — max-width 991px ---------- */
@media screen and (max-width: 991px) {
  .hero-inhalt { padding-top: 5rem; padding-bottom: 3rem; gap: 1.5rem; }
  .hero-h1 { font-size: 3.5rem; line-height: 1.06; }
  .hero-lead { font-size: 1.125rem; }

  .kalender-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-bottom: 4.5rem; }
  .kalender-spalte {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }
  .karte-profil { grid-column: 1 / -1; }

  .karte-weit { padding: 1.5rem; gap: 1.25rem; }
  .monat-titel { font-size: 2rem; }
  .gitter-zelle { min-height: 6rem; padding: 0.5rem; gap: 0.375rem; }
  .termin-chip { font-size: 0.6875rem; padding: 0.3125rem 0.375rem; }
  .agenda-gruppe { grid-template-columns: 8rem 1fr; gap: 1.25rem; }
  .detail-karte { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 1.5rem; }
  .detail-titel { font-size: 1.875rem; }

  /* Fristenübersicht */
  .fristen-liste{padding-bottom:4.5rem}
    .fristen-h2{font-size:1.75rem}
    .panel-fakten{grid-template-columns:1fr 1fr;gap:1.5rem}
    .panel-fakten .feld-fakt:nth-child(3){grid-column:1/-1}
    .panel-service{grid-template-columns:1fr;gap:1.125rem;align-items:start}
    .frist-cta{width:100%}
}

/* ---------- BREAKPOINT: Mobile Landscape — max-width 767px ---------- */
@media screen and (max-width: 767px) {
  .container-bs { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero-inhalt { padding-top: 4rem; padding-bottom: 2.5rem; gap: 1.25rem; }
  .hero-h1 { font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.035em; }
  .hero-lead { font-size: 1.0625rem; }

  .kalender-spalte { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .karte-weit { padding: 1.25rem; }

  .monat-kopf { flex-direction: column; align-items: stretch; gap: 1rem; padding-bottom: 1.25rem; }
  .monat-nav { justify-content: space-between; }
  .btn-heute { flex: 1 1 auto; }
  .monat-titel { font-size: 1.75rem; white-space: normal; }

  .gitter-wochentag { height: 2.25rem; font-size: 0.625rem; letter-spacing: 0.04em; }
  .gitter-zelle { min-height: 4.5rem; padding: 0.375rem; gap: 0.25rem; }
  .zelle-zahl { font-size: 0.8125rem; }
  .zelle-heute { font-size: 0.5rem; padding: 0.125rem 0.25rem; }
  .termin-chip {
    font-size: 0.625rem;
    padding: 0.25rem 0.3125rem;
    line-height: 1.2;
  }

  .titel-h2 { font-size: 1.375rem; }
  .agenda-gruppe { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 1rem 0; }
  .agenda-tag { font-size: 1.25rem; }
  .agenda-titel { font-size: 1rem; }
  .agenda-meta { font-size: 0.875rem; }

  .detail-liste { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .detail-wert { margin-bottom: 0.5rem; }
  .detail-titel { font-size: 1.625rem; }
  .detail-hinweis { padding: 1.25rem; }

  /* Fristenübersicht */
  .fristen-liste{padding-bottom:3.5rem}
    .fristen-kopf{margin-bottom:1.75rem}
    .fristen-h2{font-size:1.5rem}
    .gruppe-titel{font-size:1.375rem}
    .gruppe-kopf{padding:1rem 0}
    .frist-zeile{grid-template-columns:1.25rem 1fr;padding:.875rem 0}
    .frist-termin{grid-column:2;font-size:.8125rem}
    .frist-panel{padding:.25rem 0 1.5rem 2.25rem}
    .panel-fakten{grid-template-columns:1fr;gap:1.125rem}
    .panel-fakten .feld-fakt:nth-child(3){grid-column:auto}
    .panel-service{padding:1rem}
}

/* ---------- BREAKPOINT: Mobile Portrait — max-width 479px ---------- */
@media screen and (max-width: 479px) {
  .container-bs { padding-left: 1rem; padding-right: 1rem; }
  .hero-inhalt { padding-top: 3rem; padding-bottom: 2rem; }
  .hero-h1 { font-size: 2rem; line-height: 1.12; }
  .hero-lead { font-size: 1rem; }

  .karte-bs { padding: 1rem; }
  .karte-weit { padding: 1rem; gap: 1rem; }

  .schalter-btn { font-size: 0.6875rem; padding: 0.75rem 0.25rem; gap: 0.25rem; }
  .schalter-btn i { font-size: 0.875rem; }

  /* Kompakter Monatsraster: Zahlen + Punkte statt Chips */
  .gitter-wochentag { height: 2rem; }
  .wochentag-lang { display: none; }
  .wochentag-kurz { display: block; }

  .gitter-zelle {
    min-height: 2.875rem;
    padding: 0.25rem 0.125rem;
    gap: 0.1875rem;
    align-items: center;
  }
  .gitter-zelle.has-events { cursor: pointer; }
  .zelle-kopf { justify-content: center; min-height: 0; }
  .zelle-zahl { font-size: 0.8125rem; }
  .zelle-heute {
    position: absolute;
    top: 0.1875rem;
    right: 0.1875rem;
    width: 0.3125rem;
    height: 0.3125rem;
    padding: 0;
    font-size: 0;
    overflow: hidden;
    text-indent: -62.5rem;
  }
  .zelle-termine { display: none; }
  .zelle-punkte { display: flex; justify-content: center; }

  .monat-titel { font-size: 1.5rem; }
  .monat-nav { gap: 0.375rem; }
  .nav-btn { width: 2.75rem; height: 2.75rem; }
  .btn-heute { height: 2.75rem; padding: 0 0.75rem; }

  .detail-titel { font-size: 1.5rem; }
  .detail-seite { padding: 1.25rem; }
  .btn-primaer { width: 100%; }

  /* Fristenübersicht */
  .frist-panel{padding-left:1.5rem}
    .frist-titel{font-size:1rem}
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .kalender-seite * { transition-duration: 0.01ms !important; }
}

/* ---------- Druck ---------- */
@media print {
  .kalender-spalte, .monat-nav, .detail-seite { display: none; }
  .kalender-layout { grid-template-columns: minmax(0, 1fr); }
  .karte-bs { border-color: var(--kal-ink-20); }
}