/* BARTOSEK V15
   Area selection is a persistent context control. It is deliberately styled
   differently from the page navigation so "where am I?" and "which page?"
   are never communicated by the same underline. */

:root{
  --v15-a:var(--a-accent,#e62b1e);
  --v15-b:var(--b-header-accent,var(--b-accent,#236b89));
  --v15-context:var(--ink,#111);
  --v15-context-soft:rgba(17,17,17,.055);
}

body[data-context-world="a"]{--v15-context:var(--v15-a);--v15-context-soft:color-mix(in srgb,var(--v15-a) 8%,#fff)}
body[data-context-world="b"]{--v15-context:var(--v15-b);--v15-context-soft:color-mix(in srgb,var(--v15-b) 9%,#fff)}

.v15-context-switch{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
  padding:4px;
  border:1px solid color-mix(in srgb,var(--v15-context) 24%,#ddd);
  background:rgba(255,255,255,.72);
}
.v15-context-label{
  padding:0 9px 0 7px;
  color:var(--mute,#727272);
  font-family:"Lausanne",sans-serif;
  font-size:8px;
  line-height:1;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.v15-context-options{display:grid;grid-template-columns:auto auto;gap:3px;min-width:0}
.v15-context-option{
  display:flex!important;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 9px!important;
  border:0!important;
  background:transparent;
  color:var(--ink,#111)!important;
  text-decoration:none!important;
  line-height:1.08;
  transition:background-color .24s ease,color .24s ease,transform .24s ease;
}
.v15-context-option::after{display:none!important}
.v15-context-option:hover{background:color-mix(in srgb,var(--v15-context) 8%,#fff);transform:translateY(-1px)}
.v15-context-option[data-selected="true"]{background:var(--v15-context);color:#fff!important;font-weight:500}
.v15-context-code{
  display:inline-grid;
  place-items:center;
  width:19px;
  height:19px;
  flex:0 0 19px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:8px;
  font-weight:500;
}
.v15-context-name{white-space:nowrap}
.v15-mobile-context{display:none}

/* Homepage: the context block sits between the brand and ordinary pages. */
@media (min-width:1381px){
  .nav-compact-inner{grid-template-columns:minmax(198px,244px) minmax(0,1fr)!important}
  .nav-compact-links{gap:clamp(8px,.85vw,16px)!important}
  .nav-compact-links>.v15-context-switch{margin-right:clamp(2px,.3vw,7px)}
  .nav-compact-links .v15-context-option{font-size:clamp(10px,.72vw,12px)!important}

  /* Subpages use the same visual grammar without changing their calm height. */
  body.legacy-subnav .row{gap:clamp(16px,2vw,30px)}
  body.legacy-subnav .brand{flex:0 0 auto}
  body.legacy-subnav .navlinks{flex:1 1 auto;flex-wrap:nowrap;gap:clamp(8px,.85vw,16px)}
  body.legacy-subnav .navlinks>.v15-context-switch{margin-right:clamp(1px,.3vw,5px)}
  body.legacy-subnav .v15-context-option{font-size:clamp(10px,.72vw,12px)!important}
  body.legacy-subnav .navlinks>a:not(.nav-cta){font-size:clamp(11px,.88vw,14px)}

  /* The active page keeps an underline; the active context uses the filled
     segment above. Global destinations deliberately remain black. */
  body.legacy-subnav .navlinks>a.current:not(.nav-cta),
  body.legacy-subnav .navlinks>a[aria-current="page"]:not(.nav-cta){font-weight:500}
  body.legacy-subnav .navlinks>a[href*="#unternehmen"],
  body.legacy-subnav .navlinks>a[href*="#company"],
  body.legacy-subnav .navlinks>a[href*="ansicht=unternehmen"],
  body.legacy-subnav .navlinks>a[href*="ansicht=company"],
  body.legacy-subnav .navlinks>a[href^="Investoren"]{--v15-page-accent:var(--ink,#111)}
  body.legacy-subnav .navlinks .nav-cta.current,
  body.legacy-subnav .navlinks .nav-cta[aria-current="page"]{color:#fff!important}
}

@media (min-width:1381px) and (max-width:1520px){
  .v15-context-label{display:none}
  .v15-context-option{gap:5px;padding-inline:7px!important}
  .v15-context-code{width:17px;height:17px;flex-basis:17px;font-size:7px}
  .nav-compact-links .v15-context-option{font-size:9.5px!important}
  body.legacy-subnav .v15-context-option{font-size:9.5px!important}
  body.legacy-subnav .navlinks{gap:7px}
  body.legacy-subnav .navlinks>a:not(.nav-cta){font-size:11px}
  body.legacy-subnav .navlinks .nav-cta{padding:10px 13px}
}

/* The legacy mobile dropdown now opens with the same A/B context control.
   It is a compact selector, not two more page links. */
@media (max-width:1380px){
  body.legacy-subnav .v15-mobile-context{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
    width:100%;
    border-top:1px solid var(--line,#ddd);
    background:#fff;
  }
  body.legacy-subnav .v15-mobile-context .v15-context-option{
    justify-content:center;
    min-height:48px;
    padding:8px 12px!important;
    border-radius:0;
    font-size:12px!important;
  }
  body.legacy-subnav .v15-mobile-context .v15-context-option+.v15-context-option{border-left:1px solid var(--line,#ddd)!important}
  body.legacy-subnav .v15-mobile-context .v15-context-name{white-space:normal;text-align:center}

  body.legacy-subnav .navlinks.open>.v15-context-switch{
    display:none!important;
  }
  body.legacy-subnav .v15-context-label{display:block;padding:4px 4px 1px}
  body.legacy-subnav .v15-context-options{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:5px}
  body.legacy-subnav .navlinks.open .v15-context-option{
    display:flex!important;
    justify-content:flex-start;
    min-height:46px;
    padding:10px 11px!important;
    font-size:12px!important;
  }
  body.legacy-subnav .v15-context-name{white-space:normal}
  body.legacy-subnav .navlinks.open>a:not(.nav-cta){padding-inline:24px}

  /* Homepage already owns a full-width A/B segmented control. Give it the
     same selected-state language as desktop without adding another element. */
  .nav-seg{position:relative}
  .nav-seg-btn{transition:background-color .24s ease,color .24s ease}
}

/* Unified project overview ------------------------------------------------ */
.project-filter-bar{
  position:relative;
  z-index:3;
  padding:0 0 clamp(32px,4.2vw,58px);
  background:var(--paper,#fff);
}
.project-filter-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 18px;
  border:1px solid var(--line,#ddd);
  background:#fff;
}
.project-filter-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
  color:var(--mute,#727272);
  font-family:"Lausanne",sans-serif;
  font-size:10px;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.project-filter-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--v15-context)}
.project-filter-options{display:grid;grid-template-columns:auto auto auto;gap:4px;padding:4px;background:#f1f1ef}
.project-filter-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:9px 15px;
  border:0;
  background:transparent;
  color:var(--ink,#111);
  font:inherit;
  font-size:12px;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s,color .2s,transform .2s;
}
.project-filter-button:hover{background:rgba(255,255,255,.7)}
.project-filter-button[aria-pressed="true"]{background:var(--v15-context);color:#fff}
.project-filter-count{font-family:"Lausanne",sans-serif;font-size:9px;opacity:.68}

/* The filter and the persistent area context are intentionally independent. */
body[data-project-filter] .project-context-variant,
body[data-project-filter] .project-context-section{display:none!important}
body[data-project-filter="all"] .project-context-variant[data-context="neutral"],
body[data-project-filter="a"] .project-context-variant[data-context="a"],
body[data-project-filter="b"] .project-context-variant[data-context="b"]{display:block!important}
body[data-project-filter="all"] .project-context-section,
body[data-project-filter="a"] .project-context-section[data-project-world="a"],
body[data-project-filter="b"] .project-context-section[data-project-world="b"]{display:block!important}
body[data-project-filter] .project-context-variant,
body[data-project-filter] .project-context-section{animation:v15-project-in .38s cubic-bezier(.2,.7,.3,1) both}
@keyframes v15-project-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .project-filter-bar{padding-bottom:34px}
  .project-filter-inner{align-items:stretch;flex-direction:column;padding:13px;gap:12px}
  .project-filter-title{padding:2px 3px}
  .project-filter-options{grid-template-columns:1fr 1fr}
  .project-filter-button{min-height:44px;padding-inline:10px;white-space:normal;line-height:1.15}
  .project-filter-button:first-child{grid-column:1 / -1}
}

@media (max-width:390px){
  .project-filter-button{font-size:11px}
  .project-filter-count{display:none}
}

@media (prefers-reduced-motion:reduce){
  .v15-context-option,.project-filter-button{transition:none}
  body[data-project-filter] .project-context-variant,
  body[data-project-filter] .project-context-section{animation:none}
}