/* Ausschliesslich selbst gehostete Webfonts: Bruno Ace plus Oxanium als Leseschrift. */
:root{--site-font:"Oxanium","Helvetica Neue",Helvetica,Arial,sans-serif;--head-font:"Bruno Ace Fett","Bruno Ace","Oxanium",sans-serif;--brand-word-font:"Bruno Ace Fett","Bruno Ace",sans-serif}
@font-face{font-family:"Oxanium";src:url("fonts-frei/oxanium-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Oxanium";src:url("fonts-frei/oxanium-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Oxanium";src:url("fonts-frei/oxanium-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bruno Ace";src:url("fonts-frei/bruno-ace-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bruno Ace Fett";src:url("fonts-frei/bruno-ace-fett-v2-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bruno Ace Hero";src:url("fonts-frei/bruno-ace-hero-v3-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
body,.heroClaimSub{font-family:var(--site-font)}
.heroLogoText strong{font-family:var(--site-font);font-weight:700}
.footerWord text,.footerBrand strong{font-family:var(--brand-word-font);font-weight:400}
/* Lange Woerter (Engagement, Lasergravur ...) brechen mit Trennstrich statt
   aus dem Bild zu laufen; overflow-wrap ist das Netz, falls der Browser
   kein deutsches Trennwoerterbuch hat. */
h1,h2,h3{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 5 4;overflow-wrap:break-word}
/* Safari ignoriert hyphenate-limit-chars und trennte "IDE-EN"; der Claim bricht nur zwischen Woertern. */
.heroCopy h1{-webkit-hyphens:manual;hyphens:manual}

.siteTail{position:relative;z-index:4;background:#f4f4f2;isolation:isolate}
/* Ueber uns: Text links, rechts faehrt der Hoodie auf einer eigenen kleinen
   3D-Buehne herein (#storyStage, setupStoryStage in index.html). Das Raster
   gilt nur, solange die Buehne wirklich existiert (.has-stage) - ohne WebGL,
   im Sparprofil oder auf Mobile bleibt der Inhalt wie bisher mittig. */
.siteTail #story{width:100%;min-height:0;margin:0;padding:clamp(82px,9vw,142px) clamp(18px,5vw,78px);background:#f4f4f2}
.siteTail #story .ueberInhalt{width:min(900px,100%);margin-inline:auto}
.ueberBuehne{display:none}
/* Nur Standbild-Profil (kein Hoodie neben dem Text): Inhalt auch in sich
   mittig, gleiche Regeln wie die mobile Fassung weiter unten. */
@media(max-width:900px){
  html[data-render-quality="static"] .storyCopy{text-align:center}
  html[data-render-quality="static"] .ueber h2{margin-inline:auto}
  html[data-render-quality="static"] .ueberText{margin-inline:auto;padding:16px 0 0;border-left:0;border-top:4px solid var(--brand-red)}
  html[data-render-quality="static"] .ueberFakt{grid-template-columns:1fr;gap:6px;text-align:center}
  html[data-render-quality="static"] .ueberMehr{align-self:center}
}
/* Desktop: Raster mit Buehne rechts nur, wenn der lokale Canvas aktiv ist. */
@media(min-width:901px){
  .siteTail #story.has-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
    gap:clamp(28px,5vw,88px);max-width:1380px;margin-inline:auto}
  .siteTail #story.has-stage .ueberInhalt{width:100%;max-width:620px;margin-inline:0}
  .siteTail #story.has-stage .ueberBuehne{display:block;position:relative;aspect-ratio:1/1.08;overflow:hidden}
  .ueberBuehne canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
}
.uebernsHead--logo{grid-template-columns:1fr;min-height:0}
.uebernsHead--logo .uebernsBild{display:grid;min-height:clamp(220px,30vw,360px);place-items:center;padding:clamp(32px,6vw,76px);background:#fff}
.uebernsHead--logo .uebernsBild::after{display:none}
.uebernsHead--logo .uebernsBild img{width:min(100%,920px);height:auto;object-fit:contain}
.uebernsHead--logo .uebernsHeadCopy{padding:clamp(22px,2.8vw,34px) clamp(24px,4vw,52px);text-align:center}
@media(max-width:520px){.uebernsHead--logo .uebernsHeadCopy h2{font-size:clamp(20px,5.6vw,26px);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}}
/* Pfeile als Inline-SVG statt Unicode (→ ↗ ↑ ←): iOS Safari und manche
   Android-Fonts ersetzen die Zeichen sonst durch Emoji oder fremde Glyphen.
   Ein Pfad, Richtung per Rotation, Farbe/Groesse folgen dem Text. */
.ico{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico--ne{transform:rotate(-45deg)}.ico--up{transform:rotate(-90deg)}.ico--left{transform:rotate(180deg)}
.footerSignal .ico,.footerSignalBtn .ico{width:1.35em;height:1.35em;margin-top:.35em}
/* Ankerziele bleiben unter der festen Kopfleiste sichtbar. */
.pageSection,.referenceSection,.serviceInfo,.sponsorSection,.siteFooter{scroll-margin-top:88px}
.heroWordBackdrop{position:absolute;z-index:1;top:50%;left:50%;width:100%;height:clamp(95px,16vw,235px);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.heroWordBackdrop svg{display:block;width:100%;height:100%;padding-inline:clamp(14px,3vw,46px)}
.heroWordBackdrop text{fill:transparent;stroke:rgba(32,26,77,.17);stroke-width:1.25;vector-effect:non-scaling-stroke;font-family:var(--brand-word-font);font-size:200px;font-weight:400}

/* Erst wird nur der lange Logo-Schriftzug eingespart. Erst wenn auch das
   nicht mehr reicht, ersetzt ein natives Details-Menue die Desktoplinks. */
.heroNavMenu{display:none;position:relative;margin-left:auto}
.heroNavMobileContact{display:none}
.heroNavMenu summary{display:flex;min-height:42px;align-items:center;gap:6px;padding:3px 9px 3px 3px;
  border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(32,26,77,.88);color:#fff;
  font-size:11px;font-weight:750;letter-spacing:.1em;list-style:none;text-transform:uppercase;cursor:pointer;
  box-shadow:0 13px 32px rgba(0,8,24,.22)}
.heroNavMenu summary::before{content:'';display:block;width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  background:linear-gradient(#fff,#fff) center calc(50% - 5px)/16px 2px no-repeat,
    linear-gradient(#fff,#fff) center/16px 2px no-repeat,
    linear-gradient(#fff,#fff) center calc(50% + 5px)/16px 2px no-repeat,var(--brand-red)}
.heroNavMenu[open] summary::before{background:
  linear-gradient(45deg,transparent 44%,#fff 44% 56%,transparent 56%) center/17px 17px no-repeat,
  linear-gradient(-45deg,transparent 44%,#fff 44% 56%,transparent 56%) center/17px 17px no-repeat,var(--brand-red)}
.heroNavMenu summary::-webkit-details-marker{display:none}
body.nav-on-dark .heroNavMenu summary{background:rgba(255,255,255,.92);color:var(--brand-navy)}
.sponsorCta{border:0;cursor:pointer;font-family:inherit}
.sponsorCopy .kontaktPop{display:inline-block}
.heroNavMenu summary:focus-visible{outline:3px solid #1b6bff;outline-offset:3px}
.heroNavMenu:not([open]) nav{display:none}
.heroNavMenu nav{position:fixed;z-index:40;top:76px;right:12px;left:12px;display:grid;max-height:calc(100vh - 92px);max-height:calc(100svh - 92px);padding:8px;overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(32,26,77,.96);box-shadow:0 20px 54px rgba(0,8,24,.28);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.heroNavMenu nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}
.heroNavMenu nav a:hover,.heroNavMenu nav a:focus-visible{background:rgba(255,255,255,.1)}
.heroNavCta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
.heroLogo{min-height:44px}
.overviewNav{position:relative}
.overviewNav>a{display:flex;align-items:center;gap:7px}
.overviewNav>a::after{content:'';width:.5em;height:.5em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-.15em);transition:transform .2s ease}
.overviewMenu{position:absolute;top:calc(100% + 14px);left:-16px;width:max-content;min-width:220px;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(32,26,77,.96);box-shadow:0 18px 46px rgba(0,8,24,.24);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.overviewMenu::before{content:'';position:absolute;right:0;bottom:100%;left:0;height:16px}
.heroNavLinks .overviewMenu a{display:block;padding:11px 12px;border-radius:9px;color:rgba(255,255,255,.78);white-space:nowrap}
.heroNavLinks .overviewMenu a:hover,.heroNavLinks .overviewMenu a:focus-visible{background:rgba(255,255,255,.1);color:#fff;outline:0}
.heroNavLinks .overviewMenu a[aria-current=page]{color:#fff}
.overviewNav:hover .overviewMenu,.overviewNav:focus-within .overviewMenu{opacity:1;visibility:visible;transform:none}
.overviewNav:hover>a::after,.overviewNav:focus-within>a::after{transform:rotate(180deg)}
/* ponytail: Kontur nur auf hellen Flaechen; auf dunklem Hero ist die Wortmarke
   bereits weiss und braucht keinen Schein. */
body:not(.nav-scrolled):not(.nav-on-dark) .heroLogoText{
  color:var(--brand-navy);
  -webkit-text-stroke:.35px rgba(255,255,255,.92);
  text-shadow:0 0 2px rgba(255,255,255,.98),0 0 7px rgba(255,255,255,.72)
}
body:not(.nav-scrolled):not(.nav-on-dark) .navWordmark{filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.7))}
.referenceSection{padding:clamp(82px,9vw,150px) clamp(18px,5vw,78px) clamp(96px,11vw,170px);background:#f4f4f2;color:#111}
/* Portfolio hat seit dem Wegfall des Untertexts nur noch die Ueberschrift im
   Kopf - die soll mittig stehen statt in der ersten Grid-Spalte zu haengen. */
#references .tailIntro{display:block;text-align:center}
.tailIntro{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(300px,1.1fr);gap:clamp(30px,8vw,130px);align-items:end;margin-bottom:clamp(44px,6vw,84px)}
.tailKicker{margin:0 0 12px;color:var(--brand-red);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.tailTitle{margin:0;color:var(--brand-navy);font-size:clamp(44px,5.2vw,80px);font-weight:700;letter-spacing:-.06em;line-height:.92}
.tailCopy{max-width:650px;margin:0;color:#5d5d63;font-size:clamp(17px,1.45vw,23px);line-height:1.6}
.referenceGrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(92px,8vw,145px);gap:clamp(10px,1.25vw,20px)}
.referenceCard{position:relative;margin:0;overflow:hidden;border-radius:clamp(16px,2vw,30px);background:#dcdcdc;box-shadow:0 20px 54px rgba(14,18,26,.10);cursor:zoom-in;container-type:inline-size}
.referenceCard:focus-visible{outline:3px solid #1b6bff;outline-offset:4px}
/* Dasselbe Mosaik, aber alle sechs Karten wiederholend statt nur einmal.
   Nur die Spalte wird festgelegt, die Zeile ueber span — dadurch sucht sich
   das Raster die Zeilen selbst und legt jede weitere Sechsergruppe im gleichen
   Muster darunter. Bei genau sechs Karten kommt exakt dasselbe heraus wie mit
   den frueheren festen Zeilennummern. */
.referenceCard:nth-child(6n+1){grid-column:1/7;grid-row:span 3}
.referenceCard:nth-child(6n+2){grid-column:7/10;grid-row:span 2}
.referenceCard:nth-child(6n+3){grid-column:10/13;grid-row:span 2}
.referenceCard:nth-child(6n+4){grid-column:7/13;grid-row:span 3}
.referenceCard:nth-child(6n+5){grid-column:1/4;grid-row:span 2}
.referenceCard:nth-child(6n+6){grid-column:4/7;grid-row:span 2}
/* Endet eine Gruppe nach der 5. Kachel, fuellt diese die Luecke der fehlenden 6.;
   steht die 1. Kachel einer Gruppe allein, sitzt sie mittig. */
.referenceCard:nth-child(6n+5):last-child{grid-column:1/7}
.referenceCard:nth-child(6n+1):last-child{grid-column:4/10}
.referenceCard img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease}
.referenceCard:hover img{transform:scale(1.035);filter:saturate(1.06)}
.referenceCard figcaption{position:absolute;inset:auto 12px 12px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.22);border-radius:15px;background:rgba(4,16,35,.70);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.referenceCard figcaption span{font-size:10px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}
.referenceCard figcaption b{flex:0 0 auto;display:grid;max-width:52%;min-height:28px;place-items:center;padding:5px 9px;border-radius:999px;background:var(--brand-red);font-size:9px;line-height:1.05;text-align:center;overflow-wrap:anywhere}
@container (max-width:300px){.referenceCard figcaption b{display:none}}
.referenceLightbox{width:min(96vw,1600px);max-width:none;height:min(94vh,1100px);height:min(94svh,1100px);max-height:none;margin:auto;padding:0;overflow:visible;border:0;background:transparent;color:#fff}
.referenceLightbox::backdrop{background:rgba(1,9,22,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.referenceLightboxFrame{position:relative;display:grid;width:100%;height:100%;grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.18);border-radius:clamp(18px,2vw,30px);background:rgba(6,21,45,.96);box-shadow:0 34px 100px rgba(0,0,0,.46)}
.referenceLightbox img{width:100%;height:100%;min-height:0;display:block;object-fit:contain;border-radius:clamp(12px,1.4vw,20px);background:#020914}
.referenceLightbox figcaption{padding:2px 52px 2px 4px;color:rgba(255,255,255,.78);font-size:12px;line-height:1.4}
.referenceLightboxClose{position:absolute;z-index:2;top:24px;right:24px;display:grid;width:44px;height:44px;place-items:center;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(6,21,45,.82);color:#fff;font:400 25px/1 Arial,sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.referenceLightboxClose:hover{background:var(--brand-red)}.referenceLightboxClose:focus-visible{outline:3px solid #fff;outline-offset:3px}
.referenceActions{display:flex;align-items:center;justify-content:center;gap:12px;margin:clamp(20px,2.4vw,30px) 0 0}
.referenceActions .referenceMore,.referenceActions .referenceSocial{margin:0}
.referenceMore{text-align:center}
.referenceMore button{display:inline-flex;min-height:42px;align-items:center;gap:8px;padding:0 18px;border:1px solid rgba(32,26,77,.22);border-radius:999px;background:none;color:var(--brand-navy);cursor:pointer;font:700 11px/1 inherit;letter-spacing:.14em;text-transform:uppercase;transition:border-color .18s ease}
.referenceMore svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.referenceMore button:hover{border-color:rgba(32,26,77,.5)}.referenceMore button:focus-visible{outline:3px solid #1b6bff;outline-offset:3px}.referenceMore[hidden]{display:none}
.referenceSocial{display:flex;justify-content:center}
.referenceInstagram{display:inline-flex;min-height:42px;align-items:center;gap:9px;padding:0 16px;border:1px solid rgba(32,26,77,.22);border-radius:999px;color:var(--brand-navy);font-size:10px;font-weight:750;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;transition:color .18s ease,background .18s ease,border-color .18s ease}
.referenceInstagram svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.referenceInstagram .referenceArrow{width:14px;height:14px}
.referenceInstagram .instagramDot{fill:currentColor;stroke:none}
.referenceInstagram:hover{border-color:var(--brand-navy);background:var(--brand-navy);color:#fff}.referenceInstagram:focus-visible{outline:3px solid #1b6bff;outline-offset:3px}
@media(max-width:480px){
  .referenceActions{gap:7px}
  .referenceActions .referenceMore button{min-height:40px;gap:6px;padding:0 11px;font-size:9px;letter-spacing:.08em}
  .referenceActions .referenceInstagram{min-height:40px;gap:6px;padding:0 9px;font-size:8.5px;letter-spacing:.055em}
  .referenceActions .referenceInstagram svg{width:15px;height:15px}
  .referenceActions .referenceInstagram .referenceArrow{width:12px;height:12px}
}
.sponsorSection{position:relative;min-height:100vh;min-height:100svh;padding:clamp(82px,9vw,150px) clamp(18px,5vw,78px);overflow:hidden;background:#071a33;color:#fff;isolation:isolate}
.sponsorSection::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 86% 88%,rgba(191,24,37,.15),transparent 28%);pointer-events:none}
.sponsorWord{position:absolute;z-index:-1;top:.08em;left:-.06em;color:transparent;font-size:clamp(110px,19vw,320px);font-weight:800;letter-spacing:-.065em;line-height:.8;white-space:nowrap;-webkit-text-stroke:1px rgba(255,255,255,.095);user-select:none}
.sponsorInner{position:relative;display:grid;grid-template-columns:minmax(420px,1.15fr) minmax(300px,.85fr);gap:clamp(36px,5vw,96px);align-items:center;max-width:1500px;margin:auto}
.sponsorCopy{position:relative;z-index:4;container-type:inline-size}
.sponsorKicker{margin:0 0 20px;color:var(--brand-red);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
/* 14.5cqi: "Engagement" ist rund 6.8em breit, so passt es immer in die Spalte. */
.sponsorCopy h2{margin:0 0 clamp(24px,3vw,40px);font-size:clamp(44px,6vw,96px);font-size:clamp(44px,min(6vw,14.5cqi),96px);font-weight:720;letter-spacing:-.065em;line-height:.86}
.sponsorCopy h2 span{color:#fff;font:inherit;letter-spacing:inherit}
.sponsorCopy>p:not(.sponsorKicker){max-width:52ch;margin:0;color:rgba(255,255,255,.68);font-size:clamp(15px,1.15vw,18px);line-height:1.7}
.sponsorTags{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 34px;padding:0;list-style:none}
.sponsorTags li{padding:9px 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:rgba(255,255,255,.8);font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.sponsorCta{display:inline-flex;align-items:center;gap:22px;min-height:50px;margin-top:clamp(24px,2.5vw,34px);padding:0 20px;border-radius:999px;background:var(--brand-red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;box-shadow:0 18px 44px rgba(191,24,37,.25);transition:transform .25s ease,background .25s ease}
.sponsorCta:hover{transform:translateY(-2px);background:#ff3f4d}.sponsorCta:focus-visible{outline:3px solid #fff;outline-offset:4px}
.sponsorGallery{order:-1;display:grid;grid-template:repeat(10,1fr)/repeat(12,1fr);min-height:clamp(560px,52vw,740px);perspective:1100px}
.sponsorCard{position:relative;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:clamp(16px,1.8vw,28px);background:#071a33;box-shadow:0 28px 70px rgba(0,0,0,.34);transform:rotate(var(--r));transform-origin:center}
.sponsorCard:nth-child(1){--r:-4deg;z-index:1;grid-area:2/1/7/8}.sponsorCard:nth-child(2){--r:4deg;z-index:2;grid-area:1/7/6/13}.sponsorCard:nth-child(3){--r:3deg;z-index:3;grid-area:6/2/11/8}.sponsorCard:nth-child(4){--r:-4deg;z-index:4;grid-area:5/7/10/13}
.sponsorCard img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .75s ease}.sponsorCard:hover img{transform:scale(1.035);filter:saturate(1.07)}
.sponsorCard figcaption{position:absolute;right:12px;bottom:12px;left:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(4,16,35,.76);font-size:9px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.sponsorCard figcaption b{color:#ff5a65;font-size:9px}
.serviceInfo{padding:clamp(78px,9vw,142px) clamp(18px,5vw,78px);background:#f4f4f2;color:#111;border-top:1px solid rgba(32,26,77,.1)}
.serviceInfoInner{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(340px,1.2fr);gap:clamp(38px,9vw,150px);max-width:1450px;margin:auto}
.serviceInfo h2{max-width:760px;margin:0 0 clamp(24px,2.8vw,38px);color:var(--brand-navy);font-size:clamp(44px,5.2vw,80px);font-weight:700;letter-spacing:-.06em;line-height:.92}
.serviceInfoLead{max-width:650px;margin:0 0 34px;color:#54545b;font-size:clamp(15px,1.15vw,18px);line-height:1.65}
.serviceList{margin:0;padding:0;border-top:1px solid rgba(32,26,77,.14);list-style:none;counter-reset:service}
.serviceList li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid rgba(32,26,77,.14);color:#414957;font-size:clamp(14px,1.1vw,17px);line-height:1.55}
.serviceList li::before{counter-increment:service;content:counter(service,decimal-leading-zero);padding-top:2px;color:var(--brand-red);font-size:10px;font-weight:800;letter-spacing:.12em}
.serviceList b{display:block;margin-bottom:3px;color:var(--brand-navy);font-size:clamp(16px,1.25vw,19px);letter-spacing:-.015em}
.serviceActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:30px}
.serviceActions a{display:flex;min-height:52px;align-items:center;justify-content:center;padding:13px 17px;border:1px solid rgba(32,26,77,.22);border-radius:999px;color:var(--brand-navy);font-size:11px;font-weight:750;letter-spacing:.08em;text-align:center;text-decoration:none;text-transform:uppercase}
.serviceActions a:first-child{border-color:var(--brand-navy);background:var(--brand-navy);color:#fff}
.serviceActions a:focus-visible{outline:3px solid #1b6bff;outline-offset:3px}
.serviceNote{max-width:62ch;margin:24px 0 0;color:#6a727e;font-size:12px;line-height:1.65}
#kontaktSektion .serviceInfoInner{row-gap:clamp(36px,5vw,72px)}
#kontaktSektion .serviceActions{grid-template-columns:repeat(3,minmax(0,1fr))}
.placeholderSection{position:relative;min-height:88vh;min-height:88svh;padding:clamp(84px,10vw,170px) clamp(18px,6vw,94px);overflow:hidden;background:#e8e7e3;color:#111}
.placeholderSection::before{content:'04';position:absolute;right:-.04em;top:-.22em;color:rgba(6,21,45,.055);font-size:min(47vw,720px);font-weight:800;letter-spacing:-.10em;line-height:1;pointer-events:none}
.placeholderInner{position:relative;display:grid;grid-template-columns:minmax(230px,.75fr) minmax(320px,1.25fr);gap:clamp(35px,10vw,160px);align-items:start;max-width:1450px;margin:auto}
.placeholderTitle{margin:0;font-size:clamp(62px,10vw,156px);font-weight:700;letter-spacing:-.08em;line-height:.86}
.placeholderBody{padding-top:clamp(20px,6vw,90px)}
.placeholderBody p{max-width:720px;margin:0;color:#4e4e55;font-size:clamp(18px,1.6vw,25px);line-height:1.65}
.placeholderRule{display:flex;gap:8px;margin-top:42px}
.placeholderRule span{height:8px;border-radius:999px;background:var(--brand-navy)}.placeholderRule span:nth-child(1){width:48%}.placeholderRule span:nth-child(2){width:18%;background:#d53232}.placeholderRule span:nth-child(3){width:9%;background:var(--brand-navy)}
/* z-index gegen die 3D-Ebene: #webglLayer liegt fest auf 1 und bringt einen
   hellen Hintergrund mit. Ein Footer auf z-index auto wird davon uebermalt.
   Frueher hat das die Elternflaeche .siteTail (z-index 4) erledigt — auf der
   Textilseite steht der Footer inzwischen ausserhalb davon. */
.siteFooter{position:relative;z-index:4;display:flex;min-height:100vh;min-height:100svh;flex-direction:column;justify-content:space-between;padding:clamp(42px,5vw,76px) clamp(18px,5vw,78px) 28px;background:#071a33;color:#fff}
.footerSignal{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-bottom:clamp(56px,8vw,118px)}
.footerSignal p{max-width:720px;margin:0;font-size:clamp(38px,5.5vw,88px);font-weight:650;letter-spacing:-.06em;line-height:.92}
.footerSignal > a{flex:0 0 auto;display:grid;place-items:center;width:clamp(130px,13vw,205px);aspect-ratio:1;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:#df2836;color:#fff;font-size:clamp(11px,1vw,14px);font-weight:750;letter-spacing:.1em;text-align:center;text-decoration:none;text-transform:uppercase;box-shadow:0 24px 70px rgba(189,26,42,.28);transition:transform .35s ease,background .35s ease}
.footerSignal > a:hover{transform:rotate(-5deg) scale(1.03);background:#ee3442}
/* Gleiche Optik wie .footerSignal a, aber als <button> fuer den Kontakt-
   Popover (Telefon/WhatsApp/Mail klappen auf statt zu navigieren). */
.footerSignal .kontaktPop{flex:0 0 auto}
.footerSignalBtn{display:grid;place-items:center;width:clamp(130px,13vw,205px);aspect-ratio:1;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:var(--brand-red);color:#fff;font-size:clamp(11px,1vw,14px);font-weight:750;letter-spacing:.1em;text-align:center;text-decoration:none;text-transform:uppercase;cursor:pointer;box-shadow:0 24px 70px rgba(191,24,37,.28);transition:transform .35s ease,background .35s ease}
.footerSignalBtn:hover{transform:rotate(-5deg) scale(1.03);background:#ee3442}
.footerSignalBtn{align-content:center;justify-content:center;padding:0 .9em;box-sizing:border-box;line-height:1.3}
/* SANTEX als SVG-Text mit textLength: skaliert exakt auf die Footerbreite,
   gleiche Technik wie .heroWordBackdrop. */
.footerWord{display:block;width:100%;height:auto;margin:0;user-select:none}
.footerWord text{fill:transparent;stroke:rgba(255,255,255,.16);stroke-width:1;vector-effect:non-scaling-stroke;font-size:200px}
.footerBottom{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr .75fr;gap:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.footerBrand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none;text-transform:uppercase}
.footerBrand img{width:44px;height:40px;object-fit:contain}.footerBrand strong{display:block;font-size:13px;letter-spacing:.14em}.footerBrand span{display:block;color:rgba(255,255,255,.55);font-size:9px;letter-spacing:.12em}
.footerContact{margin:0;color:rgba(255,255,255,.68);font-size:12px;font-style:normal;line-height:1.75}.footerContact a{color:#fff;text-decoration:none}
.footerMeta{display:flex;align-items:flex-end;justify-content:flex-end;gap:18px;flex-wrap:wrap}.footerMeta a{color:rgba(255,255,255,.58);font-size:10px;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.footerMeta a:hover{color:#fff}
@media(max-width:760px){
  .tailIntro,.placeholderInner,.serviceInfoInner{grid-template-columns:1fr;gap:24px}.tailCopy{font-size:16px}
  .serviceInfo h2{font-size:clamp(46px,14vw,68px)}
  .referenceGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}
  .referenceCard:nth-child(n){grid-column:auto;grid-row:auto}.referenceCard:nth-child(6n+1),.referenceCard:nth-child(6n+4){grid-column:1/-1;grid-row:span 2}
  .referenceCard:nth-child(6n+5):last-child,.referenceCard:nth-child(6n+1):last-child{grid-column:1/-1}
  .placeholderSection{min-height:72vh;min-height:72svh}.placeholderBody{padding-top:0}
  .footerSignal{flex-direction:column;align-items:flex-end}.footerSignal p{font-size:clamp(38px,12vw,58px)}.footerSignal > a,.footerSignalBtn{width:112px}
  .footerBottom{grid-template-columns:1fr;gap:22px}.footerMeta{justify-content:flex-start}
  .referenceCard figcaption{gap:8px;padding:9px 10px}
  .referenceCard figcaption span{font-size:11px;letter-spacing:.08em}
  .referenceCard figcaption b{min-height:28px;padding:6px 9px;font-size:10px;line-height:1.1}
  .referenceLightbox{width:96vw;height:92vh;height:92svh}.referenceLightboxFrame{padding:8px;gap:8px}.referenceLightboxClose{top:16px;right:16px}
  .footerContact a,.footerMeta a{display:inline-flex;align-items:center;min-height:44px}
  #stage #label{top:76px}
  #stage #rotation{min-height:40px}
  #stage #sideField button{min-height:40px}
}
@media(max-width:1240px){
  .heroNav{gap:16px}
  .heroLogoText small{display:none}
  .heroNavLinks{gap:clamp(12px,1.6vw,22px)}
}
/* Mit Sponsoring als siebtem Link kippt die volle Navigation etwas frueher
   ins kompakte Menue. Ausserdem verschwindet
   jetzt die ganze Pille (Links + Kontakt-CTA) auf einmal statt nur die
   Links - sonst bliebe die Kontakt-Pille als zweiter, ueberfluessiger Button
   neben dem Hamburger-Kreis stehen (Kontakt steht eh in der Menueliste). */
@media(max-width:900px){
  .heroNav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(6px,1.8vw,14px)}
  .heroLogo{min-width:0;gap:8px;justify-self:start}
  .heroLogoText{display:flex;min-width:0;gap:0;line-height:1.12;letter-spacing:.1em}
  .navWordmark{height:8px}
  /* Der Untertitel darf umbrechen, bevor er in die Kontakt-Spalte laeuft;
     "& mehr" bleibt zusammen und wandert dann als dritte Zeile darunter. */
  .heroLogoText small{display:block;max-width:none;font-size:7px;font-weight:650;white-space:normal}
  .heroLogoMore{white-space:nowrap}
  .heroNavGroup{display:none!important}
  .heroNavMobileContact{position:static;grid-column:2;grid-row:1;display:inline-flex;min-height:40px;align-items:center;justify-content:center;justify-self:center;
    padding:0 14px;border-radius:999px;background:var(--brand-red);color:#fff;font-size:10px;font-weight:750;letter-spacing:.08em;
    text-decoration:none;text-transform:uppercase;transform:none;box-shadow:0 13px 32px rgba(178,24,40,.24)}
  .heroNavMenu{display:block;grid-column:3;grid-row:1;justify-self:end;margin-left:0}
  #kontaktSektion .serviceInfoInner{grid-template-columns:1fr;gap:24px}
}
@media(max-width:420px){
  /* ponytail: Auf schmalen Handys verschwindet zuerst nur der Zusatzname;
     Logo, Kontakt und Menue bleiben als drei kollisionsfreie Bereiche. */
  .heroLogoText{display:none}
}
@media(max-width:420px){
  .heroLogoText{display:none!important}
  .heroNav>*,.storyCopy>*,.lineupCopy>*,.siteTail *{min-width:0}
  .storyFacts{grid-template-columns:1fr!important;gap:8px!important}
  .storyFact span{font-size:11px!important}
  .footerSignal{flex-direction:column;align-items:flex-start}
  .footerSignal > a,.footerSignal .kontaktPop{align-self:flex-end}
  #stage{contain:inline-size}
  #viewDock,#viewDock>*{min-width:0}
  .serviceActions,#kontaktSektion .serviceActions{grid-template-columns:1fr}
}
@media(max-width:380px){
  .heroCopy h1{max-width:100%!important;font-size:clamp(34px,11.5vw,43px)!important;line-height:.98!important}
  .heroCard .lead{max-width:100%!important;font-size:13px!important;line-height:1.45!important}
  .heroCta{min-height:44px}
}
@media(max-width:900px){.hell{margin-top:0}}
/* Mobile und Tablet: Die schmale Fassung spricht konsequent aus der Mitte.
   Eingabefelder bleiben absichtlich linksbuendig, damit laengere Eingaben
   weiterhin schnell lesbar und korrigierbar sind. Desktop bleibt unberuehrt. */
@media(max-width:900px){
  #hero,.storyCopy,.lineupCopy,.uebernsPanelInner,.siteTail,.placeholderSection,.siteFooter{text-align:center}
  .heroNavMenu nav a,.kontaktMenu .kbtn{justify-content:center}

  /* Die Story braucht mobil keinen zusaetzlichen 3D-Parkraum. Die Lineup-
     Sektion behaelt ihn, weil Stift und Flyer dort wieder sichtbar sind. */
  #story{min-height:0;padding-bottom:clamp(64px,9vw,84px)}

  .ueberText,.lineupCopy>p,.serviceInfoLead,.serviceNote,
  .sponsorCopy>p:not(.sponsorKicker),.placeholderBody p,.leistungsText p,
  .faqAntwort,.footerSignal p{margin-right:auto;margin-left:auto}
  .ueberFakt,.storyMilestone,.leistungsText,.faqFrage,.faqAntwort,.faqFuss,
  .referenceLightbox figcaption,.footerContact{text-align:center}
  .ueberMehr{align-self:center}
  .uebernsBack{display:block;margin-right:auto;margin-left:auto}
  .uebernsHeadCopy h2{hyphens:auto;overflow-wrap:break-word}
  .uebernsHeadCopy h2 .brandAccent{display:block}
  /* Panels (Ueber uns / Leistungen) mobil: nichts ragt raus, alles mittig.
     Die Zeitleiste verliert Linie und Punkte - die haengen sonst links. */
  .uebernsPanelInner h2{font-size:clamp(30px,9.4vw,60px);overflow-wrap:anywhere}
  .uebernsHeadCopy{min-width:0}
  .uebernsHead--logo .uebernsBild{grid-template-columns:minmax(0,1fr)}
  .uebernsHead--logo .uebernsBild img{width:100%;max-width:920px}
  .storyTimeline::before,.storyTimeline::after,.storyMilestone::before{display:none}
  .storyMilestone,.storyTimeline--horizontal .storyMilestone{padding-left:0}
  .storyMilestone p,.leistungsText p{margin-right:auto;margin-left:auto}
  .leistungsText h3::before{left:50%;transform:translateX(-50%)}

  .sponsorTags,.footerMeta,.footerBrand{justify-content:center}
  .sponsorCard figcaption{justify-content:center;text-align:center}
  .referenceCard figcaption span{flex:1;text-align:center}

  .footerSignal{align-items:center;text-align:center}
  .footerSignal>a,.footerSignal .kontaktPop{align-self:center}

}
@container (max-width:300px){.referenceCard figcaption{justify-content:center}}
/* Alle sichtbaren CTA-Inhalte sitzen als komplette Gruppe mittig; FAQ-
   Zeilen behalten bewusst ihr Raster aus Nummer, Frage und Pluszeichen. */
.heroNavCta,.heroNavMobileContact,.heroNavMenu summary,.heroCta,.ueberMehr,.uebernsBack,
.referenceMore button,.sponsorCta,.serviceActions a,.footerSignalBtn,.kbtn{text-align:center}
.heroNavCta,.heroNavMobileContact,.heroNavMenu summary,.heroCta,.sponsorCta,
.serviceActions a,.kbtn{justify-content:center}
@media(prefers-reduced-motion:reduce){.referenceCard img,.sponsorCard img,.sponsorCta,.footerSignal > a,.footerSignalBtn{transition:none}}

/* Grosse Ueberschriften: SemiBold (600) statt Bold, dazu die enge Laufweite
   von -.06em auf -.035em geoeffnet - die Buchstaben klebten sonst aneinander.
   Beides in em, skaliert also mit jeder Schriftgroesse mit. */
.heroCopy h1,.lineupCopy h2,.ueber h2,.tailTitle,.sponsorCopy h2,.serviceInfo h2,.footerSignal p,
.uebernsPanelInner h2,.legal-main h1{font-family:var(--head-font,var(--site-font));font-weight:600;letter-spacing:-.035em}

.heroCopy h1,.lineupCopy h2,.ueber h2,.tailTitle,.sponsorCopy h2,.serviceInfo h2,.footerSignal p{font-weight:400;letter-spacing:-.01em}
/* Bruno: "Fett" und "Hero" sind aus Bruno Ace erzeugte Schnitte (assets/fonts-frei/bruno-ace-fett.build.py):
   Konturen verdickt, Buchstabenformen sonst unveraendert;
   Hero mit +40 statt +18, dafuer kleiner gesetzt. */
.heroCopy h1{font-family:"Bruno Ace Hero","Bruno Ace Fett","Bruno Ace",sans-serif;font-size:clamp(45px,4.2vw,77px)}

/* Kontakt-Popover: liegt ueber allem ausser der festen Nav (z 30). Der Footer
   hatte overflow:hidden (frueher fuer das breite SANTEX-Wort noetig, das
   ist jetzt ein SVG in Seitenbreite) - das schnitt das nach oben geoeffnete
   Menue an der Footer-Oberkante ab. */
.kontaktMenu{z-index:29}
.footerSignal .kontaktPop{position:relative;z-index:5}

/* Grosse Displays: ein gemeinsamer Massstab fuer Text, Abstaende und Inhalte.
   ponytail: Die kuerzere Displayachse begrenzt das Wachstum auf Ultrawide;
   bis 1920 × 1080 bleiben alle bestehenden Groessen erhalten. */
@media(min-width:1921px){
  :root{--desktop-unit:max(1px,min(.052083333vw,.092592593svh))}
  .heroNav{top:calc(26 * var(--desktop-unit));width:calc(100% - 108 * var(--desktop-unit))}
  .heroLogo{gap:calc(17 * var(--desktop-unit))}
  .heroLogo img{width:calc(62 * var(--desktop-unit));height:calc(55 * var(--desktop-unit))}
  .navWordmark{height:calc(13 * var(--desktop-unit))}
  .heroLogoText small{font-size:calc(12 * var(--desktop-unit))}
  .heroNavGroup{padding:calc(7 * var(--desktop-unit)) calc(16 * var(--desktop-unit)) calc(7 * var(--desktop-unit)) calc(35 * var(--desktop-unit))}
  .heroNavGroup,.heroNavLinks{gap:calc(56 * var(--desktop-unit))}
  .heroNavLinks a,.heroNavCta{font-size:calc(14 * var(--desktop-unit))}
  .heroNavCta{padding-inline:calc(28 * var(--desktop-unit))}
  #hero{padding-inline:calc(76 * var(--desktop-unit))}
  .heroCopy{margin-left:0;width:calc(820 * var(--desktop-unit));max-width:46vw}
  .heroCopy h1{font-size:calc(77 * var(--desktop-unit))}
  .scrollCue{left:calc(92 * var(--desktop-unit));bottom:calc(30 * var(--desktop-unit));font-size:calc(10 * var(--desktop-unit))}
  #lineup{padding:calc(142 * var(--desktop-unit)) calc(78 * var(--desktop-unit))}
  .lineupCopy{width:calc(620 * var(--desktop-unit));max-width:43vw}
  html[data-render-quality="static"] .lineupCopy{width:min(100%,calc(680 * var(--desktop-unit)))}
  .lineupCopy h2,.ueber h2,.tailTitle,.serviceInfo h2{font-size:calc(80 * var(--desktop-unit));margin-bottom:calc(38 * var(--desktop-unit));max-width:none}
  .lineupCopy p,.sponsorCopy>p:not(.sponsorKicker),.serviceInfoLead,.storyCopy .ueberText{font-size:calc(18 * var(--desktop-unit))}
  .lineupStatement,.lineupCopy .lineupOutro{max-width:calc(520 * var(--desktop-unit))}
  .lineupStatement,.ueberText{padding-left:calc(20 * var(--desktop-unit))}
  .lineupStatement strong{font-size:calc(22 * var(--desktop-unit))}
  .lineupIntro{margin-top:calc(22 * var(--desktop-unit))!important}
  .lineupProducts{max-width:calc(440 * var(--desktop-unit));gap:calc(6 * var(--desktop-unit));margin-top:calc(14 * var(--desktop-unit))}
  .lineupProducts li{min-height:calc(36 * var(--desktop-unit));font-size:calc(12 * var(--desktop-unit))}
  .lineupCopy .lineupOutro{margin-top:calc(20 * var(--desktop-unit))}
  .ueberMehr{font-size:calc(13 * var(--desktop-unit));margin-top:calc(42 * var(--desktop-unit));padding:calc(15 * var(--desktop-unit)) calc(22 * var(--desktop-unit))}
  .referenceSection,.sponsorSection{padding:calc(150 * var(--desktop-unit)) calc(78 * var(--desktop-unit))}
  .referenceGrid{grid-auto-rows:calc(145 * var(--desktop-unit));gap:calc(20 * var(--desktop-unit))}
  .referenceCard figcaption span{font-size:calc(10 * var(--desktop-unit))}
  .referenceCard figcaption b{font-size:calc(9 * var(--desktop-unit))}
  .referenceActions{margin-top:calc(30 * var(--desktop-unit));gap:calc(12 * var(--desktop-unit))}
  .referenceMore button,.referenceInstagram{font-size:calc(11 * var(--desktop-unit));min-height:calc(42 * var(--desktop-unit));padding-inline:calc(22 * var(--desktop-unit))}
  .sponsorInner{max-width:calc(1500 * var(--desktop-unit));gap:calc(96 * var(--desktop-unit))}
  .sponsorGallery{min-height:calc(740 * var(--desktop-unit))}
  .sponsorCopy h2{font-size:min(11.5cqi,calc(96 * var(--desktop-unit)));margin-bottom:calc(40 * var(--desktop-unit))}
  .sponsorWord{font-size:calc(320 * var(--desktop-unit))}
  .sponsorCta{min-height:calc(50 * var(--desktop-unit));font-size:calc(11 * var(--desktop-unit));padding-inline:calc(20 * var(--desktop-unit));margin-top:calc(34 * var(--desktop-unit))}
  .sponsorCard figcaption,.sponsorCard figcaption b{font-size:calc(9 * var(--desktop-unit))}
  .siteTail #story{padding:calc(142 * var(--desktop-unit)) calc(78 * var(--desktop-unit))}
  .siteTail #story.has-stage{max-width:calc(1380 * var(--desktop-unit));gap:calc(88 * var(--desktop-unit))}
  .siteTail #story .ueberInhalt{width:min(100%,calc(900 * var(--desktop-unit)))}
  .siteTail #story.has-stage .ueberInhalt{max-width:calc(620 * var(--desktop-unit))}
  .storyCopy .ueberText{max-width:calc(500 * var(--desktop-unit));font-size:calc(21 * var(--desktop-unit))}
  .ueberFakten{margin-top:calc(72 * var(--desktop-unit))}
  .ueberFakt{padding-block:calc(24 * var(--desktop-unit));gap:calc(30 * var(--desktop-unit))}
  .ueberFakt b{font-size:calc(28 * var(--desktop-unit))}
  .ueberFakt span{font-size:calc(15 * var(--desktop-unit))}
  .serviceInfo{padding:calc(142 * var(--desktop-unit)) calc(78 * var(--desktop-unit))}
  .serviceInfoInner{max-width:calc(1450 * var(--desktop-unit));gap:calc(150 * var(--desktop-unit))}
  .serviceInfoLead{max-width:calc(650 * var(--desktop-unit))}
  .serviceActions a{font-size:calc(11 * var(--desktop-unit));min-height:calc(52 * var(--desktop-unit))}
  .siteFooter{padding:calc(76 * var(--desktop-unit)) calc(78 * var(--desktop-unit)) calc(28 * var(--desktop-unit))}
  .footerSignal p{max-width:calc(1040 * var(--desktop-unit));font-size:calc(88 * var(--desktop-unit))}
  .footerSignalBtn{width:calc(205 * var(--desktop-unit));font-size:calc(14 * var(--desktop-unit))}
  .footerBrand strong,.footerContact{font-size:calc(13 * var(--desktop-unit))}
  .footerBrand span,.footerMeta a{font-size:calc(10 * var(--desktop-unit))}
}
@media(min-width:901px){
  .sponsorSection{display:flex;align-items:center}
  .sponsorInner{width:100%}
}
/* Ultrawide: Bild und freigestellte Welle behalten gemeinsam ihren Zuschnitt.
   Nur die ruhige linke Bildkante wird weich in die flexible Hintergrundfarbe
   geblendet. Die rechte Bildkante bleibt am Monitorrand, ohne sichtbare Schnittkante. */
@media(min-aspect-ratio:3018/1556){
  #webglLayer::before{left:auto;right:0;width:calc(100cqh * 3018/1556);
    mask-image:linear-gradient(to right,transparent,#000 30%)}
}
@media(min-width:901px) and (min-aspect-ratio:3018/1556){
  #hero{padding-left:max(4vw,calc((100vw - 220svh)/2))}
  #lineup{padding-right:max(4vw,calc((100vw - 210svh)/2))}
  .referenceSection{padding-inline:max(4vw,calc((100vw - 240svh)/2))}
}
/* Hochformat ab 901 px (Tablet, gedrehter Monitor): dieselbe Hero-Komposition
   wie auf dem Handy - Wirbel mittig, Modelle darin, Claim unten. Nur die
   Schrift waechst ueber 64 px hinaus mit. */
@media(min-width:901px) and (orientation:portrait){
  #hero{align-items:flex-end;padding:88px 15px 102px;text-align:center}
  .heroCard{width:100%;max-width:none;margin-left:0;text-align:center}
  .heroCopy h1{font-size:max(64px,6.25vw)!important;max-width:none;margin-inline:auto;text-align:center}
  .scrollCue{display:none}
  /* Leistungen wie auf dem Tablet bis 900 px: Text mittig oben, Modelle darunter.
     Gleiche Weiche im JS: compactLayout(). */
  #lineup{align-items:flex-start;min-height:calc(100svh + 180px);padding:112px 32px 230px}
  #lineup .lineupCopy{width:min(640px,100%);max-width:none;margin-inline:auto;text-align:center}
  #lineup .lineupCopy h2{font-size:clamp(52px,9vw,76px)}
  .lineupCopy p,.lineupStatement,.lineupProducts,.lineupCopy .lineupOutro{margin-inline:auto}
  .lineupStatement{padding:16px 0 0;border-left:0;border-top:3px solid var(--brand-red)}
  .lineupProducts{max-width:560px}
  /* Standbild: keine Modelle in der Sektion, also auch kein Parkraum darunter. */
  html[data-render-quality="static"] #lineup{min-height:0;justify-content:center}
}

/* Querformat bis 900 px: wie Desktop - Claim links, Wirbel mit Modellen rechts. */
@media(max-width:900px) and (orientation:landscape){
  #hero{align-items:center;padding:65px 20px 28px;text-align:left}
  .heroCard{width:min(36vw,300px);text-align:left}
  .heroCopy h1{font-size:clamp(28px,3.7vw,38px)!important;text-align:left;line-height:1}
  .heroClaimSub{margin-top:.3em}
}
/* Kurzes Querformat: die 3D-Buehne wird zum ruhigen Standbild. */
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  #lineup{min-height:100svh;padding:82px 22px 48px}
  #lineup .lineupCopy h2{font-size:clamp(30px,5vw,42px);line-height:1.06;margin-bottom:16px}
}

/* Tablet hochkant: beide Spalten brauchen zusammen mehr als 900 px. */
@media(max-width:900px){
  .sponsorSection{min-height:0}.sponsorInner{grid-template-columns:1fr;gap:48px}.sponsorGallery{order:initial;grid-template:repeat(3,180px)/repeat(2,1fr);min-height:0;gap:10px}.sponsorCard:nth-child(n){grid-area:auto;transform:none}.sponsorCard:first-child,.sponsorCard:last-child{grid-column:1/-1}.sponsorCard figcaption{right:8px;bottom:8px;left:8px;padding:9px 10px}.sponsorWord{font-size:32vw}
}

@media(max-width:480px){.sponsorCard figcaption{flex-wrap:wrap;gap:4px}}
/* Auch am Abschnittsanfang bleibt der Footer-Text unter der mobilen Navigation. */
@media(max-width:900px){.siteFooter{padding-top:90px}}