/* Schriften lokal (keine Verbindung zu Google) */
  @font-face { font-family: "Permanent Marker"; src: url("../fonts/PermanentMarker-Regular.woff2?v=75db1e00") format("woff2"); font-display: swap; }
  @font-face { font-family: "Rubik"; src: url("../fonts/Rubik-Variable.woff2?v=82f3beac") format("woff2"); font-weight: 300 900; font-display: swap; }
  :root { --bg: #6b5238; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
          padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #231c16; } }
  :root[data-theme="dark"] { --bg: #231c16; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
  html, body { margin: 0; height: 100%; }
  body { background: var(--bg); overflow: hidden; }
  #wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  #rotate { display: none; position: fixed; inset: 0; z-index: 2; background: #C99A62; color: #2A2622;
            align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center;
            font: 600 22px Rubik, system-ui, sans-serif; padding: 24px; }
  #rotate b { font: 400 34px "Permanent Marker", "Comic Sans MS", cursive; }
  @media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }
  canvas { display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
  /* Rechtstexte */
  #legal { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
           background: rgba(25,18,12,0.7); padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
           max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  #legal[hidden] { display: none; }
  .legal-card { background: #FFFDF6; color: #2A2622; border: 3px solid #2A2622; border-radius: 16px; width: min(760px, 100%);
                max-height: 100%; display: flex; flex-direction: column; box-shadow: 5px 7px 0 #2A2622; font-family: Rubik, system-ui, sans-serif; }
  .legal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 6px; }
  .legal-head h1 { margin: 0; font: 400 clamp(22px, 4vw, 30px) "Permanent Marker", "Comic Sans MS", cursive; background: #F2D43C; padding: 2px 14px; transform: rotate(-1deg); }
  .legal-close { font: 600 22px Rubik, system-ui, sans-serif; width: 44px; height: 44px; border: 3px solid #2A2622; border-radius: 12px; background: #FFFDF6; cursor: pointer; flex: none; }
  .legal-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 16px 8px; border-bottom: 2px solid #E6DDCB; }
  .legal-nav a { color: #2A2622; font-weight: 600; font-size: 15px; }
  .legal-body { overflow-y: auto; padding: 8px 20px 20px; font-size: 15px; line-height: 1.55; -webkit-overflow-scrolling: touch; }
  .legal-body h2 { font-size: 17px; margin: 18px 0 4px; }
  .legal-body p { margin: 0 0 8px; }
  .legal-body a { color: #2A2622; }
  .legal-body mark { background: #FFD7D0; color: #B3261E; font-weight: 700; padding: 0 3px; }
  .legal-body .form { border: 2px dashed #C9BFA9; border-radius: 10px; padding: 12px; }
  .legal-body .note { background: #FFF6CF; border: 2px solid #E9D98A; border-radius: 10px; padding: 10px 12px; }
  /* Konto */
  #account { position: fixed; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(25,18,12,0.7);
             padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  #account[hidden] { display: none; }
  .acc-card { background: #FFFDF6; color: #2A2622; border: 3px solid #2A2622; border-radius: 16px; width: min(460px, 100%); max-height: 100%;
              display: flex; flex-direction: column; box-shadow: 5px 7px 0 #2A2622; font-family: Rubik, system-ui, sans-serif; }
  .acc-body { overflow-y: auto; padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
  .acc-tabs { display: flex; gap: 8px; }
  .acc-tabs button { flex: 1; font: 600 16px Rubik, system-ui, sans-serif; padding: 10px; border: 2px solid #2A2622; border-radius: 10px; background: #FFFDF6; color: #2A2622; cursor: pointer; }
  .acc-tabs button.on { background: #F2D43C; }
  .acc-hint { margin: 0; font-size: 15px; line-height: 1.45; }
  .acc-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
  .acc-field input { font: 16px Rubik, system-ui, sans-serif; padding: 11px 12px; border: 2px solid #2A2622; border-radius: 10px; background: #fff; color: #2A2622; }
  .acc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
  .acc-check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: #2A2622; }
  .acc-check a, .acc-link { color: #2A2622; }
  .acc-main, .acc-second, .acc-danger { font: 600 18px Rubik, system-ui, sans-serif; padding: 13px; border: 3px solid #2A2622; border-radius: 12px; cursor: pointer; box-shadow: 3px 4px 0 #2A2622; color: #2A2622; }
  .acc-main { background: #F2D43C; } .acc-second { background: #FFFDF6; } .acc-danger { background: #D8432B; color: #FFFDF6; }
  .acc-link { text-align: center; font-size: 15px; font-weight: 600; } .acc-link.danger { color: #B3261E; }
  .acc-msg { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; }
  .acc-msg.ok { background: #DDF0DF; border: 2px solid #8BC49A; } .acc-msg.err { background: #FFD7D0; border: 2px solid #E39A8E; }