/* ==========================================================
   PAGE: Termine
   Premium-Design für Terminbereich, Legende, Tabelle und Erinnerung
   ========================================================== */

main {
  padding: clamp(2.8rem, 4.8vw, 5rem) 0 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;

  background:
    radial-gradient(circle at 18% 4%, rgba(255, 255, 255, 0.82), transparent 30rem),
    radial-gradient(circle at 82% 16%, rgba(210, 220, 231, 0.42), transparent 28rem),
    linear-gradient(180deg, rgba(238, 242, 246, 0.96), rgba(238, 242, 246, 1));
}

/* Breiter schräger CSS-Akzent im hellen Hintergrundbereich
   Dunkelblau aus dem Terminplan-Rahmen/der Terminplan-Fläche.
   Der Akzent sitzt bewusst tiefer und bleibt hinter dem Terminplan. */
main::before {
  content: "";
  position: absolute;
  top: clamp(11.8rem, 14vw, 18rem);
  left: -22vw;
  width: 144vw;
  height: clamp(7.8rem, 10vw, 12.5rem);
  transform: rotate(-7deg);
  transform-origin: center;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 11%,
      rgba(23, 32, 51, 0.96) 24%,
      rgba(23, 32, 51, 0.96) 76%,
      transparent 89%,
      transparent 100%
    );

  border-top: 1px solid rgba(23, 32, 51, 0.34);
  border-bottom: 1px solid rgba(23, 32, 51, 0.34);
  box-shadow: 0 24px 58px rgba(23, 32, 51, 0.16);

  pointer-events: none;
  z-index: 0;
}

/* Zweiter und dritter schräger CSS-Akzent:
   zweiter Strich halb so dick wie der erste,
   dritter Strich darunter halb so dick wie der zweite,
   beide in derselben Richtung und Farbe wie der erste. */
main::after {
  content: "";
  position: absolute;
  top: clamp(22.2rem, 25vw, 32rem);
  left: -22vw;
  width: 144vw;
  height: clamp(10.2rem, 13vw, 16.4rem);
  transform: rotate(-7deg);
  transform-origin: center;

  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 11%,
      rgba(23, 32, 51, 0.96) 24%,
      rgba(23, 32, 51, 0.96) 76%,
      transparent 89%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 11%,
      rgba(23, 32, 51, 0.96) 24%,
      rgba(23, 32, 51, 0.96) 76%,
      transparent 89%,
      transparent 100%
    );
  background-size:
    100% clamp(3.9rem, 5vw, 6.25rem),
    100% clamp(1.95rem, 2.5vw, 3.125rem);
  background-position:
    center top,
    center clamp(7.4rem, 8.8vw, 10.8rem);
  background-repeat: no-repeat;

  filter: drop-shadow(0 18px 42px rgba(23, 32, 51, 0.12));

  pointer-events: none;
  z-index: 0;
}

#termine.intro,
.event-erinnerung {
  z-index: 1;
}

/* ==========================================================
   Terminplan-Bereich
   Rahmen, Abstand und Seitenwirkung – keine Tabellenfarben
   ========================================================== */

#termine.intro {
  width: min(1680px, 96vw);
  max-width: none;
  margin: 0 auto clamp(3rem, 5vw, 5.2rem);
  padding: clamp(1.7rem, 3vw, 2.8rem);
  box-sizing: border-box;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  color: #fff;
  background:
    radial-gradient(circle at 14% 12%, rgba(11, 134, 243, 0.18), transparent 26rem),
    radial-gradient(circle at 88% 78%, rgba(246, 221, 120, 0.09), transparent 28rem),
    linear-gradient(135deg, rgba(23, 32, 51, 0.98), rgba(35, 48, 67, 0.96));
  border: 1px solid rgba(11, 134, 243, 0.28);
  border-radius: 28px;
  box-shadow:
    0 18px 44px rgba(23, 32, 51, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

#termine.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(11, 134, 243, 0.12), transparent 18%, transparent 82%, rgba(11, 134, 243, 0.10));
  pointer-events: none;
  z-index: -1;
}

#terminplan-heading {
  width: min(1100px, 100%);
  margin: 0 auto clamp(1.1rem, 2vw, 1.7rem);
  color: #fff;
  font-size: clamp(2.15rem, 4.2vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.05em;
  text-align: center;
}

.termin-legende {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.55rem, 1vw, 0.85rem);

  width: min(940px, 100%);
  margin: 0 auto clamp(1.45rem, 2.6vw, 2.2rem);
  padding: 0.7rem;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.11),
    0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

.termin-legende a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0.58rem 1.05rem;
  box-sizing: border-box;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07));
  border: 1px solid currentColor;
  border-radius: 999px;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.16) inset;

  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.termin-legende a:hover,
.termin-legende a:focus-visible {
  background-color: rgba(255, 255, 255, 0.13);
  text-decoration: none;
  filter: brightness(1.08);
  box-shadow:
    0 11px 24px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.termin-legende a:focus-visible {
  outline: 3px solid rgba(246, 221, 120, 0.45);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .termin-legende a:hover {
    transform: translateY(-1px);
  }
}

.termin-info {
  width: min(880px, 100%);
  margin: 1rem auto 0;
  padding: 0.85rem 1rem;
  box-sizing: border-box;

  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-large);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);

  text-align: center;
  font-weight: 750;
}

.termin-info + .termin-info {
  margin-top: 0.6rem;
}

.termin-info-hidden,
.termin-hidden {
  display: none !important;
}

/* ==========================================================
   Termintabelle
   Logische Farben bleiben erhalten, aber hochwertiger umgesetzt.
   ========================================================== */

#termine .termin-tabelle {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  color: #172033;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.20),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

#termine .termin-tabelle th {
  padding: 0.95rem 1rem;
  color: #fff8dc;
  background:
    linear-gradient(135deg, rgba(19, 31, 50, 0.98), rgba(35, 58, 88, 0.98));
  border-bottom: 1px solid rgba(246, 221, 120, 0.34);

  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
}

#termine .termin-tabelle td {
  padding: 0.82rem 1rem;
  color: #263449;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(23, 32, 51, 0.09);

  line-height: 1.42;
  text-align: center;
  vertical-align: middle;
}

#termine .termin-tabelle tr:last-child td {
  border-bottom: 0;
}

#termine .termin-tabelle tbody tr {
  position: relative;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

#termine .termin-tabelle tbody tr td:first-child {
  font-weight: 900;
}

#termine .termin-tabelle tbody tr td:first-child {
  border-left: 5px solid rgba(79, 96, 119, 0.42);
}

#termine .termin-tabelle tbody tr.termin-vergangen td,
#termine .termin-tabelle tbody tr.vergangen td {
  color: #405064;
  background:
    linear-gradient(90deg, rgba(172, 184, 199, 0.24), rgba(245, 247, 250, 0.98));
}

#termine .termin-tabelle tbody tr.termin-vergangen td:first-child,
#termine .termin-tabelle tbody tr.vergangen td:first-child {
  border-left-color: #9aa8ba;
}

#termine .termin-tabelle tbody tr.termin-naechster td,
#termine .termin-tabelle tbody tr.naechster td,
#termine .termin-tabelle tbody tr.next td {
  color: #33260b;
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 255, 255, 0.58), transparent 22rem),
    linear-gradient(90deg, rgba(246, 198, 74, 0.40), rgba(255, 247, 211, 0.98));
  border-bottom-color: rgba(177, 122, 18, 0.22);
  font-weight: 850;
}

#termine .termin-tabelle tbody tr.termin-naechster td:first-child,
#termine .termin-tabelle tbody tr.naechster td:first-child,
#termine .termin-tabelle tbody tr.next td:first-child {
  border-left-color: #f2bd35;
}

#termine .termin-tabelle tbody tr.termin-zukunft td,
#termine .termin-tabelle tbody tr.zukunft td,
#termine .termin-tabelle tbody tr.future td {
  color: #17324f;
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 255, 255, 0.54), transparent 22rem),
    linear-gradient(90deg, rgba(11, 134, 243, 0.17), rgba(235, 246, 255, 0.98));
}

#termine .termin-tabelle tbody tr.termin-zukunft td:first-child,
#termine .termin-tabelle tbody tr.zukunft td:first-child,
#termine .termin-tabelle tbody tr.future td:first-child {
  border-left-color: #0b86f3;
}

#termine .termin-tabelle a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.48rem 0.82rem;
  box-sizing: border-box;

  color: #172033;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(23, 32, 51, 0.16);
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(23, 32, 51, 0.08);

  font-weight: 900;
  text-decoration: none;
  line-height: 1.1;

  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  #termine .termin-tabelle tbody tr:hover {
    filter: brightness(1.025);
  }

  #termine .termin-tabelle tbody tr:hover td {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
  }

  #termine .termin-tabelle a:hover {
    color: #172033;
    background: #f6dd78;
    border-color: rgba(246, 221, 120, 0.92);
    box-shadow: 0 8px 18px rgba(177, 122, 18, 0.18);
    transform: translateY(-1px);
  }
}

/* ==========================================================
   Event-Erinnerung
   Vollbreiter hochwertiger Bereich unter dem Terminplan
   ========================================================== */

.event-erinnerung {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(2.4rem, 4.5vw, 4.2rem) var(--site-gutter);
  box-sizing: border-box;

  color: #fff;
  text-align: center;

  background:
    radial-gradient(circle at 14% 20%, rgba(246, 221, 120, 0.13), transparent 28rem),
    radial-gradient(circle at 88% 74%, rgba(11, 134, 243, 0.12), transparent 30rem),
    linear-gradient(135deg, rgba(23, 32, 51, 0.96), rgba(35, 48, 67, 0.94));
  border-top: 1px solid rgba(246, 221, 120, 0.22);
  border-bottom: 1px solid rgba(246, 221, 120, 0.12);
  box-shadow:
    0 -14px 34px rgba(23, 32, 51, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;

  position: relative;
  overflow: hidden;
}

.event-erinnerung::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(860px, 86vw);
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(246, 221, 120, 0.78), transparent);
  pointer-events: none;
}

.event-erinnerung::after {
  content: "";
  position: absolute;
  right: -7rem;
  bottom: -7rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: rgba(246, 221, 120, 0.06);
  pointer-events: none;
}

#anmeldebereich,
#abmeldebereich {
  width: min(920px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.event-erinnerung h2 {
  margin: 0 0 0.7rem;
  color: #fff;
  font-size: clamp(2rem, 3.3vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.event-erinnerung p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.80);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.62;
}

/* Eingabefeld + Button nebeneinander */
.event-form-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;

  width: min(760px, 100%);
  max-width: 760px;
  margin: 1.35rem auto 0;
  padding: 0.55rem;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-large);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

.event-form-row input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0.78rem 0.95rem;
  box-sizing: border-box;

  color: #172033;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: var(--radius-medium);

  font: inherit;
  line-height: 1.25;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.event-form-row input[type="email"]:focus {
  outline: none;
  border-color: rgba(246, 221, 120, 0.95);
  box-shadow:
    0 0 0 3px rgba(246, 221, 120, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.event-form-row button[type="submit"] {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.78rem 1.15rem;
  box-sizing: border-box;
  white-space: nowrap;

  color: #172033;
  background: #f6dd78;
  border: 1px solid rgba(246, 221, 120, 0.95);
  border-radius: var(--radius-medium);

  font: inherit;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;

  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.20),
    0 1px 0 rgba(255, 255, 255, 0.36) inset;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.event-form-row button[type="submit"]:hover,
.event-form-row button[type="submit"]:focus-visible {
  background: #ffe88f;
  border-color: #ffe88f;
  box-shadow:
    0 11px 24px rgba(0, 0, 0, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

@media (hover: hover) and (pointer: fine) {
  .event-form-row button[type="submit"]:hover {
    transform: translateY(-1px);
  }
}

/* Statusmeldungen */
.event-status {
  margin-top: 1rem;
  min-height: 1.25rem;
  color: rgba(246, 221, 120, 0.90) !important;
  font-weight: 800;
}

/* Wechsel Anmeldung / Abmeldung */
.event-switch {
  margin-top: 1.6rem;
}

.event-switch a,
.datenschutz-hinweis a {
  color: #f6dd78;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  font-weight: 850;
}

.event-switch a:hover,
.datenschutz-hinweis a:hover {
  color: #ffe88f;
}

/* Datenschutz-Hinweis */
.datenschutz-hinweis {
  max-width: 760px;
  margin: 0.95rem auto 1rem;
  padding: 0 0.4rem;
  box-sizing: border-box;

  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

/* Unsichtbares Label für Barrierefreiheit */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

/* ==========================================================
   Mobile Darstellung
   ========================================================== */

@media (max-width: 760px) {
  main {
    padding-top: 2rem;
  }

  main::before {
    top: 7.2rem;
    left: -36vw;
    width: 172vw;
    height: 6.8rem;
    transform: rotate(-9deg);
  }

  main::after {
    top: 15.2rem;
    left: -36vw;
    width: 172vw;
    height: 7.4rem;
    transform: rotate(-9deg);
    background-size:
      100% 3.4rem,
      100% 1.7rem;
    background-position:
      center top,
      center 5.3rem;
  }

  #termine.intro {
    width: calc(100% - (var(--site-gutter) * 2));
    padding: 1.15rem;
    border-radius: var(--radius-large);
  }

  #terminplan-heading {
    font-size: clamp(1.9rem, 9vw, 2.55rem);
  }

  .termin-legende {
    width: 100%;
    border-radius: var(--radius-large);
    padding: 0.7rem;
    gap: 0.55rem;
  }

  .event-erinnerung {
    padding-top: 2.2rem;
    padding-bottom: 2.4rem;
  }

  .event-erinnerung h2 {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
  }

  .event-form-row {
    flex-direction: column;
    align-items: stretch;
    padding: 0.65rem;
  }

  .event-form-row input[type="email"],
  .event-form-row button[type="submit"] {
    width: 100%;
  }
}

/* ==========================================================
   V11 Finale Farbzuordnung: sauber, ohne alte Altlasten
   Vergangenheit = neutrales Grau | Nächstes Event = Gold | Zukunft = Blau
   ========================================================== */

#termine {
  --termin-past-main: #8b99a8;
  --termin-past-dark: #263449;
  --termin-past-soft: #d9dee4;
  --termin-past-mid: #e7ebef;
  --termin-past-row: #f4f6f8;

  --termin-next-main: #f2bd35;
  --termin-next-dark: #3a2606;
  --termin-next-soft: rgba(242, 189, 53, 0.50);
  --termin-next-row: rgba(255, 248, 220, 0.98);

  --termin-future-main: #0b86f3;
  --termin-future-dark: #10365f;
  --termin-future-soft: rgba(11, 134, 243, 0.32);
  --termin-future-row: rgba(235, 247, 255, 0.98);
}

/* Legende */
.termin-legende {
  width: min(1040px, 100%);
  padding: 0.78rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
  border-color: rgba(255, 255, 255, 0.18);
}

.termin-legende a {
  min-width: min(16rem, 100%);
  min-height: 2.75rem;
  padding: 0.62rem 1.15rem;
  border-width: 1px;
  border-style: solid;
  font-size: clamp(0.9rem, 1vw, 1rem);
  letter-spacing: 0.01em;
}

.termin-legende a::before {
  content: "";
  flex: 0 0 auto;
  width: 0.74rem;
  height: 0.74rem;
  margin-right: 0.58rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.16);
}

.termin-legende .legende-vergangen {
  color: #f4f7fb !important;
  background:
    linear-gradient(135deg, #b4bec9 0%, #8b99a8 50%, #617080 100%) !important;
  border-color: rgba(203, 213, 225, 0.58) !important;
  box-shadow:
    0 12px 28px rgba(51, 65, 85, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
}

.termin-legende .legende-vergangen::before {
  background: #e1e6ec !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 4px 10px rgba(29, 40, 54, 0.16) !important;
}

.termin-legende .legende-naechster {
  color: #2f1f05 !important;
  background:
    linear-gradient(135deg, #fff3b0 0%, #f2bd35 52%, #c98918 100%) !important;
  border-color: rgba(255, 232, 143, 0.92) !important;
  box-shadow:
    0 13px 30px rgba(177, 122, 18, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.48) inset !important;
}

.termin-legende .legende-naechster::before {
  background: #8a5a08 !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.24),
    0 4px 10px rgba(112, 73, 8, 0.22) !important;
}

.termin-legende .legende-zukunft {
  color: #f4fbff !important;
  background:
    linear-gradient(135deg, #35a8ff 0%, #0b86f3 48%, #10365f 100%) !important;
  border-color: rgba(156, 215, 255, 0.58) !important;
  box-shadow:
    0 13px 30px rgba(11, 134, 243, 0.27),
    0 1px 0 rgba(255, 255, 255, 0.24) inset !important;
}

.termin-legende .legende-zukunft::before {
  background: #bfe7ff !important;
}

/* Tabelle: Grundrahmen */
#termine .termin-tabelle {
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.98);
}

#termine .termin-tabelle th {
  color: #f7fbff;
  background:
    linear-gradient(135deg, rgba(15, 29, 49, 0.98), rgba(24, 48, 78, 0.98));
  border-bottom: 2px solid rgba(11, 134, 243, 0.46);
}

#termine .termin-tabelle tbody tr td:first-child {
  border-left-width: 7px;
  border-left-style: solid;
}

/* Vergangenheit: absolut neutral grau, kein Rot/Rosa, egal was vorher geladen wurde */
#termine .termin-tabelle tbody tr.termin-vergangen td,
#termine .termin-tabelle tbody tr.vergangen td,
#termine .termin-tabelle tbody td.termin-vergangen,
#termine .termin-tabelle tbody td.vergangen,
.termin-tabelle tbody tr.termin-vergangen td,
.termin-tabelle tbody tr.vergangen td,
.termin-tabelle tbody td.termin-vergangen,
.termin-tabelle tbody td.vergangen {
  color: var(--termin-past-dark) !important;
  background-color: #f4f6f8 !important;
  background-image:
    linear-gradient(
      90deg,
      var(--termin-past-soft) 0%,
      var(--termin-past-mid) 34%,
      var(--termin-past-row) 100%
    ) !important;
  border-bottom-color: rgba(100, 116, 139, 0.18) !important;
  text-shadow: none !important;
}

#termine .termin-tabelle tbody tr.termin-vergangen td:first-child,
#termine .termin-tabelle tbody tr.vergangen td:first-child,
.termin-tabelle tbody tr.termin-vergangen td:first-child,
.termin-tabelle tbody tr.vergangen td:first-child {
  color: #263449 !important;
  background-color: #e7ebef !important;
  background-image:
    linear-gradient(
      90deg,
      #cfd6de 0%,
      #e7ebef 100%
    ) !important;
  border-left-color: var(--termin-past-main) !important;
}

#termine .termin-tabelle tbody tr.termin-vergangen a,
#termine .termin-tabelle tbody tr.vergangen a,
.termin-tabelle tbody tr.termin-vergangen a,
.termin-tabelle tbody tr.vergangen a {
  color: var(--termin-past-dark) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
}

/* Nächstes Event bleibt Gold */
#termine .termin-tabelle tbody tr.termin-naechster td,
#termine .termin-tabelle tbody tr.naechster td,
#termine .termin-tabelle tbody tr.next td {
  color: var(--termin-next-dark) !important;
  background:
    linear-gradient(90deg, var(--termin-next-soft) 0%, rgba(255, 244, 190, 0.98) 34%, var(--termin-next-row) 100%) !important;
  border-bottom-color: rgba(177, 122, 18, 0.26) !important;
  font-weight: 850;
}

#termine .termin-tabelle tbody tr.termin-naechster td:first-child,
#termine .termin-tabelle tbody tr.naechster td:first-child,
#termine .termin-tabelle tbody tr.next td:first-child {
  border-left-color: var(--termin-next-main) !important;
}

/* Zukunft bleibt Blau */
#termine .termin-tabelle tbody tr.termin-zukunft td,
#termine .termin-tabelle tbody tr.zukunft td,
#termine .termin-tabelle tbody tr.future td {
  color: var(--termin-future-dark) !important;
  background:
    linear-gradient(90deg, var(--termin-future-soft) 0%, rgba(219, 240, 255, 0.98) 34%, var(--termin-future-row) 100%) !important;
  border-bottom-color: rgba(11, 134, 243, 0.20) !important;
}

#termine .termin-tabelle tbody tr.termin-zukunft td:first-child,
#termine .termin-tabelle tbody tr.zukunft td:first-child,
#termine .termin-tabelle tbody tr.future td:first-child {
  border-left-color: var(--termin-future-main) !important;
}

@media (hover: hover) and (pointer: fine) {
  #termine .termin-tabelle tbody tr.termin-vergangen:hover td,
  #termine .termin-tabelle tbody tr.vergangen:hover td,
  .termin-tabelle tbody tr.termin-vergangen:hover td,
  .termin-tabelle tbody tr.vergangen:hover td {
    background-color: #f6f8fa !important;
    background-image:
      linear-gradient(
        90deg,
        #d6dce3 0%,
        #edf0f3 34%,
        #f8fafc 100%
      ) !important;
  }

  #termine .termin-tabelle tbody tr.termin-vergangen:hover td:first-child,
  #termine .termin-tabelle tbody tr.vergangen:hover td:first-child,
  .termin-tabelle tbody tr.termin-vergangen:hover td:first-child,
  .termin-tabelle tbody tr.vergangen:hover td:first-child {
    background-color: #edf0f3 !important;
    background-image:
      linear-gradient(
        90deg,
        #cbd3dc 0%,
        #edf0f3 100%
      ) !important;
  }

  #termine .termin-tabelle tbody tr.termin-naechster:hover td,
  #termine .termin-tabelle tbody tr.naechster:hover td,
  #termine .termin-tabelle tbody tr.next:hover td {
    background:
      linear-gradient(90deg, rgba(242, 189, 53, 0.62) 0%, rgba(255, 245, 198, 1) 34%, rgba(255, 248, 220, 1) 100%) !important;
  }

  #termine .termin-tabelle tbody tr.termin-zukunft:hover td,
  #termine .termin-tabelle tbody tr.zukunft:hover td,
  #termine .termin-tabelle tbody tr.future:hover td {
    background:
      linear-gradient(90deg, rgba(11, 134, 243, 0.40) 0%, rgba(221, 242, 255, 1) 34%, rgba(235, 247, 255, 1) 100%) !important;
  }
}

@media (max-width: 760px) {
  .termin-legende {
    border-radius: var(--radius-large);
  }

  .termin-legende a {
    width: 100%;
    min-width: 0;
    min-height: 2.55rem;
  }

  #termine .termin-tabelle tbody tr td:first-child {
    border-left-width: 5px;
  }
}

/* ==========================================================
   V12 Feinschliff: Vergangene Termine mit ruhiger Grau-Abstufung
   Wie bei Zukunft: leichte Zeilenvariation, aber komplett ohne Rot/Rosa.
   ========================================================== */

#termine {
  --termin-past-main: #8fa0b2;
  --termin-past-dark: #263449;
  --termin-past-left-odd: #ccd5de;
  --termin-past-left-even: #d8e0e7;
  --termin-past-mid-odd: #e5ebf1;
  --termin-past-mid-even: #edf2f6;
  --termin-past-row-odd: #f6f8fa;
  --termin-past-row-even: #fbfcfd;
}

/* Vergangene Events Button bleibt eindeutig grau/blaugrau */
.termin-legende .legende-vergangen {
  color: #f5f8fb !important;
  background:
    linear-gradient(135deg, #b7c3d0 0%, #8797aa 48%, #58687b 100%) !important;
  border-color: rgba(203, 213, 225, 0.56) !important;
}

.termin-legende .legende-vergangen::before {
  background: #dbe3ec !important;
}

/* Ungerade vergangene Zeilen: etwas stärkeres neutrales Grau */
#termine .termin-tabelle tbody tr.termin-vergangen:nth-child(odd) td,
#termine .termin-tabelle tbody tr.vergangen:nth-child(odd) td,
.termin-tabelle tbody tr.termin-vergangen:nth-child(odd) td,
.termin-tabelle tbody tr.vergangen:nth-child(odd) td,
#termine .termin-tabelle tbody tr:nth-child(odd) td.termin-vergangen,
#termine .termin-tabelle tbody tr:nth-child(odd) td.vergangen,
.termin-tabelle tbody tr:nth-child(odd) td.termin-vergangen,
.termin-tabelle tbody tr:nth-child(odd) td.vergangen {
  color: var(--termin-past-dark) !important;
  background-color: var(--termin-past-row-odd) !important;
  background-image:
    linear-gradient(
      90deg,
      var(--termin-past-left-odd) 0%,
      var(--termin-past-mid-odd) 34%,
      var(--termin-past-row-odd) 100%
    ) !important;
  border-bottom-color: rgba(100, 116, 139, 0.18) !important;
  text-shadow: none !important;
}

/* Gerade vergangene Zeilen: minimal heller, gleiche Graufamilie */
#termine .termin-tabelle tbody tr.termin-vergangen:nth-child(even) td,
#termine .termin-tabelle tbody tr.vergangen:nth-child(even) td,
.termin-tabelle tbody tr.termin-vergangen:nth-child(even) td,
.termin-tabelle tbody tr.vergangen:nth-child(even) td,
#termine .termin-tabelle tbody tr:nth-child(even) td.termin-vergangen,
#termine .termin-tabelle tbody tr:nth-child(even) td.vergangen,
.termin-tabelle tbody tr:nth-child(even) td.termin-vergangen,
.termin-tabelle tbody tr:nth-child(even) td.vergangen {
  color: var(--termin-past-dark) !important;
  background-color: var(--termin-past-row-even) !important;
  background-image:
    linear-gradient(
      90deg,
      var(--termin-past-left-even) 0%,
      var(--termin-past-mid-even) 34%,
      var(--termin-past-row-even) 100%
    ) !important;
  border-bottom-color: rgba(100, 116, 139, 0.16) !important;
  text-shadow: none !important;
}

/* Datumsspalte vergangener Zeilen passend abgestuft */
#termine .termin-tabelle tbody tr.termin-vergangen:nth-child(odd) td:first-child,
#termine .termin-tabelle tbody tr.vergangen:nth-child(odd) td:first-child,
.termin-tabelle tbody tr.termin-vergangen:nth-child(odd) td:first-child,
.termin-tabelle tbody tr.vergangen:nth-child(odd) td:first-child,
#termine .termin-tabelle tbody tr:nth-child(odd) td.termin-vergangen:first-child,
#termine .termin-tabelle tbody tr:nth-child(odd) td.vergangen:first-child,
.termin-tabelle tbody tr:nth-child(odd) td.termin-vergangen:first-child,
.termin-tabelle tbody tr:nth-child(odd) td.vergangen:first-child {
  color: #263449 !important;
  background-color: var(--termin-past-mid-odd) !important;
  background-image:
    linear-gradient(
      90deg,
      #c7d0da 0%,
      var(--termin-past-mid-odd) 100%
    ) !important;
  border-left-color: var(--termin-past-main) !important;
}

#termine .termin-tabelle tbody tr.termin-vergangen:nth-child(even) td:first-child,
#termine .termin-tabelle tbody tr.vergangen:nth-child(even) td:first-child,
.termin-tabelle tbody tr.termin-vergangen:nth-child(even) td:first-child,
.termin-tabelle tbody tr.vergangen:nth-child(even) td:first-child,
#termine .termin-tabelle tbody tr:nth-child(even) td.termin-vergangen:first-child,
#termine .termin-tabelle tbody tr:nth-child(even) td.vergangen:first-child,
.termin-tabelle tbody tr:nth-child(even) td.termin-vergangen:first-child,
.termin-tabelle tbody tr:nth-child(even) td.vergangen:first-child {
  color: #263449 !important;
  background-color: var(--termin-past-mid-even) !important;
  background-image:
    linear-gradient(
      90deg,
      #d2dbe3 0%,
      var(--termin-past-mid-even) 100%
    ) !important;
  border-left-color: var(--termin-past-main) !important;
}

/* Links in vergangenen Zeilen neutral grau halten */
#termine .termin-tabelle tbody tr.termin-vergangen a,
#termine .termin-tabelle tbody tr.vergangen a,
#termine .termin-tabelle tbody td.termin-vergangen a,
#termine .termin-tabelle tbody td.vergangen a,
.termin-tabelle tbody tr.termin-vergangen a,
.termin-tabelle tbody tr.vergangen a,
.termin-tabelle tbody td.termin-vergangen a,
.termin-tabelle tbody td.vergangen a {
  color: var(--termin-past-dark) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
}

@media (hover: hover) and (pointer: fine) {
  #termine .termin-tabelle tbody tr.termin-vergangen:hover td,
  #termine .termin-tabelle tbody tr.vergangen:hover td,
  .termin-tabelle tbody tr.termin-vergangen:hover td,
  .termin-tabelle tbody tr.vergangen:hover td {
    background-color: #f8fafc !important;
    background-image:
      linear-gradient(
        90deg,
        #d4dce5 0%,
        #edf2f7 34%,
        #f8fafc 100%
      ) !important;
  }

  #termine .termin-tabelle tbody tr.termin-vergangen:hover td:first-child,
  #termine .termin-tabelle tbody tr.vergangen:hover td:first-child,
  .termin-tabelle tbody tr.termin-vergangen:hover td:first-child,
  .termin-tabelle tbody tr.vergangen:hover td:first-child {
    background-color: #edf2f7 !important;
    background-image:
      linear-gradient(
        90deg,
        #cbd5df 0%,
        #edf2f7 100%
      ) !important;
  }
}



/* ==========================================================
   V13 Feinschliff: Drehendes Icon im Button "Nächstes Event"
   Nur die Legende oben wird erweitert. Tabellenfarben bleiben unverändert.
   ========================================================== */

.termin-legende .legende-naechster::before {
  width: 0.92rem !important;
  height: 0.92rem !important;
  margin-right: 0.62rem !important;
  border-radius: 999px !important;

  background:
    radial-gradient(circle, #8a5a08 0 32%, transparent 34%),
    conic-gradient(
      from 0deg,
      #8a5a08 0deg,
      #fff3b0 70deg,
      #f2bd35 140deg,
      #c98918 220deg,
      #8a5a08 360deg
    ) !important;

  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.25),
    0 0 0 7px rgba(242, 189, 53, 0.16),
    0 4px 11px rgba(112, 73, 8, 0.24) !important;

  transform-origin: 50% 50%;
  animation: termin-next-icon-spin 1.25s linear infinite;
}

@keyframes termin-next-icon-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .termin-legende .legende-naechster::before {
    animation: none;
  }
}

/* ==========================================================
   V26 Korrektur: Striche wieder wie vorher, aber mobil stabil
   Die zerstörte Hintergrund-Layer-Lösung wird NICHT verwendet.
   Desktop bleibt wie V22. Auf Smartphone bekommen die Striche feste
   Positionen, damit sie beim Zusammenschieben nicht wandern.
   ========================================================== */

/* Sicherheit: Der zweite Layer bleibt aktiv, weil dort Strich 2 und 3 liegen. */
main::after {
  content: "";
  display: block;
}

@media (max-width: 900px) {
  main {
    padding-top: 2rem !important;
    overflow: hidden !important;
  }

  main::before {
    top: 3.2rem !important;
    left: 50% !important;
    width: 1080px !important;
    height: 5.4rem !important;
    transform: translateX(-50%) rotate(-7deg) !important;
    transform-origin: center !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 10%,
        rgba(23, 32, 51, 0.96) 23%,
        rgba(23, 32, 51, 0.96) 77%,
        transparent 90%,
        transparent 100%
      ) !important;

    border-top: 1px solid rgba(23, 32, 51, 0.34) !important;
    border-bottom: 1px solid rgba(23, 32, 51, 0.34) !important;
    box-shadow: 0 18px 42px rgba(23, 32, 51, 0.14) !important;
    filter: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  main::after {
    content: "" !important;
    display: block !important;
    top: 10.3rem !important;
    left: 50% !important;
    width: 1080px !important;
    height: 6.8rem !important;
    transform: translateX(-50%) rotate(-7deg) !important;
    transform-origin: center !important;

    background-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 10%,
        rgba(23, 32, 51, 0.96) 23%,
        rgba(23, 32, 51, 0.96) 77%,
        transparent 90%,
        transparent 100%
      ),
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 10%,
        rgba(23, 32, 51, 0.96) 23%,
        rgba(23, 32, 51, 0.96) 77%,
        transparent 90%,
        transparent 100%
      ) !important;
    background-size:
      100% 2.7rem,
      100% 1.35rem !important;
    background-position:
      center top,
      center 4.8rem !important;
    background-repeat: no-repeat !important;

    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 14px 32px rgba(23, 32, 51, 0.11)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #termine.intro,
  .event-erinnerung {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 430px) {
  main {
    padding-top: 2rem !important;
  }

  main::before {
    top: 3.05rem !important;
    width: 980px !important;
    height: 5rem !important;
  }

  main::after {
    top: 9.55rem !important;
    width: 980px !important;
    height: 6.4rem !important;
    background-size:
      100% 2.5rem,
      100% 1.25rem !important;
    background-position:
      center top,
      center 4.45rem !important;
  }
}

/* ==========================================================
   V27 Mobile-Regelung final
   Hochformat Smartphone: Terminplaner ohne linken/rechten Außenrand.
   Querformat: exakt Desktop-Darstellung, keine Mobile-Verschiebung.
   ========================================================== */

/* Querformat immer wie Desktop behandeln, auch wenn die Breite klein ist. */
@media (orientation: landscape) {
  main {
    padding: clamp(2.8rem, 4.8vw, 5rem) 0 0 !important;
    overflow: hidden !important;
  }

  main::before {
    content: "" !important;
    position: absolute !important;
    top: clamp(11.8rem, 14vw, 18rem) !important;
    left: -22vw !important;
    width: 144vw !important;
    height: clamp(7.8rem, 10vw, 12.5rem) !important;
    transform: rotate(-7deg) !important;
    transform-origin: center !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 11%,
        rgba(23, 32, 51, 0.96) 24%,
        rgba(23, 32, 51, 0.96) 76%,
        transparent 89%,
        transparent 100%
      ) !important;

    border-top: 1px solid rgba(23, 32, 51, 0.34) !important;
    border-bottom: 1px solid rgba(23, 32, 51, 0.34) !important;
    box-shadow: 0 24px 58px rgba(23, 32, 51, 0.16) !important;
    filter: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  main::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: clamp(22.2rem, 25vw, 32rem) !important;
    left: -22vw !important;
    width: 144vw !important;
    height: clamp(10.2rem, 13vw, 16.4rem) !important;
    transform: rotate(-7deg) !important;
    transform-origin: center !important;

    background-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 11%,
        rgba(23, 32, 51, 0.96) 24%,
        rgba(23, 32, 51, 0.96) 76%,
        transparent 89%,
        transparent 100%
      ),
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 11%,
        rgba(23, 32, 51, 0.96) 24%,
        rgba(23, 32, 51, 0.96) 76%,
        transparent 89%,
        transparent 100%
      ) !important;
    background-size:
      100% clamp(3.9rem, 5vw, 6.25rem),
      100% clamp(1.95rem, 2.5vw, 3.125rem) !important;
    background-position:
      center top,
      center clamp(7.4rem, 8.8vw, 10.8rem) !important;
    background-repeat: no-repeat !important;

    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 18px 42px rgba(23, 32, 51, 0.12)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #termine.intro {
    width: min(1680px, 96vw) !important;
    max-width: none !important;
    margin: 0 auto clamp(3rem, 5vw, 5.2rem) !important;
    padding: clamp(1.7rem, 3vw, 2.8rem) !important;
    border: 1px solid rgba(11, 134, 243, 0.28) !important;
    border-radius: 28px !important;
  }

  #terminplan-heading {
    font-size: clamp(2.15rem, 4.2vw, 4.1rem) !important;
  }

  .termin-legende {
    width: min(1040px, 100%) !important;
    border-radius: 999px !important;
    padding: 0.78rem !important;
    gap: clamp(0.55rem, 1vw, 0.85rem) !important;
  }

  .termin-legende a {
    width: auto !important;
    min-width: min(16rem, 100%) !important;
    min-height: 2.75rem !important;
    padding: 0.62rem 1.15rem !important;
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
  }

  #termine .termin-tabelle th,
  #termine .termin-tabelle td {
    padding: 0.82rem 1rem !important;
    font-size: inherit !important;
    line-height: 1.42 !important;
  }

  #termine .termin-tabelle a {
    min-height: 2.25rem !important;
    padding: 0.48rem 0.82rem !important;
    border-radius: 999px !important;
    font-size: inherit !important;
  }

  .event-form-row {
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0.55rem !important;
  }

  .event-form-row input[type="email"] {
    width: auto !important;
  }

  .event-form-row button[type="submit"] {
    width: auto !important;
  }
}

/* Smartphone Hochformat: Terminplaner läuft links/rechts bis an den Rand. */
@media (max-width: 760px) and (orientation: portrait) {
  main {
    padding-top: 2rem !important;
    overflow: hidden !important;
  }

  main::before {
    top: 3.05rem !important;
    left: 50% !important;
    width: 980px !important;
    height: 5rem !important;
    transform: translateX(-50%) rotate(-7deg) !important;
  }

  main::after {
    top: 9.55rem !important;
    left: 50% !important;
    width: 980px !important;
    height: 6.4rem !important;
    transform: translateX(-50%) rotate(-7deg) !important;
    background-size:
      100% 2.5rem,
      100% 1.25rem !important;
    background-position:
      center top,
      center 4.45rem !important;
  }

  #termine.intro {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding: 1.15rem var(--site-gutter) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  #terminplan-heading {
    font-size: clamp(1.9rem, 9vw, 2.55rem) !important;
  }

  .termin-legende {
    width: 100% !important;
    border-radius: var(--radius-large) !important;
    padding: 0.7rem !important;
    gap: 0.55rem !important;
  }

  .termin-legende a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.55rem !important;
  }
}


/* ==========================================================
   V28 Finale Mobile-Korrektur: Terminplan immer Desktop-Layout
   Smartphone Hochformat bekommt KEINE Vollbreite ohne Rand mehr.
   Die Legendenbuttons bleiben immer in einer Reihe wie am Desktop.
   Querformat und Desktop bleiben vollständig gleich.
   ========================================================== */

@media (max-width: 760px) and (orientation: portrait) {
  main {
    padding: clamp(2.8rem, 4.8vw, 5rem) 0 0 !important;
    overflow: hidden !important;
  }

  main::before {
    content: "" !important;
    position: absolute !important;
    top: clamp(11.8rem, 14vw, 18rem) !important;
    left: -22vw !important;
    width: 144vw !important;
    height: clamp(7.8rem, 10vw, 12.5rem) !important;
    transform: rotate(-7deg) !important;
    transform-origin: center !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 11%,
        rgba(23, 32, 51, 0.96) 24%,
        rgba(23, 32, 51, 0.96) 76%,
        transparent 89%,
        transparent 100%
      ) !important;

    border-top: 1px solid rgba(23, 32, 51, 0.34) !important;
    border-bottom: 1px solid rgba(23, 32, 51, 0.34) !important;
    box-shadow: 0 24px 58px rgba(23, 32, 51, 0.16) !important;
    filter: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  main::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: clamp(22.2rem, 25vw, 32rem) !important;
    left: -22vw !important;
    width: 144vw !important;
    height: clamp(10.2rem, 13vw, 16.4rem) !important;
    transform: rotate(-7deg) !important;
    transform-origin: center !important;

    background-image:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 11%,
        rgba(23, 32, 51, 0.96) 24%,
        rgba(23, 32, 51, 0.96) 76%,
        transparent 89%,
        transparent 100%
      ),
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 11%,
        rgba(23, 32, 51, 0.96) 24%,
        rgba(23, 32, 51, 0.96) 76%,
        transparent 89%,
        transparent 100%
      ) !important;
    background-size:
      100% clamp(3.9rem, 5vw, 6.25rem),
      100% clamp(1.95rem, 2.5vw, 3.125rem) !important;
    background-position:
      center top,
      center clamp(7.4rem, 8.8vw, 10.8rem) !important;
    background-repeat: no-repeat !important;

    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 18px 42px rgba(23, 32, 51, 0.12)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #termine.intro {
    width: min(1680px, 96vw) !important;
    max-width: none !important;
    margin: 0 auto clamp(3rem, 5vw, 5.2rem) !important;
    padding: clamp(1.7rem, 3vw, 2.8rem) !important;
    border: 1px solid rgba(11, 134, 243, 0.28) !important;
    border-radius: 28px !important;
  }

  #terminplan-heading {
    width: min(1100px, 100%) !important;
    margin: 0 auto clamp(1.1rem, 2vw, 1.7rem) !important;
    font-size: clamp(2.05rem, 8.5vw, 2.55rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.05em !important;
  }

  .termin-legende {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: min(1040px, 100%) !important;
    margin: 0 auto clamp(1.45rem, 2.6vw, 2.2rem) !important;
    padding: 0.58rem !important;
    gap: 0.42rem !important;
    border-radius: 999px !important;
  }

  .termin-legende a {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    min-height: 2.42rem !important;
    padding: 0.52rem 0.28rem !important;
    box-sizing: border-box !important;
    font-size: clamp(0.56rem, 2.45vw, 0.78rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .termin-legende a::before {
    width: 0.54rem !important;
    height: 0.54rem !important;
    margin-right: 0.26rem !important;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.15),
      0 3px 8px rgba(0, 0, 0, 0.14) !important;
  }

  .termin-legende .legende-naechster::before {
    width: 0.64rem !important;
    height: 0.64rem !important;
    margin-right: 0.28rem !important;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.24),
      0 0 0 5px rgba(242, 189, 53, 0.14),
      0 3px 8px rgba(112, 73, 8, 0.20) !important;
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  .termin-legende {
    padding: 0.48rem !important;
    gap: 0.32rem !important;
  }

  .termin-legende a {
    min-height: 2.25rem !important;
    padding: 0.46rem 0.18rem !important;
    font-size: clamp(0.5rem, 2.38vw, 0.66rem) !important;
  }

  .termin-legende a::before {
    width: 0.46rem !important;
    height: 0.46rem !important;
    margin-right: 0.18rem !important;
  }

  .termin-legende .legende-naechster::before {
    width: 0.54rem !important;
    height: 0.54rem !important;
    margin-right: 0.2rem !important;
  }
}

/* ==========================================================
   V29 Final: Smartphone-Layout sauber getrennt
   Hochformat: Terminplaner ohne Außenrand links/rechts.
   Querformat: Desktop-Wirkung mit breiterem Seitenrand,
   aber Buttons bleiben immer sauber in einer Reihe.
   ========================================================== */

/* Smartphone / kleine Geräte im Querformat:
   Desktop-Anmutung, aber passend auf die kleinere Breite skaliert. */
@media (max-width: 980px) and (orientation: landscape) {
  main {
    padding-top: clamp(2.4rem, 4vw, 3.2rem) !important;
    overflow: hidden !important;
  }

  main::before {
    top: clamp(9.8rem, 13vw, 13.5rem) !important;
    left: 50% !important;
    width: 138vw !important;
    height: clamp(5.6rem, 8vw, 8.4rem) !important;
    transform: translateX(-50%) rotate(-7deg) !important;
    transform-origin: center !important;
  }

  main::after {
    top: clamp(17.6rem, 23vw, 23.5rem) !important;
    left: 50% !important;
    width: 138vw !important;
    height: clamp(7rem, 10vw, 10rem) !important;
    transform: translateX(-50%) rotate(-7deg) !important;
    transform-origin: center !important;
    background-size:
      100% clamp(2.8rem, 4vw, 4.2rem),
      100% clamp(1.4rem, 2vw, 2.1rem) !important;
    background-position:
      center top,
      center clamp(5.2rem, 7vw, 7rem) !important;
  }

  #termine.intro {
    width: 82vw !important;
    max-width: 1680px !important;
    margin: 0 auto clamp(3rem, 5vw, 5.2rem) !important;
    padding: clamp(1.35rem, 2.2vw, 2.1rem) !important;
    border: 1px solid rgba(11, 134, 243, 0.28) !important;
    border-radius: 28px !important;
  }

  #terminplan-heading {
    width: min(1100px, 100%) !important;
    margin: 0 auto clamp(1rem, 1.7vw, 1.4rem) !important;
    font-size: clamp(2rem, 5.4vw, 3.15rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.05em !important;
  }

  .termin-legende {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: min(1040px, 100%) !important;
    margin: 0 auto clamp(1.35rem, 2.2vw, 1.9rem) !important;
    padding: clamp(0.48rem, 0.9vw, 0.68rem) !important;
    gap: clamp(0.36rem, 0.8vw, 0.62rem) !important;
    border-radius: 999px !important;
  }

  .termin-legende a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: clamp(2.15rem, 4.1vw, 2.55rem) !important;
    padding: 0.48rem 0.32rem !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    font-size: clamp(0.64rem, 1.6vw, 0.92rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  .termin-legende a::before {
    width: clamp(0.46rem, 1.1vw, 0.62rem) !important;
    height: clamp(0.46rem, 1.1vw, 0.62rem) !important;
    margin-right: clamp(0.18rem, 0.55vw, 0.34rem) !important;
  }

  .termin-legende .legende-naechster::before {
    width: clamp(0.54rem, 1.25vw, 0.72rem) !important;
    height: clamp(0.54rem, 1.25vw, 0.72rem) !important;
    margin-right: clamp(0.2rem, 0.55vw, 0.36rem) !important;
  }
}

/* Smartphone Hochformat:
   Terminplaner wirklich bündig bis an den Bildschirmrand,
   Buttons trotzdem in einer Reihe wie am Desktop. */
@media (max-width: 760px) and (orientation: portrait) {
  main {
    padding-top: 2rem !important;
    overflow: hidden !important;
  }

  main::before {
    top: 3.05rem !important;
    left: 50% !important;
    width: 980px !important;
    height: 5rem !important;
    transform: translateX(-50%) rotate(-7deg) !important;
    transform-origin: center !important;
  }

  main::after {
    top: 9.55rem !important;
    left: 50% !important;
    width: 980px !important;
    height: 6.4rem !important;
    transform: translateX(-50%) rotate(-7deg) !important;
    transform-origin: center !important;
    background-size:
      100% 2.5rem,
      100% 1.25rem !important;
    background-position:
      center top,
      center 4.45rem !important;
  }

  #termine.intro {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(2.4rem, 7vw, 3.2rem) !important;
    padding: clamp(1.35rem, 5vw, 1.75rem) max(0.75rem, var(--site-gutter)) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  #terminplan-heading {
    width: 100% !important;
    margin: 0 auto clamp(1rem, 4.4vw, 1.35rem) !important;
    font-size: clamp(1.95rem, 8.4vw, 2.55rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.05em !important;
  }

  .termin-legende {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto clamp(1.25rem, 5vw, 1.65rem) !important;
    padding: 0.48rem !important;
    gap: 0.34rem !important;
    border-radius: 999px !important;
  }

  .termin-legende a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 2.28rem !important;
    padding: 0.45rem 0.18rem !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    font-size: clamp(0.48rem, 2.25vw, 0.68rem) !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  .termin-legende a::before {
    width: clamp(0.38rem, 1.7vw, 0.5rem) !important;
    height: clamp(0.38rem, 1.7vw, 0.5rem) !important;
    margin-right: clamp(0.12rem, 0.85vw, 0.22rem) !important;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.15),
      0 2px 6px rgba(0, 0, 0, 0.14) !important;
  }

  .termin-legende .legende-naechster::before {
    width: clamp(0.44rem, 1.9vw, 0.58rem) !important;
    height: clamp(0.44rem, 1.9vw, 0.58rem) !important;
    margin-right: clamp(0.13rem, 0.85vw, 0.24rem) !important;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.24),
      0 0 0 4px rgba(242, 189, 53, 0.14),
      0 2px 6px rgba(112, 73, 8, 0.20) !important;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  #termine.intro {
    padding-left: 0.62rem !important;
    padding-right: 0.62rem !important;
  }

  .termin-legende {
    padding: 0.42rem !important;
    gap: 0.24rem !important;
  }

  .termin-legende a {
    min-height: 2.12rem !important;
    padding-left: 0.12rem !important;
    padding-right: 0.12rem !important;
    font-size: clamp(0.44rem, 2.18vw, 0.58rem) !important;
  }
}