@charset "UTF-8";
/* =========================================================
   SI-BERN DESIGN SYSTEM V1
   Verbindliche Design-Tokens und Startseiten-Master.
   Stand: 21.09.2026
   ========================================================= */

:root {
  --si-petrol: #174746;
  --si-petrol-dark: #113b3a;
  --si-orange: #e85b0b;
  --si-cream: #f7f3ec;
  --si-cream-light: #fbfaf7;
  --si-white: #ffffff;
  --si-text: #263434;
  --si-line: #e2e3df;
  --si-content-width: 1180px;
  --si-font: "Trebuchet MS", "Verdana", "Gill Sans", "Helvetica Neue", Arial, sans-serif;
  --si-radius-small: 3px;
  --si-section-space: 4.7rem;
}

/* Startseite ist der visuelle Master fuer die spaetere Uebertragung. */
body.si-home {
  font-family: var(--si-font);
  color: var(--si-text);
  background: var(--si-white);
}

body.si-home h1,
body.si-home h2,
body.si-home h3 { font-family: var(--si-font); }

body.si-home a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }

/* Einheitliches neues SI-Bern-Logo im Header */
.si-brand-new {
  display: flex;
  align-items: center;
  margin-right: 1.25rem;
}
.si-brand-new .si-brand-logo {
  display: block;
  width: 355px;
  max-width: 44vw;
  height: auto;
}

@media (max-width: 991.98px) {
  .si-brand-new .si-brand-logo { width: 300px; max-width: 70vw; }
}
@media (max-width: 575.98px) {
  .si-brand-new .si-brand-logo { width: 245px; max-width: 72vw; }
}


/* =========================================================
   HAUPTSEITEN – Uebertragung des freigegebenen Index-Masters
   ========================================================= */
body.si-institut-page,
body.si-konzept-page,
body.si-courses-page,
body.si-supervision-page,
body.si-contact-page {
  font-family: var(--si-font);
  color: var(--si-text);
  background: var(--si-white);
}

body.si-institut-page h1, body.si-institut-page h2, body.si-institut-page h3,
body.si-konzept-page h1, body.si-konzept-page h2, body.si-konzept-page h3,
body.si-courses-page h1, body.si-courses-page h2, body.si-courses-page h3,
body.si-supervision-page h1, body.si-supervision-page h2, body.si-supervision-page h3,
body.si-contact-page h1, body.si-contact-page h2, body.si-contact-page h3 {
  font-family: var(--si-font);
}

body.si-institut-page a, body.si-konzept-page a, body.si-courses-page a,
body.si-supervision-page a, body.si-contact-page a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Zentrale Markenwerte: alte CSS-Farbnamen werden auf das Master-System normalisiert. */
body.si-institut-page, body.si-konzept-page, body.si-courses-page,
body.si-supervision-page, body.si-contact-page {
  --petrol: var(--si-petrol);
  --orange: var(--si-orange);
  --cream: var(--si-cream);
  --text: var(--si-text);
}

/* =========================================================
   KURS- & SUPERVISIONSDETAILSEITEN – verbindliches Template
   ========================================================= */
body.si-course-detail-page {
  font-family: var(--si-font);
  color: var(--si-text);
  background: var(--si-white);
  --petrol: var(--si-petrol);
  --orange: var(--si-orange);
  --cream: var(--si-cream);
  --text: var(--si-text);
}
body.si-course-detail-page h1,
body.si-course-detail-page h2,
body.si-course-detail-page h3 { font-family: var(--si-font); }
body.si-course-detail-page a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
body.si-course-detail-page .si-course-detail-inner {
  width: min(var(--si-content-width), calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}
body.si-course-detail-page .si-course-detail-hero {
  background: var(--si-cream);
}
body.si-course-detail-page .si-kicker,
body.si-course-detail-page .si-meta-label { color: var(--si-orange); }
body.si-course-detail-page .si-accent-line { background: var(--si-orange); }
body.si-course-detail-page .si-course-sidebox {
  border-top-color: var(--si-orange);
  background: var(--si-cream-light);
}
body.si-course-detail-page .si-course-cta {
  background: var(--si-orange);
  border-color: var(--si-orange);
  color: var(--si-white);
}
body.si-course-detail-page .si-course-cta:hover,
body.si-course-detail-page .si-course-cta:focus {
  background: var(--si-petrol);
  border-color: var(--si-petrol);
  color: var(--si-white);
}
@media (max-width: 575.98px) {
  body.si-course-detail-page .si-course-detail-inner {
    width: min(var(--si-content-width), calc(100% - 28px));
  }
}