.list-item-content {
    display: none;
    margin-left: 20px;
}



.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.content {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: min(1080px, 100%);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Kacheln nutzen Spaltenbreite, kein Überbreiten */
    /* Kein overflow-x auf dieser Fläche: hidden/clip + visible(y) erzwingt in der Spec oft overflow-y:auto
       → vertikale Scrollbar nur im Content. Horizontal fängt body (overflow-x:hidden) ab. */
    overflow: visible;
    /* Kein padding: 0 — wuerde seitlichen Abstand zum Viewport wieder loeschen. */
    padding-top: 0;
    padding-bottom: 10rem; /* Footer-Einblendung (footer_scroll.js): genug Platz für ausgefahrene Bottom-Leiste */
    padding-left: clamp(0.75rem, 4vw, 2.5rem);
    padding-right: clamp(0.75rem, 4vw, 2.5rem);
    box-sizing: border-box;
}

/* Dynamischer Inhaltsbereich in Mathematik:
   bleibt eigener Flex-Stack, damit die Tiles wie bisher als schmalere Boxen
   mit left/center/right-Ausrichtung gerendert werden. */
#content-dynamic {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.tile-horizontal {
    position: relative; /* damit z-index wirkt */
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin: 1rem 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 2; /* über dem SVG */
    margin-top: 1.5rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


/* Höhe per Grid-Zeile (0fr → 1fr), nicht per max-height — vermeidet große Leerfläche unter dem Inhalt. */
.tile-horizontal .content-panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows 0.2s ease-out, opacity 0.18s ease-out, padding 0.2s ease-out;
    padding: 0 0.65rem;
}

.tile-horizontal.active .content-panel {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 0.65rem 0.85rem;
    overflow: visible;
}

.tile-horizontal .content-panel-inner {
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.tile-horizontal.active .content-panel-inner {
    overflow: visible;
}

.tile-horizontal .content-panel-inner > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.loaded-content {
    min-width: 0;
    max-width: 100%;
}

.tile-horizontal.active {
    box-shadow: 0 0 25px var(--tile-glow-color);
}

/*
 * Letzte Kachel etwas tiefer: Platz für Schlangenkopf oberhalb des Kachelrandes.
 * --snake-head-clearance setzt drawConnections.js aus Skalierung + snake.svg-Anker.
 */
body.content-path--world-snake #content-dynamic > .tile-horizontal:last-child {
    margin-top: calc(1.5rem + var(--snake-head-clearance, 4.75rem));
}


/* Stack: Timeline-SVG; Pfad-Stroke mit linearGradient, Achse = Viewport vertikal (drawConnections.js). */
.timeline-svg-stack {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

#timeline-svg {
  position: absolute;
  top: 0;
  left: 0;
  /* Breite/Höhe setzt drawConnections.js — keine 100%-Höhe, sonst Wechselwirkung mit #content */
  pointer-events: none; /* verhindert, dass SVG Klicks blockiert */
  z-index: 0;
  /* Sichtport nicht horizontal erweitern (dicke Pfade / overflow:visible → Scrollbalken) */
  overflow: hidden;
}

body.content-path--world-snake > header,
body.content-path--world-snake > .header {
    position: relative;
    z-index: 50;
}

body.content-path--world-snake > .container {
    position: relative;
    z-index: 2;
}

/* Schlangenkopf: gleiche Ebene wie Pfad (#timeline-svg, z-index 0), unter den Kacheln (z-index 2). */
#snake-head-overlay.snake-head-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

body:not(.content-path--world-snake) #snake-head-overlay {
    display: none;
}

/* Pfad-Grün an Cartoon-Kopf (PNG); Shine weiterhin nur über Gradient-Stops in drawConnections.js */
html:has(body.content-path--world-snake) {
    --world-snake-path-base: #24721a;
}


.tile {
  position: relative;
  text-align: center;
}

.tile[data-pos="left"] {
  align-self: flex-start;
  margin-left: 15%;
}

.tile[data-pos="center"] {
  align-self: center;
}

.tile[data-pos="right"] {
  align-self: flex-end;
  margin-right: 15%;
}

.tile-title {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 1.5em;
}

.icon {
  cursor: pointer;
  transition: transform 0.2s;
}

.icon-container span {
    color: white; /* Icons sichtbar auf dunklem Hintergrund */
}

.icon:hover {
    transform: scale(1.2);
}

/*
 * Verbinder zwischen Kacheln („Weltenschlange“ / Jörmungandr-Andeutung).
 * Aktiv nur mit body.content-path--world-snake (siehe mathematik.php).
 * Klasse am body entfernen → nur noch die Darstellung aus drawConnections.js (grün, breit).
 * Hinweis: Beim Zeichnen/Löschen setzt drawConnections.js kurz stroke-dasharray per Attribut;
 *   das überschreibt das Schuppen-Muster — nach der Animation greifen diese Regeln wieder.
 */
/* Stroke-Farbe = linearGradient in #timeline-svg (userSpaceOnUse, drawConnections.js). */
body.content-path--world-snake #timeline-svg path.timeline-connection-path {
    stroke: url(#world-snake-path-stroke-grad);
    stroke-width: 22;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 -1px 0 color-mix(in srgb, var(--world-snake-path-base, #24721a) 16%, transparent))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.38));
}

body.content-path--world-snake #snake-head-overlay .world-snake-head-graphic path,
body.content-path--world-snake #snake-head-overlay .world-snake-head-graphic ellipse,
body.content-path--world-snake #snake-head-overlay .world-snake-head-graphic circle,
body.content-path--world-snake #snake-head-overlay .world-snake-head-graphic image {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}

body.content-path--world-snake #timeline-svg path.timeline-connection-path:not([stroke-dasharray]) {
    stroke: url(#world-snake-path-stroke-grad);
    stroke-dasharray: 4 14 2 14;
}