/* =========================================================================
   Schule Rehetobel — Tokens und Grundregeln
   Design «Lebendig» (Entwurf B). Werte 1:1 aus dem abgenommenen Entwurf,
   ergänzt um die Originalfarben der gezeichneten Logo-Symbole.
   ========================================================================= */

@font-face {
	font-family: 'Fredoka';
	src: url('../fonts/fredoka.woff2') format('woff2');
	font-weight: 300 700;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans.woff2') format('woff2');
	font-weight: 200 1000;
	font-stretch: 75% 125%;
	font-display: swap;
}

:root {
	/* Oberflächenfarben aus Entwurf B */
	--blau: #2f7cc0;
	--gruen: #5aa845;
	--gelb: #f4b41e;
	--tinte: #25323a;         /* Text, Footer */
	--petrol: #215863;        /* H1 */
	--grau: #5d6b72;          /* Fliesstext zweitrangig */
	--rahmen: #eae1ce;        /* warme Linien */
	--hero: #f2f8ea;          /* Bühne, Seitenkopf */
	--weiss: #ffffff;
	--seite-oben: #eeeff1;
	--seite-unten: #f5f6f7;

	/* Getönte Flächen (wie Kacheln/Leitbild in B) */
	--blau-flaeche: rgba(47, 124, 192, 0.12);
	--gruen-flaeche: rgba(90, 168, 69, 0.15);
	--gelb-flaeche: rgba(244, 180, 30, 0.18);
	--blau-linie: rgba(47, 124, 192, 0.2);
	--gruen-linie: rgba(90, 168, 69, 0.25);
	--gelb-linie: rgba(244, 180, 30, 0.35);

	/* Dunklere Töne für Text auf hellen Flächen (Kontrast ≥ 4.5:1) */
	--blau-text: #23649e;
	--gruen-text: #3c7a2c;
	--gelb-text: #8a5a00;

	/* Originalfarben der gezeichneten Symbole (Logo) */
	--logo-blau: #6498ce;
	--logo-gruen: #609e53;
	--logo-gelb: #ecd417;

	/* Schrift */
	--schrift-titel: 'Fredoka', system-ui, sans-serif;
	--schrift-text: 'Nunito Sans', system-ui, sans-serif;

	/* Raster */
	--breite: 1180px;
	--rand: 32px;
	--radius-gross: 24px;
	--radius: 22px;
	--radius-karte: 20px;
	--schatten: 0 14px 34px rgba(37, 50, 58, 0.09);
	--schatten-knopf: 0 3px 10px rgba(37, 50, 58, 0.22);
	--kopf-hoehe: 92px;
}

@media (max-width: 820px) {
	:root {
		--rand: 16px;
		--kopf-hoehe: 72px;
	}
}

/* --- Grundregeln ------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: clip;
}

body {
	min-height: 100vh;
	color: var(--tinte);
	font-family: var(--schrift-text);
	font-size: 17px;
	line-height: 1.6;
	background: linear-gradient(var(--seite-oben) 0%, var(--seite-unten) 100%) fixed;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
}

img {
	display: block;
	height: auto;
}

a {
	color: var(--blau-text);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--tinte);
}

h1,
h2,
h3,
h4 {
	font-family: var(--schrift-titel);
	font-weight: 700;
	line-height: 1.2;
	color: var(--tinte);
	letter-spacing: -0.01em;
	margin: 0;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

button {
	font-family: inherit;
}

::selection {
	background: rgba(47, 124, 192, 0.18);
}

:focus-visible {
	outline: 3px solid var(--blau);
	outline-offset: 3px;
	border-radius: 4px;
}

.visuell-versteckt,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sprunglink {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--tinte);
	color: var(--weiss);
	font-weight: 700;
	text-decoration: none;
}

.sprunglink:focus {
	top: 12px;
	color: var(--weiss);
}

.haupt:focus {
	outline: none;
}

/* --- Rahmen (Inhaltsbreiten) -------------------------------------------- */

.rahmen {
	width: 100%;
	max-width: calc(var(--breite) + 2 * var(--rand));
	margin-inline: auto;
	padding-inline: var(--rand);
}

.rahmen--text,
.rahmen--mittel,
.rahmen--breit {
	max-width: calc(var(--breite) + 2 * var(--rand));
}

/* Schmale Spalten beginnen an der linken Rasterkante (wie Titel und Kacheln). */
.rahmen--text > * {
	max-width: 760px;
}

.rahmen--mittel > * {
	max-width: 900px;
}

.rahmen--breit > * {
	max-width: 1000px;
}

/* --- Bänder (volle Breite) ------------------------------------------------ */

.band--hero {
	background: var(--hero);
}

.band--weiss {
	background: var(--weiss);
}

@keyframes floatY {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-11px); }
}

@keyframes floatY2 {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(9px); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}