/*
 * wirhabenrecht.at — Gestaltung
 *
 * Maße gemessen an www.wirhabenrecht.at (24.10.2026, 1440 px und 390 px Breite).
 * Schrift, Farben, Größen, Überschriften, Knöpfe und Felder stehen in den Globalen Stilen (Website-Editor →
 * Stile); hier nur, was sie nicht abbilden. Größen über var(--wp--preset--font-size--…).
 * Klassen beginnen mit `whr-`; Redakteure wählen die Gestaltung über Blockstile
 * („Karte", „Mehr anzeigen") oder die vorbereiteten Muster, nicht über eigene Klassen.
 *
 * Inhalt
 *  1  Grundlagen          6  Abschnitte, Einleitung   11 Reiter Partner/Juristen/Team
 *  2  Intro               7  Karten                   12 Personenkarten und Filter
 *  3  Kopf                8  Mehr anzeigen (+)        13 Downloads
 *  4  Menü                9  Seitentitel und Text     14 Formular
 *  5  Startbild          10  Standorte                15 Fuß
 *                                                      16 Seitengerüst, Ergänzungen
 */

/* Farben und Breite kommen aus den Globalen Stilen (Website-Editor → Stile) — der zweite Wert ist nur Rückfall */
:root {
	--whr-gold: var(--wp--preset--color--primary, #AE9E28);
	--whr-braun: var(--wp--preset--color--secondary, #4B463A);
	--whr-sand: var(--wp--preset--color--tertiary, #EDEBE5);
	--whr-grau: var(--wp--preset--color--mediumdark, #B5B2AA);
	--whr-hell: var(--wp--preset--color--background, #F8F7F4);
	--whr-weiss: var(--wp--preset--color--lightest, #fff);
	--whr-breite: var(--wp--style--global--content-size, 1152px);
	--whr-abstand: 96px;
	--whr-dauer: 0.3s;
}

@media (max-width: 767px) {
	/* live am Handy: Text bis 8 px an den Rand; Raster, Kästen, Formular und Reiter in Spalte 10 von 12
	   (40 px Rand bei 390 px) — siehe „Spalte 10 von 12“ unten */
	:root {
		--whr-abstand: 48px;
		--wp--style--root--padding-left: 0.5rem;
		--wp--style--root--padding-right: 0.5rem;
	}
}

/* 1 · Grundlagen ------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* Laufweite: Saira hat eine stufenlose Breitenachse. Gemessen gegen Eurostile auf der bisherigen Website
   (25.10.2026, gleiche Texte, gleiche Größe, Kurve 85–105 % in Chrome OHNE Schriftglättung und in WebKit gemessen —
   der kopflose Chrome unter Linux rundet Zeichenbreiten und verfälscht die Werte, Gegenprüfung): Fließtext 90 %,
   Versalien im Text 96 %, Überschriften 96 %, Startbild-Titel 99,5 % (am echten Element), Namen 92,5 % — Rest je Text ±3 %. */
body {
	font-stretch: 90%;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-stretch: 96%;
}

.whr-kopf__kontakt,
.whr-hero__kontakt,
.whr-leitsatz,
.wp-element-button,
.whr-person .wp-block-details > summary,
.whr-downloads .is-style-karte a,
body .whr-kopf .greyd-burger-btn::after { font-stretch: 96%; }

strong, b { font-weight: 600; }

/* Inhalt, der über das stehende Startbild gleitet, braucht einen eigenen Grund */
.whr-abschnitt {
	position: relative;
	z-index: 1;
	background-color: var(--whr-hell);
	padding-top: var(--whr-abstand);
	padding-bottom: var(--whr-abstand);
}

.whr-abschnitt.has-tertiary-background-color,
.whr-abschnitt.has-base-background-color { background-color: var(--whr-sand); }

/* 2 · Intro ------------------------------------------------------------------ */

/*
 * Zeitplan (gemessen an der Live-Seite): 0–1 s „WIR HABEN RECHT" mit Balken als Anfangs-
 * buchstaben · 1–3 s Balken ziehen ins Logo-Zeichen, IR/ABEN/ECHT verblassen · ab 3 s Logo ·
 * nach 6 s blendet das Skript das Intro aus. Positionen in % der Bühne (300 px bei 700 px Rahmen).
 */
.whr-intro {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--whr-braun);
	transition: opacity 0.5s ease;
}

.whr-intro[hidden] { display: none; }
.whr-intro.ist-aus { opacity: 0; pointer-events: none; }

.whr-intro__buehne {
	--rahmen: 700px;
	position: absolute;
	top: 50%;
	left: calc(50% - var(--rahmen) / 2);
	width: calc(var(--rahmen) * 0.42857);
	height: calc(var(--rahmen) * 0.09143);
	transform: translateY(-50%);
}

@media (max-width: 767px) {
	.whr-intro__buehne { --rahmen: 350px; }
}

.whr-intro__balken {
	position: absolute;
	bottom: 0;
	width: 2%;
	border-radius: 1px;
	background: var(--whr-gold);
	animation: 3s ease-out both paused;
}

.whr-intro.laeuft .whr-intro__balken { animation-play-state: running; }

.whr-intro__balken--1 { animation-name: whr-balken-1; }
.whr-intro__balken--2 { animation-name: whr-balken-2; }
.whr-intro__balken--3 { animation-name: whr-balken-3; }
.whr-intro__balken--4 { animation-name: whr-balken-4; }
.whr-intro__balken--5 { animation-name: whr-balken-5; }
.whr-intro__balken--6 { animation-name: whr-balken-6; }
.whr-intro__balken--7 { animation-name: whr-balken-7; }

/* 50 % = 1,5 s · 66,7 % = 2 s · 83,3 % = 2,5 s */
@keyframes whr-balken-1 { 0%, 50% { left: 0; height: 50%; } 66.7% { left: 0; height: 75%; } 83.3%, 100% { left: 6%; height: 75%; } }
@keyframes whr-balken-2 { 0%, 66.7% { left: 3%; height: 25%; } 83.3% { left: 9%; height: 25%; } 100% { left: 9%; height: 50%; } }
@keyframes whr-balken-3 { 0%, 66.7% { left: 6%; height: 50%; } 83.3%, 100% { left: 12%; height: 50%; } }
@keyframes whr-balken-4 { 0%, 41.7% { left: 45%; height: 75%; } 58.3% { left: 12%; height: 75%; } 75%, 100% { left: 12%; height: 100%; } }
@keyframes whr-balken-5 { 0%, 41.7% { left: 48%; height: 50%; } 58.3%, 100% { left: 15%; height: 50%; } }
@keyframes whr-balken-6 { 0%, 50% { left: 123%; height: 50%; } 66.7% { left: 21%; height: 50%; } 83.3% { left: 21%; height: 75%; } 100% { left: 15%; height: 75%; } }
@keyframes whr-balken-7 { 0%, 50% { left: 126%; bottom: 25%; height: 25%; } 66.7% { left: 24%; bottom: 25%; height: 25%; } 83.3% { left: 24%; bottom: 50%; height: 25%; } 100% { left: 18%; bottom: 50%; height: 25%; } }

.whr-intro__wort {
	position: absolute;
	bottom: 0;
	height: 37.5%;
	width: auto;
	max-width: none;
	transition: opacity 1.5s ease-out;
}

.whr-intro__wort--ir   { left: 12%;  transition-delay: 0.75s; }
.whr-intro__wort--aben { left: 54%;  transition-delay: 1.5s; }
.whr-intro__wort--echt { left: 132%; transition-delay: 2.25s; }

.whr-intro.laeuft .whr-intro__wort { opacity: 0; }

.whr-intro__logo {
	position: absolute;
	top: 0;
	left: calc(21% + 0.75rem);
	height: 100%;
	width: auto;
	max-width: none;
	opacity: 0;
	transition: opacity 2s ease-out 3s;
}

.whr-intro.laeuft .whr-intro__logo { opacity: 1; }

.whr-intro__weiter {
	position: fixed;
	bottom: 48px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0;
	border: 0;
	background: none;
	color: var(--whr-weiss);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: color var(--whr-dauer);
}

.whr-intro__weiter:hover,
.whr-intro__weiter:focus-visible { color: var(--whr-gold); }

/* 3 · Kopf ------------------------------------------------------------------- */

.whr-kopf {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 48px 1rem;
}

@media (max-width: 767px) {
	.whr-kopf { padding: 24px 0.5rem; }
}

/* Rahmen und Logo in Stufen wie auf der bisherigen Website (Raster 540/720/976/1152, gemessen 25.10.2026) */
.whr-kopf {
	--whr-kopf-breite: var(--whr-breite);
	--whr-kopf-logo: 373px;
	--whr-knopf-rechts: max(1rem, calc(50vw - var(--whr-breite) / 2));
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.whr-kopf { --whr-kopf-breite: 976px; --whr-kopf-logo: 314.7px; --whr-knopf-rechts: calc(50vw - 488px); }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.whr-kopf { --whr-kopf-breite: 720px; --whr-kopf-logo: 229.3px; --whr-knopf-rechts: max(1rem, calc(50vw - 368px)); }
}

@media (min-width: 576px) and (max-width: 767px) {
	.whr-kopf { --whr-kopf-breite: 528px; --whr-kopf-logo: 432px; }
}

@media (max-width: 575px) {
	.whr-kopf { --whr-kopf-logo: calc(100vw - 112px); }
}

.whr-kopf__innen {
	max-width: var(--whr-kopf-breite);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
}

.whr-kopf__kontakt {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.5;
}

.whr-kopf__kontakt a { color: var(--whr-braun); }
.whr-kopf__kontakt a:hover { color: var(--whr-gold); }

.whr-kopf__logo { margin: 0; }
.whr-kopf__logo img { width: var(--whr-kopf-logo); max-width: 100%; height: auto; display: block; }
.whr-kopf__logo .wp-block-site-logo { margin: 0; }

/* Zwei Logos: dunkel auf Unterseiten, weiß über dem Startbild */
.whr-kopf .whr-logo-weiss { display: none; }
.whr-start .whr-kopf .whr-logo-weiss { display: block; }
.whr-start .whr-kopf .whr-logo-dunkel { display: none; }
.whr-start .whr-kopf__kontakt a { color: var(--whr-weiss); }
.whr-start .whr-kopf__kontakt a:hover { color: var(--whr-gold); }

@media (max-width: 767px) {
	.whr-kopf__innen { grid-template-columns: 1fr auto; }
	.whr-kopf__kontakt { display: none; }
	.whr-kopf__logo img { max-width: none; }
}

/* Menüknopf: Greyd-Popover-Knopf (Burger) in der Form der bisherigen Website —
   drei Balken (100 / 50 / 75 %) und „Menü“, offen ein goldenes X. Öffnen/Schließen macht Greyd. */
body .whr-kopf .greyd-burger-btn {
	position: fixed;
	top: 48px;
	right: var(--whr-knopf-rechts);
	z-index: 100000; /* über der Menü-Ebene (Greyd: 99999) */
	display: block;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--whr-braun);
}

@media (max-width: 767px) {
	body .whr-kopf .greyd-burger-btn { top: 24px; right: 12px; }
}

/* Balken wie live: oben 100 % (2 px), Mitte 50 % (12 px), unten 75 % (22 px), je 4 px hoch. Der Mittelbalken
   liegt im Fluss, damit die beiden anderen sich auf den ganzen Knopf beziehen (Greyd hängt sie an den mittleren). */
body .whr-kopf .greyd-burger { position: absolute; inset: 0; display: block; width: auto; height: auto; transform: none; }

body .whr-kopf .greyd-burger-inner {
	position: static;
	display: block;
	width: 50%;
	height: 4px;
	margin: 12px 0 0 auto;
	border-radius: 0;
	background: currentColor;
	transform: none;
	transition: all var(--whr-dauer);
}

body .whr-kopf .greyd-burger-inner::before,
body .whr-kopf .greyd-burger-inner::after {
	content: "";
	position: absolute;
	right: 0;
	height: 4px;
	border-radius: 0;
	background: currentColor;
	transform: none;
	transition: all var(--whr-dauer);
}

body .whr-kopf .greyd-burger-inner::before { top: 2px; bottom: auto; width: 100%; transform-origin: top right; }
body .whr-kopf .greyd-burger-inner::after { top: auto; bottom: 22px; width: 75%; transform-origin: bottom right; }

body .whr-kopf .greyd-burger-btn::after {
	content: "Menü";
	position: absolute;
	bottom: 0;
	left: 0;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	transition: opacity var(--whr-dauer);
}

@media (hover: hover) {
	body .whr-kopf .greyd-burger-btn:hover .greyd-burger-inner,
	body .whr-kopf .greyd-burger-btn:hover .greyd-burger-inner::after { width: 100%; }
}

.whr-start .whr-kopf .greyd-burger-btn { color: var(--whr-weiss); }
.whr-start.ist-unter-start .whr-kopf .greyd-burger-btn { color: var(--whr-braun); }

/* offen: goldenes X (beim Darüberfahren weiß), wie live */
body .whr-kopf .greyd-burger-btn[aria-expanded="true"] { color: var(--whr-weiss); }
/* nur den Hintergrund ausblenden — die Schrägstriche sind Pseudo-Elemente dieses Balkens (opacity nähme sie mit) */
body .whr-kopf .greyd-burger.is-active .greyd-burger-inner { background: transparent; transform: none; }
body .whr-kopf .greyd-burger.is-active .greyd-burger-inner::before,
body .whr-kopf .greyd-burger.is-active .greyd-burger-inner::after { right: 4px; width: 100%; background: var(--whr-gold); opacity: 1; }
body .whr-kopf .greyd-burger.is-active .greyd-burger-inner::before { top: 5px; transform: rotate(-45deg); }
body .whr-kopf .greyd-burger.is-active .greyd-burger-inner::after { bottom: 5px; transform: rotate(45deg); }
body .whr-kopf .greyd-burger-btn[aria-expanded="true"]:hover .greyd-burger-inner::before,
body .whr-kopf .greyd-burger-btn[aria-expanded="true"]:hover .greyd-burger-inner::after { background: var(--whr-weiss); }
body .whr-kopf .greyd-burger-btn[aria-expanded="true"]::after { opacity: 0; }

/* offen: Logo und Kontaktzeile im Kopf ausblenden, wie live */
.whr-kopf__kontakt,
.whr-kopf__logo { transition: opacity var(--whr-dauer); }
body:has(.whr-menue [role="dialog"][open]) .whr-kopf__kontakt,
body:has(.whr-menue [role="dialog"][open]) .whr-kopf__logo { opacity: 0; }

/* 4 · Menü ------------------------------------------------------------------- */

/* Die Ebene ist ein Greyd-Popover (Variante „overlay“); Farbe, Weichzeichner, Abstände stehen in den
   Block-Einstellungen. Hier nur die Anordnung des Inhalts. */
body:has(.whr-menue [role="dialog"][open]) { overflow: hidden; }

.whr-menue [role="dialog"] { inset: 0; }

.whr-menue__innen {
	max-width: var(--whr-breite);
	min-height: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: stretch;
	gap: 48px;
}

/* Farben am Menüpunkt: WordPress setzt Menülinks auf `color: inherit` (stärker als eine Regel am Link) */
.whr-menue a,
.whr-menue .wp-block-navigation-item { color: var(--whr-weiss); }
.whr-menue a:hover,
.whr-menue .wp-block-navigation-item:hover,
.whr-menue .current-menu-item { color: var(--whr-gold); }

/* live beginnt das Hauptmenü 12 px tiefer (Innenabstand der Menüpunkte) */
@media (min-width: 768px) {
	.whr-menue .whr-menue__haupt { margin-top: 12px; }
}

.whr-menue .wp-block-navigation {
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.333;
	text-align: right;
}

.whr-menue .wp-block-navigation__container { gap: 24px; align-items: flex-end; }

.whr-menue__info {
	align-self: flex-end;
	font-size: 1rem;
}

.whr-menue__info img { width: 277px; height: auto; }
.whr-menue__info p { margin: 0; }
.whr-menue__logo { margin: 0 0 24px !important; }

/* Fußmenü in der Ebene: eine Zeile, 16 px (live), am Handy untereinander und mittig */
.whr-menue .whr-menue__links {
	margin-top: 24px !important;
	font-size: 1rem;
	line-height: 1.5;
	text-align: left;
}

.whr-menue .whr-menue__links .wp-block-navigation__container { flex-direction: row; flex-wrap: wrap; gap: 0 24px; align-items: flex-start; }

@media (max-width: 767px) {
	.whr-menue .whr-menue__links { align-self: stretch; text-align: center; }
	.whr-menue .whr-menue__links .wp-block-navigation__container { flex-direction: column; align-items: center; gap: 12px; }
}

/* Handy wie live: Hauptmenü mittig (16 px, 48 px je Punkt), darunter nur das Fußmenü */
@media (max-width: 767px) {
	.whr-menue__innen { flex-direction: column; justify-content: flex-start; }
	.whr-menue .whr-menue__haupt { align-self: stretch; text-align: center; }
	.whr-menue .whr-menue__haupt .wp-block-navigation__container { align-items: center; gap: 24px; }
	.whr-menue__info { align-self: stretch; }
}

/* 5 · Startbild -------------------------------------------------------------- */

.whr-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--whr-weiss);
	text-align: center;
	overflow: hidden;
}

/* Das Bild steht fest hinter Einleitung und Startbild und wird beim Scrollen unscharf */
.whr-hero__bild {
	position: fixed;
	inset: 0;
	z-index: -1;
	margin: 0 !important;
	pointer-events: none;
	filter: blur(0);
	transition: filter 1s ease;
}

.whr-hero__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.425);
}

.whr-hero__bild img {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

/* Zwischen Handy und großem Bildschirm zeigt die bisherige Website das ganze Bild ab 13 % Höhe, darunter die Abdunkelung */
@media (min-width: 768px) and (max-width: 1199px) {
	.whr-hero__bild img { position: absolute; top: 13%; left: 0; height: auto; }
}

.ist-gescrollt .whr-hero__bild { filter: blur(16px); }

.whr-hero__bild--tablet,
.whr-hero__bild--handy { display: none; }

@media (max-width: 1023px) {
	.whr-hero__bild--desktop { display: none; }
	.whr-hero__bild--tablet { display: block; }
}

@media (max-width: 575px) {
	.whr-hero__bild--tablet { display: none; }
	.whr-hero__bild--handy { display: block; }
}

.whr-hero h1 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 24px;
	transform: translateY(-50%);
	color: inherit;
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 900;
	font-stretch: 99.5%; /* am echten Titel gemessen: live 1068 px */
	line-height: 1;
	letter-spacing: 0.0625em;
}

.whr-hero__kontakt {
	position: absolute;
	bottom: 4.5rem;
	left: 0.75rem;
	right: 0.75rem;
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
}

.whr-hero__kontakt a { color: var(--whr-weiss); }

@media (min-width: 768px) {
	.whr-hero__kontakt { display: none; }
}

/* Scroll-Hinweis: Maus mit wanderndem Punkt */
.whr-hero::after {
	content: "";
	position: absolute;
	bottom: 48px;
	left: calc(50% - 20px);
	width: 40px;
	height: 70px;
	border-radius: 25px;
	box-shadow: inset 0 0 0 1px var(--whr-weiss);
}

.whr-hero::before {
	content: "";
	position: absolute;
	bottom: 98px;
	left: calc(50% - 4px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--whr-weiss);
	animation: whr-scrollpunkt 1.5s ease-in-out infinite;
}

@keyframes whr-scrollpunkt {
	0%   { opacity: 0; transform: translateY(0); }
	30%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(24px); }
}

@media (max-width: 767px) {
	.whr-hero::after, .whr-hero::before { display: none; }
}

/* 6 · Einleitung über dem unscharfen Bild ------------------------------------ */

.whr-einleitung {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--whr-weiss);
	text-align: center;
}

.whr-einleitung > * {
	width: min(532px, 83vw);
	margin-left: auto;
	margin-right: auto;
}

.whr-einleitung h2 { color: inherit; margin-bottom: 48px; }

.whr-einleitung .whr-leitsatz {
	margin-top: 24px;
	color: var(--whr-gold);
	font-weight: 700;
	text-transform: uppercase;
}

/* 7 · Karten ----------------------------------------------------------------- */

.whr-raster {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 349px));
	justify-content: center;
	gap: var(--whr-abstand) 40px;
}

@media (max-width: 991px) {
	.whr-raster { grid-template-columns: repeat(2, minmax(0, 349px)); }
}

@media (max-width: 575px) {
	.whr-raster { grid-template-columns: minmax(0, 309px); }
}

.wp-block-group.is-style-karte {
	position: relative;
	padding: 24px;
	border: 1px solid var(--whr-sand);
}

.is-style-karte > * { margin-top: 0; margin-bottom: 0; }
.is-style-karte > * + * { margin-top: 12px; }

.is-style-karte h2,
.is-style-karte h3,
.is-style-karte h4 {
	padding-right: 64px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.333;
	text-transform: none;
	letter-spacing: 0.0625em;
}

/* Zum Fachbereich passende Partner — Symbol vom Skript eingefügt */
.whr-karte__partner {
	position: absolute;
	top: 28px;
	right: 64px;
	width: 24px;
	height: 24px;
	background: url("../img/person.svg") center / contain no-repeat;
}

/* 8 · Mehr anzeigen (+) ------------------------------------------------------ */

.wp-block-details.is-style-mehr { margin-top: 0 !important; }

.wp-block-details.is-style-mehr > summary {
	position: absolute;
	top: 28px;
	right: 24px;
	width: 24px;
	height: 24px;
	overflow: hidden;
	color: transparent;
	list-style: none;
	cursor: pointer;
	background: url("../img/plus.svg") center / contain no-repeat;
	transition: transform var(--whr-dauer);
}

.wp-block-details.is-style-mehr > summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-mehr[open] > summary { transform: rotate(45deg); }
.wp-block-details.is-style-mehr > :not(summary) { margin-top: 12px; }

/* Im Editor bleibt der Aufklapptext sichtbar und beschriftet */
.editor-styles-wrapper .wp-block-details.is-style-mehr > summary {
	position: static;
	width: auto;
	height: auto;
	color: var(--whr-gold);
	background: none;
}

/* 9 · Seitentitel und Text --------------------------------------------------- */

.whr-seite {
	padding-top: 192px;
}


.whr-seitentitel {
	margin: 0 auto var(--whr-abstand) !important;
	text-align: center;
}

.whr-text {
	max-width: 763px;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

.whr-text p { margin: 0 0 24px; }

/* 10 · Standorte ------------------------------------------------------------- */

/* Ein Muster für Kontaktseite, Fuß und Menü (Inhalt einmal pflegen). Maße gemessen an der bisherigen
   Website, 25.10.2026: Kasten mit grauem Rand, Kartensymbol im Quadrat unten rechts. */
.whr-standorte { display: grid !important; gap: 16px; }

.whr-standort {
	position: relative;
	padding: 12px;
	border: 1px solid var(--whr-grau);
}

@media (min-width: 576px) {
	.whr-standort { padding: 24px; }
}

body .whr-standort > * { margin: 0; }
body .whr-standort > * + * { margin-top: 24px; }
.whr-standort a { color: inherit; }
.whr-standort a:hover { color: var(--whr-gold); }

.whr-standort .whr-standort__titel {
	font-stretch: 92.5%; /* fette Titel in gemischter Schreibung, wie Personennamen */
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
}

.whr-standort .whr-standort__zeitentitel {
	margin-top: 72px; /* live: Tabelle, Leerabsatz, Überschrift */
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
}

/* Öffnungszeiten: drei Spalten (20 / 40 / 40 %), am Handy untereinander */
.wp-block-table.whr-zeiten { font-size: 1rem; line-height: 1.5; }
.wp-block-table.whr-zeiten table { width: 100%; border-collapse: collapse; font-size: inherit; } /* Greyd gibt Tabellen 14 px */
.wp-block-table.whr-zeiten td { display: block; padding: 0; border: 0; vertical-align: top; }
.wp-block-table.whr-zeiten td:empty { display: none; }

@media (min-width: 576px) {
	.wp-block-table.whr-zeiten td { display: table-cell; width: 40%; }
	.wp-block-table.whr-zeiten td:empty { display: table-cell; }
}

@media (min-width: 1024px) {
	.wp-block-table.whr-zeiten td:first-child { width: 20%; }
}

.whr-standort > .whr-zeiten:last-of-type { margin-bottom: 48px; } /* Platz für das Kartensymbol */

/* Kartensymbol: Quadrat unten rechts auf dem Rahmen — ein Symbol je Kasten */
body .whr-standort .whr-standort__karte {
	position: absolute;
	right: -1px;
	bottom: -1px;
	margin: 0;
}

.whr-standort__karte a {
	display: block;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border: 1px solid var(--whr-grau);
	color: transparent;
	font-size: 0;
	background: url("../img/karte.png") center / 32px no-repeat;
}

/* Kontaktseite: zwei Kästen à 471 px, Überschrift 24 px gesperrt; Mödling ohne eigene Überschrift/Symbol */
.whr-kontakt .whr-standorte { grid-template-columns: minmax(0, 309px); justify-content: center; }
.whr-kontakt .whr-standort .whr-standort__titel { letter-spacing: 0.0625em; }
.whr-kontakt .whr-standort__zweit { display: none !important; }

@media (min-width: 576px) {
	.whr-kontakt .whr-standorte { grid-template-columns: repeat(2, minmax(0, 471px)); }
}

@media (min-width: 768px) {
	.whr-kontakt .whr-standort .whr-standort__titel { font-size: 1.5rem; line-height: 1.333; }
}

/* Fuß, Kasten mit zwei Sprechstellen: Beide Symbole säßen unten rechts übereinander, Neusiedl wäre nicht
   anklickbar (live genauso, QA 25.10.2026). Das erste Symbol steht deshalb am rechten Rand unter seiner Adresse. */
body .whr-fuss .whr-standort__karte:has(~ .whr-standort__zweit) {
	position: static;
	display: flex;
	justify-content: flex-end;
	margin-right: -13px; /* Innenabstand + Rahmen: Quadrat liegt auf dem Rahmen wie das untere */
}

@media (min-width: 576px) {
	body .whr-fuss .whr-standort__karte:has(~ .whr-standort__zweit) { margin-right: -25px; }
}

/* Fuß: weiß, Zeiten klein, Text direkt unter den Überschriften */
.whr-fuss .whr-standort { color: var(--whr-weiss); }
body .whr-fuss .whr-standort__titel + *,
body .whr-standort .whr-standort__zeitentitel + * { margin-top: 0; }
.whr-fuss .whr-standort .whr-standort__zeitentitel { font-weight: 700; }
.whr-fuss .wp-block-table.whr-zeiten { font-size: 0.75rem; line-height: 2; }

/* Menü: nur Überschriften und Adressen, ohne Rahmen; am Handy gar nicht (wie live) */
.whr-menue .whr-standorte { display: block !important; }
.whr-menue .whr-standort { padding: 0; border: 0; }
body .whr-menue .whr-standort > * + * { margin-top: 0; }
body .whr-menue .whr-standort > p { margin-bottom: 24px; }
.whr-menue .whr-standort .whr-standort__titel { margin-top: 0; font-size: 1.25rem; line-height: 1.6; }
.whr-menue .whr-zeiten,
.whr-menue .whr-standort__zeitentitel,
.whr-menue .whr-standort__karte { display: none !important; }

@media (max-width: 767px) {
	.whr-menue .whr-standorte,
	.whr-menue__logo { display: none !important; }
}

/* 11 · Reiter Partner / Juristen / Team -------------------------------------- */

.whr-reiter {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 336px));
	justify-content: center;
	gap: 48px;
	margin-bottom: var(--whr-abstand) !important;
}

.whr-reiter .wp-block-button__link {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--whr-grau);
	background: transparent;
	color: var(--whr-gold);
	opacity: 0.5;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.333;
	text-transform: uppercase;
	transition: opacity var(--whr-dauer);
}

.whr-reiter .wp-block-button__link:hover,
.whr-reiter .ist-aktiv .wp-block-button__link { opacity: 1; background: transparent; color: var(--whr-gold); }

@media (max-width: 767px) {
	.whr-reiter { gap: 12px; grid-template-columns: minmax(0, 1fr); }
	.whr-reiter .wp-block-button__link { padding: 12px; }
}

/* 12 · Personenkarten und Filter --------------------------------------------- */

.whr-personen .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 349px));
	justify-content: center;
	gap: var(--whr-abstand) 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 991px) {
	.whr-personen .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 349px)); }
}

@media (max-width: 575px) {
	.whr-personen .wp-block-post-template { grid-template-columns: minmax(0, 309px); }
}

.whr-personen .wp-block-post { scroll-margin-top: 48px; }
.whr-personen .wp-block-post.ist-ausgefiltert { display: none; }

.whr-person {
	height: 100%;
	padding: 24px;
	border: 1px solid var(--whr-sand);
}

.whr-person > * { margin-top: 0; margin-bottom: 0; }
.whr-person .wp-block-post-featured-image { margin-bottom: 12px; }
.whr-person .wp-block-post-featured-image img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

.whr-person .wp-block-post-title {
	padding-right: 24px;
	font-size: var(--wp--preset--font-size--medium); /* Übersichten: live 20/32 px, fett */
	font-weight: 700;
	font-stretch: 92.5%;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: 0;
}

@media (max-width: 767px) {
	.whr-person .wp-block-post-title { line-height: 1.5; }
}

/* Startseite: 16 px, Stärke 500 */
.whr-personen--kurz .whr-person .wp-block-post-title { padding-right: 0; font-size: 1rem; font-weight: 500; line-height: 1.5; }

.whr-person .wp-block-post-title a { color: var(--whr-braun); }

/* Startseite: Name mit Pfeil */
.whr-personen--kurz .wp-block-post-title a {
	display: block;
	padding-right: 32px;
	background: url("../img/pfeil.svg") right center / 24px no-repeat;
}

.whr-personen--kurz .wp-block-post-title a:hover { color: var(--whr-gold); }

/* Unterseiten: Untertitel, Text, „Zur Person" */
.whr-person .wp-block-post-content > * { margin-top: 12px; margin-bottom: 0; }
.whr-person .wp-block-post-content p { line-height: 1.5; }
.whr-person .wp-block-post-content a { color: inherit; }
.whr-person .wp-block-post-content a:hover { color: var(--whr-gold); }

/* „Zur Person / Vita / Fachbereiche“: Zeilen über die ganze Kartenbreite, sandfarbene Linie, „+“ rechts (live) */
.whr-person:has(.wp-block-details) { padding-bottom: 0; }
.whr-person .wp-block-post-content > .wp-block-details:first-of-type { margin-top: 24px; }
.whr-person .wp-block-post-content > .wp-block-details {
	margin: 0 -24px;
	border-top: 1px solid var(--whr-sand);
}
.whr-person .wp-block-post-content > .wp-block-details:last-child { border-bottom: 1px solid var(--whr-sand); }

.whr-person .wp-block-details > summary {
	position: relative;
	padding: 12px 48px 12px 24px;
	color: var(--whr-gold);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	line-height: 2;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.whr-person .wp-block-details > summary::-webkit-details-marker { display: none; }
.whr-person .wp-block-details > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: url("../img/plus.svg") center / contain no-repeat;
	transition: transform var(--whr-dauer);
}
.whr-person .wp-block-details[open] > summary::after { transform: rotate(45deg); }
.whr-person .wp-block-details > :not(summary) { margin: 0; padding: 0 24px 24px; }

.whr-person .wp-block-post-terms { display: none; }

/* Filter: goldener Knopf unten rechts, Liste fährt von rechts herein */
.whr-filter {
	position: fixed;
	right: 48px;
	bottom: 48px;
	z-index: 50;
}

.whr-filter__knopf {
	width: 72px;
	height: 72px;
	padding: 12px;
	border: 0;
	/* weißes Filtersymbol auf Gold */
	background: var(--whr-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M8 14h32M14 24h20M20 34h8'/%3E%3C/svg%3E") center / 48px no-repeat;
	cursor: pointer;
	font-size: 0;
}

.whr-filter__liste {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 240px;
	margin: 0;
	padding: 144px 24px 24px;
	list-style: none;
	background: var(--whr-hell);
	box-shadow: -1px 0 0 var(--whr-sand);
	transform: translateX(100%);
	transition: transform var(--whr-dauer);
	overflow-y: auto;
}

.whr-filter.ist-offen .whr-filter__liste { transform: none; }

.whr-filter__liste h2 {
	margin: 0 0 24px;
	font-size: 2rem;
}

.whr-filter__liste button {
	display: block;
	width: 100%;
	margin: 0 0 -1px;
	padding: 12px;
	border: 1px solid var(--whr-sand);
	background: none;
	color: var(--whr-braun);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.whr-filter__liste button:hover,
.whr-filter__liste button[aria-pressed="true"] { color: var(--whr-gold); }

@media (max-width: 767px) {
	.whr-filter { right: 12px; bottom: 12px; }
	.whr-filter__knopf { width: 56px; height: 56px; background-size: 36px; }
}

/* 13 · Downloads ------------------------------------------------------------- */

.whr-downloads { margin-top: 96px !important; }
.whr-downloads .is-style-karte h2,
.whr-downloads .is-style-karte h3 {
	padding-right: 0;
	text-align: center;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xx-large); /* live 48 px, am Handy 24 px */
	line-height: max(1em, 2rem);
	letter-spacing: 0.0625em;
}

.whr-downloads .is-style-karte a {
	color: var(--whr-gold);
	font-weight: 700;
	text-transform: uppercase;
}

.whr-downloads .is-style-karte a:hover { color: var(--whr-braun); }

/* 14 · Formular -------------------------------------------------------------- */

/* Greyd-Formular „Anfrage“, Maße wie live (25.10.2026): zwei Spalten à 568 px, links Überschrift und Felder,
   rechts die Nachricht über die ganze Höhe mit „Senden“ in der Ecke. Farben/Rahmen der Felder und der Knopf
   kommen aus den Globalen Stilen (Greyd: Felder, Knöpfe „prim“). */
.whr-anfrage { padding-top: 96px; padding-bottom: 96px; }

.whr-anfrage .greyd_form .wp-block-columns { gap: 16px; margin: 0; }
.whr-anfrage .whr-formular__unten { margin-top: 24px !important; }
.whr-anfrage .wp-block-column > * { margin: 0; }
.whr-anfrage .wp-block-column > * + * { margin-top: 24px; }

.whr-anfrage h2 { margin-bottom: 24px !important; }
.whr-anfrage .whr-hinweis { font-size: 1rem; line-height: 1.5; }

/* Beschriftungen nur für Screenreader — sichtbar ist der Platzhalter (wie live) */
.whr-anfrage .wp-block-greyd-forms-input .label_wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.whr-anfrage .wp-block-greyd-forms-input .input {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--whr-grau);
	border-radius: 0;
	background: transparent;
	color: var(--whr-braun);
	font: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.333;
}

.whr-anfrage .wp-block-greyd-forms-input .input:focus { outline: 1px solid var(--whr-gold); border-color: var(--whr-gold); }

/* rechte Spalte: Nachricht füllt die Höhe, Senden sitzt unten rechts darin */
.whr-anfrage .whr-formular__oben > .wp-block-column:last-child { position: relative; display: flex; flex-direction: column; }
.whr-anfrage .whr-formular__oben > .wp-block-column:last-child > .wp-block-greyd-forms-input { flex: 1; display: flex; flex-direction: column; }
.whr-anfrage .whr-formular__oben > .wp-block-column:last-child .input-inner-wrapper { flex: 1; display: flex; }
.whr-anfrage textarea.input { min-height: 122px; resize: vertical; }
.whr-anfrage .submitbutton {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0 !important;
}

.whr-anfrage .whr-formular__unten p { font-size: 1rem; line-height: 1.5; }
.whr-anfrage small { font-size: 0.75rem; line-height: 2; }

.whr-anfrage .wp-block-greyd-forms-checkbox .checkbox-label {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	font-size: 1rem;
	line-height: 1.5;
}

.whr-anfrage .wp-block-greyd-forms-checkbox input[type="checkbox"] { appearance: auto; width: 16px; height: 16px; margin: 4px 0 0; flex: none; }
.whr-anfrage .wp-block-greyd-forms-checkbox .checkbox-label > div::before { display: none; } /* Greyds eigenes Kästchen — live ist es das native */
.whr-anfrage .wp-block-greyd-forms-checkbox .requirement-required { display: none; } /* live ohne Sternchen */

@media (max-width: 781px) {
	.whr-anfrage .wp-block-column > * + * { margin-top: 12px; }
	.whr-anfrage .whr-formular__oben > .wp-block-column:last-child { margin-top: 0; }
}

/* 15 · Fuß ------------------------------------------------------------------- */

/* wie live: drei Spalten (Logo/Menü/Social · Kanzleisitz · Sprechstellen), Copyright in eigener Zeile */
.whr-fuss {
	position: relative;
	z-index: 1;
	margin: 0 !important;
	padding: 48px 1rem;
	color: var(--whr-weiss);
	background: var(--whr-braun);
}

.whr-fuss a,
.whr-fuss .wp-block-navigation-item { color: var(--whr-hell); }
.whr-fuss a:hover,
.whr-fuss .wp-block-navigation-item:hover { color: var(--whr-gold); }
/* Greyd zeichnet den Fokusrahmen in Braun — auf dem braunen Fuß unsichtbar (QA 25.10.2026) */
body .whr-fuss :focus-visible { outline-color: var(--whr-hell); }

.whr-fuss__innen {
	max-width: var(--whr-breite);
	margin: 0 auto;
	display: grid !important;
	grid-template-columns: minmax(0, 309px);
	justify-content: center;
	gap: 48px 16px;
}

.whr-fuss .whr-standorte { grid-template-columns: subgrid; grid-column: 1; gap: 48px 16px; }

@media (min-width: 576px) {
	.whr-fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
	.whr-fuss__spalte { grid-column: 1 / -1; }
	.whr-fuss .whr-standorte { grid-column: 1 / -1; }
}

@media (min-width: 992px) {
	.whr-fuss__innen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
	.whr-fuss__spalte { grid-column: 1; }
	.whr-fuss .whr-standorte { grid-column: 2 / 4; }
}

body .whr-fuss__spalte > * { margin: 0; }

.whr-fuss__logo { margin-bottom: 48px !important; }
@media (min-width: 768px) {
	.whr-fuss__logo { max-width: 66.6667%; } /* live erst ab Tablet; am Handy spaltenbreit */
}
.whr-fuss__logo img { width: 100%; max-width: 309px; height: auto; }
@media (min-width: 768px) {
	.whr-fuss__logo img { width: 249px; }
}

.whr-fuss .whr-fuss__menue { margin-bottom: 48px !important; }
.whr-fuss .wp-block-navigation { font-size: 1rem; line-height: 1.5; letter-spacing: 1px; }
.whr-fuss .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 12px; }

.whr-fuss .wp-block-social-links { gap: 24px; }
.whr-fuss .wp-block-social-links .wp-social-link { background: none; color: var(--whr-hell); padding: 0; }
.whr-fuss .wp-block-social-links .wp-social-link a { padding: 0; }
/* Symbole der bisherigen Website (32 px) statt der WordPress-Symbole; Adressen bleiben im Block pflegbar */
.whr-fuss .wp-block-social-links .wp-social-link svg { opacity: 0; }
.whr-fuss .wp-block-social-links .wp-social-link a { width: 32px; height: 32px; background: center / 32px no-repeat; }
.whr-fuss .wp-block-social-links .wp-social-link-instagram a { background-image: url("../img/instagram.png"); }
.whr-fuss .wp-block-social-links .wp-social-link-facebook a { background-image: url("../img/facebook.png"); }

.whr-fuss__copy { grid-column: 1; opacity: 0.5; font-size: 0.8rem; } /* live <small> */

/* 16 · Seitengerüst und Ergänzungen ------------------------------------------ */

/* Kopf, Inhalt und Fuß stoßen ohne Blockabstand aneinander */
.wp-site-blocks > *,
.whr-haupt,
.whr-haupt > .wp-block-post-content > * { margin-block: 0; }

.whr-haupt > .wp-block-post-content > .alignfull { margin-left: 0; margin-right: 0; }

.whr-untertitel { font-weight: 700; }

.whr-gross { margin: 0 auto !important; line-height: 1.5; }

/* Rechtstexte lesen sich linksbündig besser als die zentrierten Kurztexte */
.whr-rechtstext { text-align: left; }
.whr-rechtstext h2 { font-size: var(--wp--preset--font-size--x-large); line-height: 1.333; margin: 48px 0 24px; }
.whr-rechtstext h3 { font-size: var(--wp--preset--font-size--large); line-height: 1.333; text-transform: none; letter-spacing: 0.0625em; margin: 24px 0 24px; } /* live 24 px, 24 px Abstand */

/* Raster: der Blockabstand von WordPress setzt jedem Geschwister einen oberen Rand — im Raster
   versetzt das jede zweite Karte (gemessen 25.10.2026: 0/24/0/24 px). Abstände regelt hier `gap`. */
body .whr-raster > *,
body .whr-standorte > *,
body .whr-reiter > *,
body .whr-fuss__innen > *,
body .whr-personen .wp-block-post-template > * { margin-block: 0; }

/* Kopf: rechte Spalte nimmt nur Platz ein, der Menüknopf liegt fest darüber */
.whr-kopf__rechts { min-height: 48px; }
.whr-kopf__logo { display: flex; justify-content: center; }
.whr-kopf__logo .wp-block-image { margin: 0; }

/* Anfrage-Abschnitt */
.whr-anfrage .whr-anfrage__innen > * { max-width: var(--whr-breite); }

/* Live-Anker der Partner (vom Skript eingefügt) — Sprungziel mit Abstand zum Rand */
.whr-anker { display: block; scroll-margin-top: 48px; }

/* Nach oben: wie bisher nur am Handy, ab zwei Bildschirmhöhen */
.whr-nachoben {
	position: fixed;
	left: -6rem;
	bottom: 1.5rem;
	z-index: 998;
	width: 2rem;
	height: 2rem;
	background: var(--wp--preset--color--primary);
	transition: left var(--whr-dauer) ease-out;
}

.whr-nachoben::before,
.whr-nachoben::after {
	content: "";
	position: absolute;
	top: 33.3333%;
	left: 50%;
	width: 2px;
	height: 0.75rem;
	background: var(--whr-weiss);
}

.whr-nachoben::before { transform-origin: top right; transform: translateX(-100%) rotate(45deg); }
.whr-nachoben::after { transform-origin: top left; transform: rotate(-45deg); }

.ist-weit-unten .whr-nachoben { left: 1.5rem; }

@media (min-width: 768px) {
	.whr-nachoben { display: none; }
}

/* Spalte 10 von 12 am Handy: Raster, Kästen, Formular und Reiter 40 px vom Rand (live, 390 px) */
@media (max-width: 575px) {
	.whr-reiter,
	.whr-anfrage .greyd_form,
	.whr-downloads { max-width: calc(83.333vw - 16px); margin-left: auto !important; margin-right: auto !important; }
}

/* Kopf am Handy: Logo links wie live */
@media (max-width: 767px) {
	.whr-kopf__logo { justify-content: flex-start; }
}

/* Startseite wie live: 96 px Lücke über den Fachbereichen (das unscharfe Bild scheint durch), danach das
   sandfarbene Band (live ein leerer Slider-Abschnitt), Partnerkarten mit 96 px Abstand nach unten */
.whr-einleitung + .whr-abschnitt { margin-top: 96px !important; }
.whr-band { position: relative; z-index: 1; height: 193px; margin: 0 !important; background-color: var(--whr-sand); }
.whr-personen--kurz { margin-bottom: 96px; }

@media (max-width: 767px) {
	.whr-personen--kurz { margin-bottom: 48px; }
}