/* ============================================================
   BUNDESTAG.SG.COM  -  REDESIGN A: "BEHOERDENFORMBLATT" (v2, readable)
   German federal-document skin. Reskins the real app markup only;
   no content is changed. v2 reworked for readability per UI/UX review:
   - body font is a normal-width system sans at 16px (was condensed
     Arial Narrow); headings are Georgia serif for an editorial/official
     feel; data uses tabular figures.
   - sections are separated by WHITESPACE + hairline rules, not by a
     border around every box (was: 1px ink border on everything).
   - prose measure capped ~72ch; contrast meets WCAG AA.
   ============================================================ */

:root{
  --paper:#efe8d6;        /* warmer manila sheet, so cards/panels read against it */
  --paper2:#e6ddc6;       /* deeper band: table headers, hovers */
  --ink:#211f1b;
  --ink2:#3a362f;
  --blau:#1a3b6b;
  --rot:#9a1b16;
  --line:#d8d0bf;        /* hairline */
  --line2:#c3baa6;       /* stronger rule */
  --grau:#5f5a4e;        /* AA on paper */
  --orange:#d8431f;      /* deploy   */
  --blau2:#3f6fa8;       /* critique */
  --sans:system-ui,-apple-system,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* heatmap density ramp - sepia, dark ink legible on every level */
  --d0:#f1ecdf; --d1:#ecdcc0; --d2:#e0c89c; --d3:#cfae77; --d4:#bd9450; --dna:#efe9dc;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#615a4b;color:var(--ink)}
body{font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blau);text-decoration:none}
a:hover{text-decoration:underline}
em,i{font-style:normal}
img{max-width:100%}
html{scroll-behavior:smooth}

/* ---- letterhead / topbar -------------------------------- */
.topbar{
  position:relative;background:var(--paper);color:var(--ink);
  padding:16px 32px 12px;border-bottom:2px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.brand{
  font-family:var(--serif);font-weight:600;color:var(--ink);font-size:22px;letter-spacing:.2px;
  padding-left:0;line-height:1.1;
}
/* seal removed - no fake official emblem */
.brand:after{
  content:"Bundestag speeches, decoded for learners";
  display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2px;color:var(--grau);
  font-weight:400;margin-top:2px;
}

/* consolidated nav: 4 top items, two are grouped menus, active highlighted */
nav.mainnav{display:flex;align-items:center;gap:2px;font-family:var(--sans)}
.mainnav > a,.navtop{
  font-size:14.5px;font-weight:600;color:var(--ink);background:none;border:0;
  padding:8px 13px;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;
}
.mainnav > a:hover,.navtop:hover{color:var(--blau);text-decoration:none}
.mainnav > a.active,.navgroup.active .navtop{color:var(--blau);border-bottom-color:var(--blau)}
.navgroup{position:relative}
.navtop:after{content:" \25BE";font-size:9px;color:var(--grau)}
.submenu{
  position:absolute;left:0;top:100%;min-width:168px;background:var(--paper);
  border:1px solid var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.22);display:none;z-index:60;
}
.navgroup:hover .submenu,.navgroup:focus-within .submenu{display:block}
.submenu a{display:block;padding:9px 15px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line)}
.submenu a:last-child{border-bottom:0}
.submenu a:hover{background:var(--paper2);color:var(--blau);text-decoration:none}

/* incoming stamp - kept small + subtle as an identity mark */
/* incoming stamp - anchored to the sheet (manila) so it's always readable
   and clear of the search box in the bar */
/* incoming stamp - on the sheet (manila) so it stays readable, clear of search */
main:before{
  content:"EINGEGANGEN \A 30. MAI 2026";white-space:pre;text-align:center;
  position:absolute;top:14px;left:28px;z-index:6;
  border:2px solid var(--rot);color:var(--rot);font-family:var(--mono);
  font-size:10px;font-weight:700;letter-spacing:.5px;line-height:1.3;padding:4px 9px;border-radius:3px;
  transform:rotate(-6deg);opacity:.8;pointer-events:none;
}

/* ---- the paper sheet ------------------------------------ */
main{
  display:block;max-width:1000px;margin:28px auto 36px;background:var(--paper);
  padding:44px 56px 36px;position:relative;border:1px solid #ded6c6;
  box-shadow:0 16px 44px rgba(0,0,0,.34);
}
/* keep long prose readable; tables/grids stay full width */
main > section > p,.hero-sub,.muted,.muted-small,.card > p,main > p{max-width:74ch}

/* ---- headings: serif, weight-based hierarchy, hairline rules ---- */
h1{font-family:var(--serif);font-size:27px;font-weight:600;color:var(--ink);letter-spacing:.2px;
   margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
h2{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);
   margin:34px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line2)}
h3{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);margin:20px 0 7px}
h4{font-family:var(--sans);font-size:12px;font-weight:700;text-transform:uppercase;
   letter-spacing:.6px;color:var(--grau);margin:14px 0 5px}
p{margin:9px 0}

/* ---- sections: separated by space, NOT boxed -------------- */
.card,.hero,section{background:none;border:0;padding:0;margin:0 0 30px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line2);padding-bottom:8px;margin-bottom:14px}
.card-head h1,.card-head h2,.card-head h3{margin:0;border:0;padding:0}
.card-actions,.muted,.muted-small,.sub{color:var(--grau)}
.muted-small{font-size:13px}
/* .party-section is an <h3> sub-label (MP sections, party-card subheadings, story
   headers): a filled orange title band for clear, consistent section structure */
h3.party-section{font-family:var(--sans);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:#fff;background:#b8401f;margin:18px 0 10px;padding:6px 12px;
  border:0;border-radius:3px}

/* ---- data tables: light hairline ruling, tabular figures -- */
table,table.data{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:14px;font-variant-numeric:tabular-nums}
table.data thead th,table th{
  background:var(--paper2);color:var(--ink);text-align:left;font-weight:700;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;padding:9px 10px;
  border-bottom:2px solid var(--ink);border-right:1px solid var(--line);
}
table.data td,table td{border-bottom:1px solid var(--line);border-right:1px solid #eae3d3;
  padding:8px 10px;vertical-align:top;color:var(--ink2)}
table.data tbody tr:nth-child(even){background:rgba(33,31,27,.022)}
.clickrow:hover,table.data tbody tr:hover{background:#f1ead8}
.num,.cell-n,.kpi-n,.stat-num,.cell-delta,.cell-wp20,.cell-wp21{font-variant-numeric:tabular-nums}
.num{text-align:right}
.rowhead,.speaker-cell{font-weight:700;color:var(--ink)}

/* ---- party chips / stripes ------------------------------ */
.party-chip{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.3px;padding:2px 8px;border-radius:3px;line-height:1.6;color:#fff}
.party-stripe{height:6px;border-radius:2px}
.party-name{font-weight:700;color:var(--ink)}

/* ---- KPI / stat strip (no boxes) ------------------------ */
.kpis{display:flex;flex-wrap:wrap;gap:34px;margin:12px 0 4px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.kpi,.stat{border:0;background:none;padding:0;min-width:auto;text-align:left}
.kpi-n,.stat-num{display:block;font-size:28px;font-weight:700;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-l,.stat-label{display:block;font-size:12.5px;color:var(--grau);margin-top:3px}

/* ---- hero / search -------------------------------------- */
.hero{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.hero-h{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ink);margin:0 0 6px}
.hero-sub{color:var(--grau)}
.ask-search{display:flex;gap:0;margin:14px 0;max-width:620px}
.ask-search input,input[type=text],input[type=password]{
  flex:1;padding:11px 13px;border:1px solid var(--line2);background:#fff;
  font-family:var(--sans);font-size:16px;color:var(--ink)}
.ask-search button,.btn,button{
  font-family:var(--sans);font-weight:600;font-size:15px;cursor:pointer;
  background:var(--ink);border:1px solid var(--ink);color:var(--paper);padding:11px 20px}
.btn{display:inline-block;border-radius:0}
.btn:hover,button:hover,.ask-search button:hover{background:#000}
/* quick-link chips + clickable tiles: the ONLY light boxes that remain */
.hero-chips,.entry-grid,.topic-grid,.party-topics{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.entry-grid,.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.chip,.party-cta{display:inline-block;border:1px solid var(--line2);background:#faf7ef;
  padding:6px 12px;font-size:13.5px;color:var(--ink);border-radius:3px}
.chip:hover,.party-cta:hover{border-color:var(--ink);text-decoration:none}
.entry-card,.topic-card{display:block;border:1px solid var(--line2);background:#fdfbf5;
  padding:16px 18px;border-radius:4px;color:var(--ink);box-shadow:0 1px 3px rgba(60,50,30,.07)}
.entry-card:hover,.topic-card:hover{border-color:var(--ink);background:#fff;text-decoration:none;box-shadow:0 5px 16px rgba(60,50,30,.12)}
.entry-card h3{margin-top:0}
.entry-cta{color:var(--blau);font-weight:600;font-size:14px}

/* ---- stance bars: page legend deploy=orange, critique=blue, unrelated=grey -- */
.stance-bar{display:flex;height:14px;border:1px solid var(--line2);overflow:hidden;margin:6px 0;background:#fff;border-radius:2px}
.sb{display:block;height:100%}
.sb-d{background:var(--orange)!important}
.sb-c{background:var(--blau2)!important}
.sb-u{background:#cfc7b2!important}
.sb-na{background:repeating-linear-gradient(45deg,#efeadd 0 4px,#dcd4bf 4px 8px)!important}
.stance-legend{font-size:12px;color:var(--grau);margin:5px 0 0}

/* ---- heatmap density cells: dark ink on sepia, legible everywhere -- */
.cell,.period-cell,.topic-density{font-family:var(--sans);font-variant-numeric:tabular-nums;
  text-align:center;vertical-align:middle;color:var(--ink)}
.d-0{background:var(--d0)} .d-1{background:var(--d1)} .d-2{background:var(--d2)}
.d-3{background:var(--d3)} .d-4{background:var(--d4)}
.d-lowN{background:#efe9dc;color:var(--grau)} .d-na{background:var(--dna);color:#b3ab98}
.cell-link,.cell-period-link{color:var(--ink);font-weight:700;display:block;line-height:1.3}
.cell-link:hover{text-decoration:none}
.cell-n{display:block;font-size:11px;font-weight:400;color:var(--grau);margin-top:1px}
.x-pos{background:#f6ddc9} .x-neg{background:#d6e0ee} .x-flat{background:#e7e1d3} .x-na{background:var(--dna)}
.cell-wp20,.cell-wp21{display:block;font-size:11px;font-weight:400;color:var(--grau)}
.cell-delta{display:block;font-weight:700;color:var(--ink);font-size:15px;margin-top:2px}
.rowhead{vertical-align:top}
.topos-name{font-weight:700;font-size:14px;color:var(--ink)}
.topos-en{display:block;color:var(--grau);font-weight:400;font-size:12px;margin-top:2px;max-width:36ch}

/* ---- footer: restrained signature + barcode ------------- */
.footer{max-width:1000px;margin:0 auto 48px;background:var(--paper);border:1px solid #ded6c6;
  border-top:2px solid var(--ink);padding:16px 56px 20px;position:relative;
  font-size:12px;color:var(--grau);box-shadow:0 12px 28px rgba(0,0,0,.26)}
/* footer signature line + barcode removed - no official-document cosplay */

/* ===== gentle wayfinding accents ===== */
.party-cta,.entry-cta{color:var(--orange);font-weight:600;font-size:14px;display:inline-block;margin-top:8px}
.party-cta:hover,.entry-cta:hover{text-decoration:underline;color:#b8401f}

/* ===== parties page: each Fraktion a self-contained card ===== */
.party-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:8px}
.party-card{display:block;border:1px solid var(--line2);border-radius:5px;background:#fdfbf5;
  padding:0 18px 16px;color:var(--ink);overflow:hidden;box-shadow:0 1px 3px rgba(60,50,30,.07)}
.party-card:hover{border-color:var(--ink);background:#fff;text-decoration:none;box-shadow:0 7px 20px rgba(0,0,0,.09)}
.party-card .party-stripe{height:7px;border-radius:0;margin:0 -18px 14px}
.party-card .party-name{font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 12px;border:0;color:var(--ink)}
.party-stats{display:flex;gap:28px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:4px}
.party-stats .stat{padding:0}
.party-stats .stat-num{font-size:25px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.party-stats .stat-label{font-size:12px;color:var(--grau);margin-top:2px}
.party-topics{list-style:none;margin:0;padding:0}
.party-topics li{display:flex;align-items:baseline;gap:10px;padding:3px 0;border-bottom:1px dotted var(--line)}
.party-topics li:last-child{border-bottom:0}
.party-topics .topic-label{color:var(--ink2)}
.party-topics .topic-density{margin-left:auto;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums}
.party-speakers{list-style:none;margin:0;padding:0}
.party-speakers li{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink2);border-bottom:1px dotted var(--line)}
.party-speakers li:last-child{border-bottom:0}
.party-speakers li .muted{font-variant-numeric:tabular-nums;font-weight:600}
.party-card .stance-bar{margin-top:4px}.party-card .party-cta{margin-top:14px}

/* ===== stories page: tighter cards, clearer headings ===== */
.topic-grid{align-items:start}
.topic-card{min-height:0}
.topic-card h2{font-size:18px;margin-top:0}
.topic-card .muted{margin-top:4px}

/* ===== global search ===== */
.search{position:relative;margin-left:8px}
.search input{width:212px;padding:8px 11px 8px 31px;border:1px solid var(--line2);border-radius:5px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f5a4e' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>") 9px center no-repeat;
  font-family:var(--sans);font-size:14px;color:var(--ink)}
.search input:focus{outline:2px solid var(--blau2);outline-offset:1px;width:248px}
.search-results{position:absolute;right:0;top:calc(100% + 5px);width:360px;max-height:64vh;overflow-y:auto;
  background:var(--paper);border:1px solid var(--ink);border-radius:5px;box-shadow:0 14px 34px rgba(0,0,0,.28);
  z-index:90;display:none}
.search-results.open{display:block}
.search-results a{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--line);color:var(--ink)}
.search-results a:last-child{border-bottom:0}
.search-results a:hover,.search-results a.sel{background:var(--paper2);text-decoration:none}
.sr-badge{flex:0 0 auto;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:#fff;background:var(--grau);padding:2px 6px;border-radius:3px;min-width:42px;text-align:center}
.sr-badge.b-mdb{background:var(--blau)}.sr-badge.b-partei{background:var(--orange)}
.sr-badge.b-thema{background:#8a6d2f}.sr-badge.b-rede{background:#5d6b86}.sr-badge.b-seite{background:#3a362f}
.sr-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-sub{color:var(--grau);font-size:12px;margin-left:auto;flex:0 0 auto;padding-left:8px}
.sr-empty{padding:13px;color:var(--grau);font-size:13px}

/* ===== KPI table (Variante 4) injected on /overview ===== */
.ktab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:12px 0}
.ktab th{background:var(--paper2);text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:2px solid var(--ink);color:var(--ink)}
.ktab th.num,.ktab td.num{text-align:right}
.ktab td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--ink2)}
.ktab td.num{color:var(--ink)}
.ktab .kgrp td{background:#f3ecdc;font-weight:700;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.3px}
.ktab .ktot td{font-weight:700;color:var(--ink);border-bottom:2px solid var(--line2)}
.ktab .kspark{width:44%}
.ktab .kspark span{display:block;height:12px;border-radius:2px}
.ktag{font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--grau);background:var(--paper);border:1px solid var(--line2);padding:1px 6px;border-radius:3px;text-transform:none}

/* ===== platform icon buttons (MP profile social links) ===== */
.btn.pf{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:42px;padding:0;margin:0 7px 7px 0;vertical-align:top}
.btn.pf .pf-ico{display:inline-flex}
.btn.pf .pf-ico svg{width:19px;height:19px;display:block}
.btn.pf .pf-tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);font-size:12px;white-space:nowrap;padding:5px 10px;
  border-radius:5px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:75;
  box-shadow:0 6px 16px rgba(0,0,0,.3)}
.btn.pf .pf-tip:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink)}
.btn.pf:hover .pf-tip,.btn.pf:focus .pf-tip{opacity:1}

/* misc */
.tip{border-bottom:1px dotted var(--grau);cursor:help}
.data-label{display:none}
.st-done{color:#2e6b2e;font-weight:700}.st-failed{color:var(--rot);font-weight:700}

/* MP profile facts: clean aligned key-value grid (was an unstyled <dl>) */
.bio-grid{display:grid;grid-template-columns:max-content 1fr;gap:0 20px;margin:12px 0;font-size:14.5px}
.bio-grid dt{font-weight:600;color:var(--grau);padding:8px 0;border-top:1px solid var(--line)}
.bio-grid dd{margin:0;color:var(--ink);padding:8px 0;border-top:1px solid var(--line)}
.bio-grid dt:first-of-type,.bio-grid dd:first-of-type{border-top:0}

/* ===== speech page (body + topoi marks + targeted vocab word) ===== */
.speech-layout{display:grid;grid-template-columns:1fr 280px;gap:24px}
.speech-body{line-height:1.75;font-size:16px;color:var(--ink)}
.speech-body p{white-space:normal}
/* topoi/rhetorical-pattern highlight - soft, intentional (title shows the topos) */
.speech-body mark.o{background:#f5ddd1;color:var(--ink);padding:0 2px;border-bottom:2px solid var(--orange);cursor:help}
/* when arriving from a vocab "Sample", dim the topoi so the target word stands out */
.speech-body.hl-mode mark.o{background:transparent;border-bottom-color:var(--line)}
.speech-body .w.hl-target{background:var(--orange);color:#fff;border-radius:2px;padding:0 2px;box-shadow:0 0 0 2px rgba(216,67,31,.25)}
.speech-meta dl{display:grid;grid-template-columns:110px 1fr;row-gap:4px}
.speech-meta dt{color:var(--grau);font-size:12px}.speech-meta dd{margin:0;font-size:13px}
.taglist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.taglist li{background:var(--paper2);border:1px solid var(--line2);padding:2px 6px;font-size:12px;border-radius:3px}
.topoi-side{width:100%;border-collapse:collapse;font-size:12px}
.topoi-side th,.topoi-side td{border:1px solid var(--line2);padding:4px 6px;text-align:left}
.topoi-side thead th{background:var(--paper2)}
@media (max-width:900px){.speech-layout{grid-template-columns:1fr}}

/* clickable words + vocab/translate popup (vocab.js: click a word = dictionary, select text = translate) */
.speech-body .w{cursor:pointer;border-radius:2px}
.speech-body .w:hover{background:#ecdfca}
.speech-body .w.w-active{background:var(--orange);color:#fff}
.o{color:var(--orange)}
.vocab-pop{position:absolute;z-index:200;max-width:330px;min-width:190px;background:var(--paper);
  border:1px solid var(--ink);border-radius:7px;box-shadow:0 14px 36px rgba(0,0,0,.32);
  padding:11px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);line-height:1.45}
.vocab-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:7px}
.vocab-head .o{font-family:var(--serif);font-size:18px;font-weight:600}
.vocab-x{background:none;border:0;font-size:16px;line-height:1;color:var(--grau);cursor:pointer;padding:0 2px}
.vocab-x:hover{color:var(--ink)}
.vocab-x-float{position:absolute;top:8px;right:10px}
.vocab-loading{color:var(--grau)}
.vocab-lemma{color:var(--grau);font-size:12px;margin-bottom:4px}
.vocab-pos{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--grau);margin-top:7px}
.vocab-defs{margin:3px 0 0;padding-left:20px}.vocab-defs li{margin:1px 0}
.vocab-miss{color:var(--grau)}.vocab-miss a{color:var(--blau)}
.translate-pop{padding-right:32px}
.vocab-pop .translate-target{font-size:15px;color:var(--ink);font-weight:500}
.word-pop{padding-right:34px}
.vocab-translation{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.3;margin:0 0 2px}

/* ===== mobile (<=760px): responsive tables + header ===== */
@media (max-width:760px){
  html,body{overflow-x:hidden}
  body{font-size:16px}
  .topbar{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .brand{font-size:19px}
  /* flatten to a tappable row of all links - no dropdowns/hover/reflow on touch */
  nav.mainnav{width:100%;flex-wrap:wrap;gap:6px}
  .navtop{display:none}
  .navgroup,.navgroup .submenu{display:contents}
  .mainnav a{min-height:44px;display:inline-flex;align-items:center;padding:9px 12px;font-size:15px;
    border:1px solid var(--line2);border-radius:6px;background:#fdfbf5;color:var(--ink)}
  .mainnav a.active{border-color:var(--blau);color:var(--blau)}
  .search{width:100%;margin:0}
  .search input,.search input:focus{width:100%}
  .search-results{width:auto;left:0;right:0}
  main{padding:16px 12px 28px}
  main:before{display:none}  /* hide decorative stamp on phones (overlaps the title) */
  .btn,button,.ask-search button{min-height:44px;padding:10px 14px;font-size:16px}
  .card-actions{display:flex;flex-wrap:wrap;gap:8px}
  .kpis{gap:18px}
  .kpi,.stat{flex:1 1 calc(50% - 9px)}

  /* record tables -> stacked cards */
  table.data,table.data thead,table.data tbody,table.data tr,table.data th,table.data td,
  table.jobs,table.jobs thead,table.jobs tbody,table.jobs tr,table.jobs th,table.jobs td,
  table.speech-list,table.speech-list thead,table.speech-list tbody,table.speech-list tr,table.speech-list th,table.speech-list td,
  table.topoi-side,table.topoi-side thead,table.topoi-side tbody,table.topoi-side tr,table.topoi-side th,table.topoi-side td{display:block;border:0}
  table.data thead,table.jobs thead,table.speech-list thead,table.topoi-side thead{display:none}
  table.data tbody tr,table.jobs tbody tr,table.speech-list tbody tr,table.topoi-side tbody tr{
    border:1px solid var(--line2);border-radius:5px;background:#fdfbf5;padding:10px 12px;margin-bottom:8px;box-shadow:0 1px 3px rgba(60,50,30,.06)}
  table.data tbody tr:nth-child(even){background:#fdfbf5}
  table.data td,table.jobs td,table.speech-list td,table.topoi-side td{padding:3px 0;border:0;text-align:left}
  table.data td[data-label]::before,table.jobs td[data-label]::before,table.speech-list td[data-label]::before,table.topoi-side td[data-label]::before{
    content:attr(data-label) ": ";color:var(--grau);font-size:12px;font-weight:600;margin-right:4px}
  td.speaker-cell{font-weight:700;font-size:15px;padding:0 0 6px;border-bottom:1px solid var(--line);margin-bottom:6px;color:var(--ink)}
  td.speaker-cell::before{content:none !important}

  /* heatmap -> per-row card grid (kept dense, not flattened) */
  table.heatmap,table.heatmap thead,table.heatmap tbody,table.heatmap tr,table.heatmap th,table.heatmap td{display:block;border:0}
  table.heatmap thead{display:none}
  table.heatmap tbody tr{border:1px solid var(--line2);border-radius:5px;background:#fdfbf5;padding:10px 12px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  table.heatmap th.rowhead{grid-column:1/-1;padding:0 0 8px;background:transparent;text-align:left;border-bottom:1px solid var(--line);margin-bottom:4px;white-space:normal;vertical-align:top}
  table.heatmap .topos-en{max-width:none}
  table.heatmap td.cell,table.heatmap td.period-cell{padding:8px 10px;text-align:left;vertical-align:top}
  table.heatmap td.cell::before,table.heatmap td.period-cell::before{content:attr(data-fraction);display:block;font-size:10px;font-weight:700;opacity:.75;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;color:inherit}
  table.heatmap td.cell .cell-link{display:inline}

  /* V4 KPI table compact */
  .ktab{font-size:12.5px}
  .ktab th,.ktab td{padding:6px 6px}
  .ktab .kspark{width:28%}

  /* speeches filter bar single column */
  .filterbar{grid-template-columns:1fr;gap:8px;padding:10px}
  .filterbar input,.filterbar select{width:100%;min-width:0;min-height:44px}
}

/* ============================================================
   AUDIO: spoken-sentence highlight + focus mode  (2026-05-31)
   ============================================================ */
.audio-player{margin:6px 0 18px}
.audio-player audio{width:100%;max-width:520px;display:block}
.audio-credit{font-size:12px;color:var(--grau);margin:6px 0 0}
.audio-duration{font-variant-numeric:tabular-nums;margin-left:6px}

/* player controls row: speed + focus toggle + shortcut hint */
.reader-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 18px}
.speed-btn{font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer;
  background:var(--paper2);border:1px solid var(--line2);color:var(--ink);
  padding:10px 16px;border-radius:0;font-variant-numeric:tabular-nums}
.speed-btn:hover{background:#ddd2b9}
.reader-hint{font-size:12px;color:var(--grau);border:1px solid var(--line2);
  background:var(--paper2);padding:7px 12px;border-radius:2px}

/* the sentence currently being spoken - warm orange wash, no vertical rule */
.speech-body .sent{border-radius:2px;transition:background .12s ease,box-shadow .12s ease}
.speech-body .sent.sent-active{
  background:rgba(216,67,31,.15);
  box-shadow:0 0 0 3px rgba(216,67,31,.15);
}

/* ---- focus mode: text + audio only ---------------------- */
.btn-focus[aria-pressed="true"]{background:var(--orange);border-color:var(--orange)}
body.focus-mode{background:var(--paper)}
body.focus-mode .topbar,
body.focus-mode .footer,
body.focus-mode .speech-meta,
body.focus-mode .card-head h1,
body.focus-mode .speech-topic,
body.focus-mode .card-actions .btn,
body.focus-mode main:before{display:none !important}
body.focus-mode main{max-width:760px;margin:0 auto;padding:30px 26px 44px;
  border:0;box-shadow:none;background:var(--paper)}
body.focus-mode .card-head{border:0;padding:0;margin:0}
body.focus-mode .speech-layout{grid-template-columns:1fr}
body.focus-mode .speech-body{font-size:18px;line-height:1.9}
/* exit affordance in focus mode: a clear, tappable floating pill so touch
   devices (no keyboard / no Esc) can always leave focus mode */
body.focus-mode #focus-toggle{display:inline-block;position:fixed;top:12px;right:14px;
  z-index:60;min-height:44px;padding:10px 18px;border-radius:22px;
  background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.35)}
@media (max-width:900px){
  body.focus-mode main{padding:20px 14px 32px}
  /* keep the entry button obvious + thumb-sized on phones */
  .btn-focus{min-height:44px}
}