/* ==========================================================================
   Öffentliches Schaufenster

   Redaktionelle Anmutung, keine Werkzeug-Optik: viel Weißraum, ein
   Serifentitel, gesperrte Kleinbuchstaben für die Rubriken, ruhige Grautöne.
   Ein Bestattungsbedarf verkauft nicht mit Lautstärke.

   Bewusst KEIN JavaScript und keine nachgeladene Schrift. Was nicht geladen
   werden muss, kann nicht fehlen — und eine Schrift von einem fremden Server
   überträgt die IP jedes Besuchers dorthin.
   ========================================================================== */

:root {
  --grund:       #ffffff;
  --flaeche:     #fafafa;
  --linie:       #e8e6e3;
  --text:        #26292d;
  --text-leise:  #7c8087;
  --text-zart:   #a8acb2;
  --akzent:      #3d5a80;
  --breite:      1120px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 .6rem; }

/* --- Rücksprung zum Profil ---------------------------------------------- */
.ruecksprung {
  border-bottom: 1px solid var(--linie);
  padding: .9rem 1.5rem;
}
.ruecksprung a {
  max-width: var(--breite); margin: 0 auto; display: block;
  font-size: .875rem; color: var(--text-leise);
}
.ruecksprung a:hover { color: var(--text); }

.blatt { max-width: var(--breite); margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }

/* --- Titelblock ---------------------------------------------------------- */
.titelblock { text-align: center; max-width: 44rem; margin: 0 auto 2.5rem; }

/* Gesperrte Kleinbuchstaben — die Rubrikzeile soll ordnen, nicht schreien. */
.kicker {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-leise);
  margin: 0 0 .5rem;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: .01em;
  margin: 0 0 1rem;
}

.vorspann {
  color: var(--text-leise);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0;
}

/* --- Rubriken ------------------------------------------------------------ */
.rubriken {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--linie);
  margin-top: 2.5rem;
}
.rubrik {
  padding: .4rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-leise);
}
.rubrik:hover { border-color: var(--text-zart); color: var(--text); }
.rubrik-aktiv {
  background: var(--text); border-color: var(--text); color: #fff;
}

/* --- Aufmacher ----------------------------------------------------------- */
.aufmacher {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  padding-bottom: 4rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--linie);
}
.aufmacher-bild img { width: 100%; }
.aufmacher-text h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.45;
  margin: 0 0 1rem;
  color: var(--akzent);
}
.aufmacher-text h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }

.zeile {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-zart);
  margin: 0;
}

/* --- Raster -------------------------------------------------------------- */
/*
   Die Kacheln zeigen zunächst nur das Bild. Text und Zahlen erscheinen beim
   Überfahren auf einem dunklen Schleier.

   WICHTIG — und im Entwurf nicht enthalten: Reines "beim Überfahren" schließt
   zwei Gruppen aus.

     * Auf Telefon und Tablet gibt es kein Überfahren. Dort wäre der Text
       niemals sichtbar. Deshalb: Wo der Zeiger nicht schweben kann
       (`hover: none`), steht der Schleier dauerhaft.
     * Wer mit der Tastatur navigiert, schwebt ebenfalls nicht. Deshalb zeigt
       auch `:focus-visible` den Schleier.

   Ohne diese beiden Ergänzungen wäre die Seite auf dem Telefon eine Wand aus
   Bildern ohne jede Erklärung — und gerade dort wird sie am häufigsten
   geöffnet, weil der Verweis aus dem Instagram-Profil kommt.
*/
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem 1.75rem;
}

.eintrag {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--flaeche);
}
.eintrag img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.schleier {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  padding: 1.6rem;
  text-align: center;
  color: #fff;
  /* Dunkel genug, dass heller Text auf JEDEM Bild lesbar bleibt — auch auf
     den weißen Sargausstattungen, bei denen ein leichter Schleier nicht
     genügen würde. */
  background: rgba(26, 29, 34, .74);
  opacity: 0;
  transition: opacity .18s ease;
}
.eintrag:hover .schleier,
.eintrag:focus-visible .schleier { opacity: 1; }

.schleier .kicker { color: rgba(255, 255, 255, .78); margin: 0; }
.schleier-text {
  font-size: .95rem;
  line-height: 1.6;
  max-width: 22rem;
}
.schleier-fuss {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .78);
  margin-top: .3rem;
}
.zahl { margin: 0 .55rem; white-space: nowrap; }

/* Geräte ohne Zeiger: Der Schleier bleibt stehen, sonst gäbe es dort nie Text. */
@media (hover: none) {
  .schleier {
    opacity: 1;
    justify-content: flex-end;
    text-align: left;
    align-items: flex-start;
    padding: 1.1rem;
    background: linear-gradient(to top,
                rgba(26, 29, 34, .88) 0%,
                rgba(26, 29, 34, .72) 45%,
                rgba(26, 29, 34, 0) 100%);
  }
  .schleier-text { font-size: .88rem; }
}

/* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne Überblendung. */
@media (prefers-reduced-motion: reduce) {
  .schleier { transition: none; }
}

.leer { text-align: center; color: var(--text-leise); padding: 4rem 0; }

/* --- Einzelner Beitrag --------------------------------------------------- */
.beitrag { max-width: 46rem; margin: 0 auto; }
.beitrag > img { width: 100%; margin-bottom: 2rem; }
.beitrag h1 { font-size: 2.1rem; text-align: left; }
.bildtext {
  white-space: pre-wrap;
  font-size: 1.02rem;
  line-height: 1.8;
  margin: 1.5rem 0 2.5rem;
}

.weitere {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

/* --- Produkte ------------------------------------------------------------ */
.produkte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.produkt {
  border: 1px solid var(--linie);
  padding: 1.4rem;
  display: grid;
  gap: .4rem;
  align-content: start;
}
.produkt:hover { border-color: var(--text-zart); }
.produkt strong { font-weight: 500; font-size: 1rem; line-height: 1.45; }
.preis {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  margin-top: .3rem;
}
.knopf {
  margin-top: .9rem;
  padding: .7rem 1.2rem;
  border: 1px solid var(--text);
  text-align: center;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.produkt:hover .knopf { background: var(--text); color: #fff; }

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.4rem;
  margin: 3rem 0 1rem;
}

.winzig { font-size: .78rem; color: var(--text-zart); line-height: 1.6; }

/* --- Fuß ----------------------------------------------------------------- */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 2.5rem 1.5rem 3.5rem;
  text-align: center;
}
.fuss p { max-width: 44rem; margin: 0 auto .8rem; }
.fuss a {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-leise);
  margin: 0 .9rem;
}
.fuss a:hover { color: var(--text); }

/* --- Kleine Bildschirme --------------------------------------------------- */
@media (max-width: 820px) {
  .blatt { padding: 2.5rem 1.25rem 3.5rem; }
  h1 { font-size: 2.2rem; }
  .aufmacher { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2.5rem;
               margin-bottom: 2.5rem; }
  .raster { gap: 2.5rem 1.5rem; }
  .rubriken { padding: 1.5rem 0 2rem; margin-top: 1.75rem; }
  .fuss a { display: inline-block; margin: .25rem .7rem; }
}

/* Dunkle Systemeinstellung wird bewusst NICHT übernommen: Die Seite zeigt
   Produktfotos vor hellem Hintergrund, und ein dunkles Umfeld verfälscht die
   Farbwirkung von Stoffen — genau das, worauf es hier ankommt. */

/* Merken-Verweis — zurückhaltend, kein fremder Baustein. */
.merken {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--text-leise);
}
.merken:hover { border-color: var(--text-zart); color: var(--text); }