/* ============================================================
   Der Hausmeister Haake · Knopf, Bewegung und Symbole
   Wird NACH style.css und dark.css geladen.
   ============================================================ */

/* ============================================================
   1 · HAUPTKNOPF
   ============================================================ */
.knopf-gruen {
  --kn-oben:         #2E7D32;
  --kn-unten:        #1B5E20;
  --kn-oben-hover:   #35913A;
  --kn-unten-hover:  #1F6B24;
  --kn-kante:        #8BC34A;
  --kn-kante-hover:  #A6D467;
  --kn-text:         #FFFFFF;
  --kn-kreis:        #9CCC65;
  --kn-kreis-hover:  #AFDA79;
  --kn-symbol:       #12300E;
  --kn-glanz:        rgba(255, 255, 255, .20);
  --kn-schatten:       0 5px 14px rgba(27, 94, 32, .26);
  --kn-schatten-hover: 0 9px 22px rgba(27, 94, 32, .32);
  --kn-schatten-aktiv: 0 2px 6px rgba(27, 94, 32, .30);
  --kn-fokus:        #1E3D2A;

  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; max-width: 100%; box-sizing: border-box;
  padding: 14px 20px;
  border: 1.5px solid var(--kn-kante);
  border-radius: 16px;
  background-color: var(--kn-unten);
  background-image: linear-gradient(180deg, var(--kn-oben) 0%, var(--kn-unten) 100%);
  color: var(--kn-text);
  font-weight: 700; font-size: 1rem; line-height: 1.25; letter-spacing: .01em;
  text-align: center; text-decoration: none; white-space: normal;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  box-shadow: var(--kn-schatten);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* feiner Glanzbogen */
.knopf-gruen::before {
  content: ""; position: absolute; inset: 1px 1px auto 1px; height: 48%;
  border-radius: 15px 15px 60% 60% / 15px 15px 16px 16px;
  background: linear-gradient(180deg, var(--kn-glanz) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none; z-index: 0;
}
.knopf-gruen > * { position: relative; z-index: 1; }
.knopf-gruen .knopf-text { min-width: 0; }

.knopf-gruen .knopf-kreis {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--kn-kreis); color: var(--kn-symbol);
  transition: background-color .18s ease, transform .18s ease;
}
.knopf-gruen .knopf-kreis svg { display: block; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.knopf-gruen:hover {
  background-color: var(--kn-unten-hover);
  background-image: linear-gradient(180deg, var(--kn-oben-hover) 0%, var(--kn-unten-hover) 100%);
  border-color: var(--kn-kante-hover);
  box-shadow: var(--kn-schatten-hover);
  transform: translateY(-1px);
}
.knopf-gruen:hover .knopf-kreis { background: var(--kn-kreis-hover); }
.knopf-gruen:hover .knopf-kreis--pfeil { transform: translate(1px, -1px); }
.knopf-gruen:active { transform: translateY(1px); box-shadow: var(--kn-schatten-aktiv); }
.knopf-gruen:active .knopf-kreis--pfeil { transform: none; }
.knopf-gruen:focus-visible { outline: 3px solid var(--kn-fokus); outline-offset: 3px; }

:root[data-theme="dark"] .knopf-gruen {
  --kn-oben: #A5D65C; --kn-unten: #4CAF50;
  --kn-oben-hover: #B3E06C; --kn-unten-hover: #57BC5B;
  --kn-kante: rgba(12, 30, 15, .30); --kn-kante-hover: rgba(12, 30, 15, .40);
  --kn-text: #FFFFFF; --kn-kreis: #0C1E0F; --kn-kreis-hover: #14311A; --kn-symbol: #C9E9A0;
  --kn-glanz: rgba(255, 255, 255, .26);
  --kn-schatten:       0 5px 16px rgba(88, 184, 56, .26), 0 0 24px rgba(88, 184, 56, .16);
  --kn-schatten-hover: 0 9px 26px rgba(88, 184, 56, .34), 0 0 34px rgba(88, 184, 56, .22);
  --kn-schatten-aktiv: 0 2px 8px rgba(88, 184, 56, .30);
  --kn-fokus: #D6E4D2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knopf-gruen {
    --kn-oben: #A5D65C; --kn-unten: #4CAF50;
    --kn-oben-hover: #B3E06C; --kn-unten-hover: #57BC5B;
    --kn-kante: rgba(12, 30, 15, .30); --kn-kante-hover: rgba(12, 30, 15, .40);
    --kn-text: #FFFFFF; --kn-kreis: #0C1E0F; --kn-kreis-hover: #14311A; --kn-symbol: #C9E9A0;
    --kn-glanz: rgba(255, 255, 255, .26);
    --kn-schatten:       0 5px 16px rgba(88, 184, 56, .26), 0 0 24px rgba(88, 184, 56, .16);
    --kn-schatten-hover: 0 9px 26px rgba(88, 184, 56, .34), 0 0 34px rgba(88, 184, 56, .22);
    --kn-schatten-aktiv: 0 2px 8px rgba(88, 184, 56, .30);
    --kn-fokus: #D6E4D2;
  }
}
@media (max-width: 420px) {
  .knopf-gruen { gap: 10px; padding: 13px 16px; font-size: .95rem; }
  .knopf-gruen .knopf-kreis { width: 26px; height: 26px; }
  .knopf-gruen .knopf-kreis svg { width: 15px; height: 15px; }
}
@media (forced-colors: active) {
  .knopf-gruen { border: 2px solid ButtonText; box-shadow: none; }
  .knopf-gruen::before { display: none; }
  .knopf-gruen .knopf-kreis { border: 1px solid ButtonText; background: transparent; }
  .knopf-gruen svg { stroke: ButtonText; }
}

/* ============================================================
   2 · BEWEGUNG
   ============================================================ */

/* Sanftes Einblenden beim Scrollen – Grundzustand ist sichtbar */
.zeigt-sich { opacity: 1; transform: none; }
@keyframes haake-einblenden {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .zeigt-sich {
      animation: haake-einblenden 500ms cubic-bezier(.22, .61, .36, 1) both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
    .zeigt-sich.verzug-1 { animation-range: entry 12% cover 34%; }
    .zeigt-sich.verzug-2 { animation-range: entry 16% cover 38%; }
    .zeigt-sich.verzug-3 { animation-range: entry 20% cover 42%; }
  }
}

/* Schwebende Blätter */
.blaetter {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  z-index: 0; contain: strict;
  --blatt-farbe: var(--gruen);
  --blatt-faktor: 1;
}
:where(header, main, section, footer, nav) { position: relative; z-index: 1; }

.blaetter span {
  position: absolute; top: 0; left: var(--links);
  width: var(--groesse); height: var(--groesse);
  opacity: calc(var(--deckkraft) * var(--blatt-faktor));
  translate: 0 -15vh;
  animation: haake-blatt-fall var(--dauer) linear infinite;
  animation-delay: var(--verzoegerung);
}
.blaetter span::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--blatt-farbe);
  border-radius: 0 100% 0 100%;
  animation: haake-blatt-pendeln var(--pendel) ease-in-out infinite alternate,
             haake-blatt-drehen var(--dreh) linear infinite;
  animation-delay: var(--verzoegerung), var(--verzoegerung);
}
@keyframes haake-blatt-fall    { from { translate: 0 -15vh; } to { translate: 0 115vh; } }
@keyframes haake-blatt-pendeln { from { translate: -16px 0; } to { translate: 16px 0; } }
@keyframes haake-blatt-drehen  { from { rotate: 0deg; } to { rotate: 360deg; } }

.blaetter span:nth-child(1) { --groesse: 14px; --links:  8%; --dauer: 34s; --pendel: 7s;   --dreh: 22s; --verzoegerung:  -4s; --deckkraft: .16; }
.blaetter span:nth-child(2) { --groesse:  9px; --links: 22%; --dauer: 27s; --pendel: 5.5s; --dreh: 17s; --verzoegerung: -13s; --deckkraft: .12; }
.blaetter span:nth-child(3) { --groesse: 18px; --links: 39%; --dauer: 40s; --pendel: 9s;   --dreh: 30s; --verzoegerung: -21s; --deckkraft: .10; }
.blaetter span:nth-child(4) { --groesse: 11px; --links: 54%; --dauer: 23s; --pendel: 6s;   --dreh: 15s; --verzoegerung:  -8s; --deckkraft: .20; }
.blaetter span:nth-child(5) { --groesse: 16px; --links: 68%; --dauer: 36s; --pendel: 8s;   --dreh: 26s; --verzoegerung: -30s; --deckkraft: .13; }
.blaetter span:nth-child(6) { --groesse:  8px; --links: 81%; --dauer: 20s; --pendel: 4.5s; --dreh: 13s; --verzoegerung: -16s; --deckkraft: .22; }
.blaetter span:nth-child(7) { --groesse: 13px; --links: 93%; --dauer: 31s; --pendel: 7.5s; --dreh: 20s; --verzoegerung: -25s; --deckkraft: .15; }

:root[data-theme="dark"] .blaetter { --blatt-farbe: var(--gruen-dunkel); --blatt-faktor: 1.5; }
:root[data-theme="dark"] .blaetter span::before { filter: drop-shadow(0 0 4px rgba(88, 184, 56, .55)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blaetter { --blatt-farbe: var(--gruen-dunkel); --blatt-faktor: 1.5; }
  :root:not([data-theme="light"]) .blaetter span::before { filter: drop-shadow(0 0 4px rgba(88, 184, 56, .55)); }
}
@media (max-width: 600px) { .blaetter span:nth-child(n + 5) { display: none; } }

/* Karten-Hover */
.karte { transition: transform 170ms ease-out, border-color 170ms ease-out, box-shadow 170ms ease-out; }
.karte:hover, .karte:focus-within {
  transform: translateY(-3px);
  border-color: var(--gruen);
  box-shadow: 0 6px 18px -8px rgba(30, 61, 42, .35);
}
@media (hover: none) { .karte:hover { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .zeigt-sich { animation: none !important; opacity: 1 !important; transform: none !important; }
  .blaetter { display: none !important; }
  .karte { transition: border-color 170ms ease-out; }
  .karte:hover, .karte:focus-within { transform: none; }
}

/* ============================================================
   3 · SYMBOLE UND UMSCHALTER
   ============================================================ */
.licht-schalter {
  position: relative;
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; flex: none; padding: 0;
  border: 1px solid var(--linie); border-radius: 12px;
  background: var(--flaeche); color: var(--gruen-dunkel); overflow: hidden;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.licht-schalter:hover {
  background: var(--gruen-blass); border-color: var(--gruen);
  box-shadow: 0 2px 10px rgba(30, 61, 42, .10);
}
.licht-schalter:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

.licht-schalter img {
  grid-area: 1 / 1;
  width: 34px; height: 34px; border-radius: 8px;
  opacity: 0; visibility: hidden; transform-origin: 50% 50%;
  transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.32, .52, 1), visibility 0s linear .3s;
}
.licht-schalter .sonne { transform: rotate(-45deg) scale(.55); }
.licht-schalter .mond  { transform: rotate(45deg) scale(.55); }

/* Der Knopf zeigt den AKTUELLEN Modus – so passt die Grafik
   farblich immer zum Umfeld (helle Sonne auf hellem Kopf,
   dunkler Mond auf dunklem Kopf). */
.licht-schalter .sonne {
  opacity: 1; visibility: visible; transform: rotate(0deg) scale(1);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.32, .52, 1), visibility 0s linear 0s;
}
:root[data-theme="dark"] .licht-schalter .sonne {
  opacity: 0; visibility: hidden; transform: rotate(-45deg) scale(.55);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.32, .52, 1), visibility 0s linear .3s;
}
:root[data-theme="dark"] .licht-schalter .mond {
  opacity: 1; visibility: visible; transform: rotate(0deg) scale(1);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.32, .52, 1), visibility 0s linear 0s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .licht-schalter .sonne {
    opacity: 0; visibility: hidden; transform: rotate(-45deg) scale(.55);
  }
  :root:not([data-theme="light"]) .licht-schalter .mond {
    opacity: 1; visibility: visible; transform: rotate(0deg) scale(1);
    transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.32, .52, 1), visibility 0s linear 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .licht-schalter, .licht-schalter img { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .licht-schalter img { transform: none !important; }
}