/* ==========================================================================
   1. GLOBAL RESET & BASE STYLES (Exakte Original-Werte & Abstände)
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  background: #000000;
  color: #ffffff;
  margin: 5% auto 0;
  padding: 0;
}

/* ==========================================================================
   2. LAYOUT CONTAINER (Ersetzt die starren Tabellenstrukturen)
   ========================================================================== */
.about-container {
  width: 100%;
  max-width: 380px; /* Entspricht exakt .about_tabelle */
  margin: 0 auto;
  padding: 0 10px;
}

.about-text {
  font-size: 14px; /* Aus dem Original-Stylesheet geerbt */
  color: #c8c8c8;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 16pt;
  text-align: justify;
}

.lang-link {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

.lang-link:hover {
  text-decoration: underline;
}

.back-nav {
  margin-top: 24px;
  padding-left: 8px;
}

.back-link {
  display: inline-block;
  transition: opacity 0.2s ease;
}

.back-link:hover {
  opacity: 0.7;
}

/* ==========================================================================
   3. TOOLTIP ARCHITEKTUR & EXAKTE ORIGINAL-FARBEN (State of the Art)
   ========================================================================== */

/* Die interaktiven Wörter im Text */
.tooltip-wrapper {
  position: relative;
  display: inline;
  cursor: help;
}

.about-link {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

/* Versteckte Boxen im Standardzustand */
.tooltip-box {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-top: 8px;
  padding: 4px 8px;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 100;
  pointer-events: none;
}

/* --- Aktivierungs-Logik für Desktop (Hover & Tastatur-Fokus) --- */
.tooltip-wrapper:hover .tooltip-box,
.tooltip-wrapper:focus-within .tooltip-box {
  opacity: 1;
  visibility: visible;
}

/* --- Exakte Zuordnung der Original-Farbwerte --- */

/* Kindheit */
.item-kind .tooltip-box { color: #575271; }
.item-kind:hover .about-link, .item-kind:focus-within .about-link { color: #575271; }

/* Spanien */
.item-span .tooltip-box { color: #cd3301; }
.item-span:hover .about-link, .item-span:focus-within .about-link { color: #cd3301; }

/* Indien */
.item-indi .tooltip-box { color: #b11c25; }
.item-indi:hover .about-link, .item-indi:focus-within .about-link { color: #b11c25; }

/* Trickfilmzeichner */
.item-trick .tooltip-box { color: #7f2761; }
.item-trick:hover .about-link, .item-trick:focus-within .about-link { color: #7f2761; }

/* Gaia */
.item-gaia .tooltip-box { color: #84a963; }
.item-gaia:hover .about-link, .item-gaia:focus-within .about-link { color: #84a963; }

/* Restaurant */
.item-rest .tooltip-box { color: #f2a2ef; }
.item-rest:hover .about-link, .item-rest:focus-within .about-link { color: #f2a2ef; }


/* ==========================================================================
   4. RESPONSIVE OPTIMIERUNG FÜR TOUCH-GERÄTE (Mobil-Layout)
   ========================================================================== */
@media screen and (max-width: 480px) {
  body {
    margin: 20px auto 0;
  }

  .about-container {
    max-width: 100%;
    padding: 0 20px;
  }

  /* Auf Smartphones werden Tooltips zu eleganten Inline-Zusatzblöcken */
  .tooltip-box {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    display: block;
    white-space: normal;
    opacity: 1;
    visibility: visible;
    margin: 4px 0 12px 10px;
    padding: 0;
    border-left: 2px solid currentColor;
    padding-left: 10px;
    font-size: 13px;
  }

  /* Die Schlüsselwörter erhalten dauerhaft ihre markante Originalfarbe auf Mobilgeräten */
  .item-kind .about-link   { color: #575271; }
  .item-span .about-link   { color: #cd3301; }
  .item-indi .about-link   { color: #b11c25; }
  .item-trick .about-link  { color: #7f2761; }
  .item-gaia .about-link   { color: #84a963; }
  .item-rest .about-link   { color: #f2a2ef; }
}