/* =============================================================
   Designsystem — Bausteine
   Kopfzeile, Navigation, Knöpfe, Karten, Formulare, Fußzeile.

   Grundform aller Bausteine: 2px Tinte als Rand, harter Schatten
   ohne Unschärfe. Das wirkt gedruckt statt schwebend.
   ============================================================= */

/* --- Kopfzeile ----------------------------------------------------- */

.kopf {
	background: var(--papier);
	border-bottom: var(--rand-stark);
}

.kopf__innen {
	max-width: var(--bahn-breit);
	margin-inline: auto;
	padding: var(--r2) var(--rand);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r3);
}

/* Klebend erst ab Tablet — auf dem Handy ist Höhe zu wertvoll. */
@media (min-width: 720px) {
	.kopf {
		position: sticky;
		top: 0;
		z-index: 40;
	}
}

.marke {
	display: flex;
	align-items: center;
	gap: var(--r2);
	text-decoration: none;
	color: var(--tinte);
	flex-shrink: 1;
	min-width: 0;
}
.marke:hover { color: var(--tinte); background: none; }

.marke__zeichnung {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	color: var(--tinte);
	background: var(--signal);
	border-radius: var(--rund);
	padding: 5px;
}
.marke__zeichnung path,
.marke__zeichnung rect { stroke-width: 2.4; }

.marke__text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }

.marke__name {
	font-family: var(--schrift-anzeige);
	font-weight: 850;
	font-stretch: 75%;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0;
}

.marke__ort {
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 600;
	font-stretch: 110%;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tinte-2);
	margin-top: 0.15rem;
}

/* --- Navigation ----------------------------------------------------- */

.menue-schalter {
	/* Liegt über dem geöffneten Panel, damit man es auch wieder schließen kann. */
	position: relative;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--papier);
	border: var(--rand-stark);
	border-radius: var(--rund);
	padding: 0.5rem 0.95rem;
	font: inherit;
	font-size: var(--gr-klein);
	font-weight: 700;
	color: var(--tinte);
	cursor: pointer;
	min-height: 44px;
	flex-shrink: 0;
}

.menue-schalter__strich,
.menue-schalter__strich::before,
.menue-schalter__strich::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.menue-schalter__strich { position: relative; }
.menue-schalter__strich::before,
.menue-schalter__strich::after {
	content: "";
	position: absolute;
	left: 0;
}
.menue-schalter__strich::before { top: -6px; }
.menue-schalter__strich::after  { top: 6px; }

.menue-schalter[aria-expanded="true"] .menue-schalter__strich { background: transparent; }
.menue-schalter[aria-expanded="true"] .menue-schalter__strich::before { transform: translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] .menue-schalter__strich::after  { transform: translateY(-6px) rotate(-45deg); }

.haupt-nav__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.haupt-nav__liste li { margin: 0; }

.haupt-nav__liste a {
	color: var(--tinte);
	text-decoration: none;
	display: block;
}

.haupt-nav .current-menu-item > a,
.haupt-nav .current_page_item > a,
.haupt-nav .current_page_parent > a {
	background: var(--gelb);
}

/* Handy und kleines Tablet: Vollbild-Panel auf Signal */
@media (max-width: 899px) {
	.haupt-nav {
		position: fixed;
		inset: 0;
		z-index: 50;
		background-color: var(--signal);
		background-image: var(--koernung);
		background-blend-mode: multiply;
		padding: calc(var(--r6) + var(--r4)) var(--rand) var(--r5);
		display: flex;
		flex-direction: column;
		gap: var(--r4);
		overflow-y: auto;
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform 0.28s cubic-bezier(.2,.8,.2,1), visibility 0.28s;
	}
	.haupt-nav.ist-offen {
		transform: translateY(0);
		visibility: visible;
	}
	.haupt-nav__liste {
		display: flex;
		flex-direction: column;
	}
	.haupt-nav__liste a {
		font-family: var(--schrift-anzeige);
		font-weight: 850;
		font-stretch: 72%;
		text-transform: uppercase;
		font-size: clamp(2.2rem, 11vw, 3.4rem);
		line-height: 1;
		padding: var(--r2) 0;
		border-bottom: var(--rand-stark);
	}
	.haupt-nav__liste a:hover { background: none; color: var(--papier); }
	.haupt-nav .current-menu-item > a,
	.haupt-nav .current_page_item > a { background: none; text-decoration: underline; text-decoration-thickness: 4px; }
	.haupt-nav__cta { align-self: flex-start; }
	.haupt-nav .knopf--voll { background: var(--tinte); color: var(--papier); box-shadow: 5px 5px 0 var(--papier); }
}

/* Ab Laptop: Zeile */
@media (min-width: 900px) {
	.menue-schalter { display: none; }
	.haupt-nav {
		display: flex;
		align-items: center;
		gap: var(--r3);
	}
	.haupt-nav__liste {
		display: flex;
		gap: 0.25rem;
		font-family: var(--schrift-anzeige);
		font-weight: 700;
		font-stretch: 90%;
		font-size: 0.98rem;
	}
	.haupt-nav__liste a {
		padding: 0.4rem 0.7rem;
		border-radius: var(--rund);
	}
	.haupt-nav__liste a:hover { background: var(--gelb); }
}

/* --- Knöpfe ---------------------------------------------------------
   Drei Stufen: gefüllt, umrandet, Textlink mit Pfeil.
   Beim Drücken rutscht der Knopf auf seinen Schatten — wie ein Stempel.
   -------------------------------------------------------------------- */

.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 48px;
	padding: 0.65rem 1.4rem;
	border: var(--rand-stark);
	border-radius: var(--rund);
	font-family: var(--schrift-anzeige);
	font-size: 1rem;
	font-weight: 800;
	font-stretch: 95%;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--schatten-klein);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.knopf:hover { transform: translate(-2px, -2px); box-shadow: var(--schatten); }
.knopf:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--tinte); }

.knopf--voll,
.knopf--voll:hover {
	background: var(--signal);
	color: var(--tinte);
}

.knopf--rand,
.knopf--rand:hover {
	background: var(--papier);
	color: var(--tinte);
}

.knopf--text {
	background: none;
	border: 0;
	box-shadow: none;
	padding-inline: 0;
	min-height: 44px;
	color: var(--tinte);
	text-decoration: underline;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}
.knopf--text::after { content: "→"; transition: transform 0.15s ease; }
.knopf--text:hover { transform: none; box-shadow: none; background: none; color: var(--tinte); }
.knopf--text:hover::after { transform: translateX(4px); }

/* Auf Kobalt kehren sich die Knöpfe um. */
.abschnitt--dunkel .knopf { box-shadow: 3px 3px 0 var(--tinte); }
.abschnitt--dunkel .knopf--voll { background: var(--gelb); color: var(--tinte); }
.abschnitt--dunkel .knopf--rand { background: var(--kobalt); color: var(--auf-dunkel); border-color: var(--auf-dunkel); }
.abschnitt--dunkel .knopf--text { color: var(--auf-dunkel); text-decoration-color: var(--gelb); }

.abschnitt--signal .knopf--voll { background: var(--tinte); color: var(--papier); box-shadow: 3px 3px 0 var(--papier); }
.abschnitt--signal .knopf--text { text-decoration-color: var(--tinte); }

/* --- Bilder im Risograph-Look ----------------------------------------
   Jedes hochgeladene Foto wird als Zweifarbdruck gezeigt: Graustufen,
   mit Kobalt multipliziert. So passen auch schnell geknipste
   Handyfotos zueinander. Beim Darüberfahren erscheint das Original.
   ---------------------------------------------------------------------- */

.duoton {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--kobalt);
	isolation: isolate;
}
.duoton img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(1.08);
	mix-blend-mode: screen;
	transition: filter 0.35s ease, mix-blend-mode 0.35s;
}
.duoton::after {
	/* Körnung und ein Hauch Signal in den Lichtern */
	content: "";
	position: absolute;
	inset: 0;
	background: var(--koernung), linear-gradient(transparent 55%, rgba(255, 91, 46, 0.28));
	mix-blend-mode: multiply;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
a:hover .duoton img,
.duoton:hover img { filter: none; mix-blend-mode: normal; }
a:hover .duoton::after,
.duoton:hover::after { opacity: 0; }

/* --- Karten ---------------------------------------------------------- */

.karte {
	display: flex;
	flex-direction: column;
	background: var(--papier);
	border: var(--rand-stark);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--schatten);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.karte:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinte); }

.karte__bild {
	display: block;
	aspect-ratio: 3 / 2;
	border-bottom: var(--rand-stark);
}
.karte__bild:hover { background: var(--kobalt); }

.karte__text { padding: var(--r3) var(--r3) var(--r4); display: flex; flex-direction: column; gap: 0.45rem; }

.karte__meta {
	margin: 0;
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 700;
	font-stretch: 110%;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tinte-2);
}

.karte__titel { font-size: var(--gr-h3); margin: 0; line-height: 1.12; }
.karte__titel a { color: var(--tinte); text-decoration: none; }
.karte__titel a:hover { background: var(--gelb); }
/* Die ganze Karte ist anklickbar, ohne dass zwei Links vorgelesen werden. */
.karte { position: relative; }
.karte__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.karte__anriss { margin: 0; font-size: 0.95rem; color: var(--tinte-2); }

.kartenraster {
	display: grid;
	gap: var(--r4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.kartenraster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* --- Statuszeichen: kleine Aufkleber ---------------------------------- */

.status {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.2rem 0.65rem;
	border: var(--rand-stark);
	border-radius: var(--rund);
	background: var(--papier);
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 800;
	font-stretch: 110%;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tinte);
}
.status__punkt {
	width: 10px; height: 10px;
	border-radius: var(--rund);
	border: 1.5px solid var(--tinte);
	background: var(--papier);
	flex-shrink: 0;
}
.status--idee          { background: var(--papier); }
.status--geplant       { background: var(--gelb); }
.status--in-arbeit     { background: var(--signal); }
.status--laeuft        { background: var(--kobalt); color: var(--auf-dunkel); border-color: var(--kobalt); }
.status--laeuft .status__punkt { border-color: var(--auf-dunkel); background: var(--gelb); }
.status--abgeschlossen { background: var(--putz); color: var(--tinte-2); }
.status--in-arbeit .status__punkt,
.status--geplant .status__punkt { background: var(--tinte); }

.marker {
	display: inline-block;
	background: var(--gelb);
	color: var(--tinte);
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.1rem 0.45rem;
	border: 1.5px solid var(--tinte);
	margin-left: 0.4rem;
}

/* --- Datumsblock: ein Stempel ------------------------------------------ */

.datumsblock {
	flex-shrink: 0;
	width: 74px;
	border: var(--rand-stark);
	border-radius: var(--radius);
	text-align: center;
	padding: 0.45rem 0.2rem 0.5rem;
	background: var(--signal);
	color: var(--tinte);
	font-variant-numeric: lining-nums tabular-nums;
	transform: rotate(-3deg);
	box-shadow: var(--schatten-klein);
}
.datumsblock__tag {
	display: block;
	font-family: var(--schrift-anzeige);
	font-size: 2.1rem;
	font-weight: 900;
	font-stretch: 70%;
	line-height: 1;
}
.datumsblock__monat {
	display: block;
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 0.2rem;
}

/* --- Terminliste ------------------------------------------------------ */

.terminliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--rand-stark); }

.termin {
	display: flex;
	gap: var(--r4);
	align-items: flex-start;
	padding: var(--r4) 0;
	border-bottom: var(--rand-stark);
	margin: 0;
}

.termin__titel { font-size: var(--gr-h3); margin: 0 0 0.25rem; }
.termin__titel a { color: var(--tinte); text-decoration: none; }
.termin__titel a:hover { background: var(--gelb); }

.termin__meta { margin: 0 0 0.35rem; font-size: var(--gr-klein); color: var(--tinte-2); }
.termin__anriss { margin: 0; font-size: 0.95rem; color: var(--tinte-2); }

.terminliste--vergangen .termin { opacity: 0.75; }
.terminliste--vergangen .datumsblock { background: var(--putz); transform: none; box-shadow: none; }

/* --- Formular ---------------------------------------------------------- */

.formular {
	background: var(--papier);
	border: var(--rand-stark);
	border-radius: var(--radius);
	padding: clamp(var(--r3), 4vw, var(--r4));
	box-shadow: 8px 8px 0 var(--kobalt);
}

.formular__feld { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--r3); }

.formular__feld label {
	font-family: var(--schrift-anzeige);
	font-weight: 800;
	font-stretch: 95%;
	font-size: 1rem;
}

.formular input[type="text"],
.formular input[type="email"],
.formular select,
.formular textarea {
	font: inherit;
	font-size: 1rem;
	padding: 0.65rem 0.8rem;
	min-height: 48px;
	border: var(--rand-stark);
	border-radius: var(--radius);
	background: #FFFDF8;
	color: var(--tinte);
	width: 100%;
}
.formular textarea { resize: vertical; min-height: 8rem; }

.formular input:focus-visible,
.formular select:focus-visible,
.formular textarea:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--gelb);
}

.formular__hilfe { font-size: var(--gr-klein); color: var(--tinte-2); }

.formular__datenschutz { font-size: var(--gr-klein); color: var(--tinte-2); }

/* Honeypot — für Menschen unsichtbar, für Screenreader ausgeblendet. */
.formular__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.meldung {
	padding: var(--r2) var(--r3);
	border: var(--rand-stark);
	border-radius: var(--radius);
	margin-bottom: var(--r3);
	font-size: 0.95rem;
	font-weight: 700;
}
.meldung--erfolg { background: var(--gelb); }
.meldung--fehler { background: #FFD9CC; }

/* --- Hinweisboxen ------------------------------------------------------ */

.hinweis {
	padding: var(--r2) var(--r3);
	border: var(--rand-stark);
	background: var(--gelb);
	border-radius: var(--radius);
	font-size: 0.95rem;
}
.hinweis--ruhig { background: var(--putz); color: var(--tinte-2); }

.leer {
	padding: var(--r5) var(--r3);
	text-align: center;
	border: 2px dashed var(--tinte);
	border-radius: var(--radius);
	font-family: var(--schrift-akzent);
	font-style: italic;
	font-size: calc(var(--gr-lead) * 1.3);
}

/* --- Fußzeile ----------------------------------------------------------- */

.fuss {
	background-color: var(--tinte);
	color: var(--auf-dunkel);
	padding-top: var(--r6);
	margin-top: var(--abschnitt);
	overflow: hidden;
}

.fuss a { color: var(--auf-dunkel); }
.fuss a:hover { color: var(--tinte); }

.fuss__innen {
	max-width: var(--bahn-breit);
	margin-inline: auto;
	padding-inline: var(--rand);
	display: grid;
	gap: var(--r5);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.fuss__innen { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--r4); }
}

.fuss__zeichnung { width: 130px; height: auto; color: var(--signal); }
.fuss__zeichnung path,
.fuss__zeichnung rect { stroke-width: 2.6; }

.fuss__satz {
	font-family: var(--schrift-akzent);
	font-style: italic;
	font-size: 1.45rem;
	line-height: 1.25;
	max-width: 24ch;
	margin-top: var(--r3);
}

.fuss__titel {
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 800;
	font-stretch: 110%;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gelb);
	margin-bottom: var(--r2);
}

.fuss__adresse { font-style: normal; margin-bottom: var(--r2); }

.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }

/* Der Name des Projekts, riesig, als letzter Plakatstreifen. */
.fuss__wortmarke {
	display: block;
	max-width: var(--bahn-breit);
	margin: var(--r6) auto 0;
	padding-inline: var(--rand);
	font-family: var(--schrift-anzeige);
	font-weight: 900;
	font-stretch: 62%;
	text-transform: uppercase;
	font-size: clamp(3rem, 13vw, 11rem);
	line-height: 0.82;
	letter-spacing: -0.01em;
	color: var(--signal);
	overflow-wrap: anywhere;
}

.fuss__unten {
	max-width: var(--bahn-breit);
	margin: var(--r4) auto 0;
	padding: var(--r3) var(--rand) var(--r4);
	border-top: 1px solid rgba(243, 240, 232, 0.25);
	display: flex;
	flex-wrap: wrap;
	gap: var(--r3);
	justify-content: space-between;
	align-items: center;
	font-size: var(--gr-klein);
}
.fuss__recht { margin: 0; }
.fuss__recht-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--r3);
	flex-wrap: wrap;
}

/* --- Kontaktblock ------------------------------------------------------
   Wird auf der Startseite und auf der Kontaktseite benutzt — deshalb
   steht er hier bei den Bausteinen und nicht in home.css.
   ----------------------------------------------------------------------- */

.kontakt__innen {
	display: grid;
	gap: var(--r5);
}
@media (min-width: 880px) {
	.kontakt__innen { grid-template-columns: 0.85fr 1.15fr; gap: var(--r6); }
}

.kontakt__daten { margin: var(--r4) 0 0; border-top: var(--rand-stark); }
.kontakt__daten > div {
	padding: 0.65rem 0;
	border-bottom: var(--rand-stark);
}
.kontakt__daten dt {
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 800;
	font-stretch: 110%;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tinte-2);
	margin-bottom: 0.15rem;
}
.kontakt__daten dd { margin: 0; font-size: 1.05rem; }