/* EPD² PROBNIK — the header on a phone (Owner report 2026-10-01: the header
   filled the whole first screen of a smartphone).

   This stylesheet is linked with the width it applies to (the `media` of
   its <link>, written by scripts/probnik_site/mobile_menu.py): below 1024px
   on the party pages and in the member area, below 1161px on the Civic OS
   pages. Above that width nothing here applies and the header is the
   desktop header as before.

   One line: the logo, "Bürger-Login" and "Menü". "Menü" opens a panel below
   the line with the navigation and the actions; in the member area the
   panel is the section menu (the sidebar), with the identity and
   "Abmelden" on top. Without JavaScript "Menü" is a link to the panel
   (`:target`) and "Schließen" a link that closes it; each is a step in the
   browser's history, so "Zurück" after "Schließen" shows the open menu
   once more (the limit of a menu without a script); with JavaScript
   (menu.js) it is a button (aria-expanded), Escape closes, Tab stays in the
   menu, the page behind it holds still. */

:root {
  --pbnk-bar: 60px;
}

/* Every anchor of a page lands below the bar, not behind it. */
html {
  scroll-padding-top: calc(var(--pbnk-bar) + 12px);
}
.section,
[data-pbnk-land-initiatives],
.pbnk-branch,
.pbnk-branch .card[id] {
  scroll-margin-top: 0;
}

/* --- The bar ------------------------------------------------------------ */

.header.pbnk-hdr {
  height: var(--pbnk-bar);
  min-height: 0;
  padding: 0 12px 0 16px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  /* Opaque, and without the blur: a filtered header would hold the fixed
     panel inside itself instead of the screen. */
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pbnk-hdr.pbnk-bar,
.pbnk-hdr .pbnk-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.pbnk-bar > :first-child {
  margin-right: auto;
  min-width: 0;
}
.pbnk-hdr .logo {
  font-size: 24px;
  line-height: 1;
}
.pbnk-hdr .brand-mark {
  font-size: 24px;
}
/* The tagline only where the bar has room for it. */
.pbnk-hdr .identity-line,
.pbnk-hdr .brand-sub {
  display: none !important;
}
@media (min-width: 560px) {
  .pbnk-hdr .identity-line {
    display: block !important;
    font-size: 11px !important;
    margin-top: 4px !important;
  }
  .pbnk-hdr .brand-sub {
    display: inline !important;
  }
}
/* In the member area the identity is shown in the menu (menu.js moves it
   there); the bar keeps the logo and "Menü". */
.pbnk-hdr-member > [data-pbnk-identity] {
  display: none !important;
}

.pbnk-menu-toggle,
.pbnk-menu-close,
.pbnk-bar-action {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #fff;
  color: #1f1f1f;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pbnk-bar-action {
  font-weight: 500;
}
.pbnk-menu-toggle,
.pbnk-menu-close {
  border-color: #2c2c2c;
  background: #2c2c2c;
  color: #fff;
}
.pbnk-menu-toggle:focus-visible,
.pbnk-menu-close:focus-visible,
.pbnk-bar-action:focus-visible,
.pbnk-menu a:focus-visible,
.pbnk-menu button:focus-visible {
  outline: 3px solid #5c3d3d;
  outline-offset: 2px;
}
/* Keep the immediate login on narrow phones as well as in the PWA. */
@media (max-width: 389px) {
  :root { --pbnk-bar: max(44px,15.384615vw); }
  .header.pbnk-hdr { padding: 0 3.076923vw 0 4.102564vw; }
  .pbnk-hdr.pbnk-bar,
  .pbnk-hdr .pbnk-bar { gap: 2.051282vw; }
  .pbnk-hdr .logo,
  .pbnk-hdr .brand-mark { font-size: 6.153846vw; }
  .pbnk-menu-toggle,
  .pbnk-menu-close,
  .pbnk-bar-action {
    display: inline-flex;
    min-height: 11.282051vw;
    padding: 0 3.076923vw;
    font-size: 3.846154vw;
    gap: 2.051282vw;
  }
}

/* Three lines; a cross while the menu is open. Drawn with borders, so that
   a forced-colours (high contrast) display draws them too. */
.pbnk-menu-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid;
}
.pbnk-menu-icon::before,
.pbnk-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 0;
  border-top: 2px solid;
}
.pbnk-menu-icon::before {
  top: -8px;
}
.pbnk-menu-icon::after {
  top: 4px;
}
@media (max-width:389px) {
  .pbnk-menu-icon,
  .pbnk-menu-icon::before,
  .pbnk-menu-icon::after { width:4.615385vw; }
  .pbnk-menu-icon::before { top:-2.051282vw; }
  .pbnk-menu-icon::after { top:1.025641vw; }
}
.pbnk-menu-icon-close,
[aria-expanded="true"] > .pbnk-menu-icon {
  border-top-color: transparent;
}
.pbnk-menu-icon-close::before,
[aria-expanded="true"] > .pbnk-menu-icon::before {
  top: -2px;
  transform: rotate(45deg);
}
.pbnk-menu-icon-close::after,
[aria-expanded="true"] > .pbnk-menu-icon::after {
  top: -2px;
  transform: rotate(-45deg);
}

/* The number of unread conversations, also on the closed menu (menu.js). */
.pbnk-menu-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #fff;
  color: #1f1f1f;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.pbnk-menu-count[hidden] {
  display: none;
}
.pbnk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Without JavaScript: "Menü" while the panel is closed, "Schließen" while
   it is open. With JavaScript the button says which (aria-expanded). */
.pbnk-menu-close,
.pbnk-js .pbnk-menu-close {
  display: none;
}
html:not(.pbnk-js):has(#pbnk-menu:target) .pbnk-menu-toggle {
  display: none;
}
html:not(.pbnk-js):has(#pbnk-menu:target) .pbnk-menu-close {
  display: inline-flex;
}

/* --- The panel ---------------------------------------------------------- */

html .pbnk-menu {
  display: none;
  position: fixed;
  top: var(--pbnk-bar);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  box-sizing: border-box;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-top: 1px solid #e2e0d8;
  background: #fff;
  color: #1f1f1f;
  text-align: left;
}
html:not(.pbnk-js) .pbnk-menu:target,
html .pbnk-menu.pbnk-open {
  display: block;
  animation: pbnk-menu-in 0.16s ease-out;
}
@keyframes pbnk-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html .pbnk-menu {
    animation: none !important;
  }
}
/* The page behind the open menu holds still. Only the root: the root's
   overflow is the screen's, so the page keeps its place and the bar stays
   on top of it. Locking <body> as well would make the body a scroll box of
   its own; the sticky bar would then stick inside a body that never
   scrolls and, on a page scrolled down, leave the screen together with
   "Menü" / "Schließen" (review 2026-10-01). */
html.pbnk-menu-open,
html:not(.pbnk-js):has(#pbnk-menu:target) {
  overflow: hidden;
}

/* The party navigation: one link per line, large enough for a thumb. */
html .pbnk-menu nav {
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0 !important;
  font-size: 18px;
  font-weight: 500;
  white-space: normal;
}
.pbnk-menu-wrap nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 6px 4px;
  border-bottom: 1px solid #e2e0d8;
  overflow-wrap: anywhere;
}
.pbnk-menu .header-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 24px 0 0;
}
.pbnk-menu .header-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px !important;
  font-size: 17px;
  text-align: center;
}

/* The Civic OS navigation: the groups open, their links below them. */
html .pbnk-menu .nav-menu {
  color: #1a1a1a;
  font-size: 17px;
}
.pbnk-menu .nav-item {
  position: static;
}
.pbnk-menu .nav-link,
.pbnk-menu .nav-trigger,
.pbnk-menu .pbnk-nav-label {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
}
/* A group without a page of its own: its list is open in the panel, so its
   name is a label there; the desktop's button for it would do nothing. */
.pbnk-menu button.nav-trigger {
  display: none;
}
.pbnk-menu .chevron {
  display: none;
}
.pbnk-menu .dropdown {
  position: static;
  min-width: 0;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}
.pbnk-menu .dropdown-inner {
  padding: 0 0 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pbnk-menu .dropdown-inner a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 4px;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  color: #5f6672;
  font-size: 16px;
}
.pbnk-menu .nav-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 24px 0 0;
}
.pbnk-menu .nav-menu > .login {
  margin-top: 24px;
}
.pbnk-menu .nav-menu > .login,
.pbnk-menu .nav-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 17px !important;
  border: 1px solid #d7dae0 !important;
  border-radius: 999px;
  font-size: 17px;
}

/* The member area: the section menu, with the identity on top. */
.sidebar.pbnk-menu nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 0 2px;
  padding: 10px 14px;
  font-size: 17px;
}
.sidebar.pbnk-menu nav a.pbnk-subnav {
  margin-left: 16px;
}
.pbnk-menu .pbnk-menu-identity {
  display: block;
  margin: 8px 0 16px;
  padding: 16px;
  border: 1px solid #e2e0d8;
  border-radius: 12px;
  background: #f8f7f4;
}
.pbnk-menu-identity:empty {
  display: none !important;
}
.pbnk-menu-identity [data-pbnk-identity] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px !important;
}
.pbnk-menu-identity [data-pbnk-identity] > .avatar {
  order: 1;
  flex: none;
}
.pbnk-menu-identity [data-pbnk-identity] > div:not(.avatar) {
  order: 2;
  flex: 1 1 0;
  min-width: 0;
  text-align: left !important;
  overflow-wrap: anywhere;
}
.pbnk-menu-identity [data-pbnk-verification] {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pbnk-menu-identity .status-live {
  order: 4;
  flex: 1 0 100%;
}
.pbnk-menu-identity [data-pbnk-logout] {
  order: 5;
  flex: 1 0 100%;
  min-height: 48px;
}

/* Compact opened phone menu; keep the header controls unchanged. */
@media (max-width:559px) {
  html .pbnk-menu { padding:4px 12px calc(16px + env(safe-area-inset-bottom,0px)); }
  html .pbnk-menu nav,
  html .pbnk-menu .nav-menu { font-size:16px; line-height:1.3; }
  .pbnk-menu-wrap nav a,
  .sidebar.pbnk-menu nav a,
  .pbnk-menu .nav-link,
  .pbnk-menu .nav-trigger,
  .pbnk-menu .pbnk-nav-label,
  .pbnk-menu .dropdown-inner a {
    box-sizing:border-box; min-height:44px; padding:8px 4px; font-size:16px; line-height:1.3;
  }
  .sidebar.pbnk-menu nav a { margin-bottom:0; padding-inline:10px; }
  .pbnk-menu .header-actions,
  .pbnk-menu .nav-actions { gap:8px; margin-top:12px; }
  .pbnk-menu .header-actions .btn,
  .pbnk-menu .nav-menu > .login,
  .pbnk-menu .nav-actions a {
    box-sizing:border-box; min-height:44px; padding:8px 12px!important; font-size:16px; line-height:1.3;
  }
  .pbnk-menu .pbnk-menu-identity { margin:4px 0 8px; padding:10px; }
}
@media (max-width:389px) {
  html .pbnk-menu { padding:1.025641vw 3.076923vw calc(4.102564vw + env(safe-area-inset-bottom,0px)); }
  html .pbnk-menu nav,
  html .pbnk-menu .nav-menu,
  .pbnk-menu-wrap nav a,
  .sidebar.pbnk-menu nav a,
  .pbnk-menu .nav-link,
  .pbnk-menu .nav-trigger,
  .pbnk-menu .pbnk-nav-label,
  .pbnk-menu .dropdown-inner a,
  .pbnk-menu .header-actions .btn,
  .pbnk-menu .nav-menu > .login,
  .pbnk-menu .nav-actions a { font-size:4.102564vw; }
  .pbnk-menu-wrap nav a,
  .sidebar.pbnk-menu nav a,
  .pbnk-menu .nav-link,
  .pbnk-menu .nav-trigger,
  .pbnk-menu .pbnk-nav-label,
  .pbnk-menu .dropdown-inner a,
  .pbnk-menu .header-actions .btn,
  .pbnk-menu .nav-menu > .login,
  .pbnk-menu .nav-actions a { min-height:11.282051vw; padding-block:2.051282vw!important; }
  .pbnk-menu .header-actions,
  .pbnk-menu .nav-actions { gap:2.051282vw; margin-top:3.076923vw; }
}