/* Beratung: the three offers as the hero's candidate list ("Kandidaten", chosen 2026-10-15). Behaviour in beratung.js. */
.abschnitt > .beratung-kopf { max-width: var(--raster); margin: 0 auto 40px; }
.b-kand { max-width: var(--raster); margin: 0 auto; }

/* the "unsicher" line under the offers: the text on the left, the button on the right */
.b-unsicher { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
.b-unsicher .k-klein { grid-column: 1; margin-top: 10px; }
.b-unsicher .k-cta { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; height: 64px; font-size: 1.15rem; }

/* ════════ Kandidaten ════════
   Left, the names hang on the hero's candidate bracket: a thin blue line, the dot at the chosen one, which is set
   dark; the others are greyed like the hero's unchosen candidates. Right, the chosen offer on a sheet of
   the hero's screen fabric: its machine large, its text below. */
.bk-halt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 72px); align-items: stretch; }
/* scroll-driven (beratung.js sets .scrollt where list and stage fit the window): the track is the pinned block plus
   two steps of scrolling; each offer has one step's stretch, the middle one centred on it. Pinned so it sits centred in
   the window below the slim bar (--halt-h measured by the script). */
.bk-bahn { --schritt: 60vh; }
.bk-bahn.scrollt::after { content: ""; display: block; height: calc(2 * var(--schritt)); }
.bk-bahn.scrollt .bk-halt { position: sticky; top: calc(var(--balken-h) + max(16px, (100vh - var(--balken-h) - var(--halt-h, 0px)) / 2)); }
.b-kand .b-unsicher { margin-top: 56px; }
/* the list is as tall as the stage and spreads the three names over it, the first level with the stage's text area at
   the top, the last at the bottom */
.bk-liste { --punkt: 40px; position: relative; display: grid; gap: 6px; align-content: space-between; padding: max(0px, clamp(28px, 3.4vw, 48px) - 14px) 0 max(0px, clamp(28px, 3.4vw, 48px) - 16px) 30px; }
.bk-liste::before { content: ""; position: absolute; left: 3.75px; top: 26px; bottom: 26px; width: 1.5px; background: var(--linie); opacity: .5; }
.bk-liste::after { content: ""; position: absolute; left: 0; top: calc(var(--punkt) - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: var(--linie);
  transition: top .35s cubic-bezier(.65, 0, .35, 1); }
.bk-liste [role="tab"] { all: unset; position: relative; display: block; padding: 14px 16px 16px 14px; border-radius: 6px; cursor: pointer; }
/* the arm from the bracket to each name */
.bk-liste [role="tab"]::before { content: ""; position: absolute; left: -26px; top: calc(var(--arm, 34px) - .75px); width: 22px; height: 1.5px; background: var(--linie); opacity: 0; transition: opacity .25s; }
.bk-liste [aria-selected="true"]::before { opacity: 1; }
.bk-liste [role="tab"]:hover { background: rgba(59, 90, 112, .05); }
.bk-liste [role="tab"]:focus-visible { outline: 2px solid var(--linie); outline-offset: 2px; }
.bk-name { display: block; font: 700 clamp(1.55rem, 2.5vw, 2.3rem)/1.15 var(--display); letter-spacing: -.035em; color: var(--grau); transition: color .25s; }
.bk-wenn { display: block; margin-top: 8px; max-width: 40ch; font-size: 1rem; line-height: 1.5; color: #8D929C; transition: color .25s; }
.bk-liste [aria-selected="true"] .bk-name { color: var(--tinte); }
.bk-liste [aria-selected="true"] .bk-wenn { color: var(--text-2); }
.bk-liste [role="tab"]:hover .bk-name { color: var(--tinte); }

.bk-buehne { position: relative; display: grid; border-radius: var(--ecken, 8px); border: 1px solid rgba(26, 43, 102, .16); overflow: hidden;
  background: radial-gradient(90% 85% at 50% 38%, #FFFFFF 0, #FBFCFD 45%, #F4F6F9 80%, #EFF2F6 100%); }
/* a whisper of the screen's grain */
.b-kand { --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .57  0 0 0 0 .62  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bk-buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background: var(--korn); }
.bk-folie { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto; align-content: start; padding: clamp(28px, 3.4vw, 48px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.bk-folie.da { opacity: 1; visibility: visible; transition: opacity .3s ease .18s, visibility 0s; }
.bk-folie:focus { outline: none; }
.bk-folie:focus-visible { outline: 2px solid var(--linie); outline-offset: -6px; }
.bk-bild { width: min(100%, 460px); margin: 0 auto; }
/* wide windows: the machine also shrinks with the window's height, so list and stage fit it and can stay pinned */
@media (min-width: 861px) { .bk-bild { width: min(100%, 460px, max(220px, calc(100vh - 440px))); } }
.bk-text { position: relative; z-index: 1; margin-top: 18px; max-width: 60ch; }
.bk-text p { color: var(--text-2); }
.bk-text strong { font-weight: 700; color: var(--tinte); }
.b-kand .b-unsicher { grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid rgba(26, 43, 102, .16); }
.bk-titel { display: none; }

/* stacked (beratung.js sets .stapel wherever the pinned block doesn't fit: phones, short windows): no list; the three
   offers one below the other, each on its own sheet of screen fabric with its name on top. The sheets stack while the
   page scrolls: each one stays put (sticky) and the next comes up from below and covers it. --oben comes from the
   script: just below the slim bar, a little lower per sheet so the edges show; a sheet taller than the window stays
   put only once its foot is in view, so it has been read in full before the next one covers it. */
.b-kand.stapel .bk-halt { display: block; }
.b-kand.stapel .bk-liste { display: none; }
.b-kand.stapel .bk-buehne { display: grid; gap: 16px; border: 0; border-radius: 0; overflow: visible; background: none; }
.b-kand.stapel .bk-buehne::after { content: none; }
.b-kand.stapel .bk-folie { grid-area: auto; position: sticky; top: var(--oben, 70px); opacity: 1; visibility: visible; transition: none; overflow: hidden; padding: clamp(22px, 3.4vw, 48px);
  box-shadow: 0 -10px 30px -12px rgba(14, 23, 52, .18);
  border: 1px solid rgba(26, 43, 102, .16); border-radius: var(--ecken, 8px);
  background: radial-gradient(90% 85% at 50% 38%, #FFFFFF 0, #FBFCFD 45%, #F4F6F9 80%, #EFF2F6 100%); }
.b-kand.stapel .bk-folie::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background: var(--korn); }
.b-kand.stapel .bk-titel { display: block; position: relative; z-index: 1; margin-bottom: 6px; font: 700 clamp(1.45rem, 3.4vw, 2rem)/1.15 var(--display); letter-spacing: -.035em; color: var(--tinte); }
.b-kand.stapel .b-unsicher { margin-top: 28px; }
.b-kand.stapel .bk-bild { width: min(100%, 400px); }   /* no height cap here: nothing is pinned */
/* from tablet width the machine stands beside the text, so a sheet is short enough to stack below the slim bar */
@media (min-width: 700px) {
  .b-kand.stapel .bk-folie { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(24px, 3vw, 40px); align-items: center; }
  .b-kand.stapel .bk-titel { grid-column: 1 / -1; }
  .b-kand.stapel .bk-text { margin-top: 0; }
}

/* ——— Smaller windows ——— */
@media (max-width: 1099px) {
  .bk-halt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
@media (max-width: 860px) {
  .abschnitt > .beratung-kopf { margin-bottom: 28px; }
  .b-unsicher { display: flex; flex-direction: column; align-items: flex-start; }
  .b-unsicher .k-cta { margin-top: 22px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-liste::after, .bk-folie, .bk-folie.da { transition: none; }
}