/* ===== fonts.css ===== */
/* =========================================================
   Schriften lokal eingebunden — kein Aufruf an Google.
   Variable Fonts: eine Datei deckt den ganzen Gewichtsbereich ab.
   Subset: latin (enthaelt alle deutschen Umlaute und das Eszett).
   ========================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Inter-var.woff2') format('woff2-variations'),
       url('../fonts/Inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-var.woff2') format('woff2-variations'),
       url('../fonts/PlayfairDisplay-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== tokens.css ===== */
/* =========================================================
   Waffen Geus — Design Tokens
   Farbwelt und Typografie aus dem freigegebenen Entwurf.
   Einzige Quelle der Wahrheit: hier aendern, ueberall wirksam.
   ========================================================= */

:root {
  /* --- Flaechen: Waldgruen, vom Schrank ins Digitale uebersetzt --- */
  --forest:        #171f19;
  --forest-mid:    #243328;
  --forest-soft:   #2f4436;
  --forest-line:   #3b5243;

  /* --- Akzent: Messing und Patina ---
     --gold traegt Flaechen und Text auf dunklem Grund (dort 6:1).
     Auf hellem Grund reicht es nicht: gegen Cream nur 2,67:1 statt der
     geforderten 4,5:1. Dafuer gibt es --gold-text, eine dunklere Stufe
     derselben Farbe. Beides ist Absicht, nicht Verdopplung. */
  --gold:          #b8902a;
  --gold-light:    #d4a84a;
  --gold-pale:     #f0d898;
  --gold-text:     #7e631d;   /* 5,13:1 auf Cream · 4,56:1 auf Parchment */

  /* --- Helle Flaechen: Pergament --- */
  --cream:         #f7f2e8;
  --parchment:     #ede5d2;
  --parchment-dim: #e2d8c0;

  /* --- Text --- */
  --text:          #1e1811;
  --text-soft:     #5a4d3c;
  --text-muted:    #706557;   /* war #8a7d6c — nur 3,60:1 */
  --text-on-dark:  #ede5d2;
  --text-on-dark-soft: rgba(237, 229, 210, 0.72);
  --text-on-dark-dim:  rgba(237, 229, 210, 0.62);  /* Mindestwert fuer Fliesstext */

  /* --- Signal --- */
  --warn:          #8c2f22;

  /* --- Schrift --- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Crimson Pro", Georgia, serif;

  /* --- Schriftgroessen: fluid, kein Bruch zwischen Breakpoints --- */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lg:    clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl:    clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-2xl:   clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --text-3xl:   clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  --text-hero:  clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem);

  /* --- Laufweite --- */
  --tracking-wide:  0.08em;
  --tracking-wider: 0.16em;

  /* --- Abstaende: bewusst ungleichmaessig, erzeugt Rhythmus --- */
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* --- Layout --- */
  --width-content: 1240px;
  --width-text:    68ch;
  --gutter:        clamp(1.25rem, 4vw, 3rem);

  /* --- Radien: klein gehalten, das Sortiment ist kantig --- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  /* --- Bewegung --- */
  --duration-fast:   160ms;
  --duration-normal: 320ms;
  --duration-slow:   620ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft:   cubic-bezier(0.33, 1, 0.68, 1);

  /* --- Tiefe --- */
  --shadow-sm:   0 1px 2px rgba(23, 31, 25, 0.06);
  --shadow:      0 4px 16px rgba(23, 31, 25, 0.10);
  --shadow-lg:   0 18px 48px rgba(23, 31, 25, 0.18);
  --shadow-gold: 0 10px 32px rgba(184, 144, 42, 0.22);
}


/* ===== base.css ===== */
/* =========================================================
   Waffen Geus — Grundlagen
   Reset, Typografie, Grundraster.
   ========================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;

  /* clip statt hidden: schneidet seitlichen Ueberlauf ab, erzeugt aber
     keinen Scroll-Container — dadurch bleibt die sticky Navigation
     funktionsfaehig. Mit overflow-x:hidden waere sie stehengeblieben. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; border: none; background: none; }


/* ---------- Ueberschriften ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { text-wrap: pretty; }

/* --- Textfluss ---------------------------------------------------
   Abstand entsteht zwischen Geschwistern, nie am Element selbst.
   Dadurch stimmt der Rhythmus in jeder Kombination, und am Ende
   eines Blocks bleibt nie ein ueberfluessiger Rand stehen.

   Bewusst nur nach Textelementen: Die Vorzeile (.eyebrow) bringt
   ihren Abstand selbst mit und darf keinen zweiten bekommen.       */

/* Nach einer Ueberschrift folgt Luft */
h1 + *,
h2 + * { margin-top: var(--space-6); }

h3 + *,
h4 + * { margin-top: var(--space-4); }

/* Zwischen Textbausteinen */
p + p,
p + ul,
p + ol,
ul + p,
p + .btn-row,
ul + .btn-row,
p + .callout,
p + .table-wrap,
p + .accordion,
.lead + .check-list,
.lead + p { margin-top: var(--space-4); }

/* Eine Ueberschrift nach Fliesstext braucht mehr Luft davor */
p + h2,
ul + h2,
.table-wrap + h2 { margin-top: var(--space-12); }

p + h3,
ul + h3 { margin-top: var(--space-8); }

a { color: inherit; }

strong { font-weight: 600; }


/* ---------- Wiederkehrende Textbausteine ---------- */

/* Kleine Vorzeile ueber einer Ueberschrift */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Auf dunklem Grund kehrt die helle Goldstufe zurueck — das dunkle Gold
   waere dort mit 2,96:1 nicht mehr lesbar. */
.section--dark .eyebrow,
.page-header .eyebrow,
.hero .eyebrow,
.card--dark .eyebrow,
.newsletter-panel .eyebrow { color: var(--gold-light); }

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Ein Wort in der Ueberschrift hervorheben */
.accent {
  font-style: italic;
  color: var(--gold);
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--text-soft);
  max-width: var(--width-text);
}

.muted { color: var(--text-muted); }


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

.wrap {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 860px; }

.section {
  padding-block: var(--space-section);
}

/* Dunkle Sektion auf Waldgruen */
.section--dark {
  background: var(--forest);
  color: var(--text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--cream); }

.section--dark p { color: var(--text-on-dark-soft); }

/* Helle Sektion auf Pergament */
.section--parchment { background: var(--parchment); }

.section-head {
  max-width: 62ch;
  margin-bottom: var(--space-12);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}


/* ---------- Zugaenglichkeit ---------- */

/* Sichtbar nur bei Tastaturfokus */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 999;
  padding: var(--space-3) var(--space-6);
  background: var(--gold);
  color: var(--forest);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--duration-fast) var(--ease-out-soft);
}

.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- Einblenden beim Scrollen ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Gestaffeltes Einblenden fuer Listen */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }


/* ---------- Reduzierte Bewegung respektieren ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }
}


/* ---------- Druck ---------- */

@media print {
  .site-nav,
  .site-footer,
  .preview-banner,
  .nav-toggle { display: none !important; }

  body { background: #fff; color: #000; }
}


/* ===== layout.css ===== */
/* =========================================================
   Waffen Geus — Kopf, Navigation, Fuss
   ========================================================= */

/* ---------- Entwurfs-Hinweis (faellt vor Livegang weg) ---------- */

.preview-banner {
  position: relative;
  z-index: 200;
  padding: var(--space-2) var(--gutter);
  background: var(--gold);
  color: var(--forest);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

.preview-banner strong { font-weight: 700; }


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

.site-nav {
  position: sticky;
  top: 0;
  z-index: 150;
  background: rgba(23, 31, 25, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(184, 144, 42, 0.18);
  transition: background var(--duration-normal) var(--ease-out-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--width-content);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
}

/* --- Wortmarke --- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo aus dem Hausmesse-Flyer (Geweih, WAFFEN GEUS, Fadenkreuz). Auf
   Wunsch von Herrn Geus (Mail "Flyer", 05.10.2026) ersetzt es die
   Widder-Kachel im Kopf und ist etwas groesser als das alte (56px statt 40px).
   Die Datei ist aus dem Flyer freigestellt: transparenter Grund, Farben
   gegen den Schwarzton des Flyers zurueckgerechnet. Die Widder-Kachel
   bleibt als "klassisches Logo" im Fuss. */
.brand-logo {
  display: block;
  height: 3.5rem;
  width: auto;
  transition: opacity var(--duration-normal) var(--ease-out-soft);
}

.brand:hover .brand-logo,
.brand:focus-visible .brand-logo { opacity: 0.88; }

/* Auf dem Desktop noch etwas groesser: "WAFFEN" ueber GEUS soll lesbar sein */
@media (min-width: 1161px) {
  .brand-logo { height: 4rem; }
}

/* Sehr schmale Geraete (iPhone SE, kleine Android): Logo etwas kompakter,
   damit das Burger-Symbol nicht angeschnitten wird. */
@media (max-width: 380px) {
  .nav-inner { gap: var(--space-3); }
  .brand-logo { height: 2.75rem; }
}

/* --- Menue --- */

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(237, 229, 210, 0.88);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.nav-link:hover { color: var(--gold-light); }

/* Unterstrich waechst aus der Mitte */
.nav-link::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.nav-link:hover::after { transform: scaleX(1); }

.nav-link[aria-current="page"] {
  color: var(--gold-light);
}

.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Nur im Burger-Menue sichtbar (siehe Media Query unten) */
.nav-menu-kontakt { display: none; }

/* --- Untermenue Sortiment --- */

.nav-item { position: relative; }

.nav-toggle-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-toggle-sub svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: currentColor;
  transition: transform var(--duration-normal) var(--ease-out-soft);
}

.nav-item:hover .nav-toggle-sub svg,
.nav-item:focus-within .nav-toggle-sub svg { transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 15rem;
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  background: var(--forest-mid);
  border: 1px solid rgba(184, 144, 42, 0.22);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--duration-normal) var(--ease-out-soft),
    transform var(--duration-normal) var(--ease-out-expo),
    visibility var(--duration-normal);
}

.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-sub a {
  display: block;
  padding: var(--space-3);
  font-size: 0.9375rem;
  color: rgba(237, 229, 210, 0.85);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    background var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft);
}

.nav-sub a:hover,
.nav-sub a:focus-visible {
  background: rgba(184, 144, 42, 0.14);
  color: var(--gold-light);
}

.nav-sub small {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-on-dark-dim);
}

/* --- Handlungsaufruf --- */

.nav-cta {
  flex-shrink: 0;
  padding: 0.6rem 1.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--forest);
  background: var(--gold);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-out-soft),
    transform var(--duration-fast) var(--ease-out-soft);
}

.nav-cta:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.nav-cta:active { transform: translateY(0); }

/* --- Burger --- */

.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 44px ist die kleinste Flaeche, die sich zuverlaessig treffen laesst */
  min-width: 44px;
  min-height: 44px;
  margin-right: calc(var(--space-2) * -1);
  color: var(--cream);
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              opacity var(--duration-fast) var(--ease-out-soft);
}

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ---------- Mobil ---------- */

/* Burger-Menue ab 1160px statt 960px: Mit dem Punkt "Ankauf" und der
   Logo-Schrift GEUS wurde das Desktop-Menue zwischen 961 und 1100px zu
   eng, ein Punkt brach in zwei Zeilen um. (Gegenstueck in site.js.) */
@media (max-width: 1160px) {
  .nav-burger { display: flex; }

  /* Der gelbe Kontakt-Knopf faellt hier weg, dafuer steht Kontakt im Menue */
  .nav-menu-kontakt { display: list-item; }

  /* backdrop-filter macht die Leiste zum Bezugsrahmen fuer position: fixed.
     Das Menue war dadurch nur so hoch wie die Leiste (rund 128px) statt so
     hoch wie der Bildschirm. Auf Handy und Tablet daher ohne Weichzeichner,
     dafuer fast deckender Hintergrund. */
  .site-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(23, 31, 25, 0.97);
  }

  /* Das Burger-Symbol bleibt ueber dem ausgefahrenen Menue, sonst laesst
     sich das Menue nicht mehr schliessen. */
  .nav-burger { position: relative; z-index: 2; }

  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(22rem, 84vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6rem var(--space-6) var(--space-8);
    background: var(--forest-mid);
    border-left: 1px solid rgba(184, 144, 42, 0.2);
    overflow-y: auto;
    transform: translateX(100%);

    /* Geschlossen komplett aus Layout, Hit-Testing und Vorlesereihenfolge
       nehmen. Ohne das zaehlt das ausgefahrene Menue zur Seitenbreite und
       macht jede Seite rund 330px zu breit — sichtbar als waagerechtes
       Wackeln auf dem Handy. */
    visibility: hidden;
    pointer-events: none;

    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      visibility var(--duration-normal) var(--ease-out-expo);
  }

  .nav-menu.is-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-link {
    padding: var(--space-4) 0;
    font-size: var(--text-lg);
    border-bottom: 1px solid rgba(184, 144, 42, 0.12);
  }

  .nav-link::after { display: none; }

  /* Untermenue mobil immer ausgeklappt */
  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 var(--space-3) var(--space-4);
    background: none;
    border: none;
    box-shadow: none;
  }

  .nav-toggle-sub svg { display: none; }

  .nav-cta { display: none; }
}


/* ---------- Seitenkopf der Unterseiten ---------- */

.page-header {
  position: relative;
  padding-block: clamp(4rem, 3rem + 6vw, 7.5rem);
  background: var(--forest);
  color: var(--cream);
  overflow: hidden;
}

/* Optionales Hintergrundbild, stark abgedunkelt */
.page-header-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.22;
  filter: grayscale(0.3);
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(23, 31, 25, 0.55) 0%,
    rgba(23, 31, 25, 0.85) 100%
  );
}

.page-header .wrap { position: relative; z-index: 2; }

.page-header h1 {
  color: var(--cream);
  max-width: 20ch;
}

.page-header .lead {
  margin-top: var(--space-6);
  color: var(--text-on-dark-soft);
}

/* --- Brotkrumen --- */

.breadcrumb {
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-on-dark-dim);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  opacity: 0.4;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.breadcrumb a:hover { color: var(--gold-light); }


/* ---------- Fuss ---------- */

.site-footer {
  padding-block: var(--space-16) var(--space-8);
  background: var(--forest);
  color: var(--text-on-dark-soft);
  font-size: var(--text-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-12) var(--space-8);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(184, 144, 42, 0.16);
}

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

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

.footer-col h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-light);   /* dunkler Fuss: helle Stufe noetig */
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  display: inline-block;
  /* Ohne diese Polsterung waere die Trefferflaeche nur 17px hoch —
     unter dem Mindestmass von WCAG 2.2 (24px) und mit dem Daumen
     kaum zu treffen. */
  padding-block: 0.45rem;
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.footer-col a:hover { color: var(--gold-light); }

.footer-brand p {
  margin-top: var(--space-4);
  max-width: 34ch;
  color: var(--text-on-dark-soft);
}

/* Oeffnungszeiten als saubere Tabelle */
.footer-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-variant-numeric: tabular-nums;
}

.footer-hours dt { color: var(--text-on-dark-soft); }
.footer-hours dd { margin: 0; }

.footer-hours .is-closed { color: var(--text-on-dark-dim); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--text-on-dark-dim);
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer-bottom a {
  display: inline-block;
  padding-block: 0.4rem;
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.footer-bottom a:hover { color: var(--gold-light); }


/* ===== components.css ===== */
/* =========================================================
   Waffen Geus — Bausteine
   ========================================================= */

/* ---------- Schaltflaechen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.85rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    background var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    transform var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-normal) var(--ease-out-soft);
}

.btn svg { width: 1rem; height: 1rem; fill: currentColor; }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--gold);
  color: var(--forest);
}

.btn--primary:hover {
  background: var(--gold-light);
  box-shadow: var(--shadow-gold);
}

/* Umrandet, fuer helle Flaechen */
.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(30, 24, 17, 0.25);
}

.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Umrandet, fuer dunkle Flaechen */
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(237, 229, 210, 0.3);
}

.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(184, 144, 42, 0.08);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}


/* ---------- Startseiten-Buehne ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(36rem, 88vh, 52rem);
  padding-block: var(--space-16) var(--space-12);
  background: var(--forest);
  overflow: hidden;
}

/* Video im Hintergrund. Das Standbild erscheint sofort,
   das Video legt sich darueber, sobald es abspielbar ist. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Verlauf: links dunkel fuer die Schrift, rechts offen fuers Bild */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(14, 21, 15, 0.93) 0%,
      rgba(14, 21, 15, 0.86) 26%,
      rgba(14, 21, 15, 0.52) 58%,
      rgba(14, 21, 15, 0.20) 100%),
    linear-gradient(180deg,
      rgba(14, 21, 15, 0.28) 0%,
      rgba(14, 21, 15, 0.52) 100%);
}

/* Feine Koernung — nimmt dem Video das Digitale */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.hero .wrap {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-content { max-width: 44rem; }

.hero h1 {
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.02;
  color: var(--cream);
  letter-spacing: -0.02em;
}

.hero h1 .accent { color: var(--gold); font-style: italic; }

.hero .lead {
  margin-top: var(--space-6);
  max-width: 42ch;
  color: rgba(237, 229, 210, 0.86);
}

/* Kurzfakten mit Trennstrichen */
.hero-facts {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
  /* Vier Fakten brauchen mehr Platz als die Textspalte (44rem). Auf
     breiten Schirmen stehen sie in einer Reihe, darunter zwei mal zwei. */
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
}

@media (max-width: 1000px) {
  .hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    width: auto;
    gap: var(--space-6) var(--space-12);
  }

  .hero-divider { display: none; }
}

.hero-fact strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 500;
  line-height: 1;
  color: var(--cream);
}

.hero-fact strong span {
  font-size: 0.62em;
  color: var(--gold);
}

.hero-fact p {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(237, 229, 210, 0.72);
}

.hero-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(237, 229, 210, 0.14);
}

@media (max-width: 640px) {
  .hero-facts { gap: var(--space-6) var(--space-8); }
}

/* Leiste mit Oeffnungszeiten direkt unter der Buehne */
.hero-bar {
  background: var(--gold);
  color: var(--forest);
}

/* Drei Angaben: Zeiten, geschlossene Tage, Telefon. Der Mittwoch hat
   keine eigene Kachel mehr, er steht bei den geschlossenen Tagen. */
.hero-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--width-content);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
}

@media (max-width: 720px) {
  .hero-bar-inner { grid-template-columns: 1fr; }
}

.hero-bar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero-bar-item svg {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  opacity: 0.7;
}

.hero-bar-item span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.65;
}

.hero-bar-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
}

.hero-bar-item a {
  display: inline-block;
  padding-block: 0.3rem;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out-soft);
}

.hero-bar-item a:hover { opacity: 0.7; }


/* ---------- Karten ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-6);
}

.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }

/* Karten einer Reihe teilen sich die Zeilen (Icon, Ueberschrift, Text):
   Der Text beginnt in jeder Karte auf gleicher Hoehe, auch wenn eine
   Ueberschrift in zwei Zeilen umbricht. Ohne subgrid bleibt es beim
   bisherigen Verhalten. Den Reihenabstand liefern die Karten selbst,
   weil ein Grid-Abstand auch zwischen den drei Zeilen einer Karte laege. */
@supports (grid-template-rows: subgrid) {
  .card-grid--ausgerichtet {
    row-gap: 0;
    margin-bottom: calc(var(--space-6) * -1);
  }

  .card-grid--ausgerichtet > .card:not(.card--media) {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    margin-bottom: var(--space-6);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: #fff;
  border: 1px solid rgba(30, 24, 17, 0.08);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-soft),
    border-color var(--duration-normal) var(--ease-out-soft);
}

/* Goldene Kante faehrt beim Ueberfahren hoch */
.card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

a.card:hover,
.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(184, 144, 42, 0.3);
}

a.card:hover::before,
.card--interactive:hover::before { transform: scaleX(1); }

.card-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-6);
  border: 1px solid rgba(184, 144, 42, 0.4);
  border-radius: var(--radius-sm);
  color: var(--gold-text);
}

.card-icon svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

.card h3 { margin-bottom: var(--space-3); }

.card p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-soft);
}

.card-link {
  margin-top: auto;
  padding-top: var(--space-6);
  padding-bottom: 0.15rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.card-link svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

a.card:hover .card-link svg { transform: translateX(4px); }

/* Karte mit Bild oben */
.card--media { padding: 0; }

.card--media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

/* Zoom nur bei Karten, die verlinken. Reine Bildkarten (Bekleidung) bleiben ruhig. */
a.card--media:hover img { transform: scale(1.04); }

.card--media .card-body { padding: var(--space-6) var(--space-8) var(--space-8); }

.card-media-frame { overflow: hidden; }

/* Dunkle Variante */
.card--dark {
  background: var(--forest-mid);
  border-color: rgba(184, 144, 42, 0.18);
  color: var(--cream);
}

.card--dark h3 { color: var(--cream); }
.card--dark p { color: var(--text-on-dark-soft); }


/* ---------- Bild-Text-Reihe ---------- */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}

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

/* Bild rechts statt links */
.feature-row--reverse .feature-media { order: 2; }

@media (max-width: 860px) {
  .feature-row--reverse .feature-media { order: 0; }
}

.feature-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.feature-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Kleine Bildunterschrift auf dem Bild */
.feature-caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: rgba(23, 31, 25, 0.94);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-pale);
}


/* ---------- Aufzaehlung mit Haken ---------- */

.check-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Kein Grid, kein Flex: sonst wuerde loser Text neben einem
   <strong> zu einem eigenen Rasterfeld und damit umbrechen.
   Das Zeichen liegt absolut, der Inhalt bleibt normaler Textfluss. */
.check-list li {
  position: relative;
  padding-left: 2.25rem;
  line-height: 1.6;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 3.1 8.3l1.1-1.1 2 2 4.6-4.6 1.1 1.1z' fill='%23b8902a'/%3E%3C/svg%3E");
  background-size: 78%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Auf dunklem Grund heller, damit der Haken sichtbar bleibt */
.section--dark .check-list li::before,
.card--dark .check-list li::before {
  border-color: var(--gold-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 3.1 8.3l1.1-1.1 2 2 4.6-4.6 1.1 1.1z' fill='%23d4a84a'/%3E%3C/svg%3E");
}


/* ---------- Hinweiskasten ---------- */

.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--parchment);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout--warn {
  background: rgba(140, 47, 34, 0.06);
  border-left-color: var(--warn);
}

.callout--dark {
  background: var(--forest-mid);
  border-left-color: var(--gold);
  color: var(--text-on-dark);
}

.callout-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--gold-text);
}

.callout--warn .callout-icon { color: var(--warn); }

.callout-icon svg { width: 100%; height: 100%; fill: currentColor; }

.callout h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.callout p { font-size: var(--text-sm); line-height: 1.7; }

@media (max-width: 640px) {
  .callout { grid-template-columns: 1fr; gap: var(--space-4); }
}


/* ---------- Marken ---------- */

.brand-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-8);
}

.brand-strip span {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: color var(--duration-normal) var(--ease-out-soft);
  cursor: default;
}

.brand-strip span:hover { color: var(--gold); }

.section--dark .brand-strip span { color: var(--text-on-dark-dim); }
.section--dark .brand-strip span:hover { color: var(--gold-light); }


/* ---------- Oeffnungszeiten ---------- */

.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-8);
  font-variant-numeric: tabular-nums;
}

.hours dt { font-weight: 500; }
.hours dd { margin: 0; text-align: right; }

.hours .is-closed { color: var(--text-muted); }

/* Aktueller Wochentag wird hervorgehoben */
.hours .is-today dt,
.hours .is-today dd {
  color: var(--gold-text);
  font-weight: 600;
}

.section--dark .hours .is-closed { color: var(--text-on-dark-dim); }
.section--dark .hours .is-today dt,
.section--dark .hours .is-today dd { color: var(--gold-light); }

/* Geoeffnet-Anzeige, wird per JS gesetzt */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  background: rgba(184, 144, 42, 0.12);
  color: var(--gold-text);
}

.open-status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.open-status[data-open="true"] {
  background: rgba(47, 68, 54, 0.12);
  color: #2f6b41;
}

.open-status[data-open="true"]::before {
  animation: pulse 2.4s var(--ease-out-soft) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}


/* ---------- Formulare ---------- */

.form { display: grid; gap: var(--space-6); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field label {
  font-size: var(--text-sm);
  font-weight: 500;
}

.field .hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.field input,
.field textarea,
.field select {
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid rgba(30, 24, 17, 0.18);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 144, 42, 0.16);
}

.field textarea { resize: vertical; min-height: 8rem; }

/* Zustimmung */
.field--check {
  flex-direction: row;
  align-items: start;
  gap: var(--space-3);
}

.field--check input { margin-top: 0.3rem; width: 1rem; height: 1rem; flex-shrink: 0; }

.field--check label { font-size: var(--text-sm); font-weight: 400; line-height: 1.6; }

.field--check a { color: var(--gold-text); }

/* Im dunklen Anmeldefeld die helle Stufe */
.newsletter-panel .field--check a,
.section--dark .field--check a { color: var(--gold-light); }

/* Honigtopf gegen Formular-Spam.
   Nicht per left:-9999px wegschieben — das vergroessert die Zeichenflaeche
   des Browsers. Stattdessen auf einen Punkt zusammenfalten. */
.field--honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.form-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}


/* ---------- Auf- und zuklappbar ---------- */

.accordion { border-top: 1px solid rgba(30, 24, 17, 0.12); }

.accordion details {
  border-bottom: 1px solid rgba(30, 24, 17, 0.12);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary:hover { color: var(--gold); }

.accordion summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.accordion details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }

.accordion details > div {
  padding-bottom: var(--space-6);
  max-width: var(--width-text);
  color: var(--text-soft);
}


/* ---------- Zahlenreihe ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-8);
}

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--gold-text);
  line-height: 1;
}

.stat span {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.section--dark .stat span { color: var(--text-on-dark-soft); }


/* ---------- Markenindex ----------
   81 Hersteller in vier Gruppen. Bewusst nicht der brand-strip: der
   traegt sieben Namen in Playfair, hier waere das eine Wand.
   Gruppen liegen untereinander ueber die volle Breite, die Namen
   darin mehrspaltig. Vier Spalten nebeneinander scheitern daran,
   dass die Waffengruppe 46 Eintraege hat und die anderen 7 bis 14 —
   das gibt eine lange Fahne und drei leere Spalten. */

.brand-index {
  margin-top: var(--space-8);
  text-align: left;
}

.brand-index__group + .brand-index__group {
  margin-top: var(--space-12);
}

.brand-index__group > h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--parchment-dim);
}

.brand-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Zwei Spalten auf dem Handy, bis zu acht auf dem Desktop.
     auto-fill statt auto-fit: sonst ziehen 7 Eintraege die Spalten
     auf vierfache Breite auseinander. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 0 var(--space-6);
}

.brand-index li {
  font-size: var(--text-sm);
  line-height: 1.35;
}

/* Tippflaeche: 17px Textzeile plus 2x8px ergibt 33px. Unter 32px
   trifft auf dem Handy niemand zuverlaessig. */
.brand-index a,
.brand-index li > span {
  display: block;
  padding-block: 8px;
  min-height: 32px;
  color: var(--text);
}

/* Verlinkte Marke: als Link erkennbar, nicht nur ueber die Farbe.
   Marken ohne gesicherte Herstellerseite stehen in derselben Farbe
   da — sonst sehen sie aus wie abgeschaltet. */
.brand-index a {
  text-decoration: underline;
  text-decoration-color: var(--parchment-dim);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out-soft),
              text-decoration-color var(--duration-fast) var(--ease-out-soft);
}

.brand-index a:hover,
.brand-index a:focus-visible {
  color: var(--gold-text);
  text-decoration-color: currentColor;
}

/* Logo im Fuss: Kachel mit Widder und GEUS (Original-Gruen #175322 auf
   --forest, der Kasten liegt nur knapp ueber dem Untergrund, der weisse
   Widder darin hat 9:1) und darunter das Wort WAFFEN in Kachelbreite.
   Stand 05.10.2026 auf Wunsch von Herrn Geus: kein goldenes "Waffen Geus"
   mehr darunter, das ueber den Rand der Kachel ragte. */
.footer-logo {
  display: block;
  width: 88px;
  margin-bottom: var(--space-4);
}

.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-logo-wort { margin-top: 0.4rem; }


/* ---------- Ergänzungen 07.10.2026 ---------- */

/* Links im Fließtext. Vorher Inline-Stil, jetzt Klasse, damit die Texte
   in WordPress als Textfeld bearbeitbar bleiben. */
.link-gold      { color: var(--gold-text); }
.link-gold-hell { color: var(--gold-light); }

/* Neuester Beitrag auf der Startseite, direkt unter der Leiste */
.news-strip { padding-top: var(--space-12); }

.news-teaser {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--parchment);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
  text-decoration: none;
  transition: box-shadow var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}

.news-teaser:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.news-teaser:hover .card-link svg { transform: translateX(4px); }

.news-teaser-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--gold-text);
}

.news-teaser-icon svg { width: 100%; height: 100%; fill: currentColor; }

.news-teaser-body { display: grid; gap: 0.35rem; }

.news-teaser-meta {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-text);
}

.news-teaser-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
}

.news-teaser-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-soft);
}

.news-teaser .card-link { margin-top: 0; padding-top: 0; white-space: nowrap; }

@media (max-width: 720px) {
  .news-teaser { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-6); }
  .news-teaser-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .news-teaser, .news-teaser:hover { transform: none; }
}

/* AI-generierte Bilder: sichtbarer Hinweis direkt am Bild.
   Praxisregel einfachbetrieb, Art. 50 Abs. 4 KI-VO. */
.ai-media { position: relative; }
.ai-media > a { position: relative; display: block; }

.ai-badge {
  position: absolute;
  z-index: 1;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #fff;
  background: rgba(23, 31, 25, 0.82);
  border-radius: var(--radius-sm);
  pointer-events: none;
}


/* ===== pages.css ===== */
/* =========================================================
   Waffen Geus — Seitenspezifisches
   ========================================================= */

/* ---------- eGun-Angebote ---------- */

.egun {
  position: relative;
}

.egun-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

/* Zeitstempel der letzten Aktualisierung */
.egun-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.egun-meta::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gold);
}

.egun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--space-6);
}

.egun-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(30, 24, 17, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-soft);
}

.egun-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.egun-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--parchment);
  overflow: hidden;
}

.egun-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.egun-item:hover .egun-thumb img { transform: scale(1.05); }

.egun-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.2rem 0.6rem;
  background: var(--forest);
  color: var(--gold-pale);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.egun-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6);
}

.egun-body h3 {
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-body);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.egun-cal {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.egun-price {
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gold-text);
}

/* Ladezustand */
.egun-skeleton .egun-thumb,
.egun-skeleton .egun-line {
  background: linear-gradient(
    100deg,
    var(--parchment) 30%,
    var(--parchment-dim) 50%,
    var(--parchment) 70%
  );
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.egun-line {
  height: 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.egun-line--short { width: 55%; }

@keyframes shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .egun-skeleton .egun-thumb,
  .egun-skeleton .egun-line { animation: none; }
}

/* Ersatzdarstellung, wenn keine Angebote vorliegen */
.egun-empty {
  padding: var(--space-16) var(--space-8);
  text-align: center;
  background: var(--parchment);
  border: 1px dashed rgba(184, 144, 42, 0.4);
  border-radius: var(--radius);
}

.egun-empty h3 { margin-bottom: var(--space-4); }

.egun-empty p {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--text-soft);
}

.egun-empty .btn-row { justify-content: center; }

/* Wird per JS umgeschaltet */
[hidden] { display: none !important; }


/* ---------- Aktuelles ---------- */

.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.post {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(30, 24, 17, 0.1);
}

.post:last-child { border-bottom: none; }

@media (max-width: 720px) {
  .post { grid-template-columns: 1fr; gap: var(--space-3); }
}

.post-date {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 0.4rem;
}

.post h3 { margin-bottom: var(--space-4); }

.post-body > p + p { margin-top: var(--space-4); }

.post-body p { color: var(--text-soft); }

/* Hervorgehobener Beitrag */
.post--feature {
  padding: var(--space-8);
  background: var(--parchment);
  border-radius: var(--radius);
  border-bottom: none;
}

/* Hausmesse-Beitrag (05.10.2026): Datum oben statt links, damit Text und
   Flyer nebeneinander genug Platz haben. */
.post--hausmesse { grid-template-columns: 1fr; gap: var(--space-3); }

.post-flyer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 720px) {
  .post-flyer-layout { grid-template-columns: 1fr; }
  .post-flyer { max-width: 20rem; }
}

.post-flyer { margin: 0; }

.post-flyer img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.post-flyer figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.post-flyer figcaption a {
  display: inline-block;
  /* Tippflaeche mobil mindestens 32px hoch */
  padding-block: 0.5rem;
  color: var(--gold-text);
}


/* ---------- Kontakt ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

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

.contact-block + .contact-block { margin-top: var(--space-8); }

.contact-block h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-text);
}

.contact-block address {
  font-style: normal;
  line-height: 1.8;
}

.contact-block a {
  display: inline-block;
  /* Telefonnummer und E-Mail sind echte Handlungen, keine Lesezeichen —
     sie brauchen eine Flaeche, die man mit dem Daumen trifft. */
  padding-block: 0.35rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 144, 42, 0.4);
  transition: border-color var(--duration-fast) var(--ease-out-soft),
              color var(--duration-fast) var(--ease-out-soft);
}

.contact-block a:hover { color: var(--gold); border-color: var(--gold); }

/* Karte */
.map-frame {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(30, 24, 17, 0.12);
  background: var(--parchment);
}

.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* DSGVO-Vorschaltung fuer die Karte */
.map-consent {
  display: grid;
  place-content: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-8);
  text-align: center;
}

.map-consent p {
  max-width: 40ch;
  font-size: var(--text-sm);
  color: var(--text-soft);
}


/* ---------- Rechtstexte ---------- */

.legal {
  max-width: var(--width-text);
}

.legal h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.legal h2:first-child { margin-top: 0; }

.legal h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.legal p,
.legal ul { margin-bottom: var(--space-4); color: var(--text-soft); }

.legal ul { padding-left: var(--space-6); }

.legal li { margin-bottom: var(--space-2); }

.legal a { color: var(--gold-text); }

.legal address {
  font-style: normal;
  line-height: 1.8;
  padding: var(--space-6);
  background: var(--parchment);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
}


/* ---------- Preis- und Leistungstabelle ---------- */

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-4) var(--space-4);
  text-align: left;
  border-bottom: 1px solid rgba(30, 24, 17, 0.1);
}

.table th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-text);
  border-bottom-color: rgba(184, 144, 42, 0.35);
}

/* Alle Spalten linksbündig unter ihrer Überschrift (Wunsch Stefan Geus, 09.10.2026).
   Die einzige Tabelle ist die Dokumenten-Tabelle auf munition.html, Preise gibt es keine. */

.table tbody tr {
  transition: background var(--duration-fast) var(--ease-out-soft);
}

.table tbody tr:hover { background: rgba(184, 144, 42, 0.05); }


/* ---------- Newsletter ---------- */

.newsletter-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 4vw, 4.5rem);
  background: var(--forest-mid);
  border: 1px solid rgba(184, 144, 42, 0.2);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
}

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

.newsletter-panel h2 { color: var(--cream); }
.newsletter-panel p { color: var(--text-on-dark-soft); }

.newsletter-panel .field label { color: var(--cream); }

.newsletter-panel .field input {
  background: rgba(247, 242, 232, 0.06);
  border-color: rgba(237, 229, 210, 0.2);
  color: var(--cream);
}

.newsletter-panel .field input::placeholder { color: var(--text-on-dark-dim); }

.newsletter-panel .field--check label { color: var(--text-on-dark-soft); }

.newsletter-panel .form-note { color: var(--text-on-dark-dim); }


/* ---------- Über uns: Bilder von Stefan Geus (08.10.2026) ---------- */

/* Nennung der Bildquelle (§ 13 UrhG), klein und zurückhaltend */
.bild-quelle {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Bildreihe unter „Der Mann hinter der Theke“: vier gleich große
   Quadrate, auf Tablet und Handy zwei nebeneinander */
.galerie {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-16);
}

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

@media (max-width: 480px) {
  .galerie { gap: var(--space-6) var(--space-4); }
}

.galerie-bild { margin: 0; }

.galerie-bild img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.galerie-bild figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-soft);
}

.galerie-bild figcaption p + .bild-quelle { margin-top: 0.25rem; }

/* Querformat (10.10.2026, Startnummer und Medaillen der EM 2026): eigene
   Zeile unter den Quadraten, mittig über zwei Spalten. Ein quadratischer
   Ausschnitt würde die Medaillen links und rechts abschneiden */
.galerie-bild--breit { grid-column: 2 / span 2; }

.galerie-bild--breit img { aspect-ratio: 1200 / 904; }

@media (max-width: 900px) {
  .galerie-bild--breit { grid-column: 1 / -1; }
}


/* ===== wordpress.css ===== */
/* =========================================================
   Waffen Geus — Ergänzungen, die nur das WordPress-Theme braucht

   Alles andere kommt unverändert aus der Gestaltung der Vorschau
   (site/assets/css). Hier steht nur, was es dort nicht gibt:
   frei geschriebene Beiträge, Meldungen der Formulare, die
   Meldungen des Newsletter-Plugins und die Leiste für angemeldete
   Nutzer.
   ========================================================= */

/* Angemeldet: Die Adminleiste von WordPress liegt über der Navigation */
body.admin-bar .site-nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-nav { top: 46px; }
}

/* WordPress-Klasse für Texte nur für Screenreader */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- Beiträge (Aktuelles) ---------- */

.post-titel {
  display: inline-block;
  /* Tippfläche mobil mindestens 32px hoch */
  padding-block: 0.25rem;
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.post-titel:hover { color: var(--gold-text); }

.post-leer { color: var(--text-soft); }

/* Inhalt aus dem Editor: Text, Listen, Bilder, Zitate */
.post-content > * + * { margin-top: var(--space-4); }
.post-content p,
.post-content li { color: var(--text-soft); }
.post-content a:not(.btn):not(.wp-block-button__link) { color: var(--gold-text); }
.post-content h2,
.post-content h3,
.post-content h4 { margin-top: var(--space-8); margin-bottom: var(--space-3); color: var(--text); }
.post-content h2 { font-size: var(--text-xl); }
.post-content h3 { font-size: var(--text-lg); }
.post-content ul:not(.check-list),
.post-content ol { padding-left: var(--space-6); }
.post-content ul:not(.check-list) li + li,
.post-content ol li + li { margin-top: var(--space-2); }
.post-content blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--gold);
  background: var(--parchment);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-content figure { margin: var(--space-6) 0; }
.post-content figcaption,
.post-content .wp-element-caption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.post-content table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.post-content th,
.post-content td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid rgba(30, 24, 17, 0.1); text-align: left; }
.post-content hr { border: 0; border-top: 1px solid rgba(30, 24, 17, 0.12); margin: var(--space-8) 0; }

/* Ausrichtung aus dem klassischen Editor (ältere Beiträge) */
.post-content .alignleft { float: left; margin: 0.3rem var(--space-6) var(--space-4) 0; max-width: 50%; }
.post-content .alignright { float: right; margin: 0.3rem 0 var(--space-4) var(--space-6); max-width: 50%; }
.post-content .aligncenter { display: block; margin-inline: auto; }
.post-content::after { content: ""; display: table; clear: both; }

/* Spalten und Schaltflächen aus dem Blockeditor */
.post-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.post-content .wp-block-column { flex: 1 1 16rem; min-width: 0; }
.post-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.post-content .wp-block-button__link {
  display: inline-flex;
  padding: 0.85rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--forest);
  background: var(--gold);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.post-content .wp-block-button__link:hover { background: var(--gold-light); }

/* Ein einzelner Beitrag auf eigener Seite */
.post-content--einzeln { font-size: var(--text-base); line-height: 1.75; }
.beitrag-zurueck { margin-top: var(--space-12); }

/* Hervorgehobener Beitrag: im Inhalt kein doppelter Abstand nach oben */
.post--feature .post-content > :first-child { margin-top: 0; }

/* Bild-Stil „AI-generiert“ aus dem Editor (Praxisregel, Art. 50 KI-VO) */
.wp-block-image.is-style-ai { position: relative; }
.wp-block-image.is-style-ai::after {
  content: "AI-generiert";
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(23, 31, 25, 0.82);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.wp-block-image.is-style-ai:has(figcaption)::after { bottom: calc(0.5rem + 2.2em); }

/* Seitenzahlen unter der Beitragsliste */
.beitrag-seiten { margin-top: var(--space-12); }
.beitrag-seiten ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.beitrag-seiten a,
.beitrag-seiten span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: 1px solid rgba(30, 24, 17, 0.15);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-sm);
}
.beitrag-seiten .current { background: var(--forest); border-color: var(--forest); color: var(--text-on-dark); }
.beitrag-seiten a:hover { border-color: var(--gold); color: var(--gold-text); }


/* ---------- Meldungen der Formulare ---------- */

.form-meldung {
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--gold);
  background: var(--parchment);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.form-meldung--ok { border-left-color: #2f6b3a; background: rgba(47, 107, 58, 0.08); }
.form-meldung--fehler { border-left-color: var(--warn); background: rgba(140, 47, 34, 0.06); }
.form-meldung p { margin: 0; color: var(--text); }
.form-meldung a { color: inherit; }
.form .form-meldung { margin-bottom: var(--space-2); }


/* ---------- Meldungen des Newsletter-Plugins ---------- */

.newsletter-meldung {
  padding: var(--space-6);
  background: #fff;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.7;
}
.newsletter-meldung > * + * { margin-top: var(--space-4); }
.newsletter-meldung p { color: var(--text); }
.newsletter-meldung a { color: var(--gold-text); }

/* Formulare, die das Plugin selbst ausgibt (Profil, Abmeldung) */
.newsletter-meldung .tnp-field { margin-top: var(--space-4); }
.newsletter-meldung .tnp-field label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.newsletter-meldung input[type="text"],
.newsletter-meldung input[type="email"],
.newsletter-meldung select {
  width: 100%;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid rgba(30, 24, 17, 0.18);
  border-radius: var(--radius-sm);
  font: inherit;
}
.newsletter-meldung input[type="submit"],
.newsletter-meldung button {
  display: inline-flex;
  margin-top: var(--space-4);
  padding: 0.85rem 1.75rem;
  font: inherit;
  font-weight: 600;
  color: var(--forest);
  background: var(--gold);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.newsletter-meldung input[type="submit"]:hover,
.newsletter-meldung button:hover { background: var(--gold-light); }