:root{
    --jc-navy:#062f52;
    --jc-blue:#075783;
    --jc-red:#8cc9e8;
    --jc-ink:#172837;
    --jc-muted:#687987;
    --jc-line:#dfe7ed;
    --jc-soft:#f4f7f9;
    --jc-white:#fff;
}

.jc-page{
    margin:0 -12px;
    background:#f5f8fa;
    color:var(--jc-ink);
    overflow:hidden;
}

.jc-container{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:0 20px;
}

.jc-hero{
    position:relative;
    padding:82px 0 64px;
    text-align:center;
    color:#fff;
    background:
        radial-gradient(circle at 85% 12%,rgba(31,132,183,.3),transparent 31%),
        linear-gradient(125deg,#031d33,#063f69 58%,#075f91);
}

.jc-hero:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:44px 44px;
}

.jc-hero .jc-container{
    position:relative;
}

.jc-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#8cc9e8;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.jc-eyebrow:before{
    content:"";
    width:32px;
    height:2px;
    background:currentColor;
}

.jc-hero h1{
    margin:12px 0;
    font-size:clamp(2.35rem,5vw,4.4rem);
    font-weight:800;
    letter-spacing:-.045em;
}

.jc-hero p{
    max-width:760px;
    margin:0 auto 30px;
    color:rgba(255,255,255,.76);
    font-size:1.08rem;
    line-height:1.7;
}

.jc-hero-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.jc-hero-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 20px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:11px;
    color:#fff;
    background:rgba(255,255,255,.1);
    font-size:.9rem;
    font-weight:800;
    text-decoration:none;
    transition:.2s;
}

.jc-hero-button:hover{
    color:var(--jc-navy);
    background:#fff;
    transform:translateY(-2px);
}

.jc-content{
    padding:70px 0 95px;
}

.jc-section-head{
    margin-bottom:28px;
}

.jc-section-head small{
    display:block;
    margin-bottom:7px;
    color:var(--jc-red);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.jc-section-head h2{
    margin:0;
    color:var(--jc-navy);
    font-size:2rem;
    font-weight:800;
}

.jc-section-head p{
    max-width:760px;
    margin:9px 0 0;
    color:var(--jc-muted);
    line-height:1.65;
}

/* ==========================
   STANDORTKARTEN
   ========================== */

.jc-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:20px !important;
}

.jc-grid--two{
    max-width:1050px  !important;
    margin:0 auto  !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.jc-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:420px;
    overflow:hidden;
    border:1px solid var(--jc-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 35px rgba(18,52,75,.06);
    transition:.22s;
}

.jc-card:before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:4px;
    background:var(--jc-navy);
}

.jc-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,153,255,.25);
    box-shadow:0 17px 38px rgba(18,52,75,.12);
}

.jc-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:26px 24px 18px;
}

.jc-card-head h3{
    margin:0;
    color:var(--jc-navy);
    font-size:1.25rem;
    font-weight:800;
}

.jc-flag{
    width:38px;
    height:38px;
    object-fit:cover;
    border-radius:50%;
    border:1px solid #e0e5e9;
}

.jc-card-body{
    padding:0 24px 18px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.jc-company{
    font-weight:800;
}

.jc-branch{
    margin:3px 0 15px;
    color:var(--jc-muted);
}

.jc-card address{
    margin-bottom:20px;
    font-style:normal;
    line-height:1.65;
}

.jc-details{
    margin-top:auto;
    padding-top:17px;
    border-top:1px solid var(--jc-line);
}

.jc-detail{
    display:grid;
    grid-template-columns:36px 1fr;
    gap:11px;
    margin-bottom:12px;
}

.jc-detail-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:9px;
    background:#edf3f6;
    color:var(--jc-navy);
}

.jc-detail-label{
    display:block;
    margin-bottom:2px;
    color:var(--jc-muted);
    font-size:.67rem;
    font-weight:800;
    text-transform:uppercase;
}

.jc-detail a,
.jc-detail-value{
    color:var(--jc-ink);
    font-size:.91rem;
    font-weight:700;
    text-decoration:none;
}

.jc-detail a:hover{
    color:var(--jc-red);
}

.jc-free{
    display:inline-block;
    margin-left:6px;
    padding:3px 7px;
    border-radius:5px;
    background:#EDF7FF;
    color:var(--jc-red);
    font-size:.62rem;
    font-weight:900;
}

/* ==========================
   HINWEIS
   ========================== */

.jc-notice{
    display:grid;
    grid-template-columns:58px 1fr auto;
    gap:22px;
    align-items:center;
    margin-top:35px;
    padding:25px 27px;
    border:1px solid rgba(0,153,255,.24);
    border-radius:18px;
    background:linear-gradient(135deg,#EDF7FF,#fff 64%);
}

.jc-notice-icon{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:14px;
    background:var(--jc-red);
    color:#fff;
}

.jc-notice-actions{
    display:flex;
    flex-direction:column;
    min-width:285px;
    gap:8px;
}

.jc-notice-mail{
    padding:11px 15px;
    border-radius:9px;
    background:var(--jc-red);
    color:#fff;
    text-decoration:none;
    font-weight:800;
}

/* ==========================
   LINKS
   ========================== */

.jc-links{
    margin-top:48px;
}

.jc-links-grid{
    display:grid;
    gap:15px;
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.jc-link{
    display:grid;
    grid-template-columns:46px 1fr auto;
    align-items:center;
    gap:13px;
    min-height:86px;
    padding:13px;
    border-radius:15px;
    background:#fff;
    border:1px solid var(--jc-line);
    text-decoration:none;
    transition:.2s;
}

.jc-link:hover{
    transform:translateY(-3px);
}

.jc-link-icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:10px;
    background:var(--jc-navy);
    color:#fff;
}

/* ==========================
   TABLET
   ========================== */

@media(max-width:991px){

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

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

    .jc-notice{
        grid-template-columns:58px 1fr;
    }

    .jc-notice-actions{
        grid-column:1/-1;
        min-width:0;
    }
}

/* ==========================
   MOBILE
   ========================== */

@media(max-width:575px){

    .jc-page{
        margin:0;
    }

    .jc-container{
        padding:0 15px;
    }

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

    .jc-card-head{
        padding:24px 19px 16px;
    }

    .jc-card-body{
        padding:0 19px 21px;
    }

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

    .jc-hero-actions{
        flex-direction:column;
    }

    .jc-hero-button{
        width:100%;
    }
}

/* ==========================================================
   RESPONSIVE FIX - Kontaktkarten
   Korrigiert die durch !important blockierte Desktop-Spaltenzahl
   ========================================================== */

/* Verhindert, dass lange Telefonnummern und E-Mail-Adressen
   die Karten horizontal aufziehen oder abgeschnitten werden. */
.jc-card,
.jc-card-body,
.jc-detail,
.jc-detail > * {
    min-width: 0;
}

.jc-detail a,
.jc-detail-value {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Tablet: zwei Karten pro Reihe */
@media (max-width: 991px) {
    .jc-grid,
    .jc-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .jc-card {
        min-height: 0;
    }
}

/* Smartphone und schmale Tablets: eine Karte pro Reihe */
@media (max-width: 767px) {
    .jc-page {
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 72px;
        overflow: clip;
    }

    .jc-container {
        width: 100%;
        max-width: 100%;
        padding-right: 14px;
        padding-left: 14px;
    }

    .jc-hero {
        padding: 48px 0 42px;
    }

    .jc-hero h1 {
        margin: 10px 0 12px;
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1.08;
    }

    .jc-hero p {
        margin-bottom: 24px;
        font-size: .98rem;
        line-height: 1.6;
    }

    .jc-content {
        padding: 42px 0 64px;
    }

    .jc-section-head {
        margin-bottom: 22px;
    }

    .jc-section-head h2 {
        font-size: 1.65rem;
        line-height: 1.2;
    }

    .jc-grid,
    .jc-grid--two {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
        width: 100%;
        max-width: 100% !important;
    }

    .jc-card {
        width: 100%;
        min-height: 0;
        border-radius: 16px;
    }

    .jc-card:hover {
        transform: none;
    }

    .jc-card-head {
        padding: 24px 20px 16px;
    }

    .jc-card-head h3 {
        font-size: 1.3rem;
    }

    .jc-flag {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
    }

    .jc-card-body {
        padding: 0 20px 22px;
    }

    .jc-company,
    .jc-branch,
    .jc-card address {
        max-width: 100%;
    }

    .jc-details {
        margin-top: 8px;
    }

    .jc-detail {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        margin-bottom: 14px;
    }

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

    .jc-detail a,
    .jc-detail-value {
        display: inline-block;
        max-width: 100%;
        font-size: .94rem;
        line-height: 1.5;
    }

    .jc-free {
        margin: 5px 0 0;
        vertical-align: top;
    }

    .jc-notice {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 21px 19px;
    }

    .jc-notice-actions {
        grid-column: auto;
        width: 100%;
        min-width: 0;
    }

    .jc-notice-mail {
        overflow-wrap: anywhere;
    }

    .jc-links {
        margin-top: 34px;
    }

    .jc-links-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .jc-link {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        min-width: 0;
    }
}

/* Sehr schmale Smartphones */
@media (max-width: 389px) {
    .jc-container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .jc-card-head {
        padding-right: 16px;
        padding-left: 16px;
    }

    .jc-card-body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .jc-eyebrow {
        gap: 7px;
        font-size: .67rem;
        letter-spacing: .12em;
    }

    .jc-eyebrow::before {
        width: 22px;
    }
}