:root {
  --color-primary: #3A4195;
  --color-primary-hover: #4D549F;
  --color-blue: #0073BB;
  --color-green: #D0E7B2;
  --color-yellow: #FFE799;
  --color-black: #151B1F;
  --color-white: #FFFFFF;
  --color-light: #F0F0F0;
  --color-border: #DDDDDD;
  --color-dark-footer: #151B1F;
  --container-width: 1200px;
  --container-padding: 1.5rem;
  --color-yellow-dark: #FFE799;
  --color-yellow-light: #FFF6DC;
  --color-green-dark: #D0E7B2;
  --color-green-light: #E9F5DA;
  --color-blue-light: #E3F2FB;
}

.frame {
  border-radius: 12px;
  padding: 2rem;
  margin: 1.5rem 0;
}
.frame-yellow-dark  { background: var(--color-yellow-dark); }
.frame-yellow-light { background: var(--color-yellow-light); }
.frame-green-dark   { background: var(--color-green-dark); }
.frame-green-light  { background: var(--color-green-light); }
.frame-blue-light   { background: var(--color-blue-light); }

@font-face {
  font-family: 'SpeziaWeb';
  font-weight: 400;
  src: url('/global/wGlobal/layout/webfonts/SpeziaWeb/SpeziaWeb-Regular.woff2') format('woff2'),
       url('/global/wGlobal/layout/webfonts/SpeziaWeb/SpeziaWeb-Regular.woff') format('woff');
}
@font-face {
  font-family: 'SpeziaWeb';
  font-weight: 600;
  src: url('/global/wGlobal/layout/webfonts/SpeziaWeb/SpeziaWeb-SemiBold.woff2') format('woff2'),
       url('/global/wGlobal/layout/webfonts/SpeziaWeb/SpeziaWeb-SemiBold.woff') format('woff');
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'SpeziaWeb', Arial, sans-serif; color: var(--color-black); line-height: 1.4; }
h1 { font-size: 2rem; font-weight: 700; margin: 1.5rem 0 1rem; }
h2 { font-size: 1.4rem; font-weight: 700; margin: 1.2rem 0 0.8rem; }
h6 { font-size: 0.9rem; font-weight: 400; margin: 0.5rem 0; }
p { margin: 0 0 1rem; }
ul { padding-left: 1.5rem; }
a { color: var(--color-black); text-decoration: underline; }
a:hover { text-decoration: none; }

/* Shared container: header, main, footer align on the same edges */
.header-inner, main, .footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ===== HEADER: one row, logo left, nav+login right ===== */
header { width: 100%; background: var(--color-light); }
.header-inner {
  display: flex;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  gap: 1.5rem;
}
#logo svg { display: block; }
#navigationMain { display: flex; gap: 1.5rem; margin-left: auto; }
#navigationMain a { text-decoration: none; font-weight: 600; white-space: nowrap; }
#navigationMain a.selected { color: var(--color-primary); }
.header-right { display: flex; align-items: center; gap: 1rem; }
.lang-switch { display: flex; gap: 0.35rem; font-size: 0.7rem; opacity: 0.6; }
.lang-switch a { text-decoration: none; }
.lang-switch a.selected { font-weight: 700; opacity: 1; color: var(--color-primary); }

.headerLink {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white) !important;
  padding: 0.45rem 1.25rem;
  border-radius: 10px;
  text-decoration: none !important;
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.9rem;
}
.headerLink:hover { background: var(--color-primary-hover); }

@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; }
  #navigationMain { margin-left: 0; order: 3; width: 100%; justify-content: center; }
}

/* Buttons used elsewhere (CTA, role buttons) */
a.button, .button {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white) !important;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  text-decoration: none !important;
  font-weight: 600;
}
a.button:hover, .button:hover { background: var(--color-primary-hover); }
.button-secondary { background: transparent; color: var(--color-primary) !important; border: 1px solid var(--color-primary); }
.button-secondary:hover { background: var(--color-primary); color: var(--color-white) !important; }

/* ===== Generic text+image side-by-side pairing (items 3 & 5) ===== */
.text-with-image {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}
.text-with-image > .text-col { flex: 1 1 320px; min-width: 280px; }
.text-with-image > .image-col { flex: 1 1 280px; max-width: 400px; }
.text-with-image > .image-col img { width: 100%; height: auto; border-radius: 12px; display: block; }
.text-with-image.reverse { flex-direction: row-reverse; }

/* Home hero */
.hero { padding: 2rem; border-radius: 12px; margin: 1.5rem 0; }
.cta-buttons { display: flex; gap: 1rem; margin: 1rem 0; flex-wrap: wrap; }

/* "So startest du deinen Lernweg" incl. video */
.start-path { background: var(--color-blue); color: var(--color-white); padding: 2rem; border-radius: 12px; margin: 1.5rem 0; }
.start-path h1, .start-path h2 { color: var(--color-white); }
.start-path video {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 12px;
  margin-top: 1rem;
}
.start-path .video-caption { font-size: 0.9rem; opacity: 0.85; margin-top: 0.5rem; }

/* ===== Partner logos, item 4: grouped ===== */
.partners {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.partners > div { flex: 1 1 150px; min-width: 150px; }
.partners .logos-group { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.partners img { max-height: 50px; width: auto; }

/* ===== Lerninhalte, item 6: two-column layout ===== */
.lerninhalte-columns {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.lerninhalte-columns > div { flex: 1 1 340px; min-width: 300px; }

.role-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.role-buttons .button[aria-disabled="true"] {
  background: var(--color-border);
  color: var(--color-black) !important;
  cursor: not-allowed;
}

/* Accordion: small inline icon beside heading, not full-width background */
.wglAccordion .accordionHeader {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--color-light);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.wglAccordion .accordionHeader .accordionIcon {
  width: 28px;
  height: 28px;
  flex: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.accordionContentHidden { display: none; }
.accordionContent { padding: 0 1rem 1rem 1rem; }

/* ===== Footer ===== */
footer { background: var(--color-dark-footer); color: var(--color-white); margin-top: 3rem; }
.footer-inner { padding-top: 2rem; padding-bottom: 2rem; text-align: center; }
footer a { color: var(--color-white); }
footer nav { display: flex; justify-content: center; gap: 1.5rem; margin-top: 0.5rem; }

@media (max-width: 700px) {
  .text-with-image, .text-with-image.reverse { flex-direction: column; }
}

.moodle-login-frame {
  width: 100%;
  max-width: 450px;
  margin: 1.5rem auto 0;
  border-radius: 12px;
  overflow: hidden;
}
.moodle-login-frame iframe {
  width: 100%;
  height: 750px;   /* tall enough for header + form together, no cropping */
  border: none;
  display: block;
}

.hours-badge {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.7;
  white-space: nowrap;
}
.wglAccordion .accordionHeader { justify-content: space-between; }
.module-links { list-style: none; padding-left: 0; }
.module-links li { margin-bottom: 0.5rem; }

/* links inside the dark-blue start-path block need to be visible */
.start-path a { color: var(--color-white); text-decoration: underline; }
.start-path a:hover { text-decoration: none; }

/* logo scaling */
.partners img.logo-scale-150 { max-height: 90px; }   /* ca 175% of the default 50px */
.partners img.logo-scale-75 { max-height: 25px; }   /* was 50px — now 50% of that */