:root {
  --skyblue:#3498db;					/* Eine blaue Farbe */
  --secondary-color:#2ecc71; /* Eine grüne Farbe */
  --text-color:#333; 				/* Dunkelgrauer Text */
  --error-color:#e74c3c; 		/* Eine rote Fehlerfarbe */
  --font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Font-Variable */
}

#centerframe{
  position:relative;
  height:601px;
  width:801px;
  left:50%;
  margin-left:-400px;
  background:transparent;
  border-color:transparent;
  border-width:3px;
  border-style:solid;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
}

#Ablatt{
  visibility: visible;
  background: url("pic/newplus.png") no-repeat scroll;
  animation: rotating 2s linear;
  padding: 10px;
  	background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  background-color: silver;
  left: 0px;
  top: 130px;
}

#menue{
  visibility: visible;
  background: url("pic/listezu.png") no-repeat scroll;
  animation: rotating 2s linear;
  padding: 10px;
  	background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  background-color: var(--skyblue);
  left: 0px;
  top: 0px;
}

#dropdown {
  visibility: hidden;
  display: block;
  left: 128px;
  top: 0px;
  height: 560px;
  padding-right: 10px;
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
  z-index: 70;
  border-radius: 20px;
}

.calc:hover {
  background-color: #E0F2FE;/*  #E0F2FE Farbe hellblau auf Menüauswahl */
  cursor: pointer;
}

#schreib1:hover {
  background-color: #FFC0CB;
  cursor: pointer;
}
.scroll-container::-webkit-scrollbar {
  width: 50px; /* Breite des Scrollbalkens */
  background-color: #AAA; /* Hintergrundfarbe */
  border-radius: 16px;
  border: 3px solid #666;
}
.scroll-container::-webkit-scrollbar-thumb {
  /* background-color: gray;  Farbe des Scrollbalkens */
  border-radius: 16px;
  /* background: linear-gradient(to bottom, red, yellow);*/
  background: radial-gradient(circle at center, #23b1ef, #fff);
   border: 3px solid #333; /* Adjust the border width and color as needed */
   background-color: lightblue;
}
.scroll-container {
  height: 400px; /* Passe die Höhe nach Bedarf an */
  overflow-y: auto;
}

ol {
  list-style-type: decimal;
}
ol li{
	padding-left: 20px;
} 
 
 
#coach{
  visibility: visible;
  background: url("pic/coach.png") no-repeat scroll 0 0 transparent;
  background-size: 48px;
	background-size: calc(100% - 14px) calc(100% - 14px);
	background-position: center center;
  left: 680px;
  top: 0px;
  background-color: silver; /* #308080 #fe3654;   */
  background-position: center;
}

#counter{
  visibility: visible;
  background: url("pic/counterstarduo.png") no-repeat scroll 0 0 transparent;
  	background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  left: 680px;
  top: 130px;
	
	  display: flex; /* Macht den Button zu einem Flex-Container */
    justify-content: center; /* Zentriert den Inhalt (das p-Element) horizontal */
	
  background-color: #808080;
  background-position: center;
	transition: transform 0.8s ease-in-out;
}
/* Eine CSS-Klasse, die die Drehung um 180 Grad definiert */
#counter.rotated {
    transform: rotate(180deg); /* Dreht das Element um 180 Grad im Uhrzeigersinn */
}

.xstarx{
	transition: transform 0.8s ease-in-out;
}
.xstarx.rotated {
  transform: rotate(180deg); /* Dreht das Element um 180 Grad im Uhrzeigersinn */
}
#speaker{
  visibility: visible;
  background: url("pic/speaker.png") no-repeat scroll 0 0 transparent;
  	background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  left: 680px;
  top: 260px;
  background-color: silver;
  background-position: center;
}

#crossred{
  visibility: hidden;
	position:absolute;
  background: url("pic/crossred.png") no-repeat scroll 0 0 transparent;
  	background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  left: 700px;
  top: 390px;
	width: 100px;
	height: 100px;
  background-position: center;
}

#hookgreen{
  visibility: hidden;
	position:absolute;
  background: url("pic/hookgreen.png") no-repeat scroll 0 0 transparent;
  	background-size: 60px 60px;
		background-position: center center;
  left: 728px;
  top: 408px;
	width: 60px;
	height: 60px;
  background-position: center;
}

#howto{
	visibility: hidden;
	position:absolute;
  height:176px;
  width:776px;
  left:0px;
  top:406px;
  background:silver;
  border-color:#808080;
  border-width:3px;
  border-style:solid;
	border-radius:10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2em;
	color:white;
	padding:10px;
	z-index: 50;
}

#myliste{
	visibility: hidden;
	position:absolute;
  height:600px;
  width:780px;
  left:0px;
  top:0px;
  background: silver;
  border-color:#808080;
  border-width:3px;
  border-style:solid;
	border-radius:16px;
	font-family: consolas;
	font-size:2em;
	color: darkblue;
	padding:16px;
	z-index: 60;
	overflow-y: auto;
	cursor: pointer;
}

#okok{
	position:absolute;
  visibility: hidden;
  left: 680px;
  top: 120px;
  background-color: #808080;
  background-position: center;
}

#mylisteok{
	position:absolute;
  visibility: hidden;
  left: 680px;
  top: 120px;
  background-color: #808080;
  background-position: center;
}

#nuller{
	visibility: hidden;
	position:absolute;
  height:140px;
  width:266px;
  left:258px;
  top:220px;
	text-align: center;
  background:silver;
  border-color:#808080;
  border-width:3px;
  border-style:solid;
	border-radius:10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2em;
	color:white;
	padding:10px;
	z-index: 20;
}

#yesnull{
	position:absolute;
  visibility: hidden;
  left: 20px;
  top: 80px;
  background-color: #808080; /*  silver; #fe3654;*/
  background-position: center;
}

#nonull{
	position:absolute;
  visibility: hidden;
  left: 160px;
  top: 80px;
  background-color: #808080;
  background-position: center;
}

/* fadinglinetop  Image: Verhalten, Aussehen, Lage*/
#fadinglinetop{
  visibility: visible;
  left: 0px;
  top: 215px;
  width: 800px;
  height: 2px;
  background-color: #808080;
}

#fadinglinetopleft{
  position: absolute;
  visibility: visible;
  left: -283px;
  top: 215px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, white, #808080);
}

#fadinglinebutleft{
  position: absolute;
  visibility: visible;
  left: -283px;
  top: 527px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, white, #808080);
}

#fadinglinetopright{
  position: absolute;
  visibility: visible;
  left: 800px;
  top: 215px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, #808080, white);
}

#fadinglinebutright{
  position: absolute;
  visibility: visible;
  left: 800px;
  top: 527px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, #808080, white);
}

#fadinglinebut{
  visibility: visible;
  left: 0px;
  top: 527px;
  width: 800px;
  height: 2px;
  background-color: #808080;
}

#zurueck{
  visibility: visible;
  background: url("pic/zurueck.png") no-repeat scroll 0 0 transparent;
	background-size: calc(100% - 14px) calc(100% - 14px);
	background-position: center center;
  left: 0px;
  top: 480px;
  background-color: #808080;
  background-position: center;
}

#hilfe{
  visibility: visible;
  background: url("pic/helpme.png") no-repeat scroll 0 0 transparent;
    background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  left: 680px;
  top: 480px;
  background-color: #808080;
  background-position: center;
}

#ersatz{
  visibility: visible;
  display: none;
  background-size: 48px;
  left: 592px;
  top: 536px;
  background-color: #808080;
  background-position: center;
}

.blubb:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;
}

/* Übungs-Inhalte */
#teller{
  visibility: visible;
  position: absolute;
  left: 135px;
  top: 505px;
  width: 540px;
  height: 90px;
  font-weight: normal;
}
#tellme{
	text-align: center;
  font-weight: normal;
	font-size: 2.8em;
	color: var(--skyblue);
}

#abbildung{
  position: absolute;
	background: url("pic/initial.png") no-repeat scroll 0 0 transparent;
  background-size: 400px;
  background-position: center;
  left: 200px;
  top: 0px;
  width: 400px;
  height: 400px;
  background-color: transparent; 
	border-radius: 14px;
}


#schreibzone{
	text-align: center;	/* Zentriert den p-Tag */
	position: absolute;
	top: 406px;
	width: 800px;
	background-color: var(--skyblue);
	padding: 0;
	margin: 0 auto; /* Zentriert das Div selbst auf der Seite */
	border-radius: 12px;
}
#mysatz{
	display: inline-block; 
	font-family: monospace;
	font-size: 2.6em;
	margin: 12px 0;
	color: white;
}
#eingabebereich {
    position: relative; /* Wichtig: Das ist der neue Bezugspunkt */
    /* Geben Sie hier die gewünschte Position für den Container an */
    top: 416px;
    width: 800px;
    margin: 0 auto;
}
#myinput{
	visibility: hidden;
	position: absolute;
	top: 0px;
	font-family: monospace;
	font-size: 2.6em;
	margin: 0px;
	text-align: center;	
	border-radius: 6px;
}



#lok{
  position: absolute;
  background: url("pic/lokblau.png") no-repeat scroll 0 0 transparent;
  background-size: 76px;
  background-position: center;
  background-color: transparent; /*green	; #308080;	#308080;  */
  left: 2px;
  top: 0px;
  width: 76px;
  height: 72px;
}



#schaffner{
	visibility: hidden;
  position: absolute;
  background: url("pic/bericht.png") no-repeat scroll 0 0 transparent;
  left: 0px;
  top: 260px;
  width: 106px;
	height: 106px;
	background-size: calc(100%) calc(100%);
	background-position: center center;
  background-color: var(--skyblue);
	border-width: 7px;
	border-color: var(--skyblue);
	border-style: solid;
	border-radius: 14px;	
}

#pfeil{
	visibility: hidden;
  position: absolute;
  background: url("pic/pfeilblau.png") no-repeat scroll 0 0 transparent;
  left: 115px;
  top: 240px;
  width: 120px;
	height: 190px;
	background-size: calc(100%) calc(100%);
	background-position: center center;
  background-color: transparent;
	z-index: 50;
}

#starleiste{
	visibility: visible;
	position:absolute;
	display: flex;
  height:60px;
  width:526px;
  left:130px;
  top:480px;
  background:transparent;
  border-color:#808080;
  border-width:0px;
  border-style:solid;
	border-radius:10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2em;
	color:white;
	padding:4px;
	z-index: 40;	
}
.xstarx{
  background: url("pic/stern1.png") no-repeat scroll 0 0 transparent;
  background-size: 140%;
  background-color: #808080;
  background-position: center;
}

.waggon{
  position: absolute;
  background: url("pic/wagen.png") no-repeat scroll 0 0 transparent;
  background-size: 72px;
  background-position: center;
  background-color: transparent; /*green	; #308080;	#308080;  */
  top: 0px;
  width: 72px;
  height: 75px;
}

.kiste{
  position: relative;
  background: url("pic/kiste.png") no-repeat scroll 0 0 transparent;
  background-size: 70px;
  background-position: center;
  background-color: transparent; /*green	#308080; #308080;	#308080;  */  
  width: 70px;
  height: 46px;
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.colordiv{
  position: absolute;
  border: none;
  z-index: 10;
}

.kachel{
  position: absolute;
  width: 120px;
  height: 120px;
  color: #FFF;
  font-size: 22px;
  border-radius: 14px;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  border: none;
  z-index: 30;
}

.broadkachel{
  position: absolute;
	display: flex; /* Macht den Button zu einem Flex-Container */
  justify-content: center; /* Zentriert den Inhalt (hier das p-Tag) horizontal */
  align-items: center;
  width: 100px;
  height: 65px;
  color: #FFF;
  font-size: 26px;
	font-weight: bold;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: none;
  z-index: 30;
}
.pp{
  font-size: 2em;
  color: #FFF;
  position: absolute;
  left: 20px;
  top: -24px;
}
.pipi{
  font-size: 2em;
  color: #FFF;
	margin-top: 10px;
	padding: 0;
}
.ppa{
  font-size: 1em;
  color: #FFF;
  
  left: 15px;
  top: -8px;
}
.pnormal{
  font-family: Arial, Helvetica, sans-serif;
}

.hook{
  font-size: 1em;
  font-weight: bold;
  color: #FFF;
  position: absolute;
  left: 44px;
  top: 16px;
}

@keyframes mymove {
  50% {transform: rotate(180deg);}
}

@keyframes mymoveback {
  50% {transform: rotate(180deg);}
}

@keyframes slideLeft {
  to {
    transform: translateX(-300%);
  }
}

@keyframes slideRight {
  from {
    transform: translateX(300%);
  }
  to {
    transform: translateX(0);
  }
}

#textInput {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	width: 700px; 
	max-width: 740px;
	min-height: 400px; 
	margin-bottom: 10px; 
	padding: 12px; 
}
#textInput:empty { 
	width: 700px;
	min-height:	400px;
}

h1 {
    color: #333;
		margin-top: 0px;
    margin-bottom: 0px;
}

#mantel {
    position: absolute; /* Bleibt bei absolut */
    top: 0px; /* Zentriert vertikal */
    left: 50%; /* Zentriert horizontal */
    transform: translate(-50%, 0%); /* Exakte Zentrierung */

    width: 761px;
    min-height: 800px; /* Wird jetzt die Mindesthöhe haben und mit Inhalt wachsen, solange kein fester 'bottom' gesetzt ist */
    max-height: 90vh; /* Optional: Um sicherzustellen, dass es nicht den gesamten Bildschirm einnimmt */
    overflow-y: auto; /* Wichtig, falls der Inhalt die max-height überschreitet */

    visibility: hidden; /* Behalten wir vorerst bei, siehe nächsten Punkt */
    background-color: #eee;
    font-family: Arial, Helvetica, sans-serif;
    border: 3px solid var(--skyblue);
    border-radius: 14px;
    padding: 20px;
    z-index: 90;
}

#Schritt1 {
	position: absolute;
	visibility: hidden;
	top: 0px;
	z-index: 100;		
}

#Schritt2 {
	position: absolute;
	visibility: hidden;
	top: 0px;
	z-index: 100;
}
.sentence-div {  
	padding: 1px 20px 2px 20px;
	background-color: white;
	font-family: monospace;
	color: blue;
	border: 1px solid var(--skyblue);
	border-radius: 7px;
	margin-bottom: 7px; 
	height: 28px;
	max-width: 600px;
	font-size: 1.6em;
}
.sentence-div:empty {
	width: 600px; 
}
#sentence {
    border: 1px solid #ccc;
    padding: 15px;
    min-height: 30px;
    width: 60%;
    max-width: 800px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 1.2em;
    line-height: 1.5;
    text-align: center; /* Zentriert den Satz */
}

/* Die Klasse für das hervorgehobene Wort */
.highlight {
    color: red;
    font-weight: bold; /* Optional: Macht das Wort auch fett */
    text-decoration: underline; /* Optional: Unterstreicht das Wort */
}
.superschmal-leerzeichen {
  /* Setzt die Schriftgröße extrem klein, z.B. 0.1px oder 0.01em */
  font-size: 0.01em; /* Oder 0.1px; experimentiere hier! */
  
  /* Reduziert den Standardabstand zwischen Wörtern */
  /*word-spacing: -0.5em;  Kann auch negative Werte annehmen, um den Abstand weiter zu verringern */
  
  /* Verhindert, dass das Leerzeichen unsichtbar wird, falls die Schriftgröße zu klein ist */
  /* Dies ist eher ein Trick für Browser, die 0px Schriftgrößen anders behandeln */
  line-height: 1; /* Stellt sicher, dass die Zeilenhöhe nicht beeinflusst wird */
  
  /* Sorgt dafür, dass das Leerzeichen auch auf sehr kleinen Geräten sichtbar bleibt */
  white-space: pre; /* Behält Leerzeichen bei, verhindert Kollabieren */
}
.cessButton {
    /* Schriftgröße */
    font-size: 20px; /* Oder eine andere Größe, die dir gefällt, z.B. 1.2em */
    font-weight: bold; /* Macht die Schrift fetter */
    color: #ffffff; /* Textfarbe: Weiß */

    /* Hintergrund und Rand */
    background-color: #007bff; /* Hintergrundfarbe: Blau (Beispiel) */
    border: none; /* Kein Rand */
    border-radius: 8px; /* Abgerundete Ecken */

    /* Innenabstand und Cursor */
    padding: 12px 25px; /* Innenabstand oben/unten und links/rechts */
    cursor: pointer; /* Zeigt eine Hand, wenn man über den Button fährt */
    
    /* Schatten für Tiefe (optional) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Übergänge für Hover-Effekte (optional) */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt: Ändert die Farbe beim Überfahren mit der Maus */
.cessButton:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Aktiver Zustand: Wenn der Button geklickt wird */
.cessButton:active {
    background-color: #004085; /* Noch dunkleres Blau */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px); /* Leicht nach unten verschieben, um einen Klick-Effekt zu simulieren */
}

#weiter {
	visibility: hidden;
}

#myBildDatei{
	position: relative;
	visibility: hidden;
	top: 0px;
	width: 540px; /* Oder eine feste Breite, z.B. 300px */
  background-color: transparent;
  padding: 2px;
  margin-top: 10px;
	z-index: 110;
}
#imageInput{
	visibility: hidden;
	max-width: 500px;
}

#previewImage{
	position:absolute;
	visibility: hidden;
  background-size: 400px;
  background-position: center;
  left: 200px;
  top: 0px;
  width: 400px;
  height: 400px;
  background-color: transparent; 
	border-radius: 10px;
}




.fileButton {
    /* Schriftgröße */
    font-size: 1.4em; /* Oder eine andere Größe, die dir gefällt, z.B. 1.2em */
    color: #ffffff; /* Textfarbe: Weiß */

    /* Hintergrund und Rand */
    background-color: #007bff; /* Hintergrundfarbe: Blau (Beispiel) */
    border: none; /* Kein Rand */
    border-radius: 8px; /* Abgerundete Ecken */

    /* Innenabstand und Cursor */
    padding: 8px 20px; /* Innenabstand oben/unten und links/rechts */
    cursor: pointer; /* Zeigt eine Hand, wenn man über den Button fährt */
    
    /* Schatten für Tiefe (optional) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Übergänge für Hover-Effekte (optional) */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt: Ändert die Farbe beim Überfahren mit der Maus */
.fileButton:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

#surrounder {
		visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden; /* Verhindert Scrollbalken, wenn das Element von 0 skaliert wird */
}

.zoom-box {
    width: 770px;
    height: 570px;
		padding: 20px;
		font-family: arial;
		font-size: 2em;
    background-color: #eee;
    border-radius: 15px;
		border-color: #3498db;
		border-width: 6px;
		border-style: solid;
		opacity: 0;
    transform: scale(0);
    transform-origin: center center;
    transition: transform 1s ease-out, opacity 1s ease-out;
    position: absolute;
    top: 0px;
		z-index: 120;
		overflow-y: auto;
}

.zoom-box.zoomed {
    opacity: 1; /* Wird sichtbar */
    transform: scale(1); /* Zoomt auf 100% Größe */
}

#optbut{
	background-color: var(--skyblue);
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 12px;
}
#optbut:hover{
	background-color: blue;
}

#optweg{
	font-family: Arial;
	font-size: 2.5em;
	color: white;
	margin: 8px;
}

.sentence-div {  
	padding: 1px 20px 2px 20px;
	background-color: white;
	font-family: monospace;
	color: blue;
	border: 1px solid var(--skyblue);
	border-radius: 7px;
	margin-bottom: 7px; 
	height: 28px;
	max-width: 600px;
	font-size: 1.6em;
	user-select: none;
	cursor: pointer; 
}
.sentence-div:empty {
	width: 600px; 
}		
.sentence-div span {
		transition: color 0.3s ease;
}
.rot {
		color: red !important;
}

#alleSaetzeRotNachricht {
		margin-top: 30px;
		padding: 15px 30px;
		background-color: #d4edda;
		color: #155724;
		border: 1px solid #c3e6cb;
		border-radius: 5px;
		font-size: 1.6em;
		display: none; /* Anfangs versteckt */
}

.is-safari #myinput {
  top: 0px;
}