/*
Theme Name: Werkraum
Theme URI: https://werkraum-mensch.at
Author: Werkraum Mensch
Description: Retro-DIY-Theme im Polaroid-Stil für die Workshop-Plattform Werkraum Mensch – warm, handgemacht, unverwechselbar. Mit Such-Hero, Vertrauensstreifen und Polaroid-Karten, inspiriert von den großen Buchungsplattformen.
Version: 2.4.1
License: GPL-2.0+
Text Domain: werkraum
*/

/* =========================================================
   Design-Tokens – Retro / Selbermachen
   ========================================================= */
:root {
	--papier: #F6EFE3;        /* Bastelpapier */
	--papier-dunkel: #EBE1CE;
	--karton: #FFFDF8;        /* Polaroid-Weiß */
	--tinte: #33271E;         /* Brauntinte */
	--tinte-soft: #6E5F52;
	--orange: #E2572B;        /* Retro-Orange (Haupt) */
	--orange-dunkel: #C44520;
	--senf: #E9B44C;          /* Senfgelb */
	--petrol: #2F6D67;        /* 70er-Petrol */
	--petrol-dunkel: #245550;

	--font-display: "Shrikhand", cursive;          /* Retro-Schaufenster */
	--font-hand: "Caveat", cursive;                /* Filzstift/Polaroid */
	--font-text: "Karla", system-ui, sans-serif;   /* Ruhiger Werktext */

	--breite: 1160px;
	--schatten: 0 8px 22px rgba(51, 39, 30, 0.14);
	--schatten-tief: 0 14px 34px rgba(51, 39, 30, 0.2);
}

/* =========================================================
   Basis + Papierkorn
   ========================================================= */
* { box-sizing: border-box; }

body {
	margin: 0;
	background-color: var(--papier);
	/* feines Papierkorn */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
	color: var(--tinte);
	font-family: var(--font-text);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--orange); }
a:hover { color: var(--orange-dunkel); }

h1, h2 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.12;
	color: var(--tinte);
	margin: 0 0 0.45em;
	letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); }
h3, h4 { font-family: var(--font-text); font-weight: 800; margin: 0 0 0.5em; }
h3 { font-size: 1.2rem; }

:focus-visible {
	outline: 3px solid var(--petrol);
	outline-offset: 2px;
	border-radius: 2px;
}

.wr-inner { max-width: var(--breite); margin: 0 auto; padding: 0 22px; }

/* Eyebrow: handgeschriebenes Etikett */
.wr-eyebrow {
	display: inline-block;
	font-family: var(--font-hand);
	font-size: 1.45rem;
	color: var(--petrol);
	transform: rotate(-1.5deg);
	margin-bottom: 0.15em;
}

/* Signatur: Filzstift-Unterstreichung */
.wr-strich { position: relative; white-space: nowrap; }
.wr-strich svg {
	position: absolute; left: -2%; bottom: -0.14em;
	width: 104%; height: 0.32em; z-index: -1;
}

/* Buttons – Retro-Sticker */
.wr-btn,
body .wb-submit,
body .wb-card-btn,
body .wb-login .login-submit input {
	display: inline-block;
	padding: 0.75em 1.6em;
	border: 2.5px solid var(--tinte);
	border-radius: 999px;
	background: var(--orange);
	color: var(--karton) !important;
	font-family: var(--font-text);
	font-weight: 800;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 3px 3px 0 var(--tinte);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wr-btn:hover,
body .wb-submit:hover,
body .wb-card-btn:hover,
body .wb-login .login-submit input:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--tinte);
	background: var(--orange-dunkel);
	opacity: 1;
}
.wr-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinte); }
.wr-btn-leer { background: var(--karton); color: var(--tinte) !important; }
.wr-btn-leer:hover { background: var(--papier-dunkel); }
.wr-btn-senf { background: var(--senf); color: var(--tinte) !important; }
.wr-btn-senf:hover { background: #dba33a; }

/* =========================================================
   Header – Werkstattschild
   ========================================================= */
.wr-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--papier);
	border-bottom: 2.5px dashed var(--tinte);
}
.wr-header-inner {
	display: flex; align-items: center; gap: 1.4em;
	padding: 0.8em 22px;
	max-width: var(--breite); margin: 0 auto;
}
.wr-logo {
	font-family: var(--font-display);
	font-size: 1.35rem;
	text-decoration: none;
	color: var(--tinte);
}
.wr-logo .punkt { color: var(--orange); }
.wr-nav { margin-left: auto; }
.wr-nav ul { list-style: none; display: flex; gap: 1.3em; margin: 0; padding: 0; }
.wr-nav a { text-decoration: none; color: var(--tinte); font-weight: 700; font-size: 0.97rem; }
.wr-nav a:hover { color: var(--orange); }
.wr-header .wr-btn { padding: 0.5em 1.2em; font-size: 0.9rem; }

.wr-nav-toggle {
	display: none; margin-left: auto;
	background: var(--karton); border: 2.5px solid var(--tinte); border-radius: 10px;
	padding: 0.35em 0.7em; font: inherit; font-weight: 800; cursor: pointer; color: var(--tinte);
	box-shadow: 2px 2px 0 var(--tinte);
}
@media (max-width: 900px) {
	.wr-nav-toggle { display: block; }
	.wr-header .wr-btn { display: none; }
	.wr-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--papier); border-bottom: 2.5px dashed var(--tinte);
		padding: 1em 22px 1.4em;
	}
	.wr-nav.ist-offen { display: block; }
	.wr-nav ul { flex-direction: column; gap: 0.9em; }
}

/* =========================================================
   Hero mit Suchkarte (Booking-Muster) + Vertrauensstreifen
   ========================================================= */
.wr-hero { position: relative; overflow: hidden; padding: 4.5rem 0 3rem; text-align: center; }
.wr-hero h1 { max-width: 17em; margin-left: auto; margin-right: auto; }
.wr-hero .wr-sub {
	font-size: 1.18rem; color: var(--tinte-soft);
	max-width: 36em; margin: 0 auto 2em;
}

/* Suchkarte */
.wr-suche {
	display: flex; gap: 0.7em; flex-wrap: wrap; justify-content: center; align-items: center;
	background: var(--karton);
	border: 2.5px solid var(--tinte);
	border-radius: 18px;
	box-shadow: 5px 5px 0 var(--tinte);
	padding: 1em 1.2em;
	max-width: 640px; margin: 0 auto;
	position: relative;
}
/* Washi-Tape auf der Suchkarte */
.wr-suche::before {
	content: ""; position: absolute; top: -14px; left: 50%;
	width: 110px; height: 26px; transform: translateX(-50%) rotate(-2deg);
	background: var(--senf); opacity: 0.85;
	box-shadow: 0 1px 3px rgba(51,39,30,0.25);
}
.wr-suche label { font-family: var(--font-hand); font-size: 1.35rem; }
.wr-suche select {
	font: inherit; font-weight: 700; color: var(--tinte);
	padding: 0.55em 0.8em;
	border: 2px solid var(--tinte); border-radius: 10px;
	background: var(--papier);
	min-width: 200px;
}

/* Vertrauensstreifen (Uber/Airbnb-Muster) */
.wr-trust {
	display: flex; gap: 1.6em; flex-wrap: wrap; justify-content: center;
	margin-top: 1.8em;
	font-weight: 700; font-size: 0.95rem; color: var(--tinte-soft);
}
.wr-trust span::before { content: "✔ "; color: var(--petrol); }

/* Pigment-Kleckse */
.wr-splatter { position: absolute; pointer-events: none; opacity: 0.85; }
.wr-splatter-links { left: -60px; top: 8%; width: 220px; }
.wr-splatter-rechts { right: -50px; bottom: 4%; width: 260px; }
@media (max-width: 760px) { .wr-splatter { opacity: 0.2; } }

@media (prefers-reduced-motion: no-preference) {
	.wr-hero > .wr-inner > * { animation: wr-auf 0.6s ease both; }
	.wr-hero > .wr-inner > *:nth-child(2) { animation-delay: 0.1s; }
	.wr-hero > .wr-inner > *:nth-child(3) { animation-delay: 0.2s; }
	.wr-hero > .wr-inner > *:nth-child(4) { animation-delay: 0.3s; }
	@keyframes wr-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* =========================================================
   Abschnitte
   ========================================================= */
.wr-section { padding: 3.8rem 0; }
.wr-section-kopf {
	display: flex; align-items: end; justify-content: space-between;
	gap: 1em; flex-wrap: wrap; margin-bottom: 1.6em;
}
.wr-section-kopf h2 { margin: 0; }
.wr-mehr { font-weight: 800; text-decoration: none; white-space: nowrap; }

.wr-section-petrol { background: var(--petrol); color: var(--papier); }
.wr-section-petrol h2 { color: var(--papier); }
.wr-section-petrol .wr-eyebrow { color: var(--senf); }
.wr-section-petrol p { color: rgba(246, 239, 227, 0.85); }

/* =========================================================
   POLAROID-Karten (Plugin .wb-card wird umgebaut)
   ========================================================= */
body .wb-list { gap: 2.2em; }

body .wb-card {
	border: none; border-radius: 2px;
	background: var(--karton);
	padding: 12px 12px 0;
	box-shadow: var(--schatten);
	position: relative;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body .wb-list .wb-card:nth-child(odd)  { transform: rotate(-1.6deg); }
body .wb-list .wb-card:nth-child(even) { transform: rotate(1.3deg); }
body .wb-list .wb-card:nth-child(3n)   { transform: rotate(-0.6deg); }
body .wb-list .wb-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--schatten-tief); z-index: 2; }

/* Klebeband oben */
body .wb-card::before {
	content: ""; position: absolute; top: -13px; left: 50%;
	width: 96px; height: 26px;
	transform: translateX(-50%) rotate(-3deg);
	background: var(--senf); opacity: 0.85;
	box-shadow: 0 1px 3px rgba(51,39,30,0.25);
	z-index: 3;
}
body .wb-list .wb-card:nth-child(even)::before { background: var(--orange); opacity: 0.7; transform: translateX(-50%) rotate(2deg); }

body .wb-card-imgwrap { border-radius: 0; }
body .wb-card-img { height: 210px; border-radius: 0; }

body .wb-card-body { padding: 0.9em 0.5em 1.1em; }

/* Datum wie mit Filzstift auf den Polaroid-Rand geschrieben */
body .wb-card-date {
	font-family: var(--font-hand);
	font-size: 1.35rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--petrol);
	opacity: 1;
	margin: 0 0 0.1em;
}
body .wb-card-title { font-family: var(--font-text); font-weight: 800; }
body .wb-card-title a:hover { color: var(--orange); }

body .wb-badge {
	background: var(--papier); border: 2px solid var(--petrol);
	color: var(--tinte); font-weight: 800;
}
body .wb-badge-full { background: #F8E3DC; border-color: var(--orange); }
body .wb-card-full { opacity: 0.78; }
body .wb-card-full::after {
	content: "Ausgebucht!";
	position: absolute; top: 38%; left: 50%;
	transform: translateX(-50%) rotate(-8deg);
	font-family: var(--font-display); font-size: 1.5rem;
	color: var(--orange);
	background: var(--karton); border: 3px solid var(--orange); border-radius: 6px;
	padding: 0.1em 0.6em;
	z-index: 4;
}

/* =========================================================
   Polaroid-Wand (Galerie-Sektion)
   ========================================================= */
.wr-wand {
	display: flex; flex-wrap: wrap; gap: 1.6em; justify-content: center;
	padding: 1em 0;
}
.wr-polaroid {
	background: var(--karton);
	padding: 10px 10px 0;
	box-shadow: var(--schatten);
	width: 215px;
	text-decoration: none; color: var(--tinte);
	position: relative;
	transition: transform 0.18s ease;
}
.wr-polaroid img, .wr-polaroid .wr-polaroid-platz {
	width: 100%; height: 190px; object-fit: cover; display: block;
}
.wr-polaroid .wr-polaroid-platz {
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-size: 2.6rem; color: var(--karton);
}
.wr-polaroid figcaption {
	font-family: var(--font-hand);
	font-size: 1.3rem; text-align: center;
	padding: 0.35em 0.2em 0.55em;
	line-height: 1.15;
}
.wr-wand .wr-polaroid:nth-child(odd)  { transform: rotate(-3deg); }
.wr-wand .wr-polaroid:nth-child(even) { transform: rotate(2.5deg) translateY(10px); }
.wr-wand .wr-polaroid:nth-child(3n)   { transform: rotate(1deg) translateY(-6px); }
.wr-wand .wr-polaroid:hover { transform: rotate(0) scale(1.05); z-index: 2; }
.wr-polaroid::before {
	content: ""; position: absolute; top: -11px; left: 50%;
	width: 70px; height: 20px; transform: translateX(-50%) rotate(-2deg);
	background: var(--petrol); opacity: 0.55;
}

/* =========================================================
   Schritte als Haftnotizen
   ========================================================= */
.wr-schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.8em;
}
.wr-schritt {
	background: #FBF3D9; /* Notizzettel */
	padding: 1.6em 1.4em 1.4em;
	box-shadow: var(--schatten);
	position: relative;
}
.wr-schritt:nth-child(1) { transform: rotate(-1.4deg); }
.wr-schritt:nth-child(2) { transform: rotate(1.1deg); background: #FCE8DC; }
.wr-schritt:nth-child(3) { transform: rotate(-0.7deg); background: #E2EEE9; }
.wr-schritt::before {
	content: ""; position: absolute; top: -12px; left: 50%;
	width: 84px; height: 22px; transform: translateX(-50%) rotate(-2deg);
	background: rgba(51, 39, 30, 0.14);
}
.wr-schritt-nr {
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--orange);
	display: block; margin-bottom: 0.15em;
}
.wr-schritt p { margin: 0; color: var(--tinte-soft); }

/* =========================================================
   Kategorien als Sticker
   ========================================================= */
body .wb-filter { gap: 0.8em; }
body .wb-filter-btn {
	border: 2.5px solid var(--tinte);
	background: var(--karton);
	color: var(--tinte);
	font-weight: 800;
	box-shadow: 2.5px 2.5px 0 var(--tinte);
	transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
body .wb-filter .wb-filter-btn:nth-child(3n+1):hover, body .wb-filter .wb-filter-btn:nth-child(3n+1).is-active { background: var(--senf); }
body .wb-filter .wb-filter-btn:nth-child(3n+2):hover, body .wb-filter .wb-filter-btn:nth-child(3n+2).is-active { background: var(--orange); color: var(--karton); }
body .wb-filter .wb-filter-btn:nth-child(3n):hover,   body .wb-filter .wb-filter-btn:nth-child(3n).is-active   { background: var(--petrol); color: var(--karton); }
body .wb-filter-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinte); }

/* =========================================================
   Formulare & Plugin-Flächen
   ========================================================= */
body .wb-booking {
	border: 2.5px solid var(--tinte);
	border-radius: 14px;
	background: var(--karton);
	box-shadow: 6px 6px 0 var(--tinte);
	padding: 2em;
}
body .wb-form input[type="text"],
body .wb-form input[type="email"],
body .wb-form input[type="tel"],
body .wb-form select,
body .wb-form textarea,
body .wb-login input[type="text"],
body .wb-login input[type="password"] {
	border: 2px solid var(--tinte);
	border-radius: 10px;
	background: var(--papier);
	padding: 0.65em 0.8em;
}
body .wb-form input:focus, body .wb-form textarea:focus, body .wb-form select:focus {
	border-color: var(--orange); outline: none;
}
body .wb-ok  { background: #E2EEE9; border: 2px solid var(--petrol); border-radius: 10px; }
body .wb-err { background: #F8E3DC; border: 2px solid var(--orange); border-radius: 10px; }

/* Kalender */
body .wb-cal-day { border: 1.5px solid rgba(51,39,30,0.18); background: var(--karton); border-radius: 4px; }
body .wb-cal-event { background: #FBF3D9; border: 1.5px solid var(--senf); border-radius: 5px; }
body .wb-cal-event:hover { background: #f5e9c2; }
body .wb-cal-voll { background: #F8E3DC; border-color: var(--orange); }
body .wb-cal-today { border: 2.5px solid var(--orange); }
body .wb-cal-nav { border: 2px solid var(--tinte); border-radius: 999px; font-weight: 800; box-shadow: 2px 2px 0 var(--tinte); }

/* Profilseite */
body .wb-profil-bild {
	border-radius: 0;
	border: 10px solid var(--karton);
	box-shadow: var(--schatten);
	transform: rotate(-2deg);
}

/* =========================================================
   Inhaltsseiten
   ========================================================= */
.wr-page { max-width: 840px; margin: 0 auto; padding: 3.2rem 22px 4rem; }
.wr-page-breit { max-width: var(--breite); }
.wr-page .entry-content > p:first-of-type { font-size: 1.12rem; color: var(--tinte-soft); }
.wr-workshop-kopf { margin-bottom: 1.8em; }
.wr-workshop-kopf .wb-card-date { font-size: 1.6rem; display: block; }
article.wr-beitrag + article.wr-beitrag { margin-top: 3em; }
.wr-page img { border: 10px solid var(--karton); box-shadow: var(--schatten); }

/* =========================================================
   Footer – Werkbank
   ========================================================= */
.wr-footer {
	background: var(--tinte);
	color: rgba(246, 239, 227, 0.75);
	margin-top: 4rem;
	padding: 3rem 0 2rem;
	font-size: 0.95rem;
	border-top: 6px solid var(--orange);
}
.wr-footer a { color: var(--papier); text-decoration: none; }
.wr-footer a:hover { color: var(--senf); }
.wr-footer-grid { display: grid; grid-template-columns: 1.6fr 1.2fr 1fr 1fr; gap: 2em; margin-bottom: 2em; }
.wr-footer h4 { color: var(--papier); font-size: 1rem; margin-bottom: 0.7em; }
.wr-footer ul { list-style: none; margin: 0; padding: 0; }
.wr-footer li { margin-bottom: 0.45em; }
.wr-footer-logo { font-family: var(--font-display); font-size: 1.35rem; color: var(--papier); }
.wr-footer-unten { border-top: 2px dashed rgba(246,239,227,0.25); padding-top: 1.2em; font-size: 0.85rem; }
@media (max-width: 760px) { .wr-footer-grid { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
	.wr-section-petrol .wr-inner { grid-template-columns: 1fr !important; }
	.wr-suche { flex-direction: column; align-items: stretch; text-align: center; }
	.wr-suche select { min-width: 0; }
}

/* Konto-Links im Header (Mein Werkraum / Abmelden) */
.wr-nav-konto {
	list-style: none;
	display: flex;
	gap: 1.3em;
	margin: 0 0 0 1.3em;
	padding: 0 0 0 1.3em;
	border-left: 2.5px dashed var(--tinte);
}

.wr-nav-konto a {
	text-decoration: none;
	color: var(--petrol);
	font-weight: 800;
	font-size: 0.95rem;
}

.wr-nav-konto a:hover { color: var(--orange); }

@media (max-width: 900px) {
	.wr-nav-konto {
		flex-direction: column;
		gap: 0.9em;
		margin: 1em 0 0;
		padding: 1em 0 0;
		border-left: none;
		border-top: 2.5px dashed var(--tinte);
	}
}

/* ---------------------------------------------------------------
   Erfahrungsberichte – handgeschriebene Notizzettel
   --------------------------------------------------------------- */

.wr-stimmen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.6em;
}

.wr-stimme {
	margin: 0;
	background: var(--karton);
	padding: 1.4em 1.3em 1.1em;
	box-shadow: var(--schatten);
	position: relative;
}

.wr-stimme::before {
	content: "";
	position: absolute;
	top: -11px;
	left: 50%;
	width: 76px;
	height: 20px;
	transform: translateX(-50%) rotate(-2deg);
	background: var(--senf);
	opacity: 0.75;
}

.wr-stimmen .wr-stimme:nth-child(odd)  { transform: rotate(-1.2deg); }
.wr-stimmen .wr-stimme:nth-child(even) { transform: rotate(1deg); }
.wr-stimmen .wr-stimme:nth-child(3n)::before { background: var(--orange); opacity: 0.6; }

.wr-stimme blockquote {
	margin: 0 0 0.6em;
	font-size: 0.98rem;
	line-height: 1.55;
}

.wr-stimme figcaption {
	font-family: var(--font-hand);
	font-size: 1.3rem;
	color: var(--petrol);
}

/* ---------------------------------------------------------------
   Gutschein-Geschenk-Band
   --------------------------------------------------------------- */

.wr-geschenk {
	background: var(--senf);
	border-top: 4px dashed var(--tinte);
	border-bottom: 4px dashed var(--tinte);
}

.wr-geschenk-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 2em;
	align-items: center;
}

.wr-geschenk-emoji {
	font-size: 4.2rem;
	transform: rotate(-8deg);
	line-height: 1;
}

.wr-geschenk p { max-width: 38em; margin-bottom: 0; }

@media (max-width: 760px) {
	.wr-geschenk-inner { grid-template-columns: 1fr; text-align: center; }
	.wr-geschenk-emoji { margin: 0 auto; }
}

/* ---------------------------------------------------------------
   FAQ-Akkordeon
   --------------------------------------------------------------- */

.wr-faq {
	background: var(--karton);
	border: 2px solid var(--tinte);
	border-radius: 10px;
	margin-bottom: 0.8em;
	box-shadow: 3px 3px 0 var(--tinte);
	overflow: hidden;
}

.wr-faq summary {
	cursor: pointer;
	font-weight: 800;
	padding: 0.9em 1.2em;
	list-style: none;
	position: relative;
}

.wr-faq summary::-webkit-details-marker { display: none; }

.wr-faq summary::after {
	content: "+";
	position: absolute;
	right: 1em;
	font-family: var(--font-display);
	font-size: 1.3rem;
	color: var(--orange);
}

.wr-faq[open] summary::after { content: "–"; }
.wr-faq[open] summary { border-bottom: 2px dashed var(--papier-dunkel); }

.wr-faq p {
	padding: 0.9em 1.2em;
	margin: 0;
}

/* ---------------------------------------------------------------
   Kalender: ausgebuchte Termine ausgegraut (Nicoles Wunsch)
   --------------------------------------------------------------- */

body .wb-cal-voll {
	background: var(--papier-dunkel) !important;
	border-color: rgba(51, 39, 30, 0.25) !important;
	color: rgba(51, 39, 30, 0.45);
	text-decoration: line-through;
	pointer-events: none;
}

body .wb-cal-voll .wb-cal-frei { text-decoration: none; }


@media (max-width: 960px) {
	.wr-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Region-/Merkmalfilter im Retro-Look */
body .wb-filterbar { background: var(--karton); border: 2px solid var(--tinte); border-radius: 12px; }
body .wb-filterbar-region select { border-color: var(--tinte); border-radius: 8px; }
body .wb-filterbar-btn { background: var(--orange); border: 2.5px solid var(--tinte); box-shadow: 2px 2px 0 var(--tinte); }
body .wb-merkmal-chip { border: 2px solid var(--tinte); box-shadow: 2px 2px 0 var(--tinte); background: var(--karton); }
body .wb-merkmal-chip.ist-aktiv { background: var(--petrol); color: var(--karton); }

/* Smarte Suchleiste im Hero (Retro-Look) */
.wr-hero-suche { max-width: 680px; margin: 0 auto; }
body .wb-suche-input {
	border: 2.5px solid var(--tinte);
	border-radius: 14px;
	box-shadow: 4px 4px 0 var(--tinte);
	background: var(--karton);
}
body .wb-suche-input:focus { border-color: var(--orange); }
body .wb-suche-go {
	background: var(--orange); color: var(--karton);
	border: 2.5px solid var(--tinte); border-radius: 12px;
	box-shadow: 3px 3px 0 var(--tinte);
}
body .wb-suche-filter-btn {
	background: var(--karton); border: 2.5px solid var(--tinte);
	border-radius: 12px; box-shadow: 3px 3px 0 var(--tinte);
}
body .wb-suche-vorschlaege { border: 2px solid var(--tinte); border-radius: 12px; }
body .wb-suche-typ { color: var(--petrol); opacity: 1; font-weight: 700; }
body .wb-suche-filter { background: var(--karton); border: 2px solid var(--tinte); border-radius: 12px; }
body .wb-suche-chip { border: 2px solid var(--tinte); }


/* Filter-Icon-Button + Dropdown-Panel (Retro-Look) */
body .wb-suche-filter-btn {
	border: 2.5px solid var(--tinte);
	border-radius: 12px;
	box-shadow: 3px 3px 0 var(--tinte);
	background: var(--karton);
	color: var(--tinte);
}
body .wb-suche-filter-btn.hat-filter { background: var(--petrol); color: var(--karton); border-color: var(--tinte); }
body .wb-suche-filter-badge { background: var(--orange); }
body .wb-suche-filter {
	border: 2.5px solid var(--tinte);
	border-radius: 14px;
	box-shadow: 6px 6px 0 var(--tinte);
}
body .wb-suche-filter-anwenden {
	background: var(--orange); color: var(--karton);
	border: 2px solid var(--tinte); border-radius: 10px;
}
body .wb-suche-chip { border: 2px solid var(--tinte); }
body .wb-suche-chip input:checked + span,
body .wb-suche-chip:has(input:checked) { background: var(--petrol); color: var(--karton); }

/* ===============================================================
   Action-Painting-Salzburg Landingseite
   =============================================================== */

.ap-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5em;
}
.ap-karte {
	background: var(--karton);
	border: 2.5px solid var(--tinte);
	border-radius: 12px;
	padding: 1.4em 1.3em;
	box-shadow: 4px 4px 0 var(--tinte);
}
.ap-karte h3 { margin-top: 0; }
.ap-karte p { margin-bottom: 0; color: var(--tinte-soft); }

.ap-fuer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em;
}
.ap-fuer span {
	display: inline-block;
	padding: 0.5em 1.1em;
	background: var(--karton);
	color: var(--tinte);
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95em;
}

.ap-preis-band {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 2.5em;
	align-items: center;
}
.ap-inklusive {
	list-style: none;
	padding: 0;
	margin: 1em 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4em 1.5em;
}
.ap-inklusive li {
	padding-left: 1.6em;
	position: relative;
}
.ap-inklusive li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--petrol);
	font-weight: 800;
}
.ap-hinweis { font-size: 0.92em; color: var(--tinte-soft); }

.ap-preis-box {
	background: var(--senf);
	border: 3px solid var(--tinte);
	border-radius: 16px;
	box-shadow: 6px 6px 0 var(--tinte);
	padding: 2em 1.5em;
	text-align: center;
}
.ap-preis-zahl {
	display: block;
	font-family: var(--font-display);
	font-size: 3.2rem;
	color: var(--tinte);
	line-height: 1;
}
.ap-preis-label {
	display: block;
	font-weight: 700;
	margin: 0.4em 0 1.2em;
}

.ap-geschenk-hinweis {
	margin-top: 1.5em;
	text-align: center;
	font-weight: 600;
}

.ap-standort {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 2.5em;
	align-items: center;
}
.ap-final-cta {
	background: rgba(0,0,0,0.15);
	border-radius: 16px;
	padding: 2em;
	text-align: center;
}
.ap-final-cta h3 { color: var(--papier); margin-top: 0; }

@media (max-width: 760px) {
	.ap-preis-band, .ap-standort { grid-template-columns: 1fr; }
	.ap-inklusive { grid-template-columns: 1fr; }
}


/* Sprachumschalter im Header */
.wr-header .wb-langswitch { margin-left: 0.5em; }
.wr-header .wb-lang { color: var(--tinte); }
.wr-header .wb-lang.ist-aktiv { background: var(--senf); opacity: 1; }
@media (max-width: 900px) {
	.wr-header .wb-langswitch { margin: 0.5em 0 0; }
}


/* Sprach-Dropdown im Header (Retro) */
.wr-header .wb-lang-toggle {
	border: 2.5px solid var(--tinte); border-radius: 10px;
	box-shadow: 2px 2px 0 var(--tinte); background: var(--karton); color: var(--tinte);
}
.wr-header .wb-lang-menu { border: 2.5px solid var(--tinte); border-radius: 12px; box-shadow: 4px 4px 0 var(--tinte); }
.wr-header .wb-lang-item.ist-aktiv { background: var(--senf); }