@charset "UTF-8";
/* =====================================================================
   witten-makler.de — Design-System
   Christian Gottschling · GOTTSCHLING Immobilien GmbH
   Eine Datei. Keine Abhängigkeiten. Kein externer Font-Server.

   Reihenfolge
   00  Schrift
   01  Merkmale (Tokens) — helles Thema
   02  Dunkles Thema
   03  Zurücksetzen und Basis
   04  Typografische Rollen
   05  Layout-Primitive
   06  Fokus, Tastatur, Hilfsklassen
   07  Bausteine
   08  Bewegung
   09  Druck

   Alle Kontrastwerte in den Kommentaren sind gerechnet (WCAG 2.1
   Relativluminanz). Ziel: 4,5:1 für Text, 3:1 für Steuerelement-Ränder,
   Fokusringe und große Schrift.
   ===================================================================== */


/* =====================================================================
   00  SCHRIFT
   Eine einzige Datei, 14,9 KB, variabel 400–700, auf Deutsch
   verkleinert (Latin + Umlaute + Typo-Satzzeichen + Ziffern).
   Selbst gehostet. Kein Google, kein CDN, kein Tracking.
   Die Fallback-Deklaration trägt Geists Metriken, damit der Tausch
   beim Nachladen keinen Zeilenumbruch verschiebt (kein Layout-Sprung).
   ===================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-de-var.woff2") format("woff2-variations"),
       url("../fonts/geist-de-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrik-gleicher Platzhalter: verhindert Reflow während des Ladens. */
@font-face {
  font-family: "Geist Ersatz";
  src: local("SF Pro Display"), local("SFProDisplay-Regular"),
       local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");
  ascent-override: 92%;      /* Geist hhea.ascent 920 / upm 1000 */
  descent-override: 22%;     /* Geist hhea.descent 220 / upm 1000 */
  line-gap-override: 10%;    /* Geist hhea.lineGap 100 / upm 1000 */
  size-adjust: 100%;         /* x-Höhe Geist 0,530 em ≈ SF 0,535 / Segoe 0,534 / Roboto 0,528 */
}


/* =====================================================================
   01  MERKMALE — helles Thema
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Flächen ------------------------------------------------------ */
  --wm-grund:            #ffffff;  /* Seite                                          */
  --wm-flaeche:          #f5f7f9;  /* ruhiges Band, Fußzeile                         */
  --wm-flaeche-2:        #eceff2;  /* Tabellenkopf, gedrückter Zustand               */
  --wm-linie:            #dfe4e8;  /* Haarlinie, dekorativ  — 1,28:1 auf Grund       */
  --wm-linie-kraeftig:   #7e8890;  /* Rand von Steuerelementen — 3,61:1 auf Grund    */

  /* ---- Schrift ------------------------------------------------------ */
  --wm-tinte:            #15232e;  /* 16,01:1 auf Grund · 13,87:1 auf Fläche-2       */
  --wm-tinte-2:          #4f5961;  /*  7,16:1 auf Grund ·  6,20:1 auf Fläche-2       */
  --wm-tinte-3:          #636d75;  /*  5,28:1 auf Grund ·  4,58:1 auf Fläche-2       */

  /* ---- Marke: Blau -------------------------------------------------- */
  --wm-blau:             #014880;  /* Bildmarke, Verweise. 9,38:1 auf Grund          */
  --wm-blau-tief:        #01304f;  /* Hover, Dunkelband. Weiß darauf 13,66:1         */
  --wm-blau-weich:       #e8eef4;  /* ruhige Blaufläche                              */
  /* Der blaue Knopf hat eigene Merkmale. --wm-blau ist im dunklen Thema
     eine helle Schriftfarbe; als Füllung mit weißer Schrift wäre das
     2,27:1. Deshalb getrennt geführt. */
  --wm-blau-fuell:       #014880;  /* Füllung                                        */
  --wm-blau-fuell-auf:   #ffffff;  /* Beschriftung darauf — 9,38:1                   */
  --wm-blau-fuell-hover: #01304f;  /* Hover — Beschriftung darauf 13,66:1            */

  /* ---- Marke: Signal ------------------------------------------------ */
  /* Das Korallenrot bleibt exakt erhalten. Geändert wird nur die
     Beschriftung: dunkel statt weiß. 2,98:1 → 5,93:1.                   */
  --wm-signal:           #f26c51;  /* Füllung der Handlungsaufforderung              */
  --wm-signal-auf:       #2b1109;  /* Beschriftung darauf — 5,93:1                   */
  --wm-signal-rand:      #e2543a;  /* 1px-Kante, 3,77:1 auf Grund (WCAG 1.4.11)      */
                                   /* zugleich Hover-Füllung, Label darauf 4,69:1    */
  --wm-signal-text:      #b83417;  /* Koralle als Schrift auf hell — 5,93:1          */
  --wm-signal-weich:     #fdf0ec;  /* Tinte darauf 14,37:1, Signaltext 5,32:1        */

  /* ---- Status ------------------------------------------------------- */
  --wm-gruen:            #146c43;  /* 6,45:1 auf Grund                               */
  --wm-hinweis:          #7a5000;  /* 7,06:1 auf Grund                               */
  --wm-fokus:            #0a5c9e;  /* 6,91:1 auf Grund · 6,44:1 auf Fläche           */

  /* ---- Schriftfamilien ---------------------------------------------- */
  --wm-schrift-display:
      "Geist", "Geist Ersatz", -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --wm-schrift-text:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", sans-serif;

  /* ---- Schriftgrade (fluide, mobil zuerst) --------------------------
     Werte bei 390 px / 768 px / 1280 px Viewport                        */
  --wm-t-display: clamp(2.25rem, 1.575rem + 2.95vw, 4rem);   /* 37 / 48 / 64 px */
  --wm-t-h1:      clamp(2rem,   1.575rem + 1.85vw, 3rem);    /* 33 / 40 / 48 px */
  --wm-t-h2:      clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem); /* 27 / 33 / 36 px */
  --wm-t-h3:      clamp(1.25rem, 1.15rem + 0.42vw, 1.5rem);  /* 21 / 24 / 24 px */
  --wm-t-lede:    clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);/*19 / 22 / 22 px */
  --wm-t-body:    1.0625rem;   /* 17 px — Apples Lesegröße, über dem 16-px-Boden  */
  --wm-t-klein:   0.9375rem;   /* 15 px */
  --wm-t-meta:    0.8125rem;   /* 13 px */
  --wm-t-zahl:    clamp(2rem, 1.6rem + 1.75vw, 3rem);

  /* ---- Zeilenhöhen: eng bei groß, offen bei klein ------------------- */
  --wm-zh-display: 1.04;
  --wm-zh-h2:      1.12;
  --wm-zh-h3:      1.25;
  --wm-zh-lede:    1.38;
  --wm-zh-body:    1.6;
  --wm-zh-eng:     1.45;

  /* ---- Laufweiten: negativ bei groß, leicht positiv bei winzig ------ */
  --wm-lw-display: -0.035em;   /* Boden ist -0.04em, nie darunter        */
  --wm-lw-h2:      -0.028em;
  --wm-lw-h3:      -0.02em;
  --wm-lw-lede:    -0.016em;
  --wm-lw-body:    -0.011em;
  --wm-lw-meta:     0.005em;
  --wm-lw-versal:   0.06em;

  /* ---- Gewichte ----------------------------------------------------- */
  --wm-g-normal: 400;
  --wm-g-mittel: 500;
  --wm-g-halb:   600;
  --wm-g-fett:   700;

  /* ---- Raum: 4-px-Basis --------------------------------------------- */
  --wm-r-1:  0.25rem;   /*  4 */
  --wm-r-2:  0.5rem;    /*  8 */
  --wm-r-3:  0.75rem;   /* 12 */
  --wm-r-4:  1rem;      /* 16 */
  --wm-r-5:  1.5rem;    /* 24 */
  --wm-r-6:  2rem;      /* 32 */
  --wm-r-7:  3rem;      /* 48 */
  --wm-r-8:  4rem;      /* 64 */
  --wm-r-9:  6rem;      /* 96 */
  --wm-takt: clamp(3.5rem, 8vw, 6.5rem);   /* Abstand zwischen Abschnitten */
  --wm-takt-eng: clamp(2.25rem, 5vw, 4rem);
  --wm-saum: clamp(1.25rem, 5vw, 2.5rem);  /* seitlicher Rand, min. 20 px  */

  /* ---- Maße --------------------------------------------------------- */
  --wm-bahn:        72rem;   /* 1152 px Inhaltsbreite   */
  --wm-bahn-schmal: 44rem;   /*  704 px                 */
  --wm-mass-text:   66ch;    /* Lesemaß, 45–75 Zeichen  */

  /* ---- Radien: außen weicher, innen enger --------------------------- */
  --wm-rad-1:  6px;    /* Marken, kleine Felder            */
  --wm-rad-2: 10px;    /* Eingabefelder, Tabellenkanten    */
  --wm-rad-3: 14px;    /* Karten, Bildrahmen               */
  --wm-rad-4: 18px;    /* Schwebende Flächen               */
  --wm-rad-pille: 980px;

  /* ---- Schatten: Versatz + weiche Streuung, in den kühlen Farbton
     getönt. Genau eine schwebende Ebene auf der Seite.  --------------- */
  --wm-schatten:
      0 1px 2px rgba(21, 35, 46, 0.06),
      0 16px 36px -14px rgba(21, 35, 46, 0.22);
  --wm-schatten-ueber:
      0 2px 6px rgba(21, 35, 46, 0.08),
      0 28px 60px -18px rgba(21, 35, 46, 0.30);

  /* ---- Bewegung ------------------------------------------------------ */
  --wm-kurve-aus:   cubic-bezier(0.23, 1, 0.32, 1);      /* Eintritt, Austritt */
  --wm-kurve-durch: cubic-bezier(0.77, 0, 0.175, 1);     /* Bewegung im Bild   */
  --wm-kurve-schub: cubic-bezier(0.32, 0.72, 0, 1);      /* Blatt, Schublade   */
  --wm-zeit-druck:  120ms;
  --wm-zeit-klein:  180ms;
  --wm-zeit-mittel: 240ms;
  --wm-zeit-blatt:  280ms;
  --wm-zeit-blatt-zu: 200ms;   /* Austritt schneller als Eintritt */
  --wm-zeit-moment: 420ms;     /* der eine gestaltete Moment      */

  /* ---- Ebenen -------------------------------------------------------- */
  --wm-z-basis:     0;
  --wm-z-klebend: 100;
  --wm-z-leiste:  200;
  --wm-z-blatt:   300;
  --wm-z-dialog:  400;

  /* ---- Umbruchpunkte (Dokumentation; CSS braucht feste Werte) -------
     s   480px   zweispaltige Kennzahlen, Stadtteile
     m   768px   zweispaltige Raster, Tabelle ohne Scroll
     l  1024px   geteilter Kopfbereich, Desktop-Navigation, Leiste weg
     xl 1280px   volle Bahnbreite                                        */
}


/* =====================================================================
   02  DUNKLES THEMA
   Begründung steht im Bericht: 75 % mobil, Abendnutzung, iOS schaltet
   automatisch. Die Umschaltung kostet rund 1,4 KB.
   Zwei Sonderfälle sind bewusst gelöst:
   · Siegel behalten ein helles Passepartout (PNG mit weißem Grund)
   · Porträts behalten ihren hellen Rahmen und lesen sich als
     beleuchtetes Bild an dunkler Wand
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --wm-grund:          #0c151c;
    --wm-flaeche:        #131f28;
    --wm-flaeche-2:      #1a2833;
    --wm-linie:          #26343f;
    --wm-linie-kraeftig: #637887;   /* 4,01:1 auf Grund                 */

    --wm-tinte:          #eef2f5;   /* 16,37:1                          */
    --wm-tinte-2:        #a7b4bf;   /*  8,71:1                          */
    --wm-tinte-3:        #8d9ba7;   /*  6,47:1 · 5,29:1 auf Fläche-2    */

    --wm-blau:           #6fb2ea;   /*  8,10:1 — Blau als Schrift       */
    --wm-blau-tief:      #8ecbff;
    --wm-blau-weich:     #10222f;
    /* Umgekehrt wie im hellen Thema: helle Füllung, dunkle Schrift */
    --wm-blau-fuell:       #8ecbff; /* Form gegen Seite 10,65:1         */
    --wm-blau-fuell-auf:   #04243b; /* Beschriftung darauf  9,19:1      */
    --wm-blau-fuell-hover: #b4dcff; /* Beschriftung darauf 11,07:1      */

    --wm-signal:         #f26c51;   /* unverändert, 6,18:1 als Fläche   */
    --wm-signal-auf:     #2b1109;   /* unverändert, 5,93:1              */
    --wm-signal-rand:    #ff8468;   /* Hover, Label darauf 7,37:1       */
    --wm-signal-text:    #ff9c85;   /*  9,08:1                          */
    --wm-signal-weich:   #2a1712;

    --wm-gruen:          #4cc38a;   /*  8,32:1                          */
    --wm-hinweis:        #e0b062;
    --wm-fokus:          #8ecbff;   /* 10,65:1                          */

    --wm-schatten:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 16px 36px -14px rgba(0, 0, 0, 0.7);
    --wm-schatten-ueber:
        0 2px 6px rgba(0, 0, 0, 0.55),
        0 28px 60px -18px rgba(0, 0, 0, 0.75);
  }
}

:root[data-thema="dunkel"] {
  --wm-grund:          #0c151c;
  --wm-flaeche:        #131f28;
  --wm-flaeche-2:      #1a2833;
  --wm-linie:          #26343f;
  --wm-linie-kraeftig: #637887;
  --wm-tinte:          #eef2f5;
  --wm-tinte-2:        #a7b4bf;
  --wm-tinte-3:        #8d9ba7;
  --wm-blau:           #6fb2ea;
  --wm-blau-tief:      #8ecbff;
  --wm-blau-weich:     #10222f;
  --wm-blau-fuell:       #8ecbff;
  --wm-blau-fuell-auf:   #04243b;
  --wm-blau-fuell-hover: #b4dcff;
  --wm-signal:         #f26c51;
  --wm-signal-auf:     #2b1109;
  --wm-signal-rand:    #ff8468;
  --wm-signal-text:    #ff9c85;
  --wm-signal-weich:   #2a1712;
  --wm-gruen:          #4cc38a;
  --wm-hinweis:        #e0b062;
  --wm-fokus:          #8ecbff;
  --wm-schatten:
      0 1px 2px rgba(0, 0, 0, 0.5),
      0 16px 36px -14px rgba(0, 0, 0, 0.7);
  --wm-schatten-ueber:
      0 2px 6px rgba(0, 0, 0, 0.55),
      0 28px 60px -18px rgba(0, 0, 0, 0.75);
}

/* Markendunkles Band innerhalb einer hellen Seite.
   Keine Farbinsel: es ist dasselbe Blau wie die Bildmarke, nur tief. */
.wm-auf-dunkel {
  --wm-grund:          #01304f;
  --wm-flaeche:        #012a45;
  --wm-flaeche-2:      #01253c;
  --wm-linie:          rgba(255, 255, 255, 0.16);
  --wm-linie-kraeftig:  rgba(255, 255, 255, 0.55);
  --wm-tinte:          #ffffff;   /* 13,66:1 */
  --wm-tinte-2:        #c6d6e4;   /*  9,20:1 */
  --wm-tinte-3:        #a9c0d4;   /*  7,27:1 */
  --wm-blau:           #9fcbf0;
  --wm-blau-tief:      #c8e2fa;
  --wm-blau-weich:     rgba(255, 255, 255, 0.08);
  --wm-blau-fuell:       #ffffff; /* Form gegen Band 13,66:1          */
  --wm-blau-fuell-auf:   #01304f; /* Beschriftung darauf 13,66:1      */
  --wm-blau-fuell-hover: #e8eef4; /* Beschriftung darauf 11,69:1      */
  --wm-signal-text:    #ffb09c;
  --wm-fokus:          #8ecbff;   /*  7,90:1 */
  background: var(--wm-grund);
  color: var(--wm-tinte);
}


/* =====================================================================
   03  ZURÜCKSETZEN UND BASIS
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;   /* Nutzereinstellung bleibt wirksam */
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;         /* klebender Kopf verdeckt kein Ziel */
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--wm-grund);
  color: var(--wm-tinte);
  font-family: var(--wm-schrift-text);
  font-size: var(--wm-t-body);
  font-weight: var(--wm-g-normal);
  line-height: var(--wm-zh-body);
  letter-spacing: var(--wm-lw-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, picture { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }

/* Die Flächen, die der Browser stellt, gehören auch zum Entwurf. */
::selection { background: var(--wm-blau); color: #ffffff; }
:root[data-thema="dunkel"] ::selection,
.wm-auf-dunkel ::selection { background: var(--wm-blau); color: #01304f; }

:root { accent-color: var(--wm-blau); caret-color: var(--wm-blau); }

@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--wm-linie-kraeftig) transparent; scrollbar-width: thin; }
}


/* =====================================================================
   04  TYPOGRAFISCHE ROLLEN
   Sechs Rollen. Jede erkennbar, ohne den Text zu lesen.
   Display und Überschriften tragen Geist, der Fließtext die
   Systemschrift: die kennt das Gerät optisch besser als jede
   Webschrift und kostet null Byte.
   ===================================================================== */

.wm-display, h1 {
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-display);
  font-weight: var(--wm-g-halb);
  line-height: var(--wm-zh-display);
  letter-spacing: var(--wm-lw-display);
  text-wrap: balance;
}

h2, .wm-h2 {
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-h2);
  font-weight: var(--wm-g-halb);
  line-height: var(--wm-zh-h2);
  letter-spacing: var(--wm-lw-h2);
  text-wrap: balance;
}

h3, .wm-h3 {
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-h3);
  font-weight: var(--wm-g-halb);
  line-height: var(--wm-zh-h3);
  letter-spacing: var(--wm-lw-h3);
  text-wrap: balance;
}

h4, .wm-h4 {
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-body);
  font-weight: var(--wm-g-halb);
  line-height: var(--wm-zh-eng);
  letter-spacing: var(--wm-lw-h3);
}

.wm-lede {
  font-size: var(--wm-t-lede);
  line-height: var(--wm-zh-lede);
  letter-spacing: var(--wm-lw-lede);
  color: var(--wm-tinte-2);
  max-width: 40ch;
  text-wrap: pretty;
}

p, li { text-wrap: pretty; }

.wm-klein  { font-size: var(--wm-t-klein); line-height: var(--wm-zh-eng); }
.wm-meta   {
  font-size: var(--wm-t-meta);
  line-height: 1.5;
  letter-spacing: var(--wm-lw-meta);
  color: var(--wm-tinte-3);
}
.wm-versal {
  font-size: var(--wm-t-meta);
  font-weight: var(--wm-g-halb);
  letter-spacing: var(--wm-lw-versal);
  text-transform: uppercase;
  color: var(--wm-tinte-3);
}

/* Zahlen sind das Material dieser Marke: amtliche Werte, immer
   tabellarisch, damit Spalten untereinander stehen. */
.wm-zahl, td.wm-num, th.wm-num, .wm-kennzahl__wert, time, .wm-preis {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Fließtext-Block */
.wm-text { max-width: var(--wm-mass-text); }
.wm-text > * + * { margin-top: var(--wm-r-4); }
.wm-text > * + h2 { margin-top: var(--wm-r-8); }   /* über der Überschrift
                                                      mehr Luft als darunter */
.wm-text > * + h3 { margin-top: var(--wm-r-6); }
.wm-text h2 + *, .wm-text h3 + * { margin-top: var(--wm-r-3); }
.wm-text ul, .wm-text ol { padding-left: 1.2em; display: grid; gap: var(--wm-r-2); }
.wm-text li::marker { color: var(--wm-tinte-3); }
.wm-text strong { font-weight: var(--wm-g-halb); }

/* Verweise im Fließtext: Unterstreichung sitzt unter der Grundlinie,
   nicht in ihr.

   :where(a:not(.wm-knopf)) statt schlicht "a": ein Knopf, der im
   Fließtext steht, ist kein Verweis. Vorher gewann diese Regel (0-1-1)
   gegen .wm-knopf--signal und .wm-knopf--blau (beide 0-1-0) und malte
   die Beschriftung blau und unterstrichen — der blaue Zweitknopf stand
   bei 1,00:1, die Telefonnummer war unsichtbar. :where() hält die
   Auswahlschärfe bei 0-1-0, damit sich sonst nichts verschiebt.
   Gemessen 2026-09-20. */
.wm-text :where(a:not(.wm-knopf)), .wm-link {
  color: var(--wm-blau);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--wm-zeit-klein) ease;
}
@media (hover: hover) and (pointer: fine) {
  .wm-text :where(a:not(.wm-knopf)):hover, .wm-link:hover { text-decoration-color: currentColor; }
}

/* Fließtext-Rhythmus auch dort, wo die Absätze nicht direkte Kinder von
   .wm-text sind. Blockinhalte kapseln sie in .entry-content, <article>
   und <section>; ".wm-text > * + *" greift dann nicht mehr, und auf den
   Stadtteil- und Marktdatenseiten standen 24 von 26 bzw. 27 von 28
   Absatzpaaren ohne jeden Abstand. Dieselben Werte, nur ohne den
   Kind-Kombinator. Auswahlschärfe 0-1-0, damit jede Komponentenregel
   (.wm-notiz p, .wm-karte p …) weiterhin gewinnt. */
.wm-text      :where(p, ul, ol, dl, blockquote, figure, table, details, pre, hr)
            + :where(p, ul, ol, dl, blockquote, figure, table, details, pre),
.entry-content :where(p, ul, ol, dl, blockquote, figure, table, details, pre, hr)
            + :where(p, ul, ol, dl, blockquote, figure, table, details, pre) {
  margin-top: var(--wm-r-4);
}
.wm-text       :where(p, ul, ol, dl, blockquote, figure, table, details, pre) + :where(h2),
.entry-content :where(p, ul, ol, dl, blockquote, figure, table, details, pre) + :where(h2) {
  margin-top: var(--wm-r-8);
}
.wm-text       :where(p, ul, ol, dl, blockquote, figure, table, details, pre) + :where(h3),
.entry-content :where(p, ul, ol, dl, blockquote, figure, table, details, pre) + :where(h3) {
  margin-top: var(--wm-r-6);
}


/* =====================================================================
   05  LAYOUT-PRIMITIVE
   Raster statt Flex-Prozentrechnen. Mobil zuerst.
   ===================================================================== */

.wm-bahn {
  width: 100%;
  max-width: var(--wm-bahn);
  margin-inline: auto;
  padding-inline: var(--wm-saum);
}
.wm-bahn--schmal { max-width: var(--wm-bahn-schmal); }

.wm-abschnitt        { padding-block: var(--wm-takt); }
.wm-abschnitt--eng   { padding-block: var(--wm-takt-eng); }
.wm-abschnitt--flaeche { background: var(--wm-flaeche); }

/* Optisch: unten etwas mehr Luft als oben, sonst kippt der Block nach unten. */
.wm-abschnitt        { padding-bottom: calc(var(--wm-takt) * 1.12); }
.wm-abschnitt--eng   { padding-bottom: calc(var(--wm-takt-eng) * 1.12); }

.wm-raster { display: grid; gap: var(--wm-r-5); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .wm-raster--2 { grid-template-columns: repeat(2, 1fr); }
  .wm-raster--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .wm-raster--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 480px) and (max-width: 1023.98px) {
  .wm-raster--4 { grid-template-columns: repeat(2, 1fr); }
}

.wm-stapel > * + * { margin-top: var(--wm-r-4); }
.wm-stapel--weit > * + * { margin-top: var(--wm-r-6); }

.wm-kopfzeile { max-width: 52ch; margin-bottom: var(--wm-r-7); }
.wm-kopfzeile > * + * { margin-top: var(--wm-r-3); }


/* =====================================================================
   06  FOKUS, TASTATUR, HILFSKLASSEN
   ===================================================================== */

/* Ein Ring, überall gleich. Der 2-px-Versatz sorgt dafür, dass der Ring
   immer gegen den Seitengrund steht, nie gegen die Füllung des Elements.
   Deshalb genügt ein Farbwert je Thema:
   hell   #0a5c9e gegen Weiß 6,91:1 · gegen Fläche 6,44:1
   dunkel #8ecbff gegen #0c151c 10,65:1 · gegen #01304f 7,90:1        */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wm-fokus);
  outline-offset: 2px;
  border-radius: var(--wm-rad-1);
}
:where(a, button, summary):focus:not(:focus-visible) { outline: none; }

.wm-skip {
  position: absolute;
  left: var(--wm-r-4);
  top: var(--wm-r-2);
  z-index: var(--wm-z-dialog);
  transform: translateY(-200%);
  background: var(--wm-grund);
  color: var(--wm-tinte);
  border: 1px solid var(--wm-linie-kraeftig);
  border-radius: var(--wm-rad-2);
  padding: var(--wm-r-3) var(--wm-r-4);
  font-size: var(--wm-t-klein);
  font-weight: var(--wm-g-halb);
  text-decoration: none;
  transition: transform var(--wm-zeit-klein) var(--wm-kurve-aus);
}
.wm-skip:focus { transform: translateY(0); }

.wm-nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Symbole: ein gezeichneter Satz, eine Strichstärke. Nie Emoji. */
.wm-icon {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.wm-icon--gross { width: 1.75rem; height: 1.75rem; }


/* =====================================================================
   07  BAUSTEINE
   ===================================================================== */

/* --- 7.1  Kopf und Navigation -------------------------------------- */

.wm-kopf {
  position: sticky;
  top: 0;
  z-index: var(--wm-z-klebend);
  /* Mit viewport-fit=cover reicht die Seite unter die Kerbe. Der Kopf
     hält sich davon frei; ohne Kerbe ist das Inset 0 und nichts ändert
     sich. */
  padding-block-start: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--wm-grund) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--wm-linie);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wm-kopf { background: var(--wm-grund); }
}
@media (prefers-reduced-transparency: reduce) {
  .wm-kopf { background: var(--wm-grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.wm-kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wm-r-4);
  min-height: 60px;
}

.wm-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-r-3);
  text-decoration: none;
  color: var(--wm-tinte);
  font-family: var(--wm-schrift-display);
  font-weight: var(--wm-g-halb);
  font-size: var(--wm-t-klein);
  letter-spacing: -0.018em;
  line-height: 1.15;
  min-height: 44px;   /* Zielgröße: gemessen waren 200 × 32 px */
}
.wm-marke__zeichen {
  width: 32px; height: 32px;
  border-radius: var(--wm-rad-1);
  /* Füllung und Beschriftung als Paar, damit beide zusammen umschalten.
     Vorher stand hier ein festes #ffffff: im dunklen Thema hellt sich die
     Fläche auf #8ecbff auf, das weiße G stand dann bei 2,27:1.
     Jetzt: hell #ffffff auf #014880 = 9,38:1, dunkel #04243b auf #8ecbff
     = 9,19:1. Gemessen 2026-09-20. */
  background: var(--wm-blau-fuell);
  color: var(--wm-blau-fuell-auf);
  display: grid;
  place-items: center;
  font-family: var(--wm-schrift-display);
  font-weight: var(--wm-g-halb);
  font-size: 1.125rem;
  letter-spacing: 0;
  flex: none;
}
/* Unter 640 px trägt die Marke nur den Namen — eine Zeile, kein Umbruch. */
.wm-marke__ort { display: none; color: var(--wm-tinte-3); font-weight: var(--wm-g-normal); }
.wm-marke > span:not(.wm-marke__zeichen) { white-space: nowrap; }
@media (min-width: 640px) {
  .wm-marke__ort { display: block; }
  .wm-marke { font-size: var(--wm-t-body); }
}

/* Menüknopf: 44 px Zielgröße, mobil sichtbar */
.wm-menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-r-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--wm-r-3);
  background: none;
  border: 1px solid var(--wm-linie);
  border-radius: var(--wm-rad-pille);
  color: var(--wm-tinte);
  font-size: var(--wm-t-klein);
  font-weight: var(--wm-g-mittel);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--wm-zeit-klein) ease, border-color var(--wm-zeit-klein) ease;
}
.wm-menue-knopf:active { background: var(--wm-flaeche-2); }

/* Mobil führt genau ein Weg aus dem Kopf: der Menüknopf. Die
   Handlungsaufforderung liegt unten in der Leiste, nicht zusätzlich oben.
   Die Auswahlschärfe (0,2,0) muss .wm-knopf (0,1,0) schlagen. */
.wm-nav { display: none; }
.wm-kopf__innen .wm-kopf__aktion { display: none; }

/* Desktop ab 1024 px: Navigation offen, ein Knopf, kein Menü */
@media (min-width: 1024px) {
  .wm-nav { display: flex; align-items: center; gap: var(--wm-r-5); }
  .wm-nav a {
    color: var(--wm-tinte-2);
    text-decoration: none;
    font-size: var(--wm-t-klein);
    padding-block: var(--wm-r-2);
    transition: color var(--wm-zeit-klein) ease;
  }
  .wm-nav a:hover { color: var(--wm-tinte); }
  .wm-nav a[aria-current="page"] { color: var(--wm-tinte); font-weight: var(--wm-g-mittel); }
  .wm-kopf__innen .wm-kopf__aktion { display: inline-flex; }
  .wm-menue-knopf { display: none; }
}

/* Mobiles Blatt: kommt von oben, geht nach oben zurück (gleicher Weg).

   Rollbar. Vorher: inset:0, overflow-y:visible, 1556 px Inhalt in 844 px
   Blatt, Dokument gesperrt — vierzehn Ziele (alle Stadtteile ab Annen,
   alle Marktdatenseiten, „Über mich", der Bewertungsknopf und die
   Telefonnummer) waren auf dem Handy unerreichbar. Drei Teile:
   1fr wird zu minmax(0,1fr), sonst wächst die Zeile mit dem Inhalt;
   der Inhaltsteil bekommt den Rollbereich; 100dvh statt der
   Momentaufnahme des Ausgangs-Viewports, damit die eingeblendete
   Browserleiste den letzten Eintrag nicht verdeckt.
   Gemessen 2026-09-20. */
.wm-blatt {
  position: fixed;
  inset: 0;
  block-size: 100vh;            /* Rückfall für Browser ohne dvh */
  block-size: 100dvh;
  z-index: var(--wm-z-blatt);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--wm-grund);
  overscroll-behavior: contain;
}
.wm-blatt[hidden] { display: none; }
.wm-blatt__rolle,
.wm-blatt > .wm-bahn:not(.wm-blatt__kopf) {
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-block-end: calc(var(--wm-r-6) + env(safe-area-inset-bottom));
}
.wm-blatt__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wm-r-4);
  min-height: 60px;
  padding-block-start: env(safe-area-inset-top);
  border-bottom: 1px solid var(--wm-linie);
}
.wm-blatt__liste {
  list-style: none;
  padding: var(--wm-r-5) 0 var(--wm-r-8);
  display: grid;
  align-content: start;
}
.wm-blatt__liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wm-r-4);
  min-height: 56px;              /* großzügiges Tippziel */
  padding-block: var(--wm-r-2);
  font-family: var(--wm-schrift-display);
  font-size: 1.375rem;
  font-weight: var(--wm-g-halb);
  letter-spacing: -0.02em;
  color: var(--wm-tinte);
  text-decoration: none;
  border-bottom: 1px solid var(--wm-linie);
}
.wm-blatt__liste a[aria-current="page"] { color: var(--wm-signal-text); }
.wm-blatt__fuss { padding-block: var(--wm-r-5) var(--wm-r-8); }


/* --- 7.2  Handlungsaufforderungen (Buttons) -------------------------
   Der Kern der Korrektur. Die Füllung bleibt #f26c51, die Beschriftung
   wird dunkel: 2,98:1 → 5,93:1. Die 1-px-Kante in #e2543a gibt der
   Form 3,77:1 gegen Weiß (WCAG 1.4.11), ohne eine zweite Ebene
   aufzumachen — sie liegt als inset-Schatten innen, nicht als Rahmen.
   ------------------------------------------------------------------- */

.wm-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wm-r-2);
  min-height: 48px;
  padding: var(--wm-r-3) var(--wm-r-6);
  border: 0;
  border-radius: var(--wm-rad-pille);
  font-family: var(--wm-schrift-text);
  font-size: var(--wm-t-body);
  font-weight: var(--wm-g-halb);
  letter-spacing: -0.012em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
      background-color var(--wm-zeit-klein) ease,
      color var(--wm-zeit-klein) ease,
      box-shadow var(--wm-zeit-klein) ease,
      transform var(--wm-zeit-druck) var(--wm-kurve-aus);
}
.wm-knopf:active { transform: scale(0.97); }   /* Rückmeldung beim Drücken */
.wm-knopf[aria-disabled="true"], .wm-knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Primär — die eine Handlung, die die Seite will */
.wm-knopf--signal {
  background: var(--wm-signal);
  color: var(--wm-signal-auf);                 /* 5,93:1 */
  box-shadow: inset 0 0 0 1px var(--wm-signal-rand);
}
@media (hover: hover) and (pointer: fine) {
  .wm-knopf--signal:hover {
    background: var(--wm-signal-rand);         /* Label darauf 4,69:1 */
    box-shadow: inset 0 0 0 1px var(--wm-signal-rand);
  }
}

/* Sekundär — Markenblau. Im dunklen Thema kippt das Paar (helle Füllung,
   dunkle Schrift), damit der Kontrast in beiden Themen über 4,5:1 bleibt. */
.wm-knopf--blau { background: var(--wm-blau-fuell); color: var(--wm-blau-fuell-auf); }
@media (hover: hover) and (pointer: fine) {
  .wm-knopf--blau:hover { background: var(--wm-blau-fuell-hover); }
}

/* Tertiär — reine Kontur, für Nebenwege */
.wm-knopf--kontur {
  background: transparent;
  color: var(--wm-tinte);
  box-shadow: inset 0 0 0 1px var(--wm-linie-kraeftig);        /* 3,61:1 */
}
@media (hover: hover) and (pointer: fine) {
  .wm-knopf--kontur:hover { background: var(--wm-flaeche-2); }
}

.wm-knopf--breit { width: 100%; }
.wm-knopf--klein { min-height: 44px; padding-inline: var(--wm-r-5); font-size: var(--wm-t-klein); }

.wm-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--wm-r-3); }
@media (max-width: 479.98px) {
  .wm-knopfreihe > .wm-knopf { flex: 1 1 100%; }
}

/* Textlink mit Pfeil — der Pfeil rückt, nicht der Text */
.wm-weiter {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-r-2);
  color: var(--wm-blau);
  font-weight: var(--wm-g-mittel);
  text-decoration: none;
  min-height: 44px;
}
.wm-weiter .wm-icon {
  transition: transform var(--wm-zeit-klein) var(--wm-kurve-aus);
}
@media (hover: hover) and (pointer: fine) {
  .wm-weiter:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .wm-weiter:hover .wm-icon { transform: translateX(3px); }
}


/* --- 7.3  Kopfbereich mit Porträt ---------------------------------- */

.wm-hero { padding-block: var(--wm-takt-eng) var(--wm-takt); }
.wm-hero__gitter {
  display: grid;
  gap: var(--wm-r-6);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .wm-hero__gitter { grid-template-columns: 1.08fr 0.92fr; gap: var(--wm-r-8); }
  .wm-hero { padding-block: var(--wm-r-8) var(--wm-takt); }
}
.wm-hero__text > * + * { margin-top: var(--wm-r-5); }

/* Wechselsatz: jeder zweite Block spiegelt sich am Desktop. In der
   Lesereihenfolge steht der Text immer zuerst — auf dem Handy also
   auch sichtbar zuerst. */
@media (min-width: 1024px) {
  .wm-wechsel > .wm-hero__text { order: 2; }
  .wm-wechsel > figure          { order: 1; }
}
.wm-hero h1 { max-width: 15ch; }
.wm-hero .wm-lede { max-width: 38ch; }

/* Bildrahmen: eine Ebene, ein Schatten, kein zusätzlicher Rahmen. */
.wm-portraet {
  position: relative;
  border-radius: var(--wm-rad-4);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--wm-flaeche-2);
  box-shadow: var(--wm-schatten);
}
/* Im Tablet-Band steht das Bild noch unter dem Text. Ungedeckelt füllt
   es dort 768 px Breite und erschlägt die Aussage darüber. */
@media (min-width: 620px) and (max-width: 1023.98px) {
  .wm-hero .wm-portraet { max-width: 24rem; margin-inline: auto; }
}
@media (min-width: 1024px) { .wm-portraet { aspect-ratio: 3 / 4; } }
/* Nachfahre, nicht Kindelement: zwischen Rahmen und Bild steht ein
   <picture> für die WebP-Auswahl. */
.wm-portraet picture { display: contents; }
.wm-person__bild picture,
.wm-autor__bild picture { display: contents; }
.wm-portraet img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

/* Zweite Stufe: das begleitende Bild im Wechselsatz und im Dunkelband.
   Quadratisch, damit vom 3:4-Original nur unten etwas wegfällt und der
   Kopf ganz im Bild bleibt. 12 % halten die Stirn frei. */
.wm-portraet--quer { aspect-ratio: 1 / 1; }
.wm-portraet--quer img { object-position: center 12%; }

/* Plakette auf dem Bild: eigenes Material, deshalb Glas, nicht Dekor. */
.wm-portraet__plakette {
  position: absolute;
  left: var(--wm-r-3); right: var(--wm-r-3); bottom: var(--wm-r-3);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px var(--wm-r-3);
  padding: var(--wm-r-3) var(--wm-r-4);
  border-radius: var(--wm-rad-3);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  color: #15232e;                              /* 13,4:1 auf der Glasfläche */
  line-height: 1.3;
}
@media (prefers-reduced-transparency: reduce) {
  .wm-portraet__plakette { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.wm-portraet__name {
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-klein);
  font-weight: var(--wm-g-halb);
  letter-spacing: -0.018em;
  white-space: nowrap;
}
.wm-portraet__rolle  { font-size: var(--wm-t-meta); color: #4f5961; }
.wm-portraet__wert   { text-align: right; font-weight: var(--wm-g-halb); font-size: var(--wm-t-klein); white-space: nowrap; }
.wm-portraet__anzahl { text-align: right; font-size: var(--wm-t-meta); color: #4f5961; white-space: nowrap; }
@media (min-width: 480px) {
  .wm-portraet__name { font-size: var(--wm-t-body); }
  .wm-portraet__plakette { padding: var(--wm-r-3) var(--wm-r-5); }
}

/* Kleines Bild von Christian auf jeder Unterseite */
.wm-person {
  display: grid;
  gap: var(--wm-r-5);
  align-items: center;
  grid-template-columns: 1fr;
  padding: var(--wm-r-5);
  border: 1px solid var(--wm-linie);
  border-radius: var(--wm-rad-3);
  background: var(--wm-grund);
}
@media (min-width: 640px) {
  .wm-person { grid-template-columns: 128px 1fr; gap: var(--wm-r-6); padding: var(--wm-r-6); }
}
.wm-person__bild {
  width: 128px;
  aspect-ratio: 3 / 4;
  border-radius: var(--wm-rad-2);
  overflow: hidden;
  background: var(--wm-flaeche-2);
}
.wm-person__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 14%; }
.wm-person__text > * + * { margin-top: var(--wm-r-3); }
.wm-person__text p { color: var(--wm-tinte-2); max-width: 52ch; }


/* --- 7.4  Bewertungs-Widget mit Zwei-Klick-Regelung -----------------
   Die einzige schwebende Fläche der Seite. Vor der Zustimmung lädt
   nichts von fremden Servern; erst der zweite Klick holt das Werkzeug.
   ------------------------------------------------------------------- */

.wm-werkzeug {
  position: relative;
  background: var(--wm-grund);
  border-radius: var(--wm-rad-4);
  box-shadow: var(--wm-schatten);
  overflow: hidden;
}
.wm-werkzeug__tor {
  display: grid;
  gap: var(--wm-r-4);
  justify-items: center;
  text-align: center;
  padding: clamp(1.75rem, 6vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem);
}
.wm-werkzeug__tor h3 { font-size: var(--wm-t-h2); max-width: 20ch; }
.wm-werkzeug__tor p { color: var(--wm-tinte-2); max-width: 50ch; }
.wm-werkzeug__tor .wm-knopf { margin-top: var(--wm-r-1); }
.wm-werkzeug__hinweis { color: var(--wm-tinte-3); font-size: var(--wm-t-meta); max-width: 54ch; }
.wm-werkzeug__hinweis a { color: inherit; }

.wm-werkzeug__lauf { display: none; padding: clamp(1rem, 4vw, 1.75rem); }
.wm-werkzeug[data-zustand="offen"] .wm-werkzeug__tor { display: none; }
.wm-werkzeug[data-zustand="offen"] .wm-werkzeug__lauf { display: block; }

/* Der eine gestaltete Moment: das Werkzeug materialisiert sich —
   Unschärfe und Maßstab lösen sich gemeinsam auf, wie bei einer
   Fläche, die wirklich ankommt, statt einfach einzublenden. */
.wm-werkzeug[data-zustand="offen"] .wm-werkzeug__lauf {
  animation: wm-materialisieren var(--wm-zeit-moment) var(--wm-kurve-aus) both;
}
@keyframes wm-materialisieren {
  from { opacity: 0; transform: scale(0.975); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);     filter: blur(0); }
}
/* Wer beim letzten Besuch zugestimmt hat, sieht das Werkzeug sofort.
   Dann erklärt die Bewegung nichts mehr — also läuft sie nicht. */
.wm-werkzeug[data-sofort] .wm-werkzeug__lauf { animation: none; }

.wm-werkzeug__rahmen {
  width: 100%;
  min-height: 460px;
  border: 0;
  display: block;
  background: var(--wm-flaeche);
  border-radius: var(--wm-rad-3);
}

/* Ladeplatzhalter in der Form des Werkzeugs, kein kreisender Kringel */
.wm-skelett {
  display: grid;
  gap: var(--wm-r-3);
  padding: var(--wm-r-4);
}
.wm-skelett__zeile,
.wm-skelett__feld {
  position: relative;
  overflow: hidden;
  border-radius: var(--wm-rad-1);
  background: var(--wm-flaeche-2);
}
.wm-skelett__zeile { height: 14px; }
.wm-skelett__zeile:nth-child(2) { width: 72%; }
.wm-skelett__zeile:nth-child(3) { width: 54%; }
.wm-skelett__feld { height: 48px; border-radius: var(--wm-rad-2); }
/* Der Schimmer läuft über transform, nicht über background-position:
   eine verschobene Ebene statt eines Neuzeichnens pro Bild. */
.wm-skelett__zeile::after,
.wm-skelett__feld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%, var(--wm-grund) 50%, transparent 100%);
  opacity: 0.55;
  transform: translateX(-100%);
  animation: wm-schimmer 1.4s linear infinite;
}
@keyframes wm-schimmer { to { transform: translateX(100%); } }


/* --- 7.5  Vertrauensleiste mit Kennzahlen -------------------------- */

.wm-kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wm-r-6) var(--wm-r-4);
}
@media (min-width: 900px) { .wm-kennzahlen { grid-template-columns: repeat(4, 1fr); } }
.wm-kennzahl { display: grid; gap: var(--wm-r-2); }
.wm-kennzahl__wert {
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-zahl);
  font-weight: var(--wm-g-halb);
  letter-spacing: -0.04em;
  line-height: 1;
}
.wm-kennzahl__text { font-size: var(--wm-t-klein); color: var(--wm-tinte-2); line-height: 1.4; max-width: 22ch; }
.wm-kennzahl__quelle { font-size: var(--wm-t-meta); color: var(--wm-tinte-3); }


/* --- 7.6  Siegelreihe ----------------------------------------------- */

.wm-siegel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wm-r-5) var(--wm-r-7);
  justify-content: center;
  list-style: none;
}
.wm-siegel li { display: flex; }
.wm-siegel img {
  height: 40px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--wm-zeit-mittel) ease, opacity var(--wm-zeit-mittel) ease;
}
@media (hover: hover) and (pointer: fine) {
  .wm-siegel li:hover img { filter: none; opacity: 1; }
}
/* Im dunklen Thema bekommen die hellen PNG-Siegel ein Passepartout,
   statt als weiße Klötze zu stehen. */
:root[data-thema="dunkel"] .wm-siegel li,
.wm-auf-dunkel .wm-siegel li {
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--wm-rad-2);
  padding: var(--wm-r-2) var(--wm-r-3);
}
:root[data-thema="dunkel"] .wm-siegel img,
.wm-auf-dunkel .wm-siegel img { filter: none; opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .wm-siegel li {
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--wm-rad-2);
    padding: var(--wm-r-2) var(--wm-r-3);
  }
  :root:not([data-thema="hell"]) .wm-siegel img { filter: none; opacity: 1; }
}


/* --- 7.7  Stadtteil-Kachel ------------------------------------------
   Kein Kartenstapel. Eine Liste mit Haarlinien und Zahlen, die
   untereinander stehen. Die ganze Fläche ist der Verweis.
   ------------------------------------------------------------------- */

.wm-orte { list-style: none; display: grid; gap: 0; }
@media (min-width: 640px) { .wm-orte { grid-template-columns: repeat(2, 1fr); column-gap: var(--wm-r-6); } }
@media (min-width: 1024px) { .wm-orte { grid-template-columns: repeat(3, 1fr); } }

.wm-ort {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--wm-r-1) var(--wm-r-4);
  min-height: 56px;
  padding-block: var(--wm-r-3);
  border-bottom: 1px solid var(--wm-linie);
  transition: border-color var(--wm-zeit-klein) ease;
}
.wm-ort__name {
  font-family: var(--wm-schrift-display);
  font-weight: var(--wm-g-halb);
  letter-spacing: -0.018em;
  font-size: var(--wm-t-body);
}
.wm-ort__name a { color: inherit; text-decoration: none; }
.wm-ort__name a::after { content: ""; position: absolute; inset: 0; }
.wm-ort__wert { font-size: var(--wm-t-klein); font-weight: var(--wm-g-mittel); white-space: nowrap; }
.wm-ort__zusatz { grid-column: 1 / -1; font-size: var(--wm-t-meta); color: var(--wm-tinte-3); }
@media (hover: hover) and (pointer: fine) {
  .wm-ort:hover { border-color: var(--wm-linie-kraeftig); }
  .wm-ort:hover .wm-ort__name { color: var(--wm-blau); }
}
.wm-ort:focus-within { border-color: var(--wm-linie-kraeftig); }


/* --- 7.8  Preistabelle ---------------------------------------------- */

.wm-tabellenfeld {
  border: 1px solid var(--wm-linie);
  border-radius: var(--wm-rad-3);
  overflow: hidden;
}
/* Rollbereich. Er bekommt aus app.js tabindex="0", role="region" und ein
   aria-label, sobald er wirklich rollt (WCAG 2.1.1: ein Bereich, den man
   nur wischen kann, ist für die Tastatur eine Sackgasse — gemessen 974 px
   Inhalt in 348 px Fenster). Dazu ein Schattenhinweis an der
   Abschneidekante: die beiden "local"-Verläufe laufen mit dem Inhalt mit,
   die beiden "scroll"-Schatten stehen fest — dadurch erscheint der
   Schatten nur an der Seite, an der noch etwas kommt. */
.wm-tabellenrolle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right,  var(--wm-grund), transparent) left  / 2rem 100% no-repeat local,
    linear-gradient(to left,   var(--wm-grund), transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, color-mix(in srgb, var(--wm-tinte) 16%, transparent), transparent) left  / .7rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--wm-tinte) 16%, transparent), transparent) right / .7rem 100% no-repeat scroll;
}
.wm-tabellenrolle:focus-visible {
  outline: 2px solid var(--wm-fokus);
  outline-offset: -2px;
}
.wm-tabelle {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--wm-t-klein);
}
.wm-tabelle caption {
  caption-side: top;
  text-align: left;
  padding: var(--wm-r-4) var(--wm-r-4) 0;
  font-size: var(--wm-t-meta);
  color: var(--wm-tinte-3);
}
.wm-tabelle th, .wm-tabelle td {
  padding: var(--wm-r-3) var(--wm-r-4);
  text-align: left;
  border-bottom: 1px solid var(--wm-linie);
  vertical-align: baseline;
}
.wm-tabelle thead th {
  background: var(--wm-flaeche-2);
  font-weight: var(--wm-g-halb);
  font-size: var(--wm-t-meta);
  letter-spacing: var(--wm-lw-meta);
  white-space: nowrap;
}
.wm-tabelle tbody tr:last-child th,
.wm-tabelle tbody tr:last-child td { border-bottom: 0; }
.wm-tabelle .wm-num { text-align: right; }
.wm-tabelle tbody th { font-weight: var(--wm-g-mittel); }
.wm-tabelle__hervor { background: var(--wm-signal-weich); }
.wm-quelle { margin-top: var(--wm-r-3); font-size: var(--wm-t-meta); color: var(--wm-tinte-3); }


/* --- 7.9  FAQ-Ziehharmonika ------------------------------------------
   Keine Kästen. Nur Haarlinien. Plus und Minus sind gezeichnet.
   ------------------------------------------------------------------- */

.wm-faq { border-top: 1px solid var(--wm-linie); max-width: var(--wm-mass-text); }
.wm-faq details { border-bottom: 1px solid var(--wm-linie); }
.wm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wm-r-4);
  min-height: 56px;
  padding-block: var(--wm-r-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-body);
  font-weight: var(--wm-g-halb);
  line-height: 1.35;
  letter-spacing: -0.018em;
}
.wm-faq summary::-webkit-details-marker { display: none; }
.wm-faq__zeichen {
  flex: none;
  width: 22px; height: 22px;
  color: var(--wm-tinte-3);
  transition: transform var(--wm-zeit-mittel) var(--wm-kurve-aus), color var(--wm-zeit-klein) ease;
}
.wm-faq details[open] .wm-faq__zeichen { transform: rotate(135deg); color: var(--wm-tinte); }
.wm-faq__inhalt p {
  padding-bottom: var(--wm-r-5);
  color: var(--wm-tinte-2);
  max-width: var(--wm-mass-text);
}
/* Ein <details> blendet seinen Inhalt im geschlossenen Zustand auf
   display:none — ein Übergang auf die Höhe läuft dort nie. Der einzige
   Weg, der wirklich animiert, ist ::details-content. Wo der Browser
   ihn nicht kennt (Firefox bis 2026), klappt der Inhalt einfach auf:
   dieselbe Information, nur ohne Weg. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  :root { interpolate-size: allow-keywords; }
  .wm-faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--wm-zeit-mittel) var(--wm-kurve-aus),
                content-visibility var(--wm-zeit-mittel) allow-discrete;
  }
  .wm-faq details[open]::details-content { block-size: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .wm-faq summary:hover .wm-faq__zeichen { color: var(--wm-tinte); }
}


/* --- 7.10  Schrittfolge / Ablauf -------------------------------------
   Die Nummern bleiben: hier trägt die Reihenfolge Information.
   ------------------------------------------------------------------- */

/* Zwei Spalten, nicht vier: bei vier Spalten bleiben auf 1440 px nur
   rund 30 Zeichen je Zeile — unter dem Lesemaß. Zwei Spalten geben
   etwa 55 Zeichen, und die Reihenfolge liest sich trotzdem als Folge. */
.wm-ablauf { list-style: none; counter-reset: wm-schritt; display: grid; gap: var(--wm-r-6); }
@media (min-width: 768px) {
  .wm-ablauf { grid-template-columns: repeat(2, 1fr); gap: var(--wm-r-7) var(--wm-r-8); }
}
/* Nur für sehr kurze Schrittbezeichnungen ohne Fließtext. */
@media (min-width: 1100px) { .wm-ablauf--knapp { grid-template-columns: repeat(4, 1fr); gap: var(--wm-r-6); } }
.wm-ablauf li {
  counter-increment: wm-schritt;
  display: grid;
  gap: var(--wm-r-2);
  padding-top: var(--wm-r-5);
  border-top: 1px solid var(--wm-linie);
}
.wm-ablauf li::before {
  content: counter(wm-schritt, decimal-leading-zero);
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-meta);
  font-weight: var(--wm-g-halb);
  letter-spacing: var(--wm-lw-versal);
  color: var(--wm-signal-text);
  font-variant-numeric: tabular-nums;
}
.wm-ablauf h3 { font-size: var(--wm-t-h3); }
.wm-ablauf p { color: var(--wm-tinte-2); font-size: var(--wm-t-klein); }


/* --- 7.11  Zitat / Referenz ------------------------------------------
   Kein farbiger Balken. Die Typografie trägt das Zitat.
   ------------------------------------------------------------------- */

.wm-zitat { max-width: 26rem; }
.wm-zitat blockquote {
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-lede);
  font-weight: var(--wm-g-mittel);
  line-height: 1.4;
  letter-spacing: -0.02em;
  hanging-punctuation: first;
  text-wrap: pretty;
  max-width: 22em;   /* em, nicht ch: bezogen auf die eigene Größe */
}
.wm-zitat figcaption {
  margin-top: var(--wm-r-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wm-r-1) var(--wm-r-3);
  font-size: var(--wm-t-klein);
  color: var(--wm-tinte-3);
}
/* Sterne sind gezeichnet, nicht getippt: ein Unicode-Stern ist auf
   jedem System eine andere Form. */
.wm-zitat__sterne { display: inline-flex; gap: 2px; color: var(--wm-signal-text); }
.wm-zitat__sterne .wm-icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.wm-zitate { display: grid; gap: var(--wm-r-7); }
@media (min-width: 768px) { .wm-zitate { grid-template-columns: repeat(2, 1fr); gap: var(--wm-r-7) var(--wm-r-8); } }


/* --- 7.12  Autorenkasten --------------------------------------------- */

.wm-autor {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--wm-r-4);
  align-items: start;
  padding-top: var(--wm-r-5);
  border-top: 1px solid var(--wm-linie);
  max-width: var(--wm-mass-text);
}
.wm-autor__bild {
  width: 64px; height: 64px;
  border-radius: var(--wm-rad-2);   /* Squircle statt Kreis: kein Maskenschnitt am Motiv */
  overflow: hidden;
  background: var(--wm-flaeche-2);
}
.wm-autor__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.wm-autor__name { font-family: var(--wm-schrift-display); font-weight: var(--wm-g-halb); letter-spacing: -0.018em; }
.wm-autor p { font-size: var(--wm-t-klein); color: var(--wm-tinte-2); margin-top: var(--wm-r-1); max-width: 56ch; }
.wm-autor__stand { display: block; margin-top: var(--wm-r-2); font-size: var(--wm-t-meta); color: var(--wm-tinte-3); }


/* --- 7.13  Brotkrumen ------------------------------------------------ */

.wm-krume { padding-block: var(--wm-r-4); }
.wm-krume ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wm-r-2);
  font-size: var(--wm-t-meta);
  color: var(--wm-tinte-3);
}
.wm-krume li { display: flex; align-items: center; gap: var(--wm-r-2); }
.wm-krume li + li::before { content: "/"; color: var(--wm-linie-kraeftig); }
.wm-krume a { color: inherit; text-decoration: none; }
.wm-krume a:hover { color: var(--wm-tinte); text-decoration: underline; }
.wm-krume [aria-current="page"] { color: var(--wm-tinte-2); }


/* --- 7.14  Fußzeile --------------------------------------------------- */

.wm-fuss {
  background: var(--wm-flaeche);
  border-top: 1px solid var(--wm-linie);
  padding-block: var(--wm-r-8) var(--wm-r-6);
  font-size: var(--wm-t-klein);
}
.wm-fuss__gitter { display: grid; gap: var(--wm-r-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .wm-fuss__gitter { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--wm-r-6); } }
.wm-fuss h2 { font-size: var(--wm-t-klein); font-weight: var(--wm-g-halb); letter-spacing: -0.012em; margin-bottom: var(--wm-r-3); }
.wm-fuss ul { list-style: none; display: grid; gap: var(--wm-r-1); }
.wm-fuss a { color: var(--wm-tinte-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.wm-fuss a:hover { color: var(--wm-tinte); text-decoration: underline; }
.wm-fuss address { font-style: normal; color: var(--wm-tinte-2); line-height: 1.7; }
.wm-fuss__schluss {
  margin-top: var(--wm-r-7);
  padding-top: var(--wm-r-5);
  border-top: 1px solid var(--wm-linie);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wm-r-3) var(--wm-r-5);
  justify-content: space-between;
  font-size: var(--wm-t-meta);
  color: var(--wm-tinte-3);
}


/* --- 7.15  Formular ---------------------------------------------------
   Beschriftung über dem Feld, Hilfstext darunter, Fehler unter dem
   Feld und zusätzlich benannt — nie nur Farbe.
   ------------------------------------------------------------------- */

.wm-form { display: grid; gap: var(--wm-r-5); max-width: 34rem; }
.wm-feld { display: grid; gap: var(--wm-r-2); }
.wm-feld label { font-size: var(--wm-t-klein); font-weight: var(--wm-g-halb); letter-spacing: -0.008em; }
.wm-feld label .wm-pflicht { color: var(--wm-signal-text); margin-left: 2px; }

.wm-eingabe {
  width: 100%;
  min-height: 48px;
  padding: var(--wm-r-3) var(--wm-r-4);
  background: var(--wm-grund);
  color: var(--wm-tinte);
  border: 1px solid var(--wm-linie-kraeftig);   /* 3,61:1 — WCAG 1.4.11 */
  border-radius: var(--wm-rad-2);
  font-size: var(--wm-t-body);
  transition: border-color var(--wm-zeit-klein) ease, box-shadow var(--wm-zeit-klein) ease;
}
textarea.wm-eingabe { min-height: 8rem; resize: vertical; line-height: var(--wm-zh-body); }
.wm-eingabe::placeholder { color: var(--wm-tinte-3); }   /* 5,28:1 */
.wm-eingabe:hover { border-color: var(--wm-tinte-3); }
.wm-eingabe:focus-visible {
  outline: 2px solid var(--wm-fokus);
  outline-offset: 1px;
  border-color: var(--wm-fokus);
}
.wm-eingabe[aria-invalid="true"] { border-color: var(--wm-signal-text); border-width: 2px; }

.wm-hilfe { font-size: var(--wm-t-meta); color: var(--wm-tinte-3); }
.wm-fehler {
  display: flex;
  align-items: flex-start;
  gap: var(--wm-r-2);
  font-size: var(--wm-t-meta);
  font-weight: var(--wm-g-mittel);
  color: var(--wm-signal-text);              /* 5,93:1 */
}
.wm-fehler .wm-icon { width: 1rem; height: 1rem; margin-top: 1px; }

.wm-zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wm-r-3);
  align-items: start;
  font-size: var(--wm-t-klein);
  color: var(--wm-tinte-2);
}
.wm-zustimmung input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; }

/* Hinweisfläche, ruhig: eine Farbe, eine Kante, kein Balken */
.wm-notiz {
  background: var(--wm-blau-weich);
  border-radius: var(--wm-rad-3);
  padding: var(--wm-r-5);
  font-size: var(--wm-t-klein);
  color: var(--wm-tinte-2);
}
.wm-notiz strong { display: block; color: var(--wm-tinte); margin-bottom: var(--wm-r-1); }
.wm-notiz--signal { background: var(--wm-signal-weich); }


/* --- 7.16  Mobile Aktionsleiste --------------------------------------- */

.wm-leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--wm-z-leiste);
  display: flex;
  gap: var(--wm-r-2);
  padding: var(--wm-r-2) var(--wm-r-3) calc(var(--wm-r-2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--wm-grund) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--wm-linie);
  /* Auftritt ruhig, Abgang schnell — der Abgang ist die Systemantwort. */
  transition: transform var(--wm-zeit-mittel) var(--wm-kurve-schub),
              opacity var(--wm-zeit-klein) ease;
}
/* Solange der Kopfbereich im Bild steht, stehen dieselben zwei Knöpfe
   schon dort. Die Leiste tritt erst auf, wenn er weg ist — und sie ist
   im Grundzustand sichtbar, damit ein gescheitertes Skript sie nicht
   verschluckt. */
.wm-leiste[data-ruht] {
  transform: translateY(115%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--wm-zeit-blatt-zu) var(--wm-kurve-aus),
              opacity 140ms ease;
}
.wm-leiste .wm-knopf { flex: 1; min-height: 48px; padding-inline: var(--wm-r-3); font-size: var(--wm-t-klein); }
@media (min-width: 1024px) { .wm-leiste { display: none; } }
@media (prefers-reduced-transparency: reduce) {
  .wm-leiste { background: var(--wm-grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
body.wm-hat-leiste { padding-bottom: 5rem; }
@media (min-width: 1024px) { body.wm-hat-leiste { padding-bottom: 0; } }


/* --- 7.17  Fehlerseite ------------------------------------------------ */

.wm-fehlerseite {
  min-height: 70svh;
  display: grid;
  align-content: center;
  gap: var(--wm-r-5);
  padding-block: var(--wm-takt);
}
.wm-fehlerseite__code {
  font-family: var(--wm-schrift-display);
  font-size: var(--wm-t-meta);
  font-weight: var(--wm-g-halb);
  letter-spacing: var(--wm-lw-versal);
  text-transform: uppercase;
  color: var(--wm-tinte-3);
  font-variant-numeric: tabular-nums;
}
.wm-fehlerseite h1 { max-width: 18ch; }
.wm-fehlerseite p { color: var(--wm-tinte-2); max-width: 46ch; }
.wm-fehlerseite__wege { display: grid; gap: 0; max-width: 34rem; margin-top: var(--wm-r-2); }


/* =====================================================================
   08  BEWEGUNG
   Was sich bewegt und warum, steht im Bericht. Hier die Umsetzung
   der reduzierten Variante: Weg raus, Bedeutung drin.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Rückmeldungen, die eine Aussage tragen, bleiben — nur ohne Weg. */
  .wm-knopf { transition: background-color 120ms ease, color 120ms ease !important; }
  .wm-knopf:active { transform: none; }
  .wm-weiter:hover .wm-icon { transform: none; }
  .wm-faq__zeichen { transition: none; }
  .wm-faq__inhalt { transition: none; }
  /* Die Deckkraft bleibt — sie erklärt, dass gerade etwas geladen wurde.
     Weg, Maßstab und Unschärfe fallen weg. Das !important ist nötig,
     damit die Pauschalregel darüber diese Absicht nicht mitlöscht. */
  .wm-werkzeug[data-zustand="offen"] .wm-werkzeug__lauf {
    animation: wm-einblenden 150ms ease both !important;
  }
  .wm-skelett__zeile::after, .wm-skelett__feld::after { animation: none; opacity: 0; }
  .wm-blatt { animation: none !important; }
}
@keyframes wm-einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Blatt: rein von oben, raus nach oben. Austritt schneller als Eintritt. */
@media (prefers-reduced-motion: no-preference) {
  .wm-blatt { animation: wm-blatt-auf var(--wm-zeit-blatt) var(--wm-kurve-schub) both; }
  .wm-blatt[data-schliesst] { animation: wm-blatt-zu var(--wm-zeit-blatt-zu) var(--wm-kurve-aus) both; }
}
@keyframes wm-blatt-auf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wm-blatt-zu {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}


/* =====================================================================
   09  DRUCK
   Ein Exposé, eine Wertermittlung, eine Checkliste: Menschen drucken
   das. Also gehört es zum Entwurf.
   ===================================================================== */

@media print {
  .wm-kopf, .wm-leiste, .wm-blatt, .wm-skip, .wm-werkzeug__tor { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wm-abschnitt { padding-block: 1.5rem; }
  .wm-portraet { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .wm-faq details { break-inside: avoid; }
  .wm-tabelle { min-width: 0; font-size: 10pt; }
}

/* Ersatzzustand eines Werkzeugs ohne hinterlegte Quelle. Frueher wurde hier
   nur der Knopf ausgeblendet - ein stiller Ausfall. Jetzt steht an seiner
   Stelle eine sichtbare Handlungsmoeglichkeit. */
.wm-werkzeug__ersatz{margin:1.25rem auto 0;max-width:46ch;text-align:center}
.wm-werkzeug__ersatz-text{color:var(--wm-tinte-3,#636d75);
 font-size:var(--wm-t-klein,.9375rem);line-height:1.55;margin:0 0 1rem}
.wm-werkzeug__ersatz-wege{margin:0;display:flex;flex-wrap:wrap;gap:.75rem 1rem;
 align-items:center;justify-content:center;font-size:var(--wm-t-klein,.9375rem)}
.wm-werkzeug__ersatz-link{color:var(--wm-signal-text,#b83417);
 font-weight:var(--wm-g-halb,600)}
@media (max-width:30rem){.wm-werkzeug__ersatz-wege .wm-knopf{width:100%}}


/* =====================================================================
   10  NACHTRÄGE AUS DER NACHMESSUNG VOM 20.09.2026
   Alles hier ist Korrektur an gemessenen Fehlern, nicht neues Design.
   Jede Regel trägt ihren Messwert.
   ===================================================================== */

/* --- 10.1  Tippantwort ------------------------------------------------
   touch-action fehlte vollständig: alle Bedienelemente standen auf
   "auto", was auf iOS bis zu 300 ms Wartezeit auf den Doppeltipp kostet.
   "manipulation" behält Kneifzoom und Rollen, nimmt nur den
   Doppeltipp-Zoom auf dem Element selbst. Bewusst NICHT am <body>: dort
   wäre es eine Zoom-Sperre für die ganze Seite.
   Dazu die Tipp-Hervorhebung, die bisher nur .wm-knopf hatte. */
:where(a[href], button, [role="button"], summary, label,
       input, select, textarea, .wm-knopf, .wm-weiter,
       .ff-btn, .btn) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* --- 10.2  FluentForm: Absendeknopf -----------------------------------
   Der Plugin-Blauton trug weiße Schrift: 3,87:1 in beiden Themen und
   allen drei Breiten — der einzige Verstoß, der überall gleich auftrat.

   Die Farbe kommt nicht aus dem Plugin-Stylesheet, sondern aus einer je
   Formular erzeugten Regel im Seitenkopf:
       form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style)
       { background-color: var(--fluentform-primary); color: #ffffff }
   Auswahlschärfe 0-3-1, über CDP ausgelesen. Deshalb hier bewusst ein
   längerer Selektor (0-5-1) statt !important; die Formularnummer bleibt
   dabei offen, damit ein zweites Formular nicht wieder durchfällt.
   Ergebnis: 5,93:1 in Ruhe, 4,69:1 im Überfahren — wie .wm-knopf--signal.

   Die Pauschalregel .ff_btn_style:hover{opacity:.8} des Plugins wird mit
   abgeschaltet: Deckkraft unter 1 rechnet die Fläche gegen den Grund und
   nimmt dem Paar genau den Kontrast, den es gerade bekommen hat. */
.fluentform form[class*="fluent_form_"] .ff-btn.ff-btn-submit:not(.ff_btn_no_style),
form[class*="fluent_form_"] .ff-btn.ff-btn-submit:not(.ff_btn_no_style),
.fluentform .ff-btn.ff-btn-submit,
.ff-el-group .ff-btn.ff-btn-submit {
  min-height: 48px;
  padding: var(--wm-r-3) var(--wm-r-6);
  border: 0;
  border-radius: var(--wm-rad-pille);
  background: var(--wm-signal);
  background-color: var(--wm-signal);
  color: var(--wm-signal-auf);
  box-shadow: inset 0 0 0 1px var(--wm-signal-rand);
  font-family: var(--wm-schrift-text);
  font-size: var(--wm-t-body);
  font-weight: var(--wm-g-halb);
  letter-spacing: -0.012em;
  line-height: 1.15;
  text-shadow: none;
  opacity: 1;
  transition: background-color var(--wm-zeit-klein) ease;
}
.ff-default .ff_btn_style.ff-btn-submit:focus,
.ff-default .ff_btn_style.ff-btn-submit:hover { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .fluentform form[class*="fluent_form_"] .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover,
  form[class*="fluent_form_"] .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover {
    background-color: var(--wm-signal-rand);
    color: var(--wm-signal-auf);
  }
}
.fluentform .ff-btn.ff-btn-submit:focus-visible,
form[class*="fluent_form_"] .ff-btn.ff-btn-submit:focus-visible {
  outline: 2px solid var(--wm-fokus);
  outline-offset: 2px;
}
.fluentform .ff-btn.ff-btn-submit:active { transform: scale(0.97); }

/* --- 10.3  Suchformular der 404-Seite ---------------------------------
   Feld auf 100 % neben einem Knopf mit fester Breite: 401 px in einem
   390-px-Fenster, 11 px Überhang. */
.wp-block-search__inside-wrapper {
  max-inline-size: 100%;
  flex-wrap: wrap;
}
.wp-block-search__inside-wrapper .wp-block-search__input {
  flex: 1 1 8rem;
  min-inline-size: 0;
}
.wp-block-search__inside-wrapper .wp-block-search__button {
  flex: 0 0 auto;
}

/* --- 10.4  Fremder Bestätigungsdialog auf Seiten ohne Bootstrap ---------
   WP-ImmoMakler schreibt seinen Bootstrap-Dialog („Bitte bestätigen") in
   manche Seiten, auf denen das Plugin-CSS gar nicht geladen wird. Dort
   fehlt Bootstraps eigenes .modal{display:none}: der Dialog steht als
   390 × 85 px großer leerer Streifen unter der Fußzeile, bringt ein h4 in
   die Überschriftengliederung und zwei namenlose Bedienelemente ans Ende
   des Tabulatorlaufs. Gemessen am 20.09.2026 auf der Marktdatenseite.

   Bewusst nur dort, wo die Body-Klasse wm-immomakler FEHLT — auf echten
   Objektseiten regelt Bootstrap das selbst, und Bootstrap 3 blendet einen
   offenen Dialog über style="display:block" ein, was diese Regel ohnehin
   nicht anfassen kann. */
body:not(.wm-immomakler) .modal:not(.in),
body:not(.wm-immomakler) [data-immomakler-confirm]:not(.in) { display: none; }

/* ===========================================================================
   ANHANG - aus style.css eingearbeitet am 2026-09-20.
   Diese Regeln gehen ueber das abgenommene Design-System hinaus (Klappmenue,
   ImmoMakler-Bruecke, Blockthema-Kanten) und muessen deshalb HINTER ihm stehen.
   style.css enthaelt seitdem nur noch den Theme-Kopf; sie wird nicht mehr
   eingebunden. Wer hier etwas aendert: es ist dieselbe Kaskadenstelle wie zuvor.
   =========================================================================== */

/* ===========================================================================
   Diese Datei enthält NUR, was über das abgenommene Design-System hinausgeht.
   Die Quelle der Wahrheit ist assets/css/app.css (design-system.css).
   Alles hier ist als Ergänzung gekennzeichnet und braucht Designfreigabe.
   =========================================================================== */

/* --- 1. Klappmenü in der Hauptnavigation -----------------------------------
   Das Design-System kennt .wm-nav nur als flache Reihe. Das Navigationskonzept
   (architektur.md 6.1) verlangt sieben Punkte mit zwei Ebenen. NACHZUZIEHEN
   IM DESIGN-SYSTEM. */
.wm-nav__gruppe { position: relative; display: inline-flex; }

.wm-nav__pfeil {
	inline-size: .8em; block-size: .8em;
	margin-inline-start: .3em;
	transition: transform var(--wm-zeit-klein) var(--wm-kurve-aus);
}
/* Überfahren nur mit echtem Zeigegerät. Auf einem Tablet oder
   Touch-Notebook (ab 768 px ist die Leiste sichtbar) blieb das Klappmenü
   nach einer Berührung offen stehen, bis woanders getippt wurde.
   :focus-within bleibt unangetastet — die Tastaturbedienung darf davon
   nicht abhängen. */
.wm-nav__gruppe:focus-within .wm-nav__pfeil { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
	.wm-nav__gruppe:hover .wm-nav__pfeil { transform: rotate(180deg); }
}

.wm-nav__klappe {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: var(--wm-z-klebend);
	min-inline-size: 15rem;
	margin: 0; padding: .5rem;
	list-style: none;
	background: var(--wm-grund);
	border: 1px solid var(--wm-linie);
	border-radius: var(--wm-rad-3);
	box-shadow: var(--wm-schatten-ueber);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.35rem);
	transition:
		opacity     var(--wm-zeit-klein) var(--wm-kurve-aus),
		transform   var(--wm-zeit-klein) var(--wm-kurve-aus),
		visibility  0s linear var(--wm-zeit-klein);
}
.wm-nav__gruppe:focus-within > .wm-nav__klappe {
	opacity: 1; visibility: visible; transform: none;
	transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
	.wm-nav__gruppe:hover > .wm-nav__klappe {
		opacity: 1; visibility: visible; transform: none;
		transition-delay: 0s;
	}
}
.wm-nav__klappe a {
	display: block;
	padding: .5rem .75rem;
	min-block-size: 2.25rem;
	border-radius: var(--wm-rad-2);
	color: var(--wm-tinte);
	text-decoration: none;
	font-size: var(--wm-t-klein);
}
.wm-nav__klappe a:focus-visible { background: var(--wm-flaeche); }
@media (hover: hover) and (pointer: fine) {
	.wm-nav__klappe a:hover { background: var(--wm-flaeche); }
}
.wm-nav__trenner {
	block-size: 1px; margin: .4rem .75rem;
	background: var(--wm-linie);
}

/* Ohne Zeigegerät (Touch) klappt nichts auf – dort führt der Menüknopf
   in das Blatt, das alle Unterpunkte ohnehin ausgeschrieben zeigt. */
@media (hover: none) {
	.wm-nav__klappe { display: none; }
	.wm-nav__pfeil  { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wm-nav__klappe, .wm-nav__pfeil { transition-duration: 1ms; }
}

/* --- 2. Unterpunkte im mobilen Menüblatt ---------------------------------- */
.wm-blatt__unter {
	margin: 0 0 .5rem; padding: 0 0 0 1rem;
	list-style: none;
	border-inline-start: 2px solid var(--wm-linie);
}
.wm-blatt__unter a {
	display: flex;
	align-items: center;
	padding: .45rem .5rem;
	min-block-size: 44px;   /* war 2,25rem = 36 px, gemessen 39 px */
	font-size: var(--wm-t-klein);
	color: var(--wm-tinte-2);
	text-decoration: none;
}
.wm-blatt__unter a:focus-visible { color: var(--wm-tinte); }
@media (hover: hover) and (pointer: fine) {
	.wm-blatt__unter a:hover { color: var(--wm-tinte); }
}

/* --- 3. Telefonnummer im Kopf --------------------------------------------- */
.wm-kopf__tel { white-space: nowrap; text-decoration: none; }
@media (max-width: 1199px) { .wm-kopf__tel { display: none; } }

/* --- 4. Brotkrumen: eigene Bahn, damit sie im Blockthema eigenständig steht */
.wm-krume > .wm-bahn { padding-block: .75rem; }

/* --- 5. Fußzeile: Anlass-Band und NAP-Zeile (architektur.md 6.3) ---------- */
/* Das Design-System setzt .wm-fuss__gitter auf drei feste Spalten
   (1.4fr 1fr 1fr). Die Fußzeile hat nach architektur.md 6.3 aber sechs
   Rubriken — Spalte 4 bis 6 wären in eine zweite Reihe mit falschen Breiten
   gerutscht. Deshalb hier auf ein mitwachsendes Raster umgestellt.
   BRAUCHT DESIGNFREIGABE — wie die Klappmenü-Ergänzung unter Punkt 1. */
@media (min-width: 768px) {
	.wm-fuss__gitter {
		grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
		column-gap: var(--wm-r-6);
	}
}
.wm-fuss__anlass {
	margin-block-start: 2.5rem; padding-block-start: 1.75rem;
	border-block-start: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.wm-fuss__anlass h2 { font-size: var(--wm-t-klein); margin-block-end: .75rem; }
.wm-fuss__anlass ul {
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	margin: 0; padding: 0; list-style: none;
}
.wm-fuss__nap {
	margin-block-start: 2rem;
	font-size: var(--wm-t-klein);
	line-height: var(--wm-zh-body);
}
.wm-fuss__nap p { margin-block: 0 .5rem; }

/* --- 6. Hauptinhalt: Fokusziel des Sprunglinks ohne sichtbaren Rahmen ----- */
.wm-inhalt:focus { outline: none; }

/* --- 7. Blockthema-Kanten ------------------------------------------------- */
/* Die Bausteine bringen ihre eigene Bahn mit; der Layoutcontainer von
   WordPress darf sie nicht zusätzlich einschnüren. */
.wm-inhalt > .wm-abschnitt,
.wm-inhalt > .wm-hero { max-inline-size: none; }


/* =====================================================================
   10  KLARSCHRIFT — weißer Grund, schwarze Schrift, hoher Kontrast
   Entscheidung vom 20.09.2026 (Christian Gottschling).

   WARUM DIESER BLOCK GANZ AM ENDE STEHT
   Er überschreibt nur Merkmale, keine Bausteine. Das Design-System
   darüber bleibt unangetastet. Wer diesen Block löscht, hat exakt den
   alten Zustand zurück — eine Datei, ein Schnitt, kein Suchen.

   WAS SICH ÄNDERT UND WARUM
   1. Jede Fläche wird weiß. Graue und blaue Bänder waren der Grund,
      warum die Seite bunt wirkte. Getrennt wird ab jetzt mit Linien
      und Weißraum, nicht mit Farbe.
   2. Die Schrift wird schwarz. #000000 auf #ffffff ist 21:1 — der
      höchste Kontrast, den es gibt. Die Zielgruppe ist älter; viele
      lesen mit nachlassender Sehschärfe. Jede Abstufung darunter
      bleibt über 10:1, auch die Nebentexte.
   3. Eine einzige Farbe bleibt: das Markenblau. Das Korallenrot
      entfällt. Zwei Akzentfarben nebeneinander waren die zweite
      Quelle der Unruhe.
   4. Der Dunkelmodus wird abgeschaltet. Sonst dreht das
      Betriebssystem des Besuchers die Seite trotzdem auf Schwarz,
      und "weißer Hintergrund" gilt nur für einen Teil der Leute.
   5. Die Schrift wird größer: 19 px Lesegröße statt 17 px.

   SERIFEN
   Apple setzt serifenlos (SF Pro). Der ruhige Eindruck kommt von
   Größe, Weißraum und Kontrast. Wer Serifen trotzdem sehen will,
   setzt data-serifen="an" auf <html> — dann tragen nur die
   Überschriften eine Serifenschrift, der Lesetext bleibt serifenlos.
   ===================================================================== */

:root,
:root[data-thema="dunkel"] {
  color-scheme: light;

  /* ---- Flächen: alles weiß ------------------------------------------ */
  --wm-grund:            #ffffff;
  --wm-flaeche:          #ffffff;
  --wm-flaeche-2:        #ffffff;
  --wm-linie:            #d2d2d7;  /* sichtbare Haarlinie — 1,55:1, dekorativ */
  --wm-linie-kraeftig:   #6e6e73;  /* Rand von Steuerelementen — 4,71:1        */

  /* ---- Schrift: schwarz und zwei dunkle Abstufungen ------------------ */
  --wm-tinte:            #000000;  /* 21,00:1 */
  --wm-tinte-2:          #1d1d1f;  /* 17,85:1 */
  --wm-tinte-3:          #424245;  /* 11,63:1 */

  /* ---- Die eine verbleibende Farbe ----------------------------------- */
  --wm-blau:             #014880;  /*  9,38:1 auf Weiß */
  --wm-blau-tief:        #01304f;  /* 13,66:1 gegen Weiß als Füllung */
  --wm-blau-weich:       #ffffff;
  --wm-blau-fuell:       #014880;
  --wm-blau-fuell-auf:   #ffffff;
  --wm-blau-fuell-hover: #01304f;

  /* ---- Handlungsaufforderung: Blau statt Koralle --------------------- */
  --wm-signal:           #014880;
  --wm-signal-auf:       #ffffff;  /*  9,38:1 */
  --wm-signal-rand:      #01304f;
  --wm-signal-text:      #014880;
  --wm-signal-weich:     #ffffff;

  /* ---- Status: dunkel genug für schwache Augen ----------------------- */
  --wm-gruen:            #12603c;  /*  7,47:1 */
  --wm-hinweis:          #6b4600;  /*  8,32:1 */
  --wm-fokus:            #014880;

  /* ---- Schatten: fast nichts. Apple trennt mit Linien, nicht mit Wolken */
  --wm-schatten:         0 0 0 1px #d2d2d7;
  --wm-schatten-ueber:   0 0 0 1px #6e6e73;

  /* ---- Größer lesen --------------------------------------------------- */
  --wm-t-display: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);      /* 41 / 55 / 72 px */
  --wm-t-h1:      clamp(2.125rem, 1.6rem + 2.2vw, 3.375rem);  /* 35 / 45 / 54 px */
  --wm-t-h2:      clamp(1.75rem, 1.42rem + 1.4vw, 2.5rem);    /* 29 / 36 / 40 px */
  --wm-t-h3:      clamp(1.375rem, 1.23rem + 0.6vw, 1.75rem);  /* 23 / 27 / 28 px */
  --wm-t-lede:    clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);    /* 21 / 25 / 24 px */
  --wm-t-body:    1.1875rem;   /* 19 px */
  --wm-t-klein:   1.0625rem;   /* 17 px */
  --wm-t-meta:    0.9375rem;   /* 15 px */
}

/* Der Dunkelmodus des Betriebssystems ändert ab jetzt nichts mehr. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: light;
    --wm-grund: #ffffff; --wm-flaeche: #ffffff; --wm-flaeche-2: #ffffff;
    --wm-linie: #d2d2d7; --wm-linie-kraeftig: #6e6e73;
    --wm-tinte: #000000; --wm-tinte-2: #1d1d1f; --wm-tinte-3: #424245;
    --wm-blau: #014880; --wm-blau-tief: #01304f; --wm-blau-weich: #ffffff;
    --wm-blau-fuell: #014880; --wm-blau-fuell-auf: #ffffff; --wm-blau-fuell-hover: #01304f;
    --wm-signal: #014880; --wm-signal-auf: #ffffff; --wm-signal-rand: #01304f;
    --wm-signal-text: #014880; --wm-signal-weich: #ffffff;
    --wm-gruen: #12603c; --wm-hinweis: #6b4600; --wm-fokus: #014880;
    --wm-schatten: 0 0 0 1px #d2d2d7;
    --wm-schatten-ueber: 0 0 0 1px #6e6e73;
  }
}

/* Das dunkelblaue Band wird zur weißen Fläche mit Rahmen.
   Die Abschnitte behalten damit ihre Gliederung, ohne Farbinsel. */
.wm-auf-dunkel {
  --wm-grund:          #ffffff;
  --wm-flaeche:        #ffffff;
  --wm-flaeche-2:      #ffffff;
  --wm-linie:          #d2d2d7;
  --wm-linie-kraeftig: #6e6e73;
  --wm-tinte:          #000000;
  --wm-tinte-2:        #1d1d1f;
  --wm-tinte-3:        #424245;
  --wm-blau:           #014880;
  --wm-blau-tief:      #01304f;
  --wm-blau-weich:     #ffffff;
  --wm-blau-fuell:       #014880;
  --wm-blau-fuell-auf:   #ffffff;
  --wm-blau-fuell-hover: #01304f;
  --wm-signal:         #014880;
  --wm-signal-auf:     #ffffff;
  --wm-signal-rand:    #01304f;
  --wm-signal-text:    #014880;
  --wm-signal-weich:   #ffffff;
  --wm-fokus:          #014880;
  background: #ffffff;
  color: #000000;
  border-block: 1px solid #d2d2d7;
}
.wm-auf-dunkel ::selection { background: #014880; color: #ffffff; }

/* Grundfarben hart setzen, falls ein Baustein die Farbe selbst mitbringt. */
html, body { background: #ffffff; }
body { color: #000000; }

/* Überschriften wirklich schwarz — auch dort, wo ein Baustein
   die Sekundärtinte benutzt hat. */
h1, h2, h3, h4, h5, h6,
.wm-display, .wm-h1, .wm-h2, .wm-h3 { color: #000000; }

/* Verweise im Lesetext: blau UND unterstrichen. Farbe allein ist für
   Menschen mit Farbsehschwäche kein Unterscheidungsmerkmal (WCAG 1.4.1). */
.wm-text :where(a:not(.wm-knopf)),
.wm-fliesstext :where(a:not(.wm-knopf)),
.entry-content :where(a:not(.wm-knopf)) {
  color: #014880;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

/* Serifen nur auf Wunsch, und nur für Überschriften. */
:root[data-serifen="an"] {
  --wm-schrift-display:
      "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
      "Times New Roman", serif;
}

/* ---------------------------------------------------------------------
   10.1  Reste, die an den Merkmalen vorbei Farbe gesetzt haben
   --------------------------------------------------------------------- */

/* Namensschild über dem Porträt: Schiefer war fest verdrahtet. */
.wm-portraet__plakette { color: #000000; background: #ffffff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px #d2d2d7; }
.wm-portraet__rolle,
.wm-portraet__anzahl { color: #1d1d1f; }

/* Siegel bleiben in Graustufen — auch unter dem Mauszeiger.
   Vorher sprangen fünf Logos beim Überfahren in Vollfarbe. */
.wm-siegel li img { filter: grayscale(1); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .wm-siegel li:hover img { filter: grayscale(1); opacity: 1; }
}
.wm-siegel li,
.wm-auf-dunkel .wm-siegel li { background: #ffffff; }
.wm-auf-dunkel .wm-siegel img { filter: grayscale(1); opacity: 1; }

/* ---------------------------------------------------------------------
   10.2  Fluent Forms — die Formulare tragen die Farben der Seite
   Das Plugin bringt ein grelles Web-Blau (#1a7efb) und ein Lachsrot
   (#f56c6c) mit. Beides ersetzt: Blau wird Markenblau, das Pflichtfeld-
   Sternchen wird schwarz. Rot bleibt allein den Fehlermeldungen
   vorbehalten - und zwar in einem Rot, das auf Weiss 7:1 erreicht.
   --------------------------------------------------------------------- */
.fluentform, .ff-default, .frm-fluent-form {
  --fluentform-primary:   #014880;
  --fluentform-secondary: #1d1d1f;
  --fluentform-danger:    #a3161b;   /* 7,06:1 auf Weiss */
  color: #000000;
}
.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-control,
.fluentform label { color: #000000; font-size: 1.0625rem; }
.fluentform .ff-el-form-control {
  border: 1px solid #6e6e73; border-radius: 10px;
  background: #ffffff; color: #000000;
  font-size: 1.0625rem; min-height: 48px; padding: .7rem .9rem;
}
.fluentform .ff-el-form-control:focus {
  border-color: #014880; outline: 3px solid #014880; outline-offset: 1px;
  box-shadow: none;
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before { color: #000000; }
.fluentform .ff-el-help-message { color: #1d1d1f; font-size: .9375rem; }
.fluentform .error, .fluentform .text-danger, .fluentform .ff-el-is-error .error {
  color: #a3161b;
}
.fluentform .ff-el-tooltip svg { fill: #014880; }
.fluentform .ff-btn-submit, .fluentform .ff-btn.ff-btn-submit {
  background: #014880 !important; border-color: #014880 !important;
  color: #ffffff !important; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 600; min-height: 52px; padding: .8rem 1.75rem;
}
.fluentform .ff-btn-submit:hover { background: #01304f !important; border-color: #01304f !important; }

/* ---------------------------------------------------------------------
   10.3  WP-ImmoMakler — Objektseiten in derselben Sprache
   Der Plugin-Stapel bringt Bootstrap 3 mit. Er ist unter .immomakler
   gekapselt, faellt aber auf Objektseiten auf: Status-Fahnen in
   Signalrot, Bootstrap-Blau bei Verweisen, graue Karten.
   --------------------------------------------------------------------- */
.immomakler, .immomakler-object, .immomakler .panel, .immomakler .well,
.immomakler .thumbnail, .immomakler .list-group-item {
  background: #ffffff !important;
  color: #000000;
  border-color: #d2d2d7;
}
.immomakler a, .immomakler a:visited { color: #014880; }
.immomakler a:hover { color: #01304f; }
.immomakler .label, .immomakler .badge,
.immomakler .immomakler-marketing-status,
.immomakler .object-status, .immomakler .status {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000;
  border-radius: 999px;
  font-weight: 600;
}
.immomakler .btn-primary, .immomakler .btn-success, .immomakler .btn-info {
  background: #014880 !important; border-color: #014880 !important; color: #ffffff !important;
  border-radius: 999px;
}
.immomakler .btn-default {
  background: #ffffff !important; border-color: #6e6e73 !important; color: #014880 !important;
  border-radius: 999px;
}
.immomakler table, .immomakler .table { color: #000000; }
.immomakler .table > thead > tr > th,
.immomakler .table > tbody > tr > td,
.immomakler .table-striped > tbody > tr:nth-of-type(odd) {
  background: #ffffff !important; border-color: #d2d2d7 !important; color: #000000;
}
.immomakler h1, .immomakler h2, .immomakler h3, .immomakler h4 { color: #000000; }

/* ---------------------------------------------------------------------
   10.4  Kopfzeile: die groessere Lesegroesse gilt fuer den Text,
         nicht fuer die Navigation.
   Nach der Umstellung auf 19 px Lesegroesse wuchs auch die Kopfzeile mit
   und der Knopf "Wert ermitteln" lief rechts aus dem Bild. Die Navigation
   bekommt deshalb eine eigene, feste Groesse und darf umbrechen, statt
   zu ueberlaufen.
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .wm-nav { gap: 1.1rem; flex-wrap: nowrap; min-width: 0; }
  .wm-nav a { font-size: 0.875rem; color: #000000; white-space: nowrap; }
  .wm-nav a:hover { color: #014880; }
  .wm-nav a[aria-current="page"] { color: #014880; }
  .wm-kopf__tel { font-size: 0.9375rem; color: #000000; }
  .wm-kopf__innen .wm-kopf__aktion {
    font-size: 0.9375rem; white-space: nowrap; flex: 0 0 auto;
    padding-inline: 1.1rem; min-height: 44px;
  }
  .wm-kopf__innen { gap: 1rem; flex-wrap: nowrap; }
  .wm-marke { font-size: 0.9375rem; flex: 0 0 auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .wm-nav { gap: 0.8rem; }
  .wm-nav a { font-size: 0.8125rem; }
  .wm-kopf__innen .wm-kopf__aktion { font-size: 0.875rem; padding-inline: .9rem; }
}
@media (min-width: 1500px) {
  .wm-nav { gap: 1.4rem; }
  .wm-nav a { font-size: 0.9375rem; }
}
.wm-nav__klappe a { font-size: 1rem; color: #000000; }
.wm-nav__klappe { background: #ffffff; box-shadow: 0 0 0 1px #d2d2d7; }
.wm-nav__klappe a:hover, .wm-nav__klappe a:focus-visible { background: #ffffff; color: #014880; text-decoration: underline; }
.wm-nav__trenner { background: #d2d2d7; border-color: #d2d2d7; }
.wm-kopf { background: #ffffff; border-bottom: 1px solid #d2d2d7;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.wm-leiste { background: #ffffff; border-top: 1px solid #d2d2d7;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.wm-blatt { background: #ffffff; color: #000000; }

/* ---------------------------------------------------------------------
   10.5  Lesetext wirklich schwarz, Ueberschriften eine Spur ruhiger
   Der Vorspann und der Fliesstext standen im Grau der zweiten Tinte.
   Fuer die Zielgruppe ist das der falsche Weg: Lesetext bekommt 21:1,
   Grau bleibt den Randangaben (Datum, Quelle, Bildunterschrift).
   --------------------------------------------------------------------- */
:root {
  --wm-t-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);   /* 34 / 44 / 56 px */
  --wm-t-h1:      clamp(2rem, 1.45rem + 1.8vw, 3rem);       /* 30 / 38 / 48 px */
}
body, p, li, dd, dt, td, th, figcaption, blockquote,
.wm-lede, .wm-text, .wm-fliesstext, .entry-content { color: #000000; }
.wm-meta, .wm-bild__unterschrift, small,
.wm-portraet__rolle, .wm-portraet__anzahl { color: #1d1d1f; }
.wm-bild__unterschrift a { color: #014880; }

/* ---------------------------------------------------------------------
   10.6  Bildergalerie der Objektseiten
   Der Zaehler ("3 / 17") stand weiss auf weiss - unsichtbar, und der
   einzige Kontrastverstoss, der nach der Umstellung uebrig war.
   --------------------------------------------------------------------- */
.galleria-counter, .galleria-current, .galleria-total {
  color: #000000 !important;
  font-size: 0.9375rem !important;
  text-shadow: none !important;
}
.galleria-counter {
  background: #ffffff !important;
  border: 1px solid #d2d2d7;
  border-radius: 999px;
  padding: 2px 10px !important;
}
.galleria-container, .galleria-stage, .galleria-thumbnails-container {
  background: #ffffff !important;
}
.galleria-info-text, .galleria-info-title, .galleria-info-description { color: #000000 !important; }

/* ---------------------------------------------------------------------
   10.7  "Passend dazu" - der naechste Schritt am Abschnittsende
   Eine ruhige Liste statt bunter Kacheln: Haarlinie, schwarzer Text,
   ein blauer Pfeil. Jede Zeile ist mindestens 44 px hoch, damit sie
   auch mit unsicherem Finger zu treffen ist.
   --------------------------------------------------------------------- */
.wm-weiter,
.wm-text aside.wm-weiter,
.entry-content aside.wm-weiter {
  display: block;
  inline-size: 100%;
  margin-block: 2rem;
  padding: 1rem 1.5rem 0.5rem;
  border: 1px solid #d2d2d7;
  border-radius: 14px;
  background: #ffffff;
  max-inline-size: 46rem;
}
.wm-weiter__titel {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1d1d1f;
}
.wm-weiter__liste { list-style: none; margin: 0; padding: 0; }
.wm-weiter__liste li { margin: 0; padding: 0; }
.wm-weiter__liste li::before { content: none; }
.wm-weiter__liste a,
.wm-text .wm-weiter__liste a,
.entry-content .wm-weiter__liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 48px;
  padding-block: 0.625rem;
  border-block-end: 1px solid #e5e5ea;
  color: #000000;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.wm-weiter__liste li:last-child a { border-block-end: 0; }
.wm-weiter__liste a::after {
  content: "→";
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: #014880;
  font-weight: 600;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .wm-weiter__liste a:hover { color: #014880; }
  .wm-weiter__liste a:hover::after { transform: translateX(3px); }
}
.wm-weiter__liste a:focus-visible { outline: 3px solid #014880; outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .wm-weiter__liste a::after { transition: none; } }
@media (min-width: 900px) {
  .wm-weiter__liste:has(li:nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .wm-weiter__liste:has(li:nth-child(4)) li:nth-last-child(-n+2) a { border-block-end: 0; }
}

/* Der Weiterfuehrungs-Satz am Abschnittsende: normaler Lesetext, der Link
   traegt die Unterstreichung wie jeder andere Verweis im Text. */
.wm-weiter-satz { margin-block-start: 1rem; }
.wm-weiter-satz a { color: #014880; text-decoration: underline; text-underline-offset: 0.18em; font-weight: 500; }

/* ---------------------------------------------------------------------
   10.8  Fussnavigation: sieben Rubriken in einem ruhigen Raster
   Auf dem Rechner vier Spalten, also zwei Reihen; darunter zwei, auf dem
   Handy eine. Jede Zeile mindestens 44 px hoch.
   --------------------------------------------------------------------- */
.wm-fuss { background: #ffffff; border-top: 1px solid #d2d2d7; }
@media (min-width: 640px) {
  .wm-fuss__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 2.25rem; }
}
@media (min-width: 1024px) {
  .wm-fuss__gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 2.75rem; }
}
.wm-fuss__gitter h2 {
  font-size: 0.9375rem; font-weight: 600; color: #000000;
  margin: 0 0 0.5rem; letter-spacing: -0.005em;
}
.wm-fuss__gitter ul { gap: 0; }
.wm-fuss__gitter a {
  min-height: 44px; color: #1d1d1f; font-size: 1rem; line-height: 1.35;
}
.wm-fuss__gitter a:hover { color: #014880; }
/* 10.7a  Nachschaerfung: die Textregeln von .wm-text duerfen den Kasten
   nicht einruecken und nicht unterstreichen. */
.wm-weiter .wm-weiter__liste { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.wm-weiter .wm-weiter__liste li { padding: 0 !important; margin: 0 !important; }
.wm-weiter .wm-weiter__liste li::marker { content: none; }
.wm-weiter .wm-weiter__liste a { text-decoration: none !important; }
.wm-weiter .wm-weiter__titel { text-decoration: none !important; border: 0 !important; }
@media (min-width: 900px) {
  .wm-weiter .wm-weiter__liste:has(li:nth-child(4)) { align-items: stretch; }
}