.sld-buttons {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
    font-family: Arial, sans-serif;
}

/* Basis-Style Buttons mit 3D-Metall + Glossy + Grid */
.sld-btn {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 3-Spalten-Layout */
    align-items: center;
    border: 1px solid #999 !important; /* erzwingt silbernen Rahmen */
    padding: 6px 14px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 8px;
    position: relative; /* wichtig für Tooltip */
    background:
        radial-gradient(circle at var(--gloss-x, 50%) var(--gloss-y, 20%),
                        rgba(255,255,255,0.7), rgba(255,255,255,0) 40%),
        linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
    color: #3C3939;
    min-width: 100px;
    font-weight: 500;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 3px 6px rgba(0,0,0,0.25);
    transition: background 0.2s ease, transform 0.1s ease, 
                box-shadow 0.1s ease, color 0.2s ease;
    overflow: visible; /* Tooltip darf nicht abgeschnitten werden */
}

/* Hover-Effekt mit stärkerem Glossy */
.sld-btn:hover {
    background:
        radial-gradient(circle at var(--gloss-x, 50%) var(--gloss-y, 20%),
                        rgba(255,255,255,0.75), rgba(255,255,255,0) 40%),
        linear-gradient(to bottom, #cfcfcf 0%, #a9a9a9 100%);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 4px 8px rgba(0,0,0,0.3);
    transform: scale(1.02);
    color: #837C7C;
    border: 1px solid #999 !important; /* verhindert rote Umrandung */
}

/* Klick-Effekt */
.sld-btn:active {
    background:
        radial-gradient(circle at var(--gloss-x, 50%) var(--gloss-y, 20%),
                        rgba(255,255,255,0.65), rgba(255,255,255,0) 40%),
        linear-gradient(to bottom, #b5b5b5 0%, #9c9c9c 100%);
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}

/* Eingestanzter Metall-Effekt für Daumen, Strich und Zähler */
.sld-btn i,
.sld-btn .sld-count,
.sld-btn .sld-sep {
    color: #3C3939;
    text-shadow: 
        0.5px 0.5px 0.5px rgba(255,255,255,0.4), /* Lichtkante oben links */
       -0.5px -0.5px 0.5px rgba(0,0,0,0.25);      /* Schatten unten rechts */
    font-weight: 600;
}

/* Icon links */
.sld-btn i {
    justify-self: start;
    font-size: 16px;
}

/* Vertikaler Strich sitzt immer mittig */
.sld-sep {
    justify-self: center;
    margin: 0 8px;
    font-weight: bold;
}

/* Zähler mittig zwischen Strich und rechter Kante */
.sld-count {
    justify-self: center; /* mittig in der rechten Spalte */
    min-width: 28px;
    text-align: center;
}

/* Tooltip-Bubble im Silber/Alu-Look */
.sld-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%; /* über dem Button */
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: linear-gradient(to bottom, #f2f2f2, #d9d9d9);
    color: #3C3939;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #999;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    z-index: 9999; /* ganz oben */
}

/* Tooltip-Pfeil */
.sld-btn::before {
    content: "";
    position: absolute;
    bottom: 110%; /* sitzt unterhalb der Bubble */
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #d9d9d9 transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 9998;
}

/* Tooltip sichtbar bei Hover */
.sld-btn:hover::after,
.sld-btn:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Disabled State */
.sld-btn[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Overlay für Danke/Schade mit langsamem Fade+Scale */
.sld-thankyou {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 600;
    color: #3C3939;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 2s ease, transform 2s ease;
    border-radius: 8px;
    z-index: 200;
}
.sld-thankyou.visible {
    opacity: 1;
    transform: scale(1);
}

/* Admin: Markierte Zeilen */
#sld-table tbody tr.sld-selected {
    background-color: #ffe5e5 !important;
}

/* Reset-Button kompakt (Admin) */
.sld-icon-btn {
    padding: 2px 6px !important;
    margin: 2px;
}