/* =============================
   Apple / Liquid Glass – Light only
   ============================= */
:root{
  --bg:#f5f5f7;
  --panel:#ffffff;
  --text:#1c1c1e;
  --muted:#6e6e73;
  --line:#e5e5ea;
  --accent:#007aff;
  --accent-dark:#0063cc;
  --err:#ff3b30;

  --r-xl:22px;
  --r-md:14px;

  --shadow-sm:0 8px 18px rgba(0,0,0,.06);
  --shadow-md:0 10px 24px rgba(0,0,0,.10);
  --shadow-lg:0 18px 40px rgba(0,0,0,.12);

  --glass: rgba(255,255,255,0.65);
  --glass-border: rgba(255,255,255,0.8);
  --glass-edge: rgba(0,0,0,0.06);

  /* neue Hilfswerte */
  --maxw:1060px;
  --radius:14px;
}


/* =============================
   Cookie Banner
   ============================= */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: min(380px, 90%);
  text-align: center;
  padding: 20px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.6s ease-out;
}

.cookie-banner.hidden {
  display: none;
}

.cookie-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.glass-btn.alt {
  background: #e5e5ea;
  color: var(--text);
  box-shadow: none;
}

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


html,body{ height:100%; }
*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--bg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =============================
   Container & Helfer
   ============================= */
.container{
  width: min(var(--maxw), 100%);
  margin: 0 auto;
  padding-inline: 16px;
}
.stack-xs>*+*{ margin-top:6px; }
.stack-sm>*+*{ margin-top:10px; }
.stack-md>*+*{ margin-top:14px; }
.stack-lg>*+*{ margin-top:20px; }

.img-fluid{ max-width:100%; height:auto; display:block; }
.hidden{ display:none !important; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* =============================
   Liquid Glass – Shell & Card
   ============================= */
.glass-shell{
  min-height:100dvh;
  padding:24px;
  display:grid;
  place-items:center;
  gap:16px;
  background:
    radial-gradient(1400px 500px at 10% -10%, rgba(0,0,0,.04), transparent 60%),
    radial-gradient(1200px 600px at 90% 110%, rgba(0,0,0,.03), transparent 60%),
    var(--bg);
}
@media (min-width: 860px){
  /* Apps mit Toolbar brauchen Start-Ausrichtung */
  .glass-shell.is-app{ place-items: start center; }
}

.glass-card{
  width: min(100%, var(--maxw));
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 0 0 1px var(--glass-border),
    0 1px 0 rgba(255,255,255,.6),
    var(--shadow-lg);
  outline:1px solid var(--glass-edge);
  outline-offset:-1px;
  padding: 28px;
}

.glass-brand{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:10px;
}
.glass-logo{
  width:48px; height:48px; border-radius:12px;
  background: linear-gradient(180deg, #d9d9db, #f5f5f7);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.06);
}
.glass-sub{ margin:0 0 18px; color:var(--muted); text-align:center; }

.glass-card h1,.glass-card h2{
  margin:0 0 8px;
  font-weight:700;
  letter-spacing:-.01em;
  text-align:center;
}

/* =============================
   Formulare (global & in Cards)
   ============================= */
label{
  display:block; margin:12px 0 6px;
  font-size:13px; color:var(--muted); font-weight:600;
}
input[type="text"],
input[type="firstName"],
input[type="lastName"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="file"],
select, textarea{
  width:100%;
  appearance:none;
  padding:12px 14px;
  border-radius: var(--r-md);
  border:1px solid var(--line);
  background: rgba(255,255,255,.9);
  color:var(--text);
  outline:none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
}
textarea{ min-height:140px; resize:none; } /* keine manuelle Größenänderung */
input::file-selector-button{
  margin-right:10px; padding:10px 12px; border:none; border-radius:10px; background:#f1f1f4; cursor:pointer;
}
::placeholder{ color: rgba(110,110,115,.8); }
:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(0,122,255,.12);
  background:#fff;
}



/* Formular-Grid (z. B. Upload, Support, Settings) */
.form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
  align-items:end;
}
.form-grid .col-12{ grid-column: span 12; }
.form-grid .col-6{ grid-column: span 6; }
.form-grid .col-4{ grid-column: span 4; }
.form-grid .col-3{ grid-column: span 3; }
@media (max-width: 960px){
  .form-grid .col-6{ grid-column: span 12; }
  .form-grid .col-4{ grid-column: span 12; }
  .form-grid .col-3{ grid-column: span 6; }
}
@media (max-width: 520px){
  .form-grid{ grid-template-columns: 1fr; }
  .form-grid [class*="col-"]{ grid-column: 1 / -1; }
}

/* Buttons */
.glass-btn,
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  margin-top:14px;
  padding:12px 16px;
  border:none;
  border-radius: var(--r-md);
  font-weight:600; font-size:16px; color:#fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  cursor:pointer;
  box-shadow: 0 8px 22px rgba(0,122,255,.25);
  transition: transform .08s, box-shadow .2s, filter .2s;
  text-decoration:none;
}
.btn.secondary{
  background: linear-gradient(180deg, #dadde6, #cacedb);
  color:#1c1c1e; box-shadow: var(--shadow-sm);
}
.btn.ghost{
  background: rgba(255,255,255,.7);
  border:1px solid var(--line);
  color:var(--text); box-shadow: none;
}
.glass-btn:hover,.btn:hover{ filter:brightness(1.03); box-shadow:0 12px 28px rgba(0,122,255,.28); }
.glass-btn:active,.btn:active{ transform:scale(.98); }

/* Links/Fehler/Hinweise */
.glass-link{ display:block; margin-top:12px; text-align:center; color:var(--accent); text-decoration:none; font-weight:600; }
.glass-err{ color:var(--err); font-weight:700; margin-top:10px; min-height:18px; text-align:center; }
.help{ font-size:12px; color:var(--muted); }

/* =============================
   Sticky-Header / Navigation
   ============================= */
header.glass-nav{
  position: sticky; top:0; z-index:100;
  height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 5%;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow-sm);
}
header.glass-nav .brand{ display:flex; align-items:center; gap:10px; }
header.glass-nav .actions{ justify-self:end; display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 720px){
  header.glass-nav{ grid-template-columns:auto 1fr; gap:8px; }
  header.glass-nav .brand{ order:1; }
  header.glass-nav .title{ order:2; font-weight:700; }
  header.glass-nav .actions{ order:3; grid-column:1 / -1; justify-self:stretch; }
}

/* =============================
   Toolbar & App-Grid
   ============================= */
.ui-toolbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  width:min(var(--maxw), 100%);
  margin: 4px auto 8px;
  padding:10px 12px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:16px;
  box-shadow: var(--shadow-md);
}
.ui-brand{ display:flex; align-items:center; gap:10px; }
.ui-status{ justify-self:center; color:var(--muted); font-weight:600; }
.ui-actions{ justify-self:end; display:flex; gap:8px; flex-wrap:wrap; }
.ui-btn{ width:auto; padding-inline:14px; margin-top:0; }
@media (max-width: 640px){
  .ui-toolbar{ grid-template-columns: 1fr; }
  .ui-status{ justify-self:start; }
  .ui-actions{ justify-self:stretch; }
}

.ui-grid{
  display:grid;
  gap:16px;
  width:min(var(--maxw), 100%);
  margin:0 auto 20px;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 2fr);
  align-items:start;
}
@media (max-width: 1024px){
  .ui-grid{ grid-template-columns: 1fr; }
}

.ui-h{ margin:0 0 6px; text-align:left; }

/* =============================
   Stats-Karten
   ============================= */
.ui-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin: 0 0 10px;
}
@media (max-width: 600px){
  .ui-stats{ grid-template-columns: 1fr; }
}
.ui-stat{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:14px;
  padding:12px 14px;
  box-shadow: var(--shadow-sm);
}
.ui-stat .k{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.ui-stat .v{ font-size:18px; font-weight:700; }

/* =============================
   Tabelle
   ============================= */
.ui-scroll{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  max-height: calc(100dvh - 320px);
  border-radius: 14px;
}
.ui-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
  table-layout: fixed;
}
.ui-table thead th{
  font-size:12px; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; text-align:left; padding:0 12px;
  white-space:nowrap;
}
.ui-table tbody td{
  background: rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-left:none; border-right:none;
  padding:12px;
  vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis;
}
.ui-table tbody tr:first-child td{ border-top-left-radius:12px; border-top-right-radius:12px; }
.ui-table tbody tr:last-child td{ border-bottom-left-radius:12px; border-bottom-right-radius:12px; border-bottom:1px solid var(--line); }
.ui-table td.right{ white-space:nowrap; text-align:right; }
.ui-table td:nth-child(2), /* Händler */
.ui-table td:nth-child(3){ /* Kategorie */
  word-break:break-word; white-space:normal;
}

/* Kategorie-Chip */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  background:#f5f5f7;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:600; color:var(--muted);
}

/* =============================
   Upload-Bereich & Dropzone
   ============================= */
.dropzone{
  position:relative;
  border:2px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.7);
  padding:18px;
  text-align:center;
}
.dropzone input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.dropzone .hint{ color:var(--muted); font-size:13px; }

/* =============================
   Support/Kontakt Layout (robust)
   ============================= */
.support-card{ padding:22px; }
.support-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.support-grid .field{ grid-column: span 6; }
.support-grid .field-full{ grid-column: 1 / -1; }
.support-grid textarea{ min-height:220px; resize:none; }
@media (max-width: 900px){
  .support-grid .field{ grid-column: 1 / -1; }
}

/* =============================
   Galerie & Lightbox (optional)
   ============================= */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.gallery-grid img{
  width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid var(--line);
  background:#fff;
}
@media (max-width: 960px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .gallery-grid{ grid-template-columns: 1fr; } }

.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.55); z-index:9999; padding:20px;
}
.lightbox.open{ display:grid; }
.lightbox img{ max-width:95vw; max-height:85vh; border-radius:16px; background:#fff; }
.lightbox .nav{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.lightbox .nav button{
  pointer-events:auto;
  border:none; background:rgba(255,255,255,.85);
  width:44px; height:44px; border-radius:999px; cursor:pointer;
}

/* =============================
   Footer
   ============================= */
.footer{
  width:min(var(--maxw),100%);
  margin: 20px auto 0;
  padding: 16px;
  color:var(--muted);
  text-align:center;
}

/* =============================
   Kleinere Tweaks für iOS/Android
   ============================= */
@supports (-webkit-touch-callout: none){
  input,select,textarea,button{ font-size:16px; } /* Zoom auf iOS verhindern */
}


/* === Register Page – Fix & Zusatzstyles (scoped, kollisionsfrei) === */

/* Logo + Titel zentriert untereinander */
.glass-card[data-page="register"] .glass-brand{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center;
}
.glass-card[data-page="register"] .glass-brand h1{ margin:0; font-weight:700; }

/* Formular-Layout */
.glass-card[data-page="register"] form#regForm{
  display:flex; flex-direction:column; gap:8px;
}

/* Einheitliche Feldgröße für alle Inputs der Registrierungsseite */
.glass-card[data-page="register"] form#regForm input[type="text"],
.glass-card[data-page="register"] form#regForm input[type="email"],
.glass-card[data-page="register"] form#regForm input[type="password"]{
  width:100%;
  height:48px !important;
  padding:12px 14px !important;
  font-size:16px !important;
  border-radius: var(--r-md);
  border:1px solid var(--line);
  background: rgba(255,255,255,.9);
  color:var(--text);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing:border-box;
}

/* Fokuszustand (nur Register) */
.glass-card[data-page="register"] form#regForm input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(0,122,255,.12);
  background:#fff;
  outline:none;
}

/* Labels konsistent */
.glass-card[data-page="register"] form#regForm label{
  display:block; margin:14px 0 6px;
  font-size:13px; color:var(--muted); font-weight:600;
}

/* Große Checkboxen (AGB + Newsletter) */
.glass-card[data-page="register"] .checkbox-row{
  display:flex; align-items:center; gap:12px; margin-top:14px;
}
.glass-card[data-page="register"] .checkbox-lg{
  width:22px; height:22px; accent-color: var(--accent); transform: translateY(1px); cursor:pointer;
}
.glass-card[data-page="register"] .checkbox-label{
  margin:0; font-weight:600; color:var(--text); font-size:15px;
}
.glass-card[data-page="register"] .checkbox-label a{ color:var(--accent); text-decoration:none; }
.glass-card[data-page="register"] .checkbox-label a:hover{ text-decoration:underline; }
.glass-card[data-page="register"] .muted{ color:var(--muted); font-weight:500; }

/* Meldungen */
.glass-card[data-page="register"] .glass-err,
.glass-card[data-page="register"] .glass-ok{
  margin-top:14px; font-size:15px; text-align:center;
}
.glass-card[data-page="register"] .glass-err{ color:var(--err); }
.glass-card[data-page="register"] .glass-ok{ color:#1a8917; }

/* Button nur im Register-Form */
.glass-card[data-page="register"] form#regForm .glass-btn{
  margin-top:16px; padding:12px 16px; font-size:16px; border-radius: var(--r-md); font-weight:600;
}

/* Link unten */
.glass-card[data-page="register"] .glass-link{
  display:block; text-align:center; margin-top:20px; color:var(--accent); font-weight:600; text-decoration:none;
}
.glass-card[data-page="register"] .glass-link:hover{ text-decoration:underline; }