/* ArmoSystems — Instrument Serif (Überschriften) + Instrument Sans (Text), selbst gehostet. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/instrument-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/instrument-sans-600.woff2") format("woff2"); }

:root {
  --paper: #fbfaf7;
  --paper-2: #f1efe8;
  --weiss: #ffffff;
  --ink: #0F1412;    /* Schwarz: Linien und Text */
  --nacht: #0E2A1F;  /* dunkelgrüne Fläche: Abschnitte, Fuß — Weiß darauf 14,7:1 */
  --nacht-2: #143528;
  --gruen-tief: #08603F;
  --ink-2: #171D1A;
  --text: #0F1412;
  --text-2: #3A4340;
  --muted: #5F6B66;
  --muted-ink: #A6B0AB;
  --on-ink: #fbfaf7;
  --on-ink-2: #A6B0AB;
  --line: #e3e0d7;
  --line-2: #efece4;
  --line-ink: #1F4534;
  --sand: #f4f1e9;    /* wärmere Fläche */
  --lehm: #eef1ec;    /* Fläche mit einem Hauch Grün */
  --tinte: #e9ece8;   /* kühlste der hellen Flächen */
  --marke: #0FA36B;   /* Zeichen und große Auszeichnungen — 3,1:1, nur ab 24px */
  --gruen: #0B7A50;   /* Text und Bedienelemente — 5,1:1 */
  --gruen-hell: #34F5A0;
  --warn: #FFA8A0;   /* Fehler auf dunklem Grund — 7,4:1 */
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --rand: clamp(1.25rem, 4vw, 3.5rem);
  --breite: 80rem;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  /* Höhenskala: dieselbe Sprache wie die Berichtkarte im ersten Bild */
  --hoehe-1: 0 1px 2px rgb(17 20 24 / 0.05), 0 2px 6px -2px rgb(17 20 24 / 0.10);
  --hoehe-2: 0 1px 2px rgb(17 20 24 / 0.05), 0 10px 20px -10px rgb(17 20 24 / 0.20);
  --hoehe-3: 0 1px 2px rgb(17 20 24 / 0.05), 0 22px 44px -22px rgb(17 20 24 / 0.30);
  --hoehe-4: 0 1px 2px rgb(17 20 24 / 0.04), 0 30px 60px -30px rgb(17 20 24 / 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, dl, dd, dt, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.06; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); }
h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
h4 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gruen); margin-bottom: 0.625rem; }
::selection { background: var(--gruen); color: #fff; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.huelle { max-width: var(--breite); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.abschnitt { padding: clamp(4.5rem, 8vw, 7rem) 0; }
.abschnitt--ink { background: var(--nacht); color: var(--on-ink); }

.abschnitt--tief { background: var(--sand); --flaeche: #f4f1e9; }

/* ---------- Flächen: jeder Abschnitt eine eigene Farbe ----------
   Der Übergang läuft über 160 px, damit zwischen zwei Abschnitten keine Kante
   steht. Jeder Verlauf beginnt in der Farbe des Abschnitts darüber. */
.hero       { background: var(--paper);  --flaeche: #fbfaf7; }
.rechner    { background: linear-gradient(to bottom, var(--paper) 0, var(--weiss) 160px);  --flaeche: #ffffff; }
.faelle     { background: linear-gradient(to bottom, var(--weiss) 0, var(--sand) 160px);  --flaeche: #f4f1e9; }
.vorgehen   { background: linear-gradient(to bottom, var(--sand) 0, var(--paper) 160px);  --flaeche: #fbfaf7; }
.lage       { background: linear-gradient(to bottom, var(--paper) 0, var(--lehm) 160px);  --flaeche: #eef1ec; }
.leistungen { background: linear-gradient(to bottom, var(--lehm) 0, var(--weiss) 160px);  --flaeche: #ffffff; }
.passt      { background: linear-gradient(to bottom, var(--weiss) 0, var(--tinte) 160px);  --flaeche: #e9ece8; }
.person     { background: linear-gradient(to bottom, var(--tinte) 0, var(--sand) 160px);  --flaeche: #f4f1e9; }
.kontakt    { background: linear-gradient(to bottom, var(--sand) 0, var(--nacht) 24px);  --flaeche: #0e2a1f; }
/* Unterseiten: derselbe Ablauf, nur kürzer */
.seite      { background: var(--paper);  --flaeche: #fbfaf7; }
.seite + .abschnitt { background: linear-gradient(to bottom, var(--paper) 0, var(--weiss) 160px); }
.seite + .abschnitt + .abschnitt { background: linear-gradient(to bottom, var(--weiss) 0, var(--sand) 160px); }
.seite + .abschnitt + .abschnitt + .abschnitt { background: linear-gradient(to bottom, var(--sand) 0, var(--lehm) 160px); }

.abschnitt__kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: end; margin-bottom: 3.5rem; }
.abschnitt__kopf h2 { grid-column: span 7; }
.abschnitt__kopf p { grid-column: 9 / span 4; color: var(--text-2); }
.abschnitt__notiz { font-size: 0.875rem; color: var(--muted); border-left: 2px solid var(--line); padding-left: 0.875rem; }
@media (max-width: 56rem) { .abschnitt__kopf { grid-template-columns: 1fr; gap: 0.75rem; } .abschnitt__kopf h2, .abschnitt__kopf p { grid-column: auto; } }

/* Fokus, Touch, Sprunglink */
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
a, button, input[type=range] { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sprung { position: absolute; left: 1rem; top: -3rem; background: var(--nacht); color: var(--on-ink); display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.875rem; z-index: 50; transition: top 0.15s ease; }
.sprung:focus { top: 1rem; }

/* Knöpfe und Links */
.knopf { display: inline-block; background: var(--gruen); color: var(--on-ink); padding: 0.9375rem 1.5rem; font-size: 0.9375rem; font-weight: 600; border: 1px solid var(--gruen); transition: background 0.2s ease, border-color 0.2s ease; }
.knopf:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); }
.knopf--klein { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem; font-size: 0.875rem; }
.textlink { font-size: 0.9375rem; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color 0.2s ease; }
.textlink:hover { border-color: var(--gruen); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; position: -webkit-sticky; top: 0; z-index: 20; background: rgb(251 250 247 / 0.88); backdrop-filter: blur(10px); transition: background-color 0.35s ease, color 0.35s ease; }
/* Statt einer Linie eine Kante, die nach unten ausläuft. */
.kopf::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: linear-gradient(to bottom, rgb(17 20 24 / 0.06), rgb(17 20 24 / 0)); }
.kopf--fest::after { opacity: 1; }
/* Über der dunklen Fläche dreht die Schrift ins Helle. */
.kopf--dunkel { color: var(--on-ink); }
.kopf--dunkel .kopf__nav { color: var(--on-ink-2); }
.kopf--dunkel .kopf__nav a:hover, .kopf--dunkel .kopf__nav a.aktiv { color: var(--on-ink); }
.kopf--dunkel .kopf__nav a.aktiv { border-bottom-color: var(--gruen-hell); }
.kopf--dunkel .sprache { color: var(--on-ink-2); }
.kopf--dunkel .zeichen { stroke: var(--gruen-hell); }
.kopf--dunkel::after { background: linear-gradient(to bottom, rgb(0 0 0 / 0.25), rgb(0 0 0 / 0)); }
.kopf__reihe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 1.125rem; padding-bottom: 1.125rem; gap: 2rem; }
.kopf__name { font-family: var(--display); font-size: 1.375rem; font-weight: 400; letter-spacing: -0.01em; }
.kopf__nav { display: flex; gap: 2rem; font-size: 0.9375rem; font-weight: 500; color: var(--text-2); }
.kopf__nav a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.kopf__nav a:hover { color: var(--text); }
.kopf__nav a.aktiv { color: var(--text); border-bottom-color: var(--gruen); }
.kopf__rechts { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; font-size: 0.9375rem; }
.sprache { color: var(--muted); font-weight: 500; letter-spacing: 0.06em; }
.menue { display: none; font-size: 0.9375rem; font-weight: 600; padding: 0.625rem 0.75rem; margin-left: -0.75rem; min-height: 44px; }
@media (max-width: 56rem) {
  .kopf__reihe { grid-template-columns: 1fr auto auto; gap: 1rem; }
  .menue { display: inline-flex; align-items: center; }
  .kopf__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line-2); flex-direction: column; gap: 0; padding: 0.5rem var(--rand) 1rem; }
  .kopf__nav.offen { display: flex; }
  .kopf__nav a { padding: 0.875rem 0; border-bottom: 1px solid var(--line-2); min-height: 44px; display: flex; align-items: center; }
  .kopf__nav a.aktiv { border-bottom-color: var(--line-2); font-weight: 600; }
}
@media (max-width: 30rem) {
  .kopf__reihe { gap: 0.75rem; }
  .kopf__rechts { gap: 0.75rem; }
  .kopf__name span { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.hero__text { grid-column: span 6; }
.hero h1 { margin-bottom: 1.75rem; text-wrap: pretty; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--marke); }
.hero__lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--text-2); max-width: 32rem; margin-bottom: 2rem; }
.hero__aktion { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.hero__anruf { font-size: 0.875rem; color: var(--text-2); margin-bottom: 3.5rem; max-width: 34rem; }
/* Die Rufnummer steht bewusst nicht im Kopf der Seite; der Knopf zeigt nur das Zeichen. */
.knopf--tel { display: inline-flex; align-items: center; gap: 0.5625rem; }
.knopf__zeichen { width: 1.0625em; height: 1.0625em; flex: none; }
.hero__fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.25rem; max-width: 36rem; }
.hero__fakten dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.hero__fakten dd { font-size: 0.875rem; color: var(--text-2); line-height: 1.45; }

/* Der Bericht als Objekt im Raum */
.hero__bericht { grid-column: 8 / span 5; perspective: 1400px; }
.bericht { background: var(--weiss); color: var(--text); padding: 2.25rem 2.25rem 1.75rem; border: 1px solid var(--line-2); box-shadow: var(--hoehe-4); transform: rotateY(-9deg) rotateX(3deg); transform-style: preserve-3d; will-change: transform; }
.bericht__kopf { display: flex; justify-content: space-between; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.bericht__titel { font-size: 1.375rem; line-height: 1.2; margin-bottom: 0.75rem; }
.bericht__text { font-size: 0.875rem; color: var(--text-2); margin-bottom: 1.25rem; }
.bericht__tabelle { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: 1.25rem; }
.bericht__tabelle td { padding: 0.5rem 0; border-bottom: 1px solid var(--line-2); }
.bericht__summe td { font-weight: 600; border-bottom: 1px solid var(--ink); border-top: 1px solid var(--ink); }
.bericht__summe .zahl { font-family: var(--display); font-size: 1.375rem; font-weight: 400; }
.bericht__empfehlung { background: var(--paper); padding: 0.875rem 1rem; font-size: 0.8125rem; color: var(--text-2); }
.bericht__label { display: block; font-weight: 600; color: var(--text); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.25rem; }
.bericht__fuss { font-size: 0.75rem; color: var(--muted); margin-top: 1.25rem; }
@media (max-width: 64rem) {
  .hero__raster { align-items: start; }
  .hero__text { grid-column: span 12; }
  .hero__bericht { grid-column: span 12; max-width: 30rem; perspective: none; }
  .bericht { transform: none !important; }
}

/* ---------- Rechner ---------- */
.rechner { border-top: 1px solid var(--line); }
.rechner__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.rechner__intro { grid-column: span 5; position: sticky; top: 6rem; }
.rechner__intro h2 { margin-bottom: 1rem; max-width: 14ch; }
.rechner__intro p { color: var(--text-2); max-width: 28rem; }
.rechner__buehne { grid-column: 7 / span 6; perspective: 1600px; }
.rechner__karte { background: var(--weiss); border: 1px solid var(--line-2); padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: var(--hoehe-3); transform: rotateY(-3deg) rotateX(1.2deg); transform-style: preserve-3d; will-change: transform; }
.regler label { display: flex; justify-content: space-between; font-size: 0.9375rem; margin-bottom: 0.5rem; }
.regler output { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Höhe 44px: die Rille bleibt 2px, die Trefferfläche erfüllt die Mindestgröße für den Daumen. */
.regler input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; outline: none; margin: 0; cursor: pointer; display: block; touch-action: pan-y; }
.regler input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--line); }
.regler input[type=range]::-moz-range-track { height: 2px; background: var(--line); }
.regler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--gruen); border: 2px solid var(--weiss); box-shadow: 0 0 0 1px var(--gruen); }
.regler input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gruen); border: 2px solid var(--weiss); box-shadow: 0 0 0 1px var(--gruen); }
.regler input[type=range]:focus-visible { outline: 2px solid var(--gruen); outline-offset: 4px; }
.rechner__ergebnis { border-top: 1px solid var(--ink); padding-top: 1.25rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.rechner__label { display: block; font-size: 0.8125rem; color: var(--muted); }
.rechner__euro { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(2.25rem, 3.5vw, 3rem); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 0.25rem 0; }
.rechner__stunden { font-size: 0.8125rem; color: var(--muted); }
.rechner__ergebnis .diagramm { margin: 0; }

@media (max-width: 64rem) { .rechner__intro { grid-column: span 12; position: static; } .rechner__buehne { grid-column: span 12; perspective: none; } .rechner__karte { transform: none !important; } }

.diagramm figcaption { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.5rem; }
.diagramm__svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagramm__svg .raster { stroke: var(--line-2); stroke-width: 1; }
.diagramm__svg .grund { stroke: var(--line); stroke-width: 1; }
.diagramm__svg .balken { fill: var(--marke); }
.diagramm__svg .balken--letzter { fill: var(--ink); }
.diagramm__svg text { font-family: var(--sans); font-size: 11px; fill: var(--muted); }
.diagramm__svg .wert { font-size: 12px; font-weight: 600; fill: var(--text); text-anchor: end; }

/* ---------- Fälle ---------- */
.fall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; padding: 3rem 0; border-top: 1px solid var(--line); }
.fall:last-child { border-bottom: 1px solid var(--line); }
.fall__meta { grid-column: span 3; }
.fall__branche { display: block; font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.75rem; }
.fall__meta h3 { max-width: 14ch; }
/* Drei Spalten, durch Linien getrennt: Vorher | Gemacht | Seitdem.
   Die Linie sitzt in der Mitte zwischen den Texten, deshalb gap 0 und Innenabstand je Spalte. */
.fall__spalten { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; font-size: 0.9375rem; color: var(--text-2); }
.fall__spalten > * { padding: 0 1.125rem; border-left: 1px solid var(--line); }
.fall__spalten > *:first-child { padding-left: 0; border-left: 0; }
.fall__spalten > *:last-child { padding-right: 0; }
/* Die Schlusszeile steht jetzt unter der Fallüberschrift, wo Platz frei war —
   die drei Textspalten bekommen dafür die volle Breite. */
.fall__ergebnis { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: 14ch; }
.fall__ergebnis span { display: block; font-size: 0.8125rem; color: var(--muted); }
/* Auf der wärmeren Fläche reicht das helle Markengrün nicht mehr — dunkleres Grün. */
.fall__ergebnis em { display: block; font-family: var(--display); font-style: italic; font-size: 1.5rem; line-height: 1.15; color: var(--gruen); }
@media (max-width: 64rem) { .fall__meta, .fall__spalten { grid-column: span 12; } .fall__ergebnis { max-width: none; } }
@media (max-width: 40rem) {
  .fall__spalten { grid-template-columns: 1fr; }
  .fall__spalten > * { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .fall__spalten > *:first-child { padding-top: 0; border-top: 0; }
}

/* ---------- Vorher / Mit App ---------- */

/* ---------- Vorgehen ---------- */
.vorgehen__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.vorgehen__links { grid-column: span 5; position: sticky; top: 6rem; align-self: start; }
.vorgehen__links h2 { max-width: 14ch; margin-bottom: 1rem; }
.vorgehen__links p { color: var(--text-2); }
.schritte { grid-column: 7 / span 6; counter-reset: schritt; }
.schritt { counter-increment: schritt; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 2.25rem 0; border-top: 1px solid var(--line); transition: opacity 0.4s ease; }
.schritt:last-child { border-bottom: 1px solid var(--line); }
.schritt::before { content: counter(schritt, decimal-leading-zero); font-family: var(--display); font-size: 1.125rem; color: var(--muted); padding-top: 0.25rem; }
.schritt h3, .schritt p { grid-column: 2; }
.schritt h3 { margin-bottom: 0.625rem; }
.schritt p { color: var(--text-2); font-size: 0.9375rem; }
/* Der Schritt, der gerade dran ist, tritt hervor — die anderen bleiben lesbar.
   Kein opacity-Abblenden: Text unter 4,5:1 ist keine Nebenrolle, sondern unlesbar. */
.js .schritte.aktiv .schritt h3 { color: var(--muted); transition: color 0.4s ease; }
.js .schritte.aktiv .schritt p { color: var(--muted); transition: color 0.4s ease; }
.js .schritte.aktiv .schritt::before { color: var(--line); transition: color 0.4s ease; }
.js .schritte.aktiv .schritt.ist-aktiv h3 { color: var(--text); }
.js .schritte.aktiv .schritt.ist-aktiv p { color: var(--text-2); }
.js .schritte.aktiv .schritt.ist-aktiv::before { color: var(--gruen); }
@media (max-width: 64rem) { .vorgehen__links { grid-column: span 12; position: static; } .schritte { grid-column: span 12; } }

/* ---------- Lage ---------- */
.lage__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.lage__karte { background: var(--weiss); padding: 2rem; border: 1px solid var(--line-2); box-shadow: var(--hoehe-2); transition: box-shadow 0.18s ease, transform 0.18s ease; }
.lage__karte:hover { box-shadow: var(--hoehe-3); transform: translateY(-2px); }
.lage__karte h3 { margin-bottom: 0.25rem; }
.lage__unter { font-size: 0.9375rem; color: var(--muted); margin-bottom: 1rem; }
.lage__karte p:last-child { font-size: 0.9375rem; color: var(--text-2); }
.zitat { font-family: var(--display); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.4; color: var(--text-2); max-width: 44rem; margin-top: 3rem; }
@media (max-width: 56rem) { .lage__raster { grid-template-columns: 1fr; } }

/* ---------- Leistungen ---------- */
.leistungen__liste { border-top: 1px solid var(--line); }
.leistung { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.leistung dt { grid-column: span 4; font-family: var(--display); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; }
.leistung dd { grid-column: 6 / span 7; color: var(--text-2); font-size: 0.9375rem; }
@media (max-width: 56rem) { .leistung dt, .leistung dd { grid-column: span 12; } .leistung { gap: 0.75rem; } }

/* ---------- Passt ---------- */
.passt__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
/* Zwei gegenteilige Aussagen sahen gleich aus. Die Linie sagt vor dem Lesen, welche welche ist. */
.passt__raster > * { padding-left: 1.25rem; border-left: 2px solid var(--line); }
.passt__raster > *:first-child { border-left-color: var(--gruen); }
.passt h3 { margin-bottom: 0.875rem; font-size: 1.375rem; }
.passt p { color: var(--text-2); font-size: 0.9375rem; }
@media (max-width: 56rem) { .passt__raster { grid-template-columns: 1fr; } }

/* ---------- Person ---------- */
.person__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.person__bild { grid-column: span 4; }
.person__bild img { width: 100%; height: auto; }
.person__text { grid-column: 6 / span 7; }
.person__text h2 { margin-bottom: 1.25rem; }
.person__text p { color: var(--text-2); }
.person__text p + p { margin-top: 1rem; }
.marken { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.marken li { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; border: 1px solid var(--line); padding: 0.375rem 0.625rem; color: var(--text-2); background: var(--weiss); box-shadow: var(--hoehe-1); }
@media (max-width: 56rem) { .person__bild { grid-column: span 12; max-width: 16rem; } .person__text { grid-column: span 12; } }

/* ---------- Kontakt ---------- */
.kontakt__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem 3rem; align-items: stretch; }
.kontakt__text { grid-column: span 5; display: flex; flex-direction: column; }
.kontakt h2 { margin-bottom: 1.25rem; max-width: 16ch; text-wrap: pretty; }
.kontakt__text p { color: var(--on-ink-2); max-width: 32rem; }
.kontakt__text p + p { margin-top: 1.125rem; }
/* Der Block sitzt unten, damit die linke Spalte auf derselben Linie endet wie das Formular. */
.kontakt__wege { display: flex; flex-direction: column; gap: 0.75rem; margin-top: auto; padding-top: 2.5rem; }
/* Auf den Leistungsseiten steht der Block ohne Formular direkt im Raster und braucht eine eigene Spalte. */
.kontakt__raster > .kontakt__wege { grid-column: 7 / span 6; margin-top: 0; }
.kontakt__tel { font-family: var(--display); font-size: 2rem; letter-spacing: -0.01em; }
.kontakt__vorsatz { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-ink); margin-right: 0.625rem; vertical-align: 0.35em; }
.kontakt__mail .kontakt__vorsatz { vertical-align: baseline; }
.kontakt__mail { font-size: 1rem; word-break: break-all; }
.kontakt a:hover { color: var(--gruen-hell); }
.kontakt__ort { font-size: 0.8125rem; color: var(--muted-ink); margin-top: 0.75rem; }
.kontakt :focus-visible { outline-color: var(--gruen-hell); }

/* Formular: dunkler Grund, deshalb eigene Feldfarben */
.formular { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 1.25rem; }
.formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.feld { display: flex; flex-direction: column; gap: 0.4375rem; }
.feld > label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-2); }
.feld__zusatz { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--muted-ink); }
.feld input, .feld textarea { font: inherit; width: 100%; color: var(--on-ink); background: var(--nacht-2); border: 1px solid var(--line-ink); border-radius: 0; padding: 0.6875rem 0.875rem; min-height: 44px; -webkit-appearance: none; appearance: none; box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.28); transition: border-color 0.2s ease, background 0.2s ease; }
.feld textarea { resize: vertical; line-height: 1.55; }
.feld input:hover, .feld textarea:hover { border-color: #2C5A44; }
.feld input:focus, .feld textarea:focus { border-color: var(--gruen-hell); background: #10321F; }
.feld--fehler input, .feld--fehler textarea { border-color: var(--warn); }
.feld__fehler { font-size: 0.8125rem; color: var(--warn); }
.feld--haken { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; min-height: 44px; }
.feld--haken .feld__fehler { flex-basis: 100%; margin-left: 2.25rem; }
/* Das Kästchen braucht die Darstellung des Browsers zurück — mit appearance: none
   aus der Regel darüber zeichnet er weder Rahmen noch Haken, und der Klick
   wirkt wie nicht angekommen. */
.feld--haken input { flex: none; width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0.125rem 0 0; padding: 0; -webkit-appearance: auto; appearance: auto; accent-color: var(--marke); background: transparent; box-shadow: none; }
.feld--haken label { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--on-ink-2); cursor: pointer; padding: 0.25rem 0; }
.feld--haken a { border-bottom: 1px solid var(--line-ink); }
.feld--haken a:hover { border-bottom-color: var(--gruen-hell); }
.formular .knopf { align-self: flex-start; }
.formular__stand { font-size: 0.9375rem; }
.formular__stand:empty { display: none; }
.formular__stand.ist-fehler { color: var(--warn); }
.formular__stand.ist-gut { color: var(--gruen-hell); }
.formular__fuss { font-size: 0.8125rem; color: var(--muted-ink); }
.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular--fertig { border: 1px solid var(--line-ink); padding: 2rem; }
@media (max-width: 56rem) {
  /* Zwölf Spalten mit 3rem Abstand passen auf kleine Schirme nicht — eine Spalte reicht. */
  .kontakt__raster { grid-template-columns: 1fr; gap: 2.5rem; }
  .kontakt__text, .formular, .kontakt__raster > .kontakt__wege { grid-column: auto; }
  .formular__paar { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht); color: var(--muted-ink); border-top: 1px solid var(--line-ink); }
/* Kein Banner, sondern ein Satz: die Seite setzt tatsächlich keine Cookies. */
.fuss__hinweis { font-size: 0.8125rem; color: var(--on-ink-2); }
.fuss__reihe { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 0.8125rem; }
.fuss__links { display: flex; gap: 1.5rem; }
.fuss a:hover { color: var(--on-ink); }

/* ---------- Bewegung: wenig, und nur wo es etwas erzählt ---------- */
.js .r { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) {
  .rechner__karte { transform: none !important; }
  .lage__karte:hover { transform: none; }
  html { scroll-behavior: auto; }
  .js .r { opacity: 1; transform: none; }
  .bericht { transform: none !important; }
  .js .schritte.aktiv .schritt h3, .js .schritte.aktiv .schritt p,
  .js .schritte.aktiv .schritt::before { transition: none; }
}
@media (max-width: 40rem) {
  .hero__fakten { grid-template-columns: 1fr; gap: 0.875rem; }
  .bericht { padding: 1.5rem; }
  .bericht__kopf { flex-direction: column; gap: 0.25rem; }
}

/* ---------- Trefferflächen: kein Ziel unter 44px hoch ---------- */
.fuss__links { align-items: center; }
.fuss__links a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss__reihe > span { display: inline-flex; align-items: center; min-height: 44px; }
.kopf__rechts .sprache { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
/* Der Textlink behält seine Unterstreichung dicht am Wort; die Trefferfläche
   wächst über ein unsichtbares Feld, nicht über Innenabstand. */
.textlink { position: relative; }
.textlink::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
.kontakt__mail { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Rechtsseiten: Impressum, Datenschutz, AGB ---------- */
.recht { max-width: 44rem; padding-top: 3.5rem; padding-bottom: 4rem; }
.recht h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 1.75rem; }
.recht h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.recht h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.recht p { color: var(--text-2); margin-bottom: 1rem; max-width: 38rem; }
.recht address { font-style: normal; color: var(--text-2); margin-bottom: 1rem; }
.recht a { border-bottom: 1px solid var(--line); }
.recht a:hover { border-color: var(--gruen); }
.recht .punkte { color: var(--text-2); padding-left: 1.25rem; margin-bottom: 1rem; max-width: 38rem; }
.recht .punkte li { margin-bottom: 0.375rem; }
.recht .hinweis { background: var(--paper-2); border-left: 2px solid var(--gruen); padding: 1rem 1.25rem; font-size: 0.9375rem; color: var(--text-2); margin: 1.5rem 0; }
.recht .stand { font-size: 0.8125rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 3rem; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 600; color: var(--text-2); }
.zurueck:hover { color: var(--text); }

/* ---------- Kopf der Rechtsseiten ---------- */
.kopf__ort { font-size: 0.9375rem; color: var(--muted); text-align: center; }
nav.sprache { display: flex; justify-content: flex-end; gap: 0.75rem; }
nav.sprache a, nav.sprache .sprache__aktiv { display: inline-flex; align-items: center; min-height: 44px; }
.sprache__aktiv { color: var(--text); font-weight: 600; }

/* ---------- Zeichen im Kopf ---------- */
.kopf__name { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px; }
.zeichen { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; display: block; }
.zeichen path { stroke: var(--marke); }
@media (max-width: 56rem) { .zeichen { width: 1.5rem; height: 1.5rem; } }

/* ---------- Kunden: Logos der Betriebe, die zugestimmt haben ---------- */
.kunden { border-top: 1px solid var(--line); }
.kunden__kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: baseline; margin-bottom: 2.5rem; }
.kunden__kopf h2 { grid-column: span 5; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.kunden__kopf p { grid-column: 7 / span 5; color: var(--text-2); font-size: 0.9375rem; }
.kunden__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3.5rem; }
.kunden__liste li { display: flex; align-items: center; }
.kunden__liste img { height: 2.5rem; width: auto; max-width: 11rem; object-fit: contain; }
.kunden__platz { min-width: 8.5rem; height: 2.5rem; justify-content: center; border: 1px dashed var(--line-stark, var(--line)); color: var(--muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.kunden__notiz { margin-top: 2rem; padding-left: 0.875rem; border-left: 2px solid var(--marke); font-size: 0.875rem; color: var(--muted); max-width: 42rem; }
@media (max-width: 56rem) {
  .kunden__kopf { grid-template-columns: 1fr; gap: 0.75rem; }
  .kunden__kopf h2, .kunden__kopf p { grid-column: auto; }
  .kunden__liste { gap: 1.5rem 2.5rem; }
}

/* ---------- Leistungsseiten ---------- */
.seite { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.seite__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: end; }
.seite__text { grid-column: span 7; }
.seite__kicker { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gruen); margin-bottom: 1rem; }
.seite h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 1.5rem; text-wrap: pretty; }
.seite__lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--text-2); max-width: 34rem; }
.seite__neben { grid-column: 9 / span 4; }
.seite__neben dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.seite__neben dd { font-size: 0.875rem; color: var(--text-2); line-height: 1.45; margin-bottom: 1rem; }
@media (max-width: 56rem) { .seite__text, .seite__neben { grid-column: span 12; } }
/* Der erste Abschnitt schließt dichter an den Seitenkopf an */
.seite + .abschnitt { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

.punkte { color: var(--text-2); padding-left: 1.25rem; list-style: disc; max-width: 40rem; }
.punkte li { margin-bottom: 0.5rem; }
.hinweis { background: var(--paper-2); border-left: 2px solid var(--marke); padding: 1rem 1.25rem; font-size: 0.9375rem; color: var(--text-2); margin: 1.5rem 0; max-width: 44rem; box-shadow: var(--hoehe-1); }
.abschnitt--ink .hinweis { background: var(--nacht-2); color: var(--on-ink-2); border-left-color: var(--gruen-hell); }
/* Kurzform ohne Seitenwerte hatte den Rand aus .huelle überschrieben — der Link klebte am Bildschirmrand. */
.zurueck-band { border-top: 1px solid var(--line); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.leistung dt a { position: relative; border-bottom: 1px solid var(--line); transition: border-color 0.2s ease; }
/* Trefferfläche ohne die Unterstreichung vom Wort wegzuschieben */
.leistung dt a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
.leistung dt a:hover { border-color: var(--gruen); }
.leistung__mehr { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--gruen); }