/* =========================================================
   KONTROLLZENTRUM: Schriftgrößen + Gaps + Columns für Geräte
   ========================================================= */
.page-template-page_template-portfolio-grid-title-inside {
  /* Fonts */
  --font-size-phone-portrait: 22px;
  --font-size-phone-landscape: 24px;
  --font-size-tablet: 33px;
  --font-size-desktop: 33px;
  --font-size-large-desktop: 33px;
  font-size: var(--font-size-desktop); /* Basis/Fallback */

  /* Gaps */
  --gap-phone-portrait: 11px;
  --gap-phone-landscape: 11px;
  --gap-tablet-portrait: 25px;
  --gap-tablet-landscape: 30px;
  --gap-desktop: 25px;

  /* Columns (Spalten pro Reihe) */
  --cols-phone-portrait: 2;
  --cols-phone-landscape: 3;
  --cols-tablet-portrait: 2;
  --cols-tablet-landscape: 4;
  --cols-desktop: 4; /* Desktop-Zielspalten */

  /* Optional: eigener Wert für sehr große Screens
     --cols-desktop-lg: 4; */
}

/* =========================================================
   BASIS-STILE (nur PortfolioGridTitleInside)
   ========================================================= */
.page-template-page_template-portfolio-grid-title-inside .portfolio.grid article {
  position: relative;
  overflow: hidden;
}

/* H1 über Bild, mittig */
.page-template-page_template-portfolio-grid-title-inside .portfolio.grid article h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  padding: 0 1rem;
  z-index: 2;
  pointer-events: none;
  font-size: 1em;
  letter-spacing: 0.1em; /* ← Buchstabenabstand hinzugefügt */
}

/* Abdunklung nur über dem Bildbereich */
.page-template-page_template-portfolio-grid-title-inside 
  .portfolio.grid article .p-image a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .20);
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   BREAKPOINTS – RESPONSIVE & ZENTRIERT
   ========================================================= */

/* Handy hochkant */
@media (max-width: 600px) and (orientation: portrait) {
  .page-template-page_template-portfolio-grid-title-inside {
    font-size: var(--font-size-phone-portrait) !important;
    margin-top: -25px;
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid {
    --gap: var(--gap-phone-portrait, 11px);
    --cols: var(--cols-phone-portrait, 2);
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);

    /* Außen-Kompensation → randnah */
    margin-inline: calc(-1 * var(--gap));
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article,
  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid .p-entry {
    padding: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;

    /* Breite = (100% - (cols-1)*gap) / cols */
    flex: 0 0 calc((100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
    max-width: calc((100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
  }
}

/* Handy quer */
@media (max-width: 812px) and (orientation: landscape) {
  .page-template-page_template-portfolio-grid-title-inside {
    font-size: var(--font-size-phone-landscape) !important;
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid {
    --gap: var(--gap-phone-landscape, 11px);
    --cols: var(--cols-phone-landscape, 3);
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    margin-inline: calc(-1 * var(--gap));
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article,
  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid .p-entry {
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 calc((100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
    max-width: calc((100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article .p-image,
  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article .p-image a {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article .p-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Tablet Portrait */
@media (min-width: 813px) and (max-width: 1025px) and (orientation: portrait) and (any-pointer: coarse) {
  .page-template-page_template-portfolio-grid-title-inside {
    font-size: var(--font-size-tablet) !important;
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid {
    --gap: var(--gap-tablet-portrait);
    --cols: var(--cols-tablet-portrait, 2);
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: var(--gap);
    margin-inline: 0;
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article,
  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid .p-entry {
    box-sizing: border-box;
    flex: 0 0 calc((100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
    max-width: calc((100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
  }
}

/* Tablet Landscape */
@media (min-width: 1025px) and (max-width: 1367px) and (orientation: landscape) and (any-pointer: coarse) {
  .page-template-page_template-portfolio-grid-title-inside {
    font-size: var(--font-size-tablet) !important;
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid {
    --gap: var(--gap-tablet-landscape);
    --cols: var(--cols-tablet-landscape, 3);
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: var(--gap);
    margin-inline: 0;
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article,
  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid .p-entry {
    box-sizing: border-box;
    flex: 0 0 calc((100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
    max-width: calc((100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
  }
}

/* Desktop normal */
@media (min-width: 1368px) and (max-width: 1439px) {
  .page-template-page_template-portfolio-grid-title-inside {
    font-size: var(--font-size-desktop) !important;
  }
}

/* Desktop groß */
@media (min-width: 1440px) {
  .page-template-page_template-portfolio-grid-title-inside {
    font-size: var(--font-size-large-desktop) !important;

    /* Optional: ab 1440px andere Spaltenzahl aktivieren
       --cols-desktop: var(--cols-desktop-lg, var(--cols-desktop)); */
  }
}

/* =========================================================
   GLOBAL 1:1 + Fallback
   ========================================================= */
.page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article {
  aspect-ratio: 1 / 1;
}

.page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article .p-image,
.page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article .p-image a,
.page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article .p-image img {
  width: 100% !important;
  height: 100% !important;
}

.page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article .p-image img {
  object-fit: cover !important;
}

@supports not (aspect-ratio: 1 / 1) {
  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article::before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article > * {
    position: absolute;
    inset: 0;
  }
}

/* =========================================================
   DESKTOP: immer zentriert, Columns & Gap variabel
   ========================================================= */
:root {
  --card-min: 280px; /* minimale Kachelbreite auf Desktop */
}

@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  body.page-template-page_template-portfolio-grid-title-inside .portfolio.grid,
  body.page-template-page_template-portfolio-grid-title-inside-php .portfolio.grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important; /* Restreihe mittig */
    gap: var(--gap-desktop);
  }

  /* Spaltenbreite aus --cols-desktop berechnen */
  body.page-template-page_template-portfolio-grid-title-inside .portfolio.grid .p-entry,
  body.page-template-page_template-portfolio-grid-title-inside-php .portfolio.grid .p-entry,
  body.page-template-page_template-portfolio-grid-title-inside .portfolio.grid > article,
  body.page-template-page_template-portfolio-grid-title-inside-php .portfolio.grid > article {
    box-sizing: border-box;
    margin: 0 !important;
    flex: 0 1 clamp(
      var(--card-min),
      calc((100% - ((var(--cols-desktop, 4) - 1) * var(--gap-desktop))) / var(--cols-desktop, 4)),
      100vw
    );
  }

  body.page-template-page_template-portfolio-grid-title-inside .portfolio.grid .p-entry .p-image img,
  body.page-template-page_template-portfolio-grid-title-inside-php .portfolio.grid .p-entry .p-image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Touch-/Tablet-Fälle bleiben unverändert (Theme-Layout) */
@media (any-pointer: coarse), (hover: none) {
  /* nichts erzwingen */
}



/* Site-Middle: align-items center deaktivieren */
.page-template-page_template-portfolio-grid-title-inside .site-middle {
  align-items: flex-start !important;
}





/* Puffer oben nach Endgerät */
@media (max-width: 600px) { /* Handy hochkant */
  .page-template-page_template-portfolio-grid-title-inside .entry-content::before {
    content: "";
    display: block;
    height: 40px; /* Handy */
  }
}

/*@media (min-width: 601px) and (max-width: 1024px) { /* Tablets */
/*  .page-template-page_template-portfolio-grid-title-inside .entry-content::before {
    content: "";
    display: block;
    height: 40px; /* Tablet */
/*  }
}

@media (min-width: 1025px) { /* Desktop */
/*  .page-template-page_template-portfolio-grid-title-inside .entry-content::before {
    content: "";
    display: block;
    height: 30px; /* Desktop */
/*  }
}


/* =========================================================
   LAYOUT-FULL: Bis zum Rand, Außenränder = Grid-Gap
   (außer Handy)
   ========================================================= */

/* Desktop & Tablets – Grundoverride */
@media (min-width: 601px) {
  /* hohe Spezifität gegen Theme-Regeln */
  body.page-template-page_template-portfolio-grid-title-inside .layout-full,
  .page-template-page_template-portfolio-grid-title-inside .layout-full,
  .page-template-page_template-portfolio-grid-title-inside.layout-full {
    max-width: none !important;   /* 1740px killen */
    width: 100% !important;       /* volle Breite des Containers */
    margin-inline: 0 !important;  /* zentrierung aufheben */
    box-sizing: border-box;       /* Padding zählt zur Gesamtbreite */
    /* Standard: Desktop-Gap außen als Padding */
    padding-inline: var(--gap-desktop) !important;
  }
}

/* Tablet Portrait: Außenränder = Tablet-Portrait-Gap */
@media (min-width: 813px) and (max-width: 1025px) and (orientation: portrait) and (any-pointer: coarse) {
  .page-template-page_template-portfolio-grid-title-inside .layout-full {
    padding-inline: var(--gap-tablet-portrait) !important;
  }
}

/* Tablet Landscape: Außenränder = Tablet-Landscape-Gap */
@media (min-width: 1025px) and (max-width: 1367px) and (orientation: landscape) and (any-pointer: coarse) {
  .page-template-page_template-portfolio-grid-title-inside .layout-full {
    padding-inline: var(--gap-tablet-landscape) !important;
  }
}