/* 404: HTML5-Puzzle (kaputte Startseite wieder zusammenbauen) + Popups */
.fehler404{position:relative;background:#eef4f8;padding:clamp(2rem,4vw,3.5rem) 0}
.fehler-raster{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:2rem;align-items:start}
.fehler-karte{padding:clamp(1.3rem,3vw,2rem);border-radius:1.4rem;background:rgba(255,255,255,.96);box-shadow:0 1.4rem 3rem rgba(7,30,50,.16)}
.fehler-karte h1{margin:.2rem 0 .6rem;font:700 clamp(2.2rem,4.4vw,3.2rem)/1 "Barlow Condensed",sans-serif;color:#111820}
.fehler-karte h1 span{color:#0a5c92}
.fehler-links{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0}
.fehler-spiel-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin:.2rem 0 .6rem}
.fehler-spiel-knoepfe [hidden]{display:none}
.fehler-status{min-height:3.2em;margin:.2rem 0 .8rem;font-weight:700;color:#073f69}
.fehler-gruss{display:flex;align-items:center;gap:.9rem;margin:1rem 0 0;color:#33424d}
.fehler-gruss img{display:block;height:auto}

/* Spielfeld: feste logische Größe 900 × 1290, per Skript auf die Spaltenbreite skaliert */
.puzzle-rahmen{position:relative;width:100%;overflow:hidden;border-radius:1.2rem}
.puzzle-buehne{position:relative;width:900px;height:1290px;transform-origin:0 0;touch-action:none}
.pz-board{position:absolute;left:0;top:0;width:900px;height:710px;border-radius:14px;background:#fff;border:1px solid #cdd9e2;box-shadow:0 1rem 2.4rem rgba(7,30,50,.14)}
.pz-kiste{position:absolute;left:0;top:726px;width:900px;height:564px;padding:12px 18px;border-radius:14px;background:repeating-linear-gradient(135deg,#e6eef4 0 14px,#edf3f8 14px 28px);border:2px dashed #b9c9d6;color:#6a8296;font:800 .9rem Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-align:right}
.pz-slots{position:absolute;inset:0;pointer-events:none}
.pz-slot{position:absolute;box-sizing:border-box;border:2px dashed rgba(10,92,146,.45);border-radius:10px;background:rgba(33,185,239,.06)}
.pz-slot[hidden]{display:none}
.pz-el{position:absolute;box-sizing:border-box;display:block;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:left .7s cubic-bezier(.3,1.2,.5,1),top .7s cubic-bezier(.3,1.2,.5,1),transform .5s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.pz-el.zieht{cursor:grabbing;transition:none;box-shadow:0 18px 34px rgba(7,30,50,.35)!important}
.pz-el.platziert{cursor:help}
.pz-el.rastet{animation:pzRastet .45s ease}
.pz-el.nope{animation:pzNope .4s ease}
@keyframes pzRastet{0%{filter:brightness(1.3)}60%{transform:scale(1.03)}100%{filter:none}}
@keyframes pzNope{0%,100%{translate:0 0}25%{translate:-8px 0}75%{translate:8px 0}}
.pz-el:not(.platziert){box-shadow:0 8px 18px rgba(7,30,50,.22)}

/* Rahmen-Elemente (durchsichtig, farbig) */
.t-header{background:rgba(33,185,239,.16);border:2px solid rgba(10,109,181,.65);border-radius:12px}
.t-main{background:rgba(31,157,85,.09);border:2px solid rgba(31,157,85,.55);border-radius:14px}
.t-section{background:rgba(139,92,246,.10);border:2px solid rgba(124,58,237,.6);border-radius:14px}
.t-article{border-width:2px;border-style:solid;border-radius:12px}
.t-article.k0{background:rgba(33,185,239,.16);border-color:#21b9ef}
.t-article.k1{background:rgba(216,189,120,.26);border-color:#d8bd78}
.t-article.k2{background:rgba(252,235,193,.55);border-color:#e8cf8b}
.t-figure{display:grid;grid-template-rows:1fr auto;border-radius:12px;background:#fff;border:2px solid #cdd9e2;overflow:hidden}
.t-figure.k0{border-color:#21b9ef}.t-figure.k1{border-color:#d8bd78}.t-figure.k2{border-color:#e8cf8b}
.pz-fig-bild{height:168px;margin:10px 10px 0;border-radius:8px;border:2px dashed #c3d0da;background:#f4f8fb}
.t-figure figcaption{padding:.6rem .7rem .7rem;font:800 .92rem/1.2 Inter,sans-serif;color:#111820}
.t-img{border-radius:8px}
.t-img.k0{background:linear-gradient(135deg,#21b9ef,#0a5c92)}
.t-img.k1{background:linear-gradient(135deg,#e1c56e,#84744e)}
.t-img.k2{background:linear-gradient(135deg,#fcebc1,#d8bd78)}
.t-i0,.t-i1,.t-i2{box-shadow:0 6px 14px rgba(7,30,50,.25)}
.t-logo{display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid #cdd9e2;overflow:hidden}.t-logo img{display:block;width:100%;height:100%;object-fit:contain}
.t-nav{display:flex;align-items:center;justify-content:space-around;border-radius:50rem;background:#000;color:#fff;font:700 .9rem Inter,sans-serif}
.t-a{display:grid;place-items:center;border-radius:50rem;background:#d8bd78;color:#201a0c;font:800 .95rem Inter,sans-serif;text-decoration:underline}
.t-h1{display:grid;place-items:center;border-radius:12px;background:#fff8e6;border:1px solid #d8bd78;font:800 3.4rem/1 "Barlow Condensed",sans-serif;color:#0a5c92}
.t-h2{display:flex;align-items:center;padding:.4rem 1rem;border-radius:12px;background:linear-gradient(125deg,#031f34,#0a5c92);color:#fff;font:700 1.55rem/1 "Barlow Condensed",sans-serif}
.t-p{display:flex;align-items:center;padding:0 .8rem;border-radius:8px;background:#fff;border:1px solid #cdd9e2;font:600 .85rem Inter,sans-serif;color:#33424d;white-space:nowrap;overflow:hidden}
.t-aside{display:grid;place-content:center;gap:.2rem;text-align:center;border-radius:12px;background:linear-gradient(135deg,#ff8a3d,#e8456b 55%,#8e2ea8);color:#fff}
.t-aside b{font:800 2.2rem/1 "Barlow Condensed",sans-serif;letter-spacing:.04em}.t-aside small{font-weight:700;opacity:.85;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.t-address{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-radius:12px;background:#fff;border:1px solid #cdd9e2;font:600 .85rem/1.35 Inter,sans-serif;color:#111820;font-style:normal}
.t-address i{flex:none;font-size:2rem;color:#d8451f}
.t-footer{display:flex;align-items:center;gap:1.2rem;padding:0 1.6rem;border-radius:14px;background:linear-gradient(120deg,#031f34,#06263e);color:#fff}
.pz-fuss-logo{height:76px;width:auto;flex:none}
.pz-fuss-text{flex:1;display:grid;font:600 .95rem Inter,sans-serif;opacity:.95}.pz-fuss-text b{font:700 1.6rem/1 "Barlow Condensed",sans-serif}
.pz-fuss-eu{height:60px;width:auto;border-radius:6px;flex:none}
.t-el *,.pz-el *{pointer-events:none}
.pz-el figcaption{pointer-events:auto}

/* Hover-Info */
.pz-tip{position:fixed;z-index:2300;max-width:19rem;padding:.7rem .9rem;border-radius:.9rem;background:#06263e;color:#fff;box-shadow:0 .8rem 2rem rgba(0,0,0,.4);pointer-events:none;font:500 .88rem/1.35 Inter,sans-serif}
.pz-tip[hidden]{display:none}
.pz-tip b{font-family:ui-monospace,Consolas,monospace;font-size:1rem;color:#7fd8ff}
.pz-tip p{margin:.3rem 0 0}
.pz-badge,.h5-badge{display:inline-block;padding:.12rem .5rem;border-radius:50rem;font:800 .68rem Inter,sans-serif;letter-spacing:.06em;vertical-align:middle}
.pz-badge.neu,.h5-badge.neu{background:#1f9d55;color:#fff}
.pz-badge.alt,.h5-badge.alt{background:#d8bd78;color:#201a0c}

/* Popups */
.fehler-popup{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;padding:1rem;background:rgba(4,17,28,.58);backdrop-filter:blur(2px)}
.fehler-popup[hidden]{display:none}
.fehler-popup-karte{max-width:30rem;padding:1.8rem 1.8rem 1.6rem;border-radius:1.5rem;background:#fff;text-align:center;box-shadow:0 2rem 4rem rgba(0,0,0,.4);animation:popIn .45s cubic-bezier(.3,1.5,.5,1)}
.fehler-popup-karte h2{margin:.2rem 0 .6rem;font:700 clamp(1.9rem,5vw,2.6rem)/1.05 "Barlow Condensed",sans-serif;color:#b3261e}
.fehler-popup-karte p{margin:.3rem 0 1.1rem;font-size:1.05rem}
@keyframes popIn{from{transform:scale(.7) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.h5-karte{max-width:56rem;width:100%;max-height:calc(100dvh - 2rem);overflow:auto;text-align:left;padding:1.4rem 1.6rem 1.6rem}
.h5-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:sticky;top:-1.4rem;margin:-1.4rem -1.6rem .6rem;padding:1rem 1.6rem;background:#fff;border-bottom:1px solid #e3ebf1;z-index:2}
.h5-karte h2{margin:0;color:#073f69}
.h5-zu{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid #cdd9e2;border-radius:50%;background:#fff;cursor:pointer}
.h5-intro{font-size:1rem;line-height:1.6}
.h5-karte code{font-family:ui-monospace,Consolas,monospace}
.h5-geruest{margin:1rem 0;padding:1rem 1.2rem;border-radius:.9rem;background:#06263e;color:#d6ecff;font-size:.82rem;line-height:1.5;overflow:auto}
.h5-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:.9rem;margin-top:1rem}
.h5-info{padding:1rem 1.1rem;border:1px solid #dbe6ee;border-radius:1rem;background:#f8fbfd}
.h5-info h3{margin:0 0 .4rem;font:700 1.2rem/1.2 "Barlow Condensed",sans-serif;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.h5-info h3 code{font-size:1.15rem;color:#0a5c92}.h5-info h3 small{font:600 .8rem Inter,sans-serif;color:#4a6272}
.h5-info p{margin:.2rem 0 .6rem;font-size:.92rem;line-height:1.5}
.h5-info pre{margin:0;padding:.6rem .8rem;border-radius:.6rem;background:#06263e;color:#d6ecff;font-size:.78rem;line-height:1.45;overflow:auto}
@media(max-width:991.98px){.fehler-raster{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pz-el{transition:none}.fehler-popup-karte{animation:none}.pz-el.rastet,.pz-el.nope{animation:none}}
html.a11y-ruhe .pz-el{transition:none}
.h5-intro code,.h5-info h3 code{color:#0a5c92}
.h5-karte pre code{color:inherit;font-size:inherit}