/*
CSS brandschutz-service.berlin
Gross 2025
*/
.startseite .zertifizierung img {
	margin-left: 250px;
}
@media all and (max-width: 767px) {
.startseite .zertifizierung img {
	margin-left: 0px;
}
	
}
/*Pfeil vor H3*/
.startseite .einstiege .text_container h3 {
  position: relative;
  padding-left: 1em; /* Platz für Pfeil */
 line-height: 1.5em;
}

.startseite .einstiege .text_container h3::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #666;       /* zartes Grau */
  font-weight: normal;
  font-size: 1em;
}
.startseite .referenzen .text_container h3::before {
  content: "";
}
.startseite .referenzen .text_container h3 {
	padding-left: 0;
	font-weight: bold;
}


/* Styling für die Links innerhalb deiner H3-Tags */
.startseite .einstiege h3 a {
  
  text-decoration: none; /* KEINE Unterstreichung im Normalzustand */
  /* weitere Stile wie transition, padding etc. */
}

/* Hover-Effekt für die Links innerhalb der H3s */
.startseite .einstiege h3 a:hover {
  color: #e31e24; /* Dunkleres Blau beim Hover */
  text-decoration: underline; /* Unterstreichung erscheint beim Hover */
  text-decoration-thickness: 0.5px;
}

/**/
/*Fotos der Teaser oben und gleichmäßig*/
.startseite .teaser {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.startseite .item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.startseite .text_container {
  flex-grow: 1;
}



/**/


#main .teaser ul {
	list-style-type: square;
}
#main .teaser ul li {
    position: relative;
    margin-left: 18px; /* Platz für den farbigen Punkt */
    margin-bottom: 8px;
    padding-left: 5px;
}
.ratgeber h3 {
	margin-bottom: 0;
	font-size: 1.1em;
}

.ratgeber h3 a, .ratgeber li a {
  text-decoration: none; /* Entfernt die Standard-Unterstreichung von Links */
  color: inherit; /* Behält die Textfarbe der Überschrift bei */
  position: relative; /* Wichtig für die Positionierung des Pfeils */
  padding-right: 20px; /* Platz für den Pfeil schaffen */
 
}




#main .fotoabstand .image_container {
  overflow: hidden;
  margin-left: 30px!important;
  
 }
  
  
@media (max-width: 1090px) {
  #main .fotoabstand .image_container {
    overflow: hidden;
    margin-left: 0px !important;
    float: left;
  }
}
 
  
/* Grundlegender Container für die Breadcrumbs */
.mod_breadcrumb {
    font-family: Arial, sans-serif; /* Oder die Schriftart deiner Website */
    font-size: 0.8em; /* Etwas kleiner als der Haupttext für eine dezente Optik */
    margin-bottom: 20px; /* Abstand zum folgenden Inhalt */
    padding: 0px 18px; /* Optional: etwas vertikaler Platz */
    
    max-width: 1440px;
  
  margin-right: auto;
  position: relative;
}

/* Liste der Breadcrumbs */
.mod_breadcrumb ul {
    list-style: none; /* Entfernt die Standard-Listenpunkte */
    margin: 0; /* Entfernt Standard-Margin */
    padding: 0; /* Entfernt Standard-Padding */
    display: flex; /* Ordnet die Listenelemente nebeneinander an */
    flex-wrap: wrap; /* Erlaubt das Umbrechen auf mehrere Zeilen bei wenig Platz */
    align-items: center; /* Zentriert die Inhalte vertikal (besonders wichtig für Pfeile) */
}

/* Einzelnes Listenelement */
.mod_breadcrumb li {
    display: flex; /* Erforderlich, um den Pfeil sauber neben dem Text zu positionieren */
    align-items: center; /* Vertikale Ausrichtung des Textes und Pfeils */
    white-space: nowrap; /* Verhindert Umbrüche innerhalb eines einzelnen Breadcrumb-Eintrags */
}

/* Stil für die Links in den Breadcrumbs */
.mod_breadcrumb li a {
    color: #cc0000; /* Deine rote Linkfarbe, wie auf dem Screenshot */
    text-decoration: none; /* Keine Unterstreichung standardmäßig */
    padding: 0 2px; /* Minimaler horizontaler Abstand um den Text, falls nötig */
}

.mod_breadcrumb li a:hover {
    text-decoration: underline; /* Unterstreichung beim Hover für bessere Usability */
}

/* Stil für den Text des aktuellen (letzten) Elements */
.mod_breadcrumb li.active {
    color: #333; /* Dunklerer Text für das aktuelle, nicht anklickbare Element */
    font-weight: normal; /* Optional: Das aktuelle Element hervorheben */
    padding: 0 2px; /* Konsistenter Abstand wie bei Links */
}

/* Trennzeichen (Pfeil) zwischen den Listenelementen */
.mod_breadcrumb li:not(.first)::before {
    content: "\003E"; /* Unicode-Zeichen für ein ">". Alternativen: "\203A" (›) oder "\2192" (→) */
    color: #999; /* Eine dezente Farbe für den Pfeil */
    margin: 0 8px; /* Abstand vor und nach dem Pfeil */
    /* Optional: Anpassen, falls der Pfeil nicht perfekt mittig sitzt */
    /* line-height: 1; */
    /* display: inline-block; */
    /* transform: translateY(-1px); */
}

/* Optional: Anpassung für das erste Element, falls es einen eigenen Stil haben soll */
.mod_breadcrumb li.first a {
    /* Keine speziellen Styles nötig, da es vom allgemeinen 'a' abgedeckt wird */
}

/*Ende Breadcrumb*/


/* Basis-Styling für den gesamten FAQ-Bereich */
.faq-section {
    max-width: 800px; /* Oder eine andere passende Breite */
    margin: 40px auto; /* Zentriert und Abstand nach oben/unten */
    padding: 20px;
    background-color: #f9f9f9; /* Dezenter Hintergrund */
    border-radius: 8px; /* Leicht abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Dezenter Schatten */
}

.faq-section h2 {
    text-align: center;
    color: #333; /* Dunklerer Text für die Überschrift */
    margin-bottom: 30px;
    font-size: 2em; /* Etwas größer als normaler Text */
}

/* Styling für jedes einzelne Akkordeon-Element */
details {
    margin-bottom: 15px; /* Abstand zwischen den Akkordeons */
    border: 1px solid #ddd; /* Dezente Trennlinie */
    border-radius: 6px;
    background-color: #fff; /* Weißer Hintergrund für jedes Element */
}

/* Styling des sichtbaren Teils (der Frage) */
summary {
    display: block; /* Stellt sicher, dass das Dreieck nicht verrutscht */
    padding: 15px 20px;
    font-weight: bold; /* Frage fett darstellen */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    color: #333; /* Farbe der Frage */
    position: relative; /* Für das Dreieck-Icon */
    list-style: none; /* Entfernt das Standard-Dreieck in einigen Browsern */
}

/* Entfernen des Standard-Dreiecks für die meisten Browser und OS */
summary::-webkit-details-marker {
    display: none;
}
summary::marker { /* Standard-Syntax für Firefox */
    display: none;
}

/* Eigenes Dreieck-Icon über CSS hinzufügen */
summary::after {
    content: '+'; /* Standard: Plus-Zeichen */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    line-height: 1;
    transition: transform 0.2s ease-out; /* Sanfte Animation beim Öffnen */
    color: #0056b3; /* Farbe für das Icon, z.B. deine Akzentfarbe */
}

details[open] summary::after {
    content: '-'; /* Wenn geöffnet: Minus-Zeichen */
    transform: translateY(-50%) rotate(0deg); /* Sorgt dafür, dass es ein Minus bleibt */
}

/* Styling des Inhalts (der Antwort) */
details p {
    padding: 10px 20px 15px; /* Innenabstand für den Text */
    line-height: 1.6; /* Angenehmer Zeilenabstand */
    color: #555; /* Etwas hellerer Text für die Antwort */
    border-top: 1px solid #eee; /* Leichte Trennlinie zwischen Frage und Antwort */
    margin: 0; /* Standard-Margin des P-Tags entfernen */
}

/* Optional: Hover-Effekt für die Frage */
summary:hover {
    background-color: #f0f0f0; /* Leichter Hintergrund beim Hover */
}