/* Responsive CSS für chemisches Gleichgewicht Animationen */

/* Grundlegende Animation Container Stile */
.animation-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

/* SVG Responsivität */
.animation-container svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Animationsbeschreibungen */
.animation-description {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.5;
}

/* Influence Factor Boxen */
.influence-factor-box {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.influence-factor-box h4 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

/* Erklärungsboxen */
.explanation-box {
    margin: 10px 0 20px;
    padding: 15px;
    background-color: #f0f8ff;
    border-left: 4px solid #2196F3;
    border-radius: 4px;
}

.explanation-box h4 {
    margin-top: 0;
    color: #0d47a1;
}

/* Responsive Anpassungen für die Apfelkrieg Animation */
@media screen and (max-width: 768px) {
    #appleWarSVG text {
        font-size: 14px;
    }
    
    #appleWarSVG text[font-size="22"] {
        font-size: 18px;
    }
    
    #appleWarSVG text[font-size="16"] {
        font-size: 14px;
    }
    
    #appleWarSVG text[font-size="14"] {
        font-size: 12px;
    }
    
    #appleWarSVG text[font-size="12"] {
        font-size: 10px;
    }
}

@media screen and (max-width: 576px) {
    #appleWarSVG text {
        font-size: 12px;
    }
    
    #appleWarSVG text[font-size="22"] {
        font-size: 16px;
    }
    
    #appleWarSVG text[font-size="16"] {
        font-size: 12px;
    }
    
    #appleWarSVG text[font-size="14"] {
        font-size: 10px;
    }
    
    #appleWarSVG text[font-size="12"] {
        font-size: 8px;
    }
    
    /* Apfelgröße anpassen */
    #appleWarSVG circle.apple {
        r: 12;
    }
}

/* Responsive Anpassungen für die Konzentrations-Animation */
@media screen and (max-width: 768px) {
    #concentrationSVG text {
        font-size: 14px;
    }
    
    #concentrationSVG text[font-size="22"] {
        font-size: 18px;
    }
    
    #concentrationSVG text[font-size="16"] {
        font-size: 14px;
    }
    
    #concentrationSVG text[font-size="14"] {
        font-size: 12px;
    }
    
    #concentrationSVG text[font-size="12"] {
        font-size: 10px;
    }
}

@media screen and (max-width: 576px) {
    #concentrationSVG text {
        font-size: 12px;
    }
    
    #concentrationSVG text[font-size="22"] {
        font-size: 16px;
    }
    
    #concentrationSVG text[font-size="16"] {
        font-size: 12px;
    }
    
    #concentrationSVG text[font-size="14"] {
        font-size: 10px;
    }
    
    #concentrationSVG text[font-size="12"] {
        font-size: 8px;
    }
    
    /* Button-Positionen anpassen */
    #startEquilibriumButton, #addGrandpaButton, #addGrandsonButton {
        transform: translate(-40px, 0);
    }
    
    #concResetButton {
        transform: translate(-120px, 0);
    }
}

/* Responsive Anpassungen für die Druck-Animation */
@media screen and (max-width: 768px) {
    #pressureSVG text {
        font-size: 14px;
    }
    
    #pressureSVG text[font-size="22"] {
        font-size: 18px;
    }
    
    #pressureSVG text[font-size="16"] {
        font-size: 14px;
    }
    
    #pressureSVG text[font-size="14"] {
        font-size: 12px;
    }
    
    #pressureSVG text[font-size="12"] {
        font-size: 10px;
    }
}

@media screen and (max-width: 576px) {
    #pressureSVG text {
        font-size: 12px;
    }
    
    #pressureSVG text[font-size="22"] {
        font-size: 16px;
    }
    
    #pressureSVG text[font-size="16"] {
        font-size: 12px;
    }
    
    #pressureSVG text[font-size="14"] {
        font-size: 10px;
    }
    
    #pressureSVG text[font-size="12"] {
        font-size: 8px;
    }
    
    /* Anpassung der Button-Positionen */
    #highPressureButton, #normalPressureButton, #lowPressureButton {
        transform: translate(-30px, 0);
    }
    
    #pressureResetButton {
        transform: translate(-100px, 0);
    }
    
    /* Anpassung des Manometers */
    #reactionChamber circle[cx="650"] {
        transform: translate(-50px, 0);
    }
    
    #manometerNeedle {
        transform: translate(-50px, 0) rotate(60deg);
        transform-origin: 600px 250px;
    }
}

/* Allgemeine Responsive Anpassungen für den Equilibrium Diagram Bereich */
@media screen and (max-width: 768px) {
    .equilibrium-diagrams svg {
        transform: scale(0.9);
        transform-origin: center top;
    }
}

@media screen and (max-width: 576px) {
    .equilibrium-diagrams svg {
        transform: scale(0.7);
        transform-origin: center top;
    }
    
    .diagram-caption {
        font-size: 14px;
        margin-top: -30px;
    }
}

/* Verbesserung der Lesbarkeit auf mobilen Geräten für allgemeine Textelemente */
@media screen and (max-width: 768px) {
    .content-section p,
    .content-section li {
        font-size: 15px;
        line-height: 1.5;
    }
    
    .content-section h2 {
        font-size: 20px;
    }
    
    .content-section h3 {
        font-size: 18px;
    }
    
    .content-section h4 {
        font-size: 16px;
    }
}

/* Touch-freundlichere Buttons auf mobilen Geräten */
@media screen and (max-width: 576px) {
    .animation-container [cursor="pointer"] {
        cursor: pointer;
        touch-action: manipulation;
    }
}

/* Anpassungen für die Berechnung Sektion */
@media screen and (max-width: 768px) {
    .calculation-container {
        padding: 15px;
    }
    
    .calculation-container input {
        width: 80px;
    }
    
    .calculation-container button {
        padding: 8px 15px;
        margin-top: 10px;
    }
}

/* Printtaugliche Darstellung */
@media print {
    .animation-container svg {
        max-height: 300px;
    }
    
    .animation-container [cursor="pointer"] {
        display: none;
    }
    
    .animation-description {
        page-break-inside: avoid;
    }
}

/* iOS-spezifische Fixes für die Animations-Buttons */

@supports (-webkit-touch-callout: none) {
    /* iOS-spezifische Anpassungen */
    
    /* Größere Touch-Bereiche für iOS-Geräte */
    [cursor="pointer"] {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* Entfernt den blauen Blink-Effekt bei Berührung */
        touch-action: manipulation; /* Verhindert Zoom-Gesten auf diesem Element */
    }
    
    /* Spezielle Anpassungen für SVG-Buttons */
    #startButton, #tempIncreaseButton, #resetButton,
    #startEquilibriumButton, #addGrandpaButton, #addGrandsonButton,
    #highPressureButton, #normalPressureButton, #lowPressureButton, 
    #pressureResetButton {
        /* Größeren Touch-Bereich sicherstellen */
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Verbesserte Gruppierung für Touch-Bereiche */
    #startButtonGroup, #tempButtonGroup, #resetButtonGroup {
        cursor: pointer;
    }
    
    /* Sicherstellen, dass die Texte in den Buttons sichtbar sind */
    [cursor="pointer"] text {
        pointer-events: none; /* Erlaubt Klicks durch den Text hindurch */
        user-select: none; /* Verhindert Textauswahl */
        -webkit-user-select: none;
    }
    
    /* Fix für die Animations-Container */
    .animation-container {
        -webkit-overflow-scrolling: touch; /* Verbessert das Scrollverhalten auf iOS */
        touch-action: pan-y; /* Erlaubt vertikales Scrollen ohne Zoom */
    }
    
    /* Lösungen für z-Index-Probleme bei SVG-Elementen auf iOS */
    svg g[cursor="pointer"] {
        position: relative;
        z-index: 2; /* Höherer z-Index als andere Elemente */
    }