@import url(/assets/css/base/style.css);


/* =========================================================================
   CUSTOM CURSOR — einfacher Kreis
   -------------------------------------------------------------------------
   Aufbau:
     .cursor          → wird per JS positioniert (transform: translate)
     .cursor__circle  → der sichtbare Kreis, hier läuft die Größen-Animation

   Zustände (Klassen am <div class="cursor">, gesetzt durch cursor.js):
     .is-visible  → Maus ist im Fenster
     .is-hover    → Maus ist über Link / Button / Menüpunkt …
     .is-down     → Maustaste ist gedrückt
     .is-text     → Maus ist über einem Eingabefeld (Kreis wird ausgeblendet)
========================================================================= */

:root {
    --cursor-size: 30px;
    /* Grundgröße des Kreises */
    --cursor-color: rgb(191 205 255);
    /* Mit mix-blend-mode: difference bleibt der Kreis auf hellen
       UND dunklen Flächen sichtbar. Wenn du lieber eine feste Markenfarbe
       willst: Farbe eintragen und die Zeile mix-blend-mode unten löschen. */
    --cursor-scale-hover: 1.5;
    /* Hover: doppelt so groß */
    --cursor-scale-down: 0.75;
    /* Klick: etwas kleiner */
    --cursor-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* gleiche Kurve wie deine Headline-Animation */
}

/* Nur auf Geräten mit Maus. Auf Touch-Geräten passiert gar nichts. */
@media (hover: hover) and (pointer: fine) {

    /* Standard-Cursor nur ausblenden, wenn cursor.js wirklich läuft
       (die Klasse setzt das Skript). Ohne JS bleibt der normale Cursor. */
    html.has-custom-cursor,
    html.has-custom-cursor * {
        cursor: none !important;
    }

    /* In Eingabefeldern brauchst du den echten Text-Cursor */
    html.has-custom-cursor input,
    html.has-custom-cursor textarea,
    html.has-custom-cursor select {
        cursor: auto !important;
    }

    .cursor {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        /* über Cookie-Banner und Kontakt-Popup */
        pointer-events: none;
        /* darf nie Klicks abfangen */
        opacity: 0;
        transition: opacity 0.25s ease;
        will-change: transform;
    }

    .cursor.is-visible {
        opacity: 1;
    }

    .cursor.is-text {
        opacity: 0;
    }

    .cursor__circle {
        width: var(--cursor-size);
        height: var(--cursor-size);
        /* Kreismittelpunkt = Mausposition */
        margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
        border-radius: 50%;
        background-color: var(--cursor-color);
        mix-blend-mode: difference;
        transform: scale(1);
        transition: transform 0.35s var(--cursor-ease);
        will-change: transform;
    }

    .cursor.is-hover .cursor__circle {
        transform: scale(var(--cursor-scale-hover));
    }

    .cursor.is-down .cursor__circle {
        transform: scale(var(--cursor-scale-down));
    }

    /* Hover + Klick gleichzeitig: leicht verkleinert, aber größer als normal */
    .cursor.is-hover.is-down .cursor__circle {
        transform: scale(calc(var(--cursor-scale-hover) * var(--cursor-scale-down)));
    }
}

/* Für Nutzer mit „Bewegung reduzieren": keine weichen Übergänge */
@media (prefers-reduced-motion: reduce) {

    .cursor,
    .cursor__circle {
        transition: none;
    }
}