/*
 Theme Name: Vantage Child
 Theme URI: https://packhaus.theater
 Description: Child Theme für SiteOrigin Vantage
 Author: Julius Koppelin
 Template: vantage
 Version: 1.0.0
*/

/* --- Mitwirkende Layout --- */
.pht-person-page {
  max-width: 800px;
  margin: 40px auto 60px;
  padding: 20px;
  text-align: center;
}
.pht-person-photo-img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  margin-bottom: 25px;
}
.pht-person-name {
  font-size: 3em;
  margin: 0 0 20px;
  color: #2d2d2d;
}
.pht-person-bio {
  font-size: 1.1em;
  line-height: 1.6;
  color: #2d2d2d;
  margin-bottom: 40px;
}
.pht-person-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}
.pht-person-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  padding: 1em;
  text-decoration: none;
  border: 2px solid #ffcb01;
  color: #ffcb01;
  font-weight: 600;
  border-radius: 4px;
  transition: 0.2s;
}
.pht-person-btn:hover {
  background: #000;
  color: #fff;
}

/* Zurück-Button */
.pht-back-button {
  margin: 20px 0 10px 0;
  text-align: left;
}
.pht-back-button a {
  color: #2d2d2d;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 6px 12px;
  border-radius: 4px;
  background: #f4f4f4;
  transition: 0.2s;
}
.pht-back-button a:hover {
  background: #ddd;
}

/* Yoast Breadcrumb ausblenden */
#yoast-breadcrumbs { display: none !important; }

/* --- Zu sehen in … (Minimal: nur Titel) --- */
.pht-person-events { margin-top: 48px; }
.pht-person-events__heading {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-bottom: 16px;
  text-align: center;
}
.pht-person-events__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pht-person-events__list--titles .pht-person-events__item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

/* --- Terminübersicht --- */
.pht-terminliste {
  margin: 40px auto;
  max-width: 1100px;
  padding: 0 20px;
}
.pht-terminliste__heading {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin-bottom: 12px;
}
.pht-terminliste__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Desktop-sicheres Grid: Datum fix, Titel flexibel, Badge & Button begrenzt */
.pht-terminliste__item {
  display: grid;
  grid-template-columns: 240px 1fr auto auto; /* etwas mehr Platz für Datum */
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  min-width: 0; /* verhindert Überlauf des Titles */
}

/* Der Titel darf umbrechen, aber NIE über Badge/Button laufen */
.pht-terminliste__item a {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Badge + Buttons niemals ins Titel-Feld ragen lassen */
.pht-terminliste__badge,
.pht-terminliste__btn,
.pht-terminliste__btn--disabled {
  white-space: nowrap;
  justify-self: end;
  max-width: 160px;
}
/* Titel */
.pht-terminliste__title {
  color: #2d2d2d;
  text-decoration: none;
  font-weight: 600;
}
.pht-terminliste__title:hover {
  text-decoration: underline;
}

/* Badge */
.pht-terminliste__badge {
  background: #f4f4f4;
  color: #222;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .9rem;
  justify-self: end;
}

/* Buttons */
.pht-terminliste__btn,
.pht-terminliste__btn:hover,
.pht-terminliste__btn:visited,
.pht-terminliste__btn:focus,
.pht-terminliste__btn:active {
  background: #ffcb01;
  color: #fff !important;       /* NIE violett, NIE gelb auf gelb */
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
  min-width: 9.5rem;
  text-align: center;
  transition: .2s;
  justify-self: end; 
}

.pht-terminliste__btn:hover,
.pht-terminliste__btn:focus {
  background: #000;
  color: #fff !important;
  outline: none;
}

/* Disabled Button */
.pht-terminliste__btn--disabled {
  background: #ddd;
  color: #777 !important;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
  min-width: 9.5rem;
  text-align: center;
  justify-self: end;
}

/* --- Datum 3-Spalten stabil --- */
.pht-terminliste__datetime {
  display: inline-grid;
  grid-template-columns: 3em 6.4em 4.8em;  /* WD | Datum | Zeit */
  column-gap: .2em;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* leichte Tonung */
.pht-dt__wd,
.pht-dt__time {
  color: #555;
}

/* Mobile */
@media (max-width: 760px){
  .pht-terminliste__item {
    grid-template-columns: 1fr;
    row-gap: 6px;
    align-items: start;
  }
  .pht-terminliste__badge,
  .pht-terminliste__btn,
  .pht-terminliste__btn--disabled {
    justify-self: start;
    margin-left: 0;
  }

  .pht-terminliste__datetime {
    grid-template-columns: auto auto auto;
    column-gap: .5em;
  }
}
/* --- Filterleiste --- */
.pht-terminliste__filters {
  display: flex;
  gap: 16px;
  align-items: end;
  margin: 10px 0 16px;
  flex-wrap: wrap;
}
.pht-filter label {
  display: block;
  font-size: .9rem;
  color: #444;
  margin-bottom: 4px;
}
.pht-filter select,
.pht-filter input[type="search"] {
  min-width: 210px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* --- Monats-Container + Sticky Header --- */
.pht-month { margin-top: 24px; }
.pht-month__header {
  position: sticky;
  top: var(--pht-sticky-offset, 0px);
  z-index: 2;
  background: #fff;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  font-weight: 700;
  font-size: 3rem;
}

/* --- Listenzeilen (Desktop-Grid stabil) --- */
.pht-terminliste__item {
  display: grid;
  grid-template-columns: 240px 1fr auto auto; /* Datum | Titel | Badge | Button */
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  min-width: 0;
}
.pht-terminliste__item a { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.pht-terminliste__badge,
.pht-terminliste__btn,
.pht-terminliste__btn--disabled { white-space: nowrap; justify-self: end; max-width: 160px; }

/* --- Datum in drei Spalten kompakt & stabil --- */
.pht-terminliste__datetime {
  display: inline-grid;
  grid-template-columns: 3.4em 7.6em 3.8em; /* WD | Datum | Uhrzeit */
  gap: .6em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pht-dt__wd, .pht-dt__time { color: #555; }

/* --- Buttons: Schrift immer weiß (auch visited) --- */
.pht-terminliste .pht-terminliste__btn,
.pht-terminliste .pht-terminliste__btn:hover,
.pht-terminliste .pht-terminliste__btn:visited,
.pht-terminliste .pht-terminliste__btn:focus,
.pht-terminliste .pht-terminliste__btn:active {
  background: #ffcb01;
  color: #fff !important;
  text-decoration: none;
}
.pht-terminliste .pht-terminliste__btn:hover { background: #000; color: #fff !important; }

/* Disabled Button */
.pht-terminliste .pht-terminliste__btn--disabled {
  background: #ddd;
  color: #777 !important;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
  min-width: 9.5rem;
  text-align: center;
  justify-self: end;
}

/* --- Mobile --- */
@media (max-width: 760px){
  .pht-terminliste__filters { align-items: stretch; }
  .pht-terminliste__item {
    grid-template-columns: 1fr;
    row-gap: 6px;
    align-items: start;
  }
  .pht-terminliste__badge,
  .pht-terminliste__btn,
  .pht-terminliste__btn--disabled {
    justify-self: start; max-width: none;
  }
  .pht-terminliste__datetime {
    grid-template-columns: auto auto auto;
    gap: .5em;
  }
}

/* --- Kompakte Event-Termintabelle --- */
.pht-event-compact-termine {
  margin: 30px auto 40px;
  max-width: 900px;
}

.pht-event-compact-termine__heading {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.pht-event-compact-termine__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pht-event-compact-termine__item {
  display: grid;
  grid-template-columns: 180px 1fr 120px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 0.95rem;
}

.pht-datetime {
  display: inline-grid;
  grid-template-columns: 3.2em 7.2em 4.2em;
  gap: .5em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pht-wd,
.pht-time {
  color: #555;
}

.pht-badge {
  background: #f4f4f4;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .85rem;
  justify-self: start;
  color: #444;
}

.pht-btn {
  display: inline-block;
  padding: 6px 10px;
  background: #ffcb01;
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  min-width: 90px;
}

.pht-btn:hover {
  background: #000;
  color: #fff !important;
}

.pht-btn--disabled {
  background: #ddd;
  color: #777 !important;
  padding: 6px 10px;
  border-radius: 4px;
  text-align: center;
}

/* Mobile */
@media (max-width: 680px){
  .pht-event-compact-termine__item {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .pht-badge,
  .pht-btn {
    justify-self: start;
  }
}
/* --- Event Hero --- */
.pht-event-hero {
  position: relative;
  background: var(--pht-hero-bg) center/cover no-repeat;
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
}
.pht-event-hero__overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
}
.pht-event-hero__inner {
  position: relative; z-index: 1; padding: 3rem 1rem; max-width: 1100px;
}
.pht-event-hero__title { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 .5rem; }
.pht-event-hero__subtitle { font-size: clamp(1rem, 2vw, 1.4rem); opacity: .95; margin-bottom: 1.25rem; }
.pht-event-hero__cta {
  display: inline-block; padding: 12px 18px; background: #ffcb01; color: #000;
  border-radius: 4px; font-weight: 700; text-decoration: none; transition: .2s;
}
.pht-event-hero__cta:hover { background: #000; color: #fff; }

/* --- Event Details (Untertitel + Button) --- */
.pht-event-details__wrap { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
.pht-event-details__title { font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 0 0 .25rem; }
.pht-event-details__subtitle { color: #555; margin: .25rem 0 1rem; }
.pht-event-details__cta { display: inline-block; padding: .8em 1.2em; background: #ffcb01; color: #000; text-decoration: none; border-radius: 4px; font-weight: 700; }
.pht-event-details__cta:hover { background: #000; color: #fff; }

/* --- Beschreibung --- */
.pht-event-desc { background: #f7f7f7; padding: 32px 0; }
.pht-event-desc__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.pht-event-section__title { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 24px 0 12px; }

/* --- Cast --- */
.pht-event-cast__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.pht-event-cast__list { list-style: none; padding: 0; margin: 8px 0 24px; display: grid; gap: 8px; }
.pht-event-cast__item { display: flex; gap: 8px; flex-wrap: wrap; }
.pht-cast__name a { text-decoration: none; color: #2d2d2d; font-weight: 700; }
.pht-cast__name a:hover { text-decoration: underline; }
.pht-cast__func, .pht-cast__role { color: #555; }

/* --- Galerie --- */
.pht-event-gallery { background: #f7f7f7; padding: 24px 0; }
.pht-event-gallery__grid {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pht-event-gallery__grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* --- Presse --- */
.pht-event-press__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.pht-press__list { display: grid; gap: 16px; }
.pht-press__item { background: #fff; border: 1px solid #e9e9e9; border-radius: 8px; padding: 14px 16px; }
.pht-press__title { margin: 0 0 .25rem; font-size: 1.05rem; }
.pht-press__meta { color: #666; font-size: .95rem; display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: .5rem; }
.pht-press__btn { display: inline-block; padding: .6em 1em; background: #ffcb01; color: #000; text-decoration: none; border-radius: 4px; font-weight: 700; }
.pht-press__btn:hover { background: #000; color: #fff; }

/* --- Partner --- */
.pht-event-partner__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.pht-partner__label { font-weight: 700; margin: 16px 0 6px; }
.pht-partner__item img { max-height: 120px; width: auto; display: block; margin: 4px 0; }

/* --- Kompakte Terminliste (vorhandenes Grid wiederverwenden) --- */
.pht-event-terms__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* =========================================
   Global: Content-Maxbreite für Eventseiten
   ========================================= */
:root {
  --pht-max: 1180px;      /* wie besprochen: Option A */
  --pht-pad: 20px;        /* Standard-Inner-Padding */
}

body.single-events .pht-event-details__wrap,
body.single-events .pht-event-desc__inner,
body.single-events .pht-event-cast__inner,
body.single-events .pht-event-gallery__grid,
body.single-events .pht-event-press__inner,
body.single-events .pht-event-partner__inner,
body.single-events .pht-event-terms__inner {
  max-width: var(--pht-max);
  margin: 0 auto;
  padding: 40px var(--pht-pad);
}

/* ============================
   HERO (Full-Bleed, zentriert)
   ============================ */
.pht-event-hero {
  position: relative;
  width: 100%;
  min-height: 700px;                   /* Desktop-Höhe aus JSON */
  background: var(--pht-hero-bg) center/cover no-repeat;
  display: grid;
  place-items: center;                 /* vertikal & horizontal zentriert */
  text-align: center;
  color: #fff;
}

@media (max-width: 768px){
  .pht-event-hero { min-height: 705px; }  /* Mobile-Höhe aus deinem JSON */
}

.pht-event-hero__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);         /* 65% Overlay */
}

.pht-event-hero__inner {
  position: relative;
  z-index: 1;
  padding: 0 var(--pht-pad);
  max-width: var(--pht-max);
}

/* Typografie exakt an JSON angelehnt:
   H1 112px, H6 32px – mit responsivem clamp, damit es auf kleineren Screens sauber skaliert */
.pht-event-hero__title {
  margin: 0 0 .35em 0;
  font-weight: 700;
  /* clamp(Min, Viewport-Skala, Max) – Max = 112px */
  font-size: clamp(34px, 8vw, 112px);
  line-height: 1.06;
  text-shadow: 0 2px 14px rgba(0,0,0,.25); /* leichter Glow wie SO "text_shadow:25" */
}

.pht-event-hero__subtitle {
  margin: 0;
  /* Max ~ 32px */
  font-size: clamp(16px, 2.5vw, 32px);
  line-height: 1.3;
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
}

/* ==================================================
   Full-Width Version 2 (aus deiner bestehenden V2)
   – sorgt dafür, dass keine Sidebar & kein Theme-Pad
   ================================================== */
.single-events #primary,
.single-events #content,
body.single-events .site-content,
body.single-events .content-area,
body.single-events #main,
body.single-events .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Abstand unter Hero reduzieren, damit der nächste Block nah dran sitzt (wie im Entwurf) */
.pht-event-details__wrap { padding-top: 24px; }

/* Optional: Weißer Hintergrund für die Textblöcke wie im Entwurf */
.pht-event-desc,
.pht-event-press__inner,
.pht-event-partner__inner,
.pht-event-cast__inner { background: #fff; }

/* Galerie 2-Spalten (wie im Screenshot) mit großzügigem Abstand */
.pht-event-gallery { background: #fff; padding: 24px 0; }
.pht-event-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);     /* 2 Spalten wie im Entwurf */
  gap: 18px 18px;                             /* großzügige Abstände */
}
@media (max-width: 720px){
  .pht-event-gallery__grid { grid-template-columns: 1fr; }
}
.pht-event-gallery__grid img {
  width: 100%; height: auto; display: block; border-radius: 6px; object-fit: cover;
}

/* Presse – ruhig/flat wie im Screenshot */
.pht-event-press__inner .pht-press__list { display: grid; gap: 12px; }
.pht-press__item { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 12px 14px; }
.pht-press__title { margin: 0 0 4px; font-size: 1.05rem; }
.pht-press__meta { color: #666; font-size: .95rem; display: flex; gap: 10px; flex-wrap: wrap; }

/* Partnerlogos – groß & zentriert, wie im Screenshot */
.pht-event-partner .pht-partner__item { text-align: center; margin: 16px 0; }
.pht-event-partner .pht-partner__item img { max-height: 160px; width: auto; }

/* Kompakte Terminliste nutzt dein bestehendes Terminlisten-Grid */

/* ===========================
   PHT: Full-Width Stretch
   (repliziert SiteOrigin-Logik)
   =========================== */
:root { --pht-max: 1180px; --pht-pad: 20px; }

.pht-stretch {
  position: relative;
  width: 100vw;              /* volle Viewport-Breite */
  left: 50%;
  right: 50%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);  /* Breakout aus allen Theme-Containern */
}

.pht-stretch--grey { background: #f7f7f7; }
.pht-stretch--white { background: #fff; } /* optional, falls du es explizit setzen willst */

.pht-stretch__inner {
  max-width: var(--pht-max);
  margin: 0 auto;
  padding: 40px var(--pht-pad);
}

/* HERO (pixelgenau wie JSON) */
.pht-event-hero {
  min-height: 700px; /* Desktop-Höhe lt. JSON */
  display: grid; place-items: center; text-align: center; color: #fff;
  background: var(--pht-hero-bg) center/cover no-repeat;
  position: relative;
}
@media (max-width: 768px){
  .pht-event-hero { min-height: 705px; } /* Mobile-Höhe lt. JSON */
}
.pht-event-hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.pht-event-hero__inner { position: relative; z-index: 1; max-width: var(--pht-max); padding: 0 var(--pht-pad); }
.pht-event-hero__title   { margin: 0 0 .35em; font-weight: 700; font-size: clamp(34px, 8vw, 112px); line-height: 1.06; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.pht-event-hero__subtitle{ margin: 0; font-size: clamp(16px, 2.5vw, 32px); line-height: 1.3; text-shadow: 0 1px 10px rgba(0,0,0,.25); }

/* Normale (nicht-gestretchte) Abschnitte – Innenbreite 1180px */
.pht-section__inner {
  max-width: var(--pht-max);
  margin: 0 auto;
  padding: 40px var(--pht-pad);
}

/* Galerie (im Original NICHT gestretcht, 3 Spalten) */
.pht-event-gallery__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .pht-event-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .pht-event-gallery__grid { grid-template-columns: 1fr; } }
.pht-event-gallery__grid img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* (Optional) Kleinere optische Angleicher für die weißen Boxen */
.pht-card { background:#fff; border:1px solid #fff; border-radius:6px; padding: 3%;}