/* ==========================================================================
   Coreflow · Mobil-Ebene (Marcel 25.10.2026)
   Wird nur bis 1023 px geladen (<link media="(max-width: 1023px)">), Desktop ab 1024 px bleibt wie freigegeben.
   Steht nach allen Seiten-Stylesheets und darf deshalb gezielt überschreiben. Nur Tokens aus base.css, keine neuen Farben,
   keine Glows, keine Verlaufsflächen. Rot bleibt Akzent (Primäraktion, Aktiv-Strich, Segment der Leiste).
   Gliederung: 1 Fundament (Trefferflächen, Rhythmus, Menü) · 2 Leisten zum Wischen · 3 Aktionsleiste · 4 Seiten
   ========================================================================== */

/* ---------------- 1. Fundament ---------------- */
/* Rhythmus: etwas dichter als die Desktop-Formel, damit eine Section mehr in den Bildschirm passt */
:root { --sec-y: clamp(3.5rem, 2.6rem + 4vw, 5rem); --head-gap: clamp(1.75rem, 1.4rem + 2vw, 2.5rem); }

/* Trefferflächen ab 44 px, ohne dass sich die Linie unter dem Textlink verschiebt */
.tlink { min-height: 2.75rem; }
.btn--xs { --h: 2.75rem; }
.foot__cols ul { gap: 0; }
.foot__cols a, .foot__plain { min-height: 2.75rem; }
.foot__h { margin-bottom: .35rem; }
.stars-line { min-height: 2.75rem; align-content: center; }
.ctl, .ref__ctl .ctl, .ref__mctl { width: 2.75rem; height: 2.75rem; }
.hero__listen, .ref--bench .ref__play { min-height: 2.75rem; }
.svc__src a, .sb-src a, .cs-cap__go, .ws-hb__go, .os-hero__app { min-height: 2.75rem; display: inline-flex; align-items: center; }
.ctl.hero__pause { width: 2.75rem; height: 2.75rem; }
.svc__src { gap: 0 1.25rem; }
.foot__logo { padding-block: .5rem; }
.foot__legal a { padding-inline: .25rem; min-width: 2.75rem; justify-content: center; }

/* Menü: größere Zeilen, Schnellkontakt unten (Anrufen, Termin buchen) */
.mnav nav > a, .mnav__sub a { min-height: 3rem; display: flex; align-items: center; }
.mnav__quick { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.mnav__quick a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3rem; white-space: nowrap; padding-inline: .5rem; border-radius: var(--r-md); background: var(--surface-3); box-shadow: var(--ring-2); font-size: .875rem; font-weight: 600; color: var(--text); }
.mnav__quick svg { width: 1.1rem; height: 1.1rem; color: var(--red-text); }

/* ---------------- 2. Leisten zum Wischen ([data-m-rail]) ----------------
   Unter 768 px: Karten nebeneinander, die nächste schaut am Rand heraus (zeigt: hier geht es weiter).
   Einrasten pro Karte, keine Scrollleiste. Darunter Zähler und Segmente (mobile.js), rein anzeigend. */
@media (max-width: 767px) {
  [data-m-rail] {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch;
    gap: .75rem !important; grid-template-columns: none !important; min-width: 0;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  [data-m-rail]::-webkit-scrollbar { display: none; }
  /* position: relative hält absolut gesetzte Kinder (z. B. .sr-Texte) in der Leiste, sonst verbreitern sie die Seite */
  [data-m-rail] { position: relative; }
  [data-m-rail] > * { position: relative; flex: 0 0 var(--m-w, 86%); min-width: 0; max-width: none; scroll-snap-align: start; scroll-snap-stop: always; }
  [data-m-rail] > [data-rise] { opacity: 1; transform: none; }
  .m-rail__nav[hidden] { display: flex; }
  .m-rail__nav { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; }
  .m-rail__n { font-size: var(--fs-meta); color: var(--text-3); letter-spacing: .02em; min-width: 3.4rem; }
  .m-rail__n b { font-weight: 600; color: var(--text); }
  .m-rail__segs { display: flex; flex: 1; gap: .3rem; max-width: 9rem; }
  .m-rail__segs i { flex: 1; height: 2px; border-radius: 2px; background: var(--line-2); transition: background var(--t-mid) var(--ease); }
  .m-rail__segs i.is-on { background: var(--red); }
}
@media (min-width: 768px) { .m-rail__nav { display: none; } }

/* ---------------- 3. Aktionsleiste unten ----------------
   Gleiche Familie wie der Header: solide Fläche, Haarlinie, dunkler Schatten. Rot nur der Primärknopf. */
.mbar[hidden] { display: flex; }
.mbar {
  position: fixed; left: .625rem; right: .625rem; bottom: max(.625rem, env(safe-area-inset-bottom)); z-index: 45;
  display: flex; gap: .5rem; padding: .375rem; border-radius: 16px;
  background: var(--surface-1); box-shadow: var(--ring-2), var(--shadow-2);
  transform: translateY(calc(100% + 1.25rem)); transition: transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
  visibility: hidden;  /* ausgeblendet wirklich weg: sonst taucht sie beim Überziehen am Seitenende (iOS) unter dem Footer auf */
}
.mbar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.mbar__go { --h: 3rem; flex: 1; justify-content: space-between; border-radius: 12px; }
.mbar__go .btn__k { border-radius: 9px; }
.mbar__tel { display: flex; align-items: center; gap: .5rem; flex: none; min-height: 3rem; padding: 0 1rem; border-radius: 12px; background: var(--surface-3); box-shadow: var(--ring-2); font-size: .9375rem; font-weight: 600; color: var(--text); }
.mbar__tel svg { width: 1.15rem; height: 1.15rem; color: var(--red-text); }
@media (max-width: 359px) { .mbar__tel span { display: none; } .mbar__tel { padding: 0 .85rem; } }
.has-mbar .pv-toast { bottom: 5.5rem; }
.has-mbar .pv-chip { display: none; }
@media (min-width: 1024px) { .mbar { display: none; } }

/* ==========================================================================
   4. Seiten
   ========================================================================== */

/* ---------------- Startseite · Referenzen: drei Kundenbühnen zum Wischen ----------------
   Jede Karte gleich gebaut: Logo, Website (Pflanzando mit echter Mobilansicht davor), ein zweites echtes Medium
   (Pflanzando: Kundenfilm, GMA Tech: Website in Bewegung, Zach: Ausschnitt der Website), Headline, Badges, „Projekt ansehen“
   unten. Die Logo-Ersatzflächen ohne Film entfallen mobil. */
@media (max-width: 767px) {
  .refs__list { --m-w: 88%; }
  .refs .ref--bench { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; row-gap: 0; padding: 1.25rem 1rem 1.1rem; border-radius: var(--r-lg); }
  .refs .ref--bench .ref__col { display: contents; }
  .refs .ref--bench .ref__logo { grid-row: 1; margin-bottom: 1rem; height: calc(var(--lh, 32px) * .8); }
  .refs .ref--bench .ref__shot { grid-row: 2; grid-column: 1; }
  /* Marcel 25.10. (iPhone 17): eine Karte = ein Bildschirm. Nur der große Website-Screenshot, kein Handy, kein Film und
     keine Bewegung (Filme mobil nur auf den Projektseiten). */
  .refs .ref--bench .ref__phone, .refs .ref--bench .ref__top, .refs .ref--bench .ref__motion { display: none; }
  .refs .ref--bench .ref__title { grid-row: 3; margin-top: 1.25rem; font-size: 1.3125rem; line-height: 1.2; }
  .refs .ref--bench .ref__foot { grid-row: 4; padding-top: 1rem; gap: 1rem; align-content: space-between; }
  .refs .ref--bench .ref__case { width: 100%; justify-content: space-between; min-height: 3rem; }
  .refs .ref--bench .ref__acts { display: block; }
  .refs .ref--bench .ref__ph { display: none; }
}

/* ---------------- Startseite · Drei Ebenen: Reiter + Wischen ----------------
   Die Stufenpyramide (03 oben, 01 unten) bleibt als Reiter stehen; darunter eine Ebene pro Karte zum Wischen.
   Antippen einer Stufe fährt zur Ebene, Wischen markiert die Stufe (globale Aktiv-Markierung .sel). */
@media (max-width: 767px) {
  .svc__rail { margin-top: 1.5rem; }
  .svc__note { display: none; }
  .svc__list { --m-w: 90%; margin-top: 1.25rem; }
  .svc__lvl { padding: 1.25rem 1rem 1rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .svc__lvl .svc__txt { display: grid; gap: .6rem; align-content: start; }
  .svc__lvl .svc__txt > p:not(.svc__k):not(.svc__caps) { font-size: .9375rem; }
  .svc__lvl .svc__vis { order: -1; }
  .svc__lvl .svc__txt .h3 { margin-bottom: .2rem; }
  .svc__lvl .svc__caps { margin: .4rem 0 .2rem; }
  .svc__lvl .svc__k { margin-bottom: 0; }
  /* Marcel 25.10.: jede Ebene auf einem Bildschirm, alle Bilder gleich hoch (16:10). Ohne Handy-Ansichten, kürzere Texte. */
  .svc__lvl .svc__phone { display: none; }
  .svc__lvl .svc__pair, .svc__lvl .svc__pair--rag { padding: 0; }
  .svc__lvl .svc__wide { aspect-ratio: 16 / 10; }
  .svc__lvl .svc__d { display: none; }
  .svc__lvl .svc__m[hidden] { display: block; }
  /* Runde 3: alle Ebenen gleich (auch die erste mit Innenabstand oben), keine Bildunterschriften mit Links: Boxen kürzer */
  .svc__lvl:first-child { padding-top: 1.25rem; }
  .svc__lvl .svc__src { display: none; }
  /* Ebene 03: flache Grafik im selben Format, Landingpage als Fläche, davor nur die neue Anfrage */
  .svc__lvl .svc__pair--sys { display: block; position: relative; aspect-ratio: 16 / 10; }
  .svc__lvl .svc__pair--sys .svc__wide { width: 100%; height: 100%; aspect-ratio: auto; }
  .svc__lvl .svc__pair--sys .sys { position: absolute; right: .75rem; bottom: .75rem; width: 74%; margin: 0; padding: .6rem; border-radius: var(--r-md); }
  .svc__lvl .sys__top { margin-bottom: .45rem; }
  .svc__lvl .sys__top img { width: 4.75rem; }
  .svc__lvl .sys__h, .svc__lvl .sys__list { display: none; }
  .svc__lvl .sys__lead { margin: 0; padding: .5rem .6rem; gap: .1rem .6rem; }
  .svc__lvl .sys__lead b { font-size: .8125rem; line-height: 1.3; }
  .svc__lvl .sys__next { display: none; }
}

/* ---------------- Leistungsseiten · gemeinsame Kartenform in Wischleisten ----------------
   Was auf dem Desktop eine Zeile mit Haarlinie ist, wird mobil zur Karte (Fläche --surface-2, Haarlinie, r20). */
@media (max-width: 767px) {
  .ws-signs__list > li {
    padding: 1.25rem 1.1rem 1.2rem; border-top: 0; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1);
  }
  .ws-signs__list { --m-w: 82%; }
  .ws-signs__list > li { align-content: start; }
  .ws-signs__q { font-size: 1.1875rem; }
  .ws-signs__more { margin-top: 1.5rem; padding-top: 1.25rem; }
  /* Prinzip (Marcel Runde 4: Bilder je Schritt funktionierten mobil nicht): eine Bühne mit der Website und dem Handy von
     Transporte Schneck, darunter die vier Punkte zum Antippen. Nur der gewählte Punkt ist aktiv (Strich rot, Nummer weiß) und
     zeigt seinen Text; seine Markierung im Bild leuchtet, bei 04 das Handy (js/websites.js). */
  .ws-how__grid { gap: 1.25rem; }
  .ws-how__stage { display: block; height: auto; }
  .ws-how__pin { position: static; gap: .75rem; }
  .ws-how__prog { display: none; }
  .ws-how__frame { aspect-ratio: 370 / 290; }
  .ws-how__scr { opacity: 1; transform: none; justify-content: flex-start; transition: opacity var(--t-mid) var(--ease); }
  .ws-how__scr[data-scr="sch"] { right: 16%; bottom: auto; }
  .ws-how__scr--phone { left: auto; width: 31%; align-items: stretch; justify-content: flex-end; }
  .ws-how__scr--phone .ws-shot { width: 100%; height: auto; aspect-ratio: 390 / 640; border-radius: var(--r-md); box-shadow: var(--ring-2), var(--shadow-3); }
  .ws-how__scr--phone .ws-shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .ws-how__frame:has(.ws-how__scr--phone.is-on) .ws-how__scr[data-scr="sch"] { opacity: .4; }
  .ws-mark { opacity: .55; transform: translate(-50%, -50%) scale(.8); min-width: 1.9rem; height: 1.9rem; font-size: .75rem; }
  .ws-mark.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .ws-mark--m[hidden] { display: grid; }
  .ws-how__src { display: none; }
  .ws-how__ref { display: inline-flex; margin-top: .25rem; }
  .ws-how__steps { display: grid; gap: 0; margin-top: 0; border-top: 1px solid var(--line-2); }
  .ws-how__steps > .ws-step { gap: .5rem; padding: 0; border-top: 0; border-bottom: 1px solid var(--line-2); opacity: 1; }
  .ws-how__steps .ws-step__n { min-height: 3.25rem; cursor: pointer; font-size: 1rem; color: var(--text-2); -webkit-tap-highlight-color: transparent; }
  .ws-how__steps .ws-step__n b { font-size: 1rem; color: var(--text-3); }
  .ws-how__steps .ws-step__n::before { width: 1.25rem; }
  .ws-how__steps .ws-step.is-active .ws-step__n, .ws-how__steps .ws-step.is-active .ws-step__n b { color: var(--text); }
  .ws-how__steps .ws-step.is-active .ws-step__n::before { width: 2.25rem; background: var(--red); }
  .ws-how__steps .ws-step > :not(.ws-step__n) { display: none; }
  .ws-how__steps .ws-step.is-active > .h3, .ws-how__steps .ws-step.is-active > p:not([class]) { display: block; }
  .ws-how__steps .ws-step.is-active > .h3 { font-size: 1.125rem; }
  .ws-how__steps .ws-step.is-active > p:not([class]) { padding-bottom: 1rem; font-size: .9375rem; }
  /* Ratgeber-Link in einer Zeile */
  .ws-m-long { display: none; }
  .ws-m-short[hidden] { display: inline; }
  .ws-scope__grid { --m-w: 78%; }
  .ws-plat__grid { --m-w: 78%; }
  .ws-cases__pair { --m-w: 86%; }
  .ws-combo__list { --m-w: 84%; }
}
@media (max-width: 767px) {
  /* Onlineshops · Weg zum Kauf: fünf Momente als Karten, Text oben, Bild unten bündig */
  .os-path__steps { --m-w: 86%; }
  .os-path__steps { align-items: stretch; }
  .os-path__steps > .os-step { align-content: start; gap: 1.1rem; padding: 1.25rem 1.1rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); }
  .os-path__steps .os-step__m { order: -1; }
  /* Referenz: der Kundenfilm läuft mobil nur auf der Projektseite (Marcel 25.10.); Zitat, Merkmale und „Projekt ansehen“ bleiben */
  .os-ref__media { display: none; }
  /* Eigene App: Telefon über den drei Schritten, damit ein Antippen die Änderung sofort im Bild zeigt; alles auf einem Bildschirm */
  .os-app__grid { display: flex; flex-direction: column; gap: 1.25rem; }
  .os-app__txt { display: contents; }
  .os-app__txt .shead { margin-bottom: 0; }
  .os-app__vis { order: 1; gap: .5rem; }
  .os-app__steps { order: 2; gap: .25rem; }
  .os-app__vis .os-phone { width: 12.5rem; }
  .os-app__step button { padding: .75rem 1rem; gap: .75rem; }
  .os-app__step b { font-size: 1.0625rem; }
  /* Marcel 25.10.: alle fünf Momente mit gleich hohem Bild (16:10), Handy-Aufnahme als Ausschnitt, Kauf-Schema kompakt */
  .os-path__steps .os-step__m > * { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 16 / 10 !important; border-radius: var(--r-lg); }
  .os-path__steps .os-step__m img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .os-path__steps .os-co { align-content: center; gap: 0; padding: .9rem; box-shadow: var(--ring); }
  .os-path__steps .os-co__rows, .os-path__steps .os-co__note { display: none; }
  .os-path__steps .os-co__steps { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
  .os-mix__list { --m-w: 84%; }
  /* Runde 3 (Marcel): Kaufweg-Karten gleich hoch, Kauf-Schema bleibt in der Box; Kombinierbar mit Textlink statt Pfeil-Knopf (sah nach Wischen aus) */
  .os-path__steps > .os-step, .os-path__steps .os-step__in, .os-path__steps .os-step__m, .os-path__steps .os-co, .os-path__steps .os-co__steps li { min-width: 0; }
  .os-path__steps .os-step__tags { flex-wrap: wrap; }
  .os-path__steps .os-co { overflow: hidden; padding: .75rem; }
  .os-path__steps .os-co__steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .os-path__steps .os-co__steps li { font-size: .8125rem; line-height: 1.25; padding: .55rem .6rem; gap: .5rem; }
  .os-mix__list > li { display: flex; }
  .os-mix__a { align-content: start; grid-template-columns: minmax(0, 1fr); gap: .5rem; width: 100%; padding: 1.25rem 1.1rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1) !important; }
  .os-mix__go { display: none; }
  .os-mix__more[hidden] { display: inline-flex; align-self: end; margin-top: .5rem; color: var(--red-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  /* Referenz Pflanzando (Marcel Runde 3): statt des langen Textzitats die Videobewertung des Inhabers */
  .os-ref .os-ref__media { display: grid; }
  .os-ref .os-ref__rv, .os-ref .os-ref__logo { display: none; }
  .sb-mix__list { --m-w: 84%; }
  .cs-mix__list { --m-w: 84%; }
  .cs-breaks { --m-w: 82%; }
  .cs-breaks > li, .cs-mix__list > li { padding: 1.25rem 1.1rem; border: 0; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); }
}

/* ---------------- Referenzen, Projektseiten ---------------- */
@media (max-width: 767px) {
  .rz-grid { --m-w: 86%; }
  .rz-minis { --m-w: 78%; }
  .rz-voices { --m-w: 86%; align-items: stretch; }
  .rz-voices .rz-voice { align-content: start; grid-template-rows: auto 1fr auto; }
  .rz-voices .rz-voice--wide blockquote p { font-size: 1.0625rem; }
}

/* ---------------- Kontakt (Marcel 25.10.): mobil reine Anfrageseite ----------------
   Kundenwelt (.ks) entfällt unter 1024 px. Die Frage im Formular ist eine Legende mit float; Safari behandelt sie trotzdem
   als Rahmen-Legende, dann fehlt der Abstand darunter. Darum mobil als echte Legende mit eigenem Abstand zum Inhalt. */
.kq-page .ks { display: none; }
.kf__step > legend.kf__q { float: none; margin: 0; }
.kf__step > legend.kf__q + * { margin-top: 1.1rem; }
/* Schritte nehmen mobil nur ihre eigene Höhe ein (Desktop hält die Höhe des größten Schritts), sonst steht unter der Auswahl eine große Lücke */
.kf > .kf__step[hidden] { display: none; }

/* ---------------- Startseite „Wo stehst du?“ (Marcel 25.10.): mobil als Aufklappliste ----------------
   js/mobile.js hängt jede Empfehlung direkt unter ihre Situation. Antippen öffnet sie dort, die Aktion ist sofort im Bild. */
@media (max-width: 767px) {
  .pick.m-acc .pick__out { display: none; }
  .pick.m-acc .pick__opts { gap: .375rem; }
  .pick.m-acc .pick__o { min-height: 3.5rem; padding: .85rem 1rem; box-shadow: var(--ring); }
  .pick.m-acc .pick__o[aria-checked="true"] { transform: none; border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: var(--ring-2); }
  .pick.m-acc .pick__a { display: none; grid-area: auto; opacity: 1; visibility: visible; padding: .25rem 1rem 1.1rem; border-top: 0; }
  .pick.m-acc .pick__a.is-on { display: grid; gap: .6rem; margin-top: calc(-.375rem - 1px); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-2); }
  .pick.m-acc .pick__a > * { opacity: 1; transform: none; }
  .pick.m-acc .pick__lvl, .pick.m-acc .pick__later { display: none; }
  .pick.m-acc .pick__a .h3 { padding-top: .85rem; border-top: 1px solid var(--line); font-size: 1.125rem; }
  .pick.m-acc .pick__a > p:not(.pick__lvl):not(.pick__later) { font-size: .9375rem; }
  .pick.m-acc .pick__acts { margin-top: .35rem; gap: .25rem 1.25rem; }
}

/* ---------------- Sichtbarkeit (Marcel 25.10., Regeln von Startseite und Websites übertragen) ---------------- */
@media (max-width: 767px) {
  /* Handy-Aufnahmen von ChatGPT sind mobil nicht lesbar: nur die große Google-Ansicht */
  .sb-stage__phone, .sb-proof__phone { display: none; }
  /* Bausteine (Marcel Runde 3: Zusammenhang war mobil weg): ein Netz auf einem Bildschirm.
     Oben die Quelle, darunter die fünf Bausteine als Kacheln, darunter die drei Orte. Wer einen Baustein antippt, sieht sofort,
     ob die Quelle ihn speist und auf welche Orte er wirkt (hell + roter Punkt, der Rest tritt zurück); darunter drei Stichpunkte. */
  .sb-map { grid-template-areas: "src" "mid" "out" "panel" "loop"; }
  .sb-map__src, .sb-map__mid { padding-bottom: 1.5rem; }
  .sb-map__src::after, .sb-map__mid::after { display: block; bottom: .25rem; height: 1rem; }
  .sb-map__k { margin-bottom: .5rem; }
  .sb-map__src .sb-map__k { display: none; }
  .sb-srcc { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .1rem .75rem; padding: .7rem .9rem; transition: box-shadow var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease); }
  .sb-srcc .sb-ico { grid-row: 1 / 3; margin: 0; width: 2rem; height: 2rem; }
  .sb-srcc__h { font-size: 1rem; }
  .sb-srcc__sub { font-size: .8125rem; }
  .sb-srcc__f, .sb-srcc__a { display: none; }
  .sb-map:has(.sb-node[aria-selected="true"]:not([data-from])) .sb-srcc { opacity: .5; }
  .sb-map:has(.sb-node[aria-selected="true"][data-from="src"]) .sb-srcc { box-shadow: inset 0 0 0 1px var(--line-3); }
  .sb-nodes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .375rem; }
  .sb-nodes > .sb-node:first-child { grid-column: 1 / -1; }
  .sb-node { gap: .6rem; min-height: 3.25rem; padding: .55rem .7rem .55rem .6rem; }
  .sb-node .sb-ico { width: 1.875rem; height: 1.875rem; flex: none; }
  .sb-node__t b { font-size: .9375rem; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
  .sb-node__t small { display: none; }
  .sb-outs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
  .sb-out { position: relative; padding: .6rem .65rem; text-align: center; }
  .sb-out b { font-size: .875rem; line-height: 1.2; }
  .sb-out small { display: none; }
  .js .sb-map[data-ready] .sb-out { opacity: .4; }
  .js .sb-map[data-ready] .sb-out.is-on { opacity: 1; }
  .js .sb-map[data-ready] .sb-out.is-on::before { content: ""; position: absolute; top: -.25rem; left: 50%; width: .5rem; height: .5rem; margin-left: -.25rem; border-radius: 50%; background: var(--red); }
  .sb-panels { margin: .75rem 0 0; }
  .sb-map .sb-panel { padding: 1rem 1rem 1.1rem; }
  .sb-panel__head { display: none; }
  .sb-panel__body { gap: 0; }
  .sb-panel__body > div:nth-child(2) { display: none; }
  .sb-panel__k { margin-bottom: .5rem; }
  .sb-ticks li:nth-child(n+4) { display: none; }
  .sb-loop { margin-top: .75rem; padding: .85rem 1rem; }
  .sb-loop { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .85rem; }
  .sb-loop .sb-ico { width: 2rem; height: 2rem; }
  .sb-loop p { font-size: .875rem; line-height: 1.45; }
  .sb-loop .tlink { display: none; }
  /* Runde 3: Suchbild mittig (ohne Handy kein Platz rechts/unten nötig), Bildunterschrift mit ↗ direkt nach „ChatGPT“ */
  .sb-proof__stage { padding: 0; }
  .sb-src__d { display: none; }
  .sb-src__m[hidden] { display: inline; }
  /* Unternehmensdaten: kurze Fassungen, im Abgleich nur die drei aussagekräftigen Zeilen */
  .sb-nap__lead, .sb-ways p:not(.sb-ways__m) { display: none; }
  .sb-nap__m[hidden], .sb-ways__m[hidden] { display: block; }
  .sb-nap__m { color: var(--text-2); text-wrap: pretty; }
  .sb-ways li { padding-block: 1rem; }
  .sb-sync__t tbody tr:nth-child(3), .sb-sync__t tbody tr:nth-child(5) { display: none; }
  /* Auswertung: Stichpunkte statt Zeilen mit Erklärung */
  .sb-report__say > p { display: none; }
  .sb-report__list li { display: flex; align-items: center; gap: .75rem; padding-block: .6rem; }
  .sb-report__list li::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--red); }
  .sb-report__list li span { display: none; }
  /* Datenstand: Felder zweispaltig, Zeilen dichter */
  .sb-sync__dl { grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
  .sb-sync__rec { padding: 1rem; }
  .sb-sync__t tr { padding: .6rem 1rem; }
}

/* ---------------- Coreflow System (Marcel 25.10.: kürzere Texte, flachere Grafiken) ---------------- */
@media (max-width: 767px) {
  /* Stationen: der zweite Absatz entfällt mobil, die Liste und die Grafik tragen die Aussage */
  .cs-act__txt > p:not(.cs-act__k) ~ p { display: none; }
  .cs-uses span { display: none; }
  /* Runde 3 (Marcel: zu viel Text auf der ganzen Seite): kurze Fassungen (.m-short) statt der langen (.m-long), einzelne Absätze mobil weg (.m-off) */
  .m-long, .m-off { display: none; }
  .m-short[hidden] { display: block; }
  .cs-areas li:nth-child(n+7), .m-off-i, .cs-loop__steps li span { display: none; }
  /* Runde 4: „wieder von vorn“ steht unter dem letzten Schritt (Anpassen), nicht unter der Einleitung */
  .cs-loop__steps::after { position: static; padding: 1rem 0 0 2rem; }
  .cs-uses li { padding-block: .6rem; }
  /* Formular: nur das Anliegen und was mitgespeichert wird */
  .cs-form > .cs-ui__h, .cs-form > .cs-form__f:not(.cs-form__f--l), .cs-form > .cs-form__send { display: none; }
  /* Vorher/nachher als zwei Wischkarten nebeneinander statt untereinander */
  .cs-call__pair { --m-w: 84%; }
  /* Lead-CRM: drei Anfragen in der Liste genügen */
  .cs-crm__list li:nth-child(n+4), .cs-log li:nth-child(n+2) { display: none; }
}

/* ---------------- Referenzen-Übersicht: Fokusprojekt auf einem Bildschirm (Filme mobil nur auf den Projektseiten) ---------------- */
@media (max-width: 767px) {
  .rz-focus .rz-focus__r, .rz-focus .rz-focus__p { display: none; }
  /* Hero-Bild ganz zeigen statt links/rechts zu beschneiden (Marcel 30.10) */
  .rz-focus__shot { height: auto; aspect-ratio: 16 / 10; }
  /* Runde 4: zu lange Kartenüberschrift (Pellhack) mobil in kurzer Fassung, damit alle Karten gleich niedrig bleiben */
  .rz-card__l { display: none; }
  .rz-card__m[hidden] { display: inline; }
}

/* ---------------- Regionalseiten (nur Darstellung, Texte unverändert) ---------------- */
@media (max-width: 767px) {
  .re-shot--phone { display: none; }
  #re-film { display: none; }  /* Kundenfilm mobil nur auf der Projektseite */
}

/* ---------------- Abläufe mit mitlaufendem Punkt (Marcel 25.10.) ----------------
   [data-m-flow]: senkrechte Zeitleiste. js/mobile.js legt eine Spur mit roter Füllung (::before der Liste) an, die beim Scrollen bis zur Leselinie
   (60 % der Bildschirmhöhe) mitläuft; erreichte Schritte bekommen den roten Punkt. Ohne JS bleibt die graue Linie. */
@media (max-width: 767px) {
  [data-m-flow] { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  [data-m-flow] > li { position: relative; padding: 0 0 2rem 2rem !important; border-top: 0 !important; box-shadow: none !important; }
  [data-m-flow] > li:last-child { padding-bottom: 0 !important; }
  [data-m-flow] > li::after { content: ""; position: absolute; left: 0; top: .35rem; width: 9px; height: 9px; border-radius: 50%; z-index: 1; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-3); transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
  [data-m-flow] > li.is-past::after { background: var(--red); box-shadow: 0 0 0 3px var(--bg); }
  [data-m-flow]:not(.cs-loop__steps) > li::before { content: none; }  /* eigene Linien und Marker der Seiten weichen der Spur (cs-loop: ::before ist die Nummer) */
  /* Spur: grau, bis zur Leselinie rot (harte Kante, kein Verlauf). Lage und Füllung setzt js/mobile.js als Variablen. */
  [data-m-flow]::before { content: ""; position: absolute; left: 4px; top: var(--m-top, 0); width: 1px; height: var(--m-h, 0); pointer-events: none; background: linear-gradient(var(--red) var(--m-fill, 0px), var(--line-2) 0); }
}

/* ---------------- Inhaltsseiten: Trefferflächen ----------------
   Brotkrumen und kleine Inline-Links bekommen eine größere Trefferfläche ohne Layoutverschiebung. */
.pg-crumbs a, .rz-data dd a, a[rel="author"] { position: relative; }
.pg-crumbs a::after, .rz-data dd a::after, a[rel="author"]::after { content: ""; position: absolute; left: -.35rem; right: -.35rem; top: 50%; height: 2.75rem; transform: translateY(-50%); }
.wi-filter .chip, .chips .chip.sel, button.chip, .rz-film__play { min-height: 2.75rem; }
.pg-toc a { min-height: 2.75rem; display: flex; align-items: center; }