/* ──────────────────────────────────────────────────────────────────────────
   Startseite, Fassung vom 11.10.2026 (Phil, 01:52: „Teilweise hast du hier nichts
   geändert"). Eigene Regeln mit Präfix sx-, damit stil.css unberührt bleibt.
   Leitlinie wie eine Produktseite: ein Gedanke je Abschnitt, Bild und Text teilen
   sich die Höhe, Seiten wechseln, Weiß und Hellblau wechseln, keine gleichförmigen
   Karten, keine Symbole. Kein Bild über 90 % der Bildschirmhöhe.
   Unverändert aus stil.css: Auftakt, Preisblock, Firmenkunden, Kontakt.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Auftakt mit sichtbarer Botschaft (12.10.2026, Prüfbericht, von Phil freigegeben) ──
   Vorher war die h1 nur für Vorleseprogramme da, und im ersten Bildschirm stand kein Satz,
   was man hier bekommt. Jetzt: Logo kleiner, darunter Titel und ein Satz, dann die Knöpfe
   und ein leiser Link zu den Mustern. Text bleibt links auf der hellen Bildfläche, damit er
   nicht über das Modell läuft; Größen hängen am Raster wie beim alten Auftakt. */
.start-logo__rauten { width: clamp(52px, 4.6vw, 92px); }
.start-logo__wort { font-size: clamp(2.2rem, 4.1vw, 4.9rem); }
.start-auftakt .start-auftakt__h1 {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  margin-top: clamp(26px, 2.8vw, 52px); max-width: min(44%, 13em);
  color: var(--tinte); font-weight: 360; letter-spacing: -.036em; line-height: 1.04; text-wrap: balance;
  font-size: clamp(2.1rem, 3.3vw, 4rem);
  opacity: 0; transform: translateY(14px); animation: st-auf .9s var(--weich) forwards; animation-delay: calc(.2s + var(--i) * .22s);
}
.start-auftakt__satz {
  margin-top: clamp(14px, 1.4vw, 24px); max-width: min(42%, 27em);
  color: var(--text); font-size: clamp(1.0625rem, 1.2vw, 1.375rem); line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty;
  opacity: 0; transform: translateY(14px); animation: st-auf .9s var(--weich) forwards; animation-delay: calc(.2s + var(--i) * .22s);
}
.start-auftakt__knoepfe { align-items: center; }
/* Zusatz unter dem Knopfnamen („Eine Wohnung"): nur am Handy sichtbar, siehe unten. */
.knopf__zusatz { display: none; }
.start-auftakt__muster {
  padding: 10px 6px; font-size: 1rem; font-weight: 500; color: var(--tinte);
  text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 6px;
}
.start-auftakt__muster:hover { color: var(--akzent-dunkel); }
@media (prefers-reduced-motion: reduce) { .start-auftakt .start-auftakt__h1, .start-auftakt__satz { animation: none; opacity: 1; transform: none; } }
/* PC seit 14.10.2026 (Phil): volle Höhe statt 82 %, und das Bild beginnt unter der Kopfleiste, weil
   sonst das Dach dahinter verschwand. In breiten Fenstern schneidet cover oben und unten ab; das Haus
   steht zwischen 8 und 76 % der Bildhöhe, mit 24 % bleibt es bis etwa 2,5 : 1 ganz sichtbar. */
@media (min-width: 901px) {
  .start-auftakt {
    min-height: calc(100vh - var(--kopf-oben, var(--kopf)) + var(--kopf));
    min-height: calc(100svh - var(--kopf-oben, var(--kopf)) + var(--kopf));
  }
  .start-auftakt__bild { inset: var(--kopf) 0 0 0; }
  .start-auftakt__bild img { object-position: 62% 24%; }
}

/* Gemeinsame Maße der neuen Abschnitte: etwas dichter als .abschnitt, damit die
   Seite kürzer wirkt; Überschriften hängen am Raster, nicht am Fenster. */
.sx-wege.abschnitt, .sx-ansichten.abschnitt, .sx-muster.abschnitt, .sx-ablauf.abschnitt { padding-block: clamp(60px, 6.5vw, 128px); }
.sx-duo.abschnitt { padding-block: clamp(48px, 5vw, 96px); }
/* Direkt nach dem Preisblock (beide weiß): die Abstände addierten sich zu rund 250 px Leere (Review 21.10.2026). */
#preis + .sx-duo.abschnitt { padding-top: clamp(8px, 1.2vw, 28px); }
.sx-wege .t-gross, .sx-ansichten .t-gross, .sx-muster .t-gross, .sx-ablauf .t-gross {
  margin-top: 12px;
  font-size: clamp(1.9rem, min(3.3vw, 6.4svh, calc(var(--raster) / 24)), 4.25rem);
}
.sx-etikett { font-size: .75rem; line-height: 1.3; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.sx-pfeil { display: inline-flex; align-items: center; gap: 8px; color: var(--akzent); font-weight: 550; text-decoration: none; }
.sx-pfeil:hover { color: var(--akzent-dunkel); }
.sx-pfeil svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--weich); }
.sx-pfeil:hover svg { transform: translateX(3px); }

/* ── Zwei Wege: links der Gedanke, rechts zwei Bildschirmfotos, das zweite versetzt ── */
.sx-wege__innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 40px; align-items: start; }
.sx-wege__kopf { grid-column: 1 / span 4; padding-top: clamp(0px, 2vw, 32px); }
.sx-wege__kopf .t-text { margin-top: 18px; }
.sx-weg { grid-column: 5 / span 4; }
.sx-weg--versetzt { grid-column: 9 / span 4; margin-top: clamp(24px, 3vw, 56px); }
.sx-weg__bild { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--linie); background: var(--band); box-shadow: 0 34px 60px -44px rgba(16, 24, 32, .45); }
.sx-weg__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .6s var(--weich); }
.sx-weg__bild:hover img { transform: scale(1.02); }
.sx-weg .sx-etikett { margin-top: 20px; }
.sx-weg h3 { margin: 6px 0 8px; color: var(--tinte); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(1.375rem, 1.8vw, 2rem); }
.sx-weg p:not(.sx-etikett) { font-size: 1rem; max-width: 30em; text-wrap: pretty; }
.sx-weg .sx-pfeil { margin-top: 12px; }

/* ── Ansichten: ein Band gleich hoher Stücke, jedes in seinem Seitenverhältnis ────── */
.sx-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 18px; align-items: end; }
.sx-kopf > :first-child { grid-column: 1 / span 7; }
.sx-kopf > :last-child { grid-column: 9 / span 4; }
.sx-band {
  /* Summe der Seitenverhältnisse: Grundriss 1,03 + Modell 1,5 + Schieber 0,75 + Lage 1 + PDF 1,416 */
  --luecke: clamp(12px, 1.1vw, 20px);
  /* Seit 02:30: sieben Stücke in zwei Reihen, Höhe aus der ersten Reihe (Grundriss, Modell, Schieber, Lage = 4,28) */
  --h: calc((var(--raster) - 3 * var(--luecke)) / 4.28);
  display: flex; flex-wrap: wrap; gap: clamp(22px, 2.2vw, 36px) var(--luecke); align-items: flex-start; margin-top: clamp(28px, 3.4vw, 56px);
}
.sx-band__stueck { flex: none; width: calc(var(--r) * var(--h)); margin: 0; }
.sx-band__stueck--plan { --r: 1.03; }
.sx-band__stueck--modell { --r: 1.5; }
.sx-band__stueck--schieber { --r: .75; }
.sx-band__stueck--lage { --r: 1; }
.sx-band__stueck--pdf { --r: 1.416; }
.sx-band__stueck--fotos { --r: 1.333; }
.sx-band__stueck--vorort { --r: 1.49; }
/* Seit 21.10.2026 ohne das Fotostück: Die zweite Reihe (PDF 1,416 + Vor Ort 1,49 = 2,906) bekommt ihre eigene Höhe,
   damit sie die Breite wieder füllt statt rechts eine Lücke zu lassen. */
@media (min-width: 1101px) {
  .sx-band { --h2: calc((var(--raster) - var(--luecke)) / 2.906); }
  .sx-band__stueck--pdf, .sx-band__stueck--vorort { width: calc(var(--r) * var(--h2)); }
  .sx-band__stueck--pdf .sx-band__feld, .sx-band__stueck--vorort .sx-band__feld { height: var(--h2); }
}
.sx-band__feld { position: relative; height: var(--h); overflow: hidden; border-radius: 6px; border: 1px solid var(--linie); background: var(--band-hell); }
.sx-band__feld > img { width: 100%; height: 100%; object-fit: cover; }
.sx-band__stueck--plan .sx-band__feld { background: #fff; }
.sx-band__stueck--plan .sx-band__feld > img { object-fit: contain; padding: 4%; }
.sx-band__stueck--lage .sx-band__feld { border: 0; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px var(--linie); }
.sx-band__stueck--lage .sx-band__feld > img { object-fit: contain; }
.sx-band__stueck--pdf .sx-band__feld > img { object-position: top; }
/* Der Schieber aus stil.css bringt eine Mindesthöhe von 300 px mit; im Band zählt --h. */
.sx-band .schieber { min-height: 0; height: var(--h); }
.sx-band .schieber .zuglinie i { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.sx-band .schieber .zuglinie svg { width: 18px; height: 18px; }
.sx-band__marke { position: absolute; top: 10px; z-index: 4; padding: 3px 8px; border-radius: 3px; background: rgba(255, 255, 255, .92); font-size: .75rem; line-height: 1.3; color: var(--tinte); pointer-events: none; }
.sx-band__marke--links { left: 10px; }
.sx-band__marke--rechts { right: 10px; }
.sx-band figcaption { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.sx-band figcaption b, .sx-band figcaption a { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); text-decoration: none; }
.sx-band figcaption a::after { content: ' \2192'; }
.sx-band figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-band figcaption span { font-size: .875rem; line-height: 1.45; color: var(--text); text-wrap: pretty; }

/* ── Muster: Liste mit Haarlinie, kleines Vorschaubild je Zeile ───────────────────── */
.sx-muster__innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 32px; align-items: center; }
.sx-muster__kopf { grid-column: 1 / span 4; }
.sx-muster__kopf .t-text { margin-top: 18px; }
.sx-muster__liste { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.sx-muster__liste li { display: grid; grid-template-columns: clamp(132px, 11vw, 210px) minmax(0, 1fr) auto; gap: clamp(16px, 2vw, 32px); align-items: center; padding: 16px 0; border-top: 1px solid var(--linie); }
.sx-muster__liste img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--linie); background: #fff; }
.sx-muster__liste div { display: grid; gap: 3px; min-width: 0; }
.sx-muster__liste small { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); }
.sx-muster__liste b { font-weight: 550; letter-spacing: -.012em; font-size: clamp(1.0625rem, 1.15vw, 1.25rem); }
.sx-muster__liste em { font-style: normal; font-size: .8125rem; color: var(--leise); overflow-wrap: anywhere; }
.sx-muster__liste .knopf { min-height: 44px; padding: 9px 18px; font-size: .9375rem; }

/* ── Fotos und Am Objekt: zwei kurze Verweise, gespiegelt, Haarlinie dazwischen ───── */
.sx-duo__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sx-kurz { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(18px, 2vw, 36px); align-items: center; padding-right: clamp(24px, 3.4vw, 72px); }
.sx-kurz--rechts { padding-right: 0; padding-left: clamp(24px, 3.4vw, 72px); border-left: 1px solid var(--linie); }
.sx-kurz--rechts > img { order: 2; }
.sx-kurz > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie-fein); }
/* Feste Zellen: Bild und KI-Kennzeichen teilen sich eine, der Text steht in der anderen (stil.css, .ki-hinweis). */
.sx-kurz > img, .sx-kurz > .ki-hinweis { grid-column: 1; grid-row: 1; }
.sx-kurz > div { grid-column: 2; grid-row: 1; }
.sx-kurz--rechts > img, .sx-kurz--rechts > .ki-hinweis { grid-column: 2; }
.sx-kurz--rechts > div { grid-column: 1; }
.sx-kurz h2 { margin: 12px 0 10px; color: var(--tinte); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; font-size: clamp(1.5rem, 2vw, 2.375rem); }
.sx-kurz p:not(.ueberzeile) { font-size: .9875rem; text-wrap: pretty; max-width: 26em; }
.sx-kurz .sx-pfeil { margin-top: 14px; }

/* ── Ablauf: links die Schritte, rechts das Material dazu ─────────────────────────── */
.sx-ablauf__innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 40px; align-items: center; }
.sx-ablauf__wort { grid-column: 1 / span 5; }
.sx-schritte { list-style: none; margin: clamp(24px, 2.6vw, 40px) 0 0; padding: 0; border-bottom: 1px solid var(--linie); }
.sx-schritte li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid var(--linie); }
.sx-schritte b { color: var(--akzent); font-weight: 400; letter-spacing: -.03em; line-height: 1; font-size: clamp(1.625rem, 2vw, 2.25rem); }
.sx-schritte h3 { color: var(--tinte); font-weight: 550; letter-spacing: -.015em; font-size: 1.125rem; margin-bottom: 4px; }
.sx-schritte p { font-size: .9375rem; text-wrap: pretty; max-width: 30em; }
.sx-ablauf__bilder { grid-column: 7 / span 6; justify-self: end; width: min(100%, 900px); display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: clamp(12px, 1.2vw, 20px); }
.sx-ablauf__bilder figure { margin: 0; display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.sx-ablauf__bilder figure > div { position: relative; overflow: hidden; border-radius: 6px; border: 1px solid var(--linie); background: #fff; }
.sx-ablauf__bilder figure > div > img { width: 100%; height: auto; }
.sx-ablauf__plan { grid-row: span 2; }
.sx-ablauf__plan > div { background: var(--band-hell) !important; min-height: 240px; }
.sx-ablauf__plan > div > img { position: absolute; inset: 7%; width: 86% !important; height: 86% !important; object-fit: contain; }
.sx-ablauf__bilder figcaption { margin-top: 8px; font-size: .8125rem; color: var(--leise); }
.sx-ablauf__bilder figcaption b { color: var(--akzent); margin-right: 4px; }

/* ── Schmale Fenster ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sx-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "modell modell" "plan schieber" "lage pdf" "vorort vorort"; row-gap: 26px; }
  .sx-band__stueck { width: auto; }
  .sx-band__stueck--modell { grid-area: modell; --a: 3 / 2; }
  .sx-band__stueck--plan { grid-area: plan; --a: 3 / 4; }
  .sx-band__stueck--schieber { grid-area: schieber; --a: 3 / 4; }
  .sx-band__stueck--lage { grid-area: lage; --a: 1; }
  .sx-band__stueck--pdf { grid-area: pdf; --a: 1; }
  .sx-band__stueck--fotos { grid-area: fotos; --a: 4 / 3; }
  .sx-band__stueck--vorort { grid-area: vorort; --a: 2 / 1; }
  .sx-band__feld, .sx-band .schieber { height: auto; aspect-ratio: var(--a); }
}
@media (max-width: 1040px) {
  .sx-wege__kopf { grid-column: 1 / -1; padding-top: 0; }
  .sx-weg { grid-column: 1 / span 6; }
  .sx-weg--versetzt { grid-column: 7 / span 6; margin-top: 48px; }
  .sx-kopf > :first-child, .sx-kopf > :last-child { grid-column: 1 / -1; }
  .sx-muster__kopf, .sx-muster__liste { grid-column: 1 / -1; }
  .sx-duo__innen { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .sx-kurz, .sx-kurz--rechts { padding: 0; border-left: 0; }
  .sx-kurz--rechts { padding-top: 36px; border-top: 1px solid var(--linie); }
  .sx-ablauf__wort, .sx-ablauf__bilder { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
}
@media (max-width: 640px) {
  .sx-weg, .sx-weg--versetzt { grid-column: 1 / -1; margin-top: 0; }
  .sx-muster__liste li { grid-template-columns: 104px minmax(0, 1fr); row-gap: 10px; }
  .sx-muster__liste .knopf { grid-column: 2; justify-self: start; }
  .sx-kurz { grid-template-columns: minmax(0, 1fr); }
  .sx-kurz--rechts > img { order: 0; }
  .sx-kurz > div, .sx-kurz--rechts > div { grid-column: 1; grid-row: 2; }
  .sx-kurz--rechts > img, .sx-kurz--rechts > .ki-hinweis { grid-column: 1; }
  .sx-ablauf__bilder { gap: 10px; }
  .sx-ablauf__plan > div { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .sx-weg__bild img, .sx-pfeil svg { transition: none; } }

/* Ablauf seit 02:35: drei Bilder nebeneinander, gleiche Höhe */
.sx-ablauf__bilder--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.sx-ablauf__bilder--drei figure > div { aspect-ratio: 4 / 3; }
.sx-ablauf__bilder--drei figure > div > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 640px) { .sx-ablauf__bilder--drei { grid-template-columns: 1fr; } }

/* ── Handy, 11.10.2026 (Phil, 03:49): eigene Gestaltung, PC bleibt unberührt ──────────
   Auftakt: seit 13.10.2026 Bild zuerst, siehe unten. „Was in einem Exposé
   steckt": die bedienbaren Schieber über die volle Breite, die Standbilder paarweise. */
@media (max-width: 1040px) {
  /* Das Firmenbild ist ab hier ausgeblendet, seine Kennzeichnung gehört mit weg. */
  .st-firmen__fuss { display: none; }
}
@media (max-width: 900px) {
  /* Auftakt seit 13.10.2026 (Phil wählte Entwurf B aus drei): das Modellfoto zuerst, im
     eigenen Hochformat-Zuschnitt, unten weich ins Weiß ausgeblendet; Titel, Satz und Knöpfe
     rücken in den ausgeblendeten Teil. Kein zweites Logo, es steht schon in der Kopfleiste.
     Die Knöpfe nebeneinander, darunter je ein Zusatz mit den Worten aus dem Menü.
     Seit 14.10.2026 (Phil) in voller Höhe, damit unten nichts vom nächsten Abschnitt hereinschaut.
     svh ist die Höhe MIT eingeblendeter Adressleiste, so steht „Muster ansehen" am iPhone nie
     hinter der Leiste. Abgezogen wird der Innenabstand von main (größere Kopfleiste oben, siehe
     stil-menue.css). Das Bild nimmt die Höhe, die Text und Knöpfe übrig lassen. */
  .start-auftakt {
    display: flex; flex-direction: column; padding-top: var(--kopf);
    min-height: calc(100vh - var(--kopf-oben, var(--kopf)) + var(--kopf));
    min-height: calc(100svh - var(--kopf-oben, var(--kopf)) + var(--kopf));
  }
  .start-auftakt__bild {
    order: 1; position: relative; flex: 1 1 auto; align-self: stretch; width: 100%; aspect-ratio: auto; height: auto; min-height: 36svh; max-height: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .35) 80%, transparent 97%);
            mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .35) 80%, transparent 97%);
  }
  .start-auftakt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 50% 12%; }
  .start-auftakt__innen { order: 2; position: relative; z-index: 2; margin-top: max(-15svh, -120px); padding: 0 0 28px; }
  .start-auftakt__fuss { order: 3; padding: 8px var(--rand) 0; }
  .start-logo { display: none; }
  .start-auftakt .start-auftakt__h1 { max-width: none; margin-top: 0; font-size: clamp(2.05rem, 9.4vw, 2.9rem); line-height: 1.02; animation-delay: .1s; }
  .start-auftakt__satz { max-width: 34em; margin-top: 12px; font-size: 1.0625rem; line-height: 1.45; animation-delay: .22s; }
  .start-auftakt__knoepfe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 22px; animation-delay: .34s; }
  .start-auftakt__knoepfe .knopf { min-height: 62px; padding: 10px; flex-direction: column; gap: 1px; white-space: normal; text-align: center; line-height: 1.2; font-size: 1rem; }
  .knopf__zusatz { display: block; font-size: .78rem; font-weight: 450; letter-spacing: 0; opacity: .88; }
  .start-auftakt__muster { grid-column: 1 / -1; justify-self: center; margin-top: 2px; }

  .sx-wege.abschnitt, .sx-ansichten.abschnitt, .sx-muster.abschnitt, .sx-ablauf.abschnitt { padding-block: var(--abschnitt); }
  .sx-duo.abschnitt { padding-block: var(--abschnitt); }
  .sx-wege .t-gross, .sx-ansichten .t-gross, .sx-muster .t-gross, .sx-ablauf .t-gross { margin-top: 10px; }
  .sx-wege__innen, .sx-ablauf__innen, .sx-muster__innen { row-gap: 32px; }
  .sx-wege__kopf .t-text, .sx-muster__kopf .t-text { margin-top: 14px; }
  .sx-weg h3 { font-size: 1.375rem; }
  .sx-kopf { row-gap: 14px; }

  .sx-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "modell modell" "schieber schieber" "plan lage" "fotos fotos" "pdf vorort";
    gap: 32px 12px; margin-top: 28px;
  }
  .sx-band__stueck--modell { --a: 3 / 2; }
  .sx-band__stueck--schieber { --a: 4 / 3; }
  .sx-band__stueck--plan, .sx-band__stueck--lage { --a: 1; }
  .sx-band__stueck--fotos { --a: 4 / 3; }
  .sx-band__stueck--pdf, .sx-band__stueck--vorort { --a: 4 / 3; }
  .sx-band__stueck--lage .sx-band__feld { width: 100%; }
  .sx-band figcaption { margin-top: 10px; padding-top: 10px; gap: 2px; }
  .sx-band figcaption b, .sx-band figcaption a { font-size: .75rem; letter-spacing: .1em; }
  /* Der Pfeil hinter dem Etikett: In der Datei steht dort ein kaputtes Steuerzeichen statt „→". */
  .sx-band figcaption a::after { content: ' \2192'; letter-spacing: 0; }
  .sx-band figcaption span { font-size: .875rem; }
  .sx-band__marke { font-size: .75rem; }

  /* Preis: das Lineal-Bild hinter den Tafeln macht am Handy den Text unlesbar. */
  .st-preis { background: var(--band); }
  .st-preis__hintergrund, .st-preis::before, .st-preis__hintergrund + .ki-hinweis { display: none; }
  .st-bausteine { gap: 12px; margin-top: 24px; }
  .st-baustein { padding: 18px; }

  .sx-muster__liste li { padding: 14px 0; }
  .sx-muster__liste .knopf { min-height: 44px; }
  .sx-kurz h2 { font-size: 1.5rem; }
  .sx-kurz p:not(.ueberzeile) { font-size: 1rem; max-width: none; }

  .sx-schritte li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; }
  .sx-schritte b { font-size: 1.5rem; }
  .sx-ablauf__bilder--drei { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sx-ablauf__bilder--drei figure > div { aspect-ratio: 16 / 9; }

  .st-kontakt__kurz { gap: 20px; }
  .st-kontakt__kurz .knopf { width: 100%; }
}

/* Einheitliches Bild-Design der Startseite (Phil, 11.10.2026, 04:40): eine Ecke, ein Rahmen, eine Unterschrift */
.sx-band__feld, .sx-kurz > img, .sx-muster__liste img, .sx-ablauf__bilder figure > div, .st-musterkarte img { border-radius: 6px; border: 1px solid var(--linie); background: var(--band-hell); }
.sx-band figcaption, .sx-ablauf__bilder figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); display: grid; gap: 3px; }
.sx-ablauf__bilder figcaption { font-size: .875rem; color: var(--text); }
.sx-ablauf__bilder figcaption b { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); margin-right: 6px; }
.sx-kurz h2, .sx-muster .t-gross, .sx-ablauf .t-gross, .sx-ansichten .t-gross, .st-preis .t-gross, .st-firmen .t-gross, .st-kontakt .t-gross { margin-top: 12px; }

/* Kopfleiste über dem Auftaktbild am PC lesbar (offener Punkt der Prüfung vom 12.10.2026): heller
   Grund schon oben, nicht erst beim Scrollen. Handy unverändert (dort ist die Leiste ohnehin weiß). */
@media (min-width: 1041px) {
  .kopf:not([data-fest]) { background: rgba(255, 255, 255, .8); backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px); }
}