@font-face {
  font-family: "Pricedown";
  src: url("../font/pricedown.woff2") format("woff2"), url("../font/pricedown.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #050505;
  --panel: rgba(8, 8, 8, 0.82);
  --panel-soft: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.48);
  --text: #fff;
  --muted: rgba(255,255,255,.68);
  --green: #2eff5d;
  --blue: #4db6ff;
  --red: #ff3c3c;
  --yellow: #ffe45e;
  --max: 1500px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { min-width: 320px; background: var(--bg); color: var(--text); font-family: "Montserrat", Arial, sans-serif; }
body, a, button { cursor: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, video { max-width: 100%; display: block; }
::selection { background: #fff; color: #000; }

/* ===== GLOBAL GAME UI ===== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 28px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.logo {
  display: inline-block; font-family: "Pricedown", Impact, sans-serif; font-size: clamp(2.3rem, 4vw, 4.2rem); line-height: .82;
  text-shadow: -5px -5px 0 #000, 5px -5px 0 #000, -5px 5px 0 #000, 5px 5px 0 #000, 0 0 14px #000;
  transition: transform .22s ease, filter .22s ease;
}
.logo:hover { transform: translateY(-2px) scale(1.035); filter: drop-shadow(0 0 12px rgba(255,255,255,.35)); }
.nav { margin: 8px 92px 0 auto; }
.nav ul { list-style: none; display: flex; gap: clamp(18px, 4vw, 58px); align-items: center; }
.nav a { position: relative; font-weight: 700; font-size: .82rem; letter-spacing: .12em; }
.nav a::after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:2px; background:#fff; transition:width .22s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after { width:100%; }
.burger { display:none; border:1px solid var(--line); background:rgba(0,0,0,.65); width:46px; height:42px; border-radius:8px; padding:9px; }
.burger span { display:block; height:2px; background:#fff; margin:5px 0; transition:.2s; }

/* custom cursor */
.cursor-dot, .cursor-ring { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; opacity:0; }
.cursor-dot { width:7px; height:7px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
.cursor-ring { width:32px; height:32px; border:1px solid rgba(255,255,255,.75); border-radius:50%; transform:translate(-50%,-50%); transition:width .15s,height .15s,border-color .15s,background .15s; }
.cursor-label { position:fixed; z-index:10000; pointer-events:none; font:11px/1 "Montserrat",sans-serif; letter-spacing:.12em; text-transform:uppercase; transform:translate(15px,14px); opacity:0; }
.cursor-active .cursor-ring { width:52px; height:52px; border-color:#fff; background:rgba(255,255,255,.06); }
.cursor-active .cursor-label { opacity:1; }

.page-shell { width:min(100% - 40px, var(--max)); margin:auto; padding:130px 0 120px; position:relative; }
.eyebrow { font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.page-title { font-family:"Pricedown", Impact, sans-serif; font-size:clamp(3rem,8vw,7rem); line-height:.85; text-shadow:5px 5px 0 #000; }
.page-intro { max-width:700px; color:var(--muted); line-height:1.75; margin-top:18px; }
.scanline { position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.055; background:repeating-linear-gradient(to bottom, transparent 0 3px, #fff 4px); mix-blend-mode:screen; }
.corner { position:fixed; width:34px; height:34px; border-color:rgba(255,255,255,.38); pointer-events:none; z-index:85; }
.corner.tl { top:92px; left:22px; border-top:1px solid; border-left:1px solid; }
.corner.tr { top:92px; right:22px; border-top:1px solid; border-right:1px solid; }
.corner.bl { bottom:24px; left:22px; border-bottom:1px solid; border-left:1px solid; }
.corner.br { bottom:24px; right:22px; border-bottom:1px solid; border-right:1px solid; }

/* buttons */
.game-btn { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); background:rgba(0,0,0,.62); padding:12px 18px; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition:.22s ease; }
.game-btn:hover { border-color:#fff; background:#fff; color:#000; transform:translateY(-2px); }
.bottom-nav { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:60px; }

/* page transition */
.page-transition { position:fixed; inset:0; z-index:10001; background:#000; display:flex; align-items:flex-end; justify-content:flex-end; padding:28px; pointer-events:none; opacity:0; transition:opacity .25s ease; }
.page-transition.is-active { opacity:1; }
.page-transition-inner { width:min(360px,80vw); }
.page-transition-label { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px; }
.transition-bar { height:4px; background:#1d1d1d; overflow:hidden; }
.transition-bar span { display:block; height:100%; width:0; background:#fff; }
.page-transition.is-active .transition-bar span { animation:loadbar .52s ease forwards; }
@keyframes loadbar { to { width:100%; } }

/* ===== START / LOADING ===== */
body.start { min-height:100vh; display:grid; place-items:center; background:url("../Image/start.jpg") center/cover no-repeat; }
#press-start a { display:inline-block; color:#fff; font-family:"Pricedown",Impact,sans-serif; font-size:clamp(4rem,11vw,8rem); line-height:.85; text-align:center; text-shadow:-5px -5px 0 #000,5px -5px 0 #000,-5px 5px 0 #000,5px 5px 0 #000,0 0 10px #000; animation:pulse 1.3s infinite ease-in-out; }
#press-start a:hover { animation:none; transform:scale(1.06); }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
body.loading { min-height:100vh; background:#000; display:grid; place-items:end; padding:30px; }
#loading-text { font-weight:700; font-size:clamp(1.5rem,4vw,2.5rem); letter-spacing:.08em; }

/* ===== HOME ===== */
body.home-page { min-height:100vh; background:url("../Image/home.jpg") center top/cover fixed no-repeat; }
.home-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.16),transparent 55%,rgba(0,0,0,.35)); pointer-events:none; }
.home-page .page-shell { min-height:100vh; width:min(100% - 48px,1600px); padding:135px 0 70px; }
.home-layout { position:relative; min-height:calc(100vh - 190px); display:grid; grid-template-columns:1.05fr .95fr; grid-template-rows:auto 1fr auto; gap:28px; align-items:center; }
.avatar-area { grid-row:1/3; display:flex; justify-content:center; align-items:center; min-height:540px; }
.avatar-bounce { animation:floatAvatar 5s ease-in-out infinite; filter:drop-shadow(0 22px 28px rgba(0,0,0,.55)); }
.avatar { width:min(46vw,650px); max-height:68vh; object-fit:contain; }
@keyframes floatAvatar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.stats-card, .mission-preview { border:1px solid var(--line); background:linear-gradient(135deg,rgba(0,0,0,.76),rgba(0,0,0,.5)); backdrop-filter:blur(7px); box-shadow:0 18px 60px rgba(0,0,0,.35); }
.stats-card { padding:22px; }
.panel-head { display:flex; justify-content:space-between; gap:20px; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:18px; }
.panel-head h2 { font-family:"Pricedown",Impact,sans-serif; font-size:2rem; letter-spacing:.04em; }
.panel-code { color:var(--muted); font-size:.65rem; letter-spacing:.18em; }
.stat { margin:17px 0; }
.stat-row { display:flex; justify-content:space-between; gap:15px; font-size:.72rem; font-weight:700; letter-spacing:.08em; margin-bottom:7px; }
.bar { height:13px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); position:relative; overflow:hidden; }
.fill { width:0; height:100%; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.fill.show { width:var(--value); }
.percent { position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:9px; font-weight:700; mix-blend-mode:difference; }
.mission-preview { position:relative; overflow:hidden; min-height:250px; }
.mission-preview img { width:100%; height:100%; min-height:250px; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:saturate(.8) contrast(1.05); }
.mission-preview:hover img { transform:scale(1.045); filter:saturate(1.05) contrast(1.08); }
.mission-overlay { position:absolute; inset:0; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(transparent 25%,rgba(0,0,0,.88)); }
.mission-tag { font-size:.64rem; letter-spacing:.2em; margin-bottom:7px; }
.mission-title { font-family:"Pricedown",Impact,sans-serif; font-size:clamp(2.2rem,4vw,4rem); line-height:.8; }
.mission-cta { margin-top:14px; font-size:.7rem; letter-spacing:.15em; font-weight:700; }
.character-section { grid-column:1; }
.character-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:520px; }
.character-box { border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.35); aspect-ratio:1; overflow:hidden; transition:.25s ease; }
.character-box:hover { border-color:#fff; transform:translateY(-4px); }
.character-box img { width:100%; height:100%; object-fit:cover; }
.mini-map { position:fixed; left:24px; bottom:24px; z-index:40; }
.map-circle { width:105px; height:105px; border:3px solid #000; border-radius:50%; overflow:hidden; position:relative; box-shadow:0 8px 28px rgba(0,0,0,.5); transition:.25s; }
.mini-map:hover .map-circle { transform:scale(1.07); box-shadow:0 0 0 1px #fff,0 0 30px rgba(255,255,255,.28); }
.map-image { width:100%; height:100%; object-fit:cover; }
.map-location { position:absolute; width:58px; left:50%; top:50%; transform:translate(-50%,-100%); animation:pulseMap 1.7s infinite; }
@keyframes pulseMap { 50%{transform:translate(-50%,-100%) scale(1.14)} }
.radio { position:fixed; right:24px; bottom:24px; z-index:60; display:flex; align-items:center; gap:10px; padding:8px 11px; background:rgba(0,0,0,.75); border:1px solid var(--line); backdrop-filter:blur(8px); }
.radio button { border:0; background:transparent; display:flex; align-items:center; gap:8px; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.radio img { width:27px; height:27px; object-fit:contain; }
.equalizer { display:flex; gap:2px; align-items:flex-end; height:17px; width:22px; }
.equalizer i { display:block; width:3px; height:35%; background:#fff; animation:eq .7s ease-in-out infinite alternate; }
.equalizer i:nth-child(2){animation-delay:.15s}.equalizer i:nth-child(3){animation-delay:.3s}.equalizer i:nth-child(4){animation-delay:.45s}
.radio.is-off .equalizer i { animation-play-state:paused; height:2px; }
@keyframes eq { to{height:100%} }

/* ===== PROJECTS / WORLD MAP ===== */
body.projects-page, body.school-page, body.semester-page, body.graphic-page, body.film-page, body.process-page { background:#050505; min-height:100vh; }
.world-map-wrap { margin-top:48px; position:relative; border:1px solid var(--line); min-height:560px; overflow:hidden; background:#090909; }
.world-map-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.36; filter:grayscale(1) contrast(1.15); transform:scale(1.03); }
.world-map-grid { position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:50px 50px; mask-image:linear-gradient(to bottom,black,transparent 92%); }
.map-location-card { position:absolute; transform:translate(-50%,-50%); }
.map-pin { width:42px; height:42px; border:1px solid #fff; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.85); box-shadow:0 0 0 7px rgba(255,255,255,.07); transition:.25s; }
.map-location-card:hover .map-pin { transform:scale(1.16); background:#fff; color:#000; }
.map-location-card small { position:absolute; top:54px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:.62rem; font-weight:700; letter-spacing:.14em; }
.map-location-card.school { left:27%; top:45%; }.map-location-card.film { left:53%; top:32%; }.map-location-card.graphic { left:75%; top:56%; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.category-card { position:relative; min-height:270px; border:1px solid var(--line); overflow:hidden; background:#0b0b0b; transition:.3s ease; }
.category-card:hover { border-color:#fff; transform:translateY(-6px); box-shadow:0 18px 50px rgba(0,0,0,.5); }
.category-card img { width:100%; height:100%; min-height:270px; object-fit:cover; opacity:.55; transition:.4s; }
.category-card:hover img { opacity:.75; transform:scale(1.04); }
.category-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; background:linear-gradient(transparent 30%,rgba(0,0,0,.95)); }
.category-number { font-size:.62rem; letter-spacing:.2em; color:var(--muted); }
.category-content h2 { font-family:"Pricedown",Impact,sans-serif; font-size:clamp(2.1rem,4vw,4rem); line-height:.82; margin:5px 0 10px; }
.category-content p { color:var(--muted); font-size:.75rem; line-height:1.5; max-width:360px; }
.category-enter { margin-top:16px; font-size:.67rem; font-weight:700; letter-spacing:.15em; }

/* ===== SCHOOL / SEMESTERS ===== */
.mission-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:50px; }
.mission-card { position:relative; min-height:330px; border:1px solid var(--line); padding:30px; overflow:hidden; background:linear-gradient(145deg,#0c0c0c,#050505); transition:.3s; }
.mission-card::before { content:""; position:absolute; width:140px; height:140px; border:1px solid rgba(255,255,255,.1); border-radius:50%; right:-45px; top:-45px; transition:.4s; }
.mission-card:hover { transform:translateY(-5px); border-color:#fff; }
.mission-card:hover::before { transform:scale(1.3); border-color:rgba(255,255,255,.28); }
.mission-card .num { font-size:.64rem; letter-spacing:.2em; color:var(--muted); }
.mission-card h2 { font-family:"Pricedown",Impact,sans-serif; font-size:clamp(3rem,6vw,5.5rem); line-height:.78; margin:30px 0 12px; }
.mission-card p { color:var(--muted); line-height:1.65; max-width:560px; }
.mission-card .enter { position:absolute; left:30px; bottom:28px; font-size:.68rem; letter-spacing:.15em; font-weight:700; }
.mission-card .enter::before { content:"▶"; margin-right:8px; }
.case-grid { display:grid; gap:28px; margin-top:45px; }
.case-card { border:1px solid var(--line); background:var(--panel); padding:clamp(20px,4vw,40px); }
.case-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:22px; }
.case-head h2 { font-family:"Pricedown",Impact,sans-serif; font-size:clamp(2rem,5vw,4rem); line-height:.8; }
.case-meta { text-align:right; color:var(--muted); font-size:.65rem; line-height:1.6; letter-spacing:.12em; text-transform:uppercase; }
.case-card p { max-width:900px; line-height:1.75; color:#ddd; margin-bottom:16px; }
.case-card ul { margin:10px 0 20px 20px; line-height:1.7; color:#ddd; }
.media-grid { display:grid; gap:12px; margin-top:24px; }
.media-grid.two { grid-template-columns:repeat(2,1fr); }.media-grid.three { grid-template-columns:repeat(3,1fr); }.media-grid.six { grid-template-columns:repeat(3,1fr); }
.media-grid img, .media-grid video { width:100%; background:#000; border:1px solid rgba(255,255,255,.12); object-fit:cover; }
.media-grid img:hover, .media-grid video:hover { border-color:rgba(255,255,255,.55); }
.media-grid video { aspect-ratio:16/9; }
.case-link { display:inline-flex; margin-top:22px; font-size:.7rem; font-weight:700; letter-spacing:.12em; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:5px; }
.case-link:hover { border-color:#fff; }
.placeholder-card { border:1px dashed rgba(255,255,255,.35); min-height:280px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px); }
.placeholder-card h3 { font-family:"Pricedown",Impact,sans-serif; font-size:3rem; line-height:.8; }
.placeholder-card p { color:var(--muted); max-width:600px; line-height:1.65; }
.placeholder-media { min-height:220px; border:1px dashed rgba(255,255,255,.22); display:grid; place-items:center; color:var(--muted); letter-spacing:.12em; font-size:.65rem; text-transform:uppercase; }

/* ===== FILM ===== */
.film-layout { width:min(100% - 40px,var(--max)); margin:auto; padding:140px 0 100px; display:grid; gap:24px; }
.film-section { border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(0,0,0,.55)); padding:clamp(22px,4vw,42px); }
.film-title { font-family:"Pricedown",Impact,sans-serif; font-size:clamp(2.4rem,6vw,5rem); line-height:.82; margin-bottom:20px; }
.film-text { color:#ddd; line-height:1.75; max-width:1000px; margin-bottom:16px; }
.showreel-video-wrapper { border:1px solid var(--line); background:#000; margin:24px 0; }
.showreel-video-wrapper video { width:100%; max-height:70vh; }
.projektfar-posters,.northern-posters { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:24px; max-width:900px; }
.poster { width:100%; max-height:700px; object-fit:cover; background:#000; }
.film-list { margin:16px 0 20px 20px; line-height:1.9; color:#ddd; }
.film-link { margin-left:8px; text-decoration:underline; }
.film-crew-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; }
.film-crew-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); }

/* ===== ABOUT ===== */
body.about-page { background:url("../Image/mig.jpg") center/cover fixed no-repeat; }
.about-layout { width:min(100% - 40px,var(--max)); margin:auto; padding:150px 0 90px; }
.about-hero { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:35px; }
.about-title { font-family:"Pricedown",Impact,sans-serif; font-size:clamp(4rem,9vw,8rem); line-height:.78; text-shadow:5px 5px 0 #000; }
.profile-code { color:var(--muted); font-size:.65rem; letter-spacing:.18em; }
.about-box { display:grid; grid-template-columns:minmax(250px,1fr) 1.65fr; gap:0; border:1px solid var(--line); background:rgba(0,0,0,.78); backdrop-filter:blur(6px); }
.about-image { min-height:540px; border-right:1px solid var(--line); }
.about-image img { width:100%; height:100%; min-height:540px; object-fit:cover; object-position:40% center; }
.about-text { padding:35px; }
.about-text p { line-height:1.75; color:#ddd; margin-bottom:18px; }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:25px; }
.profile-stat { border:1px solid var(--line); padding:14px; }
.profile-stat span { display:block; font-size:.6rem; letter-spacing:.16em; color:var(--muted); margin-bottom:7px; }.profile-stat strong{font-size:.85rem;}

/* ===== CONTACT ===== */
body.contact-page { background:url("../Image/kontakt.jpg") center/cover fixed no-repeat; }
.contact-layout { width:min(100% - 40px,var(--max)); margin:auto; min-height:100vh; padding:160px 0 100px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; }
.contact-intro h1 { font-family:"Pricedown",Impact,sans-serif; font-size:clamp(4rem,9vw,8rem); line-height:.78; text-shadow:5px 5px 0 #000; }
.contact-intro p { color:var(--muted); max-width:520px; line-height:1.7; margin-top:20px; }
.contact-database { border:1px solid var(--line); background:rgba(0,0,0,.8); backdrop-filter:blur(7px); }
.contact-row { display:grid; grid-template-columns:120px 1fr auto; gap:15px; align-items:center; padding:20px; border-bottom:1px solid var(--line); }
.contact-row:last-child { border-bottom:0; }
.contact-label { font-size:.62rem; letter-spacing:.16em; color:var(--muted); }
.contact-value { font-size:.85rem; overflow-wrap:anywhere; }
.copy-btn { border:1px solid var(--line); background:transparent; padding:7px 9px; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; }
.copy-btn:hover { background:#fff; color:#000; }
.contact-avatar { margin-top:35px; max-width:300px; justify-self:center; filter:drop-shadow(0 18px 25px rgba(0,0,0,.5)); }
.contact-avatar img { width:100%; }

/* ===== PROCESS ===== */
.process-layout { width:min(100% - 40px,var(--max)); margin:auto; padding:150px 0 100px; }
.process-card { margin-top:45px; border:1px solid var(--line); padding:35px; background:rgba(0,0,0,.72); line-height:1.75; color:#ddd; }


/* ===== PORTFOLIO MEDIA SCALE / DROP-IN SLOTS ===== */
.mission-detail-page .case-grid {
  width: min(100%, 1240px);
  margin-left: auto;
  margin-right: auto;
}
.mission-detail-page .case-card {
  overflow: hidden;
}
.mission-detail-page .media-grid {
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}
.mission-detail-page .media-grid img,
.mission-detail-page .media-grid video {
  max-height: 390px;
  object-fit: contain;
}
.media-slot {
  min-height: 230px;
  border: 1px dashed rgba(255,255,255,.25);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,0,0,.35));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  color: rgba(255,255,255,.5);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .64rem;
}
.media-slot span {
  color: rgba(255,255,255,.82);
  font-weight: 700;
}
.media-slot small {
  font-size: .54rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
  text-transform: none;
}
.mission-detail-page .media-slot:hover {
  border-color: rgba(255,255,255,.65);
  color: #fff;
}
.semester-one .flow-box {
  width: min(100%, 1240px);
  margin-left: auto;
  margin-right: auto;
}
.semester-one .flow-media-grid {
  width: min(100%, 1040px);
  margin-left: auto;
  margin-right: auto;
}
.semester-one .flow-media-grid img,
.semester-one .flow-media-grid video {
  max-height: 370px;
  object-fit: contain;
}
.film-layout {
  width: min(100% - 40px, 1240px);
}
.film-section {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.showreel-video-wrapper {
  width: min(100%, 1000px);
  margin-left: auto;
  margin-right: auto;
}
.projektfar-posters,
.northern-posters {
  max-width: 760px;
}
.projektfar-posters .poster,
.northern-posters .poster {
  max-height: 540px;
  object-fit: contain;
}
.film-crew-gallery {
  max-width: 1000px;
}

/* Contact keeps its original image as a full-page visual background. */
body.contact-page {
  position: relative;
  min-height: 100vh;
  background: url("../Image/kontakt.jpg") center / cover fixed no-repeat;
}
body.contact-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.18) 55%, rgba(0,0,0,.42));
}
body.contact-page > * {
  position: relative;
}
body.contact-page .scanline,
body.contact-page .corner,
body.contact-page .radio,
body.contact-page .page-transition,
body.contact-page .cursor-dot,
body.contact-page .cursor-ring,
body.contact-page .cursor-label {
  z-index: 90;
}
.contact-layout {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
}
.contact-avatar {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: min(30vw, 390px);
  max-width: 390px;
  margin: 0;
  justify-self: initial;
  z-index: 2;
}
.contact-avatar img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.65));
}
.contact-intro {
  position: relative;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-intro h1,
.contact-intro p,
.contact-intro .eyebrow {
  position: relative;
  z-index: 3;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1050px) {
  .nav { margin-right:70px; }
  .nav ul { gap:24px; }
  .home-layout { grid-template-columns:1fr; min-height:auto; }
  .avatar-area { grid-row:auto; min-height:430px; }
  .avatar { width:min(75vw,560px); max-height:55vh; }
  .character-section { grid-column:auto; }
  .character-grid { max-width:none; }
  .mission-preview { min-height:300px; }
  .mission-preview img { min-height:300px; }
  .category-grid { grid-template-columns:1fr; }
  .category-card { min-height:320px; }
  .category-card img { min-height:320px; }
  .about-box { grid-template-columns:1fr; }.about-image { border-right:0; border-bottom:1px solid var(--line); min-height:420px; }.about-image img{min-height:420px;}
  .contact-layout { grid-template-columns:1fr; }.contact-intro { text-align:center; }.contact-intro p{margin-left:auto;margin-right:auto;}
}
@media (max-width: 760px) {
  body, a, button { cursor:auto; }
  .cursor-dot,.cursor-ring,.cursor-label { display:none; }
  .site-header { padding:14px 16px; align-items:flex-start; }
  .logo { margin:0; font-size:2.8rem; }
  .burger { display:block; }
  .nav { position:fixed; top:0; right:0; margin:0; width:min(82vw,330px); height:100vh; background:rgba(0,0,0,.96); border-left:1px solid var(--line); padding:105px 28px 30px; transform:translateX(105%); transition:.28s ease; }
  .nav.open { transform:translateX(0); }
  .nav ul { flex-direction:column; align-items:flex-start; gap:28px; }
  .nav a { font-size:1rem; }
  .page-shell,.film-layout,.about-layout,.contact-layout,.process-layout { width:min(100% - 28px,1500px); padding-top:115px; }
  .page-title { font-size:clamp(3.3rem,17vw,6rem); }
  .home-page .page-shell { width:calc(100% - 28px); padding-top:105px; }
  .avatar-area { min-height:330px; }
  .avatar { width:90vw; max-height:48vh; }
  .stats-card { padding:17px; }
  .character-grid { grid-template-columns:repeat(3,1fr); }
  .mini-map { left:12px; bottom:12px; }.map-circle{width:76px;height:76px}.map-location{width:42px}
  .radio { right:12px; bottom:12px; }
  .radio .radio-label { display:none; }
  .world-map-wrap { min-height:430px; }.world-map-grid{background-size:30px 30px;}
  .map-location-card.school { left:22%; top:52%; }.map-location-card.film{left:52%;top:34%;}.map-location-card.graphic{left:78%;top:58%;}
  .map-pin{width:35px;height:35px}.map-location-card small{font-size:.52rem;}
  .mission-grid { grid-template-columns:1fr; }
  .mission-card { min-height:280px; }
  .case-head { flex-direction:column; }.case-meta{text-align:left;}
  .media-grid.two,.media-grid.three,.media-grid.six { grid-template-columns:1fr; }
  .projektfar-posters,.northern-posters,.film-crew-gallery { grid-template-columns:1fr; }
  .about-hero { flex-direction:column; align-items:flex-start; }.about-box{display:block}.about-image{min-height:360px}.about-image img{min-height:360px}
  .profile-stats { grid-template-columns:1fr; }
  .contact-row { grid-template-columns:1fr auto; }.contact-label{grid-column:1/-1}.contact-value{grid-column:1}.copy-btn{grid-column:2;grid-row:2;}
  .bottom-nav { margin-top:35px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

/* ===== LEGACY CONTENT, UPGRADED ===== */
.semester-one .flow-box,
.process-page .process-box {
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(0,0,0,.62));
  padding:clamp(22px,4vw,40px);
  margin-bottom:22px;
  position:relative;
  overflow:hidden;
}
.semester-one .flow-box::before,
.process-page .process-box::before {
  content:""; position:absolute; top:0; left:0; width:70px; height:3px; background:#fff; opacity:.8;
}
.semester-one .flow-box h2,
.process-page .process-box h1,
.process-page .process-box h2 { font-family:"Pricedown",Impact,sans-serif; font-size:clamp(2rem,4vw,3.7rem); line-height:.85; margin-bottom:18px; }
.semester-one .flow-box p,
.semester-one .flow-box li,
.process-page .process-box p { color:#ddd; line-height:1.75; margin-bottom:15px; }
.semester-one .flow-box ul { margin:10px 0 18px 22px; color:#ddd; line-height:1.8; }
.semester-one .flow-media-grid { display:grid; gap:12px; margin:24px 0; }
.semester-one .flow-media-grid img,
.semester-one .flow-media-grid video { width:100%; border:1px solid rgba(255,255,255,.13); background:#000; object-fit:cover; transition:.3s; }
.semester-one .flow-media-grid img:hover,
.semester-one .flow-media-grid video:hover { border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.semester-one .postcards { grid-template-columns:repeat(2,1fr); }
.semester-one .phones,.semester-one .phones-3 { grid-template-columns:repeat(3,1fr); }
.semester-one .flow3-grid { grid-template-columns:repeat(3,1fr); }
.semester-one .flow4-videos,.semester-one .flow4-images { grid-template-columns:repeat(3,1fr); }
.semester-one .flow-figma-link { display:inline-flex; margin-top:8px; font-size:.7rem; font-weight:700; letter-spacing:.12em; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:5px; }
.semester-one .flow-figma-link:hover { border-color:#fff; }
.semester-one .flow-nav { display:none; }
.process-page .process-layout { width:min(100% - 40px,var(--max)); margin:auto; padding:145px 0 100px; }
.process-page .process-link { display:inline-flex; margin:8px 0 20px; text-decoration:underline; }
.process-page .process-media { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
.process-page .process-media img { width:100%; border:1px solid var(--line); }

@media (max-width:760px) {
  .semester-one .postcards,.semester-one .phones,.semester-one .phones-3,.semester-one .flow3-grid,.semester-one .flow4-videos,.semester-one .flow4-images,.process-page .process-media { grid-template-columns:1fr; }
}


/* =========================================================
   HOME V3 — ORIGINAL HOME COMPOSITION + NEW INTERACTIONS
   The original home.jpg background and fixed viewport are
   intentionally preserved.
   ========================================================= */

.home-nav-link {
  display: inline-block;
  font-family: "Pricedown", Impact, sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: .04em;
  text-shadow: 3px 3px 0 #000;
  transition: transform .2s ease, filter .2s ease;
}
.home-nav-link:hover {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.35));
}

/* Home is a fixed game screen — no page scrolling. */
body.home-page {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: url("../Image/home.jpg") center top / cover no-repeat fixed;
}

.home-stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
}

.home-stage .home-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), transparent 48%, rgba(0,0,0,.16)),
    linear-gradient(0deg, rgba(0,0,0,.12), transparent 45%);
  pointer-events: none;
}

.home-avatar {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(31vw, 500px);
  transform: translate(-57%, -46%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-avatar .avatar-bounce {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatAvatar 5s ease-in-out infinite;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.55));
}

.home-avatar .avatar {
  width: min(31vw, 430px);
  max-height: 70vh;
  object-fit: contain;
}

.home-characters,
.home-stats,
.mission-preview {
  position: absolute;
  z-index: 4;
}

.home-characters {
  left: clamp(28px, 5vw, 70px);
  top: 50%;
  width: min(29vw, 430px);
  transform: translateY(-43%);
}

.home-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-shadow: 2px 2px 0 #000;
}

.home-panel-heading small {
  color: rgba(255,255,255,.72);
  font-size: .52rem;
  letter-spacing: .14em;
  font-weight: 600;
}

.home-characters .character-grid {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 10px;
  max-width: 248px;
}

.home-characters .character-box {
  width: 76px;
  height: 76px;
  aspect-ratio: auto;
  border: 2px solid transparent;
  border-radius: 7px;
  background: rgba(0,0,0,.58);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.home-characters .character-box:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.78);
  box-shadow: 0 0 18px rgba(255,255,255,.38);
}

.home-characters .special-border {
  border-color: #fff;
  box-shadow: 0 0 18px rgba(255,255,255,.62);
}

.home-stats {
  right: clamp(28px, 5vw, 70px);
  top: 23%;
  width: min(30vw, 430px);
  padding: 16px 18px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
  backdrop-filter: blur(4px);
}

.home-stats .panel-head,
.home-stats > .home-panel-heading {
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 9px;
  margin-bottom: 10px;
}

.home-stats .stat {
  margin: 10px 0;
}

.home-stats .stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.home-stats .bar {
  height: 11px;
}

.mission-preview {
  right: clamp(28px, 5vw, 70px);
  top: 55%;
  width: min(24vw, 350px);
  height: 135px;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.68);
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  overflow: hidden;
}

.mission-preview img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.mission-overlay {
  padding: 13px;
}

.mission-tag {
  font-size: .52rem;
  letter-spacing: .16em;
  margin-bottom: 5px;
}

.mission-title {
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
  line-height: .82;
}

.mission-cta {
  margin-top: 7px;
  font-size: .55rem;
  letter-spacing: .12em;
}

.home-next {
  position: fixed;
  right: clamp(26px, 4vw, 55px);
  bottom: 78px;
  z-index: 70;
  font-family: "Pricedown", Impact, sans-serif;
  font-size: clamp(1.8rem, 2.5vw, 2.7rem);
  color: #fff;
  text-shadow: -3px -3px 0 #000, 3px 3px 0 #000;
  transition: transform .18s ease, filter .18s ease;
}

.home-next:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}

.home-page .mini-map {
  left: clamp(22px, 3.5vw, 55px);
  bottom: 28px;
  z-index: 60;
}

/* On every inner page the large Cynthia Fahlmann logo is replaced
   by a simple HOME link. The large logo belongs to Home only. */
body:not(.home-page) .site-header .logo {
  display: none;
}

body:not(.home-page) .site-header .home-nav-link {
  display: inline-block;
}

body:not(.home-page) .page-title {
  font-size: clamp(2.3rem, 5.5vw, 5rem);
}

/* Fixed home screen on smaller laptops/tablets. */
@media (max-width: 1050px) {
  body.home-page {
    overflow: hidden;
  }

  .home-avatar {
    left: 50%;
    top: 51%;
    width: 36vw;
    transform: translate(-55%, -48%);
  }

  .home-avatar .avatar {
    width: 36vw;
    max-height: 58vh;
  }

  .home-characters {
    left: 18px;
    top: 56%;
    width: 29vw;
  }

  .home-characters .character-grid {
    grid-template-columns: repeat(3, 62px);
    gap: 7px;
  }

  .home-characters .character-box {
    width: 62px;
    height: 62px;
  }

  .home-stats {
    right: 18px;
    top: 22%;
    width: 32vw;
    padding: 12px;
  }

  .mission-preview {
    right: 18px;
    top: 57%;
    width: 27vw;
    height: 112px;
  }

  .home-next {
    right: 18px;
    bottom: 24px;
  }

  .home-page .mini-map {
    left: 18px;
    bottom: 20px;
  }
}

/* Phone: still fixed, but compact enough to fit without scrolling. */
@media (max-width: 760px) {
  body.home-page {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .home-header .logo {
    font-size: 2.75rem;
  }

  .home-header .nav {
    position: fixed;
  }

  .home-stage {
    min-height: 0;
  }

  .home-avatar {
    left: 50%;
    top: 49%;
    width: 55vw;
    transform: translate(-50%, -47%);
  }

  .home-avatar .avatar {
    width: 55vw;
    max-height: 48vh;
  }

  .home-characters {
    left: 12px;
    top: auto;
    bottom: 82px;
    width: 46vw;
    transform: none;
  }

  .home-panel-heading {
    font-size: .53rem;
    margin-bottom: 5px;
  }

  .home-panel-heading small {
    display: none;
  }

  .home-characters .character-grid {
    grid-template-columns: repeat(3, 42px);
    gap: 5px;
  }

  .home-characters .character-box {
    width: 42px;
    height: 42px;
    border-width: 1px;
  }

  .home-stats {
    right: 10px;
    top: 21%;
    width: 45vw;
    padding: 8px 9px;
  }

  .home-stats .home-panel-heading {
    border-bottom: 1px solid rgba(255,255,255,.16);
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  .home-stats .stat {
    margin: 6px 0;
  }

  .home-stats .stat-row {
    font-size: .43rem;
    margin-bottom: 3px;
  }

  .home-stats .bar {
    height: 6px;
  }

  .mission-preview {
    right: 10px;
    top: auto;
    bottom: 83px;
    width: 39vw;
    height: 72px;
  }

  .mission-overlay {
    padding: 7px;
  }

  .mission-tag {
    font-size: .38rem;
    margin-bottom: 2px;
  }

  .mission-title {
    font-size: 1rem;
  }

  .mission-cta {
    margin-top: 3px;
    font-size: .4rem;
  }

  .home-page .mini-map {
    left: 10px;
    bottom: 13px;
  }

  .home-page .mini-map .map-circle {
    width: 60px;
    height: 60px;
  }

  .home-page .mini-map .map-location {
    width: 32px;
  }

  .home-next {
    right: 10px;
    bottom: 52px;
    font-size: 1.7rem;
  }

  .radio {
    right: 10px;
    bottom: 13px;
    padding: 5px 7px;
  }

  .radio img {
    width: 21px;
    height: 21px;
  }

  .radio .equalizer {
    display: none;
  }

  .radio #radio-state {
    font-size: .48rem;
  }
}


@media (max-width:760px) {
  .contact-intro {
    min-height: 0;
    padding-bottom: 230px;
  }
  .contact-avatar {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(72vw, 320px);
    transform: translateX(-50%);
  }
  .mission-detail-page .media-grid img,
  .mission-detail-page .media-grid video {
    max-height: 300px;
  }
  .mission-detail-page .media-slot {
    min-height: 180px;
  }
  .semester-one .flow-media-grid img,
  .semester-one .flow-media-grid video {
    max-height: 300px;
  }
}