/* site.css */
@font-face { font-family: Aeonik; src: url('../fonts/Aeonik-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root { color-scheme: dark; --surface: #08090b; --text: #f3f3f5; --muted: #bcbcc5; --gold: #dfbc78; --gutter: 6vw; font-family: Aeonik, Aptos, system-ui, sans-serif; }
html[data-country-pending="true"] [data-country-order] { visibility: hidden; }
* { box-sizing: border-box; scrollbar-color: #6d5b3d var(--surface); scrollbar-width: thin; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; background: var(--surface); }
body { position: relative; margin: 0; background: var(--surface); color: var(--text); overflow-x: hidden; overflow-x: clip; -webkit-user-select: none; user-select: none; }
/* Apply the approved soft depth to reading text at each font size.
   Only the grey edge is softened; the letter face stays sharp. */
:where(body, body *) { text-shadow: 0 .012em max(.45px, .006em) #929397, 0 .03em .02em #08090be6, 0 .065em .065em #08090b; }
/* Legal footer row, buttons and dark text on gold (skip link) stay flat, including dark hover/selected text. */
:where(.footer-bottom, .footer-bottom *, button, button *, .pill, .pill *, .footer-inquiry, .footer-inquiry *, [role="button"], [role="button"] *, input[type="button"], input[type="submit"], input[type="reset"], .skip-link) { text-shadow: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img, a { -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus { outline: 2px solid var(--gold); outline-offset: 7px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
::selection { color: var(--surface); background: var(--gold); }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 30; background: var(--gold); color: #08090b; padding: 14px; border-radius: 4px; }
.skip-link:focus { top: 10px; }
.site-header { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px 24px; padding: 27px var(--gutter); z-index: 10; pointer-events: none; }
.brand { display: block; grid-area: 1 / 1; width: fit-content; }
/* Align the supplied artwork's 76 px left inset with the headline. */
.brand img { display: block; width: clamp(154.375px, 17.0625vw, 235.625px); height: auto; transform: translateX(-3.7109375%); }
.country-switch { grid-area: 1 / 2; display: flex; padding: 3px; border: 1px solid #64646b; border-radius: 28px; pointer-events: auto; }
.country-switch button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 23px; background: transparent; color: var(--muted); font-size: .8125rem; }
.country-switch button[aria-pressed="true"] { background: var(--text); color: var(--surface); }
.country-switch button[aria-pressed="false"]:hover { color: var(--text); background: #24252b; }
html.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
.scene-layer { position: absolute; inset: 0; overflow: hidden; overflow: clip; z-index: 1; pointer-events: none; }
/* Native fallbacks cover the line layer just like GPU photographs. */
.media:not(.gpu-ready) { z-index: 2; }
/* Moving visual surfaces cannot provide a stable browser history anchor. */
.scene-layer, .media, .reel-marks { overflow-anchor: none; }
#water-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; }
main { padding: 0 var(--gutter); overflow-x: hidden; overflow-x: clip; }
h1, h2, p { margin: 0; }
h1, h2 { position: relative; z-index: 2; font-weight: 400; letter-spacing: -.025em; }
h1 { font-size: clamp(2.9rem, 9vw, 5.8rem); line-height: 1.13; padding: 0 0 58px; }
h1 > span, .about h2 > span { display: block; }
h1 > span:first-child { padding-left: 9%; }
h1 > .headline-counter { font-size: min(10vw, 5.8rem); white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reveal-word { display: inline-block; white-space: nowrap; overflow: hidden; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.reveal-char { display: inline-block; }
.text-motion-ready.motion-enabled [data-reveal] .reveal-char { transform: translate3d(0,115%,0) rotate(8deg); transform-origin: 0 100%; opacity: 0; transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .45s; transition-delay: calc(var(--i)*16ms + var(--reveal-delay,0ms)); }
/* Release the resting text transform after the entrance animation. */
.text-motion-ready.motion-enabled [data-reveal].is-visible .reveal-char { transform: none; opacity: 1; }
.text-motion-ready.motion-enabled [data-reveal]:not(.is-visible) .reveal-char { transition-duration: .2s; transition-delay: 0s; }
.text-motion-ready.motion-enabled .project-category .reveal-char { transform: none; transition: opacity .15s; }
.headline-shift, .headline-word { display: inline-block; }
.reveal-word { padding-inline: .08em; margin-inline: -.08em; }
.headline-line { --headline-indent: 0px; --headline-entry: 110%; }
h1 > .headline-shifted { --headline-indent: 7.92vw; }
.headline-counter { --headline-entry: -110%; }
.text-motion-ready.motion-enabled .headline-word { transform: translate3d(0,var(--headline-entry),0); transition: transform .82s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--word-i)*75ms + var(--reveal-delay,0ms)); }
.text-motion-ready.motion-enabled .headline-shift { transform: translate3d(calc(-1*var(--headline-indent)),0,0); transition: transform 1.05s cubic-bezier(.19,1,.22,1); transition-delay: calc(540ms + var(--word-return)*115ms); }
.text-motion-ready.motion-enabled .headline-line.is-visible .headline-word, .text-motion-ready.motion-enabled .headline-line.is-visible .headline-shift { transform: none; }
.text-motion-ready.motion-enabled .headline-line:not(.is-visible) .headline-word, .text-motion-ready.motion-enabled .headline-line:not(.is-visible) .headline-shift { transition: none; }
/* The opening title starts with the first styled paint, independently of modules and WebGL. */
.motion-enabled #intro-title:not(.intro-observed) .headline-word { transition: none; animation: intro-word .82s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--word-i)*75ms + var(--reveal-delay,0ms)); }
.motion-enabled #intro-title:not(.intro-observed) .headline-shift { transition: none; animation: intro-shift 1.05s cubic-bezier(.19,1,.22,1) both; animation-delay: calc(540ms + var(--word-return)*115ms); }
@keyframes intro-word { from { transform: translate3d(0,var(--headline-entry),0); } to { transform: none; } }
@keyframes intro-shift { from { transform: translate3d(calc(-1*var(--headline-indent)),0,0); } to { transform: none; } }
.intro { position: relative; padding-top: 180px; }
.brush { position: absolute; top: 0; left: calc(-1 * var(--gutter)); width: 112%; height: 1160px; pointer-events: none; overflow: visible; }
.brush-ink { stroke-dasharray: 1000; stroke-dashoffset: 0; }
.motion-enabled .brush-ink { stroke-dashoffset: var(--brush-offset, 850); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; }
.intro-copy { position: relative; z-index: 2; font-size: 1.125rem; line-height: 1.55; color: #d4d4dc; }
.intro-copy { padding-top: 8px; }
.intro-copy p { -webkit-hyphens: manual; hyphens: manual; }
.intro-copy p + p { margin-top: 1.55em; }
.success-title { text-align: left; margin: 0 0 52px; }
.intro-copy p { max-width: 60ch; }
.pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 52px; margin-top: 30px; padding: 14px 24px; border-radius: 30px; background: #24252b; color: var(--text); font-size: .875rem; transition: color .35s; }
.pill::before { content: ''; position: absolute; top: 50%; left: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); transition: transform .6s cubic-bezier(.22,1,.36,1); }
.pill > span, .pill > svg { position: relative; z-index: 1; transition: transform .5s cubic-bezier(.22,1,.36,1),opacity .3s; }
.pill > span { transform: translateX(12px); }
.pill > svg { flex-shrink: 0; opacity: 0; transform: translateX(22px); }
.pill:is(:hover,:focus-visible) { color: var(--surface); }
.pill:is(:hover,:focus-visible)::before { transform: translateY(-50%) scale(80); }
.pill:is(:hover,:focus-visible) > span { transform: translateX(-9px); }
.pill:is(:hover,:focus-visible) > svg { opacity: 1; transform: translateX(0); }
.text-motion-ready.motion-enabled .pill[data-reveal] { opacity: 0; transform: translate3d(0,40px,0) rotate(10deg); transition: transform .8s cubic-bezier(.16,1,.3,1),opacity .5s,color .35s; }
.text-motion-ready.motion-enabled .pill[data-reveal].is-visible { opacity: 1; transform: none; }
.site-header .streaming-cta { grid-area: 2 / 1 / auto / -1; justify-self: end; max-width: 100%; min-height: 52px; margin-top: 0; padding: 14px 20px; gap: 14px; background: #211d43; border: 1px solid #8272d9; color: #e4ddff; font-size: clamp(.75rem, 3.2vw, .875rem); white-space: nowrap; pointer-events: auto; }
.streaming-cta[hidden] { display: none; }
.streaming-cta::before { background: linear-gradient(125deg, #5b82f6, #8b6cf2); }
.streaming-cta:is(:hover,:focus-visible) { color: var(--surface); }
.streaming-cta:focus-visible { outline-color: #ad99ff; }
svg:not(.brush):not(.about-line):not(.flag-masks):not(.rating-star) { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.media-wrap { position: relative; width: 100%; aspect-ratio: 1.48; }
.media { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #24252b var(--media-preview, none) center / cover no-repeat; transform-origin: 50% 50%; }
.media.gpu-ready { background: transparent; }
.media.gpu-ready img { opacity: 0; }
.media img[data-image-failed="true"] { opacity: 0; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-media { aspect-ratio: 1.42; }
.intro-media .media { padding: 0; border: 0; color: inherit; box-shadow: 0 20px 60px #0005; }
.intro-media .media:focus:not(:focus-visible) { outline: none; }
.intro-media .media:focus { outline: 2px solid var(--text); outline-offset: -6px; }
.intro-media .media.gpu-ready:focus { z-index: 2; background: transparent; }
.intro-media .media.gpu-ready:focus img { opacity: 0; }
.intro-media .media:disabled { cursor: default; }
.reel-marks { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; color: var(--muted); transform-origin: 50% 50%; }
.reel-marks > div { position: absolute; top: 0; height: 100%; width: 0; }
.reel-marks span { position: absolute; top: -1.5vw; left: 0; width: 1vw; height: 1vw; transform: translate(-50%,-50%) rotate(var(--mark-angle,0deg)) scale(var(--mark-scale,0)); }
.reel-marks span:last-child { top: calc(100% + 1.5vw); }
.reel-marks span::before, .reel-marks span::after { content: ''; position: absolute; background: currentColor; }
.reel-marks span::before { left: 0; top: calc(50% - .5px); width: 100%; height: 1px; }
.reel-marks span::after { left: calc(50% - .5px); top: 0; width: 1px; height: 100%; }
.work { position: relative; padding: 81px 0 0; }
.feature { position: relative; padding-top: 96px; }
.work h2, .success-title { font-size: clamp(2rem, 11vw, 5rem); line-height: 1.1; }
.work h2 { margin-bottom: 18px; }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px; }
.project { min-width: 0; }
.project-link { display: block; }
.flag-masks { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.country-flag .project-link { pointer-events: none; }
.country-flag .project-caption { pointer-events: auto; }
.country-flag .media { pointer-events: auto; background: transparent; border-radius: 0; }
.country-flag .project-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.project-link:focus:not(:focus-visible) { outline: none; }
.project-link:focus-visible { outline: none; }
.project-link:focus .title-letters { text-decoration: underline; text-underline-offset: .18em; }
.project-link:focus:not(:focus-visible) .title-letters { text-decoration: none; }
.project-caption { position: relative; z-index: 2; padding-top: 18px; transform-origin: 50% 0; }
.project-category { display: block; color: var(--muted); font-size: .875rem; line-height: 1.4; margin-bottom: 9px; }
.project-title { --title-offset: 26px; display: block; position: relative; font-size: 1.4rem; font-weight: 400; line-height: 1.3; }
.title-letters { display: inline-block; max-width: calc(100% - 26px); transform: translateX(var(--title-offset)); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.project-title svg { position: absolute; left: 0; top: .18em; width: 20px; opacity: 1; transform: translateX(0); transition: transform .5s cubic-bezier(.16,1,.3,1),opacity .25s; }
.project-link:is(:hover,:focus-visible) .project-title svg { transform: translateX(0); opacity: 1; }
.project-link:is(:hover,:focus-visible) .title-letters { transform: translateX(26px); }
.text-motion-ready.motion-enabled .title-letters { opacity: 0; transform: translate3d(var(--title-offset),10px,0); transition: transform .5s cubic-bezier(.16,1,.3,1),opacity .3s; }
.text-motion-ready.motion-enabled .title-letters.is-visible { opacity: 1; transform: translate3d(var(--title-offset),0,0); }
.text-motion-ready.motion-enabled .project-link:is(:hover,:focus-visible) .title-letters.is-visible { transform: translate3d(26px,0,0); }
.about { position: relative; padding: 145px 0 0; }
.about-line { position: absolute; top: 80px; left: -5vw; width: 110%; height: 900px; pointer-events: none; overflow: visible; }
.about-line path { stroke-dasharray: 1000; }
.brush.line-gpu-ready, .about-line.line-gpu-ready { opacity: 0; }
.motion-enabled .about-line path { stroke-dashoffset: var(--line-offset, 1000); }
.about h2 { font-size: clamp(3rem, 10vw, 5.6rem); line-height: 1.08; margin-bottom: 58px; }
@media (max-width: 812px) {
  h1 { text-align: left; }
  .work h2 { text-align: center; }
  .site-header .streaming-cta { display: none; }
}
@media (min-width: 813px) {
  :root { --gutter: 5vw; }
  .site-header { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; padding-top: 32px; }
  .country-switch { grid-area: 1 / 3; }
  .site-header .streaming-cta { grid-area: 1 / 2; }
  .intro { padding-top: 250px; }
  h1 { font-size: clamp(4.5rem, 8.85vw, 10.2rem); padding-bottom: 176px; line-height: 1.15; }
  h1 > span:first-child { padding-left: 16.7%; }
  h1 > .headline-counter { font-size: inherit; }
  .headline-shifted { --headline-indent: 15.03vw; }
  h1 > .headline-shifted { --headline-indent: 15.03vw; }
  .brush { top: 0; height: 1440px; width: 111.2%; }
  .intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6.2vw; align-items: center; }
  .motion-enabled .intro-grid { padding-bottom: calc(78vh + 18.05vw); }
  .intro-grid { align-items: start; }
  .success-title { margin-bottom: 64px; }
  .intro-copy { grid-column: 2; grid-row: 1; padding-top: 0; font-size: clamp(1.125rem, 1.52vw, 1.65rem); }
  .intro-copy p { max-width: 43ch; }
  .intro-media { grid-column: 1; grid-row: 1; margin-top: clamp(140px, 14vw, 230px); aspect-ratio: 1.62; }
  .pill { margin-top: 38px; }
  .work { padding-top: 70px; }
  .feature { padding-top: 160px; }
  .work h2, .success-title { font-size: clamp(3.5rem, 7.3vw, 8rem); }
  .work h2 { margin: 0 0 28px; text-align: center; }
  .project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 68px 24px; }
  .project-category { font-size: .875rem; }
  .project-title { --title-offset: 0px; font-size: clamp(1rem, 1.5vw, 1.65rem); }
  .project-title svg { opacity: 0; transform: translateX(-10px); }
  .project-caption { padding-top: 16px; }
  .about { padding: 180px 0 0; }
  .about h2 { font-size: clamp(4rem, 8.85vw, 10.2rem); margin-bottom: 95px; }
  .about h2 > span:first-child { padding-left: 16.7%; }
}

/* Reserve photo geometry even before CSS aspect-ratio was available. */
@supports not (aspect-ratio:1){
 .media-wrap::before{content:"";display:block;padding-top:67.567568%}
 .intro-media::before{padding-top:70.422535%}
 @media(min-width:813px){.intro-media::before{padding-top:61.728395%}}
}

/* footer-base.css */
/* Shared contact markup, used by the final site and the retained design comparisons. */
.footer-front { position: relative; z-index: 2; background: var(--surface); overflow-x: hidden; overflow-x: clip; }
.footer-slot { height: 0; pointer-events: none; }
.contact-footer {
  --footer-muted: #aaa9a7;
  position: relative;
  z-index: 1;
  padding: 56px var(--gutter) 24px;
  color: var(--text);
  background: #0e0f11;
  -webkit-user-select: text;
  user-select: text;
  overflow: hidden; overflow: clip;
}
.footer-reveal-on .footer-slot { height: var(--footer-height); }
.footer-reveal-on .contact-footer { position: fixed; inset: auto 0 0; }
.contact-footer a { touch-action: manipulation; }
.footer-details { display: grid; gap: 38px 24px; }
.footer-contact { min-width: 0; }
.footer-contact > a:not(.footer-inquiry) {
  display: table;
  padding: 2px 0;
  max-width: 100%;
  font-size: clamp(25px, 6.5vw, 42px);
  line-height: 1.35;
  letter-spacing: -.025em;
  transition: color .25s;
}
.footer-contact > a:not(.footer-inquiry):hover { color: var(--gold); }
.footer-inquiry {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  margin-top: 23px;
  padding: 0 0 0 14px;
  border: 1px solid #66645e;
  border-radius: 24px;
  font-size: 14px;
  transition: border-color .25s, color .25s;
}
.footer-inquiry span { white-space: nowrap; }
.footer-inquiry .footer-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--gold);
}
.footer-inquiry:is(:hover,:focus-visible) { color: var(--gold); border-color: var(--gold); }
.footer-inquiry svg { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.footer-inquiry:is(:hover,:focus-visible) svg { transform: translate(2px,-2px); }
.footer-company { font-style: normal; font-size: 15px; line-height: 1.65; }
.footer-company p { margin: 0; }
.footer-company .company-name { margin-bottom: 14px; color: var(--text); }
.footer-company .company-register { margin-top: 14px; font-size: 12px; }
.footer-company .company-register { color: var(--footer-muted); }
.footer-socials { display: flex; flex-wrap: wrap; gap: 8px 26px; align-content: start; }
.footer-socials a { display: flex; align-items: center; gap: 15px; min-height: 44px; font-size: 14px; }
.contact-footer .footer-socials svg { width: 12px; height: 12px; color: var(--footer-muted); transition: transform .3s, color .3s; }
.footer-socials a:is(:hover,:focus-visible) { color: var(--gold); }
.footer-socials a:is(:hover,:focus-visible) svg { color: var(--gold); transform: translate(2px,-2px); }
.footer-brand { margin: 48px 0 36px; perspective: 1000px; }
.footer-brand img {
  display: block;
  width: 104%;
  max-width: none;
  height: auto;
  margin-left: -3.7%;
  transform-origin: 50% 100%;
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; border-top: 1px solid #363638; padding-top: 17px; font-size: 12px; color: var(--footer-muted); }
.footer-bottom nav { display: flex; gap: 26px; }
.footer-utilities { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a:is(:hover,:focus-visible) { color: var(--text); }
.footer-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footer-note { position: absolute; bottom: 75px; right: var(--gutter); max-width: min(320px,88vw); padding: 14px 18px; background: #24252b; border: 1px solid #66645e; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.footer-note[hidden] { display: none; }
.footer-reveal-on .footer-details { transform: translateY(calc((1 - var(--footer-progress, 1)) * 28px)); }
.footer-reveal-on .footer-brand img { transform: translateY(calc((1 - var(--footer-progress, 1)) * 22px)) rotateX(calc((1 - var(--footer-progress, 1)) * 11deg)); }
@media (min-width: 600px) {
  .footer-details { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  .footer-socials { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .footer-bottom { gap: 4px; }
  .footer-bottom > p { width: 100%; }
  .footer-utilities { width: 100%; justify-content: space-between; gap: 8px; }
  .footer-bottom nav { gap: 22px; }
}
@media (min-width: 1000px) {
  .contact-footer { padding-top: 65px; padding-bottom: 21px; }
  .footer-details { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr) auto; gap: 5vw; }
  .footer-contact > a:not(.footer-inquiry) { font-size: clamp(32px,3.2vw,52px); }
  .footer-company { padding-top: 5px; font-size: 16px; }
  .footer-socials { grid-column: auto; flex-direction: column; flex-wrap: nowrap; gap: 0; padding-top: 1px; }
  .footer-brand { margin-top: 64px; margin-bottom: 28px; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .contact-footer { padding-top: 40px; padding-bottom: 14px; }
  .footer-brand { margin-top: 38px; margin-bottom: 20px; }
}

/* variants.css */

.footer-stage { --scene-height: 100svh; --travel: 110svh; --p: 0; position: relative; margin-inline: calc(-1 * var(--gutter)); height: calc(var(--scene-height) + var(--travel)); }
.footer-scene { position: sticky; top: 0; height: var(--scene-height); overflow: hidden; overflow: clip; perspective: 1500px; perspective-origin: 50% 50%; background: #08090b; isolation: isolate; }
.footer-scene .contact-footer { --text: var(--ink); --gold: #806128; --footer-muted: #666156; position: absolute; z-index: 2; inset: 68px 0 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); background: var(--paper); padding: clamp(30px,5vw,76px) var(--gutter) 20px; transform-origin: 50% 100%; backface-visibility: hidden; }
.footer-scene .contact-footer::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #08090b; opacity: var(--shade,0); }
.footer-scene .footer-brand { margin: 40px 0 28px; }
.footer-scene .footer-brand img { width: 280px; max-width: 62vw; height: auto; margin: 0 0 0 -10px; filter: brightness(0); }
.footer-scene .footer-bottom { border-color: #c7c0b2; }
.footer-scene .footer-inquiry { border-color: #8b8270; background: var(--paper); border-radius: 23px; box-shadow: 0 0 0 transparent; transform-origin: center; transition: transform .35s, box-shadow .35s, border-color .25s; }
.footer-scene .footer-inquiry:is(:hover,:focus-visible) { transform: perspective(550px) rotateX(-12deg) rotateY(7deg) translateY(-2px); box-shadow: -2px 5px 0 -1px var(--surface), -3px 9px 14px -9px var(--surface); }
.footer-scene .footer-inquiry:active { transform: none; box-shadow: none; }
.footer-scene .footer-socials { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.footer-scene .footer-note { background: var(--paper); color: var(--ink); z-index: 8; border-color: #8b8270; }
.footer-scene ::selection { background: #d8c291; color: #171815; }
[data-variant="window"] {
  --gate-rail: var(--gutter);
  --gate-inset: clamp(16px,2vw,28px);
  --gate-top: calc(var(--scene-height) - var(--p) * var(--travel));
}
[data-variant="window"] .footer-scene { perspective: none; background: var(--surface); }

@media (max-width: 760px) {
  .footer-scene .contact-footer { inset: 98px 0 0; padding: 27px 6vw 12px; }
  .footer-details { grid-template-columns: minmax(0,1fr) auto; gap: 24px 15px; }
  .footer-contact { grid-column: 1/-1; }
  .footer-contact > a:not(.footer-inquiry) { font-size: clamp(25px,6.5vw,38px); }
  .footer-inquiry { margin-top: 14px; }
  .footer-company { font-size: 12px; line-height: 1.6; }
  .footer-company .company-name { max-width: 165px; margin-bottom: 9px; }
  .footer-company .company-register { margin-top: 9px; font-size: 11px; }
  .footer-scene .footer-socials { grid-column: auto; }
  .footer-socials a { font-size: 12px; gap: 10px; }
  .footer-scene .footer-brand { margin: 24px 0 20px; }
  .footer-scene .footer-brand img { width: 205px; margin-left: -7px; }
  .footer-bottom { font-size: 11px; gap: 0; padding-top: 8px; }
  .footer-bottom > p { margin: 4px 0; }
  .footer-utilities { width: 100%; justify-content: space-between; }
  .footer-bottom nav { gap: 18px; }
}
/* The first footer's natural layout, with a smaller logo inside stationary dark rails. */
[data-variant="window"] .contact-footer {
  inset: auto var(--gate-rail) 0;
  display: block;
  padding: 56px var(--gate-inset) 24px;
}
[data-variant="window"] .footer-details { grid-template-columns: minmax(0,1fr); gap: 38px 24px; }
[data-variant="window"] .footer-contact { grid-column: auto; }
[data-variant="window"] .footer-contact > a:not(.footer-inquiry) { font-size: clamp(25px,6.5vw,42px); }
[data-variant="window"] .footer-inquiry { margin-top: 23px; }
[data-variant="window"] .footer-company { font-size: 15px; line-height: 1.65; }
[data-variant="window"] .company-name { max-width: none; margin-bottom: 14px; }
[data-variant="window"] .company-register { margin-top: 14px; font-size: 12px; }
[data-variant="window"] .footer-socials a { font-size: 14px; gap: 15px; }
[data-variant="window"] .footer-brand { margin: 48px 0 36px; }
[data-variant="window"] .footer-bottom { font-size: 12px; gap: 12px 24px; padding-top: 17px; }
[data-variant="window"] .footer-bottom > p { margin: 1em 0; }
[data-variant="window"] .footer-bottom nav { gap: 26px; }
@media (min-width: 600px) {
  [data-variant="window"] .footer-details { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  [data-variant="window"] .footer-socials { grid-column: 1/-1; }
  [data-variant="window"] .footer-utilities { width: auto; justify-content: normal; gap: 12px 28px; }
}
@media (max-width: 599px) {
  [data-variant="window"] .footer-bottom { gap: 4px; }
  [data-variant="window"] .footer-bottom nav { gap: 22px; }
  [data-variant="window"] .footer-utilities { gap: 8px; }
}
@media (min-width: 1000px) {
  [data-variant="window"] .contact-footer { padding-top: 65px; padding-bottom: 21px; }
  [data-variant="window"] .footer-details { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr) auto; gap: 5vw; }
  [data-variant="window"] .footer-contact > a:not(.footer-inquiry) { font-size: clamp(32px,3.2vw,52px); }
  [data-variant="window"] .footer-company { font-size: 16px; }
  [data-variant="window"] .footer-socials { grid-column: auto; }
  [data-variant="window"] .footer-brand { margin: 64px 0 28px; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  [data-variant="window"] .contact-footer { padding-top: 40px; padding-bottom: 14px; }
  [data-variant="window"] .footer-brand { margin: 38px 0 20px; }
}

/* loops.css */
/* Dark backing and a small bleed prevent the paper surface or decoded video edges
   from appearing through fractional-pixel clipping during the reveal. */
.footer-stage .contact-footer { background: var(--surface); }
.footer-stage .contact-footer { --ink: #9b9b9d; --footer-muted: var(--ink); }
.footer-stage .footer-bottom { border-color: var(--ink); }
.footer-stage .footer-inquiry { color: #22231f; }
.footer-backgrounds {
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
}
.footer-backgrounds [data-material] { position: absolute; inset: 0; }
.footer-backgrounds img,
.footer-backgrounds video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-backgrounds video { opacity: 0; }
.footer-backgrounds video.is-ready { opacity: 1; }
/* Keep the gate shadows above the film but below the uniformly coloured text.
   The offset compensates for the footer moving at half the gate speed. */
.footer-stage[data-variant="window"] .footer-backgrounds {
  --shadow-top: calc((1 - var(--p)) * var(--footer-height) * .5 + 1px);
}
.footer-stage[data-variant="window"] .footer-backgrounds::before,
.footer-stage[data-variant="window"] .footer-backgrounds::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.footer-stage[data-variant="window"] .footer-backgrounds::before {
  top: var(--shadow-top);
  left: 2px;
  right: 2px;
  height: clamp(210px,20vw,290px);
  background: var(--gate-shadow, none) left top / 256px 100% repeat-x;
}
.footer-stage[data-variant="window"] .footer-backgrounds::after {
  inset: 0 auto 0 0;
  width: calc(clamp(28px,3vw,48px) + 2px);
  background: var(--gate-side-shadow, none) center / 100% 100% no-repeat;
  clip-path: inset(var(--shadow-top) 0 0);
  -webkit-mask-image: linear-gradient(180deg,transparent var(--shadow-top),#000 calc(var(--shadow-top) + 48px));mask-image: linear-gradient(180deg,transparent var(--shadow-top),#000 calc(var(--shadow-top) + 48px));
}
/* B closes the video window behind the legal row without resizing the film. */
.footer-stage[data-frame="b"] .footer-bottom { position: relative; isolation: isolate; border-top-color: transparent; }
.footer-stage[data-frame="b"] .footer-bottom::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: calc(-1 * var(--footer-bottom-padding, 24px));
  left: calc(-1 * var(--gate-inset) - 2px);
  right: calc(-1 * var(--gate-inset) - 2px);
  background: var(--surface);
  pointer-events: none;
}

@media (min-width: 1000px) {
  /* Preserve the previous panel height: two large contact lines plus its
     unchanged padding, logo space and legal row. The smoke keeps its crop. */
  .footer-stage[data-variant="window"] .contact-footer {
    --footer-bottom-padding: 21px;
    height: calc(405.51px + 2.7 * clamp(32px, 3.2vw, 52px));
    padding-top: 44px;
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(0,1fr) auto;
    grid-template-rows: 72px 36px 26px minmax(40px,1fr) 44px 24px 62px;
    column-gap: 5vw;
  }
  .footer-stage[data-variant="window"] .footer-details,
  .footer-stage[data-variant="window"] .footer-contact { display: contents; }
  .footer-stage[data-variant="window"] .footer-brand {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 220px;
    margin: 0 0 0 -8px;
    background: var(--ink);
    -webkit-mask: url('../img/padronus-web.webp') center / contain no-repeat;mask: url('../img/padronus-web.webp') center / contain no-repeat;
  }
  .footer-stage[data-variant="window"] .footer-brand img {
    width: 100%;
    margin: 0;
    opacity: 0;
    filter: none;
  }
  .footer-stage[data-variant="window"] .footer-contact > a:not(.footer-inquiry) {
    grid-column: 1;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    align-self: start;
  }
  .footer-stage[data-variant="window"] .footer-contact > a[href^="mailto:"]:not(.footer-inquiry) { grid-row: 2; align-self: start; }
  .footer-stage[data-variant="window"] .footer-contact > a[href^="tel:"] { grid-row: 3; }
  .footer-stage[data-variant="window"] .footer-company,
  .footer-stage[data-variant="window"] .footer-socials {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 0;
    line-height: 26px;
  }
  .footer-stage[data-variant="window"] .footer-company { grid-area: 1 / 2 / 4 / 3; }
  .footer-stage[data-variant="window"] .footer-company p { margin: 0; }
  .footer-stage[data-variant="window"] .company-register { font-size: 14px; }
  .footer-stage[data-variant="window"] .footer-socials { grid-area: 1 / 3 / 4 / 4; }
  .footer-stage[data-variant="window"] .footer-socials a { min-height: 26px; }
  .footer-stage[data-variant="window"] .footer-inquiry {
    grid-area: 5 / 2 / 6 / 4;
    justify-self: end;
    align-self: end;
    margin-top: 0;
  }
  .footer-stage[data-variant="window"] .footer-bottom { grid-area: 7 / 1 / 8 / 4; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .footer-stage[data-variant="window"] .contact-footer {
    --footer-bottom-padding: 14px;
    height: calc(339.51px + 2.7 * clamp(32px, 3.2vw, 52px));
    padding-top: 24px;
  }
}

/* responsive.css */
/* Keep the chosen logo/contact grouping on phones and tablets as well. */
@media (max-width: 999px) {
  .footer-stage[data-variant="window"] .contact-footer {
    --footer-bottom-padding: max(20px, env(safe-area-inset-bottom));
    height: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: 64px 44px 44px 24px auto minmax(80px,15vh) 44px 24px auto;
    grid-template-rows: 64px 44px 44px 24px auto minmax(80px,15svh) 44px 24px auto;
    column-gap: 20px;
    padding: 26px var(--gate-inset) var(--footer-bottom-padding);
  }
  .footer-stage[data-variant="window"] .footer-details,
  .footer-stage[data-variant="window"] .footer-contact { display: contents; }
  .footer-stage[data-variant="window"] .footer-brand {
    grid-area: 1 / 1 / 2 / -1;
    align-self: start;
    width: 180px;
    margin: 0 0 0 -7px;
    background: var(--ink);
    -webkit-mask: url('../img/padronus-web.webp') center / contain no-repeat;mask: url('../img/padronus-web.webp') center / contain no-repeat;
  }
  .footer-stage[data-variant="window"] .footer-brand img { width: 100%; margin: 0; opacity: 0; filter: none; }
  .footer-stage[data-variant="window"] .footer-contact > a:not(.footer-inquiry) {
    grid-column: 1 / -1;
    align-self: start;
    justify-self: start;
    padding: 0;
    font-size: 16px;
    line-height: 44px;
    letter-spacing: 0;
  }
  .footer-stage[data-variant="window"] .footer-contact > a[href^="mailto:"]:not(.footer-inquiry) { grid-row: 2; }
  .footer-stage[data-variant="window"] .footer-contact > a[href^="tel:"] { grid-row: 3; }
  .footer-stage[data-variant="window"] .footer-company {
    grid-area: 5 / 1 / 6 / 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 11px 0;
    font-size: 14px;
    line-height: 22px;
    min-width: 0;
  }
  .footer-stage[data-variant="window"] .footer-company p { margin: 0; }
  .footer-stage[data-variant="window"] .company-name { max-width: none; }
  .footer-stage[data-variant="window"] .company-register { font-size: 14px; }
  .footer-stage[data-variant="window"] .footer-socials { grid-area: 5 / 2 / 6 / 3; padding: 0; gap: 0; }
  .footer-stage[data-variant="window"] .footer-socials a { min-height: 44px; font-size: 14px; }
  .footer-stage[data-variant="window"] .footer-inquiry { grid-area: 7 / 1 / 8 / -1; justify-self: end; align-self: end; margin: 0; }
  .footer-stage[data-variant="window"] .footer-bottom { grid-area: 9 / 1 / 10 / -1; align-items: start; gap: 0; padding-top: 16px; font-size: 12px; }
  .footer-stage[data-variant="window"] .footer-bottom > p { margin: 0; line-height: 26px; }
  .footer-stage[data-variant="window"] .footer-bottom .footer-utilities { width: 100%; }
  .footer-stage[data-variant="window"] .footer-bottom nav { gap: 24px; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .footer-stage[data-variant="window"] .contact-footer {
    height: max(510px,58vh); height: max(510px,58svh);
    grid-template-columns: minmax(180px,1.3fr) minmax(0,1fr) auto;
    grid-template-rows: 64px 44px 44px minmax(40px,1fr) 44px 24px 62px;
    column-gap: 24px;
    padding-top: 36px;
  }
  .footer-stage[data-variant="window"] .footer-brand { grid-area: 1 / 1 / 2 / 2; }
  .footer-stage[data-variant="window"] .footer-contact > a:not(.footer-inquiry) { grid-column: 1; }
  .footer-stage[data-variant="window"] .footer-company { grid-area: 1 / 2 / 4 / 3; }
  .footer-stage[data-variant="window"] .footer-socials { grid-area: 1 / 3 / 4 / 4; justify-content: space-between; }
  .footer-stage[data-variant="window"] .footer-inquiry { grid-area: 5 / 2 / 6 / 4; }
  .footer-stage[data-variant="window"] .footer-bottom { grid-area: 7 / 1 / 8 / 4; align-items: center; }
  .footer-stage[data-variant="window"] .footer-bottom > p { width: auto; }
  .footer-stage[data-variant="window"] .footer-bottom .footer-utilities { width: auto; }
}
@media (min-width: 1000px) and (pointer: coarse) {
  .footer-stage[data-variant="window"] .contact-footer { grid-template-rows: 72px 44px 44px minmax(40px,1fr) 44px 24px 62px; }
  .footer-stage[data-variant="window"] .footer-contact > a:not(.footer-inquiry) { line-height: 44px; }
  .footer-stage[data-variant="window"] .footer-socials a { min-height: 44px; }
  .footer-stage[data-variant="window"] .footer-company { padding-block: 9px; }
}

/* footer.css */
/* The approved B footer follows the real page ending, including stacked portraits. */
.site-footer-stage { --paper: #f2eee5; margin: 0; height: auto; z-index: 3; }
.site-footer-stage .footer-scene { position: relative; top: auto; height: auto; overflow: hidden; overflow: clip; }
.site-footer-stage .contact-footer { position: relative; inset: auto; margin-inline: var(--gate-rail); }
.site-footer-stage.is-revealing { height: var(--footer-height); }
.site-footer-stage.is-revealing .footer-scene {
  position: fixed;
  inset: 0;
  height: 100%;
  clip-path: inset(clamp(0px,var(--gate-top),100%) 0 0);
}
.site-footer-stage.is-revealing .contact-footer {
  position: absolute;
  inset: auto var(--gate-rail) 0;
  margin: 0;
}
/* Keep the extra native-video crop; the scene alone owns the moving reveal edge. */
.site-footer-stage.is-revealing {
  --footer-media-top: calc((1 - var(--p)) * var(--footer-height) * .5 + 3px);
}
.site-footer-stage:not(.is-revealing) { --p: 1; }
.site-footer-stage:not(.is-revealing) .contact-footer { transform: none !important; }
.site-footer-stage .footer-note { color: var(--ink); background: var(--surface); }

/* Filter the visible logo silhouette outside its mask, so the soft edge survives. */
.site-footer-stage[data-variant="window"] .footer-brand {
  filter: drop-shadow(0 .4px .45px #929397) drop-shadow(0 1px .65px #08090be6) drop-shadow(0 2px 2px #08090b);
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .site-footer-stage[data-variant="window"] .footer-brand { position: relative; background: none; -webkit-mask: none; mask: none; }
  .site-footer-stage[data-variant="window"] .footer-brand::before {
    content: ''; position: absolute; inset: 0; background: var(--ink); pointer-events: none;
    -webkit-mask: url('../img/padronus-web.webp') center / contain no-repeat;
    mask: url('../img/padronus-web.webp') center / contain no-repeat;
  }
}

/* The page water continues behind the independent film, including rails and legal band. */
.site-footer-stage .footer-scene, .site-footer-stage .contact-footer { background: transparent; }
.site-footer-stage .footer-backgrounds {
  background: var(--surface);
  clip-path: inset(2px 4px var(--footer-bottom-cut, 86px));
}
.site-footer-stage[data-frame="b"] .footer-bottom::before { background: none; }

/* Keep the original band height while fitting the phone legal links on one line. */
@media (max-width: 699px) {
  .site-footer-stage[data-frame="b"] .footer-bottom {
    height: 87px; flex-wrap: nowrap; align-items: center; gap: 12px;
  }
  .site-footer-stage[data-frame="b"] .footer-bottom > p {
    width: auto; flex: 0 0 auto; white-space: nowrap;
  }
  .site-footer-stage[data-frame="b"] .footer-bottom .footer-utilities { width: auto; flex: 0 0 auto; }
  .site-footer-stage[data-frame="b"] .footer-bottom nav { gap: 10px; white-space: nowrap; }
}

/* An unsupported mask must not turn the footer wordmark into a solid rectangle. */
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
 .footer-stage[data-variant="window"] .footer-brand{background:none}
 .footer-stage[data-variant="window"] .footer-brand img{opacity:1;filter:grayscale(1) brightness(.65)}
}

/* Crop poster, video and water together. Keep their top and side edges inside
   the backing so fractional clipping cannot expose an unshaded media seam.
   The 2px side strips use the existing surface black, including tall footers. */
.site-footer-stage .footer-backgrounds [data-material] {
  clip-path: inset(calc(var(--footer-media-top, 0px) + 1px) 6px var(--footer-bottom-cut, 86px));
}

/* erbe.css */
/* Erbe subpage. Tokens, headline motion, pill and footer come unchanged from the main site CSS. */
:root { --line: #35363a; --line-strong: #56575d; --panel: #0e0f11; --soft: #a7a7b1; --ease: cubic-bezier(.16,1,.3,1); }
/* Footer shadows from the top and the side, as on the main page. Set in CSS as well as through
   the script queue in erbe.js, so they also show where that path fails (iPhone, Julius 25.09.2026). */
.site-footer-stage { --gate-shadow: url('../film/gate-shadow.png'); --gate-side-shadow: url('../film/gate-side-shadow.png'); }
.erbe-page ::selection { color: var(--surface); background: var(--gold); }
.erbe-page input::selection { color: var(--surface); background: var(--gold); }
.erbe-page { caret-color: var(--gold); }
h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

/* Header: logo and one action. */
.erbe-header { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.erbe-header .brand { pointer-events: auto; }
.header-cta { grid-area: 1 / 2; margin: 0; min-height: 44px; padding: 10px 18px; gap: 12px; font-size: .8125rem; pointer-events: auto; }
.header-cta > span { transform: translateX(10px); }
@media (min-width: 813px) {
    .header-cta { min-height: 52px; padding: 14px 24px; font-size: .875rem; }
}

/* Primary button: the main site's streaming button (.streaming-cta) in gold.
   Dark gold surface, darker gold border, light gold text; the dot fills it on hover. */
.pill-gold { background: #231c0f; border: 1px solid #a8843f; color: #f1dca8; }
.pill-gold::before { background: linear-gradient(125deg, #c79b50, #e8c98a); }
.pill-gold:is(:hover,:focus-visible) { color: var(--surface); }
.pill-gold:focus-visible { outline-color: var(--gold); }
.pill-large { min-height: 64px; padding: 18px 34px; font-size: 1.05rem; }
.pill-large::before { left: 22px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 34px; }
.cta-row .pill { margin: 0; }
.cta-note { color: var(--soft); font-size: .875rem; }
.cta-note a { color: var(--text); border-bottom: 1px solid var(--gold); }

/* Hero */
.erbe-intro { padding-top: 150px; }
.erbe-intro h1 { padding-bottom: 40px; }
/* Both headline lines stay single-line on phones, like the main site's second line. */
@media (max-width: 812px) { .erbe-intro h1 { font-size: min(9.6vw, 5.8rem); } .erbe-intro h1 > span { white-space: nowrap; } }
.hero-grid { position: relative; z-index: 2; display: grid; gap: 40px; }
.hero-copy { font-size: 1.125rem; line-height: 1.55; color: #d4d4dc; }
.hero-copy p { max-width: 38em; }
.hero-copy p + p { margin-top: 1.1em; }
.hero-copy .lead { color: var(--text); font-size: 1.3rem; line-height: 1.45; }
.hero-photo { order: 2; border-radius: 14px; overflow: hidden; background: #24252b; box-shadow: 0 20px 60px #0006; aspect-ratio: 1.48; }
.leaks-photo picture { display: contents; }
.hero-photo picture { display: contents; }
.hero-photo img, .leaks-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 812px) {
  /* Same soft backing as .who, anchored to the stacked photo instead. */
  .hero-photo { position: relative; overflow: visible; }
  .hero-photo::before { content: ''; position: absolute; z-index: -1; top: -180px; bottom: 0; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); background: linear-gradient(to bottom, #08090b00, var(--surface) 180px); pointer-events: none; }
  .hero-photo img { border-radius: 14px; }
}
@media (min-width: 813px) {
  .erbe-intro { padding-top: 168px; }
  .erbe-intro h1 { font-size: clamp(4.2rem, 7.6vw, 8.8rem); padding-bottom: 56px; }
  .hero-grid { grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); column-gap: 6.2vw; align-items: start; }
  .hero-photo { order: 0; aspect-ratio: 1.5; }
  .hero-copy { padding-top: 6px; font-size: clamp(1.125rem, 1.35vw, 1.45rem); }
  .hero-copy .lead { font-size: clamp(1.35rem, 1.85vw, 2rem); line-height: 1.35; }
}

/* Who is entitled. A full-width backing with a soft top edge lets the hero brush end behind this part. */
.who::before { content: ''; position: absolute; z-index: -1; top: -180px; bottom: -180px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); background: linear-gradient(to bottom, #08090b00, var(--surface) 180px, var(--surface) calc(100% - 180px), #08090b00); pointer-events: none; }
.who { position: relative; z-index: 2; margin-top: 72px; padding-top: 30px; border-top: 1px solid var(--line); }
.who-title { font-size: 1.05rem; color: var(--muted); letter-spacing: 0; margin-bottom: 22px; }
.who-grid { display: grid; gap: 28px; }
.who-head { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; font-weight: 400; letter-spacing: 0; margin: 0 0 12px; }
.who-head svg { flex: none; color: var(--gold); width: 22px; height: 22px; stroke-width: 1.8; }
.who-no .who-head svg { color: #8d8d96; }
.who li { position: relative; padding: 9px 0 9px 34px; color: #d4d4dc; line-height: 1.45; border-top: 1px solid #1f2024; }
.who li::before { content: ''; position: absolute; left: 10px; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.who-no li::before { background: #6b6b73; }
.who-no li { color: var(--soft); }
@media (min-width: 813px) {
  .who { margin-top: 110px; display: grid; grid-template-columns: 28% minmax(0,1fr); column-gap: 5vw; padding-top: 40px; }
  .who-grid { grid-template-columns: 1.2fr 1fr; gap: 5vw; }
  .who-title { font-size: 1.2rem; }
}

/* Shared section rhythm and headings */
.ledger-section, .leaks, .process, .faq, .trust { position: relative; z-index: 2; padding-top: 96px; }
.section-title { font-size: clamp(2.3rem, 10.5vw, 4rem); line-height: 1.06; margin-bottom: 42px; }
.section-title > span { display: block; }
.section-title > .headline-shifted { padding-left: 8vw; --headline-indent: 8vw; }
@media (min-width: 813px) {
  .ledger-section, .leaks, .process, .faq, .trust { padding-top: 140px; }
  .section-title { font-size: clamp(3.4rem, 6.4vw, 7rem); margin-bottom: 72px; }
  .section-title > .headline-shifted { padding-left: 12vw; --headline-indent: 12vw; }
}
.section-title .reveal-word { padding-inline: .08em; margin-inline: -.08em; }
@media (max-width: 812px) {
  .section-title > .headline-shifted { display: flex; flex-wrap: wrap; }
}

/* The ledger: the page's one authored moment. */
.ledger-lead { color: #d4d4dc; font-size: 1.2rem; line-height: 1.55; margin-bottom: 36px; }
.ledger-body { display: grid; gap: 36px; }
.example { color: #d4d4dc; font-size: 1.0625rem; line-height: 1.55; }
.ledger-caption { color: var(--gold); font-size: .875rem; margin-bottom: 6px; }
.ledger-body .example { display: grid; gap: 12px; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.example-label { color: var(--gold); font-size: .875rem; }
.ledger { position: relative; margin: 0; }
.ledger-row { display: grid; grid-template-columns: 30px minmax(0,1fr); grid-template-areas: "op text" ". amount"; column-gap: 12px; row-gap: 12px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
.op { grid-area: op; color: var(--gold); font-size: 1.7rem; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.row-text { grid-area: text; min-width: 0; }
.row-label { display: block; font-size: 1.3rem; line-height: 1.3; color: var(--text); }
.row-text p { margin-top: 8px; color: var(--soft); font-size: .9375rem; line-height: 1.5; max-width: 52ch; }
.amount { grid-area: amount; display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit { color: var(--soft); font-size: .55em; }
.amount output { display: inline-block; min-width: 3ch; text-align: right; }
.ledger-row.is-sum { border-top-color: var(--line-strong); }
.ledger-row.is-sum .row-label { color: var(--muted); }
.ledger-row.is-total { border-top: 1px solid var(--gold); padding: 30px 0 34px; }
.ledger-row.is-total .row-label { font-size: 1.6rem; }
.ledger-row.is-total .amount { color: var(--gold); font-size: clamp(2.8rem, 13vw, 4.6rem); }
.ledger-row.is-highlight { animation: row-flash 1.6s var(--ease); }
@keyframes row-flash { 0%, 30% { background: #dfbc7824; } 100% { background: transparent; } }
.ledger-split { padding: 40px 0 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 1.125rem; }
.ledger-split p { display: flex; align-items: center; gap: 14px; }
.ledger-split p::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.ledger-loss { margin-top: 28px; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: #d4d4dc; line-height: 1.55; }
/* Emphasis by colour only, so the medium font weight (44 KB) is never downloaded. */
.ledger-loss strong { color: var(--text); font-weight: 400; }
#ledger-cta { display: flex; width: fit-content; margin: 34px 0 0 auto; }

.fraction { color: var(--text); }
.fraction .slash { color: var(--gold); margin: 0 .06em; }

/* Ledger entrance: rows settle in sequence once, numbers count up. */
.ledger-ready [data-row] { opacity: 0; transform: translate3d(0,26px,0); transition: opacity .6s, transform .9s var(--ease); transition-delay: calc(var(--row, 0) * 90ms); }
.ledger-ready.in-view [data-row] { opacity: 1; transform: none; }

@media (min-width: 813px) {
  .ledger-lead { font-size: clamp(1.3rem, 1.9vw, 2rem); line-height: 1.4; color: var(--text); margin-bottom: 64px; }
  .ledger-body { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); column-gap: 6vw; align-items: start; }
  .ledger-body .example { position: sticky; top: 120px; font-size: clamp(1.05rem, 1.25vw, 1.3rem); }
  /* The caption sits on the line of "Ein typischer Fall" (box padding + border). */
  .ledger-col { padding-top: 23px; }
  .ledger-row { grid-template-columns: 44px minmax(0,1fr) auto; grid-template-areas: "op text amount"; column-gap: 32px; padding: 26px 0; }
  /* Explanations wrap well before the amounts. */
  .row-text p { max-width: 34ch; }
  .op { font-size: 2rem; }
  .amount { font-size: clamp(2rem, 2.9vw, 3.1rem); }
  .ledger-row.is-total .amount { font-size: clamp(3rem, 4.8vw, 5.4rem); }
  .ledger-split, .ledger-loss { margin-left: 64px; }
}

/* Where claims get lost */
.leaks-grid { display: grid; gap: 40px; }
.leaks-photo { border-radius: 14px; overflow: hidden; aspect-ratio: 1.5; background: #24252b; box-shadow: 0 20px 60px #0006; }
.leak-list li { padding: 30px 0; border-top: 1px solid var(--line); }
.leak-list li:last-child { border-bottom: 1px solid var(--line); }
.leak-list h3 { font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 14px; }
.leak-list p { color: #c9c9d1; line-height: 1.6; max-width: 58ch; }
.leak-sub { display: grid; gap: 12px; margin: 18px 0 0; max-width: 58ch; }
.leak-sub > div { display: grid; gap: 4px; padding-left: 18px; border-left: 1px solid #6d5b3d; }
.leak-sub dt { color: var(--text); font-size: 1.0625rem; }
.leak-sub dd { margin: 0; color: #c9c9d1; line-height: 1.55; }
.leak-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; color: var(--gold); font-size: .9375rem; }
.leak-link svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.leak-link:is(:hover,:focus-visible) svg { transform: translateY(-4px); }
.leak-link:is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 813px) {
  .leaks-grid { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); column-gap: 6vw; align-items: start; }
  .leaks-photo { position: sticky; top: 90px; aspect-ratio: 9 / 16; max-height: calc(100vh - 130px); }
  .leak-list li { padding: 38px 0; }
}

/* Process */
.steps { position: relative; display: grid; gap: 0; }
.steps li { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); align-content: start; column-gap: 18px; padding-bottom: 34px; }
.steps li::before { content: ''; position: absolute; left: 23.5px; top: 48px; bottom: 0; width: 1px; background: linear-gradient(var(--gold), #dfbc7822); }
.steps li:last-child::before { display: none; }
.step-n { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.35rem; line-height: 1.25; padding-top: 11px; margin-bottom: 8px; }
.steps p { color: var(--soft); line-height: 1.55; }
.steps .step-short { color: #d4d4dc; }
.steps .step-more { margin-top: 6px; }
.deadline { display: grid; gap: 16px; margin-top: 40px; padding: 30px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.deadline .deadline-big { font-size: clamp(3.4rem, 17vw, 5rem); line-height: 1; letter-spacing: -.035em; color: var(--text); }
.deadline h3 { font-size: 1.4rem; margin-bottom: 10px; }
.deadline p { color: #c9c9d1; line-height: 1.6; max-width: 60ch; }
@media (min-width: 1000px) {
  .deadline { grid-template-columns: auto minmax(0, 62ch); justify-content: space-between; column-gap: 5vw; align-items: center; margin-top: 90px; padding: 44px 48px; }
  .deadline .deadline-big { font-size: clamp(5rem, 8vw, 9rem); }
}

/* Ablauf als Abstieg: Die Bühne bleibt stehen, bis alle fünf Stufen durchgescrollt sind
   (natives Scrollen mit sticky, kein Abfangen von Mausrad oder Touch). Gilt auf allen Geräten:
   Desktop mit Stufen in fünf Spalten (Linie rechts, dann runter), Tablet und Handy mit schmalen
   Stufen (Linie runter, dann rechts; Text neben der Kugel). Ohne JavaScript bleibt die Liste. */
.descent-line { display: none; }
.steps li:nth-child(1) { --i: 0; } .steps li:nth-child(2) { --i: 1; } .steps li:nth-child(3) { --i: 2; } .steps li:nth-child(4) { --i: 3; } .steps li:nth-child(5) { --i: 4; }
.descent.is-pinned { height: 280vh; height: 280svh; }
.descent.is-pinned .descent-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; }
/* site.css sizes every unlisted svg to 22px (icon rule); large line art opts out here. */
.descent.is-pinned .descent-line { display: block; position: absolute; inset: 0; width: 100% !important; height: 100% !important; overflow: visible; pointer-events: none; }
.descent-line path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.descent.is-pinned .steps li::before { display: none; }
/* The ball is always opaque, so the line underneath never shows through it. */
.descent.is-pinned .step-n { position: relative; z-index: 1; background: var(--surface); }
.descent.is-pinned .steps li > div { opacity: .22; transition: opacity .5s; }
.descent.is-pinned .steps li.is-on > div { opacity: 1; }
.descent.is-pinned .steps li:not(.is-on) .step-n { border-color: #5a4b2e; color: #6f6348; }
/* Filled at once when the line touches the edge: no half-filled frame. */
.descent.is-pinned .steps li.is-on .step-n { background: var(--gold); color: var(--surface); text-shadow: none; box-shadow: 0 0 0 6px #dfbc7822, 0 0 28px #dfbc7855; }
.descent.is-pinned .steps li:last-child.is-on h3 { color: var(--gold); }
/* Short line always; the details open only at the step just reached. */
.descent.is-pinned .steps .step-more { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .6s var(--ease), opacity .4s, margin-top .4s; }
.descent.is-pinned .steps li.is-now .step-more { max-height: 12em; opacity: 1; margin-top: 8px; }

/* Tablet und Handy: schmale Stufen, Text rechts neben der Kugel. */
.descent.is-pinned.is-narrow { --indent: 14px; --gap: 14svh; }
.descent.is-pinned.is-narrow .steps { position: relative; display: block; height: 100%; }
.descent.is-pinned.is-narrow .steps li { position: absolute; left: calc(var(--i) * var(--indent)); right: 0; top: calc(10svh + var(--i) * var(--gap)); display: grid; grid-template-columns: 48px minmax(0,1fr); column-gap: 16px; align-items: start; padding: 0; }
.descent.is-pinned.is-narrow .steps h3 { padding-top: 10px; font-size: 1.2rem; margin-bottom: 4px; }
.descent.is-pinned.is-narrow .steps p { font-size: .9375rem; line-height: 1.45; }
/* Phones: only heading and short line, the details would run into the next step. */
@media (max-width: 599px) { .descent.is-pinned.is-narrow .steps li.is-now .step-more { display: none; } }
@media (min-width: 600px) { .descent.is-pinned.is-narrow .steps h3 { font-size: 1.45rem; } .descent.is-pinned.is-narrow .steps p { font-size: 1.0625rem; } }
@media (min-width: 600px) { .descent.is-pinned.is-narrow { --indent: 44px; --gap: 15svh; } .descent.is-pinned.is-narrow .steps li { right: 18%; } .descent.is-pinned.is-narrow .step-n { width: 56px; height: 56px; } .descent.is-pinned.is-narrow .steps li { grid-template-columns: 56px minmax(0,1fr); } }

/* Desktop: fünf Spalten. */
@media (min-width: 1000px) and (min-height: 620px) {
  .descent-stage { position: relative; height: 100vh; min-height: 620px; }
  .steps { height: 100%; padding-top: 9vh; grid-template-columns: repeat(5, minmax(0,1fr)); column-gap: 28px; align-items: start; }
  .steps li { grid-template-columns: 1fr; row-gap: 20px; padding: 0; margin-top: calc(var(--i) * 13vh); transition: opacity .5s; }
  .steps li::before { display: none; }
  .step-n { width: 56px; height: 56px; font-size: 1.15rem; }
  .steps h3 { padding-top: 0; font-size: 1.45rem; }
}

/* FAQ */
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; padding: 24px 0; list-style: none; cursor: pointer; font-size: clamp(1.2rem, 5vw, 1.7rem); line-height: 1.3; letter-spacing: -.015em; transition: color .25s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { flex: none; width: 24px; height: 24px; color: var(--gold); transition: transform .45s var(--ease); }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--gold); }
.faq-list summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq-list details p { max-width: 62ch; padding: 0 48px 30px 0; color: #c9c9d1; line-height: 1.6; font-size: 1.0625rem; }
.faq-list details[open] p { animation: faq-open .5s var(--ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } }

/* Trust */
.trust-copy { color: #d4d4dc; font-size: 1.2rem; line-height: 1.6; }
/* Rating sits to the right of the heading on desktop, below it on phones. */
.trust-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 32px; }
.trust-head .section-title { margin-bottom: 0; }
.trust-head .rating { margin: 24px 0 0; }
.trust-copy { margin-top: 42px; }
.rating { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; padding: 14px 22px; border: 1px solid var(--line); border-radius: 30px; transition: border-color .3s; }
.rating:is(:hover,:focus-visible) { border-color: var(--gold); }
.rating .stars { display: flex; gap: 2px; color: #dba138; }
.rating .stars svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.rating-text { color: var(--muted); font-size: .9375rem; }
.rating-text strong { color: var(--text); font-weight: 400; }
@media (min-width: 813px) {
  .trust-copy { font-size: clamp(1.3rem, 1.9vw, 2rem); line-height: 1.4; color: var(--text); }
  .trust-head .rating { margin: 0; }
  .trust-copy { margin-top: 72px; }
}

/* Closing */
.closing { position: relative; z-index: 2; padding: 110px 0 110px; }
/* site.css sizes every unlisted svg to 22px (icon rule); large line art opts out here. */
.closing-line { position: absolute; z-index: -1; top: 40px; left: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)) !important; height: 100% !important; overflow: visible; pointer-events: none; }
.closing-line path { stroke-dasharray: 1000; stroke-dashoffset: var(--closing-offset, 1000); }
.closing-title { font-size: clamp(2.9rem, 12vw, 5.8rem); line-height: 1.1; margin-bottom: 44px; }
.closing-title > span { display: block; }
.closing-title > .headline-shifted { padding-left: 9%; --headline-indent: 7.92vw; }
.closing-title .reveal-word { padding-inline: .08em; margin-inline: -.08em; }
.closing-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }
.closing-cta .pill { margin: 0; }
@media (min-width: 813px) {
  .closing { padding: 170px 0 160px; }
  .closing-title { font-size: clamp(4.5rem, 8.85vw, 10.2rem); line-height: 1.12; margin-bottom: 72px; }
  .closing-title > .headline-shifted { padding-left: 16.7%; --headline-indent: 15.03vw; }
}




/* Große Bildschirme (bis 4K): Grundschrift wächst mit, dazu Knöpfe und Logo. */
@media (min-width: 1800px) {
  html { font-size: clamp(16px, calc(.5rem + .55vw), 24px); }
  .pill { min-height: 3.25rem; padding: .875rem 1.5rem; gap: 1.6rem; font-size: .875rem; }
  .pill::before { left: 1.125rem; width: .45rem; height: .45rem; }
  .header-cta { min-height: 3.25rem; padding: .875rem 1.5rem; font-size: .875rem; }
  .site-header .brand img { width: clamp(235px, 12.5vw, 340px); }
  .pill-large { min-height: 4rem; padding: 1.125rem 2.125rem; font-size: 1.05rem; }
}


/* Phones: only the logo in the header (the same button follows right under the text),
   more air above the headline, a calmer lead. */
@media (max-width: 812px) {
  .header-cta { display: none; }
  .erbe-intro { padding-top: 170px; }
  .hero-copy .lead { font-size: 1.2rem; line-height: 1.5; }
  /* Button right under the lead, so it is visible without scrolling; the cost text follows. */
  .hero-copy { display: flex; flex-direction: column; font-size: 1.0625rem; }
  .hero-copy .lead { order: 1; }
  .hero-copy .cta-row { order: 2; margin: 24px 0 28px; }
  .hero-copy > p:not(.lead) { order: 3; margin-top: 0; }
}
/* Tablets (iPad): tall hero photo next to the text instead of a short landscape strip. */
@media (min-width: 813px) and (max-width: 1279px) {
  .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hero-photo { aspect-ratio: 9 / 16; max-height: 82vh; }
}

/* pruefen.css */
/* Pflichtteil-Check. Same world as the page: black, Aeonik, gold brush as progress. */
.flow-page { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-x: clip; }
/* site.css sizes every unlisted svg to 22px (icon rule); large line art opts out here. */
.flow-brush { position: fixed; z-index: 0; top: 0; left: 0; width: 112vw !important; height: max(100vh, 900px) !important; pointer-events: none; overflow: visible; }
.flow-brush { transition: opacity .6s; }
.flow-brush path { stroke-dasharray: 1000; stroke-dashoffset: 920; transition: stroke-dashoffset 1.1s var(--ease); }
/* Reading-heavy steps: the finished line steps back behind the form. */
.flow-page:is([data-kind="contact"], [data-kind="fields"], [data-kind="confirm"], [data-kind="done"]) .flow-brush { opacity: .22; }
/* Embedded form: while open, only the form layer is shown; the page keeps its scroll position. */
.flow-layer { display: none; }
.flow-open .flow-layer { display: block; }
.flow-open body > :not(.flow-layer) { display: none !important; }
/* Sending: the button waits for the server before the thank-you page appears. */
.pill[aria-busy="true"] { opacity: .6; cursor: progress; }
.flow-header { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 16px; padding: 22px var(--gutter); }
.flow-header .brand img { display: block; width: clamp(130px, 14vw, 190px); height: auto; transform: translateX(-3.7109375%); }
.flow-meter { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #45464c; border-radius: 50%; color: var(--muted); transition: color .25s, border-color .25s; }
.flow-close:is(:hover,:focus-visible) { color: var(--text); border-color: var(--gold); }
.flow-close:focus-visible, .back:focus-visible, .sum-edit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.flow-close svg { width: 18px; height: 18px; }

.flow { position: relative; z-index: 2; display: grid; padding: 4vh var(--gutter) 80px; outline: none; }
.step { grid-area: 1 / 1; min-width: 0; max-width: 980px; transition: opacity .32s, transform .5s var(--ease); }
.step.is-leaving { opacity: 0; pointer-events: none; }
.step.is-leaving.to-front { transform: translate3d(0,-28px,0); }
.step.is-leaving.to-back { transform: translate3d(0,28px,0); }
.step.is-entering { opacity: 0; }

.back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 8px -4px; padding: 0 12px 0 4px; border: 0; border-radius: 22px; background: transparent; color: var(--muted); font-size: .9375rem; transition: color .25s; }
.back:is(:hover,:focus-visible) { color: var(--gold); }
.back svg { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.back:hover svg { transform: translateX(-4px); }

.step-title { font-size: clamp(2.1rem, 8.6vw, 4.4rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 14px; padding: 0; outline: none; }
.step-title > span { padding: 0 !important; }
.step-title .reveal-word { padding-bottom: .12em; margin-bottom: -.12em; padding-inline: .08em; margin-inline: -.08em; }
.step-title .headline-word { display: inline-block; transition: transform .8s var(--ease); transition-delay: calc(var(--word-i) * 55ms); }
.step.is-entering .step-title .headline-word { transform: translate3d(0,110%,0); transition: none; }
.step.from-back.is-entering .step-title .headline-word { transform: translate3d(0,-110%,0); }
.step-help { max-width: 58ch; color: #c9c9d1; font-size: 1.0625rem; line-height: 1.55; margin-bottom: 30px; }

/* Answer rows: the main pill's gold dot fills the chosen row. */
.options { display: grid; gap: 10px; max-width: 760px; }
.option { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 34px minmax(0,1fr) 22px; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 14px 20px 14px 16px; border: 1px solid #2a2b31; border-radius: 18px; background: #111215e6; color: var(--text); text-align: left; font-size: 1.0625rem; line-height: 1.35; transition: border-color .25s, color .3s, transform .5s var(--ease), opacity .45s; transition-delay: 0s, 0s, calc(var(--i) * 40ms + 120ms), calc(var(--i) * 40ms + 120ms); }
.step.is-entering .option { opacity: 0; transform: translate3d(0,18px,0); transition: none; }
.option::before { content: ''; position: absolute; z-index: -1; left: 33px; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .6s cubic-bezier(.22,1,.36,1); }
.option:hover { border-color: #6d5b3d; }
.option:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.key { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #45464c; border-radius: 10px; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; transition: border-color .25s, color .25s, background .25s; }
.option:hover .key { border-color: var(--gold); color: var(--gold); }
.option > svg { width: 20px; height: 20px; color: var(--muted); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease), color .3s; }
.option:is(:hover,:focus-visible) > svg { opacity: 1; transform: none; color: var(--gold); }
.option.is-on { border-color: var(--gold); }
.option.is-on .key { border-color: var(--gold); color: var(--gold); }
/* Single choice: fill, then move on. */
.option.is-picked, .option.is-picked:hover { color: var(--surface); border-color: var(--gold); }
/* Scale reaches the far corner of the widest row, so the whole row fills with gold. */
.option.is-picked::before { transform: scale(135); transition-duration: .5s; }
.option.is-picked .key { border-color: #08090b55; color: var(--surface); }
.option.is-picked > svg { opacity: 1; transform: translateX(4px); color: var(--surface); }
/* Multiple choice: checkbox key, gold outline. */
.is-multi .option { grid-template-columns: 34px minmax(0,1fr); }
.is-multi .key svg { width: 18px; height: 18px; stroke-width: 2; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s var(--ease); }
.is-multi .option.is-on .key { background: var(--gold); color: var(--surface); }
.is-multi .option.is-on .key svg { opacity: 1; transform: none; }

.step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.step-actions .pill { margin: 0; }
.pill[disabled] { opacity: .38; cursor: not-allowed; }
.pill[disabled]::before { transform: translateY(-50%); }
.pill[disabled] > span { transform: translateX(12px); }
.pill[disabled] > svg { opacity: 0; }
.keys-hint { color: #8f8f99; font-size: .8125rem; }
@media (hover: none) { .keys-hint { display: none; } }

/* Text and contact fields */
.field { display: grid; gap: 8px; margin-top: 18px; max-width: 760px; }
.field > span { color: var(--muted); font-size: .9375rem; }
.field small { color: #8f8f99; font-size: .8125rem; }
.field input, .field textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 1px solid #3a3b41; border-radius: 14px; background: #111215; color: var(--text); font: inherit; font-size: 1.0625rem; transition: border-color .25s, box-shadow .25s; }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field input::placeholder { color: #75757e; }
.field input:hover, .field textarea:hover { border-color: #5b5c63; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #dfbc7826; }
.field input[aria-invalid="true"] { border-color: #e0806c; }
.field-text { margin-top: 28px; }
.field-row { display: grid; gap: 0 14px; }
.check { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 14px; align-items: start; margin-top: 24px; color: #c9c9d1; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 1px solid #5b5c63; border-radius: 7px; background: #111215; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.check input::after { content: ''; width: 10px; height: 6px; border-left: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .25s var(--ease); }
.check input:checked { background: var(--gold); border-color: var(--gold); }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.check input[aria-invalid="true"] { border-color: #e0806c; }
.check a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.form-error { margin-top: 20px; padding: 14px 16px; border: 1px solid #e0806c66; border-radius: 12px; background: #2a1512; color: #f3c6bc; font-size: .9375rem; line-height: 1.5; }
.form-error[hidden] { display: none; }
.demo-note { margin-top: 18px; color: #8f8f99; font-size: .8125rem; }

.contact-grid { display: grid; gap: 48px; }
.contact-form .step-help { margin-bottom: 6px; }
.summary { padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: #0e0f11e8; }
.summary h2 { font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: 14px; }
.summary dl { margin: 0; }
.sum-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.sum-row dt { grid-column: 1; color: var(--soft); font-size: .8125rem; }
.sum-row dd { grid-column: 1; margin: 0; color: var(--text); font-size: .9375rem; line-height: 1.4; }
.sum-edit { grid-column: 2; grid-row: 1 / 3; align-self: center; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--gold); font-size: .8125rem; }
.sum-edit:is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: .2em; }
/* Hints come first, so they are read at once (Julius, 27.09.2026); the answers follow. */
.hints + .data-title { margin-top: 28px; }
.hints { display: grid; gap: 12px; }
.hints li { position: relative; padding-left: 22px; color: #d4d4dc; font-size: .9375rem; line-height: 1.5; }
.hints li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.done-grid { display: grid; gap: 40px; max-width: 980px; }
.done-grid h2 { font-size: 1.35rem; margin-bottom: 16px; }
.docs li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--line); color: #d4d4dc; line-height: 1.45; }
.docs li::before { content: ''; position: absolute; left: 4px; top: 16px; width: 14px; height: 14px; border: 1px solid var(--gold); border-radius: 4px; }
.docs-note { margin-top: 12px; color: var(--soft); font-size: .9375rem; }
.done-side p { color: var(--text); font-size: 1.35rem; line-height: 1.5; margin-bottom: 22px; }
.done-side a:not(.pill) { transition: color .25s; }
.done-side a:not(.pill):hover { color: var(--gold); }
.flow-noscript { max-width: 50ch; color: #d4d4dc; line-height: 1.6; }
.flow-noscript a { color: var(--gold); }
/* Short wording, only for the side-by-side tiles on phones. */
.option-short { display: none; }
/* Scroll bar of the summary: desktop only, see the min-width block. */
.summary-bar { display: none; }

@media (min-width: 813px) {
  /* Mirrored so the loop curls through the empty right half, not through the answers. */
  .flow-brush { left: auto; right: 0; transform: scaleX(-1); }
  /* A little less scrolling (Julius, 27.09.2026): less empty space, same look. */
  .flow { padding-top: 3vh; padding-bottom: 12px; }
  /* Wider questions: long headlines stay on one line, three answer columns get room. */
  .step { max-width: 1180px; }
  .flow-header { padding-top: 24px; }
  .step-title { font-size: clamp(2.1rem, 8.6vw, 4rem); }
  .step-help { font-size: 1.2rem; margin-bottom: 28px; }
  .option { min-height: 64px; font-size: 1.15rem; }
  /* From five answers on two columns, from nine on three, read top to bottom, so a
     question almost never needs scrolling (Julius, 27.09.2026). */
  .options:has(> .option:nth-child(5)) { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); max-width: 1000px; column-gap: 12px; }
  .options:has(> .option:nth-child(7)) { grid-template-rows: repeat(4, auto); }
  .options:has(> .option:nth-child(9)) { grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(3, auto); max-width: 1180px; }
  .options:has(> .option:nth-child(9)) .option:has(.option-short) .option-label { display: none; }
  .options:has(> .option:nth-child(9)) .option-short { display: inline; }
  .field-text { margin-top: 14px; }
  .field textarea { min-height: 60px; }
  /* "Weiter" stays at the bottom edge while a multiple-choice step is taller than the window:
     it is the only step type with a button, so a cut-off button looked like the end of the
     form (Julius, MacBook Pro 14, 27.09.2026). Steps that fit look unchanged. */
  .step-multi .step-actions { position: sticky; z-index: 2; bottom: 0; margin-top: 18px; padding: 14px 0 16px; background: linear-gradient(#08090b00, #08090b 38%); }
  .field-row { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); column-gap: 5vw; align-items: start; }
  .summary { position: sticky; top: 30px; }
  /* Erbe: hints and answers scroll inside the panel instead of stretching the page. The gold
     bar on the right is drawn by js/pruefen.js and always visible (Julius, 27.09.2026); the
     native scrollbar is hidden so there are never two. */
  .summary-box { position: sticky; top: 30px; }
  .summary-box .summary { position: static; max-height: calc(100vh - 320px); max-height: calc(100dvh - 320px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .summary-box .summary::-webkit-scrollbar { display: none; }
  .summary-box.has-more .summary-bar { display: block; position: absolute; top: 18px; right: 7px; bottom: 18px; width: 6px; border-radius: 6px; background: #2a2b31; pointer-events: none; }
  .summary-bar span { display: block; border-radius: 6px; background: var(--gold); }
  .done-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); column-gap: 6vw; }
  .step-contact, .step-done { max-width: 1240px; }
}
@media (max-width: 812px) {
  /* Long multiple-choice steps keep "Weiter" in reach of the thumb. */
  .step-multi .step-actions { position: sticky; z-index: 2; bottom: 0; margin-top: 18px; padding: 22px 0 max(16px, env(safe-area-inset-bottom)); background: linear-gradient(#08090b00, #08090b 38%); }
  .flow-meter { justify-self: end; }
  .flow-brush { opacity: .45; }
  /* A little less scrolling (Julius, 27.09.2026): less empty space, same sizes. */
  .flow-header { padding-top: 18px; padding-bottom: 18px; }
  .flow { padding-top: 2vh; }
  .step-help { margin-bottom: 22px; }
  /* Long lists (amounts, reasons): tiles side by side with the short wording. */
  .options:has(> .option:nth-child(7)) { grid-template-columns: 1fr 1fr; }
  .options:has(> .option:nth-child(7)) .option { grid-template-columns: minmax(0,1fr); padding: 12px 14px; font-size: 1rem; line-height: 1.3; }
  .options:not(.is-multi):has(> .option:nth-child(7)) .key,
  .options:has(> .option:nth-child(7)) .option > svg { display: none; }
  .options:not(.is-multi):has(> .option:nth-child(7)) .option::before { left: 50%; }
  .options.is-multi:has(> .option:nth-child(7)) .option { grid-template-columns: 24px minmax(0,1fr); gap: 10px; padding-left: 12px; }
  .options.is-multi:has(> .option:nth-child(7)) .key { width: 24px; height: 24px; border-radius: 7px; }
  .options.is-multi:has(> .option:nth-child(7)) .key svg { width: 16px; height: 16px; }
  .options:has(> .option:nth-child(7)) .option:has(.option-short) .option-label { display: none; }
  .options:has(> .option:nth-child(7)) .option-short { display: inline; }
}

/* Plausibility: two answers that cannot both be true. */
.conflict { margin-top: 18px; max-width: 760px; padding: 16px 18px; border: 1px solid #e0806c66; border-radius: 14px; background: #2a1512; color: #f3c6bc; line-height: 1.5; }
.conflict strong { color: #fbe1da; font-weight: 400; }
.conflict-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 14px; }
.conflict-actions .pill { margin: 0; }
.conflict-dismiss { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: #f3c6bc; text-decoration: underline; text-underline-offset: .2em; }
.conflict-dismiss:is(:hover,:focus-visible) { color: #fff; }
.contact-form .conflict, .step > .conflict { margin: 0 0 18px; }

/* Honeypot for bots (field "website"): out of sight and out of the tab order. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Consent to ad measurement, stage 1: a small line at the very bottom of the sending step, its text in a dialog. */
.werbung { max-width: 760px; margin-top: 24px; color: #8f8f99; font-size: .8125rem; line-height: 1.5; }
.werbung span { white-space: nowrap; } /* the full stop stays with the link */
.werbung-link { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; }
.werbung-link:is(:hover,:focus-visible) { color: var(--gold); }
.dokument { width: min(640px, 100% - 32px); max-height: min(80vh, 640px); max-height: min(80dvh, 640px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #0e0f11; color: var(--text); -webkit-user-select: text; user-select: text; }
.dokument[open] { display: flex; flex-direction: column; }
.dokument::backdrop { background: #000000b3; }
.d-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 14px 24px; border-bottom: 1px solid var(--line); }
.d-kopf h2 { font-size: 1.15rem; letter-spacing: -.01em; }
.d-zu { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #45464c; border-radius: 50%; background: transparent; color: var(--muted); }
.d-zu:is(:hover,:focus-visible) { color: var(--text); border-color: var(--gold); }
.d-text { overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 24px; color: #d4d4dc; font-size: .9375rem; line-height: 1.6; }
.d-text p + p { margin-top: 12px; }