/* JUKon eSG – Basis-Stylesheet
   "Lokaler Marktplatz"-Design: warm, editorial, handgemacht wirkend. Die Marken-
   Grüntöne kommen jetzt aus der unten definierten Palette; die --color-*-Variablen
   bleiben als Alias erhalten, damit Dashboard/Formulare/Tabellen unverändert
   funktionieren und trotzdem zur neuen Palette passen. */

:root {
  /* --- Lokaler-Marktplatz-Palette (Design-Tokens, siehe Design-Vorgabe) --- */
  --bg: #f6efe0;
  --bg-alt: #efe4c9;
  --card: #fffaf0;
  --card-line: #e7dab9;
  --ink: #231d12;
  --ink-soft: #5c5540;
  --ink-faint: #8b8367;
  --green-light: #a9ea5d;
  --green-mid: #80c244;
  --green-dark: #3f6a24;
  --ivory: #fff6e7;
  --clay: #bd6a3d;
  --clay-soft: #f1ddc4;

  /* --- Alias auf die alte Variablenwelt (Dashboard, Formulare, Tabellen) --- */
  --color-primary: var(--green-dark);
  --color-primary-dark: #2c4f19;
  --color-brand-light: var(--green-light);
  --color-brand: var(--green-mid);
  --color-accent: var(--clay);
  --color-bg: var(--bg);
  --color-surface: var(--card);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-border: var(--card-line);
  --color-danger: #b3261e;
  --color-success: #2e7d32;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(35, 29, 18, 0.08);
  --max-width: 1160px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
}

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

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--ink);
}
h1 { font-weight: 800; }
p { margin: 0 0 1em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 12px;
}

.section-intro { max-width: 68ch; color: var(--ink-soft); font-size: 1.05rem; }
.section-note { max-width: 68ch; color: var(--ink-faint); font-size: 0.92rem; margin-top: 32px; }
.section-cta { margin-top: 28px; }
.section-alt { background: var(--bg-alt); }

/* Handgezeichnet wirkender Wellen-Trenner zwischen Abschnitten */
.wavy-divider { display: block; width: 100%; height: 20px; }
.wavy-divider path { stroke: var(--card-line); }
.wavy-divider--green path { stroke: var(--green-mid); }
.wavy-divider--clay path { stroke: var(--clay); }

/* --- Header / Navigation --- */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-text);
}
.logo img { border-radius: 8px; }
.logo:hover { text-decoration: none; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
}
.main-nav a.active,
.main-nav a:hover { color: var(--green-dark); text-decoration: none; }

.btn-nav {
  background: var(--color-primary);
  color: var(--ivory) !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
}
.btn-nav:hover { background: var(--color-primary-dark); }

.cart-link { position: relative; }
.cart-badge {
  background: var(--color-accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 1px 6px;
  margin-left: 4px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-text);
}

/* --- Layout helpers --- */

.hero {
  background: var(--bg-alt);
  padding: 60px 0 0;
}
.hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 40px;
}
.hero-copy { flex: 1 1 480px; max-width: 640px; }
.hero-copy h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  margin: 0.2em 0 0.5em;
}
.hero-copy h1 em { font-style: italic; color: var(--green-dark); }
.hero-copy p { color: var(--ink-soft); font-size: 1.08rem; max-width: 58ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.hero-stamp { flex: 0 0 auto; padding-top: 4px; }

.hero-featured { flex: 0 0 auto; width: 320px; max-width: 100%; text-align: center; }
.hero-featured .eyebrow { display: block; margin-bottom: 4px; }

.hero-featured-image { display: block; }
.hero-featured-image img {
  width: 230px;
  height: 230px;
  object-fit: contain;
  margin: 10px auto 0;
  display: block;
  filter: drop-shadow(0 18px 18px rgba(35, 29, 18, 0.2));
  animation: hero-featured-float 3.4s ease-in-out infinite;
  transition: transform 0.2s ease;
}
.hero-featured-image:hover img,
.hero-featured-image:focus-visible img {
  animation-play-state: paused;
  transform: rotate(-3deg) scale(1.05);
}
@keyframes hero-featured-float {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-featured-image img { animation: none; transform: rotate(-6deg); }
}

.hero-featured-cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.hero-featured-name { font-weight: 700; color: var(--ink); }

.stamp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 2px dashed var(--green-dark);
  padding: 12px;
  background: var(--ivory);
  transform: rotate(-8deg);
}
.stamp-badge img { width: 100%; height: 100%; border-radius: 50%; }

.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
  padding: 20px 0 44px;
  border-top: 1px solid var(--card-line);
}
.stat-item { text-align: center; min-width: 140px; }
.stat-item .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--green-dark);
}
.stat-item .label {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.value-item h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.value-item p { color: var(--ink-soft); margin: 0; }

.section { padding: 56px 0; }
.section-narrow { max-width: 780px; margin: 0 auto; padding: 56px 20px; }

/* Sichtbar "muss noch ausgefüllt werden" - siehe invoice_field_or_placeholder()
   in includes/functions.php, genutzt u.a. auf impressum.php/datenschutz.php. */
.legal-placeholder { color: var(--clay); font-style: italic; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* --- Tag-Pills für Produktkategorien --- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-bio { background: #e3f3d1; color: #3f6a24; }
.tag-regional { background: var(--clay-soft); color: #8a4a1f; }
.tag-handgemacht { background: #f3e3c8; color: #7a5a20; }
.tag-feinkost { background: #f6dede; color: #8a2f2f; }
.tag-suesses { background: #fbe0ec; color: #a13d6b; }
.tag-getraenke { background: #dcebf7; color: #28577e; }
.tag-lebensmittel { background: #e8f0d9; color: #4b6b2c; }
.tag-keramik-deko { background: var(--bg-alt); color: #6b5a34; }
.tag-textilien { background: #e5e0f0; color: #524a7a; }
.tag-kosmetik { background: #fbe7ef; color: #9c3f68; }
.tag-default { background: var(--bg-alt); color: var(--ink-soft); }

/* --- Produktkarten (Startseite + Shop) --- */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(35, 29, 18, 0.14);
  text-decoration: none;
}
.product-card-media { position: relative; }
.product-card img { border-radius: 12px; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-alt); }
.product-card-tag { position: absolute; top: 10px; left: 10px; }
.product-card .producer {
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.product-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 2px 0 0;
  line-height: 1.2;
}
.product-card .price {
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.product-card .price .example-note { font-weight: 400; font-style: italic; color: var(--ink-faint); }
.product-card .sold-out { color: var(--color-danger); font-weight: 700; font-size: 0.82rem; margin: 4px 0 0; }

/* --- Geschenkboxen: Preset-Karten + Konfigurator --- */
.gift-box-card form { margin-top: 10px; }
.gift-box-contents { color: var(--ink-soft); font-size: 0.85rem; margin: 2px 0 0; }

.gift-box-content-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.gift-box-content-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}
.gift-box-content-row img { border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.gift-box-content-info { display: flex; flex-direction: column; flex: 1; }
.gift-box-content-info span { color: var(--ink-soft); font-size: 0.85rem; }

/* Produktauswahl: Bild kippt beim Hover nach links raus und wird größer,
   als kleiner Einladungs-Effekt zum Hinzufügen. */
#productGrid .gift-box-content-row { position: relative; }
#productGrid .gift-box-content-row:hover { z-index: 1; }
#productGrid .gift-box-content-row img {
  transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: 50% 50%;
}
#productGrid .gift-box-content-row:hover img {
  transform: rotate(-10deg) scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
  #productGrid .gift-box-content-row img { transition: none; }
  #productGrid .gift-box-content-row:hover img { transform: none; }
}

/* Boxgröße/Füllmaterial: gleiche Kartenzeile wie die Produktauswahl, aber als
   anklickbares Radio-Label statt Mengen-Stepper. */
.gift-box-option-row { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.gift-box-option-row:has(input:checked) { border-color: var(--green-dark); }
.fill-option-row:has(input:checked) { border-color: var(--clay); background: var(--clay-soft); }
.gift-box-option-row input[type=radio] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }

/* input[type=number] hat sitebreit width:100% (siehe Forms-Regeln) - hier
   höhere Spezifität nötig, damit die Mengenfelder schmal bleiben. */
input[type=number].gift-box-qty { width: 70px; flex: 0 0 auto; margin: 0; }

/* Zutaten/Allergene/Grundpreis (LMIV/PAngV) - siehe product_food_info_html()/
   gift_box_items_food_info_html() in includes/functions.php. Bewusst
   eingeklappt per <details>, damit die kompakten Produktzeilen nicht
   zugemüllt werden, aber vor dem Kauf einsehbar bleiben. */
.food-info { margin-top: 4px; font-size: 0.78rem; }
.food-info summary {
  cursor: pointer;
  color: var(--ink-faint);
  list-style: none;
}
.food-info summary::-webkit-details-marker { display: none; }
.food-info summary::before { content: "▸ "; }
.food-info[open] summary::before { content: "▾ "; }
.food-info-grundpreis { font-weight: 400; }
.food-info-body { margin-top: 4px; color: var(--ink-soft); }
.food-info-body p { margin: 2px 0; }
.food-info-sub { padding-left: 8px; color: var(--ink-faint); }

/* USt-Hinweis direkt am Preis (PAngV) - siehe vat_note_html() in
   includes/functions.php. */
.vat-note-line { margin: 2px 0 0; font-size: 0.78rem; color: var(--ink-faint); }
/* Mengen-Stepper im Box-Konfigurator (- / Anzahl / +) statt nacktem Zahlenfeld */
.stepper { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.stepper button {
  width: 30px; height: 30px; border: none; background: var(--bg-alt); color: var(--ink);
  font-size: 1rem; cursor: pointer; font-family: inherit; line-height: 1;
}
.stepper button:hover { background: var(--color-border); }
.stepper input[type=number].gift-box-qty {
  width: 32px; flex: 0 0 auto; margin: 0; border: none; background: transparent; padding: 0;
  text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper input.gift-box-qty::-webkit-outer-spin-button,
.stepper input.gift-box-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#slotCounter.over-capacity { color: var(--color-danger); font-weight: 700; }

/* --- Box-Konfigurator: Visual links, Auswahl rechts --- */
.box-configurator-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}
.box-visual { position: sticky; top: 90px; }

/* Auswahl scrollt für sich, damit die Vorschau links nicht aus dem
   Sichtbereich verschwindet, wenn die Optionsliste länger ist als der
   Bildschirm. */
.box-controls {
  max-height: calc(100vh - 90px - 40px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
.box-visual-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--color-border);
}
.box-visual-frame img { display: block; width: 100%; height: auto; }
.box-visual-frame img[hidden] { display: none; }
.box-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  color: var(--ink-faint);
  text-align: center;
  padding: 20px;
}
.box-visual-placeholder[hidden] { display: none; }

/* Preis prominent direkt neben der Box, bleibt dank .box-visual sticky
   sichtbar, egal wie weit die Auswahl-Spalte daneben gescrollt ist. */
.box-price-tag {
  margin-top: 16px;
  padding: 16px 22px;
  border-radius: var(--radius);
  background: var(--green-dark);
  color: var(--ivory);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow);
}
.box-price-label { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; }
.box-price-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; }

/* Platzierte Produkte sitzen "in" der Box - transparente PNGs ohne
   Sticker-Kreis. Breite/Höhe/Margin werden per Inline-Style gesetzt (siehe
   box-configurator.php): mit hinterlegten Maßen als physisch korrekter
   Prozentsatz der Box-Breite, sonst als fester 64px-Pin mit --pin-scale. */
.box-visual-pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(var(--pin-scale, 1));
  z-index: 1;
}
.box-visual-pin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Zwei gestapelte Schatten statt einem: ein enger, kräftiger
     "Kontaktschatten" direkt am Objekt plus ein weicherer, größerer
     Streuschatten - lässt die einzeln freigestellten PNGs eher wie
     Gegenstände IN der Box wirken statt wie aufgeklebte Sticker. */
  filter:
    drop-shadow(0 2px 2px rgba(35, 29, 18, 0.5))
    drop-shadow(0 10px 12px rgba(35, 29, 18, 0.3));
  pointer-events: none;
}

/* --- 404-Seite: "Ernte-Wurf" - echte Produkte in die Trostbox werfen ---
   Ziel per Maus/Touch ziehen (Ball-Flugbahn), loslassen zum Werfen. Fliegt
   nach echter Wurfphysik (Schwerkraft + Ziehvektor als Startgeschwindigkeit),
   kann die Box verfehlen; nur ein Eintritt durch die offene Oberkante zählt,
   ein Treffer auf einer der beiden festen Seitenwände stoppt den Flug dort
   statt hindurchzufliegen (siehe assets/js/... - hier inline in 404.php). */
.notfound-section { padding-top: 60px; }
.notfound-stage { position: relative; overflow: hidden; }
.notfound-404bg {
  position: absolute;
  top: -8%;
  left: -1%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(140px, 22vw, 320px);
  line-height: 1;
  color: var(--clay-soft);
  letter-spacing: -0.03em;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}
.notfound-layout { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-bottom: 60px; }
.notfound-copy { flex: 1 1 380px; max-width: 560px; }
.notfound-divider { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.notfound-divider span { font-family: var(--font-display); font-style: italic; font-size: 0.82rem; color: var(--ink-faint); }

.notfound-game { flex: 0 0 420px; max-width: 100%; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px 22px; position: relative; }
.notfound-game-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.notfound-game-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.notfound-game-badges { display: flex; gap: 6px; }
.notfound-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 0.82rem; }
.notfound-badge-hits { background: var(--clay-soft); color: var(--clay); }
.notfound-badge-miss { background: var(--bg-alt); color: var(--ink-faint); }
.notfound-hint { margin: 0 0 10px; font-size: 0.82rem; color: var(--ink-faint); }

.notfound-scene { position: relative; touch-action: none; cursor: grab; }
.notfound-scene.is-dragging { cursor: grabbing; }
.notfound-scene svg { display: block; width: 100%; height: auto; }
.notfound-overlay { position: absolute; inset: 0; pointer-events: none; }
.notfound-thrown, .notfound-caught-item {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 3px 6px rgba(35, 29, 18, 0.3);
  background: var(--card);
}
.notfound-caught-item { width: 9%; animation: notfoundPop 0.3s cubic-bezier(.34, 1.56, .64, 1); }

.notfound-progress { display: flex; gap: 6px; margin: 14px 0; }
.notfound-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--card-line); }
.notfound-dot.on { background: var(--green-dark); }
.notfound-throw-btn { font-size: 0.88rem; padding: 9px 20px; }
.notfound-message { color: var(--green-dark); font-weight: 700; margin: 10px 0 0; }

@keyframes notfoundPop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 640px) {
  .notfound-404bg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .notfound-caught-item { animation: none; }
}

/* --- Vorstand: W-förmiges Wrap-Layout, 3 dann 2, zentriert --- */
.board-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.board-card { flex: 1 1 280px; max-width: 320px; text-align: center; position: relative; }
.board-card .dept-monogram {
  position: absolute;
  top: -14px;
  right: -10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--ivory);
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  box-shadow: var(--shadow);
}
.board-card img {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  border: 3px solid var(--ivory);
  box-shadow: var(--shadow);
}
.board-card .dept {
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.board-card h3 { font-size: 1.3rem; margin: 0.15em 0 0.4em; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
}
.icon-btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--ivory); text-decoration: none; }

/* --- Abteilungs-Badges (Startseite Teaser): 3 dann 2, zentriert --- */
.dept-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; max-width: 700px; margin: 0 auto; }
.dept-badge {
  flex: 0 1 180px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  color: inherit;
}
.dept-badge:hover { text-decoration: none; }
.dept-badge:hover .circle { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(63, 106, 36, 0.3); }
.dept-badge .circle {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ivory);
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dept-badge .name { font-weight: 700; }

.btn, button.btn {
  display: inline-block;
  background: var(--color-primary);
  color: var(--ivory);
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-dark); text-decoration: none; color: var(--ivory); }
.btn-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary); color: var(--ivory); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ivory); }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: #7d1a15; }
.btn-small { padding: 7px 16px; font-size: 0.88rem; }

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.alert-error { background: #fdecea; color: var(--color-danger); border: 1px solid #f5c2be; }
.alert-success { background: #eaf6ea; color: var(--color-success); border: 1px solid #bfe3bf; }
.alert-info { background: #eef3fb; color: #2c4a73; border: 1px solid #c6d7ee; font-size: 0.9rem; }
.alert-info code { background: rgba(44, 74, 115, 0.1); padding: 1px 5px; border-radius: 4px; }

/* --- Forms --- */

/* Browser-Standardblau für Checkboxen/Radios passt nicht zur warmen Grün-
   Palette - gilt sitebreit (öffentliche Seiten, Dashboard, Rechnungswesen). */
input[type=checkbox], input[type=radio] { accent-color: var(--green-dark); }

form .field { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=file], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
}
textarea { min-height: 120px; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }

.login-box {
  max-width: 380px;
  margin: 64px auto;
  background: var(--color-surface);
  padding: 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --- 2FA-Einrichtung: QR-Code + Schlüssel zum Kopieren - gebraucht sowohl auf
   der erzwungenen Admin-Ersteinrichtung (2fa-setup-required.php, öffentlicher
   Header) als auch bei der freiwilligen Einrichtung im Dashboard
   (dashboard/profile.php), deshalb hier statt in dashboard.css. --- */
.totp-qr {
  width: 190px;
  height: 190px;
  padding: 14px;
  margin: 14px 0;
  background: var(--ivory, #fff);
  border: 1px solid var(--card-line, var(--color-border));
  border-radius: 14px;
  box-sizing: content-box;
}
.totp-key-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.totp-key {
  margin: 0;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
#totpCopyBtn { flex: 0 0 auto; min-width: 92px; }

/* --- Tables --- */

table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
th { background: #f0f1ec; font-weight: 600; }

.status-badge { padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.status-pending { background: #fdf3e0; color: #8a5a00; }
.status-paid { background: #eaf6ea; color: var(--color-success); }
.status-shipped { background: #e6eefc; color: #1d4ed8; }
.status-cancelled { background: #fdecea; color: var(--color-danger); }

/* --- Footer --- */

.site-footer { background: var(--ink); color: var(--ivory); margin-top: 60px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 48px 20px 32px;
  max-width: var(--max-width);
}
.footer-brand .logo { color: var(--ivory); margin-bottom: 12px; }
.footer-brand p { color: rgba(255, 246, 231, 0.7); font-size: 0.92rem; max-width: 32ch; }
.footer-col h3 {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-light);
}
.footer-col a { display: block; color: var(--ivory); opacity: 0.85; margin-bottom: 10px; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 246, 231, 0.15);
  font-size: 0.82rem;
  opacity: 0.75;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-legal a { color: var(--ivory); }

/* --- Shop: Filter-Chips, Sidebar, Layout --- */
.shop-subline { color: var(--ink-soft); margin-bottom: 20px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-chip {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: var(--card);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.88rem;
}
.filter-chip.active, .filter-chip:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--ivory);
  text-decoration: none;
}

.shop-body { padding-top: 24px; }
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
.filter-sidebar {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky;
  top: 90px;
}
.filter-sidebar h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.filter-intro { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 6px; }
.filter-group { margin-top: 18px; }
.filter-group h3 {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.filter-empty { font-size: 0.85rem; color: var(--ink-faint); }
.filter-sidebar label.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin-bottom: 10px;
  cursor: pointer;
}
.filter-sidebar label.checkbox input { width: auto; }

/* --- Partner & Sponsoren: Platzhalter-Boxen + CTA-Banner --- */
.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.placeholder-box {
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--card-line);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-weight: 600;
  background: var(--card);
  text-align: center;
  padding: 10px;
}
.cta-banner {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  color: var(--ivory);
  border-radius: 24px;
  padding: 48px 40px;
  text-align: center;
}
.cta-banner h2 { color: var(--ivory); }
.cta-banner p { color: rgba(255, 246, 231, 0.9); max-width: 52ch; margin: 0 auto 20px; }
.cta-banner .btn { background: var(--ivory); color: var(--green-dark); }
.cta-banner .btn:hover { background: var(--card); color: var(--green-dark); }

/* --- Dashboard layout --- */

.dashboard-body { background: var(--color-bg); }
.dash-layout { display: flex; flex-direction: column; min-height: 100vh; }

/* Kopfleiste statt hoher Seitenleiste: dash-nav (die Seitenauswahl) ist damit bei
   jeder Fensterbreite dieselbe einzelne, seitwärts scrollbare Zeile - kein
   Umbruch in eine mehrzeilige/vertikale Liste beim Verkleinern des Fensters. */
.dash-sidebar {
  width: 100%;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.dash-sidebar .logo { color: #fff; }
.dash-topline { display: flex; align-items: center; gap: 14px; }
.dash-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding-bottom: 2px;
}
.dash-nav a { flex: 0 0 auto; white-space: nowrap; color: #d9e6de; padding: 8px 10px; border-radius: 6px; }
.dash-nav a:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.dash-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #f3c9c5 !important;
}
.dash-logout svg { flex: 0 0 auto; }

/* Nur auf schmalen Bildschirmen (Telefon) reicht das Icon allein - auf Tablet
   (z.B. iPad) und größer bleibt "Abmelden" als Text sichtbar. */
@media (max-width: 480px) {
  .dash-logout .logout-label { display: none; }
}

.dash-main { flex: 1; padding: 32px; max-width: 100%; overflow-x: auto; }
.dash-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
/* auto-fit statt auto-fill: bestehende Karten füllen die Zeile aus, statt
   links gedrängt zu bleiben und rechts leeren Platz als "leere Spalten" zu
   reservieren (das war der Effekt von auto-fill bei wenigen Karten). */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.stat { background: var(--color-surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.stat .value { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
.stat .label { color: var(--color-text-muted); font-size: 0.9rem; }

.thumb-preview { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0; }
.filter-bar input[type=text], .filter-bar select { width: auto; margin: 0; }

.attendance-month-heading { margin: 24px 0 8px; font-size: 1.05rem; }
.attendance-month-heading:first-of-type { margin-top: 16px; }

.products-actions { display: flex; align-items: center; gap: 8px; }
.products-actions form { display: inline-flex; margin: 0; }

.stock-inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.stock-inline-input { width: 64px; margin: 0; }
.btn-icon-danger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-border);
  background: none; color: var(--color-danger); cursor: pointer;
}
.btn-icon-danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }

/* --- Responsive --- */

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 16px 20px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }
  .main-nav.open { display: flex; }
  .header-inner { flex-wrap: wrap; }

  .value-strip { grid-template-columns: 1fr; gap: 28px; }
  .hero-stamp { display: none; }

  .shop-layout { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; }

  .box-configurator-layout { grid-template-columns: 1fr; }
  .box-visual { position: static; }
  .box-controls { max-height: none; overflow-y: visible; padding-right: 0; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .placeholder-grid { grid-template-columns: repeat(2, 1fr); }

  .dash-main { padding: 20px; }
  .field-row { flex-direction: column; gap: 0; }
}

@media (max-width: 480px) {
  .stats-row { gap: 20px 28px; }
  .stat-item { min-width: 110px; }
  .stat-item .num { font-size: 1.9rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .placeholder-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 36px 22px; }
  .board-card { flex-basis: 100%; max-width: 340px; }
}

/* --- Visueller Website-Editor (Marketing), siehe includes/site_editor.php,
   assets/js/site-editor.js. Nur für can_edit_site()-Accounts überhaupt im
   DOM vorhanden - für alle anderen bleibt die Seite unverändert. --- */
.je-editable { border-radius: 4px; }
.je-editing .je-editable {
  outline: 1px dashed var(--clay);
  outline-offset: 3px;
  cursor: text;
  transition: outline-color 0.15s ease;
}
.je-editing .je-editable:hover { outline-color: var(--green-dark); }
.je-editing .je-editable:focus { outline: 2px solid var(--green-dark); background: var(--clay-soft); }
.je-editing .je-editable-markdown { cursor: pointer; }

.je-editable-image { display: block; position: relative; }
.je-image-btn {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: var(--ink);
  color: var(--ivory);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(35, 29, 18, 0.3);
}
.je-editing .je-image-btn { display: inline-block; }
.je-editable-image-empty .placeholder-box { position: relative; }

.je-md-editor { text-align: left; }
.je-md-textarea {
  width: 100%;
  min-height: 160px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  resize: vertical;
}
.je-md-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.je-md-hint { color: var(--ink-faint); font-size: 0.8rem; }

/* Schwebende Werkzeugleiste unten rechts */
.je-bar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Der Bar sitzt fest unten rechts, genau wie die Footer-Links (Impressum/
   Datenschutz/Mitarbeiter-Login) - ohne diesen Abstand läge sie darüber und
   die Links wären nicht mehr anklickbar. Klasse wird nur gesetzt, wenn
   site-editor.js tatsächlich läuft (siehe dort), betrifft also nur
   can_edit_site()-Accounts. */
body.je-has-bar .footer-bottom { padding-bottom: 140px; }
@media (max-width: 640px) {
  body.je-has-bar .footer-bottom { padding-bottom: 100px; }
}
.je-bar-btn {
  background: var(--color-primary);
  color: var(--ivory);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(35, 29, 18, 0.28);
}
.je-bar-btn:hover { background: var(--color-primary-dark); }
.je-editing .je-bar-toggle { background: var(--clay); }
.je-editing .je-bar-toggle:hover { background: #9c5530; }

.je-color-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(35, 29, 18, 0.25);
  padding: 16px;
  width: 240px;
}
.je-color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.88rem; color: var(--color-text); }
.je-color-row input[type="color"] { width: 40px; height: 30px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; }

.je-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: var(--ivory);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
}
.je-toast-show { opacity: 1; transform: translate(-50%, 0); }
.je-toast-error { background: var(--color-danger); }

@media (max-width: 640px) {
  .je-bar { right: 12px; bottom: 12px; }
  .je-bar-btn { padding: 10px 16px; font-size: 0.85rem; }
  .je-color-panel { width: calc(100vw - 24px); }
}

/* Über-uns-Seite: freier Block-Editor (Überschrift/Untertitel/Text/Bild), siehe
   about_blocks_render() in includes/site_editor.php. */
.about-blocks { display: flex; flex-direction: column; gap: 22px; max-width: 720px; margin-top: 8px; }
.about-block-subtitle { color: var(--ink-soft); font-size: 1.1rem; margin: 0; }
.about-block-img { width: 100%; border-radius: var(--radius); display: block; }

.je-block { position: relative; }
.je-editing .je-block { border-radius: 10px; transition: background-color 0.15s ease; }
.je-editing .je-block:hover,
.je-editing .je-block:focus-within { background: var(--clay-soft); }
.je-block-controls {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  gap: 3px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  padding: 3px;
  z-index: 5;
}
.je-editing .je-block:hover .je-block-controls,
.je-editing .je-block:focus-within .je-block-controls { display: flex; }
.je-block-controls button {
  border: none;
  background: none;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.je-block-controls button:hover { background: var(--bg-alt); }

.je-block-add-wrap { position: relative; margin-top: 4px; }
.je-block-add-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  z-index: 10;
}
.je-block-add-menu button {
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
}
.je-block-add-menu button:hover { background: var(--bg-alt); }

.placeholder-logo {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: contain;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: var(--card);
  padding: 12px;
}

/* Cookie-Consent-Banner, siehe includes/cookie_banner.php + assets/js/cookie-consent.js.
   z-index über der schwebenden Site-Editor-Werkzeugleiste (.je-bar, z-index 200),
   damit das Banner auch für Redakteur:innen sichtbar bleibt. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: var(--color-surface);
  border-top: 1px solid var(--card-line);
  box-shadow: 0 -6px 24px rgba(35, 29, 18, 0.18);
  padding: 18px 20px;
}
.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.cookie-banner-text {
  flex: 1 1 420px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.cookie-banner-text a { color: var(--color-primary); font-weight: 600; }
.cookie-banner-settings {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--card-line);
}
.cookie-banner-settings[hidden] { display: none; }
#cookie-banner-save-selection { align-self: flex-start; }
.cookie-option { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink); }
.cookie-option small { color: var(--ink-faint); font-weight: 400; }
.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  flex: 0 0 auto;
  margin-left: auto;
}
.cookie-banner-settings-toggle {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.cookie-banner-settings-toggle:hover { color: var(--ink); }
@media (max-width: 640px) {
  .cookie-banner-actions { width: 100%; justify-content: flex-start; }
  .cookie-banner-actions .btn, .cookie-banner-actions .btn-secondary { flex: 1 1 auto; text-align: center; }
}