/* ============================================================
   tickets.wipke.de – Design angelehnt an aufgaben.wipke.de
   Hintergrund weiss · Sidebar/Header grau · Karten hellgelb · Akzent Orange
============================================================ */
:root {
  --bg-base:#ffffff; --bg-surface:#f5f5f5; --bg-hover:#e8e8e8;
  --sidebar-bg:#e8e8e8; --header-bg:#d8d8d8;
  --card-bg:#fffde7; --card-hover:#fff9c4; --card-border:#f0e68c;
  --accent:#f59e0b; --accent-dark:#d97706; --accent-subtle:rgba(245,158,11,.15);
  --text:#111; --text-2:#333; --muted:#777;
  --border:#ccc;
  --danger:#dc2626; --success:#16a34a; --info:#2563eb;
  --r-sm:8px; --r-md:12px; --r-xl:20px;
  --sidebar-w:240px; --t:150ms ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg-base);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent-dark);text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:var(--text);background:#fff;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.5rem .8rem;outline:none;width:100%;transition:border-color var(--t),box-shadow var(--t)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,158,11,.2)}
textarea{min-height:80px;resize:vertical}
[hidden]{display:none!important}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.45rem 1rem;border-radius:var(--r-md);font-size:.85rem;font-weight:600;white-space:nowrap;transition:all var(--t)}
.btn-primary{background:var(--accent);color:#fff;border:1.5px solid var(--accent-dark)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{border:1.5px solid var(--border);color:var(--text-2);background:#fff}
.btn-ghost:hover{background:var(--bg-hover)}
.btn-danger{color:var(--danger);border:1.5px solid transparent}
.btn-danger:hover{border-color:var(--danger);background:rgba(220,38,38,.06)}
.btn-full{width:100%;padding:.7rem;font-size:.95rem}
.btn-sm{padding:.25rem .6rem;font-size:.78rem}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-surface);padding:1rem}
.login-box{width:100%;max-width:400px;padding:2.2rem 1.8rem;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);box-shadow:0 8px 32px rgba(0,0,0,.1)}
.login-logo{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-bottom:1.4rem}
.logo-icon{width:40px;height:40px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.2rem}
.login-logo h1{font-size:1.4rem}
.login-hint{color:var(--muted);font-size:.88rem;text-align:center;margin-bottom:1.2rem}
.qr{display:block;margin:0 auto 1rem;width:200px;height:200px}
.secret{font-family:monospace;font-size:.85rem;text-align:center;word-break:break-all;background:var(--bg-surface);padding:.4rem;border-radius:var(--r-sm);margin-bottom:1rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--text-2);margin-bottom:.25rem}
.form-error{color:var(--danger);font-size:.84rem;margin:.4rem 0;min-height:1.1em}

/* Layout */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--sidebar-bg);border-right:1.5px solid var(--border);display:flex;flex-direction:column}
.sidebar-header{padding:1rem;display:flex;align-items:center;gap:.6rem;background:var(--header-bg);border-bottom:1.5px solid var(--border)}
.sidebar-logo{width:30px;height:30px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.sidebar-title{font-weight:700;flex:1}
.nav{flex:1;overflow-y:auto;padding:.5rem 0}
.nav-item{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;color:var(--text-2);font-weight:500;cursor:pointer;position:relative;user-select:none}
.nav-item:hover{background:rgba(0,0,0,.06)}
.nav-item.active{background:var(--accent-subtle);color:var(--accent-dark);font-weight:700}
.nav-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.nav-icon{width:20px;text-align:center}
.nav-soon{margin-left:auto;font-size:.65rem;color:var(--muted);font-weight:600}
.sidebar-footer{padding:.7rem;border-top:1.5px solid var(--border);background:var(--header-bg);display:flex;align-items:center;gap:.6rem}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.user-name{flex:1;font-weight:700;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.content-header{padding:.75rem 1.2rem;background:var(--header-bg);border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.content-header h2{font-size:1.05rem;flex:1;min-width:120px}
.menu-btn{display:none;font-size:1.3rem;padding:.2rem .5rem}
.back-btn{font-size:1.1rem;padding:.2rem .4rem}
.content{flex:1;overflow-y:auto;padding:1.2rem}
.search{max-width:260px}

/* Listen & Karten */
.list{display:flex;flex-direction:column;gap:.5rem;max-width:1000px}
.card{background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--r-md);padding:.75rem 1rem;cursor:pointer;transition:background var(--t)}
.card:hover{background:var(--card-hover)}
.card-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.card-title{font-weight:700;flex:1;min-width:150px}
.card-sub{color:var(--muted);font-size:.82rem}
.badge{font-size:.7rem;font-weight:700;padding:.1rem .5rem;border-radius:99px;background:var(--accent-subtle);color:var(--accent-dark);white-space:nowrap}
.badge.grey{background:#e5e7eb;color:#4b5563}
.badge.blue{background:#dbeafe;color:#1d4ed8}
.empty{color:var(--muted);padding:2rem;text-align:center}

/* Detail */
.section{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-md);margin-bottom:1rem;max-width:1000px}
.section-head{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-bottom:1.5px solid var(--border);background:var(--bg-surface);border-radius:var(--r-md) var(--r-md) 0 0}
.section-head h3{font-size:.92rem;flex:1}
.section-body{padding:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.4rem 1.2rem}
.field label{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.field div{min-height:1.4em;word-break:break-word}
.row-item{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem 0;border-bottom:1px solid #eee}
.row-item:last-child{border-bottom:none}
.row-main{flex:1;min-width:0}
.row-main b{font-weight:700}
.row-actions{display:flex;gap:.2rem;flex-shrink:0}
.icon-btn{padding:.25rem .45rem;border-radius:var(--r-sm);color:var(--muted)}
.icon-btn:hover{background:var(--bg-hover);color:var(--text)}
.rooms{margin:.3rem 0 0 1rem;font-size:.85rem}
.rooms .row-item{padding:.3rem 0}
.notes{white-space:pre-wrap}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:900;padding:1rem}
.modal{background:#fff;border-radius:var(--r-xl);width:100%;max-width:520px;max-height:92vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.modal-head{padding:1rem 1.2rem;border-bottom:1.5px solid var(--border);font-weight:700;font-size:1rem}
.modal-body{padding:1rem 1.2rem}
.modal-foot{padding:.8rem 1.2rem;border-top:1.5px solid var(--border);display:flex;gap:.5rem;justify-content:flex-end}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
.form-2 .full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:.5rem}
.check input{width:auto}

.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:.6rem 1.1rem;border-radius:var(--r-md);z-index:1000;font-size:.88rem;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.toast.err{background:var(--danger)}

/* Handy */
@media (max-width:800px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:800;transform:translateX(-100%);transition:transform .2s ease;box-shadow:4px 0 20px rgba(0,0,0,.2)}
  .sidebar.open{transform:none}
  .menu-btn{display:inline-block}
  .content{padding:.8rem}
  .search{max-width:none;flex-basis:100%}
  .form-2{grid-template-columns:1fr}
  .modal{max-height:100vh;border-radius:var(--r-md)}
  .row-actions .icon-btn{padding:.4rem .55rem}
  input,select,textarea{font-size:16px} /* verhindert Zoom auf iPhone */
}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:700}