/* ============================================================================
   raetselgenerator24 · Design-System "Spielwiese"
   Verspielt, kindgerecht, warm. Creme-Hintergrund, Coral-Akzent mit
   "harten" 3D-Schatten, Dunkelviolett als Kontrast. Pro Rätselart eine
   eigene Akzentfarbe. Fredoka (Headlines/Buttons) + Nunito (Text),
   self-gehostet (DSGVO – kein Google-CDN).
   Vorlage: Claude-Design "Raetselgenerator24.dc.html".
   ========================================================================== */

/* — Fonts (self-hosted) — */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fredoka-400.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fredoka-500.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fredoka-600.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/fredoka-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/nunito-400.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/nunito-600.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/nunito-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/nunito-800.woff2') format('woff2')}

:root{
  --bg:#fbf7f0;
  --surface:#ffffff;
  --border:#efe7d8;
  --border-strong:#e0d7c5;
  --ink:#2b2440;
  --ink-soft:#6b6480;
  --ink-faint:#a49dbb;

  --accent:#ff6b6b;          /* Coral (Marke) */
  --accent-shadow:#d94f4f;   /* 3D-Schatten unter Coral */
  --accent-soft:#ffe2e2;
  --accent-tint:#fff5f5;

  --dark:#2b2440;
  --dark-shadow:#1a1530;
  --link:#4d7cff;
  --link-hover:#2b5fff;

  /* Rätselart-Akzente */
  --cat-schweden:#4d7cff;  --cat-schweden-soft:#e4ecff;
  --cat-kreuzwort:#a06bff; --cat-kreuzwort-soft:#efe6ff;
  --cat-sudoku:#ff6b6b;    --cat-sudoku-soft:#ffe2e2;
  --cat-wortsuche:#22b8a6; --cat-wortsuche-soft:#d9f5f0;
  --cat-labyrinth:#ffb020; --cat-labyrinth-soft:#fff0d4;
  --cat-malen:#ff5fa2;     --cat-malen-soft:#ffe0ee;
  --cat-zahlen:#3fb96b;    --cat-zahlen-soft:#dcf3e3;
  --cat-gitter:#6272e3;    --cat-gitter-soft:#e6e9fc;
  --cat-nonogramm:#2098c9; --cat-nonogramm-soft:#ddf0f9;
  --cat-silben:#ff8a3d;    --cat-silben-soft:#ffe9d9;
  --cat-logik:#b44fd8;     --cat-logik-soft:#f3e2fa;
  --cat-schule:#0b7285;    --cat-schule-soft:#d3f0f7;

  /* aktive Kategorie (per .cat-* überschrieben) */
  --cat:var(--accent);
  --cat-soft:var(--accent-soft);
  --cat-shadow:var(--accent-shadow);

  --font-head:'Fredoka',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --maxw:1180px;
  --pad:clamp(18px,4vw,28px);
}

.cat-schweden{--cat:var(--cat-schweden);--cat-soft:var(--cat-schweden-soft);--cat-shadow:#3860d6}
.cat-kreuzwort{--cat:var(--cat-kreuzwort);--cat-soft:var(--cat-kreuzwort-soft);--cat-shadow:#7f4fd6}
.cat-sudoku{--cat:var(--cat-sudoku);--cat-soft:var(--cat-sudoku-soft);--cat-shadow:var(--accent-shadow)}
.cat-wortsuche{--cat:var(--cat-wortsuche);--cat-soft:var(--cat-wortsuche-soft);--cat-shadow:#199686}
.cat-labyrinth{--cat:var(--cat-labyrinth);--cat-soft:var(--cat-labyrinth-soft);--cat-shadow:#d98f12}
.cat-malen{--cat:var(--cat-malen);--cat-soft:var(--cat-malen-soft);--cat-shadow:#d94a86}
.cat-zahlen{--cat:var(--cat-zahlen);--cat-soft:var(--cat-zahlen-soft);--cat-shadow:#329b58}
.cat-gitter{--cat:var(--cat-gitter);--cat-soft:var(--cat-gitter-soft);--cat-shadow:#4c59c4}
.cat-nonogramm{--cat:var(--cat-nonogramm);--cat-soft:var(--cat-nonogramm-soft);--cat-shadow:#177ba3}
.cat-silben{--cat:var(--cat-silben);--cat-soft:var(--cat-silben-soft);--cat-shadow:#d96f28}
.cat-logik{--cat:var(--cat-logik);--cat-soft:var(--cat-logik-soft);--cat-shadow:#9436b8}
.cat-schule{--cat:var(--cat-schule);--cat-soft:var(--cat-schule-soft);--cat-shadow:#085d6b}

/* — Basis — */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:16px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.05;letter-spacing:-.8px}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft)}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.ink-soft{color:var(--ink-soft)}
.center{text-align:center}

/* — Wortmarke — */
.brand{display:inline-flex;align-items:center;gap:11px;cursor:pointer;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-logo{width:40px;height:40px;border-radius:12px;background:var(--accent);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;padding:8px;
  box-shadow:0 4px 0 var(--accent-shadow);flex:none}
.brand-logo i{background:#fff;border-radius:3px}
.brand-logo i:nth-child(2),.brand-logo i:nth-child(3){background:var(--accent-soft)}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:-.5px}
.brand-name b{color:var(--accent);font-weight:700}
.brand-sm .brand-logo{width:30px;height:30px;border-radius:9px;padding:6px;box-shadow:0 3px 0 var(--accent-shadow)}
.brand-sm .brand-name{font-size:17px}

/* — Header/Nav — */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,247,240,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--border)}
.site-header .inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:20px}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav a{font-family:var(--font-head);font-weight:600;font-size:15px;padding:9px 16px;
  border-radius:999px;color:var(--ink-soft)}
.nav a:hover{color:var(--ink);background:var(--surface)}
.nav a[aria-current="page"]{color:#fff;background:var(--accent)}

/* — Buttons — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:16px;line-height:1.1;
  border:none;border-radius:999px;padding:14px 26px;text-decoration:none;color:var(--ink);
  background:var(--surface);transition:transform .1s ease}
.btn:active{transform:translateY(2px)}
.btn-accent{color:#fff;background:var(--accent);box-shadow:0 5px 0 var(--accent-shadow)}
.btn-accent:hover{color:#fff}
.btn-accent:active{box-shadow:0 3px 0 var(--accent-shadow)}
.btn-dark{color:#fff;background:var(--dark);box-shadow:0 4px 0 var(--dark-shadow)}
.btn-dark:hover{color:#fff}
.btn-dark:active{box-shadow:0 2px 0 var(--dark-shadow)}
.btn-ghost{background:var(--surface);border:2px solid var(--border);color:var(--ink)}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-cat{color:#fff;background:var(--cat);box-shadow:0 5px 0 var(--cat-shadow)}
.btn-cat:hover{color:#fff}
.btn-lg{font-size:18px;padding:16px 30px}
.btn-block{width:100%}
.btn-square{border-radius:14px}

/* — Badges / Pills — */
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);
  font-weight:700;font-size:14px;padding:8px 15px;border-radius:999px}
.badge-sun{background:#fff2d6;color:#b5741a}
.badge-sun .dot{width:8px;height:8px;border-radius:50%;background:#ffb020}
.badge-ready{background:#e5f7f2;color:#17917f;font-size:13px;padding:7px 13px}
.badge-ready .dot{width:8px;height:8px;border-radius:50%;background:#22b8a6}
.kicker{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:14px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft)}

/* — Hero — */
.hero{position:relative;overflow:hidden;padding:70px 0 40px}
.hero-in{max-width:660px;position:relative;z-index:2}
.hero h1{font-size:clamp(38px,6.5vw,62px);line-height:1.02;letter-spacing:-1.5px;
  text-wrap:balance;margin:0}
.hero h1 .hl{color:var(--accent)}
.hero .lead{font-size:clamp(17px,2.2vw,20px);line-height:1.5;color:var(--ink-soft);
  margin-top:20px;max-width:540px;text-wrap:pretty}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.floaty{position:absolute;z-index:1;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@media (prefers-reduced-motion:reduce){.floaty{animation:none}}

/* — Stats-Reihe — */
.stats{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;padding:26px 0}
.stat-b{text-align:center;min-width:150px}
.stat-b .num{font-family:var(--font-head);font-weight:700;font-size:40px;line-height:1}
.stat-b .lbl{font-weight:700;color:var(--ink-soft);margin-top:6px}

/* — Sektion — */
.section{padding:clamp(40px,6vw,66px) 0}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{font-size:clamp(28px,4.4vw,40px);letter-spacing:-1px}
.section-head p{font-size:18px;color:var(--ink-soft);margin-top:10px}

/* — Rätselart-Karten — */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{background:var(--surface);border:2px solid var(--border);border-radius:22px;padding:24px;
  box-shadow:0 3px 0 var(--border);text-decoration:none;color:var(--ink);display:block;
  transition:transform .15s ease,box-shadow .15s ease}
.pcard:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 10px 26px rgba(43,36,64,.12)}
.pcard.is-soon{opacity:.72}
.pcard.is-soon:hover{transform:none;box-shadow:0 3px 0 var(--border)}
.pcard-ico{display:flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:16px;background:var(--cat-soft)}
.pcard-ico .dots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px}
.pcard-ico .dots i{width:9px;height:9px;border-radius:2px;background:var(--cat)}
.pcard-ico .dots i:nth-child(even){background:var(--cat-soft);box-shadow:inset 0 0 0 1.5px var(--cat)}
.pcard h3{font-family:var(--font-head);font-weight:600;font-size:22px;margin-top:16px}
.pcard p{color:var(--ink-soft);font-size:15px;line-height:1.45;margin-top:6px;min-height:44px}
.pcard .go{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);
  font-weight:600;color:var(--cat);margin-top:12px}
.pcard .soon-tag{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:13px;
  color:var(--ink-soft);background:var(--bg);border:1.5px solid var(--border);
  padding:4px 12px;border-radius:999px;margin-top:12px}

/* — Dunkle Sektion (Schritte) — */
.dark-section{background:var(--dark)}
.dark-section h2{color:#fff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:22px;padding:30px}
.step .n{font-family:var(--font-head);font-weight:700;font-size:22px;width:48px;height:48px;
  border-radius:14px;color:var(--dark);display:flex;align-items:center;justify-content:center}
.step h3{font-family:var(--font-head);font-weight:600;font-size:22px;color:#fff;margin-top:18px}
.step p{color:#b7b1c9;font-size:16px;line-height:1.5;margin-top:8px}

/* — Feature-Kacheln — */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{background:var(--surface);border:2px solid var(--border);border-radius:18px;
  padding:22px;text-align:center}
.feat .ico{width:44px;height:44px;border-radius:12px;margin:0 auto}
.feat h3{font-family:var(--font-head);font-weight:600;font-size:18px;margin-top:14px}
.feat p{color:var(--ink-soft);font-size:14px;line-height:1.4;margin-top:6px}

/* — CTA-Band — */
.cta-band{position:relative;overflow:hidden;border-radius:30px;padding:56px;text-align:center;
  background:linear-gradient(120deg,#ff6b6b,#ff9d6b)}
.cta-band h2{font-size:clamp(30px,5vw,42px);color:#fff;letter-spacing:-1px;position:relative;z-index:2}
.cta-band p{font-size:19px;color:rgba(255,255,255,.9);margin-top:12px;position:relative;z-index:2}
.cta-band .btn{margin-top:26px;position:relative;z-index:2;color:var(--accent);background:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.12)}
.cta-band .btn:hover{color:var(--accent)}
.cta-band .blob{position:absolute;z-index:1;background:rgba(255,255,255,.14)}

/* — Footer — */
.site-footer{border-top:2px solid var(--border);background:var(--bg)}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:34px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.site-footer .links{display:flex;flex-wrap:wrap;gap:22px;font-weight:700;font-size:15px}
.site-footer .links a{color:var(--ink-soft)}
.site-footer .links a:hover{color:var(--accent)}
.site-footer .copy{color:var(--ink-faint);font-size:14px}
.site-footer .social{display:flex;gap:10px}
.site-footer .social a{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--surface);
  border:2px solid var(--border);color:var(--ink-soft)}
.site-footer .social a:hover{color:var(--accent);border-color:var(--accent)}
.site-footer .social svg{width:17px;height:17px;display:block}

/* — Brotkrümel — */
.crumb{padding:22px 0 0;font-size:14px;color:var(--ink-soft);font-weight:600}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--accent)}
.crumb .sep{margin:0 8px;color:var(--ink-faint)}

/* — Seitentitel — */
.page-head{padding:16px 0 4px}
.page-head h1{font-size:clamp(28px,5vw,34px);letter-spacing:-.8px}
.page-head p{color:var(--ink-soft);font-size:17px;margin-top:6px}

/* ── Generator ─────────────────────────────────────────────────────────── */
.type-chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 26px}
.chip{font-family:var(--font-head);font-weight:600;font-size:15px;padding:10px 17px;
  border-radius:999px;cursor:pointer;border:2px solid var(--border);color:var(--ink-soft);
  background:var(--surface);text-decoration:none}
.chip:hover{color:var(--ink)}
.chip[aria-current="true"]{color:#fff;background:var(--cat);border-color:var(--cat)}

.gen-grid{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}
.panel{background:var(--surface);border:2px solid var(--border);border-radius:22px;
  padding:26px;box-shadow:0 3px 0 var(--border)}
.panel-title{display:flex;align-items:center;gap:10px}
.panel-title .ico{width:34px;height:34px;border-radius:10px;background:var(--cat)}
.panel-title h2{font-family:var(--font-head);font-weight:600;font-size:21px}
.opt-label{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--ink-soft);
  margin:24px 0 10px;text-transform:uppercase;letter-spacing:.5px}

/* Segmentierte Auswahl (Größe / Anzahl) */
.seg{display:flex;gap:8px}
.seg .opt{flex:1;text-align:center;font-family:var(--font-head);font-weight:600;font-size:15px;
  padding:11px 0;border-radius:12px;cursor:pointer;border:2px solid var(--border);
  background:var(--surface);color:var(--ink-soft);user-select:none}
.seg .opt[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
.seg .opt:hover:not([aria-pressed="true"]){color:var(--ink)}

/* Schwierigkeit (Liste mit Pips) */
.diff-list{display:flex;flex-direction:column;gap:8px}
.diff{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-radius:12px;cursor:pointer;border:2px solid var(--border);background:var(--surface);
  font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--ink);user-select:none}
.diff[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint)}
.diff .pips{display:flex;gap:4px}
.diff .pips i{width:9px;height:9px;border-radius:50%;background:#e8e2d6}
.diff[data-level="1"] .pips i:nth-child(-n+1),
.diff[data-level="2"] .pips i:nth-child(-n+2),
.diff[data-level="3"] .pips i:nth-child(-n+3){background:var(--accent)}

/* Checkbox */
.check{display:flex;align-items:center;gap:12px;margin-top:24px;cursor:pointer;user-select:none}
.check .box{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:16px;color:#fff;border:2px solid #cfc8ba;background:var(--surface)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check input:checked+.box{border-color:#22b8a6;background:#22b8a6}
.check input:checked+.box::after{content:"✓"}
.check input:focus-visible+.box{outline:3px solid var(--accent);outline-offset:2px}
.check .txt{font-weight:700;font-size:16px}

/* Vorschau-Karte */
.preview-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:12px;margin-bottom:22px}
.preview-head .t{font-family:var(--font-head);font-weight:600;font-size:20px}
.preview-head .sub{color:var(--ink-soft);font-size:14px;margin-top:2px}
.preview-stage{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:20px;
  background:var(--bg);border-radius:16px;overflow:auto}
.preview-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ── Sudoku-Board ──────────────────────────────────────────────────────── */
.sudoku{--cell:38px;display:grid;grid-template-columns:repeat(9,var(--cell));
  border:3px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.sudoku .c{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:600;font-size:calc(var(--cell)*.5);color:var(--ink);
  border-right:1px solid #d9d2c4;border-bottom:1px solid #d9d2c4;background:#fff}
.sudoku .c.given{color:var(--ink)}
.sudoku .c.blank{color:transparent}
.sudoku .c.sol{color:var(--accent)}       /* Lösungszahlen hervorgehoben */
.sudoku .c.br{border-right:2.5px solid var(--ink)}
.sudoku .c.bb{border-bottom:2.5px solid var(--ink)}
.sudoku .c.edge-r{border-right:0}
.sudoku .c.edge-b{border-bottom:0}
.sudoku.lg{--cell:clamp(30px,7.4vw,52px)}
.sudoku.sm{--cell:30px}

/* Kinder-Sudoku: kleine Gitter (4×4 / 6×6), gleiche Zell-Optik */
.sudoku.n4{grid-template-columns:repeat(4,var(--cell))}
.sudoku.n6{grid-template-columns:repeat(6,var(--cell))}
.sudoku .c.sym{font-size:calc(var(--cell)*.44)}
.ksd-legend{display:flex;gap:10px;justify-content:center}
.ksd-legend-item{font-size:20px}

/* Rätsel-Kachel in der Vorschau (Board + Untertitel) */
.puzzle-tile{display:flex;flex-direction:column;align-items:center;gap:10px}
.puzzle-tile .cap{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink-soft)}

/* ── Schwedenrätsel-Board ──────────────────────────────────────────────── */
.schweden{--sw-cell:54px;display:grid;grid-template-columns:repeat(var(--cols),var(--sw-cell));
  border:3px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--ink);width:max-content;max-width:100%}
.sw-cell{width:var(--sw-cell);height:var(--sw-cell);box-sizing:border-box;
  border:1px solid #cfc7b6;position:relative;overflow:hidden}
.sw-letter{background:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:600;font-size:calc(var(--sw-cell)*.5);color:var(--ink)}
/* Blindfelder: dezente Schraffur statt hartem Dunkel (Verlags-Look) */
.sw-block{background:repeating-linear-gradient(45deg,#ece4d4 0 4px,#ddd3bf 4px 8px)}
/* Bildfeld: Markenfeld in der groessten Blindflaeche */
.sw-pic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;
  background:var(--cat);border:1px solid #cfc7b6;padding:6%;text-align:center;overflow:hidden}
.sw-pic-logo{display:grid;grid-template-columns:1fr 1fr;gap:8%;width:34%;aspect-ratio:1;
  background:transparent}
.sw-pic-logo i{background:#fff;border-radius:18%}
.sw-pic-logo i:nth-child(2),.sw-pic-logo i:nth-child(3){background:rgba(255,255,255,.55)}
.sw-pic-txt{font-family:var(--font-head);font-weight:600;color:#fff;line-height:1.05;
  font-size:calc(var(--sw-cell)*.22);word-break:break-word;hyphens:manual}
.sw-pic-txt b{font-weight:700}
.sw-clue{background:#e9e0cf;display:flex;align-items:center;justify-content:center;padding:2px 3px}
.sw-qs{display:flex;flex-direction:column;gap:1px;width:100%;text-align:center;line-height:1}
.sw-q{font-family:var(--font-body);font-weight:700;font-size:calc(var(--sw-cell)*.148);
  line-height:1.02;color:var(--ink);letter-spacing:-.02em;word-break:break-word;hyphens:auto}
.sw-q+.sw-q{border-top:1px solid #cbbfa6;margin-top:1px;padding-top:1px}
.sw-arrow{position:absolute;color:var(--accent);font-size:calc(var(--sw-cell)*.2);line-height:1;pointer-events:none}
.sw-ar-right{right:0;top:50%;transform:translate(15%,-50%)}
.sw-ar-down{bottom:0;left:50%;transform:translate(-50%,15%)}
.schweden.sm{--sw-cell:40px}

/* ── Wortsuche ─────────────────────────────────────────────────────────── */
.ws-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%}
.wortsuche{--ws-cell:30px;display:grid;grid-template-columns:repeat(var(--cols),var(--ws-cell));
  border:3px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.ws-cell{width:var(--ws-cell);height:var(--ws-cell);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:600;font-size:calc(var(--ws-cell)*.5);color:var(--ink);
  border-right:1px solid #e5ddcb;border-bottom:1px solid #e5ddcb;text-transform:uppercase}
.ws-cell.ws-hit{background:var(--cat-soft);color:var(--cat);border-radius:2px}
.ws-words{width:100%;max-width:520px}
.ws-words-title{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;text-align:center}
.ws-words-list{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
.ws-word{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--border);border-radius:999px;padding:3px 12px}

/* ── Labyrinth ─────────────────────────────────────────────────────────── */
.labyrinth{width:min(100%,520px);height:auto;display:block}
.labyrinth .lab-walls line{stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.labyrinth .lab-start{fill:#22b8a6}
.labyrinth .lab-end{fill:var(--accent)}
.labyrinth .lab-path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;opacity:.85}

/* ── Kreuzworträtsel ───────────────────────────────────────────────────── */
.kwr-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:100%}
.kwr{--kwr-cell:32px;display:grid;grid-template-columns:repeat(var(--cols),var(--kwr-cell));
  border:3px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--ink);width:max-content;max-width:100%}
.kwr-cell{width:var(--kwr-cell);height:var(--kwr-cell);position:relative;background:#fff;
  border-right:1px solid #d9d2c4;border-bottom:1px solid #d9d2c4;display:flex;align-items:center;justify-content:center}
.kwr-block{background:var(--ink)}
.kwr-num{position:absolute;top:0;left:2px;font-family:var(--font-body);font-weight:700;
  font-size:calc(var(--kwr-cell)*.3);color:var(--ink-soft);line-height:1.1}
.kwr-ch{font-family:var(--font-head);font-weight:600;font-size:calc(var(--kwr-cell)*.5);color:var(--ink)}
.kwr-clues{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;width:100%;max-width:640px}
.kwr-clue-title{font-family:var(--font-head);font-weight:600;font-size:14px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--cat);margin-bottom:8px}
.kwr-clue-list{list-style:none;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.kwr-clue-list li{margin-bottom:3px}
.kwr-clue-list b{color:var(--ink);font-family:var(--font-head);font-weight:700;margin-right:3px}

/* ── Schul-Bereich (/lehrkraefte/) ─────────────────────────────────────── */
/* Name/Datum-Zeile (nur im Druck sichtbar, Vorschau zeigt sie dezent) */
.sch-name{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px;
  font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink-soft)}
.sch-name .line{flex:1;border-bottom:1.6px solid var(--border-strong);min-width:80px}
.sch-name .line.sm{flex:0 0 120px}

/* Rechendreieck (SVG) */
.sdr-wrap{width:min(100%,240px)}
.sdreieck{width:100%;height:auto;display:block}
.sdreieck .sdr-tri{fill:none;stroke:var(--ink);stroke-width:2.4}
.sdreieck .sdr-inner{fill:#fff;stroke:var(--ink);stroke-width:2}
.sdreieck .sdr-outer{fill:#fff;stroke:var(--ink);stroke-width:2}
.sdreieck .is-blank{fill:var(--cat-soft);stroke:var(--cat)}
.sdreieck .sdr-txt{font-family:var(--font-head);font-weight:600;font-size:17px;
  text-anchor:middle;fill:var(--ink)}
.sdreieck .sdr-txt.is-sol{fill:var(--cat)}
.sdr-sheet{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.sdr-one .cap{text-align:center;margin-bottom:4px}

/* Rechenkette */
.sket{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.sket-box{min-width:44px;height:40px;padding:0 8px;border:2.4px solid var(--ink);
  border-radius:10px;background:#fff;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--font-head);font-weight:700;font-size:17px}
.sket-box.is-blank{background:var(--cat-soft);border-color:var(--cat)}
.sket-box.is-sol{background:var(--cat-soft);border-color:var(--cat);color:var(--cat)}
.sket-arrow{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.sket-arrow i{font-style:normal;font-family:var(--font-head);font-weight:600;
  font-size:14px;color:var(--ink)}
.sket-arrow svg{width:34px;height:11px;color:var(--ink-faint)}
.sket-sheet{display:flex;flex-direction:column;gap:16px;width:100%;max-width:640px}
.sket-one .cap{margin-bottom:5px}

/* Magisches Quadrat */
.smq-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.smq-magic{font-family:var(--font-head);font-weight:600;font-size:15px;
  color:#fff;background:var(--cat);border-radius:999px;padding:5px 14px}
.smq{--smqc:52px;display:grid;border:3px solid var(--ink);border-radius:10px;
  overflow:hidden;background:#fff}
.smq.n3{grid-template-columns:repeat(3,var(--smqc))}
.smq.n4{grid-template-columns:repeat(4,var(--smqc))}
.smq-cell{width:var(--smqc);height:var(--smqc);display:flex;align-items:center;
  justify-content:center;border-right:1px solid #d9d2c4;border-bottom:1px solid #d9d2c4;
  font-family:var(--font-head);font-weight:600;font-size:calc(var(--smqc)*.36);background:#fff}
.smq-cell.is-blank{background:var(--cat-soft)}
.smq-cell.is-sol{color:var(--cat)}
.smq-sheet{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}

/* Einmaleins: Lückentabelle */
.semt{border-collapse:collapse;background:#fff}
.semt th,.semt td{border:1.6px solid var(--border-strong);width:44px;height:38px;
  text-align:center;font-family:var(--font-head);font-weight:600;font-size:15px}
.semt thead th,.semt tbody th{background:var(--cat-soft);color:var(--ink)}
.semt th.x{background:var(--cat);color:#fff;font-size:17px}
.semt td.is-blank{background:var(--bg)}
.semt td.is-sol{color:var(--cat)}

/* Einmaleins: Rechenrad (SVG) */
.semr-sheet{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.semr{width:min(100%,230px);height:auto;display:block}
.semr .semr-outer{fill:#fff;stroke:var(--ink);stroke-width:2.2}
.semr .semr-mid{fill:var(--bg);stroke:var(--ink);stroke-width:1.6}
.semr .semr-center{fill:var(--cat);stroke:var(--ink);stroke-width:2}
.semr .semr-spoke{stroke:#cfc8ba;stroke-width:1.2}
.semr .semr-f{font-family:var(--font-head);font-weight:600;font-size:13px;
  text-anchor:middle;fill:var(--ink)}
.semr .semr-f.is-sol{fill:var(--cat)}
.semr .semr-z{font-family:var(--font-head);font-weight:700;font-size:19px;
  text-anchor:middle;fill:#fff}

/* Lehrkräfte-Vorteilsliste */
.sch-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:26px 0 8px}
@media (max-width:900px){.sch-benefits{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sch-benefits{grid-template-columns:1fr}}

/* ── Logikrätsel ───────────────────────────────────────────────────────── */
.lgc{display:flex;flex-direction:column;gap:18px;width:100%;max-width:680px}
.lgc-intro{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0}
.lgc-clues{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:8px;
  font-size:15px;line-height:1.45;color:var(--ink)}
.lgc-clues li::marker{font-weight:700;color:var(--cat)}
.lgc-table{border-collapse:collapse;width:100%;background:var(--surface)}
.lgc-table th,.lgc-table td{border:2px solid var(--border-strong);padding:10px 13px;
  font-size:15px;text-align:left}
.lgc-table thead th{font-family:var(--font-head);font-weight:600;background:var(--cat-soft)}
.lgc-table tbody th{font-family:var(--font-head);font-weight:600;background:var(--bg)}
.lgc-table td{height:40px;font-weight:700;color:var(--cat)}

/* ── Silbenrätsel ──────────────────────────────────────────────────────── */
.slb{display:flex;flex-direction:column;gap:18px;width:100%;max-width:680px}
.slb-pool{background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:14px 18px}
.slb-pool-list{font-family:var(--font-head);font-weight:600;font-size:15px;line-height:1.75;
  color:var(--ink);margin:6px 0 0}
.slb-qs{display:flex;flex-direction:column;gap:12px}
.slb-q{display:flex;flex-direction:column;gap:6px}
.slb-q-text{font-size:15px;color:var(--ink);line-height:1.4}
.slb-q-meta{color:var(--ink-faint);font-size:13px}
.slb-boxes{display:inline-flex;gap:4px;flex-wrap:wrap}
.slb-box{width:27px;height:27px;border:2px solid var(--ink);border-radius:7px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink)}
.slb-box.is-first{background:var(--cat-soft);border-color:var(--cat);color:var(--cat)}
.slb-sol{font-size:15px;background:var(--surface);border:2px solid var(--border);
  border-radius:14px;padding:12px 16px;line-height:1.5}

/* ── Nonogramm ─────────────────────────────────────────────────────────── */
.ngm{--ngm-cell:22px;display:grid;grid-template-columns:auto repeat(var(--cols),var(--ngm-cell));
  width:max-content;max-width:100%;background:#fff;border:3px solid var(--ink);
  border-radius:10px;padding:8px;overflow:auto}
.ngm-corner{border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
.ngm-colclue{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:1px;padding:4px 0 3px;border-bottom:2.5px solid var(--ink);
  font-family:var(--font-head);font-weight:600;font-size:calc(var(--ngm-cell)*.42);
  color:var(--ink);line-height:1.15}
.ngm-rowclue{display:flex;justify-content:flex-end;align-items:center;gap:5px;
  height:var(--ngm-cell);padding:0 7px 0 5px;border-right:2.5px solid var(--ink);
  font-family:var(--font-head);font-weight:600;font-size:calc(var(--ngm-cell)*.42);
  color:var(--ink);line-height:1}
.ngm-cell{width:var(--ngm-cell);height:var(--ngm-cell);background:#fff;
  border-right:1px solid #e5ddcb;border-bottom:1px solid #e5ddcb}
.ngm-cell.fill{background:var(--ink)}
.ngm-cell.b5,.ngm-colclue.b5{border-right:1.8px solid var(--ink-faint)}
.ngm-cell.b5r,.ngm-rowclue.b5r{border-bottom:1.8px solid var(--ink-faint)}

/* ── Gitterrätsel (nutzt .kwr-Gitter + .ws-words-Liste) ────────────────── */
.gtr-anchor{color:var(--cat)}
.gtr-words{max-width:640px}
.gtr-len-row{display:flex;gap:10px;align-items:baseline;margin-bottom:7px;flex-wrap:wrap}
.gtr-len-label{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink-soft);white-space:nowrap}
.gtr-len-words{display:inline-flex;flex-wrap:wrap;gap:6px 10px;justify-content:flex-start;width:auto}
.gtr-done{text-decoration:line-through;color:var(--ink-faint)}

/* ── Zahlenrätsel: Rechenpyramide ──────────────────────────────────────── */
.zpy{--zc:56px;display:flex;flex-direction:column;align-items:center;gap:8px}
.zpy-row{display:flex;gap:8px}
.zpy-cell{width:var(--zc);height:var(--zc);border:2.5px solid var(--ink);border-radius:12px;
  display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);
  font-family:var(--font-head);font-weight:700;font-size:calc(var(--zc)*.4)}
.zpy-cell.zpy-blank{background:var(--cat-soft);border-color:var(--cat);color:var(--cat)}

/* ── Malen nach Zahlen (Punkt-zu-Punkt, Multi-Segment mit ★) ───────────── */
.malen{width:min(100%,420px);height:auto;display:block;margin:0 auto;
  border:2px solid var(--ink);border-radius:10px;background:#fff}
.malen .malen-dot{fill:var(--ink)}
.malen .malen-dot.is-start{fill:var(--cat)}
.malen .malen-dot.is-one{fill:var(--cat);stroke:var(--ink);stroke-width:.5}
.malen .malen-num{fill:var(--ink);font-family:var(--font-head);font-weight:700;
  font-size:3.6px;text-anchor:middle}
.malen.is-dense .malen-num{font-size:2.9px;font-weight:600}
.malen.is-xdense .malen-num{font-size:2.5px}
.malen .malen-line{fill:var(--cat-soft);fill-opacity:.5;stroke:var(--cat);
  stroke-width:1;stroke-linejoin:round}
.malen .malen-line.is-open{fill:none}

/* ── Druckbogen (Bildschirm-Darstellung) ──────────────────────────────── */
.sheet-wrap{display:flex;justify-content:center}
.sheet{width:640px;max-width:100%;background:#fff;border-radius:6px;
  box-shadow:0 20px 60px rgba(43,36,64,.16);padding:clamp(28px,5vw,56px) clamp(24px,5vw,54px);
  display:flex;flex-direction:column;min-height:0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--ink);padding-bottom:14px}
.sheet-head .who{display:flex;align-items:center;gap:9px}
.sheet-head .who .m{width:26px;height:26px;border-radius:7px;background:var(--accent)}
.sheet-head .who span{font-family:var(--font-head);font-weight:700;font-size:17px}
.sheet-head .meta{color:var(--ink-soft);font-weight:700;font-size:14px}
.sheet h2.sheet-title{font-family:var(--font-head);font-weight:700;font-size:30px;
  text-align:center;margin-top:34px}
.sheet .sheet-sub{text-align:center;color:var(--ink-soft);font-size:14px;margin-top:4px}
.sheet .sheet-boards{display:grid;gap:26px;justify-items:center;margin-top:30px}
.sheet .sheet-boards.n2{grid-template-columns:1fr}
.sheet .sheet-boards.n4{grid-template-columns:1fr 1fr}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;
  padding-top:30px;color:var(--ink-faint);font-size:12px;font-weight:700}

/* ── FAQ / Content ─────────────────────────────────────────────────────── */
.prose{max-width:720px}
.prose p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 14px}
.prose h2{font-size:26px;margin:32px 0 12px}
.prose h3{font-size:19px;margin:22px 0 8px}
.prose strong{color:var(--ink)}
.faq{border-top:2px solid var(--border);margin-top:8px}
.faq details{border-bottom:1px solid var(--border);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;padding:16px 0;font-family:var(--font-head);
  font-weight:600;font-size:17px;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--accent);font-weight:700;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px;color:var(--ink-soft);font-size:15.5px;line-height:1.6}

/* — Vorlagen-Grid (Landingpages) — */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.tpl-card{background:var(--surface);border:2px solid var(--border);border-radius:20px;
  padding:22px;box-shadow:0 3px 0 var(--border);text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:8px;transition:transform .15s ease,box-shadow .15s ease}
.tpl-card:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 10px 26px rgba(43,36,64,.12)}
.tpl-card .tag{align-self:flex-start;font-family:var(--font-head);font-weight:600;font-size:12px;
  padding:4px 11px;border-radius:999px;background:var(--cat-soft);color:var(--cat)}
.tpl-card h3{font-family:var(--font-head);font-weight:600;font-size:19px}
.tpl-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.45;flex:1}
.tpl-card .go{font-family:var(--font-head);font-weight:600;color:var(--cat)}

/* — Affiliate-Werbebox (assets/affiliate.js) — Bild-Panel + CTA — */
.affil{display:grid;grid-template-columns:200px 1fr;overflow:hidden;
  margin:clamp(24px,3vw,36px) 0;background:var(--surface);
  border:2px solid var(--border);border-radius:22px;box-shadow:0 3px 0 var(--border)}
.affil-media{background:var(--cat);color:var(--cat);display:flex;align-items:center;
  justify-content:center;padding:20px;min-height:180px}
.affil-media svg{width:100%;max-width:150px;height:auto}
.affil-body{padding:clamp(20px,2.4vw,28px)}
.affil-kicker{display:block;font-family:var(--font-head);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.7px;color:var(--cat)}
.affil-body h3{font-family:var(--font-head);font-weight:700;font-size:clamp(20px,2.4vw,23px);
  letter-spacing:-.02em;line-height:1.12;margin:8px 0 7px;color:var(--ink)}
.affil-body p{color:var(--ink-soft);font-size:15px;line-height:1.5;margin:0;max-width:54ch}
.affil-cta{margin-top:16px;color:#fff;background:var(--cat);box-shadow:0 4px 0 var(--cat-shadow)}
.affil-cta:hover{color:#fff;filter:brightness(1.04)}
.affil-body p.affil-more{font-size:13px;color:var(--ink-soft);margin:14px 0 0}
.affil-more-link{color:var(--cat);font-weight:700;text-decoration:none}
.affil-more-link:hover{text-decoration:underline;text-underline-offset:2px}
.affil-body p.affil-disc{font-size:11.5px;color:var(--ink-faint);margin:12px 0 0}
@media (max-width:560px){
  .affil{grid-template-columns:1fr}
  .affil-media{min-height:130px}
  .affil-media svg{max-width:120px}
}

/* — Callout — */
.callout{margin:22px 0;padding:16px 20px;border:2px solid var(--accent);border-radius:16px;
  background:var(--accent-tint);font-size:15.5px;line-height:1.55}
.callout strong{color:var(--ink)}

/* — Rechtstexte — */
.legal{max-width:720px;padding:8px 0 40px}
.legal h1{font-size:34px;margin-bottom:18px}
.legal h2{font-size:20px;margin:26px 0 8px}
.legal p{color:var(--ink-soft);line-height:1.65;margin:0 0 12px}
.legal address{font-style:normal;color:var(--ink-soft)}

/* — Utility — */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.hide{display:none !important}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .gen-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero{padding:44px 0 28px}
  .card-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .cta-band{padding:40px 24px}
  .nav a{padding:8px 12px}
  .sheet .sheet-boards.n4{grid-template-columns:1fr}
}