/* === PLUS JAKARTA SANS === */
@font-face { font-family:'Plus Jakarta Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:500; font-style:normal; font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:600; font-style:normal; font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:700; font-style:normal; font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:800; font-style:normal; font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }

/* === DESIGN TOKENS === */
:root {
  /* Schichtplan-Manager Akzentfarbe: Indigo #5542FF */
  --accent:       #5542FF;
  --accent-hover: #4433E0;
  --accent-tint:  rgba(85,66,255,.08);

  /* Text */
  --ink:        #0D1117;
  --text-2:     #1F2937;
  --text-body:  #4B5563;
  --text-muted: #5B6472;

  /* Flächen */
  --surface:  #F8F9FA;
  --card:     #FFFFFF;
  --border:   rgba(0,0,0,0.07);

  /* Spacing (8px-Raster) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:100px;

  /* Radius */
  --r-pill:9999px; --r-card:16px; --r-sm:8px;

  /* Schatten */
  --shadow-card:  0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --shadow-hover: 0 8px 32px rgba(0,0,0,.10);

  /* Easing */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 0.15s var(--ease-out);
  --t-base: 0.25s var(--ease-out);

  /* Legacy-Variablen für PHP-generierte Farbe (pro Event) */
  --primary-color: var(--accent);
  --primary-dark:  var(--accent-hover);
}

/* === FOUNDATION === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--card); }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 17px; font-weight: 400; line-height: 1.7;
  color: var(--text-body); background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
ul { list-style: none; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); text-wrap: balance; }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; }

p { max-width: 65ch; }
p + p { margin-top: var(--s4); }
strong { font-weight: 700; color: var(--text-2); }

.accent { color: var(--accent); }
.eyebrow {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3);
}

.container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: var(--s6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* === NAVBAR (Floating Pill) === */
.navbar {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
  width: calc(100% - 40px); max-width: 1100px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  transition: box-shadow var(--t-base);
}
.navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.08); }

.navbar__logo {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap;
  flex-shrink: 0;
}
.navbar__logo img { width: 30px; height: 30px; }

.navbar__links {
  display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center;
}
.navbar__link {
  font-size: 16px; font-weight: 500; color: var(--text-2);
  padding: 12px 14px; border-radius: var(--r-pill); white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.navbar__link:hover { color: var(--ink); background: var(--surface); }

.navbar__cta {
  background: var(--accent); color: #fff !important; font-size: 16px; font-weight: 600;
  padding: 13px 22px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0;
  transition: filter var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .navbar__cta:hover { filter: brightness(0.9); transform: translateY(-1px); }
}

/* Burger */
.navbar__burger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 10px 8px;
}
.navbar__burger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

/* Mobile Overlay */
.nav-mobile {
  display: flex; position: fixed; inset: 0; z-index: 1001;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  flex-direction: column; align-items: center; justify-content: center; gap: var(--s5);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-16px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0ms linear 220ms;
}
.nav-mobile.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0ms linear 0ms;
}
.nav-mobile__close {
  position: absolute; top: 28px; right: 28px;
  font-size: 1.3rem; color: var(--ink); padding: var(--s2);
  border-radius: var(--r-sm); transition: background var(--t-fast);
}
.nav-mobile__close:hover { background: var(--surface); }
.nav-mobile__link {
  font-size: 1.5rem; font-weight: 700; color: var(--ink);
  transition: color var(--t-fast);
}
.nav-mobile__link:hover { color: var(--accent); }

@media (max-width: 860px) { /* Burger frueher: langer Markenname, wie im Web */
  .navbar__links, .navbar__cta { display: none; }
  .navbar__burger { display: flex; }
}

/* === PAGE LAYOUT === */
.page {
  padding-top: 120px;
  padding-bottom: var(--s16);
  min-height: 100vh;
}

/* === EVENT HEADER === */
.event-header {
  background: var(--ink);
  border-radius: var(--r-card);
  padding: var(--s10) var(--s10);
  margin-bottom: var(--s8);
  display: flex; align-items: center; gap: var(--s8);
  position: relative; overflow: hidden;
}

/* Gestreifter Hintergrund in Indigo-Tönen (wie Hero Variante A), überschreibbar per Event-Farbe */
.event-header::before {
  content: ''; position: absolute; inset: 0 -200px; z-index: 0; pointer-events: none;
  background: linear-gradient(73deg,
    color-mix(in srgb, var(--accent) 30%, #000) 0% 10%,
    color-mix(in srgb, var(--accent) 50%, #000) 10% 20%,
    color-mix(in srgb, var(--accent) 70%, #000) 20% 30%,
    var(--accent) 30% 70%,
    color-mix(in srgb, var(--accent) 70%, #000) 70% 80%,
    color-mix(in srgb, var(--accent) 50%, #000) 80% 90%,
    color-mix(in srgb, var(--accent) 30%, #000) 90% 100%
  );
  opacity: 0.55;
}

.event-header__logo {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.event-header__logo img {
  max-width: 64px; max-height: 64px; object-fit: contain;
}

.event-header__info { position: relative; z-index: 1; flex: 1; min-width: 0; }
.event-header__info .eyebrow { color: rgba(255,255,255,0.6); margin-bottom: var(--s3); }
.event-header__info h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: #fff; margin-bottom: var(--s4); text-wrap: balance;
}
.event-header__date {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9); padding: 6px 14px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.event-description {
  margin-top: var(--s4); max-width: 60ch;
  font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,0.85); white-space: pre-line;
}

.event-header__share {
  position: relative; z-index: 1; flex-shrink: 0; margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  cursor: pointer; transition: background var(--t-fast);
}
.event-header__share:hover { background: rgba(255,255,255,0.22); }

/* === Modal: Event teilen === */
.share-body { display: flex; flex-direction: column; gap: var(--s4); align-items: center; text-align: center; }
.share-qr {
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: #fff; padding: var(--s4); line-height: 0;
}
.share-qr img, .share-qr canvas { display: block; border-radius: calc(var(--r-sm) - 4px); }
.share-row { display: flex; gap: var(--s3); width: 100%; }
.share-row .btn { flex: 1; }
.share-link-input {
  flex: 1; min-width: 0; padding: 12px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 16px; color: var(--text-2); background: var(--surface);
}

/* === "DEINE SCHICHTEN FINDEN" (Utility, einklappbar) ===
   Liegt ausserhalb des dunklen .event-header auf hellem Grund -> normale Textfarben,
   bewusst schlank/kompakt statt als grosse Kachel ueber den Schichten. */
.my-shifts {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  margin-bottom: var(--s5); overflow: hidden;
}

.my-shifts__summary {
  display: flex; align-items: center; gap: var(--s3);
  padding: 12px var(--s5); cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.my-shifts__summary::-webkit-details-marker { display: none; }
.my-shifts__summary:hover { background: var(--surface); color: var(--ink); }
.my-shifts__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.my-shifts__summary > i:first-child { color: var(--accent); font-size: 15px; }
.my-shifts__summary span { flex: 1; min-width: 0; }

.my-shifts__chevron {
  color: var(--text-muted); font-size: 13px;
  transition: transform var(--t-fast);
}
.my-shifts[open] .my-shifts__chevron { transform: rotate(180deg); }

.my-shifts__body {
  padding: 0 var(--s5) var(--s5);
  border-top: 1px solid var(--border);
  padding-top: var(--s4);
}

.my-shifts__form { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; }
.my-shifts__field { flex: 1; min-width: 180px; }
.my-shifts__form input[type=tel] {
  width: 100%; padding: 10px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2); font-size: 16px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.my-shifts__form input[type=tel]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.my-shifts__list { margin-top: var(--s4); }
.my-shifts__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--border);
  font-size: 16px; color: var(--text-body);
}
.my-shifts__meta { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.my-shifts__meta strong { color: var(--text-2); font-weight: 600; }
.my-shifts__meta span { color: var(--text-body); font-size: 15px; }

.my-shifts__ics {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 15px; font-weight: 600; color: var(--accent);
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border); background: var(--card);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.my-shifts__ics:hover { border-color: var(--accent); background: var(--accent-tint); }

.my-shifts__all { margin-top: var(--s4); }
.my-shifts__empty { margin-top: var(--s3); font-size: 15px; color: var(--text-muted); }

/* === MITBRINGLISTE ===
   Eigener Abschnitt ueber den Tagen (nicht Teil der Tages-Tabs), weil sie fuer
   das gesamte Event gilt. Optisch eine Karte wie .my-shifts, aber immer offen -
   sie soll zum Mitmachen einladen und nicht erst aufgeklappt werden muessen. */
.bring-list {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: var(--s5); margin-bottom: var(--s5);
}
.bring-list__head { display: flex; align-items: center; gap: var(--s3); }
.bring-list__head h2 {
  font-size: 17px; font-weight: 700; color: var(--text-2);
  display: flex; align-items: center; gap: var(--s2);
}
.bring-list__head h2 i { color: var(--accent); font-size: 15px; }
.bring-list__count {
  font-size: 13px; font-weight: 700; color: var(--accent);
  background: var(--accent-tint); border-radius: var(--r-pill);
  padding: 2px 10px;
}
.bring-list__intro { font-size: 16px; color: var(--text-body); margin-top: var(--s2); }
.bring-list__empty { font-size: 15px; color: var(--text-muted); margin-top: var(--s4); }

.bring-list__items { list-style: none; margin-top: var(--s4); }
.bring-list__item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-top: 1px solid var(--border);
  font-size: 16px;
}
.bring-list__artikel { flex: 1; min-width: 0; font-weight: 600; color: var(--text-2); }
.bring-list__person { color: var(--text-muted); font-size: 15px; white-space: nowrap; }
.bring-list__remove {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--text-muted); cursor: pointer; font-size: 13px;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.bring-list__remove:hover { border-color: #c0392b; color: #c0392b; background: rgba(192,57,43,.06); }
.bring-list__remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bring-list__form {
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border);
}
/* Bewusst nur die Textfelder - eine Regel auf alle input-Kinder wuerde auch die
   Consent-Checkbox im .bring-list__privacy-Block auf Feldbreite aufblasen. */
.bring-list__field { flex: 1; min-width: 160px; }
.bring-list__field > input[type=text],
.bring-list__field > input[type=tel] {
  width: 100%; padding: 10px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2); font-size: 16px;
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.bring-list__field > input[type=text]:focus,
.bring-list__field > input[type=tel]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Datenschutz-Hinweis: gleiche abgesetzte Box wie .privacy-block im Eintragen-Modal. */
.bring-list__privacy {
  flex-basis: 100%; margin-top: var(--s1);
  background: var(--surface); border-radius: var(--r-sm);
  padding: var(--s4); font-size: 15px; color: var(--text-body); line-height: 1.5;
}
.bring-list__privacy a { color: var(--accent); font-weight: 500; }
.bring-list__submit { align-self: flex-start; }

/* === CONTROLS BAR === */
.controls-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap;
}

.day-nav { display: flex; gap: var(--s3); }

.day-nav-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 16px; font-weight: 600; color: var(--ink);
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--card);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .day-nav-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
}

/* === SHIFT FILTER === */
.shift-filter {
  position: relative; flex: 1; min-width: 180px; max-width: 360px;
}

.shift-filter i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 16px; pointer-events: none; z-index: 1;
}

#shiftSelect {
  width: 100%; padding: 10px 16px 10px 38px;
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  background: var(--card); color: var(--text-2); font-size: 16px; font-weight: 500;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235542FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  background-size: 16px;
  padding-right: 36px;
}
#shiftSelect:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* === DAY CARD === */
.day { display: none; }
.day.active { display: block; animation: fadeIn 0.3s var(--ease-out); }

.day-title {
  font-size: 1.1rem; font-weight: 700; color: var(--ink);
  margin-bottom: var(--s6);
  display: flex; align-items: center; gap: var(--s3);
}
.day-title::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* === SHIFT BLOCK === */
.shift {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s6);
  margin-bottom: var(--s5); box-shadow: var(--shadow-card);
}

.shift h3 {
  font-size: 16px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s5); text-transform: uppercase; letter-spacing: 0.06em;
}
.shift h3 i { color: var(--accent); font-size: 15px; }

.shift-description {
  font-size: 15px; color: var(--text-muted); line-height: 1.5;
  margin: calc(-1 * var(--s3)) 0 var(--s4); white-space: pre-line;
}

.names {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3);
}

/* === SLOTS === */
.slot {
  padding: var(--s4) var(--s5);
  border-radius: var(--r-sm);
  font-weight: 600; font-size: 16px;
  text-align: center; line-height: 1.3;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.slot.free {
  background: var(--accent-tint);
  border: 1.5px dashed var(--accent);
  color: var(--accent);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .slot.free:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
}
.slot.free:active { transform: scale(0.97); }

.slot.closed {
  background: var(--surface-muted, rgba(0,0,0,0.04));
  border: 1.5px dashed var(--text-muted, #9ca3af);
  color: var(--text-muted, #9ca3af);
  cursor: not-allowed;
}

.slot.filled {
  background: rgba(16,185,129,0.08);
  border: 1.5px solid rgba(16,185,129,0.4);
  color: #065f46;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .slot.filled:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
}

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
  padding: 16px 28px; border-radius: var(--r-pill); border: none; line-height: 1; cursor: pointer;
  transition: filter 150ms var(--ease-out), transform 120ms var(--ease-out),
              background var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(0.9); color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--danger { background: #dc2626; color: #fff; }
.btn--danger:hover { filter: brightness(0.9); }
.btn--sm { font-size: 15px; padding: 11px 18px; }

/* === MODAL === */
.modal {
  display: none; position: fixed; inset: 0; z-index: 1050;
  background: rgba(13,17,23,0.5); backdrop-filter: blur(4px);
  justify-content: center; align-items: center; padding: var(--s4);
}
.modal.open { display: flex; }

.modal-content {
  background: var(--card); width: 100%; max-width: 480px;
  border-radius: var(--r-card); padding: var(--s8);
  box-shadow: var(--shadow-hover); position: relative;
  animation: slideUp 0.25s var(--ease-out);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-content h2 {
  font-size: 1.2rem; margin-bottom: var(--s6);
  display: flex; align-items: center; gap: var(--s3);
}
.modal-content h2 i { color: var(--accent); }

.modal-close {
  position: absolute; right: var(--s5); top: var(--s5);
  font-size: 1.2rem; color: var(--text-muted);
  padding: var(--s2); border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.modal-close:hover { color: var(--ink); background: var(--surface); }

.modal-form { display: flex; flex-direction: column; gap: var(--s4); }

.modal-form input,
.modal-form select {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 15px; color: var(--text-2);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.modal-form input:focus,
.modal-form select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.modal-form input[readonly] { background: var(--surface); color: var(--text-muted); }

.modal-form select { color: var(--text-2); cursor: pointer; }

.privacy-block {
  background: var(--surface); border-radius: var(--r-sm);
  padding: var(--s4); font-size: 15px; color: var(--text-body); line-height: 1.5;
}
.privacy-block a { color: var(--accent); font-weight: 500; }

.checkbox-row {
  display: flex; align-items: flex-start; gap: var(--s3); margin-top: var(--s2);
}
.checkbox-row input[type=checkbox] {
  width: 16px; height: 16px; margin: 0; padding: 0; margin-top: 2px;
  accent-color: var(--accent); flex-shrink: 0;
  border: none; border-radius: 0; box-shadow: none; background: transparent;
}
.checkbox-row input[type=checkbox]:focus { box-shadow: none; border-color: transparent; }
.checkbox-row input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.checkbox-row label { font-size: 15px; color: var(--text-body); line-height: 1.5; cursor: pointer; }
.checkbox-row label a { color: var(--accent); font-weight: 500; }

.forget-profile-link {
  display: inline-block; margin-top: var(--s2);
  background: none; border: none; padding: 0;
  font-size: 13px; color: var(--text-muted); text-decoration: underline;
  cursor: pointer;
}
.forget-profile-link:hover { color: var(--ink); }

/* Ja/Nein-Zusatzfelder: gleiche Box wie Text-/Auswahlfelder im modal-form, statt
   der kleingedruckten .checkbox-row (die ist für den Datenschutz-Hinweis gedacht). */
.modal-form .field-toggle {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); margin: 0;
}
.modal-form .field-toggle input[type=checkbox] {
  width: 16px; height: 16px; margin: 0; padding: 0; flex-shrink: 0;
  accent-color: var(--accent); border: none; border-radius: 0; box-shadow: none; background: transparent;
}
.modal-form .field-toggle label { font-size: 15px; color: var(--text-2); cursor: pointer; }
.modal-form .required-mark { color: var(--accent); }

/* Pflicht-Stern sitzt kompakt im Feld statt als eigene Label-Zeile darüber
   (mit Label wirkte jedes Feld wie eine eigene Kategorie/Überschrift). */
.modal-form .field-wrap { position: relative; }
.modal-form .field-wrap input,
.modal-form .field-wrap select { padding-right: 34px; }
.modal-form .field-wrap.field-wrap--select select { padding-right: 54px; }
.modal-form .field-wrap .required-mark {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  font-size: 16px; font-weight: 700; pointer-events: none;
}
.modal-form .field-wrap.field-wrap--select .required-mark { right: 34px; }

/* Sichtbare Feldbeschriftung (Barrierefreiheit: Placeholder allein reicht nicht). */
.field-label {
  display: block; margin-bottom: 6px;
  font-size: 15px; font-weight: 600; color: var(--text-2); line-height: 1.4;
}

/* Honeypot gegen Bots: aus dem sichtbaren Bereich geschoben statt display:none,
   weil manche Bots versteckte Felder per display:none erkennen. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* === PASSWORD PAGE === */
.password-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--s6); background: var(--surface);
}

.password-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s12) var(--s10);
  box-shadow: var(--shadow-hover); width: 100%; max-width: 440px;
  text-align: center;
}

.password-card__logo { margin: 0 auto var(--s6); }
.password-card__logo img { max-height: 72px; max-width: 100%; margin: 0 auto; border-radius: var(--r-sm); }

.password-card__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-tint); display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s6);
}
.password-card__icon i { font-size: 24px; color: var(--accent); }

.password-card h1 { font-size: 1.4rem; margin-bottom: var(--s3); }
.password-card p { font-size: 15px; color: var(--text-body); margin: 0 auto var(--s8); max-width: 35ch; }

.password-form { display: flex; flex-direction: column; gap: var(--s4); text-align: left; }
.password-form input {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 15px; color: var(--text-2); background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.password-form input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* === FOOTER === */
.footer {
  background: var(--ink); color: rgba(255,255,255,0.7);
  padding: var(--s12) 0 var(--s6);
  margin-top: var(--s16);
}

.footer__inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s8);
  padding-bottom: var(--s8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--s6);
}

.footer__brand { display: flex; align-items: center; gap: var(--s3); }
.footer__brand img { width: 28px; height: 28px; }
.footer__brand span { font-size: 17px; font-weight: 700; color: #fff; }

.footer__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.footer__links a {
  font-size: 16px; color: rgba(255,255,255,0.78);
  transition: color var(--t-fast);
}
.footer__links a:hover { color: #fff; }

.footer__bottom {
  font-size: 15px; color: rgba(255,255,255,0.78);
  text-align: center;
}

/* === ANIMATIONS === */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === ALTCHA (QUER-001 T18) ===
   Unsichtbare Prüfung beim Absenden: der Platzhalter nimmt in Flex-Formularen keinen Platz weg.
   Fehlermeldung und Hinweis ohne JavaScript kommen aus assets/js/altcha-start.js bzw. <noscript>. */
altcha-widget[display="invisible"] { display: none; }
.modal-form altcha-widget {
  --altcha-border-radius: var(--r-sm);
  --altcha-color-primary: var(--accent);
  --altcha-max-width: 100%;
}
.altcha-fehler { margin-top: var(--s3); font-size: 16px; color: #b91c1c; }
.altcha-hinweis { margin-top: var(--s2); font-size: 15px; color: var(--text-muted); }

/* === RESPONSIVE === */
@media (max-width: 640px) {
  .container { padding-inline: var(--s4); }
  .page { padding-top: 100px; }

  .event-header { flex-direction: column; align-items: flex-start; gap: var(--s5); padding: var(--s6); }
  .event-header__logo { width: 64px; height: 64px; }
  .event-header__logo img { max-width: 48px; max-height: 48px; }

  .my-shifts__summary { padding: 12px var(--s4); }
  .my-shifts__body { padding-inline: var(--s4); }
  .my-shifts__field { min-width: 0; }
  .my-shifts__item { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .bring-list { padding: var(--s4); }
  .bring-list__field { min-width: 0; flex-basis: 100%; }
  .bring-list__form .btn { width: 100%; justify-content: center; }

  .controls-bar { flex-direction: column; align-items: stretch; }
  .shift-filter { max-width: 100%; }
  .day-nav { justify-content: center; }

  .names { grid-template-columns: 1fr; }

  .modal-content { padding: var(--s6); }
  .password-card { padding: var(--s8) var(--s6); }
}