/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */

body {
    margin: 0px;
    overflow: hidden;
}

noscript {
    display: block;
    text-align: center;
    padding-top: 100px;
    font-size: 20px;
}

.v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.fullscreen-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
}

.fullscreen-open {
    background-image: url('media/fullscreen_open.svg');
}

.fullscreen-close {
    background-image: url('media/fullscreen_close.svg');
}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

/* Dark Theme */

.v3d-simple-preloader-background {
    background-color: #181818;
}

.v3d-simple-preloader-container {
    filter: drop-shadow(0px 0px 4px #000000);
}


.v3d-simple-preloader-logo {
    background-image: url('media/Preloader_HOZ.jpg');
}

.v3d-simple-preloader-bar {
    background: linear-gradient(90deg, #ffffff, #cdfeba);
    height: 3px;
    border-color: #000000;
}


.v3d-annotation {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}



:root {
  --label-height: 25px;
  --label-rotation: -20deg;
  --label-anim-dur: 1500ms;
}




/* dein vorhandenes Styling */
.v3d-annotation img {
  display: block;
  margin: 0;
  height: var(--label-height);
  width: auto;
  transform-origin: left bottom;
  transform: rotate(var(--label-rotation)) scale(1);
  transition: transform var(--label-anim-dur) ease, opacity var(--label-anim-dur) ease;
}

/* Zustand: alle Labels verstecken */
.labels-hidden .v3d-annotation img {
  transform: rotate(var(--label-rotation)) scale(0);
  opacity: 0;
}






/* dein vorhandenes Styling */
.v3d-annotation img {
  display: block;
  margin: 0;
  height: var(--label-height);
  width: auto;
  transform-origin: left bottom;
  transform: rotate(var(--label-rotation)) scale(1);
  transition: transform var(--label-anim-dur) ease, opacity var(--label-anim-dur) ease;
}

/* Zustand: alle Labels verstecken */
.labels-hidden .v3d-annotation img {
  transform: rotate(var(--label-rotation)) scale(0);
  opacity: 0;
}




.v3d-annotation-dialog {
  background: rgba(0, 0, 0, 0.35);                 /* leicht dunkler Hintergrund */
  border: 1px solid rgba(255, 255, 255, 0.5);      /* feiner Rahmen */
  border-radius: 8px;                               /* Ecken-Rundung */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);          /* dezenter Schatten */

  padding: 8px 12px;
  box-sizing: border-box;

  /* sorgt dafür, dass der Rahmen schon sichtbar ist,
     auch wenn innen noch keine Buchstaben stehen */
  min-width: 260px;
  min-height: 90px;

  display: inline-flex;
  align-items: center;
  

}



@font-face {
  font-family: 'GTPressuraMonoLt';
  src: url('fonts/GT-Pressura-Mono-Light-Trial.woff2') format('woff2'),
       url('fonts/GT-Pressura-Mono-Light-Trial.woff') format('woff');
  font-weight: 100; /* oder normal, je nach Schnitt */
  font-style: normal;
  

    
}



@font-face {

    font-family: 'GTPantheonTextLt';
  src: url('fonts/GT-Pantheon-Text-Light-Trial.woff2') format('woff2'),
       url('fonts/GT-Pantheon-Text-Light-Trial.woff') format('woff');
  font-weight: 100; /* oder normal, je nach Schnitt */
  font-style: normal;

}






/* Annotation Labels */

.label-anim {
  font-family: 'GTPressuraMonoLt', monospace;

  font-weight: 100;
  color: #CDFEBA;
  text-align: center;
  display: inline-block;
  line-height: 1;              /* kompakte Zeilenhöhe */
  
}


/* jede Zeile */
.label-anim .line {
  display: block;
  white-space: nowrap;
  margin-bottom: 0.2em;        /* feiner Zeilenabstand */
  font-size: 0;
}

/* Buchstaben in der Zeile */
.label-anim .line span {
  display: inline-block;
  font-size: 30px;
  line-height: 1;              /* kein weiterer Vertikalraum */
  margin-right: 0.06em;
}

/* kein Extra-Abstand nach dem letzten Buchstaben */
.label-anim .line span:last-child {
  margin-right: 0;
}

/* letzte Zeile ohne extra margin-bottom */
.label-anim .line:last-child {
  margin-bottom: 0;
}

/* Extra-Abstand nach "HOME" vor "of" */
.label-anim .line span.space-after-word {
  margin-right: 0.8em;
}


.label-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #CDFEBA;
  border-radius: 6px;
  box-shadow: none;
  box-sizing: border-box;

  position: absolute;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);

  /* nur EIN padding */
  padding: 8px 16px 5px;

  /* vertikale Zentrierung robust machen */
  display: flex;
  align-items: center;
  justify-content: center;

  /* fixe Höhe optional:
     wenn dir exakte Höhe wichtig ist, lassen,
     sonst lieber min-height */
  height: 45px;
  /* oder: min-height: 45px; */
}






/* SCROLL BOXEN */

.label-anim-scroll {
  font-family: 'GTPressuraMonoLt', monospace;
  font-weight: 100;
  color: #CDFEBA;
  text-align: left;
  display: inline-block;
  line-height: 1;              /* kompakte Zeilenhöhe */
}


/* jede Zeile */
.label-anim-scroll .line {
  display: block;
  white-space: nowrap;
  margin-bottom: 0.2em;        /* feiner Zeilenabstand */
  font-size: 0;
}

/* Buchstaben in der Zeile */
.label-anim-scroll .line span {
  display: inline-block;
  font-size: 30px;
  line-height: 1;              /* kein weiterer Vertikalraum */
  margin-right: 0.06em;
}

/* kein Extra-Abstand nach dem letzten Buchstaben */
.label-anim-scroll .line span:last-child {
  margin-right: 0;
}

/* letzte Zeile ohne extra margin-bottom */
.label-anim-scroll .line:last-child {
  margin-bottom: 0;
}

/* Extra-Abstand nach "HOME" vor "of" */
.label-anim-scroll .line span.space-after-word {
  margin-right: 0.8em;
}



.label-box-scroll {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #CDFEBA;
  border-radius: 6px;
  box-shadow: none;

  box-sizing: border-box;
  min-width: 1px;
  height: 77px;
  padding: 6px 16px;
  text-align: left;

  position: relative;   /* <<< neu, wichtig für die Nadel */ 
  top: -50px;   /* oder ein kleiner Wert wie 4px */
  
  
   padding: 8px 16px 5px 16px;  /* oben 7px, unten 5px */

}




/* SCROLL TEXTBOXEN */

.label-anim-textbox {
  font-family: 'GTPantheonTextLt', light;
  letter-spacing: 1.5px;
  font-weight: 100;
  color: #CDFEBA;
  text-align: left;
  display: inline-block;
  line-height: 1;              /* kompakte Zeilenhöhe */
}


/* jede Zeile */
.label-anim-textbox .line {
  display: block;
  white-space: nowrap;
  margin-bottom: 0.2em;        /* feiner Zeilenabstand */
  font-size: 0;
}

/* Buchstaben in der Zeile */
.label-anim-textbox .line span {
  display: inline-block;
  font-size: 20px;
  line-height: 1.4;              /* kein weiterer Vertikalraum */
  margin-right: 0.06em;
}

/* kein Extra-Abstand nach dem letzten Buchstaben */
.label-anim-textbox .line span:last-child {
  margin-right: 0;
}

/* letzte Zeile ohne extra margin-bottom */
.label-anim-textbox .line:last-child {
  margin-bottom: 0;
}

/* Extra-Abstand nach "HOME" vor "of" */
.label-anim-textbox .line span.space-after-word {
  margin-right: 0.8em;
}

.label-anim-textbox .line span {
  white-space: pre-line;  /* \n → neue Zeile */
}



.label-box-textbox {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #CDFEBA;
  border-radius: 6px;
  box-shadow: none;

  box-sizing: border-box;
  min-width: 1px;
  height: auto;
  padding: 6px 16px;
  text-align: left;

  position: relative;   /* <<< neu, wichtig für die Nadel */ 
  top: 0px;   /* oder ein kleiner Wert wie 4px */
}