/*
 * Gemeinsame Grundlage: Schriften, Farben, Kopfbereich, Menü, Footer, Textstile, Buttons, Einblend-Effekt.
 * Maße und Verhalten sind am Original (keramikdrehen.de bei Jimdo) gemessen, der Code ist selbst geschrieben.
 *
 * Bausteine für Seiten (Präfix kd-):
 *   .kd-section > .kd-section__inner   Abschnitt mit der Breite und den Abständen des Originals
 *       Hintergrund über Hilfsklassen: .kd-bg-shade1, .kd-bg-shade2, .kd-bg-main, .kd-bg-secondary, .kd-bg-white
 *   .kd-text > .kd-text__body.kd-prose  Textspalte (730 px) mit den Textstilen des Originals
 *   .kd-buttons > .kd-buttons__row > a.kd-button (> span)   Button, mit .kd-button--outline als Umriss-Variante
 *   [data-kd-fade]                      Element blendet beim Scrollen ein (Verhalten in scripts/base.js)
 * Farben als Variablen: --kd-black, --kd-white, --kd-shade1, --kd-shade2, --kd-main, --kd-secondary,
 *   --kd-text (Textfarbe), --kd-text-hover; Schriften: --kd-font-head, --kd-font-copy.
 */

/* Schriften: nur die Latin-Teilmenge, wie sie das Original lädt (SIL Open Font License, siehe fonts/OFL.txt) */
@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/raleway-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Old Standard TT";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/old-standard-tt-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Old Standard TT";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/old-standard-tt-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--kd-black: #000000;
	--kd-white: #ffffff;
	--kd-shade1: #d4d4d4;
	--kd-shade2: #c6c190;
	--kd-main: #84a3be;
	--kd-secondary: #e2dcda;
	--kd-text: #323335;
	--kd-text-hover: #535353;
	--kd-font-copy: "Raleway", sans-serif;
	--kd-font-head: "Old Standard TT", serif;
}

/* Grundlage */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
[hidden] { display: none !important; }
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Der Kopf wird ab 10 px Scrollweg kleiner, der Inhalt rutscht dabei nach oben (wie im Original).
	   Ohne diese Zeile würde der Browser den Scrollweg zurückrechnen, und der Kopf flackerte an der Schwelle. */
	overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
html.kd-menu-open { overflow: hidden; }
body {
	background: var(--kd-white);
	font-family: var(--kd-font-copy);
	font-weight: 300;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img { max-width: 100%; }

.kd-skip {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 1100;
	padding: 10px 16px;
	background: var(--kd-white);
	color: var(--kd-text);
}
.kd-skip:focus {
	top: 10px;
	left: 10px;
}
main:focus { outline: none; }

/* Hintergrundfarben der Abschnitte */
.kd-bg-white { background-color: var(--kd-white); }
.kd-bg-shade1 { background-color: var(--kd-shade1); }
.kd-bg-shade2 { background-color: var(--kd-shade2); }
.kd-bg-main { background-color: var(--kd-main); }
.kd-bg-secondary { background-color: var(--kd-secondary); }

/* ------------------------------------------------------------------ Kopfbereich */
/* Der Kopf bleibt oben stehen und verkleinert sich, sobald gescrollt wird (Klasse is-scrolled, ab 10 px).
   position: sticky statt fixed: Der Kopf nimmt im Fluss seinen Platz ein, der Inhalt rutscht mit ihm. */
.kd-header {
	--kd-logo-w: 64px;
	position: sticky;
	top: 0;
	z-index: 5;
	width: 100%;
	background: var(--kd-white);
	color: var(--kd-text);
}
.kd-header.is-scrolled { --kd-logo-w: 44px; }

.kd-header__bar {
	display: flex;
	justify-content: space-between;
	min-height: 100px;
	padding: 0 20px;
}
.kd-header__side,
.kd-brand {
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0 20px;
}
.kd-header__side { flex: 1 1 0; }
.kd-header__side--right { justify-content: flex-end; }
/* Kompakte Anordnung, wenn links kaum Platz bleibt (schmale Telefone): Der Burger rückt an den Rand */
.kd-header.is-compact .kd-header__side--left { margin-left: 0; }
.kd-header.is-compact .kd-header__side--right { margin-right: 0; }
.kd-header.is-compact .kd-brand { flex-shrink: 1; }

.kd-brand {
	flex-direction: column;
	flex-shrink: 0;
	justify-content: center;
}
.kd-brand__logo {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: center;
	min-width: 0;
	text-decoration: none;
}
/* Nur die Breite wird weich verändert, der Abstand (35 % der Breite) springt sofort */
.kd-brand__logo-box {
	display: block;
	width: var(--kd-logo-w);
	max-width: 100%;
	padding: calc(var(--kd-logo-w) * 0.35) 0;
	transition: width 300ms;
}
.kd-brand__ratio {
	position: relative;
	display: block;
	width: 100%;
	padding-bottom: 100%;
	overflow: hidden;
}
.kd-brand__ratio img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: auto;
}
.kd-brand__logo ~ .kd-brand__title { margin-top: -10px; }
.kd-brand__title {
	display: block;
	min-width: 0;
	max-width: 100%;
	color: var(--kd-text);
	text-decoration: none;
}
.kd-brand__title-box {
	display: block;
	width: 100%;
	padding: 10px 0;
	overflow: hidden;
}
.kd-brand__text {
	display: block;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.6;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: font-size 0.2s ease-in-out;
}

/* ------------------------------------------------------------------ Menü (Computer) */
.kd-nav { min-width: 0; }
.kd-nav__list {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0 12px 0 0;
	font-size: 1rem;
	line-height: 40px;
	letter-spacing: 0;
	list-style: none;
}
html.js .kd-nav__list { flex-wrap: nowrap; }
.kd-nav__item {
	position: relative;
	white-space: nowrap;
}
.kd-nav__link {
	display: flex;
	align-items: center;
	padding: 20px;
	border: 0;
	background: none;
	color: var(--kd-text);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}
.kd-nav__link:focus { outline: none; }
.kd-nav__text {
	position: relative;
	display: inline-block;
	line-height: 24px;
}
/* Unterstreichung: gleitet bei Hover, Fokus und für die aktuelle Seite ein */
.kd-nav__text::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--kd-text);
	opacity: 0;
	transform: translateY(calc(100% - 4px));
	transition: all 0.2s;
}
.kd-nav__link:hover .kd-nav__text::after,
.kd-nav__link:focus-visible .kd-nav__text::after,
.kd-nav__link.is-active .kd-nav__text::after {
	opacity: 1;
	transform: translateY(100%);
}
/* Im Auswahlmenü markiert das Original die aktuelle Seite nicht */
.kd-nav__dropdown .kd-nav__link.is-active:not(:hover):not(:focus-visible) .kd-nav__text::after {
	opacity: 0;
	transform: translateY(calc(100% - 4px));
}

.kd-nav__caret {
	display: flex;
	flex-grow: 1;
	justify-content: flex-end;
	width: 8px;
	height: 4px;
	margin-left: 10px;
}
.kd-nav__caret svg {
	display: flex;
	transition: transform 0.2s ease-in-out;
}
.kd-nav__more.is-open .kd-nav__caret svg { transform: rotate(-180deg); }

.kd-nav__dropdown {
	position: absolute;
	left: -20px;
	z-index: 2;
	display: none;
	min-width: 200px;
	margin: 10px 0 0 30px;
	border-radius: 5px;
	background: var(--kd-white);
	box-shadow: 0 7px 11px 0 rgba(0, 0, 0, 0.2);
	font-size: 1rem;
	line-height: 36px;
	letter-spacing: 0;
	list-style: none;
}
.kd-nav__more.is-open > .kd-nav__dropdown { display: block; }
/* Brücke über den Abstand zwischen "Mehr" und dem Auswahlmenü, damit es beim Hinübergleiten offen bleibt */
.kd-nav__dropdown::before {
	content: "";
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	height: 10px;
}
.kd-nav__dropdown::after {
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 16%;
	width: 0;
	height: 0;
	margin-left: -5px;
	border: 5px solid transparent;
	border-bottom-color: var(--kd-white);
	pointer-events: none;
}
.kd-nav__dropdown .kd-nav__item { white-space: normal; }
.kd-nav__dropdown .kd-nav__link {
	width: 100%;
	padding: 10px 20px;
}

/* Vor der ersten Messung bleibt das Menü unsichtbar, damit nichts springt */
html.js:not(.kd-ready) .kd-nav,
html.js:not(.kd-ready) .kd-burger { visibility: hidden; }

/* ------------------------------------------------------------------ Menü (Mobil) */
.kd-burger {
	display: none;
	align-items: center;
	width: 20px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kd-text);
	cursor: pointer;
}
.kd-burger:focus-visible {
	outline: 2px solid var(--kd-text);
	outline-offset: 6px;
}
.kd-header.is-mobile .kd-burger { display: flex; }
.kd-burger__icon {
	position: relative;
	display: block;
	width: 20px;
	height: 15px;
}
.kd-burger__icon span {
	position: absolute;
	left: 0;
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 4px;
	background: var(--kd-text);
	transform-origin: 10px 1px;
	transition: transform 0.25s ease-in-out;
}
.kd-burger__icon span:nth-child(1) { top: 0; }
.kd-burger__icon span:nth-child(2),
.kd-burger__icon span:nth-child(3) { top: 6px; }
.kd-burger__icon span:nth-child(4) { top: 12px; }
.kd-header.is-open .kd-burger__icon span:nth-child(1),
.kd-header.is-open .kd-burger__icon span:nth-child(4) {
	top: 8px;
	left: 10px;
	width: 0;
	transform-origin: 0 1px;
}
.kd-header.is-open .kd-burger__icon span:nth-child(2) { transform: rotate(45deg); }
.kd-header.is-open .kd-burger__icon span:nth-child(3) { transform: rotate(-45deg); }

/* Das Menü wird zur Schublade unter dem Kopf: 455 px breit, bei schmalen Fenstern (bis 499 px) über die ganze Breite.
   Der Rest der Seite bleibt daneben sichtbar. */
.kd-header.is-mobile .kd-nav {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 455px;
	max-width: 0;
	height: calc(100vh - var(--kd-header-h, 144px));
	height: calc(100dvh - var(--kd-header-h, 144px));
	overflow: hidden;
	visibility: hidden;
	background: var(--kd-white);
	transition: max-width 0.1s, visibility 0s 0.1s;
}
.kd-header.is-mobile.is-open .kd-nav {
	max-width: 455px;
	overflow-y: auto;
	visibility: visible;
	transition: max-width 0.1s, visibility 0s;
}
.kd-header.is-mobile .kd-nav__list {
	display: block;
	margin: 0;
	padding: 40px 0;
}
.kd-header.is-mobile .kd-nav__item {
	display: flex;
	align-items: center;
	height: 60px;
	padding: 0 20px;
	white-space: normal;
}
.kd-header.is-compact .kd-nav__item { padding: 0 20px 0 0; }
.kd-header.is-mobile .kd-nav__link {
	flex: 1;
	min-width: 0;
}
@media (max-width: 499px) {
	.kd-header.is-mobile .kd-nav { width: 100%; }
	.kd-header.is-mobile.is-open .kd-nav { max-width: 100%; }
	.kd-header.is-mobile .kd-nav__list { padding-top: 20px; }
}

/* ------------------------------------------------------------------ Abschnitte und Text */
.kd-section {
	position: relative;
	z-index: 3;
	width: 100%;
}
.kd-section__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0 auto;
	padding: 60px 20px;
}
@media (max-width: 1440px) {
	.kd-section__inner { max-width: 900px; }
}
@media (min-width: 1281px) {
	.kd-section__inner {
		max-width: 1280px;
		padding: 60px;
	}
}
@media (min-width: 1441px) {
	.kd-section__inner {
		max-width: 1440px;
		padding: 60px;
	}
}
/* Randlos über die ganze Breite (z. B. für Bildflächen) */
.kd-section__inner--full {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.kd-text {
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
}
.kd-text__body {
	width: 100%;
	padding: 20px 0;
	overflow-wrap: break-word;
}

/* Textstile (Überschriften Old Standard TT, Fließtext Raleway Light) */
.kd-prose {
	color: var(--kd-text);
	font-family: var(--kd-font-copy);
	font-weight: 300;
	line-height: 1.5;
}
.kd-prose strong { font-weight: 700; }
.kd-prose h1, .kd-prose h2, .kd-prose h3, .kd-prose h4, .kd-prose h5, .kd-prose h6 {
	margin: 20px 0;
	font-family: var(--kd-font-head);
	font-weight: 400;
	line-height: 1.3;
	hyphens: auto;
	hyphenate-limit-chars: 12 6 6;
	transition: font-size 0.2s ease-in-out;
}
.kd-prose h1 strong, .kd-prose h2 strong, .kd-prose h3 strong,
.kd-prose h4 strong, .kd-prose h5 strong, .kd-prose h6 strong { font-weight: 700; }
.kd-prose h1 { font-size: 48px; }
.kd-prose h2 { font-size: 36px; }
.kd-prose h3, .kd-prose h4, .kd-prose h5, .kd-prose h6 { font-size: 24px; }
.kd-prose h1:first-child, .kd-prose h2:first-child, .kd-prose h3:first-child,
.kd-prose h4:first-child, .kd-prose h5:first-child, .kd-prose h6:first-child { margin-top: 0; }
.kd-prose h1:last-child, .kd-prose h2:last-child, .kd-prose h3:last-child,
.kd-prose h4:last-child, .kd-prose h5:last-child, .kd-prose h6:last-child { margin-bottom: 0; }
.kd-prose p {
	font-size: 18px;
	line-height: 1.6;
	transition: font-size 0.2s ease-in-out;
}
.kd-prose p a { text-decoration: underline; }
.kd-prose p a:hover,
.kd-prose p a:focus { text-decoration: none; }
.kd-prose ul, .kd-prose ol { margin: 0 0 0 30px; }
.kd-prose li { font-size: 18px; }
.kd-prose .text-align-center { text-align: center; }
.kd-prose .text-align-right { text-align: right; }
@media (max-width: 1280px) {
	.kd-prose h1 { font-size: 36px; }
	.kd-prose h2 { font-size: 24px; }
	.kd-prose h3, .kd-prose h4, .kd-prose h5, .kd-prose h6 { font-size: 18px; }
	.kd-prose p, .kd-prose li { font-size: 16px; }
}

/* ------------------------------------------------------------------ Buttons */
.kd-buttons { padding-top: 10px; margin: 0 -10px; }
.kd-buttons__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	max-width: 100%;
}
.kd-buttons .kd-button { margin: 10px; }
.kd-button {
	position: relative;
	display: block;
	max-width: 100%;
	border-radius: 25px;
	background-color: var(--kd-black);
	color: var(--kd-white);
	font: inherit;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}
.kd-button > span {
	display: block;
	width: 100%;
	padding: 16px 30px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: inherit;
	background-color: rgba(255, 255, 255, 0);
	line-height: 1;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color 0.2s ease-in-out;
}
.kd-button:hover > span,
.kd-button:focus > span { background-color: rgba(255, 255, 255, 0.1); }
.kd-button--outline {
	background-color: transparent;
	color: var(--kd-text);
}
.kd-button--outline > span {
	border-color: var(--kd-black);
	background-color: transparent;
}
.kd-button--outline:hover > span,
.kd-button--outline:focus > span { background-color: rgba(0, 0, 0, 0.1); }

/* ------------------------------------------------------------------ Footer */
.kd-footer {
	position: relative;
	z-index: 3;
	width: 100%;
	background-color: var(--kd-secondary);
	color: var(--kd-text);
}
.kd-footer__row {
	display: flex;
	flex-direction: column;
}
.kd-footer__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 40px;
}
.kd-footer__link {
	display: block;
	padding: 5px 10px 5px 0;
	color: var(--kd-text);
	text-decoration: underline;
}
.kd-footer__link:hover,
.kd-footer__link.is-current { color: var(--kd-text-hover); }
@media (max-width: 800px) {
	.kd-footer__nav { flex-direction: column; }
}

/* ------------------------------------------------------------------ Einblend-Effekt
   Elemente mit data-kd-fade werden von scripts/base.js je nach Scrollposition eingeblendet (Deckkraft per
   Inline-Stil). Ohne JavaScript bleiben sie sichtbar, vor dem Start des Skripts sind sie noch unsichtbar. */
[data-kd-fade] { will-change: opacity; }
html.js:not(.kd-fade-ready) [data-kd-fade] { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	[data-kd-fade] { transition: opacity 0.2s, transform 0.2s; }
}