@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    --dish-navy: #0b1121;
    --dish-blue: #2c5a85;
    --dish-light-bg: #f8fafc;
    --card-border: #e2e8f0;
    --text-main: #0f172a;
    --text-muted: #475569;
    --vhs-red: #da251d;
    --vhs-yellow: #f5b400;
    --vhs-blue: #0f52ba;
    --font-family: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-y: scroll; } /* Verhindert das Springen der Seite */

/* Scrollleiste global ausblenden, aber Scrollen weiterhin ermöglichen */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
html::-webkit-scrollbar {
    display: none; /* Chrome, Safari und Opera */
}

body { font-family: var(--font-family); background-color: var(--dish-light-bg); color: var(--text-main); line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

code {
    background-color: #f1f5f9;
    color: var(--dish-blue);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: "Courier New", Courier, monospace;
}

mark {
    background-color: var(--vhs-yellow);
    color: var(--text-main);
    padding: 2px 4px;
    border-radius: 3px;
}

/* =========================================
 >>    HEADER & SUB-HEADER (Global)
   ========================================= */
.site-header { background-color: var(--dish-navy); color: #fff; display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 2rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.logo-area { display: flex; align-items: center; gap: 15px; }
.logo-main { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; }
.logo-sub { font-size: 0.8rem; line-height: 1.2; color: #cbd5e1; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 15px; }
.main-nav ul { display: flex; height: 70px; list-style: none; }
.main-nav a { display: flex; align-items: center; gap: 10px; padding: 0 1.5rem; height: 100%; font-size: 0.9rem; font-weight: 500; color: #94a3b8; border-left: 1px solid rgba(255,255,255,0.1); white-space: nowrap; position: relative; transition: color 0.2s, background-color 0.2s; }
.main-nav li:last-child a { border-right: 1px solid rgba(255,255,255,0.1); }
.main-nav a:hover:not(.active) {
    color: #fff;
    background-color: rgba(255,255,255,0.05);
}
.main-nav a.active {
    color: #fff;
    font-weight: 600;
    background: radial-gradient(ellipse at 50% -50%, rgba(255, 255, 255, 0.2), transparent 70%);
}
.sub-header { background-color: #ffffff; border-bottom: 1px solid var(--card-border); padding: 12px 2rem; font-size: 0.9rem; color: var(--text-muted); }

/* =========================================
   FOOTER (Global)
   ========================================= */
.site-footer { background-color: var(--dish-navy); color: #94a3b8; height: 60px; display: flex; align-items: center; padding: 0 2rem; font-size: 0.8rem; margin-top: auto; }
.footer-container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; }
.footer-left, .footer-right { display: flex; align-items: center; gap: 20px; }
.footer-spacer { flex-grow: 1; }
.footer-block { display: flex; align-items: center; gap: 10px; }
.footer-block strong { color: #fff; font-weight: 700; }
.footer-block .icon { width: 20px; height: 20px; }
.vhs-logo-footer { font-weight: 800; letter-spacing: -1px; display: flex; align-items: flex-end; line-height: 1; color: #fff; }
.vhs-logo-footer .dot-red { color: var(--vhs-red); }
.vhs-logo-footer .dot-yellow { color: var(--vhs-yellow); margin-bottom: 2px; }
.vhs-logo-footer .dot-blue { color: var(--vhs-blue); }
.footer-right { gap: 25px; }
.footer-copyright { color: #64748b; }
.footer-divider { width: 1px; height: 15px; background-color: rgba(255, 255, 255, 0.15); }
.footer-right a {
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}
.footer-right a:hover {
    color: #fff;
}

/* =========================================
   LAYOUT CONTAINERS
   ========================================= */
.container { max-width: 1400px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: 1fr 300px; gap: 2rem; flex-grow: 1; }
.container-index { max-width: 1300px; margin: 0 auto; padding: 2rem; width: 100%; flex-grow: 1; display: block; }

/* =========================================
   1. STARTSEITE (index.html)
   ========================================= */
.hero-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.hero-text { max-width: 650px; }
.hero-text h1 { font-size: 3.2rem; font-weight: 800; color: var(--text-main); line-height: 1.15; margin-bottom: 1.5rem; letter-spacing: -1px; }
.hero-text h1::after { content: ""; display: block; width: 50px; height: 5px; background-color: var(--dish-blue); margin-top: 15px; border-radius: 3px; }
.hero-text p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2.5rem; max-width: 550px; }

.hero-actions { display: flex; align-items: center; gap: 30px; }
.btn-primary { background-color: var(--dish-blue); color: #fff; padding: 14px 28px; border-radius: 6px; display: inline-flex; align-items: center; gap: 15px; box-shadow: 0 4px 14px rgba(44, 90, 133, 0.25); transition: transform 0.1s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(44, 90, 133, 0.35); }
.btn-primary .icon-circle { border: 2px solid #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.btn-primary .text-wrap strong { display: block; font-size: 0.95rem; letter-spacing: 0.5px; }
.btn-primary .text-wrap span { display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.8; }
.btn-secondary { display: flex; align-items: center; gap: 10px; color: var(--dish-blue); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }

.vhs-ring-wrapper { width: 320px; height: 320px; border-radius: 50%; background: conic-gradient(var(--dish-blue) 0deg 180deg, var(--vhs-yellow) 180deg 220deg, var(--vhs-red) 220deg 360deg); display: flex; align-items: center; justify-content: center; padding: 4px; }
.vhs-ring-inner { background-color: #fff; width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.vhs-ring-inner h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--text-main); }
.vhs-ring-inner p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 15px; }
.vhs-link { color: var(--dish-blue); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }

.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 2.5rem; }
.card { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; flex-direction: column; border: 1px solid var(--card-border); }
.card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.card-header .icon { width: 40px; height: 40px; color: var(--dish-blue); }
.card-title strong { display: block; font-size: 1.05rem; color: var(--text-main); }
.card-title span { display: block; font-size: 0.8rem; color: var(--dish-blue); }
.card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 2.5rem; flex-grow: 1; }
.card-link { color: var(--dish-blue); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }

.trust-bar { display: flex; justify-content: space-between; background: #fff; padding: 2rem 3rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid var(--card-border); }
.trust-item { display: flex; align-items: center; gap: 20px; }
.trust-item .icon { width: 40px; height: 40px; color: var(--dish-blue); }
.trust-text strong { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.trust-text span { display: block; font-size: 0.8rem; color: var(--text-muted); max-width: 250px; }

/* =========================================
   UNTERSEITEN (Generische Elemente)
   ========================================= */
.page-hero-card { background: linear-gradient(to right, #ffffff 60%, #f0f9ff 100%); border: 1px solid var(--card-border); border-radius: 8px; padding: 2.5rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.02); position: relative; overflow: hidden; }
.hero-content { max-width: 70%; position: relative; z-index: 2; }
.hero-content h1 { font-size: 2.2rem; color: var(--dish-navy); margin-bottom: 0.5rem; letter-spacing: -0.5px; text-transform: uppercase; }
.hero-content h2 { font-size: 1.1rem; color: var(--dish-blue); margin-bottom: 1rem; font-weight: 700; }
.hero-content p { margin-bottom: 1.5rem; color: var(--text-muted); font-size: 0.95rem; }
.hero-content strong {
    color: var(--dish-blue);
    font-weight: 600;
}

.search-wrapper { position: relative; margin-bottom: 1.5rem; max-width: 500px; display: inline-block; width: 100%; margin-right: 15px; }
.search-wrapper .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--dish-navy); width: 20px; height: 20px; }
.search-wrapper input { width: 100%; padding: 14px 20px 14px 45px; border: 1.5px solid var(--dish-blue); border-radius: 6px; font-size: 0.95rem; font-family: var(--font-family); outline: none; }
.search-row { display: flex; align-items: center; }
.badge-free { display: inline-flex; align-items: center; gap: 8px; background-color: #e0f2fe; color: var(--dish-blue); padding: 10px 18px; border-radius: 30px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.hero-illustration { position: absolute; right: 40px; color: rgba(44, 90, 133, 0.05); z-index: 1; display: flex; gap: 10px; align-items: center; }
.hero-illustration .icon { width: 128px; height: 128px; }
.inline-badge { background: var(--dish-blue); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; margin-right: 5px; }

/* =========================================
   SIDEBAR
   ========================================= */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-card { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.sidebar-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; font-size: 1.05rem; font-weight: 700; color: var(--dish-navy); }
.sidebar-header .icon { color: var(--dish-blue); width: 24px; height: 24px; }
.sidebar-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.sidebar-list { list-style: none; }
.sidebar-list li { border-bottom: 1px solid var(--card-border); }
.sidebar-list li:last-child { border-bottom: none; }
.sidebar-list a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 0.85rem; color: var(--text-main); font-weight: 500; }
.sidebar-list a .link-content { display: flex; align-items: center; gap: 10px; }
.sidebar-list a .link-content .icon { color: var(--dish-navy); width: 20px; height: 20px; text-align: center; }
.sidebar-list a .icon--chevron-right { color: #94a3b8; width: 16px; height: 16px; }

/* =========================================
   2. KURSE (kurse.html)
   ========================================= */
.steps-diagram { display: flex; align-items: center; gap: 15px; width: 50%; justify-content: space-between; margin-top: 1rem; }
.step-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: 120px; }
.step-circle { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; background: #e0f2fe; color: var(--dish-blue); }
.step-circle .icon { width: 40px; height: 40px; }
.step-item strong { font-size: 0.9rem; color: var(--text-main); margin-bottom: 5px; }
.step-item span { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }
.step-arrow { flex-grow: 1; height: 2px; border-bottom: 2px dotted var(--dish-blue); position: relative; top: -30px; }
.step-arrow::after { content: '>'; position: absolute; right: -5px; top: -10px; color: var(--dish-blue); font-weight: bold; }

.info-box-main {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 2rem;
    margin-top: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.phases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.phase-card { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 2rem; display: flex; gap: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.phase-icon-wrapper { position: relative; }
.phase-circle { width: 70px; height: 70px; border-radius: 50%; background-color: #f1f5f9; color: var(--dish-blue); display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; }
.phase-circle .icon { width: 32px; height: 32px; }
.phase-number { position: absolute; top: -5px; right: -5px; background: var(--dish-blue); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; border: 2px solid #fff; }
.phase-content { display: flex; flex-direction: column; flex-grow: 1; }
.phase-content h3 { font-size: 1.1rem; color: var(--dish-navy); margin-bottom: 10px; line-height: 1.3; }
.phase-content p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; flex-grow: 1; }
.phase-link { color: var(--dish-blue); font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }

.phase-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    border-color: var(--dish-blue);
}

/* =========================================
   3. BIBLIOTHEK (bibliothek.html)
   ========================================= */
.bib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.bib-card { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 1.5rem; display: flex; align-items: flex-start; gap: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); transition: transform 0.2s; cursor: pointer; }
.bib-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.05); }
.bib-card .phase-icon-wrapper { /* Ensure phase-icon-wrapper is styled correctly within bib-card */
    flex-shrink: 0; /* Prevent icon wrapper from shrinking */
}
.bib-card .bib-content {
    display: flex; /* Make bib-content a flex container */
    flex-direction: column; /* Stack its children vertically */
    flex-grow: 1; /* Allow it to take available space */
}
.bib-content h4 { font-size: 0.95rem; color: var(--dish-navy); margin-bottom: 8px; line-height: 1.3; }
.bib-content p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }

/* =========================================
   4. OFFEN & KOSTENLOS (forfree.html)
   ========================================= */
.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.material-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.material-card .phase-icon-wrapper {
    margin-bottom: 1rem;
}
.material-card .bib-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    width: 100%;
}
.material-card .bib-content h4 { font-size: 1.1rem; }
.material-card .bib-content p { flex-grow: 1; margin-bottom: 1.5rem; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 15px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--dish-blue); transition: background-color 0.2s, border-color 0.2s; }
.btn-outline:hover { background-color: #f0f9ff; border-color: var(--dish-blue); }
.btn-outline .icon { width: 16px; height: 16px; }

.bib-card .btn-outline {
    margin-top: auto; /* Push button to bottom if bib-content is flex column */
}

/* =========================================
   5. HANDS-ON (handson.html)
   ========================================= */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.project-card { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 2rem; display: flex; gap: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.project-icon-wrapper { position: relative; flex-shrink: 0; }
.project-circle { width: 70px; height: 70px; border-radius: 50%; background-color: #f1f5f9; color: var(--dish-blue); display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; }
.project-circle .icon { width: 32px; height: 32px; }
.project-content { display: flex; flex-direction: column; flex-grow: 1; }
.project-content h3 { font-size: 1.05rem; color: var(--dish-navy); margin-bottom: 10px; line-height: 1.3; }
.project-content p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; flex-grow: 1; }
.project-link { color: var(--dish-blue); font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }

/* =========================================
   6. MODUL-DETAIL (modul1.html)
   ========================================= */
.timeline {
    position: relative;
    padding-left: 40px; /* Space for the line and dots */
    margin-top: 2.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background-color: var(--card-border);
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -35px; /* (40px padding - 10px dot radius - 2px line width / 2) */
    top: 24px; /* Align with card padding + half of dot height */
    width: 12px;
    height: 12px;
    background-color: #cbd5e1;
    border: 2px solid var(--dish-light-bg);
    border-radius: 50%;
    z-index: 1;
    transition: all 0.2s;
}

.timeline-content-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

.timeline-content-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}

.timeline-item.current .timeline-content-card { border-left: 4px solid var(--dish-blue); }
.timeline-item.current::before { background-color: var(--dish-blue); transform: scale(1.3); }

.step-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--text-muted); }
.step-number { font-weight: 700; color: var(--text-main); }
.step-duration { display: flex; align-items: center; gap: 5px; }
.step-duration .icon { width: 16px; height: 16px; }
.timeline-content-card h4 { font-size: 1.1rem; color: var(--dish-navy); margin-bottom: 0.5rem; }
.timeline-content-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0; }

/* =========================================
   MODULES GRID (modul1.html)
   ========================================= */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for modules */
    gap: 1.5rem;
    margin-bottom: 1.5rem; /* Add some space below the grid */
}

.module-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

.module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}

.module-icon-wrapper {
    position: relative;
    flex-shrink: 0;
}

.module-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #f1f5f9;
    color: var(--dish-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
}

.module-circle .icon {
    width: 32px;
    height: 32px;
}

.module-number {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--dish-blue);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    border: 2px solid #fff;
}

.module-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.module-content h3 {
    font-size: 1.1rem;
    color: var(--dish-navy);
    margin-bottom: 10px;
    line-height: 1.3;
}

.module-content p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.module-link {
    color: var(--dish-blue);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto; /* Pushes the link to the bottom */
}

/* Styles for module detail pages (modul1-X.html) */
.module-detail-section {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.2s ease-in-out;
}

/* Slider for "Verstehen" section */
.slider-container { position: relative; }
.slider-slides { position: relative; overflow: hidden; min-height: 220px; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.4s ease; }
.slide.active { opacity: 1; visibility: visible; position: relative; }
.slider-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--card-border); }
.slider-nav button { background-color: var(--dish-light-bg); border: 1px solid var(--card-border); color: var(--text-muted); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.slider-nav button:disabled { opacity: 0.5; cursor: not-allowed; }
.slider-dots { display: flex; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background-color: #cbd5e1; cursor: pointer; transition: background-color 0.2s; }
.dot.active { background-color: var(--dish-blue); }

/* Quiz inside slider */
.quiz-question { margin-top: 1.5rem; }
.quiz-question p { margin-bottom: 0.5rem; }
.quiz-options { display: flex; gap: 10px; margin-bottom: 10px; }
.quiz-option { flex-grow: 1; background-color: #fff; border: 1px solid var(--card-border); padding: 10px; border-radius: 6px; cursor: pointer; text-align: center; transition: all 0.2s; }
.quiz-option:hover { border-color: var(--dish-blue); }
.quiz-option.correct { background-color: #dcfce7; border-color: #4ade80; color: #166534; font-weight: 600; }
.quiz-option.incorrect { background-color: #fee2e2; border-color: #f87171; color: #991b1b; font-weight: 600; }
.quiz-feedback { font-size: 0.85rem; font-weight: 500; min-height: 20px; }
.quiz-feedback.correct { color: #166534; }
.quiz-feedback.incorrect { color: #991b1b; }

/* Form for "Ausprobieren" section */
.dish-task-card h3 { font-size: 1.3rem; color: var(--dish-navy); margin-bottom: 0.5rem; }
.dish-task-card p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.form-group input[type="text"], .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 0.95rem; font-family: var(--font-family); }
.form-group textarea { min-height: 80px; resize: vertical; }
.check-group { display: flex; flex-direction: column; gap: 10px; }
.check-group label { display: flex; align-items: center; gap: 10px; font-weight: normal; }
.dish-task-card .btn-primary { padding: 12px 24px; gap: 10px; }
#save-feedback .icon { width: 16px; height: 16px; }

/* Summary Card */
.summary-card-success { background-color: #f0f9ff; border-color: var(--dish-blue); }
.summary-card-success h4 { color: var(--dish-blue); }

/* Dig Deeper Box */
.dig-deeper-box { text-align: center; margin-top: 2rem; padding: 1.5rem; background-color: #fff; border: 1px solid var(--card-border); border-radius: 8px; }
.dig-deeper-box a { color: var(--dish-blue); font-weight: 600; text-decoration: underline; }

/* =========================================
   INTERACTIVE MODULE TIMELINE (modulX-X.html)
   ========================================= */
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background-color: var(--card-border);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 10px;
    width: 12px;
    height: 12px;
    background-color: #cbd5e1;
    border: 2px solid var(--dish-light-bg);
    border-radius: 50%;
    z-index: 1;
    transition: all 0.2s;
}

.timeline-item.current::before {
    background-color: var(--dish-blue);
    transform: scale(1.3);
}

.step-meta {
    cursor: pointer;
}

.timeline-content-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 2rem;
}

.timeline-item.expanded .timeline-content-card {
    max-height: 2000px; /* High enough value */
    padding: 2rem;
}

.timeline-item.current .timeline-content-card {
    border-color: var(--dish-blue);
    box-shadow: 0 6px 15px rgba(44, 90, 133, 0.1);
}

.step-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-left: 5px;
}

.step-number {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1.1rem;
}

.step-duration {
    display: flex;
    align-items: center;
    gap: 5px;
}

.step-duration .icon {
    width: 16px;
    height: 16px;
}

.timeline-content-card h4 {
    font-size: 1.3rem;
    color: var(--dish-navy);
    margin-bottom: 1rem;
}
.timeline-content-card h5 {
    font-size: 1rem;
    color: var(--text-main);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.timeline-content-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.timeline-content-card ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Slider for "Verstehen" section */
.slider-container {
    position: relative;
}

.slider-slides {
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.slider-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}

.slider-nav button {
    background-color: var(--dish-light-bg);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.slider-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slider-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e1;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dot.active {
    background-color: var(--dish-blue);
}

/* Quiz inside slider */
.quiz-question { margin-top: 1.5rem; }
.quiz-question p { margin-bottom: 0.5rem; }
.quiz-options { display: flex; gap: 10px; margin-bottom: 10px; }
.quiz-option {
    flex-grow: 1;
    background-color: #fff;
    border: 1px solid var(--card-border);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.quiz-option:hover { border-color: var(--dish-blue); }
.quiz-option.correct { background-color: #dcfce7; border-color: #4ade80; color: #166534; font-weight: 600; }
.quiz-option.incorrect { background-color: #fee2e2; border-color: #f87171; color: #991b1b; font-weight: 600; }
.quiz-feedback { font-size: 0.85rem; font-weight: 500; min-height: 20px; }
.quiz-feedback.correct { color: #166534; }
.quiz-feedback.incorrect { color: #991b1b; }

/* Form for "Ausprobieren" section */
.dish-task-card h3 { font-size: 1.3rem; color: var(--dish-navy); margin-bottom: 0.5rem; }
.dish-task-card p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.form-group input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: var(--font-family);
}
.check-group { display: flex; flex-direction: column; gap: 10px; }
.check-group label { display: flex; align-items: center; gap: 10px; font-weight: normal; }
.dish-task-card .btn-primary {
    padding: 12px 24px;
    gap: 10px;
}
#save-feedback .icon { width: 16px; height: 16px; }

/* Summary Card */
.summary-card-success {
    background-color: #f0f9ff;
    border-color: var(--dish-blue);
}
.summary-card-success h4 { color: var(--dish-blue); }

/* Dig Deeper Box */
.dig-deeper-box {
    text-align: center;
    margin-top: 2rem;
}
.dig-deeper-box a {
    color: var(--dish-blue);
    font-weight: 600;
    text-decoration: underline;
}

.module-overview-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.2s ease-in-out;
}

.module-overview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    border-color: var(--dish-blue);
    cursor: pointer;
}

.module-overview-card h2 {
    font-size: 1.5rem;
    color: var(--dish-navy);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.module-overview-card h3 {
    font-size: 1.2rem;
    color: var(--dish-blue);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.module-overview-card p, .module-overview-card ul {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.module-overview-card ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
}

.module-overview-card .competence-proof ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

/* General styling for content within module detail sections */
.module-detail-section h2 {
    font-size: 1.5rem;
    color: var(--dish-navy);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.module-detail-section h3 {
    font-size: 1.2rem;
    color: var(--dish-blue);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.module-detail-section p, .module-detail-section ul {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.module-detail-section ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
}

.module-detail-section strong {
    color: var(--text-main);
}

.module-detail-section .learning-goal {
    font-style: italic;
    font-weight: 500;
    color: var(--dish-blue);
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #e0f2fe;
    border-left: 4px solid var(--dish-blue);
    border-radius: 4px;
}

.module-detail-section .competence-proof {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #f1f5f9;
    border: 1px solid var(--card-border);
    border-radius: 8px;
}

.module-detail-section .competence-proof h4 {
    font-size: 1.1rem;
    color: var(--dish-navy);
    margin-bottom: 1rem;
}

.module-detail-section .competence-proof ul {
    list-style: none; /* Remove disc for competence proof list */
    margin-left: 0;
}

.module-detail-section .competence-proof ul li::before {
    content: '✓'; /* Custom bullet point */
    color: var(--dish-blue);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.module-detail-section .central-question {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #f0f9ff;
    border: 1px solid var(--dish-blue);
    border-radius: 8px;
    font-style: italic;
    font-weight: 500;
    color: var(--dish-navy);
}

/* Styling for "Benötigte Materialien" in sidebar */
.sidebar-materials {
    margin-top: 1.5rem; /* Space above this section */
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}

.sidebar-materials h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dish-navy);
    margin-bottom: 1rem;
}

.sidebar-materials ul {
    list-style: none;
    padding: 0;
}

.sidebar-materials ul li {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* =========================================
   GLOSSAR (glossar.html)
   ========================================= */
.glossary-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    margin-bottom: 1.5rem;
}

.glossary-nav a {
    font-weight: 600;
    color: var(--dish-blue);
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.glossary-nav a:hover {
    background-color: #e0f2fe;
}

.glossary-section {
    margin-bottom: 2rem;
}

.glossary-section-header {
    font-size: 2rem;
    color: var(--dish-blue);
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.glossary-entry {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* =========================================
   CHEATSHEET PAGES
   ========================================= */
.cheatsheet-category-section {
    margin-bottom: 2.5rem;
}
.cheatsheet-category-section h2 {
    font-size: 1.5rem;
    color: var(--dish-navy);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 0.75rem;
}
.cheatsheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.cheatsheet-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cheatsheet-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}
.cheatsheet-card .icon {
    width: 32px;
    height: 32px;
    color: var(--dish-blue);
}
.cheatsheet-card h4 {
    font-size: 1.1rem;
    color: var(--dish-navy);
}
.cheatsheet-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-grow: 1;
}

/* MODAL STYLES */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 17, 33, 0.6);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-overlay.visible {
    display: flex;
    opacity: 1;
}
.modal {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay.visible .modal {
    transform: scale(1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
}
.modal-header h3 {
    font-size: 1.2rem;
    color: var(--dish-navy);
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}
.modal-body {
    padding: 0;
    overflow-y: auto;
}
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: flex-end;
}
.btn-download {
    background-color: var(--dish-blue);
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}
.btn-download .icon {
    width: 18px;
    height: 18px;
}

/* Cheatsheet table inside modal */
.cheatsheet-table {
     width: 100%;
     border-collapse: collapse;
 }
 
 .cheatsheet-table th, .cheatsheet-table td {
     padding: 12px 1.5rem;
     text-align: left;
     font-size: 0.9rem;
     border-bottom: 1px solid var(--card-border);
 }
 .cheatsheet-table th {
     background-color: var(--dish-light-bg);
     font-weight: 600;
     color: var(--text-main);
    position: sticky;
    top: 0;
 }
 .cheatsheet-table tr:last-child td {
     border-bottom: none;
 }
 .cheatsheet-table td:first-child {
     width: 35%;
     font-weight: 500;
 }
 .cheatsheet-table td:first-child code {
     font-weight: 600;
     white-space: nowrap;
 }
 .cheatsheet-table td:last-child {
     color: var(--text-muted);
 }

/* =========================================
   SCRIPT PAGE (scripts-templates.html)
   ========================================= */
.script-block {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.script-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
}
.script-header h4 {
    font-size: 1.1rem;
    color: var(--dish-navy);
}
.btn-copy {
    background-color: var(--dish-light-bg);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.script-body { padding: 1.5rem; }
.script-body p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; }
.script-code {
    background-color: #f1f5f9;
    color: var(--dish-blue);
    padding: 1.5rem;
    border-radius: 6px;
    overflow-x: auto;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9rem;
    border: 1px solid var(--card-border);
}
.script-header .community-author {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}
.script-code pre { margin: 0; }


/* =========================================
   ICONS (SVG MASK)
   ========================================= */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
}

.main-nav .icon { width: 20px; height: 20px; }
.card-link .icon { width: 16px; height: 16px; }
.btn-secondary .icon { width: 18px; height: 18px; }
.footer-right .icon { width: 16px; height: 16px; }
.badge-free .icon { width: 16px; height: 16px; }

.icon--house { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); }
.icon--graduation-cap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c0 1.66 4 3 10 0v-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c0 1.66 4 3 10 0v-5'/%3E%3C/svg%3E"); }
.icon--book-open { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.icon--gift { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E"); }
.icon--laptop-code { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M9.5 8l-2.5 4 2.5 4'/%3E%3Cpath d='M14.5 8l2.5 4-2.5 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M9.5 8l-2.5 4 2.5 4'/%3E%3Cpath d='M14.5 8l2.5 4-2.5 4'/%3E%3C/svg%3E"); }
.icon--play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E"); }
.icon--calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.icon--layout-grid { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E"); }
.icon--map-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.icon--sitemap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6'/%3E%3Crect x='15' y='15' width='6' height='6'/%3E%3Cpath d='M6 9v6'/%3E%3Cpath d='M15 6v3'/%3E%3Cpath d='M12 6H9'/%3E%3Cpath d='M18 9h-3'/%3E%3Cpath d='M18 15h-3'/%3E%3Cpath d='M12 15H9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6'/%3E%3Crect x='15' y='15' width='6' height='6'/%3E%3Cpath d='M6 9v6'/%3E%3Cpath d='M15 6v3'/%3E%3Cpath d='M12 6H9'/%3E%3Cpath d='M18 9h-3'/%3E%3Cpath d='M18 15h-3'/%3E%3Cpath d='M12 15H9'/%3E%3C/svg%3E"); }
.icon--chevron-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }
.icon--user-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpolyline points='17 11 19 13 23 9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpolyline points='17 11 19 13 23 9'/%3E%3C/svg%3E"); }
.icon--shield-half { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 22V2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 22V2'/%3E%3C/svg%3E"); }
.icon--crosshair { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='22' y1='12' x2='18' y2='12'/%3E%3Cline x1='6' y1='12' x2='2' y2='12'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='12' y1='22' x2='12' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='22' y1='12' x2='18' y2='12'/%3E%3Cline x1='6' y1='12' x2='2' y2='12'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='12' y1='22' x2='12' y2='18'/%3E%3C/svg%3E"); }
.icon--flask-conical { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 2.2c-1.1.2-1.8.8-2.3 1.3l-4 4c-1.4 1.4-2.2 3.3-2.2 5.3s.8 3.9 2.2 5.3l4 4c.5.5 1.2 1.1 2.3 1.3'/%3E%3Cpath d='M13.8 2.2c1.1.2 1.8.8 2.3 1.3l4 4c1.4 1.4 2.2 3.3 2.2 5.3s-.8 3.9-2.2 5.3l-4 4c-.5.5-1.2 1.1-2.3 1.3'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M8.5 22h7'/%3E%3Cpath d='m12 13.5-1.5-4'/%3E%3Cpath d='m12 13.5 1.5-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 2.2c-1.1.2-1.8.8-2.3 1.3l-4 4c-1.4 1.4-2.2 3.3-2.2 5.3s.8 3.9 2.2 5.3l4 4c.5.5 1.2 1.1 2.3 1.3'/%3E%3Cpath d='M13.8 2.2c1.1.2 1.8.8 2.3 1.3l4 4c1.4 1.4 2.2 3.3 2.2 5.3s-.8 3.9-2.2 5.3l-4 4c-.5.5-1.2 1.1-2.3 1.3'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M8.5 22h7'/%3E%3Cpath d='m12 13.5-1.5-4'/%3E%3Cpath d='m12 13.5 1.5-4'/%3E%3C/svg%3E"); }
.icon--award { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E"); }
.icon--globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.icon--search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); }
.icon--brain { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15A2.5 2.5 0 0 1 9.5 22h-2A2.5 2.5 0 0 1 5 19.5v-15A2.5 2.5 0 0 1 7.5 2h2z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 2.5 2.5h2A2.5 2.5 0 0 0 19 19.5v-15A2.5 2.5 0 0 0 16.5 2h-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15A2.5 2.5 0 0 1 9.5 22h-2A2.5 2.5 0 0 1 5 19.5v-15A2.5 2.5 0 0 1 7.5 2h2z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 2.5 2.5h2A2.5 2.5 0 0 0 19 19.5v-15A2.5 2.5 0 0 0 16.5 2h-2z'/%3E%3C/svg%3E"); }
.icon--user-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Crect x='14' y='11' width='8' height='5' rx='1'/%3E%3Cpath d='M18 11V9a2 2 0 0 0-4 0v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Crect x='14' y='11' width='8' height='5' rx='1'/%3E%3Cpath d='M18 11V9a2 2 0 0 0-4 0v2'/%3E%3C/svg%3E"); }
.icon--arrow-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); }
.icon--info { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }
.icon--book-marked { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20v6H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20v6H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); }
.icon--unlock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E"); }
.icon--monitor { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); }
.icon--user-shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3Cpath d='M16 20s-2-3-4-3-4 3-4 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3Cpath d='M16 20s-2-3-4-3-4 3-4 3'/%3E%3C/svg%3E"); }
.icon--spell-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 16 6-12 6 12'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='m16 20 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 16 6-12 6 12'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='m16 20 2 2 4-4'/%3E%3C/svg%3E"); }
.icon--folder-open { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14l1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.09a2 2 0 0 1 1.71.99L10 7h10a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14l1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.09a2 2 0 0 1 1.71.99L10 7h10a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
.icon--file-code { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E"); }
.icon--terminal { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'/%3E%3Cline x1='12' y1='19' x2='20' y2='19'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'/%3E%3Cline x1='12' y1='19' x2='20' y2='19'/%3E%3C/svg%3E"); }
.icon--app-window { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M10 4v4'/%3E%3Cpath d='M2 8h20'/%3E%3Cpath d='M6 4v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M10 4v4'/%3E%3Cpath d='M2 8h20'/%3E%3Cpath d='M6 4v4'/%3E%3C/svg%3E"); }
.icon--users { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.icon--help-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.icon--wrench { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.icon--mail-open { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z'/%3E%3Cpath d='m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z'/%3E%3Cpath d='m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10'/%3E%3C/svg%3E"); }
.icon--lightbulb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5C17.7 10.2 18 9 18 7c0-2.2-1.8-4-4-4S10 4.8 10 7c0 2 1.3 4.3 2.5 5.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5C17.7 10.2 18 9 18 7c0-2.2-1.8-4-4-4S10 4.8 10 7c0 2 1.3 4.3 2.5 5.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.icon--file-text { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E"); }
.icon--users-2 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 19a6 6 0 0 0-12 0'/%3E%3Ccircle cx='8' cy='10' r='4'/%3E%3Cpath d='M22 19a6 6 0 0 0-6-6'/%3E%3Cpath d='M16 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 19a6 6 0 0 0-12 0'/%3E%3Ccircle cx='8' cy='10' r='4'/%3E%3Cpath d='M22 19a6 6 0 0 0-6-6'/%3E%3Cpath d='M16 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3C/svg%3E"); }
.icon--tux { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.3 2.2c-.3-.1-.6-.2-.9-.2-.9 0-1.7.5-2.2 1.3L4 8.5c-1.4 1.4-2.2 3.3-2.2 5.3s.8 3.9 2.2 5.3l4.2 4.2c.5.5 1.2 1.1 2.3 1.3'/%3E%3Cpath d='M12.7 2.2c.3-.1.6-.2.9-.2.9 0 1.7.5 2.2 1.3l4.2 4.2c1.4 1.4 2.2 3.3 2.2 5.3s-.8 3.9-2.2 5.3l-4.2 4.2c-.5.5-1.2 1.1-2.3 1.3'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M8.5 22h7'/%3E%3Cpath d='M12 13.5l-1.5-4'/%3E%3Cpath d='M12 13.5l1.5-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.3 2.2c-.3-.1-.6-.2-.9-.2-.9 0-1.7.5-2.2 1.3L4 8.5c-1.4 1.4-2.2 3.3-2.2 5.3s.8 3.9 2.2 5.3l4.2 4.2c.5.5 1.2 1.1 2.3 1.3'/%3E%3Cpath d='M12.7 2.2c.3-.1.6-.2.9-.2.9 0 1.7.5 2.2 1.3l4.2 4.2c1.4 1.4 2.2 3.3 2.2 5.3s-.8 3.9-2.2 5.3l-4.2 4.2c-.5.5-1.2 1.1-2.3 1.3'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M8.5 22h7'/%3E%3Cpath d='M12 13.5l-1.5-4'/%3E%3Cpath d='M12 13.5l1.5-4'/%3E%3C/svg%3E"); }
.icon--windows { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v4h20z'/%3E%3Cpath d='M22 14v4c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-4h20z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v4h20z'/%3E%3Cpath d='M22 14v4c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-4h20z'/%3E%3C/svg%3E"); }
.icon--cpu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2' ry='2'/%3E%3Cpath d='M9 9h6v6H9z'/%3E%3Cpath d='M9 1v3'/%3E%3Cpath d='M15 1v3'/%3E%3Cpath d='M9 20v3'/%3E%3Cpath d='M15 20v3'/%3E%3Cpath d='M20 9h3'/%3E%3Cpath d='M20 15h3'/%3E%3Cpath d='M1 9h3'/%3E%3Cpath d='M1 15h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2' ry='2'/%3E%3Cpath d='M9 9h6v6H9z'/%3E%3Cpath d='M9 1v3'/%3E%3Cpath d='M15 1v3'/%3E%3Cpath d='M9 20v3'/%3E%3Cpath d='M15 20v3'/%3E%3Cpath d='M20 9h3'/%3E%3Cpath d='M20 15h3'/%3E%3Cpath d='M1 9h3'/%3E%3Cpath d='M1 15h3'/%3E%3C/svg%3E"); }
.icon--download { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.icon--copy { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
.icon--check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.icon--arrow-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E"); }

/* Responsive adjustments for modules-grid */
@media (max-width: 1200px) {
    .modules-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}