/* Custom font override - Helvetica */
* {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  background-color: #f5f5f0 !important; /* Eggshell/off-white */
  border-top: 3px solid #cf3b73 !important; /* Purple top border */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden;
}

[data-theme="dark"] body {
  background-color: #121212 !important;
}

h1, h2, h3, h4, h5, h6, .post-title, .post-title a {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Only center post-title on about page (section pages) */
article.post .post-title {
  text-align: center !important;
}

.nav, .navbar, nav {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Keep monospace for code */
code, pre, .highlight {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important;
}

/* Header positioning - move logo to left */
#header {
  justify-content: space-between !important;
  padding: 10px 20px !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
  align-items: center !important;
  box-sizing: border-box;
}

.mobile-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* Main navigation. The theme hides .menu below its body width because it
   expects a slideout hamburger; this site shows the links inline instead. */
#header .menu {
  display: block !important;
  align-self: center;
  flex: 1 1 auto;
}

#header .menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35em 1.4em;
  margin: 0;
  padding: 0;
  list-style: none;
}

#header .menu li {
  display: inline-block;
  margin: 0;
}

#header .menu ul li a {
  color: #cf3b73;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95em;
  padding: 8px 4px;
  border-radius: 6px;
  transition: color 0.3s ease;
  white-space: nowrap;
}

#header .menu ul li a:hover {
  color: #b52d61;
  text-decoration: underline;
}

[data-theme="dark"] #header .menu ul li a {
  color: #e66b9c;
}

[data-theme="dark"] #header .menu ul li a:hover {
  color: #f09dbd;
}

/* Header right section */
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
}

.about-link {
  color: #cf3b73;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95em;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.about-link:hover {
  background-color: rgba(207, 59, 115, 0.1);
  color: #b52d61;
}

.mobile-navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.about-link-mobile {
  color: #cf3b73;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9em;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.about-link-mobile:hover {
  background-color: rgba(207, 59, 115, 0.1);
  color: #b52d61;
}

/* Theme toggle button */
.theme-toggle {
  background: transparent;
  border: 2px solid #cf3b73;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: #cf3b73;
  transform: scale(1.1);
}

.theme-toggle-icon {
  display: block;
  line-height: 1;
}

#header .logo {
  margin: 0 !important;
  text-align: left !important;
  padding-left: 0 !important;
}

#header .logo span,
#header .logo {
  font-size: 1.5em;
  font-weight: 600;
  color: inherit;
}

#header .logo a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#header .logo a:hover {
  opacity: 0.8;
}

.mobile-header-logo a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mobile-header-logo a:hover {
  opacity: 0.8;
}

.logo-img {
  height: 140px;
  width: auto;
  display: block;
}

#header .logo-img {
  height: 140px;
}

.mobile-header-logo .logo-img {
  height: 100px;
}

/* Logo will be switched via JavaScript based on theme */

/* Header tagline */
.logo-tagline {
  font-size: 0.39em; /* 60% of 0.65em */
  font-weight: 300;
  font-style: italic;
  color: #cf3b73;
  margin-top: -2px;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  display: block;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

#header .logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-header-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Reduce top margin on main content */
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.post,
article.post {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.post-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* About page specific styles - apply to article.post .post-content but let front page sections override */
article.post .post-content {
  line-height: 1.8 !important;
}

/* Only apply max-width and centering when there are NO front page sections */
article.post .post-content:not(:has(.intro-section)):not(:has(.services-section)) {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Front page sections must NOT be constrained - MUST override parent max-width */
article.post .post-content .intro-section,
article.post .post-content .services-section {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
}

/* Kostenübernahme is a short aside, so keep it narrow and centred rather than
   letting it run the full width of the cards above it. */
article.post .post-content .funding-section {
  max-width: 600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Contact section should match services-section width (1200px) */
article.post .post-content .contact-section {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
}

/* Ensure parent doesn't constrain front page sections */
article.post .post-content:has(.intro-section),
article.post .post-content:has(.services-section) {
  max-width: none !important;
  width: 100% !important;
}

/* Make the subtitle/credentials on about page larger */
article.post .post-content > h3:first-of-type {
  font-size: 1.3em !important;
  font-weight: 500 !important;
  margin-bottom: 1.5em !important;
  margin-top: 0.8em !important;
  color: #cf3b73 !important;
  padding-bottom: 0.5em !important;
  border-bottom: 1px solid rgba(207, 59, 115, 0.3) !important;
  text-align: center !important;
}

/* Improve about page typography and spacing */
article.post .post-content p {
  margin-bottom: 1.2em !important;
  line-height: 1.8 !important;
  color: #333 !important;
}

[data-theme="dark"] article.post .post-content p {
  color: #e8e8e8 !important;
}

/* Long German compounds ("Kinderbewusstseinstraining") otherwise run past the
   viewport on phones, where overflow-x:hidden silently clips them. */
article.post .post-content h1,
article.post .post-content h2,
article.post .post-content h3,
article.post .post-content h4 {
  overflow-wrap: break-word;
  hyphens: auto;
}

article.post .post-content h2 {
  font-size: 2em !important;
  margin-top: 2em !important;
  margin-bottom: 1em !important;
  padding-bottom: 0.5em !important;
  border-bottom: 2px solid #cf3b73 !important;
  color: #cf3b73 !important;
  font-weight: 600 !important;
}

article.post .post-content h3 {
  font-size: 1.5em !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.8em !important;
  color: #cf3b73 !important;
  font-weight: 600 !important;
}

article.post .post-content h4 {
  font-size: 1.3em !important;
  margin-top: 1.2em !important;
  margin-bottom: 0.6em !important;
  color: #444 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] article.post .post-content h4 {
  color: #d0d0d0 !important;
}

article.post .post-content ul,
article.post .post-content ol {
  margin-left: 1.5em !important;
  margin-bottom: 1.2em !important;
  padding-left: 1em !important;
}

article.post .post-content li {
  margin-bottom: 0.8em !important;
  line-height: 1.8 !important;
}

article.post .post-content li strong {
  color: #cf3b73 !important;
  font-weight: 600 !important;
}

article.post .post-content hr {
  border: none !important;
  border-top: 2px solid #cf3b73 !important;
  margin: 2.5em 0 !important;
  opacity: 0.3 !important;
}

article.post .post-content strong {
  font-weight: 600 !important;
  color: #333 !important;
}

[data-theme="dark"] article.post .post-content strong {
  color: #e8e8e8 !important;
}

/* Style links on post pages (like about page) */
.post-content a,
.post a {
  color: #cf3b73 !important;
  text-decoration: underline;
}

.post-content a:hover,
.post a:hover {
  color: #b52d61 !important;
}

.post-content a[href^="tel:"],
.post-content a[href^="mailto:"],
.post a[href^="tel:"],
.post a[href^="mailto:"] {
  color: #cf3b73 !important;
  text-decoration: underline;
}

.post-content a[href^="tel:"]:hover,
.post-content a[href^="mailto:"]:hover,
.post a[href^="tel:"]:hover,
.post a[href^="mailto:"]:hover {
  color: #b52d61 !important;
}

#mobile-panel,
.slideout-panel {
  background-color: #f5f5f0 !important; /* Match eggshell background */
  margin-top: 0 !important;
  padding-top: 0 !important;
}

[data-theme="dark"] #mobile-panel,
[data-theme="dark"] .slideout-panel {
  background-color: #121212 !important;
}

.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 2em !important;
  padding-right: 2em !important;
  margin: 0 auto !important;
  box-sizing: border-box;
  display: block;
}

/* Intro section */
.intro-section {
  max-width: 900px;
  margin: 0 auto 2em;
  text-align: center;
  padding: 0 2em;
  padding-top: 0 !important;
  margin-top: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

.intro-section h1 {
  /* Fluid so "CHAMPKIDZ" never outgrows a narrow viewport and gets clipped */
  font-size: clamp(2.25rem, 11vw, 3.5em);
  margin-bottom: 0.5em;
  margin-top: 0;
  font-weight: 700;
  color: #cf3b73;
  letter-spacing: 0.05em;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.intro-section h2 {
  font-size: 2.2em;
  margin-bottom: 0.3em;
  margin-top: 10px;
  font-weight: 600;
  color: #cf3b73;
}

#weiterbildungen-fur-kinder-in-ihrer-einrichtung {
  margin-top: 10px !important;
}

.intro-section p:first-of-type {
  font-size: 1.1em;
  font-weight: 600;
  color: #222;
  margin: 1em 0;
}

.intro-section p:last-of-type {
  font-size: 1.05em;
  line-height: 1.7;
  color: #333;
  margin-top: 1.5em;
}

/* Services section */
.services-section {
  margin: 2em auto;
  padding: 0;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
  justify-items: stretch;
}

/* Centre a lone card left over on the last row of the 3-column grid */
@media (min-width: 1025px) {
  .services-grid > .service-card:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* Service cards */
.service-card {
  background: #e8e8e8;
  border: 2px solid #f5f5f0;
  border-top: 4px solid #cf3b73;
  border-radius: 12px;
  padding: 1.5em;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  height: 100%;
  box-sizing: border-box;
}

.service-card,
.service-card * {
  text-decoration: none !important;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(207, 59, 115, 0.2);
  border-color: #cf3b73;
  border-top-color: #cf3b73;
  background: #fefefe;
  text-decoration: none;
}

.service-card h3 {
  font-size: 1.4em;
  margin: 0 0 0.5em 0;
  font-weight: 600;
  color: #cf3b73;
  text-decoration: none;
  pointer-events: none;
  flex-shrink: 0;
}

.service-card h3,
.service-card p,
.service-card em {
  pointer-events: none;
  text-decoration: none !important;
}

.service-card em {
  display: block;
  font-style: italic;
  color: #000000;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5;
  flex-shrink: 0;
}

.service-card p {
  margin: 0;
  line-height: 1.6;
  color: #000000;
  font-size: 0.98em;
}

/* Funding section */
.funding-section {
  max-width: 600px;
  margin: 2em auto 2em;
  padding: 1.5em;
  background: #e8e8e8;
  border: 2px solid #f5f5f0;
  border-left: 4px solid #cf3b73;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.1);
}

.funding-section strong {
  display: block;
  font-size: 1.2em;
  margin-bottom: 0.8em;
  color: #cf3b73;
  font-weight: 600;
}

.funding-section p {
  margin: 0;
  line-height: 1.7;
  color: #000000;
}

/* Contact section - match services-section width exactly */
.contact-section {
  margin: 2em auto 2em;
  padding: 1.5em;
  background: #e8e8e8;
  border-radius: 12px;
  text-align: center;
  border: 2px solid #f5f5f0;
  border-top: 4px solid #cf3b73;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

.contact-section > a {
  display: block;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-section > a *:not(a) {
  text-decoration: none !important;
}

.contact-section:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(207, 59, 115, 0.2);
  border-color: #cf3b73;
  border-top-color: #cf3b73;
  background: #fefefe;
}

.contact-section > a:hover {
  text-decoration: none;
}

.contact-section strong {
  display: block;
  font-size: 1.2em;
  margin-bottom: 0.8em;
  font-weight: 600;
  color: #cf3b73;
  pointer-events: none;
}

.contact-section em {
  display: block;
  font-style: italic;
  color: #000000;
  margin-bottom: 2em;
  font-size: 0.95em;
}

.contact-section p {
  margin: 1em 0;
  line-height: 1.8;
  color: #000000;
}

.contact-section > a > a,
.contact-section a[href^="tel:"],
.contact-section a[href^="mailto:"] {
  color: #cf3b73 !important;
  text-decoration: underline !important;
  pointer-events: auto;
  display: inline;
}

.contact-section > a > a,
.contact-section a[href^="tel:"],
.contact-section a[href^="mailto:"] {
  color: #cf3b73 !important;
  text-decoration: underline !important;
  pointer-events: auto;
  display: inline;
}

.contact-section > a > a:hover,
.contact-section a[href^="tel:"]:hover,
.contact-section a[href^="mailto:"]:hover {
  color: #b52d61 !important;
}

.contact-section strong,
.contact-section em {
  pointer-events: none;
  display: block;
  margin-bottom: 0.5em;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .container {
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5em;
    max-width: 100%;
  }
  
  .intro-section {
    padding: 0 1.5em;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 0.75em !important;
    padding-right: 0.75em !important;
  }

  /* Logo centred on its own row, nav and theme toggle sharing the row below,
     so the header stays compact instead of eating a third of the screen. */
  #header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px 10px;
    padding: 8px 12px !important;
  }

  #header .logo {
    flex: 0 0 100%;
    margin: 0 auto !important;
  }

  #header .logo-img,
  .logo-img {
    height: 90px;
  }

  #header .menu {
    flex: 0 1 auto;
  }

  #header .menu ul {
    gap: 0.3em 0.9em;
  }

  #header .menu ul li a {
    font-size: 0.88em;
    padding: 6px 2px;
  }

  .header-right {
    margin: 0 !important;
  }

  .intro-section h2 {
    font-size: 1.6em;
  }
  
  main {
    width: 100%;
  }
  
  .content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  
  .services-section {
    width: 100%;
    padding: 0;
    margin: 2em 0;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5em;
    padding: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .service-card {
    padding: 1.5em;
    width: 100%;
    box-sizing: border-box;
  }
  
  .intro-section {
    padding: 0 0.5em;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .funding-section,
  .contact-section {
    margin-left: auto;
    margin-right: auto;
    padding: 1.5em;
    width: calc(100% - 1.5em);
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] body {
  background-color: #121212 !important;
  color: #e8e8e8;
}

[data-theme="dark"] .service-card {
  background: #1a1a1a;
  border-color: #333;
  border-top-color: #cf3b73;
}

[data-theme="dark"] .service-card:hover {
  background: #222222;
  border-color: #cf3b73;
  border-top-color: #cf3b73;
}

[data-theme="dark"] .service-card h3 {
  color: #e66b9c;
}

[data-theme="dark"] .service-card em {
  color: #ccc;
}

[data-theme="dark"] .service-card p {
  color: #e8e8e8;
}

[data-theme="dark"] .funding-section {
  background: #1a1a1a;
  border-color: #333;
  border-left-color: #cf3b73;
}

[data-theme="dark"] .funding-section strong {
  color: #e66b9c;
}

[data-theme="dark"] .funding-section p {
  color: #e8e8e8;
}

[data-theme="dark"] .contact-section {
  background: #1a1a1a;
  border-color: #333;
  border-top-color: #cf3b73;
}

[data-theme="dark"] .contact-section:hover {
  background: #222222;
  border-color: #cf3b73;
  border-top-color: #cf3b73;
  text-decoration: none;
}

[data-theme="dark"] .contact-section strong {
  color: #e66b9c;
}


[data-theme="dark"] .contact-section em {
  color: #ccc;
}

[data-theme="dark"] .contact-section p {
  color: #e8e8e8;
}

[data-theme="dark"] .intro-section h1 {
  color: #e66b9c;
}

[data-theme="dark"] .intro-section h2,
[data-theme="dark"] .intro-section h3,
[data-theme="dark"] .services-section > h2 {
  color: #e66b9c;
}

[data-theme="dark"] .intro-section p {
  color: #e8e8e8 !important;
}

[data-theme="dark"] .intro-section strong {
  color: #e8e8e8 !important;
}

[data-theme="dark"] .about-link,
[data-theme="dark"] .about-link-mobile {
  color: #e66b9c;
}

/* Dark mode for post page links (like about page) */
[data-theme="dark"] .post-content a,
[data-theme="dark"] .post a {
  color: #e66b9c !important;
}

[data-theme="dark"] .post-content a:hover,
[data-theme="dark"] .post a:hover {
  color: #f09dbd !important;
}

[data-theme="dark"] .post-content a[href^="tel:"],
[data-theme="dark"] .post-content a[href^="mailto:"],
[data-theme="dark"] .post a[href^="tel:"],
[data-theme="dark"] .post a[href^="mailto:"] {
  color: #e66b9c !important;
}

[data-theme="dark"] .post-content a[href^="tel:"]:hover,
[data-theme="dark"] .post-content a[href^="mailto:"]:hover,
[data-theme="dark"] .post a[href^="tel:"]:hover,
[data-theme="dark"] .post a[href^="mailto:"]:hover {
  color: #f09dbd !important;
}

[data-theme="dark"] .about-link:hover,
[data-theme="dark"] .about-link-mobile:hover {
  background-color: rgba(230, 107, 156, 0.15);
  color: #f09dbd;
}

/* Award / news block on the front page */
.news-section {
  max-width: 1200px;
  margin: 2em auto;
  padding: 1.5em;
  background: #e8e8e8;
  border: 2px solid #f5f5f0;
  border-left: 4px solid #cf3b73;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.news-section strong {
  display: block;
  font-size: 1.15em;
  margin-bottom: 0.8em;
  font-weight: 600;
}

/* Beat the theme's generic `.post-content strong` colour rule */
article.post .post-content .news-section strong,
article.post .post-content .funding-section strong {
  color: #cf3b73 !important;
}

[data-theme="dark"] article.post .post-content .news-section strong,
[data-theme="dark"] article.post .post-content .funding-section strong {
  color: #e66b9c !important;
}

.news-section p {
  margin: 0 0 0.8em;
  line-height: 1.7;
  color: #000000 !important;
}

.news-section p:last-child {
  margin-bottom: 0;
}

[data-theme="dark"] .news-section {
  background: #1a1a1a;
  border-color: #333;
  border-left-color: #cf3b73;
}

[data-theme="dark"] .news-section strong {
  color: #e66b9c !important;
}

[data-theme="dark"] .news-section p {
  color: #e8e8e8 !important;
}

/* BNE award label. Guidelines require >=10% clear space around the logo. */
.award-banner {
  text-align: center;
  margin: 1.5em 0 2em;
}

.award-banner img {
  max-width: 100%;
  width: 540px;
  height: auto;
  padding: 10%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 8px;
}

/* Certification mark shown alongside the matching credential */
.credential-logo {
  margin: 1em 0 1.5em;
}

.credential-logo img {
  max-width: 100%;
  width: 380px;
  height: auto;
  padding: 1em;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 8px;
}

/* Photographs with a required credit line */
.award-photo {
  margin: 2em 0;
  text-align: center;
}

.award-photo img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.award-photo figcaption {
  margin-top: 0.8em;
  font-size: 0.85em;
  font-style: italic;
  color: #666;
  line-height: 1.5;
}

[data-theme="dark"] .award-photo figcaption {
  color: #aaa;
}

/* Back link from a course page to the Weiterbildungen overview */
.back-to-overview {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.back-to-overview a {
  color: #cf3b73 !important;
  text-decoration: none !important;
  font-weight: 500;
}

.back-to-overview a:hover {
  text-decoration: underline !important;
  color: #b52d61 !important;
}

[data-theme="dark"] .back-to-overview a {
  color: #e66b9c !important;
}

[data-theme="dark"] .back-to-overview a:hover {
  color: #f09dbd !important;
}

/* Footer / Impressum link */
.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 0 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #666;
}

.site-footer .footer-sep {
  margin: 0 0.5em;
  color: #999;
}

.site-footer .footer-legal a {
  color: #777 !important;
  text-decoration: underline;
}

.site-footer .footer-legal a:hover {
  color: #cf3b73 !important;
}

/* Also support system preference as fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --theme-mode: dark;
  }
}