/* conceitos.css */
/* GR-04: Aufruf mit Anker (#perceptor …): der erste Sprung ohne weiches Scrollen (site.css: smooth) – sonst endet er an der
   alten Stelle, während js/conceitos.js die Grafiken darüber zeichnet. Nach dem Zeichnen setzt conceitos.js .cx-ready;
   danach scrollt das Inhaltsverzeichnis wieder weich. */
html:not(.cx-ready):has(.cx-sec:target){scroll-behavior:auto}
/* GR-04: Platz der Grafiken, die js/conceitos.js zeichnet, vorab reservieren (gemessen 360–1280 px, PT/DE/EN). Wächst der Inhalt
   über einem Anker im selben Bild, wertet Chrome alles darunter als verschoben (CLS bis 1,0) – auch wenn der Anker selbst
   stehen bleibt. Die Werte müssen nicht pixelgenau sein, nur nahe genug. */
.cx-fig{container-type:inline-size}
.cx-mx:empty{aspect-ratio:1/1}                                     /* renderMatrix: quadratische viewBox */
#fig-hk:empty{aspect-ratio:1/1;max-width:520px;margin-inline:auto} /* Brett Hunab Ku 21: viewBox 460 × 460 */
#fig-ano:empty{min-height:max(309px,calc(13 * (100cqw - 110px) / 28 + 126px))}  /* 13 Monde × 28 Tage + Tag außerhalb der Zeit + Legende */
#fig-tzolkin:empty{min-height:calc(min(100cqw, 460px) * 23 / 14 + 32px)}   /* Raster js/tzolkin.js (14 × 23, höchstens 460 px breit) + Legende (eine Zeile) */
.cx-chips:empty{min-height:99px}
#fig-calc:empty{min-height:494px}
.cx-plasmas:empty{min-height:137px}
.cx-hist:empty{min-height:35.5px;margin:6px 0 18px}                /* Platzhalter für „História …“ (details.ex-solo, js/conceitos.js) */
/* Abschnitte 10–12 (Siegel, Töne, Kin nachschlagen): stehen schon im HTML, Raster und Karten füllt js/conceitos.js nach dem
   Laden der Texte – Höhen gemessen PT/DE/EN (Karte des heutigen Siegels/Tons schwankt um ± 100 px) */
html.no-js #selos,html.no-js #tons{display:none}
#fig-selos:empty{min-height:525px}#selo-det:empty{min-height:700px}#fig-tons:empty{min-height:350px}#tom-det:empty{min-height:600px}#kin-res:empty{min-height:720px}
#fig-urh:empty{min-height:925px}#gloss:empty{min-height:700px}     /* 48 Runen, Glossar (Anker #runas / #glossario) */
@media (min-width:1100px){#fig-urh:empty{min-height:530px}}
@media (max-width:1100px) and (min-width:981px){.cx-chips:empty{min-height:134px}#fig-calc:empty{min-height:546px}.cx-plasmas:empty{min-height:155px}
  #fig-selos:empty{min-height:695px}#selo-det:empty{min-height:745px}#fig-tons:empty{min-height:510px}#tom-det:empty{min-height:645px}}
@media (max-width:980px){.cx-chips:empty{min-height:64px}#fig-calc:empty{min-height:770px}.cx-plasmas:empty{min-height:119px}
  #fig-selos:empty{min-height:850px}#selo-det:empty{min-height:900px}#fig-tons:empty{min-height:534px}#tom-det:empty{min-height:840px}#kin-res:empty{min-height:1110px}
  #gloss:empty{min-height:980px}}
@media (max-width:640px){
  #fig-selos:empty{min-height:1680px}#selo-det:empty{min-height:1480px}#fig-tons:empty{min-height:1165px}#tom-det:empty{min-height:1340px}#kin-res:empty{min-height:1530px}
  #co-teaser:empty{min-height:308px!important}
  #fig-urh:empty{min-height:1740px}#gloss:empty{min-height:calc(1467px + (640px - 100vw) * 1.4)}
  .cx-chips:empty{min-height:169px}
  #fig-calc:empty{min-height:1430px}
  .cx-plasmas:empty{min-height:281px}
  #fig-ano:empty{min-height:max(335px,calc(13 * (100cqw - 76px) / 28 + 119px))}
  #fig-tzolkin:empty{min-height:calc(min(100cqw, 460px) * 23 / 14 + 59px)}   /* Legende mit GAP zweizeilig */
}
.cx{padding-top:76px}
.cx-hero{padding:90px 0 50px;background:radial-gradient(900px 500px at 70% 10%,rgba(123,92,196,.35),transparent 65%)}
.cx-hero h1{font-size:clamp(36px,5.4vw,64px);margin:14px 0 18px}
.cx-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.cx-toc a{padding:9px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:13px;background:rgba(255,255,255,.03)}
.cx-toc a:hover{color:var(--gold);border-color:var(--gold)}
.cx-sec{padding:90px 0}
.cx-sec.alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.cx-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.cx-grid.rev > .cx-text{order:2}
.cx-text h2{font-size:clamp(26px,3.4vw,40px);margin:10px 0 18px}
.cx-text p{color:var(--muted);font-size:16.5px}
.cx-text p b{color:var(--text)}
.cx-text.wide{max-width:820px;margin-bottom:30px}
.cx-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(227,191,110,.5);color:var(--gold);font:700 18px var(--display)}
.cx-fig{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px}
.cx-fig figcaption{font-size:13px;color:var(--faint);margin-top:12px;line-height:1.5}
.cx-fig figcaption b{color:var(--text)}
.cx-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cx-chips .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 11px}
.cx-chips .chip i{width:10px;height:10px;border-radius:3px}
.cx-chips .chip small{color:var(--faint);font-weight:500}
.cx-chips .chip[aria-pressed=true]{color:#1a1405;background:var(--gold);border-color:var(--gold)}   /* GR-15 */
.cx-chips .chip[aria-pressed=true] small{color:rgba(26,20,5,.72)}
.cx-chips .chip[aria-pressed=true] i{box-shadow:0 0 0 1px rgba(26,20,5,.45)}
.cx-tip{position:fixed;z-index:80;pointer-events:none;background:rgba(13,17,48,.97);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.55;color:var(--muted)}
.cx-tip b{color:var(--gold)}

/* ano */
.cx-year{display:grid;gap:4px}
.cx-moon{display:grid;grid-template-columns:26px repeat(28,minmax(0,1fr));gap:3px;align-items:center}
.cx-moon small{font:600 11px var(--font);color:var(--faint);text-align:right;padding-right:6px}
.cx-moon i{aspect-ratio:1;border-radius:3px;display:block}
.cx-moon i.today{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 12px #fff}
.cx-doot{margin:8px 0 0 30px;padding:6px 10px;border:1px dashed rgba(227,191,110,.5);border-radius:8px;font-size:12px;color:var(--gold);width:max-content}
.cx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--muted)}
.cx-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.cx-legend i.k,.cx-tz i.k{outline:2px solid var(--gold)}
.cx-legend i.p,.cx-tz i.p{outline:2px solid #7fe3c4}
.cx-legend i.e,.cx-tz i.e{outline:2px solid #b9a3ff}
.cx-legend i.k{background:var(--gold)} .cx-legend i.p{background:#7fe3c4} .cx-legend i.e{background:#b9a3ff}

/* tzolkin */
.cx-tz{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));grid-template-rows:repeat(20,auto);gap:3px}
.cx-tz i{aspect-ratio:1.5;border-radius:3px;display:grid;place-items:center;font:700 10px var(--font);font-style:normal;color:#111}
.cx-tz i.k,.cx-tz i.p,.cx-tz i.e{outline-offset:1px;z-index:1}

/* cálculo */
.cx-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cx-step{padding:18px;border-radius:16px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--c);position:relative}
.cx-step > span{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:8px;background:var(--c);color:#111;font:700 12px var(--font)}
.cx-step > b{display:block;margin:12px 0 6px}
.cx-step p{margin:0;font-size:14px;color:var(--muted)}
.cx-cta{margin-top:30px;text-align:center}
.cx-note{color:var(--muted)}

/* glossário */
.cx-gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0}
.cx-gloss div{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:16px}
.cx-gloss dt{font-weight:700;color:var(--gold)}
.cx-gloss dd{margin:0;color:var(--muted);font-size:14.5px}

@media (max-width:980px){
  .cx-grid{grid-template-columns:1fr;gap:30px}
  .cx-grid.rev > .cx-text{order:0}
  .cx-three{grid-template-columns:1fr}
  .cx-steps{grid-template-columns:1fr 1fr}
  .cx-gloss{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cx-sec{padding:60px 0}
  .cx-steps{grid-template-columns:1fr}
  .cx-gloss div{grid-template-columns:1fr;gap:4px}
  .cx-moon{grid-template-columns:20px repeat(28,minmax(0,1fr));gap:2px}
  .cx-tz{gap:2px}
  .cx-tz i{font-size:9px;letter-spacing:-.02em}   /* ≥ 9 px (GR-19) */
}

/* Originalgrafiken neben den Live-Grafiken */
.cx-orig{display:flex;gap:16px;align-items:center;margin:26px 0 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.cx-orig img{width:120px;height:auto;border-radius:10px;background:#fff;flex:none}
.cx-orig figcaption,.cx-orig p{font-size:13px;color:var(--faint);line-height:1.5;margin:0}
.cx-orig a{color:var(--gold)}
.cx-orig.two{flex-wrap:wrap}
.cx-orig.two figure{margin:0;flex:1 1 120px}
.cx-orig.two img{width:100%;max-width:200px;background:none}
.cx-orig.two p{flex:1 1 100%}

/* ---------- 10–12: Siegel, Töne, Kin nachschlagen ---------- */
.cx-glyphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px}
.cx-glyphs.tons{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.cx-celtog{margin:4px 0 0;font-size:14px;color:var(--muted)}
.cx-celtog label{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.cx-celtog input{width:18px;height:18px;margin:0;accent-color:var(--gold)}
/* Zeitzellen an (js/conceitos.js): fünf Gruppen à vier Siegel, je eine Überschrift */
.cx-glyphs.cx-bycel{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.cx-cel-h{margin:0 0 8px;font:600 15px/1.3 var(--font);color:var(--gold)}
.cx-cel-h small{margin-left:6px;font-size:12.5px;font-weight:500;color:var(--faint)}
.cx-cel-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:640px){.cx-cel-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx-gli{display:grid;min-width:0}   /* Listeneintrag um den Knopf (GR-11); der Knopf füllt die Rasterzelle */
.cx-gl{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;text-align:center;transition:.25s}
.cx-gl:hover,.cx-gl[aria-pressed=true]{border-color:rgba(227,191,110,.6);background:rgba(227,191,110,.07);transform:translateY(-2px)}
.cx-gl.today{box-shadow:0 0 0 1px var(--gold),0 0 30px -10px var(--gold)}
.cx-gl b{font:600 13px/1.25 var(--font)}
.cx-gl small{font-size:11.5px;line-height:1.35;color:var(--faint)}
.cx-gl svg{display:block}
.cx-seal{display:grid;place-items:center;border-radius:22%;background:var(--c);color:#14110a;font:700 20px var(--display);box-shadow:inset 0 0 0 3px rgba(13,17,48,.25)}
.cx-tonesm{display:grid;place-items:center;height:64px}
/* Ton-Glyphen im Raster: Punkte und Balken auf ~40 px Höhe (vorher ~18 px hoch, Striche ~5 px) */
.cx-tonesm svg{width:auto;height:40px;max-width:100%}
/* 48 harmonische Runen: ab 1100 px zwei Spalten mit je drei Oktaven statt einer halbleeren Zeile */
@media (min-width:1100px){
  #fig-urh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(3,auto);grid-auto-flow:column;column-gap:48px}
  #fig-urh > .cx-detail{grid-column:1/-1;grid-row:1}
  #fig-urh .cx-glyphs{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:8px!important}   /* je Oktave eine Zeile (inline-Stil in conceitos.js) */
  #fig-urh .cx-gl svg{width:100%;max-width:56px;height:auto}
  #fig-urh > div > .eyebrow{min-height:2.9em;display:flex;align-items:flex-end}   /* ein- und zweizeilige Oktav-Titel: Runenreihen bleiben auf einer Höhe */
}
.cx-detail{margin-top:22px}
.cx-det{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;padding:28px;align-items:start}
.cx-det h3{font-size:28px;margin:8px 0 6px}
.cx-det p{color:var(--muted);font-size:16px;line-height:1.75}
.cx-motto{font:500 18px/1.5 var(--display)!important;color:var(--gold)!important;margin-bottom:12px}
.cx-daily{margin-top:16px;padding:12px 16px;border-radius:12px;background:rgba(95,212,240,.06);border:1px solid rgba(95,212,240,.2)}
.cx-daily b{color:var(--cyan);margin-right:6px}
.cx-tonebig{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:132px}
.cx-tonebig b{font:700 34px var(--display);color:var(--gold)}
.cx-kinform{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0 24px}
.cx-kinform .field{width:auto;min-width:120px}
.cx-kinform span{color:var(--faint)}
.cx-kincard{padding:26px}
.cx-kinhead{display:flex;gap:22px;align-items:center;margin-bottom:24px}
.cx-kinhead h3{font-size:26px;margin:6px 0 10px}
.cx-kinicon{display:flex;flex-direction:column;align-items:center;gap:6px}
@media (max-width:760px){.cx-det{grid-template-columns:1fr;padding:20px}.cx-det-g{display:flex;justify-content:center}.cx-kinhead{flex-direction:column;text-align:center}}
.cx-plasmas{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:18px 0 22px}
.cx-plasmas div{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:center}
.cx-plasmas div.on{border-color:var(--gold);box-shadow:0 0 26px -8px var(--gold)}
.cx-plasmas b{font:600 12px var(--font)}
.cx-plasmas small{font-size:10.5px;color:var(--faint)}
@media (max-width:640px){.cx-plasmas{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Brotkrumen .pg-crumbs: css/site.css (gemeinsam, Touch-Ziel) */
/* Meldung bei ungültigem Datum (util.js dateMessage) */
.dt-msg{margin:8px 0 0;padding:8px 12px;border-radius:10px;border:1px solid rgba(240,161,74,.5);background:rgba(240,161,74,.1);color:var(--text);font-size:13px;line-height:1.4}
@media (pointer:coarse){.cx-chips .chip{min-height:40px}}   /* Touch-Ziel ≥ 40 px (#circ-chips) */
#fig-urh > div > .eyebrow{line-height:1.45}   /* Oktav-Überschriften (oft zweizeilig): lesbarer Zeilenabstand */

/* „Zurück zu heute“ (js/data-comum.js todayPill): schwebt unten, verschiebt nichts (kein CLS) */
.dc-pill{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;
  max-width:calc(100vw - 24px);box-sizing:border-box;padding:6px 6px 6px 16px;border-radius:999px;border:1px solid rgba(227,191,110,.6);background:rgba(10,13,36,.95);
  box-shadow:0 12px 34px rgba(0,0,0,.5);color:var(--muted);font-size:13px;white-space:nowrap}
.dc-pill b{color:var(--text)}
.dc-today{border:1px solid var(--gold);border-radius:999px;background:rgba(227,191,110,.12);color:var(--gold);font:600 12.5px/1 var(--font);padding:0 14px;min-height:38px;cursor:pointer;white-space:nowrap}
.dc-today:hover{background:rgba(227,191,110,.22)}
.dc-today:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body:has(.dc-pill){padding-bottom:64px}
@media (max-width:400px){.dc-pill{font-size:12px;gap:6px;padding-left:12px}.dc-today{padding:0 10px}}
@media print{.dc-pill{display:none}}
/* Perzeptor-Orientierung (#perceptor): Nacken oben (H1), Augen/Stirn unten (H21), rechte Hemisphäre links im Bild */
.o-fig{margin:0;display:grid;justify-items:center;gap:8px;width:100%}
.o-mid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%}
.o-fig img{display:block;width:100%;height:auto;border-radius:12px}
.o-lab{font-size:11.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted);text-align:center}
.o-side{writing-mode:vertical-rl;white-space:nowrap}
.o-side.o-l{transform:rotate(180deg)}
.o-bot{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--gold)}
.o-eyes{display:block;width:58px;height:auto}
.cx-orig.two .o-fig{flex:1 1 140px}
.cx-orig.two .o-fig img{max-width:200px;margin:auto}
.o-fig.sm{gap:5px}
.o-fig.sm .o-mid{gap:6px}
.o-fig.sm .o-lab{font-size:10.5px;letter-spacing:.06em}
.o-fig.sm .o-side{writing-mode:horizontal-tb;font-size:12px;cursor:help}
.o-fig.sm .o-eyes{width:40px}
@media (max-width:520px){.o-fig:not(.sm) .o-side{font-size:10px;letter-spacing:.04em}}
/* Matrix 441 (Originalgrafik) über der Grundmatrix im Abschnitt 1 (05.10.2026) */
.cx-figs{display:grid;gap:24px;min-width:0}
.cx-441 img{display:block;width:100%;height:auto;border-radius:10px}
/* Korrektur 8 (grafik_funktion.md Fund 7): neben zwei hohen Grafiken stand der Text senkrecht in der Mitte – darüber rund
   500 px Leerfläche. Der Text beginnt oben; die Mittelzelle 441 der Grundmatrix (weiß gefüllt) bekommt dunkle Schrift
   (components.css setzt die Schrift für alle Zellen hell, das ink-Attribut aus conceitos.js greift darum nicht). */
.cx-grid:has(> .cx-figs){align-items:start}
#fig-base .mx-c[data-v="11"][data-h="11"] text{fill:#14161f;font-weight:700}
/* Abschnitt 6: Legende auch für die grünen Felder (galaktische Aktivierungsportale, Farbe wie css/tzolkin.css .tzk-k.gap) */
.cx-legend i.g{background:#1f5a3c;box-shadow:0 0 0 1px rgba(233,247,238,.35)}
/* Kin-Karte (Abschnitt 12): Ziel der Links #kin-N, bekommt den Fokus (js/conceitos.js toCard) */
.cx-kincard,#kin-res{scroll-margin-top:12px}   /* zusätzlich zu scroll-padding-top (site.css, Kopfleiste) */
.cx-kincard:focus{outline:none}
.cx-kincard:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* Abschnitt 6: Tzolkin-Raster (js/tzolkin.js, Stil css/tzolkin.css) – Platz vorab reserviert, kein Layoutsprung */
.cx-tzk .tzk{display:grid;aspect-ratio:14/23;width:100%;max-width:460px;margin:0 auto}
.cx-tzk .cx-legend{justify-content:center}
/* Kontrast (axe, Korrektur 8): Kin-Nummer des Schicksals-Kin im Orakel der Kin-Karte auf hellerem Grund (blaue/rote Kin) */
@media screen{.cx-kincard .or-cell.destino .or-num{color:color-mix(in srgb,var(--c) 72%,#fff)}}
/* Abschnitt 6a: galaktische Aktivierungsportale (js/portal.js mountPortais, Grundstil css/portal.css) – Plätze vorab reserviert */
.cx-portais .cx-grid{align-items:start}
.pt-h3{font:600 20px/1.3 var(--display);margin:28px 0 10px;color:var(--text)}
.cx-text p.pt-src{font-size:13px;opacity:.85}
.cx-text p.pt-psi{min-height:3.2em;color:var(--text)}
.pt-ics{min-height:110px}
.pt-quote{margin:14px 0;padding:10px 16px;border-left:3px solid #5fd4f0;color:var(--text);font-style:italic}
p.pt-quote{font-style:normal}
.pt-quote cite{display:block;margin-top:6px;font-style:normal;font-size:12.5px;color:var(--muted)}
.cx-text .pt-quote cite a,.pt-more a,.cx-fig figcaption a{color:var(--cyan)}
.pt-loomw{max-width:330px;margin:0 auto;aspect-ratio:288/442}
.pt-loomw > svg{width:100%;height:100%}
.pt-legend{min-height:22px}
.pt-det{margin-top:14px;font-size:14px}
.pt-det summary{cursor:pointer;color:var(--gold)}
.pt-more{margin:12px 0 0;font-size:13px;color:var(--muted)}

/* 6b · As ordens do Tzolkin / 9a · Bolontiku (js/tzolkin-ordens.js, css/kin-zyklen.css): Text oben bündig; Raster vorab reserviert */
.cx-ordens .cx-grid,#bolontiku .cx-grid{align-items:start}
#fig-ordens .cx-tzk .tzk:empty{min-height:calc(min(100cqw, 460px) * 23 / 14)}