/* Kapnagora Web — design system
   Skeleton: Perplexity Finance (stats -> curve -> facts -> sources)
   Attribute cards: OpenSea structure, not dark-only, no speculation badges
   Sources: Copilot bibliography (bundled at section end)
   Both dark and light mode required. English only (lang=en). */

:root{
  --bg:#f7f5f0;
  --bg-elevated:#ffffff;
  --panel:#ffffff;
  --line:#e2ddd0;
  --ink:#181a16;
  --ink-dim:#5b5c53;
  --muted:#8c8d80;
  --acc:#2e7d54;
  --acc-ink:#ffffff;
  --acc-soft:rgba(46,125,84,.10);
  --warn:#a05a2e;
  --card:#ffffff;
  --shadow: 0 1px 2px rgba(20,20,15,.04), 0 8px 24px -12px rgba(20,20,15,.10);
  --serif:"Playfair Display","Iowan Old Style","Georgia",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --num:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:14px;
  --radius-sm:8px;
  --maxw:1180px;
}

:root[data-theme="dark"]{
  --bg:#0d0f0c;
  --bg-elevated:#14170f;
  --panel:#151810;
  --line:#262a1f;
  --ink:#ece7d8;
  --ink-dim:#a8a998;
  --muted:#71725f;
  --acc:#57b57e;
  --acc-ink:#06110a;
  --acc-soft:rgba(87,181,126,.14);
  --warn:#d99a5c;
  --card:#171a12;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d0f0c;
    --bg-elevated:#14170f;
    --panel:#151810;
    --line:#262a1f;
    --ink:#ece7d8;
    --ink-dim:#a8a998;
    --muted:#71725f;
    --acc:#57b57e;
    --acc-ink:#06110a;
    --acc-soft:rgba(87,181,126,.14);
    --warn:#d99a5c;
    --card:#171a12;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
/* Pruef-Fund 05.09.2026, Zusatzfund zum Mobil-Menue: die geschlossene Nav steht per
   `transform:translateX(100%)` NEBEN dem Viewport (position:fixed, 0..390px, nach der
   Verschiebung 390..780px). Ein `transform` zaehlt bei der scrollbaren Overflow-Flaeche
   des Dokuments trotzdem mit -- selbst gemessen (Playwright, 390px Breite): scrollWidth
   780 gegen clientWidth 390 auf allen 5 Seiten, exakt die verschobene Box, unveraendert
   nach dem separaten Hoehen-Fix bei `nav.primary` unten (also eine EIGENE Ursache, nicht
   dieselbe). `overflow-x:hidden` ist der Standard-Schutz fuer genau dieses
   Off-Canvas-Muster. */
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums;font-family:var(--num)}
button{font:inherit;cursor:pointer}
::selection{background:var(--acc-soft)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--acc);color:var(--acc-ink);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:15px}
/* Wortmarke "KapnAgora", binnen-A gold — Owner-Entscheidung 06.09.2026 (Protokoll
   Wortmarke-KapnAgora, Variante V2). Fixe Hex-Farbe statt --acc: --acc ist hier gruen
   (Markenfarbe der Aktions-Elemente), das goldene Akzent-A ist eine eigene, vom Owner
   abgenommene Konstante und soll nicht mitwandern, falls --acc je geaendert wird.
   Nachgetragen 06.09.2026, 18:4x (Orchestrator-Fund): fehlte in diesem Worktree komplett — der
   Branch zweigte vor dieser (im Hauptbaum nur uncommitteten) Entscheidung ab. */
.brand .gold-a{color:#C9A227}
nav.primary{display:flex;gap:4px;flex:1}
nav.primary a{
  padding:9px 14px;border-radius:999px;font-size:14.5px;color:var(--ink-dim);
  transition:background .15s, color .15s;
}
nav.primary a:hover{background:var(--acc-soft);color:var(--ink)}
nav.primary a[aria-current="page"]{background:var(--acc);color:var(--acc-ink);font-weight:600}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.theme-toggle{
  width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:transform .15s;
}
.theme-toggle:active{transform:scale(.92)}
.nav-toggle{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);align-items:center;justify-content:center;font-size:18px}

@media (max-width:860px){
  /* Pruef-Fund 05.09.2026: aufgeklapptes Menue war 36px hoch statt bildschirmfuellend.
     `flex:1` ohne Media-Guard (Zeile 92) war NICHT die eigentliche Ursache -- geprueft
     per getComputedStyle: `.site-header` traegt `backdrop-filter` (Zeile 84), und ein
     Element mit `filter`/`backdrop-filter` wird zum Containing Block fuer eigene
     `position:fixed`-Nachfahren (CSS-Spec, nicht der Viewport). `.site-header` selbst
     ist nur ~64px hoch (Inhalt der `.bar`) -- `inset:64px 0 0 0` loeste `bottom:0`
     also gegen DIESE 64px-Box auf, nicht gegen die Bildschirmhoehe: exakt das
     gemessene Bild (top:64, bottom:100, height:36). `flex:none`+`width:100%` bleiben
     als Absicherung gegen die alte Desktop-Regel, die eigentliche Reparatur ist
     `height:calc(100vh - 64px)` statt `bottom:0` -- `vh` bezieht sich immer auf den
     echten Viewport, unabhaengig vom Containing Block. */
  nav.primary{
    position:fixed;top:64px;left:0;right:0;height:calc(100vh - 64px);
    background:var(--bg);flex:none;flex-direction:column;
    width:100%;padding:18px;
    transform:translateX(100%);transition:transform .2s ease;overflow-y:auto;
  }
  nav.primary.open{transform:translateX(0)}
  nav.primary a{width:100%;padding:14px 16px;font-size:17px;border-radius:12px}
  .nav-toggle{display:flex}
}

/* ---------- Hero / Search ---------- */
.hero{padding:56px 0 40px;text-align:center}
.hero h1{font-family:var(--serif);font-size:clamp(30px,5vw,52px);line-height:1.08;margin:0 0 14px;letter-spacing:-.01em}
.hero p.lede{color:var(--ink-dim);font-size:17px;max-width:640px;margin:0 auto 30px}
.search-box{max-width:680px;margin:0 auto;position:relative}
.search-box input{
  width:100%;padding:18px 54px 18px 22px;font-size:17px;border-radius:16px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  box-shadow:var(--shadow);
}
.search-box input:focus{outline:2px solid var(--acc);outline-offset:1px}
.search-box .go{
  position:absolute;right:8px;top:8px;bottom:8px;width:44px;border-radius:11px;border:0;
  background:var(--acc);color:var(--acc-ink);font-size:16px;display:flex;align-items:center;justify-content:center;
}
.search-results{
  max-width:680px;margin:10px auto 0;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:none;
}
.search-results.show{display:block}
.search-results .sr-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.search-results .sr-item:last-child{border-bottom:0}
.search-results .sr-item:hover{background:var(--acc-soft);cursor:pointer}
.sr-thumb{width:40px;height:40px;border-radius:8px;background:var(--bg-elevated);border:1px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;overflow:hidden}
.sr-thumb img{width:100%;height:100%;object-fit:contain;padding:2px;box-sizing:border-box}
.sr-main{flex:1;min-width:0}
.sr-title{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-sub{font-size:12.5px;color:var(--muted)}
.sr-empty{padding:18px 16px;color:var(--muted);font-size:14px}
/* Fuss der Trefferliste: "Showing 12 of 554" + Nachladen (Befund B2, 08.09.2026).
   Bis dahin zeigte die Seite acht Treffer und konnte nicht sagen, wie viele es sind. */
.search-results .sr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
.search-results .sr-more{border:1px solid var(--line);background:transparent;color:inherit;
  font:inherit;padding:4px 10px;border-radius:6px;cursor:pointer}
.search-results .sr-more:hover{background:var(--acc-soft)}

/* ---------- Stat row (Perplexity Finance skeleton) ---------- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:28px 0}
.stat{background:var(--panel);padding:16px 18px}
.stat .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.stat .v{font-size:22px;font-weight:700}
.stat .v small{font-size:13px;font-weight:500;color:var(--ink-dim)}
@media (max-width:640px){.statrow{grid-template-columns:repeat(2,1fr)}.statrow>.stat:last-child:nth-child(odd){grid-column:1/-1}}

/* ---------- Sections / cards ---------- */
section{padding:36px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-head h2{font-family:var(--serif);font-size:26px;margin:0}
.section-head .see-all{font-size:13.5px;color:var(--acc);font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* pulse / cigar tile */
.tile{display:block;padding:14px;border-radius:var(--radius-sm)}
.tile-media{aspect-ratio:4/3;border-radius:10px;background:var(--bg-elevated);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;overflow:hidden;margin-bottom:10px}

/* ---------- Bilder werden GANZ gezeigt, nie beschnitten (Befund B9, 08.09.2026) ----------
   Quellenpruefung hat gemessen: von 353 Bildern aus Buchscans sind 161 saubere Freischnitte, die
   Owners Formatkanon exakt erfuellen -- mittig, Kopf oben, Band auf gleicher Hoehe. Sie waren
   nicht schlecht, sie wurden schlecht ANGEZEIGT: eine 4:3-Kachel mit `object-fit: cover`
   schneidet an einem hochkant stehenden Foto Kopf und Fuss der Zigarre weg. Nur im Web --
   die App zeigt dieselben Dateien seit jeher vollstaendig.

   ⛔ Wie teuer das fast geworden waere: der Lauf, der die Bilder bewerten sollte, stand kurz
   davor, 161 ECHTE Fotos gegen erzeugte auszutauschen, um einen Fehler zu umgehen, der in
   dieser einen CSS-Zeile sass.

   Die Regel folgt der App, nicht dem Geschmack (`grep -rn 'scaledToFit|aspectRatio' im
   iOS-Baum, gemessen 08.09.2026): JEDES Produktfoto, jede Marke, jeder Suchtreffer wird dort
   mit `.fit` und etwas Innenabstand gezeigt. `.fill` steht an genau zwei Stellen, und beide
   sind dekorative Regal-/Rubrik-Koepfe, keine Belegbilder.

   ⭐ Es ist deshalb bewusst die KLASSE geaendert und nicht die eine gemeldete Kachel
   (Hausregel: nennt der Owner einen Fall, ist die Klasse gemeint). Betroffen waren drei Stellen,
   alle mit demselben Fehler: .tile-media img · .sr-thumb img · .entity-mark img.
   `.cigar-photo img` stand schon auf `contain` und bleibt unveraendert. */
.tile-media img{width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box}
.tile-brand{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tile-name{font-weight:600;font-size:15px;margin:2px 0 8px;line-height:1.3}
.tile-foot{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.delta{font-weight:600}
.delta.up{color:var(--acc)}
.delta.down{color:#c05a4a}

/* ---------- Entity image chip (brand logo / factory photo) — Implementierung, 2026-09-05 ----------
   Same visual recipe as .brand .mark in the header (size/radius/colors), reused so a brand
   logo or factory photo sits next to its name wherever it is already fetched. Not a new
   design language — chirurgical reuse, flagged for the design role if a different treatment is wanted. */
.entity-mark{width:40px;height:40px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;
  font-size:16px;color:var(--muted);overflow:hidden;flex:none}
.entity-mark img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}

/* ---------- Cigar hero photo (Design, 2026-09-06) ----------
   The one thing the old Cigarbutler tree had that this page didn't: a real product photo
   instead of a lettered chip. `.entity-mark` above stays what it is — a small brand/factory
   chip — this is a new, larger slot for the cigar's OWN photo, in this page's own card
   language (light panel, --radius, --shadow), not a copy of the dark vignette look A used.
   Renders only a real photo (bild_stufe 'produktfoto'/'anderer_jahrgang') or an honest empty
   state — never a stock/foreign placeholder (same rule as .entity-mark). */
/* Widened + made portrait 06.09.2026 (orchestrator's second pass): the cigar is the page's main
   subject, so its photo must outsize the stat row beneath it, not sit smaller than one of
   its tiles. `object-fit:contain` (not cover) because the two real source families differ in
   crop — dealer product shots (media/vitola_images/, mostly square with headroom) and framed
   book scans (bilder.gerahmtes_bild) — contain shows either whole, never an arbitrary crop. */
.cigar-hero-grid{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:28px;align-items:start}
@media (max-width:640px){.cigar-hero-grid{grid-template-columns:1fr}}
.cigar-photo{position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;
  background:var(--panel);display:flex;align-items:center;justify-content:center}
.cigar-photo img{width:100%;height:100%;object-fit:contain;display:block;padding:14px;box-sizing:border-box}
.cigar-photo-empty{flex-direction:column;gap:6px;color:var(--muted)}
.cigar-photo-empty .initial{font-family:var(--serif);font-size:44px;font-weight:700;color:var(--line)}
.cigar-photo-note{font-size:11px;color:var(--ink-dim);text-align:center;padding:0 10px}
.cigar-photo .cigar-photo-note{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(6px)}

/* ---------- Attribute cards (OpenSea structure, light+dark, no speculation badges) ---------- */
.attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.attr-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.attr-card .ak{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
.attr-card .av{font-weight:600;font-size:14.5px}
.attr-card .as{font-size:12px;color:var(--ink-dim);margin-top:2px}

/* ---------- Fact list ---------- */
.fact{padding:16px 0;border-top:1px solid var(--line)}
.fact:first-child{border-top:0}
.fact p{margin:0 0 6px;font-size:15px}
.fact .fact-meta{font-size:12.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Bedeutungsschnitt, 25.09.2026 (Design) ----------
   Owner-Befund (Orchestrator 25.09.): cigar.html zeigte 8 gleichrangige Sektionen ueber 4,8
   Bildschirmlaengen. Drei Gruppen ersetzen sie (Value / The cigar / Knowledge); diese
   Klassen tragen die Gruppen-Kopfzeile (grosse Auktions-Kennzahl, Owner-Regel 24.09.)
   und die Unter-Ueberschriften INNERHALB einer Gruppe. */
.value-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:4px 0 18px}
.value-figure{font-family:var(--serif);font-weight:700;font-size:clamp(34px,6vw,50px);
  line-height:1;color:var(--acc);letter-spacing:-.01em}
.value-meta{font-size:13px;color:var(--ink-dim)}
.value-meta b{color:var(--ink);font-weight:600}
.value-empty-row{display:flex;flex-direction:column;gap:2px}
.value-empty{font-size:17px;color:var(--muted);font-style:italic}
.value-empty::before{content:"— ";color:var(--warn);font-style:normal}
.value-empty-note{font-size:12.5px;color:var(--muted)}
.group-sub{font-family:var(--serif);font-size:15.5px;margin:24px 0 10px;color:var(--ink-dim);font-weight:600}
.group-sub:first-child{margin-top:0}
.group-details summary{list-style:none;cursor:pointer}
.group-details summary::-webkit-details-marker{display:none}

/* ---------- Bundled bibliography (Copilot-style, end of section) ---------- */
.sources{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.sources .st{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:10px}
.sources ol{margin:0;padding-left:20px;display:grid;gap:8px}
.sources li{font-size:13px;color:var(--ink-dim)}
.sources li b{color:var(--ink);font-weight:600}
.sources a.ext{color:var(--acc);word-break:break-all}
.sources .checked{color:var(--muted);font-size:12px}

/* ---------- Placeholder / empty states ---------- */
.placeholder{
  border:1px dashed var(--line);border-radius:var(--radius-sm);padding:14px 16px;
  color:var(--muted);font-size:13px;background:var(--bg-elevated);
}
.placeholder.missing::before{content:"— not recorded — ";font-weight:600;color:var(--warn)}
.placeholder-inline{color:var(--muted);font-style:italic;font-weight:500}
.placeholder-inline::before{content:"not recorded — ";color:var(--warn);font-style:normal;font-weight:600}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:600;font-size:14px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.service-page .btn[hidden]{display:none}
#confirm-sign-in:not([hidden]) + .form-hint{margin-top:16px}
.btn:hover{filter:brightness(1.04)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:13px;color:var(--ink-dim)}
.chip.active{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
.chip[role="button"]{cursor:pointer}

/* ---------- Chart ---------- */
.chart-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.chart-wrap svg{width:100%;height:220px;display:block}
.chart-axis{fill:var(--muted);font-size:10px}
.chart-line{fill:none;stroke:var(--acc);stroke-width:2}
.chart-area{fill:var(--acc-soft);stroke:none}
.chart-empty{padding:60px 0;text-align:center;color:var(--muted);font-size:14px}

/* ---------- Table ---------- */
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
table.data td{padding:12px;border-bottom:1px solid var(--line)}
table.data tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);padding:36px 0 60px;margin-top:40px;color:var(--muted);font-size:13px}
footer.site .flinks{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
footer.site a{color:var(--ink-dim)}
footer.site a:hover{color:var(--acc)}
.legal-note{font-size:12px;color:var(--muted);max-width:760px}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:12.5px;color:var(--muted);margin:18px 0 4px;display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--acc)}

/* ---------- Utility ---------- */
.center{text-align:center}
.muted{color:var(--muted)}
.mono{font-family:var(--num)}
.skeleton{background:var(--line);border-radius:8px}
.hidden{display:none!important}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;font-size:13.5px;box-shadow:var(--shadow);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
[data-theme] .toast, .toast{background:var(--ink);color:var(--bg)}

/* ==========================================================================
   Buchtabellen — Design, 06.09.2026 (Auftrag Orchestrator, Owner-Entscheidung "a
   ist besser", Register 06.09. 00:15). Variante A (gruppierte Karten/
   Akkordeon) ist die primaere Form; die klassische Tabelle bleibt je Tabelle
   als zweite Ansicht erreichbar (eigener Gestaltungsprinzip-Satz von gestern).
   Nutzt bewusst NUR die bestehenden Tokens dieser Datei (--acc/--card/--line/
   --panel/--muted/--serif/--num) statt ein zweites Palettensystem
   (_bausteine_daidalos/tokens.css) in die live ausgelieferten Seiten zu
   mischen — die Bausteine von gestern waren fuer den Entwurf, nicht fuer
   Produktionsseiten verdrahtet; ein zweites :root-Tokenset haette Nav/Footer/
   restliche Sektionen der Seite verfaerbt. Gleiches Prinzip (Karten, Quellen-
   Badge, Ledger-Tabelle mit eigenem Scroll), an das tatsaechlich live
   verwendete System angepasst. */

.bt-bookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.bt-bookcard{padding:18px;display:block}
.bt-bookcard .bt-count{font-family:var(--num);font-size:20px;font-weight:700;color:var(--acc)}
.bt-bookcard .bt-title{font-family:var(--serif);font-size:15.5px;margin:6px 0 4px;line-height:1.3}
.bt-bookcard .bt-meta{font-size:12px;color:var(--muted)}

.bt-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.bt-toolbar input[type="search"]{flex:1;min-width:180px;padding:10px 14px;font-size:14px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.bt-toolbar .chip{cursor:pointer}

.bt-group{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.bt-group summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;font-size:14.5px}
.bt-group summary::-webkit-details-marker{display:none}
.bt-group summary .bt-n{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:auto;margin-right:10px;white-space:nowrap}
.bt-group summary .bt-chev{color:var(--muted);font-size:11px;transition:transform .16s ease}
.bt-group[open] summary .bt-chev{transform:rotate(180deg)}
.bt-group[open] summary{border-bottom:1px solid var(--line)}
.bt-group .bt-body{padding:4px 0}

/* Karten-Zeile (Variante A) — eine Zeile pro Format/Eintrag innerhalb einer Gruppe */
.bt-row{padding:10px 16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:flex-start}
.bt-row:first-child{border-top:0}
.bt-row .bt-name{font-size:13.5px;font-weight:500;flex:1 1 auto;min-width:90px}
.bt-row .bt-name small{color:var(--muted);font-weight:400}
/* Bugfund 06.09. (Playwright-Screenshot): white-space:nowrap liess lange
   Spec-Werte (viele Zusatzspalten) rechts aus dem Kartenrand laufen, ohne
   Scroll-Hinweis — abgeschnittener Text ohne Anzeichen, dass mehr da ist.
   Umlauf statt Abschneiden: Werte duerfen zeilenumbrechen. */
.bt-row .bt-spec{font-family:var(--num);font-size:12.5px;color:var(--ink-dim);text-align:right;white-space:normal;word-break:break-word;flex:1 1 140px;max-width:100%}

/* Umschalter Variante A <-> B, je Tabelle */
.bt-viewtoggle{display:flex;gap:0;margin:0 16px 10px;border:1px solid var(--line);border-radius:999px;overflow:hidden;width:fit-content}
.bt-viewtoggle button{border:0;background:var(--panel);color:var(--ink-dim);font-size:11.5px;font-weight:600;padding:5px 12px;cursor:pointer}
.bt-viewtoggle button.active{background:var(--acc);color:var(--acc-ink)}

/* Glossar / Definitionsliste (Form B) */
.bt-glossary{padding:8px 16px 14px}
.bt-glossary .bt-gitem{display:grid;grid-template-columns:60px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.bt-glossary .bt-gitem:first-child{border-top:0}
.bt-glossary .bt-code{font-family:var(--num);font-weight:700;font-size:12px;color:var(--acc);background:var(--acc-soft);border-radius:6px;padding:3px 6px;text-align:center;height:fit-content}
.bt-glossary .bt-def{font-size:12.8px;color:var(--ink-dim);line-height:1.45}

/* Einfache kurze Liste (Form "liste": <=20 Zeilen, 1 Spalte, aber echte Daten) */
.bt-list{padding:6px 16px 14px;font-size:13px;color:var(--ink-dim);line-height:1.7}

/* Flag-Box (Form D: >20 Zeilen, 1 Spalte, vermutlich zerfallene OCR — NICHT gestaltet) */
.bt-flag{background:var(--acc-soft);border:1px dashed var(--warn);border-radius:var(--radius-sm);padding:14px 16px;font-size:12.8px;color:var(--ink-dim);margin:0 16px 14px}
.bt-flag b{color:var(--warn)}
.bt-flag pre{white-space:pre-wrap;font-family:var(--num);font-size:11px;background:var(--bg-elevated);border-radius:8px;padding:8px 10px;margin:8px 0}

/* Bibliographie-Zeile je Tabelle (Buch, Seite, ISBN — Auflage: keine Tabelle ohne Quelle) */
.bt-biblio{padding:10px 16px 14px;font-size:11px;color:var(--muted);border-top:1px dashed var(--line);line-height:1.5}
.bt-biblio b{color:var(--ink-dim)}

.bt-loadmore{display:block;width:100%;padding:12px;text-align:center;font-size:13px;font-weight:600;color:var(--acc);background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius-sm);cursor:pointer;margin-top:6px}

/* Scroll-Hinweis fuer die klassische Tabelle (Variante B) — ohne dieses Icon
   sieht ein am rechten Rand abgeschnittener Wert wie ein Bug aus, nicht wie
   "hier geht's mit Wischen weiter" (gleiches Muster wie im Entwurf vom 05.09.). */
.bt-scrollhint{font-size:10.5px;color:var(--muted);padding:6px 2px 0;display:flex;align-items:center;gap:5px}

/* Titelzeile je Tabelle — 06.09.2026: Titel gross/fett, Seite+Buch klein darunter
   (Ersatz fuer die reine "Seite N"-Kopfzeile, wo ein Titel belegt ist). Ohne
   Titel bleibt die alte Form (nur Seite) — keine Erfindung eines Platzhalters,
   der wie ein Titel aussieht. */
.bt-group summary{flex-wrap:wrap}
.bt-headline{display:flex;flex-direction:column;gap:1px;min-width:0}
.bt-headline .bt-t{font-family:var(--serif);font-size:15.5px;font-weight:700;line-height:1.25;white-space:normal}
.bt-headline .bt-p{font-size:11px;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.bt-headline .bt-p .bt-nolabel{font-style:italic;color:var(--muted)}

/* Zugehoerigkeit — Erweiterung 06.09.2026, Auftrag Owner/Orchestrator ("zu was gehoeren
   wir?"). Kleine Chips unter der Titelzeile: wohin eine Tabelle inhaltlich
   fuehrt (Marke/Fabrik/Region), klickbar wo eine Zielseite existiert. Ohne Fund
   ein ehrlicher, gedaempfter Hinweis statt stiller Leere. */
.bt-links{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;margin-top:-4px}
.bt-linkchip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:4px 10px 4px 8px;border-radius:999px;background:var(--acc-soft);color:var(--acc);text-decoration:none;border:1px solid transparent}
.bt-linkchip:hover{border-color:var(--acc)}
.bt-linkchip .bt-kind{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight:700}
.bt-linkchip.plain{background:var(--bg-elevated);color:var(--ink-dim);cursor:default}
.bt-nolinks{padding:0 16px 12px;margin-top:-4px;font-size:11.5px;font-style:italic;color:var(--muted)}

/* Rueckweg: von einer Marke/Zigarre zu den Buchtabellen, die sie erwaehnen
   (brand.html / cigar.html). Gleiches Chip-Vokabular wie im Akkordeon oben, damit
   beide Richtungen erkennbar zusammengehoeren. */
.bt-mentions{margin-top:8px}
.bt-mentions .bt-mention-item{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.bt-mentions .bt-mention-item:first-child{border-top:0}
.bt-mentions a.bt-mention-t{font-size:13.5px;font-weight:600;color:var(--ink)}
.bt-mentions a.bt-mention-t:hover{color:var(--acc)}
.bt-mentions .bt-mention-meta{font-size:11.5px;color:var(--muted)}

   RECHTSSEITEN — impressum.html / datenschutz.html
   Design, 06.09.2026 (Auftrag Orchestrator; Rechtsquelle: Quellenpruefungs-Bericht
   2026-09-06 "Rechtliche Pflichtseiten", amtlicher Normwortlaut).
   Mobbin-Referenz: MasterClass "Privacy Policy" (web) — sticky Abschnitts-
   Index links, Dokumentspalte rechts, Datumszeile unter dem Titel; Pi
   (web) fuer die "Last updated"-Zeile und das grosszuegige Satzmass.
   Adaptiert wurde das MUSTER, nicht deren Marke/Farben/Typo.
   Nutzt ausschliesslich die bestehenden Tokens dieser Datei — kein zweites
   :root-Set, damit Nav/Footer/Rest der Seite unveraendert bleiben.
   ========================================================================== */

/* Entwurfs-Band: eine versehentlich live gegangene Seite muss sofort als
   unfertig erkennbar sein. Deshalb oben, breit, in --warn, nicht wegklickbar. */
.lg-draft{
  border:1px solid var(--warn);border-left:5px solid var(--warn);
  border-radius:var(--radius-sm);background:var(--acc-soft);
  padding:14px 16px;margin:16px 0 4px;font-size:13px;color:var(--ink-dim);line-height:1.55;
}
.lg-draft b{color:var(--warn);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;display:block;margin-bottom:4px}

/* Zweispalter: Index links (klebt beim Scrollen), Dokument rechts.
   min-width:0 auf beiden Kindern — ohne das kann ein langes Wort ein
   Grid-Kind ueber die Spaltenbreite hinaus aufblasen und die Seite
   seitwaerts scrollbar machen. */
.lg-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:44px;align-items:start;margin:10px 0 30px}
.lg-layout > *{min-width:0}
@media (max-width:900px){.lg-layout{grid-template-columns:minmax(0,1fr);gap:14px}}

.lg-index{position:sticky;top:84px;font-size:13px;line-height:1.45}
.lg-index .lg-ihead{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:0 0 10px;padding-left:12px}
.lg-index a{display:block;padding:6px 12px;border-left:2px solid var(--line);color:var(--ink-dim);transition:color .15s,border-color .15s,background .15s}
.lg-index a:hover{color:var(--acc);border-left-color:var(--acc);background:var(--acc-soft)}
@media (max-width:900px){
  .lg-index{position:static;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);padding:10px 4px}
  .lg-index .lg-ihead{padding-left:12px}
}

.lg-doc{max-width:780px}
/* Ein einziges Satzmass fuer die ganze Dokumentspalte: Fliesstext, Zitate,
   offene Punkte und Karten enden auf derselben rechten Kante. Vorher war der
   Text auf 68ch begrenzt, die Karten liefen auf die volle Spaltenbreite (~1100px)
   -- im Desktop-Screenshot als ausgefranste rechte Kante sichtbar. Gemessen und
   korrigiert am 06.09.2026. */
.lg-doc h1{font-family:var(--serif);font-size:clamp(26px,4vw,38px);line-height:1.15;margin:0 0 8px}
.lg-doc h2{font-family:var(--serif);font-size:clamp(19px,2.4vw,23px);margin:38px 0 10px;scroll-margin-top:84px}
.lg-doc h2:first-of-type{margin-top:22px}
.lg-doc h3{font-size:14.5px;margin:20px 0 6px;font-weight:700;color:var(--ink)}
.lg-doc p{font-size:15px;line-height:1.65;margin:0 0 12px}
.lg-doc ul,.lg-doc ol{font-size:15px;line-height:1.65;padding-left:20px;margin:0 0 12px}
.lg-doc li{margin-bottom:6px}
.lg-doc .lg-lead{font-size:15.5px;color:var(--ink-dim)}

/* Datums-/Standzeile — gleiche Sprache wie ".checked" im Rest der Seite:
   auf dieser Website traegt jede Angabe ihr Pruefdatum, auch diese hier. */
.lg-stamp{font-size:12.5px;color:var(--muted);margin:0 0 4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lg-stamp .lg-dot{width:3px;height:3px;border-radius:50%;background:var(--muted);display:inline-block}

/* Rechtsgrundlage: hier ausdruecklich AUSGESCHRIEBEN (§ 5 DDG, Art. 13 DSGVO).
   Ausnahme von der Hausregel "keine ausgeschriebene Quelle im Fliesstext" —
   auf einer Rechtsseite ist die Norm Teil der Pflichtangabe, kein Beleg-Anhang. */
.lg-basis{
  display:inline-flex;align-items:baseline;gap:6px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--acc);
  background:var(--acc-soft);border-radius:6px;padding:4px 9px;margin:0 0 10px;
}
.lg-quote{
  border-left:3px solid var(--line);padding:2px 0 2px 16px;margin:12px 0 14px;
  font-size:13.5px;color:var(--ink-dim);line-height:1.6;
}
.lg-quote cite{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:6px}

/* ⭐ PLATZHALTER — muss unuebersehbar sein. Kein erfundener Wert auf einer
   Oberflaeche (stehende Projektregel): was nur der Owner liefern kann, steht hier
   als Luecke, die man nicht fuer eine Angabe halten kann. */
.jorgo{
  display:inline-block;font-family:var(--num);font-size:12.5px;font-weight:700;
  color:var(--warn);background:var(--acc-soft);
  border:1px dashed var(--warn);border-radius:6px;
  padding:2px 8px;margin:1px 0;line-height:1.5;
  word-break:break-word;white-space:normal;
}
.jorgo::before{content:"[[ "}
.jorgo::after{content:" ]]"}
.jorgo.block{display:block;max-width:100%;padding:9px 12px;margin:6px 0}

/* Eine EINGETRAGENE Pflichtangabe — Gegenstueck zu .jorgo. Ruhig und gesetzt,
   damit auf einen Blick sichtbar ist, was steht und was noch fehlt.
   Eingesetzt 07.09.2026, nachdem der Owner die Grundsatzfrage entschieden hat:
   der Klarname kommt rein, wenn er rechtlich nicht vermeidbar ist. */
.lg-set{
  display:inline-block;font-weight:600;font-size:15px;color:var(--ink);
  border-bottom:2px solid var(--acc);padding:1px 0;line-height:1.6;
}
/* Eine bewusst NICHT veroeffentlichte Angabe. Kein Mangel, eine Entscheidung —
   deshalb weder Warnfarbe noch gestrichelter Rahmen. */
.lg-none{
  display:inline-block;font-size:13.5px;color:var(--muted);font-style:italic;
  line-height:1.6;
}

/* Offener Punkt: etwas, das noch NICHT gemessen wurde und deshalb auch nicht
   beschrieben wird. Optisch klar von einer Angabe unterschieden. */
.lg-open{
  border:1px dashed var(--line);border-left:3px solid var(--warn);
  border-radius:var(--radius-sm);background:var(--bg-elevated);
  padding:13px 15px;margin:12px 0 14px;font-size:13px;color:var(--ink-dim);line-height:1.6;
}
.lg-open .lg-otag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--warn);display:block;margin-bottom:4px}

/* Gemessen-Block: der Kern dieser beiden Seiten. Dieselbe Disziplin wie
   ueberall sonst auf Kapnagora ("jede Zahl mit ihrer Quelle"), hier auf die
   Datenschutzerklaerung selbst angewandt — was NICHT stattfindet, steht mit
   Messmethode und Pruefdatum da, statt als Behauptung. */
.lg-measure{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden;margin:14px 0 16px}
.lg-measure .lg-mhead{padding:13px 16px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.lg-mrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 16px;border-top:1px solid var(--line);font-size:13.5px}
.lg-mrow:first-of-type{border-top:0}
.lg-mrow .lg-mk{color:var(--ink-dim);min-width:0}
.lg-mrow .lg-mv{font-family:var(--num);font-size:12.5px;font-weight:700;color:var(--acc);white-space:nowrap;flex:none}
.lg-mrow .lg-mv.is-yes{color:var(--warn)}
.lg-mfoot{padding:11px 16px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--muted);line-height:1.55}
.lg-mfoot code{font-family:var(--num);font-size:11px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:4px;padding:1px 5px;word-break:break-all}

/* Angaben-Block (Impressum): Bezeichnung + Wert, Wert meist ein Platzhalter. */
.lg-fields{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden;margin:12px 0 16px}
.lg-field{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:14px 16px;border-top:1px solid var(--line);align-items:start}
.lg-field:first-child{border-top:0}
.lg-field .lg-fk{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding-top:4px}
.lg-field .lg-fv{font-size:14px;color:var(--ink);min-width:0}
.lg-field .lg-fn{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
@media (max-width:640px){
  .lg-field{grid-template-columns:minmax(0,1fr);gap:5px}
  .lg-field .lg-fk{padding-top:0}
}

/* Public support, contact and account-link pages. Shared form treatment keeps
   focus, validation and status messages consistent without a new dependency. */
.service-page{max-width:760px;padding-bottom:30px}
.service-page h1{font-family:var(--serif);font-size:clamp(28px,5vw,42px);line-height:1.12;margin:12px 0 10px}
.service-lead{max-width:62ch;color:var(--ink-dim);font-size:16px;line-height:1.65;margin:0 0 24px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 28px}
.service-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:18px}
.service-card h2{font-family:var(--serif);font-size:20px;margin:0 0 7px}
.service-card p{color:var(--ink-dim);font-size:13.5px;line-height:1.55;margin:0 0 14px}
.service-link{display:inline-flex;align-items:center;min-height:44px;color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.service-form{max-width:560px}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-field label{font-size:13px;font-weight:700;color:var(--ink)}
.form-field input,.form-field textarea,.form-field select{
  width:100%;min-height:44px;box-sizing:border-box;font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink)
}
.form-field textarea{min-height:150px;resize:vertical}
.form-field input:focus-visible,.form-field textarea:focus-visible,.form-field select:focus-visible,
.btn:focus-visible,.service-link:focus-visible,.lg-index a:focus-visible{
  outline:3px solid var(--acc);outline-offset:2px
}
.form-field [aria-invalid="true"]{border-color:var(--warn)}
.form-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:-7px 0 18px}
.form-status{min-height:24px;font-size:14px;line-height:1.5;margin-top:14px}
.form-status.success{color:var(--acc)}
.form-status.error{color:var(--warn)}
.btn[disabled]{cursor:not-allowed;opacity:.55}
.live-blocker{border:2px solid var(--warn);border-radius:var(--radius-sm);padding:14px 16px;background:var(--bg-elevated);color:var(--ink);margin:14px 0}
.live-blocker strong{display:block;color:var(--warn);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.live-inline{display:block;color:var(--warn);font-weight:700;line-height:1.5}
@media (max-width:720px){.service-grid{grid-template-columns:1fr}}

/* Coarse-pointer and compact layouts need a complete 44px interaction envelope.
   Desktop mouse layouts keep their existing density. */
@media (max-width:860px), (pointer:coarse){
  .site-header a,
  .site-header button,
  .service-page a,
  .service-page button,
  .service-page input,
  .service-page select,
  .service-page textarea,
  .crumbs a,
  .live-blocker a,
  .lg-index a,
  .lg-doc a,
  footer.site a{
    min-inline-size:44px;
    min-block-size:44px;
  }
  .theme-toggle,.nav-toggle{min-width:44px;width:44px;height:44px}
  .site-header a,.service-page a,.crumbs a,.live-blocker a,.lg-index a,.lg-doc a,footer.site a{
    display:inline-flex;
    align-items:center;
  }
}
/* ============================================================
   "The paper trail" — homepage book-tables showcase
   Built 06.09.2026, Owner via Orchestrator ("was Krasses bauen").
   Two visual treatments over the SAME curated data (paper-trail.js);
   scoped class names so both can be reviewed side by side without collision.
   ============================================================ */

/* ---------- Variant A: "The ledger" — the scanned artifact itself, in miniature ----------
   Ueberarbeitet 07.09.2026 nach eigenem Render-Tor-Befund. Drei belegte Maengel behoben:
   (1) BESCHNITT: `th` stand auf `white-space:nowrap` OHNE Breitengrenze, waehrend `td` sehr
       wohl abgesichert war -- eine vergessene Haelfte. Die Kopfzeile spannte die Tabelle
       ueber die Karte hinaus, `overflow:hidden` schnitt sie hart ab, mitten im Wort, ohne
       Auslassungspunkte: gemessen 99px Beschnitt sogar bei der geklemmten Endbreite 1132px,
       155px bei 962px. `table-layout:fixed` ist der Riegel -- die Spalten teilen sich die
       Kartenbreite, statt sie vom laengsten Wort aufspannen zu lassen. Kopfzeilen duerfen
       jetzt umbrechen, Werte enden mit Ellipse. Keine Zelle kann mehr hinauslaufen.
   (2) TOTES WEISS: das Raster streckt alle Karten auf die Hoehe der laengsten (Titel 195 vs.
       7 vs. 15 Zeichen) -> 144 bzw. 160px Leere unten. Die Karte ist jetzt eine Flex-Spalte,
       die Quelle sitzt per `margin-top:auto` am Boden -- aus der Leere wird eine gemeinsame
       Grundlinie ueber alle drei Karten. Muster: Mobbin-Referenzen Overmind + Intercom
       (Meta-Zeile unten gepinnt, Karten gleich hoch, Inhalt oben buendig).
   (3) TITEL-UEBERMACHT: 195 Zeichen frassen sechs Zeilen. Auf 3 Zeilen geklammert mit
       Auslassungspunkten (Muster: Mobbin/Speakeasy). Der volle Titel bleibt als
       `title`-Attribut am Element und steht ohnehin auf der verlinkten Zielseite -- nichts
       geht verloren, es wird nur nicht mehr breitgetreten. ---------- */
.exhibit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.exhibit-card{
  display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.exhibit-card::before{
  /* a thin gold rule top edge, like a museum label — not a texture, not a scan filter */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold,#C9A227);
}
.exhibit-page{font-family:var(--num);font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.exhibit-title{
  font-family:var(--serif);font-style:italic;font-size:19px;margin:0 0 12px;color:var(--ink);line-height:1.25;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
/* `table-layout:fixed` ist der harte Riegel: die Spalten koennen die Karte nicht mehr
   aufspannen, Ueberlauf ist damit strukturell unmoeglich statt nur unwahrscheinlich.
   Zwei Zwischenstaende auf dem Weg hierher, beide gemessen und beide verworfen:
   - `fixed` mit GLEICHEN Spalten: Beschnitt weg, aber die Zahlenspalten (18100, 1638)
     bekamen so viel Platz wie "Pennsylvania" — gekuerzt wurde ausgerechnet der Text.
   - automatisches Layout mit umbrechenden Kopfzeilen: verteilt schoen nach Bedarf, aber
     bei 277px Kartenbreite liefen 34px ueber die KARTE hinaus (die Tabelle selbst meldete
     dabei 0 Ueberlauf — das Mass war falsch gewaehlt, nicht das Ergebnis gut).
   Jetzt: `fixed` PLUS ein `<colgroup>`, dessen Breiten paper-trail.js aus dem tatsaechlichen
   Inhalt berechnet (laengster Wert bzw. laengstes Kopfwort je Spalte). Garantiert kein
   Ueberlauf, und der Platz geht dorthin, wo Text steht. */
table.exhibit-table{width:100%;table-layout:fixed;border-collapse:collapse;font-family:var(--num);font-size:11px;margin-bottom:14px}
/* `overflow-wrap:anywhere` war hier falsch: es hat auf schmalen Karten die Kopfwoerter mitten
   durchgehackt ("ACREAG/E ACRES", "RINGMAS/S"). Das ist schlechter als jede Ellipse. Umbruch
   nur an Wortgrenzen, dafuer etwas kleinere Versalien und weniger Sperrung, damit die Woerter
   auch in schmalen Spalten ganz bleiben. */
table.exhibit-table th{text-align:left;font-weight:600;color:var(--muted);padding:4px 8px 4px 0;border-bottom:1px solid var(--line);font-size:9.5px;text-transform:uppercase;letter-spacing:.02em;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;vertical-align:bottom}
table.exhibit-table td{padding:5px 8px 5px 0;border-bottom:1px dotted var(--line);color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
table.exhibit-table tr:last-child td{border-bottom:0}
.exhibit-list{font-family:var(--num);font-size:12px;color:var(--ink-dim);margin:0 0 14px;padding-left:18px}
.exhibit-cite{
  margin-top:auto;font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);
  padding-top:10px;line-height:1.4;display:flex;align-items:flex-end;gap:10px;
}
.exhibit-cite .exhibit-src{flex:1 1 auto;min-width:0}
.exhibit-cite .exhibit-go{flex:0 0 auto;color:var(--acc);font-size:13px;opacity:0;transform:translateX(-4px);transition:opacity .15s ease, transform .15s ease}
.exhibit-card:hover{border-color:var(--acc);box-shadow:0 2px 4px rgba(20,20,15,.05), 0 14px 34px -14px rgba(20,20,15,.18);transform:translateY(-2px)}
.exhibit-card:hover .exhibit-title{color:var(--acc)}
.exhibit-card:hover .exhibit-cite .exhibit-go{opacity:1;transform:translateX(0)}
.exhibit-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .exhibit-card,.exhibit-cite .exhibit-go{transition:none}
  .exhibit-card:hover{transform:none}
}

/* ---------- Variant B: "The big number" — lead with scale, cite as proof ----------
   Ueberarbeitet 07.09.2026, GLEICHE Behandlung wie Variante A. Grund: B hatte exakt denselben
   Mangel, der in A gerade behoben wurde -- der 195 Zeichen lange Titel des ersten Exponats
   fuellte fuenf Zeilen, waehrend die beiden anderen Kacheln halb leer blieben, und die
   Belege standen auf drei verschiedenen Hoehen. Eine Vergleichsseite, auf der nur EINE
   Variante repariert ist, ist kein Vergleich, sondern eine Vorentscheidung: sie laesst B
   schlechter aussehen als sie ist. Also hier dieselben zwei Griffe -- Titel auf drei Zeilen
   geklammert, Beleg per `margin-top:auto` auf eine gemeinsame Grundlinie. */
.bignum-row{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.bignum-figure{font-family:var(--serif);font-weight:700;font-size:clamp(56px,10vw,104px);line-height:1;color:var(--ink);letter-spacing:-.02em}
.bignum-label{font-size:16px;color:var(--ink-dim);max-width:360px;margin:0 0 6px}
.exhibit-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.exhibit-chip{display:flex;flex-direction:column;background:var(--panel);padding:18px;transition:background .15s ease}
.chip-year{font-family:var(--num);font-size:12px;color:var(--acc);font-weight:700;margin-bottom:6px}
.chip-title{
  font-family:var(--serif);font-size:16px;color:var(--ink);margin-bottom:8px;line-height:1.3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.chip-cite{margin-top:auto;font-size:11.5px;color:var(--muted);line-height:1.45}
.exhibit-chip:hover{background:var(--acc-soft)}
.exhibit-chip:hover .chip-title{color:var(--acc)}
.exhibit-chip:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media (prefers-reduced-motion: reduce){ .exhibit-chip{transition:none} }

@media (max-width:640px){
  .bignum-figure{font-size:clamp(44px,16vw,72px)}
}

/* ================================================================
   Herkunft an EINEM Ort — Design, 07.09.2026
   Owner, 07.09.2026: "irgendwo koennen wir ein info tabelle mit
   kleingeschriebenen buchstaben wovon wir uns naehren und dann auch
   beilaeufig, aber nicht unter jeden artikel oder tabelle".
   Register-Eintrag 22.07., bestaetigt 13.-14.08.: "Wir sind keine
   Sammelstelle fuer Quellenanzeige" — Beleg als Marker im Text,
   Zuordnung im Fussblock, kein Sammelsurium von Links.
   Mobbin-Referenz: ClickUp, "Sources for AI stats"-Fussblock
   (mobbin.com/sites/sections/01cd5de5-87cd-4f1a-931c-69ae899e9e08).
   Loescht nichts: die Belege stehen unveraendert in der Datenbank.
   ================================================================ */


/* --- Die Seite selbst: die "Info-Tabelle mit kleingeschriebenen Buchstaben". --- */
.prov-page{max-width:820px;padding-bottom:20px}
.prov-page h1{font-family:var(--serif);font-size:clamp(28px,4vw,40px);margin:14px 0 10px}
.prov-lead{font-size:15px;color:var(--ink-dim);max-width:62ch;margin:0 0 26px;line-height:1.65}
.prov-figures{display:flex;gap:34px;flex-wrap:wrap;margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.prov-fig{display:flex;flex-direction:column;gap:2px}
.prov-fig b{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--ink);line-height:1}
.prov-fig span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

/* Gemessen, nicht geschaetzt: die globale Regel `section{padding:36px 0}` (Zeile 185)
   trifft diese Gruppen mit, weil sie <section> sind -- 36+36+26 = 98px Luft zwischen
   zwei Bloecken. Hier zurueckgenommen, ohne die globale Regel anzufassen. */
.prov-group{margin:0 0 30px;padding:0}
.prov-group .prov-table{margin-top:2px}
.prov-group h2{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);
  margin:0 0 3px;display:flex;align-items:center;gap:8px;font-weight:600;
}
.prov-count{font-family:var(--num);font-size:10px;color:var(--muted);
  background:var(--acc-soft);border-radius:4px;padding:1px 5px;font-weight:400}
.prov-hint{font-size:11.5px;color:var(--muted);margin:0 0 10px}

.prov-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:auto}
.prov-table tr{border-top:1px solid var(--line)}
.prov-table tr:first-child{border-top:0}
.prov-table td{padding:8px 0;vertical-align:baseline}
.pt-title{color:var(--ink-dim);line-height:1.5;padding-right:24px}
.pt-sub{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
/* Zahl und Datum standen ohne Abstand aneinander ("10,3632026-09-05") -- beide
   Zellen waren auf width:1% und nowrap, die Tabelle hat sie zusammengeschoben. */
.pt-n{font-family:var(--num);font-size:11px;color:var(--ink-dim);text-align:right;
  white-space:nowrap;width:70px;min-width:70px;padding-right:22px}
.pt-checked{font-family:var(--num);font-size:10.5px;color:var(--muted);text-align:right;
  white-space:nowrap;width:86px;min-width:86px;opacity:.8}
.prov-note{font-size:11px;color:var(--muted);line-height:1.7;max-width:70ch;
  margin:26px 0 0;padding-top:14px;border-top:1px solid var(--line)}

/* --- Eine Angabe statt einer Zeilenreihe unter einer Preiskurve. --- */
.price-basis{font-size:11.5px;color:var(--muted);margin:12px 0 0;line-height:1.6}

@media (max-width:640px){
  .pt-checked{display:none}
  .prov-figures{gap:22px}
}
.prov-table th{font-weight:400;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);opacity:.7;padding:0 0 5px;border:0}
.prov-table th.pt-title{text-align:left}

/* ---- Kistengroessen auf der Zigarrenseite (Befunde B4/B5, 08.09.2026) ----
   Bis dahin stand hier eine einzige Zeile ohne Preise. Zwei Spalten je Groesse,
   Haendler und Auktion strikt getrennt -- gebundener Preis und freie Preisbildung
   sind nicht verrechenbar, deshalb nie nebeneinander in derselben Farbe. */
.bs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.bs-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card,transparent)}
.bs-menge{font-size:22px;font-weight:600;line-height:1.1;margin-bottom:8px}
.bs-menge span{font-size:11px;font-weight:400;color:var(--muted);margin-left:6px}
.bs-spalten{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bs-spalte{min-width:0}
.bs-kopf{font-size:9px;letter-spacing:.06em;margin-bottom:3px}
.bs-kopf b{font-weight:700}
.bs-kopf span{color:var(--muted);font-weight:400;letter-spacing:0}
.bs-auktion .bs-kopf b{color:var(--acc,#a07b2c)}
.bs-preis{font-size:14px}
.bs-stueck{font-size:10.5px;color:var(--muted);line-height:1.35}
.bs-n,.bs-leer{font-size:9.5px;color:var(--muted);opacity:.8}
.bs-hinweis{margin-top:12px;font-size:11.5px;color:var(--muted);line-height:1.5}
.bs-hinweis b{display:block;color:var(--ink,inherit);font-size:12px}
@media (max-width:520px){.bs-spalten{grid-template-columns:1fr}}

/* ========================================================================== */
/* Kapnagora public salon — shared visual contract with _entwurf_kapnagora_r1 */
/* ========================================================================== */

:root,
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0c0b;
  --bg-elevated:#121411;
  --panel:#191b17;
  --line:rgba(240,235,223,.14);
  --ink:#f0ebdf;
  --ink-dim:#aba79d;
  --muted:#858178;
  --acc:#caa365;
  --acc-ink:#0b0c0b;
  --acc-soft:rgba(202,163,101,.12);
  --warn:#d99a5c;
  --card:#191b17;
  --shadow:none;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --radius:4px;
  --radius-sm:3px;
  --maxw:1240px;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eee9de;
  --bg-elevated:#f6f2e9;
  --panel:#f6f2e9;
  --line:#cfc9bc;
  --ink:#171814;
  --ink-dim:#55554f;
  --muted:#6f6c64;
  --acc:#84632f;
  --acc-ink:#fffaf0;
  --acc-soft:rgba(132,99,47,.12);
  --warn:#8f4d2d;
  --card:#f6f2e9;
  --shadow:none;
}

body{
  background:
    radial-gradient(circle at 82% 10%,rgba(106,71,35,.14),transparent 26rem),
    var(--bg);
  font-size:16px;
}

.wrap{padding-inline:clamp(24px,5vw,72px)}

/* Shared header: the same restrained wordmark, line and spacing as the draft. */
.site-header{
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  border-color:var(--line);
  backdrop-filter:blur(16px);
}
.site-header .bar{height:78px;gap:34px}
.brand{
  gap:13px;font-size:17px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
}
.brand .mark{
  position:relative;width:34px;height:34px;border-radius:50%;border:1px solid rgba(202,163,101,.48);
  background:transparent;color:transparent;font-size:0;
}
.brand .mark::before,.brand .mark::after{
  position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);
  font-size:16px;font-weight:400;
}
.brand .mark::before{content:"A";color:#caa365;transform:translateX(-4px)}
.brand .mark::after{content:"O";color:var(--ink);transform:translateX(4px)}
.brand .gold-a{color:#caa365}
nav.primary{justify-content:center;gap:18px}
nav.primary a{
  min-height:44px;display:inline-flex;align-items:center;padding:0 5px;border-radius:0;
  color:var(--ink-dim);font-size:13px;border-bottom:1px solid transparent;
}
nav.primary a:hover{background:transparent;color:var(--ink)}
nav.primary a[aria-current="page"]{
  background:transparent;color:var(--ink);font-weight:500;border-bottom-color:var(--acc);
}
.theme-toggle,.nav-toggle{
  width:44px;height:44px;border-radius:2px;background:transparent;border-color:var(--line);
}
.theme-toggle:hover,.nav-toggle:hover{border-color:var(--acc);color:var(--acc)}

main{min-height:calc(100vh - 270px)}
.hero{padding:64px 0 38px;text-align:left}
.hero h1,.service-page h1,.lg-doc h1{
  font-family:var(--serif);font-weight:400;letter-spacing:-.035em;
}
.hero h1{font-size:clamp(44px,6vw,76px);line-height:.98;max-width:920px}
main .hero h1{font-size:clamp(42px,5vw,62px)!important}
.hero p.lede{margin:0 0 30px;max-width:760px;font-family:var(--serif);font-size:20px;line-height:1.55}
.section-head{margin-bottom:22px}
.section-head h2,.lg-doc h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.025em;
}
.section-head h2{font-size:clamp(28px,3vw,40px)}
.section-head .see-all,.service-link{color:var(--acc);text-underline-offset:5px}

.card,.attr-card,.table-scroll,.chart-wrap,.service-card,.bt-group{
  box-shadow:none;border-color:var(--line);background:color-mix(in srgb,var(--card) 96%,transparent);
}
.card,.table-scroll,.chart-wrap,.service-card{border-radius:var(--radius)}
.tile{padding:0;overflow:hidden}
.tile-media{
  margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:linear-gradient(180deg,#e8e1d3,#cfc5b3);aspect-ratio:1/1;
}
.tile-media img{padding:10px;mix-blend-mode:multiply}
.tile>.tile-brand,.tile>.tile-name,.tile>.tile-foot{margin-inline:18px}
.tile>.tile-brand{margin-top:18px;color:var(--acc)}
.tile>.tile-name{font-family:var(--serif);font-size:18px;font-weight:400;margin-top:7px}
.tile>.tile-foot{margin-bottom:18px;color:var(--ink-dim)}
.entity-mark{border-radius:50%;background:transparent;border-color:var(--line)}

/* ---------- Houses grid tile (brand.html) — Design, 2026-09-18 ----------
   .tile-media above is sized and lit for a real cigar PHOTO (beige backdrop,
   mix-blend-mode:multiply) — a house mark is a small logo scan, mostly transparent
   or gold-embossed, not a photo. Rendered through .entity-mark's 40px chip it read
   as a stray dot in an empty beige tile (Orchestrator, brand.html, 2026-09-18). This is its
   own background (dark salon panel + a soft gold glow, no multiply) and its own
   fallback: the house name set large in the page's serif, not a single letter. */
.tile-media.house-tile{
  background:
    radial-gradient(120% 90% at 50% 4%,var(--acc-soft) 0%,transparent 62%),
    var(--panel);
  display:flex;align-items:center;justify-content:center;
}
.tile-media.house-tile img{
  width:auto;height:auto;max-width:78%;max-height:78%;
  padding:0;mix-blend-mode:normal;filter:none;
}
.house-wordmark{
  font-family:var(--serif);font-weight:400;font-size:clamp(16px,2.4vw,23px);line-height:1.22;
  color:var(--ink);text-align:center;padding:0 18px;letter-spacing:.005em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cigar-photo{border-radius:var(--radius);background:linear-gradient(180deg,#e8e1d3,#cfc5b3)}
.cigar-photo img{mix-blend-mode:multiply}
.attr-card{border-radius:var(--radius);padding:16px}
.attr-card .ak,.tile-brand,.sources .st{color:var(--acc);letter-spacing:.12em}
.attr-card .av{font-family:var(--serif);font-size:17px;font-weight:400}
.statrow{border-radius:var(--radius);margin-block:38px;background:var(--line)}
.stat{padding:20px;background:var(--panel)}
.stat .k{color:var(--acc);letter-spacing:.1em}
.stat .v{font-family:var(--serif);font-weight:400;font-size:26px}

.btn{
  border-radius:2px;background:transparent;border-color:var(--line);min-height:46px;padding:12px 18px;
}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn:hover{filter:none;border-color:var(--acc);color:var(--acc)}
.btn.primary:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.chip{border-radius:999px;background:transparent}
.chip.active{background:var(--acc);color:var(--acc-ink)}

.table-scroll{border-radius:0}
table.data th{color:var(--acc);letter-spacing:.09em;background:rgba(255,255,255,.015)}
table.data td{padding-block:15px}
table.data tbody tr:hover{background:var(--acc-soft)}
.chart-wrap{border-radius:0;padding:26px}
.placeholder{background:var(--bg-elevated);border-radius:2px}
.skeleton{border-radius:2px;background:linear-gradient(90deg,var(--panel),color-mix(in srgb,var(--panel) 72%,var(--ink-dim)),var(--panel))}

.crumbs{
  margin:26px 0 12px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  align-items:center;
}
.crumbs a{color:var(--acc)}
.crumbs a:hover{color:var(--ink)}

.service-page{max-width:1000px;padding-top:8px;padding-bottom:68px}
.service-page>.hero{padding:0}
.service-page h1{font-size:clamp(42px,6vw,68px);line-height:1;margin:22px 0 18px}
.service-lead{font-family:var(--serif);font-size:19px;color:var(--ink-dim);max-width:680px}
.service-lead a,.lg-doc a{color:var(--acc);text-decoration:underline;text-underline-offset:4px}
.service-grid{gap:1px;background:var(--line);border:1px solid var(--line);margin-top:42px}
.service-card{border:0;border-radius:0;padding:28px;min-height:230px}
.service-card h2{font-size:24px;font-weight:400}
.service-card p{font-size:14px}
.service-form{max-width:680px;margin-top:34px;padding:clamp(22px,4vw,36px);border:1px solid var(--line);background:var(--panel)}
.form-field{gap:8px;margin-bottom:20px}
.form-field label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--acc)}
.form-field input,.form-field textarea,.form-field select{
  min-height:48px;border-radius:2px;background:var(--bg);border-color:var(--line);padding:13px 14px;
}
.form-field input:hover,.form-field textarea:hover,.form-field select:hover{border-color:var(--ink-dim)}
.form-field input:focus-visible,.form-field textarea:focus-visible,.form-field select:focus-visible,
.btn:focus-visible,.service-link:focus-visible,.lg-index a:focus-visible,
.site-header a:focus-visible,.site-header button:focus-visible,footer.site a:focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;
}
.form-status.success{color:#81bd91}.form-status.error{color:#e5a16b}

#feat-section>.card>div:last-child{display:flex;flex-direction:column;justify-content:center}

.lg-layout{grid-template-columns:240px minmax(0,760px);gap:clamp(32px,6vw,72px);margin:26px 0 72px}
.lg-index{top:104px}
.lg-index .lg-ihead{color:var(--acc);letter-spacing:.12em}
.lg-index a{padding:10px 14px;border-left-color:var(--line)}
.lg-index a:hover{color:var(--ink);border-left-color:var(--acc);background:transparent}
.lg-doc h1{font-size:clamp(42px,6vw,68px)}
.lg-doc h2{font-size:clamp(24px,3vw,32px);margin-top:52px}
.lg-doc h3{font-family:var(--serif);font-size:19px;font-weight:400}
.lg-doc p,.lg-doc ul,.lg-doc ol{font-size:15.5px;line-height:1.75}
.lg-stamp{color:var(--acc);text-transform:uppercase;letter-spacing:.07em;font-size:10px}
.lg-basis{border-radius:999px;color:var(--acc);background:var(--acc-soft)}
.lg-field,.lg-open,.lg-measure{border-radius:2px;background:var(--panel)}
.lg-quote{border-left-color:var(--acc)}

footer.site{
  margin-top:72px;padding:44px 0 56px;border-color:var(--line);background:#090a09;color:var(--muted);
}
footer.site .wrap::before{
  content:"KAPNAGORA";display:block;margin-bottom:24px;font-family:var(--serif);font-size:15px;
  letter-spacing:.18em;color:var(--ink);
}
footer.site .flinks{gap:8px 26px;margin-bottom:24px}
footer.site a{color:var(--ink-dim)}
footer.site a:hover{color:var(--ink)}
.legal-note{font-size:11px;line-height:1.7}

@media (max-width:860px){
  .wrap{padding-inline:24px}
  .site-header .bar{height:78px}
  nav.primary{
    top:78px;height:calc(100vh - 78px);padding:18px 24px;background:#0f100e;
    justify-content:flex-start;gap:0;
  }
  nav.primary a{min-width:100%;min-height:52px;padding:0;border-bottom:1px solid var(--line);border-radius:0}
  .header-actions{margin-left:auto}
  .hero{padding:50px 0 30px}
  .hero h1{font-size:clamp(42px,12vw,62px)}
  main .hero h1{font-size:clamp(40px,11vw,54px)!important}
  .service-page h1,.lg-doc h1{font-size:clamp(40px,12vw,56px)}
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:0}
  #feat-section>.card{grid-template-columns:1fr!important}
  #feat-section>.card .tile-media{height:300px!important}
  #feat-section>.card>div:last-child{padding:22px!important}
  .lg-layout{grid-template-columns:1fr;gap:28px}
  .lg-index{position:static;border-radius:2px;background:var(--panel)}
}

@media (max-width:520px){
  .wrap{padding-inline:24px}
  .brand{font-size:15px;gap:10px;letter-spacing:.14em}
  .brand .mark{width:32px;height:32px}
  .site-header .bar{gap:10px}
  .hero p.lede,.service-lead{font-size:18px}
  section{padding:42px 0}
  .statrow{grid-template-columns:1fr 1fr}
  .service-form{margin-inline:-1px;padding:22px}
  .cigar-hero-grid{gap:20px}
  .cigar-photo{max-height:520px}
  footer.site .flinks{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
  footer.site a,.crumbs a,.service-page a,.lg-index a,.lg-doc a{min-height:44px;display:inline-flex;align-items:center}
}

@media (max-width:860px), (pointer:coarse){
  main a:not(.card),main button,main input,main select,main textarea,main summary{
    min-inline-size:44px;min-block-size:44px;
  }
  main a:not(.card){display:inline-flex;align-items:center}
  main summary{align-items:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}
}