:root {
  --bg-top: #000000; --bg-bottom: #111213; --text: #ffffff; --muted: #d1d5db;
  --panel: #ffffff; --panel-text: #111111; --panel-muted: #4b5563; --panel-border: rgba(0,0,0,.08);
  --overlay: rgba(0,0,0,.6);
  --chip-bg: #ffffff; --chip-text: #111; --chip-border: rgba(0,0,0,.15);
  --chip-active-bg: #111; --chip-active-text: #fff;
  --helper-bg: rgba(255,255,255,.08); --helper-border: rgba(255,255,255,.35);
  --nav-text:#111;
  --scale: 1; --radius: 24px;
}

body.outdoor-mode {
  --scale:1.15; --panel:#f8fafc; --panel-border:rgba(0,0,0,.16);
  --chip-border:rgba(0,0,0,.2); --helper-bg:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial;
  background:linear-gradient(to bottom,var(--bg-top),var(--bg-bottom));
  color:var(--text);text-align:center;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-size:calc(16px*var(--scale))
}

.container{max-width:1000px;margin:0 auto;padding:calc(32px*var(--scale)) 20px calc(64px*var(--scale))}
h1{font-size:calc(36px*var(--scale));margin:0 0 calc(10px*var(--scale));letter-spacing:.2px}
.sub{color:var(--muted);margin-bottom:calc(16px*var(--scale))}

/* Floating Buttons */
.floatingToggle{
  position:fixed;top:14px;right:14px;z-index:1000;padding:10px 14px;border-radius:999px;
  border:2px solid var(--chip-border);background:var(--chip-bg);color:var(--chip-text);
  font-weight:800;opacity:.85;backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .15s ease,opacity .2s ease,background .2s ease
}
.floatingToggle:hover{transform:translateY(-1px);opacity:1}
.floatingToggle.on{background:var(--chip-active-bg);color:var(--chip-active-text);border-color:var(--chip-active-bg)}

.searchFab{
  position:fixed;top:14px;left:14px;z-index:1000;width:48px;height:48px;border-radius:999px;
  border:2px solid var(--chip-border);background:var(--chip-bg);color:var(--chip-text);
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer
}
.searchFab.active{background:#111;color:#fff;border-color:#111}

/* Filter Bar */
.filters{display:flex;flex-direction:column;gap:calc(16px*var(--scale));margin:calc(16px*var(--scale)) 0;align-items:center}
@media(min-width:960px){.filters{flex-direction:row;justify-content:center}}

.group{
  background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.15);border-radius:calc(16px*var(--scale));
  padding:calc(14px*var(--scale));display:flex;flex-wrap:wrap;gap:calc(10px*var(--scale));justify-content:center;color:#111
}
.group label{font-size:calc(12px*var(--scale));color:#555;width:100%;margin-bottom:calc(6px*var(--scale));text-transform:uppercase;letter-spacing:.3px}

.chip{
  cursor:pointer;user-select:none;padding:calc(10px*var(--scale)) calc(14px*var(--scale));
  border-radius:999px;border:1px solid var(--chip-border);background:var(--chip-bg);
  transition:transform .12s ease,background .2s ease;font-weight:700;font-size:calc(14px*var(--scale));color:var(--chip-text)
}
.chip:hover{background:#f3f4f6;transform:translateY(-1px)}
.chip.active{background:var(--chip-active-bg);color:var(--chip-active-text);border-color:var(--chip-active-bg)}
.chip.disabled{opacity:.35;cursor:not-allowed}

/* Movement Search */
.searchWrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.searchHeader{display:flex;align-items:center;gap:10px}
.searchInput{width:min(560px,92vw);padding:14px 16px;border-radius:14px;border:2px solid var(--chip-border);outline:none;font-size:calc(14px*var(--scale));color:#111}
.searchInput:focus{border-color:#111;box-shadow:0 8px 26px rgba(0,0,0,.18)}
.suggestions{position:absolute;top:54px;width:min(560px,92vw);background:#fff;color:#111;border:1px solid rgba(0,0,0,.12);border-radius:12px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.18);max-height:220px;overflow-y:auto;z-index:5}
.suggestion{padding:10px 12px;cursor:pointer}
.suggestion:hover{background:#f3f4f6}
.selectedWrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.selectedChip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#111;color:#fff;border:1px solid rgba(255,255,255,.1)}
.selectedChip button{background:transparent;border:none;color:#fff;cursor:pointer;font-weight:800}

/* Carousel */
.carouselWrapper{position:relative;height:min(60vh, calc(480px*var(--scale)));margin-top:10px}
.carousel{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.track{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:1400px}
.card{
  position:absolute;width:min(68%,520px);min-height:calc(300px*var(--scale));
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:calc(30px*var(--scale)) calc(28px*var(--scale));text-align:center;
  box-shadow:0 36px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .35s ease,filter .35s ease,box-shadow .35s ease
}
.card h3{margin:0 0 calc(12px*var(--scale));font-size:calc(24px*var(--scale));color:var(--panel-text)}
.card p{margin:0;color:var(--panel-muted);font-size:calc(15px*var(--scale))}
.card.main{z-index:3;opacity:1;transform:translateX(0) translateZ(80px) scale(1.04);box-shadow:0 48px 110px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.7)}
.card.left,.card.right{z-index:2;opacity:.7;filter:saturate(.95)}
.card.left{transform:translateX(-45%) rotateY(16deg) translateZ(-30px) scale(.9)}
.card.right{transform:translateX(45%) rotateY(-16deg) translateZ(-30px) scale(.9)}
.aiBadge{
  position:absolute; top:10px; right:12px; background:#111; color:#fff;
  border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.navBtn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:calc(70px*var(--scale));height:calc(70px*var(--scale));
  border-radius:999px;border:3px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.95);color:var(--nav-text);
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(2px);
  box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 0 6px rgba(0,0,0,.25) inset;
  font-size:calc(28px*var(--scale));font-weight:900
}
.navBtn:hover{filter:brightness(.95)}
.navBtn:active{transform:translateY(-50%) scale(.98)}
.navPrev{left:16px} .navNext{right:16px}

@media(max-width:480px){
  .navBtn{width:56px;height:56px;font-size:22px}
  .card{width:min(88%,520px);min-height:calc(260px*var(--scale));padding:calc(22px*var(--scale)) calc(20px*var(--scale))}
}
.helper{text-align:center;color:var(--muted);border:1px dashed var(--helper-border);border-radius:16px;padding:22px;background:var(--helper-bg)}

/* ===== Modal ===== */
.modalBack{
  position:fixed; inset:0; background:var(--overlay);
  display:flex; justify-content:center; align-items:center;
  padding:16px; z-index:999; overflow-y:auto;
}
.modal{
  width:min(92vw,760px); background:var(--panel); color:var(--panel-text);
  border:1px solid var(--panel-border); border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  text-align:left; max-height:90dvh; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action: pan-y;
  padding:calc(22px*var(--scale)) calc(24px*var(--scale)) calc(28px*var(--scale));
}
.modal header{
  position:sticky; top:0; display:flex; align-items:start; justify-content:space-between; gap:12px;
  background:var(--panel); padding-bottom:8px; margin:-8px -4px 8px -4px; z-index:1;
}
.modal h2{ margin:0; font-size:calc(24px*var(--scale)) }
.close{ border:1px solid var(--panel-border); background:#111; color:#fff; border-radius:12px; padding:calc(10px*var(--scale)) calc(14px*var(--scale)); cursor:pointer; font-weight:700; }
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{font-size:calc(12px*var(--scale));padding:calc(8px*var(--scale)) calc(12px*var(--scale));background:#f3f4f6;border:1px solid var(--panel-border);border-radius:999px;color:var(--panel-text)}
.section{margin-top:16px}
.sectionHeader{display:flex;align-items:center;justify-content:space-between;gap:8px}
.list{margin:8px 0 0 18px;color:var(--panel-muted);font-size:calc(15px*var(--scale))}
.iconBtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1.5px solid #111;background:#fff;color:#111;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.iconBtn:hover{background:#111;color:#fff}

/* ===== Buttons (Pillen-Style, wie Outdoor) ===== */
.btnPill{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:#e9eaec; color:#111;
  border:3px solid #d5d7db;
  font-weight:900; letter-spacing:.2px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), 0 2px 1px rgba(0,0,0,.06), 0 12px 30px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .15s ease, box-shadow .2s ease;
}
.btnPill:hover{ transform: translateY(-1px); filter: brightness(.98); }
.btnPill:active{ transform: translateY(0) scale(.99); }

/* Spezifisch für "Mehr Übungen" */
.loadMore{ min-width:300px; padding:18px 28px; font-size:18px; }
.loadMore.loading{ opacity:.75; cursor:progress; filter: grayscale(.2); }

/* --- Mobile Header/Safe-Area --- */
@media (max-width: 640px) {
  .searchFab, .floatingToggle { top: calc(env(safe-area-inset-top, 0px) + 8px); transform: scale(.92); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
  .searchFab { left: 12px; } .floatingToggle { right: 12px; }
  .container { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 640px) {
  body.outdoor-mode .container { padding-top: calc(144px + env(safe-area-inset-top, 0px)); }
}