/* --- Schrift ------------------------------------------------------------
   Open Sans liegt im Theme (latin, woff2). Damit braucht die Seite weder
   eine Verbindung zu Google noch ein Plugin, das Schriften spiegelt.
   -------------------------------------------------------------------- */
@font-face{
	font-family:'Open Sans';
	font-style:normal; font-weight:400; font-display:swap;
	src:url('../fonts/open-sans-latin-400-normal.woff2') format('woff2');
}

@font-face{
	font-family:'Open Sans';
	font-style:italic; font-weight:400; font-display:swap;
	src:url('../fonts/open-sans-latin-400-italic.woff2') format('woff2');
}

@font-face{
	font-family:'Open Sans';
	font-style:normal; font-weight:600; font-display:swap;
	src:url('../fonts/open-sans-latin-600-normal.woff2') format('woff2');
}

@font-face{
	font-family:'Open Sans';
	font-style:normal; font-weight:700; font-display:swap;
	src:url('../fonts/open-sans-latin-700-normal.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   Wohnpark Friedberg – Kopfzeile, Fußzeile, Grundgerüst.
   Farben und Typografie kommen aus theme.json.
   --------------------------------------------------------------------------- */

:root{
	--wpf-primaer: #00305D;
	--wpf-akzent:  #15779B;
	--wpf-linie:   #E1E7EC;
	--wpf-flaeche: #F6F8FA;
	--wpf-kopf-hoehe: 84px;
}

.wpf-skip{
	position:absolute; left:-9999px; top:0; z-index:1000;
	background:#fff; color:var(--wpf-primaer); padding:12px 20px;
}
.wpf-skip:focus{ left:12px; top:12px; }

/* --- Kopfzeile --------------------------------------------------------- */
.wpf-header{
	position:sticky; top:0; z-index:100;
	background:var(--wpf-primaer);
	box-shadow:0 1px 0 rgba(0,0,0,.08);
}

.wpf-header__inner{
	display:flex; align-items:center; justify-content:space-between; gap:24px;
	max-width:1500px; margin-inline:auto;
	padding:0 clamp(16px,5vw,60px);
	min-height:var(--wpf-kopf-hoehe);
}

.wpf-header__brand img,
.wpf-header .custom-logo{ display:block; max-height:56px; width:auto; }

/* Das vorhandene Logo ist einfarbig dunkelblau auf transparentem Grund und
   waere auf der dunklen Kopfzeile unsichtbar. Bis eine weisse Fassung als
   Datei vorliegt, wird es hier eingefaerbt. */
.wpf-header__brand img{ filter:brightness(0) invert(1); }

.wpf-header__name{ color:#fff; font-weight:700; font-size:1.25rem; text-decoration:none; }

.wpf-nav__list{
	display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2vw,30px);
	list-style:none; margin:0; padding:0;
}

.wpf-nav__list a{
	display:block; padding:6px 0;
	color:#fff; text-decoration:none; font-weight:600; font-size:.95rem;
	border-bottom:2px solid transparent;
}

.wpf-nav__list a:hover,
.wpf-nav__list a:focus-visible,
.wpf-nav__list .current-menu-item > a{ border-bottom-color:#fff; }

/* Untermenüs */
.wpf-nav__list li{ position:relative; }
.wpf-nav__list .sub-menu{
	position:absolute; left:0; top:100%; min-width:220px;
	display:none; flex-direction:column; gap:0;
	list-style:none; margin:12px 0 0; padding:8px 0;
	background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.16); border-radius:8px;
}

/* Unsichtbare Bruecke, damit der Abstand die Maus nicht abreissen laesst. */
.wpf-nav__list .sub-menu::before{
	content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.wpf-nav__list li:hover > .sub-menu,
.wpf-nav__list li:focus-within > .sub-menu{ display:flex; }
.wpf-nav__list .sub-menu a{ color:var(--wpf-primaer); padding:8px 16px; border:0; }
.wpf-nav__list .sub-menu a:hover{ background:var(--wpf-flaeche); }

/* Burger */
.wpf-burger{
	display:none; background:none; border:0; cursor:pointer; padding:10px;
}
.wpf-burger__box{ display:block; width:26px; height:2px; background:#fff; position:relative; }
.wpf-burger__box::before,
.wpf-burger__box::after{ content:""; position:absolute; left:0; width:26px; height:2px; background:#fff; }
.wpf-burger__box::before{ top:-8px; }
.wpf-burger__box::after{ top:8px; }

@media (max-width: 1000px){
	.wpf-burger{ display:block; }
	.wpf-nav{
		display:none; position:absolute; left:0; right:0; top:100%;
		background:var(--wpf-primaer); padding:8px clamp(16px,5vw,60px) 24px;
	}
	.wpf-header__inner{ position:relative; }
	.wpf-nav.is-open{ display:block; }
	.wpf-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
	.wpf-nav__list a{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.15); }
	.wpf-nav__list .sub-menu{ position:static; display:flex; background:transparent; box-shadow:none; padding:0 0 0 16px; }
	.wpf-nav__list .sub-menu a{ color:#fff; }
}

/* --- Inhalt ------------------------------------------------------------ */
.wpf-main{ display:block; }

.wpf-shell{
	max-width:1300px; margin-inline:auto;
	padding:clamp(28px,5vw,64px) clamp(16px,5vw,60px);
}
.wpf-shell--narrow{ max-width:820px; }

.wpf-page-title{ margin:0 0 .6em; }

.wpf-btn{
	display:inline-block; background:var(--wpf-primaer); color:#fff;
	padding:.8em 1.6em; border-radius:6px; text-decoration:none; font-weight:600;
}
.wpf-btn:hover{ background:var(--wpf-akzent); }

.wpf-result{ padding:18px 0; border-bottom:1px solid var(--wpf-linie); }
.wpf-result h2{ margin:0 0 .3em; font-size:1.25rem; }

/* --- Altlasten aus dem Page-Builder-Layout ------------------------------
   Bausteine des wpf-Designsystems sind im alten Theme mit negativen
   Aussenabstaenden aus dem Raster ausgebrochen. In der Block-Struktur sitzen
   sie bereits in einem Container voller Breite, der Ausbruch wuerde nur
   Ueberlauf erzeugen. */
:is(.wpf-entry,.editor-styles-wrapper) .wpf-hero,
.alignfull > .wpf-hero{
	width:100%; max-width:none; margin-left:0; margin-right:0;
}


/* --- Formulare ---------------------------------------------------------
   Contact Form 7 bringt keine eigene Gestaltung mit; im alten Theme kam sie
   vom Theme. Hier die Grundgestaltung, bewusst zurueckhaltend. */

.wpcf7 form{ margin:0; }

.wpcf7 p{ margin:0 0 18px; }

.wpcf7-form-control-wrap{ display:block; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea,
:is(.wpf-entry,.editor-styles-wrapper) input[type="search"],
.search-form input[type="search"]{
	display:block;
	width:100%;
	box-sizing:border-box;
	padding:12px 14px;
	font:inherit;
	font-size:1rem;
	line-height:1.4;
	color:var(--wpf-primaer);
	background:#fff;
	border:1px solid var(--wpf-linie);
	border-radius:6px;
	transition:border-color .15s ease, box-shadow .15s ease;
}

.wpcf7 textarea{ min-height:170px; resize:vertical; }

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{ color:#93a1ac; opacity:1; }

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
.search-form input[type="search"]:focus{
	outline:none;
	border-color:var(--wpf-akzent);
	box-shadow:0 0 0 3px rgba(21,119,155,.18);
}

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.search-form input[type="submit"],
.search-form button[type="submit"]{
	display:inline-block;
	width:auto;
	padding:.85em 1.9em;
	font:inherit;
	font-weight:600;
	color:#fff;
	background:var(--wpf-primaer);
	border:0;
	border-radius:6px;
	cursor:pointer;
	transition:background .15s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
.search-form input[type="submit"]:hover{ background:var(--wpf-akzent); }

.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible{ outline:3px solid var(--wpf-akzent); outline-offset:2px; }

/* Zustimmung und Auswahlfelder */
.wpcf7-acceptance .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-radio .wpcf7-list-item{ display:block; margin:0 0 8px; }

.wpcf7-acceptance .wpcf7-list-item label,
.wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-radio .wpcf7-list-item label{
	display:flex; gap:10px; align-items:flex-start;
	font-size:.9375rem; line-height:1.5; cursor:pointer;
}

.wpcf7-acceptance input[type="checkbox"],
.wpcf7-checkbox input[type="checkbox"],
.wpcf7-radio input[type="radio"]{ margin-top:.25em; flex:0 0 auto; width:18px; height:18px; accent-color:var(--wpf-primaer); }

/* Meldungen */
.wpcf7 .wpcf7-not-valid-tip{
	display:block; margin-top:6px;
	font-size:.875rem; color:#B3283C;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid{ border-color:#B3283C; }

.wpcf7 .wpcf7-response-output{
	margin:18px 0 0; padding:12px 16px;
	border:1px solid var(--wpf-linie); border-radius:6px;
	font-size:.9375rem; background:var(--wpf-flaeche);
}

.wpcf7 form.sent .wpcf7-response-output{ border-color:#2A7A3B; color:#1f5c2c; background:#f1f8f2; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{ border-color:#B3283C; color:#8c1f2f; background:#fdf3f4; }

.wpcf7-spinner{ margin-left:10px; }

/* Hinweistext unter dem Formular */
.wpf-form-note{ font-size:.875rem; color:var(--wpf-gedaempft, #6B7A85); }

/* Zwei Felder nebeneinander ab Tablet */
@media (min-width: 720px){
	.wpf-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
}

/* --- Hero buendig an den Inhalt ---------------------------------------- */
/* Zwischen zwei Bloecken liegt normalerweise ein Abstand. Direkt unter dem
   Hero soll er nicht sein. */
/* Folgt auf den Seitenkopf ein randloser, farbiger Block, sollen beide
   direkt aneinanderstossen. Folgt gewoehnlicher Inhalt, braucht er etwas
   Luft. */
:is(.wpf-entry,.editor-styles-wrapper) > .alignfull:first-child + *,
:is(.wpf-entry,.editor-styles-wrapper) > *:has(.wpf-hero) + *{ margin-top:clamp(26px,4vw,44px); }

:is(.wpf-entry,.editor-styles-wrapper) > .alignfull:first-child + .alignfull,
:is(.wpf-entry,.editor-styles-wrapper) > *:has(.wpf-hero) + .alignfull{ margin-top:0; }

/* Kein Abstand über dem ersten Block. */
:is(.wpf-entry,.editor-styles-wrapper) > *:first-child{ margin-top:0; }

/* Endet die Seite mit einem randlosen Block, schließt die Fußzeile direkt an.
   Sonst bleibt der gewohnte Abstand. */
:is(.wpf-entry,.editor-styles-wrapper) > *:last-child:not(.alignfull){ margin-bottom:clamp(40px,8vw,90px); }

/* Der Abstand des ersten bzw. letzten Kindes eines randlosen Blocks schlaegt
   sonst nach aussen durch und erzeugt einen weissen Streifen davor oder
   dahinter. Einzelne Plugins stellen unsichtbare Elemente (link, style,
   script) voran – die werden uebersprungen. */
:is(.wpf-entry,.editor-styles-wrapper) > .alignfull > :first-child,
:is(.wpf-entry,.editor-styles-wrapper) > .alignfull > :is(link,style,script,meta):first-child + *,
:is(.wpf-entry,.editor-styles-wrapper) > .alignfull > :is(link,style,script,meta):first-child + :is(link,style,script,meta) + *{
	margin-top:0;
}

:is(.wpf-entry,.editor-styles-wrapper) > .alignfull > :last-child,
:is(.wpf-entry,.editor-styles-wrapper) > .alignfull > :has(+ :is(link,style,script,meta):last-child),
:is(.wpf-entry,.editor-styles-wrapper) > .alignfull > :has(+ :is(link,style,script,meta) + :is(link,style,script,meta):last-child){
	margin-bottom:0;
}

/* --- Karte -------------------------------------------------------------- */
.wpf-karte{
	position:relative; overflow:hidden;
	border-radius:var(--wpf-radius, 10px);
	border:1px solid var(--wpf-linie);
	background:var(--wpf-flaeche);
	aspect-ratio:16 / 8;
	min-height:340px;
}

.wpf-karte iframe,
.wpf-karte > *{
	position:absolute; inset:0;
	width:100%; height:100%; border:0; display:block;
}

/* Platzhalter der Einwilligungsverwaltung soll den Rahmen ausfuellen. */
.wpf-karte .rcb-content-blocker,
.wpf-karte [class*="content-blocker"]{
	position:absolute; inset:0; width:100%; height:100%;
}

@media (max-width: 600px){
	.wpf-karte{ aspect-ratio:4 / 5; min-height:300px; }
}

/* --- Kontaktseite ------------------------------------------------------- */
/* Die Regeln greifen zweifach: über eigene Block-Klassen, falls gesetzt, und
   über die Struktur der Blöcke. Dadurch wirken sie auch nach einer erneuten
   Konvertierung, ohne dass im Editor etwas nachgetragen werden muss. */

/* Formularbereich als ruhige Karte */
:is(.wpf-entry,.editor-styles-wrapper) .wp-block-group:has(> .wp-block-columns .wpcf7){
	background:var(--wpf-flaeche);
	border:1px solid var(--wpf-linie);
	border-radius:14px;
	padding:clamp(22px,4vw,48px);
}

:is(.wpf-entry,.editor-styles-wrapper) .wp-block-group:has(> .wp-block-columns .wpcf7) .wp-block-columns{
	gap:clamp(24px,4vw,56px); align-items:flex-start;
}

:is(.wpf-entry,.editor-styles-wrapper) .wp-block-group:has(> .wp-block-columns .wpcf7) > .wp-block-columns > .wp-block-column > h2:first-child{
	margin-top:0;
}

:is(.wpf-entry,.editor-styles-wrapper) .wpcf7 input,
:is(.wpf-entry,.editor-styles-wrapper) .wpcf7 textarea{ background:#fff; }

/* Personenkacheln: Bild, Name, Funktion */
:is(.wpf-entry,.editor-styles-wrapper) .wp-block-columns:has(> .wp-block-column > figure.wp-block-image + h3){
	gap:clamp(18px,2.5vw,32px);
}

:is(.wpf-entry,.editor-styles-wrapper) .wp-block-columns:has(> .wp-block-column > figure.wp-block-image + h3) figure.wp-block-image{
	margin:0 0 14px;
}

:is(.wpf-entry,.editor-styles-wrapper) .wp-block-columns:has(> .wp-block-column > figure.wp-block-image + h3) figure.wp-block-image img{
	display:block; width:100%;
	aspect-ratio:4 / 5; object-fit:cover; object-position:center top;
	border-radius:12px;
}

:is(.wpf-entry,.editor-styles-wrapper) .wp-block-columns:has(> .wp-block-column > figure.wp-block-image + h3) h3{
	margin:0 0 2px; font-size:1.0625rem; line-height:1.3; color:var(--wpf-primaer);
}

:is(.wpf-entry,.editor-styles-wrapper) .wp-block-columns:has(> .wp-block-column > figure.wp-block-image + h3) h3 + p{
	margin:0; font-size:.9375rem; color:var(--wpf-gedaempft, #6B7A85);
}

/* Galerie: gleichmäßige Kacheln statt unterschiedlich hoher Bilder */
:is(.wpf-entry,.editor-styles-wrapper) .wp-block-gallery.has-nested-images figure.wp-block-image img{
	aspect-ratio:1 / 1; object-fit:cover; border-radius:8px;
}

/* Luft zwischen den Abschnitten – randlose Blöcke bleiben bündig aneinander,
   damit zwischen Hero und farbigem Inhalt kein weißer Streifen entsteht. */
:is(.wpf-entry,.editor-styles-wrapper) > .wp-block-group:not(.alignfull) + .wp-block-group:not(.alignfull){
	margin-top:clamp(40px,6vw,80px);
}

.wpf-kontaktbox{
	background:var(--wpf-flaeche);
	border:1px solid var(--wpf-linie);
	border-radius:14px;
	padding:clamp(22px,4vw,48px);
}

.wpf-kontaktbox .wp-block-columns{ gap:clamp(24px,4vw,56px); align-items:flex-start; }
.wpf-kontaktbox h2{ margin-top:0; }
.wpf-kontaktbox .wpcf7 input,
.wpf-kontaktbox .wpcf7 textarea{ background:#fff; }

/* Adressblock rechts neben dem Formular */
.wpf-kontaktbox .wpf-kontakt-daten p{ line-height:1.9; }

.wpf-team .wp-block-columns{ gap:clamp(18px,2.5vw,32px); }

.wpf-team figure.wp-block-image{ margin:0 0 14px; }

.wpf-team figure.wp-block-image img{
	display:block; width:100%;
	aspect-ratio:4 / 5; object-fit:cover; object-position:center top;
	border-radius:12px;
}

.wpf-team h3{
	margin:0 0 2px; font-size:1.0625rem; line-height:1.3;
	color:var(--wpf-primaer);
}

.wpf-team h3 + p{
	margin:0; font-size:.9375rem; color:var(--wpf-gedaempft, #6B7A85);
}

/* --- Social-Stream (Flow-Flow) ----------------------------------------- */
/* Das Plugin bringt einen sehr dunklen Eigenton mit. Hier auf die
   Hausfarbe gebracht. */
:is(.wpf-entry,.editor-styles-wrapper) .ff-stream,
:is(.wpf-entry,.editor-styles-wrapper) .ff-stream-wrapper{
	background:var(--wpf-primaer) !important;
}

:is(.wpf-entry,.editor-styles-wrapper) .ff-img-holder,
:is(.wpf-entry,.editor-styles-wrapper) .ff-img-loading{
	background:rgba(255,255,255,.06) !important;
}

/* --- Fußzeile ---------------------------------------------------------- */
.wpf-footer{ background:var(--wpf-primaer); color:#fff; margin-top:0; }

.wpf-footer a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.wpf-footer a:hover{ border-bottom-color:#fff; }

.wpf-footer__widgets{
	display:grid; gap:clamp(24px,4vw,48px);
	grid-template-columns:1.4fr 1fr 1fr 1.3fr;
	align-items:start;
	max-width:1300px; margin-inline:auto;
	padding:clamp(36px,5vw,64px) clamp(16px,5vw,60px);
}

@media (max-width: 1000px){
	.wpf-footer__widgets{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 600px){
	.wpf-footer__widgets{ grid-template-columns:1fr; gap:28px; }
}

.wpf-footer__widgets--extra{ padding-top:0; }

.wpf-footer__logo{
	display:block; width:auto; max-width:180px; height:auto;
	filter:brightness(0) invert(1);
}

.wpf-footer__name{ font-size:1.25rem; font-weight:700; margin:0; }

.wpf-footer__claim{
	margin:16px 0 0; max-width:30ch;
	font-size:.9375rem; line-height:1.6; color:rgba(255,255,255,.78);
}

.wpf-foot-title{
	color:#fff; font-size:.8125rem; font-weight:700;
	text-transform:uppercase; letter-spacing:.1em;
	margin:0 0 .9em; padding-bottom:.6em;
	border-bottom:1px solid rgba(255,255,255,.2);
}

.wpf-footer__text{ margin:0; font-size:.9375rem; line-height:1.8; }

.wpf-hours{ margin:0; font-size:.9375rem; }
.wpf-hours dt{ font-weight:600; }
.wpf-hours dd{ margin:0 0 .7em; color:rgba(255,255,255,.78); line-height:1.5; }
.wpf-hours dd:last-child{ margin-bottom:0; }

.wpf-footer__bar{
	display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between;
	max-width:1300px; margin-inline:auto;
	padding:18px clamp(16px,5vw,60px);
	border-top:1px solid rgba(255,255,255,.18);
	font-size:.875rem;
}

.wpf-footer__copy{ margin:0; color:rgba(255,255,255,.78); }
.wpf-footer__trenner{ margin:0 .5em; opacity:.5; }
.wpf-footer__agentur{ color:rgba(255,255,255,.78); }

.wpf-footer__legal-list{
	display:flex; flex-wrap:wrap; gap:18px; list-style:none; margin:0; padding:0;
}

/* --- Editor ------------------------------------------------------------ */
.editor-styles-wrapper .wpf-header,
.editor-styles-wrapper .wpf-footer{ display:none; }

/* --- Friedbergbote: Ausgaben als Karten -------------------------------- */
.wpf-bote{
	display:flex; flex-direction:column; gap:14px;
	text-decoration:none; color:inherit;
	height:100%;
}

.wpf-bote__blatt{
	position:relative; overflow:hidden;
	aspect-ratio:1 / 1.414;
	border-radius:var(--wpf-radius, 10px);
	border:1px solid var(--wpf-linie, #e2e8f0);
	background:var(--wpf-bg-soft, #f6f8fa);
	box-shadow:0 6px 18px rgba(0,48,93,.10);
	transition:transform .25s ease, box-shadow .25s ease;
}

.wpf-bote__blatt img{
	width:100%; height:100%; object-fit:cover; object-position:top center;
	display:block;
}

/* Ohne Vorschaubild bleibt ein ruhiges Deckblatt mit dem Monat. */
.wpf-bote__ersatz{
	position:absolute; inset:0;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
	padding:20px; text-align:center;
	background:linear-gradient(160deg, var(--wpf-primaer, #00305D), #06467f);
	color:#fff;
}

.wpf-bote__ersatz span:first-child{
	font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; opacity:.75;
}

.wpf-bote__ersatz span:last-child{ font-size:1.125rem; font-weight:600; }

.wpf-bote__text{ display:flex; flex-direction:column; gap:2px; }

.wpf-bote__titel{
	font-weight:600; font-size:1.0625rem; line-height:1.3;
	color:var(--wpf-primaer, #00305D);
}

.wpf-bote__hinweis{
	font-size:.875rem; color:var(--wpf-text-leise, #5a6b7c);
	display:inline-flex; align-items:center; gap:6px;
}

.wpf-bote:hover .wpf-bote__blatt,
.wpf-bote:focus-visible .wpf-bote__blatt{
	transform:translateY(-4px);
	box-shadow:0 14px 30px rgba(0,48,93,.20);
}

.wpf-bote:focus-visible{ outline:3px solid var(--wpf-akzent, #15779B); outline-offset:4px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
	.wpf-bote__blatt{ transition:none; }
	.wpf-bote:hover .wpf-bote__blatt{ transform:none; }
}

/* --- Kontaktseite ------------------------------------------------------- */
.wpf-kontaktdaten{
	display:flex; flex-direction:column; gap:26px;
	padding:clamp(22px,3vw,32px);
	border-radius:var(--wpf-radius, 10px);
	border:1px solid var(--wpf-linie, #e2e8f0);
	background:var(--wpf-bg-soft, #f6f8fa);
}

.wpf-kontaktdaten__block h3{
	margin:0 0 .5em;
	font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--wpf-akzent, #15779B);
}

.wpf-kontaktdaten__block p{ margin:0; line-height:1.7; }
.wpf-kontaktdaten a{ color:var(--wpf-primaer, #00305D); }

.wpf-zeiten{ margin:0; }
.wpf-zeiten dt{ font-weight:600; }
.wpf-zeiten dd{ margin:0 0 .6em; line-height:1.6; }
.wpf-zeiten dd:last-child{ margin-bottom:0; }

.wpf-kontaktdaten__aktionen{
	display:flex; flex-wrap:wrap; gap:12px; margin:0;
	padding-top:4px;
}

.wpf-knopf{
	display:inline-block; padding:11px 22px;
	border-radius:999px;
	background:var(--wpf-primaer, #00305D); color:#fff !important;
	font-weight:600; font-size:.9375rem; text-decoration:none;
	transition:background .2s ease;
}

.wpf-knopf:hover{ background:var(--wpf-akzent, #15779B); }

.wpf-knopf--leise{
	background:transparent; color:var(--wpf-primaer, #00305D) !important;
	border:1px solid var(--wpf-primaer, #00305D);
}

.wpf-knopf--leise:hover{ background:var(--wpf-primaer, #00305D); color:#fff !important; }

.wpf-karte iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Absendeknopf des Formulars: das alte Theme hat ihn gestaltet, jetzt tut es
   das Theme selbst. */
:is(.wpf-entry,.editor-styles-wrapper) .wpcf7 input[type="submit"],
:is(.wpf-entry,.editor-styles-wrapper) .wpcf7 button[type="submit"]{
	appearance:none;
	display:inline-block; padding:13px 32px;
	border:0; border-radius:999px;
	background:var(--wpf-primaer, #00305D); color:#fff;
	font-family:inherit; font-weight:600; font-size:1rem; line-height:1.2;
	cursor:pointer;
	transition:background .2s ease;
}

:is(.wpf-entry,.editor-styles-wrapper) .wpcf7 input[type="submit"]:hover,
:is(.wpf-entry,.editor-styles-wrapper) .wpcf7 button[type="submit"]:hover{ background:var(--wpf-akzent, #15779B); }

:is(.wpf-entry,.editor-styles-wrapper) .wpcf7 input[type="submit"]:focus-visible,
:is(.wpf-entry,.editor-styles-wrapper) .wpcf7 button[type="submit"]:focus-visible{
	outline:3px solid var(--wpf-akzent, #15779B); outline-offset:3px;
}

/* --- Leseansicht der Ausgaben ------------------------------------------ */
body.wpf-leser-offen{ overflow:hidden; }

.wpf-leser{
	position:fixed; inset:0; z-index:9999;
	display:flex; flex-direction:column;
	background:rgba(4,20,36,.94);
	backdrop-filter:blur(3px);
	color:#fff;
}

.wpf-leser[hidden]{ display:none !important; }

.wpf-leser__kopf{
	display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline;
	padding:14px clamp(16px,4vw,70px);
	border-bottom:1px solid rgba(255,255,255,.16);
	padding-right:70px;
}

.wpf-leser__titel{ margin:0; font-weight:600; font-size:1.0625rem; }
.wpf-leser__zaehler{ margin:0; font-size:.875rem; color:rgba(255,255,255,.7); }

.wpf-leser__laden{
	margin-left:auto; margin-right:24px;
	font-size:.875rem; color:#fff; text-decoration:underline;
	text-underline-offset:3px;
}

.wpf-leser__buehne{
	flex:1; min-height:0;
	display:flex; align-items:center; justify-content:center;
	padding:12px clamp(12px,7vw,110px);
}

.wpf-leser__blatt{
	display:flex; gap:2px; align-items:center; justify-content:center;
	max-height:100%;
}

.wpf-leser__seite{
	display:block; max-height:100%; height:auto;
	background:#fff;
	box-shadow:0 18px 50px rgba(0,0,0,.5);
}

.wpf-leser__hinweis{ margin:0; text-align:center; color:rgba(255,255,255,.85); }
.wpf-leser__hinweis a{ color:#fff; }

.wpf-leser__pfeil,
.wpf-leser__schliessen{
	position:absolute; top:50%; transform:translateY(-50%);
	display:flex; align-items:center; justify-content:center;
	width:52px; height:52px; padding:0;
	border:0; border-radius:50%;
	background:rgba(255,255,255,.14); color:#fff;
	cursor:pointer;
	transition:background .2s ease, opacity .2s ease;
}

.wpf-leser__pfeil svg,
.wpf-leser__schliessen svg{ width:24px; height:24px; }

.wpf-leser__pfeil:hover:not(:disabled),
.wpf-leser__schliessen:hover{ background:rgba(255,255,255,.28); }

.wpf-leser__pfeil:disabled{ opacity:.25; cursor:default; }

.wpf-leser__pfeil--zurueck{ left:clamp(8px,2vw,26px); }
.wpf-leser__pfeil--vor{ right:clamp(8px,2vw,26px); }

.wpf-leser__schliessen{ top:12px; right:clamp(8px,2vw,26px); transform:none; width:44px; height:44px; }

.wpf-leser__pfeil:focus-visible,
.wpf-leser__schliessen:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

@media (max-width: 899px){
	.wpf-leser__buehne{ padding-inline:clamp(8px,3vw,20px); }
	.wpf-leser__pfeil{ width:44px; height:44px; }
	.wpf-leser__laden{ margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
	.wpf-leser__pfeil, .wpf-leser__schliessen{ transition:none; }
}

/* --- Freie Wohnungen: Kennzeichen und Liste ----------------------------- */
.wpf-frei-marke{
	display:inline-flex; align-items:center;
	margin-left:.5em; padding:3px 11px;
	border-radius:999px;
	background:var(--wpf-akzent, #15779B); color:#fff;
	font-size:.75rem; font-weight:600; letter-spacing:.02em;
	white-space:nowrap; vertical-align:middle;
}

.wpf-frei-marke--leer{
	background:transparent; color:var(--wpf-gedaempft, #6B7A85);
	border:1px solid var(--wpf-linie, #e2e8f0);
}

:is(.wpf-entry,.editor-styles-wrapper) .wpf-frei{ margin:clamp(40px,7vw,80px) 0 0; }
.wpf-frei__titel{ margin:0 0 .7em; }
.wpf-frei__leer{ margin:0 0 1.2em; color:var(--wpf-gedaempft, #6B7A85); }

.wpf-frei__liste{
	display:grid; gap:clamp(16px,2.4vw,28px);
	grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
	list-style:none; margin:0; padding:0;
}

.wpf-frei__karte{ margin:0; }

.wpf-frei__link{
	display:flex; flex-direction:column; height:100%;
	overflow:hidden;
	border:1px solid var(--wpf-linie, #e2e8f0);
	border-radius:var(--wpf-radius, 10px);
	background:var(--wpf-flaeche, #fff);
	color:inherit; text-decoration:none;
	box-shadow:0 4px 14px rgba(0,48,93,.07);
	transition:transform .22s ease, box-shadow .22s ease;
}

.wpf-frei__link:hover, .wpf-frei__link:focus-visible{
	transform:translateY(-3px);
	box-shadow:0 14px 30px rgba(0,48,93,.16);
}

.wpf-frei__bild{ display:block; aspect-ratio:4 / 3; background:var(--wpf-bg-soft, #f6f8fa); }
.wpf-frei__bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.wpf-frei__platzhalter{ display:block; width:100%; height:100%; }

.wpf-frei__text{ display:flex; flex-direction:column; gap:3px; padding:16px 18px 18px; }
.wpf-frei__name{ font-weight:600; font-size:1.0625rem; color:var(--wpf-primaer, #00305D); }
.wpf-frei__nummer{ font-size:.8125rem; color:var(--wpf-gedaempft, #6B7A85); }
.wpf-frei__angaben{ font-size:.875rem; color:var(--wpf-gedaempft, #6B7A85); }
.wpf-frei__preis{ margin-top:6px; font-weight:600; color:var(--wpf-primaer, #00305D); }
.wpf-frei__preis small{ font-weight:400; color:var(--wpf-gedaempft, #6B7A85); }

.wpf-frei__aktionen{ display:flex; flex-wrap:wrap; gap:12px; margin:clamp(18px,3vw,28px) 0 0; }

.wpf-frei__knopf{
	display:inline-block; padding:11px 22px;
	border-radius:999px;
	background:var(--wpf-primaer, #00305D); color:#fff !important;
	font-weight:600; font-size:.9375rem; text-decoration:none;
}

.wpf-frei__knopf--leise{
	background:transparent; color:var(--wpf-primaer, #00305D) !important;
	border:1px solid var(--wpf-primaer, #00305D);
}

@media (prefers-reduced-motion: reduce){
	.wpf-frei__link{ transition:none; }
	.wpf-frei__link:hover{ transform:none; }
}

/* --- Impressum und Datenschutzerklärung -------------------------------- */
:is(.wpf-entry,.editor-styles-wrapper) .wpf-recht > .wpf-recht__lead{
	font-size:1.0625rem; line-height:1.75;
	color:var(--wpf-text, inherit);
}

.wpf-recht__stand{
	display:inline-block; margin-left:.4em;
	padding:2px 10px; border-radius:999px;
	background:var(--wpf-bg-soft, #f6f8fa);
	font-size:.8125rem; color:var(--wpf-gedaempft, #6B7A85);
	white-space:nowrap;
}

/* Angaben im Impressum als ruhige Karten */
.wpf-impressum-raster{
	display:grid; gap:clamp(14px,2vw,20px);
	grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
	margin:clamp(24px,4vw,36px) 0;
}

.wpf-impressum-karte{
	padding:20px 22px;
	border:1px solid var(--wpf-linie, #e2e8f0);
	border-radius:14px;
	background:var(--wpf-bg-soft, #f6f8fa);
}

.wpf-impressum-karte h3{
	margin:0 0 .7em;
	font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--wpf-akzent, #15779B);
}

.wpf-impressum-karte p{ margin:0; line-height:1.75; font-size:.9375rem; }
.wpf-impressum-karte a{ color:var(--wpf-primaer, #00305D); }
.wpf-impressum-klein{ color:var(--wpf-gedaempft, #6B7A85); font-size:.875rem; }

/* Inhaltsverzeichnis */
.wpf-inhalt{
	margin:clamp(24px,4vw,36px) 0 clamp(30px,5vw,48px);
	padding:clamp(20px,3vw,30px) clamp(22px,3vw,34px);
	border:1px solid var(--wpf-linie, #e2e8f0);
	border-radius:14px;
	background:var(--wpf-bg-soft, #f6f8fa);
}

.wpf-inhalt__titel{
	margin:0 0 1em;
	font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--wpf-akzent, #15779B);
}

.wpf-inhalt__liste{
	list-style:none; margin:0; padding:0;
	counter-reset:wpf-inhalt;
	column-gap:clamp(24px,4vw,48px);
}

@media (min-width: 720px){
	.wpf-inhalt__liste{ columns:2; }
}

.wpf-inhalt__liste li{
	counter-increment:wpf-inhalt;
	margin:0 0 .55em;
	break-inside:avoid;
	line-height:1.5;
}

.wpf-inhalt__liste a{
	display:inline-flex; gap:.6em;
	color:var(--wpf-primaer, #00305D);
	text-decoration:none;
	font-size:.9375rem;
}

.wpf-inhalt__liste a::before{
	content:counter(wpf-inhalt) ".";
	color:var(--wpf-akzent, #15779B);
	font-variant-numeric:tabular-nums;
	flex:none;
}

.wpf-inhalt__liste a:hover,
.wpf-inhalt__liste a:focus-visible{ text-decoration:underline; }

/* Abschnitte */
.wpf-recht .wpf-abschnitt{
	margin-top:clamp(26px,4vw,40px);
	padding-left:clamp(16px,2vw,24px);
	border-left:3px solid var(--wpf-linie, #e2e8f0);
	scroll-margin-top:calc(var(--wpf-kopf-hoehe, 84px) + 26px);
}

.wpf-recht .wpf-abschnitt > h2:first-child{
	margin-top:0;
	font-size:clamp(1.15rem, .9rem + .7vw, 1.5rem);
}

.wpf-recht .wpf-abschnitt h3{
	margin-top:1.4em;
	font-size:1.0625rem;
	color:var(--wpf-primaer, #00305D);
}

.wpf-recht .wpf-abschnitt:target,
.wpf-recht .wpf-abschnitt:hover{ border-left-color:var(--wpf-akzent, #15779B); }

.wpf-recht .wpf-abschnitt p,
.wpf-recht .wpf-abschnitt li{ max-width:82ch; }

/* --- Galerie in der Bildspalte ----------------------------------------- */
.wpf-intro-galerie{ margin-top:16px; }

.wpf-intro-galerie .wp-block-gallery.has-nested-images{
	display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
}

.wpf-intro-galerie .wp-block-gallery.has-nested-images figure.wp-block-image{
	width:auto !important; margin:0 !important; flex:none !important;
}

.wpf-intro-galerie .wp-block-gallery.has-nested-images figure.wp-block-image img{
	aspect-ratio:1 / 1; object-fit:cover; border-radius:6px; width:100%;
}

@media (min-width: 1100px){
	.wpf-intro--photo:has(> .wpf-intro-galerie){
		grid-template-rows:auto 1fr;
		align-items:start;
	}

	.wpf-intro--photo:has(> .wpf-intro-galerie) > :first-child{
		grid-column:1; grid-row:1 / span 2;
	}

	.wpf-intro--photo:has(> .wpf-intro-galerie) > .wpf-intro-media{
		grid-column:2; grid-row:1;
	}

	.wpf-intro--photo > .wpf-intro-galerie{ grid-column:2; grid-row:2; }
}

/* --- Sprungmarken ------------------------------------------------------ */
/* Die Kopfzeile bleibt beim Scrollen stehen. Ohne Vorgabe verschwindet das
   angesprungene Ziel dahinter. */
:root{ --wpf-kopf-hoehe:84px; }

html{ scroll-behavior:smooth; }

:is(.wpf-entry,.editor-styles-wrapper) [id],
.wpf-main [id]{ scroll-margin-top:calc(var(--wpf-kopf-hoehe) + 26px); }

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
}

/* --- Seite nicht gefunden ---------------------------------------------
   Bewusst ohne Suchfeld: die haeufigsten Wege stehen als Kacheln bereit.
   Die Gestaltung kommt aus dem Designsystem, hier nur die Ergaenzungen. */

.wpf-404 .wpf-hero__eyebrow--still{
	cursor:default;
	letter-spacing:.18em;
}

.wpf-404__inhalt{ margin-top:clamp(26px,4vw,44px); }

.wpf-404__inhalt > h2{ margin-top:0; }

.wpf-404__weg{ position:relative; transition:transform .15s ease, box-shadow .15s ease; }

.wpf-404__abdeckung{
	position:absolute; inset:0;
	border-radius:inherit;
	text-decoration:none;
}

.wpf-404__weg:hover,
.wpf-404__weg:focus-within{
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(0,48,93,.12);
}

.wpf-404__abdeckung:focus-visible{
	outline:3px solid var(--wpf-akzent, #15779b);
	outline-offset:3px;
}

.wpf-404__aufruf{ margin-top:clamp(28px,4vw,44px); }

.wpf-404__zurueck{ margin-top:26px; }

.wpf-404 .screen-reader-text{
	position:absolute; width:1px; height:1px;
	margin:-1px; padding:0; overflow:hidden;
	clip:rect(0 0 0 0); clip-path:inset(50%);
	white-space:nowrap; border:0;
}

/* --- Friedbergbote: Raster der Ausgaben -------------------------------- */
/* Frueher stand jede Ausgabe in einer eigenen Spalte des Page Builders.
   Jetzt setzt der Baustein sein Raster selbst. */
:is(.wpf-entry,.editor-styles-wrapper) .wpf-boten{
	display:grid;
	grid-template-columns:repeat(4, minmax(0,1fr));
	gap:clamp(18px,2.5vw,32px);
}

@media (max-width:1100px){
	:is(.wpf-entry,.editor-styles-wrapper) .wpf-boten{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width:760px){
	:is(.wpf-entry,.editor-styles-wrapper) .wpf-boten{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
}

/* --- Galerien ohne feste Spaltenzahl ----------------------------------
   Der Block-Editor laesst solche Galerien in einer Flex-Reihe laufen: die
   letzten Bilder einer Zeile werden dann so breit wie noetig – auf der
   KITA-Seite ueber die halbe Fensterbreite. Ein festes Raster mit gleichem
   Bildausschnitt ist ruhiger. Galerien mit gewaehlter Spaltenzahl (etwa die
   Impressionen) bleiben unberuehrt. */
:is(.wpf-entry,.editor-styles-wrapper) .wp-block-gallery.columns-default{
	display:grid;
	grid-template-columns:repeat(3, minmax(0,1fr));
	gap:clamp(12px,1.6vw,20px);
	max-width:1300px;
	margin-inline:auto;
}

/* Der Block-Editor setzt die Spaltenbreite mit einem Kniff durch
   (":not(#individual-image)" erhoeht das Gewicht der Regel). Damit die
   eigene Regel greift, braucht sie denselben Kniff. */
:is(.wpf-entry,.editor-styles-wrapper) .wp-block-gallery.columns-default > figure.wp-block-image:not(#individual-image){
	width:auto; max-width:none; margin:0; flex:none;
	aspect-ratio:4 / 3;
	overflow:hidden;
	border-radius:var(--wpf-radius, 10px);
}

:is(.wpf-entry,.editor-styles-wrapper) .wp-block-gallery.columns-default > figure.wp-block-image:not(#individual-image) > a{
	display:block; width:100%; height:100%;
}

:is(.wpf-entry,.editor-styles-wrapper) .wp-block-gallery.columns-default figure.wp-block-image:not(#individual-image) img{
	width:100%; height:100%;
	object-fit:cover; object-position:center;
	border-radius:0;
}

@media (max-width:900px){
	:is(.wpf-entry,.editor-styles-wrapper) .wp-block-gallery.columns-default{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}