/* Abschnitt Inhaltsverzeichnis (#2) */

.abschnitt--download { padding-bottom: 40px; }
/* Ohne Trennlinie (#19): 40 + 24 = 64 px Weißraum zwischen Einleitung und „Inhalt“, so viel wie bis 768 px
   (32 + 32). Das ist fast doppelt so viel wie der größte Abstand innerhalb der Einleitung (36 px) und vor der
   Liste (28 px), deshalb liest sich „Inhalt“ ohne Linie als neuer Abschnitt. */
.abschnitt--katalog { padding-top: 24px; }

h2 { font-size: 32px; font-weight: 900; line-height: 1.15; margin-bottom: 12px; }
.katalog__hinweis { font-size: 17px; margin-bottom: 28px; }
/* Ab 1024 px (#19) volle Inhaltsbreite: hebt die Zeilenlänge --text-w aus css/basis.css (.abschnitt p) nur hier auf. */
@media (min-width: 1024px) {
  .abschnitt .katalog__hinweis { max-width: none; }
}

/* Kapitel: Register der obersten Ebene, beim Start eingeklappt */
.katalog__liste { border-top: 2px solid var(--primary); }
.kapitel { border-bottom: 2px solid var(--primary); }
.kapitel__kopf { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: center; }
.kapitel__titel { font-size: 22px; font-weight: 800; line-height: 1.25; }
.kapitel__knopf {
  display: flex; align-items: baseline; gap: 16px; width: 100%;
  padding: 16px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--primary);
}
.kapitel__knopf:hover .kapitel__name { text-decoration: underline; }
.kapitel__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kapitel__zahl { flex: none; font-size: 15px; font-weight: 700; color: var(--text-leise); font-variant-numeric: tabular-nums; }
/* Pfeil aus zwei Kanten, ohne Rundung; zeigt nach unten, aufgeklappt nach oben */
.kapitel__knopf::after {
  content: ""; flex: none; align-self: center;
  width: 10px; height: 10px; margin: 0 6px 4px 4px;
  border-right: 3px solid var(--primary); border-bottom: 3px solid var(--primary);
  transform: rotate(45deg);
}
.kapitel__knopf[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -4px; }
.kapitel__inhalt { padding-bottom: 16px; }
.kapitel--einzeln .blatt { border-bottom: 0; padding: 16px 0; }
.kapitel--einzeln .blatt__titel { font-size: 22px; font-weight: 800; line-height: 1.25; }

/* Unterkapitel (#24): eigene Zeile im aufgeklappten Kapitel, eingerückt wie die Blätter des Kapitels;
   ihre Blätter stehen eine Stufe tiefer. Knopf, Kästchen und Pfeil wie beim Kapitel, Schrift kleiner. */
.unterkapitel { border-top: 1px solid var(--mid-gray); }
.unterkapitel .kapitel__kopf { padding-left: 36px; }
.unterkapitel .kapitel__titel { font-size: 18px; font-weight: 700; }
.unterkapitel .kapitel__knopf { padding: 12px 0; }
.unterkapitel .kapitel__knopf::after { width: 8px; height: 8px; border-width: 0 2px 2px 0; }
.unterkapitel .kapitel__inhalt { padding-bottom: 8px; }
.kapitel__inhalt .kapitel__inhalt .blatt { padding-left: 72px; }

.blaetter { list-style: none; }
.blatt {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--mid-gray);
  scroll-margin-top: 16px;
}
.blatt:target { background: var(--light-gray); }
.blatt__wahl { margin-top: 4px; }
.kapitel__inhalt .blatt { padding-left: 36px; grid-template-columns: 22px 1fr; }
.kapitel__inhalt .blatt:last-child { border-bottom: 0; }
.blatt__inhalt { min-width: 0; }
.blatt__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.blatt__titel { font-weight: 700; font-size: 17px; cursor: pointer; overflow-wrap: anywhere; }
.blatt__fuss {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; margin-top: 2px;
}
.blatt__meta { font-size: 14px; color: var(--text-leise); }
/* Dokumentart je Blatt (#32): Icon aus der Werteliste in data/ordnung.json und das Wort daneben, in der Schriftfarbe.
   Art und Umfang bleiben beim Umbruch zusammen; die Grundlinie der Art ist die des Worts, das Icon steht mittig dazu. */
.blatt__angaben { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.blatt__art { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--primary); white-space: nowrap; }
.blatt__icon { flex: none; align-self: center; width: 16px; height: 16px; fill: currentColor; }
.blatt__aktionen { display: flex; gap: 20px; }
.blatt__link { font-weight: 700; font-size: 15px; text-decoration: none; }
.blatt__link:hover { text-decoration: underline; }

/* Desktop: Titel, Dokumentart, Umfang, Herunterladen und Ansehen in einer Zeile (#31: ohne Seitenangabe).
   Ab 1024 px statt 769 px (#32): mit der Spalte Dokumentart bliebe dem Titel darunter kein Platz, bis dahin steht
   die Zeile wie auf dem Telefon in zwei Zeilen. Feste Spalten, damit Art und Umfang über alle Zeilen fluchten. */
@media (min-width: 1024px) {
  .blatt { align-items: center; padding: 10px 0; }
  .blatt__wahl { margin-top: 0; }
  .blatt__inhalt {
    display: grid; align-items: baseline; column-gap: 32px;
    grid-template-columns: minmax(0, 1fr) 9em 13em auto;
  }
  .blatt__kopf, .blatt__fuss, .blatt__angaben { display: contents; }
  .blatt__titel { grid-column: 1; }
  .blatt__art { grid-column: 2; }
  .blatt__meta { grid-column: 3; }
  .blatt__aktionen { grid-column: 4; }
  .blatt__fuss { margin-top: 0; }
  .kapitel--einzeln .blatt { padding: 16px 0; }
}

/* Leiste für die Auswahl, bleibt am unteren Rand, solange das Inhaltsverzeichnis sichtbar ist */
.auswahl {
  position: static; z-index: 5;
  margin-top: 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 20px;
  background: var(--primary); color: var(--white);
  border-radius: var(--btn-radius) var(--btn-radius) 0 0;
}
.auswahl--aktiv { position: sticky; bottom: 0; box-shadow: 0 -6px 24px rgba(0, 45, 89, 0.18); }
.auswahl__zaehler { font-weight: 700; font-size: 16px; }
.auswahl__knoepfe { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 12px; }
.auswahl__knopf { font-size: 16px; padding: 11px 18px; border: 0; cursor: pointer; }
.auswahl__knopf:disabled { background: #5a7896; color: #dfe6ee; box-shadow: none; cursor: default; }
/* Ansehen ist ein Zusatz (#15): Rahmenknopf ohne Fläche, nachrangig zu Drucken und Herunterladen */
.auswahl__knopf--neben {
  font-family: var(--font); font-weight: 800; line-height: 1.2; text-align: center;
  background: transparent; color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}
.auswahl__knopf--neben:hover { background: rgba(255, 255, 255, 0.12); }
.auswahl__knopf--neben:disabled { background: transparent; color: #9fb2c5; box-shadow: inset 0 0 0 2px #5a7896; }
.auswahl__leeren {
  font: 700 15px/1.2 var(--font); color: var(--white);
  background: none; border: 0; padding: 8px 4px; text-decoration: underline; cursor: pointer;
}
.auswahl__leeren:disabled { opacity: 0.55; cursor: default; text-decoration: none; }
.auswahl__meldung { flex-basis: 100%; font-size: 15px; }
.auswahl__meldung:empty { display: none; }
.auswahl__druckrahmen { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }

@media (max-width: 768px) {
  .abschnitt--download { padding-bottom: 32px; }
  .abschnitt--katalog { padding-top: 32px; }
  h2 { font-size: 26px; }
  .katalog__hinweis { font-size: 16px; }
  .kapitel__titel, .kapitel--einzeln .blatt__titel { font-size: 19px; }
  .kapitel__inhalt .blatt { padding-left: 16px; }
  .unterkapitel .kapitel__kopf { padding-left: 16px; }
  .unterkapitel .kapitel__titel { font-size: 17px; }
  .kapitel__inhalt .kapitel__inhalt .blatt { padding-left: 32px; }
  .blatt__titel { font-size: 16px; }
  .auswahl { margin-left: -20px; margin-right: -20px; border-radius: 0; padding: 12px 20px; }
  .auswahl__knoepfe { width: 100%; }
  .auswahl__knopf { flex: 1 1 140px; font-size: 15px; padding: 11px 12px; }
}

/* Schmale Schirme (#24): die Registertitel des Ordners sind lang ("Reparaturmörtelsysteme"), neben der Blattzahl
   brach das Wort bei 375 px mitten durch. Die Blattzahl steht deshalb unter dem Titel, der Pfeil rechts daneben. */
@media (max-width: 600px) {
  .kapitel__knopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; }
  .kapitel__name { grid-column: 1; grid-row: 1; overflow-wrap: break-word; hyphens: auto; }
  .kapitel__zahl { grid-column: 1; grid-row: 2; margin-top: 2px; }
  .kapitel__knopf::after { grid-column: 2; grid-row: 1 / span 2; }
}

/* Druck: nur das Inhaltsverzeichnis, ohne Bedienelemente und ohne Seitenangaben (#31); die Dokumentart steht
   rechts neben dem Titel (#32) */
@media print {
  @page { size: A4; margin: 16mm 16mm 18mm; }
  body { display: block; min-height: 0; font-size: 10pt; }
  .skip-link, .sprachwahl, .einleitung, .downloads, .katalog__hinweis, noscript,
  .auswahl, .blatt__wahl, .blatt__meta, .blatt__aktionen, .fuss__links { display: none !important; }
  .kopf { border: 0; }
  .kopf__innen { padding: 0 0 6mm; }
  .kopf__logo img { height: 14mm; }
  .rahmen { padding: 0; max-width: none; }
  .abschnitt { max-width: none; padding: 0; border: 0; }
  h1 { font-size: 22pt; margin-bottom: 2mm; }
  h2 { font-size: 14pt; margin-bottom: 4mm; }
  /* Im Druck sind alle Kapitel aufgeklappt, ohne Kästchen, Pfeil und Blattzahl */
  .kapitel__inhalt[hidden] { display: block !important; }
  .kapitel__wahl, .kapitel__zahl, .kapitel__knopf::after { display: none !important; }
  .katalog__liste { border-top: 0; }
  .kapitel { border-bottom: 0; }
  .kapitel__kopf { display: block; break-after: avoid; }
  .kapitel__titel, .kapitel--einzeln .blatt__titel { font-size: 12pt; font-weight: 800; }
  .kapitel__knopf { padding: 6mm 0 1mm; border-bottom: 1pt solid var(--primary); }
  .kapitel__inhalt { padding-bottom: 0; }
  .kapitel--einzeln .blatt { display: block; padding: 6mm 0 1mm; border-bottom: 1pt solid var(--primary); }
  /* Unterkapitel (#24) als Zwischenüberschrift, Blätter darunter eingerückt */
  .unterkapitel { border-top: 0; }
  .unterkapitel .kapitel__kopf { padding-left: 0; }
  .unterkapitel .kapitel__titel { font-size: 10.5pt; font-weight: 700; }
  .unterkapitel .kapitel__knopf { padding: 3mm 0 0.5mm; border-bottom: 0; }
  .blatt, .kapitel__inhalt .blatt { display: block; padding: 1.2mm 0; border-bottom: 0.5pt solid var(--mid-gray); break-inside: avoid; }
  .kapitel__inhalt .kapitel__inhalt .blatt { padding: 1.2mm 0 1.2mm 4mm; }
  .blatt__inhalt { display: flex; align-items: baseline; justify-content: space-between; gap: 0 6mm; }
  .blatt__kopf { display: flex; }
  .blatt__fuss, .blatt__angaben { display: contents; }
  .blatt__art { font-size: 9pt; }
  .blatt__icon { width: 3.2mm; height: 3.2mm; }
  .blatt__titel { font-size: 10pt; font-weight: 400; }
  .fuss { background: none; font-size: 8pt; }
  .fuss__innen { padding: 6mm 0 0; }
}