/*
 * Designsystem Wohnpark Friedberg
 * Übernommen aus: Wohnpark Friedberg – wpf Design-System (zentrales CSS) (ID 108177)
 * am 03.09.2026 06:25 Uhr. Adressen wurden auf Pfade ohne Domain umgestellt.
 */

/* ==========================================================================
   Wohnpark Friedberg – zentrales Stylesheet fuer die "wpf"-Bausteine
   --------------------------------------------------------------------------
   Zusammengefuehrt aus den Inline-Styles der 17 bereits umgesetzten Seiten
   (Wissenswertes-Uebersicht, 15 Unterseiten, FAQ). Enthaelt alle 174 Regeln
   dieser Seiten, dedupliziert und auf eine einheitliche Fassung gebracht.

   EINBAU: als globales CSS-Snippet (WPCode) oder im Child-Theme laden.
   Danach in den Raw-HTML-Bloecken der Seiten den <style>...</style>-Teil
   loeschen – das Markup bleibt unveraendert.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design-Tokens
   Frueher in .wpf-content und .wpf-hero doppelt gepflegt – jetzt einmal
   global. Farb- oder Radius-Aenderungen wirken damit auf allen Seiten.
   -------------------------------------------------------------------------- */
:root{
  --wpf-navy:#00305D;
  --wpf-accent:#15779B;
  --wpf-accent-soft:#E8F1F6;
  --wpf-accent-line:#CDE1EC;
  --wpf-accent-light:#7FB6CE;
  --wpf-text:#3A4750;
  --wpf-heading:#00305D;
  --wpf-muted:#6B7A85;
  --wpf-line:#E1E7EC;
  --wpf-bg-soft:#F6F8FA;
  --wpf-radius:10px;
  --wpf-font:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Standard-Hero-Bild. Pro Seite ueberschreibbar:
     <div class="wpf-hero" style="--wpf-hero-img:url('.../bild.jpg')"> */
  --wpf-hero-img:url("/wp-content/uploads/2026/06/f3388bbc-521f-4df8-82fa-9e8aee1c291d-1024x575.jpg");
}


/* Groesseres Hero-Bild erst ab groesseren Viewports laden (spart auf Mobil
   rund 290 kB gegenueber der Originaldatei). */
@media (min-width:1100px){
  :root{ --wpf-hero-img:url("/wp-content/uploads/2026/06/f3388bbc-521f-4df8-82fa-9e8aee1c291d-1536x862.jpg"); }
}

@media (min-width:1700px){
  :root{ --wpf-hero-img:url("/wp-content/uploads/2026/06/f3388bbc-521f-4df8-82fa-9e8aee1c291d.jpg"); }
}


/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.wpf-hero{
  /* Volle Breite ausbrechen – unabhaengig von der Theme-Spalte. Falls ein
     minimaler horizontaler Scroll entsteht, im Theme body{overflow-x:hidden}
     setzen (ueblich) oder die folgenden vier Zeilen entfernen. */
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  position:relative; display:flex; align-items:flex-end;
  min-height:clamp(300px, 46vw, 520px); overflow:hidden;
  background:var(--wpf-navy) var(--wpf-hero-img) center 42% / cover no-repeat;
  font-family:var(--wpf-font);
  -webkit-font-smoothing:antialiased;
}

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

.wpf-hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,48,93,.34) 0%, rgba(0,48,93,.30) 42%, rgba(0,48,93,.82) 100%),
    linear-gradient(90deg, rgba(0,48,93,.55) 0%, rgba(0,48,93,.10) 60%, rgba(0,48,93,0) 100%);
}

.wpf-hero__inner{
  position:relative; z-index:1; width:100%; max-width:820px; margin:0 auto;
  padding:clamp(56px,10vw,96px) clamp(20px,5vw,24px) clamp(34px,6vw,64px);
}

.wpf-hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:clamp(14px,2.4vw,22px);
  font-size:clamp(13px,2.6vw,15px); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:#CFE0EA; text-decoration:none; transition:color .2s ease;
}

.wpf-hero__eyebrow svg{ width:1.05em; height:1.05em; }

.wpf-hero__eyebrow:hover,
.wpf-hero__eyebrow:focus-visible{ color:#fff; }

.wpf-hero__title{
  margin:0; color:#fff; font-family:inherit; font-weight:800;
  font-size:clamp(30px,6.2vw,58px); line-height:1.12; letter-spacing:-.02em;
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto;
  text-shadow:0 2px 18px rgba(0,20,40,.28); max-width:20ch;
}

.wpf-hero__sub{
  margin:clamp(12px,1.8vw,18px) 0 0; color:rgba(255,255,255,.9);
  font-family:inherit; font-weight:600;
  font-size:clamp(16px,3vw,22px); line-height:1.45;
  max-width:34ch; text-shadow:0 1px 12px rgba(0,20,40,.28);
}

.wpf-hero__eyebrow:focus-visible,
.wpf-hero a:focus-visible{
  outline:3px solid #fff; outline-offset:3px; border-radius:3px;
}


/* --------------------------------------------------------------------------
   3. Content-Container und Grundtypografie
   -------------------------------------------------------------------------- */
.wpf-content{
  font-family:var(--wpf-font);
  font-size:17px;
  line-height:1.75;
  color:var(--wpf-text);
  max-width:820px;
  margin:0 auto;
  padding:10px 0 20px;
  -webkit-font-smoothing:antialiased;
}

/* Breitere Variante fuer Uebersichtsseiten mit Kachelraster */
.wpf-content--wide{ max-width:1180px; }

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

.wpf-content p{
  font-size:17px;
  line-height:1.75;
  color:var(--wpf-text);
  margin:0 0 1.25em;
}

.wpf-content strong{ color:var(--wpf-navy); font-weight:700; }

.wpf-content a:not(.wpf-btn){
  color:var(--wpf-accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .2s ease, text-decoration-color .2s ease;
}

.wpf-content a:not(.wpf-btn):hover,
.wpf-content a:not(.wpf-btn):focus{
  color:var(--wpf-navy);
  text-decoration-thickness:2px;
}

/* Links auf dunklem Grund (Zitat, Callout, CTA) */
.wpf-content .wpf-quote a,
.wpf-content .wpf-callout a,
.wpf-content .wpf-cta-text a{
  color:#fff;
  text-decoration-color:rgba(255,255,255,.6);
}

.wpf-content .wpf-quote a:hover,
.wpf-content .wpf-quote a:focus,
.wpf-content .wpf-callout a:hover,
.wpf-content .wpf-callout a:focus,
.wpf-content .wpf-cta-text a:hover,
.wpf-content .wpf-cta-text a:focus{
  color:#fff;
  text-decoration-color:#fff;
}

.wpf-content .wpf-callout a strong,
.wpf-content .wpf-callout-text strong{ color:#fff; }

.wpf-content img{ max-width:100%; height:auto; }

.wpf-content figure{ margin:0; }


/* --------------------------------------------------------------------------
   4. Lead, Ueberschriften
   -------------------------------------------------------------------------- */
.wpf-lead{
  font-size:20px !important;
  line-height:1.65 !important;
  color:var(--wpf-navy) !important;
  font-weight:400;
  border-left:4px solid var(--wpf-accent);
  padding:2px 0 2px 22px;
  margin:0 0 1.5em !important;
}

.wpf-content .wpf-h2{
  font-family:inherit;
  font-size:30px;
  line-height:1.3;
  font-weight:700;
  color:var(--wpf-heading);
  letter-spacing:-.01em;
  margin:2.4em 0 .7em;
  padding-top:1.4em;
  border-top:1px solid var(--wpf-line);
  text-transform:none;
}

.wpf-content .wpf-h3{
  font-family:inherit;
  font-size:20px;
  line-height:1.4;
  font-weight:700;
  color:var(--wpf-navy);
  margin:2em 0 1em;
  text-transform:none;
}

.wpf-content .wpf-group-sub{
  font-size:16px !important;
  color:var(--wpf-muted) !important;
  margin:0 0 1.7em !important;
  max-width:760px;
}


/* --------------------------------------------------------------------------
   5. Intro-Block und Bilder
   -------------------------------------------------------------------------- */
.wpf-intro{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:34px;
  align-items:stretch;
  margin:0 0 1.25em;
}

.wpf-content .wpf-intro-last{ margin-bottom:0 !important; }

.wpf-intro-media{ margin:0; }

.wpf-intro-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:center 25%;
  border-radius:var(--wpf-radius);
}

.wpf-content .wpf-figure{ margin:0 0 1.9em; }

.wpf-figure img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:var(--wpf-radius);
}


/* --------------------------------------------------------------------------
   6. Karten (Icon + kurzer Text)
   -------------------------------------------------------------------------- */
.wpf-content ul.wpf-cards{
  list-style:none;
  margin:0 0 1.8em;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}

.wpf-content ul.wpf-cards > li.wpf-card{
  list-style:none;
  margin:0;
  padding:18px;
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--wpf-line);
  border-radius:var(--wpf-radius);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wpf-content ul.wpf-cards > li.wpf-card:hover{
  border-color:var(--wpf-accent);
  box-shadow:0 6px 18px rgba(0,48,93,.08);
  transform:translateY(-2px);
}

.wpf-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--wpf-accent-soft);
  color:var(--wpf-accent);
}

.wpf-icon svg{ width:22px; height:22px; display:block; }

.wpf-card-text{
  font-size:16px;
  line-height:1.45;
  color:var(--wpf-navy);
  font-weight:600;
}

.wpf-card-body{
  display:block;
  font-size:15.5px;
  line-height:1.6;
  color:var(--wpf-text);
}

.wpf-card-body strong{
  display:block;
  font-size:16.5px;
  color:var(--wpf-navy);
  margin-bottom:4px;
  line-height:1.4;
}

.wpf-content .wpf-card-body strong a{ color:var(--wpf-navy); }


/* --------------------------------------------------------------------------
   7. Gegenueberstellung
   -------------------------------------------------------------------------- */
.wpf-compare{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin:0 0 1.8em;
}

.wpf-compare-item{
  background:var(--wpf-bg-soft);
  border:1px solid var(--wpf-line);
  border-top:4px solid var(--wpf-muted);
  border-radius:var(--wpf-radius);
  padding:22px 24px;
}

.wpf-compare-item--accent{
  background:var(--wpf-accent-soft);
  border-color:var(--wpf-accent-line);
  border-top-color:var(--wpf-accent);
}

.wpf-content .wpf-compare-title{
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  color:var(--wpf-navy);
  margin:0 0 .5em;
  text-transform:none;
  letter-spacing:0;
}

.wpf-content .wpf-compare-text{
  font-size:16px !important;
  line-height:1.65 !important;
  margin:0 !important;
}


/* --------------------------------------------------------------------------
   8. Zitat
   -------------------------------------------------------------------------- */
.wpf-content blockquote.wpf-quote{
  margin:0 0 1.8em;
  padding:24px 28px;
  background:var(--wpf-navy);
  color:#fff;
  border:0;
  border-radius:var(--wpf-radius);
  font-size:18px;
  line-height:1.7;
  font-style:normal;
  quotes:none;
}

.wpf-content blockquote.wpf-quote::before,
.wpf-content blockquote.wpf-quote::after{ content:none; }


/* --------------------------------------------------------------------------
   9. Serviceliste
   -------------------------------------------------------------------------- */
.wpf-content ul.wpf-services{
  list-style:none;
  margin:0 0 1.8em;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:4px 28px;
}

.wpf-content ul.wpf-services > li.wpf-service{
  list-style:none;
  margin:0;
  padding:14px 0;
  display:flex;
  align-items:flex-start;
  gap:16px;
  border-bottom:1px solid var(--wpf-line);
}

.wpf-service-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--wpf-radius);
  background:var(--wpf-navy);
  color:#fff;
}

.wpf-service-icon svg{ width:21px; height:21px; display:block; }

.wpf-service-text{ display:block; padding-top:1px; }

.wpf-service-text strong{
  display:block;
  font-size:16px;
  font-weight:700;
  color:var(--wpf-navy);
  line-height:1.35;
}

.wpf-service-text strong a{ color:var(--wpf-navy) !important; }

.wpf-service-text em{
  display:block;
  font-style:normal;
  font-size:14px;
  line-height:1.5;
  color:var(--wpf-muted);
  margin-top:2px;
}


/* --------------------------------------------------------------------------
   10. Checkliste
   -------------------------------------------------------------------------- */
.wpf-checklist-box{
  background:var(--wpf-bg-soft);
  border:1px solid var(--wpf-line);
  border-radius:var(--wpf-radius);
  padding:26px 28px 24px;
  margin:0 0 1.8em;
}

.wpf-content .wpf-checklist-intro,
.wpf-content .wpf-checklist-head{
  margin:0 0 .9em !important;
  font-weight:700;
  color:var(--wpf-navy);
  font-size:16px !important;
}

.wpf-content ul.wpf-checklist{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:10px 28px;
}

.wpf-content ul.wpf-checklist--2col{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px 28px;
}

.wpf-content ul.wpf-checklist > li{
  list-style:none;
  margin:0;
  padding:0 0 0 30px;
  position:relative;
  font-size:16px;
  line-height:1.55;
  color:var(--wpf-text);
}

.wpf-checklist-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:22px 28px;
}

/* Haekchen als eingebettete SVG-Grafik */
.wpf-content ul.wpf-checklist > li::before,
.wpf-content ul.wpf-faq-list > li::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--wpf-accent);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 12px;
}

.wpf-content ul.wpf-faq-list > li::before{ top:.28em; }


/* --------------------------------------------------------------------------
   11. Einfache Aufzaehlungen
   -------------------------------------------------------------------------- */
.wpf-content ul.wpf-plainlist,
.wpf-content ul.wpf-price-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.wpf-content ul.wpf-price-list{ gap:9px; }

.wpf-content ul.wpf-plainlist > li,
.wpf-content ul.wpf-price-list > li{
  list-style:none;
  margin:0;
  padding:0 0 0 22px;
  position:relative;
  font-size:15.5px;
  line-height:1.55;
  color:var(--wpf-text);
}

.wpf-content ul.wpf-price-list > li{ padding-left:26px; }

.wpf-content ul.wpf-plainlist > li::before,
.wpf-content ul.wpf-price-list > li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--wpf-accent);
}


/* --------------------------------------------------------------------------
   12. Preis-/Angebotskarten
   -------------------------------------------------------------------------- */
.wpf-content ul.wpf-price-grid{
  list-style:none; margin:0 0 1.9em; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;
}

.wpf-content ul.wpf-price-grid > li.wpf-price{
  list-style:none; margin:0; padding:24px 24px 20px;
  background:#fff; border:1px solid var(--wpf-line); border-radius:var(--wpf-radius);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wpf-content ul.wpf-price-grid > li.wpf-price:hover{
  border-color:var(--wpf-accent);
  box-shadow:0 8px 22px rgba(0,48,93,.09);
  transform:translateY(-2px);
}

.wpf-content .wpf-price-title{
  font-family:inherit; font-size:19px; line-height:1.35; font-weight:700;
  color:var(--wpf-navy); margin:0 0 .35em; text-transform:none; letter-spacing:0;
}

.wpf-content ul.wpf-price-grid .wpf-price-title a{
  color:var(--wpf-navy); text-decoration:none;
}

.wpf-content ul.wpf-price-grid .wpf-price-title a:hover,
.wpf-content ul.wpf-price-grid .wpf-price-title a:focus{
  color:var(--wpf-accent); text-decoration:underline;
}

.wpf-content .wpf-price-tag{
  display:inline-block;
  margin:0 0 1em !important;
  padding:5px 13px;
  background:var(--wpf-accent-soft); color:var(--wpf-accent) !important;
  border-radius:100px;
  font-size:15px !important; line-height:1.5 !important; font-weight:600;
}

.wpf-content .wpf-price-tag strong{ color:var(--wpf-accent); font-size:17px; }

.wpf-content .wpf-price-tag--soft{
  background:var(--wpf-bg-soft); color:var(--wpf-muted) !important;
  font-size:14px !important; font-weight:600;
}

.wpf-content .wpf-price-text{
  font-size:15.5px !important; line-height:1.65 !important; margin:0 !important;
}


/* --------------------------------------------------------------------------
   13. Callout (dunkler Hinweiskasten)
   -------------------------------------------------------------------------- */
.wpf-callout{
  margin:0 0 1.9em; padding:26px 28px 24px;
  background:var(--wpf-navy); color:#fff; border-radius:var(--wpf-radius);
}

.wpf-content .wpf-callout-label{
  margin:0 0 .5em !important;
  font-size:12px !important; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--wpf-accent-light) !important;
}

.wpf-content .wpf-callout-text{
  font-size:17px !important; line-height:1.7 !important; color:#fff !important;
  margin:0 0 .9em !important;
}

.wpf-content ul.wpf-callout-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px 24px;
}

.wpf-content ul.wpf-callout-list > li{
  list-style:none; margin:0; padding:0 0 0 26px; position:relative;
  font-size:15.5px; line-height:1.5; color:rgba(255,255,255,.9);
}

.wpf-content ul.wpf-callout-list > li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; background:var(--wpf-accent-light);
}

.wpf-content ul.wpf-callout-list strong{ color:#fff; font-size:17px; }


/* --------------------------------------------------------------------------
   14. Nummerierte Schritte
   -------------------------------------------------------------------------- */
.wpf-content ol.wpf-steps{
  list-style:none; margin:0 0 1.9em; padding:0; counter-reset:wpfstep;
  display:grid; gap:14px;
}

.wpf-content ol.wpf-steps > li.wpf-step{
  list-style:none; margin:0; padding:22px 24px 20px 68px; position:relative;
  counter-increment:wpfstep;
  background:#fff; border:1px solid var(--wpf-line); border-radius:var(--wpf-radius);
}

.wpf-content ol.wpf-steps > li.wpf-step::before{
  content:counter(wpfstep);
  position:absolute; left:22px; top:22px;
  width:32px; height:32px; border-radius:50%;
  background:var(--wpf-accent-soft); color:var(--wpf-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700;
}

.wpf-content .wpf-step-title{
  font-family:inherit; font-size:17.5px; line-height:1.4; font-weight:700;
  color:var(--wpf-navy); margin:0 0 .8em; text-transform:none; letter-spacing:0;
}

.wpf-content .wpf-step-text{
  font-size:15.5px !important; line-height:1.65 !important; margin:0 !important;
}


/* --------------------------------------------------------------------------
   15. FAQ-Akkordeon
   -------------------------------------------------------------------------- */
.wpf-faq{
  border:1px solid var(--wpf-line);
  border-radius:var(--wpf-radius);
  overflow:hidden;
  margin:0 0 1.8em;
}

.wpf-faq-item + .wpf-faq-item{ border-top:1px solid var(--wpf-line); }

.wpf-content summary.wpf-faq-q{
  list-style:none;
  cursor:pointer;
  padding:18px 52px 18px 24px;
  position:relative;
  font-size:17px;
  font-weight:700;
  color:var(--wpf-navy);
  line-height:1.45;
  background:#fff;
  transition:background .2s ease;
}

.wpf-content summary.wpf-faq-q::-webkit-details-marker{ display:none; }

.wpf-content summary.wpf-faq-q:hover{ background:var(--wpf-bg-soft); }

.wpf-content summary.wpf-faq-q::after{
  content:"";
  position:absolute;
  right:22px;
  top:50%;
  width:11px;
  height:11px;
  margin-top:-7px;
  border-right:2px solid var(--wpf-accent);
  border-bottom:2px solid var(--wpf-accent);
  transform:rotate(45deg);
  transition:transform .25s ease;
}

.wpf-faq-item[open] > summary.wpf-faq-q{ background:var(--wpf-bg-soft); }

.wpf-faq-item[open] > summary.wpf-faq-q::after{
  transform:rotate(-135deg);
  margin-top:-2px;
}

.wpf-content .wpf-faq-qh{
  margin:0; display:inline; font-family:inherit;
  font-size:17px; font-weight:700; line-height:1.45; color:var(--wpf-navy);
  letter-spacing:0; text-transform:none;
}

.wpf-faq-a{ padding:2px 24px 6px; background:var(--wpf-bg-soft); }

.wpf-content .wpf-faq-a p{
  font-size:16px !important;
  line-height:1.7 !important;
  margin:0 0 1em !important;
}

.wpf-content ul.wpf-faq-list{
  list-style:none; margin:0 0 1em; padding:0; display:grid; gap:8px;
}

.wpf-content ul.wpf-faq-list > li{
  list-style:none; margin:0; padding:0 0 0 28px; position:relative;
  font-size:16px; line-height:1.55; color:var(--wpf-text);
}


/* --------------------------------------------------------------------------
   16. Beitragsraster (Uebersichtsseiten)
   -------------------------------------------------------------------------- */
.wpf-content ul.wpf-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}

.wpf-content ul.wpf-grid > li.wpf-post{
  list-style:none;
  margin:0;
  padding:24px 24px 22px;
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--wpf-line);
  border-radius:var(--wpf-radius);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wpf-content ul.wpf-grid > li.wpf-post:hover{
  border-color:var(--wpf-accent);
  box-shadow:0 10px 26px rgba(0,48,93,.10);
  transform:translateY(-3px);
}

.wpf-post--new{
  border-color:var(--wpf-accent-line);
  background:linear-gradient(180deg,var(--wpf-accent-soft) 0%,#fff 120px);
}

.wpf-chip{
  align-self:flex-start;
  display:inline-block;
  margin-bottom:12px;
  padding:4px 11px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--wpf-accent);
  background:var(--wpf-accent-soft);
  border-radius:100px;
  line-height:1.5;
}

.wpf-chip--new{ color:#fff; background:var(--wpf-accent); }

.wpf-content .wpf-post-title{
  font-family:inherit;
  font-size:19px;
  line-height:1.4;
  font-weight:700;
  color:var(--wpf-navy);
  margin:0 0 .6em;
  text-transform:none;
  letter-spacing:0;
}

.wpf-content .wpf-post-title a{
  color:var(--wpf-navy);
  text-decoration:none;
}

/* Ganze Kachel klickbar */
.wpf-content .wpf-post-title a::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--wpf-radius);
}

.wpf-content ul.wpf-grid > li.wpf-post:hover .wpf-post-title a{ color:var(--wpf-accent); }

.wpf-content .wpf-post-text{
  font-size:15.5px !important;
  line-height:1.65 !important;
  color:var(--wpf-text) !important;
  margin:0 0 1.2em !important;
  flex:1 1 auto;
}

.wpf-more{
  align-self:flex-start;
  font-size:14px;
  font-weight:700;
  color:var(--wpf-accent);
  letter-spacing:.01em;
}

.wpf-more::after{
  content:"›";
  display:inline-block;
  margin-left:7px;
  font-size:17px;
  line-height:1;
  transition:transform .2s ease;
}

.wpf-content ul.wpf-grid > li.wpf-post:hover .wpf-more::after{ transform:translateX(4px); }


/* --------------------------------------------------------------------------
   17. CTA-Block und Buttons
   -------------------------------------------------------------------------- */
.wpf-cta{
  margin:2.5em 0 1em;
  padding:34px 34px 30px;
  background:var(--wpf-navy);
  border-radius:var(--wpf-radius);
  color:#fff;
  text-align:center;
}

.wpf-cta-logo{
  display:block;
  width:74px;
  height:74px;
  margin:0 auto 14px;
}

.wpf-content .wpf-cta-title{
  font-family:inherit;
  font-size:24px;
  line-height:1.35;
  font-weight:700;
  color:#fff;
  margin:0 0 .6em;
  text-transform:none;
  letter-spacing:0;
}

.wpf-content .wpf-cta-text{
  font-size:16px !important;
  line-height:1.7 !important;
  color:rgba(255,255,255,.85) !important;
  max-width:600px;
  margin:0 auto 1.6em !important;
}

.wpf-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

.wpf-content a.wpf-btn{
  display:inline-block;
  padding:14px 30px;
  background:var(--wpf-accent);
  color:#fff !important;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none !important;
  border:2px solid var(--wpf-accent);
  border-radius:4px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.wpf-content a.wpf-btn:hover,
.wpf-content a.wpf-btn:focus{
  background:#fff;
  border-color:#fff;
  color:var(--wpf-navy) !important;
}

.wpf-content a.wpf-btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.5);
  color:#fff !important;
}

.wpf-content a.wpf-btn--ghost:hover,
.wpf-content a.wpf-btn--ghost:focus{
  background:#fff;
  border-color:#fff;
  color:var(--wpf-navy) !important;
}


/* --------------------------------------------------------------------------
   18. Fokus (Tastaturbedienung)
   -------------------------------------------------------------------------- */
.wpf-content a:focus-visible,
.wpf-content summary:focus-visible,
.wpf-content a.wpf-btn:focus-visible,
.wpf-content .wpf-post-title a:focus-visible::after{
  outline:3px solid var(--wpf-accent);
  outline-offset:3px;
}


/* --------------------------------------------------------------------------
   19. Mobil
   -------------------------------------------------------------------------- */
@media (max-width:782px){
  .wpf-content{ font-size:16px; }
  .wpf-content p{ font-size:16px; }

  .wpf-lead{ font-size:18px !important; padding-left:18px; }

  .wpf-content .wpf-h2{ font-size:25px; margin-top:2em; padding-top:1.2em; }
  .wpf-content .wpf-h3{ font-size:19px; }

  .wpf-content blockquote.wpf-quote{ padding:20px 22px; font-size:17px; }

  .wpf-cta{ padding:28px 22px 26px; }
  .wpf-content .wpf-cta-title{ font-size:21px; }
  .wpf-cta-actions{ flex-direction:column; }
  .wpf-content a.wpf-btn{ width:100%; text-align:center; }

  .wpf-intro{ grid-template-columns:1fr; gap:22px; }
  .wpf-content .wpf-intro-last{ margin-bottom:0 !important; }
  .wpf-intro-media img{ min-height:0; height:auto; aspect-ratio:4 / 3; }
  .wpf-figure img{ aspect-ratio:3 / 2; }

  .wpf-callout{ padding:22px 22px 20px; }
  .wpf-content .wpf-callout-text{ font-size:16px !important; }

  .wpf-content ul.wpf-grid{ grid-template-columns:1fr; gap:16px; }
  .wpf-content .wpf-post-title{ font-size:18px; }

  .wpf-content summary.wpf-faq-q{ padding:16px 48px 16px 18px; }
  .wpf-content .wpf-faq-qh{ font-size:16.5px; }
  .wpf-faq-a{ padding-left:18px; padding-right:18px; }

  .wpf-content ol.wpf-steps > li.wpf-step{ padding:20px 20px 18px; }
  .wpf-content ol.wpf-steps > li.wpf-step::before{ position:static; margin-bottom:12px; }
}

@media (max-width:380px){
  .wpf-hero__title{ font-size:27px; }
}


/* --------------------------------------------------------------------------
   20. Druck und reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media print{
  .wpf-faq-a{ display:block !important; }
  .wpf-cta{ background:none; color:#000; border:1px solid #999; }
  .wpf-content .wpf-cta-title,
  .wpf-content .wpf-cta-text{ color:#000 !important; }
  .wpf-content ul.wpf-grid{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  .wpf-content *{ transition:none !important; }
  .wpf-hero__eyebrow{ transition:none; }
}


/* --------------------------------------------------------------------------
   21. Kontaktformular (Contact Form 7)
   -------------------------------------------------------------------------- */
.wpf-form{ max-width:820px; margin:0 auto; font-family:var(--wpf-font); }

.wpf-form .wpcf7-form p{ margin:0 0 16px; }

.wpf-form input[type=text],
.wpf-form input[type=email],
.wpf-form input[type=tel],
.wpf-form input[type=url],
.wpf-form select,
.wpf-form textarea{
  width:100%;
  padding:13px 15px;
  font-family:inherit;
  font-size:16px;
  line-height:1.5;
  color:var(--wpf-text);
  background:#fff;
  border:1px solid var(--wpf-line);
  border-radius:var(--wpf-radius);
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.wpf-form input::placeholder,
.wpf-form textarea::placeholder{ color:var(--wpf-muted); opacity:1; }

.wpf-form input:focus,
.wpf-form select:focus,
.wpf-form textarea:focus{
  border-color:var(--wpf-accent);
  box-shadow:0 0 0 3px var(--wpf-accent-soft);
  outline:none;
}

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

.wpf-form input[type=submit],
.wpf-form button[type=submit]{
  display:inline-block;
  width:auto;
  padding:14px 34px;
  background:var(--wpf-accent);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  border:2px solid var(--wpf-accent);
  border-radius:4px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.wpf-form input[type=submit]:hover,
.wpf-form button[type=submit]:hover{
  background:var(--wpf-navy);
  border-color:var(--wpf-navy);
  color:#fff;
}

.wpf-form .wpcf7-not-valid-tip{ color:#B3261E; font-size:14px; margin-top:5px; }

.wpf-form .wpcf7-response-output{
  margin:18px 0 0 !important;
  padding:14px 16px !important;
  border-radius:var(--wpf-radius);
  border-width:1px !important;
  font-size:15px;
}

.wpf-form .wpcf7-spinner{ margin:0 0 0 12px; }


/* Gespiegelte Intro-Variante: Bild links, Text rechts */
.wpf-intro--flip{ grid-template-columns:340px 1fr; }

@media (max-width:782px){
  .wpf-intro--flip{ grid-template-columns:1fr; }
  .wpf-intro--flip .wpf-intro-media{ order:2; }
}


/* Intro-Variante mit groesserem Bild (z. B. Grafiken statt Fotos) */
.wpf-intro--media-lg{
  grid-template-columns:1fr minmax(320px,46%);
  align-items:center;
  gap:44px;
  width:min(1100px, calc(100vw - 48px));
  margin-left:50%;
  transform:translateX(-50%);
}

@media (max-width:782px){
  .wpf-intro--media-lg{ grid-template-columns:1fr; gap:22px; }
}


/* --------------------------------------------------------------------------
   22. Fotos im Intro-Raster und kompakte Bildergalerie
   -------------------------------------------------------------------------- */

/* Foto-Variante: behaelt ein ruhiges 4:3-Format statt einer festen Mindesthoehe,
   dadurch werden Querformate nicht mehr zu Hochformaten beschnitten. */
.wpf-intro--photo{ align-items:start; }

.wpf-intro--photo .wpf-intro-media img{
  min-height:0;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
}

.wpf-gallery{
  list-style:none;
  margin:0 0 1.9em;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:10px;
}

.wpf-gallery > li{ list-style:none; margin:0; }

.wpf-gallery img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:var(--wpf-radius);
}

@media (max-width:782px){
  .wpf-gallery{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
}




/* --------------------------------------------------------------------------
   23. Lightbox des Themes (prettyPhoto): Pfeile sichtbar machen
   Das Theme zeigt links und rechts nur weisse Flaechen ohne Pfeilsymbol.
   -------------------------------------------------------------------------- */
.pp_next,
.pp_previous{
  background-color:transparent !important;
  position:relative;
}

.pp_next::after,
.pp_previous::after{ content:none !important; }

.pp_next::before,
.pp_previous::before{
  content:"" !important;
  position:absolute;
  top:50%;
  left:50%;
  width:46px;
  height:46px;
  margin:-23px 0 0 -23px;
  border-radius:50%;
  background-color:rgba(0,26,48,.55);
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
  opacity:.75;
  transition:opacity .2s ease, background-color .2s ease;
}

.pp_next::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }

.pp_previous::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }

.pp_next:hover::before,
.pp_previous:hover::before{
  opacity:1;
  background-color:rgba(0,26,48,.85);
}

/* Datenschutzhinweis unter dem Kontaktformular */
.wpf-form .wpf-form-note{
  font-size:14px;
  line-height:1.6;
  color:var(--wpf-muted);
  margin:4px 0 18px;
}

.wpf-form .wpf-form-note a{
  color:var(--wpf-accent);
  text-decoration:underline;
  text-underline-offset:2px;
}


/* ============================================================
   24. Rechtstexte: Datenschutzerklaerung und Impressum
   ============================================================ */

/* Flacherer Hero fuer reine Rechtstexte */
.wpf-hero--compact{ min-height:clamp(230px, 28vw, 340px); }

/* --- Lesespalte fuer lange Rechtstexte -------------------- */
/* Die Klasse sitzt an der WPBakery-Spalte (el_class="wpf-legal"). */
.wpf-legal{
  max-width:860px;
  margin:0 auto;
  margin-left:auto;
  margin-right:auto;
  float:none;
  padding:52px 20px 76px;
  font-family:var(--wpf-font);
  color:var(--wpf-text);
  -webkit-font-smoothing:antialiased;
}

/* Die Theme-Regeln fuer WPBakery-Spalten setzen float:left und margin:0.
   Deshalb hier mit hoeherer Spezifitaet zentrieren. */
.vc_row .wpb_column.vc_column_container.wpf-legal{
  float:none;
  margin-left:auto;
  margin-right:auto;
}

.wpf-legal .wpb_text_column,
.wpf-legal .wpb_content_element{ margin-bottom:0; }

.wpf-legal p{
  font-size:16px;
  line-height:1.78;
  margin:0 0 16px;
  color:var(--wpf-text);
}

.wpf-legal h2{
  font-family:var(--wpf-font);
  font-size:26px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--wpf-navy);
  margin:60px 0 20px;
  padding-top:28px;
  border-top:2px solid var(--wpf-accent-line);
  scroll-margin-top:120px;
  text-transform:none;
}

.wpf-legal h2:first-child{ margin-top:0; padding-top:0; border-top:0; }

.wpf-legal h3{
  font-family:var(--wpf-font);
  font-size:19px;
  line-height:1.4;
  font-weight:700;
  color:var(--wpf-accent);
  margin:36px 0 10px;
  scroll-margin-top:120px;
  text-transform:none;
}

.wpf-legal h4{
  font-family:var(--wpf-font);
  font-size:16px;
  line-height:1.45;
  font-weight:700;
  color:var(--wpf-navy);
  margin:26px 0 8px;
  text-transform:none;
}

.wpf-legal ul{ margin:0 0 18px; padding-left:22px; }
.wpf-legal ul li{ font-size:16px; line-height:1.7; margin:0 0 7px; color:var(--wpf-text); }
.wpf-legal ul li::marker{ color:var(--wpf-accent-light); }

.wpf-legal a{
  color:var(--wpf-accent);
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-word;
}
.wpf-legal a:hover{ color:var(--wpf-navy); }
.wpf-legal strong{ color:var(--wpf-navy); font-weight:700; }

/* --- Inhaltsverzeichnis ----------------------------------- */
.wpf-toc{
  background:var(--wpf-accent-soft);
  border:1px solid var(--wpf-accent-line);
  border-radius:var(--wpf-radius);
  padding:24px 28px 20px;
  margin:0 0 48px;
}

.wpf-toc__title{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--wpf-accent);
  margin:0 0 14px;
}

.wpf-toc__list{
  margin:0;
  padding-left:20px;
  columns:2;
  column-gap:40px;
}

.wpf-toc__list li{
  margin:0 0 9px;
  font-size:15px;
  line-height:1.5;
  break-inside:avoid;
  color:var(--wpf-muted);
}

.wpf-toc__list a{
  color:var(--wpf-navy);
  text-decoration:none;
  font-weight:600;
}
.wpf-toc__list a:hover{ color:var(--wpf-accent); text-decoration:underline; }

/* --- Datenkarten (Impressum) ------------------------------ */
.wpf-datacards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  margin:0 0 40px;
  padding:0;
  list-style:none;
}

.wpf-datacard{
  background:#fff;
  border:1px solid var(--wpf-line);
  border-left:3px solid var(--wpf-accent);
  border-radius:var(--wpf-radius);
  padding:24px 26px;
}

.wpf-datacard__label{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--wpf-accent);
  margin:0 0 12px;
}

.wpf-datacard p{
  font-size:16px;
  line-height:1.65;
  margin:0 0 4px;
  color:var(--wpf-text);
}

.wpf-datacard p.wpf-datacard__name{
  font-weight:700;
  color:var(--wpf-navy);
  margin-bottom:6px;
}

.wpf-datacard dl{ margin:0; }
.wpf-datacard dt{
  font-size:13px;
  color:var(--wpf-muted);
  margin:10px 0 1px;
}
.wpf-datacard dt:first-child{ margin-top:0; }
.wpf-datacard dd{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:var(--wpf-text);
}
.wpf-datacard dd a{
  color:var(--wpf-accent);
  text-decoration:none;
  font-weight:600;
  word-break:break-word;
}
.wpf-datacard dd a:hover{ text-decoration:underline; }

.wpf-datacard--wide{ grid-column:1 / -1; }

.wpf-datacard__contact{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:auto auto;
  grid-auto-columns:minmax(0,1fr);
  gap:2px 32px;
}

.wpf-datacard__contact dt{ margin:0; }

/* --- Mobil ------------------------------------------------ */
@media (max-width:900px){
  .wpf-datacards{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  .wpf-datacard__contact{ grid-auto-flow:row; grid-template-rows:none; }
  .wpf-datacard__contact dt{ margin-top:10px; }
  .wpf-datacard__contact dt:first-child{ margin-top:0; }
}

@media (max-width:700px){
  .wpf-legal{ padding:34px 18px 56px; }
  .wpf-legal h2{ font-size:22px; margin-top:44px; padding-top:24px; }
  .wpf-legal h3{ font-size:18px; }
  .wpf-toc{ padding:20px 22px 16px; margin-bottom:36px; }
  .wpf-toc__list{ columns:1; }
}