/* ============================================================
   Gebäudetechnik Boldt – Stylesheet, zweiter Entwurf
   Gestalterisches Vorbild: daume.de (Dachdeckerbetrieb Ahaus).
   Übernommen: Vollbild-Foto als Einstieg, Versalüberschriften,
   kantige Flächen ohne Rundungen, Bildkacheln, Kennzahlenblock.
   Nicht übernommen: das Orange. Die Farben kommen weiterhin
   aus Marcels Logo – Blau #336699, Rot #d3140b, Grau #808080.
   ============================================================ */

/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink:        #1a1a18;
  --ink-soft:   #4c5257;
  --dunkel:     #1f1f1d;   /* dunkle Abschnitte */
  --dunkel-2:   #2b2b28;   /* Fußleiste, Kacheln auf dunkel */
  --blau:       #336699;
  --blau-tief:  #24496e;
  --blau-hell:  #9cc0e3;   /* Blau auf dunklem Grund */
  --blau-hauch: #eaf0f6;
  --rot:        #d3140b;
  --rot-tief:   #a90f08;
  --grau:       #808080;
  --linie:      #dbe0e5;
  --linie-dunkel: #3a3a36;
  --flaeche:    #f3f5f7;
  --weiss:      #ffffff;

  --serif: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --breite: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --block:  clamp(3.75rem, 8vw, 6.5rem);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau-tief); }

/* Überschriften stehen in Versalien – das ist der auffälligste Zug
   des Vorbilds. h3 bleibt gemischt, sonst werden Listen unlesbar. */
h1, h2 {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.9vw, 2.9rem); }
h3 { font-size: 1.2rem; }

/* Lange deutsche Komposita brechen nicht von allein. "Datenschutz-
   erklärung" und "Berufshaftpflichtversicherung" sind breiter als eine
   Handy-Spalte: Sie malen über den Rand und machen dadurch das ganze
   Dokument breiter. Die Aktionsleiste unten ist position:fixed und
   richtet sich nach dieser Breite – sie hängt dann halb aus dem Bild,
   sichtbar am abgeschnittenen WhatsApp-Knopf. Gemessen am 28.10.2026
   bei 375 px: Datenschutz 475 px, Impressum 413 px, Wärmepumpe 379 px.

   break-word ist der Notnagel: Es greift nur, wenn ein Wort sonst gar
   nicht passt, und ändert an bestehenden Umbrüchen nichts. Wo es
   greift, bricht es allerdings ohne Trennstrich mitten im Wort
   ("WARTUNGSVERTRA / G"). Deshalb stehen in den betroffenen
   Überschriften weiche Trennstriche (­), die den Bruch an die
   richtige Stelle legen. Welche das sind, steht im Commit.

   Bewusst kein "hyphens: auto": Dem Browser im Prüfwerkzeug fehlt das
   deutsche Trennwörterbuch — die Regel bleibt dort wirkungslos, auf
   echten Telefonen aber nicht. Die Umbrüche von 18 Seiten wären damit
   nicht nachprüfbar gewesen. Weiche Trennstriche wirken überall
   gleich und lassen sich hier messen. */
h1, h2, h3 { overflow-wrap: break-word; }
p  { margin: 0 0 1.1em; max-width: 68ch; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kicker: kleine Zeile über der Überschrift ---------- */
.kicker {
  font-family: var(--sans); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--blau); margin: 0 0 1rem; max-width: none;
}
.kicker--hell { color: var(--blau-hell); }
/* Versalien schalten ein ß zu SS um - aus Großheide würde GROSSHEIDE.
   Bei einem Ortsnamen ist das unerwünscht, deshalb steht dieser Kicker
   schon im Quelltext in Versalien, mit dem großen ẞ (U+1E9E), das
   Archivo mitbringt. Die Umschaltung wird hier abgestellt. */
.kicker--versal { text-transform: none; }

/* ---------- Buttons: kantig, Versalien, wie beim Vorbild ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--sans); font-weight: 600;
  font-size: .9rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 1rem 1.9rem; border-radius: 0; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; text-align: left;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn--rot   { background: var(--rot); color: #fff; border-color: var(--rot); }
.btn--rot:hover   { background: var(--rot-tief); border-color: var(--rot-tief); }
.btn--linie { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--linie:hover { background: var(--ink); color: #fff; }
.btn--weiss { background: #fff; color: var(--ink); border-color: #fff; }
.btn--weiss:hover { background: transparent; color: #fff; }
.btn--dunkel { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dunkel:hover { background: var(--blau); border-color: var(--blau); }

/* Auf dunklem Grund bekommt die Linien-Variante helle Kontur */
.notruf .btn--linie, .kontakt .btn--linie, .abschnitt--blau .btn--linie,
.hero .btn--linie {
  border-color: #fff; color: #fff;
}
.notruf .btn--linie:hover, .kontakt .btn--linie:hover,
.abschnitt--blau .btn--linie:hover, .hero .btn--linie:hover {
  background: #fff; color: var(--ink);
}

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--linie);
}
.kopf__zeile { display: flex; align-items: center; gap: 1rem; padding-block: .65rem; }
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marke img.mark { width: 34px; }
.marke img.wort { width: 148px; }

.nav { display: none; gap: 1.6rem; margin-left: auto; }
.nav a {
  font-family: var(--sans); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink); text-decoration: none;
  padding-block: .4rem; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--blau); }
.kopf .btn { display: none; padding: .8rem 1.3rem; }

/* Menüknopf für schmale Fenster – ohne JavaScript, per Checkbox */
.menue { position: absolute; opacity: 0; pointer-events: none; }
.burger {
  margin-left: auto; display: flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .13em;
  padding: .75rem .9rem; border: 1px solid var(--linie);
  color: var(--ink); cursor: pointer; background: #fff;
}
.burger span {
  display: block; position: relative; width: 20px; height: 2px;
  background: var(--ink);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.menue:focus-visible + .burger { outline: 3px solid var(--rot); outline-offset: 2px; }

.menue:checked ~ .nav {
  display: flex; flex-direction: column; gap: 0;
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--linie);
  padding: .5rem var(--gutter) 1.2rem;
}
.menue:checked ~ .nav a {
  border-bottom: 1px solid var(--linie); padding-block: .95rem; font-size: .85rem;
}

@media (min-width: 64rem) {
  .nav { display: flex; }
  .burger { display: none; }
  .kopf .btn { display: inline-flex; margin-left: .6rem; }
}

/* ---------- Blaues Leistungsband (vom Anhänger übernommen) ---------- */
.band { background: var(--blau); color: #fff; }
.band__inhalt {
  display: flex; flex-wrap: wrap; gap: .4rem 2.2rem;
  padding-block: .95rem;
  font-family: var(--sans); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
}
.band__inhalt span { display: flex; align-items: center; gap: .9rem; }
.band__inhalt span::before {
  content: ""; width: .45rem; height: .45rem; background: #fff; opacity: .75; flex: none;
}

/* ---------- Hero: Foto über die volle Breite ---------- */
.hero { position: relative; isolation: isolate; background: var(--dunkel); }
/* Das Hero-Foto liegt im Querformat 1945x809 vor und wird dadurch selbst
   auf breiten Bildschirmen kaum noch hochskaliert. Der Bildausschnitt
   sitzt oben, damit Marcels Kopf im Bild bleibt. */
.hero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%; z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(98deg,
      rgba(16,16,14,.92) 0%, rgba(16,16,14,.80) 34%,
      rgba(16,16,14,.42) 62%, rgba(16,16,14,.58) 100%);
}
/* Die Hoehe ist bewusst knapp gehalten: Je hoeher der Hero, desto staerker
   muss das 1945x809-Foto gestreckt werden, und desto mehr Bildbreite faellt
   seitlich weg. Bei rund 850 Pixeln bleibt der Massstab nahe 1:1. */
.hero__inhalt {
  padding-block: clamp(3rem, 9vw, 6rem);
  min-height: clamp(26rem, 60vh, 36rem);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__kicker {
  font-family: var(--sans); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--blau-hell); margin: 0 0 1.1rem; max-width: none;
}
.hero h1 { color: #fff; margin-bottom: .45em; max-width: 18ch; }
.hero__lead { font-size: 1.2rem; color: #e6e9ec; max-width: 44ch; font-weight: 500; }
.hero__sub  { color: #bcc2c7; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__meta {
  margin-top: 2.2rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; max-width: 46rem;
  font-family: var(--sans); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .14em;
  color: #cfd4d8;
}
.hero__meta span { display: flex; align-items: center; gap: 1.6rem; }
.hero__meta span + span::before { content: ""; width: 1px; height: .9rem; background: rgba(255,255,255,.3); }
.hero__stempel {
  margin: 1.8rem 0 0;
  display: inline-block; align-self: flex-start;
  background: var(--blau); color: #fff;
  font-family: var(--sans); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .14em;
  padding: .6rem 1rem;
}
@media (max-width: 48rem) {
  /* Schmales Fenster: der Ausschnitt rutscht nach rechts, damit Marcel
     im Bild bleibt und nicht nur die Fahrzeugseite zu sehen ist. */
  .hero__foto { object-position: 62% 30%; }
  .hero::after {
    background: linear-gradient(180deg, rgba(16,16,14,.72) 0%, rgba(16,16,14,.88) 55%, rgba(16,16,14,.94) 100%);
  }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--block); }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--hauch   { background: var(--blau-hauch); }
.abschnitt--dunkel  { background: var(--dunkel); color: #e6e9ec; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }

.abschnitt__kopf { max-width: 60ch; margin-bottom: 2.8rem; }
.abschnitt__kopf p { color: var(--ink-soft); margin-bottom: 0; }
.abschnitt__kopf p + p { margin-top: .9rem; }
.abschnitt__kopf .abschnitt__sub {
  font-size: 1.15rem; font-weight: 500; color: var(--ink); margin-bottom: .9rem;
}
.marker { display: block; width: 64px; height: 4px; background: var(--blau); margin-bottom: 1.3rem; }

/* Mittig gesetzter Einstieg, wie der Begrüßungsblock beim Vorbild */
.abschnitt--mitte .abschnitt__kopf {
  max-width: 68ch; margin-inline: auto; text-align: center; margin-bottom: 2.2rem;
}
.abschnitt--mitte .abschnitt__kopf p { max-width: none; }
.abschnitt--mitte .marker { margin-inline: auto; }
.abschnitt--mitte .abschnitt__cta {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 0;
}

/* ---------- Bildkacheln für die Leistungen ---------- */
.kacheln { display: grid; gap: 1.4rem; }
@media (min-width: 42rem) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .kacheln { grid-template-columns: repeat(3, 1fr); } }

.kachel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 21rem; padding: 1.6rem;
  background: var(--blau-tief); color: #fff; text-decoration: none;
}
.kachel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform .4s ease;
}
.kachel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,16,14,.18) 0%, rgba(16,16,14,.55) 48%, rgba(16,16,14,.88) 100%);
}
.kachel:hover img, .kachel:focus-visible img { transform: scale(1.04); }
.kachel h3 {
  font-size: 1.3rem; text-transform: uppercase; letter-spacing: .01em;
  color: #fff; margin-bottom: .5rem;
}
.kachel p { font-size: .97rem; color: #d7dbdf; margin-bottom: 1rem; max-width: 34ch; }
.kachel .mehr {
  font-family: var(--sans); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
  color: #fff; display: inline-flex; align-items: center; gap: .5rem;
}
.kachel .mehr::after { content: "\2192"; }
.kachel:hover .mehr, .kachel:focus-visible .mehr { color: var(--blau-hell); }

/* Kacheln ohne Foto: blaue Fläche mit großem Symbol im Hintergrund */
.kachel--blau { background: var(--blau); }
.kachel--blau::after { background: none; }
.kachel--blau > svg {
  position: absolute; right: -2.5rem; top: -2rem; z-index: -1;
  width: 15rem; height: 15rem; stroke: #fff; fill: none; stroke-width: 1.1;
  opacity: .18;
}
.kachel--blau p { color: #dbe6f2; }

/* ---------- Leistungen als Textliste (Unterseiten) ---------- */
.leistungen { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 40rem) { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .leistungen { grid-template-columns: repeat(3, 1fr); } }
.leistung { background: #fff; padding: 2rem 1.8rem; display: flex; flex-direction: column; }
.leistung svg { width: 36px; height: 36px; stroke: var(--blau); fill: none; stroke-width: 1.6; margin-bottom: 1.2rem; }
.leistung h3 { text-transform: uppercase; font-size: 1.15rem; margin-bottom: .6rem; }
.leistung p { font-size: .97rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.leistung a.mehr {
  margin-top: auto; text-decoration: none; color: var(--blau-tief);
  font-family: var(--sans); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
  display: inline-flex; align-items: center; gap: .5rem;
}
.leistung a.mehr::after { content: "\2192"; }
.leistung a.mehr:hover { color: var(--rot); }

/* ---------- Notdienst-Streifen ----------
   Zwei Fassungen, bewusst verschieden:

   .notruf          das Band auf der Startseite. Unveraendert aus dem ersten
                    Entwurf: gemischte Schreibweise, weisser Kicker, ruhige
                    Abstaende. Die eine Stelle, an der die Seite nicht ruft,
                    sondern spricht.
   .notruf--schluss das Abschlussband der zwoelf Unterseiten. Bleibt im
                    Versalsatz des zweiten Entwurfs, siehe weiter unten. */
.notruf { background: var(--dunkel); color: #fff; }
.notruf__inhalt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.5rem;
  padding-block: clamp(1.9rem, 4vw, 2.6rem);
}
.notruf__text { max-width: 58ch; }
.notruf__kicker {
  margin: 0 0 .55rem;
  font-family: var(--sans); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .09em; color: #fff;
}
.notruf__titel {
  margin: 0 0 .75rem;
  font-family: var(--serif); font-weight: 700; text-transform: none;
  line-height: 1.08; letter-spacing: -0.015em;
  font-size: clamp(1.5rem, 3vw, 2rem); color: #fff;
}
.notruf__fliess { margin: 0; color: #c9ced3; }
.notruf__zusage { margin: 1.1rem 0 0; font-weight: 600; color: #fff; }
.notruf__gebiet { margin: .3rem 0 0; font-size: .92rem; color: #9aa1a7; }
.notruf__mehr { margin: .9rem 0 0; }
.notruf__mehr a {
  display: inline-block;
  color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-block: .3rem;
}
.notruf__mehr a::after { content: " \2192"; }
.notruf__mehr a:hover { border-bottom-color: #fff; }
.notruf__titel a { color: inherit; text-decoration: none; }
.notruf__titel a:hover { text-decoration: underline; }
@media (min-width: 48rem) { .notruf .btn { margin-left: auto; } }

/* Abschlussband der Unterseiten: zurueck in den Versalsatz des zweiten
   Entwurfs. Nur die Startseite behaelt die ruhige Fassung von oben.
   Gebietszeile und Weiterlesen-Link stehen heute nur auf der Startseite.
   Die Regeln dafuer bleiben hier, damit ein spaeter ergaenztes
   Abschlussband nicht versehentlich in der anderen Fassung erscheint. */
.notruf--schluss { margin-top: 0; }
.notruf--schluss .notruf__inhalt { padding-block: clamp(2.6rem, 6vw, 4rem); }
.notruf--schluss .notruf__kicker {
  margin-bottom: 1rem;
  font-size: .8rem; letter-spacing: .16em; color: var(--blau-hell);
}
.notruf--schluss .notruf__titel {
  margin-bottom: .9rem;
  text-transform: uppercase; letter-spacing: .005em; line-height: 1.05;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
}
.notruf--schluss .notruf__zusage {
  margin-top: 1.3rem; padding-left: 1.1rem;
  border-left: 4px solid var(--rot); font-size: 1.1rem;
}
.notruf--schluss .notruf__gebiet {
  margin-top: 1rem;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
  font-weight: 600;
}
.notruf--schluss .notruf__mehr { margin-top: 1.2rem; }
.notruf--schluss .notruf__mehr a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
}
.notruf--schluss .notruf__mehr a::after { content: "\2192"; }

/* ---------- Argumente ---------- */
.argumente { display: grid; gap: 2.4rem; }
@media (min-width: 55rem) { .argumente { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 55rem) { .argumente--vier { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .argumente--vier { grid-template-columns: repeat(4, 1fr); } }
.argument { border-top: 4px solid var(--blau); padding-top: 1.4rem; }
.argument .argument__nr {
  margin: 0 0 .7rem;
  font-family: var(--serif); font-weight: 700;
  font-size: 2.6rem; line-height: 1; color: var(--blau); opacity: .35;
}
.argument h3 { text-transform: uppercase; font-size: 1.1rem; margin-bottom: .6rem; }
.argument p { font-size: .99rem; color: var(--ink-soft); margin-bottom: 0; }
.argumente__fazit {
  margin: clamp(2.4rem, 5vw, 3.2rem) 0 0; padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
  font-size: 1.08rem; max-width: 74ch;
}

/* ---------- Blauer Kennzahlenblock (Vorbild: oranger Block) ---------- */
.abschnitt--blau { background: var(--blau); color: #fff; }
.abschnitt--blau h2, .abschnitt--blau h3 { color: #fff; }
.abschnitt--blau p { color: #dde8f3; }
.abschnitt--blau .marker { background: #fff; }
.panel { display: grid; gap: 2.8rem; align-items: center; }
/* Eine Gitterzelle ist von Haus aus nie schmaler als ihr längstes
   unteilbares Wort. overflow-wrap: break-word ändert daran nichts:
   Es erlaubt den Umbruch, zählt für die Mindestbreite aber nicht
   mit. Ohne min-width: 0 sprengt "Ansprechpartner" deshalb bei
   320 px die Spalte und mit ihr das ganze Dokument – gemessen am
   28.10.2026: 328 px statt 305. Der weiche Trennstrich in der
   Überschrift sorgt dafür, dass der Umbruch sauber sitzt. */
@media (max-width: 324px) {
  /* Nur die letzten schmalen Geraete (iPhone SE 1, iPhone 5: 320 px).
     Dort ist "ANSPRECHPARTNER" mit 310 px breiter als die Spalte mit
     280 px und schob das Dokument auf 328 px -- die Seite liess sich
     seitlich schieben. Ab 328 px Fensterbreite passt das Wort; die
     Regel endet deshalb bei 324 px.
     Verworfen: das Wort umbrechen lassen. Es gibt keine Trennstelle,
     die nicht auch am Rechner wirkt -- ein weicher Trennstrich kostet
     dort eine dritte Zeile (gemessen: 97 -> 145 px bei 1280 px), und
     ohne ihn bricht es als "ANSPRECHPARTN / ER". Eine kleinere
     Ueberschrift auf 320 px faellt dagegen niemandem auf. */
  .panel > * { min-width: 0; }
  .abschnitt--blau h2 { font-size: 1.55rem; }
}
@media (min-width: 58rem) { .panel { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
.zahlen { display: grid; gap: 2.2rem 2rem; grid-template-columns: repeat(2, 1fr); }
/* Jede Zahl steht in einer eigenen Zelle mit Oberkante. Das Symbol liegt
   als blasse Marke rechts oben und fuellt die Flaeche, die eine kurze
   Zahl wie die 1 sonst leer laesst. */
.zahl {
  position: relative; text-align: left;
  border-top: 2px solid rgba(255,255,255,.32);
  padding: 1.1rem 3.25rem 0 0;
}
.zahl svg {
  position: absolute; top: 1.1rem; right: 0;
  width: 2.5rem; height: 2.5rem;
  stroke: #fff; fill: none; stroke-width: 1.4; opacity: .4; margin: 0;
}
.zahl b {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.05; color: #fff;
  letter-spacing: -0.01em; margin-bottom: .5rem;
  white-space: nowrap;   /* alle vier Zahlen bleiben einzeilig */
}
.zahl span {
  display: block; font-size: .9rem; color: #cfdcea; max-width: 24ch; line-height: 1.45;
}
@media (max-width: 30rem) {
  .zahlen { grid-template-columns: 1fr; gap: 1.6rem; }
  .zahl span { max-width: none; }
}

/* ---------- Referenz: Bild und Text nebeneinander ---------- */
.referenz { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 58rem) { .referenz { grid-template-columns: .85fr 1.15fr; } }
.referenz img { border-radius: 0; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.referenz--im-projekt { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.referenz--im-projekt h3 { margin-top: 0; }

.liste { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.liste li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; }
.liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .6rem; height: .6rem; background: var(--blau);
}

/* ---------- Über Marcel ---------- */
.person { display: grid; gap: 2.8rem; }
@media (min-width: 58rem) { .person { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.person blockquote {
  margin: 0; padding-left: 1.5rem; border-left: 4px solid var(--rot);
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.3; letter-spacing: -0.01em;
}
.person__bild { margin: 0 0 1.8rem; }
.person__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.person__bild figcaption { margin-top: .7rem; font-size: .92rem; color: var(--ink-soft); }
.werdegang__titel { text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; }
/* Die Beschriftungsspalte ist so breit wie ihr laengster Eintrag und laeuft
   ueber alle Zeilen durch. Dafuer ist die Liste selbst das Raster und die
   Zeilen reichen ihre beiden Zellen durch (display: contents). Die Trennlinie
   sitzt deshalb an den Zellen, nicht an der Zeile. */
.werdegang {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: max-content 1fr; column-gap: 1.75rem;
}
.werdegang li { display: contents; }
.werdegang b, .werdegang span {
  border-top: 1px solid var(--linie);
  padding-block: .95rem;
}
.werdegang li:last-child b, .werdegang li:last-child span {
  border-bottom: 1px solid var(--linie);
}
.werdegang b {
  font-family: var(--sans); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .12em;
  line-height: 1.3; color: var(--blau); white-space: nowrap;
  padding-top: 1.45rem;   /* setzt die Versalien auf die Grundlinie des Textes */
}

/* Auf schmalen Fenstern wuerde die Spalte zu viel wegnehmen: untereinander. */
@media (max-width: 34rem) {
  .werdegang { grid-template-columns: 1fr; }
  .werdegang b { padding-top: 1rem; padding-bottom: .15rem; white-space: normal; }
  .werdegang span { border-top: 0; padding-top: 0; }
  .werdegang li:last-child b { border-bottom: 0; }
}

/* ---------- Kundenstimmen ---------- */
/* Zweispalter. Die langen Stimmen bekommen .stimme--gross und laufen
   ueber beide Spalten, die kurzen stehen paarweise nebeneinander.
   Bei ungerader Zahl kurzer Stimmen bliebe eine allein - dann die
   laengste von ihnen auf --gross setzen, nicht die Spaltenzahl aendern. */
.stimmen { display: grid; gap: 1.5rem; }
@media (min-width: 55rem) {
  .stimmen { grid-template-columns: repeat(2, 1fr); }
  .stimme--gross { grid-column: 1 / -1; }
}
.stimme {
  margin: 0; padding: 1.8rem 2rem;
  background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--blau);
  border-radius: 0;
}
.stimme__sterne {
  display: block; margin-bottom: 1rem;
  color: var(--rot); font-size: 1.05rem; letter-spacing: .14em;
}
.stimme p { color: var(--ink); margin-bottom: .9rem; max-width: 72ch; }
.stimme footer { font-size: .95rem; color: var(--ink-soft); margin-top: 1.3rem; }
.stimme footer b {
  display: block;
  font-family: var(--sans); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); margin-bottom: .2rem;
}
.stimmen__link { margin: 2.2rem 0 0; }
.stimme--projekt { margin-top: 1.6rem; max-width: 68ch; background: var(--blau-hauch); }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--dunkel); color: #fff; }
.kontakt a:not(.btn) { color: #fff; }
.kontakt__grid { display: grid; gap: 2.8rem; }
@media (min-width: 58rem) { .kontakt__grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.kontakt h2, .kontakt h3 { color: #fff; }
.kontakt p { color: #c9ced3; }
.kontakt .marker { background: var(--blau-hell); }
.wege { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.wege a {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  font-weight: 600; font-size: 1.02rem;
  padding: 1rem 1.2rem; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); border-radius: 0;
}
.wege a:hover { background: var(--blau); border-color: var(--blau); }
.wege svg { width: 1.3rem; height: 1.3rem; stroke: var(--blau-hell); fill: none; stroke-width: 1.7; flex: none; }
.wege a:hover svg { stroke: #fff; }
.zeiten { width: 100%; border-collapse: collapse; font-size: 1rem; }
.zeiten th, .zeiten td {
  text-align: left; padding: .65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.18); font-weight: 400;
}
.zeiten td { text-align: right; font-weight: 600; }
.zeiten--hell { color: var(--ink); }
.zeiten--hell th, .zeiten--hell td { border-bottom-color: var(--linie); }
.gebiet { margin-top: 1.8rem; font-size: .95rem; color: #b5bbc1; }
.gebiet--hell { color: var(--ink-soft); }

/* ---------- Kontaktformular ---------- */
.formular {
  margin-top: clamp(2.4rem, 5vw, 3.5rem);
  background: #fff; color: var(--ink);
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: 0;
}
.formular h3 { color: var(--ink); text-transform: uppercase; margin-bottom: .4rem; }
.formular .formular__hinweis { color: var(--ink-soft); font-size: .95rem; margin-bottom: 2rem; }
.formular__reihe { display: grid; gap: 0 1.4rem; }
@media (min-width: 40rem) { .formular__reihe { grid-template-columns: 1fr 1fr; } }
.formular .feld { margin: 0 0 1.3rem; max-width: none; color: var(--ink); }
.formular .feld label {
  display: block;
  font-family: var(--sans); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .45rem; color: var(--ink);
}
.formular .pflicht { color: var(--rot); }
.formular input, .formular select, .formular textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  padding: .8rem .9rem; border: 1px solid var(--linie); border-radius: 0;
}
.formular textarea { resize: vertical; min-height: 8rem; }
.formular input:hover, .formular select:hover, .formular textarea:hover { border-color: var(--grau); }
.formular input:focus, .formular select:focus, .formular textarea:focus { border-color: var(--blau); }
.formular .feld--honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .formular__datenschutz { font-size: .92rem; color: var(--ink-soft); margin-bottom: 1.6rem; }
.formular .formular__datenschutz a { color: var(--blau-tief); }
.formular button { cursor: pointer; }

/* ---------- Fuß: hell, mit dunkler Schlusszeile (wie beim Vorbild) ---------- */
.fuss { background: var(--flaeche); color: var(--ink-soft); font-size: .97rem; }
.fuss > .wrap { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 2.5rem; }
.fuss a { color: var(--ink); text-decoration: none; }
.fuss a:hover { color: var(--blau); text-decoration: underline; }
.fuss__grid { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .fuss__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.fuss h4 {
  font-family: var(--sans); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--blau); margin: 0 0 1.1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
/* eRecht24-Siegel im Fuss. Die Bilder liegen LOKAL im Projekt, nicht
   beim Anbieter. Der Einbettungscode von e-Recht24 laedt sie von deren
   Server; damit ginge bei jedem Seitenaufruf die IP-Adresse des
   Besuchers dorthin. Ein Siegel fuer Datenschutz, das selbst Daten
   abfliessen laesst, waere ein Widerspruch in sich -- und wuerde die
   Aussage der Datenschutzerklaerung falsch machen, dass keine
   Verbindung zu Dritten aufgebaut wird.
   Eigener .wrap statt des Fuss-Wraps: .fuss > .wrap trifft nur direkte
   Kinder, der Block bekommt dessen grosse Polsterung also nicht ab. */
.fuss__siegel .wrap {
  display: flex; flex-wrap: wrap; gap: 1rem;
  padding-bottom: 2.5rem;
}
.fuss__siegel img { display: block; height: auto; }

.fuss__unten {
  background: var(--dunkel); color: #9aa1a7;
  margin-top: 0; padding-block: 1.3rem;
  font-size: .85rem;
}
.fuss__unten .wrap { display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.fuss__unten a { color: #fff; }
.fuss__unten a:hover { color: var(--blau-hell); }

/* Abstand über der festen Aktionsleiste auf dem Telefon */
body { padding-bottom: 0; }
@media (max-width: 63.99rem) { .fuss__unten { padding-bottom: 4.8rem; } }

/* ---------- Mobile Aktionsleiste ---------- */
.aktionsleiste {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0,0,0,.15); background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}
.aktionsleiste a {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem .5rem; text-decoration: none;
  font-family: var(--sans); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
}
.aktionsleiste a:first-child { background: var(--rot); color: #fff; }
.aktionsleiste a:last-child { background: var(--ink); color: #fff; }
.aktionsleiste svg { width: 1.2rem; height: 1.2rem; flex: none; }
@media (min-width: 64rem) { .aktionsleiste { display: none; } }

/* ---------- Unterseiten: Seitenkopf, dunkel wie der Hero ---------- */
.seitenkopf {
  background: var(--dunkel); color: #fff;
  padding-block: clamp(2.2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
}
.seitenkopf h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: .45em; }
.seitenkopf__lead { font-size: 1.15rem; color: #c9ced3; max-width: 58ch; }
.seitenkopf .marker { background: var(--blau-hell); }
/* Auf /kontakt/ und /notdienst/ folgt direkt hinter dem dunklen Seitenkopf
   ein dunkler Abschnitt. Damit die Flächen nicht ineinanderlaufen,
   wird der zweite dann blau statt schwarz. */
.seitenkopf + .notruf, .seitenkopf + .kontakt { background: var(--blau-tief); }
.seitenkopf + .notruf .notruf__fliess,
.seitenkopf + .kontakt p { color: #dbe6f2; }
.seitenkopf + .notruf .notruf__gebiet { color: #b6c9dd; }

.brotkrume {
  font-family: var(--sans); font-weight: 600;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: #9aa1a7; margin-bottom: 2rem;
}
.brotkrume a { color: #fff; text-decoration: none; }
.brotkrume a:hover { color: var(--blau-hell); }
.brotkrume span { margin-inline: .45rem; }

/* ---------- Projekt ---------- */
.projekt__label {
  font-family: var(--sans); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--blau); margin-bottom: .9rem;
}
.projekt > .wrap > h2 { max-width: 22ch; }
.projekt__galerie {
  display: grid; gap: 1.6rem; margin-block: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.projekt__galerie figure { margin: 0; max-width: 32rem; }
.projekt__galerie img { border-radius: 0; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.projekt__galerie figcaption { margin-top: .8rem; font-size: .92rem; color: var(--ink-soft); }
.projekt__galerie figcaption b {
  display: block;
  font-family: var(--sans); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink); margin-bottom: .3rem;
}
@media (min-width: 40rem) {
  .projekt__galerie--vier { grid-template-columns: repeat(2, 1fr); }
  .projekt__galerie--vier figure { max-width: none; }
}
@media (min-width: 52rem) {
  .projekt__galerie--drei { grid-template-columns: repeat(3, 1fr); }
  .projekt__galerie--drei figure { max-width: none; }
}
.projekt__galerie--drei img { aspect-ratio: 1 / 1; }
.projekt__text { max-width: 68ch; }
.projekt__text h3 { margin-top: 2.2rem; }
.projekt__text h3:first-child { margin-top: 0; }
.projekt__zwischentitel {
  font-family: var(--serif); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); letter-spacing: .005em;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 .6rem;
}
.projekt__einleitung { color: var(--ink-soft); max-width: 68ch; margin-bottom: 0; }

/* ---------- Hinweiskasten ---------- */
.hinweis {
  margin-top: 2.5rem; padding: 1.8rem 2rem;
  background: var(--blau-hauch); border-left: 4px solid var(--blau);
  max-width: 68ch;
}
.hinweis h3 { text-transform: uppercase; font-size: 1.1rem; margin-bottom: .6rem; }
.hinweis p { margin-bottom: 0; color: var(--ink-soft); }
.hinweis--einordnung { border-left-color: var(--grau); background: var(--flaeche); }

/* ---------- Rechtstexte und Fließtextblöcke ---------- */
.rechtstext { max-width: 74ch; }
.rechtstext h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 3rem; margin-bottom: .9rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: 2rem; font-size: 1.05rem; }
.rechtstext h4 { margin-top: 1.6rem; margin-bottom: .5rem; font-size: 1rem; font-family: var(--sans); font-weight: 600; }
.rechtstext p { color: var(--ink-soft); }
.rechtstext address { font-style: normal; color: var(--ink-soft); margin-bottom: 1.1em; }
.rechtstext ul { margin: 0 0 1.1em; padding-left: 1.3rem; color: var(--ink-soft); }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext__stand {
  margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  font-size: .92rem; color: var(--grau);
}

/* Band mit weiterführenden Angeboten */
.band--links .band__inhalt { padding-block: .6rem; gap: .2rem 2.4rem; }
.band--links a {
  display: flex; align-items: center; gap: .9rem;
  color: #fff; text-decoration: none; padding-block: .5rem;
  font-family: var(--sans); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .14em;
}
.band--links a::before {
  content: ""; width: .45rem; height: .45rem; background: #fff; opacity: .75; flex: none;
}
.band--links a::after { content: " \2192"; }
.band--links a:hover { text-decoration: underline; }