/* Family Spots Map · V90 · NUR oberer Startseitenbereich.
 * Vorlage: abgestimmtes Bild 03.11.2026; Basis: Family-Spots-Map-main 30.zip
 * Kein Eingriff in Karte, Navigation, Dialoge, Daten oder Funktionen.
 * Gemeinsames Layout für den mobilen Startbildschirm.
 */
@media (max-width: 899px) {
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] .app-header {
    box-sizing:border-box !important;
    position:relative !important;
    overflow:hidden;
    margin:0 !important;
    padding:10px 10px 0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#fff5e6 !important;
    box-shadow:none !important;
    color:#483728 !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] .app-header::before {
    content:"";
    position:absolute;
    left:0; top:0;
    width:clamp(82px,31vw,134px);
    height:clamp(82px,28vw,118px);
    background:url("../assets/design/main-header-leaves-v90.webp") top left / contain no-repeat;
    pointer-events:none;
    z-index:0;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] .app-header-top {
    min-height:0 !important; height:0 !important; margin:0 !important; padding:0 !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] .app-header-main {
    position:relative;
    z-index:1;
    margin:0 !important;
    padding:0 !important;
    text-align:center;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #app-title.header-title {
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:clamp(7px,2vw,10px) !important;
    font-family:Arial,Helvetica,sans-serif !important;
    color:#4b382a !important;
    font-size:clamp(21px,6vw,25px) !important;
    font-weight:750 !important;
    letter-spacing:-.55px !important;
    line-height:1.21 !important;
    margin:0 !important;
    text-shadow:none !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #header-tagline {
    display:block !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    max-width:100% !important;
    width:100% !important;
    margin:5px auto 0 !important;
    padding:0 4px !important;
    color:#4e3c2f !important;
    font-size:clamp(12px,3.53vw,14px) !important;
    font-style:italic !important;
    font-weight:650 !important;
    line-height:1.28 !important;
    white-space:pre-line !important;
    text-align:center !important;
    letter-spacing:-.1px !important;
    text-shadow:none !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] .app-header-main::after {
    content:"";
    display:block;
    width:calc(100% + 20px);
    height:clamp(70px,21vw,89px);
    margin:4px -10px 0;
    background:url("../assets/design/main-header-landscape-v90.webp") center bottom / 100% 100% no-repeat;
    pointer-events:none;
  }

  /* Optisch EIN zusammenhaengender Kopf. Die DOM-Elemente und alle IDs bleiben. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #main-content.app-main {
    padding-top:0 !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section.sidebar-section {
    position:relative;
    isolation:isolate;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(100px,29%) minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    column-gap:8px !important;
    row-gap:3px !important;
    width:100vw !important;
    max-width:none !important;
    margin:-1px calc(50% - 50vw) 0 !important;
    padding:5px 13px 14px !important;
    border:0 !important;
    border-radius:0 0 18px 18px !important;
    background:#fff5e6 !important;
    box-shadow:0 3px 8px rgba(79,55,30,.07) !important;
    overflow:hidden;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section.sidebar-section::after {
    content:""; position:absolute; pointer-events:none; z-index:-1;
    right:0; bottom:0;
    width:clamp(55px,18vw,85px); height:clamp(75px,25vw,108px);
    background:url("../assets/design/main-header-leaves-bottom-v90.webp") bottom right / contain no-repeat;
    opacity:.72;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section > .sidebar-section-header {
    display:flex !important; grid-column:2; grid-row:1;
    align-items:center !important; justify-content:space-between !important;
    width:100%; min-width:0; min-height:32px !important;
    margin:0 !important; padding:0 !important;
    background:transparent !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-title {
    min-width:0;
    font-size:clamp(13px,3.56vw,16px) !important;
    line-height:1.23 !important;
    font-weight:750 !important;
    letter-spacing:-.25px !important;
    color:#4b382a !important;
    white-space:normal !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #menu-toggle {
    width:44px !important; height:44px !important; min-height:44px !important;
    flex:0 0 44px !important; margin-right:-7px !important;
    color:#746356 !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section .tilla-sidebar-card,
html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section .tilla-sidebar-text {
    display:contents !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section .tilla-sidebar-avatar {
    display:block !important;
    grid-column:1 !important; grid-row:1 / 4 !important;
    align-self:center !important;
    justify-self:center !important;
    width:100% !important; height:auto !important;
    margin:0 !important;
    transform:none !important;
    animation:none !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section .tilla-watercolor-canvas {
    width:130% !important; max-width:none !important;
    margin:0 0 0 -17% !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section .tilla-watercolor-canvas img {
    display:block; width:100% !important; height:auto !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-sidebar-text {
    grid-column:2 !important; grid-row:2 !important;
    margin:0 !important; padding:0 !important;
    min-width:0 !important; min-height:0 !important; min-block-size:0 !important;
    color:#4b3b2f !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:clamp(12px,3.3vw,14px) !important;
    line-height:1.34 !important;
    font-weight:400 !important;
    overflow-wrap:break-word !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section .tilla-sidebar-actions {
    display:flex !important;
    grid-column:2 !important; grid-row:3 !important;
    align-items:center !important; justify-content:stretch !important;
    min-width:0 !important; width:100% !important;
    margin:5px 0 0 !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea {
    box-sizing:border-box !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:9px !important;
    width:100% !important; max-width:100% !important;
    min-height:42px !important; height:auto !important;
    padding:9px 10px !important;
    border:0 !important; border-radius:99px !important;
    background:#c65600 !important;
    color:#fff !important;
    font-size:clamp(11.5px,3.22vw,14px) !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:normal !important;
    box-shadow:0 3px 7px rgba(143,70,8,.16) !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea::before {
    content:""; flex:0 0 auto;
    width:0; height:0;
    border-left:13px solid white;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea .tilla-play-emoji {
    display:none !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea > span:not(.tilla-play-emoji) {
    color:#fff !important; font-weight:700 !important;
    white-space:normal !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea:focus-visible {
    outline:3px solid #345b30 !important; outline-offset:3px !important;
  }
  @media (max-width:359px) {
    html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section.sidebar-section {
      grid-template-columns:minmax(78px,27%) minmax(0,1fr) !important;
      column-gap:5px !important; padding-inline:10px !important;
    }
    html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-title { font-size:12.8px !important; }
    html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-sidebar-text { font-size:11.8px !important; }
    html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea { font-size:11.2px !important; gap:6px !important; }
  }
}