@font-face{font-family:"Baloo 2";font-weight:600;font-display:swap;src:url(/fonts/baloo-2-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(/fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-display:swap;src:url(/fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-700-normal.woff2) format("woff2")}

/* Layout: Kopfleiste mit Tabs am PC, Leiste unten am Handy; Inhalte in Karten, am PC zweispaltig */
:root{
  --bg:#F5F3F8; --surface:#FFFFFF; --sunk:#ECE8F2; --line:#DCD5E6;
  --ink:#231F2B; --muted:#6B6378;
  --turnip:#7B3FA0; --turnip-ink:#FFFFFF; --turnip-soft:#EDE1F5;
  --leaf:#2F7A4A; --leaf-soft:#DFF0E4;
  --loss:#B4374A; --loss-soft:#F7E1E5;
  --band:rgba(123,63,160,.14);
  --f-display:"Baloo 2", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nav-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#17141C; --surface:#211D28; --sunk:#2A2533; --line:#3A3346;
  --ink:#EEE9F4; --muted:#A79FB4;
  --turnip:#C597E6; --turnip-ink:#1A1420; --turnip-soft:#352643;
  --leaf:#7CCB97; --leaf-soft:#1E3326;
  --loss:#F08A9A; --loss-soft:#3B2026;
  --band:rgba(197,151,230,.18); color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
[hidden]{display:none!important}
h1,h2{font-family:var(--f-display);margin:0;line-height:1.1;text-wrap:balance}
h1{font-size:1.9rem;font-weight:800}
h2{font-size:1.25rem;font-weight:800}
a{color:var(--turnip)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.84rem} .center{text-align:center}
.label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.hint{font-size:.76rem;color:var(--muted)}
.error{color:var(--loss);font-weight:600;min-height:1.2em;margin:0}
.pos{color:var(--leaf)} .neg{color:var(--loss)}

button,select,input{font:inherit;color:inherit}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:600;min-height:42px}
.btn:hover{border-color:var(--turnip)}
.btn.primary{background:var(--turnip);border-color:var(--turnip);color:var(--turnip-ink)}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.icon{width:42px;padding:0;font-size:1.2rem}
.btn.danger-btn{background:var(--loss);border-color:var(--loss);color:var(--surface)}
.btn:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--turnip);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field input,.field select{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 11px;width:100%;min-height:44px}
.field.inline{flex-direction:row;align-items:center;gap:8px}
.field.inline input{width:6rem}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:36px}
.check input{width:18px;height:18px;accent-color:var(--turnip)}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.grow{flex:1 1 180px}

.logo{display:inline-block;width:28px;height:28px;background:url(/icon.svg) center/contain no-repeat;flex:none}

/* Anmeldung */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left))}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px}
.brand-big{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.7rem;color:var(--turnip)}
.brand-big .logo{width:38px;height:38px}
.auth-card p{margin:0}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--sunk);border-radius:12px;padding:4px}
.seg-btn{border:0;background:transparent;border-radius:9px;padding:8px;cursor:pointer;font-weight:600;color:var(--muted)}
.seg-btn.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Kopfleiste */
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.topbar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:20px;height:58px;
  padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:var(--turnip);text-decoration:none}
.tabs{display:flex;gap:4px}
.tabs a{text-decoration:none;color:var(--muted);font-weight:600;padding:8px 12px;border-radius:9px}
.tabs a:hover{color:var(--ink);background:var(--sunk)}
.tabs a.active{color:var(--turnip);background:var(--turnip-soft)}
.who{margin-left:auto}

.wrap{max-width:1100px;margin:0 auto;padding-block:20px 40px;padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
.view{display:flex;flex-direction:column;gap:16px}
.view-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.panel.danger{border-color:var(--loss-soft)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.status{font-size:.78rem;color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}

.weeknav{display:flex;align-items:center;gap:6px}
.weeknav .wk{text-align:center;font-weight:600;padding:0 6px;min-width:8.5rem}

/* Preise */
.days{display:flex;flex-direction:column}
.day{display:grid;grid-template-columns:2.8rem 1fr 1fr;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.day:first-child{border-top:0}
.dname{font-family:var(--f-display);font-weight:800;font-size:1.05rem;padding-top:8px}
.slot{display:flex;flex-direction:column;gap:3px;min-width:0}
.slot .top{display:flex;align-items:center;gap:6px}
.slot .tag{font-size:.7rem;font-weight:700;color:var(--muted);width:1.9rem;flex:none}
.slot input{width:100%;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:8px 9px;font-variant-numeric:tabular-nums;font-weight:600;min-height:42px}
.slot input.up{color:var(--leaf)} .slot input.down{color:var(--loss)}
.slot .hint{padding-left:calc(1.9rem + 6px);font-variant-numeric:tabular-nums}
.slot .hint b{color:var(--turnip)}

.verdict{background:var(--turnip-soft);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.verdict .big{font-family:var(--f-display);font-weight:800;font-size:1.35rem;color:var(--turnip);line-height:1.15}
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:7.2rem 1fr 3.6rem;gap:10px;align-items:center}
.bar .track{height:10px;background:var(--sunk);border-radius:6px;overflow:hidden}
.bar .fill{height:100%;background:var(--turnip);border-radius:6px;transition:width .3s}
.bar .pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.chart{width:100%;overflow-x:auto}
.chart svg{display:block;width:100%;min-width:420px;height:auto}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.stat{background:var(--bg);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .v{font-family:var(--f-display);font-weight:800;font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1.2}

/* Inseln */
.filters{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 16px}
.islands{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.island{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.island.closed{opacity:.55}
.island .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.island .price{font-family:var(--f-display);font-weight:800;font-size:2rem;line-height:1;color:var(--turnip);font-variant-numeric:tabular-nums}
.island .price.unknown{font-size:1.1rem;color:var(--muted)}
.island .title{overflow-wrap:anywhere;font-size:.92rem}
.island .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.island .actions{display:flex;flex-wrap:wrap;gap:8px}
.island .actions .btn{flex:1 1 auto;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.island.hot{border-color:var(--turnip);box-shadow:0 0 0 1px var(--turnip) inset}
.chip{display:inline-block;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--sunk);white-space:nowrap}
.chip.tx{background:var(--turnip-soft);color:var(--turnip)}
.chip.own{background:var(--leaf-soft);color:var(--leaf)}
.chip.bad{background:var(--loss-soft);color:var(--loss)}

/* Verkäufe */
.saleform{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.salelist{display:flex;flex-direction:column}
.sale{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line)}
.sale:first-child{border-top:0}
.sale .l{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-width:0}
.sale .r{text-align:right;font-variant-numeric:tabular-nums}
.sale .sub{grid-column:1/-1;font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
.linkbtn{border:0;background:none;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:6px;font-size:.82rem}
.linkbtn:hover{color:var(--loss)}
.linkbtn.armed{background:var(--loss-soft);color:var(--loss);font-weight:600}
.empty{padding:18px;text-align:center;color:var(--muted);background:var(--bg);border-radius:12px}

/* Admin */
.invite-box{background:var(--turnip-soft);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.invite-box p{margin:0}
.code{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;font-size:1.25rem;font-weight:700;letter-spacing:.06em;user-select:all;overflow-wrap:anywhere}
.list{display:flex;flex-direction:column}
.list .item{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.list .item:first-child{border-top:0}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));z-index:50;
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;max-width:calc(100% - 32px);box-shadow:0 6px 24px rgba(0,0,0,.2)}

/* Untere Navigation (Handy) */
.bottomnav{display:none}
.ico{width:22px;height:22px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ico-week{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-5 4 4 8-9'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E")}
.ico-island{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19c3 0 3-2 5-2s2 2 5 2 3-2 5-2 2 2 5 2'/%3E%3Cpath d='M12 15V6'/%3E%3Cpath d='M12 6c-2-2-6-2-7 0 3 0 5 1 7 0zM12 6c2-2 6-2 7 0-3 0-5 1-7 0z'/%3E%3C/svg%3E")}
.ico-sales{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.5c-.5-1-1.6-1.5-3-1.5-1.7 0-3 .9-3 2s1.3 1.8 3 2 3 .9 3 2-1.3 2-3 2c-1.4 0-2.5-.5-3-1.5M12 6v2M12 16v2'/%3E%3C/svg%3E")}
.ico-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3C/svg%3E")}
.ico-admin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E")}

@media (max-width: 860px){
  .grid2{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .tabs{display:none}
  .topbar-inner{height:52px}
  h1{font-size:1.6rem}
  .wrap{padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom))}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--nav-h);
    text-decoration:none;color:var(--muted);font-size:.72rem;font-weight:600}
  .bottomnav a.active{color:var(--turnip)}
  .islands{grid-template-columns:1fr}
  .bar{grid-template-columns:6.4rem 1fr 3.4rem}
}
@media (min-width: 761px){ .toast{bottom:24px} }
@media (prefers-reduced-motion: reduce){ .bar .fill{transition:none} }

/* Einladungen teilen & Vorlagen */
.invite-box .full{width:100%}
textarea{font:inherit;color:inherit;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 11px;width:100%;resize:vertical;line-height:1.45}
.share{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.share .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.share .btn.primary{color:var(--turnip-ink)}
.qr-box{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.qr-box canvas{background:#FFFFFF;border-radius:12px;padding:0;max-width:100%;height:auto}
.tpl-list{display:flex;flex-direction:column;gap:12px}
.tpl{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg);border-radius:12px}
.tpl .tpl-head{display:flex;gap:8px;align-items:center}
.tpl .tpl-head input{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;font-weight:600}
code{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;font-size:.9em}
.invite-hint{margin:0;background:var(--leaf-soft);color:var(--leaf);border-radius:10px;padding:10px 12px;font-weight:600;font-size:.9rem}
.linkbtn.armed,.btn.armed{background:var(--loss-soft);color:var(--loss)}

/* Datenschutzseite & Fußzeile */
.doc{max-width:760px;margin:0 auto;padding-block:24px 64px;padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
.doc h1{margin:8px 0 4px}
.doc h2{margin-top:32px;font-size:1.3rem}
.doc h3{margin:22px 0 4px;font-size:1.02rem}
.doc p,.doc li{max-width:68ch}
.doc ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:6px}
.footer{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;padding-top:28px;font-size:.84rem}
.footer a{color:var(--muted)}
.auth-foot{text-align:center;font-size:.84rem;margin:0}
.auth-foot a{color:var(--muted)}
.check.consent{align-items:flex-start;font-size:.9rem}
.check.consent input{margin-top:3px;flex:none}

/* Freunde-Vergleich */
.ico-friends{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.3-5.5 6.5-5.5s5.7 2 6.5 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.8'/%3E%3Cpath d='M16.5 14.6c2.6.2 4.4 2 5 4.9'/%3E%3C/svg%3E")}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.86rem}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:4px;border-radius:2px;display:inline-block}
.tablewrap{overflow-x:auto}
.ftable{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.ftable th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.ftable td{padding:9px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.ftable td.r,.ftable th.r{text-align:right}
.ftable tr.me td{background:var(--turnip-soft)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.sec-events summary{cursor:pointer;font-weight:600}
.sec-events .list{margin-top:8px}
.lvl{font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.lvl.critical{background:var(--loss-soft);color:var(--loss)}
.lvl.warn{background:var(--turnip-soft);color:var(--turnip)}
.lvl.info{background:var(--sunk);color:var(--muted)}
@media (max-width: 760px){ .bottomnav a{font-size:.66rem} }
#fChart svg{min-width:0}