/*________________ Basiseinstellungen ___________________*/

* {
    margin: 0;
    padding: 0;
    border: 0;
  }

  body {
    width: 100vw;
    min-height: 100vh;
    background-color: black;
    color: bisque;
    font-family: 'Orbitron', sans-serif;
    text-align: left;
    overflow-x:hidden;
  }
  strong {
    color: #edbc2a;     
  }

/*_______________Startscreen________________*/
.startscreen{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-content: center;
  gap: 2rem;
  background: rgba(0, 0, 0, 1);
  pointer-events:auto;
  backdrop-filter: blur(3px);
  transition: opacity .4s ease;
}

/* hintergrund bleibt gesperrt*/
.startscreen.hide{
  pointer-events: none;
}

.site-title{
  position: static;
  margin: 0rem;
  color: bisque;
  font-size: clamp(32px,6vw,72px);
  line-height: 1.1;
  text-align: center;
  max-width: 20ch;       
  text-wrap: balance; 
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
/*man kann beim startscreen nicht scrollen*/
body.locked{ overflow: hidden; }
/*fixierte  Navigationsleisten*/
html{
    scroll-behavior: smooth;
} 

/*__________________ Call to action button ______________*/
.cta{
  display:inline-block;
  padding: 1rem 1.6rem;
  border-radius: 2rem;
  background: linear-gradient(135deg,#edbc2a,#7d5a00);
  color: #111;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(237,188,42,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cta:focus-visible{outline:3px solid #edbc2a; outline-offset:3px}
.cta:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(237,188,42,.45); }

/* Fade-Out Animation, wenn geklickt */
.startscreen.hide{
   animation: fadeOut .4s ease forwards; }
@keyframes fadeOut{
   to{ opacity:0; visibility:hidden; } }

/*____________  Barrierefreiheit _________*/
.skip-link {position: absolute;left: -9999px}
.skip-link:focus {left: 1rem;top:1rem;z-index: 999; background: #111;color: #edbc2a;padding: 5rem 1rem;border-radius:.5rem;}
:focus-visible {outline:3px solid #edbc2a;outline-offset:2px}
:target{scroll-margin-top:80px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
 /* .header-video {display:none} */
}


/*___________________________________ Header und Header-Video ________________________________*/

  header {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  .header-video {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
  }
  .header-text {
    position: relative;
    z-index: 2; 
    padding-top: 60vh;
  }
  header h1 {
    font-size: 3rem;
    color: antiquewhite;
    text-shadow: 2px 2px 4px black;
  }

  /*_____________________________ Navigationsleiste ______________________________*/ 
  .navbar {
    position: fixed;
    top: 0;
    left: 0; 
    width: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.6); 
    backdrop-filter: blur(6px); 
    padding: 10px 20px;
  }

  .navdiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .logo a {
    font-size: 60px;
    font-weight: bold;
    color: antiquewhite;
    text-decoration: none;
  }

  .navbar ul li { list-style: none; }
  li a {
    color: antiquewhite;
    text-decoration: none;
    font-weight: bold;
  }
  /*Hover-Effektt*/
  .navbar ul li a {
    color: antiquewhite;
    transition: all 0.3s ease;
  }
  .navbar ul li a:hover{
    color: rgb(237, 188, 42);
  }
  
  .navbar ul {
    display: flex;
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 20px; 
    width: 100%;
    padding: 0;
    margin: 0;
  }
main {padding-top: 80px;}
  
/* ---------- Navbar Schriftgrößen ---------- */

.navbar .logo a{
  font-size: clamp(28px, 4.8vw, 63px); 
  line-height: 1;
}

@media (max-width: 640px){
  .navbar{ padding: 8px 12px; }
  .navbar ul{ gap: 12px; }
  .navbar .navdiv > ul > li > a{ font-size: 16px !important; }
}

@media (min-width: 1600px){
  .navbar .navdiv > ul > li > a{ font-size: 22px !important; }
}
.navbar .navdiv > ul > li > a{
  font-size: clamp(18px, 1.8vw, 24px) !important; 
  line-height: 1.2;
  letter-spacing: .02em;
  padding: .35rem .6rem; 
}




  /*_________________________________Ab hier beginnt der Content ________________________________ */
  
/* ---------- Für alle Section-Texte eine einheitliche Formatierung ---------- */
main section > h2,
main section > h3,
main section > h4,
main section > h5,
main section > h6{
  font-size: clamp(26px, 4.2vw, 48px);  /* bleibt durch das clamp responsiv*/
  line-height: 1.3;
  margin: 0 0 3rem;
  text-align: center;           
}
/* spezifischere Unterüberschriften */
main section h2.subheadline,
main section h3.subheadline,
main section h4.subheadline,
main section h5.subheadline,
main section h6.subheadline {
  font-size: clamp(18px, 2.4vw, 30px) !important;
  color: #edbc2a;
  font-weight: 700;
  margin: 0 0 2rem;
  text-align: center;
}

/*_______passende Unterüberschriften ______*/

.subheadline{
  color: #edbc2a;
  font-weight: 700;
  font-size: clamp(12px, 1.4, 18px);
  margin-top: .20rem;
  margin-bottom: .75rem;
  text-align: center; 
  margin: 0 0 2rem;
  
}

main section > p{
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 2;
  max-width: 70ch;                 
  margin: 0 auto 2rem;            
  text-align: left;
}

main section ul,
main section ol {
  display: block;              
  list-style-position: outside;
  padding-left: 1.5rem;       
  margin: 0 auto 1.5rem;
  max-width: 70ch;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.8;
}

main section ul { list-style: disc; }
main section ol { list-style: decimal; }

main section li + li { margin-top: .4rem; } /* Abstand zwischen Punkten */

/* ---------- Nahaufnahme-Bild: zentriert & nicht abgeschnitten ---------- */
.hero-img{
  display: block;
  width: min(1200px, 95vw);        /* begrenzen + responsiv */
  height: auto;                    /* kein Cropping */
  margin: 1.25rem auto 0;          /* zentrieren */
  border-radius: 8px;              /* optional, gern entfernen */
}


  .einleitung {
    background: rgba(0,0,0,0.78);
    padding: 80px 5vw;
    margin: 0;
    max-width: none;
    border-radius: 0;
  }
  .einleitung p {
    line-height: 1.7;
    margin-top: 1rem;    
    margin-bottom: 1.5rem; 
  font-size: 1.1rem;   
  }
  .einleitung h3 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
  }
  
  /*___________________ feste Abstände____________________*/ 
 
section{
  padding: clamp(32px, 6vw, 80px) 5vw;
  margin: 0;                  /* wir erzeugen Layout über padding, nicht <br> */
  background: rgba(0,0,0,0.78); /* deckend genug, damit nichts „durchscheint“ */
  backdrop-filter: none;
  border: 0;
}

.section-gradient{
  background: linear-gradient(180deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.90) 100%);
}

  /*___________________ Responsivität_________________________*/ 
@media (min-width:1600px){
  .controller{ width: min(75vw, 1400px); }
}


  /*____________interaktiver Controller _____________*/
  .controller {
    position: relative;
    width:clamp(320px, 95vw, 1500px);
    margin: 0 auto 2rem;
  }
  .controller img{
    display:block;
    width: 100%;
    height: auto;
  }
/* Interaktive Hotspots  */
.hotspot{
  position:absolute;
  transform: translate(-50%, -50%);
  border:none;
  background: transparent;
  cursor: pointer;
  padding:0;
}
.hotspot:focus-visible{
  outline:3px solid #edbc2a; outline-offset:2px;
}
.hotspot.circle{ border-radius:50%; }
.hotspot.rect{ border-radius:.6rem; }

/* Glow, wenn man auf die Tasen drückt */
.hotspot::after{
  content:"";
  position:absolute; inset:-12%;
  border-radius:inherit;
  background: radial-gradient(circle, rgba(237,188,42,.55) 0%, rgba(237,188,42,.25) 35%, rgba(237,188,42,0) 65%);
  mix-blend-mode: screen;
  opacity:0; transition:opacity .18s ease;
  pointer-events:none;
}
.hotspot:hover::after,
.hotspot:focus-visible::after,
.hotspot[data-active="true"]::after{ opacity:1; }

/* Info-Panel */
.controller-info{
  width: min(95vw, 1400px);
  margin: 0 auto 2rem;
  text-align: left;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(237,188,42,.25);
  border-radius: 12px;
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.controller-info h3{
  margin: 0 0 .25rem 0;
  font-size: clamp(18px, 2.6vw, 22px);
  color: #edbc2a;
}
.controller-info p{
  margin:0;
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.5;
}
/* fürs Handy*/
@media (max-width: 520px){
  .hotspot{ min-width: 28px; min-height: 28px; } 
}

/*___________________ damit alles schön zentriert ist und nicht abgeschnitten wird an den Rädnern ___________*/ 
/* ---------- Überblick-Abschnitt: größer & mittig ---------- */
#ueberblick { padding: clamp(24px, 5vw, 72px) 5vw; }

#ueberblick h3{
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.2;
  margin: 0 0 1rem;
  text-align: center;             
}


#ueberblick p{
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.8;
  max-width: 70ch;              
  margin: 1rem auto;            
  text-align: left;
}

/*___________________ für den Button auf der Startseite _______________*/

.startscreen{
  place-content: center;   
  place-items: center;     
  gap: 2rem;               
}

.startscreen .cta{
  justify-self: center;    
  width: max-content;      
  font-size: clamp(16px, 2.2vw, 22px); 
  padding: 0.9rem 1.6rem;  
}

/*________________ Preisrange Quiz ________________________*/

.price-quiz{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin: 1rem 0 1.25rem;
}

.quiz-option{
  border:0;
  border-radius: 999px;
  padding: .75rem 1.1rem;
  font-family: inherit;
  font-weight: 800;
  cursor:pointer;
  background: linear-gradient(135deg,#edbc2a,#7d5a00);
  color:#111;
  box-shadow: 0 6px 18px rgba(237,188,42,.28);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  font-size: clamp(14px, 1.6vw, 18px);
}
.quiz-option:hover,
.quiz-option:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(237,188,42,.42);
  outline: 3px solid #edbc2a; outline-offset:2px;
}

.quiz-option.is-selected{
  opacity: .9;
  box-shadow: 0 0 0 3px rgba(237,188,42,.45) inset;
}

/* Ergebnis-Karten */
.result-card{
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  background: rgba(0,0,0,.78);
  border: 1px solid rgba(237,188,42,.25);
  border-radius: 14px;
  padding: clamp(14px, 2.5vw, 22px);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.result-card img{
  width:100%; height:auto; border-radius:10px; object-fit: cover;
  background:#111;
}
.result-card h3{
  margin: 0 0 .35rem 0;
  color:#edbc2a;
  font-size: clamp(18px, 2.4vw, 24px);
}
.result-card .price{
  font-size: clamp(14px, 1.8vw, 18px);
  opacity:.9; margin-bottom:.5rem;
}
.result-card p{
  margin:.25rem 0 .75rem 0;
  font-size: clamp(14px, 2vw, 16px);
}

.result-actions{
  display:flex; flex-wrap:wrap; gap:10px;
}
.result-actions a{
  display:inline-block;
  border-radius: 999px;
  padding: .6rem 1rem;
  background: #222;
  color: bisque;
  text-decoration:none;
  font-weight:700;
  font-size: clamp(13px, 1.6vw, 15px);
  border:1px solid rgba(237,188,42,.25);
}
.result-actions a:hover{ background:#333; }

/* am Handy*/
@media (max-width: 700px){
  .result-card{ grid-template-columns: 1fr; }
}
/*____________ Youtube-Video responsiv und mittig ______________*/
.video-tutorial {
  display: flex;
  justify-content: center; 
  margin: 2rem auto;        
}

.video-tutorial iframe {
  max-width: 100%;          
  height: auto;
  aspect-ratio: 16 / 9;     
  border-radius: 8px;        
}
/* Zustimmungsbanner wegen Datenschutz*/
.yt-consent{ 
  display:grid; place-items:center; gap:.75rem;
  max-width: min(100%, 960px); margin: 1rem auto;
  border:1px solid rgba(237,188,42,.25); border-radius:12px; padding:1rem;
  background:#111; text-align:center;
}
.yt-consent iframe{ width:100%; height: min(56.25vw, 540px); border:0; border-radius:8px; }

/* --------  3 Parallax-Videos von mir in einer Reihe (vor dem Kapitel Songs) -------- */
/* --- Horizontaler Scroll-Abschnitt --- */
.h-scroll{
  position: relative;
  height: 100vh;
  background: transparent; 
  overflow: clip;          
  isolation: isolate;
}


.h-scroll::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 8%,
    rgba(0,0,0,0) 92%,
    rgba(0,0,0,0) 100%
  );
  mix-blend-mode: normal;
  z-index: 2;
}


.h-scroll__wrapper{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}


.h-scroll__inner{
  display: flex;
  height: 100%;
  will-change: transform;
  transform: translate3d(0,0,0);
}


.h-slide{
  flex: 0 0 50vw;
  height: 100vh;
  object-fit: cover;
}

/* am Handy */
@media (max-width: 768px){
  .h-slide{ flex-basis: 100vw; }
}

/*  Fade an den Rändern */
.h-slide{
  position: relative;
  -webkit-mask-image: radial-gradient(150% 100% at 50% 50%, #000 60%, rgba(0,0,0,0.75) 80%, transparent 100%);
          mask-image: radial-gradient(150% 100% at 50% 50%, #000 60%, rgba(0,0,0,0.75) 80%, transparent 100%);
}

.h-scroll{
  height: 300vh; 
}


/*_______________ Flip-Cards mit den Genres ____________________*/

#genre_box{
  display: grid;
  gap: 18px;
  width: min(360px, 86vw);   
  margin: 0 auto;            
}


@media (min-width: 980px){
  #genre_box{
    grid-template-columns: 1fr 1fr;
    width: min(760px, 92vw);
  }
}

/* _________Flip-Card Grundgerüst ___________ */
.flip-card{
  --hue: 260; 
  --bg1: hsl(var(--hue) 70% 38%);
  --bg2: hsl(var(--hue) 70% 24%);
  --ring: hsla(45, 90%, 55%, .45);
  width: 100%;
  aspect-ratio: 5/7;        
  perspective: 1000px;
}

.flip-card-inner{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* Vorder- und Rückseite */
.flip-card-front,
.flip-card-back{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  padding: 1rem .75rem;
  border-radius: 14px;
  color: bisque;
  backface-visibility: hidden;
  outline: 1px solid rgba(237,188,42,.25);

  /* Verlauf und Muster auf den Karten */
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.10) 0 6px,
      rgba(255,255,255,0)   6px 14px),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.flip-card-front b{ 
  font-size: clamp(18px, 3.2vw, 22px); 
  letter-spacing:.4px; 
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.flip-card-back{
  transform: rotateY(180deg);
}
.flip-card-back .card_autorname{
  margin: 0 0 .25rem 0;
  color: #edbc2a;
}


.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner{
  transform: rotateY(180deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
}


.flip-card-front::before,
.flip-card-front::after,
.flip-card-back::before,
.flip-card-back::after{
  content:"";
  position:absolute; left:8%; right:8%; height:10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  mix-blend-mode: screen; pointer-events:none;
}
.flip-card-front::before, .flip-card-back::before{ top:10px; }
.flip-card-front::after,  .flip-card-back::after{ bottom:10px; transform:scaleX(-1); }


.flip-card a, .flip-card button{ border:0; background:none; color:inherit; }
.flip-card :focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }

.flip-card-inner.is-flipped{ transform: rotateY(180deg); }



/*____________ Farbkomposition der Links im Body (ohne Navbar)_______________*/
/* Normaler Link */
#main a:link {
  color: gray;       
  text-decoration: none; 
}

/* Besuchter Link */
#main a:visited {
  color: gray;
}

/* Hover-Effekt */
#main a:hover {
  color: orange;
  text-decoration: underline;
}

/* Während des Klicks */
#main a:active {
  color: orange;
}


/*_____________ scroll-up Button _________________*/

#scroll-up {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: black;       
  border-radius: 50%;      
  display: grid;
  place-items: center;
  z-index: 1000;
  cursor: pointer;
}

/* der Pfeil */
#scroll-up img {
  width: 60%;   
  height: auto;
}


/*________Zeilenabstand_____*/
body {
  line-height: 2;
}

/*________ Schrift von der Controller-Box _________*/

/* Flip-Card Rückseite */
.flip-card-back{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 1rem;
}

.flip-card-back p{
  max-width: 90%;
  margin: .35rem 0;
  font-size: clamp(12px, 1.6vw, 16px);
  line-height: 1.35;
}


.flip-card-back a{
  display:inline-block;           
  max-width: 100%;
  word-break: break-word;        
  overflow-wrap: anywhere;       
  text-decoration: underline;
  color: #edbc2a;
}


/*__________ Impressum und Datenschutz _____________*/
/*  Formatierung des Impressum u. Datenschutz Bereich */
#impressumdatenschutz {
  background: rgba(0, 0, 0, 0.5); 
  text-align: center;             
  padding: 1rem;                 
  margin-top: 2rem;               
  border-radius: 8px;      
  flex-wrap: wrap;               /* Anpassung an kleine Bildschirme*/
  justify-content: center;       
  gap: 0.5rem;       
}

/* Links im Footer */
#impressumdatenschutz .footera {
  color: bisque;                  
  text-decoration: none;          
  margin: 0 0.5rem;               
}

#impressumdatenschutz .footera:hover {
  text-decoration: underline;     
}