/* Basis-Layout: *, html, body, header, #app, Screenreader-Helfer */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
#live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}
.skip-link{position:absolute;top:-100%;left:8px;background:var(--accent);color:#fff;padding:8px 16px;border-radius:var(--radius);font-size:.9rem;font-weight:600;z-index:9999;text-decoration:none;}
.skip-link:focus{top:8px;}
header{width:100%;max-width:560px;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
.logo{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--text);}
.logo span{color:var(--accent);}
.header-btns{display:flex;gap:8px;}
.icon-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:0 10px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;font-weight:600;transition:background .15s;}
.icon-btn:hover{background:var(--key-bg);}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
#app{width:100%;max-width:560px;padding:0 16px 32px;}
@media(max-width:420px){
  header{padding:10px 14px;}
  .logo{font-size:1.25rem;}
  #app{padding:0 12px 24px;}
}
@media(max-width:360px){
  header{padding:8px 12px;}
  .logo{font-size:1.1rem;}
  #app{padding:0 8px 20px;}
}

/* Desktop: App erscheint als zentriertes Handy-Fenster */
@media(min-width:560px){
  body{background:#cdc9c3;padding:0;}
  [data-theme="dark"] body{background:#080706;}
  header{
    box-shadow:-1px 0 0 var(--border),1px 0 0 var(--border),0 -1px 0 var(--border);
    background:var(--surface);
  }
  #app{
    background:var(--bg);
    box-shadow:-1px 0 0 var(--border),1px 0 0 var(--border),0 1px 0 var(--border),0 12px 40px rgba(0,0,0,0.15);
    min-height:calc(100vh - 61px);
  }
}
#start-screen{padding:24px 0;display:flex;flex-direction:column;gap:12px;}
.start-section{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 16px;}
.start-section-titel{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text);padding-bottom:6px;border-bottom:2px solid var(--border);}
.btn-primary{background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:14px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;transition:background .15s;text-align:center;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.btn-secondary{background:var(--key-bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-size:.95rem;font-weight:700;cursor:pointer;width:100%;transition:background .15s;text-align:center;}
.btn-secondary:hover{background:var(--border);}
.btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}