/* datatool.css von KaMi */

/* Team */
.team-container {
  display: flex;
  /* Aktiviert Flexbox */
  justify-content: center;
  /* Zentriert die team-box horizontal, wenn weniger Platz benötigt wird */
}

.team-box {
  border: 3px solid #8B4513;
  /* dunkelbrauner Rand */
  border-radius: 15px;
  /* abgerundete Ecken */
  padding: 10px;
  margin: 10px;
  background-image: url('../images/console-bg.png');
  background-color: #F5F5DC;
  /* beige Hintergrund */
  width: 250px;
  /* angepasste Breite, kann je nach Bedarf eingestellt werden */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  /* subtiler Schatten */
  box-sizing: border-box;
  /* Stellt sicher, dass die Padding- und Border-Größen innerhalb der angegebenen Breite enthalten sind */
}

.team-box h3 {
  color: #8B4513;
  /* dark brown text */
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #8B4513;
  /* dark brown line */
}

.team-box img {
  width: 100px;
  /* festgelegte Breite */
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 10px;
  /* Abstand zwischen Bild und Text */
  float: right;
  /* Bild rechts ausrichten */
}

.team-box ul {
  list-style-type: none;
  /* remove bullet points */
  padding: 0;
  margin: 0;
}

.team-box li {
  margin-bottom: 5px;
  font-size: 0.9em;
  /* smaller font size */
}

/* User */
.user-container {
  display: flex;
  /* Aktiviert Flexbox */
  justify-content: center;
  /* Zentriert die team-box horizontal, wenn weniger Platz benötigt wird */
}

.user-box {
  border: 3px solid #8B4513;
  /* dunkelbrauner Rand */
  border-radius: 15px;
  /* abgerundete Ecken */
  padding: 10px;
  margin: 10px;
  /*background-image: url('../images/console-bg.png');*/
  background-color: #F5F5DC;
  /* beige Hintergrund */
  width: 250px;
  /* angepasste Breite, kann je nach Bedarf eingestellt werden */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  /* subtiler Schatten */
  box-sizing: border-box;
  /* Stellt sicher, dass die Padding- und Border-Größen innerhalb der angegebenen Breite enthalten sind */
}

.user-box h4 {
  color: #8B4513;
  /* dark brown text */
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #8B4513;
  /* dark brown line */
}

.user-box img {
  width: 100px;
  /* festgelegte Breite */
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 10px;
  /* Abstand zwischen Bild und Text */
  float: right;
  /* Bild rechts ausrichten */
}

.user-box ul {
  list-style-type: none;
  /* remove bullet points */
  padding: 0;
  margin: 0;
}

.user-box li {
  margin-bottom: 5px;
  font-size: 0.9em;
  /* smaller font size */
}

/* Stats */
.stats-container {
  display: flex;
  /* Aktiviert Flexbox */
  justify-content: center;
  /* Zentriert die team-box horizontal, wenn weniger Platz benötigt wird */
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  /* Negativer Außenabstand, um die Innenabstände der Kinder auszugleichen */
}

.stats-box {
  border: 3px solid #8B4513;
  /* dunkelbrauner Rand */
  border-radius: 15px;
  /* abgerundete Ecken */
  padding: 10px;
  margin: 10px;
  background-image: url('../images/console-bg.png');
  background-color: #f5f5dc77;
  /* beige Hintergrund */
  width: 190px;
  /* angepasste Breite, kann je nach Bedarf eingestellt werden */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  /* Schatten für die Boxen */
  box-sizing: border-box;
  /* Stellt sicher, dass die Padding- und Border-Größen innerhalb der angegebenen Breite enthalten sind */
}

.stats-box h1,
.stats-box h2,
.stats-box h3,
.stats-box h4,
.stats-box h5,
.stats-box h6 {
  color: #8B4513;
  /* dark brown text */
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #8B4513;
  /* dark brown line */
}

.stats-box ul {
  list-style-type: none;
  /* remove bullet points */
  padding: 0;
  margin: 0;
}

.stats-box li {
  margin-bottom: 5px;
  font-size: 0.9em;
  /* smaller font size */
}

/* News */
.news-container {
  display: flex;
  /* Aktiviert Flexbox */
  justify-content: center;
  /* Zentriert die team-box horizontal, wenn weniger Platz benötigt wird */
  margin-left: 15px;
  margin-right: 15px;
}

.news-row {
  display: flex;
  flex-wrap: wrap;
}

.news-box {
  border: 2px solid #8B4513;
  /* dunkelbrauner Rand */
  border-radius: 20px;
  /* abgerundete Ecken */
  padding: 10px;
  margin: 5px;
  /*background-image: url('../images/console-bg.png');*/
  background-color: #ecec9d1c;
  /* Hintergrund */
  width: 97%;
  /* angepasste Breite, kann je nach Bedarf eingestellt werden */
  height: 450px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  /* Schatten für die Boxen */
  box-sizing: border-box;
  /* Stellt sicher, dass die Padding- und Border-Größen innerhalb der angegebenen Breite enthalten sind */

}

.news-box h1,
.news-box h2,
.news-box h3,
.news-box h4,
.news-box h5,
.news-box h6 {
  color: #8B4513;
  /* dark brown text */
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #8B4513;
  /* dark brown line */
}

.news-box ul {
  list-style-type: none;
  /* remove bullet points */
  padding: 0;
  margin: 0;
}

.news-box li {
  margin-bottom: 5px;
  font-size: 0.9em;
  /* smaller font size */
}

.post-border {
  border: 1px solid #ccc;
  /* Grauer Rahmen */
  padding: 10px;
  /* Etwas Abstand zwischen dem Text und dem Rahmen */
  margin-bottom: 10px;
  /* Abstand zwischen den Beiträgen */
}


/* Clearfix Container */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Für ältere Browser */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  /* Für IE 6/7 (IE 6 und 7 erkennen nicht ::after) */
}

/* Schiffbaurechner */
.c {
  width: 160px;
  /* Oder jede andere gewünschte Breite */
}

/**/
.container_oz {
  margin: 5px auto;
  font-size: 14px;
  width: 80%;
  border-collapse: separate;
  /* Um cellspacing zu simulieren */
  border-spacing: 2px;
  /* Um cellspacing zu simulieren */
  padding: 10px;
  border: 2px solid goldenrod;
  border-radius: 14px;
}

.container_oz_black {
  margin: 5px auto;
  font-size: 14px;
  width: 80%;
  border-collapse: separate;
  /* Um cellspacing zu simulieren */
  border-spacing: 2px;
  /* Um cellspacing zu simulieren */
  padding: 11px;
  border: 2px solid black;
  border-radius: 14px;
}

.grid-container-team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: ". . " ". . ";
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: stretch;
}

/* Stil für die einzelnen Zellen */
.grid-container div {
  background-color: #f0f0f0;
  /* Hintergrundfarbe der Zellen */
  padding: 10px;
  /* Innenabstand der Zellen */
  text-align: center;
  /* Zentrierte Ausrichtung des Texts */
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  border: 2px solid rgb(27, 27, 27);
}

.grid-container-oz {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* 10 Spalten mit gleicher Breite */
  grid-gap: 5px;
  /* Abstand zwischen den Zellen */
  padding: 5px;
  /* Innenabstand des Containers */

}

/* Stil für die einzelnen Zellen */
.grid-container-oz div {
  padding: 3px;
  /* Innenabstand der Zellen */
  text-align: center;
  /* Zentrierte Ausrichtung des Texts */
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid rgb(27, 27, 27);
}

.grid-item {
  display: grid;
  overflow: hidden;

}

.box_team_green {
  border-width: 3px;
  /* Breite des Rahmens */
  border-style: solid;
  /* Stil des Rahmens (kann auch 'dashed', 'dotted', usw. sein) */
  border-color: #0b180b;
  /* Grüne Farbe des Rahmens */
  box-shadow: 0 0 5px 2px #0e350e;
  /* 3D-Effekt mit Box-Schatten (horizontal, vertikal, Unscharf, Ausdehnung) */
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 4px;
}

.box_team_red {
  border-width: 3px;
  /* Breite des Rahmens */
  border-style: solid;
  /* Stil des Rahmens (kann auch 'dashed', 'dotted', usw. sein) */
  border-color: #3d0505;
  /* Grüne Farbe des Rahmens */
  box-shadow: 0 0 5px 2px #a30f0f;
  /* 3D-Effekt mit Box-Schatten (horizontal, vertikal, Unscharf, Ausdehnung) */
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 4px;
}

/* Kampfrechner */
.toggle-table {
  display: none;
}

/* Verteidiger */
.v {
  background-color: #01870194;
  text-align: center;
}

/* Angreifer */
.a {
  background-color: #ac0000bf;
  text-align: center;
}

/* Bildergalerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}

.transparent-background {
  background-color: transparent;
}