section#ergebnis { display: none; background-color: rgba(76, 175, 80, 0.3); min-height: 100vh; font-family: 'Poppins', sans-serif; }
section#ergebnis.active { display: block; }

.ergebnis-header { text-align: center; margin: 0; padding-top: 2rem; }
.ergebnis-header h1 { font-size: 2.5rem; font-weight:600; color:#2e7d32; }

.content-container {
  max-width: 800px;
  margin: 3rem auto;
  padding: 3rem 2.5rem;
  background-color: rgba(255,255,255,0.9);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.ergebnis-main { display:flex; flex-direction:column; align-items:center; gap:2rem; text-align:center; }

.ergebnis-main p { font-size:1.2rem; margin:0; }
.ergebnis-symbol { width:90px; height:auto; margin:0.5rem 0; transition:0.3s ease; }
.ergebnis-symbol.sun { width:110px; height:auto; }
.ergebnis-symbol:hover { transform: scale(1.1); }

.btn { margin-top:1rem; background-color:#4caf50; color:white; border:none; border-radius:8px; padding:0.8rem 1.5rem; font-size:1.1rem; cursor:pointer; transition:0.2s ease; }
.btn:hover { background-color:#388e3c; }

/* ----------------- Responsive ----------------- */
@media (max-width: 768px) {
  .content-container { padding: 2rem 1.5rem; margin: 2rem 1rem; }
  .ergebnis-header h1 { font-size: 2rem; }
  .ergebnis-main p { font-size: 1.1rem; }
  .ergebnis-symbol { width:70px; }
  .ergebnis-symbol.sun { width:90px; }
}

@media (max-width: 480px) {
  .content-container { padding: 1.5rem 1rem; margin: 1.5rem 0.5rem; }
  .ergebnis-header h1 { font-size: 1.6rem; }
  .ergebnis-main p { font-size: 1rem; }
  .ergebnis-symbol { width:50px; }
  .ergebnis-symbol.sun { width:70px; }
}