/*
Theme Name: Rundenwerk
Theme URI: https://rundenwerk.org/
Author: Rundenwerk
Author URI: https://rundenwerk.org/
Description: Originale deutschsprachige Vitrine des Wachtzyklus aus Trier. Dunkle Harz-und-Stein-Palette, vier eigene Werkzeuge zu Wachtzyklus, Fackelrest, Siegelwahl und Glockenordnung. Wir verkaufen nichts; wir zeigen den Zyklus.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rundenwerk
Tags: vitrine, spiel, zyklus, deutsch, custom-widgets
*/

@font-face {
	font-family: 'Libre Baskerville';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/libre-baskerville-700-latin.woff2') format('woff2');
	unicode-range: U+0000-002F, U+003A-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Libre Baskerville';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/libre-baskerville-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/source-sans-3-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/source-sans-3-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/source-sans-3-600-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/source-sans-3-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--nacht: #161218;
	--kammer: #221c24;
	--haarlinie: #322a36;
	--rand: #9488a0;
	--bein: #eee6f0;
	--asche: #b8a8c0;
	--fackel: #e8a050;
	--siegel: #5eb8a8;
	--warn: #e07068;
	--display: 'Libre Baskerville', serif;
	--lijf: 'Source Sans 3', sans-serif;
	--maat: 1.05rem;
	--regel: 1.55;
	--mauer: 4.6rem;
}

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

html {
	font-size: 100%;
	background: var(--nacht);
	color: var(--bein);
	scroll-padding-top: var(--mauer);
	scroll-behavior: smooth;
}

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	padding: 0 0 8rem;
	font-family: var(--lijf);
	font-weight: 400;
	font-size: var(--maat);
	line-height: var(--regel);
	background-color: var(--nacht);
	background-image: url('images/tekstur-stein.jpg');
	background-size: 1400px auto;
	background-blend-mode: multiply;
	color: var(--bein);
}

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

h1,
h2,
h3,
.turmkopf__naam,
.dochtwerk__naam {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.25;
	color: var(--bein);
}

.ziffer,
.dochtwerk__stand,
.verdwaald__getal {
	font-family: var(--lijf);
	font-variant-numeric: lining-nums;
}

a {
	color: var(--siegel);
}

a:hover,
a:focus-visible {
	color: var(--fackel);
}

:focus-visible {
	outline: 2px solid var(--fackel);
	outline-offset: 2px;
}

.saltar {
	position: absolute;
	left: 1rem;
	top: 0.6rem;
	padding: 0.6rem 1rem;
	min-height: 36px;
	background: var(--fackel);
	color: var(--nacht);
	transform: translateY(-220%);
	text-decoration: none;
}

.saltar:focus {
	transform: none;
	color: var(--nacht);
}

.turmkopf {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--kammer);
	border-bottom: 1px solid var(--rand);
}

.turmkopf__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	max-width: 72rem;
	margin: 0 auto;
	padding: 0.55rem 1rem;
}

.turmkopf__merk {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: var(--bein);
	text-decoration: none;
	min-height: 36px;
}

.turmkopf__naam {
	font-size: 1.35rem;
	letter-spacing: 0.01em;
}

.turmkopf__ring {
	width: 1em;
	height: 1em;
	margin-left: 1em;
	flex: 0 0 1em;
}

.turmkopf__klopper {
	margin-left: auto;
	min-height: 36px;
	min-width: 36px;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--rand);
	background: var(--nacht);
	color: var(--bein);
	cursor: pointer;
	font-family: var(--lijf);
	font-size: 0.95rem;
}

.turmkopf__streepjes {
	display: block;
}

.turmkopf__streepjes i {
	display: block;
	width: 1.1rem;
	height: 2px;
	margin: 4px 0;
	background: var(--bein);
}

.turmkopf__dicht {
	display: none;
}

.turmkopf--open .turmkopf__open {
	display: none;
}

.turmkopf--open .turmkopf__dicht {
	display: inline;
}

.wachtliste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wachtliste a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	text-decoration: none;
	color: var(--bein);
	font-weight: 600;
}

.wachtliste a:hover,
.wachtliste a:focus-visible {
	color: var(--fackel);
}

@media (max-width: 61.99em) {
	.turmkopf__navigatie {
		display: none;
		width: 100%;
	}

	.turmkopf--open .turmkopf__navigatie {
		display: block;
	}

	.wachtliste {
		flex-direction: column;
		padding: 0.4rem 0 0.8rem;
	}
}

@media (min-width: 62em) {
	.turmkopf__klopper {
		display: none;
	}

	.turmkopf__navigatie {
		display: block;
		margin-left: auto;
	}
}

.wachtgang,
.gang {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.4rem 1rem;
}

.runde {
	background: var(--nacht);
	color: var(--bein);
	border-bottom: 1px solid var(--haarlinie);
}

.runde--kammer {
	position: relative;
	background: var(--kammer);
}

.runde--kammer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('images/tekstur-russ.jpg');
	background-size: cover;
	opacity: 0.14;
	pointer-events: none;
}

.runde--kammer > * {
	position: relative;
}

.runde--kort .wachtgang {
	padding-bottom: 0.4rem;
}

.runde__merk {
	margin: 0 0 0.35rem;
	color: var(--fackel);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.82rem;
}

.runde__inleiding {
	color: var(--asche);
	max-width: 42rem;
}

.runde__beeld {
	margin: 0 0 1rem;
}

.runde__beeld img,
.nachtfeld__beeld img,
.duo__beeld img {
	width: 100%;
	object-fit: cover;
}

.runde__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.kerncijfers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 1rem 0;
}

.kerncijfers article {
	flex: 1 1 8rem;
	background: var(--nacht);
	border: 1px solid var(--rand);
	padding: 0.7rem 0.8rem;
}

.kerncijfers .ziffer {
	display: block;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--fackel);
}

[data-foto-achter] {
	background-color: var(--kammer);
}

.smeekblad {
	position: relative;
}

.zyklusnaht {
	display: flex;
	justify-content: center;
	padding: 0.4rem 0;
	background: var(--nacht);
	border-bottom: 1px solid var(--haarlinie);
}

.nachtfeld {
	display: flex;
	flex-direction: column;
	background: var(--kammer);
}

.nachtfeld__beeld {
	margin: 0;
}

.nachtfeld__tekst {
	padding: 1.4rem 1rem 1.8rem;
	background: var(--kammer);
}

.nachtfeld__boven {
	margin: 0 0 0.4rem;
	color: var(--asche);
	font-weight: 600;
}

@media (min-width: 56em) {
	.nachtfeld {
		flex-direction: row;
		align-items: stretch;
	}

	.nachtfeld__beeld {
		flex: 1 1 52%;
		max-width: 52%;
	}

	.nachtfeld__beeld img {
		height: 100%;
		object-fit: cover;
	}

	.nachtfeld__tekst {
		flex: 1 1 48%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2.2rem 2rem;
	}
}

.duo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.duo__tekst {
	background: var(--kammer);
	padding: 1rem;
	border: 1px solid var(--rand);
}

@media (min-width: 52em) {
	.duo {
		flex-direction: row;
		align-items: stretch;
	}

	.duo__tekst {
		flex: 1 1 46%;
		order: 2;
	}

	.duo__beeld {
		flex: 1 1 54%;
		order: 1;
		margin: 0;
	}
}

.wachtvier {
	margin: 0;
}

.wachtvier__rij {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.7rem 0 0.7rem 1.1rem;
	border-left: 3px solid var(--fackel);
	margin: 0 0 0.8rem;
	background: var(--kammer);
}

.wachtvier__rij:nth-child(even) {
	margin-left: 1.6rem;
	border-left-color: var(--siegel);
}

.wachtvier dt {
	font-weight: 600;
	color: var(--fackel);
}

.wachtvier dd {
	margin: 0;
	color: var(--asche);
}

.dochtknopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--fackel);
	background: var(--fackel);
	color: var(--nacht);
	font-family: var(--lijf);
	font-weight: 600;
	font-size: 0.98rem;
	text-decoration: none;
	cursor: pointer;
}

.dochtknopf:hover,
.dochtknopf:focus-visible {
	color: var(--nacht);
	filter: brightness(1.06);
}

.dochtknopf--stil {
	background: var(--kammer);
	color: var(--bein);
	border-color: var(--siegel);
}

.dochtknopf--stil:hover,
.dochtknopf--stil:focus-visible {
	color: var(--siegel);
}

.dochtknopf--keuze {
	background: var(--nacht);
	color: var(--bein);
	border-color: var(--rand);
}

.dochtknopf--aan {
	background: var(--siegel);
	color: var(--nacht);
	border-color: var(--siegel);
}

.dochtwerk {
	background: var(--kammer);
	border: 1px solid var(--rand);
	padding: 1rem;
	margin: 0 0 1rem;
}

.dochtwerk fieldset {
	border: 1px solid var(--haarlinie);
	margin: 0 0 0.8rem;
	padding: 0.6rem 0.7rem 0.8rem;
}

.dochtwerk legend {
	padding: 0 0.4rem;
	color: var(--asche);
	font-weight: 600;
}

.dochtwerk__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.dochtwerk__goot {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 108px;
	box-sizing: border-box;
	border: 1px solid var(--rand);
	padding: 4px;
	margin: 0 0 0.8rem;
	overflow: hidden;
	background: var(--nacht);
}

.dochtwerk__staaf {
	flex: 1 1 0;
	display: block;
	min-width: 0;
	min-height: 8px;
	background: var(--fackel);
	border-radius: 999px 999px 3px 3px;
}

.dochtwerk__staaf[data-hoogte="1"] { height: 12px; }
.dochtwerk__staaf[data-hoogte="2"] { height: 24px; }
.dochtwerk__staaf[data-hoogte="3"] { height: 36px; }
.dochtwerk__staaf[data-hoogte="4"] { height: 48px; }
.dochtwerk__staaf[data-hoogte="5"] { height: 60px; }
.dochtwerk__staaf[data-hoogte="6"] { height: 72px; }
.dochtwerk__staaf[data-hoogte="7"] { height: 84px; }
.dochtwerk__staaf[data-hoogte="8"] { height: 96px; }

.dochtwerk__stand {
	min-height: 3.2rem;
	margin: 0 0 0.6rem;
	color: var(--bein);
}

.kornreihe {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.korn {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--kammer);
	border: 1px solid var(--rand);
	border-left: 0;
}

.korn__rug {
	margin: 0;
	padding: 0.55rem 0.8rem;
	background: var(--fackel);
	color: var(--nacht);
	font-weight: 600;
	writing-mode: horizontal-tb;
}

.korn p {
	margin: 0.7rem 0.9rem;
}

.korn footer {
	margin: 0 0.9rem 0.8rem;
	color: var(--asche);
	font-size: 0.92rem;
}

@media (min-width: 48em) {
	.korn {
		flex-direction: row;
		align-items: stretch;
	}

	.korn__rug {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		min-width: 2.6rem;
		padding: 0.8rem 0.35rem;
		text-align: center;
	}
}

.leute {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.leute figure {
	margin: 0;
	background: var(--kammer);
	border: 1px solid var(--rand);
}

.leute img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

.leute figcaption {
	padding: 0.7rem 0.9rem;
}

.leute figcaption p {
	margin: 0.2rem 0;
}

@media (min-width: 48em) {
	.leute {
		flex-direction: row;
	}

	.leute__een {
		flex: 1 1 42%;
	}

	.leute__twee {
		flex: 1 1 42%;
		margin-top: 2.2rem;
	}
}

.chipreihe {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.stundechip {
	display: flex;
	gap: 0.9rem;
	padding: 0.8rem;
	background: var(--kammer);
	border: 1px solid var(--rand);
}

.stundechip__uur {
	flex: 0 0 4.4rem;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	background: var(--siegel);
	color: var(--nacht);
	font-weight: 600;
	text-align: center;
	padding: 0.3rem;
}

.stundechip h2 a,
.stundechip h3 {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--bein);
	text-decoration: none;
}

.fragenlage {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.frage {
	background: var(--kammer);
	border: 1px solid var(--rand);
	padding: 0.2rem 0.8rem 0.4rem;
}

.frage summary {
	display: flex;
	align-items: center;
	min-height: 36px;
	cursor: pointer;
	font-weight: 600;
}

.cta__tekst {
	background: var(--kammer);
	padding: 1rem;
	border: 1px solid var(--rand);
	margin-top: 0.8rem;
}

.proza {
	max-width: 44rem;
}

.proza h2 {
	margin-top: 1.4rem;
}

.melding {
	padding: 0.7rem 0.8rem;
	background: var(--siegel);
	color: var(--nacht);
	font-weight: 600;
}

.melding--fout {
	background: var(--warn);
	color: var(--nacht);
}

.smeekblad__opzet {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

@media (min-width: 52em) {
	.smeekblad__opzet {
		flex-direction: row;
	}

	.smeekblad {
		flex: 1 1 58%;
	}

	.smeekblad__hulp {
		flex: 1 1 38%;
		background: var(--nacht);
		border: 1px solid var(--rand);
		padding: 1rem;
	}
}

.veldrand {
	margin: 0 0 0.7rem;
}

.veldrand label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.veldrand input,
.veldrand select,
.veldrand textarea {
	width: 100%;
	min-height: 36px;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--rand);
	background: var(--nacht);
	color: var(--bein);
	font-family: var(--lijf);
	font-size: 1rem;
}

.lokdocht {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tafelraam {
	overflow-x: auto;
	margin: 1rem 0;
	border: 1px solid var(--rand);
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 32rem;
}

th,
td {
	padding: 0.55rem 0.7rem;
	text-align: left;
	border-bottom: 1px solid var(--haarlinie);
	vertical-align: top;
}

th {
	background: var(--kammer);
	color: var(--fackel);
}

code {
	font-family: var(--lijf);
	font-weight: 600;
	color: var(--fackel);
}

.verdwaald__getal {
	margin: 0;
	font-size: 4rem;
	font-weight: 600;
	color: var(--fackel);
	line-height: 1;
}

.js .opdaagt {
	opacity: 0;
	transform: translateX(-14px);
}

.js .opdaagt--op {
	opacity: 1;
	transform: none;
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.kerker {
	background: var(--kammer);
	color: var(--bein);
	border-top: 1px solid var(--rand);
	padding: 1.6rem 0 1.2rem;
}

.kerker__binnen {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem;
}

.kerker__raster {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 52em) {
	.kerker__raster {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.kerker__blok {
		flex: 1 1 14rem;
	}
}

.kerker__blok h2 {
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
}

.kerker__blok ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kerker__blok a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.kerker__daten {
	margin: 1.2rem 0;
}

.kerker__daten dt {
	font-weight: 600;
	margin-top: 0.4rem;
	color: var(--asche);
}

.kerker__daten dd {
	margin: 0;
}

.kerker__hinweis {
	margin: 1rem 0;
	padding: 0.8rem 0.9rem;
	background: var(--nacht);
	border: 1px solid var(--rand);
	color: var(--bein);
	font-size: 0.95rem;
}

.kerker__slot {
	color: var(--asche);
	font-size: 0.92rem;
}

.docht {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	background: var(--kammer);
	border-top: 1px solid var(--rand);
	padding: 0.9rem 1rem 1.1rem;
	color: var(--bein);
}

.docht__binnen {
	max-width: 72rem;
	margin: 0 auto;
}

.docht__knoppen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.docht__knoppen .dochtknopf {
	width: 100%;
	min-height: 3.2rem;
}

.koekwis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.koekwis__melding {
	color: var(--siegel);
	font-weight: 600;
}

@media (max-width: 390px) {
	.docht {
		max-height: 36vh;
		overflow-y: auto;
		padding: 0.45rem 0.7rem 0.55rem;
	}

	.docht p {
		margin: 0 0 0.4rem;
		font-size: 0.88rem;
	}

	.wachtvier__rij:nth-child(even) {
		margin-left: 0.4rem;
	}
}