/* AdNora V3 plattform.css: page styles for plattform.html only (loaded after site.css).
   1. Role view: sticky switcher "Für die Bauleitung | Für das Projektmanagement" and the
      [data-for="bau|pm"] blocks inside the seven function sections (js/rollen.js).
   2. Section layouts used only here (.pf-head, ink plate with roles, tour on tablets).
   Colours come from the site.css tokens only, so dark (default) and light theme both work. */

/* ================================================================ 1. Role view */
.pf-roles {
  /* Tighter rhythm inside the function block: seven sections read as one chapter. */
  --pf-y: clamp(56px, 2rem + 4.2vw, 104px);
  --pf-switch-h: 52px;
  --pf-switch-gap: clamp(16px, 2vw, 28px);
  position: relative;
}
.pf-roles > .section { padding-block: var(--pf-y); }
.pf-anchor { display: block; height: 0; }

/* Switcher: hidden without JS (nothing to switch, both role blocks are visible then). */
.pf-switch-bar { display: none; }
.js-roles .pf-switch-bar {
  position: sticky;
  top: calc(var(--header-top) + var(--header-h) + 10px);
  z-index: calc(var(--z-header) - 1);
  display: flex;
  justify-content: center;
  height: var(--pf-switch-h);
  /* The bar floats over the first section's top padding instead of taking its own band. */
  margin-top: var(--pf-switch-gap);
  margin-bottom: calc(-1 * (var(--pf-switch-h) + var(--pf-switch-gap)));
  padding-inline: var(--gutter);
  pointer-events: none;
}
.js-roles .pf-roles > .section:first-of-type {
  padding-top: calc(var(--pf-y) + var(--pf-switch-h) + var(--pf-switch-gap));
}

.pf-switch {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 100%;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: 0 0 0 1px var(--glass-ring), var(--shadow);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  pointer-events: auto;
}
.pf-switch-label {
  padding: 0 14px 0 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.pf-switch-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.pf-switch-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  box-shadow: 0 6px 16px -8px var(--accent-fill);
}
.pf-roles[data-role="pm"] .pf-switch-thumb { transform: translateX(100%); }
.pf-switch-btn {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.pf-switch-btn:hover { color: var(--text); background: var(--hover); }
.pf-switch-btn[aria-pressed="true"] { color: var(--on-accent); background: transparent; cursor: default; }
.pf-switch-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .pf-switch-thumb { transition: transform .35s var(--ease-spring); }
  .pf-switch-btn { transition: color .2s var(--ease-out), background-color .2s var(--ease-out); }
}
/* Narrow screens: no visible label (it stays the accessible name), short button texts. */
@media (max-width: 767px) {
  .pf-switch-label { display: none; }
}
@media (max-width: 639px) {
  .pf-switch-btn { padding: 0 14px; }
  .pf-switch-pre {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Role blocks: a red rule on the left, a mono label, three points. */
.pf-rolebox { max-width: 42rem; margin-top: clamp(24px, 3vw, 36px); }
.pf-role {
  padding-left: clamp(16px, 1.6vw, 20px);
  border-left: 2px solid var(--accent-fill);
}
.pf-role + .pf-role { margin-top: 28px; }
.pf-role-label {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.pf-rolebox .check-list { margin-top: 0; }

/* With JS both blocks share one grid cell (no layout jump when switching, the cell keeps the
   height of the longer block) and only the chosen one is visible. */
.js-roles .pf-rolebox { display: grid; }
.js-roles .pf-role { grid-area: 1 / 1; margin-top: 0; }
.js-roles .pf-roles:not([data-role="pm"]) [data-for="pm"],
.js-roles .pf-roles[data-role="pm"] [data-for="bau"] {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .js-roles .pf-role { transition: opacity .25s var(--ease-out), visibility 0s linear 0s; }
  .js-roles .pf-roles:not([data-role="pm"]) [data-for="pm"],
  .js-roles .pf-roles[data-role="pm"] [data-for="bau"] {
    transition: opacity .25s var(--ease-out), visibility 0s linear .25s;
  }
}

/* ================================================================ 2. Layouts */
/* Head with the shared copy left and the role block right (sections with wide visuals below). */
.pf-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
  align-items: end;
  margin-bottom: var(--space-head);
}
.pf-head-copy { grid-column: 1 / span 6; }
.pf-head-copy .lead { margin-top: clamp(16px, 2vw, 24px); }
.pf-head-side { grid-column: 8 / span 5; }
.pf-head-side .pf-rolebox { margin-top: 0; }
.pf-head-side .link-arrow { margin-top: clamp(16px, 2vw, 24px); }
@media (min-width: 860px) and (max-width: 1023px) {
  .pf-head-copy { grid-column: 1 / span 6; }
  .pf-head-side { grid-column: 7 / span 6; }
}
@media (max-width: 859px) {
  .pf-head-copy, .pf-head-side { grid-column: 1 / -1; }
  .pf-head-side .pf-rolebox { margin-top: clamp(24px, 3vw, 36px); }
}

/* Tab panels in the assistant: copy is short here, keep it centred next to the graphic
   (side by side from 768px, the shared split only from 1024px). */
#assistent .tab-panel .split-copy .lead { max-width: 44ch; }
@media (min-width: 768px) and (max-width: 1023px) {
  #assistent .tab-panel .split-copy { grid-column: 1 / span 5; }
  #assistent .tab-panel .split-media { grid-column: 6 / span 7; }
  #assistent .tab-panel .split--reverse .split-copy { grid-column: 8 / span 5; grid-row: 1; }
  #assistent .tab-panel .split--reverse .split-media { grid-column: 1 / span 7; grid-row: 1; }
}

/* Smartphone graphic in the diary split: keep it from getting too tall. */
.pf-phone { width: min(280px, 100%); margin-inline: auto; }

/* Freigaben plate: from 1024px the role block takes the right column next to the headline. */
.ink-copy .pf-rolebox { margin-top: clamp(28px, 3.4vw, 40px); }
@media (min-width: 1024px) {
  .ink-copy > .pf-rolebox {
    grid-column: 8 / span 5;
    grid-row: 1 / span 4;
    align-self: center;
    margin-top: 0;
  }
}

/* Hero jump links: fade the row out at the right edge, it scrolls sideways. */
.pf-jump {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.pf-jump::after { content: ""; flex: none; width: 40px; }

/* Tour on tablets (768 to 1023px): gfx.js gives every step its own graphic; put it next to the
   text instead of below, so the five steps take half the height. Desktop and phone unchanged. */
@media (min-width: 768px) and (max-width: 1023px) {
  #tour .gx-tour__steps { gap: 56px; }
  #tour .gx-tour__step {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 32px;
  }
  #tour .gx-tour__kicker { grid-column: 1; grid-row: 2; }
  #tour .gx-tour__title { grid-column: 1; grid-row: 3; }
  #tour .gx-tour__text { grid-column: 1; grid-row: 4; }
  #tour .gx-tour__gfx { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}

/* Tour pacing on this page: steps a little shorter (72vh in gfx.css) and a tighter gap on phones.
   The sticky laptop and the step switching work as before. */
@media (min-width: 1024px) {
  #tour .gx-tour__step { min-height: 60vh; }
}
@media (max-width: 767px) {
  #tour .gx-tour__steps { gap: 56px; }
}