/* =================================================================
   LODDER-UNTERLAGEN GmbH — main.css
   Palette derived from the print catalogue: warm cream/ochre ground,
   sienna-brown wordmark, forest-green accents. High contrast.
   (Exact ochre number from the printer slots into --ochre later.)
   ================================================================= */

/* Slogan-Schrift, lokal ausgeliefert (kein Google-Fonts-Abruf, DSGVO). SIL OFL 1.1 */
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/great-vibes-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --cream:    #f4ecd8;
  --cream-2:  #fbf5e7;
  --paper:    #fffdf7;
  --ink:      #2a2218;
  --ink-soft: #5c5040;
  --brown:    #7c3f1b;
  --brown-d:  #5e2e12;
  --green:    #34512e;
  --green-d:  #25391f;
  --ochre:    #c2901f;
  --ochre-l:  #e7cd86;
  --line:     #dccca6;
  --line-2:   #c7b389;
  --bio:      #4b7a32;
  --danger:   #9a3412;

  --header-h: 96px;
  --wrap:     1180px;
  --radius:   7px;
  --shadow:   0 1px 3px rgba(42,34,24,.10), 0 6px 22px rgba(42,34,24,.07);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------- Hintergrund-Farbwelt (Bänder)
   Die großen Farbflächen (Hero, Footer) laufen über eigene Tokens, damit die
   Hintergrundfarbe an einer Stelle getauscht werden kann, ohne die grünen
   Akzente (Buttons, Tabellenköpfe, Links) mitzuziehen.

   Umschalten: data-bg am <html> — im Build über BG_THEME in build.mjs,
   zum Vergleichen im Browser über ?bg=natur | wasabi | dunkelgruen
   (die Wahl wird lokal gemerkt).

   natur  = RAL Design 120 80 30 „Naturgrün“  (LCh 80/30/120° → #bdcd95)
   wasabi = RAL Design 110 70 30 „Wasabigrün“ (LCh 70/30/110° → #abaf77)
   Die zweite Verlaufsstufe ist jeweils dieselbe Farbe, 10 L* dunkler.
   --------------------------------------------------------------------- */
:root, [data-bg="natur"] {
  --band:        #bdcd95;   /* RAL 120 80 30 Naturgrün */
  --band-2:      #a1b27b;   /* dieselbe Farbe, L* 70 */
  --band-ink:    var(--ink);
  --band-soft:   #4f4335;
  --band-accent: var(--brown-d);
  --band-link:   var(--brown-d);
  --band-link-h: var(--ink);
  --band-rule:   rgba(42,34,24,.22);
  --band-wash:   rgba(42,34,24,.07);
}
[data-bg="wasabi"] {
  --band:        #abaf77;   /* RAL 110 70 30 Wasabigrün */
  --band-2:      #91945e;   /* dieselbe Farbe, L* 60 */
  --band-ink:    var(--ink);
  --band-soft:   #453a2b;
  --band-accent: var(--brown-d);
  --band-link:   var(--brown-d);
  --band-link-h: var(--ink);
  --band-rule:   rgba(42,34,24,.24);
  --band-wash:   rgba(42,34,24,.07);
}
[data-bg="dunkelgruen"] {           /* die bisherige Fassung, zum Vergleich */
  --band:        var(--green-d);
  --band-2:      var(--green);
  --band-ink:    #fff;
  --band-soft:   #e8e2d2;
  --band-accent: var(--ochre-l);
  --band-link:   #f2e9d2;
  --band-link-h: #fff;
  --band-rule:   rgba(255,255,255,.18);
  --band-wash:   rgba(255,255,255,.10);
}

/* ----------------------------------------------------------- reset/base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brown); text-underline-offset: 2px; }
a:hover { color: var(--brown-d); }
h1, h2, h3 { line-height: 1.18; color: var(--ink); margin: 0 0 .5em; }
/* Alle Seitenüberschriften (h1) in derselben Größe wie die Abschnittsüberschriften (h2). */
h1, h2 { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem); }
h1 { letter-spacing: -.01em; }
.page-ueber-uns h1 { color: #4a3720; }
h2 { color: #4a3720; }
p { margin: 0 0 1rem; }
/* Blocksatz fuer den Fliesstext auf allen Seiten. Silbentrennung muss mit,
   sonst reisst der deutsche Blocksatz zu grosse Wortluecken. Kurze
   Auszeichnungszeilen (Eyebrow, Hinweise, Namen) bleiben linksbuendig. */
.section p,
.prose p,
.hero__box p,
.bracket p,
.infocard p,
.catcard__intro {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
p.eyebrow,
p.form__hint,
p.card__intro,
p.catcard__meta,
p.catalog__srcnote,
p.locator__zoom,
p.locator__cta,
.minilegend__panel p {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.site-main { min-height: 60vh; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: .6rem 1rem; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
.linklike { background: none; border: 0; color: var(--brown); text-decoration: underline; cursor: pointer; font: inherit; }

/* --------------------------------------------------------------- brand */
.brand { display: inline-flex; align-items: center; flex-direction: column; line-height: .92; text-decoration: none; letter-spacing: .02em; }
.brand__logo { display: block; height: 40px; width: auto; }
.brand__mark { display: block; height: 64px; width: auto; }
.brand__mark-top  { font: 800 44px/1 Arial, Helvetica, sans-serif; fill: #6e4f2e; }
.brand__mark-rule { fill: #6e4f2e; }
.brand__mark-word { font: 600 21.5px/1 Arial, Helvetica, sans-serif; fill: #2e4a33; }
.brand__mark-reg  { font: 600 11px/1 Arial, Helvetica, sans-serif; fill: #2e4a33; }
.brand--footer .brand__logo { height: auto; width: min(240px, 100%); border-radius: var(--radius); }

/* -------------------------------------------------- header (always pinned) */
/* Sticky, never hides on scroll, identical on every page — the customer's
   hard requirement (the competitor's header vanished on scroll). */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream-2);
  border-bottom: 2px solid var(--green);
  box-shadow: 0 1px 0 var(--line), 0 2px 10px rgba(42,34,24,.05);
}
.site-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); max-width: 1380px; }
.mainnav { margin-left: auto; }
.mainnav__list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.mainnav__list a {
  display: block; padding: .55rem .8rem; border-radius: 5px; white-space: nowrap;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .98rem;
  border-bottom: 3px solid transparent;
}
.mainnav__list a:hover { background: rgba(124,63,27,.08); color: var(--brown); }
.mainnav__list a.is-active { color: var(--brown); border-bottom-color: var(--ochre); }

/* Slogan rechts neben dem Logo — auf allen Sprachfassungen englisch. */
.brand-slogan {
  font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  font-size: 2.1rem; line-height: 1; color: var(--green);
  padding-top: .35rem;
  /* Einzige Stelle der Zeile, die nachgeben darf: wird es eng (v. a. beim
     längeren Bio-Slogan), bricht der Slogan zweizeilig um. */
  flex: 0 1 auto; text-wrap: balance;
  transition: opacity .25s ease;
}
.brand-slogan.is-swapping { opacity: 0; }
.site-header .brand, .mainnav, .site-header__aside { flex-shrink: 0; }
@media (max-width: 1320px) {
  .site-header__inner { gap: .9rem; }
  .brand-slogan { font-size: 1.7rem; }
  .mainnav__list a { padding-inline: .55rem; font-size: .94rem; }
}

.site-header__aside { display: flex; align-items: center; gap: .75rem; }
.langtoggle { display: flex; gap: .12rem; align-items: center; }
.langtoggle__item {
  font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-decoration: none;
  color: var(--ink-soft); padding: .2rem .35rem; border-radius: 4px; line-height: 1;
}
.langtoggle__item:hover { color: var(--brown); background: rgba(124,63,27,.08); }
.langtoggle__item.is-active { color: #fff; background: var(--green); }
.langtoggle__item.is-disabled { color: var(--line-2); cursor: not-allowed; }

.social-link { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.social-link svg { flex: none; }
.social-link--header { padding: .3rem; border-radius: 8px; }
.social-link--header:hover { background: rgba(214,36,159,.08); }

/* hamburger (mobile only) */
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 40px; padding: 0 9px; background: none; border: 1.5px solid var(--line-2);
  border-radius: 6px; cursor: pointer; }
.hamburger span { display: block; height: 2.5px; background: var(--green-d); border-radius: 2px; transition: transform .2s, opacity .2s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* --------------------------------------------------------- mobile drawer */
.drawer {
  position: fixed; top: var(--header-h); right: 0; z-index: 99;
  width: min(86vw, 340px); height: calc(100dvh - var(--header-h));
  background: var(--cream-2); border-left: 2px solid var(--green);
  box-shadow: -8px 0 30px rgba(42,34,24,.18);
  overflow-y: auto; padding: 1.2rem 1.3rem 3rem;
  transform: translateX(100%); transition: transform .24s ease;
}
.drawer.is-open { transform: translateX(0); }
.drawer__list, .drawer__sublist, .drawer__legal { list-style: none; margin: 0; padding: 0; }
.drawer__list a { display: block; padding: .7rem .2rem; font-size: 1.1rem; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.drawer__list a[aria-current] { color: var(--brown); }
.drawer__group { margin: 1.1rem 0; padding: .9rem; background: rgba(195,144,30,.10); border-radius: var(--radius); }
.drawer__heading { margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--green-d); font-weight: 800; }
.drawer__sublist a { display: block; padding: .4rem .2rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(199,179,137,.5); }
.drawer__sublist a:hover { color: var(--brown); }
.drawer__legal { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.drawer__legal a { font-size: .85rem; color: var(--ink-soft); }
.drawer__lang { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr)); gap: .35rem; }
.drawer__lang a, .drawer__lang span { font-weight: 700; font-size: .9rem; padding: .35rem .4rem; border: 1px solid var(--line-2); border-radius: 5px; text-decoration: none; color: var(--ink-soft); text-align: center; }
.drawer__lang a.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.drawer__lang .is-disabled { color: var(--line-2); }
.drawer-scrim { display: none; position: fixed; inset: var(--header-h) 0 0; background: rgba(37,57,31,.32); z-index: 98; border: 0; }
.drawer-scrim.is-open { display: block; }

/* ----------------------------------------------------------- components */
.btn { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 700;
  padding: .7rem 1.25rem; border-radius: 6px; border: 2px solid transparent; cursor: pointer; text-decoration: none; }
.btn--primary { background: var(--brown); color: #fff; border-color: var(--brown); }
.btn--primary:hover { background: var(--brown-d); color: #fff; }
.btn--ghost { background: transparent; color: var(--green-d); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--green); color: var(--green-d); background: rgba(52,81,46,.06); }
.btn--green { background: var(--green); color: #fff; border-color: var(--green); }
.btn--green:hover { background: var(--green-d); color: #fff; }

.chip { font: inherit; font-size: .9rem; font-weight: 600; padding: .4rem .85rem; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink-soft); cursor: pointer; }
.chip:hover { border-color: var(--green); color: var(--green-d); }
.chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }

.badge { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .06em; vertical-align: middle;
  padding: .12em .45em; border-radius: 4px; text-transform: uppercase; }
.badge--bio { background: var(--bio); color: #fff; }
.badge--import { background: var(--ochre-l); color: var(--brown-d); }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--lieferung { padding-block: clamp(1.25rem, 3vw, 2.25rem); }
.section--sortiment, .section--bio, .section--facts, .section--specialisation,
.section--instagram, .section--jobs, .section--kulturen { background: var(--cream-2); border-block: 1px solid var(--line); }
.bracket { padding: 1.6rem clamp(1.6rem, 5vw, 3.4rem); border: 3px solid var(--ochre); }
/* Über-uns section order was reshuffled (qualitaet, intro, specialisation, bio); keep the tint/light stripes alternating, starting with tint. */
.page-ueber-uns .section--qualitaet { background: var(--cream-2); border-block: 1px solid var(--line); }
.page-ueber-uns .section--bio { background: var(--cream); border-block: none; }
.lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 60ch; }
.lead--wide { max-width: 100ch; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 800; color: var(--green); margin: 0 0 .6rem; }

/* --------------------------------------------------------------- hero */
.hero { position: relative; background: var(--band);
  background-image: linear-gradient(120deg, var(--band) 0%, var(--band-2) 100%); }
.hero__grid { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 5vw, 3.6rem); }
.hero__box { color: var(--band-ink); }
.hero__box h1 { color: var(--band-ink); }
.hero__box .lead { color: var(--band-soft); }
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.hero__media { order: -1; margin: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--band-rule); background: var(--band-2); }
/* Das Bild verhält sich wie ein normales Element: die Breite steuert die Größe,
   die Höhe folgt dem Seitenverhältnis. Kein vh – das würde die Höhe an die
   Viewport-Höhe koppeln und beim Browser-Zoom (bewusst) konstant bleiben. */
.hero__media img { display: block; width: 100%; height: auto; }
.hero__fairs.fairs { display: none; }
/* Zweitbutton im Hero folgt der Bandfarbe (früher fest weiß im Markup). */
.hero .btn--ghost { color: var(--band-ink); border-color: var(--band-rule); }
.hero .btn--ghost:hover { color: var(--band-ink); border-color: var(--band-ink); background: var(--band-wash); }

@media (min-width: 901px) {
  .hero__grid { flex-direction: row; align-items: center; }
  .hero__box { flex: 1 1 auto; min-width: 0; }
  /* Bild bekommt einen größeren Breitenanteil aus der Textspalte und wird vollständig
     gezeigt (kein Zuschnitt); die Höhe folgt dem Seitenverhältnis. Da das Bild damit
     das höchste Element der Zeile ist, füllt es die volle Spaltenhöhe. */
  .hero__media { order: 0; flex: 0 0 auto; width: clamp(26rem, 50%, 42rem); }
}

@media (min-width: 1300px) {
  .hero__grid {
    max-width: none;
    width: calc(var(--wrap) + clamp(1.5rem, 4vw, 3rem) + clamp(70px, 8vw, 100px));
    margin-left: calc((100% - var(--wrap)) / 2);
  }
  .hero__box { flex: 1 1 auto; min-width: 280px; }
  .hero__fairs.fairs {
    display: grid; grid-template-rows: repeat(4, 1fr); gap: 3% 0;
    flex: 0 0 clamp(70px, 8vw, 100px); align-self: stretch;
    margin: 0; padding: 0;
  }
  /* Grid-Items dürfen unter ihre intrinsische Bildhöhe schrumpfen,
     sonst brechen die 1fr-Zeilen aus der (nun bildhohen) Spalte aus */
  .hero__fairs .fair { min-height: 0; min-width: 0; overflow: hidden; }
  .hero__fairs .fair img { width: 100%; height: 100%; object-fit: cover; }
}

/* fact strip — kompakt gehalten, tritt hinter Zertifizierungen zurück */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.facts__item { background: var(--cream-2); padding: .75rem 1rem; }
.facts__num { font-size: 1.25rem; font-weight: 800; color: var(--brown); line-height: 1; }
.facts__label { font-size: .82rem; color: var(--ink-soft); margin-top: .25rem; }

/* -------------------------------------------------- Messepräsenz (nur unterhalb der Hero-Fairs-Spalte) */
.profiling { background: var(--paper); border-bottom: 1px solid var(--line); padding: .85rem 0; }
.profiling__row { margin-inline: 5%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2rem; }
@media (min-width: 1300px) {
  .profiling { display: none; }
}
.fairs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.fair { line-height: 0; }
.fair img { height: 92px; width: auto; border-radius: 6px; border: 1px solid var(--line); }

/* -------------------------------------------------- media card (Über uns / split) */
.split--center { align-items: center; }
.mediacard { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.mediacard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mediacard--portrait { max-width: 240px; margin: 0 auto; }
.mediacard--portrait img { object-fit: contain; }
.mediacard__signature { padding: .8rem 1rem 1rem; background: var(--paper); border-top: 1px solid var(--line); text-align: center; }
.mediacard__signature img { display: inline-block; width: auto; max-width: 150px; height: auto; }
.mediacard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.mediacard-grid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }

/* Chronik: die Generationen als Bildpaar. Das Gruppenbild links ist der Blickfang;
   das Gründerporträt rechts bleibt schmaler, damit seine Unterkante nicht unter
   die des Gruppenbilds rutscht. Im Markup steht das Porträt zuerst, damit es
   auf dem Handy (untereinander) chronologisch vorne bleibt. */
.generations { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.2rem; margin-top: 1.6rem; align-items: start; max-width: 820px; }
.generation:first-child { grid-column: 2; grid-row: 1; }
@media (max-width: 700px) {
  .generation:first-child { grid-column: auto; grid-row: auto; }
  .generations { grid-template-columns: minmax(0, 1fr); }
  .generation:first-child { max-width: 260px; }
}
.generation { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--paper); }
.generation img { display: block; width: 100%; height: auto; }
.generation__cap { padding: .7rem 1rem .9rem; font-size: .84rem; line-height: 1.4; color: var(--ink-soft); border-top: 1px solid var(--line); }
.generation__cap strong { color: var(--ink); }

/* generic content cards / grid */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.card { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.card h3 { color: var(--green-d); }
.card--link { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
/* kompakte Kacheln: nur Titel, wenig Platz */
.cardgrid--tiles { display: flex; flex-wrap: wrap; gap: .9rem; }
.card--tile { padding: 1rem; display: flex; align-items: center; }
.card--tile h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
/* Sortiment-Uebersicht auf der Startseite: Bildkarte je Kultur.
   Struktur aus der zweiten Entwurfsfassung uebernommen, Farben/Abstaende
   kommen aus den Tokens dieses Projekts. */
.cardgrid--sort { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.1rem; margin-top: 1.8rem; }
.card--sort { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__image { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-bottom: 1px solid var(--line); }
.card__body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card--sort h3 { margin: .7rem 0 .45rem; font-size: 1.15rem; }
.tag { align-self: flex-start; display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  background: rgba(52,81,46,.10); color: var(--green-d); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.card__intro { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .9rem; }
.card__cta { margin-top: auto; font-weight: 800; color: var(--green); }
.card--link:hover .card__cta { color: var(--green-d); text-decoration: underline; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2rem; color: #4a3720; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .3rem; }
.section--fehlerseite { padding-block: clamp(3rem, 9vw, 6rem); }
.section--fehlerseite .fehlerseite__help { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; text-align: left; }
.callout { border-left: 4px solid var(--ochre); background: var(--cream-2); padding: 1rem 1.2rem; border-radius: 0 6px 6px 0; }

/* ============================================================ CATALOGUE */
.catalog-intro { padding-top: 2rem; }
.catalog-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2rem; align-items: start; padding-bottom: 4rem; }

/* desktop fixed left rail */
.crail { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
.crail__inner { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1rem 1.1rem; box-shadow: var(--shadow); }
.crail__title { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--green); font-weight: 800; }
.crail__list { list-style: none; margin: 0 0 .8rem; padding: 0; }
.crail__link { display: block; padding: .5rem .6rem; border-radius: 5px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .96rem; border-left: 3px solid transparent; }
.crail__link:hover { background: rgba(124,63,27,.08); color: var(--brown); }
.crail__link.is-active { background: rgba(195,144,30,.16); color: var(--brown-d); border-left-color: var(--ochre); }
.crail__doc { display: block; width: fit-content; margin-top: .3rem; font-size: .88rem; font-weight: 700; color: var(--green-d); text-decoration: none; }
.crail__doc:hover { color: var(--brown); }

/* tools */
.catalog__tools { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-bottom: 1.5rem; }
.catalog__search { flex: 1 1 260px; min-width: 0; padding: .65rem .9rem; font: inherit; border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--paper); color: var(--ink); }
.catalog__search:focus { border-color: var(--green); }
.catalog__filters { display: flex; gap: .4rem; }
.catalog__count { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.catalog__empty { padding: 2rem 0; font-size: 1.05rem; color: var(--ink-soft); }

/* category cards */
.catcard { position: relative; margin-bottom: 2.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.catcard__head { border-bottom: 2px solid var(--green); padding-bottom: .6rem; margin-bottom: 1.1rem;
  background: linear-gradient(90deg, rgba(195,144,30,.14), rgba(195,144,30,0)); border-radius: 6px 6px 0 0; padding: .8rem .9rem; }
.catcard__head--bio { background: linear-gradient(90deg, rgba(75,122,50,.18), rgba(75,122,50,0)); border-bottom-color: var(--bio); }
.catcard__title { margin: 0; color: var(--brown); }
.catcard__head--bio .catcard__title { color: var(--green-d); }
.catcard__meta { margin: .15rem 0 0; }
.catcard__latin { font-style: italic; color: var(--green-d); font-weight: 600; margin-right: .6rem; }
.catcard__sub { color: var(--ink-soft); font-size: .92rem; }
.catcard__intro { margin: .6rem 0 0; font-size: .95rem; color: var(--ink-soft); max-width: 70ch; }

.catgroup { margin-top: 1.3rem; }
.catgroup__title { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--green); font-weight: 800; margin: 0 0 .5rem; }

/* product table */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.ptable { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 540px; }
.ptable thead th { text-align: left; background: var(--green); color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: .55rem .8rem; font-weight: 700; white-space: nowrap; }
.ptable tbody td, .ptable tbody th { padding: .55rem .8rem; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.ptable tbody tr:nth-child(even of :not(.ptable__cont):not(.ptable__subhead)) { background: rgba(244,236,216,.5); }
.ptable__namecell { background: var(--cream-2); border-left: 3px solid var(--ochre); min-width: 220px; }
/* Spaltenbreiten: Unterlage-Spalte schmaler, die uebrigen drei gleichmaessig */
.ptable__namecol { width: 28%; }
.ptable thead th:not(.ptable__namecol) { width: 24%; }
.catcard__head--bio ~ .catgroup .ptable__namecell { border-left-color: var(--bio); }
.ptable__name { font-weight: 700; color: var(--ink); }
.ptable__common { display: block; font-size: .85rem; color: var(--ink-soft); font-weight: 400; margin-top: .1rem; }
.ptable__hint { display: block; font-size: .8rem; color: var(--green-d); font-style: italic; margin-top: .2rem; max-width: 34ch; }
.ptable__size { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable__only { color: var(--ink-soft); font-style: italic; }
.ptable__cont td { border-top: 1px dotted var(--line); }
/* Zwischenueberschrift nach Obstart innerhalb einer Tabelle */
.ptable tbody tr.ptable__subhead th { background: var(--cream-2); color: var(--green); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; padding: .5rem .8rem; border-top: 2px solid var(--green); }
.catcard__head--bio ~ .catgroup .ptable__subhead th { color: var(--green-d); border-top-color: var(--bio); }
.ptable tr.is-hidden { display: none; }

/* pick checkbox */
.pick { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.pick__cb { margin-top: .25rem; width: 17px; height: 17px; accent-color: var(--brown); flex: none; }

/* mini legend — toggle button in the category head; opens a full-width strip below it */
.minilegend__btn { position: absolute; top: .8rem; right: .9rem; list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .4rem .9rem; border-radius: 6px; background: var(--green); color: #fff;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.minilegend__btn::-webkit-details-marker { display: none; }
/* reserves the button's width (same text and metrics, invisible) so long category titles wrap before reaching it */
.catcard__head[data-legend]::before { content: attr(data-legend); float: right; visibility: hidden;
  margin-left: 1rem; padding: .4rem .9rem .4rem calc(.9rem + 1.1rem + .5rem); white-space: nowrap;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1rem; }
.minilegend__btn::before { content: "?"; display: inline-grid; place-items: center; flex: none;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--green);
  font-size: .72rem; font-weight: 800; letter-spacing: 0; }
.minilegend__btn:hover, .minilegend[open] .minilegend__btn { background: var(--green-d); }
.minilegend__panel { display: grid; grid-template-columns: fit-content(11rem) 1fr fit-content(11rem) 1fr;
  gap: .25rem 1rem; align-items: baseline; margin: 0;
  padding: .6rem .9rem; background: var(--cream-2); border: 1px solid var(--line); border-radius: 6px; }
.minilegend__item { display: contents; }
.minilegend__item dt { font-weight: 700; font-size: .8rem; color: var(--brown-d); }
.minilegend__item dd { margin: 0; font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .minilegend__panel { grid-template-columns: fit-content(11rem) 1fr; }
}
@media (max-width: 760px) {
  .minilegend { text-align: right; }
  .minilegend__btn { position: static; margin: -.4rem 0 .6rem; }
  .catcard__head[data-legend]::before { content: none; }
  .minilegend__panel { text-align: left; }
}

/* column tooltips — shown while hovering anywhere in a column (JS sets .is-open), content mirrors the mini legend */
.ptable thead th.thtip { position: relative; }
.thtip__label { cursor: help; text-decoration: underline dotted rgba(255,255,255,.65); text-underline-offset: 3px; }
.thtip__pop { display: none; pointer-events: none; position: absolute; top: calc(100% + 2px); left: .4rem; z-index: 40;
  min-width: 230px; max-width: 320px; padding: .55rem .75rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 6px; box-shadow: var(--shadow);
  font-size: .82rem; font-weight: 400; text-transform: none; letter-spacing: normal; white-space: normal; }
.thtip--end .thtip__pop { left: auto; right: .4rem; }
.thtip__item { display: block; padding: .1rem 0; }
.thtip__item b { color: var(--brown-d); }
.thtip:focus-within .thtip__pop, .thtip.is-open .thtip__pop { display: block; }

/* catalogue source note (was legend__note) */
.catalog__srcnote { margin: 0 0 1rem; font-size: .85rem; color: var(--ink-soft); font-style: italic; }

/* floating inquiry bar */
.merkbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; z-index: 90;
  display: flex; align-items: center; gap: 1rem; background: var(--cream-2);
  border: 2px solid var(--green); border-radius: 999px; padding: .55rem .65rem .55rem 1.3rem; box-shadow: var(--shadow); }
.merkbar__count { font-size: .95rem; color: var(--green-d); }
.merkbar__count strong { font-size: 1.15rem; color: var(--brown); }
.merkbar .btn { padding: .5rem 1rem; }

/* --------------------------------------------------------------- forms */
.form { display: grid; gap: 1rem; max-width: 640px; }
.form__row { display: grid; gap: .3rem; }
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label { font-weight: 600; font-size: .92rem; color: var(--green-d); }
.form .req { color: var(--danger); }
.form input, .form textarea, .form select { font: inherit; padding: .65rem .8rem; border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--paper); color: var(--ink); width: 100%; }
.form input:focus, .form textarea:focus { border-color: var(--green); }
.form textarea { min-height: 150px; resize: vertical; }
.form__hint { font-size: .85rem; color: var(--ink-soft); }
.form__note { background: var(--cream-2); border-left: 4px solid var(--ochre); padding: .9rem 1.1rem; border-radius: 0 6px 6px 0; font-size: .92rem; }

/* contact + info two-col */
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; }
.infocard { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.infocard h3 { color: var(--green-d); }
.infocard address { font-style: normal; line-height: 1.8; }

/* Standort: abstrakte Europakarte als Übersicht, darunter die zoombare
   Google-Maps-Karte als Vergrößerung desselben Punktes. */
.locator { margin-top: 1.1rem; }
.locator__overview { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #eaf0e0; }
.locator__overview img { display: block; width: 100%; height: auto; }
.locator__overview figcaption,
.locator__hint { padding: .7rem .9rem; font-size: .85rem; line-height: 1.45; color: var(--ink-soft); background: var(--paper); border-top: 1px solid var(--line); }
.locator__zoom { display: flex; align-items: center; gap: .7rem; margin: .7rem 0; color: var(--ink-soft); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.locator__zoom::before, .locator__zoom::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.locator__zoom span::after { content: " ↓"; }
.locator__detail figcaption { margin: 0; }
.locator__cta { margin: .9rem 0 0; }
/* Platzhalter der Zwei-Klick-Karte: gleiche Hoehe wie die Karte, damit beim
   Laden nichts springt. */
.mapconsent { min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.5rem; text-align: center; background: #eaf0e0; }
.mapconsent::before { content: ""; width: 34px; height: 46px; background: var(--green);
  -webkit-mask: url("../img/map-pin.svg") center / contain no-repeat; mask: url("../img/map-pin.svg") center / contain no-repeat; }
.locator .mapconsent__text { max-width: 34ch; margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); text-align: center; hyphens: manual; }

/* photos */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.gallery figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--cream-2); }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.section--kulturen .gallery img { aspect-ratio: 3/4; }
.gallery figcaption { padding: .7rem .9rem; font-size: .9rem; color: var(--ink-soft); }

/* links list */
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.linklist a { font-weight: 600; }

/* ------------------------------------- Galerie: kompakte Seiten-Rhythmik + Übersicht */
.page-galerie .section { padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.page-galerie .section--intro { padding-block: clamp(1.3rem, 3vw, 2rem); }
.overview { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.overview a { display: inline-block; padding: .45rem .9rem; border: 1.5px solid var(--line-2); border-radius: 999px;
  background: var(--paper); font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--green-d); }
.overview a:hover { border-color: var(--green); background: rgba(52,81,46,.06); color: var(--green-d); }

/* ------------------------------------- Galerie: Instagram-Kacheln */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.4rem 0; }
.ig-tile { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: var(--cream-2); transition: transform .15s, box-shadow .15s; }
.ig-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.ig-tile img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.ig-icon { flex: none; }
@media (max-width: 700px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------- Offene Stellen: Stellenliste + Vorteile */
.joblist { display: grid; gap: 1rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.job { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--ochre);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.3rem; }
.job__title { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--green-d); }
.job__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
.job__tag { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--brown-d);
  background: rgba(195,144,30,.16); border-radius: 999px; padding: .2rem .7rem; }
.job p { margin: 0 0 .6rem; }
.job p:last-child { margin-bottom: 0; }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.perks li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.perks strong { display: block; color: var(--green-d); margin-bottom: .2rem; }

/* ------------------------------------------------------------- footer */
.site-footer { background: var(--band); color: var(--band-soft); margin-top: 3rem; }
.site-footer a { color: var(--band-link); }
.site-footer a:hover { color: var(--band-link-h); }
.site-footer__inner { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: 2rem; padding-block: 2.6rem 2rem; }
.site-footer__contact { font-style: normal; font-size: .94rem; line-height: 1.55; }
.site-footer__line { display: block; }
.site-footer__heading { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--band-accent); font-weight: 800; margin-bottom: .6rem; }
.site-footer__legal, .site-footer__social { display: flex; flex-direction: column; gap: .45rem; font-size: .94rem; }
.site-footer__bar { border-top: 1px solid var(--band-rule); font-size: .84rem; color: var(--band-soft); }
.site-footer__bar .wrap { padding-block: .9rem; }
.site-footer__bar a { color: var(--band-link); }

/* =============================================================== mobile */
/* Logo + Slogan + Menü + Sprachwahl brauchen ~1220px — darunter wandert
   das Menü in den Drawer. */
@media (max-width: 1200px) {
  .mainnav, .site-header .langtoggle { display: none; }   /* nav moves into the drawer */
  .site-header__aside { margin-left: auto; }
  .hamburger { display: flex; }
}
@media (max-width: 900px) {
  .brand-slogan { font-size: 1.75rem; }
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .crail { display: none; }                                 /* left rail is desktop-only */
  .split { grid-template-columns: 1fr; gap: 1.6rem; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .form__row--2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --header-h: 78px; }
  body { font-size: 16px; }
  .brand__mark { height: 46px; }
  .site-header__inner { gap: .7rem; }
  .brand-slogan { font-size: 1.3rem; max-width: 7.5em; line-height: 1.05; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .merkbar { left: 1rem; right: 1rem; transform: none; justify-content: space-between; padding-left: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}