html{scroll-behavior:smooth}
h1 {text-align: center; font-family: Arial, Helvetica, sans-serif;}
h2 {font-family: Arial, Helvetica, sans-serif;}

html, body {
    overflow-x: hidden; /* Verhindert das horizontale Scrollen */
    width: 100%;       /* Stellt sicher, dass der Body nur die Viewport-Breite hat */
}

#ausgabe, #ausgabe2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
}

#mittelbau {
  text-align: left;
  margin: 0 auto; 
  width: 100%;
}


audio {
	width: 320px;
}

/* Add a gray background color to the top navigation */
.topnav {
  float: right;
  background-color: #666666;
  overflow: hidden;
  border-radius: 12px;
  height: 40px;
  padding-top: 10px;
  margin-top: 4px;
  margin-left: 4px;
}

/* Style the links inside the navigation bar */
.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 18px 10px;
  text-decoration: none;
  font-size: 26px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}


.topmen {
  float: left;
  background-color: #666666;
  overflow: hidden;
  border-radius: 10px;
  height: 30px;
  padding-top: 8px;
  margin-bottom: 12px;
  margin-left: 4px;
}

/* Style the links inside the navigation bar */
.topmen a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 6px;
  text-decoration: none;
  font-size: 20px;
}

/* Change the color of links on hover */
.topmen a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topmen a.active {
  background-color: #04AA6D;
  color: white;
}

#pause, #play, #stop, #duration, #pause2, #play2, #stop2, #duration2 {
	font-size: 26px; 
	background: #5a9900 linear-gradient(#8db243, #5a9900); 
	color: white; 
	padding: .4em .8em; 
	border: medium solid green; 
	border-radius: 0 .6em .6em;
	margin: .2em;
	cursor: pointer;
}


.but {
  background-color: #bbbbbb;  /*Silber */
  border: solid 1px black;
  color: black;
  padding: 5px 8px;
  text-align: center;
  text-decoration: none;
  font-family: arial;    
  font-size: 2em; /* 24px;*/
  font-weight: 950;
  border-radius: 6px;
  cursor: pointer;
  z-index:3;
  
}


.but:active {
  box-shadow: 0 -15px #666;
  transform: translateY(15px);
}



:root {
--number-turns: 5turn;
--end-angle: 0deg;

--balken: #ff7b00; 				/* Blaue Farbe: var(--balken) für Slider-Schieberegler Abspiel-Tempo */
--schieber: #007bff; 			/* Orange Farbe für Slider-Schieberegler Abspiel-Tempo */
--hoehebalken: 40px;			/* Werte für Slider-Schieberegler Abspiel-Tempo */
--radiusbalken: 20px;			/* Werte für Slider-Schieberegler Abspiel-Tempo */
--hoeheschieber: 80px;		/* Werte für Slider-Schieberegler Abspiel-Tempo */
--breiteschieber: 80px;		/* Werte für Slider-Schieberegler Abspiel-Tempo */
--radiusschieber: 20px;		/* Werte für Slider-Schieberegler Abspiel-Tempo */
}

@keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(
var(--number-turns)
);
}
}

.cat {
animation: translating 8s cubic-bezier(0.15, 0.0, 0.5, 1.0);
display: flex;
flex-wrap : nowrap;
justify-content : space-around;
align-items: center;
background: transparent;
}
#drehscheibe {	/* Bild Jo Linkert - Golfball */
	width: 18vw;
	height: auto;
}
.disc {
	animation: rotating 8s cubic-bezier(0.15, 0.0, 0.5, 1.0);
	color: transparent;
	background: transparent;
	transform:rotate(var(--end-angle));
}
.bild {
  /* Standard-Dauer als CSS-Variable definieren (z.B. 500ms) */
  --duration: 100ms;
  
  /* Die Transition verwendet die Variable */
  transition: opacity var(--duration) ease-in;
  
  /* Ausgangszustand: unsichtbar, nimmt aber Platz ein */
  opacity: 0;
  
  /* Wichtig: visibility auf visible lassen, damit opacity animiert werden kann */
  visibility: visible; 
}
.bild.sichtbar {
  /* Endzustand */
  opacity: 1;
}













.vw-proportional {
	position: absolute;
	margin-top: -26vw;
	width: 24vw;
	height: auto;
}
#iron7 {
    position: absolute;
		
		/* Setze einen Standardwert (z.B. 1000ms) */
    --duration: 1000ms;    
		
		/* Jetzt TRANSFORMATION animieren! */
    transition: transform var(--duration) ease-in-out; 
    
		/* Wichtig: Die Basis-left-Position beibehalten! */
    /* (Muss von .vw-proportional oder direkt gesetzt sein) */
    left: 60vw; 
}
/* KORREKTUR für kleinere Viewports (Mobile/Tablet) */
@media (max-width: 1024px) {
    #iron7 {
        /* Wert anpassen, z.B. um 1vw weiter nach rechts */
        left: 61.5vw; 
    }
}
#iron7.move-right {
    /* Verschiebt das Element von 60vw nach 20vw */
    transform: translateX(36vw); 
}
#iron7.move-left {
    /* Verschiebt das Element von 60vw nach -50vw */
    transform: translateX(-90vw);
}

@keyframes translating {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0px);
}
}



#tempoSliderdiv{
	text-align: center;
	margin: 50px 0px;
}

	
input[type=range] {
    -webkit-appearance: none; /* WebKit/Chrome/Safari/Edge/Opera */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* Standard-Eigenschaft */
    background: transparent;  /* Hintergrund entfernen */
    width: 60%;              /* Breite definieren */
}
input[type=range]:focus {
    outline: none; 
}

/* Balken "track" des Sliders anpassen */
/* Firefox */
input[type=range]::-moz-range-track {
    background: var(--balken);
    height: var(--hoehebalken);
    border-radius: var(--radiusbalken);
}

/* WebKit/Chrome/Safari/Edge/Opera */
input[type=range]::-webkit-slider-runnable-track {
    background: var(--balken);
    height: var(--hoehebalken);
    border-radius: var(--radiusbalken);
}

/* IE/Edge (Optional, für ältere Browser) */
input[type=range]::-ms-track {
    background: var(--balken);
    height: var(--hoehebalken);
    border-radius: var(--radiusbalken);
}




/* Schieberegler "thumb" anpassen */
/* Firefox */
input[type=range]::-moz-range-thumb {
    -moz-appearance: none; /* Wichtig für Firefox */
    background: var(--schieber);
    height: var(--hoeheschieber);
    width: var(--breiteschieber);
    border-radius: var(--radiusschieber);
    cursor: pointer;
}

/* WebKit/Chrome/Safari/Edge/Opera */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Wichtig für WebKit */
    background: var(--schieber);
    height: var(--hoeheschieber);
    width: var(--breiteschieber);
    border-radius: var(--radiusschieber);
    cursor: pointer;
    margin-top: -20px;  /* Korrektur für die vertikale Ausrichtung */
}

/* IE/Edge (Optional, für ältere Browser) */
input[type=range]::-ms-thumb {
    background: var(--schieber);
    height: var(--hoeheschieber);
    width: var(--breiteschieber);
    border-radius: var(--radiusschieber);
    cursor: pointer;
}