:root {
    --bs-nav-link-font-size:0.9rem !important;
    /*--bs-primary: #747ed1;*/
    /*--bs-primary:#8ce0f1;*/
    /*--bs-primary:#1dc2e5;*/
    /*--bs-primary: #1dc2e5;*/
    --bs-primary: #202244;
}

.navbar-nav {
    --bs-nav-link-font-size: 0.9rem;
}

.text-viki{
    color: #ede8f3;
}

.max-vh-50 {
    max-height: 50vh!important;
}

.bg-dark.text-inverse a:not(.btn):not([class*=link-]):hover,
.bg-navy.text-inverse a:not(.btn):not([class*=link-]):hover,
.text-inverse a:not(.btn):hover, [class*=offcanvas-].text-inverse a:not(.btn):not([class*=link-]):hover {
    color: #4170d5;
}

@media (max-width:767px){
    .mobile-row-display{
        flex-wrap: wrap;
        gap: 20px;
    }
}


.image-wrapper.bg-overlay-400:before{
background: rgb(4 47 112 / 63%);
}

.img-mask img{
    border-radius: 20px;
    width: 80%;
}

.img-mask.mask-2 img {
    mask-image: none;
}

/* ============================================
   Accessibility & Performance Overrides
   (PageSpeed-/A11y-Tool Findings 2026-05)
   ============================================ */

/* --- font-display: swap für Google Fonts, falls extern geladen.
       Bei selbst-gehosteten Fonts in @font-face direkt ergänzen.
       Spart laut PageSpeed ca. 40 ms FOIT. --- */
@font-face {
    font-family: "Manrope";
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    font-display: swap;
}

/* --- Kontrast-Fix: text-muted im Theme war zu hell (z.B. #aab0bc).
       Lighthouse meldet "Kontrastverhältnis unzureichend" auf vielen
       Stellen mit kleinem Body-Copy in muted-Grau. Wir machen das Grau
       dunkler → WCAG AA-konform auf weißem Background. --- */
.text-muted,
p.text-muted,
.text-muted small,
small.text-muted {
    color: #4a5568 !important;
}
.bg-light .text-muted,
.bg-gray .text-muted {
    color: #475569 !important;
}

/* Auch die Card-Body-Texte (Service/Step-Cards) bekamen #64748b → leicht dunkler */
.step-card p, .contact-card p, .pf-step-card p, .refs-method-card p {
    color: #475569 !important;
}

/* --- Body-Links visuell erkennbar: Unterstrich (statt "nur Farbe").
       Lighthouse: "Links sind nur durch Farbe erkennbar."
       Wir lassen Nav, Buttons, Cards-Headings unterstrichlos —
       betrifft nur Inline-Body-Links in <p>, <li>, .lead etc.
       Hover macht Underline dann durchgezogen. --- */
p > a:not(.btn):not(.nav-link):not([class*="link-"]),
.lead a:not(.btn):not(.nav-link):not([class*="link-"]),
li > a:not(.btn):not(.nav-link):not([class*="link-"]),
.card-body p a:not(.btn):not(.nav-link):not([class*="link-"]),
.accordion-body a:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(31, 56, 100, 0.4);
    transition: text-decoration-color 0.2s ease;
}
p > a:not(.btn):not(.nav-link):not([class*="link-"]):hover,
.lead a:not(.btn):not(.nav-link):not([class*="link-"]):hover,
li > a:not(.btn):not(.nav-link):not([class*="link-"]):hover,
.card-body p a:not(.btn):not(.nav-link):not([class*="link-"]):hover,
.accordion-body a:not(.btn):hover {
    text-decoration-color: #1F3864;
}

/* --- Skip-to-Content für Tastatur-Nutzer (versteckt bis :focus). --- */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 9999;
    background: #1F3864;
    color: #ffffff;
    padding: 0.65rem 1.25rem;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: 600;
}
.skip-to-content:focus {
    left: 1rem;
    color: #ffffff;
}

/* --- Focus-State sichtbarer für Tastatur-Nutzer (Lighthouse-A11y) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
    outline: 3px solid #2E75B6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Forced-Reflow Quick-Win: img ohne explizite Größe verursacht CLS.
       Hero-Bild hat jetzt width/height, der Rest kann von intrinsic-size profitieren. --- */
img:not([width]):not([height]) {
    contain: layout;
}

/* --- Blog-Karten: feste Cover-Höhe, damit alle Karten exakt gleich hoch sind.
       Überschreibt gezielt die Theme-Regel "figure img { height:auto !important }". --- */
.blog-card-figure {
    height: 220px;
    overflow: hidden;
}
.blog-card-figure img {
    height: 220px !important;
    width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- Code-Syntax-Highlighting (highlight.php / hljs) — kompaktes GitHub-helles Theme.
       Wird von spatie/commonmark-highlighter in Blog-Artikeln erzeugt (kein Node nötig). --- */
.hljs {
    display: block;
    overflow-x: auto;
    padding: 1rem 1.25rem;
    background: #f6f8fa;
    color: #24292e;
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1.55;
}
.hljs-comment, .hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-doctag { color: #d73a49; }
.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-addition { color: #032f62; }
.hljs-number, .hljs-literal, .hljs-meta .hljs-meta-string { color: #005cc5; }
.hljs-title, .hljs-section, .hljs-function .hljs-title { color: #6f42c1; }
.hljs-variable, .hljs-name, .hljs-symbol { color: #e36209; }
.hljs-type, .hljs-class .hljs-title, .hljs-tag, .hljs-meta { color: #22863a; }