/* ════════════════════════════════════════════════════════════════════
   K1_ARt · Hub im medienwerkstatt006-Erscheinungsbild (2026-10-29)
   Header-Bild · Termin mit Bildern · Bildleiste · mw006-Footer
   Nur index.html (Hub) – AR-App und station.html bleiben unberührt.
   ════════════════════════════════════════════════════════════════════ */
:root{--kmh-red:#B4463A;--kmh-red-2:#8E3329;--kmh-ocker:#D69A2D;--kmh-paper:#F1EBDF;--kmh-teal:#2E7D7A;--kmh-blue:#3A6EA5}

/* mw006-Kopfzeile + K1-Navigationsleiste darunter */
.topbar{top:var(--mw4-height,0px)}
body.mw4-active .topbar .lang{display:none}
body.mw4-active .topbar .brand{font-size:15px}
.topbar .brand small{font:700 9px/1 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin-left:10px;vertical-align:2px}
@media (max-width:620px){.topbar .brand small{display:none}}
body.map-full #mw-global-header-v4{display:none!important}
body.map-full.mw4-active{padding-top:0!important}
body.map-full .topbar{top:0}

/* Abschnittsnummern wie auf den mw006-Projektseiten */
main{counter-reset:sec}
main>.section:not(#event)>.wrap>h2{position:relative}
main>.section:not(#event)>.wrap>h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);font:400 11px/1 var(--f-text);letter-spacing:.14em;color:var(--fg-3);margin-right:14px;vertical-align:middle}
.section .kicker{letter-spacing:.24em}

/* ---------- Header-Bild ---------- */
.hero.hero-ci{padding:0;min-height:min(92svh,860px);display:flex;align-items:flex-end;isolation:isolate;border-bottom:1px solid var(--line)}
.hero.hero-ci::after{display:none}
.hero-media{position:absolute;inset:0;z-index:-2;background:#0b0a0c}
.hero-media figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s ease}
.hero-media figure.on{opacity:1}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% 50%);transform:scale(1.04);transition:transform 9s ease-out}
.hero-media figure.on img{transform:scale(1)}
.hero-ci::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,8,.94) 0%,rgba(5,5,8,.80) 34%,rgba(5,5,8,.25) 62%,rgba(5,5,8,0) 80%),
             linear-gradient(0deg,var(--bg) 0%,rgba(5,5,8,.55) 22%,rgba(5,5,8,0) 46%),
             linear-gradient(180deg,rgba(5,5,8,.55) 0%,rgba(5,5,8,0) 18%)}
@media (max-width:820px){.hero-ci::before{background:linear-gradient(0deg,var(--bg) 0%,rgba(5,5,8,.86) 46%,rgba(5,5,8,.35) 74%,rgba(5,5,8,.2) 100%)}}
.hero-ci .hero-in{position:relative;width:100%;padding-top:var(--s7);padding-bottom:calc(var(--s7) + 26px)}
.hero-ci .kicker{color:var(--fg);opacity:.86;letter-spacing:.26em;font-size:10.5px}
.hero-ci .kicker .pre{color:var(--magenta)}
.hero-ci h1{font-size:clamp(38px,7.4vw,92px);line-height:.98;letter-spacing:-.01em;max-width:11.5em;margin:var(--s3) 0 var(--s4);text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-ci .lead{color:#d9d1c6;max-width:560px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-ci .qr-hero{bottom:calc(var(--s7) + 26px);background:rgba(20,20,29,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-cap{position:absolute;left:0;right:0;bottom:16px;z-index:2}
.hero-cap .wrap{display:flex;align-items:center;gap:var(--s3);font:400 10px/1.4 var(--f-text);letter-spacing:.18em;text-transform:uppercase;color:rgba(232,224,212,.62)}
.hero-cap .dots{display:flex;gap:6px;margin-left:auto}
.hero-cap .dots button{width:26px;height:4px;border:0;padding:0;border-radius:2px;background:rgba(232,224,212,.28);cursor:pointer}
.hero-cap .dots button.on{background:var(--magenta)}
.hero-cap .dots button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.hero-cap a{color:inherit}

/* ---------- Termin mit hinterlegten Bildern ---------- */
#event .ev-box{position:relative;overflow:hidden;border:1px solid rgba(214,154,45,.45);border-radius:var(--r-l);padding:clamp(20px,3.4vw,44px);
  background:#1a0f0d;isolation:isolate}
#event .ev-bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:-2}
#event .ev-box::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(18,9,8,.96) 0%,rgba(18,9,8,.86) 46%,rgba(18,9,8,.5) 78%,rgba(18,9,8,.3) 100%)}
@media (max-width:860px){#event .ev-box::after{background:linear-gradient(180deg,rgba(18,9,8,.62) 0%,rgba(18,9,8,.92) 30%,rgba(18,9,8,.96) 100%)}}
#event .ev-box::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ev-stripe,linear-gradient(90deg,var(--kmh-red) 0 25%,var(--kmh-ocker) 25% 50%,var(--kmh-blue) 50% 75%,var(--kmh-teal) 75%))}
#event .ev-head{margin-bottom:var(--s4)}
#event .ev-badge{background:var(--kmh-red);font-size:11px}
#event .ev-date{color:var(--kmh-paper);font-size:clamp(24px,4.4vw,40px)}
#event .ev-box h2{font-size:clamp(28px,5.4vw,56px);line-height:1.02;max-width:12em;color:#fff}
#event .ev-box .lead{color:#e6dccd;font-size:var(--fs-m)}
#event .ev-slots{gap:clamp(14px,2vw,24px);margin-top:var(--s5)}
#event .ev-slots li{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;padding:0;overflow:hidden;background:rgba(12,8,8,.74);border:1px solid rgba(241,235,223,.14);border-radius:var(--r-m);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#event .ev-pic{position:relative;height:clamp(210px,24vw,270px);padding-top:58px;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.18),transparent 62%),linear-gradient(160deg,var(--c1,#2E7D7A),var(--c2,#123c3a))}
#event .ev-pic::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px);pointer-events:none}
#event .ev-pic img{position:relative;z-index:1;max-height:96%;max-width:94%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45));transition:transform .5s ease}
#event .ev-slots li:hover .ev-pic img{transform:translateY(-4px) scale(1.02)}
#event .ev-pic .ev-time{position:absolute;z-index:2;left:16px;top:12px;color:#fff;font-size:clamp(30px,4.6vw,46px);text-shadow:0 3px 18px rgba(0,0,0,.4)}
#event .ev-pic .ev-tag{position:absolute;z-index:2;right:12px;top:14px;font:700 9.5px/1 var(--f-text);letter-spacing:.18em;text-transform:uppercase;background:rgba(5,5,8,.62);color:#fff;padding:6px 9px;border-radius:99px}
#event .ev-txt{padding:var(--s4) var(--s4) var(--s5)}
#event .ev-txt h3{font-size:19px;margin-bottom:8px;color:#fff}
#event .ev-txt p{color:#d8cfc2}
#event .ev-meet{display:flex;gap:8px;align-items:flex-start;margin-top:var(--s3)!important;padding-top:var(--s3);border-top:1px dashed rgba(241,235,223,.2);color:#fff!important}
#event .ev-meet a{color:var(--kmh-ocker)!important;white-space:nowrap}
#event .ev-foot{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;margin-top:var(--s2)}
#event .ev-foot p{margin:0;max-width:760px;color:#cfc5b7}
#event .acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
#event .btn.accent{background:var(--kmh-red);color:#fff}
#event .btn.ghost{border-color:rgba(241,235,223,.3);color:#fff;background:rgba(5,5,8,.4)}
#event .ev-credit{position:absolute;right:14px;bottom:10px;font:400 9px/1 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:rgba(241,235,223,.45)}
@media (max-width:600px){#event .ev-box{padding:var(--s4)}#event .ev-credit{display:none}}

/* ---------- Bildleiste (Footer) ---------- */
.strip{padding:var(--s7) 0 0;border-top:1px solid var(--line);overflow:hidden}
.strip .wrap{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.strip h2{margin:0;font-size:var(--fs-l)}
.strip .wrap p{margin:0 0 0 auto;font-size:var(--fs-xs);color:var(--fg-3);letter-spacing:.06em}
.strip-track{display:flex;gap:10px;width:max-content;padding:0 0 var(--s6);animation:stripmove 70s linear infinite}
.strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
@keyframes stripmove{to{transform:translateX(calc(-50% - 5px))}}
.strip-track a{position:relative;flex:none;width:clamp(220px,24vw,320px);aspect-ratio:3/2;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);text-decoration:none;color:#fff}
.strip-track img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,filter .4s}
.strip-track a:hover img,.strip-track a:focus-visible img{transform:scale(1.05)}
.strip-track a::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,8,.82),rgba(5,5,8,0) 52%)}
.strip-track .cap{position:absolute;z-index:1;left:12px;right:12px;bottom:10px;display:flex;align-items:center;gap:10px}
.strip-track .ct strong{display:block;font:700 13px/1.2 var(--f-display)}
.strip-track .cap i{font-style:normal;flex:none;width:24px;height:24px;display:grid;place-items:center;transform:rotate(45deg);border-radius:5px;background:var(--c,var(--magenta));font-size:11px}
.strip-track .cap i b{transform:rotate(-45deg)}
.strip-track small{display:block;font:400 9.5px/1.3 var(--f-text);letter-spacing:.12em;text-transform:uppercase;opacity:.72;margin-top:2px}
.strip-track a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none;overflow-x:auto;width:auto;padding-left:var(--s4);padding-right:var(--s4)}.strip-track a[aria-hidden]{display:none}.hero-media img,.hero-media figure{transition:none}}

/* ---------- Footer im mw006-Stil ---------- */
footer.foot{border-top:1px solid var(--line);padding:var(--s5) 0}
footer.foot .row{gap:var(--s3) var(--s5);flex-wrap:wrap;align-items:center}
footer.foot .fcred{font:400 10px/1.6 var(--f-text);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
footer.foot .fcred b{color:var(--fg-2);font-weight:700}
footer.foot a{color:var(--fg-2)}
.ai-transparency-note{--gut:var(--s4)}
.mdd-artbtn{transition:opacity .35s ease,transform .25s ease!important}
body:not(.mdd-show) .mdd-artbtn{opacity:0!important;pointer-events:none!important}
/* Mobil: Bild oben sichtbar, Text darunter */
@media (max-width:820px){
  .hero.hero-ci{display:block;min-height:0;padding-top:calc(64vw - 40px)}
  .hero-media{bottom:auto;height:calc(64vw + 90px)}
  .hero-media img{object-position:var(--mpos,70% 45%)}
  .hero-ci::before{background:linear-gradient(180deg,rgba(5,5,8,.25) 0,rgba(5,5,8,0) 18%,rgba(5,5,8,0) calc(64vw - 120px),var(--bg) calc(64vw + 80px))}
  .hero-ci .hero-in{padding-top:var(--s4);padding-bottom:calc(var(--s6) + 34px)}
  .hero-cap .wrap{font-size:9px;letter-spacing:.12em}
}
.hero-ci .kicker{text-shadow:0 1px 10px rgba(0,0,0,.8)}
@media (min-width:900px){.mwsf,.ai-transparency-note{padding-right:250px!important}}

/* QR-Code im Kartenpunkt-Popup (Desktop) – 2026-10-29 */
.pop-qr{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pop-qr-img{display:block;width:88px;height:88px;background:#fff;border-radius:8px;padding:4px;box-shadow:0 0 0 2px var(--c)}
.pop-qr-img svg{display:block;width:100%;height:100%}
.pop-qr b{display:block;font:700 12px/1.3 var(--f-display);color:var(--fg);margin-bottom:4px}
.pop-qr span{display:block;font-size:10px;line-height:1.45;color:var(--fg-2)}
@media (hover:none) and (pointer:coarse){.pop-qr{display:none}}

/* Mehrere Termine · projektspezifische Akzente (2026-10-29) */
#event .ev-list{display:grid;gap:clamp(18px,2.6vw,30px)}
#event .ev-box[style*="--ev-acc"]{border-color:color-mix(in srgb,var(--ev-acc) 55%,transparent)}
#event .ev-box[style*="--ev-acc"] .ev-badge,#event .ev-box[style*="--ev-acc"] .btn.accent{background:var(--ev-acc);color:#05201c}
#event .ev-box[style*="--ev-acc"] .ev-meet a{color:var(--ev-acc)!important}