@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --navy:   #071E38;
  --navy2:  #0A2444;
  --accent: #2563EB;
  --cyan:   #06B6D4;
  --amber:  #F59E0B;
  --border: rgba(255,255,255,0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: #112240;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(56,139,253,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(99,179,237,.13) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(14,116,144,.07) 0%, transparent 60%),
    linear-gradient(170deg, #112240 0%, #0E2A52 55%, #091C3A 100%);
  background-attachment: fixed;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
@media(max-width:600px){ body { background-attachment: scroll; } }

/* ══════════════════════════════════════════════════
   RESPONSIVE – MOBIL (≤ 768 px)
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── TOPBAR ── */
  #top-bar { padding: 0 16px; height: 60px; }
  .logo-main { font-size: 18px; }
  .logo-sub  { font-size: 9px; letter-spacing: 1.5px; }
  #prof-btn  { width: 40px; height: 40px; font-size: 15px; }
  #menu-btn  { width: 44px; height: 44px; }

  /* ── DRAWER – breitere Links, grössere Touch-Targets ── */
  #drawer a       { font-size: 16px; padding: 15px 22px; }
  .d-section      { font-size: 11px; }

  /* ── HERO ── */
  #hero { padding-top: 80px; padding-bottom: 24px; }
  #hero h1 { font-size: 26px; padding: 0 16px; margin-bottom: 10px; line-height: 1.2; }
  #hero p  { font-size: 15px; padding: 0 16px; }

  /* ── STICKY ZONE / SUCHE ── */
  #sticky-zone       { padding: 0 14px; }
  #sticky-zone.stuck { padding: 10px 14px 0; }
  #search-row        { padding-bottom: 10px; }
  #search-box        { height: 50px; font-size: 16px; border-radius: 12px; }

  /* ── FILTERLEISTE ── */
  #filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 0 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
  }
  #filter-bar::-webkit-scrollbar { display: none; }
  .fp > button { font-size: 14px; padding: 9px 14px; min-height: 44px; }
  #f-reset     { font-size: 13px; padding: 9px 10px; min-height: 44px; white-space: nowrap; }

  /* ── FILTER-DROPDOWNS – Bottom-Sheet ── */
  .fdd {
    position: fixed;
    top: auto !important;
    bottom: 0;
    left: 0 !important;
    right: 0;
    width: 100% !important;
    transform: none !important;
    border-radius: 22px 22px 0 0;
    min-width: unset;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 3000;
    padding: 16px 16px 40px;
    box-shadow: 0 -8px 40px rgba(0,0,0,.55);
  }
  .fdd::before {
    content: '';
    display: block;
    width: 44px; height: 5px;
    background: rgba(255,255,255,.2);
    border-radius: 3px;
    margin: 0 auto 14px;
  }
  .fdd .dt   { font-size: 12px; padding: 8px 12px 6px; }
  .fdd label { font-size: 16px; padding: 13px 12px; min-height: 48px; }
  .fdd input[type=checkbox] { width: 18px; height: 18px; }

  /* ── TAG-ZEITEN IM FILTER ── */
  .day-toggle { font-size: 16px; padding: 13px 12px; min-height: 48px; }
  .day-times label { font-size: 15px; padding: 10px 12px; min-height: 44px; }
  .day-times input[type=checkbox] { width: 17px; height: 17px; }

  /* ── KARTEN ── */
  #cards { padding: 16px 14px 90px; gap: 12px; }
  .card  { padding: 18px 16px; gap: 14px; border-radius: 16px; }
  .av    { width: 62px; height: 62px; font-size: 20px; }
  .cn    { font-size: 17px; }
  .cm    { font-size: 13px; gap: 7px; margin-bottom: 9px; }
  .cd    { font-size: 14px; line-height: 1.6; }
  .avr   { gap: 5px; margin-top: 9px; }
  .at    { font-size: 12px; padding: 4px 11px; }
  .st    { font-size: 12px; padding: 4px 11px; }
  .bdg   { font-size: 12px; padding: 3px 11px; }

  /* ── PREIS-FILTER ── */
  .price-filter-wrap input { width: 100px; height: 44px; font-size: 16px; }
}

/* ── Sehr kleine Geräte (< 480 px) ── */
@media (max-width: 480px) {
  .card { flex-direction: column; gap: 12px; }
  .av   { width: 58px; height: 58px; font-size: 18px; }
  #hero h1 { font-size: 23px; }
}

/* TOP BAR */
#top-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 64px; z-index: 2000;
  background: rgba(10,28,55,0.94); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(37,99,235,.22);
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}

/* LOGO – zweistufig: Hauptname gross, Untertitel klein */
.logo {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 2px;
}
.logo-main {
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: white;
  opacity: 0.95;
}
.logo-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}

#menu-btn { width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;border-radius:8px;transition:background .2s; flex-shrink:0; }
#menu-btn:hover { background:rgba(255,255,255,.08); }
#menu-btn span { display:block;width:22px;height:2px;background:white;border-radius:2px;transition:all .3s; }
#menu-btn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#menu-btn.open span:nth-child(2) { opacity:0; }
#menu-btn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

#prof-btn {
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(37,99,235,.7);
  background:linear-gradient(135deg,#1D4ED8,#06B6D4);
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:13px; font-weight:700;
  overflow:hidden; transition: border-color .2s;
}
#prof-btn.clickable { cursor:pointer; }
#prof-btn.clickable:hover { border-color:rgba(96,165,250,.9); }
#prof-btn img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

.home-btn { flex-shrink:0;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);font-size:24px;text-decoration:none;margin-right:6px;border:1px solid rgba(255,255,255,.1);transition:background .2s,color .2s,border-color .2s; }
.home-btn:hover { background:rgba(255,255,255,.1);color:white;border-color:rgba(255,255,255,.25); }

/* DRAWER */
#overlay { position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s; }
#overlay.open { opacity:1;pointer-events:all; }
#drawer { position:fixed;top:0;right:-290px;left:auto;width:272px;height:100vh;z-index:1600;background:#081830;border-left:1px solid rgba(37,99,235,.25);transition:right .35s cubic-bezier(.4,0,.2,1);padding:80px 0 32px;display:flex;flex-direction:column; }
#drawer.open { right:0; }
.d-section { font-size:10px;font-weight:700;color:rgba(255,255,255,.25);letter-spacing:2px;text-transform:uppercase;padding:16px 22px 8px; }
#drawer a { display:flex;align-items:center;gap:14px;padding:12px 22px;color:rgba(255,255,255,.7);font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;border-right:3px solid transparent; }
#drawer a:hover { color:white;background:rgba(37,99,235,.15);border-right-color:var(--accent); }
#drawer a.active { color:white;background:rgba(37,99,235,.22);border-right-color:var(--accent);font-weight:700; }

/* HERO */
#hero { padding-top:110px;padding-bottom:44px;text-align:center;transition:opacity .3s,transform .3s; }
#hero.hidden { opacity:0;transform:translateY(-8px);pointer-events:none; }
#hero h1 {
  font-family:'Raleway',sans-serif;
  font-size:clamp(22px,3.8vw,36px);font-weight:800;
  color:white;line-height:1.25;
  max-width:600px;margin:0 auto 12px;padding:0 24px;
  text-shadow: 0 0 80px rgba(37,99,235,.45), 0 0 30px rgba(6,182,212,.2);
}
#hero p { color:rgba(255,255,255,.45);font-size:15px;max-width:420px;margin:0 auto;padding:0 24px;line-height:1.6; }

/* STICKY ZONE */
#sticky-zone { padding:0 20px; position:relative; z-index:900; }
#sticky-zone.stuck { position:fixed;top:64px;left:0;width:100%;background:rgba(10,28,55,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(37,99,235,.18);padding:12px 20px 0; }
#sticky-spacer { height:0; }
#search-row { display:flex;justify-content:center;padding-bottom:10px; }
#search-box { width:100%;max-width:540px;height:46px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:white;font-family:'Inter',sans-serif;font-size:15px;padding:0 16px 0 44px;outline:none;transition:border-color .2s,background .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center; }
#search-box::placeholder { color:rgba(255,255,255,.28); }
#search-box:focus { border-color:var(--accent);background:rgba(37,99,235,.10);box-shadow:0 0 0 3px rgba(37,99,235,.22),0 0 22px rgba(37,99,235,.16); }

/* FILTER BAR */
#filter-bar { display:flex;align-items:center;gap:7px;justify-content:center;flex-wrap:wrap;padding-bottom:13px;max-width:900px;margin:0 auto; }
.fp { position:relative; }
.fp > button { display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.75);font-family:'Inter',sans-serif;font-size:13px;padding:7px 13px;border-radius:20px;cursor:pointer;transition:all .2s;white-space:nowrap; }
.fp > button:hover,.fp > button.act { background:rgba(37,99,235,.25);border-color:rgba(37,99,235,.6);color:white; }
.fp > button .arr { font-size:10px;transition:transform .2s; }
.fp > button.act .arr { transform:rotate(180deg); }
.fdd { display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#0D2545;border:1px solid rgba(37,99,235,.3);border-radius:12px;padding:8px;min-width:175px;z-index:800;box-shadow:0 14px 40px rgba(0,0,0,.55);max-height:280px;overflow-y:auto; }
.fdd.open { display:block; }
.fdd label { display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer;color:rgba(255,255,255,.75);font-size:13px;transition:background .15s;white-space:nowrap; }
.fdd label:hover { background:rgba(37,99,235,.18);color:white; }
.fdd input[type=checkbox] { width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0; }
.fdd .dt { font-size:10px;font-weight:700;color:rgba(255,255,255,.22);letter-spacing:1.5px;text-transform:uppercase;padding:8px 10px 4px; }
.fdd hr { border:none;border-top:1px solid rgba(255,255,255,.07);margin:5px 0; }

/* FILTER BADGE + RESET */
#f-reset { background:none;border:none;color:rgba(255,255,255,.28);font-family:'Inter',sans-serif;font-size:12px;cursor:pointer;padding:7px 10px;border-radius:6px;transition:color .2s; }
#f-reset:hover { color:rgba(255,255,255,.7); }
.filter-badge {
  display:none; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  background:#2563EB; color:white;
  border-radius:10px; font-size:11px; font-weight:700;
  font-family:'Inter',sans-serif;
}
.filter-badge.show { display:inline-flex; }

/* DAY SUB-MENU */
.day-entry { margin: 2px 0; }
.day-toggle { display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:7px;cursor:pointer;color:rgba(255,255,255,.72);font-size:13px;transition:background .15s;user-select:none; }
.day-toggle:hover { background:rgba(124,58,237,.15);color:white; }
.day-toggle.open { color:white; background:rgba(124,58,237,.12); }
.day-toggle.open .arr { transform:rotate(180deg); }
.day-toggle .arr { font-size:10px;transition:transform .2s; }
.day-times { display:none;padding-left:14px;border-left:2px solid rgba(124,58,237,.2);margin:3px 0 3px 12px; }
.day-times.open { display:block; }
.day-times label { display:flex;align-items:center;gap:9px;padding:5px 10px;border-radius:7px;cursor:pointer;color:rgba(255,255,255,.65);font-size:12px;transition:background .15s; }
.day-times label:hover { background:rgba(124,58,237,.12);color:white; }
.day-times input[type=checkbox] { width:13px;height:13px;accent-color:var(--accent);cursor:pointer;flex-shrink:0; }

/* CARDS */
#cards { max-width:860px;margin:0 auto;padding:24px 20px 80px;display:flex;flex-direction:column;gap:14px; }
.card { background:white;border-radius:14px;padding:20px 22px;display:flex;gap:18px;align-items:flex-start;opacity:0;transform:translateY(22px);transition:opacity .44s ease,transform .44s ease,box-shadow .22s ease; cursor:pointer;border:1.5px solid transparent; }
.card.vis { opacity:1;transform:translateY(0); }
.card:hover { transform:translateY(-4px) scale(1.012);box-shadow:0 0 0 2px var(--accent),0 18px 36px rgba(37,99,235,.2); }
.card.hide { display:none!important; }
.av { width:66px;height:66px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:white;font-family:'Raleway',sans-serif;font-size:20px;font-weight:800;border:3px solid white;box-shadow:0 0 0 2px rgba(124,58,237,.5);overflow:hidden; }
.av img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.ci { flex:1;min-width:0; }
.cn { font-family:'Raleway',sans-serif;font-size:17px;font-weight:800;color:#09042B;margin-bottom:3px; }
.cm { font-size:12px;color:#6B7280;margin-bottom:9px;display:flex;gap:10px;flex-wrap:wrap;align-items:center; }
.bdg,.bdg.a,.bdg.c,.bdg.p { font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:#FEF3C7;color:#92400E;border:1px solid #FDE68A; }
.tags { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px; }
.st { font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;background:#F3F0FF;color:#6D28D9;border:1px solid #DDD6FE; }
.cd { font-size:13px;color:#374151;line-height:1.55; }

/* CARD AVAILABILITY */
.avr { display:flex;flex-wrap:wrap;gap:5px;margin-top:8px; }
.at { font-size:11px;padding:3px 10px;border-radius:6px;background:#F1F5F9;color:#1E293B;border:1px solid #CBD5E1;font-weight:600; }
.at-sub { font-size:10px;font-weight:400;color:#64748B; }
.ci-footer { display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap; }
.sw-badge { font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:#CCFBF1;color:#0F766E;border:1px solid #99F6E4; }
.price-filter-wrap { display:flex;align-items:center;gap:8px;padding:8px 10px; }
.price-filter-wrap input { width:80px;height:32px;background:rgba(255,255,255,.08);border:1px solid rgba(37,99,235,.35);border-radius:7px;color:white;font-family:'Inter',sans-serif;font-size:13px;padding:0 8px;outline:none;transition:border-color .2s; }
.price-filter-wrap input:focus { border-color:var(--accent); }
.price-filter-wrap input::placeholder { color:rgba(255,255,255,.3); }
.price-filter-unit { font-size:12px;color:rgba(255,255,255,.5); }
.price-tag { font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:#DCFCE7;color:#15803D;border:1px solid #86EFAC; }

#nores { display:none;text-align:center;color:rgba(255,255,255,.28);padding:60px 0;font-size:15px; }
#nores.show { display:block; }