/* Innovatura — Neubau (Tor 2), Gestaltung Richtung D2 „Gehängt wie Bilder".
   One stylesheet for every page. Layered so the reused brief/demo styles (entdecker.css, labor.css) keep working on top. */
@layer tokens, reset, base, site, components, sections, animations, entdecker, anpassung;


@layer site {
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--farbe-grund); color: var(--farbe-text); font: var(--gewicht-normal) var(--stufe-2)/var(--zeile-text) var(--schrift-text); }   /* 19 px */
h1, h2, h3, .kopf, .knopf, .knopf-leise, .wahl, .klein, .nr, .schild__titel, .marke, .fakt, .daten dt, summary, .tabelle, .fuss { font-family: var(--schrift-display); }
h1, h2, h3 { text-wrap: balance; hyphens: manual; }
p, li, dd { text-wrap: pretty; }
.recht p, .recht li, .gebaut dd, .eintrag p, .text > p { hyphens: auto; }
a { color: inherit; text-underline-offset: .18em; }
:focus-visible { outline: var(--linie-fokus) solid var(--farbe-text); outline-offset: var(--linie-fokus); }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: .5rem; background: var(--farbe-text-umgekehrt); padding: var(--abstand-1); z-index: 2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header: wordmark, four pages, one quiet button (orange stays reserved for the main button in the page) */
.kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--abstand-1) var(--abstand-3); padding: var(--abstand-2) var(--rand); font-size: var(--stufe-1); }
.kopf__name { font-weight: var(--gewicht-fett); text-decoration: none; }
.kopf nav { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: var(--abstand-00) var(--abstand-2); }
.kopf nav a { text-decoration: none; padding: var(--abstand-0) 0; }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--linie-stark); }
.knopf-leise { display: inline-block; border: var(--linie-stark) solid var(--farbe-text); border-radius: var(--radius-knopf); padding: var(--abstand-1) var(--abstand-2); min-height: 44px; text-decoration: none; font-weight: var(--gewicht-fett); font-size: var(--stufe-0); }
.knopf-leise:hover { background: var(--farbe-text); color: var(--farbe-text-umgekehrt); }
@media (min-width: 860px) {
  .kopf { flex-wrap: nowrap; }
  .kopf nav { order: 0; width: auto; margin-left: auto; gap: var(--abstand-3); }
}

/* Buttons and links */
.knopf { display: inline-block; background: var(--farbe-akzent); color: var(--farbe-auf-akzent); font-weight: var(--gewicht-fett); text-decoration: none;
  padding: var(--abstand-2) var(--abstand-3); min-height: 48px; border-radius: var(--radius-knopf); font-size: var(--stufe-1); }
.knopf:hover { background: var(--farbe-akzent-hover); }
.klein { font-size: var(--stufe-1); color: var(--farbe-text-leise); }
.weiter { font-family: var(--schrift-display); font-size: var(--stufe-1); }
.wege { margin: var(--abstand-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); align-items: center; }

/* Sections */
.abschnitt { padding: var(--abstand-5) var(--rand); }
.abschnitt--wand { background: var(--farbe-flaeche-1); }
.abschnitt h2 { margin: 0; font-size: var(--stufe-5); line-height: var(--zeile-eng); letter-spacing: var(--laufweite-abschnitt); }
.abschnitt h3 { font-size: var(--stufe-3); line-height: var(--zeile-mittel); margin: 0 0 var(--abstand-0); }
.marke { margin: 0 0 var(--abstand-1); font-size: var(--stufe-0); color: var(--farbe-text-leise); font-variant-numeric: tabular-nums; }
.text { max-width: 38rem; }
.text > p { margin: 0 0 var(--abstand-2); }
.text > p:last-child { margin-bottom: 0; }
.zwei { display: grid; gap: var(--abstand-4); }
@media (min-width: 900px) {
  .zwei { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--abstand-5); align-items: start; }
  .zwei--bild-links { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.display { margin: 0; font: var(--gewicht-fett) var(--stufe-6)/var(--zeile-eng) var(--schrift-display); letter-spacing: var(--laufweite-display); max-width: 20ch; text-wrap: balance; }
.display--gross { font-size: var(--stufe-6); max-width: 18ch; }
.display { hyphens: auto; overflow-wrap: break-word; }

/* 1st screen of every page: carrier (person, work, thing) + H1 + fact line */
.auftakt { display: grid; }
.auftakt__bild { margin: 0; background: var(--farbe-auf-akzent); }
.auftakt__bild img { display: block; width: 100%; height: 38vh; min-height: 220px; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.08); }
.auftakt__text { padding: var(--abstand-3) var(--rand) var(--abstand-4); }
.auftakt h1 { margin: 0; font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); letter-spacing: var(--laufweite-titel); font-size: var(--stufe-7); max-width: var(--mass-kernsatz); }
.auftakt__unter { margin: var(--abstand-2) 0 0; max-width: 34ch; }
.auftakt__wer { margin: var(--abstand-1) 0 0; font-style: italic; color: var(--farbe-text-leise); }
.vertrauen { margin: var(--abstand-3) 0 0; }
@media (min-width: 900px) {
  .auftakt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - 3.6rem); }
  .auftakt__bild img { height: 100%; min-height: 0; }
  .auftakt__text { display: flex; flex-direction: column; justify-content: center; padding: var(--abstand-4) var(--rand) var(--abstand-4) var(--abstand-5); }
}

.seitenkopf { display: grid; gap: var(--abstand-3); padding: var(--abstand-4) var(--rand) var(--abstand-4); align-items: center; }
.seitenkopf h1 { margin: 0; font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); letter-spacing: var(--laufweite-titel); font-size: var(--stufe-6); max-width: 14ch; }
.seitenkopf .fakt { margin: var(--abstand-2) 0 0; font-size: var(--stufe-1); color: var(--farbe-text-leise); max-width: 40rem; }
.seitenkopf .lead { margin: var(--abstand-2) 0 0; max-width: 36ch; }
.seitenkopf__bild { margin: 0; }
.seitenkopf__bild img { display: block; width: 100%; border: var(--linie-duenn) solid var(--farbe-linie); background: var(--farbe-text-umgekehrt); }
.seitenkopf__bild--hoch img { width: auto; max-width: 100%; max-height: 62vh; margin-inline: auto; }
.seitenkopf__bild--foto img { border: 0; filter: grayscale(1) contrast(1.06); height: 42vh; min-height: 230px; object-fit: cover; }
.seitenkopf__bild figcaption, .bild figcaption { margin-top: var(--abstand-1); font: var(--gewicht-normal) var(--stufe-0)/var(--zeile-knapp) var(--schrift-display); color: var(--farbe-text-leise); }
@media (min-width: 900px) {
  .seitenkopf { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--abstand-5); min-height: min(78vh, 46rem); }
  .seitenkopf--bild-gross { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .seitenkopf__bild--foto img { height: min(70vh, 40rem); }
}

/* Images inside chapters */
.bild { margin: 0; }
.bild img { display: block; border: var(--linie-duenn) solid var(--farbe-linie); background: var(--farbe-text-umgekehrt); }
.bild--handy img { width: min(78%, 320px); }
.bild--werk img { border: 0; max-height: 80vh; width: auto; }
.bild--foto img { border: 0; filter: grayscale(1) contrast(1.06); width: 100%; }

/* Work wall on the start page (D2 signature: numbered, two widths, CSS only) */
.wand__kopf { display: grid; gap: var(--abstand-1); max-width: 46rem; }
.wand__kopf p { margin: 0; }
.wahl { margin: var(--abstand-4) 0 0; display: grid; gap: var(--abstand-3); }
.wahl fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wahl legend { padding: 0; margin-bottom: var(--abstand-1); font-size: var(--stufe-0); color: var(--farbe-text-leise); }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.liste { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--linie-stark) solid var(--farbe-text); }
.liste label { display: grid; gap: var(--abstand-00); align-content: start; padding: var(--abstand-2) var(--abstand-2) var(--abstand-2) 0; min-height: 44px; cursor: pointer; border-bottom: var(--linie-duenn) solid var(--farbe-linie); }
.nr { font-size: var(--stufe-0); color: var(--farbe-text-leise); font-variant-numeric: tabular-nums; }
.liste b { font: var(--gewicht-fett) var(--stufe-1)/var(--zeile-mittel) var(--schrift-display); }
.liste label:hover b { text-decoration: underline; }
.wahl input:checked + label { box-shadow: inset 0 calc(-1 * var(--linie-fokus)) 0 var(--farbe-text); }
.wahl input:checked + label .nr { color: var(--farbe-text); }
.wahl input:focus-visible + label { outline: var(--linie-fokus) solid var(--farbe-text); outline-offset: var(--linie-stark); }
.breite { display: flex; gap: var(--abstand-1); flex-wrap: wrap; }
.breite legend { width: 100%; }
.breite label { display: inline-block; border: var(--linie-stark) solid var(--farbe-text); padding: var(--abstand-1) var(--abstand-2); min-height: 44px; cursor: pointer; border-radius: var(--radius-knopf); font-size: var(--stufe-1); }
.breite input:checked + label { background: var(--farbe-text); color: var(--farbe-text-umgekehrt); }
@media (min-width: 760px) { .liste { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .wahl { grid-template-columns: 1fr auto; align-items: end; gap: var(--abstand-4); } }
.haengung { margin: var(--abstand-4) 0 0; display: grid; gap: var(--abstand-3); align-items: start; }
.haengung__bild { margin: 0; display: flex; justify-content: center; }
.haengung__bild img { display: none; height: auto; border: var(--linie-duenn) solid var(--farbe-linie); background: var(--farbe-text-umgekehrt); }
.haengung__bild img[data-b="d"] { width: 100%; }
.haengung__bild img[data-b="m"] { width: min(78%, 330px); }
.schild { max-width: 30ch; font-size: var(--stufe-1); line-height: var(--zeile-knapp); }
.schild > div { display: none; }
.schild p { margin: 0; }
.schild__titel { font-weight: var(--gewicht-fett); font-size: var(--stufe-1); }
.schild__art { margin-top: var(--abstand-0) !important; color: var(--farbe-text-leise); }
.schild__wege { margin-top: var(--abstand-1) !important; display: flex; flex-wrap: wrap; gap: var(--abstand-0) var(--abstand-2); }
.wand__fuss { margin: var(--abstand-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); }
@media (min-width: 900px) {
  .haengung { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--abstand-4); }
  .haengung__bild { min-height: 30rem; align-items: flex-start; }
  .haengung__bild img[data-b="m"] { width: auto; max-height: 34rem; }
}
.wand:has(#s1:checked):has(#bd:checked) img[data-s="1"][data-b="d"],
.wand:has(#s1:checked):has(#bm:checked) img[data-s="1"][data-b="m"],
.wand:has(#s2:checked):has(#bd:checked) img[data-s="2"][data-b="d"],
.wand:has(#s2:checked):has(#bm:checked) img[data-s="2"][data-b="m"],
.wand:has(#s3:checked):has(#bd:checked) img[data-s="3"][data-b="d"],
.wand:has(#s3:checked):has(#bm:checked) img[data-s="3"][data-b="m"],
.wand:has(#s4:checked):has(#bd:checked) img[data-s="4"][data-b="d"],
.wand:has(#s4:checked):has(#bm:checked) img[data-s="4"][data-b="m"] { display: block; }
.wand:has(#s1:checked) .schild [data-s="1"],
.wand:has(#s2:checked) .schild [data-s="2"],
.wand:has(#s3:checked) .schild [data-s="3"],
.wand:has(#s4:checked) .schild [data-s="4"] { display: block; }
/* browsers without :has() show everything, nothing is hidden */
@supports not selector(:has(*)) {
  .haengung__bild { flex-direction: column; gap: var(--abstand-2); }
  .haengung__bild img, .schild > div { display: block; }
  .schild > div + div { margin-top: var(--abstand-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .haengung__bild img { animation: ein var(--dauer-kurz) ease-out; }
  @keyframes ein { from { opacity: 0; } to { opacity: 1; } }
}

/* Voices */
.stimmen__satz { margin: 0; color: var(--farbe-text-leise); }
.stimmen__paar { margin: var(--abstand-4) 0 0; display: grid; gap: var(--abstand-4); }
.stimme { margin: 0; max-width: 38rem; }
.stimme blockquote { margin: 0; }
.stimme blockquote p { margin: 0; }
.stimme figcaption { margin-top: var(--abstand-2); font: var(--gewicht-normal) var(--stufe-1)/var(--zeile-knapp) var(--schrift-display); color: var(--farbe-text-leise); }
.stimme--kurz blockquote p { font-size: var(--stufe-zitat); line-height: var(--zeile-mittel); }
@media (min-width: 900px) { .stimmen__paar { grid-template-columns: 7fr 5fr; gap: var(--abstand-5); align-items: start; } }

/* Painting with museum label + the sentence it taught */
.wer { display: grid; gap: var(--abstand-4); }
.werk { margin: 0; }
.werk img { display: block; width: 100%; max-width: 30rem; height: auto; }
.werk figcaption { margin-top: var(--abstand-1); font: var(--gewicht-normal) var(--stufe-0)/var(--zeile-knapp) var(--schrift-display); color: var(--farbe-text-leise); }
.wer__text p { margin: 0 0 var(--abstand-2); max-width: 36ch; }
.rahmen { margin: var(--abstand-3) 0 var(--abstand-3) !important; font: var(--gewicht-fett) var(--stufe-6)/var(--zeile-eng) var(--schrift-display); letter-spacing: var(--laufweite-display); max-width: 16ch !important; }
@media (min-width: 900px) { .wer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--abstand-5); align-items: center; } }

/* Three formats (switch) */
.formate { margin: var(--abstand-4) 0 0; display: grid; gap: var(--abstand-4); padding: 0; list-style: none; }
.format { border-top: var(--linie-stark) solid var(--farbe-text); padding-top: var(--abstand-2); display: grid; gap: var(--abstand-1); align-content: start; }
.format p { margin: 0; }
.format .bild { margin-top: var(--abstand-1); }
.format .bild img { width: 100%; max-height: 22rem; object-fit: cover; object-position: top; }
@media (min-width: 900px) { .formate { grid-template-columns: repeat(3, 1fr); gap: var(--abstand-4); } }
.formate--kurz .format { gap: var(--abstand-0); }

/* Sea band (the one dark band) */
.meer { margin: 0; background: var(--farbe-flaeche-2); color: var(--farbe-auf-dunkel); }
.meer img { display: block; width: 100%; height: clamp(15rem, 52vw, 34rem); object-fit: cover; object-position: 50% 55%; }
.meer figcaption { padding: var(--abstand-4) var(--rand) var(--abstand-4); display: grid; gap: var(--abstand-2); }
.meer blockquote { margin: 0; font: var(--gewicht-normal) var(--stufe-band)/var(--zeile-mittel) var(--schrift-text); max-width: 26ch; }
.meer blockquote p { margin: 0; }
.meer cite { font: normal var(--gewicht-normal) var(--stufe-1)/var(--zeile-knapp) var(--schrift-display); color: var(--farbe-auf-dunkel-leise); }
.meer a { color: var(--farbe-auf-dunkel); font-size: var(--stufe-1); font-family: var(--schrift-display); }

/* Closing block */
.schluss h2 { font-size: var(--stufe-6); line-height: var(--zeile-titel); letter-spacing: var(--laufweite-titel); max-width: 16ch; }
.schluss__satz { margin: var(--abstand-2) 0 0; max-width: 38ch; }
.schluss__weiter { margin: var(--abstand-4) 0 0; }

/* Work index (H30) */
.index { margin: var(--abstand-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--abstand-5); }
.eintrag { display: grid; gap: var(--abstand-2); border-top: var(--linie-stark) solid var(--farbe-text); padding-top: var(--abstand-2); }
.eintrag h2, .eintrag h3 { margin: 0; font-size: var(--stufe-4); line-height: var(--zeile-eng); }
.eintrag__art { margin: var(--abstand-00) 0 0; color: var(--farbe-text-leise); font: var(--gewicht-normal) var(--stufe-1)/var(--zeile-knapp) var(--schrift-display); }
.eintrag p { margin: var(--abstand-1) 0 0; max-width: 36ch; }
.eintrag ul { margin: var(--abstand-2) 0 0; padding: 0; list-style: none; font: var(--gewicht-normal) var(--stufe-1)/var(--zeile-text) var(--schrift-display); }
.eintrag ul li::before { content: "– "; color: var(--farbe-text-leise); }
/* phones: eight entries — the service bullets repeat the table column „Leistungen“ below, so they stay on wide screens only */
@media (max-width: 759px) { .eintrag ul { display: none; } }
.eintrag .wege { margin-top: var(--abstand-2); }
.eintrag__bilder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); gap: var(--abstand-2); align-items: end; }
.eintrag__bilder img { display: block; width: 100%; border: var(--linie-duenn) solid var(--farbe-linie); background: var(--farbe-text-umgekehrt); }
@media (min-width: 900px) { .eintrag { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--abstand-4); } }

/* Data block / tables */
.daten { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-0) var(--abstand-3); font-size: var(--stufe-1); border-top: var(--linie-stark) solid var(--farbe-text); padding-top: var(--abstand-2); max-width: 46rem; }
.daten dt { color: var(--farbe-text-leise); }
.daten dd { margin: 0; font-family: var(--schrift-display); }
.tabelle-rahmen { overflow-x: auto; margin-top: var(--abstand-3); }
.tabelle { border-collapse: collapse; width: 100%; font-size: var(--stufe-1); min-width: 34rem; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: var(--abstand-1) var(--abstand-2) var(--abstand-1) 0; border-bottom: var(--linie-duenn) solid var(--farbe-linie); }
.tabelle th { color: var(--farbe-text-leise); font-weight: var(--gewicht-normal); border-bottom: var(--linie-stark) solid var(--farbe-text); }
.gebaut { margin: var(--abstand-3) 0 0; display: grid; gap: var(--abstand-2); max-width: 40rem; }
.gebaut dt { font: var(--gewicht-fett) var(--stufe-1)/var(--zeile-mittel) var(--schrift-display); }
.gebaut dd { margin: var(--abstand-00) 0 0; }

/* Numbers as image (H23/H24) */
.zahl { margin: 0; display: grid; gap: var(--abstand-0); }
.zahl b { font: var(--gewicht-fett) var(--stufe-zahl)/var(--zeile-titel) var(--schrift-display); letter-spacing: var(--laufweite-zahl); }
.zahl span { font: var(--gewicht-normal) var(--stufe-1)/var(--zeile-knapp) var(--schrift-display); color: var(--farbe-text-leise); max-width: 26ch; }
.tafel { margin: var(--abstand-3) 0 0; display: grid; gap: var(--abstand-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tafel div { border-top: var(--linie-stark) solid var(--farbe-text); padding-top: var(--abstand-2); }
.tafel dt { font: var(--gewicht-normal) var(--stufe-1)/var(--zeile-knapp) var(--schrift-display); color: var(--farbe-text-leise); }
.tafel dd { margin: var(--abstand-0) 0 0; font: var(--gewicht-fett) var(--stufe-5)/var(--zeile-titel) var(--schrift-display); letter-spacing: var(--laufweite-display); }
.tafel dd small { display: block; margin-top: var(--abstand-0); font: var(--gewicht-normal) var(--stufe-1)/var(--zeile-knapp) var(--schrift-display); letter-spacing: 0; color: var(--farbe-text-leise); }

/* Lists, details */
.punkte { margin: var(--abstand-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--abstand-1); max-width: 40rem; }
.punkte li { padding-left: var(--abstand-3); position: relative; }
.punkte li::before { content: "–"; position: absolute; left: 0; color: var(--farbe-text-leise); }
details { border-top: var(--linie-duenn) solid var(--farbe-linie); max-width: 44rem; }
details:last-of-type { border-bottom: var(--linie-duenn) solid var(--farbe-linie); }
summary { cursor: pointer; padding: var(--abstand-2) 0; min-height: 44px; font-weight: var(--gewicht-fett); font-size: var(--stufe-1); list-style-position: outside; margin-left: var(--abstand-2); }
summary:hover { text-decoration: underline; }
details > :not(summary) { margin-top: 0; }
details > div { padding: 0 0 var(--abstand-2) var(--abstand-2); }
details > div > p { margin: 0 0 var(--abstand-2); }
.aufklapper { margin-top: var(--abstand-3); }
.hinweis { margin: var(--abstand-3) 0 0; border-left: var(--linie-fokus) solid var(--farbe-text); padding: var(--abstand-00) 0 var(--abstand-00) var(--abstand-2); max-width: 40rem; }
.hinweis h3 { margin-bottom: var(--abstand-1); }
.hinweis p { margin: 0; }

/* Packages */
.pakete { margin: var(--abstand-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--abstand-2); }
.paket { background: var(--farbe-flaeche-1); border: var(--linie-stark) solid var(--farbe-text); padding: var(--abstand-3) var(--abstand-3) var(--abstand-3); display: grid; gap: var(--abstand-1); align-content: start; }
.paket h3 { margin: 0; }
.paket__preis { margin: 0; font: var(--gewicht-fett) var(--stufe-5)/var(--zeile-titel) var(--schrift-display); letter-spacing: var(--laufweite-display); }
.paket__preis small { font-size: var(--stufe-1); font-weight: var(--gewicht-normal); color: var(--farbe-text-leise); letter-spacing: 0; }
.paket p { margin: 0; }
.paket ul { margin: var(--abstand-0) 0 0; padding: 0; list-style: none; font: var(--gewicht-normal) var(--stufe-1)/var(--zeile-text) var(--schrift-display); display: grid; gap: var(--abstand-00); }
.paket ul li::before { content: "– "; color: var(--farbe-text-leise); }
@media (min-width: 900px) { .pakete { grid-template-columns: repeat(3, 1fr); } }
.pflege { margin: var(--abstand-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--abstand-2); }
.pflege h4 { margin: 0; font: var(--gewicht-fett) var(--stufe-1)/var(--zeile-mittel) var(--schrift-display); }
.pflege ul { margin: var(--abstand-0) 0 0; padding-left: var(--abstand-2); }
.einzeln { margin: var(--abstand-1) 0 0; display: grid; grid-template-columns: 1fr max-content; gap: var(--abstand-0) var(--abstand-3); max-width: 34rem; font-size: var(--stufe-1); }
.einzeln dt, .einzeln dd { margin: 0; border-bottom: var(--linie-duenn) solid var(--farbe-linie); padding-bottom: var(--abstand-0); }
.einzeln dd { font-family: var(--schrift-display); text-align: right; font-variant-numeric: tabular-nums; }
.box { background: var(--farbe-flaeche-1); padding: var(--abstand-3); max-width: 44rem; }
.box h2 { font-size: var(--stufe-4) !important; }
.box p, .box ul { margin: var(--abstand-2) 0 0; }

/* Steps (H03) */
.schritte { margin: var(--abstand-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--abstand-3); counter-reset: schritt; }
.schritte li { border-top: var(--linie-stark) solid var(--farbe-text); padding-top: var(--abstand-2); }
.schritte .nr { display: block; font: var(--gewicht-fett) var(--stufe-5)/var(--zeile-titel) var(--schrift-display); color: var(--farbe-text); margin-bottom: var(--abstand-1); }
.schritte h3 { margin: 0 0 var(--abstand-0); }
.schritte p { margin: 0; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(4, 1fr); gap: var(--abstand-4); } }

/* Stations on a line (about page) */
.station { display: grid; gap: var(--abstand-3); }
.station__zeit { margin: 0; font: var(--gewicht-fett) var(--stufe-1)/var(--zeile-mittel) var(--schrift-display); color: var(--farbe-text-leise); border-top: var(--linie-stark) solid var(--farbe-text); padding-top: var(--abstand-2); }
.station .display { margin: var(--abstand-2) 0 var(--abstand-3); }
@media (min-width: 900px) { .station { grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); gap: var(--abstand-5); align-items: start; } }

.links { margin: var(--abstand-3) 0 0; display: grid; gap: var(--abstand-3); }
.links h3 { font-size: var(--stufe-1) !important; }
.links ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--abstand-0); font-size: var(--stufe-1); }
@media (min-width: 900px) { .links { grid-template-columns: repeat(3, 1fr); } }

/* Legal text */
.recht { padding: var(--abstand-4) var(--rand) var(--abstand-5); }
.recht h1 { margin: 0 0 var(--abstand-3); hyphens: auto; overflow-wrap: break-word; font-size: var(--stufe-5); line-height: var(--zeile-eng); letter-spacing: var(--laufweite-display); }
.recht h2 { font-size: var(--stufe-3); margin: var(--abstand-4) 0 var(--abstand-0); }
.recht p, .recht ul { max-width: 42rem; margin: 0 0 var(--abstand-2); }
.recht a { overflow-wrap: anywhere; }

/* Footer: contact data on every page (0 clicks) */
.fuss { border-top: var(--linie-duenn) solid var(--farbe-linie); padding: var(--abstand-4) var(--rand) var(--abstand-4); font: var(--gewicht-normal) var(--stufe-0)/var(--zeile-text) var(--schrift-display); color: var(--farbe-text-leise); display: grid; gap: var(--abstand-2); }
.fuss p { margin: 0; }
.fuss__adresse { color: var(--farbe-text); font-size: var(--stufe-1); }
.fuss__links { display: flex; flex-wrap: wrap; gap: var(--abstand-0) var(--abstand-3); }
.fuss a { color: var(--farbe-text); display: inline-block; padding: var(--abstand-00) 0; }

/* 404 */
.leer { padding: var(--abstand-4) var(--rand) var(--abstand-5); background: var(--farbe-flaeche-1); display: grid; gap: var(--abstand-4); justify-items: start; }
.leer__wand { width: min(100%, 26rem); aspect-ratio: 4 / 5; border: var(--linie-stark) dashed var(--farbe-linie); position: relative; }
.leer__wand::before { content: ""; position: absolute; top: -10px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-text); transform: translateX(-50%); }
.leer h1 { margin: 0; font-size: var(--stufe-6); line-height: var(--zeile-titel); letter-spacing: var(--laufweite-titel); max-width: 14ch; }
.leer figcaption { margin-top: var(--abstand-1); font: var(--gewicht-normal) var(--stufe-0)/var(--zeile-knapp) var(--schrift-display); color: var(--farbe-text-leise); }
@media (min-width: 900px) { .leer { grid-template-columns: auto 1fr; align-items: center; gap: var(--abstand-5); } }
.abstand-oben { margin-top: var(--abstand-4); }
@media (min-width: 900px) { .seitenkopf--preise { grid-template-columns: 1fr; min-height: 0; gap: var(--abstand-4); } }
.seitenkopf--preise .pakete { margin-top: 0; }
.meer--still img { height: clamp(12rem, 38vw, 26rem); filter: grayscale(1); }
.seitenkopf__bild--portrait img { object-position: 50% 30%; }
@media (min-width: 900px) { .seitenkopf__bild--portrait img { height: min(78vh, 46rem); } }
.abschnitt h2.marke { font-size: var(--stufe-1); letter-spacing: 0; line-height: var(--zeile-knapp); font-weight: var(--gewicht-normal); margin: 0 0 var(--abstand-2); }
.text h2 + p, .text h2 + dl, .text h2 + ul { margin-top: var(--abstand-2); }
* { hyphenate-limit-chars: 10 4 4; }

/* Report head: the site large, switch screen / phone (D2), CSS only */
.ansicht { margin: 0; display: grid; gap: var(--abstand-2); }
.ansicht input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ansicht input:focus-visible + label { outline: var(--linie-fokus) solid var(--farbe-text); outline-offset: var(--abstand-00); }
.ansicht legend { padding: 0; margin-bottom: var(--abstand-1); font-size: var(--stufe-0); color: var(--farbe-text-leise); }
.ansicht fieldset { border: 0; padding: 0; margin: 0; }
.ansicht__bilder { display: flex; justify-content: center; align-items: flex-start; }
.ansicht__bilder img { display: block; border: var(--linie-duenn) solid var(--farbe-linie); background: var(--farbe-flaeche-1); }
.ansicht__bilder img[data-b="d"] { width: 100%; }
.ansicht__bilder img[data-b="m"] { display: none; width: min(70%, 300px); }
.ansicht:has(#am:checked) img[data-b="d"] { display: none; }
.ansicht:has(#am:checked) img[data-b="m"] { display: block; }
@supports not selector(:has(*)) { .ansicht__bilder { flex-direction: column; gap: var(--abstand-2); } .ansicht__bilder img[data-b="m"] { display: block; } .ansicht .breite { display: none; } }
@media (prefers-reduced-motion: no-preference) { .ansicht__bilder img { animation: ein var(--dauer-kurz) ease-out; } }
.ansicht figcaption { font: var(--gewicht-normal) var(--stufe-0)/var(--zeile-knapp) var(--schrift-display); color: var(--farbe-text-leise); }
@media (min-width: 900px) {
  .seitenkopf--bericht { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .seitenkopf--bericht .seitenkopf__text { padding-top: var(--abstand-5); }
  .ansicht__bilder { min-height: 30rem; }
  .ansicht__bilder img[data-b="m"] { width: auto; max-height: 34rem; }
}
.gebaut-raster { display: grid; gap: var(--abstand-4); margin-top: var(--abstand-3); }
.gebaut-raster .gebaut { margin: 0; }
.gebaut-raster__bild img { width: 100%; }
@media (min-width: 900px) {
  .gebaut-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "a bild" "b bild"; column-gap: var(--abstand-5); align-items: start; }
  .gebaut--a { grid-area: a; } .gebaut--b { grid-area: b; } .gebaut-raster__bild { grid-area: bild; position: sticky; top: var(--abstand-3); }
}

.abstand-gross { margin-top: var(--abstand-5); }
@media (min-width: 900px) {
  .station:has(.station__mehr) { grid-template-areas: "zeit text bild" "zeit mehr bild"; }
  .station:has(.station__mehr) > .station__zeit { grid-area: zeit; }
  .station:has(.station__mehr) > .text:not(.station__mehr) { grid-area: text; }
  .station__mehr { grid-area: mehr; }
  .station__bild { grid-area: bild; }
}
@media (max-width: 899px) {
  .bild--handy img { width: min(64%, 270px); }
  .format { grid-template-columns: minmax(0, 1fr) 7.5rem; column-gap: var(--abstand-2); }
  .format > :not(.bild) { grid-column: 1; }
  .format .bild { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .format .bild img { max-height: 10rem; }
  .bild--werk img { max-height: 70vh; }
  .seitenkopf__bild--hoch img { max-height: 40vh; }
}
.bild--klein { margin: var(--abstand-3) 0; }
.bild--klein img { max-height: 50vh; }
/* Arbeiten: the works hang like pictures on a wall, alternating sides for rhythm (protected moment, Jan 10.10.) */
@media (min-width: 900px) {
  .eintrag:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .eintrag:nth-child(even) > .eintrag__bilder { order: 2; }
}
/* Title voice (FINAL design): condensed black for headings, display sentences, prices, numbers */
.auftakt h1, .seitenkopf h1, .abschnitt h2:not(.marke):not(.sr), .display, .rahmen, .tafel dd, .paket__preis, .zahl b, .leer h1, .recht h1, .eintrag h3, .box h2 {
  font-family: var(--schrift-titel); font-weight: var(--gewicht-titel); }
.tafel dd small, .paket__preis small { font-family: var(--schrift-display); font-weight: var(--gewicht-normal); }
.auftakt__wer { font-style: normal; }
/* The one band on report pages: what remains, set dark */
.abschnitt--band { background: var(--farbe-flaeche-2); color: var(--farbe-auf-dunkel); }
.abschnitt--band .marke { color: var(--farbe-auf-dunkel-leise); }
.abschnitt--band a { color: var(--farbe-auf-dunkel); }
.punkte--zahl { list-style: decimal; padding-left: var(--abstand-3); }
.punkte--zahl li { padding-left: var(--abstand-0); }
.punkte--zahl li::before { content: none; }
@media (max-width: 899px) {
  .tafel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-2); }
  .tafel dd { font-size: var(--stufe-4); }
  .tafel dt { font-size: var(--stufe-0); }
}
@media (max-width: 899px) {
  #kuenstler .bild--werk img { max-height: 50vh; }
  #coaches .bild--handy img { width: min(50%, 220px); }
}
/* Angebot carries three audiences: tighter vertical rhythm on phones only */
@media (max-width: 599px) {
  .lang .abschnitt { padding-block: var(--abstand-4); }
  .lang .seitenkopf__bild--hoch img { max-height: 34vh; }
  .lang #kuenstler .bild--werk img { max-height: 42vh; }
}
/* Frischer Blick 10.10.: the works must hang like pictures, not float — a shadow lifts them off the white wall */
.haengung__bild img, .eintrag__bilder img, .ansicht__bilder img, .seitenkopf__bild:not(.seitenkopf__bild--foto) img, .format .bild img {
  box-shadow: 0 1px 2px var(--farbe-schatten), 0 14px 32px var(--farbe-schatten); }
}