/* ============================================================
   Rabenhof Kræmerey zu Lübbe — Design-Entwurf
   Farbwelt: Weinrot & Pergament · modern mit mittelalterlichem Flair
   Schrift: IM Fell English (Überschriften) · EB Garamond (Fließtext)
            UnifrakturCook (Initialen / Zierde)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=UnifrakturCook:wght@700&display=swap');

:root{
  /* Weinrot */
  --wine-900:#360a0f;
  --wine-800:#4e0e15;
  --wine-700:#6a131c;   /* Korpus-Hintergrund (Stoff) */
  --wine-600:#831c26;
  --wine-500:#9c2731;
  --wine-accent:#b23a42;

  /* Pergament */
  --parch-50:#f8efda;
  --parch-100:#f3e6cb;
  --parch-200:#ecdab6;
  --parch-300:#e0caa0;
  --parch-400:#d0b585;
  --parch-line:#c9b48b;

  /* Tinte & Akzente */
  --ink:#2f2016;
  --ink-soft:#6a5236;
  --ink-faint:#8a7150;
  --gold:#bd9542;
  --gold-light:#dcbd6e;
  --moon:#f1e4a6;
  --navy:#203a5c;        /* aus dem Logo „Kræmerey“ – sparsam */
  --raven:#171109;

  --measure:68ch;
  --frame-max:2400px;
  --radius:3px;

  --shadow-soft:0 2px 10px rgba(54,10,15,.10);
  --shadow-card:0 6px 20px rgba(54,10,15,.14);
}

/* ---------- Reset / Grund ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'EB Garamond', Georgia, serif;
  /* Fluide Grundschrift: waechst mit der Viewport-Breite (min 18px … max 22px) */
  font-size:clamp(18px, 16.8px + 0.32vw, 22px);
  line-height:1.65;
  color:var(--ink);
  background-color:var(--wine-800);
  background-image:
    /* Lichtkante oben / Tiefe unten */
    radial-gradient(140% 90% at 50% -10%, rgba(178,58,66,.42), transparent 60%),
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.5), transparent 55%),
    /* unregelmäßige, organische Schattierung des Stoffs */
    radial-gradient(70% 55% at 16% 20%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(66% 62% at 86% 80%, rgba(0,0,0,.18), transparent 60%),
    /* Damast: Ornament-Ring + Knoten + Zwischen-Tupfen (Ogee-Versatz) */
    radial-gradient(circle at 50% 50%, transparent 0 4.4px, rgba(222,191,112,.07) 4.4px 5.8px, transparent 6.4px),
    radial-gradient(circle at 50% 50%, rgba(222,191,112,.13) 0 2.8px, transparent 4.6px),
    radial-gradient(circle at 50% 50%, rgba(222,191,112,.08) 0 2px, transparent 3.8px),
    /* gewebter Diagonal-Schimmer */
    repeating-linear-gradient(48deg, rgba(255,255,255,.018) 0 9px, rgba(0,0,0,.02) 9px 18px),
    /* feines Korn */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--wine-700), var(--wine-800));
  background-size:
    auto, auto, auto, auto,
    54px 92px, 54px 92px, 54px 92px,
    auto, auto, auto;
  background-position:
    center, center, center, center,
    0 0, 0 0, 27px 46px,
    center, center, center;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat, repeat, repeat,
    repeat, repeat, no-repeat;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--wine-600);color:var(--parch-50);}

/* ---------- Barrierefreiheit ---------- */
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:300;
  background:var(--wine-700);color:var(--moon);
  padding:10px 20px;border-radius:var(--radius);
  font-family:'EB Garamond', serif;font-size:17px;
  text-decoration:none;box-shadow:var(--shadow-card);
  transition:top .18s;
}
.skip-link:focus{top:16px;}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--radius);
}
/* In der Sidebar kein Kasten – Weinrot-Färbung genügt als Zustand */
nav.main a:focus-visible,
nav.main summary:focus-visible{
  outline:none;
  color:var(--wine-700);
}

/* ---------- Zentrale Pergament-Bahn ---------- */
.frame{
  width:86vw;
  max-width:var(--frame-max);
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background-color:var(--parch-100);
  background-image:
    radial-gradient(70% 55% at 22% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(60% 50% at 85% 90%, rgba(208,181,133,.45), transparent 55%),
    radial-gradient(40% 30% at 70% 35%, rgba(189,149,66,.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  box-shadow:
    0 0 0 1px rgba(54,10,15,.22),
    -14px 0 32px rgba(0,0,0,.40),
    14px 0 32px rgba(0,0,0,.40),
    0 6px 60px rgba(0,0,0,.45),
    0 0 150px rgba(0,0,0,.30),
    inset 0 0 60px rgba(0,0,0,.05);
  overflow:clip; /* clip statt hidden: kein Scroll-Container, kein Content-Clipping */
  display:grid;
  grid-template-columns:280px 1fr;
  /* Mittelzeile (sidenav+content) füllt den Rest → Footer bleibt am unteren Rand
     (Sticky-Footer), kein cremefarbener Leerblock unter dem Footer bei wenig Inhalt. */
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"topband topband" "sidenav content" "sitefooter sitefooter";
}
/* genähte Goldkante links/rechts – „Saum“ der Pergamentbahn */
.frame::before,
.frame::after{
  content:"";
  position:absolute;top:0;bottom:0;width:7px;z-index:5;
  background:linear-gradient(180deg,var(--wine-800),var(--wine-600),var(--wine-800));
  box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
.frame::before{left:0;}
.frame::after{right:0;}
header.topband{grid-area:topband;}
main{grid-area:content;}
footer.site{grid-area:sitefooter;}

/* ---------- Kopf / Banner (modern) ---------- */
.topband{
  background:
    radial-gradient(120% 160% at 12% 0%, var(--wine-500), transparent 60%),
    linear-gradient(180deg, var(--wine-600), var(--wine-800));
  position:relative;
}
.topband::after{ /* feine Goldlinie unten */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent);
}
.header-inner{
  max-width:1500px;margin:0 auto;padding:18px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;}
.crest{
  width:84px;height:84px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, var(--parch-50), var(--parch-200) 72%, var(--parch-300));
  display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--wine-800), 0 0 0 4px var(--gold), 0 4px 12px rgba(0,0,0,.35);
}
.crest img{width:72px;height:auto;display:block;}
.brand .name{
  font-family:'IM Fell English', serif;font-weight:700;
  font-size:clamp(24px,3.4vw,34px);line-height:1;color:var(--parch-50);
  letter-spacing:.4px;text-shadow:0 1px 0 rgba(0,0,0,.3);white-space:nowrap;
}
.head-actions{display:flex;align-items:center;gap:18px;}
.shop-pill{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'IM Fell English', serif;font-weight:500;font-size:16px;letter-spacing:.03em;
  color:var(--parch-50);padding:8px 16px;border:1px solid var(--gold);border-radius:999px;
  background:rgba(0,0,0,.14);transition:.18s;
}
.shop-pill:hover{background:rgba(0,0,0,.28);border-color:var(--gold-light);}
.shop-pill em{
  font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:var(--wine-800);padding:2px 8px;border-radius:999px;font-weight:700;
}

/* Burger-Umschalter: nur im Mobil-Layout sichtbar (s. Media-Query unten). Auf dem
   Desktop ist die Checkbox abgeschaltet und das Menü immer offen. */
.nav-toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);}
.nav-burger{display:none;}

/* ---------- Navigation (Sidebar) ---------- */
nav.main{
  grid-area:sidenav;
  align-self:start; /* Nav wächst nur auf Inhalts-Höhe → kompakte Schriftrolle */
  margin:0 16px 0 24px;  /* Abstand zum Weinrot-Rahmen (links) und zum Inhalt (rechts) */
  position:relative;
  z-index:0;
  background:transparent;
  padding:90px 14px 92px 24px; /* Inhalt auf den Rollenkörper rücken (klärt die Locken) */
}
/* Die Schriftrolle liegt auf einer eigenen Ebene HINTER dem Text, damit der
   drop-shadow (folgt der Alpha-Silhouette) nur die Rolle umfasst, nicht die Schrift. */
nav.main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  box-sizing:border-box;
  /* Pergament-Schriftrolle als dehnbarer 9-slice-Rahmen:
     Locken (oben 150px / unten 140px der Quelle) in den Border-Slices → scharf;
     Rollenkörper (Mitte) wird über »fill« gestreckt → nie unscharf. */
  border-style:solid;
  border-color:transparent;
  border-width:84px 0 78px 0;
  border-image-source:url('assets/scroll-sidebar.png?v=4');
  /* Links/rechts 10px der Quelle als (nicht gezeichnete, da Border-Breite 0) Seiten-Slices
     verwerfen → der halbtransparente weiße Antialiasing-Saum der Silhouette fällt weg, der
     opake Pergamentkern wird randlos gestreckt (sonst „aufgeklebter“ heller Rand). */
  border-image-slice:150 10 140 10 fill;
  border-image-repeat:stretch;
  /* kräftigerer weicher Schatten entlang der Rollenform → liegt plastisch auf dem Pergament */
  filter:drop-shadow(0 12px 22px rgba(54,10,15,.45)) drop-shadow(0 4px 7px rgba(54,10,15,.32));
}
nav.main ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
nav.main a{
  display:block;position:relative;padding:12px 14px 12px 24px;text-decoration:none;
  font-family:'IM Fell English', serif;font-size:18px;
  letter-spacing:.03em;color:var(--ink-soft);
  -webkit-text-stroke:.3px currentColor;   /* etwas „dicker" ohne synthetisches Fett */
  transition:.16s;
  /* Lange Labels (z. B. „Datenschutzerklärung") brechen/trennen statt über die
     schmale Rolle hinauszulaufen — greift nur, wenn das Wort sonst überliefe. */
  overflow-wrap:break-word;hyphens:auto;
}
nav.main a:hover{color:var(--wine-700);}
nav.main a[aria-current="page"]{
  color:var(--wine-700);
}
/* aktiver Tab: geschnörkelter Pfeil im linken Bund statt des Balkens */
nav.main a[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:20px;height:13px;
  background:url('assets/active-arrow.svg') left center/contain no-repeat;
}

/* Gruppe „Recht & Ordnung" mit aufklappbaren Untertabs (natives <details>, kein JS) */
nav.main .navgroup{margin-top:2px;}
nav.main summary{
  display:block;position:relative;cursor:pointer;list-style:none;
  padding:12px 18px 12px 24px;
  font-family:'IM Fell English', serif;font-size:18px;letter-spacing:.03em;
  color:var(--ink-soft);-webkit-text-stroke:.3px currentColor;transition:.16s;
  overflow-wrap:break-word;hyphens:auto;
}
nav.main summary::-webkit-details-marker{display:none;}
nav.main summary::after{content:"▸";float:right;font-size:13px;opacity:.55;transition:.16s;}
nav.main details[open] summary::after{content:"▾";}
nav.main summary:hover{color:var(--wine-700);}
nav.main .subnav{list-style:none;margin:0;padding:0;}
nav.main .subnav a{padding:9px 10px 9px 24px;font-size:16px;}
/* Bullet absolut im linken Bund → frisst keine Textbreite (sonst überläuft „Datenschutzerklärung") */
nav.main .subnav a:not([aria-current="page"])::before{
  content:"·";position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.55;
}

/* ---------- Layout-Container ---------- */
main{display:block;}
/* Urkunden-Spalte: engere Lesebreite, mittig */
.charter{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:6px 0;
}
/* Filigran-Ornamente an den äußeren Ecken der Pergament-Inhaltsfläche (am Rand) */
main{
  position:relative;
  background-image:
    url('assets/corner-tl.svg'),
    url('assets/corner-tr.svg'),
    url('assets/corner-bl.svg'),
    url('assets/corner-br.svg');
  background-position:left 14px top 14px, right 14px top 14px, left 14px bottom 14px, right 14px bottom 14px;
  background-repeat:no-repeat;
  background-size:96px;
}
.wrap{max-width:980px;margin:0 auto;padding:0 40px;}
.section{padding:60px 0;}
.section.tight{padding:42px 0;}

/* ---------- Überschriften ---------- */
h1,h2,h3{font-family:'IM Fell English', serif;color:var(--wine-700);font-weight:700;line-height:1.08;margin:0;}
h1{font-size:clamp(34px,5.5vw,54px);}
h2{font-size:clamp(26px,4vw,38px);}
h3{font-size:clamp(20px,2.6vw,25px);color:var(--wine-600);font-weight:600;}
.eyebrow{
  font-family:'IM Fell English', serif;font-weight:500;font-size:15px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:10px;
}
p{margin:0 0 1.05em;max-width:var(--measure);}
a{color:var(--wine-600);}
strong{color:var(--wine-700);}

/* Initiale / Drop Cap */
.dropcap::first-letter{
  font-family:'UnifrakturCook',serif;font-weight:700;
  font-size:4.4em;line-height:.72;float:left;
  margin:.06em .12em -.06em 0;color:var(--wine-600);
}

/* ---------- Zier-Trenner ---------- */
.rule{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:30px auto;max-width:520px;color:var(--gold);
}
.rule::before,.rule::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.rule .glyph{font-size:20px;color:var(--wine-600);transform:translateY(-1px);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:'IM Fell English', serif;font-weight:600;font-size:18px;letter-spacing:.02em;
  padding:13px 26px;border-radius:var(--radius);text-decoration:none;cursor:pointer;
  border:1px solid var(--wine-800);transition:.18s;
}
.btn-primary{background:var(--wine-600);color:var(--parch-50);box-shadow:var(--shadow-soft);}
.btn-primary:hover{background:var(--wine-700);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--wine-700);border-color:var(--gold);}
.btn-ghost:hover{background:rgba(189,149,66,.14);}

/* ---------- Hero (Startseite) ---------- */
.hero{
  text-align:center;padding:84px 32px 44px;position:relative;overflow:hidden;
  max-width:1040px;margin-inline:auto;
}
.hero .moon{
  position:absolute;width:min(560px,82vw);aspect-ratio:1;border-radius:50%;
  top:-14%;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(241,228,166,.55), rgba(241,228,166,.10) 52%, transparent 70%);
}
.hero > *{position:relative;z-index:1;}
.hero h1{font-size:clamp(40px,7vw,72px);}
.hero .tagline{
  font-style:italic;color:var(--ink-soft);font-size:clamp(19px,2.4vw,24px);
  max-width:46ch;margin:16px auto 30px;
}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- Krämerladen-Teaser (Online-Shop folgt) ---------- */
.shopteaser{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--wine-600),var(--wine-700));
  color:var(--parch-100);border-radius:6px;padding:40px 44px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;
  box-shadow:var(--shadow-card);
}
.shopteaser::before{
  content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(241,228,166,.30),transparent 68%);pointer-events:none;
}
.shopteaser .st-text{position:relative;}
.shopteaser .eyebrow{color:var(--gold-light);}
.shopteaser h2{color:var(--parch-50);margin-bottom:8px;}
.shopteaser p{color:var(--parch-200);max-width:48ch;margin:0;}
.shopteaser .st-tag{
  position:relative;font-family:'IM Fell English', serif;font-size:17px;letter-spacing:.05em;
  color:var(--wine-800);background:var(--gold-light);border:1px solid var(--gold);
  padding:12px 22px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.2);
}
@media(max-width:680px){.shopteaser{grid-template-columns:1fr;}}

/* ---------- Bild-Platzhalter ---------- */
.ph{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background-color:var(--parch-200);
  background-size:cover;background-position:center; /* Foto füllt die Kachel */
  border:1px solid var(--parch-line);
  display:grid;place-items:center;min-height:200px;color:var(--ink-faint);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -30px 40px rgba(54,10,15,.12);
}
.ph span{
  font-family:'Courier New',monospace;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(248,239,218,.78);padding:5px 10px;border-radius:2px;
  border:1px solid var(--parch-line);
}

/* ---------- Waren-Kacheln ---------- */
.wares{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ware{
  background:var(--parch-50);border:1px solid var(--parch-line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-soft);transition:.2s;
}
.ware:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);}
.ware .ph{min-height:170px;border:none;border-bottom:1px solid var(--parch-line);}
.ware .body{padding:16px 18px 20px;}
.ware h3{margin-bottom:5px;}
.ware p{font-size:16.5px;color:var(--ink-soft);margin:0;}

/* Gefolge / Team: lesbare Profil-Reihen statt schmaler Kacheln */
.crew{display:flex;flex-direction:column;gap:26px;margin-top:32px;}
.crew-member{
  display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;
  background:var(--parch-50);border:1px solid var(--parch-200);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);
}
.crew-portrait{
  flex:0 0 200px;width:200px;aspect-ratio:4/5;
  background-size:cover;background-position:center top;
  border-radius:var(--radius);border:1px solid var(--parch-200);
}
.crew-text{flex:1 1 360px;min-width:0;}
.crew-text h3{margin:0 0 3px;font-size:clamp(23px,2.2vw,29px);}
.crew-role{color:var(--gold);font-style:italic;margin:0 0 16px;font-size:clamp(16px,1.3vw,18px);}
.crew-bio{color:var(--ink);line-height:1.64;white-space:pre-line;max-width:68ch;font-size:clamp(16px,1.05vw,17.5px);}
.crew-loc{color:var(--ink-soft);font-size:15px;margin:14px 0 0;}
@media (max-width:560px){.crew-member{padding:18px;gap:18px;}.crew-portrait{width:150px;flex-basis:150px;}}

/* Kalender-Monatsansicht (Untermodul Kalender ⊂ Termine) */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 20px;}
.cal-title{margin:0;}
.cal-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-dow{text-align:center;font-family:'IM Fell English',serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:6px 0 2px;}
.cal-cell{min-height:106px;background:var(--parch-50);border:1px solid var(--parch-200);border-radius:var(--radius);padding:6px 7px;display:flex;flex-direction:column;gap:4px;}
.cal-cell.empty{background:transparent;border:none;}
.cal-cell.today{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
.cal-daynum{font-family:'IM Fell English',serif;font-size:14px;font-weight:600;color:var(--ink-soft);}
.cal-cell.today .cal-daynum{color:var(--wine-700);}
.cal-chip{display:block;font-size:12.5px;line-height:1.25;background:var(--wine-700);color:var(--parch-50);border-radius:3px;padding:3px 6px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-chip:hover{background:var(--wine-600);}
@media (max-width:640px){.cal-grid{gap:4px;}.cal-cell{min-height:74px;padding:4px 5px;}.cal-chip{font-size:11px;padding:2px 4px;}.cal-dow{font-size:11px;}}

/* ---------- Event-Teaser auf Startseite ---------- */
.teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}

/* ---------- Markttage / Eventliste ---------- */
.season-head{
  display:flex;align-items:baseline;gap:14px;margin:38px 0 18px;
  border-bottom:2px solid var(--parch-300);padding-bottom:8px;
}
.season-head h2{color:var(--wine-700);}
.season-head .count{font-style:italic;color:var(--ink-faint);font-size:16px;}

.event{
  display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:center;
  background:var(--parch-50);border:1px solid var(--parch-line);border-left:5px solid var(--wine-600);
  border-radius:var(--radius);padding:18px 22px;margin-bottom:14px;box-shadow:var(--shadow-soft);
  transition:.18s;
}
.event:hover{transform:translateX(2px);box-shadow:var(--shadow-card);}
.event .date{
  text-align:center;line-height:1;border-right:1px solid var(--parch-300);padding-right:18px;
}
.event .date .d{font-family:'IM Fell English', serif;font-weight:700;font-size:30px;color:var(--wine-700);}
.event .date .m{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px;}
.event .info h3{margin:0 0 3px;}
.event .info .loc{color:var(--ink-soft);font-size:16.5px;}
.event .info .meta{font-size:15px;color:var(--ink-faint);font-style:italic;margin-top:3px;}
.badge{
  font-family:'IM Fell English', serif;font-size:14px;letter-spacing:.05em;
  padding:5px 12px;border-radius:999px;white-space:nowrap;
  background:rgba(189,149,66,.16);color:var(--wine-700);border:1px solid var(--gold);
}
.badge.tbc{background:rgba(32,58,92,.10);color:var(--navy);border-color:rgba(32,58,92,.4);}

/* ---------- Hinweis-Kasten (Platzhalter / Rechtshinweis) ---------- */
.note{
  background:rgba(189,149,66,.12);border:1px dashed var(--gold);border-radius:var(--radius);
  padding:16px 20px;margin:24px 0;font-size:16px;color:var(--ink-soft);
}
.note strong{color:var(--wine-700);}

/* ---------- Info-Karte (Kontakt etc.) ---------- */
.card{
  background:var(--parch-50);border:1px solid var(--parch-line);border-radius:var(--radius);
  padding:24px 28px;box-shadow:var(--shadow-soft);
}

/* ---------- Rechtstexte / Lesespalte ---------- */
.legal{max-width:74ch;}
.legal h2{margin-top:40px;margin-bottom:10px;font-size:clamp(24px, 20px + 1vw, 30px);}
.legal h3{margin-top:24px;margin-bottom:6px;}
.legal p,.legal li{font-size:clamp(18px, 17px + 0.36vw, 21.5px);line-height:1.62;}
.legal ul{padding-left:1.2em;}
.legal li{margin-bottom:.4em;}
.legal .lead{font-size:clamp(20px, 18px + 0.5vw, 24px);color:var(--ink-soft);}

table.cookies{width:100%;border-collapse:collapse;margin:18px 0;font-size:16px;}
table.cookies th,table.cookies td{
  text-align:left;padding:11px 14px;border:1px solid var(--parch-300);vertical-align:top;
}
table.cookies th{
  background:var(--wine-700);color:var(--parch-50);font-family:'IM Fell English', serif;font-weight:500;
  letter-spacing:.03em;
}
table.cookies tr:nth-child(even) td{background:rgba(208,181,133,.18);}

/* ---------- Fuß ---------- */
footer.site{
  background:linear-gradient(180deg,var(--wine-700),var(--wine-800));
  color:var(--parch-200);border-top:3px solid var(--gold);margin-top:30px;
}
footer.site .finner{
  max-width:1500px;margin:0 auto;padding:44px 36px 34px;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:48px;align-items:start;
}
footer.site h4{
  font-family:'IM Fell English', serif;font-weight:600;color:var(--moon);
  font-size:18px;margin:0 0 12px;letter-spacing:.04em;
}
footer.site a{color:var(--parch-200);text-decoration:none;}
footer.site a:hover{color:var(--moon);text-decoration:underline;}
footer.site ul{list-style:none;margin:0;padding:0;}
footer.site li{margin-bottom:8px;font-size:16.5px;}
footer.site .brandline{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
footer.site .fcrest{
  width:62px;height:62px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, var(--parch-50), var(--parch-200) 72%, var(--parch-300));
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--wine-900),0 0 0 4px var(--gold);
}
footer.site .fcrest img{width:52px;height:auto;display:block;}
footer.site .brandline .n{font-family:'IM Fell English', serif;font-size:24px;color:var(--parch-50);}
footer.site p{color:var(--parch-200);font-size:16px;max-width:none;}
.legalbar{
  background:var(--wine-900);color:var(--parch-300);font-size:14px;
  text-align:center;padding:14px 20px;letter-spacing:.02em;
}
.legalbar a{color:var(--parch-200);}

/* ---------- Draft-Stempel (nur Entwurf) ---------- */
.draftflag{
  position:fixed;bottom:16px;left:16px;z-index:50;
  font-family:'IM Fell English', serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--wine-800);color:var(--moon);border:1px solid var(--gold);
  padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-card);opacity:.92;
}

/* ---------- Responsiv ---------- */
/* Eck-Ornamente nur auf breiten Screens – sonst zu nah am zentrierten Text. */
@media (max-width:1500px){
  main{background-image:none;}
}
@media (max-width:920px){
  .frame{grid-template-columns:236px 1fr;}
}
@media (max-width:820px){
  .wares{grid-template-columns:1fr 1fr;}
  footer.site .finner{grid-template-columns:1fr 1fr;}
}
@media (max-width:660px){
  .frame{
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr auto; /* einspaltig: Content-Zeile (3.) füllt den Rest */
    grid-template-areas:"topband" "sidenav" "content" "sitefooter";
  }
  /* Schriftrolle nur in der Sidebar – im Mobil-Layout (Burger-Drawer) abschalten */
  nav.main{margin:0;border-bottom:1px solid var(--parch-300);background:var(--parch-100);box-shadow:0 2px 6px rgba(54,10,15,.06);padding:0;}
  nav.main::before{display:none;}

  /* Burger-Leiste (Label der versteckten Checkbox) */
  .nav-burger{
    display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;
    padding:14px 20px;
    font-family:'IM Fell English', serif;font-size:18px;letter-spacing:.04em;
    color:var(--wine-700);-webkit-text-stroke:.3px currentColor;
  }
  /* drei Balken aus einem <span> + ::before/::after */
  .nav-burger-bars,
  .nav-burger-bars::before,
  .nav-burger-bars::after{
    content:"";display:block;width:24px;height:2px;border-radius:2px;
    background:currentColor;transition:transform .2s, background .2s, top .2s;
  }
  .nav-burger-bars{position:relative;}
  .nav-burger-bars::before{position:absolute;left:0;top:-7px;}
  .nav-burger-bars::after{position:absolute;left:0;top:7px;}
  /* geöffnet → Balken werden zum „X“ */
  .nav-toggle:checked ~ .nav-burger .nav-burger-bars{background:transparent;}
  .nav-toggle:checked ~ .nav-burger .nav-burger-bars::before{top:0;transform:rotate(45deg);}
  .nav-toggle:checked ~ .nav-burger .nav-burger-bars::after{top:0;transform:rotate(-45deg);}
  /* Tastatur-Fokus sichtbar machen (die Checkbox selbst ist visuell versteckt) */
  .nav-toggle:focus-visible ~ .nav-burger{outline:2px solid var(--wine-600);outline-offset:-2px;}

  /* Menü standardmäßig eingeklappt; nur die oberste Liste umschalten */
  nav.main > ul{display:none;flex-direction:column;border-top:1px solid var(--parch-300);}
  .nav-toggle:checked ~ ul{display:flex;}

  /* Einträge als vertikale Liste im Drawer */
  nav.main a{border-left:none;border-bottom:1px solid var(--parch-200);padding:13px 20px;font-size:17px;}
  nav.main a:hover{background:rgba(54,10,15,.04);border-left-color:transparent;}
  nav.main a[aria-current="page"]{border-left-color:transparent;background:rgba(120,20,30,.07);color:var(--wine-700);}

  /* „Recht & Ordnung“ bleibt eine aufklappbare Untergruppe (natives <details>) */
  nav.main .navgroup{margin-top:0;}
  nav.main summary{border-left:none;padding:13px 20px;font-size:17px;border-bottom:1px solid var(--parch-200);}
  nav.main summary::after{font-size:14px;}
  nav.main .subnav{background:rgba(54,10,15,.03);}
  nav.main .subnav a{padding:11px 20px 11px 36px;font-size:16px;}
  nav.main .subnav a::before{display:none;}
}
@media (max-width:620px){
  .header-inner{flex-wrap:wrap;gap:12px;padding:14px 20px;}
  .brand .name{font-size:24px;white-space:normal;}
  .wares{grid-template-columns:1fr;}
  .teaser-grid{grid-template-columns:1fr;}
  footer.site .finner{grid-template-columns:1fr;}
  .event{grid-template-columns:72px 1fr;}
  .event .badge{grid-column:2;justify-self:start;margin-top:6px;}
  .wrap,.header-inner{padding-left:20px;padding-right:20px;}
  .draftflag{display:none;}
}

/* ---------- IM Fell English: nur ein Schnitt → synthetisches Fett vermeiden ---------- */
h1,h2,h3,.brand .name,nav.main a,nav.main a[aria-current="page"],nav.main summary,.btn,.eyebrow,
.shop-pill,.badge,.st-tag,.event .date .d,table.cookies th,
footer.site h4,footer.site .brandline .n,.draftflag{ font-weight:400; }

/* Cookie-Banner-Vorschau (Cookie-Erklärung; Inhalt kommt aus dem CMS) */
.cookie-preview {
  background: linear-gradient(180deg, var(--wine-700), var(--wine-800));
  color: var(--parch-100);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.cookie-preview .txt { max-width: 60ch; }
.cookie-preview h3 { color: var(--moon); margin: 0 0 6px; }
.cookie-preview p { color: var(--parch-200); font-size: 16px; margin: 0; max-width: none; }
.cookie-preview .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-preview .btn-ghost { color: var(--moon); border-color: var(--moon); }
.cookie-preview .btn-ghost:hover { background: rgba(241,228,166,.14); }
@media (max-width: 680px) { .cookie-preview { grid-template-columns: 1fr; } }

/* Echter Cookie-Hinweis am Seitenfuß (MainLayout) — gleiche Optik wie die Vorschau */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  max-width:780px; margin:0 auto;
  background:linear-gradient(180deg, var(--wine-700), var(--wine-800));
  color:var(--parch-100); border:1px solid var(--gold); border-radius:6px;
  padding:18px 22px; box-shadow:var(--shadow-card);
  display:grid; gap:14px 18px; grid-template-columns:1fr auto; align-items:center;
}
.cookie-banner .txt{ max-width:66ch; }
.cookie-banner h3{
  font-family:'IM Fell English', serif; color:var(--moon);
  margin:0 0 5px; font-size:clamp(19px, 1.4vw + 14px, 23px);
}
.cookie-banner p{ color:var(--parch-200); margin:0; line-height:1.5; font-size:clamp(15px, 0.5vw + 13px, 17px); }
.cookie-banner p a{ color:var(--moon); text-decoration:underline; }
.cookie-banner .acts{ display:flex; gap:10px; flex-wrap:wrap; }
/* Krümelwächterin: sitzt auf der oberen Bannerkante, Pfötchen auf dem Rand. */
.cookie-cat{
  position:absolute; right:22px; top:-58px; width:66px; height:auto;
  pointer-events:none; transform:rotate(-5deg);
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.4));
}
@media (max-width:680px){
  .cookie-banner{ grid-template-columns:1fr; left:10px; right:10px; bottom:10px; }
  .cookie-cat{ width:54px; top:-48px; right:14px; }
}

/* =====================================================================
   CMS-Inhaltsseiten: Beiträge, Termin-/Beitragsdetail, Waren, Partner
   ===================================================================== */

/* Termin-Zeilen & -Teaser sind nun Links → Link-Styling der Karte neutralisieren */
a.event{text-decoration:none;color:inherit;}
a.event:hover{color:inherit;}

/* „Alle … ansehen“ unter Karten-Reihen */
.more-link{margin-top:22px;}
.more-link a{
  font-family:'IM Fell English', serif;font-size:17px;letter-spacing:.02em;
  color:var(--wine-700);text-decoration:none;border-bottom:1px solid transparent;transition:.16s;
}
.more-link a:hover{border-bottom-color:var(--gold);}

/* Zurück-Link auf Detailseiten */
.backlink{
  display:inline-block;margin-bottom:14px;text-decoration:none;
  font-family:'IM Fell English', serif;font-size:16px;color:var(--ink-soft);transition:.16s;
}
.backlink:hover{color:var(--wine-700);}

/* Beitrags-Karte: Datum über dem Titel */
.post-card .post-date{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;
}

/* Detail-Kopf: Eckdaten (Wann/Wo/Stand) als kompakte Definitionsliste */
.detail-meta{
  display:flex;flex-wrap:wrap;gap:12px 36px;margin:18px 0 8px;padding:0;
  border-top:1px solid var(--parch-300);border-bottom:1px solid var(--parch-300);
  padding:16px 0;
}
.detail-meta>div{display:flex;flex-direction:column;gap:4px;}
.detail-meta dt{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0;
}
.detail-meta dd{margin:0;font-size:18px;color:var(--ink);}

/* großes Kopfbild auf Detailseiten (nutzt .ph-Basis) */
.detail-hero{min-height:340px;margin:24px 0;}

/* Fließtext-Vorlauf, wenn kein langer Inhalt existiert */
.lead-text{font-size:20px;color:var(--ink-soft);max-width:66ch;margin:22px 0;}

.detail-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

/* Kategorien-Etiketten */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px;}
.cat{
  font-family:'IM Fell English', serif;font-size:13.5px;letter-spacing:.04em;
  padding:3px 11px;border-radius:999px;
  background:rgba(189,149,66,.14);color:var(--wine-700);border:1px solid var(--gold);
}

/* Bildergalerie im Beitrag */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0;}
.gallery .ph{min-height:150px;}

/* Leser-Kommentare (Anzeige; Eingabeformular folgt später) */
.comments-head{color:var(--wine-700);margin-bottom:14px;}
.comments{display:flex;flex-direction:column;gap:14px;}
.comment{
  background:var(--parch-50);border:1px solid var(--parch-line);border-left:4px solid var(--gold);
  border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow-soft);
}
.comment-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;}
.comment-author{font-family:'IM Fell English', serif;font-size:18px;color:var(--wine-700);}
.comment-date{font-size:14px;color:var(--ink-faint);font-style:italic;}
.comment p{margin:0;color:var(--ink);}

/* Partner / Förderer-Reihe */
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:8px;}
.partner{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:120px;min-height:64px;padding:12px 18px;text-decoration:none;
  background:var(--parch-50);border:1px solid var(--parch-line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);transition:.2s;
}
.partner:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);}
.partner img{max-height:56px;max-width:160px;width:auto;height:auto;display:block;}
.partner span{font-family:'IM Fell English', serif;font-size:18px;color:var(--wine-700);}

@media (max-width:660px){
  .gallery{grid-template-columns:1fr 1fr;}
  .detail-meta{gap:10px 24px;}
}