/* =====================================================================
   COMPONENT LIBRARY — Brand-Bausteine (Pills, Frames, Cards, Events,
   Kalender). Ergänzt components.css; nutzt die Tokens aus tokens.css.
   ===================================================================== */

/* ── Pills (Datum/Zeit/Kategorie) — Stadium-Form aus dem Styleguide ── */
.pc-pill {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); line-height: 1;
  padding: .5em .9em; border-radius: 999px;
  background: var(--color-wisteria); color: var(--color-ink);
}
.pc-pill--cat   { background: var(--color-primary); color: #fff; text-transform: none; }
.pc-pill--ics,
.pc-pill--date  { background: var(--color-cream); color: var(--color-ink); }
a.pc-pill { text-decoration: none; transition: filter var(--t-fast) var(--ease); }
a.pc-pill:hover { filter: brightness(.95); }

/* ── Frames — abgerundete / Pill-Bildrahmen ───────────────────────── */
.pc-frame { display: block; overflow: hidden; border-radius: var(--radius-lg); }
.pc-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-frame--pill { border-radius: 999px / 22%; }

/* ── Framing Device (Brand): Original shape04.svg als Bildmaske ────── */
:root {
  --pc-device-mask: url("../assets/brand/shape04.svg") center / 100% 100% no-repeat;
}
.pc-hero__frame {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 0;
}
.pc-frame--device img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: var(--radius-lg);
}

/* ── Brand-Pattern (Hero ohne Foto): Original repeat_pattern.svg ───── */
.pc-hero__pattern {
  aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-cream) url("../assets/brand/repeat_pattern.svg") right center / cover no-repeat;
}

/* ── Feature-Hero (Bild/Muster links, Text + #-Felder rechts) ─────── */
.pc-hero--feature .container { display: grid; gap: var(--space-5); align-items: center; grid-template-columns: 1fr; }
/* Variante „top": Textspalte oben bündig zum Bild (z. B. Events-Hero) */
.pc-hero--top.pc-hero--feature .container { align-items: start; }
@media (min-width: 1000px) {
  .pc-hero--feature.pc-hero--haspic .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.pc-hero--feature .pc-hero__media { order: -1; }
.pc-hero__features { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.pc-hero__feature h3 { font-size: var(--fs-h4); margin: 0 0 .25rem; }
.pc-hero__feature h3::before { content: "# "; color: var(--color-primary); }
.pc-hero__feature p { margin: 0; color: var(--color-text); }

/* ── Hero (Seitenkopf, optional zweispaltig mit Bild) ─────────────── */
.pc-hero { padding-block: var(--section-y); }
.pc-hero .lead { font-size: var(--fs-lg); color: var(--color-text); max-width: 42ch; }
/* Abstand H1 → Lead im Feature-Hero (styleguide-üblich = --space-3, wie section-head/Home-Hero) */
.pc-hero__text h1 { margin-bottom: var(--space-3); }
.pc-hero--split .container {
  display: grid; gap: var(--space-5); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .pc-hero--split .container { grid-template-columns: 1.1fr .9fr; }
}
.pc-hero__media .pc-frame { aspect-ratio: 4 / 3; }

/* ── Brand-Card (Alabaster, abgerundet) ───────────────────────────── */
.pc-card {
  background: var(--color-cream); color: var(--color-text);
  border-radius: var(--radius-lg); padding: var(--space-4);
  display: flex; flex-direction: column; gap: .6rem;
}
.pc-card--white { background: #fff; box-shadow: var(--shadow-md); }
.pc-card h3 { margin: 0; }
.pc-card ul { margin: 0; }
.pc-card .arrow-link { margin-top: auto; }
.pc-card__icon { width: 44px; height: 44px; color: var(--color-primary); }
.pc-card__kicker {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); color: var(--color-primary); margin: 0;
}

/* ── Cooperative Ecosystem Lab — Bausteine (Nummern-Badge) ─────────── */
.pc-lab__head { display: flex; align-items: center; gap: .75rem; }
.pc-lab__head h3 { margin: 0; }
.pc-lab__badge {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lg);
}
.pc-lab__result { margin-top: .3rem; }
/* Orangefarbener Links-Akzent (Tailwind-Style border-l) statt Vollrahmen */
.pc-orangebox {
  border-left: 4px solid var(--color-primary); border-radius: 0;
  padding: .4rem 0 .4rem var(--space-3); margin-top: var(--space-3);
}
.pc-card--framed { border-left: 4px solid var(--color-primary); }
/* 7 Bausteine: fix 2 Spalten (Desktop) / 1 Spalte (Mobil) */
.grid-2.pc-lab-grid { grid-template-columns: 1fr; }
.pc-lab-grid > .pc-card { position: relative; }
/* Verspielter, kräftiger orangener Pfeil rechts nach jedem Baustein (außer dem 7.) */
@media (min-width: 760px) {
  .grid-2.pc-lab-grid { grid-template-columns: 1fr 1fr; }
  .pc-lab-grid > .pc-card:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: 0;
    transform: translate(60%, -50%); width: 56px; height: 56px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 48 48' fill='none' stroke='%23FF661A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 24 C 17 14, 31 34, 41 24'/%3E%3Cpath d='M34 16 L43 24 L34 32'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none; z-index: 2;
  }
}

/* ── Blog-Teaser ──────────────────────────────────────────────────── */
.pc-teaser { display: flex; flex-direction: column; gap: var(--space-2); }
.pc-teaser__media { aspect-ratio: 16 / 10; }
.pc-teaser__body { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.pc-teaser__body h3 { margin: 0; }
.pc-teaser__body h3 a { color: var(--color-ink); }
.pc-teaser__body h3 a:hover { color: var(--color-primary); }

/* ── Event-Karte ──────────────────────────────────────────────────── */
.pc-event { display: flex; flex-direction: column; gap: var(--space-2); }
.pc-event__media { position: relative; aspect-ratio: 16 / 10; background: var(--color-cream); }
.pc-event__pills { position: absolute; top: .75rem; left: .75rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.pc-event__body { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.pc-event__body h3 { margin: 0; }
.pc-event__body h3 a { color: var(--color-ink); }
.pc-event__body h3 a:hover { color: var(--color-primary); }
.pc-event__loc { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }

/* ── Kalender / Agenda ────────────────────────────────────────────── */
.pc-cal__sub { margin-bottom: var(--space-3); }
.pc-cal__list { list-style: none; padding: 0; margin: 0; }
.pc-cal__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.pc-cal__title { flex: 1 1 16rem; }
.pc-cal__title a { color: var(--color-ink); font-weight: var(--fw-semibold); }
.pc-cal__title a:hover { color: var(--color-primary); }
.pc-cal__title em { color: var(--color-text-muted); font-style: normal; }
.pc-cal__ics { font-size: var(--fs-sm); white-space: nowrap; }
.pc-cal__row--empty { color: var(--color-text-muted); }

/* ── Editorial Cover (Beitrags-/Newsletter-Kopf) ──────────────────── */
.article-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 46vw, 520px);
  padding-block: var(--space-5);
  background: var(--color-teal);
  overflow: hidden;
  isolation: isolate;
}
.article-cover__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Teal→dunkel-Verlauf für Lesbarkeit der weißen Schrift */
.article-cover__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(1,81,78,.92) 0%, rgba(1,81,78,.62) 38%, rgba(1,81,78,.18) 72%, rgba(1,81,78,.05) 100%);
}
.article-cover--plain .article-cover__scrim { background: none; }
.article-cover__inner { color: #fff; max-width: var(--container); }
.article-cover__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-2); }
.article-cover h1 {
  color: #fff; margin: 0;
  max-width: 22ch; line-height: var(--lh-tight);
  text-wrap: balance;
}
.article-cover__sub {
  color: rgba(255,255,255,.92);
  font-size: var(--fs-lg); font-weight: var(--fw-medium);
  max-width: 60ch; margin: var(--space-2) 0 0;
}

/* Tags am Artikelende */
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-4); }
.pc-pill--tag { background: var(--color-cream); color: var(--color-ink); }
.article-more { margin-top: var(--space-4); }

/* Podcast-/Audio-Embed im Fließtext */
.prose audio { width: 100%; margin: var(--space-2) 0; }

/* ── Blog-/Newsletter-Übersicht ───────────────────────────────────── */
.pc-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-4) var(--space-3);
}
.pc-teaser__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.pc-teaser__date { color: var(--color-text-muted); font-size: var(--fs-sm); }
.pc-teaser__media { background: var(--color-cream); }

/* Unter-Navigation der Blog-Seiten (Alle · Beiträge · Newsletter) */
.blog-subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-2); }
.blog-subnav a {
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,.15); color: #fff; font-weight: var(--fw-medium);
  font-size: var(--fs-sm); text-decoration: none; transition: background var(--t-fast) var(--ease);
}
.blog-subnav a:hover { background: rgba(255,255,255,.28); }
.blog-subnav a.is-active { background: var(--color-primary); color: #fff; }

/* ── Kontaktseite ─────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

.contact-form { display: grid; gap: var(--space-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.field input,
.field textarea {
  width: 100%; padding: .7rem .9rem; font: inherit; color: var(--color-text);
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: border-color var(--t-fast) var(--ease);
}
.field input:focus,
.field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.field textarea { resize: vertical; }
.form-note { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }

.contact-info { background: var(--color-cream); border-radius: var(--radius-lg); padding: var(--space-4); }
.contact-info h2 { margin-top: 0; }
.contact-info p { margin: 0 0 var(--space-3); }
.contact-info__label { font-size: var(--fs-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }

/* ── Event-Karten („Termine"-Stil) ────────────────────────────────── */
.pc-term {
  background: var(--color-cream); border-radius: var(--radius-lg);
  padding: var(--space-4); height: 100%;
  display: flex; flex-direction: column; gap: .75rem; align-items: flex-start;
}
.pc-term__icon { width: 40px; height: 40px; color: var(--color-ink); }
.pc-term__icon svg { width: 100%; height: 100%; }
.pc-term h3 { margin: 0; }
.pc-term__meta { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
.pc-term__teaser { color: var(--color-text); margin: 0; }
.pc-term__cta { margin-top: auto; align-self: stretch; justify-content: center; text-transform: uppercase; letter-spacing: .04em; }

/* ── Hero-CTA ─────────────────────────────────────────────────────── */
.pc-hero__cta { margin-top: var(--space-3); }

/* ── Monats-Kalender (Events-Seite) ───────────────────────────────── */
.pc-cal-wrap { max-width: 760px; margin-inline: auto; }
.pc-cal-head { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.pc-cal-head strong { font-family: var(--font-display); font-size: var(--fs-lg); }
.pc-cal-nav {
  border: 0; background: transparent; cursor: pointer; line-height: 1;
  font-size: 1.5rem; color: var(--color-primary); padding: .25rem .5rem; border-radius: 999px;
}
.pc-cal-nav:hover { background: var(--color-cream); }
.pc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; text-align: center; }
.pc-cal-dow { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--color-ink); padding-bottom: .5rem; }
.pc-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-variant-numeric: tabular-nums;
}
.pc-cal-day.is-empty { color: var(--color-border); }
.pc-cal-day.is-pad { visibility: hidden; }
.pc-cal-day.is-event {
  background: var(--color-primary); color: #fff; font-weight: var(--fw-bold);
  text-decoration: none; transition: filter var(--t-fast) var(--ease);
}
.pc-cal-day.is-event:hover { filter: brightness(.93); }
.pc-cal-sub { text-align: center; margin-top: var(--space-3); }

/* Newsletter-Cover (Fallback, wenn kein Titelbild) ---------------------- */
.pc-nlcover{position:relative;display:flex;flex-direction:column;justify-content:center;
  gap:.3rem;padding:1.4rem 1.5rem;color:#fff;background:var(--color-primary);isolation:isolate}
.pc-nlcover--0{background:var(--color-primary)}
.pc-nlcover--1{background:var(--color-teal)}
.pc-nlcover--2{background:var(--color-wisteria-dark)}
.pc-nlcover--3{background:var(--color-teal-dark)}
.pc-nlcover__kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.pc-nlcover__date{font-size:clamp(1.35rem,4.2vw,1.95rem);font-weight:700;line-height:1.05}
.pc-nlcover__mark{position:absolute;right:1rem;bottom:.75rem;font-weight:700;opacity:.55;letter-spacing:.02em}
.pc-nlcover::after{content:"";position:absolute;inset:auto -22% -62% auto;width:72%;aspect-ratio:1;
  border-radius:50%;background:rgba(255,255,255,.10);z-index:-1}


/* RSVP-Formular (Event-Anmeldung) -------------------------------------- */
.rsvp{margin-top:.75rem}
.rsvp__toggle{display:inline-block;cursor:pointer;font-weight:600;color:var(--color-primary);list-style:none}
.rsvp__toggle::-webkit-details-marker{display:none}
.rsvp__toggle::before{content:"+ ";font-weight:700}
details[open] .rsvp__toggle::before{content:"\2013 "}
.rsvp__form{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem;max-width:34rem}
.rsvp__field{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;color:var(--color-text)}
.rsvp__field input{padding:.5rem .6rem;border:1px solid var(--color-border);border-radius:6px;font:inherit}
.rsvp__check{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;color:var(--color-text-muted);line-height:1.35}
.rsvp__check input{margin-top:.15rem;flex:none}
.rsvp__hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
.rsvp__status{font-size:.85rem;margin:.2rem 0 0}
.rsvp__status.is-ok{color:var(--color-teal)}
.rsvp__status.is-err{color:#b00020}
.rsvp .btn{align-self:flex-start}


/* Event-Detailseite -------------------------------------------------- */
.pc-detail{max-width:52rem}
.pc-detail__meta{color:var(--color-text-muted);font-size:.95rem;margin-top:.3rem}
.pc-detail__media{margin-bottom:1.5rem}
.pc-detail__media img{width:100%;height:auto;display:block}
.rsvp--page{margin-top:2rem;padding:1.5rem;background:var(--color-bg-alt);border-radius:var(--radius-lg)}
.rsvp--page h2{margin:0 0 .3rem}
.pc-detail__hint{color:var(--color-text-muted);font-size:.9rem;margin:0 0 1rem}
.rsvp__form--page{max-width:none}
.pc-detail__foot{margin-top:2rem}


/* Event-Karten Redesign: Foto + iCal-Icon-Link + Anmeldelink ---------- */
.pc-term{display:flex;flex-direction:row;gap:1.25rem;align-items:flex-start;padding:var(--space-3)}
.pc-term__media{flex:0 0 auto;width:min(34%,220px);aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-cream)}
.pc-term__media img{width:100%;height:100%;object-fit:contain;display:block}
.pc-term__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;font-size:var(--fs-sm)}
.pc-term__head{display:flex;align-items:center;gap:.6rem}
.pc-term__head h3{margin:0}
.pc-term__ical{flex:0 0 auto;width:36px;height:36px;padding:6px;color:var(--color-ink);border:1px solid var(--color-border);border-radius:8px;display:inline-flex}
.pc-term__ical:hover{color:var(--color-primary);border-color:var(--color-primary)}
.pc-term__ical svg{width:100%;height:100%}
.pc-term .pc-term__cta{margin-top:.4rem;align-self:flex-start;font-size:var(--fs-sm);padding:.5rem 1rem}
@media(max-width:640px){.pc-term{flex-direction:column}.pc-term__media{width:100%;max-width:280px;aspect-ratio:1/1}}

/* Vergangene Veranstaltungen: farblich abgehoben (CD/CI) */
.pc-pastband{background:var(--color-bg-alt)}
.pc-eventlist--past .pc-term{background:#fff;opacity:.72}
.pc-eventlist--past .pc-term__media img{filter:grayscale(.6)}
.pc-past-empty{color:var(--color-text-muted);margin:0}

/* ── Publikations-/Presse-Karten (pubGrid) ─────────────────────────── */
.pc-pub{display:flex;flex-direction:column;background:var(--color-cream);border-radius:var(--radius-lg);overflow:hidden}
.pc-pub__media{aspect-ratio:16/10;background:var(--color-cream);border-radius:0}
.pc-pub__media--empty{display:grid;place-items:center;background:var(--color-cream) url("../assets/brand/repeat_pattern.svg") right center / cover no-repeat}
.pc-pub__mark{font-weight:var(--fw-semibold);font-size:var(--fs-h4);color:var(--color-wisteria-dark);letter-spacing:.02em}
.pc-pub__body{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;padding:var(--space-3)}
.pc-pub__body h3{margin:0}
.pc-pub__kicker{margin:0;color:var(--color-primary);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.pc-pub__link{margin-top:auto}

/* ── Case-Study-Karteikarten (caseStudies) ─────────────────────────── */
.pc-cases{display:flex;flex-direction:column;gap:var(--space-5)}
.pc-case{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.pc-case__media{aspect-ratio:16/10;background:var(--color-cream);border-radius:0}
.pc-case__media--empty{display:grid;place-items:center;background:var(--color-cream) url("../assets/brand/repeat_pattern.svg") center / cover no-repeat}
.pc-case__mark{font-weight:var(--fw-semibold);font-size:var(--fs-h3);color:var(--color-wisteria-dark);letter-spacing:.02em}
.pc-case__body{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;padding:var(--space-4)}
.pc-case__body h3{margin:0;font-size:var(--fs-h3)}
.pc-case__summary{margin:0;max-width:62ch;color:var(--color-text)}
.pc-case__links{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.25rem;padding:var(--space-2) var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-lg);width:100%}
.pc-case__link{display:inline-flex;align-items:center;gap:.35rem;font-weight:var(--fw-semibold);color:var(--color-primary);font-size:var(--fs-sm)}
.pc-case__link::before{content:"↗";font-weight:400}
.pc-case__link:hover{color:var(--color-primary-hover)}
@media(min-width:820px){.pc-case{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch}.pc-case__media{aspect-ratio:auto;min-height:100%}.pc-case__body{padding:var(--space-5)}}