/* Tool-Leiste der Detailseiten: zeigt unter dem Menü, zu welchem Tool die Seite gehört.
   Farbe über --tool am Element. Läuft beim Scrollen mit (sticky unter der 60-px-Nav). */

.tool-bar {
    position: sticky; top: 60px; z-index: 90;
    margin-top: 60px; background: var(--tool, #1A4DF0); color: #fff;
}
.tool-bar .tb-inner {
    max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 46px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.tool-bar .tb-name { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; white-space: nowrap; min-width: 0; }
.tool-bar .tb-name b { font-weight: 800; letter-spacing: -.01em; }
.tool-bar .tb-name span { opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.tool-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #fff; color: var(--tool, #1A4DF0); display: grid; place-items: center; }
.tool-ico svg { width: 16px; height: 16px; }
.tool-bar .tb-switch { display: flex; gap: 4px; font-size: 13px; }
.tool-bar .tb-switch a { color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 99px; opacity: .75; font-weight: 600; }
.tool-bar .tb-switch a:hover { opacity: 1; background: rgba(255,255,255,.14); }
.tool-bar .tb-switch a[aria-current] { opacity: 1; background: rgba(255,255,255,.22); }
.tool-bar .tb-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
@media (max-width: 640px) {
    .tool-bar .tb-name > span:not(.tool-ico) { display: none; }
}

/* Nav-Abstand ist jetzt von der Leiste belegt: Hero rückt um die Nav-Höhe hoch */
.tool-bar + main .hero { padding-top: 96px; }
.tool-bar ~ .hero { padding-top: 56px; }   /* terminbuchung.html: Hero liegt direkt neben der Leiste */

/* Sprungziele nicht hinter Nav (60) + Tool-Leiste (46) verstecken */
section[id] { scroll-margin-top: 110px; }

/* Hinweis auf den Ratgeber im Hero der Takt-Seite */
.guide-link { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ink, #0E1330); text-decoration: none; padding: 9px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--tool, #0B7A45); }
.guide-link b { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #0B7A45; padding: 3px 7px; border-radius: 5px; }
.guide-link:hover { background: #E4F4EA; }