/* Rosen & Geschichten - Theme fuer mf-tebbs.de
   Farbpalette/Typografie 1:1 aus der Phase-1-Uebergangsseite uebernommen
   (manifests/files/kundenprojekte/mf-tebbs.de/statisch/style.css).
   Hero-Layout: eine zentrierte Glass-Card ueber dem Vollbild-Hintergrund,
   Navigation sitzt OBEN IN der Card (wie die urspruenglichen Tabs), keine
   eigene volle Kopfleiste. */

:root {
  --gold: #e8b976;
  --gold-soft: #cbb98f;
  --cream: #f0e6d2;
  --muted: #b8ac93;
  --dark-glass: rgba(20, 14, 10, 0.6);
  --border-gold: rgba(232, 185, 118, 0.35);
}

/* Webfont EB Garamond, selbst gehostet (05.09.2026, Wunsch der Kundin) -
   BEWUSST NICHT von Googles Servern eingebunden (siehe Google-Fonts-
   Abmahnproblematik, die wir vorab geprueft/ausgeschlossen hatten - das
   soll so bleiben). Font-Dateien liegen wie das Hintergrundbild NICHT in
   Git, sondern manuell im theme-eigenen fonts/-Ordner auf dem Server
   (siehe Anleitung/BACKLOG.md). font-display:swap vermeidet unsichtbaren
   Text waehrend des Ladens (zeigt kurz den Fallback, kein "FOIT"). */
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: "EB Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--cream);
  background-image: url('../img/hintergrund.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Hervorhebungen (Schrift-Hierarchie der Kundin, 05.09.2026): sparsam
   Semibold statt Bold - Groesse+Gewicht+Abstand statt vieler Extremwerte. */
strong, b {
  font-weight: 600;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Zentrale Hero-Card */
.card {
  width: 100%;
  /* Responsiv statt fester rem-Wert: auf grossen Monitoren wird die Box
     nicht uebermaessig breit, auf kleineren Bildschirmen bleibt trotzdem
     sichtbarer Hintergrund an den Raendern (User hatte 2560x1440, Ehefrau
     ein kleineres Display - bei 84rem fest fuellte die Box dort komplett
     den Viewport, der Hero-Effekt ging verloren). */
  max-width: min(60rem, 88vw);
  max-height: 90vh;
  overflow-y: auto;
  /* dunkler/weniger transparent als die restlichen Glass-Elemente
     (Splash-Button, CTA-Buttons) - User-Wunsch, 14.09.2026, nur die
     Haupt-Card betroffen, daher eigener Wert statt --dark-glass. */
  background: rgba(14, 10, 7, 0.88);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--border-gold);
  border-radius: 0.5rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
  padding: 2.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 185, 118, 0.5) rgba(20, 14, 10, 0.3);
}
.card::-webkit-scrollbar {
  width: 0.6rem;
}
.card::-webkit-scrollbar-track {
  background: rgba(20, 14, 10, 0.3);
  border-radius: 0.3rem;
}
.card::-webkit-scrollbar-thumb {
  background-color: rgba(232, 185, 118, 0.5);
  border-radius: 0.3rem;
}

/* Marke + Navigation, oben IN der Card (ersetzt die urspruenglichen Tabs) */
.brand {
  text-align: center;
  margin-bottom: 0.5rem;
}
.brand a {
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--gold);
}
.logo {
  display: block;
  max-width: 14rem;
  width: 55%;
  height: auto;
  margin: 0 auto 0.5rem;
}
.slogan {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
  margin-bottom: 1rem;
}

nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
  justify-content: center;
  border-bottom: 1px solid var(--border-gold);
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
}
nav.main-nav a {
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-align: center;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
/* Zusatzzeile in Reitern wie "Rosenblaetter (Newsletter)" - eigene Zeile
   statt inline in Klammern, macht den Reiter schmaler (06.09.2026). */
nav.main-nav a .nav-sub {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  opacity: 0.75;
}
nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  text-decoration: none;
}

.card h1 {
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--gold);
  margin-bottom: 1.25rem;
  text-align: center;
}
.card h2 {
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--gold);
  margin-top: 1.4rem;
  margin-bottom: 0.5rem;
}
.card p {
  line-height: 1.7;
  margin-bottom: 0.9rem;
}
.card ul {
  margin: 0.5rem 0 0.9rem 1.3rem;
}
.card li {
  line-height: 1.7;
  margin-bottom: 0.4rem;
}

.portrait {
  display: block;
  width: 9rem;
  height: 9rem;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--border-gold);
  margin: 0 auto 1.5rem;
}

/* Blog-/Kategorie-Uebersicht (Rosengarten) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.category-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-gold);
  border-radius: 0.5rem;
  padding: 1.25rem;
  text-align: center;
}
.category-card h3 {
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.category-card p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Appetizer-Liste auf der Rosengarten-Uebersicht (Titel + Textanfang) */
.post-feed {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-gold);
}
.post-feed-item {
  margin-bottom: 1.75rem;
}
.post-feed-item h3 {
  color: var(--gold);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 0.2rem;
}
.post-feed-item h3 a {
  color: inherit;
}
.post-feed-item .post-date {
  color: var(--muted);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.4rem;
}
.post-feed-item p {
  color: var(--cream);
  margin-bottom: 0;
}

/* Post-Grid innerhalb einer Kategorie */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.post-card {
  border: 1px solid var(--border-gold);
  border-radius: 0.4rem;
  padding: 0.85rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.post-card:hover {
  background: rgba(232, 185, 118, 0.08);
  border-color: var(--gold);
}
.post-card .post-title {
  color: var(--cream);
  display: block;
  margin-top: 0.4rem;
}
.post-card .post-date {
  color: var(--muted);
  font-size: 0.9rem;
  display: block;
  margin-top: 0.25rem;
}

/* News-Liste (schlichter als das Blog-Grid) */
.news-list {
  list-style: none;
  margin-top: 1.25rem;
}
.news-list li {
  border-left: 2px solid var(--border-gold);
  padding: 0.4rem 0 0.4rem 0.9rem;
  margin-bottom: 0.85rem;
}
.news-list .news-date {
  color: var(--muted);
  font-size: 0.9rem;
  display: block;
}

/* Galerie (Rosengalerie) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border-gold);
  border-radius: 0.3rem;
}
.gallery-item .artist {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

/* Einzelner Blogbeitrag */
.post-meta {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
}
.newsletter-teaser {
  margin-top: 2rem;
  padding: 1.1rem;
  border: 1px dashed var(--border-gold);
  border-radius: 0.4rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.back-link {
  display: inline-block;
  margin-top: 1.25rem;
}

/* Goldene CTA-Buttons fuer Verlinkungen im Fliesstext (User-Wunsch,
   14.09.2026), z.B. auf der Startseite zu den Unterseiten. Stil an
   #splash-enter angelehnt (laenglich, dezente Umrandung statt Vollton-
   Block, damit es nicht plump wirkt). */
.button-gold {
  display: inline-block;
  margin: 0.4rem 0 1.1rem;
  padding: 0.6rem 1.9rem;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--gold);
  background: var(--dark-glass);
  border: 1px solid var(--border-gold);
  border-radius: 2rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.button-gold:hover {
  background: var(--gold);
  color: #140e0a;
  border-color: var(--gold);
  text-decoration: none;
}

/* Rechtliche Links unten IN der Card statt eigener Seitenleiste (analog
   zum Wireframe: AGB/Impressum/Datenschutz sind selbst Unterseiten, keine
   fixen Footer-Icons) */
.legal-links {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-gold);
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
.legal-links a {
  margin: 0 0.4rem;
  color: var(--muted);
}
.legal-links a:hover {
  color: var(--gold);
}
.copyright {
  text-align: center;
  font-size: 0.9rem;
  color: rgba(240, 230, 210, 0.5);
  margin-top: 0.5rem;
}

/* Splash-Overlay auf der Startseite (User-Wunsch, 05.09.2026) - siehe
   index.php fuer die zugehoerige Bedingung/Klasse. Card ist anfangs
   unsichtbar+unklickbar, Splash liegt mit eigenem Button obendrauf; per
   Klick faedet der Splash weg und die Card ein (reines CSS, kein Reload). */
body.has-splash .card {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
body.has-splash.splash-dismissed .card {
  opacity: 1;
  pointer-events: auto;
}

#splash-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 0.6s ease;
}
body.splash-dismissed #splash-overlay {
  opacity: 0;
  pointer-events: none;
}

#splash-enter {
  font-family: "EB Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  background: var(--dark-glass);
  border: 1px solid var(--border-gold);
  border-radius: 2rem;
  padding: 0.85rem 2.5rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s, color 0.2s;
}
#splash-enter:hover {
  background: var(--gold);
  color: #140e0a;
}

/* Newsletter-Einbettung (phpList) auf der Rosenblaetter-Seite (05.09.2026) -
   Auf der Produktions-Domain (mf-tebbs.de) ist das iframe same-origin und
   das Resize-Script in index.php liest dann die tatsaechliche Inhaltshoehe
   aus. Auf der Test-Subdomain (bludit-test.mf-tebbs.de) ist das iframe
   eine ANDERE Origin als der eingebettete Inhalt (mf-tebbs.de) - der
   Browser verweigert JS-Zugriff auf contentWindow.document kategorisch
   (Same-Origin-Policy, nicht per Code umgehbar), das Resize-Script
   scheitert dort also immer lautlos. min-height deshalb grosszuegig fix
   gesetzt als Fallback fuers Testen auf der Subdomain; nach dem
   Docroot-Cutover auf die echte Domain (Phase 3) greift automatisch das
   echte Resize und dieser Wert wird zur reinen Untergrenze. */
.newsletter-embed iframe {
  display: block;
  width: 100%;
  min-height: 36rem;
  border: none;
  background: transparent;
}

@media (max-width: 30rem) {
  body {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 1.5rem 1rem;
  }
  .card {
    padding: 1.5rem;
    max-height: none;
  }
  nav.main-nav {
    gap: 0.75rem;
  }
  nav.main-nav a {
    font-size: 0.85rem;
  }
}