/* Tutorial „Skillung teilen und laden“: Grundaussehen kommt aus ../chip-tutorial/tut.css, hier nur die echten Fenster und Dateien */
.fen { position: absolute; overflow: hidden; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .65); z-index: 2; transition: opacity .45s, transform .45s; }
.fen img { position: absolute; display: block; max-width: none; height: auto; image-rendering: auto; }
.fen.auf { animation: fen-auf .55s cubic-bezier(.2, .9, .3, 1.15); }
.fen.weg { opacity: 0; transform: scale(.96); }
@keyframes fen-auf { from { opacity: 0; transform: translateY(24px) scale(.94); } }
.hl { z-index: 6; }
.hl.weg { opacity: 0; transition: opacity .4s; }
.chip.gross { font-size: 34px; padding: 14px 26px; white-space: nowrap; }
.datei { position: absolute; z-index: 8; width: 180px; height: 210px; border-radius: 14px 44px 14px 14px; display: grid; place-items: center; align-content: center; gap: 10px;
  background: linear-gradient(160deg, #1b2a2e, #0a1214); border: 2px solid var(--gold); box-shadow: 0 0 30px rgba(245, 197, 24, .45), 0 20px 40px rgba(0, 0, 0, .6); animation: rein .7s cubic-bezier(.2, .9, .3, 1.2); }
.datei b { font: 900 34px var(--f); color: var(--gold2); }
.datei span { font: 700 18px var(--f); color: #dfe6e8; text-align: center; padding: 0 10px; word-break: break-all; }
.datei.klein { transform: scale(.7); transform-origin: 0 0; }