/* Visitenkarte A15-Leiste (30.10.2026 abends): Davids Wahl Entwurf E2 "Glas-Kapsel" (entwuerfe-navergleich.png),
   dazu sein Wunsch "das Schild ... ein bisschen schoener": Anhaenger als kleines Gutschein-Ticket (Verlauf, Metalloese,
   Kerben, Perforation, Glanz). Reines CSS. Auf der Seite Empfehlen kein Anhaenger. Kommt nach a14.css. */

/* ---------- Leiste: Glas mit Verlaufskante ---------- */
.segment { padding: 1px; border: 1px solid transparent;
    background: linear-gradient(rgba(38, 40, 44, 0.92), rgba(24, 26, 28, 0.92)) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06) 55%, rgba(62, 224, 143, 0.38)) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.45); }
.segment-pille { top: 1px; bottom: 1px; left: 1px; width: calc((100% - 2px) / 3); overflow: hidden;
    background: linear-gradient(180deg, rgba(62, 224, 143, 0.26), rgba(62, 224, 143, 0.12));
    box-shadow: inset 0 0 0 1px rgba(62, 224, 143, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.35); }
.segment-pille::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; border-radius: inherit;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) skewX(-18deg); }
.segment a.ist-an { color: #eafff3; }

/* ---------- Lock-Element: Gutschein-Anhaenger ---------- */
.nav-lock { position: absolute; top: calc(100% - 10px); right: calc(var(--rand) - 4px); z-index: 1; width: 90px;
    display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.nav-faden { display: block; width: 1.5px; height: 18px; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(62, 224, 143, 0.8)); }
.nav-schild { position: relative; display: grid; justify-items: center; width: 90px; padding: 13px 6px 7px;
    border-radius: 12px; overflow: hidden; color: #04140b;
    background: linear-gradient(165deg, #7af5b8 0%, #3ee08f 42%, #1fbf73 100%);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), 0 0 20px rgba(62, 224, 143, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(0, 0, 0, 0.14); }
/* Metalloese oben, an der der Faden haengt */
.nav-schild::before { content: ""; position: absolute; top: 4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
    background: radial-gradient(circle, #0b2016 0 2.2px, #f3fbf6 2.6px 3.4px, #9fb8aa 3.8px 4.5px, transparent 4.6px); }
/* Glanz, der ueber das Ticket zieht */
.nav-schild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%); transform: translateX(-110%); }
/* Ticket-Kerben links und rechts auf Hoehe der Perforation (Farbe des Seitengrunds) */
.nav-kerbe { position: absolute; top: 37px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.nav-kerbe.l { left: -6px; } .nav-kerbe.r { right: -6px; }
.nav-schild b { font-size: 20px; line-height: 22px; font-weight: 800; letter-spacing: -0.02em; padding-bottom: 4px; }
.nav-schild small { display: block; width: 100%; padding-top: 4px; border-top: 1px dashed rgba(4, 20, 11, 0.35); text-align: center;
    font-size: 9px; line-height: 11px; white-space: nowrap; font-weight: 700; }
.nav-schild small i { display: block; font-style: normal; font-weight: 600; opacity: 0.78; }

@media not (prefers-reduced-motion: reduce) {
    .segment-pille::after { animation: nav2-glanz 6s ease-in-out 0.5s 3; }
    html:not([data-richtung]) .segment a.ist-an { animation: nav2-wort 1.6s ease-out 0.5s both; }
    .nav-lock { animation: nav2-fall 2.4s linear 1s both, nav2-wipp 1.6s ease-in-out 6.5s 2; }
    html[data-richtung] .nav-lock { animation: nav2-wipp 1.6s ease-in-out 0.6s 1; }
    .nav-schild::after { animation: nav2-schild 5s ease-in-out 3.2s 2; }
}

@keyframes nav2-glanz { 0% { transform: translateX(-120%) skewX(-18deg); } 22%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes nav2-wort { 0% { color: var(--text-2); } 35% { color: var(--accent); } 100% { color: #eafff3; } }
/* Fallen und gedaempft ausschwingen (Pendel um den Aufhaengepunkt) */
@keyframes nav2-fall {
    0% { opacity: 0; transform: translateY(-34px) rotate(0deg); }
    12% { opacity: 1; transform: translateY(3px) rotate(10deg); }
    20% { transform: translateY(0) rotate(-8deg); }
    32% { transform: rotate(6deg); }
    44% { transform: rotate(-4deg); }
    57% { transform: rotate(3deg); }
    72% { transform: rotate(-1.5deg); }
    86% { transform: rotate(0.6deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes nav2-wipp { 0%, 100% { transform: none; } 25% { transform: rotate(6deg); } 55% { transform: rotate(-4deg); } 80% { transform: rotate(1.5deg); } }
@keyframes nav2-schild { 0% { transform: translateX(-110%); } 25%, 100% { transform: translateX(110%); } }

/* Beim Scrollen weg (Anhaenger nie ueber dem Inhalt): mit JavaScript ueber den kurzen Titel, ohne ueber die Scroll-Zeitachse.
   Eigene Huelle, damit sich die Scroll-Animation nicht mit Fallen/Wippen ueberschreibt. */
.nav-huelle { position: absolute; inset: 0; pointer-events: none; }
.nav-huelle .nav-lock { pointer-events: auto; }
.segment-leiste.ist-kurz .nav-huelle { opacity: 0; visibility: hidden; transition: opacity 150ms linear, visibility 0s 150ms; }
/* 30.10.2026 spaet, Davids Wunsch: die Graz-Gutscheine bleiben beim Scrollen stehen und faechern sich zusammen (nav-gg.css);
   kein Ausblenden mehr ueber die Scroll-Zeitachse (das flackerte, Deckkraft zwischen 0 und 1 in WebKit). */
@keyframes nav-weg { to { opacity: 0; visibility: hidden; } }

html[data-seite="empfehlen"] .nav-huelle { display: none; }