/*
 Theme Name:   Twenty Twenty-Five Child
 Template:     twentytwentyfive
*/

/* ============================================================
   ROOT / VARIABLES
   ============================================================ */
:root{
  --piasecki-red: #cf2e2e;
}

/* ============================================================
   TYPO / BASICS
   ============================================================ */
strong{ font-weight: 700 !important; }

/* ============================================================
   BLOCKQUOTE DESIGN
   ============================================================ */
:root :where(.wp-block-quote-is-layout-flow) > :last-child{
  margin-block-end: 0;
  border-left: 3px solid #d65050;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  font-style: italic;
  line-height: 23px;
  margin-bottom: 30px;
  padding: 30px 35px;
  position: relative;
}

/* ============================================================
   PRINT: Farben & Hintergründe erzwingen (Edge / Chrome)
   ============================================================ */
@media print {

  /* Farben nicht neutralisieren */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hintergrund- & Textfarben behalten */
  body,
  header,
  footer,
  section,
  article,
  div {
    background-color: inherit !important;
    color: inherit !important;
  }

}


/* Standard-Border der Blockquotes abschalten */
.wp-block-quote{
  border-left: 0 !important;
  padding-left: 0 !important;
}


body {
  font-size: 18px;
  line-height: 1.65;
}

p, li {
  font-size: 18px;
}

p.has-drop-cap {
  font-size: 18px !important;
  line-height: 1.65;
}

p.has-drop-cap::first-letter {
  font-size: 3.2em;
  line-height: 0.9;
  margin-right: 0.08em;
}

.wp-block-quote {
  font-style: italic;
  font-size: 18px!important;
  line-height: 1.7;
}


.wp-block-quote p {
  font-size: 18px!important;
}


/* ============================================================
   DROP CAP
   ============================================================ */
p.has-drop-cap:not(:focus){
  font-size: 1rem;
  line-height: 1.8;
}
.has-drop-cap:not(:focus)::first-letter{
  font-family: "Open Sans", sans-serif;
  font-size: 6.5rem;
  font-weight: 400;
  line-height: 0.80;
  margin-right: 0.10em;
  margin-top: -0.04em;
  color: #444;
  display: inline-block;
}

/* ============================================================
   IMMOBILIEN – GRID / KARTEN
   ============================================================ */

/* Grid für die Immobilien-Karten */
.immo-grid .wp-block-post-template{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

/* Jeder Beitrag füllt seine Karte komplett + Anker für Ribbon */
.immo-grid .wp-block-post{
  height: 100%;
  position: relative;
}

/* Kartenbox */
.immo-grid .wp-block-group{
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
  padding: 0 1rem 1.4rem !important;
  border-radius: 0 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.immo-grid .wp-block-group:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(0,0,0,0.16);
}

/* Featured Image – bündig am Rahmen */
.immo-grid .wp-block-post-featured-image{
  margin: 0 -1rem 0.5rem !important;
  position: relative;
  overflow: hidden; /* Ribbon sauber abschneiden */
}

.immo-grid .wp-block-post-featured-image img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  height: auto;
}

/* Titel in der Karte */
.immo-grid .wp-block-post-title{
  margin-top: 0 !important;
  margin-bottom: 0.15rem;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 600;
  color: #2d3350;
}

/* Textbereich */
.immo-grid .wp-block-post-content{
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.immo-grid .wp-block-post-content p:last-child{ margin-bottom: 0.4rem; }

/* Keine Extra-Luft über den Stats */
.immo-grid .immo-stats{ margin-top: 0.3rem !important; }
.immo-grid .immo-stats + p{ margin-top: 0.4rem; }

/* ============================================================
   IMMOBILIEN – STATS (KOMPAKT)
   ============================================================ */
.immo-stats.compact{
  display: flex;
  justify-content: flex-start !important;
  gap: 1.1rem;
  margin: .25rem 0 .6rem;
  align-items: start;
}
.immo-stats.compact .immo-stat{
  width: auto !important;
  min-width: unset !important;
  text-align: left !important;
  align-items: flex-start !important;
}
.immo-stats.compact .immo-stat-value{
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  text-align: left;
}
.immo-stats.compact .immo-stat-label{
  display: block;
  font-size: .72rem;
  color: #777;
  margin-top: .18rem;
  line-height: 1.1;
  white-space: nowrap;
  text-align: left;
}
@media (max-width: 520px){
  .immo-stats.compact{
    flex-wrap: wrap;
    gap: .7rem;
  }
}

/* ============================================================
   IMMOBILIEN – PREIS / EXPOSE / FUSSNOTE
   ============================================================ */
.immo-grid .immo-price{
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #fbe9e7;
  color: #c0392b;
  margin-top: 18px;
  margin-bottom: 10px;
  text-align: right;
  display: block;
}

/* Sternchen (finale Version) */
.immo-price .immo-footnote-star{
  font-size: 0.65em;
  font-weight: normal;
  vertical-align: super;
  margin-left: 3px;
  color: #777;
}

/* Exposé & Scout – farblich wie Preis */
.immo-scout,
.immo-scout a,
.immo-expose,
.immo-expose a{
  color: #d2453b;
}
.immo-scout a,
.immo-expose a{
  text-decoration: none;
  font-weight: 600;
}
.immo-scout a:hover,
.immo-expose a:hover{
  text-decoration: underline;
}
.immo-scout,
.immo-expose{
  margin-top: 18px;
  font-size: 0.92em;
}

/* Mehr Abstand zwischen Exposé-Link und Fußnote (final) */
.immo-expose{ margin-bottom: 18px; }

/* Courtage-Fußnote (final) */
.immo-commission-note{
  font-size: 0.78rem;
  color: #777;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0;
}

/* ImmoScout-Link (falls irgendwo noch genutzt) */
.wp-block-post a[href*="immobilienscout"]{
  color: var(--piasecki-red) !important;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 1.3em 100%;
  background-size: 0 1px;
}
.wp-block-post a[href*="immobilienscout"]::before{
  content: "🔗";
  font-size: 1.05em;
  text-decoration: none !important;
}
.wp-block-post a[href*="immobilienscout"]:hover{
  color: #b62626 !important;
  background-size: calc(100% - 1.3em) 1px;
}

/* Scout-ID soll optisch zum Exposé gehören (direkt darunter) */
.immo-scout.immo-scoutid{
  margin-top: 6px;      /* näher ans Exposé */
  margin-bottom: 14px;  /* Abstand zur Courtage-Fußnote */
  font-size: 0.86em;
  color: #777;
}

.immo-scout.immo-scoutid .immo-scout-label{
  font-weight: 600;
  color: #666;
}

.immo-scout.immo-scoutid .immo-scout-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #444;
}





/* ============================================================
   IMMOBILIEN – STATUS RIBBON + HINWEIS
   ============================================================ */

/* Ribbon Grundstil */
.immo-grid .wp-block-post-featured-image::after{
  content: "";
  position: absolute;
  top: 14px;
  left: -58px;
  width: 230px;
  padding: 10px 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #fff;
  transform: rotate(-28deg);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  z-index: 5;
  display: none;
}

/* VERKAUFT / RESERVIERT */
.immo-grid .immo-status-verkauft .wp-block-post-featured-image::after{
  content: "VERKAUFT";
  display: block;
  background: rgba(186, 52, 52, 0.92);
}
.immo-grid .immo-status-reserviert .wp-block-post-featured-image::after{
  content: "RESERVIERT";
  display: block;
  background: rgba(198, 116, 64, 0.92);
}

/* Verkauft-Bild: leicht blasser */
.immo-grid .immo-status-verkauft .wp-block-post-featured-image img{
  filter: grayscale(28%) saturate(0.85) contrast(1.03) brightness(1.03);
}

/* Hinweistext unter Titel */
.immo-grid .immo-status-note{
  margin: 0.35rem 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1.4;
  font-style: normal;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.immo-grid .immo-status-note::before{
  content: "✓";
  margin-right: 0.4em;
  font-weight: 700;
}
.immo-grid .immo-status-note.is-sold,
.immo-grid .immo-status-note.is-reserved{
  color: var(--piasecki-red);
  font-weight: 600;
}

/* Sicherheitsgurt: Ribbon-Geometrie bleibt Ribbon */
.immo-grid .wp-block-post-featured-image::after{
  top: 14px !important;
  left: -58px !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  width: 230px !important;
  padding: 10px 0 !important;
  transform: rotate(-28deg) !important;
}

/* ============================================================
   STARTSEITE – POST TITEL AUSBLENDEN (AUßER IMMO GRID)
   ============================================================ */
.home .wp-block-post-title,
.front-page .wp-block-post-title{ display: none; }
.home .immo-grid .wp-block-post-title{ display: block !important; }

/* ============================================================
   HERO (Cover-Block) – hero-cover
   ============================================================ */
.hero-cover.wp-block-cover{
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: clamp(420px, 65vh, 640px);
  display: flex;
  align-items: flex-end;
}

@media (max-width: 1024px){
  .hero-cover.wp-block-cover{ min-height: clamp(380px, 60vh, 560px); }
}
@media (max-width: 600px){
  .hero-cover.wp-block-cover{ min-height: clamp(360px, 58vh, 520px); }
}

.hero-cover.wp-block-cover .wp-block-cover__image-background,
.hero-cover.wp-block-cover .wp-block-cover__background{
  object-fit: cover !important;
  object-position: center top !important;
}

@media (max-width: 1024px){
  .hero-cover.wp-block-cover .wp-block-cover__inner-container{
    padding-bottom: 32px !important;
    max-width: 900px;
  }
}
@media (max-width: 600px){
  .hero-cover.wp-block-cover .wp-block-cover__inner-container{
    padding-bottom: 22px !important;
    max-width: 92%;
  }
}

.hero-cover.wp-block-cover .wp-block-cover__inner-container > *{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
@media (max-width: 600px){
  .hero-cover.wp-block-cover .wp-block-cover__inner-container > *{ margin-bottom: 10px !important; }
}

.hero-cover h1{
  color: #1f2a55;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(30px, 4.6vw, 56px);
  margin-bottom: 8px !important;
}

.hero-cover p{
  color: #2b2b2b;
  font-size: clamp(16px, 2.4vw, 20px);
  margin-bottom: 16px !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.12);
}

.hero-cover .wp-block-buttons{
  justify-content: center;
  gap: 16px;
  margin: 0 !important;
  margin-bottom: 12px !important;
}
@media (max-width: 600px){
  .hero-cover .wp-block-buttons{ gap: 12px; }
}

.hero-cover .wp-block-button__link{
  border-radius: 10px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.hero-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background: #d73a33;
  color: #fff;
  border: 0;
}

.hero-cover .wp-block-button.is-style-outline .wp-block-button__link{
  background: #fff;
  color: #333;
  border: 2px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.hero-cover .hero-meta{
  color: #1f2a55;
  font-weight: 600;
  opacity: .9;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
}

/* Hero-Content Block nach oben ziehen */
.hero-content{
  position: relative;
  z-index: 5;
  margin-top: -130px !important;
  padding-bottom: 10px;
}
@media (max-width: 1024px){
  .hero-content{ margin-top: -80px !important; }
}
@media (max-width: 600px){
  .hero-content{ margin-top: -60px !important; }
}

/* Startseite: Weißverlauf oben im Cover (wie gehabt) */
.home .wp-block-cover::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.85) 30%,
    rgba(255,255,255,0.4) 55%,
    rgba(255,255,255,0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Startseite: Hero-Bild unten weich ins Weiße auslaufen lassen */
.home .wp-block-cover.hero-cover{
  position: relative;     /* wichtig, damit ::after sauber sitzt */
  overflow: hidden;       /* verhindert harte Kante durch Overflow */
}

.home .wp-block-cover.hero-cover::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;          /* ggf. 180–280px nach Geschmack */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 45%,
    rgba(255,255,255,0.85) 75%,
    rgba(255,255,255,1) 100%
  );
  z-index: 2;
  pointer-events: none;
}



/* MOBILE ONLY: Startseiten-Hero stimmig wie Unterseiten */
@media (max-width: 600px){
  body.home .wp-block-cover.hero-cover .wp-block-cover__image-background{
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
  }

  body.home .wp-block-cover.hero-cover{
    aspect-ratio: 16 / 10;
    min-height: 240px;
    position: relative;
    overflow: hidden;
  }

  body.home .wp-block-cover.hero-cover .wp-block-cover__background{
    opacity: 0 !important;
  }

  body.home .wp-block-cover.hero-cover::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,0) 72%,
      rgba(255,255,255,1) 100%
    );
  }

  body.home .wp-block-cover.hero-cover .wp-block-cover__inner-container{
    position: relative;
    z-index: 3;
  }
}

/* ============================================================
   UNTERSEITEN – TITEL + CONTENT IN HERO ZIEHEN
   ============================================================ */
body:not(.home) .wp-block-post-title,
body:not(.home) .wp-block-post-content{
  position: relative;
  z-index: 10;
}
body:not(.home) .wp-block-post-title{
  margin-top: -70px;
  padding-top: 40px;
}
body:not(.home) .wp-block-post-content{
  margin-top: 0;
  padding-top: 10px;
}

/* =========================
   UNTERSEITEN: TITELBILD (Beitragsbild) – oben + unten weich auslaufen
   Greift auf das alignfull Featured Image im Template,
   aber NICHT auf Immobilienkarten / Query-Loop
   ========================= */

body.page .wp-block-post-featured-image.alignfull{
  position: relative;
  overflow: hidden;
  height: 38vh;
  max-height: 420px;
}

/* Bild füllt den Banner */
body.page .wp-block-post-featured-image.alignfull img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  display: block;
}

/* Verlauf OBEN – dezenter, startet erst bei den Dächern */
body.page .wp-block-post-featured-image.alignfull::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 140px;   /* ↓ vorher 240px → jetzt deutlich später */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.85) 40%,
    rgba(255,255,255,0.35) 70%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
  z-index: 3;
}


/* Verlauf UNTEN – weich in den Content auslaufend */
body.page .wp-block-post-featured-image.alignfull::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 220px;   /* ↑ bewusst größer für sanften Übergang */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 45%,
    rgba(255,255,255,0.85) 75%,
    rgba(255,255,255,1) 100%
  );
  pointer-events:none;
  z-index: 3;
}


/* ============================================================
   MOBILE FIX: Titelbild-Verlauf weniger milchig (Mitte bleibt klar)
   ============================================================ */
@media (max-width: 782px){

  /* Ziel-Element: das Titelbild (Featured Image) am Anfang des Inhalts */
  body.page .wp-block-post-content > .wp-block-post-featured-image:first-child{
    position: relative; /* sicherheitshalber */
  }

  /* OBEN: kürzer + schneller transparent -> Mitte bleibt farbig */
  body.page .wp-block-post-content > .wp-block-post-featured-image:first-child::before{
    height: 120px !important;   /* kleiner als Desktop */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.75) 22%,
      rgba(255,255,255,0.35) 45%,
      rgba(255,255,255,0) 70%
    ) !important;
    z-index: 3 !important;
  }

  /* UNTEN: ebenfalls weicher Verlauf (keine harte Kante) */
  body.page .wp-block-post-content > .wp-block-post-featured-image:first-child::after{
    height: 160px !important;
    background: linear-gradient(
      to top,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.78) 24%,
      rgba(255,255,255,0.35) 50%,
      rgba(255,255,255,0) 78%
    ) !important;
    z-index: 2 !important;
  }
}


/* ============================================================
   MOBILE: Seitentitel höher + größer
   ============================================================ */
@media (max-width: 782px){

  /* Titel etwas höher in den Verlauf ziehen */
  body:not(.home) .wp-block-post-title{
    margin-top: -55px !important;  /* vorher -70 -> mobil etwas sanfter */
    padding-top: 28px !important;
  }

  /* Titel größer (ohne zu brüllen) */
  body.page .wp-block-post-title{
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }
}




/* ============================================================
   MPI IMMOBILIEN – SLIDER
   ============================================================ */
.mpi-immo-slider{ position: relative; overflow: hidden; }
.mpi-immo-slider-viewport{ overflow: hidden; }
.mpi-immo-slider-track{
  display: flex;
  width: 200%;
  transform: translateX(0%);
  transition: transform 240ms ease;
  will-change: transform;
}
.mpi-immo-slide{ width: 50%; flex-shrink: 0; }

.mpi-immo-slide-img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  object-position: center 30%;
}

/* Pfeile */
.mpi-immo-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
}
.mpi-immo-prev{ left: 10px; }
.mpi-immo-next{ right: 10px; }
@media (max-width: 600px){
  .mpi-immo-arrow{
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
}

/* ============================================================
   QUERY LOOP – GRID BREAKPOINTS (iPad / Smartphone)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px){
  .wp-block-query .wp-block-post-template.is-layout-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px){
  .wp-block-query .wp-block-post-template.is-layout-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   REFERENZEN – FINAL (breite korrekt, unabhängig vom Editor)
   ============================================================ */

/* 1) Äußerer Wrapper: auf "Textbreite" (entry content) zentrieren */
.referenzen-grid,
.referenzen-grid.alignfull,
.referenzen-grid.alignwide{
  width: 100% !important;
  max-width: var(--wp--style--global--wide-size) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  /* kein Extra-Padding am Wrapper */
  padding-left: 0 !important;
  padding-right: 0 !important;

  position: relative;
}

/* 2) WICHTIG: TwentyTwenty/Block-Themes geben bei has-global-padding
      dem inneren Content seitliches Padding – das nehmen wir hier raus */
.referenzen-grid.has-global-padding > *{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Der innere Columns-Block muss wirklich 100% bekommen (und nicht "schrumpfen") */
.referenzen-grid .wp-block-columns{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  gap: 2rem;
}

/* 4) Falls WordPress bei alignfull/alignwide noch left/right setzt */
.referenzen-grid.alignfull,
.referenzen-grid.alignwide{
  left: auto !important;
  right: auto !important;
}

/* ------------------------------------------------------------
   KACHELN – Optik (dein clean/kantig Look)
   ------------------------------------------------------------ */

.referenzen-grid .wp-block-column{
  background: #f3f3f3 !important;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.referenzen-grid .wp-block-column:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.20);
}

/* Bild */
.referenzen-grid figure{
  margin: 0 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: transparent !important;
}
.referenzen-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.referenzen-grid .wp-block-column:hover img{
  transform: scale(1.03);
}

/* Textbereich */
.referenzen-grid .wp-block-column > :not(figure){
  background: transparent !important;
  margin: 0 !important;
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
}
.referenzen-grid .wp-block-column > .wp-block-heading{
  padding-top: 1.1rem !important;
}
.referenzen-grid .wp-block-column > :last-child{
  padding-bottom: 1.2rem !important;
}

/* Typo */
.referenzen-grid .wp-block-heading{
  margin: 0 0 .15rem 0 !important;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 1.15rem;
}
.referenzen-grid .wp-block-heading + *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.referenzen-grid p{
  margin: 0 0 0.55rem 0;
  line-height: 1.55;
  font-size: 0.98rem;
  color: rgba(0,0,0,0.72);
}
.referenzen-grid p:last-of-type{
  margin-top: 0.25rem;
  color: rgba(0,0,0,0.55);
  font-size: 0.95rem;
}

/* Leere Absätze & Spacer killen */
.referenzen-grid p:empty{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.referenzen-grid .wp-block-spacer{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Preis-Badge */
.referenzen-grid figcaption{
  position: absolute;
  right: 0.45rem !important;
  bottom: 0.45rem !important;
  z-index: 10;
  margin: 0 !important;
  padding: 0.38rem 0.65rem !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.01em !important;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(120, 26, 26, 0.62) !important;
}

/* Falls Preis als Absatz direkt nach figure kommt */
.referenzen-grid figure + p{
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 10;
  margin: 0 !important;
  padding: 0.38rem 0.65rem !important;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
  background: rgba(120, 26, 26, 0.62);
}




/* ============================================================
   MOBILE NAV – FINAL (aufgeräumt)
   ============================================================ */

@media (max-width: 782px){

  /* Logo Größe */
  .wp-block-site-logo img,
  .custom-logo,
  .site-logo img{
    max-width: 190px;
    height: auto;
  }

  /* Header als Bezugsebene */
  .site-header,
  header.wp-block-template-part{
    position: relative;
  }

  /* SVG-Icon im Button ausblenden, eigenes Burger-Icon */
  button.wp-block-navigation__responsive-container-open svg{
    display: none;
  }
  button.wp-block-navigation__responsive-container-open::before{
    content: "";
    width: 28px;
    height: 20px;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 100% 3px no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 100% 3px no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 100% 3px no-repeat;
    color: #c62828;
    display: block;
  }

  /* Hamburger oben rechts fix */
  button.wp-block-navigation__responsive-container-open,
  button.wp-block-navigation-responsive-container-open{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    inset: auto 14px auto auto !important;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 10px;
    background: rgba(255,255,255,0.85);
    z-index: 9999 !important;
  }

  /* Platz im Header, damit nichts kollidiert */
  .site-header{
    padding-right: 60px;
  }

  /* Home Hero Bildposition (wie gehabt) */
  .home .wp-block-cover .wp-block-cover__image-background{
    object-fit: cover !important;
    object-position: 50% 20% !important;
  }
}

/* Mobile Menü – hell als Card */
.wp-block-navigation__responsive-container.is-menu-open{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding: 22px 18px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display: block;
  padding: 16px 14px;
  color: #a0121a;
  font-size: 22px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 12px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus{
  background: rgba(160, 18, 26, 0.06);
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open .current_page_item > a{
  background: rgba(160, 18, 26, 0.08);
  position: relative;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a::before,
.wp-block-navigation__responsive-container.is-menu-open .current_page_item > a::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: #a0121a;
}

/* ============================================================
   MISC
   ============================================================ */
.abstand-fuss{
  margin-bottom: -20px !important;
  margin-top: 0 !important;
}

/* ============================================================
   PATCH – NUR UNTERSEITEN TITELBILD (Featured Image) MOBILE/TABLET
   Ziel: wie Startseiten-Hero Mobile -> oben/unten weich weiß,
         Mitte klar/farbig. Greift NICHT in Referenzen/Immo-Grid ein.
   ============================================================ */

/* Das Ziel-Element ist extrem eindeutig: */
@media (max-width: 782px){

  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child{
    /* Höhe so, dass überhaupt eine „Mitte“ existiert (sonst Milchglas) */
    height: clamp(240px, 34vh, 340px) !important;
    max-height: none !important;
    position: relative;
    overflow: hidden;
  }

  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child img{
    width: 100%;
    height: 100%;
    object-fit: cover !important;        /* wichtig: nicht "contain" */
    object-position: center 26% !important;
    display: block;
  }

  /* AUF MOBILE: nur EIN Overlay (wie Startseiten-Mobile), damit es nicht doppelt milchig wird */
  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;                 /* statt fester px-Höhen */
    pointer-events: none;
    z-index: 3 !important;

    /* wie dein Startseiten-Mobile-Verlauf (oben & unten weiß, Mitte transparent) */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,0) 72%,
      rgba(255,255,255,1) 100%
    ) !important;
  }

  /* Das Desktop-::after macht auf kleinen Höhen oft den Milchglas-Effekt -> hier aus */
  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child::after{
    content: none !important;
    background: none !important;
    height: 0 !important;
  }
}


/* ------------------------------------------------------------
   iPad PORTRAIT: 2 Dinge:
   - etwas höhere Bannerhöhe
   - Verlauf etwas „sanfter“, damit Mitte kräftig bleibt
   ------------------------------------------------------------ */
@media (min-width: 783px) and (max-width: 1180px) and (orientation: portrait){

  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child{
    height: clamp(280px, 30vh, 420px) !important;
    max-height: none !important;
  }

  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child::before{
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,0) 74%,
      rgba(255,255,255,0.98) 100%
    ) !important;
  }

  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child::after{
    content: none !important;
  }
}


/* ------------------------------------------------------------
   iPad LANDSCAPE: da war bei dir der „Wasserzeichen“-Look am stärksten.
   -> Verlauf noch transparenter + Banner nicht zu flach.
   ------------------------------------------------------------ */
@media (min-width: 783px) and (max-width: 1180px) and (orientation: landscape){

  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child{
    height: clamp(260px, 34vh, 380px) !important;
    max-height: none !important;
  }

  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child::before{
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0) 24%,
      rgba(255,255,255,0) 76%,
      rgba(255,255,255,0.94) 100%
    ) !important;
  }

  body.page .wp-block-post-content > .wp-block-post-featured-image.alignfull:first-child::after{
    content: none !important;
  }
}


/* ============================================================
   TOUCH (iPhone/iPad): Titelbild ohne Milchglas
   -> Verläufe als Maskierung statt weißem Overlay
   -> sehr eng selektiert: nur Seiten (body.page) + alignfull Featured Image
   ============================================================ */
@media (hover: none) and (pointer: coarse){

  /* Sicherheit: nur das Seiten-Titelbild (nicht Startseiten-Hero, nicht Karten) */
  body.page .wp-block-post-featured-image.alignfull{
    /* deine Desktop-Höhen bleiben unangetastet; hier nur "Touch-Feintuning" */
    height: clamp(260px, 34vh, 420px);
    max-height: 420px;
  }

  /* Milchglas kommt von den Overlay-Verläufen -> auf Touch AUS */
  body.page .wp-block-post-featured-image.alignfull::before,
  body.page .wp-block-post-featured-image.alignfull::after{
    content: none !important;
    display: none !important;
  }

  /* Verlauf als Maske direkt auf dem Bild: Mitte bleibt voll sichtbar */
  body.page .wp-block-post-featured-image.alignfull img{
    opacity: 1 !important;
    filter: none !important;

    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 18%,
      rgba(0,0,0,1) 82%,
      rgba(0,0,0,0) 100%
    );
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;

    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 18%,
      rgba(0,0,0,1) 82%,
      rgba(0,0,0,0) 100%
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}



/* Automatische Seiten-/Beitragsüberschrift ausblenden */
.wp-block-post-title {
  display: none;
}


/* NUR das große Titelbild oben im Seiten-Template, nicht Query-Loop-Karten */
body.page .wp-block-post-content > figure.wp-block-post-featured-image.alignfull:first-child{
  margin-bottom: -60px !important;
}


/* =========================
   DESKTOP – NUR echtes Seiten-Titelbild
   ========================= */
@media (min-width: 783px){
  body.page
  .wp-block-post-content
  > .wp-block-post-featured-image.alignfull:first-child{
    height: clamp(220px, 55vh, 600px) !important;
    max-height: none !important;
  }
}

/* =========================
   ULTRAWIDE – NUR echtes Seiten-Titelbild
   ========================= */
@media (min-width: 1800px){
  body.page
  .wp-block-post-content
  > .wp-block-post-featured-image.alignfull:first-child{
    height: clamp(520px, 60vh, 900px) !important;
  }
}



/* =========================================
   FOOTER: Vertikale Trennlinien wie im Design
   - volle Höhe (bis zur höchsten Spalte)
   - aber oben/unten mit Abstand (stoßen NICHT an die obere Linie)
   - KEINE Layout-Offsets / kein Container-Gefummel
   ========================================= */

/* Stelle hier den Abstand ein, den du oben/unten haben willst */
footer{
  --footer-col-sep-color: #d6cfc6;
  --footer-col-sep-width: 1px;
  --footer-col-sep-inset-top: 0px;     /* Abstand zur oberen horizontalen Linie */
  --footer-col-sep-inset-bottom: 0px;  /* Abstand nach unten */
}

/* Nur falls WP/Theme die Columns nicht sauber streckt: */
footer .wp-block-columns{
  align-items: stretch;
}

/* Spalten strecken, damit sich die Separator-Höhe an der höchsten Spalte orientiert */
footer .wp-block-columns > .wp-block-column{
  align-self: stretch;
}

/* Trennlinie als Pseudo-Element im Spalten-Gap, aber mit Top/Bottom-Inset */
footer .wp-block-columns > .wp-block-column:not(:first-child){
  position: relative;
}

footer .wp-block-columns > .wp-block-column:not(:first-child)::before{
  content: "";
  position: absolute;

  /* NICHT an die obere horizontale Linie stoßen */
  top: var(--footer-col-sep-inset-top);
  bottom: var(--footer-col-sep-inset-bottom);

  /* Linie mittig im Gap platzieren (WP Block Gap) */
  left: calc(var(--wp--style--block-gap, 2rem) / -2);

  width: var(--footer-col-sep-width);
  background: var(--footer-col-sep-color);
  opacity: 1;
}

/* Mobile: vertikale Linien aus, stattdessen dezente horizontale Trenner */
@media (max-width: 781px){
  footer .wp-block-columns > .wp-block-column:not(:first-child)::before{
    content: none;
  }
  footer .wp-block-columns > .wp-block-column:not(:first-child){
    border-top: 1px solid var(--footer-col-sep-color);
    padding-top: 1.2rem;
    margin-top: 1.2rem;
  }
}

/* Mehr Luft zwischen Text und vertikaler Trennlinie */
footer .wp-block-columns > .wp-block-column{
  padding-left: 0.75rem;
  padding-right: 1rem;
}

/* Footer: Bullet bleibt, Text näher ran */
footer .wp-block-columns ul.wp-block-list{
  margin: 0;
  padding-left: 1.2em;        /* 🔧 HIER sitzt der Abstand */
  list-style-position: outside;
	margin-top:20px!important;
}

footer .wp-block-columns ul.wp-block-list li{
  padding-left: 0;
  margin-left: 0;
}

footer .wp-block-columns ul.wp-block-list li::marker{
  color: #c00000;
}

/* Häkchen exakt steuern */
.pi-check{
  color: #8a6b3f;          /* dein Braunton */
  font-size: 18px;         /* Größe */
  line-height: 1;          /* verhindert „größer wirken“ */
  display: inline-block;
  width: 22px;             /* reserviert Platz -> Text bleibt sauber fluchtend */
  text-align: center;
  vertical-align: -1px;    /* minimal optisch justieren */
}

/* optional: Text leicht „zusammenziehen“ */
.pi-checktext{
  display: inline-block;
}

/* ============================================================
   MOBILE: H2 nur im Block "Immobilienangebote" kleiner
   ============================================================ */
@media (max-width: 782px){
  .immo-angebote h2.wp-block-post-title,
  .immo-angebote .wp-block-post-title{
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.4rem !important;
  }
}

/* Desktop */
@media (min-width: 783px){
  .immo-grid h2.wp-block-post-title{
    font-size: 1.25rem;      /* vorher 1.05rem */
    line-height: 1.32;
    font-weight: 600;
    margin-bottom: 0.35rem;
  }
}

.service-card {
  background: #ffffff;
  border: 1px solid #f1f3f6;
  border-radius: 0px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   Mehr Abstand zwischen den Service-Blöcken
   ============================================================ */
.service-card {
  margin-bottom: 3.5rem;
}

@media (max-width: 768px) {
  .service-card {
    margin-bottom: 2rem;
  }
}

/* ============================================================
   HOME – TOUCH (iPhone/iPad): Hero ohne Milchglas
   Prinzip wie Unterseiten: KEINE weißen Overlays,
   sondern Maskierung direkt auf dem Bild.
   ============================================================ */



/* Die „Unterseiten-Magie“ jetzt auch für Home:
   Overlays AUS + Mask direkt aufs Bild */
@media (hover: none) and (pointer: coarse){

  /* 1) Alle Overlays entfernen, die Milch erzeugen können */
  body.home .wp-block-cover.hero-cover::before,
  body.home .wp-block-cover.hero-cover::after{
    content: none !important;
    background: none !important;
  }

  /* WP Cover Overlay (wichtig!) ebenfalls raus */
  body.home .wp-block-cover.hero-cover .wp-block-cover__background{
    opacity: 0 !important;
    background: transparent !important;
  }

  /* 2) Bild ganz normal, ohne Schleier */
  body.home .wp-block-cover.hero-cover .wp-block-cover__image-background{
    object-fit: cover !important;
    object-position: 50% 28% !important;
    opacity: 1 !important;
    filter: none !important;

    /* 3) Maskierung wie Unterseiten: Mitte voll sichtbar */
-webkit-mask-image: linear-gradient(
  to bottom,
  rgba(0,0,0,0)    0%,
  rgba(0,0,0,0.06) 3%,
  rgba(0,0,0,0.18) 7%,
  rgba(0,0,0,0.40) 12%,
  rgba(0,0,0,0.70) 18%,
  rgba(0,0,0,1)    26%,
  rgba(0,0,0,1)    86%,
  rgba(0,0,0,0)   100%
);

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;


mask-image: linear-gradient(
  to bottom,
  rgba(0,0,0,0)    0%,
  rgba(0,0,0,0.06) 3%,
  rgba(0,0,0,0.18) 7%,
  rgba(0,0,0,0.40) 12%,
  rgba(0,0,0,0.70) 18%,
  rgba(0,0,0,1)    26%,
  rgba(0,0,0,1)    86%,
  rgba(0,0,0,0)   100%
);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}

/* ============================================================
   HOME – MOBILE: Hero-Textblock (hero-content) je Ausrichtung
   ============================================================ */

@media (max-width: 600px){
  body.home .wp-block-group.hero-content{
    margin-top: -70px !important;   /* Basis */
  }
}

/* PORTRAIT: näher ans Bild (weniger Abstand) */
@media (max-width: 600px) and (orientation: portrait){
  body.home .wp-block-group.hero-content{
    margin-top: -95px !important;
  }
}

/* LANDSCAPE: weiter weg vom Bild (mehr Luft) */
@media (max-width: 600px) and (orientation: landscape){
  body.home .wp-block-group.hero-content{
    margin-top: -55px !important;
  }
}