/* 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 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; }
.site-header { column-gap: 10px; }
/* Sprachwechsel (Fassung 1, Julius 01.10.2026): Textlink mit Weltkugel links vom Länderschalter, am Handy nur die
   Weltkugel im Kreis. Eigene pointer-events, weil der Header sie für Klicks auf das Bild darunter abschaltet. */
.lang-link { grid-area: 1 / 2; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 46px; height: 46px; border: 1px solid #64646b; border-radius: 50%; color: var(--text); text-decoration: none; font-size: .875rem; line-height: 1; pointer-events: auto; transition: color .2s, background-color .2s; }
.lang-link span { display: none; }
.lang-link:hover { background: #24252b; }
.lang-globe { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.site-header .country-switch { grid-area: 1 / 3; }
.brand { min-width: 0; }
.brand img { max-width: 100%; }
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; }
/* Erfolgsfilm (Julius 27.09.2026): Fläche exakt in der Seitenfarbe, ohne Schatten und Rundung, damit der Quant nahtlos
   auf der Seite schwebt. Deckend, damit die zweite Goldlinie wie beim Foto hinter dem Film beginnt.
   Handy: fast bildschirmfüllend hochkant über die Seitenränder; Desktop: Lage und Maß setzt app.js. */
.intro-film .media { background: var(--surface); box-shadow: none; border-radius: 0; }
.intro-film .film { position: absolute; inset: 0; }
.intro-film { aspect-ratio: auto; width: 100vw; margin-left: calc(-1 * var(--gutter)); height: min(88vh, 178vw); height: min(88svh, 178vw); }
/* Weicher Saum unter dem Film wie beim Erbe-Abschnitt „Wer einen Pflichtteil hat“: die Goldlinie blendet beim
   Auf- und Abtauchen aus statt hart an der Kante. Hängt an .reel-marks, die Größe und Pose des Rahmens übernehmen. */
/* 2 px Überlappung: Film und Saum sind getrennte Ebenen; ihre geglätteten Kanten ließen sonst eine Haarlinie durch. */
.intro-film .reel-marks::before { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 212px;
  background: linear-gradient(var(--surface) 2px, #08090bf5 20%, #08090bd1 40%, #08090b8f 60%, #08090b3d 80%, #08090b00); }
.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 auto; align-items: center; padding-top: 32px; column-gap: 24px; }
  .site-header .country-switch { grid-area: 1 / 4; }
  .site-header .streaming-cta { grid-area: 1 / 2; }
  .lang-link { grid-area: 1 / 3; width: auto; height: 44px; padding: 0 4px; border: 0; border-radius: 0; color: var(--muted); }
  .lang-link span { display: inline; }
  .lang-link:hover { background: none; color: var(--text); }
  .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; }
  .intro-film { width: 100%; height: auto; margin-left: 0; }
  .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%}}
 @media(max-width:812px){.intro-film::before{display:none}}
}

/* credibility.css */
/* Selected Gold ratings / grouped press. The existing WebGL canvas stays behind DOM content. */
.ratings,.team{position:relative;z-index:2}
/* Rules below the gold stroke; actual press content above both. */
.press-v3{position:relative}
.about-line{z-index:1}
.press-v3 .media-logo,.press-v3 .article-copy,.press-v3 .arrow{position:relative;z-index:2}
.ratings{display:grid;gap:36px}
.rating{display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 0 18px}
.brand-logo{perspective:1100px;margin-bottom:24px;height:90px;width:100%;display:flex;align-items:center;justify-content:center}
.logo-object{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.brand-logo .logo-layer{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,var(--z,8.8px));backface-visibility:hidden;display:block;object-fit:contain;height:auto}
.brand-logo .padronus-logo{width:min(180px,100%)}
.brand-logo .mietheld-logo{width:86px;max-width:100%}
.logo-side{filter:brightness(.32) saturate(.55)}
.rating-strip{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-size:clamp(12px,3.55vw,16px);line-height:1.4;max-width:100%}
.stars{display:flex;color:#dba138;flex-shrink:0}
.rating .stars svg{width:1.25em;height:1.25em;fill:currentColor;stroke:none}
.rating-number,.rating-count{color:var(--muted);white-space:nowrap}
.rating-number strong{font-weight:400;color:var(--text)}
.rating-separator{margin-right:3px}
.about h2{font-size:clamp(2rem,8.4vw,6rem);line-height:1.03;margin-bottom:60px}
.about h2>span:first-child{padding-left:0}
.about h2>.headline-shifted{--headline-indent:var(--gutter)}
.press-group{display:grid;gap:12px;padding:30px 0;border-top:1px solid #35363a}
.press-group:last-child{border-bottom:1px solid #35363a}
.media-logo{display:flex;align-items:center;justify-content:flex-start;width:185px;height:96px;max-width:100%;cursor:pointer}
.media-logo:hover{filter:brightness(1.12)}
.media-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.media-logo .white{filter:brightness(0) invert(1)}
.media-logo .lto{background:var(--text);padding:6px}
.media-logo .logo-bild{width:70px;height:70px}.media-logo .logo-orf{width:145px}.media-logo .logo-heise{width:205px}
.media-logo .logo-standard,.media-logo .logo-zeit,.media-logo .logo-lto{width:220px}
.media-logo .logo-presse{width:200px}.media-logo .logo-krone{width:185px}.media-logo .logo-profil{width:130px}.media-logo .logo-heute{width:150px}.media-logo .logo-trending{width:195px}
.press-link{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:20px;padding:24px 0;border-bottom:1px solid #35363a}
.press-link:last-child{border-bottom:0}
.press-link:focus-visible{outline-offset:4px}
.article-copy{min-width:0}
.topic{display:block;font-size:14px;color:#a7a7b1;margin-bottom:10px}
.date-part{white-space:nowrap}.date-dot{display:inline-block;margin-inline:12px}time{font-variant-numeric:tabular-nums}
.press-link h3{font-size:24px;line-height:1.2;font-weight:400;letter-spacing:-.025em;margin:0}
.press-link>.arrow{width:24px;height:24px;transition:transform .35s,color .35s}
.press-link:hover>.arrow{color:var(--gold);transform:translate(3px,-3px)}
.press-link:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.press-link:hover:after{transform:scaleX(1)}
.team{display:grid;gap:45px;padding-top:64px;padding-bottom:90px}
.team figure{margin:0;min-width:0}
.team [data-water-media]{position:relative}
[data-water-media]>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden}
[data-water-media].is-wet>canvas{visibility:visible}
/* Video stays native beneath a transparent overlay containing only local waves. */
[data-water-media].is-wet:not([data-water-video])>img{opacity:0}
.team img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.team img:is([src$="richard.webp"],[data-deferred-src$="richard.webp"]){-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
.team img:is([src$="julius.webp"],[data-deferred-src$="julius.webp"]){-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
.team figcaption{display:flex;justify-content:space-between;gap:15px;margin-top:18px;font-size:22px}
.team figcaption span+span{font-size:15px;color:var(--muted);padding-top:5px}
@keyframes press-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.press-v3 .entered>.media-logo{animation:press-enter .55s cubic-bezier(.16,1,.3,1) both}
.press-v3 .entered .article-copy,.press-v3 .entered .arrow{animation:press-enter .65s .1s cubic-bezier(.16,1,.3,1) backwards}
@media(min-width:813px){
 .intro-grid{row-gap:48px}
 .ratings{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
 .intro-copy{grid-column:2;grid-row:1/3}
 .intro-media{grid-column:1;grid-row:2;margin-top:0}
 .rating-strip{font-size:clamp(12px,1.25vw,18px);flex-wrap:wrap;gap:6px 8px}
 .rating-count{flex-basis:100%;text-align:center;font-size:clamp(11px,1.08vw,15px)}
 .rating-separator{display:none}
 .about h2{font-size:clamp(3.5rem,8vw,8rem)}
 .about h2>.headline-shifted{padding-left:12vw;--headline-indent:12vw}
 .about h2>.headline-counter{padding-left:0}
 .press-group{grid-template-columns:28% minmax(0,1fr);column-gap:5vw;padding:40px 0}
 .press-group>.media-logo{align-self:center;width:220px}
 .press-group>.media-logo:has(.logo-bild){height:136px}
 .media-logo .logo-bild{width:130px;height:130px}
 .media-logo .logo-profil{width:155px}.media-logo .logo-orf{width:175px}
 .press-group h3{font-size:clamp(24px,2.65vw,38px)}
 .press-group .press-link{padding:24px 0 30px}
 .team{grid-template-columns:1fr 1fr;gap:6.2vw;padding-top:clamp(80px,7.8vw,112px)}
 .team img{object-position:top}
 .team figcaption{font-size:30px}
}
@media(max-width:812px){.mietheld-logo.logo-side{display:none}.mietheld-logo.logo-face{--z:0px}}
@media(max-width:360px){.rating-strip{font-size:11px;gap:6px}}
.motion-paused .press-v3 *{animation:none!important}
.motion-paused .logo-object{transform:none!important}

@media(max-width:812px){
 .about h2>.headline-shifted{display:flex;--headline-indent:12vw}
 .about h2>.headline-shifted::before{content:"";flex:0 1 var(--headline-indent);min-width:0}
 .about h2>.headline-shifted>[aria-hidden="true"]{flex:0 0 auto;max-width:100%}
}

/* Oversized accessibility text may wrap inside a word instead of being clipped. */
.about h2 .headline-shift,.about h2 .headline-word{max-width:100%;overflow-wrap:anywhere}

/* lenis.css */
/* Lenis 1.3.26, MIT. Full license in lenis.js. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* footer/footer.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; }
}

/* footer/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; }
}

/* footer/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('/branding/padronus-web.webp') center / contain no-repeat;mask: url('/branding/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;
  }
}

/* footer/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('/branding/padronus-web.webp') center / contain no-repeat;mask: url('/branding/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('/branding/padronus-web.webp') center / contain no-repeat;
    mask: url('/branding/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));
}

/* film-kern.css */
/* Linienfilm: nur die Regeln des Films selbst, ohne Eingriffe in die Seite. Die Website übernimmt diese Datei;
   Lage und Größe des .film-Containers bestimmt die einbettende Seite (Vorschau: film.css).
   Der Film richtet Schrift und Aufteilung nach seinem eigenen Rahmen (Container), nicht nach dem Bildschirm. */
.film { overflow: hidden; container-type: size; }
.film canvas { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .6s; }
.film.bereit canvas { opacity: 1; }
/* Standbild (Website): erstes Filmbild, weicht dem ersten echten Filmbild und kommt bei Grafikverlust zurück */
.film .standbild, .film .standbild img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity .6s; }
.film.bereit .standbild { opacity: 0; }
.leitlinien, .texte { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leitlinien polyline { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.leitlinien circle { fill: var(--gold); }

/* ---------- Kennzahlen-Tafel (Standbild, texte.js tafelHTML): alle acht Zahlen, zerfällt beim Filmstart ----------
   Ohne Skript sichtbar, deshalb nach der Form des Containers statt nach data-format. Quer links neben der Maschine,
   hoch unter ihr über einem Schleier, der mit der Tafel verschwindet. */
.tafel { position: absolute; pointer-events: none; color: #fff6e6; text-align: left; transition: opacity .4s;
  -webkit-mask-image: linear-gradient(90deg, transparent calc((var(--kante, -1) - .1) * 100%), #000 calc((var(--kante, -1) + .1) * 100%));
  mask-image: linear-gradient(90deg, transparent calc((var(--kante, -1) - .1) * 100%), #000 calc((var(--kante, -1) + .1) * 100%)); }
/* Fassung A (Julius): zwei Spalten; je Eintrag drei feste Zeilen (Vorsatz, Zahl, Beschriftung samt Nachsatz) im Raster
   der Tafel (subgrid), so stehen die Zahlen einer Reihe auf gleicher Höhe und jede Zahl am Zeilenanfang. */
.tafel { display: grid; grid-template-columns: auto auto; grid-auto-rows: auto; }
.tafel .eintrag { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.tafel p { margin: 0; line-height: 1.15; }
.tafel .t-vor { grid-row: 1; align-self: end; }
.tafel .t-zahl { grid-row: 2; line-height: 1.05; white-space: nowrap; font-weight: 300; letter-spacing: -.02em;
  text-shadow: 0 0 .12em rgba(255, 190, 110, .5), 0 0 .45em rgba(223, 160, 80, .3); }
.tafel .t-zeile { grid-row: 3; }
.tafel .t-vor, .tafel .t-zeile { color: var(--gold); text-transform: uppercase; letter-spacing: .2em; }
.tafel .t-nach { display: block; margin-top: .45em; font-size: 1.28em; color: #fff6e6; text-transform: none; letter-spacing: -.01em; }
.film .schleier-tafel { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 9, 11, .88) 62%, rgba(8, 9, 11, .95)); }
@container (min-aspect-ratio: 6 / 5) {
  .film .schleier-tafel { display: none; }
  .tafel { left: 6.5cqw; top: 50%; transform: translateY(-50%); column-gap: 4cqw; }
  .tafel .eintrag { padding-bottom: 4.2cqh; }
  .tafel .t-vor { font-size: 1.6cqh; margin-bottom: .8cqh; }
  .tafel .t-zahl { font-size: 5.2cqh; }
  .tafel .t-zeile { margin-top: 1.1cqh; font-size: 1.6cqh; white-space: nowrap; }
}
/* hoch: unter der Maschine; Beschriftungen brechen um (je Wort ein Element, der Zerfall bleibt genau).
   Die Zahlen ohne enge Laufweite, am Handy wirkten sie sonst gequetscht (Julius 27.09.2026). */
@container (max-aspect-ratio: 6 / 5) {
  .tafel { left: 5.5cqw; right: 5.5cqw; bottom: 5cqh; grid-template-columns: 1fr 1fr; column-gap: 4cqw; }
  .tafel .eintrag { padding-bottom: 3.6cqw; }
  .tafel .t-vor { font-size: 2.1cqw; margin-bottom: .8cqw; }
  .tafel .t-zahl { font-size: 4.8cqw; letter-spacing: .005em; }
  .tafel .t-zeile { margin-top: 1cqw; font-size: 2.25cqw; letter-spacing: .1em; }
}
/* Filmstart (film.js): Vorlauf unsichtbar, dann Überblendung, dann Zerfall der Tafel */
.film.vorlauf .texte, .film.vorlauf canvas { opacity: .001; }
.film.zerfallen .schleier-tafel { opacity: 0; }
.film.gestartet .tafel, .film.gestartet .schleier-tafel { visibility: hidden; }
/* Grafikverlust (film.js): laufende Filmtexte weg, das Ladebild mit Tafel kehrt zurück */
.film.verloren .texte, .film.verloren .leitlinien { visibility: hidden; }

/* ---------- Aufteilung je Format ---------- */
.takt[hidden] { display: none; }
.takt { position: absolute; --in: 0; --out: 0; }
.takt p { margin: 0; line-height: 1; }
.zahl { font-weight: 300; letter-spacing: -.035em; font-feature-settings: "tnum" 0, "lnum" 1; white-space: nowrap; }
.zeile, .vor { color: var(--gold); letter-spacing: .02em; white-space: nowrap; }
.takt .w { display: inline-block; --in: 0; }

/* quer (Desktop, 1,62 bis 2,05:1): Text links, die Maschine ist per Objektivverschiebung nach rechts gerückt */
[data-format="quer"] .takt { left: 6.5cqw; top: 50%; transform: translateY(-50%); text-align: left; max-width: 40cqw; }
[data-format="quer"] .zahl { font-size: var(--zahl, clamp(26px, 15cqh, 170px)); }
[data-format="quer"] .vor { margin-bottom: .6em; font-size: clamp(10px, 2.4cqh, 20px); }
[data-format="quer"] .zeile { margin-top: .75em; font-size: clamp(10px, 2.4cqh, 20px); }
[data-format="quer"] .nach { margin-top: .9em; font-size: clamp(14px, 4.4cqh, 42px); }
[data-format="quer"] .satz-text { font-size: clamp(22px, 8.5cqh, 96px); white-space: normal; text-wrap: balance; line-height: 1.02; }

/* hoch (Handy): Text unten, die Maschine ist nach oben gerückt */
[data-format="hoch"] .takt { left: 50%; bottom: 11cqh; transform: translateX(-50%); text-align: center; width: 88cqw; }
[data-format="hoch"] .zahl { font-size: var(--zahl, clamp(40px, 16cqw, 120px)); }
/* hoch ohne enge Laufweite: am iPhone wirkten 520.000+ und 1,2 Milliarden € gequetscht (Julius 27.09.2026) */
[data-format="hoch"][data-stil="b"] .zahl { letter-spacing: 0; }
[data-format="hoch"] .vor { margin-bottom: .6em; font-size: clamp(10px, 3cqw, 18px); }
[data-format="hoch"] .zeile { margin-top: .7em; font-size: clamp(10px, 3cqw, 18px); white-space: normal; }
[data-format="hoch"] .nach { margin-top: .8em; font-size: clamp(16px, 6cqw, 36px); }
[data-format="hoch"] .satz-text { font-size: clamp(28px, 9cqw, 60px); white-space: normal; text-wrap: balance; line-height: 1.05; }

/* ---------- B: Glut (gewählt). Glühende Zahl, zählt hoch ---------- */
[data-stil="b"] .zahl { color: #fff6e6; text-shadow: 0 0 .12em rgba(255, 190, 110, .55), 0 0 .45em rgba(223, 160, 80, .35);
  opacity: calc(var(--in) * (1 - var(--out))); filter: blur(calc((1 - var(--in)) * 14px + var(--out) * 10px));
  transform: scale(calc(1.06 - var(--in) * .06 + var(--out) * .08)); transform-origin: left center; }
[data-format="hoch"][data-stil="b"] .zahl { transform-origin: center; }
[data-stil="b"] .zeile, [data-stil="b"] .vor { text-transform: uppercase; letter-spacing: .3em; }
[data-stil="b"] .zeile .w, [data-stil="b"] .vor .w { opacity: calc(var(--in) * (1 - var(--out))); }
[data-stil="b"] .nach { font-weight: 400; letter-spacing: -.01em; color: #fff6e6; white-space: nowrap;
  text-shadow: 0 0 .15em rgba(255, 190, 110, .55), 0 0 .5em rgba(223, 160, 80, .35); }
[data-stil="b"] .nach .w { opacity: calc(var(--in) * (1 - var(--out))); }
[data-stil="b"] .satz-text { font-weight: 400; letter-spacing: -.02em; color: #fff6e6;
  text-shadow: 0 0 .15em rgba(255, 190, 110, .55), 0 0 .5em rgba(223, 160, 80, .35); }
[data-stil="b"] .satz .w { opacity: calc(var(--in) * (1 - var(--out))); filter: blur(calc((1 - var(--in)) * 12px)); }
/* Zahl aus Bauteilen (zahlbau.js): die Schrift übernimmt nur, solange die Zahl steht */
[data-stil="b"][data-bau] .zahl { opacity: var(--fest, 0); filter: none; transform: none; }
/* Eigene Ebenen für alles, was ein- und ausblendet oder weggewischt wird: der Browser ändert nur Deckkraft und
   Wischkante und malt das Glühen der Schrift nicht je Bild neu (am Handy spürbar). */
[data-stil="b"][data-bau] .zahl, [data-stil="b"][data-bau] .zahl .z, [data-stil="b"] .w { will-change: opacity; }
/* Vorlauf (film.js, starten): je Bild eine Zahl fast unsichtbar zeichnen lassen */
.takt.vorzeichnen, .takt.vorzeichnen .w { --fest: 1 !important; --in: 1 !important; --out: 0 !important; --kante: -1 !important; }
[data-stil="b"][data-bau] .zahl .z {              /* Abgang: von links nach rechts weggewischt, weiche Kante */
  -webkit-mask-image: linear-gradient(90deg, transparent calc((var(--kante, -1) - .1) * 100%), #000 calc((var(--kante, -1) + .1) * 100%));
  mask-image: linear-gradient(90deg, transparent calc((var(--kante, -1) - .1) * 100%), #000 calc((var(--kante, -1) + .1) * 100%)); }