/*
 * 6Flaschen WeinApp – UI Foundation
 * Version: 1.0.0
 * Build: 20260902.ui-foundation
 *
 * Aufgabe dieser Schicht:
 * - zentrale semantische Design-Tokens
 * - einheitliche Layout-/Safe-Area-Variablen
 * - gemeinsame mobile Bottom-Navigation-/Floating-Abstaende
 * - konservative Legacy-Aliasse ohne Redesign bestehender Seiten
 *
 * Standard-Breakpoints fuer neue/ueberarbeitete Regeln:
 * xs 360px | sm 480px | md 760px | lg 900px | xl 1160px
 * Bestehende Alt-Regeln werden erst in der CSS-Konsolidierungsphase migriert.
 */

:root {
  /* Breakpoint-Dokumentation (CSS Custom Properties koennen nicht direkt in
     @media-Abfragen verwendet werden; die Werte dienen als zentrale Referenz). */
  --ui-breakpoint-xs: 360px;
  --ui-breakpoint-sm: 480px;
  --ui-breakpoint-md: 760px;
  --ui-breakpoint-lg: 900px;
  --ui-breakpoint-xl: 1160px;

  /* Layout */
  --ui-layout-max: 1160px;
  --ui-content-max: 760px;
  --ui-mobile-gutter: 12px;
  --ui-desktop-gutter: 28px;
  --ui-safe-top: env(safe-area-inset-top, 0px);
  --ui-safe-right: env(safe-area-inset-right, 0px);
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-safe-left: env(safe-area-inset-left, 0px);

  /* Spacing scale */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;
  --ui-space-8: 40px;
  --ui-space-9: 48px;

  /* Semantische Flaechen/Farben – an bestehende Theme-Tokens gekoppelt. */
  --ui-page-bg: var(--bg, #f7f4ee);
  --ui-card-bg: var(--card, rgba(255, 252, 247, .92));
  --ui-card-solid-bg: var(--card-solid, #fffcf7);
  --ui-field-bg: rgba(255, 252, 247, .88);
  --ui-text: var(--text, #24313b);
  --ui-muted: var(--muted, #7e8790);
  --ui-border: var(--line, rgba(49, 69, 85, .14));
  --ui-accent-color: var(--gold, #b89a67);
  --ui-danger-color: var(--danger, #8a3d36);
  --ui-success-color: var(--success, #4f7b59);
  --ui-warning-color: var(--warning, #b58a42);

  /* Typografie */
  --ui-font-sans: var(--font-sans, Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --ui-font-serif: var(--font-serif, Georgia, "Times New Roman", serif);
  --ui-font-xs: 12px;
  --ui-font-sm: 13px;
  --ui-font-md: 15px;
  --ui-font-base: 16px;
  --ui-font-lg: 18px;
  --ui-line-normal: 1.5;

  /* Controls */
  --ui-control-height: 48px;
  --ui-touch-target: 44px;
  --ui-control-padding-x: 13px;
  --ui-control-padding-y: 11px;
  --ui-focus-ring: 0 0 0 3px rgba(184, 154, 103, .25);

  /* Radien und Schatten */
  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 24px;
  --ui-radius-xl: 30px;
  --ui-radius-pill: 999px;
  --ui-shadow-sm: 0 8px 22px rgba(36, 49, 59, .07);
  --ui-shadow-card: 0 12px 32px rgba(36, 49, 59, .08);
  --ui-shadow-raised: 0 22px 54px rgba(36, 49, 59, .13);

  /* Mobile Bottom Navigation.
     Die aktuelle feste App-Navigation liegt 10px ueber dem Viewport-Rand,
     ist ca. 76px hoch und wird durch die Safe Area erweitert. */
  --ui-bottom-nav-layout-height: 68px;
  --ui-bottom-nav-bar-height: 76px;
  --ui-bottom-nav-edge-gap: 10px;
  --ui-bottom-nav-reserved: 0px;
  --ui-floating-gap: 12px;
  --ui-floating-bottom: 16px;
  --ui-sticky-actions-height: 88px;

  /* Legacy-Aliasse: vorhandene Styles koennen schrittweise migriert werden. */
  --weinapp-layout-max: var(--ui-layout-max);
  --weinapp-mobile-gutter: var(--ui-mobile-gutter);
  --weinapp-sticky-actions-height: var(--ui-sticky-actions-height);
}

html[data-theme="dark"] {
  --ui-page-bg: #071c27;
  --ui-card-bg: rgba(10, 34, 46, .94);
  --ui-card-solid-bg: #0b2633;
  --ui-field-bg: rgba(8, 29, 40, .96);
  --ui-text: #f5efe4;
  --ui-muted: #bcc8cc;
  --ui-border: rgba(211, 222, 224, .15);
  --ui-accent-color: #d6af62;
  --ui-danger-color: #e19a92;
  --ui-success-color: #79b594;
  --ui-warning-color: #d6ae62;
  --ui-shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
  --ui-shadow-card: 0 14px 38px rgba(0, 0, 0, .23);
  --ui-shadow-raised: 0 24px 64px rgba(0, 0, 0, .34);
}

html.coastal-ui {
  /* Bestehende Coastal-Tokens werden auf dieselbe Geometrie referenziert. */
  --coastal-radius-sm: var(--ui-radius-sm);
  --coastal-radius-md: 16px;
  --coastal-radius-lg: 22px;
  --coastal-radius-xl: var(--ui-radius-xl);
  --coastal-tabbar-height: 0px;
  --coastal-bottom-safe: 0px;
}

/* --------------------------------------------------------------------------
   Opt-in Layout primitives
   -------------------------------------------------------------------------- */
.ui-container {
  box-sizing: border-box;
  width: min(100%, var(--ui-layout-max));
  margin-inline: auto;
  padding-inline: var(--ui-desktop-gutter);
}

.ui-section {
  min-width: 0;
  margin-block: var(--ui-space-6);
}

.ui-grid {
  min-width: 0;
  display: grid;
  gap: var(--ui-space-4);
}

.ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ui-form-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.ui-form-grid__full { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Gemeinsame Action-/Pagination-/Floating-Komponenten
   -------------------------------------------------------------------------- */
.ui-actionbar {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-3);
}

.ui-actionbar--end { justify-content: flex-end; }
.ui-actionbar--between { justify-content: space-between; }

.ui-pagination {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: 5px;
  color: var(--ui-text);
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  box-shadow: var(--ui-shadow-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ui-pagination__button {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-text) 7%, transparent);
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.ui-pagination__button[aria-disabled="true"],
.ui-pagination__button:disabled {
  opacity: .38;
  pointer-events: none;
}

.ui-pagination__label {
  min-width: 54px;
  padding-inline: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-xs);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.ui-floating-control {
  position: fixed;
  z-index: 6100;
  right: max(var(--ui-space-4), var(--ui-safe-right));
  bottom: var(--ui-floating-bottom);
}

.ui-bottom-safe-space {
  padding-bottom: var(--ui-bottom-nav-reserved);
}

/* --------------------------------------------------------------------------
   Gemeinsame Legacy-Geometrie: keine optische Neugestaltung, nur eine Quelle
   fuer Mobile-Navigation und Floating-Abstaende.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --ui-bottom-nav-reserved: calc(
      var(--ui-bottom-nav-bar-height) +
      var(--ui-bottom-nav-edge-gap) +
      var(--ui-safe-bottom)
    );
    --ui-floating-bottom: calc(var(--ui-bottom-nav-reserved) + var(--ui-floating-gap));
  }

  html.coastal-ui {
    --coastal-tabbar-height: var(--ui-bottom-nav-layout-height);
    --coastal-bottom-safe: var(--ui-bottom-nav-reserved);
  }
}

@media (max-width: 760px) {
  .ui-container {
    padding-inline: max(var(--ui-mobile-gutter), var(--ui-safe-left), var(--ui-safe-right));
  }

  .ui-grid--2,
  .ui-grid--3,
  .ui-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-actionbar {
    align-items: stretch;
  }

  .ui-actionbar > :is(.ui-button, .btn) {
    flex: 1 1 100%;
  }

  /* App-Footer-Navigation: gemeinsame Geometrie statt seitenweiser Offsets. */
  html.coastal-ui body .app-container > .app-footer .app-footer-menu {
    bottom: calc(var(--ui-bottom-nav-edge-gap) + var(--ui-safe-bottom)) !important;
    min-height: var(--ui-bottom-nav-bar-height);
  }

  /* Seiten mit normalen Inhalten erhalten mindestens genuegend Scrollraum.
     Explizite Sticky-Formularleisten koennen weiterhin zusaetzlichen Raum addieren. */
  html.coastal-ui body:not(.has-sticky-actions) .page {
    padding-bottom: max(96px, calc(var(--ui-bottom-nav-reserved) + var(--ui-space-6)));
  }
}

@media (max-width: 480px) {
  .ui-container { padding-inline: max(var(--ui-mobile-gutter), var(--ui-safe-left), var(--ui-safe-right)); }
  .ui-section { margin-block: var(--ui-space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-pagination__button { transition: none; }
}


/* ==========================================================================
   MERGED APP COMPONENTS 8.5.61 – zentrale Quelle; separater Legacy-Request entfernt in r18
   ========================================================================== */
/*
 * 6Flaschen WeinApp
 * In r18 integrierte ehemalige Komponentenregeln
 * Version: 1.0.0
 * Build: 20260806.820000a
 * Stand: 2026-08-06 Europe/Berlin
 *
 * Semantisches Komponenten- und Token-System.
 * Bestehende Seiten behalten ihre Struktur; neue und migrierte Oberflächen
 * verwenden ausschließlich die ui-* Komponenten und semantischen Variablen.
 */

:root {
  --ui-surface-page: var(--bg, #f7f4ee);
  --ui-surface-card: var(--card, rgba(255, 252, 247, .92));
  --ui-surface-card-solid: var(--card-solid, #fffcf7);
  --ui-surface-field: rgba(255, 252, 247, .86);
  --ui-surface-elevated: #fffdf9;
  --ui-surface-selected: rgba(184, 154, 103, .13);
  --ui-surface-muted: rgba(49, 69, 85, .055);
  --ui-surface-success: rgba(79, 123, 89, .10);
  --ui-surface-warning: rgba(181, 138, 66, .11);
  --ui-surface-error: rgba(138, 61, 54, .09);

  --ui-text-primary: var(--text, #24313b);
  --ui-text-secondary: var(--muted, #7e8790);
  --ui-text-muted: #8c949b;
  --ui-text-on-action: #17232c;

  --ui-border-default: var(--line, rgba(49, 69, 85, .14));
  --ui-border-strong: rgba(49, 69, 85, .24);
  --ui-border-active: rgba(184, 154, 103, .70);

  --ui-action-primary: linear-gradient(135deg, #dfbd78 0%, #bf8d3b 100%);
  --ui-action-primary-hover: linear-gradient(135deg, #e7c987 0%, #ca9949 100%);
  --ui-action-secondary: rgba(255, 252, 247, .72);
  --ui-accent: var(--gold, #b89a67);
  --ui-success: var(--success, #4f7b59);
  --ui-warning: var(--warning, #b58a42);
  --ui-error: var(--danger, #8a3d36);

  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 24px;
  --ui-radius-xl: 30px;
  --ui-shadow-card: 0 12px 32px rgba(36, 49, 59, .08);
  --ui-shadow-elevated: 0 22px 54px rgba(36, 49, 59, .13);
  --ui-focus-ring: 0 0 0 3px rgba(184, 154, 103, .25);
  --ui-control-height: 48px;
  --ui-touch-target: 44px;
}

html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-surface-page: #071c27;
  --ui-surface-card: rgba(10, 34, 46, .94);
  --ui-surface-card-solid: #0b2633;
  --ui-surface-field: rgba(8, 29, 40, .96);
  --ui-surface-elevated: #102f3d;
  --ui-surface-selected: rgba(210, 170, 91, .13);
  --ui-surface-muted: rgba(222, 232, 234, .055);
  --ui-surface-success: rgba(54, 129, 103, .17);
  --ui-surface-warning: rgba(193, 143, 57, .15);
  --ui-surface-error: rgba(170, 74, 67, .16);

  --ui-text-primary: #f5efe4;
  --ui-text-secondary: #bcc8cc;
  --ui-text-muted: #94a7ad;
  --ui-text-on-action: #10232b;

  --ui-border-default: rgba(211, 222, 224, .15);
  --ui-border-strong: rgba(211, 222, 224, .26);
  --ui-border-active: rgba(214, 175, 98, .76);
  --ui-action-secondary: rgba(12, 39, 51, .92);
  --ui-accent: #d6af62;
  --ui-success: #79b594;
  --ui-warning: #d6ae62;
  --ui-error: #e19a92;
  --ui-shadow-card: 0 14px 38px rgba(0, 0, 0, .23);
  --ui-shadow-elevated: 0 24px 64px rgba(0, 0, 0, .34);
}

/* Karten */
.ui-card {
  color: var(--ui-text-primary);
  background: var(--ui-surface-card);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-card);
}

.ui-card--compact { padding: 16px; }
.ui-card--selected {
  background: var(--ui-surface-selected);
  border-color: var(--ui-border-active);
}
.ui-card--flat { box-shadow: none; }

/* Buttons */
.ui-button {
  appearance: none;
  min-height: var(--ui-touch-target);
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ui-text-primary);
  background: var(--ui-action-secondary);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.ui-button:hover { transform: translateY(-1px); }
.ui-button:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.ui-button:disabled,
.ui-button[aria-disabled="true"] { opacity: .54; cursor: wait; transform: none; }
.ui-button--primary {
  color: var(--ui-text-on-action);
  background: var(--ui-action-primary);
  border-color: rgba(122, 84, 24, .18);
  box-shadow: 0 10px 24px rgba(157, 111, 40, .18);
}
.ui-button--primary:hover { background: var(--ui-action-primary-hover); }
.ui-button--secondary {
  border-color: var(--ui-border-default);
  background: var(--ui-action-secondary);
}
.ui-button--quiet {
  padding-inline: 8px;
  color: var(--ui-accent);
  background: transparent;
}
.ui-button--block { width: 100%; }

/* Felder */
.ui-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.ui-field__label,
.ui-field > span:first-child {
  color: var(--ui-text-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
}
.ui-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.ui-field select,
.ui-field textarea {
  width: 100%;
  min-height: var(--ui-control-height);
  padding: 11px 13px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-field);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-sm);
  font: inherit;
}
.ui-field textarea { min-height: 110px; resize: vertical; }
.ui-field input:focus,
.ui-field select:focus,
.ui-field textarea:focus {
  outline: none;
  border-color: var(--ui-border-active);
  box-shadow: var(--ui-focus-ring);
}
.ui-field__help { color: var(--ui-text-secondary); font-size: 12px; line-height: 1.45; }
.ui-field__error { color: var(--ui-error); font-size: 13px; font-weight: 750; }

/* Akkordeons und progressive Offenlegung */
.ui-accordion {
  overflow: clip;
  color: var(--ui-text-primary);
  background: var(--ui-surface-card);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-card);
}
.ui-accordion[open] { border-color: var(--ui-border-active); }
.ui-accordion > summary { min-height: var(--ui-touch-target); cursor: pointer; }
.ui-disclosure {
  border-top: 1px solid var(--ui-border-default);
  margin-top: 12px;
  padding-top: 3px;
}
.ui-disclosure > summary {
  min-height: var(--ui-touch-target);
  display: flex;
  align-items: center;
  color: var(--ui-accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary::after { content: "⌄"; margin-left: auto; }
.ui-disclosure[open] > summary::after { transform: rotate(180deg); }
.ui-disclosure__body { padding: 8px 0 4px; }

/* Status-, Lade-, Leer- und Fehlerzustände */
.ui-status {
  padding: 16px 18px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-md);
}
.ui-status--success {
  background: var(--ui-surface-success);
  border-color: rgba(79, 123, 89, .40);
  border-color: color-mix(in srgb, var(--ui-success) 44%, transparent);
}
.ui-status--warning {
  background: var(--ui-surface-warning);
  border-color: rgba(181, 138, 66, .40);
  border-color: color-mix(in srgb, var(--ui-warning) 44%, transparent);
}
.ui-status--error {
  background: var(--ui-surface-error);
  border-color: rgba(138, 61, 54, .40);
  border-color: color-mix(in srgb, var(--ui-error) 44%, transparent);
}
.ui-status__title { margin: 0; font-weight: 850; }
.ui-status__message { margin: 5px 0 0; color: var(--ui-text-secondary); line-height: 1.5; }
.ui-status__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.ui-loading {
  min-height: 148px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-elevated);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-lg);
}
.ui-loading__indicator {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  color: var(--ui-accent);
  background: var(--ui-surface-selected);
  border: 1px solid var(--ui-border-active);
}
.ui-loading p { margin: 5px 0 0; color: var(--ui-text-secondary); }

.ui-empty-state { padding: 28px; text-align: center; }
.ui-empty-state__title { margin: 0; font-size: 20px; }
.ui-empty-state__message { margin: 7px auto 0; max-width: 52ch; color: var(--ui-text-secondary); }

/* Kleine Layoutbausteine */
.ui-stack { display: grid; gap: 12px; }
.ui-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-chip {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--ui-border-default);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-muted);
  font-size: 12px;
  font-weight: 750;
}
.ui-kicker { color: var(--ui-accent); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.ui-muted { color: var(--ui-text-secondary); }

/* Behutsame Legacy-Anbindung: keine Layoutänderung, nur semantische Werte. */
.btn.btn-primary { color: var(--ui-text-on-action); background: var(--ui-action-primary); }
.btn.btn-secondary { color: var(--ui-text-primary); background: var(--ui-action-secondary); border-color: var(--ui-border-default); }
.card { --component-surface: var(--ui-surface-card); }

@media (max-width: 760px) {
  .ui-status__actions,
  .ui-actions { align-items: stretch; }
  .ui-status__actions .ui-button,
  .ui-actions .ui-button { flex: 1 1 100%; }
  .ui-loading { align-items: flex-start; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-button { transition: none; }
}


/* ==========================================================================
   UI Foundation 8.5.60 – semantische Alias-Komponenten
   ========================================================================== */
.ui-alert {
  padding: 16px 18px;
  color: var(--ui-text-primary, var(--ui-text));
  background: var(--ui-surface-muted, rgba(49, 69, 85, .055));
  border: 1px solid var(--ui-border-default, var(--ui-border));
  border-radius: var(--ui-radius-md);
}
.ui-alert--success {
  background: var(--ui-surface-success, rgba(79, 123, 89, .10));
  border-color: color-mix(in srgb, var(--ui-success, var(--ui-success-color)) 44%, transparent);
}
.ui-alert--warning {
  background: var(--ui-surface-warning, rgba(181, 138, 66, .11));
  border-color: color-mix(in srgb, var(--ui-warning, var(--ui-warning-color)) 44%, transparent);
}
.ui-alert--error {
  background: var(--ui-surface-error, rgba(138, 61, 54, .09));
  border-color: color-mix(in srgb, var(--ui-error, var(--ui-danger-color)) 44%, transparent);
}
.ui-alert__title { margin: 0; font-weight: 850; }
.ui-alert__message { margin: 5px 0 0; color: var(--ui-text-secondary, var(--ui-muted)); line-height: 1.5; }