/* AH-BK · Startseite: Hero-Slider, Quicklinks, Abschnitte */
/* Hero-Slider */
.hero-slider { position: relative; height: 575px; overflow: hidden; background: var(--primary-900) }
/* Desktop: höchstens 700px + Header; bei niedrigen Fenstern so viel kleiner, dass die Quicklinks (sichtbarer Teil unter dem Hero
   ca. 100px) plus etwas Luft noch komplett im ersten Bildschirm stehen. Untergrenze 540px. Tablet/Handy: feste Höhen unten. */
.home .hero-slider { --ql-platz: 118px; height: calc(700px + var(--header-h)); height: clamp(540px, calc(100vh - var(--ql-platz)), calc(700px + var(--header-h))); height: clamp(540px, calc(100svh - var(--ql-platz)), calc(700px + var(--header-h))); margin-top: calc(-1 * var(--header-h)) }
.home .hero-inner { padding-top: var(--header-h) }
/* Überblenden: die neue Slide (.active) blendet über der alten (.raus, bleibt voll sichtbar) ein; js/module/startseite.js entfernt .raus nach --slide-fade.
   Der Zoom läuft Standzeit + Überblendung lang und auf der ausblendenden Slide weiter, damit nichts springt. */
.hero-slider { --slide-dauer: 7s; --slide-fade: 1.4s }
.slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; z-index: 0 }
.slide::before { content: ""; position: absolute; inset: 0; background-color: #31436f; background-image: var(--hero); background-size: cover; background-position: center 40%; will-change: transform }
.slide.active { z-index: 2; opacity: 1; visibility: visible; transition: opacity var(--slide-fade) ease-in-out }
.slide.raus { z-index: 1; opacity: 1; visibility: visible }
.slide.active::before, .slide.raus::before { animation: kenburns calc(var(--slide-dauer) + var(--slide-fade)) linear forwards }
@keyframes kenburns { from { transform: scale(1) } to { transform: scale(1.08) } }
.slide.raus .hero-copy { opacity: 0; transition: opacity .35s ease }
.slide.active .hero-copy { animation: hero-copy-rein .9s .25s ease both }
@keyframes hero-copy-rein { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
/* Niedrige Desktop-Fenster: Überschrift und Abstände im Hero etwas kleiner, damit der Text in den kürzeren Hero passt */
@media (min-width: 1021px) and (max-height: 860px) {
	.hero-copy h1, .hero-copy h2 { font-size: clamp(2.8rem, 7.2vh, 4.6rem); margin-bottom: 16px }
	.hero-copy .kicker { margin-bottom: 12px }
	.hero-copy p { margin-bottom: 20px }
}
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 30, 57, .96) 0%, rgba(23, 38, 68, .82) 36%, rgba(28, 45, 75, .22) 70%, rgba(22, 37, 67, .06) 100%) }
.hero-inner { position: relative; height: 100%; display: flex; align-items: center }
.hero-copy { width: min(640px, 60%); padding-left: 16px; color: #fff }
.hero-copy .kicker { margin-bottom: 18px }
.hero-copy h1, .hero-copy h2 { margin: 0 0 21px; font-size: clamp(3.15rem, 5vw, 5.45rem); line-height: .98; letter-spacing: -.05em; font-weight: 800 }   /* fett (Test 11.10.2026, vorher 690 und -.06em) */
.hero-copy h1 em, .hero-copy h2 em { font-style: normal; color: var(--accent) }
.hero-copy p { margin: 0 0 28px; max-width: 520px; font-size: 1.04rem; line-height: 1.65; color: #edf1fb }
.hero-actions { display: flex; align-items: center; gap: 23px; flex-wrap: wrap }
/* Helle Slide (helles Foto): weißer Verlauf, dunkle Schrift */
.slide--hell .hero-shade { background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .8) 34%, rgba(255, 255, 255, .12) 62%, rgba(255, 255, 255, 0) 80%) }
.slide--hell .hero-copy { color: var(--primary-800) }
.slide--hell .hero-copy h1 em, .slide--hell .hero-copy h2 em { color: var(--accent-text) }
.slide--hell .hero-copy p { color: var(--ink) }
.slide--hell :focus-visible { outline-color: var(--primary) }
.hero-slider:has(.slide--hell.active) .hero-meta { color: var(--primary-800) }
.slider-arrow { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .26); background: rgba(12, 23, 47, .28); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background .2s }
.slider-arrow:hover { background: rgba(20, 32, 57, .72) }
.slider-arrow.prev { left: 24px } .slider-arrow.next { right: 24px }
/* Mittig lagen die Pfeile über dem Titel, solange der Rand neben dem Inhalt schmal ist – dann unten auf Höhe der Fortschrittsanzeige */
@media (max-width: 1560px) { .slider-arrow { top: auto; bottom: 52px; transform: none } }
/* Slide-Status: Segmente füllen sich in der Laufzeit einer Slide (animationend schaltet weiter, js/module/startseite.js) */
.hero-meta { position: absolute; left: 0; right: 0; bottom: 60px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 16px; color: #fff; pointer-events: none; transition: color .6s }
.hero-meta > * { pointer-events: auto }
.slide .ki-hinweis { right: 82px; bottom: 67px; z-index: 6 }   /* Hero unten rechts in der Bedienzeile (Höhe wie Zähler und Pfeile), links neben dem rechten Pfeil.
   Nicht tiefer: ab 761 px liegt unten 31 px das Quicklinks-Band (z-index 12) über dem Bild – das lässt sich aus der Folie heraus nicht überbieten. */
@media (min-width: 1561px) { .slide .ki-hinweis { right: 24px } }   /* Pfeile sitzen hier mittig an den Seiten – Hinweis ganz in die Ecke */
.slider-status { display: flex; align-items: center; gap: 14px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums }
.slider-current { display: inline-block; min-width: 2.2ch; font-size: 1.05rem; letter-spacing: .02em }
.slider-current.tick { animation: slider-tick .55s cubic-bezier(.2, .8, .2, 1) }
@keyframes slider-tick { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.slider-total { opacity: .6 }
.slider-progress { display: flex; gap: 6px }
.slider-progress i { position: relative; width: 38px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden }
.hero-slider:has(.slide--hell.active) .slider-progress i { background: rgba(39, 54, 95, .2) }
.slider-progress b { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left }
.slider-progress i.done b { transform: scaleX(1); transition: transform .3s }
.slider-progress i.active b { animation: slider-fill var(--slide-dauer) linear forwards }
@keyframes slider-fill { to { transform: scaleX(1) } }
/* Pause-Knopf (WCAG 2.2.2): hält Segment und Zoom an */
.slider-pause { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: inherit; opacity: .75; cursor: pointer; transition: opacity var(--t) }
.slider-pause:hover { opacity: 1 }
.slider-pause svg { width: 12px; height: 12px; stroke-width: 2.6 }
.slider-pause .ic-play { fill: currentColor; stroke-width: 1.5 }
.slider-pause .ic-play, .slider-pause[aria-pressed="true"] .ic-pause { display: none }
.slider-pause[aria-pressed="true"] .ic-play { display: block }
.hero-slider.pausiert .slider-progress i.active b, .hero-slider.pausiert .slide::before { animation-play-state: paused }
.quicklinks-wrap { position: relative; z-index: 12; margin-top: -31px }
.quicklinks { display: grid; grid-template-columns: repeat(6, 1fr); background: #fff; border: 1px solid #edf0f5; border-radius: var(--r-md); box-shadow: 0 24px 65px rgba(22, 37, 69, .13); overflow: hidden }
.quick { min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 14px; text-align: center; border-right: 1px solid var(--line); transition: background .2s }
.quick:last-child { border-right: 0 }
.quick:hover { background: #f7f9fd }
.quick-icon { display: block; color: var(--primary); transition: color .2s, transform .2s }
.quick-icon svg { width: 34px; height: 34px }
.quick:hover .quick-icon { color: var(--accent-strong) }   /* V21: kein Hüpfen */
.quick-label { font-size: .88rem; font-weight: 700; line-height: 1.3 }
.quick-arrow { display: none }
/* „Mehr“ öffnet das Overlay „Weitere Schnellzugriffe“ (includes/schnellzugriffe.php) */
.quick--mehr { width: 100%; border: 0; background: var(--soft); color: inherit; font: inherit; cursor: pointer }

/* Abschnitte der Startseite */
.home .section.home-programs-head { padding: 130px 0 64px }
.home-programs-head .section-head { margin-bottom: 0 }
.school-feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; background: var(--soft) }
.school-photo { position: relative; overflow: hidden; background: #dfe4ee }
.school-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.school-photo.reveal-init { opacity: 0; transition: opacity .7s ease }
.school-photo.reveal-init.in-view { opacity: 1 }
.school-photo.reveal-init img { transform: scale(1.18); transition: transform 3.4s cubic-bezier(.16, .8, .3, 1) }
.school-photo.reveal-init.in-view img { transform: scale(1) }
.school-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 96px clamp(48px, 7vw, 120px) }
.school-copy h2 { margin: 14px 0 22px; font-size: clamp(2.7rem, 4vw, 4.55rem); line-height: .96; letter-spacing: -.065em; font-weight: 630; color: var(--primary-800) }
.school-copy h2 span { color: var(--primary) }
.school-copy > p { max-width: 620px; margin: 0 0 28px; font-size: 1rem; line-height: 1.75; color: var(--text) }
.school-feature.reverse .school-photo { order: 2 }
.school-stats { display: flex; gap: 38px; margin: 0 0 31px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.school-stats div { display: grid; gap: 2px }
.school-stats b { font-size: 1.55rem; letter-spacing: -.04em; color: var(--primary) }
.school-stats span { font-size: .72rem; color: var(--muted) }
/* Bildungswege als versetzte Abschnitte */
.program-feature { background: #fff }
.program-feature.reverse { background: var(--soft) }
/* Verläufe zur Auswahl (Startseite): drei helle, einer dunkel. Bei .reverse gespiegelt, damit der Verlauf vom Foto weg läuft */
.program-feature--hell-blau { background: linear-gradient(110deg, #dee4f2 0%, #eef1f8 45%, #fff 100%) }   /* 19.10.2026 minimal dunkler (vorher #e6ebf6 / #f3f5fa) */
.program-feature--hell-blau.reverse { background: linear-gradient(250deg, #dee4f2 0%, #eef1f8 45%, #fff 100%) }
.program-feature .school-copy h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); margin: 10px 0 16px; letter-spacing: -.045em; line-height: 1.05 }
.program-feature .school-copy > p { font-size: 1.08rem; line-height: 1.7; max-width: 520px }
.program-feature-facts { width: 100%; max-width: 520px; margin: 22px 0 6px }
.program-feature-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line) }
.program-feature-facts div:last-child { border-bottom: 1px solid var(--line) }
.program-feature-facts dt { align-self: center; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted) }
.program-feature-facts dd { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.35; color: var(--primary-800) }
.program-feature .btn-row { flex-wrap: nowrap; margin-top: 22px }
/* News-Band (blau) und Termine */
.home-band { position: relative; overflow: hidden; padding: 130px 0 140px; background: var(--primary); color: #fff }
.home-band::after { content: ""; position: absolute; right: -180px; top: -180px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .05); pointer-events: none }
.home-band .shell { position: relative; z-index: 1 }
.band-news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) }
.home-band .news-card { background: #fff }
.home-band .news-card:hover { box-shadow: 0 22px 44px rgba(12, 20, 45, .28) }
.home-termine-section { padding: 130px 0 }
/* Bildungswege (Startseite): Karten wie im News-Band, auf Weiß mit blauer Textbox */
.home-wege { padding: 110px 0 0; background: #fff }
.news-card--blau { border-color: transparent; background: var(--primary); color: #fff }   /* Ausnahme zur Bildkarte (V17): blaue Karte auf der Startseite */

.news-card--blau:hover { box-shadow: 0 22px 44px rgba(12, 20, 45, .28) }
.news-card--blau .news-body small { color: rgba(255, 255, 255, .78) }
.news-card--blau .news-body h3 { color: #fff }
.news-card--blau .news-body p { color: rgba(255, 255, 255, .85) }
.news-card--blau .link-arrow { color: #fff }
.termin-hinweis { margin: -12px 0 28px; font-size: 1.05rem; color: var(--muted) }
.termin-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) }
.termin-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--s-5); overflow: hidden; border-radius: var(--r-lg); background: var(--soft-blue); color: var(--ink); text-decoration: none; transition: transform var(--t), box-shadow var(--t) }
a.termin-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) }
.termin-tile .termin-date { align-self: flex-start; margin-bottom: 10px }
.termin-tile-date { display: flex; flex-direction: column; margin-bottom: 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--primary) }
.termin-tile-date b { margin-bottom: 4px; font-size: 2.6rem; line-height: 1; letter-spacing: -.05em; text-transform: none; color: var(--primary-800) }
.termin-tile-date.is-zeitraum b { font-size: 1.7rem; letter-spacing: -.03em }
.termin-tile strong { font-size: 1.15rem; line-height: 1.3; color: var(--primary-800) }
.termin-tile > span:last-child { font-size: .9rem; line-height: 1.5; color: var(--muted) }
.partner-section { padding: 120px 0 110px }
/* Partner: Logos in gleich breiten Feldern mit Trennlinien, grau, beim Überfahren farbig */
.pt-linien { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block: 1px solid var(--line) }
.pt-linien a { height: 130px; display: grid; place-items: center; padding: 20px; border-right: 1px solid var(--line) }
.pt-linien a:last-child { border-right: 0 }
.pt-linien img { width: auto; max-height: 60px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s }
.pt-linien a:hover img { filter: none; opacity: 1 }
.cta-band { padding: 64px 0; background: linear-gradient(110deg, #17223f, #293d70); color: #fff }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px }
.cta-band h2 { margin: 9px 0 0; max-width: 760px; font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.045em; font-weight: 650 }
.cta-band p { margin: 8px 0 0; color: rgba(255, 255, 255, .8) }

/* Responsive */
@media (max-width: 1100px) {
	.band-news, .termin-tiles, .footer-programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 1020px) {
	.hero-slider { height: 535px }
	.hero-copy { width: min(640px, 75%); padding-left: 0 }
	.quicklinks { grid-template-columns: repeat(3, 1fr) }
	.quick { border-bottom: 1px solid var(--line) }
	.quick:nth-child(3) { border-right: 0 } .quick:nth-child(n+4) { border-bottom: 0 }
	.school-feature, .school-feature.program-feature { grid-template-columns: minmax(0, 1fr) }   /* minmax: Spalte nie breiter als der Bildschirm (sonst bei 320 px bis 9 px zu breit) */
	.school-photo { min-height: 320px } .school-feature.reverse .school-photo { order: 0 }
	.school-copy { padding: 62px 48px }
	.program-feature .btn-row { flex-wrap: wrap }
}
@media (max-width: 760px) {
	.hero-slider { height: 520px }
	.hero-inner { align-items: flex-end; padding-bottom: 95px }
	.slide--hell .hero-shade { background: linear-gradient(0deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .86) 48%, rgba(255, 255, 255, .2) 78%, rgba(255, 255, 255, 0) 100%) }
	.hero-copy { width: 100%; max-width: 520px }
	.hero-copy h1, .hero-copy h2 { font-size: clamp(2.75rem, 12vw, 4.1rem); margin-bottom: 16px }
	.slider-arrow { top: auto; bottom: 24px; transform: none; width: 40px; height: 40px }
	.slider-arrow.prev { left: 17px } .slider-arrow.next { right: 17px }
	.hero-meta { bottom: 34px }
	.quicklinks-wrap { margin-top: 0 }
	.quicklinks.shell-wide { width: 100% }
	/* Handy: zwei Reihen à drei (5 Quicklinks + „Mehr“) */
	.quicklinks { grid-template-columns: repeat(3, 1fr); border-radius: 0; box-shadow: none; border-inline: 0 }
	.quick { min-height: 96px; padding: 16px 6px; gap: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line) }
	.quick-icon svg { width: 26px; height: 26px }
	.quick-label { font-size: .8rem; hyphens: auto; -webkit-hyphens: auto }
	.quick:nth-child(3n) { border-right: 0 } .quick:nth-child(n+4) { border-bottom: 0 }
	/* Quicklinks am Handy blau, am Desktop weiß (entschieden 12.10.2026) */
	.quicklinks { background: var(--primary-800); border-color: var(--primary-800) }
	.quicklinks .quick { border-color: rgba(255, 255, 255, .12); color: #fff }
	.quick:hover { background: rgba(255, 255, 255, .06) }
	.quick-icon { color: var(--accent) }
	.quick:hover .quick-icon { color: #fff }
	.quick--mehr { background: rgba(255, 255, 255, .05) }
	.quicklinks :focus-visible { outline-color: var(--accent) }
	.home-band { padding: 72px 0 80px }
	.home-wege { padding: 64px 0 0 }
	.band-news, .termin-tiles, .footer-programs-grid, .content-split, .content-figure-grid { grid-template-columns: 1fr }
	.school-copy { padding: 48px 24px }
	.school-copy h2 { font-size: 3rem }
	.school-stats { gap: 18px; flex-wrap: wrap }
	.program-feature-facts div { grid-template-columns: 1fr; gap: 2px }
	.cta-band-inner { flex-direction: column; align-items: flex-start }
}
@media (max-width: 480px) {
	.hero-slider { height: 500px }
	.hero-copy h1, .hero-copy h2 { font-size: 2.75rem }
	.school-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
}
@media (prefers-reduced-motion: reduce) {
	.slider-progress i.active b { animation: none; transform: scaleX(1) }
}

/* Partner: schmale Bildschirme */
@media (max-width: 1020px) {
	.pt-linien { grid-template-columns: repeat(3, minmax(0, 1fr)) }
	.pt-linien a:nth-child(3) { border-right: 0 } .pt-linien a:nth-child(-n+3) { border-bottom: 1px solid var(--line) }
}
@media (max-width: 760px) {
	.pt-linien a { height: 100px; padding: 14px }
}

/* Responsive (aus anderen Dateien hierher verschoben, damit die Basis-Regeln dieser Datei sie nicht überschreiben) */
@media (max-width: 1020px) {
	.home .hero-slider { height: calc(650px + var(--header-h)) }
}
@media (max-width: 760px) {
	.home-termine-section { padding: 70px 0 }
	.partner-section { padding: 70px 0 }
	.home .hero-slider { height: calc(632px + var(--header-h)) }
	.home .section.home-programs-head { padding: 72px 0 40px }
}
@media (max-width: 480px) {
	.home .hero-slider { height: calc(608px + var(--header-h)) }
}

/* Handy: Bild oben im Querformat, Text darunter (statt Text über einem schmal beschnittenen Bild).
   Das Bild läuft unten in --hero-grund aus, der Textbereich nimmt die Farbe auf und läuft nach unten in Weiß aus.
   Die Slides bleiben übereinander gestapelt (Überblenden unverändert); --bild-h = Bildhöhe, darunter der Textbereich. */
@media (max-width: 760px) {
	.home .hero-slider { --bild-h: min(62vw, 420px); --hero-grund: 238, 241, 248; height: calc(var(--bild-h) + 262px); margin-top: 0; background: #fff }
	.slide::before { bottom: auto; height: var(--bild-h); transform-origin: center top }
	/* Ein Verlauf über die volle Breite: Bild blendet unten aus, ab der Bildkante deckend (verdeckt auch das Ken-Burns-Zoomen), dann nach unten in Weiß */
	/* … und unten über den Quicklinks wieder leicht dunkler (Graublau), damit sich die weißen Quicklinks abheben */
	.hero-shade, .slide--hell .hero-shade { background: linear-gradient(180deg, rgba(var(--hero-grund), 0) calc(var(--bild-h) * .5), rgba(var(--hero-grund), .82) calc(var(--bild-h) * .86), rgb(var(--hero-grund)) var(--bild-h), #fff calc(var(--bild-h) + 110px), #fff calc(100% - 130px), #e2e7f1 100%) }
	.home .hero-inner { align-items: flex-start; padding: calc(var(--bild-h) - 6px) 0 0 }
	.hero-copy, .slide--hell .hero-copy { max-width: 560px; color: var(--primary-800) }
	.hero-copy .kicker { display: none }
	.hero-copy h1, .hero-copy h2 { margin-bottom: 10px; font-size: min(2.1rem, 8.8vw); line-height: 1.02; letter-spacing: -.045em; white-space: nowrap }   /* einzeilig, auch „Vier Wege. Ein Ziel.“ */
	.hero-copy :is(h1, h2) br { display: none }
	.hero-copy h1 em, .hero-copy h2 em { color: var(--accent-text) }
	.hero-copy p, .slide--hell .hero-copy p { margin-bottom: 16px; font-size: .95rem; line-height: 1.55; color: var(--text) }
	.hero-actions .btn { min-height: 46px }
	/* Pfeile seitlich in der Bildmitte, Fortschritt und Pause unten im Textbereich */
	.slider-arrow { top: calc(var(--bild-h) * .42); bottom: auto; transform: translateY(-50%); width: 36px; height: 36px }
	.slider-arrow.prev { left: var(--rand) } .slider-arrow.next { right: var(--rand) }
	.hero-meta, .hero-slider:has(.slide--hell.active) .hero-meta { bottom: 18px; color: var(--primary-800) }
	.slider-progress i, .hero-slider:has(.slide--hell.active) .slider-progress i { width: 26px; background: rgba(39, 54, 95, .16) }
}
@media (max-width: 480px) {
	.home .hero-slider { height: calc(var(--bild-h) + 282px) }
	.hero-copy h1, .hero-copy h2 { font-size: 1.9rem }
}

/* Veranstaltungs-Highlights (Baustein „veranstaltungen“, seit 09.10.2026): Slider, Wechsel alle 7 s (--vh-dauer), Fortschritt in den Punkten.
   Optik je Termin: hell (Standard) · bild (Foto links) · plakat (Foto vollflächig); in der Vorschau umschaltbar. */
.home-highlight { padding: 64px 0 0; background: #fff }
.home-highlight + .home-wege { padding-top: 76px }
.vh { --vh-h: 360px }   /* feste Folienhöhe am Desktop */
.vh-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px }
.vh-kopf .kicker { margin: 0 }
.vh-steuerung { display: flex; align-items: center; gap: 8px }
.vh-zaehler { margin-right: 8px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums }
.vh-zaehler b { color: var(--primary-800) }

/* Punkte: aktiver Punkt wird zur Leiste und füllt sich in --vh-dauer (wie die Segmente im Hero) */
.vh-punkte { display: flex; align-items: center; gap: 6px; margin-right: 6px }
.vh-punkte button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--line); overflow: hidden; cursor: pointer; transition: width .45s cubic-bezier(.2, .7, .2, 1), background .3s }
.vh-punkte button:hover { background: #c9d1e3 }
.vh-punkte button.aktiv { width: 38px; background: rgba(39, 54, 95, .14) }
.vh-punkte b { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left }
.vh-punkte button.aktiv b { animation: vh-fuellen var(--vh-dauer) linear forwards }
@keyframes vh-fuellen { to { transform: scaleX(1) } }
.vh.pausiert .vh-punkte .aktiv b, .vh:has(:focus-visible) .vh-punkte .aktiv b { animation-play-state: paused }   /* läuft auch bei Maus darüber weiter; hält nur bei Tastatur-Fokus */
.vh-pause { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary-800); cursor: pointer; transition: border-color var(--t) }
.vh-pause:hover { border-color: var(--primary-800) }
.vh-pause svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round }
.vh-pause .ic-play { fill: currentColor; stroke-width: 1.5 }
.vh-pause .ic-play, .vh-pause[aria-pressed="true"] .ic-pause { display: none }
.vh-pause[aria-pressed="true"] .ic-play { display: block }
.vh-pfeil { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary-800); font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t) }
.vh-pfeil:hover { background: var(--primary-800); border-color: var(--primary-800); color: #fff }

/* Spur: eine Folie je Breite, Wischen über Scroll-Snap */
.vh-spur { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--r-lg) }
.vh-spur::-webkit-scrollbar { display: none }
.vh-folie { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: stretch; height: var(--vh-h); border-radius: var(--r-lg); overflow: hidden; isolation: isolate }
.vh-text { align-self: center; padding: 32px 48px }
/* großes Tagesdatum als ruhiges Wasserzeichen rechts (hell) */
.vh-folie::after { content: attr(data-tag); position: absolute; z-index: -1; right: -.04em; bottom: -.24em; font-size: 15rem; font-weight: 800; line-height: 1; letter-spacing: -.06em; pointer-events: none }
/* Datum wie in der Listenkarte (Styleguide V07): randlos links über die volle Höhe, ohne Rahmen und Schatten */
.vh-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--accent); color: var(--primary-900); font-weight: 800; line-height: 1.1; text-transform: uppercase }
.vh-datum b { font-size: 3.2rem; line-height: 1; letter-spacing: -.03em }
.vh-datum span { font-size: .74rem; letter-spacing: .1em }
.vh-art { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase }
.vh-art::before { content: ""; width: 22px; height: 2px; background: currentColor }
.vh-text h2 { margin: 0 0 10px; font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.14; letter-spacing: -.015em }
.vh-text h2::after { display: none }
.vh-teaser { max-width: 60ch; margin: 0 0 14px; line-height: 1.55 }
.vh-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 20px; font-size: .88rem; font-weight: 700 }
.vh-meta span { display: inline-flex; align-items: center; gap: 7px }
.vh-meta svg { width: 16px; height: 16px; flex: none; opacity: .8 }
.vh-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px }
.vh-knopf { min-height: 48px }

/* hell */
.vh--hell { background: #e4e9f4; color: var(--primary-800) }   /* etwas dunkler als --soft-blue, damit sich die Fläche vom weißen Grund abhebt */
.vh--hell::after { color: rgba(39, 54, 95, .05) }
.vh--hell .vh-art{ color: var(--accent-text) }
.vh--hell .vh-teaser{ color: var(--text) }
.vh--hell .vh-knopf{ background: var(--primary-900); color: #fff }
.vh--hell .vh-knopf:hover{ background: var(--primary-800) }

@media (max-width: 900px) {
	.vh-folie { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100% }
	.vh-folie::after { font-size: 10rem }
	.vh-text { align-self: start; padding: 22px 26px 28px }
	.vh-datum { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 12px 26px }   /* randlos als Leiste oben */
	.vh-datum b { font-size: 1.9rem }
}
@media (max-width: 560px) {
	.home-highlight { padding-top: 40px }
	.vh-zaehler, .vh-pfeil { display: none }   /* auf dem Handy: wischen, Punkte und Pause reichen */
}
@media (prefers-reduced-motion: reduce) {
	.vh-spur { scroll-behavior: auto }
	.vh-punkte button.aktiv b { animation: none; transform: scaleX(1) }
	.vh-pause { display: none }
}
@media (max-width: 760px) { .slide .ki-hinweis { right: 12px; bottom: 6px } }   /* Handy: Pfeile sitzen ab 24 px von unten */