/* TABLET_FIT_V2_20261015 — desktop homepage on touch tablets (600–1366 px, pointer: coarse).
   Goal: first screen = Schloss + title, a slim "Frag Melisa" bar, and the 10 section tiles.
   Mouse desktops (any width) and the phone site /m/ are not affected: every rule needs pointer: coarse. */

/* ---------- portrait + small landscape tablets (600–1024 px: single column flow) ---------- */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 1024px) {
  html body .v2-main { display: flex !important; flex-direction: column !important; gap: 14px !important; padding-bottom: 20px !important; }
  html body .v2-main > .v2-hero { order: 1 !important; height: 236px !important; min-height: 0 !important; max-height: none !important; margin: 0 -20px !important; border-radius: 0 !important; }
  html body .v2-main .v2-assistant { order: 2 !important; }
  html body .v2-main > #bereiche { order: 3 !important; }
  html body .v2-main > .v2-discover { order: 4 !important; }
  html body .v2-main #bottomSideStack { order: 5 !important; }
  html body .v2-main > * + * { margin-top: 0 !important; }

  /* hero copy: fixed top-left block, quest pill directly below the subtitle (never over H1 / Schloss) */
  html body .v2-hero .v2-hero-copy { position: absolute !important; left: 24px !important; top: 24px !important; margin: 0 !important; padding: 0 !important; transform: none !important; width: auto !important; max-width: 46% !important; }
  html body .v2-hero #v2Title { margin: 0 !important; }
  html body .v2-hero .v2-subtitle { margin: 6px 0 0 !important; }
  html body .lsq--desktop .lsq-label { left: 64px !important; top: 150px !important; right: auto !important; bottom: auto !important; transform: none !important; }
  html body .lsq--desktop .lsq-label::before { display: none !important; }

  /* Melisa: slim ask bar instead of the big card */
  html body #rightSideStack .v2-assistant.v2-assistant { margin: 0 !important; padding: 8px 10px 8px 14px !important; min-height: 0 !important; max-height: none !important; height: auto !important; width: auto !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; border-radius: 16px !important; }
  html body .v2-assistant .v2-intro { display: none !important; }
  html body .v2-assistant::before { content: "Frag Melisa" !important; flex: 0 0 auto !important; font-weight: 800 !important; font-size: 15px !important; color: #1e4d3a !important; padding-left: 26px !important; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #cfe8dc 40%, #7fb79e 100%) left center / 18px 18px no-repeat !important; line-height: 44px !important; white-space: nowrap !important; }
  html body .v2-assistant .melisa-bottom-bar { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; position: static !important; }
  html body .v2-assistant #chatForm { min-height: 48px !important; }
  html body .v2-assistant #chatInput { min-height: 44px !important; font-size: 16px !important; }
  html body .v2-assistant #docUploadBtn { min-height: 44px !important; min-width: 44px !important; }
  html body .v2-assistant #micBtn, html body .v2-assistant #sendBtn { min-height: 44px !important; min-width: 44px !important; }
  html body .v2-assistant #responseWrapper[style*="block"], html body .v2-assistant #responseWrapper:not([style*="none"]) { position: fixed !important; left: 16px !important; right: 16px !important; bottom: 16px !important; top: auto !important; max-height: 70vh !important; z-index: 9000 !important; margin: 0 !important; width: auto !important; }

  /* the 10 sections, compact and all visible */
  html body #bereiche { margin: 0 !important; padding: 0 !important; }
  html body #bereiche .v2-directory-header { display: none !important; }
  html body #bereiche .v2-tiles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; gap: 10px !important; }
  html body #bereiche .v2-tile { min-height: 60px !important; height: auto !important; padding: 8px 12px !important; }
  html body #cityTodayCards.city-today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: 300px !important; }
  html body .v2-main > .v2-discover, html body .v2-main #bottomSideStack { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
}
@media (pointer: coarse) and (min-width: 900px) and (max-width: 1024px) {
  html body #bereiche .v2-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  html body .v2-main > .v2-hero { height: 210px !important; }
  html body #bereiche .v2-tile { padding: 8px 10px !important; gap: 8px !important; min-height: 64px !important; }
  html body #bereiche .v2-tile > b { display: none !important; }
  html body #bereiche .v2-tile svg { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; }
  html body #bereiche .v2-tile strong { font-size: 15px !important; line-height: 1.2 !important; }
  html body #bereiche .v2-tile small { font-size: 12px !important; line-height: 1.25 !important; margin-top: 2px !important; }
}

/* ---------- large tablets in landscape (1025–1366 px): keep the desktop grid (tiles already under the hero),
   Melisa shrinks to a slim "Frag Melisa" bar in the right column, the Schloss stays visible above it ---------- */
@media (pointer: coarse) and (min-width: 1025px) and (max-width: 1366px) {
  html body #rightSideStack .v2-assistant:not(.chat-active) .v2-intro { display: none !important; }
  html body #rightSideStack .v2-assistant.v2-assistant:not(.chat-active) { padding: 10px 12px 10px !important; min-height: 0 !important; }
  html body #rightSideStack .v2-assistant:not(.chat-active)::before { content: "Frag Melisa – Ihre Stadtassistenz" !important; display: block !important; font-weight: 800 !important; font-size: 15px !important; color: #1e4d3a !important; padding: 0 0 0 26px !important; margin: 0 0 8px 2px !important; line-height: 22px !important; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #cfe8dc 40%, #7fb79e 100%) left center / 18px 18px no-repeat !important; }
  html body #rightSideStack .v2-assistant:not(.chat-active) .melisa-bottom-bar { margin-top: 0 !important; }
  html body #rightSideStack .v2-assistant #chatInput { font-size: 16px !important; }
  html body #rightSideStack .v2-assistant #docUploadBtn { min-width: 44px !important; min-height: 44px !important; }
  html body #bereiche .v2-tile > b { display: none !important; }
  html body #bereiche .v2-tile { gap: 8px !important; padding-left: 10px !important; padding-right: 8px !important; }
  html body #bereiche .v2-tile strong { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 14px !important; line-height: 1.2 !important; }
  html body #bereiche .v2-tile span { min-width: 0 !important; }
}

/* touch: >=44 px tap targets without changing what is drawn */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 1366px) {
  html body .mc-dots { gap: 30px !important; }
  html body .mc-dot, html body .mc-foot a, html body #ll-consent .llc-l a, html body .v2-footer a { position: relative !important; }
  html body .mc-dot::before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 44px !important; height: 44px !important; transform: translate(-50%, -50%) !important; }
  html body .mc-foot a::before, html body #ll-consent .llc-l a::before, html body .v2-footer a::before { content: "" !important; position: absolute !important; left: -6px !important; right: -6px !important; top: 50% !important; height: 44px !important; transform: translateY(-50%) !important; }
  html body #rightSideStack .v2-assistant #chatInput { min-height: 44px !important; }
  html body #rightSideStack .v2-assistant #micBtn, html body #rightSideStack .v2-assistant #sendBtn { min-width: 44px !important; min-height: 44px !important; }
  html body #tickerWeatherBtn, html body #topTickerNotdienstBtn, html body .v2-header .v2-brand, html body #jobsMoreLink, html body .v2-footer button { position: relative !important; }
  html body #tickerWeatherBtn::after, html body #topTickerNotdienstBtn::after, html body .v2-header .v2-brand::after, html body #jobsMoreLink::after, html body .v2-footer button::after { content: "" !important; position: absolute !important; left: -4px !important; right: -4px !important; top: 50% !important; height: 44px !important; min-width: 44px !important; transform: translateY(-50%) !important; background: none !important; border: 0 !important; box-shadow: none !important; }
}