/* Foodexa Premium – Redesign 2026
   Farben und Maße folgen FoodexaTheme.swift v2 (iOS Build 292). */

:root{
  --fx-blue:#3DA4F5; --fx-blue-deep:#1E7ECC; --fx-blue-acc:#1261A6;
  --fx-blue-tint:rgba(61,164,245,.14); --fx-glow:rgba(61,164,245,.35);
  --fx-ink:#071A2E; --fx-ink-2:#4A5B6E; --fx-neutral:#6B7C8F;
  --fx-bg:#F3F7FB; --fx-card:#fff; --fx-surface:#EBF2F9; --fx-surface-2:#DCE7F2;
  --fx-border:#D6E1EC; --fx-warm:#FFA928; --fx-success:#2FB56B; --fx-danger:#E4553D;
  --fx-r-chip:999px; --fx-r-field:14px; --fx-r-ctrl:18px; --fx-r-card:22px; --fx-r-hero:28px;
  --fx-shadow:0 6px 20px rgba(7,26,46,.07);
  --fx-shadow-lg:0 16px 40px rgba(7,26,46,.12);
}

*{box-sizing:border-box}
body.fx{margin:0;background:var(--fx-bg);color:var(--fx-ink);
  font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:60px}
.fx a{color:var(--fx-blue-acc);text-decoration:none}
.fx a:hover{color:var(--fx-blue-deep);text-decoration:underline}
.fx img{display:block}
.fx-wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.fx-hidden{display:none !important}

/* Kopfzeile ---------------------------------------------------------- */
.fx-header{position:sticky;top:0;z-index:40;background:rgba(243,247,251,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--fx-border)}
.fx-header-in{display:flex;align-items:center;gap:22px;padding:14px 24px;flex-wrap:wrap}
.fx-brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.fx-brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 6px 16px rgba(61,164,245,.32)}
.fx-brand span{font-size:22px;font-weight:700;letter-spacing:-.4px}
.fx-nav{display:flex;gap:6px}
.fx-nav button{border:0;background:transparent;color:var(--fx-ink-2);font-size:15px;font-weight:600;
  padding:10px 14px;border-radius:12px;cursor:pointer}
.fx-nav button:hover,.fx-nav button[aria-current="page"]{background:var(--fx-surface);color:var(--fx-ink)}
.fx-spacer{flex:1 1 120px}
.fx-addr{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--fx-border);
  border-radius:var(--fx-r-chip);padding:8px 16px 8px 12px;cursor:pointer;max-width:300px}
.fx-addr b{font-size:10.5px;font-weight:700;letter-spacing:.9px;color:var(--fx-neutral);display:block}
.fx-addr span{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Bausteine ---------------------------------------------------------- */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 24px;
  border:0;border-radius:var(--fx-r-ctrl);background:var(--fx-blue);color:#fff;font-size:16.5px;font-weight:700;
  cursor:pointer;box-shadow:0 10px 24px var(--fx-glow)}
.fx-btn:hover{background:var(--fx-blue-deep)}
.fx-btn[disabled]{background:#A9C9E4;box-shadow:none;cursor:not-allowed}
.fx-btn-sm{height:42px;padding:0 18px;font-size:14.5px;border-radius:var(--fx-r-field)}
.fx-btn-ghost{background:#fff;color:var(--fx-ink);border:1px solid var(--fx-border);box-shadow:none}
.fx-btn-ghost:hover{background:#fff;border-color:var(--fx-blue);color:var(--fx-blue-acc)}
.fx-card{background:var(--fx-card);border:1px solid var(--fx-border);border-radius:var(--fx-r-card);box-shadow:var(--fx-shadow)}
.fx-field{height:50px;padding:0 14px;border:1px solid var(--fx-border);border-radius:var(--fx-r-field);
  font-size:15.5px;background:#fff;width:100%}
.fx-label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--fx-neutral);letter-spacing:.5px}
.fx-chip{height:42px;padding:0 18px;border-radius:var(--fx-r-chip);border:1px solid var(--fx-border);
  background:#fff;color:var(--fx-ink-2);font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;
  align-items:center;gap:10px}
.fx-chip.is-on{background:var(--fx-blue);border-color:var(--fx-blue);color:#fff}
.fx-chip img{width:34px;height:34px;border-radius:999px;object-fit:cover}
.fx-seg{display:flex;gap:4px;background:var(--fx-surface);border-radius:16px;padding:4px;max-width:360px}
.fx-seg button{flex:1;min-width:120px;height:44px;border:0;border-radius:12px;background:transparent;
  color:var(--fx-neutral);font-size:15px;font-weight:700;cursor:pointer}
.fx-seg button.is-on{background:#fff;color:var(--fx-ink);box-shadow:0 3px 8px rgba(7,26,46,.12)}
.fx-row{display:flex;align-items:center;gap:13px;width:100%;padding:14px 16px;border-radius:16px;
  background:#fff;border:1.5px solid var(--fx-border);cursor:pointer;text-align:left}
.fx-row.is-on{background:rgba(61,164,245,.1);border-color:var(--fx-blue)}
.fx-row .fx-ico{width:40px;height:40px;border-radius:12px;background:var(--fx-surface);display:grid;
  place-items:center;font-size:16px;font-weight:700;flex:0 0 auto}
.fx-radio{width:22px;height:22px;border-radius:999px;border:2px solid var(--fx-border);background:#fff;flex:0 0 auto}
.fx-row.is-on .fx-radio{border:7px solid var(--fx-blue)}
.fx-check{width:22px;height:22px;border-radius:7px;border:2px solid var(--fx-border);background:#fff;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700}
.fx-row.is-on .fx-check{background:var(--fx-blue);border-color:var(--fx-blue)}
.fx-badge{border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;color:#fff;background:var(--fx-success)}
.fx-badge.is-off{background:var(--fx-neutral)}
.fx-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--fx-neutral)}
.fx-h1{font-size:40px;font-weight:700;letter-spacing:-1.1px;margin:10px 0 8px;text-wrap:pretty}
.fx-h2{font-size:24px;font-weight:700;letter-spacing:-.5px;margin:0 0 12px}

/* Startseite --------------------------------------------------------- */
.fx-hero{background:linear-gradient(135deg,#E6F1FC 0%,#F5FAFF 52%,#EAF4FE 100%);
  border:1px solid var(--fx-border);border-radius:30px;padding:52px;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center;margin-top:34px}
.fx-hero h1{font-size:52px;line-height:1.06;letter-spacing:-1.4px;margin:20px 0 14px;font-weight:700}
.fx-hero p.lead{font-size:18.5px;line-height:1.5;color:var(--fx-ink-2);margin:0 0 28px;max-width:30em}
.fx-addressbook{display:flex;gap:10px;align-items:center;margin:0 0 12px}.fx-addressbook .fx-field{flex:1;min-width:0}.fx-addressbook .fx-btn{flex:0 0 auto}
.fx-searchbar{display:flex;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--fx-border);
  border-radius:20px;padding:12px;box-shadow:0 14px 34px rgba(7,26,46,.08);max-width:620px}
.fx-searchbar .fx-field{height:52px;flex:1 1 210px;min-width:0}
.fx-collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fx-collage img{width:100%;border-radius:20px;object-fit:cover;height:108px;box-shadow:0 12px 28px rgba(7,26,46,.14)}
.fx-collage img:first-child{grid-row:span 2;height:230px;border-radius:24px}
.fx-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:22px}
.fx-rest{background:#fff;border:1px solid var(--fx-border);border-radius:24px;overflow:hidden;cursor:pointer;
  box-shadow:var(--fx-shadow);transition:transform .18s ease,box-shadow .18s ease}
.fx-rest:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(7,26,46,.13)}
.fx-rest .pic{position:relative;height:168px;overflow:hidden;background:var(--fx-surface)}
.fx-rest .pic img{display:block;width:100%;height:100%;object-fit:cover}
.fx-rest .pic .fx-badge{position:absolute;top:12px;left:14px}
.fx-rest .pic .eta{position:absolute;bottom:12px;left:14px;background:rgba(255,255,255,.94);border-radius:999px;
  padding:6px 12px;font-size:13.5px;font-weight:800;color:var(--fx-ink)}
.fx-rest .body{padding:18px 20px 20px}
.fx-rest h3{font-size:20px;line-height:1.25;font-weight:750;letter-spacing:-.2px;color:var(--fx-ink);margin:0}
.fx-tag{background:var(--fx-surface);border-radius:999px;padding:6px 11px;font-size:13.5px;line-height:1.2;font-weight:700;color:var(--fx-ink)}
.fx-app{margin-top:44px;background:var(--fx-ink);border-radius:28px;padding:40px;display:grid;
  grid-template-columns:minmax(0,1fr) 200px;gap:30px;align-items:center;color:#fff}
.fx-app h2{font-size:30px;font-weight:700;letter-spacing:-.7px;margin:12px 0 10px}
.fx-app p{margin:0 0 24px;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.8)}
.fx-store{display:inline-flex;align-items:center;height:54px;padding:0 22px;border-radius:16px;background:#fff;
  color:var(--fx-ink);font-size:15.5px;font-weight:700;text-decoration:none}
.fx-store.alt{background:rgba(255,255,255,.14);color:#fff}
.fx-store:hover{text-decoration:none}

/* App-Banner --------------------------------------------------------- */
.fx-appbar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--fx-ink);color:#fff}
.fx-appbar img{width:44px;height:44px;border-radius:12px}
.fx-appbar .t{flex:1;min-width:0;font-size:13px;line-height:1.35;color:rgba(255,255,255,.78)}
.fx-appbar .t b{display:block;font-size:15px;color:#fff}
.fx-appbar a{height:40px;padding:0 16px;display:inline-flex;align-items:center;border-radius:999px;
  background:var(--fx-blue);color:#fff;font-size:14px;font-weight:700}
.fx-appbar a:hover{text-decoration:none;background:var(--fx-blue-deep)}
.fx-appbar button{width:32px;height:32px;border:0;border-radius:999px;background:rgba(255,255,255,.14);
  color:#fff;font-size:14px;cursor:pointer}

/* Restaurant --------------------------------------------------------- */
.fx-resthero{position:relative;border-radius:var(--fx-r-hero);overflow:hidden;box-shadow:var(--fx-shadow-lg)}
.fx-resthero>img{width:100%;height:280px;object-fit:cover}
.fx-resthero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,46,0) 34%,rgba(7,26,46,.82) 100%)}
.fx-resthero .meta{position:absolute;left:32px;right:32px;bottom:26px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;color:#fff}
.fx-resthero .meta img{width:76px;height:76px;border-radius:20px;border:3px solid #fff}
.fx-resthero h1{font-size:36px;font-weight:700;letter-spacing:-.9px;margin:0 0 8px}
.fx-restgrid{display:grid;grid-template-columns:196px minmax(0,1fr) 330px;gap:28px;align-items:start}
.fx-side{position:sticky;top:96px}
.fx-menunav{padding:12px}
.fx-menunav button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;
  background:transparent;cursor:pointer;padding:11px 13px;border-radius:14px;font-size:14.5px;font-weight:600;
  color:var(--fx-ink-2);text-align:left}
.fx-menunav button.is-on{background:var(--fx-blue-tint);color:var(--fx-blue-acc)}
.fx-item{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:18px;background:#fff;border:1px solid var(--fx-border);
  border-radius:var(--fx-r-card);padding:18px;cursor:pointer;box-shadow:0 4px 14px rgba(7,26,46,.05);
  transition:border-color .16s ease,box-shadow .16s ease}
.fx-item:hover{border-color:var(--fx-blue);box-shadow:0 12px 28px rgba(7,26,46,.1)}
.fx-item h3{font-size:18px;font-weight:600;margin:0 0 6px}
.fx-item p{margin:0 0 12px;color:var(--fx-ink-2);font-size:14.5px;line-height:1.45}
.fx-item .price{font-size:17.5px;font-weight:700}
.fx-item .thumb{position:relative}
.fx-item .thumb img{width:132px;height:104px;object-fit:cover;border-radius:16px}
.fx-item .plus{position:absolute;right:-6px;bottom:-6px;width:38px;height:38px;border-radius:999px;background:var(--fx-blue);
  color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 8px 18px var(--fx-glow)}
.fx-sum{display:flex;justify-content:space-between;font-size:14.5px;color:var(--fx-ink-2)}
.fx-sum.total{font-size:20px;font-weight:700;color:var(--fx-ink)}
.fx-bar{height:6px;border-radius:999px;background:var(--fx-surface-2);overflow:hidden}
.fx-bar i{display:block;height:100%;border-radius:999px;background:var(--fx-warm);transition:width .5s ease}
.fx-bar i.ok{background:var(--fx-success)}
.fx-qty{display:flex;align-items:center;gap:8px}
.fx-qty button{width:34px;height:34px;border:1px solid var(--fx-border);background:#fff;border-radius:11px;
  font-size:17px;cursor:pointer;color:var(--fx-ink)}

/* Fenster / Sheets --------------------------------------------------- */
.fx-sheet{position:fixed;inset:0;background:rgba(7,26,46,.55);backdrop-filter:blur(4px);z-index:90;display:flex;
  align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.fx-sheet .card{width:100%;max-width:560px;background:#fff;border-radius:var(--fx-r-hero);overflow:hidden;
  box-shadow:0 30px 70px rgba(7,26,46,.4);animation:fxUp .26s cubic-bezier(.2,.8,.2,1) both}
.fx-sheet .card.wide{max-width:620px}
.fx-sheet .card.narrow{max-width:480px}
.fx-sheet .head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 26px;border-bottom:1px solid var(--fx-surface)}
.fx-sheet .head h2{margin:0;font-size:23px;font-weight:700;letter-spacing:-.5px}
.fx-x{width:40px;height:40px;border:0;border-radius:999px;background:var(--fx-surface);font-size:17px;cursor:pointer;color:var(--fx-ink)}
.fx-sheet .foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--fx-border);padding:18px 26px;
  display:flex;align-items:center;gap:16px}
.fx-recs{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.fx-rec{flex:0 0 148px;background:#fff;border:1px solid var(--fx-border);border-radius:18px;padding:10px;text-align:center}
.fx-rec img{width:100%;height:78px;object-fit:cover;border-radius:12px}
.fx-table{display:grid;gap:2px}
.fx-table .r{display:grid;grid-template-columns:minmax(0,1fr) 130px 130px;gap:10px;font-size:15px;padding:9px 0;
  border-bottom:1px solid var(--fx-surface)}
.fx-table .r.h{font-size:12.5px;font-weight:700;letter-spacing:.6px;color:var(--fx-neutral);border:0}
.fx-overlay{position:fixed;inset:0;background:rgba(7,26,46,.7);backdrop-filter:blur(6px);z-index:95;display:grid;place-items:center;padding:24px}
.fx-overlay .box{width:100%;max-width:380px;background:#fff;border-radius:26px;padding:34px;text-align:center}
.fx-spin{width:52px;height:52px;margin:0 auto 20px;border-radius:999px;border:4px solid var(--fx-surface);
  border-top-color:var(--fx-blue);animation:fxSpin .9s linear infinite}

/* Status ------------------------------------------------------------- */
.fx-status{background:linear-gradient(135deg,var(--fx-blue) 0%,var(--fx-blue-deep) 100%);border-radius:var(--fx-r-hero);
  padding:34px;color:#fff;box-shadow:0 16px 40px rgba(30,126,204,.32)}
.fx-status h1{font-size:38px;font-weight:700;letter-spacing:-1px;margin:10px 0 8px}
.fx-step{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:16px;align-items:start}
.fx-dot{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;font-size:14px;font-weight:700;
  color:#fff;background:var(--fx-surface);border:2px solid var(--fx-border)}
.fx-dot.done{background:var(--fx-success);border-color:var(--fx-success)}
.fx-dot.now{background:var(--fx-blue);border-color:var(--fx-blue);box-shadow:0 0 0 6px rgba(61,164,245,.18);
  animation:fxPulse 1.6s ease-in-out infinite}
.fx-map{height:140px;border-radius:18px;background:linear-gradient(135deg,var(--fx-surface) 0%,var(--fx-surface-2) 100%);
  display:grid;place-items:center;color:var(--fx-neutral);font-size:14px;font-weight:600}

/* Profil, Recht ------------------------------------------------------ */
.fx-profilegrid{display:grid;grid-template-columns:238px minmax(0,1fr);gap:26px;align-items:start}
.fx-tabs{padding:12px}
.fx-tabs button{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:12px 14px;border-radius:14px;font-size:15px;font-weight:600;color:var(--fx-ink-2)}
.fx-tabs button.is-on{background:var(--fx-blue-tint);color:var(--fx-blue-acc)}
.fx-legal{background:#fff;border:1px solid var(--fx-border);border-radius:24px;padding:36px;font-size:16px;
  line-height:1.65;color:#2C3E52;max-width:800px}
.fx-legal h2{font-size:20px;font-weight:700;color:var(--fx-ink);margin:0 0 8px}
.fx-legal p{margin:0 0 24px}
.fx-note{padding:16px;background:var(--fx-surface);border-radius:16px;font-size:14.5px;color:var(--fx-ink-2)}
.fx-foot{max-width:1220px;margin:56px auto 0;padding:34px 24px;border-top:1px solid var(--fx-border);
  display:flex;gap:28px;flex-wrap:wrap;align-items:center}

/* Mobile Tab-Leiste -------------------------------------------------- */
.fx-mobilenav{display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:6px;padding:6px;
  background:rgba(243,247,251,.92);backdrop-filter:blur(14px);border:1px solid var(--fx-border);border-radius:26px;
  box-shadow:0 12px 30px rgba(7,26,46,.16)}
.fx-mobilenav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;
  justify-content:center;border:0;background:transparent;border-radius:20px;color:var(--fx-ink-2);font-size:11.5px;
  font-weight:700;cursor:pointer}
.fx-mobilenav button.cart{background:var(--fx-blue);color:#fff}

@keyframes fxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.82)}}

@media (max-width:1040px){ .fx-addr{display:none} }
@media (max-width:1080px){
  .fx-restgrid{grid-template-columns:minmax(0,1fr) 320px}
  .fx-restgrid>.fx-menunav{display:none}
}
@media (max-width:900px){
  .fx-hero,.fx-app{grid-template-columns:minmax(0,1fr);padding:34px}
  .fx-hero h1{font-size:38px}
  .fx-restgrid,.fx-checkoutgrid,.fx-statusgrid,.fx-profilegrid{grid-template-columns:minmax(0,1fr)}
  .fx-side{position:static}
  .fx-profilegrid>.fx-tabs{display:flex;flex-wrap:wrap;gap:6px}
  .fx-profilegrid>.fx-tabs button{width:auto}
}
@media (max-width:760px){
  .fx-nav,.fx-header .fx-btn-ghost{display:none}
  .fx-mobilenav{display:flex}
  body.fx{padding-bottom:96px}
  .fx-wrap{padding:0 16px}
  .fx-hero{padding:26px;border-radius:24px}
  .fx-hero h1{font-size:30px;letter-spacing:-.8px}
  .fx-collage img:first-child{height:150px;grid-row:auto}
  .fx-collage img{height:80px}
  .fx-resthero>img{height:190px}
  .fx-resthero h1{font-size:26px}
  .fx-resthero .meta{left:18px;right:18px;bottom:16px;gap:12px}
  .fx-resthero .meta img{width:56px;height:56px}
  .fx-legal{padding:22px;border-radius:20px}
  .fx-sheet{padding:0;align-items:flex-end}
  .fx-sheet .card,.fx-sheet .card.wide,.fx-sheet .card.narrow{max-width:none;border-radius:24px 24px 0 0;max-height:94vh;overflow:auto}
}
@media (max-width:620px){
  .fx-hero h1{font-size:27px}
  .fx-item{grid-template-columns:minmax(0,1fr) 96px}
  .fx-item .thumb img{width:96px;height:86px}
  .fx-table .r{grid-template-columns:minmax(0,1fr) 100px 100px;font-size:14px}
}

/* ===========================================================================
   Design-Update 09/2026
   Die Regeln ab hier stehen bewusst am Dateiende: gleiche Spezifitaet, spaetere
   Position - dadurch gewinnen sie gegen die Bloecke darueber, ohne dass dort
   etwas geloescht werden muss.
   Behandelt: Handy-Kopfzeile, Speisekarten-Navigation auf kleinen Schirmen,
   Kontraste, Fokus, Tap-Flaechen, Safe Area, grosse Bildschirme, Nachtmodus.
   =========================================================================== */

:root{ --fx-headerh:68px }

/* --- Kopfzeile ------------------------------------------------------------
   .fx-brand ist jetzt ein <button> (vorher ein <div> ohne Tastaturzugang) und
   braucht deshalb die Browser-Vorgaben zurueckgesetzt. */
/* Die Kopfzeile bleibt auf jeder Breite einzeilig. Zu lange Adressen kuerzt
   der Adresschip, statt den Warenkorb in eine zweite Zeile zu draengen. */
.fx-header-in{flex-wrap:nowrap}
.fx-addr{min-width:0;flex:0 1 auto}
.fx-nav{flex:0 0 auto}
.fx-brand{border:0;background:transparent;padding:0;font:inherit;color:inherit;flex:0 0 auto}
.fx-brand span{color:var(--fx-ink)}
.fx-addr-pin{width:26px;height:26px;border-radius:999px;background:var(--fx-blue-tint);
  color:var(--fx-blue-acc);display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.fx-addr-txt{min-width:0}
.fx-cartcount{background:rgba(255,255,255,.26);border-radius:999px;min-width:22px;height:22px;
  display:grid;place-items:center;font-size:12.5px}

/* --- Bausteine ------------------------------------------------------------ */
/* Weisser Text auf #3DA4F5 erreicht nur 2,7:1. Der dokumentierte Verlauf
   (#1261A6 -> #1E7ECC) bringt denselben Markenton auf ueber 4,5:1. */
.fx-btn{background:var(--fx-gradient,linear-gradient(135deg,#1261A6,#1E7ECC));
  box-shadow:0 8px 20px rgba(18,97,166,.28);transition:filter var(--fx-dur-2,.2s) ease,transform var(--fx-dur-1,.12s) ease}
.fx-btn:active{transform:translateY(1px)}
.fx-btn-ghost{background:var(--fx-card);color:var(--fx-ink);border:1px solid var(--fx-border)}
.fx-btn-ghost:hover{background:var(--fx-card)}
.fx-field{background:var(--fx-card);color:var(--fx-ink);transition:border-color var(--fx-dur-2,.2s) ease,box-shadow var(--fx-dur-2,.2s) ease}
.fx-field:focus{border-color:var(--fx-blue);box-shadow:0 0 0 3px var(--fx-glow);outline:none}
.fx-field::placeholder{color:var(--fx-neutral)}
.fx-chip,.fx-row,.fx-rest,.fx-item,.fx-rec,.fx-qty button,.fx-seg button.is-on,
.fx-addr,.fx-sheet .card,.fx-sheet .foot,.fx-overlay .box{background:var(--fx-card)}
.fx-addr,.fx-addr span{color:var(--fx-ink)}
/* Beschriftungen der Schaltflaechen nie umbrechen ("Restaurants finden"
   stand sonst zweizeilig, "0,00 €" brach hinter dem Komma um). */
.fx-btn,.fx-chip,.fx-seg button,.fx-store{white-space:nowrap}
.fx-chip,.fx-seg button,.fx-row,.fx-menunav button,.fx-tabs button,.fx-qty button,.fx-x{
  transition:background var(--fx-dur-2,.2s) ease,border-color var(--fx-dur-2,.2s) ease,color var(--fx-dur-2,.2s) ease}
.fx-chip.is-on{background:var(--fx-blue-acc);border-color:var(--fx-blue-acc)}
.fx-row.is-on{background:var(--fx-blue-tint)}
/* Aktive Zustaende nicht nur ueber Farbe kennzeichnen. */
.fx-chip.is-on,.fx-seg button.is-on,.fx-menunav button.is-on,.fx-tabs button.is-on{font-weight:700}
/* "Geoeffnet"/"Vorbestellen" trugen weissen Text auf hellem Gruen (2,6:1). */
.fx-badge{background:var(--fx-success-ink,#1B7D48)}
.fx-badge.is-off{background:#4C5D6E}
.fx-eyebrow{color:var(--fx-ink-2)}
.fx-legal{background:var(--fx-card);color:var(--fx-ink-2)}
.fx-qty button{width:40px;height:40px}
.fx-x{width:44px;height:44px}
.fx-appbar button{width:40px;height:40px}

/* Fluide Ueberschriften: vorher fest 40px bzw. 52px, auch auf 320px-Schirmen. */
.fx-h1{font-size:clamp(26px,1.5rem + 2.2vw,40px);letter-spacing:-.9px}
.fx-h2{font-size:clamp(19px,1.15rem + .7vw,24px)}
.fx-hero h1{font-size:clamp(28px,1.6rem + 3.2vw,52px);letter-spacing:-1px}
.fx-status h1{font-size:clamp(27px,1.5rem + 2.4vw,38px)}
.fx-resthero h1{font-size:clamp(22px,1.3rem + 1.8vw,36px)}

/* Suchleiste: die drei Felder standen auf dem Handy in drei verschiedenen
   Breiten nebeneinander. Jetzt fuellt der Knopf die Restzeile bzw. die
   volle Breite. */
.fx-searchbar .fx-btn{flex:1 1 170px}
.fx-collage img{height:auto;aspect-ratio:16/10}
.fx-collage img:first-child{height:auto;aspect-ratio:3/4}
.fx-resthero>img{height:auto;aspect-ratio:21/5;min-height:170px}

/* Sticky-Spalte sass 28px zu tief, weil 96px geraten statt gemessen war. */
.fx-side{top:calc(var(--fx-headerh) + 16px)}

/* Hover nur dort, wo es ein Zeigegeraet gibt - sonst bleibt der Zustand nach
   dem Antippen auf dem Handy "kleben". */
@media (hover:hover){
  .fx-chip:hover{border-color:var(--fx-blue);color:var(--fx-blue-acc)}
  .fx-row:hover{border-color:var(--fx-blue)}
  .fx-menunav button:hover,.fx-tabs button:hover{background:var(--fx-surface);color:var(--fx-ink)}
  .fx-qty button:hover,.fx-x:hover{background:var(--fx-surface-2)}
  .fx-btn:hover{filter:brightness(1.06)}
  .fx-rec:hover{border-color:var(--fx-blue)}
  .fx-store:hover{filter:brightness(.94)}
}
@media (hover:none){
  .fx-rest:hover{transform:none;box-shadow:var(--fx-shadow)}
}

/* Karten sind anklickbar - dann muessen sie auch fokussierbar aussehen. */
.fx-rest:focus-visible,.fx-item:focus-visible,.fx-rec:focus-visible{
  outline:3px solid var(--fx-blue);outline-offset:3px}

/* --- Speisekarte auf Tablet und Handy -------------------------------------
   Bisher verschwand die Kategorienavigation unter 1080px ersatzlos; die
   Speisekarte wurde zur endlosen Liste. Jetzt wird sie zur waagrechten
   Leiste - so verlangt es auch Documentation/PROFESSIONELLES-DESIGN.md. */
@media (max-width:1080px){
  .fx-restgrid>.fx-menunav{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
    position:sticky;top:calc(var(--fx-headerh) + 8px);z-index:30;padding:7px;
    background:var(--fx-card);border:1px solid var(--fx-border);border-radius:var(--fx-r-chip);
    box-shadow:var(--fx-shadow);scrollbar-width:thin}
  .fx-restgrid>.fx-menunav button{width:auto;flex:0 0 auto;scroll-snap-align:start;
    border-radius:999px;white-space:nowrap;padding:10px 16px}
  .fx-restgrid>.fx-menunav button.is-on{background:var(--fx-blue-acc);color:#fff}
}

/* --- Kopfzeile auf kleinen Schirmen ---------------------------------------
   Die Lieferadresse war ab 1040px ausgeblendet - ausgerechnet die Angabe,
   die auf dem Handy am wichtigsten ist. Sie bleibt jetzt sichtbar und wird
   stattdessen kompakter. */
/* Zwischen 760 und 1100px passten Marke, Navigation, Adresse, "Anmelden" und
   Warenkorb nicht in eine Zeile - die Kopfzeile wurde 127px hoch (doppelt).
   "Anmelden" entfaellt dort; der Weg dahin fuehrt ueber "Profil". */
@media (max-width:1100px){
  .fx-hide-sm{display:none}
  .fx-spacer{flex:1 1 0}
  .fx-header-in{gap:12px;flex-wrap:nowrap}
}
@media (max-width:1040px){
  .fx-addr{display:flex;max-width:200px;padding:7px 12px;min-width:0}
  .fx-addr b{display:none}
}
@media (max-width:760px){
  .fx-header-in{flex-wrap:nowrap;gap:10px;padding:10px 16px}
  .fx-spacer{display:none}
  .fx-addr{flex:1 1 auto;max-width:none;min-width:0}
  .fx-brand img{width:36px;height:36px}
  .fx-hide-sm{display:none}
  /* In einer Spalte wirkt flex-basis auf die Hoehe - ohne dieses Zuruecksetzen
     wuchs das Ortsfeld auf 170px Hoehe an. */
  .fx-addressbook{align-items:stretch;flex-direction:column}.fx-addressbook .fx-btn{width:100%}
  .fx-searchbar{flex-direction:column;padding:10px}
  .fx-searchbar .fx-field,.fx-searchbar .fx-field-city,.fx-searchbar .fx-btn{
    width:100%;flex:0 0 auto;height:52px}
  .fx-foot{flex-direction:column;align-items:flex-start;gap:16px;padding:28px 16px}
  /* Bottom-Sheets: Kopf bleibt stehen, damit das Schliessen-X beim Scrollen
     nicht aus dem Bild wandert. */
  .fx-sheet .head{position:sticky;top:0;z-index:2;background:var(--fx-card)}
  .fx-sheet .card::before{content:"";display:block;width:42px;height:4px;border-radius:999px;
    background:var(--fx-border-strong,#BACCDE);margin:8px auto 0}
}
@media (max-width:420px){
  .fx-brand span{display:none}
}

/* --- Safe Area (iPhone mit Home-Indikator) --------------------------------
   viewport-fit=cover war gesetzt, die Folge daraus fehlte. */
.fx-mobilenav{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.fx-sheet .foot{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px){
  body.fx{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
}
.fx-mobilenav button .i{font-size:19px;line-height:1}
.fx-mobilenav button[aria-current="page"]{background:var(--fx-surface);color:var(--fx-ink)}
.fx-mobilenav button.cart,.fx-mobilenav button.cart[aria-current="page"]{
  background:var(--fx-gradient,linear-gradient(135deg,#1261A6,#1E7ECC));color:#fff}

/* --- Fusszeile ------------------------------------------------------------ */
.fx-foot-brand{display:flex;align-items:center;gap:10px}
.fx-foot-brand img{border-radius:9px}
.fx-foot-brand span{font-size:17px;font-weight:700}
.fx-foot-claim{color:var(--fx-neutral);font-size:14.5px}
.fx-foot-sp{flex:1}
.fx-foot-links{display:flex;gap:20px;flex-wrap:wrap}

/* --- Grosse Bildschirme ---------------------------------------------------
   Ab etwa 1600px blieb alles bei 1220px stehen, mit sehr viel Leerflaeche. */
@media (min-width:1600px){
  .fx-wrap,.fx-foot{max-width:1380px}
  .fx-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .fx-hero{padding:60px}
}
@media (min-width:1920px){
  .fx-wrap,.fx-foot{max-width:1560px}
}

/* --- Nachtmodus -----------------------------------------------------------
   Das Paket hatte bisher keinen. Die Tokens kommen aus foodexa-design.css;
   hier stehen nur die Stellen, an denen frueher feste Farben verbaut waren. */
html[data-theme="dark"] .fx-header,
body.dark-mode .fx-header{background:rgba(11,21,32,.88)}
html[data-theme="dark"] .fx-mobilenav,
body.dark-mode .fx-mobilenav{background:rgba(19,34,50,.94)}
html[data-theme="dark"] .fx-hero,
body.dark-mode .fx-hero{background:linear-gradient(135deg,#13273A 0%,#0E1D2C 52%,#152B41 100%)}
/* --fx-ink kippt im Nachtmodus auf Hell - diese beiden Flaechen muessen
   aber dunkel bleiben. */
html[data-theme="dark"] .fx-app,
body.dark-mode .fx-app,
html[data-theme="dark"] .fx-appbar,
body.dark-mode .fx-appbar{background:#0A1826;color:#fff}
html[data-theme="dark"] .fx-app p,
body.dark-mode .fx-app p{color:rgba(255,255,255,.82)}
html[data-theme="dark"] .fx-store,
body.dark-mode .fx-store{background:#E8F1F9;color:#071A2E}
html[data-theme="dark"] .fx-store.alt,
body.dark-mode .fx-store.alt{background:rgba(255,255,255,.16);color:#fff}
html[data-theme="dark"] .fx-rest .pic .eta,
body.dark-mode .fx-rest .pic .eta{background:rgba(11,21,32,.92);color:var(--fx-ink)}
html[data-theme="dark"] .fx-badge,
body.dark-mode .fx-badge{background:#18683E;color:#E6FBF0}
html[data-theme="dark"] .fx-badge.is-off,
body.dark-mode .fx-badge.is-off{background:#33475C;color:#E8F1F9}
html[data-theme="dark"] .fx-sheet,
body.dark-mode .fx-sheet{background:var(--fx-veil)}
html[data-theme="dark"] .fx-sheet .card,
body.dark-mode .fx-sheet .card,
html[data-theme="dark"] .fx-sheet .foot,
body.dark-mode .fx-sheet .foot,
html[data-theme="dark"] .fx-overlay .box,
body.dark-mode .fx-overlay .box{background:var(--fx-card);color:var(--fx-ink)}
html[data-theme="dark"] .fx-resthero .meta img,
body.dark-mode .fx-resthero .meta img{border-color:var(--fx-card)}
html[data-theme="dark"] .fx-dot,
body.dark-mode .fx-dot{color:var(--fx-ink)}
html[data-theme="dark"] .fx-dot.done,
body.dark-mode .fx-dot.done,
html[data-theme="dark"] .fx-dot.now,
body.dark-mode .fx-dot.now{color:#06192B}

/* ===========================================================================
   Klassen statt Inline-Styles
   Die Ansichten (foodexa-premium.views.js) trugen 216 style="..."-Attribute.
   Inline-Styles gewinnen gegen jede Media-Query - genau daran scheiterte das
   Handy-Layout von Kassa und Bestellverfolgung. Die Regeln stehen jetzt hier.
   Bewusst mobile-first (min-width statt max-width), damit sie sich nicht mit
   den aelteren max-width-Bloecken weiter oben in die Quere kommen.
   =========================================================================== */

/* Seitenbreiten - vorher sechs verschiedene Inline-Werte. */
.fx-page{padding-top:34px}
.fx-page-narrow{max-width:900px}
.fx-page-mid2{max-width:1000px}
.fx-page-wide{max-width:1100px}
.fx-page-text{max-width:var(--fx-maxw-text,840px);padding-top:40px}
.fx-page-form{max-width:520px;padding-top:40px}
.fx-stack{display:grid;gap:18px}
.fx-stack-sm{display:grid;gap:14px}
.fx-2col{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:480px){ .fx-2col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* Zweispaltige Bildschirme: Basis einspaltig, ab 901px mit Seitenspalte. */
.fx-checkoutgrid,.fx-statusgrid{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.fx-checkoutgrid{gap:26px}
.fx-statusgrid{gap:24px;margin-top:24px}
@media (min-width:901px){
  .fx-checkoutgrid{grid-template-columns:minmax(0,1.35fr) 360px}
  .fx-statusgrid{grid-template-columns:minmax(0,1fr) 320px}
}

/* Startseite */
.fx-pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.1px;
  color:var(--fx-blue-acc);background:var(--fx-card);border-radius:999px;padding:7px 14px;
  border:1px solid var(--fx-border)}
.fx-trust{list-style:none;display:flex;gap:14px 26px;margin:24px 0 0;padding:0;flex-wrap:wrap;
  font-size:14.5px;color:var(--fx-ink-2)}
.fx-trust li{display:flex;align-items:center;gap:7px}
.fx-trust li::before{content:"✓";color:var(--fx-success-ink);font-weight:700}
.fx-sec{margin-top:44px}
.fx-sec-eyebrow{margin:0 0 16px}
.fx-sec-title{margin:0 0 6px}
.fx-sec-sub{margin:0 0 20px;color:var(--fx-ink-2)}
.fx-rest-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fx-rating{font-size:14.5px;font-weight:800;white-space:nowrap;color:var(--fx-ink)}
.fx-rating .s{color:var(--fx-warm)}
.fx-rest-kueche{margin:7px 0 14px;color:var(--fx-ink-2);font-size:15px;line-height:1.4;font-weight:550}
.fx-tagrow{display:flex;gap:8px;flex-wrap:wrap}
.fx-app-eyebrow{color:#9FD3FC}
.fx-storerow{display:flex;gap:12px;flex-wrap:wrap}
.fx-app-logo{width:100%;max-width:200px;height:auto;border-radius:40px;justify-self:center}

/* Speisekarte */
.fx-menugroup{margin-bottom:34px}
.fx-itemfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fx-tag-blue{background:var(--fx-blue-tint);color:var(--fx-blue-acc)}
.fx-tag-warm{background:var(--fx-warm-soft,#FFF4E0);color:var(--fx-warm-ink,#8A5200)}

/* Bestellverfolgung */
.fx-status-eyebrow{color:rgba(255,255,255,.88)}
.fx-status-sub{margin:0;font-size:17.5px;opacity:.94}
.fx-progress{margin-top:22px;height:8px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden}
.fx-progress-i{height:100%;background:#fff;border-radius:999px;transition:width .7s var(--fx-ease,ease)}

/* Empfehlungen im Produktfenster */
.fx-rec-name{margin:9px 0 2px;font-size:14px;font-weight:600}
.fx-rec-price{margin:0 0 9px;font-size:13.5px;font-weight:700;color:var(--fx-ink-2)}
.fx-rec-add{width:100%;justify-content:center;height:40px;background:var(--fx-blue-tint);
  border:0;color:var(--fx-blue-acc)}
.fx-sheet-cover{width:100%;height:230px;object-fit:cover}
@media (max-width:620px){ .fx-sheet-cover{height:180px} }

/* ===========================================================================
   Echtbetrieb 09/2026
   Bausteine fuer die Ansichten mit echten Daten: Anmeldung, Profil,
   Bestellliste, Adressfelder, Favoritenherz.
   =========================================================================== */

.fx-h3{font-size:19px;font-weight:700;letter-spacing:-.3px;margin:0 0 14px}
.fx-block{padding:24px}
.fx-note-sm{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--fx-neutral)}
.fx-center{text-align:center}
.fx-btn-full{width:100%;margin-top:18px}
.fx-btn-grow{flex:1 1 200px}
.fx-textarea{height:96px;padding:14px;resize:vertical;font-family:inherit}
.fx-page-rest{padding-top:22px}
.fx-back{margin-bottom:14px}
.fx-back-hero{position:absolute;z-index:2;top:8px;left:16px;height:36px;padding:0 13px;margin:0;border-radius:12px;font-size:13.5px;background:rgba(255,255,255,.94);border-color:transparent;box-shadow:0 6px 16px rgba(7,26,46,.14)}

/* Restaurantbilder und Logos fuellen dieselbe feste Bildflaeche. Dadurch
   bleiben alle Karten auf Handy und Desktop gleich hoch. */
.fx-resthero.is-logo{background:var(--fx-surface)}
.fx-resthero.is-logo > img{object-fit:cover;padding:0;height:auto;aspect-ratio:21/5;min-height:170px}
@media (max-width:760px){ .fx-resthero.is-logo > img{height:auto;padding:0} }
.fx-resthero.is-logo .veil{background:linear-gradient(180deg,rgba(7,26,46,0) 46%,rgba(7,26,46,.78) 100%)}
.fx-rest .pic.is-logo{background:var(--fx-surface)}
.fx-rest .pic.is-logo img{object-fit:cover;padding:0;height:100%}
html[data-theme="dark"] .fx-rest .pic.is-logo,body.dark-mode .fx-rest .pic.is-logo{background:var(--fx-surface)}

/* Favoritenherz auf der Restaurantkarte */
.fx-fav{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--fx-neutral);font-size:19px;line-height:1;cursor:pointer;
  box-shadow:var(--fx-shadow);transition:transform var(--fx-dur-1,.12s) ease,color var(--fx-dur-2,.2s) ease}
.fx-fav.is-on{color:var(--fx-danger)}
.fx-fav:active{transform:scale(.92)}
html[data-theme="dark"] .fx-fav,body.dark-mode .fx-fav{background:rgba(11,21,32,.86);color:var(--fx-ink)}

/* Kopfzeile ueber der Speisekarte */
.fx-restbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 22px}
.fx-restbar-info{flex:1 1 260px;font-size:14.5px;color:var(--fx-ink-2)}
.fx-resthero-sub{margin:0;font-size:15px;opacity:.92}
.fx-urlaub{margin:0 0 18px;background:var(--fx-warm-soft);color:var(--fx-warm-ink)}
.fx-menunav-n{color:var(--fx-neutral);font-size:13px}

/* Warenkorbzeilen */
.fx-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center}
.fx-line-txt{display:grid;gap:2px;min-width:0}
.fx-line-txt b{font-size:15.5px}
.fx-line-txt span{font-size:13.5px;color:var(--fx-neutral)}
.fx-line-sum{font-weight:700;white-space:nowrap}
.fx-line-del{grid-column:1/-1;justify-self:start;border:0;background:transparent;padding:6px 0;
  color:var(--fx-danger-ink);font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:underline}
.fx-totals{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--fx-border)}
.fx-sum-b{font-weight:700}
.fx-cartpanel{padding:22px}
.fx-cartbox{padding:22px 24px}
.fx-cart-empty{padding:20px}
.fx-cartactions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.fx-adrgrid{margin-top:18px}

/* Zahlungs- und Auswahlzeilen */
.fx-row-txt{flex:1;min-width:0;display:grid;gap:2px}
.fx-row-txt b{font-size:15.5px}
.fx-row-txt span{font-size:13.5px;color:var(--fx-neutral)}
.fx-row-plus{font-weight:700;font-size:14.5px;white-space:nowrap}
.fx-extra-options{margin:6px 0 4px 22px}

/* Anmeldung */
.fx-authcard{padding:30px}
.fx-seg-wide{max-width:none;margin-bottom:24px}

/* Guthaben */
.fx-wallet-sum{margin:0;font-size:clamp(30px,2rem + 1.6vw,44px);font-weight:700;letter-spacing:-1px;color:var(--fx-ink)}
.fx-wallet-amounts{margin:0 0 14px}
.fx-wallet-custom{margin-bottom:6px}
.fx-wallet-input{position:relative}
.fx-wallet-input span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--fx-neutral);font-weight:700}
.fx-wallet-pay{margin-top:18px}
.fx-payout{border-color:color-mix(in srgb,var(--fx-blue) 36%,var(--fx-border));box-shadow:0 14px 36px rgba(15,111,174,.09)}
.fx-payout .fx-wallet-pay{margin:16px 0}
.fx-payout .fx-label{display:grid;gap:7px}
.fx-payout-privacy{margin:14px 0;color:var(--fx-neutral)}

/* Stripe-Eingabefeld (Kassa und Aufladung) */
.fx-stripebox{margin-top:16px;padding:16px;border:1px solid var(--fx-border);border-radius:var(--fx-r-ctrl);background:var(--fx-surface)}
.fx-stripebox .fx-note-sm{margin:0 0 12px}
.fx-stripe-el{min-height:160px;background:var(--fx-card);border-radius:var(--fx-r-field);padding:10px}
.fx-stripe-inline{margin:10px 0 2px;padding:10px 12px;border-top:1px solid var(--fx-border);background:var(--fx-surface);border-radius:0 0 var(--fx-r-ctrl) var(--fx-r-ctrl)}
.fx-stripe-inline-title{display:block;margin-bottom:8px;font-size:13px;font-weight:700;color:var(--fx-neutral)}
.fx-stripe-save-line{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--fx-ink);font-size:14px;line-height:1.4;cursor:pointer}
.fx-stripe-save-line input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--fx-blue)}

/* Schranke auf der Startseite */
.fx-gate{display:grid;justify-items:center;gap:8px;padding:38px 24px;text-align:center;color:var(--fx-neutral)}
.fx-gate strong{color:var(--fx-ink);font-size:var(--fx-t-h3,19px)}
.fx-gate .fx-cartactions{margin-top:14px;justify-content:center}
.fx-row.is-off{opacity:.55;cursor:not-allowed}
.fx-row.is-off:hover{border-color:var(--fx-border)}

/* Partnerzeile unter der Fusszeile */
.fx-foot-partner{margin-top:0;padding-top:20px;padding-bottom:34px;border-top:0;font-size:14.5px}
.fx-foot-partner .fx-foot-links a{color:var(--fx-neutral)}
.fx-foot-partner .fx-foot-links a:hover{color:var(--fx-blue-acc)}

/* Bestellungen */
.fx-order{padding:18px 20px}
.fx-order-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.fx-order .fx-sum.total{margin-top:12px;padding-top:10px;border-top:1px solid var(--fx-border)}

/* Bewertungen */
.fx-review{padding:14px 0;border-bottom:1px solid var(--fx-surface)}
.fx-review:last-child{border-bottom:0}
.fx-review-top{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Fenster */
.fx-sheet-body{padding:24px 26px}
.fx-sheet-h{font-size:15px;font-weight:700;letter-spacing:.4px;margin:22px 0 10px;color:var(--fx-ink)}
.fx-sheet-body > .fx-sheet-h:first-child{margin-top:0}
.fx-x-float{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92)}
html[data-theme="dark"] .fx-x-float,body.dark-mode .fx-x-float{background:rgba(11,21,32,.9)}

/* Produktdialog: kompakter Rahmen, eigener scrollbarer Inhalt, stabiler Footer. */
.fx-product-sheet{align-items:center;overflow:hidden}
.fx-product-sheet .fx-product-card{display:flex;flex-direction:column;max-height:calc(100dvh - 80px);min-height:0;overflow:hidden}
.fx-product-card .fx-sheet-cover{height:170px;flex:0 0 170px}
.fx-product-body{min-height:0;overflow-y:auto;padding:18px 22px}
.fx-product-body .fx-sheet-h{margin-top:16px;margin-bottom:8px}
.fx-product-body .fx-sheet-h:first-child{margin-top:0}
.fx-product-card .foot{flex:0 0 auto;padding:14px 22px}
@media (max-width:760px){
  .fx-product-sheet{align-items:flex-end}
  .fx-product-card{max-height:94dvh}
  .fx-product-card .fx-sheet-cover{height:130px;flex-basis:130px}
  .fx-product-body{padding:16px}
  .fx-product-card .foot{padding:14px 16px}
}

/* Suchleiste mit getrenntem PLZ- und Ortsfeld.
   Bewusst als min-width formuliert: in einer Spalte (Handy) wirkt flex-basis
   auf die Hoehe, dann waere das Ortsfeld 170px hoch. */
@media (min-width:761px){
  .fx-searchbar .fx-field-zip{flex:0 1 110px}
  .fx-searchbar .fx-field-city{flex:1 1 170px}
}
@media (max-width:760px){
  .fx-searchbar .fx-field,
  .fx-searchbar .fx-field-zip,
  .fx-searchbar .fx-field-city,
  .fx-searchbar .fx-btn{width:100%;flex:0 0 auto;height:52px}
  .fx-line{grid-template-columns:minmax(0,1fr) auto}
  .fx-line-sum{grid-column:2}
}

/* ===========================================================================
   iOS-Parität 09/2026
   Bausteine nach Vorbild der Foodexa-iOS-App (build 294): Bewertungssterne,
   Geöffnet/Geschlossen, Suche, aktive Bestellung, Bestellungen mit Verlauf,
   Bewerten, Support, Kontosperre, Registrierung, Erfolgs-Overlay.
   =========================================================================== */

/* Kontosperre */
.fx-lockbar{background:var(--fx-danger-soft,#FDECEC);color:var(--fx-danger-ink,#8A1C1C);padding:12px 18px;text-align:center;
  font-size:14.5px;font-weight:600;border-bottom:1px solid var(--fx-border)}
.fx-lockbar a{color:inherit;text-decoration:underline}

/* Sterne, Bewertung */
.fx-stars{display:inline-flex;font-size:15px;letter-spacing:1px;line-height:1}
.fx-stars .on{color:var(--fx-warm)}
.fx-stars .off{color:var(--fx-border)}
.fx-rating-n{color:var(--fx-neutral);font-weight:600}
.fx-price-big{font-size:24px;font-weight:700;letter-spacing:-.5px;white-space:nowrap}

/* Geöffnet/Geschlossen auf der Karte */
.fx-badges{position:absolute;top:12px;left:14px;display:flex;gap:6px;flex-wrap:wrap}
.fx-rest .pic .fx-badges .fx-badge{position:static}
.fx-badge.is-warm{background:var(--fx-warm);color:#1B1200}
.fx-badge.is-new{background:var(--fx-blue)}
.fx-rest.is-closed .pic img{filter:grayscale(.55) brightness(.9)}
.fx-rest.is-closed h3{color:var(--fx-ink-2)}
.fx-closed-head{margin:34px 0 14px;color:var(--fx-neutral)}

/* Suche + Kategorien */
.fx-toolbar{margin-top:28px;display:grid;gap:14px}
.fx-searchfield{position:relative;max-width:520px}
.fx-searchfield span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none}
.fx-searchfield .fx-field{height:50px;padding-left:44px}

/* Aktive Bestellung (Startseite) */
.fx-activebar{display:flex;align-items:center;gap:12px;width:100%;margin-top:22px;padding:14px 18px;border-radius:18px;
  border:1px solid var(--fx-blue);background:var(--fx-blue-tint);color:var(--fx-ink);cursor:pointer;text-align:left;font-size:15px}
.fx-activebar-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-activebar-dot{width:10px;height:10px;border-radius:999px;background:var(--fx-blue);box-shadow:0 0 0 5px rgba(61,164,245,.22);
  animation:fxPulse 1.6s ease-in-out infinite;flex:0 0 auto}

/* Restaurant: Statistik-Karte, Hinweise, Status-Punkt, schwebende Warenkorbleiste */
.fx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.fx-stat{display:grid;align-content:center;justify-items:center;gap:2px;min-height:62px;padding:8px 12px;border-radius:16px;background:var(--fx-card);border:1px solid var(--fx-border);
  text-align:center;color:var(--fx-ink);font:inherit;cursor:default}
.fx-stat b{font-size:18px;line-height:1.2;font-weight:800;letter-spacing:-.25px;color:var(--fx-ink)}
.fx-stat span{font-size:13.5px;line-height:1.25;font-weight:600;color:var(--fx-ink-2)}
button.fx-stat{cursor:pointer}
button.fx-stat:hover{border-color:var(--fx-blue)}
.fx-hint{margin:0 0 18px;padding:14px 18px;border-radius:16px;background:var(--fx-surface);color:var(--fx-ink-2);font-size:14.5px}
.fx-hint.is-warm{background:var(--fx-warm-soft,#FFF4E0);color:var(--fx-warm-ink,#8A5200)}
.fx-dotst{display:inline-block;width:9px;height:9px;border-radius:999px;background:var(--fx-neutral);margin-right:6px;vertical-align:middle}
.fx-dotst.on{background:var(--fx-success)}
.fx-fav-hero{top:16px;right:16px}
.fx-cartbar{display:none}
.fx-allerg{font-size:12.5px!important;color:var(--fx-neutral)!important}
.fx-item .plus.is-qty{font-size:15px;font-weight:700;background:var(--fx-success)}
.fx-item.has-qty{border-color:var(--fx-success)}
@media (max-width:1080px){
  .fx-cartbar{position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:12px;
    height:56px;padding:0 18px;border:0;border-radius:999px;background:var(--fx-blue);color:#fff;font-size:15.5px;font-weight:700;
    box-shadow:0 14px 34px var(--fx-glow);cursor:pointer}
  .fx-cartbar span:nth-child(2){flex:1;text-align:left}
  .fx-cartbar-n{width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:14px}
  .fx-page-rest{padding-bottom:90px}
}
@media (min-width:761px) and (max-width:1080px){ .fx-cartbar{bottom:20px;left:auto;right:24px;min-width:320px} }

/* Kassa: Guthaben mit Aufladen-Knopf */
.fx-payrow{display:flex;gap:10px;align-items:stretch}
.fx-payrow .fx-row{flex:1;min-width:0}
.fx-payrow-stripe{display:flex;flex-direction:column;gap:0;width:100%}
.fx-payrow-stripe>.fx-row{width:100%;flex:0 0 auto}
.fx-payrow-stripe>.fx-stripe-inline{width:100%;box-sizing:border-box}
.fx-topup{flex:0 0 auto;align-self:center;white-space:nowrap}

/* Bestellungen */
.fx-pill-st{border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;white-space:nowrap;background:var(--fx-surface);color:var(--fx-ink-2)}
.fx-pill-st.is-blue{background:var(--fx-blue-tint);color:var(--fx-blue-acc)}
.fx-pill-st.is-warm{background:var(--fx-warm-soft,#FFF4E0);color:var(--fx-warm-ink,#8A5200)}
.fx-pill-st.is-danger{background:var(--fx-danger-soft,#FDECEC);color:var(--fx-danger-ink,#8A1C1C)}
.fx-order{cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}
.fx-order:hover{border-color:var(--fx-blue)}
.fx-order.is-active{border-color:var(--fx-blue)}
.fx-order-row{display:flex;align-items:center;gap:12px}
.fx-order-logo{width:48px;height:48px;border-radius:14px;object-fit:cover;background:var(--fx-surface);flex:0 0 auto}
.fx-order-main{flex:1;min-width:0;display:grid;gap:2px}
.fx-order-main b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-order-main .fx-note-sm{margin:0}
.fx-order-bar{margin-top:14px}
.fx-order-items{margin-top:12px}
.fx-order-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.fx-order-foot > b{font-size:17px}
.fx-order-actions{display:flex;gap:8px;flex-wrap:wrap}
.fx-cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--fx-blue);color:#fff;font-size:12px;margin-left:4px}
.fx-btn-warm{background:var(--fx-warm);color:#1B1200}
.fx-btn-warm:hover{background:#E0A93C}
.fx-status.is-success{background:linear-gradient(135deg,var(--fx-success) 0%,#1E8A5A 100%);box-shadow:0 16px 40px rgba(30,138,90,.3)}
.fx-status.is-danger{background:linear-gradient(135deg,#D9534F 0%,#A83632 100%);box-shadow:0 16px 40px rgba(168,54,50,.3)}
.fx-step + .fx-step{margin-top:16px}
.fx-step-dim{color:var(--fx-neutral);font-weight:600}
.fx-dot.is-cancel{background:var(--fx-danger);border-color:var(--fx-danger)}
.fx-danger-txt{color:var(--fx-danger-ink,#8A1C1C)}
.fx-right{text-align:right;max-width:60%}
.fx-navbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--fx-danger);
  color:#fff;font-size:11px;font-weight:700;margin-left:5px;vertical-align:middle}
.fx-mobilenav .fx-navbadge{position:absolute;top:6px;right:calc(50% - 22px);margin:0}
.fx-mobilenav button{position:relative}
.fx-statusgrid .fx-btn{margin-top:18px}

/* Registrierung */
.fx-label-hint{font-weight:500;letter-spacing:0;color:var(--fx-neutral);text-transform:none}
.fx-checkline{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--fx-ink-2);cursor:pointer}
.fx-checkline input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--fx-blue)}

/* Profil */
.fx-acct{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.fx-avatar{width:56px;height:56px;border-radius:999px;background:var(--fx-blue);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:700;flex:0 0 auto}
.fx-reply{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--fx-surface);color:var(--fx-ink-2)}
.fx-danger-btn{color:var(--fx-danger-ink,#8A1C1C);border-color:var(--fx-danger-soft,#FDECEC)}
.fx-table .r.is-today span{font-weight:700;color:var(--fx-blue-acc)}

/* Support */
.fx-hotline{background:linear-gradient(135deg,var(--fx-blue-tint) 0%,var(--fx-card) 100%)}
.fx-faq{border-bottom:1px solid var(--fx-surface);padding:4px 0}
.fx-faq:last-child{border-bottom:0}
.fx-faq summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.fx-faq summary::-webkit-details-marker{display:none}
.fx-faq summary::after{content:"+";color:var(--fx-neutral);font-weight:700}
.fx-faq[open] summary::after{content:"–"}
.fx-faq p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--fx-ink-2)}

/* Bewertungen: Verteilung, Sterne wählen */
.fx-dist{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:10px;align-items:center;font-size:13.5px;color:var(--fx-neutral)}
.fx-starpick{display:flex;justify-content:center;gap:6px;margin:14px 0 6px}
.fx-starpick button{border:0;background:transparent;font-size:38px;line-height:1;color:var(--fx-border);cursor:pointer;padding:2px;transition:transform .12s ease,color .12s ease}
.fx-starpick button.on{color:var(--fx-warm)}
.fx-starpick button:hover{transform:scale(1.12)}

/* Erfolg nach Bestellung (iOS OrderSuccessOverlay) */
.fx-success{position:fixed;inset:0;z-index:96;display:grid;place-content:center;text-align:center;padding:24px;color:#fff;
  background:linear-gradient(135deg,var(--fx-blue) 0%,var(--fx-blue-deep) 100%);animation:fxFade .3s ease both}
.fx-success h2{font-size:32px;margin:18px 0 8px;letter-spacing:-.8px}
.fx-success p{margin:0;font-size:17px;opacity:.92}
.fx-success-ring{width:110px;height:110px;border-radius:999px;border:4px solid rgba(255,255,255,.35);margin:0 auto;animation:fxRing 1.4s ease-out infinite}
.fx-success-check{width:110px;height:110px;margin:-110px auto 0;display:grid;place-items:center;font-size:56px;font-weight:700;animation:fxPop .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxRing{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes fxPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* Nachtmodus */
html[data-theme="dark"] .fx-lockbar,body.dark-mode .fx-lockbar{background:#3A1717;color:#FFD4D4}
html[data-theme="dark"] .fx-pill-st.is-danger,body.dark-mode .fx-pill-st.is-danger,
html[data-theme="dark"] .fx-danger-txt,body.dark-mode .fx-danger-txt{color:#FF9D9D}
html[data-theme="dark"] .fx-pill-st.is-danger,body.dark-mode .fx-pill-st.is-danger{background:#3A1717}
html[data-theme="dark"] .fx-pill-st.is-warm,body.dark-mode .fx-pill-st.is-warm,
html[data-theme="dark"] .fx-hint.is-warm,body.dark-mode .fx-hint.is-warm{background:#3A2A10;color:#FFD79A}
html[data-theme="dark"] .fx-stars .off,body.dark-mode .fx-stars .off{color:var(--fx-border)}
html[data-theme="dark"] .fx-hotline,body.dark-mode .fx-hotline{background:var(--fx-card)}
html[data-theme="dark"] .fx-danger-btn,body.dark-mode .fx-danger-btn{color:#FF9D9D;border-color:#3A1717}

@media (max-width:760px){
  .fx-stats{gap:8px}
  .fx-stat{padding:9px 8px}
  .fx-stat b{font-size:16px}
  .fx-payrow{flex-wrap:wrap}
  .fx-topup{width:100%}
  .fx-right{max-width:55%}
  .fx-success h2{font-size:26px}
  .fx-order-foot .fx-order-actions{width:100%}
  .fx-order-foot .fx-order-actions .fx-btn{flex:1 1 auto;justify-content:center}
}

/* Verlauf: Nummern offener Schritte lesbar, Balken aktiver Bestellungen blau */
.fx-dot{color:var(--fx-neutral)}
.fx-dot.done,.fx-dot.now,.fx-dot.is-cancel{color:#fff}
.fx-order-bar i{background:var(--fx-blue)}

/* Schmale Handys: Logo-Kopf, schwebende Warenkorbleiste, Nav-Warenkorb */
@media (max-width:760px){
  .fx-resthero.is-logo > img{height:auto;padding:0}
  .fx-cartbar{font-size:14.5px;padding:0 14px}
  .fx-cartbar span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fx-mobilenav .cart{white-space:nowrap}
}
@media (max-width:360px){
  .fx-mobilenav .cart{font-size:12px}
  .fx-mobilenav .cart .i{display:none}
}

/* Fusszeile immer am unteren Bildschirmrand (kurze Seiten wie Profil, Kassa) */
body.fx{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:0}
body.fx > #fxApp{flex:1 0 auto}
body.fx > .fx-foot,body.fx > .fx-foot-partner{width:100%}
body.fx > .fx-foot-partner{margin-top:0}
@media (max-width:760px){ body.fx{padding-bottom:0} body.fx > .fx-foot-partner{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} }

/* Dezenter Umschalter fuer den Nachtmodus in der Kopfzeile */
.fx-theme{width:40px;height:40px;border-radius:999px;border:1px solid var(--fx-border);background:transparent;color:var(--fx-ink-2);
  display:inline-grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:background var(--fx-dur-2,.2s) ease,color var(--fx-dur-2,.2s) ease,transform var(--fx-dur-1,.12s) ease}
.fx-theme:hover{background:var(--fx-surface);color:var(--fx-ink)}
.fx-theme:active{transform:scale(.94)}
.fx-theme svg{display:block}

/* ===== Datenschutz-Hinweis (Cookie-Banner, foodexa-consent.js) - auch fuer Unterseiten ===== */
.fx-consent{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:16px;display:flex;justify-content:center;pointer-events:none;
  animation:fxUp .32s cubic-bezier(.2,.8,.2,1) both}
.fx-consent.is-out{animation:fxConsentOut .24s ease both}
.fx-consent-card{pointer-events:auto;display:flex;gap:18px;align-items:flex-start;width:100%;max-width:880px;padding:22px 24px;
  background:var(--fx-card);border:1px solid var(--fx-border);border-radius:24px;box-shadow:0 24px 60px rgba(7,26,46,.28)}
.fx-consent-ico{flex:0 0 auto;width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--fx-blue),var(--fx-blue-deep));display:grid;place-items:center;font-size:24px;box-shadow:0 8px 18px var(--fx-glow)}
.fx-consent-body{min-width:0;flex:1}
.fx-consent-body h2{margin:2px 0 6px;font-size:21px;letter-spacing:-.4px}
.fx-consent-body p{margin:0 0 8px;font-size:14.5px;line-height:1.5;color:var(--fx-ink-2)}
.fx-consent-body ul{margin:0 0 10px;padding-left:20px;font-size:14px;line-height:1.55;color:var(--fx-ink-2);columns:2;column-gap:24px}
.fx-consent-body li{break-inside:avoid}
.fx-consent-small{font-size:13px!important;color:var(--fx-neutral)!important}
.fx-consent-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.fx-consent-actions .fx-btn{height:46px;font-size:15px}
@keyframes fxConsentOut{to{opacity:0;transform:translateY(16px)}}
@media (max-width:760px){
  .fx-consent{padding:10px}
  .fx-consent-card{box-sizing:border-box;width:100%;max-width:100%;min-width:0;flex-direction:column;gap:12px;padding:18px;border-radius:20px;max-height:calc(100vh - 20px);overflow:auto}
  .fx-consent-ico{width:44px;height:44px;font-size:20px}
  .fx-consent-body,.fx-consent-actions{box-sizing:border-box;width:100%;min-width:0}
  .fx-consent-body h2,.fx-consent-body p,.fx-consent-body li{overflow-wrap:anywhere}
  .fx-consent-body ul{columns:1}
  .fx-consent-actions{flex-direction:column-reverse}
  .fx-consent-actions .fx-btn{box-sizing:border-box;width:100%;min-width:0;padding-left:12px;padding-right:12px;white-space:normal;line-height:1.2}
}



/* Sprachwahl in der Kopfzeile (DE/EN/IT/TR) */
.fx-lang{height:40px;padding:0 34px 0 14px;border:1px solid var(--fx-border);border-radius:999px;background:#fff;color:var(--fx-ink);font:inherit;font-weight:700;font-size:14px;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B7A8C' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;cursor:pointer}
.fx-lang-sm{height:36px;padding:0 30px 0 12px;font-size:13px;background-position:right 11px center}
@media (max-width:760px){ .fx-lang-sm{height:34px;padding:0 26px 0 10px;font-size:12.5px} }
html[data-theme="dark"] .fx-lang,body.dark-mode .fx-lang{background-color:var(--fx-card);color:var(--fx-ink)}

.fx-navbadge[hidden]{display:none}
.fx-addr b{white-space:nowrap}

/* Sehr schmale Handys: Kopfzeile bleibt in einer Zeile */
@media (max-width:400px){
  .fx-header-in{gap:6px;padding:10px 10px}
  .fx-lang-sm{height:32px;padding:0 22px 0 8px;font-size:12px;background-position:right 7px center}
  .fx-theme{width:34px;height:34px}
  .fx-theme svg{width:16px;height:16px}
  .fx-header-in .fx-btn-sm{padding:0 12px;font-size:13.5px;height:38px}
  .fx-addr{padding:6px 8px}
  .fx-brand img{width:34px;height:34px}
}

/* ===== Standort-Fenster (Konto-Adresse, GPS, Suche, Karte) ============= */
.fx-locsheet[hidden]{display:none}
.fx-loc{max-width:720px;display:flex;flex-direction:column;max-height:calc(100vh - 80px)}
.fx-loc-body{padding:18px 24px 6px;overflow:auto}
.fx-loc-options{margin-bottom:14px}
.fx-loc-search{position:relative;margin-bottom:14px}
.fx-loc-search > span{position:absolute;left:14px;top:15px;font-size:15px;pointer-events:none}
.fx-loc-search .fx-field{padding-left:42px}
.fx-loc-sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:6px;list-style:none;background:var(--fx-card);
  border:1px solid var(--fx-border);border-radius:16px;box-shadow:0 18px 40px rgba(7,26,46,.18);max-height:260px;overflow:auto}
.fx-loc-sugg li{display:grid;gap:2px;padding:10px 12px;border-radius:10px;cursor:pointer}
.fx-loc-sugg li b{font-size:15px}
.fx-loc-sugg li span{font-size:13px;color:var(--fx-neutral)}
.fx-loc-sugg li:hover,.fx-loc-sugg li.is-on{background:var(--fx-blue-tint)}
.fx-loc-form{display:grid;gap:10px;margin-bottom:14px}
.fx-loc-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
.fx-loc-form .fx-btn{justify-self:start}
.fx-loc-map{height:340px;border-radius:18px;overflow:hidden;border:1px solid var(--fx-border);background:var(--fx-surface);z-index:0}
.fx-loc-map .leaflet-control-attribution{font-size:10px}
.fx-loc-msg{min-height:20px;margin-top:4px}
.fx-loc-msg.is-ok{color:var(--fx-success-ink)}
.fx-loc-msg.is-err{color:var(--fx-danger-ink)}
.fx-loc .foot{margin-top:auto}
.fx-hero-locbtn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;border:0;background:transparent;color:var(--fx-blue-acc);font:inherit;font-weight:700;cursor:pointer;padding:6px 0}
.fx-hero-locbtn:hover{text-decoration:underline}
@media (max-width:760px){
  .fx-loc{max-height:none;border-radius:20px 20px 0 0}
  .fx-locsheet{padding:0;align-items:flex-end}
  .fx-loc-body{padding:14px 16px 4px}
  .fx-loc-map{height:260px}
  .fx-loc-row{grid-template-columns:100px minmax(0,1fr)}
  .fx-loc .foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
}
html[data-theme="dark"] .fx-loc-map,body.dark-mode .fx-loc-map{filter:brightness(.88) contrast(1.05)}

/* hidden-Attribut gewinnt immer gegen display-Regeln */
.fx [hidden],.fx-shell [hidden]{display:none!important}

.fx-loc .foot{flex-wrap:wrap}
@media (max-width:420px){
  .fx-loc .foot .fx-btn{flex:1 1 100%;height:50px}
  .fx-loc .foot .fx-btn-grow{order:-1}
  .fx-loc .foot .fx-btn-ghost{height:44px}
}

/* Zahlungs-Symbole (assets/pay) und Guthaben-Symbol in der Kopfzeile */
.fx-ico-img{background:transparent;overflow:hidden;border-radius:12px}
.fx-ico-img img{width:40px;height:40px;display:block;border-radius:12px;object-fit:cover}
.fx-hdr-wallet{gap:7px;padding-left:12px}
.fx-hdr-ico{width:22px;height:22px;border-radius:7px;display:block}
.fx-wallet-ico{width:56px;height:56px;border-radius:16px;margin-bottom:10px;display:block}

/* Hinweis fuer Lokale auf der Startseite (-> /partner.html) */
.fx-partner-teaser{margin:20px 0 28px;padding:26px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--fx-blue) 0%,var(--fx-blue-deep) 100%);color:#fff;border-radius:var(--fx-r-hero);box-shadow:0 16px 40px rgba(30,126,204,.26)}
.fx-partner-teaser .i{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:26px;flex:0 0 auto}
.fx-partner-teaser .t{flex:1 1 320px;min-width:0}
.fx-partner-teaser h2{margin:0 0 4px;font-size:22px;letter-spacing:-.4px}
.fx-partner-teaser p{margin:0;font-size:15px;opacity:.92;line-height:1.45}
.fx-pw-request-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fx-pw-cta{align-items:flex-start}
.fx-partner-teaser .fx-btn{background:#fff;color:var(--fx-blue-acc);box-shadow:none}
.fx-partner-teaser .fx-btn:hover{background:#F0F6FC}
@media (max-width:760px){ .fx-partner-teaser{padding:20px;margin:16px 0 20px} .fx-partner-teaser .fx-btn{width:100%} }

.fx-home-order-mode{margin:20px 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.fx-home-order-mode .fx-seg{width:min(380px,100%)}.fx-home-order-mode .fx-seg button{flex:1;min-height:46px}

/* ===== Verlaessliche Bedienung auf Handys ================================
   Die feste Navigation darf den letzten Seiteninhalt nicht ueberdecken.
   Aktionsleisten werden auf schmalen Displays einspaltig, damit kein Knopf
   ausserhalb des sichtbaren Bereichs liegt. */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body.fx{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  body.fx > #fxApp{min-width:0}
  body.fx > .fx-foot-partner{padding-bottom:28px}
  .fx-wrap,.fx-page,.fx-card,.fx-profilegrid>*{min-width:0}
  .fx-seg{width:100%;max-width:none;min-width:0}
  .fx-seg button{min-width:0;white-space:normal;line-height:1.2}
  .fx-profilegrid>.fx-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fx-profilegrid>.fx-tabs button{width:100%;min-width:0;text-align:center;white-space:normal}
  .fx-mobilenav{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));min-width:0}
  .fx-mobilenav button{min-width:0;padding:6px 2px;line-height:1.15}
}
@media (max-width:520px){
  .fx-header-in .fx-addr{box-sizing:border-box;flex:0 0 40px;width:40px;height:40px;padding:0;justify-content:center;gap:0}
  .fx-header-in .fx-addr-txt{display:none}
  .fx-header-in .fx-addr-pin{width:28px;height:28px}
  .fx-page .fx-btn,.fx-sheet .fx-btn,.fx-foot .fx-btn,.fx-foot-partner .fx-btn{
    max-width:100%;height:auto;min-height:50px;padding:12px 16px;white-space:normal;text-align:center;line-height:1.25
  }
  .fx-cartactions,.fx-order-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:10px}
  .fx-cartactions>.fx-btn,.fx-cartactions>a.fx-btn,
  .fx-order-actions>.fx-btn,.fx-order-actions>a.fx-btn{width:100%;min-width:0;justify-content:center}
  .fx-sheet .foot{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-left:16px;padding-right:16px}
  .fx-sheet .foot>.fx-btn,.fx-sheet .foot>a.fx-btn{width:100%;min-width:0;justify-content:center}
  .fx-payrow{display:grid;grid-template-columns:minmax(0,1fr)}
  .fx-payrow .fx-row,.fx-payrow .fx-topup{width:100%;min-width:0}
}
@media (max-width:360px){
  .fx-profilegrid>.fx-tabs{grid-template-columns:minmax(0,1fr)}
  .fx-mobilenav button{font-size:10.5px}
}
.fx-discount-price{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.fx-discount-price del,.fx-line-sum del{color:var(--muted);font-size:.85em;font-weight:600}.fx-discount-badge{display:inline-flex;padding:3px 7px;border-radius:999px;background:#dff7e8;color:#126337;font-size:.76rem;font-weight:800}.fx-discount-price-big{justify-content:flex-end}.fx-line-sum{display:grid;justify-items:end;gap:2px}


/* Sammelpässe im Kundenprofil */
.fx-pass-intro { margin-bottom: 4px; }
.fx-pass-card { display:flex; gap:18px; align-items:stretch; padding:18px; border:1px solid var(--fx-line,#dbe4ef); border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(31,62,98,.07); }
.fx-pass-art { width:86px; min-width:86px; height:86px; border-radius:20px; background:linear-gradient(145deg,#e8f7ff,#f8fbff); display:grid; place-items:center; overflow:hidden; }
.fx-pass-art img { width:80px; height:74px; object-fit:contain; }
.fx-pass-body { flex:1; min-width:0; }
.fx-pass-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.fx-pass-shop { display:block; color:#5c7694; font-size:.86rem; margin-bottom:2px; }
.fx-pass-ready { background:#e8f8ef; color:#087443; border-radius:999px; padding:5px 10px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.fx-pass-progress { margin-top:14px; }
.fx-pass-progress-head { display:flex; justify-content:space-between; color:#4b6380; font-size:.86rem; }
.fx-pass-track { height:9px; background:#e9eef5; border-radius:999px; overflow:hidden; margin-top:7px; }
.fx-pass-track span { display:block; height:100%; background:linear-gradient(90deg,#27aee4,#2365d1); border-radius:inherit; }
.fx-pass-meta { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:12px; color:#657b95; font-size:.85rem; }
.fx-pass-empty-img { width:94px; height:80px; object-fit:contain; margin-bottom:8px; }
@media (max-width:640px) {
  .fx-pass-card { gap:12px; padding:14px; }
  .fx-pass-art { width:64px; min-width:64px; height:64px; border-radius:15px; }
  .fx-pass-art img { width:60px; height:56px; }
  .fx-pass-top { display:block; }
  .fx-pass-ready { display:inline-block; margin-top:8px; }
}

.fx-item-sammelpass {
  border-color:#7bbcf0;
  box-shadow:0 10px 26px rgba(35,101,209,.10);
  grid-template-columns:minmax(0,1fr) 96px minmax(132px,264px);
  align-items:center;
}
.fx-item-sammelpass > div:first-child { grid-column:1; grid-row:1; min-width:0; }
.fx-item-sammelpass > .fx-pass-product-badge {
  grid-column:2;
  grid-row:1;
  position:static;
  align-self:center;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:88px;
  min-width:88px;
  min-height:70px;
  padding:6px;
  border-radius:16px;
  background:#f5fbff;
  color:#1767a9;
  box-shadow:0 4px 12px rgba(10,60,110,.12);
  font-size:.72rem;
  line-height:1.15;
  font-weight:700;
  text-align:center;
  z-index:2;
}
.fx-item-sammelpass > .thumb {
  grid-column:3;
  grid-row:1;
  justify-self:end;
  position:relative;
}
.fx-pass-product-badge img {
  width:42px;
  height:38px;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  flex:0 0 auto;
}
@media (max-width:640px) {
  .fx-item-sammelpass { grid-template-columns:minmax(0,1fr) 52px minmax(100px,132px); }
  .fx-item-sammelpass > .fx-pass-product-badge { width:52px; min-width:52px; min-height:52px; padding:4px; }
  .fx-pass-product-badge span { display:none; }
  .fx-pass-product-badge img { width:42px; height:38px; }
}