.elementor-kit-9{--e-global-color-primary:#0867D9;--e-global-color-secondary:#F3F5F8;--e-global-color-text:#21345A;--e-global-color-accent:#467FF7;--e-global-color-c696dce:#FFFFFF;--e-global-color-14ef391:#C8D5DC;--e-global-color-764183d:#F9FAFD;--e-global-color-d6cea4e:#FFFFFF;--e-global-color-86b4fcd:#02010100;--e-global-color-57c8da2:#000000CC;--e-global-color-193ffd2:#0056BD;--e-global-color-959a2c9:#102653;--e-global-color-308ffda:#697795;--e-global-color-54cc8f3:#F5F8FC;--e-global-color-ea484ab:#000000;--e-global-color-2dd243e:#DFE6EF;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-size:65px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:capitalize;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:300;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.5em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:capitalize;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-392b9e0-font-family:"Poppins";--e-global-typography-392b9e0-font-size:22px;--e-global-typography-392b9e0-font-weight:600;--e-global-typography-392b9e0-text-transform:capitalize;--e-global-typography-392b9e0-font-style:normal;--e-global-typography-392b9e0-text-decoration:none;--e-global-typography-392b9e0-line-height:1.2em;--e-global-typography-392b9e0-letter-spacing:0px;--e-global-typography-c05b693-font-family:"Poppins";--e-global-typography-c05b693-font-size:22px;--e-global-typography-c05b693-font-weight:300;--e-global-typography-c05b693-text-transform:none;--e-global-typography-c05b693-font-style:normal;--e-global-typography-c05b693-text-decoration:none;--e-global-typography-c05b693-line-height:1.5em;--e-global-typography-c05b693-letter-spacing:0px;--e-global-typography-6558fb1-font-family:"Poppins";--e-global-typography-6558fb1-font-size:16px;--e-global-typography-6558fb1-font-weight:300;--e-global-typography-6558fb1-text-transform:uppercase;--e-global-typography-6558fb1-font-style:normal;--e-global-typography-6558fb1-text-decoration:none;--e-global-typography-6558fb1-line-height:1.5em;--e-global-typography-6558fb1-letter-spacing:10px;--e-global-typography-92bce3b-font-family:"Poppins";--e-global-typography-92bce3b-font-size:16px;--e-global-typography-92bce3b-font-weight:400;--e-global-typography-92bce3b-text-transform:capitalize;--e-global-typography-92bce3b-font-style:italic;--e-global-typography-92bce3b-text-decoration:underline;--e-global-typography-92bce3b-line-height:1em;--e-global-typography-92bce3b-letter-spacing:0px;--e-global-typography-b2deeae-font-family:"Poppins";--e-global-typography-b2deeae-font-size:85px;--e-global-typography-b2deeae-font-weight:600;--e-global-typography-b2deeae-text-transform:none;--e-global-typography-b2deeae-font-style:normal;--e-global-typography-b2deeae-text-decoration:none;--e-global-typography-b2deeae-line-height:1em;--e-global-typography-b2deeae-letter-spacing:0px;--e-global-typography-fb1a3e0-font-family:"Poppins";--e-global-typography-fb1a3e0-font-size:200px;--e-global-typography-fb1a3e0-font-weight:600;--e-global-typography-fb1a3e0-text-transform:none;--e-global-typography-fb1a3e0-font-style:normal;--e-global-typography-fb1a3e0-text-decoration:none;--e-global-typography-fb1a3e0-line-height:1.2em;--e-global-typography-fb1a3e0-letter-spacing:0px;--e-global-typography-397e168-font-family:"Poppins";--e-global-typography-397e168-font-size:16px;--e-global-typography-397e168-font-weight:400;--e-global-typography-397e168-text-transform:capitalize;--e-global-typography-397e168-font-style:italic;--e-global-typography-397e168-text-decoration:none;--e-global-typography-397e168-line-height:1.3em;--e-global-typography-397e168-letter-spacing:0px;background-color:#F5F8FC;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.site-header{background-color:var( --e-global-color-c696dce );padding-inline-end:8%;padding-inline-start:8%;}.site-footer{background-color:var( --e-global-color-accent );}.elementor-kit-9 a{color:var( --e-global-color-accent );}.elementor-kit-9 a:hover{color:var( --e-global-color-primary );}.elementor-kit-9 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-392b9e0-font-family ), Sans-serif;font-size:var( --e-global-typography-392b9e0-font-size );font-weight:var( --e-global-typography-392b9e0-font-weight );text-transform:var( --e-global-typography-392b9e0-text-transform );font-style:var( --e-global-typography-392b9e0-font-style );text-decoration:var( --e-global-typography-392b9e0-text-decoration );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header .header-inner{width:1600px;max-width:100%;}.site-header .site-navigation ul.menu li a{color:var( --e-global-color-primary );}.site-header .site-navigation-toggle .site-navigation-toggle-icon{color:var( --e-global-color-accent );}.site-header .site-navigation .menu li{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.site-footer .copyright p{color:var( --e-global-color-c696dce );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}@media(max-width:1024px){.elementor-kit-9{--e-global-typography-primary-font-size:45px;--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:14px;--e-global-typography-c05b693-font-size:18px;--e-global-typography-c05b693-line-height:1.4em;--e-global-typography-6558fb1-font-size:14px;--e-global-typography-92bce3b-font-size:14px;--e-global-typography-b2deeae-font-size:65px;--e-global-typography-fb1a3e0-font-size:145px;--e-global-typography-397e168-font-size:14px;}.elementor-kit-9 h4{font-size:var( --e-global-typography-392b9e0-font-size );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}.site-header{padding-inline-end:5%;padding-inline-start:5%;}.site-header .site-navigation .menu li{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.site-footer .copyright p{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:767px){.elementor-kit-9{--e-global-typography-primary-font-size:28px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:20px;--e-global-typography-392b9e0-font-size:18px;--e-global-typography-c05b693-font-size:16px;--e-global-typography-b2deeae-font-size:42px;--e-global-typography-b2deeae-line-height:1em;--e-global-typography-fb1a3e0-font-size:100px;--e-global-typography-fb1a3e0-line-height:1em;}.elementor-kit-9 h4{font-size:var( --e-global-typography-392b9e0-font-size );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}.site-header{padding-inline-end:8%;padding-inline-start:8%;}.site-header .site-navigation .menu li{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.site-footer .copyright p{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}
/* Start custom CSS *//* ============================================================
   JOBCOACH DASHBOARD
   Hello Elementor + Elementor
   Version 1.0
   ============================================================ */


/* ============================================================
   01 – DESIGN SYSTEM / FARBEN
   ============================================================ */

:root {

    /* Hauptfarben */
    --jc-primary: #0867D9;
    --jc-primary-hover: #0056BD;
    --jc-primary-light: #EAF3FF;

    /* Dunkelblau */
    --jc-navy: #102653;
    --jc-navy-soft: #31466F;

    /* Texte */
    --jc-text: #21345A;
    --jc-text-secondary: #697795;
    --jc-text-muted: #8C97AD;

    /* Hintergründe */
    --jc-background: #F5F8FC;
    --jc-background-soft: #F9FBFE;
    --jc-white: #FFFFFF;

    /* Rahmen */
    --jc-border: #DFE6EF;
    --jc-border-light: #EDF1F6;

    /* Status */
    --jc-green: #5E8763;
    --jc-green-bg: #EEF7EF;

    /* Icon Farben */
    --jc-turquoise: #008D95;
    --jc-turquoise-bg: #D5F1F2;

    --jc-orange: #CC7A00;
    --jc-orange-bg: #FFEBC9;

    --jc-purple: #8751CC;
    --jc-purple-bg: #E8DDF8;

    --jc-lightblue: #1976CC;
    --jc-lightblue-bg: #DBEEFF;

    --jc-grey: #586782;
    --jc-grey-bg: #E5E8ED;

    /* Layout */
    --jc-container-width: 1500px;
    --jc-gap: 20px;

    /* Rundungen */
    --jc-radius-small: 7px;
    --jc-radius: 12px;
    --jc-radius-large: 18px;
    --jc-radius-pill: 999px;

    /* Schatten */
    --jc-shadow:
        0 5px 18px rgba(25, 51, 89, 0.07);

    --jc-shadow-hover:
        0 10px 30px rgba(25, 51, 89, 0.12);
}


/* ============================================================
   02 – RESET / BASIS
   ============================================================ */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background:
        radial-gradient(
            circle at 55% 20%,
            rgba(218, 232, 252, 0.55) 0%,
            rgba(245, 248, 252, 0) 38%
        ),
        var(--jc-background);

    color: var(--jc-text);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Elementor */

body .elementor {
    width: 100%;
}

.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
    box-sizing: border-box;
}


/* ============================================================
   03 – TYPOGRAFIE
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
    margin-top: 0;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--jc-navy);
}


/* H1 */

h1,
.elementor-widget-heading h1.elementor-heading-title {
    margin-bottom: 18px;

    font-size: 46px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
}


/* H2 */

h2,
.elementor-widget-heading h2.elementor-heading-title {
    margin-bottom: 16px;

    font-size: 34px;
    font-weight: 700;
    line-height: 1.20;
    letter-spacing: -0.02em;
}


/* H3 */

h3,
.elementor-widget-heading h3.elementor-heading-title {
    margin-bottom: 12px;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.30;
    letter-spacing: -0.015em;
}


/* H4 */

h4,
.elementor-widget-heading h4.elementor-heading-title {
    margin-bottom: 10px;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}


/* H5 */

h5,
.elementor-widget-heading h5.elementor-heading-title {
    margin-bottom: 8px;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.40;

    color: var(--jc-text);
}


/* H6 */

h6,
.elementor-widget-heading h6.elementor-heading-title {
    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.40;
    letter-spacing: 0.01em;

    color: var(--jc-navy-soft);
}


/* Fliesstext */

p {
    margin-top: 0;
    margin-bottom: 16px;

    color: var(--jc-text);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}


/* Links */

a {
    color: var(--jc-primary);

    text-decoration: none;

    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}

a:hover {
    color: var(--jc-primary-hover);
}


/* ============================================================
   04 – HAUPTSEITE
   ============================================================ */

.jc-main {
    width: 100%;

    padding-top: 34px;
    padding-bottom: 42px;
}


/* Hauptcontainer */

.jc-container {
    width: min(
        calc(100% - 80px),
        var(--jc-container-width)
    );

    margin-right: auto;
    margin-left: auto;
}


/* ============================================================
   05 – SEITENTITEL
   ============================================================ */

.jc-page-header {
    margin-bottom: 18px;
}

.jc-page-title {
    margin: 0 0 6px;

    color: var(--jc-navy);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 46px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.jc-subtitle {
    margin: 0;

    color: var(--jc-text-secondary);

    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}


/* ============================================================
   06 – HEADER
   ============================================================ */

.jc-header {
    position: relative;
    z-index: 100;

    width: 100%;
    min-height: 86px;

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

    border-bottom: 1px solid var(--jc-border-light);

    box-shadow:
        0 2px 12px rgba(20, 45, 85, 0.04);
}

.jc-header-inner {
    width: min(
        calc(100% - 48px),
        1600px
    );

    min-height: 86px;

    margin-right: auto;
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 30px;
}


/* ============================================================
   07 – LOGO
   ============================================================ */

.jc-logo {
    display: flex;
    align-items: center;

    gap: 12px;

    flex: 0 0 auto;

    color: var(--jc-navy);

    text-decoration: none;
}

.jc-logo:hover {
    color: var(--jc-navy);
}

.jc-logo img {
    display: block;

    width: 42px;
    height: auto;
}

.jc-logo-text {
    color: var(--jc-navy);

    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}


/* ============================================================
   08 – HAUPTNAVIGATION
   ============================================================ */

.jc-nav {
    height: 86px;

    display: flex;
    align-items: stretch;

    gap: 4px;

    flex: 1;
}

.jc-nav-item {
    position: relative;

    min-height: 86px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 0 16px;

    color: #27395C;

    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.jc-nav-item:hover {
    color: var(--jc-primary);
}

.jc-nav-item.active {
    color: var(--jc-primary);

    font-weight: 600;
}

.jc-nav-item.active::after {
    content: "";

    position: absolute;

    right: 8px;
    bottom: 0;
    left: 8px;

    height: 3px;

    background: var(--jc-primary);

    border-radius: 3px 3px 0 0;
}

.jc-nav-item svg,
.jc-nav-item i {
    width: 21px;
    height: 21px;

    font-size: 20px;
}


/* ============================================================
   09 – HEADER RECHTS
   ============================================================ */

.jc-header-right {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 10px;
}

.jc-header-action {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    color: var(--jc-text);

    border-radius: var(--jc-radius-small);

    text-decoration: none;

    font-size: 14px;
}

.jc-header-action:hover {
    background: var(--jc-background);

    color: var(--jc-primary);
}

.jc-user-avatar {
    width: 42px;
    height: 42px;

    object-fit: cover;

    border-radius: 50%;
}


/* ============================================================
   10 – TABS
   ============================================================ */

.jc-tabs {
    width: fit-content;
    max-width: 100%;

    display: flex;
    align-items: center;

    margin-top: 18px;
    margin-bottom: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(238, 243, 250, 0.97),
            rgba(232, 239, 249, 0.75)
        );

    border-radius: var(--jc-radius-pill);

    overflow-x: auto;

    scrollbar-width: none;
}

.jc-tabs::-webkit-scrollbar {
    display: none;
}

.jc-tab {
    padding: 10px 22px;

    color: #435579;

    border-radius: var(--jc-radius-pill);

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;

    text-decoration: none;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.jc-tab:hover {
    color: var(--jc-primary);
}

.jc-tab.active {
    background: var(--jc-primary);

    color: #FFFFFF;

    box-shadow:
        0 3px 8px rgba(8, 103, 217, 0.20);
}


/* ============================================================
   11 – WERKZEUG GRID
   ============================================================ */

.jc-tool-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--jc-gap);

    margin-top: 10px;
}


/* ============================================================
   12 – WERKZEUG KARTE
   ============================================================ */

.jc-tool-card {
    position: relative;

    min-height: 145px;

    display: grid;

    grid-template-columns: 88px 1fr;

    gap: 20px;

    padding: 20px;

    background: var(--jc-white);

    border: 1px solid var(--jc-border);

    border-radius: var(--jc-radius);

    box-shadow: var(--jc-shadow);

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

.jc-tool-card:hover {
    transform: translateY(-2px);

    border-color: #CAD8EB;

    box-shadow: var(--jc-shadow-hover);
}


/* ============================================================
   13 – WERKZEUG ICON
   ============================================================ */

.jc-tool-icon {
    width: 80px;
    height: 80px;

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

    border-radius: 50%;
}

.jc-tool-icon svg {
    width: 40px;
    height: 40px;
}

.jc-tool-icon i {
    font-size: 38px;
}


/* Blau */

.jc-icon-blue {
    color: #1467D8;

    background:
        linear-gradient(
            135deg,
            #EDF2FF,
            #DCE6FF
        );
}


/* Türkis */

.jc-icon-turquoise {
    color: var(--jc-turquoise);

    background:
        linear-gradient(
            135deg,
            #EAFAFA,
            var(--jc-turquoise-bg)
        );
}


/* Orange */

.jc-icon-orange {
    color: var(--jc-orange);

    background:
        linear-gradient(
            135deg,
            #FFF7E9,
            var(--jc-orange-bg)
        );
}


/* Violett */

.jc-icon-purple {
    color: var(--jc-purple);

    background:
        linear-gradient(
            135deg,
            #F5EFFD,
            var(--jc-purple-bg)
        );
}


/* Hellblau */

.jc-icon-lightblue {
    color: var(--jc-lightblue);

    background:
        linear-gradient(
            135deg,
            #EDF7FF,
            var(--jc-lightblue-bg)
        );
}


/* Grau */

.jc-icon-grey {
    color: var(--jc-grey);

    background:
        linear-gradient(
            135deg,
            #F2F4F7,
            var(--jc-grey-bg)
        );
}


/* ============================================================
   14 – WERKZEUG INHALT
   ============================================================ */

.jc-tool-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.jc-card-title {
    margin: 0 0 5px;

    color: var(--jc-navy);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.jc-card-text {
    margin: 0;

    color: var(--jc-text-secondary);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

.jc-tool-description {
    min-height: 44px;
}

.jc-tool-link {
    margin-top: auto;

    padding-top: 11px;

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

    gap: 9px;

    color: var(--jc-primary);

    border-top: 1px solid var(--jc-border);

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;
}

.jc-tool-link:hover {
    color: var(--jc-primary-hover);
}

.jc-tool-link::after {
    content: "→";

    font-size: 20px;
    line-height: 1;
}


/* ============================================================
   15 – UNTERES DASHBOARD GRID
   ============================================================ */

.jc-dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--jc-gap);

    margin-top: 18px;
}


/* ============================================================
   16 – PANELS
   ============================================================ */

.jc-panel {
    background: var(--jc-white);

    border: 1px solid var(--jc-border);

    border-radius: var(--jc-radius);

    box-shadow: var(--jc-shadow);

    overflow: hidden;
}

.jc-panel-header {
    min-height: 54px;

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

    gap: 15px;

    padding: 14px 18px;

    border-bottom: 1px solid var(--jc-border-light);
}

.jc-panel-title {
    margin: 0;

    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--jc-navy);

    font-size: 15px;
    font-weight: 700;
}

.jc-panel-title i {
    color: var(--jc-primary);

    font-size: 20px;
}

.jc-panel-action {
    color: var(--jc-primary);

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;
}


/* ============================================================
   17 – LISTEN
   ============================================================ */

.jc-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.jc-list-item {
    position: relative;

    min-height: 65px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 11px 18px;

    border-bottom: 1px solid var(--jc-border-light);

    text-decoration: none;

    transition: background 0.15s ease;
}

.jc-list-item:last-child {
    border-bottom: 0;
}

.jc-list-item:hover {
    background: #FAFCFF;
}

.jc-list-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    background: var(--jc-primary-light);

    color: var(--jc-primary);

    border-radius: 7px;
}

.jc-list-icon i {
    font-size: 20px;
}

.jc-list-content {
    min-width: 0;

    flex: 1;
}

.jc-list-title {
    display: block;

    color: var(--jc-text);

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jc-list-meta {
    display: block;

    margin-top: 2px;

    color: var(--jc-text-muted);

    font-size: 12px;
}

.jc-list-arrow {
    color: var(--jc-primary);

    font-size: 20px;
}


/* ============================================================
   18 – STATUS
   ============================================================ */

.jc-status {
    display: inline-flex;
    align-items: center;

    padding: 4px 10px;

    background: var(--jc-green-bg);

    color: var(--jc-green);

    border-radius: var(--jc-radius-pill);

    font-size: 11px;
    font-weight: 500;
}


/* ============================================================
   19 – SCHNELLSTART
   ============================================================ */

.jc-quickstart {
    padding: 12px 16px 16px;
}

.jc-quickstart-text {
    margin: -5px 0 10px;

    color: var(--jc-text-muted);

    font-size: 12px;
}

.jc-quickstart-button {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 9px;

    padding: 9px 14px;

    background: var(--jc-white);

    color: var(--jc-text);

    border: 1px solid #CBDAF0;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

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

.jc-quickstart-button:last-child {
    margin-bottom: 0;
}

.jc-quickstart-button:hover {
    background: #F7FBFF;

    border-color: var(--jc-primary);

    box-shadow:
        0 2px 8px rgba(8, 103, 217, 0.08);
}

.jc-quickstart-button i {
    color: var(--jc-primary);

    font-size: 19px;
}

.jc-quickstart-button .jc-arrow {
    margin-left: auto;

    color: var(--jc-primary);

    font-size: 20px;
}


/* ============================================================
   20 – BUTTONS
   ============================================================ */

.jc-button,
.elementor-button.jc-button {
    min-height: 42px;

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

    gap: 8px;

    padding: 10px 20px;

    background: var(--jc-primary);

    color: #FFFFFF;

    border: 0;

    border-radius: var(--jc-radius-small);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.jc-button:hover,
.elementor-button.jc-button:hover {
    background: var(--jc-primary-hover);

    color: #FFFFFF;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(8, 103, 217, 0.20);
}


/* Sekundärbutton */

.jc-button-secondary {
    background: #FFFFFF;

    color: var(--jc-primary);

    border: 1px solid var(--jc-border);
}

.jc-button-secondary:hover {
    background: var(--jc-primary-light);

    color: var(--jc-primary-hover);

    border-color: var(--jc-primary);
}


/* ============================================================
   21 – FORMULARE
   ============================================================ */

.jc-form label {
    display: block;

    margin-bottom: 6px;

    color: var(--jc-navy);

    font-size: 13px;
    font-weight: 600;
}

.jc-form input[type="text"],
.jc-form input[type="email"],
.jc-form input[type="tel"],
.jc-form input[type="number"],
.jc-form input[type="date"],
.jc-form input[type="password"],
.jc-form select,
.jc-form textarea {

    width: 100%;

    padding: 12px 14px;

    background: #FFFFFF;

    color: var(--jc-text);

    border: 1px solid var(--jc-border);

    border-radius: var(--jc-radius-small);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 400;

    outline: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.jc-form textarea {
    min-height: 120px;

    resize: vertical;
}

.jc-form input:focus,
.jc-form select:focus,
.jc-form textarea:focus {
    border-color: var(--jc-primary);

    box-shadow:
        0 0 0 3px rgba(8, 103, 217, 0.10);
}


/* Placeholder */

.jc-form input::placeholder,
.jc-form textarea::placeholder {
    color: #A0AABD;
}


/* ============================================================
   22 – ELEMENTOR FORMULAR
   ============================================================ */

.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {

    border-color: var(--jc-border);

    border-radius: var(--jc-radius-small);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {

    border-color: var(--jc-primary);

    box-shadow:
        0 0 0 3px rgba(8, 103, 217, 0.10);

    outline: none;
}


/* ============================================================
   23 – ELEMENTOR BUTTONS GLOBAL
   ============================================================ */

.elementor-button {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    border-radius: var(--jc-radius-small);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.elementor-button:hover {
    transform: translateY(-1px);
}


/* ============================================================
   24 – FOOTER
   ============================================================ */

.jc-footer {
    width: 100%;
    min-height: 64px;

    display: flex;
    align-items: center;

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

    border-top: 1px solid var(--jc-border);
}

.jc-footer-inner {
    width: min(
        calc(100% - 80px),
        1580px
    );

    margin-right: auto;
    margin-left: auto;

    display: grid;

    grid-template-columns:
        1fr 1.4fr 1fr;

    align-items: center;

    gap: 20px;

    color: var(--jc-text-muted);

    font-size: 12px;
}

.jc-footer-left,
.jc-footer-center,
.jc-footer-right {
    display: flex;
    align-items: center;

    gap: 9px;
}

.jc-footer-center {
    justify-content: center;
}

.jc-footer-right {
    justify-content: flex-end;

    gap: 25px;
}


/* ============================================================
   25 – HILFSKLASSEN
   ============================================================ */

.jc-text-primary {
    color: var(--jc-primary) !important;
}

.jc-text-navy {
    color: var(--jc-navy) !important;
}

.jc-text-secondary {
    color: var(--jc-text-secondary) !important;
}

.jc-text-muted {
    color: var(--jc-text-muted) !important;
}

.jc-bg-white {
    background: #FFFFFF !important;
}

.jc-bg-soft {
    background: var(--jc-background-soft) !important;
}

.jc-shadow {
    box-shadow: var(--jc-shadow);
}

.jc-rounded {
    border-radius: var(--jc-radius);
}

.jc-no-margin {
    margin: 0 !important;
}

.jc-no-padding {
    padding: 0 !important;
}


/* ============================================================
   26 – ELEMENTOR SPEZIFISCHE KORREKTUREN
   ============================================================ */

.jc-main a,
.jc-header a,
.jc-footer a {
    text-decoration: none;
}

.jc-tool-icon .elementor-icon {
    padding: 0;

    background: transparent;

    color: inherit;

    border: 0;
}

.jc-tool-icon .elementor-icon svg {
    fill: currentColor;
}

.e-con.jc-container {
    max-width: var(--jc-container-width);
}


/* Elementor Widget Abstand innerhalb Karten */

.jc-tool-card .elementor-widget {
    margin-bottom: 0;
}


/* ============================================================
   27 – SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #F1F4F8;
}

::-webkit-scrollbar-thumb {
    background: #C9D3E2;

    border: 2px solid #F1F4F8;

    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #AAB8CC;
}


/* ============================================================
   28 – TABLET
   ============================================================ */

@media (max-width: 1200px) {

    .jc-container {
        width: calc(100% - 40px);
    }

    .jc-tool-grid,
    .jc-dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .jc-nav-item {
        padding-right: 10px;
        padding-left: 10px;
    }

    .jc-nav-item span {
        display: none;
    }

}


/* ============================================================
   29 – TABLET KLEIN
   ============================================================ */

@media (max-width: 1024px) {

    h1,
    .elementor-widget-heading h1.elementor-heading-title,
    .jc-page-title {
        font-size: 40px;
    }

    h2,
    .elementor-widget-heading h2.elementor-heading-title {
        font-size: 30px;
    }

    h3,
    .elementor-widget-heading h3.elementor-heading-title {
        font-size: 22px;
    }

    .jc-header-inner {
        gap: 16px;
    }

}


/* ============================================================
   30 – MOBILE
   ============================================================ */

@media (max-width: 767px) {

    body {
        font-size: 15px;
    }


    /* Container */

    .jc-container {
        width: calc(100% - 24px);
    }


    /* Hauptbereich */

    .jc-main {
        padding-top: 22px;
        padding-bottom: 30px;
    }


    /* Typografie */

    h1,
    .elementor-widget-heading h1.elementor-heading-title,
    .jc-page-title {

        font-size: 32px;
        line-height: 1.18;
    }

    h2,
    .elementor-widget-heading h2.elementor-heading-title {
        font-size: 27px;
    }

    h3,
    .elementor-widget-heading h3.elementor-heading-title {
        font-size: 21px;
    }

    h4,
    .elementor-widget-heading h4.elementor-heading-title {
        font-size: 18px;
    }

    h5,
    .elementor-widget-heading h5.elementor-heading-title {
        font-size: 16px;
    }

    h6,
    .elementor-widget-heading h6.elementor-heading-title {
        font-size: 14px;
    }

    .jc-subtitle {
        font-size: 16px;
    }


    /* Header */

    .jc-header {
        min-height: 68px;
    }

    .jc-header-inner {
        width: calc(100% - 24px);

        min-height: 68px;
    }

    .jc-nav {
        display: none;
    }

    .jc-logo-text {
        font-size: 18px;
    }


    /* Tabs */

    .jc-tabs {
        width: 100%;

        border-radius: 10px;
    }

    .jc-tab {
        padding: 9px 15px;
    }


    /* Grid */

    .jc-tool-grid,
    .jc-dashboard-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* Tool Karten */

    .jc-tool-card {
        min-height: 130px;

        grid-template-columns: 64px 1fr;

        gap: 14px;

        padding: 16px;
    }

    .jc-tool-icon {
        width: 60px;
        height: 60px;
    }

    .jc-tool-icon svg {
        width: 30px;
        height: 30px;
    }

    .jc-tool-icon i {
        font-size: 29px;
    }

    .jc-card-title {
        font-size: 19px;
    }

    .jc-card-text {
        font-size: 14px;
    }


    /* Footer */

    .jc-footer-inner {
        width: calc(100% - 24px);

        grid-template-columns: 1fr;

        padding: 15px 0;

        text-align: center;
    }

    .jc-footer-left,
    .jc-footer-center,
    .jc-footer-right {
        justify-content: center;
    }

}/* End custom CSS */