/* Blumenladen-Demo: drei Stile und die eigenen Bausteine.
   Gemeinsamer Aufbau steht in ../_kern/bausteine.css. */

/* ══ Stile ══════════════════════════════════════════════ */

html[data-stil="landhaus"] {
  --bg: #f4efe3; --bg-alt: #ebe3d0; --flaeche: #fbf9f3;
  --text: #24331f; --text-leise: #4d5845; --linie: #d4cab2;
  --akzent: #3d5233; --akzent-text: #ffffff; --hervor: #4a6439;
  --schrift-titel: 'Cormorant Garamond', Georgia, serif;
  --schrift-text: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --radius-bild: 3px; --radius-knopf: 3px;
  --titel-gewicht: 500; --titel-gross: clamp(2.75rem, 9vw, 4.75rem);
}

html[data-stil="zart"] {
  --bg: #fbf8f6; --bg-alt: #f5ece8; --flaeche: #ffffff;
  --text: #3b2f2f; --text-leise: #66524e; --linie: #e7d6cf;
  --akzent: #8a5850; --akzent-text: #ffffff; --hervor: #8a5850;
  --schrift-titel: 'Instrument Serif', Georgia, serif;
  --schrift-text: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --radius-bild: 12px; --radius-knopf: 999px;
  --titel-gewicht: 400; --titel-gross: clamp(3rem, 11vw, 5.25rem);
}

html[data-stil="natur"] {
  --bg: #f1f0ea; --bg-alt: #e5e4da; --flaeche: #fafaf6;
  --text: #1f231c; --text-leise: #4a4f43; --linie: #cdcbbe;
  --akzent: #1f231c; --akzent-text: #f1f0ea; --hervor: #52602a;
  --schrift-titel: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --schrift-text: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --radius-bild: 10px; --radius-knopf: 8px;
  --titel-gewicht: 600; --titel-gross: clamp(2.6rem, 10vw, 4.75rem);
}

/* ══ Blumen-eigene Bausteine ════════════════════════════ */

/* Anlässe */
.anlass-raster { display: grid; gap: 28px; margin-top: 32px; }
.anlass img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-bild); margin-bottom: 16px; }
.anlass h3 { font-size: 1.625rem; margin-bottom: .3em; }
.anlass p { color: var(--text-leise); margin: 0; }
.anlass-trauer {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; margin-top: 40px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: calc(var(--radius-bild) + 6px);
  padding: 20px;
}
.anlass-trauer img { width: 96px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-bild); }
.anlass-trauer h3 { font-size: 1.625rem; margin-bottom: .3em; }
.anlass-trauer p { color: var(--text-leise); }
@media (max-width: 699px) {
  /* Wischreihe wie das Friseur-Team */
  .anlass-raster { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    margin-inline: -20px; padding: 0 20px 8px; scrollbar-width: none; gap: 16px; }
  .anlass-raster::-webkit-scrollbar { display: none; }
  .anlass { flex: 0 0 72%; scroll-snap-align: start; }
}
@media (min-width: 700px) {
  .anlass-raster { grid-template-columns: repeat(3, 1fr); }
  .anlass-trauer { grid-template-columns: 200px 1fr; gap: 32px; padding: 28px; align-items: center; }
  .anlass-trauer img { width: 200px; }
}

/* Diese Woche frisch */
.frisch-raster { display: grid; gap: 32px; align-items: center; }
.frisch-bild { margin: 0; }
.frisch-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-bild); }
.frisch-liste { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.frisch-liste li { padding: 6px 14px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); font-size: .9375rem; }
@media (min-width: 900px) { .frisch-raster { grid-template-columns: .9fr 1.1fr; gap: 64px; } }

/* Lieferung */
.lieferung-raster { display: grid; gap: 24px; }
.orte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; hyphens: auto; overflow-wrap: break-word; }
.orte li {
  padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: calc(var(--radius-bild) + 4px); font-weight: 600;
}
@media (min-width: 900px) { .lieferung-raster { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }

/* ══ Formsprache je Stil ════════════════════════════════ */

/* Landhaus: zentriert, Fotos wie Polaroids */
[data-stil="landhaus"] .start-text { text-align: center; }
[data-stil="landhaus"] .start-satz { margin-inline: auto; }
[data-stil="landhaus"] .start-knoepfe { justify-content: center; }
[data-stil="landhaus"] .ueberschrift-klein { letter-spacing: .26em; }
[data-stil="landhaus"] .start-bild img,
[data-stil="landhaus"] .frisch-bild img,
[data-stil="landhaus"] .gutschein-bild img,
[data-stil="landhaus"] .anlass img {
  border: 8px solid #ffffff; box-shadow: 0 6px 22px rgba(60, 50, 30, .14);
}
[data-stil="landhaus"] .start-bild img { border-width: 10px; transform: rotate(-1.2deg); }
[data-stil="landhaus"] .galerie-raster img { border: 6px solid #ffffff; box-shadow: 0 3px 12px rgba(60, 50, 30, .12); }
[data-stil="landhaus"] .galerie-raster img:nth-child(odd) { transform: rotate(-1deg); }
[data-stil="landhaus"] .galerie-raster img:nth-child(even) { transform: rotate(1deg); }
@media (prefers-reduced-motion: reduce) { [data-stil="landhaus"] .start-bild img { transform: none; } }
@media (min-width: 900px) {
  [data-stil="landhaus"] .start-text { text-align: left; }
  [data-stil="landhaus"] .start-knoepfe { justify-content: flex-start; }
  [data-stil="landhaus"] .start-satz { margin-inline: 0; }
}

/* Hell & zart: großer Bogen, kursive Serif, viel Luft */
[data-stil="zart"] .start-text { text-align: center; }
[data-stil="zart"] .start-satz { margin-inline: auto; }
[data-stil="zart"] .start-knoepfe { justify-content: center; }
[data-stil="zart"] .start h1 em { font-style: italic; }
[data-stil="zart"] .start-bild img { border-radius: 999px 999px var(--radius-bild) var(--radius-bild); }
[data-stil="zart"] .anlass img, [data-stil="zart"] .frisch-bild img { border-radius: 999px 999px var(--radius-bild) var(--radius-bild); }
[data-stil="zart"] h2 { font-size: clamp(2.25rem, 7vw, 3.5rem); }
[data-stil="zart"] .ueberschrift-klein { color: var(--hervor); letter-spacing: .2em; }
[data-stil="zart"] .marke-zeichen { background: #a9b9a4; color: #2c3a2a; font-family: var(--schrift-titel); }
@media (min-width: 900px) {
  [data-stil="zart"] .start-text { text-align: left; }
  [data-stil="zart"] .start-knoepfe { justify-content: flex-start; }
  [data-stil="zart"] .start-satz { margin-inline: 0; }
}

/* Natur modern: klare Grotesk, Raster, Olive */
[data-stil="natur"] h1, [data-stil="natur"] h2 { letter-spacing: -.025em; line-height: 1.02; }
[data-stil="natur"] .start h1 em { font-style: normal; color: var(--hervor); display: inline; }
[data-stil="natur"] .ueberschrift-klein { font-weight: 700; letter-spacing: .22em; color: var(--text); }
[data-stil="natur"] .kopf-name { font-family: var(--schrift-titel); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 1rem; }
[data-stil="natur"] .marke-zeichen { border-radius: 8px; }
[data-stil="natur"] .galerie-raster { grid-template-columns: repeat(2, 1fr); }
[data-stil="natur"] .galerie-raster img:first-child,
[data-stil="natur"] .galerie-raster img:last-child { grid-column: span 2; aspect-ratio: 2 / 1; }
[data-stil="natur"] .frisch-liste li { border-radius: 6px; border-left: 3px solid var(--hervor); }
@media (min-width: 900px) {
  [data-stil="natur"] .galerie-raster { grid-template-columns: repeat(4, 1fr); }
  [data-stil="natur"] .galerie-raster img:first-child { grid-row: span 2; grid-column: span 2; aspect-ratio: 1; }
  [data-stil="natur"] .galerie-raster img:last-child { aspect-ratio: 2 / 1; }
}