/* ===================== Design Tokens ===================== */
:root{
  --bg: #f5f5f5; --panel: #ffffff; --panel-muted: #e6e6e6;
  --text: #111; --text-dim: #403f3e; --line: #ddd;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --accent1:#ff6b6b; --accent2:#49e0e8;

  /* Navbar */
  --nav-h: 44px; --nav-pad: 4px; --nav-gap: 1px;
  --nav-total: calc(var(--nav-h) + (2 * var(--nav-pad)));

  --logo-max: 170px;
}
/* Dark */
.dark{
  --bg:#0b0b0c; --panel:#0f1012; --panel-muted:#15171a;
  --text:#e9eaec; --text-dim:#b5b6bb; --line:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* ===================== Base ===================== */
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--bg); color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  background-color:#0b0b0c;
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===================== NAVBAR ===================== */
.navbar{
  position:fixed; top:0; left:0; right:0; background:#000!important;
  color:var(--text); border-bottom:none!important; box-shadow:none!important;
  z-index:30; height:var(--nav-total);
  padding:calc(env(safe-area-inset-top,0px) + var(--nav-pad)) 0 var(--nav-pad);
  overflow:visible;
}
.dark .navbar{ background:#000!important; }
.nav-inner{
  width:80%; max-width:960px; margin:0 auto; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  box-sizing:border-box; padding:0 10px; gap:0;
}
.nav-links{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0; }
.nav-links li{ display:inline-flex; }
.navbar .nav-links a{
  display:block; padding:10px 20px; font-size:14px; line-height:1; border-radius:100px; color:var(--text);
}
.navbar .nav-links a:hover{
  background:linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.10) 18px 100%);
}

/* Hamburger */
.nav-check{ display:none; }
.hamburger{
  display:none; position:absolute; left:50%; right:auto;
  top:calc(env(safe-area-inset-top,0px) + 10px); transform:translateX(-50%);
  width:36px; height:28px; cursor:pointer; z-index:31;
}
.hamburger span, .hamburger span::before, .hamburger span::after{
  position:absolute; left:0; right:0; height:2px; background:#fff; content:"";
  transform-origin:center; transition:transform .25s ease, top .25s ease, opacity .2s;
}
.hamburger span{ top:13px; } .hamburger span::before{ top:-9px; } .hamburger span::after{ top:9px; }

/* ========= Layout ========= */
.logo-img{ height:100px; width:auto; margin-right:10px; vertical-align:middle; }
.logocontainer{
  width:80%; max-width:960px; margin:120px auto 20px; padding:20px;
  background:#000; color:#fff; box-sizing:border-box; text-align:left;
}

.containermain{
  width:80%; max-width:960px; margin:85px auto 20px; padding:0;
  background:var(--panel); box-sizing:border-box; text-align:left;
  
  overflow:clip; position:relative;
}
.dark .containermain{ background:transparent; border:none; box-shadow:none; }
.container{
  width:100%; max-width:960px; background:var(--panel-muted);
  box-sizing:border-box; text-align:left;
}
body.about.dark .container{ background:transparent!important; border:none!important; box-shadow:none!important; }

body.about{ padding-top:calc(var(--nav-total) + env(safe-area-inset-top,0px)); }
body.about .containermain{ margin:var(--nav-gap) auto 20px; }
body.about .container{ width:100%; padding:20px; display:flex; align-items:center; gap:20px; min-width:0; }
body.about .container h1{ margin:0; font-size:clamp(22px,3.6vw,45px); color:var(--text); }

/* ===== Karten-Wrapper (zentriert + Wrap, gleiche Höhe) ===== */
.containermastering-container{
  width:100%;
  background:transparent; box-sizing:border-box;
  padding:0 20px 32px;
  display:flex;
  justify-content:center;      /* zentriert die Reihe */
  align-items:stretch;         /* gleiche Höhe für alle Karten */
  flex-wrap:wrap;              /* erlaubt Umbruch */
  gap:24px;
}

/* ===== Schlanke Karten (fix 260px) ===== */
.containermastering,
.containerstem,
.containermaixing{
  flex:0 0 260px;              /* feste, schlanke Breite */
  max-width:260px;
  min-width:260px;
  min-height:360px;            /* genug Platz für Text & Flip */
  margin:0;                    /* Abstand kommt vom gap */
  padding:16px;
  text-align:left; box-sizing:border-box;
  background:#111; border:1px solid #333; border-radius:12px;
  
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;           /* für Flip */
}
.dark .containermastering, .dark .containerstem, .dark .containermaixing{
  background:#131416; border:1px solid var(--line);
}
.containermastering:hover, .containerstem:hover, .containermaixing:hover{
  transform:translateY(-4px); 
  border-color:rgba(255,255,255,.18);
}

/* Typo in Cards */
h1,h2,h3{ color:var(--text); }
p{ color:var(--text); }
p[style*="color:#403f3e"]{ color:var(--text-dim)!important; }

/* ===================== HOME ===================== */
body.home{
  margin:0; min-height:100svh; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:1fr auto; justify-items:center; align-items:center;
  background:#000; color:#fff; text-align:center;
}
.home .site-wrap{ width:min(92vw,1320px); height:100%; display:contents; }
.site-wrap{ position:relative; isolation:isolate; z-index:1; }
.home #donut-overlay{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; pointer-events:none; opacity:.55;
  mix-blend-mode:screen; filter:contrast(1.05) brightness(1.0); background:#000;
}
@media (prefers-reduced-motion: reduce){ .home #donut-overlay{ display:none; } }
@supports not (mix-blend-mode: screen){ .home #donut-overlay{ opacity:.25; } }
.home .logo{ grid-row:1; align-self:center; justify-self:center; padding:clamp(8px,3vh,24px) 0; }
.home .logo img{
  display:block; height:auto; width:clamp(160px,42vw,720px);
  max-height:calc(100svh - 130px - clamp(16px,4vh,48px));
}

/* Kontaktleiste */
.contacts{
  grid-row:2; display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(24px,6vw,80px); padding:clamp(8px,2vh,18px) clamp(16px,6vw,40px);
  width:100%; box-sizing:border-box; position:relative; text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.contacts::before{
  content:""; position:absolute; inset:-8px 0;
  background:radial-gradient(60% 120% at 50% 50%, rgba(0,0,0,.45), transparent 70%);
  z-index:-1;
}
.contact{ text-align:left; }
.contacts h3, .contacts p, .contacts a{
  color:#fff!important; margin:3px 0; font-size:clamp(11px,1.6vh,14px); line-height:1.25;
}
.home .contacts a:hover{ text-decoration:underline; color:var(--accent1)!important; }

/* ===== Responsive ===== */
@media (max-height:740px){
  .home .logo img{ width:clamp(140px,36vw,600px); }
  .contacts{ gap:clamp(16px,4vw,48px); }
  .contacts h3, .contacts p, .contacts a{ font-size:clamp(10px,1.5vh,13px); }
}
@media (max-width:600px){
  .contacts{
    flex-wrap:wrap; justify-content:center; text-align:center;
    padding-inline:clamp(18px,6vw,28px);
    gap:clamp(12px,5vw,22px);
  }
  .contact{ text-align:center; min-width:140px; }
  .home .logo img{ width:clamp(150px,65vw,460px); }
}
@media (max-width:380px), (max-height:640px){
  .home .logo img{ width:clamp(140px,58vw,420px); }
  .contacts h3, .contacts p, .contacts a{ font-size:clamp(10px,1.4vh,12px); }
}

/* ===== Siteweit responsive ===== */
@media (max-width:900px){
  body.about{ padding-top:calc(var(--nav-total) + env(safe-area-inset-top,0px)); }

  .hamburger{ display:block; }
  .nav-inner{ width:92%; }

  .nav-links{
    position:fixed; left:0; right:0;
    top:calc(var(--nav-total) + env(safe-area-inset-top,0px));
    background:rgba(11,11,12,.98);
    -webkit-backdrop-filter:saturate(120%) blur(2px);
    backdrop-filter:saturate(120%) blur(2px);
    border-top:1px solid rgba(255,255,255,.06);
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:8px 0; z-index:29; max-height:65vh; overflow:auto;
    box-shadow:0 12px 28px rgba(0,0,0,.45);
  }
  .nav-links li{ display:block; }
  .navbar .nav-links a{ padding:14px 18px; font-size:15px; display:block; }

  .nav-check:checked ~ .hamburger span{ transform:rotate(45deg); }
  .nav-check:checked ~ .hamburger span::before{ top:0; transform:rotate(90deg); }
  .nav-check:checked ~ .hamburger span::after{ top:0; opacity:0; }
  .nav-check:checked ~ .nav-inner .nav-links{ display:flex; }

  /* Karten mobil: untereinander, volle Breite, gleiche Höhe */
  .containermastering-container{
    padding:0 16px 24px;
    gap:16px;
    flex-wrap:wrap;
    justify-content:stretch;
    align-items:stretch;
  }
  .containermastering,
  .containerstem,
  .containermaixing{
    flex:1 1 100%;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:320px;
    margin:0;                /* Abstand kommt vom gap */
  }
}
@media (max-width:600px){
  body.about{ padding-top:calc(var(--nav-total) + env(safe-area-inset-top,0px)); }
  .containermastering, .containerstem, .containermaixing{ min-height:300px; }
}
@media (max-width:480px){
  .navbar .nav-links a{ font-size:13px; padding:12px 16px; }
}

/* ===== Scroll + Highlight ===== */
html { scroll-behavior: smooth; }
.containermastering, .containerstem, .containermaixing { scroll-margin-top: calc(var(--nav-total) + 14px); }
.card { position: relative; }
@keyframes wiggle-pop{
  0%{transform:translateY(0) scale(1) rotate(0deg); box-shadow:0 10px 30px rgba(0,0,0,.35);}
  20%{transform:translateY(-4px) scale(1.02) rotate(-1.2deg);}
  40%{transform:translateY(-2px) scale(1.015) rotate(1.2deg);}
  60%{transform:translateY(-4px) scale(1.02) rotate(-0.8deg);}
  80%{transform:translateY(-1px) scale(1.01) rotate(0.8deg);}
  100%{transform:translateY(0) scale(1) rotate(0deg);}
}
.card--highlight{
  animation:wiggle-pop 650ms ease;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.12) inset;
  border-color:rgba(255,255,255,.22)!important;
}
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .card--highlight{ animation:none; outline:2px solid rgba(255,255,255,.5); outline-offset:2px; }
}

/* ===== Panels (Prices/Equipment/Listen/Player) ===== */
.panel{
  position:fixed; left:0; right:0; bottom:0; height:clamp(60vh,78vh,85vh);
  background:#0f1012; border-top:1px solid rgba(255,255,255,.08);
  transform:translateY(100%); transition:transform .38s ease; z-index:40;
}
.panel--open{ transform:translateY(0); }
.panel-inner{ width:80%; max-width:960px; margin:0 auto; padding:18px 0 26px; overflow:auto; height:100%; box-sizing:border-box; }
.panel h2{ margin:6px 0 14px; font-size:clamp(20px, 3.4vw, 28px); color:var(--text); }

.price-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.price-card{
  background:#131416; border:1px solid var(--line); border-radius:12px; padding:14px;
}
.price-card h3{ margin:0 0 8px; color:var(--text); }
.price-card p, .price-card li{ color:var(--text); font-size:14px; line-height:1.5; }
.price-card .dim{ color:var(--text-dim); }
.tiers{ list-style:none; padding:0; margin:0; }
.tiers li{ padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.tiers li:last-child{ border-bottom:0; }
.panel-note{ margin-top:18px; color:var(--text-dim); font-size:13px; }

/* Close-Button & Backdrop */
.panel-close{
  position:absolute; right:14px; top:10px; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12); background:#000; color:#fff; font-size:22px; line-height:32px;
  text-align:center; cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.panel-close:hover{ transform:scale(1.06); background:#15171a; }
.panel-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(1px); z-index:39; }

@media (max-width:900px){
  .price-grid{ grid-template-columns:1fr; }
  .panel{ height:clamp(72vh, 86vh, 92vh); }
}

/* ===== Listen / References ===== */
.gallery-grid{ display:grid; gap:16px; grid-template-columns:repeat(6, 1fr); }
.cover{
  position:relative; display:block; aspect-ratio:1/1; border-radius:0; overflow:hidden;
  background:#0b0b0c; box-shadow:none; border:none; transform:translateZ(0);
}
.cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:none; }
.cover::after{
  content: attr(data-title);
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:10px 12px;
  font-size:14px;
  line-height:1.2;
  text-align:center;
  color:#fff;
  letter-spacing:.2px;

   /* Overlay/Verlauf */
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0) 100%);
  
  opacity:0;
  transform:translateY(12px);   /* Start leicht nach unten versetzt */
  transition:opacity .35s ease, transform .35s ease;
}

.cover:hover::after{
  opacity:1;
  transform:translateY(0);     /* Fährt nach oben ein */
}
@media (max-width:1200px){ .gallery-grid{ grid-template-columns:repeat(5, 1fr); } }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:700px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:500px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); } }
#listen-panel .panel-inner h2{ margin-bottom:14px; }

/* ===== Lossless Player ===== */
.player-wrap{ display:grid; gap:14px; }
.player{ display:grid; gap:10px; align-content:start; }
.player audio{ width:100%; max-width:680px; }
.player-ctrl{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  appearance:none; border:1px solid var(--line); background:#15171a; color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.btn:hover{ background:#1b1d21; }
.track-list{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; }
.track-list li{
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:#131416; color:var(--text-dim); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.track-list li:hover{ background:#16181c; color:var(--text); }
.track-list li.active{ border-color:rgba(255,255,255,.28); color:var(--text); background:#16181c; }
.track-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge{ font-size:12px; opacity:.7; }
.panel-sub{ margin:-6px 0 14px; font-size:13px; color:var(--text-dim); }

/* ===== Custom Scrollbar ===== */
.panel-inner::-webkit-scrollbar{ width:8px; }
.panel-inner::-webkit-scrollbar-track{ background:transparent; }
.panel-inner::-webkit-scrollbar-thumb{ background-color:rgba(255,255,255,.15); border-radius:4px; transition:background-color .3s ease; }
.panel-inner::-webkit-scrollbar-thumb:hover{ background-color:rgba(255,255,255,.3); }

/* ===== Lossless: scrolling ribbon ===== */
.cover--lossless .lossless-ribbon{
  position:absolute; left:-10%; right:-10%; top:8px; height:28px; pointer-events:none;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12); border-radius:999px;
  backdrop-filter:saturate(120%) blur(2px); -webkit-backdrop-filter:saturate(120%) blur(2px);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  overflow:hidden;
}
.cover--lossless .ribbon-track{
  position:absolute; inset:0 auto 0 0; display:inline-block; white-space:nowrap;
  line-height:26px; font-size:12px; letter-spacing:.06em; color:#fff; padding:0 16px;
  animation:lossless-marquee 11s linear infinite;
}
@media (hover:hover){ .cover--lossless:hover .ribbon-track{ animation-duration:7s; } }
@media (prefers-reduced-motion:reduce){ .cover--lossless .ribbon-track{ animation:none; } }
@keyframes lossless-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== Card Flip ===== */
.flip-card{ perspective:1000px; cursor:pointer; }
.flip-card .card3d{
  position:relative; transform-style:preserve-3d;
  transition:transform .6s ease;
  height:100%;                 /* nimmt die Kartenhöhe */
  min-height:inherit;
}
.flip-card .flip-face{
  position:absolute; inset:0; padding:16px; box-sizing:border-box;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; height:100%;
}
.flip-card .back{ transform:rotateY(180deg); background:#111; border:1px solid #333; border-radius:12px; }
.flip-card.is-flipped .card3d{ transform:rotateY(180deg); }

/* Rückseiten-Typo */
.flip-ttl{ margin:0 0 4px; font-size:16px; font-weight:700; color:var(--text); }
.flip-quote{ margin:0; color:var(--text-dim); line-height:1.45; font-size:14px; }
/* ===== Equipment: Processing-Klammer über Mastering+Mixing ===== */
.equip-umbrella{
  width:80%;
  max-width:960px;
  margin: 4px auto 10px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--text);
}

.equip-umbrella .brace{
  font-size:28px;
  line-height:1;
  opacity:.55;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.equip-umbrella .brace.left { transform: translateY(2px); }
.equip-umbrella .brace.right{ transform: translateY(2px); }

.equip-processing{
  margin:0;
  padding:10px 14px;
  background:#131416;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
}
.equip-processing em{ font-style:normal; opacity:.9; }

/* Klammerlinie (zarte Hairline über den beiden MM-Karten) */
.equip-grid{
  position:relative;
}
/* optionaler zarter Strich, der optisch Mastering & Mixing „zusammenfasst“ */
.equip-grid::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:-6px;
  width:min(520px, 70%);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* gleiche Höhe für Mastering & Mixing Kästen, auch bei viel Text */
.equip-mm{
  display:flex;
  flex-direction:column;
}
.equip-mm .tiers{
  flex:1 1 auto;
}

/* ===== Equipment: Links & Hinweise ===== */
.equip-notes{
  width:80%;
  max-width:960px;
  margin: 14px auto 0;
  color:var(--text-dim);
}
.equip-notes__ttl{
  margin: 8px 0 6px;
  font-size:14px;
  color:var(--text);
}
.equip-links{
  list-style:none;
  margin:0 0 8px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
}
.equip-links a{
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.25);
}
.equip-links a:hover{
  border-bottom-color: rgba(255,255,255,.5);
}
.equip-foot{
  margin:0 0 6px;
  font-size:13px;
  color:var(--text-dim);
}

/* Responsive: Klammer & Linie auf kleinen Screens kompakter */
@media (max-width:900px){
  .equip-umbrella{ width:92%; }
  .equip-processing{ font-size:13px; padding:8px 12px; }
  .equip-grid::before{ width:80%; }
  .equip-links{ gap:6px 12px; }
}
/* ===== Scrollbars komplett ausblenden (global) ===== */
html, body {
  /* Firefox */
  scrollbar-width: none;
  /* IE/alter Edge */
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  /* Chrome/Safari/WebKit */
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

/* Falls du es nur für bestimmte Container willst: */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

/* Beispiel: Panels und Galerie ohne Scrollbar anzeigen */
.panel-inner,
.refs-grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.panel-inner::-webkit-scrollbar,
.refs-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}
/* —— tiny footer with subtle links —— */
.site-footer{
  width:80%;
  max-width:960px;
  margin:6px auto 16px;
  text-align:center;
  font-size:12px;
  color:var(--text-dim);
}
.site-footer a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.25);
}
.site-footer a:hover{
  border-bottom-color:rgba(255,255,255,.5);
  text-decoration:none;
}
#imprint-panel .address-line {
  margin: 2px 0;
}
.site-footer{ padding-bottom: env(safe-area-inset-bottom); }
/* Footer sichtbar halten und über Overlays legen */
.site-footer{
  position: relative;
  z-index: 100;                /* höher als der Fade-Layer */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* etwas Luft unten, damit Inhalt nicht unter den Footer rutscht */
body.about{ padding-bottom: 72px; }


/* Footer immer sichtbar + iOS 15+/Safari transparente Leiste abfangen */
.site-footer{
  position: relative;
  z-index: 100; /* über evtl. Rest-Overlays */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* etwas Platz, damit Inhalt nicht unter den Footer rutscht */
body.about{ padding-bottom: 72px; }



/* Footer bleibt sichtbar und bündig mit iOS-Leiste */
.site-footer{
  position: relative;
  z-index: 100;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
body.about{ padding-bottom: 72px; }


/* Footer sichtbar halten (kann oben bleiben, zur Sicherheit hier nochmal) */
body.about { padding-bottom: 72px; }
.site-footer{
  position: relative;
  z-index: 100;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
/* --- Fade behaviour final: OFF <=1024, ON >=1025 --- */

/* Phones & tablets: remove any bottom fade overlays */
@media (max-width: 1024px){
  body.about .containermain::after,
  body.about .container::after,
  .containermain::after,
  .container::after,
  .containermastering-container::after { 
    display:none !important;
    content:none !important;
    background:none !important;
    height:0 !important;
    pointer-events:none !important;
  }
}
/* ===== Footer centered + badge right ===== */
.site-footer {
  position: relative;
  width: 80%;
  max-width: 960px;
  margin: 10px auto 24px;
  font-size: 12px;
  color: #bbb;
  text-align: center;
}

.footer-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.footer-center a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.25);
}
.footer-center a:hover {
  border-bottom-color: rgba(255,255,255,.5);
}

.footer-right {
  position: absolute;
  right: 19.5%;
  top: 60%;
  transform: translateY(-50%);
}

.apple-badge-footer {
  height: 36px;  /* etwas größer, wirkt besser */
  width: auto;
  opacity: 0.9;
  transition: opacity 0.25s ease;
}
.apple-badge-footer:hover {
  opacity: 1;
}

/* Responsive: Badge nach unten zentrieren auf kleinen Geräten */
@media (max-width: 600px) {
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .footer-center, .footer-right {
    position: static;
    transform: none;
  }
  .apple-badge-footer {
    height: 26px;
  }
}
/* ===== About-Layout mit Badge rechts vom Donut ===== */
body.about .container {
  display: flex !important;
  align-items: flex-start;
  gap: 32px;
}

.text-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.apple-badge-about {
  margin-top: 6px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.apple-badge-about img {
  height: 42px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.25s ease;
}

.apple-badge-about img:hover {
  opacity: 1;
}

@media (max-width: 800px) {
  body.about .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .text-block {
    align-items: center;
  }
  .apple-badge-about img {
    height: 34px;
  }
}
}
/* —— About: Donut links, Text rechts, vertikal ausgerichtet —— */
body.about .container{
  display:flex !important;
  align-items:center;          /* vertikal mittig neben dem Donut */
  gap:28px;
  padding:20px;
}

#bg-video{
  width:280px;                 /* Größe wie im Screenshot */
  height:auto;
  border-radius:8px;
  flex:0 0 auto;
}

.text-block{
  display:flex;
  flex-direction:column;
  justify-content:center;      /* H1 + Badge als Block mittig ausrichten */
  transform: translateY(100px); /* <— nur diese Zeile neu */
  min-width:0;
}

.apple-badge-about{
  margin-top:8px;              /* Abstand unter H1 */
  display:flex;
  align-items:center;
  justify-content:flex-start;  /* linksbündig zur H1 */
}

.apple-badge-about img{
  height:42px;                 /* etwas größer als auf der Startseite */
  width:auto;
  opacity:.9;
  transition:opacity .25s ease;
}
.apple-badge-about img:hover{ opacity:1; }

/* Mobil: untereinander, mittig */
@media (max-width:800px){
  body.about .container{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .apple-badge-about{ justify-content:center; }
  .apple-badge-about img{ height:34px; }
}
/* ===== Hide headline + badge on mobile ===== */
@media (max-width: 831px) {
  .text-block {
    display: none !important;
  }
}
/* ========== WEB ORDER PANEL FULLSCREEN ONLY ========== */

#weborder-panel {
  top: 0 !important;
  height: 100vh !important;
  align-items: flex-start !important;
  padding-top: 40px; /* Abstand zur Navbar */
}

#weborder-panel .panel-inner {
  height: 100%;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

#weborder-panel .price-card {
  max-width: 100%;
  width: 100%;
}
.weborder-card label,
.weborder-card fieldset {
  display: block;
  margin-bottom: 1rem;
}

.weborder-card .two-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.weborder-card .inline-group label {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
  gap: 0.35rem;
}

.weborder-card .pdf-preview iframe {
  width: 100%;
  max-height: 360px;
  border: 0;
  margin-top: 0.5rem;
}
.track-block {
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed rgba(0,0,0,0.2);
}

.price-hint {
  margin-left: 8px;
  font-weight: 600;
  color: #7a2a00;
}
//* PDF Card */
.pdf-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

/* PDF und Upload haben gleiche, etwas kleinere Breite */
.pdf-card,
.upload-dropzone {
  max-width: 640px;       /* schmaler als das ganze Formular */
  margin: 0 auto 1.5rem;  /* zentriert, unten Abstand */
}

.pdf-card-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.pdf-frame {
  width: 100%;
  height: 420px;          /* höher = mehr von Seite 1 sichtbar */
  border: 0;
  border-radius: 8px;
  background: #111;
}

/* Drag & Drop Upload */
.upload-dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.upload-dropzone .upload-icon {
  font-size: 2.2rem;
  margin-bottom: 0.25rem;
}

.upload-text {
  font-weight: 500;
  margin-bottom: 0.15rem;
}

.upload-subtext {
  font-size: 0.8rem;
  opacity: 0.7;
}

.upload-dropzone.is-dragover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* --- Upload-Statusbox im Weborder-Form --- */
.upload-status {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #fff7df;                 /* passt zum Formular-Hintergrund */
  border: 1px solid #e2d3b3;
  font-size: 0.85rem;
  color: #3f3124;
}

.upload-status-text {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.upload-status-note {
  font-size: 0.78rem;
  opacity: 0.8;
  margin-top: 0.3rem;
}

/* „Infinite“ Progressbar */
.upload-progress-bar {
  margin-top: 0.35rem;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #f0e3c2;
}

.upload-progress-bar-inner {
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: #f26b33;                 /* dein Jotform-Orange */
  animation: upload-bar 1.2s linear infinite;
}

@keyframes upload-bar {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}

/* Datei-Input verstecken, aber nutzbar lassen */
#premaster_zip {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/* === WEBORDER: volle Breite, keine Kartenbegrenzung === */
#weborder-panel .price-card.weborder-card {
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  box-shadow: none;
}
#weborder-panel form {
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 7rem;   /* neuer Abstand nach unten */
}
/* === WEBORDER: Scrollen überall erlauben (nicht nur im Form) === */
#weborder-panel {
  overflow-y: auto !important;
}

#weborder-panel .panel-inner {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
}

/* ========== WEB ORDER PANEL (Layout & Look) ========== */
/* --- Weborder: besser lesbare Zwischenzeile & Upload-Text --- */

/* "+ Option for Vinyl Mastering" */
#weborder-panel .weborder-card h4 {
  color: #6a4a2b;         /* dunkler Braunton, gut lesbar auf dem Beige */
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.3rem 0 1.1rem;
}

/* Upload-Text im Dropzone-Feld */
#weborder-panel .upload-dropzone .upload-text {
  color: #3f3124;         /* kräftiger Text */
}

#weborder-panel .upload-dropzone .upload-subtext {
  color: #6a5a47;         /* etwas heller, aber deutlich lesbar */
  opacity: 1;             /* keine zusätzliche Aufhellung über opacity */
}

/* Panel: orange Fläche, überall scrollbar */
#weborder-panel {
  background: #f26b33;     /* Jotform-Orange */
  overflow-y: auto;        /* Scrollen von überall im Panel */
}

/* Panel-Inhalt zentriert, keine zusätzliche Max-Breite */
/* Panel-Inhalt: vertikale Anordnung, zentriert */
#weborder-panel .panel-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 3rem 1.5rem 3.5rem;   /* etwas mehr Abstand nach oben */
  box-sizing: border-box;

  height: auto;
  max-height: none;
  overflow: visible;

  display: flex;
  flex-direction: column;        /* Überschrift + Text + Card untereinander */
  align-items: center;           /* alles mittig */
  gap: 1.75rem;                  /* Abstand zwischen Überschrift und Card */
}

/* Die eigentliche Formular-Card im Jotform-Look */
#weborder-panel .price-card.weborder-card {
  max-width: 880px;              /* Gesamtbreite der Card */
  width: 100%;
  margin: 0 auto;
  background: #fff7df;           /* helles gelb/beige */
  border-radius: 20px;
  padding: 2.4rem 2.6rem 2.8rem;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Formular füllt die Card komplett */
#weborder-panel form {
  margin: 0;
  max-width: none;
  padding-bottom: 3rem;          /* Platz nach unten für Submit */
}

/* Abschnittsüberschriften (Project Details, Track Details, …) */
#weborder-panel .weborder-card h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #3b2414;
  margin: 2rem 0 0.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Erste H3 ohne Trennlinie oben */
#weborder-panel .weborder-card h3:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Kleiner Einleitungstext unter den H3s */
#weborder-panel .weborder-card p.dim {
  margin-top: 0.1rem;
  margin-bottom: 1.4rem;
  font-size: 0.85rem;
  color: #6a5a47;
}

/* Labels & Feldabstand */
#weborder-panel .weborder-card label,
#weborder-panel .weborder-card fieldset {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.86rem;
  color: #3f3124;
}

/* Zweispaltige Reihen (deine zwei Textfelder nebeneinander) */
#weborder-panel .weborder-card .two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.4rem;
}

/* Inputs/Selects/Textareas – „Jotform“-Style */
#weborder-panel .weborder-card input[type="text"],
#weborder-panel .weborder-card input[type="email"],
#weborder-panel .weborder-card input[type="tel"],
#weborder-panel .weborder-card input[type="date"],
#weborder-panel .weborder-card input[type="number"],
#weborder-panel .weborder-card select,
#weborder-panel .weborder-card textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #d9c59a;
  background: #fffdf7;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  color: #1f1b19;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#weborder-panel .weborder-card input:focus,
#weborder-panel .weborder-card select:focus,
#weborder-panel .weborder-card textarea:focus {
  border-color: #f26b33;
  box-shadow: 0 0 0 2px rgba(242, 107, 51, 0.25);
  background: #ffffff;
}

/* Radios nebeneinander */
#weborder-panel .weborder-card .inline-group {
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
}

#weborder-panel .weborder-card .inline-group legend {
  font-size: 0.86rem;
  margin-bottom: 0.3rem;
}

#weborder-panel .weborder-card .inline-group label {
  display: inline-flex;
  align-items: center;
  margin-right: 1.5rem;
  gap: 0.35rem;
}

/* PDF-Card: gleiche Breite wie Upload */
#weborder-panel .pdf-card {
  max-width: 640px;
  margin: 1.5rem auto;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2d3b3;
  padding: 1.1rem 1.3rem;
}

#weborder-panel .pdf-card-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

#weborder-panel .pdf-card-header a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a5931;
}

#weborder-panel .pdf-frame {
  width: 100%;
  height: 420px;          /* mehr von Seite 1 sichtbar */
  border: 0;
  border-radius: 10px;
  background: #f2f2f2;
}

/* Drag-&-Drop Upload in gleichem Stil */
#weborder-panel .upload-dropzone {
  max-width: 640px;
  margin: 1.5rem auto 1.5rem;
  border: 2px dashed #d9c59a;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  background: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

#weborder-panel .upload-dropzone .upload-icon {
  font-size: 2.2rem;
  margin-bottom: 0.25rem;
  color: #f26b33;
}

#weborder-panel .upload-text {
  font-weight: 500;
  margin-bottom: 0.15rem;
}

#weborder-panel .upload-subtext {
  font-size: 0.8rem;
  opacity: 0.7;
}

#weborder-panel .upload-dropzone.is-dragover {
  background: #fff8eb;
  border-color: #f26b33;
  transform: translateY(-1px);
}

/* Datei-Input verstecken, aber nutzbar lassen */
#premaster_zip {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Submit-Button – „seriös“ */
#weborder-panel .weborder-card .btn {
  background: #273247;
  border-radius: 6px;
  border: none;
  padding: 0.55rem 1.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
}

#weborder-panel .weborder-card .btn:hover {
  background: #1b2232;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

#weborder-panel .weborder-card .btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Mobile: Card enger machen, Felder untereinander */
@media (max-width: 768px) {
  #weborder-panel .panel-inner {
    padding: 2rem 0.75rem 3rem;
  }

  #weborder-panel .price-card.weborder-card {
    padding: 1.7rem 1.3rem 2.2rem;
    border-radius: 16px;
  }

  #weborder-panel .weborder-card .two-cols {
    grid-template-columns: 1fr; /* untereinander auf Handy */
  }
}
/* Weborder: Headline + Unterzeile enger setzen */
#weborder-panel #weborder-title {
  color: #fff;
  font-size: 1.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;   /* kleiner Abstand nach unten */
  text-align: center;
}

#weborder-panel #weborder-title + p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  margin: 0;             /* fast kein Abstand */
  text-align: center;
}
/* Weborder: Hero-Titel in der Card dunkler */
#weborder-panel .weborder-card h2,
#weborder-panel .weborder-card h2 *,
#weborder-panel .weborder-card .weborder-subtitle {
  color: #3b2414;   /* sattes Dunkelbraun statt fast weiß */
}

/* Upload-Box Schrift dunkler */
#weborder-panel .upload-text,
#weborder-panel .upload-subtext {
  color: #3b2414;
  opacity: 0.9;     /* gut lesbar */
}
/* Weborder: Unterzeile direkt unter dem Haupttitel dunkler machen */
#weborder-panel .weborder-card h2 + p {
  color: #3b2414 !important;   /* gleiche dunkle Farbe wie der Titel */
  opacity: 0.9 !important;     /* fast volle Deckkraft */
}
/* === WEBORDER Title nach oben + enger === */
#weborder-panel .panel-inner {
  padding-top: 2rem !important;   /* war 3–4.5rem → jetzt viel weiter oben */
}

#weborder-title {
  margin-bottom: 0.2rem !important;
}

#weborder-title + p {
  margin-top: 0 !important;
  margin-bottom: 0.8rem !important; /* dichter an der Card */
}
/* Wormhole Upload Steps */
.upload-steps {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
  font-size: 0.9rem;
  color: #3f3124;
}
.upload-steps li {
  margin-bottom: 0.25rem;
}
/* === Wormhole Upload Bereich: bessere Lesbarkeit === */
#weborder-panel h3,
#weborder-panel p,
#weborder-panel ol,
#weborder-panel li,
#weborder-panel label {
  color: #2b1f14 !important;   /* dunkles warmes Braun */
}

#weborder-panel .dim {
  color: #5a4a3a !important;   /* dezenter, aber gut lesbar */
}

#weborder-panel .upload-steps a {
  color: #1a1a1a !important;
  text-decoration: underline;
  font-weight: 600;
}

/* Input-Feld für Wormhole-Link besser sichtbar */
#weborder-panel input[type="url"] {
  color: #000;
  font-weight: 500;
}
/* === MASV Upload sauber horizontal zentrieren === */
.massive-embed-wrap {
  width: 100%;
  display: flex;
  justify-content: center;   /* ✅ horizontale Zentrierung */
  align-items: center;
  flex-direction: column;
  margin-top: 24px;
}

.massive-embed-wrap iframe {
  display: block;
  margin: 0 auto;           /* ✅ Sicherheits-Zentrierung */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.massive-logo {
  width: 100%;
  display: flex;
  justify-content: center;  /* ✅ Logo auch mittig */
}
/* Weborder: Submit-Button zentriert in der Karte */
#weborder-panel .weborder-card .btn {
  display: block;
  margin: 1.8rem auto 0; /* oben etwas Abstand, horizontal auto = mittig */
}