/* 🌐 Grundlayout für die gesamte Seite — 📘 Modul 1 (Allgemein) */
body {
  margin: 0;                           /* 🚫 Kein äußerer Abstand */
  font-family: sans-serif;            /* 🔤 Moderne serifenlose Schrift */
  font-size: 14px;                    /* 🔠 Grundschriftgröße */
}

/* 🧱 Vollbild-Login-Screen */
.login-screen {
  position: fixed;                    /* 📌 Überlagert alles, bleibt fixiert */
  top: 0; left: 0;                    /* 🔝 Oben links beginnen */
  width: 100vw;                       /* ↔️ Volle Bildschirmbreite */
  height: 100vh;                      /* ↕️ Volle Bildschirmhöhe */
  background: white;                  /* 🎨 Weißer Hintergrund */
  z-index: 99999;                     /* 🔼 Ganz oben anzeigen */
  display: flex;                      /* 📐 Flexbox für Ausrichtung */
  flex-direction: column;            /* ⬇️ Elemente vertikal stapeln */
  align-items: center;               /* ↔️ Zentriert ausrichten */
  justify-content: flex-start;       /* ⬆️ Oben anfangen */
  padding-top: 40px;                 /* 🧍 Abstand nach oben */
  font-family: sans-serif;           /* 🔤 Schrift wie Body */
}

/* 🖼️ RTW-Logo */
.login-logo {
  width: 280px;                       /* 📏 Breite des Logos */
  margin-bottom: 20px;               /* ↕️ Abstand zum nächsten Element */
}

/* ℹ️ Info-Text mit Bild-Icon */
.login-info {
  text-align: center;                /* 📍 Zentrierter Text */
  margin-bottom: 20px;               /* ↕️ Abstand zum Formular */
}

/* 🖼️ Bildbasiertes Info-Icon – Abstand reduziert */
.info-icon-img {
  width: 30px;                       /* 📏 Icongröße */
  margin-bottom: 2px;                /* 🔽 Leichter Abstand nach unten */
  display: block;                    /* 🔲 Block-Element für zentrierte Ausrichtung */
  margin-left: auto;                 /* ↔️ Automatisch zentrieren */
  margin-right: auto;                /* ↔️ Automatisch zentrieren */
}

/* 📝 Info-Text */
.info-text {
  color: #444;                       /* 🎨 Dunkles Grau für bessere Lesbarkeit */
  font-size: 14px;                   /* 🔠 Etwas kleinere Schrift */
  line-height: 1.4;                  /* 📏 Zeilenhöhe für bessere Lesbarkeit */
  margin-top: 0;                     /* 🔼 Kein Abstand nach oben */
}

/* 🧱 Login-Formular Container */
.login-form {
  background: transparent;           /* 🧼 Kein Hintergrund */
  display: flex;                     /* 📐 Flex-Layout */
  flex-direction: column;           /* ⬇️ Eingabefelder untereinander */
  width: 300px;                      /* 📏 Maximalbreite */
  max-width: 90%;                    /* 📱 Reaktionsfähigkeit auf kleinen Geräten */
  z-index: 1;                        /* 🔽 Unter Modal aber über Figur */
}

/* 🏷️ Formular-Titel */
.login-form h2 {
  font-size: 18px;                   /* 🔠 Größer als Normaltext */
  color: #444;                       /* 🎨 Einheitliches Grau */
  margin-bottom: 14px;              /* ↕️ Abstand zum nächsten Element */
}

/* 🏷️ Eingabefeld-Beschriftungen */
.login-form label {
  font-size: 10px;                   /* 🔤 Kleine Schrift */
  font-weight: bold;                /* 🅱️ Fett zur Hervorhebung */
  color: #1c4d4d;                   /* 🎨 Blaugrüner Akzent */
  margin: 6px 0 4px;                /* ↕️ Abstand oben/unten */
}

/* 🔲 Eingabefelder */
.login-form input {
  padding: 14px 12px;               /* 📏 Innenabstand für bessere Bedienung */
  font-size: 12px;                  /* 🔠 Gut lesbar, aber kompakt */
  border: 1px solid #bbb;           /* 🪟 Dezente Umrandung */
  border-radius: 8px;               /* 🟦 Leicht abgerundete Ecken */
  background: #f5f5f5;              /* 🎨 Helles Grau als Hintergrund */
  margin-bottom: 10px;              /* ↕️ Abstand zum nächsten Element */
  width: 100%;                      /* ⬛ Volle Breite im Container */
  max-width: 230px;                 /* 📏 Begrenzung für große Bildschirme */
  box-sizing: border-box;           /* 🧱 Padding zählt zur Gesamtbreite */
}

/* 🔐 Passwortfeld-Wrapper mit Sichtbarkeitsicon */
.password-wrapper {
  position: relative;               /* 📌 Für Positionierung des Icons */
}

/* 🔲 Eingabefeld im Wrapper */
.password-wrapper input {
  width: 100%;                      /* ⬛ Volle Breite */
  padding-right: 44px;              /* 🔲 Platz für Icon rechts */
  box-sizing: border-box;           /* 🧱 Korrekte Breitenberechnung */
}

/* 👁️‍🗨️ Icon zum Passwortanzeigen */
.toggle-password-icon {
  position: absolute;               /* 📌 Über dem Eingabefeld */
  top: 40%;                         /* 🔽 Etwas über Mitte */
  left: 190px;                      /* 📏 Abstand vom linken Rand */
  transform: translateY(-50%);      /* 🎯 Vertikal zentrieren */
  width: 32px;                      /* 📏 Icongröße */
  height: 32px;
  object-fit: contain;             /* 🖼️ Skaliert ohne Verzerrung */
  cursor: pointer;                 /* 🖱️ Zeigt Klickbarkeit */
}

/* ✅ Start-Button */
.login-button {
  background: #2fa381;              /* 🎨 Grünblauer Farbton */
  color: white;                     /* 🔤 Weißer Text */
  font-weight: bold;                /* 🅱️ Klar hervorgehoben */
  padding: 14px;                    /* 📏 Innenabstand */
  font-size: 16px;                  /* 🔠 Größerer Text */
  border: none;                     /* 🚫 Kein Rahmen */
  border-radius: 8px;               /* 🟦 Sanft abgerundet */
  cursor: pointer;                  /* 🖱️ Mauszeiger beim Überfahren */
  margin-top: 10px;                 /* ↕️ Abstand nach oben */
  width: 100%;                      /* ⬛ Volle Breite */
  max-width: 200px;                 /* 📏 Begrenzung auf Desktop */
}

/* ✅ Start-Button Hover-Zustand */
.login-button:hover {
  background: #268f70;              /* 🎨 Etwas dunkler bei Hover */
}

/* 👨‍⚕️ Figur am unteren Rand */
.login-figure {
  position: absolute;               /* 📌 Fixiert am unteren Rand */
  bottom: 50px;                     /* 🔼 leicht angehoben */
  left: auto;                       /* 🔄 Standard deaktiviert */
  right: 0px;                       /* 📍 Direkt rechtsbündig */
  width: 280px;                     /* 📏 Bildbreite */
  pointer-events: none;            /* 🚫 Kein Einfluss auf Mausaktionen */
}

/* 🧭 Intro-Screen Basis */
.intro-screen {
  position: fixed;                  /* 📌 Überlagert die ganze App */
  top: 0; left: 0;                  /* 🔝 Startposition ganz oben links */
  width: 100vw;                     /* ↔️ Volle Bildschirmbreite */
  height: 100vh;                    /* ↕️ Volle Bildschirmhöhe */
  background: white;                /* 🎨 Weißer Hintergrund */
  z-index: 99998;                   /* 🔽 Unter dem Login-Screen (99999) */
  display: flex;                    /* 📐 Zentrierlayout mit Flexbox */
  align-items: center;             /* ↕️ Vertikale Zentrierung */
  justify-content: center;         /* ↔️ Horizontale Zentrierung */
}

/* 📄 Container für alle Loadscreen-Seiten */
.loadscreen-container {
  width: 100%;                      /* ⬛ Volle Breite */
  height: 100%;                     /* ⬛ Volle Höhe */
  overflow: hidden;                /* 🚫 Kein Scrollen innerhalb */
  position: relative;              /* 📌 Für Seitenpositionierung */
}

/* 🔘 Fortschrittspunkte (Dots oben) */
.dots {
  position: absolute;              /* 📌 Über den Seiten positioniert */
  top: 30px;                       /* 🔼 Abstand vom oberen Rand */
  width: 100%;                     /* ↔️ Volle Breite */
  display: flex;                   /* 📐 Flexbox für gleichmäßige Punkte */
  justify-content: center;         /* ⬅️➡️ Zentrierte Punkte */
  gap: 10px;                       /* 🔘 Abstand zwischen den Punkten */
  z-index: 1;                      /* 🔽 Über Hintergrund, unter Modal */
}

/* 🔘 Einzelner Punkt (inaktiv) */
.dot {
  width: 12px;                     /* 📏 Größe */
  height: 12px;
  border-radius: 50%;              /* 🟢 Kreisform */
  background: #ccc;                /* 🎨 Grauer Hintergrund (inaktiv) */
}

/* 🔘 Aktiver Punkt */
.dot.active {
  background: #fff;                /* 🎨 Weißer Kreis */
  border: 2px solid #999;          /* ⭕ Grauer Rahmen für Sichtbarkeit */
}

/* 📄 Einzelseite (Page 1–5) */
.loadscreen-page {
  width: 100%;                     /* ⬛ Volle Breite */
  height: 100%;                    /* ⬛ Volle Höhe */
  display: none;                   /* 🚫 Erstmal ausgeblendet */
  flex-direction: column;          /* ⬇️ Inhalte vertikal anordnen */
  align-items: center;             /* ↔️ Zentrieren */
  justify-content: flex-start;     /* ⬆️ Start oben */
  padding-top: 80px;               /* 🔼 Abstand für Inhalte */
  position: absolute;              /* 📌 Überlagerung für Seitenwechsel */
  top: 0;
  left: 0;
}

/* 📄 Sichtbare Seite */
.loadscreen-page.visible {
  display: flex;                   /* 👁️ Zeige Seite im Flex-Layout */
}

/* 🚨 Modal-Hintergrund (Logout-Hinweis) */
.modal-overlay {
  position: fixed;                 /* 📌 Über gesamte Seite legen */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);     /* 🌫️ Halbtransparenter dunkler Hintergrund */
  display: flex;                   /* 📐 Zentrierung für Box */
  justify-content: center;
  align-items: center;
  z-index: 9999;                   /* 🔝 Über allem außer Login */
}

/* 🧱 Hinweisbox */
.modal-box {
  background: white;              /* 🎨 Weißer Hintergrund */
  padding: 24px;                  /* 🧱 Innenabstand */
  border-radius: 10px;            /* 🟦 Runde Ecken */
  width: 90%;                     /* 📏 Responsiv */
  max-width: 320px;               /* 📏 Begrenzung für große Bildschirme */
  text-align: center;             /* 📍 Zentrierter Text */
  box-shadow: 0 0 15px rgba(0,0,0,0.2); /* 🕶️ Sanfter Schatteneffekt */
}

/* 🏷️ Titel im Modal */
.modal-title {
  font-size: 18px;                /* 🔠 Etwas größer für Betonung */
  font-weight: bold;             /* 🅱️ Fett für Klarheit */
  color: #444;                   /* 🎨 Dunkles Grau */
  margin-bottom: 12px;           /* ↕️ Abstand zum Text darunter */
}

/* 📝 Hinweistext */
.modal-text {
  font-size: 16px;               /* 🔠 Klar lesbar */
  color: #444;
  margin-bottom: 20px;           /* ↕️ Abstand zu den Buttons */
}

/* 🔘 Button-Gruppe */
.modal-actions {
  display: flex;                 /* 📐 Buttons nebeneinander */
  justify-content: space-around;/* ↔️ Gleichmäßig verteilt */
}

/* 🟩 Standard-Button-Stil */
.modal-btn {
  padding: 8px 16px;             /* 📏 Angenehme Größe */
  border: none;                  /* 🚫 Kein Rahmen */
  border-radius: 6px;            /* 🟦 Runde Ecken */
  cursor: pointer;               /* 🖱️ Interaktiv */
  font-weight: bold;             /* 🅱️ Deutlich lesbar */
}

/* ❌ Abbrechen-Button */
.modal-btn.cancel {
  background: #e5e7eb;           /* 🎨 Grauer Hintergrund */
  color: #111;                   /* 🔤 Schwarzer Text */
}

/* ✅ Bestätigen-Button */
.modal-btn.confirm {
  background: #ef4444;           /* 🎨 Rotes Warnsignal */
  color: white;                  /* 🔤 Weißer Text */
}

/* 🖼️ LOADSCREEN 1 – Bild */
.intro-image-1 {
  position: absolute;              /* 📌 Absolut positioniert innerhalb der Seite */
  bottom: 0;                       /* ⬇️ An unterem Rand ausrichten */
  right: 0;                        /* ➡️ Rechtsbündig platzieren */
  transform: translate(-6px, -80px);  /* ↖️ Leicht nach links und oben verschieben */
  width: 50%;                      /* 📏 Bild nimmt 50 % der Seitenbreite ein */
}

/* 📝 LOADSCREEN 1 – Titel */
.intro-title-1 {
  font-size: 18px;                 /* 🔠 Titel-Schriftgröße */
  font-weight: bold;              /* 🅱️ Fettgedruckt für bessere Sichtbarkeit */
  color: #444;                     /* 🎨 Dunkles Grau für Textfarbe */
  margin-bottom: 14px;            /* ↕️ Abstand nach unten zum Text */
  text-align: center;             /* ↔️ Text mittig zentrieren */
  max-width: 80%;                 /* 📏 Maximalbreite beschränken */
  margin-left: auto;              /* 🔄 Horizontale Zentrierung */
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Zeilenumbruch bei langen Wörtern erzwingen */
}

/* 📄 LOADSCREEN 1 – Beschreibungstext */
.intro-text-1 {
  color: #444;                     /* 🎨 Gleiches Grau wie beim Titel */
  font-size: 14px;                 /* 🔤 Etwas kleiner als der Titel */
  line-height: 1.5;                /* 📏 Erhöhter Zeilenabstand für bessere Lesbarkeit */
  margin-top: 0;                   /* 🚫 Kein oberer Abstand */
  z-index: 2;                      /* 📚 Liegt über Hintergrund */
  text-align: center;             /* ↔️ Zentriert ausrichten */
  max-width: 80%;                 /* 📏 Begrenzte Textbreite */
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Automatischer Umbruch langer Wörter */
}

/* 🖼️ LOADSCREEN 2 – Bild */
.intro-image-2 {
  position: absolute;              /* 📌 Absolut positioniert innerhalb der Seite */
  bottom: 0;                       /* ⬇️ An unterem Rand ausrichten */
  right: 0;                        /* ➡️ Rechtsbündig platzieren */
  transform: translate(-6px, -80px);  /* ↖️ Leicht nach links und oben verschieben */
  width: 50%;                      /* 📏 Bild nimmt 50 % der Seitenbreite ein */
}

/* 📝 LOADSCREEN 2 – Titel */
.intro-title-2 {
  font-size: 18px;                 /* 🔠 Titel-Schriftgröße */
  font-weight: bold;              /* 🅱️ Fettgedruckt für bessere Sichtbarkeit */
  color: #444;                     /* 🎨 Dunkles Grau für Textfarbe */
  margin-bottom: 14px;            /* ↕️ Abstand nach unten zum Text */
  text-align: center;             /* ↔️ Text mittig zentrieren */
  max-width: 80%;                 /* 📏 Maximalbreite beschränken */
  margin-left: auto;              /* 🔄 Horizontale Zentrierung */
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Zeilenumbruch bei langen Wörtern erzwingen */
}

/* 📄 LOADSCREEN 2 – Beschreibungstext */
.intro-text-2 {
  color: #444;                     /* 🎨 Gleiches Grau wie beim Titel */
  font-size: 14px;                 /* 🔤 Etwas kleiner als der Titel */
  line-height: 1.5;                /* 📏 Erhöhter Zeilenabstand für bessere Lesbarkeit */
  margin-top: 0;                   /* 🚫 Kein oberer Abstand */
  z-index: 2;                      /* 📚 Liegt über Hintergrund */
  text-align: center;             /* ↔️ Zentriert ausrichten */
  max-width: 80%;                 /* 📏 Begrenzte Textbreite */
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Automatischer Umbruch langer Wörter */
}

/* 🖼️ LOADSCREEN 3 – Bild */
.intro-image-3 {
  position: absolute;              /* 📌 Absolut positioniert innerhalb der Seite */
  bottom: 0;                       /* ⬇️ An unterem Rand ausrichten */
  right: 0;                        /* ➡️ Rechtsbündig platzieren */
  transform: translate(-6px, -80px);  /* ↖️ Leicht nach links und oben verschieben */
  width: 50%;                      /* 📏 Bild nimmt 50 % der Seitenbreite ein */
}

/* 📝 LOADSCREEN 3 – Titel */
.intro-title-3 {
  font-size: 18px;                 /* 🔠 Titel-Schriftgröße */
  font-weight: bold;              /* 🅱️ Fettgedruckt für bessere Sichtbarkeit */
  color: #444;                     /* 🎨 Dunkles Grau für Textfarbe */
  margin-bottom: 14px;            /* ↕️ Abstand nach unten zum Text */
  text-align: center;             /* ↔️ Text mittig zentrieren */
  max-width: 80%;                 /* 📏 Maximalbreite beschränken */
  margin-left: auto;              /* 🔄 Horizontale Zentrierung */
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Zeilenumbruch bei langen Wörtern erzwingen */
}

/* 📄 LOADSCREEN 3 – Beschreibungstext */
.intro-text-3 {
  color: #444;                     /* 🎨 Gleiches Grau wie beim Titel */
  font-size: 14px;                 /* 🔤 Etwas kleiner als der Titel */
  line-height: 1.5;                /* 📏 Erhöhter Zeilenabstand für bessere Lesbarkeit */
  margin-top: 0;                   /* 🚫 Kein oberer Abstand */
  z-index: 2;                      /* 📚 Liegt über Hintergrund */
  text-align: center;             /* ↔️ Zentriert ausrichten */
  max-width: 80%;                 /* 📏 Begrenzte Textbreite */
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Automatischer Umbruch langer Wörter */
}

/* 🖼️ LOADSCREEN 4 – Bild */
.intro-image-4 {
  position: absolute;              /* 📌 Absolut positioniert innerhalb der Seite */
  bottom: 0;                       /* ⬇️ An unterem Rand ausrichten */
  right: 0;                        /* ➡️ Rechtsbündig platzieren */
  transform: translate(-6px, -80px);  /* ↖️ Leicht nach links und oben verschieben */
  width: 50%;                      /* 📏 Bild nimmt 50 % der Seitenbreite ein */
}

/* 📝 LOADSCREEN 4 – Titel */
.intro-title-4 {
  font-size: 18px;                 /* 🔠 Titel-Schriftgröße */
  font-weight: bold;              /* 🅱️ Fettgedruckt für bessere Sichtbarkeit */
  color: #444;                     /* 🎨 Dunkles Grau für Textfarbe */
  margin-bottom: 14px;            /* ↕️ Abstand nach unten zum Text */
  text-align: center;             /* ↔️ Text mittig zentrieren */
  max-width: 80%;                 /* 📏 Maximalbreite beschränken */
  margin-left: auto;              /* 🔄 Horizontale Zentrierung */
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Zeilenumbruch bei langen Wörtern erzwingen */
}

/* 📄 LOADSCREEN 4 – Beschreibungstext */
.intro-text-4 {
  color: #444;                     /* 🎨 Gleiches Grau wie beim Titel */
  font-size: 14px;                 /* 🔤 Etwas kleiner als der Titel */
  line-height: 1.5;                /* 📏 Erhöhter Zeilenabstand für bessere Lesbarkeit */
  margin-top: 0;                   /* 🚫 Kein oberer Abstand */
  z-index: 2;                      /* 📚 Liegt über Hintergrund */
  text-align: center;             /* ↔️ Zentriert ausrichten */
  max-width: 80%;                 /* 📏 Begrenzte Textbreite */
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Automatischer Umbruch langer Wörter */
}

/* 🖼️ LOADSCREEN 5 – Bild */
.intro-image-5 {
  position: absolute;              /* 📌 Absolut positioniert innerhalb der Seite */
  bottom: 0;                       /* ⬇️ An unterem Rand ausrichten */
  right: 0;                        /* ➡️ Rechtsbündig platzieren */
  transform: translate(-6px, -80px);  /* ↖️ Leicht nach links und oben verschieben */
  width: 50%;                      /* 📏 Bild nimmt 50 % der Seitenbreite ein */
}

/* 📝 LOADSCREEN 5 – Titel */
.intro-title-5 {
  font-size: 18px;                 /* 🔠 Titel-Schriftgröße */
  font-weight: bold;              /* 🅱️ Fettgedruckt für bessere Sichtbarkeit */
  color: #444;                     /* 🎨 Dunkles Grau für Textfarbe */
  margin-bottom: 14px;            /* ↕️ Abstand nach unten zum Text */
  text-align: center;             /* ↔️ Text mittig zentrieren */
  max-width: 80%;                 /* 📏 Maximalbreite beschränken */
  margin-left: auto;              /* 🔄 Horizontale Zentrierung */
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Zeilenumbruch bei langen Wörtern erzwingen */
}

/* 📄 LOADSCREEN 5 – Beschreibungstext */
.intro-text-5 {
  color: #444;                     /* 🎨 Gleiches Grau wie beim Titel */
  font-size: 14px;                 /* 🔤 Etwas kleiner als der Titel */
  line-height: 1.5;                /* 📏 Erhöhter Zeilenabstand für bessere Lesbarkeit */
  margin-top: 0;                   /* 🚫 Kein oberer Abstand */
  z-index: 2;                      /* 📚 Liegt über Hintergrund */
  text-align: center;             /* ↔️ Zentriert ausrichten */
  max-width: 80%;                 /* 📏 Begrenzte Textbreite */
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;          /* 🔁 Automatischer Umbruch langer Wörter */
}

/* 🟢 Start-Button (z. B. auf Seite 5) */
.intro-button {
  background: #2fa381;            /* 🎨 Primärfarbe: grünes Design */
  color: white;                   /* 🔤 Weißer Text für Kontrast */
  font-weight: bold;              /* 🅱️ Deutlich sichtbar */
  font-size: 16px;                /* 🔠 Gut lesbare Schrift */
  padding: 14px 20px;             /* 📏 Großzügiger Button */
  border: none;                   /* 🚫 Kein Rahmen */
  border-radius: 8px;             /* 🟦 Abgerundete Ecken */
  margin: 20px auto;              /* ↕️ Abstand und automatische Zentrierung */
  transform: translateX(-50px);   /* 🔄 Leicht nach links versetzt */
  cursor: pointer;                /* 🖱️ Interaktiv */
}

.intro-button:hover {
  background: #268f70;            /* 🎨 Dunkleres Grün bei Hover */
}

/* 🔳 Gemeinsamer Container für beide Buttons */
.intro-button-container {
  display: flex;                  /* 📐 Flexbox-Layout aktivieren */
  flex-direction: column;         /* ⬇️ Buttons untereinander stapeln */
  align-items: center;            /* ↔️ Horizontal zentrieren */
  gap: 12px;                      /* ↕️ Vertikaler Abstand zwischen Buttons */
  margin-top: 240px;              /* 🔼 Abstand vom oberen Rand zur Platzierung */
  transform: translateX(-90px);   /* ↔️ Leicht nach links verschieben für Design-Ausrichtung */
  z-index: 5;                     /* 🔝 Überlagert Elemente mit niedrigerem Z-Index (z. B. Bild) */
  position: relative;             /* 📍 Positionierung relativ zum normalen Flow – wichtig für z-Index */
}

/* ▶ Direkt-Start-Button (blau) */
.intro-button-skip {
  background: #466eae;            /* ✅ Grüner Hintergrund für Sichtbarkeit */
  color: white;                   /* 🔤 Weißer Text für Kontrast */
  font-weight: bold;              /* 🅱️ Fettschrift zur Betonung */
  font-size: 14px;                /* 🔠 Angemessene Schriftgröße */
  padding: 10px 20px;             /* 📦 Innenabstand: bequem klickbar */
  border: none;                   /* 🚫 Kein Rahmen */
  border-radius: 6px;             /* 🟦 Sanft abgerundete Ecken */
  cursor: pointer;                /* 🖱️ Zeigt Interaktivität an */
}

/* 🟩 Hover-Zustand: Dunkleres Blau */
.intro-button-skip:hover {
  background-color: #2f5187;      /* 🌳 Dunkleres Blau bei Mouseover */
}

/* ◀ Zurück-zum-Login Button (grau) */
.intro-button-back {
  background: #d1d5db;            /* ⚪ Heller Grauton für dezente Darstellung */
  color: white;                   /* 🔤 Weißer Text (gleiches wie beim grünen Button) */
  font-weight: bold;              /* 🅱️ Klar hervorgehoben */
  font-size: 14px;                /* 🔠 Lesbare Standardgröße */
  padding: 8px 16px;              /* 📦 Etwas kleinerer Innenabstand */
  border: none;                   /* 🚫 Kein Rahmen */
  border-radius: 6px;             /* 🟦 Gleichmäßige Rundung wie beim Startbutton */
  cursor: pointer;                /* 🖱️ Zeigt Klickmöglichkeit */
}

/* ⚙️ Hover-Zustand: leicht dunkler */
.intro-button-back:hover {
  background-color: #c0c5cc;      /* 🕳️ Etwas dunklerer Grauton bei Hover */
}

/* ============================================================
   🚑 RTW-Visual: Basislayout, Größen, Fixed-Version & Animation
   – nur für den neuen Container #rtw-background
   – abgestimmt auf JS-Fahrzeugwechsel und @keyframes rtwDriveIn
   ============================================================ */

@keyframes rtwDriveIn {
  0% {
    transform: translateX(150%) translateY(0); /* Start weit rechts */
    opacity: 0;
  }
  70% {
    transform: translateX(-15%) translateY(0); /* etwas weiter rein für Schwung */
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* 🧱 Basis-Layout für den RTW-Container */
#rtw-background {
  display: flex;                  /* 📐 Bild horizontal zentrieren */
  justify-content: center;        /* ↔️ Zentrierung innerhalb des Containers */
  margin-top: 8px;                 /* 🔼 Abstand zum Button darüber */
  pointer-events: none;            /* 🚫 keine Mausklicks (rein Deko) */
}

/* 🖼 Bildgrößen & Darstellung */
#rtw-background img {
  width: clamp(240px, 90vw, 720px); /* 📏 passt sich Viewport an (min 240px, max 720px) */
  max-height: 30vh;                 /* 🔝 max. 30% der Viewport-Höhe */
  height: auto;                     /* 📏 Verhältnis beibehalten */
  object-fit: contain;              /* 🎯 Bild vollständig anzeigen ohne Zuschnitt */
}

/* 📌 Fixed-Version: RTW bleibt am unteren Bildschirmrand sichtbar */
#rtw-background.fixed {
  position: fixed;                  /* 🧷 am Viewport fixieren */
  left: 50%;                         /* 📍 horizontal mittig ausrichten */
  bottom: 12px;                      /* ↕️ leicht über dem Rand platzieren */
  margin-top: 0;                     /* 🚫 kein Abstand oben */
  z-index: 999;                      /* 🔝 über anderen Elementen anzeigen */
  animation: rtwDriveIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; /* 🎞️ Einfahr-Animation */
}

/* 🎬 Normal-Version: unter dem Button mit Einfahr-Animation */
#rtw-background:not(.fixed) img {
  animation: rtwDriveIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; /* 🎞️ Animation beim Erscheinen */
}











/* 🔝 Kopfzeile (Header mit Logo & Menü) — 📘 Modul 2 */
.header {
  background: #f5f5f5;                /* 🎨 Hellgrauer Hintergrund */
  padding: 10px;                      /* 📦 Innenabstand */
  display: flex;                      /* 📐 Flex-Layout */
  align-items: center;               /* 🔼 Vertikal zentriert */
  border-bottom: 1px solid #ccc;     /* ➖ Unterer Rand (hellgrau) */
}
.menu-icon {
  font-size: 24px;                    /* 🔠 Großes Icon (z. B. ☰) */
  margin-right: 10px;                /* ↔️ Abstand zum Logo */
}
.logo {
  font-size: 20px;                    /* 🔠 Logo-Größe */
}
.logo .rtw {
  font-weight: bold;                 /* 🔡 Fett für „RTW“ */
  color: #000;                       /* ⚫ Schwarz */
}
.logo .refill {
  font-weight: normal;               /* 🔡 Normalgewicht */
  color: #999;                       /* 🎨 Hellgrau */
  margin-left: 0,2px;                  /* ⬅️ Abstand zu „RTW“ */
}

/* 🔤 Kleinere Schrift für Funkkennung im Header */
.kennung {
  font-size: 0.7em;   /* 🔎 deutlich kleiner */
  margin-left: 1px;   /* 📏 Abstand zum Typnamen */
  vertical-align: middle;
}


/* 🔍 Suchfeld — 📦 Modul 3 */
.search {
  background: #3a3a3a;               /* 🎨 Dunkles Grau */
  color: white;
  padding: 14px 10px;                /* 📦 Vertikaler + horizontaler Abstand */
  display: flex;
  align-items: center;
}
.search input {
  flex: 1;                           /* 🔄 Füllt gesamte Breite */
  border: none;                      /* 🚫 Kein Rahmen */
  background: transparent;          /* 🔍 Durchsichtig (siehe .search) */
  color: white;
  font-size: 16px;
  outline: none;                     /* 🚫 Kein Fokusrahmen */
}

/* 🧾 Tabellenkopf – Produktliste — 📋 Modul 6 */
.table-head {
  display: flex;
  background: #ffffff;               /* 🎨 Weißer Hintergrund */
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
.table-head div {
  padding: 8px;
  font-size: 12px;
  text-transform: uppercase;         /* 🔠 Alles Großbuchstaben */
}
.th-art {
  width: 88px;
  color: #333;
}
.th-soll {
  width: 30px;
  text-align: center;
  color: #333;
}
.th-product {
  flex: 1;
  color: #333;
}
.th-menge {
  width: 80px;
  text-align: center;
  color: #333;
}

/* ℹ️ Info-Banner Box-Styling */
.info-header {
  background-color: #afd1ca;     /* 🌿 Helles Grün als Hintergrund */
  padding: 16px;                 /* 📏 Innenabstand */
  border-radius: 8px;            /* 🔵 Abgerundete Ecken */
  margin: 12px 16px;             /* ↔️ Außenabstand */
  font-size: 15px;               /* 🔤 Textgröße */
  color: #1c1d1d;                /* 🎨 Schwarze Schrift */
  position: relative;            /* 📌 Für das Platzieren des Close-Buttons */
}

/* ❌ Schließen-Button oben rechts */
.close-info {
  position: absolute;            /* 📍 Position relativ zum Elternelement */
  top: 8px;                      /* 🔼 Abstand von oben */
  right: 12px;                   /* 🔽 Abstand von rechts */
  background: none;             /* 🧼 Kein Hintergrund */
  border: none;                 /* 🚫 Kein Rahmen */
  font-size: 20px;              /* 🔠 Größeres X-Symbol */
  color: #1c1d1d;               /* 🎨 Schwarz */
  cursor: pointer;              /* 🖱️ Hand-Cursor beim Hover */
}

/* ➕ Ursprüngliche Button-Darstellung */
.info-toggle-button {
  background-color: #b0d2cb;     /* 🌿 Grüner Hintergrund */
  color: #1c1d1d;                /* 🎨 Textfarbe Schwarz */
  font-size: 24px;               /* 🔠 Große Schrift */
  text-align: center;            /* 📍 Zentriert */
  padding: 4px;                  /* 📏 Innenabstand */
  width: 38px;                   /* ↔️ Breite */
  border-radius: 50%;            /* ⚪ Rundes Icon */
  margin: 10px auto;             /* ↕️ Abstand & zentriert */
  cursor: pointer;               /* 🖱️ Zeiger */
}

/* 🌿 Grüne Leiste im Hintergrund oben */
.green-bar {
  background-color: #2d9d7b;     /* 🌿 Hintergrundfarbe */
  height: 34px;                  /* ⬆️ Höhe der Leiste */
  position: relative;            /* 📌 Für zentriertes Positionieren */
  margin-bottom: 16px;           /* 🔻 Abstand zur nächsten Sektion */
}

/* 🔁 Überschreibt vorherige .info-toggle-button für Positionierung */
.info-toggle-button {
  position: absolute;            /* 📍 Absolute Zentrierung */
  top: 50%;                      /* 🔼 Vertikal zentriert */
  left: 50%;                     /* 🔽 Horizontal zentriert */
  transform: translate(-50%, -50%); /* 🎯 Genau in die Mitte schieben */
  background-color: #b0d2cb;     /* 🌱 Helles Mintgrün */
  color: #1c1d1d;                /* 🎨 Textfarbe Schwarz */
  font-size: 16px;               /* 🔡 Kleinere Schrift */
  width: 28px;                   /* 📏 Kleinere Breite */
  height: 28px;                  /* 📏 Kleinere Höhe */
  line-height: 26px;             /* 🔠 Vertikale Zentrierung im Button */
  text-align: center;            /* ⬅️➡️ Zentrierung */
  border-radius: 50%;            /* ⚪ Rundform */
  cursor: pointer;               /* 🖱️ Handzeiger */
}

/* 🌿 Grüne Leiste im Hintergrund oben */
.green-bar-pdf {
  background-color: #2d9d7b;     /* 🌿 Hintergrundfarbe */
  height: 34px;                  /* ⬆️ Höhe der Leiste */
  position: relative;            /* 📌 Für zentriertes Positionieren */
  margin-bottom: 30px;           /* 🔻 Abstand zur nächsten Sektion */
}


/* ➕ Ursprüngliche Button-Darstellung */
.info-toggle-button-pdf {
  background-color: #b0d2cb;     /* 🌿 Grüner Hintergrund */
  color: #1c1d1d;                /* 🎨 Textfarbe Schwarz */
  font-size: 24px;               /* 🔠 Große Schrift */
  text-align: center;            /* 📍 Zentriert */
  padding: 4px;                  /* 📏 Innenabstand */
  width: 38px;                   /* ↔️ Breite */
  border-radius: 50%;            /* ⚪ Rundes Icon */
  margin: 10px auto;             /* ↕️ Abstand & zentriert */
  cursor: pointer;               /* 🖱️ Zeiger */
}

/* 🔁 Überschreibt vorherige .info-toggle-button für Positionierung */
.info-toggle-button-pdf {
  position: absolute;            /* 📍 Absolute Zentrierung */
  top: 50%;                      /* 🔼 Vertikal zentriert */
  left: 50%;                     /* 🔽 Horizontal zentriert */
  transform: translate(-50%, -50%); /* 🎯 Genau in die Mitte schieben */
  background-color: #b0d2cb;     /* 🌱 Helles Mintgrün */
  color: #1c1d1d;                /* 🎨 Textfarbe Schwarz */
  font-size: 16px;               /* 🔡 Kleinere Schrift */
  width: 28px;                   /* 📏 Kleinere Breite */
  height: 28px;                  /* 📏 Kleinere Höhe */
  line-height: 26px;             /* 🔠 Vertikale Zentrierung im Button */
  text-align: center;            /* ⬅️➡️ Zentrierung */
  border-radius: 50%;            /* ⚪ Rundform */
  cursor: pointer;               /* 🖱️ Handzeiger */
}

/* 🌿 Grüne Leiste im Hintergrund oben */
.green-bar-toplist {
  background-color: #2d9d7b;     /* 🌿 Hintergrundfarbe */
  height: 34px;                  /* ⬆️ Höhe der Leiste */
  position: relative;            /* 📌 Für zentriertes Positionieren */
  margin-bottom: 24px;           /* 🔻 Abstand zur nächsten Sektion */
}

.info-toggle-button-toplist.counting {
  background-color: #466eae; /* Blau als Warnfarbe */
  color: #FFFFFF;
  font-weight: bold;
}

/* ➕ Ursprüngliche Button-Darstellung */
.info-toggle-button-toplist {
  background-color: #b0d2cb;     /* 🌿 Grüner Hintergrund */
  color: #1c1d1d;                /* 🎨 Textfarbe Schwarz */
  font-size: 24px;               /* 🔠 Große Schrift */
  text-align: center;            /* 📍 Zentriert */
  padding: 4px;                  /* 📏 Innenabstand */
  width: 38px;                   /* ↔️ Breite */
  border-radius: 50%;            /* ⚪ Rundes Icon */
  margin: 10px auto;             /* ↕️ Abstand & zentriert */
  cursor: pointer;               /* 🖱️ Zeiger */
}

/* 🔁 Überschreibt vorherige .info-toggle-button für Positionierung */
.info-toggle-button-toplist {
  position: absolute;            /* 📍 Absolute Zentrierung */
  top: 50%;                      /* 🔼 Vertikal zentriert */
  left: 50%;                     /* 🔽 Horizontal zentriert */
  transform: translate(-50%, -50%); /* 🎯 Genau in die Mitte schieben */
  background-color: #b0d2cb;     /* 🌱 Helles Mintgrün */
  color: #1c1d1d;                /* 🎨 Textfarbe Schwarz */
  font-size: 16px;               /* 🔡 Kleinere Schrift */
  width: 28px;                   /* 📏 Kleinere Breite */
  height: 28px;                  /* 📏 Kleinere Höhe */
  line-height: 26px;             /* 🔠 Vertikale Zentrierung im Button */
  text-align: center;            /* ⬅️➡️ Zentrierung */
  border-radius: 50%;            /* ⚪ Rundform */
  cursor: pointer;               /* 🖱️ Handzeiger */
}

/* ➕ Ursprüngliche Button-Darstellung */
.info-toggle-button-toplist-slide {
  background-color: #b0d2cb;     /* 🌿 Grüner Hintergrund */
  color: #1c1d1d;                /* 🎨 Textfarbe Schwarz */
  font-size: 24px;               /* 🔠 Große Schrift */
  text-align: center;            /* 📍 Zentriert */
  padding: 4px;                  /* 📏 Innenabstand */
  width: 38px;                   /* ↔️ Breite */
  border-radius: 50%;            /* ⚪ Rundes Icon */
  margin: 10px auto;             /* ↕️ Abstand & zentriert */
  cursor: pointer;               /* 🖱️ Zeiger */
}

/* 🔁 Überschreibt vorherige .info-toggle-button für Positionierung */
.info-toggle-button-toplist-slide {
  position: absolute;            /* 📍 Absolute Zentrierung */
  top: 50%;                      /* 🔼 Vertikal zentriert */
  left: 70%;                     /* 🔽 Horizontal zentriert */
  transform: translate(-50%, -50%); /* 🎯 Genau in die Mitte schieben */
  background-color: #b0d2cb;     /* 🌱 Helles Mintgrün */
  color: #1c1d1d;                /* 🎨 Textfarbe Schwarz */
  font-size: 16px;               /* 🔡 Kleinere Schrift */
  width: 28px;                   /* 📏 Kleinere Breite */
  height: 28px;                  /* 📏 Kleinere Höhe */
  line-height: 26px;             /* 🔠 Vertikale Zentrierung im Button */
  text-align: center;            /* ⬅️➡️ Zentrierung */
  border-radius: 50%;            /* ⚪ Rundform */
  cursor: pointer;               /* 🖱️ Handzeiger */
}

/* 📜 Info-Banner sanft ein-/ausfahren */
.info-collapsible {
  overflow: hidden;                           /* ✂️ Überstehenden Inhalt verstecken */
  transition: max-height 0.3s ease, padding 0.3s ease;
  will-change: max-height;                    /* 🔮 Performance-Hinweis */
  padding: 10px;                              /* 🧱 Standard-Innenabstand (sichtbar, wenn offen) */
  margin-bottom: 8px;                         /* ↕️ Außenabstand nach unten */
  border: 1px solid #ccc;                     /* 🎨 Beispielrahmen, optional */
  border-radius: 6px;                         /* 💡 leichte Abrundung */
  background: #f9f9f9;                        /* 🌿 Hintergrundfarbe (optional) */
}

/* 🔽 Eingeklappter Zustand */
.info-collapsible.collapsed {
  max-height: 0 !important;                   /* 🚪 komplett zusammenklappen */
  padding-top: 0;                             /* 👇 Abstände entfernen */
  padding-bottom: 0;
  border-width: 0;                            /* 🎨 Rahmen wegblenden */
  margin-bottom: 0;                           /* ⚡ Abstand nach unten aufheben */
}

/* 📦 Topliste ein-/ausfahren – sanft in beide Richtungen */
#results.top-collapsible {
  overflow: hidden;                                 /* ✂️ Überhang abschneiden   */
  transition:
    max-height 0.3s ease-in-out,                   /* 🎬 Höhe animieren         */
    padding     0.3s ease-in-out,                  /* 🧻 Innenabstände mitsliden*/
    margin      0.3s ease-in-out;                  /* ↕️ Außenabstände mitsliden*/
  will-change: max-height;                         /* 💡 Hint fürs Compositing  */
}

#results.top-collapsible.collapsed {
  max-height: 0 !important;                        /* 📏 Ziel: 0px              */
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
}

/* 📋 Produktzeilen: sowohl Suchergebnisse als auch offene Liste — 📦 Modul 6 + 📦 Modul 12 */
.results, .offen-liste {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  align-items: stretch;              /* 🔄 Volle Höhe */
  border-bottom: 1px solid #ccc;
}
.color-bar {
  width: 8px;                        /* ▓ Farbbalken zur Gruppierung */
}
.label {
  width: 80px;
  padding: 10px;
  font-size: 12px;
  color: #ccc;
  font-weight: bold;
  line-height: 1.1;
  background: #f0f0f0;              /* 🎨 Heller Hintergrund */
  text-align: center;
}
.soll {
  width: 30px;
  text-align: center;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
}
.product {
  flex: 1;
  padding: 10px;
  display: flex;
  align-items: center;
  background: #f9f9f9;
}
.product.name-only {
  flex: 1;
  padding: 10px;
  display: flex;
  align-items: center;
  background: #f9f9f9;
  line-height: 1.3;
  word-break: break-word;
}
.buttons {
  display: flex;
  gap: 4px;                          /* ↔️ Abstand zwischen Buttons */
  padding: 10px;
  align-items: flex-start;
  background: #f9f9f9;
}

/* 🔄 Produktzeile bei offener Liste (Fehlende Materialien) — 📦 Modul 12 */
.product-row {
  flex: 1;                            /* 📏 Nimmt gesamten horizontalen Platz ein */
  padding: 10px;                      /* 📦 Innenabstand */
  display: flex;                      /* 📐 Flex-Layout */
  align-items: flex-start;           /* 🔼 Oben ausgerichtet */
  gap: 10px;                          /* ↔️ Abstand zw. Menge und Name */
  background: #f9f9f9;               /* 🎨 Hellgrauer Hintergrund */
}
.product-row .menge {
  font-weight: bold;                 /* 🔡 Fette Schrift */
  font-size: 14px;                   /* 🔠 Standardgröße */
  color: #333;                       /* 🎨 Dunkelgrauer Text */
  white-space: nowrap;              /* 🚫 Kein Zeilenumbruch */
  display: flex;                     /* 📐 Flexbox für Zentrierung */
  align-items: center;              /* 🔼 Vertikal zentriert */
  padding-top: 2px;                  /* 🔽 Leichter Abstand nach unten */
}
.product-row .name {
  font-size: 14px;                   /* 🔠 Standardgröße */
  color: #444;                       /* 🎨 Etwas helleres Grau */
  line-height: 1.3;                  /* ↕️ Leicht größerer Zeilenabstand */
  word-break: break-word;           /* 🔤 Wortumbruch bei langen Namen */
  flex: 1;                           /* 📏 Füllt restliche Zeile */
}

/* ✔ Entfernen-Button – kleiner und oben ausgerichtet — 📦 Modul 12 */
.buttons button.remove {
  font-size: 13px;                   /* 🔠 Etwas kleiner */
  padding: 4px 8px;                  /* 📦 Kleiner Innenabstand */
  min-width: 26px;                   /* 📏 Mindestgröße */
  min-height: 26px;
  line-height: 1;                    /* 🔡 Kein extra Zeilenabstand */
  align-self: flex-start;           /* 🔼 Oben ausgerichtet im Container */
}

/* ➕➖ Buttons für Produktmengen – Touchfreundlich — 📦 Modul 6 */
.buttons button {
  font-size: 18px;                   /* 🔠 Große Schrift */
  padding: 8px 12px;                 /* 📦 Großer Innenabstand */
  min-width: 36px;                   /* 📏 Mindestbreite */
  min-height: 36px;
  border: 1px solid #888;           /* ▫️ Grauer Rand */
  background: white;                /* 🎨 Weißer Hintergrund */
  color: black;                     /* 🎨 Schwarzer Text */
  border-radius: 6px;               /* ⭕ Abgerundete Ecken */
  line-height: 1;                   /* 🔡 Kein Zeilenabstand */
  cursor: pointer;                  /* 🖱️ Mauszeiger als Button */
}

/* 🔝 Balken für „Meistgenutzte Artikel“ — 📦 Modul 10 */
.balken-most {
  background: #b0d2cb;              /* 🎨 Hellgrün */
  color: white;                     /* 🎨 Weißer Text */
  padding: 10px;
  text-align: center;               /* 📍 Zentriert */
  font-weight: bold;
  margin-top: 20px;
  border-top: 2px solid #8da8a2;    /* 🔳 Dreifachrahmen oben/links/rechts in grau */
  border-left: 2px solid #8da8a2;
  border-right: 2px solid #8da8a2;
  border-bottom: none;              /* 🚫 Kein unterer Rand */
}

/* 📋 Balken für „Fehlende Materialien“ — 📦 Modul 12 */
.balken-list {
  background: #b0d2cb;               /* 🎨 Hellgrün */
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
  border-top: 2px solid #8da8a2;      /* 🔳 Dreifachrahmen oben/links/rechts in grau */
  border-left: 2px solid #8da8a2;
  border-right: 2px solid #8da8a2;
  border-bottom: none;
}

/* 🖱️ Hover-Effekt für PDF-Icon rechts oben — 📦 Modul 13 */
#offenTitle span span:hover {
  transform: scale(1.2);            /* 🔍 Vergrößerung beim Hover */
  text-shadow: 0 0 4px white;       /* ✨ Weißer Schimmer */
  transition: all 0.2s ease;        /* 🎞️ Sanfte Animation */
}

/* 💚 Standardzustand: Grüner Button „✔ Alles aufgefüllt“ */
.reset_button_refill {
  background: #2FA381;                     /* 🎨 Erfolgsgrün */
  color: white;
  padding: 12px 16px;                      /* 📦 Etwas kompakter */
  font-weight: bold;
  margin-top: 16px;                        /* 🔽 Weniger Abstand oben */
  border-radius: 6px;                      /* 🟦 Dezente Rundung */
  font-size: 0.95rem;                      /* 🔠 Etwas kleinere Schrift */
  line-height: 1.4;
  width: 85%;                              /* 📏 Etwas schmaler als vorher */
  max-width: 320px;                        /* 🧱 Kleinere Obergrenze */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.12); /* 💡 Leicht abgeschwächter Schatten */
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}

/* 🔵 Countdown-Zustand: Gleiche Größe, andere Farbe */
.button_refill_countdown {
  background: #466eae;                     /* 🔵 Countdown-Blau */
  color: white;
  padding: 12px 16px;
  font-weight: bold;
  margin-top: 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.4;
  width: 85%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.12);
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}

/* 📚 Sidebar — Bedienmenü auf der linken Seite — 📦 Modul 5 */
.sidebar {
  position: fixed;
  top: 0;
  left: -300px;                     /* 🚫 Anfangs ausgeblendet (links außerhalb) */
  width: 280px;                     /* 📏 Breite der Sidebar */
  height: 100%;
  background: #2e2e2e;             /* 🎨 Dunkles Grau */
  color: white;
  z-index: 1000;                    /* ⬆️ Über den meisten Elementen */
  overflow-y: auto;                 /* ↕️ Scrollbar bei viel Inhalt */
  transition: left 0.3s ease;       /* 🎞️ Smooth Slide-In Effekt */
  font-family: sans-serif;
  font-size: 14px;
}
.sidebar.open {
  left: 0;                          /* 📍 Sichtbar beim Öffnen */
}
.overlay {
  display: none; /* 🛠️ wichtig */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);      /* 🎨 Dunkle Überlagerung */
  z-index: 999;
  display: none;                    /* 🚫 Anfangs unsichtbar */
}

.overlay.active {
  display: block; /* wird sichtbar */
}

/* 🔽 Einzelne Abschnitte innerhalb der Sidebar — 📦 Modul 5 */
.sidebar-section {
  margin: 20px 0;
  border-top: 1px solid #555;
  padding: 10px 0;
}
.sidebar-heading {
  padding: 10px 16px;
  font-size: 12px;
  color: #aaa;
  text-transform: uppercase;
}
.sidebar-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ddd;
  background: #3a3a3a;
  border-bottom: 1px solid #444;
}
.sidebar-item.title {
  font-weight: bold;
  background: #555;
  color: white;
}
.color-box {
  display: inline-block;
  width: 6px;
  height: 20px;
  margin-right: 10px;
}
.checkmark {
  color: #aaa;
  font-weight: bold;
  margin-left: auto;
}
.arrow {
  color: #aaa;
  font-size: 16px;
}

* 🔄 Produktzeile bei offener Liste (Detailsicht) — 📦 Modul 12 */
.product-row {
  flex: 1;                            /* 🔄 Flexibel auf volle Breite */
  padding: 10px;                      /* 📦 Innenabstand */
  display: flex;
  align-items: flex-start;           /* 🔼 Startausrichtung */
  gap: 10px;                          /* ↔️ Abstand zwischen Elementen */
  background: #f9f9f9;
}
.product-row .menge {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  white-space: nowrap;               /* 🧱 Keine Zeilenumbrüche */
  display: flex;
  align-items: center;
  padding-top: 2px;
}
.product-row .name {
  font-size: 14px;
  color: #444;
  line-height: 1.3;
  word-break: break-word;
  flex: 1;
}

/* ✔ Haken-Button in „offene Sachen“ — 📦 Modul 6 */
.buttons button.remove {
  font-size: 13px;
  padding: 4px 8px;
  min-width: 26px;
  min-height: 26px;
  line-height: 1;
  align-self: flex-start;            /* ⬆️ Ausrichtung oben */
}

/* ➕➖ Buttons – Produktmenge anpassen — 📦 Modul 4 */
.buttons button {
  font-size: 18px;
  padding: 8px 12px;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid #888;
  background: white;
  color: black;
  border-radius: 6px;                /* 🟠 Abgerundete Ecken */
  line-height: 1;
  cursor: pointer;                   /* 🖱️ Klickbar */
}

/* 🖱️ Hover-Effekt für PDF-Icon — 📄 Modul 13 */
#offenTitle span span:hover {
  transform: scale(1.2);             /* 🔍 Vergrößert leicht */
  text-shadow: 0 0 4px white;        /* 💡 Weißer Leuchteffekt */
  transition: all 0.2s ease;         /* ⏱️ Weiche Animation */
}
/* 📚 Sidebar (linke Navigation) — 📦 Modul 2 & Modul 24 */
.sidebar {
  position: fixed;                  /* 📌 Immer sichtbar */
  top: 0;
  left: -300px;                     /* ⬅️ Startposition außerhalb des Viewports */
  width: 280px;
  height: 100%;
  background: #2e2e2e;             /* 🎨 Dunkelgrauer Hintergrund */
  color: white;
  z-index: 1000;
  overflow-y: auto;                /* 🧭 Scrollbar bei langen Inhalten */
  transition: left 0.3s ease;      /* 🔁 Weiche Slide-Animation */
  font-family: sans-serif;
  font-size: 14px;
}

/* 📥 Sidebar geöffnet — 📦 Modul 2 */
.sidebar.open {
  left: 0;                         /* ⬅️ Sidebar wird sichtbar */
}

/* 🕶️ Overlay hinter der Sidebar — 📦 Modul 2 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);     /* 🖤 Halbtransparent */
  z-index: 999;
  display: none;
}

/* 🧱 Strukturierung der Sidebar — 📦 Modul 2 */
.sidebar-section {
  margin: 20px 0;
  border-top: 1px solid #555;
  padding: 10px 0;
}
.sidebar-heading {
  padding: 10px 16px;
  font-size: 12px;
  color: #aaa;
  text-transform: uppercase;       /* 🔠 Alles groß */
}

/* 📁 Einzelne Auswahlpunkte in der Sidebar — 📦 Modul 2 */
.sidebar-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ddd;
  background: #3a3a3a;
  border-bottom: 1px solid #444;
}

/* 📌 Titelzeile (z. B. Benutzerkennung) — 📦 Modul 2 */
.sidebar-item.title {
  font-weight: bold;
  background: #555;
  color: white;
}

/* 🎨 Farbbalken in der Sidebar-Auswahl — 📦 Modul 2 */
.color-box {
  display: inline-block;
  width: 6px;
  height: 20px;
  margin-right: 10px;
}

/* ✅ Haken-Symbol bei aktiver Auswahl — 📦 Modul 2 */
.checkmark {
  color: #aaa;
  font-weight: bold;
  margin-left: auto;
}

/* 🔽 Pfeil für Untermenü oder Navigation — 📦 Modul 2 */
.arrow {
  color: #aaa;
  font-size: 16px;
}
/* ⚙️ Allgemeine Einstellungen Ansicht — 📦 Modul 17 */
.allgemein-header {
  background: white;               /* 🎨 Weißer Hintergrund */
  padding: 12px;                   /* 📏 Abstand innen */
  font-weight: bold;               /* 🔠 Fetter Text */
  border-bottom: 1px solid #ccc;   /* 🧱 Untere Begrenzung */
  display: flex;                   /* 🧩 Flex-Layout */
  align-items: center;             /* ⬇️ Vertikal zentriert */
  font-size: 16px;
  color: #333;                     /* 🎨 Dunkelgrauer Text */
}

/* 🔤 Titelabschnitt (z. B. „Allgemeine Einstellungen“) — 📦 Modul 17 */
.allgemein-section-title {
  padding: 12px;
  background: #aaa;                /* 🎨 Grauer Balken */
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* 🧩 Einzelne Optionszeilen (z. B. RTW-Kennung, Schalter) — 📦 Modul 17 */
.allgemein-option {
  background: #dcdcdc;             /* 🎨 Helles Grau */
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #bbb;
  font-size: 14px;
  color: #333;
}

/* 🖋️ Text-Eingabefeld in Optionszeilen — 📦 Modul 17 */
.inputfield {
  width: 60px;
  padding: 4px;
  border: none;
  border-radius: 3px;
  text-align: right;               /* 🔢 Rechtsbündig */
}

/* 🔽 Dropdown-Feld (z. B. RTW-Auswahl) — 📦 Modul 17 & 18 */
.allgemein-option select.inputfield {
  padding: 4px;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  background-color: white;
  color: #333;
  width: 120px;
  text-align: center;              /* 📐 zentriert */
  text-align-last: center;         /* 🧠 letzter Eintrag zentriert */
}

/* 🔘 Umschalt-Schalter (Typ Tigris/Delfis etc.) — 📦 Modul 19 & 23 */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;                     /* 🔲 Gesamtbreite */
  height: 20px;
  margin-left: 10px;               /* 📏 Abstand links vom Text */
}

/* 🚫 Unsichtbarer Eingabe-Schalter — 📦 Modul 19 & 23 */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* 🔘 Schieberegler (Hintergrund) — 📦 Modul 19 & 23 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .2s;
  border-radius: 20px;             /* 🟢 Abgerundet */
}

/* ⚪️ Weißer Kreis im Schieberegler — 📦 Modul 19 & 23 */
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;              /* 🟢 Kreisform */
}

/* ✅ Aktivierter Schieberegler — 📦 Modul 19 & 23 */
input:checked + .slider {
  background-color: #4CAF50;       /* ✅ Grün */
}

/* ➡️ Verschiebung des weißen Kreises bei Aktivierung — 📦 Modul 19 & 23 */
input:checked + .slider:before {
  transform: translateX(14px);     /* ➡️ nach rechts verschoben */
}
/* 🎨 Eingabe-Wrapper: positioniert Icons links & rechts — 📦 Modul 24 (Login-Screen) */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* 🧾 Input-Felder mit Platz für Icons links + rechts — 📦 Modul 24 */
.input-wrapper input {
  width: 200px;
  padding: 14px 40px 14px 40px;   /* ⬅️➡️ Platz für Icons */
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  color: #333;
}

/* 🔣 Alle Icons im Eingabefeld — 📦 Modul 24 */
.input-wrapper .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  transition: opacity 0.2s ease;
}

/* 💬 Hinweisfenster (z. B. bei fehlendem Login) — 📦 Modul 24 */
#infoModal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  background: white;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  padding: 20px;
  z-index: 100000;
  display: none;
  font-family: sans-serif;
  text-align: center;
}

/* 📝 Titel im Hinweisfenster — 📦 Modul 24 */
#infoModal h3 {
  margin-top: 0;
  font-size: 17px;
  margin-bottom: 10px;
}

/* 📄 Beschreibung im Hinweisfenster — 📦 Modul 24 */
#infoModal p {
  font-size: 14px;
  color: #444;
}

/* 🔘 Button im Hinweisfenster — 📦 Modul 24 */
#infoModal button {
  margin-top: 15px;
  background: #eee;
  border: 1px solid #ccc;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}
/* 📳 Visuelles Pulsieren (Keyframe-Animation) — 📦 Modul 4, 5, 12 */
@keyframes pulse {
  0%   { transform: scale(1); box-shadow: none; }                            /* 🔹 Startzustand */
  50%  { transform: scale(1.2); box-shadow: 0 0 6px rgba(0,0,0,0.3); }       /* 💥 Aufblähen + Schatten */
  100% { transform: scale(1); box-shadow: none; }                            /* 🔙 Zurück zum Normalzustand */
}

/* 💡 Effekt für geklickte Buttons — 📦 Modul 4 (±), Modul 5 (✔) */
button.pulse-effect {
  animation: pulse 0.2s ease-out;                                            /* 💨 Schnelle Animation */
}

/* 💡 Optionaler Puls-Effekt auf Button-Container — 📦 Modul 4 (Fallback) */
.buttons.pulse-effect {
  animation: pulse 0.2s ease-out;
}

/* 🧮 Klickbare Mengenanzeige im grauen Kasten — 📦 Modul 12 */
.menge-touch {
  display: inline-block;
  background: #ebebeb;                                                       /* 🔘 Helles Grau */
  padding: 4px 6px;
  border-radius: 6px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  user-select: none;
  min-width: 28px;
  text-align: center;
}

/* 🚫 Verhindert Textauswahl bei Touch-Halten — 📦 Modul 12 */
.noselect {
  user-select: none;            /* 🔒 Keine Selektion per Doppelklick */
  -webkit-user-select: none;    /* 🔒 Safari */
  -ms-user-select: none;        /* 🔒 Internet Explorer / Edge Legacy */
}

/* 🧮 Stil für alle Inputfelder — 📦 Modul 24 (Login) */
.input-wrapper input {
  padding: 10px 32px;           /* ⬅️➡️ Platz für Icons */
  border: 1.5px solid #888;     /* 🧱 Dezente Umrandung */
  border-radius: 6px;           /* 🔵 Leicht abgerundet */
  font-size: 15px;
  width: 220px;
}

/* 🎯 Icons in Eingabefeldern (zentriert) — 📦 Modul 24 */
.input-wrapper .icon {
  position: absolute;
  top: 50%;                     /* 📍 Vertikal mittig */
  transform: translateY(-50%);
  font-size: 14px;
  color: black;                 /* ⚫ Monochrom für minimalistisches Design */
}

/* ➡️ Rechtes Icon (z. B. Sichtbarkeit) — 📦 Modul 24 */
.input-wrapper .icon.right {
  right: 10px;
  color: black;
  cursor: pointer;
}

/* 🌀 Schüttelanimation bei falscher Eingabe — 📦 Modul 24 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }               /* 🔁 Ausgangsposition */
  20%, 60% { transform: translateX(-8px); }            /* ⬅️ Nach links ruckeln */
  40%, 80% { transform: translateX(8px); }             /* ➡️ Nach rechts ruckeln */
}

/* Wird vom JS bei Fehlern gesetzt — 📦 Modul 24 */
.shake {
  animation: shake 0.4s;         /* 🕐 Dauer: 0,4 Sekunden */
}

/* 💬 Hinweisfenster (Modal) – 📦 Modul 13a
   ----------------------------------------
   Wird für das PDF-Vorschaufenster (#pdfModal) verwendet.
   Öffnet sich bei Klick auf PDF-Button ✔ in der Liste „Fehlende Materialien“.
*/

#infoModal {
  position: fixed;             /* 📌 Immer an fester Stelle im Viewport */
  top: 50%;                    /* ⬇️ Zentrierung vertikal */
  left: 50%;                   /* ⬅️ Zentrierung horizontal */
  width: 300px;                /* 📏 Breite des Modalfensters */
  background: white;          /* 🎨 Weißer Hintergrund */
  border-radius: 10px;        /* 🟦 Leicht abgerundete Ecken */
  transform: translate(-50%, -50%);  /* 🎯 Genau zentriert */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);  /* 🕶️ Leichter Schatten */
  padding: 20px;              /* ⬜ Innenabstand */
  z-index: 100000;            /* 🧱 Ganz oben im Stack */
  display: none;              /* 👻 Standardmäßig ausgeblendet */
  font-family: sans-serif;   /* 🖋 Einheitliche Schriftart */
  text-align: center;        /* 📄 Zentrierter Text */
}

#infoModal h3 {
  margin-top: 0;              /* 🚫 Kein Abstand oben */
  font-size: 17px;            /* 🔠 Überschriftgröße */
  margin-bottom: 10px;        /* 🔽 Abstand unter der Überschrift */
}

#infoModal p {
  font-size: 14px;            /* 🔡 Standardtextgröße */
  color: #444;                /* 🌑 Dunkelgrau für bessere Lesbarkeit */
}

#infoModal button {
  margin-top: 15px;           /* 🔼 Abstand über dem Button */
  background: #eee;           /* 🎨 Hellgrau */
  border: 1px solid #ccc;     /* 🖌️ Dezente Umrandung */
  padding: 6px 14px;          /* 📦 Innenabstand (oben/unten – links/rechts) */
  border-radius: 6px;         /* 🟠 Leicht abgerundete Ecken */
  cursor: pointer;            /* 🖱️ Zeiger zeigt Klickbarkeit an */
}

/* 📳 Visuelles Pulsieren (Animation) – 📦 Modul 4 und Modul 8
   -----------------------------------------------------------
   Wird verwendet bei Buttons (✔, +, –), um eine Aktion visuell zu bestätigen.
   Startet über die JS-Klasse `pulse-effect`.
*/

@keyframes pulse {
  0%   { transform: scale(1); box-shadow: none; }               /* 🔘 Ausgangszustand */
  50%  { transform: scale(1.2); box-shadow: 0 0 6px rgba(0,0,0,0.3); } /* 💥 Vergrößert & Schattiert */
  100% { transform: scale(1); box-shadow: none; }               /* 🔄 Zurücksetzen */
}

/* 💡 Button-Puls bei Klick */
button.pulse-effect {
  animation: pulse 0.2s ease-out;
}

/* 💡 Auch anwendbar auf ganze Button-Gruppen */
.buttons.pulse-effect {
  animation: pulse 0.2s ease-out;
}

/* 🧮 Klickbare Mengenanzeige (z. B. 3×) – 📦 Modul 12
   --------------------------------------------------
   Wird für die Anzahlfelder in der Liste „Offene Sachen“ verwendet.
   Unterstützt Touch-Funktionen (kurzes Tippen = +1, lang = –1).
*/

.menge-touch {
  display: inline-block;            /* 🧱 Block auf Zeilenhöhe */
  background: #ebebeb;              /* 🎨 Heller Hintergrund */
  padding: 4px 6px;                 /* 📦 Innenabstand */
  border-radius: 6px;               /* 🟦 Abgerundete Ecken */
  font-weight: bold;               /* 🔡 Fett für bessere Sichtbarkeit */
  color: #333;                      /* 🌑 Dunkelgrau */
  cursor: pointer;                 /* 🖱️ Interaktiv */
  user-select: none;              /* 🚫 Keine Textmarkierung */
  min-width: 28px;                 /* 📏 Einheitliche Mindestbreite */
  text-align: center;              /* 🔠 Zentriert im Block */
}

/* 🚫 Verhindert Textauswahl bei langem Drücken – 📦 Modul 12 */
.noselect {
  user-select: none;               /* 🛑 Keine Textmarkierung */
  -webkit-user-select: none;      /* 🛑 Safari */
  -ms-user-select: none;          /* 🛑 Internet Explorer/Edge */
}

/* 🧮 Grundstil für Eingabefelder */
.input-wrapper input {
  padding: 10px 32px;             /* ⬅️➡️ Platz für die Icons */
  border: 1.5px solid #888;       /* 🖌️ Graue Umrandung */
  border-radius: 6px;             /* 🟦 Abgerundete Kanten */
  font-size: 15px;                /* 🔡 Schriftgröße */
  width: 220px;                   /* 📏 Standardbreite */
}

/* 🎯 Gemeinsamer Stil für alle Icons */
.input-wrapper .icon {
  position: absolute;             /* 🔧 Positionierung innerhalb des Wrappers */
  top: 50%;                       /* 🎯 Vertikal zentriert */
  transform: translateY(-50%);
  font-size: 14px;                /* 🔡 Einheitliche Größe */
  color: black;                   /* ⚫ Monochrom für Klarheit */
}

/* 🌀 Schüttel-Animation bei falschem Code – 📦 Modul 0
   -----------------------------------------------------
   Wird via Klasse `.shake` auf das Formular angewendet.
   Zeigt dem Nutzer, dass etwas falsch war.
*/

@keyframes shake {
  0%, 100% { transform: translateX(0); }     /* 🔄 Ausgangslage */
  20%, 60% { transform: translateX(-8px); }  /* ⬅️ Nach links */
  40%, 80% { transform: translateX(8px); }   /* ➡️ Nach rechts */
}

/* 🎬 Effekt auf gesamtes Element */
.shake {
  animation: shake 0.4s;   /* ⏱️ 400 ms Schütteln */
}