/* Bausteine. Nur semantische Tokens. Reihenfolge wie auf bausteine.html.
   Namen folgen den Bausteinen aus DESIGN.md (SiteHeader → .site-header usw.). */

/* ------------------------------------------------------------------
   Icon
   ------------------------------------------------------------------ */

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.icon--lg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ------------------------------------------------------------------
   Button
   ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.6rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-heading);
  font: 600 var(--fs-md) / 1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline-offset: 3px;
}

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

.btn--primary:hover {
  background: var(--color-primary-strong);
  color: var(--color-on-primary);
}

.btn--secondary {
  border-color: currentColor;
  color: var(--color-heading);
}

.btn--secondary:hover {
  background: var(--surface-inset);
  color: var(--color-heading);
}

.btn--ghost {
  color: var(--color-link);
}

.btn--ghost:hover {
  background: var(--surface-inset);
  color: var(--color-link-hover);
}

.btn--link {
  min-height: var(--tap);
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.btn--link:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

.btn--link .icon {
  transition: transform 0.15s ease;
}

.btn--link:hover .icon {
  transform: translateX(3px);
}

.btn--small {
  min-height: 2.25rem;
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-sm);
}

/* Kleine Buttons bleiben per Abstand außen auf 44 px Trefferfläche */
.btn--small {
  position: relative;
}

.btn--small::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

.btn[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ------------------------------------------------------------------
   Tag / Chip / Badge
   ------------------------------------------------------------------ */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.tags li {
  margin: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.tag .icon {
  width: 1.05em;
  height: 1.05em;
}

.tag--accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.tag--outline {
  border-color: currentColor;
  background: transparent;
  color: var(--color-text-muted);
}

.tag--today {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

a.tag {
  min-height: var(--tap);
  padding-inline: 0.9rem;
  text-decoration: none;
}

a.tag:hover {
  border-color: currentColor;
}

/* ------------------------------------------------------------------
   Eyebrow, SectionHeader
   ------------------------------------------------------------------ */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--color-accent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}

.section-header {
  max-width: 44rem;
  margin-bottom: var(--space-5);
}

.section-header > :last-child {
  margin-bottom: 0;
}

.section-header__lead {
  color: var(--color-text);
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.section-header--row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  max-width: none;
}

/* ------------------------------------------------------------------
   SiteHeader
   ------------------------------------------------------------------ */

/* Vollbreite Glasleiste, Inhalt auf Content-Breite (.wrap), damit Logo und Navigation mit den Scheiben fluchten.
   Das Glas liegt auf ::before: backdrop-filter am Header selbst würde das fixierte Mobilmenü an ihn binden. */
.site-header {
  position: sticky;
  top: var(--proto-h, 0px);
  z-index: 40;
  color: var(--color-text);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--color-rule);
  background: var(--surface-glass);
  box-shadow: 0 6px 24px -18px rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: var(--surface-glass-solid); }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header::before {
    background: var(--surface-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
  padding-block: var(--space-2);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: var(--tap);
  color: var(--logo-color);
  text-decoration: none;
}

/* Logo: Hundekopf (PNG) + Vereinsname als Text. --h ist die Höhe des Textblocks (zwei Zeilen),
   der Kopf steht etwas über. Proportionen wie die frühere Wortmarke: Name 34/62, Zusatz 0.56 davon. */
.logo-lockup {
  --h: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--h) * 14 / 62);
  color: var(--logo-color);
}

.logo-lockup > img {
  display: block;
  width: auto;
  height: calc(var(--h) * 1.3);
  margin-block: calc(var(--h) * -0.15);
}

.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--h);
  font-family: var(--font-display);
  white-space: nowrap;
}

.logo-text__name {
  font-size: calc(var(--h) * 34 / 62);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.logo-text__sub {
  margin-top: calc(var(--h) * 0.07);
  font-size: calc(var(--h) * 34 / 62 * 0.56);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--tap);
  min-height: var(--tap);
  margin-left: auto;
  padding: 0 var(--space-3);
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-heading);
  font: 600 var(--fs-sm) / 1 var(--font-body);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: currentColor;
}

.nav-toggle__bars {
  position: relative;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius-s);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--surface-inset);
  color: var(--color-heading);
}

.site-nav a[aria-current="page"] {
  color: var(--color-heading);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

/* Ohne JavaScript: Navigation bleibt im Fluss unter dem Logo. */
html:not(.js) .nav-toggle {
  display: none;
}

html:not(.js) .site-header__inner {
  flex-wrap: wrap;
}

html:not(.js) .site-nav {
  flex: 1 0 100%;
}

html:not(.js) .site-nav ul {
  flex-flow: row wrap;
}

@media (max-width: 1199px) {
  html.js .site-nav {
    position: fixed;
    top: calc(var(--proto-h, 0px) + var(--header-h) + var(--space-3));
    right: var(--gutter);
    left: var(--gutter);
    z-index: 39;
    max-height: calc(100dvh - var(--proto-h, 0px) - var(--header-h) - var(--space-7));
    padding: var(--space-4);
    overflow: auto;
    border-radius: var(--radius-l);
    background: var(--surface-glass-solid);
    box-shadow: var(--glass-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  html.js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  html.js .site-nav a {
    min-height: 3rem;
    font-size: var(--fs-lg);
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgb(0 0 0 / 0.25);
  }
}

@media (min-width: 1200px) {
  .nav-toggle,
  .nav-backdrop {
    display: none;
  }

  .site-nav {
    margin-left: auto;
  }

  .site-nav ul {
    flex-direction: row;
    gap: 0;
  }

  .site-nav a {
    padding: 0 0.7rem;
    font-size: var(--fs-sm);
  }

  .site-nav li:last-child a {
    margin-right: -0.7rem;
  }
}

@media (max-width: 639px) {
  .site-header__logo .logo-lockup {
    --h: 2.25rem;
  }
}

/* ------------------------------------------------------------------
   SiteFooter
   ------------------------------------------------------------------ */

/* Vollbreites Band in getöntem Glas, Inhalt auf Content-Breite wie der Header */
.site-footer {
  position: relative;
  z-index: 2;
  padding-block: var(--space-7) var(--space-5);
  color: var(--color-text);
  -webkit-backdrop-filter: var(--glass-strong-filter);
  backdrop-filter: var(--glass-strong-filter);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-footer { background: var(--surface-glass-strong-solid); }
}

@media (prefers-reduced-transparency: reduce) {
  .site-footer { background: var(--surface-glass-strong-solid); }
}

.site-footer__pane {
  display: grid;
  gap: var(--space-6);
}

.site-footer__brand .logo-lockup {
  --h: 3rem;
  margin-bottom: var(--space-3);
}

.site-footer h2 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.site-footer address {
  font-style: normal;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin: 0;
}

.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.site-footer__place {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.site-footer__place img {
  flex: none;
  width: 1.75rem;
  height: auto;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-sm);
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__legal ul {
  display: flex;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .site-footer__pane {
    grid-template-columns: 1.3fr 1fr 1fr;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */

.hero {
  margin-top: var(--space-5);
}

.hero__pane {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero h1 {
  max-width: 15ch;
  font-size: var(--fs-4xl);
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: var(--space-5);
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.hero__media {
  margin: 0;
}

.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.hero__media figcaption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Schmal: Hero passt mit Bild in etwa einen Bildschirm */
@media (max-width: 899px) {
  .hero__pane {
    gap: var(--space-5);
  }

  .hero h1 {
    font-size: var(--fs-3xl);
  }

  .hero__lead {
    margin-bottom: var(--space-4);
    font-size: var(--fs-md);
  }

  .hero__media img {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 900px) {
  .hero__pane {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-7);
  }
}

/* Unterseiten-Hero: kompakt, ohne Bild */
.page-hero {
  margin-top: var(--space-5);
}

.page-hero h1 {
  max-width: 22ch;
  margin-bottom: var(--space-3);
}

.page-hero__lead {
  max-width: 44rem;
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.page-hero .tags {
  margin: var(--space-5) 0 0;
}

/* ------------------------------------------------------------------
   NoticeBanner (redaktionell) und Alert (System-Feedback)
   ------------------------------------------------------------------ */

.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-l);
}

.notice__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-heading);
}

.notice__body > :last-child {
  margin-bottom: 0;
}

.notice__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-heading);
}

.notice__title time {
  font-variant-numeric: tabular-nums;
}

.notice__body p {
  margin-bottom: var(--space-2);
}

.notice__action {
  grid-column: 2;
  margin: 0;
}

.notice--wichtig {
  box-shadow: inset 4px 0 0 var(--color-accent), var(--glass-shadow);
}

.notice--wichtig .notice__icon {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

@media (min-width: 768px) {
  .notice {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .notice__action {
    grid-column: auto;
  }
}

.alert {
  --alert-color: var(--color-info);
  --alert-surface: var(--surface-info);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--alert-color);
  border-left-width: 5px;
  border-radius: var(--radius-m);
  background: var(--alert-surface);
  color: var(--color-text);
}

.alert:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.alert > .icon {
  grid-row: 1 / span 2;
  margin-top: 0.15rem;
  color: var(--alert-color);
}

.alert__title {
  margin: 0;
  color: var(--alert-color);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.4;
}

.alert__body {
  grid-column: 2;
}

.alert__body > :last-child {
  margin-bottom: 0;
}

.alert__body p {
  margin-bottom: var(--space-2);
}

.alert__body ul {
  margin: var(--space-2) 0 0;
}

.alert__body a {
  color: var(--color-text);
}

.alert--success { --alert-color: var(--color-success); --alert-surface: var(--surface-success); }
.alert--error { --alert-color: var(--color-danger); --alert-surface: var(--surface-danger); }
.alert--warning { --alert-color: var(--color-warning); --alert-surface: var(--surface-warning); }
.alert--info { --alert-color: var(--color-info); --alert-surface: var(--surface-info); }

/* ------------------------------------------------------------------
   EventList (Termine & Hinweise auf der Startseite)
   Ausgelegt für 0–4 Einträge mit Vorlauf. Kein Archiv: Abgelaufenes blendet events.js aus.
   ------------------------------------------------------------------ */

.events__list {
  display: grid;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .events__list {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }
}

.event {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-card);
  box-shadow: 0 0 0 1px var(--color-rule);
}

.event__date {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 5.75rem;
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-m);
  background: var(--color-primary-soft);
  color: var(--color-heading);
  line-height: 1.1;
  text-align: center;
}

.event__date > time {
  display: grid;
  justify-items: center;
}

.event__day {
  font: 700 var(--fs-2xl) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.event__month {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.event__until {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.event__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
}

.event__when {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.event__text {
  margin: 0;
}

.events__empty {
  margin: 0;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   Bild-Platzhalter: gestaltet, beschriftet, gleich die Fotowunschliste
   ------------------------------------------------------------------ */

.ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  aspect-ratio: var(--ph-ratio, 3 / 2);
  margin: 0;
  padding: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-m);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / 0.18) 14px 15px),
    linear-gradient(135deg, var(--color-primary-soft), var(--color-accent-soft));
  color: var(--color-heading);
  text-align: center;
}

.ph .icon {
  width: 2rem;
  height: 2rem;
  opacity: 0.8;
}

.ph__label {
  max-width: 22ch;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

.ph__label::before {
  content: "Foto: ";
}

.ph--portrait {
  --ph-ratio: 2 / 3;
}

/* ------------------------------------------------------------------
   OfferCard (Kachel)
   ------------------------------------------------------------------ */

.offer-cards {
  display: grid;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-cards > li {
  margin: 0;
}

@media (min-width: 720px) {
  .offer-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-l);
  background: var(--surface-card);
  box-shadow: 0 0 0 1px var(--color-rule);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.offer-card__media {
  margin: 0 0 var(--space-4);
}

.offer-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.offer-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 var(--space-3) var(--space-3);
}

.offer-card__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xl);
}

.offer-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Die ganze Karte ist klickbar, im Markup bleibt es ein Link. */
.offer-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.offer-card__title a:focus-visible {
  outline: none;
}

.offer-card:has(.offer-card__title a:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.offer-card__text {
  flex: 1;
}

.offer-card .tags {
  margin-bottom: var(--space-3);
}

.offer-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-link);
  font-weight: 600;
}

.offer-card:hover {
  transform: translateY(-3px);
}

.offer-card:hover .offer-card__more {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.offer-card--compact {
  padding: var(--space-2);
}

.offer-card--compact .offer-card__body {
  padding: var(--space-4);
}

.offer-cards__also {
  margin: var(--space-5) 0 0;
}

/* ------------------------------------------------------------------
   OfferBlock, KeyFacts, Checklist
   ------------------------------------------------------------------ */

.offer + .offer {
  margin-top: var(--gutter);
}

.offer__grid {
  display: grid;
  gap: var(--space-6);
}

.offer__title {
  margin-bottom: var(--space-4);
}

.offer__main > :last-child {
  margin-bottom: 0;
}

.offer__aside {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.offer__aside h3,
.offer__main h3 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
}

.offer__people {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 960px) {
  .offer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr);
    gap: var(--space-7);
  }
}

.key-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-inset);
}

.key-facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-3);
  padding-block: var(--space-3);
}

.key-facts__item + .key-facts__item {
  border-top: 1px solid var(--color-rule);
}

.key-facts__item > .icon {
  grid-row: 1 / span 2;
  margin-top: 0.2rem;
  color: var(--color-heading);
}

.key-facts dt {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

.key-facts dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.key-facts dd .muted {
  display: block;
  font-weight: 400;
}

.checklist {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 2rem;
}

.checklist li + li {
  margin-top: var(--space-2);
}

.checklist li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background-color: var(--color-primary-soft);
}

.checklist li::after {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1.3em;
  height: 1.3em;
  background-color: var(--color-heading);
  -webkit-mask: url("../icons/check.svg") center / 70% no-repeat;
  mask: url("../icons/check.svg") center / 70% no-repeat;
}

/* ------------------------------------------------------------------
   WeekSchedule: im CMS eine einfache Tabelle (Core-Block „Tabelle“).
   Mobil werden Zeilen zu Karten, Beschriftungen kommen aus nth-child, nicht aus doppeltem Inhalt.
   ------------------------------------------------------------------ */

.schedule-wrap {
  overflow-x: auto;
}

.schedule {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.schedule caption {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-align: left;
}

.schedule th,
.schedule td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  vertical-align: top;
  line-height: 1.45;
}

.schedule thead th {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  border-bottom: 2px solid var(--color-rule);
}

.schedule tbody tr {
  border-top: 1px solid var(--color-rule);
}

.schedule tbody tr.is-continued {
  border-top-style: dashed;
}

.schedule tbody tr.is-continued td:first-child .schedule__day {
  visibility: hidden;
}

.schedule td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

.schedule td:nth-child(2) {
  white-space: nowrap;
}

.schedule td:nth-child(3) {
  color: var(--color-heading);
  font-weight: 600;
}

.schedule tr.is-today {
  background: var(--color-primary-soft);
}

.schedule tr.is-today td:first-child {
  box-shadow: inset 4px 0 0 var(--color-primary);
}

.schedule tr.is-today td:first-child .schedule__day {
  visibility: visible;
}

.schedule td:first-child,
.schedule th:first-child {
  padding-left: var(--space-3);
}

.schedule .tag {
  margin: 0.1rem 0.25rem 0.1rem 0;
}

.schedule__today {
  display: flex;
  width: max-content;
  margin-top: var(--space-1);
}

@media (max-width: 767px) {
  .schedule,
  .schedule tbody,
  .schedule tr,
  .schedule td {
    display: block;
  }

  .schedule caption {
    display: block;
    width: 100%;
  }

  .schedule td:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .schedule thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .schedule tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
  }

  .schedule td {
    padding: 0;
  }

  .schedule td:first-child {
    grid-row: 1 / span 4;
    min-width: 3.25rem;
  }

  .schedule td:nth-child(2) {
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .schedule td:nth-child(4):not(:empty)::before {
    content: "mit ";
    color: var(--color-text-muted);
  }

  .schedule td:nth-child(4):empty,
  .schedule td:nth-child(5):empty {
    display: none;
  }

  .schedule td:nth-child(5) {
    margin-top: var(--space-1);
  }

  .schedule tbody tr.is-continued {
    border-top: 0;
    padding-top: 0;
  }
}

/* ------------------------------------------------------------------
   WeekStrip: kompakte Woche auf der Startseite
   ------------------------------------------------------------------ */

.week-strip {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.week-strip li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-inset);
}

.week-strip__day {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-heading);
}

.week-strip__what {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.week-strip__what li {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
}

.week-strip__what li + li {
  margin-top: var(--space-1);
}

.week-strip__time {
  display: block;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.week-strip li.is-off .week-strip__what {
  color: var(--color-text-muted);
}

.week-strip > li.is-today {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.week-strip > li.is-today .week-strip__day,
.week-strip > li.is-today .week-strip__time,
.week-strip > li.is-today .week-strip__what {
  color: var(--color-on-primary);
}

@media (min-width: 1024px) {
  .week-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .week-strip > li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
  }
}

/* ------------------------------------------------------------------
   StepList
   ------------------------------------------------------------------ */

.steps {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  grid-row: 1 / span 3;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step--done::before {
  content: "";
  background: var(--color-accent-soft);
}

.step__title {
  margin: 0.45rem 0 0;
  font-size: var(--fs-lg);
}

.step__text {
  margin: 0;
}

.step__note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.steps--vertical .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.25rem;
  bottom: calc(-1 * var(--space-4) + 0.5rem);
  left: calc(1.375rem - 1px);
  width: 2px;
  background: var(--color-rule);
}

.steps--vertical {
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .steps--row {
    grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* ------------------------------------------------------------------
   PersonCard (Bild links), RoleList
   ------------------------------------------------------------------ */

.people {
  display: grid;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.people > li {
  margin: 0;
}

@media (min-width: 900px) {
  .people--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .people--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.person {
  display: grid;
  grid-template-columns: var(--person-photo, 7rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-l);
}

.person__photo {
  margin: 0;
}

.person__photo img,
.person__photo .person__initials {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-m);
  object-fit: cover;
  object-position: 50% 18%;
}

/* Ohne Foto: Initialen auf Duoton. Kein „Bild folgt“. */
.person__initials {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-primary-soft), var(--color-accent-soft));
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: calc(var(--person-photo, 7rem) * 0.32);
  font-weight: 700;
  letter-spacing: 0.02em;
}


.person__name {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
}

.person__role {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

.person__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
}

.person__body > :last-child {
  margin-bottom: 0;
}

.person__quals summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  color: var(--color-link);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.person__quals summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.person__quals[open] summary::before {
  transform: rotate(45deg);
}

.person__quals ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
}

.person .btn {
  margin-top: var(--space-2);
}

.person--large {
  --person-photo: 8.5rem;
  padding: var(--space-5);
}

.person--compact {
  --person-photo: 3.5rem;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-m);
  background: var(--surface-inset);
}

.person--compact .person__photo img,
.person--compact .person__initials {
  aspect-ratio: 1;
  border-radius: 50%;
}

.person--compact .person__name {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
}

.person--compact .person__role {
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 400;
}

.person--compact a {
  color: inherit;
}

.person--wanted {
  border: 2px dashed var(--color-rule);
  background: transparent;
  box-shadow: none;
}

@media (max-width: 420px) {
  .person,
  .person--large {
    --person-photo: 5.5rem;
  }

  .person--compact {
    --person-photo: 3.5rem;
  }
}

/* Ämter als Tabelle: eine Zeile pro Amt, 1. und 2. Besetzung nebeneinander, damit Paare zusammenbleiben.
   Schmal begrenzt, sonst laufen die Namen eines Paares zu weit auseinander. */
.roles {
  max-width: 52rem;
  margin: 0;
  table-layout: fixed;
}

.roles th,
.roles td {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: baseline;
}

.roles tbody th {
  width: 34%;
  padding-right: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.roles td {
  padding-right: var(--space-4);
  font-weight: 600;
}

.roles__rank {
  margin-right: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* Personenkarten in einer Glasscheibe: ruhige Karte statt Glas auf Glas */
.people .person:not(.person--wanted) {
  background: var(--surface-card);
  box-shadow: 0 0 0 1px var(--color-rule);
}

/* Kontaktliste: eine Person pro Zeile, Foto | Text | Button. Für Name bis ca. 16 und Zuständigkeit bis ca. 24 Zeichen
   ausgelegt, der Button bricht nie um. Liegt in einer Scheibe, darum ohne eigene Kartenfläche. */
.people--rows {
  gap: 0;
}

.people--rows > li + li {
  border-top: 1px solid var(--color-rule);
}

.people .person--row:not(.person--wanted) {
  --person-photo: 6rem;
  grid-template-columns: var(--person-photo) minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.people--rows > li:first-child .person--row { padding-top: 0; }
.people--rows > li:last-child .person--row { padding-bottom: 0; }

.person--row .person__photo img,
.person--row .person__initials {
  aspect-ratio: 1;
}

.person--row .person__name {
  margin-bottom: 0;
}

.person--row .person__role {
  margin-bottom: var(--space-1);
}

.person--row .person__meta {
  max-width: var(--measure);
  margin: 0;
}

.person--row .btn {
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .people .person--row:not(.person--wanted) {
    --person-photo: 4.5rem;
    grid-template-columns: var(--person-photo) minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    align-items: start;
  }

  .person--row .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Schmal: Amt als Zeile darüber, die beiden Namen darunter nebeneinander */
@media (max-width: 599px) {
  .roles tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-rule);
  }

  .roles tbody th,
  .roles td {
    width: auto;
    padding: 0;
    border: 0;
  }

  .roles tbody th {
    grid-column: 1 / -1;
  }

  .roles td[colspan] {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------
   LocationCard
   ------------------------------------------------------------------ */

.location {
  display: grid;
  gap: var(--space-6);
}

.location__map {
  margin: 0;
}

.location__map svg {
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

.location__map figcaption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.location address {
  margin-bottom: var(--space-4);
  font-size: var(--fs-lg);
  font-style: normal;
  line-height: 1.45;
}

.location__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.location h3 {
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
}

.location address.postal {
  font-size: var(--fs-md);
}

.prose .alert,
.glass > .alert {
  margin-bottom: var(--space-5);
}

/* Anfahrtskarte aus OSM-Daten (scripts/map/build-map.mjs). Alle Farben aus den Theme-Tokens. */
.map { display: block; width: 100%; height: auto; border-radius: var(--radius-m); background: var(--map-ground); }
.map__ground { fill: var(--map-ground); }
.map__green { fill: var(--color-primary-soft); opacity: 0.55; }
.map__wood { fill: var(--color-primary-soft); }
.map__town { fill: var(--color-accent-soft); opacity: 0.7; }
.map__water { fill: var(--map-water); }
.map__river { fill: none; stroke: var(--map-water); stroke-width: 6; }
.map__bldg { fill: var(--color-rule); }
.map__casing, .map__road, .map__rail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map__casing { stroke: var(--color-rule); }
.map__casing--minor { stroke-width: 7; }
.map__casing--main { stroke-width: 10; }
.map__casing--major { stroke-width: 13; }
.map__road { stroke: var(--surface-glass-solid); }
.map__road--minor { stroke-width: 5; }
.map__road--main { stroke-width: 7.5; stroke: var(--map-road-main); }
.map__road--major { stroke-width: 10; stroke: var(--map-road-major); }
.map__road--service { stroke: var(--color-rule); stroke-width: 2.5; }
.map__road--track { stroke: var(--color-rule); stroke-width: 2; stroke-dasharray: 5 4; }
.map__road--path { stroke: var(--color-rule); stroke-width: 1.4; stroke-dasharray: 2 3; }
.map__rail { stroke: var(--color-text-muted); stroke-width: 3; }
.map__rail--ties { stroke: var(--map-ground); stroke-width: 1.6; stroke-dasharray: 8 8; }
.map__hsv { fill: var(--color-primary); opacity: 0.35; stroke: var(--color-primary); stroke-width: 2; }
.map__pin path { fill: var(--color-primary); stroke: var(--map-ground); stroke-width: 2; }
.map__pin circle { fill: var(--color-on-primary); }
.map__label { fill: var(--color-text); font: 600 26px var(--font-body); paint-order: stroke; stroke: var(--map-ground); stroke-width: 6px; stroke-linejoin: round; }
.map__label--muted { fill: var(--color-text-muted); font-weight: 400; }
.map__label--place { font: 700 34px var(--font-display); fill: var(--color-heading); }
.map__label--water { fill: var(--map-water-text); font-style: italic; font-weight: 400; stroke: none; }
.map__label--road { font-size: 21px; fill: var(--color-text-muted); }
.map__label--pin { font-size: 28px; fill: var(--color-heading); }
.map__north circle { fill: var(--map-ground); stroke: var(--color-rule); stroke-width: 2; }
.map__north path { fill: var(--color-heading); }
.map__north text { fill: var(--color-text-muted); font: 600 18px var(--font-body); text-anchor: middle; }

@media (min-width: 900px) {
  .location {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-7);
  }
}

/* ------------------------------------------------------------------
   FormField, ContactForm
   Felder bleiben deckend. Glas ist die Bühne, nicht das Eingabefeld.
   ------------------------------------------------------------------ */

.form {
  display: grid;
  gap: var(--space-5);
}

.form__intro {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Felder einer Zeile teilen sich die Zeilen Label / Hinweis / Eingabe / Fehler.
     So stehen die Eingaben auf gleicher Höhe, auch wenn nur ein Feld einen Hinweis hat. */
  @supports (grid-template-rows: subgrid) {
    .form__row--2 {
      grid-template-rows: repeat(4, auto);
      row-gap: 0;
    }

    .form__row--2 > .field {
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .form__row--2 > .field > .field__label { grid-row: 1; margin-bottom: var(--space-2); }
    .form__row--2 > .field > .field__hint { grid-row: 2; margin-bottom: var(--space-2); }
    .form__row--2 > .field > .field__control,
    .form__row--2 > .field > .select { grid-row: 3; }
    .form__row--2 > .field > .field__error { grid-row: 4; margin-top: var(--space-2); }
  }
}

.field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

.field__label,
.fieldset__legend {
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.35;
}

.field__req {
  margin-left: 0.15em;
  color: var(--color-danger);
}

.field__opt {
  color: var(--color-text-muted);
  font-weight: 400;
}

.field__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.field__control {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-s);
  background: var(--surface-field);
  color: var(--color-field-text);
  font: 400 var(--fs-md) / 1.4 var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.field__control {
  min-height: 9rem;
  resize: vertical;
}

.field__control:hover {
  border-color: var(--color-field-border-hover);
}

.field__control:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-field-border-hover);
}

.field__control:disabled {
  border-style: dashed;
  background: var(--surface-field-disabled);
  color: var(--color-field-disabled);
  cursor: not-allowed;
}

.select {
  position: relative;
}

.select .field__control {
  padding-right: 2.75rem;
  appearance: none;
}

.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--color-field-text);
  border-bottom: 2px solid var(--color-field-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field__error {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-danger);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

.field__error .icon {
  margin-top: 0.05rem;
}

/* Fehlerzustand: Farbe, dickerer Rahmen, Balken links und Icon. Nicht nur Farbe. */
.field.is-invalid .field__error,
.fieldset.is-invalid .field__error {
  display: flex;
}

.field.is-invalid .field__control,
.field__control[aria-invalid="true"] {
  border: 2px solid var(--color-danger);
  box-shadow: inset 4px 0 0 var(--color-danger);
}

.fieldset {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-m);
  min-width: 0;
}

.fieldset__legend {
  padding: 0 var(--space-2);
}

.choices {
  display: grid;
  gap: var(--space-1);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap);
  padding-block: 0.6rem;
  line-height: 1.45;
  cursor: pointer;
}

.choice input {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.05rem 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.choice input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.choice input:disabled,
.choice input:disabled + span {
  cursor: not-allowed;
  opacity: 0.6;
}

.fieldset.is-invalid .choice input,
.field.is-invalid .choice input {
  outline: 2px solid var(--color-danger);
  outline-offset: 1px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.form__proto-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.form__hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Zustandsdemo auf bausteine.html: Hover/Fokus statisch zeigen */
.field__control.is-hover {
  border-color: var(--color-field-border-hover);
}

.field__control.is-focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-field-border-hover);
}

/* ------------------------------------------------------------------
   NewsCard, NewsList, Post
   ------------------------------------------------------------------ */

.news-list {
  display: grid;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-list > li {
  margin: 0;
}

.news-card {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-l);
}

.news-card__meta,
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.news-card__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xl);
}

.news-card__title a {
  color: inherit;
  text-decoration: none;
}

.news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.news-card:has(a:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.news-card__title a:focus-visible {
  outline: none;
}

.news-card:hover .news-card__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.news-card__excerpt {
  margin: 0;
}

.news-card__media img,
.news-card__media .ph {
  width: 100%;
  border-radius: var(--radius-m);
}

@media (min-width: 768px) {
  .news-card--media {
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: start;
  }
}

.post {
  margin-top: var(--space-5);
}

.post__body {
  max-width: var(--measure);
}

.post__body h2 {
  margin-top: var(--space-6);
  font-size: var(--fs-xl);
}

.post__back {
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------------
   Gallery
   ------------------------------------------------------------------ */

.gallery {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}

.gallery li {
  margin: 0;
}

.gallery figure {
  margin: 0;
}

.gallery img,
.gallery .ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.gallery figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.gallery figcaption time {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ------------------------------------------------------------------
   CtaBand
   ------------------------------------------------------------------ */

.cta-band {
  display: grid;
  gap: var(--space-4) var(--space-6);
  align-items: center;
}

.cta-band__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-2xl);
}

.cta-band p {
  margin: 0;
}

@media (min-width: 768px) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ------------------------------------------------------------------
   Inhaltliche Kleinteile
   ------------------------------------------------------------------ */

.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.split__media {
  margin: 0;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-m);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-7);
  }

  .split--reverse > :first-child {
    order: 2;
  }
}

.icon-line {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.icon-line > .icon {
  margin-top: 0.15rem;
  color: var(--color-heading);
}

.icon-line p {
  margin: 0;
}

.icon-list {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.icon-list > li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.icon-list > li + li {
  margin-top: var(--space-3);
}

.icon-list > li > .icon {
  margin-top: 0.2rem;
  color: var(--color-heading);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.legend li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
}

.table-scroll {
  overflow-x: auto;
}

.fee-table th,
.fee-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.fee-table td:last-child {
  font-variant-numeric: tabular-nums;
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jump li {
  margin: 0;
}

.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--fs-xl);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
}

.prose address {
  margin-bottom: var(--space-4);
  font-style: normal;
}