/* ==========================================================================
   Medvis Designsystem-Foundation – V3 Redesign
   ----------------------------------------------------------------------
   - Variable Montserrat (lokal, latin + latin-ext)
   - CSS-Custom-Properties: Farben, Typo, Spacing, Radii, Shadows
   - DS-Komponenten: .ds-card, .ds-pill, .ds-button, .ds-icon
   - .ds-*-Präfix vermeidet Kollisionen mit Legacy-Stilen aus index.css.
     Body-Font wird (noch) NICHT global überschrieben – nur DS-Komponenten
     nutzen Montserrat, bis das Layout Sektion für Sektion umgebaut ist.
   ========================================================================== */

/* ----- @font-face: Variable Montserrat (Roman + Italic, latin + latin-ext) */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat/latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat/latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat/latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat/latin-ext-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ----- Tokens ----- */

:root {
  /* Brand-Farbe + Helligkeitsstufen */
  --c-accent:        #A696D7;
  --c-accent-hover:  #8E7BC4;
  --c-accent-strong: #6A4FA0;
  --c-accent-soft:   #EDE7F6;
  --c-accent-bg:     #F6F4FA;

  /* Status-Farben (Termin-Tabellen-Pills, Folie 13–17) */
  --c-status-free-bg:   #DDF3E1;
  --c-status-free-fg:   #1E7A3E;
  --c-status-few-bg:    #FFF1CC;
  --c-status-few-fg:    #8A6500;
  --c-status-full-bg:   #F4DADA;
  --c-status-full-fg:   #8B1F1F;

  /* Neutrals */
  --c-bg:        #FFFFFF;
  --c-bg-soft:   #F6F4FA;
  --c-fg:        #1A1A1F;
  --c-fg-muted:  #6B6B78;
  --c-border:    #E3E3EA;

  /* Typo */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:   .75rem;     /* 12 */
  --text-sm:   .875rem;    /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-base:  1.55;
  --leading-loose: 1.7;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing-Skala (4px-Raster) */
  --space-1:  .25rem;   /* 4 */
  --space-2:  .5rem;    /* 8 */
  --space-3:  .75rem;   /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  3rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;   /* Cards laut Konzept ~12-16px */
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(26, 26, 31, .04);
  --shadow-md: 0 4px 12px rgba(26, 26, 31, .08);

  /* Site-Shell (zentrierte weiße Box auf grauem Body) */
  --shell-max: 1380px;
}


/* ==========================================================================
   Site-Shell – zentrierte weiße Box auf grauem Body (#F6F5F3 aus index.css)
   ----------------------------------------------------------------------
   Wrappt Header + Main + Footer. Akzent-Sektionen (z. B. .ds-section--bleed
   --accent) enden dadurch automatisch am Box-Rand statt edge-to-edge.
   ========================================================================== */

.ds-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  background: #fff;
  position: relative;
}

/* Header bleibt position:fixed (aus index.css), wird aber auf die Shell-
   Breite zentriert. Der weiße Hintergrund kommt aus .header .grid, der
   Bereich links/rechts davon lässt den grauen Body durchscheinen.
   Selektor mit `body` davor, damit die Spezifität die Legacy-Regel in
   index.css (`.header { left: 0px; }`, später geladen) schlägt. */
body .header {
  left: 50%;
  transform: translateX(-50%);
  max-width: var(--shell-max);
  background: transparent;
}

/* Hero-Media hatte ein eigenes max-width 70rem + Seitenpolster, damit es
   in der alten Edge-to-Edge-Variante eingerückt wirkt. In der Shell soll
   das Foto bis zur Box-Kante reichen – wie der lila Banner darunter. */
.ds-hero__media {
  width: 100%;
  max-width: none;
  margin: 0;
}


/* ==========================================================================
   Komponenten
   ========================================================================== */

/* ----- Karten ----- */
/* Lila Karte: Dienstleistungs-Teaser auf der Homepage (Folie 3) */
.ds-card,
.ds-card--purple {
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ds-card h3,
.ds-card .ds-card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -.005em;
  color: inherit;
}
.ds-card p,
.ds-card .ds-card__lead {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: inherit;
  opacity: .92;
}
.ds-card__more {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: inherit;
  text-decoration: none;
  align-self: flex-start;
}
.ds-card__more::after {
  content: '\00a0→';
  display: inline-block;
  transition: transform .15s ease;
}
.ds-card__more:hover::after {
  transform: translateX(2px);
}

/* Weiße Karte mit Border: Veranstaltungs-Teaser (Folie 5) */
.ds-card--light {
  background: var(--c-bg);
  color: var(--c-fg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.ds-card--light .ds-card__lead {
  color: var(--c-fg-muted);
  opacity: 1;
}
.ds-card--light .ds-card__more {
  color: var(--c-accent-strong);
}


/* ----- Status-Pills (Termin-Tabelle, Folie 14–17) ----- */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
}
.ds-pill--free      { background: var(--c-status-free-bg); color: var(--c-status-free-fg); }
.ds-pill--few       { background: var(--c-status-few-bg);  color: var(--c-status-few-fg); }
.ds-pill--full      { background: var(--c-status-full-bg); color: var(--c-status-full-fg); }
.ds-pill--waitlist  { background: var(--c-accent-soft);    color: var(--c-accent-strong); }
.ds-pill--cancelled { background: #ECECEF;                 color: #6B6B78; text-decoration: line-through; }
.ds-pill--cta       { background: var(--c-accent);         color: #fff; padding: 6px 16px; }
.ds-pill--cta:hover { background: var(--c-accent-hover); }


/* ----- Termin-Tabelle (Folie 14–17) ----- */
.ds-eventtable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin: var(--space-5) 0;
}
.ds-eventtable th,
.ds-eventtable td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.ds-eventtable thead th {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
  border-bottom: 1px solid var(--c-border);
}
.ds-eventtable tbody tr:last-child td {
  border-bottom: 0;
}
.ds-eventtable td.is-date,
.ds-eventtable td.is-time,
.ds-eventtable td.is-credits {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds-eventtable td.is-status,
.ds-eventtable td.is-action {
  white-space: nowrap;
}
.ds-eventtable .ds-pill {
  vertical-align: middle;
}

/* Programm-Block-Container (für events.php gruppiert / project.php) */
.ds-eventblock {
  margin: var(--space-7) 0;
}
.ds-eventblock__head {
  margin-bottom: var(--space-4);
}
.ds-eventblock__title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -.015em;
  color: var(--c-accent-strong);
  margin: 0 0 var(--space-2);
}
.ds-eventblock__lead {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--c-fg);
  margin: 0;
  max-width: 60ch;
}
.ds-eventblock__empty {
  font-family: var(--font-sans);
  color: var(--c-fg-muted);
  font-style: italic;
}

/* Mobile: Tabelle wird zu „Karten" mit Labels per data-attribute */
@media (max-width: 38em) {
  .ds-eventtable thead { display: none; }
  .ds-eventtable, .ds-eventtable tbody, .ds-eventtable tr, .ds-eventtable td {
    display: block;
    width: 100%;
  }
  .ds-eventtable tr {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
  }
  .ds-eventtable td {
    border: 0;
    padding: var(--space-2) 0;
    text-align: left !important;
    white-space: normal;
  }
  .ds-eventtable td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-fg-muted);
    margin-bottom: 2px;
  }
}


/* ----- Buttons ----- */
.ds-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ds-button:hover {
  background: var(--c-accent-hover);
  color: #fff;
}
.ds-button--ghost {
  background: transparent;
  border-color: var(--c-accent);
  color: var(--c-accent-strong);
}
.ds-button--ghost:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}


/* ----- Linien-Icon-Container (oben rechts auf Unterseiten, Folie 8–12) ----- */
.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--c-accent);
}
.ds-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* Image-Variante: PNG-Illustrationen (Dienstleistungs-Unterseiten).
   Bewusst deutlich größer als der SVG-Container, weil die PNGs viel
   transparentes Innen-Padding haben und das sichtbare Motiv sonst klein wirkt. */
.ds-icon--image {
  width: 96px;
  height: 96px;
}
.ds-icon--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (min-width: 48em) {
  .ds-icon--image {
    width: 144px;
    height: 144px;
  }
}


/* ----- Typo-Helper ----- */
.ds-headline {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -.015em;
  color: var(--c-accent-strong);
  margin: 0 0 var(--space-4);
}
.ds-headline--xl { font-size: var(--text-3xl); }
.ds-headline--lg { font-size: var(--text-2xl); }
.ds-headline--md { font-size: var(--text-xl); }

.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-base);
  color: var(--c-fg);
  margin: 0 0 var(--space-4);
}
.ds-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--c-fg);
}
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
}


/* ==========================================================================
   Dienstleistungs-Bereich (Folie 3 Übersicht-Cards · Folie 8–11 Detail)
   ========================================================================== */

/* Wrapper – schmale Lesespalte, Spacing oben/unten */
.ds-page {
  font-family: var(--font-sans);
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
  color: var(--c-fg);
}

/* Mobil: seitliches Padding (space-5 = 48px) fraß ~25 % der Schmalviewport-
   Breite und drückte Karten/Formularfelder über den rechten Rand. Auf
   Phones nur noch space-4 (16px) je Seite – Inhalt bekommt 64px mehr Platz. */
@media (max-width: 38em) {
  .ds-page {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}
.ds-page__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.ds-page__head .ds-headline {
  flex: 1;
  margin: 0;
}
.ds-page__head .ds-icon {
  flex-shrink: 0;
}

/* Sektionen innerhalb einer Detailseite */
.ds-section {
  margin: var(--space-7) 0;
}
.ds-section__title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--c-accent-strong);
  margin: 0 0 var(--space-3);
}

/* Bulleted Listen mit lila Akzent-Punkt */
.ds-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--c-fg);
}
.ds-bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-3);
}
.ds-bullets li::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* "Anliegen"-Box (nur Folie 11) – soft-lila Hintergrund */
.ds-callout {
  background: var(--c-accent-bg);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-family: var(--font-sans);
  margin: var(--space-7) 0;
}
.ds-callout .ds-section__title {
  margin-top: 0;
}

/* Card-Grid für Dienstleistungs-Übersicht (Folie 3) */
.ds-card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: var(--space-6) 0;
}
.ds-card-grid .ds-card {
  min-height: 16rem;
}
.ds-card-grid a.ds-card {
  text-decoration: none;
  /* Keine eigene color hier: sonst überschreibt sie (höhere Spezifität) die
     weiße Schrift der lila .ds-card bzw. die dunkle der hellen .ds-card--light.
     Jede Karten-Variante bringt ihre eigene Textfarbe mit. */
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.ds-card-grid a.ds-card:hover {
  background: var(--c-accent-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Beim Hover wird der Hintergrund lila – die hellen Veranstaltungs-Karten
   tragen aber dunkle/farbige Schrift; deren Kind-Elemente daher auf Weiß. */
.ds-card-grid a.ds-card--light:hover .ds-card__lead,
.ds-card-grid a.ds-card--light:hover .ds-card__more {
  color: #fff;
}

/* Kontakt-CTA-Block am Ende einer Detailseite */
.ds-contact-cta {
  margin-top: var(--space-3);
}


/* ==========================================================================
   Kontaktseite (eigene Listed Page „Kontakt")
   ========================================================================== */

.ds-page--contact .ds-lead {
  max-width: 50ch;
  color: var(--c-fg-muted);
  margin-bottom: var(--space-7);
}

.ds-contact-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-7);
}
@media (min-width: 40em) {
  .ds-contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.ds-contact-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ds-contact-card:hover {
  border-color: var(--c-accent-soft);
  box-shadow: var(--shadow-md);
}

.ds-contact-card .ds-eyebrow {
  margin: 0;
}

.ds-contact-card__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-sans);
  line-height: var(--leading-snug);
}
.ds-contact-card__name strong {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--c-fg);
  letter-spacing: -.005em;
}
.ds-contact-card__role {
  font-size: var(--text-sm);
  color: var(--c-fg-muted);
}

.ds-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ds-contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--c-accent-strong);
  text-decoration: none;
  transition: color .15s ease;
}
.ds-contact-link:hover {
  color: var(--c-accent-hover);
}
.ds-contact-link:hover .ds-contact-link__icon {
  background: var(--c-accent);
  color: #fff;
}
.ds-contact-link__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.ds-contact-link__text {
  word-break: break-word;
}

.ds-contact-link--map {
  margin-top: auto;
  font-size: var(--text-sm);
}

.ds-contact-address {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--c-fg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* ==========================================================================
   Formulare (Anmeldeformulare)
   ========================================================================== */

.ds-page--form {
  max-width: 44rem;
}

.ds-form {
  display: grid;
  gap: var(--space-5);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
}

.ds-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.ds-form__label,
.ds-form__legend {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--c-fg);
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  line-height: var(--leading-snug);
}
.ds-form__legend {
  margin-bottom: var(--space-2);
}

.ds-form__req {
  color: var(--c-accent-strong);
  font-weight: var(--weight-semibold);
}

/* Inputs / Textarea -- Spezifität bewusst hoch, um Skeleton/index.css zu schlagen */
.ds-form .ds-form__input,
.ds-form input.ds-form__input,
.ds-form textarea.ds-form__input {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--c-fg);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.ds-form .ds-form__input:focus,
.ds-form textarea.ds-form__input:focus {
  outline: 0;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.ds-form textarea.ds-form__input,
.ds-form .ds-form__textarea {
  min-height: 8em;
  resize: vertical;
  line-height: var(--leading-base);
}

.ds-form__field.is-error .ds-form__label {
  color: var(--c-status-full-fg);
}
.ds-form__field.is-error .ds-form__input {
  border-color: var(--c-status-full-fg);
}

/* Fieldset-Gruppe (Termine, Verpflegung, Übernachtung) */
.ds-form__group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Choice-Pill (Checkbox + Radio) */
.ds-form .ds-form__choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  background: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--c-fg);
  margin: 0;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ds-form .ds-form__choice:hover {
  background: var(--c-accent-bg);
  border-color: var(--c-accent-soft);
}
.ds-form .ds-form__choice:has(input:checked) {
  background: var(--c-accent-bg);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent) inset;
}
.ds-form .ds-form__choice:has(input:disabled) {
  opacity: .55;
  cursor: not-allowed;
  background: var(--c-bg-soft);
}

/* Override Legacy-Stile für Inputs in den Choice-Pills (float, height, etc.) */
.ds-form .ds-form__choice input[type="checkbox"],
.ds-form .ds-form__choice input[type="radio"],
html .ds-form .ds-form__choice input[type="checkbox"],
html .ds-form .ds-form__choice input[type="radio"] {
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  display: inline-block !important;
  accent-color: var(--c-accent);
  cursor: pointer;
  vertical-align: middle;
}

.ds-form .ds-form__choice span {
  flex: 1;
  display: inline-block;
  margin: 0;
}
.ds-form .ds-form__choice a {
  color: var(--c-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* AGB / Teilnahmebedingungen-Choice darf etwas dezenter sein */
.ds-form__choice--terms {
  font-size: var(--text-sm);
}

/* Grid für nebeneinanderliegende Felder (Vorname/Name, Strasse/PLZ, Mail/Tel) */
.ds-form__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 36em) {
  .ds-form__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Submit-Button: nutzt .ds-button, aber das Skeleton/index hat Browser-Default
   für <button>. Hier konkret im Form-Kontext auf Brand-Lila statt giftgrün. */
.ds-form__actions {
  margin-top: var(--space-3);
}
.ds-form .ds-form__actions .ds-button {
  padding: 12px 28px;
  font-size: var(--text-base);
  border: 1px solid transparent;
  background: var(--c-accent);
  color: #fff;
  box-shadow: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.ds-form .ds-form__actions .ds-button:hover {
  background: var(--c-accent-hover);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.ds-form__empty {
  font-family: var(--font-sans);
  color: var(--c-fg-muted);
  font-style: italic;
  margin: 0;
  padding: 8px 0;
}

/* Alerts (Erfolg/Fehler oberhalb des Formulars) */
.ds-form-alert {
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}
.ds-form-alert p { margin: 0; }
.ds-form-alert--success {
  background: var(--c-status-free-bg);
  color: var(--c-status-free-fg);
  border-left: 4px solid var(--c-status-free-fg);
}
.ds-form-alert--error {
  background: var(--c-status-full-bg);
  color: var(--c-status-full-fg);
  border-left: 4px solid var(--c-status-full-fg);
}


/* ==========================================================================
   Homepage One-Pager (Folie 1–7)
   ========================================================================== */

/* Smooth-Scroll wird vom jQuery-Helper in assets/js/custom.js gemacht
   (Selector: a.js-scroll-trigger, Offset 90px). Kein CSS scroll-behavior
   hier, sonst gibt es Doppel-Animation. ABER: für direkte Hash-URLs
   (z.B. medvis.ch/#dienstleistungen) und für Klicks ohne js-scroll-
   trigger-Klasse springt der Browser nativ – ohne den 90px-Offset würde
   der Sektions-Titel hinter dem fixed Header verschwinden. scroll-
   margin-top kollidiert nicht mit dem jQuery-Scroller, weil der direkt
   $.animate({scrollTop}) nutzt, was scroll-margin-top ignoriert. */
.ds-home .ds-section[id] {
  scroll-margin-top: 90px;
}

.ds-home {
  font-family: var(--font-sans);
  color: var(--c-fg);
}

/* ----- Section-Container ----- */

/* Bleed-Section: nimmt die volle Breite, Inhalte werden im __inner gewrappt */
.ds-section--bleed {
  width: 100%;
  padding: var(--space-7) var(--space-5);
}
.ds-section--accent {
  background: var(--c-accent);
  color: #fff;
}

/* Container-Section: max-width-zentriert mit Innenpolsterung */
.ds-section--container {
  padding: var(--space-7) var(--space-5);
}

.ds-section__inner {
  max-width: 70rem;
  margin: 0 auto;
}


/* ----- Hero (Folie 1) ----- */

.ds-hero {
  position: relative;
}
.ds-hero__media {
 /* width: calc(100% - 2 * var(--space-5));
  max-width: 70rem;
  margin: 0 auto;*/
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--c-accent-soft);
}
.ds-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-hero__banner {
  background: var(--c-accent);
  color: #fff;
  padding: var(--space-5) var(--space-5);
  text-align: center;
}
.ds-hero__tagline {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -.01em;
  margin: 0 auto;
  max-width: 50rem;
}

/* Mobil: text-2xl (1.75rem) wird durch den html-Font-Bump (<30em → 1.25em)
   auf ~35px hochgerechnet – lange Wörter ("Eventorganisation") drückten dann
   bis an den rechten Rand. Kleinere Schrift + weniger seitliches Padding. */
@media (max-width: 38em) {
  .ds-hero__banner {
    padding: var(--space-5) var(--space-4);
  }
  .ds-hero__tagline {
    font-size: var(--text-xl);
  }
}


/* ----- Positionierung (Folie 2) ----- */

.ds-positioning {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  max-width: 60rem;
  margin: 0 auto;
}
.ds-positioning__text {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  color: var(--c-accent-strong);
  text-align: center;
}
.ds-positioning__text p {
  margin: 0 0 var(--space-3);
}
.ds-positioning__text p:last-child {
  margin-bottom: 0;
}
.ds-positioning__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}


/* ----- Headline-Variante: Prosa-Breite (Folie 3, 6 Headlines) ----- */
.ds-headline--prose {
  max-width: 40rem;
  margin: 0 auto var(--space-6);
  text-align: center;
}
.ds-headline--on-accent {
  color: #fff;
}


/* ----- Split-Layout (Folie 4 Vertrauen, Folie 6 Expertise) ----- */

.ds-split {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 48em) {
  .ds-split {
    grid-template-columns: 1fr 1fr;
  }
  .ds-split--reverse > .ds-split__media {
    grid-column: 1;
    grid-row: 1;
  }
  .ds-split--reverse > .ds-split__body {
    grid-column: 2;
    grid-row: 1;
  }
}

.ds-split--header .ds-headline {
  margin: 0;
}
.ds-split__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-soft);
}
.ds-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.ds-split__body > * + * {
  margin-top: var(--space-4);
}

.ds-prose {
  max-width: 60ch;
  margin: var(--space-5) 0 0;
}
.ds-prose p {
  margin: 0 0 var(--space-4);
}
.ds-text--on-accent {
  color: #fff;
}
.ds-text--on-accent p {
  color: inherit;
}


/* ----- Card-Grid Erweiterungen ----- */

/* Veranstaltungs-Cards mit Logo-Bereich oben */
.ds-card-grid--events {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.ds-card--light {
  padding: var(--space-4);
  gap: var(--space-3);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ds-card--light:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent-soft);
}
.ds-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  margin-bottom: var(--space-2);
}
.ds-card__media img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}


/* ----- Button-Variante für lila Hintergrund (Folie 2 CTAs) ----- */

.ds-button--ghost-on-accent {
  background: transparent;
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
}
.ds-button--ghost-on-accent:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: #fff;
}


/* ----- Über mich (Folie 7a, Split: Text links, Portrait rechts) ----- */

.ds-about-block {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 48em) {
  .ds-about-block {
    grid-template-columns: 1fr 18rem;
    gap: var(--space-7);
  }
}
.ds-about-block__body > * + * {
  margin-top: var(--space-4);
}
.ds-about-block__body .ds-headline {
  margin: 0;
  color: var(--c-accent-strong);
}
.ds-about-block__portrait {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-soft);
  width: 100%;
  max-width: 18rem;
}
.ds-about-block__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ----- Kontakt (Folie 7b, eigene Sektion darunter) ----- */

.ds-kontakt-block > * + * {
  margin-top: var(--space-4);
}
.ds-kontakt-block .ds-headline {
  margin: 0;
  color: var(--c-accent-strong);
}
.ds-kontakt-block .ds-text {
  max-width: 60ch;
}


/* ==========================================================================
   Footer (Sitemap + Deep-Links + Brand)
   ========================================================================== */

.ds-footer {
  background: #ffffff;
  color: var(--c-fg);
  font-family: var(--font-sans);
  padding: var(--space-7) var(--space-5) var(--space-5);
  margin-top: var(--space-7);
}

.ds-footer__inner {
  max-width: 70rem;
  margin: 0 auto;
}

.ds-footer__cols {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 36em) {
  .ds-footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 56em) {
  .ds-footer__cols {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-7);
  }
}

.ds-footer__col {
  min-width: 0;
}

.ds-footer__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-accent-strong);
  margin: 0 0 var(--space-3);
}
.ds-footer__heading a {
  color: inherit;
  text-decoration: none;
}
.ds-footer__heading a:hover {
  color: var(--c-accent);
}

.ds-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.ds-footer__list a {
  font-size: var(--text-sm);
  color: var(--c-fg);
  text-decoration: none;
  line-height: var(--leading-snug);
  transition: color .15s ease;
  border:0px;
}
.ds-footer__list a:hover {
  color: var(--c-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Brand-/Kontakt-Spalte: nimmt den bestehenden Section4-Kirbytext-Output auf
   (legt Skeleton-Klassen .row / .six.columns lahm, damit der Inhalt im
   neuen Footer-Grid linear fließt). */
.ds-footer__contact {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--c-fg-muted);
}
.ds-footer__contact strong {
  color: var(--c-fg);
  font-weight: var(--weight-semibold);
}
.ds-footer__contact .row {
  display: block;
  margin: 0;
}
.ds-footer__contact .row .columns,
.ds-footer__contact .row .column {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ds-footer__contact .row .columns + .columns {
  margin-top: var(--space-3) !important;
}
.ds-footer__contact a {
  color: var(--c-accent-strong);
  text-decoration: none;
}
.ds-footer__contact a:hover {
  text-decoration: underline;
}

.ds-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--c-fg-muted);
}
.ds-footer__bottom a {border:0;}
.ds-footer__copy {
  margin: 0;
}


/* ==========================================================================
   Featured-Hero (Veranstaltungs-Übersicht – hervorgehobenes Programm oben)
   ========================================================================== */

.ds-featured-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-7);
  background: var(--c-accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ds-featured-hero,
.ds-featured-hero:hover,
.ds-featured-hero:focus,
.ds-featured-hero:active,
.ds-featured-hero .ds-featured-hero__eyebrow,
.ds-featured-hero .ds-featured-hero__headline,
.ds-featured-hero .ds-featured-hero__lead,
.ds-featured-hero .ds-featured-hero__cta {
  color: #fff;
}
.ds-featured-hero:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ds-featured-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.ds-featured-hero__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}
.ds-featured-hero__headline {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -.01em;
  color: inherit;
}
.ds-featured-hero__lead {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-base);
  opacity: .92;
  max-width: 50ch;
}
.ds-featured-hero__cta {
  margin-top: var(--space-3);
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.ds-featured-hero__cta span {
  display: inline-block;
  margin-left: .25rem;
  transition: transform .15s ease;
}
.ds-featured-hero:hover .ds-featured-hero__cta span {
  transform: translateX(3px);
}
.ds-featured-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  max-width: 30vw;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  align-self: stretch;
}
.ds-featured-hero__media img {
  max-height: 5rem;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .95;
}

@media (max-width: 38em) {
  .ds-featured-hero {
    grid-template-columns: 1fr;
    padding: var(--space-5);
    gap: var(--space-4);
  }
  .ds-featured-hero__media {
    width: 100%;
    max-width: 100%;
    order: -1;
  }
}


/* ==========================================================================
   Cookie-Hinweis (nur technisch notwendige Cookies)
   ========================================================================== */

.ds-consent {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 9999;
  max-width: 44rem;
  margin: 0 auto;
  background: #fff;
  color: var(--c-fg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}
.ds-consent[hidden] { display: none; }

.ds-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.ds-consent__text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--c-fg);
}
.ds-consent__link {
  color: var(--c-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  border: 0;
}
.ds-consent__link:hover {
  color: var(--c-accent-hover);
}

.ds-consent__ok {
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  padding: 10px 24px;
}

@media (max-width: 32em) {
  .ds-consent {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
  }
  .ds-consent__inner {
    padding: var(--space-4);
  }
  .ds-consent__ok {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   a#topaction – Scroll-to-Top als runder Icon-Button
   Override für die bestehenden Regeln in index.css. Brand-Lila bleibt,
   nur Form/Inhalt werden auf Icon umgestellt.
   ========================================================================== */

a#topaction {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: var(--c-accent);
  box-shadow: var(--shadow-md);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease, opacity .3s ease;
}
a#topaction:hover,
a#topaction:focus {
  background-color: var(--c-accent-hover);
  transform: translateY(-2px);
  color: #fff;
}
a#topaction svg {
  width: 20px;
  height: 20px;
  display: block;
}