/* ===== Patienten-Service Dock (Apple Liquid-Glass-Stil) ===== */

.service-dock-wrap {
    text-align: center;
    position: relative;
}

/* Weiche Farbflächen hinter dem Glas – erst dadurch wird der
   Blur des Glaskörpers sichtbar (Liquid-Glass-Refraktion) */
.service-dock-wrap::before,
.service-dock-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 190px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.service-dock-wrap::before {
    transform: translate(-92%, -60%);
    background: radial-gradient(closest-side, rgba(217, 194, 112, 0.4), rgba(217, 194, 112, 0));
}

.service-dock-wrap::after {
    transform: translate(-8%, -40%);
    background: radial-gradient(closest-side, rgba(252, 248, 227, 0.85), rgba(252, 248, 227, 0));
}

.service-dock {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: flex-start;
    gap: 30px;
    padding: 14px 48px 12px 48px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.38) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 36px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05),
        inset 0 0 26px rgba(255, 255, 255, 0.4),
        0 30px 70px rgba(0, 0, 0, 0.13),
        0 6px 18px rgba(0, 0, 0, 0.05);
}

/* Lichtreflex, der schräg über das Glas läuft */
.service-dock::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(140% 75% at 22% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    z-index: 0;
}

.dock-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 172px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.dock-item:focus-visible {
    outline: 2px solid #d9c270;
    outline-offset: 4px;
    border-radius: 16px;
}

/* Fester Slot in Maximalhöhe: das Icon wächst nach oben,
   ohne dass Beschriftung oder Leiste springen */
.dock-icon-slot {
    height: 96px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}

/* Eckiges Icon mit runden Kanten (iOS-Squircle) in Pastellgelb */
.dock-icon {
    width: 60px;
    aspect-ratio: 1 / 1;
    border-radius: 27%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 95% at 25% 10%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(135deg, #FBF2C8 0%, #F0DF9E 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        inset 0 -3px 7px rgba(163, 138, 63, 0.18),
        0 10px 26px rgba(224, 203, 122, 0.5);
    transition: box-shadow 0.25s ease;
}

.dock-item:hover .dock-icon {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        inset 0 -3px 7px rgba(163, 138, 63, 0.15),
        0 14px 34px rgba(224, 203, 122, 0.65);
}

.dock-icon svg {
    width: 44%;
    height: 44%;
    stroke: #86743f;
    filter: none;
}

.dock-label {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    max-width: 130px;
    transition: color 0.25s ease;
}

.dock-desc {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: #8d8d8d;
    line-height: 1.35;
    max-width: 130px;
    margin-top: 3px;
}

.dock-item:hover .dock-label {
    color: #222;
}

.dock-divider {
    position: relative;
    z-index: 1;
    align-self: stretch;
    width: 1px;
    margin: 6px 6px;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 0.14) 50%, rgba(51, 51, 51, 0) 100%);
}

/* Mittlere Breiten: Leiste kompakter, damit nichts überläuft */
@media (max-width: 1000px) {
    .service-dock {
        gap: 14px;
        padding: 14px 28px 12px 28px;
    }

    .dock-item {
        min-width: 120px;
    }
}

/* Touch/Mobile: keine Vergrößerung, stattdessen ruhiges 2x2-Raster */
@media (max-width: 640px) {
    .service-dock {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 12px;
        width: min(94%, 440px);
        padding: 28px 18px;
        border-radius: 28px;
    }

    .dock-icon-slot {
        height: auto;
        margin-bottom: 10px;
    }

    .dock-item {
        min-width: 0;
    }

    .dock-divider {
        display: none;
    }
}