/* =========================================================
   SEMATRAIN FACHINFORMATIKER PORTAL 2026
   ========================================================= */

:root {
    --fi-navy:#12263a;
    --fi-blue:#006d9c;
    --fi-blue-dark:#005578;
    --fi-text:#23313f;
    --fi-muted:#617181;
    --fi-bg:#f5f7f9;
    --fi-white:#ffffff;
    --fi-border:#dce4ea;
    --fi-soft-blue:#eef7fb;
    --fi-soft-green:#edf8f1;
    --fi-soft-amber:#fff8e8;
    --fi-green:#287a45;
    --fi-radius:14px;
    --fi-shadow:0 8px 28px rgba(18,38,58,.08);
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    background:var(--fi-bg);
    color:var(--fi-text);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height:1.65;
}

a {
    color:var(--fi-blue-dark);
}

a:hover {
    color:var(--fi-blue);
}

.fi-skip-link {
    position:absolute;
    top:-100px;
    left:18px;
    z-index:9999;
    padding:10px 14px;
    border-radius:8px;
    background:#fff;
    color:var(--fi-navy);
    font-weight:750;
}

.fi-skip-link:focus {
    top:12px;
}

.fi-brandbar {
    background:#fff;
    border-bottom:1px solid var(--fi-border);
}

.fi-brandbar__inner {
    width:min(1120px,calc(100% - 40px));
    min-height:64px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:9px;
}

.fi-brandbar__brand {
    color:var(--fi-navy);
    font-size:1.08rem;
    font-weight:850;
    text-decoration:none;
}

.fi-brandbar__divider {
    color:#9aa9b5;
}

.fi-brandbar__portal {
    color:var(--fi-muted);
    font-weight:650;
}

.fi-brandbar__status {
    margin-left:auto;
    color:var(--fi-muted);
    font-size:.88rem;
}

.fi-portal-nav {
    background:var(--fi-navy);
}

.fi-portal-nav__inner {
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
    padding:10px 0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.fi-portal-nav a,
.fi-portal-nav__status {
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:.92rem;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
}

.fi-portal-nav a:hover,
.fi-portal-nav a.is-active {
    background:rgba(255,255,255,.14);
    color:#fff;
}

.fi-portal-nav a.is-active {
    border-color:rgba(255,255,255,.68);
}

.fi-portal-nav__status {
    color:rgba(255,255,255,.72);
}

.fi-breadcrumbs {
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
    padding:18px 0 2px;
}

.fi-breadcrumbs ol {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0;
    padding:0;
    list-style:none;
    color:var(--fi-muted);
    font-size:.9rem;
}

.fi-breadcrumbs li {
    display:flex;
    align-items:center;
}

.fi-breadcrumbs li:not(:last-child)::after {
    content:"/";
    margin-left:7px;
    color:#9babb7;
}

.hero {
    background:var(--fi-bg);
    color:var(--fi-text);
    padding:44px 22px 32px;
}

.hero-inner,
.content,
.footer-inner {
    width:min(1120px,calc(100% - 40px));
    margin-inline:auto;
}

.hero h1 {
    max-width:900px;
    margin:0;
    color:var(--fi-navy);
    font-size:clamp(2.15rem,6vw,4.15rem);
    line-height:1.05;
    letter-spacing:-.035em;
}

.hero p {
    color:#425466;
}

.fi-lesson-hero {
    padding-top:38px;
}

.fi-lesson-hero__grid {
    display:grid;
    grid-template-columns:
        minmax(0,1.35fr)
        minmax(290px,.65fr);
    gap:32px;
    align-items:start;
}

.fi-lesson-hero__grid--single {
    grid-template-columns:1fr;
}

.fi-lesson-hero__lead {
    max-width:780px;
    margin:20px 0 0;
    color:#425466;
    font-size:clamp(1.05rem,2vw,1.22rem);
}

.fi-lesson-hero__context {
    margin:22px 0 0;
    color:var(--fi-muted);
    font-size:.92rem;
}

.fi-eyebrow {
    margin:0 0 8px;
    color:var(--fi-blue-dark);
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fi-goal-panel {
    padding:24px;
    background:#fff;
    border:1px solid var(--fi-border);
    border-radius:var(--fi-radius);
    box-shadow:var(--fi-shadow);
}

.fi-goal-panel h2 {
    margin:0 0 18px;
    color:var(--fi-navy);
    font-size:1.45rem;
    line-height:1.25;
}

.fi-goal-panel__list {
    display:grid;
    gap:11px;
    margin:0;
    padding:0;
    list-style:none;
}

.fi-goal-panel__list li {
    position:relative;
    margin:0;
    padding-left:29px;
}

.fi-goal-panel__list li::before {
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--fi-green);
    font-size:1.1rem;
    font-weight:900;
}

.content {
    padding-top:28px;
    padding-bottom:64px;
}

.section {
    margin:24px 0;
}

.panel,
.card,
.fi-question,
.fi-quiz-wrap {
    background:#fff;
    border:1px solid var(--fi-border);
    border-radius:var(--fi-radius);
    box-shadow:var(--fi-shadow);
}

.panel {
    padding:clamp(22px,4vw,38px);
}

.section h2,
.panel h2 {
    color:var(--fi-navy);
    font-size:clamp(1.5rem,3vw,2.15rem);
    line-height:1.2;
}

.section h3,
.panel h3,
.card h3 {
    color:var(--fi-navy);
}

.grid {
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
}

.card {
    padding:22px;
    border-top:4px solid var(--fi-blue);
    box-shadow:none;
}

.fi-lesson-content .card::before,
.module-card::before,
.fi-curriculum-overview__item::before,
.scenario::before,
.fi-callout--practice::before,
.fi-callout--critical::before,
.fi-source-box::before,
.next-box::before {
    display:block;
    margin:0 0 8px;
    color:var(--fi-blue-dark);
    font-size:.78rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fi-lesson-content .card::before {
    content:"LERNBAUSTEIN";
}

.module-card::before,
.fi-curriculum-overview__item::before {
    content:"LERNETAPPE";
}

.scenario::before {
    content:"PRAXISSITUATION";
}

.fi-callout--practice::before {
    content:"PRAXIS";
}

.fi-callout--critical::before {
    content:"WICHTIG";
}

.fi-source-box::before {
    content:"QUELLEN & EINORDNUNG";
}

.next-box::before {
    content:"NÄCHSTER SCHRITT";
}

.learning-stage {
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    background:var(--fi-soft-green);
    color:var(--fi-green);
    font-size:.84rem;
    font-weight:800;
}

.fi-callout {
    margin:22px 0;
    padding:19px 21px;
    border:0;
    border-left:5px solid var(--fi-blue);
    border-radius:12px;
    background:var(--fi-soft-blue);
}

.fi-callout--critical {
    border-left-color:#d59a00;
    background:var(--fi-soft-amber);
}

.fi-callout--practice,
.learning-task,
.next-box {
    border-left-color:var(--fi-green);
    background:var(--fi-soft-green);
}

.scenario {
    border-left:5px solid var(--fi-blue);
    background:#fff;
}

.fi-curriculum-thread,
.fi-curriculum-overview {
    border-left:5px solid var(--fi-blue);
}

.fi-curriculum-thread__eyebrow {
    margin:0 0 8px;
    color:var(--fi-blue-dark);
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fi-curriculum-thread__grid {
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:15px;
    margin:20px 0;
}

.fi-curriculum-thread__grid > div,
.fi-curriculum-overview__item {
    padding:17px;
    background:#f8fafb;
    border:1px solid var(--fi-border);
    border-radius:11px;
}

.fi-quiz-wrap {
    margin:34px 0;
    overflow:hidden;
}

.fi-quiz-head {
    padding:28px;
    background:#f8fafb;
    border-bottom:1px solid var(--fi-border);
}

.fi-quiz-kicker {
    color:var(--fi-blue-dark);
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fi-quiz-head h2 {
    margin:7px 0 0;
    color:var(--fi-navy);
}

.fi-quiz {
    padding:0 28px 28px;
}

.fi-question {
    margin-top:24px;
    padding:22px;
    box-shadow:none;
}

.fi-question legend {
    width:100%;
    color:var(--fi-navy);
    font-weight:800;
}

.fi-question__number {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:31px;
    min-height:31px;
    margin-right:9px;
    border-radius:50%;
    background:var(--fi-navy);
    color:#fff;
    font-size:.84rem;
}

.fi-options {
    display:grid;
    gap:9px;
}

.fi-button,
.action {
    border-radius:9px;
}

.fi-button--primary,
.action {
    background:var(--fi-blue);
    color:#fff;
}

.fi-button--primary:hover,
.action:hover {
    background:var(--fi-blue-dark);
    color:#fff;
}

.fi-source-box,
.next-box {
    margin-top:32px;
    padding:22px;
    border:1px solid var(--fi-border);
    border-radius:var(--fi-radius);
}

.fi-source-box {
    background:#f8fafb;
}

.next-box {
    border-left:5px solid var(--fi-green);
}

.module-card {
    padding:20px;
    border:1px solid var(--fi-border);
    border-radius:var(--fi-radius);
    background:#fff;
}

.module-card:hover {
    border-color:#9fc6d8;
}

footer {
    background:var(--fi-navy);
    color:rgba(255,255,255,.78);
}

.footer-inner {
    padding:24px 0;
}

footer a {
    color:#fff;
}

@media (max-width:900px) {

    .fi-lesson-hero__grid {
        grid-template-columns:1fr;
    }

    .fi-curriculum-thread__grid {
        grid-template-columns:1fr;
    }
}

@media (max-width:640px) {

    .fi-brandbar__inner,
    .fi-portal-nav__inner,
    .fi-breadcrumbs,
    .hero-inner,
    .content,
    .footer-inner {
        width:min(100% - 28px,1120px);
    }

    .fi-brandbar__inner {
        min-height:58px;
        flex-wrap:wrap;
        padding-block:8px;
    }

    .fi-brandbar__status {
        width:100%;
        margin-left:0;
    }

    .fi-portal-nav__inner {
        gap:6px;
        padding-block:8px;
    }

    .fi-portal-nav a,
    .fi-portal-nav__status {
        padding-inline:10px;
        font-size:.86rem;
    }

    .hero {
        padding:32px 14px 24px;
    }

    .hero h1 {
        font-size:clamp(2rem,12vw,3rem);
    }

    .panel,
    .fi-goal-panel,
    .fi-question {
        padding:20px;
    }

    .grid {
        grid-template-columns:1fr;
    }
}