/*
 * basis.css – Fundament der Website (docs/ENTWURF.md 3, 4.1, 4.8, 5)
 *
 * Inhalt: Variablen · Rücksetzung · Schrift · Raster · Links und Fokus ·
 * Knopf und Etikett · Sprunglink · Kopfzeile · Menü · Fußzeile · Medium ·
 * Einblenden · Zeigeretikett · Rasterhilfe · Seitenwechsel
 *
 * Umbrüche: breit ≥ 1100 px · mittel 700–1099 px · schmal < 700 px.
 * Die @font-face-Regeln stehen inline im <head> (layout.php).
 */

/* ------------------------------------------------------------------------
   Variablen
   ------------------------------------------------------------------------ */

:root {
  /* Raster */
  --rand: 12px;
  --spalt: 12px;

  /* Farben, hell */
  --grund: #F2F2F2;
  --grund-fokus: #FFFFFF;
  --text: #0A0A0A;
  --text-2: #6E6E6E;
  --linie: #DADADA;
  --flaeche: rgba(10, 10, 10, .06);
  --karte: #E3E3E3;
  --karte-text: #0A0A0A;
  --karte-text-2: #5F5F5F;
  --karte-linie: #C8C8C8;
  /* Etikett (ARCHIVED): --text-2 auf --flaeche läge hell bei 4,49 : 1, knapp
     unter AA (4,5); eine Stufe dunkler ergibt 5,0. Dunkel reicht --text-2. */
  --etikett-text: #666666;

  /* Schrift: vier Größen, jede mit fester Zeilenhöhe und Laufweite */
  --schrift: "Söhne", "Soehne Ersatz HN", "Soehne Ersatz Arial", system-ui, sans-serif;
  --t-s: .8125rem;
  --t-m: 1rem;
  --t-l: clamp(1.375rem, .95rem + 1.1vw, 1.75rem);
  --t-xl: clamp(1.75rem, .9rem + 2.4vw, 2.75rem);
  --zh-s: 1.3;
  --zh-m: 1.25;
  --zh-l: 1.18;
  --zh-xl: 1.06;
  --lw-l: -.01em;
  --lw-xl: -.02em;

  /* Formen und Abstände */
  --radius: 4px;
  --abstand-sektion: clamp(96px, 14vh, 180px);
  /* Abstand zwischen zwei Blöcken derselben Sektion: halber Sektionsabstand (48–90 px) */
  --abstand-block: calc(var(--abstand-sektion) / 2);

  /* Schriftlinien, damit Text und Bild an derselben Kante hängen.
     Söhne: Oberlänge 1.171, Unterlänge .423, Versalhöhe .718.
     --kappe: Abstand von der Oberkante der Zeile bis zur Oberkante der Versalien
              (Zeilenhöhe / 2 − .344 em).
     --sockel: Abstand von der Grundlinie bis zur Unterkante der Zeile
              (Zeilenhöhe / 2 − .374 em). */
  --kappe-m: calc(var(--t-m) * (var(--zh-m) / 2 - .344));
  --kappe-xl: calc(var(--t-xl) * (var(--zh-xl) / 2 - .344));
  --sockel-m: calc(var(--t-m) * (var(--zh-m) / 2 - .374));

  /* Bewegung */
  --ease-aus: cubic-bezier(.19, 1, .22, 1);

  color-scheme: light;
}

[data-thema="dunkel"] {
  --grund: #141414;
  --grund-fokus: #000000;
  --text: #F2F2F2;
  --text-2: #8E8E8E;
  --linie: #2C2C2C;
  --flaeche: rgba(255, 255, 255, .10);
  --karte: #1F1F1F;
  --karte-text: #F2F2F2;
  --karte-text-2: #8E8E8E;
  --karte-linie: #333333;
  --etikett-text: #8E8E8E;

  color-scheme: dark;
}

/* Ohne JavaScript setzt niemand data-thema: dann entscheidet das System. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema]) {
    --grund: #141414;
    --grund-fokus: #000000;
    --text: #F2F2F2;
    --text-2: #8E8E8E;
    --linie: #2C2C2C;
    --flaeche: rgba(255, 255, 255, .10);
    --karte: #1F1F1F;
    --karte-text: #F2F2F2;
    --karte-text-2: #8E8E8E;
    --karte-linie: #333333;
    --etikett-text: #8E8E8E;

    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------------
   Rücksetzung
   ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Wird das Scrollen gesperrt (Menü, Projektansicht), springt die Seite nicht. */
  scrollbar-gutter: stable;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--t-m);
  font-weight: 400;
  line-height: var(--zh-m);
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

ul, ol {
  padding: 0;
  list-style: none;
}

p {
  text-wrap: pretty;
}

strong, b {
  font-weight: 600;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--text);
  color: var(--grund);
}

/* Scrollsperre ohne Lenis (reduzierte Bewegung); mit Lenis sperrt lenis.css. */
html.scroll-gesperrt {
  overflow: clip;
}

/* ------------------------------------------------------------------------
   Raster: immer 12 Spalten
   ------------------------------------------------------------------------ */

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  padding-inline: var(--rand);
}

/* ------------------------------------------------------------------------
   Links und Fokus
   ------------------------------------------------------------------------ */

a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:focus-visible,
a[aria-current="page"] {
  text-decoration-line: underline;
}

@media (hover: hover) {
  a:hover {
    text-decoration-line: underline;
  }
}

/* Zeilen, die als Ganzes ein Link sind, und Knöpfe unterstreichen nichts. */
a[data-projekt],
a[data-projekt]:hover,
a.knopf,
a.knopf:hover {
  text-decoration-line: none;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------------
   Knopf und Etikett
   ------------------------------------------------------------------------ */

.knopf,
.etikett {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 36px;
  padding-inline: 14px;
  border-radius: var(--radius);
  font-size: var(--t-m);
  line-height: 1;
  white-space: nowrap;
}

.knopf {
  background: var(--text);
  color: var(--grund);
  transition: opacity .15s ease-out;
}

@media (hover: hover) {
  .knopf:hover {
    opacity: .82;
  }
}

.etikett {
  background: var(--flaeche);
  color: var(--etikett-text, var(--text-2));
}

/* Nur für Screenreader (z. B. „öffnet in neuem Fenster“ hinter einem Link) */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------------
   Sprunglink
   ------------------------------------------------------------------------ */

.sprunglink {
  position: absolute;
  top: var(--rand);
  left: var(--rand);
  z-index: 1002;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 14px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--grund);
  transform: translateY(calc(-100% - 2 * var(--rand)));
}

.sprunglink:focus {
  transform: none;
  text-decoration-line: none;
}

/* ------------------------------------------------------------------------
   Kopfzeile (4.1): scrollt mit, eine Schriftgröße, Linien 1 · 4 · 7 · 10
   Das volle Layout beginnt hier erst bei 1140 px (sonst 1100): Zwischen
   1100 und 1139 px bleiben zwischen E-Mail, „DE / EN“ und dem fest stehenden
   Themenschalter keine 12 px Luft. Dieselbe Grenze in modul/menue.js.
   ------------------------------------------------------------------------ */

.kopfzeile {
  align-items: start;
  padding-top: 12px;
}

.wortmarke {
  white-space: nowrap;
}

.wortmarke__fett {
  font-weight: 600;
}

.kopfzeile__marke {
  grid-column: 1 / span 3;
  justify-self: start;
}

/* Wortmarke und Themenschalter bleiben beim Scrollen stehen, der Rest der
   Zeile scrollt mit. Weiß mit mix-blend-mode: difference: so bleiben beide auf
   heller und dunkler Fläche und über Bildern lesbar. Ebene 40 liegt unter der
   Projektansicht (50) und dem Menü (60), die beide ihren eigenen Kopf haben. */
.kopfzeile__marke,
.themenschalter {
  position: fixed;
  z-index: 40;
  color: #fff;
  mix-blend-mode: difference;
}

.kopfzeile__marke {
  top: 12px;
  left: var(--rand);
}

.kopfzeile__marke:focus-visible,
.themenschalter:focus-visible {
  outline-color: #fff;
}

/* Beide blenden beim Laden selbst ein, unabhängig davon, ob die Kopfzeile
   gerade im Fenster ist (eine Seite kann gescrollt geladen werden). */
@media (prefers-reduced-motion: no-preference) {
  html.js .kopfzeile__marke,
  html.js .themenschalter {
    animation: fest-einblenden .8s var(--ease-aus) both;
  }
}

@keyframes fest-einblenden {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.kopfzeile__leistungen {
  grid-column: 4 / span 3;
}

.kopfzeile__etikett {
  color: var(--text-2);
}

.kopfzeile__seiten {
  grid-column: 7 / span 3;
}

.kopfzeile__rand {
  grid-column: 10 / span 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spalt);
  min-width: 0;
}

/* Die Werkzeuge geben nie nach (sonst rutschte die Sprachwahl unter den fest
   stehenden Themenschalter); wird es eng, etwa bei vergrößertem Textabstand
   (WCAG 1.4.12), bricht stattdessen die E-Mail um. */
.kopfzeile__email {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Zielgröße (WCAG 2.5.8): Die Listen stehen mit 4 px Luft zwischen den Zeilen
   (Schritt 24 px bei 20 px Zeilenhöhe), und jeder Link ist mit 2 px Polster
   oben und unten 24 px hoch, ohne die Zeile zu dehnen; so berühren sich die
   Trefferflächen, ohne sich zu überlappen. Die erste Zeile bleibt oben bündig
   mit Wortmarke und E-Mail; unter „Leistungen“ beginnt die Liste mit demselben
   Schritt. Die Höhe der Kopfzeile (--kopf in startseite.css) rechnet damit. */
.kopfzeile li + li,
.kopfzeile__leistungen ul {
  margin-top: 4px;
}

/* Der Fokusring folgt der Zeile und sitzt enger, damit er die Nachbarzeile
   nicht berührt. */
.kopfzeile li a {
  display: inline-block;
  padding-block: 2px;
  margin-block: -2px;
  outline-offset: 1px;
}

.kopfzeile__werkzeuge {
  flex: none;
  /* Breiter als ihre Spalte werden die Werkzeuge nie: Unter 1140 px (ohne
     E-Mail) wandert der Menüknopf dann in eine zweite Zeile. */
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 12px;
  min-height: calc(var(--t-m) * var(--zh-m));
  margin-left: auto;
  /* Platz für den fest stehenden Themenschalter (30 px) am rechten Rand */
  padding-right: calc(30px + 12px);
}

.kopfzeile__menueknopf {
  display: none;
  position: relative;
}

/* Sprachwahl: DE / EN */

.sprachwahl {
  display: flex;
  gap: .3em;
  white-space: nowrap;
  color: var(--text-2);
}

.sprachwahl__aktuell {
  color: var(--text);
}

.sprachwahl a {
  position: relative;
}

/* Themenschalter: Bahn 30 × 16, Knopf 10 */

.themenschalter {
  /* fest am rechten Seitenrand, mittig auf der ersten Textzeile (20 px hoch) */
  top: 14px;
  right: var(--rand);
  width: 30px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.themenschalter__knopf {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  transition: transform .25s var(--ease-aus);
}

[data-thema="dunkel"] .themenschalter__knopf {
  transform: translateX(14px);
}

/* Größere Trefferflächen, ohne das Bild zu ändern */
.themenschalter::after,
.kopfzeile__menueknopf::after,
.sprachwahl a::after {
  content: "";
  position: absolute;
  inset: -14px -8px;
}

/* Ohne JavaScript gibt es nichts zu schalten und nichts zu öffnen. */
html:not(.js) .themenschalter,
html:not(.js) .kopfzeile__menueknopf {
  display: none;
}

@media (hover: hover) {
  .kopfzeile__menueknopf:hover,
  .menue__schliessen:hover,
  .fusszeile__bewegung:hover,
  .fusszeile__nach-oben:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
  }
}

@media (max-width: 1139.98px) {
  .kopfzeile__leistungen,
  .kopfzeile__seiten,
  .kopfzeile__email {
    display: none;
  }

  .kopfzeile__marke {
    grid-column: 1 / span 5;
  }

  .kopfzeile__rand {
    grid-column: 6 / -1;
  }

  .kopfzeile__werkzeuge {
    gap: 16px;
    padding-right: calc(30px + 16px);
  }

  .kopfzeile__menueknopf {
    display: block;
  }
}

/* Sehr schmal (320 px mit Scrollleisten-Rinne, also 305 px Layout): Die
   Werkzeuge reichten bis an die Wortmarke; etwas enger gesetzt bleiben
   einige Pixel Luft (bei 305 px rund 6 px). */
@media (max-width: 359.98px) {
  .kopfzeile__werkzeuge {
    gap: 10px;
    padding-right: calc(30px + 10px);
  }
}

/* ------------------------------------------------------------------------
   Menü (< 1140 px, wie die Kopfzeile): Vollfläche, Zeilen kommen maskiert von unten
   ------------------------------------------------------------------------ */

.menue {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 12px var(--rand) calc(var(--rand) + env(safe-area-inset-bottom, 0px));
  background: var(--grund-fokus);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .25s ease-out;
}

.menue:focus {
  outline: none;
}

.menue.ist-offen {
  opacity: 1;
}

/* Die feste Ebene reicht nicht in die Rinne der Scrollleiste (scrollbar-gutter
   auf html): Solange das Menü offen ist, trägt auch die Leinwand seine Farbe,
   wie html.projekt-offen in der Projektansicht. */
html:has(.menue:not([hidden])) {
  background: var(--grund-fokus);
}

.menue__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spalt);
}

.menue__schliessen {
  position: relative;
}

.menue__schliessen::after {
  content: "";
  position: absolute;
  inset: -14px -8px;
}

.menue__inhalt {
  margin-top: clamp(72px, 16vh, 160px);
}

.menue__seiten,
.menue__etikett {
  font-size: var(--t-xl);
  line-height: var(--zh-xl);
  letter-spacing: var(--lw-xl);
}

.menue__etikett {
  color: var(--text-2);
}

.menue__leistungen {
  /* eingerückt um einen Spaltenschritt */
  padding-left: calc((100% - 11 * var(--spalt)) / 12 + var(--spalt));
  margin-top: 10px;
  font-size: var(--t-l);
  line-height: var(--zh-l);
  letter-spacing: var(--lw-l);
}

.menue__seiten li + li,
.menue__etikett {
  margin-top: 6px;
}

.menue__leistungen li + li {
  margin-top: 4px;
}

.menue__fuss {
  margin-top: auto;
  padding-top: 48px;
}

/* Maske je Zeile; etwas Luft nach unten, damit Unterlängen nicht abgeschnitten werden. */
.menue__zeile {
  overflow: hidden;
  padding-bottom: .12em;
}

.menue__zeile > * {
  display: inline-block;
  vertical-align: top;
}

html.bewegung .menue__zeile > * {
  transform: translateY(125%);
  transition: transform .9s var(--ease-aus);
  transition-delay: calc(60ms + var(--i, 0) * 45ms);
}

/* Die Zeilen bleiben beim Schließen stehen, bis die Fläche ausgeblendet ist. */
html.bewegung .menue.zeilen-da .menue__zeile > * {
  transform: none;
}

@media (min-width: 1140px) {
  .menue {
    display: none;
  }
}

/* ------------------------------------------------------------------------
   Fußzeile (4.8): eine Karte mit festen Leerräumen
   Die Karte liegt auf dem Seitenraster: ihre Spaltenlinien 4 · 7 · 10 sind
   dieselben wie in Kopfzeile und Projektzeilen. Der Innenabstand von 20 px
   sitzt deshalb an den Blöcken am linken und rechten Rand, nicht an der Karte.
   ------------------------------------------------------------------------ */

.fusszeile {
  --innen: 20px;
  margin: var(--abstand-sektion) var(--rand) var(--rand);
}

.fusszeile__karte {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  align-items: start;
  padding-block: var(--innen);
  border-radius: 8px;
  background: var(--karte);
  color: var(--karte-text);
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.fusszeile :focus-visible {
  outline-color: var(--karte-text);
}

.fusszeile li + li {
  margin-top: 8px;
}

.fusszeile li a {
  display: inline-block;
}

.fusszeile__ruf {
  grid-column: 1 / span 6;
  margin-bottom: clamp(120px, 16vw, 240px);
  padding-left: var(--innen);
  font-size: var(--t-xl);
  line-height: var(--zh-xl);
  letter-spacing: var(--lw-xl);
  text-wrap: balance;
}

/* Block 5 wie eine Formularzeile (ENTWURF 4.8): Überschrift links in Spalte
   1–2, oben bündig mit der Adresse; Adresse (mit ihrer Linie) und „Adresse
   kopieren“ ab Spalte 4, wo auch die Linien der Formularzeilen beginnen, als
   Flex-Paar wie Nachrichtenfeld und Knopf. margin-top hält die Adresse auf der
   Höhe, die sie hatte, als die Überschrift noch über ihr stand. */
.fusszeile__kontakt {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
  margin-top: 34px;
  margin-bottom: 54px;
}

.fusszeile__kontakt-zeile {
  grid-column: 4 / -1;
  display: flex;
  align-items: flex-end;
  gap: 12px 20px;
  padding-right: var(--innen);
}

/* Ohne Formular (/danke) folgt die Kontaktzeile direkt auf die Überschrift:
   eigene Reihe darunter, die Überschrift steht allein in ihrer (Block 1). */
.fusszeile__ruf + .fusszeile__kontakt {
  grid-row: 2;
}

/* E-Mail wie ein Eingabefeld: die Linie ist die Auszeichnung, keine Unterstreichung */
.fusszeile__email {
  flex: 1 1 12em;
  padding: 12px 0;
  border-bottom: 1px solid var(--karte-linie);
  transition: border-color .3s ease-out;
}

.fusszeile__email:hover,
.fusszeile__email:focus-visible {
  border-color: var(--karte-text);
  text-decoration-line: none;
}

/* Überschrift links neben der Adresse (Block 5), gesetzt wie die Einleitung
   des Formulars (Spalte 1–2, Buch, Fußzeilenschrift); dasselbe padding-top
   wie die Adresse, damit die ersten Zeilen bündig stehen */
.fusszeile__kontakt-titel {
  grid-column: 1 / span 2;
  align-self: start;
  padding-top: 12px;
  padding-left: var(--innen);
  font-weight: inherit;
}

.fusszeile__kopieren {
  justify-content: center;
  background: var(--karte-text);
  color: var(--karte);
  font-size: inherit;
}

/* Kontaktformular (Block 3a, 4.8): Einleitung Sp. 1–2 links neben dem
   Formular (oben bündig), Formular Sp. 4–12 mit Feldname Sp. 4 und Eingabe
   Sp. 5–12; der Knopf inline in der Nachrichtenzeile (Sp. 11–12). Zeilen 48 px
   hoch, Haarlinie --karte-linie unter jeder Zeile ab dem Feldnamen bis zum
   Innenabstand, bei Fokus und Fehler --karte-text. */

.fusszeile__formular {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: clamp(64px, 8vw, 120px);
  margin-bottom: 54px;
  /* Sprungziel #kontakt (nach einem Absenden mit Fehlern): Luft unter der fest stehenden Wortmarke */
  scroll-margin-top: calc(12px + var(--t-m) * var(--zh-m) + 24px);
}

/* Der große Leerraum unter der Überschrift (Block 1) war der Abstand zu
   Soziales; mit dem Formular dazwischen gilt dessen eigener Abstand, sonst
   stünden beide übereinander (bei 1440 px rund 345 px). */
.fusszeile__karte:has(.fusszeile__formular) .fusszeile__ruf {
  margin-bottom: 0;
}

/* Einleitung links neben dem Formular auf Spalte 1–2, oben bündig: Die erste
   Zeile steht auf der Höhe des ersten Feldnamens (48-px-Zeile, Text mittig),
   daher der halbe Rest der Zeilenhöhe als Abstand oben (ENTWURF 4.8). */
.formular__einleitung {
  grid-column: 1 / span 2;
  grid-row: 1;
  align-self: start;
  padding-top: calc((48px - 1.25em) / 2);
  padding-top: calc((48px - 1lh) / 2);
  padding-left: var(--innen);
}

/* Das Formular ab Spalte 4, selbst ein Teilraster (9 Spalten): Feldname in
   seiner ersten Spalte (= Sp. 4), Eingaben ab der zweiten (= Sp. 5–12). */
.formular__form {
  grid-column: 4 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
}

.formular__meldung {
  grid-column: 2 / -1;
  margin-bottom: 12px;
  padding-right: var(--innen);
  font-size: var(--t-s);
  line-height: var(--zh-s);
  letter-spacing: 0;
}

/* Die Meldung bekommt nach dem Absenden den Fokus (Sprungziel), ist aber nichts zum Bedienen. */
.formular__meldung:focus {
  outline: none;
}

.formular__zeile {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  cursor: text;
}

/* Haarlinie unter jeder Zeile: beginnt mit dem Feldnamen, endet am Innenabstand */
.formular__zeile::after {
  content: "";
  position: absolute;
  right: var(--innen);
  bottom: 0;
  left: 0;
  border-top: 1px solid var(--karte-linie);
  transition: border-color .3s ease-out;
}

.formular__zeile:focus-within::after,
.formular__zeile.hat-fehler::after {
  border-color: var(--karte-text);
}

.formular__name,
.formular__feld {
  display: flex;
  align-items: center;
  min-height: 48px;
}

/* Feldname in der ersten Spalte des Formulars (Sp. 4), Eingabe ab der zweiten (Sp. 5) */
.formular__name {
  grid-column: 1;
  white-space: nowrap;
}

.formular__feld {
  position: relative;
  grid-column: 2 / -1;
  min-width: 0;
  padding-right: var(--innen);
}

/* Nachrichtenzeile: Feld und Knopf nebeneinander wie Adresse und „Adresse
   kopieren“ (Block 5), Abstand --innen; das Feld füllt den Platz bis zum Knopf.
   Die Haarlinie läuft hier vom Feldnamen (über den Spaltenabstand hinweg) unter
   dem Feld entlang und endet kurz vor dem Knopf – statt der Zeilenlinie. */
.formular__ende {
  grid-column: 2 / -1;
  display: flex;
  align-items: flex-end;
  gap: var(--innen);
  padding-right: var(--innen);
}

/* Das Feld trägt hier auch den Fehlersatz (unter der Nachricht, über der Linie). */
.formular__ende .formular__feld {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding-right: 0;
}

.formular__ende .formular__fehler {
  padding-right: 0;
}

.formular__ende .formular__senden {
  flex: none;
  padding-right: 0;
}

.formular__zeile--mit-knopf::after {
  content: none;
}

/* Der Feldname wächst mit der Zeile (längere Nachricht, Fehlersatz), der Text
   bleibt oben auf der Höhe der ersten Zeile: So liegt seine Linie immer auf
   derselben Höhe wie die des Felds. */
.formular__zeile--mit-knopf .formular__name {
  position: relative;
  align-self: stretch;
  align-items: flex-start;
  padding-top: calc((48px - 1.2em) / 2);
  padding-top: calc((48px - 1lh) / 2);
}

.formular__zeile--mit-knopf .formular__name::after,
.formular__zeile--mit-knopf .formular__feld::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid var(--karte-linie);
  transition: border-color .3s ease-out;
}

.formular__zeile--mit-knopf .formular__name::after {
  right: calc(-1 * var(--spalt));
}

.formular__zeile--mit-knopf:focus-within .formular__name::after,
.formular__zeile--mit-knopf:focus-within .formular__feld::after,
.formular__zeile--mit-knopf.hat-fehler .formular__name::after,
.formular__zeile--mit-knopf.hat-fehler .formular__feld::after {
  border-color: var(--karte-text);
}

/* Fokus auf „Nachricht senden“ ist kein Fokus im Feld (:focus-within umfasst
   den Knopf in dieser Zeile). In :where(), damit Browser ohne :has() die Regel
   nur verwerfen und :focus-within weiter wirkt. */
.formular__zeile--mit-knopf:not(.hat-fehler):where(:has(.formular__knopf:focus))::after,
.formular__zeile--mit-knopf:not(.hat-fehler):where(:has(.formular__knopf:focus)) .formular__name::after,
.formular__zeile--mit-knopf:not(.hat-fehler):where(:has(.formular__knopf:focus)) .formular__feld::after {
  border-color: var(--karte-linie);
}

/* Eingaben ohne Rahmen und Fläche; die Zeile selbst ist das Feld. */
.formular__eingabe {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--karte-text);
  font: inherit;
  letter-spacing: inherit;
  outline-offset: 6px;
}

.formular__eingabe:focus-visible {
  outline: none;
}

textarea.formular__eingabe {
  display: block;
  /* 48 px hoch bei einer Zeile (auch mit Zeilenhöhe 1,25 unter 1100 px: 1lh);
     wächst mit dem Inhalt (field-sizing, sonst modul/formular.js) */
  padding-block: calc((48px - 1.2em) / 2);
  padding-block: calc((48px - 1lh) / 2);
  resize: none;
  overflow: hidden;
  field-sizing: content;
}

select.formular__eingabe {
  height: 48px;
  padding-right: 32px;
  appearance: none;
  cursor: pointer;
}

select.formular__eingabe option {
  color: var(--karte-text);
  background: var(--karte);
}

/* Das Pluszeichen ersetzt den Pfeil der Auswahl; der leere Alternativtext
   hält es aus dem Namen des Felds für Vorleser („Leistung“, nicht „Leistung +“). */
.formular__feld--auswahl::after {
  content: "+" / "";
  position: absolute;
  top: 0;
  right: var(--innen);
  display: flex;
  align-items: center;
  height: 48px;
  pointer-events: none;
  transition: transform .25s var(--ease-aus);
}

/* Eigenes Auswahlfeld (modul/auswahl.js, nur mit JavaScript; Muster APG
   „Select-Only Combobox“): Statt des Systemmenüs ein Knopf mit der Optik der
   Eingaben und eine Liste im Ton der Karte unter der Haarlinie. Das select
   bleibt unsichtbar im Formular (Wert für Versand, formular.js und die
   :has-Regel des Hinweises). Ohne JavaScript bleibt das native Feld. */
.formular__feld--auswahl.ist-eigen select.formular__eingabe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.auswahl__knopf {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  /* Platz für das „+“ wie beim select */
  padding: 0 32px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--karte-text);
  text-align: left;
  outline-offset: 6px;
}

/* Wie die Eingaben: den Fokus zeigt die Haarlinie der Zeile (:focus-within). */
.auswahl__knopf:focus-visible {
  outline: none;
}

.auswahl__wert {
  display: block;
  overflow: hidden;
  line-height: 48px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Offen dreht sich das „+“ zum „ד. */
.formular__feld--auswahl.ist-offen::after {
  transform: rotate(45deg);
}

/* Bündig mit der Eingabespalte (ohne den Innenabstand rechts), 1 px unter der
   Haarlinie der Zeile; den genauen Abstand (auch unter einem Fehlersatz)
   setzt modul/auswahl.js. Reicht der Platz im Fenster nicht, nach oben
   (ist-oben, 1 px über der Haarlinie der Zeile darüber). Über den folgenden
   Zeilen und „Nachricht senden“. Auch beim Ausblenden bleibt sie treffbar,
   bis sie hidden ist: modul/auswahl.js verwirft dann Klicks auf sie, damit
   der zweite Klick eines Doppelklicks nicht trifft, was darunter liegt. */
.auswahl__liste {
  position: absolute;
  top: calc(100% + 1px);
  right: var(--innen);
  left: 0;
  z-index: 20;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--karte-linie);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
  color: var(--karte-text);
  cursor: default;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s var(--ease-aus), transform .2s var(--ease-aus);
}

.auswahl__liste.ist-oben {
  top: auto;
  bottom: calc(100% + 2px);
  transform: translateY(4px);
}

.formular__feld.ist-offen > .auswahl__liste {
  opacity: 1;
  transform: none;
}

/* Beim Ausblenden kein Handzeiger über der verschwindenden Liste */
.formular__feld:not(.ist-offen) .auswahl__eintrag {
  cursor: default;
}

[data-thema="dunkel"] .auswahl__liste {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}

.auswahl__eintrag {
  height: 44px;
  padding: 0 14px;
  overflow: hidden;
  line-height: 44px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Haarlinie zwischen den Einträgen als Schatten innen: kostet keine Höhe; an
   der Markierung entfällt sie (siehe unten). Ersetzt den Listenabstand der Fußzeile. */
.auswahl__eintrag + .auswahl__eintrag {
  margin-top: 0;
  box-shadow: inset 0 1px 0 var(--karte-linie);
}

/* Markiert (Maus oder Tastatur) invers wie die Knöpfe der Karte („Nachricht
   senden“, „Adresse kopieren“): Bei Tastaturbedienung bleibt der Fokus auf dem
   Knopf, die Markierung ist der einzige Hinweis, was Enter, Leertaste oder Tab
   wählen (WCAG 1.4.11: hell 15,4 : 1, dunkel 14,7 : 1). Die Haarlinien an ihr
   entfallen, die Fläche schließt an die Nachbarn an. */
.auswahl__eintrag.ist-markiert {
  background: var(--karte-text);
  color: var(--karte);
}

.auswahl__eintrag.ist-markiert,
.auswahl__eintrag.ist-markiert + .auswahl__eintrag {
  box-shadow: none;
}

.auswahl__eintrag[aria-selected="true"] {
  font-weight: 600;
}

/* Kontrastmodus (forced-colors): Flächen und Schatten nimmt der Browser weg.
   Die Markierung in den Systemfarben der Auswahl wie bei einer nativen Liste,
   den Fokus des geschlossenen Knopfs als Umriss (die Haarlinien sind dort alle
   CanvasText, ihr Wechsel zeigt nichts). */
@media (forced-colors: active) {
  .auswahl__eintrag.ist-markiert {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .auswahl__knopf:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

html:not(.bewegung) .auswahl__liste,
html:not(.bewegung) .formular__feld--auswahl::after {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .auswahl__liste,
  .formular__feld--auswahl::after {
    transition: none;
  }
}

/* Der Hinweissatz liegt in der Eingabezeile und verschwindet bei Fokus oder Inhalt */
/* Block mit Zeilenhöhe 48 px statt Flex, damit text-overflow wirkt: Reicht der
   Platz nicht, endet der Satz mit „…“ statt hart abgeschnitten. */
.formular__hinweis {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: calc(100% - var(--innen) - 32px);
  height: 48px;
  overflow: hidden;
  color: var(--karte-text-2);
  line-height: 48px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity .15s ease-out;
}

/* In der Nachrichtenzeile hat das Feld weder Innenabstand rechts noch „+“ */
.formular__ende .formular__hinweis {
  max-width: 100%;
}

/* Bei Fokus bleibt der Hinweis sichtbar, nur deutlich blasser; erst mit dem
   ersten Zeichen verschwindet er (hat-inhalt per Skript, :placeholder-shown
   über placeholder=" " auch ohne Skript, bei der Auswahl die gewählte Option). */
.formular__zeile:focus-within .formular__hinweis {
  opacity: .35;
}

/* … nicht aber, wenn nur der Knopf der Zeile den Fokus hat (siehe oben). */
.formular__zeile:focus-within:where(:has(.formular__knopf:focus)) .formular__hinweis {
  opacity: 1;
}

.formular__zeile.hat-inhalt .formular__hinweis,
.formular__feld:has(:is(input, textarea).formular__eingabe:not(:placeholder-shown)) .formular__hinweis,
.formular__zeile:has(select option:checked:not([value=""])) .formular__hinweis {
  opacity: 0;
}

.formular__zeile.hat-fehler .formular__hinweis {
  color: var(--karte-text);
}

/* Fehlersatz unter dem Feld */
.formular__fehler {
  grid-column: 2 / -1;
  padding-bottom: 12px;
  padding-right: var(--innen);
  /* kleiner als Hinweis und Eingabe (--t-s), wie der Hinweis im statischen Betrieb */
  font-size: var(--t-s);
  line-height: var(--zh-s);
  letter-spacing: 0;
}

/* Der Knopf steht in der Zeile des Nachrichtenfelds rechts daneben (Sp. 11–12),
   unten bündig mit dem Feld, also direkt über der Haarlinie – auch wenn die
   Nachricht wächst. Rechtsbündig an derselben Kante wie „Adresse kopieren“
   (Innenabstand der Karte), in Inhaltsbreite (ENTWURF 4.8). */
.formular__senden {
  grid-column: 8 / -1;
  grid-row: 1;
  align-self: end;
  display: flex;
  justify-content: flex-end;
  padding-right: var(--innen);
}

/* Ohne Langtextfeld (CMS) steht der Knopf unter den Zeilen */
.formular__senden--unten {
  grid-column: 2 / -1;
  grid-row: auto;
  margin-top: 24px;
}

/* Gleiche Höhe (36 px aus .knopf) und Farbe wie „Adresse kopieren“; sitzt
   unten in der 48-px-Zeile, also auf der Haarlinie wie jener auf seiner. */
.formular__knopf {
  justify-content: center;
  background: var(--karte-text);
  color: var(--karte);
  font-size: inherit;
}

/* Im statischen Export: „Im Testbetrieb öffnet der Knopf dein Mailprogramm.“ */
.formular__statisch {
  grid-column: 2 / -1;
  margin-top: 12px;
  padding-right: var(--innen);
  color: var(--karte-text-2);
  font-size: var(--t-s);
  line-height: var(--zh-s);
  letter-spacing: 0;
}

/* Honigtopf: für Menschen und Vorleser unsichtbar, für Automaten ein Feld */
.formular__falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fusszeile__unten {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  margin-bottom: clamp(80px, 11vw, 184px);
  padding-top: 20px;
}

/* Haarlinie über der unteren Reihe, innerhalb des Innenabstands */
.fusszeile__unten::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--innen);
  left: var(--innen);
  border-top: 1px solid var(--karte-linie);
}

/* Sitemap Sp. 1–3, Projekte 4–6, Soziales 7–9, Rechtliches 10–12 (Block 6) */
.fusszeile__sitemap {
  grid-column: 1 / span 3;
  padding-left: var(--innen);
}

.fusszeile__projekte {
  grid-column: 4 / span 3;
}

.fusszeile__soziales {
  grid-column: 7 / span 3;
}

/* Rechts außen: Impressum/Datenschutz links in der Spalte, die Knöpfe „Nach
   oben“ und darunter „Bewegung anhalten“ rechtsbündig daneben; reicht die
   Spalte nicht für beides, rutschen die Knöpfe unter die Links. */
.fusszeile__ecke {
  grid-column: 10 / span 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 24px;
  padding-right: var(--innen);
}

.fusszeile__knoepfe {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}

.fusszeile__bewegung,
.fusszeile__nach-oben {
  text-align: right;
}

/* „Bewegung anhalten“ / „Bewegung abspielen“: Text und beide Beschriftungen als
   unsichtbare Platzhalter im selben Rasterfeld – der Knopf hat immer die Breite
   der längeren, die Knöpfe springen beim Umschalten nicht unter die Links. */
.fusszeile__bewegung {
  display: inline-grid;
  justify-items: end;
}

.fusszeile__bewegung > * {
  grid-area: 1 / 1;
}

.fusszeile__platzhalter {
  visibility: hidden;
}

/* Ohne JavaScript gibt es nichts anzuhalten. */
html:not(.js) .fusszeile__bewegung {
  display: none;
}

.fusszeile__rechtszeile {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  color: var(--karte-text-2);
  font-size: var(--t-s);
  line-height: var(--zh-s);
  letter-spacing: 0;
}

.fusszeile__copyright {
  grid-column: 1 / span 3;
  padding-left: var(--innen);
}

/* Inhaber in der Spalte der Projektliste (Linie 4) */
.fusszeile__inhaber {
  grid-column: 4 / span 3;
}

/* Urheberrechtshinweis in der Spalte von Instagram und LinkedIn (Linie 7) bis zum rechten Rand */
.fusszeile__urheber {
  grid-column: 7 / -1;
  padding-right: var(--innen);
}

@media (max-width: 1099.98px) {
  .fusszeile__karte {
    row-gap: 48px;
    border-radius: 4px;
    font-size: var(--t-m);
    line-height: var(--zh-m);
    letter-spacing: 0;
  }

  .fusszeile__ruf {
    grid-column: 1 / -1;
    margin-bottom: 0;
    padding-right: var(--innen);
  }

  /* Kontaktzeile: Überschrift darüber, Adresse und Knopf in voller Breite */
  .fusszeile__kontakt {
    margin-block: 0;
  }

  .fusszeile__kontakt-titel {
    grid-column: 1 / -1;
    margin-bottom: 12px;
    padding-top: 0;
  }

  .fusszeile__kontakt-zeile {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    padding-left: var(--innen);
  }

  /* Formular: Einleitung volle Breite darüber, Zeilen volle Breite
     (Feldname Sp. 1–2, Eingabe Sp. 3–12, Knopf Sp. 10–12) */
  .fusszeile__formular {
    margin-block: 0;
  }

  .formular__einleitung {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-bottom: 32px;
    padding-top: 0;
    padding-right: var(--innen);
  }

  .formular__form {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .formular__zeile::after {
    left: var(--innen);
  }

  .formular__name {
    grid-column: 1 / span 2;
    padding-left: var(--innen);
  }

  .formular__feld,
  .formular__fehler,
  .formular__meldung,
  .formular__statisch {
    grid-column: 3 / -1;
  }

  .formular__ende,
  .formular__senden--unten {
    grid-column: 3 / -1;
  }

  .formular__zeile--mit-knopf .formular__name::after {
    left: var(--innen);
  }

  .fusszeile__unten {
    row-gap: 48px;
    margin-bottom: 0;
    padding-top: 0;
  }

  .fusszeile__unten::before {
    content: none;
  }

  /* Untere Reihe in zwei Hälften: Sitemap · Projekte, darunter Soziales · Rechtliches mit Knöpfen */
  .fusszeile__sitemap,
  .fusszeile__soziales {
    grid-column: 1 / span 6;
    padding-left: var(--innen);
  }

  .fusszeile__projekte,
  .fusszeile__ecke {
    grid-column: 7 / span 6;
    padding-right: var(--innen);
  }

  /* Die Haarlinie wandert von der unteren Reihe über die Rechtszeile. */
  .fusszeile__rechtszeile {
    position: relative;
    row-gap: 4px;
    padding-top: 20px;
  }

  .fusszeile__rechtszeile::before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--innen);
    left: var(--innen);
    border-top: 1px solid var(--karte-linie);
  }

  .fusszeile__copyright,
  .fusszeile__urheber,
  .fusszeile__inhaber {
    grid-column: 1 / -1;
    padding-inline: var(--innen);
  }

  /* Gestapelt: ©, Inhaber, darunter der Urheberrechtshinweis mit etwas Luft */
  .fusszeile__urheber {
    margin-top: 12px;
  }
}

/* Schmal: die unteren Listen stehen untereinander; Impressum/Datenschutz und
   die Knöpfe teilen sich weiter eine Reihe. */
@media (max-width: 699.98px) {
  .fusszeile__sitemap,
  .fusszeile__projekte,
  .fusszeile__soziales,
  .fusszeile__ecke {
    grid-column: 1 / -1;
    padding-inline: var(--innen);
  }

  /* Formular: Feldname, Eingabe darunter, Knopf volle Breite */
  .formular__zeile {
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--spalt);
    padding-inline: var(--innen);
  }

  .formular__name,
  .formular__zeile--mit-knopf .formular__name {
    grid-column: 1;
    min-height: 0;
    padding-top: 14px;
    padding-left: 0;
  }

  /* Feld und Knopf werden wieder eigene Rasterzeilen (Knopf nach dem Fehlersatz),
     die Haarlinie ist wieder die der ganzen Zeile unter dem Knopf. */
  .formular__ende {
    display: contents;
  }

  .formular__zeile--mit-knopf::after {
    content: "";
  }

  .formular__zeile--mit-knopf .formular__name::after,
  .formular__zeile--mit-knopf .formular__feld::after {
    content: none;
  }

  .formular__feld,
  .formular__ende .formular__feld,
  .formular__fehler,
  .formular__meldung,
  .formular__statisch,
  .formular__senden,
  .formular__senden--unten {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  /* Der Knopf unter dem Nachrichtenfeld (nach dem Fehlersatz), über der Haarlinie */
  .formular__senden {
    grid-row: auto;
    order: 1;
    align-self: stretch;
    margin-top: 12px;
    padding-bottom: 12px;
  }

  .formular__feld--auswahl::after,
  .auswahl__liste {
    right: 0;
  }

  /* Der Hinweis darf hier auf zwei Zeilen umbrechen (2 × 20 px in 48 px, mittig) */
  .formular__hinweis {
    display: flex;
    align-items: center;
    max-width: calc(100% - 32px);
    line-height: inherit;
    white-space: normal;
    text-overflow: clip;
  }

  .formular__meldung,
  .formular__statisch,
  .formular__senden--unten {
    padding-inline: var(--innen);
  }

  /* Schmal: Knopf in voller Breite, Beschriftung mittig */
  .formular__knopf {
    width: 100%;
    text-align: center;
  }
}

/* ------------------------------------------------------------------------
   Danke (4.8): Bestätigung des Kontaktformulars. Titel und Satz wie auf der
   Fehlenden Seite (eine Größe, halbfett in Text, Buch in Text-2), hier in
   Spalte 1–6, darunter der Knopf zur Startseite. Steht hier, weil die
   Fußzeile und ihr Formular ebenfalls in basis.css liegen.
   ------------------------------------------------------------------------ */

.danke {
  align-items: start;
  padding-top: var(--abstand-sektion);
}

.danke__titel,
.danke__text {
  grid-column: 1 / span 6;
  font-size: var(--t-xl);
  line-height: var(--zh-xl);
  letter-spacing: var(--lw-xl);
  text-wrap: balance;
}

.danke__titel {
  font-weight: 600;
}

.danke__text {
  color: var(--text-2);
}

.danke__knopf {
  grid-column: 1 / span 6;
  justify-self: start;
  margin-top: 48px;
}

@media (max-width: 1099.98px) {
  .danke__titel,
  .danke__text,
  .danke__knopf {
    grid-column: 1 / span 8;
  }
}

@media (max-width: 699.98px) {
  .danke__titel,
  .danke__text,
  .danke__knopf {
    grid-column: 1 / -1;
  }

  .danke__knopf {
    margin-top: 32px;
  }
}

/* ------------------------------------------------------------------------
   Medium (Ausgabe von medium()): Bild, Video, Standbild
   ------------------------------------------------------------------------ */

.medium {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ar);
  border-radius: var(--radius);
  background: var(--farbe, transparent);
}

.medium picture,
.medium img,
.medium video {
  display: block;
  width: 100%;
  height: 100%;
}

.medium img,
.medium video {
  object-fit: cover;
}

/* Standbild liegt über dem Video und blendet aus, sobald es läuft. */
.medium--video video {
  position: absolute;
  inset: 0;
}

.medium__standbild {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity .4s ease-out;
}

.medium.laeuft .medium__standbild {
  opacity: 0;
}

/* In einem Träger gibt die Zelle das Verhältnis vor, das Medium füllt sie. */
.traeger > .medium {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* ------------------------------------------------------------------------
   Einblenden (5): Ausgangszustände nur mit JavaScript, mit Bewegung und
   solange das Element noch nicht da ist. Notbremse: html.einblenden-aus.
   ------------------------------------------------------------------------ */

html.js.bewegung:not(.einblenden-aus) [data-einblenden="hoch"]:not(.ist-da) {
  opacity: 0;
  transform: translateY(14px);
}

html.js.bewegung:not(.einblenden-aus) [data-einblenden="zeilen"]:not(.ist-da) {
  opacity: 0;
}

html.js.bewegung:not(.einblenden-aus) [data-einblenden="bild"]:not(.ist-da) {
  clip-path: inset(100% 0 0 0);
}

html.js.bewegung:not(.einblenden-aus) [data-einblenden="linie"]:not(.ist-da) {
  transform: scaleX(0);
  transform-origin: left center;
}

/* Zeilenmasken von SplitText: Luft für Unterlängen, ohne die Zeilen zu verschieben */
.zeile-mask {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

/* ------------------------------------------------------------------------
   Zeigeretikett (nur Maus)
   ------------------------------------------------------------------------ */

.zeiger {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .zeiger {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--text);
    color: var(--grund);
    font-size: var(--t-s);
    line-height: var(--zh-s);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-out;
  }

  .zeiger.ist-sichtbar {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------------
   Rasterhilfe (Taste G oder ?raster=1)
   ------------------------------------------------------------------------ */

.rasterhilfe {
  position: fixed;
  inset: 0;
  z-index: 1001;
  grid-template-rows: 100%;
  pointer-events: none;
}

.rasterhilfe i {
  background: rgba(255, 0, 90, .08);
}

/* ------------------------------------------------------------------------
   Seitenwechsel: weiche Überblendung, nur wenn Bewegung erwünscht ist
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .3s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .themenschalter__knopf,
  .menue,
  .medium__standbild {
    transition: none;
  }
}