/* EBBS_rail theme 2.1.0 (26.10.2026): components for the pages Vorgängerprojekt, Pilotprojekte and Aktuelles.
   Taken over unchanged from the agreed prototype (v216, 15.10.2026); only the WordPress-specific
   additions at the end are new. Loaded on every page; every rule hangs on its own class. */

/* ===== 1. Vorgängerprojekt: diagrams, Toolbox profiles, Fallstudien map, lightbox (prototype bewertungssystem.html) ===== */
/* ---------- 09.10.: page built only from the layout system in
       ebbs-system.css (split / media / thirds + cards). What stays here is
       page-specific behaviour: the image sliders and the lightbox. ---------- */

  /* ---------- slider (Fallstudien photos, Ergebnisse charts) ---------- */
  .vp-slider{ position:relative; }
  .vp-frame{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:#fff; aspect-ratio:3 / 2; }
  .vp-slider.wide .vp-frame{ aspect-ratio:16 / 7; max-height:540px; width:100%; }
  @media (max-width:720px){ .vp-slider.wide .vp-frame{ aspect-ratio:4 / 3; } }
  .vp-track{ position:absolute; inset:0; display:flex; transition:transform .5s cubic-bezier(.65,0,.35,1); }
  .vp-slide{ flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; padding:10px; cursor:zoom-in; }
  .vp-slide img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
  .vp-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.92); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--ink); padding:0; transition:border-color .15s ease, color .15s ease;
  }
  .vp-arrow:hover{ border-color:var(--red); color:var(--red); }
  .vp-arrow svg{ width:18px; height:18px; }
  .vp-arrow.prev{ left:10px; } .vp-arrow.next{ right:10px; }
  /* caption UNDER the frame (charts = MEDIA rule) */
  .vp-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-top:12px; }
  .vp-cap{ margin:0; font-size:var(--fs-meta); line-height:1.55; color:var(--ink-soft); }
  .vp-cap .vtag{ display:block; font-size:var(--fs-meta); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:0 0 2px; }
  .vp-cap .vname{ font-size:var(--fs-small); color:var(--ink); font-weight:600; }
  .vp-cap .vcred{ display:block; font-size:var(--fs-meta); color:var(--ink-soft); margin-top:2px; }
  .vp-dots{ display:flex; gap:7px; flex:0 0 auto; padding-top:4px; }
  .vp-dot{ width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink-soft); background:transparent; padding:0; cursor:pointer; }
  .vp-dot.active{ background:var(--red); border-color:var(--red); }
  .m-frame.zoomable{ cursor:zoom-in; }
  .vp-slider.wide .vp-slide{ align-items:flex-end; }   /* charts of different shapes all sit on their caption */
  .vp-count{ margin-left:auto; padding-top:1px; font-size:var(--fs-meta); color:var(--ink-soft); letter-spacing:.04em; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .vp-slide:focus-visible{ outline:2px solid var(--red); outline-offset:-4px; }
  /* diagrams and charts sit directly on the page: no white card (images are transparent PNGs, *-t.png);
     the big view (lightbox) still shows them on white */
  .m-media .m-frame{ background:transparent; border:0; padding:0; }
  /* Toolbox (14.10.): both profile strips are rebuilt on one identical panel grid (3 equal panels, equal gaps)
     and fill the whole 2/3 column, so the I- and C-profiles line up panel by panel; the gap between the
     two rows equals the gap between the panels (56 of 1102 px = 5.08 % of the width) */
  .toolbox-vp .m-media .m-frame.m-frame--native{ max-width:none; }
  .toolbox-vp .m-media .m-frame + .m-frame{ margin-top:5.08%; }
  .toolbox-vp .tb-pair img{ display:block; width:100%; height:auto; }
  .toolbox-vp .tb-pair img + img{ margin-top:5.08%; }   /* both rows are ONE clickable image: hover zooms both, a click opens Clara's original with all six drawings */
  .vp-slider.wide .vp-frame{ background:transparent; border:0; }

  /* Ergebnisse chart slider sits in the 2/3 slot: slot size = 2/3 wide x 440px
     (same as Aktuelles). Charts keep their own shape inside (never cropped). */
  .m-thirds .vp-slider.wide .vp-frame{ aspect-ratio:auto; height:440px; max-height:none; }
  @media (max-width:980px){ .m-thirds .vp-slider.wide .vp-frame{ height:auto; aspect-ratio:4 / 3; } }
  @media (min-width:981px){
    .m-thirds.m-thirds--match{ align-items:stretch; }
    .m-thirds.m-thirds--match > .m-media{ display:flex; flex-direction:column; }
    .m-thirds.m-thirds--match .vp-slider.wide{ flex:1; display:flex; flex-direction:column; }
    .m-thirds.m-thirds--match .vp-slider.wide .vp-frame{ flex:1; height:auto; min-height:280px; }
  }
  /* Fallstudien photos: caption only (Bestand/Variante + credit) — the bridge
     name is shown once, under the photo. Arrows appear on hover; touch
     screens always show them. */
  .fs-card .vp-arrow{ opacity:0; transition:opacity .2s ease, border-color .15s ease, color .15s ease; }
  .fs-card .vp-frame:hover .vp-arrow, .fs-card .vp-arrow:focus-visible{ opacity:1; }
  @media (hover:none){ .fs-card .vp-arrow{ opacity:1; } }

  /* ---------- Fallstudien card photos = PHOTO rule: 3:2, no border,
       caption + dots ON the photo ---------- */
  .fs-card > .vp-slider{ margin:0 0 18px; }
  .fs-card .vp-frame{ border:0; background:var(--photo-bg); }
  .fs-card .vp-slide.photo{ padding:0; }
  .fs-card .vp-slide.photo img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
  .fs-card .vp-frame:hover .vp-slide img{ transform:scale(1.04); }
  .fs-card .vp-meta{
    position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; align-items:flex-end;
    padding:48px 16px 14px; border-radius:0 0 var(--radius) var(--radius); pointer-events:none;
    background:linear-gradient(to top, rgba(12,10,9,.8) 0%, rgba(12,10,9,.35) 60%, rgba(12,10,9,0) 100%);
  }
  .fs-card .vp-cap .vtag{ color:rgba(255,255,255,.8); }
  .fs-card .vp-cap .vname{ color:#fff; }
  .fs-card .vp-cap .vcred{ color:rgba(255,255,255,.75); }
  .fs-card .vp-dots{ pointer-events:auto; padding-bottom:4px; }
  .fs-card .vp-dot{ border-color:rgba(255,255,255,.85); }
  .fs-card .vp-dot.active{ background:var(--red); border-color:var(--red); }

  /* Lightbox as a slider (Fallstudien photos): prev/next + counter. */
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.12); color:#fff; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center; transition:background .15s ease;
  }
  .lightbox-nav:hover{ background:rgba(255,255,255,.22); }
  .lightbox-nav svg{ width:20px; height:20px; }
  .lightbox-nav.prev{ left:20px; } .lightbox-nav.next{ right:20px; }
  .lightbox-nav[hidden]{ display:none; }
  .lightbox-count{ color:#9C9A96; font-size:var(--fs-back); letter-spacing:.04em; margin:8px 0 0; font-family:'Inter', system-ui, sans-serif; }
  @media (max-width:640px){ .lightbox-nav{ width:36px; height:36px; } .lightbox-nav.prev{ left:8px; } .lightbox-nav.next{ right:8px; } }

  

  /* ---------- lightbox: view any real Clara image / photo larger ---------- */
  .lightbox{
    position:fixed; inset:0; background:rgba(12,13,15,.94); z-index:999;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:32px; opacity:0; visibility:hidden; transition:opacity .2s ease;
  }
  .lightbox.open{ opacity:1; visibility:visible; }
  .lightbox img{
    display:block; max-width:min(94vw, 1400px); max-height:80vh; width:auto; height:auto;
    object-fit:contain; border-radius:4px; background:#fff;
  }
  .lightbox-cap{ color:#E7E5E0; font-size:var(--fs-label); line-height:1.6; max-width:80ch; margin:18px 0 0; text-align:center; }
  .lightbox-close{
    position:absolute; top:20px; right:24px; width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff;
    font-size:var(--fs-title); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .15s ease;
  }
  .lightbox-close:hover{ background:rgba(255,255,255,.22); }
  /* ---------- Fallstudien MAP (from the Kartenentwurf, 12.10.; Clara 13.10.: map instead of the photos, Bestandsbild only).
       Sizes on the site scale: place names Small 14, reference towns / numbers / hint Label 12, pop-up title Body bold. ---------- */
  .fs-map-wrap.has-map .fs-source{ display:none; }
  .fs-map{ margin:0; }
  .fs-map-stage{ position:relative; max-width:480px; }
  .fs-map-stage svg{ display:block; width:100%; height:auto; overflow:hidden; }
  .fs-map-nb{ fill:none; stroke:#DCD7CC; stroke-width:.8; stroke-linejoin:round; }
  .fs-map-land{ fill:#E4DED2; }
  .fs-map-inner{ fill:none; stroke:#F3F1EC; stroke-width:1.2; stroke-linejoin:round; }
  .fs-map-river{ fill:none; stroke:#C3CDD1; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
  .fs-map-lake{ fill:#C9D3D7; }
  .fs-map-outline{ fill:none; stroke:#ADA697; stroke-width:1.1; stroke-linejoin:round; }
  .fs-ref-dot{ fill:#9A968C; }
  .fs-ref{ font:400 12px 'Inter', system-ui, sans-serif; fill:#8A8F94; letter-spacing:.02em; }
  .fs-site{ font:600 14px 'Inter', system-ui, sans-serif; fill:var(--ink); letter-spacing:.01em; paint-order:stroke; stroke:#E4DED2; stroke-width:3px; stroke-linejoin:round; }
  .fs-pin{ cursor:pointer; outline:none; }
  .fs-pin circle{ fill:var(--red); stroke:#F3F1EC; stroke-width:2.5; transition:fill .2s ease, transform .2s ease; transform-box:fill-box; transform-origin:center; }
  .fs-pin text{ font:600 12px 'Inter', system-ui, sans-serif; fill:#fff; text-anchor:middle; pointer-events:none; }
  .fs-pin.is-hot circle{ fill:var(--ink); transform:scale(1.15); }
  .fs-pin:focus-visible circle{ stroke:var(--ink); }
  .fs-map-hint{ margin:12px 0 0; max-width:480px; font-size:var(--fs-meta); line-height:1.55; color:var(--ink-soft); }
  .fs-pop{ position:absolute; z-index:5; width:280px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; cursor:zoom-in; opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
  .fs-pop.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .fs-pop[hidden]{ display:block; visibility:hidden; }
  .fs-pop.is-open[hidden]{ visibility:visible; }
  .fs-pop .m-photo{ border-radius:0; }
  .fs-pop-body{ padding:16px 18px 18px; }
  .fs-pop-body .m-label{ margin:0 0 6px; }
  .fs-pop-body .m-card-text{ margin-top:4px; }
  @media (max-width:980px){
    .fs-map-stage{ max-width:420px; }
    .fs-pop{ position:static; width:auto; max-width:420px; margin-top:16px; }
    .fs-pop:not(.is-open){ display:none; }
  }

  /* Ergebnisse: the chart is centred in its column and sits on its caption (Ahmed 15.10.: "why is photo not centered") */
  @media (min-width:981px){
    .ergebnisse .vp-slider.wide .vp-slide{ padding:0; justify-content:flex-start; align-items:flex-start; }
    /* the chart fills its slot from the top-left corner; absolutely positioned so no browser (Safari) can blow it up to its file size */
    .ergebnisse .vp-slider.wide .vp-slide{ position:relative; }
    .ergebnisse .vp-slider.wide .vp-slide img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; object-position:center bottom; }
  }
  /* closing literature line: hairline above, label 1/3, sentence 2/3 */
  .vp-lit{ border-top:1px solid var(--line); padding-top:24px; align-items:baseline; }
  .vp-lit .m-text{ max-width:none; margin:0; }
  .vp-lit a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
  .vp-lit a:hover{ color:var(--red); text-decoration-color:var(--red); }


  /* Fallstudien map = the Kartenentwurf (v3) that Ahmed picked (14.10.): map centred in the 2/3 column,
     white pop-up card with a soft shadow beside the number */
  .fs-map-stage{ margin:0 auto; }
  .fs-pop{ width:300px; background:#fff; box-shadow:0 18px 40px -18px rgba(20,23,26,.35); }
  .fs-map-wrap{ align-self:start; }

  /* Ergebnisse: 50/50 (Ahmed 14.10.), the chart ends with the text (Clara 13.10.: "sodass es mit Text abschließt") */
  @media (min-width:981px){
    .ergebnisse .m-thirds.m-thirds--match{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .ergebnisse .m-thirds.m-thirds--match .vp-slider.wide .vp-frame{ min-height:0; }
  }


/* ===== 2. Aktuelles: news slider (prototype index.html, section Aktuelles) ===== */
/* ---------- Aktuelles: first section, a slider of photo box + text box ---------- */
  .section-aktuelles{ background:#F3F1EC !important; padding:72px var(--side) !important; color:var(--ink); }
  .akt-slider{ position:relative; display:grid; }
  .akt-slide{ grid-area:1 / 1; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px;
    opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
  .akt-slide.is-active{ opacity:1; visibility:visible; transition:opacity .5s ease; }
  .akt-photo{ position:relative; display:block; overflow:hidden; min-height:440px; background:#CFD2D3; border-radius:2px; }
  .akt-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.16,1,.3,1); }
  .akt-slide:hover .akt-photo img{ transform:scale(1.02); }
  /* 2026-10-05: bumped to white — now that .section-aktuelles shares the same
     flat #F3F1EC tone as the rest of the page, the lead card needs its own
     (quiet) contrast to still read as a card rather than disappearing into
     the background it sits on. */
  .akt-lead{ background:#fff; border-radius:2px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; padding:36px 32px 96px; }
  .akt-date{ font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
  .akt-lead-title{ font-size:var(--fs-title); font-weight:700; line-height:1.25; color:var(--ink); text-wrap:balance; }
  .akt-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:var(--fs-cta); font-weight:600; color:var(--red); transition:gap .15s ease; }
  .akt-cta svg{ width:14px; height:14px; }
  .akt-lead:hover .akt-cta{ gap:12px; }
  /* title on the photo, like the photo captions elsewhere */
  .akt-ptext{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:96px 40px 32px; display:flex; flex-direction:column; gap:8px;
    background:linear-gradient(to top, rgba(12,10,9,.82) 0%, rgba(12,10,9,.45) 55%, rgba(12,10,9,0) 100%); color:#fff; }
  .akt-pdate{ font-size:var(--fs-meta); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.8); }
  .akt-ptitle{ font-size:var(--fs-title); font-weight:700; line-height:1.25; max-width:24ch; text-wrap:balance; }
  /* arrows on the left and right edge of the whole slider */
  .akt-btn{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center; background:rgba(243,241,236,.92); color:var(--ink); box-shadow:0 2px 10px rgba(0,0,0,.12); transition:background .15s ease, color .15s ease; }
  .akt-btn:hover{ background:#fff; color:var(--red); }
  .akt-btn svg{ width:22px; height:22px; }
  .akt-btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
  .akt-btn--prev{ left:16px; }
  .akt-btn--next{ right:calc((100% + 48px) / 3 + 16px); }
  /* progress bars across the full width */
  .akt-bars{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; margin-top:24px; }
  .akt-bar{ appearance:none; border:0; padding:10px 0; background:none; cursor:pointer; }
  .akt-bar span{ display:block; height:3px; background:rgba(27,28,30,.18); position:relative; overflow:hidden; }
  .akt-bar span::after{ content:""; position:absolute; inset:0; background:var(--ink); transform:scaleX(0); transform-origin:left; }
  .akt-bar.is-active span::after{ transform:scaleX(1); background:var(--red); }
  .akt-bar.is-active.is-running span::after{ transform:scaleX(0); animation:aktRun 8s linear forwards; }
  @keyframes aktRun{ to{ transform:scaleX(1); } }
  .akt-bar:hover span{ background:rgba(27,28,30,.35); }
  .akt-lead{ padding:36px 32px 32px !important; justify-content:center !important; }
  .akt-teaser{ font-size:var(--fs-body) !important; line-height:1.65; color:var(--ink) !important; }
  @media (max-width:860px){
    .akt-slide{ grid-template-columns:minmax(0,1fr); gap:0; }
    .akt-photo{ min-height:0; aspect-ratio:16 / 10; }
    .akt-label{ margin-bottom:0; padding-bottom:8px; }
    .akt-lead{ padding:24px 22px 28px !important; }
    .akt-ptext{ padding:64px 20px 20px; }
    .akt-btn{ top:12px; transform:none; width:40px; height:40px; }
    .akt-btn--prev{ left:10px; } .akt-btn--next{ right:10px; }
    .akt-bars{ gap:12px; margin-top:16px; }
  }
  @media (max-width:560px){ .section-aktuelles{ padding:56px var(--side) !important; } }
  .akt-head{ font-size:var(--fs-title) !important; font-weight:700; line-height:1.25; margin:0 0 32px !important; color:var(--ink); max-width:none !important; }
  .akt-lead{ min-width:0; justify-content:flex-start; }
  .akt-lead-title{ overflow-wrap:break-word; hyphens:auto; font-size:var(--fs-card-title) !important; line-height:1.3 !important; }
  .akt-teaser{ font-size:var(--fs-card); line-height:1.6; color:var(--ink-soft); }
  .akt-date{ margin-top:4px; }

  

/* ===== 3. WordPress additions (26.10.2026) ===== */
/* Aktuelles as its own subpage: the slider sits in the normal page column, no own band */
.page-inner > section.section-aktuelles{ background:none !important; padding:0 !important; }
@media (max-width:560px){ .page-inner > section.section-aktuelles{ padding:0 !important; } }
/* Pilotprojekte (Clara 15.10.): smaller gap between the intro text and the three tiles */
.page-inner > section.pilots-section{ margin-top:64px !important; }
@media (max-width:720px){ .page-inner > section.pilots-section{ margin-top:40px !important; } }
/* Vorgängerprojekt, Ergebnisse (Clara 15.10.): the two charts stacked, each with its caption */
.vp-charts{ display:flex; flex-direction:column; gap:64px; min-width:0; }
.vp-charts > .m-media{ margin:0; }
/* Fallstudien: the gallery behind each card is data only */
.fs-gallery{ display:none !important; }
.fs-pop-more{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:var(--fs-cta); font-weight:600; color:var(--red); }
.fs-pop:hover .fs-pop-more{ gap:12px; }
.fs-pop-more svg{ width:14px; height:14px; }