/* v9 — Light Skeuomorphism: greifbare Karten, weiche Tiefe. Karten schweben einmal ein und bleiben stehen. */
.schwebe { margin-top: 2.5rem; display: grid; gap: 1rem; max-width: 22rem; }
.schwebe__karte {
  position: relative; margin: 0; padding: 1rem 1.2rem 1rem 2.6rem; border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF, #F7F2EA);
  border: 1px solid #E7DECF;
  box-shadow: 0 2px 0 #E7DECF, 0 22px 36px -22px rgba(43, 38, 32, .5);
  font-size: .9375rem; line-height: 1.45; color: #4A423A;
}
.schwebe__karte b { display: block; font-weight: 500; color: var(--tinte); }
.schwebe__punkt { position: absolute; left: 1.05rem; top: 1.3rem; width: .7rem; height: .7rem; border-radius: 50%; }
.schwebe__karte--offen .schwebe__punkt { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(232, 163, 61, .22); }
.schwebe__karte--klar  .schwebe__punkt { background: #A9D1AE; box-shadow: 0 0 0 4px rgba(169, 209, 174, .3); }
.schwebe__notiz {
  margin: -.25rem 0 0 1.2rem; font: 400 1.35rem/1.2 'Caveat', 'Bradley Hand', cursive;
  color: var(--ozean); rotate: -3deg;
  justify-self: start; padding: .15rem .7rem; border-radius: 10px;
  background: rgba(251, 248, 243, .88);
}
/* Einmal einschweben, dann Ruhe */
.schwebe__karte, .schwebe__notiz { animation: einschweben .8s var(--ease) both; }
.schwebe__karte--offen { animation-delay: .6s; }
.schwebe__notiz        { animation-delay: 1s; }
.schwebe__karte--klar  { animation-delay: 1.3s; }
@keyframes einschweben { from { opacity: 0; translate: 0 14px; } }
@media (min-width: 64rem) {
  .schwebe { position: absolute; top: clamp(3rem, 10vh, 6rem); right: 0; margin: 0; width: 20rem; }
  .schwebe__karte--offen { rotate: 1.5deg; }
  .schwebe__karte--klar  { rotate: -1.5deg; margin-left: 2.5rem; }
}
/* Mobil: offene Karte direkt unter die Hauptzeile, zweite Karte ausblenden */
@media (max-width: 63.99rem) {
  .heldbild__text { display: flex; flex-direction: column; }
  .heldbild__text .auge { order: 0; }
  .held__titel      { order: 1; }
  .schwebe          { order: 2; margin-top: 1.5rem; }
  .heldbild__lede   { order: 3; }
  .heldbild .tasten { order: 4; }
  .schwebe__karte--klar { display: none; }
}
/* Tablet: Text und Foto untereinander, damit nichts über dem Foto unlesbar wird */
@media (min-width: 48.01rem) and (max-width: 63.99rem) {
  .heldbild { display: flex; flex-direction: column-reverse; min-height: 0; }
  .bildplatz { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; }
  .bildplatz::after { display: none; }
  .heldbild__text { width: 100%; padding-block: 3rem 2.5rem; }
}
/* Knöpfe greifbar */
.btn--voll { box-shadow: 0 3px 0 #16130F, 0 12px 20px -12px rgba(43, 38, 32, .6); transition: transform .15s, box-shadow .15s, background-color .2s; }
.btn--voll:hover { transform: translateY(2px); box-shadow: 0 1px 0 #16130F, 0 6px 12px -8px rgba(43, 38, 32, .6); }
.btn--glas { background: linear-gradient(180deg, #FFFFFF, #F3EDE3); border-color: #E3D9C9; box-shadow: 0 2px 0 #E3D9C9, 0 10px 20px -12px rgba(43, 38, 32, .35); }
/* Karten weiter unten ebenfalls greifbar */
.kachel, .karte { background: linear-gradient(180deg, #FFFFFF, #F8F3EB); border: 1px solid #E7DECF; box-shadow: 0 2px 0 #E7DECF, 0 18px 30px -22px rgba(43, 38, 32, .45); }
/* Wortmarke im Kopf */
.wort img { display: block; height: 1.9rem; width: auto; }
@media (prefers-reduced-motion: reduce) {
  .schwebe__karte, .schwebe__notiz { animation: none; }
  .btn--voll { transition: none; }
}