/* ==========================================================================
   Interaktives SVG Styling (Affinity Designer kompatibel)
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f6f8;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.svg-container {
    width: 100%;
    max-width: 1200px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

svg,
.interactive-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   Allgemeine Definition für klickbare Elemente
   -------------------------------------------------------------------------- */

[id^="item-"],
[id^="item"],
.interactive-item {
    cursor: pointer;
    outline: none;
}

/* ==========================================================================
   1. REGELN FÜR grafik.svg (Erkennbar an #bg-canvas)
   ========================================================================== */

/* Basis-Transitions für Formen in grafik.svg */
svg:has(#bg-canvas) [id^="item-"] path,
svg:has(#bg-canvas) [id^="item-"] rect,
svg:has(#bg-canvas) [id^="item-"] polygon,
svg:has(#bg-canvas) [id^="item-"] circle,
#bg-canvas ~ [id^="item-"] path,
#bg-canvas ~ [id^="item-"] rect,
#bg-canvas ~ [id^="item-"] polygon,
#bg-canvas ~ [id^="item-"] circle {
    transform-box: fill-box;
    transform-origin: center;
    stroke: transparent;
    stroke-width: 3.5px;
    paint-order: stroke fill;
    transition: fill 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                stroke 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                stroke-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.25s ease;
}

/* Text in grafik.svg */
svg:has(#bg-canvas) [id^="item-"] text,
#bg-canvas ~ [id^="item-"] text {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    user-select: none;
}

/* Hover Button 1 & 3 in grafik.svg: Grün */
svg:has(#bg-canvas) [id^="item-"]:not(#item-2):not(#item2):hover path,
svg:has(#bg-canvas) [id^="item-"]:not(#item-2):not(#item2):hover rect,
svg:has(#bg-canvas) [id^="item-"]:not(#item-2):not(#item2):hover polygon,
svg:has(#bg-canvas) [id^="item-"]:not(#item-2):not(#item2):hover circle,
#bg-canvas ~ [id^="item-"]:not(#item-2):not(#item2):hover path,
#bg-canvas ~ [id^="item-"]:not(#item-2):not(#item2):hover rect,
#bg-canvas ~ [id^="item-"]:not(#item-2):not(#item2):hover polygon,
#bg-canvas ~ [id^="item-"]:not(#item-2):not(#item2):hover circle {
    fill: #28a745 !important;
    transform: scale(1.04);
    filter: drop-shadow(0 4px 12px rgba(40, 167, 69, 0.35));
}

svg:has(#bg-canvas) [id^="item-"]:not(#item-2):not(#item2):hover text,
#bg-canvas ~ [id^="item-"]:not(#item-2):not(#item2):hover text {
    transform: scale(1.05);
}

/* Hover Button 2 in grafik.svg: Rote Kontur, Fläche bleibt */
svg:has(#bg-canvas) #item-2:hover path,
svg:has(#bg-canvas) #item-2:hover rect,
#bg-canvas ~ #item-2:hover path,
#bg-canvas ~ #item-2:hover rect {
    fill: rgb(51,123,204) !important;
    stroke: #dc3545 !important;
    stroke-width: 3.85px !important;
    transform: scale(1.02);
    filter: drop-shadow(0 4px 14px rgba(220, 53, 69, 0.45));
}

svg:has(#bg-canvas) #item-2:hover text,
#bg-canvas ~ #item-2:hover text {
    transform: scale(1.02);
}

/* ==========================================================================
   2. REGELN FÜR grafik2.svg (Erkennbar an #bg)
   ========================================================================== */

/* 
   Background-Element in grafik2.svg:
   - Pulsieren (2.4s)
   - Farb-Aufhellung (+50% Helligkeit, 4.8s)
   - Rotation um die Mitte (9.6s)
*/
svg:has(#bg) #bg,
#bg {
    transform-box: fill-box;
    transform-origin: center;
    animation: bgPulse 2.4s ease-in-out infinite,
               bgBrightness 4.8s ease-in-out infinite,
               bgRotate 9.6s linear infinite;
    pointer-events: none;
}

@keyframes bgPulse {
    0%, 100% {
        scale: 1;
    }
    50% {
        scale: 1.1;
    }
}

@keyframes bgBrightness {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.5);
    }
}

@keyframes bgRotate {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}

/* Kurve in grafik2.svg */
#kurve,
.kurve,
svg:has(#bg) > path {
    transform-box: fill-box;
    transform-origin: center;
    transition: filter 0.3s ease;
}

/* Hover-Verhalten für item-1 in grafik2.svg (50% kleiner, Originalfarben) */
svg:has(#bg) [id^="item-"],
svg:has(#bg) [id^="item"],
#bg ~ [id^="item-"],
#bg ~ [id^="item"],
#grafik2 [id^="item-"],
.grafik2 [id^="item-"] {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s ease;
}

svg:has(#bg) [id^="item-"]:hover,
svg:has(#bg) [id^="item"]:hover,
#bg ~ [id^="item-"]:hover,
#bg ~ [id^="item"]:hover,
#grafik2 [id^="item-"]:hover,
.grafik2 [id^="item-"]:hover {
    transform: scale(0.5);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3));
}

/* Klick- / Active-Feedback */
[id^="item-"]:active,
[id^="item"]:active {
    transform: scale(0.95);
}