/**** C&A – Diskurs Page Polish v1.3 **********************************/

/* Seitenhülle */
.disc-page { 
  --disc-pad: clamp(0.8rem, 2.2vw, 1.6rem);
  --disc-gap: clamp(1.0rem, 3.2vw, 2.2rem);
}
.disc-page .section-lead {
  margin: .25rem 0 .8rem;
  color: var(--ca-text-secondary, #6a655f);
  font-size: clamp(.98rem, 1.1vw, 1.05rem);
  line-height: 1.6;
}

/* Hero-Einleitung */
.disc-hero {
  margin: 0 0 var(--disc-gap);
  padding: clamp(1rem, 3vw, 1.4rem) clamp(1rem, 3vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--ca-accent, #0F766E) 15%, #e6e3dd);
  border-radius: 16px;
  background:
    radial-gradient(1100px 250px at 20% -60%, rgba(20,184,166,.16), transparent 60%),
    linear-gradient(180deg, #fff, #fbfaf7);
  box-shadow: 0 10px 28px rgba(15,118,110,.08);
}
.disc-hero p { margin: .3rem 0 0; }

/* Abschnittsüberschriften */
.disc-page h2 {
  margin: calc(var(--disc-gap) - .25rem) 0 .25rem;
}
.disc-page h2 + p { margin-top: .2rem; }

/* == KPI-Karte vergrößern & stacken == */
.disc-page .ca-live-card{
  margin: .4rem 0 var(--disc-gap);
  gap: clamp(.6rem, 1.1vw, 1rem);
  padding: clamp(.9rem, 2.2vw, 1.25rem) clamp(1rem, 2.6vw, 1.5rem);
  border-radius: 16px;
}
.disc-page .ca-live-left .ca-live-title{
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}
.disc-page .ca-live-sub{ opacity:.95; }

/* Kennzahlen als kleine Kacheln – Zahl oben, Label unten */
.disc-page .ca-live-metrics{
  display:flex; gap: clamp(.5rem, 1.2vw, .9rem);
  margin-left:auto; flex-wrap: wrap;
}
.disc-page .ca-live-metric{
  display:grid; place-items:center;
  padding: clamp(.55rem, 1.2vw, .75rem) clamp(.7rem, 1.8vw, 1rem);
  min-width: clamp(120px, 17vw, 180px);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.disc-page .ca-live-metric .num{
  display:block;
  font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.disc-page .ca-live-metric .lbl{
  display:block; margin-top:.15rem;
  font-weight: 700;
  font-size: clamp(.78rem, .9vw, .95rem);
  letter-spacing: .01em;
  opacity: .98;
}

/* Mobile: Kacheln auf 100% Breite möglich */
@media (max-width: 640px){
  .disc-page .ca-live-metrics{ width:100%; margin-left:0; }
  .disc-page .ca-live-metric{ min-width: min(100%, 340px); }
}

/* Themen-Bereich: generöse Luft + Empty State */
.disc-page .ca-topics,
.disc-page .disc-bubbles { 
  margin: 0 0 var(--disc-gap); 
}
.disc-page .ca-empty,
.disc-page .disc-empty {
  margin: .6rem 0 var(--disc-gap);
  padding: 1rem 1.2rem;
  border: 1px dashed var(--ca-border-light, #e6e3dd);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #fbfaf7);
  color: var(--ca-text-secondary,#6a655f);
}
.disc-page .disc-empty strong{ color: var(--ca-accent, #0F766E); }

/* CTA-Box am Ende */
.disc-cta{
  margin: var(--disc-gap) 0;
  padding: clamp(1rem, 2.6vw, 1.4rem);
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 14px;
  background: linear-gradient(180deg,#fff,#fbfaf7);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.disc-cta h3{ margin: .2rem 0 .4rem; }
.disc-cta .disc-actions{
  margin-top: .6rem; display:flex; gap:.6rem; flex-wrap: wrap;
}
.disc-cta .btn-disc{
  -webkit-appearance:none; appearance:none;
  border: 0; border-radius: 999px;
  padding: .65rem 1.1rem;
  font-weight: 700; cursor: pointer;
  background: var(--ca-accent, #0F766E); color:#fff;
  box-shadow: 0 6px 16px rgba(15,118,110,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.disc-cta .btn-disc:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15,118,110,.3);
}

/* Details/FAQ hübscher */
.disc-page details{
  border:1px solid var(--ca-border-light,#e6e3dd);
  border-radius:10px; background:#fff;
  padding:.55rem .75rem; margin:.5rem 0;
}
.disc-page details > summary{
  cursor:pointer; font-weight:700;
  list-style:none; outline:none;
}
.disc-page details[open]{ box-shadow:0 10px 20px rgba(0,0,0,.05); }
.disc-page details > summary::-webkit-details-marker{ display:none; }

/* Kleine Helfer */
.disc-eyebrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; font-size:.92rem; color:#fff;
  padding:.25rem .55rem; border-radius:999px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(2px);
}

/**** C&A – Diskurs Polish (H1‑outside) v1.0 ***************************/

/* 1) Lead direkt nach H1 – nur auf Seiten, die die Diskurs‑Karte enthalten */
body.page:has(.ca-live-card) .entry-content > p:first-of-type{
  margin: 0 0 1.2rem;
  padding: clamp(1rem, 2.6vw, 1.4rem) clamp(1rem, 3vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--ca-accent,#0F766E) 15%, #e6e3dd);
  border-radius: 16px;
  background:
    radial-gradient(1100px 250px at 20% -60%, rgba(20,184,166,.12), transparent 60%),
    linear-gradient(180deg,#fff,#fbfaf7);
  box-shadow: 0 10px 24px rgba(15,118,110,.08);
  color: var(--ca-text-secondary,#6a655f);
  line-height: 1.65;
  font-size: clamp(.98rem, 1.06rem + .2vw, 1.08rem);
}

/* 2) Abstände & Kacheln der KPI‑Karte etwas großzügiger */
body.page .ca-live-card{
  margin: .7rem 0 1.6rem;
  gap: clamp(.6rem, 1.2vw, 1rem);
  padding: clamp(.9rem, 2.2vw, 1.25rem) clamp(1rem, 2.6vw, 1.5rem);
  border-radius: 16px;
}
body.page .ca-live-metrics{
  display:flex; gap: clamp(.5rem, 1.2vw, .9rem);
  flex-wrap: wrap; margin-left:auto;
}
body.page .ca-live-metric{
  display:grid; place-items:center;
  min-width: clamp(120px, 17vw, 180px);
  padding: clamp(.55rem, 1.2vw, .75rem) clamp(.7rem, 1.8vw, 1rem);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
body.page .ca-live-metric .num{
  display:block; font-weight:800;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  line-height:1.05; font-variant-numeric: tabular-nums;
}
body.page .ca-live-metric .lbl{
  display:block; margin-top:.15rem; font-weight:700;
  font-size: clamp(.78rem, .9vw, .95rem); letter-spacing:.01em; opacity:.98;
}

/* 3) Abschnitts‑Leads unter H2 */
body.page h2 + p{
  margin-top:.2rem;
  color: var(--ca-text-secondary,#6a655f);
  font-size: clamp(.96rem, 1.02rem + .1vw, 1.04rem);
}

/* 4) Schöne „Empty States“ unter Themen/Timeline */
body.page .disc-empty,
body.page .ca-empty{
  margin: .6rem 0 1.6rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--ca-border-light,#e6e3dd);
  border-radius: 12px;
  background: linear-gradient(180deg,#fff,#fbfaf7);
  color: var(--ca-text-secondary,#6a655f);
}
body.page .disc-empty strong{ color: var(--ca-accent,#0F766E); }

/* 5) Mobile Feinschliff */
@media (max-width: 640px){
  body.page .ca-live-metrics{ width:100%; margin-left:0; }
  body.page .ca-live-metric{ min-width:min(100%, 340px); }
}