/* Freiwilliges 404-Puzzle. Grundmotiv bleibt ohne JavaScript sichtbar. */
.mit-404 {min-height:72vh;}
.mit-404 .mit-404-layout {display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:clamp(32px,5vw,80px);padding-block:clamp(48px,7vw,100px);}
.mit-404 .mit-404-copy {display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
.mit-404 .mit-404-copy h1 {font-size:clamp(40px,4.5vw,66px);line-height:1.06;letter-spacing:-.055em;}
.mit-404 .mit-404-copy .mit-lead {max-width:470px;}
.mit-404 .mit-404-note {font-size:14px;color:#6B6B6B;max-width:390px;border-top:1px solid var(--mit-border);padding-top:20px;margin-top:8px;}
.mit-404 .mit-404-puzzle {position:relative;min-width:0;width:100%;max-width:570px;justify-self:center;}
.mit-404 .mit-puzzle-image {position:relative;}
.mit-404 .mit-puzzle-image img {width:100%;aspect-ratio:1;object-fit:contain;}
.mit-404 .mit-puzzle-caption {font-size:14px;text-align:center;color:#6B6B6B;margin-top:16px;}
.mit-404 .mit-puzzle-ui {display:flex;flex-direction:column;align-items:center;gap:16px;}
.mit-404 .mit-puzzle-board {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;aspect-ratio:1;width:100%;padding:5px;border:1px solid var(--mit-border);border-radius:8px;background:#F4F4F2;transition:gap .35s,padding .35s,border-color .35s;}
.mit-404 .mit-puzzle-tile {position:relative;min-width:0;min-height:0;border:0;padding:0;border-radius:3px;background-color:#fff;background-repeat:no-repeat;background-size:300% 200%;cursor:pointer;appearance:none;touch-action:manipulation;transition:box-shadow .18s,transform .18s;box-shadow:0 1px 3px #00000012;}
.mit-404 .mit-puzzle-tile:hover {box-shadow:inset 0 0 0 2px #6B6B6B;}
.mit-404 .mit-puzzle-tile[aria-pressed="true"] {z-index:1;box-shadow:inset 0 0 0 4px #C62A1B;transform:scale(.94);}
.mit-404 .mit-puzzle-tile:focus-visible {z-index:2;outline:3px solid #C62A1B;outline-offset:2px;}
.mit-404 .mit-puzzle-board.is-solved {gap:0;padding:0;border-color:transparent;background:#fff;}
.mit-404 .is-solved .mit-puzzle-tile {border-radius:0;box-shadow:none;cursor:default;}
.mit-404 .mit-puzzle-controls {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;}
.mit-404 .mit-puzzle-button {font:inherit;font-size:14px;font-weight:650;line-height:1.3;min-height:44px;border:1px solid #C4C4C4;border-radius:3px;background:#fff;color:#000;padding:12px 16px;cursor:pointer;transition:background .2s;}
.mit-404 .mit-puzzle-button:hover {background:#F4F4F2;}
.mit-404 .mit-puzzle-button.is-primary {background:#C62A1B;border-color:#C62A1B;color:#fff;}
.mit-404 .mit-puzzle-button.is-primary:hover {background:#840404;border-color:#840404;}
.mit-404 .mit-puzzle-button.is-quiet {border-color:transparent;text-decoration:underline;text-underline-offset:4px;font-weight:450;}
.mit-404 .mit-puzzle-status {max-width:440px;font-size:14px;line-height:1.6;text-align:center;min-height:3.2em;margin:0;}
.mit-404 .mit-puzzle-reference {width:180px;max-width:60%;border:1px solid #C4C4C4;border-radius:3px;overflow:hidden;}
.mit-404 .mit-puzzle-reference img {display:block;width:100%;height:auto;}
.mit-404 .mit-puzzle-sr {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.mit-404 [hidden] {display:none!important;}
@media(max-width:900px) {
  .mit-404 .mit-404-layout {grid-template-columns:1fr;gap:20px;padding-block:44px 64px;}
  .mit-404 .mit-404-copy {max-width:650px;gap:20px;}
  .mit-404 .mit-404-copy h1 {font-size:clamp(38px,7vw,60px);}
  .mit-404 .mit-404-puzzle {max-width:480px;}
  .mit-404 .mit-404-note {max-width:none;}
}
@media(prefers-reduced-motion:reduce) {
  .mit-404 .mit-puzzle-board,.mit-404 .mit-puzzle-tile,.mit-404 .mit-puzzle-button {transition:none;}
  .mit-404 .mit-puzzle-tile[aria-pressed="true"] {transform:none;}
}

.mit-404 .mit-404-contact .wp-block-button__link {background:#fff;color:#000;border-color:#C4C4C4;}
.mit-404 .mit-404-contact .wp-block-button__link:hover {background:#F4F4F2;border-color:#6B6B6B;color:#000;}

.mit-404 .mit-puzzle-tile {-webkit-tap-highlight-color:transparent;}
