/* ==========================================================
   style.css
   Designidee 1: Frosted Glass / Premium Corporate
   Zwei scrollbare Boxen mit dezenter Hintergrundgestaltung
   HTML5 + BEM
   ========================================================== */


/* ==========================================================
   Reset und Basis
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at top left,
            rgba(99, 102, 241, 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(16, 185, 129, 0.10),
            transparent 36%
        ),
        #f8fafc;

    color: #0f172a;

   overflow-y: auto;
}


/* ==========================================================
   Site Header
   Block: site-header
   ========================================================== */

.site-header {
    height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    padding: 0 2rem;

    background:
        rgba(255, 255, 255, 0.78);

    border-bottom: 1px solid rgba(148, 163, 184, 0.22);

    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);

    box-shadow:
        0 1rem 3rem rgba(15, 23, 42, 0.05);

    position: relative;
    z-index: 10;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-header__icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 1rem;

    color: #4338ca;
    background:
        linear-gradient(
            135deg,
            rgba(99, 102, 241, 0.16),
            rgba(14, 165, 233, 0.12)
        );

    border: 1px solid rgba(99, 102, 241, 0.18);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0.8rem 2rem rgba(79, 70, 229, 0.12);

    font-size: 1.3rem;
    font-weight: 800;
}

.site-header__intro {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.site-header__label {
    margin: 0;

    color: #4338ca;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.site-header__subtitle {
    margin: 0;

    color: #475569;

    font-size: 1rem;
    line-height: 1.4;
}

.site-header__meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.site-header__info-box {
    min-width: 140px;

    padding: 0.75rem 1.1rem;

    background:
        rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1rem;

    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0.8rem 2rem rgba(15, 23, 42, 0.05);
}

.site-header__info-label {
    display: block;

    margin-bottom: 0.25rem;

    color: #64748b;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.site-header__info-value {
    display: block;

    color: #0f172a;

    font-size: 1rem;
    font-weight: 800;
}

/* ==========================================================
   ANMELDEBUTTON
  
   ========================================================== */


.site-header__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0.95rem 1.4rem;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #2563eb
        );

    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 1rem;

    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;

    box-shadow:
        0 1rem 2rem rgba(37, 99, 235, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.site-header__button:hover {
    transform: translateY(-2px);

    filter: brightness(1.04);

    box-shadow:
        0 1.4rem 2.8rem rgba(37, 99, 235, 0.26);
}

.site-header__button:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.35);
    outline-offset: 4px;
}

.site-header__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0.95rem 1.4rem;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #2563eb
    );

    border-radius: 1rem;

    text-decoration: none;

    font-weight: 800;
}
/* ==========================================================
   Hauptlayout
   Block: course
   ========================================================== */

.course {
    height: calc(100vh - 92px);

    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr);

    overflow: hidden;
}


/* ==========================================================
   Gemeinsame Spaltenstruktur
   ========================================================== */

.course__business,
.course__technical {
    position: relative;

    overflow-y: auto;
    overflow-x: hidden;

    min-width: 0;

    padding: 4.25rem 3.5rem;

    scroll-behavior: smooth;
}

.course__business::before,
.course__technical::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.9;
}

.course__inner {
    position: relative;
    z-index: 1;

    max-width: 880px;
    margin: 0 auto;
}


/* ==========================================================
   Linke Box: dezenter Blau-/Violett-Hintergrund
   ========================================================== */

.course__business {
    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(99, 102, 241, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 82%,
            rgba(14, 165, 233, 0.13),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eef2ff 48%,
            #dbeafe 100%
        );
}

.course__business::before {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.26),
            rgba(255, 255, 255, 0)
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.26),
            rgba(255, 255, 255, 0)
        );
}


/* ==========================================================
   Rechte Box: dezenter Grün-/Mint-Hintergrund
   ========================================================== */

.course__technical {
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(16, 185, 129, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 18% 86%,
            rgba(20, 184, 166, 0.13),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f0fdf4 54%,
            #dcfce7 100%
        );
}

.course__technical::before {
    background:
        linear-gradient(
            270deg,
            rgba(255, 255, 255, 0.34),
            rgba(255, 255, 255, 0)
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0)
        );
}


/* ==========================================================
   Mittlere Trennspalte
   ========================================================== */

.course__divider {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.84),
            rgba(255, 255, 255, 0.55)
        );

    border-left: 1px solid rgba(148, 163, 184, 0.22);
    border-right: 1px solid rgba(148, 163, 184, 0.22);

    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);

    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.9),
        inset -1px 0 0 rgba(255, 255, 255, 0.7);
}

.course__divider::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(100, 116, 139, 0.35),
            transparent
        );

    transform: translateX(-50%);
}

.course__divider-circle {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #10b981
        );

    border-radius: 50%;

    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.06em;

    box-shadow:
        0 1rem 2rem rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);

    transform: translate(-50%, -50%);

    z-index: 2;
}

.course__divider-text {
    position: relative;
    z-index: 1;

    writing-mode: vertical-rl;
    transform: rotate(180deg);

    color: #475569;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}


/* ==========================================================
   Kurskopf
   ========================================================== */

.course__header {
    margin-bottom: 3.25rem;
}

.course__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.72rem 1.35rem;

    color: #4338ca;
    background:
        rgba(255, 255, 255, 0.62);

    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;

    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 1rem 2rem rgba(15, 23, 42, 0.05);

    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.course__technical .course__eyebrow {
    color: #047857;
}

.course__speaker {
    margin: 2rem 0 1.1rem;

    color: #64748b;

    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.course__title {
    max-width: 820px;

    margin: 0 0 1.5rem;

    color: #0f172a;

    font-size: clamp(3rem, 4.8vw, 5.4rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.065em;

    text-wrap: balance;
}

.course__description {
    max-width: 760px;

    margin: 0;

    color: #334155;

    font-size: clamp(1.05rem, 1.35vw, 1.28rem);
    line-height: 1.8;
}


/* ==========================================================
   Module und Karten
   ========================================================== */

.course__modules {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;

    padding-bottom: 4rem;
}

.course__card {
    position: relative;

    padding: 2rem;

    color: #0f172a;
    background:
        rgba(255, 255, 255, 0.66);

    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 1.6rem;

    backdrop-filter: blur(26px) saturate(165%);
    -webkit-backdrop-filter: blur(26px) saturate(165%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 1.25rem 3rem rgba(15, 23, 42, 0.08);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

.course__card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            #6366f1,
            #0ea5e9
        );

    opacity: 0.86;
}

.course__card--green::before {
    background:
        linear-gradient(
            180deg,
            #10b981,
            #14b8a6
        );
}

.course__card:hover {
    transform: translateY(-4px);

    background:
        rgba(255, 255, 255, 0.82);

    border-color: rgba(255, 255, 255, 0.95);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1.7rem 3.6rem rgba(15, 23, 42, 0.11);
}

.course__card-label {
    display: block;

    margin-bottom: 0.95rem;

    color: #64748b;

    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.course__card-title {
    margin: 0 0 0.9rem;

    color: #0f172a;

    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.24;
}

.course__card-text {
    margin: 0;

    color: #475569;

    font-size: 1.04rem;
    line-height: 1.72;
}


/* ==========================================================
   Scrollbars
   ========================================================== */

.course__business::-webkit-scrollbar,
.course__technical::-webkit-scrollbar {
    width: 10px;
}

.course__business::-webkit-scrollbar-track,
.course__technical::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.32);
}

.course__business::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #818cf8,
            #60a5fa
        );

    border-radius: 999px;
}

.course__technical::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #34d399,
            #2dd4bf
        );

    border-radius: 999px;
}

.course__business::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #6366f1,
            #3b82f6
        );
}

.course__technical::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #10b981,
            #14b8a6
        );
}


/* Firefox Scrollbar */

.course__business {
    scrollbar-color: #818cf8 rgba(255, 255, 255, 0.32);
    scrollbar-width: thin;
}

.course__technical {
    scrollbar-color: #34d399 rgba(255, 255, 255, 0.32);
    scrollbar-width: thin;
}


/* ==========================================================
   Optionaler Anfragebereich
   Wird unterhalb des Viewports sichtbar, wenn mobil gescrollt wird
   ========================================================== */

.request {
    display: none;

    padding: 2rem;

    background: #ffffff;

    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.request__text {
    max-width: 900px;

    margin: 0 auto;

    color: #475569;

    font-size: 1rem;
    line-height: 1.7;
}


/* ==========================================================
   Barrierearmut: reduzierte Bewegung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* ==========================================================
   Responsive Layout
   ========================================================== */

@media (max-width: 1120px) {

    body {
        overflow: auto;
    }

    .site-header {
        height: auto;

        flex-direction: column;
        align-items: flex-start;

        padding: 1.4rem;
    }

    .site-header__meta {
        width: 100%;

        flex-wrap: wrap;
    }

    .course {
        height: auto;

        grid-template-columns: 1fr;
    }

    .course__business,
    .course__technical {
        min-height: 100vh;

        overflow: visible;

        padding: 3.2rem 1.5rem;
    }

    .course__divider {
        min-height: 90px;
    }

    .course__divider::before {
        top: 50%;
        bottom: auto;
        left: 0;

        width: 100%;
        height: 1px;

        transform: translateY(-50%);
    }

    .course__divider-circle {
        display: none;
    }

    .course__divider-text {
        writing-mode: horizontal-tb;

        transform: none;

        letter-spacing: 0.22em;
    }


/* ==========================================================
   FORMULAR
   ========================================================== */


   

    .request {
        display: block;
    }
}


@media (max-width: 720px) {

    .site-header__brand {
        align-items: flex-start;
    }

    .site-header__icon {
        width: 42px;
        height: 42px;

        border-radius: 0.85rem;
    }

    .site-header__label {
        font-size: 0.7rem;
        letter-spacing: 0.22em;
    }

    .site-header__subtitle {
        font-size: 0.94rem;
    }

    .site-header__meta {
        flex-direction: column;
        align-items: stretch;
    }

    .site-header__info-box,
    .site-header__button {
        width: 100%;
    }

    .course__business,
    .course__technical {
        padding: 2.5rem 1.1rem;
    }

    .course__eyebrow {
        padding: 0.62rem 1rem;

        font-size: 0.66rem;
        letter-spacing: 0.2em;
    }

    .course__speaker {
        font-size: 0.74rem;
        letter-spacing: 0.22em;
    }

    .course__title {
        font-size: clamp(2.45rem, 12vw, 4rem);
        letter-spacing: -0.05em;
    }

    .course__description {
        font-size: 1rem;
        line-height: 1.72;
    }

    .course__card {
        padding: 1.45rem;

        border-radius: 1.25rem;
    }

    .course__card-title {
        font-size: 1.35rem;
    }

    .course__card-text {
        font-size: 1rem;
    }
}

.request {
    display: block;
    padding: 4rem 2rem;
    background: #ffffff;
}

.request__text {
    max-width: 800px;
    margin: 0 auto;
}

.request form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.request input,
.request textarea {
    width: 100%;
    padding: 12px;

    border: 1px solid #cbd5e1;
    border-radius: 12px;

    font-size: 1rem;
}

.request button {
    padding: 14px 24px;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #2563eb
    );

    color: white;

    border: 0;
    border-radius: 12px;

    font-weight: 700;
    cursor: pointer;
}
/* ==========================================================
   Danke-Seite
   ========================================================== */

.thankyou {

    min-height: 10*vh;

    display: flex;
    align-*tems: center;
    justify-content:*center;

    padding: 2rem;

    b*ckground:
        radial-gradient(*            circle at top left,
  *         rgba(99,102,241,.15),
   *        transparent 35%
        ),*        radial-gradient(
         *  circle at bottom right,
        *   rgba(16,185,129,.12),
         *  transparent 35%
        ),
     *  #f8fafc;
}

.thankyou__card {

 *  max-width: 850px;

    padding: *rem;

    text-align: center;

   *background: rgba(255,255,255,.92);*
    border-radius: 32px;

    bac*drop-filter: blur(20px);

    box-*hadow:
        0 20px 60px rgba(15*23,42,.08);
}

.thankyou__icon {

*   font-size: 4rem;

    margin-bo*tom: 1rem;
}

.thankyou__title {

*   margin: 0 0 1.5rem;

    color:*#0f172a;

    font-size: clamp(2re*,4vw,3.5rem);

    line-height: 1.*;
}

.thankyou__text {

    margin*bottom: 1.2rem;

    color: #47556*;

    font-size: 1.15rem;

    li*e-height: 1.8;
}

.thankyou__butto* {

    display: inline-block;

  * margin-top: 1.5rem;

    padding:*1rem 2rem;

    color: #ffffff;

 *  background:
        linear-gradi*nt(
            135deg,
          * #4f46e5,
            #2563eb
    *   );

    border-radius: 16px;

 *  text-decoration: none;

    font*weight: 700;

    transition: all *25s ease;
}

.thankyou__button:hov*r {

    transform: translateY(-2p*);

    box-shadow:
        0 12px*30px rgba(37,99,235,.25);
}

/* ==========================================================
   KORREKTUR
   ========================================================== */




body {
   overflow-y: auto;
}