/* DADZ Scroll to Top – Design nach der Palette der Website */

.dadz-st {
    --dadz-st-size: 52px;
    --dadz-accent: #6F8340;
    --dadz-accent-dark: #5A6B33;
    --dadz-deep: #212913;
    --dadz-paper: #FEFEFD;

    position: fixed;
    z-index: 180;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: var(--dadz-st-size);
    height: var(--dadz-st-size);
    padding: 0;
    background: var(--dadz-accent);
    color: var(--dadz-paper);
    border: 1px solid var(--dadz-accent);
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(33,41,19,.24);
    transition: opacity .4s cubic-bezier(.22,.61,.36,1),
                transform .4s cubic-bezier(.22,.61,.36,1),
                background .25s ease, border-color .25s ease;
}

.dadz-st--circle { border-radius: 50%; }
.dadz-st--square { border-radius: 3px; }

/* Zentrierte Positionen: die Grundverschiebung steckt in eigenen Klassen,
   damit sie mit der Einblendanimation kombinierbar bleibt. */
.dadz-st--center-x { transform: translateX(-50%); }
.dadz-st--center-y { transform: translateY(-50%); }

/* Ohne JavaScript bleibt der Button dauerhaft sichtbar – lieber immer da als
   gar nicht. Erst wenn sich das Skript meldet, uebernimmt es die Steuerung. */
.dadz-st--managed {
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.92);
}
.dadz-st--managed.dadz-st--center-x { transform: translateX(-50%) translateY(14px) scale(.92); }
.dadz-st--managed.dadz-st--center-y { transform: translateY(calc(-50% + 14px)) scale(.92); }

.dadz-st--managed.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.dadz-st--managed.dadz-st--center-x.is-visible { transform: translateX(-50%); }
.dadz-st--managed.dadz-st--center-y.is-visible { transform: translateY(-50%); }

.dadz-st:hover {
    background: var(--dadz-accent-dark);
    border-color: var(--dadz-accent-dark);
}
.dadz-st:focus-visible {
    outline: 2px solid var(--dadz-deep);
    outline-offset: 3px;
}

.dadz-st__arrow {
    width: 45%;
    height: 45%;
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.dadz-st:hover .dadz-st__arrow { transform: translateY(-3px); }

.dadz-st--with-text {
    width: auto;
    padding: 0 1.2rem 0 1rem;
    border-radius: 999px;
}
.dadz-st--with-text .dadz-st__arrow { width: 20px; height: 20px; }

.dadz-st__label {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Fortschrittsring */
.dadz-st__ring {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    transform: rotate(-90deg);
    pointer-events: none;
}
.dadz-st__ring-bg { stroke: rgba(254,254,253,.28); }
.dadz-st__ring-fg {
    stroke: var(--dadz-paper);
    stroke-linecap: round;
    stroke-dasharray: 125.6;
    stroke-dashoffset: 125.6;
    transition: stroke-dashoffset .12s linear;
}
.dadz-st--with-text .dadz-st__ring { display: none; }

@media (max-width: 700px) {
    .dadz-st--desktop-only { display: none; }
    .dadz-st { --dadz-st-size: 46px; }
    .dadz-st--with-text .dadz-st__label { display: none; }
    .dadz-st--with-text { width: var(--dadz-st-size); padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dadz-st, .dadz-st__arrow, .dadz-st__ring-fg { transition: none; }
}
