.verwandlung_wrap {--paper: #ece6da; --paper2: #e4ddcf; --ink: #1b1915; --mute: rgba(27, 25, 21, 0.58); --faint: rgba(27, 25, 21, 0.34); --hair: rgba(27, 25, 21, 0.18); --red: #a3141b;
  --book: 'MT Book', 'Newsreader', Georgia, 'Times New Roman', serif; --grot: 'MT Grot', 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --gut: clamp(16px, 2.4vw, 40px); --top: clamp(14px, 1.6vw, 24px);
  position: relative; background: var(--paper); color: var(--ink); font-family: var(--book); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; }
.verwandlung_wrap ::selection {background: var(--ink); color: var(--paper); }
.verwandlung_wrap .verwandlung_canvas {position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.verwandlung_wrap .verwandlung_canvas canvas {position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.verwandlung_wrap .verwandlung_canvas.is-live {pointer-events: auto; touch-action: pan-y; }
.verwandlung_wrap .verwandlung_veil {position: fixed; inset: 0; z-index: 2; pointer-events: none; background: var(--paper); clip-path: inset(var(--vt, 100%) 0 var(--vb, 0%) 0); }
.verwandlung_wrap .verwandlung_veil_t {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; display: flex; gap: 14px; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.verwandlung_wrap .verwandlung_vignette {position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 46%, transparent 55%, rgba(12, 11, 9, 0.28) 100%); opacity: var(--vig, 0); }

/* ── type system ── */
.verwandlung_wrap .verwandlung_tag {margin: 0; display: flex; gap: 14px; font: 500 11px / 1.3 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.verwandlung_wrap .verwandlung_tag span:first-child {min-width: 2.2em; }
.verwandlung_wrap .verwandlung_tag.is-red {color: #e3636a; }

/* ── loader ── */
.verwandlung_wrap .verwandlung_loader {position: fixed; inset: 0; z-index: 90; background: var(--paper); display: grid; place-items: center; align-content: center; gap: 28px; padding: 0 var(--gut); transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1); clip-path: inset(0 0 0 0); }
.verwandlung_wrap .verwandlung_loader.is-done {clip-path: inset(0 0 100% 0); pointer-events: none; visibility: hidden; transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 1.1s; }
.verwandlung_wrap .verwandlung_hand {position: relative; width: min(78vw, 980px); aspect-ratio: 1612 / 116; }
.verwandlung_wrap .verwandlung_hand_ink {position: absolute; inset: 0; background: var(--ink); -webkit-mask: var(--hand) left center / 100% 100% no-repeat; mask: var(--hand) left center / 100% 100% no-repeat; clip-path: inset(-20% calc(100% - var(--w, 0%)) -20% 0); }
.verwandlung_wrap .verwandlung_strike {position: absolute; left: -2%; top: 18%; width: 104%; height: 64%; overflow: visible; }
.verwandlung_wrap .verwandlung_strike path {fill: none; stroke: var(--ink); stroke-width: 4.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--s, 1); }
.verwandlung_wrap .verwandlung_loader_cap {margin: 0; font: italic 400 15px / 1.4 var(--book); color: var(--mute); opacity: 0; transition: opacity 0.8s; text-align: center; }
.verwandlung_wrap .verwandlung_loader.is-cap .verwandlung_loader_cap {opacity: 1; }
.verwandlung_wrap .verwandlung_loader_count {position: absolute; left: var(--gut); right: var(--gut); bottom: var(--top); margin: 0; display: flex; justify-content: space-between; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums; }

/* ── chrome: one colour that reads over paper and over night (difference) ── */
.verwandlung_wrap .verwandlung_chrome {position: fixed; inset: 0; z-index: 60; pointer-events: none; color: var(--ink); --chip: rgba(236, 230, 218, 0.8); opacity: 0; transition: opacity 0.9s; }
.verwandlung_wrap .verwandlung_chrome.is-on {opacity: 1; }
.verwandlung_wrap .verwandlung_chrome.is-night {color: #ece6da; --chip: rgba(20, 18, 15, 0.58); }
.verwandlung_wrap .verwandlung_chrome.is-away {opacity: 0; }
.verwandlung_wrap .verwandlung_chrome.is-away * {pointer-events: none !important; }
.verwandlung_wrap .verwandlung_brand, .verwandlung_wrap .verwandlung_where, .verwandlung_wrap .verwandlung_sound {background: var(--chip) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 8px 11px 7px !important; transition: background 0.6s, color 0.6s; }
.verwandlung_wrap .verwandlung_brand {position: absolute; left: var(--gut); top: var(--top); pointer-events: auto; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.verwandlung_wrap .verwandlung_brand_word {font: italic 400 20px / 1 var(--book); letter-spacing: -0.01em; }
.verwandlung_wrap .verwandlung_brand_no {font: 500 10px / 1 var(--grot); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; }
.verwandlung_wrap .verwandlung_where {position: absolute; right: var(--gut); top: var(--top); pointer-events: auto; background: none; border: 0; padding: 2px 0; color: inherit; cursor: pointer; display: flex; align-items: baseline; gap: 12px; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; }
.verwandlung_wrap .verwandlung_where_n {font: italic 400 20px / 1 var(--book); letter-spacing: 0; text-transform: none; min-width: 1.4em; text-align: right; }
.verwandlung_wrap .verwandlung_where::after {content: ''; width: 18px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; align-self: center; }
.verwandlung_wrap .verwandlung_sound {position: absolute; right: var(--gut); bottom: var(--top); pointer-events: auto; background: none; border: 0; padding: 4px 0; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; }
.verwandlung_wrap .verwandlung_sound_bars {display: flex; gap: 2px; align-items: flex-end; height: 10px; }
.verwandlung_wrap .verwandlung_sound_bars i {width: 2px; height: 3px; background: currentColor; transition: height 0.3s; }
.verwandlung_wrap .verwandlung_sound[aria-pressed='true'] .verwandlung_sound_bars i {animation: verwandlung-bar 1.1s ease-in-out infinite alternate; }
.verwandlung_wrap .verwandlung_sound[aria-pressed='true'] .verwandlung_sound_bars i:nth-child(2) {animation-delay: -0.4s; }
.verwandlung_wrap .verwandlung_sound[aria-pressed='true'] .verwandlung_sound_bars i:nth-child(3) {animation-delay: -0.8s; }
@keyframes verwandlung-bar {from {height: 3px; } to {height: 10px; } }
/* the apple stays: after part II a small red word sits in the corner until he dies */
.verwandlung_wrap .verwandlung_apple {position: fixed; left: var(--gut); bottom: var(--top); margin: 0; font: italic 400 15px / 1 var(--book); color: var(--red); mix-blend-mode: normal; opacity: 0; transition: opacity 1.4s; z-index: 61; }
.verwandlung_wrap .verwandlung_apple.is-on {opacity: 1; }

/* ── index ── */
.verwandlung_wrap .verwandlung_index {position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--paper); overflow: auto; clip-path: inset(0 0 100% 0); transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1); }
.verwandlung_wrap .verwandlung_index.is-open {clip-path: inset(0 0 0 0); }
.verwandlung_wrap .verwandlung_index[hidden] {display: block; visibility: hidden; }
.verwandlung_wrap .verwandlung_index.is-open[hidden] {visibility: visible; }
.verwandlung_wrap .verwandlung_index_inner {padding: calc(var(--top) + 64px) var(--gut) 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.verwandlung_wrap .verwandlung_index_meta {grid-column: 1 / 4; display: flex; flex-direction: column; gap: 18px; }
.verwandlung_wrap .verwandlung_index_tag {margin: 0; font: 500 11px / 1.3 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.verwandlung_wrap .verwandlung_index_note {margin: 0; font: 400 16px / 1.45 var(--book); max-width: 30ch; }
.verwandlung_wrap .verwandlung_gfx {display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.verwandlung_wrap .verwandlung_gfx_row {display: flex; gap: 0; border: 1px solid rgba(236, 230, 218, 0.35); width: max-content; }
.verwandlung_wrap .verwandlung_gfx_row button {background: none; border: 0; color: inherit; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 12px 8px; cursor: pointer; }
.verwandlung_wrap .verwandlung_gfx_row button.is-on {background: var(--paper); color: var(--ink); }
.verwandlung_wrap .verwandlung_gfx_gpu {margin: 0; font: 400 12px / 1.4 var(--grot); opacity: 0.55; max-width: 34ch; }
.verwandlung_wrap .verwandlung_index_list {grid-column: 4 / 13; list-style: none; margin: 0; padding: 0; }
.verwandlung_wrap .verwandlung_index_list li {border-bottom: 1px solid rgba(236, 230, 218, 0.18); }
.verwandlung_wrap .verwandlung_index_list a {display: grid; grid-template-columns: 3.4em 1fr auto; align-items: baseline; gap: 18px; color: inherit; text-decoration: none; padding: 8px 0 6px; transition: padding 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s; }
.verwandlung_wrap .verwandlung_index_list a span:nth-child(1) {font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; opacity: 0.6; }
.verwandlung_wrap .verwandlung_index_list a span:nth-child(2) {font: 300 clamp(28px, 3.6vw, 60px) / 1.02 var(--book); letter-spacing: -0.02em; }
.verwandlung_wrap .verwandlung_index_list a span:nth-child(3) {font: italic 400 clamp(14px, 1.2vw, 18px) / 1 var(--book); opacity: 0.6; }
.verwandlung_wrap .verwandlung_index_list a:hover {padding-left: 18px; }
.verwandlung_wrap .verwandlung_index_close {position: fixed; right: var(--gut); top: var(--top); background: var(--paper); color: var(--ink); border: 0; padding: 8px 12px 7px; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }

/* ── one cue at a time ── */
.verwandlung_wrap .verwandlung_cue {position: fixed; left: 50%; bottom: calc(var(--top) + 2px); transform: translateX(-50%); margin: 0; z-index: 55; color: var(--ink); background: rgba(236, 230, 218, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 8px 12px 7px; pointer-events: none; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.6s; white-space: nowrap; }
.verwandlung_wrap .verwandlung_cue.is-on {opacity: 1; }
.verwandlung_wrap .verwandlung_cue.is-night {color: #ece6da; background: rgba(20, 18, 15, 0.58); }
.verwandlung_wrap .verwandlung_cue::before {content: ''; width: 22px; height: 1px; background: currentColor; animation: verwandlung-cue 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; transform-origin: left; }
@keyframes verwandlung-cue {0% {transform: scaleX(0); } 50% {transform: scaleX(1); transform-origin: left; } 51% {transform-origin: right; } 100% {transform: scaleX(0); transform-origin: right; } }

/* ── the passage card (hover a thing) ── */
.verwandlung_wrap .verwandlung_card {position: fixed; z-index: 50; left: var(--gut); bottom: calc(var(--top) + 40px); width: min(420px, calc(100vw - 2 * var(--gut))); padding: 20px 22px 18px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--hair), 0 30px 60px -30px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.verwandlung_wrap .verwandlung_card.is-on {opacity: 1; transform: none; }
.verwandlung_wrap .verwandlung_card_tag {margin: 0 0 12px; display: flex; justify-content: space-between; gap: 12px; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; }
.verwandlung_wrap .verwandlung_card_tag span:last-child {opacity: 0.55; }
.verwandlung_wrap .verwandlung_card_de {margin: 0 0 10px; font: italic 400 17px / 1.38 var(--book); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.verwandlung_wrap .verwandlung_card_tr {margin: 0; font: 400 14px / 1.45 var(--book); color: var(--mute); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.verwandlung_wrap .verwandlung_card_src {margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); font: 500 10px / 1.3 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }

/* ── held plates over the world (fixed; opacity is the chapter's own clock) ── */
.verwandlung_wrap .verwandlung_plates {position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.verwandlung_wrap .verwandlung_plate {position: absolute; left: var(--gut); bottom: calc(var(--top) + 48px); width: min(560px, calc(100vw - 2 * var(--gut))); color: var(--pc, #fff); opacity: var(--a, 0); visibility: hidden; transform: translateY(calc((1 - var(--a, 0)) * 10px)); }
.verwandlung_wrap .verwandlung_plate.is-vis {visibility: visible; }
.verwandlung_wrap .verwandlung_plate .verwandlung_tag {margin-bottom: 18px; }
.verwandlung_wrap .verwandlung_q {margin: 0 0 12px; font: italic 300 clamp(26px, 2.7vw, 44px) / 1.12 var(--book); letter-spacing: -0.012em; text-wrap: balance; }
.verwandlung_wrap .verwandlung_t {margin: 0; font: 400 clamp(15px, 1.1vw, 18px) / 1.45 var(--book); opacity: 0.78; max-width: 46ch; }
.verwandlung_wrap .verwandlung_note, .verwandlung_wrap .verwandlung_count {margin: 16px 0 0; font: 500 11px / 1.4 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; max-width: 46ch; }
.verwandlung_wrap .verwandlung_plate.is-dark {--pc: var(--ink); }
/* every caption sits on its own sheet, so it reads over the typeset room: ink paper by night, paper by day */
.verwandlung_wrap .verwandlung_plate {box-sizing: border-box; padding: 20px 22px 18px; background: rgba(18, 16, 13, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.verwandlung_wrap .verwandlung_plate.is-dark {background: rgba(236, 230, 218, 0.84); }
.verwandlung_wrap .verwandlung_plate.is-room, .verwandlung_wrap .verwandlung_plate.is-ceiling {left: auto; right: var(--gut); text-align: right; }
.verwandlung_wrap .verwandlung_plate.is-room .verwandlung_tag, .verwandlung_wrap .verwandlung_plate.is-ceiling .verwandlung_tag {justify-content: flex-end; }
.verwandlung_wrap .verwandlung_plate.is-room .verwandlung_t, .verwandlung_wrap .verwandlung_plate.is-ceiling .verwandlung_t {margin-left: auto; }
.verwandlung_wrap .verwandlung_plate.is-door {width: min(620px, calc(100vw - 2 * var(--gut))); }
.verwandlung_wrap .verwandlung_answer {pointer-events: auto; margin-top: 22px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 12px; border-bottom: 1px solid currentColor; padding-bottom: 6px; max-width: 520px; }
.verwandlung_wrap .verwandlung_answer_l {grid-column: 1 / 3; font: 500 11px / 1 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-bottom: 10px; }
.verwandlung_wrap .verwandlung_answer_in {min-width: 0; background: none; border: 0; outline: 0; color: inherit; font: italic 400 20px / 1.3 var(--book); padding: 2px 0; }
.verwandlung_wrap .verwandlung_answer_in::placeholder {color: currentColor; opacity: 0.38; }
.verwandlung_wrap .verwandlung_answer_go {background: none; border: 1px solid currentColor; color: inherit; width: 34px; height: 30px; font: 400 16px / 1 var(--grot); cursor: pointer; }
.verwandlung_wrap .verwandlung_heard {margin: 14px 0 0; font: italic 400 18px / 1.35 var(--book); min-height: 1.35em; }
.verwandlung_wrap .verwandlung_heard b {font-style: normal; font-weight: 500; font-family: var(--grot); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 6px; opacity: 0.7; }
.verwandlung_wrap .verwandlung_plate.is-apple .verwandlung_q {color: var(--pc); }
.verwandlung_wrap .verwandlung_plate.is-apple, .verwandlung_wrap .verwandlung_plate.is-end {left: 50%; transform: translate(-50%, calc((1 - var(--a, 0)) * 10px)); text-align: center; width: min(760px, calc(100vw - 2 * var(--gut))); }
.verwandlung_wrap .verwandlung_plate.is-apple .verwandlung_tag, .verwandlung_wrap .verwandlung_plate.is-end .verwandlung_tag {justify-content: center; }
.verwandlung_wrap .verwandlung_plate.is-apple .verwandlung_t, .verwandlung_wrap .verwandlung_plate.is-end .verwandlung_t {margin: 0 auto; }

/* ── parts (lengths of scroll) ── */
.verwandlung_wrap .verwandlung_part {position: relative; pointer-events: none; }
.verwandlung_wrap .verwandlung_part[data-part='hero'] {height: 260vh; pointer-events: auto; }
.verwandlung_wrap .verwandlung_part[data-part='morning'] {height: 320vh; }
.verwandlung_wrap .verwandlung_part[data-part='room'] {height: 520vh; }
.verwandlung_wrap .verwandlung_part[data-part='door'] {height: 330vh; }
.verwandlung_wrap .verwandlung_part[data-part='violin'] {height: 300vh; }
.verwandlung_wrap .verwandlung_part[data-part='apple'] {height: 300vh; }
.verwandlung_wrap .verwandlung_part[data-part='decline'] {height: 320vh; }
.verwandlung_wrap .verwandlung_part[data-part='end'] {height: 420vh; }

/* ── hero: an open book; the left leaf is the title page, then Kafka's letter; the right page becomes the floor ── */
.verwandlung_wrap .verwandlung_hero {position: fixed; inset: 0; z-index: 10; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.6vh, 28px); padding: calc(var(--top) + 54px) var(--gut) calc(var(--top) + 46px); opacity: var(--ha, 1); visibility: var(--hv, visible); --ph: min(70vh, calc((100vw - 2 * var(--gut)) / 2 * 1.3824)); --pw: calc(var(--ph) * 0.7234); }
.verwandlung_wrap .verwandlung_spread {position: relative; width: calc(var(--pw) * 2); height: var(--ph); flex: none; perspective: 2200px; }
.verwandlung_wrap .verwandlung_sheet, .verwandlung_wrap .verwandlung_leaf {position: absolute; top: 0; width: var(--pw); height: var(--ph); box-sizing: border-box; }
.verwandlung_wrap .verwandlung_sheet {right: 0; background: #efe9de; padding: 12.7% 10% 10%; overflow: hidden; container-type: inline-size; opacity: var(--sa, 1); box-shadow: inset 18px 0 24px -22px rgba(27, 25, 21, 0.35), 0 40px 80px -50px rgba(27, 25, 21, 0.45); }
.verwandlung_wrap .verwandlung_sheet_part {opacity: var(--st, 1); margin: 0 0 1.2em; font: 400 3.6cqi / 1 var(--book); text-align: center; }
.verwandlung_wrap .verwandlung_sheet_text {opacity: var(--st, 1); margin: 0; font: 400 3.82cqi / 1.36 var(--book); font-variation-settings: 'opsz' 12; text-align: justify; hyphens: manual; }
.verwandlung_wrap .verwandlung_leaf {left: 0; background: #ebe5d9; transform-origin: 100% 50%; transform: translateX(calc(var(--lx, 0) * -1px)); opacity: var(--la, 1); box-shadow: inset -18px 0 24px -22px rgba(27, 25, 21, 0.4), 0 40px 80px -50px rgba(27, 25, 21, 0.45); container-type: inline-size; }
.verwandlung_wrap .verwandlung_titlepage, .verwandlung_wrap .verwandlung_hook {position: absolute; inset: 0; box-sizing: border-box; padding: 13% 11% 10%; display: flex; flex-direction: column; }
.verwandlung_wrap .verwandlung_titlepage {align-items: center; text-align: center; opacity: var(--ta, 1); transform: translateY(calc((1 - var(--ta, 1)) * -10px)); }
.verwandlung_wrap .verwandlung_tp_author {margin: 0; font: italic 400 max(14px, 4.6cqi) / 1 var(--book); }
.verwandlung_wrap .verwandlung_title {margin: 9% 0 0; display: flex; flex-direction: column; align-items: center; gap: 0.6em; }
.verwandlung_wrap .verwandlung_title_de {font: 300 15.5cqi / 0.88 var(--book); letter-spacing: -0.035em; font-variation-settings: 'opsz' 72; }
.verwandlung_wrap .verwandlung_title_en {font: 500 max(10px, 2.2cqi) / 1 var(--grot); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.verwandlung_wrap .verwandlung_hero_dl {margin: auto 0 0; width: 100%; display: grid; border-top: 1px solid var(--hair); text-align: left; }
.verwandlung_wrap .verwandlung_hero_dl div {display: grid; grid-template-columns: 38% 1fr; gap: 10px; padding: 2.1cqi 0 1.9cqi; border-bottom: 1px solid var(--hair); }
.verwandlung_wrap .verwandlung_hero_dl dt {font: 500 max(9px, 2cqi) / 1.5 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.verwandlung_wrap .verwandlung_hero_dl dd {margin: 0; font: 400 max(12px, 2.9cqi) / 1.35 var(--book); font-variant-numeric: lining-nums tabular-nums; }
.verwandlung_wrap .verwandlung_tp_house {margin: 6% 0 0; font: 500 max(9px, 2cqi) / 1.4 var(--grot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.verwandlung_wrap .verwandlung_hook {justify-content: center; gap: 4cqi; opacity: var(--ka, 0); transform: translateY(calc((1 - var(--ka, 0)) * 12px)); }
.verwandlung_wrap .verwandlung_hook .verwandlung_tag {font-size: max(10px, 2.2cqi); }
.verwandlung_wrap .verwandlung_hook_q {margin: 0; font: italic 300 max(19px, 7.4cqi) / 1.12 var(--book); letter-spacing: -0.015em; }
.verwandlung_wrap .verwandlung_hook_t {margin: 0; font: 400 max(13px, 3.5cqi) / 1.45 var(--book); color: var(--mute); }
.verwandlung_wrap .verwandlung_hook_us {margin: 2cqi 0 0; font: 500 max(10px, 2.4cqi) / 1.4 var(--grot); letter-spacing: 0.08em; text-transform: uppercase; }
.verwandlung_wrap .verwandlung_first {margin: 0; max-width: 44ch; text-align: center; font: italic 300 clamp(17px, 1.45vw, 24px) / 1.32 var(--book); letter-spacing: -0.005em; opacity: var(--fa, 1); text-wrap: balance; }
.verwandlung_wrap .verwandlung_first .w {color: var(--faint); transition: color 0.4s; }
.verwandlung_wrap .verwandlung_first .w.is-read {color: var(--ink); }

@media (max-width: 1023px) {
  .verwandlung_wrap .verwandlung_plate {bottom: calc(var(--top) + 76px); }
  .verwandlung_wrap .verwandlung_plate.is-room, .verwandlung_wrap .verwandlung_plate.is-ceiling {left: var(--gut); right: auto; text-align: left; }
  .verwandlung_wrap .verwandlung_plate.is-room .verwandlung_tag, .verwandlung_wrap .verwandlung_plate.is-ceiling .verwandlung_tag {justify-content: flex-start; }
  .verwandlung_wrap .verwandlung_card {top: calc(var(--top) + 56px); bottom: auto; }
}
@media (max-width: 767px) {
  .verwandlung_wrap .verwandlung_index_inner {display: flex; flex-direction: column-reverse; gap: 28px; padding-top: calc(var(--top) + 60px); }
  .verwandlung_wrap .verwandlung_index_note {max-width: none; }
  .verwandlung_wrap .verwandlung_index_list a {grid-template-columns: 2.6em 1fr; }
  .verwandlung_wrap .verwandlung_index_list a span:nth-child(3) {display: none; }
  .verwandlung_wrap .verwandlung_hero {--ph: min(calc(100svh - 250px), calc((100vw - 2 * var(--gut)) * 1.3824)); }
  .verwandlung_wrap .verwandlung_spread {width: var(--pw); }
  .verwandlung_wrap .verwandlung_leaf {transform-origin: 0 50%; transform: rotateY(calc(var(--turn, 0) * -168deg)); backface-visibility: hidden; }
}
@media (max-width: 599px) {
  .verwandlung_wrap .verwandlung_brand_word {font-size: 17px; }
  .verwandlung_wrap .verwandlung_where_t {display: none; }
  .verwandlung_wrap .verwandlung_q {font-size: clamp(23px, 6.6vw, 30px); }
  .verwandlung_wrap .verwandlung_t {font-size: 14px; }
  .verwandlung_wrap .verwandlung_cue {bottom: calc(var(--top) + 30px); }
  .verwandlung_wrap .verwandlung_card {padding: 16px 16px 14px; }
  .verwandlung_wrap .verwandlung_card_de {font-size: 15px; -webkit-line-clamp: 4; }
  .verwandlung_wrap .verwandlung_card_tr {font-size: 13px; -webkit-line-clamp: 4; }
}
@media (prefers-reduced-motion: reduce) { .verwandlung_wrap .verwandlung_cue::before {animation: none; } }

.verwandlung_wrap :focus-visible {outline: 2px solid currentColor; outline-offset: 3px; }