/* Startseite – neue Abschnitte (14.10.2026), gehört zu js/start-neu.js. Schriften + Farben von brianto.co (style.css).
   Thomas 14.10.: Kennzahlen „langweilig, altmodisch“ → große feine Zahlen, die hochzählen; schwarzer Block mit „sehr, sehr viel“
   → geteilt in Arbeiten (dunkel) · Werte (Mint) · Für wen (Creme); Leistungen: Desktop wandern die Kacheln beim Scrollen nach links,
   Handy untereinander; Discovery-Knopf: Hover war grün auf grün. */

:root { --bp-gruen: var(--swatch-var-2425); --bp-creme: var(--swatch-var-3854); --bp-tinte: var(--swatch-var-5803); --bp-mint: var(--swatch-var-6896);
	--bp-sans-l: "InterTight-Light", "Helvetica Neue", Arial, sans-serif; --bp-sans-r: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif;
	--bp-serif: "FrauncesFein", Georgia, serif; --bp-ease: cubic-bezier(.44, 0, .28, .99); }

/* Einblenden beim Scrollen (dezent) */
.zeig { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--bp-ease), transform 1s var(--bp-ease); transition-delay: calc(var(--i, 0) * .12s); }
.zeig.da { opacity: 1; transform: none; }

/* gemeinsamer Abschnittskopf: kleines Etikett, Überschrift, Einleitung */
.abschnitt-kopf { max-width: 820px; }
.etikett { font-family: var(--bp-sans-r) !important; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-gruen); margin-bottom: 18px; }
.abschnitt-kopf h2 { margin-bottom: 22px; }
.abschnitt-kopf .einleitung { font-size: 18px; line-height: 1.6; }

/* ---------- 1. Kennzahlen ---------- */
.zahlen { background: var(--bp-creme); padding: 48px 0 24px; }
.zahlen-reihe { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(28, 25, 23, .14); border-bottom: 1px solid rgba(28, 25, 23, .14); }
.zahl { padding: 34px 28px 30px; }
.zahl + .zahl { border-left: 1px solid rgba(28, 25, 23, .14); }
.zahl .wert { display: block; font-family: var(--bp-serif); font-weight: 250; font-size: clamp(64px, 7.2vw, 112px); line-height: .95; color: var(--bp-gruen); font-variant-numeric: lining-nums; }
.zahl .text { display: block; margin-top: 16px; font-family: var(--bp-sans-r); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(28, 25, 23, .72); }

/* ---------- 2. Leistungen ---------- */
/* body + .page-container haben in style.css overflow hidden – das verhindert „sticky“; clip schneidet genauso ab, lässt sticky aber zu */
body, .page-container { overflow-x: clip; overflow-y: visible; }
.leistungen { background: var(--bp-creme); padding-top: 96px; position: relative; }
.leistungen-kopf h2 { margin-bottom: 18px; }
.leistungen-kopf p { font-size: 18px; max-width: 760px; }
.leistungen-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.leistungen-spur { display: flex; gap: 24px; will-change: transform; padding-left: max(12px, calc((100vw - 1296px) / 2)); padding-right: 12px; }
.leistung { flex: none; width: 460px; min-height: 440px; display: flex; flex-direction: column; padding: 38px 36px 34px; border: 1px solid var(--bp-gruen); border-radius: 3px;
	background: linear-gradient(135deg, #ffffff 0%, var(--bp-mint) 100%); transition: transform .4s var(--bp-ease), box-shadow .4s; }
@media (pointer: fine) { .leistung:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -24px rgba(28, 25, 23, .35); } }
.leistung .kicker { font-family: var(--bp-sans-r) !important; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-gruen); margin-bottom: 26px; }
.leistung .titel { font-family: var(--bp-sans-l); font-size: 30px; line-height: 1.2; color: var(--bp-tinte); margin-bottom: 18px; }
.leistung .text { font-size: 17px; line-height: 1.55; color: rgba(28, 25, 23, .8); margin-bottom: 26px; }
.leistung .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 3a. Arbeiten (dunkel) ---------- */
.arbeit { background: var(--bp-tinte); color: var(--bp-creme); padding: 112px 0; }
.arbeit .einleitung { color: rgba(253, 250, 246, .8); }
.faelle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 64px; }
.fall { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 36px 34px; border: 1px solid rgba(253, 250, 246, .16); border-radius: 3px; color: var(--bp-creme) !important; text-decoration: none;
	transition: border-color .35s, background-color .35s, opacity 1s var(--bp-ease), transform 1s var(--bp-ease); }
.fall:nth-child(2) { --i: 1; } .fall:nth-child(3) { --i: 0; } .fall:nth-child(4) { --i: 1; }
@media (pointer: fine) { .fall:hover { border-color: var(--bp-gruen); background-color: rgba(61, 158, 142, .07); } }
.fall .nr { font-family: var(--bp-serif); font-weight: 250; font-size: 56px; line-height: .9; color: var(--bp-gruen); }
.fall .ort { font-family: var(--bp-sans-r) !important; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-gruen); margin-bottom: 14px; }
.fall h3 { color: var(--bp-creme); font-size: 26px; margin-bottom: 14px; }
.fall .text { font-size: 16px; line-height: 1.6; color: rgba(253, 250, 246, .76); margin-bottom: 26px; }

/* ---------- 3b. Werte (Mint, Treppe) ---------- */
.werte { background: var(--bp-mint); color: var(--bp-tinte); padding: 112px 0 124px; }
.werte h2 { color: var(--bp-tinte) !important; }
.werte h3 { font-size: 30px; color: var(--bp-gruen); margin-bottom: 18px; }
.werte .einleitung { color: rgba(28, 25, 23, .8); }
.treppe { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
.stufe { border-left: 1px solid var(--bp-gruen); padding: 4px 28px 0 22px; margin-top: calc(var(--i) * 64px); min-height: 230px; }
.stufe .nr { display: block; font-family: var(--bp-serif); font-weight: 250; font-size: 44px; line-height: 1; color: var(--bp-gruen); margin-bottom: 30px; }
.stufe h5 { font-size: 22px; line-height: 1.25; color: var(--bp-tinte); margin-bottom: 14px; }
.stufe p { font-size: 16px; line-height: 1.55; color: rgba(28, 25, 23, .75); max-width: 230px; }

/* ---------- 3c. Für wen (Creme, große Aussage) ---------- */
.fuerwen { background: var(--bp-creme); padding: 112px 0 96px; border-bottom: 1px solid rgba(28, 25, 23, .1); }
.fuerwen .gross { font-family: var(--bp-serif) !important; font-weight: 250; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.18; color: var(--bp-tinte); max-width: 960px; margin: 34px 0 48px; }
.fuerwen .liste { list-style: none; padding: 0; margin: 0 0 44px; max-width: 960px; counter-reset: wer; }
.fuerwen .liste li { counter-increment: wer; display: grid; grid-template-columns: 70px 1fr; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(28, 25, 23, .14);
	font-family: var(--bp-sans-l); font-size: 22px; line-height: 1.4; color: var(--bp-tinte); }
.fuerwen .liste li:last-child { border-bottom: 1px solid rgba(28, 25, 23, .14); }
.fuerwen .liste li::before { content: "0" counter(wer); font-family: var(--bp-serif); font-weight: 250; font-size: 26px; color: var(--bp-gruen); }
.fuerwen .liste li:nth-child(2) { --i: 1; } .fuerwen .liste li:nth-child(3) { --i: 2; }
.fuerwen .schluss { font-size: 18px; line-height: 1.6; max-width: 760px; color: rgba(28, 25, 23, .8); }
.fuerwen .schluss em { font-style: italic; color: var(--bp-gruen); }

/* ---------- 4. Discovery-Knopf: Hover war grün auf grün (unsichtbar) ---------- */
.background-green .btn-brianto-reverse:hover { background-color: transparent !important; color: var(--bp-creme) !important; border-color: var(--bp-creme) !important; box-shadow: inset 0 0 0 1px var(--bp-creme); }

/* ---------- Handy / Tablet ---------- */
@media (max-width: 991px) {
	.leistungen-pin { position: static; height: auto; display: block; overflow: visible; }
	.leistungen-spur { flex-direction: column; gap: 16px; padding: 40px 12px 72px; transform: none !important; max-width: 720px; margin: 0 auto; }
	.leistung { width: auto; min-height: 0; padding: 30px 26px 28px; }
	.leistung .titel { font-size: 26px; }
	.faelle { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
	.fall { grid-template-columns: 1fr; padding: 28px 24px; }
	.fall .nr { font-size: 44px; margin-bottom: 12px; }
	.treppe { grid-template-columns: 1fr; margin-top: 48px; }
	.stufe { margin-top: 0; margin-left: calc(var(--i) * 16px); min-height: 0; padding: 4px 16px 30px 18px; }
	.stufe .nr { margin-bottom: 14px; font-size: 36px; }
	.stufe p { max-width: none; }
	.arbeit, .werte, .fuerwen { padding: 76px 0; }
}
@media (max-width: 575px) {
	.zahlen { padding: 28px 0 8px; }
	.zahl { padding: 22px 10px 20px; }
	.zahl .wert { font-size: 46px; }
	.zahl .text { font-size: 10.5px; letter-spacing: .08em; margin-top: 10px; }
	.fuerwen .liste li { grid-template-columns: 46px 1fr; font-size: 19px; }
	.abschnitt-kopf .einleitung, .leistungen-kopf p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.zeig { opacity: 1 !important; transform: none !important; transition: none !important; }
	.leistungen-pin { position: static; height: auto; }
}

/* Korrektur nach Sichtprüfung (14.10.): Blocs-Regeln färben p/h4 erzwungen dunkel → Farben in den neuen Abschnitten festsetzen */
.arbeit .abschnitt-kopf h2, .fall h3 { color: var(--bp-creme) !important; }
.arbeit .einleitung { color: rgba(253, 250, 246, .8) !important; }
.fall .ort, .etikett, .leistung .kicker, .werte h3 { color: var(--bp-gruen) !important; }
.fall .text { color: rgba(253, 250, 246, .76) !important; }
.werte h2, .werte .stufe h5, .fuerwen h2, .fuerwen .gross, .fuerwen .liste li, .leistung .titel { color: var(--bp-tinte) !important; }
.werte .einleitung, .werte .stufe p, .fuerwen .schluss, .leistung .text { color: rgba(28, 25, 23, .8) !important; }
.fuerwen .schluss em { color: var(--bp-gruen) !important; }
.zahl .wert { color: var(--bp-gruen) !important; } .zahl .text { color: rgba(28, 25, 23, .72) !important; }

/* ===== Runde 2 (Thomas 14.10.) ===== */
/* Texte einheitlich über die volle Inhaltsbreite („gefallen tut es mir anders besser“) */
.abschnitt-kopf, .abschnitt-kopf .einleitung, .leistungen-kopf p, .fuerwen .gross, .fuerwen .liste, .fuerwen .schluss { max-width: none; }

/* Überschriften nicht unschön umbrechen */
@media (min-width: 992px) {
	.abschnitt-kopf h2, .werte h3 { white-space: nowrap; }
	.stufe h5 { white-space: nowrap; font-size: 20px; }
	.leistung .titel { white-space: nowrap; }
}

/* „How Brianto works“: statt kräftigem Mint ein ganz zarter Ton */
.werte { background: #f1f7f5; border-top: 1px solid rgba(61, 158, 142, .18); border-bottom: 1px solid rgba(61, 158, 142, .18); }

/* Cases: Nummer + Ort als Kopfzeile über die ganze Karte, Knöpfe unten auf einer Linie */
.faelle { align-items: stretch; }
.fall { display: flex; flex-direction: column; gap: 0; }
.fall-kopf { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.fall-kopf .nr { flex: none; }
.fall-kopf .ort { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fall-inhalt { display: flex; flex-direction: column; flex: 1; }
.fall-inhalt .btn { margin-top: auto; align-self: flex-start; }
.fall .text { margin-bottom: 30px; }

/* Leistungen – Vorschlag: größere Kacheln, große Ziffer, Fortschrittslinie, Kachel im Blick hervorgehoben */
.leistung { position: relative; width: 520px; min-height: 470px; padding: 40px 40px 36px; overflow: hidden; }
.leistung .ziffer { position: absolute; right: 30px; top: 18px; font-family: var(--bp-serif); font-weight: 250; font-size: 120px; line-height: 1; color: rgba(61, 158, 142, .22); pointer-events: none; }
.leistung .kicker { margin-bottom: 70px; }
.leistung .titel { font-size: 28px; }
.leistungen-fortschritt { position: absolute; left: 0; right: 0; bottom: 7vh; display: flex; align-items: center; gap: 22px; }
.leistungen-fortschritt .zaehler { font-family: var(--bp-sans-r); font-size: 12.5px; letter-spacing: .12em; color: var(--bp-gruen); min-width: 64px; }
.leistungen-fortschritt .linie { flex: 1; max-width: 420px; height: 1px; background: rgba(28, 25, 23, .15); position: relative; }
.leistungen-fortschritt .linie i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 0; background: var(--bp-gruen); }
@media (min-width: 992px) {
	.leistungen-spur .leistung { opacity: .55; transition: opacity .5s, transform .4s var(--bp-ease), box-shadow .4s; }
	.leistungen-spur .leistung.aktiv { opacity: 1; }
}
@media (max-width: 991px) {
	.leistungen-fortschritt { display: none; }
	.leistung { width: auto; min-height: 0; }
	.leistung .ziffer { font-size: 84px; }
	.leistung .kicker { margin-bottom: 40px; }
	.fall-kopf .ort { white-space: normal; }
}

/* ===== Runde 3 (Thomas 14.10.): „How Brianto works“ mit sichtbarer Bewegung, die beim Scrollen mitläuft – auch rückwärts wie die Leistungs-Kacheln.
   --q (0 → 1) setzt js/start-neu.js je Stufe aus der Scrollposition: Linie zeichnet sich, Ziffer steigt auf, dann Titel + Text.
   (Startbild-Bewegung probiert und wieder entfernt – Thomas: „gefällt mir nicht“.) ===== */
.stufe { position: relative; border-left: 0; --q: 1; }
.stufe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--bp-gruen); transform-origin: top;
	transform: scaleY(clamp(0, calc(var(--q) * 2.2), 1)); }
.stufe .nr { opacity: clamp(0, calc((var(--q) - .2) * 3), 1); transform: translateY(calc((1 - clamp(0, calc((var(--q) - .2) * 2.2), 1)) * 52px)); }
.stufe h5 { opacity: clamp(0, calc((var(--q) - .4) * 3), 1); transform: translateY(calc((1 - clamp(0, calc((var(--q) - .4) * 2.4), 1)) * 34px)); }
.stufe p { opacity: clamp(0, calc((var(--q) - .55) * 3), 1); transform: translateY(calc((1 - clamp(0, calc((var(--q) - .55) * 2.4), 1)) * 34px)); }
@media (prefers-reduced-motion: reduce) { .stufe { --q: 1 !important; } }


/* ===== Startbild-Bereich Ideen 1 + 2 (Thomas 14.10.: „1 und 2, mach mal“) – das Foto selbst bleibt ruhig =====
   1. Überschrift baut sich auf: die drei Wörter steigen nacheinander aus ihrer Zeile, danach Text + Knopf.
   2. „Connected.“ wird verbunden: feine grüne Linie zeichnet sich vom Wort zum Foto (Desktop) bzw. als Unterstreichung (Handy).
   Ablauf startet, sobald die Schriften bereit sind (html.hero-los, js/start-neu.js); html.hero-anim setzt ein Mini-Skript im <head>. */
.hero-text h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-text h1 .wi { display: inline-block; }
.hero-text h1 .w-verbunden { position: relative; display: inline-block; vertical-align: top; } /* trägt die Linie; Maske sitzt im inneren .w */
.verbindung { position: absolute; display: block; pointer-events: none; height: 1px; background: var(--bp-gruen); transform-origin: left center; transform: scaleX(0); }
.verbindung::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bp-gruen); opacity: 0; transition: opacity .4s ease .9s; }
/* Desktop: vom Wortende waagrecht zum Foto (Breite setzt js/start-neu.js) */
@media (min-width: 992px) { .verbindung { left: calc(100% + 22px); top: .58em; width: var(--verbindung-breite, 0px); } }
/* Handy/Tablet: Unterstreichung unter dem Wort, kein Punkt */
@media (max-width: 991px) { .verbindung { left: 0; right: 0; bottom: .02em; } .verbindung::after { display: none; } }

html.hero-anim .hero-text h1 .wi { transform: translateY(105%); }
html.hero-anim .hero-text > p, html.hero-anim .hero-text .mini-btn-div { opacity: 0; transform: translateY(16px); }
html.hero-los .hero-text h1 .wi { transform: none; transition: transform 1.1s var(--bp-ease); }
html.hero-los .hero-text h1 > .w:nth-child(1) .wi { transition-delay: .1s; }
html.hero-los .hero-text h1 > .w:nth-child(2) .wi { transition-delay: .3s; }
html.hero-los .hero-text h1 .w-verbunden .wi { transition-delay: .5s; }
html.hero-los .hero-text > p, html.hero-los .hero-text .mini-btn-div { opacity: 1; transform: none; transition: opacity .9s var(--bp-ease), transform .9s var(--bp-ease); }
html.hero-los .hero-text > p:first-child { transition-delay: 0s; }
html.hero-los .hero-text > p:nth-of-type(2) { transition-delay: .8s; }
html.hero-los .hero-text .mini-btn-div { transition-delay: .95s; }
html.hero-los .verbindung { transform: scaleX(1); transition: transform 1.2s var(--bp-ease) 1.15s; }
html.hero-los .verbindung::after { opacity: 1; transition-delay: 2.1s; }
/* ohne Bewegung: Linie gleich fertig */
html:not(.hero-anim) .verbindung { transform: scaleX(1); }
html:not(.hero-anim) .verbindung::after { opacity: 1; }
/* Notfall: lädt js/start-neu.js nicht, wird nach 3 s trotzdem alles gezeigt */
html.hero-anim:not(.hero-los) .hero-text h1 .wi, html.hero-anim:not(.hero-los) .hero-text > p, html.hero-anim:not(.hero-los) .hero-text .mini-btn-div { animation: hero-notfall 0s 3s forwards; }
@keyframes hero-notfall { to { opacity: 1; transform: none; } }

/* ===== Schrift-Ordnung (Thomas 14.10.: „warum haben wir unterschiedliche schriftgrössen … bei frage und antwort … thinking out loud wieder eine andere?“)
   Jeder Abschnitt: Etikett (12,5 px) · Überschrift Inter Light 48/38 px · Einleitung 18/17 px.
   Frage bzw. Kernaussage: Fraunces Light grün 30/24 px (How Brianto works + Who it's for gleich). Fließtext 18/17 px.
   Ausnahme: die großen Fraunces-Zeilen oben („Brand. Revenue. Connected.“) und unten („Start with a Discovery Session.“). ===== */
.einleitung, .fliesstext, .fuerwen .schluss, .leistungen-kopf .einleitung { font-size: 18px !important; line-height: 1.6; }
.werte h3, .kernaussage { font-family: var(--bp-serif) !important; font-weight: 300; font-size: 30px; line-height: 1.3; color: var(--bp-gruen) !important; letter-spacing: 0; }
.kernaussage { margin: 30px 0 40px; }
.werte h3 { margin-bottom: 18px; }
.leistungen-kopf .etikett { margin-bottom: 18px; font-size: 12.5px !important; }
/* Blog-Kopf wie die anderen Abschnitte: Etikett, Inter Light, linksbündig */
#bloc-18-42451 .col { text-align: left !important; }
.blog-kopf-titel { color: var(--bp-tinte) !important; margin-bottom: 22px !important; }
@media (max-width: 991px) {
	.einleitung, .fliesstext, .fuerwen .schluss, .leistungen-kopf .einleitung { font-size: 17px !important; }
	.werte h3, .kernaussage { font-size: 24px; }
}

/* Fließtext auch in Kärtchen gleich groß (Thomas 14.10.: „die blogschrift ist noch immer kleiner?“ – vorher Blog-Kurztext 14,4 px,
   Leistungen 17, Cases 16, Treppe 16 px). Kategorie/Datum/„Read more“ bleiben kleine Beschriftungen. */
#bloc-18-42451 .mini-cms-card p.mb-2, .leistung .text, .fall .text, .stufe p { font-family: var(--bp-sans-l) !important; font-size: 18px !important; line-height: 1.6 !important; }
@media (max-width: 991px) { #bloc-18-42451 .mini-cms-card p.mb-2, .leistung .text, .fall .text, .stufe p { font-size: 17px !important; } }

/* Cases Handy (Thomas 14.10.: „02 und 03 nicht bündig … alles was zweizeilig ist, ist falsch“): zweizeilige Ort-Zeile hing unter die Ziffer.
   Jetzt steht immer die LETZTE Zeile auf der Grundlinie der Ziffer (ein- wie zweizeilig gleich). */
@media (max-width: 991px) { .fall-kopf { align-items: last baseline; } }

/* Startbereich Handy (Thomas 14.10., Variante A): Foto stand schon da, bevor sich die Überschrift aufbaute → jetzt der Reihe nach:
   Etikett, Wörter, Text, Knopf, dann blendet das Foto weich ein. Desktop unverändert (Text und Foto nebeneinander). */
@media (max-width: 991px) {
	html.hero-anim #bloc-3 img { opacity: 0; transform: translateY(18px); }
	html.hero-los #bloc-3 img { opacity: 1; transform: none; transition: opacity 1s var(--bp-ease) 1.05s, transform 1s var(--bp-ease) 1.05s; }
	html.hero-anim:not(.hero-los) #bloc-3 img { animation: hero-notfall 0s 3s forwards; }
}

/* Treppe Handy – Variante B (Thomas 14.10.: „B gefällt mir besser“; vorher „klebte“ es aneinander): Luft zwischen den Stufen,
   Linie nur so lang wie die Stufe, kleinere Einrückung. (Variante A = Liste wie „Who it's for“ verworfen.) */
@media (max-width: 991px) {
	.treppe { margin-top: 28px; }
	.stufe { margin-left: calc(var(--i) * 12px) !important; padding: 2px 0 0 18px !important; margin-bottom: 34px; }
	.stufe p { margin-bottom: 0; }
}

/* Startbild Desktop (Thomas 14.10.: „es ist das erste was da ist und steht da völlig bewegungslos bevor es mit dem text losgeht“):
   blendet jetzt MIT der Überschrift ein und steigt leicht auf – gleiche Bewegung wie die Wörter, kein Zoom/Ausschnitt. Handy: siehe oben (nach dem Text). */
@media (min-width: 992px) {
	html.hero-anim #bloc-3 img { opacity: 0; transform: translateY(28px); }
	html.hero-los #bloc-3 img { opacity: 1; transform: none; transition: opacity 1.3s var(--bp-ease) .2s, transform 1.4s var(--bp-ease) .2s; }
	html.hero-anim:not(.hero-los) #bloc-3 img { animation: hero-notfall 0s 3s forwards; }
}

/* „Who it's for“ (Thomas 14.10.: „01, 02, 03 und der Text daneben – falsch bündig“): Ziffern waren 26 px neben 19/22 px Text und
   ragten oben hinaus. Ziffern- und Versalhöhe beider Schriften sind gleich (je ~72 % der Größe) → gleiche Größe = oben und unten bündig. */
.fuerwen .liste li::before { font-size: 1em; line-height: inherit; }

/* Inhalt unter dem Hero erst nach dem Auftakt (18.10.2026, wie die Unterseiten): Kennzahlen, Leistungen, Arbeit, Werte, Für wen, FAQ, Abschluss, Fußzeile
   erscheinen 1,5 s nach dem Hero-Start ruhig mit leichtem Aufsteigen (html.start-fertig aus js/start-neu.js). Nur mit html.hero-anim (nicht bei
   „Bewegung reduzieren“); Notfall nach 4,5 s sichtbar. Scroll-nach-oben-Button und Skripte bleiben unberührt. */
html.hero-anim #bloc-3 ~ :is(section, .bloc) { transition: opacity .9s cubic-bezier(.44, 0, .28, .99), transform .9s cubic-bezier(.44, 0, .28, .99); }
html.hero-anim:not(.start-fertig) #bloc-3 ~ :is(section, .bloc) { opacity: 0; transform: translateY(18px); animation: start-notfall 0s 4.5s forwards; }
@keyframes start-notfall { to { opacity: 1; transform: none; } }

/* ===== Startseite nach Andriyans Brief v4.1 – preview2 (24.10.2026, Thomas: „im stil unserer bisherigen website“): nur Bausteine, die es schon gibt.
   Schriften: Etikett 12,5 px · Überschrift Inter Light · Fließtext 18/17 px · Frage/Kernaussage Fraunces grün · Textlinks DM Mono grün (wie „All articles —>“). ===== */

/* --- Hero: Aufbau wie vorher (Etikett, H1, Satz, Button), Textspalte 7/12, Foto 5/12 --- */
.h1-zeile2 { display: block; margin-top: 22px; font-family: var(--bp-sans-l) !important; font-size: 22px; line-height: 1.4; letter-spacing: 0; color: var(--bp-tinte) !important; }
.hero-antwort { margin: 18px 0 0 !important; max-width: 600px; }
.hero-ergebnisse { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 20px 0 0; padding: 0; }
.hero-ergebnisse li { position: relative; padding-left: 17px; font-family: var(--bp-sans-l); font-size: 16px; line-height: 1.5; color: var(--bp-tinte); }
.hero-ergebnisse li::before { content: ""; position: absolute; left: 0; top: calc(.75em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--bp-gruen); }
.hero-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
html.hero-anim .hero-text .h1-zeile2, html.hero-anim .hero-text .hero-ergebnisse { opacity: 0; transform: translateY(16px); }
html.hero-los .hero-text .h1-zeile2 { opacity: 1; transform: none; transition: opacity .9s var(--bp-ease) .65s, transform .9s var(--bp-ease) .65s; }
html.hero-los .hero-text .hero-ergebnisse { opacity: 1; transform: none; transition: opacity .9s var(--bp-ease) .9s, transform .9s var(--bp-ease) .9s; }
html.hero-los .hero-text > p.hero-antwort { transition-delay: .8s; }
html.hero-anim:not(.hero-los) .hero-text .h1-zeile2, html.hero-anim:not(.hero-los) .hero-text .hero-ergebnisse { animation: hero-notfall 0s 3s forwards; }
@media (max-width: 991px) {
	.hero-antwort { margin-left: auto !important; margin-right: auto !important; }
	.hero-ergebnisse { flex-direction: column; align-items: center; gap: 4px; }
	.hero-knoepfe { justify-content: center; }
}
/* Handy: H1, Antwort-Absatz und Haupt-Button auf dem ersten Bildschirm (ab 360 × 640) */
@media (max-width: 575px) {
	#bloc-3 > .container { padding-top: 22px !important; }
	.hero-text .hero-etikett { margin-bottom: 14px !important; font-size: 14px !important; }
	.hero-text h1 { margin-top: 0 !important; }
	.h1-zeile2 { margin-top: 12px; font-size: 18px; }
	.hero-antwort { margin-top: 14px !important; font-size: 16px !important; line-height: 1.55 !important; }
	.hero-ergebnisse { margin-top: 12px; }
	.hero-ergebnisse li { font-size: 14.5px; }
	.hero-knoepfe { margin-top: 18px; gap: 10px; }
}

/* --- lange Überschriften: dürfen umbrechen (die alten passten auf eine Zeile) --- */
@media (min-width: 992px) { .luecken .abschnitt-kopf h2, .arbeit .abschnitt-kopf h2, .warum .abschnitt-kopf h2 { white-space: normal; } }

/* --- Abschnitt 3: nummerierte Liste wie „Who it's for“, jede Zeile klappt auf --- */
.luecken { border-top: 1px solid rgba(28, 25, 23, .1); }
.luecken-liste { max-width: none; margin: 34px 0 44px; border-bottom: 1px solid rgba(28, 25, 23, .14); }
.luecke { border-top: 1px solid rgba(28, 25, 23, .14); }
.luecke summary { list-style: none; display: grid; grid-template-columns: 70px 1fr auto; align-items: baseline; padding: 22px 0; cursor: pointer; }
.luecke summary::-webkit-details-marker { display: none; }
.luecke summary .nr { font-family: var(--bp-serif); font-weight: 250; font-size: 22px; color: var(--bp-gruen) !important; }
.luecke summary h3 { margin: 0; font-family: var(--bp-sans-l) !important; font-weight: 300; font-size: 22px; line-height: 1.4; color: var(--bp-tinte) !important; transition: color .3s; }
.luecke summary .pfeil { font-family: "DMMono-Light", monospace; font-size: 14px; color: var(--bp-gruen); transition: transform .35s var(--bp-ease); }
.luecke[open] summary .pfeil { transform: rotate(90deg); }
@media (pointer: fine) { .luecke summary:hover h3 { color: var(--bp-gruen) !important; } }
.luecke summary:focus-visible { outline: 2px solid var(--bp-gruen); outline-offset: 4px; }
.luecke-inhalt { padding: 0 0 30px 70px; }
.luecke-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.luecke-teil .etikett { margin-bottom: 10px; }
.luecke-teil p:not(.etikett) { margin: 0; font-family: var(--bp-sans-l) !important; font-size: 18px !important; line-height: 1.6 !important; color: rgba(28, 25, 23, .8) !important; }
.luecke-weiter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; margin: 28px 0 0; }
.luecke-weiter .etikett { margin: 0; }
.luecke-weiter a, .luecken-cta .luecken-link { font-family: "DMMono-Light", monospace; font-size: 14px; color: var(--bp-gruen) !important; text-decoration: none !important; }
.luecke-weiter a:hover, .luecken-cta .luecken-link:hover { text-decoration: underline !important; text-underline-offset: 4px; }
/* 25.10. Thomas: am Desktop Etikett links, beide Artikel-Links untereinander rechts davon (vorher brach der zweite unter das Etikett) */
@media (min-width: 768px) { .luecke-weiter { display: grid; grid-template-columns: auto 1fr; } .luecke-weiter a { grid-column: 2; justify-self: start; } }
.luecken-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 8px; } /* 25.10. Thomas: auch am Desktop Frage oben, Link darunter */
.luecken-cta .kernaussage { margin: 0; }
@media (max-width: 991px) {
	.luecke summary { grid-template-columns: 46px 1fr auto; gap: 0 10px; }
	.luecke summary h3 { font-size: 19px; }
	.luecke-inhalt { padding-left: 0; }
	.luecke-spalten { grid-template-columns: 1fr; gap: 22px; }
	.luecke-teil p:not(.etikett) { font-size: 17px !important; }
}

/* --- Abschnitt 4: Kacheln wie vorher (Beschriftung, Ziffer, Titel), Text in der Kachel-Schrift --- */
.leistung .titel { margin-bottom: 14px; }
.leistung .text { margin-bottom: 12px; }
.leistung .text strong { font-family: var(--bp-sans-r); font-weight: 400; color: var(--bp-tinte); }
.leistung .text.versprechen { color: var(--bp-tinte) !important; margin-bottom: 18px; }
.leistung .text:last-of-type { margin-bottom: 28px; }
@media (min-width: 992px) { .leistung { min-height: 560px; } .leistung .kicker { margin-bottom: 56px; } }

/* --- Abschnitt 5: Schritte = Treppe von „How Brianto works“ --- */
.schritte .treppe { list-style: none; padding: 0; }
.schritte .stufe h3 { font-family: var(--bp-sans-l) !important; font-weight: 300; letter-spacing: 0; font-size: 22px; line-height: 1.25; color: var(--bp-tinte) !important; margin-bottom: 14px;
	opacity: clamp(0, calc((var(--q) - .4) * 3), 1); transform: translateY(calc((1 - clamp(0, calc((var(--q) - .4) * 2.4), 1)) * 34px)); }
@media (min-width: 992px) { .schritte .stufe h3 { white-space: nowrap; font-size: 20px; } }
.schritte .stufe p { max-width: 250px; }
.schritte-cta { margin-top: 48px; }
@media (max-width: 991px) { .schritte .stufe p { max-width: none; } .schritte-cta { margin-top: 8px; } }

/* --- Abschnitt 6: Karten wie vorher; Hotel über die ganze Breite --- */
.fall-gross { grid-column: 1 / -1; }
.fall-gross .text { max-width: 820px; }
.fall .text { margin-bottom: 14px; }
.fall .text + .btn, .fall .text:last-of-type { margin-bottom: 30px; }
.fall .text strong { font-weight: 400; color: var(--bp-gruen); }
.fall-meta { font-size: 16px; color: rgba(253, 250, 246, .62) !important; margin: -6px 0 16px; }
.arbeit-alle { display: inline-block; margin-top: 36px; }

/* --- Abschnitt 7: Vergleich (Liste wie „Who it's for“), Grundsätze (Fraunces grün), „Who you work with“ --- */
.warum .vergleich { margin-top: 40px; }
.warum .vergleich li strong { font-family: var(--bp-sans-r); font-weight: 400; }
.warum-unten { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } /* 25.10. Thomas: Grundsätze, Bild und Etikett an einer gemeinsamen Oberkante */
.grundsaetze { list-style: none; padding: 0; margin: 0; }
.grundsaetze li { font-family: var(--bp-serif) !important; font-weight: 300; font-size: 30px; line-height: 1.3; color: var(--bp-gruen) !important; }
.grundsaetze li + li { margin-top: 18px; }
.wer { display: grid; grid-template-columns: 132px 1fr; gap: 26px; align-items: start; }
.wer img { width: 132px; height: 132px; object-fit: cover; border-radius: 6px !important; }
.wer-etikett { font-family: var(--bp-sans-r) !important; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-gruen) !important; margin-bottom: 10px; }
.wer-text { font-size: 18px; line-height: 1.6; color: rgba(28, 25, 23, .8) !important; margin-bottom: 12px; }
.wer-text strong { font-family: var(--bp-sans-r); font-weight: 400; color: var(--bp-tinte); }
.wer-link { margin: 0 !important; }
@media (max-width: 991px) {
	.warum-unten { grid-template-columns: 1fr; gap: 40px; }
	.grundsaetze li { font-size: 24px; }
	.wer { grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
	.wer img { width: 96px; height: 96px; }
}

/* --- Abschnitt 8: Fragen wie auf Services (grüne Frage Inter Light 19,2 px, Linie darüber, Antwort 18 px) --- */
.fragen .stand { margin-top: 18px; font-family: var(--bp-sans-r) !important; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(28, 25, 23, .55) !important; }
.fragen-liste { padding-bottom: 14px; border-bottom: 1px solid var(--swatch-var-3131); }
.frage summary { list-style: none; display: block; margin-top: 14px; padding: 23px 0 7px; border-top: 1px solid var(--swatch-var-3131); cursor: pointer; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { margin: 0; font-family: var(--bp-sans-l) !important; font-weight: 300; font-size: 1.2rem; line-height: 1.45; color: var(--bp-gruen) !important; }
@media (pointer: fine) { .frage summary:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } }
.frage summary:focus-visible { outline: 2px solid var(--bp-gruen); outline-offset: 4px; }
.frage p { margin: 10px 0 6px; font-family: var(--bp-sans-l) !important; font-size: 18px !important; line-height: 1.6 !important; color: var(--bp-tinte) !important; }
@media (max-width: 991px) { .fragen .col-lg-7 { margin-top: 28px; } .frage p { font-size: 17px !important; } }

/* „Bewegung reduzieren“ am Desktop: Kacheln wanderten nicht und standen halb außerhalb des Bildes (Fehler schon vor dem 24.10.) → 2 × 2 Raster */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
	.leistungen-spur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 48px 12px 96px !important; max-width: 1320px; margin: 0 auto; transform: none !important; }
	.leistungen-spur .leistung { width: auto; opacity: 1; }
	.leistungen-fortschritt { display: none; }
}
/* Sichtprüfung preview2 (24.10.): Ergebnisse untereinander (in einer Zeile brach die dritte allein um) · kleine Beleg-Karten zu dritt nebeneinander
   (zu zweit stand die vierte allein) · „See all work“ mit Abstand (blog.css setzt bei .bk-alle −24 px) · lange Überschriften ohne einzelnes Wort in der letzten Zeile */
.hero-ergebnisse { flex-direction: column; gap: 4px; }
@media (min-width: 992px) { .faelle { grid-template-columns: repeat(3, 1fr); } .fall-gross .fall-inhalt { max-width: 860px; } }
.arbeit .arbeit-alle { margin-top: 36px; color: var(--bp-gruen) !important; }
.luecken h2, .arbeit h2, .warum h2, .fragen h2 { text-wrap: balance; }
/* Handy: Ergebnis-Liste als Block mittig, Zeilen links bündig – Punkte stehen sauber untereinander */
@media (max-width: 991px) { .hero-ergebnisse { width: fit-content; margin-left: auto; margin-right: auto; align-items: flex-start; text-align: left; } }
/* Handy: Etikett „BRAND, MARKETING & GROWTH CONSULTANT · BALI“ einzeilig (bei 375 stand „BALI“ allein in Zeile 2) */
@media (max-width: 575px) { .hero-text .hero-etikett { white-space: nowrap; font-size: clamp(10.5px, 3.3vw, 14px) !important; } }

/* ===== 25.10. Thomas (preview2-Runde 2) ===== */
/* Hero: die zwei Buttons dürfen nie gleich aussehen. Vorher: Haupt-Button beim Hover creme mit Rand (= zweiter Button), zweiter Button beim Hover voll grün (= Haupt-Button).
   Jetzt: Haupt-Button bleibt grün (Hover dunkler), zweiter Button immer creme mit grünem Rand (Hover leicht grün getönt). Rand als Schatten → keine Größenänderung. */
.hero-knoepfe .btn.btn-brianto:hover { background-color: color-mix(in srgb, var(--swatch-var-2425) 80%, #000) !important; color: var(--swatch-var-7747) !important; box-shadow: none; }
.hero-knoepfe .btn.btn-brianto-reverse { box-shadow: inset 0 0 0 1px var(--swatch-var-2425); }
.hero-knoepfe .btn.btn-brianto-reverse:hover { background-color: color-mix(in srgb, var(--swatch-var-2425) 12%, var(--swatch-var-3854)) !important; color: var(--swatch-var-2425) !important; }
/* „Read more“ kräftiger */
.luecke-weiter .etikett { font-family: "InterTight-SemiBold", "Helvetica Neue", Arial, sans-serif !important; }
/* Abschnitt-Schluss mittig zwischen den Linien: oben = unten (gemessen 45/73 bzw. 44/97 px) */
.luecken .schluss { margin-top: 59px; } /* fällt mit dem Abstand der Liste zusammen → 59 */
section.luecken.fuerwen { padding-bottom: 82px; }
.warum .warum-unten { margin-top: 70px; }
section.fuerwen.warum { padding-bottom: 69px; }