/* =====================================================================
   SCHNUPPER-READING – Landing Page Theme for WonderCMS
   ---------------------------------------------------------------------
   ALL styling is controlled from the :root block below.
   To restyle the whole page, a non-technical user only needs to edit
   the color and spacing variables in :root.
   Fonts are 100% self-hosted (see /css/fonts). No external requests.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. SELF-HOSTED FONTS (woff2 only)                                  */
/* ------------------------------------------------------------------ */

/* Carlito – body / flow text (metric-compatible with Calibri) */
@font-face {
	font-family: "Carlito";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/carlito-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Carlito";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/carlito-latin-400-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Carlito";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/carlito-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Carlito";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/carlito-latin-700-italic.woff2") format("woff2");
}

/* Sansilk – handwritten script font (by Khurasan) used for the slogan */
@font-face {
	font-family: "Sansilk";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/sansilk-regular.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/*  2. DESIGN TOKENS  –  EDIT COLORS & SPACING HERE                    */
/* ------------------------------------------------------------------ */
:root {
	/* --- PALETTE (concrete hex values) --- */
	--color-purple:            #7C5FBF; /* full pastel-purple accent   */
	--color-purple-soft:       #C9B6E4; /* light purple                */
	--color-turquoise:         #35BDB1; /* full turquoise accent       */
	--color-turquoise-soft:    #A9E5DB; /* light turquoise             */
	--color-gold:              #C9A227; /* gold – buttons & checkmarks  */
	--color-gold-glow:         rgba(201, 162, 39, 0.45);

	--color-bg:                #FBFBFD; /* very light page background   */
	--color-surface:           #FFFFFF; /* content box background       */
	--color-text:              #1A1A1A; /* near-black body text (WCAG AA)*/
	--color-text-soft:         #4A4A4A; /* secondary text               */

	/* Subtle pastel accent gradients (color -> white only) */
	--grad-purple:    linear-gradient(180deg, var(--color-purple-soft) 0%, #FFFFFF 100%);
	--grad-turquoise: linear-gradient(180deg, var(--color-turquoise-soft) 0%, #FFFFFF 100%);

	/* --- SHAPE & SPACING --- */
	--radius:            25px;   /* rounded corners (px, per brief)     */
	--radius-button:     40px;
	--content-width:     100%;    /* content box width on desktop        */
	--max-content:       700px;  /* hard cap so box stays readable      */
	--section-gap:       clamp(2rem, 6vw, 5rem);
	--header-height:     25vh;   /* full-width header image height      */

	/* --- TYPOGRAPHY --- */
	--font-body:   "Carlito", "Calibri", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--font-script: "Sansilk", "Segoe Script", "Brush Script MT", cursive;
	--font-base-size: 18px;
}

/* ------------------------------------------------------------------ */
/*  3. BASE / RESET                                                    */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--font-base-size); scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* gentle fade-in on load */
	opacity: 0;
	animation: pageFade 0.9s ease forwards;
}
@keyframes pageFade { to { opacity: 1; } }

img { max-width: 100%; display: block; }
a { color: var(--color-purple); }

p { margin: 0 0 1rem; }

h1 { text-align: center; }

/* Hide the top menu on this single-page landing (menu still
   exists in the code so the admin/login keeps working). */
#topMenu { display: none; }

/* ------------------------------------------------------------------ */
/*  4. HEADER IMAGE (full width, ~25vh)                                */
/* ------------------------------------------------------------------ */
.site-header {
	position: relative;
	width: 100%;
	height: var(--header-height);
	min-height: 160px;
	overflow: hidden;
}
.site-header__img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* uploaded image crops cleanly */
	display: block;
}
/* Placeholder look (remove once a real image is used) */
.site-header__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--grad-purple);
	color: var(--color-text-soft);
	font-size: clamp(0.9rem, 2vw, 1.1rem);
	letter-spacing: 0.03em;
	padding: 1rem;
}

/* small "made with care" brand mark in the header corner */
.brand-mark {
	position: absolute;
	top: 12px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(4px);
	border-radius: var(--radius-button);
	font-size: 0.8rem;
	color: var(--color-purple);
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.brand-mark svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ */
/*  5. SLOGAN BLOCK                                                    */
/* ------------------------------------------------------------------ */
.slogan {
	text-align: center;
	padding: var(--section-gap) 1rem 1rem;
}
.slogan__line1 {
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--color-purple);
	font-size: clamp(2.6rem, 8vw, 5rem);
	line-height: 1.1;
	margin: 0;
}
.slogan__line2 {
	font-family: var(--font-body);
	font-style: italic;
	color: var(--color-turquoise);
	font-size: clamp(1rem, 3vw, 1.4rem);
	margin: 0.4rem 0 0;
	/* staggered / offset relative to line 1 */
	transform: translateX(clamp(1rem, 8vw, 6rem));
}

/* ------------------------------------------------------------------ */
/*  6. CONTENT BOX (~50% width on desktop, full on mobile)            */
/* ------------------------------------------------------------------ */
.content-box {
	width: var(--content-width);
	max-width: var(--max-content);
	margin: var(--section-gap) auto;
	background: var(--color-surface);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 3rem);
	box-shadow: 0 12px 40px rgba(124, 95, 191, 0.12);
	border: 1px solid rgba(124, 95, 191, 0.08);
}
.content-box__title {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	margin: 0 0 0.3rem;
	color: var(--color-text);
}
.checklist-box .content-box__title {
	margin-bottom: 1.25rem;
}
.content-box__subtitle {
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	color: var(--color-text-soft);
	margin: 0 0 1.5rem;
}

/* Checklist (10 items) with inline gold SVG checkmarks */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 0.85rem;
}
.checklist li:last-child {
	margin-bottom: 0;
}
.checklist svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--color-gold); /* gold checkmark via currentColor */
}
.checklist span { flex: 1 1 auto; }

/* ------------------------------------------------------------------ */
/*  7. CTA BUTTON                                                      */
/* ------------------------------------------------------------------ */
.cta-wrap { text-align: center; margin: 0 auto var(--section-gap); }
.cta-button {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(1rem, 2.5vw, 1.15rem);
	color: #fff;
	background: var(--color-gold);
	text-decoration: none;
	padding: 0.9rem 2.2rem;
	border-radius: var(--radius-button);
	box-shadow: 0 6px 18px rgba(201, 162, 39, 0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.cta-button:hover,
.cta-button:focus {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px var(--color-gold-glow), 0 0 22px var(--color-gold-glow);
	background: #d8af2e;
}

/* ------------------------------------------------------------------ */
/*  8. ABOUT SECTION (with video placeholder)                         */
/* ------------------------------------------------------------------ */
.about {
	max-width: 900px;
	margin: 0 auto var(--section-gap);
	text-align: center;
}
.about__title {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin: 0 0 0.75rem;
}
.about__text { color: var(--color-text-soft); margin-bottom: 1.75rem; }

.video-frame {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto var(--section-gap);
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-text-soft);
	border: 1px dashed rgba(53, 189, 177, 0.5);
}
/* Uploaded video-placeholder image always fills the 16:9 frame */
.video-frame__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}
/* Fallback state (no image uploaded yet) keeps the radiant background */
.video-frame__fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	background: var(--grad-turquoise);
}
.video-frame iframe,
.video-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-frame__play {
	width: 64px; height: 64px;
	color: var(--color-purple);
	margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ */
/*  9. FOOTER (small, with Impressum / Datenschutz)                   */
/* ------------------------------------------------------------------ */
.site-footer {
	text-align: center;
	padding: 1.5rem 1rem;
	font-size: 0.85rem;
	color: var(--color-text-soft);
	background: var(--grad-purple);
}
.site-footer a { color: var(--color-purple); text-decoration: none; margin: 0 0.4rem; }
.site-footer a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* 10. RESPONSIVE                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.content-box { width: 92%; }
	.slogan__line2 { transform: translateX(0); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	body { animation: none; opacity: 1; }
	.cta-button { transition: none; }
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ */
/* 11. WonderCMS admin helpers (keep minimal, do not remove)          */
/* ------------------------------------------------------------------ */
.eDit { min-height: 1em; }