/* SBVora v3 · split-flap-board: "Abfahrt · Projekte" departure board in #arbeiten */

/* With JS the board replaces the mini project grid (kept as the no-JS fallback). */
.has-flap .project-grid{display:none}

.flap{
  --fw:17px;--cw:22px;
  --board:#061a36;--tile-a:#0f2c52;--tile-b:#0b2445;--tile-ink:#f6f9fc;
  --seam:rgba(1,7,18,.9);--rule:rgba(207,223,235,.13);--label:#8ea5c3;--accent:#2dc5f8;--edge:var(--navy,#061a36);
  position:relative;z-index:2;margin:18px 0 0;padding:26px 28px 0;
  background-color:var(--board);
  background-image:linear-gradient(rgba(207,223,235,.025) 1px,transparent 1px);
  background-size:100% 4px;
  color:var(--tile-ink);border:1px solid var(--edge);
  box-shadow:0 30px 80px rgba(6,35,90,.12)
}
/* own reveal (the board must stay readable without JS, so it does not use .reveal) */
.flap.is-live{transition:opacity .9s var(--ease,ease),transform .9s var(--ease,ease)}
.flap.is-live:not(.is-seen){opacity:0;transform:translateY(34px)}
/* crop marks, thermal-label style */
.flap::before,.flap::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border:0 solid var(--accent)}
.flap::before{top:7px;left:7px;border-top-width:1px;border-left-width:1px}
.flap::after{right:7px;bottom:7px;border-right-width:1px;border-bottom-width:1px}

.flap-board{width:100%;border-collapse:collapse;border-spacing:0;table-layout:auto}

/* caption: the board title */
.flap-cap{caption-side:top;text-align:left;padding:0 0 18px;border-bottom:1px solid var(--rule)}
.flap:not(.is-live) .flap-cap .flap-src{font:400 clamp(17px,2.2vw,26px)/1.2 Michroma,"Arial Narrow",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}

/* column heads: painted labels, they do not flap */
.flap-board thead th{padding:14px 0 10px;text-align:left;vertical-align:bottom;color:var(--label);font:700 10px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--rule);white-space:nowrap}

/* body cells */
.flap-board tbody td,.flap-board tbody th{padding:10px calc(var(--fw) * 1.4) 10px 0;text-align:left;vertical-align:top;font-weight:inherit;border-bottom:1px solid var(--rule)}
.flap-board tbody .flap-proj{padding:0 calc(var(--fw) * .7) 0 0}
.flap-board .flap-type{position:relative;padding-right:calc(var(--fw) * 2.6);width:100%}
.flap-board thead .flap-nr,.flap-board thead .flap-proj,.flap-board thead .flap-area{padding-right:calc(var(--fw) * 1.4)}
.flap-row{cursor:pointer;transition:background-color .2s ease}
.flap-row:hover,.flap-row:has(.flap-go:focus-visible){background-color:rgba(45,197,248,.07)}

/* the real control: link (rows 01-03) or disclosure button (rows 04-07) */
.flap-go{--pull:calc(var(--fw) * .7);display:block;box-sizing:border-box;width:calc(100% + var(--pull));min-height:44px;margin:0 0 0 calc(var(--pull) * -1);padding:10px calc(var(--fw) * .7) 10px var(--pull);border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flap-go:focus{outline:none}
.flap-go:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* row indicator in the type cell: arrow for links, plus/minus for descriptions */
.flap-board tbody .flap-type::after{
  content:"↘";content:"↘" / "";
  position:absolute;top:10px;right:0;
  width:calc(var(--fw) * 1.6);height:calc(var(--fw) * 1.42);
  display:grid;place-items:center;box-sizing:border-box;
  border:1px solid rgba(45,197,248,.45);color:var(--accent);
  font:700 calc(var(--fw) * .78)/1 ui-monospace,Menlo,Consolas,monospace;
  transition:background-color .2s ease,color .2s ease
}
.flap-board tbody .is-toggle .flap-type::after{content:"+";content:"+" / ""}
.flap-board tbody .is-toggle.is-open .flap-type::after{content:"−";content:"−" / ""}
.flap-row:hover .flap-type::after,.flap-row:has(.flap-go:focus-visible) .flap-type::after,.flap-row.is-open .flap-type::after{background-color:var(--accent);color:var(--board)}
.flap:not(.is-live) .flap-type::after{display:none}
.flap:not(.is-live) .flap-row{cursor:default}

/* no-JS: plain readable text in the cells */
.flap:not(.is-live) tbody .flap-src{font:700 13px/1.45 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.05em;text-transform:uppercase}

/* with JS: the real text is only for assistive tech; the tiles are aria-hidden */
.flap.is-live .flap-src{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- tiles ---------- */
.fl-layer{display:block}
.fl-line{display:flex;gap:2px}
.fl-line+.fl-line{margin-top:3px}
.fl-t{
  position:relative;flex:none;display:block;overflow:hidden;
  width:calc(var(--fw) - 2px);height:calc(var(--fw) * 1.42);
  background-color:var(--tile-b);
  background-image:linear-gradient(180deg,var(--tile-a) 0,var(--tile-a) 50%,var(--tile-b) 50%,var(--tile-b) 100%);
  color:var(--tile-ink);
  font:700 calc(var(--fw) * 1.02)/calc(var(--fw) * 1.42) "Arial Narrow","Helvetica Neue",Arial,"Segoe UI",sans-serif;
  text-align:center;transition:color .2s ease
}
.fl-t::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-1px;background:var(--seam);z-index:2;pointer-events:none}
.fl-t.f0::before,.fl-t.f1::before{
  content:attr(data-p);position:absolute;left:0;right:0;top:0;height:50%;overflow:hidden;z-index:1;
  background-color:var(--tile-a);color:var(--tile-ink);
  transform-origin:50% 100%;animation:flap-leaf-a 66ms cubic-bezier(.5,0,.9,.6) forwards
}
.fl-t.f1::before{animation-name:flap-leaf-b}
@keyframes flap-leaf-a{from{transform:perspective(90px) rotateX(0deg)}to{transform:perspective(90px) rotateX(-88deg);background-color:#244a78}}
@keyframes flap-leaf-b{from{transform:perspective(90px) rotateX(0deg)}to{transform:perspective(90px) rotateX(-88deg);background-color:#244a78}}
.flap-row:hover .fl-t,.flap-row:has(.flap-go:focus-visible) .fl-t{color:var(--accent)}

/* caption tiles are larger */
.flap-cap .fl-t{
  width:calc(var(--cw) - 2px);height:calc(var(--cw) * 1.42);
  font-size:calc(var(--cw) * 1.02);line-height:calc(var(--cw) * 1.42)
}
.flap-cap .fl-line{gap:2px}

/* ---------- detail rows (04-07) ---------- */
.flap-detail td{padding:2px calc(var(--fw) * 2.6) 18px calc(var(--fw) * 3.4);border-bottom:1px solid var(--rule)}
.flap-row.is-open td,.flap-row.is-open th{border-bottom-color:transparent}
.flap-detail p{
  position:relative;max-width:64ch;margin:0;padding:10px 0 0 16px;
  border-top:1px dashed rgba(207,223,235,.22);
  color:#cfdfeb;font-size:15px;line-height:1.6
}
.flap-detail p::before{content:"";position:absolute;left:0;top:10px;bottom:2px;width:1px;background:var(--accent)}
.flap-detail:not([hidden]) p{animation:flap-feed .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes flap-feed{from{clip-path:inset(0 0 100% 0);transform:translateY(-6px)}to{clip-path:inset(0 0 0 0);transform:none}}

/* ---------- footer strip ---------- */
.flap-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;padding:16px 0 18px}
.flap-note,.flap-legend{margin:0;color:var(--label);font:700 10px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.flap-legend{display:flex;flex-wrap:wrap;gap:8px 22px}
.flap-legend span{display:inline-flex;align-items:center;gap:8px}
.flap-legend b{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid rgba(45,197,248,.45);color:var(--accent);font-weight:700;letter-spacing:0}
.flap:not(.is-live) .flap-legend{display:none}

/* ---------- dark theme: board stays dark, borders turn ice ---------- */
html[data-theme="dark"] .flap{--board:#030f1f;--tile-a:#0d2849;--tile-b:#092040;--edge:var(--ice,#cfdfeb);--rule:rgba(207,223,235,.2);--label:#a3b8d2;box-shadow:none}
html[data-theme="dark"] .flap-detail p{color:#dcebf6}

/* ---------- mid widths: tighter board padding ---------- */
@media (max-width:1120px){
  .flap{padding:22px 20px 0}
}

/* ---------- phones and small tablets: no tiles, flipping mono text that wraps ---------- */
@media screen and (max-width:860px){
  .flap{padding:20px 16px 0}
  .flap::before{top:5px;left:5px;width:10px;height:10px}
  .flap::after{right:5px;bottom:5px;width:10px;height:10px}
  .flap-cap{padding-bottom:14px}
  /* the area column is visually hidden but stays in the table for screen readers */
  .flap-board .flap-area{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  .flap-board tbody td,.flap-board tbody th{padding:12px 12px 12px 0}
  .flap-board tbody .flap-proj{padding:0 6px 0 0;width:58%}
  .flap-go{--pull:7px;padding:12px 6px 12px 7px}
  .flap-board thead .flap-nr,.flap-board thead .flap-proj{padding-right:12px}
  .flap-board .flap-type{padding-right:34px;width:auto}
  .flap-board tbody .flap-type::after{top:12px;width:24px;height:22px;font-size:13px}
  .flap-board .flap-nr{width:1%;white-space:nowrap}
  .flap.is-text tbody .fl-layer{font:700 13px/1.55 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
  .flap.is-text tbody .flap-nr .fl-layer{color:var(--label)}
  .flap.is-text tbody .fl-line{display:inline}
  .flap.is-text tbody .fl-w{white-space:nowrap}
  .flap.is-text tbody .fl-t{display:inline;position:static;width:auto;height:auto;background:none;font:inherit;line-height:inherit;transition:none}
  .flap.is-text tbody .fl-t::after,.flap.is-text tbody .fl-t::before{content:none;display:none}
  .flap.is-text tbody .fl-t.f0,.flap.is-text tbody .fl-t.f1{color:var(--accent)}
  .flap.is-text tbody .flap-proj .fl-layer{font-size:14px}
  .flap-detail td{padding:0 0 16px}
  .flap-detail p{font-size:14px;padding-left:14px}
  .flap-foot{flex-direction:column;align-items:flex-start;padding:14px 0 16px}
}
@media screen and (max-width:400px){
  .flap.is-text tbody .fl-layer{font-size:12px}
  .flap.is-text tbody .flap-proj .fl-layer{font-size:13px}
}
@media screen and (max-width:360px){
  .flap{padding-inline:12px}
  .flap-board tbody td,.flap-board tbody th{padding-right:8px}
  .flap-board tbody .flap-proj{padding-right:4px}
  .flap-go{--pull:5px;padding-right:4px;padding-left:5px}
  .flap-board .flap-type{padding-right:30px}
  .flap.is-text tbody .fl-layer,.flap.is-text tbody .flap-proj .fl-layer{font-size:11px;letter-spacing:0}
}

/* ---------- reduced motion: text is set instantly by flap.js; no leaves, no feed ---------- */
@media (prefers-reduced-motion:reduce){
  .flap.is-live,.flap.is-live:not(.is-seen){opacity:1;transform:none;transition:none}
  .fl-t::before{content:none!important;display:none!important}
  .flap-detail:not([hidden]) p{animation:none}
  .flap-row,.fl-t,.flap-type::after{transition:none}
}

/* ---------- normal page print: plain table on paper, descriptions shown ---------- */
@media print{
  .flap.is-live:not(.is-seen){opacity:1;transform:none}
  html:not(.sbv-print-only) .flap{margin-top:12px;padding:10px 12px;border:1px solid #061a36;box-shadow:none;break-inside:avoid}
  html:not(.sbv-print-only) .flap::before,html:not(.sbv-print-only) .flap::after,
  html:not(.sbv-print-only) .flap .fl-layer,html:not(.sbv-print-only) .flap-legend,
  html:not(.sbv-print-only) .flap-board tbody .flap-type::after{display:none!important}
  html:not(.sbv-print-only) .flap.is-live .flap-src{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
  html:not(.sbv-print-only) .flap .flap-src{font:700 11px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase}
  html:not(.sbv-print-only) .flap .flap-cap .flap-src{font-size:15px}
  html:not(.sbv-print-only) .flap-board .flap-area{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
  html:not(.sbv-print-only) .flap-board tbody td,html:not(.sbv-print-only) .flap-board tbody th,html:not(.sbv-print-only) .flap-go{padding:5px 10px 5px 0;min-height:0}
  html:not(.sbv-print-only) .flap-board tbody td,html:not(.sbv-print-only) .flap-board tbody th,html:not(.sbv-print-only) .flap-board thead th,html:not(.sbv-print-only) .flap-cap{border-color:#9fb0c4}
  html:not(.sbv-print-only) .flap-detail[hidden]{display:table-row}
  html:not(.sbv-print-only) .flap-detail td{padding:0 0 6px 30px}
  html:not(.sbv-print-only) .flap-detail p{padding:0;border:0;font-size:11px;animation:none}
  html:not(.sbv-print-only) .flap-detail p::before{display:none}
  html:not(.sbv-print-only) .flap-board .flap-type{padding-right:0;width:auto}
  html:not(.sbv-print-only) .flap-board tbody .flap-proj{padding:0}
  html:not(.sbv-print-only) .flap-go{text-decoration:none;margin:0;width:auto}
}