/* ============================================================
   KIONIER "Institut" — Startseite und Archiv
   ============================================================ */

/* --- Leitpaket --- */
.lead { padding: clamp(2.2rem, 4.5vw, 3.6rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.lead__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.lead h1, .lead__title {
  font-family: var(--serif); font-size: var(--size-h1); line-height: 1.18;
  font-weight: 600; letter-spacing: -.008em; margin: .9rem 0 1rem;
}
.lead h1 a:hover, .lead__title a:hover {
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 2px; text-decoration-color: var(--amber);
}
.lead__deck { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); line-height: 1.55; max-width: 32em; }
.lead__more { display: inline-block; font-weight: 600; font-size: .92rem; margin-top: 1.4rem; border-bottom: 2px solid var(--amber); padding-bottom: 2px; }
.lead__more:hover { color: var(--ocker); }
.lead__meta { margin-top: 1.2rem; display: block; }
.lens { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.lens b { display: block; margin-bottom: .4rem; }
.lens p { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.lead__media figure { margin: 0; }
.lead__img, .lead__media img { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; border-radius: var(--radius-img); }
.lead__cap { font-size: .76rem; color: var(--muted); margin-top: .55rem; line-height: 1.5; }

/* --- Ressortkopf (Archiv, Suche) --- */
.rhead { padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.4rem, 2.5vw, 2rem); border-bottom: 1px solid var(--line); }
.rhead__title {
  font-family: var(--serif); font-size: var(--size-h1); line-height: 1.15;
  font-weight: 600; letter-spacing: -.008em; margin: .8rem 0 .8rem;
}
.rhead__deck { font-family: var(--serif); font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-soft); line-height: 1.55; max-width: 40em; }
.rhead__count { display: block; margin-top: 1rem; }
.alead .lead__title { margin-top: .7rem; }

/* --- Ressortliste am Seitenfuß --- */
.ressorts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ressort { display: block; background: var(--paper); padding: 1.1rem 1.2rem; transition: background var(--j-transition); }
.ressort:hover { background: var(--paper-2); }
.ressort b { display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; margin-bottom: .25rem; }
.ressort:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }

/* --- Seitenblättern --- */
.pagination { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pagination .screen-reader-text { display: none; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 .7rem;
  font-family: var(--mono); font-size: .82rem;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.pagination .page-numbers:hover { border-color: var(--line-strong); color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }
.pagination .prev, .pagination .next { font-family: var(--sans); font-weight: 600; }

/* --- Teaser-Reihe (Kacheln) --- */
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.t { display: flex; flex-direction: column; }
.t .lab { font-size: .66rem; color: var(--ocker); }
.t h2, .t h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.3; margin: .55rem 0 .45rem; }
.t h2 a:hover, .t h3 a:hover {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--amber); text-decoration-thickness: 2px;
}
.t p { font-size: .88rem; color: var(--muted); line-height: 1.55; hyphens: auto; }
.t .meta { display: block; margin-top: .6rem; margin-bottom: 1rem; }
.t .btn-quiet { margin-top: auto; }
.t__img, .t__media img {
  aspect-ratio: 3 / 2; object-fit: cover;
  width: calc(100% + 2.7rem); max-width: none; margin: -1.25rem -1.35rem .95rem;
  /* Randlos in der Kachel: nur oben runden, passend zum Kachelradius. */
  border-radius: calc(var(--radius-img) - 1px) calc(var(--radius-img) - 1px) 0 0;
}
.t__viz {
  aspect-ratio: 3 / 2; background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  width: calc(100% + 2.7rem); max-width: none; margin: -1.25rem -1.35rem .95rem;
}
.t__viz .ic { width: 60px; height: 60px; stroke-width: 1.15; }

/* --- Zeilenliste "Weitere Analysen" / Archivlisten --- */
.more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; }
.more article {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: .95rem .6rem; border-bottom: 1px solid var(--line); transition: background .15s;
}
.more article:hover { background: var(--paper-2); }
.more article:hover h2 a, .more article:hover h3 a {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--amber); text-decoration-thickness: 2px;
}
.more h2, .more h3 { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.more .meta { white-space: nowrap; }
.more--single { grid-template-columns: 1fr; }

/* --- Kennzahlen-Zeile --- */
.stats { display: grid; grid-template-columns: repeat(3, auto); gap: 2.2rem; justify-content: start; margin-top: 1.6rem; }
.stat b { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1; display: block; }
.stat b::after { content: ""; display: block; width: 30px; height: 3px; background: var(--amber); margin-top: .4rem; }
.stat span { font-size: .78rem; color: var(--muted); display: block; margin-top: .5rem; max-width: 11em; line-height: 1.45; }

/* --- Ruhige Fläche (Lagebild-Muster) --- */
.data { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.data__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.data h2 { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 600; line-height: 1.18; margin: .8rem 0 .9rem; }
.data__grid > div > p { color: var(--ink-soft); font-size: .98rem; max-width: 30em; }
.data__link { display: inline-block; font-weight: 600; font-size: .92rem; margin-top: 1.7rem; border-bottom: 2px solid var(--amber); padding-bottom: 2px; }
.data__link:hover { color: var(--ocker); }
.chartcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-img); padding: 1.6rem; }
.chart { display: block; width: 100%; height: auto; }
.chart .ct { font-family: var(--serif); font-size: 16px; font-weight: 600; fill: var(--ink); }
.chart .s { font-family: var(--sans); font-size: 11.5px; fill: var(--muted); }
.chart .lbl { font-family: var(--sans); font-size: 12.5px; fill: #3a3f48; }
.chart .val { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--ink); }
.chart rect { fill: var(--navy); }
.chart rect.hot { fill: var(--amber); }
.chart__src { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-top: .9rem; line-height: 1.6; }
/* Auf schmalen Geräten ersetzt eine Textliste das SVG — dort ist es unlesbar. */
.chartlist { display: none; }

/* --- Fallakten --- */
.fall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.fall article { display: flex; flex-direction: column; }
.fall .no { font-family: var(--serif); font-size: 2.1rem; font-weight: 700; color: var(--faint); line-height: 1; display: block; }
.fall .lab { font-size: .66rem; color: var(--ocker); display: block; margin-top: .7rem; }
.fall h2, .fall h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.32; margin: .5rem 0 .45rem; }
.fall h2 a:hover, .fall h3 a:hover {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--amber); text-decoration-thickness: 2px;
}
.fall p { font-size: .88rem; color: var(--muted); line-height: 1.55; hyphens: auto; margin-bottom: 1rem; }
.fall .btn-quiet { margin-top: auto; }

/* --- Zitatfläche (Gesprächsserie) --- */
.talk { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.talk__grid { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1.58fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
.talk__img { width: 100%; object-fit: cover; aspect-ratio: 3 / 4; max-height: 400px; border-radius: var(--radius-img); }
.talk figure { margin: 0; }
.talk blockquote {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 500; line-height: 1.4; color: var(--ink); max-width: 26em; margin: 0;
}
.talk blockquote em { font-style: italic; color: var(--ocker); }
.talk figcaption { font-size: .82rem; color: var(--muted); margin-top: 1.3rem; line-height: 1.7; max-width: 52em; }
.talk__link { display: inline-block; font-weight: 600; font-size: .9rem; margin-top: 1rem; border-bottom: 2px solid var(--amber); padding-bottom: 2px; }
.talk__link:hover { color: var(--ocker); }

/* --- Business-Case-Tabelle --- */
.cases { overflow-x: auto; }
.cases table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.cases th {
  font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: .7rem .9rem .7rem 0; border-bottom: 2px solid var(--ink);
}
.cases td { padding: .95rem .9rem .95rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cases td:first-child { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.cases td:first-child a:hover {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--amber); text-decoration-thickness: 2px;
}
.cases .num { text-align: right; font-family: var(--mono); font-size: .86rem; white-space: nowrap; padding-right: 0; }
.cases th.num { text-align: right; }
.cases .neg { color: #A03A2A; font-weight: 600; }
.cases__note { font-size: .9rem; color: var(--muted); margin-top: 1.1rem; max-width: 56em; }

/* --- Leitfäden --- */
.guides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.guide { display: flex; flex-direction: column; }
.guide b { font-family: var(--serif); font-size: 2.1rem; font-weight: 700; color: var(--faint); line-height: 1; display: block; }
.guide h2, .guide h3 { font-family: var(--serif); font-size: 1.14rem; font-weight: 600; line-height: 1.34; }
.guide h2 a:hover, .guide h3 a:hover {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--amber); text-decoration-thickness: 2px;
}
.guide p { font-size: .76rem; color: var(--muted); margin-top: .5rem; margin-bottom: 1rem; }
.guide .btn-quiet { margin-top: auto; }

/* --- Werkzeuge --- */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.tool { display: flex; flex-direction: column; }
.tool h2, .tool h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: .55rem 0 .45rem; }
.tool p { font-size: .9rem; color: var(--muted); line-height: 1.58; hyphens: auto; margin-bottom: 1rem; }
.tool .btn-quiet { margin-top: auto; }

/* --- Nachschlagewerke --- */
.wrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.wrow > div { display: flex; flex-direction: column; }
.wrow b { font-family: var(--serif); font-size: 2.3rem; font-weight: 700; line-height: 1; display: block; }
.wrow b::after { content: ""; display: block; width: 34px; height: 3px; background: var(--amber); margin-top: .45rem; }
.wrow h2, .wrow h3 { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin: .75rem 0 .35rem; }
.wrow p { font-size: .88rem; color: var(--muted); line-height: 1.55; margin-bottom: 1rem; }
.wrow .btn-quiet { margin-top: auto; }

/* --- Dunkler Banner (Monitor-Muster) --- */
.monitor { position: relative; overflow: hidden; border-radius: var(--radius-img); color: #fff; min-height: 300px; display: flex; align-items: center; }
.monitor__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.monitor::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(12, 22, 34, .94) 30%, rgba(12, 22, 34, .45)); }
.monitor__body { position: relative; padding: clamp(2rem, 4.5vw, 3.4rem); max-width: 640px; }
.monitor .lab { color: var(--amber); }
.monitor h2 { font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 600; margin: .7rem 0 .6rem; }
.monitor p { color: rgba(255, 255, 255, .72); font-size: .94rem; max-width: 38em; }
.monitor a.btn-solid { margin-top: 1.4rem; border-color: #fff; color: #fff; }
.monitor a.btn-solid:hover { background: #fff; color: var(--navy); }
.monitor__credit { position: absolute; right: 1rem; bottom: .7rem; font-family: var(--mono); font-size: .64rem; color: rgba(255, 255, 255, .45); }

@media (max-width: 960px) {
  .lead__grid, .data__grid, .talk__grid { grid-template-columns: 1fr; }
  .row4, .row3, .fall, .tools, .wrow, .guides { grid-template-columns: 1fr 1fr; }
  .ressorts { grid-template-columns: 1fr 1fr; }
  .more { grid-template-columns: 1fr; }
  .talk__img { max-height: 260px; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .row4, .row3, .fall, .tools, .wrow, .guides { grid-template-columns: 1fr; }
  .ressorts { grid-template-columns: 1fr; }
  .lens { grid-template-columns: 1fr; gap: 1.2rem; }
  .stats { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .chart { display: none; }
  .chartlist { display: block; }
  .chartlist h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; margin-bottom: .2rem; }
  .chartlist > p { font-size: .78rem; color: var(--muted); margin-bottom: 1rem; }
  .chartlist li { list-style: none; margin-bottom: .9rem; }
  .chartlist .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; margin-bottom: .3rem; }
  .chartlist .row b { font-family: var(--mono); font-weight: 600; }
  .chartlist .bar { height: 7px; background: var(--paper-2); overflow: hidden; }
  .chartlist .bar i { display: block; height: 100%; background: var(--navy); }
  .chartlist li:first-child .bar i { background: var(--amber); }

  /* Die Kennzahlentabelle stapelt: seitliches Scrollen versteckt genau die
     beiden Zahlenspalten, um die es in dieser Tabelle geht. */
  .cases { overflow-x: visible; }
  .cases thead { display: none; }
  .cases table, .cases tbody, .cases tr, .cases td { display: block; width: 100%; }
  .cases tr { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
  .cases td { border: none; padding: 0; }
  .cases td:first-child { font-size: 1.08rem; line-height: 1.3; }
  .cases td[data-label] { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: .45rem; }
  .cases td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--mono); font-size: .66rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  .cases td[data-label]:not(.num) { color: var(--ink-soft); font-size: .88rem; }
  .cases .num { text-align: right; }
}