:root {
    /* zentrale Basisgröße = Durchmesser des inneren Kreises */
    --size: min(100px, 14vmin);
    --half: calc(var(--size) / 2);

    --o: calc(var(--size) * 2.225);        /* 178px */
    --spA: calc(var(--size) * -0.3125);    /* -25px */
    --spB: calc(var(--size) * -0.25);      /* -20px */
    --ring1: calc(var(--size) * 0.25);     /* 20px */
    --ring2: calc(var(--size) * 0.375);    /* 30px */
    --ring3: calc(var(--size) * 1.625);    /* 130px */
    --ring4: calc(var(--size) * 1.6875);   /* 135px */

    --pad: calc(var(--size) * 0.125);      /* 10px */

    --orb: calc(var(--size) * 0.625);      /* 50px */
    --orbTop: calc(var(--size) * -1.9375); /* -155px */
    --orbLeft: calc(var(--size) * 0.25);   /* 20px */
    --orbBorder: calc(var(--size) * 0.0625); /* 5px */
    --orbShadowY: calc(var(--size) * 4.4375); /* 355px */
    --orbShadowSpread: calc(var(--size) * -0.0625); /* -5px */

    --seg: calc(var(--size) * 3.5);        /* 280px */
    --segOffset: calc(var(--size) * -1.125); /* -90px */
}

body {
    background: rgb(71, 59, 59);
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1 {
    font-size: 1rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    margin: .1rem 0 0;
    color: #fff;
    line-height: 1.1;
}

p, a {
    font-size: .9rem;
    margin: .1rem 0 0;
    color: #fff;
    line-height: 1.2;
}

a[href^="tel"] {
    color: #fff;
    text-decoration: none;
}
a[href^="tel"]:hover,
a[href^="tel"]:active,
a[href^="tel"]:visited {
    color: #fff;
    text-decoration: none;
}

/* ---- Animation ---- */
#gif {
    background: black;
    padding: var(--pad);
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
    position: absolute;
    top: calc(50% - var(--half));
    left: calc(50% - var(--half));
    box-shadow:
            var(--o) 0 0 var(--spA) black,
            var(--o) 0 0 var(--spB) white,
            calc(var(--o) * -1) 0 0 var(--spA) black,
            calc(var(--o) * -1) 0 0 var(--spB) white,
            0 0 0 var(--ring1) black,
            0 0 0 var(--ring2) white,
            0 0 0 var(--ring3) black,
            0 0 0 var(--ring4) white;
    -webkit-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}

#gif:before {
    content: "";
    position: absolute;
    height: var(--orb);
    width: var(--orb);
    border-radius: 50%;
    top: var(--orbTop);
    left: var(--orbLeft);
    background: black;
    border: var(--orbBorder) solid white;
    box-shadow:
            0 var(--orbShadowY) 0 var(--orbShadowSpread) black,
            0 var(--orbShadowY) 0 0 white;
    -webkit-animation: reverseRotate 3s linear infinite;
    animation: reverseRotate 3s linear infinite;
}

#gif:after {
    content: "";
    position: absolute;
    height: var(--seg);
    width: var(--seg);
    left: var(--segOffset);
    top: var(--segOffset);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlPSJ3aGl0ZSIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    z-index: 2;
    -webkit-animation: segmentRotate 300s linear infinite;
    animation: segmentRotate 300s linear infinite;
}

/* --- Keyframes inkl. „Zwischen-Resets“ wie im Original --- */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    10%, 15%, 35%, 40%, 60%, 65%, 85%, 90% {
        background: black;
        box-shadow:
                var(--o) 0 0 var(--spA) black,
                var(--o) 0 0 var(--spB) white,
                calc(var(--o) * -1) 0 0 var(--spA) black,
                calc(var(--o) * -1) 0 0 var(--spB) white,
                0 0 0 var(--ring1) black,
                0 0 0 var(--ring2) white,
                0 0 0 var(--ring3) black,
                0 0 0 var(--ring4) white;
    }
    100% { transform: rotate(360deg); }
}

@keyframes reverseRotate {
    0% {
        transform:
                translateY(var(--o)) rotate(0deg)
                translateY(calc(var(--o) * -1)) rotate(0deg);
    }
    10%, 15%, 35%, 40%, 60%, 65%, 85%, 90% {
        background: black;
        box-shadow:
                0 var(--orbShadowY) 0 var(--orbShadowSpread) black,
                0 var(--orbShadowY) 0 0 white;
    }
    100% {
        transform:
                translateY(var(--o)) rotate(-720deg)
                translateY(calc(var(--o) * -1)) rotate(0deg);
    }
}

@keyframes segmentRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-32000deg); }
}

/* --- WebKit-Pendants (wie im Original) --- */
@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    10%, 15%, 35%, 40%, 60%, 65%, 85%, 90% {
        background: black;
        box-shadow:
                var(--o) 0 0 var(--spA) black,
                var(--o) 0 0 var(--spB) white,
                calc(var(--o) * -1) 0 0 var(--spA) black,
                calc(var(--o) * -1) 0 0 var(--spB) white,
                0 0 0 var(--ring1) black,
                0 0 0 var(--ring2) white,
                0 0 0 var(--ring3) black,
                0 0 0 var(--ring4) white;
    }
    100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes reverseRotate {
    0% {
        -webkit-transform:
                translateY(var(--o)) rotate(0deg)
                translateY(calc(var(--o) * -1)) rotate(0deg);
    }
    10%, 15%, 35%, 40%, 60%, 65%, 85%, 90% {
        background: black;
        box-shadow:
                0 var(--orbShadowY) 0 var(--orbShadowSpread) black,
                0 var(--orbShadowY) 0 0 white;
    }
    100% {
        -webkit-transform:
                translateY(var(--o)) rotate(-720deg)
                translateY(calc(var(--o) * -1)) rotate(0deg);
    }
}

@-webkit-keyframes segmentRotate {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-32000deg); }
}