/* Visuelle Modernisierung für die bestehende PHP-Seitenstruktur des KJR Ilm-Kreis. */
:root {
  color-scheme: light;
  --kjr-ink: #153f2d;
  --kjr-muted: #52645a;
  --kjr-pink: #b70d63;
  --kjr-pink-dark: #94084d;
  --kjr-yellow: #ffd447;
  --kjr-green: #159447;
  --kjr-green-dark: #08723a;
  --kjr-green-soft: #e6f1e9;
  --kjr-paper: #fffdf9;
  --kjr-soft: #f1f5f1;
  --kjr-line: #dce6de;
  --kjr-radius: 18px;
  --kjr-shadow: 0 12px 34px rgba(21, 63, 45, .09);
}

html { scroll-behavior: smooth; }
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
html { hyphens: auto; }
body {
  margin: 0;
  background: var(--kjr-paper);
  color: var(--kjr-ink);
  font: 400 1rem/1.7 "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body, input, button, select, textarea { font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { hyphens: auto; overflow-wrap: normal; word-break: normal; }
a { color: var(--kjr-pink-dark); text-underline-offset: .18em; }
a:hover { color: var(--kjr-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--kjr-yellow);
  outline-offset: 3px;
}
img { max-width: 100%; height: auto; }

/* Neue gemeinsame Seitenhülle: Hintergrund, Bildkopf, Navigation und Footer. */
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 8% 12%, rgba(21,148,71,.10), transparent 29rem),
    radial-gradient(ellipse at 94% 76%, rgba(255,212,71,.13), transparent 26rem),
    radial-gradient(ellipse at 5% 85%, rgba(21,148,71,.09), transparent 28rem),
    #e9f0eb;
}
.site-shell {
  width: min(calc(100% - 2.5rem), 1440px);
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 20px 70px rgba(21,63,45,.12);
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: .6rem;
  left: .6rem;
  transform: translateY(-160%);
  padding: .7rem 1rem;
  border-radius: 10px;
  background: var(--kjr-yellow);
  color: var(--kjr-ink);
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }
.site-banner {
  position: relative;
  display: flex;
  min-height: clamp(210px, 24vw, 300px);
  overflow: hidden;
  align-items: flex-end;
  background: var(--kjr-ink);
  color: #fff;
  isolation: isolate;
}
.site-banner__image, .site-banner__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-banner__image { z-index: -2; object-fit: cover; object-position: center 48%; }
.site-banner__shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(12,43,29,.88) 0%, rgba(12,43,29,.55) 48%, rgba(12,43,29,.06) 100%), linear-gradient(0deg, rgba(12,43,29,.38), transparent 62%);
}
.site-brand { width: min(100% - 3rem, 1220px); margin: 0 auto; padding: 2rem 0 2.2rem; }
.site-brand__link { display: inline-flex; align-items: center; gap: 1rem; color: #fff; text-decoration: none; }
.site-brand__link:hover, .site-brand__link:focus-visible { color: #fff; }
.site-brand__mark {
  display: block;
  width: min(300px, 72vw);
  height: auto;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.18));
}
.site-brand__name { font-size: clamp(1.15rem, 2.5vw, 1.8rem); font-weight: 650; line-height: 1.14; letter-spacing: -.02em; }
.site-brand__name strong { font-weight: 850; }
.site-nav { position: relative; z-index: 20; background: var(--kjr-ink); color: #fff; }
.site-nav__inner { width: min(100% - 2rem, 1280px); margin: 0 auto; }
.site-nav__toggle { display: none; }
.site-nav__primary { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .55rem 0; }
.site-nav a, .nav-group > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  box-sizing: border-box;
  padding: .55rem .8rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.site-nav a:hover, .site-nav a[aria-current="page"], .nav-group > summary:hover, .nav-group[open] > summary {
  background: var(--kjr-pink);
  color: #fff;
  border-radius: 2px;
}
.nav-group { position: relative; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { width: .48rem; height: .48rem; margin-left: .55rem; border-right: 2px solid var(--kjr-yellow); border-bottom: 2px solid var(--kjr-yellow); content: ""; transform: translateY(-2px) rotate(45deg); }
.nav-group[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  display: grid;
  width: 320px;
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: .55rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(12,23,40,.24);
}
.nav-dropdown--wide { width: min(520px, 80vw); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-nav .nav-dropdown a { display: flex; min-height: 42px; padding: .65rem .75rem; border-radius: 8px; color: var(--kjr-ink); font-size: .92rem; font-weight: 620; white-space: normal; }
.site-nav .nav-dropdown a:hover { border-radius: 3px; background: #fff0f6; color: var(--kjr-pink-dark); }
.site-main { min-height: 35vh; padding: clamp(1.4rem, 4vw, 3.5rem) 0 clamp(2.5rem, 6vw, 5rem); background: #fff; }
.site-footer { background: var(--kjr-ink); color: #fff; }
.site-footer__inner { display: grid; width: min(100% - 3rem, 1180px); grid-template-columns: 1.2fr 1fr .8fr .9fr; gap: 2rem; margin: 0 auto; padding: 2.4rem 0; }
.site-footer h2 { margin: 0 0 .75rem; color: var(--kjr-yellow); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.site-footer p { margin: .35rem 0; color: #d9e1ec; }
.site-footer address { font-style: normal; color: #d9e1ec; }
.site-footer__brand { color: #fff !important; font-size: 1.1rem; font-weight: 800; }
.site-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.site-footer__links a { border-radius: 2px; }
.site-footer__social-links { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.site-footer__social-links a { display: inline-flex; min-height: 38px; align-items: center; gap: .6rem; padding: .35rem .5rem; margin-left: -.5rem; border-radius: 2px; text-decoration: none; }
.site-footer__social-links svg { display: block; width: 1.3rem; height: 1.3rem; flex: 0 0 1.3rem; }
.site-footer__social-links a:hover, .site-footer__social-links a:focus-visible { border-radius: 2px; background: rgba(255,212,71,.12); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--kjr-yellow); }
.site-footer__links a:hover, .site-footer__links a:focus-visible { border-radius: 2px; background: rgba(255,212,71,.12); }
.site-footer__bottom { display: flex; width: min(100% - 3rem, 1180px); justify-content: space-between; gap: 1rem; margin: 0 auto; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.18); color: #cbd4df; font-size: .9rem; }
.site-back-to-top {
  position: fixed;
  z-index: 50;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1rem;
  border: 2px solid var(--kjr-green-dark);
  border-radius: 10px;
  background: var(--kjr-yellow);
  color: var(--kjr-ink);
  box-shadow: 0 8px 24px rgba(21,63,45,.24);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.site-back-to-top:hover { transform: translateY(-2px); border-color: var(--kjr-pink-dark); background: var(--kjr-pink); color: #fff; }
.site-back-to-top { border-radius: 4px; }
.has-js .site-back-to-top:not(.is-visible) { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(8px); }
.has-js .site-back-to-top.is-visible { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.site-back-to-top__arrow { display: inline-flex; color: var(--kjr-green-dark); }
.site-back-to-top__arrow svg { display: block; width: 1.3rem; height: 1.3rem; }
.site-back-to-top:hover .site-back-to-top__arrow { color: #fff; }
.job-overview-link { margin: .35rem 0 2rem; text-align: right; }
.job-overview-link a { display: inline-flex; min-height: 40px; align-items: center; padding: .35rem .75rem; border: 1px solid var(--kjr-line); border-radius: 10px; background: var(--kjr-soft); color: var(--kjr-pink-dark); text-decoration: none; }
.job-overview-link a:hover { border-color: var(--kjr-pink); background: #fff0f6; color: var(--kjr-ink); }

/* Alte Layout-IDs bleiben erhalten, erhalten aber mehr Weißraum und klare Breiten. */
#oben, #mitte, #unten { width: 100%; box-sizing: border-box; }
#oben { background: var(--kjr-ink); color: #fff; }
#o-center, #m-center, #u-center { width: min(100% - 2rem, 1180px); margin-inline: auto; }
#mitte { padding: clamp(1.5rem, 4vw, 4rem) 0; }
#m-center, #m-links, #m-rechts { box-sizing: border-box; }
#unten { background: var(--kjr-ink); color: #fff; padding: 1.25rem 0; }
#unten a, #oben a { color: #fff; }

/* Menü-Markup unterscheidet sich je nach Seitenstand; diese Regeln greifen bei nav,
   der alten Listen-Navigation sowie den häufig genutzten IDs/Klassen. */
nav, #navigation, #menu, .navigation, .nav, .menu {
  color: #fff;
}
nav ul, #navigation ul, #menu ul, .navigation ul, .nav ul, .menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a, #navigation a, #menu a, .navigation a, .nav a, .menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem .75rem;
  border-radius: 999px;
  color: inherit;
  font-weight: 650;
  text-decoration: none;
}
nav a:hover, #navigation a:hover, #menu a:hover, .navigation a:hover, .nav a:hover, .menu a:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}

.text, .inhalt {
  box-sizing: border-box;
  width: min(100% - 2rem, 900px);
  margin: 0 auto;
  color: var(--kjr-ink);
}
.text > h1:first-child, .inhalt > h1:first-child,
.text > .kjr-eyebrow + h1, .inhalt > .kjr-eyebrow + h1 {
  margin: 0 0 1.25rem;
  padding: clamp(1rem, 2.5vw, 1.55rem) clamp(1.1rem, 3vw, 1.8rem);
  border-left: 6px solid var(--kjr-green);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(105deg, var(--kjr-green-soft), #f7faf7 82%);
  color: var(--kjr-ink);
}
.text h1, .inhalt h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.text > h2, .inhalt > h2 {
  margin: 2rem 0 .8rem;
  padding: .7rem 1rem;
  border-left: 4px solid var(--kjr-green);
  background: linear-gradient(90deg, var(--kjr-soft), transparent);
  color: var(--kjr-ink);
  font-size: clamp(1.25rem, 2.7vw, 1.8rem);
}
.text h2, .inhalt h2 {
  margin: 2.4rem 0 .7rem;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.text h3, .inhalt h3 { margin-top: 1.7rem; color: var(--kjr-green-dark); line-height: 1.25; }
.text p, .inhalt p { max-width: 74ch; }
.text li, .inhalt li { margin: .4rem 0; }
.text ul:not(.kjr-link-grid), .inhalt ul:not(.kjr-link-grid) { padding-left: 1.45rem; }
.text li::marker, .inhalt li::marker { color: var(--kjr-green); }
.text hr, .inhalt hr { height: 1px; border: 0; margin: 2rem 0; background: var(--kjr-line); }
.text details, .inhalt details {
  margin: 1rem 0;
  overflow: hidden;
  border: 1px solid var(--kjr-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(21,63,45,.045);
}
.text details[open], .inhalt details[open] { border-color: #c8ddcc; }
.text details summary, .inhalt details summary {
  padding: .85rem 1rem;
  background: var(--kjr-soft);
  color: var(--kjr-ink);
  font-weight: 750;
  cursor: pointer;
}
.text details[open] summary, .inhalt details[open] summary { background: var(--kjr-green-soft); }
.text details > p, .inhalt details > p { margin: 1rem; }

.cimage {
  width: min(100% - 2rem, 900px);
  margin: 1.5rem auto 2rem;
  overflow: hidden;
  text-align: left;
  border-radius: var(--kjr-radius);
  background: var(--kjr-soft);
  box-shadow: var(--kjr-shadow);
}
.cimage img { display: block; width: auto; max-width: 100%; max-height: 340px; margin-left: 0; margin-right: auto; object-fit: contain; -webkit-mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%); }
.cimage.partner-image { text-align: center; }
.cimage.partner-image img { margin-inline: auto; -webkit-mask-image: none; mask-image: none; }
.member-page-image { display: grid; min-height: 210px; justify-items: start; align-items: center; padding: 1rem; text-align: left; }
.member-page-image img { width: auto; max-width: min(100%, 360px); max-height: 210px; margin-left: 0; margin-right: auto; -webkit-mask-image: linear-gradient(to right, #000 0%, #000 68%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 68%, transparent 100%); }
.fimage { margin: 2rem 0; padding: clamp(1rem, 3vw, 2rem); border-radius: var(--kjr-radius); background: var(--kjr-soft); }
.fimage img { display: block; max-width: min(100%, 820px); max-height: 560px; margin-inline: auto; object-fit: contain; }

.kjr-hero {
  position: relative;
  overflow: hidden;
  margin: 0 auto 2rem;
  padding: clamp(2rem, 7vw, 5rem);
  border-radius: 24px;
  background: var(--kjr-ink);
  color: #fff;
  box-shadow: var(--kjr-shadow);
}
.kjr-hero::after {
  position: absolute;
  /* Den Ring aus dem Textbereich halten: der Hero ist auf 900 px begrenzt. */
  right: -21rem;
  bottom: -9rem;
  z-index: 0;
  width: 20rem;
  height: 20rem;
  border: 2rem solid rgba(255,212,71,.82);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.kjr-hero > * { position: relative; z-index: 1; max-width: 760px; }
.kjr-eyebrow { margin: 0 0 .7rem; color: var(--kjr-yellow); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.kjr-hero h1 { max-width: 760px; margin: 0 0 1rem; font-size: clamp(2.5rem, 7vw, 5rem); line-height: .99; letter-spacing: -.055em; }
.kjr-hero p { max-width: 62ch; color: #e7ebf1; font-size: clamp(1.05rem, 2vw, 1.22rem); }
.kjr-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.kjr-button, a.button, input.button, button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-sizing: border-box;
  padding: .7rem 1.15rem;
  border: 2px solid var(--kjr-pink);
  border-radius: 999px;
  background: var(--kjr-pink);
  color: #fff;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.kjr-button:hover, a.button:hover, input.button:hover, button.button:hover { border-color: var(--kjr-pink-dark); background: var(--kjr-pink-dark); color: #fff; }
.kjr-button--secondary { border-color: var(--kjr-green); background: var(--kjr-green); color: #fff; }
.kjr-button--secondary:hover { border-color: var(--kjr-green-dark); background: var(--kjr-green-dark); color: #fff; }
.kjr-button--light { border-color: #fff; background: transparent; color: #fff; }
.kjr-button--light:hover { border-color: #fff; background: #fff; color: var(--kjr-ink); }

.kjr-notice, .job-nav {
  margin: 1.5rem 0 2rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid #f0c8dc;
  border-left: 6px solid var(--kjr-pink);
  border-radius: 0 var(--kjr-radius) var(--kjr-radius) 0;
  background: #fff3f8;
}
.kjr-notice strong { display: block; margin-bottom: .35rem; font-size: 1.12rem; }
.kjr-notice ul { margin-block: .4rem; }
.kjr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0 2rem; }
.kjr-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kjr-card {
  padding: 1.25rem;
  border: 1px solid var(--kjr-line);
  border-top: 4px solid var(--kjr-green);
  border-radius: var(--kjr-radius);
  background: #fff;
  box-shadow: 0 6px 20px rgba(21,63,45,.05);
}
.kjr-card h2, .kjr-card h3 { margin-top: 0; }
.kjr-card p:last-child { margin-bottom: 0; }
.kjr-feature-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; margin: 0; border: 1px solid var(--kjr-line); border-left: 5px solid var(--kjr-pink); border-top: 1px solid var(--kjr-line); border-radius: 0 12px 12px 0; background: linear-gradient(110deg, #fff, #faf6f8); }
.kjr-feature-card h2 { margin: 0 0 .6rem; }
.kjr-feature-card .kjr-eyebrow { margin: 0 0 .4rem; }
.kjr-feature-card__actions { display: flex; min-width: 220px; flex-direction: column; align-items: stretch; gap: .75rem; }
.kjr-feature-card__contact { text-align: center; font-weight: 750; }
.kjr-contact-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; margin: 2rem 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #c8ddcc; border-left: 5px solid var(--kjr-green); border-radius: 0 12px 12px 0; background: var(--kjr-green-soft); }
.queerspace-contact { align-items: center; }
.queerspace-contact h2 { margin: 0 0 .6rem; }
.queerspace-contact p { max-width: 70ch; }
.queerspace-address { margin-top: 1rem; font-style: normal; }
.queerspace-address small { color: var(--kjr-muted); }
.kjr-grid--project-links { align-items: stretch; }
.kjr-grid--project-links .kjr-card { display: flex; flex-direction: column; }
.kjr-grid--project-links .kjr-card > p:last-child { width: 100%; margin-top: auto; padding-top: 1rem; }
.kjr-grid--project-links .kjr-button { display: flex; width: 100%; min-height: 5rem; box-sizing: border-box; align-items: center; justify-content: center; text-align: center; }
.kjr-section { margin: 2rem 0; }
.kjr-organization { position: relative; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: min(calc(100vw - 4rem), 1240px); box-sizing: border-box; margin: 2.5rem 0; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--kjr-line); border-left: 6px solid var(--kjr-green); border-radius: 0 var(--kjr-radius) var(--kjr-radius) 0; background: linear-gradient(120deg, #f1f5f1, #fff 68%); box-shadow: var(--kjr-shadow); }
.kjr-organization__copy h2 { margin-top: 0; }
.kjr-organization__preview { min-width: 0; margin: 0; padding: .65rem; border: 1px solid var(--kjr-line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(21,63,45,.08); }
.kjr-organization__preview a { display: block; }
.kjr-organization__preview img { display: block; width: 100%; height: auto; border-radius: 4px; }
.kjr-organization__preview figcaption { padding: .6rem .4rem .15rem; color: var(--kjr-muted); font-size: .84rem; }
.kjr-button--outline { border-color: var(--kjr-green-dark); background: #fff; color: var(--kjr-green-dark); }
.kjr-button--outline:hover { border-color: var(--kjr-green-dark); background: var(--kjr-green-soft); color: var(--kjr-ink); }
.kjr-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: 0; list-style: none; }
.kjr-link-grid li { margin: 0 !important; }
.kjr-link-grid a { display: block; height: 100%; box-sizing: border-box; padding: .8rem 1rem; border: 1px solid var(--kjr-line); border-radius: 4px; background: #fff; font-weight: 650; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, color .18s ease; }
.kjr-link-grid a:hover, .kjr-link-grid a:focus-visible { border-color: var(--kjr-pink); border-radius: 2px; box-shadow: 0 3px 10px rgba(183,13,99,.09); color: var(--kjr-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }

.kjr-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.kjr-contact-card { padding: 1.25rem; border: 1px solid var(--kjr-line); border-top: 4px solid var(--kjr-green); border-radius: var(--kjr-radius); background: #fff; box-shadow: 0 6px 20px rgba(21,63,45,.05); }
.kjr-contact-card h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.kjr-privacy-note { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 12px; background: var(--kjr-soft); color: var(--kjr-muted); }
.kjr-bank { padding: 1.25rem; border-radius: var(--kjr-radius); background: var(--kjr-soft); overflow-wrap: anywhere; }
.kjr-donation-hero { background: linear-gradient(125deg, var(--kjr-ink), #20613b); }
.kjr-donation-grid { align-items: stretch; }
.kjr-donation-grid .kjr-card { border-top: 4px solid var(--kjr-green); }
.kjr-bank--featured { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 1.5rem; margin: 2rem 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--kjr-line); background: #f1f5f1; }
.kjr-bank--featured h2 { margin: .1rem 0 .5rem; }
.kjr-bank__account { padding: 1.1rem 1.25rem; border-left: 5px solid var(--kjr-green); border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(21,63,45,.06); }
.kjr-bank__account p { margin: .3rem 0; }
.kjr-bank__iban { font-size: clamp(1rem, 2vw, 1.25rem); }
.kjr-donation-receipt { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #c8ddcc; border-radius: var(--kjr-radius); background: var(--kjr-green-soft); }
.kjr-donation-receipt h2 { margin: 0 0 .5rem; }
.kjr-donation-receipt p { margin: 0; }
.kjr-donation-receipt .kjr-button { flex: 0 0 auto; }

.job-nav { border-left-color: var(--kjr-pink); }
.job-combination-highlight { margin: 1.5rem 0; padding: 1.1rem 1.25rem; border: 1px solid #c8ddcc; border-left: 6px solid var(--kjr-green); border-radius: 0 12px 12px 0; background: var(--kjr-green-soft); box-shadow: 0 6px 20px rgba(21,63,45,.06); }
.job-combination-highlight .kjr-eyebrow { margin: 0 0 .35rem; color: var(--kjr-green-dark); }
.job-combination-highlight p:last-child { margin-bottom: 0; }
.job-combination { max-width: none !important; margin: .8rem 0 1.25rem; padding: .9rem 1rem; border-left: 5px solid var(--kjr-green); border-radius: 0 12px 12px 0; background: var(--kjr-green-soft); color: var(--kjr-ink); }
.job-intro { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.job-text { grid-column: 2; grid-row: 1; }
.job-image { grid-column: 1; grid-row: 1; }
.job-image img { display: block; width: 100%; max-width: 360px; max-height: 440px; margin: 0 auto 0 0; object-fit: contain; border-radius: 4px !important; -webkit-mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%); }
.desktop-image { display: block; }
.mobile-image { display: none; width: 100%; max-width: 500px; margin: 1rem 0 1rem auto; }
.job-back-link { margin: 0 0 1rem; }
.job-back-link a { display: inline-flex; align-items: center; min-height: 40px; color: var(--kjr-green-dark); font-weight: 700; text-decoration: none; }
.job-back-link a:hover { text-decoration: underline; text-underline-offset: .2em; }
.job-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.job-list-card { display: flex; flex-direction: column; align-items: flex-start; }
.job-list-card h2 { margin: .2rem 0 .6rem; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.job-list-card__meta { margin: 0; color: var(--kjr-green-dark); font-size: .86rem; font-weight: 750; }
.job-list-card__area { margin: .55rem 0 0; color: var(--kjr-pink-dark); font-size: .78rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.job-program-label { margin: 0 0 .6rem; color: var(--kjr-green-dark); }
.job-list-card__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1rem; font-weight: 750; text-decoration: none; }
.job-list-card__link:hover { text-decoration: underline; text-underline-offset: .2em; }
.job-ad > h1 { margin-bottom: 1.25rem; padding: clamp(1rem, 2.5vw, 1.55rem) clamp(1.1rem, 3vw, 1.8rem); border-left: 6px solid var(--kjr-green); border-radius: 0 12px 12px 0; background: linear-gradient(105deg, var(--kjr-green-soft), #f7faf7 82%); }

@media (max-width: 760px) {
  .site-shell { width: min(calc(100% - 1rem), 1440px); }
  .site-banner { min-height: 215px; }
  .site-brand { width: calc(100% - 2rem); padding: 1.35rem 0 1.5rem; }
  .site-brand__mark { width: min(260px, 76vw); height: auto; border-radius: 0; padding: 0; }
  .site-brand__link { gap: .75rem; }
  .site-nav__inner { width: 100%; }
  .site-nav__toggle { display: none; width: 100%; min-height: 52px; align-items: center; gap: .75rem; padding: .65rem 1rem; border: 0; background: var(--kjr-ink); color: #fff; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
  .has-js .site-nav__toggle { display: flex; }
  .site-nav__toggle:hover, .site-nav__toggle[aria-expanded="true"] { background: #20563c; }
  .site-nav__toggle-icon { display: inline-block; width: 1.5rem; color: var(--kjr-yellow); font-size: 1.35rem; line-height: 1; text-align: center; }
  .site-nav__primary { display: flex; flex-direction: column; align-items: stretch; gap: .15rem; padding: .4rem .65rem .8rem; }
  .has-js .site-nav__primary { display: none; }
  .has-js .site-nav.is-open .site-nav__primary { display: flex; }
  .site-nav a, .nav-group > summary { width: 100%; min-height: 44px; justify-content: space-between; padding: .55rem .75rem; border-radius: 10px; font-size: .94rem; white-space: normal; text-align: left; }
  .nav-group { width: 100%; }
  .nav-dropdown { position: static; width: auto; max-height: min(55vh, 420px); margin: .2rem .25rem .55rem; }
  .nav-dropdown--wide { width: auto; grid-template-columns: 1fr; }
  .site-footer__inner { width: calc(100% - 2rem); grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .site-footer__about { grid-column: 1 / -1; }
  .site-footer__bottom { width: calc(100% - 2rem); }
  #o-center, #m-center, #u-center { width: min(100% - 1.25rem, 1180px); }
  .text, .inhalt { width: min(100% - 1.25rem, 900px); }
  .kjr-grid, .kjr-grid--two, .kjr-contact-grid { grid-template-columns: 1fr; }
  .kjr-feature-card { grid-template-columns: 1fr; gap: 1rem; }
  .kjr-feature-card__actions { min-width: 0; align-items: flex-start; }
  .kjr-contact-panel { grid-template-columns: 1fr; }
  .kjr-organization { left: auto; transform: none; width: auto; grid-template-columns: 1fr; }
  .kjr-bank--featured { grid-template-columns: 1fr; }
  .kjr-donation-receipt { align-items: flex-start; flex-direction: column; }
  .kjr-link-grid { grid-template-columns: 1fr; }
  .job-intro { grid-template-columns: 1fr; }
  .job-text { grid-column: 1; grid-row: 2; }
  .job-image { grid-column: 1; grid-row: 1; width: 100%; text-align: left; }
  .desktop-image { display: none; }
  .mobile-image { display: block; }
  .job-image img { max-width: 250px; max-height: 340px; margin-left: 0; margin-right: auto; }
  .job-list-grid { grid-template-columns: 1fr; }
  .kjr-hero { border-radius: 18px; }
  .kjr-hero::after { display: none; }
  .site-back-to-top { width: 52px; height: 52px; min-height: 52px; justify-content: center; gap: 0; padding: 0; border-radius: 4px; }
  .site-back-to-top > span:last-child { display: none; }
  nav ul, #navigation ul, #menu ul, .navigation ul, .nav ul, .menu ul { display: flex; flex-wrap: wrap; gap: .15rem; }
  nav a, #navigation a, #menu a, .navigation a, .nav a, .menu a { padding-inline: .55rem; font-size: .94rem; }
}
@media (max-width: 480px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__about { grid-column: auto; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }