/*
  Bierkult Theme for JMOS_APP_Bierkult_Weinland_Schaffhausen_ROLES_03.
  Eigene Gestaltung: weiss, schwarz, gold und warmes Braun.
*/

:root {
  --jm-primary: #12100d;
  --jm-primary-blue: #12100d;
  --jm-primary-dark: #050403;
  --jm-accent: #c99a2e;
  --jm-accent-dark: #9b6d1d;
  --jm-accent-soft: #f6eddb;
  --jm-bg: #f8f5ef;
  --jm-surface: #ffffff;
  --jm-surface-soft: #f2eadc;
  --jm-surface-muted: #efe3cf;
  --jm-surface-glass: rgba(255, 255, 255, 0.95);
  --jm-surface-glass-strong: rgba(255, 255, 255, 0.98);
  --jm-surface-glass-soft: rgba(255, 255, 255, 0.86);
  --jm-text: #1d1812;
  --jm-muted: #66594c;
  --jm-muted-alt: #7b6b5d;
  --jm-border: rgba(45, 35, 22, 0.18);
  --jm-border-strong: #c99a2e;
  --jm-border-soft: rgba(45, 35, 22, 0.12);
  --jm-danger: #8f3024;
  --jm-danger-dark: #6d2118;
  --jm-warning: #c99a2e;

  --jm-category-jolie: #12100d;
  --jm-category-infrastructure: #4d5a4a;
  --jm-category-company: #6f4b2a;
  --jm-category-community: #6b6d35;
  --jm-category-mobility: #3e5963;
  --jm-category-event: #c99a2e;
  --jm-demo-bg: #fff3cf;
  --jm-demo-text: #4d371f;

  --jm-radius-sm: 2px;
  --jm-radius-md: 6px;
  --jm-radius-round: 100%;
  --jm-shadow-sm: 0 8px 22px rgba(18, 16, 13, 0.12);
  --jm-shadow-md: 0 16px 36px rgba(18, 16, 13, 0.16);
  --jm-shadow-lg: 0 24px 60px rgba(18, 16, 13, 0.18);
  --jm-shadow-map: 0 16px 44px rgba(18, 16, 13, 0.22);
  --jm-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jm-heading-font-family: Georgia, "Times New Roman", serif;
  --jm-nav-font-family: Inter, ui-sans-serif, system-ui, sans-serif;

  --bg: var(--jm-bg);
  --surface: var(--jm-surface);
  --surface-soft: var(--jm-surface-soft);
  --text: var(--jm-text);
  --muted: var(--jm-muted);
  --accent: var(--jm-accent);
  --accent-dark: var(--jm-accent-dark);
  --accent-soft: var(--jm-accent-soft);
  --border: var(--jm-border);
  --panel-bg: var(--jm-surface-glass);
  --panel-border: var(--jm-border);
  --field-border: var(--jm-border);
  --danger: var(--jm-danger);
  --warning: var(--jm-warning);
  --shadow: var(--jm-shadow-lg);
}

body {
  color: var(--jm-text);
  background:
    linear-gradient(135deg, rgba(201, 154, 46, 0.18), transparent 30%),
    var(--jm-bg);
  font-family: var(--jm-font-family);
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .logo, .claim, .tile h2, .side-panel-header h2, .showcase-title {
  font-family: var(--jm-heading-font-family);
  font-weight: 700;
}

.jolie-maison-brand {
  gap: 12px;
  max-width: 100%;
  min-width: 0;
  color: var(--jm-primary);
  font-family: var(--jm-nav-font-family);
  text-transform: uppercase;
}

.jolie-maison-mark {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
  border: 1px solid var(--jm-border);
  border-radius: 10px;
  background: #ffffff url("/DESIGN_SYSTEMS/bierkult/logos/bierkult-logo-source-80.png") center / 78% auto no-repeat;
  box-shadow: var(--jm-shadow-sm);
  color: transparent;
  overflow: hidden;
}

.jolie-maison-wordmark strong,
.jolie-maison-name {
  color: var(--jm-primary);
  font-family: var(--jm-heading-font-family);
  font-weight: 800;
  text-transform: none;
}

.jolie-maison-wordmark span {
  color: var(--jm-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jolie-maison-wordmark,
.jolie-maison-wordmark strong,
.jolie-maison-wordmark span,
.jolie-maison-name,
.logo,
.claim,
h1,
h2,
h3 {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.button,
.logout-button,
.tile-action,
.back,
.actions a,
button {
  line-height: 1.18;
  white-space: normal;
}

.button,
.logout-button,
.tile,
.map-menu-button,
.map-userbar,
.domain-nav,
.showcase-panel,
.marker-dialog,
.login-card,
.panel,
.toolbar,
.status-bar > div {
  border-radius: var(--jm-radius-md);
  box-shadow: var(--jm-shadow-sm);
}

.button-primary,
.login-form button,
.back {
  color: #fff;
  background: var(--jm-primary);
}

.button-primary:hover,
.button-primary:focus-visible,
.login-form button:hover,
.login-form button:focus-visible,
.back:hover,
.back:focus-visible {
  background: var(--jm-accent-dark);
}

.tile:hover,
.tile:focus-visible,
.logout-button:hover,
.logout-button:focus-visible {
  border-color: var(--jm-accent);
  background: var(--jm-accent-soft);
}

.tile-action {
  color: var(--jm-primary);
}

.domain-nav {
  border-color: var(--jm-primary);
  background: var(--jm-primary);
}

.domain-nav-item {
  color: #fff;
  border-radius: var(--jm-radius-sm);
  font-family: var(--jm-nav-font-family);
  font-weight: 800;
}

.domain-nav-icon {
  color: var(--jm-primary);
  background: var(--jm-accent);
}

.domain-nav-item:hover,
.domain-nav-item:focus-visible,
.domain-nav-item.is-active {
  border-color: var(--jm-accent);
  color: var(--jm-primary);
  background: var(--jm-accent);
}

.domain-nav-item:hover .domain-nav-icon,
.domain-nav-item:focus-visible .domain-nav-icon,
.domain-nav-item.is-active .domain-nav-icon {
  color: #fff;
  background: var(--jm-primary);
}

.showcase-panel,
.map-search-panel,
.map-userbar,
.map-menu-button,
.map-brand-lockup {
  border-color: var(--jm-border);
  background: var(--jm-surface-glass);
}

.showcase-panel {
  border-left: 3px solid var(--jm-accent);
}

.side-panel-header {
  border-bottom-color: var(--jm-border);
  background: var(--jm-surface-soft);
}

.showcase-handle {
  color: #fff;
  background: var(--jm-primary);
}

.showcase-handle:hover,
.showcase-handle:focus-visible {
  background: var(--jm-accent-dark);
}

.map-brand-lockup .jolie-maison-mark {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.map-brand-lockup .jolie-maison-wordmark strong {
  color: var(--jm-primary);
}

.dot-brewery,
.marker-brewery {
  background: #12100d;
}

.dot-gastronomy,
.marker-gastronomy,
.marker-producer,
.marker-farm_shop {
  background: #6f4b2a;
}

.marker-winery,
.marker-distillery {
  background: #785233;
}

.marker-association,
.marker-expert {
  background: #6b6d35;
}

.marker-tourism,
.marker-mobility {
  background: #3e5963;
}

.dot-event,
.marker-event {
  background: var(--jm-accent);
}

.marker-event .jmos-marker-icon,
.marker-event::after {
  color: var(--jm-primary);
}

.jmos-marker.marker-demo {
  border-color: var(--jm-demo-bg);
  outline: 3px solid rgba(201, 154, 46, 0.46);
  background: var(--jm-category-event);
}

@media (max-width: 680px) {
  .jolie-maison-mark {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .showcase-panel {
    border-left: 0;
    border-top: 3px solid var(--jm-accent);
  }
}

[hidden] {
  display: none !important;
}

/* ROLES_03 Bierkult background package */
:root {
  --bk-page-base: #fbf6ec;
  --bk-page-warm: #f1dfbf;
  --bk-cream: #fffaf0;
  --bk-gold-line: rgba(201, 154, 46, 0.34);
  --bk-brown-line: rgba(111, 75, 42, 0.16);
  --bk-panel: rgba(255, 255, 255, 0.88);
  --bk-panel-strong: rgba(255, 255, 255, 0.96);
  --bk-panel-soft: rgba(255, 250, 240, 0.86);
  --bk-soft-shadow: 0 14px 38px rgba(31, 24, 15, 0.10);
  --bk-card-shadow: 0 12px 28px rgba(31, 24, 15, 0.09);
  --bk-focus-ring: rgba(201, 154, 46, 0.23);
  --bk-background-image: url("/DESIGN_SYSTEMS/bierkult/backgrounds/start-background.webp");
  --bk-background-position: center center;

  --jm-shadow-sm: var(--bk-card-shadow);
  --jm-shadow-md: var(--bk-soft-shadow);
  --jm-shadow-lg: var(--bk-soft-shadow);
  --jm-shadow-map: 0 14px 34px rgba(31, 24, 15, 0.14);
  --shadow: var(--bk-soft-shadow);
}

body:has(.login-page) {
  --bk-background-image: url("/DESIGN_SYSTEMS/bierkult/backgrounds/login-background.webp");
  --bk-background-position: center center;
}

body:has(.page) {
  --bk-background-image: url("/DESIGN_SYSTEMS/bierkult/backgrounds/start-background.webp");
  --bk-background-position: center center;
}

body:has(.admin-shell) {
  --bk-background-image: url("/DESIGN_SYSTEMS/bierkult/backgrounds/admin-background.webp");
  --bk-background-position: center center;
}

body:has(main .actions a[href='../map/index.html']) {
  --bk-background-image: url("/DESIGN_SYSTEMS/bierkult/backgrounds/assistant-background.webp");
  --bk-background-position: center center;
}

body:has(.assistant-shell) {
  --bk-background-image: url("/DESIGN_SYSTEMS/bierkult/backgrounds/assistant-background.webp");
  --bk-background-position: center center;
}

body:has(.docs) {
  --bk-background-image: url("/DESIGN_SYSTEMS/bierkult/backgrounds/docs-background.webp");
  --bk-background-position: center center;
}

body:has(.login-page),
body:has(.page),
body:has(.admin-shell),
body:has(main .actions a[href='../map/index.html']),
body:has(.assistant-shell),
body:has(.docs) {
  min-height: 100dvh;
  background-color: var(--bk-page-base);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(251, 246, 236, 0.48) 42%, rgba(241, 223, 191, 0.54) 100%),
    linear-gradient(90deg, rgba(255, 250, 240, 0.66) 0%, rgba(255, 250, 240, 0.30) 43%, rgba(255, 250, 240, 0.14) 100%),
    linear-gradient(135deg, rgba(201, 154, 46, 0.10), transparent 42%),
    var(--bk-background-image);
  background-position: center, center, center, var(--bk-background-position);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.brand,
.admin-header,
body > main:not(.map-shell):not(.login-page):not(.admin-shell) > header {
  border: 1px solid var(--bk-brown-line);
  border-top: 3px solid var(--jm-accent);
  border-radius: var(--jm-radius-md);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 250, 240, 0.84)),
    linear-gradient(90deg, rgba(201, 154, 46, 0.12), transparent 62%);
  box-shadow: var(--bk-soft-shadow);
}

.brand,
.admin-header {
  padding: 24px;
}

body > main.assistant-shell > header {
  padding: clamp(20px, 4vw, 32px);
}

.tile,
.doc,
.panel,
.toolbar,
.status-bar > div,
.login-card,
body > main:not(.map-shell):not(.login-page):not(.admin-shell) {
  border-color: var(--bk-brown-line);
  background:
    linear-gradient(180deg, var(--bk-panel-strong), var(--bk-panel)),
    var(--jm-surface);
  box-shadow: var(--bk-card-shadow);
  backdrop-filter: blur(8px);
}

.tile,
.doc,
.login-card,
.panel,
.toolbar,
.status-bar > div {
  border-top: 3px solid rgba(201, 154, 46, 0.34);
}

.jolie-maison-mark {
  border-color: rgba(201, 154, 46, 0.38);
  background-color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 18px rgba(31, 24, 15, 0.08);
}

.logo {
  color: var(--jm-primary);
}

.claim,
h1 {
  color: var(--jm-primary);
}

.prototype-note,
.user-badge,
.admin-user,
.docs .doc span,
.intro,
.welcome,
.demo-note,
.login-hint {
  color: var(--jm-muted);
}

.tile-icon {
  color: var(--jm-primary);
  border: 1px solid var(--bk-gold-line);
  background:
    linear-gradient(135deg, rgba(201, 154, 46, 0.19), rgba(255, 250, 240, 0.92));
}

.logout-button,
.admin-user a,
.button,
.back,
.actions a,
input,
select,
textarea {
  border-color: var(--bk-brown-line);
}

.button-primary,
.login-form button,
.back,
.actions a:not(.secondary) {
  color: #fff;
  background: var(--jm-primary);
}

.button-primary:hover,
.button-primary:focus-visible,
.login-form button:hover,
.login-form button:focus-visible,
.back:hover,
.back:focus-visible,
.actions a:not(.secondary):hover,
.actions a:not(.secondary):focus-visible {
  background: var(--jm-accent-dark);
}

.actions a.secondary {
  color: var(--jm-primary);
  background: rgba(255, 255, 255, 0.86);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--bk-focus-ring);
  outline-offset: 2px;
}

.admin-shell .status-bar > div,
.admin-shell .toolbar,
.admin-shell .panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 240, 0.86)),
    var(--jm-surface);
}

.change-entry,
.poi-item {
  border-color: var(--jm-border-soft);
  background: rgba(255, 250, 240, 0.72);
}

.login-page {
  padding:
    max(clamp(20px, 4vw, 44px), env(safe-area-inset-top, 0px))
    max(clamp(20px, 4vw, 44px), env(safe-area-inset-right, 0px))
    max(clamp(20px, 4vw, 44px), env(safe-area-inset-bottom, 0px))
    max(clamp(20px, 4vw, 44px), env(safe-area-inset-left, 0px));
}

.login-shell {
  width: min(980px, 100%);
  grid-template-columns: minmax(0, 0.9fr) minmax(310px, 390px);
}

.login-page .brand {
  align-content: center;
  gap: 16px;
  min-height: 420px;
}

.login-page .logo,
.login-page .welcome {
  display: none;
}

.login-page .claim {
  max-width: 470px;
  font-size: clamp(1.65rem, 4vw, 2.55rem);
}

.login-card {
  gap: 16px;
  padding: clamp(20px, 3vw, 28px);
}

.login-card h1 {
  font-size: clamp(1.25rem, 2.4vw, 1.48rem);
}

.login-hint {
  font-size: 0.8rem;
}

footer {
  background: rgba(255, 250, 240, 0.70);
  backdrop-filter: blur(8px);
}

@media (max-width: 1023px) {
  body > main:not(.map-shell):not(.login-page):not(.admin-shell) {
    width: min(100% - 32px, 860px);
  }

  .brand,
  .admin-header,
  body > main:not(.map-shell):not(.login-page):not(.admin-shell) > header {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .login-shell {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .login-page .brand {
    min-height: auto;
  }

  .login-page .claim {
    font-size: clamp(1.4rem, 8vw, 2rem);
    line-height: 1.08;
  }
}

@media (max-width: 700px) {
  .brand,
  .admin-header {
    padding: 18px;
  }

  body > main:not(.map-shell):not(.login-page):not(.admin-shell) {
    width: min(100% - 28px, 760px);
    padding: 24px;
  }
}

@media (max-width: 575px) {
  .jolie-maison-brand {
    gap: 10px;
  }

  .jolie-maison-mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .jolie-maison-wordmark strong {
    font-size: 0.98rem;
    line-height: 1.05;
  }

  .jolie-maison-wordmark span {
    font-size: 0.66rem;
    line-height: 1.2;
  }

  .login-page {
    align-items: start;
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      max(14px, env(safe-area-inset-right, 0px))
      max(18px, env(safe-area-inset-bottom, 0px))
      max(14px, env(safe-area-inset-left, 0px));
  }

  .login-card,
  .tile,
  .doc,
  .panel {
    padding: 18px;
  }

  .login-card h1 {
    font-size: 1.18rem;
  }

  .login-hint,
  .demo-note,
  .registration-note {
    font-size: 0.84rem;
  }

  body > main:not(.map-shell):not(.login-page):not(.admin-shell) {
    width: min(100% - 24px, 760px);
    padding: 18px;
  }

  .actions,
  .public-actions {
    width: 100%;
  }

  body:not(:has(.map-shell)) .actions a,
  body:not(:has(.map-shell)) .back,
  body:not(:has(.map-shell)) .button,
  body:not(:has(.map-shell)) button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 375px) {
  .brand,
  .admin-header {
    padding: 16px;
  }

  .login-page .claim,
  .claim {
    font-size: 1.35rem;
  }

  .logo {
    font-size: clamp(2.2rem, 14vw, 3rem);
  }

  body > main:not(.map-shell):not(.login-page):not(.admin-shell) {
    width: min(100% - 20px, 760px);
    padding: 16px;
  }
}