/* Tool-Card: Hintergrund bei Hover dunkler */
.tool-card.tool-blue:hover {
  background: linear-gradient(120deg, #14263a 80%, #19222c 100%);
}
.tool-card.tool-green:hover {
  background: linear-gradient(120deg, #16301a 80%, #1a3a20 100%);
}
.tool-card.tool-purple:hover {
  background: linear-gradient(120deg, #2a1847 80%, #4b2566 100%);
}
.tool-card.tool-red:hover {
  background: linear-gradient(120deg, #2e1515 80%, #922b21 100%);
}
.tool-card.tool-yellow:hover {
  background: linear-gradient(120deg, #665c1d 80%, #bfae2a 100%);
}
/* Tool-Card: Weißer Rahmen bei Hover */
/* Dezente Tool-Card-Farben */
.tool-card.tool-blue {
  background: linear-gradient(120deg, #18304a 80%, #1e2e3e 100%);
  border-color: #38b0f3;
}
.tool-card.tool-green {
  background: linear-gradient(120deg, #1d3a22 80%, #24512b 100%);
  border-color: #6aaf66;
}
.tool-card.tool-purple {
  background: linear-gradient(120deg, #3d2466 80%, #6c3483 100%);
  border-color: #a569bd;
}
.tool-card.tool-red {
  background: linear-gradient(120deg, #4a2323 80%, #c0392b 100%);
  border-color: #e74c3c;
}
.tool-card.tool-yellow {
  background: linear-gradient(120deg, #665c1a 80%, #f9e79f 100%);
  border-color: #f4d03f;
}
/* === KIDOS TOOLS CSS === */
/* Grundlegende Styles für die Kidos Tools App */

/* CSS-Variablen aus kidos2025 übernommen */
:root {
  --bg-dark-1: #000000;
  --bg-dark-2: #1e1e1e;
  --bg-dark-3: #2d2d2d;
  --bg-light-1: #595959;
  --bg-light-2: #797979;
  --bg-light-3: #8e8e8f;
  --bg-light-4: #cccccc;
  --text-light-1: #E5E2D8;
  --text-light-2: #CAC3AE;
  --text-light-3: #ADA493;
  --text-dark-1: #1e1e1e;
  --accent-1: #187bb7;
  --accent-2: #38b0f3;
  --accent-3: #89d185;
  --accent-4: #6aaf66;
  --active-1: #e04c0f;

  /* Tool-Farbkonzepte */
  /* Blau */
  --tool-blue-1: #187bb7; /* Titel, Buttons */
  --tool-blue-2: #38b0f3; /* Headlines, Hover */
  --tool-blue-3: #eaf6fd; /* Kategorie-Hintergrund */
  --tool-blue-4: #b3e0fc; /* Unterkategorie-Hintergrund */
  /* Rot */
  --tool-red-1: #c0392b;
  --tool-red-2: #e74c3c;
  --tool-red-3: #fdecea;
  --tool-red-4: #fab1a0;
  /* Grün */
  --tool-green-1: #218c3a;
  --tool-green-2: #6aaf66;
  --tool-green-3: #eafaf1;
  --tool-green-4: #b6e2c6;
  /* Gelb */
  --tool-yellow-1: #b7950b; /* Titel, Buttons */
  --tool-yellow-2: #f7ca18; /* Headlines, Hover */
  --tool-yellow-3: #fff9e3; /* Kategorie-Hintergrund */
  --tool-yellow-4: #f9e79f; /* Unterkategorie-Hintergrund */
  /* Orange */
  --tool-orange-1: #e67e22;
  --tool-orange-2: #f39c12;
  --tool-orange-3: #fff6e5;
  --tool-orange-4: #ffe0b2;
  /* Lila */
  --tool-purple-1: #6c3483;
  --tool-purple-2: #a569bd;
  --tool-purple-3: #f5e6fa;
  --tool-purple-4: #d2b4de;
}

/* Grundlegende Styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  color: var(--text-light-1);
  background: var(--bg-dark-1);
  height: 100vh;
  overflow: hidden; /* Verhindert Scrolling auf body */
}

/* Layout Container */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Header */
.header {
  background: var(--bg-dark-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 50px; /* Reduzierte Höhe */
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}

.logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--accent-2);
}

.subtitle {
  color: var(--text-light-2);
  font-size: 0.9rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: var(--accent-1);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent-2);
}

/* Main Content */
.main-content {
  position: fixed;
  top: 50px; /* Höhe des Headers */
  bottom: 40px; /* Höhe des Footers */
  left: 0;
  right: 0;
  padding: 2rem;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Content-Wrapper für zentrierte Inhalte */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.page-title {
  font-size: 2.5rem;
  color: var(--tool-title);
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Tool-Überschriften */
.form-title, .assessment-section > h2, .export-section > h2 {
  color: var(--tool-headline);
}

/* Tool-Kategorien */
.assessment-table .kategorie-title, .tool-kategorie-title {
  color: var(--tool-kategorie);
  font-weight: bold;
}

/* Tool-Unterkategorien */
.assessment-table .unterkategorie-title, .tool-unterkategorie-title {
  color: var(--tool-unterkategorie);
  font-weight: bold;
}

.page-description {
  color: var(--text-light-2);
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.1rem;
}

/* Tool Cards Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.tool-card {
  background: var(--bg-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}


.tool-icon {
  font-size: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  color: var(--accent-2);
  text-align: center;
}

.tool-title {
  font-size: 1.3rem;
  color: var(--text-light-1);
  margin-bottom: 0.5rem;
  text-align: center;
}

.tool-description {
  color: var(--text-light-2);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  text-align: justify;
}

.tool-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: auto;
}

.status-ready {
  background: var(--accent-3);
  color: var(--bg-dark-1);
}

.status-dev {
  background: linear-gradient(90deg, #e0c97a 60%, #cfc7a0 100%);
  color: #6a5a2a;
  font-weight: 500;
  box-shadow: none;
}

.status-planned {
  background: var(--bg-light-2);
  color: var(--text-light-1);
}

/* Footer */
.footer {
  background: var(--bg-dark-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 2rem;
  text-align: center;
  color: var(--text-light-3);
  font-size: 0.9rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 40px; /* Reduzierte Footer-Höhe */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer a {
  color: var(--accent-2);
  text-decoration: none;
}

.footer a:hover {
  opacity: 0.8;
}

/* === LOGIN MODAL === */
.login-modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.login-modal-box {
  background: var(--bg-dark-1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  position: relative;
}

.login-modal-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.modal-logo-image {
  height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.login-modal-title {
  color: var(--accent-2);
  text-align: center;
  margin-bottom: 0.5rem;
}

.login-modal-text {
  color: var(--text-light-2);
  text-align: center;
  margin-bottom: 1.5rem;
}

#pw-input {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  background: var(--bg-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--text-light-1);
  font-size: 1rem;
  box-sizing: border-box;
}

#pw-input:focus {
  outline: none;
  border-color: var(--accent-2);
}

.login-error {
  color: #ff6b6b;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  text-align: center;
}

.login-submit-btn {
  width: 100%;
  padding: 0.8rem;
  background: var(--accent-2);
  color: var(--bg-dark-1);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.login-submit-btn:hover {
  background: var(--accent-1);
}

.login-modal-footer {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-modal-link {
  color: var(--accent-2);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.login-modal-link:hover {
  color: var(--accent-1);
  text-decoration: underline;
}