/* Gestaltung 2026 – Seite „Für unterwegs“ (Frontend/Seiten/Unterwegs.php) */

.unterwegs-seite { padding: 3rem 0 1rem; }
.unterwegs-seite h2 { margin-top: 3rem; }
.unterwegs-seite .pakete { list-style: none; margin: 0 0 1.25rem; padding: 0; border-top: 1px solid var(--linie); }
.unterwegs-seite .pakete li { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.unterwegs-seite .angaben { flex: 1 1 18rem; min-width: 0; }
.unterwegs-seite h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.unterwegs-seite .umfang, .unterwegs-seite .stand { margin: 0; font-family: var(--schrift-ui); font-size: .95rem; color: var(--leise); }
.unterwegs-seite .stand:empty { display: none; }
.unterwegs-seite .stand { color: var(--tinte); }
.unterwegs-seite progress { width: 100%; max-width: 22rem; height: .4rem; margin-top: .5rem; accent-color: var(--link); }
.unterwegs-seite progress[hidden] { display: none; }
.unterwegs-seite .knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.unterwegs-seite .knoepfe[hidden], .unterwegs-seite .knopf[hidden] { display: none; }
.unterwegs-seite .leise { font-family: var(--schrift-ui); font-size: .95rem; color: var(--leise); }

/* Hörbuch und Meditationen: ganz speichern, darunter aufklappbar Abschnitte und einzelne Aufnahmen */
.unterwegs-seite .hoerpaket { border-top: 1px solid var(--linie); padding-bottom: .5rem; }
.unterwegs-seite .hoerpaket + .hoerpaket { margin-top: 1rem; }
.unterwegs-seite .paketzeile { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; padding: 1.1rem 0; }
.unterwegs-seite details > summary { cursor: pointer; font-family: var(--schrift-ui); font-size: .95rem; color: var(--link); padding: .2rem 0; }
.unterwegs-seite details > summary:hover { color: var(--link-hover); }
.unterwegs-seite .abschnitte > ul { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--linie); }
.unterwegs-seite .abschnitte > ul > li + li { border-top: 1px solid var(--linie); }
.unterwegs-seite .abschnitte .paketzeile { padding: .8rem 0 .4rem; }
.unterwegs-seite h4 { margin: 0 0 .15rem; font-size: 1.05rem; font-weight: 400; }
.unterwegs-seite .aufnahmen { margin-bottom: .8rem; }
.unterwegs-seite .aufnahmen ol { list-style: none; margin: .3rem 0 0; padding: 0; }
.unterwegs-seite .aufnahmen li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .25rem 0; font-family: var(--schrift-ui); font-size: .95rem; }
.unterwegs-seite .aufnahmen .dauer { color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.unterwegs-seite .aufnahmen .unterwegs { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--leise); cursor: pointer; font: 600 .7rem var(--schrift-ui); }
.unterwegs-seite .aufnahmen .unterwegs[hidden] { display: none; }
.unterwegs-seite .aufnahmen .unterwegs:hover { background: var(--flaeche); color: var(--link); }
.unterwegs-seite .aufnahmen .unterwegs svg { width: 1.2rem; height: 1.2rem; }
.unterwegs-seite .aufnahmen .unterwegs.da, .unterwegs-seite .aufnahmen .unterwegs.laedt { color: var(--link); }
.unterwegs-seite .aufnahmen .unterwegs.laedt { box-shadow: inset 0 0 0 1.5px var(--linie); }
.unterwegs-seite .aufnahmen .unterwegs.laedt svg { display: none; }