/*
Theme Name: EBBS_rail
Theme URI: https://ebbs-rail.de
Author: Ahmed Hassan, EBBS_rail (BTU Cottbus-Senftenberg)
Description: Website-Theme des DFG-Erkenntnistransferprojekts EBBS_rail. Layout nach dem abgestimmten Prototyp (Stand 26.10.2026). Seiteninhalte sind normale WordPress-Bloecke; Kopf- und Fusszeile liegen im Theme.
Version: 2.1.12
Text Domain: ebbs-rail
*/

/* ===================================================================
   1. Tokens and base (same on every page)
   =================================================================== */
:root{
  --paper:#F3F1EC; --paper-2:#E9E5DC; --ink:#14171A; --ink-soft:#585C60;
  --line:#D5D0C5; --red:#A31E2B;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Inter', system-ui, sans-serif; }
a{ color:inherit; }
img{ max-width:100%; height:auto; }

/* ===================================================================
   2. Subpage frame: header, back link, hero, footer
   (identical to the prototype's per-page <style> blocks)
   =================================================================== */

  .page-inner{ max-width:1180px; margin:0 auto; padding:0 4%; }

  /* ---------- site header — identical component to every other page ---------- */
  .site-header{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:14px 24px; padding:26px 0; border-bottom:1px solid var(--line); margin-bottom:8px;
  }
  .site-header-brand{
    display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit;
  }
  .site-header-brand .brand-name{
    font-weight:700; font-size:var(--fs-brand); letter-spacing:.005em; color:var(--ink); white-space:nowrap;
  }
  .site-header-brand .brand-name .e{ color:var(--red); }
  .site-header-brand .brand-sub{
    margin:0; font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-nav); letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
  }
  .site-header-links{
    display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px;
    font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-nav); letter-spacing:.08em; text-transform:uppercase;
  }
  .site-header-links a{
    color:var(--ink-soft); text-decoration:none; position:relative; padding-bottom:5px;
    white-space:nowrap; transition:color .15s ease;
  }
  .site-header-links a::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--red);
    transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.16,1,.3,1);
  }
  .site-header-links a:hover{ color:var(--ink); }
  .site-header-links a:hover::after{ transform:scaleX(1); }
  .site-header-links a[aria-current="page"]{ color:var(--red); }
  .site-header-links a.contact{
    color:var(--ink); border:1px solid var(--line); padding:6px 12px; border-radius:2px;
  }
  .site-header-links a.contact::after{ display:none; }
  .site-header-links a.contact:hover{ border-color:var(--ink); }
  .site-header-links a.contact[aria-current="page"]{ border-color:var(--red); }

  /* ---------- back link — identical to the other subpages ---------- */
  header{ padding:28px 0 0; }
  .back-link{
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-back); letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); transition:color .15s ease, gap .15s ease;
  }
  .back-link:hover{ color:var(--red); gap:12px; }
  .back-link svg{ width:14px; height:14px; }

  .hero{ padding:32px 0 56px; border-bottom:1px solid var(--line); }
  .eyebrow{
    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(--red); margin:0 0 14px;
  }
  h1{ font-size:var(--fs-title); font-weight:700; line-height:1.25; margin:0 0 20px; max-width:32ch; color:var(--red); }
  .lead{ font-size:var(--fs-body); line-height:1.65; color:var(--ink-soft); max-width:70ch; margin:0; }

  section{ padding:64px 0; border-bottom:1px solid var(--line); }
  section:last-of-type{ border-bottom:none; }

  .subhead{
    font-size:var(--fs-label); font-weight:600; margin:0 0 8px; font-family:'Inter', system-ui, sans-serif;
    letter-spacing:.12em; text-transform:uppercase; color:var(--red);
  }
  h2{
    font-size:var(--fs-title); font-weight:700; line-height:1.25;
    margin:0 0 16px; max-width:28ch; color:var(--ink);
    overflow-wrap:break-word; hyphens:auto;
  }
  .section-note{ font-size:var(--fs-body); line-height:1.65; color:var(--ink-soft); max-width:66ch; margin:0 0 8px; }
  .section-note a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); transition:text-decoration-color .15s ease; }
  .section-note a:hover{ text-decoration-color:var(--red); color:var(--red); }

  /* ---------- scroll-in motion — same .reveal component as every other page ---------- */
  .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:translateY(0); }
  @media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  footer.page-foot{ border-top:1px solid var(--line); padding:28px 0 60px; }

  /* ================= site footer — identical to every other page ================= */
  .site-foot{ background:#14171A; color:#C9CBCE; margin:0 calc(50% - 50vw); }
  .site-foot-inner{
    max-width:1180px; margin:0 auto; padding:56px 4% 40px;
    display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px 32px;
  }
  .foot-brand .foot-logo{ font-family:'Inter', system-ui, sans-serif; font-weight:700; font-size:var(--fs-card-title); color:#fff; margin:0 0 14px; }
  .foot-brand .foot-logo .e{ color:#E2515B; }
  .foot-brand .foot-tagline{ font-size:var(--fs-cta); line-height:1.65; color:#9BA0A5; max-width:36ch; margin:0; }
  .foot-col-title{
    font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-back); font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:#8A8F94; margin:0 0 16px;
  }
  .foot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .foot-links a{ color:#C9CBCE; text-decoration:none; font-size:var(--fs-cta); transition:color .15s ease; }
  .foot-links a:hover{ color:#E2515B; }
  .foot-links a[aria-current="page"]{ color:#E2515B; }
  .foot-partners{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:var(--fs-cta); color:#C9CBCE; }
  .foot-partners a{ color:#C9CBCE; text-decoration:none; }
  .foot-partners a:hover{ color:#E2515B; }
  .foot-note{ margin:16px 0 0; font-size:var(--fs-back); line-height:1.65; color:#8A8F94; max-width:40ch; }
  .foot-note a{ color:#ABB0B4; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); }
  .foot-note a:hover{ color:#fff; text-decoration-color:#fff; }
  .site-foot-bar{
    border-top:1px solid rgba(255,255,255,.12);
    padding:20px 4%; max-width:1180px; margin:0 auto;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px;
  }
  .site-foot-bar .foot-copy{ margin:0; font-size:var(--fs-label); color:#8A8F94; }
  .site-foot-bar .foot-legal-links{ margin:0; font-size:var(--fs-label); }
  .site-foot-bar .foot-legal-links a{ color:#8A8F94; text-decoration:underline; }
  .site-foot-bar .foot-legal-links a:hover{ color:#C9CBCE; }
  @media (max-width:720px){
    .site-foot-inner{ grid-template-columns:1fr; gap:32px; padding:48px 6% 32px; }
    .site-foot-bar{ padding:18px 6%; justify-content:center; text-align:center; }
  }

/* Team: names in Small (14 px) so each name sits on one line (Ahmed 15.10.) */
.m-cards--4 .m-card-title{ font-size:var(--fs-small); }
.m-card-title .nw{ white-space:nowrap; }
@media (max-width:1080px) and (min-width:981px){ .m-card-title .nw{ white-space:normal; } }

/* Ueber EBBS_rail */
.page-inner h1.m-title{ max-width:24ch; }
.m-sub .nw{ white-space:nowrap; }   /* Clara 15.10.: "AG" never stands alone on a line */
#ziel .m-title{ max-width:none; }   /* Clara 15.10.: "Erhalt als echte Handlungsoption" on one line */

/* ===================================================================
   3. WordPress block markup: make core blocks render exactly like the
      prototype markup (no extra margins, no block-library styles)
   =================================================================== */
figure.wp-block-image:not(.m-photo){ margin:0; }
.wp-block-image figcaption{ text-align:left; }
.m-photo > figcaption.m-cap{ margin:0; }   /* WP gives captions a bottom margin; on a photo the caption must sit on the bottom edge */
/* a photo in the same thin frame as the portrait cards (Team photo, Ahmed 20.10.) */
.m-card.m-card--frame{ padding:12px; }
.m-card--frame > .m-photo{ margin:0; }
p.m-label{ margin:0 0 12px; }
p.m-link-wrap{ margin:0; }
.m-sub mark{ background:none; }
ul.m-list.wp-block-list{ padding:0; }
/* red link arrow when the link is a plain <a> (block content), not an inline svg */
a.m-link:not(:has(svg))::after, a.cta:not(:has(svg))::after{
  content:""; display:inline-block; width:14px; height:14px; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* the editor-side preview: show the page background and font */
.editor-styles-wrapper{ background:var(--paper); font-family:'Inter', system-ui, sans-serif; }

/* ===================================================================
   4. Homepage: full-screen hero, no scrolling (Clara 15.10.)
   =================================================================== */
  /* Normal scrolling (Ahmed 27.10.): the hero fills the first screen and scrolls away like any page;
     the footer simply follows below it (the earlier pinned-photo effect, where the footer slid up
     over a fixed hero, is removed). */
  div.page{ position:relative; width:100%; height:100vh; min-height:340px; overflow:hidden; }   /* div only: WordPress also puts the class "page" on <body> */
  .site-content{ position:relative; background:var(--paper); }

  /* ================= the real homepage underneath ================= */
  .hero-page{ position:absolute; inset:0; overflow:hidden; background:#e9e6e0; }
  .hero-page .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
  .hero-page .scrim{
    position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(12,10,9,.82) 0%, rgba(12,10,9,.72) 28%, rgba(12,10,9,.28) 48%, rgba(12,10,9,0) 62%),
      linear-gradient(to top, rgba(12,10,9,.55) 0%, rgba(12,10,9,0) 38%),
      linear-gradient(to bottom, rgba(10,9,8,.6) 0%, rgba(10,9,8,0) 22%);
  }

  .hero-page .nav{
    position:absolute; top:0; left:0; right:0; z-index:2;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:22px 5% 0;
  }
  .hero-page .nav .brand{
    display:flex; align-items:baseline; gap:0; font-weight:700; flex:0 0 auto;
    font-size:var(--fs-hero-brand); color:#fff; letter-spacing:.005em; white-space:nowrap;
    opacity:0; transition:opacity .5s ease;
  }
  .hero-page .nav .brand .e{ color:var(--red); }
  /* "DFG Erkenntnistransferprojekt" stays under the logo, as on every subpage. It arrives last
     in the logo animation (see playQuickNav) and then simply stays, part of the logo. */
  .hero-page .nav .brand{ position:relative; }
  .hero-page .nav .brand .brand-sub{
    position:absolute; top:100%; left:0; margin-top:4px; white-space:nowrap;
    font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-nav); font-weight:400; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.62);
  }
  /* Only shown on a repeat visit within the same session (see playQuickNav in the
     intro script) — the same sentence-build → collapse-to-initials → assemble
     performance as the full first-visit intro, run inline in the nav bar instead
     of as a full-screen centered overlay: horizontal, non-blocking (the rest of
     the page is already usable while it plays), and without the long reading
     pauses that made the full version ~9s. It occupies the same flex slot as
     .brand and is swapped for it once the reveal finishes. */
  .hero-page .nav .nav-quick-stage{
    position:relative; display:none; overflow:visible; flex:0 1 auto; min-width:0; max-width:none;
  }
  .hero-page .nav .nav-quick-stage.active{ display:flex; align-items:baseline; }
  .hero-page .nav .nav-quick-stage .nav-sentence{
    display:flex; align-items:baseline; white-space:nowrap; overflow:visible; flex-shrink:0;
    font-weight:700; font-size:var(--fs-hero-brand); line-height:1.2; color:#fff;
    opacity:0; transform:translateY(3px); transition:opacity .4s ease, transform .4s ease;
  }

  /* phones (review 11.10.): the logo sentence wraps inside the screen instead of running off the right edge */
  @media (max-width:640px){
    .hero-page .nav .nav-quick-stage{ max-width:calc(100vw - 96px); }
    .hero-page .nav .nav-quick-stage .nav-sentence{ flex-wrap:wrap; white-space:normal; row-gap:2px; flex-shrink:1; min-width:0; max-width:100%; }
  }
  /* phones: the dark overlay also rises from the bottom behind the hero text, so the text stays readable over the white lines */
  @media (max-width:640px){
    .hero-page .scrim{ background:
      linear-gradient(to top, rgba(12,10,9,.86) 0%, rgba(12,10,9,.72) 45%, rgba(12,10,9,.2) 70%, rgba(12,10,9,0) 85%),
      linear-gradient(to bottom, rgba(10,9,8,.6) 0%, rgba(10,9,8,0) 22%); }
  }
  .hero-page .nav .nav-quick-stage .nav-sentence.in{ opacity:1; transform:translateY(0); }
  /* "DFG Erkenntnistransferprojekt", shown briefly right under the logo once it
     assembles on a repeat-visit refresh — same wording/role as .intro-subtitle
     in the full first-visit version, just anchored under the small nav logo
     instead of sitting in the centered full-screen stage. */
  .hero-page .nav .nav-quick-subtitle{
    position:absolute; top:100%; left:0; margin-top:4px; white-space:nowrap;
    font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-nav); letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.62);
    opacity:0; transform:translateY(3px); transition:opacity .5s ease, transform .5s ease;
  }
  .hero-page .nav .nav-quick-subtitle.show{ opacity:1; transform:translateY(0); }
  .hero-page .nav .links{
    display:flex; align-items:center; gap:22px; flex:0 1 auto; min-width:0;
    font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-nav); letter-spacing:.08em; text-transform:uppercase;
    opacity:0; transition:opacity .5s ease;
  }
  .hero-page .nav .links a{
    color:rgba(255,255,255,.8); text-decoration:none; position:relative; padding-bottom:5px;
    white-space:nowrap; transition:color .15s ease;
  }
  .hero-page .nav .links a::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--red);
    transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.16,1,.3,1);
  }
  .hero-page .nav .links a:hover{ color:#fff; }
  .hero-page .nav .links a:hover::after{ transform:scaleX(1); }
  .hero-page .nav .links a.contact{
    color:#fff; border:1px solid rgba(255,255,255,.55); padding:6px 12px; border-radius:2px;
  }
  .hero-page .nav .links a.contact::after{ display:none; }
  .hero-page .nav .links a.contact:hover{ border-color:#fff; }
  .hero-page .nav .menu-btn{
    display:none; background:none; border:none; padding:8px; margin:-8px; cursor:pointer;
    opacity:0; transition:opacity .5s ease;
  }
  .hero-page .nav .menu-btn span{
    display:block; width:20px; height:2px; background:#fff; margin:4px 0;
    transition:transform .2s ease, opacity .2s ease;
  }
  .hero-page.menu-open .nav .menu-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .hero-page.menu-open .nav .menu-btn span:nth-child(2){ opacity:0; }
  .hero-page.menu-open .nav .menu-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  @media (max-width:860px){
    .hero-page .nav .links{ display:none; }
    .hero-page .nav .menu-btn{ display:block; }
  }

  .hero-page .mobile-menu{
    position:absolute; inset:0; z-index:3;
    background:rgba(10,9,8,.94);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:24px;
    padding:0 8%; opacity:0; visibility:hidden; transition:opacity .25s ease;
  }
  .hero-page.menu-open .mobile-menu{ opacity:1; visibility:visible; }
  .hero-page .mobile-menu a{
    color:#fff; text-decoration:none; font-family:'Inter', system-ui, sans-serif;
    font-size:var(--fs-card); letter-spacing:.08em; text-transform:uppercase;
  }
  .hero-page .mobile-menu a.contact{ color:#E2515B; }

  /* fade/reveal wrapper only — spans the whole banner so its two children
     (the message block and the small SPP line at the very bottom) can each be
     positioned independently, but appear together as one reveal. */
  .hero-page .content{
    position:absolute; inset:0; color:#fff; pointer-events:none;
    opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;
  }
  .hero-page .content.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

  .hero-page .content-inner{
    position:absolute; left:5%; right:5%; bottom:27%; max-width:620px;
  }
  .hero-page .claim{
    font-size:var(--fs-hero); font-weight:700; line-height:1.2;
    color:#fff; margin:0 0 16px; max-width:22ch; text-wrap:balance;
  }
  .hero-page .lead{
    font-size:var(--fs-body); font-weight:400; line-height:1.55;
    color:rgba(255,255,255,.82); margin:0 0 24px; max-width:42ch;
  }
  .hero-page .cta{
    display:inline-flex; align-items:center; gap:8px;
    background:none; border:none; padding:0; cursor:pointer;
    color:#E2515B; text-decoration:none;
    font-size:var(--fs-cta); font-weight:600; letter-spacing:.01em;
    transition:color .15s ease, gap .15s ease;
  }
  .hero-page .cta:hover{ color:#fff; gap:12px; }
  .hero-page .cta svg{ width:14px; height:14px; }

  /* Partner-logo strap: no plate behind it — the logos sit directly on the photo,
     flush to the strap's own left and right edges (space-between, not clustered/
     centered) so they read as a single strip spanning the full width. Most of
     these logos are dark/black marks, and the photo underneath runs from quite
     dark (left) to fairly light (right), so a bare logo would vanish against one
     half or the other — the gradient below is not a background plate, just enough
     of a darkening under the strap (matching the same technique the hero's own
     .scrim already uses) to keep every logo legible wherever it falls, plus a
     soft drop-shadow on each mark for the same reason. */
  .hero-page .partner-strap{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    background:linear-gradient(to top, rgba(8,7,6,.6) 0%, rgba(8,7,6,.32) 55%, rgba(8,7,6,0) 100%);
    padding:34px 5% 24px;
    display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap;
  }
  .hero-page .partner-strap img{
    height:26px; width:auto; display:block; flex:0 0 auto;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.35));
  }

  /* 13.10.: two-paragraph hero text. Same place on the grid (27% above the bottom), wider measure
     so it stays short; on lower windows the lead drops to the Small size, as the compact rule below does */
  .hero-page .lead{ max-width:52ch; margin-bottom:12px; }
  .hero-page .lead + .cta{ margin-top:12px; }
  @media (max-height:860px) and (min-width:641px){ .hero-page .lead{ font-size:var(--fs-small); line-height:1.55; } .hero-page .claim{ margin-bottom:12px; } }
  @media (max-height:700px) and (min-width:641px){ .hero-page .content-inner{ bottom:22%; } }

  /* Newsletter row above the partner logos (Clara 15.10.), legal links on its right */
  .hero-page .partner-strap{ flex-wrap:wrap; row-gap:22px; }
  .hero-page .hero-news{ flex:1 0 100%; display:flex; align-items:baseline; justify-content:space-between; gap:12px 32px; flex-wrap:wrap; }
  .hero-page .hero-news p{ margin:0; font-size:var(--fs-small); line-height:1.5; color:rgba(255,255,255,.82); }
  .hero-page .hero-news .hero-news-label{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#E2515B; margin-right:14px; }
  .hero-page .hero-news a.akt-news-link{ color:#fff; margin-left:14px; }
  .hero-page .hero-news a.akt-news-link:hover{ color:#E2515B; }
  .hero-page .hero-legal{ font-size:var(--fs-label); color:rgba(255,255,255,.62); white-space:nowrap; }
  .hero-page .hero-legal a{ color:inherit; text-decoration:none; }
  .hero-page .hero-legal a:hover{ color:#fff; }
  .akt-news-link{ display:inline-flex; align-items:center; gap:8px; color:var(--red); font-size:var(--fs-cta); font-weight:600; text-decoration:none; white-space:nowrap; transition:gap .15s ease; }
  .akt-news-link:hover{ gap:12px; }
  .akt-news-link svg{ width:14px; height:14px; }
  .hero-page .hero-news{ justify-content:flex-end; }   /* 20.10. (Ahmed): newsletter removed from the homepage, only the legal links stay */
  @media (max-height:640px) and (min-width:641px){ .hero-page .hero-news{ display:none; } }

  @media (max-width:640px){
    .hero-page .content-inner{ left:6%; right:6%; bottom:30%; max-width:none; }
    .hero-page .claim, .hero-page .lead{ max-width:none; }
    .hero-page .partner-strap{ padding:16px 6%; gap:16px 24px; justify-content:center; }
    .hero-page .partner-strap img{ height:18px; }
    .hero-page .hero-news{ display:none; }
  }
  @media (max-height:520px){
    .hero-page .content-inner{ bottom:10px; max-width:64%; }
    .hero-page .claim{ font-size:var(--fs-hero-s); line-height:1.15; margin-bottom:8px; }
    .hero-page .lead{ font-size:var(--fs-intro-xs); line-height:1.35; margin-bottom:10px; }
    .hero-page .cta{ font-size:var(--fs-back); }
    .hero-page .partner-strap{ display:none; }
  }
  @media (max-height:520px) and (max-width:640px){
    .hero-page .content-inner{ max-width:none; right:6%; }
  }
  /* the hero text comes from the page's blocks */
  .hero-page .content-inner .wp-block-heading{ margin:0 0 16px; }
  .hero-page .content-inner p.lead{ margin:0 0 12px; }
  .hero-page .content-inner p.ebbs-hero-cta{ margin:12px 0 0; }

  /* ================= the intro overlay, on top ================= */
  /* No background of its own — the bridge photo + scrim from .hero-page underneath
     already shows through (same image the final page uses), so there's nothing to
     cross-fade between intro and hero. A dim layer adds a bit of extra contrast for
     reading the sentence, then fades away as the logo settles into the nav corner
     (where the permanent scrim already gives it enough contrast on its own). */
  .intro-overlay{ position:absolute; inset:0; z-index:20; }
  .intro-dim{ position:absolute; inset:0; background:rgba(8,7,6,.38); transition:opacity .9s ease; }
  .intro-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; }
  .stage-inner{ width:100%; max-width:760px; text-align:center; position:relative; }

  .sentence{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
    row-gap:8px; font-size:var(--fs-intro-m); line-height:1.3; font-weight:500;
    opacity:0; transform:translateY(6px); transition:opacity .7s ease, transform .7s ease;
  }
  .sentence.in{ opacity:1; transform:translateY(0); }
  .word{ display:inline-flex; }
  .seg{ display:inline-block; white-space:pre; overflow:hidden; flex-shrink:0; }
  .seg.rest{ color:rgba(255,255,255,.62); transition: width .8s cubic-bezier(.4,0,.2,1), opacity .6s ease, margin .8s ease; }
  .seg.rest.collapsed{ width:0 !important; opacity:0; margin:0 !important; }
  .seg.key{ font-weight:700; color:#E2515B; position:relative; transition: color .3s ease; }
  .seg.key::before{
    content:""; position:absolute; left:-3px; right:-3px; top:-2px; bottom:-2px;
    border:1.5px solid #E2515B; border-radius:50%; opacity:0; transition:opacity .3s ease;
  }
  .seg.key.marked::before{ opacity:1; }
  .seg.key.assembled::before{ opacity:0; }

  .rail{
    display:inline-block; overflow:hidden; white-space:pre; width:0;
    color:#fff; font-weight:700;
    transition: width .75s cubic-bezier(.16,1,.3,1);
  }

  .intro-subtitle{
    margin-top:10px; font-family:'Inter', system-ui, sans-serif; font-size:var(--fs-back);
    letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62);
    opacity:0; transform:translateY(4px); transition:opacity .5s ease, transform .5s ease;
  }
  .intro-subtitle.show{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .seg.rest, .seg.key, .seg.key::before, .sentence, .rail, .intro-subtitle, .nav-sentence, .nav-quick-subtitle{ transition-duration:.01s !important; }
  }


/* ===================================================================
   5. Editor-safe photos (29.10.2026)
   - A caption edited in the WordPress editor loses the theme class
     "m-cap" and becomes a normal caption. In a photo slot that caption
     was hidden behind the photo. Every caption inside a photo slot now
     sits on the photo exactly like .m-cap, whatever class it has.
   - The slot sets the photo size (design rule). A width or height set
     in the editor is ignored, so the photo always fills its slot.
   =================================================================== */
.m-photo > figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:48px 16px 14px;
  display:flex; flex-direction:column; gap:2px; text-align:left;
  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;
}
@media (hover:hover){
  .m-photo > figcaption{ opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }
  .m-photo:hover > figcaption, .m-photo:focus-within > figcaption, .m-feature:hover .m-photo > figcaption{ opacity:1; transform:none; }
}
.m-photo img{ width:100% !important; height:100% !important; max-width:none; }


/* ===================================================================
   6. One logo red everywhere (29.10.2026, Ahmed)
   Every "EBBS" in the logo uses the lighter red #E2515B (the tone of the
   homepage logo sentence): header on every page, homepage nav, footer and
   the homepage logo animation.
   =================================================================== */
.site-header-brand .brand-name .e,
.hero-page .nav .brand .e,
.foot-brand .foot-logo .e,
.seg.key{ color:#E2515B; }
.seg.key::before{ border-color:#E2515B; }


/* ===================================================================
   7. Halves (29.10.2026, Clara): text and picture in two equal columns
   on Über EBBS_rail and Vorgängerprojekt ("m-thirds--half").
   Below 981px everything stacks as before.
   =================================================================== */
@media (min-width:981px){
  .m-thirds.m-thirds--half{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}


/* ===================================================================
   8. Aktuelles page (29.10.2026, Ahmed)
   - The photo keeps its original proportions at every screen size:
     2/3 of 1180px x 440px = 770 : 440.
   - The page still fits one screen: on a short window the whole
     Aktuelles block gets narrower instead of the photo getting flatter.
   - The progress lines under the slider are removed to save space.
   =================================================================== */
@media (min-width:861px){
  .page-inner .section-aktuelles{ --akt-h:clamp(300px, calc(100svh - 400px), 440px); max-width:calc(var(--akt-h) * 2.625 + 24px); }
  .page-inner .section-aktuelles .akt-photo{ min-height:0; aspect-ratio:770 / 440; }
  .page-inner .section-aktuelles .akt-bars{ display:none; }
}

/* 9. Vorgängerprojekt, Ergebnisse — "Kosay" layout (approved by Ahmed 31.10.2026, applied 02.11.2026).
   Layout only: heading alone; paragraphs 1 | 2; then both charts side by side,
   top-aligned, with paragraph 3 under the bar chart. Replaces the 30.10. 32px rule. */
.ergebnisse > .m-title + .vp-erg-text{ margin-top:16px; }
.ergebnisse .vp-erg-charts{ margin-top:48px; }
.ergebnisse .vp-erg-charts .vp-charts + .m-text{ margin-top:40px; }
@media (max-width:980px){
  .ergebnisse .vp-erg-text{ row-gap:16px; }
  .ergebnisse .vp-erg-charts{ margin-top:32px; row-gap:32px; }
  .ergebnisse .vp-erg-charts .vp-charts + .m-text{ margin-top:32px; }
}

/* 10. Fallstudien map on the column line instead of centred (Ahmed, 02.11.2026). Layout only. */
@media (min-width:981px){
  .fallstudien .fs-map-stage{ margin-left:0; margin-right:auto; }
}