/* ============================================================
   DESIGN-SCHICHT (modules/design) – nur auf Seiten mit Segment-JSON
   ------------------------------------------------------------
   Leitmotiv Bemaßung: Kennzeile (Haarlinie + Mono-Kennung),
   Maßkette, Schriftfeld. Contelos-Blau ist die einzige Signalfarbe
   und erscheint nur als Linie, Link und aktiver Zustand – nie als
   Fläche. Alle Klassen mit ds-, damit nichts ins alte CSS greift.
   Kopf, Fuß, Überschriften und Einschub (für alle Seiten): ds-rahmen.css.
   ============================================================ */


.ds {
  --ds-ink:    #0e1116;
  --ds-text:   #22262c;
  --ds-muted:  #5a6270;
  --ds-line:   #dfe3e8;
  --ds-grau:   #f2f5f7; /* = Grau der alten Abschnitte */
  --ds-dunkel: #0d1724;
  --ds-blau:   #004f9e;
  --ds-blau-d: #003a75;
  --ds-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ds-gutter: var(--global-gutter, 2.5em);
}

/* ---------- Grundgerüst ---------- */
.ds-seg { padding: clamp(3.5rem, 7vw, 6rem) 0; background: #fff; color: var(--ds-text); }
.ds-seg--grau { background: var(--ds-grau); }
.ds-seg--dunkel { background: var(--ds-dunkel); color: rgba(255,255,255,.82); }
.ds-wrap { max-width: var(--max-width, 1350px); margin: 0 auto; padding-inline: var(--ds-gutter); box-sizing: border-box; }
.ds-seg *, .ds-seg *::before, .ds-seg *::after { box-sizing: border-box; }
.ds-seg a { text-decoration: none; }

.ds-h1, .ds-h2, .ds-seg h3 { font-family: var(--font-heading); color: var(--ds-ink); margin: 0; text-transform: none; }
.ds-h1 { font-weight: 300; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.04em; }
.ds-h2 { font-weight: 300; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em; }
.ds-seg--dunkel .ds-h2 { color: #fff; }
.ds-lead { font-size: 1.12rem; line-height: 1.55; color: var(--ds-muted); margin: 0; max-width: 46ch; }

/* Kennzeile: wie die Beschriftung am Blattrand */
.ds-kennzeile, .ds-meta { font-family: var(--ds-mono); font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ds-muted); font-weight: 400; }
.ds-kennzeile { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--ds-ink);
  padding-top: .55rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ds-seg--dunkel .ds-kennzeile { border-top-color: rgba(255,255,255,.4); color: rgba(255,255,255,.6); }
@media (max-width: 560px) { .ds-kennzeile > span:nth-child(2) { display: none; } }

/* Kopf eines Abschnitts: Titel links, Text rechts unten bündig */
.ds-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem var(--ds-gutter); align-items: end;
  margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.ds-head .ds-h2 { grid-column: 1 / 8; }
.ds-head__text { grid-column: 9 / 13; }
.ds-head__text p { margin: 0 0 .8rem; color: var(--ds-muted); }
@media (max-width: 900px) { .ds-head { display: block; } .ds-head .ds-h2 { margin-bottom: 1rem; } }

/* Links und Knöpfe – eckig, mit Pfeil */
.ds-link { font-weight: 500; color: var(--ds-ink); text-decoration: underline !important;
  text-decoration-color: var(--ds-blau) !important; text-decoration-thickness: 2px !important; text-underline-offset: .3em; }
.ds-link:hover { color: var(--ds-blau); }
.ds-link::after { content: " →"; color: var(--ds-blau); }
.ds-link[target="_blank"]::after { content: ""; }
.ds-seg--dunkel .ds-link { color: #fff; }

.ds-btn { display: inline-flex; align-items: center; gap: .6em; padding: .8rem 1.25rem; border-radius: 6px;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1.2; border: 1px solid transparent;
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.ds-btn::after { content: "→"; transition: transform .2s ease; }
.ds-btn:hover::after { transform: translateX(3px); }
.ds-btn--primaer { background: var(--ds-blau); color: #fff !important; }
.ds-btn--primaer:hover { background: var(--ds-blau-d); }
.ds-btn--hell { background: #fff; color: var(--ds-ink) !important; }
.ds-btn--hell:hover { background: var(--ds-blau); color: #fff !important; }
.ds-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 1.6rem 0 0; }

.ds-fussnote { margin: 1.6rem 0 0; color: var(--ds-muted); font-size: .92rem; }
.ds-fussnote a { color: var(--ds-blau); text-decoration: none; }
.ds-fussnote a:hover { text-decoration: underline; }
.ds-fussnote .ds-meta { margin-right: .6rem; }
.ds-leer { color: var(--ds-muted); margin: 0; }

/* ---------- titelseite ---------- */
.ds-titel { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.ds-titel__kopf { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem var(--ds-gutter); align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem); }
.ds-titel__kopf .ds-h1 { grid-column: 1 / 9; }
.ds-titel__kopf .ds-lead { grid-column: 9 / 13; }
.ds-titel__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem var(--ds-gutter);
  border-top: 1px solid var(--ds-line); padding-top: 1.6rem; }
.ds-aufmacher { grid-column: 1 / 9; }
.ds-aufmacher__bild { display: block; margin-bottom: 1rem; overflow: hidden; background: var(--ds-grau); }
.ds-aufmacher__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .5s ease; }
.ds-aufmacher__bild:hover img { transform: scale(1.02); }
.ds-aufmacher .ds-meta { margin: 0 0 .5rem; }
.ds-aufmacher__titel { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .7rem; }
.ds-aufmacher__titel a { color: var(--ds-ink); }
.ds-aufmacher__titel a:hover { color: var(--ds-blau); }
.ds-aufmacher__text { color: var(--ds-muted); margin: 0 0 1rem; max-width: 64ch; }
.ds-lesenswert { grid-column: 9 / 13; }
.ds-lesenswert__kopf { margin: 0 0 .4rem; }
.ds-lesenswert ol { list-style: none; margin: 0; padding: 0; }
.ds-lesenswert li { border-top: 1px solid var(--ds-line); }
.ds-lesenswert li:first-child { border-top-color: var(--ds-ink); }
.ds-lesenswert a { display: block; padding: 1rem 0 1.1rem; color: var(--ds-ink); }
.ds-lesenswert a .ds-meta { display: block; margin-bottom: .35rem; }
.ds-lesenswert__titel { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem; line-height: 1.25;
  letter-spacing: -.01em; }
.ds-lesenswert a:hover .ds-lesenswert__titel { color: var(--ds-blau); }
@media (max-width: 900px) {
  .ds-titel__kopf, .ds-titel__grid { display: block; }
  .ds-titel__kopf .ds-h1 { margin-bottom: 1rem; }
  .ds-lesenswert { margin-top: 2rem; }
}

/* unter dem bisherigen Kopfbild: nur Aussage, kein Aufmacher */
.ds-titel--kurz { padding-top: clamp(2.5rem, 5vw, 4rem); }
.ds-titel--kurz .ds-titel__kopf { margin-bottom: 0; }

/* ---------- sprungleiste: Schriftfeld mit Zahlen ---------- */
.ds-sprung { padding: 0 0 clamp(2rem, 4vw, 3rem); }
.ds-sprung__feld { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  border-top: 1px solid var(--ds-ink); border-left: 1px solid var(--ds-line); }
.ds-sprung__feld li { border-right: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
.ds-sprung__feld a { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: .9rem 1rem 1.1rem;
  color: var(--ds-ink); position: relative; transition: background .2s ease; }
.ds-sprung__feld a::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--ds-blau); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.ds-sprung__feld a:hover::after, .ds-sprung__feld a:focus-visible::after { transform: scaleX(1); }
.ds-sprung__titel { font-family: var(--font-heading); font-weight: 500; font-size: 1.1rem; letter-spacing: -.01em; }
.ds-sprung__text { color: var(--ds-muted); font-size: .9rem; line-height: 1.45; }
@media (max-width: 900px) { .ds-sprung__feld { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ds-sprung__feld { grid-template-columns: 1fr; } .ds-sprung__text { display: none; } }

/* ---------- masskette: die Fachbereiche als Maßkette ----------
 * Maßlinie oben durchgehend, an jeder Grenze ein Schrägstrich
 * (Architektur-Maßbegrenzung), Maßhilfslinien senkrecht nach unten.
 * Die Maßzahl (Kürzel) sitzt mittig auf der Linie. */
.ds-mk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); position: relative; }
.ds-mk__feld { position: relative; border-left: 1px solid var(--ds-line); }
.ds-mk__feld:last-child { border-right: 1px solid var(--ds-line); }
.ds-mk__feld a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 0 1.1rem 1.4rem; color: var(--ds-ink); }
/* Maßlinie + Maßzahl */
.ds-mk__mass { position: relative; display: flex; justify-content: center; height: 2.6rem; margin: 0 -1.1rem .8rem; }
.ds-mk__mass::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ds-ink);
  transition: background .2s ease, height .2s ease; }
.ds-mk__mass span { position: relative; align-self: center; background: #fff; padding: 0 .55rem;
  font-family: var(--ds-mono); font-size: .78rem; letter-spacing: .06em; color: var(--ds-ink); }
.ds-seg--grau .ds-mk__mass span { background: var(--ds-grau); }
/* Schrägstrich an der linken Grenze jedes Feldes, beim letzten auch rechts */
.ds-mk__feld::before, .ds-mk__feld:last-child::after { content: ""; position: absolute; top: calc(1.3rem - 7px); width: 1.5px; height: 14px;
  background: var(--ds-ink); transform: rotate(45deg); left: -1px; }
.ds-mk__feld:last-child::after { left: auto; right: -1px; }
.ds-mk__titel { font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.01em; }
.ds-mk__text { color: var(--ds-muted); font-size: .92rem; line-height: 1.45; flex: 1; }
.ds-mk__pfeil { color: var(--ds-blau); font-weight: 700; transition: transform .2s ease; }
.ds-mk__feld a:hover .ds-mk__mass::before, .ds-mk__feld a:focus-visible .ds-mk__mass::before { background: var(--ds-blau); height: 2px; }
.ds-mk__feld a:hover .ds-mk__mass span { color: var(--ds-blau); }
.ds-mk__feld a:hover .ds-mk__titel { color: var(--ds-blau); }
.ds-mk__feld a:hover .ds-mk__pfeil { transform: translateX(4px); }
/* Zeichnen beim ersten Sichtkontakt (ds.js); ohne JS steht die Kette fertig da */
.ds-mk.is-armed:not(.is-drawn) .ds-mk__mass::before { transform: scaleX(0); }
.ds-mk.is-armed .ds-mk__mass::before { transform-origin: left; transition: transform .5s cubic-bezier(.6,0,.3,1);
  transition-delay: calc(var(--i, 0) * .12s); }
@media (max-width: 1100px) { .ds-mk { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .ds-mk__feld:nth-child(3n)::after { content: ""; position: absolute; top: calc(1.3rem - 7px); width: 1.5px; height: 14px;
    background: var(--ds-ink); transform: rotate(45deg); right: -1px; }
  .ds-mk__feld:nth-child(3n) { border-right: 1px solid var(--ds-line); } }
@media (max-width: 640px) {
  /* senkrechte Maßkette am linken Rand */
  .ds-mk { grid-template-columns: 1fr; row-gap: 0; padding-left: 3.2rem; }
  .ds-mk__feld, .ds-mk__feld:last-child, .ds-mk__feld:nth-child(3n) { border: 0; border-top: 1px solid var(--ds-line); }
  .ds-mk__feld a { padding: 1rem 0 1.2rem; }
  .ds-mk__mass { position: absolute; left: -3.2rem; top: 0; bottom: 0; width: 2.4rem; height: auto; margin: 0; }
  .ds-mk__mass::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .ds-mk__mass span { writing-mode: vertical-rl; transform: rotate(180deg); padding: .4rem 0; font-size: .7rem; }
  .ds-mk__feld::before, .ds-mk__feld:nth-child(3n)::after, .ds-mk__feld:last-child::after { left: calc(-3.2rem + 1.2rem - .5px); right: auto; top: -7px; }
  .ds-mk__feld:last-child::after { top: auto; bottom: -7px; }
  .ds-mk__feld:nth-child(3n):not(:last-child)::after { display: none; }
  .ds-mk.is-armed:not(.is-drawn) .ds-mk__mass::before { transform: scaleY(0); }
  .ds-mk.is-armed .ds-mk__mass::before { transform-origin: top; }
}

/* ---------- text ---------- */
.ds-text__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem var(--ds-gutter); align-items: start; }
.ds-text__grid .ds-h2 { grid-column: 1 / 6; }
.ds-text__body { grid-column: 7 / 13; }
.ds-text__body p { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.65; }
.ds-text__body .ds-aktionen { margin-top: 1.6rem; }
@media (max-width: 900px) { .ds-text__grid { display: block; } .ds-text__grid .ds-h2 { margin-bottom: 1.4rem; } }

/* Schriftfeld: Eckdaten in Zellen mit Haarlinien */
.ds-schriftfeld { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--ds-ink); border-left: 1px solid var(--ds-line); }
.ds-schriftfeld > div { border-right: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); padding: .7rem .9rem .8rem; }
.ds-schriftfeld dt { font-family: var(--ds-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ds-muted); margin-bottom: .25rem; }
.ds-schriftfeld dd { margin: 0; font-weight: 500; color: var(--ds-ink); line-height: 1.3; }

/* ---------- Zeilen: Verzeichnis, Termine, Shop ---------- */
.ds-zeilen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ds-ink); }
.ds-zeilen li { border-bottom: 1px solid var(--ds-line); margin: 0; }
.ds-zeile { position: relative; display: grid; grid-template-columns: 4rem minmax(12rem, 1fr) 2fr 2rem;
  gap: 0 var(--ds-gutter); align-items: baseline; padding: 1.25rem 0; color: inherit; }
.ds-zeile__titel { font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; color: var(--ds-ink);
  letter-spacing: -.01em; line-height: 1.25; }
.ds-zeile__text { color: var(--ds-muted); }
.ds-zeile__ort { display: block; font-family: var(--font-body); font-weight: 400; font-size: .9rem; color: var(--ds-muted);
  margin-top: .2rem; letter-spacing: 0; }
.ds-zeile__pfeil { color: var(--ds-blau); font-weight: 700; justify-self: end; transition: transform .2s ease; }
a.ds-zeile::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ds-blau);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
a.ds-zeile:hover::after, a.ds-zeile:focus-visible::after { transform: scaleX(1); }
a.ds-zeile:hover .ds-zeile__titel { color: var(--ds-blau); }
a.ds-zeile:hover .ds-zeile__pfeil { transform: translateX(4px); }
/* Termine: Datum vorn, Art hinten */
.ds-zeilen--termine .ds-zeile { grid-template-columns: 11rem 1fr 10rem 2rem; }
.ds-zeile__datum { color: var(--ds-ink); font-size: .78rem; }
.ds-zeile__art { justify-self: start; }
/* Shop: Kategorie, Name, Text, Preis */
.ds-zeile--shop { grid-template-columns: 4rem minmax(11rem, 1fr) 2fr 7rem 2rem; }
.ds-zeile__preis { color: var(--ds-ink); justify-self: end; }
.ds-gruppe { display: flex; gap: .8rem; align-items: baseline; font-family: var(--font-heading); font-weight: 400;
  font-size: 1.05rem; color: var(--ds-ink); margin: 2.4rem 0 .9rem !important; }
.ds-gruppe:first-of-type { margin-top: 0 !important; }
.ds-gruppe .ds-meta { color: var(--ds-blau); }
@media (max-width: 900px) {
  .ds-zeile, .ds-zeilen--termine .ds-zeile, .ds-zeile--shop { grid-template-columns: 1fr 1.5rem; gap: .35rem 1rem; }
  .ds-zeile > * { grid-column: 1; }
  .ds-zeile__pfeil { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .ds-zeile__preis { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { a.ds-zeile::after, .ds-sprung__feld a::after, .ds-mk__mass::before { transition: none !important; } }

/* ---------- bestand: alter Abschnitt, nur mit Kennzeile eingefasst ---------- */
.ds-rahmen { padding-top: clamp(2.5rem, 5vw, 4rem); background: #fff; }
.ds-rahmen .ds-kennzeile { margin-bottom: 0; }
.ds .ds-rahmen > .segment { padding-top: clamp(1.8rem, 3vw, 2.6rem); }

/* ---------- mediathek ---------- */
.ds-termine__bilder { margin-bottom: clamp(2rem, 4vw, 3rem); }
.ds-termine__bilder .ds-zeile__ort { margin-top: -.2rem; }
.ds-medien__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem var(--ds-gutter); }
.ds-medien__raster a { display: flex; flex-direction: column; gap: .5rem; color: var(--ds-ink); }
.ds-medien__bild { display: block; overflow: hidden; background: var(--ds-line); }
.ds-medien__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease; }
.ds-medien__raster a:hover img { transform: scale(1.03); }
.ds-medien__titel { font-family: var(--font-heading); font-weight: 500; font-size: 1.02rem; line-height: 1.3; }
.ds-medien__raster a:hover .ds-medien__titel { color: var(--ds-blau); }
@media (max-width: 1000px) { .ds-medien__raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ds-medien__raster { grid-template-columns: 1fr; } }

/* ---------- kontakt ---------- */
.ds-kontakt .ds-text__body p { color: rgba(255,255,255,.8); }
.ds-kontakt .ds-link { color: #fff; text-decoration: none !important; }
.ds-kontakt .ds-link:hover { color: rgba(255,255,255,.75); }
.ds-kontakt .ds-link::after { content: ""; }