/* ==========================================================================
   Unterseiten – gleiches 12-Spalten-Raster wie die Startseite
   ========================================================================== */

/* Seitenkopf mit Brotkrumen ------------------------------------------------ */
.page-head { padding-block: var(--s-4) var(--s-5); }
.breadcrumb ol { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: var(--fs-small); color: var(--c-muted); }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--c-sand-deep); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb [aria-current] { color: var(--c-ink); }
.page-head h1 { margin-bottom: 0; }
.page-head .lead { margin-top: var(--s-3); }

/* Text-Bild-Zeilen im Raster ------------------------------------------------ */
.text-figure { padding-block: var(--s-4); }
.text-figure + .text-figure { padding-top: var(--s-2); }
.text-figure figure { margin: 0; }
.text-figure .img-frame { aspect-ratio: 4 / 3; }
.text-figure p { max-width: var(--w-text); }
@media (min-width: 56em) {
  .text-figure--flip .tf-media { order: -1; }
}

/* Info-Leiste (Kursumfang/Preis) -------------------------------------------- */
.info-band { background: var(--c-sand); padding-block: var(--s-5); margin-top: var(--s-5); }
.info-band h2 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.info-band p { margin-bottom: 0; }

/* Kartenreihen (Übersichtsseite) ----------------------------------------------- */
.card-group + .card-group { margin-top: var(--s-4); }
.card-group .section-title { margin-bottom: var(--s-4); }
.cards--four .card h3 { font-size: 1.25rem; }

/* Dog-Blog-Bezug auf Kursseiten ----------------------------------------------- */
.related { padding-block: var(--s-6); }
.related-item { display: grid; gap: var(--s-3); align-items: center; }
.related-item .img-frame { aspect-ratio: 4 / 3; }
.related-item blockquote { margin: 0 0 var(--s-2); font-family: var(--f-serif); font-size: 1.3rem; line-height: 1.4; color: var(--c-cocoa); }
.related-kicker { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: 0.4rem; }

/* Kontakt-Band ---------------------------------------------------------------- */
.cta-band { background: var(--c-green); color: var(--c-on-green); padding-block: var(--s-6); }
.cta-band h2 { color: var(--c-on-green); margin-bottom: var(--s-2); }
.cta-band a:not(.btn) { color: var(--c-on-green); }
.cta-band .tel { font-size: 1.5rem; font-weight: 650; }
.cta-band :focus-visible { outline-color: var(--c-on-green); }
.cta-band .btn-row { margin-top: var(--s-3); }
@media (min-width: 56em) { .cta-band .btn-row { justify-content: flex-end; margin-top: 0; } }

/* Ortsliste (wie Startseite) ---------------------------------------------------- */
.places { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-3) 0; }
.places li { margin: 0; padding: 0.3rem 0.8rem; border: 1px solid var(--c-sand-deep); border-radius: 999px; font-size: 1rem; background: var(--c-paper); }
.places li.is-home { background: var(--c-green); border-color: var(--c-green); color: var(--c-on-green); font-weight: 600; }

/* Fließtext auf Unterseiten */
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { max-width: var(--w-text); }
.dash-list { list-style: none; padding: 0; }
.dash-list li { position: relative; padding-left: 1.4rem; }
.dash-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.7rem; height: 2px; background: var(--c-ochre); }
.tf-fig { margin: 0; }
.tf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin: 0; }
.tf-pair figure { margin: 0; }
.price-lines { list-style: none; padding: 0; margin: 0; }
.price-lines li { padding: 0.35rem 0; border-bottom: 1px solid var(--c-sand-deep); }
.price-lines li:last-child { border-bottom: 0; }
.head-figure { margin: 0; }
.head-figure .img-frame { aspect-ratio: 4 / 3; }
.badges { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.badges li { margin: 0; }
.badges img { width: 7.5rem; height: auto; }
.section-anchor { scroll-margin-top: 6rem; }

/* Kontakt ----------------------------------------------------------------- */
.contact-address address { font-style: normal; margin-bottom: var(--s-2); }
.contact-address .tel { font-size: 1.3rem; font-weight: 650; }
.contact-address .head-figure { max-width: 320px; margin-top: var(--s-3); }
.contact-form { display: grid; gap: var(--s-3) var(--s-3); grid-template-columns: 1fr; margin-top: var(--s-3); }
@media (min-width: 40em) { .contact-form { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: var(--c-cocoa); }
.field .opt { font-weight: 400; color: var(--c-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit; font-size: 1rem; color: var(--c-ink);
  background: #fff; border: 1px solid #b9ad99; border-radius: var(--r-ui);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus); outline-offset: 1px; }
.field--check { display: flex; gap: 0.75rem; align-items: flex-start; }
.field--check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; accent-color: var(--c-green); }
.field--check label { font-weight: 400; color: var(--c-ink); }
.field--hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--fs-small); margin: 0; }
.form-fallback { margin-top: var(--s-4); font-size: 1rem; color: var(--c-muted); }

/* Rechtstexte / Preise / 404 ---------------------------------------------------- */
.legal address { font-style: normal; margin-bottom: var(--s-2); }
.legal p { font-size: 1rem; }
.placeholder { padding: var(--s-2) var(--s-3); border-left: 4px solid var(--c-ochre); background: var(--c-sand); }
.price-list { list-style: none; padding: 0; margin: 0; }
.price-list li { margin: 0; border-bottom: 1px solid var(--c-sand-deep); }
.price-list a { display: block; padding: 0.8rem 0; color: var(--c-ink); text-decoration: none; }
.price-list a:hover { color: var(--c-green); text-decoration: underline; }
.notfound { padding-block: var(--s-6); }
.tf-stack { display: grid; gap: var(--s-2); }
.tf-small .tf-fig { max-width: 250px; }