@charset "utf-8";
/* cmimmogmbh.de - Umsetzung nach Screendesign Daniela, 05.08.2026 */

/* ---------------------------------------------------------- Schriften
   PT Sans Narrow, SIL Open Font License. Selbst gehostet, damit keine
   Verbindung zu Google entsteht und kein Einwilligungsbanner noetig ist. */
@font-face {
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-narrow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-narrow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-sans-narrow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-sans-narrow-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------- Basis */
:root {
  --rot: #9b082a;            /* Logo- und Akzentrot */
  --rot-flaeche: #c9234a;    /* Balken- und Kachelflaechen */
  --rot-dunkel: #b61e42;
  --grau: #ededed;
  --grau-linie: #d6d6d6;
  --text: #1d1d1b;
  --text-leise: #55534f;
  --breite: 1140px;
  --rand: 24px;
  /* Luft zwischen dem letzten Inhaltsblock und dem roten Fussband. Steht an
     einer Stelle, damit alle Seiten denselben Abstand haben. */
  --fuss-abstand: clamp(60px, 7.5vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }   /* sonst bleibt unter dem Bild eine Grundlinien-Luecke */
a { color: var(--rot); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rot-flaeche);
  outline-offset: 2px;
}

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

.nur-screenreader {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--rot); padding: 12px 18px; font-weight: 700;
}
.sprungmarke:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------ Kopf */
.kopf {
  border-bottom: 1px solid var(--grau-linie);
  background: #fff;
}
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 100px;
}
.kopf__logo { display: block; }
/* 222 px sind die Breite des Schriftzugs im Screendesign (58,4 pt auf einer
   1440-px-Buehne). Sie stimmt nur, weil cmi.svg seit 15.08.2026 auf die
   Zeichnung zugeschnitten ist - vorher waren rund 16 % der Angabe Luft.
   Die Kopfhoehe (min-height) haelt den Kopf auf seinen bisherigen 100 px:
   die kamen frueher von der luftigen Logo-Leinwand. */
.kopf__logo img { width: 222px; }

.menue-schalter {
  display: none; border: 0; background: none; padding: 8px; cursor: pointer;
  font: inherit; color: var(--text);
}
.menue-schalter svg { display: block; }

/* Nur die aeussere Liste liegt nebeneinander - sonst gewinnt sie per
   Spezifitaet gegen das display:none des Aufklappmenues. */
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; gap: 0; }
.nav li { position: relative; }
.nav a, .nav .aufklapp__knopf {
  display: block; padding: 10px 16px; color: var(--text);
  text-decoration: none; font-size: 17px; background: none; border: 0;
  font-family: inherit; cursor: pointer;
}
.nav > ul > li + li { border-left: 1px solid var(--grau-linie); }
.nav a:hover, .nav a:focus-visible,
.nav .aufklapp__knopf:hover, .nav .aufklapp__knopf[aria-expanded="true"] { color: var(--rot); }
.nav a[aria-current="page"] { color: var(--rot); font-weight: 700; }

.aufklapp__knopf::after {
  content: ""; display: inline-block; width: .42em; height: .42em;
  margin-left: .5em; vertical-align: .12em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.aufklapp__liste {
  display: none; position: absolute; right: 0; top: 100%; z-index: 30;
  min-width: 260px; background: #fff; border: 1px solid var(--grau-linie);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12); padding: 6px 0;
}
.aufklapp__liste.offen { display: block; }
.aufklapp__liste li + li { border: 0; }
.aufklapp__liste a { padding: 10px 18px; white-space: nowrap; }
.aufklapp__liste a:hover { background: var(--grau); }

/* ------------------------------------------------------------ Buehne */
/* Die Fotos stecken in <picture>, deshalb ueberall "picture img" adressieren -
   ein Kindselektor auf das Bild greift nicht. */
/* Das Logo sitzt im Screendesign nicht in der Bildmitte, sondern im oberen
   Drittel. Prozentwerte bei "top" beziehen sich auf die Hoehe des Bildes,
   sind also unabhaengig vom Bildausschnitt - anders als Prozentwerte bei
   "padding", die immer an der Breite haengen. Die Logo-Dateien sind auf die
   Zeichnung zugeschnitten (siehe _build/assets.py), deshalb entsprechen die
   Werte hier eins zu eins den Massen aus dem Layout. */
.buehne { position: relative; }
.buehne > picture img { width: 100%; aspect-ratio: 27 / 10; object-fit: cover; }
/* Senkrechter Bildausschnitt je Motiv. Das Foto ist 3:2, die Buehne 27:10 -
   es faellt also oben und unten etwas weg, und zwar nicht bei jedem Motiv an
   derselben Stelle. Die Werte stammen aus dem Screendesign (Schablonensuche
   ueber das Originalfoto, ausschnitt_messen.py); 0 % bedeutet "obere Kante des
   Fotos", 100 % "untere Kante". Beim Werkzeugmotiv liegen die Werkzeuge ganz
   unten im Original - deshalb 97 % (Stefan Kerp, 15.08.2026: "vom Werkzeug ist
   nur sehr wenig zu sehen"). Weil hier nur der Ausschnitt verschoben wird und
   nicht die Datei, stimmt er auf dem Handy genauso, wo die Buehne hoeher ist. */
.buehne--hero-home    > picture img { object-position: 50% 32%; }
.buehne--hero-cmi     > picture img { object-position: 50% 35%; }
.buehne--hero-immo    > picture img { object-position: 50% 24%; }
.buehne--hero-service > picture img { object-position: 50% 97%; }
.buehne__logo {
  position: absolute; top: 8%; left: 0; right: 0; display: flex;
  justify-content: center; padding: 0 24px;
  pointer-events: none;
}
/* Die Logos liegen in Originalfarbe ueber den Fotos, so wie im Screendesign.
   Der helle Schein darunter haelt den dunklen Zusatz auch auf unruhigen
   Bildstellen lesbar, ohne das Foto abzudunkeln. */
.buehne__logo img {
  width: min(26.5%, 420px); aspect-ratio: auto; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, .85))
          drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}

/* ------------------------------------------------------------ Intro */
.intro { padding: 46px 0 8px; }
.intro h1 {
  margin: 0 0 30px; font-size: clamp(25px, 3.1vw, 35px); line-height: 1.24;
  font-weight: 700; letter-spacing: -.01em; max-width: 26em;
}
.intro__spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px;
  align-items: start;
}
.intro__spalten p { margin: 0 0 1em; }
.intro__spalten p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- Rote Balken */
.balken {
  background: var(--rot-flaeche) url("../img/fond-balken.webp") center / cover no-repeat;
  color: #fff; margin: 46px 0 0;
}
.balken .wrap { padding-top: 16px; padding-bottom: 16px; }
.balken p { margin: 0; font-weight: 700; font-size: clamp(18px, 2vw, 21px); }
.balken--hoch .wrap { padding-top: 20px; padding-bottom: 20px; }

/* ------------------------------------------------- Kacheln (Startseite) */
/* Luft ueber und unter den Kacheln wie im Layout - unten deutlich mehr,
   damit der Block nicht am roten Fussband klebt. */
.karten {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  padding: clamp(40px, 6vw, 92px) 0 var(--fuss-abstand);
}
.karte { display: flex; flex-direction: column; }
.karte__bild { position: relative; }
.karte__bild > picture img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.karte__marke {
  position: absolute; top: 10%; left: 0; right: 0; display: flex;
  justify-content: center; pointer-events: none;
}
.karte__marke img {
  width: 51%; max-width: 260px; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .85))
          drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}
/* Mittlere Kachel: im Layout steht das Logo etwas weiter rechts, damit es
   nicht auf den Haenden klebt. Verschoben wird das Bild selbst - ein
   Innenabstand am Kasten haette auch die verfuegbare Breite verkleinert und
   damit das Logo geschrumpft. Genau das war der Grund, warum das CM-IMMO-Logo
   kleiner aussah als die beiden anderen (Stefan Kerp, 15.08.2026): 51 % von
   88 % sind nur 45 % der Kachel. */
.karte__marke--versetzt img { position: relative; left: 5.5%; }
.karte__inhalt {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 18px; text-align: center; padding: 22px 20px 26px;
  background: var(--rot-flaeche) url("../img/fond-kachel.webp") center / cover no-repeat;
  color: #fff;
}
.karte__inhalt h2 { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; }
.knopf {
  display: inline-block; margin-top: auto; background: #fff; color: var(--text);
  text-decoration: none; font-weight: 700; font-size: 16px;
  padding: 9px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit;
}
.knopf:hover, .knopf:focus-visible { background: var(--text); color: #fff; }

/* -------------------------------------------------------- Bildraster */
.raster { display: grid; gap: 24px; padding: 34px 0 10px; }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster figure { margin: 0; }
.raster__bild { position: relative; }
/* 11/10 statt 5/4: das ist das Format der Kacheln im Screendesign. Die Fotos
   sind in assets.py schon auf genau dieses Format zugeschnitten, hier darf
   also nichts mehr wegfallen. */
.raster--4 .raster__bild > picture img { aspect-ratio: 11 / 10; object-fit: cover; width: 100%; }
.raster--3 .raster__bild > picture img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
/* Beschriftung im Bild: sie steht im Screendesign je Motiv woanders - dort,
   wo das Foto ruhig ist - und ist auf hellen Motiven dunkel statt weiss.
   Deshalb keine flaechige Abdunklung mehr ueber dem Bild, sondern ein
   weicher Schatten direkt an der Schrift. */
/* 25 px sind der Wert aus dem Screendesign (8,4 pt). Vorher standen hier
   19 px - die Beschriftung wirkte dadurch verloren (Stefan Kerp, 15.08.2026).
   Gilt fuer die Kacheln beider Unterseiten, damit sie gleich bleiben. */
.raster__titel {
  position: absolute; top: 8%; left: 0; right: 0; display: flex;
  justify-content: center; padding: 0 8%; text-align: center;
  color: #fff; font-weight: 700; font-size: 25px; line-height: 1.22;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 16px rgba(0, 0, 0, .55);
}
.raster__titel--tief { top: 60%; }
.raster__titel--links {
  justify-content: flex-start; text-align: left; padding-left: 11%;
}
.raster__titel--dunkel {
  color: var(--text);
  text-shadow: 0 1px 3px rgba(255, 255, 255, .8), 0 2px 16px rgba(255, 255, 255, .7);
}
/* 18 px wie im Screendesign (6 pt, dieselbe Groesse wie der Fliesstext). */
.raster figcaption {
  padding: 12px 6px 0; text-align: center; font-size: 18px;
  line-height: 1.4; color: var(--text-leise);
}

/* ------------------------------------------------------ Kontaktblock */
.kontaktblock { background: var(--grau); margin-top: 44px; }
.kontaktblock .wrap { padding-top: 30px; padding-bottom: 30px; }
.kontaktblock__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; }
.kontaktblock h2 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.kontaktblock h2.akzent { color: var(--rot); }
.kontaktblock p { margin: 0; }
.kontaktblock a { color: inherit; }

/* --------------------------------------------------------- Formular */
.formular { padding: 34px 0 var(--fuss-abstand); }
.formular__raster {
  display: grid; grid-template-columns: 1fr 1.15fr 1.25fr; gap: 26px 40px;
  align-items: start;
}
.feld { margin-bottom: 16px; }
.feld label { display: block; font-size: 16px; margin-bottom: 5px; }
.feld input {
  width: 100%; font: inherit; font-size: 17px; padding: 8px 14px;
  border: 1px solid #9a9a9a; border-radius: 999px; background: #fff;
  color: var(--text);
}
/* Pflichtangaben: Sternchen am Feldnamen, Erklaerung unter der Feldspalte.
   Beides ist aria-hidden - Vorleseprogramme erfahren ueber das required-Attribut
   der Felder ohnehin, was Pflicht ist, und wuerden sonst "Stern" mitlesen. */
.pflicht { color: var(--rot-flaeche); padding-left: 2px; }
.feld__hinweis { margin: 0; font-size: 15px; color: var(--text-leise); }
.formular fieldset { border: 0; margin: 0; padding: 0; }
.formular legend { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: 17px; }
.auswahl { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: 17px; }
.auswahl input { margin: 5px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--rot-flaeche); }
.auswahl + .auswahl--abstand { margin-top: 16px; }
.formular textarea {
  width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; min-height: 190px;
  border: 1px solid #9a9a9a; border-radius: 14px; resize: vertical; background: #fff;
  color: var(--text);
}
.formular__hinweis { font-size: 13.5px; line-height: 1.45; color: var(--text-leise); margin: 12px 0 16px; }
.formular__hinweis a { color: var(--text-leise); }
.knopf--rot { background: var(--rot-flaeche); color: #fff; padding: 11px 30px; }
.knopf--rot:hover, .knopf--rot:focus-visible { background: var(--rot); color: #fff; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { padding: 14px 18px; margin: 0 0 22px; border-left: 5px solid; font-size: 17px; }
.meldung--fehler { background: #fdeaee; border-color: var(--rot-flaeche); }
.meldung--gut { background: #eaf4ec; border-color: #2e7d47; }

/* ------------------------------------------------------------- Fuss */
/* Schriftfarbe wie im Screendesign: die drei Firmenbloecke stehen dunkel auf
   dem roten Band, nur Impressum und Datenschutzerklaerung sind weiss. */
.fuss { margin-top: 0; }
.fuss__band { display: grid; grid-template-columns: 230px 1fr; align-items: stretch; }
.fuss__marke { background: var(--grau); display: flex; align-items: center; justify-content: center; padding: 22px 18px; }
/* 177 px = Breite des Schriftzugs im Screendesign (46,6 pt). Mit dem
   zugeschnittenen cmi.svg (15.08.2026) meint die Angabe wieder die Schrift
   selbst; vorher war ein Sechstel davon Luft. */
.fuss__marke img { width: 177px; }
.fuss__inhalt {
  background: var(--rot-flaeche) url("../img/fond-footer.webp") center / cover no-repeat;
  color: var(--text); padding: 22px 26px;
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 18px 28px;
}
.fuss__inhalt p { margin: 0; font-size: 16px; line-height: 1.5; }
.fuss__inhalt b { display: block; font-size: 16.5px; }
.fuss__inhalt a { color: inherit; text-decoration: none; }
.fuss__inhalt a:hover { text-decoration: underline; }
.fuss__rechtliches {
  display: flex; flex-direction: column; gap: 2px; font-size: 16px;
  color: #fff;
}

/* ------------------------------------------------------ Textseiten */
.textseite { padding: 40px 0 var(--fuss-abstand); max-width: 800px; }
.textseite h1 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 24px; }
.textseite h2 { font-size: 21px; margin: 34px 0 8px; }
.textseite h3 { font-size: 18px; margin: 24px 0 6px; }
.textseite p, .textseite li { margin: 0 0 12px; }
.textseite ul { padding-left: 22px; }
.textseite .hinweis-offen {
  background: #fdeaee; border-left: 5px solid var(--rot-flaeche);
  padding: 12px 16px; font-size: 16px;
}
/* Widerspruchsrecht (Art. 21 DSGVO). Das Gesetz verlangt eine "getrennte"
   Darstellung - e-recht24 loest das mit durchgehenden Grossbuchstaben, die
   sich schlecht lesen. Hier steht der Text normal und wird stattdessen als
   Kasten abgesetzt. */
.textseite .hervorgehoben {
  background: var(--grau); border-left: 5px solid var(--rot-flaeche);
  padding: 14px 18px; margin: 12px 0 18px;
}

/* ---------------------------------------------------------- Nach oben */
/* Erscheint erst nach knapp einer Bildschirmhoehe (site.js setzt hidden).
   Bewusst zurueckhaltend: unten rechts, halbtransparent, ueber dem Inhalt. */
.nach-oben {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  background: var(--rot-flaeche); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 10px 16px 10px 13px;
  border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.nach-oben[hidden] { display: none; }
.nach-oben:hover, .nach-oben:focus-visible { background: var(--rot); }
@media (max-width: 560px) {
  .nach-oben { right: 14px; bottom: 14px; padding: 11px; }
  .nach-oben span { position: absolute; width: 1px; height: 1px; overflow: hidden;
                    clip-path: inset(50%); white-space: nowrap; }
}
@media print { .nach-oben { display: none; } }

/* --------------------------------------------------------- Umbrueche */
@media (max-width: 1000px) {
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .formular__raster { grid-template-columns: 1fr 1fr; }
  .formular__raster > *:last-child { grid-column: 1 / -1; }
  .fuss__inhalt { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  body { font-size: 17px; }
  /* Auf dem Handy bleibt das Kopflogo so gross wie bisher - dort ist die
     Groesse abgenommen (Stefan Kerp, 15.08.2026: "Logogroesse gut"). */
  .kopf .wrap { min-height: 72px; }
  .kopf__logo img { width: 126px; }
  .menue-schalter { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    background: #fff; border-bottom: 1px solid var(--grau-linie);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
  }
  .kopf { position: relative; }
  .nav.offen { display: block; }
  .nav > ul { flex-direction: column; }
  .nav > ul > li + li { border-left: 0; border-top: 1px solid var(--grau-linie); }
  .nav a, .nav .aufklapp__knopf { padding: 14px var(--rand); width: 100%; text-align: left; }
  .aufklapp__liste {
    position: static; display: block; border: 0; box-shadow: none;
    min-width: 0; padding: 0; background: var(--grau);
  }
  .aufklapp__liste a { padding-left: calc(var(--rand) + 18px); }
  /* Schmaler Ausschnitt: das Bild wird hoeher, das Logo darf mitwachsen.
     52 % statt 40 %, sonst geht das Firmenlogo im Hauptbild unter
     (Stefan Kerp, 15.08.2026). */
  .buehne > picture img { aspect-ratio: 16 / 9; }
  .buehne__logo img { width: min(52%, 340px); }
  .karten, .raster--3 { grid-template-columns: 1fr; }
  /* Einspaltig ist die Kachel so breit wie der Inhalt - das seitliche
     Ausruecken des mittleren Logos ergibt dann keinen Sinn mehr. */
  .karte__marke--versetzt { padding-left: 0; }
  .intro__spalten, .kontaktblock__spalten { grid-template-columns: 1fr; }
  .formular__raster { grid-template-columns: 1fr; }
  .formular__raster > *:last-child { grid-column: auto; }
  .fuss__band { grid-template-columns: 1fr; }
  .fuss__marke { justify-content: flex-start; padding: 18px var(--rand); }
  .fuss__inhalt { grid-template-columns: 1fr; padding: 22px var(--rand); }
}

@media (max-width: 560px) {
  .raster--4 { grid-template-columns: 1fr; }
  .buehne > picture img { aspect-ratio: 4 / 3; }
  /* Einspaltig steht die Beschriftung ueber der ganzen Bildbreite - dann
     wirkt der linksbuendige Sonderfall aus dem Screendesign wie ein Versehen.
     Auf dem Handy deshalb mittelachsig (Stefan Kerp, 15.08.2026). */
  .raster__titel--links {
    justify-content: center; text-align: center; padding: 0 8%;
  }
}

@media print {
  .kopf, .nav, .formular, .menue-schalter { display: none; }
  body { font-size: 12pt; }
}