/* Drei-Personen-Schach – Gestaltung der Inhaltsseiten. © 2026 Guido Suchsland */
:root { --bg:#16181d; --card:#20232b; --text:#e6e6e6; --muted:#a8adb8; --blue:#5599ff; --green:#44ee22; --red:#ff5533; --gold:#ffd23f; --line:#2f3440; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:#8fb6ff; }
header.top { position:sticky; top:0; z-index:10; background:rgba(22,24,29,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
header.top .in { max-width:1040px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.logo { font-weight:800; color:#fff; text-decoration:none; font-size:18px; display:flex; align-items:center; gap:8px; }
.logo img { width:28px; height:28px; border-radius:6px; }
nav.main { display:flex; gap:14px; flex-wrap:wrap; font-size:15px; }
nav.main a { color:var(--muted); text-decoration:none; }
nav.main a:hover, nav.main a.on { color:#fff; }
.play { margin-left:auto; background:#2a9d4a; color:#fff !important; text-decoration:none; padding:7px 14px; border-radius:9px; font-weight:700; white-space:nowrap; }
.play:hover { background:#33b457; }
main { max-width:1040px; margin:0 auto; padding:24px 16px 40px; }
article { max-width:760px; margin:0 auto; }
h1 { font-size:clamp(28px,5vw,44px); line-height:1.15; margin:18px 0 10px; }
h2 { font-size:clamp(22px,3.4vw,28px); margin:36px 0 10px; }
h3 { font-size:19px; margin:24px 0 6px; color:var(--gold); }
p.lead { font-size:19px; color:#cfd3db; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center; }
.hero img { width:100%; height:auto; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.cta { display:inline-block; margin:10px 10px 0 0; padding:12px 22px; border-radius:12px; font-weight:800; font-size:18px; text-decoration:none; }
.cta.go { background:#2a9d4a; color:#fff; } .cta.go:hover { background:#33b457; }
.cta.alt { border:2px solid #5b8fd0; color:#cfe0ff; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.card h3 { margin-top:0; }
.card p { margin:6px 0 0; color:#cfd3db; font-size:16px; }
figure { margin:20px 0; } figure img { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
figcaption { color:var(--muted); font-size:14px; margin-top:6px; text-align:center; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.b { color:var(--blue); font-weight:700; } .g { color:var(--green); font-weight:700; } .r { color:var(--red); font-weight:700; }
.note { background:#1d2433; border-left:4px solid #5b8fd0; padding:10px 14px; border-radius:8px; color:#cfd3db; }
details { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:10px 0; }
details summary { cursor:pointer; font-weight:700; }
ul li, ol li { margin:4px 0; }
footer.bottom { border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer.bottom .in { max-width:1040px; margin:0 auto; padding:18px 16px 30px; display:flex; gap:16px; flex-wrap:wrap; }
footer.bottom a { color:var(--muted); }
@media (max-width:760px){ .hero, .cols { grid-template-columns:1fr; } nav.main { order:3; width:100%; gap:12px; font-size:14px; } body { font-size:16px; } }
select.lang { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:4px 6px; font-size:14px; }
[dir=rtl] .play { margin-left:0; margin-right:auto; }
/* Bilder zum Ausprobieren: antippen öffnet das Spiel mit dieser Stellung */
a.try { display:block; position:relative; border-radius:12px; width:fit-content; max-width:100%; margin-inline:auto; }
.tryGrid a.try { width:auto; }
a.try img { transition:transform .15s, box-shadow .15s; }
a.try:hover img, a.try:focus-visible img { transform:scale(1.01); box-shadow:0 0 0 3px #ffd23f; }
.tryBadge { position:absolute; right:10px; bottom:10px; background:#ffd23f; color:#111; border-radius:999px; padding:4px 11px; font-weight:700; font-size:15px; box-shadow:0 2px 8px rgba(0,0,0,.45); pointer-events:none; }
.tryGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:14px; }
.tryGrid figure { margin:0; }
/* Klappmenüs im Kopf (Spielen ▾, Regeln ▾) – per Tippen, ohne Maus-Hover */
nav.main { align-items:center; }
details.dd { position:relative; }
details.dd summary { list-style:none; cursor:pointer; color:var(--muted); user-select:none; }
details.dd summary::-webkit-details-marker { display:none; }
details.dd summary::after { content:" ▾"; font-size:.8em; }
details.dd[open] summary, details.dd.on summary, details.dd summary:hover { color:#fff; }
details.dd > div { position:absolute; top:calc(100% + 8px); left:-10px; min-width:220px; background:#1d2028; border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.5); display:flex; flex-direction:column; z-index:20; }
details.dd > div a { padding:8px 10px; border-radius:7px; white-space:nowrap; }
details.dd > div a:hover, details.dd > div a.on { background:#2a2e38; color:#fff; }
[dir=rtl] details.dd > div { left:auto; right:-10px; }
/* Varianten-Karten auf der Startseite */
.grid.vars .card img { width:100%; height:auto; border-radius:10px; border:1px solid var(--line); margin-bottom:8px; }
.cta.small { font-size:15px; padding:7px 14px; margin:6px 10px 0 0; }

/* Die Computergegner */
.kig { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:22px; align-items:center; margin:34px 0; padding:18px; background:#1d2129; border:1px solid #2c3240; border-radius:14px; }
.kig img { width:100%; height:auto; border-radius:10px; display:block; }
.kig h2 { margin:0 0 4px; }
.kig p { margin:6px 0; }
.kig .kigLook { color:#9aa3b5; font-style:italic; }
.kig .kigQ { color:#ffd23f; }
@media (max-width:640px){ .kig { grid-template-columns:1fr; } }
/* Anker nicht unter der festen Kopfleiste verstecken; Menü am Handy in einer Zeile */
[id]{ scroll-margin-top:90px; }
@media (max-width:760px){ [id]{ scroll-margin-top:110px; } nav.main{ gap:4px 8px; font-size:13px; } nav.main details.dd{ padding:5px 8px; margin:0; border-radius:9px; } nav.main details.dd summary::after{ margin-left:-2px; } header.top .in{ padding:8px 12px; gap:8px 12px; } header.top .play{ padding:6px 10px; font-size:13px; margin-left:auto; } header.top .logo{ font-size:15px; gap:6px; } header.top .logo img{ width:26px; height:26px; } }
@media (max-width:760px){
  nav.main{ gap:4px 6px; font-size:12.5px; } nav.main details.dd{ padding:5px 7px; }
  nav.main details.dd > div{ max-width:calc(100vw - 24px); } nav.main details.dd > div a{ white-space:normal; }
  nav.main details.dd:nth-of-type(3) > div{ left:auto; right:-60px; }
}