/* ==========================================================================
   ZEITPUNKTE – Public Object View (object-view.css)
   Clean + consistent (Classic / Modern / Hyper)
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root{
  --accent-classic:#2563eb;
  --accent-modern:#38bdf8;
  --accent-hyper:#a855f7;

  /* Language switch position + sizing */
  --lang-top: 8px;            /* kleiner = höher */
  --lang-right: 16px;
  --lang-btn-w: 28px;
  --lang-btn-h: 24px;
  --lang-font: 10px;

  /* Push hero media down (Wischfoto tiefer) */
  --hero-media-top-gap: 22px;
}

@media (max-width: 420px){
  :root{
    --lang-top: 6px;
    --lang-btn-w: 26px;
    --lang-btn-h: 22px;
    --lang-font: 13px;
    --hero-media-top-gap: 18px;
  }
}

/* ---------- Base Reset ---------- */
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.page{
  min-height:100vh;
  padding:16px;
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  border-radius:22px;
  overflow:hidden;
}

/* ---------- Hero Layout ---------- */
.hero{
  position:relative;
  display:grid;
  gap:18px;
  padding:18px 18px 16px;
}

.hero-media{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#000;
  margin-top: var(--hero-media-top-gap);
}

.hero-media img,
.hero-media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-content{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8rem;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  backdrop-filter:blur(6px);
}

.hero-title{
  margin:0;
  font-size:1.7rem;
  line-height:1.2;
}

.hero-subtitle{
  margin:0;
  font-size:1rem;
  font-weight:500;
  opacity:.9;
}

.hero-hook{
  margin:4px 0 0;
  font-size:.98rem;
  font-weight:500;
}

.hero-short{
  margin:4px 0 0;
  font-size:.95rem;
  opacity:.9;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.read-hint{
  font-size:.8rem;
  opacity:.75;
}

/* ---------- Language Switch (compact) ---------- */
.lang-switch{
  position:absolute;
  top: var(--lang-top);
  right: var(--lang-right);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:50;
}

.lang-switch-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--lang-btn-w);
  height: var(--lang-btn-h);
  border-radius:10px;
  background:rgba(15,23,42,.45);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  text-decoration:none;
  font-size: var(--lang-font);
  line-height:1;
  backdrop-filter:blur(8px);
  user-select:none;
}

.lang-switch-btn.active{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
}

/* ---------- Vorher/Heute Compare Slider (Hero) ----------
   Matches your Blade markup:
   .compare-slider-wrapper > .ba-img(.ba-before) + #heroCompareAfter(.ba-after-wrapper) > .ba-img.ba-after
   + #heroCompareHandle(.ba-handle) ...
--------------------------------------------------------- */
.compare-slider-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:22px;
  background:#000;
  cursor: ew-resize;
}

.ba-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ba-before{ z-index:1; }

.ba-after-wrapper{
  position:absolute;
  inset:0;
  width:50%;
  overflow:hidden;
  z-index:2;
}

.ba-after{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ba-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ba-handle-line{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.85);
}

.ba-handle-circle{
  position:relative;
  width:40px;
  height:40px;
  border-radius:999px;
  border:2px solid #fff;
  background:rgba(15,23,42,.9);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  box-shadow:0 0 8px rgba(0,0,0,.8);
}

.slider-label{
  position:absolute;
  top:12px;
  padding:4px 10px;
  background:rgba(0,0,0,.65);
  color:#fff;
  border-radius:6px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  pointer-events:none;
  backdrop-filter:blur(4px);
  z-index:4;
}
.slider-label.left{ left:12px; }
.slider-label.right{ right:12px; }


/* Aha: Scroll = Zeitreise (Hint-Pill im Compare-Slider) */
.slider-hint{
  position:absolute;
  left:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  pointer-events:none;
  user-select:none;
  backdrop-filter:blur(4px);
  z-index:5;
  opacity:1;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease;
}
.slider-hint .hint-emoji{ font-size:1rem; line-height:1; }
.slider-hint.is-dim{ opacity:0.55; }
.slider-hint.is-hidden{
  opacity:0;
  transform:translateY(6px);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 13px;
  border-radius:999px;
  border:none;
  font-size:.88rem;
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
}
.btn span{ font-size:1.1rem; }
.btn:active{ transform:scale(.97); }

.btn-primary{ background:#2563eb; color:#fff; }
.btn-ghost{ background:transparent; }

/* ---------- Content Layout ---------- */
.content{
  display:grid;
  gap:18px;
  padding:0 18px 20px 18px;
}

.content-main,
.content-side{
  border-radius:14px;
  padding:14px 16px 16px;
}

.section-title{
  font-size:1rem;
  margin:0 0 8px;
}

.text-block{
  font-size:.96rem;
  line-height:1.5;
  margin:0 0 10px;
}
.text-block + .text-block{ margin-top:2px; }

.badge-heading{
  font-size:.8rem;
  letter-spacing:.06em;
  opacity:.7;
  margin-bottom:4px;
  font-weight:700;
}

.grid-two{
  display:grid;
  gap:14px;
}

.info-list{
  list-style:none;
  padding:0;
  margin:6px 0 0;
  font-size:.9rem;
}
.info-list li{
  display:flex;
  gap:6px;
  margin-bottom:4px;
}
.info-label{
  opacity:.7;
  min-width:70px;
}

footer.page-footer{
  padding:10px 18px 18px;
  font-size:.8rem;
  opacity:.7;
  text-align:center;
}

/* ---------- Gallery Slider ---------- */
.gallery-slider-wrapper{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 4px;
}
.gallery-slider-nav{
  border:none;
  background:#1f2937;
  color:#f9fafb;
  border-radius:999px;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.2rem;
}
.gallery-slider-nav:disabled{
  opacity:.35;
  cursor:default;
}
.gallery-slider{
  flex:1;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.4);
  background:#020617;
}
.gallery-slider-track{
  display:flex;
  transition:transform .3s ease;
}
.gallery-slide{
  min-width:100%;
  padding:6px;
  cursor:pointer;
}
.gallery-slide-inner{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#000;
}
.gallery-slide img,
.gallery-slide video{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.gallery-slide.video-slide::after{
  content:"▶";
  position:absolute;
  inset:auto 8px 8px auto;
  font-size:1.1rem;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(15,23,42,.85);
  color:#f9fafb;
}
.gallery-counter{
  font-size:.78rem;
  opacity:.8;
  text-align:right;
  margin-bottom:6px;
}
.gallery-thumbs{
  display:flex;
  gap:6px;
  margin-top:4px;
  overflow-x:auto;
  padding-bottom:4px;
}
.gallery-thumb{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.6);
  cursor:pointer;
  opacity:.7;
  position:relative;
  transition:opacity .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.gallery-thumb img,
.gallery-thumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery-thumb.video-thumb::after{
  content:"▶";
  position:absolute;
  inset:auto 4px 4px auto;
  font-size:.7rem;
  padding:1px 4px;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  color:#f9fafb;
}
.gallery-thumb.is-active{
  opacity:1;
  border-color:#fbbf24;
  box-shadow:0 0 0 1px rgba(251,191,36,.8);
  transform:scale(1.02);
}

/* ---------- Route Navigation (matches your Blade: .route-btn / .route-btn-full) ---------- */
.route-nav{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid rgba(148,163,184,.35);
}
.route-nav-heading{
  font-size:1rem;
  font-weight:700;
  margin:0 0 12px;
}
.route-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  margin-bottom:10px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  transition:background .2s, transform .1s, box-shadow .2s;
  text-decoration:none;
  color:#333;
}
.route-btn:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}
.route-btn-full{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin-top:8px;
  margin-bottom:24px;
  padding:12px;
  border:2px solid #e5e7eb;
  border-radius:8px;
  background:#f3f4f6;
  text-decoration:none;
  color:#1f2937;
  transition:all .2s;
}
.route-btn-full:hover{
  background:#e5e7eb;
  border-color:#d1d5db;
  transform:translateY(-1px);
}
.route-icon{ font-size:1.2rem; }
.route-label{
  display:flex;
  flex-direction:column;
  font-weight:600;
  font-size:.9rem;
  line-height:1.2;
}
.route-sub{
  font-size:.75rem;
  color:#6b7280;
  font-weight:400;
  margin-top:2px;
}

/* ---------- Sponsor card (side) ---------- */
.sponsor-card{
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:16px;
  margin-top:24px;
  margin-bottom:24px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.3);
  text-align:center;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.sponsor-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:rgba(255,255,255,.7);
  margin-bottom:8px;
  font-weight:600;
}
.sponsor-name{
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  margin-bottom:12px;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.btn-voucher-open{
  display:inline-block;
  background:#16a34a;
  color:#fff;
  border:none;
  cursor:pointer;
  padding:10px 20px;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:transform .1s, background .2s;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
}
.btn-voucher-open:hover{ background:#15803d; transform:translateY(-2px); }
.btn-voucher-open:active{ transform:translateY(0); }

/* ---------- Voucher Overlay ---------- */
.voucher-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  z-index:9999;
  display:none;               /* JS setzt auf flex */
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(5px);
}

.voucher-box{
  background:#fff;
  width:100%;
  max-width:360px;
  border-radius:16px;
  padding:30px 24px;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.voucher-close{
  position:absolute;
  top:10px;
  right:10px;
  background:#f3f4f6;
  border:none;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  color:#6b7280;
  display:flex;
  align-items:center;
  justify-content:center;
}

.voucher-step{
  display:none;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.voucher-title{
  font-size:1.2rem;
  font-weight:700;
  margin:0 0 4px;
  color:#1f2937;
}

.voucher-text,
.voucher-success-text{
  color:#6b7280;
  font-size:0.9rem;
  margin:0 0 20px;
}

.swipe-container{
  position:relative;
  width:100%;
  max-width:280px;
  height:60px;
  background:#e5e7eb;
  border-radius:999px;
  margin:24px auto 0 auto;
  overflow:hidden;
  user-select:none;
  touch-action:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);
}

.swipe-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.9rem;
  font-weight:600;
  color:#6b7280;
  pointer-events:none;
  padding-left:40px;
  z-index:1;
}

.swipe-btn{
  position:absolute;
  left:4px;
  top:4px;
  bottom:4px;
  width:52px;
  background:#2563eb;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.5rem;
  cursor:grab;
  z-index:3;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
  transform:translateX(0);
}

.swipe-bg{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:#dbeafe;
  z-index:2;
}

.voucher-success{
  display:none;
  flex-direction:column;
  align-items:center;
  animation:fadeIn 0.5s ease;
  width:100%;
}

.success-icon{
  width:80px;
  height:80px;
  background:#dcfce7;
  color:#166534;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  margin-bottom:16px;
}

.countdown{
  font-size:2.5rem;
  font-weight:800;
  color:#166534;
  margin:10px 0;
  font-variant-numeric:tabular-nums;
}

.valid-badge{
  background:#16a34a;
  color:#fff;
  padding:4px 12px;
  border-radius:4px;
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  animation:pulse 2s infinite;
}

.voucher-sponsor-link{
  display:block;
  margin-top:20px;
  color:#2563eb;
  font-size:0.9rem;
  text-decoration:underline;
}
.voucher-sponsor-link:hover{ text-decoration:none; }

@keyframes fadeIn{
  from{ opacity:0; transform:scale(0.95); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes pulse{
  0%{ opacity:1; }
  50%{ opacity:0.7; }
  100%{ opacity:1; }
}

/* ---------- Lightbox ---------- */
.media-viewer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.82);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.media-viewer{
  position:relative;
  max-width:90vw;
  max-height:90vh;
}
.media-viewer-content img,
.media-viewer-content video{
  max-width:100%;
  max-height:90vh;
  border-radius:12px;
  display:block;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  background:#000;
}
.media-viewer-close{
  position:absolute;
  top:-12px;
  right:-12px;
  border:none;
  border-radius:999px;
  width:32px;
  height:32px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f9fafb;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}

/* ---------- Responsive ---------- */
@media (min-width: 800px){
  .hero{
    grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr);
  }
  .content{
    grid-template-columns:minmax(0,1.7fr) minmax(0,1.1fr);
  }
}

@media (max-width: 799px){
  .hero{ grid-template-columns: minmax(0,1fr); }
  .content{ grid-template-columns: minmax(0,1fr); }
  .gallery-slide img,
  .gallery-slide video{ height:190px; }
}

/* ==========================================================================
   THEMES
   ========================================================================== */

/* ---------- Classic Theme ---------- */
body.view-classic{
  background:radial-gradient(circle at 15% 0,#7f1d1d 0,#991b1b 25%,#450a0a 55%,#020617 90%);
  color:#fef2f2;
}

.view-classic .wrap{
  background:linear-gradient(135deg, rgba(24,10,10,.4), rgba(24,6,10,.96));
  border:1px solid rgba(127,29,29,.7);
  box-shadow:0 0 0 1px rgba(127,29,29,.35), 0 24px 55px rgba(15,23,42,.95);
}

.view-classic .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 0, rgba(185,28,28,.4), transparent 30%),
    radial-gradient(circle at 0 100%, rgba(127,29,29,.3), transparent 60%);
  pointer-events:none;
  mix-blend-mode:screen;
}

.view-classic .hero-media{
  box-shadow:0 22px 55px rgba(15,23,42,.9);
}
.view-classic .hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(15,23,42,.7), transparent 40%);
  pointer-events:none;
}

.view-classic .hero-tag{
  background:rgba(24,10,10,.9);
  border:1px solid rgba(127,29,29,.8);
  box-shadow:0 8px 20px rgba(15,23,42,.8);
  color:#fef2f2;
}

.view-classic .hero-title{
  font-size:2rem;
  font-weight:700;
  color:#fef2f2;
}

.view-classic .hero-short{ color:#e5e7eb; }

.view-classic .content-main,
.view-classic .content-side{
  background:linear-gradient(145deg, rgba(24,10,10,.96), rgba(24,6,10,.98));
  border:1px solid rgba(127,29,29,.65);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 38px rgba(15,23,42,.9);
}

.view-classic .badge-heading{
  color:#fef2f2;
  opacity:.9;
  text-transform:none;
  letter-spacing:.12em;
}

.view-classic .btn-primary{
  background:linear-gradient(135deg,#991b1b,#b91c1c);
  color:#fef2f2;
  box-shadow:0 0 0 1px rgba(248,250,252,.18), 0 14px 30px rgba(185,28,28,.6);
}
.view-classic .btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.view-classic .btn-ghost{
  color:#fef2f2;
  border:1px solid rgba(127,29,29,.75);
  background:rgba(24,10,10,.9);
  box-shadow:0 10px 24px rgba(15,23,42,.9);
}

.view-classic a{ color:#fecaca; }

.view-classic .route-nav{
  border-top:1px solid rgba(127,29,29,.7);
}

/* ---------- Modern Theme ---------- */
body.view-modern{
  background:radial-gradient(circle at 15% 0,#fdf7ee 0,#f5ebdc 38%,#ebddc7 70%,#e2d0b5 100%);
  color:#1f2933;
}

.view-modern .wrap{
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(252,244,231,.98));
  border:1px solid rgba(230,213,190,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 22px 55px rgba(148,122,93,.28);
}

.view-modern .hero::before{
  content:"";
  position:absolute;
  inset:-40px -20px auto auto;
  background:
    radial-gradient(circle at 80% 0, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(circle at 95% 20%, rgba(253,230,200,.7), transparent 60%);
  opacity:.9;
  pointer-events:none;
  mix-blend-mode:screen;
}

.view-modern .hero-media{
  box-shadow:0 18px 40px rgba(148,122,93,.4), 0 0 0 1px rgba(255,255,255,.9);
}
.view-modern .hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(24,21,18,.45), transparent 40%);
  pointer-events:none;
}

.view-modern .hero-tag{
  background:rgba(255,255,255,.8);
  color:#7c2d12;
  border:1px solid rgba(244,220,190,.9);
  box-shadow:0 6px 16px rgba(148,122,93,.25);
}

.view-modern .hero-title{
  color:#291507;
  font-size:2rem;
  font-weight:700;
}

.view-modern .hero-subtitle{ color:#5b3b1f; }
.view-modern .hero-short{ color:#4b3822; }
.view-modern .hero-hook{ color:#7c2d12; }

.view-modern .content-main,
.view-modern .content-side{
  background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(252,244,233,.98));
  border:1px solid rgba(234,211,182,.95);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 35px rgba(148,122,93,.22);
}

.view-modern .badge-heading{
  color:#b45309;
  text-transform:none;
  letter-spacing:.12em;
}

.view-modern .btn-primary{
  background:linear-gradient(135deg,#fbbf77,#f59e0b);
  color:#3f2a16;
  box-shadow:0 0 0 1px rgba(255,248,237,.9), 0 12px 26px rgba(180,83,9,.45);
}
.view-modern .btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.view-modern .btn-ghost{
  color:#5b3b1f;
  border:1px solid rgba(214,182,140,.9);
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(148,122,93,.18);
}

.view-modern a{ color:#b45309; }

.view-modern .route-nav{
  border-top:1px solid rgba(224,190,144,.8);
}

/* ---------- Hyper Theme ---------- */
body.view-hyper{
  background:radial-gradient(circle at 25% 15%, #4c1d95 0, #020617 45%, #020617 100%);
  color:#e5e7eb;
}

.view-hyper .wrap{
  background:linear-gradient(135deg, rgba(15,23,42,.2), rgba(15,23,42,.85));
  border:1px solid rgba(129,140,248,.7);
  box-shadow:0 0 0 1px rgba(129,140,248,.25), 0 25px 55px rgba(15,23,42,.95);
}

.view-hyper .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(56,189,248,.25), transparent 55%);
  pointer-events:none;
}

.view-hyper .hero-media{
  box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(129,140,248,.2);
}
.view-hyper .hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);
  pointer-events:none;
}

.view-hyper .hero-tag{
  background:rgba(2,6,23,.55);
  border:1px solid rgba(129,140,248,.35);
  color:#e5e7eb;
}

.view-hyper .hero-title{
  color:#f9fafb;
  font-size:2rem;
  font-weight:800;
}

.view-hyper .content-main,
.view-hyper .content-side{
  background:linear-gradient(145deg, rgba(2,6,23,.55), rgba(15,23,42,.65));
  border:1px solid rgba(129,140,248,.25);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 38px rgba(0,0,0,.55);
}

.view-hyper .btn-primary{
  background:linear-gradient(135deg, #a855f7, #38bdf8);
  color:#0b1020;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 14px 30px rgba(168,85,247,.28);
}
.view-hyper .btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.view-hyper .btn-ghost{
  color:#e5e7eb;
  border:1px solid rgba(129,140,248,.35);
  background:rgba(2,6,23,.35);
}

.view-hyper a{ color:#a5b4fc; }

.view-hyper .route-nav{
  border-top:1px solid rgba(129,140,248,.35);
}

.view-hyper .gallery-slider{
  background:rgba(2,6,23,.6);
}
/* === HERO / Slider größer machen === */
:root{
  /* Stellschraube: Höhe des Kopfbilds */
  --hero-h: clamp(260px, 48vh, 620px);
}

/* Der gesamte Medienbereich bekommt eine feste, responsive Höhe */
.hero-media{
  height: var(--hero-h);
}

/* Der Compare-Slider soll die Höhe vom Container übernehmen */
.hero-media .compare-slider-wrapper{
  height: 100%;
  aspect-ratio: auto; /* wichtig: überschreibt 16/9 */
}