/* ============================================================================
   malerfirma sander – Stilvorlage
   ----------------------------------------------------------------------------
   Ein einziges CSS, von Hand gepflegt, kein Build-Schritt. Aufbau:
     1. Design-Tokens (Farben, Schriften, Abstände) – 1:1 aus der alten Seite
     2. Schriften (lokal, kein Google-CDN)
     3. Grundlagen (Typografie, Fokus, Umschlag)
     4. Bausteine (Schaltflächen, Abschnitte, Pinselstrich)
     5. Kopfbereich und Navigation
     6. Fußbereich und mobile Leiste
     7. Bewegung / prefers-reduced-motion
   ========================================================================== */

/* --- 1. Design-Tokens ----------------------------------------------------- */
:root {
  /* Farben – gemessen am Firmenlogo, WCAG-2.2-AA-geprüft (quellen/DESIGN.md) */
  --nacht: #16263f;
  /* Etwas dunkler als früher (#5b6472). Auf dem neuen grauen Untergrund
     erreichte der alte Ton nur 4,3:1 – zu wenig für Fließtext (nötig: 4,5:1).
     Jetzt 5,0:1 auf Grau und 7,0:1 auf Weiß. */
  --gedaempft: #4f5866;

  /* Flächenton (früher beige: Creme #f7f4ef / Sand #ece6dd).
     Auf Wunsch des Nutzers am 17.08.2026 auf ein neutrales Grau umgestellt. */
  --creme: #d9dada;
  --sand: #d9dada;

  /* Trennlinie für Kanten, die auf dem Flächenton liegen. Ohne sie wären sie
     unsichtbar, weil Fläche und Linie sonst denselben Wert hätten. */
  --linie: rgb(22 38 63 / 0.14);

  /* Rand von BEDIENELEMENTEN: Eingabefelder, Umriss-Knöpfe, Filter.
     Der Flächenton taugt dafür nicht – er erreicht auf Weiß nur 1,4:1, WCAG 2.2
     (Regel 1.4.11) verlangt für Bedienelemente 3:1. Dieser Ton erreicht 3,4:1.
     Karten, Trennlinien und Umrandungen von Flächen behalten bewusst den
     zarten Ton, sonst würde die Seite unruhig. */
  --rand-bedienung: #868d95;

  /* Farbe des Tastaturfokus. Auf den dunkelblauen Flächen wird sie weiter
     unten überschrieben: Magenta auf Nachtblau erreicht nur 2,3:1. */
  --fokus: #b4145f;

  /* Putzstruktur für die grauen Flächen. Die Datei liegt unter
     public/assets/img/putz-textur.jpg und wird gekachelt.
     Fehlt sie, bleibt einfach der glatte Grauton stehen – nichts geht kaputt.
     Kacheldichte über --putz-groesse steuern: kleiner = feinere Körnung. */
  --putz: url("../img/putz-textur.jpg");
  --putz-groesse: 150px;

  --magenta-500: #d81e78;
  --magenta-600: #b4145f;
  --magenta-700: #a2114f;

  --petrol-500: #138a78;
  --petrol-600: #0e6b5d;

  --gold: #f5c518;

  --weiss: #fff;

  /* Schriften */
  --schrift-text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-display: Fraunces, Georgia, serif;

  /* Fluide Größen: wachsen mit der Bildschirmbreite */
  --groesse-h1: clamp(2.25rem, 1.55rem + 3.2vw, 3.5rem);
  --groesse-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.5rem);
  --groesse-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --groesse-vorspann: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --groesse-text: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

  /* Abstände (4-px-System) */
  --a-1: 0.25rem;
  --a-2: 0.5rem;
  --a-3: 0.75rem;
  --a-4: 1rem;
  --a-6: 1.5rem;
  --a-8: 2rem;
  --a-12: 3rem;
  --a-16: 4rem;
  --a-24: 6rem;

  --radius: 0.75rem;
  --radius-gross: 1.25rem;

  --umschlag-breite: 72rem; /* 1152 px Inhalt + Innenabstand = ca. 1200 px */
  --kopf-hoehe: 4rem;
}

/* --- 2. Schriften (lokal gehostet, kein Google-CDN) ----------------------- */
@font-face {
  font-family: Fraunces;
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 3. Grundlagen -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: 1.6;
  color: var(--nacht);
  background: var(--weiss);
  /* Platz für die mobile Leiste am unteren Rand */
  padding-bottom: 4.5rem;
}

@media (min-width: 48em) {
  body {
    padding-bottom: 0;
  }
}

h1,
h2,
h3 {
  font-family: var(--schrift-display);
  /* Fraunces steht ohne Angabe auf 900 und optisch auf 9 pt – beides muss
     ausdrücklich gesetzt werden, sonst wirkt jede Überschrift zu fett. */
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.15;
  margin: 0 0 var(--a-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--groesse-h1);
  line-height: 1.12;
}
h2 {
  font-size: var(--groesse-h2);
}
h3 {
  font-size: var(--groesse-h3);
  line-height: 1.3;
}

p {
  margin: 0 0 var(--a-4);
  max-width: 68ch;
}

a {
  color: var(--magenta-600);
  text-underline-offset: 0.15em;
}
a:hover {
  color: var(--magenta-700);
}

img {
  max-width: 100%;
  height: auto;
}

code {
  font-size: 0.9em;
  background: var(--sand);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}

::selection {
  background: var(--magenta-600);
  color: var(--weiss);
}

/* Tastatur-Fokus überall deutlich sichtbar */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Auf dunklem Grund wird der Ring gold: Magenta käme dort nur auf 2,3:1,
   Gold auf 9,3:1. Der Wert vererbt sich an alles, was darin liegt. */
.band--dunkel,
.fuss,
.mobilnav,
.adminkopf {
  --fokus: var(--gold);
}

/* Sprunglink: unsichtbar, bis er mit Tab angesteuert wird */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: var(--a-3);
  top: var(--a-3);
  background: var(--magenta-600);
  color: var(--weiss);
  padding: var(--a-2) var(--a-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

main:focus {
  outline: none;
}

.umschlag {
  width: 100%;
  max-width: var(--umschlag-breite);
  margin-inline: auto;
  padding-inline: var(--a-4);
}

/* --- 4. Bausteine --------------------------------------------------------- */

.band {
  padding-block: var(--a-12);
}
@media (min-width: 48em) {
  .band {
    padding-block: var(--a-24);
  }
}

/* Graue Flächen bekommen die Putzstruktur. Bewusst nur die großen Flächen –
   auf Symbolkästchen oder Statusmarken würde die Körnung nur unruhig wirken. */
.band--creme,
.kennzahlenband {
  background-color: var(--creme);
  background-image: var(--putz);
  background-repeat: repeat;
  background-size: var(--putz-groesse) auto;
}

.band--dunkel {
  background: var(--nacht);
  color: var(--weiss);
}
/* Textlinks auf dunklem Grund werden gold – Schaltflächen ausdrücklich NICHT,
   sonst stünde goldene Schrift auf magentafarbenem Grund (zu wenig Kontrast). */
.band--dunkel a:not(.knopf) {
  color: var(--gold);
}

.kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta-600);
  margin-bottom: var(--a-2);
}
.band--dunkel .kicker {
  color: var(--gold);
}

.vorspann {
  font-size: var(--groesse-vorspann);
  color: var(--gedaempft);
}
.band--dunkel .vorspann {
  color: rgb(255 255 255 / 0.8);
}

.hinweis {
  color: var(--gedaempft);
  font-size: 0.95rem;
}

/* Pinselstrich unter der Überschrift – dekoratives Logo-Motiv */
.mit-pinsel::after {
  content: "";
  display: block;
  width: 7rem;
  height: 0.75rem;
  margin-top: var(--a-2);
  background-color: var(--magenta-500);
  -webkit-mask: var(--pinsel) no-repeat center / 100% 100%;
  mask: var(--pinsel) no-repeat center / 100% 100%;
}
.mit-pinsel--gold::after {
  background-color: var(--gold);
}
:root {
  --pinsel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C20 4.5 44 3 62 4.2c17 1.1 35 2.6 54 1.3 1.9-.1 2.6 1.6 1 2.3-11 4.6-38 3.9-58 3.2-19-.7-40 .4-55-.4-2.3-.1-3.4-1.5-2-2.1Z' fill='%23000'/%3E%3C/svg%3E");
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3);
  margin-top: var(--a-6);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; /* 44 px Mindest-Tippfläche */
  padding: var(--a-2) var(--a-4);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.knopf--primaer {
  background: var(--magenta-600);
  color: var(--weiss);
}
.knopf--primaer:hover {
  background: var(--magenta-700);
  color: var(--weiss);
}

.knopf--umriss {
  border: 1px solid var(--rand-bedienung);
  color: var(--nacht);
}
.knopf--umriss:hover {
  border-color: var(--nacht);
  color: var(--nacht);
}

.knopf--umriss-hell {
  border: 1px solid rgb(255 255 255 / 0.35);
  color: var(--weiss);
}
.knopf--umriss-hell:hover {
  color: var(--weiss);
  border-color: var(--weiss);
}

/* --- 5. Kopfbereich und Navigation ---------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.95);
  border-bottom: 1px solid var(--sand);
  backdrop-filter: blur(8px);
}

.kopf__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4);
  height: var(--kopf-hoehe);
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}
.marke__logo {
  height: 2.25rem;
  width: auto;
}
.marke__text {
  line-height: 1.2;
}
.marke__name {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: 1.125rem;
  color: var(--nacht);
}
.marke__claim {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.hauptnav {
  display: none;
  align-items: center;
  gap: var(--a-6);
}
@media (min-width: 48em) {
  .hauptnav {
    display: flex;
  }
}

.hauptnav__link,
.hauptnav__telefon {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nacht);
  text-decoration: none;
  transition: color 0.2s ease;
}
.hauptnav__telefon {
  font-weight: 600;
}
.hauptnav__link:hover,
.hauptnav__telefon:hover,
.hauptnav__link.ist-aktiv {
  color: var(--magenta-600);
}

.menuknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border: 0;
  background: none;
  color: var(--nacht);
  border-radius: var(--radius);
  cursor: pointer;
}
@media (min-width: 48em) {
  .menuknopf {
    display: none;
  }
}
.menuknopf svg {
  height: 1.5rem;
  width: 1.5rem;
}
.menuknopf__zu {
  display: none;
}
.menuknopf[aria-expanded="true"] .menuknopf__auf {
  display: none;
}
.menuknopf[aria-expanded="true"] .menuknopf__zu {
  display: block;
}

.mobilnav {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--kopf-hoehe));
  padding: var(--a-8) var(--a-6);
  background: var(--nacht);
}
.mobilnav[hidden] {
  display: none;
}
@media (min-width: 48em) {
  .mobilnav {
    display: none;
  }
}

.mobilnav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
}
.mobilnav__link {
  display: block;
  padding: var(--a-3);
  border-radius: var(--radius);
  font-family: var(--schrift-display);
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--weiss);
  text-decoration: none;
}
.mobilnav__link:hover,
.mobilnav__link.ist-aktiv {
  color: var(--gold);
}
.mobilnav__unter {
  list-style: none;
  margin: var(--a-2) 0 var(--a-3);
  padding: 0 0 0 var(--a-3);
  display: flex;
  flex-direction: column;
  gap: var(--a-1);
  border-left: 1px solid rgb(255 255 255 / 0.2);
}
.mobilnav__unterlink {
  display: block;
  padding: var(--a-2) var(--a-3);
  border-radius: var(--radius);
  font-size: 1rem;
  color: rgb(255 255 255 / 0.85);
  text-decoration: none;
}
.mobilnav__unterlink:hover,
.mobilnav__unterlink.ist-aktiv {
  color: var(--gold);
}
.mobilnav__adresse {
  margin-top: var(--a-6);
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.75);
}
/* Das Menü ist jetzt länger als der Bildschirm – es muss scrollen dürfen. */
.mobilnav {
  overflow-y: auto;
}
/* Seit das Menue Leistungen, Karriere und die Anschrift enthaelt, ist es
   laenger als der Bildschirm. Die beiden Knoepfe bleiben deshalb am unteren
   Rand kleben, statt nach unten aus dem Bild zu wandern. */
.mobilnav__fuss {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: var(--a-4);
  padding-bottom: var(--a-2);
  background: var(--nacht);
  box-shadow: 0 -0.75rem 0.75rem var(--nacht);
  display: grid;
  gap: var(--a-3);
}
.mobilnav__fuss .knopf {
  width: 100%;
  min-height: 3rem;
}

/* --- 6. Fußbereich und mobile Leiste -------------------------------------- */

.fuss {
  background: var(--nacht);
  color: var(--weiss);
}

.fuss__raster {
  display: grid;
  gap: var(--a-8);
  padding-block: var(--a-12);
}
@media (min-width: 40em) {
  .fuss__raster {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64em) {
  .fuss__raster {
    grid-template-columns: repeat(4, 1fr);
  }
}

.marke--fuss {
  color: var(--weiss);
}
.marke--fuss .marke__name {
  color: var(--weiss);
}

.fuss__claim {
  margin-top: var(--a-4);
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.75);
}

.fuss__social {
  display: inline-flex;
  align-items: center;
  gap: var(--a-2);
  margin-top: var(--a-4);
  padding-block: 0.2rem;
  min-height: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.85);
  text-decoration: none;
}
.fuss__social:hover {
  color: var(--gold);
}
.fuss__social svg {
  height: 1.25rem;
  width: 1.25rem;
}

/* Kleiner Titel in Versalien. Hieß früher nur .fuss__titel und wurde trotzdem
   außerhalb des Fußbereichs verwendet – wer den Fußbereich änderte, änderte
   unbemerkt die Projektseite mit. Beide Namen gelten, bis alles umgestellt ist. */
.kleintitel,
.fuss__titel {
  font-family: var(--schrift-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--a-3);
}

.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
  font-size: 0.875rem;
}
.fuss__liste a,
.fuss__recht a {
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
  /* Mindestgröße für Tippziele (WCAG 2.2 AA, 2.5.8): die Zeilenhöhe allein
     ergibt nur 17 px – mit dem Innenabstand werden es 24 px. */
  display: inline-block;
  padding-block: 0.2rem;
  min-height: 1.5rem;
}
.fuss__liste a:hover {
  color: var(--weiss);
}

.fuss__adresse {
  font-style: normal;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.8);
}
.fuss__adresse p {
  margin-bottom: var(--a-2);
}
.fuss__adresse a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding-block: 0.2rem;
  min-height: 1.5rem;
}
.fuss__adresse a:hover {
  color: var(--weiss);
}

.fuss__unten {
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.fuss__unten-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-2);
  padding-block: var(--a-4);
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.6);
}
.fuss__unten-zeile p {
  margin: 0;
}
.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2) var(--a-4);
}
.fuss__recht a {
  color: inherit;
  text-decoration: none;
}
.fuss__recht a:hover {
  color: var(--weiss);
}

/* Mobile Leiste unten: Anrufen · Angebot anfragen */
.mobilbalken {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a-2);
  padding: var(--a-2);
  padding-bottom: max(var(--a-2), env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.95);
  border-top: 1px solid var(--sand);
  backdrop-filter: blur(8px);
}
.mobilbalken--einzeln {
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .mobilbalken {
    display: none;
  }
}

/* --- 7. Seiteninhalte ----------------------------------------------------- */

.band--sand {
  background: var(--sand);
}
.band--schmal {
  padding-block: var(--a-8);
}
.abschnitt-kopf {
  margin-bottom: var(--a-8);
  max-width: 42rem;
}
.abschnitt-kopf .vorspann {
  margin-top: var(--a-4);
  margin-bottom: 0;
}
.abschnitt-kopf--mittig {
  margin-inline: auto;
  text-align: center;
}
.abschnitt-kopf--mittig .mit-pinsel::after {
  margin-inline: auto;
}

/* Nur für Screenreader – sichtbar ist die Angabe daneben. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.textlink {
  display: inline-block;
  padding-block: 0.15rem;
  min-height: 1.5rem;
  font-weight: 600;
  color: var(--magenta-600);
  text-decoration: none;
}
.textlink:hover {
  color: var(--magenta-700);
}

/* Abschnittskopf und Beistelllink in einer Zeile (Startseite: Projekte) */
.kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--a-4);
}
.kopfzeile__link {
  display: none;
  margin-bottom: var(--a-8);
}
.nur-mobil-mittig {
  margin-top: var(--a-6);
  margin-bottom: 0;
  text-align: center;
}
@media (min-width: 40em) {
  .kopfzeile__link {
    display: inline-block;
  }
  .nur-mobil-mittig {
    display: none;
  }
}

/* Goldene Sterne – Dekoration, die Bewertung steht als Text daneben. */
.sterne {
  color: var(--gold);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0.5px rgb(22 38 63 / 0.35);
}
.band--dunkel .sterne {
  -webkit-text-stroke: 0;
}
.textspalte {
  max-width: 46rem;
}

/* Fließtext aus den Inhaltsdateien */
.fliesstext > :first-child {
  margin-top: 0;
}
.fliesstext h1 {
  margin-bottom: var(--a-6);
}
.fliesstext h2 {
  margin-top: var(--a-8);
  font-size: var(--groesse-h3);
}
.fliesstext h3 {
  margin-top: var(--a-6);
}
.fliesstext ul {
  margin: 0 0 var(--a-4);
  padding-left: 1.2em;
}
.fliesstext li {
  margin-bottom: var(--a-2);
  max-width: 68ch;
}

/* Hero */
.hero {
  overflow: hidden;
  background: var(--weiss);
}
.hero__inhalt {
  display: grid;
  gap: var(--a-8);
  align-items: center;
  padding-block: var(--a-12);
}
@media (min-width: 40em) {
  .hero__inhalt {
    padding-top: var(--a-16);
  }
}
@media (min-width: 64em) {
  .hero__inhalt {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
/* Textspalte über den Farbfleck legen, damit nichts überdeckt wird. */
.hero__inhalt > div:first-child {
  position: relative;
  z-index: 1;
}

.hero__bewertung {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gedaempft);
  margin-bottom: var(--a-4);
}
.hero h1 {
  margin-bottom: 0;
}
.hero__vorspann {
  margin-top: 1.25rem;
  max-width: 36rem;
}
.hero .knopfreihe {
  margin-top: var(--a-8);
}
.hero__merkmale {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2) 1.25rem;
  margin: var(--a-8) 0 0;
  padding: 0;
}
.hero__merkmale li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nacht);
}
.hero__merkmale svg {
  width: 1rem;
  height: 1rem;
  color: var(--petrol-600);
  flex-shrink: 0;
}
.hero__zeichen {
  display: none;
}
@media (min-width: 64em) {
  .hero__zeichen {
    display: flex;
    justify-content: center;
  }
  /* Statt der grauen Fläche liegt jetzt ein gemalter Farbfleck hinter dem
     Logo. Er ist bewusst breiter als seine Spalte und läuft nach rechts aus
     dem Bild – deshalb hat .hero ein overflow: hidden. Seitenverhältnis fest,
     damit der Fleck nicht verzerrt.
     Der Fleck liegt HINTER dem Text (z-index), sonst würde er die Überschrift
     überdecken. Seine Deckkraft ist gedeckelt, damit Text darüber lesbar
     bleibt: gedämpfter Text kommt dort noch auf 5,1:1. */
  .hero__zeichen {
    position: relative;
    z-index: 0;
    justify-content: center;
  }
  .hero__zeichen-fleck {
    display: grid;
    place-items: center;
    /* Deutlich größer als das Logo, bleibt aber in seiner Spalte – so wächst
       der Hero nicht in die Höhe und nichts läuft aus dem Bild. */
    width: min(30rem, 34vw);
    aspect-ratio: 700 / 576;
    background: url("../img/farbfleck.png") no-repeat center / 100% 100%;
  }
  .hero__zeichen img {
    height: 14rem;
    width: auto;
  }
}
.knopf--gross {
  min-height: 3rem;
  padding-inline: var(--a-6);
  font-size: 1rem;
}

/* Kennzahlenband unter dem Hero.
   Die vier Zahlen standen vorher flach auf dem Band und gingen unter. Jetzt
   sitzen sie in weißen Karten – dieselbe Machart wie die Leistungs- und
   Wertekarten: weiß, 1 px Rand, gleicher Eckenradius, kein Schatten. Sie
   bleiben vollständig innerhalb des Bandes. */
.kennzahlenband {
  background-color: var(--creme);
  border-top: 1px solid var(--linie);
}
/* Zahlenband und Leistungen gehören optisch zusammen. Ohne diese Regel stünden
   zwischen ihnen der Innenabstand des Bandes und der des nächsten Abschnitts,
   zusammen bis zu 8 rem. */
.hero + .band {
  padding-top: var(--a-8);
}
@media (min-width: 48em) {
  .hero + .band {
    padding-top: var(--a-12);
  }
}
.kennzahlen {
  /* Nur die senkrechten Abstände nullen! Ein pauschales margin:0 würde das
     margin-inline:auto von .umschlag löschen – die Zahlen klebten dann auf
     breiten Bildschirmen am linken Rand, während alles andere zentriert ist. */
  margin-block: 0;
  padding-block: var(--a-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a-4);
}
@media (min-width: 40em) {
  .kennzahlen {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--a-6);
  }
}
/* Reihenfolge im Quelltext: erst die Bezeichnung (dt), dann der Wert (dd) –
   so herum ist es für Vorleseprogramme richtig. Angezeigt wird der Wert oben,
   deshalb dreht column-reverse die Darstellung um. */
.kennzahlen > div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--a-1);
  text-align: center;
  padding: var(--a-4) var(--a-3);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}
.kennzahlen dd,
.kennzahlen dt {
  margin: 0;
}
.kennzahlen__wert {
  font-family: var(--schrift-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
  color: var(--magenta-500);
  line-height: 1.15;
}
.kennzahlen .kennzahlen__label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--gedaempft);
}

/* Raster für Karten */
.raster {
  display: grid;
  gap: var(--a-6);
}
@media (min-width: 40em) {
  .raster--zwei,
  .raster--drei {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64em) {
  .raster--drei {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Unterschiedlich lange Zitate sollen nicht auf gleiche Höhe gestreckt werden. */
.raster--oben {
  align-items: start;
}

/* Karten */
.karte {
  display: block;
  background: var(--weiss);
  border: 1px solid var(--sand);
  border-radius: var(--radius-gross);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
a.karte:hover {
  border-color: rgb(180 20 95 / 0.35);
  box-shadow: 0 8px 24px rgb(22 38 63 / 0.08);
  transform: translateY(-2px);
}
.karte--leistung {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--a-6);
}
.karte--leistung .karte__text {
  flex: 1;
}
.karte__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: var(--creme);
  color: var(--petrol-600);
  margin-bottom: var(--a-4);
  transition: background-color 0.2s ease, color 0.2s ease;
}
a.karte--leistung:hover .karte__icon,
a.karte--leistung:focus-visible .karte__icon {
  background: var(--magenta-600);
  color: var(--weiss);
}
.leistungsicon {
  width: 1.75rem;
  height: 1.75rem;
}
.leistung__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  background: var(--creme);
  color: var(--magenta-600);
  margin-bottom: var(--a-4);
}
.leistung__icon .leistungsicon {
  width: 2rem;
  height: 2rem;
}
.karte__titel {
  font-size: var(--groesse-h3);
  margin-bottom: var(--a-2);
}
.karte__text {
  color: var(--gedaempft);
  font-size: 0.95rem;
  margin-bottom: 0;
}
.karte__rolle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--magenta-600);
  margin-bottom: var(--a-2);
}
.karte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: var(--a-4);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--magenta-600);
}
.karte__mehr svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
a.karte--leistung:hover .karte__mehr {
  color: var(--magenta-700);
}
a.karte--leistung:hover .karte__mehr svg {
  transform: translateX(2px);
}

/* Projektkarte */
.karte--projekt {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.karte__bild {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--sand);
  overflow: hidden;
}
.karte__bild picture,
.karte__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
a.karte--projekt:hover .karte__bild img {
  transform: scale(1.03);
}
.karte__marke {
  position: absolute;
  bottom: var(--a-3);
  left: var(--a-3);
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--a-1) var(--a-2);
  border-radius: 999px;
  background: rgb(22 38 63 / 0.8);
  color: var(--weiss);
}
.karte__inhalt {
  display: block;
  flex: 1;
  padding: 1.25rem;
}
a.karte--projekt:hover .karte__titel {
  color: var(--magenta-700);
}
.karte__tags {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petrol-600);
  margin-bottom: var(--a-2);
}
/* Werte- und Teamkarten */
/* Rückt einen Abschnitt näher an den vorherigen heran, ohne sonst etwas zu
   ändern. Verwendet auf „Über uns": Der Werteblock gehört inhaltlich zum Absatz
   darüber, stand aber eine volle Abschnittslänge entfernt. */
.band--eng-oben {
  padding-top: var(--a-8);
}

/* Weiß mit feiner Kante statt grauer Fläche: Auf dem grauen Band hoben sich die
   Karten vorher kaum ab. Machart jetzt wie bei den Leistungs- und Teamkarten. */
.wertkarte {
  height: 100%;
  padding: var(--a-6);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background-color: var(--weiss);
}
/* Haken wie in der Merkmalszeile des Hero. Schriftfarbe bewusst unverändert:
   dieselbe wie bei allen anderen Kartenüberschriften. */
.wertkarte__titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  margin-bottom: var(--a-2);
}
.wertkarte__haken {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--petrol-600);
}
.wertkarte p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gedaempft);
  margin-bottom: 0;
}

.team__titel {
  margin-top: 3.5rem;
  margin-bottom: var(--a-6);
  font-size: var(--groesse-h3);
}
.team__titel--gross {
  font-size: var(--groesse-h2);
}

.teamkarte {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--sand);
  border-radius: var(--radius-gross);
  background: var(--weiss);
}
.teamkarte picture,
.teamkarte img {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-gross);
  object-fit: cover;
  object-position: center 20%;
}
.teamkarte__name {
  font-family: var(--schrift-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0;
}
.teamkarte__rolle {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--petrol-600);
  margin: 0;
}
.teamkarte__text {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--gedaempft);
}

/* Ablauf in drei Schritten */
.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--a-6);
}
@media (min-width: 48em) {
  .ablauf {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ablauf li {
  height: 100%;
  padding: var(--a-6);
  border: 1px solid var(--sand);
  border-radius: var(--radius-gross);
  background: var(--weiss);
}
.ablauf__nummer {
  font-family: var(--schrift-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--magenta-500);
}
.ablauf h3 {
  font-size: 1.125rem;
  margin: var(--a-3) 0 var(--a-2);
}
.ablauf p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gedaempft);
  margin-bottom: 0;
}

/* Kundenstimmen */
.stimme {
  margin: 0;
  padding: var(--a-6);
  border-radius: var(--radius-gross);
  background: rgb(255 255 255 / 0.05);
}
.stimme .sterne {
  margin: 0;
}
.stimme blockquote {
  margin: var(--a-3) 0 var(--a-4);
  line-height: 1.7;
  color: rgb(255 255 255 / 0.9);
}
.stimme figcaption {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.7);
}

/* Über uns */
.ueber {
  display: grid;
  gap: var(--a-8);
  align-items: center;
}
@media (min-width: 64em) {
  .ueber {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ueber .abschnitt-kopf {
  margin-bottom: 0;
}
.ueber__bild {
  margin: 0;
}
.ueber__bild img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-gross);
  object-fit: cover;
}

/* Brotkrumen */
/* Vorschau eines Entwurfs: unübersehbar, damit niemand glaubt, die Seite sei
   bereits öffentlich. */
.entwurfsband {
  background: var(--gold);
  color: var(--nacht);
  font-size: 0.95rem;
  padding-block: var(--a-3);
}
.entwurfsband a {
  color: var(--nacht);
}

.brotkrumen {
  padding-block: var(--a-4);
  border-bottom: 1px solid var(--sand);
  font-size: 0.85rem;
  color: var(--gedaempft);
}
.brotkrumen a {
  color: var(--gedaempft);
  text-decoration: none;
  /* Mindestgröße für Tippziele (WCAG 2.2, 2.5.8) – wie im Fußbereich. */
  display: inline-block;
  padding-block: 0.2rem;
  min-height: 1.5rem;
}
.brotkrumen a:hover {
  color: var(--magenta-600);
}

/* Filter der Projektübersicht */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
  margin-bottom: var(--a-8);
}
.filter__knopf {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--a-2) var(--a-4);
  border: 1px solid var(--rand-bedienung);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--nacht);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.filter__knopf:hover {
  border-color: var(--magenta-600);
  color: var(--magenta-600);
}
.filter__knopf.ist-aktiv {
  background: var(--magenta-600);
  border-color: var(--magenta-600);
  color: var(--weiss);
}
.filter__leer {
  color: var(--gedaempft);
  margin-top: var(--a-6);
}

/* Projektdetail */
.projekt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-4);
  font-size: 0.9rem;
  color: var(--gedaempft);
  margin-bottom: 0;
}
.projekt__spalten {
  display: grid;
  gap: var(--a-8);
}
@media (min-width: 64em) {
  .projekt__spalten {
    grid-template-columns: 1.6fr 1fr;
  }
}
.projekt__seitenspalte .kleintitel {
  color: var(--gedaempft);
  margin-top: var(--a-6);
}
.projekt__seitenspalte .kleintitel:first-child {
  margin-top: 0;
}
.tagliste {
  list-style: none;
  margin: 0 0 var(--a-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
}
.tagliste a {
  display: inline-block;
  padding: var(--a-1) var(--a-3);
  border-radius: 999px;
  background: var(--creme);
  border: 1px solid var(--sand);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.ausfuehrende {
  list-style: none;
  margin: 0 0 var(--a-4);
  padding: 0;
  display: grid;
  gap: var(--a-3);
}
.ausfuehrende li {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  font-size: 0.9rem;
}
.ausfuehrende img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 20%;
}

/* Vorher-/Nachher-Vergleich
   Grundzustand OHNE JavaScript: beide Bilder untereinander, beschriftet, kein
   toter Regler. Erst das Skript setzt die Klasse „ist-aktiv" und macht daraus
   den überlagerten Schieberegler. So gibt es kein Aufblitzen des falschen
   Zustands, wenn das Skript langsam lädt. */
.vergleich {
  --pos: 50%;
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.vergleich__ebene picture,
.vergleich__ebene img {
  width: 100%;
  height: auto;
  display: block;
}
.vergleich__ebene--vorher {
  margin-top: var(--a-3);
}
.vergleich__marke {
  display: inline-block;
  margin-bottom: var(--a-2);
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--a-1) var(--a-3);
  border-radius: 999px;
  background: rgb(22 38 63 / 0.8);
  color: var(--weiss);
}
.vergleich__linie,
.vergleich__griff,
.vergleich__hinweis {
  display: none;
}

/* Seitenverhältnis kommt vom Nachher-Bild (setzt das Skript), die 4:3 sind der
   Rückfall. Zusätzlich eine Höhengrenze: Ein hochkant aufgenommenes Foto füllte
   sonst mehrere Bildschirme. Weil die Breite auf „auto" steht, wird das Bild
   dann schmaler statt beschnitten und steht mittig. */
.vergleich.ist-aktiv {
  position: relative;
  aspect-ratio: var(--verhaeltnis, 4 / 3);
  max-height: 26rem;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  background: var(--sand);
  touch-action: pan-y;
  user-select: none;
}
@media (min-width: 48em) {
  .vergleich.ist-aktiv {
    max-height: 32rem;
  }
}
.vergleich.ist-aktiv .vergleich__ebene {
  position: absolute;
  inset: 0;
  margin: 0;
}
.vergleich.ist-aktiv .vergleich__ebene picture,
.vergleich.ist-aktiv .vergleich__ebene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vergleich.ist-aktiv .vergleich__ebene--vorher {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.vergleich.ist-aktiv .vergleich__marke {
  position: absolute;
  top: var(--a-3);
  z-index: 3;
  margin: 0;
}
.vergleich.ist-aktiv .vergleich__marke--links {
  left: var(--a-3);
}
.vergleich.ist-aktiv .vergleich__marke--rechts {
  right: var(--a-3);
}
.vergleich.ist-aktiv .vergleich__linie {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 4;
  width: 2px;
  transform: translateX(-50%);
  background: var(--weiss);
  box-shadow: 0 0 8px rgb(0 0 0 / 0.4);
}
.vergleich.ist-aktiv .vergleich__griff {
  display: flex;
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 5;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: var(--weiss);
  color: var(--nacht);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
  cursor: ew-resize;
}
.vergleich__griff svg {
  width: 1.25rem;
  height: 1.25rem;
}
.vergleich.ist-aktiv ~ .vergleich__hinweis,
.ist-aktiv + .vergleich__hinweis {
  display: block;
  margin-top: var(--a-3);
  margin-bottom: 0;
}

/* Kontaktseite */
.kontakt {
  display: grid;
  gap: var(--a-6);
  align-items: start;
}
@media (min-width: 64em) {
  .kontakt {
    grid-template-columns: 1.4fr 1fr;
  }
}
.kontakt__spalte {
  display: grid;
  gap: var(--a-6);
}
.karte--formular {
  padding: var(--a-6);
}
@media (min-width: 40em) {
  .karte--formular {
    padding: var(--a-8);
  }
}
.karte--kontakt {
  padding: var(--a-6);
  font-style: normal;
}
.karte__titel-klein {
  font-size: 1.125rem;
  margin-bottom: var(--a-2);
}
.kontakt__knoepfe {
  display: grid;
  gap: var(--a-3);
  margin-top: var(--a-4);
}
.kontakt__knoepfe .knopf {
  min-height: 3rem;
  overflow-wrap: anywhere;
}

/* Formular */
.formular {
  display: grid;
  gap: var(--a-4);
}
.formular__titel {
  font-size: 1.125rem;
  margin: 0;
}
.formular__zeile {
  display: grid;
  gap: var(--a-4);
}
@media (min-width: 40em) {
  .formular__zeile {
    grid-template-columns: repeat(2, 1fr);
  }
}
.formular__feld label {
  display: block;
  margin-bottom: var(--a-1);
  font-size: 0.875rem;
  font-weight: 500;
}
/* EIN Block für alle Eingaben. Vorher standen dieselben Regeln viermal in
   dieser Datei (Kontaktformular, Anmeldung, Auswahllisten, Datei-/Zahlenfelder).
   Eine Änderung am Rand musste dadurch an vier Stellen gemacht werden. */
.formular input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.formular select,
.formular textarea,
.anmeldung input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem var(--a-4);
  font: inherit;
  color: var(--nacht);
  background: var(--weiss);
  border: 1px solid var(--rand-bedienung);
  border-radius: var(--radius);
}
.formular textarea {
  min-height: 8rem;
  resize: vertical;
}
.formular input:focus,
.formular select:focus,
.formular textarea:focus,
.anmeldung input:focus {
  border-color: var(--magenta-600);
}
.formular__feld label.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 400;
}
.einwilligung input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--magenta-600);
}
.formular button[type="submit"] {
  justify-self: start;
  width: 100%;
}
@media (min-width: 40em) {
  .formular button[type="submit"] {
    width: auto;
  }
}

/* Das versteckte Feld gegen automatisierte Sendungen. Nicht display:none –
   manche Programme erkennen das und lassen es dann aus. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.feldfehler {
  margin: var(--a-1) 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--magenta-700);
}

.meldung {
  margin: 0;
  padding: var(--a-4);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.meldung--fehler {
  border: 1px solid rgb(180 20 95 / 0.3);
  background: rgb(216 30 120 / 0.06);
  color: var(--magenta-700);
  font-weight: 500;
}
/* Vierte Stufe: reine Erklärung, kein Ereignis. Ohne sie sahen Systemhinweise
   wie „Beide Wege führen zum Ziel" aus wie gewöhnlicher Seiteninhalt. */
.meldung--info {
  border: 1px solid var(--linie);
  background: var(--weiss);
  color: var(--nacht);
}
.meldung--info p + p {
  margin-bottom: 0;
  margin-top: var(--a-2);
}
.meldung--info p:last-child {
  margin-bottom: 0;
}

/* Dritte Stufe: keine Störung, sondern eine Rückfrage. Vorher sah die
   Konflikt-Rückfrage im Projektformular aus wie ein Fehler. */
.meldung--warnung {
  border: 1px solid rgb(245 197 24 / 0.55);
  background: rgb(245 197 24 / 0.10);
  color: var(--nacht);
}
.meldung--warnung strong {
  color: var(--nacht);
}
.meldung--erfolg {
  border: 1px solid rgb(19 138 120 / 0.35);
  background: rgb(14 107 93 / 0.06);
  padding: var(--a-6);
  text-align: center;
}
.meldung__titel {
  font-family: var(--schrift-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--petrol-600);
  margin: 0 0 var(--a-2);
}
.meldung--erfolg p:last-child {
  margin: 0;
}

/* Zwei-Klick-Karte */
.kartenfeld {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--a-4);
  margin-top: var(--a-8);
  /* Auf dem Handy war das ein leerer grauer Kasten von 288 Pixeln Höhe. Die
     volle Höhe bekommt erst die geladene Karte. */
  min-height: 12rem;
  padding: var(--a-6);
  text-align: center;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}
@media (min-width: 40em) {
  .kartenfeld {
    min-height: 24rem;
  }
}
.kartenfeld .hinweis {
  max-width: 30rem;
  margin: 0;
}
.kartenfeld {
  background-color: var(--weiss);
}
.kartenfeld.ist-geladen {
  padding: 0;
  border: 0;
  background: none;
}
.kartenfeld__rahmen {
  width: 100%;
  min-height: 18rem;
  height: 100%;
  border: 1px solid var(--sand);
  border-radius: var(--radius-gross);
}
@media (min-width: 40em) {
  .kartenfeld__rahmen {
    min-height: 24rem;
  }
}
.knopf--dunkel {
  background: var(--nacht);
  color: var(--weiss);
}
.knopf--dunkel:hover {
  background: rgb(22 38 63 / 0.85);
  color: var(--weiss);
}

/* Abschluss-Band: zentrierte Spalte wie auf der bisherigen Website */
.schluss {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--a-6);
}
.schluss h2,
.schluss p {
  margin: 0;
  max-width: 42rem;
}
.knopfreihe--mittig {
  justify-content: center;
}
.schluss .knopfreihe {
  margin-top: 0;
}

/* --- 8. Verwaltungsbereich ------------------------------------------------ */

body.admin {
  padding-bottom: 0;
  background: var(--creme);
}

.adminkopf {
  background: var(--nacht);
  color: var(--weiss);
}
.adminkopf__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4);
  padding-block: var(--a-3);
}
.adminkopf__marke {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--weiss);
  text-decoration: none;
  font-family: var(--schrift-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.125rem;
}
.adminkopf__marke img {
  height: 2rem;
  width: auto;
}
.adminkopf__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-3);
}
.adminkopf__knoepfe .knopf--umriss {
  border-color: rgb(255 255 255 / 0.35);
  color: var(--weiss);
  min-height: 2.5rem;
}
/* Vorher änderte sich beim Zeigen nur die Randfarbe, kaum sichtbar. Jetzt füllt
   sich der Knopf. Gilt auch beim Ansteuern mit der Tastatur. */
.adminkopf__knoepfe .knopf--umriss:hover,
.adminkopf__knoepfe .knopf--umriss:focus-visible {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--nacht);
}

/* Navigationszeile. Vorher gab es keine: Von der Systemprüfung zur Projektliste
   waren es zwei Schritte über die Übersicht. */
.adminnav {
  background: rgb(255 255 255 / 0.07);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.adminnav__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-2) var(--a-4);
  padding-block: var(--a-2);
}
.adminnav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2) var(--a-4);
}
.adminnav__link {
  display: inline-block;
  padding: var(--a-2) 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.adminnav__link:hover {
  color: var(--weiss);
}
.adminnav__link.ist-aktiv {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.adminnav__nutzer {
  margin: 0;
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-3);
}
.adminnav__nutzer .textlink {
  color: var(--gold);
}

/* Auf dem Handy brauchten Kopf und Navigation zusammen 255 Pixel, weil die vier
   Eintraege umbrachen. Jetzt eine einzige Zeile, die sich seitlich schieben
   laesst, darunter die Nutzerzeile. */
@media (max-width: 47.99em) {
  .adminnav__leiste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .adminnav__links {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--a-4);
    scrollbar-width: none;
  }
  .adminnav__links::-webkit-scrollbar {
    display: none;
  }
  .adminnav__link {
    white-space: nowrap;
  }
  .adminnav__nutzer {
    font-size: 0.8rem;
    padding-bottom: var(--a-2);
  }
}

.adminkopf__nutzer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-4);
  font-size: 0.9rem;
}
.adminkopf__nutzer .textlink {
  color: var(--gold);
}
.adminkopf__abmelden {
  margin: 0;
}
.adminkopf__nutzer .knopf--umriss {
  border-color: rgb(255 255 255 / 0.35);
  color: var(--weiss);
  min-height: 2.5rem;
}
/* Vorher änderte sich beim Zeigen nur die Randfarbe, kaum sichtbar. Jetzt füllt
   sich der Knopf. Gilt auch beim Ansteuern mit der Tastatur. */
.adminkopf__nutzer .knopf--umriss:hover,
.adminkopf__nutzer .knopf--umriss:focus-visible {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--nacht);
}

.adminbereich h1 {
  font-size: var(--groesse-h2);
}
.adminkacheln {
  margin-top: var(--a-6);
}
.adminkacheln .wertkarte {
  background: var(--weiss);
  border: 1px solid var(--linie);
}
.adminkacheln h2 {
  font-size: 1.125rem;
}

.fehlerliste {
  margin: 0;
  padding-left: 1.2em;
  color: var(--magenta-700);
}
.fehlerliste li {
  margin-bottom: var(--a-2);
}

/* Anmeldemaske und Passwortmaske: schmale, zentrierte Karte */
.anmeldung {
  max-width: 26rem;
  margin-inline: auto;
  padding: var(--a-6);
  background: var(--weiss);
  border: 1px solid var(--sand);
  border-radius: var(--radius-gross);
}
.anmeldung h1 {
  font-size: var(--groesse-h3);
  margin-bottom: var(--a-2);
}
.anmeldung .formular {
  margin-top: var(--a-6);
}
.anmeldung .knopf {
  width: 100%;
}

.adminfuss {
  padding-block: var(--a-6);
  font-size: 0.85rem;
  color: var(--gedaempft);
}

/* Projektliste */
.adminkopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4);
  margin-bottom: var(--a-6);
}
.adminkopfzeile h1 {
  margin: 0;
}
.tabellenrahmen {
  overflow-x: auto;
  border: 1px solid var(--sand);
  border-radius: var(--radius-gross);
  background: var(--weiss);
}
.liste {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.liste th,
.liste td {
  padding: var(--a-3) var(--a-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sand);
}
.liste th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
  white-space: nowrap;
}
.liste tr:last-child td {
  border-bottom: 0;
}
.liste__slug {
  display: block;
  font-size: 0.8rem;
  color: var(--gedaempft);
}
.liste__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3);
  white-space: nowrap;
}
/* Statusmarke in der Projektliste. Bewusst NICHT „marke" – so heißt schon der
   Logo-Link im Kopfbereich; der bekam dadurch eine beigefarbene Pille. */
/* Auf schmalen Bildschirmen sind sechs Spalten nicht bedienbar. Unter 40 em
   wird aus jeder Zeile eine Karte, die Spaltenüberschrift steht dann vor dem
   Wert. Ab 40 em bleibt die gewohnte Tabelle. */
@media (max-width: 39.99em) {
  .liste--karten thead,
  .liste--pruefung thead {
    display: none;
  }
  .liste--karten tr,
  .liste--pruefung tr {
    display: grid;
    gap: var(--a-2);
    padding: var(--a-4);
    border-bottom: 1px solid var(--sand);
  }
  .liste--karten tr:last-child,
  .liste--pruefung tr:last-child {
    border-bottom: 0;
  }
  .liste--karten td,
  .liste--pruefung td,
  .liste--pruefung th {
    display: block;
    border: 0;
    padding: 0;
    white-space: normal;
  }
  .liste--karten td::before {
    content: attr(data-spalte);
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gedaempft);
  }
  .liste--pruefung th {
    font-weight: 600;
  }
  .tabellenrahmen {
    overflow-x: visible;
  }
}

.statusmarke {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--sand);
  font-size: 0.75rem;
  font-weight: 600;
}
.statusmarke--gruen {
  background: rgb(19 138 120 / 0.15);
  color: var(--petrol-600);
}
/* Fehlgeschlagene Prüfpunkte sollen ins Auge fallen und nicht neutral aussehen. */
.statusmarke--rot {
  background: rgb(216 30 120 / 0.10);
  color: var(--magenta-700);
}
.warnung {
  color: var(--magenta-700);
  font-weight: 600;
}
.textlink--warnung {
  color: var(--magenta-700);
}

/* Projektformular */
.formular--breit {
  max-width: 52rem;
}
.formular fieldset {
  margin: 0;
  padding: var(--a-4);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--weiss);
}
.formular legend {
  padding-inline: var(--a-2);
  font-size: 0.875rem;
  font-weight: 600;
}
.kaestchen {
  display: grid;
  gap: var(--a-2);
}
@media (min-width: 40em) {
  .kaestchen {
    grid-template-columns: repeat(2, 1fr);
  }
}
.kaestchen .einwilligung {
  font-weight: 400;
  font-size: 0.9rem;
}
.unveraenderlich {
  margin: 0;
}
.bildfeld {
  display: grid;
  gap: var(--a-4);
}
@media (min-width: 40em) {
  .bildfeld:has(.bildfeld__vorschau) {
    grid-template-columns: 10rem 1fr;
  }
}
.bildfeld__vorschau img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--sand);
}
.bildfeld__eingaben label {
  display: block;
  margin-bottom: var(--a-1);
  font-size: 0.875rem;
  font-weight: 500;
}
.bildfeld__eingaben .hinweis {
  margin-bottom: var(--a-4);
}
.formular__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-4);
}
.knopf--warnung {
  background: var(--magenta-700);
  color: var(--weiss);
}
.knopf--warnung:hover {
  background: var(--magenta-600);
  color: var(--weiss);
}
.admin .meldung {
  margin-bottom: var(--a-6);
}
.admin .meldung--erfolg {
  text-align: left;
  padding: var(--a-4);
}

/* --- 9. Bewegung ---------------------------------------------------------- */

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