/* Theme-ghz-Pattern-CSS (Plugin-portabel) — nur Theme-Prefix-Klassen */

/*
Theme Name:   gregor-marstaller — Kadence Child
Theme URI:    https://gregor-marstaller.de
Description:  Hochzeitsfotograf-Variante. Liquid Glass · Cream-Bühne · Champagner-Gold + Petrol als Tiefen-Akzent. Bindet sich ans Marstaller-Universum durch gemeinsame Designtokens.
Author:       Gregor Marstaller
Author URI:   https://gregor-marstaller.de
Template:     kadence
Version:      0.5.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  gregor-marstaller
Update URI:   gregor-marstaller.de
*/

/* ════════════════════════════════════════════════════════════════
   1. Design-Tokens
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   2. Body & Typografie
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   3. Header transparent über Hero
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   4. Hero · Crossfade mit Linsen-Fokus-Pull
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   4b. Brand-Mark — Logo-Stil für Hero und Pattern-Vorschau
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   5. Glass-Helper
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   6. Intro · Glass-Karte überlappt Bild
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   7. Bokeh-Akzent-Helper
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   8. Galerie · Selektive Tiefenschärfe
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   9. Format-Prosa
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   10. Schauspieler-Grid
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   11. CTA · Photo-Background mit Glass-Card
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   12. Buttons
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   13. Footer · Universum-Hinweis (vereinfacht)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   14. Responsive Polish
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   SPIELEREI-HELPER — universell auf jeden Block anwendbar
   Im Editor: Block wählen → Sidebar → Erweitert → "Zusätzliche CSS-Klasse"
   Verfügbare Klassen:
   · spielerei-sparkle      — Diamantpainting-Schimmer (Theme-Farben)
   · spielerei-focus        — Linsen-Fokus-Pull beim Laden (Bilder)
   · spielerei-shimmer      — Glanz-Streifen wandert einmalig durch
   · spielerei-glow         — sanftes pulsierendes Aura
   · spielerei-fade-up      — Fade-In von unten beim Scrollen
   ════════════════════════════════════════════════════════════════ */

/* Reduzierte Bewegung: Animationen pausieren wenn der Nutzer reduce-motion will */
/* ═══════════════════════════════════════════════════════════
   v3.2.6 — Hochzeitsfotograf Patterns (Startseite, Über mich, …)
   ═══════════════════════════════════════════════════════════ */

/* Hero (Cinematic-Cover) */
.ghz-hero { color: #faf7f0; }
.ghz-hero__title {
  font-family: 'EB Garamond', 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0.4rem 0;
  color: #faf7f0;
}
.ghz-hero__title em {
  font-style: italic;
  color: #f0e0b8;
}
.ghz-hero__sub {
  font-family: 'Jost', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  max-width: 760px;
  margin-inline: auto;
  color: rgba(250, 247, 240, 0.92);
}

.ghz-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  color: #c9a84c;
  margin: 0 0 0.6rem;
}

/* Sections */
.ghz-section { padding: clamp(3rem, 7vw, 6rem) 1.25rem; }
.ghz-intro__title {
  font-family: 'EB Garamond', serif;
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  line-height: 1.2;
  font-weight: 500;
  margin: 0.3rem 0 1rem;
}
.ghz-intro__title em { color: #8c7224; font-style: italic; }
.ghz-intro__row { gap: clamp(1.5rem, 4vw, 3.5rem); }
.ghz-intro__close { font-family: 'EB Garamond', serif; font-style: italic; font-size: 1.1rem; color: #6a5530; }

/* USP-Grid */
.ghz-usp__grid { gap: clamp(1rem, 2.5vw, 2rem) !important; }
.ghz-usp__card {
  padding: 2rem 1.6rem;
  background: rgba(255, 250, 240, 0.7);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 12px;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ghz-usp__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(31, 26, 18, 0.18);
  border-color: rgba(201, 168, 76, 0.55);
}
.ghz-usp__card--accent {
  background: linear-gradient(135deg, #faf3e3 0%, #f0e3c8 100%);
  border-color: rgba(201, 168, 76, 0.4);
}
.ghz-usp__tag {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c9a84c;
  margin: 0 0 0.5rem !important;
  font-weight: 600;
}
.ghz-usp__title {
  font-family: 'EB Garamond', serif;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  margin: 0 0 0.6rem !important;
  font-weight: 500;
}

/* Quiz-CTA */
.ghz-quiz-cta {
  background: #1e1810;
  color: #faf7f0;
  text-align: center;
}
.ghz-quiz-cta .ghz-eyebrow { color: #d4b35f; }
.ghz-quiz-cta h2 { color: #faf7f0; font-family: 'EB Garamond', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); }

/* Testimonial */
.ghz-testimonial__row { gap: clamp(1.5rem, 4vw, 3.5rem); }
.ghz-pullquote {
  border: none !important;
  padding: 0 !important;
  margin: 0.5rem 0 !important;
}
.ghz-pullquote blockquote {
  padding: 0;
  margin: 0;
}
.ghz-pullquote blockquote p {
  font-family: 'EB Garamond', serif;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-style: italic;
  line-height: 1.4;
  color: #2a2218;
  margin: 0 0 0.8rem;
  padding-left: 1.5rem;
  border-left: 3px solid #c9a84c;
}
.ghz-pullquote cite {
  font-family: 'Jost', sans-serif;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6a5530;
}

/* CTA-Abschluss */
.ghz-cta { background: #faf3e3; text-align: center; }
.ghz-cta__title {
  font-family: 'EB Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 1rem !important;
}

/* Workflow-Schritte */
.ghz-workflow__grid { gap: clamp(1.2rem, 3vw, 2.5rem) !important; }
.ghz-step-num {
  font-family: 'EB Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: #c9a84c;
  margin: 0 0 0.6rem !important;
  font-weight: 400;
  font-style: italic;
}

/* List */
.ghz-list { padding-left: 0; list-style: none; }
.ghz-list li {
  padding: 0.5rem 0 0.5rem 1.6rem;
  border-bottom: 1px solid rgba(31,26,18,0.08);
  position: relative;
  line-height: 1.55;
}
.ghz-list li:before {
  content: '—';
  position: absolute;
  left: 0;
  color: #c9a84c;
  font-weight: 600;
}
.ghz-list li:last-child { border-bottom: 0; }

/* FAQ Details */
.ghz-faq .wp-block-details {
  margin: 0 0 0.6rem;
  padding: 0.9rem 1.2rem;
  background: rgba(255, 250, 240, 0.55);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 8px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ghz-faq .wp-block-details[open] {
  background: #fffaf0;
  border-color: #c9a84c;
}
.ghz-faq .wp-block-details summary {
  cursor: pointer;
  font-family: 'EB Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #2a2218;
  padding: 0;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.ghz-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ghz-faq .wp-block-details summary:after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: #c9a84c;
  transition: transform 0.25s ease;
}
.ghz-faq .wp-block-details[open] summary:after { transform: translateY(-50%) rotate(45deg); }
.ghz-faq .wp-block-details > p { margin-top: 0.8rem; line-height: 1.6; color: #4a4036; }

/* Button-Style: Pfeil */
.wp-block-button.is-style-mup-btn-arrow .wp-block-button__link {
  background: #1e1810 !important;
  color: #faf7f0 !important;
  padding: 1rem 2.2rem !important;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 60px;
  transition: all 0.3s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.wp-block-button.is-style-mup-btn-arrow .wp-block-button__link:hover {
  background: #c9a84c !important;
  color: #1e1810 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -14px rgba(201, 168, 76, 0.55);
}
.wp-block-button.is-style-mup-btn-arrow .wp-block-button__link:after {
  content: ' →';
  margin-left: 0.4rem;
  display: inline-block;
  transition: transform 0.3s ease;
}
.wp-block-button.is-style-mup-btn-arrow .wp-block-button__link:hover:after {
  transform: translateX(4px);
}

/* Responsive ─ Mobile-Stack */
@media (max-width: 720px) {
  .ghz-hero { min-height: 65vh !important; }
  .ghz-intro__row .wp-block-column,
  .ghz-testimonial__row .wp-block-column,
  .ghz-usp__grid .wp-block-column,
  .ghz-workflow__grid .wp-block-column { flex-basis: 100% !important; }
  .ghz-usp__grid { flex-direction: column !important; }
  .ghz-workflow__grid { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   v3.2.10 — MOBILE-FIX: bulletproof column stacking
   Bisher: Spalten wurden auf Mobile zu schmal (60% von 390px =
   234px innerhalb von padding/border = noch enger), Wörter
   brachen einzeln um. Jetzt: Spalten gehen IMMER auf 100% breite
   unter 768px, max-width: 100%, flex-grow neutralisiert.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ghz-testimonial__row,
  .ghz-intro__row,
  .ghz-usp__grid,
  .ghz-workflow__grid,
  .ghz-tpw__grid {
    flex-direction: column !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
  }
  .ghz-testimonial__row > .wp-block-column,
  .ghz-intro__row > .wp-block-column,
  .ghz-usp__grid > .wp-block-column,
  .ghz-workflow__grid > .wp-block-column,
  .ghz-tpw__grid > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }
  /* Pullquote nie char-by-char umbrechen */
  .ghz-pullquote blockquote p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
    font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important;
    padding-left: 1rem !important;
    text-align: left !important;
  }
  .ghz-pullquote {
    margin-inline: 0 !important;
    padding-inline: 1rem !important;
  }
  /* Testimonial-Bild zentrieren */
  .ghz-testimonial__row .wp-block-image { margin-inline: auto !important; }
  /* Heading „Liebesbriefe" auf Mobile bleibt schön */
  .ghz-testimonial h2,
  .ghz-testimonial h3,
  section[class*="testimonial"] h2 {
    font-size: clamp(1.7rem, 6vw, 2.5rem) !important;
    line-height: 1.15 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v3.2.14 — Landingpage Anfrageprozess (4-Schritte-Grid)
   ═══════════════════════════════════════════════════════════ */
.mup-process-grid {
  gap: clamp(1rem, 3vw, 2rem) !important;
  margin: clamp(2rem, 5vw, 3.5rem) 0 !important;
}
.mup-process-grid .wp-block-column {
  padding: 1.2rem 1.4rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid rgba(201, 168, 76, 0.4);
  border-radius: 0 8px 8px 0;
}
@media (max-width: 781px) {
  .mup-process-grid { flex-direction: column !important; }
  .mup-process-grid .wp-block-column { flex-basis: 100% !important; }
}