/* Gefühlsmenschen – im Stil von „Romy und die Zauberkraft der stillen Welt“ */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-italic.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--papier: #F6EFE2;
	--papier-dunkel: #EFE7D6;
	--papier-hell: #FBF6EC;
	--nacht: #1E2A47;
	--nacht-hell: #2C3A63;
	--tinte: #3E4560;
	--gold: #C9A24A;
	--gold-dunkel: #7A5A14;
	--mond: #F3DFA2;
	--senf: #E0A93A;
	--linie: #E0D3B8;
	--weit: 1160px;
	--schmal: 720px;
	--serif: "Fraunces", Georgia, serif;
	--sans: "Nunito", system-ui, sans-serif;
	--hand: "Caveat", cursive;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--papier) url("../bilder/papier.webp") repeat;
	color: var(--nacht);
	font-family: var(--sans);
	font-size: 1.125rem;
	line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--nacht); }
a:hover { color: var(--gold-dunkel); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
	font-family: var(--serif);
	font-variation-settings: "SOFT" 100;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 3.75rem); font-weight: 600; line-height: 1.05; font-variation-settings: "SOFT" 100, "WONK" 1; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.5rem; font-weight: 600; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--nacht); color: var(--papier); padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

.weit { max-width: var(--weit); margin-inline: auto; padding-inline: 1.5rem; }
.schmal { max-width: var(--schmal); margin-inline: auto; padding-inline: 1.5rem; }
.abschnitt { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.mitte { text-align: center; }
.leise { color: var(--tinte); }
.gross { font-size: clamp(1.2rem, 2vw, 1.35rem); }
.klein { font-size: 0.95rem; }

/* Handschrift */
.hand { font-family: var(--hand); font-weight: 700; font-size: 1.75em; line-height: 1.2; color: var(--gold-dunkel); margin-bottom: 0.3em; }
.hand a { color: inherit; text-decoration: none; }
.hand a:hover { text-decoration: underline; }

/* Kopf */
.kopf { padding-block: 1.25rem; }
.kopf .weit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.marke { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 1.6rem; font-weight: 600; }
.marke svg { flex: none; }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.menue a { display: inline-block; padding: 0.55rem 0; text-decoration: none; font-weight: 700; font-size: 1rem; }
.menue a:hover { text-decoration: underline; }

/* Buttons */
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.knopf {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 3.35rem; padding: 0 1.85rem; border-radius: 999px;
	background: var(--nacht); color: var(--papier); border: 2px solid var(--nacht);
	font: 800 1.05rem/1 var(--sans); text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--nacht-hell); border-color: var(--nacht-hell); color: var(--papier); }
.knopf.rand { background: transparent; color: var(--nacht); }
.knopf.rand:hover { background: var(--nacht); color: var(--papier); }

/* Zwei Spalten */
.spalten { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem 3.5rem; }
.spalten > .text { flex: 999 1 26rem; min-width: 0; }
.spalten > .bild { flex: 1 1 20rem; min-width: 0; display: flex; justify-content: center; }

/* Bilder im Buchstil */
.aquarell {
	border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
	-webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
}
.band {
	width: 100%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
}
.rund { border-radius: 18px; }
.buch { border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 22px 36px rgba(30, 42, 71, 0.28); }
.senf-fleck {
	padding: 2.5rem;
	background: radial-gradient(circle at 50% 52%, rgba(233, 185, 73, 0.45) 0, rgba(233, 185, 73, 0.3) 45%, transparent 68%);
}

/* Karten */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; }
.karte { display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: var(--nacht); }
.karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; margin-bottom: 0.6rem; }
.karte h3 { margin: 0; }
.karte p { margin: 0; color: var(--tinte); font-size: 1.05rem; }
.karte .hand { font-size: 1.6rem; color: var(--nacht); margin-top: 0.3rem; }
.karte:hover h3 { text-decoration: underline; }

/* Nachtblock */
.nacht {
	position: relative;
	background: var(--nacht) url("../bilder/sterne.svg") repeat;
	background-size: 700px auto;
	color: var(--papier);
	padding-block: clamp(4rem, 9vw, 7.5rem);
	/* gemalter Rand, als data-URI eingebettet: funktioniert auch lokal und ohne CORS */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%201000%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0%2022%20C%2090%208%20170%2030%20260%2018%20S%20430%204%20520%2020%20S%20700%2034%20790%2016%20S%20940%206%201000%2020%20L%201000%20980%20C%20920%20994%20840%20972%20750%20984%20S%20580%20998%20490%20980%20S%20310%20966%20220%20984%20S%2070%20994%200%20978%20Z%22/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%201000%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0%2022%20C%2090%208%20170%2030%20260%2018%20S%20430%204%20520%2020%20S%20700%2034%20790%2016%20S%20940%206%201000%2020%20L%201000%20980%20C%20920%20994%20840%20972%20750%20984%20S%20580%20998%20490%20980%20S%20310%20966%20220%20984%20S%2070%20994%200%20978%20Z%22/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.nacht h1, .nacht h2, .nacht h3 { color: var(--papier); }
.nacht p { color: #DCE0EA; }
.nacht .hand { color: var(--mond); }
.nacht a:not(.knopf) { color: var(--mond); }
.nacht .knopf { background: var(--mond); border-color: var(--mond); color: var(--nacht); }
.nacht .knopf:hover { background: #fff; border-color: #fff; }
.nacht .knopf.rand { background: transparent; border-color: var(--papier); color: var(--papier); }

/* Eulenspruch */
.vers {
	font-family: var(--serif); font-variation-settings: "SOFT" 100; font-style: italic;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.6;
}
.nacht .vers { color: var(--mond); }

/* Newsletter-Formular */
.formular { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 34rem; }
.formular label { width: 100%; font-size: 0.95rem; }
.formular input[type="email"] {
	flex: 1 1 15rem; min-height: 3.35rem; padding: 0 1.3rem; border-radius: 999px;
	border: 2px solid var(--linie); background: var(--papier-hell); color: var(--nacht); font: inherit;
}
.nacht .formular input[type="email"] { border-color: transparent; }

/* Nummern */
ol.nummern { list-style: none; counter-reset: n; padding: 0; margin: 0 0 1.5rem; }
ol.nummern > li { counter-increment: n; position: relative; padding-left: 3.25rem; margin-bottom: 1.1rem; min-height: 2.4rem; }
ol.nummern > li::before {
	content: counter(n); position: absolute; left: 0; top: -0.1rem;
	width: 2.3rem; height: 2.3rem; border-radius: 50%;
	background: var(--nacht); color: var(--mond);
	font: 700 1.5rem/2.3rem var(--hand); text-align: center;
}

/* Artikel-Liste */
.artikel { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.5rem; }
.artikel a { text-decoration: none; display: flex; flex-direction: column; gap: 0.3rem; }
.artikel .hand { font-size: 1.5rem; margin: 0; }
.artikel strong { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 1.4rem; font-weight: 600; line-height: 1.3; }
.artikel span:last-child { color: var(--tinte); font-size: 1rem; }

.flaeche { background: var(--papier-dunkel); }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding-block: 2rem; font-size: 0.95rem; color: var(--tinte); }
.fuss .weit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* Textseiten (Impressum, Datenschutz) */
.textseite h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.textseite h2 { font-size: 1.5rem; margin-top: 2rem; }
.platzhalter { background: #FFF3C4; padding: 0 0.25em; border-radius: 3px; }

@media (max-width: 40rem) {
	.abschnitt { padding-block: 3rem; }
	.marke { font-size: 1.35rem; }
	.menue ul { gap: 0 1.1rem; }
}

/* Newsletter-Anmeldung unter der Eulenatmung */
.brief { text-align: center; }
.nacht .weit + .brief { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.trenner { position: relative; height: 1px; margin: 0 auto 2.5rem; max-width: 22rem; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.trenner::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--nacht); box-shadow: inset 0.4rem -0.2rem 0 0 var(--mond); }
.brief .formular { margin: 1.75rem auto 0; justify-content: center; text-align: left; }
.brief .formular label { color: var(--mond); font-weight: 700; padding-left: 1.3rem; }
.formular input[type="email"]::placeholder { color: #8A8FA3; }
.formular .knopf { flex: 0 0 auto; }
.formular .hinweis { width: 100%; margin: 0.25rem 0 0; font-size: 0.9rem; text-align: center; }
.nacht .formular .hinweis { color: #B9C0D3; }
.nacht .formular .bald, .formular .bald { color: var(--mond); font-weight: 700; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 40rem) {
	.formular .knopf { flex: 1 1 100%; }
}

/* Selbsttest */
.fragen { list-style: none; counter-reset: f; padding: 0; margin: 2.5rem 0 1.5rem; }
.frage { counter-increment: f; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--linie); }
.frage p { flex: 1 1 22rem; margin: 0; }
.frage p::before { content: counter(f) ". "; font-family: var(--hand); font-weight: 700; font-size: 1.35rem; color: var(--gold-dunkel); }
.wahl { display: flex; gap: 0.5rem; }
.wahl label { position: relative; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl label { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--nacht); border-radius: 999px; font-weight: 800; font-size: 1rem; cursor: pointer; }
.wahl label:has(input:checked) { background: var(--nacht); color: var(--mond); }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.fehlt { color: #8A2C1F; font-weight: 700; }
.ergebnis { margin-top: 3rem; padding: 2rem; border-radius: 18px; background: var(--papier-dunkel); }
.ergebnis:focus { outline: none; }

/* Kita & Schule */
.karten.kita { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.karten.kita .karte { padding: 1.5rem; border-radius: 18px; background: var(--papier-hell); border: 1px solid var(--linie); }
.karten.kita h3 { font-size: 1.3rem; }
.vorlesen { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 18px; background: var(--papier-dunkel); }
.vorlesen > div:first-child { flex: 2 1 22rem; }
.vorlesen-aktion { flex: 1 1 16rem; }
.vorlesen ol.nummern { margin-bottom: 0; }

/* Willkommensgeschenk im Newsletter */
.geschenk { display: inline-block; margin-top: 0.5rem; padding: 0.75rem 1.25rem; border: 1px dashed var(--mond); border-radius: 14px; }
.nacht .geschenk { color: var(--mond); }