/* CC-CTD-2026-11: Connect the Dots – Seiten (Hub, Online, Karten). Stil aus cbn-page.css uebernommen (.cbn-seite -> .ctd-seite):
   redaktionell, kein Kasten-Look. Farben wie hub.html (Orange #c2410c / #ea580c, Creme #fff7ed). Das Spiel selbst steht in ctd-spiel.css (Paket C). */
/* Grundregeln der Hubs (stehen sonst inline in hub.html) */
.ctd-seite .hub-tagline{font-size:1.1rem;font-weight:600;color:#222;margin:6px 0 8px;line-height:1.4;max-width:72ch}
.ctd-seite .hub-lead{color:#555;line-height:1.5;margin:0 0 14px;max-width:72ch}
.ctd-seite .hub-sec{margin-top:56px}
.ctd-seite .hub-sec>h2{margin:0 0 14px}
.ctd-seite .hub-nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.ctd-seite .hub-nav a{font-size:.85rem;padding:5px 12px;border:1px solid #f3d3b8;border-radius:999px;color:#9a3412;text-decoration:none;background:#fff7ed}
.ctd-seite .hub-nav a span{color:#c2410c;opacity:.7;margin-left:3px}
.ctd-seite .ctd-mehr{margin:40px 0 0;font-size:15px}
.ctd-seite .ctd-mehr a{color:#c2410c;font-weight:600;text-decoration:none}
.ctd-seite .ctd-mehr a:hover{text-decoration:underline}
@media (max-width:640px){.ctd-seite .hub-tagline{font-size:1rem}}
/* Schritte */
.ctd-schritte{margin:14px 0 6px;padding-left:1.25em;max-width:72ch;color:#444;line-height:1.55}
.ctd-schritte li{margin:0 0 4px!important;padding-left:2px;text-indent:0!important}  /* Seiten-CSS setzt li auf margin-left:30px + text-indent:-30px: ohne Zahl ragte die umbrochene Zeile ein */
.ctd-schritte li::before{content:none}
.ctd-schritte b{color:#1f2937}
/* Gruppen je Stufe */
.ctd-gruppe{margin:56px 0 0}
.ctd-gruppe-titel{font:700 24px/1.2 Inter,system-ui,sans-serif;color:#c2410c;margin:0 0 14px}
.ctd-gruppe-titel span{font-weight:500;font-size:15px;color:#7c6f64;margin-left:6px}
@media (max-width:640px){.ctd-gruppe-titel{font-size:21px}.ctd-gruppe-titel span{display:block;margin:4px 0 0}}
/* Karte: Loesung ueber dem Raetsel, 2 grosse Knoepfe, Loesungs-Umschalter mit grosser Tippflaeche */
.ctd-karte .ctd-bild{position:relative;display:block}
.ctd-karte .ctd-key{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;opacity:0;transition:opacity .2s;pointer-events:none}
.ctd-karte.zeigt .ctd-key{opacity:1}
.ctd-karte .cap .t{display:block;white-space:normal}
.ctd-knoepfe{display:flex;gap:8px;padding:2px 11px 8px}
.ctd-knoepfe .ctd-k1,.ctd-knoepfe .ctd-k2{flex:1 1 0;min-width:0;min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;
  font:700 14.5px/1.1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;padding:0 8px}
.ctd-knoepfe .ctd-k1{background:#ea580c;color:#fff;border:0}
.ctd-knoepfe .ctd-k1:hover{background:#c2410c}
.ctd-knoepfe .ctd-k2{background:#fff;color:#c2410c;border:1.5px solid #f3c9a8}
.ctd-knoepfe .ctd-k2:hover{border-color:#ea580c}
.ctd-klein{display:flex;flex-wrap:wrap;gap:6px;padding:0 11px 12px;align-items:flex-start}
.ctd-klein .ctd-loes{min-height:38px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid #efdccb;border-radius:8px;background:#fffaf5;
  color:#9a3412;font:600 13.5px/1 Inter,system-ui,sans-serif;cursor:pointer}
.ctd-klein .ctd-loes[aria-pressed="true"]{background:#fff0e3}
.ctd-loes:focus-visible,.ctd-knoepfe a:focus-visible,.ctd-knoepfe button:focus-visible,.ctd-weitere .ctd-play:focus-visible{outline:2px solid #ea580c;outline-offset:2px}
@media (max-width:640px){.ctd-knoepfe{padding:2px 9px 8px;gap:6px}.ctd-klein{gap:5px;padding:0 9px 10px}.ctd-klein .ctd-loes{padding:0 9px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.ctd-karte .ctd-key{transition:none}}
@media print{.ctd-knoepfe,.ctd-klein{display:none!important}}
/* Online-Seite: Links unter dem Spiel, Auswahl der anderen Raetsel */
.ctd-spiel-links{margin:12px 0 0;font:14px/1.5 Inter,system-ui,sans-serif;text-align:center}
.ctd-spiel-links a{color:#c2410c;font-weight:600;text-decoration:none}
.ctd-spiel-links a:hover{text-decoration:underline}
.ctd-weitere{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:0}
.ctd-weitere .ctd-play{border:1px solid #e9e4dc;border-radius:10px;background:#fff;padding:6px;cursor:pointer;display:grid;gap:4px;font:12px/1.3 Inter,system-ui,sans-serif;color:#1f2937;text-align:left}
.ctd-weitere .ctd-play:hover{border-color:#ea580c}
.ctd-weitere img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}
.ctd-onlineseite .container{max-width:900px}
/* Textbereich: kuerzere Zeilen, Absaetze mit Luft, orange Links, gestaltete FAQ (<details>) */
.ctd-notes{max-width:72ch;margin-top:56px}
.ctd-notes h2{margin:48px 0 12px!important}
.ctd-notes>h2:first-child{margin-top:0!important}
.ctd-notes p{margin:0 0 16px;line-height:1.7;font-size:17px;color:#2b2622}
.ctd-notes strong{color:#1f2937;font-weight:700}
.ctd-notes a,.ctd-seite .hub-tagline a{color:#c2410c;text-decoration:underline;text-decoration-color:rgba(194,65,12,.4);text-underline-offset:3px}
.ctd-notes a:hover{text-decoration-color:#c2410c}
.ctd-notes .ctd-faq-titel{margin-top:48px!important}
.ctd-notes details.hub-faq{border-bottom:1px solid #f1e2d3;padding:14px 0;margin:0}
.ctd-notes details.hub-faq:first-of-type{border-top:1px solid #f1e2d3}
.ctd-notes details.hub-faq>summary{list-style:none;cursor:pointer;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:12px;color:#1f2937}
.ctd-notes details.hub-faq>summary::-webkit-details-marker{display:none}
.ctd-notes details.hub-faq>summary::after{content:'+';color:#c2410c;font-size:22px;line-height:1;flex:none}
.ctd-notes details.hub-faq[open]>summary::after{content:'\2013'}
.ctd-notes details.hub-faq p{margin:10px 0 0}
@media (max-width:640px){.ctd-notes p{font-size:16px}}