@import url("./fonts/fonts.css");

/* ============================================================
   Edelobstbrennerei Schulz - Design-Tokens

   Aufbau in zwei Ebenen:
   1. Markenfarben (--brand-*). Sie definieren die Farbwelt.
   2. Semantische Tokens (--bg, --text, ...). Sie leiten sich aus Ebene 1
      ab, im Rest der Datei wird ausschliesslich mit ihnen gearbeitet.

   Eine neue Farbwelt braucht damit nur Ebene 1, sonst nichts.
   Radius-System: durchgaengig 3px.
   ============================================================ */

:root {
  /* ---- Ebene 1: Markenfarben ----
     Nur diese sieben Werte bestimmen die Farbwelt. Alles Weitere leitet
     sich darunter davon ab. Ein anderer Grundton waere hier eine Sache
     von wenigen Zeilen. */
  --brand-deep:      #2e6b40;   /* satte Markenflaeche, z.B. Handwerk */
  --brand-deep-2:    #1d4a2b;   /* Kacheln, Fuss, erhoehte Flaechen */
  --brand-deep-3:    #10301c;   /* Seitengrund */
  --brand-scrim:     14 40 24;  /* RGB fuer Verlaeufe ueber Fotos */

  --brand-accent:      #a8cf3f; /* Akzentflaeche, traegt dunklen Text */
  --brand-accent-soft: #d8ecab; /* heller Akzent fuer Text und Linien */
  --brand-accent-on:   #16261c; /* Text auf der Akzentflaeche */

  /* ---- Ebene 2: semantische Tokens ----
     Die Seite laeuft durchgaengig im dunklen Schema, ein helles gibt es
     nicht. Alle Werte leiten sich weiterhin aus den Markenfarben ab. */
  --bg:          var(--brand-deep-3);
  --bg-sunken:   color-mix(in srgb, var(--brand-deep-3) 82%, #000);
  --bg-raised:   var(--brand-deep-2);
  --text:        #f4f7f2;
  --text-muted:  color-mix(in srgb, var(--brand-accent-soft) 42%, #b9c4bc);
  --text-invert: #ffffff;
  --text-invert-muted: rgba(255, 255, 255, 0.72);
  --line:        rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --line-invert: rgba(255, 255, 255, 0.16);
  --accent:       var(--brand-accent);
  --accent-hover: var(--brand-accent-soft);
  --accent-text:  var(--brand-accent-soft);   /* Akzent als Text */
  --accent-on:    var(--brand-accent-on);     /* Text auf Akzentflaeche */
  --accent-on-deep: var(--brand-accent-soft); /* Akzent auf dunkler Flaeche */

  --surface-deep:   var(--brand-deep-2);
  --surface-deep-2: color-mix(in srgb, var(--brand-deep-3) 70%, #000);
  --scrim:          var(--brand-scrim);

  /* Form */
  --r: 3px;
  --r-pill: 999px;

  /* Raster */
  --page: 1320px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;

  color-scheme: dark;
}

/* ============================================================
   Basis
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv05";
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Kein 300ms-Verzoegerungsklick auf Touchgeraeten, kein grauer Blitz beim Tippen */
a, button, summary, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

h1, h2, h3, h4 {
  font-family: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* Browser geben figure serienmaessig 40px Seitenrand mit. Ohne diesen
   Reset waeren alle Bilder schmaler als ihre Spalte. */
figure { margin: 0; }

::selection { background: var(--accent); color: var(--accent-on); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--r);
}
/* Auf den dunklen Flaechen braucht der Fokusring einen hellen Ton,
   sonst ist er im hellen Schema kaum zu sehen. */
.craft :focus-visible,
.footer :focus-visible,
.tile:focus-visible {
  outline-color: var(--accent-on-deep);
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-on);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Nur fuer Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Layout-Helfer */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  /* max() haelt den Inhalt auf Geraeten mit Aussparung aus der Ecke */
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}

section { position: relative; }

.section-pad { padding-block: clamp(4.5rem, 9vw, 8.5rem); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 1.25rem;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--text-muted);
  max-width: 58ch;
  line-height: 1.6;
}

.h-display {
  font-size: clamp(2rem, 0.7rem + 3vw, 3.75rem);
  font-weight: 800;
}
.h-section {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
}

.icon {
  width: 1em; height: 1em;
  flex: none;
  fill: currentColor;
  vertical-align: -0.125em;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  padding: 0.875rem 1.5rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font: 500 0.9375rem/1 "Inter Tight", sans-serif;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
              color 0.22s var(--ease), transform 0.12s var(--ease);
}
.btn .icon { font-size: 1.05em; transition: transform 0.28s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }

.btn--on-dark {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-invert);
  background: transparent;
}
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }

/* Anrufknopf in der Navigation: Ziffern etwas breiter gesperrt,
   damit die Nummer auf einen Blick als Nummer lesbar ist. */
.nav__call {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.nav__call .icon { font-size: 1em; }
.nav__call:hover .icon { transform: none; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease);
}
.link-arrow:hover { border-color: var(--accent-text); }
.link-arrow .icon { transition: transform 0.28s var(--ease); }
.link-arrow:hover .icon { transform: translate(2px, -2px); }

/* ============================================================
   Navigation
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
  line-height: 1;
}
/* Das Zeichen ist eine abfotografierte Zeichnung, freigestellt.
   Es steht bewusst klein, in der Groesse traegt es gut. */
.brand__logo {
  width: 26px;
  height: auto;
  flex: none;
}
.brand__text { display: flex; flex-direction: column; }
.brand__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand__sub {
  font-size: 0.6875rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.65rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  /* Mindestens 24px hohe Klickflaeche, siehe auch Fussbereich */
  display: inline-block;
  padding-block: 0.35rem;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: 0.75rem; }


.nav__burger {
  display: none;
  width: 38px; height: 38px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav__burger span {
  display: block; width: 17px; height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav__burger span::before,
.nav__burger span::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 1.5px; background: currentColor;
  transition: transform 0.28s var(--ease);
}
.nav__burger span::before { top: -5px; }
.nav__burger span::after { top: 5px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__links,
  .nav__actions .btn { display: none; }
  .nav__burger { display: grid; }

  .nav__drawer {
    position: fixed;
    inset: 72px 0 auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 1rem max(var(--gut), env(safe-area-inset-right)) 2rem max(var(--gut), env(safe-area-inset-left));
    display: grid;
    gap: 0.25rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
    z-index: 99;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
  .nav__drawer.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav__drawer a {
    text-decoration: none;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.125rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
  }
  .nav__drawer .btn { margin-top: 1rem; justify-content: center; }
}
@media (min-width: 901px) { .nav__drawer { display: none; } }

/* ============================================================
   Hero - asymmetrischer Split
   ============================================================ */

.hero {
  padding-top: clamp(7rem, 11vw, 9.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: clip;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__title {
  max-width: 21ch;   /* haelt die Zeile bei zwei Zeilen am Desktop */
}
.hero__title em {
  font-style: normal;
  color: var(--accent-text);
}
.hero__lead { margin-top: 1.75rem; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.hero__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-sunken);
}
/* Bildwechsler: alle Bilder liegen uebereinander, nur das aktive ist
   sichtbar. Ohne JavaScript bleibt schlicht das erste stehen.

   Beim Wechsel blendet das neue Bild ueber dem alten ein, das alte bleibt
   so lange stehen. Wuerden beide gleichzeitig ueberblenden, schiene fuer
   einen Moment der Seitenhintergrund durch und das Bild wirkte milchig. */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.6s var(--ease);
}
.hero__slide.is-on { opacity: 1; z-index: 2; }
.hero__slide.is-out { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity 0.3s linear; }
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  /* Leichte Korrektur des kalten Werkstattlichts. Bewusst neutral gehalten,
     damit sie zu jeder Farbwelt passt und neue Fotos nicht verfaelscht. */
  filter: saturate(1.02) contrast(1.05);
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(205deg,
    rgb(var(--scrim) / 0) 38%,
    rgb(var(--scrim) / 0.62) 100%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero__title { max-width: 100%; }
  .hero__media { aspect-ratio: 4 / 3; order: -1; }
  .hero__media img { object-position: 50% 42%; }
}

/* ============================================================
   Bildband

   Laeuft endlos von rechts nach links. Der Inhalt liegt zweimal im
   Markup, die Animation verschiebt genau um eine Haelfte, dadurch ist
   der Sprung nicht zu sehen. Beim Ueberfahren haelt das Band an,
   damit man ein Bild in Ruhe ansehen kann.
   ============================================================ */

.band {
  border-block: 1px solid var(--line);
  background: var(--bg-sunken);
  padding-block: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow: hidden;
  /* weiche Kanten links und rechts */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.band__track {
  display: flex;
  width: max-content;
  gap: var(--band-gap, 0.75rem);
  animation: band-run 64s linear infinite;
  will-change: transform;
}
.band:hover .band__track,
.band:focus-within .band__track { animation-play-state: paused; }

.band__row {
  display: flex;
  gap: var(--band-gap, 0.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.band__row li { flex: none; }

.band__row img {
  width: clamp(150px, 17vw, 240px);
  height: clamp(105px, 12vw, 168px);
  object-fit: cover;
  border-radius: var(--r);
  filter: saturate(0.96);
  transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}
.band__row img:hover { transform: scale(1.04); filter: saturate(1.08); }

@keyframes band-run {
  from { transform: translateX(0); }
  /* halbe Strecke plus der Abstand, der zwischen beiden Haelften liegt */
  to   { transform: translateX(calc(-50% - var(--band-gap, 0.75rem) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  .band__track { animation: none; }
  .band { overflow-x: auto; mask-image: none; }
  .band__row img:hover { transform: none; }
}

/* Auf dem Handy laeuft das Band nicht von selbst. Dort sind die Bilder
   deutlich groesser und werden gewischt, das spart Datenvolumen und man
   erkennt tatsaechlich etwas. Die zweite Reihe ist nur fuer den
   nahtlosen Durchlauf da und entfaellt deshalb. */
@media (max-width: 720px) {
  .band { mask-image: none; padding-block: 0.75rem; }
  .band__track {
    width: auto;
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gut);
    padding-inline: var(--gut);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .band__track::-webkit-scrollbar { display: none; }
  .band__row:nth-child(2) { display: none; }
  .band__row li { scroll-snap-align: start; }
  .band__row img {
    width: 74vw;
    height: 52vw;
  }
}

/* ============================================================
   Auszeichnungen
   ============================================================ */

.awards {
  border-block: 1px solid var(--line);
  background: var(--bg-sunken);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.awards__head {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  max-width: 24ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.awards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
}

.award {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  min-height: 260px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

/* Die Medaille liegt gross und blass hinter dem Text. */
.award__mark {
  position: absolute;
  left: 50%;
  top: 52%;
  translate: -50% -50%;
  width: 240px;
  height: 240px;
  z-index: -1;
  fill: var(--surface-deep);
  opacity: 0.08;
  transition: opacity 0.45s var(--ease), scale 0.6s var(--ease),
              rotate 0.6s var(--ease);
}

.award__year {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: auto;
}

.award__title {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.25;
  margin-top: 1.75rem;
}

.award__meta {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  line-height: 1.55;
  max-width: 34ch;
}

@media (hover: hover) {
  .award:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgb(var(--scrim) / 0.1);
  }
  .award:hover .award__mark {
    opacity: 0.16;
    scale: 1.08;
    rotate: -4deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .award, .award__mark { transition: none; }
  .award:hover { transform: none; }
  .award:hover .award__mark { scale: 1; rotate: 0deg; }
}

.awards__mehr { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 860px) {
  .awards__grid { grid-template-columns: 1fr; }
  .award { min-height: 0; }
  .award__mark { width: 190px; height: 190px; left: auto; right: 6%; translate: 0 -50%; }
}

/* ============================================================
   Sortiment - Bento
   ============================================================ */

.section-head {
  max-width: 46ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head p { margin-top: 1.25rem; }

/* Sechs gleich grosse Felder in Dreiteilung. Der Rhythmus kommt ueber
   Farbe und Zeichen, nicht ueber unterschiedliche Kachelgroessen. */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--r);
  overflow: hidden;
  min-height: clamp(270px, 24vw, 330px);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  text-decoration: none;
  color: var(--text-invert);
  background: var(--surface-deep);
  transition: transform 0.4s var(--ease);
}
/* Schichtung ohne negative z-index: Bild, Verlauf, Text - in dieser Reihenfolge */
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.7s var(--ease);
}
/* Der Verlauf muss kraeftig sein: einige Vorlagen sind sehr helle
   Werkstattfotos, auf denen weisse Schrift sonst nicht lesbar ist. */
.tile::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgb(var(--scrim) / 0.93) 0%,
    rgb(var(--scrim) / 0.82) 38%,
    rgb(var(--scrim) / 0.58) 68%,
    rgb(var(--scrim) / 0.3) 100%);
}
/* Das Piktogramm ist von der Textschicht ausgenommen, es liegt frei
   positioniert dahinter. */
.tile > *:not(img):not(.tile__pk) { position: relative; z-index: 2; }
.tile:hover img { transform: scale(1.045); }
.tile:hover { transform: translateY(-2px); }

/* ---- Aufklappbare Kacheln ---------------------------------------------
   Die Kachel ist ein details-Element: der sichtbare Teil steckt im
   summary, die Sortenliste klappt darunter auf. Ohne JavaScript, und
   die Tastaturbedienung bringt der Browser mit. */

details.tile { display: block; padding: 0; }

.tile__head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(270px, 24vw, 330px);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  cursor: pointer;
  list-style: none;              /* Dreieck weg, Firefox */
  position: relative;
  z-index: 2;
}
.tile__head::-webkit-details-marker { display: none; }
.tile__head:focus-visible { outline-offset: -4px; }

/* Im summary sind die Textbausteine inline-Elemente, sie brauchen
   deshalb ihre Blockdarstellung ausdruecklich. */
.tile__head > .tile__kicker,
.tile__head > .tile__desc,
.tile__head > .tile__more { display: block; }
.tile__head > .tile__more { width: fit-content; }

.tile__chevron { transition: rotate 0.3s var(--ease); }
details.tile[open] .tile__chevron { rotate: 180deg; }
details.tile[open] .tile__pk { opacity: 0.14; }

.sorts {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.75rem);
  display: grid;
  gap: 0.1rem;
}
.sorts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.sorts__award {
  flex: none;
  font-size: 0.8125rem;
  color: var(--accent-on-deep);
  font-variant-numeric: tabular-nums;
}

/* Auf den hellen Kachelvarianten brauchen Linie und Praedikat
   die dunklen Toene. */
.tile--tone-soft .sorts li,
.tile--tone-accent .sorts li { border-top-color: rgba(22, 38, 28, 0.18); }
.tile--tone-soft .sorts__award { color: var(--accent-text); }
.tile--tone-accent .sorts__award { color: color-mix(in srgb, var(--accent-on) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .tile__chevron { transition: none; }
}

/* ---- Piktogramm-Kacheln ----------------------------------------------
   Zwischenloesung bis eigene Produktfotos vorliegen: statt Fotos in
   unterschiedlicher Qualitaet ein einheitliches Zeichensystem. Alle
   Zeichen stammen aus derselben Icon-Familie (Phosphor, Strichstaerke
   "thin"), damit die sechs Kacheln als eine Gruppe lesbar sind.
   Sind die Fotos da, wird .tile__pk durch ein <img> ersetzt, sonst nichts. */

.tile__pk {
  position: absolute;
  right: 7%;
  top: 2.25rem;              /* alle Zeichen beginnen auf gleicher Hoehe */
  width: 132px;
  height: 132px;
  z-index: 0;
  color: currentColor;
  opacity: 0.26;
  pointer-events: none;
  transition: translate 0.6s var(--ease), opacity 0.4s var(--ease);
}
.tile__pk svg { width: 100%; height: 100%; fill: currentColor; }



.tile:hover .tile__pk { translate: -8px 0; opacity: 0.34; }

/* Farbstufen. Der Wechsel zwischen satt, dunkel, hell und Akzent gibt
   dem Raster Rhythmus, ohne dass ein zweites Gestaltungsmittel noetig ist. */
/* Geschenke schliessen die Reihe als breites Feld ab. Damit geht das
   Raster bei sieben Kategorien glatt auf, ohne Luecke. */
/* Schliesst das Raster buendig ab: fuellt bei drei Spalten die letzten zwei,
   bei zwei Spalten die ganze Zeile, einspaltig eine normale Kachel. */
.tile--wide { grid-column: span 2; }
.tile--wide .tile__head,
.tile--wide { min-height: clamp(190px, 16vw, 230px); }
@media (max-width: 620px) {
  .tile--wide { grid-column: auto; min-height: clamp(240px, 40vw, 280px); }
}

/* Bewusst nur reine Toene und keine Mischung aus Markenfarbe und Akzent:
   in mehreren Farbwelten stehen die beiden komplementaer zueinander,
   jede Mischung ergibt dort ein schlammiges Braun. */
.tile--tone-deep    { background: var(--surface-deep); }
.tile--tone-deeper  { background: var(--surface-deep-2); }
.tile--tone-accent {
  background: color-mix(in srgb, var(--accent) 88%, var(--surface-deep));
  color: var(--accent-on);
}
.tile--tone-accent .tile__kicker,
.tile--tone-accent .tile__desc { color: color-mix(in srgb, var(--accent-on) 76%, transparent); }
.tile--tone-accent .tile__more { color: var(--accent-on); }

/* Eine abgesetzte, ruhigere Kachel bricht die Flaeche auf. */
.tile--tone-soft {
  background: var(--bg-sunken);
  color: var(--text);
  border: 1px solid var(--line);
}
.tile--tone-soft .tile__kicker { color: var(--text-muted); }
.tile--tone-soft .tile__desc { color: var(--text-muted); }
.tile--tone-soft .tile__more { color: var(--accent-text); }
.tile--tone-soft .tile__pk { opacity: 0.22; color: var(--surface-deep); }
.tile--tone-soft:hover .tile__pk { opacity: 0.3; }

/* Kacheln ohne Foto brauchen den Abdunkler nicht. */
.tile--art::after { content: none; }

.tile__kicker {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.5rem;
}
.tile__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.tile__desc {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.6rem;
  max-width: 40ch;
  line-height: 1.55;
}
.tile__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-on-deep);
  margin-top: 1rem;
}
.tile__more .icon { transition: transform 0.28s var(--ease); }
.tile:hover .tile__more .icon { transform: translate(2px, -2px); }


@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
}

/* ============================================================
   Handwerk - dunkler Block (bewusster, einmaliger Farbwechsel)
   ============================================================ */

.craft {
  position: relative;
  overflow: hidden;          /* haelt die aufsteigenden Perlen im Abschnitt */
  background: var(--surface-deep);
  color: var(--text-invert);
}
.craft .wrap { position: relative; z-index: 1; }
.craft__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.craft__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
@media (max-width: 900px) { .craft__media { aspect-ratio: 4 / 3; } }
.craft__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.06) brightness(0.94);
}
.craft__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgb(var(--scrim) / 0.3), rgb(var(--scrim) / 0.1));
  mix-blend-mode: multiply;
}
.craft .h-section { color: var(--text-invert); }
.craft .eyebrow { color: var(--accent-on-deep); }
.craft__intro {
  color: var(--text-invert-muted);
  max-width: 52ch;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
}

.steps { margin-top: 2.75rem; display: grid; }
.step {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line-invert);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--line-invert); }
.step__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.015em;
  color: var(--text-invert);
}
.step__text {
  color: var(--text-invert-muted);
  font-size: 0.9688rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .craft__grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ============================================================
   Streuobst - Bildband + Kennzahlen
   ============================================================ */

.orchard__band {
  aspect-ratio: 21 / 8;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-sunken);
}
.orchard__band img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.orchard__body {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.orchard__text p + p { margin-top: 1.125rem; }

.figures { display: grid; gap: 1.75rem; }
.figure {
  display: grid;
  /* Feste erste Spalte: sonst beginnt die Textspalte je nach Breite der
     Zahl an anderer Stelle und die Eintraege springen gegeneinander. */
  grid-template-columns: 8.5rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.figure:last-child { border-bottom: 0; padding-bottom: 0; }
.figure__num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
/* Das Zeichen ersetzt in der dritten Zeile die Zahl und wird deshalb
   auf deren optische Groesse gebracht. */
.figure__num--icon {
  font-size: clamp(2.75rem, 2rem + 2.4vw, 3.5rem);
  width: 1em;
  height: 1em;
  color: var(--accent-text);
  align-self: center;
  justify-self: start;
}

.figure__label {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.figure__note {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-top: 0.25rem;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .orchard__body { grid-template-columns: 1fr; }
  .orchard__band { aspect-ratio: 16 / 10; }
}
/* Auf schmalen Displays steht die Zahl ueber der Beschriftung,
   nebeneinander wird die Textspalte zu schmal. */
@media (max-width: 620px) {
  .figure { grid-template-columns: 1fr; gap: 0.5rem; }
  .figure__num { line-height: 1; }
}

/* ============================================================
   Märkte
   ============================================================ */

.markets__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.markets__media { margin: 0; }
.markets__media img {
  width: 100%;
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.markets__caption {
  font-size: 0.8438rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .markets__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Geschichte
   ============================================================ */

.story { background: var(--bg-sunken); border-block: 1px solid var(--line); }
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.story__media-wrap { margin: 0; }
.story__media {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-raised);
}
.story__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.story__caption {
  font-size: 0.8438rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  line-height: 1.5;
}
.story__text p + p { margin-top: 1.25rem; }
.story__quote {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin: 2rem 0 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
}
.story__attr {
  display: block;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-top: 0.9rem;
}
@media (max-width: 860px) { .story__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Hofladen / Besuch
   ============================================================ */

.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.visit__media {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-sunken);
}
.visit__media img { width: 100%; height: 100%; object-fit: cover; }

.info-block + .info-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.info-block__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}
.info-block__label .icon { font-size: 1rem; color: var(--accent-text); }
.address { font-style: normal; font-size: 1.0625rem; line-height: 1.6; }
.address strong { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; letter-spacing: -0.01em; }

.contact-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-size: 1rem;
  transition: color 0.2s var(--ease);
}
.contact-list a:hover { color: var(--accent-text); }
.contact-list .icon { font-size: 1.05rem; color: var(--text-muted); }



@media (max-width: 860px) { .visit__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--surface-deep-2);
  color: var(--text-invert);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
/* Im dunklen Schema hat der Footer sonst dieselbe Farbe wie die Seite. */
.footer { border-top: 1px solid var(--line-invert); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-invert);
}
.footer__claim {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.footer__desc { color: var(--text-invert-muted); margin-top: 1rem; max-width: 40ch; font-size: 0.9375rem; }
.footer h3 {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
/* Klickflaechen mindestens 24px hoch, damit sie auch mit dem Finger
   sicher zu treffen sind. */
.footer a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--text-invert);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s var(--ease);
}
.footer a:hover { color: var(--accent-on-deep); }
.footer__bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8438rem;
  color: var(--text-invert-muted);
}
.footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__age {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line-invert);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.85rem;
}

@media (max-width: 1000px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__claim { grid-column: span 2; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } .footer__claim { grid-column: span 1; } }

/* ============================================================
   Scroll-Reveal
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ============================================================
   Bewegung

   Vier Ebenen, alle dezent und alle unter prefers-reduced-motion
   abgeschaltet:
   1. Farbschleier, die im Hintergrund sehr langsam wandern
   2. Perlen, die im Kopfbereich aufsteigen (Destillat, Secco)
   3. Die Zeichen in den Kacheln wandern beim Scrollen mit
   4. Feines Korn ueber der ganzen Seite, gibt der Flaeche Material
   ============================================================ */

/* ---- 1. Farbschleier ---- */
.veil {
  position: fixed;
  inset: -18vmax;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  filter: blur(64px) saturate(1.1);
}
.veil span {
  position: absolute;
  border-radius: 50%;
  /* bewusst zurueckhaltend: der Schleier liegt hinter dem Fliesstext und
     darf dessen Kontrast nicht spuerbar senken */
  opacity: 0.32;
  mix-blend-mode: multiply;
  will-change: transform;
}
.veil .v1 {
  width: 46vmax; height: 46vmax;
  background: radial-gradient(circle at 35% 35%, var(--brand-accent), transparent 66%);
  top: -4vmax; left: -6vmax;
  animation: veil-a 34s var(--ease) infinite alternate;
}
.veil .v2 {
  width: 40vmax; height: 40vmax;
  background: radial-gradient(circle at 50% 50%, var(--brand-deep), transparent 64%);
  top: 26vmax; right: -8vmax;
  animation: veil-b 42s var(--ease) infinite alternate;
}
.veil .v3 {
  width: 34vmax; height: 34vmax;
  background: radial-gradient(circle at 50% 50%, var(--brand-accent), transparent 62%);
  bottom: -10vmax; left: 24vmax;
  animation: veil-c 38s var(--ease) infinite alternate;
}
@keyframes veil-a { to { transform: translate(7vmax, 6vmax) scale(1.12); } }
@keyframes veil-b { to { transform: translate(-6vmax, 5vmax) scale(0.92); } }
@keyframes veil-c { to { transform: translate(5vmax, -6vmax) scale(1.1); } }

.veil span { mix-blend-mode: screen; opacity: 0.16; }

/* ---- 2. Aufsteigende Perlen ---- */
.pearls {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Helle Perlen auf der dunklen Werkstattflaeche. */
.pearls span {
  position: absolute;
  bottom: -6%;
  width: var(--s, 10px);
  height: var(--s, 10px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: radial-gradient(circle at 34% 30%,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.06) 58%,
    transparent 70%);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
  animation: rise var(--t, 15s) linear var(--delay, 0s) infinite;
  opacity: 0;
  will-change: transform;
}
/* Die Strecke ist in Viewport-Hoehen angegeben. Prozentwerte wuerden sich
   auf die Perle selbst beziehen und damit fast keine Bewegung ergeben. */
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  75%  { opacity: 0.55; }
  100% { transform: translateY(-92vh) translateX(var(--drift, 12px)); opacity: 0; }
}

/* ---- 3. Zeichen wandern beim Scrollen ----
   Ueber eine Scroll-Zeitleiste, damit nichts pro Frame in JavaScript
   gerechnet wird. Browser ohne Unterstuetzung zeigen die Kachel ruhig. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tile__pk {
      animation: pk-drift linear both;
      animation-timeline: view();
      animation-range: entry 10% exit 90%;
    }
    @keyframes pk-drift {
      from { transform: translateY(26px) rotate(-3deg); }
      to   { transform: translateY(-26px) rotate(3deg); }
    }
  }
}
/* Der Hover liegt auf der inneren Ebene, damit er die Scroll-Bewegung
   nicht ueberschreibt. */
.tile__pk svg { transition: translate 0.45s var(--ease); }
.tile:hover .tile__pk svg { translate: -10px 0; }

/* ---- 4. Korn ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---- Zaehlende Kennzahlen ---- */
.figure__num[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .veil, .pearls { display: none; }
  .veil span, .pearls span { animation: none; }
  .tile:hover .tile__pk svg { translate: 0; }
  body::after { opacity: 0.18; }
}

/* ============================================================
   Bildansicht (Lightbox)

   Basiert auf dem nativen dialog-Element. Escape zum Schliessen,
   Fokusfalle und die Sperre des Hintergrunds bringt der Browser mit.
   Ohne JavaScript bleiben die Bilder schlicht Bilder, es geht dann
   nichts kaputt.
   ============================================================ */

.band__item {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r);
  overflow: hidden;
}

.lb {
  width: min(94vw, 1180px);
  max-width: none;
  max-height: 92dvh;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--bg-raised);
  color: var(--text);
  overflow: visible;
}
.lb::backdrop {
  background: rgb(var(--scrim) / 0.82);
  backdrop-filter: blur(3px);
}

.lb__figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  max-height: 92dvh;
}
.lb__figure img {
  width: 100%;
  max-height: calc(92dvh - 4.5rem);
  object-fit: contain;
  background: var(--bg-sunken);
}

.lb__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  border-top: 1px solid var(--line);
}
.lb__count {
  flex: none;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

.lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.lb__btn:hover { background: var(--bg-sunken); }
.lb__btn:active { transform: scale(0.94); }

.lb__close { top: -14px; right: -14px; }
.lb__nav { top: calc(50% - 3rem); }
.lb__prev { left: -14px; }
.lb__next { right: -14px; }

/* Auf schmalen Displays ist ausserhalb des Bildes kein Platz,
   dort liegen die Schaltflaechen innen. */
@media (max-width: 720px) {
  .lb { width: 96vw; }
  .lb__close { top: 8px; right: 8px; }
  .lb__prev { left: 8px; }
  .lb__next { right: 8px; }
  .lb__btn { background: color-mix(in srgb, var(--bg-raised) 88%, transparent); }
  .lb__caption { flex-direction: column; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lb__btn { transition: none; }
}

/* ============================================================
   Kategorieseiten
   ============================================================ */

.kat-head {
  padding-top: clamp(7rem, 11vw, 9rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.kat-head__title { margin-top: 0.25rem; }
.kat-head .lead { margin-top: 1.5rem; }

/* Pfad zur Orientierung */
.krumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}
.krumen a { text-decoration: none; padding-block: 0.3rem; }
.krumen a:hover { color: var(--accent-text); }
.krumen span[aria-current] { color: var(--text); font-weight: 500; }

/* Die Galerie der Kategorieseite laeuft nicht, sie steht.
   Auf der Startseite ist das Band ein Blickfang, hier waeren
   wandernde Bilder neben einer Produktliste nur unruhig. */
.band--kat {
  background: transparent;
  border-block: 0;
  padding-block: 0;
  mask-image: none;
  overflow: visible;
}
/* Die Galerie folgt demselben Raster wie der uebrige Seiteninhalt. */
.band--kat .band__track {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
  animation: none;
  display: grid;
}
.band--kat .band__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}
.band--kat .band__row img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.band--kat .band__item { width: 100%; }
@media (max-width: 860px) {
  .band--kat .band__row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Produktliste ---- */

.produkte {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.produkt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.produkt__name {
  display: inline;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.3;
}
.produkt__award {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 0.15em;
}
.produkt__meta {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-top: 0.3rem;
}

.produkt__groessen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: none;
}
.produkt__groesse {
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 0.3rem 0.65rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .produkt { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ---- Anfrageformular ---- */

.anfrage {
  background: var(--bg-sunken);
  border-block: 1px solid var(--line);
}
.anfrage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.anfrage__intro {
  color: var(--text-muted);
  margin-top: 1.25rem;
  max-width: 46ch;
  line-height: 1.6;
}

.form { display: grid; gap: 1.25rem; }
.form__feld { display: grid; gap: 0.4rem; }
.form__feld label {
  font-size: 0.9375rem;
  font-weight: 500;
}
.form__feld input {
  font: inherit;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s var(--ease);
}
.form__feld input:hover { border-color: var(--text-muted); }
.form__feld input:focus-visible { border-color: var(--accent-text); }
.form__feld input:user-invalid {
  border-color: #a33a26;
}
.form__hinweis { font-size: 0.8125rem; color: var(--text-muted); }

.form__recht {
  font-size: 0.8438rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 44ch;
}
.form__recht a { color: var(--accent-text); }

.form .btn { justify-self: start; }

.form__meldung {
  border-left: 2px solid var(--accent);
  padding: 0.75rem 0 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.form__meldung a { color: var(--accent-text); }

@media (max-width: 860px) {
  .anfrage__grid { grid-template-columns: 1fr; }
}

/* ---- Weiter im Sortiment ---- */

.weiter { padding-block: clamp(3rem, 6vw, 5rem); }
.weiter__titel {
  font-family: "Inter Tight", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.weiter__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.weiter__liste a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.weiter__liste a:hover {
  border-color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.weiter__liste .icon { font-size: 0.875rem; color: var(--text-muted); }

/* ============================================================
   Rechtstexte
   ============================================================ */

.rechtstext { max-width: 68ch; }
.rechtstext h2 {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext address, .rechtstext ul {
  color: var(--text-muted);
  line-height: 1.65;
}
.rechtstext address { font-style: normal; }
.rechtstext ul { padding-left: 1.1rem; margin: 0.5rem 0 0; }
.rechtstext li { margin-bottom: 0.35rem; }
.rechtstext a { color: var(--accent-text); }
.rechtstext .lead { color: var(--text-muted); margin-bottom: 2rem; }

/* Was noch fehlt, steht abgesetzt am Ende. Bei Pflichtangaben ist eine
   sichtbare Luecke ehrlicher als eine geratene Angabe. */
.offen {
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--bg-sunken);
}
.offen h2 { margin-top: 0; font-size: 1.0625rem; }

/* ============================================================
   Angebote
   ============================================================ */

.angebote { background: var(--bg-sunken); border-block: 1px solid var(--line); }

.angebote__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
}

.angebot {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raised);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
@media (hover: hover) {
  .angebot:hover { border-color: var(--accent); transform: translateY(-2px); }
}

.angebot__titel {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.angebot__text {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.angebote__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.angebote__hinweis { color: var(--text-muted); font-size: 0.9375rem; }

@media (max-width: 1000px) { .angebote__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .angebote__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .angebot { transition: none; }
  .angebot:hover { transform: none; }
}

/* Steht ueber der Liste, wenn alle Sorten dieselben Groessen haben */
.groessen-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* Verweise auf die sozialen Netzwerke im Fussbereich */
.footer__sozial a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.footer__sozial .icon { font-size: 1.15rem; opacity: 0.75; }
.footer__sozial a:hover .icon { opacity: 1; }

/* ============================================================
   Navigation: Aufklapp-Menue "Über uns"
   Auf dem Desktop oeffnet es per Hover, Tastaturfokus und Klick;
   auf dem Handy klappt es im Schubladen-Menue per details/summary.
   ============================================================ */
.nav__item-sub { position: relative; }

.nav__subtoggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text-muted);
  padding-block: 0.35rem;
  transition: color 0.2s var(--ease);
}
.nav__subtoggle:hover,
.nav__item-sub:hover .nav__subtoggle,
.nav__item-sub:focus-within .nav__subtoggle { color: var(--text); }

.nav__caret { font-size: 0.8em; transition: transform 0.2s var(--ease); }
.nav__item-sub:hover .nav__caret,
.nav__item-sub:focus-within .nav__caret,
.nav__subtoggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Unsichtbare Bruecke, damit der Zeiger den Spalt zum Panel ueberqueren kann */
.nav__item-sub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.8rem;
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  margin-top: 0.7rem;
  min-width: 210px;
  list-style: none;
  margin-inline: 0;
  padding: 0.4rem;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgb(var(--scrim) / 0.4);
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 120;
}
.nav__item-sub:hover .nav__sub,
.nav__item-sub:focus-within .nav__sub,
.nav__subtoggle[aria-expanded="true"] + .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__sub a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__sub a:hover { background: var(--bg-sunken); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__caret { transition: none; }
}

/* Schublade: "Über uns" als aufklappbare Gruppe (details/summary) */
.drawer__sub { border-bottom: 1px solid var(--line); }
.drawer__sub summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__sub summary::-webkit-details-marker { display: none; }
.drawer__sub summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform 0.2s var(--ease);
}
.drawer__sub[open] summary::after { transform: rotate(-135deg); }
.drawer__sub-inner { display: grid; padding-bottom: 0.4rem; }
.nav__drawer .drawer__sub-inner a {
  padding-left: 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 0;
}

/* ============================================================
   Verkostung: eigener Feature-Block auf der Startseite
   ============================================================ */
.verkostung { background: var(--bg-sunken); border-block: 1px solid var(--line); }
.verkostung__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.verkostung__fakten {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
}
.verkostung__fakten li { border-top: 2px solid var(--accent); padding-top: 0.6rem; }
.verkostung__fakten strong {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.05;
  color: var(--text);
}
.verkostung__fakten span { display: block; margin-top: 0.3rem; color: var(--text-muted); font-size: 0.875rem; }
.verkostung__cta {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.verkostung__hinweis { color: var(--text-muted); font-size: 0.9375rem; }
.verkostung__media {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
}
.verkostung__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .verkostung__grid { grid-template-columns: 1fr; }
  .verkostung__media { order: -1; }
}
@media (max-width: 440px) { .verkostung__fakten { grid-template-columns: 1fr; } }

/* Angebote in drei Spalten (nach dem Herausloesen der Verkostung) */
.angebote__grid--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .angebote__grid--drei { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .angebote__grid--drei { grid-template-columns: 1fr; } }

/* ============================================================
   Presse-Seite (presse.html)
   ============================================================ */
.presse-jahr { padding-block: clamp(2rem, 4vw, 3rem); }
.presse-jahr:first-child { padding-top: 0; }
.presse-jahr + .presse-jahr { border-top: 1px solid var(--line); }
.presse-jahr__kopf {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.presse-jahr__zahl {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.presse-jahr__anlass {
  color: var(--accent-on-deep);
  opacity: 0.85;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.presse-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.presse-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  max-width: 80ch;
}
.presse-item__body { display: grid; gap: 0.35rem; min-width: 0; }

/* Einheitliche Vorschau des Ausschnitts, oben ausgerichtet, oeffnet die
   Bildansicht. Gleiche Groesse und gleicher Beschnitt lassen die schiefen
   Handyfotos ruhiger und einheitlich wirken. */
.presse-thumb {
  width: clamp(116px, 22vw, 168px);
  padding: 0;
  border: 1px solid var(--line-strong);
  background: #e9e4d7;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.presse-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (hover: hover) {
  .presse-thumb:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgb(var(--scrim) / 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .presse-thumb { transition: none; }
  .presse-thumb:hover { transform: none; }
}
@media (max-width: 620px) {
  .presse-item { grid-template-columns: 1fr; }
  .presse-thumb { width: clamp(116px, 42vw, 156px); }
}
.presse-item__blatt {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--text);
  font-size: 0.9375rem;
}
.presse-item__datum { color: var(--text-muted); font-weight: 400; }
.presse-item__titel { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.25; }
.presse-item__text { color: var(--text-muted); line-height: 1.6; }
.presse-item__zitat {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-style: italic;
}
.presse-item__cite { display: block; margin-top: 0.3rem; font-style: normal; font-size: 0.875rem; color: var(--text-muted); }
.presse-item__cite::before { content: "— "; }

/* ============================================================
   Auszeichnungen - Zeitleiste (auszeichnungen.html)

   Zwei Spalten: Jahr links, Inhalt rechts. Die durchgehende Linie ist
   die linke Kante des Inhaltsblocks, der Knoten ein Punkt darauf. So
   bleibt die Linie unabhaengig von der Jahresbreite immer buendig.
   ============================================================ */
.timeline { list-style: none; margin: 0; padding: 0; }

.tl-item {
  display: grid;
  grid-template-columns: minmax(3.5rem, 6rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}

.tl-item__jahr span {
  position: sticky;
  top: 6rem;
  display: inline-block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.tl-item__body {
  position: relative;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--line-strong);
}
.tl-item__body::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.35rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}

.tl-item__quelle {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-on-deep);
  opacity: 0.85;
}
.tl-item__titel {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  margin-top: 0.35rem;
}
.tl-item__unter {
  color: var(--accent-text);
  margin-top: 0.45rem;
  font-size: 0.9375rem;
}
.tl-item__text {
  color: var(--text-muted);
  margin-top: 0.85rem;
  max-width: 62ch;
  line-height: 1.6;
}

.tl-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.tl-award {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.tl-award__name { font-weight: 500; }
.tl-award__note {
  color: var(--text-muted);
  margin-left: 0.4rem;
  font-size: 0.9375rem;
}

/* Medaillen-Plakette, drei Metalltoene */
.medaille {
  flex: none;
  display: inline-block;
  min-width: 3.6rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r);
  border: 1px solid;
  translate: 0 -0.05em;
}
.medaille--gold   { color: #e9c86a; border-color: rgba(233, 200, 106, 0.42); background: rgba(233, 200, 106, 0.09); }
.medaille--silber { color: #d2d8de; border-color: rgba(210, 216, 222, 0.36); background: rgba(210, 216, 222, 0.07); }
.medaille--bronze { color: #d79c70; border-color: rgba(215, 156, 112, 0.40); background: rgba(215, 156, 112, 0.09); }

/* Die beiden Staatsehrenpreise heben sich als Karte ab */
.tl-item--gross .tl-item__body {
  background: var(--bg-sunken);
  border-left-width: 3px;
  border-left-color: var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.tl-item--gross .tl-item__body::before { width: 12px; height: 12px; left: -7px; top: clamp(1.35rem, 3vw, 2.1rem); }
.tl-item--gross .tl-item__titel { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); }

@media (max-width: 640px) {
  .tl-item { grid-template-columns: 1fr; gap: 0.6rem; padding-block: clamp(1.5rem, 6vw, 2.25rem); }
  .tl-item__jahr span { position: static; }
  .tl-award { flex-wrap: wrap; gap: 0.5rem; }
}

/* ============================================================
   WordPress-Anpassungen
   Alles oberhalb dieser Marke ist die eingefrorene Vorlage
   (site/assets/styles.css). Hier steht nur, was WordPress
   zusätzlich braucht — bewusst wenig.
   ============================================================ */

/* Die Kopfleiste sitzt fixiert am oberen Rand. Mit eingeblendeter
   WP-Adminleiste rutscht sie darunter. */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
  body.admin-bar .nav__drawer { inset: 118px 0 auto; }
}

/* Gruppen-Blöcke sind reine Träger der eigenen Klassen und dürfen
   kein eigenes Layout mitbringen. */
.wp-block-group { min-height: 0; }

/* Bildfiguren aus core/image behalten ihre Rahmenklassen aus der
   Vorlage (functions.php nimmt nur wp-block-image weg). figure hat
   oben bereits margin: 0, es braucht keine weitere Regel. */

/* Sprungziele nicht unter der fixierten Kopfleiste verschwinden
   lassen. Die Vorlage setzt das bereits für ihre Sektionen; die
   Regel hier fängt Anker ab, die der Editor zusätzlich vergibt. */
[id] { scroll-margin-top: 90px; }

/* Zeitleiste, seit der Admin Stationen selbst anlegt: Die Jahreszahl
   ist jetzt ein Absatz statt eines span (sonst wäre sie im Editor
   nicht bearbeitbar). Die Vorlage zielt auf das span-Element, deshalb
   hier dieselbe Regel für den Absatz. */
.tl-item__jahr p {
  position: sticky;
  top: 6rem;
  display: inline-block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .tl-item__jahr p { position: static; }
}

/* Name und Notiz der Medaillenzeile sind eigene Flex-Kinder geworden
   (der Inline-Hüllspan der Vorlage ist im Editor nicht bearbeitbar).
   Das Flex-gap von 0.85rem ersetzt den alten Textfluss; die Notiz
   stand in der Vorlage aber nur 0.4rem neben dem Namen — der negative
   Rand stellt genau diesen Abstand wieder her. */
.tl-award__name + .tl-award__note { margin-left: calc(0.4rem - 0.85rem); }
}

/* ============================================================
   Maerkte - Terminliste
   Kam am 19.08. dazu, als die ersten Markttermine vorlagen. Datum
   traegt die Akzentfarbe, Ort und Uhrzeit ordnen sich unter.
   ============================================================ */
.termine {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 52ch;
}
.termin {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
}
.termin:last-child { border-bottom: 1px solid var(--line); }
.termin__datum {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  color: var(--accent-text);
}
.termin__was { font-weight: 500; }
.termin__zeit { color: var(--text-muted); font-size: 0.9375rem; }
.termin__zeit { color: var(--text-muted); font-size: 0.9375rem; }

/* ============================================================
   Galerie - Themen-Bloecke (galerie.html, seit 19.08.)
   ============================================================ */
.galerie-block { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.galerie-block + .galerie-block { border-top: 1px solid var(--line); }
.galerie-block__titel { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.galerie-block__satz { color: var(--text-muted); margin-top: 0.5rem; }
.galerie {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
}
.galerie figure {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  aspect-ratio: 4 / 3;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }