/* ==========================================================================
   Haut „Hochwertig & ruhig“ (premium) · Look-Werkstatt Heinz IT Systeme
   Aufbau: 1 Schriften · 2 Tokens · 3 Grundlagen · 4 Bausteine (Knopf, Link,
   Bild, Listen, Tabellen) · 5 Rahmen (Kopf, Menü, Fuß, Leiste) · 6 Abschnitte
   · 7 Bewegung · 8 Druck
   Handy zuerst. Breakpoints: 24em (384 px), 30em (480 px), 40em (640 px),
   48em (768 px), 64em (1024 px), 80em (1280 px, volle Desktop-Navigation).
   ========================================================================== */

/* 1 Schriften ----------------------------------------------------------- */
@font-face {
  font-family: "Newsreader";
  src: url("/gebaeudereiniger/beispiele/hochwertig/assets/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/gebaeudereiniger/beispiele/hochwertig/assets/fonts/newsreader-kursiv-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/gebaeudereiniger/beispiele/hochwertig/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Ersatzschriften mit angeglichenen Maßen: kein Springen beim Schriftwechsel */
@font-face {
  font-family: "Newsreader Ersatz";
  src: local("Georgia");
  size-adjust: 94.6%;
  ascent-override: 78.2%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Ersatz";
  src: local("Arial"), local("Helvetica");
  size-adjust: 99.3%;
  ascent-override: 100.7%;
  descent-override: 30.2%;
  line-gap-override: 0%;
}

/* 2 Tokens -------------------------------------------------------------- */
:root {
  /* Farben (Kontrastwerte im README und in kontrast.json) */
  --c-papier: #f6f3ee;        /* Grund, gebrochenes Weiß */
  --c-papier-2: #ece6db;      /* Wechselgrund, Sand hell */
  --c-blatt: #fbf9f5;         /* Blatt, Formularfelder, Tafel */
  --c-weiss: #ffffff;         /* nur Hover des hellen Knopfs */
  --c-tinte: #16201d;         /* Text */
  --c-tinte-2: #3a433f;       /* Fließtext und Nebentext, eine Farbe für allen Lesetext */
  --c-gruen: #1f3a33;         /* Tannengrün: Handlungen, dunkle Flächen */
  --c-gruen-2: #2b4c43;       /* Tannengrün hell: Hover von Knöpfen */
  --c-gruen-tief: #1a3029;    /* Tannengrün tief: Hover von Flächen auf Grün */
  --c-nacht: #121b18;         /* Fuß */
  --c-messing: #b8975f;       /* Messing: nur Linien und Zierrat */
  --c-messing-text: #7a5e30;  /* Messing als Text auf hellem Grund */
  --c-messing-hell: #c9a86f;  /* Messing als Text auf dunklem Grund */
  --c-gruen-text: #c6d1ca;    /* Nebentext auf dunklem Grund */
  --c-linie: #d6cdbe;         /* Haarlinie auf hellem Grund */
  --c-linie-dunkel: rgba(246, 243, 238, 0.16);  /* Haarlinie auf Grün und Nacht */
  --c-rand-hell: rgba(246, 243, 238, 0.7);      /* Rand des hellen Linienknopfs auf Grün */
  --c-feldrand: #857b6c;      /* Rahmen von Eingabefeldern (≥ 3:1) */
  --c-fehler: #9c2a1c;        /* Fehlermeldungen und Fehlerrahmen (≥ 4,5:1 auf Papier und Blatt) */
  --c-schatten: rgba(22, 32, 29, 0.28);

  /* Abbildung auf die Token-Namen der Fabrik (haut/heinz/tokens.css) */
  --bg: var(--c-papier);
  --bg-alt: var(--c-papier-2);
  --surface: var(--c-blatt);
  --ink: var(--c-gruen);
  --text: var(--c-tinte);
  --text-2: var(--c-tinte-2);
  --text-on-ink: var(--c-papier);
  --text-on-ink-2: var(--c-gruen-text);
  --border: var(--c-linie);
  --border-control: var(--c-feldrand);
  --border-on-ink: var(--c-linie-dunkel);
  --primary: var(--c-gruen);
  --primary-hover: var(--c-gruen-2);
  --focus: var(--c-gruen);
  --focus-on-ink: var(--c-messing-hell);
  --err: var(--c-fehler);
  --input-bg: var(--c-blatt);

  /* Schriften */
  --f-serif: "Newsreader", "Newsreader Ersatz", Georgia, "Times New Roman", serif;
  --f-sans: "Hanken Grotesk", "Hanken Ersatz", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Schriftgrößen, fließend zwischen 360 und 1440 px */
  --fs-klein: 0.9375rem;                                   /* 15 */
  --fs-text: 1.0625rem;                                    /* 17 */
  --fs-vorspann: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h3: clamp(1.3125rem, 1.17rem + 0.55vw, 1.625rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.3vw, 3.25rem);
  --fs-h1: clamp(2.25rem, 1.45rem + 3.4vw, 4.25rem);
  --fs-display: clamp(2.375rem, 1.3rem + 4.4vw, 5.25rem);
  --fs-zahl: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --fs-zahl-wort: clamp(1.5rem, 1rem + 1vw, 2rem);
  --fs-kennzahl: clamp(2.5rem, 1.5rem + 2.6vw, 4rem);
  --fs-etikett: 0.8125rem;                                 /* 13 */

  /* Abstände */
  --s-3xs: 0.25rem;
  --s-2xs: 0.5rem;
  --s-xs: 0.75rem;
  --s-s: 1rem;
  --s-m: 1.5rem;
  --s-l: 2rem;
  --s-xl: 3rem;
  --s-2xl: clamp(3rem, 2rem + 3vw, 4.5rem);
  --s-sektion: clamp(3.25rem, 1.2rem + 8vw, 9rem);
  --rand: clamp(1.125rem, 0.5rem + 3vw, 4rem);
  --breite: 78rem;
  --breite-text: 42rem;
  --kopf-hoehe-mobil: 4rem;
  --kopf-hoehe: 4.75rem;
  --leiste-hoehe: 4rem;

  /* Radien, Linien, Schatten */
  --r-s: 2px;
  --r-m: 4px;
  --linie: 1px solid var(--c-linie);
  --sch-leise: 0 1px 2px rgba(22, 32, 29, 0.05), 0 18px 40px -24px var(--c-schatten);
  --sch-tafel: 0 30px 40px -30px var(--c-schatten);
  --sch-leiste: 0 -10px 30px -18px var(--c-schatten);

  /* Bildbehandlung: eine gemeinsame, gedeckte Farbwelt für Übergangsfotos */
  --bild-filter: saturate(0.82) contrast(0.97) brightness(1.01);

  /* Bewegung (nur bei prefers-reduced-motion: no-preference aktiv) */
  --t-kurz: 180ms;
  --t-mittel: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Symbole (Linien-Piktogramme als Masken, eine Quelle) */
  --sym-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2.5 10h14.5M11.5 4.5 17 10l-5.5 5.5'/%3E%3C/svg%3E");
  --sym-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4.2 2.8h3l1.4 3.8-2 1.3a9.7 9.7 0 0 0 5.5 5.5l1.3-2 3.8 1.4v3a1.6 1.6 0 0 1-1.7 1.6A15 15 0 0 1 2.6 4.5a1.6 1.6 0 0 1 1.6-1.7Z'/%3E%3C/svg%3E");
  --sym-post: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1'/%3E%3Cpath d='m3 5.5 7 5.5 7-5.5'/%3E%3C/svg%3E");
  --sym-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m4 10.5 4 4 8-9'/%3E%3C/svg%3E");
  --sym-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M10 3v14M3 10h14'/%3E%3C/svg%3E");
  --sym-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M3 10h14'/%3E%3C/svg%3E");
  --sym-winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
  --sym-winkel-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2316201d' stroke-width='1.5'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
  --sym-hinweis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 6v5M10 13.5v.5'/%3E%3C/svg%3E");
}

/* 3 Grundlagen ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe-mobil) + 1rem);
}
body {
  margin: 0;
  background: var(--c-papier);
  color: var(--c-tinte-2);
  font-family: var(--f-sans);
  font-size: var(--fs-text);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom, 0px));
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 420;
  line-height: 1.1;
  letter-spacing: -0.012em;
  font-variant-numeric: lining-nums;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1;
  text-wrap: balance;
  color: var(--c-tinte);
}
.dunkel h1, .dunkel h2, .dunkel h3 { color: var(--c-papier); }
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.016em; }
h3 { font-size: var(--fs-h3); font-weight: 460; line-height: 1.2; letter-spacing: -0.005em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-gruen); outline-offset: 3px; border-radius: var(--r-s); }
.dunkel :focus-visible, .fuss :focus-visible { outline-color: var(--c-messing-hell); }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--c-gruen); color: var(--c-papier); }

.sprung {
  position: absolute; left: var(--s-s); top: -4rem; z-index: 100;
  background: var(--c-gruen); color: var(--c-papier); padding: var(--s-xs) var(--s-s);
  font-weight: 600; text-decoration: none; border-radius: var(--r-s);
}
.sprung:focus { top: var(--s-s); }
.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Raster */
.huelle { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.sektion { padding-block: var(--s-sektion); }
.sektion--sand { background: var(--c-papier-2); }
.sektion--linie { border-top: var(--linie); }
.sektion--kurz-oben { padding-top: var(--s-2xl); }
.dunkel { background: var(--c-gruen); color: var(--c-papier); }
.dunkel p, .dunkel li, .dunkel dd { color: var(--c-gruen-text); }

.kopfzeile { display: grid; gap: var(--s-m); margin-bottom: var(--s-l); }
@media (min-width: 48em) { .kopfzeile { margin-bottom: var(--s-2xl); } }
.kopfzeile__vorspann { font-size: var(--fs-vorspann); color: var(--c-tinte-2); max-width: 38rem; line-height: 1.55; }
.dunkel .kopfzeile__vorspann { color: var(--c-gruen-text); }
@media (min-width: 64em) {
  .kopfzeile--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--s-xl); }
}
.textspalte { max-width: var(--breite-text); }
.textspalte > * + * { margin-top: 1em; }
.textspalte > .pos + h2 { margin-top: 0; }
.textspalte > h2 + * { margin-top: var(--s-m); }
.vorspann { font-size: var(--fs-vorspann); line-height: 1.55; color: var(--c-tinte-2); }
.nebentext { font-size: var(--fs-klein); color: var(--c-tinte-2); }
.dunkel .nebentext { color: var(--c-gruen-text); }

/* Abstands-Hilfen statt style-Attributen */
.abstand-m { margin-top: var(--s-m); }
.abstand-l { margin-top: var(--s-l); }
.abstand-xl { margin-top: var(--s-xl); }
.abstand-2xl { margin-top: var(--s-2xl); }
.mass-text { max-width: 50rem; }

/* Zierlinie in Messing über Überschriften */
.etikett-linie { display: block; width: 3rem; height: 1px; background: var(--c-messing); margin-bottom: var(--s-m); }
.kursiv { font-style: italic; font-weight: 400; }

/* Position wie im Leistungsverzeichnis: Erkennungszeichen der Unterseiten */
.pos {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 var(--s-s);
  font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.2;
  color: var(--c-messing-text); font-variant-numeric: lining-nums;
}
.pos::after { content: ""; width: 2.5rem; height: 1px; background: var(--c-messing); }
.dunkel .pos { color: var(--c-messing-hell); }

/* Kennzahl in der sonst leeren linken Spalte (nur Desktop, wiederholt den Text) */
.kennzahl { display: none; }
@media (min-width: 64em) {
  .kennzahl { display: grid; gap: 0.4rem; margin-top: var(--s-xl); padding-top: var(--s-m); border-top: 1px solid var(--c-messing); max-width: 22rem; }
  .kennzahl__wert { font-family: var(--f-serif); font-size: var(--fs-kennzahl); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--c-tinte); font-variant-numeric: lining-nums; }
  .kennzahl__text { font-size: var(--fs-klein); line-height: 1.45; color: var(--c-tinte-2); }
}

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

/* Knöpfe */
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s-xs); align-items: center; }
.knopfreihe:has(> .textlink) { column-gap: var(--s-l); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.7rem 1.5rem;
  font-family: var(--f-sans); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.005em;
  text-decoration: none; text-align: center; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-s);
  cursor: pointer;
}
.knopf--voll { background: var(--c-gruen); color: var(--c-papier); border-color: var(--c-gruen); }
.knopf--voll:hover { background: var(--c-gruen-2); border-color: var(--c-gruen-2); }
.knopf--linie { background: var(--c-papier); color: var(--c-tinte); border-color: var(--c-tinte); }
.sektion--sand .knopf--linie { background: var(--c-papier-2); }
.knopf--linie:hover { background: var(--c-tinte); color: var(--c-papier); }
.knopf--hell { background: var(--c-papier); color: var(--c-gruen); border-color: var(--c-papier); }
.knopf--hell:hover { background: var(--c-weiss); border-color: var(--c-weiss); }
.knopf--linie-hell { background: transparent; color: var(--c-papier); border-color: var(--c-rand-hell); }
.knopf--linie-hell:hover { background: var(--c-papier); color: var(--c-gruen); border-color: var(--c-papier); }
.knopf--klein { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 0.9375rem; }
.knopf:hover { text-decoration: none; }
.knopf:disabled, .knopf[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.knopf--voll:disabled:hover { background: var(--c-gruen); border-color: var(--c-gruen); }
@media (max-width: 39.99em) {
  .knopfreihe .knopf { flex: 1 1 100%; }
}

/* Symbole über CSS-Maske (keine Icon-Schrift, keine Anfrage) */
.mit-pfeil::after, .mit-tel::before, .mit-post::before {
  content: ""; display: inline-block; flex: none; width: 1.05em; height: 1.05em;
  background: currentColor;
  -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat;
}
.mit-pfeil::after { --symbol: var(--sym-pfeil); }
.mit-tel::before { --symbol: var(--sym-tel); }
.mit-post::before { --symbol: var(--sym-post); }

/* Textlink mit Pfeil */
.textlink {
  display: inline-flex; align-items: center; gap: 0.55em; min-height: 2.75rem;
  font-weight: 600; text-decoration: none; color: var(--c-tinte);
  border-bottom: 1px solid var(--c-messing); padding-block: 0.35rem 0.25rem; line-height: 1.3;
}
.textlink:hover { border-bottom-color: currentColor; }
.dunkel .textlink { color: var(--c-papier); border-bottom-color: var(--c-messing-hell); }
/* Leise Pfeilzeile: die ganze Karte ist der Link, die Zeile zeigt nur das Ziel */
.textlink--leise { min-height: 0; padding: 0; border-bottom: 0; font-weight: 500; font-size: var(--fs-klein); }
.textlink--leise::before { content: ""; position: absolute; inset: 0; }
.textlink--leise:hover { text-decoration: underline; text-decoration-color: var(--c-messing); }

/* Bilder: Container mit feinem Radius, gemeinsame Bildbehandlung */
.bild { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-m); background: var(--c-papier-2); }
.bild img { width: 100%; height: 100%; object-fit: cover; filter: var(--bild-filter); }
.bild--drei-vier { aspect-ratio: 3 / 4; }
.bild--breit { aspect-ratio: 4 / 3; }
@media (min-width: 64em) { .bild--breit { aspect-ratio: 21 / 9; } }

/* Platzhalter für Kundenfotos (Porträt): zeigt dem Interessenten, wo sein Foto steht */
.platzhalter {
  margin: 0; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-m);
  padding: var(--s-l) var(--s-xl); border-radius: var(--r-m); background: var(--c-papier); text-align: left;
}
.platzhalter::before { content: ""; position: absolute; inset: 0.75rem; border: 1px solid var(--c-messing); border-radius: var(--r-s); pointer-events: none; }
.platzhalter__monogramm {
  font-family: var(--f-serif); font-style: italic; font-size: clamp(2.75rem, 1.6rem + 4vw, 6rem); line-height: 1;
  color: var(--c-messing-text); letter-spacing: -0.02em;
}
.platzhalter__text { max-width: 16rem; font-size: var(--fs-etikett); font-weight: 600; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; color: var(--c-messing-text); }

/* Haarlinien-Liste */
.linienliste { list-style: none; border-top: var(--linie); }
.linienliste > li { padding: var(--s-s) 0 var(--s-s) 1.75rem; border-bottom: var(--linie); position: relative; }
.linienliste > li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--s-s) + 0.8em); width: 0.9rem; height: 1px; background: var(--c-messing);
}
.dunkel .linienliste { border-top-color: var(--c-linie-dunkel); }
.dunkel .linienliste > li { border-bottom-color: var(--c-linie-dunkel); }
.dunkel .linienliste > li::before { background: var(--c-messing-hell); }
@media (min-width: 48em) {
  .linienliste--zwei { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-xl); border-top: 0; }
  .linienliste--zwei > li:nth-child(-n + 2) { border-top: var(--linie); }
  .dunkel .linienliste--zwei > li:nth-child(-n + 2) { border-top-color: var(--c-linie-dunkel); }
}

/* Häkchenliste (Leistungsverzeichnis) */
.hakenliste { list-style: none; }
.hakenliste > li { position: relative; padding: 0.55rem 0 0.55rem 2rem; border-bottom: var(--linie); line-height: 1.5; }
.hakenliste > li:last-child { border-bottom: 0; }
.hakenliste > li::before {
  content: ""; position: absolute; left: 0; top: 0.8rem; width: 1.1rem; height: 1.1rem; background: var(--c-messing-text);
  -webkit-mask: var(--sym-haken) center / contain no-repeat;
          mask: var(--sym-haken) center / contain no-repeat;
}

/* Link-Liste mit Pfeil (Passende Leistungen, Ortsseite) */
.linkliste { list-style: none; border-top: var(--linie); }
.linkliste > li { border-bottom: var(--linie); }
.linkliste a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-m);
  min-height: 3.5rem; padding: var(--s-s) 0; text-decoration: none; font-size: 1.0625rem; line-height: 1.45;
}
.linkliste a::after {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: var(--c-messing-text);
  -webkit-mask: var(--sym-pfeil) center / contain no-repeat;
          mask: var(--sym-pfeil) center / contain no-repeat;
}
.linkliste a:hover { text-decoration: underline; }
@media (min-width: 48em) {
  .linkliste--zwei { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-xl); border-top: 0; }
  .linkliste--zwei > li:nth-child(-n + 2) { border-top: var(--linie); }
}

/* Tabellen: Haarlinien */
.tabelle { font-size: 1rem; line-height: 1.5; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: var(--s-s) var(--s-m) var(--s-s) 0; border-bottom: var(--linie); }
.tabelle thead th {
  font-family: var(--f-sans); font-size: var(--fs-etikett); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-messing-text); border-bottom: 1px solid var(--c-tinte); padding-bottom: var(--s-xs);
}
.tabelle tbody th { font-family: var(--f-serif); font-weight: 460; font-size: 1.1875rem; line-height: 1.3; color: var(--c-tinte); }
.tabelle td { color: var(--c-tinte-2); }
.tabelle tr > :last-child { padding-right: 0; }
.tabelle td.zahl { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* Stapeltabelle: auf dem Handy Zeilen mit Zeilenkopf als Titel und kurzen Etiketten in Lesetext-Farbe.
   Die Rollen stehen im HTML, damit die Tabellensemantik trotz display: block erhalten bleibt. */
@media (max-width: 47.99em) {
  .tabelle--stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle--stapel, .tabelle--stapel tbody, .tabelle--stapel tr, .tabelle--stapel th, .tabelle--stapel td { display: block; width: 100%; }
  .tabelle--stapel tr { padding: var(--s-s) 0; border-bottom: var(--linie); }
  .tabelle--stapel tbody tr:first-child { border-top: 1px solid var(--c-tinte); }
  .tabelle--stapel th, .tabelle--stapel td { border: 0; padding: 0; }
  .tabelle--stapel tbody th { margin-bottom: var(--s-3xs); font-size: 1.1875rem; }
  .tabelle--stapel td { padding-top: 0.15rem; font-size: 0.9375rem; }
  .tabelle--stapel td::before { content: attr(data-titel) ": "; font-weight: 600; color: var(--c-tinte); }
}

/* Vergleich: neutrale Tabelle, beide Spalten gleich breit. Auf dem Handy zwei Spalten, Kopfzeile nur einmal. */
.vergleich { table-layout: fixed; }
.vergleich col.spalte-kopf { width: 28%; }
.vergleich col.spalte { width: 36%; }
@media (max-width: 47.99em) {
  .vergleich, .vergleich thead, .vergleich tbody { display: block; }
  .vergleich tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-m); padding: var(--s-s) 0; border-bottom: var(--linie); }
  .vergleich thead tr { padding: 0 0 var(--s-xs); border-bottom: 1px solid var(--c-tinte); }
  .vergleich th, .vergleich td { display: block; padding: 0; border: 0; }
  .vergleich thead th { border: 0; padding: 0; }
  .vergleich thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vergleich tbody th { grid-column: 1 / -1; margin-bottom: var(--s-2xs); font-size: 1.125rem; }
  .vergleich td { font-size: 0.9375rem; line-height: 1.45; }
}

/* Mini-Tabelle (Anfahrt): bleibt auch auf dem Handy eine echte Tabelle */
@media (max-width: 47.99em) {
  .tabelle--mini th, .tabelle--mini td { padding: var(--s-xs) var(--s-xs) var(--s-xs) 0; }
  .tabelle--mini thead th { font-size: 0.75rem; letter-spacing: 0.06em; }
  .tabelle--mini tbody th { font-size: 1.0625rem; }
  .tabelle--mini td { font-size: 0.9375rem; }
}

/* Aufklappliste (Häufige Fragen) */
.fragen { border-top: 1px solid var(--c-tinte); }
.frage { border-bottom: var(--linie); }
.frage summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-m);
  min-height: 3.25rem; padding: 0.85rem 0; font-family: var(--f-serif); font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); font-weight: 460; line-height: 1.3;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; background: var(--c-messing-text);
  -webkit-mask: var(--sym-plus) center / contain no-repeat;
          mask: var(--sym-plus) center / contain no-repeat;
}
.frage[open] summary::after {
  -webkit-mask-image: var(--sym-minus);
          mask-image: var(--sym-minus);
}
.frage summary:hover { color: var(--c-gruen-2); }
.frage__antwort { padding: 0 2.5rem 1.5rem 0; color: var(--c-tinte-2); max-width: 44rem; }

/* 5 Rahmen -------------------------------------------------------------- */

/* Kopf: auf allen Breiten fest, deckend, Haarlinie unten */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--c-papier); color: var(--c-tinte); border-bottom: var(--linie); }
.kopf__innen { display: flex; align-items: center; gap: var(--s-2xs); min-height: var(--kopf-hoehe-mobil); }
.wortmarke { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; text-decoration: none; color: var(--c-tinte); margin-right: auto; padding-block: 0.4rem; }
.wortmarke__reihe { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.wortmarke__name { font-family: var(--f-serif); font-size: 1.5rem; font-weight: 480; letter-spacing: -0.015em; line-height: 1; }
.wortmarke__zusatz { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-messing-text); line-height: 1; }
.wortmarke:hover .wortmarke__name { text-decoration: underline; text-decoration-thickness: 1px; }
@media (min-width: 30em) {
  .wortmarke__reihe { flex-direction: row; align-items: baseline; gap: 0.55rem; }
  .wortmarke__name { font-size: 1.625rem; }
  .wortmarke__zusatz { font-size: 0.75rem; padding-left: 0.6rem; border-left: 1px solid var(--c-messing); }
}
.kopf__claim { display: none; }
.nav, .kopf__tel, .kopf__knopf { display: none; }

/* Anrufen im Handy-Kopf: immer sichtbar */
.kopf__anruf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; min-width: 2.75rem;
  padding: 0.5rem 0.85rem; border: 1px solid var(--c-tinte); border-radius: var(--r-s); background: var(--c-papier);
  color: var(--c-tinte); font-weight: 600; font-size: 0.9375rem; line-height: 1; text-decoration: none; white-space: nowrap;
}
.kopf__anruf:hover { background: var(--c-tinte); color: var(--c-papier); }
@media (max-width: 23.99em) {
  .kopf__anruf { padding: 0.5rem; }
  .kopf__anruf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Menü (Handy, Tablet, kleine Laptops): details/summary, ohne Skript */
.menue { position: static; }
.menue__knopf {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.5rem 0.85rem;
  border: 1px solid var(--c-tinte); border-radius: var(--r-s); font-weight: 600; font-size: 0.9375rem; line-height: 1; user-select: none; white-space: nowrap;
}
.menue__knopf::-webkit-details-marker { display: none; }
.menue__knopf::before {
  content: ""; width: 1.1rem; height: 0.7rem; flex: none;
  background: linear-gradient(currentColor, currentColor) top / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat;
}
.menue[open] .menue__knopf::before {
  height: 1rem;
  background: linear-gradient(45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px)),
              linear-gradient(-45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px));
}
.menue[open] .menue__zu, .menue:not([open]) .menue__auf { display: none; }
.menue__tafel {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--c-papier); border-bottom: var(--linie);
  box-shadow: var(--sch-tafel); max-height: calc(100svh - var(--kopf-hoehe-mobil)); overflow-y: auto;
}
.menue__innen { padding-block: var(--s-m) var(--s-xl); display: grid; gap: var(--s-l); }
.menue__haupt { list-style: none; border-top: var(--linie); }
.menue__haupt > li { border-bottom: var(--linie); }
.menue__haupt a { display: flex; align-items: center; min-height: 3.25rem; font-family: var(--f-serif); font-size: 1.5rem; text-decoration: none; }
.menue__gruppe { font-size: var(--fs-etikett); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-messing-text); margin-bottom: var(--s-2xs); }
.menue__unter { list-style: none; display: grid; grid-template-columns: 1fr; }
.menue__unter a { display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.menue__unter a:hover, .menue__haupt a:hover { text-decoration: underline; }
.menue a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-messing); }
@media (min-width: 30em) { .menue__unter { grid-template-columns: 1fr 1fr; column-gap: var(--s-m); } }

/* Ab 64em: Telefonnummer und Angebot im Kopf, Menü bleibt bis 80em */
@media (min-width: 64em) {
  body { padding-bottom: 0; }
  html { scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); }
  .kopf__innen { min-height: var(--kopf-hoehe); gap: var(--s-m); }
  .menue__tafel { max-height: calc(100svh - var(--kopf-hoehe)); }
  .kopf__anruf { display: none; }
  .kopf__tel {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 600; font-size: 0.96875rem;
    text-decoration: none; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums;
  }
  .kopf__tel:hover { text-decoration: underline; }
  .kopf__knopf { display: inline-flex; }
}
/* Ab 80em: volle Navigation */
@media (min-width: 80em) {
  .kopf__innen { gap: var(--s-l); }
  .wortmarke { margin-right: 0; }
  .kopf__claim { display: block; font-size: 0.8125rem; color: var(--c-tinte-2); line-height: 1.2; white-space: nowrap; }
  .menue { display: none; }
  .nav { display: block; margin-left: auto; }
  .nav__liste { list-style: none; display: flex; align-items: center; gap: 0.25rem; }
  .nav__liste > li { position: relative; }
  .nav__liste > li > a {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0.5rem 0.8rem; white-space: nowrap;
    font-size: 0.96875rem; font-weight: 500; text-decoration: none; color: var(--c-tinte); border-radius: var(--r-s);
  }
  .nav__liste > li > a:hover, .nav__liste > li > a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-messing); text-decoration-thickness: 1px; text-underline-offset: 0.45em; }
  .nav__mehr > a::after {
    content: ""; width: 0.6rem; height: 0.6rem; background: currentColor;
    -webkit-mask: var(--sym-winkel) center / contain no-repeat;
            mask: var(--sym-winkel) center / contain no-repeat;
  }
  .nav__unter {
    list-style: none; position: absolute; left: -0.5rem; top: 100%; min-width: 19rem; padding: var(--s-2xs) 0;
    background: var(--c-blatt); border: var(--linie); border-top: 2px solid var(--c-messing); border-radius: 0 0 var(--r-m) var(--r-m);
    box-shadow: var(--sch-leise); visibility: hidden; opacity: 0;
  }
  .nav__mehr:hover .nav__unter, .nav__mehr:focus-within .nav__unter { visibility: visible; opacity: 1; }
  .nav__unter a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 1.2rem; text-decoration: none; font-size: 0.96875rem; }
  .nav__unter a:hover { background: var(--c-papier-2); }
  .nav__unter a[aria-current="page"] { font-weight: 600; box-shadow: inset 2px 0 0 var(--c-messing); }
}

/* Fuß */
.fuss { background: var(--c-nacht); color: var(--c-papier); padding-block: var(--s-2xl) var(--s-l); border-top: 2px solid var(--c-messing); }
.fuss__raster {
  display: grid; gap: var(--s-xl) var(--s-m); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "betrieb betrieb" "leistungen recht" "gebiet gebiet";
}
.fuss__spalte--betrieb { grid-area: betrieb; }
.fuss__spalte--leistungen { grid-area: leistungen; }
.fuss__spalte--gebiet { grid-area: gebiet; }
.fuss__spalte--recht { grid-area: recht; }
.fuss h2 { font-family: var(--f-sans); font-size: var(--fs-etikett); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-messing-hell); margin-bottom: var(--s-s); line-height: 1.4; }
.fuss h2.fuss__marke { font-family: var(--f-serif); font-size: 1.625rem; font-weight: 460; letter-spacing: -0.01em; text-transform: none; color: var(--c-papier); }
.fuss address, .fuss p, .fuss li { color: var(--c-gruen-text); font-size: var(--fs-klein); line-height: 1.7; }
.fuss ul { list-style: none; }
.fuss li a, .fuss address a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-papier); text-decoration: none; line-height: 1.35; padding-block: 0.3rem; }
.fuss address a { min-height: 1.75rem; padding-block: 0; text-decoration: underline; text-decoration-color: var(--c-messing-hell); }
.fuss li a:hover, .fuss address a:hover { text-decoration: underline; }
.fuss__unten { margin-top: var(--s-2xl); padding-top: var(--s-m); border-top: 1px solid var(--c-linie-dunkel); display: flex; flex-wrap: wrap; gap: var(--s-s) var(--s-l); justify-content: space-between; }
.fuss__unten p { font-size: 0.875rem; color: var(--c-gruen-text); margin: 0; }
@media (min-width: 40em) {
  .fuss__raster { column-gap: var(--s-xl); grid-template-areas: "betrieb leistungen" "gebiet recht"; }
}
@media (min-width: 64em) {
  .fuss__raster { grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-template-areas: "betrieb leistungen gebiet recht"; }
}

/* Feste Leiste auf dem Handy: Anrufen / Angebot, mit dem Daumen erreichbar, deckend */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--s-2xs);
  padding: 0.5rem var(--rand) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--c-papier); border-top: var(--linie); box-shadow: var(--sch-leiste);
}
.leiste .knopf { min-height: 3rem; padding-inline: 0.75rem; font-size: 0.96875rem; }
.leiste .knopf--linie { background: var(--c-papier); }
.leiste--gleich { grid-template-columns: 1fr 1fr; }
/* Kontakt: beim Ausfüllen des Formulars weg, damit nichts das aktive Feld verdeckt */
body:has(.formular:focus-within) .leiste { display: none; }
@media (min-width: 64em) { .leiste { display: none; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 63.99em) {
    /* erst einblenden, wenn die Knöpfe des Einstiegs aus dem Bild sind */
    .leiste { animation: leiste-ein linear both; animation-timeline: scroll(root block); animation-range: 24rem 32rem; }
    @keyframes leiste-ein { from { transform: translateY(115%); visibility: hidden; } to { transform: none; visibility: visible; } }
  }
}

/* Brotkrumen */
.brotkrume { margin-bottom: var(--s-m); font-size: 0.9375rem; color: var(--c-tinte-2); }
.brotkrume ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.brotkrume li { display: inline-flex; align-items: center; }
.brotkrume li + li::before { content: "›" / ""; margin: 0 0.6rem; color: var(--c-messing-text); }
.brotkrume a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-tinte); }

/* 6 Abschnitte ---------------------------------------------------------- */

/* Hero Startseite: Serif-Überschrift links, Architekturfoto rechts */
.hero { padding-block: var(--s-m) var(--s-2xl); }
.hero__raster { display: grid; gap: var(--s-xl); }
.hero__titel { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.025em; font-weight: 400; }
.hero__vorspann { font-size: var(--fs-vorspann); line-height: 1.55; color: var(--c-tinte-2); max-width: 34rem; margin: var(--s-m) 0 var(--s-l); }
.hero__bild { aspect-ratio: 3 / 2; }
.hero__bild img { object-position: 62% 50%; }
@media (min-width: 64em) {
  .hero { padding-block: var(--s-l) var(--s-xl); }
  .hero__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; column-gap: clamp(2rem, 5vw, 5rem); }
  /* niedriger als früher, damit die Faktenleiste bei 900 px Fensterhöhe ganz im Erstbild steht */
  .hero__bild { aspect-ratio: auto; height: clamp(24rem, 62vh, 34rem); width: 100%; }
}

/* Seitenkopf Unterseiten */
.seitenkopf { padding-block: var(--s-s) var(--s-2xl); }
.seitenkopf__raster { display: grid; gap: var(--s-l); }
.seitenkopf__titel { font-size: var(--fs-h1); }
.seitenkopf__vorspann { font-size: var(--fs-vorspann); line-height: 1.55; color: var(--c-tinte-2); }
.seitenkopf__bild { margin-top: var(--s-2xl); }
.seitenkopf--bild-rechts .seitenkopf__bild { margin-top: var(--s-s); }
.seitenkopf__links { margin-top: var(--s-m); }
@media (min-width: 64em) {
  .seitenkopf { padding-top: var(--s-m); }
  .seitenkopf__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-xl); align-items: end; }
  .seitenkopf--bild-rechts .seitenkopf__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .seitenkopf--bild-rechts .seitenkopf__bild { margin-top: 0; aspect-ratio: auto; height: clamp(26rem, 72vh, 40rem); }
  .seitenkopf--bild-rechts .seitenkopf__text { padding-top: var(--s-l); }
}
@media (max-width: 63.99em) {
  /* Ortsseite: Hero-Bild auf dem Handy flacher, damit das LCP-Bild früher im Bild steht */
  .seitenkopf--bild-rechts .bild--drei-vier { aspect-ratio: 4 / 3; }
}
.kurzangaben { list-style: none; margin-top: var(--s-l); border-top: var(--linie); }
.kurzangaben li { display: flex; align-items: baseline; gap: var(--s-s); padding: 0.8rem 0; border-bottom: var(--linie); font-weight: 500; }
.kurzangaben--reihe { margin-top: 0; border-top: 0; }
@media (min-width: 48em) {
  .kurzangaben--reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kurzangaben--reihe li { padding: var(--s-m) var(--s-m) var(--s-m) 0; }
  .kurzangaben--reihe li + li { padding-left: var(--s-m); border-left: var(--linie); }
}
.kurzangaben li::before { content: ""; flex: none; width: 0.9rem; height: 1px; background: var(--c-messing); transform: translateY(-0.3em); }

/* Faktenleiste: 2 Spalten auf dem Handy, 3 plus 2 bis 80em, 5 in einer Reihe ab 80em */
.fakten-sektion { padding-bottom: var(--s-s); }
.fakten { border-block: var(--linie); }
.fakten__liste { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fakten__punkt { padding: var(--s-s) var(--s-s) var(--s-s) 0; border-bottom: var(--linie); display: grid; align-content: start; gap: 0.35rem; }
.fakten__punkt:nth-child(odd) { padding-right: var(--s-s); border-right: var(--linie); }
.fakten__punkt:nth-child(even) { padding-left: var(--s-s); }
.fakten__punkt:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.fakten__wert { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.35rem; font-weight: 600; font-size: 0.875rem; line-height: 1.1; color: var(--c-tinte); }
.fakten__zahl { font-family: var(--f-serif); font-size: var(--fs-zahl); font-weight: 400; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: lining-nums; }
.fakten__zahl--wort { font-size: var(--fs-zahl-wort); font-style: italic; line-height: 1.25; letter-spacing: -0.01em; }
.fakten__text { font-size: 0.9375rem; line-height: 1.45; color: var(--c-tinte-2); hyphens: auto; overflow-wrap: break-word; }
.fakten__mehr { display: flex; margin-top: var(--s-2xs); }
@media (min-width: 64em) { .fakten__mehr { justify-content: flex-end; } }
@media (min-width: 64em) {
  .fakten__liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fakten__liste > .fakten__punkt { grid-column: span 2; padding: var(--s-m) var(--s-m); border-right: var(--linie); border-bottom: 0; }
  .fakten__liste > .fakten__punkt:nth-child(-n + 3) { border-bottom: var(--linie); }
  .fakten__liste > .fakten__punkt:nth-child(n + 4) { grid-column: span 3; }
  .fakten__liste > .fakten__punkt:nth-child(1), .fakten__liste > .fakten__punkt:nth-child(4) { padding-left: 0; }
  .fakten__liste > .fakten__punkt:nth-child(3), .fakten__liste > .fakten__punkt:nth-child(5) { border-right: 0; padding-right: 0; }
}
@media (min-width: 80em) {
  .fakten__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fakten__liste > .fakten__punkt,
  .fakten__liste > .fakten__punkt:nth-child(n + 4) { grid-column: auto; padding: var(--s-l) var(--s-m); border-bottom: 0; border-right: var(--linie); }
  .fakten__liste > .fakten__punkt:nth-child(-n + 3) { border-bottom: 0; }
  .fakten__liste > .fakten__punkt:nth-child(3) { border-right: var(--linie); padding-right: var(--s-m); }
  .fakten__liste > .fakten__punkt:nth-child(4) { padding-left: var(--s-m); }
  .fakten__liste > .fakten__punkt:first-child { padding-left: 0; }
  .fakten__liste > .fakten__punkt:last-child { border-right: 0; padding-right: 0; }
}

/* Für wen: auf dem Handy Zeilen mit kleinem Vorschaubild, ab 40em Bildkacheln. Die ganze Karte ist der Link. */
.zielgruppen { list-style: none; display: grid; border-top: var(--linie); }
.zielgruppe { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--s-s); align-items: start; padding: var(--s-m) 0; border-bottom: var(--linie); }
.zielgruppe .bild { aspect-ratio: 1; }
.zielgruppe__text { display: flex; flex-direction: column; align-items: flex-start; }
.zielgruppe h3 { font-size: 1.1875rem; margin-bottom: var(--s-3xs); hyphens: auto; overflow-wrap: break-word; }
.zielgruppe p { color: var(--c-tinte-2); font-size: 0.9375rem; line-height: 1.5; margin-bottom: var(--s-2xs); }
@media (min-width: 40em) {
  .zielgruppen { grid-template-columns: 1fr 1fr; column-gap: var(--s-l); row-gap: var(--s-2xl); border-top: 0; }
  .zielgruppe { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: var(--s-m); padding: 0; border-bottom: 0; align-items: stretch; }
  .zielgruppe .bild { aspect-ratio: 4 / 3; }
  .zielgruppe h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2xs); }
  .zielgruppe p { font-size: 1rem; line-height: 1.6; margin-bottom: var(--s-s); }
  .zielgruppe .textlink { margin-top: auto; }
}
@media (min-width: 64em) {
  .zielgruppen { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-l); }
  .zielgruppe .bild { aspect-ratio: 4 / 5; }
  .zielgruppe h3 { font-size: 1.375rem; }
}

/* Leistungen: nummerierte Karten auf Tannengrün, die ganze Karte ist der Link */
.leistungen { list-style: none; display: grid; border-top: 1px solid var(--c-linie-dunkel); }
.leistung { position: relative; padding: 1.25rem 0; border-bottom: 1px solid var(--c-linie-dunkel); display: grid; row-gap: var(--s-2xs); grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--s-2xs); align-content: start; }
.leistung > * { grid-column: 2; }
.leistung > .leistung__nr { grid-column: 1; grid-row: 1; padding-top: 0.3rem; }
.leistung__nr { font-family: var(--f-serif); font-size: 1.0625rem; font-style: italic; color: var(--c-messing-hell); font-variant-numeric: lining-nums; }
.leistung h3 { font-size: clamp(1.4375rem, 1.3rem + 0.7vw, 2rem); color: var(--c-papier); }
.leistung p { max-width: 30rem; margin: 0; }
.dunkel .leistung .textlink { justify-self: start; color: var(--c-messing-hell); }
@media (min-width: 48em) {
  .leistungen { grid-template-columns: 1fr 1fr; column-gap: var(--s-xl); border-top: 0; }
  /* Subgrid: Nummer, Titel, Text und Pfeilzeile stehen in jeder Reihe auf einer Linie */
  .leistung { grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-xs); padding: var(--s-l) 0; }
  .leistung > *, .leistung > .leistung__nr { grid-column: 1; grid-row: auto; padding-top: 0; }
  .leistung .textlink { align-self: end; margin-top: var(--s-2xs); }
  .leistung:nth-child(-n + 2) { border-top: 1px solid var(--c-linie-dunkel); }
}
@media (min-width: 64em) {
  .leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .leistung { padding: var(--s-xl) var(--s-l); border-right: 1px solid var(--c-linie-dunkel); }
  .leistung:nth-child(3n + 1) { padding-left: 0; }
  .leistung:nth-child(3n) { border-right: 0; padding-right: 0; }
  .leistung:nth-child(-n + 3) { border-top: 1px solid var(--c-linie-dunkel); }
  .leistung:hover { background: var(--c-gruen-tief); }
  .leistung:nth-child(3n + 1):hover { box-shadow: -2rem 0 0 var(--c-gruen-tief); }
  .leistung:nth-child(3n):hover { box-shadow: 2rem 0 0 var(--c-gruen-tief); }
}

/* Ablauf: Zeitleiste (senkrecht auf dem Handy, waagerecht ab Desktop) */
.schritte { list-style: none; display: grid; gap: 0; counter-reset: schritt; }
.schritt { position: relative; padding: 0 0 var(--s-m) 3.75rem; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: -0.2rem; width: 2.5rem; height: 2.5rem; border: 1px solid var(--c-messing); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-serif); font-size: 1.125rem; background: var(--c-papier); color: var(--c-tinte);
  font-variant-numeric: lining-nums;
}
.schritt::after { content: ""; position: absolute; left: 1.25rem; top: 2.5rem; bottom: 0.2rem; width: 1px; background: var(--c-linie); }
.schritt:last-child { padding-bottom: 0; }
.schritt:last-child::after { display: none; }
.schritt h3 { margin-bottom: var(--s-2xs); }
.schritt p { color: var(--c-tinte-2); max-width: 36rem; }
.sektion--sand .schritt::before { background: var(--c-papier-2); }
@media (min-width: 64em) {
  .schritte--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-l); }
  .schritte--vier .schritt { padding: 4rem 0 0; }
  .schritte--vier .schritt::before { top: 0; }
  .schritte--vier .schritt::after { left: 3.25rem; right: calc(-1 * var(--s-l)); top: 1.25rem; bottom: auto; width: auto; height: 1px; }
  .schritte--vier .schritt:last-child::after { display: block; right: 0; }
}

/* Sechs Regeln: Bild links (nur ab Desktop), Raster rechts */
.regeln-raster { display: grid; gap: var(--s-2xl); }
.regeln-raster .bild { display: none; }
.regeln { list-style: none; display: grid; gap: 0; margin-top: var(--s-xl); border-top: 1px solid var(--c-tinte); }
.regel { padding: var(--s-s) 0; border-bottom: var(--linie); }
@media (min-width: 48em) { .regel { padding: var(--s-m) 0; } }
.regel h3 { font-size: 1.375rem; margin-bottom: var(--s-2xs); }
.regel p { color: var(--c-tinte-2); font-size: 1rem; }
@media (min-width: 48em) {
  .regeln { grid-template-columns: 1fr 1fr; column-gap: var(--s-xl); }
}
@media (min-width: 64em) {
  .regeln-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .regeln-raster .bild { display: block; aspect-ratio: 3 / 4; position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
}

/* Inhaberin mit Zitat */
.portraet-raster { display: grid; gap: var(--s-xl); }
.portraet-raster .platzhalter { max-width: 30rem; width: 100%; }
.portraet-raster .vorspann { font-size: 1.125rem; line-height: 1.65; }
.zitat { margin: var(--s-xl) 0 var(--s-l); padding-top: var(--s-l); border-top: 1px solid var(--c-messing); }
.zitat blockquote { margin: 0; }
.zitat blockquote p { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2.125rem); line-height: 1.3; color: var(--c-tinte); letter-spacing: -0.005em; }
.zitat figcaption { margin-top: var(--s-m); font-size: var(--fs-klein); font-weight: 600; color: var(--c-tinte-2); }
@media (min-width: 64em) {
  .portraet-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .portraet-raster .platzhalter { aspect-ratio: 4 / 5; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; }
}

/* Einsatzgebiet */
.gebiet-raster { display: grid; gap: var(--s-xl); }
.gebiet-raster .bild { aspect-ratio: 3 / 2; }
@media (max-width: 39.99em) { .gebiet-raster .bild { display: none; } }
.gebiet-hinweis { margin-top: var(--s-l); font-size: var(--fs-klein); color: var(--c-tinte-2); max-width: 40rem; }
.gebiet-link { margin-top: var(--s-l); }
.beispiele { margin-top: var(--s-xl); }
.beispiele h3 { font-size: 1.375rem; margin-bottom: var(--s-s); }
.beispiele .linienliste { font-size: 1rem; }
@media (min-width: 64em) {
  .gebiet-raster { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .gebiet-raster .bild { aspect-ratio: 1; position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
}

/* Band mit Bild (Jobs, Bezirk, Einarbeitung) */
.band { display: grid; gap: var(--s-xl); align-items: center; }
.band .bild { aspect-ratio: 3 / 2; }
.band .bild--ab-desktop { display: none; }
@media (min-width: 64em) {
  .band { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
  .band--bild-links { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .band--bild-links .bild { order: -1; }
  .band .bild--ab-desktop { display: block; }
}

/* Zwei Spalten: Überschrift links, Text rechts (editorial) */
.zweispalt { display: grid; gap: var(--s-l); }
.zweispalt + .zweispalt { margin-top: var(--s-2xl); padding-top: var(--s-2xl); border-top: var(--linie); }
@media (min-width: 64em) {
  .zweispalt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .zweispalt__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
}

/* Farbsystem der Tücher (Büroreinigung) */
.farben { list-style: none; margin-top: var(--s-l); display: grid; gap: 0; border-top: var(--linie); max-width: 24rem; }
.farben li { display: flex; align-items: center; gap: var(--s-xs); padding: 0.6rem 0; border-bottom: var(--linie); font-size: var(--fs-klein); color: var(--c-tinte-2); }
.farben__name { font-weight: 600; color: var(--c-tinte); min-width: 3.25rem; }
.farben li::before { content: ""; flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--farbe); }
.farben__rot { --farbe: #a8483b; }
.farben__gelb { --farbe: #c9a13f; }
.farben__blau { --farbe: #3f5f84; }
.farben__gruen { --farbe: #4f7a61; }

/* Leistungsverzeichnis als Blatt */
.blatt { background: var(--c-blatt); border: var(--linie); border-radius: var(--r-m); box-shadow: var(--sch-leise); }
.blatt__spalten { display: grid; }
.blatt__spalte { padding: var(--s-m) var(--s-m) var(--s-l); border-bottom: var(--linie); }
.blatt__spalte:last-child { border-bottom: 0; }
.blatt__spalte h3 { font-size: 1.375rem; margin-bottom: var(--s-s); padding-bottom: var(--s-xs); border-bottom: 1px solid var(--c-messing); }
@media (min-width: 64em) {
  .blatt__spalte { padding: var(--s-l); }
  .blatt__spalten { grid-template-columns: 1.25fr 1fr 1fr; }
  .blatt__spalte { border-bottom: 0; border-right: var(--linie); }
  .blatt__spalte:last-child { border-right: 0; }
}
.nach-blatt { margin-top: var(--s-l); display: grid; gap: var(--s-m); max-width: 44rem; }

/* Intervalle: Zeilen mit Begriff links */
.zeilen { list-style: none; border-top: 1px solid var(--c-tinte); }
.zeilen > li { display: grid; gap: var(--s-2xs); padding: var(--s-m) 0; border-bottom: var(--linie); color: var(--c-tinte-2); }
.zeilen > li > strong { font-family: var(--f-serif); font-weight: 460; font-size: 1.375rem; color: var(--c-tinte); line-height: 1.25; }
@media (min-width: 48em) { .zeilen > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-l); align-items: baseline; } }

/* Kasten mit Messingkante (Festpreis-Wortlaut, Objektleitung) */
.kante { border-left: 2px solid var(--c-messing); padding: var(--s-2xs) 0 var(--s-2xs) var(--s-m); }
.kante--gross { font-family: var(--f-serif); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.45; color: var(--c-tinte); }

/* Zeitleiste Geschichte */
.jahre { list-style: none; border-top: 1px solid var(--c-tinte); }
.jahre > li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-m); padding: var(--s-m) 0; border-bottom: var(--linie); color: var(--c-tinte-2); }
.jahre > li > strong { font-family: var(--f-serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var(--c-tinte); font-variant-numeric: lining-nums; }
@media (min-width: 48em) { .jahre > li { grid-template-columns: 9rem minmax(0, 1fr); } .jahre > li > strong { font-size: 2.25rem; } }

/* Team in Zahlen */
.team { list-style: none; border-top: 1px solid var(--c-tinte); }
.team > li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s-m); align-items: baseline; padding: var(--s-s) 0; border-bottom: var(--linie); color: var(--c-tinte-2); }
.team__zahl { font-family: var(--f-serif); font-size: 2.25rem; line-height: 1; color: var(--c-tinte); font-variant-numeric: lining-nums; }

/* Datenliste */
.daten { display: grid; border-top: 1px solid var(--c-tinte); margin: 0; }
.daten > div { display: grid; gap: 0.25rem; padding: var(--s-s) 0; border-bottom: var(--linie); }
.daten dt { font-size: var(--fs-etikett); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-messing-text); }
.daten dd { margin: 0; color: var(--c-tinte); }
.daten a { font-weight: 600; }
@media (min-width: 48em) { .daten > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-l); align-items: baseline; } }

/* Handlungsaufforderung */
.aufruf { padding-block: var(--s-sektion); }
.aufruf__raster { display: grid; gap: var(--s-l); }
.aufruf h2 { color: var(--c-papier); max-width: 16ch; }
.aufruf__text { font-size: var(--fs-vorspann); line-height: 1.55; max-width: 34rem; }
.aufruf .knopfreihe { margin-top: var(--s-l); }
.aufruf__zeiten { margin-top: var(--s-m); font-size: var(--fs-klein); }
@media (min-width: 64em) {
  .aufruf__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
}

/* Kontakt: auf dem Handy zuerst der direkte Kontakt, dann das Formular, dann die Anfahrt */
.kontakt-raster { display: grid; gap: var(--s-2xl); grid-template-areas: "direkt" "formular" "anfahrt"; }
.kontakt-raster > [data-abschnitt="kontakt-direkt"] { grid-area: direkt; }
.kontakt-raster > [data-abschnitt="kontakt-formular"] { grid-area: formular; }
.kontakt-raster > [data-abschnitt="kontakt-anfahrt"] { grid-area: anfahrt; }
@media (min-width: 64em) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 6vw, 6rem);
    grid-template-areas: "formular direkt" "formular anfahrt"; align-items: start;
  }
}
.formular { display: grid; gap: var(--s-m); }
.formular h2 { margin-bottom: var(--s-2xs); }
.feld { display: grid; gap: 0.4rem; }
.feld label, .feldgruppe legend { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--c-tinte); }
.feld__zusatz { font-weight: 400; color: var(--c-tinte-2); }
.feld__hilfe { font-size: var(--fs-klein); color: var(--c-tinte-2); line-height: 1.45; }
.feld__hilfe--nach-paar { margin-top: calc(-1 * var(--s-xs)); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 3.25rem; padding: 0.75rem 0.9rem; font: inherit; font-size: 1.0625rem; color: var(--c-tinte);
  background: var(--c-blatt); border: 1px solid var(--c-feldrand); border-radius: var(--r-s); appearance: none; -webkit-appearance: none;
}
.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.feld select {
  padding-right: 2.75rem;
  background-image: var(--sym-winkel-dunkel);
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.8rem;
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--c-gruen); outline-offset: 1px; border-color: var(--c-gruen); }
/* Fehlerzustand: kern/formular.js setzt aria-invalid und blendet die vorbereitete Meldung ein */
.feld [aria-invalid="true"] { border-color: var(--c-fehler); box-shadow: inset 0 0 0 1px var(--c-fehler); }
.feld__fehler { display: flex; align-items: center; gap: 0.45rem; font-size: var(--fs-klein); font-weight: 600; line-height: 1.4; color: var(--c-fehler); }
.feld__fehler::before {
  content: ""; flex: none; width: 1.05rem; height: 1.05rem; background: currentColor;
  -webkit-mask: var(--sym-hinweis) center / contain no-repeat; mask: var(--sym-hinweis) center / contain no-repeat;
}
.feld__fehler[hidden], .formular__meldung[hidden] { display: none; }
.formular__meldung { border-left: 2px solid var(--c-gruen); padding: var(--s-2xs) 0 var(--s-2xs) var(--s-m); font-weight: 600; color: var(--c-tinte); }
.formular__aus { display: flex; gap: 0.5rem; font-size: var(--fs-klein); line-height: 1.45; color: var(--c-tinte-2); }
.formular__aus::before {
  content: ""; flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; background: var(--c-messing-text);
  -webkit-mask: var(--sym-hinweis) center / contain no-repeat; mask: var(--sym-hinweis) center / contain no-repeat;
}
.feld-paar { display: grid; gap: var(--s-m); }
@media (min-width: 40em) { .feld-paar { grid-template-columns: 1fr 1fr; } }
.feldgruppe { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-xs); }
.wahl { display: flex; flex-wrap: wrap; gap: var(--s-2xs); }
.wahl label {
  position: relative; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 1px solid var(--c-feldrand); border-radius: var(--r-s); background: var(--c-blatt); font-weight: 500; cursor: pointer;
}
.wahl input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-gruen); }
.wahl label:has(input:checked) { border-color: var(--c-gruen); box-shadow: inset 0 0 0 1px var(--c-gruen); }
.weitere { border-top: var(--linie); border-bottom: var(--linie); }
.weitere > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 3.5rem; font-weight: 600;
}
.weitere > summary::-webkit-details-marker { display: none; }
.weitere > summary::after { content: ""; width: 1.1rem; height: 1.1rem; background: var(--c-messing-text);
  -webkit-mask: var(--sym-plus) center / contain no-repeat;
          mask: var(--sym-plus) center / contain no-repeat; }
.weitere[open] > summary::after { -webkit-mask-image: var(--sym-minus); mask-image: var(--sym-minus); }
.weitere__innen { display: grid; gap: var(--s-m); padding-bottom: var(--s-l); }
.hinweis-daten { font-size: var(--fs-klein); color: var(--c-tinte-2); max-width: 40rem; }
.formular .knopf { width: 100%; }
@media (min-width: 40em) { .formular .knopf { width: auto; justify-self: start; min-width: 14rem; } }
.daten--eng > div { grid-template-columns: 1fr; gap: 0.2rem; }
.seitenkasten h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-bottom: var(--s-m); }

/* Platzhalterseiten für nicht ausgearbeitete Leistungen */
.folgt { max-width: 44rem; }

/* 7 Bewegung: nur, wenn niemand reduzierte Bewegung wünscht ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .textlink, .nav__unter, .linkliste a, .frage summary, .leistung, .wahl label, .kopf__anruf {
    transition: background-color var(--t-kurz) var(--ease), color var(--t-kurz) var(--ease), border-color var(--t-kurz) var(--ease),
                opacity var(--t-kurz) var(--ease), visibility var(--t-kurz) var(--ease);
  }
  .mit-pfeil::after, .linkliste a::after { transition: transform var(--t-kurz) var(--ease); }
  .knopf:hover.mit-pfeil::after, .textlink:hover::after, .leistung:hover .textlink::after, .zielgruppe:hover .textlink::after, .linkliste a:hover::after { transform: translateX(3px); }
  .zielgruppe img { transition: transform 700ms var(--ease); }
  .zielgruppe:hover img { transform: scale(1.03); }
  .frage[open] .frage__antwort { animation: einblenden var(--t-mittel) var(--ease); }
  @keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* 8 Druck */
@media print {
  .kopf, .leiste, .menue, .aufruf { display: none !important; }
  body { padding: 0; background: var(--c-weiss); }
}