/* ---------------------------------------------------
   Body und Header
--------------------------------------------------- */

  
     body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: darkgray;
      color: blue;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      background-color: gray;
      color: blue;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    header h1 {
      margin: 0;
      font-size: 1.7rem;
      flex-grow: 1;
      text-align: center;
    }

   .header-button {
      background-color: red;
      color: yellow;
      border: 2px solid darkslategray;
      border-radius: 6px;
      font-size: 1.0rem;
      font-weight: bold;
      padding: 0.3rem 0.4rem 0.4rem 0.3rem;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.1s ease;
    }

    .header-button:hover {
      background-color: indianred;
      transform: scale(1.1);
    }
    
    .inhalt {
       color: blue;
       margin-left: 0.5em;
       text-align: left;
       font-size: 1.2rem;
       }
       
    .impress {color: darkslategray;} 
    .kleingrau {color: darkslategray; font-size: smaller;} 
	

/* ---------------------------------------------------
   Allgemeine Grundwerte & Skalierung pro Ebene
--------------------------------------------------- */

:root {
  --button-scale: 1;
  --color-blue: #003399;
  --color-lightblue: #d8eaff;
  --color-border-blue: #002266;
  --color-darkgray: #aaa;
  --tooltip-bg: #ffeb66;
  --tooltip-text: #000;
}

/* Skalierung pro Ebene */
.level-1 { --button-scale: 1; }
.level-2 { --button-scale: 0.95; }
.level-3 { --button-scale: 0.9; }
.level-4 { --button-scale: 0.85; }

/* ---------------------------------------------------
   Layout der Button-Gitter
--------------------------------------------------- */
.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  padding: 1.5rem;
  justify-items: center;
}

/* ---------------------------------------------------
   Haupt-Button-Container (image-button)
--------------------------------------------------- */
.image-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: calc(300px * var(--button-scale));
  padding: calc(1rem * var(--button-scale));
  background-color: var(--color-gray, #cccccc);
  border: 2px solid darkslategray;
  border-radius: 14px;
  text-decoration: none;
  color: blue;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 2px 2px rgba(0,0,0,0.4);  
  transform: scale(var(--button-scale));
  transform-origin: top center;
  position: relative;   /* wichtig für Tooltip */   
}

.image-button img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(180px * var(--button-scale));
  object-fit: contain;
  display: block;
  margin-top: 0.5rem;
  position: relative;
}

.image-button:hover {
  transform: scale(calc(var(--button-scale) * 1.06));
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* ---------------------------------------------------
   Bilddarstellung
--------------------------------------------------- */
.image-link img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------
   Textbereiche
--------------------------------------------------- */
.text-link {
  margin-top: 0.5em;
  margin-bottom: 0.4em;

  font-size: calc(1.3rem * var(--button-scale));
  font-weight: bold;

  color: blue;
  background: rgba(0,0,0,0.35);
  width: 100%;
  text-align: center;
  padding: 0.2rem 0;
}

.text-button {
  margin-top: 0.25em;
  font-size: calc(1.1rem * var(--button-scale));
  text-align: left;
  line-height: 1.35;
}

/* Text-Titel in Weiß – wie gewünscht */
.text-button-title {
  color: blue;
  font-size: calc(1.3rem * var(--button-scale));
  font-weight: bold;
  display: inline-block;
  margin-bottom: 0.3rem;
}
/* ---------------------------------------------------
   Ticker – läuft von rechts nach links
--------------------------------------------------- */

.ticker {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    background: silver;
    color: yellow;
    font-size: 1.1rem;
    padding: 0.6rem 0;
  }

  .ticker-text {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-scroll 40s linear infinite;
  }

  @keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }

   .ticker:hover .ticker-text {
    animation-play-state: paused;
  }  -->  
  

/* ---------------------------------------------------
   Tooltip – folgt der Maus
--------------------------------------------------- */

#tooltip-follow {
  position: fixed;
  padding: 6px 10px;
  background: #fff8b0;       /* hellgelb */
  color: black;
  border: 2px solid darkblue;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: normal;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}


/* ---------------------------------------------------
   Mobile Optimierung
--------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --button-scale: 0.85;
  }

  .button-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1rem;
  }
}