:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#e9f0fa;background:#101a2b}*{box-sizing:border-box}body{margin:0}header{background:#17253b;padding:16px max(20px,calc((100vw - 1150px)/2));display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}a{color:#78d4f8}nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}nav a{color:#e9f0fa;text-decoration:none}.logo{font-size:23px;font-weight:800;text-decoration:none;color:white}main{max-width:1150px;margin:35px auto;min-height:65vh;padding:0 20px}.narrow{max-width:540px;margin:35px auto}.hero{background:linear-gradient(125deg,#1e4667,#1a2944);padding:45px 35px;border-radius:20px}.hero h1{font-size:clamp(30px,5vw,50px);margin:0}.hero p{font-size:18px}.button,button{display:inline-block;background:#28a9cc;border:0;border-radius:9px;padding:11px 16px;color:#071b27;text-decoration:none;font-weight:700;cursor:pointer}button:disabled{opacity:.4}nav button{padding:7px 12px}nav form{margin:0}.panel{display:grid;gap:18px;background:#1b2a42;padding:25px;border-radius:15px}label{display:grid;gap:7px}input,select{background:#101a2b;color:#fff;border:1px solid #65778e;border-radius:7px;padding:11px;width:100%;font:inherit}input[type=file]{padding:10px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:20px}.card{background:#1b2a42;border-radius:15px;overflow:hidden;padding-bottom:18px}.card img,.placeholder{width:100%;height:175px;object-fit:cover;background:#2c3d52;display:grid;place-items:center}.card h3,.card p,.card form,.card .button{margin-left:16px;margin-right:16px}.card form button{margin-top:7px}.error{padding:15px;background:#642e36;border-radius:8px}.notice{padding:15px;background:#275b52;border-radius:8px}.toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:15px}.toolbar select{width:130px}.puzzle-wrap{width:100%;overflow:auto;background:#0c1422;border:1px solid #33465e;border-radius:12px}canvas{display:block;touch-action:none;max-width:none}footer{text-align:center;padding:35px;color:#93a9bd}@media(max-width:600px){header{padding:15px}nav{gap:10px}.hero{padding:28px 18px}}

.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin:20px 0 35px}.category-tile{padding:20px 14px;border-radius:13px;background:#1b2a42;color:#e9f0fa;text-decoration:none;border:1px solid #354e69;font-weight:650}.category-tile:hover,.category-tile.active{background:#22546a;border-color:#4dd0ec}.category-admin{margin-top:20px;display:grid;gap:10px}.category-edit{display:flex;gap:12px;flex-wrap:wrap;padding:12px;background:#1b2a42;border-radius:10px}.category-edit form{display:flex;gap:10px;align-items:center;flex:1}.category-edit input{min-width:150px}.card label{margin:12px 16px}.card form select{margin-bottom:8px}

/* PuzzleWelt Galerie-Dropdown: ersetzt die bisherige Kategorie-Linkliste */
.gallery-filters{margin:26px 0 24px;padding:25px;border:1px solid #344c69;border-radius:18px;background:linear-gradient(135deg,#1b304c,#18273f)}
.gallery-filters-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:20px}
.gallery-filters-heading h2{margin:0 0 6px;font-size:clamp(21px,3vw,28px)}
.gallery-filters-heading p{margin:0;color:#b7c8dd;font-size:15px}
.gallery-count{padding:8px 13px;background:#263e5a;border-radius:999px;color:#c7e9f8;font-size:13px;font-weight:700}
.gallery-filter-form{max-width:520px}.gallery-filter-form label{font-weight:700;font-size:14px;margin-bottom:8px}
.gallery-filter-controls{display:flex;gap:10px;align-items:stretch}
.gallery-filter-controls select{min-width:0;flex:1;border:1px solid #587a9b;border-radius:10px;background:#0f2035;color:#f1f7ff;padding:13px 14px;cursor:pointer}
.gallery-filter-controls select:focus-visible,.gallery-filter-controls button:focus-visible{outline:3px solid #7ce1f8;outline-offset:2px}
.gallery-filter-controls button{white-space:nowrap}.gallery-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.gallery-title h2{margin:0}.gallery-reset{font-size:14px}
@media(max-width:520px){.gallery-filters{padding:18px}.gallery-filter-controls{flex-direction:column}.gallery-filter-controls button{width:100%}}


/* PuzzleWelt Motivhintergrund: reine Gestaltung, keine PHP/JS-Aenderungen */
html{background:#0b172b}
body{background:#0b172b;min-height:100vh;position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,rgba(8,19,35,.12),rgba(8,19,35,.58) 29%,rgba(8,19,35,.58) 71%,rgba(8,19,35,.12)),url("puzzlewelt-motive.webp");background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:1}
header{background:rgba(14,30,54,.94);border-bottom:1px solid rgba(154,211,247,.2);backdrop-filter:blur(8px)}
.hero{background:linear-gradient(120deg,rgba(28,69,105,.96),rgba(22,39,72,.96));border:1px solid rgba(159,211,255,.25);box-shadow:0 18px 52px rgba(0,0,0,.3)}
.panel,.card,.gallery-filters,.category-tile{background-color:rgba(23,41,67,.96);box-shadow:0 12px 35px rgba(0,0,0,.28);border:1px solid rgba(142,197,238,.18)}
.panel{backdrop-filter:blur(7px)}
.card{overflow:hidden}
@media(max-width:800px){body::before{background-image:linear-gradient(rgba(8,19,35,.72),rgba(8,19,35,.8)),url("puzzlewelt-motive.webp");background-position:center}}

/* PuzzleWelt: farbenfrohes Motivdesign nach der gewuenschten Vorlage */
:root{color:#172945;background:#0b172b}
body{color:#f5f8ff;background:#0b172b}
body::before{background-image:url('puzzlewelt-motive.webp');background-size:cover;background-position:center center;opacity:1}
header{position:relative;z-index:2;background:linear-gradient(90deg,rgba(9,50,112,.93),rgba(10,76,150,.86));border-bottom:1px solid rgba(255,255,255,.4);box-shadow:0 4px 18px #071c3d55;min-height:76px}
.logo{font-size:clamp(24px,3vw,32px);font-weight:900;text-shadow:0 2px 5px #102b6a80}
nav a{font-weight:750;padding:10px 14px;border-radius:13px;background:rgba(10,44,93,.7);border:1px solid rgba(200,225,255,.32)}
nav a:hover{background:#ffdc87;color:#10294b}
main{position:relative;z-index:1;margin-top:32px}
.hero,.gallery-filters,.panel,.card,.category-tile{background:linear-gradient(145deg,rgba(245,249,255,.96),rgba(232,241,255,.92));color:#172b49;border:1px solid rgba(255,255,255,.88);box-shadow:0 18px 48px #09254e70;backdrop-filter:blur(12px)}
.hero{padding:38px 38px;border-radius:26px;text-align:center}
.hero h1{color:#14396b;text-shadow:none}
.hero p,.gallery-filters-heading p{color:#3a5474}
.hero .button{margin-top:8px}
.gallery-filters{border-radius:22px}
.gallery-filters-heading h2,.gallery-title h2{color:#173c70}
.gallery-count{background:#dceafe;color:#174070}
.gallery-filter-controls select,.panel input,.panel select{background:#fff;color:#183350;border:1px solid #a8bddb}
.panel input:focus,.panel select:focus{outline:3px solid #7bbefb;outline-offset:1px}
.panel label{font-weight:700;color:#1b3558}
.panel{border-radius:24px;padding:30px}
.narrow{max-width:650px;margin:28px auto 60px}
.narrow>h1{text-align:center;font-size:clamp(30px,4vw,43px);font-weight:900;color:#fff;text-shadow:0 3px 12px #061a3b}
.narrow .panel{gap:20px}
.narrow .panel button{width:100%;font-size:18px;padding:15px}
.button,button{background:linear-gradient(110deg,#16a8db,#1253c5);color:#fff;border-radius:12px;box-shadow:0 5px 12px #102d6630}
.button:hover,button:hover{filter:brightness(1.07)}
.card{border-radius:20px}
.card h3,.card p,.card label{color:#173252}
.card a:not(.button){color:#0a66bd}
.gallery-title{padding:9px 16px;background:rgba(9,32,67,.72);border-radius:13px}
.gallery-title h2{color:#fff}
footer{color:#eef4ff;text-shadow:0 1px 6px #07192b}
@media(max-width:850px){body::before{background-image:linear-gradient(rgba(7,24,48,.22),rgba(7,24,48,.25)),url('puzzlewelt-motive.webp');background-position:center center}main{margin-top:20px}.hero{padding:30px 22px}}
@media(max-width:600px){body::before{background-image:linear-gradient(rgba(9,29,55,.55),rgba(9,29,55,.65)),url('puzzlewelt-motive.webp');background-position:center center}.narrow .panel{padding:20px}.hero{border-radius:18px}header{padding:13px 18px}}

/* PuzzleWelt V3 – hochwertige, barrierearme Formularfelder */
.panel label,.gallery-filter-form label{font-size:14px;font-weight:750;letter-spacing:.01em;line-height:1.45;color:#193b65}
.panel input:not([type="checkbox"]):not([type="radio"]),.panel select,.panel textarea,.gallery-filter-controls select,.category-edit input,.category-edit select{
  width:100%;min-height:51px;padding:13px 16px;border-radius:14px;
  background:linear-gradient(180deg,#fff,#f5f9ff);color:#163354;
  border:1.5px solid #b5c9e5;box-shadow:0 2px 6px rgba(21,59,110,.06),inset 0 1px 2px rgba(17,46,84,.03);
  font:inherit;font-size:16px;line-height:1.35;transition:border-color .18s,box-shadow .18s,background .18s;
}
.panel textarea{min-height:110px;resize:vertical}
.panel input::placeholder,.panel textarea::placeholder{color:#7185a0;opacity:1}
.panel input:not([type="checkbox"]):not([type="radio"]):hover,.panel select:hover,.panel textarea:hover,.gallery-filter-controls select:hover{border-color:#77a6d8}
.panel input:not([type="checkbox"]):not([type="radio"]):focus,.panel select:focus,.panel textarea:focus,.gallery-filter-controls select:focus,.category-edit input:focus,.category-edit select:focus{
  outline:0;border-color:#187acb;background:#fff;box-shadow:0 0 0 4px rgba(43,153,233,.2),0 5px 18px rgba(20,75,135,.1)
}
.panel input:disabled,.panel select:disabled,.panel textarea:disabled{background:#e8eef6;color:#6c7e94;cursor:not-allowed}
.panel input[type="file"]{padding:10px 12px;cursor:pointer}
.panel input[type="file"]::file-selector-button{background:#e3efff;color:#174879;border:1px solid #c2d8f2;border-radius:9px;padding:8px 12px;margin-right:12px;font-weight:700;cursor:pointer}
.panel input[type="checkbox"],.panel input[type="radio"]{width:auto;accent-color:#1269c8}
.panel select,.gallery-filter-controls select{cursor:pointer;padding-right:34px}
.panel input:-webkit-autofill{-webkit-text-fill-color:#163354;box-shadow:0 0 0 1000px #f5f9ff inset}
.panel .button,.panel button{border-radius:14px;min-height:49px;transition:filter .15s,transform .15s,box-shadow .15s}
.panel button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,68,150,.22)}
.panel button:focus-visible,.panel .button:focus-visible{outline:3px solid #ffca58;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.panel input,.panel select,.panel textarea,.panel button{transition:none}.panel button:hover{transform:none}}
@media(max-width:600px){.panel input:not([type="checkbox"]):not([type="radio"]),.panel select,.panel textarea{min-height:49px;padding:12px 14px}}

/* PuzzleWelt: Spieluhr hat eine feste Breite – Speicherbutton bleibt stehen. */
#pw-timer {
  display: inline-block;
  flex: 0 0 145px;
  width: 145px;
  min-width: 145px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  text-align: left;
}