/*
Theme Name: Astra Child
Theme URI: http://localhost/jpp/jpp-immobilien/index.php
Description: bitte aktiviert lassen, hier befinden sich gewisse Änderung an der Seite, die sonst weg sind!
Author: Felix
Template: astra
Version: 1.0
*/

.header-button a img {
    display: block !important;
    width: 160px !important;
    max-width: 18vw !important;
    height: auto !important;
    transition: transform 0.28s ease, filter 0.28s ease;
}

.header-button a:hover img {
    transform: scale(1.1) !important;
    filter: brightness(1.05) !important;
}

/* Testphase-Banner (liegt im Header, kein Overlay) */
.testphase-banner{
  width: 100%;
  background: #222;
  color: #fff;
  text-align: center;
  font-size: .95rem;
  padding: .6rem 1rem;
  font-weight: 500;
}


/* Klickfläche sauber halten (dein bewährter Fix) */
#masthead .header-button{ pointer-events: none; }
#masthead .header-button > a{ pointer-events: auto; display:inline-block; }

/* Vollbild Overlay – standardmäßig unsichtbar */
.mobile-overlay{
  display: none;
}

/* Standardmäßig unsichtbar */
/* .mobile-overlay{ display: none; } */
/* AUSBLENDEN DER SEITE AUF MOBILEN GERÄTEN */
/* Nur auf Mobile sichtbar */
/* @media (max-width: 950px){ */
  /* html, body{ */
    /* overflow: hidden !important;   /* verhindert Scrollen */ */
    /* height: 100%;  */
  /* } */


/* .mobile-overlay{ display: none; } */


/* @media (max-width: 950px){ */
  /* html, body{ */
    /* overflow: hidden !important;   /* verhindert Scrollen */ */
    /* height: 100%;  */
  /* } */

  /* .mobile-overlay{ */
    /* display: flex; */
    /* position: fixed; */
    /* inset: 0; */
    /* background: #E2D4A5;           /* JPP-Farbe */ */
    /* color: white;                   /* schwarze Schrift */ */
    /* z-index: 999999; */
    /* align-items: center;           /* vertikal mittig */ */
    /* justify-content: center;       /* horizontal mittig */ */
    /* text-align: center; */
    /* padding: 2rem; */
    /* font-family: inherit;          /* Standardschrift */ */
  /* } */

  /* .mobile-overlay-content{ */
    /* font-size: 1.2rem; */
    /* font-weight: 600; */
    /* line-height: 1.4; */
  /* } */
/* } */
/* — Mobile Overlay: optional/opt-in — */

.mobile-overlay {   display: none; }
/* Nur wenn die Seite/der Body die Klasse .has-mobile-overlay bekommt,   wird das Overlay gezeigt und das Scrollen gesperrt. */
.has-mobile-overlay html,.has-mobile-overlay body {  overflow: hidden;  height: 100%;}.has-mobile-overlay .mobile-overlay {  display: flex;  position: fixed;  inset: 0;  background: #E2D4A5;   /* JPP-Farbe */  color: #000;           /* gut lesbarer Text */  z-index: 999999;  align-items: center;  justify-content: center;  text-align: center;  padding: 2rem;  font-family: inherit;}

/* — MOBILE MENÜ SICHTBAR/KLICKBAR — */

/* Astra: Burger sicher einblenden & positionieren */
.ast-header-break-point .ast-mobile-menu-trigger { 
  display: flex !important; 
  align-items: right; 
  gap: .5rem;
}

/* Icon/Label sicher schwarz (passt zum JPP-Style) */
.ast-header-break-point .menu-toggle,
.ast-header-break-point .ast-mobile-svg,
.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle {
  color: #000 !important;
  fill: #000 !important;
}

/* Über allen Slidern/Layern liegen */
.ast-header-break-point .ast-mobile-header-wrap,
.ast-header-break-point .ast-button-wrap,
.ast-header-break-point .menu-toggle {
  position: relative;
  z-index: 11000;
}

/* ========== FIX 1: Header-Abstand dynamisch, überall gleich ========== */
body { padding-top: var(--masthead-h) !important; }
@supports (padding: max(0px)) {
  body { padding-top: calc(var(--masthead-h) + env(safe-area-inset-top)) !important; }
}

/* ========== FIX 3: Slider-Höhe = Viewport minus Header-Variable ========== */
.lauser .n2-ss-slider,
.lauser .n2-ss-slider-1{
  height: calc(100vh - var(--masthead-h) - env(safe-area-inset-top)) !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* ========== FIX 4: Header-Button – Breite mit einer Regel, keine Medias mehr ========== */
#masthead .header-button { pointer-events: none !important; }
#masthead .header-button > a { pointer-events: auto !important; display: inline-block !important; }
.header-button a img{ width: clamp(120px, 12vw, 200px) !important; height: auto; }

/* (Optional) Dots/Arrows komfortabler – falls nicht vorhanden */
.swiper-button-next, .swiper-button-prev,
.slick-next, .slick-prev,
.owl-next, .owl-prev{ width: 44px; height: 44px; }
.swiper-pagination-bullet{ width: 10px; height: 10px; }


/* === NOTLÖSUNG: Mobile-Menü immer sichtbar (bis Burger wieder funktioniert) === */
@media (max-width: 1024px){
  /* Drawer nicht als Overlay, sondern normal im Flow anzeigen */
  .ast-mobile-popup-drawer{
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: block !important;
  }
  .ast-mobile-popup-drawer .ast-mobile-popup-inner{
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  /* Inhalt ordentlich */
  .ast-mobile-popup-content{
    display: block !important;
  }
  /* Burger wenigstens sichtbar/benutzbar lassen */
  .ast-header-break-point .ast-mobile-menu-trigger{
    display: flex !important;
    align-items: center;
    gap: .5rem;
    z-index: 12000 !important;
  }
}


/* Offcanvas Drawer: Standard Astra – hier nichts blockieren */
.ast-mobile-popup-drawer { will-change: transform; }

/* Falls irgendwas das Klicken blockiert */
.ast-header-break-point #masthead,
.ast-header-break-point .ast-mobile-header-wrap {
  pointer-events: auto !important;
}

/* — HEADER-BUTTON VERHALTEN — */

/* Desktop: wie gehabt */
@media (min-width: 1025px){
  #masthead .header-button { display: block; }
}

/* Mobile: ursprünglichen Button im Header ausblenden */
@media (max-width: 1024px){
  #masthead .header-button:not(.is-mobile) { display: none !important; }
}

/* Wenn der Button in das Offcanvas-Menü kopiert wurde */
.ast-mobile-popup-drawer .header-button.is-mobile {
  position: static !important;
  transform: none !important;
  margin: 1rem 0 !important;
  text-align: center;
}

/* Bildgröße im Menü: groß genug als Tap-Target */
.ast-mobile-popup-drawer .header-button.is-mobile a img{
  width: clamp(120px, 40vw, 180px) !important;
  height: auto;
}

/* Abstand/Trenner zum restlichen Menü */
.ast-mobile-popup-drawer .header-button.is-mobile::after{
  content: "";
  display: block;
  height: 1px;
  margin: 1rem auto 0;
  width: 60%;
  background: rgba(0,0,0,.12);
}

/* Sichtbarkeit/Position des Mobile-Drawers erzwingen */
.ast-mobile-popup-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 11050 !important;         /* über Slider/Header */
  pointer-events: none;               /* nur Inneres interaktiv */
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  position: fixed !important;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 90%;
  background: #fff;                   /* nicht transparent */
  transform: translateX(100%);        /* Ausgangszustand (zu) */
  opacity: 0;
  visibility: hidden;
  transition: transform .25s ease, opacity .25s ease, visibility .25s;
  pointer-events: auto;               /* jetzt klickbar */
  overflow-y: auto;
}

/* Wenn aktiv → wirklich anzeigen (Astra setzt .active) */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
  transform: translateX(0%) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Body soll beim offenen Menü nicht hinten scrollen */
.ast-mobile-popup-active { overflow: hidden !important; }

/* Nichts soll das Menü überdecken */
.ast-mobile-header-wrap, .menu-toggle, #masthead { z-index: 11000 !important; }



  /* Hover-Zoom auf Touch aus (wird sonst „zittrig“) */
  @media (hover: none){
    .projekte img { transform: none !important; }
  }
}

/* Leicht kleinere Basis auf sehr kleinen Screens */
@media (max-width: 390px){
  html { font-size: 15px; } /* vorher ~16px */
}

/* Für typische iPhone-Breiten */
@media (min-width: 391px) and (max-width: 430px){
  html { font-size: 16px; }
}

/* === SAFETY NET: keine horizontale Scrollerei / Überbreite killen === */
html, body { overflow-x: clip; max-width: 100%; }
.site, .ast-container, .ast-row, .ast-builder-grid-row { overflow-x: clip; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }


/* Mobile-Menü zuverlässig über allem (ohne Astra-Logik zu verbiegen) */
.ast-header-break-point .ast-mobile-menu-trigger,
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer .ast-mobile-popup-inner{
  z-index: 120000 !important; /* nur die Ebene hochsetzen */
}

/* — Mobile Header kompakt — */
@media (max-width: 768px){
  /* Gesamtreihe im Header enger */
  .ast-header-break-point .ast-builder-grid-row{
    min-height: 56px !important;
    padding-block: 6px !important;
  }
  /* Logo kleiner (ohne Unschärfe) */
  .ast-header-break-point .site-branding img,
  .ast-header-break-point .custom-logo{
    max-height: 50px !important;
    height: auto !important;
    width: auto !important;
  }
  /* Abstand links/rechts etwas knapper */
  .ast-header-break-point .site-branding,
  .ast-header-break-point .ast-mobile-menu-trigger{
    margin-block: 0 !important;
  }
 

/* --- EINSTELLBAR H2 --- */
:root{
  --h2-desktop: 2.2rem;  /* ~35px */
  --h2-tablet:  2.2rem;  /* ~29px */
  --h2-mobile:  2rem;  /* ~24px */
}

/* Basis (Desktop) */
html body h2,
html body h2.wp-block-heading,
html body h2.wp-block-heading.reveal-slide.from-bottom.is-visible,
html body h2.has-small-font-size,
html body h2.has-medium-font-size,
html body h2.has-large-font-size,
html body h2.has-x-large-font-size,
html body h2.has-xx-large-font-size {
  font-size: var(--h2-desktop) !important;
  line-height: 1.25 !important;
}

/* Smartphones (<= 767px) */
@media (max-width: 767px){
  html body h2,
  html body h2.wp-block-heading,
  html body h2.wp-block-heading.reveal-slide.from-bottom.is-visible,
  html body h2.has-small-font-size,
  html body h2.has-medium-font-size,
  html body h2.has-large-font-size,
  html body h2.has-x-large-font-size,
  html body h2.has-xx-large-font-size  {
    font-size: var(--h2-mobile) !important;
    line-height: 1.2 !important;
  }
}

/* iPad / Tablets – breiter Fangbereich inkl. iPad Pro quer bis 1366px */
@media (min-width: 768px) and (max-width: 1366px){
  html body h2,
  html body h2.wp-block-heading,
  html body h2.wp-block-heading.reveal-slide.from-bottom.is-visible,
  html body h2.has-small-font-size,
  html body h2.has-medium-font-size,
  html body h2.has-large-font-size,
  html body h2.has-x-large-font-size,
  html body h2.has-xx-large-font-size {
    font-size: var(--h2-tablet) !important;
    line-height: 1.25 !important;
  }
}

/* Zusätzliche „gerätgenaue“ Matches für iPad Pros (Portrait & Landscape) */
@media (device-width: 834px), (device-height: 834px),
       (device-width: 1024px), (device-height: 1024px),
       (device-width: 1194px), (device-height: 1194px),
       (device-width: 1366px), (device-height: 1366px){
  html body h2,
  html body h2.wp-block-heading,
  html body h2.wp-block-heading.reveal-slide.from-bottom.is-visible,
  html body h2.has-small-font-size,
  html body h2.has-medium-font-size,
  html body h2.has-large-font-size,
  html body h2.has-x-large-font-size,
  html body h2.has-xx-large-font-size {
    font-size: var(--h2-tablet) !important;
    line-height: 1.25 !important;
  }
}

/* == ASTRA: Logo-Größe nur auf Handy, egal ob normal/transparent/sticky == */
@media (max-width: 767.98px) {

  /* Normaler mobiler Header */
  body.ast-header-break-point #masthead .site-logo-img .custom-logo,
  body.ast-header-break-point #masthead .site-branding .custom-logo,
  body.ast-header-break-point #masthead .custom-logo-link img.custom-logo {
    max-height: 85px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Transparenter Header (z. B. Startseite mit Video/Hero) */
  body.ast-theme-transparent-header.ast-header-break-point #masthead .site-logo-img .custom-logo,
  body.ast-theme-transparent-header.ast-header-break-point #masthead .site-branding .custom-logo,
  body.ast-theme-transparent-header.ast-header-break-point #masthead .custom-logo-link img.custom-logo {
    max-height: 92px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Sticky Header aktiv (beim Scrollen anderes Logo/andere Größe) */
  body.ast-sticky-header-active.ast-header-break-point #masthead .site-logo-img .custom-logo,
  body.ast-sticky-header-active.ast-header-break-point #masthead .site-branding .custom-logo,
  body.ast-sticky-header-active.ast-header-break-point #masthead .custom-logo-link img.custom-logo {
    max-height: 92px !important;
    width: auto !important;
    height: auto !important;
  }
}

/* === HEADER: vertikale Abstände hart erzwingen (Astra, alle Zustände) === */

/* Handy (<= 767.98px) */
@media (max-width: 767.98px) {
  /* alle mobilen Header-Zustände: normal, transparent, sticky */
  body.ast-header-break-point.ast-sticky-header-active.ast-theme-transparent-header .main-header-bar,
  body.ast-header-break-point.ast-sticky-header-active .main-header-bar,
  body.ast-header-break-point.ast-theme-transparent-header .main-header-bar,
  body.ast-header-break-point .main-header-bar,
  .ast-mobile-header-wrap .main-header-bar,
  .main-header-bar {
    padding-top: 8px !important;
    padding-bottom: 12px !important; /* unten bewusst etwas mehr */
    min-height: 0 !important;        /* verhindert, dass Theme-Höhen „gewinnen“ */
    height: auto !important;
  }

  /* verhindert optischen „Baseline“-Versatz */
  #masthead .custom-logo, #masthead .custom-logo-link img { display: block !important; }
  .menu-toggle, .ast-mobile-menu-trigger { line-height: 1 !important; padding: 0 !important; height: auto !important; }
}

/* iPad / Tablet (768px–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* gleicher Trick: ALLE Varianten mit hoher Spezifität */
  body.ast-theme-transparent-header.ast-sticky-header-active .main-header-bar,
  body.ast-theme-transparent-header .main-header-bar,
  body.ast-sticky-header-active .main-header-bar,
  body.ast-header-break-point .main-header-bar,
  .main-header-bar {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Desktop (>= 1025px) */
@media (min-width: 1025px) {
 header#masthead .main-header-bar,
header#masthead .main-header-bar[style],
header#masthead .ast-primary-header-bar,
header#masthead .ast-primary-header-bar[style]{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 16px !important;  /* ggf. 52/50 testen */
  height: auto !important;
}
}

/* Spalten am Handy tauschen, bei Kategorie reverse-mobile*/
@media (max-width: 834px){
  .wp-block-columns.reverse-mobile{
    display: flex !important;
    flex-direction: column-reverse !important;
    row-gap: var(--wp--style--block-gap, 1rem);
  }
}

/* ANKAUF Icons – 4 perfekte Kreise nebeneinander, keine Ränder */
@media (max-width: 834px){
  .ankauf-icons.wp-block-columns{
    display: flex !important;
    flex-wrap: nowrap !important;        /* keine zweite Zeile */
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* einzelne Spalten neutralisieren */
  .ankauf-icons > .wp-block-column{
    flex: 1 1 33,33% !important;            /* drei gleiche Spalten */
    max-width: 33,33% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Bilder selbst – runde, unverzerrte Kreise */
  .ankauf-icons img,
  .ankauf-icons svg{
    display: block !important;
    width: 100px !important;              /* Größe kannst du anpassen */
    height: 100px !important;
    border-radius: 50% !important;
    object-fit: cover !important;        /* kein Stauchen oder Quetschen */
    margin: 0 auto !important;
  }
}

/* Desktop bleibt normal */
@media (min-width: 835px){
  .ankauf-icons.wp-block-columns{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .ankauf-icons > .wp-block-column{
    flex: 1 1 33,33% !important;
    max-width: 33,33% !important;
  }
  .ankauf-icons img,
  .ankauf-icons svg{
    width: 100px !important;
    height: 100px !important;
  }
}

@media (max-width: 767.98px) {
 .projekte{
    --inset: 10px; /* Rahmen näher am Rand */
    --bw: 1px;     /* dünner */
  }
  .projekte figcaption {
    font-size: 1.1rem !important; /* Schrift etwas kleiner */
  }
  .projekte .project-cat{
    font-size: .75rem !important; /* Kategorie kleiner */
  }
}

/* --- MOBILE-FIX: Rahmen im Projekte-Slider --- */
@media (max-width: 767.98px){

  /* 1) Rahmen dünner + näher am Rand (kleineres inset) */
  .projekte-carousel .projekte{
    --inset: 12px !important;   /* vorher 20px → kleiner = näher am Rand */
    --bw: 1px !important;      /* dünnere Linie */
  }
  /* Fallback, falls mal ohne Carousel gerendert wird */
  .projekte{
    --inset: 12px !important;
    --bw: 1px !important;
  }
}