/* =====================================================================
   archivisu — Stylesheet der Leistungsseiten
   Eine Datei fuer alle sechs Unterseiten. Tokens, Typografie, Kopf und
   Fuss sind mit der Startseite identisch, damit sich die Seiten wie
   Kapitel desselben Auftritts lesen und nicht wie eine zweite Website.
   ===================================================================== */

:root{
  --bg:#FAFAFA; --surface:#FFFFFF; --fg:#151515; --fg2:#3A3A3A; --muted:#5E5E5E;
  --line:#E2E2E2; --accent:#991B35; --accent-ink:#FFFFFF; --accent-hover:#700E23;
  --band:#F1F1F1; --invert-bg:#0E0E0E; --invert-fg:#F2F2F2; --invert-muted:#A3A3A3;
  --invert-line:#2E2E2E; --invert-accent:#C41E3A;
  --display:'Poppins',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --label:'Poppins',system-ui,sans-serif;
  --gut:clamp(18px,5vw,28px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:clamp(74px,10vw,100px)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
figure{margin:0}
p{margin:0}
ul{margin:0;padding:0}
a{color:inherit;text-decoration:none}

.wrap{max-width:1240px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));
  padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(66px,9vw,128px)}
.band-a{background:var(--band)}
.inv{background:var(--invert-bg);color:var(--invert-fg)}
.inv .lead,.inv .sub{color:var(--invert-muted)}
.inv .lbl{color:var(--invert-muted)}

h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.028em;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,6.1vw,74px)}
h2{font-size:clamp(28px,4vw,48px)}
h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.018em;line-height:1.2}
em{font-style:normal;color:var(--accent)}
.inv em{color:var(--invert-accent)}
/* Akzentwort im Kopfbereich: Verlauf von hellerem Rot oben ins Burgundy
   unten - oben hell genug zum Lesen, unten der Ton aus dem Knopf. */
.lhero h1 em{color:#E8456A}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .lhero h1 em{background-image:linear-gradient(180deg,#E8456A 0%,#B01F3C 88%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.lbl{font-family:var(--label);font-size:11.5px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);display:block}
.lead{font-size:clamp(16.5px,1.5vw,19.5px);color:var(--fg2);line-height:1.62;max-width:62ch}
.inv .lead{color:#C8C8C8}

/* ---------- Kopfzeile: schwebend, schrumpfend, immer dunkel ---------- */
header{position:fixed;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);z-index:40;
  background:rgba(14,14,14,.84);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  transition:background .3s ease}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header{background:var(--invert-bg)}
}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:17px;transition:padding-block .32s cubic-bezier(.4,0,.2,1)}
header.stuck .hbar{padding-block:12px}
.logo{display:flex;align-items:flex-end;gap:8px;color:var(--invert-fg)}
.logo img{width:82px;height:auto;display:block;transition:width .34s cubic-bezier(.4,0,.2,1),opacity .2s ease,margin .34s cubic-bezier(.4,0,.2,1)}
header.stuck .logo img{width:0;opacity:0;margin-right:-8px}
.logo svg{width:4.5px;height:18px;transition:width .34s cubic-bezier(.4,0,.2,1),height .34s cubic-bezier(.4,0,.2,1)}
header.stuck .logo svg{width:6px;height:24px}
.hnav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.hnav a{font-family:var(--label);font-size:13.5px;color:#CFCFCF;transition:color .2s}
.hnav a:hover{color:#fff}
.hbtn{font-family:var(--label);font-size:13.5px;font-weight:500;color:#fff;padding:9px 18px;
  background:var(--accent);transition:background-color .2s}
.hbtn:hover{background:var(--accent-hover)}
@media (max-width:720px){.hnav .hide-s{display:none}}

/* ---------- Kopfbereich der Seite ---------- */
.lhero{background:var(--invert-bg);color:var(--invert-fg);position:relative;overflow:hidden;
  padding-top:clamp(110px,14vw,170px)}
.lhero .lgrid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(34px,4.5vw,72px);
  align-items:center;padding-bottom:clamp(58px,7vw,100px)}
.lhero .lcopy{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);max-width:58ch}
.crumb{font-family:var(--label);font-size:12px;letter-spacing:.06em;color:#8A8A8A;display:flex;
  flex-wrap:wrap;align-items:center;gap:8px}
.crumb a{color:#8A8A8A;transition:color .2s}
.crumb a:hover{color:#E8456A}
.crumb span{color:#5A5A5A}
.lhero h1{color:#fff}
.lhero .lead{color:#C8C8C8;max-width:48ch}
.lcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.lshot{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1A1A1A}
/* Freigestelltes Bild: ohne Hintergrund heisst ohne Hintergrund. Sonst
   steht hinter dem durchsichtigen Teil ein hellerer Kasten und man sieht
   einen Rahmen, den es gar nicht geben soll. */
.lshot.frei{background:transparent}
.lshot img{width:100%;height:100%;object-fit:cover}
.lshot figcaption{position:absolute;left:0;bottom:0;right:0;padding:26px 22px 16px;
  font-family:var(--label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#E8E8E8;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
@media (max-width:860px){.lhero .lgrid{grid-template-columns:1fr;gap:34px}.lshot{aspect-ratio:16/10}}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-size:14.5px;
  font-weight:500;padding:14px 26px;color:#fff;background:var(--accent);
  transition:background-color .2s,transform .2s}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn svg{width:15px;height:15px;transition:transform .22s}
.btn:hover svg{transform:translateX(3px)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-size:14.5px;
  font-weight:500;padding:14px 26px;color:#F2F2F2;border:1px solid #4A4A4A;transition:border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--invert-accent);color:#fff}
.btn-light{color:var(--fg);border:1px solid var(--line);background:#fff}
.btn-light:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Einleitung mit Eckdaten ---------- */
.intro{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(34px,5vw,86px);align-items:start}
.facts{display:flex;flex-direction:column;gap:0}
.fact{border-top:1px solid var(--line);padding-block:17px;display:flex;flex-direction:column;gap:2px}
.fact b{font-family:var(--display);font-size:clamp(23px,2.6vw,31px);font-weight:600;letter-spacing:-.02em;
  line-height:1.1;color:var(--accent)}
.fact span{font-size:14px;color:var(--muted)}
@media (max-width:820px){.intro{grid-template-columns:1fr;gap:30px}}

/* ---------- Leistungen im Detail ---------- */
.svcs{display:flex;flex-direction:column;gap:clamp(60px,8vw,118px)}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,72px);align-items:center}
.svc:nth-child(even) .svc-img{order:-1}
.svc-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--band)}
.svc-img img{width:100%;height:100%;object-fit:cover}
.svc-img.plan{aspect-ratio:auto;background:transparent;display:flex;align-items:center;justify-content:center}
.svc-img.plan img{width:100%;height:auto;object-fit:contain}
.svc-copy{display:flex;flex-direction:column;gap:15px;min-width:0}
.svc-no{font-family:var(--label);font-size:12px;letter-spacing:.16em;color:var(--accent);font-weight:500}
.svc-copy p{color:var(--fg2);max-width:48ch}
.inc{display:flex;flex-direction:column;gap:9px;margin-top:4px;padding-top:18px;border-top:1px solid var(--line)}
.inc li{list-style:none;display:flex;gap:11px;font-size:14.5px;color:var(--fg2);line-height:1.5}
.inc{margin:4px 0 0;padding-left:0}
.inc li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:9px;background:var(--accent)}
@media (max-width:860px){.svc{grid-template-columns:1fr;gap:26px}.svc:nth-child(even) .svc-img{order:0}}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:clamp(26px,3vw,44px)}
.step{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--invert-line);padding-top:20px}
.step .n{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.1em;color:#E8456A}
.step h3{color:#fff}
.step p{font-size:14.5px;color:var(--invert-muted);line-height:1.56}

/* ---------- Fragen ---------- */
.faq{display:flex;flex-direction:column;max-width:900px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding-block:20px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:20px;font-family:var(--display);font-weight:600;
  font-size:clamp(16.5px,1.7vw,19px);letter-spacing:-.012em;line-height:1.35;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";flex:0 0 auto;width:13px;height:13px;margin-top:5px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding-bottom:22px;color:var(--fg2);max-width:70ch;font-size:15.5px}

/* ======================================================================
   GEGENUEBERSTELLUNG — Tag/Nacht-Regler
   ====================================================================== */
.shot{position:relative;aspect-ratio:3/2;width:100%;max-width:1060px;margin-inline:auto;touch-action:pan-y;cursor:ew-resize;
  overflow:hidden;background:var(--invert-bg)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.shot .night{clip-path:inset(0 0 0 var(--wipe,52%))}
/* Der Regler. Eine Lichtkante statt einer Linie: schmaler Kern,
   beidseitig ein weicher Schein, damit die Kante auf hellen wie auf
   dunklen Bildhaelften steht. Der Griff ist burgundy und traegt zwei
   Pfeile - man sieht auf einen Blick, dass man ziehen darf. */
.handle{position:absolute;top:0;bottom:0;left:var(--wipe,52%);width:0;z-index:3;pointer-events:none}
.handle::before{content:"";position:absolute;top:0;bottom:0;left:-10px;width:20px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.34) 42%,transparent 58%,transparent)}
.handle::after{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,#fff 16%,#fff 84%,rgba(255,255,255,.35) 100%);
  box-shadow:0 0 18px rgba(196,30,58,.75),0 0 3px rgba(0,0,0,.5)}
.hgrip{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:var(--accent);
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.22) inset,0 0 0 7px rgba(196,30,58,.16);
  transition:transform .22s cubic-bezier(.34,1.3,.64,1),box-shadow .22s ease}
.hgrip svg{width:30px;height:22px;display:block}
.shot:hover .hgrip{transform:scale(1.09)}
.shot.dragging .hgrip{transform:scale(.94);box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.22) inset,0 0 0 11px rgba(196,30,58,.22)}
/* Ruhepuls: solange noch niemand gezogen hat, atmet ein Ring nach aussen. */
.hgrip i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(153,27,53,.92);
  animation:gpulse 2.4s cubic-bezier(.22,.61,.36,1) infinite}
.shot.used .hgrip i,.shot:hover .hgrip i{animation:none;opacity:0}
@keyframes gpulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.85);opacity:0}100%{transform:scale(1.85);opacity:0}}
@media (prefers-reduced-motion:reduce){.hgrip i{animation:none;opacity:0}}
@media (max-width:620px){.hgrip{width:50px;height:50px;margin:-25px 0 0 -25px}.hgrip svg{width:26px;height:19px}}

/* ======================================================================
   FILM
   ====================================================================== */
.film{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--invert-bg);max-width:100%}
.film video,.film .poster{width:100%;height:100%;object-fit:cover;display:block;background:var(--invert-bg)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  opacity:0;transition:opacity .45s ease}
.film.ready iframe{opacity:1}
/* Ladeanzeige: burgundyfarbener Bogen, der ausduennt */
.vload{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;
  background:rgba(6,6,6,.42)}
.film.loading .vload{display:flex}
.vload span{width:48px;height:48px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(212,40,58,0) 0deg,rgba(212,40,58,.35) 140deg,#D4284A 320deg,#D4284A 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.6px));
  animation:vspin .9s linear infinite}
@supports not ((-webkit-mask:radial-gradient(#000,#000)) or (mask:radial-gradient(#000,#000))){
  .vload span{background:none;border:3px solid rgba(255,255,255,.18);
    border-top-color:#D4284A;border-right-color:#D4284A}
}
@keyframes vspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vload span{animation-duration:2.4s}}
.play{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(8,8,8,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;font-family:var(--label);transition:background .25s}
.play:hover{background:rgba(8,8,8,.16)}
.play .ring{width:76px;height:76px;border:2px solid rgba(255,255,255,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .25s}
.play:hover .ring{transform:scale(1.07)}
.play .ring i{display:block;width:0;height:0;border-left:17px solid rgba(255,255,255,.92);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.play .t{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.film.playing .play{display:none}

/* ======================================================================
   Drohne am Mauszeiger.
   aus dem Equirect-Panorama gerechnet, die Kamera sitzt im Mittelpunkt.
   Geladen wird erst auf Klick — vorher kostet der Abschnitt nichts.
   ====================================================================== */
.flyzone{position:relative;overflow:hidden}
@keyframes rotor{to{transform:rotate(360deg)}}
.dhead{display:flex;flex-direction:column;gap:12px;min-width:0}

/* Mitfliegende Drohne in Burgundy. Auf hellem Grund das echte #991B35
   (7,3:1), auf dunklem der hellere Ton des Markenverlaufs #D4284A
   (3,9:1) — reines Burgundy kaeme dort nur auf 2,4:1. */
.dfly{position:absolute;left:0;top:0;width:54px;height:54px;z-index:5;pointer-events:none;
  opacity:0;transition:opacity .35s;color:var(--accent);will-change:transform}
.dfly svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.inv .dfly{color:var(--invert-accent)}
/* auf dunklem oder burgundy Grund waere eine burgundy Drohne unsichtbar */
.dfly.on-dark{color:#FFFFFF}
.dfly.on-dark svg{filter:drop-shadow(0 0 5px rgba(90,10,24,.55)) drop-shadow(0 7px 13px rgba(60,6,16,.4))}
.inv .dfly svg{filter:drop-shadow(0 0 4px rgba(14,14,14,.85)) drop-shadow(0 7px 13px rgba(0,0,0,.45))}
.dfly .blade{transform-box:fill-box;transform-origin:50% 50%;animation:rotor .34s linear infinite}
/* Panoramaband: randlos ueber die volle Breite, endlos nach rechts */
.pband{position:relative;z-index:6;width:100%;overflow:hidden;height:clamp(180px,26vw,360px);
  -webkit-user-select:none;user-select:none}
.pband-track{display:flex;width:max-content;height:100%;will-change:transform}
.pband-track img{height:100%;width:auto;display:block;flex:0 0 auto;max-width:none}
.pb-head{margin-bottom:clamp(48px,7vw,104px)}
/* Hellmodus; das Band schliesst buendig an den naechsten Abschnitt an.
   Soll der Abschnitt wieder auf Burgundy stehen: hier den Verlauf
   setzen, die drei Schriftfarben darunter einkommentieren und dem
   <section> die Klasse dark-ground geben — dann wechselt auch die
   mitfliegende Drohne von selbst auf Weiss. */
#drohne{padding-top:clamp(58px,8.5vw,112px);padding-bottom:0}
/* #drohne{background:linear-gradient(180deg,#8E1932 0%,#991B35 52%,#7C142A 100%)}
   #drohne .lbl{color:rgba(255,255,255,.76)}
   #drohne h2{color:#FFFFFF}
   #drohne .lead{color:rgba(255,255,255,.88)} */

@media (max-width:860px){
  .dhead{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .dfly .blade{animation:none}
}

@media (max-width:860px){.dhead{gap:10px}}
@media (prefers-reduced-motion:reduce){.dfly .blade{animation:none}}

/* Die blaetterbaren Exposés */
.hefte{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.6vw,34px)}
.heft{display:flex;flex-direction:column;gap:0;background:#161616;border:1px solid var(--invert-line);
  transition:border-color .22s,transform .22s,box-shadow .22s}
.heft:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.heft-bild{display:block;overflow:hidden;aspect-ratio:1.414/1;background:#EDE9E3}
.heft-bild img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.heft:hover .heft-bild img{transform:scale(1.03)}
.heft-txt{display:flex;flex-direction:column;gap:3px;padding:20px 22px 4px}
.heft-txt b{font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-.015em;color:#fff}
.heft-txt > span{font-size:13.5px;color:var(--invert-muted)}
.heft-go{display:inline-flex;align-items:center;gap:8px;padding:12px 22px 22px;
  font-family:var(--label);font-size:13px;color:#E8456A}
.heft-go svg{width:14px;height:14px;transition:transform .22s}
.heft:hover .heft-go svg{transform:translateX(4px)}

/* Eckdaten unter dem Film */
.filmfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 clamp(26px,3vw,48px);margin-top:clamp(26px,3vw,40px)}
.filmfacts div{display:flex;flex-direction:column;gap:2px;padding-block:15px;
  border-top:1px solid var(--invert-line)}
.filmfacts span:first-child{font-family:var(--label);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#9A9A9A}
.filmfacts span:last-child{font-size:14.5px;color:var(--invert-fg);line-height:1.5}

/* ---------- Andere Leistungen ---------- */
/* Fuenf Nachbarn: feste Spaltenzahlen statt auto-fit, sonst bleibt in
   jeder Breite genau eine Karte allein in der letzten Zeile stehen. */
.sibs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2vw,26px)}
@media (max-width:1100px){.sibs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.sibs{grid-template-columns:repeat(2,1fr)}
  .sibs > a:last-child{grid-column:1 / -1}}
@media (max-width:480px){.sibs{grid-template-columns:1fr}
  .sibs > a:last-child{grid-column:auto}}
.sib{display:flex;flex-direction:column;gap:11px;padding:24px 22px 26px;background:var(--surface);
  border:1px solid var(--line);transition:border-color .22s,transform .22s,box-shadow .22s}
.sib:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.sib svg.cat-ic{width:26px;height:26px;color:var(--accent)}
.sib b{font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-.015em}
.sib span{font-size:14px;color:var(--muted);line-height:1.5}
.sib .go{margin-top:auto;padding-top:12px;font-family:var(--label);font-size:13px;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px}
.sib:hover .go svg{transform:translateX(4px)}
.sib .go svg{width:13px;height:13px;transition:transform .22s}

/* ---------- Schlussaufruf ---------- */
.cta{background:var(--accent);color:#fff}
.cta .cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px;
  padding-block:clamp(50px,6vw,82px)}
.cta h2{color:#fff;max-width:18ch}
.cta p{color:rgba(255,255,255,.82);max-width:42ch;margin-top:12px}
.cta .btn{background:#fff;color:var(--accent)}
.cta .btn:hover{background:#F2F2F2;color:var(--accent)}

/* ---------- Fusszeile ---------- */
footer{background:var(--invert-bg);color:var(--invert-muted)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr .85fr;gap:clamp(30px,3vw,54px);
  padding-top:clamp(54px,6vw,88px);padding-bottom:clamp(34px,4vw,54px)}
.fcol{display:flex;flex-direction:column;gap:9px;min-width:0}
.fbrand{gap:18px}
.fh{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#E8456A;margin-bottom:3px}
.fcol a{color:var(--invert-muted);font-size:13px;transition:color .2s}
.fcol a:hover{color:#fff}
.fadr{font-size:13.5px;color:var(--invert-muted);line-height:1.72}
.fadr a:hover{color:#fff}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:18px;border-top:1px solid var(--invert-line)}
/* Social Media in der Fusszeile. Graustufig wie die uebrigen Fusslinks,
   burgundy beim Hovern. #A3A3A3 auf #0E0E0E sind 7,7:1 - deutlich ueber
   den 3:1, die ein Bedienzeichen braucht. */
.social{display:flex;gap:11px;margin-top:2px}
.social a{color:var(--invert-muted);display:block;transition:color .2s,transform .2s}
.social a:hover{color:#E8456A;transform:translateY(-2px)}
.social a:focus-visible{outline:2px solid #E8456A;outline-offset:3px}
.social svg{width:22px;height:22px;display:block}
.fbar .c{color:#8A8A8A;font-size:12.5px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1 / -1}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr;gap:30px}}

/* ---------- Einblenden beim Scrollen ---------- */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .74s cubic-bezier(.22,.61,.36,1),transform .74s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}