/* ============================================================
   Crown Shop – Startseite „Wähl deine Welt“ (Stil Crown Seeds)
   Jede Welt ist eine dunkle Bühne mit ihrem Packshot-Streifen als Hintergrund
   und den Sortenfarben als --welt-* (functions.php: crownshop_welten()). Handy zuerst.
   ============================================================ */

.cs-start{--w-pad:clamp(12px,4.4vw,40px);overflow:clip}
.cs-start .cs-su{display:inline}

/* ---------- Kopf: Bühne der Sorte des Tages ---------- */
.cs-start-kopf{position:relative;isolation:isolate;padding:clamp(14px,4vw,64px) 0 clamp(18px,3vw,40px)}
.cs-start-kopf::before{content:"";position:absolute;inset:0;z-index:-1;
	background:radial-gradient(60% 45% at 50% 30%,color-mix(in srgb,var(--welt-glow) 38%,transparent),transparent 70%),
		linear-gradient(to bottom,rgba(14,16,14,.25) 0%,rgba(14,16,14,.55) 55%,var(--grund) 100%),
		var(--welt-bild,none) center 25%/cover no-repeat,var(--welt-grund)}
.cs-start-kopf__inner{max-width:var(--maxw,1240px);margin:0 auto;padding:0 var(--w-pad);display:grid;gap:clamp(16px,3vw,48px);text-align:center}
.cs-start-kopf__bild{display:flex;flex-direction:column;align-items:center;gap:12px;-webkit-tap-highlight-color:transparent}
.cs-start-kopf__pack{display:block;width:min(58vw,300px);aspect-ratio:5/7;border-radius:var(--radius-l);overflow:hidden;background:var(--nacht);
	box-shadow:0 0 0 1px rgba(224,173,82,.18),0 30px 90px -24px color-mix(in srgb,var(--welt-licht) 75%,transparent);transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.cs-start-kopf__pack img{width:100%;height:100%;object-fit:cover}
.cs-start-kopf__tag{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px}
.cs-start-kopf__tag .cs-etikett{flex-basis:100%;font-size:.68rem}
.cs-start-kopf__tagname{font-family:var(--serif);font-weight:600;letter-spacing:.06em;font-size:1.15rem;color:var(--gold-licht)}
.cs-start-kopf__tagpreis{font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
@media(hover:hover){
	.cs-start-kopf__bild:hover .cs-start-kopf__pack{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(224,173,82,.35),0 36px 110px -20px color-mix(in srgb,var(--welt-licht) 90%,transparent)}
}
.cs-start-kopf__bild:active .cs-start-kopf__pack{box-shadow:0 0 0 1px rgba(224,173,82,.4),0 30px 90px -20px color-mix(in srgb,var(--welt-licht) 90%,transparent)}
.cs-start-kopf__claim{margin:0 0 10px}
.cs-start-kopf__titel{font-family:var(--serif);font-weight:600;font-size:clamp(1.85rem,8.4vw,4.4rem);line-height:1.06;letter-spacing:.03em;margin:0;background:var(--gold-metall);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-start-kopf__zweit{display:inline}
.cs-start-kopf__lead{margin:12px 0 0;font-size:clamp(1rem,3.9vw,1.2rem);line-height:1.5;color:var(--text)}

/* Welten-Leiste: echte Packshot-Ausschnitte, am Handy einzeilig wischbar */
.cs-waehler{max-width:var(--maxw,1240px);margin:clamp(18px,3vw,36px) auto 0}
.cs-waehler ul{list-style:none;margin:0;padding:2px var(--w-pad) 10px;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--w-pad);scrollbar-width:none}
.cs-waehler ul::-webkit-scrollbar{display:none}
.cs-waehler li{flex:none;scroll-snap-align:start}
.cs-waehler__kachel{display:grid;grid-template-columns:52px auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:6px 16px 6px 6px;border-radius:var(--radius);background:rgba(22,25,21,.82);box-shadow:0 0 0 1px rgba(224,173,82,.14);text-align:left;-webkit-tap-highlight-color:transparent;transition:box-shadow .24s var(--ease),transform .24s var(--ease),background-color .24s}
.cs-waehler__bild{grid-row:1/3;width:52px;height:52px;border-radius:7px;object-fit:cover}
.cs-waehler__name{align-self:end;font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.cs-waehler__zahl{align-self:start;font-size:.8rem;color:var(--text-3);white-space:nowrap}
@media(hover:hover){
	.cs-waehler__kachel:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(224,173,82,.3),0 14px 40px -14px color-mix(in srgb,var(--welt-glow) 90%,transparent)}
	.cs-waehler__kachel:hover .cs-waehler__name{color:var(--gold-licht)}
}
.cs-waehler__kachel:active{background:rgba(31,35,30,.95);box-shadow:0 0 0 1px rgba(224,173,82,.4),0 10px 30px -12px color-mix(in srgb,var(--welt-glow) 90%,transparent)}

/* ---------- Welt ---------- */
.cs-welt{position:relative;isolation:isolate;color:var(--text);scroll-margin-top:64px}
.cs-welt::before{content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(to bottom,var(--grund) 0%,rgba(14,16,14,.7) 16%,rgba(14,16,14,.82) 62%,var(--grund) 100%),
		var(--welt-bild,none) center 30%/cover no-repeat,var(--welt-grund)}
.cs-welt__inner{position:relative;max-width:var(--maxw,1240px);margin:0 auto;padding:clamp(36px,6vw,88px) var(--w-pad) clamp(26px,4vw,56px)}
.cs-welt__kopf{display:grid;gap:10px;margin-bottom:clamp(16px,3vw,30px);text-align:center}
.cs-welt__worte{display:contents}
.cs-welt__zahl{font-variant-numeric:tabular-nums}
.cs-welt__titel{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,7vw,3.2rem);line-height:1.08;letter-spacing:.03em;background:var(--gold-metall);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-welt__text{margin:0;font-size:clamp(1rem,3.8vw,1.14rem);line-height:1.5;color:var(--text)}
.cs-welt__noten{margin:0;font-size:.88rem;color:var(--text-2)}
.cs-welt__noten-k{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-right:6px}
.cs-note{white-space:nowrap}
.cs-note+.cs-note::before{content:"· ";color:var(--text-3)}

/* Sorten-Reihe: Handy = Wischreihe, ab Desktop = Raster */
.cs-start ul.products.cs-welt__reihe{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(156px,46%);gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--w-pad);margin:0 calc(-1 * var(--w-pad));padding:4px var(--w-pad) 14px;scrollbar-width:none}
.cs-start ul.products.cs-welt__reihe::-webkit-scrollbar{display:none}
.cs-start ul.products.cs-welt__reihe>li{scroll-snap-align:start}

.cs-welt__mehr{margin:clamp(8px,2vw,20px) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px}
.cs-welt__alle{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);transition:color .16s}
.cs-welt__alle svg{width:14px;height:14px;transition:transform .16s var(--ease)}
@media(hover:hover){.cs-welt__alle:hover{color:var(--gold-licht)}.cs-welt__alle:hover svg{transform:translateX(3px)}}
.cs-welt__alle:active{color:var(--gold-licht)}

/* ---------- Indica oder Sativa ---------- */
.cs-paar .cs-welt__inner{text-align:center}
.cs-paar .cs-welt__kopf{margin-top:clamp(16px,3vw,28px)}
.cs-paar__schalter{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:10px;background:rgba(5,5,5,.7);box-shadow:0 0 0 1px rgba(224,173,82,.3)}
.cs-paar__schalter[hidden]{display:none}
.cs-paar__schalter button{position:relative;z-index:1;min-height:44px;min-width:120px;padding:0 20px;border:0;background:none;font:inherit;font-family:var(--sans);font-weight:500;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);cursor:pointer;border-radius:7px;transition:color .24s var(--ease)}
.cs-paar__schalter button[aria-selected="true"]{color:var(--nacht)}
.cs-paar__schieber{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:7px;background:linear-gradient(180deg,#f2cf78,var(--gold) 55%,#c8923f);transition:transform .3s var(--ease)}
.cs-paar[data-seite="sativa"] .cs-paar__schieber{transform:translateX(100%)}
.cs-paar:not(.ist-schalter) .cs-paar__seite + .cs-paar__seite{margin-top:clamp(36px,6vw,64px)}
.cs-paar__seite{scroll-margin-top:64px;text-align:left}
.cs-paar__seite[hidden]{display:none}

/* ---------- Schluss ---------- */
.cs-start-schluss{background:var(--grund);border-top:1px solid var(--linie)}
.cs-start-schluss__inner{max-width:var(--maxw,1240px);margin:0 auto;padding:clamp(34px,6vw,72px) var(--w-pad);display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.cs-start-schluss__satz{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:.03em;font-size:clamp(1.4rem,5.4vw,2.4rem);line-height:1.15;color:var(--text)}
.cs-start-schluss__knopf{min-height:50px;padding-inline:1.8em;letter-spacing:.04em}
.cs-start-vertrauen{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;font-size:.92rem;color:var(--text-2)}
.cs-start-vertrauen li{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.cs-start-vertrauen li::before{content:"";width:5px;height:5px;flex:none;background:var(--gold);transform:rotate(45deg)}

.cs-start-mag .cs-section__lead .cs-su{display:inline}

/* ---------- Tablet ---------- */
@media(min-width:720px){
	.cs-start ul.products.cs-welt__reihe{grid-auto-columns:260px;gap:16px}
	.cs-waehler ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
	.cs-waehler__kachel{height:100%}
}

/* ---------- Desktop: Text links, Packshot rechts ---------- */
@media(min-width:1024px){
	.cs-start-kopf{padding-top:clamp(40px,5vw,72px)}
	.cs-start-kopf::before{background:radial-gradient(40% 55% at 74% 42%,color-mix(in srgb,var(--welt-glow) 42%,transparent),transparent 70%),
		linear-gradient(90deg,rgba(14,16,14,.92) 0%,rgba(14,16,14,.6) 48%,rgba(14,16,14,.25) 100%),
		linear-gradient(to bottom,transparent 60%,var(--grund) 100%),
		var(--welt-bild,none) center 25%/cover no-repeat,var(--welt-grund)}
	.cs-start-kopf__inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;text-align:left}
	.cs-start-kopf__text{grid-column:1;grid-row:1}
	.cs-start-kopf__bild{grid-column:2;grid-row:1}
	.cs-start-kopf__claim{justify-content:flex-start}
	.cs-start-kopf__claim::before{display:none}
	.cs-start-kopf__pack{width:min(100%,360px)}
	.cs-start-kopf__titel{font-size:clamp(3rem,4.6vw,4.4rem)}
	.cs-welt__kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);row-gap:8px;align-items:end;text-align:left}
	.cs-welt__zahl{grid-column:1;grid-row:1;justify-content:flex-start}
	.cs-welt__zahl::before{display:none}
	.cs-welt__titel{grid-column:1;grid-row:2 / 4;align-self:start}
	.cs-welt__text{grid-column:2;grid-row:1 / 3;align-self:end}
	.cs-welt__noten{grid-column:2;grid-row:3}
	.cs-welt__mehr{justify-content:flex-start}
	.cs-paar .cs-welt__inner{text-align:left}
}

/* PC: sechs Kacheln im Container-Raster, Packshot-Ausschnitt oben */
@media(min-width:1024px){
	.cs-waehler ul{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
	.cs-waehler__kachel{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:0 0 12px;row-gap:2px;overflow:hidden}
	.cs-waehler__bild{grid-row:1;width:100%;height:72px;border-radius:0;margin-bottom:8px}
	.cs-waehler__name,.cs-waehler__zahl{padding:0 12px}
	.cs-waehler__name{grid-row:2}
	.cs-waehler__zahl{grid-row:3}
}

/* Vier Karten nebeneinander ab 1280 px */
@media(min-width:1280px){
	.cs-start ul.products.cs-welt__reihe{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:20px}
}

@media(prefers-reduced-motion:reduce){
	.cs-waehler__kachel:hover,.cs-start-kopf__bild:hover .cs-start-kopf__pack,.cs-welt__alle:hover svg,.cs-welt__extra-link:hover{transform:none}
	.cs-paar__schieber{transition:none}
}

@media(max-width:719px){
	.cs-welt__noten .cs-note:nth-of-type(n+5){display:none}
}

/* Kachel, wenn eine Welt weniger als vier Sorten zeigt (nur im Raster): Packshot-Ausschnitt als Bühne */
.cs-start ul.products.cs-welt__reihe>li.cs-welt__extra{display:none}
@media(min-width:1280px){
	.cs-start ul.products.cs-welt__reihe>li.cs-welt__extra{display:flex}
	.cs-welt__extra-link{position:relative;isolation:isolate;overflow:hidden;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:24px;border-radius:var(--radius);border:0;background:var(--flaeche);box-shadow:0 0 0 1px rgba(224,173,82,.18);color:var(--gold-licht);font:inherit;font-weight:500;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;text-align:center;cursor:pointer;transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
	.cs-welt__extra-bild{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .24s,transform .32s var(--ease)}
	.cs-welt__extra-link::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.9),rgba(5,5,5,.2) 70%)}
	.cs-welt__extra-link:active{box-shadow:0 0 0 1px var(--gold)}
	@media(hover:hover){.cs-welt__extra-link:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(224,173,82,.35),0 18px 60px -20px color-mix(in srgb,var(--welt-glow) 80%,transparent)}.cs-welt__extra-link:hover .cs-welt__extra-bild{opacity:.75;transform:scale(1.03)}}
}
.cs-paar:not(.ist-schalter) .cs-welt__extra{display:none!important}