/* ============================================================
   Friederich Loheide – Portfolio & Tools
   style.css  |  v2.0
   ============================================================ */

/* ---------- Custom Properties ----------------------------- */
:root {
    --bg:            #f0f2f8;
    --surface:       #ffffff;
    --surface-2:     #f8f9fc;
    --border:        #e2e8f0;
    --border-soft:   #eef0f6;
    --text:          #0f172a;
    --text-2:        #334155;
    --muted:         #475569;   /* WCAG 2.2 AAA 1.4.6: 7,58:1 auf Weiß (war #64748b = 4,76:1) */
    --muted-2:       #94a3b8;  /* Dekorativ / nur auf dunklen Hintergründen für Fließtext */

    --indigo:        #4f46e5;
    --indigo-light:  #818cf8;
    --indigo-xlight: #eef2ff;
    --violet:        #7c3aed;
    --cyan:          #06b6d4;
    --green:         #10b981;
    --amber:         #f59e0b;
    --red:           #ef4444;

    --grad-main:     linear-gradient(135deg, #4f46e5, #7c3aed);
    --grad-soft:     linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    --grad-dark:     linear-gradient(160deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%);

    --r:             12px;
    --r-lg:          20px;
    --r-xl:          28px;

    --sh-sm:         0 1px 4px rgba(0,0,0,.06);
    --sh:            0 4px 20px rgba(79,70,229,.1), 0 1px 4px rgba(0,0,0,.05);
    --sh-lg:         0 12px 48px rgba(79,70,229,.18), 0 2px 8px rgba(0,0,0,.07);
    --sh-glow:       0 0 40px rgba(79,70,229,.25);

    --ease:          cubic-bezier(.4,0,.2,1);
    --t:             .22s var(--ease);

    --font:          'Inter', system-ui, -apple-system, sans-serif;
    --mono:          'JetBrains Mono', 'Fira Code', monospace;
}

/* ---------- WCAG 2.2 AAA – Kontext-Overrides für dunkle Bereiche ---------- */
/* --muted = #475569 (7:1 auf Weiß); in dunklen Sections das hellere #94a3b8 verwenden */
.hero, .section-contact, .site-footer, .wip-banner, .bf-hero, .error-hero, .glossar-hero {
    --muted: #94a3b8; /* 7,13:1 auf #0f172a */
}
/* Breadcrumb-Links auf dunklen Hintergründen: #a5b4fc = 9,4:1 auf #0f172a (AAA) */
.bf-hero .breadcrumb a,
.glossar-hero .breadcrumb a { color: #a5b4fc; }

/* WCAG 2.4.11 / 2.4.12 Focus Not Obscured – Sticky-Header-Abstand */
a, button, input, select, textarea, details, summary, [tabindex] {
    scroll-margin-top: 88px;  /* Höhe des fixed Headers + Puffer */
    scroll-margin-bottom: 16px;
}

/* ---------- Reset ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--indigo); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--violet); }
address { font-style: normal; }
strong { font-weight: 600; }

/* ========================================================== WIP-BANNER */
.wip-banner {
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #d97706 100%);
    background-size: 200% 100%;
    color: #1c1100;
    font-size: .875rem;
    position: relative;
    z-index: 1100;
    animation: wip-shimmer 6s linear infinite;
}
@keyframes wip-shimmer {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
@media (prefers-reduced-motion: reduce) {
    .wip-banner { animation: none; }
}
.wip-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
.wip-icon { font-size: 1.25rem; flex-shrink: 0; }
.wip-banner p {
    flex: 1;
    margin: 0;
    line-height: 1.5;
    color: #1c1100;
}
.wip-banner strong { color: #1c1100; font-weight: 700; }
.wip-banner a { color: #1c1100; text-decoration: underline; font-weight: 600; }
.wip-banner a:hover { opacity: .75; }
.wip-close {
    background: rgba(0,0,0,.15);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    cursor: pointer;
    color: #1c1100;
    padding: 4px 10px;
    flex-shrink: 0;
    line-height: 1.4;
    font-size: .8rem;
    font-family: inherit;
    transition: background .15s;
}
.wip-close:hover { background: rgba(0,0,0,.25); }
.wip-close:focus-visible { outline: 3px solid #1c1100; outline-offset: 2px; border-radius: 4px; }

/* ---------- Barrierefreiheit: Skip-Link ------------------- */
.skip-link {
    position: absolute;
    top: -120px;
    left: 8px;
    z-index: 9999;
    background: var(--indigo);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--r);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 8px; color: #fff; }

/* ---------- Barrierefreiheit: Focus-Stile (WCAG 2.4.7) --- */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--indigo);
    outline-offset: 4px;
    border-radius: 4px;
}
/* Auf dunklem Hintergrund: heller Fokusring */
.hero :focus-visible,
.section-dark :focus-visible,
.section-contact :focus-visible,
.site-footer :focus-visible {
    outline-color: #a5b4fc;
}

/* ---------- Barrierefreiheit: Reduzierte Bewegung --------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
}

/* ---------- Layout ---------------------------------------- */
.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 28px;
}
.section       { padding: 100px 0; }
.section-dark  { background: var(--grad-dark); }
.section-contact {
    background: linear-gradient(135deg, #312e81, #4c1d95 50%, #1e1b4b);
}

/* ---------- Typography ------------------------------------ */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3730a3; /* WCAG AAA: 8,5:1 auf #eef2ff (war #4f46e5 = 5,5:1) */
    background: var(--indigo-xlight);
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: 16px;
}
.section-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    background: #3730a3;
    border-radius: 50%;
}
.section-eyebrow--light {
    color: #a5b4fc;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
}
.section-eyebrow--light::before { background: #a5b4fc; }

.section-title {
    font-size: clamp(1.85rem, 3.8vw, 2.8rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin-bottom: 16px;
    color: var(--text);
}
.section-title--light { color: #f1f5f9; }

.section-sub {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
    line-height: 1.75;
}
.section-sub--light { color: #94a3b8; }

/* ---------- Glass Card ------------------------------------ */
.glass-card {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: var(--sh-lg);
}

/* ========================================================== HEADER */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 200;
    padding: 0;
    transition: background var(--t), box-shadow var(--t), border-color var(--t);
}
.site-header.scrolled {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--sh-sm);
}
/* Header über dunklem Hero (WCAG AAA 7:1) – nur vor dem Scrollen */
.site-header:not(.scrolled) .logo        { color: #e2e8f0; }  /* 14:1 auf #0f172a */
.site-header:not(.scrolled) .logo-bracket{ color: #a5b4fc; }  /* 9,4:1 auf #0f172a */
.site-header:not(.scrolled) .main-nav a  { color: #94a3b8; }  /* 7,3:1 auf #0f172a */
.site-header:not(.scrolled) .nav-toggle span { background: #e2e8f0; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.logo {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.04em;
    font-family: var(--mono);
}
.logo-bracket { color: var(--indigo); }

.main-nav {
    display: flex;
    gap: 36px;
    align-items: center;
}
.main-nav a {
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted);
    position: relative;
    /* WCAG 2.2 AAA 2.5.5 – Touch Target 44×44 px */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--grad-main);
    border-radius: 2px;
    transition: width var(--t);
}
.main-nav a:hover { color: var(--indigo); }
.main-nav a:hover::after { width: 100%; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.nav-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: var(--t);
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ========================================================== HERO */
.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--grad-dark);
    padding-top: 70px;
}

/* Animated blobs */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: blobFloat 12s ease-in-out infinite;
}
.hero-blob--1 {
    width: 600px; height: 600px;
    top: -150px; right: -100px;
    background: radial-gradient(circle, rgba(79,70,229,.5), transparent 70%);
    animation-delay: 0s;
}
.hero-blob--2 {
    width: 500px; height: 500px;
    bottom: -100px; left: -120px;
    background: radial-gradient(circle, rgba(124,58,237,.45), transparent 70%);
    animation-delay: -4s;
}
.hero-blob--3 {
    width: 350px; height: 350px;
    top: 40%; left: 40%;
    background: radial-gradient(circle, rgba(6,182,212,.25), transparent 70%);
    animation-delay: -8s;
}

@keyframes blobFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(30px, -40px) scale(1.06); }
    66%       { transform: translate(-20px, 20px) scale(.96); }
}

/* Subtle grid overlay */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 80px 28px 60px;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: #a5b4fc;
    border: 1px solid rgba(165,180,252,.3);
    background: rgba(79,70,229,.12);
    backdrop-filter: blur(8px);
    padding: 6px 16px;
    border-radius: 99px;
    margin-bottom: 32px;
    animation: fadeDown .8s var(--ease) both;
}
.eyebrow-dot {
    width: 7px; height: 7px;
    background: #34d399;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(52,211,153,.2);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(52,211,153,.05); }
}

.hero-title {
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: #e2e8f0;
    margin-bottom: 10px;
    animation: fadeDown .9s var(--ease) .1s both;
}
.hero-name {
    display: block;
    background: linear-gradient(135deg, #a5b4fc, #c4b5fd, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 4px;
}

.hero-role {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    animation: fadeDown 1s var(--ease) .2s both;
}
.role-chip {
    font-size: .85rem;
    font-weight: 500;
    color: #94a3b8;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    padding: 4px 14px;
    border-radius: 99px;
}
.role-sep { color: rgba(255,255,255,.2); font-size: .8rem; }

.hero-sub {
    font-size: clamp(.97rem, 1.6vw, 1.1rem);
    color: #94a3b8;
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.8;
    animation: fadeDown 1s var(--ease) .3s both;
}
.hero-sub strong { color: #c7d2fe; font-weight: 600; }

.hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
    animation: fadeDown 1s var(--ease) .4s both;
}

.hero-kpi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-xl);
    backdrop-filter: blur(12px);
    padding: 20px 40px;
    flex-wrap: wrap;
    gap: 0;
    animation: fadeUp 1s var(--ease) .5s both;
}
.kpi-item {
    text-align: center;
    padding: 4px 36px;
}
.kpi-item strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    color: #a5b4fc;
    letter-spacing: -.03em;
}
.kpi-item span {
    font-size: .78rem;
    color: #cbd5e1;   /* war #64748b – Kontrast auf dunklem Hintergrund korrigiert (>4.5:1) */
    font-weight: 500;
}
.kpi-sep {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,.1);
}

.scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.3);
    animation: bounce 2s ease-in-out infinite;
    z-index: 2;
}
@keyframes bounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* ---------- Buttons --------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--r);
    font-size: .93rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--t);
    white-space: nowrap;
}
.btn-glow {
    background: var(--grad-main);
    color: #fff;
    box-shadow: 0 4px 20px rgba(79,70,229,.5), 0 0 0 0 rgba(79,70,229,.3);
}
.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(79,70,229,.6), 0 0 60px rgba(79,70,229,.2);
    color: #fff;
}
.btn-ghost {
    background: rgba(255,255,255,.08);
    color: #c7d2fe;
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover {
    background: rgba(255,255,255,.14);
    color: #fff;
    transform: translateY(-2px);
}
.btn-ghost--light {
    background: rgba(255,255,255,.1);
    color: #e0e7ff;
    border-color: rgba(255,255,255,.2);
}
.btn-ghost--light:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}

/* ========================================================== DISCLAIMER */
.disclaimer-strip {
    position: relative;
    margin-bottom: 36px;
}
.disclaimer-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.22);
    border-left: 4px solid var(--amber);
    border-radius: var(--r);
    padding: 14px 20px;
}
.disclaimer-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}
.disclaimer-icon-wrap {
    flex-shrink: 0;
    color: var(--amber);
    display: flex;
    align-items: center;
}
.disclaimer-content strong {
    display: inline;
    font-size: .88rem;
    font-weight: 700;
    color: #fcd34d;
}
.disclaimer-content p {
    display: inline;
    font-size: .85rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}
.disclaimer-content a { color: #a5b4fc; text-decoration: underline; }

/* ========================================================== ABOUT */
.about-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 64px;
}

/* Profile card */
.profile-card {
    border-radius: var(--r-xl);
    padding: 36px 28px;
    text-align: center;
    position: sticky;
    top: 90px;
}

.profile-avatar {
    position: relative;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: var(--grad-main);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    overflow: hidden;
    flex-shrink: 0;
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    display: block;
}
/* Fallback-Initialen falls Bild nicht lädt */
.profile-avatar .avatar-fallback {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--mono);
    letter-spacing: -.04em;
}
.avatar-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #818cf8, #7c3aed) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: spinRing 8s linear infinite;
}
@keyframes spinRing {
    to { transform: rotate(360deg); }
}

.profile-name {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 4px;
}
.profile-pos {
    font-size: .82rem;
    color: var(--indigo);
    font-weight: 600;
    margin-bottom: 8px;
}
.profile-loc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 20px;
}
.profile-bio {
    font-size: .87rem;
    color: var(--text-2);
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: left;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-bottom: 24px;
}
.badge {
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 99px;
}
.badge--blue   { background: #dbeafe; color: #1d4ed8; }
.badge--violet { background: #ede9fe; color: #6d28d9; }
.badge--green  { background: #d1fae5; color: #047857; }

.profile-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--r);
    background: #0077b5;
    color: #fff !important;
    font-size: .85rem;
    font-weight: 600;
    transition: var(--t);
}
.profile-linkedin:hover {
    background: #005885;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,119,181,.35);
}

/* Timeline */
.timeline { flex: 1; }
.timeline-heading {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 28px;
}

.timeline-item {
    display: flex;
    gap: 20px;
    padding-bottom: 32px;
    position: relative;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 7px; top: 18px;
    width: 2px;
    bottom: 0;
    background: linear-gradient(to bottom, var(--border) 0%, transparent 100%);
}
.timeline-item:last-child::before { display: none; }
.timeline-item:last-child { padding-bottom: 0; }

.tl-dot {
    flex-shrink: 0;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 3px solid var(--border);
    background: var(--surface);
    margin-top: 3px;
    position: relative;
    z-index: 1;
    transition: var(--t);
}
.tl-dot--active {
    border-color: var(--indigo);
    background: var(--indigo);
    box-shadow: 0 0 0 4px rgba(79,70,229,.15);
}
.tl-dot--green {
    border-color: var(--green);
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(16,185,129,.15);
}

.tl-body { flex: 1; }

.tl-date {
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .04em;
    display: block;
    margin-bottom: 5px;
    font-family: var(--mono);
}
.tl-date--green { color: var(--green); }

.tl-role {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.tl-company {
    font-size: .82rem;
    color: var(--indigo);
    font-weight: 500;
    margin-bottom: 8px;
}
.tl-desc {
    font-size: .86rem;
    color: var(--muted);
    line-height: 1.65;
}

.timeline-item--side .tl-body {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--r);
    padding: 14px 16px;
}
.timeline-item--side .tl-role { color: #065f46; }
.timeline-item--side .tl-company { color: var(--green); }
.timeline-item--side .tl-desc { color: #047857; }

/* Skills */
.skills-section {
    margin-bottom: 40px;
}
.skills-heading {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
}
.skills-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 99px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-2);
    box-shadow: var(--sh-sm);
    transition: var(--t);
    cursor: default;
}
.skill-pill:hover {
    border-color: var(--indigo-light);
    color: var(--indigo);
    background: var(--indigo-xlight);
    transform: translateY(-2px);
    box-shadow: var(--sh);
}
.skill-ico { font-size: 1rem; }

/* Ausbildung / Studium – prominent cards */
.edu-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}
.edu-chip {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(99,102,241,.10) 0%, rgba(168,85,247,.06) 100%);
    border: 1px solid rgba(99,102,241,.28);
    border-left: 4px solid var(--accent);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    flex: 1;
    min-width: 260px;
    transition: var(--t);
}
.edu-chip:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.edu-chip > span { font-size: 2rem; flex-shrink: 0; margin-top: 2px; }
.edu-chip strong { display: block; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.edu-chip em     { font-size: .82rem; color: var(--muted); font-style: normal; }

/* Sub-Überschrift Zertifikate */
.certs-sub-heading {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* Zertifikate – kompakt & dezent */
.certs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cert-chip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: none;
    flex: 1;
    min-width: 200px;
    transition: var(--t);
    opacity: .82;
}
.cert-chip:hover { box-shadow: var(--sh-sm); transform: translateY(-1px); opacity: 1; }
.cert-chip > span { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.cert-chip strong { display: block; font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.cert-chip em     { font-size: .73rem; color: var(--muted); font-style: normal; }

/* ========================================================== TOOLS */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 24px;
}

.tool-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: var(--t);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}
.tool-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    border: 1px solid transparent;
    background: var(--grad-main) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--t);
    pointer-events: none; /* Klicks auf Buttons/Links durchlassen */
}
.tool-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.08); }
.tool-card:hover::before { opacity: 1; }

.tool-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.tool-icon-big { font-size: 2.2rem; line-height: 1; }
.tool-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.tool-version {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 500;
    background: rgba(255,255,255,.08);
    color: #94a3b8;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.1);
}
.badge-claude {
    font-size: .72rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(167,139,250,.2), rgba(196,181,253,.15));
    color: #c4b5fd;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(167,139,250,.25);
}

.tool-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.3;
}
.tool-desc {
    font-size: .88rem;
    color: #64748b;
    line-height: 1.65;
    flex: 1;
}
.tool-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-tag {
    font-size: .74rem;
    font-weight: 500;
    background: rgba(79,70,229,.15);
    color: #a5b4fc;
    border: 1px solid rgba(79,70,229,.2);
    padding: 3px 10px;
    border-radius: 6px;
}

.tool-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: auto;
}
.tool-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: #475569;
    font-family: var(--mono);
}

.btn-dl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: var(--r);
    background: var(--grad-main);
    color: #fff !important;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(79,70,229,.4);
    transition: var(--t);
}
.btn-dl:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79,70,229,.55);
}

.tool-warn {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.35);
    border-left: 3px solid var(--amber);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 4px;
}
.tool-warn svg { color: var(--amber); flex-shrink: 0; }
.tool-warn a { color: #fcd34d; text-decoration: underline; font-size: inherit; font-weight: 700; }

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #475569;
}
.empty-state span { font-size: 3rem; display: block; margin-bottom: 16px; }

/* ========================================================== LICENSE */
.legal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

.legal-card {
    border-radius: var(--r-lg);
    padding: 32px;
    border: 1px solid var(--border);
    transition: var(--t);
    box-shadow: var(--sh-sm);
}
.legal-card:hover { box-shadow: var(--sh); }

.legal-card--warn {
    background: linear-gradient(135deg, #fffbeb, #fff9ee);
    border-color: #fde68a;
}
.legal-card--blue {
    background: linear-gradient(135deg, #eff6ff, #eef2ff);
    border-color: #bfdbfe;
}

.legal-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.legal-card-head h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
}
.legal-icon {
    width: 44px; height: 44px; /* WCAG 2.2 AAA 2.5.5 */
    border-radius: 12px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber);
    flex-shrink: 0;
}
.legal-icon--blue {
    background: rgba(79,70,229,.1);
    border-color: rgba(79,70,229,.2);
    color: var(--indigo);
}

.legal-card p {
    font-size: .88rem;
    color: var(--text-2);
    line-height: 1.7;
    margin-bottom: 12px;
}
.legal-card p:last-child { margin-bottom: 0; }

.license-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.license-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .87rem;
    color: var(--text-2);
    line-height: 1.6;
}
.ll-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 800;
    margin-top: 1px;
}
.ll-ok  { background: #d1fae5; color: #065f46; }
.ll-req { background: #dbeafe; color: #1e40af; }
.ll-no  { background: #fee2e2; color: #991b1b; }

.btn-text-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--indigo);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--t);
}
.btn-text-link:hover {
    color: var(--violet);
    gap: 8px;
}

.legal-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--indigo-xlight);
    border: 1px solid #c7d2fe;
    border-radius: var(--r);
    padding: 16px 20px;
    margin-top: 16px;
    flex-shrink: 0;
    color: var(--indigo);
}
.legal-note svg { flex-shrink: 0; margin-top: 2px; }
.legal-note p { font-size: .84rem; color: var(--text-2); margin-bottom: 0; line-height: 1.65; }

.legal-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--indigo-xlight);
    border: 1px solid #c7d2fe;
    border-radius: var(--r);
    padding: 18px 22px;
    color: var(--indigo);
}
.legal-notice svg { flex-shrink: 0; margin-top: 2px; }
.legal-notice p {
    font-size: .85rem;
    color: var(--text-2);
    line-height: 1.65;
    margin: 0;
}

/* ========================================================== CONTACT */
.contact-inner {
    text-align: center;
    padding: 80px 28px;
}
.contact-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================================== FOOTER */
.site-footer {
    background: #050a14;
    color: #475569;
    padding: 56px 0 0;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #0f172a;
    flex-wrap: wrap;
}

.footer-brand .logo { color: #e2e8f0; display: block; margin-bottom: 10px; }
.footer-brand p     { font-size: .84rem; color: #94a3b8; line-height: 1.6; } /* Kontrast >4.5:1 auf #050a14 */
.footer-copy        { margin-top: 6px; font-size: .78rem; color: #94a3b8; } /* AAA: 7:1 auf #050a14 */ /* Kontrast ~4.5:1 auf #050a14 */

.footer-claude { margin-top: 12px; }
.claude-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .75rem;
    color: #94a3b8;   /* war #475569 – korrigiert für dunklen Hintergrund */
    background: rgba(124,58,237,.12);
    border: 1px solid rgba(124,58,237,.3);
    padding: 5px 12px;
    border-radius: 99px;
    transition: var(--t);
}
.claude-badge:hover {
    background: rgba(124,58,237,.22);
    border-color: rgba(124,58,237,.5);
    color: #c4b5fd;
}
.claude-badge svg { color: #a78bfa; flex-shrink: 0; }
.claude-badge a { color: #a5b4fc; font-weight: 600; }
.claude-badge a:hover { color: #c7d2fe; }

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: flex-start;
}
.footer-nav a {
    font-size: .83rem;
    color: #94a3b8;
    font-weight: 500;
    transition: var(--t);
    /* WCAG 2.2 AAA 2.5.5 – Touch Target 44×44 px */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.footer-nav a:hover { color: #c7d2fe; }

/* Impressum */
.impressum-block {
    padding: 40px 0 56px;
}
.impressum-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4f46e5;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.impressum-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #0f172a;
}

.impressum-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.impressum-col strong {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #cbd5e1;   /* war #334155 – nicht lesbar auf #050a14, jetzt >7:1 */
    margin-bottom: 12px;
}
.impressum-col address,
.impressum-col p {
    font-size: .83rem;
    color: #94a3b8;   /* war #334155 – Kontrast auf dunklem Footer korrigiert */
    line-height: 1.75;
}
.impressum-col a { color: #a5b4fc; }  /* war #6366f1 – zu dunkel auf dunklem Bg */
.impressum-col a:hover { color: #c7d2fe; }

/* ========================================================== ANIMATIONS */
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay for grid children */
.tools-grid .tool-card:nth-child(1)  { transition-delay: .05s; }
.tools-grid .tool-card:nth-child(2)  { transition-delay: .1s; }
.tools-grid .tool-card:nth-child(3)  { transition-delay: .15s; }
.tools-grid .tool-card:nth-child(4)  { transition-delay: .2s; }

.skills-cloud .skill-pill:nth-child(even) { transition-delay: .04s; }
.skills-cloud .skill-pill:nth-child(3n)   { transition-delay: .08s; }

/* ========================================================== RESPONSIVE */
@media (max-width: 1000px) {
    .about-layout { grid-template-columns: 1fr; }
    .profile-card { position: static; max-width: 400px; }
    .legal-grid   { grid-template-columns: 1fr; }
    .impressum-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .section { padding: 72px 0; }
    .hero-inner { padding: 60px 24px 40px; }
    .kpi-item { padding: 4px 20px; }
    .hero-kpi { padding: 16px 20px; }
    .about-layout { gap: 32px; }
    .impressum-grid { grid-template-columns: 1fr; }
    .footer-top { flex-direction: column; }
    .certs-row, .edu-row { flex-direction: column; }

    .main-nav {
        display: none;
        position: fixed;
        top: 70px; left: 0; right: 0;
        background: rgba(15,23,42,.97);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding: 24px 28px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .main-nav.open { display: flex; }
    .main-nav a { color: #94a3b8; font-size: 1rem; }
    .nav-toggle { display: flex; }

    .disclaimer-card { padding: 10px 14px; gap: 10px; }
    .disclaimer-icon-wrap { display: none; }
}

/* ========================================================== ACCESSIBILITY TOOLBAR */

/* --- Trigger-Button (rechts unten, immer sichtbar) -------- */
.a11y-trigger {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9998;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--indigo);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(79,70,229,.5), 0 0 0 3px rgba(79,70,229,.2);
    transition: var(--t);
    outline-offset: 4px;
}
.a11y-trigger:hover {
    background: var(--violet);
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(79,70,229,.65), 0 0 0 5px rgba(79,70,229,.15);
}
.a11y-trigger[aria-expanded="true"] {
    background: var(--violet);
    box-shadow: 0 6px 28px rgba(124,58,237,.6), 0 0 0 5px rgba(124,58,237,.15);
}

/* --- Panel (Slide-in von rechts) -------------------------- */
.a11y-panel {
    position: fixed;
    bottom: 92px;
    right: 28px;
    z-index: 9997;
    width: 300px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(79,70,229,.1);
    padding: 0;
    overflow: hidden;
    transform: translateY(12px) scale(.97);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.a11y-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}

.a11y-panel-head {
    background: var(--grad-main);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.a11y-panel-head h3 {
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.a11y-panel-head svg { color: rgba(255,255,255,.8); flex-shrink: 0; }

.a11y-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }

/* --- Einzelne Controls ------------------------------------ */
.a11y-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--r);
    background: var(--bg);
    border: 1px solid var(--border);
    transition: var(--t);
}
.a11y-control:hover { border-color: var(--indigo-light); background: var(--indigo-xlight); }

.a11y-control-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.a11y-control-label small {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.3;
}
.a11y-ctrl-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--indigo-xlight);
    border: 1px solid #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--indigo);
    flex-shrink: 0;
}

/* Toggle Switch */
.a11y-toggle {
    position: relative;
    width: 40px; height: 22px;
    flex-shrink: 0;
}
.a11y-toggle input { opacity: 0; width: 0; height: 0; }
.a11y-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 99px;
    cursor: pointer;
    transition: background var(--t);
}
.a11y-toggle-slider::after {
    content: '';
    position: absolute;
    left: 3px; top: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--t);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.a11y-toggle input:checked + .a11y-toggle-slider { background: var(--indigo); }
.a11y-toggle input:checked + .a11y-toggle-slider::after { transform: translateX(18px); }
.a11y-toggle input:focus-visible + .a11y-toggle-slider {
    outline: 3px solid var(--indigo);
    outline-offset: 3px;
    border-radius: 99px;
}

/* Stepper (Schriftgröße) */
.a11y-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}
.a11y-step-btn {
    width: 44px; height: 44px; /* WCAG 2.2 AAA 2.5.5: 44×44 px (war 28×28) */
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t);
    line-height: 1;
}
.a11y-step-btn:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.a11y-step-btn:disabled { opacity: .35; cursor: not-allowed; }
.a11y-step-val {
    min-width: 28px;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--indigo);
    font-family: var(--mono);
}

.a11y-reset {
    width: 100%;
    margin-top: 4px;
    padding: 9px;
    border-radius: var(--r);
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t);
}
.a11y-reset:hover { border-color: var(--red); color: var(--red); background: #fff0f0; }

/* ---- EFFEKTE (werden per JS via <html>-Klassen gesetzt) -- */

/* Hoher Kontrast */
html.a11y-high-contrast {
    --bg:       #000;
    --surface:  #000;
    --surface-2:#000;
    --text:     #fff;
    --text-2:   #fff;
    --muted:    #e5e5e5;
    --border:   #fff;
}
html.a11y-high-contrast body { background: #000; color: #fff; }
html.a11y-high-contrast .site-header.scrolled { background: #000; border-color: #fff; }
html.a11y-high-contrast .hero,
html.a11y-high-contrast .section-dark,
html.a11y-high-contrast .section-contact { background: #000 !important; }
html.a11y-high-contrast .hero-kpi { background: #111; border-color: #fff; }
html.a11y-high-contrast .kpi-item strong,
html.a11y-high-contrast .hero-name { color: #fff; background: none; -webkit-text-fill-color: #fff; }
html.a11y-high-contrast .hero-sub,
html.a11y-high-contrast .kpi-item span { color: #e5e5e5; }
html.a11y-high-contrast .hero-eyebrow { background: #111; border-color: #fff; color: #fff; }
html.a11y-high-contrast .role-chip { background: #111; border-color: #fff; color: #fff; }
html.a11y-high-contrast a { color: #ffff00 !important; }
html.a11y-high-contrast a:hover { color: #fff !important; }

/* Buttons als <a> – müssen !important überschreiben */
html.a11y-high-contrast .btn-glow,
html.a11y-high-contrast a.btn-glow {
    background: #fff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    box-shadow: none;
}
html.a11y-high-contrast .btn-ghost,
html.a11y-high-contrast a.btn-ghost,
html.a11y-high-contrast .btn-ghost--light,
html.a11y-high-contrast a.btn-ghost--light {
    background: #000 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid #fff !important;
}

html.a11y-high-contrast .glass-card,
html.a11y-high-contrast .tool-card,
html.a11y-high-contrast .legal-card,
html.a11y-high-contrast .cert-chip,
html.a11y-high-contrast .edu-chip,
html.a11y-high-contrast .skill-pill { background: #000; border: 2px solid #fff; color: #fff; }
html.a11y-high-contrast .profile-name,
html.a11y-high-contrast .profile-bio,
html.a11y-high-contrast .tl-role,
html.a11y-high-contrast .tl-desc,
html.a11y-high-contrast .tool-name,
html.a11y-high-contrast .tool-desc { color: #fff !important; }
html.a11y-high-contrast .badge,
html.a11y-high-contrast .tool-tag { background: #000; color: #fff; border-color: #fff; }

/* Timeline Ehrenamt (startsocial) */
html.a11y-high-contrast .timeline-item--side .tl-body {
    background: #000;
    border: 2px solid #fff;
}
html.a11y-high-contrast .timeline-item--side .tl-role,
html.a11y-high-contrast .timeline-item--side .tl-company,
html.a11y-high-contrast .timeline-item--side .tl-desc { color: #fff !important; }

/* Disclaimer */
html.a11y-high-contrast .disclaimer-card { background: #000; border: 2px solid #ffff00; border-left: 4px solid #ffff00; color: #ffff00; }
html.a11y-high-contrast .disclaimer-content strong,
html.a11y-high-contrast .disclaimer-content p { color: #ffff00; }

/* Legal notice + note */
html.a11y-high-contrast .legal-notice,
html.a11y-high-contrast .legal-note {
    background: #000;
    border: 2px solid #fff;
    color: #fff;
}
html.a11y-high-contrast .legal-notice p,
html.a11y-high-contrast .legal-notice svg,
html.a11y-high-contrast .legal-note p,
html.a11y-high-contrast .legal-note svg { color: #fff !important; }

html.a11y-high-contrast .site-footer { background: #000; border-top: 2px solid #fff; }
html.a11y-high-contrast .a11y-panel { background: #000; border: 2px solid #fff; }
html.a11y-high-contrast .a11y-control { background: #111; border-color: #fff; }
html.a11y-high-contrast .a11y-control-label { color: #fff; }
html.a11y-high-contrast .section-eyebrow { background: #000; border: 1px solid #fff; color: #fff; }
html.a11y-high-contrast .section-eyebrow::before { background: #fff; }
html.a11y-high-contrast .section-title { color: #fff !important; }
html.a11y-high-contrast .impressum-col strong,
html.a11y-high-contrast .impressum-col address,
html.a11y-high-contrast .impressum-col p { color: #e5e5e5; }

/* Links hervorheben */
html.a11y-highlight-links a:not(.btn):not(.btn-glow):not(.btn-ghost):not(.btn-dl):not(.skip-link):not(.profile-linkedin) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Animationen pausieren */
html.a11y-pause-anim *,
html.a11y-pause-anim *::before,
html.a11y-pause-anim *::after {
    animation-play-state: paused !important;
    transition-duration: .01ms !important;
}

/* Zeilenabstand erhöhen */
html.a11y-line-height body,
html.a11y-line-height p,
html.a11y-line-height li,
html.a11y-line-height .tool-desc,
html.a11y-line-height .profile-bio,
html.a11y-line-height .tl-desc {
    line-height: 2 !important;
    letter-spacing: .02em;
}

/* Schriftgröße – wird per JS als inline-style auf html gesetzt */

/* ========================================================== SCREENSHOTS & LIGHTBOX */

/* --- Thumbnail-Reihe in der Tool-Card -------------------- */
.tool-screenshots {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tool-thumb {
    position: relative;
    width: 92px;
    height: 62px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(0,0,0,.3);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.tool-thumb:hover {
    border-color: var(--indigo-light);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(79,70,229,.35);
}
.tool-thumb:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 3px;
}

.tool-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lupe-Overlay beim Hover */
.tool-thumb-zoom {
    position: absolute;
    inset: 0;
    background: rgba(79,70,229,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity var(--t);
    border-radius: 8px;
}
.tool-thumb:hover .tool-thumb-zoom,
.tool-thumb:focus-visible .tool-thumb-zoom {
    opacity: 1;
}

/* --- Lightbox Overlay ------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.lightbox[hidden] { display: none; }

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 44px; height: 44px; /* WCAG 2.2 AAA 2.5.5 */
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: background var(--t), transform var(--t);
}
.lightbox-close:hover {
    background: rgba(239,68,68,.5);
    transform: scale(1.1);
}
.lightbox-close:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 3px;
    border-radius: 50%;
}

/* Content-Wrapper */
.lightbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: min(90vw, 1040px);
    width: 100%;
}

.lightbox-img-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: var(--r);
    box-shadow: 0 24px 80px rgba(0,0,0,.65);
    display: block;
    object-fit: contain;
    transition: opacity .18s var(--ease);
}
.lightbox-img.lb-loading { opacity: 0; }

/* Pfeil-Navigation */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: background var(--t), transform var(--t);
    z-index: 2;
}
.lightbox-nav:hover { background: rgba(255,255,255,.24); transform: translateY(-50%) scale(1.08); }
.lightbox-nav:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; border-radius: 50%; }
.lightbox-nav--prev { left: -62px; }
.lightbox-nav--next { right: -62px; }
.lightbox-nav[hidden] { display: none; }

/* Zähler-Bar */
.lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-counter {
    font-size: .8rem;
    font-weight: 600;
    color: #94a3b8;
    font-family: var(--mono);
    letter-spacing: .06em;
    background: rgba(255,255,255,.07);
    padding: 4px 14px;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,.1);
}
.lightbox-counter[hidden] { display: none; }

/* Mobile: Nav-Buttons innerhalb der Bildbreite */
@media (max-width: 600px) {
    .lightbox-nav--prev { left: 6px; }
    .lightbox-nav--next { right: 6px; }
    .lightbox-nav { background: rgba(0,0,0,.55); }
    .lightbox { padding: 16px; }
}

/* Hoher Kontrast */
html.a11y-high-contrast .tool-thumb { border: 2px solid #fff; }
html.a11y-high-contrast .tool-thumb-zoom { background: rgba(0,0,0,.82); }
html.a11y-high-contrast .lightbox-overlay { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.a11y-high-contrast .lightbox-close,
html.a11y-high-contrast .lightbox-nav { background: #000; border: 2px solid #fff; color: #fff; }
html.a11y-high-contrast .lightbox-counter { background: #000; border: 2px solid #fff; color: #fff; }
html.a11y-high-contrast .lightbox-img { border: 2px solid #fff; }

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .tool-thumb,
    .tool-thumb-zoom,
    .lightbox-img { transition: none !important; }
}