* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { margin: 0; background: #f2f2f2; display: flex; flex-direction: column; min-height: 100vh; }
.container { max-width: 900px; margin: 0 auto; width: 100%; padding: 20px; flex: 1; display: flex; flex-direction: column; }

/* Beliebiges HTML Präsentations-Feld */
.presentation-container {
    background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); flex-grow: 1; display: flex;
    flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.presentation-container img { max-width: 100%; max-height: 40vh; object-fit: contain; }

/* 4 Antwort-Felder Grid */
.grid-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; height: 200px; }
.btn-answer {
    border: none; border-radius: 8px; color: #fff; font-size: 1.2rem; font-weight: bold;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2); transition: opacity .1s;
}
.btn-answer:active { transform: translateY(2px); box-shadow: none; }
.c-0 { background: #e21b3c; } /* Rot */
.c-1 { background: #1368ce; } /* Blau */
.c-2 { background: #d89e00; } /* Gelb */
.c-3 { background: #26890c; } /* Grün */
.dimmed { opacity: 0.2; }

/* Controller-Buttons (Mobile) */
.mobile-grid { height: 70vh; }
.mobile-grid .btn-answer { font-size: 3rem; }