/* Editorial-Stil fuer die Unterseiten (Nov. 2026), passend zur Startseite (fh-editorial.css).
   Gilt fuer preise, ueber-mich, kontakt, impressum, fotobox, Kassel-Seiten und die Reportagen (portfolio).
   Zum Zuruecksetzen: <link> auf diese Datei in der jeweiligen Seite entfernen. */
:root {
  --ed-paper: #faf8f5;
  --ed-ink: #1a1a1a;
  --ed-text: #3a3431;
  --ed-band: #2f2f2f;
  --ed-line: #d9d3c9;
  --ed-serif: 'Cormorant Garamond', 'Playfair Display', serif;
  --ed-sans: 'Jost', 'Montserrat', sans-serif;
}

html body { background: var(--ed-paper); color: var(--ed-text); font-family: var(--ed-sans); font-weight: 300; }
html p { color: var(--ed-text); font-family: var(--ed-sans); font-weight: 300; line-height: 1.85; }

/* ---------- Kopfzeile ---------- */
html .top { background: rgba(250,248,245,.94); border-bottom: 1px solid var(--ed-line); }
html .brand { font-family: var(--ed-sans); font-weight: 300; letter-spacing: .32em; font-size: .95rem; }
html .brand small { font-family: var(--ed-serif); font-style: italic; letter-spacing: .08em; font-size: .8rem; text-transform: none; color: var(--ed-text); }
html .top nav { font-family: var(--ed-sans); font-size: .7rem; letter-spacing: .22em; gap: 1.8rem; }
html .top nav a:hover { color: var(--ed-ink); opacity: .6; }
html .top nav a[aria-current="page"]::after { background: var(--ed-ink); }
html .top-cta, html .menu-btn { font-family: var(--ed-sans); }
html .top-cta { border-radius: 0; font-weight: 400; letter-spacing: .22em; }
html .mnav { background: var(--ed-paper); }
html .mnav a { font-family: var(--ed-serif); font-weight: 300; font-size: 2rem; border-bottom: 1px solid var(--ed-line); }
html .mnav a[aria-current="page"] { color: var(--ed-ink); font-style: italic; }
html .mnav .mnav-small { font-family: var(--ed-sans); }

/* ---------- Titelbereiche: grosser, duenner Titel ---------- */
html h1, html .hero h1, html .page-hero h1 {
  font-family: var(--ed-serif); font-weight: 300; letter-spacing: -.01em; line-height: 1;
  font-size: clamp(2.3rem, 5.6vw, 5.2rem); max-width: 20ch; text-transform: uppercase;
}
html .page-head h1 { color: var(--ed-ink); }
html .kicker, html .hero-kicker { font-family: var(--ed-sans); font-weight: 400; font-size: .7rem; letter-spacing: .32em; color: var(--ed-text); }
html .hero .kicker, html .page-hero .kicker, html .hero-kicker { color: #fff; }
html .hero p.sub, html .page-hero p.sub { font-family: var(--ed-serif); font-style: italic; font-weight: 300; font-size: 1.35rem; line-height: 1.5; }
html .lead, html .lede { font-family: var(--ed-serif); font-style: italic; font-weight: 300; font-size: 1.45rem; line-height: 1.55; color: var(--ed-text); }

/* ---------- Ueberschriften ---------- */
html h2 { font-family: var(--ed-serif); font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; color: var(--ed-ink); }
html h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.5rem; color: var(--ed-ink); }

/* ---------- Flaechen: Papier, ein dunkles Band ---------- */
html section.alt, html .block.alt { background: var(--ed-paper); border-top: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line); }
html section.block { padding: 6.5rem 0; }
@media (max-width: 820px) { html section.block { padding: 4.2rem 0; } }

/* ---------- Karten werden Linien, keine Boxen ---------- */
html .card, html .price-card { background: transparent; border: 0; border-top: 1px solid var(--ed-ink); border-radius: 0; box-shadow: none; padding: 1.6rem 0 0; }
html .card .price, html .price-card .price { font-family: var(--ed-serif); font-weight: 400; font-size: 2.2rem; color: var(--ed-ink); }
html .card ul, html .price-card ul { font-family: var(--ed-sans); font-weight: 300; color: var(--ed-text); }
html .card li::before { color: var(--ed-ink); }
html .orte span { border: 1px solid var(--ed-line); background: transparent; border-radius: 0; font-family: var(--ed-sans); letter-spacing: .08em; }
html .facts li { border-top-color: var(--ed-ink); font-family: var(--ed-sans); font-weight: 300; }
html .facts strong { font-family: var(--ed-serif); font-weight: 400; font-size: 1.6rem; }

/* ---------- Zitate ---------- */
html .quote { font-family: var(--ed-serif); font-weight: 300; font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.45; color: var(--ed-ink); }
html .quote cite, html .quote-meta { font-family: var(--ed-sans); font-style: normal; font-weight: 400; letter-spacing: .24em; color: var(--ed-text); }

/* ---------- Buttons: 1px Rahmen ---------- */
html .btn, html .submit-btn, html .st-cta {
  background: transparent; color: var(--ed-ink); border: 1px solid var(--ed-ink); border-radius: 0; box-shadow: none;
  font-family: var(--ed-sans); font-weight: 400; font-size: .72rem; letter-spacing: .22em; padding: 1.05rem 2rem;
}
html .btn:hover, html .submit-btn:hover, html .st-cta:hover { background: var(--ed-ink); color: #fff; }
html .hero .btn, html .page-hero .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
html .hero .btn:hover, html .page-hero .btn:hover { background: #fff; color: var(--ed-ink); }
html .btn-light, html .btn.btn-light { color: #fff; border-color: rgba(255,255,255,.85); }

/* ---------- Formulare ---------- */
html input, html textarea, html select { font-family: var(--ed-sans); font-weight: 300; border-bottom-color: var(--ed-line); border-radius: 0; }
html input:focus, html textarea:focus { border-color: var(--ed-ink); }

/* ---------- FAQ ---------- */
html .faq details { border-top: 1px solid var(--ed-line); }
html .faq summary { font-family: var(--ed-serif); font-weight: 400; font-size: 1.3rem; color: var(--ed-ink); }

/* ---------- Fuss ---------- */
html footer { background: var(--ed-band); color: rgba(255,255,255,.75); border-top: 0; font-family: var(--ed-sans); font-weight: 300; letter-spacing: .06em; padding: 3.4rem 0; }
html footer a { color: rgba(255,255,255,.9); }

/* ---------- Fotobox-Seite: eigene Kopfleiste wie die Startseite ---------- */
html .navbar .nav-links a { font-family: var(--ed-sans); font-size: .72rem; letter-spacing: .22em; font-weight: 400; }
html .navbar .logo { font-family: var(--ed-sans); font-weight: 300; letter-spacing: .32em; font-size: 1rem; }
html .navbar .logo-subtitle { font-family: var(--ed-serif); font-style: italic; letter-spacing: .08em; text-transform: none; font-size: .85rem; }
html .stat strong, html .stat b { font-family: var(--ed-serif); font-weight: 300; }

/* ---------- Reportagen (portfolio.html) ---------- */
html .st-name { font-family: var(--ed-serif); font-weight: 300; text-transform: uppercase; letter-spacing: -.01em; }
html .st-kicker, html .st-chapter-no, html .st-chapter-time { font-family: var(--ed-sans); letter-spacing: .28em; font-weight: 400; }
html .st-chapter-title { font-family: var(--ed-serif); font-weight: 300; font-style: italic; }
html .st-intro, html .st-quote { font-family: var(--ed-serif); font-weight: 300; font-style: italic; }
html .st-card, html .st-card-img { border-radius: 0; box-shadow: none; }
html .st-card-name { font-family: var(--ed-serif); font-style: italic; font-weight: 400; }
html .st-card-meta { font-family: var(--ed-sans); letter-spacing: .24em; }

@media (max-width: 820px) {
  html h1, html .hero h1, html .page-hero h1 { font-size: clamp(1.7rem, 7.2vw, 2.7rem); max-width: 100%; overflow-wrap: break-word; }
  html .hero p.sub, html .page-hero p.sub { font-size: 1.1rem; }
  html .lead, html .lede { font-size: 1.25rem; }
}

/* Fusszeile besser lesbar */
html footer { color: rgba(255,255,255,.92); font-weight: 400; font-size: .86rem; }
html footer a { color: #fff; }
html footer p, html footer span, html footer li { color: rgba(255,255,255,.92); }