/*
 * MESTRO-Kreislauf — aufbereitet aus der gelieferten
 * eigenstaendigen HTML-Datei durch dev/build_kreis.py.
 * Nicht von Hand bearbeiten.
 */

.mestro-kreis {
            background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
            border-radius: 24px;
            padding: 50px;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
            max-width: 1650px;
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
.mestro-kreis svg {
            display: block;
            margin: 0 auto 40px;
            width: 100%;
            max-width: 1200px;
            height: auto;
            filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.3));
        }
@keyframes mk-phase1Pulse {
            0% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(52, 152, 219, 0)); }
            2%, 2% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(52, 152, 219, 0)); }
            4%, 4% { opacity: 1; filter: drop-shadow(0 0 12px rgba(52, 152, 219, 1)); }
            6%, 22.2% { opacity: 1; filter: drop-shadow(0 0 20px rgba(52, 152, 219, 1)); }
            23.2%, 100% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(52, 152, 219, 0)); }
        }
@keyframes mk-phase2Pulse {
            0%, 24% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(155, 89, 182, 0)); }
            24.4%, 24.4% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(155, 89, 182, 0)); }
            24.6%, 24.6% { opacity: 1; filter: drop-shadow(0 0 12px rgba(155, 89, 182, 1)); }
            25.6%, 41.4% { opacity: 1; filter: drop-shadow(0 0 20px rgba(155, 89, 182, 1)); }
            42.2%, 100% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(155, 89, 182, 0)); }
        }
@keyframes mk-phase3Pulse {
            0%, 43.2% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(230, 126, 34, 0)); }
            43.6%, 43.6% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(230, 126, 34, 0)); }
            43.8%, 43.8% { opacity: 1; filter: drop-shadow(0 0 12px rgba(230, 126, 34, 1)); }
            44.8%, 60.6% { opacity: 1; filter: drop-shadow(0 0 20px rgba(230, 126, 34, 1)); }
            61.4%, 100% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(230, 126, 34, 0)); }
        }
@keyframes mk-phase4Pulse {
            0%, 62.4% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(243, 156, 18, 0)); }
            62.8%, 62.8% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(243, 156, 18, 0)); }
            63%, 63% { opacity: 1; filter: drop-shadow(0 0 12px rgba(243, 156, 18, 1)); }
            64%, 79.8% { opacity: 1; filter: drop-shadow(0 0 20px rgba(243, 156, 18, 1)); }
            80.6%, 100% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(243, 156, 18, 0)); }
        }
@keyframes mk-phase5Pulse {
            0%, 82% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(39, 174, 96, 0)); }
            82.4%, 82.4% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(39, 174, 96, 0)); }
            82.6%, 82.6% { opacity: 1; filter: drop-shadow(0 0 12px rgba(39, 174, 96, 1)); }
            83.6%, 99.4% { opacity: 1; filter: drop-shadow(0 0 20px rgba(39, 174, 96, 1)); }
            100%, 100% { opacity: 0.25; filter: drop-shadow(0 0 0px rgba(39, 174, 96, 0)); }
        }
@keyframes mk-arrowDraw {
            0% {
                opacity: 0;
                filter: drop-shadow(0 0 0px);
            }
            2%, 2% {
                opacity: 0;
                filter: drop-shadow(0 0 0px);
            }
            4%, 4% {
                opacity: 1;
                filter: drop-shadow(0 0 10px currentColor);
            }
            6%, 22.2% {
                opacity: 1;
                filter: drop-shadow(0 0 15px currentColor);
            }
            23.2%, 100% {
                opacity: 0;
                filter: drop-shadow(0 0 0px);
            }
        }
@keyframes mk-wordSwitch1 {
            0% { opacity: 0; }
            2%, 2% { opacity: 0; }
            4%, 4% { opacity: 1; }
            6%, 22.2% { opacity: 1; }
            23.2%, 100% { opacity: 0; }
        }
@keyframes mk-wordSwitch2 {
            0%, 24% { opacity: 0; }
            24.4%, 24.4% { opacity: 0; }
            24.6%, 24.6% { opacity: 1; }
            25.6%, 41.4% { opacity: 1; }
            42.2%, 100% { opacity: 0; }
        }
@keyframes mk-wordSwitch3 {
            0%, 43.2% { opacity: 0; }
            43.6%, 43.6% { opacity: 0; }
            43.8%, 43.8% { opacity: 1; }
            44.8%, 60.6% { opacity: 1; }
            61.4%, 100% { opacity: 0; }
        }
@keyframes mk-wordSwitch4 {
            0%, 62.4% { opacity: 0; }
            62.8%, 62.8% { opacity: 0; }
            63%, 63% { opacity: 1; }
            64%, 79.8% { opacity: 1; }
            80.6%, 100% { opacity: 0; }
        }
@keyframes mk-wordSwitch5 {
            0%, 82% { opacity: 0; }
            82.4%, 82.4% { opacity: 0; }
            82.6%, 82.6% { opacity: 1; }
            83.6%, 99.4% { opacity: 1; }
            100%, 100% { opacity: 0; }
        }
@keyframes mk-subtitleSwitch1 {
            0%, 14% { opacity: 0; }
            20%, 22.2% { opacity: 1; }
            23.2%, 100% { opacity: 0; }
        }
@keyframes mk-subtitleSwitch2 {
            0%, 24% { opacity: 0; }
            25.6%, 41.4% { opacity: 1; }
            42.2%, 100% { opacity: 0; }
        }
@keyframes mk-subtitleSwitch3 {
            0%, 43.2% { opacity: 0; }
            44.8%, 60.6% { opacity: 1; }
            61.4%, 100% { opacity: 0; }
        }
@keyframes mk-subtitleSwitch4 {
            0%, 62.4% { opacity: 0; }
            64%, 79.8% { opacity: 1; }
            80.6%, 100% { opacity: 0; }
        }
@keyframes mk-subtitleSwitch5 {
            0%, 82% { opacity: 0; }
            83.6%, 99.4% { opacity: 1; }
            100%, 100% { opacity: 0; }
        }
.mestro-kreis .phase1-bg { animation: mk-phase1Pulse 16.8s ease-in-out infinite; }
.mestro-kreis .phase2-bg { animation: mk-phase2Pulse 16.8s ease-in-out infinite; }
.mestro-kreis .phase3-bg { animation: mk-phase3Pulse 16.8s ease-in-out infinite; }
.mestro-kreis .phase4-bg { animation: mk-phase4Pulse 16.8s ease-in-out infinite; }
.mestro-kreis .phase5-bg { animation: mk-phase5Pulse 16.8s ease-in-out infinite; }
.mestro-kreis .arrow1 { animation: mk-arrowDraw 16.8s ease-in-out infinite; stroke-dasharray: 120; color: #3498db; opacity: 0; }
.mestro-kreis .arrow2 { animation: mk-arrowDraw 16.8s ease-in-out infinite; animation-delay: 3.64s; stroke-dasharray: 120; color: #9b59b6; opacity: 0; }
.mestro-kreis .arrow3 { animation: mk-arrowDraw 16.8s ease-in-out infinite; animation-delay: 6.86s; stroke-dasharray: 120; color: #e67e22; opacity: 0; }
.mestro-kreis .arrow4 { animation: mk-arrowDraw 16.8s ease-in-out infinite; animation-delay: 10.08s; stroke-dasharray: 120; color: #f39c12; opacity: 0; }
.mestro-kreis .arrow5 { animation: mk-arrowDraw 16.8s ease-in-out infinite; animation-delay: 13.37s; stroke-dasharray: 120; color: #27ae60; opacity: 0; }
.mestro-kreis .word1 { animation: mk-wordSwitch1 16.8s linear infinite; }
.mestro-kreis .word2 { animation: mk-wordSwitch2 16.8s linear infinite; }
.mestro-kreis .word3 { animation: mk-wordSwitch3 16.8s linear infinite; }
.mestro-kreis .word4 { animation: mk-wordSwitch4 16.8s linear infinite; }
.mestro-kreis .word5 { animation: mk-wordSwitch5 16.8s linear infinite; }
@keyframes mk-w1-1 { 0%, 5.8% { opacity: 0; } 6%, 22.2% { opacity: 1; } 22.4%, 23.2% { opacity: 0; } 23.4%, 100% { opacity: 0; } }
@keyframes mk-w1-2 { 0%, 6.6% { opacity: 0; } 6.8%, 22.2% { opacity: 1; } 22.4%, 23.2% { opacity: 0; } 23.4%, 100% { opacity: 0; } }
@keyframes mk-w1-3 { 0%, 7.4% { opacity: 0; } 7.6%, 22.2% { opacity: 1; } 22.4%, 23.2% { opacity: 0; } 23.4%, 100% { opacity: 0; } }
@keyframes mk-w1-4 { 0%, 8.2% { opacity: 0; } 8.4%, 22.2% { opacity: 1; } 22.4%, 23.2% { opacity: 0; } 23.4%, 100% { opacity: 0; } }
@keyframes mk-w2-1 { 0%, 25.4% { opacity: 0; } 25.6%, 41.4% { opacity: 1; } 41.6%, 42.2% { opacity: 0; } 42.4%, 100% { opacity: 0; } }
@keyframes mk-w2-2 { 0%, 26.2% { opacity: 0; } 26.4%, 41.4% { opacity: 1; } 41.6%, 42.2% { opacity: 0; } 42.4%, 100% { opacity: 0; } }
@keyframes mk-w2-3 { 0%, 27% { opacity: 0; } 27.2%, 41.4% { opacity: 1; } 41.6%, 42.2% { opacity: 0; } 42.4%, 100% { opacity: 0; } }
@keyframes mk-w3-1 { 0%, 44.6% { opacity: 0; } 44.8%, 60.6% { opacity: 1; } 60.8%, 61.4% { opacity: 0; } 61.6%, 100% { opacity: 0; } }
@keyframes mk-w3-2 { 0%, 45.4% { opacity: 0; } 45.6%, 60.6% { opacity: 1; } 60.8%, 61.4% { opacity: 0; } 61.6%, 100% { opacity: 0; } }
@keyframes mk-w3-3 { 0%, 46.2% { opacity: 0; } 46.4%, 60.6% { opacity: 1; } 60.8%, 61.4% { opacity: 0; } 61.6%, 100% { opacity: 0; } }
@keyframes mk-w4-1 { 0%, 63.8% { opacity: 0; } 64%, 79.8% { opacity: 1; } 80%, 80.6% { opacity: 0; } 80.8%, 100% { opacity: 0; } }
@keyframes mk-w4-2 { 0%, 64.6% { opacity: 0; } 64.8%, 79.8% { opacity: 1; } 80%, 80.6% { opacity: 0; } 80.8%, 100% { opacity: 0; } }
@keyframes mk-w4-3 { 0%, 65.4% { opacity: 0; } 65.6%, 79.8% { opacity: 1; } 80%, 80.6% { opacity: 0; } 80.8%, 100% { opacity: 0; } }
@keyframes mk-w4-4 { 0%, 66.2% { opacity: 0; } 66.4%, 79.8% { opacity: 1; } 80%, 80.6% { opacity: 0; } 80.8%, 100% { opacity: 0; } }
@keyframes mk-w5-1 { 0%, 83.4% { opacity: 0; } 83.6%, 99.4% { opacity: 1; } 99.6%, 100% { opacity: 0; } 100%, 100% { opacity: 0; } }
@keyframes mk-w5-2 { 0%, 84.2% { opacity: 0; } 84.4%, 99.4% { opacity: 1; } 99.6%, 100% { opacity: 0; } 100%, 100% { opacity: 0; } }
@keyframes mk-w5-3 { 0%, 85% { opacity: 0; } 85.2%, 99.4% { opacity: 1; } 99.6%, 100% { opacity: 0; } 100%, 100% { opacity: 0; } }
@keyframes mk-w5-4 { 0%, 85.8% { opacity: 0; } 86%, 99.4% { opacity: 1; } 99.6%, 100% { opacity: 0; } 100%, 100% { opacity: 0; } }
.mestro-kreis .center-word { animation-duration: 16.8s; animation-timing-function: steps(1, jump-start); animation-iteration-count: infinite; }
.mestro-kreis .w1-1 { animation-name: mk-w1-1; }
.mestro-kreis .w1-2 { animation-name: mk-w1-2; }
.mestro-kreis .w1-3 { animation-name: mk-w1-3; }
.mestro-kreis .w1-4 { animation-name: mk-w1-4; }
.mestro-kreis .w2-1 { animation-name: mk-w2-1; }
.mestro-kreis .w2-2 { animation-name: mk-w2-2; }
.mestro-kreis .w2-3 { animation-name: mk-w2-3; }
.mestro-kreis .w3-1 { animation-name: mk-w3-1; }
.mestro-kreis .w3-2 { animation-name: mk-w3-2; }
.mestro-kreis .w3-3 { animation-name: mk-w3-3; }
.mestro-kreis .w4-1 { animation-name: mk-w4-1; }
.mestro-kreis .w4-2 { animation-name: mk-w4-2; }
.mestro-kreis .w4-3 { animation-name: mk-w4-3; }
.mestro-kreis .w4-4 { animation-name: mk-w4-4; }
.mestro-kreis .w5-1 { animation-name: mk-w5-1; }
.mestro-kreis .w5-2 { animation-name: mk-w5-2; }
.mestro-kreis .w5-3 { animation-name: mk-w5-3; }
.mestro-kreis .w5-4 { animation-name: mk-w5-4; }
@media (max-width: 768px) {
  .mestro-kreis {
                padding: 30px;
            }
  .mestro-kreis svg {
                max-width: 600px;
            }
}

/* --------------------------------------------------------------------- */
/* Rahmen im Stil der Site: neutrales Dunkelgrau statt des blaustichigen   */
/* Originals, keine abgerundeten Ecken. Die Phasenfarben bleiben, weil sie */
/* die fuenf Phasen unterscheidbar machen — sie tragen Bedeutung.          */
/* --------------------------------------------------------------------- */
.mestro-kreis {
	background: linear-gradient(135deg, #1D1D1B 0%, #2A2C2D 100%);
	border-radius: 0;
	border: 0;
	box-shadow: none;
	max-width: none;
	width: 100%;
	padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
}

.mestro-kreis svg {
	margin: 0 auto;
	max-width: 1200px;
}

/* Liegt die Grafik in einem Abschnitt, der bereits dunkel hinterlegt ist,
   braucht sie ihre eigene Flaeche nicht — sonst zeichnete sich ein Kasten
   im Kasten ab. Alleinstehend behaelt sie ihren dunklen Rahmen. */
.kreis-band .mestro-kreis {
	background: none;
	padding-left: 0;
	padding-right: 0;
}

/* Im Band steht ueber der Grafik noch eine Ueberschrift und darunter ein
   Verweis. Ohne Deckelung fuellte allein das SVG den halben Bildschirm. */
.kreis-band .mestro-kreis svg {
	max-width: 980px;
}

/* --------------------------------------------------------------------- */
/* Standbild.                                                             */
/*                                                                        */
/* Zwei Faelle brauchen dasselbe: Besucher, die reduzierte Bewegung        */
/* eingestellt haben, und die Zweitverwendung auf der Lebenszyklus-Seite,  */
/* wo dieselbe Animation ein zweites Mal nur ermuedend waere.              */
/*                                                                        */
/* Die Animation schlicht abzuschalten genuegt nicht: ohne sie stuenden    */
/* alle fuenf Bildunterschriften gleichzeitig uebereinander. Deshalb ein   */
/* bewusst gesetztes Bild — alle Phasen und Pfeile sichtbar, dazu die      */
/* Beschriftung der ersten Phase.                                          */
/* --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mestro-kreis svg * {
		animation: none !important;
	}
	.mestro-kreis .phase1-bg,
	.mestro-kreis .phase2-bg,
	.mestro-kreis .phase3-bg,
	.mestro-kreis .phase4-bg,
	.mestro-kreis .phase5-bg,
	.mestro-kreis .word1,
	.mestro-kreis .word2,
	.mestro-kreis .word3,
	.mestro-kreis .word4,
	.mestro-kreis .word5,
	.mestro-kreis .arrow1,
	.mestro-kreis .arrow2,
	.mestro-kreis .arrow3,
	.mestro-kreis .arrow4,
	.mestro-kreis .arrow5 {
		opacity: 1;
	}
	/* Die Bildunterschriften gehoeren je einer Phase. Stehen bliebe nur eine
	   davon, laese sie sich als Beschriftung des ganzen Kreises missverstehen
	   — und alle zusammen laegen uebereinander. Also keine. Die fuenf
	   Phasennamen stehen ohnehin an den Symbolen. */
	.mestro-kreis .center-word {
		opacity: 0;
	}
}

.mestro-kreis.ist-standbild svg * {
	animation: none !important;
}
.mestro-kreis.ist-standbild .phase1-bg,
.mestro-kreis.ist-standbild .phase2-bg,
.mestro-kreis.ist-standbild .phase3-bg,
.mestro-kreis.ist-standbild .phase4-bg,
.mestro-kreis.ist-standbild .phase5-bg,
.mestro-kreis.ist-standbild .word1,
.mestro-kreis.ist-standbild .word2,
.mestro-kreis.ist-standbild .word3,
.mestro-kreis.ist-standbild .word4,
.mestro-kreis.ist-standbild .word5,
.mestro-kreis.ist-standbild .arrow1,
.mestro-kreis.ist-standbild .arrow2,
.mestro-kreis.ist-standbild .arrow3,
.mestro-kreis.ist-standbild .arrow4,
.mestro-kreis.ist-standbild .arrow5 {
	opacity: 1;
}
/* Die Bildunterschriften gehoeren je einer Phase. Stehen bliebe nur eine
   davon, laese sie sich als Beschriftung des ganzen Kreises missverstehen
   — und alle zusammen laegen uebereinander. Also keine. Die fuenf
   Phasennamen stehen ohnehin an den Symbolen. */
.mestro-kreis.ist-standbild .center-word {
	opacity: 0;
}