/* =========================================================
   home_style.css — nur für die Startseite
   base_style.css wird davor geladen und liefert:
   Farben, box-sizing, Safe-Areas, Schrift, .app, .icon, .dock
   ========================================================= */

/* --- Farben, die es nur hier gibt ---------------------- */
:root {
  --label: var(--text);        /* Brücke: die Suche benutzt noch --label */
  --wall-1: #cfe3ff;
  --wall-2: #f3d9ee;
  --wall-3: #ffe9cc;
  --dot:    rgba(0,0,0,.28);
  --dot-on: rgba(0,0,0,.72);
  --scrim:  rgba(245,245,250,.38);
  --sheet:  rgba(255,255,255,.68);
  --field:  rgba(255,255,255,.82);
  --toast-bg: rgba(28,28,30,.9);
  --toast-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall-1: #17203a; --wall-2: #3a1f3d; --wall-3: #0f1220;
    --dot: rgba(255,255,255,.3); --dot-on: rgba(255,255,255,.9);
    --scrim: rgba(8,8,16,.42); --sheet: rgba(44,44,56,.7); --field: rgba(255,255,255,.13);
    --toast-bg: rgba(242,242,247,.94); --toast-fg: #1c1c1e;
  }
}

/* --- Startseite scrollt nicht -------------------------- */
html, body { height: 100%; }
body {
  padding-bottom: 0;           /* kein Platz für eine feste Bar nötig */
  background: var(--wall-3);   /* den Verlauf macht .wallpaper */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- Wallpaper ----------------------------------------- */
.wallpaper {
  position: fixed;
  inset: -10% -20%;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 20% 15%, var(--wall-1) 0%, transparent 70%),
    radial-gradient(55% 50% at 85% 25%, var(--wall-2) 0%, transparent 70%),
    linear-gradient(170deg, var(--wall-1), var(--wall-3));
  will-change: transform;
}

/* --- Seiten + Wisch-Mechanik --------------------------- */
.screens {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screens::-webkit-scrollbar { display: none; }

.page {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow-y: auto;
  padding: 28px 16px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  justify-content: center;
  align-content: start;
  gap: 26px 22px;
}

/* --- Punkte + Bar im Layout statt fix ------------------ */
.bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 10px;
}
.dots { display: flex; gap: 8px; }
.dots button {
  width: 8px; height: 8px;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--dot);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.dots button[aria-current="true"] { background: var(--dot-on); transform: scale(1.15); }

.bottom .dock { position: static; transform: none; }
.bottom .dock .app  { width: 52px; }
.bottom .dock .icon { width: 52px; height: 52px; font-size: 24px; }

/* --- Suche --------------------------------------------- */
.search {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--scrim);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.search.open { opacity: 1; visibility: visible; transition: opacity .18s ease; }

.search-inner {
  flex: 1; min-height: 0;
  width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.search-bar { display: flex; align-items: center; gap: 12px; }
.search-field {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px;
  border-radius: 14px;
  background: var(--field);
}
.search-field svg { flex: none; opacity: .5; }
.search-field input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: 17px;      /* ≥16px: kein Auto-Zoom auf iOS */
  color: var(--label); outline: none;
}
.search-field input::placeholder { color: var(--sub); }
.search-cancel {
  border: 0; background: none;
  font: inherit; font-size: 17px;
  color: var(--accent); cursor: pointer;
  padding: 8px 2px;
}

.results { flex: 1; min-height: 0; overflow-y: auto; margin-top: 14px; }
.results-card { background: var(--sheet); border-radius: 18px; overflow: hidden; }
.result {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 14px;
  text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.result + .result { border-top: 1px solid var(--line); }
.result.top, .result:active { background: var(--line); }
.result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.r-icon {
  flex: none; width: 40px; height: 40px;
  border-radius: 23%;
  display: grid; place-items: center;
  font-size: 20px;
  background: linear-gradient(155deg, var(--c1), var(--c2));
}
.r-text { flex: 1; min-width: 0; }
.r-title {
  display: block; font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 2px;
  font-size: 13px; color: var(--sub);
}
.search-hint { margin: 22px 8px 0; text-align: center; font-size: 14px; color: var(--sub); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--toast-bg);
  color: var(--toast-fg);
  font-size: 14px;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Kleine Displays ----------------------------------- */
@media (max-height: 640px) {
  .page { gap: 18px 18px; padding-top: 16px; }
}