/* v2510-68 Pfeil V2 (Gman 27.10.2026, 20:25): kraeftiger Pfeil, Farbwechsel bei Hover/Fokus, einlaufende Unterstreichung.
   Quelle: nachweise/version_2510/pfeil_hover_2710/VARIANTEN.md (V2). Aenderungen gegenueber dem Vorschlag:
   - nur Palettenfarben (kein Pfirsichton): Dunkel = Creme #F6F1E8, Hover Dunkel = #fff; Hell = Navy/Terracotta/#A3421D
   - Tippflaeche bleibt (padding-block 12px aus kopf-fuss.css): die Linie sitzt per Hintergrund-Position 3 px unter dem Text, kein padding-bottom
   - white-space:nowrap nur ab 481 px (auf dem Handy bleibt der Umbruch wie bisher)
   - Fokusrahmen nur fuer Links mit .tl, nicht fuer alle Links */
body .tl{--pf-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%2012h15M13%206l6%206-6%206' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--pf-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%204v15M6%2013l6%206%206-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--t:#122E4D;--p:#C65A30;--th:#A3421D;--ph:#A3421D}
body .cap .tl,body .tl-hell,body .fam-kachel .tl{--t:#F6F1E8;--p:#F6F1E8;--th:#fff;--ph:#fff}
body a[href] .tl.tl,body a.tl.tl{color:var(--t);opacity:1;font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% + 3px)/0 1.5px no-repeat;background-origin:content-box;transition:color .2s var(--kurve,ease),background-size .3s var(--kurve,ease)}
@media (min-width:481px){body a[href] .tl.tl,body a.tl.tl{white-space:nowrap}}
body a:is(:hover,:focus-visible) .tl.tl,body a.tl.tl:is(:hover,:focus-visible){color:var(--th);text-decoration:none;background-size:100% 1.5px}
/* v2510-68: gleiche Wirkung gegen barsetto-2310 (a[href]:hover .tl:not(.tl-hell){text-decoration:underline}) – sonst zwei Linien */
body a[href]:is(:hover,:focus-visible) .tl:not(.tl-hell).tl{text-decoration:none}
body a[href] .tl .tl-pf,body a.tl .tl-pf{display:inline-block;width:22px;height:22px;margin-left:6px!important;font-size:0!important;line-height:0;vertical-align:middle;color:transparent!important;background-color:var(--p);-webkit-mask:var(--pf-r) center/contain no-repeat;mask:var(--pf-r) center/contain no-repeat;transition:transform .25s var(--kurve,ease),background-color .2s var(--kurve,ease)}
body a[href^="#"] .tl .tl-pf,body a[href^="#"].tl .tl-pf{-webkit-mask-image:var(--pf-d);mask-image:var(--pf-d)}
body a:is(:hover,:focus-visible) .tl .tl-pf,body a.tl:is(:hover,:focus-visible) .tl-pf{background-color:var(--ph);transform:translateX(4px)}
body a:is(:hover,:focus-visible)[href^="#"] .tl .tl-pf,body a.tl:is(:hover,:focus-visible)[href^="#"] .tl-pf,body a[href^="#"].tl:is(:hover,:focus-visible) .tl-pf{transform:translateY(4px)}
/* Handy: Pfeil bleibt beim letzten Wort (kein Pfeil allein in der naechsten Zeile): Platz im Padding, Pfeil zaehlt fuer den Umbruch 0 px breit */
@media (max-width:480px){body .tl:has(>.tl-pf){padding-right:22px}body a[href] .tl .tl-pf,body a.tl .tl-pf{width:18px;height:18px;margin-left:4px!important;margin-right:-22px!important}}
/* Start, «Mehr zum Ablauf →»: Ruhelinie (wie vor v2510-58, rgba(255,255,255,.55)) bleibt unter der einlaufenden Linie; Tippflaeche mindestens 44 px */
body .ws-mehr a.ab-mehr.tl{background-image:linear-gradient(currentColor,currentColor),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55));background-position:0 calc(100% + 3px),0 calc(100% + 3px);background-size:0 1.5px,100% 1px;background-repeat:no-repeat;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
body .ws-mehr a.ab-mehr.tl:is(:hover,:focus-visible){background-size:100% 1.5px,100% 1px}
/* Fokus */
body a.tl:focus-visible,body a:has(>.tl):focus-visible{outline:2px solid #A3421D;outline-offset:3px;border-radius:4px}
body a.tl-hell:focus-visible,body .cap a.tl:focus-visible,body a.fam-kachel:focus-visible,body .ws-mehr a.ab-mehr:focus-visible{outline-color:#fff}
body a.bx:has(.tl):focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media (prefers-reduced-motion:reduce){body a[href] .tl .tl-pf,body a.tl .tl-pf{transition:background-color .2s!important}body a:is(:hover,:focus-visible) .tl .tl-pf,body a.tl:is(:hover,:focus-visible) .tl-pf,body a:is(:hover,:focus-visible)[href^="#"] .tl .tl-pf,body a.tl:is(:hover,:focus-visible)[href^="#"] .tl-pf,body a[href^="#"].tl:is(:hover,:focus-visible) .tl-pf{transform:none!important}body a[href] .tl.tl,body a.tl.tl{transition:color .2s!important}}