/* aqua-rebell.de – gezeichnetes Aquascape (vorlagen/_aquascape.html, Ebenen aus einlesen/aquascape.py).
   Bewegung nur mit laufendem Skript (.ist-aktiv setzt js/aquascape.js) – ohne JavaScript steht ein ruhiges Bild,
   das sich nicht anhalten lassen muss. Pflanzen wiegen sich per Scherung vom Grund aus (Fuß bleibt stehen). */

.aquascape { margin: 0 0 24px; }
/* Startseite, vor dem Breaker-Banner (build.py vor_breaker), im Raster der Kacheln darüber. Rahmen wie die Bildboxen
   des Themes („.seo-grid-wrapper .seo-grid-right-wrapper“ in aquasabi.css, Wunsch User 05.10.2026: Bilder haben einen
   kleineren Abstand nach außen): weiß, Innenabstand 5 px (768–1023 px: 10 px), 5 px graue Kante unten – ohne deren
   Hover-Effekt. Spalte unter 768 px mit 5 px wie die Kacheln (.pl/.pr). */
.aq-rahmen { padding: 5px; background: #fff; border-bottom: 5px solid #e5e5e5; }
.aq-rahmen .aquascape { margin: 0; }
@media (max-width: 1023px) {
  .aq-rahmen { padding: 10px; }
}
@media (max-width: 767px) {
  .aq-start .aq-spalte { padding-left: 5px; padding-right: 5px; }   /* Theme-CSS lädt danach: zwei Klassen */
  .aq-rahmen { padding: 5px; }
}
.aq-szene {
  position: relative; width: 100%; aspect-ratio: 1600 / 764; overflow: hidden; background: #9fdcfc;
  contain: layout paint; touch-action: pan-y;
}
.aq-ebene, .aq-schwarm { position: absolute; pointer-events: none; }
.aq-ebene img { display: block; width: 100%; height: 100%; max-width: none; }
.aq-schwarm { inset: 0; }
.aq-fisch { position: absolute; left: 0; top: 0; height: auto; max-width: none; will-change: transform; }
/* Futterflocken: Größe mit der Szene (--aq-k = Pixel je Szeneneinheit, setzt js/aquascape.js), mindestens sichtbar */
.aq-futter { position: absolute; inset: 0; }
.aq-flocke {
  position: absolute; left: 0; top: 0; width: max(2px, calc(var(--aq-k, .8) * 7px));
  height: max(2px, calc(var(--aq-k, .8) * 5px)); background: #d98b3a; will-change: transform;
}
.aq-flocke.ist-dunkel { width: max(2px, calc(var(--aq-k, .8) * 5px)); height: max(2px, calc(var(--aq-k, .8) * 6px));
  background: #b5562a; }
.aq-flocke[hidden] { display: none; }
.aquascape.hat-schwarm .aq-fische-statisch { display: none; }

.aquascape.ist-aktiv .aq-wiegen {
  transform-origin: 50% 100%; will-change: transform;
  animation: aq-wiegen var(--dauer, 8s) ease-in-out infinite alternate;
}
.aquascape.ist-aktiv .aq-welle { will-change: transform; animation: aq-welle var(--dauer, 16s) linear infinite; }
.aquascape.ist-aktiv .aq-atmen { animation: aq-atmen var(--dauer, 7s) ease-in-out infinite alternate; }
.aquascape.ist-angehalten .aq-ebene { animation-play-state: paused; }

@keyframes aq-wiegen {
  from { transform: skewX(calc(var(--winkel, .5) * -1deg)); }
  to { transform: skewX(calc(var(--winkel, .5) * 1deg)); }
}
@keyframes aq-welle { to { transform: translateX(-50%); } }
@keyframes aq-atmen { from { opacity: .55; } to { opacity: 1; } }

/* Algenblüte: grünes Wasser und Algenflecken auf der Scheibe; Deckkraft setzt js/aquascape.js (0 = klar) */
.aq-algen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse at 6% 18%, rgba(74, 122, 22, .9), rgba(74, 122, 22, 0) 9%),
    radial-gradient(ellipse at 22% 70%, rgba(66, 114, 20, .85), rgba(66, 114, 20, 0) 11%),
    radial-gradient(ellipse at 37% 30%, rgba(84, 132, 28, .8), rgba(84, 132, 28, 0) 8%),
    radial-gradient(ellipse at 51% 84%, rgba(62, 108, 18, .85), rgba(62, 108, 18, 0) 12%),
    radial-gradient(ellipse at 63% 22%, rgba(80, 128, 26, .8), rgba(80, 128, 26, 0) 9%),
    radial-gradient(ellipse at 74% 58%, rgba(70, 118, 22, .85), rgba(70, 118, 22, 0) 10%),
    radial-gradient(ellipse at 88% 30%, rgba(78, 126, 24, .8), rgba(78, 126, 24, 0) 9%),
    radial-gradient(ellipse at 95% 78%, rgba(64, 110, 20, .85), rgba(64, 110, 20, 0) 11%),
    radial-gradient(ellipse at 14% 45%, rgba(86, 134, 30, .75), rgba(86, 134, 30, 0) 7%),
    radial-gradient(ellipse at 44% 55%, rgba(76, 124, 24, .75), rgba(76, 124, 24, 0) 7%),
    radial-gradient(ellipse at 81% 90%, rgba(68, 116, 22, .8), rgba(68, 116, 22, 0) 8%),
    radial-gradient(ellipse at 30% 10%, rgba(88, 136, 30, .7), rgba(88, 136, 30, 0) 7%),
    linear-gradient(rgba(104, 150, 40, .4), rgba(78, 122, 28, .55));
}

/* Hinweis und Knöpfe liegen im Bild (Wunsch User 05.10.2026) */
.aquascape { position: relative; }
.aq-hinweis {
  position: absolute; left: 8px; top: 8px; z-index: 2; max-width: min(460px, 72%); margin: 0; padding: 8px 12px;
  border-radius: 4px; background: rgba(20, 32, 12, .8); color: #fff; font-size: 14px; line-height: 1.4;
}
.aq-hinweis[hidden], .aq-tipp[hidden] { display: none; }
.aq-hinweis p { margin: 0; font-size: inherit; line-height: inherit; }   /* Theme-Absätze: Zeilenhöhe 2 */
.aq-hinweis .aq-tipp {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .3); font-weight: 600;
}
.aq-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.aq-steuerung { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; }
/* #main-wrapper: das alte Theme setzt „#main-wrapper button“ gelb mit weißer Schrift, volle Breite, und ändert bei
   :hover/:focus die Schriftfarbe auf Weiß und bei :active Innenabstand und Schatten (mit !important) – auf den hellen
   Knöpfen verschwand die Schrift. Hier kleine, halbtransparente Bedienknöpfe in jedem Zustand. */
#main-wrapper .aq-knopf, #main-wrapper .aq-knopf:hover, #main-wrapper .aq-knopf:focus, #main-wrapper .aq-knopf:active {
  display: inline-flex; align-items: center; width: auto; height: auto; min-height: 32px; margin: 0;
  padding: 0 12px !important; border: 1px solid rgba(47, 58, 62, .35); border-radius: 4px; line-height: 1.2;
  background: rgba(255, 255, 255, .88); color: #2f3a3e; font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25) !important; text-shadow: none; cursor: pointer; touch-action: manipulation;
}
#main-wrapper .aq-knopf:hover { background: #fff; }
#main-wrapper .aq-knopf:active { background: #eef3ea; box-shadow: none !important; }
#main-wrapper .aq-knopf[aria-disabled="true"] { background: rgba(255, 255, 255, .6); color: #5b676c; cursor: default; }
.aq-knopf:focus-visible { outline: 3px solid #ffc018; outline-offset: 2px; }
.aq-knopf[hidden] { display: none; }

@media (max-width: 600px) {
  .aq-hinweis { left: 6px; top: 6px; max-width: 78%; padding: 5px 8px; font-size: 11px; line-height: 1.35; }
  .aq-steuerung { right: 6px; bottom: 6px; gap: 4px; }
  #main-wrapper .aq-knopf, #main-wrapper .aq-knopf:hover, #main-wrapper .aq-knopf:focus,
  #main-wrapper .aq-knopf:active { min-height: 28px; padding: 0 9px !important; font-size: 12px; }
}
@media (max-width: 480px) {
  /* kleine Szene (≈ 180 px hoch): Knöpfe knapp, aber mindestens 24 px (WCAG 2.5.8) */
  .aq-steuerung { right: 4px; bottom: 4px; }
  #main-wrapper .aq-knopf, #main-wrapper .aq-knopf:hover, #main-wrapper .aq-knopf:focus,
  #main-wrapper .aq-knopf:active { min-height: 24px; padding: 0 7px !important; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .aquascape .aq-ebene { animation: none !important; }
}