/* Editorial-Stil fuer die Startseite (Nov. 2026)
   Vorbilder: cassandraladru.com (Ruhe, Raster), ktmerry.com (dunkles Band), gregfinck.com (Namens-Moment).
   Nur index.html. Zum Zuruecksetzen: <link> auf diese Datei entfernen. */
:root {
  --ed-paper: #faf8f5;
  --ed-ink: #1a1a1a;
  --ed-text: #3a3431;
  --ed-band: #2f2f2f;
  --ed-gap: 10px;
  --ed-serif: 'Cormorant Garamond', 'Playfair Display', serif;
  --ed-sans: 'Jost', 'Montserrat', sans-serif;
}

/* ---------- Papier statt Verlaeufe ---------- */
html body { background: var(--ed-paper); color: var(--ed-text); }
html .about-story, html .elegant-gallery, html .testimonials-section,
html .contact-section, html .process-section { background: var(--ed-paper); }

/* ---------- Navigation: leise, klein, gesperrt ---------- */
html .nav-links a {
  font-family: var(--ed-sans); font-size: .72rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
}
html .nav-links { gap: 2.2rem; }
html .logo { font-family: var(--ed-sans); font-weight: 300; letter-spacing: .32em; font-size: 1rem; }
html .logo-subtitle { font-family: var(--ed-serif); font-style: italic; letter-spacing: .08em; text-transform: none; font-size: .85rem; }

/* ---------- Hero: der Name als Typo-Moment ---------- */
html .hero-image-content .hero-image-title {
  order: 1; font-family: var(--ed-serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(2.4rem, 9.5vw, 9.5rem); line-height: .92; letter-spacing: .03em;
  margin: 0 0 1.6rem; white-space: nowrap; text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
html .hero-image-content .hero-image-subtitle {
  order: 2; font-family: var(--ed-sans); font-weight: 400; font-size: .75rem;
  letter-spacing: .34em; margin: 0 0 .7rem;
}
html .hero-image-content .hero-image-tag {
  order: 3; font-family: var(--ed-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); margin: 0 0 2.2rem; color: #fff;
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
html .hero-image-content .hero-gallery-button { order: 4; }

/* ---------- Buttons: 1px Rahmen, keine Rundung ---------- */
html .hero-gallery-button, html .about-story-btn, html .gallery-feature-cta,
html .cta-pricing-btn, html .fotobox-request-btn, html .wedding-view-button,
html .block-3-view-button, html .submit-btn {
  border-radius: 0; border: 1px solid currentColor; background: transparent; box-shadow: none;
  font-family: var(--ed-sans); font-size: .72rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; padding: 1.05rem 2rem;
}
html .hero-gallery-button { color: #fff; border-color: rgba(255,255,255,.85); }
html .hero-gallery-button:hover { background: #fff; color: var(--ed-ink); }
html .about-story-btn { color: var(--ed-ink) !important; background: transparent; }
html .about-story-btn:hover { background: var(--ed-ink); color: #fff !important; }
html .submit-btn { color: var(--ed-ink); }
html .submit-btn:hover { background: var(--ed-ink); color: #fff; }

/* ---------- Ueberschriften: gross, duenn, mit kursivem Wort ---------- */
html .section-title, html .about-story-text h1, html .testimonials-section h2,
html .cta-pricing h2, html .contact-section h2, html .compare-section h2 {
  font-family: var(--ed-serif); font-weight: 300; color: var(--ed-ink);
  letter-spacing: -.01em; line-height: 1.05;
}
html .section-title { font-size: clamp(2.6rem, 6vw, 5.2rem); text-transform: uppercase; letter-spacing: .02em; }
html .about-story-text h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
html .gallery-kicker, html .about-band-kicker, html .cta-pricing-kicker {
  font-family: var(--ed-sans); font-style: normal; font-weight: 400; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ed-text);
}
html .gallery-lead, html .about-story-lead {
  font-family: var(--ed-serif); font-weight: 300; font-style: italic; font-size: 1.35rem; line-height: 1.5; color: var(--ed-text);
}
html .about-story-text p, html .gallery-lead + * { font-family: var(--ed-sans); font-weight: 300; font-size: .98rem; line-height: 1.8; }

/* ---------- Ueber mich: Foto-Collage statt Rahmen ---------- */
html .about-story-media::before { display: none; }
html .about-story-main, html .about-story-second { border: 0; border-radius: 0; box-shadow: none; }
html .about-story-second.about-story-portrait { width: 44%; right: -6%; bottom: -3.5rem; }
html .about-story-facts { border: 0; }
html .about-story-facts li { font-family: var(--ed-sans); font-weight: 300; }
html .about-story-facts strong { font-family: var(--ed-serif); font-weight: 400; font-size: 1.25rem; }

/* ---------- Galerie: dichtes Raster, Ecken 0, Fugen 10px ---------- */
html .elegant-gallery-grid {
  max-width: none; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ed-gap); padding: 0 var(--ed-gap) 6rem; align-items: start;
}
html .elegant-gallery-tile:nth-child(even) { transform: none; }
html .elegant-gallery-tile-image { aspect-ratio: 4 / 5; box-shadow: none; border-radius: 0; }
html .elegant-gallery-tile-content { padding: .9rem 0 1.4rem; }
html .elegant-gallery-tile-title {
  font-family: var(--ed-serif); font-style: italic; font-weight: 400; text-transform: none;
  font-size: 1.15rem; letter-spacing: .01em; margin-bottom: .15rem;
}
html .elegant-gallery-tile-subtitle { font-family: var(--ed-sans); font-weight: 500; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; }
@media (max-width: 992px) { html .elegant-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  html .elegant-gallery-grid { gap: 6px; padding: 0 6px 3.5rem; }
  html .elegant-gallery-tile-title { font-size: 1rem; }
}

/* ---------- Das eine dunkle Band ---------- */
html .cta-pricing {
  background: var(--ed-band) !important; color: #fff; border: 0; padding: 7rem 1.4rem;
}
html .cta-pricing h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4.4rem); text-transform: uppercase; letter-spacing: .02em; }
html .cta-pricing-kicker { color: rgba(255,255,255,.7); }
html .cta-pricing p { color: rgba(255,255,255,.8); font-family: var(--ed-serif); font-style: italic; font-weight: 300; font-size: 1.3rem; }
html .cta-pricing-btn { color: #fff !important; border-color: rgba(255,255,255,.85); background: transparent; }
html .cta-pricing-btn:hover { background: #fff; color: var(--ed-ink) !important; }

/* ---------- Bewertungen: ruhiger ---------- */
html .testimonial-card { background: transparent; border-radius: 0; box-shadow: none; }

@media (max-width: 768px) {
  html .hero-image-content .hero-image-subtitle { font-size: .62rem; letter-spacing: .2em; }
  html .about-story-second.about-story-portrait { right: 0; bottom: -1.6rem; }
  html .cta-pricing { padding: 4.5rem 1.2rem; }
}

/* Reportage-Karte am Handy: Bild oben, Text darunter */
@media (max-width: 768px) {
  html .gallery-feature { grid-template-columns: 1fr; }
  html .gallery-feature-visual { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
  html .gallery-feature-body { padding: 1.6rem 1.3rem 1.8rem; }
  html .gallery-feature-kicker { letter-spacing: .2em; font-size: .62rem; }
  html .gallery-feature-cta { padding: .9rem 1.4rem; letter-spacing: .18em; display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { html .hero-image-content * { transition: none; } }

/* =====================================================================
   v2 (Nov. 2026): naeher an Cassandra Ladru / KT Merry
   Hero nur Name + eine Zeile, grosse Typo mit kursivem Wort,
   dunkle Baender im Wechsel, Galerie randlos, mehr Luft.
   ===================================================================== */
html em { font-style: italic; text-transform: none; font-weight: 300; }

/* Hero: nur Name + Zeile */
html .hero-image-content .hero-image-tag,
html .hero-image-content .hero-gallery-button { display: none; }
html .hero-image-content .hero-image-title { margin-bottom: 1.1rem; font-size: clamp(2.6rem, 11vw, 11rem); letter-spacing: .02em; }
html .hero-image-content .hero-image-subtitle { order: 2; margin: 0; font-size: .72rem; letter-spacing: .4em; opacity: .92; }
html .hero-story-count { font-family: var(--ed-sans); letter-spacing: .24em; font-size: .62rem; text-transform: uppercase; }

/* Grosse Ueberschriften mit kursivem Wort */
html .about-story-text h1 { font-size: clamp(2.3rem, 4.8vw, 4.4rem); text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; }
html .about-story-text h1 em, html .section-title em, html .testimonials-section h2 em,
html .cta-pricing h2 em, html .compare-section h2 em { font-family: var(--ed-serif); font-size: .92em; }
html .testimonials-section h2, html .compare-section h2 {
  font-size: clamp(2.3rem, 5vw, 4.4rem) !important; text-transform: uppercase; letter-spacing: .01em; line-height: 1.04;
}
html .testimonials-section h2 em, html .compare-section h2 em { text-transform: none; }

/* Mehr Luft zwischen den Abschnitten */
html .about-story { padding-top: 8rem; padding-bottom: 8rem; }
html .elegant-gallery { padding-top: 8rem; }
html .testimonials-section { padding-top: 7rem; padding-bottom: 7rem; }
html .contact-section { padding-top: 7rem; padding-bottom: 7rem; }
@media (max-width: 768px) {
  html .about-story, html .elegant-gallery, html .testimonials-section, html .contact-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}

/* Vorher/Nachher als dunkles Band (KT-Merry-Rhythmus) */
html #compare.compare-section { background: var(--ed-band) !important; color: #fff !important; border: 0 !important; padding: 7rem 0 !important; }
html #compare.compare-section h2 { color: #fff !important; }
html #compare.compare-section p { color: rgba(255,255,255,.78) !important; font-family: var(--ed-serif) !important; font-style: italic; font-weight: 300; font-size: 1.25rem !important; }
@media (max-width: 768px) { html #compare.compare-section { padding: 4.5rem 0 !important; } }

/* Galerie randlos, schmale Fugen */
html .elegant-gallery-grid { width: 100vw; margin-left: calc(50% - 50vw); gap: 8px; padding: 0 8px 7rem; }
html .elegant-gallery-tile-image { aspect-ratio: 3 / 4; }
@media (min-width: 993px) { html .elegant-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html .gallery-feature { border: 0; box-shadow: none; border-radius: 0; background: transparent; }

/* Bewertungen */
html .testimonials-section { background: var(--ed-paper); }
html .testimonial-card { border: 0; border-top: 1px solid #d9d3c9; padding-top: 1.4rem; }

/* Kontakt: Linien statt Boxen */
html .contact-section .section-title { margin-bottom: 3rem; }
html .contact-section input, html .contact-section textarea, html .contact-section select {
  border: 0; border-bottom: 1px solid #cfc8bc; border-radius: 0; background: transparent; font-family: var(--ed-sans); font-weight: 300;
}

/* Footer: dunkel wie das Preisband */
html .footer { background: #1f1f1f; }
html .about-story-text h1 { font-size: clamp(1.9rem, 3.1vw, 3.1rem); overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 768px) { html .about-story-text h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); } }
html .contact-info h3 { font-family: var(--ed-serif); font-weight: 300; font-size: 2rem; color: var(--ed-ink); }

/* Footer: heller Text auf dunklem Grund (ueberschreibt die Inline-Farben) */
html .footer { background: #1f1f1f; color: rgba(255,255,255,.82); border: 0; }
html .footer h3, html .footer h4 { color: #fff; font-family: var(--ed-serif); font-weight: 300; letter-spacing: .02em; }
html .footer h4 { font-family: var(--ed-sans); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 400; }
html .footer p { color: rgba(255,255,255,.82) !important; font-family: var(--ed-sans); font-weight: 300; font-size: .92rem; line-height: 1.8; }
html .footer a { color: #fff !important; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
html .footer a:hover { border-bottom-color: #fff; }
html .footer .impressum-link { color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.35); }
html .footer-bottom { border-top: 1px solid rgba(255,255,255,.18); }
html .footer-bottom p { color: rgba(255,255,255,.6) !important; font-size: .78rem; }

/* =====================================================================
   v3 Feinschliff: Hero unten links, ruhigerer Rhythmus, keine Waise
   (Playfair/Montserrat sind in fonts.css/index.html auf Cormorant/Jost umgelegt: 2 Schriften)
   ===================================================================== */
/* Hero: Name unten links (Finck-Prinzip), Verlauf fuer Lesbarkeit */
html .hero-image { position: relative; }
html .hero-image:first-child::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 62%);
}
@media (min-width: 991px) {
  html .hero-image-content {
    position: absolute; z-index: 2; left: clamp(1.2rem, 4vw, 4rem); right: auto; bottom: clamp(5.5rem, 10vh, 8rem);
    width: auto; padding-top: 0; align-items: flex-start; text-align: left;
  }
}
html .hero-image-content .hero-image-title { font-size: clamp(2.4rem, 8.5vw, 9rem); margin-bottom: .9rem; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
html .hero-image-content .hero-image-subtitle { text-shadow: 0 1px 14px rgba(0,0,0,.55); opacity: 1; }
/* Wedding-Pill/Pfeile dezent */
html .hero-story-nav { opacity: .75; }
html .hero-story-nav:hover { opacity: 1; }

/* Rhythmus: Galerie + Kontakt linksbuendig statt alles zentriert */
html .elegant-gallery .container, html .contact-section .container { text-align: left; }
html .elegant-gallery .section-title, html .contact-section .section-title { text-align: left; }
html .gallery-lead { text-align: left; margin-left: 0; }
html .gallery-kicker { text-align: left; }

/* Keine Waise in der letzten Reihe */
@media (min-width: 993px) {
  html .elegant-gallery-tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  html .elegant-gallery-tile:last-child:nth-child(3n+1) .elegant-gallery-tile-image { aspect-ratio: 21 / 9; }
  html .elegant-gallery-tile:last-child:nth-child(3n+2) { grid-column: span 2; }
  html .elegant-gallery-tile:last-child:nth-child(3n+2) .elegant-gallery-tile-image { aspect-ratio: 4 / 3; }
}
@media (max-width: 992px) and (min-width: 0px) {
  html .elegant-gallery-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html .elegant-gallery-tile:last-child:nth-child(odd) .elegant-gallery-tile-image { aspect-ratio: 4 / 3; }
}

/* Bewertungs-Widget: ruhig, ohne fremde Farben */
html .google-rating { border: 0; border-top: 1px solid #d9d3c9; border-bottom: 1px solid #d9d3c9; border-radius: 0; background: transparent; padding: .8rem 0; }
html .google-stars { color: var(--ed-ink); }

/* Kleine Labels lesbarer */
html .elegant-gallery-tile-subtitle, html .gallery-kicker, html .about-band-kicker, html .cta-pricing-kicker,
html .testimonial-meta, html .testimonial-author { font-size: .7rem; color: #4a433d; }