/* Video-Auftakt 0.260927.7. Mobile Grundabdunklung etwas heller. */
.va-page { background: #fdfcfa; }
.va-page .pp-kopf {
  position: fixed; inset: 12px 0 auto; z-index: 150; border: 0;
  background: transparent; backdrop-filter: none;
  transition: top .28s ease, background-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease;
}
.va-page .pp-kopf::after { display: none; }
.va-page .pp-kopf .kopf__zeile,
.va-page .pp-kopf.kopf--kompakt .kopf__zeile { max-width: none; height: 88px; min-height: 88px; padding: 10px clamp(24px, 5vw, 76px); transition: height .32s ease, min-height .32s ease; }
.va-page .pp-kopf .marke { width: 230px; flex: 0 0 auto; overflow: visible; transition: width .32s ease; }
.va-page .pp-kopf .marke__bild,
.va-page .pp-kopf.kopf--kompakt .marke__bild { display: block; max-width: 100%; width: 100%; height: auto; filter: brightness(0) invert(1); transition: filter .32s ease; }
.va-page .pp-kopf.va-scrolled .marke { width: 190px; }
.va-page .pp-kopf.va-scrolled .kopf__zeile { height: 72px; min-height: 72px; }
.va-page .pp-kopf .nav a:not(.btn) { color: #fff; text-shadow: 0 1px 8px #0008; }
.va-page .pp-kopf .nav a:not(.btn)::after { background: #fff; }
.va-page .pp-kopf .nav a.btn { background: #fdfcfa; color: #8a5e23; border-color: #fdfcfa; }
.va-page .pp-kopf .nav a.btn::before { border-color: rgba(138,94,35,.5); }
.va-page .pp-kopf.va-scrolled .nav a.btn::before,
.va-page .pp-kopf:has(.nav.offen) .nav a.btn::before { border-color: rgba(255,255,255,.42); }
.va-page .pp-kopf .burger span { background: #fff; }
.va-page .pp-kopf.va-scrolled,
.va-page .pp-kopf:has(.nav.offen) {
  top: 0; background: rgba(253, 252, 250, .63); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(43,34,20,.05);
}
.va-page .pp-kopf.va-past-hero { background: rgba(253, 252, 250, .86); }
.va-page .pp-kopf.va-scrolled .marke__bild,
.va-page .pp-kopf:has(.nav.offen) .marke__bild { filter: none; }
.va-page .pp-kopf.va-scrolled .nav a:not(.btn),
.va-page .pp-kopf:has(.nav.offen) .nav a:not(.btn) { color: #2b2214; text-shadow: none; }
.va-page .pp-kopf.va-scrolled .nav a:not(.btn)::after,
.va-page .pp-kopf:has(.nav.offen) .nav a:not(.btn)::after { background: #b17c41; }
.va-page .pp-kopf.va-scrolled .nav a.btn,
.va-page .pp-kopf:has(.nav.offen) .nav a.btn { background: #8a5e23; color: #fff; border-color: #8a5e23; }
.va-page .pp-kopf.va-scrolled .burger span,
.va-page .pp-kopf:has(.nav.offen) .burger span { background: #6f4c20; }

.va-page .pp-start { overflow: clip; }
.va-page .pp-start .va-stage { --va-progress: 0; --va-exit: 0; position: relative; height: 160svh; margin: 0; color: #fff; }
.va-page .va-pin { position: sticky; top: 0; height: 100svh; }
.va-page .va-card {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; z-index: 0; background: #201a0f;
  clip-path: inset(calc(var(--va-progress) * clamp(94px, 11vh, 116px)) calc(var(--va-progress) * 24px) calc(var(--va-progress) * 28px) calc(var(--va-progress) * 24px) round calc(var(--va-progress) * 24px));
  will-change: clip-path;
}
/* Die Grundabdunklung gehört zum Videobild selbst und ist unabhängig von
   Scrollfortschritt und separater Verlaufsebene. Gilt auch für das Vorschaubild. */
.va-page .va-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; filter: brightness(.6); }
.va-page .va-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(32,26,15,.82) 0%, rgba(32,26,15,.66) 42%, rgba(32,26,15,.19) 82%), linear-gradient(0deg,rgba(32,26,15,.6) 0%, transparent 48%); }
.va-page .va-content { position: absolute; left: clamp(34px, 6vw, 100px); right: clamp(34px, 6vw, 100px); bottom: clamp(94px, 13vh, 150px); max-width: 1060px; text-shadow: 0 2px 10px #0004; }
/* Nur Text und Eckhinweise blenden beim Verlassen des Einstiegs aus. */
.va-page .va-content, .va-page .va-corner { z-index: 2; opacity: calc(1 - var(--va-exit)); }
.va-page .va-kicker { font: 600 12px/1.4 Calibri, 'Segoe UI', sans-serif; letter-spacing: .19em; text-transform: uppercase; color: #dbb077; margin-bottom: 25px; }
.va-page .va-content h1 { font: 400 clamp(48px, 6.4vw, 94px)/1.015 Calibri, 'Segoe UI', sans-serif; letter-spacing: -.047em; color: #fff; max-width: 1100px; text-wrap: balance; }
.va-page .va-content h1 span { color: #dbb077; }
/* SEO 27.09.2026: Ortszeile steht jetzt als Span in der h1 -- Blockanzeige ersetzt den frueheren Absatz. */
.va-page .va-content h1 > .va-kicker { display: block; }
.va-page .va-content h1 > .va-titel { color: #fff; }
.va-page .va-lead { font: 400 clamp(17px, 1.48vw, 21px)/1.55 Calibri, 'Segoe UI', sans-serif; max-width: 640px; margin-top: 26px; color: #f8f4ea; }
.va-page .va-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 29px; }
.va-page .va-actions a { display: inline-flex; align-items: center; gap: 20px; min-height: 46px; font: 600 15px/1.2 Calibri, 'Segoe UI', sans-serif; text-decoration: none; }
.va-page .va-actions a span { font-size: 20px; font-weight: 400; transition: transform .2s ease; }
.va-page .va-actions a:hover span { transform: translate(3px,-3px); }
.va-page .va-actions .btn { padding: .92em 1.9em; text-shadow: none; }
.va-page .va-actions .va-primary { color: #2b2214; background: #fdfcfa; }
.va-page .va-actions .va-primary::before { border-color: rgba(138,94,35,.5); }
.va-page .va-actions .va-secondary { color: #fff; background: rgba(32,26,15,.22); box-shadow: inset 0 0 0 1.5px #dbb077; }
.va-page .va-actions .va-secondary::before { border-color: rgba(219,176,119,.55); }
.va-page .va-actions .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #2b2214, inset 0 0 0 4px #dbb077; }
@media (hover:hover) and (pointer:fine) {
  .va-page .va-actions .va-primary:hover { background: #f2e5d0; }
  .va-page .va-actions .va-secondary:hover { background: rgba(32,26,15,.6); }
}
.va-page .va-corner { position: absolute; left: clamp(34px, 6vw, 100px); right: clamp(34px, 6vw, 100px); bottom: 30px; display: flex; justify-content: flex-end; gap: 20px; color: #ffffffc9; font: 12px/1.4 Calibri, 'Segoe UI', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.va-page .va-stage :is(a,button):focus-visible { outline: 3px solid #dbb077; outline-offset: 4px; }
.va-page .va-stage + * { position: relative; }
.va-page #merkmale { scroll-margin-top: 96px; }

/* Der Bildfächer braucht nur eine Überschrift; die Bildtitel benennen die Themen. */
.va-page .sv-head { display: block; }
.va-page .sv-head .sv-label,
.va-page .sv-head > p,
.va-page .polar-panel .polar-number { display: none; }

@media (max-width: 1050px) {
  .va-page .va-content h1 { font-size: clamp(48px, 6.7vw, 74px); }
  .va-page .va-shade { background: linear-gradient(90deg, rgba(32,26,15,.86), rgba(32,26,15,.47) 80%), linear-gradient(0deg,rgba(32,26,15,.5),transparent 52%); }
}
@media (max-width: 860px) {
  .va-page .pp-kopf .kopf__zeile,
  .va-page .pp-kopf.kopf--kompakt .kopf__zeile { height: 76px; min-height: 76px; padding: 10px 24px; }
  .va-page .pp-kopf .marke { width: min(210px, 54vw); }
  .va-page .pp-kopf.va-scrolled .marke { width: min(180px, 48vw); }
  .va-page .pp-kopf.va-scrolled .kopf__zeile { height: 64px; min-height: 64px; }
  .va-page .pp-kopf .nav { background: #fdfcfa; box-shadow: 0 14px 25px #2222; }
  .va-page .pp-kopf .nav a:not(.btn) { color: #2b2214; text-shadow: none; }
  .va-page .pp-kopf .nav a.btn { background: #8a5e23; color: #fff; border-color: #8a5e23; }
  .va-page .va-card { clip-path: inset(calc(var(--va-progress) * 86px) calc(var(--va-progress) * 16px) calc(var(--va-progress) * 20px) calc(var(--va-progress) * 16px) round calc(var(--va-progress) * 18px)); }
  .va-page .va-content { left: clamp(26px, 5vw, 54px); right: clamp(26px, 5vw, 54px); bottom: 100px; }
  .va-page .va-corner { left: clamp(26px, 5vw, 54px); right: clamp(26px, 5vw, 54px); }
}
@media (max-width: 600px) {
  .va-page .pp-start .va-stage { height: 150svh; }
  .va-page .va-pin { min-height: 0; }
  .va-page .va-video { object-position: 59% center; filter: brightness(.72); }
  .va-page .va-shade { background: linear-gradient(0deg,rgba(32,26,15,.88) 0%,rgba(32,26,15,.68) 45%,rgba(32,26,15,.34) 100%); }
  .va-page .va-content { left: 30px; right: 30px; bottom: clamp(86px, 11vh, 110px); }
  .va-page .va-kicker { font-size: 10px; letter-spacing: .13em; margin-bottom: 18px; }
  .va-page .va-content h1 { font-size: clamp(38px, 11.2vw, 57px); line-height: 1.03; }
  .va-page .va-lead { font-size: 16px; line-height: 1.43; margin-top: 20px; }
  .va-page .va-actions { gap: 13px 20px; margin-top: 20px; }
  .va-page .va-actions a { font-size: 13px; min-height: 42px; }
  .va-page .va-corner { left: 30px; right: 30px; bottom: 22px; font-size: 10px; }
  .va-page .va-corner { justify-content: flex-start; }
  .va-page .polar-panel .polar-title { left: 24px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .va-page .va-content { bottom: 73px; }
  .va-page .va-kicker { margin-bottom: 10px; }
  .va-page .va-content h1 { font-size: clamp(34px, 9vw, 39px); }
  .va-page .va-lead { font-size: 14px; line-height: 1.38; margin-top: 12px; }
  .va-page .va-actions { margin-top: 12px; gap: 8px 18px; }
  .va-page .va-actions a { min-height: 37px; font-size: 12px; }
  .va-page .va-actions .btn { padding: 8px 13px; }
}
@media (max-width: 600px) and (max-height: 620px) {
  .va-page .pp-start .va-stage { height: auto; }
  .va-page .va-pin { position: relative; height: auto; }
  .va-page .va-card { position: relative; inset: auto; min-height: 100svh; clip-path: none; }
  .va-page .va-content { position: relative; inset: auto; margin-inline: 24px; padding: 160px 0 115px; }
}
@media (max-height: 680px) and (min-width: 601px) {
  .va-page .va-content h1 { font-size: clamp(48px, 5.2vw, 67px); }
  .va-page .va-content { bottom: 90px; }
  .va-page .va-lead { margin-top: 14px; }
  .va-page .va-actions { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .va-page .pp-start .va-stage { height: auto; }
  .va-page .va-pin { position: relative; height: 100svh; }
  .va-page .va-card { clip-path: none; }
  .va-page .pp-kopf, .va-page .pp-kopf .kopf__zeile, .va-page .pp-kopf .marke, .va-page .pp-kopf .marke__bild, .va-page .va-actions a span { transition: none; }
}