/* --- GLOBALE STRUKTUR (Serifenlos & Barrierefrei) --- */
.forensic-header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: #FFFFFF; /* Weißraum */
  border-bottom: 1px solid #E2E8F0;
  position: relative;
  z-index: 100;
}

.nav-logo strong {
  display: block;
  color: #2C3E50; /* Anthrazit */
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.nav-logo .sub-logo {
  font-size: 0.85rem;
  color: #718096; /* Mittelgrau */
}

/* Verstecke die technische Checkbox */
.menu-toggle-checkbox {
  display: none;
}

/* --- HOVER-EFFEKTE FÜR LINKS (Sehr gute Kontraste) --- */
.submenu a {
  color: #2C3E50;
  text-decoration: none;
  font-size: 0.95rem;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

/* Animierte Linie von links nach rechts bei Hover */
.submenu a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0D282D; /* Blaugrün */
  transition: width 0.3s ease;
}

.submenu a:hover::after {
  width: 100%;
}

.submenu a:hover {
  color: #0D282D;
}

/* --- MOBIL-STYLING (Hamburger & Dunkelraum-Overlay) --- */
@media (max-width: 767px) {
  /* Das Hamburger-Icon */
  .menu-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
  }
  
  .hamburger-line {
    width: 100%;
    height: 2px;
    background-color: #2C3E50;
    transition: all 0.3s ease;
  }

  /* Das Menü als vollflächiger Dunkelraum im Hintergrund */
  .nav-menu-wrapper {
    position: fixed;
    top: 60px; /* Unterhalb des Headers */
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background-color: #0D282D; /* Blaugrün / Petrol */
    padding: 2rem 1.5rem;
    display: none; /* Standardmäßig unsichtbar */
    overflow-y: auto;
  }

  .category-title {
    display: block;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.2rem;
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .submenu {
    list-style: none;
    padding: 0.5rem 0 0 1rem;
  }

  .submenu li {
    margin: 0.75rem 0;
  }

  .submenu a {
    color: #F4F6F7; /* Sehr helles Grau für perfekten Kontrast im Dunkelraum */
    font-size: 1.05rem;
  }
  
  /* Der CSS-Trick: Wenn Checkbox aktiv, zeige das Menü */
  .menu-toggle-checkbox:checked ~ .nav-menu-wrapper {
    display: block;
  }

  /* Hamburger-Animation zum "X" bei Aktivierung */
  .menu-toggle-checkbox:checked ~ .menu-toggle-label .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background-color: #0D282D;
  }
  .menu-toggle-checkbox:checked ~ .menu-toggle-label .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle-checkbox:checked ~ .menu-toggle-label .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background-color: #0D282D;
  }
}

/* --- DESKTOP-STYLING (Responsive Verwandlung) --- */
@media (min-width: 768px) {
  .menu-toggle-label {
    display: none; /* Verstecke Hamburger auf Desktop */
  }

  .nav-menu-wrapper {
    display: block; /* Immer sichtbar */
  }

  .nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
  }

  .menu-item {
    position: relative;
    padding: 0.5rem 0;
  }

  .category-title {
    color: #2C3E50;
    font-weight: 600;
    cursor: default;
  }

  /* Klassischer, sicherer CSS-Hover-Drop-Down auf Desktop */
  .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #F4F6F7; /* Hellgraue Box */
    border: 1px solid #E2E8F0;
    padding: 1rem;
    min-width: 220px;
    list-style: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-radius: 4px;
  }

  .submenu li {
    margin: 0.5rem 0;
  }

  /* Zeige Untermenü, wenn Maus über die Kategorie fährt */
  .menu-item:hover .submenu {
    display: block;
  }
}

/* --- HERO-SECTION (Dunkelraum in Blaugrün) --- */
.forensic-hero {
  background-color: #0D282D; /* Tiefes Blaugrün / Petrol */
  color: #FFFFFF;
  padding: 3.5rem 1.5rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  align-items: center;
  position: relative;
}

.hero-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-content {
  max-width: 720px; /* Begrenzte Breite für optimale Lesbarkeit auf großen Bildschirmen */
}

/* Institutioneller Hinweis oberhalb der Headline */
.hero-badge {
  display: inline-block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #A3BFFA; /* Helles, kontrastreiches Blau */
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Haupt-Headline (Serifenlos, kräftig) */
.hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 1.2rem 0;
  color: #FFFFFF;
}

/* Einleitungstext / Lead */
.hero-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #E2E8F0; /* Sehr helles Grau für augenschonenden, hohen Kontrast */
  margin-bottom: 2rem;
}

/* Praxis-Metadaten (Standorte) */
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  padding-left: 1rem;
  border-left: 3px solid #14B8A6; /* Akzentuierte Linie in hellerem Blaugrün */
}

.meta-item {
  font-size: 1rem;
  color: #F4F6F7;
}

.meta-item strong {
  color: #FFFFFF;
}

/* --- BUTTONS & HOVER-EFFEKTE (Kein JavaScript) --- */
.hero-actions {
  display: flex;
  flex-direction: column; /* Mobil untereinander gestapelt */
  gap: 1rem;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.25s ease;
  text-align: center;
}

/* Haupt-Button (Weißer Hintergrund, maximaler Kontrast zum Dunkelraum) */
.btn-primary {
  background-color: #FFFFFF;
  color: #0D282D;
  border: 2px solid #FFFFFF;
}

.btn-primary:hover {
  background-color: #E2E8F0; /* Leichtes Abdunkeln bei Maus-Hover */
  border-color: #E2E8F0;
  transform: translateY(-1px); /* Subtiler Bewegungseffekt */
}

/* Sekundärer Button (Transparent mit hellem Rahmen) */
.btn-secondary {
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid #E2E8F0;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08); /* Sanfter Aufhelleffekt */
  border-color: #FFFFFF;
  transform: translateY(-1px);
}

/* --- RESPONSIVE OPTIMIERUNGEN (Tablet & Desktop) --- */
@media (min-width: 768px) {
  .forensic-hero {
    padding: 6rem 3rem; /* Mehr Raumwirkung auf großen Bildschirmen */
  }

  .hero-title {
    font-size: 3.2rem; /* Größere Schrift auf Desktop */
  }

  .hero-lead {
    font-size: 1.25rem;
  }

  .hero-meta {
    flex-direction: row; /* Nebeneinander auf Desktop */
    gap: 3rem;
  }

  .hero-actions {
    flex-direction: row; /* Nebeneinander auf Desktop */
  }
}

/* --- REINER WEISSRAUM FÜR DEN HAUPTBEREICH --- */
.forensic-main {
  background-color: #FFFFFF; /* Reiner Weißraum */
  padding: 3rem 1.5rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.bento-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* Mobil: Alles sauber untereinander gestapelt */
  gap: 1.5rem;
}

/* --- BASIS-STYLING FÜR DIE KACHELN --- */
.bento-card {
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
}

/* Grauabstufungen */
.bg-light-gray {
  background-color: #F4F6F7; /* Sehr helles Grau */
}

.bg-medium-gray {
  background-color: #EDF2F7; /* Mittleres, kontraststarkes Grau */
}

/* Kachel-Badges für die Struktur */
.card-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #718096;
  font-weight: 700;
  margin-bottom: 0.75rem;
  display: block;
}

.bento-card h2, .bento-card h3 {
  color: #2C3E50; /* Anthrazit */
  margin-top: 0;
  font-weight: 700;
}

.bento-card h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.bento-card h3 { font-size: 1.3rem; margin-bottom: 0.75rem; }

.bento-card p {
  color: #4A5568;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

/* Listen-Strukturierungen */
.paragraph-list, .method-list, .step-list {
  padding-left: 1.25rem;
  margin: 0;
  color: #4A5568;
  font-size: 0.95rem;
  line-height: 1.6;
}

.paragraph-list li, .method-list li, .step-list li {
  margin-bottom: 0.5rem;
}

/* --- INTERAKTION / LINKS MIT HOVEREFFEKT --- */
.card-link {
  color: #0D282D; /* Blaugrün */
  text-decoration: none;
  font-weight: 600;
  margin-top: auto; /* Schiebt den Link immer nach unten */
  display: inline-block;
  position: relative;
  align-self: flex-start;
}

.card-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #0D282D;
  transition: width 0.3s ease;
}

.card-link:hover::after {
  width: 100%;
}

/* --- PANIC BUTTON KACHEL (Sicherheits-Feature) --- */
.card-panic {
  background-color: #FFF5F5; /* Sehr zartes Signal-Rot für Aufmerksamkeit */
  border-color: #FEB2B2;
}

.card-panic h3 { color: #9B2C2C; }

.btn-panic {
  background-color: #C53030; /* Intensiver Kontrast-Rotton */
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  padding: 0.75rem;
  border-radius: 4px;
  font-weight: 700;
  display: block;
  transition: background-color 0.2s ease;
}

.btn-panic:hover {
  background-color: #9B2C2C;
}

.panic-note {
  font-size: 0.8rem !important;
  color: #742A2A !important;
  margin-top: 0.75rem;
  margin-bottom: 0 !important;
}

/* --- RESPONSIVE RASTER-STRUKTUR (Desktop-Transformation ab 992px) --- */
@media (min-width: 992px) {
  .forensic-main {
    padding: 5rem 2rem;
  }

  .bento-container {
    display: grid;
    /* Erzeugt ein exaktes 3-spaltiges Raster */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  /* Kachel-Positionierungen im Raster */
  .card-large {
    grid-column: span 2; /* Nimmt 2 Spalten ein */
  }

  .card-medium {
    grid-column: span 1; /* Nimmt 1 Spalte ein */
  }

  .card-small {
    grid-column: span 1;
  }
}

/* --- FOOTER-BEREICH (Dunkelraum in Blaugrün) --- */
.forensic-footer {
  background-color: #0D282D; /* Tiefes Blaugrün / Petrol */
  color: #FFFFFF;
  padding: 4rem 1.5rem 2rem 1.5rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  border-top: 3px solid #14B8A6; /* Feine Akzentlinie zur Trennung vom Weißraum */
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* Mobil: Spalten untereinander */
  gap: 3rem;
}

.footer-column {
  flex: 1;
}

/* Überschriften im Footer */
.footer-title {
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-text {
  color: #E2E8F0; /* Helles Grau für erstklassigen Kontrast */
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

/* Krisenhilfe-Box */
.footer-crisis {
  background-color: rgba(255, 255, 255, 0.04); /* Ganz dezente Aufhellung */
  padding: 1.5rem;
  border-radius: 6px;
  border-left: 4px solid #FEB2B2; /* Rötlicher Sicherheits-Akzent */
}

.crisis-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: #E2E8F0;
  line-height: 1.6;
}

.crisis-list li {
  margin-bottom: 0.75rem;
}

.crisis-list a {
  color: #FFF;
  text-decoration: underline;
  font-weight: 600;
}

/* --- RECHTLICHE LINKS MIT HOVER-EFFEKT (Kein JS) --- */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: #A3BFFA; /* Helles Blau für hervorragende Lesbarkeit */
  text-decoration: none;
  font-size: 0.9rem;
  position: relative;
  transition: color 0.2s ease;
  display: inline-block;
}

/* Hover-Effekt: Unterstreichung baut sich von links nach rechts auf */
.footer-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #FFFFFF;
  transition: width 0.3s ease;
}

.footer-links a:hover::after {
  width: 100%;
}

.footer-links a:hover {
  color: #FFFFFF;
}

/* Urheberrecht & Stand */
.footer-copyright {
  font-size: 0.8rem;
  color: #718096; /* Dunkleres Grau, da untergeordnet */
  line-height: 1.5;
  margin: 0;
}

/* --- RESPONSIVE ANPASSUNG (Desktop-Ansicht ab 768px) --- */
@media (min-width: 768px) {
  .footer-container {
    flex-direction: row; /* Spalten nebeneinander auf Desktop */
    justify-content: space-between;
    gap: 2rem;
  }
}

.forensic-contact {
  padding: 4rem 1.5rem;
  font-family: 'Inter', -apple-system, sans-serif;
}

.contact-container {
  max-width: 680px;
  margin: 0 auto;
  background-color: #FFFFFF; /* Weißraum-Kachel */
  padding: 2.5rem;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
}

/* Warn-Box für den Klienten-Schutz */
.contact-warning {
  background-color: #FFF5F5;
  border-left: 4px solid #C53030;
  padding: 1rem;
  border-radius: 4px;
  color: #9B2C2C;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* Formular-Styling (Hohe Kontraste, serifenlos) */
.pure-css-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: #2C3E50; /* Anthrazit */
  font-weight: 600;
  font-size: 0.95rem;
}

.form-group input, .form-group textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75rem;
  border: 1px solid #CBD5E0;
  border-radius: 4px;
  background-color: #F4F6F7;
  color: #2C3E50;
  transition: border-color 0.2s ease;
}

/* Fokus-Zustand für Barrierefreiheit */
.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: #0D282D; /* Wechselt zum Praxis-Blaugrün */
  background-color: #FFFFFF;
}

/* Checkbox-Bereich */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.form-checkbox input {
  margin-top: 0.25rem;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.form-checkbox label {
  font-size: 0.85rem;
  color: #4A5568;
  line-height: 1.4;
  cursor: pointer;
}

/* Absende-Button im Praxis-Stil */
.btn-submit {
  font-family: inherit;
  background-color: #0D282D; /* Blaugrün */
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-submit:hover {
  background-color: #1A444B; /* Leichtes Aufhellen bei Hover */
}