/* 
  onshape.css
  Ausgelagerte CSS-Datei für die Onshape Dateiliste + HILFE
  Alle Kommentare aus dem Original bleiben erhalten.
  Zusammenfassung von ALT + NEU CSS
  Stand: 18.08.2025 13:49
*/

/* --- 1. Grundlegendes Styling --- */
body {
  font-family: Arial, sans-serif;
  margin: 1rem;
  background-color: #f9f9f9; /* #f9f9f9; - #123456; */
  color: #222;
}

h1 {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 1rem;
  background-color: #f5f5f5;    /* Hintergrundfarbe */
  border-radius: 0;             /* keine abgerundeten Ecken */
  padding: 0.5rem 1rem;         /* etwas Innenabstand */
  box-sizing: border-box;
}

/* --- 2. Große Überschrift DIV mit 100% Breite --- */
.ueberschrift_gross {
  width: 100%; /* Volle Breite */
  font-size: 2rem; /* Große Schriftgröße */
  font-weight: bold; /* Fettgedruckt */
  color: #007acc; /* Blaue Farbe */
  margin: 2rem 0 1rem 0; /* Außenabstand oben und unten */
  user-select: none; /* Verhindert Markieren */
  padding: 0.5rem 1rem; /* Innenabstand */
  box-sizing: border-box; /* Padding und Border werden zur Breite addiert */
  background-color: #e6f0ff; /* Hellblauer Hintergrund */
  border-radius: 12px; /* Abgerundete Ecken */
  border: 1px solid #007acc; /* Blauer Rahmen */
}

/* --- 3. Eingabebereich für Höhe der unteren Auswahltabelle --- */
#hoehe-eingabe-container {
  width: 100%; /* Volle Breite */
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-sizing: border-box; /* Padding und Border werden zur Breite addiert */
  user-select: none; /* Verhindert Markieren */
  font-family: Arial, sans-serif;
}

#hoehe-eingabe-container label {
  display: block; /* Label nimmt ganze Zeile ein */
  font-weight: bold; /* Fett */
  margin-bottom: 0.3rem; /* Abstand nach unten */
  font-size: 0.85rem; /* Etwas kleinere Schrift */
  color: #007acc; /* Blaue Farbe */
}

#hoehe-eingabe-container input[type="number"] {
  width: 100%; /* Volle Breite */
  padding: 0.5rem; /* Innenabstand */
  font-size: 0.85rem; /* Kleinere Schrift */
  border: 1px solid #007acc; /* Blauer Rahmen */
  border-radius: 6px; /* Abgerundete Ecken */
  box-sizing: border-box; /* Padding und Border werden zur Breite addiert */
  user-select: text; /* Markieren erlaubt */
  outline-offset: 2px; /* Abstand für Fokusrahmen */
  transition: border-color 0.3s; /* Weicher Übergang bei Rahmenfarbe */
}

#hoehe-eingabe-container input[type="number"]:focus {
  border-color: #005fa3; /* Dunkleres Blau bei Fokus */
  outline: none; /* Standard-Fokusrahmen entfernen */
}

/* Flex Container für Eingabefeld + Buttons */
#hoehe-eingabe-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 400px; /* Optional max Breite */
}

/* Eingabefeld ca. 70% Breite */
#hoehe-eingabe {
  flex: 1 1 70%;
  min-width: 0;
  font-size: 1rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Pfeil-Buttons rechts nebeneinander */
.hoehe-button {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* Einzelner Button */
.hoehe-button button {
  width: 100%;
  padding: 0.3rem 0;
  font-size: 1.2rem;
  line-height: 1;
  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.hoehe-button button:hover,
.hoehe-button button:focus {
  background-color: #005fa3;
  outline: none;
}

/* Pfeil nach oben */
#hoehe-erhoehen::before {
  content: "▲";
  font-size: 1rem;
  display: block;
  text-align: center;
  color: white;
}

/* Pfeil nach unten */
#hoehe-verringern::before {
  content: "▼";
  font-size: 1rem;
  display: block;
  text-align: center;
  color: white;
}

/* Fehlermeldung Styling */
#hoehe-fehlermeldung {
  color: red;
  font-weight: bold;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: none;
  user-select: text;
}

/* Responsive Anpassung für kleine Bildschirme */
@media (max-width: 480px) {
  #hoehe-eingabe-row {
    max-width: 100%;
  }
  .hoehe-button {
    flex: 0 0 40px;
  }
  .hoehe-button button {
    font-size: 1.5rem;
    padding: 0.2rem 0;
  }
}

/* --- 4. Fehlermeldung Styling --- */
#hoehe-fehlermeldung {
  color: red; /* Rote Schrift */
  font-weight: bold; /* Fett */
  margin-top: 0.3rem; /* Abstand nach oben */
  font-size: 0.9rem; /* Etwas kleinere Schrift */
  display: none; /* Standardmäßig versteckt */
  user-select: text; /* Markieren erlaubt */
}

/* --- 5. Klapptext Styling (Accordion) --- */
details#hilfe-klapptext {
  background-color: #e6f0ff; /* Hellblauer Hintergrund */
  border: 1px solid #007acc; /* Blauer Rahmen */
  border-radius: 6px; /* Abgerundete Ecken */
  padding: 1rem; /* Innenabstand */
  margin-bottom: 1rem; /* Abstand nach unten */
  user-select: text; /* Markieren erlaubt */
  max-width: 900px; /* Maximalbreite */
  margin-left: auto; /* Zentriert horizontal */
  margin-right: auto; /* Zentriert horizontal */
}

details#hilfe-klapptext summary {
  font-weight: bold; /* Fett */
  font-size: 1.2rem; /* Größere Schrift */
  cursor: pointer; /* Mauszeiger als Hand */
  outline-offset: 2px; /* Abstand für Fokusrahmen */
  user-select: none; /* Markieren verhindern */
}

details#hilfe-klapptext[open] summary::after {
  content: "▲"; /* Pfeil nach oben wenn geöffnet */
  float: right; /* Rechtsbündig */
  font-size: 1rem; /* Schriftgröße */
  margin-left: 0.5rem; /* Abstand links */
}

details#hilfe-klapptext summary::after {
  content: "▼"; /* Pfeil nach unten wenn geschlossen */
  float: right; /* Rechtsbündig */
  font-size: 1rem; /* Schriftgröße */
  margin-left: 0.5rem; /* Abstand links */
}

details#hilfe-klapptext p {
  margin-top: 0.5rem; /* Abstand nach oben */
  line-height: 1.4; /* Zeilenhöhe */
}

/* --- 6. Tabelle Styling --- */
table {
  width: 100%; /* Volle Breite */
  border-collapse: collapse; /* Rahmen zusammenführen */
  margin-bottom: 1rem; /* Abstand nach unten */
  background: white; /* Weißer Hintergrund */
  box-shadow: 0 0 5px rgba(0,0,0,0.1); /* Leichter Schatten */
}

thead th {
  background-color: #007acc; /* Blauer Hintergrund */
  color: white; /* Weiße Schrift */
  padding: 0.5rem; /* Innenabstand */
  cursor: pointer; /* Mauszeiger als Hand */
  user-select: none; /* Markieren verhindern */
  position: relative; /* Für Sortierpfeile */
}

thead th.sortable:hover,
thead th.sortable:focus {
  background-color: #005fa3; /* Dunkleres Blau bei Hover/Fokus */
  outline: none; /* Fokusrahmen entfernen */
}

thead th.sort-asc::after,
thead th.sort-desc::after {
  content: ''; /* Kein Text, nur Pfeil */
  position: absolute; /* Position relativ zum th */
  right: 8px; /* Abstand rechts */
  top: 50%; /* Vertikal zentriert */
  border: 6px solid transparent; /* Pfeil mit transparenten Rändern */
  transform: translateY(-50%); /* Vertikal zentrieren */
}

thead th.sort-asc::after {
  border-bottom-color: white; /* Pfeil nach oben */
}

thead th.sort-desc::after {
  border-top-color: white; /* Pfeil nach unten */
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* Zebra-Streifen für gerade Zeilen */
}

tbody tr.highlight:hover,
tbody tr.highlight:focus-within {
  background-color: #d0e7ff; /* Hellblauer Hover/Fokus-Hintergrund */
}

tbody td {
  padding: 0.4rem 0.6rem; /* Innenabstand */
  border: 1px solid #ddd; /* Grauer Rahmen */
  vertical-align: middle; /* Vertikale Ausrichtung */
}

tbody td[data-label]::before {
  /* Für kleine Bildschirme, falls responsive gewünscht */
  content: attr(data-label) ": "; /* Label vor dem Inhalt */
  font-weight: bold; /* Fett */
  display: none; /* Standard versteckt */
}

/* --- 7. Bild in Tabelle --- */
.tabelle-bild {
  width: 50px; /* Breite */
  height: 50px; /* Höhe */
  object-fit: contain; /* Bild proportional skalieren */
  cursor: pointer; /* Mauszeiger als Hand */
  border: 1px solid transparent; /* Unsichtbarer Rahmen */
  border-radius: 4px; /* Abgerundete Ecken */
  transition: border-color 0.2s; /* Weicher Übergang */
}

.tabelle-bild:hover,
.tabelle-bild:focus {
  border-color: #007acc; /* Blauer Rahmen bei Hover/Fokus */
  outline: none; /* Fokusrahmen entfernen */
}

/* --- 8. Suchbereich --- */
#search-form {
  margin-bottom: 1rem; /* Abstand nach unten */
  display: flex; /* Flexbox Layout */
  gap: 0.5rem; /* Abstand zwischen Elementen */
  flex-wrap: wrap; /* Zeilenumbruch bei Bedarf */
  align-items: center; /* Vertikal zentrieren */
  justify-content: center; /* Horizontal zentrieren */
}

#search-input {
  flex: 1 1 250px; /* Flexibles Wachstum, Mindestbreite 250px */
  padding: 0.4rem 0.6rem; /* Innenabstand */
  font-size: 1rem; /* Schriftgröße */
  border: 1px solid #ccc; /* Grauer Rahmen */
  border-radius: 4px; /* Abgerundete Ecken */
}

#search-btn,
#clear-btn,
#print-btn {
  padding: 0.4rem 0.8rem; /* Innenabstand */
  font-size: 1rem; /* Schriftgröße */
  border: none; /* Kein Rahmen */
  border-radius: 4px; /* Abgerundete Ecken */
  cursor: pointer; /* Mauszeiger als Hand */
  background-color: #007acc; /* Blauer Hintergrund */
  color: white; /* Weiße Schrift */
  transition: background-color 0.2s; /* Weicher Übergang */
}

#search-btn:hover,
#clear-btn:hover,
#print-btn:hover,
#search-btn:focus,
#clear-btn:focus,
#print-btn:focus {
  background-color: #005fa3; /* Dunkleres Blau bei Hover/Fokus */
  outline: none; /* Fokusrahmen entfernen */
}

/* --- 9. Dropdown für Bildfilter --- */
#bild-filter-select {
  margin-left: 1rem; /* Abstand links */
  padding: 0.4rem 0.6rem; /* Innenabstand */
  font-size: 1rem; /* Schriftgröße */
  border-radius: 4px; /* Abgerundete Ecken */
  border: 1px solid #ccc; /* Grauer Rahmen */
  cursor: pointer; /* Mauszeiger als Hand */
}

/* --- 10. Bildleiste (scrollbar) --- */
#bild-scroll-container {
  display: flex; /* Flexbox Layout */
  overflow-x: auto; /* Horizontal scrollbar */
  gap: 0.5rem; /* Abstand zwischen Bildern */
  padding: 0.5rem 0; /* Innenabstand oben und unten */
  border: 1px solid #ccc; /* Grauer Rahmen */
  background: white; /* Weißer Hintergrund */
  border-radius: 4px; /* Abgerundete Ecken */
  margin-bottom: 1rem; /* Abstand nach unten */
  scroll-behavior: smooth; /* Sanftes Scrollen */
}

#bild-scroll-container img {
  width: 80px; /* Breite */
  height: 80px; /* Höhe */
  object-fit: contain; /* Bild proportional skalieren */
  cursor: pointer; /* Mauszeiger als Hand */
  border: 1px solid transparent; /* Unsichtbarer Rahmen */
  border-radius: 6px; /* Abgerundete Ecken */
  flex-shrink: 0; /* Nicht schrumpfen */
  transition: border-color 0.2s; /* Weicher Übergang */
}

#bild-scroll-container img:hover,
#bild-scroll-container img:focus {
  border-color: #007acc; /* Blauer Rahmen bei Hover/Fokus */
  outline: none; /* Fokusrahmen entfernen */
}

/* --- 11. Hilfebilder Bereich --- */

/* Umschließender Container für Hilfebilder Bereich mit 100% Breite */
#hilfe-bilder-gesamt-container {
  display: flex; /* Flexbox Layout */
  width: 100%; /* Volle Breite */
  gap: 1rem; /* Abstand zwischen den Bereichen */
  margin-top: 2rem; /* Abstand nach oben */
  box-sizing: border-box; /* Padding und Border werden zur Breite addiert */
}

/* Linker Bereich: Hilfebilder Liste mit Überschrift */
#hilfe-bilder-list-container {
  width: 50%; /* Hälfte der Breite */
  display: flex; /* Flexbox Layout */
  flex-direction: column; /* Vertikale Anordnung */
  box-sizing: border-box; /* Padding und Border werden zur Breite addiert */
}

/* Überschrift über der Liste */
#hilfe-bilder-list-container > h2 {
  margin: 0 0 0.5rem 0; /* Abstand unten */
  font-size: 1rem; /* Schriftgröße */
  font-weight: bold; /* Fett */
  user-select: none; /* Markieren verhindern */
}

/* CSS Variable für Höhe der Hilfebilder-Liste und Vorschaufenster */
:root {
  /* Hier kannst du die Höhe zentral anpassen */
  --hilfe-bilder-hoehe: 400px; /* super vielen Dank */
}

/* Scrollbare Zebra-Liste für Hilfebilder */
#hilfe-bilder-list {
  max-height: var(--hilfe-bilder-hoehe); /* Höhe jetzt variabel */
  overflow-y: auto; /* Vertikaler Scrollbalken bei Überlauf */
  border: 1px solid #ccc; /* Grauer Rahmen */
  border-radius: 6px; /* Abgerundete Ecken */
  outline: none; /* Fokus-Styling wird separat definiert */
  user-select: none; /* Markieren verhindern */
  font-family: monospace, monospace; /* Monospace Schrift */
  flex-grow: 1; /* Füllt den Container vertikal */
}

/* Jede Zeile als div mit flexbox für Nummer + Name */
#hilfe-bilder-list .hilfe-zeile {
  display: flex; /* Flexbox Layout */
  gap: 0.5rem; /* Abstand zwischen Nummer und Text */
  padding: 0.4rem 0.6rem; /* Innenabstand */
  cursor: pointer; /* Mauszeiger als Hand */
  align-items: center; /* Vertikal zentrieren */
  white-space: nowrap; /* Kein Zeilenumbruch */
  transition: background-color 0.3s, color 0.3s; /* Weicher Übergang */
}

/* Zebra Design: gerade Zeilen hell, ungerade dunkel */
#hilfe-bilder-list .hilfe-zeile:nth-child(odd) {
  background-color: #f9f9f9; /* Hellgrau */
}

#hilfe-bilder-list .hilfe-zeile:nth-child(even) {
  background-color: #e9e9e9; /* Etwas dunkler */
}

/* Hover und Fokus */
#hilfe-bilder-list .hilfe-zeile:hover,
#hilfe-bilder-list .hilfe-zeile:focus {
  background-color: #007acc; /* Blau */
  color: white; /* Weiße Schrift */
  outline: none; /* Fokusrahmen entfernen */
}

/* Ausgewählte Zeile */
#hilfe-bilder-list .hilfe-zeile.ausgewählt {
  background-color: orange; /* ALT */
  color: black; /* ALT */
  font-weight: bold; /* ALT */
}

/* Nummern-Spalte */
#hilfe-bilder-list .hilfe-nummer {
  width: 3em; /* Feste Breite */
  flex-shrink: 0; /* Nicht schrumpfen */
  text-align: right; /* Rechtsbündig */
  font-weight: bold; /* Fett */
  user-select: text; /* Markieren erlaubt */
}

/* Text-Spalte */
#hilfe-bilder-list .hilfe-text {
  flex-grow: 1; /* Nimmt verbleibenden Platz ein */
  user-select: text; /* Markieren erlaubt */
}

/* Rechter Bereich: Mittelgroßes Vorschaufenster mit Überschrift, Dateiname darunter und kleinem Feld rechts daneben */
#mittelgrosses-vorschaufenster-container {
  width: 50%; /* Hälfte der Breite */
  display: flex; /* Flexbox Layout */
  flex-direction: column; /* Vertikale Anordnung */
  box-sizing: border-box; /* Padding und Border werden zur Breite addiert */
  gap: 0.5rem; /* Abstand zwischen Elementen */
  user-select: none; /* Markieren verhindern */
  max-height: var(--hilfe-bilder-hoehe); /* Höhe dynamisch über CSS Variable */
  overflow: hidden; /* Überlauf verstecken */
}

/* Überschrift über dem Vorschaufenster */
#mittelgrosses-vorschaufenster-container > h2 {
  margin: 0; /* Kein Außenabstand */
  font-size: 1.25rem; /* Größere Schrift */
  font-weight: bold; /* Fett */
  user-select: none; /* Markieren verhindern */
}

/* Dateiname unter der Überschrift */
#mittelgrosses-bildname-container {
  font-family: monospace, monospace; /* Monospace Schrift */
  font-size: 1rem; /* Schriftgröße */
  color: #222; /* Dunkelgrau */
  background-color: #fff8dc; /* helles gelblich für Hervorhebung */
  border: 1px solid #007acc; /* Blauer Rahmen */
  border-radius: 6px; /* Abgerundete Ecken */
  padding: 0.3rem 0.5rem; /* Innenabstand */
  box-sizing: border-box; /* Padding und Border werden zur Breite addiert */
  user-select: text; /* Markieren erlaubt */
  text-align: center; /* Zentriert */
  min-height: 2.2em; /* Platz für Dateiname */
}

/* Container für Bild mit Pfeilen */
#mittelgrosses-bild-container {
  position: relative; /* Für absolute Positionierung der Pfeile */
  border: 1px solid #007acc; /* Blauer Rahmen */
  border-radius: 6px; /* Abgerundete Ecken */
  background-color: #f0f2f2; /* Hellgrauer Hintergrund */
  display: flex; /* Flexbox Layout */
  align-items: center; /* Vertikal zentrieren */
  justify-content: center; /* Horizontal zentrieren */
  max-height: calc(var(--hilfe-bilder-hoehe) - 40px); /* Höhe minus Platz für Überschrift/Dateiname */
  overflow: hidden; /* Überlauf verstecken */
  user-select: none; /* Markieren verhindern */
}

/* Mittelgroßes Bild */
#mittelgrosses-bild {
  max-width: 90%; /* Maximal 90% Breite */
  max-height: 100%; /* Maximal volle Höhe */
  object-fit: contain; /* Bild proportional skalieren */
  cursor: pointer; /* Mauszeiger als Hand */
  border-radius: 6px; /* Abgerundete Ecken */
  user-select: none; /* Markieren verhindern */
  transition: box-shadow 0.3s, transform 0.3s; /* Weiche Übergänge */
  touch-action: manipulation; /* Ermöglicht Pinch-Zoom im Browser */
  will-change: transform; /* Optimierung für Animation */
}

#mittelgrosses-bild:hover,
#mittelgrosses-bild:focus {
  box-shadow: 0 0 10px #007acc; /* Blauer Schatten */
  outline: none; /* Fokusrahmen entfernen */
}

/* Pfeile links/rechts im Bild-Container */
.vorschau-pfeil {
  position: absolute; /* Absolut positioniert */
  top: 50%; /* Vertikal zentriert */
  transform: translateY(-50%); /* Vertikal zentrieren */
  background-color: #232f3e; /* Dunkeltuerkis, undurchsichtig */
  border: none; /* Kein Rahmen */
  color: white; /* Weiße Schrift */
  font-size: 2rem; /* Große Schrift */
  width: 36px; /* Breite */
  height: 36px; /* Höhe */
  border-radius: 50%; /* Kreisförmig */
  cursor: pointer; /* Mauszeiger als Hand */
  user-select: none; /* Markieren verhindern */
  display: flex; /* Flexbox Layout */
  align-items: center; /* Vertikal zentrieren */
  justify-content: center; /* Horizontal zentrieren */
  transition: background-color 0.2s; /* Weicher Übergang */
  z-index: 10; /* Über dem Bild */
}

.vorschau-pfeil:hover,
.vorschau-pfeil:focus {
  background-color: #005fa3; /* Dunkleres Blau bei Hover/Fokus */
  outline: none; /* Fokusrahmen entfernen */
}

#vorschau-pfeil-links {
  left: 8px; /* Abstand links */
}

#vorschau-pfeil-rechts {
  right: 8px; /* Abstand rechts */
}

/* --- 12. Modal Styling --- */

/* Modal Overlay */
#modal-overlay {
  /* Hintergrund weiß, deckt gesamte Seite ab */
  background-color: rgba(255, 255, 255, 0.95); /* Weiß mit leichter Transparenz */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 20000; /* höher als ALT (1000) */
  display: none; /* Standard versteckt */
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Verhindert Scrollen der Seite dahinter */
  /* Entfernt ALT Hintergrund-URL Platzhalter */
}

/* Modal Overlay aktiv */
#modal-overlay.active {
  display: flex;
}

/* Modal Content */
#modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background-color: white;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* ALT padding und flex-direction entfernt zugunsten NEU */
}

/* Modal Image */
#modal-image {
  max-width: 100%;
  max-height: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  /* Transform wird per JS gesetzt */
  transition: transform 0.1s ease-out;
  touch-action: none; /* Verhindert Standard-Gesten, damit eigene Zoom/Drag funktionieren */
  object-fit: contain;
  border-radius: 6px; /* aus ALT */
  transform-origin: center center; /* aus ALT */
  transform: translate(0px, 0px) scale(1); /* Anfangsposition aus ALT */
  transition: none !important; /* Keine Übergänge, damit Drag flüssig ist (aus ALT) */
}

/* Cursor beim Drag */
#modal-image:active {
  cursor: grabbing;
}

/* Close Button */
#modal-close-btn {
  position: absolute; /* absolute innerhalb modal-content */
  top: 8px;
  right: 8px;
  background: #007acc;
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px; /* NEU größer als ALT (32px) */
  height: 36px;
  font-size: 24px; /* NEU größer als ALT (1.5rem) */
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  z-index: 21000; /* Höher als Bild und Overlay */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background-color 0.3s ease;
  user-select: none;
}

#modal-close-btn:hover,
#modal-close-btn:focus {
  background-color: #005fa3;
  outline: none;
}

/* Sicherstellen, dass das X auf allen Geräten sichtbar ist */
@media (max-width: 768px) {
  #modal-close-btn {
    width: 40px;
    height: 40px;
    font-size: 28px;
    top: 12px;
    right: 12px;
  }
}

/* NEU: Media Query für Querformat auf Smartphones */
@media (max-width: 768px) and (orientation: landscape) {
  #modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }
  #modal-close-btn {
    width: 48px;
    height: 48px;
    font-size: 32px;
    top: 12px;
    right: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  }
}

/* --- 13. Snackbar / Toast Meldung unten rechts --- */
#snackbar {
  visibility: hidden; /* Standard versteckt */
  min-width: 250px;
  max-width: 350px;
  background-color: #323232;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 1rem 1.5rem;
  position: fixed;
  z-index: 10000;
  right: 1rem;
  bottom: 1rem;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Keine Interaktion wenn versteckt */
  /* NEU: transform und left entfernt zugunsten ALT Positionierung */
}

#snackbar.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Optional: Animation für Ein-/Ausblenden */
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 1rem; opacity: 1;}
}

@keyframes fadeout {
  from {bottom: 1rem; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/* --- 14. Stil für Button im Table (Name) --- */
button.name-copy-button:focus,
.name-copy-button:hover,
.name-copy-button:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
}

/* --- 15. Footer Styling --- */
#footer {
  margin-top: 2rem; /* Abstand nach oben */
  padding: 1rem; /* Innenabstand */
  background-color: #232f3e; /* Dunkeltuerkiser Hintergrund */
  color: white; /* Weiße Schrift */
  font-size: 0.75rem; /* Kleine Schrift */
  border-radius: 6px; /* Abgerundete Ecken */
  box-shadow: 0 0 8px rgba(0,0,0,0.1); /* Schatten */
  text-align: center; /* Zentriert */
}

#footer a {
  color: #cce6ff; /* Hellblau */
  text-decoration: underline; /* Unterstrichen */
  font-size: 0.8rem; /* Kleine Schrift */
}

#footer a:hover,
#footer a:focus {
  color: white; /* Weiß bei Hover/Fokus */
  outline: none; /* Fokusrahmen entfernen */
}

/* --- 16. Responsive (optional) --- */
@media (max-width: 900px) {
  /* Bei kleineren Bildschirmen: Hilfebilder-Bereich auf Block umstellen */
  #hilfe-bilder-gesamt-container {
    flex-direction: column; /* Vertikal anordnen */
  }
  #hilfe-bilder-list-container,
  #mittelgrosses-vorschaufenster-container {
    width: 100%; /* Volle Breite */
    margin-bottom: 1rem; /* Abstand nach unten */
    max-height: none !important; /* Höhe aufheben bei schmalen Bildschirmen */
  }
  /* Kleines Bildname-Feld unter Vorschaufenster */
  #mittelgrosses-vorschaufenster-container {
    flex-direction: column; /* Vertikal anordnen */
    gap: 0.5rem; /* Abstand */
  }
  #mittelgrosses-bildname-container {
    width: 100%; /* Volle Breite */
    max-height: none; /* Höhe aufheben */
  }
}

@media (max-width: 600px) {
  tbody td[data-label]::before {
    display: inline-block; /* Label vor Inhalt anzeigen */
  }
  
  @media (max-width: 480px) { /* galaxy s10 17.08.2025 23:00 */
    html {
      font-size: 12px; /* statt 16px */
    }
  }  
  
  thead {
    display: none; /* Tabellenkopf ausblenden */
  }
  tbody tr {
    display: block; /* Block-Layout */
    margin-bottom: 1rem; /* Abstand nach unten */
    border: 1px solid #ccc; /* Rahmen */
    border-radius: 6px; /* Abgerundete Ecken */
    padding: 0.5rem; /* Innenabstand */
    background: white; /* Weißer Hintergrund */
  }
  tbody td {
    display: block; /* Block-Layout */
    border: none; /* Kein Rahmen */
    padding-left: 50%; /* Platz für Label */
    position: relative; /* Für Label absolut */
  }
  tbody td[data-label]::before {
    position: absolute; /* Absolut positioniert */
    left: 0.5rem; /* Abstand links */
    top: 0.4rem; /* Abstand oben */
    font-weight: bold; /* Fett */
  }

  /* Hilfebilder Bereich auf Block umstellen */
  #hilfe-bilder-gesamt-container {
    display: block; /* Block-Layout */
  }
  #hilfe-bilder-list-container,
  #mittelgrosses-vorschaufenster-container {
    width: 100% !important; /* Volle Breite */
    max-height: none !important; /* Höhe aufheben */
    margin-bottom: 1rem; /* Abstand nach unten */
  }
}

/* --- 17. Druckmodus --- */
@media print {
  /*
    Druckmodus aktivieren: Alle CSS-Regeln innerhalb dieses Blocks gelten nur beim Drucken.
  */

  /* Hilfebilder-Liste: volle Höhe, kein Scrollen, alles sichtbar */
  #hilfe-bilder-list {
    max-height: none !important;    /* Maximale Höhe aufheben */
    height: auto !important;        /* Höhe automatisch an Inhalt anpassen */
    overflow: visible !important;   /* Überlauf sichtbar, kein Scrollbalken */
  }

  /* Mittelgroßes Vorschaufenster: volle Höhe, kein Scrollen, alles sichtbar */
  #mittelgrosses-vorschaufenster-container {
    max-height: none !important;    /* Maximale Höhe aufheben */
    height: auto !important;        /* Höhe automatisch an Inhalt anpassen */
    overflow: visible !important;   /* Überlauf sichtbar, kein Scrollbalken */
  }

  /* Container des mittleren Bildes: volle Höhe, kein Scrollen, alles sichtbar */
  #mittelgrosses-bild-container {
    max-height: none !important;    /* Maximale Höhe aufheben */
    height: auto !important;        /* Höhe automatisch an Inhalt anpassen */
    overflow: visible !important;   /* Überlauf sichtbar, kein Scrollbalken */
  }

  /* Mittleres Bild: maximale Höhe aufheben, maximale Breite auf 100% */
  #mittelgrosses-bild {
    max-height: none !important;    /* Maximale Höhe aufheben */
    max-width: 100% !important;     /* Bild passt sich der Breite an */
  }

  /* Große Überschrift: Schriftgröße für Druck anpassen */
  .ueberschrift_gross {
    font-size: 1.2rem !important;   /* Schriftgröße auf 1.2rem setzen */
  }

  /* Textdatei Bereich komplett anzeigen */
  #textfile-content {
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    padding: 0 !important;
    font-size: 12pt;
    white-space: pre-wrap;
  }

  /* Nur Textfile Section sichtbar */
  body * {
    visibility: hidden;
  }
  #textfile-section, #textfile-section * {
    visibility: visible;
  }
  #textfile-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* --- 18. NEU: Styling für den Infotext im Footer --- */
#info-text-container {
  display: none;
  max-height: 300px;
  overflow: auto;
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 1rem;
  font-family: monospace;
  white-space: pre-wrap; /* Zeilenumbruch im Text */
  margin-top: 0.5rem;
  width: 90%; /* Optional: Breite begrenzen */
  max-width: 800px; /* Optional: max Breite */
}

/* Footer mit Button und Info-Text */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  background-color: #f0f0f0;
  gap: 1rem;
}

#toggle-info-text-btn {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #007acc;
  background-color: #007acc;
  color: white;
  transition: background-color 0.3s ease;
}

#toggle-info-text-btn:hover,
#toggle-info-text-btn:focus {
  background-color: #005fa3;
  outline: none;
}

/* --- NEU: Styles für den Bereich "Dynamisches Laden von Textdateien" 18.08.2025 09:20 --- */
#textfile-section {
  margin-top: 2rem;
  border-top: 2px solid #007acc;
  padding-top: 1rem;
  font-family: Arial, sans-serif;
}

#textfile-section h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #007acc;
}

#textfile-select {
  font-size: 1rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #007acc;
  border-radius: 4px;
  background-color: #e6f0ff;
  cursor: pointer;
}

/* Suchfeld und Buttons im Textdatei-Bereich */
#textfile-search-container {
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

#textfile-search-input {
  flex-grow: 1;
  font-size: 1rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid #007acc;
  border-radius: 4px;
}

#textfile-search-btn,
#textfile-clear-btn {
  background-color: #007acc;
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;
}

#textfile-search-btn:hover,
#textfile-clear-btn:hover,
#textfile-search-btn:focus,
#textfile-clear-btn:focus {
  background-color: #005fa3;
  outline: none;
}

#textfile-content {
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #f9f9f9;
  font-family: monospace, monospace;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  /* Wichtig: erlauben, dass HTML im pre angezeigt wird */
  /* Wir nutzen innerHTML für Hervorhebungen */
}

/* Hervorhebung der Suchtreffer */
#textfile-content mark {
  background-color: yellow;
  color: black;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: bold;
}

/* Hervorhebung des aktiven Suchtreffers */
#textfile-content mark.active {
  background-color: orange;
  color: black;
  font-weight: bold;
  outline: 2px solid red;
  border-radius: 2px;
}

/* --- NEU: Button zum Kopieren des Textes in die Zwischenablage --- */
#copy-text-btn {
  background-color: #007acc;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  user-select: none;
}

#copy-text-btn:hover,
#copy-text-btn:focus {
  background-color: #005fa3;
  outline: none;
}