/* SC kelag Ferlach — Main Styles */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3{font-family:var(--font-display);line-height:0.95;margin:0;text-transform:uppercase;letter-spacing:0.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6)}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:0.28em;
  font-size:var(--step--1);color:var(--neon);font-weight:600}

/* ---- Background flutlicht texture ---- */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% -5%, oklch(0.55 0.17 245 / 0.28), transparent 60%),
    radial-gradient(50% 45% at 12% 8%, oklch(0.45 0.13 265 / 0.22), transparent 62%);
}
.grain{position:fixed;inset:0;z-index:-1;opacity:0.04;pointer-events:none;
  background-image:radial-gradient(var(--fg) 0.5px,transparent 0.5px);background-size:4px 4px}

/* ---- Header ---- */
.hdr{position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);background:color-mix(in oklch, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--sp-8);
  height:72px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6)}
.brand{white-space:nowrap;display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-display);
  text-transform:uppercase;font-size:var(--step-1);letter-spacing:0.02em;font-weight:700}
.brand img{height:38px;width:auto}
.brand b{color:var(--neon)}
.nav{margin-left:auto;display:flex;gap:var(--sp-5);align-items:center}
.nav a,.nav__drop > button{white-space:nowrap}
.nav a.on{color:var(--fg)}
.nav__fuss{display:none}
/* Hinweis für einen Menüpunkt ohne eigene Seite (Fanshop, 23.10.2026); Bedienung in inc/header.php */
.bald{padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--fg);
  width:min(420px,calc(100vw - 32px));box-shadow:0 30px 80px -20px rgb(0 0 0 / .45)}
.bald::backdrop{background:rgb(0 0 0 / .55)}
.bald__in{display:grid;gap:var(--sp-4);padding:var(--sp-8) var(--sp-6)}
.bald h2{font-size:var(--step-2);color:var(--neon)}
.bald p{margin:0;color:var(--fg-muted)}
.bald form{margin:var(--sp-2) 0 0}
.nav__drop{position:relative}
.nav__drop > button{all:unset;cursor:pointer;font-weight:500;font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:0.08em;color:var(--fg-muted);transition:color .25s;display:inline-flex;align-items:center;gap:0.45em;white-space:nowrap}
.nav__drop > button .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .25s var(--ease)}
.nav__drop:hover > button,.nav__drop.open > button{color:var(--fg)}
.nav__drop:hover .caret,.nav__drop.open .caret{transform:rotate(180deg)}
.nav__panel{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:260px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  box-shadow:var(--shadow-panel)}
.nav__drop:hover .nav__panel,.nav__drop.open .nav__panel,.nav__drop:focus-within .nav__panel{
  opacity:1;visibility:visible;transform:translate(-50%,4px)}
.nav__panel a{display:block;padding:0.55em 0.9em;border-radius:8px;text-transform:none;
  letter-spacing:0;font-size:var(--step-0);font-weight:500}
.nav__panel a:hover{background:var(--neon-soft);color:var(--fg)}
.nav__panel a::after{display:none}
.nav__gtitle{display:block;margin:var(--sp-3) 0.9em 2px;font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:0.16em;color:var(--neon)}
.nav__gtitle:first-child{margin-top:2px}
.burger{display:none;margin-left:var(--sp-4);width:44px;height:44px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);cursor:pointer;flex-direction:column;
  align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav a{position:relative;font-weight:500;font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:0.12em;color:var(--fg-muted);padding:var(--sp-2) 0;transition:color .3s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--neon);box-shadow:0 0 12px var(--neon);transition:width .35s var(--ease)}
.nav a:hover{color:var(--fg)}.nav a:hover::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-body);
  font-weight:600;text-transform:uppercase;letter-spacing:0.08em;font-size:var(--step--1);
  padding:var(--sp-3) var(--sp-6);border-radius:99px;border:1px solid var(--neon);
  color:var(--bg);background:var(--neon);box-shadow:var(--glow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--neon),0 0 40px -4px var(--neon)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--neon);color:var(--fg)}

/* ---- Hero ---- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;
  padding-block:var(--sp-24) var(--sp-16);overflow:hidden}
.hero__photo{position:absolute;inset:-8% 0;z-index:0;background:url("../img/hero-halle.jpg") center 35%/cover no-repeat;
  filter:saturate(0.9);will-change:transform}
.hero__shade{position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg, color-mix(in oklch, var(--shade) 94%, transparent) 20%, color-mix(in oklch, var(--shade) 55%, transparent) 55%, color-mix(in oklch, var(--shade) 35%, transparent)),
             linear-gradient(180deg, color-mix(in oklch, var(--shade) 45%, transparent), transparent 30%, color-mix(in oklch, var(--shade) 90%, transparent) 92%, var(--bg))}
.hero__player{position:absolute;z-index:1;right:4%;bottom:0;height:86%;pointer-events:none;
  filter:drop-shadow(0 30px 60px oklch(0.1 0.03 255 / 0.7)) drop-shadow(0 0 80px oklch(0.72 0.19 245 / 0.25));
  will-change:transform}
.hero__player img{height:100%;width:auto;display:block}
/* Michael 16.10.2026 (Layer): „den ausgeschnittenen Spieler weiter links positionieren". Ab 961 px rückt er mit der
   Fensterbreite nach links (bei 1710 px rund 220 px, wie im Layer eingezeichnet), höchstens bis 17 %; der Abstand zum
   Text bleibt dabei von 1280 bis 1710 px etwa gleich. Bis 1100 px bleibt es bei 4 %. */
@media(min-width:961px){.hero__player{right:clamp(4%, calc((100vw - 1100px) * 0.47), 17%)}}
/* Schmal: Spieler am rechten Rand verankert (um einen Teil seiner eigenen Breite hinaus), Gesicht neben der Überschrift */
@media(max-width:960px){.hero__player{opacity:0.34;right:0;height:78%;translate:26% 0}}
@media(max-width:600px){.hero__player{translate:36% 0}}
.hero__glow{position:absolute;inset:0;z-index:0;
  background:radial-gradient(45% 55% at 70% 40%, oklch(0.5 0.16 245 / 0.35),transparent 70%)}
/* Michael 08.10.2026 (Layer): „die Kacheln hinten drin sind nicht gut im Hintergrund" → das Linienraster ist auf allen
   Titelbildern ausgeblendet (display:none am Ende der Regel). */
.hero__grid{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent);display:none}
.hero__in{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6);width:100%}
.hero .live{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:0.18em;color:var(--fg);
  border:1px solid var(--line);border-radius:99px;padding:var(--sp-2) var(--sp-4);background:var(--surface)}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:var(--step-4);margin-top:var(--sp-6);max-width:14ch}
.hero h1 .n{color:var(--neon);text-shadow:0 0 40px oklch(0.72 0.19 245 / 0.5)}
.hero p.lead{color:var(--fg-muted);font-size:var(--step-1);max-width:46ch;margin-top:var(--sp-6)}
.hero .cta{display:flex;gap:var(--sp-4);margin-top:var(--sp-8);flex-wrap:wrap}
.scrollcue{position:absolute;bottom:var(--sp-8);left:50%;transform:translateX(-50%);z-index:2;
  color:var(--fg-muted);font-size:var(--step--1);letter-spacing:0.2em;text-transform:uppercase}

/* ---- Stats strip ---- */
.stats{border-block:1px solid var(--line);background:var(--surface-soft)}
.stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);
  max-width:var(--wrap);margin-inline:auto;padding:var(--sp-12) var(--sp-6)}
.stats__in--drei{grid-template-columns:repeat(3,1fr)} /* Startseite seit 29.10.2026: drei Kacheln */
.stat{text-align:center}
.stat .num{font-family:var(--font-display);font-size:var(--step-3);color:var(--fg);line-height:1}
.stat .num b{color:var(--neon)}
.stat .lbl{color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.14em;font-size:var(--step--1);margin-top:var(--sp-2)}

/* ---- Section base ---- */
.sec{padding-block:var(--sp-32)}
.sec__head{display:flex;justify-content:space-between;align-items:end;gap:var(--sp-8);margin-bottom:var(--sp-12);flex-wrap:wrap}
.sec__head h2{font-size:var(--step-3);max-width:16ch}
.sec__head p{color:var(--fg-muted);max-width:42ch;margin:var(--sp-3) 0 0}

/* ---- Teams ---- */
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-6)}
.teams .team:only-child{min-height:240px;flex-direction:row;align-items:end;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap}
.team{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);min-height:340px;display:flex;flex-direction:column;justify-content:end;
  padding:var(--sp-6);transition:transform .4s var(--ease),border-color .4s var(--ease)}
.team::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,transparent 30%,color-mix(in oklch, var(--shade) 90%, transparent)),var(--tint,radial-gradient(circle at 70% 20%,var(--neon-soft),transparent 60%))}
.team:hover{transform:translateY(-6px);border-color:var(--neon)}
.team>*{position:relative;z-index:1}
.team .tag{align-self:start;font-size:var(--step--1);text-transform:uppercase;letter-spacing:0.16em;
  color:var(--neon);border:1px solid var(--neon-soft);border-radius:99px;padding:4px 12px;background:var(--neon-soft)}
.team h3{font-size:var(--step-2);margin-top:var(--sp-6);overflow-wrap:break-word;hyphens:auto}
.team span{color:var(--fg-muted);margin-top:var(--sp-2)}
.team .arrow{margin-top:var(--sp-4);color:var(--neon);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;font-size:var(--step--1)}

/* ---- News ---- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-6);transition:transform .4s var(--ease),border-color .4s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--neon)}
.card time{color:var(--neon);font-size:var(--step--1);letter-spacing:0.1em;text-transform:uppercase}
.card h3{font-family:var(--font-body);font-weight:600;text-transform:none;font-size:var(--step-1);margin-top:var(--sp-3);line-height:1.2}
.card .thumb{display:block;margin:calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-4);aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;border-bottom:1px solid var(--line)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .thumb img{transform:scale(1.04)}

/* ---- Sponsors ---- */
.sponsors{border-top:1px solid var(--line);padding-block:var(--sp-16)}
.sponsors__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6)}
.sponsors h2{font-size:var(--step-2);text-align:center;color:var(--fg-muted);font-weight:600;letter-spacing:0.1em}
.sponsors h2 b{color:var(--neon)}
.wall{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-8)}
.chip{border:1px solid var(--line);border-radius:99px;padding:var(--sp-3) var(--sp-6);
  color:var(--fg-muted);font-weight:600;letter-spacing:0.06em;transition:.3s var(--ease)}
.chip:hover{border-color:var(--neon);color:var(--fg);box-shadow:var(--glow)}
.chip--main{border-color:var(--neon);color:var(--fg);background:var(--neon-soft)}

/* ---- Footer ---- */
.ftr{border-top:1px solid var(--line);background:var(--ftr-bg);margin-top:var(--sp-16)}
.ftr__in{max-width:var(--wrap);margin-inline:auto;padding:var(--sp-16) var(--sp-6);
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-12)}
.ftr h4{font-family:var(--font-body);text-transform:uppercase;letter-spacing:0.16em;font-size:var(--step--1);color:var(--fg-muted);margin:0 0 var(--sp-4)}
.ftr a{color:var(--fg-muted);display:block;padding:4px 0;transition:color .3s}.ftr a:hover{color:var(--neon)}
.ftr .brand{font-size:var(--step-2);margin-bottom:var(--sp-4)}
.ftr small{color:var(--fg-muted);opacity:.7}
/* Startseite: die drei neuesten eigenen Meldungen als eine unauffällige Zeile unter dem Band „Nächstes Spiel", nur die
   Überschriften (Michael 13.10.2026, Layer). Sie ersetzt den Kasten „Aktuell", der seit 06.10.2026 am linken Rand
   mitlief. Dunkel wie das Band darüber (assets/css/themes.css führt .kurznews bei den dunklen Zonen). Bis 900 px
   Breite bleibt sie weg wie zuvor der Kasten (Michael 08.10.2026): Dort folgt gleich der Block „News & Berichte". */
.kurznews{background:var(--bg);border-bottom:1px solid var(--line);color:var(--fg-muted);font-size:var(--step--1)}
.kurznews__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6);min-height:48px;display:flex;align-items:center;gap:var(--sp-6)}
.kurznews__marke{flex:0 0 auto;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--neon)}
.kurznews ul{flex:1 1 auto;min-width:0;display:flex;gap:var(--sp-6);list-style:none;margin:0;padding:0}
.kurznews li{flex:0 1 auto;min-width:0}
.kurznews li + li{padding-left:var(--sp-6);border-left:1px solid var(--line)}
.kurznews li a{display:block;padding-block:var(--sp-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;text-decoration:none;transition:color .2s}
.kurznews li a:hover,.kurznews li a:focus-visible{color:var(--fg)}
.kurznews time{font-variant-numeric:tabular-nums;opacity:.75}
.kurznews__alle{flex:0 0 auto;color:var(--neon);text-decoration:none;white-space:nowrap}
.kurznews__alle:hover{text-decoration:underline;text-underline-offset:3px}
.kurznews a:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
@media (max-width:900px){
  .kurznews{display:none}
}
@media (prefers-reduced-motion: reduce){.nav{transition:none}.nav.open > *{animation:none}.kurznews li a{transition:none}}
@media print{.kurznews{display:none}}

/* Social Media im Fuß (06.10.2026) */
.ftr__social{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);flex-wrap:wrap}
.ftr__social span{color:var(--fg-muted);font-size:var(--step--1);margin-right:var(--sp-2)}
.ftr .ftr__social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--fg)}
.ftr .ftr__social a:hover{color:var(--neon);border-color:var(--neon)}

/* ---- Reveal (Motion sets .is-in) ---- */
[data-reveal]{opacity:0;transform:translateY(28px)}
.reduce-motion *{animation:none!important;transition:none!important}
.reduce-motion [data-reveal]{opacity:1!important;transform:none!important}

/* ---- A11y widget ----
   Im Kopf neben dem Hell/Dunkel-Knopf und in dessen Form (Michael 13.10.2026, Layer: „anderes Icon nehmen und irgendwo im
   Header dezenter darstellen"); vorher ein runder Knopf mit Rollstuhl-Zeichen unten links. Das Feld klappt unter dem
   Knopf auf, am Handy hängt es rechts unter dem Kopf. Markup: inc/header.php. */
.a11y{position:relative;flex:0 0 auto}
.a11y__btn{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:99px;border:1px solid var(--line);
  background:transparent;color:var(--fg);cursor:pointer;transition:border-color .25s}
.a11y__btn:hover,.a11y.open .a11y__btn{border-color:var(--neon)}
.a11y__btn:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.a11y + .modus{margin-left:calc(var(--sp-2) - var(--sp-6))}
.a11y__panel{position:absolute;right:0;top:calc(100% + 23px);width:230px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);box-shadow:var(--shadow);display:none}
.a11y__panel button:last-child{margin-bottom:0}
@media(max-width:1100px){.hdr__in .a11y{margin-left:auto}.hdr__in .a11y + .modus{margin-left:calc(var(--sp-2) - var(--sp-6))}}
@media(max-width:900px){
  .hdr__in .a11y + .modus{margin-left:calc(var(--sp-2) - var(--sp-3))}
  .a11y{position:static}
  .a11y__panel{right:var(--sp-4);top:calc(100% + var(--sp-2));width:min(230px, calc(100vw - 2 * var(--sp-4)))}
}
.a11y.open .a11y__panel{display:block}
.a11y__panel button{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  color:var(--fg);border-radius:8px;padding:var(--sp-3);margin-bottom:var(--sp-2);cursor:pointer}
.a11y__panel button:hover{border-color:var(--neon)}
body.fs-l{font-size:calc(var(--step-0) * 1.12)}
body.fs-xl{font-size:calc(var(--step-0) * 1.24)}
body.hc{--fg:oklch(1 0 0);--fg-muted:oklch(0.9 0 0);--line:oklch(0.6 0 0)}

/* ---- Responsive ---- */
@media(max-width:900px){
  .hdr{backdrop-filter:none}
  html,body{overflow-x:clip}
  .hdr__live{display:none}
  .stats__in{grid-template-columns:repeat(2,1fr);gap:var(--sp-8)}
  .stats__in--drei .stat:last-child{grid-column:1/-1}
  .teams,.news{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr;gap:var(--sp-8)}
}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* Sponsoren-Marquee (Original-Seite hatte einen Logo-Slider) */
.marquee{overflow:hidden;margin-top:var(--sp-10);position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:var(--sp-6);width:max-content;padding-block:var(--sp-2);
  animation:marquee 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:250px;height:132px;background:oklch(0.99 0.003 255);border-radius:var(--radius);
  border:1px solid var(--line);padding:var(--sp-4);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.marquee__item:hover{transform:translateY(-4px);box-shadow:0 0 30px -8px var(--neon)}
.marquee__item img{max-width:100%;max-height:100%;object-fit:contain}
.marquee__item span{color:oklch(0.3 0.03 255);font-weight:600}
@keyframes marquee{to{transform:translateX(-50%)}}
.reduce-motion .marquee__track,body.rm .marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
@media (prefers-reduced-motion: reduce){.marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
/* Ohne Laufband braucht es die zweite Runde nicht, sonst steht jedes Logo doppelt da */
.reduce-motion .marquee__item[aria-hidden],body.rm .marquee__item[aria-hidden]{display:none}
@media (prefers-reduced-motion: reduce){.marquee__item[aria-hidden]{display:none}}

/* Kelag-Werbebanner (Handball-Seiten) */
.kelagbar{padding-block:var(--sp-6)}
.kelagbar__in{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:var(--sp-8);
  padding:var(--sp-5) var(--sp-8);margin-inline:max(var(--sp-6), calc((100vw - var(--wrap)) / 2));
  background:oklch(0.52 0.16 155);border-radius:var(--radius);text-decoration:none;
  border:1px solid oklch(0.62 0.16 155);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.kelagbar__in:hover{transform:translateY(-3px);box-shadow:0 20px 50px -18px oklch(0.52 0.16 155 / 0.65)}
.kelagbar__in img{height:64px;width:auto;border-radius:10px}
.kelagbar__in strong{display:block;color:oklch(0.99 0.005 155);font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:0.04em;font-size:var(--step-1)}
.kelagbar__in span{color:oklch(0.94 0.02 155)}
.kelagbar__cta{margin-left:auto;font-weight:700;white-space:nowrap;color:oklch(0.99 0.005 155);
  border:1px solid oklch(0.99 0.005 155 / 0.5);border-radius:999px;padding:0.5em 1.2em}
@media(max-width:760px){.kelagbar__in{flex-wrap:wrap;gap:var(--sp-4)}.kelagbar__cta{margin-left:0}}

/* Karate-Subnav */
.knav{position:sticky;top:0;z-index:40;background:color-mix(in oklch, var(--surface) 92%, transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.knav__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6);
  display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none}
.knav__in::-webkit-scrollbar{display:none}
.knav a{flex:0 0 auto;padding:var(--sp-3) var(--sp-4);font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-muted);text-decoration:none;
  border-bottom:2px solid transparent;transition:color .25s,border-color .25s;white-space:nowrap}
.knav a:hover{color:var(--fg)}
.knav a.on{color:var(--neon);border-bottom-color:var(--neon)}
.knav a:first-child{color:var(--fg);font-family:var(--font-display);letter-spacing:0.06em}

/* Hero-Badges: Sportstadt Ferlach + Kelag */
.hero__badges{display:flex;gap:var(--sp-4);margin-top:var(--sp-10);flex-wrap:wrap}
.hbadge{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-2);
  border:1px solid var(--line);border-radius:14px;background:color-mix(in oklch, var(--surface) 70%, transparent);
  backdrop-filter:blur(8px);text-decoration:none;transition:border-color .3s,transform .3s}
a.hbadge:hover{border-color:var(--neon);transform:translateY(-2px)}
.hbadge img{height:52px;width:auto;border-radius:8px}
.hbadge b{font-family:var(--font-display);text-transform:uppercase;font-size:var(--step--1);
  line-height:1.15;letter-spacing:0.08em;color:var(--fg)}
.hbadge--kelag img{height:44px}

/* Kelag-Werbebanner (DCM-Ad 160x600, News-Spalte). Innen genau 160 px: der Anzeigenserver liefert nur
   bei sz=160x600 aus, mit border-box waeren es 158 px und die Anzeige bliebe leer (29.09.2026). */
.kelagad{position:relative;box-sizing:content-box;width:160px;margin-inline:auto;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);align-self:start;position:sticky;top:96px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.kelagad:hover{border-color:oklch(0.62 0.16 155 / 0.7);box-shadow:0 24px 60px -20px oklch(0.52 0.16 155 / 0.5)}
.kelagad ins.dcmads{background:var(--surface)}
.kelagad ins.dcmads iframe{display:block} /* sonst bleibt unter der Anzeige ein Spalt von einigen Pixeln */
.kelagad__fallback{display:block}
.kelagad__fallback img{display:block;width:100%;height:auto}
.kelagad__tag{position:absolute;top:8px;right:8px;z-index:2;font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--fg-muted);background:color-mix(in oklch, var(--bg) 75%, transparent);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;backdrop-filter:blur(4px);pointer-events:none}

/* News-Grid mit Banner-Spalte */
.newsgrid{display:grid;grid-template-columns:1fr 162px;gap:var(--sp-8);align-items:start}
.news--stack{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media(max-width:960px){.newsgrid{grid-template-columns:1fr}.kelagad{position:static}}

/* Pressespiegel-Liste (global, war bisher nur auf news) */
.presslist{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.pressitem{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-6);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-6);text-decoration:none;color:var(--fg);transition:border-color .25s,transform .25s}
.pressitem:hover{border-color:var(--neon);transform:translateY(-2px)}
.pressitem .src{color:var(--neon);font-size:var(--step--1);letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap}
.pressitem h3{font-family:var(--font-body);font-weight:600;text-transform:none;font-size:var(--step-0, 1rem);line-height:1.3;margin:var(--sp-2) 0 0}
.pressitem time{color:var(--fg-muted);font-size:var(--step--1);white-space:nowrap}
@media(max-width:720px){.pressitem{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}}

/* Bild-Heros (Unterseiten): hero--img + Ken-Burns */
.hero--img .hero__bg{position:absolute;inset:-10% 0;z-index:0;background-size:cover;background-position:center 32%;
  filter:saturate(0.85);will-change:transform;animation:kenburns 22s ease-in-out infinite alternate}
.hero--img .hero__shade2{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, color-mix(in oklch, var(--shade) 92%, transparent) 12%, color-mix(in oklch, var(--shade) 60%, transparent) 55%, color-mix(in oklch, var(--shade) 40%, transparent)),
             linear-gradient(180deg, color-mix(in oklch, var(--shade) 50%, transparent), transparent 35%, color-mix(in oklch, var(--shade) 92%, transparent) 90%, var(--bg))}
.hero--img .hero__in, .hero--img .wrap{position:relative;z-index:2}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion: reduce){.hero--img .hero__bg{animation:none}}
.reduce-motion .hero--img .hero__bg{animation:none}

/* Neon-Linie zieht unter Sektions-Headlines ein */
.sec__head h2{position:relative;padding-bottom:var(--sp-3)}
.sec__head h2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:64px;
  background:linear-gradient(90deg, var(--neon), transparent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform 0.9s var(--ease) 0.15s}
.sec__head h2.lined::after{transform:scaleX(1)}

/* Parallax-Bild-Band (Startseite "Das ist Ferlach") */
.fotoband{position:relative;overflow:hidden;min-height:56vh;display:flex;align-items:end}
.fotoband__bg{position:absolute;inset:-14% 0;background-size:cover;background-position:center 30%;will-change:transform}
.fotoband__in{position:relative;z-index:1;max-width:var(--wrap);margin-inline:auto;padding:var(--sp-16) var(--sp-6)}
/* Handy und Tablet hochkant (Michael 08.10.2026, Layer: „das Bild beinhalten, damit alle zu sehen sind"): Das ganze
   Mannschaftsfoto steht im Band, die Höhe folgt seinem Seitenverhältnis (--foto-verhaeltnis aus index.php). Vorher
   füllte es eine feste Höhe und schnitt links und rechts Spieler ab. Ohne Verschieben beim Scrollen, sonst entstünden Ränder. */
@media(max-width:900px){
  .fotoband{min-height:0;aspect-ratio:var(--foto-verhaeltnis, 16 / 9)}
  .fotoband__bg{inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;transform:none!important}
}
/* Computer (Kateryna 13.10.2026 per Mail: „Das Teambild wird nicht vollständig angezeigt"; Michael 16.10.: auch am
   Computer das ganze Foto): Ab 901 px steht das Foto in seinem eigenen Seitenverhältnis, mittig und höchstens so groß,
   dass es unter dem Kopf ganz ins Fenster passt. Vorher füllte es 56 % der Fensterhöhe in voller Breite und schnitt
   oben und unten ab. Ohne Verschieben beim Scrollen, sonst entstünden Ränder. */
@media(min-width:901px){
  /* Kateryna 19./20.10.2026 („teilweise ohne Köpfe"): Bei 100vh − 7rem blieben unter der Kopfleiste (73 px) nur rund 40 px
     Spielraum, beim Scrollen lag die obere Reihe darum meist unter der Leiste. Jetzt rund 120 px kleiner, dazu Abstand
     nach oben und unten, damit das ganze Bild an mehr Scroll-Stellen frei steht. */
  .fotoband{min-height:0;aspect-ratio:var(--foto-verhaeltnis, 16 / 9);max-width:calc((100vh - 15rem) * var(--foto-verhaeltnis, 16 / 9));margin:var(--sp-10) auto}
  .fotoband__bg{inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;transform:none!important}
}
.fotoband h2{font-size:var(--step-3);text-transform:uppercase;font-family:var(--font-display)}
.fotoband p{color:var(--fg-muted);max-width:52ch;margin-top:var(--sp-3)}

/* Teamfoto-Sektion auf team */
.teamfoto{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.teamfoto img{width:100%;display:block}

/* Pressespiegel als Link-Snippet (WordPress-Embed-Look) */
.presscard{display:flex;gap:var(--sp-5);align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5) var(--sp-6);
  text-decoration:none;color:var(--fg);transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.presscard:hover{border-color:var(--neon);transform:translateY(-2px);box-shadow:0 16px 40px -18px oklch(0.72 0.19 245 / 0.4)}
.presscard__ico{flex:0 0 44px;width:44px;height:44px;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;background:oklch(0.99 0.003 255);border:1px solid var(--line)}
.presscard__ico img{width:28px;height:28px;object-fit:contain}
.presscard__ico b{color:oklch(0.35 0.05 255);font-size:1.1rem}
.presscard__body{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.presscard__meta{color:var(--fg-muted);font-size:var(--step--1)}
.presscard__meta b{color:var(--neon);font-weight:600;text-transform:uppercase;letter-spacing:0.08em}
.presscard h3{font-family:var(--font-body);font-weight:600;text-transform:none;
  font-size:var(--step-0, 1rem);line-height:1.35;margin:2px 0 0}
.presscard__cta{color:var(--fg-muted);font-size:var(--step--1);margin-top:var(--sp-1);
  transition:color .25s}
.presscard:hover .presscard__cta{color:var(--neon)}

/* Pressespiegel mit Vorschaubild (newsadoo-Look) */
.presslist{grid-template-columns:repeat(auto-fit,minmax(420px,1fr));align-items:start}
@media(max-width:920px){.presslist{grid-template-columns:1fr}}
.presscard{flex-wrap:wrap}
/* Breite samt Innenabstand der Karte: Mit 100 % blieb rechts ein weißer Streifen neben dem Bild (08.10.2026) */
.presscard__bild{flex:0 0 calc(100% + 2 * var(--sp-6));max-width:none;margin:calc(var(--sp-5) * -1) calc(var(--sp-6) * -1) var(--sp-4);
  aspect-ratio:16/7;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;border-bottom:1px solid var(--line)}
.presscard__bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.presscard:hover .presscard__bild img{transform:scale(1.04)}
.presscard__desc{color:var(--fg-muted);font-size:var(--step--1);line-height:1.55;margin-top:var(--sp-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Startseite (Michael 08.10.2026, Layer): weniger Abstand von Abschnitt zu Abschnitt, besonders vom Partner-Laufband zu den News */
.sec--eng{padding-block:var(--sp-20)}
.sponsors + .sec--eng{padding-top:var(--sp-10)}
.sponsors:has(+ .sec--eng){padding-bottom:var(--sp-10)}

/* News und Presse reihenweise im Wechsel (inc/newsmix.php) */
.newsmix{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12)}
.newsmix__art{margin:0 0 var(--sp-4);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--fg-muted)}
.newsmix__news{grid-template-columns:repeat(3,minmax(0,1fr))}
.newsmix__news .card h3{font-size:clamp(1.08rem, 0.95rem + 0.45vw, 1.35rem);hyphens:auto;overflow-wrap:break-word}
.newsmix__presse{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
/* Pressekarten immer gleich groß (Michael 09.10.2026, Layer): gleiches Bildfeld für alle (ohne Vorschaubild das Vereinslogo
   auf Vereinsblau), Titel auf zwei und Beschreibung auf zwei Zeilen begrenzt und mit fester Höhe, der Link steht unten. */
.newsmix__presse{align-items:stretch}
.newsmix__presse .presscard{height:100%;min-width:0;align-content:flex-start}
.newsmix__presse .presscard__body{flex:1 1 0;min-width:0}
.newsmix__presse .presscard h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.35em)}
.newsmix__presse .presscard__desc{min-height:calc(2 * 1.55em)}
.newsmix__presse .presscard__meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.presscard__bild--ersatz,.card .thumb--ersatz{position:relative;background:linear-gradient(135deg, #0e1c42, #173f94)}
.presscard__bild.presscard__bild--ersatz img,.card .thumb.thumb--ersatz img{position:absolute;top:14%;left:0;right:0;margin:0 auto;width:auto;height:72%;object-fit:contain}
.presscard:hover .presscard__bild.presscard__bild--ersatz img,.card:hover .thumb.thumb--ersatz img{transform:none}
/* Auch die Karten der eigenen Berichte schließen gleich ab: Titel zwei Zeilen, Anreißer (News-Seite) drei Zeilen */
.newsmix__news .card{display:flex;flex-direction:column;height:100%}
.newsmix__news .card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.2em)}
.newsmix__news .card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3 * 1.6em)}
@media(max-width:920px){.newsmix__news{grid-template-columns:repeat(2,minmax(0,1fr))}.newsmix__presse{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.newsmix__news{grid-template-columns:minmax(0,1fr)}}

/* Kelag-Werbebanner (Michael 08.10.2026, Layer): läuft am rechten Rand über die ganze Seite mit; Abschnitte in voller
   Breite (Titelbild, Spielband, Partner, Zahlen, Fotoband, Fuß) ziehen darüber hinweg. Nur wenn rechts neben dem Inhalt
   Platz ist und das Fenster hoch genug für 600 px; sonst steht der Banner als Block unter den News. */
.kelagseite{width:fit-content;margin:0 auto var(--sp-12)}
.kelagseite .kelagad{position:relative;top:auto}
/* Unterseiten (inc/footer.php): nur die mitlaufende Fassung, auf kleineren Bildschirmen gar nicht */
.kelagseite--nurbreit{display:none}
@media (min-width:1600px) and (min-height:720px){
  .kelagseite{position:fixed;z-index:0;margin:0;top:max(96px, calc(50vh - 301px));right:calc(((100vw - var(--wrap)) / 2 - 162px) / 2)}
  .kelagseite--nurbreit{display:block}
  .hero,.teamhero,.nspiel,.kurznews,.sponsors,.stats,.fotoband,.ftr{position:relative;z-index:1}
  .sponsors{background-color:var(--bg)}
  .stats{background-color:var(--bg);background-image:linear-gradient(var(--surface-soft), var(--surface-soft))}
}
@media print{.kelagseite{display:none}}

/* Automiq-Werbebanner (Michael 10.10.2026): links mitlaufend wie rechts der Banner von Kelag, sonst als Streifen im Fuß
   („mobil soll er einfach im Footer sein"). Aussehen: assets/css/automiq-banner.css, Markup: inc/automiq-banner.php.
   Oberkante, Abstand zum Rand und Fenstergröße, ab der er erscheint, wie beim Banner von Kelag, spiegelbildlich; die
   Abschnitte in voller Breite ziehen darüber hinweg (Liste dort).
   Michael 13.10.2026 (Layer: „auf gleicher Höhe wie rechts, es muss symmetrisch wirken"): Auf der Startseite stand er
   höher als der Banner von Kelag, weil er dem Kasten „Aktuell" unten links auswich, und kam erst ab 760 statt 720 px
   Fensterhöhe. Der Kasten ist weg, der Knopf für Barrierefreiheit steht im Kopf; die Sonderregeln entfallen. */
.amqseite{display:none}
.amqfuss{max-width:var(--wrap);margin-inline:auto;padding:var(--sp-8) var(--sp-6) 0}
@media (min-width:1600px) and (min-height:720px){
  .amqseite{display:block;position:fixed;z-index:0;top:max(96px, calc(50vh - 301px));left:calc(((100vw - var(--wrap)) / 2 - 162px) / 2)}
  .amqfuss{display:none}
}
@media print{.amqseite,.amqfuss{display:none}}
/* Seiten ohne Werbebanner (Michael 24.10.2026): Automiq und Kelag am Rand nur auf der Startseite und auf jeder fünften
   Seite eines Besuchs; entschieden in inc/head.php (data-banner). Die Kelag-Anzeige der Unterseiten lädt dann gar nicht
   (inc/footer.php), der Automiq-Film startet nur, wenn er zu sehen ist. */
html[data-banner="aus"] .amqseite,html[data-banner="aus"] .amqfuss,html[data-banner="aus"] .kelagseite{display:none}

/* Werbebanner-Spalte: Container nie strecken, sticky im Wrapper */
.newsgrid > .kelagad{align-self:start;height:fit-content}
.kelagad [hidden]{display:none!important}

/* Einwilligung: Karte unten links ueber dem Barrierefreiheits-Knopf, Platzhalter in gesperrten Rahmen */
.consent-karte{position:fixed;left:var(--sp-6);bottom:calc(var(--sp-6) + 68px);z-index:9000;max-width:340px;
  display:flex;flex-direction:column;gap:.75rem;padding:1rem 1.1rem 1.05rem;border-radius:16px;
  background:rgba(8,14,28,.78);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 50px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.18);
  transform:translateY(16px);opacity:0;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s cubic-bezier(.16,1,.3,1)}
.consent-karte.is-visible{transform:none;opacity:1}
.consent-karte__titel{font-family:var(--font-display);font-size:.95rem;color:#fff;letter-spacing:.02em}
.consent-karte p{margin:0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.78)}
.consent-karte a{color:rgba(255,255,255,.92);text-decoration:underline;text-underline-offset:2px}
.consent-karte a:hover{color:var(--neon)}
.consent-karte__knoepfe{display:flex;gap:.5rem}
.consent-karte button{flex:1 1 0;min-height:40px;border-radius:999px;padding:.55rem .9rem;font:600 .8rem var(--font-body);cursor:pointer}
.consent-karte .ja{background:var(--neon);color:#031019;border:1px solid var(--neon)}
.consent-karte .nein{background:transparent;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.22)}
@media(max-width:480px){.consent-karte{left:.85rem;right:.85rem;max-width:none}}
.consent-ersatz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);text-align:center;
  min-height:320px;padding:var(--sp-8);background:var(--surface-soft)}
.consent-ersatz p{margin:0;color:var(--fg-muted);max-width:44ch}
.consent-ersatz strong{color:var(--fg)}
.consent-ersatz a{font-size:var(--step--1);color:var(--fg-muted)}

iframe[data-consent-src]{display:none!important}

/* Spiel-Hinweis: Karte unten rechts */
.spielhinweis{position:fixed;right:var(--sp-6);bottom:var(--sp-6);z-index:85;max-width:360px;padding:1.1rem 2.6rem 1.1rem 1.2rem;border-radius:16px;
  background:rgba(8,14,28,.86);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--neon);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 24px rgba(0,170,255,.18);
  transform:translateY(16px);opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s cubic-bezier(.16,1,.3,1)}
.spielhinweis.is-visible{transform:none;opacity:1}
.spielhinweis strong{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;color:var(--neon);font-size:1rem;margin-bottom:.35rem}
.spielhinweis p{margin:0;font-size:.92rem;line-height:1.5;color:var(--fg)}
.spielhinweis a{display:inline-block;margin-top:.6rem;font-size:.85rem;font-weight:600;color:var(--neon);text-decoration:none}
.spielhinweis__zu{position:absolute;top:.35rem;right:.45rem;width:36px;height:36px;border:0;background:none;color:var(--fg-muted);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:50%}
.spielhinweis__zu:hover{color:var(--fg)}
@media(max-width:480px){.spielhinweis{left:.85rem;right:.85rem;max-width:none;bottom:calc(var(--sp-6) + 68px)}}

/* Aktuelles im ersten Bildschirm, ohne Scrollen (Kateryna 22.09.2026) */
.hero{min-height:78vh}
.aktuell{position:relative;z-index:3;margin-top:calc(var(--sp-16) * -1)}
.aktuell__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6);display:grid;
  grid-template-columns:auto repeat(3,minmax(0,1fr)) auto;gap:var(--sp-3);align-items:stretch}
.aktuell__label{display:flex;align-items:center;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.14em;color:var(--neon);font-size:var(--step--1);padding-right:var(--sp-2)}
.aktuell__item{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4) var(--sp-5);
  background:color-mix(in oklch, var(--surface) 86%, transparent);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--radius);transition:border-color .25s,transform .25s var(--ease)}
.aktuell__item:hover{border-color:var(--neon);transform:translateY(-2px)}
.aktuell__item time{color:var(--neon);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase}
.aktuell__item span{font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aktuell__alle{display:flex;align-items:center;white-space:nowrap;color:var(--fg-muted);font-size:var(--step--1)}
.aktuell__alle:hover{color:var(--neon)}
@media(max-width:900px){
  .aktuell__in{grid-template-columns:repeat(3,minmax(250px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sp-2)}
  .aktuell__label,.aktuell__alle{display:none}
  .aktuell__item{scroll-snap-align:start}
}

/* Menü mit „Karate" und „Mitglied werden" (Kateryna 22.09.2026): mehr Platz im Kopf,
   Klappmenü schon ab 1100 px statt 900 px */
.hdr__in{max-width:calc(var(--wrap) + 12rem);gap:var(--sp-6)}
@media(max-width:1360px){.nav{gap:var(--sp-4)}.nav a,.nav__drop > button{letter-spacing:.07em}.brand{font-size:var(--step-0)}}
@media(max-width:1100px){
  .hdr{backdrop-filter:none}
  /* Handy-Menü (Michael 08.10.2026, Layer: „mobil Navigation schöner, moderner, mit Logo"): Vollbild unter dem Kopf,
     große Einträge in der Titelschrift mit laufender Nummer, Untermenüs als Aufklapper, unten Livestream und die
     Vereinszeile mit Logo; das Logo steht außerdem groß und blass im Hintergrund. Geschlossen wird mit dem Kreuz im
     Kopf (derselbe Knopf, der es öffnet) oder mit Esc. */
  .nav{position:fixed;inset:72px 0 0;z-index:49;display:flex;flex-direction:column;align-items:stretch;gap:0;counter-reset:nav;
    padding:var(--sp-4) var(--sp-6) calc(var(--sp-6) + 64px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    background:radial-gradient(120% 55% at 100% 0%, var(--neon-soft), transparent 62%), var(--bg);
    visibility:hidden;opacity:0;transform:translateY(-10px);
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility 0s .26s}
  .nav::before{content:"";position:fixed;right:-20%;bottom:-4%;width:88vw;max-width:520px;aspect-ratio:1;
    background:url("../img/logo.png") center/contain no-repeat;opacity:.07;pointer-events:none}
  .nav.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav > a,.nav__drop > button{position:relative;display:flex;align-items:center;gap:var(--sp-4);width:100%;box-sizing:border-box;
    min-height:62px;padding:var(--sp-3) 0;border-bottom:1px solid var(--line);color:var(--fg);
    font-family:var(--font-display);font-weight:700;font-size:clamp(1.45rem, 1.05rem + 2vw, 1.95rem);letter-spacing:.02em;line-height:1.1;text-transform:uppercase}
  .nav > a::before,.nav__drop > button::before{counter-increment:nav;content:counter(nav, decimal-leading-zero);flex:none;width:2.4em;
    font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--neon)}
  .nav > a::after{display:none}
  .nav > a.on{color:var(--neon)}
  .nav__drop{position:static;border-bottom:1px solid var(--line)}
  .nav__drop > button{border-bottom:0}
  .nav__drop > button .caret{margin-left:auto;border-left-width:6px;border-right-width:6px;border-top-width:7px}
  .nav__drop.open > button{color:var(--neon)}
  .nav__panel{position:static;transform:none;opacity:1;visibility:visible;min-width:0;border:0;box-shadow:none;
    background:transparent;display:none;flex-direction:column;padding:0 0 var(--sp-4) calc(1.73rem + var(--sp-4))}
  .nav__drop.open .nav__panel{display:flex}
  .nav__drop:hover .nav__panel{transform:none}
  .nav__panel a{display:flex;align-items:center;min-height:44px;padding:.35em 0;font-size:var(--step-0);color:var(--fg-muted);letter-spacing:.02em}
  .nav__panel a.on,.nav__panel a:hover{background:none;color:var(--neon)}
  .nav__gtitle{margin:var(--sp-3) 0 2px}
  .nav__fuss{display:grid;gap:var(--sp-5);margin-top:auto;padding-top:var(--sp-8)}
  .nav__fuss .btn{justify-content:center;text-align:center}
  .nav__claim{display:flex;align-items:center;gap:var(--sp-3);margin:0;color:var(--fg-muted);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
  .nav__claim img{height:36px;width:auto}
  /* Die Einträge kommen beim Öffnen kurz nacheinander */
  @keyframes nav-rein{from{opacity:0;transform:translateY(12px)}}
  .nav.open > *{animation:nav-rein .42s var(--ease) backwards}
  .nav.open > :nth-child(1){animation-delay:40ms}.nav.open > :nth-child(2){animation-delay:75ms}
  .nav.open > :nth-child(3){animation-delay:110ms}.nav.open > :nth-child(4){animation-delay:145ms}
  .nav.open > :nth-child(5){animation-delay:180ms}.nav.open > :nth-child(6){animation-delay:215ms}
  .nav.open > :nth-child(7){animation-delay:250ms}.nav.open > :nth-child(n+8){animation-delay:285ms}
  .burger{display:flex}
  .hdr__live{margin-left:auto}
  body.nav-lock{overflow:hidden}
}

/* Startseite: der erste Bildschirm zeigt die Aktuell-Leiste ganz (Kateryna 22.09.2026) */
.hero--start{min-height:auto;padding-block:var(--sp-12) calc(var(--sp-16) + var(--sp-8))}
.hero--start h1{font-size:clamp(3rem, 1.8rem + 4.6vw, 6.4rem);margin-top:var(--sp-4)}
.hero--start p.lead{margin-top:var(--sp-4)}
.hero--start .cta{margin-top:var(--sp-6)}
.hero--start .hero__badges{margin-top:var(--sp-6)}

/* Handy: Menüknopf an den rechten Rand, Titelbereich darf nicht breiter als der Bildschirm werden (27.09.2026) */
@media(max-width:1100px){.burger{margin-left:auto}.hdr__live + .burger{margin-left:var(--sp-4)}}
@media(max-width:900px){.hdr__live + .burger{margin-left:auto}} /* dort ist der Livestream-Knopf ausgeblendet */
.hero__in{min-width:0;max-width:min(var(--wrap), 100%)}

/* Lange Wörter in schmalen News-Karten brechen um, statt über den Rand zu ragen (27.09.2026) */
.news--stack .card h3{font-size:clamp(1.08rem, 0.95rem + 0.45vw, 1.35rem);hyphens:auto;overflow-wrap:break-word}

/* Hell/Dunkel-Knopf im Kopf (Michael 27.09.2026) */
.modus{flex:0 0 auto;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:99px;
  border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;transition:border-color .25s,transform .25s var(--ease)}
.modus:hover{border-color:var(--neon);transform:rotate(-20deg)}
.modus:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
@media(max-width:1100px){.hdr__in .modus{margin-left:auto}.hdr__in .hdr__live,.hdr__in .burger,.hdr__in .hdr__live + .burger{margin-left:0}}
@media(max-width:900px){.hdr__in{gap:var(--sp-3)}}
/* Sprach-Umschalter neben Hell/Dunkel (Michael 04.11.2026), gleiche Form wie die Knöpfe daneben; zeigt die andere Sprache.
   Markup: inc/header.php, Übersetzung: inc/sprache.php */
.sprache{flex:0 0 auto;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:99px;border:1px solid var(--line);
  color:var(--fg);font-size:.78rem;font-weight:700;letter-spacing:.06em;line-height:1;text-decoration:none;transition:border-color .25s}
.sprache:hover{border-color:var(--neon)}
.sprache:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.modus + .sprache{margin-left:calc(var(--sp-2) - var(--sp-6))}
@media(max-width:900px){.hdr__in .modus + .sprache{margin-left:calc(var(--sp-2) - var(--sp-3))}}
/* Zwischen Handy-Menü und breitem Bildschirm ist der Kopf knapp. Seit dort auch der Knopf für Barrierefreiheit steht
   (13.10.2026), rücken in diesem Bereich die Abstände zusammen; sonst ragte „Livestream" bei 1110 px aus dem Fenster. */
@media (min-width:1101px) and (max-width:1240px){
  .hdr__in{gap:var(--sp-4)}
  .nav{gap:var(--sp-3)}
  .nav a,.nav__drop > button{letter-spacing:.04em}
  .a11y + .modus{margin-left:calc(var(--sp-2) - var(--sp-4))}
  .modus + .sprache{margin-left:calc(var(--sp-2) - var(--sp-4))}
  .hdr__live{padding-inline:var(--sp-4)}
}
/* Mit dem Sprach-Knopf (04.11.2026) rückte das Menü zwischen 1101 und 1370 px in den Schriftzug „SC Ferlach“ (bei 1104 px
   schon vorher um 22 px). In diesem Bereich steht nur das Logo; der Name bleibt als Bildtext für Vorleseprogramme. */
@media (min-width:1101px) and (max-width:1380px){.hdr .brand span{display:none}}

/* ============================================================================================
   Spiele (Michael 08.10.2026): Band „Nächstes Spiel", Spielplan als Liste, Tabelle.
   Die Daten kommen aus inc/spiele-crawl.php, das Markup aus inc/spiele-anzeige.php.
   ============================================================================================ */
.nur-leser{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* .sp-team, nicht .team: so heißen schon die Mannschaftskarten weiter oben */
.sp-team.is-wir{font-weight:700}
.gegen{color:var(--neon);margin-inline:.12em}

/* Band unter dem Titelbild: die Anzeigetafel. In „Hell · Arena" und „Vereinsblau" bleibt es dunkel wie das Titelbild
   (assets/css/themes.css führt .nspiel dort bei den dunklen Zonen). */
.nspiel{background:var(--bg);border-block:1px solid var(--line);color:var(--fg)}
.nspiel__in{max-width:var(--wrap);margin-inline:auto;padding:var(--sp-10) var(--sp-6);display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--sp-12);align-items:center}
.nspiel__kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin:0;
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--fg-muted)}
.nspiel__marke{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--neon);font-weight:700}
.nspiel__marke .dot{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:pulse 1.8s infinite}
.nspiel__ort{padding:2px 12px;border:1px solid var(--line);border-radius:99px;letter-spacing:.1em}
.nspiel__ort.is-heim{border-color:var(--neon);color:var(--neon)}
.nspiel__paarung{margin:var(--sp-4) 0 0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem, 1.1rem + 2.7vw, 3.7rem);line-height:1.02;letter-spacing:.01em;text-wrap:balance}
.nspiel__paarung .sp-team:not(.is-wir){color:color-mix(in oklch, var(--fg) 82%, transparent)}
.nspiel__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);margin:var(--sp-5) 0 0;color:var(--fg-muted);font-size:var(--step-0)}
.nspiel__bald{padding:2px 14px;border-radius:99px;background:var(--neon);color:var(--bg);font-weight:700}
.nspiel__seite{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.nspiel__fakt{display:grid;gap:3px;padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-soft);color:var(--fg);text-decoration:none;transition:border-color .25s, transform .25s var(--ease)}
.nspiel__fakt:hover{border-color:var(--neon);transform:translateY(-2px)}
.nspiel__fakt:focus-visible,.nspiel__knopf:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.nspiel__lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted)}
.nspiel__zahl{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);line-height:1;font-variant-numeric:tabular-nums;color:var(--neon)}
.nspiel__txt{font-size:var(--step--1);color:var(--fg-muted)}
.nspiel__knopf{grid-column:1 / -1;justify-content:center}
@media(max-width:900px){
  .nspiel__in{grid-template-columns:1fr;gap:var(--sp-8);padding-block:var(--sp-8)}
}
@media (prefers-reduced-motion: reduce){.nspiel__marke .dot{animation:none}.nspiel__fakt{transition:none}}

/* Bilanz über dem Spielplan */
.sbilanz{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;margin:0 0 var(--sp-10);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.sbilanz > div{background:var(--surface);padding:var(--sp-4) var(--sp-2);text-align:center}
.sbilanz dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-muted)}
.sbilanz dd{margin:6px 0 0;font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1;font-variant-numeric:tabular-nums}
.sbilanz > div:first-child dd{color:var(--neon)}
@media(max-width:760px){.sbilanz{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Spielplan */
.splan__leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-10)}
.splan__filter{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.splan__filter button{border:0;background:transparent;color:var(--fg-muted);font:inherit;font-size:var(--step--1);font-weight:600;
  padding:8px 18px;border-radius:99px;cursor:pointer;transition:background .2s, color .2s}
.splan__filter button:hover{color:var(--fg)}
.splan__filter button[aria-pressed="true"]{background:var(--neon);color:var(--bg)}
.splan__filter button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.splan__sprung{color:var(--neon);font-weight:600;font-size:var(--step--1);text-decoration:none}
.splan__sprung:hover{text-decoration:underline;text-underline-offset:3px}
.splan__monat + .splan__monat{margin-top:var(--sp-12)}
.splan__monat[hidden]{display:none}
.splan__titel{font-family:var(--font-display);font-size:var(--step-2);line-height:1;margin:0 0 var(--sp-5)}
.splan__liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.spiel{display:grid;grid-template-columns:68px minmax(0,1fr) auto;gap:var(--sp-6);align-items:center;
  padding:var(--sp-5) var(--sp-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);scroll-margin-top:120px}
.spiel[hidden]{display:none}
.spiel.is-naechstes{border-color:var(--neon);box-shadow:var(--glow)}
.spiel.is-abgesagt{opacity:.6}
.spiel__tag{text-align:center;line-height:1}
.spiel__tag b{display:block;font-family:var(--font-display);font-size:var(--step-2);font-variant-numeric:tabular-nums}
.spiel__tag span{display:block;margin-top:4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted)}
.spiel__tag .spiel__monat{margin-top:2px;color:var(--fg);font-weight:600;letter-spacing:.08em;white-space:nowrap}
.spiel__kopf{display:flex;flex-wrap:wrap;gap:2px var(--sp-3);margin:0;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted)}
.spiel__marke{color:var(--neon);font-weight:700}
.spiel.is-heim .spiel__ort{color:var(--neon)}
.spiel__paarung{margin:6px 0 0;font-size:var(--step-1);font-weight:500;line-height:1.2}
.spiel__meta{margin:6px 0 0;color:var(--fg-muted);font-size:var(--step--1)}
.spiel__hinweis{display:block;margin-top:2px}
.spiel__erg{display:grid;justify-items:end;gap:5px;text-align:right;min-width:96px}
.spiel__erg b{font-family:var(--font-display);font-size:var(--step-2);line-height:1;font-variant-numeric:tabular-nums}
.spiel__erg small{color:var(--fg-muted);font-size:.76rem}
.spiel__uhr{font-family:var(--font-display);font-size:var(--step-1);line-height:1;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.spiel__status{color:var(--fg-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.ausgang{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:.76rem;font-weight:700;border:1px solid var(--line);color:var(--fg-muted)}
.ausgang--sieg{background:#1f8a4c;border-color:#1f8a4c;color:#fff}
.ausgang--niederlage{background:#b3261e;border-color:#b3261e;color:#fff}
@media(max-width:700px){
  .spiel{grid-template-columns:48px minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-4)}
  .spiel__erg{grid-column:2;display:flex;align-items:center;justify-items:start;gap:var(--sp-3);text-align:left;min-width:0}
  .spiel__paarung{font-size:var(--step-0)}
}

/* Tabelle */
.stab-rahmen{border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;background:var(--surface)}
.stab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.stab th,.stab td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.stab thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted);font-weight:600}
.stab abbr{text-decoration:none}
.stab .stab__name{text-align:left;white-space:normal}
.stab tbody th{font-weight:500}
.stab .stab__pl{width:60px;font-family:var(--font-display);font-size:var(--step-1);line-height:1}
.stab thead .stab__pl{font-family:inherit;font-size:.76rem}
.stab .stab__pkt{font-weight:700}
.stab tbody tr:last-child th,.stab tbody tr:last-child td{border-bottom:0}
.stab tbody tr.is-wir{background:var(--neon-soft)}
.stab tbody tr.is-wir th,.stab tbody tr.is-wir td{font-weight:700}
.stab tbody tr.is-wir .stab__pl{color:var(--neon)}
@media(max-width:640px){.stab .stab__fein{display:none}.stab th,.stab td{padding:12px 8px}}

.stab .stab__ak{text-align:left;color:var(--fg-muted);font-size:var(--step--1)}
.stab--schmal .stab__fein{display:none}
.stab--schmal th,.stab--schmal td{padding:12px 10px}
.stab--schmal .stab__pl{width:44px}

/* Nachwuchs: oben die nächsten Spiele quer durch die Altersklassen, darunter ein Reiter je Klasse mit Spielen und
   Tabelle nebeneinander (inc/spiele-anzeige.php, nachwuchs_spiele_ausgeben). */
.nwsp__titel{margin:0 0 var(--sp-4);font-family:var(--font-body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--fg-muted)}
.nwsp__bald{margin-bottom:var(--sp-12)}
.nwsp__bald .splan__liste{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.nwsp__bald .spiel{grid-template-columns:48px minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-5);align-items:start}
.nwsp__bald .spiel__erg{grid-column:2;display:flex;align-items:center;justify-items:start;gap:var(--sp-3);text-align:left;min-width:0}
.nwsp__bald .spiel__paarung{font-size:var(--step-0)}
.nwsp__wahl{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;padding:4px;border:1px solid var(--line);
  border-radius:99px;background:var(--surface);scroll-margin-top:110px}
.nwsp__wahl button{min-height:44px;border:0;background:transparent;color:var(--fg-muted);font:inherit;font-size:var(--step--1);font-weight:600;
  padding:8px 20px;border-radius:99px;cursor:pointer;transition:background .2s, color .2s}
.nwsp__wahl button:hover{color:var(--fg)}
.nwsp__wahl button[aria-selected="true"]{background:var(--neon);color:var(--bg)}
.nwsp__wahl button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.nwsp__feld{margin-top:var(--sp-8);scroll-margin-top:120px}
.nwsp__feld[hidden]{display:none}
.nwsp__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-5);margin-bottom:var(--sp-8)}
.nwsp__kopf h3{margin:0;font-family:var(--font-display);font-size:var(--step-2);line-height:1}
.nwsp__kopf p{margin:0;color:var(--fg-muted);font-size:var(--step--1)}
.nwsp__spiele .splan__liste + .nwsp__titel{margin-top:var(--sp-10)}
.nwsp__feld .spiel__paarung{font-size:calc((var(--step-0) + var(--step-1)) / 2)}
.nwsp__leer{margin:0;color:var(--fg-muted)}
.nwsp__alle{margin-top:var(--sp-8)}
.nwsp__alle summary{width:fit-content;padding:10px 0;cursor:pointer;color:var(--neon);font-weight:600;font-size:var(--step--1)}
.nwsp__alle summary:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.nwsp__alle[open] summary{margin-bottom:var(--sp-4)}
@media(max-width:1000px){
  .nwsp__bald .splan__liste{grid-template-columns:1fr}
}
/* Handy: die Reiter als Raster mit drei Spalten, damit keine einzelne Klasse allein in der zweiten Zeile steht */
@media(max-width:640px){
  .nwsp__wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:var(--radius)}
  .nwsp__wahl button{padding:8px 6px;border-radius:calc(var(--radius) - 4px);white-space:nowrap}
}
@media (prefers-reduced-motion: reduce){.nwsp__wahl button{transition:none}}

.squelle{margin:var(--sp-5) 0 0;color:var(--fg-muted);font-size:var(--step--1)}
.squelle a{color:var(--neon)}

/* ---- Großansicht der Galerien (assets/js/galerie.js, 29.10.2026). Eigener Name .glb: .lb ist das Raster der Leitbild-Seite ---- */
.glb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgb(5 8 14 / .94);color:#fff}
.glb::backdrop{background:rgb(0 0 0 / .6)}
.glb__fig{margin:0;height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:56px 64px 16px}
.glb__bild{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgb(0 0 0 / .5)}
.glb__zahl{padding-top:12px;font-size:var(--step--1);letter-spacing:.12em;color:rgb(255 255 255 / .75);font-variant-numeric:tabular-nums}
.glb__knopf{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgb(255 255 255 / .25);
  background:rgb(255 255 255 / .08);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.glb__knopf:hover,.glb__knopf:focus-visible{background:var(--neon);border-color:var(--neon);color:#fff}
.glb__zu{top:12px;right:12px;font-size:20px}
.glb__vor{left:12px;top:50%;translate:0 -50%}
.glb__nach{right:12px;top:50%;translate:0 -50%}
@media (max-width:640px){.glb__fig{padding:56px 8px 72px}.glb__vor,.glb__nach{top:auto;bottom:12px;translate:none}}