/* ==========================================================
   LINKTREE-BUTTONS CSS - SPEZIFISCH FÜR LINKTREE-SEITE
   ========================================================== */

/* Container für die gesamte Button-Gruppe - richtet alle Buttons mittig untereinander aus */
.inhalt-buttons {
  display: flex; /* Macht den Container zu einem Flex-Container */
  flex-direction: column; /* Ordnet alle Buttons untereinander an */
  align-items: center; /* Zentriert alle Button-Wrapper horizontal */
  justify-content: center; /* center Hält die Inhalte in der Mitte */
  gap: 1rem; /* Gleichmäßiger Abstand zwischen allen Buttons */
  width: 100%; /* Nutzt die volle verfügbare Breite */
  margin-top: 1.5rem; /* Abstand oberhalb der Buttonliste */
}

/* Grundlegender Button-Wrapper - sorgt für korrekte Positionierung */
.button-link {
  position: relative; /* Ermöglicht absolute Positionierung des Tooltips */
  display: flex; /* Flex statt inline-flex für saubere Zentrierung im Container */
  justify-content: center; /* Zentriert den Button innerhalb des Wrappers */
  width: 100%; /* Wrapper darf die verfügbare Breite nutzen */
  margin-bottom: 0; /* Abstand wird zentral über gap im Container geregelt */  /* alternativ genaue einstellung beispielsweise 1rem;  Abstand zwischen den Buttons */
}

/* Sorgt für einheitliche Positionierung bei unterschiedlichen icons */
.icon-spalte {
  width: 1.8rem; /* Gleiche Breite für alle Icons */
  min-width: 1.8rem; /* Verhindert Zusammendrücken */
  display: flex; /* Icon in der Spalte sauber zentrieren */
  justify-content: center; /* Icon horizontal zentrieren */
  align-items: center; /* Icon vertikal zentrieren */
  flex-shrink: 0; /* Icon-Spalte bleibt stabil */
}

.icon-spalte i {
/* font-size: 1.25rem;  Einheitliche Icon-Größe */
  line-height: 1; /* Verhindert optisches Wandern durch unterschiedliche Zeilenhöhe */
}

/* Textbereich startet immer an derselben Stelle */
.button-text {
  display: block; /* Eigener Textblock */
  line-height: 1.2; /* Ruhigere Textzeile */
}

/* Hilfsklassen für die Ausrichtung des Buttons auf der Seite */
.ausrichtung-links { 
  display: flex; 
  justify-content: flex-start; /* Buttons linksbündig ausrichten */
}
.ausrichtung-rechts { 
  display: flex; 
  justify-content: flex-end; /* Buttons rechtsbündig ausrichten */
}
.ausrichtung-mitte { 
  display: flex; 
  justify-content: center; /* Buttons mittig ausrichten */
}

/* Das Haupt-Design des Linktree-Buttons */
.link-css {
  /* Layout-Eigenschaften für perfekte Zentrierung */
  display: flex; /* Flexbox für gleichmäßige Zentrierung von Icon + Text */
  justify-content: flex-start; /* center Horizontal zentrieren (Icon und Text nebeneinander) */
  align-items: center; /* Vertikal zentrieren (Icon und Text auf gleicher Höhe) */
  text-align: left; /* center Text perfekt zentriert */
  gap: 1rem; /* Abstand zwischen Icon und Text */

  /* WCAG 2.2 AAA Anforderungen - Touch-Target-Größe */
  min-height: 44px; /* WCAG 2.2 Minimum 44px für Level AAA */
  min-width: 44px; 

  /* Innenabstände für angenehme Bedienung */
  padding: 0.95rem 1.25rem; /* größere und luftige Buttons */

  /* Visuelles Design */
  border-radius: 6px; /* Abgerundete Ecken (6px Radius) für modernes Aussehen */
  font-size: 1rem; /* Deutlich größere Schrift für bessere Lesbarkeit */
  line-height: 1.4; /* Angenehme Zeilenhöhe für den Buttontext */
  font-weight: 800; /* Extra-fett – betont und wirkt kompakter */
  color: #000000; /* Schwarzer Text für maximalen Kontrast */
  background-color: #a4d9a4; /* button Hintergrund */
  border: 3px solid #000000; /* Dicker schwarzer Rahmen  */

  /* Größenverhalten */
  width: min(100%, 320px); /* Einheitliche Breite, aber mobil weiterhin flexibel */

  /* Interaktions-Animationen */
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; /* Sanfte Übergänge (0.2s) */
  text-decoration: none; /* Kein Unterstrich bei Links */
}

/* Hover- und Focus-Zustand – WCAG-konform */
.link-css:hover, 
.link-css:focus {
  background-color: #ffffff; /* Weißer Hintergrund beim Hover */
  border-color: #f59e0b; /* Orange Rahmen für visuelles Feedback */
  color: #000000; /* Text bleibt schwarz */
  outline: none; /* Standard-Outline entfernt (eigene Lösung folgt) */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #000000; /* Fokus-Ring: doppelter Schatten */
}

/* Active-Zustand (Button gedrückt) */
.link-css:active {
  background-color: #f3f4f6; /* Leichtes Grau beim Drücken */
  transform: scale(0.98); /* Minimales Einschrumpfen für Tactile Feedback */
}

/* Icons im Button - erhalten mehr Platz und bessere Lesbarkeit */
.link-css i {
  font-size: 2,5rem; /* Icon etwas größer als vorher */
  flex-shrink: 0; /* Verhindert, dass das Icon zusammengedrückt wird */
}

/* ==========================================================
   TOOLTIP-SYSTEM (Hinweistexte bei Hover)
   ========================================================== */
/* Standard-Tooltip-Design */
.link-hinweistext {
  /* Positionierung relativ zum Button */
  position: absolute;
  top: calc(100% + 12px); /* 12px Abstand unter dem Button */
  left: 0; /* Standard: Tooltip startet am linken Buttonrand */
  
  /* Größe und Layout */
  width: max-content; /* Passt sich Textlänge an */
  max-width: min(600px, calc(100vw - 40px)); /* Responsive Breitenbegrenzung */
  white-space: normal; /* Textumbruch erlaubt */
  text-align: left; /* Linksbündiger Text */
  
  /* Design */
  padding: 10px 14px; /* Angenehme Innenabstände */
  background-color: #ffffff; /* Weißer Hintergrund */
  color: #000000; /* Schwarzer Text */
  border: 3px solid #f59e0b; /* Orange Rahmen */
  border-radius: 6px; /* Abgerundete Ecken */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Subtiler Schatten */
  
  /* Animation und Sichtbarkeit */
  opacity: 0; /* Unsichtbar zu Beginn */
  visibility: hidden; /* Versteckt vom Layout */
  transition: all 0.2s ease; /* Sanfte Ein-/Ausblendung */
  z-index: 50; /* Über anderen Inhalten */
  pointer-events: auto; /* Tooltip anklickbar */
}

/* Standard-Pfeil (zeigt nach unten zum Button) */
.link-hinweistext::after {
  content: ''; /* Leerer Inhalt für Pfeil */
  position: absolute;
  top: -8px; /* Positioniert direkt über dem Tooltip */
  left: 20px; /* 20px vom linken Rand */
  width: 12px;
  height: 12px;
  background-color: #ffffff; /* Gleicher Hintergrund wie Tooltip */
  border-top: 3px solid #f59e0b; /* Obere Kante orange */
  border-left: 3px solid #f59e0b; /* Linke Kante orange */
  transform: rotate(45deg); /* 45° Drehung für Pfeilform */
}

/* VARIANTE 1: Tooltip rechtsbündig */
.tooltip-rechts .link-hinweistext {
  left: auto;
  right: 0; /* Tooltip schließt rechts bündig mit dem Button ab */
}
.tooltip-rechts .link-hinweistext::after {
  left: auto;
  right: 20px; /* Pfeil rutscht nach rechts */
}

/* VARIANTE 2: Tooltip mittig unten */
.button-feste-breite .link-css {
  width: min(100%, 320px); /* Feste, aber responsive Breite für einheitliche Optik im Linktree */
}
.tooltip-mitte .link-hinweistext {
  left: 50%;
  transform: translateX(-50%); /* Zentriert den Tooltip exakt unter dem Button */
}
.tooltip-mitte .link-hinweistext::after {
  left: 50%;
  transform: translateX(-50%) rotate(45deg); /* Zentriert den Pfeil */
}

/* VARIANTE 3: Tooltip oben */
.tooltip-oben .link-hinweistext {
  top: auto; /* Setzt die Standard-Position unter dem Button zurück */
  bottom: calc(100% + 12px); /* Tooltip erscheint oberhalb des Buttons */
  left: 50%; /* Tooltip horizontal mittig am Button ausrichten */
  right: auto; /* Setzt eine mögliche rechte Ausrichtung zurück */
  transform: translateX(-50%); /* Zentriert den Tooltip exakt über dem Button */
}

.tooltip-oben .link-hinweistext::after {
  top: auto; /* Setzt die Standard-Pfeilposition oben zurück */
  bottom: -8px; /* Pfeil sitzt unten am Tooltip */
  left: 50%; /* Pfeil horizontal mittig ausrichten */
  right: auto; /* Setzt eine mögliche rechte Ausrichtung zurück */
  border-top: none; /* Obere Rahmenkante entfernen */
  border-left: none; /* Linke Rahmenkante entfernen */
  border-right: 3px solid #f59e0b; /* Rechte Kante orange */
  border-bottom: 3px solid #f59e0b; /* Untere Kante orange */
  transform: translateX(-50%) rotate(45deg); /* Pfeil mittig und gedreht */
}

/* Mobile Anpassung - größere Schrift nur auf kleinen Bildschirmen */
@media screen and (max-width: 768px) {
  .link-css {
    font-size: 1.2rem; /* Größere Schrift nur mobil */
  }
 .link-css i {
    font-size: 2rem; /* Größere Icons nur mobil */
  }
/* Tooltips auf Geräten ohne Hover deaktivieren */
@media (hover: none) {
  .link-hinweistext {
    display: none !important; /* Tooltip auf Touch-Geräten ausblenden */
  }
}