/* LIVO Wedding – Look wie Shefkis LIVO-App (Foto-Hintergrund, Milchglas-Karten, Seitenleiste, Inter Tight), Akzent Wedding-Gold. */
@font-face{font-family:"Inter Tight";src:url("fonts/inter-tight-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url("fonts/inter-tight-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--acc:#c9a96e;--acc2:#e2c896;--accbg:rgba(201,169,110,.14);--or:#ff8a3d;
  --txt:#f4f1ec;--dim:#a39d95;--dim2:#cdc7be;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.06);
  --glass:rgba(18,18,22,.60);--glass2:rgba(24,24,28,.42);--side:rgba(14,14,17,.58);--sw:236px;
  --green:#4fd38a;--amber:#ffcf6b;--red:#ff6b6b;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#0b0c10;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;max-width:100%;overflow-x:hidden}
body{min-height:100vh;color:var(--txt);font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45;padding-bottom:96px}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#0b0c10 var(--bg,none) center/cover no-repeat;height:100lvh}
body::after{content:"";position:fixed;inset:0;z-index:-1;height:100lvh;
  background:linear-gradient(90deg,rgba(8,8,11,.80) 0%,rgba(8,8,11,.55) 24%,rgba(8,8,11,.40) 50%,rgba(8,8,11,.38) 100%)}
@media(max-width:900px){body::after{background:linear-gradient(180deg,rgba(8,8,11,.62),rgba(8,8,11,.52) 35%,rgba(8,8,11,.74))}}
a{color:inherit}
button,input,select,textarea{font-family:inherit}

/* ---- Seitenleiste (Desktop) / Kopfzeile (Handy) ---- */
#side{position:fixed;left:0;top:0;bottom:0;width:var(--sw);z-index:50;display:flex;flex-direction:column;padding:26px 16px 20px;
  background:var(--side);border-right:1px solid var(--line);backdrop-filter:blur(26px) saturate(1.25);-webkit-backdrop-filter:blur(26px) saturate(1.25);overflow-y:auto}
.logo{padding:0 10px 6px;text-decoration:none;color:var(--txt);display:block}
.logo .l1{font-size:25px;font-weight:600;letter-spacing:.34em;line-height:1.1}
.logo .l2{font-size:9.5px;letter-spacing:.42em;color:var(--acc);margin-top:4px}
#nav{margin-top:26px;display:flex;flex-direction:column;gap:2px}
#nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--dim2);text-decoration:none;font-size:14.5px;cursor:pointer}
#nav a svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#nav a:hover{color:var(--txt);background:rgba(255,255,255,.045)}
#nav a.on{color:var(--txt);background:linear-gradient(90deg,rgba(201,169,110,.20),rgba(201,169,110,.03))}
#nav a.on svg{color:var(--acc2)}
#nav .badge{margin-left:auto;background:var(--acc);color:#1b140a;border-radius:99px;font-size:11px;font-weight:700;padding:1px 7px}
.unten{margin-top:auto;padding:16px 12px 0;font-size:12.5px;color:var(--dim)}
.unten i{display:block;width:26px;height:2px;background:var(--acc);border-radius:2px;margin-bottom:12px}
.unten b{display:block;color:var(--dim2);font-weight:600;font-size:13.5px}
.unten a{display:inline-block;margin-top:8px;color:var(--dim);text-decoration:none;cursor:pointer;font-size:12.5px}
.unten a:hover{color:var(--acc2)}
#kopf{display:none}
@media(min-width:901px){body{padding-left:var(--sw)}}
@media(max-width:900px){
  #side{transform:translateX(-102%);transition:transform .22s ease;width:270px;box-shadow:20px 0 60px rgba(0,0,0,.5)}
  body.menu #side{transform:none}
  #schleier{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.45);display:none}
  body.menu #schleier{display:block}
  #kopf{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    background:rgba(12,12,15,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
  #kopf .logo{padding:0}#kopf .logo .l1{font-size:19px}#kopf .logo .l2{font-size:8px}
  #kopf button{margin-left:auto;background:none;border:1px solid var(--line);border-radius:11px;color:var(--txt);width:42px;height:40px;cursor:pointer}
  #kopf svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
}

/* ---- Inhalt ---- */
.wrap{max-width:920px;margin:0 auto;padding:18px clamp(14px,3vw,32px)}
h1{font-size:30px;font-weight:700;letter-spacing:-.01em;margin:10px 0 16px}
@media(max-width:600px){h1{font-size:25px}}
h2{font-size:12px;margin:0 0 12px;color:var(--dim);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.card{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:18px;margin:12px 0;
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.dim{color:var(--dim)}
.btn{appearance:none;border:1px solid var(--line);background:var(--glass2);color:var(--txt);border-radius:12px;padding:10px 15px;font-size:14px;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;font-weight:500}
.btn:hover{border-color:rgba(255,255,255,.24)}
.btn.pri{background:linear-gradient(180deg,#d8bb84,#b8955a);border-color:transparent;color:#1d1509;font-weight:650}
.btn.warn{border-color:rgba(255,107,107,.45);color:#ffb0b0}
.btn.klein{min-height:34px;padding:6px 11px;font-size:13px}
.btn[disabled]{opacity:.45;pointer-events:none}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 10px;scrollbar-width:none}
.tab{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13.5px;color:var(--dim);cursor:pointer;white-space:nowrap;background:none}
.tab.on{color:var(--txt);border-color:var(--acc);background:var(--accbg)}
.suche{margin:0 0 6px}
.liste .it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:13px 6px;border-top:1px solid var(--line2);cursor:pointer;border-radius:10px}
.liste .it:first-child{border-top:0}
.liste .it:hover{background:rgba(255,255,255,.03)}
.it .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it .s{color:var(--dim);font-size:12.5px}
.it .b{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.pill{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--dim);margin-right:5px;white-space:nowrap}
.pill.ent{border-color:rgba(255,207,107,.5);color:var(--amber)}
.pill.fer{border-color:rgba(79,211,138,.5);color:var(--green)}
.pill.sto{border-color:rgba(255,107,107,.5);color:var(--red)}
.pill.frei{border-color:var(--acc);color:var(--acc2)}
.leer{color:var(--dim);text-align:center;padding:24px 0;font-size:14px}
label{display:block;font-size:12px;color:var(--dim);margin:0 0 5px;letter-spacing:.03em}
input,select,textarea{width:100%;background:rgba(0,0,0,.30);border:1px solid var(--line);border-radius:11px;color:var(--txt);font-size:15.5px;padding:10px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
input[type=date]{min-height:44px}
textarea{min-height:70px;resize:vertical;line-height:1.45}
input[readonly],textarea[readonly]{opacity:.7}
select option{background:#17140f;color:var(--txt)}
.g2{display:grid;gap:12px}@media(min-width:600px){.g2{grid-template-columns:1fr 1fr}}
.g3{display:grid;gap:12px;grid-template-columns:1fr 1fr}@media(min-width:600px){.g3{grid-template-columns:1fr 1fr 1fr}}
.g4{display:grid;gap:12px;grid-template-columns:1fr 1fr}@media(min-width:700px){.g4{grid-template-columns:2fr 1fr 1fr 1fr}}
.f{margin:0 0 12px}
.hilfe{font-size:12px;color:var(--dim);margin-top:5px}
.pos{border:1px solid var(--line2);border-radius:14px;padding:12px;margin:0 0 10px;background:rgba(0,0,0,.16)}
.pos .k{display:flex;gap:10px;align-items:flex-start}
.pos .n{font-weight:600}
.pos .zs{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.pos .ctl{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:end;margin-top:10px}
.pos textarea{min-height:46px;font-size:14px;margin-top:8px}
.stp{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.stp button{background:none;border:0;color:var(--txt);font-size:20px;width:42px;height:42px;cursor:pointer}
.stp input{width:60px;border:0;border-radius:0;text-align:center;padding:10px 2px;background:transparent}
.x{background:none;border:0;color:var(--dim);font-size:22px;cursor:pointer;padding:2px 8px;line-height:1}
.summe{margin-left:auto;max-width:360px}
.summe .z{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-variant-numeric:tabular-nums;color:var(--dim)}
.summe .z.g{color:var(--txt);font-size:21px;font-weight:800;border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
.summe .z.g b{color:var(--acc2)}
.kat{margin:16px 0 7px;color:var(--dim);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.kat:first-child{margin-top:0}
.pr{display:flex;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line2);border-radius:12px;margin:0 0 7px;cursor:pointer;background:rgba(0,0,0,.16)}
.pr:hover{border-color:var(--acc)}
.pr .n{font-weight:600}.pr .d{color:var(--dim);font-size:12.5px}
.pr .p{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--acc2);font-weight:650;text-align:right}
.pr.aus{opacity:.45}
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px clamp(14px,3vw,32px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(12,12,15,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line)}
@media(min-width:901px){.leiste{left:var(--sw)}}
.leiste .in{max-width:920px;margin:0 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.leiste .tot{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;margin-right:auto}
.leiste .tot small{display:block;color:var(--dim);font-size:11.5px;font-weight:500}
.mod{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center}
.mod.on{display:flex}
.mod .box{background:#16140f;border:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:720px;max-height:90vh;overflow:auto;
  padding:18px clamp(14px,4vw,22px) calc(18px + env(safe-area-inset-bottom))}
@media(min-width:720px){.mod{align-items:center}.mod .box{border-radius:20px}}
.mod.voll .box{max-width:920px;height:90vh;padding:0;display:flex;flex-direction:column;overflow:hidden}
.mod.voll iframe{flex:1;border:0;width:100%;background:#e9e9ec}
.mod .mk{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.mod.voll .mk{padding:12px 14px;margin:0;border-bottom:1px solid var(--line)}
.mod .mk h3{margin:0;font-size:17px;flex:1}
.hinw{border:1px solid rgba(255,207,107,.4);background:rgba(255,207,107,.08);color:#ffe2a8;border-radius:12px;padding:10px 13px;font-size:13.5px;margin:0 0 12px}
.hinw.ruhig{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--dim2)}
.hinw ul{margin:4px 0 0;padding-left:18px}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);background:#221d15;border:1px solid var(--line);border-radius:12px;padding:10px 16px;
  z-index:80;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
.toast.on{opacity:1}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:14px}
.kv div:nth-child(odd){color:var(--dim)}
.gross{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.link{word-break:break-all;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;user-select:all}
.quart{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line2)}
.quart:first-child{border-top:0}
.quart b{font-size:16px}
.check{display:flex;gap:10px;align-items:center;font-size:14px;margin:0 0 12px}
.check input{width:auto}

/* ---- Login / Einladung ---- */
.anmelden{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
body.solo{padding:0}
.anmelden .card{width:100%;max-width:400px;padding:28px}
.anmelden .logo{padding:0;margin:0 0 22px}
.anmelden .btn{width:100%;margin-top:6px}
.fehler{color:#ffb0b0;font-size:13.5px;min-height:20px;margin:6px 0 0}