/* =========================================================================
   BASIS — Schriften, Zurücksetzen, Grundtypografie, Layout-Grundformen,
   Barrierefreiheit.

   Reihenfolge im HTML: tokens.css → basis.css → komponenten.css
   ========================================================================= */

/* -------------------------------------------------------------------------
   SCHRIFTEN

   Selbst gehostet als WOFF2, latin-Subset (U+0000–00FF und Interpunktion).
   Damit sind Umlaute, ß und die deutschen Anführungszeichen „…" abgedeckt.
   `font-display: swap` zeigt sofort die Systemschrift und tauscht, sobald
   die Webschrift da ist — kein unsichtbarer Text beim Laden.
   ------------------------------------------------------------------------- */

/* Variable Fassungen: EINE Datei je Familie deckt den gesamten
   Gewichtsbereich von 100 bis 900 ab. Vorher waren es vier Dateien für vier
   feste Schnitte (600 und 700 für Archivo, 400 und 600 für Inter).

   Der Tausch kostet Ladelast, nicht spart er sie — nachgemessen:

     vorher   4 Dateien   74,7 KB
     jetzt    2 Dateien   81,2 KB      also gut neun Prozent mehr

   Das lohnt nur, weil die Zwischengewichte tatsächlich benutzt werden;
   sie stehen als --gewicht-* in tokens.css. Ein Gewicht mehr kostet bei
   einer variablen Schrift nichts, bei einer statischen eine ganze Datei.
   Wer die Abstufungen wieder auf 600 und 700 zurückdreht, sollte auch zu
   den vier festen Schnitten zurückkehren. */

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

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

/* -------------------------------------------------------------------------
   ZURÜCKSETZEN — nur was wirklich stört, kein Rundumschlag
   ------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  /* Scroll-Sprünge zu Ankern landen sonst unter dem klebenden Kopf. */
  scroll-padding-top: calc(var(--kopf-hoehe, 72px) + var(--abstand-s));
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--schrift-m);
  line-height: var(--zeilenhoehe-text);
  font-weight: 400;
  /* Auf Mobil sitzt unten eine feste Anruf-Leiste. Der Platz dafür wird
     hier reserviert, damit der Footer nicht darunter verschwindet.

     Der zweite Summand gehört dazu, weil die Leiste auf iPhones mit
     Home-Indikator um genau diesen Betrag höher ist als --leiste-hoehe: Sie
     legt sich unten env(safe-area-inset-bottom) an Polsterung zu, damit ihre
     Knöpfe nicht unter der Systemleiste liegen (siehe .mobilleiste in
     komponenten.css). Ohne den Summanden reserviert body 60px für eine
     Leiste, die 60px + Inset hoch ist — der Fußanfang wäre verdeckt.

     Auf allen anderen Geräten ist das Inset 0 und der Ausdruck ergibt
     unverändert --leiste-hoehe. */
  padding-bottom: calc(var(--leiste-hoehe, 0px) + env(safe-area-inset-bottom, 0px));

  /* Deutsche Komposita werden lang. „Dienstleistungs-Informations-
     pflichten-Verordnung" passt auf einem 360px-Display in keine Zeile
     und schiebt sonst die ganze Seite seitlich hinaus. Diese Regel
     greift nur dann, wenn ein Wort allein nicht in eine Zeile passt —
     im Normalfall wird also weiterhin an Wortgrenzen umbrochen. */
  overflow-wrap: break-word;
}

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

/* Bilder mit gesetztem width/height behalten ihr Seitenverhältnis, auch
   während sie noch laden — das verhindert Layout-Sprünge (CLS). */
img[width][height] {
  height: auto;
}

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

button {
  cursor: pointer;
}

ul,
ol {
  padding-left: 1.25em;
}

/* -------------------------------------------------------------------------
   TYPOGRAFIE
   ------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--schrift-headline);
  font-weight: var(--gewicht-headline);
  line-height: var(--zeilenhoehe-eng);
  color: var(--farbe-text-stark);
  /* Verhindert, dass ein einzelnes Wort allein auf der letzten Zeile steht. */
  text-wrap: balance;

  /* Schneidet den Leerraum weg, den jede Schriftdatei über und unter den
     Buchstaben mitbringt. Ohne das sitzt eine Überschrift optisch immer
     etwas zu tief: Der Abstand darüber sieht größer aus als der darunter,
     obwohl beide in den Zahlen gleich sind. Bei kleinen Größen fällt das
     nicht auf, bei 76 px im Hero sehr wohl.

     `cap alphabetic` misst von der Versalhöhe bis zur Grundlinie — das
     ist die Kante, die das Auge als Ober- und Unterkante liest, nicht die
     technische Zeilenbox.

     Browser ohne Unterstützung ignorieren beide Zeilen und stellen dar
     wie bisher. Es geht nichts kaputt, es sitzt nur weniger genau. */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

h1 { font-size: var(--schrift-h1); }
h2 { font-size: var(--schrift-h2); }
h3 { font-size: var(--schrift-h3); line-height: var(--zeilenhoehe-mittel); }
h4 { font-size: var(--schrift-h4); line-height: var(--zeilenhoehe-mittel); }

p,
li {
  max-width: var(--textbreite);
  text-wrap: pretty;
}

p + p {
  margin-top: var(--abstand-s);
}

/* Eine Überschrift, direkt gefolgt von Fließtext.

   Ohne diese Regel steht die Lücke auf null — `* { margin: 0 }` weiter
   oben nimmt jedem Element seinen Abstand, und `p + p` greift zwischen
   Überschrift und Absatz nicht. Solange Überschriften ihre Zeilenbox
   behielten, fiel das nicht weiter auf: Die halbe Zeilenhöhe unter der
   Grundlinie wirkte wie ein Abstand.

   Mit `text-box-trim` weiter oben ist diese Reserve weg. Der Kasten endet
   an der Grundlinie, und die Unterlänge eines „g" ragt darunter. Auf den
   Textseiten lag deshalb jede Zwischenüberschrift mit Unterlänge auf
   ihrem eigenen Absatz — „Haftung für Inhalte", „Hosting",
   „Verschlüsselung", „Änderungen dieser Erklärung" und sechs weitere.

   Gefunden hat das die Kollisionsprüfung in _vorschau-messung.html, am
   Tag ihres Einbaus. Von blossem Ansehen war es nicht aufgefallen.

   Elementspezifität mit Absicht: `.projekt__meta` setzt seine eigenen
   vier Pixel und behält sie, weil eine Klasse schwerer wiegt. Titel und
   Metazeile einer Projektkachel bleiben also so eng wie gewollt. */
:is(h1, h2, h3, h4) + p {
  margin-top: var(--abstand-s);
}

strong,
b {
  font-weight: var(--gewicht-betont);
}

/* Versalienzeile im Stil der Vorlagen — für Sektions-Kennzeichnungen. */
.versalien {
  font-family: var(--schrift-headline);
  font-weight: var(--gewicht-auszeichnung);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-eng);
}

/* Die gesperrte Zeile aus Vorlage 3: „ZUVERLÄSSIG. SAUBER. PROFESSIONELL." */
.gesperrt {
  font-family: var(--schrift-headline);
  font-weight: var(--gewicht-auszeichnung);
  font-size: var(--schrift-s);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-weit);
}

/* -------------------------------------------------------------------------
   LINKS

   Fließtextlinks sind unterstrichen — Farbe allein reicht als
   Unterscheidungsmerkmal nicht aus (WCAG 1.4.1).
   ------------------------------------------------------------------------- */

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

.inhalt a:not(.knopf):not(.kachel):not(.leise) {
  text-decoration-color: var(--farbe-akzent);
  text-decoration-thickness: 2px;
}

.inhalt a:not(.knopf):not(.kachel):not(.leise):hover {
  text-decoration-color: currentColor;
}

a.leise {
  text-decoration: none;
}

a.leise:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   FOKUS

   Sichtbar auf jedem Untergrund. Gelb als Fokusfarbe wäre auf Weiß mit
   1,75 : 1 unsichtbar — deshalb ist der Ring auf hellem Grund schwarz und
   nur innerhalb dunkler Sektionen gelb.
   ------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--radius-s);
}

/* Die Lightbox gehört hier dazu, obwohl sie keine Sektion ist: Sie legt
   sich fast schwarz über die ganze Seite. Ohne diese Zeile bekäme der
   Schließen-Knopf darin den schwarzen Ring aus der Regel oben — zwei Pixel
   Schwarz um einen gelben Knopf auf schwarzem Grund, praktisch unsichtbar.

   Aufgefallen beim Durchtabben durch die geöffnete Lightbox. Die
   Fokusprüfung findet das nicht: Sie prüft, ob ein Ring deklariert ist,
   nicht ob er sich von seinem Untergrund abhebt. Das steht als bekannte
   Grenze im Kopf von _vorschau-fokus.html. */
.sektion--dunkel :focus-visible,
.lightbox :focus-visible,
.fuss :focus-visible {
  outline-color: var(--farbe-fokus-dunkel);
}

/* Auf gelbem Grund bleibt der Ring schwarz (10,78 : 1). */
.sektion--gelb :focus-visible {
  outline-color: var(--farbe-fokus);
}

/* -------------------------------------------------------------------------
   HILFSKLASSEN
   ------------------------------------------------------------------------- */

/* Nur für Screenreader. Nicht display:none — das würde vorgelesen werden. */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink: unsichtbar bis er den Fokus bekommt. */
.sprunglink {
  position: absolute;
  top: var(--abstand-2xs);
  left: var(--abstand-2xs);
  z-index: 999;
  padding: var(--abstand-2xs) var(--abstand-s);
  background: var(--farbe-akzent);
  color: var(--farbe-text-stark);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
}

.sprunglink:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   LAYOUT-GRUNDFORMEN
   ------------------------------------------------------------------------- */

.inhalt {
  width: 100%;
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-inline: var(--seitenrand);
}

.inhalt--schmal {
  max-width: var(--inhalt-schmal);
}

/* Jede Sektion merkt sich ihre eigene Flächenfarbe in --sektion-flaeche.

   Das ist der Angelpunkt für die geschwungenen Übergänge weiter unten:
   Die Kante muss dieselbe Farbe haben wie die Sektion, zu der sie gehört.
   Über diese eine Variable holt sie sich die Farbe selbst — wer später
   eine neue Sektionsvariante anlegt, setzt --sektion-flaeche mit und
   bekommt den passenden Übergang geschenkt. */
.sektion {
  --sektion-flaeche: var(--farbe-grund);
  padding-block: var(--sektion-abstand);
}

/* Taktstufen. Vorher war jede Sektion gleich hoch — das ist der
   Hauptgrund, warum die Seite trotz sauberer Gestaltung flach wirkte.
   „eng" bindet zusammen, was zusammengehört, „weit" gibt dem Wichtigen
   Luft. Ohne Klasse bleibt alles wie bisher. */
.sektion--eng {
  padding-block: var(--sektion-eng);
}

.sektion--weit {
  padding-block: var(--sektion-weit);
}

.sektion--wechsel {
  --sektion-flaeche: var(--farbe-grund-wechsel);
  background: var(--sektion-flaeche);
}

.sektion--dunkel {
  --sektion-flaeche: var(--farbe-grund-dunkel);

  /* Der gedämpfte Text wird hier UMDEFINIERT statt an jeder Stelle
     einzeln überschrieben.

     --farbe-text-leise ist #6B6B6B und für hellen Grund gemessen: auf der
     Wechselfläche erreicht es 4,85 : 1. Auf Schwarz sind es 3,5 : 1 und
     damit zu wenig. Betroffen war alles, was diese Farbe benutzt —
     Bildunterschriften, Formularhinweise, Meta-Zeilen. Jede einzelne
     Stelle nachzuziehen hiesse, beim nächsten neuen Baustein wieder daran
     denken zu müssen.

     Weil die Variable innerhalb der Sektion neu gesetzt wird, erben alle
     Nachfahren automatisch das hellere Grau — auch solche, die es heute
     noch gar nicht gibt. */
  --farbe-text-leise: var(--farbe-text-leise-invers);

  position: relative;
  background: var(--sektion-flaeche);
  color: var(--farbe-text-invers);
}

/* Feine Putzstruktur auf der dunklen Fläche. Glattes Schwarz sieht nach
   Bildschirm aus, eine Körnung nach Material — und Putz ist hier das
   eigene Gewerk.

   Deckkraft bewusst niedrig. Die Struktur hellt die Fläche stellenweise
   bis etwa #2A2A2A auf; Weiß darauf erreicht immer noch rund 14 : 1 und
   liegt damit weit über der Grenze von 4,5. Wer den Wert erhöht, muss
   das nachrechnen.

   z-index trennt Struktur und Inhalt: Ohne das läge die Körnung über dem
   Text statt hinter ihm. */
.sektion--dunkel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--textur-putz);
  opacity: 0.28;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.sektion--dunkel > * {
  position: relative;
  z-index: 1;
}

.sektion--dunkel h1,
.sektion--dunkel h2,
.sektion--dunkel h3,
.sektion--dunkel h4 {
  color: var(--farbe-text-invers);
}

.sektion--gelb {
  --sektion-flaeche: var(--farbe-akzent);
  background: var(--sektion-flaeche);
  color: var(--farbe-text-stark);
}

.sektion--gelb h2,
.sektion--gelb h3 {
  color: var(--farbe-text-stark);
}

/* Was AUF der Akzentfläche steht, bringt seine eigene Farbe mit.

   Die Sektion setzt oben `color` — das erben aber nur Elemente, die selbst
   keine Farbe setzen. Ein sekundärer Knopf setzt sie (--farbe-text, also
   die zweitdunkelste Neutralstufe), und steht damit auf dem Akzent statt
   auf Weiß.

   Bei einem hellen Akzent geht das gerade noch auf. Bei einem dunkleren
   nicht mehr: In stile/solide-handwerklich.css erreicht #2C2523 auf
   #E8620E nur 4,4 : 1 — unter der Grenze von 4,5.

   Gefunden hat das die Kontrastprüfung im Browser, nicht die Paarliste in
   abnahme-pruefen.mjs. Die prüft --farbe-text-auf-akzent gegen
   --farbe-akzent und ist damit im Recht; diese Kombination stand auf
   keiner Liste. Genau dafür gibt es die zweite Prüfung.

   Die Regel „auf dem Akzent steht immer --farbe-text-auf-akzent" gilt
   damit auch für Bedienelemente darin. */
.sektion--gelb .knopf--sekundaer {
  color: var(--farbe-text-auf-akzent);
  border-color: var(--farbe-text-auf-akzent);
}

/* -------------------------------------------------------------------------
   ÜBERGÄNGE ZWISCHEN DEN SEKTIONEN

   Vorlage 3 trennt hell und dunkel nicht mit einer geraden Kante, sondern
   mit einem flachen Bogen. Das ist das auffälligste Erkennungsmerkmal des
   Werbemittels — und der Grund, warum es nach Gestaltung aussieht.

   Umgesetzt als Pseudoelement am oberen Rand der Sektion, das die Farbe
   der VORHERGEHENDEN Fläche trägt und sich in die neue hineinwölbt. Die
   Form macht border-radius, nicht eine Grafik: kein SVG, kein Request,
   und der Bogen skaliert stufenlos mit der Breite. Eine feste Pfadangabe
   in Pixeln könnte das nicht.

   Warum die Farbe der vorherigen Fläche und nicht der eigenen: So bleibt
   der Bogen innerhalb der eigenen Sektion. Ein Element, das nach oben
   herausragt, würde den Inhalt darüber überdecken und wäre je nach
   Nachbarschaft mal richtig und mal falsch eingefärbt.

   ANWENDUNG: eine der drei --von-Klassen dazusetzen, passend zu der
   Fläche, die darüber liegt. Bewusst nur an wenigen Stellen einsetzen —
   überall verwendet wird die Geste zur Masche.

     <section class="sektion sektion--dunkel sektion--bogen von-hell">
   ------------------------------------------------------------------------- */

.sektion--bogen,
.sektion--schraege {
  position: relative;
  /* Platz für die Wölbung, damit sie keinen Text überdeckt. */
  padding-top: calc(var(--sektion-abstand) + var(--uebergang-hoehe));

  /* HIER STAND EINMAL `overflow: clip`, und das war ein Fehler.

     Gedacht war es als Vorsicht, damit die Wölbung nicht seitlich
     hinausragt. Sie kann das gar nicht: Das Pseudoelement hat
     `inset-inline: 0` und endet exakt an den Rändern der Sektion.
     Nachgemessen — mit und ohne clip identische scrollWidth.

     Der Schaden war real. Ein Fokusring wird AUSSERHALB des Elements
     gezeichnet, hier zwei Pixel davor. Alles, was in dieser Sektion
     fokussierbar war und nah am Rand lag, verlor damit seinen sichtbaren
     Rahmen — man konnte mit der Tastatur bedienen, sah aber nicht mehr,
     worauf man gerade stand.

     Gefunden hat das ein Mensch beim Durchtabben, nicht das
     Prüfwerkzeug: Das prüft, ob eine Fokusregel existiert, nicht ob der
     Ring am Ende auch zu sehen ist. Seither prüft es beides. */
}

.sektion--bogen::before,
.sektion--schraege::before {
  content: "";
  position: absolute;
  /* Über der Putzstruktur der dunklen Sektion. Ohne das läge die Körnung
     auch auf der Kante und färbte sie ein — die helle Fläche darüber, aus
     der die Kante ihre Farbe nimmt, hat aber keine Struktur. Der Bogen
     berührt keinen Inhalt: Die Sektion hält oben genau seine Höhe frei. */
  z-index: 2;
  /* Nicht breiter als die Sektion — sonst entsteht seitlicher Überlauf,
     den _vorschau-messung.html zu Recht anmahnt. */
  inset-inline: 0;
  /* Ein Pixel nach oben heraus: verhindert die Haarlinie, die manche
     Browser beim Skalieren zwischen zwei Flächen stehen lassen. */
  top: -1px;
  background: var(--uebergang-von, var(--farbe-grund));
}

.sektion--bogen::before {
  height: var(--uebergang-hoehe);
  /* Asymmetrisch wie in der Vorlage. Eine exakte Halbellipse wirkt
     technisch gezeichnet, diese leichte Schieflage wirkt von Hand. */
  border-radius: 0 0 58% 42% / 0 0 100% 100%;
}

.sektion--schraege::before {
  height: var(--uebergang-hoehe);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Welche Fläche liegt darüber? */
.von-hell    { --uebergang-von: var(--farbe-grund); }
.von-wechsel { --uebergang-von: var(--farbe-grund-wechsel); }
.von-dunkel  { --uebergang-von: var(--farbe-grund-dunkel); }

/* Kopfblock einer Sektion: kleine Auszeichnungszeile, Überschrift, Vorspann */
.sektion__kopf {
  margin-bottom: var(--abstand-xl);
}

.sektion__auszeichnung {
  display: block;
  margin-bottom: var(--abstand-2xs);
  color: var(--farbe-akzent-text);
  font-family: var(--schrift-headline);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-auszeichnung);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-weit);
}

/* In dunklen Sektionen trägt die Auszeichnungszeile Gold (9,10 : 1) statt
   Gelb. Gelb bliebe dort zwar lesbar (10,78 : 1), ist aber die Farbe der
   Bedienelemente — man sieht auf einen Blick, was Beschriftung ist und was
   sich anklicken lässt. Genau diese Trennung macht den Unterschied
   zwischen der lauten Vorlage 2 und der ruhigen Vorlage 3. */
.sektion--dunkel .sektion__auszeichnung {
  color: var(--farbe-auszeichnung);
}

.sektion__vorspann {
  margin-top: var(--abstand-s);
  max-width: var(--textbreite);
  font-size: var(--schrift-l);
  color: var(--farbe-text-leise);
}

.sektion--dunkel .sektion__vorspann {
  color: var(--farbe-text-leise-invers);
}

/* -------------------------------------------------------------------------
   REDUZIERTE BEWEGUNG

   Wer im Betriebssystem „Bewegung reduzieren" gewählt hat, bekommt keine
   Animationen. Das ist keine Kür, sondern kann für Menschen mit
   vestibulären Störungen den Unterschied zwischen benutzbar und
   unbenutzbar ausmachen.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   SEITENÜBERGÄNGE

   Beim Klick auf einen Link blendet der Browser von einer Seite zur
   nächsten über, statt weiß aufzublitzen. Das ist der größte Sprung an
   gefühlter Wertigkeit, der hier ohne neue Abhängigkeit zu holen ist —
   und er kostet vier Zeilen.

   Kein JavaScript: Auslöser ist die Navigation selbst. Eine Bibliothek
   wie GSAP könnte das nicht leisten, sie setzte eine Single-Page-App
   voraus. Hier genügt eine Browserfunktion.

   Kopf, Fußzeile und die mobile Anrufleiste bekommen einen eigenen
   Namen und bleiben beim Wechsel stehen. Sie sind auf jeder Seite
   gleich — was gleich bleibt, soll nicht mitwandern. Genau das lässt
   21 einzelne Dateien wie einen zusammenhängenden Auftritt wirken.

   Browser ohne Unterstützung — zurzeit Firefox, dort in Arbeit —
   wechseln hart wie bisher. Es geht nichts verloren.

   Innerhalb von prefers-reduced-motion: Der Übergang entsteht gar nicht
   erst. Der allgemeine Block weiter oben greift hier nicht, weil er die
   ::view-transition-Pseudoelemente nicht erfasst.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  @view-transition {
    navigation: auto;
  }

  .kopf        { view-transition-name: kopf; }
  .fuss        { view-transition-name: fuss; }
  .mobilleiste { view-transition-name: mobilleiste; }

  /* Etwas länger als die Vorgabe von 250 ms und mit der Kurve des
     Projekts. Kürzer wirkt hektisch, länger wie eine Ladezeit. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: var(--verlauf);
  }
}

/* -------------------------------------------------------------------------
   DRUCK

   Handwerkskunden drucken Kontaktseiten tatsächlich aus. Navigation,
   Flächen und Bilder fallen weg, Links bekommen ihre Adresse angehängt.
   ------------------------------------------------------------------------- */

@media print {
  .kopf,
  .mobilleiste,
  .fuss__navigation,
  .sprunglink {
    display: none !important;
  }

  body {
    padding-bottom: 0;
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  .sektion {
    padding-block: 1rem;
  }

  .sektion--dunkel,
  .sektion--gelb,
  .sektion--wechsel {
    background: #fff !important;
    color: #000 !important;
  }

  .inhalt a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}