/* ============================================================
   KAWE-BAU · WORDPRESS-BLOCK-KOMPATIBILITÄT
   Viele ursprüngliche Seiteninhalte bestehen aus normalem Gutenberg-
   Block-Markup (wp-block-group, wp-block-columns, wp-block-buttons,
   Ausrichtungsklassen, Preset-Spacing/Farb-Variablen). Diese Datei bildet
   die wichtigsten davon nach, damit portierter Inhalt ohne Nacharbeit an
   jedem einzelnen Absatz vernünftig aussieht. Werte sind eine sinnvolle
   Annäherung an WordPress' Standard-Spacing-Skala (das Original-Theme
   "abc-studio" ist ein Premium-Theme, dessen theme.json nicht im Content-
   Export enthalten ist).
   ============================================================ */

:root {
  --wp--preset--spacing--0: 0px;
  --wp--preset--spacing--10: 8px;
  --wp--preset--spacing--20: 16px;
  --wp--preset--spacing--30: 24px;
  --wp--preset--spacing--40: 32px;
  --wp--preset--spacing--50: 48px;
  --wp--preset--spacing--60: 64px;
  --wp--preset--spacing--70: 80px;
  --wp--preset--spacing--80: 96px;

  --wp--preset--color--primary: #ba5512;
  --wp--preset--color--secondary: #d5a87b;
  --wp--preset--color--contrast: #1c140d;
  --wp--preset--color--base: #f3e0ce;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--border: rgba(28,20,13,.16);
}

.wp-block-group, .wp-block-columns { width: 100%; }
.wp-block-group.alignfull { max-width: none; }
.wp-block-group.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.wp-block-column { flex: 1 1 0; min-width: 240px; }

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 16px 0;
  padding: 0;
}
.wp-block-buttons.is-content-justification-center,
.wp-block-buttons[style*="justify-content:center"] { justify-content: center; }

.wp-block-button__link, .wp-element-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 6px;
  background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(186,85,18,.3); }
.has-contrast-background-color.wp-block-button__link,
.wp-block-button__link.has-contrast-background-color {
  background: #1c140d;
}
.has-primary-background-color.wp-block-button__link { background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b); }

.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }

.has-large-font-size { font-size: 1.35em; }
.has-medium-font-size { font-size: 1.15em; }
.has-small-font-size { font-size: .9em; }
.has-xl-font-size { font-size: 1.75em; }

.has-primary-color { color: #ba5512; }
.has-contrast-color { color: #1c140d; }
.has-base-color { color: #332519; }
.has-white-color { color: #fff; }
.has-base-background-color { background-color: #f3e0ce; }
.has-white-background-color { background-color: #fff; }
.has-contrast-background-color { background-color: #1c140d; color: #fff; }
.has-background-secondary-color { background-color: #d5a87b; }
.has-border-color { border-color: rgba(28,20,13,.16); }

.wp-block-image { margin: 0 0 20px; }
.wp-block-image img { border-radius: 10px; }
.wp-block-image.size-large img { width: 100%; }
.wp-block-image figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(28,20,13,.6);
  text-align: center;
}

.wp-block-social-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 16px 0;
  padding: 0;
  flex-wrap: wrap;
}
.wp-block-social-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(186,85,18,.1);
  color: #8e3f0b !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.wp-block-social-link a:hover { background: rgba(186,85,18,.2); }

.wp-block-separator {
  border: none;
  border-top: 1px solid rgba(28,20,13,.14);
  margin: 32px 0;
}

.wp-block-spacer { width: 100%; }

.wp-block-cover {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 24px;
}
.wp-block-cover__image-background {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.wp-block-cover__background { position: absolute; inset: 0; }
/* Abdunklungs-/Aufhellungsgrade der Cover — WordPress-Core-Verhalten:
   has-background-dim-N steuert die DECKKRAFT der Farbschicht über dem Foto.
   Ohne diese Regeln lag die Schicht mit voller Deckkraft über dem Bild und
   Cover erschienen als massive Farbflächen (das Foto war komplett verdeckt). */
.wp-block-cover__background.has-background-dim { opacity: .5; }
.wp-block-cover__background.has-background-dim-0 { opacity: 0; }
.wp-block-cover__background.has-background-dim-10 { opacity: .1; }
.wp-block-cover__background.has-background-dim-20 { opacity: .2; }
.wp-block-cover__background.has-background-dim-30 { opacity: .3; }
.wp-block-cover__background.has-background-dim-40 { opacity: .4; }
.wp-block-cover__background.has-background-dim-50 { opacity: .5; }
.wp-block-cover__background.has-background-dim-60 { opacity: .6; }
.wp-block-cover__background.has-background-dim-70 { opacity: .7; }
.wp-block-cover__background.has-background-dim-80 { opacity: .8; }
.wp-block-cover__background.has-background-dim-90 { opacity: .9; }
.wp-block-cover__background.has-background-dim-100 { opacity: 1; }
.wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; padding: 40px 24px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
/* Text in den (dunkel abgedimmten) Foto-Covern bleibt hell — die mark-Blöcke
   der Foto-Cover (Massivholzbau, 10-/5-Familienhäuser) nutzen has-base-color */
.wp-block-cover .has-base-color { color: #ede0d4; }
/* Helle Cover-Variante: Creme-AUFHELLUNG statt Abdunklung über dem Foto.
   Text darin ist Tinte, kein Weiß und kein Schatten. */
.kw-cover-hell .wp-block-cover__inner-container { color: #1c140d; text-shadow: none; }

/* Fallback-Fließtext für Seiten ohne eigene "kw"-Komponentenklasse */
.kw-page-content h1, .kw-page-content h2, .kw-page-content h3 { color: #1c140d; }
.kw-page-content p, .kw-page-content li { color: #332519; line-height: 1.7; }
.kw-page-content { max-width: 900px; margin: 0 auto; }
.kw-page-content.kw-page-wide { max-width: 1200px; }

/* ---------- Parallax-Cover (has-parallax) ----------
   WordPress-Core-Verhalten: das Hintergrundbild steht fest im Viewport
   (background-attachment: fixed), der Inhalt scrollt darüber hinweg.
   Ohne diese Regel scrollten die Bilder einfach mit und die reinen
   Bild-Zwischenblöcke (z. B. auf /naherholungsgebiet/) wirkten sinnlos. */
.wp-block-cover.has-parallax .wp-block-cover__image-background {
  background-attachment: fixed;
}
/* Die reinen Vollbild-Zwischenblöcke (Parallax + is-position-top-center,
   ohne eigenen Inhalt) brechen aus dem Inhaltscontainer aus und nehmen
   die volle Bildschirmbreite ein — zusammen mit min-height:100vh aus dem
   Markup füllen sie den gesamten Bildschirm. */
.wp-block-cover.has-parallax.is-position-top-center {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}
/* Mobile Browser (v. a. iOS) rendern background-attachment: fixed nicht
   zuverlässig — dort normales Scrollen des Bildes. */
@media (max-width: 900px), (pointer: coarse) {
  .wp-block-cover.has-parallax .wp-block-cover__image-background {
    background-attachment: scroll;
  }
}

/* ---------- Muster-Apartment/-Penthouse-Karten (Häuserseiten) ----------
   Die beiden Verweisspalten unter der Projekt-Galerie: Bilder füllen ihre
   Spalte (fluchten außen mit der Galerie darüber), abgerundete Ecken wie
   alle Bilder, Beschriftung als zentrierter CTA-Button. */
.kw-muster { gap: 24px; margin: 8px 0 4px; }
.kw-muster .wp-block-image { margin: 0; }
.kw-muster .wp-block-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  transition: transform .35s ease, box-shadow .35s ease;
}
.kw-muster .wp-block-image a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(78, 48, 24, .22);
}
.kw-muster p {
  text-align: center;
  margin: 16px 0 4px;
}
.kw-muster p a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 8px;
  background: linear-gradient(100deg, #d36c22, #ba5512 55%, #8e3f0b);
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease;
}
.kw-muster p a::after { content: "→"; transition: transform .3s ease; }
.kw-muster p a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(186, 85, 18, .32);
}
.kw-muster p a:hover::after { transform: translateX(3px); }

/* ---------- Galerien (wp-block-gallery) ----------
   Es gab bisher KEINE Regeln für den Galerie-Wrapper — dadurch bekam das
   äußere <figure> den Browser-Standardrand (1em oben/unten, 40px LINKS/
   RECHTS): genau der "Rand außen" auf den Apartment-/Muster-Seiten. Außerdem
   stapelten die Bilder ohne Spaltenraster untereinander. Jetzt: randlos,
   sauberes Raster nach columns-N, einheitlich beschnittene Kacheln mit
   runden Ecken. */
figure.wp-block-gallery {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
figure.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
figure.wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery figure.wp-block-image { margin: 0; }
.wp-block-gallery .wp-block-image a { display: block; }
.wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform .35s ease, box-shadow .35s ease;
}
.wp-block-gallery .wp-block-image a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(78, 48, 24, .22);
}
@media (max-width: 860px) {
  figure.wp-block-gallery.columns-3,
  figure.wp-block-gallery.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  figure.wp-block-gallery,
  figure.wp-block-gallery.columns-3,
  figure.wp-block-gallery.columns-4 { grid-template-columns: 1fr; }
}

/* ---------- Zwischenueberschrift vor Rundgang / Fotos ---------- */
/* Der Vorspann "VIRTUELLER RUNDGANG …" bzw. "FOTOS …" ist auf elf
   Apartment- und Haus-Seiten ein blosser Absatz aus der WordPress-Zeit,
   ueberall mit derselben id. Auf den meisten Seiten steht ein
   <hr class="wp-block-separator"> davor und sorgt fuer 32 px Luft; auf
   5-familienhaus-apartment-2.php fehlt er, dort klebte die Zeile ohne
   jeden Abstand am kwe-Block darueber. Der Abstand deshalb hier zentral
   an der Ueberschrift statt je Seite - benachbarte Aussenabstaende
   fallen zusammen, der Separator bleibt also folgenlos. */
[id="whg4_tour"]{
  margin-top: 56px;
  margin-bottom: 22px;
}