/* =========================================
   OE Kern (Kern-Grafik + Detailbox)
   Datei: styles-oe-kern.css
   Prefix: oe-kern-*
========================================= */

:root{
  /* Kern-Textbox: Default Farben */
  --oe-kern-head-color: rgba(193, 198, 201, 0.92);
  --oe-kern-body-color: rgba(245, 248, 248, 0.90);

  /* Kern-Textbox: Gradient-Linie (wie Wheel) */
  --oe-kern-head-line-a: rgba(39,212,255,0.70);
  --oe-kern-head-line-b: rgba(39,212,255,0.18);
  --oe-kern-head-line-c: rgba(39,212,255,0.00);

  --oe-kern-head-to-line: 8px;   /* Abstand Header → Linie */
  --oe-kern-line-to-text: 10px;  /* Abstand Linie → Text/Bullets */
}



.oe-kern {
  display: grid;
  gap: 20px;
}

/* SVG area */
.oe-kern__svg-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,0.08);
}

.oe-kern-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Hit areas (transparent overlays in the SVG) */
.oe-kern-hit {
  cursor: pointer;
  outline: none;
}

.oe-kern-hit:focus {
  outline: none;
  stroke: none;
}


/* Hover (Preview) */
.oe-kern-hit:hover {
  fill-opacity: 0.08;
}

/* Active / Freeze */
.oe-kern-hit.is-active {
  fill-opacity: 0.12;
}


/* Detail panel */
.oe-kern-panel {
  border-radius: 16px;
  padding: 18px;
  background: rgba(12, 29, 39, 0.65);
  border: 1px solid rgba(255,255,255,0.08);
}

.oe-kern-panel__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}

.oe-kern-panel__h{
  margin: 0 0 var(--oe-kern-head-to-line) 0;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;

  /* neue: individuelle Headerfarbe */
  color: var(--oe-kern-head-color);
  position: relative;
  padding-bottom: 8px;
}

/* neue: Gradient-Linie unter Header */
.oe-kern-panel__h::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background: linear-gradient(
    90deg,
    var(--oe-kern-head-line-a) 0%,
    var(--oe-kern-head-line-b) 55%,
    var(--oe-kern-head-line-c) 100%
  );
  opacity: 0.9;
}


.oe-kern-panel__h--mt {
  margin-top: 14px;
}

.oe-kern-panel__p {
  margin: 0;
  line-height: 1.55;
  opacity: 0.95;
}

.oe-kern-panel__list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.55;
  opacity: 0.95;
}

.oe-kern-panel__p,
.oe-kern-panel__list{
  color: var(--oe-kern-body-color);
  margin-top: var(--oe-kern-line-to-text);
  font-family: var(--font-text);
  font-weight: 400;
}




/* ===== Blocks: pro Header (und dessen Content) eigene Farben ===== */
.oe-kern-panel__block{
  /* Optional: Linie je Block steuerbar */
  --oe-kern-head-line-a: rgba(39,212,255,0.70);
  --oe-kern-head-line-b: rgba(39,212,255,0.18);
  --oe-kern-head-line-c: rgba(39,212,255,0.00);
}

/* Header + Linie: nutzt jetzt Block-Variablen */
.oe-kern-panel__block .oe-kern-panel__h{
  color: var(--oe-kern-head-color);
}

.oe-kern-panel__block .oe-kern-panel__p,
.oe-kern-panel__block .oe-kern-panel__list{
  color: var(--oe-kern-body-color);
}

/* Abstand: Linie -> Text/Liste sauber wie beim Wheel */
.oe-kern-panel__block .oe-kern-panel__p,
.oe-kern-panel__block .oe-kern-panel__list{
  margin-top: var(--oe-kern-line-to-text);
}

/* Wenn du zwischen Blocks etwas Luft willst (optional) */
.oe-kern-panel__block + .oe-kern-panel__block{
  margin-top: 12px;
}

/* =========================
   OE Kern — "Mehr/Weiter" Button
   ========================= */

.oe-kern-panel{
  position: relative;          /* falls mal entfernt: Button braucht das */
  padding-bottom: 56px;        /* Platz für Button unten rechts */
}

.oe-kern-more{
  position: absolute;
  right: 16px;
  bottom: 14px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 12px;

  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.04em;

  color: rgba(245,248,248,0.92);
  background: linear-gradient(90deg, rgba(39,212,255,0.16), rgba(39,212,255,0.06));
  border: 1px solid rgba(255,255,255,0.10);

  cursor: pointer;
  user-select: none;

  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease, border-color 120ms ease;
}

.oe-kern-more:hover{
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgba(39,212,255,0.22), rgba(39,212,255,0.08));
  border-color: rgba(255,255,255,0.16);
}

.oe-kern-more:active{
  transform: translateY(0px);
}

.oe-kern-more.is-hidden{
  opacity: 0;
  pointer-events: none;
}


@media (max-width: 980px) {
  .oe-kern-panel__grid {
    grid-template-columns: 1fr;
  }
  .oe-kern__svg-wrap {
    border-radius: 14px;
  }
}