/* Grundlegende Stile */
body {
    padding-top: 56px; /* Platz für die fixierte Navbar */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    background-color: #f4f4f4;
    line-height: 1.6;
}

/* Dropdown Basiszustand */
.navbar-nav .dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-top: 0;
    border: none;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Bei Hover auf großen Bildschirmen */
@media (min-width: 992px) {
    .navbar-nav .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Wenn Bootstrap die Klasse .show setzt (z. B. auf mobilen Geräten beim Klick) */
.dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Dropdown-Item-Stile */
.dropdown-item {
    color: #333;
    padding: 0.75rem 1.5rem;
}

.dropdown-item:hover {
    background: #e9ecef;
    color: #000;
}

/* Sicherstellen, dass die Navbar über dem Inhalt liegt */
.navbar {
    z-index: 1000;
}


/* Hero-Bereich */
.hero-section {
    background: url('../images/backround.jpg') no-repeat center center/cover;
    margin-bottom: 0;
    color: #ffffff;
    position: relative;
}

.hero-section h1 {
    font-size: 4rem;
    font-weight: bold;
    /* Text-Umrandung und Schatten */
    text-shadow:
        
        2px 2px 5px rgba(0.5, 0.5, 0.5, 0.5); /* eigentlicher Schatten */
}

.hero-section p {
    font-size: 3rem;
    /* Text-Umrandung und Schatten */
    text-shadow:
        
        2px 2px 5px rgba(0.5, 0.5, 0.5, 0.5); /* eigentlicher Schatten */
}

/* Abschnittstitel */
h2, h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Textzentrierung für bestimmte Abschnitte */
.text-center {
    text-align: center;
}

/* --- Spezifische Stile für Focus-Cards --- */

.focus-section {
    background-color: #f9f9f9; /* Hintergrundfarbe für den Abschnitt */
    padding-bottom: 3rem; /* Zusätzlicher Platz unter den Karten */
}

.focus-section h2 {
    color: #333; /* Farbe für den Abschnittstitel */
    margin-bottom: 2rem; /* Abstand unter dem Titel */
}

.card-link {
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
    color: inherit; /* Link erbt die Textfarbe vom Elternelement */
    display: block; /* Sorgt dafür, dass der Link die gesamte Karte umschliesst */
    height: 100%; /* Stellt sicher, dass der Link die volle Höhe der Karte einnimmt */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Übergang für Hover-Effekt */
}

.card-link:hover {
    transform: translateY(-5px); /* Karte bewegt sich leicht nach oben beim Hover */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Grösserer Schatten beim Hover */
}

.focus-card {
    border: none; /* Entfernt den Standard-Bootstrap-Border */
    border-radius: 8px; /* Abgerundete Ecken */
    overflow: hidden; /* Stellt sicher, dass abgerundete Ecken auch beim Bild funktionieren */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Leichter Schatten */
    background-color: #fff; /* Weisser Hintergrund für die Karte */
    display: flex; /* Flexbox, um Inhalt vertikal auszurichten */
    flex-direction: column;
}

.focus-image {
    width: 100%; /* Bild nimmt die volle Breite der Karte ein */
    height: 200px; /* Feste Höhe für die Bilder (kann angepasst werden) */
    object-fit: cover; /* Bild wird skaliert, um den Bereich zu füllen, ohne verzerrt zu werden */
}

.focus-text {
    padding: 1.5rem; /* Innenabstand im Textbereich */
    flex-grow: 1; /* Nimmt verfügbaren vertikalen Platz ein */
}

.focus-text h3 {
    color: #000; /* Farbe für den Kartentitel (Bootstrap Primary Color) */
    margin-top: 0; /* Keinen oberen Rand für den Titel */
    margin-bottom: 0.5rem; /* Abstand unter dem Titel */
    font-size: 1.3rem; /* Schriftgrösse für den Titel */
}

.focus-text p {
    color: #555; /* Farbe für den Kartentext */
    font-size: 1rem; /* Schriftgrösse für den Kartentext */
}

/* Optional: Anpassungen für kleinere Bildschirme, falls nötig */
@media (max-width: 767.98px) {
    .focus-image {
        height: 180px; /* Etwas geringere Höhe auf kleineren Bildschirmen */
    }
}

/* Fußbereich */
footer {
    background: #343a40; /* Entspricht Bootstrap's bg-dark */
    color: #ffffff;
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

.form-control {
    border-radius: 0;
}

.btn-primary {
    background-color: #e8491d;
    border-color: #e8491d;
}

.btn-primary:hover {
    background-color: #cf3c14;
    border-color: #cf3c14;
}

/* Responsives Design (falls zusätzliche Anpassungen nötig sind) */
/* Beispiel: Anpassung der Schriftgröße auf kleineren Bildschirmen */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section p {
        font-size: 1.2rem;
    }
}

.timeline-container {
    width: 100%;
    padding: 50px 0;
    position: relative;
}

.timeline {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    border-top: 2px solid #333;
    padding-top: 40px;
}

/* Jahr-Markierungen über den Punkten */
.timeline-point {
    position: relative;
    text-align: center;
}

.year-label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 8px;
}

.timeline-point::before {
    content: "";
    position: absolute;
    top: -20px;
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.timeline-point:hover::before {
    background-color: red;
}

/* Hover-Box für kurze Infos */
#hover-display {
    position: absolute;
    top: -80px;
    width: 100%;
    text-align: center;
    display: none;
}

.hover-box {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hover-box img {
    width: 50px;
    height: auto;
    margin-top: 5px;
}

/* Info-Box für detaillierte Informationen */
#info-box {
    display: none;
    background-color: #fff;
    padding: 20px;
    margin-top: 20px;
    border-top: 2px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#info-box h3 {
    margin-top: 0;
    font-size: 1.5em;
}

#info-box img {
    width: 100px;
    height: auto;
    margin-top: 10px;
}

/* Zusammenfassungsbereich */
.summary-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.summary-container h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: #333;
}

.summary-container p {
    line-height: 1.6;
    color: #555;
    margin-bottom: 1em;
}

.action-steps {
    margin-top: 20px;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-link {
    display: block;
    padding: 10px 15px;
    background-color: #e8f4fa;
    color: #007BFF;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.step-link:hover {
    background-color: #cce7f2;
    color: #0056b3;
}

.page-navigation {
    background-color: #f4f4f4;
    border-top: 1px solid #ddd;
    padding: 20px 0;
    margin-top: 20px;
}

.page-navigation .btn {
    margin: 0 10px;
}

/* Abschnitt für rechtliche Texte und strukturierte Listen */
.content-section h4 {
    margin-top: 20px;
    font-size: 1.25em;
    color: #333;
}

.content-section ul {
    list-style-type: none;
    padding-left: 0;
}

.content-section ul li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.content-section ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #007BFF;
    font-weight: bold;
}

/* Fußnoten und Zusatzinformationen */
.content-section p sup {
    font-size: 0.8em;
    color: #555;
}

.page-navigation .btn {
    margin: 0 10px;
}

/* Styles aus Ihrem CSS, die für die Vergleichstabelle
 in Strafverfahren.html relevant sind */
.highlight {
    background-color: #ffffcc !important; /* Helle gelbe Hintergrundfarbe */
    /* Oder */
    border: 1px solid #ffcc00; /* Gelber Rahmen */
    /* Oder beides */
}

.comparison-section {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.comparison-section h2 {
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #333;
}

.comparison-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.comparison-header {
    display: flex;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.comparison-header div {
    flex: 1;
    padding: 10px;
}

.comparison-row {
    display: flex;
    border-top: 1px solid #ddd;
}

.comparison-row div {
    flex: 1;
    padding: 15px;
    background-color: #fff;
}

.comparison-row:nth-child(even) div {
    background-color: #f5f5f5;
}

.comparison-row ul,
.comparison-row ol { /* Auch ol hinzufügen, falls nummerierte Listen verwendet werden */
    padding-left: 20px;
    margin: 0;
}

.comparison-row li {
    margin-bottom: 8px;
}

.comparison-row ul li::before { /* Bullet points für Listen in comparison-row */
     content: "";
     position: absolute; /* Muss in Kombination mit relative beim li/ul Eltern funktionieren */
     left: 5px; /* Abstand vom linken Rand der Zelle */
     color: #007BFF; /* Beispiel Farbe */
     font-weight: bold;
}

/* Anpassung für Listen in comparison-row, falls nötig */
.comparison-row ul {
    list-style: none; /* Standard-Bullets entfernen, wenn ::before verwendet wird */
}

.comparison-row ul li {
     position: relative; /* Notwendig für die Positionierung von ::before */
     padding-left: 15px; /* Platz für das benutzerdefinierte Zeichen */
}

/* Spezifische Stile für die Berichte-Übersicht */
.report-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.report-card img {
    height: 180px;
    object-fit: cover;
}

.bericht-inhalt p {
    line-height: 1.8;
    margin-bottom: 1.5em;
}

.bericht-inhalt h2 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.5em;
}

/* Karten für Berichte einheitlich gestalten */
.row.d-flex.align-items-stretch > [class*='col-'] {
    display: flex;
}

/* Die Report-Card soll ihre Höhe vollständig ausnutzen */
.report-card {
    display: flex;
    flex-direction: column;
}

/* Bild festlegen für Einheitlichkeit */
.report-card img {
    height: 180px;
    object-fit: cover;
}

/* Card-Body sorgt dafür, dass Text und Button unten ausgerichtet werden können */
.report-card .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Der Button am unteren Ende der Card */
.report-card .btn {
    margin-top: auto;
}

/* Optional: Styling für die Carousel Slides */
.carousel-item {
    padding: 5px;
}

/* Flexbox für den Elterncontainer */
.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Optional: Zentriert alle Kinder horizontal */
}

.gelesen-btn {
    margin-top: 20px;       /* Abstand nach oben */
    align-self: center;     /* Zentriert den Button horizontal innerhalb des Flex-Containers */
    display: block;         /* Stellt sicher, dass der Button als Block-Element angezeigt wird */
}

.signature { 
    margin-top: 3rem; 
}

/* Sprachversionen */
.language-switcher-inline {
    text-align: center; /* Zentriert den gesamten Block (Text und Flaggen) */
    margin-top: 20px; /* Abstand nach oben (zum Bild) */
    margin-bottom: 40px; /* Abstand nach unten (zum Titel) */
    padding: auto; /* Innenabstand im Block */
    background-color: #e9e9e9; /* Heller Hintergrund, um den Block hervorzuheben */
    border: 1px solid #ccc; /* Leichter Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    display: auto; /* Lässt den Container nur so breit sein wie nötig */
    /* Optional: Box-Shadow für einen "erhabenen" Look */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.language-switcher-inline .language-label {
    margin-right: 15px; /* Abstand zwischen Text und erster Flagge */
    font-weight: bold; /* Macht den Text "Verfügbar in:" fett */
    color: #555; /* Etwas dunklere Farbe für den Text */
    vertical-align: middle; /* Stellt sicher, dass Text und Flaggen auf einer Linie sind */
}

.language-switcher-inline a {
    text-decoration: none; /* Entfernt die Unterstreichung bei Links */
    margin: auto 20px; /* Kleiner horizontaler Abstand zwischen den Flaggen */
    padding: 10px 5px; /* Fügt Padding rundherum hinzu, um die anklickbare Fläche zu vergrössern */
    display: auto; /* Stellt sicher, dass die Links nebeneinander bleiben und Margin/Padding funktionieren */
    vertical-align: middle; /* Stellt sicher, dass die Flaggen auf einer Linie mit dem Text sind */
    transition: background-color 0.2s ease;
}

/* Optional: Hover-Effekt für besseres Feedback */
.language-switcher-inline a:hover {
    background-color: rgba(0, 0, 0, 0.07); /* Heller Hintergrund beim Hover */
    border-radius: 5px; /* Abgerundete Ecken für den Hover-Effekt */
}

/* Styling für Flaggen-Emojis */
.language-switcher-inline a {
     font-size: 1.8em; /* Passt die Grösse der Emojis an (passt gut zu 20px Bildbreite) */
     line-height: 1; /* Hilft bei der vertikalen Ausrichtung */
}


/* Styling für Flaggen-Bilder (wenn Sie statt Emojis verwenden) */
.language-switcher-inline a img {
    width: 20px; /* Breite der Flaggenbilder */
    height: auto; /* Höhe automatisch anpassen */
    vertical-align: middle; /* Stellt sicher, dass die Bilder auf einer Linie sind */
}

/* Stil für die aktuell ausgewählte Sprache */
.language-switcher-inline a.active-language {
    opacity: 0.6;
    cursor: default;
    background-color: transparent; /* Wichtig: Kein Hover-Effekt auf der aktiven Sprache */
    border: 1px solid #000; /* Rahmen, um die aktive Sprache hervorzuheben */
    border-radius: 3px;
    /* Padding für aktive Sprache anpassen, damit die Grösse mit Rahmen konsistent bleibt */
    padding: 9px 11px; /* 10px Padding - 1px Rahmen = 9px; 12px Padding - 1px Rahmen = 11px */
}

/* Optional: Media Query für ggf. andere Abstände auf Handys */
@media (max-width: 767.98px) {
    .language-switcher-inline a {
        margin: 0 10px; /* Horizontalen Abstand auf Handys etwas reduzieren, falls nötig */
        padding: 12px 8px; /* Vertikales Padding hoch, horizontales anpassen */
    }
     /* Bei aktivierter Flagge in dieser Media Query ebenfalls das Padding anpassen */
     .language-switcher-inline a.active-language {
        padding: 11px 7px; /* 12px Padding - 1px Rahmen = 11px; 8px Padding - 1px Rahmen = 7px */
     }
}

/* --- Alternative Stile für Partner-Cards (CSS Grid) --- */

.partner-section {
    background-color: #e9ecef; /* Hellerer Hintergrund zur Abgrenzung */
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 3rem; /* Abstand zum vorherigen Inhalt */
}

.partner-section h2 {
    color: #333;
    margin-bottom: 2rem;
}

.partner-card-link {
   text-decoration: none; /* Entfernt Link-Unterstreichung */
   color: inherit; /* Erbt Textfarbe */
   display: block; /* Link umschliesst die gesamte Karte */
   transition: transform 0.2s ease, box-shadow 0.2s ease; /* Hover-Effekt */
}

.partner-card-link:hover {
   transform: translateY(-5px); /* Karte bewegt sich leicht nach oben */
   box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Grösserer Schatten */
}

.partner-card {
   display: grid; /* Aktiviert CSS Grid für diesen Container */
   /* Definiert die Spalten für das Grid:
      - Die erste Spalte ist 120px breit (für das Logo)
      - Die zweite Spalte nimmt den Rest des verfügbaren Platzes ein (1fr)
   */
   grid-template-columns: 120px 1fr;
   gap: 20px; /* Abstand zwischen den Grid-Zellen (Logo und Text) */
   align-items: center; /* Zentriert die Inhalte der Grid-Zellen (Logo und Text) vertikal */

   border: 1px solid #ddd; /* Leichter Rand für die Karte */
   border-radius: 8px; /* Abgerundete Ecken */
   overflow: hidden; /* Stellt sicher, dass nichts über die Ecken hinausragt */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Leichter Schatten */
   background-color: #fff; /* Weisser Hintergrund */
   width: 100%; /* Stellt sicher, dass die Karte die volle Breite der übergeordneten Spalte nutzt */
   padding: 15px; /* Innenabstand für die gesamte Karte */
   /* Optional: Eine Mindesthöhe kann nützlich sein */
   min-height: 120px;
}

/* Im Grid-Layout werden die Kindelemente direkt in den Spalten platziert.
  Sie brauchen keine flex- oder grid-spezifischen Eigenschaften mehr,
  ausser um ihren Inhalt zu layouten (z.B. Flexbox im logo-area zum Zentrieren). */

.partner-logo-area {
   /* Dieser Bereich ist jetzt die erste Zelle im Grid. */
   display: flex; /* Verwenden wir Flexbox, um das Logo innerhalb dieser Zelle zu zentrieren */
   justify-content: center; /* Horizontal zentrieren */
   align-items: center; /* Vertikal zentrieren */
   /* Keine Breiten/flex-Eigenschaften hier, da die Grid-Spalte die Grösse steuert */
   /* Optional: background-color: #f8f9fa; /* Hintergrundfarbe im Logo-Bereich */
   /* Optional: border-right: 1px solid #eee; /* Trennlinie zum Textbereich */
}

.partner-logo {
   display: block; /* Entfernt zusätzlichen Weissraum unter dem Bild */
   max-width: 100%; /* Bild passt sich der Breite der Grid-Zelle an */
   max-height: 100%; /* Bild passt sich der Höhe der Grid-Zelle an */
   object-fit: contain; /* Stellt sicher, dass das gesamte Logo sichtbar und proportional skaliert ist */
}
/*
.partner-text-area {}
   /* Dieser Bereich ist jetzt die zweite Zelle im Grid */
   /* Keine flex/grid Eigenschaften hier nötig */
   /* Das Padding kommt von der .card-body Klasse innerhalb dieses Divs */

/* Anpassung des Bootstrap card-body Paddings, da wir Padding auf die Karte selbst gelegt haben */
.partner-card .card-body {
   padding: 0; /* Standard Bootstrap card-body Padding entfernen, da es jetzt auf .partner-card liegt */
}

.partner-text-area .card-title {
   color: #0e0f0f; /* Bootstrap Primary Farbe für Titel */
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-size: 1.2rem; /* Schriftgrösse für den Titel */
}

.partner-text-area .card-text {
   color: #555; /* Farbe für den Text */
   font-size: 0.95rem; /* Schriftgrösse für den Text */
   margin-bottom: 0; /* Keinen unteren Rand, falls es der letzte Absatz ist */
}

/* Optionale Anpassungen der Spaltenbreite für sehr kleine Bildschirme */
@media (max-width: 575.98px) { /* Extra small devices (unter 576px) */
   .partner-card {
        /* Auf sehr kleinen Bildschirmen die feste Breite der Logo-Spalte anpassen */
        grid-template-columns: 80px 1fr; /* Logo-Spalte etwas schmaler */
        gap: 10px; /* Weniger Abstand zwischen den Spalten */
        padding: 10px; /* Weniger Innenabstand für die Karte */
   }
    .partner-text-area .card-title {
        font-size: 1.1rem; /* Schriftgrösse etwas reduzieren */
    }
    .partner-text-area .card-text {
        font-size: 0.9rem; /* Schriftgrösse etwas reduzieren */
    }
}