/* Vincent Krämer · Website, Entwurf "Vortrag"
   The first screen of the site (main design since 2026-10-13), built after Vincent's mockup:
   a projector screen hanging from a black roller, slightly wider at the bottom than at the top (seen
   from below), the sentence in large black type, the three open words marked in pale blue with their
   candidates on drawn brackets, him in front on the right with a flat blue shadow on the screen.
   Everything below the first screen comes from styles.css; this file is loaded after it.

   Wide windows: the first screen is one composition of 1586 × 932 units (the mockup's pixels below
   its header), scaled with the window by seite.js (--k), so nothing ever reflows. Phones get their own layout. */

/* Mona Sans and Roboto are declared in styles.css: the whole site is set in the slide's type. */

/* the line's type size, registered so it can glide: the brackets and lists that hang off a word move with it */
@property --fs { syntax: "<length>"; inherits: true; initial-value: 106px; }

/* where the baseline and the highlighter box sit, in em of the type size, for Mona Sans at line-height 1 (box: from .086em
   above the capitals to .046em below the baseline, the margins tuned on Inter for the mockup; computed from the font's
   metrics). The font test panel (schrift-test.js) rewrites them for other fonts. */
:root { --grundlinie: .885; --hl-top: .07; --hl-h: .861; --hl-unten: .931; --hl-mitte: .4905; }

:root {
  --wand: #E7EAF0;          /* the wall, a cool light grey (from the mockup) */
  --tinte: #0B0E14;         /* the type on the screen */
  --schatten: #5B7A90;      /* his flat shadow on the screen, a mid steel in the accent metal's hue */
  --grau: #7A808B;          /* candidates not chosen */
}

body { background: var(--weiss); }

/* ——— Header: part of the first screen, on the wall ——— */
.vt-kopf { position: relative; z-index: 10; height: calc(60px * var(--k, 1)); min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  width: var(--bw, 100%); margin: 0 auto; padding: 0 calc(65px * var(--k, 1)); background: var(--wand); box-shadow: 0 0 0 100vmax var(--wand); clip-path: inset(0 -100vmax); }
/* on phones the header is as wide as the window anyway: no wall painted out to the sides */
body:has(.vortrag[data-modus="schmal"]) .vt-kopf { box-shadow: none; clip-path: none; }
.vt-kopf .name { white-space: nowrap; font: 700 max(17px, calc(29.5px * var(--k, 1)))/1 var(--display); letter-spacing: -.022em; color: var(--tinte); text-decoration: none; }
.vt-kopf nav { display: flex; gap: max(18px, calc(34px * var(--k, 1))); }
.vt-kopf nav a { font: 500 max(15px, calc(19px * var(--k, 1)))/1 var(--display); letter-spacing: -.01em; color: var(--tinte); text-decoration: none; padding: 10px 0; }
.vt-kopf nav a:hover { color: var(--blau); }

/* ════════════════════════════════════════════════════════════════
   1 · The slide
   ════════════════════════════════════════════════════════════════ */
/* the wall holds through the upper part, then lightens evenly to #F3F5F9 at the lower edge; #workshops (styles.css)
   carries on from there to white, so there is no seam under the hero (chosen 2026-10-15) */
.vortrag { position: relative; overflow: hidden; background: linear-gradient(var(--wand) 35%, #F3F5F9); }
.vt-rahmen { position: relative; width: var(--bw, 100%); height: var(--bh, auto); margin: 0 auto; }
.vt-buehne { position: absolute; left: 0; top: 0; width: 1586px; height: 932px; transform: scale(var(--k, 1)); transform-origin: 0 0; }

/* ——— The rods: charcoal tubes with a lit band, a metal flange at each end and a shadow below ——— */
.vt-stab { position: absolute; z-index: 3; border-radius: 4px; }
.vt-stab::before, .vt-stab::after { content: ""; position: absolute; border-radius: 5px / 9px;
  background: linear-gradient(90deg, #2C2C30 0, #9A9BA1 16%, #4A4B50 32%, #1C1C1F 62%, #101012 86%, #3A3A3E 100%);
  box-shadow: 0 6px 8px -3px rgba(18, 22, 32, .35); }
.vt-stab--oben { left: 22px; width: 1542px; top: 2px; height: 23px;
  background: linear-gradient(180deg, #8F9095 0, #2B2B2D 9%, #343436 26%, #505053 40%, #2A2A2C 52%, #19181B 70%, #232225 88%, #3C3E42 100%);
  box-shadow: 0 5px 6px -2px rgba(18, 22, 32, .32); }
.vt-stab--oben::before, .vt-stab--oben::after { top: -6px; bottom: -6px; width: 12px; }
.vt-stab--oben::before { left: -2px; } .vt-stab--oben::after { right: -2px; }
.vt-stab--unten { left: 0; width: 1586px; top: 766px; height: 21px;
  background: linear-gradient(180deg, #8A8B8F 0, #5A5B5F 14%, #3B3B3E 32%, #1E1D20 52%, #111112 74%, #19191A 88%, #48484A 100%);
  box-shadow: 0 7px 7px -2px rgba(18, 22, 32, .38), 0 16px 22px -6px rgba(18, 22, 32, .2); }
.vt-stab--unten::before, .vt-stab--unten::after { top: -3px; bottom: -3px; width: 11px; }
.vt-stab--unten::before { left: 2px; } .vt-stab--unten::after { right: 2px; }

/* ——— The fabric: hangs from the top roller, wider at the bottom, casts a soft shadow on the wall ——— */
.vt-tuch-schatten { position: absolute; z-index: 1; left: 10px; top: 22px; width: 1568px; height: 752px; filter: drop-shadow(9px 5px 10px rgba(30, 40, 62, .16)); }
.vt-tuch { position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, #B9BDC6 0, #BFC3CB 14px, #C6CAD1 20px, rgba(220, 224, 231, .6) 24px, rgba(236, 239, 245, 0) 70px),
    linear-gradient(90deg, rgba(214, 219, 228, .55) 0, rgba(236, 239, 245, 0) 9%, rgba(236, 239, 245, 0) 90%, rgba(212, 217, 226, .6) 100%),
    radial-gradient(85% 80% at 50% 44%, #F8FAFC 0, #F4F6FA 42%, #EEF1F6 75%, #E8EBF1 100%); }
/* a whisper of grain, so it reads as cloth and not as a flat box */
.vt-tuch::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: 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"); }

/* his shadow on the screen: the photo's outline in flat blue, set off to the right and down a little */
.vt-schatten { position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--px) - var(--tl) + var(--sx)); top: calc(var(--py) - var(--tt) + var(--sy)); width: calc(var(--ph) * 1584 / 993); height: var(--ph);
  background: var(--schatten); clip-path: inset(0 0 0 52%);   /* head and body only: the arm's shadow would be lost in the type */
  -webkit-mask: url("assets/vincent-vortrag.webp") 0 0 / 100% 100% no-repeat; mask: url("assets/vincent-vortrag.webp") 0 0 / 100% 100% no-repeat; }

.vt-folie { position: absolute; inset: 0; z-index: 1; display: grid; color: var(--tinte); }
.vt-satz { grid-area: 1 / 1; }

/* ——— The sentence ——— */
.vt-satz { position: relative; }
.vt-zeile { position: absolute; left: 75px; display: flex; align-items: flex-start; white-space: nowrap; column-gap: .235em;
  font: 600 var(--fs, 106px)/1 var(--display); letter-spacing: -.051em; font-optical-sizing: auto;
  transition: --fs .45s cubic-bezier(.3,.7,.3,1), top .45s cubic-bezier(.3,.7,.3,1); }
.vt-zeile[data-n="2"] { left: 72px; font-weight: 850; letter-spacing: -.055em; column-gap: .19em; }
.vt-satz.still .vt-zeile { transition: none; }
.vt-zeile .st { transition: opacity .25s; }

/* the open words: a pale blue box from just above the capitals to just below the baseline */
.vt-zeile .slot { position: relative; display: inline-flex; flex-direction: row; align-items: flex-start; }
.hl { position: relative; display: inline-flex; isolation: isolate; }
.hl::before { content: ""; position: absolute; z-index: -1; left: -.07em; right: -.035em; top: calc(var(--hl-top) * 1em); height: calc(var(--hl-h) * 1em); background: var(--markiert); }

/* the candidates: Roboto, the chosen one first and in blue, on a bracket with a dot */
.vt-kand { list-style: none; margin: 0; padding: 0 0 0 17px; display: grid; grid-template-columns: auto auto; column-gap: 34px; position: relative;
  font: 400 19px/23px var(--zahl); letter-spacing: 0; color: var(--grau); }
.vt-kand::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 2px; width: 1.5px; background: var(--linie); opacity: .5; }
.vt-kand::after { content: ""; position: absolute; left: -3px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--linie); }
.vt-kand li { display: contents; }
.vt-kand button { all: unset; cursor: pointer; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 0 4px; margin: 0 -4px; }
.vt-kand button:hover { background: rgba(59, 90, 112, .08); }
.vt-kand button:focus-visible { outline: 2px solid var(--linie); outline-offset: 1px; }
.vt-kand .p { text-align: right; font-variant-numeric: tabular-nums; }
.vt-kand button[aria-pressed="true"] { color: var(--linie); font-weight: 500; }

/* under the word: down from the box's lower edge, then right to the dot */
/* (the bracket grows a little with the word: measured from the mockup's "Teams" and "heimlich", now "mühelos") */
.slot[data-art="unter"] { --arm-x: calc(var(--fs) * .05 + 24px); --arm-y: calc(var(--fs) * .16 + 10px); --arm-w: calc(var(--fs) * .09 + 34px); }
.slot[data-art="unter"] .arm { position: absolute; left: var(--arm-x); top: calc(var(--fs) * var(--hl-unten)); width: var(--arm-w); height: var(--arm-y); border-left: 1.5px solid var(--linie); border-bottom: 1.5px solid var(--linie); }
.slot[data-art="unter"] .vt-kand { position: absolute; left: calc(var(--arm-x) + var(--arm-w) + 1px); top: calc(var(--fs) * var(--hl-unten) + var(--arm-y) - var(--zh) / 2); column-gap: calc(var(--fs) * .4 - 8px);
  --zh: calc(var(--fs) * .068 + 14.8px); font-size: calc(var(--fs) * .023 + 16.6px); line-height: var(--zh); }
.slot[data-art="unter"] .vt-kand::before { top: calc(var(--zh) / 2); }
.slot[data-art="unter"] .vt-kand::after { top: calc(var(--zh) / 2 - 3px); }
/* beside the word: straight out of the box's right edge, the list stands in the line */
.slot[data-art="neben"] .arm { display: flex; align-items: flex-start; margin-top: calc(var(--fs) * var(--hl-mitte) - 11px); margin-left: calc(var(--fs) * .035); margin-right: -2px; }
.slot[data-art="neben"] .arm::before { content: ""; flex: none; width: 30px; height: 11px; border-bottom: 1.5px solid var(--linie); }
.slot[data-art="neben"] .vt-kand { margin-left: -1px; padding-left: 11px; column-gap: 12px; font-size: 18px; }

/* ——— Him: in front of the bottom rod, pointing at the sentence ——— */
.vt-person { position: absolute; z-index: 4; left: var(--px); top: var(--py); height: var(--ph); aspect-ratio: 1584 / 993; clip-path: var(--umriss, none); }
.vt-person img { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; filter: grayscale(1) contrast(1.06); }

/* ——— Below the screen: the button and his role ——— */
.vt-unten { position: absolute; z-index: 3; left: 65px; top: 815px; display: flex; align-items: center; gap: 33px; }
.vt-cta { width: 345px; justify-content: center; }
.vt-cta { display: inline-flex; align-items: center; gap: 12px; height: 70px; padding: 0 0 0 6px; white-space: nowrap; border-radius: 7px; background: var(--blau); color: var(--weiss);
  font: 500 20.5px/1 var(--display); letter-spacing: -.015em; text-decoration: none; transition: background .2s; }
.vt-cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.vt-cta:hover { background: var(--blau-tief); }
.vt-cta:hover svg { transform: translateX(3px); }
.vt-cta:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; }
.vt-rolle { padding-left: 28px; border-left: 1.5px solid #5D6371; height: 58px; display: flex; align-items: center; font: 400 21px/1 var(--display); letter-spacing: -.01em; color: #3E434D; }

/* the 7-second cycle control, only visible when reached with the keyboard */
.vortrag .takt-platz { left: 65px; bottom: auto; top: 900px; }
.vortrag .takt-knopf { color: var(--linie); }
.vortrag .takt-spur i { background: var(--linie); }

/* ════════════════════════════════════════════════════════════════
   Phones: no scaling; the sentence fills the screen's width line by line, no candidate lists
   ════════════════════════════════════════════════════════════════ */
.vortrag[data-modus="schmal"] .vt-rahmen { width: auto; height: auto; padding: 6px 0 0; }
.vortrag[data-modus="schmal"] .vt-buehne { position: relative; width: auto; height: auto; transform: none; padding-bottom: 22px; }
[data-modus="schmal"] .vt-stab { position: relative; left: auto; top: auto; width: auto; }
[data-modus="schmal"] .vt-stab--oben { height: 13px; margin: 0 14px; }
[data-modus="schmal"] .vt-stab--oben::before, [data-modus="schmal"] .vt-stab--oben::after { width: 8px; top: -4px; bottom: -4px; }
[data-modus="schmal"] .vt-stab--unten { height: 12px; margin: -6px 2px 0; }
[data-modus="schmal"] .vt-stab--unten::before, [data-modus="schmal"] .vt-stab--unten::after { width: 7px; top: -2px; bottom: -2px; }
[data-modus="schmal"] .vt-tuch-schatten { position: relative; left: auto; top: auto; width: auto; height: auto; margin: -3px 8px 0; min-height: var(--tuch-h, 400px); filter: drop-shadow(5px 3px 6px rgba(30, 40, 62, .14)); }
[data-modus="schmal"] .vt-tuch { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, #B9BDC6 0, #C3C7CE 8px, rgba(236, 239, 245, 0) 30px),
    radial-gradient(85% 80% at 50% 40%, #F7F9FC 0, #F1F4F8 60%, #E9ECF2 100%); }
[data-modus="schmal"] .vt-tuch { position: relative; inset: auto; min-height: var(--tuch-h, 400px); }
[data-modus="schmal"] .vt-folie { position: relative; inset: auto; }
[data-modus="schmal"] .vt-satz { height: var(--satz-h, 160px); }
[data-modus="schmal"] .vt-zeile { left: 26px; transition: none; }
[data-modus="schmal"] .vt-zeile[data-n="2"] { left: 27px; }
[data-modus="schmal"] .vt-kand, [data-modus="schmal"] .slot .arm { display: none; }
[data-modus="schmal"] .vt-unten { position: relative; left: auto; top: auto; margin: 22px 16px 0; flex-direction: column; align-items: stretch; gap: 12px; }
[data-modus="schmal"] .vt-cta { width: auto; height: 54px; justify-content: center; padding: 0 20px; font-size: 17px; }
[data-modus="schmal"] .vt-rolle { border-left: 0; padding: 0; height: auto; justify-content: center; font-size: 15px; }
[data-modus="schmal"] .takt-platz { position: relative; left: auto; top: auto; margin: 8px 16px 0; }

@media (max-width: 560px) {
  .vt-kopf nav a:not(:last-child) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vt-zeile { transition: none; }
}