:root { 
  --font-sans: 'Helvetica Neue', Arial, sans-serif; 
  --font-serif: Georgia, 'Times New Roman', serif; 
  --red:#e3000f; --red-dark:#b8000c; --black:#111; --surface:#1a1a1a; --surface2:#242424; --surface3:#2e2e2e;
  --border:rgba(255,255,255,0.08); --text:#f0ece4; --text-muted:#888880;
  --gold:#dcc29f; --green:#4caf7d; --blue:#3b8beb; --radius:16px; --radius-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body, input, button, textarea, select { font-family: var(--font-sans); }
.pin-title, .app-logo, .price-cat-label-input { font-family: var(--font-serif); }
body{background:var(--black);color:var(--text);min-height:100vh;overflow-x:hidden;}

/* PIN SCREENS */
.pin-screen{display:none;position:fixed;inset:0;background:var(--black);z-index:1000;
  flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;}
.pin-screen.active{display:flex;}
.pin-logo{width:64px;height:64px;background:var(--red);border-radius:18px;
  display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;margin:0 auto 20px;}
.pin-title{font-size:1.8rem;margin-bottom:6px;}
.pin-subtitle{font-size:0.9rem;color:var(--text-muted);margin-bottom:36px;line-height:1.5;max-width:280px;}
.pin-dots{display:flex;gap:14px;justify-content:center;margin-bottom:32px;}
.pin-dot{width:18px;height:18px;border-radius:50%;background:var(--surface3);border:2px solid var(--border);
  transition:all 0.15s cubic-bezier(0.175,0.885,0.32,1.275);}
.pin-dot.filled{background:var(--red);border-color:var(--red);transform:scale(1.15);}
.pin-dot.error{background:#dc3545;border-color:#dc3545;animation:shake 0.4s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:280px;}
.pin-key{height:68px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);
  color:var(--text);font-size:1.5rem;font-weight:500;
  cursor:pointer;transition:all 0.1s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;user-select:none;}
.pin-key:active{background:var(--surface3);transform:scale(0.94);}
.pin-key.pin-del{font-size:1.2rem;color:var(--text-muted);}
.pin-key.pin-empty{background:transparent;border-color:transparent;cursor:default;}
.pin-key-sub{font-size:0.6rem;letter-spacing:0.1em;color:var(--text-muted);text-transform:uppercase;}
.pin-error-msg{margin-top:16px;color:#dc3545;font-size:0.85rem;min-height:20px;font-weight:500;}
.pin-hint{margin-top:20px;font-size:0.78rem;color:var(--text-muted);line-height:1.5;}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:5000;
  align-items:flex-end;justify-content:center;padding-bottom:env(safe-area-inset-bottom);}
.modal-overlay.active{display:flex;}
.modal-sheet{background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:480px;
  padding:24px 20px 28px;animation:slideUp 0.25s cubic-bezier(0.175,0.885,0.32,1.275);}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-handle{width:40px;height:4px;background:var(--surface3);border-radius:2px;margin:0 auto 20px;}
.modal-icon{font-size:2.5rem;margin-bottom:12px;text-align:center;}
.modal-title{font-size:1.1rem;font-weight:600;text-align:center;margin-bottom:8px;}
.modal-body{font-size:0.9rem;color:var(--text-muted);text-align:center;margin-bottom:24px;line-height:1.5;}
.modal-name{color:var(--text);font-weight:600;}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.modal-btn{padding:14px;border-radius:var(--radius-sm);border:none;font-size:0.95rem;font-weight:600;cursor:pointer;transition:all 0.15s;}
.modal-btn:active{transform:scale(0.97);}
.modal-cancel{background:var(--surface2);color:var(--text-muted);}
.modal-cancel:active{background:var(--surface3);}
.modal-confirm{background:var(--red);color:#fff; display: flex; align-items: center; justify-content: center;}
.modal-confirm:active{background:var(--red-dark);}

/* CROPPER OVERRIDE */
.cropper-view-box, .cropper-face { border-radius: 50%; }
.cropper-face { background-color: transparent !important; }

/* MAIN APP */
#app{display:none;}
#app.active{display:block;padding-bottom:calc(70px + env(safe-area-inset-bottom));}
.app-header{position:sticky;top:0;z-index:100;background:rgba(17,17,17,0.92);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;}
.app-logo{width:36px;height:36px;background:var(--red);border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.1rem;color:#fff;flex-shrink:0;}
.app-header-left{display:flex;align-items:center;gap:12px;}
.app-title{font-size:1rem;font-weight:600;}
.app-subtitle{font-size:0.72rem;color:var(--text-muted);margin-top:1px;}
.header-right{display:flex;align-items:center;gap:8px;}

/* BUTTONS */
.save-btn{background:var(--red);color:#fff;border:none;border-radius:12px;padding:10px 20px;
  font-size:0.9rem;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.save-btn:active{transform:scale(0.96);background:var(--red-dark);}
.save-btn.saving{background:var(--text-muted);pointer-events:none;}
.save-btn.saved{background:var(--green);}
.save-btn.needs-save { background: #ff9800; animation: pulseSave 2s infinite; }
.save-btn.needs-save:active { background: #e68a00; }
@keyframes pulseSave {
  0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}

.undo-btn { 
  width: 36px; height: 36px; /* Selbe Grösse wie Logout */
  background: var(--surface2); color: var(--text-muted); 
  border: 1px solid var(--border); border-radius: 10px; 
  font-size: 0.9rem; cursor: pointer; transition: all 0.2s; 
  display: flex; align-items: center; justify-content: center; 
  margin-right: 5px; 
}
.undo-btn:hover { background: var(--surface3); color: var(--text); }
.undo-btn:active { transform: scale(0.96); }

.logout-btn{width:36px;height:36px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.9rem;transition:all 0.15s;}
.logout-btn:active{background:var(--surface3);}

/* TABS */
.tab-nav{display:flex;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:65px;z-index:99;}
.tab-btn{flex:1;padding:12px 8px;border:none;background:transparent;color:var(--text-muted);
  font-size:0.8rem;font-weight:500;cursor:pointer;transition:all 0.2s;border-bottom:2px solid transparent;display:flex;flex-direction:column;align-items:center;gap:3px;}
.tab-btn .tab-icon{font-size:1rem;}
.tab-btn.active{color:var(--text);border-bottom-color:var(--red);}
.tab-panel{display:none;padding:20px 16px;max-width:600px;margin:0 auto;}
.tab-panel.active{display:flex;flex-direction:column;gap:16px;}

/* CARDS & FORMS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.card-header{padding:16px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.card-header-left{display:flex;align-items:center;gap:10px;}
.card-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;}
.card-title{font-size:0.95rem;font-weight:600;}
.card-desc{font-size:0.75rem;color:var(--text-muted);margin-top:2px;}
.card-body{padding:18px;}

.toggle{position:relative;width:50px;height:28px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--surface3);border-radius:14px;transition:background 0.25s;cursor:pointer;}
.toggle-slider::before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;
  transition:transform 0.25s cubic-bezier(0.175,0.885,0.32,1.275);box-shadow:0 1px 4px rgba(0,0,0,0.3);}
.toggle input:checked + .toggle-slider{background:var(--red);}
.toggle input:checked + .toggle-slider::before{transform:translateX(22px);}

.collapsible-content{overflow:hidden;max-height:0;transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1);}
.collapsible-content.open{max-height:3000px;}

.field{margin-bottom:14px;}.field:last-child{margin-bottom:0;}
.field-label{font-size:0.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;display:block;}
input[type="date"],input[type="time"],input[type="text"],input[type="number"]{
  width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:0.95rem;padding:12px 14px;outline:none;transition:border-color 0.2s;-webkit-appearance:none;appearance:none;}
input:focus{border-color:var(--red);}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(0.5);cursor:pointer;}
input[type="number"]{-moz-appearance:textfield;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;}
textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:0.9rem;padding:12px 14px;outline:none;transition:border-color 0.2s;resize:vertical;min-height:80px;line-height:1.5;}
textarea:focus{border-color:var(--red);}
.date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* HOURS */
.hours-table{display:flex;flex-direction:column;gap:4px;}
.hours-row{display:grid;grid-template-columns:90px 1fr 1fr 44px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.hours-row:last-child{border-bottom:none;}
.hours-day{font-size:0.85rem;font-weight:500;color:var(--text-muted);}
.hours-row.open .hours-day{color:var(--text);}
.hours-input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-size:0.85rem;padding:8px 10px;outline:none;width:100%;text-align:center;transition:border-color 0.2s;-webkit-appearance:none;}
.hours-input:focus{border-color:var(--red);}
.hours-input:disabled{opacity:0.3;}
.hours-closed-label{grid-column:2/4;font-size:0.8rem;color:var(--text-muted);text-align:center;font-style:italic;}
.day-toggle{width:28px;height:28px;border-radius:8px;background:var(--surface3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;font-size:1.1rem;font-weight:700;color:var(--text-muted);user-select:none;line-height:1;}
.day-toggle.open{background:rgba(227,0,15,0.15);border-color:var(--red);color:var(--red);}

/* EDITOR */
.editor-toolbar {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;         /* Verhindert den Zeilenumbruch */
  align-items: center;
  overflow-x: auto;          /* Erlaubt das seitliche Scrollen */
  -webkit-overflow-scrolling: touch; /* Sorgt für weiches Scrollen auf dem iPhone */
  scrollbar-width: none;     /* Versteckt den Scrollbalken in Firefox */
}

/* Versteckt den Scrollbalken in Chrome, Safari und Edge */
.editor-toolbar::-webkit-scrollbar {
  display: none;
}
.toolbar-btn{width:34px;height:34px;border-radius:8px;background:transparent;border:1px solid transparent;
  color:var(--text-muted);font-size:0.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-weight:600;}
.toolbar-btn:hover,.toolbar-btn.active{background:var(--surface3);border-color:var(--border);color:var(--text);}
.toolbar-sep{width:1px;height:24px;background:var(--border);margin:0 2px;}
.emoji-picker-btn{margin-left:auto;background:var(--surface3);border-color:var(--border);color:var(--text);font-size:1.1rem;width:auto;padding:0 10px;border-radius:8px;height:34px;}
.editor-content{min-height:150px;padding:14px;outline:none;font-size:0.95rem;line-height:1.7;color:#222;background:#fff;}
.editor-content:empty::before{content:'Banner-Text hier eingeben...';color:#aaa;pointer-events:none;}
.emoji-panel{display:none;background:var(--surface2);border-top:1px solid var(--border);padding:12px;}
.emoji-panel.open{display:block;}
.emoji-search{width:100%;background:var(--surface3);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:0.9rem;padding:8px 12px;outline:none;margin-bottom:10px;}
.emoji-category-title{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin:8px 0 6px;font-weight:600;}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:200px;overflow-y:auto;}
.emoji-btn{width:36px;height:36px;border-radius:8px;background:transparent;border:none;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.emoji-btn:active{background:var(--surface3);}
.preview-box{background:rgba(255,255,255,0.85);border-radius:10px;padding:14px 16px;color:#222;font-size:0.88rem;line-height:1.5;margin-top:14px;}
.preview-label{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px;}

/* Styling für Dropdowns (Schriftart & Grösse) */
.toolbar-select {
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  height: 34px;
  appearance: auto; 
  -webkit-appearance: auto;
}
.toolbar-select:hover {
  border-color: var(--text-muted);
}
.toolbar-select option {
  background: var(--surface2);
  color: var(--text);
}

/* Styling für den Color-Picker */
.toolbar-color-picker {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s;
}
.toolbar-color-picker:hover {
  background: var(--surface3);
  border-color: var(--border);
}
.toolbar-color-picker input[type="color"] {
  position: absolute;
  inset: -10px;
  width: 200%;
  height: 200%;
  opacity: 0;
  cursor: pointer;
}

/* PRICES */
.price-cat-tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;}
.price-cat-tab{flex-shrink:0;padding:8px 16px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text-muted);font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.price-cat-tab.active{background:var(--red);border-color:var(--red);color:#fff;}
.price-cat-label-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:1.1rem;padding:10px 14px;outline:none;transition:border-color 0.2s;}
.price-cat-label-input:focus{border-color:var(--red);}
.price-cat-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.price-items-list{display:flex;flex-direction:column;gap:10px;}
.price-item-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.price-item-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;}
.price-item-drag{color:var(--text-muted);font-size:1.1rem;cursor:grab;padding:2px 4px;touch-action:none;}
.price-item-name-preview{flex:1;font-size:0.9rem;font-weight:500;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.price-item-type-badge{font-size:0.7rem;font-weight:600;padding:3px 8px;border-radius:6px;text-transform:uppercase;flex-shrink:0;}
.type-single{background:rgba(59,139,235,0.15);color:var(--blue);}
.type-multi{background:rgba(76,175,125,0.15);color:var(--green);}
.type-range{background:rgba(220,194,159,0.15);color:var(--gold);}
.type-surcharge{background:rgba(227,0,15,0.1);color:var(--red);}
.price-item-del{width:28px;height:28px;border-radius:8px;background:rgba(227,0,15,0.1);border:none;
  color:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;font-weight:700;}
.price-item-body{padding:14px;border-top:1px solid var(--border);display:none;}
.price-item-body.open{display:block;}
.type-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;}
.type-opt{padding:8px 4px;border-radius:8px;border:1px solid var(--border);background:var(--surface3);
  color:var(--text-muted);font-size:0.75rem;font-weight:600;text-align:center;cursor:pointer;transition:all 0.2s;}
.type-opt.active{background:var(--red);border-color:var(--red);color:#fff;}
.price-fields{display:flex;flex-direction:column;gap:10px;}
.price-fields-row{display:grid;gap:8px;}
.price-fields-row.cols-3{grid-template-columns:repeat(3,1fr);}
.price-fields-row.cols-2{grid-template-columns:repeat(2,1fr);}
.price-field-group label{font-size:0.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:5px;display:block;}
.price-field-group input{padding:9px 12px;font-size:0.9rem;}
.add-item-btn{width:100%;padding:12px;border-radius:var(--radius-sm);border:1px dashed var(--border);
  background:transparent;color:var(--text-muted);font-size:0.9rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;}
.add-item-btn:active{background:var(--surface2);}

/* TEAM */
.team-member-list{display:flex;flex-direction:column;gap:14px;}
.team-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.team-card-header{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;user-select:none;}
.team-card-avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid var(--border);flex-shrink:0;background:var(--surface3);position:relative;}
.team-card-avatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.team-card-avatar-placeholder{width:52px;height:52px;border-radius:50%;background:var(--surface3);border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.team-card-info{flex:1;min-width:0;}
.team-card-name{font-size:0.95rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.team-card-role{font-size:0.78rem;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.team-card-actions{display:flex;gap:6px;flex-shrink:0;}
.team-drag-handle{color:var(--text-muted);font-size:1.1rem;cursor:grab;padding:4px;touch-action:none;}
.team-del-btn{width:28px;height:28px;border-radius:8px;background:rgba(227,0,15,0.1);border:none;
  color:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;}
.team-card-body{padding:14px;border-top:1px solid var(--border);display:none;}
.team-card-body.open{display:block;}
.team-card-body .field{margin-bottom:12px;}
.team-card-body .field:last-child{margin-bottom:0;}

.photo-upload-area{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:20px;text-align:center;
  cursor:pointer;transition:all 0.2s;position:relative;margin-bottom:14px;}
.photo-upload-area:active,.photo-upload-area.dragover{border-color:var(--red);background:rgba(227,0,15,0.05);}
.photo-upload-area input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.photo-preview{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--border);margin:0 auto 10px;display:block;}
.photo-upload-icon{font-size:2rem;margin-bottom:6px;color:var(--text-muted);}
.photo-upload-text{font-size:0.85rem;color:var(--text-muted);}

.add-member-btn{width:100%;padding:14px;border-radius:var(--radius-sm);border:1px dashed var(--border);
  background:transparent;color:var(--text-muted);font-size:0.9rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;}
.add-member-btn:active{background:var(--surface2);}

/* TOAST (Die korrigierte Verschwinde-Animation) */
.toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%) translateY(40px);background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:12px 20px;font-size:0.9rem;font-weight:500;z-index:9999;
  transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;}
.toast.show{transform:translateX(-50%) translateY(0); opacity: 1;}
.toast.success{border-color:var(--green);}
.toast.error{border-color:var(--red);}

::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px;}
}