/* ============================================================
   OM-EVENTS — Design-System (Theme-Stylesheet)
   Hybrid: warmes Sand-Hell für Shop und Lesen, dunkle Espresso-Bühne
   für Nav, Hero, Event-Bänder und Footer.
   Leitakzent Gold/Kupfer aus dem Logo-Emblem. Petrol als leiser Zweitakzent.
   Schrift: Marcellus (Überschriften) + Jost (UI, Preise, Fließtext).
   Faustregel: Gold = Erlebnisse und Kaufaktion, Petrol = Werkzeuge und Waren.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@400;500;600&display=swap');

:root{
  /* Hell (Shop, Lesen) */
  --ink:#1b1714;              /* Überschriften / Text auf Hell */
  --body:#4a423a;            /* Fließtext auf Hell */
  --muted:#6b5f50;           /* gedämpfter Text auf Hell */
  --ground:#f4eee2;          /* Grund, Sand hell */
  --card:#fbf7ef;            /* Karten auf Hell */
  --hairline:rgba(27,23,20,0.12);   /* Kartenrand / Trennlinien auf Hell */
  --hairline-strong:rgba(27,23,20,0.22);

  /* Dunkle Bühne */
  --stage:#1c1512;           /* Espresso, Hero / Event-Bänder */
  --stage-deep:#17110e;      /* tiefer, Nav / Footer */
  --tile:#241a16;            /* Bild-Platzhalter dunkel */
  --on-dark:#f3ead8;         /* Text hell auf Dunkel */
  --on-dark-muted:#c3b6a5;   /* gedämpft auf Dunkel */
  --on-dark-faint:#8c7f70;   /* Footer-Text gedämpft */
  --hairline-dark:rgba(243,234,216,0.14);

  /* Gold (Leitakzent) */
  --gold:#c0892e;            /* Basis */
  --gold-bright:#e3bd6b;     /* hell, auf Dunkel */
  --gold-deep:#9a6a1f;       /* tief, Text auf Hell */

  /* Petrol (Zweitakzent, Werkzeuge/Waren) */
  --petrol:#1f6f6a;          /* auf Hell */
  --petrol-edge:#5fb4ac;     /* Rand auf Dunkel */
  --petrol-text:#8fd0c8;     /* Text auf Dunkel */

  --font-display:'Marcellus', Georgia, serif;
  --font-ui:'Jost', system-ui, sans-serif;

  --container-max:1200px;
  --container-pad:64px;
  --container-pad-mobile:26px;

  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --dur:180ms;
  --radius:3px;
}

*{box-sizing:border-box;}
html,body{margin:0;background:var(--ground);}
body{font-family:var(--font-ui);color:var(--body);font-weight:400;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--gold-deep);text-underline-offset:3px;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--ink);letter-spacing:0.01em;}

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

/* ============================================================
   Bühne (dunkle Bänder): Hero, Event-Band, Nav, Footer erben von hier.
   ============================================================ */
.oe-stage{background:var(--stage);color:var(--on-dark);}
.oe-stage h1,.oe-stage h2,.oe-stage h3{color:var(--on-dark);}
.oe-stage a{color:var(--gold-bright);}

/* ---- Marken-Lockup (Emblem + Wortmarke) ---- */
.oe-brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;}
.oe-brand__emblem{width:44px;height:44px;flex:none;}
.oe-brand__word{display:flex;flex-direction:column;line-height:1;}
.oe-brand__word b{font:400 22px/1 var(--font-display);letter-spacing:0.14em;color:var(--on-dark);text-transform:uppercase;}
.oe-brand__word b .dot{color:var(--gold-bright);margin:0 0.18em;}
.oe-brand__word small{font:500 9px/1.4 var(--font-ui);letter-spacing:0.34em;text-transform:uppercase;color:var(--on-dark-faint);margin-top:6px;}

/* ============================================================
   Kopf: dunkle Top-Navigation (stage-deep).
   ============================================================ */
.oe-site-header{background:var(--stage-deep);border-bottom:1px solid var(--hairline-dark);}
.oe-topbar{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:20px 0;}
.oe-nav ul{list-style:none;display:flex;gap:36px;margin:0;padding:0;flex-wrap:wrap;align-items:center;}
.oe-nav a{font:500 12px/1.4 var(--font-ui);letter-spacing:0.2em;text-transform:uppercase;color:var(--on-dark-muted);text-decoration:none;padding:8px 0;transition:color var(--dur) var(--ease);}
.oe-nav a:hover,.oe-nav .current-menu-item a{color:var(--gold-bright);}
.oe-topbar__tools{display:flex;align-items:center;gap:22px;}
.oe-currency{font:500 12px/1 var(--font-ui);letter-spacing:0.12em;color:var(--on-dark-faint);}
.oe-cart-link{font:500 12px/1 var(--font-ui);letter-spacing:0.16em;text-transform:uppercase;color:var(--on-dark-muted);text-decoration:none;}
.oe-cart-link:hover{color:var(--gold-bright);}

/* ============================================================
   Hero (dunkle Bühne).
   ============================================================ */
.oe-hero{background:var(--stage);text-align:center;padding:104px 26px 96px;position:relative;overflow:hidden;}
/* Optionales Stimmungs-Hintergrundbild hinter dem Hero. Wird über das
   Element .oe-hero__bg (inline background-image) gelegt und liegt unter dem
   Schleier. Ohne Bild bleibt der Hero die ruhige Espresso-Fläche. */
.oe-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;}
/* Schleier: dunkel-warm, hält Logo und Text lesbar; oben etwas dichter,
   unten sanfter Übergang in die Bühne. Gold-Glut als Akzent darüber. */
.oe-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,17,14,0.82) 0%,rgba(28,21,18,0.72) 45%,rgba(28,21,18,0.9) 100%);}
.oe-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 62% 60% at 50% 32%,rgba(224,189,107,0.14),rgba(28,21,18,0) 68%);}
.oe-hero--image{padding-top:120px;padding-bottom:112px;}
.oe-hero__inner{position:relative;z-index:2;max-width:820px;margin:0 auto;}
.oe-hero__emblem{width:96px;height:96px;margin:0 auto 26px;}
/* Volles helles Logo (echte Pinselschrift) auf der Bühne. */
.oe-hero__logo{width:auto;height:132px;max-width:88%;margin:0 auto 8px;display:block;}
.oe-hero__word{font:400 20px/1 var(--font-display);letter-spacing:0.34em;text-transform:uppercase;color:var(--on-dark);margin:0 0 4px;}
.oe-hero__word .dot{color:var(--gold-bright);margin:0 0.2em;}
@media(max-width:820px){.oe-hero__logo{height:96px;}}
.oe-eyebrow{font:500 12px/1.6 var(--font-ui);letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-bright);}
.oe-hero__title{font:400 50px/1.16 var(--font-display);color:var(--on-dark);margin:22px 0 0;letter-spacing:0.005em;text-wrap:balance;}
.oe-hero__sub{font:400 20px/1.7 var(--font-ui);color:var(--on-dark-muted);margin:22px auto 0;max-width:620px;text-wrap:balance;}
.oe-hero__cta{margin-top:40px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

/* ============================================================
   Buttons.
   Gold gefüllt = einzige satte Fläche (Kaufaktion). Rest ist Linie.
   ============================================================ */
.oe-btn{display:inline-block;font:600 12px/1 var(--font-ui);letter-spacing:0.2em;text-transform:uppercase;
  padding:17px 32px;min-height:48px;border-radius:var(--radius);cursor:pointer;text-decoration:none;text-align:center;
  border:1px solid transparent;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
/* Primär: gold gefüllt (Kaufen, In den Warenkorb, Bestellen) */
.oe-btn--gold{background:var(--gold);border-color:var(--gold);color:#231703;}
.oe-btn--gold:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:#231703;}
/* Linie auf Dunkel */
.oe-btn--ghost-dark{background:transparent;border-color:var(--hairline-dark);color:var(--on-dark);}
.oe-btn--ghost-dark:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
/* Linie auf Hell */
.oe-btn--ghost{background:transparent;border-color:var(--hairline-strong);color:var(--ink);}
.oe-btn--ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep);}

/* ============================================================
   Sektionen (Hell).
   ============================================================ */
.oe-section{padding:88px 0;}
.oe-section--tight{padding:64px 0;}
.oe-section-head{max-width:760px;margin:0 auto 52px;text-align:center;}
.oe-h2{font:400 40px/1.18 var(--font-display);color:var(--ink);margin:14px 0 0;text-wrap:balance;}
.oe-lead{font:400 19px/1.7 var(--font-ui);color:var(--muted);margin:18px auto 0;max-width:640px;}
.oe-rule{height:1px;background:var(--hairline);border:none;margin:0;}
.oe-rule--gold{height:2px;width:56px;background:var(--gold);border:none;margin:0 auto;}

/* ============================================================
   Kategorie-Marken (Gold/Petrol-Logik).
   Gold = Erlebnisse/Events. Petrol = Werkzeuge/Waren (Kurs, Material, Buch),
   als dünne Umriss-Marke, nicht gefüllt.
   ============================================================ */
.oe-tag{display:inline-block;font:600 10px/1 var(--font-ui);letter-spacing:0.2em;text-transform:uppercase;
  padding:6px 11px;border-radius:2px;border:1px solid;background:transparent;}
.oe-tag--gold{color:var(--gold-deep);border-color:var(--gold);}
.oe-tag--petrol{color:var(--petrol);border-color:var(--petrol);}
/* Auf dunklen Flächen/Thumbnails helleres Petrol und Gold */
.oe-stage .oe-tag--gold,.oe-card__media--dark .oe-tag--gold{color:var(--gold-bright);border-color:var(--gold-bright);}
.oe-stage .oe-tag--petrol,.oe-card__media--dark .oe-tag--petrol{color:var(--petrol-text);border-color:var(--petrol-edge);}

/* ============================================================
   Shop-Raster und Karten (Hell).
   ============================================================ */
.oe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.oe-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
.oe-card:hover{border-color:var(--hairline-strong);transform:translateY(-2px);}
.oe-card__media{position:relative;aspect-ratio:4/5;background:var(--tile);overflow:hidden;}
.oe-card__media img{width:100%;height:100%;object-fit:cover;}
.oe-card__badge{position:absolute;top:14px;left:14px;}
.oe-card__body{display:flex;flex-direction:column;gap:12px;padding:22px 24px 26px;flex:1;}
.oe-card__title{font:400 23px/1.28 var(--font-display);color:var(--ink);margin:0;}
.oe-card__desc{font:400 15px/1.6 var(--font-ui);color:var(--muted);margin:0;flex:1;}
.oe-card__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;}
.oe-price{font:500 18px/1 var(--font-ui);letter-spacing:0.02em;color:var(--gold-deep);font-feature-settings:'tnum';white-space:nowrap;}
.oe-price del{color:var(--muted);opacity:0.8;margin-right:8px;font-weight:400;}
.oe-price ins{text-decoration:none;color:var(--gold-deep);}
.oe-card__cta{font:600 11px/1 var(--font-ui);letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:5px;transition:color var(--dur) var(--ease);}
.oe-card__cta:hover{color:var(--gold-deep);}

/* ============================================================
   Event-Band (dunkle Bühne, wiederverwendet).
   Erlebnisse tragen Gold.
   ============================================================ */
.oe-band{background:var(--stage);color:var(--on-dark);padding:84px 0;}
.oe-band .oe-h2{color:var(--on-dark);}
.oe-band .oe-lead{color:var(--on-dark-muted);}
.oe-band .oe-rule{background:var(--hairline-dark);}
.oe-events{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:52px;}
.oe-event{display:grid;grid-template-columns:112px 1fr;gap:24px;align-items:center;
  border:1px solid var(--hairline-dark);border-radius:var(--radius);padding:24px;background:rgba(243,234,216,0.02);}
.oe-event__date{text-align:center;border-right:1px solid var(--hairline-dark);padding-right:20px;}
.oe-event__date .d{font:400 34px/1 var(--font-display);color:var(--gold-bright);}
.oe-event__date .m{font:500 11px/1 var(--font-ui);letter-spacing:0.2em;text-transform:uppercase;color:var(--on-dark-muted);margin-top:8px;display:block;}
.oe-event__body h3{font:400 24px/1.25 var(--font-display);color:var(--on-dark);margin:0 0 8px;}
.oe-event__body p{font:400 15px/1.6 var(--font-ui);color:var(--on-dark-muted);margin:0 0 14px;}
.oe-event__meta{font:500 11px/1 var(--font-ui);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-bright);}

/* ============================================================
   Footer (dunkle Bühne, tiefer).
   ============================================================ */
.oe-footer{background:var(--stage-deep);color:var(--on-dark-faint);padding:72px 0 56px;border-top:1px solid var(--hairline-dark);}
.oe-footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.oe-footer__cols{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:40px;flex:1;min-width:280px;}
.oe-footer__title{font:600 11px/1.6 var(--font-ui);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:14px;}
.oe-footer__cols ul{list-style:none;margin:0;padding:0;font:400 14px/2 var(--font-ui);}
.oe-footer__cols a{color:var(--on-dark-muted);text-decoration:none;}
.oe-footer__cols a:hover{color:var(--gold-bright);}
.oe-footer__brand{max-width:300px;}
.oe-footer__logo{width:auto;height:72px;max-width:100%;display:block;margin:0 0 4px;}
.oe-footer__brand p{font:400 14px/1.7 var(--font-ui);color:var(--on-dark-faint);margin:16px 0 0;}
.oe-footer__legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--hairline-dark);
  font:400 12px/1.7 var(--font-ui);letter-spacing:0.02em;color:var(--on-dark-faint);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.oe-footer__legal a{color:var(--on-dark-faint);text-decoration:none;}
.oe-footer__legal a:hover{color:var(--on-dark-muted);}

/* ============================================================
   Generischer Seiteninhalt (the_content), solange nicht ins oe-Markup
   überführt. Ruhige Lesespalte auf Hell.
   ============================================================ */
.oe-content{max-width:740px;margin:0 auto;font:400 19px/1.8 var(--font-ui);color:var(--body);}
.oe-content h1{font:400 44px/1.15 var(--font-display);color:var(--ink);margin:0 0 24px;}
.oe-content h2{font:400 32px/1.2 var(--font-display);color:var(--ink);margin:48px 0 16px;}
.oe-content h3{font:400 24px/1.3 var(--font-display);color:var(--ink);margin:36px 0 12px;}
.oe-content p{margin:0 0 22px;}
.oe-content a{color:var(--gold-deep);}
.oe-content ul,.oe-content ol{margin:0 0 22px;padding-left:24px;}
.oe-content li{margin:0 0 10px;}
.oe-content li::marker{color:var(--gold-deep);}
.oe-content blockquote{margin:32px 0;padding-left:26px;border-left:2px solid var(--gold);font-style:italic;color:var(--ink);}
.oe-content hr{border:none;border-top:1px solid var(--hairline);margin:44px 0;}
/* Markiert vorläufige/unbestätigte Angaben in Rechtstexten (z. B. Platzhalter-
   Beträge), analog gx-todo bei gesandtschaft. Vor Cutover auflösen. */
.oe-todo{background:rgba(192,137,46,0.12);border:1px dashed var(--gold-deep);border-radius:2px;padding:1px 6px;font-style:normal;}

/* Verdecktes semantisches h1 (SEO/Screenreader). */
.oe-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============================================================
   Responsiv.
   ============================================================ */
@media(max-width:1000px){
  .oe-grid{grid-template-columns:repeat(2,1fr);gap:28px;}
  .oe-events{grid-template-columns:1fr;}
}
@media(max-width:820px){
  .oe-container{padding:0 var(--container-pad-mobile);}
  .oe-topbar{flex-wrap:wrap;gap:16px;}
  .oe-nav ul{gap:22px;}
  .oe-hero{padding:64px 22px 60px;}
  .oe-hero__title{font-size:34px;}
  .oe-h2{font-size:30px;}
  .oe-section{padding:60px 0;}
  .oe-footer__top{flex-direction:column;gap:36px;}
  .oe-footer__cols{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
  .oe-grid{grid-template-columns:1fr;}
  .oe-footer__cols{grid-template-columns:1fr;}
  .oe-content h1{font-size:32px;}
}

/* ============================================================
   Shop-Front: macht das Shop-Archiv startseitentauglich.
   Dunkle Bühne öffnet (Kopf + Kategorie-Wegweiser), heller Grund
   trägt die Leitkarte (Aktuelles voran) und das Produktraster.
   ============================================================ */
.oe-shop-hero{position:relative;overflow:hidden;background:var(--stage);text-align:center;padding:78px 26px 62px;}
.oe-shop-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;}
.oe-shop-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(23,17,14,0.85) 0%,rgba(28,21,18,0.82) 50%,rgba(28,21,18,0.92) 100%);}
.oe-shop-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 50% 30%,rgba(224,189,107,0.12),rgba(28,21,18,0) 70%);}
.oe-shop-hero__inner{position:relative;z-index:2;max-width:840px;margin:0 auto;}
.oe-shop-hero__title{font:400 42px/1.16 var(--font-display);color:var(--on-dark);margin:14px 0 0;text-wrap:balance;}
.oe-shop-hero__sub{font:400 18px/1.7 var(--font-ui);color:var(--on-dark-muted);margin:16px auto 0;max-width:600px;}

/* Kategorie-Wegweiser (Gold = Erlebnisse, Petrol = Werkzeuge/Waren) */
.oe-catnav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 0;}
.oe-catnav a{font:600 11px/1 var(--font-ui);letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;
  padding:11px 17px;border-radius:2px;border:1px solid;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.oe-catnav a.is-gold{color:var(--gold-bright);border-color:var(--gold-bright);}
.oe-catnav a.is-petrol{color:var(--petrol-text);border-color:var(--petrol-edge);}
.oe-catnav a:hover{background:rgba(243,234,216,0.07);}

/* Leitkarte: Aktuelles voran (auf Hell, Gold-Kante) */
.oe-featured{display:grid;grid-template-columns:1.05fr 0.95fr;background:var(--card);
  border:1px solid var(--hairline);border-left:3px solid var(--gold);border-radius:var(--radius);overflow:hidden;margin:0 0 60px;}
.oe-featured__media{position:relative;min-height:340px;background:var(--tile);}
.oe-featured__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.oe-featured__media .oe-tag{position:absolute;top:16px;left:16px;}
.oe-featured__body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;}
.oe-featured__kicker{font:500 12px/1 var(--font-ui);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;}
.oe-featured__title{font:400 32px/1.2 var(--font-display);color:var(--ink);margin:0 0 14px;}
.oe-featured__desc{font:400 17px/1.7 var(--font-ui);color:var(--muted);margin:0 0 24px;}
.oe-featured__foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.oe-featured__foot .oe-price{font-size:21px;}

.oe-shop-gridhead{font:400 26px/1.2 var(--font-display);color:var(--ink);margin:0 0 30px;padding-top:4px;}

@media(max-width:820px){
  .oe-shop-hero{padding:56px 22px 44px;}
  .oe-shop-hero__title{font-size:32px;}
  .oe-featured{grid-template-columns:1fr;}
  .oe-featured__media{min-height:240px;}
  .oe-featured__body{padding:32px 26px;}
}