:root{--bg:#f7f7fb;--fg:#171923;--muted:#64748b;--card:#fff;--line:#e5e7eb;--accent:#111827;--danger:#991b1b}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0}a{color:#1d4ed8;text-decoration:none}nav a{margin-left:1rem}.brand{font-weight:700;color:var(--fg)}main{max-width:1200px;margin:0 auto;padding:1.5rem}h1{margin-top:0}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem;margin-bottom:1rem;box-shadow:0 1px 2px #0000000d}.narrow{max-width:440px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.rowform{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;align-items:end}label{display:block;font-weight:600;margin:.5rem 0}input,textarea,select{width:100%;padding:.65rem;border:1px solid #cbd5e1;border-radius:10px;background:#fff}textarea{min-height:90px}button,.button{display:inline-block;padding:.65rem .9rem;border:0;border-radius:10px;background:var(--accent);color:#fff;cursor:pointer;font-weight:700}.danger{background:var(--danger)}table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:1rem 0}th,td{padding:.75rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}th{background:#f1f5f9}.badge{display:inline-block;background:#e2e8f0;border-radius:999px;padding:.15rem .5rem;font-size:.85rem}.flash{background:#ecfdf5;border:1px solid #86efac;padding:.75rem;border-radius:10px}.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;padding:.75rem;border-radius:10px}.inline{display:inline-flex;gap:.25rem;align-items:center;margin-right:.75rem}.inline input{width:auto}.peoplecheck{columns:2}.best{outline:2px solid #22c55e}@media(max-width:760px){.split{grid-template-columns:1fr}.peoplecheck{columns:1}header{align-items:flex-start;gap:.75rem;flex-direction:column}nav a{margin:0 .75rem 0 0}table{font-size:.9rem}}

.site-footer{max-width:1200px;margin:0 auto;padding:1rem 1.5rem 2rem;color:var(--muted);font-size:.95rem}.site-footer a{margin:0 .35rem}.site-footer a:first-child{margin-left:0}.muted{color:var(--muted)}.notice{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:.75rem;margin:1rem 0}.legal{max-width:850px}.legal code{background:#f1f5f9;border-radius:6px;padding:.1rem .3rem}

/* Erweiterungen: Statistiken, E-Mail-Vorlagen, manuelle Links */
.bar{height:12px;background:#e8edf5;border-radius:999px;overflow:hidden;min-width:120px;margin:.25rem 0}
.bar span{display:block;height:100%;background:#2f6fed;border-radius:999px}
.chart-list{display:grid;gap:.7rem;margin-top:1rem}
.chart-row{display:grid;grid-template-columns:minmax(180px,1fr) 2fr auto;gap:.75rem;align-items:center}
.chart-row small{white-space:nowrap;color:#5c6470}
.copylink{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9rem}
.badge.warn{background:#fff3cd;color:#7a5b00;border:1px solid #ffe08a}
.button.secondary{background:#eef2f7;color:#1f2937;border:1px solid #cbd5e1}
.notice{background:#eef6ff;border:1px solid #b8d9ff;border-radius:10px;padding:.75rem 1rem;margin:.75rem 0}
.muted{color:#667085}
@media (max-width: 760px){.chart-row{grid-template-columns:1fr}.bar{min-width:0}}

/* Datenschutz-Hinweis auf Abstimmungsseiten */
.privacy-hint{background:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;padding:1rem;margin:1rem 0}
.privacy-hint h3{margin-top:0}
.checkline{display:flex;gap:.55rem;align-items:flex-start;font-weight:600;margin-top:.75rem}
.checkline input{width:auto;margin-top:.25rem}
.legal h2{margin-top:1.35rem}.legal ul{padding-left:1.4rem}.legal li{margin:.25rem 0}

/* Einheitliche Personen-Auswahl im Eventformular */
.peoplecheck{
    columns:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:.55rem;
    margin:.75rem 0 1rem;
}
.person-option{
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    margin:0;
    padding:.65rem .75rem;
    border:1px solid #d7dde8;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    font-weight:600;
    transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.person-option input{
    width:auto;
    flex:0 0 auto;
    margin:.18rem 0 0 0;
}
.person-option-text{
    display:block;
    line-height:1.35;
}
.person-name{
    display:inline;
}
.person-meta{
    color:var(--muted);
    font-weight:500;
}
.person-option:has(input:checked){
    background:#e8f2ff;
    border-color:#2f6fed;
    box-shadow:0 0 0 2px rgba(47,111,237,.12);
}
.person-option:has(input:checked) .person-name{
    color:#0f3f9e;
}
.person-option:focus-within{
    outline:2px solid #2f6fed;
    outline-offset:2px;
}
@media(max-width:760px){.peoplecheck{grid-template-columns:1fr}}

/* Klickbare Teilnehmer-Kacheln: rot = nicht ausgewählt, grün = ausgewählt */
.person-tiles{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:.7rem;
    margin:.9rem 0 1.2rem;
}
.person-tile{
    display:block;
    position:relative;
    min-height:76px;
    padding:.85rem .9rem;
    border:2px solid #dc2626;
    border-radius:14px;
    background:#fef2f2;
    color:#7f1d1d;
    cursor:pointer;
    user-select:none;
    transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .08s ease;
}
.person-tile:hover{
    box-shadow:0 3px 10px rgba(127,29,29,.12);
    transform:translateY(-1px);
}
.person-tile-input{
    position:absolute;
    opacity:0;
    pointer-events:none;
    width:1px;
    height:1px;
}
.person-tile-content{
    display:flex;
    min-height:48px;
    flex-direction:column;
    justify-content:center;
    gap:.25rem;
}
.person-tile .person-name{
    display:block;
    font-weight:800;
    line-height:1.2;
    overflow-wrap:anywhere;
}
.person-tile .person-meta{
    display:block;
    color:inherit;
    opacity:.78;
    font-size:.9rem;
    font-weight:650;
}
.person-badge{
    display:inline-block;
    align-self:flex-start;
    margin-top:.15rem;
    padding:.1rem .45rem;
    border-radius:999px;
    background:rgba(255,255,255,.65);
    border:1px solid currentColor;
    font-size:.78rem;
    font-weight:700;
}
.person-tile::after{
    content:"Nicht ausgewählt";
    display:block;
    margin-top:.55rem;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
    opacity:.85;
}
.person-tile.selected,
.person-tile:has(.person-tile-input:checked){
    border-color:#16a34a;
    background:#ecfdf5;
    color:#14532d;
    box-shadow:0 0 0 3px rgba(22,163,74,.13);
}
.person-tile.selected::after,
.person-tile:has(.person-tile-input:checked)::after{
    content:"Ausgewählt";
}
.person-tile:focus-within{
    outline:3px solid #2563eb;
    outline-offset:3px;
}
@media(max-width:760px){.person-tiles{grid-template-columns:1fr}}


/* Manuelle Abstimmungslinks mit Kopierbutton */
.manual-link-wrap{
    display:flex;
    align-items:center;
    gap:.5rem;
    min-width:260px;
}
.manual-link-wrap .copylink{
    flex:1 1 auto;
    min-width:180px;
}
.copy-link-btn{
    flex:0 0 auto;
    white-space:nowrap;
    padding:.55rem .75rem;
    border-radius:9px;
}
.copy-link-btn.copied{
    background:#15803d;
}
@media(max-width:760px){
    .manual-link-wrap{
        align-items:stretch;
        flex-direction:column;
    }
    .copy-link-btn{
        width:100%;
    }
}

.button-row{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    align-items:center;
    margin:.75rem 0;
}
.inline-form{
    display:inline-block;
    margin:0;
}
.person-tiles.compact{
    margin-top:.75rem;
}
.person-tiles.compact .person-tile-content{
    min-height:52px;
}

/* Update: Navigation immer über Personen-Kacheln */
header{
    z-index:1000;
}
header nav{
    position:relative;
    z-index:1001;
}
.person-tiles,
.person-tile{
    z-index:0;
}
.person-tile:hover{
    z-index:1;
}
.selection-tools{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin:.75rem 0 .35rem;
}
.selection-tools .button{
    padding:.55rem .75rem;
}
@media(max-width:760px){
    header{z-index:2000;}
    .selection-tools .button{width:100%;text-align:center;}
}

/* Gestaffelter E-Mail-Versand mit Fortschrittsanzeige */
.mail-progress-panel{
    margin-top:1rem;
    padding:1rem;
    border:1px solid #cbd5e1;
    border-radius:14px;
    background:#f8fafc;
}
.mail-progress-panel[hidden]{display:none!important}
.mail-progress-head{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:center;
    margin-bottom:.65rem;
}
.mail-progress-track{
    width:100%;
    height:16px;
    overflow:hidden;
    border-radius:999px;
    background:#e2e8f0;
}
.mail-progress-track span{
    display:block;
    height:100%;
    width:0;
    background:#2563eb;
    transition:width .25s ease;
}
.batch-mail-btn:disabled{
    opacity:.58;
    cursor:not-allowed;
}


/* Event-Aktionen und sichere Löschbestätigung */
.event-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.65rem;
}
.event-actions .event-delete-open{
    margin-left:.75rem;
}
.confirm-dialog{
    width:min(92vw,540px);
    padding:0;
    border:0;
    border-radius:16px;
    box-shadow:0 24px 70px rgba(15,23,42,.35);
}
.confirm-dialog::backdrop{
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(2px);
}
.confirm-dialog-card{
    margin:0;
    padding:1.35rem;
    background:#fff;
}
.confirm-dialog-card h2{
    margin-top:0;
}
.confirm-dialog-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.25rem;
}
@media(max-width:760px){
    .event-actions{align-items:stretch;}
    .event-actions .button,
    .event-actions button{width:100%;text-align:center;}
    .event-actions .event-delete-open{margin-left:0;margin-top:.45rem;}
    .confirm-dialog-actions{flex-direction:column-reverse;}
    .confirm-dialog-actions .button,
    .confirm-dialog-actions button{width:100%;text-align:center;}
}

/* Smartphone-Optimierung und neue Versand-/Anwesenheitsbereiche */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0}
.table-scroll table{margin:0;min-width:720px}
.whatsapp-button{background:#166534;text-align:center}
.attendance-card{margin-top:1rem;padding:1rem;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc}
.attendance-card h3{margin-top:0}
.attendance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.65rem;margin:1rem 0}
.attendance-item{display:flex;align-items:flex-start;gap:.65rem;margin:0;padding:.75rem;border:1px solid #cbd5e1;border-radius:12px;background:#fff;cursor:pointer}
.attendance-item input{width:auto;margin-top:.2rem}
.attendance-item span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.attendance-item small{color:var(--muted);font-weight:500}
@media(max-width:760px){
  main{padding:1rem .75rem;overflow-x:hidden}
  header{padding:.85rem .75rem}
  header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:.45rem}
  nav a{margin:0;padding:.55rem .45rem;border:1px solid var(--line);border-radius:9px;text-align:center;background:#fff;overflow-wrap:anywhere}
  h1{font-size:1.55rem;overflow-wrap:anywhere}
  h2{font-size:1.25rem;overflow-wrap:anywhere}
  .card{padding:.85rem;border-radius:12px}
  .rowform{grid-template-columns:1fr}
  button,.button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .button-row>*{width:100%;text-align:center}
  .table-scroll{margin:.75rem 0;border:1px solid var(--line);border-radius:10px;background:#fff}
  .table-scroll table{border:0;border-radius:0;font-size:.84rem}
  th,td{padding:.58rem;min-width:105px}
  .attendance-grid{grid-template-columns:1fr}
  .manual-link-wrap{min-width:0}
  .manual-link-wrap .copylink{min-width:0}
  .site-footer{padding:.8rem .75rem 1.5rem}
}