/* Kurskatalog — die öffentliche Kursseite und ihre Vorschau im Büro teilen sich diese Datei.
   Alles hängt unter .cc-page, damit dieselben Regeln in der Editor-Vorschau (im Backend, neben
   AdminLTE) gelten wie auf der Seite. Jonathan, 16.09.2026: „die Vorschau sieht ganz anders aus
   als die eigentliche Seite" — jetzt ist es EIN Markup (course_catalog_page.php) und EIN Stil.
   Die Farbe des Hauses kommt als --accent auf .cc-page (inline), der Rest ist fest.
   Breiten reagieren auf den Behälter (@container), nicht auf das Fenster — die Vorschau ist
   schmaler als die Seite und klappt an derselben Stelle um. */
.cc-page{--ink:#1c2327;--muted:#5b666e;--line:#d9dfdc;--bg:#f6f7f6;--card:#fff;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);container-type:inline-size}
.cc-page *{box-sizing:border-box}
.cc-page a{color:var(--accent)}
.cc-page h1{font-size:clamp(26px,4vw,34px);line-height:1.2;margin:0 0 6px;color:var(--ink)}
.cc-page h2{font-size:20px;margin:26px 0 8px;color:var(--ink)}
.cc-page h3{font-size:16px;margin:12px 0 4px;color:var(--ink)}
.cc-page p{margin:0 0 1em}
.cc-page .sub{color:var(--muted);margin:0 0 14px;font-size:18px}
.cc-page .hero{width:100%;max-height:420px;object-fit:cover;border-radius:10px;margin:6px 0 16px}
.cc-page .section{max-width:70ch}
.cc-page .section img{max-width:100%;height:auto}
.cc-page .grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
@container (max-width:820px){.cc-page .grid{grid-template-columns:1fr}}
.cc-page .facts{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.cc-page .facts dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:15px}
.cc-page .facts dt{color:var(--muted)}
.cc-page .facts dd{margin:0}
.cc-page .btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:15px}
.cc-page .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cc-page .card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.cc-page .card h3{margin:0;font-size:18px}
.cc-page .card .meta{font-size:13px;color:var(--muted)}
.cc-page .card .status{font-size:13px;font-weight:600;color:var(--accent)}
.cc-page .cc-dates{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0}
.cc-page .cc-dates td,.cc-page .cc-dates th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.cc-page .cc-teachers{display:flex;flex-wrap:wrap;gap:12px}
.cc-page .cc-teacher{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-decoration:none;color:var(--ink)}
.cc-page .cc-teacher-photo{width:48px;height:48px;border-radius:50%;object-fit:cover}
.cc-page .cc-inline-photo{width:36px;height:36px;vertical-align:middle;margin:0 4px}
.cc-page .cc-teacher-link{font-weight:600}
.cc-page .cc-faq details{border-bottom:1px solid var(--line);padding:6px 0}
.cc-page .cc-faq summary{cursor:pointer;font-weight:600}
.cc-page .cc-empty{color:var(--muted)}
.cc-page form.enquiry{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;max-width:560px}
.cc-page form.enquiry label{display:block;font-size:14px;margin:8px 0 2px}
.cc-page form.enquiry input,.cc-page form.enquiry textarea{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;font:inherit}
.cc-page .note{color:var(--muted);font-size:14px}
.cc-page .ok{color:#2f7a4e}
.cc-page .err{color:#a93a2f}
.cc-page .hp{position:absolute;left:-9999px}
.cc-page .profile{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.cc-page .profile img{width:120px;height:120px;border-radius:50%;object-fit:cover}