/* app.css – SN Sommerfest 2026 (PHP) – eigenes Design, selbst gehostete Fonts. */

/* ---------- Fonts (selbst gehostet, DSGVO-konform) ---------- */
@font-face { font-family:"Archivo"; font-weight:700; font-display:swap; src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-weight:800; font-display:swap; src:url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-weight:900; font-display:swap; src:url("../fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family:"Oswald"; font-weight:500; font-display:swap; src:url("../fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Oswald"; font-weight:600; font-display:swap; src:url("../fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:400; font-display:swap; src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:500; font-display:swap; src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:600; font-display:swap; src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:700; font-display:swap; src:url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root{
  --sn-red:#D11A1A; --sn-red-dark:#9e1212;
  --sn-bg:#0b0b0c; --sn-carbon:#151517; --sn-steel:#2a2a2e;
  --sn-paper:#f5f3ef; --sn-ink:#141414;
  --sn-white:#ffffff;
  --display:"Archivo",system-ui,sans-serif;
  --eyebrow:"Oswald",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
.sn-vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html,body{min-height:100%}
body{
  font-family:var(--body); background:var(--sn-bg); color:var(--sn-white);
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit}

/* ---------- Hintergrund-Buehne ---------- */
body.sn-stage{ background:var(--sn-bg); }

/* Hintergrund-Diashow: 5 Bilder mit sanftem Crossfade.
   background-size:100% auto -> volle Breite sichtbar (alle Personen). */
.sn-bgshow, .sn-bgshow-overlay{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.sn-bgshow{ background:var(--sn-bg); }
.sn-bgshow span{
  position:absolute; inset:0; display:block;
  background-size:100% auto; background-position:center top; background-repeat:no-repeat;
  background-color:var(--sn-bg);
  opacity:0; transition:opacity 1.6s ease;
}
.sn-bgshow span.is-active{ opacity:1 }
@media (prefers-reduced-motion: reduce){
  .sn-bgshow span{ transition:none }
}
/* Aufhellungs-/Lesbarkeits-Ebene ueber den Fotos */
.sn-bgshow-overlay{
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(11,11,12,.15) 0%,
    rgba(11,11,12,.25) 32%,
    rgba(11,11,12,.6) 62%,
    rgba(11,11,12,.92) 85%,
    #0b0b0c 100%);
}
body.sn-admin-bg, body.sn-admin{
  background:
    radial-gradient(1100px 520px at 50% -8%, #16161b 0%, rgba(22,22,27,0) 60%),
    var(--sn-bg);
  background-attachment:fixed;
}

/* ---------- Shell ---------- */
.sn-shell{
  max-width:480px; margin:0 auto; min-height:100dvh;
  display:flex; flex-direction:column;
}
.sn-step{display:flex;flex-direction:column;flex:1}
.sn-section{flex:1;padding:0 1.5rem 1.5rem}
.sn-hero-space{flex:none;height:24vh;min-height:130px}
.sn-shell--bottom{justify-content:flex-end}
.sn-shell--bottom .sn-hero-space{flex:1 1 auto;height:auto;min-height:16vh}
.sn-step-eyebrow{margin-top:1.9rem}
.sn-center-mid{display:flex;flex-direction:column;align-items:center;justify-content:center}
.sn-mt{margin-top:.9rem}
.sn-mt-sm{margin-top:.6rem}
.sn-mt-lg{margin-top:2.2rem}
.sn-center{text-align:center}
.sn-muted{color:rgba(255,255,255,.72)}
.sn-lede{margin-top:1rem;line-height:1.6}
.sn-accent{color:var(--sn-red);font-weight:700}
.sn-tiny{font-size:.72rem;color:rgba(255,255,255,.5)}
.sn-sm{font-size:.92rem}

/* ---------- Stage-Header ---------- */
.sn-stage-hero{
  position:relative; padding:2.6rem 1.5rem 1.4rem;
  display:flex;justify-content:center;align-items:center;
}
.sn-stage-hero--compact{padding:1.7rem 1.5rem .8rem}
.sn-logo{width:128px;height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.sn-logo--sm{width:74px}

/* ---------- Typo-Bausteine ---------- */
.sn-eyebrow{
  font-family:var(--eyebrow); font-weight:600; text-transform:uppercase;
  letter-spacing:.28em; font-size:.78rem; color:rgba(255,255,255,.78);
}
.sn-headline{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.005em}
.sn-hl-md{font-size:1.5rem;letter-spacing:.01em}
.sn-hl-lg{font-size:2.2rem}
.sn-hl-xl{font-size:2.7rem;margin-top:1.4rem}
.sn-hl-2xl{font-size:3.4rem;margin-top:1.2rem}

.sn-pill{
  display:inline-block; font-family:var(--eyebrow); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; font-size:.74rem;
  padding:.4rem .9rem; border:1px solid var(--sn-red);
  color:#fff; border-radius:999px; background:rgba(209,26,26,.12);
}
.sn-divider{height:2px;width:4.5rem;margin:.7rem auto 1rem;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--sn-red),transparent)}

/* ---------- Buttons ---------- */
.sn-btn{
  width:100%; display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--eyebrow); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  font-size:.95rem; padding:.85rem 1.1rem; border-radius:13px; transition:.15s transform,.15s opacity,.15s background;
}
.sn-btn:active{transform:translateY(1px)}
.sn-btn:disabled{opacity:.45;cursor:not-allowed}
.sn-btn--primary{background:var(--sn-red);color:#fff;box-shadow:0 8px 22px rgba(209,26,26,.28);letter-spacing:.1em}
.sn-btn--primary:hover:not(:disabled){background:#e11f1f}
.sn-btn--ghost{background:rgba(255,255,255,.06);border:1px solid var(--sn-steel);color:#fff}
.sn-btn--light{background:#fff;color:var(--sn-ink)}
.sn-btn--dark{background:#1a1a1c;color:#fff}
.sn-btn--dark:hover{background:#000}
.sn-btn--frost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(4px)}
.sn-btn--frost:hover{background:rgba(255,255,255,.22)}
.sn-btn--sm{width:auto;font-size:.82rem;padding:.55rem .9rem;border-radius:10px}
.sn-chev{font-size:1.3em;line-height:1}
.sn-stack{display:flex;flex-direction:column;gap:.75rem}
.sn-pick{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sn-iconbtn{display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;color:rgba(255,255,255,.92);padding:.95rem;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s}
.sn-iconbtn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32)}
.sn-iconbtn:active{transform:translateY(1px)}
.sn-iconbtn svg{width:30px;height:30px;display:block}
.sn-link{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.sn-info-box{margin-top:1.2rem;padding:1rem;border:1px solid var(--sn-steel);border-radius:12px;
  background:rgba(0,0,0,.3);font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.6}

/* ---------- Consent (Paper-Card) ---------- */
.sn-paper{
  margin-top:1.2rem; background:var(--sn-paper); color:var(--sn-ink);
  border-radius:26px 26px 0 0; padding:2rem 1.5rem 1.5rem; flex:1;
}
/* Glas-Karte: durchscheinend, damit das Hintergrundbild immer sichtbar bleibt */
.sn-glass{
  margin:.9rem .9rem 1.3rem; color:#fff;
  background:rgba(12,12,14,.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px; padding:1.3rem 1.15rem 1.2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.sn-glass .sn-ink-muted{color:rgba(255,255,255,.78)}
.sn-glass .sn-ink{color:#fff}
.sn-glass .sn-check span{color:rgba(255,255,255,.9)}
.sn-glass .sn-thanks-lead{color:#fff}
.sn-glass .sn-remembered{background:rgba(209,26,26,.2);border-color:rgba(209,26,26,.45);color:#fff}
.sn-glass .sn-textbtn{color:#ff9b9b}
.sn-glass .sn-input{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.2)}
.sn-glass .sn-input::placeholder{color:rgba(255,255,255,.45)}
.sn-glass .sn-input:focus{border-color:var(--sn-red);background:rgba(255,255,255,.1)}
.sn-ink-muted{color:rgba(20,20,20,.8)}
.sn-purposes{list-style:none;margin:1.3rem 0;border-top:1px solid rgba(0,0,0,.08)}
.sn-purposes li{display:flex;align-items:center;gap:1rem;padding:.85rem 0;
  border-bottom:1px solid rgba(0,0,0,.08);font-weight:600}
.sn-pic{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;
  border:1px solid rgba(209,26,26,.3);color:var(--sn-red);font-size:1.1rem;flex:none}
.sn-field-hint{margin-top:1.3rem;font-size:.85rem;color:rgba(20,20,20,.65)}
.sn-field-label{margin-top:1.1rem;margin-bottom:.45rem;font-family:var(--eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--sn-red)}
.sn-ink{color:var(--sn-ink)}
.sn-remembered{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:rgba(209,26,26,.08);border:1px solid rgba(209,26,26,.25);border-radius:12px;
  padding:.7rem .9rem;margin:1.2rem 0 .4rem;color:var(--sn-ink);font-size:.92rem}
.sn-textbtn{color:var(--sn-red);text-decoration:underline;text-underline-offset:3px;
  font-size:.85rem;background:none;border:0;cursor:pointer;flex:none}
.sn-success{padding:1.5rem 0 .5rem}
.sn-success .sn-check-ring{margin-bottom:1rem}
.sn-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.5rem}
.sn-input{
  width:100%;border:1px solid rgba(0,0,0,.15);background:#fff;color:var(--sn-ink);
  padding:.85rem 1rem;border-radius:12px;font-size:1rem;outline:none;transition:border .15s;
}
.sn-input:focus{border-color:var(--sn-red)}
.sn-check{display:flex;align-items:flex-start;gap:.7rem;margin-top:.5rem;cursor:pointer;user-select:none}
.sn-check input{width:1.25rem;height:1.25rem;margin-top:.1rem;accent-color:var(--sn-red);flex:none}
.sn-check span{font-size:.86rem;color:rgba(20,20,20,.85);line-height:1.45}
.sn-error{color:var(--sn-red);font-weight:600;font-size:.9rem;margin-top:1rem}
.sn-details{margin-top:1.2rem;font-size:.85rem;color:rgba(20,20,20,.6)}
.sn-details summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.sn-details p{margin-top:.6rem;line-height:1.6}

/* ---------- Fotoauswahl ---------- */
.sn-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.sn-thumb{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  background:var(--sn-carbon);border:1px solid var(--sn-steel)}
.sn-thumb img{width:100%;height:100%;object-fit:cover}
.sn-thumb-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:999px;
  background:#fff;color:var(--sn-ink);display:grid;place-items:center;font-size:1rem;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sn-selected-count{display:flex;align-items:center;gap:.45rem;width:fit-content;margin:1rem auto 0;
  color:#fff;font-weight:600;font-size:.88rem;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.4rem .95rem}

/* ---------- Upload-Fortschritt ---------- */
.sn-progress-list{list-style:none;margin:1.4rem 0;display:flex;flex-direction:column;gap:.75rem}
.sn-prow{display:flex;align-items:center;gap:.75rem;background:var(--sn-carbon);
  border:1px solid var(--sn-steel);border-radius:16px;padding:.85rem}
.sn-prow-ic{width:46px;height:46px;border-radius:10px;background:rgba(0,0,0,.4);
  display:grid;place-items:center;color:var(--sn-red);font-size:1.3rem;flex:none}
.sn-prow-body{flex:1;min-width:0}
.sn-prow-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-prow-size{color:rgba(255,255,255,.5);font-size:.85rem}
.sn-prow-err{color:var(--sn-red);font-size:.82rem;margin-top:.2rem}
.sn-bar{margin-top:.5rem;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.sn-bar-fill{height:100%;width:0;background:var(--sn-red);transition:width .15s}
.sn-prow-stat{flex:none;min-width:42px;text-align:right}
.sn-pct{color:var(--sn-red);font-weight:700}
.sn-ok{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#1f9d4d;color:#fff}
.sn-fail{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--sn-red);color:#fff;font-size:1.1rem}
.sn-note{display:flex;align-items:center;gap:.6rem;background:var(--sn-carbon);border:1px solid var(--sn-steel);
  border-radius:16px;padding:1rem;color:rgba(255,255,255,.7);font-size:.88rem;margin-top:1.2rem}

/* ---------- Danke ---------- */
.sn-check-ring{margin:0 auto;display:grid;place-items:center;width:96px;height:96px;border-radius:999px;
  border:2px solid var(--sn-red);color:var(--sn-red);font-size:2.6rem;animation:snpulse 2s infinite}
@keyframes snpulse{0%{box-shadow:0 0 0 0 rgba(209,26,26,.5)}70%{box-shadow:0 0 0 18px rgba(209,26,26,0)}100%{box-shadow:0 0 0 0 rgba(209,26,26,0)}}
.sn-thanks-lead{font-size:1.25rem;font-weight:600;margin-top:.8rem}

/* ---------- Gate ---------- */
.sn-gate-icon{margin:0 auto;display:grid;place-items:center;width:80px;height:80px;border-radius:999px;
  border:2px solid var(--sn-red);color:var(--sn-red);font-size:2.4rem;font-family:var(--display);font-weight:900}

/* ---------- Footer ---------- */
.sn-footer{margin-top:auto;padding:1.3rem 1.5rem;text-align:center;
  font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;
  color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.08)}
.sn-footer strong{color:rgba(255,255,255,.78);font-weight:600;display:block;margin-top:.2rem;letter-spacing:.16em}
.sn-footer--light{color:rgba(20,20,20,.5);border-top-color:rgba(0,0,0,.1)}
.sn-footer--light strong{color:rgba(20,20,20,.8)}

/* ---------- Fade-in ---------- */
.sn-fade{animation:snfade .4s ease both}
@keyframes snfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================= ADMIN ================= */
.sn-login-shell{max-width:440px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:1.5rem}
.sn-login-card{background:rgba(21,21,23,.9);border:1px solid var(--sn-steel);border-radius:22px;padding:2rem 1.6rem;backdrop-filter:blur(6px)}
.sn-login-card .sn-logo{margin:0 auto 1rem}

.sn-admin-wrap{display:flex;min-height:100dvh;max-width:1200px;margin:0 auto;flex-direction:column}
.sn-side{background:rgba(13,13,14,.92);border-bottom:1px solid var(--sn-steel);padding:1.1rem 1.3rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.sn-side-brand{display:flex;align-items:center;gap:.8rem}
.sn-side-title{font-family:var(--display);font-weight:800}
.sn-side-sub{font-size:.78rem;color:rgba(255,255,255,.55)}
.sn-side-nav{display:flex;gap:.4rem;flex-wrap:wrap}
.sn-navitem{padding:.5rem .8rem;border-radius:10px;font-size:.85rem;color:rgba(255,255,255,.75)}
.sn-navitem.is-active,.sn-navitem:hover{background:rgba(255,255,255,.07);color:#fff}
.sn-side-foot{margin-left:auto}

.sn-admin-main{flex:1;padding:1.6rem 1.3rem 0}
.sn-admin-h1{font-family:var(--display);font-weight:900;font-size:1.8rem;margin-bottom:1.1rem}
.sn-admin-hint{background:rgba(209,26,26,.12);border:1px solid rgba(209,26,26,.3);color:#ffd0d0;
  padding:.7rem 1rem;border-radius:12px;font-size:.85rem;margin-bottom:1rem}

.sn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.2rem}
.sn-stat{background:var(--sn-carbon);border:1px solid var(--sn-steel);border-radius:16px;padding:1rem;text-align:center}
.sn-stat-num{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--sn-red)}
.sn-stat-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6)}

.sn-toolbar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.sn-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.sn-fpill{padding:.45rem .85rem;border-radius:999px;font-size:.8rem;border:1px solid var(--sn-steel);color:rgba(255,255,255,.75)}
.sn-fpill.is-active{background:var(--sn-red);border-color:var(--sn-red);color:#fff}
.sn-toolbar-actions{display:flex;gap:.5rem;flex-wrap:wrap}

.sn-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;padding-bottom:2rem}
.sn-card{position:relative;background:var(--sn-carbon);border:1px solid var(--sn-steel);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.sn-card-img{display:block;aspect-ratio:3/4;background:#000}
.sn-card-img img{width:100%;height:100%;object-fit:cover}
.sn-card-body{padding:.8rem}
.sn-badge{display:inline-block;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .55rem;border-radius:999px;margin-bottom:.4rem}
.sn-badge--ok{background:rgba(31,157,77,.18);color:#7be0a0;border:1px solid rgba(31,157,77,.4)}
.sn-badge--bad{background:rgba(209,26,26,.16);color:#ff9b9b;border:1px solid rgba(209,26,26,.4)}
.sn-badge--warn{background:rgba(220,180,40,.14);color:#f0d27a;border:1px solid rgba(220,180,40,.35)}
.sn-card-name{font-weight:600}
.sn-card-mail{font-size:.8rem;color:rgba(255,255,255,.6)}
.sn-card-meta{font-size:.78rem;color:rgba(255,255,255,.55);margin-top:.2rem;word-break:break-word}
.sn-card-del{position:absolute;top:6px;right:6px}
.sn-card-del button{width:28px;height:28px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:1.1rem;display:grid;place-items:center}
.sn-card-del button:hover{background:var(--sn-red)}
.sn-empty{color:rgba(255,255,255,.55);padding:2rem 0}

@media (min-width:760px){
  .sn-admin-wrap{flex-direction:row}
  .sn-side{flex-direction:column;align-items:stretch;width:230px;border-bottom:0;border-right:1px solid var(--sn-steel)}
  .sn-side-nav{flex-direction:column}
  .sn-side-foot{margin-left:0;margin-top:auto}
}
@media (max-width:520px){
  .sn-stats{grid-template-columns:repeat(2,1fr)}
}

/* ============ Premium-Motion / Feinschliff ============ */
:root{ --sn-ease:cubic-bezier(.16,1,.3,1); }

/* Sanfte Karten-Einblendung */
.sn-fade{animation:snfade .6s var(--sn-ease) both}
@keyframes snfade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Geschmeidiger Wechsel Formular <-> Danke */
[data-form],[data-success]{transition:opacity .42s var(--sn-ease), transform .42s var(--sn-ease)}
.sn-leaving{opacity:0;transform:translateY(10px);pointer-events:none}
.sn-enter{opacity:0;transform:translateY(14px)}
.sn-glass{will-change:height}

/* Buttons: elegantes Heben/Drücken */
.sn-btn{transition:transform .25s var(--sn-ease), box-shadow .25s var(--sn-ease), background .25s var(--sn-ease), opacity .2s ease}
.sn-btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 34px rgba(209,26,26,.4)}
.sn-btn:active:not(:disabled){transform:translateY(0) scale(.99)}
.sn-iconbtn{transition:background .25s var(--sn-ease), border-color .25s var(--sn-ease), transform .2s var(--sn-ease)}
.sn-iconbtn:hover{transform:translateY(-1px)}
.sn-iconbtn:active{transform:translateY(0) scale(.98)}
.sn-iconbtn svg{transition:transform .25s var(--sn-ease)}
.sn-iconbtn:active svg{transform:scale(.92)}

/* Eingaben */
.sn-input{transition:border-color .25s var(--sn-ease), background .25s var(--sn-ease), box-shadow .25s var(--sn-ease)}
.sn-glass .sn-input:focus{box-shadow:0 0 0 3px rgba(209,26,26,.18)}

/* Thumbnails sanft einpoppen */
.sn-thumb{animation:snpop .4s var(--sn-ease) both}
@keyframes snpop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* Fortschritt & Danke */
.sn-bar-fill{transition:width .3s var(--sn-ease)}
.sn-check-ring{animation:snring .6s var(--sn-ease) both, snpulse 2.4s 1s infinite}
@keyframes snring{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* Barrierefreiheit: Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
  .sn-fade,.sn-thumb,.sn-check-ring{animation:none}
  [data-form],[data-success],.sn-btn,.sn-iconbtn,.sn-input,.sn-bar-fill,.sn-glass{transition:none}
}

/* ============ Logo / Untertitel / Einwilligungs-Volltext ============ */
.sn-logo{display:block;max-height:54px;width:auto;margin:0 auto .6rem;object-fit:contain}
.sn-subtitle{margin:-.2rem 0 .2rem}
.sn-consent-more{margin-top:.5rem;color:rgba(255,255,255,.75)}
.sn-consent-more summary{cursor:pointer;font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.02em}
.sn-consent-more summary:hover{color:rgba(255,255,255,.9)}
.sn-consent-more p{font-size:.8rem;line-height:1.5;margin-top:.5rem;color:rgba(255,255,255,.72)}

/* ============ Admin-Einstellungen ============ */
.sn-flash{background:rgba(40,170,90,.16);border:1px solid rgba(40,170,90,.4);color:#bfe9cd;
  padding:.7rem .9rem;border-radius:10px;margin-bottom:1.1rem;font-size:.9rem}
.sn-flash--err{background:rgba(209,26,26,.14);border-color:rgba(209,26,26,.4);color:#ffd0d0}
.sn-set-form{max-width:760px;display:flex;flex-direction:column;gap:1.3rem}
.sn-set-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:1.1rem 1.1rem 1.2rem}
.sn-set-card h2{font-family:var(--display);font-weight:800;font-size:1.05rem;margin-bottom:.2rem}
.sn-set-card .sn-set-desc{font-size:.82rem;color:rgba(255,255,255,.55);margin-bottom:.9rem}
.sn-set-row{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.sn-set-row:last-child{margin-bottom:0}
.sn-set-row label{font-size:.8rem;letter-spacing:.02em;color:rgba(255,255,255,.78);font-family:var(--eyebrow);font-weight:600}
.sn-set-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.sn-set-input,.sn-set-textarea,.sn-set-select{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:10px;color:#fff;padding:.6rem .7rem;font:inherit}
.sn-set-input:focus,.sn-set-textarea:focus,.sn-set-select:focus{outline:none;border-color:var(--sn-red)}
.sn-set-textarea{min-height:120px;line-height:1.5;resize:vertical}
.sn-set-check{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.7rem;cursor:pointer}
.sn-set-check input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--sn-red);flex:none}
.sn-set-check span{font-size:.9rem;color:rgba(255,255,255,.85)}
.sn-set-hint{font-size:.76rem;color:rgba(255,255,255,.45);margin-top:.25rem}
.sn-bg-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.6rem;margin-top:.4rem}
.sn-bg-thumb{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#000}
.sn-bg-thumb img{display:block;width:100%;height:78px;object-fit:cover}
.sn-bg-thumb label{position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.55);color:#fff;
  font-size:.72rem;display:flex;align-items:center;gap:.3rem;padding:.25rem .4rem;cursor:pointer;font-family:inherit;font-weight:400;letter-spacing:0}
.sn-set-actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.sn-logo-preview{max-height:46px;width:auto;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:.3rem .5rem;margin-top:.3rem}

/* =====================================================================
   SuperNatural – 1:1 Redesign (Gast-Flow + Admin-Dashboard)
   ===================================================================== */
:root{
  --sn2-red:#e21f23; --sn2-red-2:#b3141a;
  --sn2-grad:linear-gradient(180deg,#ef2a2e 0%,#c8161b 100%);
  --sn2-ink:#1b1b1d; --sn2-paper:#f4f4f6;
}
body.sn-stage .sn-bgshow-overlay{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(10,10,12,.45), rgba(8,8,10,.82) 60%, #07070a 100%);
}

/* ---------- Gast-Flow Grundgerüst ---------- */
.snf{position:relative;z-index:1;min-height:100dvh;display:flex;justify-content:center}
.snf-screen{
  display:none; width:100%; max-width:500px; margin:0 auto; min-height:100dvh;
  flex-direction:column; align-items:center; text-align:center;
  padding:max(2.2rem,env(safe-area-inset-top)) 1.4rem max(1.6rem,env(safe-area-inset-bottom));
}
.snf-screen.is-active{display:flex; animation:snf-in .5s var(--sn-ease,cubic-bezier(.16,1,.3,1)) both}
@keyframes snf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .snf-screen.is-active{animation:none} }

.snf-top{display:flex;flex-direction:column;align-items:center;width:100%}
.snf-logo{width:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
.snf-logo--xl{height:210px;margin-top:.5rem}
.snf-logo--md{height:120px}
.snf-logo--sm{height:96px}
@media (max-height:740px){ .snf-logo--xl{height:165px} }

.snf-eyebrow{font-family:var(--eyebrow);font-weight:600;text-transform:uppercase;
  letter-spacing:.32em;color:var(--sn2-red);font-size:.82rem;margin:.7rem 0 .5rem;
  display:flex;align-items:center;gap:.7rem}
.snf-eyebrow::before,.snf-eyebrow::after{content:"";height:1px;width:26px;background:linear-gradient(90deg,transparent,var(--sn2-red))}
.snf-eyebrow::after{background:linear-gradient(90deg,var(--sn2-red),transparent)}
.snf-badge{font-family:var(--eyebrow);font-weight:500;text-transform:uppercase;letter-spacing:.22em;
  font-size:.82rem;color:#fff;border:1px solid rgba(226,31,35,.7);border-radius:8px;
  padding:.32rem 1.05rem;margin-bottom:1.1rem}
.snf-badge--plain{border:0;color:#fff;opacity:.92;font-style:italic;font-weight:600;letter-spacing:.04em;font-family:var(--display)}

.snf-h1{font-family:var(--display);font-weight:900;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.3rem,9vw,3rem);color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.snf-h1 .snf-accent{color:var(--sn2-red)}
.snf-lead{font-family:var(--body);color:rgba(255,255,255,.82);font-size:1.06rem;line-height:1.5;
  margin-top:1rem;max-width:24em}
.snf-lead .snf-accent{color:var(--sn2-red);font-weight:700}

.snf-spacer{flex:1 1 auto;min-height:1rem}

/* Glühendes Boden-Emblem (Intro/Danke) */
.snf-emblem{position:relative;width:min(78%,300px);margin:1.4rem auto .4rem;aspect-ratio:1/.62;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.snf-emblem::before{content:"";position:absolute;inset:-14% -6%;
  background:radial-gradient(ellipse at center,rgba(226,31,35,.42),transparent 68%);filter:blur(6px)}
.snf-emblem img{width:100%;height:auto;opacity:.92;
  filter:drop-shadow(0 0 18px rgba(238,40,40,.85)) drop-shadow(0 0 42px rgba(226,31,35,.5));
  transform:perspective(420px) rotateX(58deg)}

/* ---------- Buttons ---------- */
.snf-btn{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.06rem;color:#fff;background:var(--sn2-grad);border-radius:16px;
  padding:1.05rem 1.3rem;box-shadow:0 12px 30px rgba(200,20,26,.4),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s var(--sn-ease,ease),box-shadow .18s,filter .18s}
.snf-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(200,20,26,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.snf-btn:active{transform:translateY(0) scale(.99)}
.snf-btn[disabled]{filter:grayscale(.5) brightness(.6);box-shadow:none;cursor:not-allowed;transform:none}
.snf-btn .snf-chev{font-weight:900}
.snf-btn--light{background:linear-gradient(180deg,#fff,#ececec);color:#161616;
  box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 #fff}
.snf-btn--light:hover{box-shadow:0 16px 34px rgba(0,0,0,.45)}
.snf-btn--outline{background:transparent;color:var(--sn2-red);border:1.6px solid rgba(226,31,35,.6);
  box-shadow:none}
.snf-btn--outline:hover{background:rgba(226,31,35,.08);transform:translateY(-1px);box-shadow:none}
.snf-btn--icon svg{width:22px;height:22px;flex:none}

.snf-link{display:inline-block;margin-top:1.15rem;font-size:.92rem;color:rgba(255,255,255,.78);
  text-decoration:underline;text-underline-offset:3px}
.snf-link:hover{color:#fff}
.snf-foot{margin-top:1.3rem;font-family:var(--eyebrow);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:.62rem;color:rgba(255,255,255,.4)}
.snf-foot b{color:rgba(255,255,255,.62);font-weight:600}
.snf-hint{display:flex;gap:.5rem;align-items:flex-start;justify-content:center;
  color:rgba(255,255,255,.55);font-size:.82rem;margin-top:1rem;max-width:30em}
.snf-hint svg{width:16px;height:16px;flex:none;margin-top:.15rem;opacity:.7}

/* ---------- Einwilligungs-Karte (Screen 2) ---------- */
.snf-card{background:#fff;color:var(--sn2-ink);border-radius:26px;width:100%;
  padding:1.8rem 1.5rem 1.6rem;box-shadow:0 30px 70px rgba(0,0,0,.5);text-align:left;margin-top:.4rem}
.snf-card-h{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1.1;
  text-align:center;color:#171717}
.snf-card-rule{height:2px;width:90px;margin:.8rem auto 1.2rem;
  background:linear-gradient(90deg,transparent,var(--sn2-red),transparent)}
.snf-card-intro{font-size:.98rem;color:#33333a;margin-bottom:.4rem}
.snf-purpose{display:flex;align-items:center;gap:1rem;padding:.95rem 0;border-bottom:1px solid #ececef}
.snf-purpose:last-of-type{border-bottom:0}
.snf-purpose-ico{width:42px;height:42px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--sn2-red)}
.snf-purpose-ico svg{width:26px;height:26px}
.snf-purpose span{font-size:1.02rem;color:#222}
.snf-confirm{font-size:.92rem;color:#44444c;line-height:1.5;margin:1rem 0 1.1rem}
.snf-cardcheck{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.3rem;cursor:pointer}
.snf-cardcheck input{appearance:none;-webkit-appearance:none;width:26px;height:26px;flex:none;
  border:2px solid #cfcfd6;border-radius:7px;margin-top:.05rem;position:relative;transition:.15s;background:#fff}
.snf-cardcheck input:checked{background:var(--sn2-red);border-color:var(--sn2-red)}
.snf-cardcheck input:checked::after{content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.snf-cardcheck span{font-size:.92rem;color:#3a3a42;line-height:1.45}
.snf-consent-detail{margin-top:.4rem}
.snf-consent-detail summary{font-size:.82rem;color:#8a8a92;cursor:pointer}
.snf-consent-detail p{font-size:.82rem;color:#55555c;line-height:1.5;margin-top:.5rem}

/* ---------- Foto-Auswahl (Screen 3) ---------- */
.snf-pick{display:flex;flex-direction:column;gap:.85rem;width:100%;margin-top:.3rem}
.snf-section-label{font-family:var(--eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  color:var(--sn2-red);font-size:.78rem;margin:1.6rem 0 .8rem;display:flex;align-items:center;gap:.7rem;justify-content:center}
.snf-section-label::before,.snf-section-label::after{content:"";height:1px;flex:1;max-width:60px;background:linear-gradient(90deg,transparent,rgba(226,31,35,.6))}
.snf-section-label::after{background:linear-gradient(90deg,rgba(226,31,35,.6),transparent)}
.snf-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;width:100%}
.snf-thumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:#000;animation:snf-pop .3s var(--sn-ease,ease) both}
@keyframes snf-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.snf-thumb img{width:100%;height:100%;object-fit:cover}
.snf-thumb-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  background:#fff;color:#111;font-size:15px;line-height:24px;text-align:center;font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.5)}
.snf-selcount{display:flex;align-items:center;gap:.5rem;justify-content:center;color:#fff;font-size:.95rem;margin:1rem 0}
.snf-selcount svg{width:20px;height:20px;color:var(--sn2-red)}

/* ---------- Upload-Fortschritt (Screen 4) ---------- */
.snf-files{display:flex;flex-direction:column;gap:.7rem;width:100%;margin-top:.4rem}
.snf-file{display:flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:.7rem .85rem}
.snf-file-thumb{width:52px;height:52px;border-radius:11px;object-fit:cover;flex:none;background:#000}
.snf-file-info{flex:1;min-width:0;text-align:left}
.snf-file-name{font-weight:600;color:#fff;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snf-file-sub{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:.15rem}
.snf-file-status{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;min-width:74px}
.snf-file-pct{font-family:var(--display);font-weight:800;color:var(--sn2-red);font-size:.95rem}
.snf-file-bar{width:74px;height:6px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.snf-file-bar i{display:block;height:100%;width:0;background:var(--sn2-grad);transition:width .25s ease}
.snf-stat-txt{font-size:.78rem}
.snf-stat-done{color:#27c06a;display:flex;align-items:center;gap:.35rem;font-weight:600}
.snf-stat-done svg{width:22px;height:22px}
.snf-stat-wait{color:rgba(255,255,255,.5);display:flex;align-items:center;gap:.35rem}
.snf-stat-wait svg{width:18px;height:18px}
.snf-up-spin{color:var(--sn2-red);display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.74rem}
.snf-spin{width:22px;height:22px;border:2.5px dashed var(--sn2-red);border-radius:50%;animation:snf-rot 1s linear infinite}
@keyframes snf-rot{to{transform:rotate(360deg)}}
.snf-note{display:flex;gap:.7rem;align-items:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:.85rem 1rem;margin-top:1rem;
  color:rgba(255,255,255,.7);font-size:.86rem;text-align:left}
.snf-note svg{width:20px;height:20px;flex:none;color:rgba(255,255,255,.55)}

/* ---------- Danke (Screen 5) ---------- */
.snf-checkring{width:96px;height:96px;border-radius:50%;border:3px solid var(--sn2-red);
  display:flex;align-items:center;justify-content:center;margin:.6rem auto 1.1rem;
  box-shadow:0 0 26px rgba(238,40,40,.6);animation:snf-ring .6s var(--sn-ease,ease) both}
@keyframes snf-ring{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.snf-checkring svg{width:48px;height:48px;color:#ff5a3c}

/* =====================================================================
   Admin-Dashboard (Screen 6)
   ===================================================================== */
body.sn-admin2{background:var(--sn2-paper);color:var(--sn2-ink)}
.snd{display:grid;grid-template-columns:262px 1fr;min-height:100dvh}
.snd-side{position:relative;background:#0c0c0e;color:#fff;display:flex;flex-direction:column;
  padding:1.6rem 1.1rem;overflow:hidden}
.snd-side::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:radial-gradient(120% 90% at 20% 100%,rgba(226,31,35,.5),transparent 60%)}
.snd-side>*{position:relative;z-index:1}
.snd-logo{height:120px;width:auto;margin:0 auto 1.8rem;display:block;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.snd-nav{display:flex;flex-direction:column;gap:.3rem}
.snd-nav a{display:flex;align-items:center;gap:.85rem;padding:.78rem .95rem;border-radius:11px;
  color:rgba(255,255,255,.74);font-weight:500;font-size:.97rem;transition:.15s}
.snd-nav a svg{width:20px;height:20px;flex:none}
.snd-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.snd-nav a.is-active{background:var(--sn2-grad);color:#fff;box-shadow:0 8px 22px rgba(200,20,26,.4)}
.snd-side-foot{margin-top:auto}
.snd-side-foot a{display:flex;align-items:center;gap:.85rem;padding:.78rem .95rem;border-radius:11px;
  color:rgba(255,255,255,.7);font-weight:500}
.snd-side-foot a svg{width:20px;height:20px}
.snd-side-foot a:hover{background:rgba(255,255,255,.06);color:#fff}

.snd-main{padding:2rem 2.2rem;overflow:auto}
.snd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.snd-h1{font-family:var(--display);font-weight:800;font-size:2.1rem;color:#17171a;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.snd-evtbadge{font-family:var(--body);font-weight:600;font-size:.85rem;color:#444;background:#fff;
  border:1px solid #e3e3e8;border-radius:9px;padding:.4rem .8rem;display:inline-flex;align-items:center;gap:.45rem}
.snd-evtbadge svg{width:16px;height:16px;color:var(--sn2-red)}
.snd-sub{color:#71717a;margin-top:.35rem;font-size:.98rem}
.snd-dlbtn{display:inline-flex;align-items:center;gap:.6rem;background:var(--sn2-grad);color:#fff;
  font-weight:700;font-size:.92rem;padding:.8rem 1.25rem;border-radius:12px;
  box-shadow:0 10px 24px rgba(200,20,26,.35);transition:.18s}
.snd-dlbtn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(200,20,26,.45)}
.snd-dlbtn svg{width:18px;height:18px}

.snd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:1.6rem}
.snd-stat{background:#fff;border:1px solid #ececf0;border-radius:18px;padding:1.2rem 1.25rem;
  box-shadow:0 2px 10px rgba(20,20,30,.04)}
.snd-stat-top{display:flex;align-items:center;gap:1rem}
.snd-stat-ico{width:52px;height:52px;border-radius:13px;background:#fdeaea;color:var(--sn2-red);
  display:flex;align-items:center;justify-content:center;flex:none}
.snd-stat-ico--grey{background:#f0f0f3;color:#7a7a85}
.snd-stat-ico svg{width:27px;height:27px}
.snd-stat-num{font-family:var(--display);font-weight:800;font-size:1.85rem;color:#18181b;line-height:1}
.snd-stat-lbl{color:#74747e;font-size:.9rem;margin-top:.2rem}
.snd-stat-sub{color:var(--sn2-red);font-weight:600;font-size:.88rem;margin-top:.9rem}
.snd-pbar{height:8px;border-radius:4px;background:#eee;overflow:hidden;margin-top:.55rem}
.snd-pbar i{display:block;height:100%;background:var(--sn2-grad)}

.snd-cols{display:grid;grid-template-columns:1fr 332px;gap:1.3rem;margin-top:1.3rem;align-items:start}
.snd-panel{background:#fff;border:1px solid #ececf0;border-radius:18px;padding:1.3rem 1.35rem;
  box-shadow:0 2px 10px rgba(20,20,30,.04)}
.snd-panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.snd-panel-h h2{font-family:var(--display);font-weight:800;font-size:1.18rem;color:#1a1a1d}
.snd-panel-h a{color:var(--sn2-red);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem}
.snd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.snd-photo{border-radius:13px;overflow:hidden;background:#0c0c0e;position:relative;display:block}
.snd-photo img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.snd-photo-cap{padding:.5rem .55rem}
.snd-photo-name{font-size:.78rem;font-weight:600;color:#26262b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snd-photo-time{font-size:.72rem;color:#9a9aa2}
.snd-more{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin-top:1rem;
  color:#71717a;font-size:.9rem;padding:.5rem}
.snd-empty{color:#9a9aa2;padding:1.5rem 0;text-align:center}

.snd-act{display:flex;flex-direction:column;gap:.55rem}
.snd-act-row{display:flex;align-items:center;gap:.8rem;padding:.55rem .3rem;border-bottom:1px solid #f1f1f4}
.snd-act-row:last-child{border-bottom:0}
.snd-act-thumb{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;background:#0c0c0e}
.snd-act-info{flex:1;min-width:0}
.snd-act-name{font-size:.85rem;font-weight:600;color:#26262b}
.snd-act-meta{font-size:.76rem;color:#9a9aa2}
.snd-act-ico{color:var(--sn2-red);flex:none}
.snd-act-ico svg{width:18px;height:18px}
.snd-act-all{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin-top:1rem;
  border:1px solid #ececf0;border-radius:11px;padding:.7rem;color:#3a3a42;font-weight:600;font-size:.88rem}
.snd-act-all:hover{background:#fafafb}

.snd-quick{margin-top:1.3rem}
.snd-quick h2{font-family:var(--display);font-weight:800;font-size:1.18rem;color:#1a1a1d;margin-bottom:1rem}
.snd-quick-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.snd-qbtn{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;
  border:1px solid #ececf0;border-radius:14px;padding:1.1rem .8rem;color:#3a3a42;font-weight:600;font-size:.86rem;
  background:#fff;transition:.15s}
.snd-qbtn:hover{border-color:rgba(226,31,35,.4);box-shadow:0 6px 18px rgba(20,20,30,.06);transform:translateY(-1px)}
.snd-qbtn svg{width:24px;height:24px;color:var(--sn2-red)}
.snd-foot{text-align:center;color:#b6b6bd;font-family:var(--eyebrow);text-transform:uppercase;
  letter-spacing:.16em;font-size:.62rem;margin-top:2rem}

@media (max-width:960px){
  .snd{grid-template-columns:1fr}
  .snd-side{flex-direction:row;align-items:center;padding:.8rem 1rem;gap:.6rem;overflow-x:auto}
  .snd-side::after{display:none}
  .snd-logo{height:46px;margin:0 .6rem 0 0}
  .snd-nav{flex-direction:row;flex:1}
  .snd-nav a span{display:none}
  .snd-side-foot{margin:0}
  .snd-side-foot a span{display:none}
  .snd-main{padding:1.2rem}
  .snd-stats{grid-template-columns:repeat(2,1fr)}
  .snd-cols{grid-template-columns:1fr}
  .snd-grid{grid-template-columns:repeat(3,1fr)}
  .snd-quick-row{grid-template-columns:repeat(2,1fr)}
}

/* Datenschutz-Seite */
.snf-legal{max-width:560px}
.snf-legal h2{font-family:var(--display);font-weight:800;font-size:1.4rem;color:#171717;margin:.2rem 0 .6rem}
.snf-legal h3{font-family:var(--display);font-weight:700;font-size:1.08rem;color:#222;margin:1.1rem 0 .35rem}
.snf-legal h4{font-weight:700;font-size:.98rem;color:#333;margin:.9rem 0 .3rem}
.snf-legal p{font-size:.92rem;color:#3a3a42;line-height:1.6;margin:.5rem 0}
.snf-legal ul{margin:.4rem 0 .6rem 1.1rem}
.snf-legal li{font-size:.92rem;color:#3a3a42;line-height:1.55;margin:.2rem 0}
.snf-legal a{color:var(--sn2-red);text-decoration:underline}

/* Admin: Fotos-Verwaltung (helles Theme) */
.snd-bar2{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1.4rem 0 1rem}
.snd-filters{display:flex;gap:.5rem;flex-wrap:wrap}
.snd-fpill{font-size:.86rem;font-weight:600;color:#52525b;background:#fff;border:1px solid #e4e4ea;
  border-radius:999px;padding:.42rem .95rem;transition:.15s}
.snd-fpill:hover{border-color:rgba(226,31,35,.45)}
.snd-fpill.is-active{background:var(--sn2-grad);color:#fff;border-color:transparent}
.snd-tools{display:flex;gap:.5rem}
.snd-tool{font-size:.86rem;font-weight:600;color:#3a3a42;background:#fff;border:1px solid #e4e4ea;
  border-radius:10px;padding:.5rem .95rem}
.snd-tool:hover{border-color:rgba(226,31,35,.45)}
.snd-tool--red{background:var(--sn2-grad);color:#fff;border-color:transparent}
.snd-photo .snd-del{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:16px;line-height:26px;text-align:center;font-weight:700;
  border:0;cursor:pointer;backdrop-filter:blur(4px)}
.snd-photo .snd-del:hover{background:var(--sn2-red)}
.snd-photo form{position:absolute;top:0;right:0}
.snd-pbadge{position:absolute;top:6px;left:6px;font-size:.64rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:.16rem .45rem;border-radius:6px}
.snd-pbadge--bad{background:#fde2e2;color:#b3141a}
.snd-pbadge--warn{background:#fff3d6;color:#9a6b00}
.snd-grid--manage{grid-template-columns:repeat(5,1fr)}
@media (max-width:960px){ .snd-grid--manage{grid-template-columns:repeat(3,1fr)} }

/* Speicher-Balken mit Prozent */
.snd-pwrap{display:flex;align-items:center;gap:.6rem;margin-top:.55rem}
.snd-pwrap .snd-pbar{flex:1;margin-top:0}
.snd-ppct{font-size:.8rem;font-weight:600;color:#71717a;flex:none}

/* ---------- Smoothere Screen-Übergänge ---------- */
.snf-screen.is-active{animation:snf-in .52s cubic-bezier(.16,1,.3,1) both}
.snf-screen.is-leaving{display:flex !important;animation:snf-out .19s ease forwards}
@keyframes snf-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px) scale(.99)}}
@media (prefers-reduced-motion: reduce){ .snf-screen.is-active,.snf-screen.is-leaving{animation:none} }

/* ---------- Eingabefelder auf weißer Karte ---------- */
.snf-fields{display:flex;flex-direction:column;gap:.55rem;margin:.2rem 0 .9rem}
.snf-field{width:100%;border:1.5px solid #d9d9e0;border-radius:11px;padding:.78rem .9rem;
  font-family:var(--body);font-size:1rem;color:#1a1a1d;background:#fafafb;transition:.15s}
.snf-field::placeholder{color:#9a9aa2}
.snf-field:focus{outline:none;border-color:var(--sn2-red);background:#fff;box-shadow:0 0 0 3px rgba(226,31,35,.12)}

/* ---------- Einwilligung kompakter ---------- */
.snf-card--compact{padding:1.4rem 1.3rem 1.3rem}
.snf-card--compact .snf-card-h{font-size:1.45rem}
.snf-card--compact .snf-card-rule{margin:.55rem auto .9rem}
.snf-card--compact .snf-card-intro{font-size:.9rem;margin-bottom:.2rem}
.snf-card--compact .snf-purpose{padding:.6rem 0;gap:.8rem}
.snf-card--compact .snf-purpose-ico{width:34px;height:34px;border-radius:8px}
.snf-card--compact .snf-purpose-ico svg{width:21px;height:21px}
.snf-card--compact .snf-purpose span{font-size:.94rem}
.snf-card--compact .snf-confirm{font-size:.84rem;margin:.7rem 0 .8rem;line-height:1.45}
.snf-card--compact .snf-cardcheck{margin-bottom:.9rem;gap:.6rem}
.snf-card--compact .snf-cardcheck input{width:23px;height:23px}
.snf-card--compact .snf-cardcheck input:checked::after{left:7px;top:3px;width:6px;height:11px}
.snf-card--compact .snf-cardcheck span{font-size:.86rem}
.snf-card--compact .snf-consent-detail summary{font-size:.78rem}

/* ---------- Admin-Einstellungen (helles Theme) ---------- */
.snd-form{display:flex;flex-direction:column;gap:1.2rem;max-width:900px}
.snd-flash{background:#e7f8ee;border:1px solid #bfe9d0;color:#1c7a44;border-radius:11px;padding:.7rem 1rem;font-size:.9rem;margin-bottom:1rem}
.snd-flash--err{background:#fdeaea;border-color:#f3c6c6;color:#b3141a}
.snd-panel h2{font-family:var(--display);font-weight:800;font-size:1.12rem;color:#1a1a1d}
.snd-desc{color:#71717a;font-size:.86rem;margin:.2rem 0 1rem}
.snd-fld{display:flex;flex-direction:column;gap:.32rem;margin-bottom:.85rem}
.snd-fld:last-child{margin-bottom:0}
.snd-flabel{font-size:.84rem;font-weight:600;color:#3a3a42}
.snd-input,.snd-textarea,.snd-select{width:100%;border:1.5px solid #e2e2e8;border-radius:10px;
  padding:.6rem .8rem;font-family:var(--body);font-size:.95rem;color:#1b1b1d;background:#fff;transition:.15s}
.snd-input:focus,.snd-textarea:focus,.snd-select:focus{outline:none;border-color:var(--sn2-red);box-shadow:0 0 0 3px rgba(226,31,35,.1)}
.snd-textarea{min-height:84px;resize:vertical;line-height:1.5}
.snd-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:#33333a;margin:.45rem 0;cursor:pointer}
.snd-check input{width:18px;height:18px;margin-top:.12rem;accent-color:var(--sn2-red);flex:none}
.snd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.snd-hintword{color:#9a9aa2;font-weight:400}
.snd-bgthumbs{display:flex;flex-wrap:wrap;gap:.7rem;margin:.5rem 0}
.snd-bgthumb{width:86px;text-align:center;font-size:.72rem;color:#71717a}
.snd-bgthumb img{width:86px;height:86px;object-fit:cover;border-radius:9px;border:1px solid #e2e2e8;margin-bottom:.25rem}
.snd-logoprev{height:84px;width:auto;background:#0c0c0e;border-radius:9px;padding:7px;margin-bottom:.4rem}
.snd-save{display:flex;gap:.8rem;align-items:center;position:sticky;bottom:0;
  background:linear-gradient(180deg,rgba(244,244,246,0),var(--sn2-paper) 45%);padding:1.1rem 0 .4rem}
.snd-savebtn{display:inline-flex;align-items:center;gap:.5rem;background:var(--sn2-grad);color:#fff;
  font-weight:700;font-size:.95rem;padding:.8rem 1.5rem;border-radius:12px;box-shadow:0 10px 24px rgba(200,20,26,.35);cursor:pointer;border:0}
.snd-savebtn:hover{transform:translateY(-1px)}
.snd-back{color:#52525b;font-weight:600;font-size:.9rem}
@media (max-width:960px){ .snd-grid2{grid-template-columns:1fr} }

/* ---------- Kompakte Icon-Buttons (Foto aufnehmen / Galerie) ---------- */
.snf-pick2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;width:100%;margin-top:.3rem}
.snf-iconbtn{display:flex;align-items:center;justify-content:center;height:68px;border-radius:18px;cursor:pointer;
  background:var(--sn2-grad);color:#fff;
  box-shadow:0 12px 30px rgba(200,20,26,.4),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s var(--sn-ease,ease),box-shadow .18s,filter .18s}
.snf-iconbtn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(200,20,26,.5),inset 0 1px 0 rgba(255,255,255,.32)}
.snf-iconbtn:active{transform:translateY(0) scale(.98)}
.snf-iconbtn:focus-visible{outline:3px solid rgba(255,255,255,.6);outline-offset:2px}
.snf-iconbtn svg{width:32px;height:32px}
.snf-iconbtn--light{background:linear-gradient(180deg,#fff,#ededed);color:var(--sn2-red);
  box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 #fff}
.snf-iconbtn--light:hover{box-shadow:0 16px 34px rgba(0,0,0,.45)}
.snf-iconbtn--light:focus-visible{outline-color:rgba(226,31,35,.5)}

/* ---------- Fotos: Mehrfachauswahl zum Löschen ---------- */
.snd-selbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1rem;
  background:#fff;border:1px solid #ececf0;border-radius:13px;padding:.7rem 1rem}
.snd-selbar label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:#3a3a42;cursor:pointer}
.snd-selbar input[type=checkbox]{width:18px;height:18px;accent-color:var(--sn2-red);cursor:pointer}
.snd-selcount{font-size:.88rem;color:#71717a}
.snd-delsel{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;background:var(--sn2-grad);
  color:#fff;font-weight:700;font-size:.88rem;padding:.6rem 1.15rem;border-radius:10px;border:0;cursor:pointer;
  box-shadow:0 8px 20px rgba(200,20,26,.3);transition:.15s}
.snd-delsel:hover{transform:translateY(-1px)}
.snd-delsel[disabled]{filter:grayscale(.6);opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.snd-pick{position:absolute;top:6px;left:6px;z-index:3;display:flex;width:30px;height:30px;
  align-items:center;justify-content:center;border-radius:8px;background:rgba(0,0,0,.5);backdrop-filter:blur(3px)}
.snd-pick input{width:18px;height:18px;accent-color:var(--sn2-red);cursor:pointer;margin:0}
.snd-photo.is-sel{outline:3px solid var(--sn2-red);outline-offset:-2px}
.snd-photo.is-sel img{filter:brightness(.82)}