/* Content */
.content {
  flex: 1;
  padding: 1rem;
box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.18),
            -5px -5px 12px rgba(255, 255, 255, 0.65);
}


/* =======================================================================
  Boxen
========================================================================== */


.content-box {
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 10px;
}

.content-box-header {
  background-color: #001d3b;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 0.6rem;
  border-bottom: 1px solid #ccc;
}

.content-box-body {
  background-color: #ffffff;
}


/* =======================================================================
  Kacheln
========================================================================== */


.tiles{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  max-width: 1400px;
  margin: auto;
}

.tile{
  width: 250px;
  height: 250px;
  background-color: #2d2d2d6f;
  background-size: content;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: all 0.18s ease;
}


.tile:hover {
      background-color: #3a3a3a;
      transform: translateY(-8px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    }


.tile.signaltrainer {
    background-image: url("/content/modules/signaltrainer/img/tile.png");
}

.tile.cuecards {
    background-image: url("/content/modules/cuecards/img/tile.png");
}

/* =======================================================================
  Fehlerseiten
========================================================================== */

.errors-wrap {
  text-align: center;
  width: 90%;
  margin: auto;
}

.errors-code {
  font-size: clamp(8rem, 25vw, 14rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: red;
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: -1.5rem;
}

h1.errors-text {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

p.errors-notes {
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
}

/* =======================================================================
  Kleinigkeiten
========================================================================== */

.centered-content {
    text-align: center;
}