/* ═══════════════════════════════════════════════
   RH MEDIA – Stylesheet v3
   Design: Modern, Technical, Authentic, Waldviertel
═══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:      #0d0e10;
  --bg2:     #131519;
  --bg3:     #1a1d22;
  --bg4:     #22262d;
  --bg5:     #2a2f38;
  --tx:      #e2e4e9;
  --tx2:     #8a8fa0;
  --tx3:     #4a505c;
  --acc:     #c8a45a;
  --acc2:    #dbb96e;
  --acc-bg:  rgba(200,164,90,.1);
  --acc-br:  rgba(200,164,90,.22);
  --br:      rgba(255,255,255,.07);
  --br2:     rgba(255,255,255,.13);
  --r:       7px;
  --ease:    cubic-bezier(.4,0,.2,1);
  --sh:      0 4px 28px rgba(0,0,0,.38);
  --nav-h:   58px;
}
[data-theme="light"] {
  --bg:      #f4f5f7;
  --bg2:     #eceef2;
  --bg3:     #e2e5eb;
  --bg4:     #d5dae4;
  --bg5:     #c8cedb;
  --tx:      #141720;
  --tx2:     #42485a;   /* darker for readability */
  --tx3:     #7a8294;
  --br:      rgba(0,0,0,.08);
  --br2:     rgba(0,0,0,.16);
  --sh:      0 4px 24px rgba(0,0,0,.1);
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  background: var(--bg); color: var(--tx);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; line-height: 1.55; overflow-x: hidden;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-top: var(--nav-h);
}
a { text-decoration: none; color: inherit }
img { display: block; max-width: 100% }
button { font-family: inherit; cursor: pointer; border: none; background: none }
input, textarea, select { font-family: inherit; -webkit-appearance: none; border-radius: 0 }
ul { list-style: none }
::selection { background: rgba(200,164,90,.22); color: var(--tx) }
::-webkit-scrollbar { width: 3px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 2px }

/* ── LAYOUT ── */
.wrap   { max-width: 1100px; margin: 0 auto; padding: 0 clamp(18px,5vw,64px) }
.wrap-s { max-width: 780px;  margin: 0 auto; padding: 0 clamp(18px,5vw,64px) }
.rule   { height: 1px; background: var(--br) }

/* ── NAV – sticky with glassmorphism ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px,5vw,64px);
  transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
/* Default: top of page – subtle */
#nav {
  background: rgba(13,14,16,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--br);
}
/* Scrolled: stronger glass effect */
#nav.scrolled {
  background: rgba(13,14,16,.88);
  border-bottom-color: rgba(255,255,255,.09);
}
[data-theme="light"] #nav {
  background: rgba(244,245,247,.82);
}
[data-theme="light"] #nav.scrolled {
  background: rgba(244,245,247,.94);
}

/* ── NAV LOGO – bigger ── */
#nav-logo {
  height: 34px;   /* was 24px */
  display: block; flex-shrink: 0; transition: opacity .2s;
}
#nav-logo:hover { opacity: .8 }

.nav-menu { display: flex; align-items: center; gap: 22px }
.nav-menu a {
  font-size: 13px; font-weight: 500; color: var(--tx2);
  transition: color .2s; padding: 3px 0; position: relative; letter-spacing: .01em;
}
.nav-menu a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px;
  background: var(--acc); transition: width .24s var(--ease); border-radius: 1px;
}
.nav-menu a:hover { color: var(--tx) }
.nav-menu a.active { color: var(--tx) }
.nav-menu a.active::after, .nav-menu a:hover::after { width: 100% }
.nav-right { display: flex; align-items: center; gap: 10px }

/* Theme toggle */
.thm-wrap { display: flex; align-items: center; gap: 5px }
.thm-ico { font-size: 11px; color: var(--tx3); line-height: 1; user-select: none }
#thm-btn {
  width: 38px; height: 21px; border-radius: 11px;
  border: 1px solid var(--br2); background: var(--bg4);
  position: relative; cursor: pointer; transition: background .25s; flex-shrink: 0;
}
#thm-btn::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--tx2); transition: left .24s, background .24s;
}
[data-theme="light"] #thm-btn::after { left: 19px; background: var(--acc) }

/* Hamburger */
#hbg {
  display: none; flex-direction: column; gap: 5px;
  padding: 5px; cursor: pointer; border: none; background: none;
}
#hbg span {
  width: 20px; height: 1.5px; background: var(--tx2);
  border-radius: 1px; transition: all .26s; display: block;
}
#hbg.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
#hbg.open span:nth-child(2) { opacity: 0; transform: scaleX(0) }
#hbg.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* Mobile menu */
#mobile-menu {
  position: fixed; inset: 0; z-index: 890;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; opacity: 0; pointer-events: none;
  transition: opacity .28s;
}
#mobile-menu.open { opacity: 1; pointer-events: auto }
.mm-logo { height: 36px; margin-bottom: 10px }   /* bigger */
#mobile-menu a {
  font-size: clamp(22px,4vw,30px); font-weight: 500; color: var(--tx2);
  transition: color .2s; letter-spacing: -.01em;
}
#mobile-menu a:hover, #mobile-menu a.active { color: var(--tx) }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 500; padding: 10px 22px;
  border-radius: var(--r); transition: all .2s var(--ease);
  cursor: pointer; letter-spacing: -.01em; white-space: nowrap;
}
.btn-primary { background: var(--tx); color: var(--bg) }
.btn-primary:hover { opacity: .86 }
.btn-outline { background: transparent; color: var(--tx2); border: 1px solid var(--br2) }
.btn-outline:hover { color: var(--tx); background: var(--bg3) }
.btn-accent { background: var(--acc-bg); color: var(--acc2); border: 1px solid var(--acc-br) }
.btn-accent:hover { background: rgba(200,164,90,.18) }
.lnk {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 500; color: var(--acc2);
  background: none; border: none; padding: 0; cursor: pointer; transition: opacity .2s;
}
.lnk:hover { opacity: .72 }
.lnk svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s }
.lnk:hover svg { transform: translateX(2px) }

/* ── SECTION BASE ── */
.section { padding: clamp(52px,8vw,96px) 0 }
.section-sm { padding: clamp(36px,5vw,60px) 0 }
.sec-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--tx3); margin-bottom: 8px; display: block;
}
.sec-title {
  font-size: clamp(26px,3.8vw,44px); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.08; color: var(--tx);
  margin-bottom: clamp(12px,2vw,20px);
}
.sec-sub { font-size: 15px; line-height: 1.72; color: var(--tx2); max-width: 580px }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: clamp(52px,8vw,88px) 0 clamp(32px,5vw,56px);
  border-bottom: 1px solid var(--br);
  background: var(--bg2);
}
.page-hero-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--tx3) }
.page-hero-title {
  font-size: clamp(32px,5.5vw,60px); font-weight: 600; letter-spacing: -.025em;
  line-height: 1.06; color: var(--tx); margin: 8px 0 0;
}
.page-hero-sub {
  font-size: 16px; color: var(--tx2); margin-top: 12px;
  max-width: 520px; line-height: 1.72;
}

/* ── PARALLAX BREAK ── */
.pb { position: relative; overflow: hidden; height: clamp(200px,28vw,360px) }
.pb-img {
  position: absolute; inset: -13%; background-size: cover;
  background-position: center; filter: brightness(.36) saturate(.68);
  will-change: transform;
}
[data-theme="light"] .pb-img { filter: brightness(.46) saturate(.72) }
.pb-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(to bottom,rgba(13,14,16,.4),rgba(13,14,16,.08),rgba(13,14,16,.4));
}
.pb-title {
  font-size: clamp(17px,2.8vw,34px); font-weight: 600; letter-spacing: -.02em;
  color: #fff; text-align: center; padding: 0 20px; line-height: 1.2;
}

/* ── REVEAL ANIMATIONS ── */
.rv { opacity: 0; will-change: opacity, transform }
.rv-up    { transform: translateY(18px) }
.rv-left  { transform: translateX(-18px) }
.rv-right { transform: translateX(18px) }
.rv-fade  { transform: none }
@keyframes rvUp    { to { opacity: 1; transform: translateY(0) } }
@keyframes rvLeft  { to { opacity: 1; transform: translateX(0) } }
@keyframes rvRight { to { opacity: 1; transform: translateX(0) } }
@keyframes rvFade  { to { opacity: 1 } }
.rv.go.rv-up    { animation: rvUp    .62s var(--ease) forwards }
.rv.go.rv-left  { animation: rvLeft  .62s var(--ease) forwards }
.rv.go.rv-right { animation: rvRight .62s var(--ease) forwards }
.rv.go.rv-fade  { animation: rvFade  .5s  ease        forwards }
.rv.done { opacity: 1; transform: none !important; animation: none }
.d1 { animation-delay: .07s } .d2 { animation-delay: .14s }
.d3 { animation-delay: .21s } .d4 { animation-delay: .28s }

.page-fade { animation: pageFadeIn .38s ease forwards }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ── FOOTER ── */
footer { background: var(--bg2); border-top: 1px solid var(--br) }
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px; padding: 48px 0 38px;
}
/* Footer logo – bigger */
.foot-logo { height: 36px; margin-bottom: 14px }
.foot-tag { font-size: 13px; line-height: 1.72; color: var(--tx3); max-width: 240px; margin-top: 6px }
.foot-col-h {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--tx3); margin-bottom: 14px;
}
.foot-links { display: flex; flex-direction: column; gap: 9px }
.foot-links a { font-size: 13px; color: var(--tx2); transition: color .2s }
.foot-links a:hover { color: var(--tx) }
.foot-ci {
  font-size: 13px; color: var(--tx3); display: flex; align-items: flex-start;
  gap: 8px; margin-bottom: 9px; line-height: 1.5;
}
.foot-ci svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 1.5px; opacity: .38 }
.foot-bar {
  border-top: 1px solid var(--br); padding: 15px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.foot-copy { font-size: 12px; color: var(--tx3) }
.foot-legal { display: flex; gap: 16px }
.foot-legal a { font-size: 12px; color: var(--tx3); transition: color .2s }
.foot-legal a:hover { color: var(--tx2) }

/* ── TOAST ── */
#toast {
  position: fixed; bottom: 18px; right: 18px; z-index: 9999;
  background: var(--bg3); border: 1px solid var(--br2); border-radius: 8px;
  color: var(--tx); padding: 10px 16px; font-size: 13px; font-weight: 500;
  transform: translateY(44px); opacity: 0; transition: all .3s var(--ease);
  pointer-events: none; box-shadow: var(--sh);
}
#toast.show { transform: none; opacity: 1 }

/* ── FORM ELEMENTS ── */
.field { display: flex; flex-direction: column; gap: 5px }
.field label { font-size: 12px; font-weight: 500; color: var(--tx2) }
.field input, .field textarea, .field select {
  background: var(--bg2); border: 1px solid var(--br2); color: var(--tx);
  padding: 10px 13px; border-radius: var(--r); font-size: 14px;
  outline: none; transition: border-color .2s; width: 100%; font-family: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--acc) }
.field textarea { height: 100px; resize: vertical; line-height: 1.5 }
.field select option { background: var(--bg2) }
[data-theme="light"] .field input,
[data-theme="light"] .field textarea,
[data-theme="light"] .field select { background: var(--bg3) }

/* ── CARD BASE ── */
.card {
  background: var(--bg2); border: 1px solid var(--br); border-radius: var(--r);
  overflow: hidden; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.card:hover { border-color: var(--br2); transform: translateY(-2px); box-shadow: var(--sh) }

/* ── CHIPS ── */
.chip { font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 5px; border: 1px solid var(--br2); color: var(--tx2); background: var(--bg3); display: inline-block }
.chip-acc { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 3px; background: var(--acc-bg); color: var(--acc2); border: 1px solid rgba(200,164,90,.2); display: inline-block }

/* ── MODAL OVERLAY (referenzen fix) ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 800;
  background: rgba(10,11,14,.88);
  align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
  animation: none;
}
.modal-overlay.open {
  display: flex;
  animation: modalBgIn .25s ease forwards;
}
@keyframes modalBgIn { from { opacity: 0 } to { opacity: 1 } }
.modal-inner {
  position: relative; max-width: 840px; width: 100%;
  background: var(--bg2); border-radius: 10px;
  border: 1px solid var(--br2); box-shadow: 0 24px 80px rgba(0,0,0,.6);
  margin: auto;
  animation: modalIn .28s var(--ease) forwards;
}
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(10px) } to { opacity: 1; transform: none } }
.modal-img { width: 100%; max-height: 56vh; object-fit: cover; display: block; border-radius: 10px 10px 0 0 }
.modal-body { padding: 18px 22px 22px }
.modal-cat { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--acc2); margin-bottom: 5px }
.modal-title { font-size: 19px; font-weight: 600; color: var(--tx); letter-spacing: -.015em; margin-bottom: 6px }
.modal-desc { font-size: 14px; line-height: 1.65; color: var(--tx2); margin-bottom: 10px }
.modal-close {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(13,14,16,.72); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s; backdrop-filter: blur(4px);
}
.modal-close:hover { background: rgba(255,255,255,.14); color: #fff }

/* ── VIDEO MODAL ── */
.modal-video { width: 100%; aspect-ratio: 16/9; border-radius: 10px 10px 0 0; background: #000; display: block }

/* ── LEGAL PAGES ── */
.legal-content { max-width: 720px }
.legal-content h2 { font-size: clamp(17px,2.2vw,22px); font-weight: 600; letter-spacing: -.015em; color: var(--tx); margin: clamp(24px,4vw,36px) 0 8px }
.legal-content h2:first-child { margin-top: 0 }
.legal-content p { font-size: 14px; line-height: 1.82; color: var(--tx2); margin-bottom: 8px }
.legal-content p strong { color: var(--tx); font-weight: 500 }
.legal-content a { color: var(--acc2); transition: opacity .2s }
.legal-content a:hover { opacity: .72 }
.legal-content ul { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px }
.legal-content ul li { font-size: 14px; color: var(--tx2); display: flex; align-items: baseline; gap: 9px }
.legal-content ul li::before { content: '·'; color: var(--acc); flex-shrink: 0; font-size: 16px; line-height: 1 }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-menu { display: none }
  #hbg { display: flex }
  .foot-grid { grid-template-columns: 1fr; gap: 26px }
}
@media (max-width: 600px) {
  .foot-bar { flex-direction: column; align-items: flex-start }
  .modal-overlay { padding: 12px }
}

/* ═══════════════════════════════════════════════
   RH MEDIA – Navigation & Mobile Hotfix v5
   Fokus: stabile Navigation, saubere Mobile UX
═══════════════════════════════════════════════ */
:root { --nav-h: 72px; }
body { padding-top: var(--nav-h); }
body.menu-open { overflow: hidden; touch-action: none; }

#nav {
  height: var(--nav-h);
  padding: 0 clamp(16px, 4.5vw, 64px);
  background: rgba(13,14,16,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 42px rgba(0,0,0,.16);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
#nav.scrolled {
  background: rgba(13,14,16,.90);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 14px 42px rgba(0,0,0,.25);
}
[data-theme="light"] #nav {
  background: rgba(244,245,247,.82);
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 32px rgba(20,23,32,.08);
}
[data-theme="light"] #nav.scrolled {
  background: rgba(244,245,247,.94);
  border-bottom-color: rgba(0,0,0,.12);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}
#nav-logo {
  height: clamp(38px, 4.3vw, 54px);
  width: auto;
  max-width: min(250px, 42vw);
  object-fit: contain;
}
.nav-menu {
  gap: clamp(14px, 2.1vw, 28px);
  margin-left: auto;
  margin-right: clamp(12px, 2vw, 22px);
}
.nav-menu a {
  font-size: 13px;
  line-height: 1;
  padding: 12px 0;
  white-space: nowrap;
}
.nav-menu a[href="/"] { display: inline-flex; }
.nav-right { flex-shrink: 0; }
#hbg {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--br2);
  background: rgba(255,255,255,.03);
  transition: background .22s, border-color .22s, transform .22s;
}
#hbg:hover { background: var(--bg3); border-color: var(--acc-br); }
#hbg span { width: 21px; height: 2px; }
#hbg.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hbg.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: block;
  opacity: 0;
  pointer-events: none;
  background: rgba(5,6,8,.58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity .26s var(--ease);
}
#mobile-menu.open { opacity: 1; pointer-events: auto; }
.mm-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(390px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--br2);
  border-radius: 22px;
  background: rgba(19,21,25,.96);
  box-shadow: 0 24px 90px rgba(0,0,0,.52);
  transform: translateX(18px) scale(.98);
  transition: transform .28s var(--ease);
  overflow: auto;
}
#mobile-menu.open .mm-panel { transform: none; }
[data-theme="light"] .mm-panel { background: rgba(244,245,247,.97); box-shadow: 0 22px 70px rgba(20,23,32,.18); }
.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--br);
}
.mm-logo { height: 46px; width: auto; max-width: 210px; object-fit: contain; margin: 0; }
.mm-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--br2);
  color: var(--tx);
  background: var(--bg3);
  font-size: 28px;
  line-height: 1;
}
.mm-links {
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  gap: 6px;
}
#mobile-menu .mm-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: clamp(20px, 5.6vw, 30px);
  color: var(--tx2);
  background: transparent;
}
#mobile-menu .mm-links a::after {
  content: '→';
  opacity: .36;
  font-size: .72em;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
#mobile-menu .mm-links a:hover,
#mobile-menu .mm-links a.active {
  color: var(--tx);
  background: var(--bg3);
}
#mobile-menu .mm-links a:hover::after,
#mobile-menu .mm-links a.active::after { opacity: .8; transform: none; }
.mm-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 15px;
  background: var(--tx);
  color: var(--bg);
  font-size: 14px;
  font-weight: 650;
}

@media (max-width: 1040px) {
  .nav-menu { gap: 14px; }
  .nav-menu a { font-size: 12px; }
}
@media (max-width: 900px) {
  :root { --nav-h: 66px; }
  .nav-menu { display: none; }
  #hbg { display: flex; }
  #nav-logo { height: 42px; max-width: 220px; }
  .thm-wrap { gap: 4px; }
  .thm-ico { display: none; }
}
@media (max-width: 520px) {
  :root { --nav-h: 62px; }
  #nav { padding: 0 12px 0 14px; }
  #nav-logo { height: 36px; max-width: 190px; }
  #thm-btn { width: 42px; height: 24px; }
  #thm-btn::after { width: 18px; height: 18px; }
  [data-theme="light"] #thm-btn::after { left: 20px; }
  #hbg { width: 40px; height: 40px; }
  .nav-right { gap: 8px; }
  .mm-panel { inset: 8px; width: auto; border-radius: 20px; }
  .mm-logo { height: 40px; max-width: 190px; }
  .mm-close { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  #nav-logo { height: 32px; max-width: 155px; }
  .nav-right { gap: 6px; }
}


/* ═══════════════════════════════════════════════
   RH MEDIA – v6 Fixes: Home-Nav, Lightmode, Modal, Logo
═══════════════════════════════════════════════ */
body.home-page { padding-top: 0; }
#nav.home-top {
  transform: translateY(-115%);
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}
#nav {
  transform: translateY(0);
  opacity: 1;
  transition: transform .34s var(--ease), opacity .24s, background .34s var(--ease), border-color .34s, box-shadow .34s;
}
#nav-logo { height: clamp(52px, 5.4vw, 78px); max-width: min(310px, 46vw); }
.foot-logo { height: clamp(54px, 6vw, 78px); max-width: 280px; width: auto; object-fit: contain; }
.mm-logo { height: 56px; max-width: 240px; }
.thm-ico { font-size: 13px; opacity: .74; }
#thm-btn { background: linear-gradient(90deg, #23262d, #d8dbe2); }
[data-theme="light"] #thm-btn { background: linear-gradient(90deg, #23262d, #d8dbe2); }

[data-theme="light"] {
  --tx: #11141b;
  --tx2: #2f3544;
  --tx3: #596173;
  --bg: #f7f8fa;
  --bg2: #ffffff;
  --bg3: #eef1f5;
  --bg4: #e0e5ed;
}
[data-theme="light"] .sec-sub,
[data-theme="light"] .page-hero-sub,
[data-theme="light"] .t-desc,
[data-theme="light"] .modal-desc,
[data-theme="light"] .foot-tag,
[data-theme="light"] .foot-ci,
[data-theme="light"] .legal-content p,
[data-theme="light"] .field label { color: #303746; }
[data-theme="light"] .page-hero { background: linear-gradient(180deg,#fff,#f1f3f7); }
[data-theme="light"] .card,
[data-theme="light"] .teaser-card,
[data-theme="light"] .pc,
[data-theme="light"] .calc,
[data-theme="light"] .price-hints-box,
[data-theme="light"] .ub-cv,
[data-theme="light"] .gear-box { background: #fff; }
[data-theme="light"] .pb-img { filter: brightness(.72) saturate(.82); }

.modal-overlay { z-index: 5000; padding: clamp(14px, 3vw, 34px); overflow: auto; }
.modal-inner { max-height: min(86vh, 820px); overflow: auto; }
.modal-img { max-height: 48vh; object-fit: contain; background: #07080a; }
.modal-video { max-height: 62vh; object-fit: contain; }
body.modal-open { overflow: hidden !important; }

@media (max-width: 900px) {
  #nav-logo { height: 50px; max-width: 240px; }
  .foot-logo { height: 58px; }
}
@media (max-width: 520px) {
  #nav-logo { height: 42px; max-width: 205px; }
  .mm-logo { height: 46px; max-width: 205px; }
}


/* ═══════════════════════════════════════════════
   RH MEDIA – v7 fixes: home nav, theme toggle, modal centering, light image mode
═══════════════════════════════════════════════ */
@media (min-width:901px) {
  body.home-page { padding-top: 0; }
  body.home-page #nav.home-top {
    opacity: 0;
    transform: translateY(-110%);
    pointer-events: none;
  }
  body.home-page #nav.scrolled,
  body.home-page #nav:not(.home-top) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
@media (max-width:900px) {
  body.home-page { padding-top: var(--nav-h); }
  body.home-page #nav { opacity:1; transform:none; pointer-events:auto; }
}
#nav { transform: translateY(0); will-change: transform, opacity; transition: transform .32s var(--ease), opacity .32s var(--ease), background .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease); }

/* Clean, reliable light/dark switch */
.thm-wrap { gap: 8px; align-items: center; }
.thm-ico { font-size: 16px; color: var(--tx3); opacity: .75; display:inline-flex; align-items:center; line-height:1; }
#thm-btn {
  width: 58px !important;
  height: 30px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  border: 1px solid var(--br2) !important;
  background: linear-gradient(90deg, #1b1e25, #3a3e49) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.32), 0 2px 12px rgba(0,0,0,.12);
}
#thm-btn::after {
  top: 3px !important;
  left: 3px !important;
  width: 24px !important;
  height: 24px !important;
  background: #d3ad58 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
[data-theme="light"] #thm-btn {
  background: linear-gradient(90deg, #dfe3ea, #f7f8fa) !important;
}
[data-theme="light"] #thm-btn::after { left: 30px !important; background: #c8a45a !important; }
[data-theme="dark"] .thm-ico:first-child { color: var(--acc2); opacity: 1; }
[data-theme="light"] .thm-ico:last-child { color: var(--acc); opacity: 1; }

/* Light mode image readability: brighter, less gloomy */
[data-theme="light"] .pb-img,
[data-theme="light"] .proj-img,
[data-theme="light"] .web-ref-preview,
[data-theme="light"] .about-img img {
  filter: brightness(.90) saturate(.90) contrast(.98) !important;
}
[data-theme="light"] .proj-always { background: linear-gradient(to top, rgba(255,255,255,.88) 0%, rgba(255,255,255,.08) 100%); }
[data-theme="light"] .proj-name { color:#10131b; text-shadow:0 1px 14px rgba(255,255,255,.75); }

/* Reference modal: center in viewport, not page content */
#ref-modal, .modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  width: 100vw !important;
  height: 100vh !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(14px, 3vw, 32px) !important;
  overflow: hidden !important;
}
#ref-modal.open, .modal-overlay.open { display:flex !important; }
.ref-modal-inner, .modal-inner {
  margin: auto !important;
  max-height: calc(100vh - 64px) !important;
  overflow: auto !important;
  transform-origin: center center !important;
}
.ref-modal-media, .modal-img { object-fit: contain !important; background:#07080a; max-height:58vh !important; }
body.modal-open { overflow:hidden !important; }

/* Contact privacy checkbox */
.privacy-check {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid var(--br);
  border-radius:var(--r);
  background:var(--bg2);
  font-size:12px;
  color:var(--tx2);
  line-height:1.5;
}
.privacy-check input {
  width:18px;
  height:18px;
  margin-top:1px;
  appearance:auto;
  -webkit-appearance: checkbox;
  accent-color: var(--acc);
  flex-shrink:0;
}
.privacy-check a { color:var(--acc2); }

/* Footer logo slightly larger */
.foot-logo { height: clamp(60px, 7vw, 92px) !important; width:auto; object-fit:contain; }


/* ═══════════════════════════════════════════════
   RH MEDIA – v8 final polish
   Fokus: stabile Navigation, Premium-Look, Mobile, Modal, Lightmode
═══════════════════════════════════════════════ */
:root { --nav-h: 76px; --gold-glow: 0 0 38px rgba(200,164,90,.22); }
body { min-height:100vh; }
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 16% 8%, rgba(200,164,90,.11), transparent 32vw),
    radial-gradient(circle at 92% 18%, rgba(150,170,210,.06), transparent 28vw),
    radial-gradient(circle at 50% 110%, rgba(200,164,90,.09), transparent 40vw);
  opacity:.9;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(circle at 18% 7%, rgba(200,164,90,.16), transparent 34vw),
    radial-gradient(circle at 95% 18%, rgba(80,105,160,.08), transparent 30vw),
    radial-gradient(circle at 50% 108%, rgba(200,164,90,.12), transparent 42vw);
}

/* Navigation – robust */
#nav {
  min-height: var(--nav-h) !important;
  height: var(--nav-h) !important;
  z-index: 9999 !important;
  padding: 0 clamp(18px,4.5vw,70px) !important;
  background: rgba(13,14,16,.62) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.14);
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}
#nav.scrolled {
  background: rgba(13,14,16,.88) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.34);
}
[data-theme="light"] #nav {
  background: rgba(247,248,250,.68) !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 30px rgba(25,30,40,.08);
}
[data-theme="light"] #nav.scrolled {
  background: rgba(247,248,250,.94) !important;
  box-shadow: 0 16px 42px rgba(25,30,40,.12);
}
@media (min-width:901px) {
  body.home-page { padding-top:0 !important; }
  body.home-page #nav.home-top:not(.scrolled) {
    opacity:0 !important; transform:translateY(-105%) !important; pointer-events:none !important;
  }
  body.home-page #nav.scrolled,
  body:not(.home-page) #nav {
    opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important;
  }
}
@media (max-width:900px) {
  :root { --nav-h: 68px; }
  body.home-page { padding-top: var(--nav-h) !important; }
  #nav, body.home-page #nav, body.home-page #nav.home-top {
    opacity:1 !important; transform:none !important; pointer-events:auto !important;
  }
}
#nav-logo { height: clamp(58px, 5vw, 86px) !important; max-width: 330px !important; object-fit:contain; filter: drop-shadow(0 3px 18px rgba(0,0,0,.24)); }
@media (max-width:900px) { #nav-logo { height: 48px !important; max-width: 215px !important; } }
@media (max-width:420px) { #nav-logo { height: 42px !important; max-width: 178px !important; } }
.nav-menu a { font-size:14px !important; }
.nav-menu a::after { height:2px !important; bottom:-7px !important; }
.nav-right { gap:12px !important; }

/* Theme switch – clean pill */
.thm-wrap { gap:7px !important; padding:5px 7px; border:1px solid var(--br); border-radius:999px; background:rgba(255,255,255,.035); }
[data-theme="light"] .thm-wrap { background:rgba(0,0,0,.035); }
.thm-ico { font-size:15px !important; line-height:1 !important; width:16px; text-align:center; }
#thm-btn { width:54px !important; height:28px !important; border-radius:999px !important; overflow:hidden; }
#thm-btn::after { width:22px !important; height:22px !important; top:2px !important; left:3px !important; }
[data-theme="light"] #thm-btn::after { left:27px !important; }
@media(max-width:520px){ .thm-wrap{padding:4px 5px}.thm-ico{display:none!important} #thm-btn{width:48px!important;height:26px!important} #thm-btn::after{width:20px!important;height:20px!important} [data-theme="light"] #thm-btn::after{left:25px!important} }

/* Hero WOW */
#hero { isolation:isolate; }
#hero::before, #hero::after {
  content:""; position:absolute; border-radius:999px; pointer-events:none; z-index:1; filter: blur(2px);
  background: radial-gradient(circle, rgba(219,185,110,.26), transparent 62%);
  animation: floatOrb 8s ease-in-out infinite alternate;
}
#hero::before { width:28vw; height:28vw; min-width:220px; min-height:220px; left:-8vw; top:15vh; }
#hero::after { width:22vw; height:22vw; min-width:180px; min-height:180px; right:-7vw; bottom:11vh; animation-delay:-2.5s; }
@keyframes floatOrb { from{transform:translate3d(0,0,0) scale(.95); opacity:.45} to{transform:translate3d(22px,-28px,0) scale(1.08); opacity:.75} }
#hero-bg { filter:brightness(.48) saturate(.78) contrast(1.03) !important; transform:scale(1.08); }
[data-theme="light"] #hero-bg { filter:brightness(1.02) saturate(.86) contrast(.98) !important; }
#hero-logo { filter: drop-shadow(0 10px 44px rgba(0,0,0,.48)) drop-shadow(0 0 30px rgba(200,164,90,.16)) !important; }
.h-title { text-wrap:balance; }
.h-sub { text-wrap:balance; }
.btn { position:relative; overflow:hidden; }
.btn::before { content:""; position:absolute; top:-40%; bottom:-40%; left:-75%; width:46%; transform:rotate(18deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transition:left .7s var(--ease); pointer-events:none; }
.btn:hover::before { left:130%; }

/* Premium cards / sections */
.teaser-card, .pc, .proj-card, .web-ref-card, .k-item, .k-form, .price-hints-box, .calc, .ub-cv, .gear-box {
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
}
.teaser-card:hover, .pc:hover, .proj-card:hover, .web-ref-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.20), var(--gold-glow);
}
[data-theme="light"] .teaser-card:hover, [data-theme="light"] .pc:hover, [data-theme="light"] .proj-card:hover, [data-theme="light"] .web-ref-card:hover {
  box-shadow: 0 18px 44px rgba(23,29,43,.13), 0 0 34px rgba(200,164,90,.15);
}
.section { position:relative; }
.section::before { content:""; position:absolute; left:clamp(18px,5vw,64px); right:clamp(18px,5vw,64px); top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(200,164,90,.26), transparent); opacity:.55; }

/* Page heroes and light-mode photos */
.page-hero { position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; inset:auto -8% -38% auto; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(200,164,90,.18), transparent 66%); pointer-events:none; }
[data-theme="light"] .pb-img,
[data-theme="light"] .proj-img,
[data-theme="light"] .web-ref-preview,
[data-theme="light"] .about-img img,
[data-theme="light"] .ub-photo img {
  filter: brightness(1.04) saturate(.92) contrast(.96) !important;
}
[data-theme="light"] .pb-overlay { background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,.02), rgba(255,255,255,.28)) !important; }
[data-theme="light"] .pb-title { color:#11151d; text-shadow:0 2px 18px rgba(255,255,255,.72); }

/* Modal – absolute viewport center */
#ref-modal, .modal-overlay {
  position: fixed !important; inset:0 !important; width:100dvw !important; height:100dvh !important;
  display:none; align-items:center !important; justify-content:center !important;
  padding: max(16px, 3vw) !important; z-index: 2147483000 !important; overflow:hidden !important;
}
#ref-modal.open, .modal-overlay.open { display:flex !important; }
.ref-modal-inner, .modal-inner {
  position:relative !important; margin:0 !important; inset:auto !important;
  width:min(920px, calc(100dvw - 32px)) !important; max-height:calc(100dvh - 32px) !important;
  overflow:auto !important; transform-origin:center center !important;
}
.ref-modal-video, .modal-video { max-height:58dvh !important; }
.ref-modal-media, .modal-img { max-height:58dvh !important; object-fit:contain !important; background:#07080a !important; }
body.modal-open { overflow:hidden !important; }

/* Prices – friendlier, lower-entry visual */
.price-grid { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)) !important; gap:16px !important; }
.pc { border-radius:18px !important; background:linear-gradient(160deg,var(--bg2),var(--bg3)) !important; }
.pc-price { color:var(--acc2) !important; }
.price-hints-box .bankish, .payment-info, .bank-info { display:none !important; }

/* Footer */
.foot-logo { height: clamp(72px, 8vw, 106px) !important; max-width:330px !important; }
.foot-legal { display:flex; flex-wrap:wrap; gap:14px !important; align-items:center; }
.foot-admin-link { opacity:.58; font-size:11px !important; letter-spacing:.05em; }
.foot-admin-link:hover { opacity:1; color:var(--acc2)!important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media (max-width:760px) {
  .section { padding-top: clamp(48px, 10vw, 74px) !important; padding-bottom: clamp(48px, 10vw, 74px) !important; }
  .page-hero-title { font-size: clamp(32px, 10vw, 50px) !important; }
  .foot-grid { grid-template-columns:1fr !important; gap:28px !important; }
  .foot-bar { gap:12px; flex-direction:column; align-items:flex-start !important; }
  .ref-modal-inner, .modal-inner { width:calc(100dvw - 24px) !important; max-height:calc(100dvh - 24px) !important; }
}


/* ═══════════════════════════════════════════════
   RH MEDIA – v9 FINAL
   Mobile centering, nav polish, hero premium,
   modal perfect center, contact, footer
═══════════════════════════════════════════════ */

/* ── MOBILE: center everything properly ── */
@media (max-width: 700px) {
  /* Hero */
  #hero-c { align-items: center; text-align: center; padding: 0 20px; }
  .h-tag, .h-title, .h-sub { text-align: center; width: 100%; }
  .h-btns { justify-content: center; flex-direction: column; align-items: center; width: 100%; }
  .h-btns .btn { width: min(280px, 85vw); justify-content: center; }
  .scue { left: 50%; transform: translateX(-50%); }

  /* Stats */
  .stats { grid-template-columns: repeat(2,1fr); }
  .stat { border-right: 1px solid var(--br); }
  .stat:nth-child(2), .stat:nth-child(4) { border-right: none; }
  .stat:nth-child(3) { border-top: 1px solid var(--br); }
  .stat:nth-child(4) { border-top: 1px solid var(--br); }

  /* Teaser grid */
  .teaser-grid { grid-template-columns: 1fr; gap: 1px; }
  .teaser-card { text-align: left; }

  /* About section */
  .about-grid { grid-template-columns: 1fr; gap: clamp(20px,5vw,32px); }
  .about-img { width: min(200px, 55vw); margin: 0 auto; aspect-ratio: 1/1; max-width: 200px; }
  .about-grid > .rv-right { text-align: center; }
  .about-grid > .rv-right .sec-label,
  .about-grid > .rv-right .sec-title,
  .about-grid > .rv-right p { text-align: center; }
  .about-grid > .rv-right .btn { margin: 0 auto; }

  /* Section headers */
  .section > .wrap > .sec-label,
  .section > .wrap > .sec-title,
  .section > .wrap > .sec-sub { text-align: center; }
  .section > .wrap > .sec-sub { margin-left: auto; margin-right: auto; }

  /* CTA section */
  .section[style*="text-align:center"] .btn,
  [style*="text-align:center"] .btn { width: min(280px, 85vw); }

  /* Page hero */
  .page-hero-label, .page-hero-title, .page-hero-sub { text-align: center; }
  .page-hero-sub { margin-left: auto; margin-right: auto; }
  .ref-filters { justify-content: center; }

  /* Leistungen rows */
  .svc-row { grid-template-columns: 1fr; gap: 16px; padding: clamp(18px,4vw,28px); }
  .svc-meta { flex-direction: row; align-items: center; gap: 12px; }
  .svc-ref { max-width: 100%; width: 100%; }

  /* Referenzen */
  .proj-grid { grid-template-columns: 1fr; }
  .proj-card.wide, .proj-card.narrow { grid-column: span 1; min-height: 200px !important; }
  .web-ref { grid-template-columns: 1fr; }
  .web-ref-preview { height: 70px; border-right: none; border-bottom: 1px solid var(--br); }

  /* Preise */
  .p-tabs { flex-direction: column; }
  .ptab { text-align: left; border-bottom: none; border-left: 2px solid transparent; }
  .ptab.on { border-left-color: var(--acc); }
  .price-grid { grid-template-columns: 1fr 1fr !important; }
  .calc-opts { flex-direction: column; }
  .copt { width: 100%; }
  .calc-ft { flex-direction: column; align-items: stretch; }
  .calc-actions { align-items: stretch; }
  .calc-actions .btn { width: 100%; justify-content: center; }
  .calc-hint { text-align: center; max-width: 100%; }

  /* Über mich */
  .ub-grid { grid-template-columns: 1fr; }
  .ub-photo { width: min(180px, 55vw); aspect-ratio: 1/1; margin: 0 auto; }
  .ub-name, .ub-role, .ub-div { text-align: center; }
  .ub-div { margin-left: auto; margin-right: auto; }
  .ub-text p { text-align: left; }
  .ub-chips { justify-content: center; }
  .gear-grid { grid-template-columns: 1fr 1fr; }
  .ub-cv-row { gap: 10px; }

  /* Kontakt */
  .k-grid { grid-template-columns: 1fr; }
  .k-info { text-align: center; align-items: center; }
  .k-item { align-items: center; }
  .k-soc { justify-content: center; }
  .k-note strong { text-align: center; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .foot-tag { margin: 4px auto 0; }
  .foot-links { align-items: center; }
  .foot-ci { justify-content: center; }
  .foot-bar { flex-direction: column; align-items: center; text-align: center; }
  .foot-legal { justify-content: center; }

  /* Legal pages */
  .legal-content h2 { font-size: clamp(16px,4vw,20px); }
}

/* ── Very small phones ── */
@media (max-width: 420px) {
  .price-grid { grid-template-columns: 1fr !important; }
  .gear-grid { grid-template-columns: 1fr; }
  .h-title { font-size: clamp(22px, 7vw, 30px); }
}

/* ── NAV: smooth hide/show on homepage only (desktop) ── */
@media (min-width: 901px) {
  body.home-page #nav {
    transition: transform .38s cubic-bezier(.4,0,.2,1),
                opacity .3s ease,
                background .32s cubic-bezier(.4,0,.2,1),
                border-color .32s cubic-bezier(.4,0,.2,1),
                box-shadow .32s cubic-bezier(.4,0,.2,1) !important;
  }
  body.home-page #nav.home-top:not(.scrolled) {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }
  body.home-page #nav.scrolled {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* ── Subpages: nav always visible, no flicker ── */
body:not(.home-page) #nav {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ── HERO: enhanced cinematic look ── */
#hero-c { max-width: 860px; }
.h-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border: 1px solid rgba(200,164,90,.28);
  border-radius: 20px; background: rgba(200,164,90,.07);
  font-size: clamp(9px,1.2vw,11px); letter-spacing: .2em;
  color: var(--acc2); margin-bottom: clamp(16px,2.5vw,26px);
}
.h-title {
  font-size: clamp(28px,5vw,58px) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  background: linear-gradient(135deg, var(--tx) 0%, rgba(219,185,110,.9) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
[data-theme="light"] .h-title {
  background: linear-gradient(135deg, #11141b 0%, #8a6820 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.h-sub {
  font-size: clamp(14px,1.6vw,17px) !important;
  color: var(--tx2) !important;
  -webkit-text-fill-color: var(--tx2) !important;
}

/* Scroll indicator more refined */
.scue-t { letter-spacing: .32em; font-size: 8px; }
.scue-l { width: 1px; height: 36px; }

/* ── MODAL: absolutely guaranteed viewport center ── */
#ref-modal {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  z-index: 2147483646 !important;
  background: rgba(8,9,11,.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
#ref-modal.open { display: flex !important; animation: modalBgIn .22s ease forwards; }
.ref-modal-inner {
  position: relative !important;
  top: auto !important; left: auto !important;
  margin: 0 !important;
  width: min(880px, calc(100vw - 28px)) !important;
  max-height: min(92vh, 820px) !important;
  overflow-y: auto !important;
  border-radius: 12px !important;
  animation: modalSlideUp .28s cubic-bezier(.16,1,.3,1) forwards !important;
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: scale(.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.ref-modal-close {
  position: absolute !important; top: 14px !important; right: 14px !important;
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  background: rgba(13,14,16,.8) !important; border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.8) !important; font-size: 20px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; transition: all .2s !important; z-index: 2 !important;
  backdrop-filter: blur(4px) !important;
}
.ref-modal-close:hover {
  background: rgba(255,255,255,.16) !important; color: #fff !important;
}
body.modal-open { overflow: hidden !important; }

/* ── VIDEO in modal ── */
.ref-modal-video {
  width: 100% !important; aspect-ratio: 16/9 !important;
  background: #000 !important; display: block !important;
  border-radius: 12px 12px 0 0 !important; max-height: 62vh !important;
}
.ref-modal-media {
  width: 100% !important; display: block !important;
  border-radius: 12px 12px 0 0 !important;
  max-height: 58vh !important; object-fit: contain !important;
  background: #07080a !important;
}

/* ── THEME TOGGLE refined ── */
.thm-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--br2) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.04) !important;
  cursor: pointer;
}
[data-theme="light"] .thm-wrap { background: rgba(0,0,0,.04) !important; }
.thm-ico {
  font-size: 14px !important;
  line-height: 1 !important;
  width: 18px !important;
  text-align: center !important;
  user-select: none;
  transition: opacity .25s, color .25s;
  opacity: .5;
}
[data-theme="dark"] .thm-ico:first-child { opacity: .9; color: var(--acc2) !important; }
[data-theme="light"] .thm-ico:last-child { opacity: .9; color: var(--acc) !important; }
#thm-btn {
  width: 44px !important; height: 24px !important;
  border-radius: 999px !important; border: none !important;
  background: var(--bg4) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3) !important;
  position: relative; cursor: pointer;
  flex-shrink: 0;
}
#thm-btn::after {
  content: '' !important; position: absolute !important;
  top: 3px !important; left: 3px !important;
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
  background: var(--acc) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.24) !important;
  transition: left .24s cubic-bezier(.4,0,.2,1) !important;
}
[data-theme="light"] #thm-btn::after { left: 23px !important; }

/* ── PREMIUM CARDS: better depth ── */
.teaser-card {
  border-radius: 12px !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s, background .22s, border-color .28s !important;
}
.teaser-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.22), 0 0 0 1px rgba(200,164,90,.18) !important;
}

/* ── FOOTER improved ── */
.foot-logo {
  height: clamp(52px, 6.5vw, 80px) !important;
  max-width: min(280px, 56vw) !important;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 700px) { .foot-logo { margin: 0 auto; } }

/* ── CONTACT: better inputs ── */
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: 0 0 0 3px rgba(200,164,90,.14) !important;
}
.k-form { gap: 14px !important; }
.privacy-check {
  border-color: var(--br2) !important;
  border-radius: var(--r) !important;
  transition: border-color .2s !important;
}
.privacy-check:focus-within { border-color: var(--acc) !important; }

/* ── SAFE AREA for mobiles with notch ── */
@supports (padding: max(0px)) {
  #nav { padding-left: max(clamp(18px,5vw,64px), env(safe-area-inset-left)) !important; padding-right: max(clamp(18px,5vw,64px), env(safe-area-inset-right)) !important; }
  .wrap { padding-left: max(clamp(18px,5vw,64px), env(safe-area-inset-left)); padding-right: max(clamp(18px,5vw,64px), env(safe-area-inset-right)); }
}