/*
 * 6Flaschen WeinApp
 * Einheitliche Seitenbreiten
 * Hotfix 8.4.9 Revision 9.76
 * Stand: 2026-08-18 Europe/Berlin
 *
 * Ziel:
 * - eine gemeinsame Desktop-Flucht von Top-Navigation bis Footer
 * - dieselbe Außenbreite auf allen eingeloggten App-Seiten
 * - seitenbezogene Sonderbreiten (880 / 920 / 980 / 1120 / 1460 px) werden
 *   nur für innere Inhalte zugelassen, nicht mehr für die äußeren Kästen
 */

html.coastal-ui {
  --weinapp-layout-max: 1160px;
}

/* ---------------------------------------------------------------------
   1. Eine gemeinsame Seitenflucht
   --------------------------------------------------------------------- */
html.coastal-ui body .app-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--weinapp-layout-max) !important;
  max-inline-size: var(--weinapp-layout-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Frühere seitenbezogene Container-Sonderbreiten neutralisieren. */
html.coastal-ui body.coastal-home-page .app-container,
html.coastal-ui body.coastal-capture-page .app-container,
html.coastal-ui body.coastal-edit-page .app-container,
html.coastal-ui body.coastal-archive-page .app-container,
html.coastal-ui body.coastal-profile-page .app-container,
html.coastal-ui body.weincheck-page .app-container,
html.coastal-ui body.coastal-recommendation-page .app-container,
html.coastal-ui body.tasting-result-page .app-container,
html.coastal-ui body.coastal-mass-analysis-page .app-container,
html.coastal-ui .wine-recommendation-page-grid326 .app-container,
html.coastal-ui .mass-runner-page .app-container {
  max-width: var(--weinapp-layout-max) !important;
  max-inline-size: var(--weinapp-layout-max) !important;
}

/* ---------------------------------------------------------------------
   2. Top-Navigation und Footer liegen exakt auf derselben Flucht
   --------------------------------------------------------------------- */
html.coastal-ui body .app-container > .coastal-navigation-header,
html.coastal-ui body .app-container > .app-header,
html.coastal-ui body .app-container > .app-footer {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.coastal-ui body .app-container > .coastal-navigation-header .coastal-desktop-navigation-shell,
html.coastal-ui body .app-container > .coastal-navigation-header .coastal-mobile-navigation,
html.coastal-ui body .app-container > .app-footer .app-footer-menu,
html.coastal-ui body .app-container > .app-footer .app-footer-meta {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

/* WeinCheck hatte Header/Footer absichtlich auf eine kleinere Sonderbreite
   gesetzt. Diese Sonderbreite wird für die globale Flucht aufgehoben. */
html.coastal-ui body.weincheck-page .coastal-navigation-header,
html.coastal-ui body.weincheck-page .app-footer {
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

/* ---------------------------------------------------------------------
   3. Äußere Inhaltskästen einer Seite: immer volle Containerbreite
   --------------------------------------------------------------------- */
html.coastal-ui body .app-container > :where(
  .page-hero,
  .wr6-master-page-hero,
  .coastal-home-hero,
  .coastal-guest-hero,
  .coastal-split-home,
  .archive-controls-flow,
  .wine-recommendation-panel,
  .wr6-assistant-panel,
  .profile-r19-flow,
  .weincheck-home-hero,
  .weincheck-intro,
  .weincheck-shell,
  .tasting-result-shell,
  .detail-layout,
  .mass-runner-hero,
  .mass-runner-panel,
  .mass-runner-grid,
  section.card,
  form#weinForm
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Formulare Erfassen/Bearbeiten waren bisher auf 1120px festgesetzt. Sie
   füllen jetzt wie Hero, Navigation und Footer die gemeinsame 1160px-Flucht. */
html.coastal-ui body.coastal-capture-page #weinForm,
html.coastal-ui body.coastal-edit-page #weinForm,
html.coastal-ui body.coastal-capture-page .capture-start-reference-hero,
html.coastal-ui body.coastal-edit-page .capture-start-reference-hero,
html.coastal-ui body.coastal-edit-page .edit-record-meta {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ergebnisansicht: keine 820/980px-Sonderinsel mehr zwischen Navigationen. */
html.coastal-ui body.tasting-result-page .tasting-result-shell {
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

html.coastal-ui body.tasting-result-page .tasting-result-shell > :where(.card, .tasting-result-actions) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

/* Profil und WeinCheck behalten ihre innere Typografie/Lesebreiten, die
   äußeren Karten selbst stehen aber auf der globalen 1160px-Flucht. */
html.coastal-ui body.coastal-profile-page .profile-r19-flow,
html.coastal-ui body.coastal-profile-page .profile-r19-flow > :where(.profile-r19-card, .profile-r19-system-state, .profile-r19-hero),
html.coastal-ui body.weincheck-page :where(.weincheck-home-hero, .weincheck-intro, .weincheck-shell) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

/* 6Flaschen-Seite: die frühere Extra-Breite (bis 1460/1560px) entfällt.
   Ergebnis-Karten bleiben innerhalb ihres Grids; nur der äußere Kasten wird
   vereinheitlicht. */
html.coastal-ui body.coastal-recommendation-page :where(
  .recommendation-start-reference-hero,
  .wine-recommendation-panel,
  .wr6-assistant-panel
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

/* Archiv: Hero und Steuerungs-/Ergebnisfluss exakt in derselben Flucht. */
html.coastal-ui body.coastal-archive-page :where(
  .archive-page-hero,
  .archive-controls-flow,
  .archive-controls-flow > .archive-page-panel,
  .archive-controls-flow > .archive-status-shell
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

/* Sticky-Aktionsleisten folgen auf Desktop derselben Breite. */
html.coastal-ui .sticky-actions-inner,
html.coastal-ui body.edit-polished .edit-sticky-actions-inner,
html.coastal-ui body.coastal-capture-page .wizard-sticky-actions {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--weinapp-layout-max) !important;
  max-inline-size: var(--weinapp-layout-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------------------
   4. Mobil: einheitlicher Seitenrand für Header, Inhalt und Bottom-Navigation
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  html.coastal-ui {
    --weinapp-mobile-gutter: 12px;
  }

  html.coastal-ui body .app-container {
    max-width: 100% !important;
    max-inline-size: 100% !important;
  }

  html.coastal-ui body .app-container > .coastal-navigation-header,
  html.coastal-ui body .app-container > .app-footer,
  html.coastal-ui body .app-container > :where(
    .page-hero,
    .wr6-master-page-hero,
    .coastal-home-hero,
    .coastal-guest-hero,
    .coastal-split-home,
    .archive-controls-flow,
    .wine-recommendation-panel,
    .profile-r19-flow,
    .weincheck-home-hero,
    .weincheck-intro,
    .weincheck-shell,
    .tasting-result-shell,
    .detail-layout,
    section.card,
    form#weinForm
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  /* Die Bottom-Navigation verwendet denselben 12px-Seitenrand wie .app-shell. */
  html.coastal-ui body .app-footer-menu {
    left: var(--weinapp-mobile-gutter, 12px) !important;
    right: var(--weinapp-mobile-gutter, 12px) !important;
  }
}


/* ---------------------------------------------------------------------
   5. Erfassen & Bearbeiten: alle sichtbaren Form-Kästen exakt eine Breite
   ---------------------------------------------------------------------
   Die äußere Formularbreite wurde bereits auf die globale 1160px-Flucht
   angehoben. Diese Regeln ziehen zusätzlich sämtliche direkt sichtbaren
   Capture-/Edit-Kästen auf exakt dieselbe Innenflucht. Damit können alte
   1120px-Regeln oder durch JavaScript erzeugte Accordion-Karten nicht mehr
   einzelne schmalere/breitere Inseln erzeugen.
*/
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page) #weinForm {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Server-seitig vorhandene Hauptkästen. */
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page) #weinForm > :where(
  .capture-ui-check,
  .capture-mode-switch,
  .edit-record-meta,
  details.form-section,
  .capture-detailed-intro,
  .capture-detailed-supplement
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Nach Initialisierung der Capture-Experience wird „1. Wein erfassen“ zu
   einer Gruppierung mit mehreren echten Unteraccordions. Auch diese bleiben
   pixelgenau auf derselben Außenkante wie die übrigen Form-Kästen. */
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page)
#weinForm.capture-experience-enabled > .capture-primary-section,
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page)
#weinForm.capture-experience-enabled > .capture-score-accordion,
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page)
#weinForm.capture-experience-enabled .capture-primary-accordion,
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page)
#weinForm.capture-experience-enabled .capture-label-panel,
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page)
#weinForm.capture-experience-enabled .capture-quick-data,
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page)
#weinForm.capture-experience-enabled .capture-primary-axis-editor {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Wrapper der dynamischen Unterkarten dürfen keine zusätzliche horizontale
   Breite oder Einrückung einführen. */
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page)
#weinForm.capture-experience-enabled > .capture-primary-section > .form-section-content,
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page)
#weinForm.capture-experience-enabled > .capture-primary-section > .form-section-content > .form-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hero, Modusumschalter, Datensatzstatus und alle Accordions teilen sich
   damit dieselbe 1160px-Flucht wie Top- und Bottom-Navigation. */
html.coastal-ui body:is(.coastal-capture-page, .coastal-edit-page) :where(
  .capture-start-reference-hero,
  #weinForm,
  #weinForm > .capture-mode-switch,
  #weinForm > .edit-record-meta,
  #weinForm > details.form-section
) {
  max-inline-size: 100% !important;
}

/* ---------------------------------------------------------------------
   6. Startseite mobil: Markenlogo im Header wieder sichtbar
   Hotfix 8.4.9 Revision 9.77
   ---------------------------------------------------------------------
   Eine ältere Startseiten-Sonderregel reduzierte den mobilen Header bei
   eingeloggten Nutzern auf den Einstellungs-Button und blendete die Marke
   global aus. Die Startseite verwendet jetzt wieder dieselbe dreispaltige
   mobile Top-Navigation wie die übrigen App-Seiten: Platzhalter | Logo |
   Einstellungen. Dadurch bleibt das 6Flaschen-Logo in Hell- und Dunkelmodus
   sichtbar und zentriert, ohne die Desktop-Navigation zu verändern.
*/
@media (max-width: 900px) {
  html.coastal-ui body.coastal-home-page.is-authenticated
  .coastal-navigation-header,
  html.coastal-ui body.coastal-home-page.is-authenticated
  .global-brand-header {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 66px !important;
    margin: 0 0 14px !important;
  }

  html.coastal-ui body.coastal-home-page.is-authenticated
  .coastal-mobile-navigation {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    min-height: 66px !important;
    padding: 8px 10px !important;
  }

  html.coastal-ui body.coastal-home-page.is-authenticated
  .coastal-mobile-navigation-side.is-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  html.coastal-ui body.coastal-home-page.is-authenticated
  .coastal-mobile-navigation-side.is-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  html.coastal-ui body.coastal-home-page.is-authenticated
  .coastal-mobile-brand--persistent {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 210px !important;
    justify-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  html.coastal-ui body.coastal-home-page.is-authenticated
  .coastal-mobile-brand--persistent .brand-logo-theme--mobile {
    display: block !important;
    width: clamp(118px, 34vw, 150px) !important;
    max-width: 150px !important;
  }

  html.coastal-ui body.coastal-home-page.is-authenticated
  .coastal-mobile-brand--persistent picture {
    width: 100% !important;
  }

  html.coastal-ui body.coastal-home-page.is-authenticated
  .coastal-mobile-brand--persistent img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }
}