/* ========================================================================== referenz-badberka.css — seitenlokale Bausteine der Referenz „Betonkosmetik Grundschule Bad Berka“ (Präfix bb-) Version: 1.1 | 2026-10-22 (Kais Abnahme: Kreisausschnitt, Bilderbombe + Bilderstrecke, klebende Brettleiste, neun Geschichten, Mengen) | 1.0 2026-10-21 | Quelle: Marketing/projektreferenzen/vorlagen/ (bauen_bad_berka.py, projekte/grundschule-bad-berka-betonkosmetik/konzept.md) Leitgedanke „brettschalung-neun-geschichten“: Sichtbeton mit Holzbrettschalung, ein Gebäude, neun Geschichten wie Bretter einer Schalung. Regel (Skill rauMKult-Webseiten): nur Anordnung; Farben, Radien, Schatten und Schrift ausschließlich aus Token (main-v2.css, rk-wow.css, --ph-erhaben aus referenz-module.css). Keine Literalfarben, kein filter, kein mix-blend-mode, keine Abdunklung über den Fotos. Mobile first (390 px), Hell und Dunkel (Dunkelmodus erhaben), reduzierte Bewegung (prefers-reduced-motion, html.no-motion, [data-motion="reduced"]), Fokus sichtbar, Gold nur als Linie, Punkt oder Text. Einblende-Vertrag: Ausgangszustände nur unter html.bb-js.rk-wow-motion und nur bis .is-in; ohne Skript, reduziert und im Druck steht alles. Arbeitsnamen für die Zentralisierung durch die Website-Sitzung: rk-wow-konusfenster Einstieg: großes Nachher-Bild, im runden Fenster (wie ein Ankerkonus) der Vorher-Zustand; Knopf öffnet das Fenster über das ganze Bild (clip-path circle), zweiter Klick schließt es wieder rk-wow-bilderbombe „Auf einen Blick“: Mosaik aus echten Vorher-Fotos, baut sich beim Einscrollen von der Mitte aus auf, Zähler läuft mit; Klick öffnet die Bilderstrecke (rk-wow-bilderstrecke: mit allen Vorher-Bildern, Filter nach Schadensart) rk-wow-markierung Befunde als Mosaik mit runder Sprühmarkierung (Nummer) auf jedem Bild rk-wow-brettleiste Kapitelwahl als Bretter einer Schalung (Reiter), je Kapitel eigener Innenaufbau; Desktop klebende Spalte, Handy klebende Leiste rk-wow-fugenband waagerechte Schrittfolge mit Einrasten (scroll-snap), Tastatur bedienbar rk-wow-stufenschieber gleicher Standpunkt, Zustand je Stufe über einen Schieber (13 Stufen), ohne Skript als Bildreihe rk-wow-tagnacht Zeitleiste über Arbeitstage mit Nachtband (Frostschutz) zwischen den Tagen rk-wow-kontaktabzug Bildfolge als Kontaktabzug mit Nummern rk-wow-rundgang Rundgang: jedes Bild 12 s, langsamer Bildzug, nur auf Knopfdruck, jede Bedienung hält an ========================================================================== */ :where(.bb) button { font: inherit; } .bb .rk-wow-statement__title, .bb-h1 { overflow-wrap: break-word; hyphens: auto; } .bb :is(button, a, input, [tabindex="0"]):focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; } .bb figure { margin: 0; min-width: 0; } .bb figcaption { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; } .bb-text > p { max-width: 66ch; margin: 0 0 1em; color: var(--text-secondary); line-height: 1.65; } .bb-text > p:last-child { margin-bottom: 0; } .bb-h1 { margin: 0; font-size: clamp(2rem, 1.35rem + 2.5vw, 3.2rem); font-weight: var(--rk-fw-regular, 400); line-height: 1.05; letter-spacing: var(--rk-wow-ls-tight); color: var(--text-primary); text-wrap: balance; } .bb-lead { margin: 0; max-width: 60ch; font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem); line-height: 1.58; color: var(--text-secondary); text-wrap: pretty; } .bb-bildknopf, .bb-daumen { display: block; position: relative; box-sizing: border-box; overflow: hidden; border-radius: var(--rk-wow-r-md); cursor: zoom-in; color: inherit; text-decoration: none; } .bb-bildknopf img, .bb-daumen img { display: block; width: 100%; height: auto; } @media (hover: hover) { .bb-bildknopf img { transition: transform .5s var(--rk-wow-ease); } .bb-bildknopf:hover img { transform: scale(1.02); } } .bb-bildknopf:focus-visible, .bb-daumen:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; } .bb-schatten { box-shadow: var(--ph-erhaben-stark); } .bb-etikett { display: inline-block; padding: 4px 12px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); color: var(--text-primary); font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; } .bb-etikett--gold { border-color: var(--rk-gold-text); color: var(--rk-gold-text); } /* Abstände: 48 / 64 px zwischen Blöcken, kompakte Köpfe; Köpfe links, Mitte, rechts im Wechsel (FLOW §7) */ .bb .ref__block { margin-top: 48px; } @media (min-width: 960px) { .bb .ref__block { margin-top: 68px; } } .bb .bb-kopf { margin-bottom: 22px; } .bb-kopf .rk-wow-statement__title { font-size: var(--rk-wow-fs-big); line-height: 1.06; } .bb-kopf--gross .rk-wow-statement__title { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.7rem); line-height: 1.02; } .bb-kopf .rk-wow-statement__sub { font-size: var(--rk-wow-fs-body); max-width: 62ch; } .bb .ph-pos-r.bb-kopf { margin-left: auto; text-align: right; justify-items: end; } .bb .ph-pos-r.bb-kopf .rk-wow-statement__sub { margin-left: auto; } .bb > .ref__wrap > .rk-cta { margin-top: 48px; } @media (min-width: 960px) { .bb > .ref__wrap > .rk-cta { margin-top: 68px; } } /* Runde Knöpfe (Pfeile) — hell und dunkel klar lesbar (FLOW §23) */ .bb-runder-knopf, .bb-gross__pfeil, .bb-gross__zu { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rk-wow-line-strong); border-radius: 50%; background: var(--rk-wow-card); color: var(--text-primary); box-shadow: var(--rk-wow-sh-2); cursor: pointer; flex: none; } .bb-runder-knopf svg, .bb-gross__pfeil svg, .bb-gross__zu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bb-runder-knopf:disabled { opacity: .4; cursor: default; } @media (hover: hover) { .bb-runder-knopf:not(:disabled):hover { border-color: var(--text-primary); } } /* ========================================================================== 1 Einstieg mit Konus-Fenster — rk-wow-konusfenster ========================================================================== */ .bb-einstieg { display: grid; gap: 26px; margin-top: 4px; padding: clamp(22px, 3vw, 40px) clamp(16px, 4vw, 48px); border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); } .bb-einstieg__text { display: grid; gap: 16px; align-content: center; min-width: 0; } .bb-einstieg .rk-wow-btnrow { margin: 4px 0 0; } .bb-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; justify-self: start; min-height: 48px; padding: 6px 6px 6px 16px; box-sizing: border-box; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); color: var(--text-primary); text-decoration: none; font-size: var(--rk-wow-fs-meta); line-height: 1.3; } .bb-chip__stempel { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); } .bb-chip__pfeil { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--text-primary); color: var(--rk-wow-card); } .bb-chip__pfeil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .bb-chip:hover { border-color: var(--text-primary); } } .bb-konus { position: relative; display: grid; gap: 12px; justify-self: center; width: min(100%, 460px); --x: 26%; --y: 80%; --r: 19%; } .bb-konus__buehne { position: relative; overflow: hidden; border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); aspect-ratio: 4 / 5; } .bb-konus__buehne > .bb-bildknopf { position: absolute; inset: 0; border-radius: 0; } .bb-konus__buehne > .bb-bildknopf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; } .bb-konus__rohbau { position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: circle(var(--r) at var(--x) var(--y)); } .bb-konus__rohbau img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: var(--fx, 50%) var(--fy, 50%); transform: translate(calc(var(--x) - var(--fx, 50%)), calc(var(--y) - var(--fy, 50%))) scale(var(--fs, 1)); } .bb-konus.is-rohbau .bb-konus__rohbau img { transform: none; } .bb-konus__ring { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: calc(var(--r) * 2.62); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid var(--rk-wow-dark-gold); border-radius: 50%; pointer-events: none; box-sizing: border-box; } .bb-konus__marke { position: absolute; z-index: 3; left: var(--x); top: calc(var(--y) - var(--r) * 1.5); transform: translate(-50%, -100%); padding: 3px 10px; border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; } .bb-konus.is-rohbau { --r: 150%; } .bb-konus.is-rohbau .bb-konus__ring, .bb-konus.is-rohbau .bb-konus__marke { opacity: 0; } .bb-konus__leiste { display: none; align-items: center; gap: 12px; } html.bb-js .bb-konus__leiste { display: flex; } .bb-konus__schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 8px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-card); color: var(--text-primary); cursor: pointer; font-size: var(--rk-wow-fs-meta); } .bb-konus__punkt { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--rk-gold-text); box-sizing: border-box; } .bb-konus__punkt::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--rk-gold-text); transition: transform .4s var(--rk-wow-ease); } .bb-konus.is-rohbau .bb-konus__punkt::after { transform: scale(1.6); } .bb-konus__hinweis { margin: 0; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); line-height: 1.4; } .bb-konus .rk-teilen-halter, .bb-konus .rk-herz { z-index: 4; } @media (min-width: 960px) { .bb-einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 4vw, 56px); align-items: center; } .bb-konus { width: 100%; } } @media (prefers-reduced-motion: no-preference) { html.bb-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .bb-konus__rohbau { transition: clip-path .9s cubic-bezier(.65, 0, .25, 1); } html.bb-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .bb-konus__rohbau img { transition: transform .9s cubic-bezier(.65, 0, .25, 1); } html.bb-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) :is(.bb-konus__ring, .bb-konus__marke) { transition: opacity .3s linear; } } /* ========================================================================== 2 Auf einen Blick — rk-wow-bilderbombe (Kai 22.10.2026: statt 500 Punkten echte Schadstellen) Dichtes Mosaik aus kleinen Vorher-Fotos (alt="" im Knopf, der Knopf trägt den Namen). Einblenden: Kacheln fliegen von der Mitte aus gestaffelt auf (--d setzt referenz-badberka.js nach dem Abstand zur Mitte), danach läuft der Zähler. Zeiger: Kachel hebt sich. Handy 8 × 8 Kacheln, ab 640 px 10 × 10, ab 960 px 12 × 11 (volle Reihen). Ohne Skript, reduziert und im Druck steht alles. ========================================================================== */ .bb-blick { display: grid; gap: 26px; } .bb-bombe { display: grid; gap: 14px; padding: clamp(14px, 2.4vw, 24px); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); box-shadow: var(--ph-erhaben-stark); } .bb-bombe__feld { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--rk-wow-r-md); background: none; cursor: zoom-in; } .bb-bombe__feld:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 4px; } .bb-bombe__kacheln { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; } .bb-bombe__k { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--rk-wow-dark-raised); } .bb-bombe__k:nth-child(n+65) { display: none; } .bb-bombe__k img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (hover: hover) { .bb-bombe__k { transition: transform .25s var(--rk-wow-ease), box-shadow .25s var(--rk-wow-ease); } .bb-bombe__k:hover { z-index: 1; transform: scale(1.9); box-shadow: 0 0 0 2px var(--rk-wow-dark-gold), var(--rk-wow-sh-3); border-radius: 4px; } } @media (min-width: 640px) { .bb-bombe__kacheln { grid-template-columns: repeat(10, minmax(0, 1fr)); } .bb-bombe__k:nth-child(n+65) { display: block; } .bb-bombe__k:nth-child(n+101) { display: none; } } @media (min-width: 960px) { .bb-bombe__kacheln { grid-template-columns: repeat(12, minmax(0, 1fr)); } .bb-bombe__k:nth-child(n+101) { display: block; } .bb-bombe__k:nth-child(n+121) { display: none; } } /* 10 Reihen: Bombe und Kacheln daneben etwa gleich hoch (§44 b) */ .bb-bombe__zahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 0; } .bb-bombe__vor { color: var(--rk-wow-dark-muted); font-size: var(--rk-wow-fs-meta); letter-spacing: .1em; text-transform: uppercase; } .bb-bombe__n { color: var(--rk-wow-dark-gold); font-size: clamp(3rem, 2rem + 4vw, 4.8rem); line-height: .9; letter-spacing: var(--rk-wow-ls-tight); font-variant-numeric: tabular-nums; } .bb-bombe__text { margin: 0; max-width: 52ch; color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-meta); line-height: 1.55; } .bb-bombe__mehr { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-height: 48px; padding: 6px 8px 6px 20px; border: 1px solid var(--rk-wow-dark-gold); border-radius: var(--rk-wow-r-pill); background: transparent; color: var(--rk-wow-dark-ink); cursor: pointer; font-size: var(--rk-wow-fs-meta); } .bb-bombe__mehr svg, .bb-fakt__mehr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .bb-bombe__mehr svg { box-sizing: content-box; padding: 8px; border-radius: 50%; background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); } @media (hover: hover) { .bb-bombe__mehr:hover { background: color-mix(in srgb, var(--rk-wow-dark-gold) 16%, transparent); } } .bb-bombe__mehr:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 3px; } .bb-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .bb-fakt { display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-2); } .bb-fakt--knopf { padding: 0; } .bb-fakt__knopf { display: grid; gap: 4px; align-content: start; width: 100%; height: 100%; padding: 16px; border: 0; border-radius: inherit; background: none; color: inherit; text-align: left; cursor: pointer; } .bb-fakt__knopf:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; } .bb-fakt__mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--text-primary); font-size: var(--rk-wow-fs-tag); border-bottom: 1px solid var(--rk-gold-text); justify-self: start; padding-bottom: 2px; } @media (hover: hover) { .bb-fakt--knopf:hover { border-color: var(--text-primary); } .bb-fakt--knopf:hover .bb-fakt__mehr svg { translate: 3px 0; } } .bb-fakt__mehr svg { transition: translate .25s var(--rk-wow-ease); } .bb-fakt__zahl { color: var(--text-primary); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.05; letter-spacing: var(--rk-wow-ls-tight); } .bb-fakt__einheit { color: var(--rk-gold-text); font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; } .bb-fakt__text { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.45; } @media (min-width: 960px) { .bb-blick { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: center; } } :root[data-theme="dark"] .bb-bombe { box-shadow: var(--ph-erhaben-stark), 0 0 0 1px var(--rk-wow-dark-line-strong); } :root[data-theme="dark"] .bb-fakt { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-line); box-shadow: var(--ph-erhaben); } :root[data-theme="dark"] .bb-fakt__mehr { color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-gold); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bb-bombe { box-shadow: var(--ph-erhaben-stark), 0 0 0 1px var(--rk-wow-dark-line-strong); } :root:not([data-theme="light"]) .bb-fakt { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-line); box-shadow: var(--ph-erhaben); } :root:not([data-theme="light"]) .bb-fakt__mehr { color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-gold); } } @media (prefers-reduced-motion: no-preference) { html.bb-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .bb-bombe.is-in .bb-bombe__k { transition: opacity .45s var(--rk-wow-ease) var(--d, 0ms), transform .55s cubic-bezier(.34, 1.4, .64, 1) var(--d, 0ms), box-shadow .25s var(--rk-wow-ease); } html.bb-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .bb-bombe:not(.is-in) .bb-bombe__k { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(.3) rotate(var(--rot, 0deg)); } html.bb-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .bb-bombe.is-in.is-fertig .bb-bombe__k { transition: transform .25s var(--rk-wow-ease), box-shadow .25s var(--rk-wow-ease); } } /* ========================================================================== Bilderstrecke — rk-wow-bilderstrecke: alle Vorher-Bilder in einem eigenen Fenster (, showModal: Fokus drin, Esc, Fokus zurück) Kopf zentriert (FLOW §10), Filter als Schalter (aria-pressed), Raster mit Daumen (loading=lazy, erst beim Öffnen geladen), Klick öffnet die Großansicht darüber (zweites Fenster), Pfeile blättern in der gewählten Auswahl. ========================================================================== */ .bb-vorher { width: min(96vw, 1180px); max-height: 92vh; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rk-gold-text) 45%, transparent); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); color: var(--text-primary); box-shadow: var(--ph-erhaben-stark); } .bb-vorher::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 82%, transparent); } .bb-vorher__rahmen { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: 92vh; box-sizing: border-box; } .bb-vorher__kopf { display: grid; gap: 8px; justify-items: center; padding: clamp(20px, 3vw, 30px) clamp(16px, 4vw, 64px) 14px; text-align: center; border-bottom: 1px solid var(--rk-wow-line); } .bb-vorher__kopf .rk-wow-kicker { margin: 0; } .bb-vorher__titel { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.15; letter-spacing: var(--rk-wow-ls-tight); text-wrap: balance; } .bb-vorher__text { margin: 0; max-width: 62ch; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; } .bb-vorher__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; } .bb-vorher__filter-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 4px 16px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-card); color: var(--text-primary); cursor: pointer; font-size: var(--rk-wow-fs-tag); } .bb-vorher__filter-zahl { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-tint); font-variant-numeric: tabular-nums; } .bb-vorher__filter-knopf[aria-pressed="true"] { background: var(--text-primary); color: var(--rk-wow-card); border-color: var(--text-primary); } .bb-vorher__filter-knopf[aria-pressed="true"] .bb-vorher__filter-zahl { background: color-mix(in srgb, var(--rk-wow-card) 22%, transparent); } .bb-vorher__zahl { margin: 2px 0 0; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); } .bb-vorher__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0; padding: 14px clamp(12px, 3vw, 28px) clamp(18px, 3vw, 28px); overflow-y: auto; overscroll-behavior: contain; list-style: none; } .bb-vorher__raster li[hidden] { display: none; } .bb-vorher__bild { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--rk-wow-r-sm); background: var(--rk-wow-tint); cursor: zoom-in; } .bb-vorher__bild img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (hover: hover) { .bb-vorher__bild img { transition: transform .35s var(--rk-wow-ease); } .bb-vorher__bild:hover img { transform: scale(1.06); } } .bb-vorher__bild:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; } .bb-vorher__zu { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rk-wow-line-strong); border-radius: 50%; background: var(--rk-wow-card); color: var(--text-primary); box-shadow: var(--rk-wow-sh-2); cursor: pointer; } .bb-vorher__zu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } @media (min-width: 760px) { .bb-vorher__raster { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; } } /* Handy: Filter als eine waagerecht wischbare Reihe, Kopf knapper, damit das Raster den Platz bekommt */ @media (max-width: 639px) { .bb-vorher__kopf { gap: 6px; justify-items: start; padding: 18px 0 12px; text-align: left; } .bb-vorher__kopf > :not(.bb-vorher__filter) { padding-inline: 16px; } .bb-vorher__kopf > :is(.rk-wow-kicker, .bb-vorher__titel) { padding-inline: 16px 64px; } .bb-vorher__titel { font-size: var(--rk-wow-fs-lead); text-wrap: pretty; } .bb-vorher__text { font-size: var(--rk-wow-fs-tag); } .bb-vorher__filter { flex-wrap: nowrap; justify-content: flex-start; justify-self: stretch; overflow-x: auto; padding: 2px 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; } .bb-vorher__filter::-webkit-scrollbar { display: none; } .bb-vorher__filter-knopf { flex: 0 0 auto; } } :root[data-theme="dark"] .bb-vorher__filter-knopf[aria-pressed="true"] .bb-vorher__filter-zahl { background: color-mix(in srgb, var(--rk-wow-dark-bg) 16%, transparent); } :root[data-theme="dark"] .bb-vorher { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); box-shadow: var(--ph-erhaben-stark), 0 0 80px color-mix(in srgb, var(--rk-gold-text) 18%, transparent); } :root[data-theme="dark"] .bb-vorher__kopf { border-color: var(--rk-wow-dark-line); } :root[data-theme="dark"] .bb-vorher__filter-knopf { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-line-strong); } :root[data-theme="dark"] .bb-vorher__filter-knopf[aria-pressed="true"] { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); border-color: var(--rk-wow-dark-gold); } :root[data-theme="dark"] .bb-vorher__filter-zahl { background: var(--rk-wow-dark-raised); } :root[data-theme="dark"] .bb-vorher__zu { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border: 2px solid var(--rk-wow-dark-gold); } :root[data-theme="dark"] .bb-vorher__zu:is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bb-vorher { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); box-shadow: var(--ph-erhaben-stark), 0 0 80px color-mix(in srgb, var(--rk-gold-text) 18%, transparent); } :root:not([data-theme="light"]) .bb-vorher__kopf { border-color: var(--rk-wow-dark-line); } :root:not([data-theme="light"]) .bb-vorher__filter-knopf { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-line-strong); } :root:not([data-theme="light"]) .bb-vorher__filter-knopf[aria-pressed="true"] { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); border-color: var(--rk-wow-dark-gold); } :root:not([data-theme="light"]) .bb-vorher__filter-zahl { background: var(--rk-wow-dark-raised); } :root:not([data-theme="light"]) .bb-vorher__filter-knopf[aria-pressed="true"] .bb-vorher__filter-zahl { background: color-mix(in srgb, var(--rk-wow-dark-bg) 16%, transparent); } :root:not([data-theme="light"]) .bb-vorher__zu { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border: 2px solid var(--rk-wow-dark-gold); } :root:not([data-theme="light"]) .bb-vorher__zu:is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); } } /* ========================================================================== 3 Ausgangslage — rk-wow-markierung ========================================================================== */ .bb-ausgang { display: grid; gap: 24px; } .bb-mosaik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .bb-mosaik li:first-child { grid-row: span 2; } .bb-befund { display: grid; gap: 6px; height: 100%; } .bb-befund .bb-bildknopf { height: 100%; min-height: 150px; box-shadow: var(--rk-wow-sh-2); } .bb-befund .bb-bildknopf img { height: 100%; object-fit: cover; } .bb-mosaik li:not(:first-child) .bb-bildknopf { aspect-ratio: 1; height: auto; min-height: 0; } .bb-befund__marke { position: absolute; left: 10px; top: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--rk-wow-dark-gold); border-radius: 50%; background: color-mix(in srgb, var(--rk-wow-dark-bg) 76%, transparent); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-tag); font-variant-numeric: tabular-nums; box-sizing: border-box; } .bb-befund figcaption { color: var(--text-primary); font-size: var(--rk-wow-fs-meta); } @media (min-width: 760px) { .bb-mosaik { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bb-mosaik li:first-child { grid-column: span 2; } } @media (min-width: 1100px) { .bb-ausgang { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 52px); align-items: start; } } @media (prefers-reduced-motion: no-preference) { html.bb-js.rk-wow-motion .bb-mosaik li { transition: opacity .45s var(--rk-wow-ease) calc(var(--i) * 60ms), transform .45s var(--rk-wow-ease) calc(var(--i) * 60ms); } html.bb-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .bb-mosaik:not(.is-in) li { opacity: 0; transform: scale(.96); } } /* ========================================================================== 4 Neun Geschichten — rk-wow-brettleiste (Reiter als Bretter einer Schalung) Kai 22.10.2026: Die Leiste bleibt beim Lesen jeder Geschichte sichtbar. Desktop (ab 960 px): klebende Spalte links (das