/* ==========================================================================
   Zweite Homepage-Hälfte (Strom: zweite-haelfte) · Version C „Ruhige Substanz“
   Über uns · Wissen · Wo stehst du? (Abschluss der Seite) · Strom: bewertungen-einordnung · Version D
   Ruhig zwischen den starken Momenten: das Duo-Bild ist der eine Medienmoment, die 80 % die eine Zahl mit Bedeutung,
   „Wo stehst du?“ der eine Weg ins Gespräch. Aktiv heißt überall: .sel aus base.css (kurzer gerader roter Strich links, Fläche 3, 2 px angehoben).
   Nur Tokens und Bausteine aus base.css (.sec, .shead, .eyebrow, .card, .media, .btn, .tlink, .stars-line, .ph-tag).
   ========================================================================== */

/* ---------------- Über uns ----------------
   Polish Abschnitt 11: zurück zur räumlichen Großzügigkeit aus C. Triptychon 3 : 7 : 3, das gemeinsame Bild breit in der Mitte
   (Medienbühne r-xl, --shadow-3, Rahmen 1800/1180 wie C), links Marcel, rechts Tobias als gleich gebaute ruhige Flächen
   (Fläche 1 + Ring), jeweils auf der Seite, auf der die Person im Bild steht. Kein Text auf dem Foto, keine Titel.
   Austausch des Interimsfotos: gleiches <img>, Ausschnitt nur über --focus.
   Unter 1100 px: Bild oben, darunter beide Personen nebeneinander; unter 521 px untereinander. */
.trip { --focus: 64% 30%; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 3fr); gap: clamp(.75rem, 1.2vw, 1.25rem); align-items: stretch; }
.trip__photo { aspect-ratio: 1800 / 1180; border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.trip__photo img { object-position: var(--focus); }
.trip__ph { position: absolute; left: 1rem; bottom: 1rem; }
.trip__p { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: clamp(1.25rem, 2vw, 2rem); border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--ring); }
.trip__side { margin-bottom: auto; padding-bottom: 2rem; font-size: var(--fs-meta); color: var(--text-3); }
.trip__p--l .trip__side::after { content: " →"; }
.trip__p--r .trip__side::before { content: "← "; }
.trip__n { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.022em; line-height: 1.18; }
.trip__r { color: var(--text-2); margin-bottom: .75rem; text-wrap: pretty; }
.trip__way { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; font-size: var(--fs-small); } /* gleiche Höhe in beiden Flächen, auch solange Tobias noch keinen direkten Weg hat */
.team__place { margin-top: 1.5rem; text-align: center; }
@media (max-width: 1099px) {
  .trip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trip__photo { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9.5; }
  .trip { --focus: 82% 30%; }
  .trip__side { padding-bottom: 1rem; }
  .trip__p--l .trip__side::after, .trip__p--r .trip__side::before { content: none; }
}
@media (max-width: 899px) { .team .shead--center { justify-items: start; text-align: left; margin-inline: 0; } .team .shead--center .eyebrow { justify-content: flex-start; } .team__place { text-align: left; } }
@media (max-width: 520px) { .trip { grid-template-columns: 1fr; --focus: 86% 25%; } .trip__photo { aspect-ratio: 4 / 3.3; } .trip__side { padding-bottom: .25rem; } [data-preview="founder"] .trip__p--r .trip__way { display: none; } }

/* ---------------- Wissen ----------------
   Studie als ruhige Zahlenbühne in einer Karte: links die Aussage (80 % als rote Schrift, 18 % gedämpft),
   rechts ein klares Balkendiagramm 0–4 Bausteine. Nur der 80-%-Balken ist rot. Kein Leuchten, keine Lichtkreise.
   Balken wachsen beim ersten Sichtkontakt von links (js/second.js), Reduced Motion: sofort im Endzustand. */
/* Kompakter Kopf: Text auf gleicher Höhe wie die Headline (unten bündig), weniger Abstand zur Studie. */
.know__head { --head-gap: clamp(1.75rem, 1.4rem + 1.6vw, 3rem); align-items: end; }
.study { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(1.5rem, 1rem + 2.4vw, 3.5rem); border-radius: var(--r-xl); }
.study__say { display: grid; align-content: start; gap: 1rem; }
.study__say .h3 { max-width: 16em; }
.study__fig { display: grid; gap: .75rem; margin-top: clamp(1rem, 2vw, 2rem); }
.study__fig b { font-size: clamp(4rem, 2.6rem + 4.4vw, 7rem); font-weight: 600; line-height: .9; letter-spacing: -.05em; color: var(--red-text); }
.study__fig span { font-size: var(--fs-lead); line-height: 1.45; color: var(--text); max-width: 22em; text-wrap: pretty; }
.study__vs { display: flex; align-items: baseline; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--text-2); }
.study__vs b { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.03em; color: var(--text-2); }
.study__chart { display: grid; align-content: center; gap: 1.5rem; }
.study__cap { font-size: var(--fs-small); color: var(--text-2); }
.bars { display: grid; gap: .9rem; }
.bars li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: 1rem; }
.bars__k { font-size: var(--fs-small); color: var(--text-2); }
.bars__t { position: relative; height: 2.25rem; border-radius: var(--r-xs); background: var(--surface-1); box-shadow: var(--ring); overflow: hidden; }
.bars__t i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: inherit; background: var(--surface-4); box-shadow: var(--ring-2); transform-origin: left; }
.bars b { font-size: var(--fs-body); font-weight: 600; text-align: right; color: var(--text-2); }
.bars .is-hi .bars__k { color: var(--text); font-weight: 600; }
.bars .is-hi .bars__t i { background: var(--red); box-shadow: none; }
.bars .is-hi b { color: var(--red-text); }
.js .bars:not(.is-in) .bars__t i { transform: scaleX(0); }
.js .bars .bars__t i { transition: transform 900ms var(--ease); }
.bars li:nth-child(2) i { transition-delay: 90ms; } .bars li:nth-child(3) i { transition-delay: 180ms; }
.bars li:nth-child(4) i { transition-delay: 270ms; } .bars li:nth-child(5) i { transition-delay: 360ms; }
.study__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.study__foot .meta { max-width: 56em; }
@media (max-width: 899px) { .study { grid-template-columns: 1fr; } }
/* Mobil (Marcel 15.10): Studienkarte deutlich kompakter – weniger Innenabstand, kleinere Leitzahl, engere Balken */
@media (max-width: 599px) {
  .study { gap: 1.5rem; padding: 1.25rem 1.1rem; border-radius: var(--r-lg); }
  .study__say { gap: .65rem; }
  .study__say .h3 { font-size: 1.2rem; }
  .study__fig { gap: .5rem; margin-top: .25rem; }
  .study__fig b { font-size: 3.25rem; }
  .study__fig span { font-size: .9375rem; }
  .study__vs { padding-top: .75rem; font-size: .875rem; }
  .study__vs b { font-size: 1.25rem; }
  .study__chart { gap: .85rem; }
  .study__cap { font-size: var(--fs-meta); }
  .bars { gap: .5rem; }
  .bars__t { height: 1.25rem; }
  .bars b { font-size: .875rem; }
  .bars__k { font-size: var(--fs-meta); }
  .study__foot { padding-top: 1rem; gap: .75rem; }
  .study__foot .meta { font-size: .75rem; }
}
@media (max-width: 520px) { .bars li { grid-template-columns: 5.25rem minmax(0, 1fr) 3rem; gap: .65rem; } .bars__t { height: 1.75rem; } }

/* Beiträge: ruhiger Index statt Karten. Zeile = Ebene, Titel, Autor (rund), Lesezeit, Pfeil-Kachel. */
.posts { margin-top: clamp(2.5rem, 4vw, 4rem); }
/* „Alle Beiträge“: am Ende der Section, zentriert, als übergreifende Aktion nach den Beiträgen */
.posts__all { display: flex; justify-content: center; margin-top: clamp(2rem, 3.5vw, 3rem); }
.posts__h { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); padding-bottom: 1rem; border-bottom: 1px solid var(--line-2); }
.post { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 11rem 4.5rem 2.75rem; align-items: center; gap: 1.5rem; padding: 1.35rem .75rem; border-bottom: 1px solid var(--line); border-radius: var(--r-xs); transition: background var(--t-fast); }
.post:hover { background: var(--surface-2); }
.post__l { font-size: var(--fs-meta); color: var(--text-3); }
.post__l b { font-weight: 600; color: var(--text-2); margin-right: .5rem; }
.post__t { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; text-wrap: pretty; }
.post__by { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-small); color: var(--text-2); }
.post__by img { width: 28px; height: 28px; border-radius: var(--r-pill); }
.post__min { font-size: var(--fs-meta); color: var(--text-3); text-align: right; }
.post__go { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); background: var(--surface-3); box-shadow: var(--ring); color: var(--red-text); }
.post__go svg { width: 1rem; height: 1rem; transition: transform var(--t-mid) var(--ease); }
.post:hover .post__go svg { transform: translateX(3px); }
@media (max-width: 1099px) { .post { grid-template-columns: minmax(0, 1fr) auto 2.75rem; gap: .5rem 1.25rem; } .post__l { grid-column: 1 / -1; } .post__t { grid-column: 1; } .post__by { grid-column: 1; grid-row: 3; } .post__min { grid-column: 2; grid-row: 2 / span 2; } .post__go { grid-column: 3; grid-row: 2 / span 2; } }
@media (max-width: 520px) { .post { padding-inline: 0; } .post__min { display: none; } .post { grid-template-columns: minmax(0, 1fr) 2.75rem; } .post__go { grid-column: 2; } }

/* ---------------- Wo stehst du? (finale Conversion-Section) ----------------
   Links die Situationen als ruhige Liste wie in A: keine Kästen, nur Haarlinien dazwischen, große Schrift.
   Aktiv = .sel aktiv (aria-checked): Fläche 3, kurzer gerader roter Strich mittig links, 2 px angehoben. Nie helle Flächen.
   Genau EIN sichtbarer Zustand: Hover macht eine Situation sofort aktiv (js/second.js), deshalb hier kein eigener
   Hover-Look (.sel-Hover aus base.css ist in der Liste aus), sonst könnten zwei Situationen markiert aussehen.
   Rechts die Empfehlung: oben das Drei-Ebenen-Modell mit der passenden Ebene im Aktiv-Zustand, dann Text und der
   Button ins passende Kontaktthema. Mobil steht die Empfehlung direkt unter der Liste (js/second.js).
   Ohne JS: alle Empfehlungen untereinander, Modell ausgeblendet. */
.pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.pick__opts { display: grid; gap: .25rem; }
.pick__l { margin-bottom: .5rem; }
.pick__o { --sel-r: var(--r-md); display: flex; align-items: center; gap: 1.1rem; width: 100%; min-height: 4.25rem; padding: 1rem 1.25rem; border-radius: var(--r-md); text-align: left; background: transparent; box-shadow: inset 0 -1px 0 var(--line); }
.pick__n { flex: none; min-width: 1.5rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); transition: color var(--t-fast); }
.pick__o[aria-checked="true"] .pick__n { color: var(--red-text); }
@media (hover: hover) { .pick__o.sel:not([aria-checked="true"]):hover { background: transparent; } .pick__o.sel:not([aria-checked="true"]):hover::before { transform: translateY(-50%) scaleY(0); } }
/* Wechsel ohne Doppelmarkierung: die bisher aktive Situation gibt ihren Strich sofort ab und ihre Fläche schnell (90 ms),
   ebenso ihre rote Nummer; nur die neue blendet mit dem normalen Übergang ein. So stehen nie zwei Striche oder zwei rote Nummern. */
.pick__o.sel:not([aria-checked="true"]) { transition-duration: 90ms; }
.pick__o.sel:not([aria-checked="true"])::before, .pick__o:not([aria-checked="true"]) .pick__n, .pick__o:not([aria-checked="true"]) .pick__t { transition: none; }
.pick__t { font-size: clamp(1.08rem, .98rem + .45vw, 1.375rem); font-weight: 580; letter-spacing: -.018em; line-height: 1.28; color: var(--text-2); text-wrap: balance; transition: color var(--t-fast); }
.pick__o[aria-checked="true"] .pick__t { color: var(--text); }

.pick__out { display: grid; gap: 1.75rem; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-xl); }
.pick__model { display: none; gap: .75rem; }
.pick__stack { display: grid; gap: .375rem; }
.pick__stack li { --sel-r: var(--r-sm); display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--text-3); box-shadow: var(--ring); transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.pick__stack b { font-weight: 600; }
.pick__stack li.is-on { background: var(--surface-3); color: var(--text); box-shadow: var(--ring-2), var(--shadow-1); transform: translateY(-2px); }
.pick__stack li.is-on b { color: var(--red-text); }
.pick__a { display: grid; gap: .9rem; }
.pick__a + .pick__a { padding-top: 1.75rem; border-top: 1px solid var(--line); }
.pick__lvl { font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.pick__a > p:not(.pick__lvl):not(.pick__later) { color: var(--text-2); max-width: 36em; text-wrap: pretty; }
.pick__later { font-size: var(--fs-small); color: var(--text-3); }
.pick__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .75rem; }
.pick__acts .btn { white-space: normal; text-align: left; }
/* Mit JS: alle Empfehlungen in einer Rasterzelle übereinander; die aktive ist sichtbar, die übrigen unsichtbar und inert.
   Wechsel ohne display-Wechsel und ohne Höhenänderung: die ausgehende Antwort verschwindet sofort, nur die eingehende
   blendet in 180 ms ein. So ist auch beim schnellen Überfahren immer höchstens eine Antwort (teilweise) sichtbar. Modell eingeblendet. */
.pick.is-js .pick__model { display: grid; }
.pick.is-js .pick__as { display: grid; }
.pick.is-js .pick__a { grid-area: 1 / 1; align-content: start; padding-top: 0; border-top: 0; opacity: 0; visibility: hidden; transition: none; } /* ausgehende Antwort sofort weg (QA F1: kein Geistertext beim schnellen Wischen) */
.pick.is-js .pick__a.is-on { opacity: 1; visibility: visible; transition: opacity 180ms var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .pick.is-js .pick__a, .pick.is-js .pick__a.is-on { transition: none; } }
/* Feinschliff 15.10 (Marcel, Bewegung wie A): ab 900 px ein einziger Marker (.pick__mark: Fläche eine Stufe heller, Haarlinie,
   2 px angehoben, roter Strich), der zwischen den Situationen gleitet, statt bei der alten zu verschwinden und bei der neuen
   aufzutauchen. Die Knöpfe selbst zeigen dann keine eigene Fläche und keinen eigenen Strich, nur Nummer und Text wechseln.
   Rechts baut sich die Empfehlung gestaffelt auf (Ebene, Titel, Text, Aktionen nacheinander, je 50 ms); die alte ist sofort weg
   (kein Geistertext), alle Empfehlungen teilen weiter eine Rasterzelle (kein Höhensprung). Die Ebenen links im Modell
   wechseln von unten nach oben versetzt. Reduced Motion: alles ohne Bewegung. */
.pick__mark { display: none; }
@media (min-width: 900px) {
  .pick.is-js .pick__opts { position: relative; }
  .pick.is-js .pick__mark { display: block; position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; border-radius: var(--r-md); background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-2); pointer-events: none; opacity: 0;
    transition: transform 460ms var(--ease), height 460ms var(--ease), opacity var(--t-mid); }
  .pick.is-js .pick__mark::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: min(2.25rem, calc(100% - 2 * var(--r-md))); border-radius: 0 3px 3px 0; background: var(--red); transform: translateY(-50%); }
  .pick.is-glide .pick__mark { opacity: 1; }
  .pick.is-glide .pick__mark.no-anim { transition: none; }
  .pick.is-glide .pick__o { position: relative; z-index: 1; }
  .pick.is-glide .pick__o.sel, .pick.is-glide .pick__o.sel:hover { background: transparent; box-shadow: inset 0 -1px 0 var(--line); transform: none; }
  .pick.is-glide .pick__o.sel::before { content: none; }
  .pick.is-glide .pick__o .pick__n, .pick.is-glide .pick__o .pick__t { transition: color 300ms var(--ease) 80ms; }
  .pick.is-glide .pick__o:not([aria-checked="true"]) .pick__n, .pick.is-glide .pick__o:not([aria-checked="true"]) .pick__t { transition: color 160ms var(--ease); }
  .pick.is-glide .pick__a { transition: none; }
  .pick.is-glide .pick__a.is-on { transition: visibility 0s; }
  .pick.is-glide .pick__a > * { opacity: 0; transform: translateY(10px); transition: none; }
  .pick.is-glide .pick__a.is-on > * { opacity: 1; transform: none; transition: opacity 420ms var(--ease) calc(60ms + var(--s, 0) * 55ms), transform 560ms var(--ease) calc(60ms + var(--s, 0) * 55ms); }
  .pick.is-glide .pick__stack li { transition-delay: var(--d, 0ms); }
}
@media (prefers-reduced-motion: reduce) {
  .pick.is-glide .pick__mark, .pick.is-glide .pick__a.is-on > *, .pick.is-glide .pick__stack li, .pick.is-glide .pick__o .pick__n, .pick.is-glide .pick__o .pick__t { transition: none !important; }
}
/* Bezug zur gewählten Situation: nur mobil, wo die Empfehlung unter der Liste steht */
.pick__echo { display: grid; gap: .25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.pick__echo > span:last-child { font-weight: 600; color: var(--text); }
.pick__echo[hidden] { display: none; }
@media (min-width: 900px) { .pick__echo { display: none !important; } }
@media (max-width: 899px) {
  .pick { grid-template-columns: 1fr; }
  .pick.is-js .pick__out { padding: 1.5rem 1.25rem; border-radius: var(--r-lg); }
  .pick__acts .btn { width: 100%; justify-content: space-between; }
}