/**
 * Globale Portal-Overrides (ergaenzen das Theme-CSS).
 */

/* Registered/Trademark nicht ueberdimensioniert: Theme setzt sup auf 0.75em -> in grossen Headings zu gross */
sup { font-size: 0.62em; line-height: 0; vertical-align: super; position: static; top: auto; }
sub { font-size: 0.62em; line-height: 0; }

/* Dashboard: "heisse" empfohlene Artikel periodisch hervorheben (alle 20s kurzer roter Glow-Wusch) */
@keyframes twtHotPulse {
    0%, 6%, 100% { box-shadow: 0 0 0 0 rgba(224,59,46,0); }
    1.5% { box-shadow: 0 0 0 3px rgba(224,59,46,0.5), 0 8px 22px rgba(224,59,46,0.22); }
}
.dashboard .idx-art.is-hot { animation: twtHotPulse 20s ease-out infinite; }
/* Auflackern nur "von sich aus": sobald die Maus im Artikelblock ist, pausiert der Puls
   (sonst flackert der zweite Hot-Artikel weiter, waehrend man den ersten hovert) */
.dashboard .idx-arts:hover .idx-art.is-hot { animation: none; }
/* Hover passend zum roten Aufflackern (statt blauem Standard-Hover) */
.dashboard .idx-art.is-hot:hover { border-color: #f0b5af; box-shadow: 0 8px 20px rgba(224,59,46,0.18); }
@media (prefers-reduced-motion: reduce) { .dashboard .idx-art.is-hot { animation: none; } }

/* === Footer aufgelockert (Theme rendert den Footer global; app.css ist sitewide eingebunden) === */
/* Mehr Luft im oberen Footer-Block (Theme: padding-top .5rem/1rem -> wirkte gedraengt) */
#footer .footer-container { padding-top: 2.25rem; padding-bottom: 2rem; }
/* Etwas mehr Abstand zwischen Spaltenkopf und Linkliste */
#footer .footer-container nav > span { margin-bottom: 14px; }
/* Mehr Luft zwischen den Links statt fester min-height (Text vertikal sauber) */
#footer .footer-container nav ul li a { min-height: 0; padding-top: 3px; padding-bottom: 3px; line-height: 1.4; }
/* Extern-Pfeil kleiner und nah am Linktext: Link schrumpft auf Inhaltsbreite,
   lange Titel kuerzen weiterhin per Ellipsis (max-width), Icon sitzt direkt dahinter */
#footer .footer-container .nav-link { width: auto; max-width: 100%; padding-right: 18px !important; }
#footer .footer-container .nav-link svg { width: 12px; height: 12px; top: 50%; }
/* Imprint-Leiste etwas absetzen */
#footer .footer-bottom { margin-top: 1rem; }

/* === Top-Header: Hauptnavigation mittig zwischen Logo und Sprache/Support (Desktop) === */
/* Zwei Auto-Margins (vor erstem Nav-Punkt und vor "English") verteilen den freien Platz
   gleichmaessig -> die Nav (Leistungen/Wissensdatenbank/Handbuch/FAQ) sitzt mittig,
   English + Support stehen rechts. Nur ab xl (1200px), wo die Top-Nav sichtbar ist. */
@media (min-width: 1200px) {
    .header .header-navigation > li:first-child { margin-left: auto; }
    .header .header-navigation > li.language-switch { margin-left: auto; }
}

/* === Linke Navigation auf Desktop sticky (folgt beim Scrollen langer Inhalte) === */
/* Die Sidebar bleibt voll hoch (rechte Trennlinie erhalten); nur ihr Inhalt klebt
   unter dem fixen Header. Greift erst ab xl (1200px), wo die Sidebar ueberhaupt
   sichtbar ist - darunter (Mobile/Tablet) bleibt alles wie gehabt. */
@media (min-width: 1200px) {
    .sidebar { align-items: flex-start; }
    .sidebar .sidebar-content { position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto; }
    /* Sprachwahl links raus (steckt schon in der Top-Nav). Mobil bleibt sie drin,
       weil die Top-Nav-Sprachwahl dort ausgeblendet ist. */
    .sidebar .nav-bottom { display: none; }
}