/* ---------- E-Mail-Hosting: animierte Grafik im Seitenkopf (.kg-mail) statt der gemeinsamen .hg (Andrea Tissen, 2026-10-22:
   „unterschiedliche Headergrafiken die animiert sind“). Posteingang als Mail-Programm mit Ordnerleiste, neue E-Mails gleiten
   nacheinander hinein, eine Spam-Mail fliegt heran, prallt am Schutzschild ab und fällt aussortiert nach unten; Chip mit
   eigener Domain, Archiv-Kachel. Größen in cqi (skaliert mit der Grafik). Bewegung einmalig bzw. endlich, bei „Bewegung
   reduzieren“ und ohne Animation sofort der Endzustand. Rein dekorativ (aria-hidden) ---------- */
.kg-mail { position: relative; isolation: isolate; width: 100%; max-width: 540px; aspect-ratio: 6 / 5; margin-inline: auto; container-type: inline-size; color: var(--ink); }
.kg-mail .icon { width: 1em; height: 1em; }

/* Verlaufsfläche rechts mit geordneten Vierecken */
.kg-mail__flaeche { position: absolute; inset: 6% 0 10% 30%; z-index: -1; overflow: hidden; border-radius: var(--radius-l); background: var(--gradient-diag); box-shadow: var(--shadow-l); }
.kg-mail__flaeche .kachelfeld { right: 0; bottom: 0; --spalten: 12; --zeilen: 9; --blende: linear-gradient(315deg, #000 10%, transparent 70%); }

/* Mail-Programm */
.kg-mail__fenster {
  position: absolute; left: 0; top: 15%; width: 73%;
  overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-l);
}
.kg-mail__kopf { display: flex; align-items: center; gap: 2.2cqi; padding: 3cqi 3.6cqi; border-bottom: 1px solid var(--line); }
.kg-mail__kopficon { display: grid; place-items: center; width: 7cqi; aspect-ratio: 1; flex: none; border-radius: 2cqi; background: var(--gradient); color: var(--white); font-size: 3.6cqi; }
.kg-mail__titel { flex: 1; font-size: clamp(.75rem, 3.3cqi, 1.0625rem); font-weight: 700; line-height: 1.2; }
.kg-mail__suche { width: 18cqi; height: 4.6cqi; border-radius: 99px; background: var(--tile-hell); }
.kg-mail__body { display: flex; }
.kg-mail__ordner { display: grid; align-content: start; gap: 2cqi; padding: 3cqi 2.4cqi; border-right: 1px solid var(--line); background: var(--bg); }
.kg-mail__ordner li { display: grid; place-items: center; width: 7cqi; aspect-ratio: 1; border-radius: 2cqi; color: var(--lavender); font-size: 3.4cqi; }
.kg-mail__ordner .is-aktiv { background: var(--tile-2); color: var(--primary); }
.kg-mail__liste { display: grid; flex: 1; gap: 1.6cqi; padding: 3cqi; }
.kg-mail__liste li { display: flex; align-items: center; gap: 2.4cqi; padding: 2cqi 2.4cqi; border-radius: 2.2cqi; background: var(--bg); }
.kg-mail__liste li:first-child { background: var(--tile-hell); box-shadow: inset 3px 0 0 var(--accent); }
.kg-mail__brief { display: grid; place-items: center; width: 7.4cqi; aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--white); color: var(--primary); font-size: 3.2cqi; box-shadow: var(--shadow-s); }
.kg-mail__zeilen { display: grid; flex: 1; gap: 1.3cqi; }
.kg-mail__zeilen i { display: block; height: 1.4cqi; border-radius: 99px; background: #c9d6ec; }
.kg-mail__zeilen i:first-child { width: 58%; background: #9fb3d6; }
.kg-mail__zeilen i + i { width: 86%; }
.kg-mail__neu { width: 2cqi; aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--accent); }

/* Chip mit eigener Domain */
.kg-mail__domain {
  position: absolute; left: 7%; top: 2%;
  display: flex; align-items: center; gap: 1.8cqi; padding: 1.4cqi 3.2cqi 1.4cqi 1.4cqi;
  border-radius: 99px; background: var(--white); box-shadow: var(--shadow);
  font-size: clamp(.6875rem, 2.9cqi, .9375rem); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.kg-mail__domain b { color: var(--accent-700); font-weight: 700; }
.kg-mail__at { display: grid; place-items: center; width: 6.4cqi; aspect-ratio: 1; border-radius: 50%; background: var(--gradient); color: var(--white); font-size: 3.4cqi; }

/* Schutzschild auf der Fläche, daneben die aussortierte Spam-Mail */
.kg-mail__schild {
  position: absolute; left: 62%; top: 16%;
  display: grid; place-items: center; width: 15cqi; aspect-ratio: 1;
  border-radius: 4.2cqi; background: var(--white); box-shadow: var(--shadow-l); color: var(--primary); font-size: 7.4cqi;
}
.kg-mail__schild::after { content: ""; position: absolute; inset: -1.6cqi; border: 2px solid var(--hell); border-radius: 5.4cqi; opacity: 0; }
.kg-mail__spam {
  position: absolute; right: 5%; top: 58%;
  display: flex; align-items: center; gap: 1.6cqi; padding: 1.6cqi 2.6cqi 1.6cqi 1.6cqi;
  border-radius: 2.6cqi; background: var(--white); box-shadow: var(--shadow);
  font-size: clamp(.625rem, 2.7cqi, .875rem); font-weight: 600; line-height: 1.2; white-space: nowrap;
  rotate: 10deg; opacity: .7;
}
.kg-mail__spam-icon { display: grid; place-items: center; width: 6cqi; aspect-ratio: 1; border-radius: 1.8cqi; background: #fdecea; color: var(--rot); font-size: 3.2cqi; }
.kg-mail__spam-x { position: absolute; right: -1.8cqi; top: -1.8cqi; display: grid; place-items: center; width: 4.6cqi; aspect-ratio: 1; border-radius: 50%; background: var(--rot); color: var(--white); font-size: 2.4cqi; box-shadow: 0 0 0 2px var(--white); }

/* Archiv-Kachel unten */
.kg-mail__archiv {
  position: absolute; left: 44%; bottom: 0;
  display: flex; align-items: center; gap: 2cqi; padding: 2cqi 3.4cqi 2cqi 2cqi;
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-l);
  font-size: clamp(.6875rem, 2.9cqi, .9375rem); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.kg-mail__archiv-icon { display: grid; place-items: center; width: 7.4cqi; aspect-ratio: 1; border-radius: 2.2cqi; background: var(--tile-2); color: var(--primary); font-size: 3.6cqi; }
.kg-mail__archiv-haken { display: grid; place-items: center; width: 4.4cqi; aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 2.2cqi; }

@media (prefers-reduced-motion: no-preference) {
  .kg-mail__flaeche { animation: kg-mail-auf .8s var(--ease) both; }
  .kg-mail__fenster { animation: kg-mail-rein .8s var(--ease) .15s both; }
  .kg-mail__domain { animation: kg-mail-pop .6s var(--ease) .5s both; }
  /* neue E-Mails gleiten von oben nacheinander in die Liste, der Punkt für „ungelesen“ blinkt zweimal */
  .kg-mail__liste li { animation: kg-mail-eingang .6s var(--ease) calc(.9s + var(--i) * .45s) both; }
  .kg-mail__neu { animation: kg-mail-pop .4s var(--ease) calc(1.2s + var(--i) * .45s) both, kg-mail-blinken 1s ease-in-out calc(1.7s + var(--i) * .45s) 2; }
  /* Spam fliegt heran, prallt am Schild ab und fällt aussortiert nach unten */
  .kg-mail__schild { animation: kg-mail-pop .6s var(--ease) 1.1s both, kg-mail-abwehr .5s var(--ease) 2.5s; }
  .kg-mail__schild::after { animation: kg-mail-ring 1s ease-out 2.5s 3; }
  .kg-mail__spam { animation: kg-mail-spam 2.2s var(--ease) 1.9s both; }
  .kg-mail__spam-x { animation: kg-mail-pop .4s var(--ease) 3.3s both; }
  .kg-mail__archiv { animation: kg-mail-pop .6s var(--ease) 3.4s both, kg-mail-schweben 2.4s ease-in-out 4s 2 alternate; }
  .kg-mail__archiv-haken { animation: kg-mail-pop .4s var(--ease) 3.9s both; }
}
@keyframes kg-mail-auf { from { opacity: 0; scale: .94; } }
@keyframes kg-mail-rein { from { opacity: 0; translate: -18px 22px; } }
@keyframes kg-mail-pop { from { opacity: 0; scale: .5; } 70% { scale: 1.08; } }
@keyframes kg-mail-eingang { from { opacity: 0; translate: 0 -14px; scale: .97; } }
@keyframes kg-mail-blinken { 50% { scale: 1.6; opacity: .5; } }
@keyframes kg-mail-abwehr { 40% { scale: 1.12; rotate: -6deg; } }
@keyframes kg-mail-ring { from { opacity: .9; scale: .9; } to { opacity: 0; scale: 1.35; } }
@keyframes kg-mail-spam {
  0% { opacity: 0; translate: 16cqi -32cqi; rotate: 6deg; }
  30% { opacity: 1; translate: 0 -32cqi; rotate: 0deg; }
  38% { opacity: 1; translate: 3cqi -33cqi; rotate: 8deg; }
  50% { opacity: 1; translate: 3cqi -33cqi; rotate: 8deg; }
  100% { opacity: .7; translate: 0 0; rotate: 10deg; }
}
@keyframes kg-mail-schweben { to { translate: 0 -6px; } }