/* Secure Image Share — mobile-first, frisch & jugendlich */

:root{
  --bg:#faf7ff;
  --card:#ffffff;
  --text:#1c1730;
  --muted:#6e6680;
  --border:#e7e1f5;
  --accent-1:#7c3aed;
  --accent-2:#ec4899;
  --accent-contrast:#ffffff;
  --danger-bg:#ffe2ea;
  --danger-text:#9f1239;
  --success-bg:#dcfce7;
  --success-text:#166534;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, rgba(236,72,153,.10), transparent 55%),
    var(--bg);
}
*{box-sizing:border-box}
body{margin:0;-webkit-tap-highlight-color:transparent}
body.has-nav main.wrap{padding-bottom:calc(var(--nav-h) + 28px + var(--safe-b))}
a{color:var(--accent-1);text-decoration:none}
h1,h2,h3{line-height:1.15;margin:0 0 6px}
h1{font-size:1.45rem;font-weight:800}
h2{font-size:1.1rem;font-weight:800}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.86rem}

/* Top bar */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + var(--safe-t)) 16px 12px;
  background:rgba(250,247,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex;align-items:center;gap:8px;
  font-weight:800;font-size:1.05rem;color:var(--text);
}
.brand-mark{
  width:28px;height:28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#fff;font-size:.95rem;flex:0 0 auto;
}
.iconbtn{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  color:var(--text);background:#fff;border:1px solid var(--border);
}
.iconbtn:active{transform:scale(.94)}

.topbar-right{display:flex;align-items:center;gap:10px}
.langlink{font-size:.78rem;font-weight:700;color:var(--muted);padding:4px 2px}
.langlink.active{color:var(--accent-1)}
.lang-sep{color:var(--border);font-size:.78rem}

/* Layout */
.wrap{max-width:640px;margin:auto;padding:16px}
main{min-height:100vh}

.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;margin:14px 0;
  box-shadow:0 8px 28px rgba(90,40,180,.06);
}
.card.danger{border-color:#f2c9d4;background:linear-gradient(180deg,#fff,#fff5f8)}

/* Forms */
label{display:block;font-weight:700;font-size:.92rem;margin-top:16px;margin-bottom:2px}
input,select,button,textarea{
  width:100%;padding:13px 14px;margin-top:6px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font:inherit;font-size:16px;background:#fff;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-1);box-shadow:0 0 0 4px rgba(124,58,237,.12)}
input::file-selector-button{
  border:0;border-radius:999px;padding:9px 14px;margin-right:10px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;font-weight:700;
}

button{
  cursor:pointer;font-weight:800;letter-spacing:.2px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:var(--accent-contrast);border:0;border-radius:999px;
  box-shadow:0 8px 18px rgba(124,58,237,.28);
  transition:transform .12s ease,box-shadow .12s ease;
}
button:active{transform:scale(.97);box-shadow:0 4px 10px rgba(124,58,237,.24)}
button.secondary{
  background:#fff;color:var(--accent-1);border:1.5px solid var(--accent-1);
  box-shadow:none;
}
button.ghost{
  background:transparent;color:var(--text);border:1.5px solid var(--border);
  box-shadow:none;font-weight:700;
}

.btnlink{
  display:block;text-align:center;padding:13px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#fff;font-weight:800;box-shadow:0 8px 18px rgba(124,58,237,.28);
}
.btnlink.secondary{background:#fff;color:var(--accent-1);border:1.5px solid var(--accent-1);box-shadow:none}
.btnlink.small{display:inline-block;padding:9px 16px;font-size:.85rem;margin-top:10px;box-shadow:none;border:1.5px solid var(--accent-1);background:#fff;color:var(--accent-1)}

.error,.success{padding:12px 14px;border-radius:var(--radius-sm);margin:12px 0;font-weight:600;font-size:.94rem}
.error{background:var(--danger-bg);color:var(--danger-text)}
.success{background:var(--success-bg);color:var(--success-text)}

/* Password field with toggle + generate */
.pwfield{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.pwfield input{flex:1 1 160px;margin-top:0}
.pwfield .pwtoggle,.pwfield .pwgen{
  width:auto;margin-top:0;padding:11px 13px;flex:0 0 auto;
}
.pwfield .pwtoggle{background:#fff;color:var(--text);border:1.5px solid var(--border);box-shadow:none}
.pwfield .pwgen{background:#fff;color:var(--accent-1);border:1.5px solid var(--accent-1);box-shadow:none;display:flex;align-items:center;gap:6px;font-size:.88rem}

/* Image picker (newtoken) */
.imgpick{
  display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;margin-top:8px;font-weight:600;
}
.imgpick input[type=checkbox]{width:auto;margin:0;accent-color:var(--accent-1);flex:0 0 auto}
.imgpick .pickthumb{width:40px;height:40px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#eee}
.imgpick span{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imgpick .viewlink{
  flex:0 0 auto;font-size:.85rem;font-weight:700;color:var(--accent-1);
  padding:4px 10px;border-radius:999px;background:#f3ecff;
}
.pickcount{margin-top:10px}

/* Tables */
.tablewrap{overflow:auto;border-radius:var(--radius-sm)}
table{width:100%;border-collapse:collapse;min-width:640px}
td,th{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:.92rem}
th{color:var(--muted);font-weight:700}
table form{margin:0}
table button{padding:9px 12px;font-size:.85rem;width:auto}

/* Gallery */
.gallery-wrap{padding-top:8px}
.gallery{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;gap:0;overscroll-behavior-x:contain;
  border-radius:var(--radius-lg);
}
.gallery::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 100%;margin:0;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;
  min-height:64vh;background:#141021;overflow:hidden;
}
.slide img{max-width:100%;max-height:76vh;width:auto;height:auto;object-fit:contain;display:block}
.dots{text-align:center;padding:12px}
.dot{
  width:8px;height:8px;padding:0;margin:4px;border-radius:50%;
  display:inline-block;background:#d9d0f0;border:0;box-shadow:none;
}
.dot.active{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));width:20px;border-radius:999px}

/* Bottom navigation (mobile-first, kept on all sizes for consistency) */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;
  padding:9px 6px calc(9px + var(--safe-b));
  background:#fff;backdrop-filter:blur(12px);
  /* Deutlich abgesetzt statt fast unsichtbar: kraeftigere Kante plus Schatten nach oben. */
  border-top:1px solid #ddd4f0;
  box-shadow:0 -6px 20px rgba(60,20,120,.10);
}
.navitem{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  /* Vorher var(--muted) auf Weiss -- zu schwach. */
  color:#4a4360;font-size:.7rem;font-weight:800;
  padding:7px 12px;border-radius:14px;min-width:60px;
}
.navitem svg{display:block;stroke-width:2.2}
.navitem.active{color:#fff;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));box-shadow:0 4px 12px rgba(124,58,237,.32)}
.navitem.active svg{stroke-width:2.4}
.navitem:active{transform:scale(.94)}

/* Tabs (Dashboard-Archiv, Admin-Bereiche) — ersetzen breite, horizontal scrollbare Tabellen */
.tabs{display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;padding:9px 16px;border-radius:999px;font-size:.86rem;font-weight:700;
  color:var(--muted);background:#f6f3fc;white-space:nowrap;
}
.tab.active{color:#fff;background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}

.form-inline{display:inline}

/* Status-Pills */
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.72rem;font-weight:800}
.pill-ok{background:var(--success-bg);color:var(--success-text)}
.pill-bad{background:var(--danger-bg);color:var(--danger-text)}
.pill-muted{background:#f1eefb;color:var(--muted)}

/* Dashboard: "Meine Links" als mobile-first Karten statt breiter Tabelle */
.sharecard{border:1.5px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin-top:10px}
.sharecard-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sharecard-mid{margin:8px 0;font-size:.92rem}

/* Admin: Karten statt seitlich scrollbarer Tabellen */
.admincard{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--border);border-radius:var(--radius-md);
  padding:10px 12px;margin-top:10px;
}
.admincard-noimg{padding:12px 14px}
.thumblink{flex:0 0 auto;display:block;border-radius:10px;overflow:hidden;background:#eee}
.thumb{width:56px;height:56px;object-fit:cover;display:block}
.admincard-body{flex:1;min-width:0}
.admincard-row{font-size:.88rem;margin-top:2px}
.admincard-row:first-child{margin-top:0}
.admincard form{flex:0 0 auto;margin:0}
.admincard form button{padding:9px 14px;font-size:.82rem}

/* Landing page */
.hero{padding:28px 4px 8px;text-align:center}
.hero h1{font-size:1.8rem;margin-bottom:10px}
.hero .muted{font-size:1rem;max-width:44ch;margin:0 auto}
.hero-cta{display:flex;flex-direction:column;gap:10px;margin-top:22px;max-width:340px;margin-left:auto;margin-right:auto}
.hero-cta .btnlink{padding:15px}
.features{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
.feature{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:16px;box-shadow:0 6px 20px rgba(90,40,180,.05);
}
.feature h3{font-size:1rem;margin-bottom:4px}
@media(min-width:640px){
  .features{grid-template-columns:1fr 1fr}
  .hero-cta{flex-direction:row;max-width:none;justify-content:center}
  .hero-cta .btnlink{flex:0 0 auto;padding:15px 28px}
}

/* Gallery CTA (ersetzt technische Fußzeile) */
.gallery-cta{margin-top:14px;margin-bottom:4px}

/* Lightbox / Bild-Overlay statt neuem Tab/Fenster */
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(12,8,20,.94);padding:20px;padding-top:calc(20px + var(--safe-t));
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:88vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{
  position:absolute;top:calc(14px + var(--safe-t));right:16px;width:44px;height:44px;
  border-radius:999px;background:#fff;color:#111;border:0;box-shadow:0 6px 16px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;padding:0;
}

/* Aktionsleisten in Karten (Widerrufen, Löschen, Beweissicherung …) */
.sharecard-actions,.admincard-actions{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
}
.sharecard-actions form,.admincard-actions form{margin:0}
.admincard-actions{flex-direction:column;align-items:stretch;min-width:150px}
.danger-text{color:var(--danger-text)}
.checkline{display:flex;align-items:center;gap:6px;margin:4px 0;font-weight:400}
.checkline input{width:auto;margin:0}

/* Beweissicherungsprotokoll — auf Papier lesbar, nicht nur am Bildschirm */
.protocol h2{font-size:1rem;margin-top:22px}
.prototable{width:100%;border-collapse:collapse;margin-top:12px;font-size:.86rem}
.prototable th,.prototable td{
  text-align:left;vertical-align:top;padding:7px 8px;border-bottom:1px solid var(--border);
}
.prototable th{width:42%;font-weight:700;color:var(--muted)}
.prototable td{word-break:break-word}
.signrows{margin-top:18px;display:flex;flex-direction:column;gap:22px}
.signrow{display:flex;flex-direction:column;gap:4px}
.signline{display:block;height:30px;border-bottom:1px solid #555}
@media print{
  .topbar,.bottomnav,.sitefooter,.noprint,.lightbox{display:none !important}
  body{background:#fff;color:#000}
  .card{box-shadow:none;border:0;padding:0}
  .prototable th,.prototable td{border-bottom:1px solid #999}
}

/* Site-Footer (Impressum/Datenschutz/Nutzungsbedingungen), auf jeder Seite */
.sitefooter{margin-top:22px;padding-top:16px;border-top:1px solid var(--border);text-align:center}
.sitefooter-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sitefooter-links a{font-size:.82rem;font-weight:700;color:var(--muted)}
.sitefooter-links a:hover{color:var(--accent-1)}

/* Rechtstexte */
.legal h2{font-size:.98rem;margin-top:20px}
.legal p,.legal ul{font-size:.92rem;line-height:1.55;color:var(--text)}
.legal ul{padding-left:1.2em}
.legal li{margin-top:4px}

@media(min-width:700px){
  .wrap{padding:30px}
  .card{padding:26px}
}

/* Melde-Schaltflaeche in der Empfaenger-Galerie — bewusst zurueckhaltend */
.reportform{margin:14px 0 4px}
.reportbtn{
  width:auto;background:none;border:0;color:var(--muted);font-size:.8rem;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 10px;
}
.reportbtn:hover{color:var(--danger-text)}

/* Zaehler an Admin-Reitern (offene Meldungen, faellige Nachfragen) */
.tabcount{
  display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:999px;
  background:var(--danger-bg);color:var(--danger-text);font-size:.72rem;line-height:18px;text-align:center;
}

.subhead{font-size:.92rem;margin-top:20px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
textarea.mono{font-size:.82rem;line-height:1.45}
.thumb-lg{width:min(260px,70vw);height:auto;border-radius:12px}

/* --- Tabellen in Karten: duerfen den Kartenrand nicht sprengen ------------- */
.prototable{table-layout:fixed;width:100%;max-width:100%}
.prototable th{width:38%}
.prototable td,.prototable th{overflow-wrap:anywhere;word-break:break-word}
@media (max-width:560px){
  /* Label ueber Wert: bei langen Dateinamen und Pruefsummen sonst zu eng. */
  .prototable,.prototable tbody,.prototable tr,.prototable th,.prototable td{display:block;width:auto}
  .prototable tr{padding:8px 0;border-bottom:1px solid var(--border)}
  .prototable th,.prototable td{border:0;padding:1px 0}
  .prototable th{width:auto;font-size:.78rem}
}
/* Die Pruefsumme wird in Bloecken gesetzt, damit sie auch abgetippt abgleichbar ist. */
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;letter-spacing:.02em}

/* Vorschau auf der Zwischenseite: gross genug, um eine Verwechslung auszuschliessen. */
img.thumb-lg{width:min(280px,72vw);height:auto;max-height:340px;object-fit:contain;border-radius:12px;margin:0 auto}

/* Aktionen im Admin-Backend: kompakter, und die unumkehrbare Aktion abgesetzt. */
.admincard-actions{gap:6px}
.admincard-actions button,.admincard-actions .btnlink{padding:7px 12px;font-size:.78rem;width:100%}
.admincard-actions .danger-text{border-top:1px solid var(--border);margin-top:4px;padding-top:8px}
.admincard .thumb{width:76px;height:76px}
.reported-flag{display:inline-block}

/* Vorschau der gemeldeten Bilder in der Meldekarte */
.reportshots{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.reportshots img{width:88px;height:88px;object-fit:cover;border-radius:10px;display:block}

/* Editor-Vorschau der Pflichtseiten */
.pagepreview{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-top:10px;background:#fcfbff}
.pagepreview h2{font-size:.98rem;margin-top:14px}

/* Der Protokoll- und Zwischenseiten-Bogen endet dicht ueber der Bottom-Navigation --
   ohne diesen Abstand lagen die letzten Formularfelder darunter. */
body.has-nav main.wrap > section:last-of-type{margin-bottom:calc(var(--nav-h) + 16px)}
.admincard-focus{outline:2px solid var(--accent-1);outline-offset:2px}
.success.small{padding:8px 12px;border-radius:10px}

/* Seitenzahlen unter Listen */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.pageitem{
  display:inline-block;min-width:34px;padding:7px 10px;border-radius:10px;text-align:center;
  border:1.5px solid var(--border);font-size:.82rem;font-weight:700;color:var(--muted);
}
.pageitem:hover{border-color:var(--accent-1);color:var(--accent-1)}
.pageitem.active{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;border-color:transparent}
.pagegap{color:var(--muted);padding:0 2px}
.pagetotal{margin-left:auto;font-size:.78rem;color:var(--muted)}
.filterbar{margin-bottom:10px}
.brand-logo{width:32px;height:32px;object-fit:contain;display:block}
.brand-preview{max-width:120px;height:auto;border-radius:10px}

/* Abgeschickte Schaltflaeche waehrend der Verarbeitung */
button.is-busy{opacity:.55;cursor:progress;filter:saturate(.7)}

/* Optionsblock: ausgeklappt nur, wenn die Option gewaehlt ist. Funktioniert ohne JS. */
.optcheck{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.optlabel{
  display:flex;align-items:center;gap:10px;margin-top:16px;cursor:pointer;
  font-weight:700;font-size:.9rem;color:var(--text);
}
.optbox{
  flex:0 0 auto;width:22px;height:22px;border:2px solid var(--border);border-radius:7px;
  background:#fff;position:relative;transition:border-color .12s,background .12s;
}
.optcheck:checked + .optlabel .optbox{background:var(--accent-1);border-color:var(--accent-1)}
.optcheck:checked + .optlabel .optbox::after{
  content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.optcheck:focus-visible + .optlabel .optbox{box-shadow:0 0 0 4px rgba(124,58,237,.18)}
.optbody{display:none;padding:4px 0 2px}
.optcheck:checked ~ .optbody{display:block}

/* Kopieren/Teilen direkt unter dem jeweiligen Feld */
.copyrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.copyrow button{width:auto;flex:1 1 auto;min-width:130px}

/* Gruppentrennung zwischen aktiven und nicht mehr aktiven Eintraegen */
.groupsep{
  display:flex;align-items:center;gap:12px;margin:22px 0 12px;
  font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.groupsep::before,.groupsep::after{content:"";flex:1;height:1px;background:var(--border)}
.admincard.is-inactive{background:#fbfafe;border-color:#efeaf8}
.admincard.is-inactive .thumb{opacity:.6}
.admincard.is-inactive .admincard-body{opacity:.82}

/* Filterleiste umbricht, statt rechts abgeschnitten zu werden. Die Reiter oben bleiben
   scrollbar -- dort ist die Reihenfolge eine Navigation, hier eine gleichrangige Auswahl. */
.filterbar{flex-wrap:wrap;overflow-x:visible;row-gap:6px}