/*
 * 6Flaschen – Mobile UI & Light-Mode Button Contrast
 * Stand: 2026-08-27
 * Wird als letzte globale CSS-Schicht geladen und enthält ausschließlich
 * responsive/kontrastbezogene Overrides. Keine Funktionslogik.
 */

/* --------------------------------------------------------------------------
   Light Mode: gefüllte Action-Buttons mit heller Schrift
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
  --ui-text-on-action: #ffffff;
}

html[data-theme="light"] .public-button--primary,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .ui-button--primary,
html[data-theme="light"] .btn-gold,
html[data-theme="light"] .archive-recommendation-button--gold,
html[data-theme="light"] .wr6-archive-select {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Gold muss für helle Schrift ausreichend dunkel sein. */
html[data-theme="light"] .ui-button--primary,
html[data-theme="light"] .btn-gold,
html[data-theme="light"] .archive-recommendation-button--gold,
html[data-theme="light"] .wr6-archive-select {
  background: linear-gradient(135deg, #8a642a 0%, #76581f 100%) !important;
  border-color: rgba(111, 81, 39, .42) !important;
}

html[data-theme="light"] .ui-button--primary:hover,
html[data-theme="light"] .btn-gold:hover,
html[data-theme="light"] .archive-recommendation-button--gold:hover,
html[data-theme="light"] .wr6-archive-select:hover {
  background: linear-gradient(135deg, #7f5f31 0%, #6f5127 100%) !important;
}

/* --------------------------------------------------------------------------
   Globale robuste Mobilbasis
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea,
.btn,
.ui-button,
.public-button {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  /* App/Auth: auf kleinen Displays mehr nutzbare Breite. */
  body:not(.public-page) .app-shell {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  body:not(.public-page) .app-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.public-page) .card,
  body:not(.public-page) .form-section,
  body:not(.public-page) .page-hero {
    max-width: 100%;
    border-radius: 20px !important;
  }

  body:not(.public-page) .card-pad {
    padding: 17px !important;
  }

  body:not(.public-page) .form-section-content {
    padding-left: 17px !important;
    padding-right: 17px !important;
  }

  body:not(.public-page) .form-grid,
  body:not(.public-page) .detail-grid,
  body:not(.public-page) .label-upload-grid {
    gap: 12px !important;
  }

  /* iOS: 16 px verhindert automatisches Zoom bei Fokus. */
  body:not(.public-page) input,
  body:not(.public-page) select,
  body:not(.public-page) textarea,
  body:not(.public-page) .input,
  body:not(.public-page) .select,
  body:not(.public-page) .textarea {
    min-height: 48px;
    font-size: 16px !important;
  }

  body:not(.public-page) textarea,
  body:not(.public-page) .textarea {
    min-height: 112px;
  }

  /* Buttons bleiben lesbar und treffen mindestens das Touch-Ziel. */
  body:not(.public-page) .btn,
  body:not(.public-page) .ui-button {
    min-height: 48px;
    padding: 12px 16px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  /* Haupt-Aktionsgruppen werden mobil zuverlässig einspaltig. */
  body:not(.public-page) .form-actions,
  body:not(.public-page) .ui-actions,
  body:not(.public-page) .auth-actions,
  body:not(.public-page) .detail-primary-actions,
  body:not(.public-page) .tasting-result-actions,
  body:not(.public-page) .private-response-actions,
  body:not(.public-page) .archive-pagination-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: stretch !important;
  }

  body:not(.public-page) .form-actions > .btn,
  body:not(.public-page) .form-actions > .ui-button,
  body:not(.public-page) .ui-actions > .btn,
  body:not(.public-page) .ui-actions > .ui-button,
  body:not(.public-page) .auth-actions > .btn,
  body:not(.public-page) .detail-primary-actions > .btn,
  body:not(.public-page) .tasting-result-actions > .btn,
  body:not(.public-page) .private-response-actions > .btn,
  body:not(.public-page) .archive-pagination-actions > .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Tabellen dürfen die Seite nicht horizontal aufziehen. */
  body:not(.public-page) .admin-table-wrap,
  body:not(.public-page) .admin-ops-table-wrap,
  body:not(.public-page) .credit-history-table,
  body:not(.public-page) .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Dialoge bleiben vollständig im Viewport und oberhalb der Safe Area. */
  body:not(.public-page) dialog,
  body:not(.public-page) .ai-feedback-dialog {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: auto !important;
  }

  body:not(.public-page) .ai-feedback-dialog-card {
    max-height: calc(100dvh - 28px) !important;
    padding: 18px 15px !important;
  }

  /* Lange Wörter/URLs dürfen Cards nicht verbreitern. */
  body:not(.public-page) .card,
  body:not(.public-page) .field,
  body:not(.public-page) .card-text,
  body:not(.public-page) .private-response-copy {
    overflow-wrap: anywhere;
  }

  /* Untere Aktionen respektieren iPhone-Safe-Area. */
  body:not(.public-page) .sticky-actions,
  body:not(.public-page) .wizard-sticky-actions {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  /* ------------------------------------------------------------------------
     Public Site – kompakter, besser lesbar und ohne mobile Überbreite
     ------------------------------------------------------------------------ */
  body.public-page .public-header__inner,
  body.public-page .public-container,
  body.public-page .public-footer__inner,
  body.public-page .public-footer__bottom {
    width: calc(100% - 24px);
  }

  body.public-page .public-section {
    padding: 56px 0;
  }

  body.public-page .public-section--compact {
    padding: 46px 0;
  }

  body.public-page .public-hero {
    padding: 14px 0 44px;
  }

  body.public-page .public-hero__panel {
    border-radius: 22px;
  }

  body.public-page .public-hero__copy {
    padding: 26px 18px 30px;
  }

  body.public-page .public-hero__copy h1,
  body.public-page .public-heading {
    overflow-wrap: anywhere;
  }

  body.public-page .public-hero__copy h1 {
    font-size: clamp(38px, 12vw, 54px);
    line-height: 1;
  }

  body.public-page .public-heading {
    font-size: clamp(34px, 10vw, 48px);
  }

  body.public-page .public-heading--medium {
    font-size: clamp(30px, 9vw, 42px);
  }

  body.public-page .public-lead,
  body.public-page .public-hero__copy p {
    font-size: 16px;
    line-height: 1.65;
  }

  body.public-page .public-button {
    min-height: 48px;
    width: 100%;
    padding: 12px 16px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  body.public-page .public-feature-card,
  body.public-page .public-profile-copy,
  body.public-page .public-axis-panel,
  body.public-page .public-principle {
    padding: 22px;
    border-radius: 20px;
  }

  body.public-page .public-credit-panel,
  body.public-page .public-final-cta {
    padding: 26px 18px;
    border-radius: 22px;
  }

  body.public-page .public-content-grid,
  body.public-page .public-numbered-grid,
  body.public-page .public-package-grid,
  body.public-page .public-retailer-grid,
  body.public-page .public-knowledge-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.public-page .public-pricing-table-wrap,
  body.public-page .public-ai-table-wrap,
  body.public-page .public-article-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.public-page .public-mobile-menu__panel {
    width: min(330px, calc(100vw - 24px));
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }

  body.public-page .public-footer__nav {
    gap: 12px 20px;
  }
}

@media (max-width: 430px) {
  body:not(.public-page) .app-shell {
    padding-left: max(9px, env(safe-area-inset-left)) !important;
    padding-right: max(9px, env(safe-area-inset-right)) !important;
  }

  body:not(.public-page) .card,
  body:not(.public-page) .form-section,
  body:not(.public-page) .page-hero {
    border-radius: 17px !important;
  }

  body:not(.public-page) .card-pad {
    padding: 14px !important;
  }

  body.public-page .public-header__inner,
  body.public-page .public-container,
  body.public-page .public-footer__inner,
  body.public-page .public-footer__bottom {
    width: calc(100% - 18px);
  }

  body.public-page .public-hero__copy {
    padding: 23px 15px 27px;
  }

  body.public-page .public-feature-card,
  body.public-page .public-profile-copy,
  body.public-page .public-axis-panel,
  body.public-page .public-principle {
    padding: 18px;
  }


  body.public-page .public-footer__nav {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .ui-button,
  .public-button {
    transition: none !important;
    transform: none !important;
  }
}


/* --------------------------------------------------------------------------
   Gastnavigation: Account-Aktionen im mobilen Menü zuerst und hervorgehoben
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  body.public-page .public-mobile-menu__panel {
    padding: 12px;
  }


}


/* --------------------------------------------------------------------------
   Hotfix 7 – reduzierte öffentliche Top-Navigation
   Registrieren und Anmelden sind auf allen Public-Seiten die einzigen Menüpunkte.
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  body.public-page .public-mobile-menu__account-only {
    display: grid;
  }

  body.public-page .public-mobile-menu__account-only a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--public-line);
    color: var(--public-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }

  body.public-page .public-mobile-menu__account-only a:last-child {
    border-bottom: 0;
  }
}