.leitbild {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background: var(--parler-papier); color: var(--parler-tinte);
  transition: none;
}
.leitbild.dunkel { background: var(--parler-tinte); color: var(--parler-papier); }
.leitbild h2, .leitbild h3 { color: inherit; }


.leitbild.dunkel > .wrap .eyebrow, .leitbild.dunkel > .wrap a { color: var(--kupfer-hell-text); }
.leitbild.dunkel > .wrap a:hover { color: #fff; }
.leitbild.dunkel > .wrap :focus-visible { outline-color: var(--kupfer-hell-text); }
.leitbild .auftakt { display: flex; }
.leitbild .kante { width: 2px; flex: none; background: var(--parler-kupfer); }
.leitbild .schalterbuehne { display: grid; }
.leitbild .eulenfeld { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.leitbild .eulenfeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.leitbild .hellEule { opacity: 1; }
.leitbild .dunkelEule { opacity: 0; }
.leitbild.dunkel > .wrap .hellEule { opacity: 0; }
.leitbild.dunkel > .wrap .dunkelEule { opacity: 1; }
.leitbild .schalter { display: inline-flex; align-items: center; border: 0; border-radius: 8px; background: none; color: inherit; font-family: var(--font-ui); cursor: pointer; }
.leitbild .gleis { position: relative; display: block; flex: none; border: 1px solid; }
.leitbild.dunkel > .wrap .gleis { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.32); }
.leitbild .wippe { position: absolute; display: block; }
.leitbild .beschriftung { text-align: left; }
.leitbild .zustand { display: block; color: var(--kupfer-text); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.leitbild.dunkel > .wrap .zustand { color: var(--kupfer-hell-text); }
.leitbild .aufforderung { display: block; color: var(--muted); }
.leitbild .auftakt { max-width: none; margin-bottom: clamp(1.5rem, 4vw, 3rem); gap: 1.5rem; }
.leitbild .auftakt h2 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.03; letter-spacing: -.025em; }
.leitbild .auftakt .eyebrow { font-size: .75rem; margin-bottom: .8rem; }
.leitbild .auftakt .leitbild-lead { font-size: 1.25rem; line-height: 1.45; max-width: 46ch; margin-top: 1rem; }
.leitbild-lead em { display: block; }
.leitbild-lead span { display: block; margin-top: .25rem; font-size: 1.125rem; }
.leitbild .schalterbuehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.eulenraum { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; min-width: 0; }
.leitbild .eulenfeld { max-width: 390px; aspect-ratio: 5/4; overflow: visible; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.leitbild .eulenfeld img { transition: none; }
.leitbild .eulenfeld::before {
  content: ""; position: absolute; inset: 17% 15%; z-index: -1;
  border-radius: 50%; background: var(--parler-kupfer); filter: blur(32px); opacity: 0;
  transform: scale(.6); pointer-events: none;
}
.leitbild[data-phase="glow"] > .wrap .eulenfeld::before { animation: eulenglow 300ms ease-out both; }
.leitbild[data-phase="glow"] > .wrap .eulenfeld img { filter: drop-shadow(0 0 10px rgba(217,119,87,.55)); }
@keyframes eulenglow { from { opacity: 0; transform: scale(.6); } to { opacity: .7; transform: scale(1.13); } }
.leitbild .schalter { margin: 0; padding: .35rem .7rem; gap: .9rem; min-height: 78px; }
 
.leitbild .gleis {
  width: 56px; height: 88px; border-radius: var(--radius-md);
  background: var(--white); border-color: rgba(22,51,106,.3);
  box-shadow: inset 0 1px 4px rgba(22,51,106,.14);
  transition: none;
}
.leitbild .wippe {
  left: 5px; right: 5px; top: 5px; height: 38px;
  border-radius: var(--radius-sm); transform: translateY(0);
  background: var(--parler-kupfer);
  transition: transform 320ms var(--ease-standard);
}
.leitbild.dunkel > .wrap .wippe, .leitbild[data-next="dunkel"] > .wrap .wippe {
  transform: translateY(39px);
}
.leitbild[data-next="hell"] > .wrap .wippe { transform: translateY(0); }
.leitbild .schalter .zustand { font-size: .75rem; letter-spacing: .13em; transition: none; }
.leitbild .schalter .aufforderung { font-size: .875rem; transition: none; }
.leitbild.dunkel > .wrap .schalter .aufforderung { color: var(--blau-5); }
.leitbild #lesart, .leitbild .lesartwechsel { display: grid; }
.leitbild .lesart { grid-area: 1/1; align-self: start; }
 
.leitbild .lesart[hidden] { display: block  ; visibility: hidden; }
.leitbild .lesart .eyebrow { font-size: .75rem; line-height: 1.4; margin: 0 0 1rem; letter-spacing: .17em; }
.leitbild .lesart h3 { font-size: clamp(2.25rem, 4.1vw, 3.5rem); line-height: 1.05; margin-bottom: 1.25rem; letter-spacing: -.025em; }
.leitbild .leitbild-stichwort {
  text-decoration: underline solid var(--parler-kupfer) 2px;
  text-underline-offset: .16em;
  text-decoration-skip-ink: none;
}
.leitbild .lesart p:not(.eyebrow) { font-size: 1.25rem; line-height: 1.55; max-width: 34ch; }
.leitbild .weiterlesen { margin-top: 1.75rem; font-size: 1rem; }
.leitbild .weiterlesen a { display: inline-flex; min-height: 44px; align-items: center; }
.leitbild h2, .leitbild h3, .leitbild .eyebrow { transition: none; }
.leitbild.licht-overlay {
  position: absolute; inset: 0; width: 100%; z-index: 5; pointer-events: none;
  margin: 0; border: 0; clip-path: circle(0px at 50% 50%); will-change: clip-path;
}
.licht-overlay .eulenfeld::before { display: none; }
.licht-overlay .eulenfeld img { filter: none; }
.licht-overlay * { transition: none  ; }
@media (max-width: 700px) {
  .leitbild .schalterbuehne { grid-template-columns: 1fr; gap: 1.75rem; }
  .leitbild .auftakt { gap: 1rem; margin-bottom: 1.75rem; }
  .leitbild .auftakt h2 { font-size: clamp(2.25rem, 8.4vw, 3.25rem); }
  .leitbild .auftakt .leitbild-lead { font-size: 1.125rem; }
  .leitbild-lead span { font-size: 1rem; }
  .leitbild .eulenfeld { max-width: 250px; }
  .eulenraum { gap: .65rem; }
  .leitbild .lesart h3 { font-size: 2.5rem; margin-bottom: .8rem; }
  .leitbild .lesart .eyebrow { margin-bottom: .55rem; }
  .leitbild .lesart p:not(.eyebrow) { font-size: 1.125rem; max-width: 38ch; }
  .leitbild .weiterlesen { margin-top: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .leitbild .eulenfeld::before, .leitbild.licht-overlay { display: none; }
  .leitbild .eulenfeld img { filter: none  ; }
  .leitbild .wippe { transition: none; }
}