/* Seite Ausbildung (ID 339), neu aufgebaut 20.10.2026 (Entwurf seitenplan/ausbildung-neu, Bildwahl Markus).
   Lädt nur auf dieser Seite (inc/ausbildung.php). Klassen an-* setzt der Seiteninhalt (Core-Blöcke). */

/* Seitentitel entfällt: Hauptüberschrift (h1) ist „Heeresbergführer werden“ im Aufmacher, darüber die Vorzeile „Ausbildung“ */
.page-id-339 .seite-titel { display: none; }
.page-id-339 main.seite { padding-top: 0; }
.page-id-339 main.seite > .fliesstext { margin-top: 0 !important; }  /* Abstand des versteckten Titels entfällt */
.page-id-339 .wp-site-blocks { overflow-x: clip; }  /* randlose Flächen mit 100vw: kein Querscrollen durch die Scrollleiste */
.page-id-339 :is(#weg, #voraussetzungen, #sommer, #winter, #einblicke, #orte, #ernennung, #weiterbildung, #fragen, #vorbereitung) { scroll-margin-top: calc(var(--kopf-h) + 16px); }
/* „Der Weg“ (Apple-Effekte 20.10.2026): Sprungziel so, dass unter dem Kopf weißer Abstand steht und kein Rest der schwarzen Satzfläche; scroll-padding des Themes (96 px) ist schon drin. Außerhalb von @media (scripting), das Safari < 17 nicht kennt */
.page-id-339 #weg { scroll-margin-top: calc(var(--kopf-ist, var(--kopf-h)) - 96px + clamp(36px, 6vw, 80px)); }
@media (orientation: landscape) and (max-height: 500px) { .page-id-339 #weg { scroll-margin-top: 0; } }  /* Kopf steht dort nicht fest */
@media (prefers-reduced-motion: no-preference) { html:has(body.page-id-339) { scroll-behavior: smooth; } }

.an-nr { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; color: var(--tanne); font-variant-numeric: tabular-nums; }
.fliesstext .an-einleitung { margin: 14px 0 0; font-size: var(--wp--preset--font-size--gross); line-height: 1.55; color: var(--fels); }
.an-mehr { margin: 18px 0 0; font-weight: 650; }
.an-mehr a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--tanne); text-decoration: none; }  /* Tippfläche 44 px */
.an-mehr a:hover { text-decoration: underline; }
.fliesstext :is(.an-weg, .an-paar, .an-teile, .an-streifen) h2 { margin: 0; font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 750; }

/* Randlose Flächen: Aufmacher und Schlussband */
.fliesstext > :is(.an-held, .an-schluss) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100vw; max-width: none; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden; background: #182024; color: #FFFFFF; }
.fliesstext > .an-held { min-height: clamp(540px, 82svh, 860px); margin-top: 0 !important; }
.an-held > .an-held-bild, .an-schluss > .an-schluss-bild { position: absolute; inset: 0; margin: 0; }
.an-held-bild img, .an-schluss-bild img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.an-held-bild img { object-position: 50% 45%; }
.an-schluss-bild img { object-position: 50% 45%; }
.an-held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 17, 0) 0%, rgba(10, 15, 17, 0) 40%, rgba(10, 15, 17, .18) 70%, rgba(10, 15, 17, .36) 100%), linear-gradient(90deg, rgba(10, 15, 17, .5) 0%, rgba(10, 15, 17, .3) 40%, rgba(10, 15, 17, .08) 64%, rgba(10, 15, 17, 0) 80%); pointer-events: none; }  /* hell lassen, dunkel nur unten links hinter dem Text (dazu ::before) */
:is(.an-held-inhalt, .an-schluss-inhalt) :is(p, h1, h2, li) { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 22px rgba(0, 0, 0, .4); }
.an-held-inhalt, .an-schluss-inhalt { position: relative; z-index: 2; box-sizing: border-box; width: min(1200px, calc(100% - 2 * var(--wp--style--root--padding-left, 24px))); margin: 0 auto; }
.an-held-inhalt { align-self: end; padding-bottom: clamp(32px, 7vh, 72px); }
.an-held-inhalt > * { margin-block: 0; }
.an-vorzeile { font-size: clamp(0.9375rem, 1.2vw, 1.125rem); font-weight: 700; font-stretch: 105%; color: #FFFFFF; display: inline-block; }
/* Weicher Schatten nur hinter dem Textblock: Vorzeile und Titel bleiben auf hellem Schnee lesbar, das übrige Bild bleibt hell */
.an-held-inhalt::before { content: ""; position: absolute; z-index: -1; inset: -150px -320px -110px -140px; background: linear-gradient(90deg, rgba(10, 15, 17, .72) 0%, rgba(10, 15, 17, .68) 58%, rgba(10, 15, 17, .4) 76%, rgba(10, 15, 17, .12) 90%, rgba(10, 15, 17, 0) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0, #000 140px); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0, #000 140px); mask-composite: intersect; pointer-events: none; }  /* weiches Band statt Ellipse: keine Bogenkante am Himmel; links weich, sonst Kante ab 1480 px */
.fliesstext .an-titel { margin-top: 8px; font-size: clamp(1.875rem, 9vw, 5rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; line-height: .98; color: #FFFFFF; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.an-held-text { max-width: 36rem; margin-top: 16px !important; font-size: var(--wp--preset--font-size--gross); line-height: 1.5; color: rgba(255, 255, 255, .92); }
.an-fakten { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 56px); margin: clamp(22px, 3vh, 32px) 0 0 !important; padding: 0; list-style: none; font-size: 0.875rem; color: rgba(255, 255, 255, .78); }
.an-fakten li { margin: 0; }
.an-fakten strong { display: block; margin-bottom: 4px; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 750; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.1; color: #FFFFFF; }
:is(.an-held, .an-schluss) .an-knoepfe { margin-top: clamp(22px, 3vh, 30px) !important; gap: 12px; }
:is(.an-held, .an-schluss) .wp-block-button__link { padding: 0.8em 1.25em; border: 1px solid #FFFFFF; background: #FFFFFF; color: #182024; }
:is(.an-held, .an-schluss) .wp-block-button__link:hover { background: #E9E9E6; }
:is(.an-held, .an-schluss) .is-style-outline .wp-block-button__link { background: rgba(12, 17, 20, .25); color: #FFFFFF; border-color: rgba(255, 255, 255, .8); }
:is(.an-held, .an-schluss) .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .14); }
:is(.an-held, .an-schluss) :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* Der Weg: Überschrift und Einleitung (Schrittleiste entfernt, Markus 20.10.2026) */
.fliesstext > .an-weg { margin-top: clamp(56px, 8vw, 104px) !important; }
.an-kopf { max-width: 44rem; }
.an-kopf > * { margin-block: 0; }

/* Bild-Text-Paare wie auf „Aufgaben“ */
.fliesstext > :is(.an-paar, .an-teile, .an-streifen, #orte) { margin-top: clamp(72px, 9vw, 128px) !important; }
.an-paar { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.an-paar-gedreht > .an-bild { order: 2; }
.an-text > * { margin-block: 0; }
.an-text > p + p { margin-top: 12px; }
.an-bild { margin: 0; }
.an-bild img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); background: var(--nebel); }
.an-paar-bild img { aspect-ratio: 3 / 2; }
#voraussetzungen .an-paar-bild img { aspect-ratio: auto; height: min(72vh, 640px); }
.an-liste { margin: 22px 0 0 !important; padding: 0; list-style: none; border-top: 1px solid var(--nebel); font-size: 0.9375rem; line-height: 1.5; color: var(--schiefer); }
.an-liste li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--nebel); }
.an-liste strong { display: block; margin-bottom: 4px; font-size: 1.0625rem; font-weight: 650; line-height: 1.35; color: var(--fels); }

/* Sommer und Winter nebeneinander, oben bündig (versetzt ließ rechts oben ein Loch, Markus 20.10.) */
.an-teile > .an-teil { margin-block: 0 !important; }  /* WordPress-Blockabstand, sonst steht Winter 20 px tiefer */
.an-teile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.an-teil > * { margin-block: 0; }
.an-teil > p { margin-top: 10px; line-height: 1.55; }
.an-teil > .an-bild { margin-bottom: 22px; }
.an-teil-bild img { aspect-ratio: 1 / 1; object-position: 50% 42%; }
.an-teil .an-themen { font-weight: 600; color: var(--fels); }

/* Bildstreifen: wischen oder Knöpfe (die Knöpfe setzt ausbildung.js) */
.an-streifen-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; }
.an-streifen-kopf > * { grid-column: 1; margin-block: 0; }
.an-streifen-kopf > .an-streifen-steuer { grid-column: 2; grid-row: 1 / span 2; }
.an-streifen-steuer { display: flex; gap: 8px; }
.an-streifen-steuer button { min-height: 44px; padding: 0 16px; border: 1px solid var(--fels); border-radius: 999px; background: transparent; color: var(--fels); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.an-streifen-steuer button:hover:not([aria-disabled="true"]) { background: var(--fels); color: var(--weiss); }
.an-streifen-steuer button[aria-disabled="true"] { opacity: .35; cursor: default; }  /* aria-disabled statt disabled: der Tastaturfokus bleibt am Knopf (Opus M3) */
.an-streifen-liste { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 27vw, 290px); gap: clamp(12px, 1.4vw, 18px); margin: 28px 0 0 !important; padding: 0 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.an-streifen-liste:focus-visible { outline: 2px solid var(--tanne); outline-offset: 4px; }
.an-streifen-liste > .an-modul { margin: 0 !important; scroll-snap-align: start; }
.an-modul img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--nebel); }
.an-modul figcaption { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.4; text-align: left; color: var(--schiefer); }
.an-modul figcaption strong { display: block; font-size: 1rem; color: var(--fels); }

/* Karte und Häufige Fragen: Überschriften wie die übrigen Abschnitte, ohne die alte Trennlinie (Opus S5) */
.page-id-339 .fliesstext :is(.lehrgang-kopf :is(h2, h3), .fragen-kopf h2) { font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 750; letter-spacing: -0.02em; line-height: 1.12; }
.page-id-339 .fliesstext > :is(.lehrgang, .fragen) { border-top: 0; padding-top: 0; }
.page-id-339 .fliesstext > .fragen { margin-top: clamp(72px, 9vw, 128px); }

/* Schlussband */
.fliesstext > .an-schluss { min-height: clamp(420px, 60svh, 620px); margin-top: clamp(72px, 9vw, 128px) !important; margin-bottom: 0 !important; }
.an-schluss::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 15, 17, .56) 0%, rgba(10, 15, 17, .36) 42%, rgba(10, 15, 17, 0) 68%); pointer-events: none; }
.an-schluss-inhalt::before { content: ""; position: absolute; z-index: -1; inset: -60px auto -60px -160px; width: min(64rem, calc(100% + 160px)); background: linear-gradient(90deg, rgba(10, 15, 17, .6) 0%, rgba(10, 15, 17, .54) 55%, rgba(10, 15, 17, .3) 75%, rgba(10, 15, 17, .08) 90%, rgba(10, 15, 17, 0) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0, #000 160px); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0, #000 160px); mask-composite: intersect; pointer-events: none; }  /* weiches Band wie im Aufmacher */
.an-schluss-inhalt { align-self: end; padding-block: 56px 40px; }  /* Markus 20.10.2026: Knöpfe auf jedem Gerät 40 px über der schwarzen Kante, wie am Telefon (mittig saß der Text am iPad hoch 178 px darüber) */
.an-schluss-inhalt > * { max-width: 34rem; margin-block: 0; }
.fliesstext .an-schluss h2 { font-size: clamp(1.875rem, 3.6vw, 3rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.025em; line-height: 1.05; color: #FFFFFF; }
.an-schluss-inhalt > .an-schluss-hinweis { margin-top: 12px; font-size: 0.9375rem; color: rgba(255, 255, 255, .82); }
.an-schluss-hinweis a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.an-schluss-hinweis a:hover { color: #8FD1B5; }
.an-schluss-inhalt > p { margin-top: 16px; font-size: var(--wp--preset--font-size--gross); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.page-id-339 main.seite { padding-bottom: 0; }
.page-id-339 main.seite > .fliesstext { margin-bottom: 0; }
.page-id-339 footer .fuss { margin-top: 0; }

/* Tablet */
@media (max-width: 900px) {
	.an-paar { grid-template-columns: minmax(0, 1fr); }
	.an-paar-gedreht > .an-bild { order: 0; }
	#voraussetzungen .an-paar-bild img { height: auto; aspect-ratio: 3 / 2; }
	.an-schluss-inhalt::before { background: linear-gradient(90deg, rgba(10, 15, 17, .6) 0%, rgba(10, 15, 17, .54) 72%, rgba(10, 15, 17, .2) 90%, rgba(10, 15, 17, 0) 100%); }  /* Text reicht hier weiter nach rechts */
}
/* iPad und kleine Laptops: Aufmacher Grat (viel heller Schnee unter dem Text) braucht ein dunkleres Band */
@media (min-width: 641px) and (max-width: 1100px) { .an-held-inhalt::before { background: linear-gradient(90deg, rgba(10, 15, 17, .8) 0%, rgba(10, 15, 17, .76) 58%, rgba(10, 15, 17, .5) 76%, rgba(10, 15, 17, .16) 90%, rgba(10, 15, 17, 0) 100%); } }
/* Telefon */
@media (max-width: 640px) {
	.fliesstext > .an-held { min-height: 86svh; }
	.an-held-bild img { object-position: 36% 40%; }  /* Telefon: die Seilschaft am Grat bleibt im Bild */
	:is(.an-held-inhalt, .an-schluss-inhalt)::before { display: none; }  /* Telefon: der Text deckt fast das ganze Bild, der Verlauf reicht */
	.an-held::after { background: linear-gradient(180deg, rgba(10, 15, 17, .1) 0%, rgba(10, 15, 17, .4) 16%, rgba(10, 15, 17, .7) 36%, rgba(10, 15, 17, .88) 100%); }
	.an-fakten { gap: 12px 22px; font-size: 0.8125rem; }
	:is(.an-held, .an-schluss) .an-knoepfe .wp-block-button { flex: 1 1 auto; }
	:is(.an-held, .an-schluss) .an-knoepfe .wp-block-button__link { width: 100%; }
	.an-teile { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.an-teil-bild img { aspect-ratio: 1 / 1.05; }
	.an-streifen-kopf { display: block; }
	.an-streifen-steuer { display: none; }
	.an-streifen-liste { grid-auto-columns: 74vw; margin-right: calc(-1 * var(--wp--style--root--padding-right, 16px)) !important; padding-right: var(--wp--style--root--padding-right, 16px); }
	.fliesstext > .an-schluss { min-height: 0; }
	.an-schluss::after { background: linear-gradient(180deg, rgba(10, 15, 17, .2) 0%, rgba(10, 15, 17, .62) 38%, rgba(10, 15, 17, .8) 100%); }
	.an-schluss-inhalt { align-self: end; padding: 120px 0 40px; }
}
/* Kleine Telefone: der Text beginnt höher im hellen Schnee, Verlauf dort früher */
@media (max-width: 360px) { .an-held::after { background: linear-gradient(180deg, rgba(10, 15, 17, .24) 0%, rgba(10, 15, 17, .66) 16%, rgba(10, 15, 17, .82) 36%, rgba(10, 15, 17, .92) 100%); } }

/* ── Effekte nach Apple-Vorbild (Markus 20.10.2026, Demo seitenplan/apple-effekte, Auswahl A B C F G H) ──
   ausbildung.js setzt an-kopf-weg / an-kopf-fest (Kopf) und an-bewegt (Bewegung erlaubt). Bei „Bewegung reduzieren“
   bleibt alles stehen, ohne Skript gilt der normale Kopf. Alle Inhalte sind ohne Effekt lesbar. */
.page-id-339 { --an-rand: max(var(--wp--style--root--padding-left, 24px), calc((100vw - 1200px) / 2)); --an-nacht: #0A0F11; }
@media (prefers-color-scheme: dark) { .page-id-339 { --an-nacht: #000000; } }  /* dunkel: Bänder heben sich vom Seitengrund ab (Sonnet H4) */
.an-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A  Kopf: auf dem Aufmacher ohne Balken (durchsichtig wie auf der Startseite), beim Scrollen weg, nach dem halben Aufmacher hell von oben herein */
@media (scripting: enabled) {
	.page-id-339 main.seite { margin-top: calc(-1 * var(--kopf-ist, var(--kopf-h))) !important; }
	.page-id-339 .wp-site-blocks > header.wp-block-template-part { transition: transform 450ms cubic-bezier(.2, .7, .2, 1); }
	html.an-kopf-weg body.page-id-339 .wp-site-blocks > header.wp-block-template-part:not(:focus-within) { transform: translateY(calc(-100% - 48px)); }
	body.page-id-339 .kopf { transition: box-shadow 300ms ease; }
	body.page-id-339 .kopf::before { transition: opacity 300ms ease; }
	html:not(.an-kopf-fest) body.page-id-339 .kopf { box-shadow: none; }
	html.an-kopf-fest body.page-id-339 .kopf::before { background: rgba(245, 245, 244, .98); -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1); }
	html:not(.an-kopf-fest) body.page-id-339 .kopf::before { background: linear-gradient(to bottom, rgba(12, 17, 20, .62) 0%, rgba(12, 17, 20, .28) 60%, rgba(12, 17, 20, 0) 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
	html:not(.an-kopf-fest) body.page-id-339 .marke-name a { color: #FFFFFF; }
	html:not(.an-kopf-fest) body.page-id-339 .marke-name span { color: rgba(255, 255, 255, .95); }
	html:not(.an-kopf-fest) body.page-id-339 .marke-name :is(a, span) { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 14px rgba(0, 0, 0, .4); }  /* auf hellem Schnee lesbar (Sonnet S2) */
	html:not(.an-kopf-fest) body.page-id-339 .marke-abzeichen img { background: #F7F7F5; box-shadow: 0 0 0 4px #F7F7F5; border-radius: 10px; }  /* Fläche per Schatten statt padding: der Kopf behält seine Höhe, nichts springt */
	html:not(.an-kopf-fest) body.page-id-339 .haupt .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { color: #FFFFFF; }
	html:not(.an-kopf-fest) body.page-id-339 .haupt .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover { color: #BFE8D6; }
	html:not(.an-kopf-fest) body.page-id-339 .haupt .wp-block-navigation__responsive-container-open { color: #FFFFFF; }
	html:not(.an-kopf-fest) body.page-id-339 .kopf-login .wp-block-button__link { border-color: rgba(255, 255, 255, .9); color: #FFFFFF; }
	html:not(.an-kopf-fest) body.page-id-339 .kopf-login .wp-block-button__link:hover { background: #FFFFFF; color: #182024; }
	html:not(.an-kopf-fest) body.page-id-339 .kopf a:focus-visible { outline-color: #FFFFFF; }
	/* B  Aufmacher bildschirmhoch, der Kopf liegt darauf */
	.page-id-339 .fliesstext > .an-held { min-height: max(540px, 100vh); min-height: max(540px, 100svh); }
}
@media (scripting: enabled) and (prefers-color-scheme: dark) { html.an-kopf-fest body.page-id-339 .kopf::before { background: rgba(18, 25, 28, .98); } }
@media (prefers-reduced-motion: reduce) { .page-id-339 .wp-site-blocks > header.wp-block-template-part { transition: none !important; } }

/* B  Auftakt: das Bild zoomt einmal sanft auf, der Text steigt nacheinander ein; beim Scrollen bleibt das Bild zurück (CSS-Scrollanimation, ohne sie mit Maus per Skript) */
.an-held > .an-held-bild { will-change: transform; }
.an-held-inhalt:focus-within { opacity: 1 !important; transform: none !important; animation: none !important; }  /* Tastatur: ein fokussierter Knopf ist nie ausgeblendet (Opus M1) */
@media (prefers-reduced-motion: no-preference) {
	.an-held-bild img { animation: an-auftakt-bild 1800ms cubic-bezier(.2, .7, .2, 1) both; }
	.an-held-inhalt > * { animation: an-auftakt-text 900ms cubic-bezier(.2, .7, .2, 1) both; }
	.an-held-inhalt > :nth-child(2) { animation-delay: 100ms; }
	.an-held-inhalt > :nth-child(3) { animation-delay: 200ms; }
	.an-held-inhalt > :nth-child(4) { animation-delay: 300ms; }
	.an-held-inhalt > :nth-child(5) { animation-delay: 400ms; }
}
@keyframes an-auftakt-bild { from { transform: scale(1.08); } to { transform: none; } }
@keyframes an-auftakt-text { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* B und G als CSS-Scrollanimation (21.10.2026): Der Browser führt sie beim Scrollen selbst mit, auch wenn iPhone und iPad
   außerhalb der Seite scrollen; vorher kamen die Skriptwerte dort Bilder zu spät und der Übergang hakte. ausbildung.js setzt
   an-scroll-css und misst --an-held-h und --an-text-oben. clip-path (Ernennung) rechnet Safari noch auf der Seite:
   im iOS-26.5-Simulator gemessen stetig, 2–3 Bilder verzögert, seitlich nicht sichtbar. Werte wie vorher im Skript: Bild 30 % zurück und 6 % größer, Text
   steigt 70 px und blendet aus, während sein oberer Rand von 53 % auf 8 % der Bildschirmhöhe steigt (ganz oben immer voll). */
@keyframes an-held-zurueck { from { transform: none; } to { transform: translate3d(0, 30%, 0) scale(1.06); } }
@keyframes an-held-blende { from { opacity: 1; } to { opacity: 0; } }
@keyframes an-held-steigt { from { transform: none; } to { transform: translate3d(0, -70px, 0); } }
@keyframes an-oeffnen { from { clip-path: inset(0 var(--an-rand) round var(--radius)); } to { clip-path: inset(0 0 round 0); } }
html.an-scroll-css .an-held > .an-held-bild { animation: an-held-zurueck linear both; animation-timeline: scroll(root); animation-range: 0 var(--an-held-h, 100svh); }
html.an-scroll-css .an-held:not(.an-held-still) > .an-held-inhalt { animation: an-held-blende linear both, an-held-steigt linear both; animation-timeline: scroll(root), scroll(root); animation-range: max(1px, calc(var(--an-text-oben, 0px) - 53svh)) max(120px, calc(var(--an-text-oben, 0px) - 8svh)), 0 var(--an-held-h, 100svh); }
html.an-scroll-css .page-id-339 #ernennung > .an-bild { animation: an-oeffnen linear both; animation-timeline: view(); animation-range: cover 0% cover 80svh; }
html.an-bewegt.an-scroll-ruhig .page-id-339 #ernennung > .an-bild { clip-path: none; }  /* Touchgerät ohne CSS-Scrollanimation: Bild steht offen, nichts hakt */

/* C  Satz auf Schwarz, die Wörter werden beim Lesen hell (Skript zerlegt den Satz in Wörter) */
.fliesstext > .an-satz { width: 100vw; max-width: none; margin: 0 calc(50% - 50vw) !important; padding: clamp(112px, 20vh, 200px) var(--an-rand); background: var(--an-nacht); }
.fliesstext .an-satz-text { margin: 0; max-width: 17ch; font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 750; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1.1; color: #FFFFFF; text-wrap: balance; }
html.an-bewegt .an-wort { color: rgba(255, 255, 255, .4); transition: color 400ms ease; }  /* auch unbeleuchtet Großtext-Kontrast über 3:1 */
html.an-bewegt .an-wort.an { color: #FFFFFF; }

/* F  Bildreihe auf Schwarz, randlos; läuft am Rechner selbst weiter (6 s je Bild, Anhalten, Punkte zeigen den Fortschritt) */
.fliesstext > .an-streifen { width: 100vw; max-width: none; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: clamp(88px, 14vh, 144px) var(--an-rand); background: var(--an-nacht); color: #F2F5F6; }
.fliesstext .an-streifen h2 { color: #FFFFFF; }
.fliesstext .an-streifen .an-einleitung { color: #A8B5BA; }
.an-streifen .an-streifen-liste { position: relative; margin-inline: calc(-1 * var(--an-rand)) !important; padding-inline: var(--an-rand); scroll-padding-inline: var(--an-rand); scrollbar-width: none; }
.an-streifen .an-streifen-liste::-webkit-scrollbar { display: none; }
.an-streifen .an-streifen-liste:focus-visible { outline-color: #FFFFFF; outline-offset: -2px; }
.an-streifen .an-modul img { background: #1B2428; }
.an-streifen .an-modul figcaption { color: #A8B5BA; }
.an-streifen .an-modul figcaption strong { color: #F2F5F6; }
.an-streifen .an-streifen-steuer button { border-color: rgba(255, 255, 255, .7); color: #FFFFFF; }
.an-streifen .an-streifen-steuer button:hover:not([aria-disabled="true"]) { background: #FFFFFF; color: #182024; }
.an-streifen .an-streifen-steuer button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.an-punkte { display: flex; justify-content: center; margin-top: 16px; }
/* Jeder Punkt ist 24 × 44 px Tippfläche (WCAG 2.5.8), sichtbar nur 8 px; der aktive ist eine Pille, die sich in 6 s füllt (nur transform) */
.an-punkte button { flex: none; position: relative; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.an-punkte button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 99px; background: rgba(255, 255, 255, .45); }
.an-punkte button[aria-current] { width: 56px; }
.an-punkte button[aria-current]::after { width: 44px; margin-left: -22px; background: rgba(255, 255, 255, .3); }
.an-punkte .an-fuell { display: none; position: absolute; z-index: 1; left: 50%; top: 50%; width: 44px; height: 8px; margin: -4px 0 0 -22px; border-radius: 99px; background: #FFFFFF; transform-origin: left; transform: scaleX(var(--f, 1)); }
.an-punkte button[aria-current] .an-fuell { display: block; }
.an-punkte:not(.laeuft) button[aria-current]::after { background: rgba(255, 255, 255, .9); }  /* ohne Selbstlauf (Telefon, angehalten): aktive Stelle hell, nicht dunkler als die anderen */
@media (max-width: 400px) { .an-punkte button[aria-current] { width: 40px; } .an-punkte button[aria-current]::after, .an-punkte .an-fuell { width: 32px; margin-left: -16px; } }  /* 13 Punkte passen auch bei 360 px, jeder bleibt 24 px breit */
.an-punkte button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -6px; border-radius: 12px; }
.an-zaehler { display: none; margin: 12px 0 0; text-align: center; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: #A8B5BA; }
.an-punkte.eng { display: none; }  /* zu viele Stellen für die Breite: Zähler statt Punkte (Tippfläche bliebe sonst unter 24 px) */
.an-punkte.eng + .an-zaehler { display: block; }

/* G  Ernennung: Überschrift mittig, das Bild öffnet sich beim Scrollen vom Rahmen auf die volle Breite (CSS-Scrollanimation, ohne sie mit Maus per Skript), Text darunter */
.page-id-339 .fliesstext > #ernennung { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }  /* gap des Bild-Text-Paars entfällt */
.page-id-339 #ernennung > .an-text { display: contents; }
.page-id-339 #ernennung .an-nr { order: 1; }
.page-id-339 .fliesstext #ernennung h2 { order: 2; font-size: clamp(2rem, 4.4vw, 3.25rem); }
.page-id-339 #ernennung .an-einleitung { order: 3; max-width: 36rem; }
.page-id-339 #ernennung > .an-bild { order: 4; align-self: flex-start; width: 100vw; max-width: none; margin: clamp(36px, 6vh, 64px) 0 0 calc(50% - 50vw); }
.page-id-339 #ernennung > .an-bild img { height: min(88vh, 66.7vw); aspect-ratio: auto; border-radius: 0; object-position: 50% 15%; }  /* Hände und Abzeichen oben im Bild ganz zeigen */
.page-id-339 #ernennung > .an-text > p:last-child { order: 5; max-width: 40rem; margin-top: clamp(28px, 4vh, 44px); color: var(--schiefer); }
html.an-bewegt .page-id-339 #ernennung > .an-bild { clip-path: inset(0 var(--an-rand) round var(--radius)); }
@media (max-width: 640px) { .page-id-339 #ernennung > .an-text > p:last-child { text-align: left; } }

/* H  Abschnitte steigen beim ersten Erscheinen leicht ein (Skript setzt an-zeig, sichtbar mit da) */
html.an-bewegt .an-zeig:not(.da) { opacity: 0; transform: translateY(28px); }
html.an-bewegt .an-zeig { transition: opacity 800ms cubic-bezier(.2, .7, .2, 1), transform 800ms cubic-bezier(.2, .7, .2, 1); }
@media print {
	html.an-bewegt .an-zeig { opacity: 1 !important; transform: none !important; }
	:is(.an-held-inhalt, .an-held-inhalt > *, .an-held-bild, .an-held-bild img) { opacity: 1 !important; transform: none !important; animation: none !important; }  /* Skript setzt Werte direkt am Aufmacher (Opus M2) */
	.page-id-339 main.seite { margin-top: 0 !important; }
	:is(.an-streifen-steuer, .an-punkte, .an-zaehler) { display: none !important; }
	html.an-bewegt #ernennung > .an-bild { clip-path: none !important; animation: none !important; }
	html.an-bewegt .an-wort { color: inherit !important; }
	.page-id-339 .wp-site-blocks > header.wp-block-template-part { transform: none !important; }
}