/* ==========================================================================
   assets/css/home-europe.css – Startseite: "Lieferung in ganz Europa"
   ========================================================================== */

.hc-eu{
    --eu-bg:#141414;
    --eu-panel:#1C1C1A;
    --eu-line:#2E2E2A;
    --eu-land:#34342F;
    --eu-land-dim:#25251F;
    --eu-home:#7A5E07;
    --eu-picked:#B8900A;
    --eu-accent:#F2B705;
    --eu-accent-light:#FFE9A3;
    --eu-text:#C9C7BD;
    --eu-muted:#A8A69C;
    position:relative;
    padding:96px 0;
    background:var(--eu-bg);
    color:#fff;
    overflow:hidden;
}

/* Layout: Desktop = Text + Anfrage links, Karte rechts */
.hc-eu__grid{
    display:grid;
    grid-template-columns:minmax(0,470px) minmax(0,1fr);
    grid-template-areas:
        "head  map"
        "panel map";
    column-gap:60px;
    row-gap:26px;
    align-items:start;
}
.hc-eu__head{grid-area:head;display:flex;flex-direction:column;gap:24px}
.hc-eu__map-wrap{grid-area:map;align-self:center}
.hc-eu__panel{grid-area:panel;display:flex;flex-direction:column;gap:22px}

/* Text */
.hc-eu__badge{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(242,183,5,.14);
    color:var(--eu-accent);
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.hc-eu__title{
    margin:0;
    color:#fff;
    font-size:clamp(2.3rem,4.4vw,3.75rem);
    line-height:1;
    font-weight:800;
    letter-spacing:-.04em;
}
.hc-eu__title span{color:var(--eu-accent)}
.hc-eu__intro{margin:0;color:var(--eu-text);font-size:1.06rem;line-height:1.7}

.hc-eu__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hc-eu__fact{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:18px;
    border-radius:18px;
    background:var(--eu-panel);
    border:1px solid var(--eu-line);
}
.hc-eu__fact svg{width:22px;height:22px;margin-bottom:6px}
.hc-eu__fact strong{font-size:.95rem;color:#fff}
.hc-eu__fact span{font-size:.82rem;color:var(--eu-muted)}

.hc-eu svg path,.hc-eu svg circle{vector-effect:non-scaling-stroke}
.hc-eu__fact svg path,.hc-eu__fact svg circle,
.hc-eu__ico svg path,.hc-eu__ico svg circle,
.hc-eu__btn svg path{
    fill:none;
    stroke:var(--eu-accent);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Karte */
.hc-eu__map-wrap{position:relative;width:100%;max-width:740px;justify-self:end}
.hc-eu__map{display:block;width:100%;height:auto;overflow:visible}
.hc-eu__c{
    fill:var(--eu-land);
    stroke:var(--eu-bg);
    stroke-width:.7;
    cursor:pointer;
    outline:none;
    transition:fill .25s ease;
}
.hc-eu__c.is-home{fill:var(--eu-home)}
.hc-eu.has-active .hc-eu__c{fill:var(--eu-land-dim)}
.hc-eu.has-active .hc-eu__c.is-home{fill:var(--eu-home)}
.hc-eu .hc-eu__c.is-selected{fill:var(--eu-picked)}
.hc-eu .hc-eu__c.is-active{fill:var(--eu-accent)}
.hc-eu__hl{
    fill:var(--eu-accent);
    stroke:var(--eu-accent-light);
    stroke-width:.8;
    filter:url(#hcEuGlow);
    pointer-events:none;
    opacity:0;
    transition:opacity .2s ease;
}
.hc-eu__hl.is-on{opacity:1}

.hc-eu__route{
    fill:none;
    stroke:var(--eu-accent);
    stroke-width:2;
    stroke-dasharray:6 6;
    stroke-linecap:round;
    pointer-events:none;
    opacity:0;
    transition:opacity .25s ease;
    animation:hcEuDash 1s linear infinite;
}
.hc-eu__route.is-on{opacity:1}
@keyframes hcEuDash{to{stroke-dashoffset:-24}}

.hc-eu__pulse{
    fill:var(--eu-accent);
    pointer-events:none;
    transform-box:fill-box;
    transform-origin:center;
    animation:hcEuPulse 2s ease-out infinite;
}
@keyframes hcEuPulse{
    0%{transform:scale(.4);opacity:.7}
    100%{transform:scale(2.2);opacity:0}
}
.hc-eu__dot{fill:var(--eu-bg);stroke:var(--eu-accent);stroke-width:2.5;pointer-events:none}

/* Tooltip */
.hc-eu__tip{
    position:absolute;
    left:0;
    top:0;
    z-index:5;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px 16px;
    border-radius:14px;
    background:rgba(20,20,20,.9);
    border:1px solid var(--eu-accent);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,calc(-100% - 18px));
    transition:opacity .2s ease,left .2s ease,top .2s ease;
}
.hc-eu__tip.is-on{opacity:1}
.hc-eu__tip strong{font-size:1rem;color:#fff}
.hc-eu__tip span{font-size:.75rem;font-weight:600;color:var(--eu-accent)}

.hc-eu__legend{
    position:absolute;
    left:0;
    bottom:6px;
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    font-size:.8rem;
    color:var(--eu-muted);
}
.hc-eu__legend span{display:flex;align-items:center;gap:8px}
.hc-eu__legend-dot{width:12px;height:12px;border-radius:50%;background:var(--eu-accent)}
.hc-eu__legend-line{width:18px;border-top:2px dashed var(--eu-accent)}

/* Anfrage-Karte */
.hc-eu__card{
    display:flex;
    flex-direction:column;
    padding:28px;
    border-radius:22px;
    background:var(--eu-panel);
    border:1px solid #34342F;
    transition:border-color .25s ease;
}
.hc-eu__card:not([data-state="empty"]){border-color:rgba(242,183,5,.45)}
.hc-eu__state{display:none;flex-direction:column;gap:16px}
.hc-eu__card[data-state="empty"] .hc-eu__state--empty,
.hc-eu__card[data-state="country"] .hc-eu__state--country,
.hc-eu__card[data-state="home"] .hc-eu__state--home{display:flex;animation:hcEuIn .3s ease}
@keyframes hcEuIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.hc-eu__row{display:flex;gap:14px;align-items:center}
.hc-eu__row > div:last-child{display:flex;flex-direction:column;gap:2px}
.hc-eu__ico{
    flex:0 0 44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--eu-land);
}
.hc-eu__ico svg{width:22px;height:22px}
.hc-eu__code{
    flex:0 0 auto;
    min-width:44px;
    height:44px;
    padding:0 8px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--eu-accent);
    color:#141414;
    font-weight:800;
    font-size:.95rem;
    letter-spacing:.05em;
}
.hc-eu__card-title{font-size:1.05rem;color:#fff}
.hc-eu__card-sub{font-size:.9rem;color:var(--eu-muted)}
.hc-eu__eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--eu-accent)}
.hc-eu__name{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.hc-eu__text{margin:0;font-size:.95rem;line-height:1.6;color:var(--eu-text)}

.hc-eu__actions{display:flex;flex-wrap:wrap;gap:10px}
.hc-eu .hc-eu__btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:48px;
    padding:0 22px;
    border-radius:999px;
    font-weight:800;
    font-size:.85rem;
    letter-spacing:.05em;
    text-decoration:none;
    transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
}
.hc-eu .hc-eu__btn svg{width:18px;height:18px}
.hc-eu .hc-eu__btn--primary{background:var(--eu-accent);color:#141414;text-transform:uppercase}
.hc-eu .hc-eu__btn--primary svg path{stroke:#141414;stroke-width:2.4}
.hc-eu .hc-eu__btn--primary:hover{background:#fff;color:#141414;transform:translateY(-2px)}
.hc-eu .hc-eu__btn--ghost{border:1.5px solid #4A4A43;color:#fff}
.hc-eu .hc-eu__btn--ghost:hover{border-color:var(--eu-accent);color:var(--eu-accent)}

/* Auswahlliste */
.hc-eu__select{display:flex;flex-direction:column;gap:8px}
.hc-eu__select label{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--eu-muted)}
.hc-eu__select select{
    width:100%;
    height:52px;
    padding:0 44px 0 16px;
    border-radius:14px;
    background:#1E1E1B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F2B705' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
    color:#fff;
    border:1px solid #3A3A35;
    font-size:1rem;
    font-family:inherit;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Fokus sichtbar (Tastatur) */
.hc-eu__select select:focus-visible,
.hc-eu .hc-eu__btn:focus-visible{outline:2px solid var(--eu-accent);outline-offset:3px}

/* Tablet & Handy: alles untereinander, Karte vor der Anfrage */
@media (max-width:991.98px){
    .hc-eu{padding:72px 0}
    .hc-eu__grid{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:"head" "map" "panel";
        row-gap:28px;
    }
    .hc-eu__map-wrap{
        justify-self:stretch;
        max-width:none;
        padding-bottom:34px;
        border-radius:22px;
    }
}
@media (max-width:575.98px){
    .hc-eu{padding:56px 0}
    .hc-eu__facts{grid-template-columns:minmax(0,1fr);gap:8px}
    .hc-eu__fact{flex-direction:row;align-items:center;gap:10px;padding:12px 14px}
    .hc-eu__fact svg{margin:0}
    .hc-eu__fact span::before{content:"· "}
    .hc-eu__card{padding:22px}
    .hc-eu .hc-eu__btn{flex:1 1 100%;justify-content:center}
    .hc-eu__tip{padding:8px 12px}
}

@media (prefers-reduced-motion:reduce){
    .hc-eu__route,.hc-eu__pulse{animation:none}
    .hc-eu__state{animation:none!important}
}