/* ShakeCheck – Liquid-Glass-Stil (nur heller Modus) */
:root{
  --fg:#16181d; --muted:#5d6370; --line:rgba(255,255,255,.65);
  --accent:#1f6feb; --err:#b42318; --ok:#067647;
  --radius:18px;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --glass-bg:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.28));
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25),0 10px 30px rgba(28,38,72,.10);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:"SF Pro Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#f4f6fb;color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* weiche Farbflecken hinter dem Glas */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(115deg,#fbd3e6 0%,#c9dcf7 38%,#bfe6f5 60%,#fdf0c4 100%)}
.bg::before,.bg::after{content:"";position:absolute;filter:blur(1px)}
/* große Blob-Formen wie im Entwurf: rosa links oben, lila rechts oben, gelb rechts unten */
.bg::before{left:-12%;top:-22%;width:62%;height:78%;border-radius:58% 42% 55% 45% / 48% 58% 42% 52%;
  background:linear-gradient(135deg,#ff9ec4,#f7b6d8 55%,#c9b6f2);opacity:.85}
.bg::after{right:-14%;top:-18%;width:52%;height:70%;border-radius:45% 55% 40% 60% / 55% 45% 55% 45%;
  background:linear-gradient(200deg,#e9a4f2,#f6a8d4 50%,#ffc9a8);opacity:.8}
.bg i{position:absolute;display:block;border-radius:50%}
.bg .b1{left:-6%;top:34%;width:30%;height:36%;border-radius:55% 45% 60% 40% / 50% 60% 40% 50%;background:linear-gradient(160deg,#7fc2ff,#a9a4f5);opacity:.55}
.bg .b2{right:-10%;bottom:-18%;width:46%;height:62%;border-radius:50% 50% 45% 55% / 55% 45% 55% 45%;background:linear-gradient(140deg,#ffe98a,#ffd2a1);opacity:.85}
.bg .b3{left:28%;top:22%;width:46px;height:46px;background:radial-gradient(circle at 35% 30%,#cfe3ff,#8fb4f5);opacity:.7}

/* Glas-Grundbaustein */
.glass{position:relative;background:var(--glass-bg);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--line);box-shadow:var(--glass-shadow)}

/* ---------- Kopfleiste ---------- */
/* bündig am oberen Rand, fast randbreit, nur unten abgerundet */
.topbar{position:sticky;top:0;z-index:20;margin:0 auto;width:calc(100% - 28px);
  display:flex;align-items:center;gap:18px;padding:14px 24px;border-radius:0 0 34px 34px;border-top:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.3rem;letter-spacing:-.02em;flex-shrink:0}
.logo{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));transition:transform .5s var(--bounce)}
.brand:hover .logo{transform:rotate(-6deg) scale(1.06)}

.search{position:relative;flex:1;max-width:560px;margin:0 auto}
.search input{width:100%;height:42px;padding:0 16px 0 42px;border-radius:999px;font-size:.98rem;color:var(--fg);
  border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 3px rgba(20,30,60,.08);outline:none;transition:background .2s,box-shadow .2s}
.search input:focus{background:rgba(255,255,255,.85);box-shadow:0 0 0 3px rgba(31,111,235,.18)}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search-icon{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);border-radius:var(--radius);padding:8px;max-height:70vh;overflow:auto;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.70))}
.search-results h4{margin:8px 10px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.search-results a{display:block;padding:8px 10px;border-radius:12px;text-decoration:none}
.search-results a:hover,.search-results a.active{background:rgba(31,111,235,.10)}
.search-results .sub{display:block;font-size:.82rem;color:var(--muted)}
.search-results .all{font-weight:600;color:var(--accent);text-align:center;margin-top:4px}
.search-results .none{padding:10px;color:var(--muted)}

.account{display:flex;align-items:center;gap:8px;flex-shrink:0}
.account form{margin:0}
.who{font-size:.86rem;color:var(--muted);margin-right:4px;white-space:nowrap}
.who strong{color:var(--fg)}
.pill{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;font:inherit;font-size:.92rem;font-weight:600;
  color:var(--fg);text-decoration:none;cursor:pointer;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,0 2px 8px rgba(28,38,72,.06);
  transition:transform .4s var(--bounce),background .2s}
.pill:hover{transform:scale(1.05);background:rgba(255,255,255,.8)}
.pill.primary{background:var(--fg);color:#fff;border-color:var(--fg);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pill.primary:hover{background:#000}

/* ---------- Inhalt ---------- */
main{width:min(1180px,calc(100% - 24px));margin:36px auto;flex:1}
main.narrow{max-width:480px}
main.card{padding:28px;border-radius:24px}
h1{margin:0 0 12px;letter-spacing:-.02em}
.lead{color:var(--muted);margin:0 0 28px;font-size:1.05rem}
.muted,small{color:var(--muted)}
.msg{padding:10px 14px;border-radius:14px;margin-bottom:14px;background:rgba(255,255,255,.6);border:1px solid var(--line)}
.msg.error{color:var(--err);border-color:rgba(180,35,24,.35)}
.msg.ok{color:var(--ok);border-color:rgba(6,118,71,.35)}

/* Formulare */
label{display:block;margin:14px 0 4px;font-weight:600}
input:not([type=hidden]):not([type=search]){width:100%;padding:11px 14px;border-radius:12px;font-size:1rem;color:var(--fg);
  border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.6);box-shadow:inset 0 1px 3px rgba(20,30,60,.08);outline:none}
input:not([type=hidden]):not([type=search]):focus{background:rgba(255,255,255,.9);box-shadow:0 0 0 3px rgba(31,111,235,.18)}
button,.btn{display:inline-block;margin-top:18px;padding:11px 20px;border:0;border-radius:999px;font:inherit;font-weight:600;
  background:var(--fg);color:#fff;cursor:pointer;text-decoration:none;transition:transform .4s var(--bounce)}
button:hover,.btn:hover{transform:scale(1.04)}
button.pill{margin:0}
button.link{background:none;color:var(--fg);padding:0;margin:0;text-decoration:underline}
.section{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.7)}
.section h2{font-size:1.1rem;margin:0 0 4px}

/* ---------- Kategorie-Kacheln ---------- */
/* Kacheln stehen einzeln, ohne gemeinsame Glasfläche */
.tiles-panel{padding:0;margin-top:48px}
.tiles{display:flex;gap:22px;overflow-x:auto;padding:14px 8px 24px;margin:-14px -8px -24px;
  scroll-snap-type:x proximity;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tiles>.tile{flex:1 1 0;min-width:190px;scroll-snap-align:start}
.tile{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:130px;padding:22px 24px;border-radius:28px;text-decoration:none;color:var(--fg);
  background:var(--tint),var(--glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
  border:1px solid rgba(255,255,255,.75);box-shadow:var(--glass-shadow);
  transition:transform .55s var(--bounce),box-shadow .3s}
/* Lichtkante oben links wie bei Glas */
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),
             linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 40%)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -10px 20px rgba(255,255,255,.12)}
.tile-name{position:relative;z-index:1;font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.tile-soon{display:block;font-weight:500;font-size:.84rem;color:var(--muted)}
.chev{position:relative;z-index:1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--bounce)}
a.tile:hover,a.tile:focus-visible{transform:scale(1.045);box-shadow:inset 0 1px 0 #fff,0 16px 36px rgba(28,38,72,.16);outline:none}
a.tile:hover .chev{transform:translateX(3px)}
a.tile:active{transform:scale(.98);transition-duration:.15s}

/* Farben je Kategorie: Verlauf über dem Glas, nie deckend */
.t-protein{--tint:linear-gradient(135deg,rgba(100,170,255,.92),rgba(60,140,250,.72) 60%,rgba(130,195,255,.62))}
.t-matcha {--tint:linear-gradient(135deg,rgba(110,225,165,.92),rgba(45,195,130,.70) 60%,rgba(150,235,195,.60))}
.t-coffee {--tint:linear-gradient(135deg,rgba(232,200,150,.95),rgba(200,150,90,.72) 60%,rgba(240,215,180,.60))}
.t-flavour{--tint:linear-gradient(135deg,rgba(255,150,195,.92),rgba(240,90,155,.70) 60%,rgba(255,185,215,.60))}
/* Clear: tropischer Orange-Verlauf, etwas durchsichtiger als die anderen */
.t-clear{--tint:linear-gradient(120deg,rgba(255,170,85,.85),rgba(255,105,85,.62) 45%,rgba(255,215,85,.72) 75%,rgba(90,210,190,.50))}

/* noch nicht verfügbar: Farbe bleibt, nur leicht gedämpft */
.tile.soon{cursor:not-allowed;filter:grayscale(.15);opacity:.92}
.tile.soon .chev{opacity:.35}

/* ---------- Footer ---------- */
footer{width:min(1180px,calc(100% - 24px));margin:0 auto 24px;padding:14px 4px;font-size:.88rem}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{text-decoration:underline}

/* Platzhalter-Markierung (Impressum) */
.todo{background:#fff3bf;color:#5c4800;padding:0 4px;border-radius:4px}

/* Suche-Seite */
.results{list-style:none;margin:0;padding:0}
.results li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.7)}
.results .sub{display:block;font-size:.88rem;color:var(--muted)}

/* ---------- Handy ---------- */
@media (max-width:860px){
  .topbar{flex-wrap:wrap;gap:10px;top:8px}
  .search{order:3;flex-basis:100%;max-width:none}
  .account{margin-left:auto}
  .who{display:none}
}
@media (max-width:600px){
  .tiles>.tile{flex:0 0 72%}
  .tiles-panel{padding:10px;border-radius:26px}
  .brand{gap:6px}
  .brand span{font-size:1.05rem}
  .logo{width:32px;height:32px}
  .topbar{padding:8px 10px}
  .account{gap:6px}
  .pill{height:32px;padding:0 10px;font-size:.8rem}
  main.card{padding:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}