/* ==========================================================================
   WSK Classic – Nachbau des bisherigen werkstattkonsum.de-Designs
   (wp-bootstrap-starter: Nunito für Fließtext, Oswald für Versal-Überschriften,
   Bootstrap-Raster 8/4, weiße Kopfzeile mit Aufklappmenüs)
   ========================================================================== */

/* ---- Schriften (lokal, SIL Open Font License) ------------------------ */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('fonts/oswald-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('fonts/oswald-latin-700-normal.woff2') format('woff2'); }

/* ---- Variablen --------------------------------------------------------- */
:root {
	--wsk-font-body: 'Nunito', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--wsk-font-heading: 'Oswald', 'Arial Narrow', Impact, sans-serif;
	--wsk-text: #212529;
	--wsk-text-muted: #6c757d;
	--wsk-link: #343a40;
	--wsk-nav-link: rgba(0, 0, 0, .55);
	--wsk-nav-link-hover: rgba(0, 0, 0, .8);
	--wsk-rule: #dee2e6;
	--wsk-hr: #8a8a8a;
	--wsk-bg: #ffffff;
	--wsk-header-shadow: 0 2px 12px rgba(0, 0, 0, .08);
	--wsk-container: 1140px;
	--wsk-gutter: 15px;

	/* Automad-Blöcke an das Layout anpassen */
	--am-block-max-width: none;
	--am-block-margin-top: 1.25rem;
	--am-hr-border: 3px solid var(--wsk-hr);
	--am-gallery-gap: 10px;
	--am-border-radius: 0;
	--am-border-color: var(--wsk-rule);
	--am-paragraph-large-font-size: 1.2rem;
	--am-paragraph-large-line-height: 1.55;
	--am-button-background: #343a40;
	--am-button-color: #fff;
	--am-button-border-color: #343a40;
	--am-button-border-radius: .25rem;
	--am-button-hover-background: #212529;
	--am-button-hover-color: #fff;
	--am-callout-background: #f8f9fa;
	--am-callout-border: 1px solid var(--wsk-rule);
	--am-callout-radius: .25rem;
	--am-callout-padding: 1rem 1.25rem;
	--am-container-padding: 0;
}

/* ---- Grundlagen -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--wsk-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wsk-text);
	background: var(--wsk-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--wsk-link); text-decoration: underline; text-underline-offset: .15em; }
a:hover { color: #000; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 2rem; }
li { margin-bottom: .1rem; }
hr { border: 0; border-top: 3px solid var(--wsk-hr); margin: 1.5rem 0; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wsk-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.2;
	margin: 0 0 .75rem;
	color: var(--wsk-text);
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4, h5, h6 { font-size: 1.05rem; }

.wsk-container {
	width: 100%;
	max-width: var(--wsk-container);
	margin: 0 auto;
	padding: 0 var(--wsk-gutter);
}

/* ---- Kopfzeile / Navigation ------------------------------------------- */
.wsk-header {
	background: #fff;
	box-shadow: var(--wsk-header-shadow);
	position: relative;
	z-index: 20;
}
.wsk-navbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	min-height: 4.25rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.wsk-brand {
	font-family: var(--wsk-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.3rem;
	text-decoration: none;
	color: var(--wsk-text);
}
.wsk-brand:empty { display: none; }
.wsk-toggler {
	display: none;
	width: 2.75rem;
	height: 2.5rem;
	margin-left: auto;
	padding: .5rem .55rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: .25rem;
	background: transparent;
	cursor: pointer;
}
.wsk-toggler span {
	display: block;
	height: 2px;
	margin: 5px 0;
	background: rgba(0, 0, 0, .55);
}
.wsk-nav {
	display: flex;
	align-items: center;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}
.wsk-nav__item { position: relative; margin: 0; }
.wsk-nav__link {
	display: block;
	padding: .5rem .6rem;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--wsk-nav-link);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
}
.wsk-nav__link:hover, .wsk-nav__link.is-active, .wsk-dropdown.is-current > .wsk-nav__link {
	color: var(--wsk-nav-link-hover);
}
.wsk-caret {
	display: inline-block;
	margin-left: .3em;
	vertical-align: .2em;
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-left: .3em solid transparent;
}
.wsk-dropdown__menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 11rem;
	margin: .125rem 0 0;
	padding: .5rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: .25rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}
.wsk-dropdown.is-open > .wsk-dropdown__menu { display: block; }
.wsk-dropdown__item {
	display: block;
	padding: .3rem 1.5rem;
	color: var(--wsk-text);
	text-decoration: none;
	white-space: nowrap;
}
.wsk-dropdown__item:hover, .wsk-dropdown__item.is-active { background: #f1f3f5; color: #000; }

/* ---- Hero (nur Startseite) -------------------------------------------
   Wie im Original: Schwarzweiß-Foto, stark aufgehellt, Text zentriert, Pfeil nach unten.
   Die Bilddatei (shared/hero.jpg) ist bereits ausgewaschen gespeichert, daher kein zusätzlicher
   Schleier. --wsk-hero-fade = Stärke eines weißen Schleiers (0 = Foto unverändert, 1 = weiß),
   falls einmal ein unbearbeitetes Foto verwendet wird (dann z.B. .75). */
.wsk-hero {
	--wsk-hero-fade: 0;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 330px;
	background: #e6e6e6;
	text-align: center;
	padding: 3rem 0 2.5rem;
}
.wsk-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: center / cover no-repeat;
	filter: grayscale(1);
}
.wsk-hero--image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, var(--wsk-hero-fade));
}
.wsk-hero__inner { position: relative; max-width: 820px; width: 100%; }
.wsk-hero__title { font-size: 2.1rem; margin-bottom: .75rem; color: #212529; }
.wsk-hero__text { font-size: 1.1rem; color: #333; }
.wsk-hero__text p:last-child { margin-bottom: 0; }
.wsk-hero__scroll {
	display: inline-block;
	margin-top: 1.25rem;
	color: #212529;
	line-height: 0;
	text-decoration: none;
	opacity: .85;
}
.wsk-hero__scroll:hover { opacity: 1; }

/* ---- Layout: Inhalt + Seitenleiste ------------------------------------- */
.wsk-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 0 calc(var(--wsk-gutter) * 2);
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.wsk-main {
	flex: 0 0 calc(66.6667% - var(--wsk-gutter));
	max-width: calc(66.6667% - var(--wsk-gutter));
	min-width: 0;
}
.wsk-sidebar {
	flex: 0 0 calc(33.3333% - var(--wsk-gutter));
	max-width: calc(33.3333% - var(--wsk-gutter));
	padding-left: calc(var(--wsk-gutter) * 2);
}
.wsk-main:last-child { flex-basis: 100%; max-width: 100%; }

.wsk-page-header { margin-bottom: 1.5rem; }
.wsk-title {
	padding-bottom: .6rem;
	margin-bottom: .5rem;
	border-bottom: 1px solid var(--wsk-rule);
}
.wsk-meta {
	font-size: .95rem;
	color: var(--wsk-text-muted);
	margin: 0 0 .5rem;
}
.wsk-meta time { font-weight: inherit; }

/* Blockinhalte: Abstand zwischen Blöcken kommt von Automad (*+.am-block, --am-block-margin-top) */
.wsk-content > .am-block:first-child { margin-top: 0; }
.wsk-content h2.am-block, .wsk-content h3.am-block { margin-top: 2rem; }
.wsk-content h2.am-block + figure.am-block, .wsk-content h3.am-block + figure.am-block { margin-top: .75rem; }
.wsk-content figcaption { font-size: .9rem; color: var(--wsk-text-muted); margin-top: .4rem; }
.wsk-content am-img-loader, .wsk-content img { display: block; width: 100%; }
.wsk-content table { width: 100%; border-collapse: collapse; }
.wsk-content th, .wsk-content td { border: 1px solid var(--wsk-rule); padding: .4rem .6rem; text-align: left; }

/* Galerie im Raster-Layout: Bilder füllen die Kachel und werden beschnitten (wie die alte WP-Galerie) */
.wsk-content .am-gallery-grid { --am-gallery-grid-item-background: transparent; --am-gallery-grid-item-radius: 0; }
.wsk-content .am-gallery-grid .am-gallery-img-small {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
}
.wsk-content .am-gallery-grid am-img-loader {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
.wsk-content .am-gallery-grid am-img-loader img { width: 100%; height: 100%; object-fit: cover; }

/* Beitragsliste (Startseite) */
.wsk-post { margin-bottom: 3.5rem; }
.wsk-post__header { margin-bottom: 1rem; }
.wsk-post__title {
	padding-bottom: .5rem;
	margin-bottom: .4rem;
	border-bottom: 1px solid var(--wsk-rule);
}
.wsk-post__title a { text-decoration: none; color: inherit; }
.wsk-post__title a:hover { text-decoration: underline; }

.wsk-posts-nav, .wsk-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wsk-rule);
}
.wsk-posts-nav__newer, .wsk-post-nav__next { margin-left: auto; text-align: right; }

/* ---- Seitenleiste ------------------------------------------------------ */
.wsk-widget { margin-bottom: 2.25rem; }
.wsk-widget__title { margin-bottom: .75rem; }
.wsk-widget p { margin-bottom: 1rem; }
.wsk-widget p:last-child { margin-bottom: 0; }
.wsk-widget ul { list-style: none; padding: 0; margin: 0; }
.wsk-widget li { margin-bottom: .75rem; }
.wsk-icon { width: 1em; height: 1em; vertical-align: -.1em; margin-right: .25em; }
.wsk-hours { line-height: 1.75; }
.wsk-address p { margin-bottom: .5rem; }
.wsk-social { display: flex; gap: .75rem; padding-top: .75rem; }
.wsk-social img { width: 40px; height: 40px; border-radius: 9px; }
.wsk-misc p { margin-bottom: .75rem; }
.wsk-widget--badge img { max-width: 240px; }

/* ---- Fußzeile ---------------------------------------------------------- */
.wsk-footer {
	padding: 2.5rem 0 2rem;
	font-size: .95rem;
}

/* ---- Kleine Bildschirme ------------------------------------------------ */
@media (max-width: 991.98px) {
	.wsk-toggler { display: block; }
	.wsk-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		margin: .5rem 0 0;
		padding: .5rem 0 .75rem;
	}
	.wsk-nav.is-open { display: flex; }
	.wsk-nav__link { padding: .55rem .5rem; text-align: left; width: 100%; font-size: 1.1rem; }
	.wsk-dropdown__menu {
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0 0 .5rem 1.25rem;
	}
	.wsk-main, .wsk-sidebar {
		flex-basis: 100%;
		max-width: 100%;
		padding-left: 0;
	}
	.wsk-sidebar { margin-top: 3.5rem; padding: 0 .75rem; }
	.wsk-layout { padding-top: 2rem; }
	.wsk-hero { padding: 2.5rem 0 2rem; }
	.wsk-hero__title { font-size: 1.7rem; }
}
@media (max-width: 575.98px) {
	body { font-size: 1rem; }
	h1 { font-size: 1.5rem; }
}

/* ---- Drucken ----------------------------------------------------------- */
@media print {
	.wsk-header, .wsk-sidebar, .wsk-posts-nav, .wsk-post-nav { display: none; }
	.wsk-main { flex-basis: 100%; max-width: 100%; }
}

/* ---- Pagelist-Block (Gruppenseiten) ----------------------------------- */
.wsk-pagelist { list-style: none; padding: 0; margin: 0; }
.wsk-pagelist__item { padding: .9rem 0; border-bottom: 1px solid var(--wsk-rule); }
.wsk-pagelist__item:first-child { padding-top: 0; }
.wsk-pagelist__link {
	font-family: var(--wsk-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.15rem;
	text-decoration: none;
}
.wsk-pagelist__teaser { margin: .25rem 0 0; color: var(--wsk-text-muted); font-size: .95rem; }