/**
 * CEO/Vorstand: Stylesheet für das Browserspiel (Seitenvorlage page-ceo-vorstand.php)
 * Version: 1.1.0 (30.09.2026)
 * Änderung: Beschreibungstext branchenneutral (Industrie und Verlage).
 * Vorversion: 1.0.0 (30.09.2026) Erstversion.
 * Author: digitalpaddy / meiersworld.de
 *
 * Alle Regeln sind auf .cv-game begrenzt, damit sie das Theme nicht beeinflussen
 * und das Theme das Spiel nicht verändert. Schriften liegen lokal in ./fonts/
 * (Press Start 2P und VT323, beide SIL Open Font License 1.1, siehe LICENSE-Dateien).
 */
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/vt323-latin-400-normal.woff2') format('woff2'); }

/* Bereich für den AdSense-Block oberhalb des Spiels (Kennzeichnung als Anzeige, klar vom Spiel getrennt) */
.cvg-adslot { margin: 0 0 20px; text-align: center; }
.cvg-adlabel { font-family: sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--farbe-akzent-hell); margin: 0 0 4px; }
.cvg-note { font-family: sans-serif; font-size: 12px; color: var(--farbe-akzent-dunkel); margin: 16px 0 0; line-height: 1.5; }

.cv-game { color-scheme: dark; --frame: #6c5eb5; --screen: #352879; --panel: #2a1f6b; --deep: #1f1755; --ink: #cfc8ff; --dim: #a59cee; --hi: #e1ea8a; --cyan: #86d3e0; --good: #9ad284; --bad: #f09a88; --white: #ffffff; --font-d: 'Press Start 2P', 'Courier New', monospace; --font-b: 'VT323', 'Courier New', monospace; }
.cv-game, .cv-game * { box-sizing: border-box; }
.cv-game { background: var(--frame); color: var(--ink); font-family: var(--font-b); font-size: 22px; line-height: 1.2; padding-inline: 16px; padding-block: 16px; }
.cv-game #cv-app { max-width: 760px; margin-inline: auto; background: var(--screen); padding: 16px; min-height: 60vh; }
.cv-game p { margin: 0 0 10px; font-size: inherit; line-height: inherit; font-family: inherit; }
.cv-game h1 { font-family: var(--font-d); font-size: clamp(18px, 6.2vw, 30px); line-height: 1.3; color: var(--white); letter-spacing: 1px; margin: 0; text-shadow: 3px 3px 0 var(--deep); }
.cv-game h1 span { color: var(--hi); }
.cv-game h2 { font-family: var(--font-d); font-size: 12px; line-height: 1.6; color: var(--hi); text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.cv-game .lbl { font-family: var(--font-d); font-size: 10px; line-height: 1.6; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); }
.cv-game .dim { color: var(--dim); }
.cv-game .sm { font-size: 19px; }
.cv-game .good { color: var(--good); }
.cv-game .bad { color: var(--bad); }
.cv-game .hi { color: var(--hi); }
.cv-game .stack { display: flex; flex-direction: column; gap: 16px; }
.cv-game .tight { display: flex; flex-direction: column; gap: 8px; }
.cv-game .center { text-align: center; }
.cv-game .box { background: var(--panel); border: 2px solid var(--frame); padding: 12px; box-shadow: 4px 4px 0 var(--deep); min-width: 0; }
.cv-game .boot { color: var(--dim); font-size: 20px; line-height: 1.15; }
.cv-game .cur { display: inline-block; width: 0.55em; height: 0.9em; background: var(--ink); vertical-align: -0.1em; animation: cv-blink 1s steps(1) infinite; }
@keyframes cv-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.cv-game .cur { animation: none; }
}
.cv-game .cv-snd { max-width: 760px; margin: 0 auto 10px; text-align: right; }
.cv-game .cv-promo { max-width: 760px; margin: 14px auto 0; border: 2px dashed var(--dim); background: var(--panel); color: var(--ink); padding: 10px 12px; }
.cv-game .cv-promo .lbl { margin-bottom: 4px; }
.cv-game .cv-promo a { color: var(--hi); }
.cv-game .how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-game .how li::before { content: '> '; color: var(--hi); }
.cv-game .btn { font-family: var(--font-d); font-size: 12px; line-height: 1.5; padding: 12px 14px; background: var(--panel); color: var(--ink); border: 2px solid var(--frame); box-shadow: 3px 3px 0 #000; cursor: pointer; text-align: center; }
.cv-game .btn:hover { border-color: var(--white); }
.cv-game .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.cv-game .btn:focus-visible,
.cv-game .opt:focus-visible,
.cv-game input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.cv-game .btn.pri { background: var(--hi); color: var(--deep); border-color: var(--white); }
.cv-game .btn.sm { font-size: 11px; padding: 9px 12px; }
.cv-game .btn[aria-pressed="true"] { background: var(--hi); color: var(--deep); border-color: var(--white); }
.cv-game .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: 3px 3px 0 #000; }
.cv-game .btn small { display: block; font-size: 8px; color: var(--dim); margin-top: 4px; }
.cv-game .seg { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-game input[type=text] { font: inherit; font-size: 22px; background: var(--deep); color: var(--white); border: 2px solid var(--frame); padding: 6px 8px; width: 100%; min-width: 0; border-radius: 0; }
.cv-game .pf { display: grid; gap: 6px; padding-block: 8px; border-bottom: 2px dotted #4a3d9c; }
.cv-game .pf .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.cv-game .hd { display: flex; flex-direction: column; gap: 2px; }
.cv-game .who { font-family: var(--font-d); font-size: 13px; line-height: 1.6; color: var(--white); }
.cv-game .rk { color: var(--hi); }
.cv-game .co { color: var(--cyan); }
.cv-game .pix { width: 100%; height: auto; display: block; image-rendering: pixelated; image-rendering: crisp-edges; border: 2px solid var(--frame); background: var(--panel); }
.cv-game canvas.ico { width: 40px; height: 40px; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.cv-game .kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cv-game .kpi .col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cv-game .kv { display: flex; align-items: baseline; min-width: 0; }
.cv-game .kv .lead { flex: 1; border-bottom: 2px dotted var(--dim); margin: 0 6px; transform: translateY(-4px); min-width: 8px; }
.cv-game .kv b { font-weight: normal; color: var(--white); text-align: right; }
.cv-game .kv b.good { color: var(--good); }
.cv-game .kv b.bad { color: var(--bad); }
.cv-game .mt { display: grid; grid-template-columns: 122px 1fr 40px; gap: 8px; align-items: center; }
.cv-game .mt b { font-weight: normal; color: var(--white); text-align: right; }
.cv-game .meter { display: flex; gap: 2px; }
.cv-game .meter i { flex: 1; height: 12px; background: var(--deep); }
.cv-game .meter i.on { background: var(--c); }
.cv-game .ev { display: flex; gap: 12px; align-items: flex-start; }
.cv-game .ev > div { min-width: 0; }
.cv-game .ev .t { font-family: var(--font-d); font-size: 11px; line-height: 1.6; color: var(--hi); margin-bottom: 6px; text-transform: uppercase; }
.cv-game .ev .eff { color: var(--cyan); }
.cv-game .opt { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; font: inherit; color: var(--ink); background: var(--deep); border: 2px solid var(--frame); padding: 10px 12px; cursor: pointer; box-shadow: 3px 3px 0 #000; }
.cv-game .opt b { font-weight: normal; color: var(--white); }
.cv-game .opt span { color: var(--dim); font-size: 19px; }
.cv-game .opt:hover { border-color: var(--white); }
.cv-game .opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.cv-game .ctl { display: grid; gap: 6px; padding-block: 10px; border-bottom: 2px dotted #4a3d9c; }
.cv-game .ctl .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-game .ctl .name { color: var(--hi); min-width: 0; }
.cv-game .ctl .val { display: flex; align-items: center; gap: 8px; }
.cv-game .ctl .val b { font-weight: normal; min-width: 8ch; text-align: center; color: var(--white); }
.cv-game .stp { font-family: var(--font-d); font-size: 14px; width: 38px; height: 38px; padding: 0; background: var(--deep); color: var(--ink); border: 2px solid var(--frame); cursor: pointer; }
.cv-game .stp:hover { border-color: var(--white); }
.cv-game .stp:active { background: var(--hi); color: var(--deep); }
.cv-game .stp:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.cv-game .hint { color: var(--dim); font-size: 19px; }
.cv-game input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 28px; margin: 0; }
.cv-game input[type=range]::-webkit-slider-runnable-track { height: 8px; background: var(--deep); border: 2px solid var(--frame); }
.cv-game input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 22px; background: var(--hi); border: 2px solid #000; margin-top: -9px; border-radius: 0; }
.cv-game input[type=range]::-moz-range-track { height: 8px; background: var(--deep); border: 2px solid var(--frame); }
.cv-game input[type=range]::-moz-range-thumb { width: 14px; height: 18px; background: var(--hi); border: 2px solid #000; border-radius: 0; }
.cv-game .bar { position: sticky; bottom: 0; background: var(--panel); border: 2px solid var(--frame); padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; box-shadow: 0 -4px 0 var(--screen); }
.cv-game .bar .nums { min-width: 0; }
.cv-game .quote { border-left: 4px solid var(--hi); padding-left: 10px; color: var(--white); }
.cv-game .quote small { display: block; color: var(--dim); font-size: 18px; margin-top: 2px; }
.cv-game .promo { background: var(--hi); color: var(--deep); padding: 10px 12px; border: 2px solid var(--white); }
.cv-game .promo b { font-family: var(--font-d); font-size: 11px; display: block; margin-bottom: 4px; font-weight: normal; }
.cv-game .gone { background: var(--bad); color: var(--deep); padding: 10px 12px; border: 2px solid var(--white); }
.cv-game .gone b { font-family: var(--font-d); font-size: 11px; display: block; margin-bottom: 4px; font-weight: normal; }
.cv-game .row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.cv-game .row .pos { font-family: var(--font-d); font-size: 14px; color: var(--hi); }
.cv-game .row .pts { font-family: var(--font-d); font-size: 13px; color: var(--white); }
.cv-game .row > div { min-width: 0; }