/* ==========================================================
   SPECKEMEYER — Startseite
   Übernommen aus Ressourcen/Speckemeyer_Startseite.html

   Alles ist unter .spm skopiert. Header und Footer baut der
   Kunde in Astra — die dürfen davon nichts abbekommen.

   Farben   Petrol #0B6782 · Eisblau #C1DCF4 · Weiß
   Motive   offener Rahmen · 45°-Diagonalen · FAKTEN-Kästen
            weißer Kasten über Bild · ▪ Bildunterschrift
            Rautenakzent · vertikale Marginalie · kurze Linie

   Bewusste Festlegungen, die nicht "vergessen" wurden:
   · border-radius ist überall 0
   · keine Schatten außer einer Haarlinie
   · nur zwei Schnitte (400/500), kein Bold
   · nur zwei Breakpoints: 700px und 1000px
   ========================================================== */

.spm{
  /* Petrol und Eisblau kommen aus Astras globaler Palette — wer sie im
     Customizer ändert, ändert damit auch diese Seite. Der Wert dahinter
     ist der Rückfall aus dem Entwurf, falls Astra die Variable einmal
     nicht ausgibt. */
  --petrol:var(--ast-global-color-0,#0B6782);
  --petrol-dk:color-mix(in srgb, var(--petrol) 82%, #000);
  --ice:var(--ast-global-color-8,#C1DCF4);
  --ice-lt:#E3EFF9;
  --ice-25:rgba(193,220,244,.42);
  --ink:#1A1A1A;
  --ink-60:#55585A;
  --paper:#FFFFFF;
  --soft:#F4F8FB;
  --line:#DFE6EC;
  --pad:20px;
  --hair:1.5px;
  --font:"Akko Pro Medium","Akko Pro",Figtree,"Fira Sans",system-ui,sans-serif;
  --font-script:"MarketPro-CondMedium","Market Pro","Caveat Brush",Caveat,cursive;

  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.spm *{box-sizing:border-box;}
.spm img{max-width:100%;display:block;height:auto;}
.spm a{color:inherit;text-decoration:none;}
.spm :focus-visible{outline:2px solid var(--petrol);outline-offset:3px;}

/* Astra setzt eigene Abstände auf Blöcke — hier zurücknehmen.
   ACHTUNG: KEIN pauschales margin-block:0 auf .wp-block-group. Der weiße
   Kasten im Hero (.heroB__box) und die Overlay-Kästen sind Gruppen und
   ragen über negative Margins ins Bild — ein Pauschalreset macht genau
   diese Überlappung platt. */
.spm .wp-block-columns,
.spm .wp-block-column{margin-block:0;}
.spm .wp-block-image{margin:0;}
.spm .wp-block-heading{margin:0;}

/* ---------- Typografie ---------- */
.spm h1,.spm h2,.spm h3{margin:0;font-weight:400;letter-spacing:-.01em;}
.spm .h1{line-height:1.12;font-weight:500;text-wrap:balance;}
.spm .h2{line-height:1.2;font-weight:500;text-wrap:balance;}
.spm .h3{line-height:1.35;font-weight:500;}
.spm p{margin:0 0 1em;}

/* Der farbige Vorspann — Magazin-Signatur */
.spm .intro{font-weight:500;color:var(--petrol);font-size:17px;line-height:1.5;}
.spm .body{color:var(--ink-60);}
.spm .small{font-size:14px;line-height:1.55;color:var(--ink-60);}

/* MOTIV 8: die kurze Linie unter der Headline
   Im Inhalt ist das ein core/separator mit dem Block-Stil „Kurze Linie" —
   dadurch verschiebbar und löschbar wie jeder andere Block. */
/* Selektor bewusst mit Elementname (hr) plus zwei Klassen = 0,3,1.
   Astra setzt zwei Regeln mit je drei Klassen dagegen:
     [data-ast-blocks-layout] .wp-block-separator:not(.is-style-dots){height:0}
     .wp-block-separator:not(.is-style-wide):not(.is-style-dots){margin:20px auto}
   Die erste machte die Linie unsichtbar (Höhe 0), die zweite zentrierte sie
   (je 199px Rand). Mit nur zwei Klassen verlor die Regel hier beide Male. */
.spm hr.wp-block-separator.is-style-spm-rule{
  width:62px;
  height:2px;
  background:var(--petrol);
  border:0;
  margin:14px 0 20px;
  opacity:1;
  max-width:none;
}
.spm .sec-deep hr.wp-block-separator.is-style-spm-rule{background:var(--ice);}

.spm .eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--petrol);margin:0 0 10px;
}

/* ---------- Raster ---------- */
.spm .spm-wrap{
  padding-left:var(--pad);padding-right:var(--pad);
  max-width:1240px;margin:0 auto;position:relative;
}
.spm .spm-sec{padding:56px 0;position:relative;overflow:hidden;}
.spm .sec-deep{background:var(--petrol);color:#fff;}
.spm .sec-deep .body,.spm .sec-deep .small{color:rgba(255,255,255,.8);}
.spm .sec-deep .eyebrow,
.spm .sec-deep .intro{color:var(--ice);}
.spm .sec-deep .h1,.spm .sec-deep .h2,.spm .sec-deep .h3{color:#fff;}

/* ---------- MOTIV 2: 45°-Diagonalen ----------
   Früher drei leere <i> in einem HTML-Block. Jetzt reine Dekoration über
   ein Pseudoelement: kein Markup im Inhalt, kein Block, den jemand
   versehentlich löscht — und im Editor nichts, was wie Text aussieht.
   Ein Abschnitt bekommt sie über die Klasse has-diag. */
.spm .has-diag::before,
.spm .has-diag::after{
  content:"";
  position:absolute;
  pointer-events:none;z-index:0;
  background:var(--ice-25);
  width:150%;
  transform:rotate(-45deg);
  transform-origin:left center;
}
/* Geometrie 1:1 aus dem Entwurf — zwei einzelne Streifen, kein Muster.
   Der Abschnitt hat overflow:hidden, deshalb ragt nichts heraus. */
.spm .has-diag::before{top:-4%;left:-16%;height:26px;}
.spm .has-diag::after{top:74%;left:6%;height:20px;}
.spm .sec-deep.has-diag::before,
.spm .sec-deep.has-diag::after{background:rgba(255,255,255,.11);}
.spm .spm-wrap{position:relative;z-index:1;}
.spm .spm-wrap > *{position:relative;z-index:1;}

/* ---------- MOTIV 3: FAKTEN-Kasten ---------- */
.spm .fakten{display:grid;gap:10px;margin:24px 0 0;}
.spm .fakt{
  border:var(--hair) solid var(--ice);border-right:0;
  padding:12px 14px;background:rgba(255,255,255,.7);
}
/* Beschriftung und Wert sind beides core/paragraph — beide direkt im
   Editor bearbeitbar, kein HTML-Block nötig. */
.spm .fakt .fakt-label{
  display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--petrol);font-weight:500;margin:0 0 3px;
}
.spm .fakt p{font-size:14px;line-height:1.4;display:block;margin:0;}
.spm .sec-deep .fakt{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);}
.spm .sec-deep .fakt .fakt-label{color:var(--ice);}

/* ---------- MOTIV 5: ▪ Bildunterschrift ---------- */
.spm .cap{display:grid;grid-template-columns:11px 1fr;gap:0 9px;align-items:start;margin-top:12px;}
.spm .cap::before{content:"";width:11px;height:11px;background:var(--petrol);margin-top:6px;}
.spm .cap > *{grid-column:2;}
.spm .cap .cap__t{font-weight:500;font-size:15px;margin:0;}
.spm .cap .cap__s{font-style:italic;font-size:13px;color:var(--ink-60);margin:0;}

/* ---------- MOTIV 6: Rautenakzent als Trenner ----------
   Ein Trenner, der keine Linie ist: eine 16x16-Raute, nur Kontur,
   um 45 Grad gedreht, mittig. Gedacht als leiserer Absatzwechsel
   innerhalb eines Abschnitts. Im Editor unter "Stile" waehlbar;
   auf der Startseite steht bisher ueberall die kurze Linie. */
.spm hr.wp-block-separator.is-style-spm-rhomb{
  display:flex;justify-content:center;padding:8px 0 0;
  border:0;height:auto;margin:34px 0 0;width:100%;max-width:none;opacity:1;
}
.spm hr.wp-block-separator.is-style-spm-rhomb::before{
  content:"";width:16px;height:16px;
  border:var(--hair) solid var(--ice);transform:rotate(45deg);display:block;
}

/* ---------- MOTIV 7: vertikale Marginalie (erst ab 1000px) ---------- */
.spm .margin-note{display:none;margin:0;}

/* ---------- Bildflächen ---------- */
.spm .media{
  position:relative;overflow:hidden;display:flex;align-items:flex-end;
  background-image:linear-gradient(145deg,#DCEAF5,#C1DCF4 55%,#A8C8E2);
}
.spm .media--warm{background-image:linear-gradient(145deg,#EFEAE2,#DBD1C3 55%,#C3B7A5);}
.spm .media > span{
  position:relative;z-index:2;margin:14px;padding:5px 9px;background:rgba(255,255,255,.9);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--petrol);font-weight:500;
}
.spm .r-sq{aspect-ratio:1/1;}
.spm .r-45{aspect-ratio:4/5;}
.spm .r-169{aspect-ratio:16/9;}

.spm .media img{width:100%;height:100%;object-fit:cover;display:block;}
.spm .media:has(img){background-image:none;}

/* ---------- Wohntypen: aufklappbar ---------- */
.spm .types{display:grid;gap:34px;margin-top:34px;}
.spm .type{border-bottom:1px solid var(--line);padding-bottom:22px;}
.spm .type:last-child{border-bottom:0;}
.spm .type .h3{margin:16px 0 6px;}
.spm .type__lead{color:var(--ink-60);font-size:15px;line-height:1.55;margin:0;}
.spm .type details{border:0;margin-top:4px;}
.spm .type details summary{
  padding:12px 0;font-size:14px;font-weight:500;color:var(--petrol);
  display:flex;align-items:center;gap:9px;min-height:44px;
}
.spm .type details summary::after{
  position:static;width:9px;height:9px;top:auto;right:auto;
  border:var(--hair) solid var(--petrol);border-left:0;border-top:0;
  transform:rotate(45deg);margin-top:-4px;
}
.spm .type details[open] summary::after{transform:rotate(-135deg);margin-top:2px;}
.spm .type details p{padding:0 0 4px;font-size:15px;line-height:1.6;color:var(--ink-60);}
.spm .type details p:last-child{padding-bottom:14px;}

/* ---------- Ihre Situation ---------- */
.spm .sit__list,
.spm ul.sit__list.wp-block-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px;}
.spm .sit__list li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;}
.spm .sit__list li::before{content:"";width:13px;height:13px;flex:0 0 auto;margin-top:6px;border:var(--hair) solid var(--petrol);border-right:0;}
.spm .sit__close{margin-top:24px;font-size:17px;line-height:1.55;}

/* ---------- Schreibschrift ----------
   Außerhalb des Logos genau ZWEIMAL: Signatur "Über uns"
   und die Zeile über der Kontakt-Überschrift. */
.spm .hand{
  font-family:var(--font-script);font-weight:500;
  color:var(--petrol);font-size:27.2px;line-height:1.25;
  display:block;
}
.spm .sec-deep .hand{color:var(--ice);}
.spm .signature{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.spm .signature .hand{font-size:29.6px;margin-bottom:4px;}
.spm .signature .signature__name{font-size:13px;color:var(--ink-60);letter-spacing:.04em;margin:0;}

/* ---------- HERO ----------
   Hintergrund in --soft, damit die Fläche unter dem weißen Kasten dieselbe
   helle Blaufärbung trägt wie der Projektgeschichte-Block. Der Kasten selbst
   bleibt reinweiß und setzt sich dadurch ab. */
.spm .hero--big{padding:0 0 30px;background:var(--soft);}
/* Bildhöhe und Überlappung ändern sich immer gemeinsam: Wird das Bild
   um X höher, wächst der negative Rand des weißen Kastens um dasselbe X.
   Dadurch bleibt der Kasten an Ort und Stelle und es steht schlicht mehr
   Bild dahinter. */
.spm .heroB__media{width:100%;height:clamp(290px,42vh,400px);}
/* Selektor bewusst mit dem Elternteil: WordPress' Global Styles setzen
   :root :where(.is-layout-flow) > :first-child{margin-block-start:0}
   — dieselbe Spezifität wie .spm .heroB__box, und sie laden danach.
   Der Kasten ist erstes Kind im Wrapper, also wurde genau hier der
   negative Rand plattgemacht und die Überlappung ins Hero-Bild fiel weg.
   Andere Overlay-Kästen sind nicht erstes Kind und deshalb nicht betroffen. */
.spm .spm-wrap > .heroB__box{
  position:relative;z-index:2;
  margin:-96px 0 0;padding:24px 20px 26px;
}
.spm .heroB__box .h1{margin:0;}
.spm .heroB__box .ort{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-60);}

/* Seitenkopf der Unterseiten (.hero--small): gleiche Bildhöhe und
   Überlappung wie die Startseite, auf Wunsch von Arne (21.10.2026).
   Die Klasse bleibt im Markup als Haken für spätere Abweichungen,
   trägt derzeit aber keine eigenen Regeln.

   Variante .hero--fill (zuschaltbar, Probe auf „Ihr Bad“, 22.10.2026):
   Das Bild füllt den ganzen Kopfbereich, der Kasten liegt darauf.
   Gilt in allen Breiten; Bildhöhe und Kastenabstand wachsen in den Media
   Queries unten mit. Kunde entscheidet, ob alle Unterseiten sie bekommen.

   Bild und Kasten liegen im selben Rasterfeld. Das Bild steht absolut im
   Figure, damit seine eigene Höhe das Feld nicht aufbläht; die Höhe ergibt
   sich aus Kasten plus Rändern, mindestens min-height. Im Editor trägt das
   Bild inline height:auto und Astras Editor-Stil gibt dem Figure 1em Rand
   (0,3,0, lädt später) — daher min-/max-height und .media am Figure.
   Als Rasterkind schrumpft der Wrapper auf Kastenbreite und seine auto-Ränder
   zentrieren ihn — width:100% hält den Kasten an der Inhaltskante. */
/* .hero davor: .spm .hero--big{padding-bottom} in den Media Queries steht
   später in der Datei und schlüge sonst bei gleicher Spezifität zu. */
.spm .hero.hero--fill{display:grid;padding-bottom:0;}
.spm .hero--fill > *{grid-area:1/1;margin-block:0;}
.spm .hero--fill > .spm-wrap{width:100%;}
.spm .hero--fill > .heroB__media.media{position:relative;height:auto;min-height:clamp(290px,42vh,400px);margin:0;}
.spm .hero--fill > .heroB__media img{position:absolute;inset:0;width:100%;height:100%;min-height:100%;max-height:100%;}
.spm .hero--fill .spm-wrap > .heroB__box{margin:clamp(180px,30vh,240px) 0 32px;}
.spm .heroB__box .eyebrow{margin-bottom:12px;}
.spm .heroB__box .wp-block-buttons{margin-top:6px;}

/* ---------- Buttons ----------
   Aussehen, Padding, Radius, Rahmen und Schrift kommen aus Astra
   (Customizer → Buttons, und Astra Pro → Sekundärer Button für die
   Umriss-Variante). Bewusst NICHT hier überschrieben: Astra gibt dafür
   dynamisches CSS mit hoher Spezifität aus, gegen das anzuschreiben
   dauerhaft Ärger macht. Wer das Aussehen ändern will, tut das im
   Customizer — dann ziehen Header, Footer und Seiteninhalt gemeinsam mit.

   Hier bleibt nur, was Astra nicht ausdrücken kann: die Umkehrung auf
   dem Petrol-Hintergrund. Dafür gibt es in Astra keine Variante. */
.spm .sec-deep .wp-block-button__link{background:#fff;color:var(--petrol);border-color:#fff;}
.spm .sec-deep .wp-block-button__link:hover{background:var(--ice);border-color:var(--ice);color:var(--petrol);}
.spm .sec-deep .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.6);
}
.spm .sec-deep .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:#fff;color:var(--petrol);border-color:#fff;
}

/* Über die volle Breite (im Entwurf .btn--full) */
.spm .wp-block-button.spm-full,
.spm .wp-block-button.spm-full .wp-block-button__link{width:100%;}

.spm .tlink-p{margin:0;}
.spm .tlink-p a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--petrol);min-height:44px;
}
.spm .tlink-p a::after{
  content:"";width:8px;height:8px;
  border:var(--hair) solid currentColor;border-left:0;border-bottom:0;
  transform:rotate(45deg);
}
.spm .sec-deep .tlink-p a{color:#fff;}

/* ---------- Kennzahlen / Trust-Leiste ---------- */
/* Die Trust-Leiste ist ein schmales Band, kein Abschnitt. Sie muss das
   Abschnitts-Padding von .spm-sec loswerden — auch das aus den Media
   Queries weiter unten. Deshalb hier bewusst mit beiden Klassen
   (höhere Spezifität), sonst gewinnt ab 700px wieder die 88px-Regel. */
.spm .spm-sec.facts{padding:0;}
.spm .facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.spm .facts ul{
  list-style:none;margin:0;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 16px;padding:9px 0;
  line-height:1.3;
}
/* core/list ergänzt eine eigene Klasse — Aufzählungspunkte weg */
.spm .facts ul.wp-block-list{list-style:none;padding-left:0;}
.spm .facts li{display:flex;align-items:baseline;gap:6px;white-space:nowrap;}
.spm .facts li + li{padding-left:16px;border-left:1px solid var(--line);}
.spm .facts b{font-size:15px;font-weight:500;color:var(--petrol);letter-spacing:.005em;}
.spm .facts span{font-size:12px;color:var(--ink-60);}

/* ---------- Zitat ---------- */
/* Die vertikale Linie am Zitat kommt ursprünglich von Astra
   (.wp-block-quote:not(...):not(...) mit 5px rgba(0,0,0,.05), drei Klassen
   Spezifität — deshalb greift ein einfaches border:0 hier nicht).

   Sie bleibt, wird aber Teil der Formensprache: Haarlinie in Eisblau und
   14px Abstand zum Text — exakt Rahmen und Innenabstand der FAKTEN-Kästen.
   Dadurch stehen Zitat und FAKTEN dort, wo sie untereinander liegen, auf
   einer Kante. Vorher klebte der Text direkt an der Linie. */
/* Rahmen, Innenabstand und Abstand nach oben liegen bewusst NICHT hier,
   sondern als Block-Einstellungen am Zitat selbst (style.border /
   style.spacing in den Vorlagen).

   Grund: Astras Editor-Stylesheet setzt
   .editor-styles-wrapper .wp-block-quote:not(...):not(...){border-left:5px}
   mit vier Klassen Spezifität und lädt nach dieser Datei. Eine Regel hier
   verlor im Backend und gewann im Frontend — daher der 5px-Balken im
   Editor bei 1.5px im Frontend. Als Inline-Style vom Block gewinnt der
   Wert in beiden Umgebungen, und die Redaktion kann ihn in der
   Seitenleiste unter „Rahmen" ändern.

   Hier bleibt nur die Typografie. */
.spm .quote p{font-style:italic;font-weight:400;font-size:19.2px;line-height:1.42;margin:0 0 10px;}
.spm .quote cite{font-style:normal;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-60);}
.spm .sec-deep .quote cite{color:rgba(255,255,255,.72);}

/* (Der frühere Sonderfall .fakten + .quote entfällt — die allgemeine
   Zitat-Regel weiter oben deckt die Ausrichtung jetzt überall ab.) */

/* ---------- Karten / wischbare Bahnen ---------- */
.spm .rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 calc(var(--pad)*-1);padding:4px var(--pad) 8px;scrollbar-width:none;
}
/* Ohne scroll-padding rastet die erste Karte an der Bildschirmkante ein:
   scroll-snap-align:start richtet am Rand des Scrollbereichs aus, nicht am
   Innenabstand. Der Browser scrollte die Bahn deshalb beim Laden um 20px
   und die Karten klebten links ohne Rand. */
.spm .rail{scroll-padding-inline:var(--pad);}
.spm .rail::-webkit-scrollbar{display:none;}
.spm .rail > *{scroll-snap-align:start;}
.spm .railhint{font-size:12px;color:var(--ink-60);letter-spacing:.05em;text-transform:uppercase;margin-top:4px;}
.spm .card .h3{margin:14px 0 6px;}
/* Die Karten sind Grid-Kinder und damit alle gleich hoch. Damit der
   Textlink am Fuß bei allen auf einer Linie steht — auch wenn die
   Beschreibungen unterschiedlich lang sind — wird er nach unten
   geschoben statt direkt an den Text gehängt. */
.spm .card{display:flex;flex-direction:column;}
.spm .card .tlink-p{margin-top:auto;padding-top:10px;}


/* ---------- Zeilenlänge ----------
   Der Entwurf begrenzt die Textbreite je Absatz über max-width in ch —
   ohne das laufen die Zeilen auf dem Desktop über die volle Spaltenbreite
   und werden unlesbar lang. Als Klasse im Editor änderbar
   (Block → Erweitert → Zusätzliche CSS-Klasse). */
.spm .mw-42{max-width:42ch;}
.spm .mw-44{max-width:44ch;}
.spm .mw-46{max-width:46ch;}
.spm .mw-48{max-width:48ch;}
.spm .mw-52{max-width:52ch;}
.spm .mw-56{max-width:56ch;}

/* Abstände, die im Entwurf ebenfalls inline standen */
.spm .rail{margin-top:36px;}
.spm .rail--3{margin-top:40px;}

/* ---------- Ablauf ---------- */
.spm .steps{margin:26px 0 0;}
.spm .step{display:flex;gap:16px;padding-bottom:28px;position:relative;}
.spm .step:last-of-type{padding-bottom:0;}
.spm .step::before{content:"";position:absolute;left:21px;top:50px;bottom:6px;width:1px;background:rgba(255,255,255,.28);}
.spm .step:last-of-type::before{display:none;}
.spm .stepn{
  width:44px;height:44px;flex:0 0 auto;margin:0;
  border:var(--hair) solid var(--ice);border-right:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;color:var(--ice);
}
/* Titel auf Hoehe der Zahl: so hoch wie der Zahlenkasten, Text darin mittig.
   Der Beschreibungstext beginnt dadurch an der Unterkante des Kastens. */
.spm .step .h3{min-height:44px;display:flex;align-items:center;}

/* ---------- FAQ und Wohntypen: natives <details> ---------- */
.spm details{border-bottom:1px solid var(--line);}
.spm .faq details:first-of-type{border-top:1px solid var(--line);}
.spm summary{
  list-style:none;cursor:pointer;padding:17px 40px 17px 0;position:relative;
  font-weight:500;font-size:16px;line-height:1.4;
}
.spm summary::-webkit-details-marker{display:none;}
.spm summary::after{
  content:"";position:absolute;right:8px;top:23px;width:11px;height:11px;
  border:var(--hair) solid var(--petrol);border-left:0;border-top:0;
  transform:rotate(45deg);transition:transform .2s ease;
}
.spm details[open] summary::after{transform:rotate(-135deg);top:27px;}
.spm details p{padding:0 0 18px;color:var(--ink-60);font-size:15px;margin:0;}
.spm .faq{max-width:840px;margin:0 auto;}

/* ---------- Kontakt: Ansprechpartner ---------- */
.spm .person{display:flex;gap:14px;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28);}
.spm .person .ph{
  width:56px;height:56px;flex:0 0 auto;
  border:var(--hair) solid rgba(255,255,255,.55);border-right:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);
  overflow:hidden;
}
.spm .person .ph img{width:100%;height:100%;object-fit:cover;}
.spm .person p{margin:0;}
.spm .person .person__name{font-weight:500;color:#fff;}

/* Platzhalter für das Forminator-Formular */
.spm .formslot{
  border:var(--hair) dashed rgba(255,255,255,.45);
  padding:22px;min-height:220px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:14px;color:rgba(255,255,255,.75);
}

/* ---------- Unterseiten: Galerie, Beitragslisten, Fließtext ----------
   Galerie und Query-Liste sind Core-Blöcke; Spalten, Zuschnitt und
   Seitenverhältnis stehen als Block-Einstellung im Inhalt. Hier nur der
   Abstand zur Überschrift und die Typografie im Raster. */
.spm .wp-block-gallery.spm-galerie{margin-top:32px;}
.spm .spm-query{margin-top:32px;}
.spm .spm-posts{gap:32px;}
/* Spaltenzahl: Der Block legt sein Raster mit columnCount fest (3 oder 4)
   und gibt es ab 600px unverändert aus — vier Spalten bei 768px waren
   je ~100px schmal. Mobil eine, ab 700px zwei, ab 1000px die gewählte
   Zahl (Klasse spm-posts--N, gesetzt von _build/bausteine.py). */
.spm .spm-posts.is-layout-grid{grid-template-columns:minmax(0,1fr);}
.spm .spm-posts .wp-block-post-featured-image{margin:0;}
.spm .spm-posts .wp-block-post-title{margin:14px 0 6px;}
/* Wie bei den Karten: Link „Weiterlesen" am Fuß, auf einer Linie, auch wenn
   die Auszüge unterschiedlich lang sind. */
.spm .spm-posts > li{display:flex;flex-direction:column;}
.spm .spm-posts .wp-block-post-excerpt{flex:1 1 auto;display:flex;flex-direction:column;}
.spm .spm-posts .wp-block-post-excerpt__more-text{margin-top:auto;margin-bottom:0;}
.spm .spm-posts .wp-block-post-excerpt__more-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-size:14px;font-weight:500;color:var(--petrol);min-height:44px;
}
/* Zwischenüberschrift direkt nach FAKTEN-Kästen (Küchenplanung, Projekt-
   Steckbrief): .spm .wp-block-heading setzt margin:0, sonst klebt sie am Kasten. */
.spm .fakten + .wp-block-heading{margin-top:28px;}
.spm .prose{max-width:72ch;}
.spm .prose h2{margin:36px 0 10px;}
.spm .prose h3{margin:26px 0 8px;}
.spm .prose > :first-child{margin-top:0;}
.spm .prose p,.spm .prose li{color:var(--ink-60);}
.spm .prose ul{margin:0 0 1em;padding-left:1.2em;}

/* ---------- Einblenden beim Scrollen ----------
   Versteckt wird NUR, wenn JavaScript läuft (html.spm-js wird in
   functions.php früh im <head> gesetzt). Fällt das Skript aus, bleibt
   der Inhalt sichtbar — sonst wäre die halbe Seite dauerhaft leer. */
.spm-js .spm .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.spm-js .spm .reveal.in{opacity:1;transform:none;}

/* ==========================================================
   Block-Styles
   Damit die Motive im Editor über "Stile" wählbar sind, statt
   dass jemand Klassennamen von Hand eintippen muss.
   Die registrierten Namen stehen in functions.php.

   Jedes Motiv steht ab hier GENAU EINMAL da, und zwar unter
   is-style-*. Vorher gab es zu jedem eine zweite Fassung unter
   einem handgetippten Klassennamen (.frame, .quote--box,
   .rhomb) — gleiche Optik, eigene Regeln, keine davon benutzt.
   Wer eine änderte, änderte die Seite nur zur Hälfte.

   MOTIV "Offener Rahmen" (is-style-spm-frame)
   Aus der Bildmarke: zwei L-Winkel oben rechts und unten links,
   etwas ausserhalb des Elements. Er umschliesst das Bild nicht,
   er deutet es an. Die früheren Farbvarianten .frame--petrol
   und .frame--white sind weggefallen: was nicht im Stilmenü
   steht, kann der Kunde nicht wählen. Wird eine zweite Farbe
   gebraucht, ist das ein weiteres register_block_style plus
   eine Zeile hier.

   NICHT verwechseln mit dem Rahmen am Film — der kommt aus dem
   Video-Block selbst (spm-video--frame-*) und ist unabhängig.

   MOTIV "Weisser Kasten" (is-style-spm-quote-box)
   Ein Zitat, das 46px nach oben gezogen wird und dadurch zur
   Hälfte über dem Bild darüber liegt.

   Der Rautenakzent und die kurze Linie stehen weiter oben bei
   den Trennern, weil sie hr-Elemente brauchen und dort in den
   Zusammenhang gehören.
   ========================================================== */
.spm .is-style-spm-frame{position:relative;}
.spm .is-style-spm-frame::before,
.spm .is-style-spm-frame::after{
  content:"";position:absolute;pointer-events:none;
  border:var(--hair) solid var(--ice);width:54%;height:56%;
}
.spm .is-style-spm-frame::before{top:-16px;right:-14px;border-left:0;border-bottom:0;}
.spm .is-style-spm-frame::after{bottom:-16px;left:-14px;border-right:0;border-top:0;}

.spm .is-style-spm-sec-soft{background:var(--soft);}

.spm .is-style-spm-quote-box{
  background:#fff;color:var(--ink);padding:22px 24px;margin:-46px 10px 0;
  position:relative;z-index:2;border:0;
}
.spm .is-style-spm-quote-box cite{color:var(--ink-60);}

/* ==========================================================
   ab 700px
   ========================================================== */
@media (min-width:700px){
  .spm{--pad:40px;}
  .spm .spm-sec{padding:88px 0;}
  .spm .intro{font-size:19px;}
  /* Bewusst nur minimal mehr Luft als auf Mobil — die Leiste soll ein
     schmales Band bleiben und nicht als eigener Abschnitt wirken. */
  /* Gleichmäßig verteilt UND die Trennstriche mittig.

     Nicht über justify-content:space-between — dabei sitzt der Strich am
     linken Rand des folgenden Eintrags und klebt an dessen Text, während
     davor die ganze Lücke steht.

     Stattdessen wächst jeder Eintrag um denselben Anteil des freien
     Raums und zentriert seinen Inhalt darin. Der Strich liegt am
     Kastenrand, links und rechts davon also je die halbe Wachstums-
     breite — damit exakt in der Mitte zwischen zwei Texten.

     Erster und letzter Eintrag wachsen nur halb (flex-grow .5) und
     richten sich nach außen aus. Dadurch fällt ihr Zuwachs komplett
     nach innen, die Außenkanten bleiben bündig, und auch der erste und
     letzte Zwischenraum ist genauso groß wie die übrigen. */
  .spm .facts ul{gap:0;padding:10px 0;flex-wrap:nowrap;}
  .spm .facts li{flex:1 1 auto;justify-content:center;}
  .spm .facts li:first-child{flex-grow:.5;justify-content:flex-start;}
  .spm .facts li:last-child{flex-grow:.5;justify-content:flex-end;}
  .spm .facts li + li{padding-left:0;}
  .spm .rail{display:grid;grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:32px;overflow:visible;margin:0;padding:0;}
  /* Fünf Karten (rail--5): 3 + 2 statt 2 + 2 + 1. */
  .spm .rail--5{grid-template-columns:repeat(3,1fr);}
  .spm .railhint{display:none;}
  .spm .fakten{grid-template-columns:repeat(3,1fr);}
  /* Kästen mit ganzen Sätzen (Städteseiten) bleiben untereinander —
     drei Spalten in einer halben Seitenbreite wären je ~150px schmal. */
  .spm .fakten.fakten--stack{grid-template-columns:1fr;}
  /* Vier Kästen: 2 × 2 statt 3 + 1 */
  .spm .fakten.fakten--4{grid-template-columns:repeat(2,1fr);}
  .spm .spm-posts.is-layout-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  .spm .hero--big{padding:0 0 40px;}
  .spm .heroB__media{height:clamp(360px,50vh,530px);}
  .spm .spm-wrap > .heroB__box{max-width:600px;margin:-246px 0 0;padding:32px 36px 34px;}
  .spm .hero--fill > .heroB__media.media{min-height:clamp(360px,50vh,530px);}
  .spm .hero--fill .spm-wrap > .heroB__box{margin:clamp(150px,22vh,220px) 0 48px;}
  .spm .is-style-spm-quote-box{margin:-58px 40px 0;padding:26px 30px;}
  .spm .types{grid-template-columns:repeat(3,1fr);gap:32px;}
  .spm .type{border-bottom:0;padding-bottom:0;}
  /* Selektor so gewichtig wie die Grundregel .spm ul.sit__list.wp-block-list —
     als .spm .sit__list verlor der Abstand gegen deren gap:2px, die Spalten
     standen 2px auseinander. */
  .spm ul.sit__list.wp-block-list{grid-template-columns:1fr 1fr;gap:0 32px;}
}

/* ==========================================================
   ab 1000px
   ========================================================== */
@media (min-width:1000px){
  .spm{--pad:56px;}
  .spm .h1{line-height:1.08;}
  .spm .h1 .nb{white-space:nowrap;}
  .spm .heroB__media{height:clamp(420px,62vh,620px);}
  .spm .spm-wrap > .heroB__box{max-width:720px;margin:-312px 0 0;padding:38px 46px 40px;}
  .spm .hero--fill > .heroB__media.media{min-height:clamp(420px,62vh,620px);}
  .spm .hero--fill .spm-wrap > .heroB__box{margin:clamp(180px,26vh,260px) 0 56px;}
  /* align-items:start, nicht center.
     Die vertikale Sektionsbeschreibung (.margin-note) haengt absolut am
     oberen Rand des Wrappers. Bei zentrierten Spalten rutscht die
     kuerzere Spalte nach unten — im Ablauf-Abschnitt um 98px — und die
     Beschreibung stand dann sichtbar hoeher als der Inhalt.
     Zentriert sah es nur dort richtig aus, wo beide Spalten zufaellig
     aehnlich hoch sind; sobald sich Text oder Bild aendern, verrutscht
     es wieder. Oben buendig ist vorhersagbar. */
  .spm .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
  /* Nebeneinander beginnt die Anlaesse-Liste auf Hoehe des Intro-Textes;
     die 20px Abstand gelten nur gestapelt (unter 1000px). Selektor so
     gewichtig wie die Grundregel .spm ul.sit__list.wp-block-list plus Elternteil. */
  .spm .split > ul.sit__list.wp-block-list{margin-top:0;}
  .spm .rail{grid-template-columns:repeat(4,1fr);gap:28px;}
  .spm .rail--3{grid-template-columns:repeat(3,1fr);}
  .spm .rail--5{grid-template-columns:repeat(5,1fr);gap:24px;}
  .spm .fakten.fakten--4{grid-template-columns:repeat(4,1fr);}
  .spm .spm-posts--3.is-layout-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .spm .spm-posts--4.is-layout-grid{grid-template-columns:repeat(4,minmax(0,1fr));}

  /* Marginalie wie im Magazin.
     left:5px statt -4px — sie hing bisher 4px über die linke Kante des
     Wrappers hinaus und stand damit 96px vom Fensterrand. Jetzt 5px
     innerhalb der Kante. */
  .spm .margin-note{
    display:block;position:absolute;left:5px;top:0;
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-size:11px;letter-spacing:.1em;color:var(--ink-60);
  }
  .spm .sec-deep .margin-note{color:rgba(255,255,255,.6);}
  .spm .spm-wrap{padding-left:76px;}
  /* Die Trust-Leiste behält bewusst dieselbe Einrückung wie alle anderen
     Abschnitte (76px links) — nur so steht ihr erster Eintrag auf der
     Kante des weißen Hero-Kastens darüber. Die frühere Rücknahme auf
     var(--pad) war für die zentrierte Fassung nötig und ist es nicht mehr. */
}

@media (prefers-reduced-motion:reduce){
  .spm *{transition:none!important;animation:none!important;}
  .spm-js .spm .reveal{opacity:1;transform:none;}
}