:root{
    --bg: #f4f6f8;
    --card: #ffffff;
    --accent: #0ea5a4;
    --muted:#64748b;
    --radius:12px;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background:var(--bg);color:#0f1724}
  .app{max-width:980px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px;background:linear-gradient(90deg,var(--card),#f8fafc);box-shadow:0 1px 0 rgba(2,6,23,0.06)}
  .brand{font-weight:700;font-size:18px}
  .actions{display:flex;gap:8px}
  .btn{background:var(--accent);color:white;border:none;padding:8px 12px;border-radius:10px;font-weight:600;cursor:pointer}
  .btn:hover{opacity:0.9}
  .btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(14,165,164,0.12)}
  .main{padding:12px;flex:1}
  .map-wrap{height:180px;border-radius:12px;overflow:hidden;margin-bottom:12px}
  #map{width:100%;height:100%;display:block}
  .controls{display:flex;gap:8px;align-items:center;margin-bottom:12px}
  .controls input, .controls select{flex:1;padding:10px;border-radius:10px;border:1px solid #e6eef2;background:white}
  .controls .small{flex:0}
  .cols{display:grid;grid-template-columns:repeat(1,1fr);gap:10px}
  @media(min-width:700px){ .cols{grid-template-columns:repeat(2,1fr)} }
  .event-col{background:var(--card);border-radius:var(--radius);padding:10px;box-shadow:0 6px 18px rgba(2,6,23,0.06);display:flex;flex-direction:column}
  .event-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .event-title{font-weight:700}
  .event-actions{display:flex;gap:8px}
  .notes-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
  .notes-list .note {
    padding: 12px;       /* mehr Platz für Finger */
    border-radius: 12px;
  }
  .notes-list .note {
    touch-action: manipulation;
    cursor: grab;
  }
  .note{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:10px;border:1px solid rgba(2,6,23,0.04);background:linear-gradient(180deg,#fff,#fbfcfd)}
  .note .left{display:flex;flex-direction:column;align-items:center}
  .note .dot{width:12px;height:12px;border-radius:50%}
  .note .content{flex:1}
  .note .title{font-weight:600;margin-bottom:6px}
  .note .body{font-size:14px;color:var(--muted);min-height:26px}
  .note .meta{font-size:12px;color:var(--muted);margin-top:6px}
  .note .actions{display:flex;flex-direction:column;gap:6px;margin-left:8px}
  .check-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;  /* Touchzone groß genug */
    height: 40px;
    cursor: pointer;
  }
  .check-label input {
    width: 24px;
    height: 24px;
    margin: 0;
  }
  .note .left label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;   /* größere Touch-Zone */
    height: 32px;
    cursor: pointer;
  }
  .note .left input[type=checkbox] {
    width: 24px;    /* sichtbare Größe */
    height: 24px;
    margin: 0;
  }
  .icon-btn{background:transparent;border:none;padding:6px;border-radius:8px}
  .icon-btn:hover{background:rgba(14,165,164,0.06)}
  
  /* modal */
  .modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    pointer-events: auto; /* vorher: none */
  }
  .modal-card{
    width: 90%;
    max-width: 400px;
    background: var(--card);
    border-radius: var(--radius);
    padding: 24px;
    pointer-events:auto;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hidden{display:none}
  
  /* Modal Inputs */
  .modal-card input,
  .modal-card textarea{
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #e6eef2;
    font-size:16px;
    margin-top:6px;
  }
  .modal-card input:focus,
  .modal-card textarea:focus{
    border-color: var(--accent);
    outline:none;
  }
  input[type="password"]{letter-spacing:0.1em}
  
  /* Form layout inside modal */
  .modal-card form{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  
  /* Small helpers */
  .center{display:flex;align-items:center;justify-content:center}
  .dragging{opacity:0.6}
  
  /* Eingeloggter Zustand */
  .logged-in .login-form,
  .logged-in #loginModal{
    display:none !important;
  }