/* büroleicht – Gestaltung
   Farben, Schriften, Radien und Abstände stehen als Variablen ganz oben.
   Ohne die Dateien in fonts/ nimmt die Seite Systemschriften und funktioniert weiter. */

@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Markenfarben (CLAUDE.md) */
  --petrol: #1F4E5F;
  --papierweiss: #F4EFE6;
  --anthrazit: #1E2A2F;
  --bernstein: #D98B2B;      /* genau einmal: die Feierabend-Linie im Kalender */
  --salbeigrau: #9AA8A3;     /* Linien */
  --weiss: #FFFFFF;
  /* Abgeleitete Töne */
  --salbeigrau-text: #5F6C68; /* Nebentext auf hellem Grund (WCAG AA) */
  --salbeigrau-hell: #E8ECEA; /* feine Linien, Flächen in der Oberfläche */
  --petrol-flaeche: #2B5A6A;  /* Kacheln auf Petrol */
  --auf-petrol-neben: #CAD1CE; /* Nebentext auf Petrol */

  --schrift-titel: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --r-klein: 10px;
  --r-mittel: 16px;
  --r-gross: 24px;
  --r-sehr-gross: 32px;

  --rand: 20px;
  --breite: 75rem;
  --zeile: 62ch;
  --sektion: 88px;
}
@media (min-width: 768px) { :root { --rand: 40px; --sektion: 112px; } }
@media (min-width: 1100px) { :root { --sektion: 144px; } }

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--anthrazit);
  font-family: var(--schrift-text);
  font-size: 1.125rem;
  line-height: 1.55;
  font-kerning: normal;
  overflow-wrap: break-word;
}
h1, h2, h3 {
  font-family: var(--schrift-titel);
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-weight: 700;
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
h2 {
  font-weight: 700;
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
h3 {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
p, ul, ol { margin: 0 0 1em; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--anthrazit); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
button { font: inherit; }

.rahmen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.nw { white-space: nowrap; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung { position: absolute; left: var(--rand); top: -200px; z-index: 30; padding: 10px 14px; background: var(--weiss); border-radius: var(--r-klein); }
.sprung:focus { top: 10px; }

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.knopf-voll { background: var(--petrol); color: var(--weiss); }
.knopf-voll:hover { background: var(--anthrazit); color: var(--weiss); }
.knopf-leise { padding-inline: 8px; color: var(--anthrazit); }
.knopf-leise:hover { color: var(--petrol); text-decoration: underline; }
.knopf-hell { background: var(--papierweiss); color: var(--petrol); }
.knopf-hell:hover { background: var(--weiss); color: var(--anthrazit); }
.pfeil { display: inline-block; transition: transform .2s; }
.knopf:hover .pfeil { transform: translateX(4px); }

/* Kopfzeile */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--weiss);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.kopf.ist-gescrollt { border-bottom-color: var(--salbeigrau-hell); }
.kopf-innen { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marke img { width: 118px; }
.kopf-nav { display: none; }
.kopf-tel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--salbeigrau);
  border-radius: 999px;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.kopf-tel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.kopf-tel:hover { background: var(--petrol); border-color: var(--petrol); color: var(--weiss); }
@media (min-width: 900px) {
  .kopf-innen { min-height: 80px; }
  .marke img { width: 140px; }
  .kopf-nav { display: flex; gap: 4px; margin-left: 40px; }
  .kopf-nav a {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--anthrazit);
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color .2s, color .2s;
  }
  .kopf-nav a:hover { color: var(--petrol); text-decoration: underline; }
  .kopf-nav a[aria-current="true"] { background: var(--papierweiss); color: var(--petrol); }
}

/* Einstieg */
.held { padding-block: 32px 24px; }
.held-raster { display: grid; gap: 56px; align-items: center; }
.held h1 { margin-bottom: 28px; max-width: 11em; }
.einleitung { font-size: 1.1875rem; line-height: 1.5; max-width: 34em; margin-bottom: 36px; color: var(--anthrazit); }
.held-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (min-width: 768px) {
  .held { padding-top: 72px; }
  .einleitung { font-size: 1.3125rem; }
}
@media (min-width: 1000px) {
  .held-raster { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 72px; }
  .held { padding-block: 88px 0; }
}

/* Beispiel-Tag: Kalender mit Umschalter */
.tag {
  margin: 0;
  padding: 20px 18px 16px;
  background: var(--weiss);
  border: 1px solid var(--salbeigrau);
  border-radius: var(--r-gross);
}
.tag-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tag-titel { margin: 0; font-family: var(--schrift-titel); font-weight: 600; font-size: 0.9375rem; }
.umschalter { display: inline-flex; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: var(--salbeigrau-hell); }
.umschalter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.umschalter label {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--salbeigrau-text);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.umschalter label:hover { color: var(--anthrazit); }
.umschalter input:checked + label { background: var(--petrol); color: var(--weiss); }
.umschalter input:focus-visible + label { outline: 2px solid var(--petrol); outline-offset: 2px; }

.kalender { --h: 30px; --spalte: 44%; position: relative; height: calc(16 * var(--h)); }
.stunden { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.stunden li {
  height: var(--h);
  border-top: 1px solid var(--salbeigrau-hell);
  font-size: 0.6875rem;
  line-height: 1;
  padding-top: 3px;
  color: var(--salbeigrau-text);
  font-variant-numeric: tabular-nums;
}
.stunden li:last-child { height: 0; }
.ereignisse { position: absolute; inset: 0 0 0 30px; }

.ev {
  position: absolute;
  margin: 0;
  top: calc((var(--von) - 7) * var(--h) + 2px);
  height: calc((var(--bis) - var(--von)) * var(--h) - 3px);
  left: var(--ev-links, 0%);
  width: var(--ev-breite, 100%);
  padding: 0 6px;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1.15;
  white-space: nowrap;
}
.ev b { font-weight: 600; margin-right: 4px; font-variant-numeric: tabular-nums; }
.ev-bau { --ev-breite: calc(var(--spalte) - 4px); align-items: flex-start; padding-top: 6px; background: var(--papierweiss); color: var(--anthrazit); font-weight: 600; }
.ev-eingang, .ev-notiz { --ev-links: var(--spalte); --ev-breite: calc(100% - var(--spalte)); }
.ev-eingang { background: var(--weiss); border: 1px solid var(--petrol); color: var(--petrol); }
.ev-notiz { border: 1px dashed var(--salbeigrau); color: var(--salbeigrau-text); }
.ev-buero { background: var(--petrol); color: var(--weiss); }
.ev-a { --von: 19.75; --bis: 20.5; }
.ev-b { --von: 20.5; --bis: 21.75; }

.wechsel { display: grid; align-items: center; }
.wechsel > span { grid-area: 1 / 1; }

.feierabend {
  --t: 21.75;
  position: absolute;
  margin: 0;
  left: -30px;
  right: 0;
  top: calc((var(--t) - 7) * var(--h));
  height: 0;
  border-top: 2px solid var(--bernstein);
}
.feierabend > span {
  position: absolute;
  right: 0;
  top: 4px;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--anthrazit);
  white-space: nowrap;
}
.abend-frei {
  position: absolute;
  margin: 0;
  left: 0;
  right: 0;
  top: calc(12.5 * var(--h));
  text-align: center;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--petrol);
}

/* Zustand «Mit büroleicht» */
.nur-mit { opacity: 0; visibility: hidden; }
.tag:has(#tag-mit:checked) .nur-mit { opacity: 1; visibility: visible; }
.tag:has(#tag-mit:checked) .nur-bisher { opacity: 0; visibility: hidden; }
.tag:has(#tag-mit:checked) .ev-a { --von: 9.25; --bis: 9.9; --ev-links: var(--spalte); --ev-breite: calc(100% - var(--spalte)); }
.tag:has(#tag-mit:checked) .ev-b { --von: 16.8; --bis: 17.45; --ev-links: var(--spalte); --ev-breite: calc(100% - var(--spalte)); }
.tag:has(#tag-mit:checked) .feierabend { --t: 17.5; }

.tag figcaption { margin-top: 14px; font-size: 0.875rem; color: var(--salbeigrau-text); }

@media (min-width: 480px) {
  .kalender { --spalte: 48%; }
  .ev { font-size: 0.8125rem; padding: 0 8px; }
}
@media (min-width: 768px) {
  .tag { padding: 24px 24px 18px; }
  .kalender { --h: 34px; }
  .ereignisse { inset: 0 0 0 36px; }
  .feierabend { left: -36px; }
  .stunden li { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .ev-buero { transition: top .8s cubic-bezier(.2, .8, .2, 1), height .8s cubic-bezier(.2, .8, .2, 1), left .8s cubic-bezier(.2, .8, .2, 1), width .8s cubic-bezier(.2, .8, .2, 1); }
  .ev-b { transition-delay: .08s; }
  .feierabend { transition: top .9s cubic-bezier(.2, .8, .2, 1) .12s; }
  .nur-mit, .nur-bisher { transition: opacity .35s, visibility .35s; }
  .tag:has(#tag-mit:checked) .nur-mit { transition-delay: .45s; }
}

/* Sektionen */
.sektion { padding-block: var(--sektion); }
/* Zwei weisse Abschnitte hintereinander: nur einmal Abstand */
.sektion:not(.sektion-papier, .sektion-petrol) + .sektion:not(.sektion-papier, .sektion-petrol) { padding-top: 0; }
.sektion-papier { background: var(--papierweiss); }
.sektion-petrol { background: var(--petrol); color: var(--papierweiss); }
.sektion-kopf { display: grid; gap: 16px; margin-bottom: 48px; }
.sektion-kopf p { margin: 0; max-width: 36em; font-size: 1.1875rem; color: var(--salbeigrau-text); }
.sektion-petrol .sektion-kopf p { color: var(--auf-petrol-neben); }
@media (min-width: 1000px) {
  .sektion-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: end; margin-bottom: 64px; }
}

/* Leistungen */
.leistungen { display: grid; gap: 16px; }
@media (min-width: 900px) { .leistungen { grid-template-columns: 1fr 1fr; gap: 20px; } }
.leistung {
  padding: 20px 20px 28px;
  border-radius: var(--r-sehr-gross);
  background: var(--papierweiss);
}
.leistung h3 { font-size: 1.5rem; margin: 28px 0 12px; }
.leistung > p { margin: 0; max-width: 34em; }
@media (min-width: 768px) { .leistung { padding: 28px 28px 36px; } }

.vorschau {
  padding: 16px 18px 18px;
  border: 1px solid var(--salbeigrau-hell);
  border-radius: var(--r-mittel);
  background: var(--weiss);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.vorschau p { margin: 0; }
.vorschau .vorschau-zeile { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 0.8125rem; color: var(--salbeigrau-text); }
.vorschau .vorschau-titel { font-weight: 600; margin-bottom: 4px; }
.vorschau-text { color: var(--salbeigrau-text); }
.vorschau .vorschau-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vorschau-chips span { padding: 5px 12px; border-radius: 999px; background: var(--salbeigrau-hell); font-size: 0.8125rem; font-weight: 600; }
.vorschau-posten { list-style: none; margin: 0; padding: 0; counter-reset: posten; }
.vorschau-posten li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--salbeigrau-hell); counter-increment: posten; }
.vorschau-posten li span:first-child::before { content: counter(posten) "  "; color: var(--salbeigrau-text); font-variant-numeric: tabular-nums; }
.vorschau-posten li span:last-child { color: var(--salbeigrau-text); letter-spacing: 0.1em; }
.vorschau .vorschau-fuss { margin-top: 10px; font-size: 0.8125rem; color: var(--salbeigrau-text); }

.nicht-dabei {
  margin-top: 16px;
  padding: 24px 20px;
  border: 1px solid var(--salbeigrau);
  border-radius: var(--r-gross);
}
.nicht-dabei h3 { margin-bottom: 16px; }
.nicht-dabei ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 32px; }
.nicht-dabei li { position: relative; padding-left: 26px; }
.nicht-dabei li::before, .nicht-dabei li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.78em;
  width: 12px;
  height: 1.5px;
  background: var(--salbeigrau-text);
  transform: rotate(45deg);
}
.nicht-dabei li::after { transform: rotate(-45deg); }
@media (min-width: 768px) {
  .nicht-dabei { padding: 28px 32px; margin-top: 20px; }
  .nicht-dabei ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .nicht-dabei { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 32px; align-items: start; }
  .nicht-dabei h3 { margin: 0; }
  .nicht-dabei ul { grid-template-columns: repeat(3, 1fr); }
}

/* Beispiel: Mailfenster auf Petrol */
.sektion-petrol h2 { color: var(--weiss); }
.mailprogramm {
  background: var(--weiss);
  color: var(--anthrazit);
  border-radius: var(--r-gross);
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5;
}
.mp-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--salbeigrau-hell);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.875rem;
}
.mp-plakette { padding: 3px 10px; border-radius: 999px; background: var(--salbeigrau-hell); color: var(--salbeigrau-text); font-size: 0.75rem; }

.mp-liste { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; border-bottom: 1px solid var(--salbeigrau-hell); }
.mp-liste li, .mp-anfrage {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-mittel);
}
.ist-aktiv .mp-liste li { padding: 0; display: block; }
.mp-anfrage {
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}
.mp-anfrage:hover { background: var(--salbeigrau-hell); }
.mp-anfrage:hover .mp-betreff { text-decoration: underline; }
.mp-anfrage[aria-expanded="true"] { background: var(--papierweiss); }
.mp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--salbeigrau-hell);
  color: var(--anthrazit);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 0.875rem;
}
.mp-anfrage[aria-expanded="true"] .mp-avatar { background: var(--petrol); color: var(--weiss); }
.mp-inhalt, .mp-betreff, .mp-vorschau { display: block; min-width: 0; }
.mp-zeile { display: flex; justify-content: space-between; gap: 10px; }
.mp-von { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-zeit { flex: none; font-size: 0.8125rem; color: var(--salbeigrau-text); font-variant-numeric: tabular-nums; }
.mp-vorschau { font-size: 0.875rem; color: var(--salbeigrau-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.entwurf { padding: 22px 18px 26px; scroll-margin-top: 84px; }
.entwurf[hidden] { display: none; }
.entwurf + .entwurf { border-top: 1px solid var(--salbeigrau-hell); }
.entwurf-art { margin: 0 0 10px; font-family: var(--schrift-titel); font-weight: 600; font-size: 0.8125rem; color: var(--salbeigrau-text); }
.entwurf-kopf { margin: 0 0 14px; font-size: 0.9375rem; }
.entwurf-kopf div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--salbeigrau-hell); }
.entwurf-kopf dt { flex: none; width: 4.25em; color: var(--salbeigrau-text); }
.entwurf-kopf dd { margin: 0; }
.entwurf-zeit { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.entwurf-zeit li { padding: 4px 10px; border-radius: 999px; background: var(--salbeigrau-hell); }
.entwurf-zeit .entwurf-zeit-offen { background: none; border: 1px dashed var(--salbeigrau); color: var(--salbeigrau-text); }
.entwurf-text { max-width: 60ch; border-radius: var(--r-klein); }
.entwurf-text p { margin-bottom: 0.85em; }
.entwurf-text[contenteditable="true"] { outline: 2px dashed var(--petrol); outline-offset: 8px; }
.termine { list-style: none; padding: 0; margin: 0 0 0.85em; display: flex; flex-wrap: wrap; gap: 8px; }
.termine li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--salbeigrau); font-weight: 600; font-size: 0.9375rem; }

.freigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
  padding: 16px 0;
  border-block: 1px solid var(--salbeigrau-hell);
}
.mp-knopf {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--salbeigrau);
  background: var(--weiss);
  color: var(--anthrazit);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.mp-knopf:hover { border-color: var(--anthrazit); }
.mp-knopf[aria-pressed="true"] { background: var(--salbeigrau-hell); }
.mp-senden { background: var(--petrol); border-color: var(--petrol); color: var(--weiss); }
.mp-senden:hover { background: var(--anthrazit); border-color: var(--anthrazit); }
.freigabe-hinweis { flex-basis: 100%; margin: 6px 0 0; font-weight: 600; }
.freigabe-hinweis:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .freigabe-hinweis:not(:empty) { animation: auftauchen .35s ease-out; }
  .ist-aktiv .entwurf:not([hidden]) { animation: auftauchen .3s ease-out; }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.original { margin: 0; padding-left: 14px; border-left: 2px solid var(--salbeigrau-hell); font-size: 0.9375rem; color: var(--salbeigrau-text); }
.original p { margin-bottom: 0.6em; }
.original p:last-child { margin-bottom: 0; }

@media (min-width: 820px) {
  .mp-koerper { display: grid; grid-template-columns: minmax(270px, 34%) minmax(0, 1fr); }
  .mp-liste { align-content: start; border-bottom: 0; border-right: 1px solid var(--salbeigrau-hell); padding: 10px; }
  .mp-lesen { min-height: 640px; }
  .entwurf { padding: 28px 40px 36px; }
}

/* Fünf Zusagen: Auszug aus der Auftragsbestätigung */
.zusagen-raster { display: grid; gap: 40px; }
.zusagen-text p { margin-top: 20px; max-width: 26em; font-size: 1.1875rem; color: var(--salbeigrau-text); }
.blatt {
  padding: 24px 22px 28px;
  background: var(--weiss);
  border: 1px solid var(--salbeigrau);
  border-radius: 6px;
}
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 8px; padding-bottom: 16px; border-bottom: 1px solid var(--anthrazit); font-size: 0.8125rem; color: var(--salbeigrau-text); }
.blatt-kopf img { width: 92px; }
.klauseln { list-style: none; margin: 0; padding: 0; counter-reset: klausel; }
.klauseln li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 18px 0; border-bottom: 1px solid var(--salbeigrau-hell); counter-increment: klausel; }
.klauseln li::before { content: counter(klausel) "."; font-family: var(--schrift-titel); font-weight: 700; color: var(--petrol); font-variant-numeric: tabular-nums; line-height: 1.6; }
.klauseln h3, .klauseln p { grid-column: 2; }
.klauseln h3 { font-size: 1.125rem; margin-bottom: 4px; }
.klauseln p { margin: 0; color: var(--salbeigrau-text); }
.blatt-fuss { margin: 28px 0 0; font-size: 0.875rem; color: var(--salbeigrau-text); }
.unterschrift { display: block; width: min(240px, 70%); height: 1px; margin-bottom: 8px; background: var(--anthrazit); }
@media (min-width: 768px) { .blatt { padding: 36px 40px 40px; } }
@media (min-width: 1000px) {
  .zusagen-raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
  .zusagen-text { position: sticky; top: 120px; }
}

/* So läuft es: Zeitleiste mit Ziffern */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
.schritt { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; }
.schritt > :not(.schritt-nr) { grid-column: 2; }
.schritt-nr {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--petrol);
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-weight: 700;
}
.schritt:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21.5px;
  top: 56px;
  bottom: -26px;
  width: 1px;
  background: var(--salbeigrau);
}
.schritt-dauer {
  justify-self: start;
  margin-bottom: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--papierweiss);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.8125rem;
}
.schritt h3 { font-size: 1.375rem; margin-bottom: 10px; }
.schritt p:last-child { margin: 0; max-width: 34em; }
@media (min-width: 900px) {
  .schritte { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .schritt { display: block; }
  .schritt-nr { margin-bottom: 24px; }
  .schritt:not(:last-child)::after { left: 60px; right: -32px; top: 22px; bottom: auto; width: auto; height: 1px; }
  .schritt-dauer { display: inline-block; }
}

/* Preise */
.preise { display: grid; gap: 16px; }
@media (min-width: 1000px) { .preise { grid-template-columns: 1.08fr 1fr 1fr; gap: 20px; align-items: stretch; } }
.preis { display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--r-sehr-gross); }
.preis h3 { font-size: 1.5rem; margin-bottom: 16px; }
.preis-marke { align-self: flex-start; margin-bottom: 20px; padding: 4px 12px; border-radius: 999px; font-family: var(--schrift-titel); font-weight: 600; font-size: 0.8125rem; }
.preis-betrag { margin: 0 0 6px; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.preis-klein { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.preis-art { margin-bottom: 24px; font-size: 1rem; }
.haken { list-style: none; margin: 0 0 28px; padding: 20px 0 0; display: grid; gap: 10px; border-top: 1px solid; font-size: 1rem; }
.haken li { position: relative; padding-left: 28px; }
.haken li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 7px;
  height: 12px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.preis .knopf { margin-top: auto; align-self: flex-start; }

.preis-basic { background: var(--petrol); color: var(--papierweiss); }
.preis-basic h3, .preis-basic .preis-betrag { color: var(--weiss); }
.preis-basic .preis-marke { background: var(--papierweiss); color: var(--petrol); }
.preis-basic .preis-art { color: var(--auf-petrol-neben); }
.preis-basic .haken { border-color: var(--petrol-flaeche); }
.preis-standard { background: var(--papierweiss); }
.preis-betreuung { border: 1px solid var(--salbeigrau); }
.preis-standard .preis-marke, .preis-betreuung .preis-marke { background: var(--salbeigrau-hell); }
.preis-standard .preis-art, .preis-betreuung .preis-art { color: var(--salbeigrau-text); }
.preis-standard .haken, .preis-betreuung .haken { border-color: var(--salbeigrau); }
.preis-standard .haken li::before, .preis-betreuung .haken li::before { border-color: var(--petrol); }
.preise-hinweis { margin: 24px 0 0; font-size: 1rem; color: var(--salbeigrau-text); }
@media (min-width: 768px) { .preis { padding: 32px; } }

/* Über mich */
.ueber { display: grid; gap: 36px; }
.foto { width: min(100%, 360px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-sehr-gross); background: var(--salbeigrau-hell); }
.ueber-text h2 { margin-bottom: 28px; }
.ueber-text p { max-width: var(--zeile); }
.fakten { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fakten li { padding: 7px 14px; border-radius: 999px; background: var(--weiss); font-family: var(--schrift-titel); font-weight: 600; font-size: 0.875rem; }
@media (min-width: 900px) {
  .ueber { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
  .foto { width: 100%; max-width: 440px; }
}

/* Datenschutz */
.daten { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.daten li { padding: 24px 22px; border-radius: var(--r-gross); background: var(--papierweiss); }
.daten h3 { margin-bottom: 8px; }
.daten p { margin: 0; max-width: 40em; }
@media (min-width: 768px) { .daten { grid-template-columns: 1fr 1fr; gap: 20px; } .daten li { padding: 28px 32px; } }

/* Kontakt */
.kontakt { padding-bottom: var(--sektion); }
.kontakt-karte {
  display: grid;
  gap: 32px;
  padding: 36px 22px;
  border-radius: var(--r-sehr-gross);
  background: var(--petrol);
  color: var(--papierweiss);
}
.kontakt-karte h2 { color: var(--weiss); margin-bottom: 16px; }
.kontakt-text p { margin: 0; max-width: 28em; font-size: 1.1875rem; color: var(--auf-petrol-neben); }
.kontaktwege { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kontaktwege li { position: relative; }
.weg {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: var(--r-mittel);
  background: var(--petrol-flaeche);
  color: var(--weiss);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.weg svg { grid-row: span 2; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.weg svg .voll { fill: currentColor; stroke: none; }
.weg-art { font-size: 0.875rem; color: var(--auf-petrol-neben); transition: color .2s; }
.weg-wert { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.weg:hover { background: var(--papierweiss); color: var(--petrol); }
.weg:hover .weg-art { color: var(--salbeigrau-text); }
.kontaktwege :focus-visible { outline-color: var(--papierweiss); }
.kopieren {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 12px;
  border: 1px solid var(--auf-petrol-neben);
  border-radius: 999px;
  background: var(--petrol);
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.kopieren:hover { background: var(--weiss); color: var(--petrol); }
.mit-kopieren .weg { padding-right: 170px; }
@media (max-width: 480px) {
  .kopieren { position: static; transform: none; margin-top: 8px; }
  .mit-kopieren .weg { padding-right: 20px; }
}
@media (min-width: 900px) {
  .kontakt-karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 64px; }
}

/* Fusszeile */
.fuss { padding-block: 64px 48px; background: var(--papierweiss); font-size: 1rem; }
.fuss-raster { display: grid; gap: 40px; }
.fuss-marke { width: 124px; margin-bottom: 24px; }
.fuss address { font-style: normal; line-height: 1.6; }
.rechtliches { max-width: var(--zeile); border-bottom: 1px solid var(--salbeigrau); }
.fuss details { border-top: 1px solid var(--salbeigrau); }
.fuss summary { padding-block: 14px; font-family: var(--schrift-titel); font-weight: 600; color: var(--petrol); cursor: pointer; }
.fuss summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.fuss summary::marker { color: var(--salbeigrau-text); }
.fuss details p { font-size: 0.9375rem; }
.fuss details[open] { padding-bottom: 8px; }
.klein { margin: 0; font-size: 0.875rem; color: var(--salbeigrau-text); }
@media (min-width: 900px) {
  .fuss { padding-block: 88px 56px; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 80px; }
  .fuss-marke { width: 140px; }
  .klein { grid-column: 1 / -1; }
}

/* Druck */
@media print {
  @page { margin: 16mm 18mm; }
  :root { --sektion: 14pt; }
  body { font-size: 10pt; line-height: 1.45; }
  h1 { font-size: 24pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 11pt; }
  .kopf { position: static; }
  .kopf-nav, .sprung, .held-aktionen, .tag, .mp-liste, .mp-leiste, .freigabe, .kopieren, .preis .knopf { display: none; }
  .sektion-papier, .sektion-petrol, .fuss, .kontakt-karte, .preis-basic, .weg, .leistung, .daten li, .preis-standard { background: none; color: var(--anthrazit); }
  .sektion-petrol h2, .kontakt-karte h2, .preis-basic h3, .preis-basic .preis-betrag, .weg { color: var(--anthrazit); }
  .sektion-kopf { margin-bottom: 10pt; }
  .entwurf, .entwurf[hidden] { display: none; }
  .entwurf:first-of-type { display: block; padding: 0; }
  .mailprogramm, .preis, .schritt, .blatt, .nicht-dabei, .kontakt-karte, .daten li, .leistung { border: 1px solid var(--salbeigrau); border-radius: 6px; }
  .zusagen-text { position: static; }
  .foto { max-width: 35mm; }
  a { color: inherit; text-decoration: none; }
  h2, h3 { break-after: avoid; }
  li, .entwurf, .preis, .schritt, .leistung, .blatt { break-inside: avoid; }
}