/* Klartraum-Shop — dieselbe Welt wie das Heft: wach schwarz, im Traum Farbe. */
@import url('fonts/fonts.css');

:root {
  --nacht: #07070c; --nacht-2: #121019; --papier: #f5f1ea; --tinte: #16151c; --leise: #5b5866;
  --violett: #7c5cff; --teal: #22d3c5; --gold: #ffc861;
  --aufgehen: linear-gradient(90deg, var(--violett), var(--teal) 55%, var(--gold));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--papier); color: var(--tinte); font: 17px/1.6 'Literata', Georgia, serif; }
a { color: var(--violett); }
.rahmen { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* Kopf: Nacht, aus der die Farbe aufgeht */
.nacht { background: var(--nacht); color: var(--papier); position: relative; overflow: hidden; }
.nacht::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--aufgehen); }
.kopf { padding-top: 18px; padding-bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
.marke { font: 700 13px/1 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--papier); text-decoration: none; }
.kopf a.leise { font: 600 13px/1 'Manrope', sans-serif; color: rgba(245, 241, 234, .7); text-decoration: none; }

.held { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding-top: 28px; padding-bottom: 56px; }
/* .kopf und .held sitzen auf .rahmen: nur oben und unten setzen, sonst fällt der seitliche Rand weg (abt-ux-test 390 px, 25.09.) */
.held img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(124, 92, 255, .25); display: block; }
.kicker { font: 700 12px/1 'Manrope', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); margin: 0 0 14px; }
h1 { font: 600 38px/1.08 'Fraunces', serif; margin: 0 0 16px; word-spacing: .08em; text-wrap: balance; }
.held h1 .farbe { color: var(--gold); }
.unter { font-style: italic; color: rgba(245, 241, 234, .82); margin: 0 0 22px; }
.kai { font: 600 12px/1.5 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 241, 234, .65); }

/* Inhalt */
main.inhalt { padding-top: 44px; padding-bottom: 20px; }   /* nur oben und unten: der seitliche Abstand kommt von .rahmen */
h2 { font: 600 26px/1.2 'Fraunces', serif; margin: 34px 0 12px; word-spacing: .06em; }
.beschreibung { font-size: 19px; }
.paket { list-style: none; padding: 0; margin: 0 0 8px; }
.paket li { padding: 10px 0 10px 30px; border-bottom: 1px solid rgba(22, 21, 28, .12); position: relative; }
.paket li::before { content: ''; position: absolute; left: 4px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: var(--aufgehen); }

/* Kaufkasten */
.kauf { background: var(--nacht); color: var(--papier); border-radius: 14px; padding: 26px 26px 22px; margin: 34px 0; }
.preis { font: 700 36px/1 'Manrope', sans-serif; margin: 0 0 4px; }
.preis small { font-size: 15px; font-weight: 600; color: rgba(245, 241, 234, .7); }
.einwilligung { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; margin: 18px 0; font-size: 15px; line-height: 1.5; cursor: pointer; }
.einwilligung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--violett); }
.knopf { display: inline-block; border: 0; border-radius: 999px; padding: 15px 30px; font: 700 16px/1 'Manrope', sans-serif;
  background: var(--aufgehen); color: var(--nacht); cursor: pointer; text-decoration: none; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
/* im dunklen Kaufkasten sah gesperrt fast wie aktiv aus (abt-ux-test 25.09.): dort ohne Farbverlauf */
.kauf .knopf[disabled] { background: rgba(245, 241, 234, .14); color: rgba(245, 241, 234, .5); opacity: 1; }
.klein { font: 500 13px/1.5 'Manrope', sans-serif; color: rgba(245, 241, 234, .65); margin: 14px 0 0; }
.kopf-rechts { display: flex; gap: 16px; align-items: center; }
.kopf a.sprache { border: 1px solid rgba(245, 241, 234, .35); border-radius: 999px; padding: 5px 10px; }   /* Sprachumschalter */
footer .bindend { margin: 0 0 8px; font-size: 13px; }
.kauf .bindend-kauf { margin: -8px 0 14px; }
.agb-hinweis { font: 500 14px/1.5 'Manrope', sans-serif; color: rgba(245, 241, 234, .85); margin: 0 0 16px; }   /* AGB-Hinweis vor dem Kauf-Knopf (gf-research 20:0x) */
.agb-hinweis a { color: var(--gold); }
.meldung { margin: 14px 0 0; font: 600 14px/1.5 'Manrope', sans-serif; color: var(--gold); min-height: 1em; }
.hinweis { background: #fff6dc; border: 1px solid var(--gold); border-radius: 10px; padding: 14px 16px; margin: 20px 0; }

/* Formulare (Widerruf, Newsletter) */
form.feld label { display: block; font: 600 14px/1.4 'Manrope', sans-serif; margin: 14px 0 6px; }
form.feld input[type=text], form.feld input[type=email] { width: 100%; padding: 12px 14px; font: 16px 'Literata', serif;
  border: 1px solid rgba(22, 21, 28, .3); border-radius: 8px; background: #fff; }
.karte { background: #fff; border: 1px solid rgba(22, 21, 28, .12); border-radius: 14px; padding: 22px 24px; margin: 24px 0; }
.karte .knopf { margin-top: 18px; }
.betont { font: 700 22px/1.3 'Manrope', sans-serif; }

/* Rechtstexte */
.recht h1 { font-size: 32px; }
.recht h2 { font-size: 21px; }
.recht p, .recht li { font-size: 16px; }

/* Fuß */
footer { border-top: 1px solid rgba(22, 21, 28, .12); margin-top: 50px; padding: 26px 0 40px; font: 500 14px/1.8 'Manrope', sans-serif; color: var(--leise); }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 10px; }
footer a { color: var(--tinte); }
footer a.widerruf { font-weight: 700; color: var(--violett); }

body.schlicht main.rahmen { padding: 60px 20px; }

@media (max-width: 720px) {
  .held { grid-template-columns: 1fr; gap: 24px; padding-bottom: 40px; }
  h1 { font-size: 31px; }
  body { font-size: 16px; }
}