* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--papier); color: var(--tinte);
  overscroll-behavior: none; }  
html { touch-action: manipulation; }  
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; }
img { display: block; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


.rahmen { position: fixed; inset: 16px; border: 1px solid var(--linie); pointer-events: none; z-index: 5; }
.kopf { position: fixed; top: 26px; left: 44px; right: 44px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font: 500 var(--etikett)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-weich); pointer-events: none; }

.kopf__name { display: inline-flex; align-items: center; gap: 10px; }
.am-tuer .kopf { visibility: hidden; }


.buch { position: fixed; inset: 0; }
.folie { position: absolute; inset: 64px 0 56px; display: none; padding: 12px 84px; overflow-y: auto; }  
.folie.aktiv { display: grid; z-index: 1; animation: ein .38s cubic-bezier(.2, .7, .2, 1) .16s both; }

.folie.geht { display: grid; z-index: 0; pointer-events: none; animation: aus .16s ease-in both; }  
@keyframes ein { from { opacity: 0; transform: translateX(var(--dx, 20px)); } to { opacity: 1; transform: none; } }
@keyframes aus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(calc(var(--dx, 20px) * -1)); } }
@media (prefers-reduced-motion: reduce) { .folie.aktiv { animation: none; } .folie.geht { display: none; } }

figure { margin: 0; }
picture { display: contents; }


.etikett { margin: 0 0 18px; }
.datum { display: inline-block; font: 16px/1.3 var(--serif); letter-spacing: .12em; color: var(--tinte-weich); padding-bottom: 4px; border-bottom: 1px solid var(--gold); }
.datum__alter { font: 400 14px/1.3 var(--sans); letter-spacing: 0; white-space: nowrap; color: var(--tinte-weich); }
.r-jahr { white-space: nowrap; }
.unter { display: block; margin-top: 10px; font: 600 var(--etikett)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-weich); }
.marke { margin: 0 0 18px; font: 600 var(--etikett)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-weich); }
.marke b { color: var(--tinte); border-bottom: 2px solid var(--gold); padding-bottom: 3px; }
.satz { margin: 0 0 .7em; font-size: var(--satz); line-height: 1.5; }
.echo { font-style: italic; color: var(--tinte); border-bottom: 2px solid var(--gold); }
.titel { margin: 0 0 18px; font-weight: 400; font-size: clamp(28px, 2.8vw, 44px); line-height: 1.2; }
.weiter { display: inline-block; margin-top: 8px; font: 600 var(--etikett)/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--gold); }
.knopf { display: inline-block; margin: 6px; padding: 14px 26px; border: 1.5px solid var(--tinte); border-radius: 999px; background: transparent;
  font: 600 15px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--tinte); }
.knopf--leise { border-color: transparent; color: var(--tinte-weich); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }


.art-bild { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; max-width: 1280px; margin: 0 auto; }
.art-bild .bildfeld { height: var(--bildhoehe); display: flex; align-items: center; justify-content: center; gap: 24px; }
.art-bild .bildfeld > figure { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.bildfeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }  
.art-bild .textfeld { min-height: 300px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.bildfeld.paar > figure { height: auto; flex: 1 1 0; padding: 0; }  
.bildfeld.paar img { max-height: 30svh; }
.bildfeld figcaption { margin-top: 8px; font: 500 var(--etikett)/1.4 var(--sans); letter-spacing: .04em; color: var(--tinte-weich); text-align: center; }
.punkte { list-style: none; margin: 0 0 18px; padding: 0; font: 16px/1.9 var(--sans); }

.punkte li { display: flex; align-items: center; gap: .55em; white-space: nowrap; }
.punkte li::before { content: "\2713\FE0E"; flex: 0 0 15px; height: 15px; box-sizing: border-box; border: 1px solid var(--tinte-weich); border-radius: 3px; font: 600 11px/13px var(--sans); text-align: center; color: var(--tinte-weich); }
.punkte li.gewaehlt::before { border-color: var(--gold); background: rgb(217 164 65 / .28); color: var(--tinte); }
.geraete { display: flex; gap: 26px; margin-top: 6px; }
.geraete figure { display: flex; flex-direction: column; align-items: center; }
.geraete img { height: 64px; width: auto; mix-blend-mode: multiply; }
.geraete figcaption { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.geraete .monat { font: 20px/1.1 var(--hand); color: var(--tinte); }
.geraete .geraet { font: 500 var(--etikett)/1.3 var(--sans); color: var(--tinte-weich); }


.art-gross { grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 14px; max-width: 1120px; margin: 0 auto; text-align: center; }
.art-gross .etikett { margin: 0; }
.art-gross .bildfeld { height: min(66svh, 680px); width: 100%; display: flex; align-items: center; justify-content: center; }
.art-gross .bildfeld > figure { height: 100%; display: flex; align-items: center; justify-content: center; }
.art-gross .textfeld .satz { margin: 0; }


.art-text { place-items: center; text-align: center; }
.art-text .textfeld { max-width: 42rem; }
.art-text .satz { font-size: clamp(24px, 2.1vw, 34px); line-height: 1.4; }


.art-titel { inset: 0; place-items: center; padding: 24px; }
.art-titel .hintergrund { position: absolute; inset: 0; }
.art-titel .hintergrund img { width: 100%; height: 100%; object-fit: cover; }
.titelbox { position: relative; max-width: 860px; padding: 36px 48px; border-radius: 14px; background: rgb(246 236 221 / .84); text-align: center; }
.leitsatz { margin: 0 0 20px; font-weight: 400; font-size: clamp(30px, 3.5vw, 52px); line-height: 1.25; }
.leitsatz span { display: block; }
.wer { margin: 0 0 12px; font: 600 var(--etikett)/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-weich); }
.ziel { margin: 0 0 22px; font-size: var(--satz); line-height: 1.45; }
.wege { margin: 0; }


.art-profil { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; max-width: 1100px; margin: 0 auto; }
.profil__links { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.portrait img { max-height: 58svh; width: auto; max-width: 100%; border-radius: 10px; }
.kontakt { list-style: none; margin: 0; padding: 0; font: 15px/1.9 var(--sans); text-align: center; }
.kontakt a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.art-profil .titel { margin: 6px 0 4px; }
.rolle, .zwischen { margin: 0 0 16px; font: 600 var(--etikett)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-weich); }
.zwischen { margin: 18px 0 8px; }
.arbeitsweise { margin: 0; padding-left: 1.3em; font-size: 18px; line-height: 1.5; }
.arbeitsweise li { margin: 0 0 6px; }


.art-liste { place-items: center; }
.art-liste .textfeld { max-width: 980px; width: 100%; }
.einleitung { margin: 0 0 18px; font-size: 18px; line-height: 1.5; color: var(--tinte-weich); }
.stationen { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--linie); }
.stationen li { display: grid; grid-template-columns: 250px 1fr; column-gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.stationen .rolle { grid-row: span 2; margin: 0; font: 600 17px/1.35 var(--serif); letter-spacing: 0; text-transform: none; color: var(--tinte); }
.stationen .zeit { font: var(--etikett)/1.4 var(--sans); color: var(--tinte-weich); }
.stationen .ergebnis { font-size: 17px; line-height: 1.4; }
.zitat { margin: 0; padding-left: 18px; border-left: 3px solid var(--gold); }
.zitat p { margin: 0 0 4px; font-style: italic; font-size: 19px; }
.zitat cite { font: normal var(--etikett)/1.4 var(--sans); color: var(--tinte-weich); }


.art-ende { place-items: center; text-align: center; }
.kontaktzeile, .recht { margin: 18px 0 0; font: 15px/1.6 var(--sans); }
.kontaktzeile a, .recht a { margin: 0 10px; }
.recht { font-size: var(--etikett); color: var(--tinte-weich); }


.steuerung { position: fixed; left: 44px; right: 44px; bottom: 30px; z-index: 4; display: flex; align-items: center; gap: 16px; }
.steuerung button { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--tinte-weich); background: var(--papier); color: var(--tinte); cursor: pointer; display: grid; place-items: center; }
.steuerung button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.steuerung button[disabled] { opacity: .3; cursor: default; }
.steuerung button:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }
#buch { cursor: pointer; }

.balken { flex: 1; display: flex; gap: 6px; align-items: center; height: 14px; }
.abschnitt { position: relative; flex: 1 1 0; height: 2px; }
.abschnitt i { position: absolute; left: 0; top: -1px; height: 4px; width: 0; background: var(--gold); border-radius: 2px; }
.am-titel .balken, .am-tuer .zurueck { visibility: hidden; }
.steuerung, .kopf { isolation: isolate; }

@media (prefers-reduced-motion: no-preference) { .abschnitt i { transition: width .3s ease; } }


@media (max-width: 760px) {
  :root { --satz: 19px; --bildhoehe: 42svh; }
  .rahmen { inset: 8px; }
  .kopf { top: 16px; left: 16px; right: 16px; letter-spacing: .08em; }
  .kopf .tuermarke { width: 22px; height: 22px; }
  .folie { inset: 52px 0 42px; padding: 4px 20px 8px; }
  .art-titel { inset: 0; padding: 20px; }
  .art-bild { grid-template-columns: 1fr; align-content: start; gap: 16px; text-align: center; }
  .art-bild .textfeld { min-height: 0; align-items: center; }
  .bildfeld.paar { gap: 10px; }
  .bildfeld.paar img { max-height: 15svh; }
  .geraete { gap: 14px; justify-content: center; }
  .geraete img { height: 58px; }
  .art-gross .bildfeld { height: 52svh; }
  .art-text .satz { font-size: 22px; }
  .titelbox { padding: 26px 20px; }
  .leitsatz { font-size: 28px; }
  .wer { letter-spacing: .1em; }
  .art-profil { grid-template-columns: 1fr; gap: 20px; align-content: start; text-align: center; }
  .art-profil .textfeld { text-align: left; }
  .portrait img { max-height: 24svh; }
  .kontakt { line-height: 1.7; }
  .arbeitsweise { font-size: 17px; }
  .stationen li { grid-template-columns: 1fr; }
  .stationen .rolle { grid-row: auto; }
  .steuerung { left: 16px; right: 16px; bottom: 20px; flex-wrap: wrap; row-gap: 8px; }
  .steuerung .vor { order: 1; }
}
.ueber { display: block; margin-bottom: 4px; font: 600 var(--etikett)/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-weich); }


.kurve { width: 100%; height: auto; max-height: 64svh; overflow: visible; }
.kurve .kurve__station circle { fill: var(--tinte); }
.kurve .kurve__station.ist-aktiv circle { fill: var(--gold); stroke: var(--tinte); stroke-width: 3; }
.kurve .kurve__station .kurve__treffer { fill: transparent; stroke: none; }
.kurve a:focus-visible circle:first-child, .kurve a:hover circle:first-child { fill: var(--gold); }
.kurve__name { font: 28px var(--hand); fill: var(--tinte); }

.art-einstieg { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; max-width: 1280px; margin: 0 auto; }
.art-einstieg .titel { font-size: clamp(32px, 3.2vw, 50px); }
.satz--profil { font-size: clamp(18px, 1.35vw, 22px); }
.stationsliste { display: none; }
.kurvenfeld { display: flex; align-items: center; justify-content: center; min-width: 0; }

.art-station { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; max-width: 1240px; margin: 0 auto; }
.art-station .textfeld { min-height: 0; }
.zeit { margin: 0 0 8px; font: 500 var(--etikett)/1.45 var(--sans); letter-spacing: .04em; color: var(--tinte-weich); }
.art-station .titel { margin-bottom: 10px; }
.ergebnis-gross { margin: 0 0 16px; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.3; }
.ergebnisse { margin: 0 0 16px; padding-left: 1.1em; font-size: 18px; line-height: 1.45; }
.ergebnisse li { margin-bottom: 6px; }
.faehig { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.faehig li { padding: 6px 12px; border: 1px solid var(--gold); border-radius: 999px; font: 500 var(--etikett)/1.3 var(--sans); }
.mehr { margin: 4px 0 0; }
.mehr summary { cursor: pointer; padding: 12px 0; font: 600 var(--etikett)/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); }
.mehr summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mehr h3 { margin: 14px 0 6px; font: 600 var(--etikett)/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-weich); }
.mehr .aufgaben { margin: 0; padding-left: 1.1em; font-size: 16px; line-height: 1.45; }
.mehr .wie { margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
.kurvenfeld--klein .kurve { max-height: 30svh; }
.zitat--gross { margin: 0 auto 8px; max-width: 40rem; border: 0; padding: 0; }
.zitat--gross p { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.35; }
.art-ende .zitat--gross cite { display: block; margin-top: 10px; }

@media (max-width: 760px) {
  .art-einstieg, .art-station { grid-template-columns: 1fr; gap: 14px; align-content: start; }
  .art-einstieg .kurvenfeld { display: none; }
  .stationsliste { display: block; list-style: none; margin: 4px 0 14px; padding: 0; border-top: 1px solid var(--linie); }
  .stationsliste li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
  .stationsliste .jahr { min-width: 92px; font: 500 var(--etikett)/1.3 var(--sans); color: var(--tinte-weich); }
  .stationsliste b { font-weight: 600; font-size: 17px; }
  .satz--profil { font-size: 18px; }
  .art-station .kurvenfeld { order: -1; }
  .kurvenfeld--klein .kurve { max-height: 92px; }
  .ergebnis-gross { font-size: 21px; }
  .ergebnisse { font-size: 17px; }
}
.nur-handy { display: none; }
@media (max-width: 760px) {
  .art-station .kurvenfeld { display: none; }
  .art-station .ergebnisse > li:nth-child(3):not(.nur-handy) { display: none; }
  .mehr .nur-handy { display: list-item; }
  .art-einstieg .titel, .art-station .titel { font-size: 30px; }
  .stationsliste li { padding: 7px 0; }
}


.kurve__name--gross { font: 46px var(--hand); fill: var(--tinte); }
.kurve__jahr--gross { font: 40px var(--hand); fill: var(--tinte-weich); }
.mehr + .mehr { margin-top: 0; }
.nur-handy-block { display: none; }
@media (max-width: 760px) { .nur-handy-block { display: block; } }


.kurvenfeld.mit-bild { flex-direction: column; gap: 10px; }
.stationsbild img { max-height: 36svh; max-width: 100%; width: auto; mix-blend-mode: multiply; }
.kurvenfeld.mit-bild .kurve { max-height: 30svh; }

.ohne-js { display: grid; }
html:not(.bereit) .steuerung, html:not(.bereit) .kopf { visibility: hidden; }
.kontaktzeile a, .kontakt a, .kontaktliste a { white-space: nowrap; }


.art-zeitleiste { grid-template-rows: auto auto; justify-items: center; align-content: center; gap: clamp(1.2rem, 4svh, 2.4rem); }
.y85__geburt { position: relative; margin: 0; }
.y85__geburt img { display: block; width: auto; height: min(44svh, 440px); }
.y85__storch { position: absolute; left: 90%; top: 0; width: clamp(9rem, 21vw, 18rem); height: auto; overflow: visible; }
.y85__zeit { position: relative; width: min(66rem, 100%); height: clamp(9.5rem, 28svh, 15rem); }
.y85__linie { position: absolute; left: 0; width: 100%; top: .15rem; height: .9rem; overflow: visible; }
.y85__linie path { fill: none; stroke: var(--tinte); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: url(#pencil-line); }
.y85__linie .d { stroke-width: 1.2; opacity: .7; }
.y85__ev { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.y85__punkt { display: block; width: 1.25rem; height: 1.25rem; margin-top: -.12rem; overflow: visible; }
.y85__punkt path { fill: rgb(42 41 39 / .5); stroke: var(--tinte); stroke-width: 1.3; stroke-linecap: round; filter: url(#pencil-line); }
.y85__punkt .s { fill: none; stroke-width: 1; opacity: .6; }
.y85__ev--geburt { padding-top: calc(1.13rem + .45rem); }
.y85__ev--geburt .y85__punkt--licht { position: absolute; left: 50%; top: 0; width: 5.4rem; height: 5.4rem; margin: -2.25rem 0 0 -2.7rem; overflow: visible; }
.y85__ev--geburt .y85__inh { position: relative; }
.y85__punkt--licht circle { stroke: none; }
.y85__punkt--licht .strahlen { fill: none; stroke-linecap: round; }
.y85__inh { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.y85__lab { display: block; width: auto; height: clamp(1rem, min(2.4svh, 2.1vw), 1.4rem); }
.y85__imgs { display: flex; flex-direction: column-reverse; align-items: center; gap: .15rem; }
.y85__imgs img { display: block; height: auto; width: clamp(2.94rem, 5.6vw, 5.32rem); mix-blend-mode: multiply; }      
.y85__imgs img:nth-child(2) { width: clamp(2.38rem, 4.62vw, 4.2rem); }
.y85__ev--mario .y85__imgs img { width: clamp(3.78rem, 7.35vw, 6.72rem); }
.y85__ev--mario .y85__imgs img:nth-child(2) { width: clamp(3.22rem, 6.16vw, 5.6rem); }
@media (max-width: 760px) {
  .y85__storch { left: 52%; top: -9%; width: clamp(6rem, 36vw, 9.5rem); }
  .y85__geburt img { height: min(34svh, 300px); }
  .y85__zeit { width: 100%; height: 12.5rem; margin-top: 1.4rem; }
  .y85__ev { left: var(--xh, var(--x)); }
  .y85__imgs img { width: 3.5rem; }                       
  .y85__imgs img:nth-child(2) { width: 2.8rem; }
  .y85__ev--mario .y85__imgs img { width: 3.78rem; }
  .y85__ev--mario .y85__imgs img:nth-child(2) { width: 3.22rem; }
  .y85__lab { height: 1.4rem; }
}


.art-collage { place-items: center; overflow: hidden; padding: 0; }
.wand { position: absolute; inset: 0; overflow: hidden; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px; }
.wand__zelle { position: relative; min-width: 0; min-height: 0; }
.wand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border: 4px solid #fbf6ee; box-shadow: 0 2px 8px rgb(0 0 0 / .18); transform: rotate(-2deg) scale(1.06); }
.wand__zelle:nth-child(3n) img { transform: rotate(3deg) scale(1.1); }
.wand__zelle:nth-child(4n+1) img { transform: rotate(-4deg) scale(1.04); }
.wand__zelle:nth-child(5n+2) img { transform: rotate(2deg) scale(1.12); }
.karte { position: relative; z-index: 1; max-width: 38rem; margin: 0 20px; padding: 30px 40px; background: var(--papier); border-radius: 10px; box-shadow: 0 24px 60px rgb(0 0 0 / .32); text-align: center; }
.karte .etikett { margin-bottom: 12px; }
.karte .karte__unten, .ablauf-karte .karte .karte__unten { margin: 14px 0 0; }
.karte .satz { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.4; margin: 0 0 .4em; }
@media (max-width: 760px) {
  .wand { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .wand img { border-width: 3px; }
  .karte { padding: 22px 22px; }
  .karte .satz { font-size: 21px; }
}


.art-tuer { --grund: #15120e; --hell: #efe7d6; inset: 0; padding: 0; background: var(--grund); color: var(--hell);
  display: none; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.art-tuer.aktiv, .art-tuer.geht { display: flex; }
.art-tuer .hintergrund { position: absolute; inset: 0; }
.art-tuer .hintergrund img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .55; }  
.art-tuer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--grund) 4%, transparent 60%); pointer-events: none; }
.tuerbox { position: relative; z-index: 1; padding: 0 20px 56px; max-width: 760px; margin: 0 auto; width: 100%; font: 20px/1.65 Georgia, 'Times New Roman', serif; }
.tuerbox h1 { font-size: clamp(34px, 10.4vw, 92px); line-height: 1; margin: 0 0 10px; letter-spacing: .01em; font-weight: 700; text-wrap: balance; }
.tuerbox p { margin: 0; color: var(--gold); font: 15px/1.4 -apple-system, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.tuerbox .pfeil { position: relative; z-index: 1; padding: 0 20px 56px; max-width: 760px; margin: 26px auto 0; width: 100%; color: #b9ad92; font: 14px -apple-system, system-ui, sans-serif; letter-spacing: .1em; }
.am-tuer .rahmen { display: none; }
.am-tuer .steuerung .vor { background: transparent; color: #efe7d6; border-color: #b9ad92; }
@media (max-width: 760px) { .tuerbox { padding-bottom: 104px; } }


.art-titel { place-items: start center; }
.art-titel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(to bottom, rgb(246 236 221 / .92) 35%, rgb(246 236 221 / 0)); pointer-events: none; z-index: 0; }
.art-titel .titelbox { background: none; border-radius: 0; padding: clamp(28px, 6svh, 64px) 24px 0; max-width: 980px; }
.art-titel .leitsatz { font-size: clamp(28px, 3.1vw, 46px); margin-bottom: 12px; }
.art-titel .ziel { margin-bottom: 14px; }
.art-titel .knopf { background: rgb(246 236 221 / .9); }

.folie { -webkit-user-select: none; user-select: none; }
.folie img, .folie svg { -webkit-user-drag: none; }
.folie a, .kontaktzeile, .kontakt, .kontaktliste, .folie .fuss { -webkit-user-select: text; user-select: text; }
html, body { overscroll-behavior-y: none; }

.art-titel .leitsatz { margin-bottom: clamp(18px, 3.4svh, 36px); line-height: 1.3; }
.art-titel .leitsatz span + span { margin-top: .32em; }
.art-titel .wer { margin-bottom: clamp(16px, 3svh, 30px); }
.art-titel .wer__name { margin-bottom: 8px; }
@media (max-width: 760px) {
  .art-titel::before { height: 58%; }
  .art-titel .titelbox { padding-top: 40px; }
  .art-titel .leitsatz { font-size: 26px; }
}


.y85__punkt--licht { filter: drop-shadow(0 0 7px rgb(217 164 65 / .45)); }
.y85__punkt--licht circle { fill: var(--gold); opacity: .88; filter: url(#pencil-line); }
.y85__punkt--licht .strahlen { stroke: var(--gold); stroke-width: 1.3; opacity: .7; filter: url(#pencil-line); }  


.bildfeld.paar { align-items: stretch; height: auto; align-self: center; }
.bildfeld.paar > figure { flex: 1 1 0; height: auto; justify-content: space-between; }
.bildfeld.paar picture { display: block; width: 100%; }
.bildfeld.paar img { width: 100%; height: 28svh; max-height: none; object-fit: contain; }
@media (max-width: 760px) { .bildfeld.paar img { height: 15svh; } }


.textfeld .weiter { margin-top: 64px; font: 500 var(--etikett)/1.4 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--tinte-weich); border-bottom-color: var(--linie); }
.textfeld .weiter:hover { color: var(--tinte); border-bottom-color: var(--gold); }
.art-gross .textfeld .weiter { margin-top: 18px; }
@media (max-width: 760px) { .textfeld .weiter { margin-top: 28px; } }


.amp { display: inline-block; margin: 0 .1em; font-style: italic; font-weight: 400; font-size: 1.35em; line-height: .8; color: var(--gold); text-shadow: 0 0 .25em rgb(217 164 65 / .45); transform: translateY(.06em) rotate(-4deg); }
h2.titel { text-wrap: balance; }  


.art-ende .textfeld { display: flex; flex-direction: column; align-items: center; max-width: 52rem; }
.art-ende .titel { font-size: clamp(32px, 3.2vw, 50px); }
.art-ende .zitat--gross { max-width: 46rem; }
.art-ende .zitat--gross p { font-size: clamp(30px, 3.1vw, 48px); line-height: 1.3; }
.art-ende .zitat--gross p::after { content: ""; display: block; width: 56px; height: 2px; margin: 22px auto 0; background: var(--gold); }
.art-ende .wege { margin-top: 44px; }
.art-ende .wege:empty { display: none; }
.kontaktkacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 36rem); margin-top: 14px; }
.kontaktkachel { display: flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 50px; margin: 0; padding: 8px 14px; }
.kontaktkachel .sym { flex: none; width: 25px; height: 20px; }
.kontaktkachel .sym path { fill: none; stroke: currentColor; stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kontaktkachel .sym-gold { fill: var(--gold); }
.kontaktkachel__wert { font: 400 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--tinte); }
@media (max-width: 620px) { .kontaktkacheln { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; } .kontaktkachel { min-height: 46px; padding: 6px 14px; } }
@media (max-height: 640px) { .kontaktkacheln { margin-top: 8px; } .kontaktkachel { min-height: 42px; padding: 4px 14px; } }
.nebenwege { margin: 12px 0 0; font: 15px/1.6 var(--sans); }

@media (max-height: 720px) { .art-ende:has(.kontaktkacheln) .logo-gross { width: 56px; height: 56px; margin-bottom: 8px; border-radius: 12px; } .art-ende:has(.kontaktkacheln) .wege { margin-top: 12px; } .art-ende:has(.kontaktkacheln) .titel { margin-bottom: 6px; } .art-ende:has(.kontaktkacheln) .fuss { margin-top: 12px; padding-top: 8px; } .art-ende:has(.kontaktkacheln) .nebenwege { margin-top: 6px; } }
@media (max-height: 500px) { .art-ende:has(.kontaktkacheln) .logo-gross { display: none; } }
.nebenwege a { margin: 0 12px; color: var(--tinte-weich); text-decoration: none; border-bottom: 1px solid var(--linie); }
.nebenwege a:hover { color: var(--tinte); border-bottom-color: var(--gold); }
.fuss { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--linie); min-width: min(100%, 360px); }
.fuss .kontaktzeile { margin: 0; }
.fuss .recht { margin: 8px 0 0; }


.portrait img { box-shadow: 0 0 0 1.5px rgb(217 164 65 / .85), 0 0 26px 2px rgb(217 164 65 / .32); }


.wand .wand__nachher { z-index: 1; }
.karte__rumpf { display: grid; grid-template-rows: 1fr; }
.karte__inhalt { min-height: 0; overflow: hidden; }
.ablauf-karte .karte .ueber, .ablauf-wandel .karte .ueber { font-size: 19px; letter-spacing: .2em; margin-bottom: 0; }
.ablauf-karte .karte .etikett, .ablauf-wandel .karte .etikett { margin-bottom: 0; }
.ablauf-karte .karte__inhalt, .ablauf-wandel .karte__inhalt { padding-top: 14px; }
@keyframes kachel-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes karte-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rumpf-auf { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
.folie.aktiv.ablauf-karte.laeuft .karte { animation: karte-ein .6s ease both 1.2s; }

.folie.aktiv.ablauf-karte.laeuft .karte__unten { animation: blende-ein .8s ease both 2.6s; }
.ablauf-wandel .wand__zelle { --d: var(--dq); }
.folie.aktiv.ablauf-wandel.laeuft .wand__nachher { animation: kachel-ein .8s ease both; animation-delay: calc(.6s + var(--d) * 1.8s); }
.folie.aktiv.ablauf-wandel.laeuft .karte { animation: karte-ein .6s ease both 3.6s; }
.folie.aktiv.ablauf-wandel.laeuft .karte__rumpf { animation: rumpf-auf .8s ease both 4.9s; }

.folie.aktiv.ablauf-karte:not(.laeuft):not(.fertig) .karte, .folie.aktiv.ablauf-wandel:not(.laeuft):not(.fertig) .karte, .folie.aktiv.ablauf-wandel:not(.laeuft):not(.fertig) .wand__nachher { opacity: 0; }
.folie.aktiv.ablauf-wandel:not(.laeuft):not(.fertig) .karte__rumpf { grid-template-rows: 0fr; opacity: 0; }
.folie.aktiv.ablauf-karte:not(.laeuft):not(.fertig) .karte__unten { opacity: 0; }

.kaelte { position: fixed; inset: 0; z-index: 0; background: #b4c1cb; opacity: 0; pointer-events: none; }
body.am-wandel:not(.ablauf-laeuft):not(.wandel-fertig) .kaelte { opacity: 1; }
body.am-wandel.ablauf-laeuft .kaelte { animation: kaelte-weg 2.6s ease-in-out .6s both; }
@keyframes kaelte-weg { from { opacity: 1; } to { opacity: 0; } }
body.am-wandel .kopf, body.am-wandel .rahmen, body.am-wandel .abschnitt, body.am-wandel .weg, body.am-wandel .tm-grund, body.am-wandel .tm-licht, body.am-wandel .tm-blatt, body.am-wandel .tm-rahmen {
  transition: color 2.6s ease-in-out .4s, border-color 2.6s ease-in-out .4s, background-color 2.6s ease-in-out .4s, fill 2.6s ease-in-out .4s, stroke 2.6s ease-in-out .4s; }
body.am-wandel .abschnitt i { transition: background-color 2.6s ease-in-out .4s, width .3s ease; }
.folie.aktiv.fertig .karte, .folie.aktiv.fertig .karte__rumpf, .folie.aktiv.fertig .karte__unten, .folie.aktiv.fertig .wand__nachher, body.am-wandel.wandel-fertig .kaelte { animation: none; }
body.wandel-fertig .kopf, body.wandel-fertig .rahmen, body.wandel-fertig .abschnitt, body.wandel-fertig .weg, body.wandel-fertig .abschnitt i, body.wandel-fertig .tuermarke * { transition: none; }  
@media (max-width: 760px) { .ablauf-wandel .wand__zelle { --d: var(--dh); } .ablauf-karte .karte .ueber, .ablauf-wandel .karte .ueber { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  
  .folie.aktiv.ablauf-karte.laeuft .karte, .folie.aktiv.ablauf-wandel.laeuft .karte,
  .folie.aktiv.ablauf-wandel.laeuft .karte__rumpf { animation-name: blende-ein; }
  body.am-wandel .kopf, body.am-wandel .rahmen, body.am-wandel .abschnitt, body.am-wandel .weg, body.am-wandel .abschnitt i, body.am-wandel .tuermarke * { transition: none; } }

body.am-kalt { --papier: #b4c1cb; --tinte: #1f2c36; --tinte-weich: #34434e; --linie: #8a9aa7; --gold: #2c5878; background: var(--papier);
  --marke-licht: #d9a441; }  
.am-kalt .wand img { border-color: #f1f2f3; box-shadow: 0 2px 8px rgb(20 36 52 / .22); }
.karte--kalt { background: #dde4e9; color: #1f2c36; box-shadow: 0 24px 60px rgb(20 36 52 / .38); }
.karte--kalt .ueber { color: #3b4a55; }


.art-ende .logo-gross { width: 96px; height: 96px; margin: 0 auto 22px; border-radius: 20px; box-shadow: 0 10px 28px rgb(42 41 39 / .18); }
@media (max-width: 760px) { .art-ende .logo-gross { width: 72px; height: 72px; border-radius: 15px; margin-bottom: 16px; } }


.folie.rollt-weiter { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
.mehr-pfeil { position: fixed; left: 50%; bottom: 58px; z-index: 4; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--papier); border: 1px solid var(--linie); color: var(--tinte-weich); opacity: 0; transition: opacity .25s; pointer-events: none; }
.mehr-pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mehr-unten .mehr-pfeil { opacity: 1; }
@media (max-width: 760px) { .mehr-pfeil { bottom: 62px; } }


@media (max-width: 760px) and (max-height: 700px) {
  .art-station .titel, .art-einstieg .titel { font-size: 25px; margin-bottom: 6px; }
  .zeit { margin-bottom: 4px; }
  .ergebnis-gross { font-size: 19px; margin-bottom: 10px; }
  .ergebnisse { font-size: 17px; margin-bottom: 10px; }
  .ergebnisse li { margin-bottom: 3px; }
  .zwischen { margin: 10px 0 6px; }
  .faehig { margin-bottom: 8px; gap: 6px; }
  .faehig li { padding: 4px 10px; }
  .satz--profil { font-size: 18px; margin-bottom: .5em; }
  .stationsliste li { padding: 5px 0; }
}


@media (max-width: 760px) {
  .folie.eng { --satz: 18px; }
  .folie.eng.art-bild { gap: 10px; }
  .folie.eng .etikett { margin-bottom: 8px; }
  .folie.eng .unter { margin-top: 6px; }
  .folie.eng .punkte { margin-bottom: 8px; line-height: 1.5; }
  .folie.eng .satz { margin-bottom: .4em; line-height: 1.42; }
  .folie.eng .textfeld .weiter { margin-top: 12px; }
  .folie.eng .y85__geburt img { height: min(26svh, 240px); }
  .folie.eng .y85__zeit { height: 10.5rem; margin-top: 1rem; }
  .folie.eng .logo-gross { width: 52px; height: 52px; border-radius: 12px; margin-bottom: 10px; }
  .folie.eng.art-ende .titel { font-size: 26px; margin-bottom: 10px; }
  .folie.eng.art-ende .wege { margin-top: 18px; }
  .folie.eng .fuss { margin-top: 18px; padding-top: 10px; }
  .folie.eng.art-profil { gap: 12px; }
  .folie.eng .profil__links { flex-direction: row; justify-content: center; gap: 14px; }
  .folie.eng .portrait img { max-height: 16svh; }
  .folie.eng .kontakt { font-size: 14px; line-height: 1.5; text-align: left; }
  .folie.eng.art-profil .titel { font-size: 26px; }
  .folie.eng .rolle, .folie.eng .zwischen { margin-bottom: 6px; }
  .folie.eng .zwischen { margin-top: 10px; }
  .folie.eng .arbeitsweise { font-size: 16px; line-height: 1.38; }
  .folie.eng .arbeitsweise li { margin-bottom: 3px; }
}
@media (max-width: 760px) {
  .folie.eng.art-profil { gap: 8px; }
  .folie.eng .portrait img { max-height: 14svh; }
  .folie.eng.art-profil .rolle { letter-spacing: .05em; margin-bottom: 4px; }
  .folie.eng.art-profil .titel { font-size: 24px; margin: 2px 0; }
  .folie.eng.art-profil .satz { margin-bottom: .25em; }
}

@media (max-width: 760px) {
  .folie.sehr-eng .portrait img { max-height: 12svh; }
  .folie.sehr-eng .arbeitsweise .erklaerung { display: none; }
  .folie.sehr-eng .arbeitsweise li { margin-bottom: 1px; }
  .folie.sehr-eng .zwischen { margin-top: 6px; }
}


.titel-ecke { position: absolute; z-index: 2; top: 16px; right: 44px; height: 44px; display: flex; align-items: center;
  font: 500 var(--etikett)/1 var(--sans); letter-spacing: .06em; color: var(--tinte-weich);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.titel-ecke:hover { color: var(--tinte); }
@media (max-width: 760px) { .titel-ecke { top: 6px; right: 22px; } }


.testleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; pointer-events: none; font: 600 13px/1 var(--sans); }
.testleiste__knopf { position: absolute; left: 22px; bottom: 62px; pointer-events: auto; padding: 8px 12px; border-radius: 999px;
  border: 1px solid #2a2927; background: #2a2927; color: #f6ecdd; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: .85; }
.testleiste__knopf::before { content: "▦ "; }
.testleiste__streifen { display: none; pointer-events: auto; gap: 8px; padding: 10px 12px 12px; overflow-x: auto; overscroll-behavior: contain;
  background: rgb(26 24 21 / .92); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.testleiste-offen .testleiste__streifen { display: flex; }
.testleiste-offen .testleiste__knopf { bottom: 128px; }
.testleiste__folie { position: relative; flex: 0 0 auto; width: 120px; height: 84px; border-radius: 6px; overflow: hidden; background: #f6ecdd; outline: 2px solid transparent; }
.testleiste__folie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testleiste__folie.ist-aktiv { outline-color: var(--gold); outline-offset: 2px; }
.testleiste__ohne { display: grid; place-items: center; height: 100%; padding: 6px; color: #2a2927; font: 500 12px/1.2 var(--sans); text-align: center; }
.testleiste__nr { position: absolute; left: 4px; top: 4px; padding: 3px 6px; border-radius: 999px; background: rgb(26 24 21 / .8); color: #f6ecdd; font-size: 12px; }
@media (max-width: 760px) {
  .testleiste__knopf { left: 12px; bottom: 56px; }
  .testleiste-offen .testleiste__knopf { bottom: 106px; }
  .testleiste__folie { width: 84px; height: 62px; }
}



.art-station { align-items: start; align-content: start; }
.art-station .kurvenfeld { align-self: start; height: min(40svh, 380px); margin-top: 28px; }
.art-einstieg .kurvenfeld { height: min(58svh, 560px); }

.kurve-feld { position: fixed; z-index: 3; display: none; pointer-events: none; }
.am-kurve .kurve-feld { display: block; }
.kurve-feld.bereit { transition: left .6s ease, top .6s ease, width .6s ease, height .6s ease; }
.kurve-feld .kurve { width: 100%; height: 100%; max-height: none; }
.kurve-feld .kurve__station { pointer-events: auto; }
.kurve__gold { fill: var(--gold); stroke: var(--tinte); stroke-width: 3; }
.kurve__wandern { opacity: 0; transition: opacity .3s ease; }
.am-station .kurve__wandern { opacity: 1; }
.kurve-feld .kurve__name { transition: opacity .3s ease; }
.am-station .kurve-feld .kurve__name { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .kurve-feld.bereit, .kurve__wandern { transition: none; } }
@media (max-width: 760px) {
  .kurve-feld { left: auto; top: 52px; right: 16px; width: 88px; height: 62px; }
  .kurve-feld .kurve__name, .kurve-feld .kurve__name--gross, .kurve-feld .kurve__jahr--gross { display: none; }
  .kurve-feld .kurve__station { pointer-events: none; }
  .kurve-feld .kurve__gold { r: 22px; stroke-width: 5; }
  .art-station .zeit { padding-right: 92px; }
  .art-einstieg .titel { padding-right: 92px; }
}


a.kopf__name { pointer-events: auto; text-decoration: none; color: inherit; }
a.kopf__name:hover .kopf__text { color: var(--tinte); }
.mehr > div > h3:first-child { margin-top: 10px; }


@media (max-width: 760px) {
  .folie.eng.art-station .zeit { margin-bottom: 4px; }
  .folie.eng.art-station .titel { font-size: 25px; margin-bottom: 6px; }
  .folie.eng.art-station .ergebnis-gross { font-size: 19px; margin-bottom: 8px; }
  .folie.eng.art-station .ergebnisse { margin-bottom: 8px; }
  .folie.eng.art-station .ergebnisse li { margin-bottom: 2px; line-height: 1.38; }
  .folie.eng.art-station .zwischen { margin: 6px 0 4px; }
  .folie.eng.art-station .faehig { gap: 5px; margin-bottom: 4px; }
  .folie.eng.art-station .faehig li { padding: 3px 9px; }
  .folie.eng.art-einstieg .satz--profil { margin-bottom: .35em; line-height: 1.4; }
  .folie.eng.art-einstieg .stationsliste li { padding: 4px 0; }
  .folie.sehr-eng.art-station .zwischen, .folie.sehr-eng.art-station .faehig { display: none; }
  .folie.sehr-eng.art-einstieg .satz--profil:nth-of-type(2) { display: none; }
}
@media (max-width: 760px) {
  .folie.sehr-eng.art-einstieg .stationsliste { display: none; }  
  .folie.sehr-eng.art-station .titel { font-size: 22px; }
  .folie.sehr-eng.art-station .ergebnis-gross { font-size: 18px; }
  .folie.eng.art-ende .zitat--gross p { font-size: 25px; }
  .folie.eng.art-ende .zitat--gross p::after { margin-top: 12px; }
}
@media (max-width: 760px) { .folie.sehr-eng.art-station .ergebnisse li { line-height: 1.3; } .folie.sehr-eng.art-station .titel { margin-bottom: 4px; } }



.kurve__wandern text, .kurve-feld__jahr { transition: opacity .2s ease; }
.kurve__wandern.unterwegs text, .kurve-feld.unterwegs .kurve-feld__jahr { opacity: 0; }

.kurve-feld__jahr { display: none; }
@media (max-width: 760px) {
  .kurve-feld .kurve__gold { r: 60px; stroke-width: 10; }  
  .am-station .kurve-feld__jahr { display: block; position: absolute; right: 0; top: 100%; margin-top: 2px; white-space: nowrap;
    font: 600 14px/1 var(--sans); letter-spacing: .04em; color: var(--tinte-weich); }
}


.textfeld .weiter--zurueck { display: block; width: fit-content; margin-top: 14px; }


a.kopf__name { padding: 11px 0; margin: -11px 0; }
@media (max-width: 760px) { .textfeld .weiter--zurueck { padding: 12px 0; margin-top: 2px; } }


.satz { text-wrap: pretty; }
.art-gross .textfeld .satz + .satz { margin-top: .45em; }


.untertitel { margin: -8px 0 18px; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.35; font-style: italic; }
.aufgaben--kurz { margin: 0 0 18px; padding-left: 1.1em; font-size: 17px; line-height: 1.45; }
.aufgaben--kurz li { margin-bottom: 6px; }
@media (max-width: 760px) {
  .untertitel { margin: -4px 0 12px; font-size: 18px; }
  .aufgaben--kurz { margin-bottom: 12px; font-size: 16px; }
  .aufgaben--kurz li { margin-bottom: 4px; }
}
@keyframes blende-ein { from { opacity: 0; } to { opacity: 1; } }


.y85__imgs { display: grid; grid-template-rows: clamp(1.78rem, 3.46vw, 3.14rem) clamp(1.57rem, 3.06vw, 2.8rem); justify-items: center; gap: .15rem; }
.y85__imgs img { grid-row: 2; align-self: start; width: clamp(2.5rem, 4.76vw, 4.52rem); }
.y85__imgs.y85__imgs--marke img { grid-row: 1 / -1; align-self: center; width: auto; height: clamp(2.6rem, 5vw, 4.6rem); }  
.y85__imgs img:nth-child(2) { grid-row: 1; align-self: end; width: clamp(2.02rem, 3.93vw, 3.57rem); }
.y85__ev--mario .y85__imgs img { width: clamp(3.21rem, 6.25vw, 5.71rem); }
.y85__ev--mario .y85__imgs img:nth-child(2) { width: clamp(2.74rem, 5.24vw, 4.76rem); }
@media (max-width: 760px) {
  .y85__imgs { grid-template-rows: 2.15rem 1.6rem; }
  .y85__imgs img { width: 2.98rem; }
  .y85__imgs img:nth-child(2) { width: 2.38rem; }
  .y85__ev--mario .y85__imgs img { width: 3.21rem; }
  .y85__ev--mario .y85__imgs img:nth-child(2) { width: 2.74rem; }
  .y85__ev .y85__lab { height: min(.85rem, 3.4vw); }  
  .y85__zeit { margin-top: 2rem; }
  .folie.eng .y85__zeit { margin-top: 1.6rem; }
}


.kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 8px; align-items: center; }
.kopf__kapitel { display: none; }
.kopf__name { grid-column: 1; grid-row: 1; justify-self: start; white-space: nowrap; min-width: 0; max-width: 100%; }
.kopf__text { overflow: hidden; text-overflow: ellipsis; }  
.kopf__wege { display: contents; }
.weg { grid-row: 1; position: relative; pointer-events: auto; display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 1px solid var(--linie); border-radius: 999px;
  font: 600 14px/1 var(--sans); letter-spacing: .01em; text-transform: none; text-decoration: none; color: var(--tinte-weich); white-space: nowrap; background: none; }
.kopf__wege .weg:nth-child(1) { grid-column: 2; }
.kopf__wege .weg:nth-child(2) { grid-column: 3; }
.kopf__wege .weg:nth-child(3) { grid-column: 4; }
@media (max-width: 480px) { .weg__mehr { display: none; } }
.weg::after { content: ""; position: absolute; inset: -7px -2px; }  
.weg:hover { color: var(--tinte); }
.weg--hier { border-color: var(--gold); color: var(--tinte); }
.hinweis { margin: 10px 0 0; font: 400 var(--etikett)/1.4 var(--sans); color: var(--tinte-weich); }
@media (max-width: 760px) {
  .punkte { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
  .art-station .textfeld .weiter { padding: 12px 0; margin-top: 2px; }  
  .folie.eng.art-station .untertitel { margin-bottom: 8px; font-size: 17px; }
  .folie.eng.art-station .aufgaben--kurz { margin-bottom: 4px; font-size: 15px; line-height: 1.38; }
  .folie.eng.art-station .aufgaben--kurz li { margin-bottom: 2px; }
}
@media (max-width: 339px) { .punkte li { white-space: normal; } }

@media (max-width: 760px) {
  .kopf { column-gap: 6px; }
  .weg { padding: 0 clamp(6px, 2.3vw, 9px); font-size: clamp(12px, 3.75vw, 14px); letter-spacing: 0; }
  .kopf__name { gap: clamp(4px, 1.8vw, 7px); }
  .kopf__text { font-size: clamp(12px, 3.75vw, 14px); letter-spacing: .02em; }
}

@media (max-width: 480px) { .kopf__name { white-space: normal; } .kopf__text { display: block; width: min-content; line-height: 1.1; overflow: visible; } .kopf { column-gap: 4px; } .weg { padding: 0 6px; } }
@media (max-width: 350px) { .kopf { left: 12px; right: 12px; column-gap: 4px; } .kopf .tuermarke { width: 20px; height: 20px; } }


@media (max-width: 760px) {
  .art-profil { gap: 12px; }
  .profil__links { gap: 10px; }
  .portrait img, .folie.eng .portrait img, .folie.sehr-eng .portrait img { max-height: 36svh; }  
  .kontakt { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; font-size: 14px; line-height: 1.6; text-align: center; }
  .folie.eng .profil__links { flex-direction: column; gap: 6px; }
  .folie.eng .kontakt { text-align: center; line-height: 1.5; }
  
  .art-ende { grid-template-columns: minmax(0, 1fr); }
  .art-ende .textfeld { min-width: 0; max-width: 100%; }
  .kontaktzeile { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
}

@media (max-width: 760px) {
  .y85__ev--geburt .y85__punkt--licht { width: 4.2rem; height: 4.2rem; margin: -1.65rem 0 0 -2.1rem; }
}
@media (max-width: 345px) { .y85__imgs img { width: 2.6rem; } .y85__imgs img:nth-child(2) { width: 2.1rem; } .y85__ev--mario .y85__imgs img { width: 2.8rem; } .y85__ev--mario .y85__imgs img:nth-child(2) { width: 2.4rem; } }

@media (max-width: 760px) {
  .art-gross .bildfeld--kurve { height: 100%; min-height: 0; align-self: stretch; }
  .bildfeld--kurve picture { display: flex; height: 100%; width: 100%; justify-content: center; }
  .bildfeld--kurve img { height: 100%; width: 100%; }
}

.art-ende .knopf { white-space: nowrap; }


:root { --z-jahr: 30px; --z-titel: 22px; --bildflaeche: 44svh; }
.folie.misst { display: grid; visibility: hidden; }
.art-bild, .art-gross { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; align-items: start; justify-items: center; gap: 0; max-width: 1120px; margin: 0 auto; text-align: center; }
.r-jahr { height: var(--z-jahr); margin: 0 0 3px; }
.r-titel { height: var(--z-titel); margin: 0 0 8px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.r-titel .marke { margin: 0; }
.r-titel .unter, .unter--text { margin: 0; font: 600 14px/22px var(--sans); letter-spacing: .02em; text-transform: none; }
.unter--text { margin-bottom: 6px; line-height: 1.35; }
.art-bild .bildfeld, .art-gross .bildfeld { height: var(--bildflaeche); width: 100%; margin: 0 0 14px; display: flex; align-items: center; justify-content: center; }  
.art-bild .bildfeld > figure, .art-gross .bildfeld > figure { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }  
.art-bild .textfeld, .art-gross .textfeld { display: block; width: 100%; max-width: 46rem; min-height: 0; text-align: center; }
.art-gross .textfeld .satz { margin: 0 0 .7em; }
.art-gross .textfeld .satz + .satz { margin-top: 0; }
.art-bild .punkte { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }

.art-text { place-items: center; }  
@media (max-width: 760px) {
  :root { --z-jahr: 28px; --z-titel: 20px; }
  .r-titel { margin-bottom: 6px; }
  .r-titel .unter { line-height: 20px; }
  .art-bild .bildfeld, .art-gross .bildfeld { margin-bottom: 10px; }
  
  .folie.ist-kurve { grid-template-rows: minmax(0, 1fr) auto auto auto; }
  .art-gross.ist-kurve .bildfeld--kurve { height: 100%; align-self: stretch; }
}

.art-bild .punkte { margin-bottom: 10px; line-height: 1.5; }
@media (min-width: 761px) { .art-bild .textfeld { max-width: 54rem; } .art-bild .punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 22px; width: auto; } }

.art-bild .bildfeld.paar > figure { height: auto; }

.portrait img { aspect-ratio: 520 / 620; }

@media (max-height: 500px) and (min-width: 561px) {
  :root { --satz: 17px; --z-jahr: 24px; --z-titel: 20px; }
  .folie { inset: 54px 0 26px; padding: 2px 28px; }
  .art-bild, .art-gross { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 28px; }
  .folie.ist-kurve { grid-template-rows: auto auto minmax(0, 1fr); }
  .r-jahr, .r-titel, .art-bild .textfeld, .art-gross .textfeld { grid-column: 2; }
  .r-titel { margin-bottom: 4px; }
  .art-bild .bildfeld, .art-gross .bildfeld, .art-gross.ist-kurve .bildfeld--kurve { grid-column: 1; grid-row: 1 / span 3; height: 100%; margin: 0; }
  .art-bild .textfeld, .art-gross .textfeld { align-self: start; }
  .art-bild .punkte { margin-bottom: 4px; }
  .art-bild .punkte li { line-height: 1.3; }
  .satz { margin-bottom: .4em; line-height: 1.35; }
  .titel, .art-ende .titel { font-size: 24px; margin-bottom: 4px; }
  .art-text .satz { font-size: 17px; }
  
  .art-profil { gap: 24px; max-width: none; align-items: start; }
  .portrait img { max-height: 50svh; }
  .kontakt { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; font-size: 13px; line-height: 1.5; }
  .profil__links { gap: 6px; }
  .zwischen { margin: 6px 0 2px; }
  .rolle { margin-bottom: 4px; }
  .arbeitsweise { font-size: 14px; line-height: 1.3; }
  .arbeitsweise li { margin-bottom: 1px; }
  
  .art-ende .zitat--gross p { font-size: 21px; }
  .art-ende .zitat--gross p::after { margin-top: 8px; }
  .art-ende .wege { margin-top: 8px; }
  .art-ende .knopf { padding: 8px 18px; }
  .fuss { margin-top: 8px; padding-top: 6px; }
  .fuss .recht { margin-top: 2px; }
  
  .art-station, .art-einstieg { gap: 20px; max-width: none; align-items: start; }
  .zeit { margin-bottom: 2px; }
  .untertitel { margin: 0 0 6px; font-size: 16px; }
  .aufgaben--kurz { font-size: 14px; line-height: 1.3; margin-bottom: 4px; }
  .aufgaben--kurz li { margin-bottom: 2px; }
  .art-station .kurvenfeld, .art-einstieg .kurvenfeld { height: 60svh; margin-top: 0; }
  .textfeld .weiter { margin-top: 2px; padding: 6px 0; }
  .satz--profil { font-size: 15px; margin-bottom: .3em; }
  .stationsliste li a { padding-top: 2px; padding-bottom: 2px; }
  
  .y85__geburt img { height: 34svh; }
  .y85__zeit { height: 7.5rem; }
  .y85__imgs img { width: 2.6rem; }
  .y85__imgs img:nth-child(2) { width: 2.1rem; }
  
  .karte { padding: 12px 24px; }
  .karte .satz { font-size: 16px; }
}

.art-text .titel .amp { display: block; margin: .05em 0; }

.profil__links, .folie.eng .profil__links { flex-direction: column; container-type: inline-size; }
.kontakt, .folie.eng .kontakt { display: flex; flex-wrap: nowrap; justify-content: center; gap: .5em; width: max-content; font-size: 3.4vw; font-size: clamp(10px, calc((100cqw + 16px) / 27.2), 15px); line-height: 1.4; text-align: center; white-space: nowrap; }  
@media (min-width: 761px) { .kontakt, .folie.eng .kontakt { font-size: 13px; font-size: clamp(11px, calc((100cqw + 40px) / 27.2), 15px); } }
@media (min-width: 761px) and (max-width: 1000px) { .art-profil { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.kontakt a, .kontakt li > span { position: relative; display: inline-flex; align-items: center; gap: .25em; padding: 5px 0; border: 0; color: var(--tinte); font-weight: 500; }
.kontakt a::after { content: ''; position: absolute; inset: -11px -3px; }  
.kontakt a .kontakt__text { border-bottom: 1px solid var(--gold); }
.kontakt svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; fill: none; stroke: var(--tinte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#pencil-line); opacity: .85; }
@media (max-height: 500px) and (min-width: 561px) { .kontakt a, .kontakt li > span { padding: 1px 0; } }
@media (max-width: 345px) { .art-text .satz { font-size: 19px; } .art-text .titel { font-size: 24px; } }  

@media (min-height: 501px) {
  .r-jahr { margin-bottom: 6px; }
  .r-titel { margin-bottom: 16px; }
  .art-bild .bildfeld, .art-gross .bildfeld { margin-bottom: 26px; }
  .art-bild .satz, .art-gross .textfeld .satz { margin-bottom: .9em; }
  .art-bild .satz:last-child, .art-gross .textfeld .satz:last-child { margin-bottom: 0; }
  .unter--text { margin-bottom: 10px; }
}
@media (min-height: 501px) and (max-width: 760px) {
  .r-jahr { margin-bottom: 4px; }
  .r-titel { margin-bottom: 12px; }
  .art-bild .bildfeld, .art-gross .bildfeld { margin-bottom: 20px; }
}

@media (min-height: 501px) {
  .art-bild .bildfeld, .art-gross .bildfeld:not(.bildfeld--kurve) { margin-top: clamp(32px, 7svh, 60px); }
}
@media (min-height: 501px) and (min-width: 761px) { .art-gross.ist-kurve .bildfeld--kurve { margin-top: clamp(32px, 7svh, 60px); } }  
@media (max-height: 620px) and (min-height: 501px) { .art-bild .bildfeld, .art-gross .bildfeld:not(.bildfeld--kurve) { margin-top: 10px; } }  

.folie.art-zeitleiste { --y85: clamp(8.4rem, 18svh, 10rem); --y85-abstand: 2.4rem; --y85-rand: 144px; --y85-oben: 0px; --y85-unter: 26px; --y85-kopf: 36px; --y85-text: 46px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; align-items: start; justify-items: center; gap: 0; max-width: 1120px; margin: 0 auto; text-align: center; }
.folie.art-zeitleiste .bildfeld { width: 100%; height: max(22svh, min(var(--bildflaeche), calc(100svh - var(--y85-rand) - var(--y85-oben) - var(--y85-unter) - var(--y85-kopf) - var(--y85-text) - var(--y85-abstand) - var(--y85)))); margin: var(--y85-oben) 0 var(--y85-unter); display: flex; align-items: center; justify-content: center; }
.folie.art-zeitleiste .y85__geburt { height: 100%; }
.folie.art-zeitleiste .y85__geburt img { height: 100%; }
.folie.art-zeitleiste .r-titel { display: none; }
.folie.art-zeitleiste .textfeld { display: block; width: 100%; max-width: 46rem; min-height: 0; text-align: center; }
.folie.art-zeitleiste .y85__zeit { height: var(--y85); margin: var(--y85-abstand) 0 0; }
@media (max-width: 760px) { .folie.art-zeitleiste { --y85: 6.4rem; --y85-abstand: 2.2rem; --y85-rand: 102px; --y85-unter: 20px; --y85-kopf: 32px; --y85-text: 72px; } }
@media (min-height: 621px) { .folie.art-zeitleiste { --y85-oben: clamp(16px, 3svh, 32px); } }
@media (max-height: 500px) and (min-width: 561px) {
  .folie.art-zeitleiste { --y85: 5.7rem; max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 28px; --y85-oben: 0px; align-content: stretch; }
  .folie.art-zeitleiste .bildfeld { grid-column: 1; grid-row: 1 / span 2; height: calc(100svh - 54px - 26px - 6px - var(--y85) - 1.5rem); margin: 0; }
  .folie.art-zeitleiste .r-jahr { grid-column: 2; grid-row: 1; align-self: end; }
  .folie.art-zeitleiste .textfeld { grid-column: 2; grid-row: 2; }
  .folie.art-zeitleiste .y85__zeit { grid-column: 1 / -1; grid-row: 3; width: 100%; height: var(--y85); margin: 1.5rem 0 0; }
  .folie.art-zeitleiste .y85__imgs { grid-template-rows: 1.5rem 1.1rem; }
  .folie.art-zeitleiste .y85__imgs img { width: 2.2rem; }
  .folie.art-zeitleiste .y85__imgs img:nth-child(2) { width: 1.8rem; }
  .folie.art-zeitleiste .y85__ev--mario .y85__imgs img { width: 2.8rem; }
  .folie.art-zeitleiste .y85__ev--mario .y85__imgs img:nth-child(2) { width: 2.3rem; }
  .folie.art-zeitleiste .y85__lab { height: .85rem; }
  .folie.art-zeitleiste .y85__imgs--marke img { width: auto; height: 2.5rem; }
  .folie.art-zeitleiste .y85__ev--geburt .y85__punkt--licht { width: 3.2rem; height: 3.2rem; margin: -1.25rem 0 0 -1.6rem; }
}

@media (min-height: 501px) {
  .folie.art-profil .etikett { margin-bottom: clamp(8px, 2.2svh, 22px); }
  .folie.art-profil .satz { margin-bottom: 0; }
  .folie.art-profil .zwischen { margin: clamp(12px, 4.4svh, 44px) 0 clamp(6px, 1.8svh, 18px); }
  .folie.art-profil .arbeitsweise li { margin-bottom: clamp(3px, 1.5svh, 14px); }
  .folie.art-profil .arbeitsweise li:last-child { margin-bottom: 0; }
}
@media (min-height: 501px) and (max-height: 700px) {  
  .folie.art-profil .zwischen { margin: 14px 0 6px; }
  .folie.art-profil .arbeitsweise li { margin-bottom: 5px; }
}

.schleier { position: fixed; inset: 0; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .42s ease; }
.schleier.an { opacity: 1; }
@media (max-height: 500px) and (min-width: 561px) { .art-ende .logo-gross { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 10px; } }

.tuerbox .pfeil::after { content: " \2193"; }
@media (pointer: coarse) { .tuerbox .pfeil::after { content: " \2191"; } }

.art-vollbild { inset: 0; padding: 0; margin: 0; max-width: none; overflow: hidden; }
.art-vollbild .hintergrund { position: absolute; inset: 0; margin: 0; }
.art-vollbild .hintergrund img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }  
@media (max-aspect-ratio: 4/5) { .art-vollbild .hintergrund img { object-position: 50% 25%; } }  
@media (max-width: 430px) { .art-ende .knopf { padding: 14px 16px; margin-left: 0; margin-right: 0; font-size: 14px; letter-spacing: .04em; } }
@media (max-width: 345px) { .y85__imgs.y85__imgs--marke img, .folie.art-zeitleiste .y85__imgs.y85__imgs--marke img { height: 2.1rem; } }
@media (max-width: 345px) { .art-ende .knopf { padding: 14px 12px; font-size: 13px; letter-spacing: .02em; } }  

.am-vollbild .kopf, .am-vollbild .balken { visibility: hidden; }
.am-vollbild .rahmen { display: none; }


.art-titel .hintergrund { z-index: 0; }
.art-titel::before { z-index: 1; }  
.art-titel .titelbox { z-index: 2; }
.wer__name { display: block; margin-bottom: 4px; font: 500 clamp(21px, 2vw, 28px)/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--tinte); }
.wer__beruf { display: block; white-space: nowrap; font-size: min(14px, 3.5vw); }
@media (min-aspect-ratio: 1/1) and (min-height: 501px) {
  .art-titel .hintergrund { overflow: hidden; }
  .art-titel .hintergrund img { transform: translateY(11svh); }
  .art-titel::before { height: 54%; background: linear-gradient(to bottom, rgb(246 236 221) 26%, rgb(246 236 221 / .86) 48%, rgb(246 236 221 / 0)); }
  .art-titel .titelbox { padding-top: 14svh; }  
}
@media (min-aspect-ratio: 1/1) and (min-height: 501px) and (max-height: 780px) { .art-titel .titelbox { padding-top: 11svh; } }
@media (max-aspect-ratio: 1/1) {
  .art-titel .hintergrund img { object-position: 50% 0; }
  .art-titel .titelbox { padding-top: clamp(56px, 13svh, 120px); }
}
@media (max-width: 760px) { .wer__beruf { font-size: 14px; letter-spacing: .01em; text-transform: none; } }  
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {  
  .art-titel .hintergrund { overflow: hidden; }
  .folie.art-titel { inset: 0; }
  .art-titel .hintergrund img { object-position: 50% 0; transform: translateY(16svh); }
  .art-titel::before { height: 62%; background: linear-gradient(to bottom, rgb(246 236 221) 40%, rgb(246 236 221 / .8) 62%, rgb(246 236 221 / 0)); }
  .art-titel .titelbox { padding-top: 44px; }
  .art-titel .leitsatz { font-size: 22px; margin-bottom: 4px; }
  .art-titel .wege { margin-top: 2px; }
  .art-titel .knopf { padding: 8px 18px; margin: 2px; }
}
@media (max-height: 500px) { .wer__name, .wer__beruf { display: inline; margin: 0; font-size: 14px; } .wer__name { font-weight: 600; } .wer__name::after { content: " · "; } }

.kopf__wege .weg[href^="bewerberprofil"], .kopf__wege .weg[href^="bewerberprofil"]:hover { background: #2a2927; border-color: #2a2927; color: #f6ecdd; }


@media (max-width: 360px) {
  .art-titel .titelbox { padding-left: 2px; padding-right: 2px; }
  .art-titel { padding-left: 12px; padding-right: 12px; }
  .wer__beruf { font-size: 13px; letter-spacing: 0; }
  .karte { margin: 0 12px; padding: 16px; }
  .karte .satz { font-size: 18px; line-height: 1.32; margin-bottom: .3em; }
  .folie.sehr-eng.art-bild .satz { font-size: 15px; line-height: 1.28; margin-bottom: .2em; }
  .folie.sehr-eng.art-bild .punkte { margin-bottom: 2px; }
  .folie.sehr-eng.art-bild .punkte li { line-height: 1.2; }
  .folie.sehr-eng .r-titel { margin-bottom: 4px; }
  .folie.sehr-eng.art-bild .bildfeld { margin-bottom: 4px; }
}
@media (max-height: 500px) and (min-width: 561px) {
  .folie.art-tuer, .folie.art-vollbild { inset: 0; }
  .tuerbox { padding-bottom: 44px; }
  .art-bild .bildfeld, .art-gross .bildfeld, .art-gross.ist-kurve .bildfeld--kurve { height: calc(100% - 20px); }
  .punkte { max-width: 100%; }
  .punkte li { white-space: normal; }
}
@media (max-height: 400px) and (min-width: 561px) {
  .y85__geburt img { height: 26svh; }
  .y85__zeit { height: 6rem; }
  .arbeitsweise { line-height: 1.2; }
  .arbeitsweise li { margin-bottom: 0; }
  .art-bild .satz, .art-gross .textfeld .satz { font-size: 15px; line-height: 1.28; margin-bottom: .2em; }
  .art-bild .punkte li { line-height: 1.18; }
}
@media (max-height: 430px) and (min-width: 561px) {
  .folie.art-profil .zwischen { margin: 2px 0 1px; }
  .folie.art-profil .satz { margin-bottom: 0; }
  .folie.art-profil .arbeitsweise { font-size: 13.5px; }
}
@media (max-height: 340px) and (min-width: 561px) {
  .y85__geburt img { height: 20svh; }
  .y85__zeit { height: 4.6rem; }
  .tuerbox { padding-bottom: 28px; }
  .tuerbox h1 { font-size: 40px; }
}

.slogan { display: block; margin-top: 1px; font: italic 400 14px/1.2 var(--serif); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--tinte-weich); }
@media (max-width: 760px) { .slogan { display: none; } }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 430px) {
  .kontakt, .folie.eng .kontakt { flex-wrap: wrap; width: auto; gap: 0 .8em; font-size: 14px; }
}
@media (max-width: 385px) { .kopf__wege .weg { padding: 0 6px; } .kopf__wege { gap: 3px; } }