@import url("https://fonts.bunny.net/css?family=ibm-plex-sans:600,700");

:root {
  --blue: #5d7fbe;
  --blue-dark: #275f86;
  --blue-ink: #214f78;
  --blue-light: #edf2f9;
  --blue-lighter: #f7f9fc;
  --orange: #ef8b12;
  --orange-dark: #DA7D00;
  --ink: #252a30;
  --muted: #68717d;
  --line: #d8dee7;
  --white: #fff;
  --shadow: 0 10px 28px rgba(30, 65, 103, .10);
  --radius: 12px;
  --content: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.58; }
img { display: block; max-width: 100%; }
a { color: var(--blue-ink); text-underline-offset: .18em; }
a:hover { color: var(--orange-dark); }
button, input, textarea, select { font: inherit; }
.container { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.narrow { width: min(calc(100% - 2rem), 820px); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: .7rem 1rem; color: #fff; background: var(--blue-ink); }
.skip-link:focus { left: 1rem; top: 1rem; }
.section { padding: clamp(2.7rem, 5vw, 4.6rem) 0; }
.section--soft { background: var(--blue-lighter); }
.section--blue { background: var(--blue-light); }
.section--compact { padding: 2rem 0; }
.eyebrow { margin: 0 0 .45rem; color: var(--orange-dark); font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3, h4 { color: var(--blue); line-height: 1.16; margin-top: 0; }
h1 { font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif; font-size: clamp(2.1rem, 4.4vw, 3.65rem); font-weight: 600; letter-spacing: -.035em; }
h2 { font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif; font-size: clamp(1.295rem, calc(2.45vw - 2pt), 1.925rem); font-weight: 600; letter-spacing: -.018em; }
h3 { font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif; font-size: clamp(1.15rem, 2vw, 1.42rem); font-weight: 600; }
h4 { font-size: 1.04rem; }
p { margin: 0 0 1rem; }
.lead { color: var(--blue-ink); font-size: clamp(1.08rem, 1.7vw, 1.26rem); line-height: 1.48; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }

.site-header { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(93,127,190,.18); background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.header-inner { min-height: 84px; padding-top: .35rem; padding-bottom: .7rem; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 140px; height: auto; }
.nav-toggle { display: none; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .65rem; color: var(--blue-ink); background: #fff; cursor: pointer; }
.site-nav { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 2.2rem); }
.nav-item { position: relative; }
.nav-button { display: inline-flex; align-items: center; gap: .35rem; padding: .65rem .15rem; border: 0; color: var(--blue); background: transparent; font-weight: 400; font-size: .92rem; letter-spacing: .035em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.nav-button:hover, .nav-button[aria-current="page"] { color: var(--orange-dark); }
.nav-button::after { content: "▾"; font-size: .72em; }
.dropdown { position: absolute; top: calc(100% - .1rem); left: 0; width: 258px; padding: .45rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: .17s ease; }
.nav-item:nth-last-child(-n+2) .dropdown { left: auto; right: 0; }
.dropdown a { display: block; padding: .55rem .68rem; border-radius: 7px; color: var(--ink); font-size: .94rem; text-decoration: none; }
.dropdown a:hover, .dropdown a[aria-current="page"] { color: var(--blue-ink); background: var(--blue-light); }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown, .nav-item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.hero { overflow: hidden; background: var(--blue-light); }
.hero-grid { min-height: 320px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.hero-copy { align-self: center; padding: clamp(2.4rem, 5vw, 4.2rem) clamp(1.8rem, 4.5vw, 4rem) clamp(2.4rem, 5vw, 4.2rem) max(1rem, calc((100vw - var(--content))/2)); }
.hero-copy h1 { max-width: 13ch; margin-bottom: 1.25rem; }
.hero-copy p { max-width: 52ch; }
.hero-image { max-height: 360px; min-height: 300px; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; }
.page-hero { background: var(--blue-light); }
.page-hero-grid { min-height: 220px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; }
.page-hero-copy { align-self: center; padding: 2.4rem max(1rem, calc((100vw - var(--content))/2)); padding-right: 2rem; }
.page-hero-copy h1 { margin-bottom: 1.05rem; font-size: clamp(1.95rem, 3.8vw, 3.1rem); max-width: 18ch; }
.page-hero-image { min-height: 220px; max-height: 250px; }
.page-hero-image img { width: 100%; height: 100%; object-fit: cover; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .62rem .9rem; border: 2px solid var(--blue-ink); border-radius: 8px; color: #fff; background: var(--blue-ink); font-weight: 800; text-decoration: none; transition: .15s ease; }
.btn:hover { color: #fff; background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-1px); }
.btn--secondary { color: var(--blue-ink); background: transparent; }
.btn--secondary:hover { color: #fff; }
.btn--small { min-height: 34px; padding: .36rem .58rem; font-size: .84rem; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.card { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 7px 22px rgba(30,65,103,.05); }
.card--link { display: flex; min-height: 190px; flex-direction: column; justify-content: space-between; text-decoration: none; transition: .18s ease; }
.card--link:hover { border-color: var(--orange); box-shadow: var(--shadow); transform: translateY(-2px); }
.card--link h3 { color: var(--ink); }
.card--link strong { color: var(--orange-dark); }
.icon-circle { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 50%; color: var(--blue-ink); background: var(--blue-light); }
.icon-circle svg { width: 32px; height: 32px; stroke: currentColor; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.stat { padding: 1.15rem; border-left: 4px solid var(--orange); background: #fff; }
.stat-number { display: block; color: var(--blue); font-size: 1.7rem; font-weight: 900; line-height: 1; }
.stat-label { display: block; margin-top: .4rem; color: var(--muted); font-size: .9rem; }
.table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: .72rem .68rem; border-bottom: 1px solid rgba(239,139,18,.45); text-align: left; vertical-align: top; }
th { color: var(--ink); font-size: .88rem; }
td { color: #333; }

.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 205px; gap: 3rem; align-items: start; }
.utility-rail { position: sticky; top: 90px; display: grid; gap: .42rem; }
.utility-rail a { padding: .62rem .8rem; border-radius: 8px; color: #fff; background: var(--orange); font-size: 1rem; line-height: 1.25; text-decoration: none; }
.utility-rail a:nth-child(even) { background: var(--orange-dark); }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .38rem; }
.callout { margin: 1.6rem 0; padding: 1.25rem 1.35rem; border-left: 5px solid var(--orange); background: var(--blue-lighter); }
.callout p:last-child { margin-bottom: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.feature { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.feature strong { display: block; margin-bottom: .4rem; color: var(--blue-ink); }
.small-figure { width: min(100%, 470px); margin: 1.5rem auto; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.small-figure img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 7px; }
.small-figure figcaption { padding: .55rem .25rem .05rem; color: var(--muted); font-size: .82rem; }

.module-list { display: grid; gap: .7rem; }
.module { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.module summary { padding: .85rem 1rem; color: var(--blue-ink); font-weight: 800; cursor: pointer; list-style: none; }
.module summary::-webkit-details-marker { display: none; }
.module summary::after { content: "+"; float: right; color: var(--orange-dark); }
.module[open] summary::after { content: "–"; }
.module-body { padding: 0 1rem .95rem; color: #39414a; }
.location-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.4rem; align-items: start; }
.location-list { display: grid; gap: .9rem; }
.location-card { padding: 1.1rem 1.2rem; border-left: 4px solid var(--orange); background: var(--blue-lighter); }
.location-card h3 { margin-bottom: .3rem; color: var(--orange-dark); }
.map-card { position: sticky; top: 90px; width: min(100%, 340px); margin-inline: auto; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.map-card img { width: 100%; max-height: 335px; object-fit: contain; }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.profile { display: grid; grid-template-columns: 58px 1fr; gap: .9rem; align-items: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }
.avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: .95rem; font-weight: 900; }
.profile h3 { margin-bottom: .25rem; }
.profile p { margin-bottom: .45rem; }
.bibliography { display: grid; gap: .85rem; }
.reference { padding: 1rem 1.15rem; border-left: 4px solid var(--blue); background: var(--blue-lighter); }
.reference p { margin: 0; }
.faq-list { display: grid; gap: .7rem; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.faq-question { width: 100%; padding: .9rem 1rem; border: 0; color: var(--blue-ink); background: #fff; font-weight: 800; text-align: left; cursor: pointer; }
.faq-question::after { content: "+"; float: right; color: var(--orange-dark); font-size: 1.15rem; }
.faq-question[aria-expanded="true"]::after { content: "–"; }
.faq-answer { padding: 0 1rem 1rem; }
.faq-answer[hidden] { display: none; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.contact-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.notice { padding: .85rem .95rem; border: 1px solid #efd4aa; border-radius: 9px; background: #fff8ec; color: #62420d; }

.site-footer { padding: 2.8rem 0 1.6rem; border-top: 1px solid var(--line); background: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); gap: 1.5rem; }
.footer-logo { width: 100px; height: auto; margin-bottom: .8rem; }
.footer-heading { margin: 0 0 .55rem; color: var(--blue); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: grid; gap: .2rem; }
.footer-links a { color: var(--blue); font-size: .84rem; text-decoration: none; }
.footer-links a:hover { color: var(--orange-dark); }
.footer-bottom { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }

@media (max-width: 920px) {
  body { font-size: 15.7px; }
  .header-inner { min-height: 74px; padding-top: .25rem; padding-bottom: .5rem; }
  .brand img { width: 122px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; left: 0; top: 100%; width: 100%; display: none; padding: .65rem 1rem .9rem; border-bottom: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
  .site-nav.is-open { display: grid; gap: .15rem; }
  .nav-button { width: 100%; justify-content: space-between; padding: .65rem; }
  .dropdown { position: static; width: 100%; display: none; padding: 0 .45rem .45rem; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  /* V178: Auf Touch-Geräten Untermenüs ausschließlich über den Klickzustand steuern.
     Dadurch kann iOS/Safari keinen hängenbleibenden :hover-Zustand mehr dazwischenfunken. */
  .site-nav .nav-item > .dropdown { display: none; }
  .site-nav .nav-item.is-open > .dropdown { display: block; }
  .site-nav .nav-button { touch-action: manipulation; }
  .hero-grid, .page-hero-grid { grid-template-columns: 1fr; }
  .hero-copy, .page-hero-copy { padding: 2.5rem 1rem; }
  .hero-image { min-height: 245px; max-height: 280px; }
  .page-hero-image { min-height: 190px; max-height: 220px; }
  .card-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .content-layout, .location-layout { grid-template-columns: 1fr; }
  .utility-rail { position: static; grid-template-columns: repeat(2, max-content); }
  .map-card { position: static; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  h1 { font-size: 2.05rem; }
  .hero-image { min-height: 210px; }
  .page-hero-image { min-height: 170px; }
  .stats, .feature-grid, .profile-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  th, td { min-width: 125px; }
  .profile { grid-template-columns: 1fr; }
}
@media print {
  .site-header, .utility-rail, .site-footer, .hero-actions, .nav-toggle { display: none !important; }
  body { font-size: 11pt; }
  .section { padding: 1rem 0; }
  .hero, .page-hero, .section--soft, .section--blue { background: #fff !important; }
  .hero-grid, .page-hero-grid, .content-layout, .location-layout { display: block; }
  .hero-image, .page-hero-image, .map-card { display: none; }
}


/* News-Komponenten */
.page-hero--text { padding: clamp(2.25rem, 4vw, 3.4rem) 0; }
.page-hero--text h1 { max-width: 22ch; margin-bottom: 1.05rem; }
.page-hero--text .lead { max-width: 62ch; margin-bottom: 0; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.35rem; }
.section-heading-row h2 { margin-bottom: 0; }
.news-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.news-preview { display: block; min-height: 210px; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: #fff; box-shadow: 0 7px 22px rgba(30,65,103,.05); text-decoration: none; transition: .18s ease; }
.news-preview:hover { border-color: var(--orange); box-shadow: var(--shadow); transform: translateY(-2px); }
.news-preview h3 { margin: .65rem 0 .6rem; color: #DA7D00; }
.news-meta { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; letter-spacing: 0; }
.news-subhead { color: var(--blue-ink); font-weight: 700; }
.news-list { display: grid; gap: 1.25rem; }
.news-list-item { padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 7px 22px rgba(30,65,103,.05); }
.news-list-item h2 { margin: .45rem 0 .55rem; font-size: clamp(1.325rem, calc(2.5vw - 2pt), 1.875rem); }
.news-list-item h2 a { color: inherit; text-decoration: none; }
.news-list-item h2 a:hover { color: var(--orange-dark); }
.news-list-item .news-subhead { margin-bottom: .8rem; font-size: 1.08rem; }
.news-read-more { color: var(--orange-dark); font-weight: 800; text-decoration: none; }
.news-read-more:hover { color: var(--blue-ink); }
.news-article .page-hero--text .news-meta { margin-bottom: .55rem; }
.news-article .page-hero--text h1 { margin-bottom: 1.05rem; }
.news-intro { margin-bottom: 1.65rem; color: var(--blue-ink); font-size: clamp(1.08rem, 1.65vw, 1.24rem); line-height: 1.55; font-weight: 600; }
.news-back { margin-top: 2.2rem; }

@media (max-width: 920px) {
  .news-home-grid { grid-template-columns: 1fr; }
  .news-preview { min-height: 0; }
}
@media (max-width: 620px) {
  .section-heading-row { align-items: flex-start; flex-direction: column; }
}

/* Optionale News-Bilder */
.news-preview--with-image {
  padding: 0;
  overflow: hidden;
}
.news-preview-media {
  margin: 0;
  aspect-ratio: 16 / 8.55;
  overflow: hidden;
  background: var(--blue-lighter);
}
.news-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}
.news-preview-body {
  padding: 1.15rem 1.35rem 1.35rem;
}
.news-preview-body h3 {
  margin-top: .65rem;
}

.news-list-item--with-image {
  display: grid;
  grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.news-list-media {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius) - 3px);
  background: var(--blue-lighter);
}
.news-list-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 44%;
  transition: transform .25s ease;
}
.news-list-media:hover img {
  transform: scale(1.025);
}

.news-feature-image {
  margin: 1.8rem 0 2rem;
}
.news-feature-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.news-feature-image figcaption {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 760px) {
  .news-list-item--with-image {
    grid-template-columns: 1fr;
  }
  .news-list-media img {
    aspect-ratio: 16 / 9;
  }
}



/* Gesamtupdate Navigation, Typografie und Inhaltsmodule */
.nav-button { font-weight: 400; }
h2 { font-size: clamp(1.295rem, calc(2.45vw - 2pt), 1.925rem); }
.site-header .header-inner { padding-top: .35rem; padding-bottom: .7rem; }
.footer-grid > :first-child { align-self: start; }

/* Formulare */
.application-form { margin-top: 1.4rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-field { display: grid; gap: .35rem; color: var(--blue-ink); font-weight: 700; }
.form-field--full { grid-column: 1 / -1; }
.form-field input, .form-field textarea, .form-field select { width: 100%; padding: .72rem .78rem; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; font-weight: 400; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 3px solid rgba(93,127,190,.22); border-color: var(--blue); }
.regional-form-section { margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.contact-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 320px); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-locations { padding: 1.35rem; background: var(--blue-lighter); border-left: 4px solid var(--orange-dark); }

/* Dozierendenprofile mit Fotos */
.profile-grid--portraits { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.profile--with-photo { grid-template-columns: 1fr; align-content: start; }
.profile-photo-frame { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 9px; background: var(--blue-lighter); }
.profile-photo { width: 100%; height: 100%; object-fit: cover; }
.profile-photo--fabienne { object-position: center 22%; }
.profile-photo--elisabeth { object-position: center 35%; }
.profile-photo--heinz { object-position: center 35%; }

/* Interaktive D-A-CH-Netzwerkkarte */
.network-overview-section { overflow: hidden; }
.network-intro { max-width: 820px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.network-map-stage { width: 100%; max-width: 1040px; margin: 0 auto 0 0; text-align: left; }
.network-map-stage h2 { margin-bottom: 1.1rem; text-align: left; }
.network-map-stage > .eyebrow { text-align: left; }
.network-map { width: 100%; }
.network-map object, .network-map img { display: block; width: 100%; height: auto; border: 0; background: transparent; }
.network-map object { aspect-ratio: 900 / 760; }
.network-map--large { width: 100%; max-width: 980px; margin: .65rem 0 0; }
.map-note { max-width: 980px; margin: .65rem 0 0; color: var(--muted); font-size: .9rem; text-align: left; }
.content-layout--region-map { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(450px, 540px); gap: clamp(1.8rem, 3.5vw, 3.4rem); }
.region-aside { position: sticky; top: 110px; width: 100%; align-self: start; }
.network-map--rail { width: 100%; max-width: 540px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.network-map--rail object { display: block; width: 100%; aspect-ratio: 900 / 760; }

/* Ansprechpartner:innen der regionalen HUBs */
.hub-contact-person { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.hub-contact-photo { overflow: hidden; border-radius: 10px; background: var(--blue-lighter); }
.hub-contact-photo img { width: 100%; max-height: 430px; object-fit: cover; object-position: center top; }

/* News-Übersicht: Bildhöhe folgt auf Desktop der Texthöhe. */
@media (min-width: 761px) {
  .news-list-item--with-image { align-items: stretch; }
  .news-list-item--with-image .news-list-media { position: relative; min-height: 0; }
  .news-list-item--with-image .news-list-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
}

@media (max-width: 1080px) {
  .content-layout--region-map { grid-template-columns: 1fr; }
  .region-aside { position: static; }
  .network-map--rail { width: min(100%, 680px); max-width: 680px; margin-left: 0; margin-right: auto; }
}
@media (max-width: 920px) {
  .profile-grid--portraits { grid-template-columns: 1fr; }
  .contact-page-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .form-grid, .hub-contact-person { grid-template-columns: 1fr; }
  .form-field--full { grid-column: auto; }
  .site-header .header-inner { padding-top: .25rem; padding-bottom: .5rem; }
}

.hub-contact-person .contact-lines { margin-top: 0.4rem; }
.hub-contact-person .contact-line { display: block; margin-top: 0.45rem; }
.hub-contact-person .contact-icon { display: inline-block; width: 1.25rem; margin-right: 0.2rem; color: var(--orange); font-size: 1rem; line-height: 1; vertical-align: -0.05em; }
.hub-contact-person .contact-line a { word-break: break-word; color: var(--orange-dark); text-decoration: none; }
.hub-contact-person .contact-line a:hover { color: var(--orange); text-decoration: none; }
a[href^="mailto:"],
a[href^="tel:"] { color: var(--orange-dark); text-decoration: none; }
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover { color: var(--orange); text-decoration: none; }

/* Hauptnavigation fett, Unternavigation normal */
.site-nav .nav-button {
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.site-nav .dropdown a {
  font-weight: 400;
}

/* Regionalseiten: klare Kontaktstruktur */
.hub-address { font-style: normal; }
.hub-contact-person--compact {
  grid-template-columns: minmax(125px, 165px) minmax(0, 1fr);
  gap: 1.35rem;
  align-items: center;
}
.hub-contact-person--compact .hub-contact-photo {
  width: min(165px, 100%);
  justify-self: start;
}
.hub-contact-person--compact .hub-contact-photo img {
  width: 100%;
  height: auto;
  max-height: 235px;
  object-fit: contain;
  object-position: center top;
}
@media (max-width: 620px) {
  .hub-contact-person--compact { grid-template-columns: 1fr; }
  .hub-contact-person--compact .hub-contact-photo { width: min(155px, 55vw); }
}


/* V14_Test_Karte_v2: Illustrator-Karte im originalen Seitenverhältnis */
.network-map object,
.network-map--rail object {
  aspect-ratio: 3172.58 / 3804;
  height: auto;
}
.network-map object:focus { outline: none; }


/* V14_Test_Karte_v2: Testimonial-Gestaltungsvarianten auf ueber-steep.html */
.testimonial-test-section {
  border-top: 1px solid var(--line);
  background: #fff;
}
.testimonial-test-intro {
  max-width: 790px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.testimonial-test-intro > p:last-child {
  color: var(--muted);
}
.testimonial-variant + .testimonial-variant {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.testimonial-variant-label {
  margin: 0 0 .8rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.testimonial-kicker {
  margin: 0 0 1rem;
  color: var(--blue);
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.testimonial-variant figure,
.testimonial-variant blockquote {
  margin: 0;
}
.testimonial-variant blockquote p {
  margin: 0;
}
.testimonial-variant figcaption {
  display: grid;
  gap: .15rem;
  margin-top: 1.3rem;
  font-style: normal;
}
.testimonial-variant figcaption strong {
  color: var(--blue-ink);
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  font-size: 1rem;
}
.testimonial-variant figcaption span {
  color: var(--muted);
  font-size: .9rem;
}

/* Variante 1: horizontales Band nach dem Aufbau der PowerPoint-Vorlage */
.testimonial-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: clamp(1.5rem, 4vw, 3.6rem);
  align-items: center;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.4rem);
  background: var(--blue-light);
}
.testimonial-band::before {
  content: "”";
  position: absolute;
  top: -.25rem;
  left: 52%;
  color: rgba(93,127,190,.18);
  font-family: Georgia, serif;
  font-size: 9rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.testimonial-band-copy {
  position: relative;
  z-index: 1;
  max-width: 700px;
}
.testimonial-band blockquote {
  padding-left: 1.35rem;
  border-left: 4px solid var(--orange-dark);
  color: var(--blue-ink);
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  font-size: clamp(1.28rem, 2.3vw, 1.85rem);
  line-height: 1.45;
}
.testimonial-band-photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.testimonial-band-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Variante 2: kompakte Profilkarte */
.testimonial-card {
  display: grid;
  grid-template-columns: minmax(230px, 340px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.testimonial-card-photo {
  min-height: 100%;
}
.testimonial-card-photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
}
.testimonial-card-copy {
  position: relative;
  padding: clamp(2rem, 5vw, 3.6rem);
}
.testimonial-card-copy::before {
  content: "“";
  position: absolute;
  top: .6rem;
  right: 1.25rem;
  color: var(--blue-light);
  font-family: Georgia, serif;
  font-size: 7rem;
  line-height: 1;
}
.testimonial-card blockquote {
  position: relative;
  z-index: 1;
  color: var(--blue-ink);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.52;
}
.testimonial-card figcaption {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* Variante 3: kontrastreiche Statementfläche */
.testimonial-statement {
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius);
  background: var(--blue-ink);
  box-shadow: var(--shadow);
}
.testimonial-statement-photo {
  overflow: hidden;
  border: 7px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: var(--blue-light);
}
.testimonial-statement-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: scale(1.18);
}
.testimonial-statement .testimonial-kicker {
  color: #c8d8ee;
}
.testimonial-statement blockquote {
  color: #fff;
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  font-size: clamp(1.32rem, 2.5vw, 2rem);
  line-height: 1.42;
}
.testimonial-statement figcaption strong {
  color: #fff;
}
.testimonial-statement figcaption span {
  color: rgba(255,255,255,.72);
}
.testimonial-statement figcaption::before {
  content: "";
  width: 58px;
  height: 4px;
  margin-bottom: .55rem;
  background: var(--orange-dark);
}

@media (max-width: 760px) {
  .testimonial-band,
  .testimonial-card,
  .testimonial-statement {
    grid-template-columns: 1fr;
  }
  .testimonial-band-photo {
    width: min(100%, 340px);
  }
  .testimonial-band::before {
    left: auto;
    right: 1rem;
  }
  .testimonial-card-photo img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .testimonial-statement-photo {
    width: min(190px, 55vw);
  }
}


/* Finale Testimonial-Variante: Editoriales Band */
.testimonial-final-section {
  border-top: 0;
  background: #fff;
}
.testimonial-final-section .testimonial-variant-label,
.testimonial-final-section .testimonial-test-intro {
  display: none;
}
.testimonial-final-section .testimonial-band {
  margin: 0;
}

/* Dozierendenkarten – wiederhergestellt aus STEEP_Website_V14_Dozierende_komplett_v3 */
.faculty-intro { max-width: 830px; margin-bottom: 2rem; }
.faculty-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.faculty-card { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 1.15rem; min-height: 100%; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 6px 18px rgba(30,65,103,.045); }
.faculty-card--no-photo { grid-template-columns: 1fr; }
.faculty-photo-frame { width: 145px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 9px; background: var(--blue-lighter); }
.faculty-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.faculty-photo--fabienne { object-position: center 20%; }
.faculty-photo--julia { object-position: center 20%; }
.faculty-photo--simon { object-position: center 15%; }
.faculty-photo--elisabeth { object-position: center 28%; }
.faculty-photo--agnes { object-position: 50% 35%; }
.faculty-photo--heidi { object-position: center 18%; }
.faculty-photo--heinz { object-position: center 28%; }
.faculty-photo--gabriele { object-position: center 18%; }
.faculty-photo--eva { object-position: center 18%; }
.faculty-photo--andrea { object-position: center 18%; }
.faculty-photo--doreen { object-position: center 18%; }
.faculty-copy h2 { margin-bottom: .7rem; font-size: clamp(1.095rem, calc(1.7vw - 2pt), 1.375rem); }
.faculty-qualification { margin: 0 0 .8rem; font-size: .94rem; line-height: 1.48; }
.faculty-details { margin: 0; }
.faculty-details > div + div { margin-top: .75rem; }
.faculty-details dt { margin-bottom: .12rem; color: var(--blue-ink); font-size: .77rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.faculty-details dd { margin: 0; font-size: .94rem; line-height: 1.48; }
@media (max-width: 1050px) {
  .faculty-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .faculty-card { grid-template-columns: 100px minmax(0, 1fr); gap: .9rem; padding: 1rem; }
  .faculty-card--no-photo { grid-template-columns: 1fr; }
  .faculty-photo-frame { width: 100px; }
}
@media (max-width: 410px) {
  .faculty-card { grid-template-columns: 1fr; }
  .faculty-photo-frame { width: min(145px, 52vw); }
}


/* News-Übersicht: linksbündig und breiter */
.news-list-container {
  text-align: left;
}
.news-list-container .news-list-copy {
  text-align: left;
}
@media (min-width: 761px) {
  .news-list-container .news-list-item {
    padding: clamp(1.25rem, 2.2vw, 1.65rem);
  }
  .news-list-container .news-list-item--with-image {
    grid-template-columns: minmax(300px, 36%) minmax(0, 1fr);
    gap: clamp(1.35rem, 2.6vw, 2rem);
  }
}


/* V19: Standortkarten auf 90 %, mit großzügigem Abstand zur Textspalte */
.content-layout--region-map {
  grid-template-columns: minmax(0, 1fr) minmax(405px, 486px);
  gap: clamp(2.8rem, 5.3vw, 5rem);
}
.network-map--rail {
  width: 90%;
  max-width: 486px;
  margin-left: auto;
}
.network-overview-aside .map-note {
  width: 90%;
  max-width: 486px;
  margin-left: auto;
}
.network-intro--column {
  max-width: none;
  margin-bottom: 0;
}
.network-course-section {
  padding-top: 0;
}
@media (max-width: 1080px) {
  .content-layout--region-map { grid-template-columns: 1fr; }
  .network-map--rail,
  .network-overview-aside .map-note {
    width: min(90%, 612px);
    max-width: 612px;
    margin-left: 0;
    margin-right: auto;
  }
}
@media (max-width: 620px) {
  .network-map--rail,
  .network-overview-aside .map-note {
    width: 100%;
  }
}


/* V24: weißer Abstand zwischen Startseiten-Hero und News */
.home-hero-spacer {
  height: clamp(1.35rem, 2.8vw, 2.4rem);
  background: #fff;
}

/* V24: einheitliche Kontaktformulare auf allen Standortseiten */
.regional-form-section .form-field select {
  min-height: 46px;
  appearance: auto;
}
.regional-form-section h2 {
  margin-bottom: .7rem;
}


/* V27: Historien-Infokasten auf ueber-steep.html */
.steep-history-box {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.8vw, 2rem);
  align-items: center;
  margin: 2rem 0 2.4rem;
  padding: clamp(1.1rem, 2.5vw, 1.65rem);
  border-radius: 14px;
  background: #fff1dc;
  box-shadow: 0 8px 22px rgba(128, 78, 18, .08);
}
.steep-history-photo { overflow: hidden; border-radius: 10px; }
.steep-history-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.steep-history-copy p { margin: 0; color: var(--ink); font-size: 1.03rem; line-height: 1.62; }
.steep-history-copy p + p { margin-top: .75rem; }
@media (max-width: 680px) {
  .steep-history-box { grid-template-columns: 1fr; }
  .steep-history-photo { width: min(100%, 320px); }
}


/* Kursausschreibung Freiburg */
.course-availability {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: .62rem .88rem;
  border-radius: 9px;
  color: #6f3d00;
  background: #fff0d8;
  font-weight: 800;
}
.course-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1.2rem 0 2.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.course-facts > div {
  display: grid;
  grid-template-columns: minmax(115px, .65fr) minmax(0, 1fr);
  gap: .8rem;
  padding: .78rem .9rem;
  border-bottom: 1px solid var(--line);
}
.course-facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.course-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.course-facts > .course-facts-deadline {
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 1px solid rgba(239,139,18,.45);
  background: var(--blue-lighter);
}
.course-facts dt { color: var(--blue-ink); font-weight: 800; }
.course-facts dd { margin: 0; }
.course-schedule-table { margin: .8rem 0 0; }
.course-schedule-table th:first-child,
.course-schedule-table td:first-child { white-space: nowrap; }
@media (max-width: 680px) {
  .course-facts { grid-template-columns: 1fr; }
  .course-facts > div,
  .course-facts > div:nth-child(odd),
  .course-facts > div:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .course-facts > .course-facts-deadline { grid-column: auto; border-bottom: 0; }
}

/* Kursausschreibung: Stammdaten bewusst ohne Tabellen- oder Rasterdarstellung */
.course-facts-plain { margin: 1.4rem 0 2rem; }
.course-facts-plain p { margin: 0 0 .45rem; }
.course-facts-plain strong { color: var(--blue-ink); }


/* V36: Kursausschreibung mit Standortkarte in der rechten Spalte */
.course-overview-layout { align-items: start; }
.course-content-title {
  margin-bottom: 1.35rem;
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
}
.course-map-aside { padding-top: .35rem; }
.course-details-wide { margin-top: clamp(2.2rem, 4vw, 3.4rem); max-width: none; }
.course-details-wide .regional-form-section { max-width: 900px; }
.course-schedule-table th:nth-child(3),
.course-schedule-table td:nth-child(3) { min-width: 340px; }
@media (max-width: 1080px) {
  .course-map-aside { padding-top: 0; }
  .course-details-wide { margin-top: 2.4rem; }
}
@media (max-width: 760px) {
  .course-schedule-table th:nth-child(3),
  .course-schedule-table td:nth-child(3) { min-width: 270px; }
}

/* V37: hervorgehobene Kursdaten */
.course-highlight-list { margin-top: 1.25rem; }
.course-highlight-list h3 { margin: 1.1rem 0 .2rem; color: var(--blue-ink); font-size: clamp(1.08rem, 1.8vw, 1.28rem); }
.course-highlight-list h3:first-child { margin-top: 0; }
.course-highlight-list p { margin: 0; }
.course-organizer { max-width: 680px; }
.course-organizer a { color: var(--ink); text-decoration: none; font-weight: 400; }
.course-organizer a:hover { color: var(--blue-ink); text-decoration: none; }


/* Rechtliche Inhaltsseiten */
.legal-page h2 { margin-top: 2.7rem; }
.legal-page h3 { margin-top: 2rem; }
.legal-page h4 { margin: 1.45rem 0 .55rem; color: var(--blue-ink); font-size: 1rem; }
.legal-page .legal-address { margin: 0 0 1.25rem; font-style: normal; }
.legal-page .legal-emphasis { margin: 1rem 0 1.5rem; padding: 1.15rem 1.25rem; border-left: 4px solid var(--orange-dark); background: var(--blue-lighter); font-size: .92rem; line-height: 1.55; }
.legal-page ul { padding-left: 1.35rem; }
.legal-page li + li { margin-top: .65rem; }


/* V42: Kursreservierung und persönliche Ansprechpartnerin */
.course-personal-contact-intro { margin-top: 1.5rem; font-weight: 700; color: var(--blue-ink); }
.course-contact-person { margin: 1rem 0 1.8rem; padding-top: 0; border-top: 0; max-width: 620px; }
.course-contact-person h3 { margin-bottom: .45rem; }
.course-contact-person + .application-form { margin-top: 1.2rem; }


/* V44: Historienbild rechts neben dem Content auf ueber-steep.html */
.content-layout--about-history {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: clamp(2.4rem, 4.5vw, 4.5rem);
}
.about-side-rail {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 1.25rem;
  align-self: start;
}
.steep-history-figure {
  margin: 0;
  padding: .85rem;
  border-radius: 14px;
  background: #fff1dc;
  box-shadow: 0 8px 22px rgba(128, 78, 18, .08);
}
.steep-history-figure .steep-history-photo {
  overflow: hidden;
  border-radius: 10px;
}
.steep-history-figure .steep-history-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
.steep-history-figure figcaption {
  padding: .9rem .25rem .15rem;
  color: var(--ink);
  font-size: .94rem;
  line-height: 1.55;
}
.steep-history-figure figcaption p { margin: 0; }
.steep-history-figure figcaption p + p { margin-top: .65rem; }
.utility-rail--nested {
  position: static;
  grid-template-columns: 1fr;
}
@media (max-width: 920px) {
  .content-layout--about-history { grid-template-columns: 1fr; }
  .about-side-rail { position: static; }
  .steep-history-figure { width: min(100%, 430px); }
  .utility-rail--nested { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 520px) {
  .utility-rail--nested { grid-template-columns: 1fr; }
}


/* V45-Korrektur: Historienbild klein im schmalen Hauptcontent */
.about-history-inline::after {
  content: "";
  display: table;
  clear: both;
}
.steep-history-figure--inline {
  float: right;
  width: min(38%, 245px);
  margin: .25rem 0 1.35rem 1.65rem;
  padding: .65rem;
  border-radius: 12px;
}
.steep-history-figure--inline .steep-history-photo {
  border-radius: 8px;
}
.steep-history-figure--inline .steep-history-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.steep-history-figure--inline figcaption {
  padding: .7rem .15rem .1rem;
  font-size: .84rem;
  line-height: 1.48;
}
@media (max-width: 760px) {
  .steep-history-figure--inline {
    float: none;
    width: min(100%, 320px);
    margin: 1rem auto 1.5rem;
  }
}

/* V57: einheitliches Desktop-Raster – 700 px Content, 200 px Abstand, 300 px Assoziationsspalte */
:root {
  --content: 1200px;
  --content-column: 700px;
  --association-column: 300px;
  --content-gap: 200px;
}

.narrow {
  width: min(calc(100% - 2rem), var(--content-column));
}

.content-layout,
.content-layout--region-map,
.content-layout--about-history {
  grid-template-columns: minmax(0, var(--content-column)) minmax(0, var(--association-column));
  gap: var(--content-gap);
}

.content-layout--region-map {
  width: min(calc(100% - 2rem), var(--content));
}

.utility-rail,
.region-aside,
.about-side-rail {
  width: 100%;
  max-width: var(--association-column);
}

.network-map--rail,
.network-overview-aside .map-note {
  width: 100%;
  max-width: var(--association-column);
  margin-left: 0;
  margin-right: 0;
}

/* Zwischenstufe: proportional enger, bevor das Raster einspaltig wird. */
@media (min-width: 921px) and (max-width: 1231px) {
  .content-layout,
  .content-layout--region-map,
  .content-layout--about-history {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: clamp(70px, 12vw, 200px);
  }
}

@media (max-width: 920px) {
  .content-layout,
  .content-layout--region-map,
  .content-layout--about-history {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .utility-rail,
  .region-aside,
  .about-side-rail,
  .network-map--rail,
  .network-overview-aside .map-note {
    width: 100%;
    max-width: 100%;
  }
}


/* V57: Das Raster 700 / 200 / 300 gilt für alle redaktionellen Unterseiten. */
.content-page .section > .container:not(.content-layout):not(.contact-page-layout) > :not(.content-layout):not(.testimonial-variant) {
  width: 100%;
  max-width: var(--content-column);
  margin-left: 0;
  margin-right: auto;
}

/* Schmale Inhaltsseiten und News-Detailseiten links an der 1200-px-Achse ausrichten. */
.content-page .narrow {
  width: min(calc(100% - 2rem), var(--content-column));
  margin-left: max(1rem, calc((100vw - var(--content)) / 2));
  margin-right: auto;
}

/* Kontaktseite verwendet ebenfalls die verbindlichen Spaltenmaße. */
.content-page .contact-page-layout {
  grid-template-columns: minmax(0, var(--content-column)) minmax(0, var(--association-column));
  gap: var(--content-gap);
}
.content-page .contact-locations {
  width: 100%;
  max-width: var(--association-column);
}

/* Explizite Absicherung für Seitenmodule ohne eigenes content-layout. */
.content-page .faculty-intro,
.content-page .faculty-grid,
.content-page .news-list,
.content-page .bibliography,
.content-page .literature-companion,
.content-page .course-details-wide,
.content-page .legal-page > * {
  width: 100%;
  max-width: var(--content-column);
  margin-right: auto;
}

@media (min-width: 921px) and (max-width: 1231px) {
  .content-page .contact-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: clamp(70px, 12vw, 200px);
  }
}

@media (max-width: 920px) {
  .content-page .contact-page-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .content-page .contact-locations {
    max-width: 100%;
  }
  .content-page .narrow {
    margin-left: auto;
    margin-right: auto;
  }
}

/* V48: Historienbild in der Assoziationsspalte; orange CTA-Buttons kompakter. */
.content-layout--about-history .about-side-rail {
  display: grid;
  gap: 1.15rem;
  align-content: start;
}

.content-layout--about-history .steep-history-figure {
  width: 100%;
  max-width: var(--association-column);
}

/* Orange CTAs füllen die 300-px-Spalte nicht vollständig aus. */
.utility-rail {
  justify-items: start;
  align-items: start;
}

.utility-rail a {
  width: auto;
  max-width: 100%;
  padding: .52rem .72rem;
  font-size: .94rem;
}

@media (max-width: 920px) {
  .utility-rail {
    justify-content: start;
  }
}



/* V54: Kontaktseite, konsistente Content-Achse und Detailraster */
.content-page .page-hero--text > .container,
.content-page .page-hero--text > .narrow,
.content-page .section > .container,
.content-page .section > .narrow {
  margin-left: max(1rem, calc((100vw - var(--content)) / 2));
  margin-right: auto;
}

.content-page .container > .content-layout--region-map {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.contact-person-aside {
  position: sticky;
  top: 110px;
  width: 100%;
  max-width: var(--association-column);
  padding: 1.2rem;
  border-left: 4px solid var(--orange-dark);
  background: var(--blue-lighter);
}
.contact-person-aside .eyebrow { margin-bottom: 1rem; }
.contact-person-aside-photo {
  width: min(180px, 100%);
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.contact-person-aside-photo img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  object-position: center top;
}
.contact-person-aside h2 { margin-bottom: .65rem; }
.contact-person-aside .contact-line { display: block; margin-top: .5rem; }
.contact-person-aside .contact-icon { display: inline-block; width: 1.25rem; margin-right: .2rem; color: var(--orange); }
.contact-person-aside a { color: var(--orange-dark); text-decoration: none; word-break: break-word; }
.contact-person-aside a:hover { color: var(--orange); }
.form-grid--contact { grid-template-columns: 1fr; }

@media (max-width: 920px) {
  .contact-person-aside { position: static; max-width: 100%; }
  .content-page .page-hero--text > .container,
  .content-page .page-hero--text > .narrow,
  .content-page .section > .container,
  .content-page .section > .narrow {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* V58: News-Content breiter; H2 websiteweit weitere 2 pt kleiner. */
h2 {
  font-size: clamp(1.128rem, calc(2.45vw - 4pt), 1.758rem);
}
.news-list-item h2 {
  font-size: clamp(1.158rem, calc(2.5vw - 4pt), 1.708rem);
}
.faculty-copy h2 {
  font-size: clamp(.928rem, calc(1.7vw - 4pt), 1.208rem);
}


/* V61: aktuell.html – dedizierte 900-px-Newsliste.
   Die Liste läuft bewusst außerhalb der globalen .container/.news-list-Regeln,
   damit die 700-px-Begrenzung anderer Contentseiten hier nicht greifen kann. */
.news-index-page .news-list-container--wide {
  width: 900px;
  max-width: calc(100% - 2rem);
  margin-left: max(1rem, calc((100vw - var(--content)) / 2));
  margin-right: auto;
  text-align: left;
}

.news-index-page .news-index-list {
  display: grid;
  width: 100%;
  max-width: none;
  gap: 1.25rem;
}

.news-index-page .news-index-list > .news-list-item {
  width: 100%;
  max-width: none;
}

@media (max-width: 920px) {
  .news-index-page .news-list-container--wide {
    width: calc(100% - 2rem);
    max-width: none;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* V62: Hero-Raster – Unterseiten einheitlich, Startseite separat */
:root {
  --subpage-hero-height: 250px;
  --hero-association-offset: 900px;
}

/* Alle Unterseiten: identische Höhe des blauen Hero-Bereichs. */
.content-page .page-hero {
  height: var(--subpage-hero-height);
  min-height: var(--subpage-hero-height);
  overflow: hidden;
}

.content-page .page-hero-grid {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

/* H1 auf Unterseiten 2 pt kleiner. */
.content-page .page-hero h1 {
  font-size: clamp(calc(1.95rem - 2pt), calc(3.8vw - 2pt), calc(3.1rem - 2pt));
}

/* Hero-Fotos der Unterseiten: volle Hero-Höhe, zentrierter Cover-Crop,
   untere linke Ecke mit 7 px Radius. */
.content-page .page-hero-image {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border-radius: 0 0 0 7px;
}

.content-page .page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Text-Heros ohne Bild erhalten dieselbe feste Höhe. */
.content-page .page-hero--text {
  height: var(--subpage-hero-height);
  min-height: var(--subpage-hero-height);
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}

/* Desktop: Bildkante exakt auf Beginn der 300-px-Assoziationsspalte
   (700 px Content + 200 px Abstand = 900 px innerhalb des 1200-px-Rasters). */
@media (min-width: 1232px) {
  .content-page .page-hero-grid,
  .hero-grid {
    grid-template-columns:
      calc(max(1rem, calc((100vw - var(--content)) / 2)) + var(--hero-association-offset))
      minmax(0, 1fr);
  }
}

/* Zwischenbreiten: rechte Bildspalte bleibt 300 px breit. */
@media (min-width: 921px) and (max-width: 1231px) {
  .content-page .page-hero-grid,
  .hero-grid {
    grid-template-columns: minmax(0, calc(100% - 300px)) 300px;
  }
}

/* Startseite: Foto beginnt horizontal ebenfalls an der 900-px-Achse.
   Seine Oberkante liegt auf Höhe der Eyebrow. */
@media (min-width: 921px) {
  .hero {
    --home-hero-top: clamp(2.4rem, 4vw, 3.5rem);
  }

  .hero-grid {
    min-height: 360px;
    align-items: stretch;
  }

  .hero-copy {
    align-self: stretch;
    padding-top: var(--home-hero-top);
    padding-bottom: 3rem;
  }

  .hero-image {
    align-self: stretch;
    min-height: 0;
    max-height: none;
    margin-top: var(--home-hero-top);
    overflow: hidden;
    border-radius: 0 0 0 7px;
  }

  .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* Mobil bleibt die Hero-Struktur einspaltig; die Unterseiten behalten
   untereinander weiterhin dieselbe Höhe. */
@media (max-width: 920px) {
  :root {
    --subpage-hero-height: 250px;
  }

  .content-page .page-hero-grid {
    grid-template-columns: 1fr;
  }

  .content-page .page-hero-image {
    display: none;
  }

  .content-page .page-hero-copy {
    padding: 2rem 1rem;
  }
}

/* V63: Hero-Typobreite, Abstand und Bildradius */
:root {
  --hero-copy-max: 600px;
  --hero-image-offset: 800px; /* 600 px Text + 200 px Abstand */
}

/* Überschrift und Subhero in allen Hero-Varianten maximal 600 px breit. */
.hero-copy h1,
.hero-copy .lead,
.content-page .page-hero-copy h1,
.content-page .page-hero-copy .lead,
.content-page .page-hero--text h1,
.content-page .page-hero--text .lead {
  width: 100%;
  max-width: var(--hero-copy-max);
}

/* Desktop: 200 px Abstand zwischen maximal 600 px breitem Textblock
   und der linken Bildkante. */
@media (min-width: 1232px) {
  .content-page .page-hero-grid,
  .hero-grid {
    grid-template-columns:
      calc(max(1rem, calc((100vw - var(--content)) / 2)) + var(--hero-image-offset))
      minmax(0, 1fr);
  }
}

/* Zwischenbreiten: proportionaler Bildanteil, ohne die mobile Darstellung zu ändern. */
@media (min-width: 921px) and (max-width: 1231px) {
  .content-page .page-hero-grid,
  .hero-grid {
    grid-template-columns: minmax(0, calc(100% - 400px)) 400px;
  }
}

/* Deutlich stärker gerundete linke untere Bildecke. */
.content-page .page-hero-image,
.hero-image {
  border-radius: 0 0 0 40px;
}

/* V64: Hero-Bildhöhe Startseite und dauerhaft sichtbarer 60-px-Radius */
/* Alle Hero-Fotos: linke untere Ecke deutlich gerundet und im Container sichtbar. */
.content-page .page-hero-image,
.hero-image {
  overflow: hidden;
  border-radius: 0 0 0 60px;
}

/* Startseite Desktop: Das Foto reicht von der Oberkante der Eyebrow
   bis zur Unterkante der CTA-Zeile (Kurskalender). */
@media (min-width: 921px) {
  .hero-grid {
    min-height: 0;
  }

  .hero-copy {
    padding-bottom: 3rem;
  }

  .hero-image {
    align-self: stretch;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-top: var(--home-hero-top);
    margin-bottom: 3rem;
  }
}

/* Unterseiten: Radius bleibt auch am unteren Hero-Rand vollständig sichtbar. */
.content-page .page-hero-image {
  position: relative;
  z-index: 1;
}

/* V65: Hero insgesamt 10 px weiter vom Header/Logo abrücken. */
.hero,
.page-hero {
  margin-top: 10px;
}

/* V66: Header-Feinjustierung oberhalb des Hero */
/* Der horizontale Trennstrich sitzt 5 px tiefer, ohne Logo und Headerinhalt mitzuschieben. */
.site-header {
  border-bottom: 0;
  position: sticky;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: rgba(93,127,190,.18);
  pointer-events: none;
}

/* Hauptnavigation auf Desktop 5 px tiefer positionieren. */
@media (min-width: 921px) {
  .site-header .site-nav {
    position: relative;
    top: 5px;
  }
}


/* V67: Hero- und Inhaltsanpassungen vom 09.08.2026 */
/* Trennlinie zwischen Logo/Header und Hero weitere 5 px nach unten (insgesamt 10 px). */
.site-header::after {
  bottom: -10px;
}

/* News-Detail mit Bild-Hero: Datum harmonisch innerhalb der Hero-Typografie. */
.news-article .page-hero-copy .news-meta {
  margin-bottom: .45rem;
}
.news-article .page-hero-copy h1 {
  margin-bottom: .85rem;
}

/* So arbeitet STEEP™: Programmebenen als eigenständige, selbstbewusste 1200-px-Zeile. */
.so-arbeitet-page .programme-levels {
  width: min(calc(100% - 2rem), 1200px);
  margin: clamp(2.7rem, 5vw, 4rem) auto 0;
}
.so-arbeitet-page .programme-levels h2 {
  margin: 0 0 1.3rem;
}
.so-arbeitet-page .feature-grid--wide {
  width: 100%;
  max-width: 1200px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}
.so-arbeitet-page .feature-grid--wide .feature {
  min-height: 100%;
  padding: 1.45rem 1.35rem 1.55rem;
  border: 1px solid rgba(93,127,190,.42);
  border-top: 5px solid var(--orange);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, var(--blue-lighter) 100%);
  box-shadow: 0 10px 24px rgba(30,65,103,.09);
  color: #303841;
  line-height: 1.55;
}
.so-arbeitet-page .feature-grid--wide .feature strong {
  margin-bottom: .75rem;
  color: var(--blue-ink);
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.25;
}
@media (max-width: 1040px) {
  .so-arbeitet-page .feature-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .so-arbeitet-page .programme-levels {
    margin-top: 2.2rem;
  }
  .so-arbeitet-page .feature-grid--wide {
    grid-template-columns: 1fr;
  }
  .so-arbeitet-page .feature-grid--wide .feature {
    padding: 1.3rem 1.2rem 1.4rem;
  }
}

/* Dozierende: Steckbriefe auf 900 px Breite. */
.dozierende-page .faculty-grid {
  width: 900px;
  max-width: min(900px, calc(100vw - 2rem));
}
@media (max-width: 920px) {
  .dozierende-page .faculty-grid {
    width: 100%;
    max-width: 100%;
  }
}

/* Gesetzliche Bezüge: Aufzählung mit lesbarer Binnenstruktur. */
.legal-references-list > li {
  margin-bottom: 1.2rem;
}
.legal-references-list > li > strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--blue-ink);
}
.legal-references-list > li > p:last-child {
  margin-bottom: 0;
}

/* Der längere Freiburg-News-Hero bleibt innerhalb der einheitlichen 250-px-Höhe. */
.news-article .page-hero-copy {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

/* V68: Headerlinie, Dozierendenbreite und Copy-Typografie */
/* Trennlinie gegenüber V67 wieder 5 px nach oben; sie liegt hinter Navigation/Dropdowns. */
.site-header::after {
  bottom: -5px;
  z-index: 0;
}
.site-header .header-inner {
  position: relative;
  z-index: 1;
}
.site-header .dropdown {
  z-index: 10;
}

/* Dozierenden-Steckbriefe: echte 900-px-Spalte, unabhängig von der globalen 700-px-Regel. */
.dozierende-page .section > .container > .faculty-grid {
  width: 900px !important;
  max-width: min(900px, calc(100vw - 2rem)) !important;
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 920px) {
  .dozierende-page .section > .container > .faculty-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Copy: 1 pt größer und bewusst dunkelgrau statt nahezu schwarz. */
:root {
  --ink: #3f454b;
}
@media screen and (min-width: 921px) {
  body {
    font-size: calc(16px + 1pt);
  }
}
@media screen and (max-width: 920px) {
  body {
    font-size: calc(15.7px + 1pt);
  }
}
.faculty-qualification,
.faculty-details dd {
  font-size: calc(.94rem + 1pt);
}


/* V69: Hero bleibt beim Scrollen vollständig stehen. */
:root {
  --sticky-header-height: 84px;
  --sticky-hero-gap: 10px;
}

/* Der komplette Hero bleibt direkt unter Header und bestehendem Abstand fixiert,
   während der nachfolgende Seiteninhalt darunter weiter scrollt. */
.hero,
.page-hero {
  position: sticky;
  top: calc(var(--sticky-header-height) + var(--sticky-hero-gap));
  z-index: 20;
}

/* Header und Dropdown-Navigation bleiben immer über dem fixierten Hero. */
.site-header {
  z-index: 1000;
}

@media (max-width: 920px) {
  :root {
    --sticky-header-height: 74px;
  }
}

@media print {
  .hero,
  .page-hero {
    position: static !important;
    top: auto !important;
  }
}

/* V70: Sticky-Hero nur auf Unterseiten; Separator als Bestandteil des Hero. */
:root {
  --hero-separator-offset: 5px;
  --hero-white-gap: 10px;
  --sticky-association-gap: 18px;
}

/* Die bisherige Header-Linie entfällt. Die Linie gehört ab jetzt zum Hero. */
.site-header::after {
  content: none !important;
}

/* Weißer Zwischenraum ist Bestandteil des Hero und damit nicht transparent.
   Die Trennlinie sitzt 5 px unter der Hero-Oberkante, die blaue Fläche beginnt
   weitere 5 px darunter. */
.hero,
.page-hero {
  margin-top: 0;
  padding-top: var(--hero-white-gap);
  position: relative;
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff var(--hero-white-gap),
    var(--blue-light) var(--hero-white-gap),
    var(--blue-light) 100%
  );
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: var(--hero-separator-offset);
  height: 1px;
  background: rgba(93,127,190,.18);
  pointer-events: none;
}

/* Die Startseite scrollt wieder vollständig mit. */
body:not(.content-page) .hero {
  position: relative;
  top: auto;
  z-index: auto;
}

/* Unterseiten: der komplette Hero inkl. weißem Abstand und Trennlinie bleibt stehen. */
.content-page .page-hero {
  position: sticky;
  top: var(--sticky-header-height);
  z-index: 20;
  height: calc(var(--subpage-hero-height) + var(--hero-white-gap));
  min-height: calc(var(--subpage-hero-height) + var(--hero-white-gap));
  overflow: visible;
}

.content-page .page-hero-grid {
  height: var(--subpage-hero-height);
  min-height: var(--subpage-hero-height);
}

/* Text-Heros ohne Bild behalten ebenfalls 250 px blaue Fläche plus 10 px weißen Hero-Kopf. */
.content-page .page-hero--text {
  height: calc(var(--subpage-hero-height) + var(--hero-white-gap));
  min-height: calc(var(--subpage-hero-height) + var(--hero-white-gap));
  padding-top: var(--hero-white-gap);
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff var(--hero-white-gap),
    var(--blue-light) var(--hero-white-gap),
    var(--blue-light) 100%
  );
}

/* Sticky-Assoziationselemente bleiben unterhalb des feststehenden Hero sichtbar. */
.content-page .utility-rail,
.content-page .region-aside,
.content-page .contact-person-aside,
.content-page .about-side-rail {
  top: calc(
    var(--sticky-header-height) +
    var(--subpage-hero-height) +
    var(--hero-white-gap) +
    var(--sticky-association-gap)
  );
}

/* Reine CTA-Spalten werden per JS exakt an der Oberkante des ersten Copy-Absatzes
   nach der ersten H2 ausgerichtet. */
.content-page .content-layout > .utility-rail {
  align-self: start;
}

/* Auf „Was ist STEEP™?“ bleibt die komplette Assoziationsspalte (Foto + CTAs)
   beim Scrollen sichtbar. */
.content-page .about-side-rail {
  position: sticky;
  align-self: start;
}

@media (max-width: 920px) {
  .content-page .page-hero {
    position: sticky;
    top: var(--sticky-header-height);
  }

  .content-page .utility-rail,
  .content-page .region-aside,
  .content-page .contact-person-aside,
  .content-page .about-side-rail {
    position: static;
    top: auto;
    margin-top: 0 !important;
  }
}

@media print {
  .hero,
  .page-hero {
    position: static !important;
    top: auto !important;
  }
}

/* V73: Startseiten-Hero dynamisch bis Unterkante „Kurskalender“ */
/* Desktop/Tablet: Bildoberkante = Eyebrow; Bildunterkante = Unterkante der CTA-Zeile. */
@media (min-width: 921px) {
  body:not(.content-page) .hero-copy {
    padding-top: var(--home-hero-top);
    padding-bottom: 3rem;
  }
  body:not(.content-page) .hero-image {
    margin-top: var(--home-hero-top);
    margin-bottom: 3rem;
    min-height: 0;
    max-height: none;
    height: auto;
    align-self: stretch;
  }
}

/* Schmale Viewports: Bild bleibt neben dem Hero-Text, damit seine Unterkante
   unabhängig von Umbrüchen immer exakt mit dem letzten CTA („Kurskalender“) endet. */
@media (max-width: 920px) {
  body:not(.content-page) .hero-grid {
    position: relative;
    display: block;
    min-height: 0;
  }
  body:not(.content-page) .hero-copy {
    padding: 2.5rem calc(clamp(120px, 34vw, 260px) + 1rem) 2.5rem 1rem;
  }
  body:not(.content-page) .hero-image {
    position: absolute;
    top: 2.5rem;
    right: 0;
    bottom: 2.5rem;
    width: clamp(120px, 34vw, 260px);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    border-radius: 0 0 0 60px;
  }
}

/* Dozierendenfoto Lothar Unzner */
.faculty-photo--lothar { object-position: center top; }

/* V74: Hero, Contentabstand, Dozierendenprofile und Assoziationsspalten */

/* Alle Hero-Bilder: Radius links unten um weitere 5 px vergrößert. */
.content-page .page-hero-image,
.hero-image {
  border-radius: 0 0 0 65px;
}

/* Startseite: Bildhöhe wird allein vom eigentlichen Hero-Inhalt bestimmt.
   Ohne unteren Innen-/Außenabstand endet das Bild exakt an der Unterkante
   der CTA-Zeile (inkl. „Kurskalender“) – auch auf sehr breiten Displays. */
@media (min-width: 921px) {
  body:not(.content-page) .hero-grid {
    min-height: 0;
    align-items: stretch;
  }
  body:not(.content-page) .hero-copy {
    padding-bottom: 0;
  }
  body:not(.content-page) .hero-image {
    align-self: stretch;
    min-height: 0;
    max-height: none;
    height: auto;
    margin-top: var(--home-hero-top);
    margin-bottom: 0;
  }
}

/* Unterseiten: Abstand zwischen Hero und erstem Contentblock um 50 px reduzieren. */
.content-page main > .page-hero + .section {
  padding-top: max(0px, calc(clamp(2.7rem, 5vw, 4.6rem) - 50px));
}

/* Dozierende: mehr Luft rund um die Portraits; der zusätzliche Raum rechts
   wird bewusst der Textspalte entnommen. Gesamtbreite bleibt 900 px. */
@media (min-width: 561px) {
  .dozierende-page .faculty-card {
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 2rem;
    padding: 1.5rem 1.75rem;
  }
  .dozierende-page .faculty-photo-frame {
    width: 145px;
    margin: .2rem 0 0 .15rem;
  }
}

/* News-Linktypografie wie der Linktext in den Quicklink-Karten der Startseite. */
.news-index-page .news-read-more {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  letter-spacing: normal;
}

/* V75: Startseiten-Hero exakt zwischen Eyebrow und CTA-Unterkante */
/* Das Hero-Bild ist auf Desktop aus dem Grid-Flow genommen. Dadurch kann seine
   intrinsische Bildhöhe die Hero-Höhe auch auf sehr breiten Displays nicht mehr
   vergrößern. Seine Oberkante entspricht der Eyebrow-Oberkante; die Unterkante
   liegt exakt an der Unterkante der CTA-Zeile inklusive „Kurskalender“. */
@media (min-width: 921px) {
  body:not(.content-page) .hero-grid {
    position: relative;
    min-height: 0;
  }

  body:not(.content-page) .hero-copy {
    grid-column: 1;
    padding-top: var(--home-hero-top);
    padding-bottom: 0;
  }

  body:not(.content-page) .hero-image {
    position: absolute;
    top: var(--home-hero-top);
    right: 0;
    bottom: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
  }
}

@media (min-width: 1232px) {
  body:not(.content-page) .hero-image {
    left: calc(max(1rem, calc((100vw - var(--content)) / 2)) + var(--hero-image-offset));
    width: auto;
  }
}

@media (min-width: 921px) and (max-width: 1231px) {
  body:not(.content-page) .hero-image {
    left: calc(100% - 400px);
    width: auto;
  }
}

/* Platzhalterportrait Viola Bertschinger */
.faculty-photo--viola {
  object-position: center center;
}

/* V78: Startseiten-Hero, Portraits sowie Weißstreifen + Fade unter allen Hero-Flächen */
:root {
  --home-hero-extension: 50px;
  --hero-opaque-strip-height: 15px;
  --hero-fade-height: 50px;
}

/* Startseite: Die blaue Hero-Fläche wird ausschließlich nach unten um 50 px
   verlängert. Text, Buttons und Bild behalten ihre bisherige Position; insbesondere
   endet das Bild weiterhin an der Unterkante der CTA-Zeile („Kurskalender“). */
body:not(.content-page) .hero {
  padding-bottom: var(--home-hero-extension);
}

/* Der zusätzliche blaue Bereich liegt außerhalb des Hero-Grids. Dadurch bleiben
   die absoluten Bildgrenzen auf Desktop sowie die mobile Hero-Komposition stabil. */
@media (max-width: 920px) {
  body:not(.content-page) .hero {
    padding-bottom: var(--home-hero-extension);
  }
}

/* Unter allen Hero-Flächen liegt zuerst ein 15 px hoher opaker Weißstreifen,
   anschließend der 75 px hohe Fadebereich bis vollständig transparent.
   Auf sticky Unterseiten blendet so der hochscrollende Content weich aus. */
.hero,
.page-hero {
  overflow: visible;
}

.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * (var(--hero-opaque-strip-height) + var(--hero-fade-height)));
  height: calc(var(--hero-opaque-strip-height) + var(--hero-fade-height));
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,1) 0,
    rgba(255,255,255,1) var(--hero-opaque-strip-height),
    rgba(255,255,255,0) 100%
  );
}

/* Portrait-Platzhalter: neutral mittig zuschneiden. */
.faculty-photo--baerbel {
  object-position: center center;
}

/* V80: STEEP™ regional – breitere Assoziationsspalte für die Standortkarte */
@media (min-width: 1232px) {
  .regional-page .content-layout--region-map {
    grid-template-columns: minmax(0, 700px) minmax(0, 400px);
    gap: 100px;
  }

  .regional-page .region-aside,
  .regional-page .network-overview-aside,
  .regional-page .network-map--rail,
  .regional-page .network-overview-aside .map-note {
    width: 100%;
    max-width: 400px;
  }
}

/* Zwischenbreiten: die Karte erhält weiterhin mehr Raum als im Standardraster. */
@media (min-width: 921px) and (max-width: 1231px) {
  .regional-page .content-layout--region-map {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: clamp(50px, 8vw, 100px);
  }

  .regional-page .region-aside,
  .regional-page .network-overview-aside,
  .regional-page .network-map--rail,
  .regional-page .network-overview-aside .map-note {
    width: 100%;
    max-width: 400px;
  }
}



/* V84: Dozierende – erster Contentabstand explizit wie auf allen Unterseiten. */
.dozierende-page main > .page-hero + .section {
  padding-top: max(0px, calc(clamp(2.7rem, 5vw, 4.6rem) - 50px)) !important;
}


/* V85: Contentabstände, eingebetteter Kurskalender und Anmeldung-CTA */
/* Dozierende: erster H2-Abstand exakt wie der erste H2 in .prose (z.B. qualifikationsziel.html). */
.dozierende-page main > .page-hero + .section > .container > h2:first-child {
  margin-top: 2.5rem;
}

/* Netzwerk: eingebetteter Kurskalender nutzt die komplette 1200-px-Seitenbreite. */
.regional-page .network-course-section > .container > .table-wrap {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Freiburg-Kurs: Anmeldung als orange primäre Aktion. */
.btn--orange {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}
.btn--orange:hover {
  color: #fff;
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

/* Neue erste Contentüberschriften orientieren sich am Standardabstand der Prose-Seiten. */
.literatur-page main > .page-hero + .section > .container > h2:first-child,
.news-index-page main > .page-hero + .section .news-list-container--wide > h2:first-child {
  margin-top: 2.5rem;
}


/* V86: Kursausschreibung Freiburg – 700 / 100 / 400 und Kontakt in der Assoziationsspalte */
@media (min-width: 1232px) {
  .anmeldung-freiburg-page .content-layout--application-freiburg {
    grid-template-columns: minmax(0, 700px) minmax(0, 400px);
    gap: 100px;
    width: 100%;
  }
  .anmeldung-freiburg-page .application-contact-aside {
    width: 100%;
    max-width: 400px;
  }
}

@media (min-width: 921px) and (max-width: 1231px) {
  .anmeldung-freiburg-page .content-layout--application-freiburg {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: clamp(50px, 8vw, 100px);
  }
  .anmeldung-freiburg-page .application-contact-aside {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 920px) {
  .anmeldung-freiburg-page .content-layout--application-freiburg {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .anmeldung-freiburg-page .application-contact-aside {
    max-width: 100%;
  }
}

.anmeldung-freiburg-page .course-reservation-heading {
  margin-top: 2.4rem;
}

.anmeldung-freiburg-page .application-form {
  margin-top: 1.5rem;
}


/* V90: Curriculum – 900 px, zweispaltig, ohne Outlines, Blauabstufung */
.curriculum-page .curriculum-intro-layout {
  margin-bottom: 2.3rem;
}

.curriculum-page .curriculum-tables {
  width: min(calc(100% - 2rem), 900px);
  max-width: 900px;
  margin-left: max(1rem, calc((100vw - var(--content)) / 2));
  margin-right: auto;
  display: grid;
  gap: 1.9rem;
}

.curriculum-course {
  --curriculum-bg: #eef6fb;
  background: var(--curriculum-bg);
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.curriculum-course--2 { --curriculum-bg: #e2eff7; }
.curriculum-course--3 { --curriculum-bg: #d6e8f3; }
.curriculum-course--4 { --curriculum-bg: #c9e0ee; }

.curriculum-course-heading {
  margin: 0;
  padding: 1rem 1.15rem .8rem;
  color: var(--orange-dark);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1.22rem;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
  background: var(--curriculum-bg);
}

.curriculum-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.curriculum-table {
  width: 100%;
  min-width: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: #4a4f55;
  background: var(--curriculum-bg);
}

.curriculum-table th,
.curriculum-table td {
  border: 0;
  outline: 0;
  padding: 1rem 1.15rem 1.15rem;
  vertical-align: top;
  text-align: left;
  background: transparent;
}

.curriculum-module-meta {
  width: 185px;
  padding-right: 1.4rem !important;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  line-height: 1.45;
  color: #3f4a53;
}

.curriculum-module-meta strong,
.curriculum-module-meta span {
  display: block;
}

.curriculum-module-meta strong {
  margin-bottom: .2rem;
  color: var(--blue-ink);
  font-weight: 700;
}

.curriculum-content h3.curriculum-module-title {
  margin: 0 0 .7rem;
  font-size: 1.14rem;
  line-height: 1.32;
  color: #343d45;
}

.curriculum-content h4.curriculum-subhead {
  margin: .85rem 0 .18rem;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  color: #343d45;
}

.curriculum-content p {
  margin: 0 0 .55rem;
  line-height: 1.55;
}

.curriculum-content p:last-child { margin-bottom: 0; }

@media (max-width: 920px) {
  .curriculum-page .curriculum-tables {
    width: calc(100% - 2rem);
    max-width: none;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

@media (max-width: 680px) {
  .curriculum-page .curriculum-tables { gap: 1.25rem; }
  .curriculum-course-heading {
    padding: .9rem 1rem .7rem;
    font-size: 1.08rem;
  }
  .curriculum-table,
  .curriculum-table tbody,
  .curriculum-table tr,
  .curriculum-table td {
    display: block;
    width: 100%;
  }
  .curriculum-table tr {
    padding: .35rem 0 .5rem;
  }
  .curriculum-module-meta {
    width: 100%;
    padding: .8rem 1rem .25rem !important;
  }
  .curriculum-content {
    padding: .35rem 1rem 1rem !important;
  }
}


/* V91: Curriculum – tatsächliche Tabellenbreite 900 px */
.curriculum-page .section > .container.curriculum-tables {
  width: min(calc(100% - 2rem), 900px) !important;
  max-width: 900px !important;
}
.curriculum-page .section > .container.curriculum-tables > .curriculum-course {
  width: 100% !important;
  max-width: none !important;
}
.curriculum-page .curriculum-table-wrap,
.curriculum-page .curriculum-table {
  width: 100% !important;
  max-width: none !important;
}

/* V92: Curriculum – hellerer Blauverlauf, Modulabstände und Typohierarchie */
.curriculum-course { --curriculum-bg: #f2f7fb; }
.curriculum-course--2 { --curriculum-bg: #edf5fa; }
.curriculum-course--3 { --curriculum-bg: #e7f1f8; }
.curriculum-course--4 { --curriculum-bg: #e1edf6; }

/* Größerer Abstand zwischen Modulen mit eingerückter weißer Trennlinie. */
.curriculum-table tbody tr + tr {
  background-image: linear-gradient(
    to right,
    transparent 1.15rem,
    rgba(255,255,255,.98) 1.15rem,
    rgba(255,255,255,.98) calc(100% - 1.15rem),
    transparent calc(100% - 1.15rem)
  );
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 1px;
}
.curriculum-table tbody tr + tr td {
  padding-top: calc(1rem + 10pt);
}

/* Modulnummer und Modultitel: 2 pt größer, blau. */
.curriculum-module-meta strong {
  font-size: calc(1rem + 2pt);
  line-height: 1.3;
  color: var(--blue);
}
.curriculum-content h3.curriculum-module-title {
  font-size: calc(1.14rem + 2pt);
  color: var(--blue);
}

@media (max-width: 680px) {
  .curriculum-table tbody tr + tr {
    background-image: linear-gradient(
      to right,
      transparent 1rem,
      rgba(255,255,255,.98) 1rem,
      rgba(255,255,255,.98) calc(100% - 1rem),
      transparent calc(100% - 1rem)
    );
  }
  .curriculum-table tbody tr + tr td:first-child {
    padding-top: calc(.8rem + 10pt) !important;
  }
}

/* V93: Curriculum – Kursüberschriften außerhalb, einzelne Modulboxen */
.curriculum-page .curriculum-course {
  background: transparent;
  overflow: visible;
}

.curriculum-page .curriculum-course-heading {
  padding: 0;
  margin: 0 0 14px;
  background: transparent;
}

.curriculum-page .curriculum-table-wrap {
  overflow: visible;
}

.curriculum-page .curriculum-table,
.curriculum-page .curriculum-table tbody {
  display: block;
  width: 100% !important;
  background: transparent;
}

.curriculum-page .curriculum-table tbody {
  display: grid;
  gap: 20px;
}

.curriculum-page .curriculum-table tr,
.curriculum-page .curriculum-table tbody tr + tr {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  width: 100%;
  background: var(--curriculum-bg);
  background-image: none;
  border: 0;
  outline: 0;
  border-radius: 0 50px 0 0;
  overflow: hidden;
}

.curriculum-page .curriculum-table th,
.curriculum-page .curriculum-table td,
.curriculum-page .curriculum-table tbody tr + tr td {
  display: block;
  width: auto;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  padding-top: 1rem;
  padding-bottom: 1.15rem;
}

.curriculum-page .curriculum-module-meta {
  width: auto;
  padding-left: calc(1.15rem + 15px) !important;
  padding-right: 1.1rem !important;
}

.curriculum-page .curriculum-content {
  padding-left: 1.1rem !important;
  padding-right: calc(1.15rem + 15px) !important;
}

@media (max-width: 680px) {
  .curriculum-page .curriculum-course-heading {
    padding: 0;
    margin-bottom: 12px;
  }

  .curriculum-page .curriculum-table tbody {
    gap: 20px;
  }

  .curriculum-page .curriculum-table tr,
  .curriculum-page .curriculum-table tbody tr + tr {
    display: block;
    width: 100%;
    border-radius: 0 50px 0 0;
    padding: 0;
  }

  .curriculum-page .curriculum-module-meta,
  .curriculum-page .curriculum-table tbody tr + tr td:first-child {
    width: 100%;
    padding: 1rem 1.2rem .3rem !important;
  }

  .curriculum-page .curriculum-content {
    padding: .35rem 1.2rem 1.1rem !important;
  }
}

/* V94: Curriculum – Hero, Modulboxen und Abstände */
.curriculum-page .curriculum-tables {
  gap: 60px;
}

.curriculum-page .curriculum-table tr,
.curriculum-page .curriculum-table tbody tr + tr {
  grid-template-columns: 165px minmax(0, 1fr);
  border-radius: 0 0 0 50px;
}

.curriculum-page .curriculum-module-meta {
  padding-left: calc(1.15rem + 10px) !important;
}

/* Ohne rechte CTA-Spalte bleibt der Introtext in der regulären Hauptspalte. */
.curriculum-page .curriculum-intro-layout {
  grid-template-columns: minmax(0, 700px);
}

@media (max-width: 680px) {
  .curriculum-page .curriculum-tables {
    gap: 42px;
  }
  .curriculum-page .curriculum-table tr,
  .curriculum-page .curriculum-table tbody tr + tr {
    border-radius: 0 0 0 50px;
  }
  .curriculum-page .curriculum-module-meta,
  .curriculum-page .curriculum-table tbody tr + tr td:first-child {
    padding-left: calc(1.2rem - 5px) !important;
  }
}

/* V96: Aktuelle Kursausschreibung Freiburg */
.anmeldung-freiburg-page .course-info-table-wrap {
  width: 700px;
  max-width: 100%;
  margin: 1.6rem 0 0;
  overflow: hidden;
}

.anmeldung-freiburg-page .course-info-table {
  width: 700px;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
  border: 0;
}

.anmeldung-freiburg-page .course-info-table th,
.anmeldung-freiburg-page .course-info-table td {
  padding: 1rem 1.15rem;
  border: 0;
  vertical-align: top;
  text-align: left;
}

.anmeldung-freiburg-page .course-info-table th {
  width: 180px;
  font-weight: 700;
  color: var(--blue-ink);
}

.anmeldung-freiburg-page .course-info-table tr:nth-child(odd) th,
.anmeldung-freiburg-page .course-info-table tr:nth-child(odd) td {
  background: #eef6fb;
}

.anmeldung-freiburg-page .course-info-table tr:nth-child(even) th,
.anmeldung-freiburg-page .course-info-table tr:nth-child(even) td {
  background: #e1eef7;
}

.anmeldung-freiburg-page .course-info-table td a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}

@media (max-width: 760px) {
  .anmeldung-freiburg-page .course-info-table,
  .anmeldung-freiburg-page .course-info-table-wrap {
    width: 100%;
  }
  .anmeldung-freiburg-page .course-info-table th {
    width: 36%;
  }
  .anmeldung-freiburg-page .course-info-table th,
  .anmeldung-freiburg-page .course-info-table td {
    padding: .85rem .9rem;
  }
}


/* V97 test: Quicklinks Startseite – stärkere CI-Präsenz */
.quicklink-grid {
  gap: 1.35rem;
}
.quicklink-card {
  position: relative;
  min-height: 215px;
  padding: 1.55rem 1.55rem 1.45rem;
  border: 0;
  border-top: 5px solid var(--orange);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #edf2f9 0%, #f7f9fc 100%);
  box-shadow: 0 10px 26px rgba(39,95,134,.14);
}
.quicklink-card::after {
  content: "";
  position: absolute;
  inset: 5px 0 auto 0;
  height: 1px;
  background: rgba(93,127,190,.32);
}
.quicklink-card .icon-circle {
  width: 64px;
  height: 64px;
  margin-bottom: 1.15rem;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 5px 14px rgba(39,95,134,.18);
}
.quicklink-card .icon-circle svg {
  width: 34px;
  height: 34px;
}
.quicklink-card h3 {
  margin-bottom: .7rem;
  color: var(--blue-ink);
}
.quicklink-card p {
  color: #3e4955;
}
.quicklink-card strong {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: .7rem;
  padding-bottom: .15rem;
  border-bottom: 2px solid rgba(218,125,0,.45);
  color: var(--orange-dark);
}
.quicklink-card:hover,
.quicklink-card:focus-visible {
  border-top-color: var(--blue-ink);
  background: #e5eef8;
  box-shadow: 0 14px 30px rgba(39,95,134,.20);
  transform: translateY(-3px);
}
.quicklink-card:hover .icon-circle,
.quicklink-card:focus-visible .icon-circle {
  background: var(--orange-dark);
}
.quicklink-card:focus-visible {
  outline: 3px solid rgba(239,139,18,.38);
  outline-offset: 3px;
}
@media (max-width: 680px) {
  .quicklink-card {
    min-height: 0;
    padding: 1.35rem;
  }
}

/* V100: Header und Quicklink-Feinjustierung auf Basis von V98 test (vor Wellenvariante) */
/* Quicklink-Icons: 10 % größer, mittig auf der orangenen Oberkante und halb überstehend. */
.quicklink-card {
  padding-top: 3.35rem;
}
.quicklink-card .icon-circle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 70px;
  height: 70px;
  margin: 0;
  transform: translate(-50%, -50%);
  background: var(--blue);
}
.quicklink-card .icon-circle img {
  display: block;
  width: auto;
  height: auto;
  max-width: 38px;
  max-height: 40px;
}
.quicklink-card:hover .icon-circle,
.quicklink-card:focus-visible .icon-circle {
  background: var(--blue);
}

/* Logo 10 % größer. */
.brand img {
  width: 154px;
  height: auto;
}

/* Hauptnavigation im weißen Headerraum vertikal zentrieren und 2 pt vergrößern. */
.nav-button {
  font-size: calc(.92rem + 2pt);
}
@media (min-width: 921px) {
  .site-header .header-inner {
    padding-top: .525rem;
    padding-bottom: .525rem;
  }
  .site-header .site-nav {
    top: 0;
  }
}

@media (max-width: 920px) {
  .brand img {
    width: 134px;
  }
}
@media (max-width: 680px) {
  .quicklink-card {
    padding-top: 3.15rem;
  }
}

/* V102: Quicklink-Feinjustierung auf Basis von V100 */
.quicklink-card {
  border-top-width: 2px;
}
.quicklink-card::after {
  inset: 2px 0 auto 0;
}
.quicklink-card h3 {
  color: var(--blue);
  font-size: clamp(1.483rem, calc(2vw + .333rem), 1.753rem);
}


/* V103: Quicklinkboxen optisch an den Hero angeglichen */
.quicklink-card {
  border-top: 1px solid rgba(93,127,190,.18);
}
.quicklink-card::after {
  content: none;
  display: none;
}
.quicklink-card .icon-circle {
  width: 77px;
  height: 77px;
}
.quicklink-card .icon-circle img {
  max-width: 42px;
  max-height: 44px;
}
.quicklink-card:hover,
.quicklink-card:focus-visible {
  border-top-color: rgba(93,127,190,.18);
}

/* V104: Quicklink-Icons 2/3 überstehend; nur Überschriften zentriert */
.quicklink-card .icon-circle {
  transform: translate(-50%, -66.6667%);
}
.quicklink-card h3 {
  text-align: center;
}

/* V105: Navigation und Quicklink-Typografie */
/* Hauptnavigation: 2 pt kleiner als V104 und neutral grau. */
.nav-button {
  font-size: .92rem;
  color: #5f6368;
}

/* Quicklinks: Überschriften 2 pt kleiner und wieder linksbündig. */
.quicklink-card h3 {
  font-size: clamp(1.316rem, calc(2vw + .166rem), 1.586rem);
  text-align: left;
}

/* Je 5 px mehr horizontaler Innenabstand zum Boxenrand. */
.quicklink-card {
  padding-left: calc(1.55rem + 5px);
  padding-right: calc(1.55rem + 5px);
}

@media (max-width: 680px) {
  .quicklink-card {
    padding-left: calc(1.35rem + 5px);
    padding-right: calc(1.35rem + 5px);
  }
}

/* V108: Dozierenden-Portraits 30 % größer, quadratisch und ohne Rundung */
.dozierende-page .faculty-photo-frame {
  width: 189px;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

@media (min-width: 561px) {
  .dozierende-page .faculty-card {
    grid-template-columns: 234px minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .dozierende-page .faculty-photo-frame {
    width: min(189px, 68vw);
    aspect-ratio: 1 / 1;
    border-radius: 0;
  }
}

/* V109: Dozierendenliste – editorialer, luftiger und stärker an der STEEP™-CI orientiert */
.dozierende-page .faculty-grid {
  gap: 2.25rem;
}

.dozierende-page .faculty-card {
  grid-template-columns: 228px minmax(0, 1fr);
  column-gap: 2.65rem;
  align-items: start;
  padding: 2.25rem 2.4rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

/* Sehr dezente hellblaue Flächen geben der langen Liste Rhythmus,
   ohne die Profile wieder wie Karten einzurahmen. */
.dozierende-page .faculty-card:nth-child(even) {
  background: #f4f7fb;
}

.dozierende-page .faculty-photo-frame {
  width: 228px;
  aspect-ratio: 1 / 1;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #eef3f9;
}

.dozierende-page .faculty-copy {
  padding-top: .1rem;
}

.dozierende-page .faculty-copy h2 {
  margin: 0 0 .45rem;
  color: var(--blue-ink);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.18;
}

.dozierende-page .faculty-qualification {
  margin: 0 0 1.25rem;
  color: #5a6168;
  line-height: 1.55;
}

.dozierende-page .faculty-details > div + div {
  margin-top: 1.15rem;
}

.dozierende-page .faculty-details dt {
  margin-bottom: .28rem;
  color: var(--orange);
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.dozierende-page .faculty-details dd {
  line-height: 1.58;
}

@media (max-width: 920px) {
  .dozierende-page .faculty-card {
    grid-template-columns: 210px minmax(0, 1fr);
    column-gap: 2rem;
    padding: 2rem 1.5rem;
  }
  .dozierende-page .faculty-photo-frame {
    width: 210px;
  }
}

@media (max-width: 680px) {
  .dozierende-page .faculty-grid {
    gap: 1.7rem;
  }
  .dozierende-page .faculty-card {
    grid-template-columns: 1fr;
    row-gap: 1.35rem;
    padding: 1.6rem 1.25rem 1.8rem;
  }
  .dozierende-page .faculty-photo-frame {
    width: min(228px, 72vw);
  }
  .dozierende-page .faculty-copy h2 {
    font-size: 1.45rem;
  }
}

/* V110: Dozierendenliste – feine Trennlinien, linksbündige und 10 % kleinere Portraits */
.dozierende-page .faculty-grid {
  gap: 0;
}

.dozierende-page .faculty-card,
.dozierende-page .faculty-card:nth-child(even) {
  grid-template-columns: 205.2px minmax(0, 1fr);
  padding: 2.25rem 0;
  background: #fff;
}

.dozierende-page .faculty-card + .faculty-card {
  border-top: 1px solid var(--line);
}

.dozierende-page .faculty-photo-frame {
  width: 205.2px;
}

@media (max-width: 920px) {
  .dozierende-page .faculty-card,
  .dozierende-page .faculty-card:nth-child(even) {
    grid-template-columns: 189px minmax(0, 1fr);
    padding: 2rem 0;
  }
  .dozierende-page .faculty-photo-frame {
    width: 189px;
  }
}

@media (max-width: 680px) {
  .dozierende-page .faculty-card,
  .dozierende-page .faculty-card:nth-child(even) {
    grid-template-columns: 1fr;
    padding: 1.6rem 0 1.8rem;
  }
  .dozierende-page .faculty-photo-frame {
    width: min(205.2px, 72vw);
  }
}


/* V114: Pill-Buttons auf der Startseite 15 % größer als in V113. */
.home-pill-button {
  min-height: 0;
  padding: .3864rem .9338rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: .9982rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
  white-space: nowrap;
}
.home-pill-button--blue,
.home-pill-button--blue:visited {
  color: #fff;
  background: #5a79b7;
}
.home-pill-button--orange,
.home-pill-button--orange:visited {
  color: #fff;
  background: #ff8600;
}
.home-pill-button--blue:hover,
.home-pill-button--blue:focus-visible {
  color: #fff;
  background: #4e6ca8;
  transform: none;
}
.home-pill-button--orange:hover,
.home-pill-button--orange:focus-visible {
  color: #fff;
  background: #e97800;
  transform: none;
}

/* V115: Startseite – nur die Überschriften der Quicklinkboxen zentrieren. */
.quicklink-grid .quicklink-card h3 {
  text-align: center;
}


/* V116: Startseite – Quicklink-Überschriften wieder linksbündig. */
.quicklink-grid .quicklink-card h3 {
  text-align: left;
}

/* V116: Unterseiten-Heros scrollen mit dem Dokument und verschwinden aus dem Viewport. */
.content-page .page-hero {
  position: relative;
  top: auto;
  z-index: auto;
}

/* Sticky Seitenelemente orientieren sich danach nur noch am stehenbleibenden Header. */
@media (min-width: 921px) {
  .content-page .utility-rail,
  .content-page .region-aside,
  .content-page .contact-person-aside,
  .content-page .about-side-rail {
    top: calc(var(--sticky-header-height) + var(--sticky-association-gap));
  }
}

/* V117: Unterseiten – Trennlinie und schmaler Weißraum bleiben beim Scrollen
   direkt unter dem sticky Header stehen; nur die eigentliche Hero-Fläche scrollt weg. */
.content-page .site-header::after {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--hero-white-gap));
  height: var(--hero-white-gap);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff var(--hero-separator-offset),
    rgba(93,127,190,.18) var(--hero-separator-offset),
    rgba(93,127,190,.18) calc(var(--hero-separator-offset) + 1px),
    #fff calc(var(--hero-separator-offset) + 1px),
    #fff 100%
  );
}

/* Die bisher im Hero selbst gezeichnete Linie wird auf Unterseiten entfernt,
   damit sie beim Wegscrollen nicht doppelt erscheint. */
.content-page .page-hero::before {
  content: none !important;
}

/* V118: ueber-steep – kompakte Historienabbildung; Startseiten-Hero mobil neu geordnet. */
/* Die Historienabbildung bleibt als Assoziation in der rechten Spalte, wird aber
   als flaches redaktionelles Bild mit schlanker Bildlegende statt hoher Karte geführt. */
.content-layout--about-history .steep-history-figure {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content-layout--about-history .steep-history-figure .steep-history-photo {
  overflow: hidden;
  border-radius: 0 0 0 32px;
  background: var(--blue-lighter);
}

.content-layout--about-history .steep-history-figure .steep-history-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
}

.content-layout--about-history .steep-history-figure figcaption {
  margin-top: .8rem;
  padding: .1rem 0 .05rem .9rem;
  border-left: 2px solid var(--orange);
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.48;
}

/* Smartphones: Der Startseiten-Hero wird nicht mehr in eine schmale Text-/Bild-
   Nebeneinander-Anordnung gezwungen. Das breite Originalmotiv steht vollständig
   unter dem Text und behält so Mutter und Kind auch auf kleinen Displays im Bild. */
@media (max-width: 680px) {
  body:not(.content-page) .hero {
    padding-bottom: 28px;
  }

  body:not(.content-page) .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body:not(.content-page) .hero-copy {
    padding: 2.15rem 1rem 1.65rem;
  }

  body:not(.content-page) .hero-copy .lead br {
    display: none;
  }

  body:not(.content-page) .hero-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0 0 0 48px;
  }

  body:not(.content-page) .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  body:not(.content-page) .hero-actions {
    margin-top: 1.15rem;
  }
}

/* V119: ueber-steep – Historienabbildung in der Randspalte auf 300 × 450 px begrenzt. */
.content-layout--about-history .steep-history-figure {
  width: min(100%, 300px);
  max-width: 300px;
}

.content-layout--about-history .steep-history-figure .steep-history-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  max-height: 450px;
}

.content-layout--about-history .steep-history-figure .steep-history-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 22%;
}


/* V122: Unterseiten-CTA-Spalte entfernt; Header-Whitespace über dem Hero ohne 1px Durchscheinen. */
.content-page .site-header::after {
  bottom: calc(-1 * var(--hero-white-gap));
  height: calc(var(--hero-white-gap) + 1px);
  z-index: 2;
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff var(--hero-separator-offset),
    rgba(93,127,190,.18) var(--hero-separator-offset),
    rgba(93,127,190,.18) calc(var(--hero-separator-offset) + 1px),
    #fff calc(var(--hero-separator-offset) + 1px),
    #fff 100%
  );
}


/* V123: Gerhard-Suess-Randbild im Originalseitenverhältnis; Sticky-Separator lückenlos; Navigation im Vordergrund. */
.content-layout--about-history .steep-history-figure {
  width: 300px;
  max-width: 100%;
}

.content-layout--about-history .steep-history-figure .steep-history-photo {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
}

.content-layout--about-history .steep-history-figure .steep-history-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* Der weiße Sticky-Streifen überlappt Header und nachfolgenden Inhalt bewusst um je 1–2 px.
   Dadurch kann beim Scrollen keine transparente Haarlinie zwischen Separator und Weißfläche entstehen. */
.content-page .site-header {
  z-index: 2000;
  background: #fff;
}

.content-page .site-header::after {
  bottom: calc(-1 * (var(--hero-white-gap) + 1px));
  height: calc(var(--hero-white-gap) + 3px);
  z-index: 0;
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff calc(var(--hero-separator-offset) + 2px),
    #e2e8f3 calc(var(--hero-separator-offset) + 2px),
    #e2e8f3 calc(var(--hero-separator-offset) + 3px),
    #fff calc(var(--hero-separator-offset) + 3px),
    #fff 100%
  );
  box-shadow: 0 2px 0 #fff;
}

/* Navigation und Dropdowns liegen eindeutig vor dem überstehenden Sticky-Streifen. */
.content-page .site-header .header-inner {
  position: relative;
  z-index: 10;
}

.content-page .site-header .site-nav,
.content-page .site-header .nav-item,
.content-page .site-header .dropdown {
  z-index: 20;
}


/* V124: Sticky-Trennlinie vollständig deckend, damit beim Scrollen nichts durchscheint. */
.content-page .site-header::after {
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff calc(var(--hero-separator-offset) + 2px),
    #e2e8f3 calc(var(--hero-separator-offset) + 2px),
    #e2e8f3 calc(var(--hero-separator-offset) + 3px),
    #fff calc(var(--hero-separator-offset) + 3px),
    #fff 100%
  );
}


/* V125: Unterseiten – Abstand Trennlinie → blaue Herofläche exakt wie auf index.html.
   Index: Linie bei 5–6 px, Blau ab 10 px = 4 px Weißraum nach der Linie. */
.content-page .site-header::after {
  bottom: calc(-1 * var(--hero-white-gap));
  height: calc(var(--hero-white-gap) + 2px);
  box-shadow: none;
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff calc(var(--hero-separator-offset) + 2px),
    #e2e8f3 calc(var(--hero-separator-offset) + 2px),
    #e2e8f3 calc(var(--hero-separator-offset) + 3px),
    #fff calc(var(--hero-separator-offset) + 3px),
    #fff 100%
  );
}


/* V126: Unterseiten – Sticky-Streifen geometrisch 1:1 wie der Weißkopf auf index.html.
   Index: 10 px Weißfläche, Linie von 5–6 px, blaue Fläche ab 10 px. */
.content-page .site-header::after {
  bottom: calc(-1 * var(--hero-white-gap));
  height: var(--hero-white-gap);
  box-shadow: none;
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff var(--hero-separator-offset),
    #e2e8f3 var(--hero-separator-offset),
    #e2e8f3 calc(var(--hero-separator-offset) + 1px),
    #fff calc(var(--hero-separator-offset) + 1px),
    #fff 100%
  );
}


/* V130: Startseite – Hero nur zweifarbig, Höhe und Bildaufbau unverändert. */
.hero-two-tone {
  display: none;
}

@media (min-width: 921px) {
  body:not(.content-page) .hero {
    background: linear-gradient(
      to bottom,
      #fff 0,
      #fff var(--hero-white-gap),
      #f6f9fd var(--hero-white-gap),
      #f6f9fd 100%
    );
  }

  body:not(.content-page) .hero-two-tone {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--hero-white-gap);
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/home-hero-two-tone-right-v157.svg") no-repeat center / 100% 100%;
  }

  body:not(.content-page) .hero-grid {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 920px) {
  body:not(.content-page) .hero-two-tone {
    display: none !important;
  }
}


/* V131: Zweifarbige Hero-Logik der Startseite auch auf Unterseiten übertragen. */
.page-hero-two-tone {
  display: none;
}

@media (min-width: 921px) {
  .content-page .page-hero {
    background: linear-gradient(
      to bottom,
      #fff 0,
      #fff var(--hero-white-gap),
      #f6f9fd var(--hero-white-gap),
      #f6f9fd 100%
    );
  }

  .content-page .page-hero-two-tone {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--hero-white-gap);
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/home-hero-two-tone-right-v157.svg") no-repeat center / 100% 100%;
  }

  .content-page .page-hero-grid {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 920px) {
  .content-page .page-hero-two-tone {
    display: none !important;
  }
}


/* V132: Zweifarbige Hero-Fläche zuverlässig auf ALLEN Unterseiten.
   Die Ebene wird per Pseudoelement erzeugt, damit sie unabhängig vom HTML-Aufbau
   jeder Unterseite vorhanden ist. Höhe, Grid, Text und Hero-Bilder bleiben unverändert. */
@media (min-width: 921px) {
  .content-page .page-hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(
      to bottom,
      #fff 0,
      #fff var(--hero-white-gap),
      #f6f9fd var(--hero-white-gap),
      #f6f9fd 100%
    );
  }

  .content-page .page-hero::before {
    content: "" !important;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--hero-white-gap);
    bottom: 0;
    height: auto;
    z-index: 0;
    pointer-events: none;
    background: url("../images/home-hero-two-tone-right-v157.svg") no-repeat center / 100% 100%;
  }

  .content-page .page-hero-grid {
    position: relative;
    z-index: 1;
  }
}

/* V132: Alte V131-Hilfsebene deaktiviert; sie wird nicht mehr benötigt. */
.content-page .page-hero-two-tone {
  display: none !important;
}


/* V133: Forschung – Historieninfo aus „Über STEEP™“ hierhin verlagert;
   Begleitliteratur als großzügige Text-/Bildkombination. */
.research-publications-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: start;
}

.research-history-aside {
  align-self: start;
}

.research-history-figure {
  width: 300px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.research-history-figure .steep-history-photo {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 0 0 0 32px;
  background: var(--blue-lighter);
}

.research-history-figure .steep-history-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.research-history-figure figcaption {
  margin-top: .8rem;
  padding: .1rem 0 .05rem .9rem;
  border-left: 2px solid var(--orange);
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.48;
}

.research-history-figure figcaption p {
  margin: 0;
}

.literature-companion--feature {
  width: 100%;
  max-width: none;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(2rem, 4vw, 3.6rem);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  background: var(--blue-lighter);
}

.literature-feature-copy {
  max-width: 520px;
}

.literature-feature-copy h2 {
  margin-bottom: 1.4rem;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
}

.literature-meta {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.72;
}

.literature-feature-image {
  margin: 0;
  overflow: hidden;
  border-radius: 0 0 0 48px;
  background: #fff;
}

.literature-feature-image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 920px) {
  .research-publications-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .research-history-figure {
    width: min(100%, 300px);
  }

  .literature-companion--feature {
    grid-template-columns: 1fr;
    padding: 1.6rem;
    gap: 1.8rem;
  }

  .literature-feature-image {
    width: min(100%, 620px);
  }
}


/* V134: Forschung – ursprüngliches 700/200/300-Raster wiederhergestellt.
   Historienbild rechts; Begleitliteratur bleibt vollständig in der 700-px-Hauptspalte. */
.literatur-page .research-main-column {
  width: 100%;
  max-width: var(--content-column);
}

.literatur-page .research-history-aside {
  width: 100%;
  max-width: var(--association-column);
}

.literatur-page .research-history-figure {
  width: 300px;
  max-width: 100%;
}

.literatur-page .research-literature-feature {
  width: 100%;
  max-width: var(--content-column);
  margin-top: clamp(3.4rem, 6vw, 5rem);
  padding: clamp(1.45rem, 2.8vw, 2.1rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: clamp(1.5rem, 3vw, 2.4rem);
  align-items: center;
  background: var(--blue-lighter);
}

.literatur-page .research-literature-feature .literature-feature-copy {
  min-width: 0;
  max-width: none;
}

.literatur-page .research-literature-feature .literature-feature-copy h2 {
  margin: .35rem 0 1.15rem;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.literatur-page .research-literature-feature .literature-feature-image {
  width: 100%;
  margin: 0;
  border-radius: 0 0 0 36px;
}

@media (max-width: 920px) {
  .literatur-page .research-literature-feature {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .literatur-page .research-literature-feature .literature-feature-image {
    width: min(100%, 420px);
  }
}


/* V137: Netzwerk – Zwischenüberschriften und hervorgehobene Handlungsimpulse. */
.network-intro .network-cta {
  position: relative;
  margin: 1.15rem 0 0;
  padding-left: 1.7rem;
  color: var(--blue-ink);
  font-weight: 700;
}

.network-intro .network-cta::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange-dark);
  font-weight: 900;
}


/* V138: Netzwerk – Zwischenüberschriften dezenter und schwarz. */
.network-intro > h3 {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.3;
  margin-top: 1.55rem;
  margin-bottom: .45rem;
}


/* V142: Dozierenden-Portraits weitere 3 px tiefer – Feinabgleich zur Namensoberkante. */
@media (min-width: 681px) {
  .dozierende-page .faculty-photo-frame {
    margin-top: 7px;
  }
}


/* V143: Kursausschreibung Freiburg – erste Spalte der Veranstaltungsübersicht größer. */
.anmeldung-freiburg-page .course-info-table th {
  font-size: 1.08rem;
  line-height: 1.35;
}


/* V145: Kursausschreibung Freiburg – Hero-Bild exakt im Herobalken und Kontaktbox feinjustiert. */



/* Kontakt Christa Karcher: dünne horizontale Akzentlinie oberhalb der blauen Box. */
.anmeldung-freiburg-page .application-contact-aside {
  position: sticky;
  border-left: 0;
  padding-left: calc(1.2rem + 5px);
  margin-top: 10px;
}

.anmeldung-freiburg-page .application-contact-aside::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 2px;
  background: var(--orange);
  pointer-events: none;
}

@media (max-width: 920px) {
  .anmeldung-freiburg-page .application-contact-aside {
    position: static;
  }
}



/* V147: Anmeldung Freiburg verwendet wieder exakt die allgemeine Unterseiten-Hero-Logik.
   Keine seitenspezifischen Höhen-, Overflow- oder Radiusregeln mehr. */


/* V148: Unterseiten-Herobilder sind unabhängig von der Min-Content-Höhe der Textspalte
   strikt an die definierte Hero-Höhe gekoppelt. Verhindert insbesondere bei langen
   Hero-Überschriften ein vertikales Überstehen des Bildes unter den Herobalken. */
@media (min-width: 921px) {
  .content-page .page-hero-grid {
    grid-template-rows: var(--subpage-hero-height);
  }

  .content-page .page-hero-image {
    align-self: start;
    height: var(--subpage-hero-height);
    min-height: var(--subpage-hero-height);
    max-height: var(--subpage-hero-height);
    overflow: hidden;
  }

  .content-page .page-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* V162: Jugendhilfe – Zwischenüberschriften kleiner/dunkelblau mit deutlicherem Absatz zum Folgetext. */
.jugendhilfe-page .legal-subheading {
  margin: 1.6rem 0 .8rem;
  color: var(--blue-ink);
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}

/* Rückmeldung der STEEP™-Formulare */
.application-form[data-steep-form] .btn[disabled] { opacity: .72; cursor: wait; transform: none; }
.contact-form-status { margin-top: 1rem; padding: .9rem 1rem; border-radius: 8px; font-weight: 700; line-height: 1.55; }
.contact-form-status.is-success { border: 1px solid rgba(37, 93, 72, .22); background: #f2f8f5; color: #255d48; }
.contact-form-status.is-error { border: 1px solid rgba(153, 62, 41, .22); background: #fff5f2; color: #873a29; }



/* V169: Regionalstandort Hamburg – dezente Zwischenüberschriften im Fließtext. */
.regional-page .hub-subheading {
  margin: 1.6rem 0 .55rem;
  color: var(--blue-ink);
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}


/* V174: Wirksamkeit – Haupt-Contentüberschrift und dezente Zwischenüberschriften. */
.wirksamkeit-page .wirksamkeit-main-heading {
  /* Wie auf den übrigen Unterseiten: genügend Abstand unter dem Hero-Fade,
     damit die erste Contentüberschrift vollständig frei steht. */
  margin: 2.5rem 0 1rem;
}
.wirksamkeit-page .wirksamkeit-subheading {
  margin: 1.75rem 0 .65rem;
  color: var(--blue-ink);
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
.wirksamkeit-page .wirksamkeit-bibliography {
  margin-top: 1rem;
}
.wirksamkeit-page .wirksamkeit-bibliography .reference p + p {
  margin-top: .35rem;
}
.wirksamkeit-page .reference-links {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: .65rem !important;
}
.wirksamkeit-page .reference-links a:not(.home-pill-button) {
  font-weight: 700;
}
.wirksamkeit-page .reference-links .home-pill-button {
  font-weight: 800;
}


/* V185: Programmebenen und Curriculum */
.so-arbeitet-page .feature-grid--wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.so-arbeitet-page .feature-grid--wide .feature strong {
  font-size: 1.22rem;
}
@media (max-width: 1040px) {
  .so-arbeitet-page .feature-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .so-arbeitet-page .feature-grid--wide {
    grid-template-columns: 1fr;
  }
}
.curriculum-page .curriculum-table tr,
.curriculum-page .curriculum-table tbody tr + tr {
  grid-template-columns: 145px minmax(0, 1fr);
}

/* V196: Hero-Bilder auf Desktop/Tablet abhängig von der Viewportbreite
   weiter nach links ziehen. Die Textspalte bleibt unverändert; nur die Bildfläche
   wächst nach links. Mobile Darstellung unter 921 px bleibt unverändert. */
@media (min-width: 1232px) {
  .content-page .page-hero-image {
    width: calc(100% + 20px);
    transform: translateX(-20px);
  }

  body:not(.content-page) .hero-image {
    left: calc(max(1rem, calc((100vw - var(--content)) / 2)) + var(--hero-image-offset) - 20px);
  }
}

@media (min-width: 1051px) and (max-width: 1231px) {
  .content-page .page-hero-image {
    width: calc(100% + 65px);
    transform: translateX(-65px);
  }

  body:not(.content-page) .hero-image {
    left: calc(100% - 465px);
  }
}

@media (min-width: 921px) and (max-width: 1050px) {
  .content-page .page-hero-image {
    width: calc(100% + 95px);
    transform: translateX(-95px);
  }

  body:not(.content-page) .hero-image {
    left: calc(100% - 495px);
  }
}


/* V198: Weiterbildung – dezente Zwischenüberschriften wie auf anderen Unterseiten. */
.weiterbildung-page .weiterbildung-subheading {
  margin: 1.75rem 0 .65rem;
  color: var(--blue-ink);
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}


/* V212: Regionalseiten – Ansprechpartner:innen direkt unter der Standortkarte. */
.regional-page .region-aside .hub-contact-person--compact {
  grid-template-columns: minmax(100px, 125px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1.45rem;
  padding-top: 1.45rem;
}
.regional-page .region-aside .hub-contact-person--compact .hub-contact-photo {
  width: 100%;
  max-width: 125px;
}
.regional-page .region-aside .hub-contact-person--compact .hub-contact-photo img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  object-position: center top;
}
.regional-page .region-aside .hub-contact-person--compact .eyebrow {
  margin: 0 0 .2rem;
}
.regional-page .region-aside .hub-contact-person--compact h2 {
  margin: .1rem 0 .45rem;
  color: var(--blue-ink);
  font-size: 1.15rem;
  line-height: 1.25;
}
.regional-page .region-aside .hub-contact-person--compact .contact-lines {
  margin-top: .25rem;
  font-size: .95rem;
}
@media (max-width: 620px) {
  .regional-page .region-aside .hub-contact-person--compact {
    grid-template-columns: minmax(95px, 120px) minmax(0, 1fr);
  }
}


/* V213: Regionale Kontaktkarten – leichte Eyebrow und Kontaktblock an Foto-Unterkante. */
.regional-page .region-aside .hub-contact-person--compact {
  align-items: stretch;
}
.regional-page .region-aside .hub-contact-person--compact > div:not(.hub-contact-photo) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.regional-page .region-aside .hub-contact-person--compact .eyebrow {
  font-weight: 400;
}
.regional-page .region-aside .hub-contact-person--compact .contact-lines {
  margin-top: auto;
  padding-top: .35rem;
}


/* V217: Literatur – hervorgehobenes STEEP™-Grundlagenwerk und weitere Empfehlungen. */
.literatur-page .literature-book-feature {
  grid-template-columns: minmax(0, 1.45fr) minmax(190px, 245px);
  align-items: start;
  margin-top: clamp(2.8rem, 5vw, 4.5rem);
  padding: clamp(1.6rem, 3vw, 2.35rem);
  border-left: 4px solid var(--orange);
}

.literatur-page .literature-book-feature .literature-feature-copy {
  max-width: none;
}

.literatur-page .literature-book-feature .literature-feature-copy h2 {
  margin: .25rem 0 1rem;
  color: var(--blue-ink);
}

.literatur-page .literature-book-feature .literature-book-citation {
  margin: 0 0 1.35rem;
  color: var(--ink);
  line-height: 1.62;
}

.literatur-page .literature-book-feature .literature-feature-copy > p:not(.eyebrow):not(.literature-book-citation) {
  margin-top: 1rem;
}

.literatur-page .literature-book-feature .literature-feature-image {
  align-self: start;
  max-width: 245px;
  justify-self: end;
  border-radius: 0 0 0 30px;
}

.literatur-page .literature-recommendations {
  margin-top: clamp(2.7rem, 5vw, 4rem);
}

.literatur-page .literature-recommendations h2 {
  margin-bottom: 1.35rem;
  color: var(--blue-ink);
}

.literatur-page .literature-recommendation-list {
  display: grid;
  gap: 1.15rem;
}

.literatur-page .literature-recommendation {
  padding: 1.15rem 1.3rem;
  background: var(--blue-lighter);
}

.literatur-page .literature-recommendation p {
  margin: 0;
  line-height: 1.62;
}

@media (max-width: 920px) {
  .literatur-page .literature-book-feature {
    grid-template-columns: 1fr;
  }
  .literatur-page .literature-book-feature .literature-feature-image {
    justify-self: start;
    width: min(100%, 320px);
    max-width: 320px;
  }
}


/* V218: Literatur – 1100-px-Buchkasten mit 900-px-Textfluss und Cover rechts. */
.literatur-page .research-section > .container > .research-main-column {
  width: 100%;
  max-width: 1100px;
}
.literatur-page .literature-book-feature,
.literatur-page .research-literature-feature.literature-book-feature {
  width: 100%;
  max-width: 1100px;
  margin-top: 0;
  padding: clamp(1.6rem, 3vw, 2.35rem);
  display: grid;
  grid-template-columns: minmax(0, 900px) minmax(135px, 160px);
  gap: 40px;
  align-items: start;
  border-left: 0;
  background: var(--blue-lighter);
}
.literatur-page .literature-book-feature .literature-feature-copy {
  width: 100%;
  max-width: 900px;
}
.literatur-page .literature-book-feature .literature-feature-copy h2 {
  margin: 0 0 1rem;
}
.literatur-page .literature-book-feature .literature-feature-image,
.literatur-page .literature-book-feature .literature-association-image {
  width: 100%;
  max-width: 160px;
  margin: 0;
  justify-self: end;
  align-self: start;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
.literatur-page .literature-book-feature .literature-feature-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.literatur-page .literature-recommendations {
  width: 100%;
  max-width: 900px;
}
.literatur-page .literature-recommendation-list,
.literatur-page .literature-recommendation {
  max-width: 900px;
}
@media (max-width: 920px) {
  .literatur-page .literature-book-feature,
  .literatur-page .research-literature-feature.literature-book-feature {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .literatur-page .literature-book-feature .literature-feature-image,
  .literatur-page .literature-book-feature .literature-association-image {
    justify-self: start;
    width: min(100%, 220px);
    max-width: 220px;
  }
}

/* V218: Wirksamkeit – Studien ohne senkrechten Balken; Download-Pillen kleiner und zurückhaltender. */
.wirksamkeit-page .wirksamkeit-bibliography .reference {
  border-left: 0;
  padding: 1rem 1.15rem;
}
.wirksamkeit-page .reference-links {
  margin-top: .55rem !important;
}
.wirksamkeit-page .reference-links .home-pill-button,
.wirksamkeit-page .reference-links .home-pill-button:visited {
  padding: .28rem .58rem;
  border: 1px solid rgba(45, 83, 145, .38);
  background: rgba(255,255,255,.62);
  color: var(--blue-ink);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.1;
}
.wirksamkeit-page .reference-links .home-pill-button:hover,
.wirksamkeit-page .reference-links .home-pill-button:focus-visible {
  border-color: rgba(45, 83, 145, .58);
  background: #fff;
  color: var(--blue-ink);
}

/* V219: Literatur – Grundlagenwerk im Standardraster: Textkasten in Hauptspalte, Cover in Assoziationsspalte. */
.literatur-page .research-section > .container > .research-main-column {
  width: 100%;
  max-width: var(--content);
}

.literatur-page .literature-section-heading {
  width: 100%;
  max-width: var(--content-column);
  margin: 0 0 1.35rem;
  color: var(--blue-ink);
}

.literatur-page .literature-book-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, var(--content-column)) minmax(0, var(--association-column));
  gap: var(--content-gap);
  align-items: start;
}

.literatur-page .literature-book-panel {
  width: 100%;
  max-width: var(--content-column);
  padding: clamp(1.55rem, 3vw, 2.15rem);
  border-left: 4px solid var(--orange);
  background: var(--blue-lighter);
}

.literatur-page .literature-book-authors {
  margin: 0 0 .35rem;
  color: var(--ink);
  line-height: 1.5;
}

.literatur-page .literature-book-panel h3 {
  margin: 0 0 .9rem;
  color: var(--blue-ink);
  font-size: clamp(1.22rem, 1.7vw, 1.48rem);
  line-height: 1.3;
}

.literatur-page .literature-book-panel .literature-book-citation {
  margin: 0 0 1.25rem;
  color: var(--ink);
  line-height: 1.62;
}

.literatur-page .literature-book-panel > p:not(.literature-book-authors):not(.literature-book-citation) {
  margin-top: 1rem;
}

.literatur-page .literature-association-image {
  width: 100%;
  max-width: var(--association-column);
  margin: 0;
  justify-self: end;
  align-self: start;
  background: transparent;
}

.literatur-page .literature-association-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.literatur-page .literature-recommendations {
  width: 100%;
  max-width: var(--content-column);
}

@media (min-width: 921px) and (max-width: 1231px) {
  .literatur-page .literature-book-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: clamp(70px, 12vw, 200px);
  }
}

@media (max-width: 920px) {
  .literatur-page .research-section > .container > .research-main-column {
    max-width: 100%;
  }
  .literatur-page .literature-book-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .literatur-page .literature-association-image {
    justify-self: start;
    width: min(100%, 300px);
    max-width: 300px;
  }
}

/* V220: Literatur – ein gemeinsamer blauer Hintergrund für Text und Cover. */
.literatur-page .literature-book-layout {
  width: 100%;
  max-width: var(--content);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 900px) minmax(180px, 220px);
  gap: 28px;
  align-items: start;
  padding: 24px;
  border-left: 4px solid var(--orange);
  background: var(--blue-lighter);
}

.literatur-page .literature-book-panel {
  width: 100%;
  max-width: 900px;
  padding: 0;
  border-left: 0;
  background: transparent;
}

.literatur-page .literature-association-image {
  width: 100%;
  max-width: 220px;
  margin: 0;
  justify-self: end;
  align-self: start;
  background: transparent;
}

@media (min-width: 921px) and (max-width: 1231px) {
  .literatur-page .literature-book-layout {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    gap: 24px;
  }
}

@media (max-width: 920px) {
  .literatur-page .literature-book-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 20px;
  }
  .literatur-page .literature-book-panel {
    max-width: 100%;
  }
  .literatur-page .literature-association-image {
    justify-self: start;
    width: min(100%, 260px);
    max-width: 260px;
  }
}

/* V221: Literatur – Grundlagenwerk über die volle 1200-px-Inhaltsbreite.
   Text links in einer 900-px-Hauptspalte, Cover rechts in der 300-px-Assoziationsspalte;
   beide Bereiche werden von EINER gemeinsamen blauen Fläche verbunden. */
.literatur-page .research-section {
  background: #fff !important;
  background-image: none !important;
}
.literatur-page .research-section::before,
.literatur-page .research-section::after {
  content: none !important;
  background: none !important;
}
.literatur-page .research-section > .container > .research-main-column {
  width: 100% !important;
  max-width: var(--content) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.literatur-page .literature-section-heading {
  width: 100%;
  max-width: 900px;
  margin: 0 0 1.35rem !important;
  color: var(--blue);
  background: transparent !important;
}
.literatur-page .literature-book-layout {
  width: 100%;
  max-width: var(--content);
  display: grid;
  grid-template-columns: minmax(0, 900px) minmax(0, 300px);
  gap: 0;
  align-items: stretch;
  padding: 0;
  border-left: 4px solid var(--orange);
  background: var(--blue-lighter);
  box-sizing: border-box;
}
.literatur-page .literature-book-panel {
  width: 100%;
  max-width: none;
  padding: clamp(1.55rem, 2.7vw, 2rem) clamp(1.7rem, 3vw, 2.25rem);
  border: 0;
  background: transparent;
}
.literatur-page .literature-association-image {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: clamp(1.55rem, 2.7vw, 2rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
}
.literatur-page .literature-association-image img {
  width: min(100%, 245px);
  height: auto;
  max-height: none;
  object-fit: contain;
}
.literatur-page .literature-recommendations {
  width: 100%;
  max-width: 900px;
}
@media (min-width: 921px) and (max-width: 1231px) {
  .literatur-page .literature-book-layout {
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    gap: 0;
  }
}
@media (max-width: 920px) {
  .literatur-page .research-section > .container > .research-main-column {
    max-width: 100% !important;
  }
  .literatur-page .literature-book-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .literatur-page .literature-book-panel {
    padding: 1.35rem;
  }
  .literatur-page .literature-association-image {
    width: 100%;
    max-width: none;
    padding: 0 1.35rem 1.5rem;
    justify-content: flex-start;
  }
  .literatur-page .literature-association-image img {
    width: min(100%, 260px);
  }
}

/* V222: Literatur – kein Weiß-/Transparenz-Fade unter dem Hero. */
.literatur-page .page-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* V224: Literatur – Zwischenüberschrift der weiteren Empfehlungen kleiner und dunkelblau. */
.literatur-page .literature-recommendations > h2 {
  color: var(--blue);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.25;
  margin: 2.2rem 0 1.1rem;
}