@charset "utf-8";
/* CSS Document */

body.seite1 {
    background-color: #333; /* Dunkler Hintergrundfarbe */
    color: #fff; /* Helle Textfarbe */
	font-family: 'B612', sans-serif;
}

body.seite2 {
    background-color: pink;
}


p {
    margin: 3px; /*  äußeren Abstand */
    padding: 3px; /* inneren Abstand */
    text-align: center; /* Zentriert den Text horizontal */
    line-height: 1; /* Setzt die Zeilenhöhe auf 1, um die Textzentrierung zu verbessern */
}

/* Stile für Links */
a {
    color: #333; /* Farbe für Links */
    text-decoration: none; /* Unterstreichungen entfernen */
    transition: color 0.3s; /* Übergang für Farbänderungen */
	font-family: 'B612', sans-serif;
}

/* Stile für Links im Hover-Zustand */
a:hover {
    color: #0056b3; /* Farbe für Links im Hover-Zustand */
	font-family: 'B612', sans-serif;
}


/* Styles für das Overlay */

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 9999;
}

#overlay-image {
    max-width: 80%;
    max-height: 80%;
	margin-top: 5%; /* Hier wird der Abstand vom oberen Rand eingestellt */
}


#overlay-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.blau {
	 background-color: rgba(173, 216, 230, 0.7); /* Hellblau mit 70% Transparenz */
}

.mint {
	background-color: rgba(144, 238, 144, 0.7); /* Mintgrün mit 70% Transparenz */
}
	
.hidden {
    display: none;
}



/* CSS-Stil für den Zielbereich */
#zielBereich {
	margin-top: 0px;
	border: 0px solid #ccc;
	padding: 0px;
	font-family: 'B612', sans-serif;
	background-color:#ADD8e8;
}

/* CSS-Stil für die Tabelle */
table {
	/* width: 100%; */
	border-collapse: collapse;
	border: 0px solid #333;
	font-family: 'B612', sans-serif;
}



th {
	border: 0px solid #FFFFF;
	padding: 8px;
	text-align: left;
	font-family: 'B612', sans-serif;
	font-variant: small-caps; /* Stellt den Text in Kapitälchen dar */
}

td {
	border: 0px solid #FFFFFF;
	padding: 3px;
	text-align: left;
}

/* Zentriert den Inhalt horizontal und vertikal in Tabellenzellen */
td.zentriert {
	text-align: center;
	vertical-align: middle;
}

/* Linksausgerichteter Text in Tabellenzellen */
td.links {
	text-align: left;
	font-family: 'B612', sans-serif;
}

/* Hintergrundfarbe für die erste Tabelle */
.tabelle1 {
	background-color: lightgreen;
}

.table1 {
	background-color: lightgreen;
}

/* Hintergrundfarbe für die zweite Tabelle */
.tabelle2 {
	background-color: lightblue;
}

.table2 {
	background-color:lightcoral;
}
	
/* Hintergrundfarbe für die dritte Tabelle */
.tabelle3 {
	background-color: lightcoral;
}

.table3 {
	background-color: lightblue;
}

.table4 {
	background-color: lightskyblue;
}

.table5 {
	background-color: lightsteelblue;
}

.table6 {
	background-color: palegoldenrod;
}

.table7 {
	background-color: wheat;
}

.table8 {
	background-color: tan;
}

.table9 {
	background-color: salmon;
}

.table10 {
	background-color: tomato;
}

.table11 {
	background-color: orangered;
}

/* CSS für die Toggle-Buttons bei den Aktionen oben */
.toggle-container {
    position: relative;
    width: 50px;
}

.toggle-label {
    display: block;
    width: 50px;
    height: 30px;
    background-color: green; /* Standardfarbe, wenn nach links geschoben */
    border-radius: 15px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.toggle-label:after {
    content: attr(data-icon); /* Verwende den Wert des data-icon-Attributs */
    display: block;
    width: 30px;
    height: 30px;
    background-color: white;
    color: red; /* Ändere dies zur gewünschten Textfarbe */
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 30px; /* Zentriere den Text vertikal */
    text-align: center; /* Zentriere den Text horizontal */
    transition: transform 0.3s ease;
}




input[type="checkbox"].hidden {
    display: none;
}

input[type="checkbox"]:checked + .toggle-label {
    background-color: red; /* Farbe, wenn nach rechts geschoben */
}

input[type="checkbox"]:checked + .toggle-label:after {
    transform: translateX(20px); /* Verschieben nach rechts */
}


/* Text-Styles */
.aktion-text {
  color: green; /* Default-Farbe */
}

.aktion-text.clicked {
  color: red;
}


/* css für die Stufentabelle		
* Stil für Zeilen mit schwarzer Schrift */
tr.black-text {
    color: white;
	font-family: 'B612', sans-serif;
    font-size: 16px; /* Ändern Sie die Schriftgröße nach Bedarf */
}


/* Gemeinsamer Stil für Zeilen mit kleinem, grauem Text */
tr.gray-text {
    color: lightgray;
    font-size: 2px; /* Ändern Sie die Schriftgröße nach Bedarf */
}

/* Stil für Zeilen mit verkleinerter Zeilenhöhe */
.small-row td {
 	padding-top: 1px; /* Padding oben 1px */
    padding-bottom: 1px; /* Padding unten 1px */
}

/* Stil für die Checkbox-Zellen */
.small-row td:first-child {
    flex: 0 0 auto; /* Behalten Sie die ursprüngliche Breite der Checkbox-Zelle bei */
}


/* Stil für die Zahl und die Buttons */
td .zahlAnzeige,
td .erniedrigenButton,
td .zuruecksetzenButton,
td .startZahl {
    margin: 0px; /* Entfernt den äußeren Abstand */
    padding: 0px; /* Entfernt das innere Padding */
    line-height: 1; /* Setzt die line-height auf 1, um den Abstand zu verringern */
}


.table-container {
  display: flex;
  
}

.table1,
.table2,
.table3,
.table4,
.table5,
.table6,
.table7,
.table8,
.table9,
.table10,
.table11 {
  display: inline-block;
  margin-right: 10px; /* Optional: Fügen Sie einen Abstand zwischen den Tabellen hinzu */
  font-family: 'B612', sans-serif;
  font-size: 16px; /* Passen Sie die Schriftgröße nach Bedarf an */
  border: 0;
}

.open-website-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #F44336; /* Rote Farbe */
    color: white;
    border: none;
    border-radius: 25px; /* Runde Ecken */
    text-decoration: none;
	font-family: 'B612', sans-serif;
    font-size: 20px; /* Größe der Schrift anpassen */
    font-weight: bold; /* Fettschrift */
    text-transform: uppercase; /* Text in Großbuchstaben */
    letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
    transition: background-color 0.3s; /* Übergang für Hover-Effekt */
}

.open-website-button:hover {
    background-color: #D32F2F; /* Rote Farbe im Hover-Zustand */
}

.counter-container {
  text-align: center;
}

/* Stil für den Trefferpunkte-Zähler */
.hp-counter-container {
  text-align: center;
  margin-top: 30px;
  font-family: 'B612', sans-serif;
  
}

.hp-counter-container button {
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
}

.hpCounter {
    font-size: 48px;
    margin: 10px 0;
    color: #E66C37; /* goldene Zahl */
}

.plusTOne {
  background-color: lightgreen;
}

.plusTOne:hover {
    background-color: #388E3C;
}

.minusOne {
  background-color: lightcoral;
}

.minusOne:hover {
    background-color: #D32F2F;
}

.resetHp {
  background-color: lightgray;
}


/* Stil für temporäre Trefferpunkte */
.temp-hp-container {
    text-align: center;
    margin-top: 30px;
    font-family: 'B612', sans-serif;
}

.tempHpCounter {
    font-size: 48px;
    margin: 10px 0;
    color: #00BFFF; /* hellblau */
}

.plusOneBtn,
.minusPOneBtn {
    background-color: lightgreen;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
}

.plusOneBtn:hover {
    background-color: #388E3C;
}

.minusPOneBtn {
    background-color: lightcoral;
}

.minusPOneBtn:hover {
    background-color: #D32F2F;
}