/* ==========================================================================
   Bluetenraum Melanie Schaper - main stylesheet
   Design direction: "Ruhige Eleganz" - cream paper, deep sage, thin type
   --------------------------------------------------------------------------
   Structure:
     1. Design tokens (colors, fonts, spacing)
     2. Web font (Raleway, self-hosted - see fonts/README note in ANLEITUNG.md)
     3. Base / reset
     4. Accessibility helpers
     5. Header + navigation
     6. Announcement banner
     7. Hero
     8. Content sections + category teasers
     9. Photo galleries
    10. Info blocks (opening hours / contact)
    11. Footer
    12. Legal pages
    13. Responsive breakpoints
    14. Print styles
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* Brand colors, sampled from the Bluetenraum logo */
  --green-deep:  #526140;  /* logo green - headings, footer, buttons */
  --green-mid:   #6b7659;  /* hover states */
  --green-soft:  #636d59;  /* muted labels, secondary text - WCAG AA on both creams */
  --cream:       #faf8f3;  /* page background */
  --cream-dark:  #f1eee5;  /* alternating section background */
  --blush:       #fdedeb;  /* announcement banner, subtle accents */
  --blush-text:  #7d4f47;  /* readable text on blush */
  --ink:         #333a29;  /* body text - high contrast on cream */
  --line:        #d8d5c9;  /* hairline borders */
  --white:       #ffffff;

  /* Typography */
  --font-main: "Raleway", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Generous sizes: the audience includes older visitors */
  --text-base: 1.125rem;   /* 18px body text */
  --text-small: 1rem;

  --content-width: 72rem;
  --gallery-item-min: 16rem;
}

/* 2. Web font ------------------------------------------------------------
   Raleway, self-hosted (GDPR-safe: no Google servers, no CDN).
   Licence: SIL Open Font License 1.1 - see fonts/OFL.txt.
   The filenames deliberately carry NO version number, so that replacing
   the files with a newer release never requires touching this CSS.
   See ANLEITUNG.md if you ever need to update them. */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-300-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;          /* echte Kursive - fuer .signature und <em> */
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 3. Base / reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-weight: 300;
  line-height: 1.3;
  color: var(--green-deep);
  margin: 0 0 0.75em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: 0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
h3 { font-size: 1.25rem; font-weight: 400; }

p { margin: 0 0 1em; }

a {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--green-mid); }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* 4. Accessibility helpers ------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--green-deep);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 5. Header + navigation -------------------------------------------------- */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0 0;
  text-align: center;
}

.site-header .logo {
  display: inline-block;
}
.site-header .logo img {
  width: min(20rem, 70vw);
  margin: 0 auto;
}

.site-nav {
  margin-top: 1.25rem;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;             /* wraps on small screens - no hamburger needed */
  justify-content: center;
  gap: 0.25rem 0.5rem;
}
.site-nav a {
  display: inline-block;
  padding: 0.75rem 1rem;       /* large tap targets */
  font-size: var(--text-small);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--green-deep);
  border-bottom: 3px solid transparent;
}
.site-nav a:hover {
  border-bottom-color: var(--green-soft);
}
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--green-deep);
  font-weight: 500;
}

/* 6. Announcement banner ("closed today" / holidays) ----------------------
   Content is set in js/site-config.js. The bar stays hidden when empty. */
.announcement {
  display: none;
  background: var(--blush);
  color: var(--blush-text);
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: var(--text-small);
  letter-spacing: 0.03em;
}
.announcement.is-visible { display: block; }

/* 7. Hero ------------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 3rem 0;
}
.hero-text p.lead {
  font-size: 1.2rem;
  color: var(--ink);
}
.hero-image img {
  width: 100%;
  aspect-ratio: 4 / 5;       /* Hochformat - passt zum Foto von Melanie */
  object-fit: cover;
}

.button {
  display: inline-block;
  border: 1px solid var(--green-deep);
  color: var(--green-deep);
  background: transparent;
  padding: 0.85rem 1.75rem;
  font-size: var(--text-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.button:hover {
  background: var(--green-deep);
  color: var(--white);
}

/* 8. Content sections + category teasers ---------------------------------- */
.section {
  padding: 3.5rem 0;
}
.section.alt {
  background: var(--cream-dark);
}

.section-label {
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green-soft);
  margin-bottom: 2rem;
}

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
}
.teaser {
  text-decoration: none;
  color: var(--ink);
}
/* Same white mat as the galleries - these tiles sit on the same cream
   background and do the same job, so they get the same treatment.
   The mat wraps the photo only: heading and description stay on the section
   background, so a tile still reads as one link with a caption underneath
   instead of a boxed-in card.
   Unlike the galleries these keep a uniform 4/3 crop on purpose - three
   navigation tiles of differing heights would look untidy, and the photos
   are chosen to survive the crop. */
.teaser img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--white);
  padding: 0.55rem;
  box-shadow: 0 1px 2px rgba(51, 58, 41, 0.07),
              0 8px 18px rgba(51, 58, 41, 0.06);
  transition: box-shadow 0.2s ease;
}
.teaser h3 {
  margin: 0.9rem 0 0.2rem;
  letter-spacing: 0.04em;
}
.teaser p {
  color: var(--green-soft);
  font-size: var(--text-small);
  margin: 0;
}
.teaser:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
/* The old rule faded the whole image on hover. With the white mat that would
   fade the mat and its shadow along with it, which reads as a glitch rather
   than as feedback - a slightly deeper shadow says "liftable" instead. */
.teaser:hover img,
.teaser:focus-visible img {
  box-shadow: 0 2px 4px rgba(51, 58, 41, 0.10),
              0 14px 28px rgba(51, 58, 41, 0.10);
}

/* Personal signature under the welcome text on the start page.
   Deliberately NO handwriting web font: the logo already carries a
   calligraphic element (the swash "B"), and a script face at body-text
   size would hurt readability for the older half of the audience.
   The personal note comes from italics, size and generous space. */
.signature {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: 46rem;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--green-deep);   /* same token as headings - AA on both creams */
}

/* 9. Photo galleries -------------------------------------------------------
   Add or remove a photo = add or remove one <figure> block in the HTML.
   The layout adapts automatically; nothing else needs to change.

   Column layout instead of a fixed grid, on purpose: every photo keeps its
   own aspect ratio. The former grid forced all of them into an identical
   3/4 box, which made the page monotonous AND cropped away more than 40%
   of the few landscape photos. CSS columns need no JavaScript and no build
   step, which keeps this maintainable by hand. */
.gallery {
  columns: var(--gallery-item-min);
  column-gap: 1.25rem;
  margin: 0;
  padding: 0;
}
/* Each photo sits on a white mat, like a mounted print. The cream page
   background alone gives too little separation - the mat plus a very soft
   shadow lifts the photos off the page without adding visible decoration.
   Deliberately NO polaroid-style wide bottom edge: the same rule set also
   styles the Trauerfloristik gallery, where a playful, nostalgic frame
   would clash with the tone of the page. */
.gallery figure {
  margin: 0 0 1.25rem;
  background: var(--white);
  padding: 0.55rem;
  box-shadow: 0 1px 2px rgba(51, 58, 41, 0.07),
              0 8px 18px rgba(51, 58, 41, 0.06);
  /* keep a photo from being torn across two columns */
  -webkit-column-break-inside: avoid;   /* Safari */
  break-inside: avoid;
}
.gallery img {
  display: block;
  width: 100%;
  height: auto;                 /* natural aspect ratio - no cropping */
}

/* 10. Info blocks (opening hours / contact) -------------------------------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}
.service-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.5rem 1.5rem 1.25rem;
}
.service-card h3 {
  margin-top: 0;
  letter-spacing: 0.04em;
}
.service-card p {
  font-size: var(--text-small);
  margin-bottom: 0.5rem;
}
.service-card p:last-child { margin-bottom: 0; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}
.info-block h2, .info-block h3 {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.hours-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 22rem;
}
.hours-table td {
  padding: 0.35rem 0;
  vertical-align: top;
}
/* Die Uhrzeit darf nie mitten im Wert umbrechen ("9:00 – 18:00" / "Uhr").
   In der schmalen Fusszeilenspalte passiert das sonst sofort. */
.hours-table td:last-child {
  text-align: right;
  white-space: nowrap;
  padding-left: 0.75rem;
}

/* Hinweis direkt ueber einer Oeffnungszeiten-Tabelle.
   Wird von js/site.js eingefuegt, sobald hoursNotice in
   js/site-config.js gefuellt ist - siehe ANLEITUNG.md.
   Die Tabelle steht sowohl auf hellem Grund (Info-Bloecke) als auch in
   der dunkelgruenen Fusszeile, deshalb zwei Fassungen. */
.hours-notice {
  max-width: 22rem;          /* buendig mit der Tabelle darunter */
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.8rem;
  background: var(--blush);
  color: var(--blush-text);
  border-left: 3px solid var(--blush-text);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* In der Fusszeile: kein rosa Kasten - der waere auf dem dunklen Gruen
   ein greller Block, und zwar auf jeder einzelnen Seite. Stattdessen
   helle Schrift mit Akzentlinie, damit es ruhig bleibt. */
.site-footer .hours-notice {
  background: none;
  color: #f3f5ee;
  border-left-color: rgba(255, 255, 255, 0.45);
  padding-left: 0.7rem;
}

/* Dauerhafter Zusatz UNTER der Tabelle (hoursFootnote).
   Bewusst ruhiger als der Hinweis darueber: kein Kasten, keine Linie -
   es ist eine Serviceinformation, keine Meldung. */
.hours-footnote {
  max-width: 22rem;
  margin: 0.85rem 0 0;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--green-soft);
}
.site-footer .hours-footnote {
  color: #dfe3d6;            /* wie der uebrige Fusszeilentext */
}

/* ---- ZEITLICH BEGRENZT: Eroeffnungs-Abschnitt (5.-8. August 2026) ----
   Nach dem 8. August 2026 kann dieser ganze Block geloescht werden,
   zusammen mit <section class="opening"> in index.html. */
.opening {
  background: var(--blush);
}
.opening-text {
  max-width: 46rem;          /* angenehme Lesebreite, wie im uebrigen Text */
}
.opening-text h2 {
  margin-top: 0;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.opening-text .lead {
  font-size: 1.2rem;
  color: var(--blush-text);
}
.opening-hours {
  max-width: 20rem;
  margin: 1.5rem 0;
}
.opening-hours caption {
  text-align: left;
  font-size: var(--text-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
  padding-bottom: 0.4rem;
}
.opening-text .signature {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
/* Die beiden Flyer-Seiten ueber die volle Breite - zwei A6-Hochformate
   nebeneinander in einer halben Seite waeren nur rund 260px breit und
   damit unlesbar. Der Inhalt steht ohnehin als echter Text darueber;
   die Bilder zeigen die Gestaltung. */
.opening-flyer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.opening-flyer figure {
  margin: 0;
}
.opening-flyer img {
  width: 100%;
  border: 1px solid var(--line);
}
/* ---- ENDE zeitlich begrenzter Block ---- */

address { font-style: normal; }

/* 11. Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--green-deep);
  color: #dfe3d6;
  margin-top: 3rem;
  padding: 2.5rem 0 1.5rem;
  font-size: var(--text-small);
}
.site-footer a {
  color: #f3f5ee;
}
.site-footer a:hover { color: var(--white); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.site-footer h2 {
  color: #f3f5ee;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}

/* 12. Legal pages ------------------------------------------------------------ */
.legal-content {
  max-width: 46rem;
}
/* rechtliches.html: the two links are the whole point of the page (it is the
   landing target of the Instagram bio link), so they sit at the very top and
   get button size for unmissable tap targets. */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}
.legal-content h2 { margin-top: 2em; }

/* 13. Responsive breakpoints -------------------------------------------------- */
@media (max-width: 46rem) {
  .hero {
    grid-template-columns: 1fr;
    padding: 2rem 0;
  }
  .hero-image { order: -1; }     /* photo first on small screens */
  .section { padding: 2.5rem 0; }
  /* Column layout picks the column COUNT from this width plus the gap, so the
     value has to stay well below half the container - otherwise the gallery
     drops to a single column and the page becomes endlessly long. */
  :root { --gallery-item-min: 8.5rem; }
  .gallery { column-gap: 0.75rem; }
  .gallery figure {
    margin-bottom: 0.75rem;
    padding: 0.4rem;
  }

  /* ZEITLICH BEGRENZT: Eroeffnungs-Abschnitt - Flyer untereinander */
  .opening-flyer {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* 14. Print styles ------------------------------------------------------------- */
@media print {
  .site-nav, .announcement, .hero-image, .gallery, .button, .site-footer .footer-grid { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-footer { background: none; color: #000; }
  .site-footer a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}