/* ============================================================================
   SGM-Komplettrenovierungen GmbH - Design-System
   Aus html/style.css der Entwuerfe, aber als echtes Stylesheet:
   der Entwurf war auf feste 1200 px gebaut und arbeitete mit float.
   Hier steht dasselbe Bild auf einem beweglichen Raster.

   Grundsatz aus dem Konzept: MOBIL ZUERST. In der Search Console hat Mobil
   eine mehr als doppelt so hohe Klickrate wie Desktop.
   ========================================================================= */

:root {
  /* Farben aus dem Logo */
  --anthrazit:   #333333;
  --tief:        #2B2B2B;
  --mittel:      #3D3D3D;
  --ziegel:      #AA3835;   /* 5,7:1 auf Weiss - fuer Text und Knoepfe geeignet */
  /* Aus dem Entwurf gemessen: Claim und Haken auf dunklem Grund. */
  --ziegel-hell: #CD8B82;
  /* Fliesstext auf dunklem Grund, ebenfalls gemessen. */
  --text-auf-dunkel: #C4C1B6;
  --papier:      #FDFCFA;
  --aussen:      #DBD8D3;   /* Grund ausserhalb des Seitenkastens, gemessen */
  --sand:        #F2EFE9;
  --linie:       #E6E0D7;
  --text:        #333333;
  --text-weich:  #3F3C38;
  --text-zweit:  #65615B;   /* 5,4:1 auf Papier - fuer Fliesstext zulaessig */
  /* ACHTUNG: nachgerechnet 3,6:1 auf Weiss - REICHT NICHT fuer Fliesstext (4,5:1).
     Nur fuer Dekoration oder Text ab 18px fett verwenden. Im ganzen Stylesheet
     steht diese Farbe deshalb ausschliesslich auf dem Trennzeichen der
     Brotkrumen, das kein Text ist. */
  --meta:        #8C877F;
  --hell-auf-dunkel: #B4AFA8;

  --breite:  71.25rem;      /* 1140px Inhaltsbreite */
  --rand:    1.25rem;
  --radius:  3px;
  --winkel:  -9deg;         /* Schnittwinkel aus dem Logo-M */
  --balken:  -21deg;        /* roter Schraegbalken - im Entwurf gemessen: 5 px Versatz auf 13 px Hoehe */

  --schrift-titel: 'Archivo Narrow', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --schrift-text:  'Inter', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 48rem) { :root { --rand: 2.5rem; } }

/* ---- Grundlagen ---- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Ausserhalb der Seite liegt ein Grau - im Entwurf gemessen: RGB 219/216/211.
   Die Seite selbst ist ein Kasten von 1140 px auf Papierweiss. */
body {
  background: var(--aussen);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.65;
  /* Zoom bis 200 % ohne waagerechtes Scrollen */
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: 700; line-height: 1.12; }
/* Im Entwurf gemessen: Versalhöhe 28 px, Zeilenabstand 41 px.
   Das entspricht etwa 2,35rem bei 1,1 Zeilenhöhe. */
/* Die Groesse folgt der VERSALHOEHE aus dem Entwurf, nicht der dort
   verwendeten Schriftgroesse: Der Entwurf wurde mit DejaVu Sans Condensed
   gerendert (Versalhoehe 0,729 des Gevierts), live laeuft Archivo Narrow
   (0,700). Dieselbe sichtbare Hoehe von 28 px braucht dort 40 px statt
   38,4. 3,51vw trifft das bei 1140 px Fensterbreite. */
h1 { font-size: clamp(1.5rem, 3.51vw, 2.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.45rem, 3.6vw, 1.95rem); margin-bottom: .6rem; }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.35rem); margin-bottom: .4rem; }

p { margin-bottom: .9rem; }
a { color: inherit; text-decoration: none; }
.inhalt a, .fliess a { color: var(--ziegel); text-decoration: underline; text-underline-offset: .15em; }
img { max-width: 100%; height: auto; display: block; }

/* Fokus: sichtbar, nie ohne Ersatz entfernt */
:focus-visible {
  outline: 2px solid var(--anthrazit);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Erster Link der Seite */
.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--anthrazit); color: #fff; padding: .8rem 1.2rem;
}
.zum-inhalt:focus { left: .5rem; top: .5rem; }

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

.wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* ---- Seitenkasten ----
   Kopfzeile, Inhalt und Fussbereich liegen gemeinsam in einem Kasten von
   1140 px auf Papierweiss, aussen herum das Grau. */
.seite {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  background: var(--papier);
  box-shadow: 0 0 30px rgba(0,0,0,.06);
}
/* Innerhalb des Kastens begrenzen die Wraps nicht noch einmal - sie
   liefern nur den Innenabstand. */
.seite .wrap { max-width: none; }

/* ---- Marke ---- */
/* Der rote Schraegbalken aus dem Logo, als wiederkehrendes Zeichen */
/* Im Entwurf gemessen: 78 x 13 px bei 1140 px Inhaltsbreite, Versatz 5 px. */
.schnitt {
  width: 4.875rem; height: .8125rem; background: var(--ziegel);
  transform: skewX(var(--balken)); margin-bottom: 1rem;
}
/* Gemessen: Versalhöhe 11 px, also rund 0,9rem. */
/* Gemessene Versalhoehe 11 px; mit Inter waeren das 15,1 px - aber Inter
 * laeuft BREITER als die Schrift, mit der der Entwurf gerendert wurde. Im
 * Entwurf ist der Claim 441 px breit, die Textspalte 509. Live sprengte
 * "AUSFUEHRUNG" die Zeile, sobald die Schrift ueber 1465 px Fensterbreite
 * mitwuchs - die Spalte waechst dort naemlich nicht mehr mit, der Banner ist
 * bei 1140 px gedeckelt.
 *
 * Deshalb .82rem als Obergrenze: rechnerisch 483 px bei 46 Zeichen, also
 * 26 px Reserve auch auf sehr breiten Schirmen.
 *
 * Und der Claim darf breiter sein als der Fliesstext: Die Schraegkante liegt
 * auf seiner Hoehe bei 59 Prozent, 54 Prozent sind damit gefahrlos. */
.claim {
  font-size: clamp(.72rem, .78vw, .82rem); letter-spacing: .14em; color: var(--ziegel);
  font-weight: 700; text-transform: uppercase;
  /* KEIN max-width in Prozent. Prozente beziehen sich auf das Elternelement,
   * und das ist die Textspalte mit 47 Prozent der Bannerbreite. Aus meinen
   * gedachten 54 Prozent des BANNERS wurden so 54 Prozent von 509 px, also
   * 275 px - dabei brach sogar der kuerzeste Claim um.
   *
   * Stattdessen: eine Zeile erzwingen. Der Claim darf ueber die Textspalte
   * hinausragen; die Schraegkante liegt auf seiner Hoehe bei 59 Prozent,
   * der laengste Claim braucht 483 px von 645 verfuegbaren. */
  white-space: nowrap;
}
/* Auf dem Telefon steht der Claim ueber die volle Breite und darf umbrechen -
   dort fehlen die 509 px der Textspalte. */
@media (max-width: 62rem) { .claim { white-space: normal; } }

/* ---- Servicezeile ---- */
.servicezeile { background: var(--anthrazit); color: var(--hell-auf-dunkel); font-size: .78rem; }
/* Zwei Gruppen: links das Verzichtbare, rechts Zeiten und Rufnummer.
   Die rechte Gruppe bricht nie um und wird nie gekuerzt - bisher rutschte
   ausgerechnet die Rufnummer in eine zweite Zeile. */
.servicezeile .wrap {
  display: flex; flex-wrap: nowrap; justify-content: space-between;
  align-items: center; gap: 1.4rem; padding-block: .55rem;
}
/* Kein hartes Abschneiden mitten im Wort: Passt eine Angabe nicht mehr,
   entfaellt sie ganz. Bleibt doch etwas uebrig, endet es mit Auslassungs-
   punkten - dann sieht es nach Absicht aus statt nach Fehler. */
.service-links  { display: flex; gap: 1.4rem; min-width: 0; overflow: hidden; }
.service-links span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.service-rechts { display: flex; gap: 1.4rem; flex: none; white-space: nowrap; }
.servicezeile span { white-space: nowrap; }
.service-links span + span::before,
.service-rechts span + span::before { content: "·"; color: var(--meta); margin-right: 1.1rem; }
@media (max-width: 86rem) { .service-links span:nth-child(2) { display: none; } }
@media (max-width: 72rem) { .service-links span:nth-child(1) { display: none; } }
@media (max-width: 44rem) { .service-links { display: none; } }
.servicezeile b { color: #fff; font-weight: 600; }
/* ---- Kopfbereich ---- */
.kopf { background: #fff; border-bottom: 1px solid var(--linie); position: relative; }
.kopf .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .85rem; }
.kopf-logo img { height: 2.6rem; width: auto; }
@media (min-width: 60rem) { .kopf-logo img { height: 3.25rem; } }

.haupt { margin-left: auto; display: none; align-items: center; gap: 1.4rem; }
@media (min-width: 60rem) { .haupt { display: flex; } }
.haupt > a, .haupt .punkt > a {
  color: #4A4742; font-size: .95rem; padding-block: .35rem;
  border-bottom: 3px solid transparent;
}
.haupt a[aria-current="page"], .haupt .aktiv > a {
  color: var(--anthrazit); font-weight: 700; border-bottom-color: var(--ziegel);
}
/* .haupt > a setzt eine dunkle Schriftfarbe und hat dieselbe Gewichtung wie
   eine einzelne Klasse - dadurch stand die Rufnummer DUNKEL AUF ROT und war
   kaum zu lesen. Die Auswahl ist hier bewusst spezifischer. */
.haupt > a.knopf-tel, .menue-mobil a.knopf-tel, .knopf-tel {
  background: var(--ziegel); color: #fff; font-weight: 700;
  padding: .8rem 1.3rem; border-radius: var(--radius); white-space: nowrap;
  border-bottom: 0;
}
.haupt > a.knopf-tel:hover, .knopf-tel:hover { background: #96302D; color: #fff; }
.knopf-tel:hover { background: #92302D; }

/* Menueknopf mobil - mindestens 44x44 */
/* Roter Anrufknopf neben dem Menüknopf - nur auf schmalen Geräten. */
.knopf-tel-mobil {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ziegel); color: #fff; font-weight: 700; font-size: .88rem;
  padding: .6rem 1rem; border-radius: var(--radius); white-space: nowrap;
}
.knopf-tel-mobil:hover { background: #96302D; color: #fff; }
@media (min-width: 60rem) { .knopf-tel-mobil { display: none; } }

/* Ohne Anrufknopf muss der Menüknopf selbst nach rechts rücken. */
.kopf .wrap > .burger:nth-child(2) { margin-left: auto; }
.burger {
  margin-left: .6rem; display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; background: none; border: 1px solid var(--linie);
  border-radius: var(--radius); cursor: pointer;
}
@media (min-width: 60rem) { .burger { display: none; } }

/* ---- Brotkrumen ---- */
.brotkrumen { background: var(--sand); border-bottom: 1px solid var(--linie); font-size: .8rem; }
.brotkrumen .wrap { padding-block: .7rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.brotkrumen li::after { content: "›"; margin-left: .35rem; color: var(--meta); }
.brotkrumen li:last-child::after { content: none; }
.brotkrumen a { color: var(--text-zweit); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--text); }

/* ---- Knoepfe ---- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;                          /* 48px - im Entwurf gemessen */
  background: var(--ziegel); color: #fff; font-weight: 700; font-size: .95rem;
  padding: .85rem 1.8rem; border-radius: var(--radius); border: 0; cursor: pointer;
  text-align: center;
}
.knopf:hover { background: #92302D; }
.knopf-zweit {
  background: none; color: var(--text); border-bottom: 2px solid var(--ziegel);
  border-radius: 0; padding-inline: .8rem;
}
.knopf-zweit:hover { background: var(--sand); }
/* Auf dunklem Grund - Banner und dunkle Abschnitte - waere #333 auf #333
   unsichtbar. Der Knopf sah dort aus wie ein roter Strich ohne Beschriftung. */
/* Im Entwurf sitzt der rote Strich mit Abstand UNTER der Beschriftung und
   ist etwas breiter als sie. */
.banner .knopf-zweit, .dunkel .knopf-zweit {
  color: #fff; border-bottom: 0; position: relative; padding: .7rem 1.3rem 1rem;
}
.banner .knopf-zweit::after, .dunkel .knopf-zweit::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--ziegel);
}
.banner .knopf-zweit:hover, .dunkel .knopf-zweit:hover { background: rgba(255,255,255,.1); }
.knopf-dunkel { background: var(--anthrazit); }
.knopf-dunkel:hover { background: var(--tief); }
.knopf[disabled] { opacity: .65; cursor: default; }

/* ---- Abschnitte ---- */
.abschnitt { padding-block: 2.6rem; }
@media (min-width: 48rem) { .abschnitt { padding-block: 3.5rem; } }
.vorspann { color: var(--text-zweit); font-size: .98rem; line-height: 1.7; max-width: 41rem; margin-bottom: 1.6rem; }
.sand  { background: var(--sand); border-block: 1px solid var(--linie); }
.dunkel { background: var(--anthrazit); color: #fff; }

/* Die flache Schraege am oberen Rand traegt NUR die Gegenueberstellung -
   gemessen 44 px Hoehenunterschied auf 1140 px Breite. Das Wartungsband und
   das Terminband haben im Entwurf eine gerade Oberkante; meine Regel fuer
   alle dunklen Abschnitte war zu weit gefasst. */
.dunkel.mit-schraege {
  clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 48rem) {
  .dunkel.mit-schraege { clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 100%); }
}
/* Vorspann auf dunklem Grund - eine Spur heller als gemessen, damit er
   sich vom Kastentext abhebt. */
.dunkel .vorspann { color: #BAB4AA; }
.dunkel a { color: #fff; }

/* ---- Banner mit Schraege ---- */
/* Die Schraege entsteht ueber clip-path, nicht ueber ein Bild - so bleibt sie
   in jeder Breite gleich und kostet nichts. */
/* Der Banner ist im Entwurf GENAU SO BREIT wie der uebrige Inhalt - 1140 px,
   mittig. Er laeuft NICHT ueber die volle Fensterbreite. Gemessen im Entwurf:
   Kopfzeile und Banner beginnen beide bei derselben Kante und enden bei
   derselben. Bisher lief der Banner randlos, und dadurch sassen Schraege,
   Wasserzeichen und Pfeile an anderen Stellen als geplant. */
.banner {
  position: relative; background: var(--anthrazit); color: #fff; overflow: hidden;
  width: 100%;
}
/* Innerhalb des Banners begrenzt der Wrap nicht noch einmal - er liefert
   nur den Innenabstand. Der betraegt im Entwurf 28 px, nicht 40: Der Claim
   beginnt dort bei x=64, der Banner bei x=36. */
.banner > .wrap { max-width: none; padding-inline: 1.75rem; }

/* BANNER DER STARTSEITE NACH DER ENDFASSUNG
 *
 * Das Bild fuellt NICHT die ganze Breite. Es sitzt rechts und wird durch eine
 * schraege Kante vom dunklen Textbereich getrennt; auf der Kante liegt eine
 * rote Linie. Links bleibt massives Anthrazit, damit der Text ohne Schleier
 * lesbar ist.
 *
 * Die Schraege laeuft leicht nach links geneigt - oben bei 33 Prozent, unten
 * bei 28 Prozent der Breite.
 */
/* Der Bildbereich beginnt erst dort, wo er sichtbar wird - bei 55,8 Prozent.
 *
 * Vorher lag er ueber der ganzen Bannerbreite. Mit object-fit: cover wurde das
 * Bild dann auf die volle Breite gerechnet, und der Anschnitt zeigte nur das
 * rechte Drittel davon - bei einem Gebaeudefoto der Bildrand statt des Hauses.
 * Jetzt deckt das Bild nur den sichtbaren Streifen ab, und cover beschneidet
 * auf dessen Hochformat, mit der Bildmitte im Ausschnitt.
 *
 * Die Kante liegt bei 63,3 Prozent der BANNERbreite; auf diesen Bereich
 * bezogen sind das 17 Prozent. */
.banner-bild {
  position: absolute; inset: 0 0 0 55.8%;
  clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
}
.banner-bild img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
/* Leichter Verlauf an der Kante, damit die Schrift auch dort steht, wo der
   Text ueber das Bild ragt. */
/* Schutzverlauf an der Kante - falls der Text bei sehr grosser Schrift doch
   einmal bis dorthin reicht, bleibt er lesbar. */
/* Nur ein schmaler Saum an der Kante, damit der Uebergang nicht hart
   abbricht. Das Bild selbst bleibt hell - im Entwurf ist es nicht
   abgedunkelt. */
.banner-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(51,51,51,.55) 0%, rgba(51,51,51,.18) 20%, rgba(51,51,51,0) 34%);
}
/* Die rote Linie auf der Kante */
.banner-kante {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: var(--ziegel);
  clip-path: polygon(63.3% 0, 64.09% 0, 56.59% 100%, 55.8% 100%);
}
@media (max-width: 62rem) {
  /* Auf schmalen Geraeten steht das Bild hinter dem Text - dort braucht es
     wieder den Schleier, sonst ist die Schrift nicht lesbar. */
  .banner-bild { inset: 0; clip-path: none; }
  .banner-bild img { opacity: .38; }
  .banner-bild::after { background: none; }
  .banner-kante { display: none; }
}
.banner .wrap { position: relative; padding-block: 2.6rem 3.2rem; }
@media (min-width: 48rem) { .banner .wrap { padding-block: 3.6rem 4.2rem; } }
/* Die Textspalte bleibt schmal - im Entwurf endet sie deutlich vor der
   Schraege. Ohne diese Grenze liefe die Ueberschrift ueber das Bild. */
/* Anteil statt fester Breite: Im Entwurf nimmt die Textspalte 44 Prozent
   der Bannerbreite ein. Bei 1140 px sind das 500 px, bei 930 px eben 410 -
   so bleibt das Verhaeltnis in jeder Fensterbreite gleich. */
@media (min-width: 62rem) {
  .banner-text-folie { max-width: 47%; }
}
.banner h1, .banner-titel { max-width: none; }
/* Der Claim steht auf dunklem Grund in Hellrot, nicht im vollen Ziegelrot -
   aus dem Entwurf gemessen: RGB 205/139/130. */
.banner .claim, .dunkel .claim { color: var(--ziegel-hell); margin-bottom: 1.1rem; }
.banner h1, .banner-titel { margin-bottom: 1.9rem; }
/* Gemessen: Versalhöhe 11 px, also rund 0,95rem. */
.banner-text { color: #CFCBC2; font-size: clamp(.85rem, .83vw, .945rem);
               line-height: 1.65; max-width: 38rem; margin: 0; }
.banner-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 2.2rem; }
.banner .schnitt { margin-bottom: 1.3rem; }
/* Untere Kante des Banners angeschnitten, im Winkel des Logo-M */
/* Unten laeuft das Dunkel als DREIECK nach LINKS UNTEN aus.
 *
 * Im Entwurf gemessen: Die Hauptkante liegt bei y=554, links reicht das
 * Dunkel bis 639 - also 85 px tiefer - und das Dreieck laeuft bei rund
 * 60 Prozent der Breite aus. Bisher hatte ich die falsche Ecke angehoben,
 * das Dreieck zeigte nach rechts. */
.banner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 85px), 60% calc(100% - 85px), 0 100%);
}
@media (max-width: 48rem) {
  .banner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 60% calc(100% - 40px), 0 100%); }
}

/* Das M aus dem Logo als Wasserzeichen */
/* Im Banner steht das Wasserzeichen LINKS UNTEN im dunklen Bereich - dort,
   wo kein Text steht. Rechts läge es auf dem Bild und wäre unsichtbar. */
/* Hochkant an der Schrägkante, mit etwas Abstand davor.
 *
 * Der Winkel ist gerechnet, nicht geschätzt: Die Kante läuft von 63,3
 * Prozent oben auf 55,8 Prozent unten, das sind 85 px Versatz auf 548 px
 * Höhe — 8,9 Grad gegen die Senkrechte. Hochkant gestellt ergibt das
 * rotate(-81.1deg); die Wortmarke läuft dann von unten nach oben und
 * genau parallel zur Kante.
 *
 * Die Mitte liegt bei 50 Prozent, die Kante auf halber Höhe bei 59,6 —
 * bleiben rund neun Prozent Abstand. */
/* NUR IM BANNER gedreht. Die Abschnittszeichen tragen dieselbe Klasse mit
   einem Zusatz - ohne diese Eingrenzung standen auch sie hochkant. */
.banner .wasserzeichen {
  /* Die Oberkante des M liegt auf der Oberkante der ersten
   * Ueberschriftszeile. Gerechnet, nicht geschaetzt:
   *
   *   Innenabstand oben   57,6 px
   *   Schraegbalken       13,0 px
   *   Abstand darunter    16,0 px
   *   Claimzeile          21,2 px
   *   Abstand darunter    12,0 px
   *   ------------------------------
   *   Ueberschrift ab    119,8 px
   *
   * Der gedrehte Kasten ist 334 px hoch, seine Mitte muss also bei 287 px
   * liegen. Abzueglich der halben Layouthoehe ergibt das top: 14.38rem.
   *
   * Waagerecht bei 51,5 Prozent: Damit bleiben 9 px bis zur roten Kante -
   * nah, ohne sie zu beruehren. */
  position: absolute; left: 51.5%; top: 14.38rem;
  transform: translateX(-50%) rotate(-81.1deg);
  transform-origin: center;
  bottom: auto; width: 20rem; height: auto;
  opacity: .18; pointer-events: none; user-select: none; z-index: 1;
}
/* Auf dem Telefon gibt es keine Schrägkante neben dem Text - dort bleibt
   das Zeichen waagerecht und liegt hinter dem Inhalt. */
@media (max-width: 62rem) {
  /* Dieselbe Gewichtung wie die gedrehte Fassung oben - sonst bliebe die
     Drehung auf dem Telefon stehen, wo es keine Schrägkante gibt. */
  .banner .wasserzeichen { width: 13rem; left: 50%; top: auto; bottom: 1rem;
                           transform: translateX(-50%); opacity: .14; }
}
@media (max-width: 48rem) { .banner .wasserzeichen { width: 10rem; opacity: .18; } }

/* ---- Raster und Kacheln ---- */
.raster { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .raster.zwei, .raster.drei, .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kachel {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .45rem;
}
.kachel:hover { border-color: var(--ziegel); }
.kachel h3 { margin: 0; }
.kachel p { color: var(--text-zweit); font-size: .93rem; margin: 0; }
/* Im Entwurf gemessen: dunkle Schrift (RGB 67) mit ROTEM Unterstrich -
   nicht fett und rot ohne Strich. */
.kachel-mehr {
  margin-top: auto; padding-top: .6rem; font-size: .88rem; font-weight: 400;
  color: var(--anthrazit); align-self: flex-start;
  border-bottom: 2px solid var(--ziegel); padding-bottom: .15rem;
}
.kachel:hover .kachel-mehr { color: var(--ziegel); }

/* ---- Fliesstext ---- */
.text-raster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .text-raster { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; } }
.inhalt h2 { margin: 2rem 0 .6rem; }
.inhalt h3 { margin: 1.5rem 0 .4rem; }
.inhalt p, .inhalt li { font-size: 1rem; line-height: 1.75; color: var(--text-weich); }
.inhalt ul, .inhalt ol { margin: 0 0 1rem 1.2rem; }
.inhalt li { margin-bottom: .35rem; }
.inhalt table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; font-size: .95rem; }
.inhalt th, .inhalt td { border-bottom: 1px solid var(--linie); padding: .6rem .5rem; text-align: left; vertical-align: top; }
.inhalt th { font-weight: 700; }

.seitenspalte { display: flex; flex-direction: column; gap: 1.25rem; }
.kasten { background: var(--sand); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem; }
.kasten h3 { margin-bottom: .4rem; }
.kasten p { font-size: .92rem; color: var(--text-zweit); }

/* ---- Formular ---- */
.formular { display: flex; flex-direction: column; gap: 1rem; }
.feld { display: flex; flex-direction: column; gap: .3rem; }
.feld label { font-weight: 600; font-size: .93rem; }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem;            /* 16px: sonst zoomt iOS beim Fokus */
  padding: .7rem .8rem; border: 1px solid #C9C2B7; border-radius: var(--radius);
  background: #fff; color: var(--text); width: 100%; min-height: 2.75rem;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--anthrazit); }
.feld [aria-invalid="true"] { border-color: var(--ziegel); border-width: 2px; }
.feld-fehler { color: #8F2D2A; font-size: .88rem; font-weight: 600; }
.feld-hilfe { color: var(--text-zweit); font-size: .88rem; }

/* Fehlermeldung ueber dem Formular - nie nur rote Rahmen ohne Text */
.meldung { border-radius: var(--radius); padding: 1rem 1.1rem; border: 1px solid; }
.meldung-fehler { background: #FCF2F1; border-color: var(--ziegel); color: #7E2724; }
.meldung-ok     { background: #F1F6F1; border-color: #4B7F4B; color: #2E5A2E; }
.meldung h3 { margin-bottom: .3rem; }
.meldung ul { margin: .4rem 0 0 1.1rem; }

.pflicht-hinweis { color: var(--text-zweit); font-size: .88rem; }

/* ---- Feste Leiste unten, mobil ---- */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--linie); border-top: 1px solid var(--linie);
}
.aktionsleiste a {
  background: #fff; text-align: center; padding: .85rem .5rem;
  font-weight: 700; font-size: .95rem; min-height: 3.25rem;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.aktionsleiste a.signal { background: var(--ziegel); color: #fff; }
@media (min-width: 60rem) { .aktionsleiste { display: none; } }
@media (max-width: 60rem) { body { padding-bottom: 3.5rem; } }

/* ---- Fussbereich ---- */
/* Im Entwurf gemessen: Anschrift und Verweise RGB 167, nicht 214.
   Mein bisheriger Wert war deutlich zu hell. */
.fuss { background: var(--anthrazit); color: #A7A6A4; margin-top: 3rem; }
.fuss .wrap { padding-block: 2.5rem 1.5rem; }
.fuss-spalten { display: grid; gap: 1.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .fuss-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fuss h3 { color: #fff; font-size: .92rem; margin-bottom: .55rem; }
.fuss ul { list-style: none; }
/* Zeilenabstand 21 px - im Entwurf gemessen. */
.fuss li { margin-bottom: 0; }
.fuss ul { line-height: 1.65; font-size: .88rem; }
.fuss li a { display: inline-block; padding-block: .12rem; }
.fuss a { color: #A8A6A0; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-unten {
  border-top: 1px solid #4A4742; margin-top: 1.8rem; padding-top: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .85rem;
}
.fuss-unten .rechts { margin-left: auto; }

/* ---- Bewegung zurueckhaltend ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Menue auf schmalen Geraeten ---- */
/* Zweistufig aufklappbar. Ohne JavaScript bleibt es sichtbar - besser ein
   offenes Menue als ein unerreichbares. */
.menue-mobil { border-top: 1px solid var(--linie); background: #fff; }
.menue-mobil[hidden] { display: none; }
@media (min-width: 60rem) { .menue-mobil { display: none !important; } }
.menue-mobil ul { list-style: none; }
.menue-mobil li { border-bottom: 1px solid var(--linie); }
.menue-mobil a {
  display: block; padding: .95rem var(--rand); font-size: 1.05rem; font-weight: 600;
  min-height: 2.75rem;
}
.menue-mobil a[aria-current="page"] { color: var(--ziegel); }

/* ---- Fussbereich: Markenzeile ---- */
.fuss-claim { margin-top: 2rem; color: var(--ziegel-hell); }
.fuss .klein { font-size: .85rem; color: var(--hell-auf-dunkel); }
.fuss p { margin-bottom: .6rem; }

/* ---- Formular: Zustände ---- */
.zwei { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) { .zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld-kasten { background: var(--sand); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; }
.feld-kasten label { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; line-height: 1.5; }
.feld-kasten input[type="checkbox"] { width: auto; min-height: 0; margin-top: .25rem; flex: none; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
abbr[title] { text-decoration: none; color: var(--ziegel); }
.meldung a { color: inherit; }
.meldung[tabindex]:focus { outline: 2px solid var(--anthrazit); outline-offset: 3px; }

/* ---- Angabenliste auf der Bestätigungsseite ---- */
.angaben { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.angaben > div { display: grid; gap: .1rem; }
.angaben dt { font-size: .85rem; font-weight: 700; color: var(--text-zweit);
              text-transform: uppercase; letter-spacing: .04em; }
.angaben dd { margin: 0; }

/* ---- Bausteine der Blockausgabe ---- */
/* Mehr Luft als bisher - im Entwurf stehen die Punkte deutlich weiter
   auseinander, und der Haken ist hell, nicht rot. */
.banner-punkte { list-style: none; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
/* Die Punkte stehen im Entwurf in WEISS, der Haken davor in Hellrot. */
.banner-punkte li { padding-left: 1.7rem; position: relative; color: #fff;
                    font-size: clamp(.78rem, .77vw, .88rem); line-height: 1.5; }
.banner-punkte li::before { content: "✓"; position: absolute; left: 0; top: .05rem;
                            color: var(--ziegel-hell); font-weight: 400; font-size: 1rem; }

.kennzahlen { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52rem) { .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Roter Balken links an jeder Kennzahl - so steht es im Entwurf.
   Gemessen: Balken 3 px breit und 67 px hoch, Band insgesamt 129 px. */
.kennzahlen > div {
  display: flex; flex-direction: column; gap: .15rem;
  border-left: 3px solid var(--ziegel); padding-left: .85rem;
}
/* Die Zahl steht im Entwurf in ANTHRAZIT, nicht in Rot - gemessen RGB 52.
   Versalhoehe 18,6 px; mit Archivo Narrow sind das 26,6 px. */
.kennzahlen strong { font-family: var(--schrift-titel); font-size: 1.66rem; line-height: 1.15;
                     color: var(--anthrazit); font-weight: 700; }
.kennzahlen span { font-size: .78rem; color: var(--text-zweit); line-height: 1.5; }
/* Das Band ist flacher als ein gewoehnlicher Abschnitt. */
.abschnitt.kennzahlen-band { padding-block: 1.9rem; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
/* Im Entwurf gemessen: 39 px hoch, Eckenradius wie ueberall 3 px - NICHT
   rund. Weisser Grund, duenner Rahmen in der Linienfarbe. */
.chip { display: inline-flex; align-items: center; min-height: 2.45rem;
        background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
        padding: .45rem 1.15rem; font-size: .88rem; font-weight: 400; }
.chip:hover { border-color: var(--ziegel); color: var(--ziegel); }

/* Gegenüberstellung nach dem Entwurf: links gedämpft mit ×, rechts weiß mit
   roter Oberkante und roten Haken. Die Punkte sind durch Linien getrennt. */
.gegenueberstellung .kachel { border: 0; border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.gegenueberstellung .kachel h3 { font-family: var(--schrift-titel); font-size: 1.2rem; margin-bottom: .9rem; }
.gegenueberstellung .kachel ul { list-style: none; margin: 0; padding: 0; }
.gegenueberstellung .kachel li {
  position: relative; padding: .7rem 0 .7rem 1.9rem;
  border-top: 1px solid rgba(0,0,0,.08); font-size: .96rem; line-height: 1.55;
}
.gegenueberstellung .kachel li:first-child { border-top: 0; }

/* Der Text stand auf #65615B - auf dem dunkelgrauen Grund praktisch
   unlesbar (1,6:1). Nachgemessen an den hellsten Glyphenpixeln: RGB 187,
   also das vorhandene Hell-auf-Dunkel. */
.kachel.ton-gegen { background: var(--mittel); color: var(--hell-auf-dunkel); }
.kachel.ton-gegen h3 { color: #fff; }
/* Auf #3D3D3D war das alte Hell-auf-Dunkel mit 5,0:1 zwar zulaessig, wirkte
   aber stumpf. #C9C5BE bringt 6,3:1 - deutlich besser lesbar. */
.kachel.ton-gegen li, .kachel.ton-gegen p { color: #C9C5BE; }
.kachel.ton-fuer li, .kachel.ton-fuer p { color: var(--text); }
.kachel.ton-gegen li { border-top-color: rgba(255,255,255,.12); }
.kachel.ton-gegen li::before {
  content: "\00d7"; position: absolute; left: .2rem; top: .62rem;
  color: #B4AFA6; font-size: 1.15rem; line-height: 1;
}

.kachel.ton-fuer {
  background: #fff; color: var(--text); border-top: 4px solid var(--ziegel);
  border-radius: 0 0 var(--radius) var(--radius);
}
.kachel.ton-fuer h3 { color: var(--anthrazit); }
.kachel.ton-fuer li::before {
  content: "\2713"; position: absolute; left: .2rem; top: .68rem;
  color: var(--ziegel); font-weight: 700; font-size: 1rem; line-height: 1;
}

/* Wasserzeichen oben rechts im dunklen Abschnitt */
/* Gemessen: 31 Prozent der Abschnittsbreite, Helligkeit +22 auf dem dunklen
   Grund - das entspricht knapp 11 Prozent Deckkraft. */
/* Alle Zeichen in dunklen Abschnitten: waagerecht, Oberkante auf Höhe des
   roten Schrägbalkens, rechts bündig mit den Kästen darunter.
   2,6rem ist der Innenabstand des Abschnitts - genau dort beginnt auch der
   Balken über der Überschrift. */
.wasserzeichen-rechts,
.wasserzeichen-rechts-unten,
.wasserzeichen-band {
  position: absolute; right: var(--rand); top: 2.6rem; left: auto; bottom: auto;
  width: 31%; max-width: 24rem; height: auto;
  transform: none; opacity: .24; pointer-events: none;
}
.dunkel { position: relative; overflow: hidden; }
.kachel ul { margin: 0 0 0 1.1rem; padding: 0; }
.kachel li { font-size: .93rem; color: var(--text-zweit); margin-bottom: .3rem; }

.fragen { display: grid; gap: .6rem; }
.fragen details { border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
.fragen summary { cursor: pointer; padding: .95rem 1.1rem; font-weight: 700; min-height: 2.75rem;
                  display: flex; align-items: center; }
.fragen summary::marker { color: var(--ziegel); }
.fragen .antwort { padding: 0 1.1rem 1rem; color: var(--text-weich); }

.cta { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.cta-bild { border-radius: 50%; width: 92px; height: 92px; object-fit: cover; flex: none; }
@media (max-width: 34rem) { .cta-bild { width: 58px; height: 58px; } }
.cta-wege { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .9rem; }

.ortsgruppen { display: grid; gap: 1.2rem; margin-bottom: 1rem; }
@media (min-width: 46rem) { .ortsgruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ortsgruppen h3 { font-size: 1rem; }
.ortsgruppen p { color: var(--text-zweit); font-size: .93rem; }

blockquote.kachel { margin: 0; }
blockquote.kachel p { font-style: italic; }
code { background: var(--sand); padding: .1rem .35rem; border-radius: 3px; font-size: .92em; }

/* ---- Cookie-Banner ----
   Blockiert die Seite nicht: er sitzt unten, der Inhalt bleibt lesbar.
   Beide Knöpfe sind gleichwertig gestaltet - das ist Bedingung dafür, dass
   die Einwilligung wirksam ist, keine Geschmacksfrage. */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
                 background: #fff; border-top: 3px solid var(--ziegel);
                 box-shadow: 0 -6px 24px rgba(0,0,0,.13); max-height: 80vh; overflow-y: auto; }
@media (max-width: 60rem) { .cookie-banner { bottom: 3.5rem; } }  /* über der Aktionsleiste */
.cookie-innen { max-width: var(--breite); margin-inline: auto; padding: 1.2rem var(--rand); }
.cookie-innen h2 { font-size: 1.15rem; margin-bottom: .4rem; }
.cookie-innen p { font-size: .93rem; color: var(--text-zweit); max-width: 52rem; }
.cookie-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: .9rem; }
/* Beide Knöpfe identisch - kein Dark Pattern */
.cookie-knoepfe .knopf { flex: 0 1 14rem; }
.cookie-mehr { text-decoration: underline; font-size: .93rem; }

.cookie-liste { display: grid; gap: 1rem; margin-bottom: 2rem; }
.cookie-gruppe { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem; background: #fff; }
.cookie-gruppe.ist-aus { background: var(--sand); color: var(--text-zweit); }
.cookie-kopf { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .5rem; }
.cookie-kopf h2 { margin: 0; font-size: 1.05rem; }
.cookie-kopf label { cursor: pointer; }
.cookie-fest { margin-left: auto; font-size: .85rem; color: var(--text-zweit);
               background: var(--sand); border-radius: 999px; padding: .15rem .7rem; }
.cookie-schalter { margin-left: auto; display: flex; gap: .5rem; align-items: center;
                   min-height: 2.75rem; font-size: .92rem; font-weight: 600; }
.cookie-schalter input { width: 1.4rem; height: 1.4rem; }
.cookie-gruppe p { font-size: .93rem; margin-bottom: .3rem; }

/* ---- Übersichtsseiten ---- */
.chip.ist-aktiv { background: var(--anthrazit); color: #fff; border-color: var(--anthrazit); }
.leerzustand { border: 1px dashed var(--linie); border-radius: var(--radius);
               padding: 2rem 1.4rem; background: var(--sand); max-width: 42rem; }
.leerzustand p { margin-bottom: .7rem; }
.seitenliste { list-style: none; padding: 0; margin: 0 0 1.8rem;
               display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .seitenliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .seitenliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seitenliste a { text-decoration: underline; text-underline-offset: .15em; }

/* ---- Suchfeld ---- */
.suchfeld { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.8rem; max-width: 34rem; }
.suchfeld input { flex: 1 1 14rem; font: inherit; font-size: 1rem; padding: .7rem .9rem;
                  min-height: 2.75rem; border: 1px solid #C9C2B7; border-radius: var(--radius);
                  background: #fff; }
.suchfeld input:focus { border-color: var(--anthrazit); }

/* ---- Bildblöcke ---- */
.bildblock { margin: 0 0 1.6rem; }
.bildblock img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.bildblock figcaption, .galerie figcaption { font-size: .9rem; color: var(--text-zweit);
                                             margin-top: .5rem; line-height: 1.45; }
.galerie { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.6rem; }
@media (min-width: 56rem) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie figure { margin: 0; }
.galerie img { width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* ---- Kontaktblock mitten im Text ---- */
.cta-block { background: var(--sand); border: 1px solid var(--linie);
             border-radius: var(--radius); padding: 1.6rem 1.4rem; margin-bottom: 1.6rem; }
.cta-block h2 { margin-top: 0; }
.cta-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 0; }

/* ---- Leistungsliste auf den Bereichsseiten ---- */
.leistungsliste { list-style: none; padding: 0; margin: 0;
                  display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 44rem) { .leistungsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .leistungsliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.leistungsliste li { border-left: 3px solid var(--linie); padding: .1rem 0 .1rem .8rem; }
.leistungsliste a { text-decoration: none; }
.leistungsliste a:hover strong { text-decoration: underline; }
.leistungsliste .klein { color: var(--text-zweit); font-size: .92rem; line-height: 1.45; display: block; margin-top: .15rem; }

/* ---- Hinweis im Fließtext ---- */
.hinweis { background: var(--sand); border-left: 3px solid var(--anthrazit);
           padding: .9rem 1.1rem; margin-bottom: 1.2rem; font-size: .96rem; }

/* ---- Verweise im Fließtext der Systemseiten ----
   Kontakt, Danke, 404, Projekte und die Seitenübersicht liegen nicht in
   .inhalt, sondern direkt in .abschnitt. Dort erbten Verweise die Textfarbe
   und hatten keine Unterstreichung - sie waren von normalem Text nicht zu
   unterscheiden. Knöpfe, Kacheln und Chips bringen ihre eigene Auszeichnung
   mit und bleiben deshalb ausgenommen. */
.abschnitt a:not([class]) {
  color: var(--ziegel);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.abschnitt a:not([class]):hover { text-decoration-thickness: 2px; }

/* ---- Banner: Stempel, Folien und Bedienung ----
   Entspricht dem Entwurf startseite-desktop.png: Stempel oben rechts,
   Pfeile am Bildrand, Punkte unten links. */
/* Der Stempel hat im Entwurf eine SCHRAEGE LINKE KANTE im Winkel des
   Logo-M - kein schlichtes Rechteck. Umgesetzt ueber clip-path, damit die
   Schraege in jeder Groesse gleich bleibt. */
/* Auf der Schraege liegt im Entwurf ein ROTER STREIFEN, und der Grund ist
   nicht reinweiss, sondern das Papierweiss der Seite. Der Streifen entsteht
   ueber einen zweiten, leicht groesseren Hintergrund darunter. */
/* Im Entwurf gemessen: 224 x 76 px, linke Kante 12 px versetzt - das sind
   9 Grad, nicht die 21 des Schraegbalkens. Meine Scherung mit 21 Grad war
   deutlich zu steil. Auf der Kante liegt ein 14 px breiter roter Streifen.
   Umgesetzt mit festem Versatz statt Winkel, weil der Entwurf es so zeigt. */
.stempel {
  position: absolute; top: 2.5rem; right: 0; z-index: 3;
  background: var(--ziegel); color: var(--anthrazit);
  padding: 0; box-shadow: 0 2px 18px rgba(0,0,0,.22);
  width: 14rem;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}
/* Der rote Streifen ist genau so dick wie die Kante am Bild: dort 0,79 %
   von 1140 px, also 9 px. Vorher waren es 14. */
.stempel::before {
  content: ""; position: absolute; inset: 0; background: var(--papier);
  clip-path: polygon(21px 0, 100% 0, 100% 100%, 9px 100%);
}
.stempel > * { position: relative; z-index: 1; }
.stempel strong { display: block; font-family: var(--schrift-titel); font-size: 1rem;
                  line-height: 1.2; padding: .85rem 1.2rem 0 2.2rem; }
.stempel span   { display: block; color: var(--text-zweit); font-size: .8rem;
                  line-height: 1.4; padding: .15rem 1.2rem .85rem 2.2rem; }
@media (max-width: 47.99rem) { .stempel { display: none; } }

/* Alle Textfolien liegen im selben Rasterfeld uebereinander. Dadurch gibt
   die hoechste die Bannerhoehe vor, und sie bleibt bei jedem Wechsel gleich.
   Ohne das sprang der Banner, weil jede Folie unterschiedlich viel Text hat. */
.banner > .wrap { display: grid; }
.banner-text-folie { grid-area: 1 / 1; }
.banner-bild { grid-area: auto; }
/* Verborgene Folien bleiben im Raster liegen, sind aber unsichtbar und
   werden nicht vorgelesen. */
.banner-bild.ist-aus, .banner-text-folie.ist-aus {
  visibility: hidden; pointer-events: none;
}
/* Ohne JavaScript greift weiterhin das hidden-Attribut. */
.banner-bild[hidden], .banner-text-folie[hidden] { display: none; }

.banner-bedienung { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.banner-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.9); color: var(--anthrazit);
  font-size: 1.5rem; line-height: 1; cursor: pointer; pointer-events: auto;
}
.banner-pfeil:hover { background: #fff; }
.banner-pfeil:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* In der Endfassung sitzen die Pfeile auf dem Bild, nicht am Fensterrand:
   der linke kurz hinter der Schraegkante, der rechte am Bildrand. */
/* Beide Pfeile liegen auf dem Bild: der linke knapp hinter der Schraege,
   der rechte mit etwas Abstand zum Rand. */
[data-zurueck] { left: 64%; }
[data-vor]     { right: 5%; }
@media (max-width: 62rem) {
  [data-zurueck] { left: var(--rand); }
  [data-vor]     { right: var(--rand); }
}
@media (max-width: 47.99rem) { .banner-pfeil { width: 2.2rem; height: 2.2rem; font-size: 1.2rem; } }

/* Im Entwurf gemessen: erster Punkt bei 58 px vom linken Bannerrand,
   Mitten 21 px auseinander, Durchmesser 11 px, aktiver Punkt in Ziegelrot. */
/* Die Punkte sassen bei 3,2rem und lagen damit UNTER der
   Ansprechpartner-Karte: Die ueberlappt den Banner um 4,5rem und hat die
   hoehere Ebene. Jetzt sitzen sie darueber - im Entwurf stehen sie ebenfalls
   knapp oberhalb der Kartenkante. */
/* Die Punkte stehen im Fluss unter den Knöpfen. Absolut positioniert lagen
   sie je nach Textlänge mal darunter, mal mitten auf dem Knopf — bei drei
   unterschiedlich langen Folientexten war keine feste Höhe richtig. */
/* Der Abstand nach unten ist nicht Zierde: Die Ansprechpartner-Karte greift
   4,5rem in den Banner hinein. Ohne diesen Abstand endeten die Punkte 67 px
   über der Unterkante und lagen damit 5 px unter der Karte. */
.banner-punkte-nav {
  display: flex; gap: .65rem; position: relative; z-index: 6;
  margin-top: 1.6rem; margin-bottom: 1.8rem;
}
.banner-punkte-nav[hidden] { display: none; }
.banner-punkte-nav button {
  width: .69rem; height: .69rem; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.42); cursor: pointer;
}
.banner-punkte-nav button[aria-selected="true"] { background: var(--ziegel); }
.banner-punkte-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Seitenkopf der Unterseiten ----
   Nach den Entwürfen trägt nur die Startseite einen dunklen Bannerbereich.
   Auf allen anderen Seiten steht die Überschrift auf hellem Grund in der
   linken Spalte, auf gleicher Höhe mit dem ersten Kasten der Seitenspalte. */
/* Mehr Luft zwischen Ueberschrift und dem kleineren Text darunter. */
.seitenkopf { margin-bottom: 1.9rem; }
.seitenkopf h1 + *, .inhalt h2 + .vorspann { margin-top: 1.1rem; }
.seitenkopf h1 { margin: 0; }
.hauptspalte > .inhalt:first-of-type { margin-top: 0; }

/* ---- Kästen der Seitenspalte ----
   Im Entwurf trägt jeder Kasten oben eine rote Kante. */
.seitenspalte .kasten {
  border-top: 3px solid var(--ziegel);
  border-radius: 0 0 var(--radius) var(--radius);
}
.seitenspalte .kasten h2 {
  font-size: 1.12rem; margin: 0 0 .5rem;
  font-family: var(--schrift-titel); line-height: 1.25;
}
.seitenspalte .kasten p:last-child { margin-bottom: 0; }
.kasten-tel a {
  font-family: var(--schrift-titel); font-size: 1.45rem; font-weight: 700;
  color: var(--ziegel); text-decoration: none; letter-spacing: .01em;
}
.kasten-tel a:hover { text-decoration: underline; }
.kasten-anfrage .knopf { width: 100%; text-align: center; }

/* Inhaltsverzeichnis: Liste mit Trennlinien wie im Entwurf */
.kasten-inhalt ul { list-style: none; margin: 0; padding: 0; }
.kasten-inhalt li { border-top: 1px solid var(--linie); }
.kasten-inhalt li:first-child { border-top: 0; }
.kasten-inhalt a {
  display: block; padding: .5rem 0; font-size: .92rem;
  color: var(--text-weich); text-decoration: none;
}
.kasten-inhalt a:hover { color: var(--ziegel); text-decoration: underline; }

/* Die Seitenspalte klebt beim Scrollen mit - aber nur, wo Platz dafür ist. */
@media (min-width: 62rem) {
  .seitenspalte { position: sticky; top: 1.5rem; align-self: start; }
}

/* Blöcke innerhalb der linken Spalte: kein eigener Breitenrahmen mehr,
   nur noch der senkrechte Abstand. */
.blockabschnitt { padding-block: 0 1.6rem; }
.blockabschnitt:last-child { padding-bottom: 0; }
.blockabschnitt.sand {
  background: var(--sand); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-bottom: 1.6rem;
}

/* ---- Fehlerseite nach dem Entwurf ---- */
.fehlernummer {
  font-family: var(--schrift-titel); font-size: 4rem; line-height: 1;
  color: var(--linie); font-weight: 700; margin: 0 0 .2rem;
}
.fehlertext { color: var(--text-zweit); max-width: 34rem; margin-bottom: 1.6rem; }
/* Knopf UNTER dem Feld, linksbündig - so steht es im Entwurf. */
.suchfeld-gross { margin-bottom: 2rem; max-width: 34rem; }
.suchfeld-gross input {
  width: 100%; padding: .8rem .9rem; font: inherit;
  border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
}
.suchfeld-gross input:focus-visible { outline: 2px solid var(--ziegel); outline-offset: 2px; }
.suchfeld-gross .knopf { margin-top: .9rem; }
.bereichsliste { list-style: disc; margin: 0 0 1rem 1.2rem; }
.bereichsliste li { margin-bottom: .45rem; color: var(--text-weich); }
.bereichsliste a { color: var(--text); font-weight: 600; text-decoration: none; }
.bereichsliste a:hover { color: var(--ziegel); text-decoration: underline; }

/* ---- Fußbereich nach dem Entwurf ---- */
/* Die Oberkante steigt nach rechts - im Entwurf gemessen: links 70 px
   tiefer als rechts. Ueber clip-path statt ueber ein gedrehtes Rechteck,
   das an den Raendern Reste hinterliess. */
.fuss {
  position: relative; overflow: hidden; margin-top: 4rem;
  clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 48rem) { .fuss { clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%); } }
.fuss .wrap { position: relative; padding-top: 5.6rem; }
/* Im Entwurf gemessen: 64 px breit - deutlich kleiner als das Kopflogo. */
/* Mehr Luft nach oben: Die Schraege schneidet den Fussbereich an, und das
   Logo stand zu dicht darunter. */
.fuss-logo { display: block; margin: 1.6rem 0 .9rem; width: 4rem; height: auto; }
.fuss-claim { margin-bottom: 2rem; }
.fuss-firma { font-weight: 700; color: #fff; margin-bottom: .6rem; }
.fuss-spalten p { color: #A7A6A4; font-size: .88rem; line-height: 1.7; }
.fuss-recht {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 2rem; padding-top: 1rem;
  /* Im Entwurf RGB 143 - das ergaebe auf #333 nur 3,9:1. Die
     Barrierefreiheitsvorgabe des Projekts verlangt 4,5:1 fuer Fliesstext,
     deshalb hier eine Spur heller als gemessen. */
  color: #A09E98; font-size: .82rem;
}
/* Wasserzeichen unten rechts, angeschnitten wie im Entwurf. */
/* Im Entwurf gemessen: Das Zeichen ist 20 Helligkeitsstufen heller als der
   Grund - auf #333 also #474747, was 10 Prozent Deckkraft entspricht. Es
   steht mit rund 3 Prozent Abstand vom rechten Rand und wird NICHT
   angeschnitten; es nimmt etwa 22 Prozent der Breite ein. */
.fuss-wasserzeichen {
  position: absolute; right: 3%; bottom: 1.2rem;
  width: 22%; max-width: 20rem; height: auto;
  opacity: .18; pointer-events: none;
}
@media (max-width: 48rem) { .fuss-wasserzeichen { display: none; } }

/* ---- Bereichskacheln mit Bild nach dem Entwurf ---- */
.kachel { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
/* Der Schraegschnitt entsteht am Bild SELBST, nicht ueber einen weissen
   Balken darueber. Der lag frueher 1rem tief im Textbereich und schnitt die
   Oberkante der Ueberschrift ab - "Komplettausbau" war halb verdeckt. */
.kachel-bild { display: block; position: relative; }
.kachel-bild img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px));
}
.kachel-text { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.3rem 1.3rem; }
.kachel-text h3 { font-family: var(--schrift-titel); font-size: 1.3rem; margin-bottom: .5rem; }
.kachel-text p { color: var(--text-zweit); font-size: .94rem; line-height: 1.6; margin-bottom: .9rem; }
.kachel-text .kachel-mehr { margin-top: auto; }
/* Kacheln ohne Bild behalten ihren Innenabstand */
.kachel > .kachel-text:first-child { padding-top: 1.3rem; }

/* ---- Preistabelle nach dem Entwurf ---- */
.preistabelle { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.preistabelle thead th {
  background: var(--anthrazit); color: #fff; font-family: var(--schrift-titel);
  font-size: 1.02rem; font-weight: 700; padding: .85rem 1.1rem; border: 0;
}
.preistabelle thead th.rechts { text-align: right; font-family: var(--schrift-text);
                                font-size: .88rem; font-weight: 400; color: var(--hell-auf-dunkel); }
.preistabelle td { padding: .85rem 1.1rem; vertical-align: top; border-bottom: 1px solid var(--linie); }
.preistabelle tbody tr:last-child td { border-bottom: 0; }
.preistabelle tbody tr:nth-child(even) { background: #FAF8F5; }
/* Die Preise stehen in der Endfassung in Rot. */
.preistabelle td.rechts { text-align: right; white-space: nowrap; }
.preistabelle td.rechts strong { color: var(--ziegel); font-size: 1.02rem; }
.tabelle-detail { display: block; margin-top: .2rem; font-size: .85rem; color: var(--text-zweit); line-height: 1.5; }
@media (max-width: 36rem) {
  .preistabelle td.rechts { white-space: normal; }
  .preistabelle td, .preistabelle thead th { padding: .7rem .8rem; }
}

/* Chips: erstes Wort rot, Zusatz normal - wie im Entwurf.
   Der Abstand kommt über gap: Ein Leerzeichen im Markup faellt zwischen
   Flex-Elementen weg. */
.chip b { color: var(--ziegel); font-weight: 700; }
.chip { color: var(--text); font-weight: 400; gap: .32em; }

/* ---- Ansprechpartner-Karte der Startseite (Endfassung) ----
   Weiße Karte, die den Banner von unten überlappt. */
/* Flacher und weiter in den Banner geschoben - im Entwurf sitzt die Karte
   deutlich hoeher und ist gut ein Zehntel niedriger als bisher bei mir. */
.cta-karte {
  position: relative; z-index: 3; margin-top: -4.5rem; margin-bottom: 2.5rem;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  padding: 1.05rem 1.3rem;
  display: grid; gap: 1rem; align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
}
@media (min-width: 56rem) {
  .cta-karte { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.8rem; padding: 1.2rem 1.8rem; }
}
.cta-karte .cta-bild { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.cta-karte-text h2 { font-family: var(--schrift-titel); font-size: 1.1rem; margin: 0 0 .3rem; }
.cta-karte-text p { color: var(--text-zweit); font-size: .89rem; line-height: 1.55; margin: 0; }
.cta-karte-tel { text-align: left; }
@media (min-width: 56rem) { .cta-karte-tel { text-align: right; white-space: nowrap; } }
.cta-karte-tel a {
  font-family: var(--schrift-titel); font-size: 1.65rem; font-weight: 700;
  color: var(--ziegel); text-decoration: none; line-height: 1.1; display: block;
}
.cta-karte-tel a:hover { text-decoration: underline; }
.cta-karte-tel span { display: block; font-size: .86rem; color: var(--text-zweit); margin-top: .15rem; }
@media (max-width: 56rem) {
  .cta-karte { grid-template-columns: auto minmax(0, 1fr); margin-top: -2rem; }
  .cta-karte-tel { grid-column: 1 / -1; }
}

/* ---- Hinweiskasten nach der Endfassung ----
   Dicker roter Balken links, sandfarbener Grund, darin bis zu drei Spalten. */
.hinweiskasten {
  border-left: 5px solid var(--ziegel);
  background: var(--sand); border-top: 1px solid var(--linie);
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.8rem;
}
.hinweiskasten > h3 { font-family: var(--schrift-titel); font-size: 1.35rem; margin: 0 0 .6rem; }
.hinweiskasten .vorspann { max-width: 46rem; margin-bottom: 1.3rem; }
.hinweiskasten .raster .kachel {
  background: none; border: 0; padding: 0; box-shadow: none;
}
.hinweiskasten .raster .kachel-text { padding: 0; }
.hinweiskasten .raster h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.hinweiskasten .knopf-zweit { margin-top: .4rem; }

/* ---- Nummerierter Ablauf nach der Endfassung ---- */
.schritte { list-style: none; margin: 1.6rem 0 0; padding: 0;
            display: grid; gap: 1.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem; } }
.schritte li { margin: 0; }
/* Rotes Schrägschild mit der Ziffer.
 *
 * Im Entwurf gemessen: 48 x 33 px, waagerechter Versatz 6 px. Der Versatz
 * ist FEST, nicht der Winkel - beim Schraegbalken sind es ebenfalls rund
 * 5 px, obwohl der nur 13 px hoch ist. Deshalb clip-path mit festem Mass
 * statt skewX, sonst waere das hohe Schild viel zu stark geneigt. */
.schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 2.06rem; padding: 0; margin-bottom: .9rem;
  background: var(--ziegel); color: #fff;
  font-family: var(--schrift-titel); font-size: .95rem; font-weight: 700;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.schritte h3 { font-family: var(--schrift-titel); font-size: 1.12rem; margin-bottom: .4rem; color: #fff; }
.schritte p { color: #C9C5BE; font-size: .92rem; line-height: 1.6; margin: 0; }
@media (max-width: 62rem) { }

/* ---- Bewertungskarten nach der Endfassung ---- */
.bewertung {
  background: var(--sand); border: 1px solid var(--linie);
  border-left: 4px solid var(--ziegel); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.3rem; margin: 0;
}
.bewertung .sterne { color: var(--ziegel); font-size: 1rem; letter-spacing: .12em; margin-bottom: .6rem; }
.bewertung p { font-size: .96rem; line-height: 1.65; color: var(--text-weich); margin-bottom: .8rem; }
.bewertung footer { font-size: .84rem; color: var(--text-zweit); }

/* ---- Band mit Handlungsaufforderung nach der Endfassung ---- */
.dunkel .cta { align-items: center; justify-content: space-between; gap: 2rem; }
.dunkel .cta > div:first-child { flex: 1 1 28rem; }
.cta-rechts { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
@media (min-width: 56rem) { .cta-rechts { align-items: flex-end; text-align: right; } }
.cta-anruf { font-size: .86rem; color: var(--hell-auf-dunkel); margin: 0; }
.cta-anruf a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }

/* Ratgeberkacheln: rote Oberkante und rote Kategoriezeile */
.kachel .claim { display: block; font-size: .72rem; margin-bottom: .45rem; }
.raster .kachel:has(.claim) { border-top: 3px solid var(--ziegel); border-radius: 0 0 var(--radius) var(--radius); }

/* ---- Wartungsband nach der Endfassung ---- */
.leiste { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); margin-top: 1.4rem; }
@media (min-width: 40rem) { .leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .leiste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem; } }
.leiste > div { border-left: 3px solid var(--ziegel); padding-left: .9rem; }
.leiste strong { display: block; color: #fff; font-family: var(--schrift-titel);
                 font-size: 1.02rem; margin-bottom: .25rem; }
/* Nachgemessen an den HELLSTEN Glyphenpixeln: RGB 187. Die vorherige
   Messung hatte die geglaetteten Raender erfasst und war dadurch viel zu
   dunkel - bei heller Schrift auf dunklem Grund liegt die echte Farbe im
   Kern, nicht am Rand. */
.leiste span { display: block; color: #C9C5BE; font-size: .84rem; line-height: 1.55; }

/* ---- Häufige Fragen nach der Endfassung ---- */
.fragen { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.4rem; }
.fragen details {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
}
.fragen details[open] { background: var(--sand); }
.fragen summary {
  position: relative; cursor: pointer; list-style: none;
  padding: .95rem 3rem .95rem 1.2rem;
  font-weight: 700; font-size: 1rem; color: var(--text);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  color: var(--ziegel); font-size: 1.35rem; font-weight: 400; line-height: 1;
}
.fragen details[open] summary::after { content: "−"; }
.fragen summary:focus-visible { outline: 2px solid var(--ziegel); outline-offset: -2px; }
.fragen .antwort { padding: 0 1.2rem 1.1rem; }
.fragen .antwort p { color: var(--text-weich); font-size: .95rem; line-height: 1.7; margin: 0; }

/* ---- Ortsgruppen nach der Endfassung ---- */
.ortsgruppen { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 1.2rem; }
.ortsgruppe { margin: 0; }
.ortsgruppe-titel { font-size: .85rem; color: var(--text-zweit); margin-bottom: .5rem; }
.chips-klein { gap: .45rem; margin-bottom: 0; }
.chips-klein .chip {
  min-height: 2.1rem; padding: .35rem .8rem; font-size: .88rem; font-weight: 400;
  border-radius: var(--radius); color: var(--text-weich);
}
.chips-klein a.chip:hover { border-color: var(--ziegel); color: var(--ziegel); }
.chips-klein span.chip { cursor: default; }

/* Überschrift der Folgefolien - optisch wie die h1, ohne Überschriftenrang */
.banner-titel {
  font-family: var(--schrift-titel); font-weight: 700; line-height: 1.12;
  font-size: clamp(1.85rem, 5.2vw, 2.9rem);
  max-width: 20ch; margin: 0;
}

/* ---- Haus-Zeichen in der Navigation ---- */
.knopf-home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; color: #4A4742;
  border-bottom: 3px solid transparent;
}
.knopf-home:hover { color: var(--ziegel); }
.knopf-home[aria-current="page"] { color: var(--anthrazit); border-bottom-color: var(--ziegel); }

/* Der Ablaufabschnitt ist im Entwurf eine Spur heller als die übrigen
   dunklen Flächen - gemessen RGB 61 statt 51. */
.dunkel-mittel { background: var(--mittel); }
/* Die Fragen liegen auf Sand; die Karten darin bleiben weiß. */
.abschnitt.sand .fragen details { background: #fff; }
.abschnitt.sand .fragen details[open] { background: #fff; border-color: var(--ziegel); }

/* Der Ablaufabschnitt ist im Entwurf eine Spur heller als die übrigen
   dunklen Flächen - gemessen RGB 61 statt 51. */
.dunkel-mittel { background: var(--mittel); }
/* Die Fragen liegen auf Sand; die Karten darin bleiben weiß. */
.abschnitt.sand .fragen details { background: #fff; }
.abschnitt.sand .fragen details[open] { background: #fff; border-color: var(--ziegel); }

/* ---- Seitenkopf auf den Vorlagenseiten ----
   Kontakt, Danke, Projekte, Sitemap, Suche und Cookie-Einstellungen trugen
   bisher denselben dunklen Bannerbereich wie die Startseite. Im Entwurf
   steht die Überschrift dort auf hellem Grund - wie auf allen Unterseiten. */
.seitenkopf-bereich { padding-bottom: 1.2rem; }
.seitenkopf-text {
  color: var(--text-zweit); font-size: 1rem; line-height: 1.7;
  max-width: 42rem; margin-top: .9rem;
}
.seitenkopf-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 1.6rem; }
/* Der zweite Knopf steht hier auf hellem Grund und braucht die dunkle
   Schrift - nicht die weiße aus dem Banner. */
.seitenkopf-wege .knopf-zweit { color: var(--text); }
.seitenkopf-wege .knopf-zweit::after { content: none; }

/* Urheberzeile ganz unten im Fußbereich */
.fuss-urheber {
  margin-top: 1.4rem; font-size: .8rem; color: #9A9893;
}
.fuss-urheber a { color: #A8A6A0; text-decoration: underline; text-underline-offset: .15em; }
.fuss-urheber a:hover { color: #fff; }

/* ---- Eigene Kästen der Seitenspalte ----
   „Der Betrieb in Zahlen", „Gewerke in diesem Bad", „Anfahrt" und andere. */
.kasten-eigen .kasten-liste { list-style: none; margin: 0; padding: 0; }
.kasten-eigen .kasten-liste li {
  border-top: 1px solid var(--linie); padding: .55rem 0;
  font-size: .9rem; line-height: 1.45; color: var(--text-weich);
}
.kasten-eigen .kasten-liste li:first-child { border-top: 0; padding-top: 0; }
.kasten-eigen .kasten-liste li:last-child { padding-bottom: 0; }
.kasten-eigen .kasten-liste strong { color: var(--anthrazit); }
.kasten-eigen .knopf { width: 100%; text-align: center; margin-top: .9rem; }
/* Dunkle Fassung, etwa für „Arbeiten bei SGM" */
.kasten-dunkel { background: var(--anthrazit); border-color: var(--anthrazit); }
.kasten-dunkel h2 { color: #fff; }
.kasten-dunkel p { color: var(--hell-auf-dunkel); }
.kasten-dunkel .kasten-liste li { color: var(--hell-auf-dunkel); border-top-color: rgba(255,255,255,.14); }
.kasten-dunkel .kasten-liste strong { color: #fff; }

/* ==========================================================================
   MOBILE ANSICHT
   Nach dem Entwurf entwuerfe/startseite-mobil.png (340 px Breite).

   Der Unterschied ist strukturell, nicht nur eine Frage der Abstände: Auf
   dem Telefon steht das Bannerbild als EIGENES BAND ÜBER dem Text, nicht
   als Hintergrund dahinter. Ein Foto hinter der Schrift kostet auf kleinen
   Geräten Kontrast, ohne dass man vom Bild etwas erkennt.
   ========================================================================== */
@media (max-width: 62rem) {

  /* Der Seitenkasten entfällt - auf dem Telefon gibt es keinen Rand. */
  .seite { max-width: none; box-shadow: none; }

  /* Banner als Spalte: erst Bild, dann Text. */
  .banner {
    display: flex; flex-direction: column;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 60% calc(100% - 34px), 0 100%);
  }
  .banner-bild {
    position: relative; inset: auto; order: -1;
    width: 100%; aspect-ratio: 16 / 9; clip-path: none;
  }
  /* Verborgene Folien muessen hier GANZ verschwinden.
     Auf dem Desktop liegen sie uebereinander, dort haelt visibility:hidden
     die Hoehe konstant. Mobil stehen sie untereinander im Fluss - dann
     belegen zwei unsichtbare Baender zusammen rund 450 px leere Flaeche
     unter dem Bild. Genau das war zu sehen. */
  .banner-bild.ist-aus { display: none; }
  .banner-bild img { opacity: 1; }
  .banner-bild::after { background: none; }
  .banner-kante { display: none; }
  .banner > .wrap { padding-block: 1.6rem 2.4rem; }
  .banner-text-folie { max-width: none; }

  /* Bedienung: Punkte auf dem Bild oben rechts, Pfeile entfallen -
     auf dem Telefon wird gewischt oder gewartet. */
  .banner-bedienung { inset: 0 0 auto 0; height: 0; }
  .banner-pfeil { display: none; }

  /* Die Punkte stehen RECHTS AUF HÖHE DES ROTEN BALKENS, also in der ersten
     Zeile unter dem Bild.
   *
   * Vorher rechnete ich die Bildhöhe aus 56,25vw - der Viewportbreite. Der
   * Banner ist aber schmaler als das Fenster: bei 429 px Fenster nur 405 px.
   * Die Rechnung lag 13 px daneben, und der Banner beginnt ausserdem erst
   * unterhalb von Kopf und Servicezeile. Die Punkte landeten weit unten.
   *
   * Jetzt hängen sie am Textbereich statt am Fenster: derselbe obere
   * Abstand wie der Schrägbalken, rechts am Rand. Das stimmt bei jeder
   * Bildschirmbreite, ohne zu rechnen. */
  .banner > .wrap { position: relative; }
  .banner-punkte-nav {
    /* 1.75rem ist der Innenabstand des Banner-Wraps, nicht --rand: Der
       Banner hat einen eigenen Wert, sonst stünden die Punkte 8 px weiter
       aussen als der Text darunter. */
    position: absolute; top: 1.6rem; right: 1.75rem;
    left: auto; bottom: auto; margin: 0; z-index: 5;
  }
  .banner-punkte-nav button { background: rgba(255,255,255,.5); }
  .banner-punkte-nav button[aria-selected="true"] { background: var(--ziegel); }

  /* Verborgene Textfolien müssen hier GANZ verschwinden.
     Am Schreibtisch liegen alle drei übereinander, dort hält
     visibility: hidden die Höhe konstant und nichts springt. Mobil stehen
     sie untereinander im Fluss - dann bekommt der Banner die Höhe der
     LÄNGSTEN Folie, und bei einer kurzen bleibt eine große graue Fläche
     stehen. Genau das war zu sehen. */
  .banner-text-folie.ist-aus { display: none; }

  /* Knöpfe über die volle Breite, der zweite darunter ohne Balken. */
  .banner-wege { display: block; margin-top: 1.8rem; }
  .banner-wege .knopf { display: flex; width: 100%; margin-bottom: .9rem; }
  .banner .knopf-zweit { background: none; text-align: center; padding: .6rem 0 0; }
  .banner .knopf-zweit::after { content: none; }

  /* Wasserzeichen der dunklen Abschnitte entfallen auf dem Telefon: Dort ist
     kein Platz daneben, sie lägen hinter dem Text. */
  .wasserzeichen-rechts, .wasserzeichen-rechts-unten, .wasserzeichen-band { display: none; }

  /* Ansprechpartner-Karte: weniger Überlappung, Nummer unter dem Text */
  .cta-karte { margin-top: -1.5rem; padding: 1rem 1.1rem; }
  .cta-karte .cta-bild { width: 64px; height: 64px; }

  /* Kennzahlen zweispaltig, wie im Entwurf */
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }

  /* Seitenspalte unter den Inhalt, nicht daneben */
  .text-raster { display: block; }
  .seitenspalte { position: static; margin-top: 2rem; }
}

/* Sehr schmale Geräte: Innenabstand zurücknehmen, sonst bleibt zu wenig
   Textbreite übrig. */
@media (max-width: 26rem) {
  .banner > .wrap { padding-inline: 1.1rem; }
  .cta-karte { grid-template-columns: 1fr; text-align: left; }
  .cta-karte .cta-bild { width: 56px; height: 56px; }
}

/* Auf dem Telefon steht die Servicezeile UNTER dem Kopf und zeigt nur noch
   den Kostenhinweis und die Zeiten - so der Entwurf. Umgesetzt über die
   Reihenfolge im Flex-Kontext, damit das Markup gleich bleibt. */
@media (max-width: 62rem) {
  .seite { display: flex; flex-direction: column; }
  .seite > .servicezeile { order: 2; background: var(--sand); color: var(--text-zweit); }
  .seite > .kopf         { order: 1; }
  .seite > *             { order: 3; }
  .seite > .servicezeile .wrap { justify-content: center; padding-block: .5rem; }
  .servicezeile b { color: var(--text); }
  /* Auf dem Telefon zeigt die Leiste den Kostenhinweis und die Zeiten - wie
     im Entwurf. Die Rufnummer entfällt hier: Sie steht schon als roter Knopf
     im Kopf, und zweimal dieselbe Nummer in zwei Zeilen wirkt ratlos. */
  .service-links { display: flex; overflow: visible; }
  .service-links span:nth-child(1),
  .service-links span:nth-child(3) { display: none; }
  .service-links span:nth-child(2) { display: inline; }
  .service-rechts span:last-child { display: none; }
  .service-rechts span:first-child::before { content: "·"; color: var(--meta); margin-right: 1.1rem; }
  .service-links span + span::before,
  .service-rechts span + span::before { color: var(--meta); }
}

/* Überschrift mit Abstand nach oben - für Stellen, an denen sie unmittelbar
   auf einen Kasten folgt. */
.mit-abstand { margin-top: 2.6rem; }


/* ==========================================================================
   AUFKLAPPMENÜ FÜR DIE GEWERKESEITEN
   62 Leistungsseiten hingen bisher nur unter den sechs Bereichsseiten.
   Wer wusste, dass es sie gibt, fand sie — sonst nicht.
   ========================================================================== */
.punkt { position: relative; display: inline-flex; align-items: center; gap: .2rem; }
.punkt > a {
  color: #4A4742; font-size: .95rem; padding-block: .35rem;
  border-bottom: 3px solid transparent;
}
.punkt.aktiv > a { color: var(--anthrazit); font-weight: 700; border-bottom-color: var(--ziegel); }
/* Das hidden-Attribut wird von einer eigenen display-Angabe ausgehebelt -
   [hidden] aus dem Browser-Stylesheet hat geringere Gewichtung als eine
   Klasse. Deshalb hier ausdruecklich beruecksichtigt: Ohne JavaScript soll
   der Schalter gar nicht erst erscheinen. */
.punkt-schalter[hidden] { display: none; }
.punkt-schalter {
  border: 0; background: none; padding: .2rem; cursor: pointer; color: #4A4742;
  display: inline-flex; align-items: center; line-height: 0;
}
.punkt-schalter:hover { color: var(--ziegel); }
.punkt-schalter:focus-visible { outline: 2px solid var(--ziegel); outline-offset: 2px; border-radius: 2px; }
.punkt-schalter svg { transition: transform .15s ease; }
.punkt-schalter[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Die Klappe spannt über die ganze Seitenbreite, nicht nur über den Punkt:
   Sechs Spalten brauchen Platz, und eine schmale Liste mit 62 Einträgen
   wäre nicht zu überblicken. */
/* Die Klappe spannt über die ganze Kopfbreite und richtet sich am
   Kopfbereich aus, nicht am Menüpunkt - sonst lief sie rechts aus dem Bild. */
/* KEIN overflow hier.
 *
 * Vorher stand hier max-height mit overflow-y: auto als Sicherheitsnetz.
 * Ein Rollbereich schneidet aber alles ab, was ausserhalb seines Kastens
 * liegt - und die Bruecke ueber die tote Zone sitzt genau dort, bei
 * bottom: 100%. Sie wurde weggeschnitten, das Menue schloss sich beim
 * Hinunterfahren wieder.
 *
 * Das Netz wird auch nicht mehr gebraucht: Seit die Bereiche nur noch fuenf
 * Eintraege zeigen, ist die Klappe rund 460 px hoch. */
.aufklapp {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 40; background: #fff; border-top: 3px solid var(--ziegel);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}
/* Brücke über die tote Zone zwischen Menüpunkt und Klappe: rund 15 px
   Innenabstand des Kopfbereichs plus Rahmen. Ohne sie schloss sich das
   Menü, sobald man mit der Maus hinunterfuhr. */
.aufklapp::before {
  /* Deckt die rund 15 px zwischen Menuepunkt und Klappe mit Reserve ab.
     Ohne pointer-events waere sie zwar sichtbar leer, wuerde aber keine
     Zeigerereignisse aufnehmen - genau darauf kommt es hier an. */
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 1.4rem; pointer-events: auto;
}
.aufklapp { display: none; }
.punkt-auf:hover .aufklapp,
.punkt-auf:focus-within .aufklapp,
.punkt-auf[data-offen] .aufklapp { display: block; }
.punkt-auf { position: static; }
.kopf { position: relative; }
@media (hover: none) {
  .punkt-auf:hover .aufklapp { display: none; }
  .punkt-auf[data-offen] .aufklapp { display: block; }
}

/* Drei Bereiche: links die Einordnung, in der Mitte die Gewerke, rechts der
   Hinweis für alle, die ihr Vorhaben nicht finden. */
.aufklapp-innen {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  display: grid; align-items: start;
  grid-template-columns: 15rem minmax(0, 1fr);
}
@media (min-width: 76rem) {
  .aufklapp-innen { grid-template-columns: 15rem minmax(0, 1fr) 16rem; }
}

/* Linke Spalte auf Sand, wie im Portalmenü */
.aufklapp-seite {
  background: var(--sand); padding: 1.6rem 1.4rem 1.8rem var(--rand);
  align-self: stretch;
}
.aufklapp-seite h2 {
  font-family: var(--schrift-titel); font-size: 1.15rem; margin: 0 0 .5rem;
  color: var(--anthrazit);
}
.aufklapp-seite p { font-size: .84rem; line-height: 1.5; color: var(--text-zweit); margin: 0 0 1.1rem; }
.aufklapp-seite a { display: block; font-size: .88rem; padding: .35rem 0; color: var(--text); }
.aufklapp-seite a:hover { color: var(--ziegel); }
.aufklapp-haupt {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: .55rem .9rem !important; margin-bottom: .5rem; font-weight: 600;
}

/* Mitte: sechs Bereiche in drei Spalten, zwei Reihen */
.aufklapp-raster {
  display: grid; gap: 1.4rem 2rem; align-items: start;
  padding: 1.6rem 1.4rem 1.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 68rem) { .aufklapp-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aufklapp-spalte { min-width: 0; }
.aufklapp-kopf {
  display: block; font-family: var(--schrift-titel); font-size: .98rem;
  color: var(--anthrazit); padding-bottom: .4rem; margin-bottom: .3rem;
  border-bottom: 2px solid var(--ziegel);
}
.aufklapp-kopf:hover { color: var(--ziegel); }
.aufklapp ul { list-style: none; margin: 0; padding: 0; }
.aufklapp li { margin: 0; border-bottom: 1px solid var(--linie); }
.aufklapp li:last-child { border-bottom: 0; }
.aufklapp li a {
  display: block; padding: .42rem 0; font-size: .86rem; line-height: 1.35;
  color: var(--text-zweit);
}
.aufklapp li a:hover { color: var(--ziegel); }
.aufklapp li a[aria-current="page"] { color: var(--ziegel); font-weight: 600; }
.aufklapp-mehr { color: var(--ziegel) !important; font-weight: 600; }
.aufklapp a:focus-visible { outline: 2px solid var(--ziegel); outline-offset: 2px; }

/* Rechte Spalte: Hinweiskasten */
.aufklapp-hinweis {
  background: var(--sand); border-radius: var(--radius);
  margin: 1.6rem var(--rand) 1.8rem 0; padding: 1.2rem 1.2rem 1.3rem;
  align-self: start;
}
.aufklapp-hinweis strong { display: block; font-family: var(--schrift-titel); font-size: .98rem; margin-bottom: .5rem; }
.aufklapp-hinweis p { font-size: .84rem; line-height: 1.5; color: var(--text-zweit); margin: 0 0 .9rem; }
.aufklapp-tel {
  display: block; font-family: var(--schrift-titel); font-size: 1.15rem;
  color: var(--ziegel); font-weight: 700; margin-bottom: .6rem;
}
.aufklapp-hinweis > a:last-child { display: block; font-size: .88rem; font-weight: 600; color: var(--anthrazit); }
.aufklapp-hinweis > a:last-child:hover { color: var(--ziegel); }
@media (max-width: 76rem) { .aufklapp-hinweis { display: none; } }

/* Im Mobilmenü steht die Liste untereinander statt in Spalten. */
@media (max-width: 62rem) {
  .aufklapp { position: static; width: auto; box-shadow: none;
              border-top: 0; max-height: none; }
  .aufklapp::before { content: none; }
  .aufklapp-innen { grid-template-columns: minmax(0, 1fr); }
  .aufklapp-seite, .aufklapp-hinweis { display: none; }
  .aufklapp-raster { grid-template-columns: minmax(0, 1fr); padding-inline: 0; gap: 1.2rem; }
}

/* Gewerke im Mobilmenü, aufklappbar je Bereich.
 *
 * ACHTUNG: Das Mobilmenü hat einen WEISSEN Grund, nicht wie das Aufklappmenü
 * am Schreibtisch einen dunklen. Hier standen zuerst helle Farben - der
 * Bereichsname kam auf 1,5:1, die Einträge auf 2,3:1. Beides war praktisch
 * unlesbar. */
.menue-bereich details { border-top: 1px solid var(--linie); }
.menue-bereich summary {
  list-style: none; cursor: pointer; position: relative;
  padding: .7rem 2.2rem .7rem 1.2rem; font-size: .95rem;
  color: var(--anthrazit); font-weight: 600;
}
.menue-bereich summary:hover { color: var(--ziegel); }
.menue-bereich summary::-webkit-details-marker { display: none; }
.menue-bereich summary::after {
  content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  color: var(--ziegel); font-size: 1.25rem; line-height: 1;
}
.menue-bereich details[open] summary::after { content: "−"; }
.menue-bereich details[open] summary { background: var(--sand); }
.menue-bereich summary:focus-visible { outline: 2px solid var(--ziegel); outline-offset: -2px; }
.menue-bereich details > ul { padding-bottom: .5rem; }
.menue-bereich details > ul a {
  display: block; padding: .45rem 1.2rem .45rem 2.2rem;
  font-size: .88rem; color: var(--text-zweit);
}
.menue-bereich details > ul a:hover,
.menue-bereich details > ul a[aria-current="page"] { color: var(--ziegel); font-weight: 600; }

/* Kurze und lange Textfassung: beide im Markup, eine sichtbar.
   Ein Austausch per Skript würde den Text nach dem Laden springen lassen. */
.nur-schmal { display: none; }
@media (max-width: 62rem) {
  .nur-breit  { display: none; }
  .nur-schmal { display: inline; }
  p.nur-schmal { display: block; }
}