body {
  container-type: inline-size;
  /* Der Body dient als stabiler Breiten-Anker */
}

.brochure-accordion {
  margin-top: 2.5rem;
}

/* Einzelnes Akkordeon-Element */
.brochure-item {
  background: #ffffff;
  border: .05rem solid #e6e6e6;
  margin-bottom: 1rem;
  overflow: hidden;
}

/* 1. Das Header-Grid mit 2 Spalten: Bild (80px) und Inhalt (Rest) */
.brochure-header {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 20px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.brochure-header::-webkit-details-marker {
  display: none;
}

/* 2. Der Text-Block wird zum Flex-Container, um seine Kinder zu kontrollieren */
.header-title {
  display: flex;
  flex-direction: column;
  position: relative;
  /* Basis für die absolute Positionierung des Pfeils */
}

/* 3. Der Text-Link bleibt völlig unverändert an seiner Position */
.toggle-hint {
  font-size: .9rem;
  color: #5a7027;
  font-weight: 700;
  display: inline-block;
}

.brochure-item[open] .toggle-hint {
  color: #999999;
}

/* 4. Der Pfeil dockt nun an .header-title an und wird absolut ganz rechts platziert */
.header-title::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid #5a7027;
  border-bottom: 2px solid #5a7027;
  /* Absolute Positionierung: Rechtsbündig, vertikal auf Höhe des Textes zentriert */
  position: absolute;
  right: 8px;
  bottom: 10px;
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s;
}

/* 5. Drehung und Farbe anpassen, wenn geöffnet */
.brochure-item[open] .header-title::after {
  transform: rotate(-135deg);
  border-color: #f18700;
}

.header-image img {
  width: 140px;
  height: auto;
  display: block;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Platzhalter falls Bild fehlt: Braucht eine Standardgröße */
.header-image.placeholder {
  width: 140px;
  height: 180px;
  background: hsl(78deg 19% 97%);
  border: .05rem solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Das gezeichnete Dokumentenblatt */
.css-file-icon {
  width: 45px;
  height: 60px;
  background-color: #ffffff;
  border: 2px solid #e6e6e6;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Die umgeknickte Ecke oben rechts (Eselsohr) */
.css-file-icon::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  /* Erzeugt die schräge Kante */
  border-style: solid;
  border-width: 0 14px 14px 0;
  border-color: transparent hsl(78deg 19% 97%) transparent transparent;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 2px;
}

/* Zwei angedeutete Textlinien auf der Broschüre */
.css-file-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 25px;
  height: 3px;
  background-color: #e6e6e6;
  /* Erzeugt die zweite Linie mit Abstand */
  box-shadow: 0 8px 0 #e6e6e6, 0 16px 0 #e6e6e6;
  /* Platzierung auf dem Papier */
  top: 22px;
}

/* Titel-Bereich im Header */
.header-title h3 {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  color: #1e293b;
}

/* Aufklappbarer Inhaltsbereich */
.brochure-body {
  padding: 0 20px 24px 20px;
  border-top: 1px solid #f1f5f9;
  background: hsl(78deg 19% 97%);
}

/* Beschreibungstexte (1-4 Absätze) */
.brochure-description {
  line-height: 1.6;
  margin-bottom: 24px;
}

.brochure-description p:first-child {
  margin-top: 20px;
}

/* Download-Sektion */
.brochure-download-block h3 {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
}

/* Grid für die bis zu 10 Sprachen bei 700px Breite */
.brochure-download-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Jeder Download-Link nimmt die volle Breite ein */
.brochure-download-link {
  display: flex;
  align-items: center;
  font-weight: 700;
  background: #ffffff;
  border: .05rem solid #e6e6e6;
  padding: 10px 16px;
  text-decoration: none;
  transition: all 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.brochure-download-link:hover {
  border-color: #5a7027;
  background: hsl(78deg 19% 93%);
  color: #5a7027;
}

/* Sprachkürzel links fixieren */
.lang-code {
  font-weight: bold;
  background: #5a7027;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-right: 16px;
  flex-shrink: 0;
  /* Verhindert, dass das Kürzel bei langen Texten gequetscht wird */
}

/* Dateigröße rechtsbündig halten */
.file-size {
  margin-left: auto;
  /* Schiebt die Größe automatisch ganz nach rechts */
  padding-left: 1rem;
  /* Sicherheitsabstand, falls der Titel extrem lang ist */
  flex-shrink: 0;
  /* Verhindert das Quetschen der Dateigröße */
}

/* Reagiert jetzt absolut fehlerfrei auf die Breite des Body-Containers */
@container (max-width: 600px) {

  .brochure-header {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
    justify-items: center;
    padding: 16px;
    padding-bottom: 32px;
  }

  .header-image img,
  .header-image.placeholder {
    width: 120px;
    height: auto;
    margin-bottom: 4px;
  }

  .header-title {
    width: 100%;
  }

  /* Pfeil mittig unter den Text setzen */
  .header-title::after {
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: -16px;
  }

  .brochure-download-link {
    font-size: 0.9rem;
    padding: 10px 12px;
  }
}

/* Animation für den Inhaltsbereich */
@keyframes slideDownIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
    /* Startet leicht nach oben versetzt */
  }

  to {
    opacity: 1;
    transform: translateY(0);
    /* Gleitet an die originale Position */
  }
}

/* Zielgruppen-Selektor für den aufklappenden Inhalt */
.brochure-item::details-content {
  animation: slideDownIn 0.3s ease-out-back;
  /* Dauer und Kurve der Animation */
}

/* Fallback für ältere Browser, falls ::details-content noch nicht unterstützt wird */
.brochure-item[open] .brochure-body {
  animation: slideDownIn 0.3s ease-out;
}