/* GreenFit: gemeinsame Zielgestaltung fuer beide HTML-Seiten. */

/* 1. Grundfarben und Schrift */
* { box-sizing: border-box; }
body { margin: 0; background: #f8f8f1; color: #23362c; font-family: Arial, Helvetica, sans-serif; line-height: 1.65; }
a { color: #173e30; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, audio:focus-visible { outline: 3px solid #6c922d; outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.12; letter-spacing: -0.04em; color: #173e30; }
h1 { font-size: 4.4rem; margin-bottom: 24px; }
h2 { font-size: 2.6rem; margin-bottom: 20px; }
h3 { font-size: 1.5rem; margin-bottom: 16px; }
figure { margin: 0; }
figcaption { color: #5a6c61; font-size: .8rem; margin-top: 10px; }
section, article, #kontakt { scroll-margin-top: 130px; }
.breite { width: 92%; max-width: 1120px; margin: 0 auto; }
.abschnitt { padding-top: 84px; padding-bottom: 84px; }
.etikett { color: #5a6c61; text-transform: uppercase; letter-spacing: .17em; font-size: .7rem; font-weight: bold; margin-bottom: 18px; }
.einleitung { font-size: 1.05rem; color: #5a6c61; max-width: 560px; }
.klein { color: #5a6c61; font-size: .83rem; }

/* 2. Dieselbe Navigation auf beiden Seiten */
.kopf { position: sticky; top: 0; z-index: 10; background: #f8f8f1; border-bottom: 1px solid #d5dfd1; }
.kopf-inhalt { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.65rem; font-weight: bold; letter-spacing: -.07em; }
.logo img { width: 34px; height: 34px; }
.navigation { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 27px; }
.navigation a { text-decoration: none; font-size: .85rem; }
.navigation .aktuell { font-weight: bold; border-bottom: 2px solid #173e30; padding-bottom: 6px; }

/* 3. Startseite: grosse Bildflaeche und Studioangebote */
.startbereich { display: grid; grid-template-columns: 1fr 1.05fr; gap: 66px; align-items: center; padding: 66px 0; }
.startbild { position: relative; }
.startbild > img { width: 100%; height: 490px; object-fit: cover; border-radius: 150px 8px 8px 8px; }
.bildhinweis { position: absolute; bottom: 35px; left: -25px; background: #d8e9a6; color: #173e30; padding: 18px 25px; border-radius: 5px; font-size: .9rem; }
.bildhinweis strong { display: block; font-size: 1.15rem; }
.aktionen { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.knopf { display: inline-block; background: #173e30; color: white; padding: 13px 21px; text-decoration: none; border-radius: 5px; font-size: .85rem; font-weight: bold; }
.knopf:hover { background: #285b42; }
.download { margin-top: 24px; }
.textlink { font-size: .85rem; font-weight: bold; }
.grundsaetze { border-top: 1px solid #d5dfd1; border-bottom: 1px solid #d5dfd1; display: flex; justify-content: space-between; gap: 20px; list-style: none; padding: 23px 0; margin: 0; color: #5a6c61; font-size: .84rem; }
.abschnitt-kopf { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.abschnitt-kopf h2 { margin-bottom: 0; }
.angebot-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 22px; padding: 0; margin: 0; }
.angebot-liste > li { border: 1px solid #d5dfd1; border-radius: 8px; padding: 30px; }
.nummer { color: #789260; font-size: .75rem; margin-bottom: 26px; }
.angebot-liste p { color: #5a6c61; font-size: .9rem; }
.salbei { background: #e4ecdf; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 68px; }
.studiobild { width: 100%; height: 390px; object-fit: cover; border-radius: 8px; }
.zeiten { margin: 30px 0 0; border-top: 1px solid #bacbb4; }
.zeiten dt { margin-top: 15px; font-weight: bold; font-size: .85rem; }
.zeiten dd { margin: 0; color: #5a6c61; font-size: .9rem; }
.schritte { list-style-position: inside; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 0; margin: 30px 0 0; }
.schritte li { border-top: 2px solid #d5dfd1; padding-top: 22px; font-size: .93rem; }
.kontakt { background: #173e30; color: white; border-radius: 10px; padding: 40px 45px; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.kontakt h2 { color: white; margin-bottom: 12px; font-size: 2rem; }
.kontakt p { margin: 0; color: #dae5d8; }
.kontakt a { color: white; white-space: nowrap; }
.fuss { margin-top: 60px; padding: 25px 0; border-top: 1px solid #d5dfd1; display: flex; justify-content: space-between; gap: 25px; font-size: .75rem; color: #5a6c61; }

/* 4. Trainerseite: Teamkarten und Terminplan */
.team-einstieg { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 65px; padding: 65px 0 46px; }
.team-einstieg h1 { font-size: 4rem; margin-bottom: 0; }
.team-einstieg p:last-child { margin-bottom: 7px; }
.team-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 25px; }
.trainer { position: relative; background: white; border: 1px solid #d5dfd1; border-radius: 8px; overflow: hidden; }
.trainer figure img { width: 100%; height: 270px; object-fit: cover; }
.trainer-text { padding: 26px; }
.trainer h2 { font-size: 1.7rem; margin-bottom: 8px; }
.rolle { color: #648149; font-size: .7rem; font-weight: bold; text-transform: uppercase; letter-spacing: .09em; }
.trainer-text p { font-size: .87rem; color: #5a6c61; }
.trainer ul { padding-left: 18px; font-size: .83rem; margin-bottom: 24px; }
.trainer .textlink { font-size: .8rem; }
.tablebereich { border: 1px solid #d5dfd1; border-radius: 8px; overflow-x: auto; background: white; }
table { border-collapse: collapse; width: 100%; font-size: .84rem; }
caption { text-align: left; font-size: .85rem; font-weight: bold; padding: 20px 24px; }
th, td { padding: 17px 18px; border-top: 1px solid #d5dfd1; text-align: left; vertical-align: top; }
thead { background: #173e30; color: white; }
thead th { font-size: .72rem; letter-spacing: .03em; }
.tag { background: #f2f5ee; font-weight: bold; min-width: 100px; }
.uhrzeit { white-space: nowrap; }
td a { font-weight: bold; }
tfoot { background: #edf2e8; color: #5a6c61; font-size: .78rem; }
.tablehinweis { margin-top: 14px; font-size: .8rem; color: #5a6c61; }
.medien-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; }
.medien-raster iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; background: #dce6d6; }
.medien-raster audio { width: 100%; margin: 12px 0; }
.medien-raster h3 { font-size: 1.4rem; }
.medien-raster .ton { background: #e4ecdf; padding: 30px; border-radius: 8px; align-self: start; }

/* 5. Anpassung an kleinere Bildschirme */
@media (max-width: 850px) {
  .kopf-inhalt { align-items: start; flex-direction: column; padding: 20px 0; gap: 14px; }
  .navigation { gap: 22px; }
  .startbereich, .zweispaltig, .team-einstieg { grid-template-columns: 1fr; gap: 35px; }
  .startbereich { padding: 40px 0; }
  .startbild > img { height: 350px; border-radius: 80px 8px 8px 8px; }
  .bildhinweis { left: 18px; bottom: 22px; }
  .angebot-liste, .team-raster { grid-template-columns: 1fr; }
  .trainer { display: grid; grid-template-columns: .8fr 1fr; }
  .trainer figure img { height: auto; min-height: 0; }
  .medien-raster { grid-template-columns: 1fr; }
  .abschnitt { padding-top: 55px; padding-bottom: 55px; }
  .grundsaetze { flex-wrap: wrap; }
  .kontakt { align-items: start; flex-direction: column; padding: 30px; }
}
@media (max-width: 500px) {
  .breite { width: 92%; }
  .navigation { gap: 18px; }
  .navigation a { font-size: .8rem; }
  .grundsaetze { flex-direction: column; gap: 10px; }
  .schritte { grid-template-columns: 1fr; gap: 18px; }
  .abschnitt-kopf { align-items: start; flex-direction: column; gap: 15px; }
  .trainer { grid-template-columns: 1fr; }
  .trainer figure img { min-height: 0; height: 270px; }
  .fuss { flex-direction: column; gap: 8px; }
}

/* Zuordnung zu den Kapiteln: siehe lehrkraft/UMSETZUNG.md.
   Kapitel 7: semantische Bereiche; 8/9: eigene Datei und einfache Selektoren.
   Kapitel 10-12: Schrift, Farben, Hintergruende, Abstaende und Rahmen. */
.angebot-details { padding-left: 18px; color: #5a6c61; font-size: .85rem; margin-bottom: 20px; }
.angebot-liste, .team-raster { align-items: stretch; justify-items: stretch; align-content: start; justify-content: center; }
.navigation li { flex: 0 1 auto; }
.bildhinweis { background-image: linear-gradient(110deg, #e2efbd, #cfdfa0); }
.profil-bild figcaption { padding: 6px 15px; margin: 0; font-size: .7rem; background-color: #f1f4ec; }
.profil-daten { font-size: .82rem; margin-bottom: 22px; }
.profil-daten dt { font-weight: bold; }
.profil-daten dd { margin: 0 0 8px; color: #5a6c61; }
.trainer-text .rolle { color: #648149; font-size: .7rem; }
.profil-marke { display: inline-block; position: absolute; top: 16px; right: 16px; padding: 4px 9px; border-radius: 4px; background-color: #e4ecdf; font-size: .7rem; }
.tipp { display: flow-root; padding: 25px 30px; margin-bottom: 50px; background-color: #edf2e5; background-image: url("medien/punkte.svg"); background-repeat: repeat; background-position: center; background-size: 32px 32px; border-radius: 8px; }
.tipp h2 { font-size: 1.4rem; }
.tipp p { margin-bottom: 0; }
.blatt { float: left; margin: 0 20px 8px 0; }
.nach-oben { position: fixed; bottom: 15px; right: 15px; z-index: 11; display: inline-block; background-color: #173e30; color: white; padding: 8px 12px; border: 1px solid #b5c7ac; border-radius: 5px; font-size: .75rem; }
.fuss { padding-bottom: 65px; }
#kontakt .btn { white-space: normal; }
tbody tr:nth-child(even) { background-color: #f7f9f3; }
.medien-raster video { max-width: 100%; width: 100%; height: auto; border-radius: 5px; }
.clip { border-top: 1px solid #bdcdb4; padding-top: 22px; margin-top: 24px; }
.clip p:last-child { margin-bottom: 0; }

/* Kapitel 16: gleiche Inhalte bei unterschiedlichen Darstellungen. */
@media (max-width: 850px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }
  .team-einstieg h1 { font-size: 2.8rem; }
  .profil-marke { left: 15px; right: auto; }
}
@media (max-width: 500px) {
  .grundsaetze { display: none; }
  .bildhinweis { left: 12px; right: 12px; bottom: 15px; padding: 12px 16px; }
  .tipp { padding: 22px; }
}
@media (prefers-color-scheme: dark) {
  body, .kopf { background-color: #17271f; color: #edf2e7; }
  h1, h2, h3, a { color: #dce9d1; }
  .etikett, .einleitung, .klein, .grundsaetze, figcaption, .fuss,
  .angebot-liste p, .trainer-text p, .zeiten dd, .profil-daten dd, .tablehinweis { color: #c2cebe; }
  .salbei, .medien-raster .ton, .tipp, .trainer, .tablebereich { background-color: #23392b; }
  .navigation .aktuell { border-color: #dce9d1; }
  .tag, tfoot, tbody tr:nth-child(even), .profil-bild figcaption { background-color: #304835; color: #edf2e7; }
  .profil-marke { background-color: #e4ecdf; color: #173e30; }
  .trainer-text .rolle { color: #c1dba3; }
}
@media (prefers-contrast: more) {
  .trainer, .angebot-liste > li, .tablebereich { border-width: 3px; }
  a { text-decoration-thickness: 2px; }
}
@media (forced-colors: active) {
  .trainer, .angebot-liste > li, .kontakt, .nach-oben { border: 1px solid CanvasText; }
  a { color: LinkText; text-decoration: underline; }
  a:focus-visible { outline: 2px solid Highlight; }
}
@media print {
  .kopf, .nach-oben, .bildhinweis { display: none; }
}