/* =====================================================================
   EBBS_rail — shared system (loaded by every page, after its own styles)
   One page width, one side margin, one font, one set of type sizes.
   ===================================================================== */

/* Inter, self-hosted (SIL Open Font License, see fonts/OFL.txt) —
   no request to Google Fonts, so no visitor IP leaves the site. */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root{
  /* layout */
  --side: clamp(16px, 3.5vw, 56px);      /* the one side margin, all pages */
  --w-text: 70ch;                         /* the one reading width */
  /* type — FIVE sizes, nothing else (09.10.2026). Hierarchy comes from
     weight, colour and capitals, not from more sizes.
       1 Hero  30–46px  homepage hero only (+ its intro animation below)
       2 Title 22–32px  bold — page + section titles
       3 Body  16–18px  running text; BOLD = card titles, wordmark
       4 Small 14px     card text, links (600, red), photo captions
       5 Label 12px     CAPITALS labels, dates, credits, menu, list labels
     The older token names stay as aliases so no page breaks. */
  --fs-title: clamp(22px, 2.6vw, 32px);   /* 2 Title */
  --fs-body: clamp(16px, 1.5vw, 18px);    /* 3 Body */
  --fs-small: 14px;                        /* 4 Small */
  --fs-lab: 12px;                          /* 5 Label */
  --fs-card-title: var(--fs-body);        /* = Body, bold */
  --fs-card-title-s: var(--fs-body);      /* = Body, bold */
  --fs-brand: var(--fs-body);             /* = Body, bold */
  --fs-card: var(--fs-small);
  --fs-cta: var(--fs-small);
  --fs-label: var(--fs-lab);
  --fs-back: var(--fs-lab);
  --fs-meta: var(--fs-lab);
  --fs-nav: var(--fs-lab);
  /* homepage hero + intro animation only (display sizes, used nowhere else) */
  --fs-hero: clamp(30px, 4.2vw, 46px);
  --fs-hero-s: clamp(17px, 3.4vw, 24px);
  --fs-hero-brand: clamp(17px, 1.9vw, 21px);
  --fs-intro-l: clamp(26px, 3vw, 36px);
  --fs-intro-m: clamp(24px, 3.6vw, 36px);
  --fs-intro-s: clamp(14px, 1.7vw, 17px);
  --fs-intro-xs: clamp(11px, 1.6vw, 13px);
}

body{ font-family:'Inter', system-ui, sans-serif; }

/* ---------- one page width: full width with the same side margin ---------- */
.page-inner{ max-width:none !important; padding-left:var(--side) !important; padding-right:var(--side) !important; }
.site-foot-inner, .site-foot-bar{ max-width:none !important; padding-left:var(--side) !important; padding-right:var(--side) !important; }

/* homepage containers */
.section-projekt .section-inner,
.section-projekt .highlight-inner,
.section-aktuelles .section-inner{ max-width:none !important; }
.section-projekt .projekt-row,
.section-projekt .highlight-band,
.section-aktuelles{ padding-left:var(--side) !important; padding-right:var(--side) !important; }
.hero-page .nav{ padding-left:var(--side) !important; padding-right:var(--side) !important; }
.hero-page .content-inner{ left:var(--side) !important; right:var(--side) !important; }
.hero-page .partner-strap{ padding-left:var(--side) !important; padding-right:var(--side) !important; }
.hero-page .mobile-menu{ padding-left:var(--side) !important; padding-right:var(--side) !important; }

/* ---------- one title style: ink, not red (red is for labels and links only) ---------- */
.page-inner h1{ color:var(--ink) !important; }
/* ---------- one reading width ---------- */
.page-inner .lead, .page-inner .section-note{ max-width:var(--w-text); }

/* =====================================================================
   LAYOUT SYSTEM (09.10.2026) — the only layouts allowed on the site.
   Every content row on every page is one of the modules below. Pages use
   these classes and do not define their own columns, photo shapes,
   corners, caption styles or background colours.

   Reference: the homepage "Aktuelles" slider. It stays frozen; the
   FEATURE module below copies its values exactly. Frozen blocks that are
   not built from this file: Aktuelles, Ansatz (= a SPLIT), Erkenntnistransfer.

   Modules
     SPLIT    two equal columns: title left, text (+ link) right.
              Text that runs across both columns: .m-cols-2.
     FEATURE  2/3 photo + 1/3 white text card (= Aktuelles).
              Label + title sit ON the photo; the card holds text + link.
     THIRDS   1/3 text column + 2/3 content (photo grid / cards / list).
              --flip puts the 2/3 content first.
     CARDS    equal columns of outline cards (3, or 2/4 via modifier).
     MEDIA    a diagram or slider at full width, caption UNDER it.
     BAND     one full-width photo, 21:8, caption on it.
     LIST     hairline rows: small grey label | value.

   Rules
     - One background (#F3F1EC). White only for FEATURE text cards and
       diagram frames. No grey fills, no section colour bands, no shadows.
     - One corner radius: 2px (round buttons/dots excepted).
     - Photos: 3:2 everywhere (portraits 3:4, band 21:8). FEATURE photos
       fill their row like Aktuelles. Photos never get a border.
     - Photo captions sit ON the photo and are always visible; diagram
       captions sit under the diagram.
     - Text on a white card is dark ink; text on the page is grey.
     - One link style (14px, semibold, red, arrow). One label style
       (13px, uppercase, red). Small grey uppercase 12px only for list
       labels, dates and the back link.
   ===================================================================== */
:root{
  --m-ink:#14171A; --m-grey:#585C60; --m-line:#D5D0C5; --m-red:#A31E2B;   /* fixed: never follow the OS dark mode */
  --bg:#F3F1EC; --card:#fff; --photo-bg:#CFD2D3; --hair:#D8D5CC;
  --radius:2px;
  --gap:24px;        /* inside a module */
  --gap-wide:64px;   /* between the two columns of SPLIT / THIRDS */
  --row:128px;       /* space between sections (12.10.: one clear scale 32 / 64 / 128) */
}
@media (max-width:720px){ :root{ --row:80px; --gap-wide:32px; } }

/* ---------- subpage rhythm: rows separated by space only ---------- */
.page-inner > section{ padding:0 !important; margin:var(--row) 0 0 !important; border:0 !important; background:none !important; }
.page-inner > section.hero{ margin-top:56px !important; }
.page-inner > footer.page-foot{ margin-top:var(--row); border-top:0 !important; }
.page-inner > .site-header{ margin-bottom:0; }

/* ---------- shared type helpers ---------- */
.m-label{ display:block; font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--m-red); margin:0 0 12px; }
.m-title{ font-size:var(--fs-title); font-weight:700; line-height:1.25; color:var(--m-ink); margin:0; text-wrap:balance; overflow-wrap:break-word; hyphens:auto; }
.m-text{ font-size:var(--fs-body); line-height:1.65; color:var(--m-grey); margin:0; max-width:var(--w-text); }
.m-text + .m-text{ margin-top:1em; }
.m-title + .m-text, .m-label + .m-text{ margin-top:24px; }
.m-text a{ color:var(--m-ink); text-decoration:underline; text-decoration-color:var(--m-line); text-underline-offset:3px; }
.m-text a:hover{ color:var(--m-red); text-decoration-color:var(--m-red); }
.m-link{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-size:var(--fs-cta); font-weight:600; letter-spacing:.01em; color:var(--m-red); text-decoration:none; transition:gap .15s ease; }
.m-link:hover{ gap:12px; }
.m-link svg{ width:14px; height:14px; flex:0 0 auto; }
.m-links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:24px; }
.m-links .m-link{ margin-top:0; }
.m-small{ font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-back); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--m-grey); }

/* ---------- SPLIT ---------- */
.m-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px var(--gap-wide); align-items:start; }
.m-split > *{ min-width:0; }
.m-split .m-title{ max-width:22ch; }
.m-cols-2{ column-count:2; column-gap:var(--gap-wide); max-width:none; orphans:3; widows:3; }
.m-cols-2 .m-text{ max-width:none; }
.m-cols-2:has(> .m-text + .m-text) > .m-text{ break-inside:avoid; }   /* with 2+ paragraphs, never split one across the columns (a single paragraph still flows across both) */
/* HEAD: label + title on their own line, used above long text (.m-cols-2).
   SPLIT (title left | text right) is only for SHORT text (about 6 lines or
   fewer); long text goes under its title in two columns instead, so no
   column is left as an empty block next to a lone title. */
.m-head{ margin:0 0 32px; }
.m-head .m-title{ max-width:22ch; }
@media (max-width:860px){
  .m-split{ grid-template-columns:minmax(0,1fr); }
  .m-cols-2{ column-count:1; }
}

/* ---------- FEATURE: Aktuelles' proportions without copying Aktuelles.
     Same 2/3 photo : 1/3 text grid, same 24px gap, same photo box (exactly
     Aktuelles' size: 2/3 wide, 440px high) — but the text sits on the page: label + title
     on top, then text + link, no white card. The photo carries only its
     caption (.m-cap). Aktuelles is the only row with a title on the photo.
     The text is a short teaser (it leads to a subpage, it isn't the full story) and sits
     in the lower half, its last line flush with the photo's bottom edge. The photo never
     stretches to fit the text. ---------- */
.m-feature{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--gap); }
.m-feature--flip{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.m-feature--flip > .m-feature-photo{ order:2; }
.m-feature{ align-items:end; }   /* bottoms line up: the text block ends exactly at the photo's bottom edge */
.m-feature-photo{ position:relative; display:block; overflow:hidden; height:440px; margin:0; background:var(--photo-bg); border-radius:var(--radius); }   /* = Aktuelles photo box: same width (2/3) and same 440px height at every screen width, never stretched by the text */
.m-feature-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.m-feature:hover .m-feature-photo img{ transform:scale(1.02); }
.m-feature-text{ display:flex; flex-direction:column; justify-content:flex-end; min-width:0; padding:0 16px; }
.m-feature-text > :last-child{ margin-bottom:0; }
.m-feature-text .m-link{ line-height:1; }
.m-feature-text .m-title{ margin:0; }
.m-feature-text .m-text{ max-width:none; }
@media (max-width:860px){
  .m-feature, .m-feature--flip{ grid-template-columns:minmax(0,1fr); gap:0; }
  .m-feature--flip > .m-feature-photo{ order:0; }
  .m-feature-photo{ height:auto; aspect-ratio:16 / 10; }
  .m-feature-text{ padding:28px 0 0; }
}

/* ---------- THIRDS ---------- */
.m-thirds{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--gap) var(--gap-wide); align-items:start; }
.m-thirds--flip{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.m-thirds > *{ min-width:0; }
.m-sticky{ position:sticky; top:32px; }
@media (max-width:980px){
  .m-thirds, .m-thirds--flip{ grid-template-columns:minmax(0,1fr); }
  .m-sticky{ position:static; }
}

/* ---------- PHOTO (3:2, caption on the photo, always visible) ---------- */
.m-photo{ position:relative; display:block; margin:0; overflow:hidden; aspect-ratio:3 / 2; border-radius:var(--radius); background:var(--photo-bg); }
.m-photo--portrait{ aspect-ratio:3 / 4; }
.m-photo--band{ aspect-ratio:21 / 8; }
@media (max-width:640px){ .m-photo--band{ aspect-ratio:4 / 3; } }
.m-photo--wide{ aspect-ratio:16 / 9; }   /* a photo that must always be seen whole (team photo: heads + rail): fixed 16:9 at every width, never cropped by the slot; caption on the photo as everywhere */
.m-feature:hover .m-photo--wide img{ transform:scale(1.02); }   /* same slight zoom as the other FEATURE photos */
.m-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.m-photo:hover img{ transform:scale(1.02); }   /* every photo: the same slight zoom on hover */
a .m-photo:hover img, .m-photo.is-link:hover img{ transform:scale(1.04); }
.m-cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:48px 16px 14px; display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(to top, rgba(12,10,9,.8) 0%, rgba(12,10,9,.35) 60%, rgba(12,10,9,0) 100%);
  color:#fff; font-size:var(--fs-small); font-weight:600; line-height:1.4; pointer-events:none; }
.m-cap small{ font-size:var(--fs-meta); font-weight:400; color:rgba(255,255,255,.75); }
.m-placeholder{ display:flex; align-items:center; justify-content:center; background:none; border:1px dashed var(--m-line); }
.m-placeholder span{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--m-grey); }
.m-grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }
@media (max-width:640px){ .m-grid-2{ grid-template-columns:minmax(0,1fr); } }

/* ---------- CARDS (outline card: photo, label, title, text, link) ---------- */
.m-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
.m-cards--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.m-cards--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.m-card{ display:flex; flex-direction:column; min-width:0; padding:20px; background:transparent; border:1px solid var(--hair); border-radius:var(--radius);
  transition:transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease; }
.m-card.is-link:hover{ transform:translateY(-4px); border-color:#B9B4A6; }
.m-card > .m-photo{ margin:0 0 18px; }
.m-card .m-label{ margin:0 0 6px; }
.m-card-title{ font-size:var(--fs-card-title); font-weight:700; line-height:1.3; color:var(--m-ink); margin:0; overflow-wrap:break-word; hyphens:auto; }
.m-card-text{ font-size:var(--fs-card); line-height:1.6; color:var(--m-grey); margin:8px 0 0; }
.m-card .m-link{ margin-top:16px; }
@media (max-width:1080px){ .m-cards--4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:980px){ .m-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .m-cards, .m-cards--2, .m-cards--4{ grid-template-columns:minmax(0,1fr); } }

/* ---------- MEDIA (diagram / slider, caption under it) ---------- */
.m-media{ margin:0; }
.m-frame{ display:block; background:var(--card); border:1px solid var(--m-line); border-radius:var(--radius); padding:20px; }
.m-media img{ display:block; width:100%; height:auto; }
.m-media figcaption, .m-media .m-under{ margin-top:12px; font-size:var(--fs-meta); line-height:1.55; color:var(--m-grey); max-width:none; }   /* caption runs as wide as its figure (no early line break) */

/* ---------- LIST (hairline rows: small grey label | value) ---------- */
.m-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--m-line); }
.m-list > li, .m-list > .m-row{ display:grid; grid-template-columns:minmax(120px, 200px) minmax(0,1fr) auto; gap:4px 20px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--m-line); }
.m-list .m-small{ margin:0; }
.m-list .m-value{ font-size:var(--fs-card); line-height:1.5; color:var(--m-ink); font-weight:600; }
.m-list .m-value a{ color:var(--m-ink); text-decoration:none; border-bottom:1px solid var(--m-line); }
.m-list .m-value a:hover{ color:var(--m-red); border-color:var(--m-red); }
.m-list .is-active .m-small, .m-list .is-active .m-value{ color:var(--m-red); }
@media (max-width:640px){ .m-list > li, .m-list > .m-row{ grid-template-columns:minmax(0,1fr) auto; } .m-list .m-small{ grid-column:1 / -1; } }

/* ---------- small helpers used by the modules ---------- */
a.m-card{ text-decoration:none; color:inherit; }
.m-card-title{ display:block; }
.m-acro{ color:var(--m-red); }   /* initial letters of the project name (Clara 13.10.: red, not underlined) */
.m-index{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.m-index a{ font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-back); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--m-grey); text-decoration:none; transition:color .15s ease; }
.m-index a:hover{ color:var(--m-red); }
.m-arrow{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1px solid var(--m-red); color:var(--m-red); }
.m-arrow svg{ width:13px; height:13px; }
a.m-card-title{ text-decoration:none; transition:color .15s ease; }
a.m-card-title:hover{ color:var(--m-red); }
.m-card > .m-photo--portrait{ margin:0 0 18px; }
.m-logo{ display:block; align-self:flex-start; height:40px; width:auto; max-width:100%; object-fit:contain; margin:0 0 16px; }
.m-card .m-list{ margin-top:16px; }
.m-list--plain > li{ grid-template-columns:minmax(0,1fr); padding:12px 0; }
.m-partners > :first-child{ grid-column:1 / -1; }
.m-box{ min-height:140px; border-radius:var(--radius); }
.page-inner > section .m-link + .m-cards, .m-cards + .m-link{ margin-top:32px; }

/* space between two modules inside one row — doubled class so it wins over
   the margin:0 of .m-photo / .m-media / .m-cards, whatever the order */
.m-after.m-after{ margin-top:64px; }   /* block after text inside a section (photo, diagram, cards) = half the section space */
@media (max-width:720px){ .m-after.m-after{ margin-top:40px; } }
/* people: two portraits per row on phones instead of one full-screen face */
@media (max-width:640px){
  .m-cards--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .m-cards--4 .m-card{ padding:12px; }
}

/* ---------- TIMELINE (Über EBBS_rail · Zeitplan) ----------
   Horizontal time axis: the Vorgängerprojekt as a compressed dashed segment, then EBBS_rail
   01.08.2026–31.01.2028 to scale (milestones above the axis, the three pilot projects as red bars
   below, no live "today" marker: it would claim a pilot status). Bars grow in when scrolled into view. Under 720px the same
   content is shown as the standard LIST (.m-tl-list), which is also what screen readers read. */
.m-tl{ display:grid; grid-template-columns:minmax(0,20%) 40px minmax(0,1fr); height:212px; margin-top:8px; }
.m-tl-prev, .m-tl-main, .m-tl-gap{ position:relative; }
.m-tl-axis{ position:absolute; left:0; right:0; top:120px; height:1px; background:var(--m-ink); }
.m-tl-axis--dash{ background:repeating-linear-gradient(90deg, var(--m-grey) 0 6px, transparent 6px 11px); }
.m-tl-bar:focus-visible{ outline:2px solid var(--m-ink); outline-offset:3px; }
.m-tl-gap span{ position:absolute; left:0; right:0; top:110px; text-align:center; font-size:var(--fs-lab); font-weight:600; color:var(--m-grey); }
.m-tl-tick{ position:absolute; top:114px; width:1px; height:13px; background:var(--m-ink); }
.m-tl-year{ position:absolute; top:130px; padding-left:6px; }
.m-tl-mile{ position:absolute; left:var(--x); top:var(--h); height:calc(120px - var(--h)); padding-left:10px; border-left:1px solid var(--m-ink); white-space:nowrap;
  opacity:0; transition:opacity .5s ease var(--d); }
.m-tl-mile::after{ content:''; position:absolute; left:-4px; bottom:-4px; width:7px; height:7px; border-radius:50%; background:var(--m-ink); }
.m-tl-mile--end{ border-left:0; border-right:1px solid var(--m-ink); padding:0 10px 0 0; text-align:right; transform:translateX(-100%); }
.m-tl-mile--end::after{ left:auto; right:-4px; }
.m-tl-mile .m-small{ display:block; color:var(--m-ink); }
.m-tl-what{ display:block; margin-top:2px; font-size:var(--fs-small); font-weight:400; line-height:1.3; color:var(--m-grey); }
.m-tl-bar{ position:absolute; top:154px; height:52px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 14px;
  border-right:4px solid var(--bg); background:var(--m-red) padding-box; color:#fff; border-radius:var(--radius); text-decoration:none;
  font-size:var(--fs-small); font-weight:600; white-space:nowrap; overflow:hidden;
  transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.16,1,.3,1) var(--d), background-color .2s ease; }
.m-tl-bar svg{ width:14px; height:14px; flex:0 0 auto; opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease; }
.m-tl-bar:hover{ background-color:#7E1520; }
.m-tl-bar:hover svg{ opacity:1; transform:translateX(0); }
.m-tl-bar--prev{ background:transparent; border:1px solid var(--m-line); color:var(--m-ink); font-weight:600; white-space:normal; line-height:1.25; }
.m-tl-bar--prev:hover{ background:transparent; border-color:var(--m-grey); }
.m-tl.is-visible .m-tl-bar{ transform:scaleX(1); }
.m-tl.is-visible .m-tl-mile{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .m-tl-bar, .m-tl-mile{ transition:none; transform:none; opacity:1; } }
@media (min-width:721px){ .m-tl-list{ display:none; } }   /* desktop: the drawn timeline itself is readable and its bars are the focusable links (review 11.10.) */
@media (max-width:720px){ .m-tl{ display:none; } }
@media (max-width:980px){ .m-thirds--text-first > :first-child{ order:2; } }   /* stacked: text before its photo grid */

/* LEGAL TEXT (Impressum, Datenschutz): plain paragraphs only, no sub-headings (Clara, 11.10.) */
.m-legal .m-text + .m-text{ margin-top:18px; }
.m-legal .m-text a{ color:var(--m-ink); text-decoration:underline; text-decoration-color:var(--m-line); }
.m-legal .m-text a:hover{ color:var(--m-red); text-decoration-color:var(--m-red); }
/* CONTACT (Kontakt): name, role lines, then the E-Mail/Telefon list */
.m-split .m-card-title + .m-text, .m-contact .m-card-title + .m-text{ margin-top:6px; }
.m-split .m-text + .m-list, .m-contact .m-text + .m-list{ margin-top:24px; }
.m-contact{ max-width:var(--w-text); }   /* Kontakt: details directly under the title (Ahmed 12.10.) */
/* full-width intro text (Pilotprojekte, Clara 11.10.: "über die gesamte Breite") */
.m-text.m-text--full{ max-width:none; }

/* CAPTIONS AND PHOTO CONTROLS ON HOVER ONLY (Ahmed 11.10.): on devices with a mouse every photo caption, arrow and dot on a photo is hidden
   and fades in when the pointer is over the photo. Touch screens have no hover, so there the
   captions stay visible as before. */
@media (hover:hover){
  .m-cap{ opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }
  .m-photo:hover .m-cap, .m-photo:focus-within .m-cap, .m-feature:hover .m-cap{ opacity:1; transform:none; }
  .fs-card .vp-meta{ opacity:0; transition:opacity .25s ease; }
  .fs-card .vp-frame:hover .vp-meta, .fs-card .vp-slider:hover .vp-meta{ opacity:1; }
  /* arrows and dots that sit on a photo: same rule (Ahmed 11.10.: "not only captions, also arrows or anything") */
  .vp-frame .vp-arrow{ opacity:0; transition:opacity .2s ease, border-color .15s ease, color .15s ease; }
  .vp-frame:hover .vp-arrow, .vp-arrow:focus-visible{ opacity:1; }
}

/* external links in a plain list (Fachliche Partner, 11.10.): name + small arrow, red on hover */
.m-list .m-extlink{ display:inline-flex; align-items:center; gap:8px; color:var(--m-ink); text-decoration:none; border:0; transition:color .15s ease; }
.m-list .m-extlink svg{ width:14px; height:14px; flex:0 0 auto; color:var(--m-grey); transition:color .15s ease, transform .15s ease; }
.m-list .m-extlink:hover, .m-list .m-extlink:hover svg{ color:var(--m-red); }
.m-list .m-extlink:hover svg{ transform:translate(2px,-2px); }

/* SCROLL MOTION, site-wide (11.10.): the same fade + rise as the homepage. ebbs-site.js adds
   .reveal to modules automatically and .is-visible when they scroll into view. */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.8,.36,1), transform .7s cubic-bezier(.16,.8,.36,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* SCROLL MOTION, site-wide (11.10.): the same fade + rise as the homepage. ebbs-site.js adds
   .reveal to modules automatically and .is-visible when they scroll into view. */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.8,.36,1), transform .7s cubic-bezier(.16,.8,.36,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* READ MORE (two reading depths, 11.10., v177): the section keeps its ORIGINAL markup and layout.
   Collapsed (.has-more.is-collapsed): only Clara's first sentence(s) show, and "Weiterlesen" sits at the
   end of that same sentence. Opened: everything is exactly as before (same columns, same alignment),
   with "Weniger anzeigen" at the end of the last paragraph. No word is moved or rewritten. */
.has-more.is-collapsed .m-rest{ display:none; }
/* two-column text: only when the first paragraph is cut does it run on in the right column (3 + 3 lines);
   otherwise it stays in the left column, exactly where it is in the opened layout */
.has-more.is-collapsed.is-cut .m-cols-2 > .m-text, .has-more.is-collapsed.is-cut.m-cols-2 > .m-text{ break-inside:auto; orphans:2; widows:2; }
/* while the page loads, collapsed text waits invisibly until its cut is final (font loaded), then fades in once */
.has-more .m-text{ transition:opacity .4s ease; }
.has-more.m-wait .m-text{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .has-more .m-text{ transition:none; } }
/* nothing to hide at this width (text beside photos fits): no buttons */
.has-more.no-more .m-more, .has-more.no-more .m-ell{ display:none; }
/* hidden text does not get the scroll fade on top of the opening fade */
.has-more .m-rest.reveal, .has-more .m-rest .reveal{ opacity:1; transform:none; transition:none; }
/* printing: always the full text */
@media print{
  .has-more .m-rest{ display:revert !important; }
  .has-more .m-ell, .has-more .m-more{ display:none !important; }
}
.has-more:not(.is-collapsed) .m-more--open,
.has-more.is-collapsed .m-more--close{ display:none; }
/* "Weiterlesen" sits in a span with two no-break spaces in front: the gap, and it never starts a new line on its own
   (a button is an atomic box, so the no-break spaces must sit outside it) */
.m-more-btn{ display:inline; margin:0; padding:0; border:0; background:none; cursor:pointer; font:inherit; font-weight:600; color:var(--m-red); white-space:nowrap; }   /* semibold: not marked by colour alone (BITV) */
.has-more:not(.is-collapsed) .m-ell{ display:none; }
.m-more-btn{ transition:color .2s ease, opacity .2s ease; }
.m-more-btn:hover{ color:#7A1620; opacity:.85; }   /* hover: the red darkens slightly, no underline */
.m-more-btn:focus-visible{ outline:2px solid var(--m-red); outline-offset:2px; }
.has-more .m-more-wrap{ overflow:hidden; }

.has-more .m-rest:focus{ outline:none; }   /* focus moved here for keyboard users; no visible frame on running text */

/* SUBPAGE MENU ON PHONES (review 11.10.): same as the homepage — a menu button, the links in a
   full-screen dark overlay. Button added by ebbs-site.js; without the script the links simply wrap. */
.site-menu-btn{ display:none; background:none; border:0; padding:8px; margin:-8px; cursor:pointer; color:var(--m-ink); }
.site-menu-btn span{ display:block; width:20px; height:2px; background:currentColor; margin:4px 0; transition:transform .2s ease, opacity .2s ease; }
@media (max-width:860px){
  .has-menu-btn .site-header{ flex-wrap:nowrap; }
  .has-menu-btn .site-menu-btn{ display:block; position:relative; z-index:101; }
  .has-menu-btn .site-header-links{ position:fixed; inset:0; z-index:100; background:rgba(10,9,8,.94);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:24px; padding:0 8%;
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
  .has-menu-btn.menu-open .site-header-links{ opacity:1; visibility:visible; }
  .has-menu-btn .site-header-links a{ color:#fff !important; font-size:var(--fs-card); }
  .has-menu-btn .site-header-links a[aria-current="page"]{ color:#E2515B !important; }
  .has-menu-btn .site-header-links a.contact{ border:0; padding:0; color:#E2515B !important; }
  .has-menu-btn.menu-open .site-menu-btn{ color:#fff; }
  .has-menu-btn.menu-open .site-menu-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .has-menu-btn.menu-open .site-menu-btn span:nth-child(2){ opacity:0; }
  .has-menu-btn.menu-open .site-menu-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .has-menu-btn.menu-open{ overflow:hidden; }
}

/* Page end: "Zurück zur Startseite" on the left, "Weiter: <next page>" on the right
   (red link to the most relevant next page: Über → Team → Vorgängerprojekt → Pilotprojekte → back to how the method works) */
footer.page-foot.has-next{ display:flex; justify-content:space-between; align-items:center; gap:16px 32px; flex-wrap:wrap; }
footer.page-foot .next-link{ margin-left:auto; }
footer.page-foot .m-link.next-link{ margin-top:0; }   /* red link to the most relevant next page (Ahmed 12.10.) */


/* ================= 13.10.2026 comments: variants of existing modules only =================
   No new type sizes, no new alignments: all running text stays flush left. */
/* THIRDS, bottom-aligned (Über EBBS_rail intro: text ends on the photo's bottom edge) */
.m-thirds--end{ align-items:end; }
/* the line under a title that spells out the project name: Body, bold */
.m-sub{ font-size:var(--fs-card-title); font-weight:700; line-height:1.4; color:var(--m-ink); margin:10px 0 0; max-width:var(--w-text); }
.m-thirds > div > .m-title + .m-text, .m-thirds > div > .m-sub + .m-text{ margin-top:16px; }
/* LIST without hairlines (Team · Weitere Beteiligte) */
.m-list--bare{ border-top:0; }
.m-list--bare > li{ border-bottom:0; padding:6px 0; }
/* LIST inside a CARD: label above value, as on phones (Pilotprojekte facts) */
.m-card .m-list > li{ grid-template-columns:minmax(0,1fr); gap:2px; padding:10px 0; }
/* people: portraits a size smaller (four cards in the 2/3 column of THIRDS) */
.m-thirds .m-cards--4 .m-card{ padding:12px; }
.m-thirds .m-cards--4 .m-card > .m-photo{ margin:0 0 12px; }
@media (max-width:1080px) and (min-width:981px){ .m-thirds .m-cards--4{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
/* MAP (Vorgängerprojekt · Fallstudien): drawn in the site's hairline grey, numbers in red dots */
.m-map{ margin:0; }
.m-map svg{ display:block; width:100%; max-width:300px; height:auto; }
.m-map .m-map-land{ fill:none; stroke:var(--m-grey); stroke-width:1.2; stroke-linejoin:round; }
.m-map .m-map-dot{ fill:var(--m-red); }
.m-map text{ font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-label); font-weight:600; }
.m-map .m-map-num{ fill:#fff; text-anchor:middle; dominant-baseline:central; }
.m-map .m-map-name{ fill:var(--m-ink); letter-spacing:.08em; text-transform:uppercase; }
.m-map figcaption{ margin-top:12px; font-size:var(--fs-meta); line-height:1.55; color:var(--m-grey); }
* + .m-map{ margin-top:32px; }
/* MEDIA next to text in THIRDS: two images stacked */
.m-media .m-frame + .m-frame{ margin-top:20px; }
/* drawings are shown no larger than their source (Toolbox: 612px per row), never blown up */
.m-media .m-frame.m-frame--native{ max-width:612px; }
.m-map .m-map-name{ paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }