/*
 * Beratungs-Startseite, Fassung 2 (teile/beratung.php), abgenommen 08.10.2026.
 * Baut auf schauseiten.css auf (Knöpfe, Formular, Beiträge, Engine-Grundlagen).
 * Farben aus der Marke (style.css): --blau, --blau-text, --tinte, --licht.
 * Alle Bewegungen nur über transform/opacity/clip-path; ohne Bewegung (reduced
 * motion) bleibt jeder Abschnitt vollständig und lesbar.
 */

.b2 { --b2-dunkel: #141B24; --b2-hell: #E4E9F2; overflow-x: clip; }
.b2-gross { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.8rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0 0 1.5rem; }

/* ---------- 1 · Held: hell und freundlich, der Bleistift zeichnet den Raum (Tom, 08.10.2026) ---------- */
/*
 * Zustände (gesetzt von beratung.js bzw. dem kleinen Skript im Held):
 *   .b2-zeichnen    Zeichnen läuft: Foto und Schrift verborgen, Linien entstehen auf der Leinwand
 *   .b2-skizze-voll die vollständige Skizze (mit Schraffuren) erscheint über den Linien
 *   .b2-stift-weg   der Bleistift hebt ab und verschwindet
 *   .b2-fertig      Foto blendet über, Skizze verschwindet, Schrift erscheint
 * Ohne Skript oder ohne Bewegung: sofort Foto und Schrift.
 */
.b2-held { position: relative; min-height: calc(100svh - var(--kopfhoehe)); display: grid; align-items: center; overflow: clip; isolation: isolate; background: #fff; color: var(--tinte); }
/* Raum und Skizze sind gleich groß (etwas größer als der Rahmen wegen der Verschiebung beim Scrollen). */
.b2-held__raum, .b2-held__skizze { position: absolute; inset: -12% 0; }
.b2-held__raum { z-index: -4; transition: opacity 700ms ease; }
.b2-held__skizze { z-index: -3; display: none; background: #fff; transition: opacity 700ms ease; }
.b2-held__raum img, .b2-held__skizze img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.b2-held__skizze img { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; }
.b2-held__skizze canvas { position: absolute; inset: 0; }
/* Bleistift: Spitze (unten rechts in der Grafik) sitzt am Ursprung, das Skript verschiebt ihn. */
.b2-held__bleistift { position: absolute; left: 0; top: 0; width: 0; height: 0; color: var(--tinte); opacity: 0; transition: opacity 300ms ease; will-change: transform; }
.b2-held__bleistift svg, .b2-dialog__bleistift svg { position: absolute; right: -.35rem; bottom: -.35rem; width: clamp(5.5rem, 9vw, 8rem); max-width: none; height: auto; transition: transform 300ms ease; }
.b2-held__licht { position: absolute; inset: -12% 0; z-index: -1; transition: opacity 700ms ease; background:
	radial-gradient(ellipse 36% 58% at 78% 54%, rgb(255 251 244 / .82), rgb(255 251 244 / .45) 55%, rgb(255 251 244 / 0) 85%); }
.b2-held__satz { position: relative; z-index: 1; padding-block: clamp(3rem, 8vh, 6rem); display: grid; justify-items: end; text-align: left; }
.b2-held__satz > * { max-width: 34rem; width: 100%; }
.b2-held__marke { text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; margin: 0 0 1rem; color: var(--blau-text); }
.b2-held__titel { color: var(--tinte); font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem); font-weight: 800; letter-spacing: -.04em; line-height: .98; margin: 0 0 1.5rem; }
.b2-zeile { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.b2-zeile > span { display: inline-block; }
.b2-held__text { font-size: 1.1rem; line-height: 1.6; color: var(--tinte); margin: 0 0 1.75rem; }

/* Zeichnen läuft */
.b2-zeichnen .b2-held__skizze, .b2-fertig .b2-held__skizze { display: block; }
.b2-zeichnen .b2-held__raum, .b2-zeichnen .b2-held__licht { opacity: 0; }
.b2-zeichnen .b2-held__satz > * { opacity: 0; }
.b2-stift-da .b2-held__bleistift { opacity: 1; }
.b2-skizze-voll .b2-held__skizze img { opacity: 1; }
.b2-stift-weg .b2-held__bleistift { opacity: 0; }
.b2-stift-weg .b2-held__bleistift svg { transform: translate(2.5rem, -3rem) rotate(8deg); }
/* Fertig: Foto über die Skizze blenden, dann Schrift */
.b2-fertig .b2-held__skizze { opacity: 0; pointer-events: none; }
.b2-fertig .b2-held__satz > * { animation: b2-einblenden 800ms var(--ease) both; }
.b2-fertig .b2-held__satz > *:nth-child(2) { animation-delay: 120ms; }
.b2-fertig .b2-held__satz > *:nth-child(3) { animation-delay: 240ms; }
.b2-fertig .b2-held__satz > *:nth-child(4) { animation-delay: 340ms; }
@keyframes b2-einblenden { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.b2-held__skizze { display: none !important; }
	.b2-held__raum, .b2-held__licht, .b2-held__satz > * { opacity: 1 !important; animation: none !important; }
}
@media (max-aspect-ratio: 4/5) {
	.b2-held { align-items: end; }
	.b2-held__raum img, .b2-held__skizze img { object-position: 50% 30%; }
	.b2-held__licht { background: linear-gradient(to top, rgb(255 251 244 / .95) 0%, rgb(255 251 244 / .8) 40%, rgb(255 251 244 / 0) 65%); }
	.b2-held__satz { justify-items: start; }
}

/* ---------- 2 · Leistungen: Bild und Text im Wechsel ---------- */
.b2-leistungen { padding-block: var(--abstand); background: #fff; }
.b2-leistung { display: grid; gap: 1.5rem clamp(2rem, 6vw, 5rem); align-items: center; margin-top: clamp(2.5rem, 6vw, 5rem); }
.b2-leistung figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; max-height: 70vh; box-shadow: var(--schatten); }
.b2-leistung img { width: 100%; height: 100%; object-fit: cover; }
.b2-leistung h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.02em; margin: 0 0 .75rem; color: var(--blau); }
.b2-leistung p { font-size: 1.08rem; line-height: 1.65; max-width: 34rem; }
@media (min-width: 860px) {
	.b2-leistung { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	.b2-leistung--rechts { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.b2-leistung--rechts figure { order: 2; }
}

/* ---------- 3 und 4 · dunkler Teil ---------- */
.b2-dunkel { background: var(--b2-dunkel); color: var(--b2-hell); --cw-ink: var(--b2-hell); }
.b2-dunkel h2, .b2-dunkel strong { color: #fff; }
.b2-struktur { padding-block: clamp(4rem, 12vh, 8rem) clamp(1rem, 4vh, 3rem); }
.b2-struktur__satz { max-width: 46rem; }
.b2-struktur__satz p { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.6; }

/* Spitze: Raum mit wechselnden Werkzeugen, Tragwerk bleibt. */
.b2-raum__buehne { height: 100svh; display: grid; align-content: center; justify-items: center; gap: 1.25rem; padding: calc(var(--kopfhoehe) + 1rem) var(--rand) 2rem; }
.b2-raum__bild { position: relative; width: min(100%, 120rem, (100svh - var(--kopfhoehe) - 12rem) * 16 / 9); aspect-ratio: 2752 / 1536; border-radius: var(--radius); overflow: hidden; background: #2A323D; }
.b2-raum__werkzeug { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Tragwerk: blau nachgezeichnet. Zeichnet sich am Anfang ein (--cw-p 0 bis 0.12), danach steht es still. */
.b2-raum__tragwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.b2-raum__tragwerk rect { fill: rgb(0 128 181 / .10); stroke: #39B6EA; stroke-width: 6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--cw-p, 1) / .12)); }
.b2-raum__kern { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); margin: 0; padding: .45rem .9rem; background: var(--blau-text); color: #fff; border-radius: 999px; font-size: clamp(.8rem, .6rem + .6vw, 1.05rem); white-space: nowrap; box-shadow: 0 6px 20px -6px rgb(0 0 0 / .5); }
.b2-raum__kern strong { margin-right: .4em; }
.b2-raum__namen { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; min-height: 2.6rem; }
.b2-raum__namen li { grid-area: 1 / 1; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.b2-raum__satz { max-width: 44rem; text-align: center; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); line-height: 1.5; margin: 0; }
.b2-raum__satz strong { color: #7FD0F2; }

/* ---------- 5 · Erfahrung ---------- */
.b2-erfahrung { background: #F7F3EC; padding-block: var(--abstand); }
.b2-erfahrung__raster { display: grid; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.b2-erfahrung__bild { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--schatten); }
.b2-erfahrung__bild img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; }
.b2-erfahrung__text p { font-size: 1.05rem; line-height: 1.65; }
.b2-erfahrung__satz { font-weight: 700; color: var(--blau-text); font-size: 1.15rem !important; }
@media (min-width: 960px) { .b2-erfahrung__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* ---------- 6 · Arbeitsweise (Schiene; große Bildschirme fahren seitlich) ---------- */
.b2-arbeitsweise { background: #fff; padding-block: var(--abstand); }
.b2-arbeitsweise.ist-breit { padding-block: 0; }
.b2-arbeitsweise.ist-breit .b2-arbeitsweise__buehne { height: 100svh; display: grid; align-content: center; gap: 2.5rem; overflow: hidden; }
.b2-arbeitsweise__schiene { display: grid; gap: 1rem; margin: 0; padding-inline: var(--rand); }
.ist-breit .b2-arbeitsweise__schiene { display: flex; gap: 1.5rem; width: max-content; padding-left: max(var(--rand), (100vw - var(--maxbreite)) / 2); }
.b2-grundsatz { border-top: 3px solid var(--blau); padding: 1.25rem 0 0; max-width: 34rem; }
.ist-breit .b2-grundsatz { width: 22rem; min-height: 15rem; padding: 1.5rem; background: #F4F6FA; border-radius: var(--radius); }
.b2-grundsatz dt { font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: .5rem; color: var(--tinte); }
.b2-grundsatz dd { margin: 0; line-height: 1.6; color: var(--tinte-leise); }

/* ---------- 7 · Anfrage: eingerichteter Raum, Licht folgt der Maus ---------- */
.b2-anfrage { background: #1A140F; color: #fff; }
.b2-anfrage__bild { position: relative; min-height: 80svh; display: grid; align-content: end; overflow: clip; isolation: isolate; padding-bottom: 3rem; }
.b2-anfrage__bild picture, .b2-anfrage__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Scheinwerfer (Tom, 08.10.2026: deutlich heller, der Raum soll wirklich zu sehen sein).
 * ::before hellt an der Mausposition auf (--cw-mx/--cw-my aus der Engine; ohne Maus
 * Mitte des Tischs), ::after dunkelt nur unten ab, wo die Schrift steht. */
.b2-anfrage__bild::before { content: ""; position: absolute; inset: 0; z-index: -1; mix-blend-mode: screen; background:
	radial-gradient(circle 30rem at calc(var(--cw-mx, .55) * 100%) calc(var(--cw-my, .45) * 100%), rgb(255 226 170 / .55), rgb(255 226 170 / .18) 45%, rgb(0 0 0 / 0) 75%); }
.b2-anfrage__bild::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
	linear-gradient(to top, rgb(26 20 15 / .9) 0%, rgb(26 20 15 / .55) 26%, rgb(26 20 15 / 0) 48%); }
.b2-anfrage__wo, .b2-anfrage h2 { text-shadow: 0 2px 24px rgb(0 0 0 / .45); }
.b2-anfrage__satz { padding-block: clamp(2.5rem, 6vw, 4rem); }
.b2-anfrage__wo { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0 0 1rem; max-width: 16ch; }
.b2-anfrage h2 { color: #fff; border-left: 4px solid var(--licht); padding-left: .6rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); margin: 0; }
.b2-anfrage__formular { padding-block: 0 clamp(3rem, 7vw, 5rem); }
.b2-anfrage__formular > * { background: #fff; color: var(--tinte); padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .6); max-width: 48rem; margin-top: -2rem; position: relative; }
.b2-anfrage__formular .formular { max-width: none; }

/* Ohne Bewegung: alle Werkzeuge untereinander sichtbar, letztes Bild steht. */
@media (prefers-reduced-motion: reduce) {
	.b2-raum__werkzeug { opacity: 0 !important; }
	.b2-raum__werkzeug:last-of-type { opacity: 1 !important; }
	.b2-raum__namen { grid-auto-flow: row; }
	.b2-raum__namen li { grid-area: auto; opacity: 1 !important; font-size: 1.2rem; }
	.b2-raum__satz { opacity: 1 !important; }
	.b2-raum__tragwerk rect { stroke-dashoffset: 0; }
}
.ohne-engine .b2-raum__werkzeug:not(:last-of-type) { opacity: 0; }
.ohne-engine .b2-raum__tragwerk rect { stroke-dashoffset: 0; }

/* ---------- Anfrage im eigenen Fenster (Tom, 08.10.2026) ---------- */
.b2-dialog { width: min(48rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; border-radius: var(--radius); background: #fff; color: var(--tinte); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .45); overflow: auto; overscroll-behavior: contain; }
.b2-dialog::backdrop { background: rgb(20 27 36 / .55); backdrop-filter: blur(3px); }
.b2-dialog__kopf { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.25rem, 3vw, 2.25rem); background: #fff; border-bottom: 1px solid var(--linie); }
.b2-dialog__kopf h2 { margin: 0; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); color: var(--blau); }
.b2-dialog__zu { border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--tinte); padding: .25rem .5rem; }
.b2-dialog__flaeche { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem); }
.b2-dialog__flaeche canvas { position: absolute; inset: 0; pointer-events: none; z-index: 1; transition: opacity 450ms ease; }
.b2-dialog__bleistift { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; color: var(--tinte); pointer-events: none; transition: opacity 300ms ease; }
.b2-dialog__inhalt { opacity: 0; transition: opacity 450ms ease; }
.b2-dialog__inhalt .formular { max-width: none; }
.b2-dialog.ist-fertig .b2-dialog__inhalt { opacity: 1; }
.b2-dialog.ist-fertig canvas, .b2-dialog.ist-fertig .b2-dialog__bleistift { opacity: 0; }