/* =========================================================================
   Galerie — Startseite „Galerie erstellen“
   Nur seitenspezifische Regeln; Tokens und Bausteine kommen aus app.css.
   ========================================================================= */

/* ---- Hero: großes Logo, Überzeile, Headline ---- */
.hero{display:grid; grid-template-rows:1fr; margin:-14px 0 26px; text-align:center;
  transition:grid-template-rows .65s var(--ease),opacity .45s var(--ease),margin .65s var(--ease)}
/* Kein Innenabstand hier: beim Zusammenklappen (0fr) bliebe er sonst stehen */
.hero-in{min-height:0; overflow:hidden}
.hero-in > :last-child{margin-bottom:6px}
.hero-mark{position:relative; width:clamp(78px,20vw,104px); margin:30px auto 20px}
.is-init .hero,.is-init .stage.is-current{transition:none; animation:none}
.hero-mark .logo{position:relative; z-index:1}
/* Weicher Schatten unter dem Logo, damit es auf dem Papier „steht“ */
.hero-mark::after{content:""; position:absolute; left:14%; right:14%; bottom:-10px; height:18px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(58,48,45,.32),transparent); filter:blur(4px);
  animation:heroShadow 1.2s var(--ease) .9s both}
@keyframes heroShadow{from{opacity:0;transform:scaleX(.6)}to{opacity:1;transform:none}}
/* Gestaffelter Auftritt (.enter aus app.css liest --i) */
.hero .eyebrow{margin-bottom:10px; --i:1}
.hero-title{--i:2} .hero-lead{--i:3} .hero-feats{--i:4} .create-card{--i:3}
.hero-title{max-width:16ch; margin:0 auto}
.hero-accent{background:linear-gradient(100deg,var(--braun) 8%,var(--gruen-text) 52%,var(--blau-deep) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.hero-lead{margin:14px auto 0; max-width:46ch}
.hero-feats{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.hero-feats li{display:inline-flex; align-items:center; gap:7px; padding:6px 13px 6px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--ink-60); font-size:.8rem; font-weight:500}
.hero-feats svg{width:15px; height:15px; color:var(--gruen-text)}
/* Ab „Details“ tritt der Hero zurück – die Karte rückt nach oben */
.is-compact .hero{grid-template-rows:0fr; opacity:0; margin:0}

/* ---- Karte ---- */
/* clip statt hidden: schneidet genauso ab, lässt aber position:sticky (Leiste unten) arbeiten */
.create-card{scroll-margin-top:12px; overflow:hidden; overflow:clip}
.card-alert{padding:4px 30px 0}
.notices{display:flex; flex-direction:column; gap:10px; padding:6px 30px 0}
.notices:empty{display:none}
.page-create:not([data-stage="0"]):not([data-stage="1"]) .notices{display:none}
.stage-title:focus{outline:none}
.stage-title:focus-visible{outline:2.5px solid var(--gruen-text); outline-offset:4px; border-radius:6px}

/* Richtungsbewusster Bühnenwechsel */
.stage.is-current{animation:stageFwd .55s var(--ease)}
.stage.is-current.is-back{animation:stageBack .55s var(--ease)}
@keyframes stageFwd{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes stageBack{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

.stage-head{text-align:center; margin:4px 0 20px}
.stage-head h2{font-size:1.3rem; margin:0 0 4px}
.stage-head p{margin:0 auto; color:var(--ink-60); font-size:.92rem; max-width:44ch}

/* Hinweis-Kästen oben in der Karte */
.note{display:flex; align-items:flex-start; gap:12px; padding:12px 12px 12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--gruen-wash); color:var(--gruen-text); font-size:.88rem; line-height:1.45;
  animation:alertIn .45s var(--ease)}
.note > svg{width:18px; height:18px; flex:0 0 auto; margin-top:1px}
.note--warn{background:var(--braun-wash); border-color:var(--braun-line); color:var(--braun)}
.note-main{flex:1; min-width:0}
.note-main b{font-weight:600}
.note-acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.note .iconbtn{margin:-6px -4px -6px 0; color:inherit}

/* =========================================================================
   Bühne 0: Zugangscode
   ========================================================================= */
.gate{text-align:center; padding:14px 0 4px}
.gate-ico{width:64px; height:64px; margin:0 auto 14px; border-radius:18px; display:grid; place-items:center;
  background:var(--braun-wash); color:var(--braun); position:relative}
.gate-ico svg{width:30px; height:30px}
.gate-ico::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px dashed var(--line); animation:spin 30s linear infinite}
/* Bei der Code-Eingabe noch keine Schritte zeigen (wie im Upload-Kanal) */
.is-locked .board{display:none}
.is-locked .gate{padding-top:30px}
.gate h2{font-family:var(--font-head); font-weight:500; font-size:1.18rem; margin:.2rem 0 .3rem}
.gate-text{color:var(--ink-60); margin:0 auto; font-size:.92rem; max-width:44ch}
.gate .code-row input{font-size:1.06rem}
.gate .code-row input[aria-invalid="true"]{border-color:#e0a79d; box-shadow:0 0 0 4px rgba(251,236,234,.95)}
.gate-error{justify-content:center; margin-top:12px}

/* Freigeschalteter Code über der Auswahl */
.pass{display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:9px 8px 9px 12px; border-radius:10px;
  background:var(--gruen-wash); border:1px solid var(--line); color:var(--gruen-text); font-size:.84rem; line-height:1.35}
.pass > svg{width:16px; height:16px; flex:0 0 auto}
.pass-txt{flex:1; min-width:0}
.pass-txt b{font-family:var(--mono); font-size:.92em; letter-spacing:.05em; white-space:nowrap}
.pass-change{border:0; background:transparent; color:var(--ink-60); font:inherit; font-size:.8rem; text-decoration:underline;
  text-underline-offset:2px; cursor:pointer; padding:8px 6px; margin:-10px -2px; border-radius:8px; flex:0 0 auto; min-height:44px}
@media (hover:hover){.pass-change:hover{color:var(--braun)}}
.pass-change:focus-visible{outline:none; box-shadow:var(--focus)}

/* =========================================================================
   Bühne 1: Auswahl
   ========================================================================= */
.sel-drop{padding:44px 24px 40px}
.sel-drop .dz-ico{width:70px; height:70px; border-radius:20px}
.sel-drop .dz-ico svg{width:32px; height:32px}
.dz-when-more{display:none}
/* Mit Auswahl wird die Zone zur kompakten „Weitere hinzufügen“-Leiste */
.sel-drop.dropzone--compact{padding:14px 16px; margin-top:12px}
.sel-drop.dropzone--compact .dz-ico{width:46px; height:46px; border-radius:13px}
.sel-drop.dropzone--compact .dz-ico svg{width:22px; height:22px}
.sel-drop.dropzone--compact .dz-when-empty{display:none}
.sel-drop.dropzone--compact .dz-when-more{display:inline}
.sel-drop.dropzone--compact .dz-title{font-size:1rem}
.sel-drop.dropzone--compact .dz-text{font-size:.84rem}
.sel-drop.dropzone--compact .dz-hint{display:none}
.sel-drop .dz-hint{max-width:44ch}
.dz-copy{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0}
.dz-copy p{margin:0}
.sel-drop.dropzone--compact .dz-copy{align-items:flex-start; gap:1px}

.sel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.sel-head h3{margin:0}
.sel-clear{font-size:.82rem; color:var(--ink-60)}

/* Kachelraster */
.tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px}
.tile{position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--braun-wash);
  box-shadow:inset 0 0 0 1px rgba(79,66,62,.06); isolation:isolate; contain:layout paint}
.tile.is-new{animation:tileIn .55s var(--ease-spring) both; animation-delay:calc(var(--i,0) * 28ms)}
@keyframes tileIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  animation:fadeIn .5s var(--ease); transition:transform .6s var(--ease)}
@media (hover:hover){.tile:hover img{transform:scale(1.05)}}
.tile-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:var(--braun); background:linear-gradient(145deg,#F6F2F0,#ECE5E1)}
.tile-ph svg{width:24px; height:24px; opacity:.7}
.tile-ext{font-family:var(--font-head); font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.75}
.tile.has-img .tile-ph{display:none}
/* Ladeschimmer, solange das Vorschaubild entsteht */
.tile.is-loading::after{content:""; position:absolute; inset:0; z-index:1; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:sheen 1.4s ease-in-out infinite}
/* Video: Abspielzeichen + Dauer */
.tile-badge{position:absolute; left:6px; bottom:6px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  padding:3px 7px 3px 5px; border-radius:99px; background:rgba(26,21,19,.62); color:#fff; font-size:.68rem; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.2; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.tile-badge svg{width:9px; height:9px}
.tile-dur:empty{display:none}
/* Entfernen: großer Trefferbereich, kleiner sichtbarer Kreis */
.tile-x{position:absolute; top:0; right:0; z-index:3; width:44px; height:44px; padding:0; border:0; background:transparent;
  display:grid; place-items:center; cursor:pointer; color:var(--ink)}
.tile-x::before{content:""; position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.9); box-shadow:0 2px 8px -2px rgba(30,24,22,.35); transition:transform .25s var(--ease-spring),background-color .2s}
.tile-x svg{position:relative; width:13px; height:13px; margin:-6px -6px 0 0; stroke-width:2.6}
@media (hover:hover){
  .tile-x{opacity:0; transition:opacity .2s var(--ease)}
  .tile:hover .tile-x,.tile-x:focus-visible{opacity:1}
  .tile-x:hover::before{transform:scale(1.12); background:#fff}
}
.tile-x:focus-visible{outline:none}
.tile-x:focus-visible::before{box-shadow:var(--focus)}

/* Übersprungene Dateien */
.skipped{margin-top:14px}
.skipped .alert{position:relative; padding-right:48px}
.skipped .alert .iconbtn{position:absolute; top:4px; right:4px; color:inherit}
.skip-list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.82rem}
.skip-list li{display:flex; flex-direction:column; min-width:0; line-height:1.35}
.skip-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.skip-why{font-size:.78rem; opacity:.85}
.skip-more{opacity:.8}

/* „+ n weitere“ als letzte Kachel */
.tile--more{background:var(--gruen-wash); box-shadow:inset 0 0 0 1px var(--line)}
.tile-more-btn{position:absolute; inset:0; border:0; padding:4px; background:transparent; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; color:var(--gruen-text); cursor:pointer; font:inherit; border-radius:inherit; transition:background-color .2s}
.tile-more-btn b{font-family:var(--font-head); font-size:1.24rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tile-more-btn span{font-size:.72rem; font-weight:500}
@media (hover:hover){.tile-more-btn:hover{background:#E3EBE1}}
.tile-more-btn:focus-visible{outline:none; box-shadow:inset 0 0 0 3px var(--gruen-text)}

/* Summe + Weiter: Leiste, die beim Scrollen unten am Bildschirm mitläuft */
.sel-foot{position:sticky; bottom:0; z-index:6; display:flex; align-items:center; gap:14px;
  margin:18px -30px -30px; padding:12px 30px calc(12px + var(--safe-b));
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--line-soft); box-shadow:0 -14px 30px -24px rgba(79,66,62,.45)}
.sel-sum{display:flex; align-items:center; gap:12px; flex:1; min-width:0}
.sel-sum-ico{width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:var(--gruen-wash); color:var(--gruen-text)}
.sel-sum-ico svg{width:20px; height:20px}
.sel-sum-txt{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.sel-sum-txt b{font-family:var(--font-head); font-weight:600; font-size:.98rem; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sel-sum-txt span{color:var(--ink-60); font-size:.84rem}
.sel-foot .actions{margin:0; flex:0 0 auto}
.sel-foot .actions .btn{width:auto}

/* =========================================================================
   Bühne 2: Details + Live-Vorschau
   ========================================================================= */
.details{display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:26px; align-items:start}
.details-form{order:1; min-width:0}
.gprev-wrap{order:2; position:sticky; top:16px; min-width:0}
.req{color:var(--rot); font-weight:600}
.date-wrap input{padding-left:44px; position:relative}
.date-wrap > svg{z-index:1}
/* Ganzes Feld öffnet den Kalender (statt nur das kleine Symbol rechts) – unser Symbol links zeigt es an */
.date-wrap input::-webkit-calendar-picker-indicator{position:absolute; inset:0; width:auto; height:auto; margin:0; padding:0; opacity:0; cursor:pointer; background:none}

/* Datumsvorschlag aus den Fotos */
.date-suggest{margin:0}
.date-chip{display:inline-flex; align-items:center; gap:7px; max-width:100%; min-height:36px; padding:6px 12px; border-radius:999px;
  border:1px dashed var(--gruen); background:var(--gruen-wash); color:var(--gruen-text); font:inherit; font-size:.8rem; font-weight:500;
  cursor:pointer; text-align:left; animation:alertIn .4s var(--ease); transition:background-color .2s,border-color .2s}
.date-chip svg{width:15px; height:15px; flex:0 0 auto}
.date-chip b{font-weight:600}
@media (hover:hover){.date-chip:hover{background:#E3EBE1; border-style:solid}}
.date-chip:focus-visible{outline:none; box-shadow:var(--focus)}

/* Passwortschutz */
.protect{border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; padding:14px 16px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.protect.is-on{border-color:var(--braun-line); box-shadow:0 0 0 4px var(--braun-wash)}
.pw-fields{display:flex; flex-direction:column; gap:7px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft);
  animation:alertIn .4s var(--ease)}
.pw-fields .field-row{min-height:38px}
.pw-row{display:flex}
.pw-row .pw-input input{letter-spacing:.01em; font-variant-numeric:tabular-nums}
.pw-suggest{flex:0 0 auto; margin-right:-4px}
/* Fuß der Details: Zusammenfassung + Knöpfe über die ganze Breite */
.details-foot{margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft)}
.details-sum{margin:0; color:var(--ink-60); font-size:.88rem; text-align:center}
.details-sum b{color:var(--ink); font-weight:600}
.details-foot .actions{margin-top:14px}

/* Vorschau-Karte: so ungefähr sieht der Kopf der Galerie aus */
.gprev-label{display:block; margin:0 0 8px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-30); font-weight:600; text-align:center}
.gprev{position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; isolation:isolate; color:#fff;
  background:radial-gradient(120% 90% at 20% 0%,#6b5a54 0%,#3a302d 70%); box-shadow:var(--shadow-lg),0 0 0 1px rgba(58,48,45,.06)}
.gprev-cover{position:absolute; inset:0; z-index:0}
.gprev-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:coverIn 1.4s var(--ease) both}
@keyframes coverIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.gprev::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,15,.18) 0%,rgba(20,16,15,0) 30%,rgba(20,16,15,.08) 48%,rgba(20,16,15,.78) 100%)}
.gprev-text{position:absolute; left:16px; right:16px; bottom:16px; z-index:2; display:flex; flex-direction:column; gap:4px; min-width:0}
.gprev-brand{display:inline-flex; align-items:center; gap:7px; margin-bottom:4px; font-size:.62rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; opacity:.9}
.gprev-brand .logo{width:15px; flex:0 0 auto}
.gprev-title{font-family:var(--font-head); font-weight:600; font-size:1.24rem; line-height:1.14; letter-spacing:-.02em;
  overflow-wrap:anywhere; text-wrap:balance; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 1px 14px rgba(0,0,0,.3)}
.gprev-title.is-empty{opacity:.5}
.gprev-meta{font-size:.78rem; opacity:.88; overflow-wrap:anywhere}
.gprev-meta:empty{display:none}
.gprev-lock{position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:5px 10px 5px 8px;
  border-radius:99px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.28); font-size:.68rem; font-weight:600;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:alertIn .4s var(--ease)}
.gprev-lock svg{width:12px; height:12px}
.gprev-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:6px}
.gprev-strip span{aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--braun-wash); position:relative}
.gprev-strip img{width:100%; height:100%; object-fit:cover; display:block; animation:fadeIn .5s var(--ease)}
.gprev-strip .more{display:grid; place-items:center; font-size:.72rem; font-weight:600; color:var(--braun); font-variant-numeric:tabular-nums}
.gprev-strip:empty{display:none}
.gprev-count{margin:8px 0 0; text-align:center; color:var(--ink-60); font-size:.78rem}

/* =========================================================================
   Bühne 3: Hochladen
   ========================================================================= */
.upl{display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:6px}
.upl-ring{position:relative; margin:10px auto 20px; display:grid; place-items:center}
.upl-ring .ring{transition:filter .5s var(--ease),opacity .5s var(--ease)}
.upl-ring .ring-center{will-change:transform}
.upl-ring.is-paused .ring,.upl-ring.is-offline .ring{filter:grayscale(.85); opacity:.72}
.upl-ring.is-paused .logo-anim--loop,.upl-ring.is-paused .logo-anim--loop .logo-path,.upl-ring.is-paused .logo-anim--loop .logo-halo,
.upl-ring.is-offline .logo-anim--loop,.upl-ring.is-offline .logo-anim--loop .logo-path,.upl-ring.is-offline .logo-anim--loop .logo-halo{animation-play-state:paused}
/* Ebene für die einfliegenden Vorschaubilder (Mitte des Rings = Ursprung) */
.fly-layer{position:absolute; left:50%; top:50%; width:0; height:0; z-index:4; pointer-events:none}
.flyer{position:absolute; left:-27px; top:-27px; width:54px; height:54px; border-radius:13px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 2px #fff,0 14px 26px -12px rgba(40,32,30,.6); will-change:transform,opacity; opacity:0}
.flyer img{width:100%; height:100%; object-fit:cover; display:block}
.flyer--ph{display:grid; place-items:center; background:linear-gradient(145deg,#F6F2F0,#E6DDD8); color:var(--braun)}
.flyer--ph svg{width:22px; height:22px}

.upl-title{font-size:1.36rem; margin:0}
.upl-sub{margin:4px 0 0; color:var(--ink-60); font-size:.92rem; overflow-wrap:anywhere; max-width:100%}
.upl-sub span + span::before{content:"·"; margin:0 .45em}
.upl-sub:empty{display:none}
.upl-stats{margin:14px 0 0; padding:7px 16px; border-radius:16px; text-wrap:balance; background:var(--gruen-wash); border:1px solid var(--line);
  color:var(--gruen-text); font-size:.86rem; font-weight:500; line-height:1.4; max-width:100%}
.upl-stats:empty{visibility:hidden}
.upl-eta::before{content:"·"; margin:0 .4em}
.upl-offline{width:100%; margin-top:14px; text-align:left}
.upl-offline svg{animation:dotPulse 1.6s ease-in-out infinite}
.upl-ctrl{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px}
.upl-ctrl .btn[aria-pressed="true"]{--btn-bg:var(--braun-wash); --btn-bd:var(--braun-line); --btn-fg:var(--braun)}
.upl-list{width:100%; margin-top:14px; text-align:left; animation:alertIn .4s var(--ease)}
.upl-list .uplist{max-height:min(46vh,380px); overflow-y:auto; overscroll-behavior:contain}
.upl-keep{display:flex; align-items:flex-start; justify-content:center; gap:8px; margin:20px 0 0; color:var(--ink-30); font-size:.8rem;
  line-height:1.45; max-width:44ch; text-align:left}
.upl-keep svg{width:15px; height:15px; flex:0 0 auto; margin-top:2px}
.upl-early{width:100%; margin-top:18px; display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; text-align:left;
  border:1px dashed var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,.7); color:var(--ink-60); font-size:.82rem; line-height:1.45}
.upl-early-ico{width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; background:var(--blau-wash); color:var(--blau-deep)}
.upl-early-ico svg{width:17px; height:17px}
.upl-early-txt{flex:1; min-width:0}
.upl-early-txt b{color:var(--ink); font-weight:600}
.upl-early .btn{flex:0 0 auto}

.upl-fail{width:100%; margin-top:16px; text-align:left}
.upl-fail-sub{display:block; font-weight:400; margin-top:2px}
.fail-list{list-style:none; margin:10px 0 0; padding:0; border:1px solid var(--rot-line); border-radius:var(--r-sm); background:#fff; overflow:hidden}
.fail-list li{display:flex; flex-direction:column; gap:1px; padding:9px 14px; border-bottom:1px solid var(--line-soft); font-size:.84rem; min-width:0}
.fail-list li:last-child{border-bottom:0}
.fail-list b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fail-list span{color:var(--rot-text); font-size:.8rem}
.fail-list .more{color:var(--ink-60)}
.upl-fail .actions{margin-top:14px}

/* =========================================================================
   Bühne 4: Teilen
   ========================================================================= */
.done-head{text-align:center; padding:4px 0 2px}
.done-stamp{position:relative; width:66px; height:66px; margin:2px auto 16px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gruen),var(--gruen-text)); color:#fff;
  box-shadow:0 0 0 8px var(--gruen-wash),0 18px 34px -14px rgba(94,116,88,.9); animation:stampIn .8s var(--ease-spring) both}
.done-stamp svg{width:30px; height:30px; stroke-width:2.6; stroke-dasharray:24; stroke-dashoffset:24; animation:checkDraw .55s var(--ease) .35s forwards}
.done-stamp::after{content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--gruen); animation:ringDone 1.3s var(--ease) .3s both; pointer-events:none}
@keyframes stampIn{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes checkDraw{to{stroke-dashoffset:0}}
.done-head.is-empty .done-stamp{background:linear-gradient(135deg,var(--blau),var(--blau-deep)); box-shadow:0 0 0 8px var(--blau-wash),0 18px 34px -14px rgba(78,107,122,.8)}
.done-head h2{font-size:1.55rem; margin:0}
.done-text{margin:8px auto 0; color:var(--ink-60); font-size:.95rem; max-width:46ch}
.done-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px}
.done-chips:empty{display:none}

.result-qr{margin-top:24px}
@media (min-width:561px){.result-qr .qr-code{width:204px}}
.qr-date{color:var(--ink-60); font-size:.88rem}
.qr-date:empty{display:none}
.qr-meta .qr-url{margin-top:2px}
.pwqr{margin-top:12px; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--blau-line); background:var(--blau-wash)}
.pwqr .switch-label b{font-size:.9rem}
.pwqr input:checked + .switch-track{background:var(--blau-deep)}
.result-link{margin-top:16px}
/* Links vollständig zeigen (umbrechend) – ein Tipp markiert alles */
.lb-text{flex:1; min-width:0; margin:0; padding:13px 16px; align-self:center; font-family:var(--mono); font-size:.84rem; line-height:1.5;
  color:var(--ink); overflow-wrap:anywhere; word-break:break-all; -webkit-user-select:all; user-select:all; cursor:text}
.linkbox--secret .lb-text{color:var(--braun-deep)}
.share-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px}
.share-btn{min-width:0; padding-left:12px; padding-right:12px}
.share-btn span{overflow:hidden; text-overflow:ellipsis}
.open-btn{margin-top:14px}

/* Verwaltungslink: ruhig, aber unübersehbar „nur für dich“ */
.adminbox{position:relative; margin-top:28px; padding:18px 18px 16px; border-radius:var(--r); background:var(--braun-wash);
  border:1px solid var(--braun-line); overflow:hidden}
.adminbox::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:repeating-linear-gradient(-45deg,var(--braun) 0 8px,transparent 8px 14px); opacity:.22}
.adminbox-head{display:flex; align-items:center; gap:11px}
.adminbox-ico{width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:#fff; color:var(--braun);
  box-shadow:0 6px 16px -10px rgba(79,66,62,.6)}
.adminbox-ico svg{width:20px; height:20px}
.adminbox h3{margin:0; color:var(--braun-deep); font-size:1.04rem}
.adminbox-text{margin:10px 0 12px; color:var(--braun); font-size:.9rem; line-height:1.5}
.adminbox .linkbox{border-color:var(--braun-line)}
.adminbox-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.adminbox-acts .btn{--btn-bd:var(--braun-line)}
.adminbox-note{display:flex; align-items:flex-start; gap:7px; margin:12px 0 0; color:var(--braun); opacity:.85; font-size:.78rem; line-height:1.45}
.adminbox-note svg{width:14px; height:14px; flex:0 0 auto; margin-top:2px}
.uses-note{margin-top:18px}
.new-row{margin-top:18px}

/* =========================================================================
   Deine Galerien auf diesem Gerät
   ========================================================================= */
.mine{margin:28px auto 0; max-width:var(--max)}
.mine-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:0 4px}
.mine-head h2{font-size:1.08rem; margin:0}
.mine-count{color:var(--ink-30); font-size:.8rem}
.mine-text{margin:2px 4px 0; color:var(--ink-30); font-size:.8rem}
.mine-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.mine-row{display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; grid-template-areas:"mono main acts x"; align-items:center; gap:4px 12px;
  padding:10px 6px 10px 10px; border:1px solid var(--line); border-radius:14px; background:var(--glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.mine-row.is-fresh{border-color:var(--gruen); box-shadow:0 0 0 4px var(--gruen-wash),var(--shadow-sm)}
.mine-mono{grid-area:mono; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff;
  font-family:var(--font-head); font-weight:600; font-size:1.05rem; background:linear-gradient(135deg,var(--c1,var(--gruen)),var(--c2,var(--gruen-text)))}
.mine-main{grid-area:main; min-width:0}
.mine-main b{display:block; font-weight:600; font-size:.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mine-main small{display:block; color:var(--ink-30); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mine-acts{grid-area:acts; display:flex; gap:6px}
.mine-x{grid-area:x}

/* =========================================================================
   Schmale Bildschirme
   ========================================================================= */
@media (max-width:760px){
  .details{grid-template-columns:1fr; gap:18px}
  .gprev-wrap{order:0; position:relative; top:auto}
  .gprev-label{display:none}
  .gprev{aspect-ratio:16/9}
  .gprev-strip{display:none}
  .gprev-count{display:none}
}
@media (max-width:560px){
  .hero{margin:0 0 20px}
  .hero-mark{margin-bottom:16px}
  .hero-lead{font-size:1rem}
  /* Auf dem Handy zählt jeder Zentimeter bis zur ersten Aktion – die Chips sagt der Text schon */
  .hero-feats{display:none}
  .hero-mark{width:76px}
  .card-alert,.notices{padding-left:20px; padding-right:20px}
  .stage-head{margin-bottom:16px}
  .stage-head h2{font-size:1.2rem}
  .stage-head p{font-size:.88rem}
  .sel-drop{padding:34px 18px 30px}
  .sel-foot{margin:16px -20px -30px; padding:10px 16px calc(10px + var(--safe-b)) 20px; gap:10px}
  .sel-sum-ico{display:none}
  .sel-foot .btn--lg{padding:13px 20px; min-height:52px; font-size:.98rem}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
  .tile{border-radius:10px}
  .gprev-text{left:14px; right:14px; bottom:12px}
  .gprev-title{font-size:1.12rem; -webkit-line-clamp:2; line-clamp:2}
  .upl-title{font-size:1.22rem}
  .upl-sub span{display:block}
  .upl-eta{display:block}
  .upl-eta::before{content:none}
  .upl-sub span + span::before{content:none}
  .stage .linkbox .lb-row{flex-direction:column; align-items:stretch}
  .stage .linkbox .lb-text{padding:12px 14px 13px; align-self:stretch}
  .stage .linkbox .copybtn{border-left:0; border-top:1px solid var(--line-soft); justify-content:center; min-height:48px}
  .upl-early{flex-wrap:wrap}
  .upl-early .btn{width:100%}
  .done-head h2{font-size:1.36rem}
  .share-row{gap:8px}
  .share-btn{flex-direction:column; gap:5px; padding:10px 6px; min-height:64px; font-size:.84rem}
  .adminbox{padding:16px 14px 14px}
  .adminbox-acts .btn{flex:1 1 auto}
  .mine-row{grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:"mono main x" "acts acts acts"; padding:10px 6px 10px 10px}
  .mine-acts{padding:4px 4px 0 0}
  .mine-acts .btn{flex:1 1 0}
}
/* Grobe Zeiger: auch das Auge im Passwortfeld mindestens 44 px */
@media (pointer:coarse){
  .page-create .pw-eye{width:44px; height:44px; right:3px}
  .page-create .pw-input input{padding-right:52px}
}

/* =========================================================================
   Weniger Bewegung
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .hero{transition:none}
  .gate-ico::after{animation:none}
  .tile.is-loading::after{display:none}
  .done-stamp svg{stroke-dashoffset:0}
  .flyer{display:none}
}