/* ════════════════════════════════════════════════════════════
   NATURKOSMETIK KARL — QUOTE
   Ruhige zentrale Quote-Komponente für Testimonials und
   Brand-Aussagen. Großes Anführungszeichen, kursives Cormorant-
   Zitat mit optionalem Script-Akzent, Sans-Attribution.
   ═══════════════════════════════════════════════════════════ */

/* Variablen werden auf .nk-quote gescoped, damit sie nicht mit
   Theme-Variablen kollidieren. */
.nk-quote {
	--sage:      #8faf86;
	--sage-tint: #dde6d4;
	--sand-4:    #f4f6ef;
	--cream:     #fbfaf4;
	--olive:     #3a3a35;
	--olive-2:   #6a6a63;
	--olive-3:   #a9a9a0;
	--nk-display: "Cormorant", Georgia, serif;
	--nk-script:  "Dancing Script", "Apple Chancery", cursive;
	--nk-sans:    "Jost", ui-sans-serif, system-ui, sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   BASIS
   ───────────────────────────────────────────────────────────── */
.nk-quote {
	position: relative;
	margin: 0;
	border-radius: 6px;
	color: var(--olive);
}


/* ─── Hintergründe ────────────────────────────────────────── */
.nk-quote--bg-sage  { background: var(--sage-tint); }
.nk-quote--bg-cream { background: var(--cream); }
.nk-quote--bg-sand  { background: var(--sand-4); }
.nk-quote--bg-none  { background: transparent; }


/* ─── Ausrichtung ─────────────────────────────────────────── */
.nk-quote--center { text-align: center; }
.nk-quote--left   { text-align: left; }


/* ─────────────────────────────────────────────────────────────
   GRÖSSEN (Padding)
   ───────────────────────────────────────────────────────────── */
.nk-quote--sm { padding: 48px 40px 40px; }
.nk-quote--md { padding: 80px 60px 70px; }
.nk-quote--lg { padding: 110px 80px 90px; }


/* ─────────────────────────────────────────────────────────────
   QUOTE-SYMBOL
   ───────────────────────────────────────────────────────────── */
.nk-quote__mark {
	display: block;
	font-family: var(--nk-display);
	font-style: italic;
	font-weight: 400;
	color: var(--sage);
	line-height: 0.8;
	margin: 0 0 12px;
	user-select: none;
}
.nk-quote--sm .nk-quote__mark { font-size: 72px; }
.nk-quote--md .nk-quote__mark { font-size: 96px; }
.nk-quote--lg .nk-quote__mark { font-size: 120px; }

/* Minimal: kleineres, dünneres Anführungszeichen */
.nk-quote__mark--minimal {
	font-weight: 300;
	opacity: .65;
}
.nk-quote--sm .nk-quote__mark--minimal { font-size: 48px; }
.nk-quote--md .nk-quote__mark--minimal { font-size: 60px; }
.nk-quote--lg .nk-quote__mark--minimal { font-size: 76px; }

/* Bei left-align rückt das Zeichen ganz nach links. */
.nk-quote--left .nk-quote__mark { text-align: left; }


/* ─────────────────────────────────────────────────────────────
   ZITAT-TEXT
   ───────────────────────────────────────────────────────────── */
.nk-quote__text {
	margin: 0;
	font-family: var(--nk-display);
	font-style: italic;
	font-weight: 300;
	color: var(--olive);
}
.nk-quote--sm .nk-quote__text { font-size: 22px; line-height: 1.45; }
.nk-quote--md .nk-quote__text { font-size: 32px; line-height: 1.40; }
.nk-quote--lg .nk-quote__text { font-size: 42px; line-height: 1.30; }


/* ─── Akzent-Wort im Zitat (Dancing Script, sage) ─────────── */
.nk-quote__accent {
	font-family: var(--nk-script);
	font-style: normal;
	font-weight: 500;
	color: var(--sage);
	/* Optisch leicht tiefer hängen lassen, da Script höher ansetzt. */
	display: inline-block;
	transform: translateY(.04em);
	padding: 0 .08em;
}


/* ─────────────────────────────────────────────────────────────
   ATTRIBUTION (Footer)
   ───────────────────────────────────────────────────────────── */
.nk-quote__attribution {
	display: block;
	font-family: var(--nk-sans);
	font-weight: 400;
	color: var(--olive-2);
	letter-spacing: .24em;
	text-transform: uppercase;
}
.nk-quote--sm .nk-quote__attribution { font-size: 10px; margin-top: 28px; }
.nk-quote--md .nk-quote__attribution { font-size: 11px; margin-top: 42px; }
.nk-quote--lg .nk-quote__attribution { font-size: 12px; margin-top: 56px; }

/* Em-Dash vor dem Author-Block via ::before */
.nk-quote__attribution::before {
	content: "\2014\00a0";
	color: var(--olive-3);
	margin-right: .25em;
}

.nk-quote__author {
	color: var(--olive-2);
}
.nk-quote__sep {
	display: inline-block;
	margin: 0 .55em;
	color: var(--olive-3);
}
.nk-quote__meta {
	color: var(--olive-2);
}


/* ─────────────────────────────────────────────────────────────
   MOBILE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.nk-quote--md,
	.nk-quote--lg {
		padding: 48px 24px 40px;
	}
	.nk-quote--md .nk-quote__mark { font-size: 64px; }
	.nk-quote--lg .nk-quote__mark { font-size: 80px; }

	.nk-quote--md .nk-quote__text { font-size: 22px; line-height: 1.45; }
	.nk-quote--lg .nk-quote__text { font-size: 28px; line-height: 1.4; }

	.nk-quote--md .nk-quote__attribution { margin-top: 32px; }
	.nk-quote--lg .nk-quote__attribution { margin-top: 36px; }
}