/* ---------- Shop (skyfunity.de/shop) - baut auf stil.css auf ---------- */
.shop-seite .band { padding: clamp(3rem, 7vw, 5rem) 16px; }
.shop-navi a { white-space: nowrap; }

.shop-kopf { padding-top: clamp(7rem, 14vw, 9rem) !important; }
.shop-ueber { display: inline-flex; align-items: center; gap: .5rem; font: 700 .85rem/1 var(--kopf); letter-spacing: .08em; text-transform: uppercase; color: var(--rosa); margin-bottom: 1rem; }

/* Name */
.namensfeld { margin-top: 2rem; max-width: 520px; }
.namensfeld label { display: block; font: 700 .95rem/1.2 var(--kopf); margin-bottom: .6rem; }
.namenszeile { display: flex; align-items: center; gap: .75rem; background: rgba(20, 6, 44, .85); border: var(--rand); box-shadow: var(--schatten); padding: .5rem .6rem; }
.namenskopf { width: 48px; height: 48px; image-rendering: pixelated; flex: none; background: var(--violett); }
.namenszeile input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--hell); font: 600 1.25rem/1.2 var(--text); padding: .4rem .2rem; }
.namenszeile input:focus { outline: none; }
.namenszeile:focus-within { border-color: var(--pink); }
.namenshinweis { margin-top: .6rem; font-size: .92rem; color: var(--hell-leise); min-height: 1.5em; }
.namenshinweis.ok { color: var(--gruen); }
.namenshinweis strong { color: var(--hell); }

.shop-fehler { margin-top: 1.5rem; max-width: 640px; display: flex; gap: .7rem; align-items: flex-start; background: rgba(255, 84, 112, .14); border: 2px solid #ff5470; box-shadow: var(--schatten); padding: .9rem 1rem; font-weight: 600; }
.shop-fehler i { color: #ff5470; margin-top: .2rem; }

/* Kategorien */
.kat-titel { display: flex; align-items: center; gap: .7rem; font: 800 clamp(1.4rem, 3vw, 2rem)/1.15 var(--kopf); }
.kat-titel i { color: var(--pink); font-size: .85em; }
.kat-text { margin-top: .6rem; max-width: 70ch; color: var(--hell-leise); }

.pakete { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; align-items: start; }
/* Kauf-Knopf direkt unter dem Preis, damit er nicht von aufgeklappten Nachbarn nach unten rutscht */
.paket { display: flex; flex-direction: column; background: rgba(20, 6, 44, .82); border: 2px solid color-mix(in srgb, var(--akzent) 55%, transparent); box-shadow: var(--schatten); transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease; }
.paket:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--stadt); }
.paket.gewaehlt { outline: 3px solid var(--akzent); outline-offset: 3px; }
.paket-bild { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 2px solid color-mix(in srgb, var(--akzent) 40%, transparent); background: var(--violett); }
.paket-inhalt { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.paket h3 { font: 800 1.15rem/1.2 var(--kopf); color: var(--akzent); }
.preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.preis .jetzt { font: 800 1.5rem/1 var(--kopf); }
.preis .vorher { color: var(--hell-leise); font-size: .95rem; }
.preis .rabatt { background: var(--pink); color: var(--stadt); font-weight: 800; font-size: .8rem; padding: .15rem .45rem; }
.besitz { font-size: .92rem; font-weight: 600; color: var(--gruen); }

.kaufen { display: inline-flex; justify-content: center; align-items: center; gap: .55rem; background: var(--pink); color: var(--stadt); border: 0; font: 800 1rem/1 var(--kopf); padding: .85rem 1rem; box-shadow: 3px 3px 0 var(--lila); cursor: pointer; transition: background .15s ease, transform .1s ease; }
.kaufen:hover { background: var(--rosa); }
.kaufen:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lila); }
.kaufen:disabled { background: #3a2458; color: var(--hell-leise); box-shadow: none; cursor: not-allowed; transform: none; }
.paket.besessen { opacity: .62; }
.paket.besessen:hover { transform: none; box-shadow: var(--schatten); }

.paket-details summary { cursor: pointer; font-weight: 700; color: var(--rosa); font-size: .95rem; list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
.paket-details summary::-webkit-details-marker { display: none; }
.paket-details summary::before { content: "\f078"; font: 900 .75rem/1 "Font Awesome 6 Free"; transition: transform .2s ease; }
.paket-details[open] summary::before { transform: rotate(180deg); }
.paket-text { margin-top: .8rem; max-height: 60vh; overflow: auto; font-size: .92rem; }
.paket-text > div { max-width: none !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.paket-text img { max-width: 100%; height: auto; }

/* Hinweise und Danke */
.hinweise { margin-top: 1.2rem; display: grid; gap: .8rem; list-style: none; }
.hinweise li { position: relative; padding-left: 1.4rem; color: var(--hell-leise); }
.hinweise li::before { content: "›"; position: absolute; left: 0; color: var(--pink); font-weight: 800; }
.hinweise strong { color: var(--hell); }
.hinweise a { color: var(--rosa); }

.danke { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.danke-knoepfe { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.knopf-shop, .knopf-leise { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 800 1rem/1 var(--kopf); padding: .9rem 1.2rem; }
.knopf-shop { background: var(--pink); color: var(--stadt); box-shadow: 3px 3px 0 var(--lila); }
.knopf-leise { border: var(--rand); color: var(--hell); }

@media (max-width: 640px) {
  .shop-navi a:first-child { display: none; }
  .pakete { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .paket, .kaufen { transition: none; }
}

/* Gratis-Dreh: Knopf in der Navigation und Hinweis-Karte im Kopf */
.shop-navi .navi-gratis { display: inline-flex; align-items: center; gap: .45rem; background: linear-gradient(100deg, #ffd27a, #ff9a4d); color: #2a0d12; border: 0; font: 800 .9rem/1 var(--text); padding: .55rem .8rem; margin-right: .3rem; cursor: pointer; box-shadow: 3px 3px 0 var(--stadt); }
.shop-navi .navi-gratis:hover { filter: brightness(1.08); }
.gratis-teaser { margin-top: 1.6rem; width: 100%; max-width: 520px; display: flex; align-items: center; gap: .9rem; text-align: left; cursor: pointer; color: var(--hell);
  background: linear-gradient(100deg, rgba(255, 210, 122, .16), rgba(255, 63, 180, .14)); border: 2px solid rgba(255, 210, 122, .55); box-shadow: var(--schatten); padding: .8rem 1rem; transition: transform .15s ease; }
.gratis-teaser:hover { transform: translate(-2px, -2px); }
.gt-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(135deg, #ffd27a, #ff9a4d); color: #2a0d12; font-size: 1.25rem; }
.gt-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.gt-text strong { font: 800 1rem/1.2 var(--kopf); }
.gt-text span { font-size: .9rem; color: var(--hell-leise); }
.gt-pfeil { color: #ffd27a; }
@media (max-width: 640px) { .shop-navi .navi-gratis { padding: .5rem .6rem; } }
@media (prefers-reduced-motion: reduce) { .gratis-teaser { transition: none; } }