/* Sichtkraft Designtokens. Nur --sk- Namen verwenden. */

:root {
	/* Farben */
	--sk-navy: #0A1F44;
	--sk-navy-hell: #0F2855;
	--sk-navy-mittel: #1A3A6B;
	--sk-gold: #C8A97E;       /* nicht als Textfarbe auf hellem Grund */
	--sk-gold-hell: #E8D5B7;
	--sk-creme: #F8F5EF;
	--sk-grau: #4A5568;

	/* Schriften (lokale @font-face folgen, sobald die Dateien in assets/fonts/ liegen) */
	--sk-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--sk-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Abstände (vorläufig) */
	--sk-space-xs: 0.5rem;
	--sk-space-s: 1rem;
	--sk-space-m: 2rem;
	--sk-space-l: 4rem;
	--sk-space-xl: 8rem;

	--sk-radius: 1rem;

	/* Seitenraster: gleicher Rand wie Logo und Hero-Text, Inhalt höchstens so breit */
	--sk-rand: clamp(20px, 5vw, 64px);
	--sk-inhalt: 1440px;
}

/* Lokale Webfonts (SIL Open Font License, Quelle: @fontsource 5.3.0, Subset latin) */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}

/* Grundtypografie */
body {
	font-family: var(--sk-font-body);
	color: var(--sk-grau);
	background: var(--sk-creme);
}

/* Kadence setzt auf .site (Wrapper um Header/Inhalt) einen festen weißen Hintergrund. Sichtbar
   wird das nur, wenn Kadence bei kurzen Seiten den Inhalt streckt, damit der Footer immer unten
   bleibt (#inner-wrap { flex: 1 0 auto; }), z. B. auf der Kontaktseite bei hohem Browserfenster. */
.site.wp-site-blocks {
	background: var(--sk-creme);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sk-font-heading);
	color: var(--sk-navy);
}

/* Primärer Button (Gold): site-weit, nicht nur wo hero-scroll.css lädt, siehe .sk-hero__cta */
.sk-hero__cta {
	display: inline-block;
	margin-top: clamp(24px, 2.4vw, 40px);
	padding: clamp(14px, 1.2vw, 20px) clamp(28px, 2.6vw, 44px);
	background: var(--sk-gold);
	color: var(--sk-navy);
	font-family: var(--sk-font-body);
	font-size: clamp(0.9375rem, 0.6rem + 0.55vw, 1.125rem); /* 15 bis 18 px, wächst mit der Hero-Schrift */
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.sk-hero__cta:hover,
.sk-hero__cta:focus-visible {
	background: var(--sk-gold-hell);
	color: var(--sk-navy);
}

/* Doppelrahmen: Gold (sichtbar auf Navy) außen, Navy (sichtbar auf Creme, Gold allein nur 2:1) innen */
:focus-visible {
	outline: 3px solid var(--sk-gold);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--sk-navy);
}

/* Datenschutzhinweis unter Formularen (helle Formularkarten) */
.sk-form-datenschutz {
	margin: 1rem 0 0;
	font-family: var(--sk-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sk-grau);
}
.sk-form-datenschutz a {
	color: var(--sk-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}