/* =========================================================================
   jazzexclusive.at — Design-Tokens & Layout (abgeleitet von cleebration.com)
   Eine einzige Quelle für Farben, Schriften, Abstände.
   Die Kit-Module (Events, Blog, Galerie, Newsletter, Sprachumschalter)
   werden hier auf dieselben Tokens gemappt — deshalb sieht alles gleich aus.
   ========================================================================= */

:root {
  /* Marke JazzExclusive: „Hut auf Schwarz" — das orange Hut-Logo der Band
     auf Schwarz, Akzent ein dunkles Orange, das auf Weiß AA erreicht
     (#A8470B auf #fff ≈ 5,6 : 1). Das helle Logo-Orange (#F29A2E) nur als
     Linie und Fläche, nie als Textfarbe auf Weiß. */
  --cl-navy:        #A8470B;   /* dunkles Orange: Akzent, aktive Navigation */
  --cl-navy-pale:   #fbefe4;
  --cl-gold:        #F29A2E;   /* Logo-Orange, Linie unter dem Kopf */
  --cl-gold-dark:   #7a3a0e;
  --cl-red:         #E2621B;
  --cl-black:       #111111;

  --cl-ink:         #1b1a19;
  --cl-muted:       #5f6675;
  --cl-heading:     #8a6f5a;
  --cl-surface:     #ffffff;
  --cl-bg:          #faf8f6;
  --cl-border:      #e6e0d8;

/* ---- Schrift ----------------------------------------------------------
     EB Garamond für Überschriften, Work Sans für alles andere.

     Davor standen hier Instrument Serif und Instrument Sans. Die laufen
     beide sehr eng — auf den großen grauen Rubriken und den Kartentiteln
     klebten die Buchstaben aneinander. EB Garamond hat deutlich mehr Luft
     dazwischen, Work Sans offenere Punzen. Gewechselt am 22.09.2026 nach
     einem Direktvergleich von vier Paarungen.

     Zwei Eigenheiten von EB Garamond, die beim Setzen zählen:

     1. Sie läuft optisch KLEIN. Dieselbe Pixelgröße wirkt kleiner als bei
        Instrument Serif. Die Überschriften sind deshalb unten um etwa ein
        Zehntel größer gesetzt — das ist keine Willkür, sondern gleicht die
        Schrift aus.

     2. Sie hat echte Schnitte von 400 bis 800. Anders als Instrument Serif,
        die es nur in 400 gab, darf hier also wieder 500 oder 600 stehen,
        wo eine Überschrift Gewicht braucht. Künstliches Fetten durch den
        Browser ist nicht mehr nötig. */
  --cl-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --cl-font-body:    "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --cl-font-thin:    var(--cl-font-body);

  /* ---- Maße ------------------------------------------------------------- */
  --cl-maxwidth: 1120px;
  --cl-gutter:   20px;
  --cl-radius:   4px;

}

/* ===========================================================================
   Mapping auf die Kit-Module.
   Wichtig: die Module setzen ihre Standardwerte im Shadow DOM auf :host.
   Eine Deklaration auf :host schlägt den geerbten Wert von :root — die
   Marken-Tokens müssen deshalb auf dem ELEMENT selbst stehen, nicht auf :root.
   Genau dafür ist der folgende Block da.
   =========================================================================== */

event-list, event-detail,
blog-list, blog-post, blog-credit,
gallery-grid, gallery-detail,
newsletter-signup,
lang-switcher {

  /* Events-Kit */
  --evt-font-display: var(--cl-font-display);
  --evt-font-body:    var(--cl-font-body);
  --evt-bg:           transparent;
  --evt-surface:      var(--cl-surface);
  --evt-text:         var(--cl-ink);
  --evt-muted:        var(--cl-muted);
  --evt-accent:       var(--cl-navy);
  --evt-accent-contrast: #ffffff;
  --evt-border:       var(--cl-border);
  --evt-radius:       var(--cl-radius);
  --evt-gap:          1.75rem;
  --evt-maxwidth:     var(--cl-maxwidth);

  /* Blog-Kit */
  --blog-font-display: var(--cl-font-display);
  --blog-font-body:    var(--cl-font-body);
  --blog-bg:           transparent;
  --blog-surface:      var(--cl-surface);
  --blog-text:         var(--cl-ink);
  --blog-muted:        var(--cl-muted);
  --blog-accent:       var(--cl-navy);
  --blog-accent-contrast: #ffffff;
  --blog-border:       var(--cl-border);
  --blog-radius:       var(--cl-radius);
  --blog-gap:          1.75rem;
  --blog-maxwidth:     var(--cl-maxwidth);
  --blog-readwidth:    680px;

  /* Galerie-Kit (trägt die Engagements) */
  --gal-font-display: var(--cl-font-display);
  --gal-font-body:    var(--cl-font-body);
  --gal-bg:           transparent;
  --gal-surface:      var(--cl-surface);
  --gal-text:         var(--cl-ink);
  --gal-muted:        var(--cl-muted);
  --gal-accent:       var(--cl-navy);
  --gal-accent-contrast: #ffffff;
  --gal-border:       var(--cl-border);
  --gal-radius:       var(--cl-radius);
  --gal-gap:          1.25rem;
  --gal-tile:         260px;
  --gal-aspect:       3 / 2;
  --gal-maxwidth:     var(--cl-maxwidth);
  --gal-overlay:      rgba(12, 11, 10, .92);

  /* Newsletter-Kit */
  --nl-font-display: var(--cl-font-display);
  --nl-font-body:    var(--cl-font-body);
  --nl-bg:           transparent;
  --nl-surface:      var(--cl-surface);
  --nl-text:         var(--cl-ink);
  --nl-muted:        var(--cl-muted);
  --nl-accent:       var(--cl-navy);
  --nl-accent-contrast: #ffffff;
  --nl-border:       var(--cl-border);
  --nl-radius:       var(--cl-radius);
  --nl-gap:          .75rem;
  --nl-maxwidth:     520px;

  /* Sprachumschalter (i18n-Kit) */
  --li18n-text:    var(--cl-ink);
  --li18n-muted:   var(--cl-muted);
  --li18n-accent:  var(--cl-navy);
  --li18n-accent-contrast: #ffffff;
  --li18n-border:  var(--cl-border);
  --li18n-radius:  var(--cl-radius);
  --li18n-gap:     .35rem;
  --li18n-font:    var(--cl-font-body);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cl-bg);
  color: var(--cl-ink);
  font-family: var(--cl-font-body);
  font-size: 17px;
  line-height: 1.6;
}

a { color: inherit; }

img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--cl-maxwidth);
  margin-inline: auto;
  padding-inline: var(--cl-gutter);
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--cl-navy-pale); color: var(--cl-navy);
  padding: .6rem 1rem; border-radius: var(--cl-radius); z-index: 100;
}
.skip-link:focus { left: var(--cl-gutter); top: .5rem; }

/* ---- Kopfbereich -------------------------------------------------------- */
.site-top {
  border-bottom: 3px solid var(--cl-gold);
}

.site-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: .5rem;
}

.mainnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  list-style: none;
  margin: 0; padding: 0;
}

.mainnav a {
  display: block;
  padding: .55rem 1.1rem;
  text-decoration: none;
  color: var(--cl-ink);
  font-size: .95rem;
  border: 1px solid transparent;
  border-radius: var(--cl-radius);
  transition: background-color .15s ease, color .15s ease;
}
.mainnav a:hover { background: #f5f5f5; }

.mainnav a[aria-current="page"] {
  background: var(--cl-navy-pale);
  color: var(--cl-navy);
  border-color: #c2cbe2;
}

.mainnav a.is-external::after {
  content: "↗";
  font-size: .75em;
  margin-left: .3em;
  opacity: .6;
}

/* ---- Wortmarke im Kopf ------------------------------------------------ */
.wordmark {
  font-family: var(--cl-font-display);
  font-size: 1.35rem;
  letter-spacing: .01em;
  color: var(--cl-ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span:nth-child(2) { color: var(--cl-navy); }

/* ---- Startseite ---------------------------------------------------------- */
.hero { text-align: center; padding-block: 3rem 1rem; }
.hero__kicker {
  text-transform: uppercase; letter-spacing: .18em; font-size: .8rem;
  color: var(--cl-muted); margin: 0 0 .6rem;
}
.hero__title {
  font-family: var(--cl-font-display); font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 4.8rem); line-height: 1.05;
  letter-spacing: -0.015em; color: var(--cl-ink); margin: 0 0 1.75rem;
}
.hero__text { max-width: 620px; margin-inline: auto; font-size: 1.08rem; }
.hero__text p { margin: 0 0 .9rem; }
.hero__text em { color: var(--cl-navy); font-style: italic; }

.more { text-align: right; margin: 1rem 0 0; }
.more a { color: var(--cl-navy); text-decoration: none; font-weight: 500; }
.more a:hover { text-decoration: underline; }

/* ---- Über mich ------------------------------------------------------------ */
.about { text-align: center; }
.about__portrait { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.about__name { font-family: var(--cl-font-display); font-size: 1.6rem; margin: .5rem 0 1.5rem; }

/* ---- Seitentitel -------------------------------------------------------- */
.page-title {
  font-family: var(--cl-font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.9vw, 4.1rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--cl-heading);
  text-align: center;
  margin: 2.5rem 0 1.5rem;
}

.page-intro {
  max-width: 680px;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--cl-muted);
}

.section-title {
  font-family: var(--cl-font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.1vw, 2.8rem);
  letter-spacing: -0.01em;
  color: var(--cl-heading);
  text-align: center;
  margin: 3.5rem 0 1.5rem;
}

/* ---- Kontaktseite ------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-block: 2rem;
}

.contact-card {
  display: block;
  padding: 1.4rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  text-decoration: none;
  background: var(--cl-surface);
  transition: border-color .15s ease, transform .15s ease;
}
.contact-card:hover { border-color: var(--cl-navy); transform: translateY(-2px); }
.contact-card h3 {
  font-family: var(--cl-font-display);
  margin: 0 0 .4rem; font-size: 1.15rem; color: #111;
}
.contact-card p { margin: 0; font-size: .92rem; color: var(--cl-muted); }

.prose { max-width: 680px; margin-inline: auto; }
.prose h2 {
  font-family: var(--cl-font-display);
  color: #111; font-size: 1.5rem; margin-top: 2.2rem;
}
.prose a { color: var(--cl-navy); }

/* "Stand: …" am Ende der Rechtstexte — leise, aber auffindbar. */
.prose .meta {
  margin-top: 2.5rem;
  font-size: .85rem;
  color: var(--cl-muted);
}

/* ---- Fußbereich --------------------------------------------------------- */
.site-foot {
  margin-top: 4rem;
  border-top: 1px solid var(--cl-border);
  padding-block: 2.5rem 3rem;
  text-align: center;
  color: var(--cl-muted);
  font-size: .9rem;
}

.site-foot__mail {
  font-family: var(--cl-font-display);
  font-size: 1.05rem;
  color: var(--cl-ink);
  text-decoration: none;
}
.site-foot__mail:hover { text-decoration: underline; }

.social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}
.social a {
  display: block;
  padding: .3rem .8rem;
  border: 1px solid var(--cl-border);
  border-radius: 999px;
  color: var(--cl-muted);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .01em;
  transition: color .15s ease, border-color .15s ease;
}
.social a:hover { color: var(--cl-navy); border-color: var(--cl-navy); }

.site-foot__legal a { color: var(--cl-muted); }
.site-foot__credit { margin: 1.25rem 0; color: var(--cl-ink); }

/* ---- Mobil -------------------------------------------------------------- */
@media (max-width: 760px) {
  .wordmark { width: 100%; text-align: center; }
  .site-top__inner { justify-content: center; }
  .mainnav ul { justify-content: center; }
  .mainnav a { padding: .5rem .75rem; font-size: .9rem; }
}

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


/* ---- linzer-kammerorchester.at ------------------------------------------ */
.wordmark--logo img { display: block; height: 52px; width: auto; }
@media (max-width: 640px) { .wordmark--logo img { height: 40px; margin: 0 auto; } }
.ensemble { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem 2rem; margin-top: 1rem; }
.ensemble h3 { margin: 0 0 .35rem; color: var(--cl-navy); }
.ensemble ul { list-style: none; padding: 0; margin: 0; }
.ensemble li { padding: .15rem 0; }
.button { display: inline-block; padding: .7rem 1.2rem; background: var(--cl-navy); color: #fff; border-radius: var(--cl-radius); text-decoration: none; }
.button:hover, .button:focus-visible { background: #2c3f66; color: #fff; }


/* ===========================================================================
   JazzExclusive – Layout 2026 (freigegeben von Chris am 07.10.2026)
   Schwarz als Bühne, kräftige Blöcke in Rot/Orange/Gold, große kursive
   Überschriften (DM Serif Display), Versal-Kicker (Josefin Sans).
   Regel: Das CD-Cover wird NIE gedreht oder beschnitten (Vorgabe Chris).
   =========================================================================== */
:root {
  --je-black: #111111; --je-cream: #FAF6F1; --je-sand: #F2EBE3;
  --je-red: #E43630; --je-orange: #F07B3A; --je-dark: #901E1B; --je-gold: #F7A93B;
  --je-line: #3A3532; --je-soft: #CFC6BD; --je-text-dark: #F3EEE8;
  --je-caps: "Josefin Sans", "Work Sans", sans-serif;
  --cl-maxwidth: 1280px; --cl-gutter: 28px;
}
body { font-size: 20px; background: var(--je-cream); }
.wrap { max-width: var(--cl-maxwidth); }

/* Kopf */
.site-top { background: var(--je-black); border-bottom: 0; }
.site-top__inner { padding-block: 18px; }
.wordmark--logo { display: block; line-height: 0; }
.wordmark--logo img { height: 64px; width: auto; }
.site-top .mainnav a { color: var(--je-text-dark); font-size: 18px; font-weight: 500; }
.site-top .mainnav a:hover { background: #262321; }
.site-top .mainnav a[aria-current="page"] { background: transparent; color: var(--je-gold); border-color: transparent; }
.site-top .mainnav a.nav-cta { background: var(--je-orange); color: var(--je-black); font-weight: 600; border-radius: 999px; padding-inline: 1.4rem; margin-left: .4rem; }
.site-top .mainnav a.nav-cta:hover { background: var(--je-gold); }
.site-top lang-switcher { --li18n-text: var(--je-text-dark); --li18n-muted: var(--je-soft); --li18n-border: #4a4542; }
@media (max-width: 640px) { .wordmark--logo img { height: 46px; margin: 0 auto; } }

/* Bausteine */
.dark { background: var(--je-black); color: var(--je-text-dark); }
.dark a { color: var(--je-gold); }
.kicker { font-family: var(--je-caps); font-weight: 700; font-size: 18px; letter-spacing: .25em; text-transform: uppercase; color: var(--je-dark); margin: 0 0 .9rem; }
.dark .kicker, .kicker--gold { color: var(--je-gold); }
.display { font-family: var(--cl-font-display); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -.01em; margin: 0; }
.display--xl { font-size: clamp(52px, 9vw, 128px); line-height: .95; }
.display--l { font-size: clamp(44px, 6vw, 88px); line-height: .98; }
.display--m { font-size: clamp(40px, 5vw, 72px); }
.hl { color: var(--je-orange); }
.section { padding-block: clamp(64px, 9vw, 112px); }
.lead { font-size: 24px; max-width: 680px; }
.dark .lead { color: #E6DED5; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 20px; padding: 16px 30px; border-radius: 999px; border: 2px solid transparent; }
.btn--accent { background: var(--je-orange); color: var(--je-black) !important; }
.btn--accent:hover { background: var(--je-gold); }
.btn--ghost { border-color: currentColor; color: var(--je-text-dark) !important; }
.btn--dark { background: var(--je-dark); color: #fff !important; }
.btn--red { background: var(--je-red); color: #fff !important; }
.btn--black { background: var(--je-black); color: #fff !important; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 72px); align-items: center; }
.split p { margin: 0 0 1rem; }

/* Startseite: Bühne */
.stage { position: relative; margin: 0; background: var(--je-black); }
.stage img { display: block; width: 100%; height: auto; max-height: none; object-fit: initial; }
.stamp { position: absolute; right: 4%; top: -26px; width: 150px; height: 150px; border-radius: 50%;
  background: var(--je-orange); color: var(--je-black); display: grid; place-items: center; text-align: center;
  transform: rotate(-12deg); font-family: var(--je-caps); font-weight: 700; font-size: 17px; letter-spacing: .12em; line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); }
@media (max-width: 900px) { .stamp { width: 96px; height: 96px; font-size: 12px; top: auto; bottom: -48px; right: 16px; } }
.intro { padding-block: 48px 72px; }
.intro__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; margin-top: 28px; }
.intro .lead { margin: 0; }
.ticker { background: var(--je-orange); color: var(--je-black); transform: rotate(-2deg); margin: 0 -40px; padding: 18px 0;
  white-space: nowrap; overflow: hidden; font-family: var(--je-caps); font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .18em; }
.overflow-clip { overflow: hidden; }

/* Fotos mit Farbblock dahinter */
.tilt { position: relative; padding: 24px; }
.tilt::before { content: ""; position: absolute; inset: 0 40px 40px 0; background: var(--je-red); border-radius: 20px; transform: rotate(-4deg); }
.tilt img { position: relative; display: block; width: 100%; height: clamp(360px, 45vw, 600px); object-fit: cover; border-radius: 20px; transform: rotate(2deg); }

/* Anlässe */
.occasions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-top: 48px; }
.occ { border-radius: 24px; padding: 40px 36px; min-height: 280px; }
.occ__num { font-family: var(--je-caps); font-weight: 700; font-size: 72px; line-height: 1; margin-bottom: 14px; }
.occ h3 { font-family: var(--cl-font-display); font-style: italic; font-weight: 400; font-size: 40px; line-height: 1.05; margin: 0 0 14px; }
.occ p { margin: 0; }
.occ--red { background: var(--je-red); color: #fff; } .occ--red .occ__num { color: var(--je-black); }
.occ--orange { background: var(--je-orange); color: var(--je-black); } .occ--orange .occ__num { color: #fff; }
.occ--gold { background: var(--je-gold); color: var(--je-black); } .occ--gold .occ__num { color: var(--je-dark); }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }

/* CD – Cover unverändert zeigen: kein Drehen, kein Beschneiden */
.cd-band { background: var(--je-dark); color: #fff; }
.cd-band .kicker { color: var(--je-gold); }
.cd-cover { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.cd-band p { color: #F6E3DA; }
.prices { display: flex; flex-wrap: wrap; gap: 40px; margin: 8px 0 28px; }
.price { font-family: var(--cl-font-display); font-size: 64px; line-height: 1; }
.price small { display: block; font-family: var(--cl-font-body); font-size: 18px; color: #F6E3DA; margin-top: 6px; }
.cd-band .btn--accent { background: var(--je-gold); }

/* Newsletter-Leiste */
.nl-strip { background: var(--je-orange); color: var(--je-black); padding-block: 64px; }
.nl-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.nl-strip h2 { flex: 1 1 420px; }
.nl-strip newsletter-signup { flex: 1 1 440px; --nl-surface: #FFF8F1; --nl-accent: var(--je-black); --nl-text: var(--je-black); --nl-muted: #3b2a20; --nl-border: var(--je-black); }

/* Unterseiten */
.page-head { padding-block: 72px 24px; }
.page-head .display { font-size: clamp(56px, 8vw, 112px); }
.page-title { color: var(--je-black); font-style: italic; font-size: clamp(48px, 7vw, 96px); text-align: left; max-width: var(--cl-maxwidth); margin: 64px auto 24px; padding-inline: var(--cl-gutter); }
.section-title { color: var(--je-black); font-style: italic; text-align: left; font-size: clamp(36px, 4.5vw, 56px); max-width: var(--cl-maxwidth); margin: 56px auto 20px; padding-inline: var(--cl-gutter); }
.prose { max-width: 760px; }
.prose h2 { font-size: 34px; color: var(--je-black); }
.prose a, main a { color: var(--je-dark); }
.dark a, .cd-band a { color: var(--je-gold); }

/* Band */
.members { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-top: 28px; }
.member { background: #fff; border-radius: 20px; padding: 28px; }
.member h3 { font-family: var(--cl-font-display); font-weight: 400; font-size: 32px; line-height: 1.1; margin: 0 0 4px; }
.member p { margin: 0; color: var(--je-dark); font-weight: 600; }
.member .tag { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: #5f5a55; border: 1px solid #CFC6BD; border-radius: 999px; padding: 3px 12px; }
.member a { font-size: 17px; }
.booking-form { background: #1E1B19; border-radius: 20px; padding: 32px; display: grid; gap: 16px; }
.booking-form label { display: block; font-size: 17px; color: var(--je-soft); margin-bottom: 6px; }
.booking-form input, .booking-form select, .booking-form textarea { width: 100%; box-sizing: border-box; min-height: 52px; border-radius: 12px; border: 1px solid #4a4542; background: var(--je-black); color: #fff; padding: 10px 14px; font: inherit; }
.booking-form .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.booking-form button { min-height: 56px; border: 0; border-radius: 999px; background: var(--je-orange); color: var(--je-black); font: inherit; font-weight: 600; cursor: pointer; }
.big-mail { font-family: var(--cl-font-display); font-size: clamp(28px, 3vw, 40px); }

/* Widgets auf dunklem Grund */
.dark event-list, .dark event-detail, .dark blog-list {
  --evt-surface: #1E1B19; --evt-text: var(--je-text-dark); --evt-muted: var(--je-soft); --evt-border: var(--je-line); --evt-accent: var(--je-orange); --evt-accent-contrast: var(--je-black);
  --blog-surface: #1E1B19; --blog-text: var(--je-text-dark); --blog-muted: var(--je-soft); --blog-border: var(--je-line); --blog-accent: var(--je-orange); --blog-accent-contrast: var(--je-black);
}
event-list, event-detail, blog-list, blog-post { --evt-radius: 20px; --blog-radius: 20px; --evt-accent: var(--je-dark); --blog-accent: var(--je-dark); }

/* Fuß */
.site-foot { background: var(--je-black); color: var(--je-soft); margin-top: 0; border-top: 0; padding-block: 72px 44px; text-align: left; font-size: 17px; }
.site-foot a { color: var(--je-soft); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.foot-logo { height: 180px; width: auto; }
.site-foot .site-foot__mail { color: #fff; font-family: var(--cl-font-display); font-size: 40px; text-decoration: none; }
.foot-bottom { border-top: 1px solid var(--je-line); margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-foot .social { justify-content: flex-start; }
.foot-grid > div { min-width: 0; max-width: 100%; }
.site-foot .site-foot__mail { overflow-wrap: anywhere; font-size: clamp(26px, 6vw, 40px); }
@media (max-width: 640px) { .foot-logo { height: 120px; } }