@font-face{font-family:Poppins;font-weight:300;src:url(poppins-300.woff) format("woff");font-display:swap}
@font-face{font-family:Poppins;font-weight:400;src:url(poppins-400.woff) format("woff");font-display:swap}
@font-face{font-family:Poppins;font-weight:500;src:url(poppins-500.woff) format("woff");font-display:swap}
@font-face{font-family:Poppins;font-weight:700;src:url(poppins-700.woff) format("woff");font-display:swap}
:root{--bg:#0b0a09;--bg2:#15120f;--card:#1b1814;--card2:#221e19;--line:#342d25;--fg:#f6f2ec;--muted:#b3aa9c;--ak:#d1a463;--ak2:#f0d2a2;--err:#ec9a88;--ok:#9fd3a8;
  --r:14px;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:var(--bg);color:var(--fg);font-family:Poppins,"Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
a{color:var(--ak2)}
h1,h2,h3{font-weight:500;line-height:1.25;margin:0;text-wrap:balance}
h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}
p{margin:0}
.leise{color:var(--muted)}
.klein{font-size:.85rem}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ak2);outline-offset:2px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.kopf .innen{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.kopf img{height:34px;width:auto}
.kopf .titel{min-width:0;flex:1}
.kopf .titel b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kopf .titel span{color:var(--muted);font-size:.8rem}
.pille{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.78rem;color:var(--muted);white-space:nowrap}
.pille.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.pille.warn{color:var(--ak2);border-color:color-mix(in srgb,var(--ak) 50%,transparent)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);background:transparent;cursor:pointer;text-decoration:none;color:var(--fg);font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--ak)}
.btn.voll{background:var(--ak);border-color:var(--ak);color:#1a140c}
.btn.voll:hover{background:var(--ak2)}
.btn.klein{min-height:36px;padding:0 14px;font-size:.85rem}
.btn.gefahr{border-color:color-mix(in srgb,var(--err) 50%,transparent);color:var(--err)}
.btn:disabled{opacity:.45;cursor:default}

/* Anmelden */
.anmelden{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.anmelden form{width:min(400px,100%);display:grid;gap:16px;text-align:center}
.anmelden img{width:min(260px,70vw);margin:0 auto 6px}
.feld{display:grid;gap:6px;text-align:left}
.feld label{font-size:.85rem;color:var(--muted)}
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{width:100%;min-height:46px;padding:10px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--ak)}
.code{letter-spacing:.25em;text-transform:uppercase;text-align:center;font-size:1.3rem;font-weight:500}
.fehler{color:var(--err)}
.meldung{color:var(--ok)}

/* Editor */
.seite{max-width:1240px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-right,0px)) 80px max(16px,env(safe-area-inset-left,0px))}
.reiter{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;scrollbar-width:none}
.reiter button{border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:8px 16px;cursor:pointer;white-space:nowrap;color:var(--muted)}
.reiter button[aria-selected=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:28px;align-items:start}
@media (max-width:900px){.raster{grid-template-columns:minmax(0,1fr)}.vorschau{order:-1;position:static!important}}
.vorschau{position:sticky;top:76px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.vorschau .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.vorschau .tabs button{border:1px solid var(--line);background:transparent;border-radius:8px;padding:5px 10px;font-size:.8rem;cursor:pointer;color:var(--muted)}
.vorschau .tabs button[aria-pressed=true]{border-color:var(--ak);color:var(--fg)}
.vorschau .buehne{display:grid;place-items:center;background:repeating-conic-gradient(#191612 0 25%,#1d1a16 0 50%) 0 0/24px 24px;border-radius:10px;min-height:300px;padding:14px}
.vorschau canvas{max-width:100%;max-height:62vh;height:auto;border-radius:3px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.vorschau .unter{margin-top:10px;display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--muted)}
.block{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px;margin-bottom:16px}
.block>header{display:grid;gap:2px}
.block>header p{color:var(--muted);font-size:.88rem}
.vorlagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vorlage{border:1.5px solid var(--line);border-radius:12px;padding:0;background:var(--card2);cursor:pointer;text-align:left;overflow:hidden}
.vorlage[aria-pressed=true]{border-color:var(--ak);box-shadow:0 0 0 1px var(--ak)}
.vorlage .muster{height:70px;display:grid;place-items:center;position:relative}
.vorlage .muster i{position:absolute;inset:12px 20px 22px;border-radius:2px;background:linear-gradient(135deg,#6b6e73,#3d4046)}
.vorlage .muster b{position:absolute;left:0;right:0;bottom:6px;height:6px;margin:auto;width:40%;border-radius:3px}
.vorlage span{display:block;padding:8px 10px 2px;font-weight:500;font-size:.9rem}
.vorlage small{display:block;padding:0 10px 10px;color:var(--muted);font-size:.75rem;line-height:1.35}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.zwei{grid-template-columns:1fr}}
.bildfeld{display:flex;gap:14px;align-items:center;border:1.5px dashed var(--line);border-radius:12px;padding:12px}
.bildfeld .bild{width:72px;height:72px;border-radius:8px;background:repeating-conic-gradient(#2a251f 0 25%,#221e19 0 50%) 0 0/14px 14px;display:grid;place-items:center;flex:none;overflow:hidden}
.bildfeld .bild img{max-width:100%;max-height:100%}
.bildfeld .txt{flex:1;min-width:0;display:grid;gap:6px}
.bildfeld .knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.bildfeld.drueber{border-color:var(--ak)}
.farben{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.farbe{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.farbe[aria-pressed=true]{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg) inset}
input[type=color]{width:44px;height:34px;border:1.5px solid var(--line);border-radius:8px;background:var(--card2);padding:2px;cursor:pointer}
.schalter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;cursor:pointer}
.schalter input{appearance:none;width:46px;height:26px;border-radius:999px;background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .15s}
.schalter input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--fg);transition:transform .15s}
.schalter input:checked{background:var(--ak)}
.schalter input:checked::after{transform:translateX(20px)}
.layouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.layout{border:1.5px solid var(--line);border-radius:12px;padding:12px 10px;background:var(--card2);cursor:pointer;display:grid;justify-items:center;gap:8px;text-align:center}
.layout[aria-pressed=true]{border-color:var(--ak);box-shadow:0 0 0 1px var(--ak)}
.layout svg{height:74px;width:auto}
.layout span{font-size:.85rem;line-height:1.3}
.layout small{color:var(--muted);font-size:.72rem}
.wahl{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.wahl button{border:0;background:transparent;padding:8px 16px;cursor:pointer;color:var(--muted)}
.wahl button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;background:transparent;cursor:pointer;color:var(--muted)}
.chip[aria-pressed=true]{border-color:var(--ak);color:var(--fg)}
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.leiste .innen{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.leiste .stand{flex:1;min-width:0;font-size:.85rem;color:var(--muted)}
.galerie{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
@media (max-width:560px){.galerie{grid-template-columns:1fr}}
.qr{width:180px;height:180px;border-radius:10px;overflow:hidden;background:#fff}
.qr svg{width:100%;height:100%;display:block}
.link{display:flex;gap:8px}
.link input{font-size:.85rem}
.hinweisbox{border:1px solid color-mix(in srgb,var(--ak) 40%,transparent);background:color-mix(in srgb,var(--ak) 8%,transparent);border-radius:12px;padding:12px 14px;font-size:.9rem}
dialog{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--fg);padding:22px;max-width:min(440px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog .knoepfe{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* Verwaltung */
.tabelle{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:400;font-size:.8rem;background:var(--card)}
tr:last-child td{border-bottom:0}
td .btn{min-height:34px;padding:0 12px;font-size:.82rem}
.boxen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:22px}
.boxkarte{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:8px}
.raster-form{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end}
@media (max-width:760px){.raster-form{grid-template-columns:1fr}}
.fotoraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.fotoraster figure{margin:0;position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#000}
.fotoraster img{width:100%;height:100%;object-fit:cover}
.fotoraster button{position:absolute;right:6px;top:6px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer}
.einladung{white-space:pre-wrap;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:.9rem}
@media (max-width:600px){
  .kopf img{display:none}
  .kopf .pille{display:none}
  .kopf .btn{min-height:36px;padding:0 12px;font-size:.85rem}
  .vorschau .buehne{min-height:0;padding:10px}
  .vorschau canvas{max-height:52vh}
  .leiste .stand{font-size:.78rem}
  .block{padding:14px}
}
.motive{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.motiv{border:1.5px solid var(--line);border-radius:12px;padding:6px 6px 8px;background:var(--card2);cursor:pointer;display:grid;gap:6px;text-align:center}
.motiv img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;display:block;background:#2a251f}
.motiv span{font-size:.78rem;line-height:1.25}
.motiv[aria-pressed=true]{border-color:var(--ak);box-shadow:0 0 0 1px var(--ak)}
details.stile summary{cursor:pointer;color:var(--muted);font-size:.9rem;padding:4px 0}
details.stile[open] summary{margin-bottom:10px}