/* ─────────────────────────────────────────────────────────────────────────────
   pfoten.app: Gestaltung der Website, von Hand gepflegt, keine Vorverarbeitung.
   Tokens und Bausteine nach dem Design-Handoff (Oktober 2026).
   Maße, Farben und Texte sind final, Stand v2 vom 2026-10-25 mit den
   Kontrastkorrekturen für WCAG 2.1 AA / BFSG.
   Keine style-Attribute im Markup: Die CSP erlaubt Stile nur mit Nonce.
   ───────────────────────────────────────────────────────────────────────────── */
/* Schriften: Sora, Mulish und DM Mono (alle SIL OFL), Teilmenge latin, von dieser Domain ausgeliefert. */
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/schriften/dm-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/schriften/sora-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/schriften/sora-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/schriften/sora-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/schriften/mulish-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/schriften/mulish-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/schriften/mulish-latin-700-normal.woff2") format("woff2");
}

:root {
  --tinte: #1f1b16;
  --creme: #f6efe6;
  --papier: #fffcf7;
  --sand: #e9e1d6;
  --linie: #e6dccf;
  --rahmen: #d9cec0;
  --terrakotta: #d95d39; /* nur Schwung, Blob, Etikett und Akzente ab 24 px */
  --terrakotta-tief: #b5482a; /* Knöpfe, Links, Labels, Terrakotta-Text unter 24 px (WCAG AA) */
  --gedaempft: #8c8075; /* Rahmen von Eingabefeldern (3:1) */
  --tanne: #2e5e4e;
  --bernstein: #e8a33d;
  --text-2: #4a433c;
  --text-3: #6b625a;
  --platzhalter: #9a8f84;
  --dunkel-text: #f6efe6;
  --dunkel-fliess: #d9cec0;
  --dunkel-leise: #b8ada0;
  --dunkel-gedaempft: #8c8075;
  --auf-terrakotta: #fff8f2;
  --auf-tanne: #d9e4de;
  --fehler: #b5452a;

  --sora: "Sora", system-ui, sans-serif;
  --mulish: "Mulish", system-ui, sans-serif;
  --breite: 1200px;
  --rand: 32px;
  --schatten-karte: 0 20px 40px -16px rgba(31, 27, 22, 0.45);
  --schatten-handy: 0 40px 70px -24px rgba(31, 27, 22, 0.5);
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--mulish);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--terrakotta-tief);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

/* Links im Fließtext nie nur über die Farbe erkennbar (WCAG 1.4.1). */
p a,
li a,
dd a,
address a,
.anbieter__bytework > span a,
.zustimmung a,
.kontakt__direkt a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--terrakotta-tief);
  outline-offset: 2px;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.zum-inhalt {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  background: var(--tinte);
  color: var(--creme);
  padding: 10px 16px;
  border-radius: 14px;
  font-family: var(--sora);
  font-weight: 600;
}

.zum-inhalt:focus {
  top: 12px;
  color: var(--creme);
}

/* Symbole für <use> (Pfote, Schwung): unsichtbar, nur als Quelle. */
.symbole {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lockup__schwung,
.abschluss__schwung {
  color: var(--terrakotta);
}

.erfolg__schwung {
  color: var(--bernstein);
}

.innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}

.sora {
  font-family: var(--sora);
}

/* ── Marke ─────────────────────────────────────────────────────────────────── */
.lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinte);
}

.lockup__schrift {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wortmarke {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.wortmarke__name {
  font-family: var(--sora);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tinte);
}

.etikett {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--auf-terrakotta);
  background: var(--terrakotta);
  border-radius: 999px;
  padding: 4px 8px;
  line-height: 1;
}

.lockup__schwung {
  margin-top: -1px;
  margin-left: 7px;
}

.lockup--klein {
  gap: 8px;
}

.lockup--klein .wortmarke {
  gap: 4px;
}

.lockup--klein .wortmarke__name {
  font-size: 16px;
}

.lockup--klein .etikett {
  font-size: 9px;
  padding: 3px 7px;
}

.lockup--klein .lockup__schwung {
  margin-left: 5px;
}

.mini-marke {
  align-self: flex-start;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.mini-marke .wortmarke__name {
  font-size: 16px;
}

.mini-marke .etikett {
  font-size: 8px;
  letter-spacing: 0;
  padding: 3px 6px;
}

.mini-marke--dunkel .wortmarke__name {
  font-size: 14px;
  color: var(--dunkel-text);
}

.mini-marke--dunkel .etikett {
  font-size: 7px;
  color: var(--tinte);
  background: var(--bernstein);
  padding: 3px 5px;
}

/* ── Kopf ──────────────────────────────────────────────────────────────────── */
.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(246, 239, 230, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kopf__innen {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kopf__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--sora);
  font-weight: 500;
  font-size: 14px;
}

.kopf__nav a {
  color: var(--tinte);
}

.knopf-kontur {
  font-family: var(--sora);
  font-weight: 600;
  color: var(--tinte);
  border: 1.5px solid var(--tinte);
  border-radius: 999px;
  padding: 9px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── Chips ─────────────────────────────────────────────────────────────────── */
.chip {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  white-space: nowrap;
}

.chip--kontur {
  color: var(--tinte);
  border: 1.5px solid var(--tinte);
  padding: 5px 10px;
}

.chip--frei {
  color: var(--creme);
  background: var(--tanne);
  padding: 6px 10px;
}

.chip--warte {
  color: var(--tinte);
  background: var(--bernstein);
  padding: 6px 10px;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  padding-top: 56px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.hinweis-chip {
  align-self: flex-start;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte);
  background: var(--bernstein);
  border-radius: 999px;
  padding: 7px 12px;
  line-height: 1;
  margin: 0;
}

.hero h1 {
  margin: 0;
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.hero__betont {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--terrakotta);
}

.hero__schwung {
  width: 100%;
  height: 0.32em;
  margin-top: -0.04em;
  margin-left: 0.06em;
}

.hero__lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  max-width: 520px;
  color: var(--text-2);
  text-wrap: pretty;
}

.zielgruppen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zielgruppe {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 13px;
  color: var(--tinte);
  border: 1.5px solid var(--tinte);
  border-radius: 999px;
  padding: 6px 12px;
  line-height: 1;
}

.zielgruppe--gefuellt {
  color: var(--creme);
  background: var(--tinte);
  border: 0;
  padding: 7px 12px;
}

/* ── Warteliste ────────────────────────────────────────────────────────────── */
.warteliste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  scroll-margin-top: 90px;
}

.warteliste__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.warteliste__label {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
}

.warteliste__zeile {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.warteliste__feld {
  flex: 1 1 220px;
  min-width: 0;
}

.warteliste__eingabe {
  width: 100%;
  height: 54px;
  border: 1.5px solid var(--gedaempft);
  border-radius: 14px;
  padding: 0 18px;
  font-family: var(--mulish);
  font-size: 16px;
  background: var(--papier);
  color: var(--tinte);
}

.warteliste--cta .warteliste__eingabe {
  background: var(--creme);
}

.warteliste__eingabe::placeholder {
  color: var(--platzhalter);
}

.warteliste__eingabe:focus {
  outline: 2px solid var(--terrakotta-tief);
  outline-offset: 2px;
}

.warteliste__eingabe[aria-invalid="true"] {
  border-color: var(--fehler);
}

.warteliste__fehler {
  margin: 0;
  font-size: 13px;
  color: var(--fehler);
}

.knopf {
  height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  background: var(--terrakotta-tief);
  color: var(--auf-terrakotta);
  font-family: var(--sora);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.knopf:disabled {
  cursor: progress;
  background: var(--tinte);
}

.warteliste__klein {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

.warteliste__klein a {
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.warteliste__falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.erfolg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--tinte);
  color: var(--creme);
  border-radius: 16px;
  padding: 20px 22px;
}

.erfolg__titel {
  font-family: var(--sora);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.erfolg__text {
  font-size: 15px;
  color: var(--dunkel-fliess);
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.erfolg--cta {
  gap: 4px;
  background: var(--tanne);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 16px;
}

.erfolg--cta .erfolg__titel {
  font-size: 18px;
  letter-spacing: 0;
}

.erfolg--cta .erfolg__text {
  font-size: 16px;
  color: var(--auf-tanne);
  margin-top: 0;
}

/* ── App-Vorschau ──────────────────────────────────────────────────────────── */
.vorschau {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px 16px 90px;
  margin: 0;
}

.vorschau__blob {
  position: absolute;
  inset: 6% 0 6% 12%;
  background: var(--terrakotta);
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
}

.handy {
  position: relative;
  width: min(100%, 300px);
  background: var(--tinte);
  border-radius: 40px;
  padding: 10px;
  box-shadow: var(--schatten-handy);
}

.badge {
  position: absolute;
  z-index: 2;
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: 0 20px 40px -16px rgba(31, 27, 22, 0.5);
}

.badge__label {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge--buchung {
  left: -120px;
  top: 52%;
  transform: rotate(-3deg);
  background: var(--tinte);
  color: var(--creme);
}

.badge--buchung .badge__label {
  color: var(--bernstein);
}

.badge--frei {
  right: -28px;
  bottom: 92px;
  transform: rotate(3deg);
  background: var(--papier);
  color: var(--tinte);
  box-shadow: var(--schatten-karte);
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge--frei .badge__label {
  color: var(--terrakotta-tief);
}

.avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sora);
  font-weight: 700;
  color: var(--creme);
  flex: 0 0 auto;
}

.avatar--gross {
  width: 34px;
  height: 34px;
  font-size: 13px;
  background: var(--bernstein);
  color: var(--tinte);
}

.bildschirm {
  background: var(--creme);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 540px;
}

.statusleiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 0;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 12px;
}

.statusleiste__insel {
  width: 70px;
  height: 20px;
  border-radius: 999px;
  background: var(--tinte);
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  margin: 0 auto;
}

.statusleiste__akku {
  width: 14px;
  height: 9px;
  border: 1.5px solid var(--tinte);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tinte) 70%, transparent 70%);
}

.app-kopf {
  padding: 22px 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-kopf__schule {
  font-size: 12px;
  color: var(--text-3);
}

.app-kopf__titel {
  font-family: var(--sora);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.kurse {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kurs {
  background: var(--papier);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kurs--knapp {
  gap: 6px;
}

.kurs__zeile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.kurs__wann {
  font-size: 11px;
  color: var(--text-3);
}

.kurs__name {
  font-family: var(--sora);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.kurs__chip {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 11px;
  border-radius: 999px;
  padding: 5px 9px;
  line-height: 1;
  white-space: nowrap;
}

.kurs__chip--frei {
  color: var(--creme);
  background: var(--tanne);
}

.kurs__chip--warte {
  color: var(--tinte);
  background: var(--bernstein);
}

.kurs__teilnehmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar--klein {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.avatar--klein + .avatar--klein {
  margin-left: -10px;
  border: 2px solid var(--papier);
}

.avatar--tanne {
  background: var(--tanne);
}

.avatar--terrakotta {
  background: var(--terrakotta);
}

.avatar--tinte {
  background: var(--tinte);
}

.kurs__namen {
  font-size: 12px;
  color: var(--text-3);
  margin-left: 4px;
}

.kurs__info {
  font-size: 12px;
  color: var(--text-3);
}

.app-fuss {
  margin-top: auto;
  padding: 0 18px 20px;
}

.app-knopf {
  height: 46px;
  border-radius: 14px;
  background: var(--terrakotta-tief);
  color: var(--auf-terrakotta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 14px;
}

/* ── Abschnitte ────────────────────────────────────────────────────────────── */
.label {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.h2 {
  margin: 0;
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 720px;
  text-wrap: pretty;
}

.problem {
  background: var(--tinte);
  color: var(--dunkel-text);
}

.problem__innen {
  padding-top: 96px;
  padding-bottom: 96px;
}

.problem .label {
  color: var(--bernstein);
}

.problem .h2 {
  margin-bottom: 56px;
}

.vergleich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}

.vergleich__karte {
  border-radius: 22px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vergleich__karte--heute {
  border: 1px solid rgba(246, 239, 230, 0.18);
}

.vergleich__karte--mit {
  background: var(--creme);
  color: var(--tinte);
}

.vergleich__titel {
  margin: 0;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 14px;
  color: var(--dunkel-leise);
}

.vergleich__karte--mit .vergleich__titel {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinte);
}

.vergleich__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vergleich__punkt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.5;
}

.vergleich__karte--heute .vergleich__punkt {
  color: var(--dunkel-fliess);
}

.zeichen {
  font-family: var(--sora);
  font-weight: 700;
  flex: 0 0 auto;
}

.zeichen--nein {
  color: var(--dunkel-gedaempft);
}

.zeichen--ja {
  color: var(--terrakotta-tief);
}

.funktionen {
  padding-top: 96px;
  padding-bottom: 96px;
  scroll-margin-top: 70px;
}

.funktionen .label,
.fragen .label {
  color: var(--terrakotta-tief);
}

.funktionen .h2 {
  margin-bottom: 48px;
}

.funktionen__raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}

.funktion {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.funktion h3 {
  margin: 0;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.funktion p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}

.funktion--dunkel {
  background: var(--tinte);
  color: var(--dunkel-text);
  border: 0;
}

.funktion--dunkel p {
  color: var(--dunkel-fliess);
}

/* ── Häufige Fragen ────────────────────────────────────────────────────────── */
.fragen {
  padding-bottom: 32px;
  scroll-margin-top: 70px;
}

.fragen .h2 {
  margin-bottom: 36px;
}

.fragen__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.frage {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 0 24px;
}

.frage summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.frage__plus {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--tinte);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  transition: transform 150ms ease;
}

.frage[open] .frage__plus {
  transform: rotate(45deg);
}

.frage p {
  margin: 0;
  padding: 0 0 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 680px;
  text-wrap: pretty;
}

.abschluss {
  padding-top: 64px;
  padding-bottom: 96px;
}

.abschluss__karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 28px;
  padding: clamp(32px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
  align-items: center;
}

.abschluss__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.abschluss__text p {
  margin: 0;
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 460px;
  text-wrap: pretty;
}

/* ── Fuß (einheitlich auf allen Seiten) ──────────────────────────────────── */
.fuss {
  border-top: 1px solid var(--linie);
  position: relative;
  z-index: 1;
  background: var(--creme);
}

.fuss__raster {
  padding-top: 28px;
  padding-bottom: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px 32px;
  align-items: center;
  font-size: 14px;
  color: var(--text-3);
}

.fuss__raster > .lockup {
  justify-self: start;
}

.fuss__nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.fuss__nav a {
  color: var(--text-3);
  text-decoration: none;
}

.fuss__aktuell {
  font-weight: 700;
  color: var(--tinte);
}

.fuss__herkunft {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}

/* „ein Produkt von bytework.dev“ in DM Mono, Cursor blinkt hart im 1,1-s-Takt. */
.bw-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
}

.bw-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #13202a;
  text-decoration: none;
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.4px;
}

.bw-icon {
  display: block;
  flex: 0 0 auto;
}

.bw-cursor {
  display: inline-block;
  width: 4px;
  height: 11px;
  border-radius: 1px;
  background: #0fa3bf;
}

.bw-cursor,
.bw-cursor-svg {
  animation: bw-blinken 1.1s steps(1, end) infinite;
}

@keyframes bw-blinken {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@media (hover: hover) {
  .fuss__nav a:hover {
    color: var(--tinte);
  }

  .bw-link:hover {
    color: #0a7f96;
  }
}

@media (max-width: 760px) {
  .fuss__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .fuss__raster > * {
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }

  .fuss__nav {
    justify-content: flex-start;
    column-gap: 20px;
    row-gap: 0;
  }

  /* Tippziele mindestens 44 px hoch */
  .fuss__nav a,
  .fuss__aktuell,
  .bw-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Rechtsseiten: Seitenleiste und Karten ──────────────────────────────────── */
.rechtsraster {
  padding-top: 48px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}

.rechtsleiste {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rechtsleiste .label {
  margin: 0;
  color: var(--terrakotta-tief);
}

.rechtsleiste h1 {
  margin: 0;
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.rechtsleiste__einleitung {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 360px;
  text-wrap: pretty;
}

.rechtsleiste__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--sora);
  font-weight: 500;
  font-size: 14px;
}

.rechtsleiste__nav a {
  color: var(--tinte);
  text-decoration: none;
}

.rechtsleiste__andere {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chip-link {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 12px;
  color: var(--tinte);
  border: 1.5px solid var(--tinte);
  border-radius: 999px;
  padding: 6px 11px;
  line-height: 1;
  text-decoration: none;
}

.rechtsinhalt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 20px;
  padding: 28px 32px;
  scroll-margin-top: 24px;
}

.karte h2 {
  margin: 0 0 14px;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.karte h3 {
  margin: 0 0 6px;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 15px;
}

.karte p,
.karte li,
.karte dl {
  font-size: 16px;
  line-height: 1.6;
}

.karte p {
  margin: 0;
}

.karte p + p,
.karte p + dl,
.karte dl + p,
.karte ul + p,
.karte p + ul {
  margin-top: 12px;
}

.karte ul {
  margin: 0;
  padding-left: 20px;
}

.karte .absatz + .absatz {
  margin-top: 16px;
}

.karte .absatz p {
  font-size: 15px;
  color: var(--text-2);
}

.kv {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 24px;
}

.kv dt {
  color: var(--text-3);
}

.kv dd {
  margin: 0;
}

.karte--dunkel {
  background: var(--tinte);
  color: var(--dunkel-text);
  border: 0;
}

.hakenliste {
  list-style: none;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--dunkel-fliess);
}

.hakenliste li {
  display: flex;
  gap: 12px;
}

.haken {
  font-family: var(--sora);
  font-weight: 700;
  color: var(--bernstein);
  flex: 0 0 auto;
}

.hakenliste--hell {
  color: var(--tinte);
}

.hakenliste--hell .haken {
  color: var(--terrakotta-tief);
}

.stand__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.chip--hell {
  color: var(--creme);
  border: 1.5px solid var(--creme);
  padding: 6px 11px;
}

.chip--warte {
  padding: 7px 12px;
}

.anbieter__bytework {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.anbieter__bytework-bild {
  display: block;
  line-height: 0;
}

.anbieter__bytework > span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 360px;
}

.anbieter__bytework > span a,
.zustimmung a,
.kontakt__direkt a {
  color: #0a7f96;
}

.rechtsinhalt__stand {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-3);
}

@media (hover: hover) {
  .rechtsleiste__nav a:hover {
    color: var(--terrakotta-tief);
  }

  .chip-link:hover {
    background: var(--tinte);
    color: var(--creme);
  }
}

@media (max-width: 900px) {
  .rechtsraster {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .rechtsleiste {
    position: static;
  }

  .rechtsleiste__nav a {
    padding: 10px 0;
  }
}

@media (max-width: 560px) {
  .kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .kv dd {
    margin-bottom: 10px;
  }

  .karte {
    padding: 22px 20px;
  }

  .rechtsraster {
    padding-top: 32px;
    padding-bottom: 64px;
  }
}

.luecke {
  background: var(--bernstein);
  color: var(--tinte);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 600;
}


/* Hover nur bei echtem Zeiger: Auf Touch-Geräten bliebe der Zustand nach dem Tippen hängen. */
@media (hover: hover) {
  a:hover,
  .lockup:hover {
    color: var(--tinte);
  }

  .warteliste__klein a:hover {
    color: var(--tinte);
  }

  .kopf__nav .knopf-kontur:hover {
    background: var(--tinte);
    color: var(--creme);
  }

  .knopf:hover {
    background: var(--tinte);
  }
}

/* ── Schmale Bildschirme ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
  :root {
    --rand: 20px;
  }

  .hero {
    padding-top: 32px;
    padding-bottom: 64px;
    gap: 40px;
  }

  .vorschau {
    min-height: 0;
    padding: 0 0 8px;
  }

  .vorschau__blob {
    inset: 4% 4%;
  }

  .badge {
    display: none;
  }

  .knopf,
  .warteliste__eingabe {
    min-height: 44px;
  }

  .problem__innen,
  .funktionen {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .abschluss {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .vergleich__karte {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .kopf__nav .kopf__link {
    display: none;
  }

  .kopf__nav .knopf-kontur {
    padding: 9px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .kopf__innen {
    padding: 12px 20px;
  }
}

@media (max-width: 400px) {
  .hinweis-chip__zusatz {
    display: none;
  }
}

@media (max-width: 480px) {

  .knopf {
    width: 100%;
  }
}

/* Einmaliges, kurzes Einblenden des Heros; ohne Bewegungswunsch steht alles sofort. */
@media (prefers-reduced-motion: no-preference) {
  .hero__text > *,
  .vorschau {
    animation: einblenden 500ms ease both;
  }

  .hero__text > :nth-child(2) {
    animation-delay: 80ms;
  }

  .hero__text > :nth-child(3) {
    animation-delay: 160ms;
  }

  .hero__text > :nth-child(4) {
    animation-delay: 240ms;
  }

  .hero__text > :nth-child(5) {
    animation-delay: 320ms;
  }

  .vorschau {
    animation-delay: 200ms;
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ── 404: Seite vergraben ──────────────────────────────────────────────────── */
.vergraben {
  padding-top: 40px;
  padding-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 290px);
}

.vergraben__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.vergraben h1 {
  margin: 0;
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.vergraben__lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  max-width: 520px;
  color: var(--text-2);
  text-wrap: pretty;
}

.vergraben__knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.knopf--link {
  display: inline-flex;
  align-items: center;
  color: var(--auf-terrakotta);
}

.knopf-kontur--gross {
  height: 54px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 16px;
}

.knopf-text {
  height: 54px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--terrakotta-tief);
  font-family: var(--sora);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.vergraben__hinweis {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
}

.vergraben__bild {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vergraben__blob {
  position: absolute;
  inset: 6% 2%;
  background: var(--terrakotta);
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
}

.vergraben__ziffern {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(140px, 22vw, 240px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--auf-terrakotta);
  user-select: none;
}

.vergraben__pfote {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 0.78em;
  height: 1em;
  margin: 0 -0.02em;
}

.vergraben__pfote svg {
  width: 0.62em;
  height: 0.62em;
  transform-origin: 50% 90%;
  animation: buddeln 1.2s ease-in-out infinite;
}

.badge--verdacht {
  left: 4%;
  bottom: 8%;
  transform: rotate(-3deg);
  background: var(--papier);
  color: var(--tinte);
  box-shadow: var(--schatten-karte);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: auftauchen 0.5s ease-out 0.3s both;
}

.badge--verdacht .badge__label {
  color: var(--terrakotta-tief);
}

.badge--status {
  right: 4%;
  top: 10%;
  transform: rotate(3deg);
  background: var(--tinte);
  color: var(--creme);
  animation: auftauchen 0.5s ease-out 0.6s both;
}

.badge--status .badge__label {
  color: var(--bernstein);
}

.pfotenspur {
  position: relative;
  height: 120px;
  max-width: var(--breite);
  margin: 0 auto;
  pointer-events: none;
  overflow: hidden;
  color: var(--tinte);
}

.pfotenspur svg {
  width: 100%;
  height: 100%;
}

/* Störungsseite (500, 503, 403, offline): Pfote sitzt auf dem atmenden Blob. */
.stoerung__blob {
  animation: atmen 6s ease-in-out infinite;
}

.stoerung__pfote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--auf-terrakotta);
  animation: sitzen 3s ease-in-out infinite;
}

.stoerung__code {
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.05em;
  user-select: none;
}

.fehlercode {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--tinte);
}

@keyframes atmen {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

@keyframes sitzen {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes buddeln {
  0%,
  100% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }
}

@keyframes auftauchen {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  70% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfotenspur {
    display: none;
  }
}

@media (max-width: 700px) {
  .vergraben__bild {
    min-height: 300px;
  }

  .vergraben .badge {
    display: none;
  }
}

/* ── Kontakt: Formular und Live-Vorschau ───────────────────────────────────── */
.kontakt {
  padding-top: 48px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.kontakt__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kontakt h1 {
  margin: 0;
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.kontakt__lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 540px;
  text-wrap: pretty;
}

.kontakt__karte {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.rollen {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rollen__titel {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 14px;
  padding: 0;
  margin-bottom: 10px;
}

.rollen__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rollen__eingabe {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rollen__chip {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--tinte);
  display: inline-flex;
  align-items: center;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.rollen__eingabe:checked + .rollen__chip {
  background: var(--tinte);
  color: var(--creme);
}

.rollen__eingabe:focus-visible + .rollen__chip {
  outline: 2px solid var(--terrakotta-tief);
  outline-offset: 2px;
}

.kontakt__paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.feld__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.feld__label {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feld__eingabe {
  height: 52px;
  border: 1.5px solid var(--gedaempft);
  border-radius: 14px;
  padding: 0 16px;
  font-family: var(--mulish);
  font-size: 16px;
  background: var(--creme);
  color: var(--tinte);
  min-width: 0;
}

.feld__eingabe--text {
  height: auto;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}

.feld__eingabe::placeholder {
  color: var(--platzhalter);
}

.feld__eingabe[aria-invalid="true"] {
  border-color: var(--fehler);
}

.feld__hinweis {
  font-size: 12px;
  color: var(--text-3);
}

.feld__fehler {
  font-size: 13px;
  color: var(--fehler);
}

.feld__fehler:empty {
  display: none;
}

.wuff {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-3);
}

.wuff__balken {
  height: 6px;
  border-radius: 999px;
  background: var(--sand);
  overflow: hidden;
}

.wuff__fuellung {
  height: 100%;
  width: 0;
  background: var(--terrakotta);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.zustimmung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  cursor: pointer;
}

.zustimmung__haken {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--terrakotta-tief);
  flex: 0 0 auto;
}

.kontakt__absenden {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.knopf--pfote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px;
}

.kontakt__direkt {
  font-size: 13px;
  color: var(--text-3);
}

.kontakt__sammel {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fehler);
}

.kontakt__sammel:empty {
  display: none;
}

.kontakt__karte--dunkel {
  background: var(--tinte);
  color: var(--creme);
  border: 0;
  padding: 36px 32px;
  gap: 12px;
  overflow: hidden;
}

.kontakt__karte--dunkel .badge__label {
  color: var(--bernstein);
}

.kontakt__danke {
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.kontakt__erfolgtext {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dunkel-fliess);
  max-width: 440px;
}

.knopf-kontur--hell {
  align-self: flex-start;
  margin-top: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border-color: var(--creme);
  background: transparent;
  color: var(--creme);
  font-size: 14px;
  cursor: pointer;
}

.kontakt__stempel {
  position: absolute;
  right: 22px;
  bottom: 18px;
  opacity: 0.9;
  color: var(--terrakotta);
  transform: rotate(-8deg);
  animation: stempeln 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.kontakt__bild {
  position: sticky;
  top: 24px;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

.kontakt__blob {
  position: absolute;
  inset: 4% 0;
  background: var(--terrakotta);
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
}

.chat {
  position: relative;
  width: min(100%, 330px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat__blase {
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.5;
}

.chat__blase--du {
  align-self: flex-start;
  max-width: 100%;
  background: var(--papier);
  border-radius: 18px 18px 18px 6px;
  box-shadow: var(--schatten-karte);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat__blase--wir {
  align-self: flex-end;
  max-width: 85%;
  background: var(--tinte);
  color: var(--creme);
  border-radius: 18px 18px 6px 18px;
  padding: 14px 16px;
  box-shadow: 0 20px 40px -16px rgba(31, 27, 22, 0.5);
}

.chat__blase--wir .badge__label {
  color: var(--bernstein);
  margin-bottom: 2px;
}

.chat__wer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat__name {
  font-family: var(--sora);
  font-weight: 700;
  font-size: 14px;
}

.chat__rolle {
  font-size: 12px;
  color: var(--text-3);
}

.chat__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat__hund {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--papier);
  border-radius: 999px;
  padding: 8px 14px 8px 8px;
  box-shadow: 0 14px 30px -14px rgba(31, 27, 22, 0.4);
  margin-top: 6px;
  font-size: 13px;
}

.chat__rute {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bernstein);
  display: grid;
  place-items: center;
  color: var(--tinte);
}

.chat__rute svg {
  animation: wedeln 0.8s ease-in-out infinite;
  transform-origin: 50% 90%;
}

@keyframes wedeln {
  0%,
  100% {
    transform: rotate(-12deg);
  }

  50% {
    transform: rotate(12deg);
  }
}

@keyframes stempeln {
  0% {
    opacity: 0;
    transform: scale(2.2) rotate(-18deg);
  }

  60% {
    opacity: 1;
    transform: scale(0.92) rotate(-8deg);
  }
}

@media (max-width: 1040px) {
  .kontakt__paar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .kontakt {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt__bild {
    order: -1;
    position: relative;
    top: 0;
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .kontakt__karte {
    padding: 22px 20px;
  }

  .kontakt {
    padding-top: 28px;
    padding-bottom: 64px;
  }
}

/* ── Statusseite (status.pfoten.app) ───────────────────────────────────────── */
.status {
  max-width: 960px;
  padding-top: 48px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.status__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.status__label {
  margin: 0 0 10px;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terrakotta-tief);
}

.status h1 {
  margin: 0;
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.status__geprueft {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
}

.banner {
  border-radius: 22px;
  padding: 28px 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--tanne);
  color: var(--creme);
}

.banner--langsam {
  background: var(--bernstein);
  color: var(--tinte);
}

.banner--teilausfall {
  background: var(--terrakotta);
  color: var(--tinte);
}

.banner--ausfall {
  background: var(--terrakotta-tief);
  color: var(--auf-terrakotta);
}

.banner--wartung {
  background: var(--tinte);
}

.banner--geplant,
.banner--keine {
  background: var(--papier);
  color: var(--tinte);
  border: 1.5px dashed var(--gedaempft);
}

.banner__puls {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  animation: puls 2s ease-out infinite;
}

.banner--wartung .banner__puls {
  background: var(--bernstein);
}

.banner--geplant .banner__puls,
.banner--keine .banner__puls {
  animation: none;
}

@keyframes puls {
  0% {
    box-shadow: 0 0 0 0 rgba(246, 239, 230, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 10px rgba(246, 239, 230, 0);
  }
}

.banner__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 260px;
  min-width: 0;
}

.banner__kopf {
  margin: 0;
  font-family: var(--sora);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.banner__unter {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.banner__pfote {
  flex: 0 0 auto;
  opacity: 0.9;
}

.status__karte {
  border-radius: 22px;
  padding: 28px 30px;
}

.dienst {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linie);
}

.dienst:first-child {
  padding-top: 0;
}

.dienst:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dienst__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dienst__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dienst__titel {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.dienst__text {
  font-size: 13px;
  color: var(--text-3);
}

.zustand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  padding: 7px 12px;
  line-height: 1;
  white-space: nowrap;
  background: #e3ede8;
  color: #1f3f34;
}

.zustand__punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tanne);
}

.zustand--langsam {
  background: #fbe3b8;
  color: var(--tinte);
}

.zustand--langsam .zustand__punkt {
  background: var(--bernstein);
}

.zustand--teilausfall {
  background: #f6c9b8;
  color: var(--tinte);
}

.zustand--teilausfall .zustand__punkt {
  background: var(--terrakotta);
}

.zustand--ausfall {
  background: var(--terrakotta-tief);
  color: var(--auf-terrakotta);
}

.zustand--ausfall .zustand__punkt {
  background: var(--auf-terrakotta);
}

.zustand--wartung {
  background: var(--sand);
  color: var(--tinte);
}

.zustand--wartung .zustand__punkt {
  background: var(--text-3);
}

.zustand--geplant {
  background: transparent;
  color: var(--tinte);
  border: 1.5px dashed var(--tinte);
}

.zustand--geplant .zustand__punkt {
  background: var(--tinte);
}

.zustand--bald,
.zustand--keine {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--rahmen);
}

.zustand--bald .zustand__punkt,
.zustand--keine .zustand__punkt {
  background: var(--dunkel-leise);
}

.verlauf {
  display: flex;
  gap: 2px;
  height: 30px;
  align-items: stretch;
}

.tag {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
}

.tag--ok {
  background: var(--tanne);
}

.tag--langsam {
  background: var(--bernstein);
}

.tag--ausfall {
  background: var(--terrakotta-tief);
}

.tag--wartung {
  background: var(--text-3);
}

.tag--keine {
  background: var(--sand);
}

.verlauf__fuss {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-3);
}

.verlauf__wert {
  font-family: var(--sora);
  font-weight: 600;
  color: var(--tinte);
}

.nur-schmal {
  display: none;
}

.legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-2);
}

.legende li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legende__feld {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legende__feld.tag--keine {
  border: 1px solid var(--rahmen);
}

.status__h2 {
  margin: 0 0 18px;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.status__leer {
  margin: 0;
  color: var(--text-2);
}

.vorfall {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.vorfall + .vorfall {
  margin-top: 18px;
}

.vorfall__punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 7px;
  flex: 0 0 auto;
  background: var(--tanne);
}

.vorfall__punkt--langsam {
  background: var(--bernstein);
}

.vorfall__punkt--teilausfall {
  background: var(--terrakotta);
}

.vorfall__punkt--ausfall {
  background: var(--terrakotta-tief);
}

.vorfall__punkt--wartung {
  background: var(--text-3);
}

.vorfall__inhalt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vorfall__kopf {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.vorfall__titel {
  margin: 0;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 16px;
}

.vorfall__wann,
.vorfall__updates time {
  font-size: 12px;
  color: var(--text-3);
}

.vorfall__updates {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vorfall__updates p {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}

.vorfall__stufe,
.vorfall__stand {
  font-family: var(--sora);
  font-weight: 600;
  font-size: 12px;
  margin-right: 8px;
}

.vorfall__stand {
  color: var(--tanne);
}

.status__hinweis {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

.status__hinweis a {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .tag--alt,
  .nur-breit {
    display: none;
  }

  .nur-schmal {
    display: inline;
  }

  .status__karte {
    padding: 20px;
  }

  .status {
    padding-top: 28px;
    padding-bottom: 64px;
  }
}

/* ── Bestätigen und Abmelden ──────────────────────────────────────────────── */
.link-aktion {
  padding-top: 72px;
  padding-bottom: 120px;
  max-width: 640px;
}

.link-aktion__text {
  font-size: 17px;
  color: var(--text-2);
}

.link-aktion__fehler {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 20px 22px;
}

.link-aktion__fehler .erfolg__text {
  color: var(--text-2);
}