/* A27 (01.11.2026): vierter Reiter "Ihr Vorteil", Seite /ihr-vorteil, Verweis-Block auf der Startseite.
   Werte und Farben aus a9-a26.css und a15-leiste.css; Effekte aus Davids Baukaesten, die schon auf der Karte laufen:
   Auftritt blurInUp (Magic UI text-animate, wie kern.css), Rahmenlicht border-beam (Magic UI) am Verweis-Block. */

/* ---------- Reiterleiste mit vier Zielen: Spalten nach Wortlaenge, Pille je Seite ---------- */
.segment { grid-template-columns: 31fr 22fr 24fr 23fr; }
.segment a { padding: 0 2px; font-size: clamp(12px, 3.4vw, 15px); letter-spacing: -0.02em; }
.segment-pille, html[data-seite] .segment-pille { transform: none; left: 1px; width: calc((100% - 2px) * 0.31); }
html[data-seite="karriere"] .segment-pille { left: calc(1px + (100% - 2px) * 0.31); width: calc((100% - 2px) * 0.22); }
html[data-seite="empfehlen"] .segment-pille { left: calc(1px + (100% - 2px) * 0.53); width: calc((100% - 2px) * 0.24); }
html[data-seite="ihr-vorteil"] .segment-pille { left: calc(1px + (100% - 2px) * 0.77); width: calc((100% - 2px) * 0.23); }
.segment a:nth-of-type(4) { view-transition-name: seg-4; }
::view-transition-group(seg-4) { animation-duration: 300ms; }

/* ---------- Startseite: Verweis-Block ---------- */
@property --vt-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vt-verweis-karte { position: relative; padding: 20px 18px 18px; border-radius: 20px;
    background: linear-gradient(160deg, rgba(62, 224, 143, 0.10), var(--flaeche) 65%);
    box-shadow: inset 0 0 0 1px rgba(62, 224, 143, 0.28); }
.vt-verweis-karte h3 { margin-bottom: 8px; }
.vt-verweis-karte p { font-size: 17px; line-height: 24px; color: var(--text-2); margin-bottom: 16px; text-wrap: pretty; }
.vt-verweis-karte .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; width: 100%; }
.vt-verweis-karte .knopf .i { width: 18px; height: 18px; }
.vt-verweis-karte::after { content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1.5px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--vt-winkel), rgba(62, 224, 143, 0) 0deg 250deg, rgba(62, 224, 143, 0.9) 335deg, rgba(62, 224, 143, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.js .vt-verweis.ist-da .vt-verweis-karte::after { animation: vt-strahl 3200ms cubic-bezier(0.45, 0, 0.25, 1) 500ms 1 both; }
@keyframes vt-strahl { 0% { --vt-winkel: 0deg; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { --vt-winkel: 360deg; opacity: 0; } }

/* ---------- Seite Ihr Vorteil ---------- */
.vt-einl, .vt-bw-hinweis { font-size: 17px; line-height: 24px; color: var(--text-2); margin-bottom: 14px; text-wrap: pretty; }
.vt-hinweis { margin-top: 14px; padding: 14px 16px; border-radius: 14px; font-size: 16px; line-height: 23px; color: var(--text);
    background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); text-wrap: pretty; }
.vt-beispiele { display: grid; gap: 10px; }
.vt-bsp { border-radius: 16px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.vt-bsp summary { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; min-height: 48px;
    padding: 14px 14px 14px 16px; cursor: pointer; list-style: none; }
.vt-bsp summary::-webkit-details-marker { display: none; }
.vt-nr { color: var(--accent); font-weight: 700; font-size: 17px; line-height: 22px; font-variant-numeric: tabular-nums; }
.vt-titel { display: grid; gap: 4px; }
.vt-titel b { font-size: 17px; line-height: 22px; color: var(--text); text-wrap: pretty; }
.vt-achtung { font-size: 15px; line-height: 20px; color: var(--text); }
.vt-pfeil { width: 18px; height: 18px; margin-top: 2px; transform: rotate(90deg); transition: transform 240ms ease-out; color: var(--text-3); }
.vt-bsp[open] .vt-pfeil { transform: rotate(-90deg); }
.vt-rumpf { padding: 0 16px 16px 16px; }
.vt-rumpf p { font-size: 16px; line-height: 23px; color: var(--text-2); text-wrap: pretty; }
.vt-rumpf p + p { margin-top: 8px; }
.vt-rumpf strong { color: var(--text); }
@media (min-width: 720px) { .vt-beispiele { grid-template-columns: 1fr 1fr; align-items: start; } }
.vt-bewertungen .beleg { margin: 0 0 8px; }
.vt-bewertungen .stimmen { margin-top: 6px; }
.vt-namentlich[hidden] { display: none; }

/* Knopf "10 Tipps" (a18.css, Position 1) schaltet auf dieser Seite erst ein, wenn der Bewertungsbereich oben aus dem Bild ist,
   statt ab 560 px; so deckt er Sterne-Zeile und Bewertungen nie ab. Ohne timeline-scope bleibt die 560-px-Regel. */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  #ihr-vorteil { timeline-scope: --vt-bw; }
  #ihr-vorteil .vt-bewertungen { view-timeline: --vt-bw block; }
  html #ihr-vorteil .tp[data-pos="1"] .tp-ort { animation-timeline: --vt-bw; animation-range: exit 99% exit 100%; }
}

/* Auftritt der Beispielkarten nacheinander aus der Unschaerfe (blurInUp wie kern.css), nur mit JS */
.js .vt-praxis .vt-bsp { opacity: 0; transform: translateY(12px); filter: blur(5px); }
.js .vt-praxis.ist-da .vt-bsp { opacity: 1; transform: none; filter: none;
    transition: opacity 420ms ease-out, transform 640ms var(--feder-seite, ease-out), filter 420ms ease-out;
    transition-delay: calc(80ms + var(--i) * 60ms); }
@media (prefers-reduced-motion: reduce) {
    .js .vt-praxis .vt-bsp, .js .vt-praxis.ist-da .vt-bsp { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    .vt-verweis-karte::after { animation: none !important; opacity: 0 !important; }
    .vt-pfeil { transition: none; }
}