/* Cassandra-Ladru-Richtung (Nov. 2026): weisser Grund, kleine gesperrte Typo, Fotos randlos,
   Raster blendet beim Scrollen ein, wenig Text, helle Fusszeile.
   Liegt NACH fh-editorial*.css und ueberschreibt nur Optik.
   Zum Zuruecksetzen: <link> auf diese Datei in der Seite entfernen. */
:root { --c-white: #fff; --c-ink: #1a1a1a; --c-text: #3a3431; --c-line: #e6e2dc; --c-gap: 6px; }

html body { background: var(--c-white); }
html .about-story, html .elegant-gallery, html .testimonials-section, html .contact-section,
html section.alt, html .block.alt { background: var(--c-white); }

/* ---------- Kleine, gesperrte Ueberschriften ---------- */
html .section-title, html .testimonials-section h2, html .compare-section h2,
html .cta-pricing h2, html .contact-section h2, html h2 {
  font-family: var(--ed-serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem) !important; letter-spacing: .14em; line-height: 1.25;
}
html .about-story-text h1, html h1, html .page-head h1 {
  font-family: var(--ed-serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: .12em; line-height: 1.2; max-width: none;
}
html em { text-transform: none; letter-spacing: .02em; }
html h3 { font-weight: 300; letter-spacing: .04em; }
html p, html li { font-size: .95rem; line-height: 1.9; font-weight: 300; }
html .gallery-lead, html .about-story-lead, html .lead, html .lede {
  font-size: 1.05rem; line-height: 1.8; color: var(--c-text);
}

/* ---------- Unterseiten-Kopf: Logo mittig, Menue darunter ---------- */
@media (min-width: 1021px) {
  html .top { background: #fff; border-bottom: 0; position: static; }
  html .top .wrap { flex-direction: column; justify-content: center; gap: .9rem; min-height: 0; padding: 2.2rem 1.5rem 1.4rem; }
  html .top .brand { text-align: center; font-size: 1.15rem; letter-spacing: .38em; }
  html .top .brand small { display: block; margin-top: .25rem; }
  html .top nav { justify-content: center; gap: 2.6rem; font-size: .64rem; letter-spacing: .3em; }
  html .top .top-cta { display: none; }
}
html .page-head { padding: 2.5rem 0 1rem; text-align: center; }
html .page-head .wrap { max-width: 46rem; }
html .page-head .kicker { display: none; }
html .page-head .lead { margin-left: auto; margin-right: auto; font-style: italic; }

/* ---------- Index: Navigation heller, kleiner ---------- */
html nav .nav-links a { font-size: .64rem; letter-spacing: .3em; }

/* ---------- Galerie: randloses Mauerwerk, blendet beim Scrollen ein ---------- */
html .elegant-gallery { padding-top: 6rem; }
html .elegant-gallery .container { text-align: center; }
html .elegant-gallery .section-title, html .gallery-lead, html .gallery-kicker { text-align: center; margin-left: auto; margin-right: auto; }
html .elegant-gallery-grid {
  display: block; column-count: 3; column-gap: var(--c-gap);
  width: 100vw; margin-left: calc(50% - 50vw); padding: 0 var(--c-gap) 6rem; max-width: none;
}
html .elegant-gallery-tile {
  position: relative; display: block; break-inside: avoid; margin: 0 0 var(--c-gap);
  transform: none; box-shadow: none; background: transparent;
}
html .elegant-gallery-tile:nth-child(even) { transform: none; }
html .elegant-gallery-tile.fh-reveal { transform: translateY(34px); }
html .elegant-gallery-tile.fh-reveal.fh-in { transform: none; }
html .elegant-gallery-tile-image { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; background-size: cover; background-position: center; }
html .elegant-gallery-tile:nth-child(5n+1) .elegant-gallery-tile-image { aspect-ratio: 3 / 2; }
html .elegant-gallery-tile:nth-child(5n+2) .elegant-gallery-tile-image { aspect-ratio: 3 / 4; }
html .elegant-gallery-tile:nth-child(5n+3) .elegant-gallery-tile-image { aspect-ratio: 4 / 5; }
html .elegant-gallery-tile:nth-child(5n+4) .elegant-gallery-tile-image { aspect-ratio: 1 / 1; }
html .elegant-gallery-tile:nth-child(5n) .elegant-gallery-tile-image { aspect-ratio: 2 / 3; }
/* Titel erst beim Drueberfahren, wie bei Cassandra keine Bildunterschriften */
html .elegant-gallery-tile-content {
  position: absolute; inset: auto 0 0 0; padding: 2.4rem 1.1rem 1rem; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); opacity: 0; transition: opacity .5s cubic-bezier(.23,1,.32,1);
}
html .elegant-gallery-tile:hover .elegant-gallery-tile-content { opacity: 1; }
html .elegant-gallery-tile-title { color: #fff; font-size: 1.2rem; }
html .elegant-gallery-tile-subtitle { color: rgba(255,255,255,.88); }
@media (hover: none) { html .elegant-gallery-tile-content { opacity: 1; padding-top: 2rem; } html .elegant-gallery-tile-title { font-size: 1rem; } }
@media (max-width: 992px) { html .elegant-gallery-grid { column-count: 2; } }
@media (max-width: 768px) { html .elegant-gallery-grid { column-gap: 4px; padding-left: 4px; padding-right: 4px; } html .elegant-gallery-tile { margin-bottom: 4px; } }
html .gallery-feature { margin-bottom: 4rem; }

/* ---------- Helle Baender statt dunkler Flaechen ---------- */
html #compare.compare-section { background: #fff !important; color: var(--c-ink) !important; border-top: 1px solid var(--c-line) !important; border-bottom: 1px solid var(--c-line) !important; padding: 6rem 0 !important; }
html #compare.compare-section h2 { color: var(--c-ink) !important; }
html #compare.compare-section p { color: var(--c-text) !important; font-size: 1.05rem !important; }
html .cta-pricing { background: #fff !important; color: var(--c-ink); border-top: 1px solid var(--c-line); padding: 6rem 1.4rem; }
html .cta-pricing h2 { color: var(--c-ink); }
html .cta-pricing p, html .cta-pricing-kicker { color: var(--c-text); }
html .cta-pricing-btn { color: var(--c-ink) !important; border-color: var(--c-ink); }
html .cta-pricing-btn:hover { background: var(--c-ink); color: #fff !important; }
html section.band, html .band, html .page-hero + section.alt { background: #fff; }

/* ---------- Buttons klein wie "CONTACT CASSANDRA" ---------- */
html .btn, html .submit-btn, html .st-cta, html .about-story-btn, html .gallery-feature-cta, html .cta-pricing-btn {
  font-size: .62rem; letter-spacing: .3em; padding: .95rem 1.8rem; border-color: var(--c-ink);
}

/* ---------- Fusszeile hell, zentriert, kleine Versalien ---------- */
html .footer, html footer { background: #fff; color: var(--c-ink); border-top: 1px solid var(--c-line); padding: 3.6rem 0 2.4rem; text-align: center; }
html .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; }
html .footer h3, html .footer h4 { color: var(--c-ink); }
html .footer h3 { font-size: 1.3rem; letter-spacing: .3em; text-transform: uppercase; }
html .footer h4 { font-size: .62rem; letter-spacing: .3em; }
html .footer p, html footer p, html footer span, html footer li { color: var(--c-text) !important; font-size: .78rem; letter-spacing: .12em; }
html .footer a, html footer a { color: var(--c-ink) !important; border-bottom: 0; text-decoration: none; letter-spacing: .2em; text-transform: uppercase; font-size: .66rem; }
html .footer a:hover, html footer a:hover { opacity: .55; }
html .footer .impressum-link { color: var(--c-ink) !important; border: 0; }
html .footer-bottom { border-top: 0; }
html .footer-bottom p { color: #6b645c !important; font-size: .66rem; }
html .footer-nav { gap: .4rem 1.6rem; }

/* ---------- Karten/Zitate ruhig ---------- */
html .card, html .price-card { border-top: 1px solid var(--c-line); }
html .testimonial-card { border-top: 1px solid var(--c-line); }
html .quote { font-size: clamp(1.25rem, 2vw, 1.7rem); }

/* Bild-Heros (Fotobox, Kassel-Seiten): Schrift immer weiss, gut lesbar auf dunklem Foto */
html .hero, html .page-hero { color: #fff; }
html .hero h1, html .hero p, html .hero .kicker, html .hero-kicker, html .hero .sub, html .hero li,
html .page-hero h1, html .page-hero p, html .page-hero .kicker, html .page-hero .sub {
  color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.55);
}
html .hero .btn, html .page-hero .btn, html .hero .st-cta { color: #fff; border-color: rgba(255,255,255,.9); text-shadow: none; }
html .hero .btn:hover, html .page-hero .btn:hover { background: #fff; color: var(--c-ink); }
html .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, rgba(0,0,0,0)); }
html .hero > * { position: relative; z-index: 1; }