/* =========================================================
   EASL — Canonical Stylesheet (single source of truth)
   No page-scoped overrides.
   ========================================================= */

/* -----------------------------
   1) Reset / Tokens / Base
----------------------------- */
* { box-sizing: border-box; }
:root{
  --ink:#0b0d12; --muted:#4f5966; --line:#e7edf2; --accent:#111; --bg:#faf9f7;

  /* Global frame width used everywhere (header, hero, subhero, content) */
  --frame: min(1800px, 96vw);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-2: 0 10px 22px rgba(0,0,0,.20);

  /* Orbit sizes */
  --orbit-center: 680px;   /* center circle desktop */
  --orbit-side:   240px;   /* side circles desktop */
  --orbit-center-m: min(80vw, 420px); /* center circle mobile */
  --orbit-side-m:   min(40vw, 200px); /* side circles mobile */

  /* Headings */
  --fz-hero: 48px; --fz-subhero: 40px;

  /* Global, consistent space below every subhero */
  --subhero-gap: clamp(40px, 4vw, 72px);
}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;

  /* ultra-subtle paper grain */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.03'/></svg>");
  background-repeat: repeat;
  background-size: 180px 180px;
}
a{ color:var(--accent); text-decoration:none; }
a:hover,
a:focus,
a:focus-visible{ text-decoration:none; }

/* UI links never show underlines */
.funding-pill,
.funding-pill:hover,
.funding-pill:focus-visible{
  text-decoration: none;
  color: inherit;
}

/* Skip link */
.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 14px;
  background:#000; color:#fff; border-radius:10px; z-index:1000; text-decoration:none;
  box-shadow:var(--shadow-2);
}

/* Layout containers (uniform width, safe for nesting) */
.container,
.container.wide,
header .container.wide.nav,
.hero > .inner,
.subhero > .inner,
.page > .container,
.section > .container,
.pagehead > .container{
  width: 100%;
  max-width: var(--frame);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}


/* -----------------------------
   2) Header / Navigation
----------------------------- */

/* Basis: gleiche Papier-Kachelung wie die Seite */
header{
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  /* keine Grafik per Default – verhindert Hairline oben */
  background-image: none;
  isolation: isolate;
}
/* Container: Tabs unten bündig */
header .container.wide.nav{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 0;
}

/* Desktop-Tabs (Grid) */
#site-nav{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  gap: 12px;
  align-items: end;
  min-width: 0;
}

/* Tabs: Grundzustand */
#site-nav > a.navbox{
  display:flex; align-items:center; justify-content:center;
  padding:16px 22px; margin:0; height:100%;
  line-height:1.2; text-align:center;
  background:var(--bg); color:var(--ink);
  border:2px solid #b0b5bd; border-bottom:none;
  border-radius:12px 12px 0 0;
  /* der „Schimmer“ nur im Grundzustand/hover, nicht beim aktiven Tab */
  box-shadow: inset 0 -8px 12px -4px rgba(0,0,0,.20);
  transition: border-color .12s ease;
  cursor:pointer; position:relative; z-index:2;
  text-decoration:none;
}

/* Hover/Focus: ruhig, ohne zusätzliches Shadow-Gewabere */
#site-nav > a.navbox:hover,
#site-nav > a.navbox:focus-visible{
  border-color:#aab0b8;
}

/* Aktiver Tab: KEIN innerer Schatten (= kein „bleibender Schatten“), sauber in den Rim ziehen */
#site-nav > a.navbox[aria-current="page"]{
  background:var(--bg); color:var(--ink);
  border:2px solid #b0b5bd; border-bottom:none;
  border-radius:12px 12px 0 0;
  margin-bottom:-2px;              /* überdeckt den Metall-Rand exakt */
  box-shadow:none;                 /* ← das ist der Fix */
  position:relative; z-index:3;
  pointer-events:none; cursor:default;
}


/* Mobile-Menü standardmäßig ausblenden */
details.mnav,
.hamburger{ display: none; }

/* ===== Desktop / iPad-Landscape (>=901px) ===== */
@media (min-width: 901px){
  /* Hamburger & <details> auf großen Screens komplett raus -> kein graues Kästchen */
  details.mnav{ display: none !important; }
  .mnav summary{ display: none !important; }

  /* Metall-Rim + Shadow nur hier (mobil nicht) */
  header{
    background-image: inherit;
    background-repeat: repeat;
    background-size: 180px 180px;
    background-position: 0 0;
    border-bottom: 2px solid #b0b5bd;
    box-shadow: none !important;
  }
}

/* -----------------------------
   3) Buttons
----------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:12px; font-size:14px;
  border:1px solid #000; background:#000; color:#fff; cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:transform .1s ease, box-shadow .12s ease;
}
.btn:hover{ background:#222; transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn:active{ transform:translateY(0); }
.btn.alt{ background:#fff; color:#111; border-color:#111; }
.btn.alt:hover{ background:#f7f7f7; }

/* Mini buttons with metal rim */
.mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  font-size:.9rem;
  background:#000; color:#fff;
  border:2px solid #b0b5bd;           /* Metall-Rand */
  border-radius:12px;
  box-shadow:var(--shadow-1);
  box-sizing:border-box;               /* Border einberechnen */
  background-clip:padding-box;         /* Rand bleibt sichtbar */
  -webkit-background-clip:padding-box; /* iOS/Safari */
  text-decoration:none;
}
.mini-btn:hover,
.mini-btn:focus-visible{
  background:#222;
  transform: translate3d(0,-1px,0);
  box-shadow: var(--shadow-2);
}
/* Never underline */
.mini-btn,
.mini-btn:hover,
.mini-btn:focus,
.mini-btn:focus-visible{
  text-decoration: none;
  color: #fff;
}

/* -----------------------------
   4) Hero / Subhero (boxed)
----------------------------- */
.subhero{ margin-bottom: var(--subhero-gap); }

.subhero.subhero--boxed{
  background: none;
  border-top: 0;
  border-bottom: 0;
  overflow: visible;
  margin-top: clamp(24px, 6vw, 56px);
  margin-bottom: var(--subhero-gap);
}

/* FIX: Border als Overlay, nicht am Container selbst → keine weißen Hairlines */
.subhero--boxed .subhero-frame{
  position: relative;             /* Träger fürs Overlay */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border: 0;                      /* kein echter Border mehr */
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-1);
}
.subhero--boxed .subhero-frame::after{
  content: "";
  position: absolute;
  inset: 0;                       /* deckt die Box exakt ab */
  border: 3px solid #b0b5bd;      /* Metall-Rand */
  border-radius: 14px;
  pointer-events: none;
}

/* optionales Viewport-Element (wird nicht zwingend benutzt) */
.subhero--boxed .subhero-viewport{
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 1000px;
  overflow: hidden;
  position: relative;
  background: #fff;
}

/* Bild füllt die Box, keine Auto-Margen → saubere Kante */
.subhero--boxed .subhero-img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Nur für Join us, zieht das Bild auf die Box */
.subhero--cover .subhero-viewport { position: relative; }
.subhero--cover .subhero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block; margin: 0;
}

/* WebKit/Nahkampf gegen Hairlines */
@supports (-webkit-touch-callout: none){
  .subhero--boxed .subhero-frame{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

@media (max-width: 640px){
  .subhero--boxed .subhero-viewport{ max-height: none; }
}

/* -----------------------------
   5) Orbit (emblem + side circles)
----------------------------- */
.orbit{
  display:grid;
  grid-template-columns: minmax(var(--orbit-side),1fr) var(--orbit-center) minmax(var(--orbit-side),1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "left center rt"
    "left center rb";
  gap:28px 56px;
  align-items:start; justify-items:center; justify-content:center;
  width: 100%;
  max-width: var(--frame);
  padding-top: 120px;    /* ← NEU: Abstand als Padding */
  margin: 0 auto;       /* ← statt margin-top */
}

.orbit-left{ grid-area:left; align-self:center; }
.orbit-center{ grid-area:center; }
.orbit-rt{ grid-area:rt; }
.orbit-rb{ grid-area:rb; }

/* Circles + rims */
.round-link{ border:3px solid #b0b5bd; }
.round-link::before{
  content:""; position:absolute; inset:3px; border-radius:50%; pointer-events:none;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 4px rgba(0,0,0,.08);
}
.round-link.circle-card{
  width:var(--orbit-side); height:var(--orbit-side);
  border-radius:50%; overflow:hidden; position:relative; display:block;
  background:transparent;
  box-shadow:0 12px 24px rgba(0,0,0,0.18);
  transition:box-shadow .12s ease, transform .12s ease;
}
.round-link.circle-card:hover{ transform:translateY(-2px); box-shadow:0 18px 32px rgba(0,0,0,0.24); }
.round-link.circle-card > img.circle-img{
  position:absolute; inset:-18px; width:calc(100% + 36px); height:calc(100% + 36px);
  display:block; object-fit:cover; border:0; border-radius:0; z-index:0;
}

/* Center emblem */
.round-link.emblem-link{
  width:var(--orbit-center); height:var(--orbit-center);
  border-radius:50%; overflow:hidden; position:relative; display:block;
  background:transparent;
  /* entschärfter Schatten, kein 1px-Liner mehr */
  box-shadow:
    0 24px 64px 8px rgba(0,0,0,.34),
    0 12px 28px rgba(0,0,0,.20);
  transition: box-shadow .12s ease, transform .12s ease;
  margin:0 auto;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
.round-link.emblem-link:hover{
  transform: translateY(-2px);
  /* kein 1px-Liner mehr */
  box-shadow:
    0 34px 100px 12px rgba(0,0,0,.42),
    0 16px 36px rgba(0,0,0,.24);
}
.round-link.emblem-link > img{
  width:100%; height:100%; object-fit:cover; display:block; box-shadow:none;
  transform: translateY(-1%) scale(1.3); transform-origin:center;
  position:relative; z-index:0;
}

/* Orbit text */
.orbit-center .tagline{ margin-top:48px; font-size:2rem; font-weight:800; text-align:center; }
.orbit-center .tagline-sub{ margin-top:16px; font-size:1.2rem; font-weight:400; color:var(--muted); text-align:center; margin-bottom:16px; }
.orbit .body{ margin-top:16px; max-width:26ch; text-align:center; }
.orbit .body h3{ margin:0 0 8px; font-size:1.35rem; line-height:1.2; font-weight:800; letter-spacing:-0.01em; }
.orbit .body p{  margin:0; font-size:1.05rem; line-height:1.28; opacity:.96; }
.tagline-sub{ font-size:1.25rem; color:#0b0d12 !important; margin-top:12px; text-align:center; }

/* -----------------------------
   6) Grids / Tiles / Page layouts
----------------------------- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.tile{
  grid-column:span 4; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.tile img{ width:100%; display:block; object-fit:cover; }
.tile .body{ padding:12px; }
.tile h3{ margin:0 0 6px; font-size:18px; }
.tile p{ margin:0 0 8px; color:#4d5665; }

/* Grid utilities */
.grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.grid-auto-200 { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
/* Grid safety: Kinder dürfen schrumpfen, damit Inhalt nicht rausdrückt */
.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-auto-200 > *{
  min-width: 0;
}

.contact-wrap > *{ min-width: 0; }

/* Lange Wörter/URLs innerhalb der Boxen umbrechen */
.cardbox,
.tile,
.pub-card,
.news-item,
.partner-card,
.contact-card{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Card cluster – robuster Metallrand (kann unten nicht „verschwinden“) */
.cards > *{
  position: relative;            /* Träger für Overlay */
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  overflow: visible;             /* nichts abschneiden */
  border: 0;                     /* echten Border abschalten */
  background-clip: padding-box;
}
.cards > *::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #b0b5bd;     /* Metall-Rand */
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}
.cards > * > :first-child{ margin-top: 0; }
.cards > * > :last-child{  margin-bottom: 0; }

.research-wrap{ display:grid; grid-template-columns:0.45fr 1.55fr; gap:20px; align-items:start; }
.research-aside{ position:sticky; top:84px; }
.emblem-panel{ background:#fff; }
.emblem-panel .pad{ padding:0; display:grid; justify-items:center; }
.emblem-panel img{ width:220px; height:220px; }

.page-wrap{ display:grid; grid-template-columns:0.40fr 1.60fr; gap:20px; align-items:start; }
.page-aside{ position:sticky; top:84px; }
.page-aside .emblem-panel{ background:#fff; }
.page-aside .emblem-panel .pad{ padding:0; display:grid; justify-items:center; }
.page-aside .emblem-panel img{ width:200px; height:200px; }

/* -----------------------------
   7) Funding band / Sponsors / Partners
----------------------------- */
.funding-band{ display:block; text-align:center; }
.funding-band .funding-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; border:2px solid #b0b5bd; border-radius:12px;
  padding:12px 18px; margin:16px auto;
  max-width:100%;          /* ← war: none */
  width: fit-content;      /* passt sich dem Inhalt an, aber nicht über 100% */
  flex-wrap: wrap;         /* falls Text + Logo zusammen zu breit wären */
  min-width: 0;            /* darf innerhalb schmaler Spalten schrumpfen */
  box-shadow:var(--shadow-1);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.funding-band .funding-pill:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.funding-band .funding-pill img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
  max-height:44px;
  object-fit:contain;
  min-width:0;  /* verhindert Overflow als Flex-Item auf iOS */
}
.funding-band .funding-pill:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow-2); }

.partner-card{
  display:flex; align-items:center; justify-content:center;
  margin:12px auto; padding:12px 16px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:var(--shadow-1);
}
.partner-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.partner-card:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.partner-card img{
  display:block;
  max-width:100%;
  max-height:64px;
  height:auto;
  object-fit:contain;
}


.sponsor-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin:0; padding:0; list-style:none;
}
.sponsor-card a{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#fff; border:2px solid #b0b5bd; border-radius:12px; padding:14px; color:inherit; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:var(--shadow-1);
}
[data-page="sponsors"] .sponsor-card a{ height:120px; justify-content:center; }
[data-page="sponsors"] .sponsor-card img[src$="inca.png"],
[data-page="sponsors"] .sponsor-card img[src$="inca.svg"],
[data-page="sponsors"] .sponsor-card img[src$="arc.png"],
[data-page="sponsors"] .sponsor-card img[src$="arc.svg"]{
  max-height:48px; max-width:88%; object-fit:contain;
}
@media (max-width:640px){ [data-page="sponsors"] .sponsor-card a{ height:110px; } }
.sponsor-card a:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.sponsor-card a:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.sponsor-card img{
  display:block;
  max-width:100%;
  max-height:64px;
  height:auto;
  object-fit:contain;
}

/* Allow flex/grid items to shrink if content is wide */
.partner-card,
.sponsor-card a,
.funding-band .funding-pill { min-width: 0; }
/* -----------------------------
   8) News entries (long form)
----------------------------- */
.news-entry{
  background:#fff; border:2px solid #b0b5bd; border-radius:12px; /* metal rim */
  box-shadow:var(--shadow-1);
  padding:16px 18px; margin:18px 0; scroll-margin-top:84px;
}
.news-entry .meta{ font-size:.9rem; opacity:.8; margin-bottom:6px; }
.news-entry h3{ margin:4px 0 10px; font-size:1.25rem; }
.news-entry h4{ margin:14px 0 8px; font-size:1.05rem; }

/* -----------------------------
   9) Publications / News (cards & grids)
----------------------------- */
.pub-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px; list-style:none; margin:0; padding:0;
}
.pub-grid > li{ list-style:none; display:flex; }
.pub-grid > li > a.cardbox.pub-item{ display:flex; flex:1; text-decoration:none; }

.pub-card{
  display:flex; flex-direction:column; flex:1;
  padding:14px 16px; border-radius:12px;
  border:2px solid #b0b5bd; background:#fff; box-shadow:var(--shadow-1); color:#0b0d12;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pub-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); filter: brightness(1.02); }
.pub-card:focus-visible{ transform: translateY(-2px); box-shadow: var(--shadow-2); filter: brightness(1.02); }
.pub-venue{ font-weight:600; margin-bottom:6px; }
.pub-title{ margin:0 0 6px; font-size:1.05rem; }
.pub-meta { margin-top:auto; opacity:.85; font-size:.95rem; }

/* -----------------------------
   News boxes (styled like publications)
----------------------------- */
.news-list.clean {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-list.clean > li { list-style: none; display: flex; }
.news-list.clean > li > a.cardbox.news-item {
  display: flex; flex-direction: column; flex: 1;
  background: #fff; border: 2px solid #b0b5bd; border-radius: 12px;
  box-shadow: var(--shadow-1); padding: 16px; color: var(--ink); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.news-list.clean > li > a.cardbox.news-item:hover,
.news-list.clean > li > a.cardbox.news-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  filter: brightness(1.02);
}
.news-item .news-body { display: flex; flex-direction: column; flex: 1; }
.news-item .meta { font-size: 0.9rem; margin-bottom: 6px; color: var(--ink); opacity: 1; }
.news-item h3 { margin: 4px 0 8px; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.news-item p { margin: 0; font-size: 0.95rem; line-height: 1.35; color: var(--ink); }

/* -----------------------------
   10) Footer
----------------------------- */
footer { background:var(--bg); background-image:inherit; text-align:center; }
footer .container.foot{
  width:var(--frame); margin:0 auto; padding:16px 0 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
footer .foot-partners{ display:flex; align-items:center; justify-content:center; gap:12px; }
footer .foot-meta{ text-align:center; font-size:.95rem; color:var(--muted); }

/* Footer partner card (fixed small) */
footer .foot-partners .partner-card{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:#fff; border:2px solid #b0b5bd; border-radius:14px;
  padding:12px 16px; margin:12px auto; max-width:200px; box-shadow:var(--shadow-1);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
footer .foot-partners .partner-card img{
  display:block;
  max-width:100%;
  max-height:64px;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}

/* -----------------------------
   11) Publications page layout helpers
----------------------------- */
#pub-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px 20px;
  align-items:start;
}
#pub-cover .cover-link{ display:block; cursor:pointer; }
#pub-cover img{ display:block; width:100%; height:auto; border-radius:12px; } /* photo-rim adds metal rim */
.paper-list{ display:grid; grid-template-columns:1fr; gap:12px; }
.paper-card{
  display:block; padding:14px 16px; background:#fff;
  border:2px solid #b0b5bd; border-radius:12px; box-shadow:var(--shadow-1);
  text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.paper-card:hover,
.paper-card:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
#pub-cover .cover-link .photo-rim{
  display:block; width:100%; height:auto; transition: transform .12s ease, box-shadow .12s ease;
}
#pub-cover .cover-link:hover .photo-rim,
#pub-cover .cover-link:focus-visible .photo-rim{
  transform: translateY(-2px); box-shadow: var(--shadow-2);
}

/* -----------------------------
   12) Contact layouts / forms
----------------------------- */
.contact-wrap{
  display: grid; grid-template-columns: 0.45fr 1.55fr; gap: 20px; align-items: stretch;
}
.contact-form label{ display:block; font-weight:600; margin:10px 0 6px; }
.contact-form input,
.contact-form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff;
}
.contact-form .hp{ position:absolute; left:-5000px; opacity:0; }
.contact-form .status{
  margin:10px 0 0; padding:10px 12px; border:1px solid #e7edf2; border-radius:10px; background:#f7fafc;
}
.contact-form .status.ok{ border-color:#10b981; background:#ecfdf5; color:#065f46; }
.contact-form .status.error{ border-color:#f59e0b; background:#fffbeb; color:#92400e; }
.subcard{ border:2px solid #b0b5bd; border-radius:12px; box-shadow:var(--shadow-1); padding:12px 14px; margin-top:12px; }

/* Contact: metal-rim Send button */
[data-page="contact"] .contact-form .btn{
  border:2px solid #b0b5bd; border-radius:12px; background:#000; color:#fff;
  box-shadow:var(--shadow-1); background-clip:padding-box;
  transition:transform .1s ease, box-shadow .12s ease;
}
[data-page="contact"] .contact-form .btn:hover,
[data-page="contact"] .contact-form .btn:focus-visible{
  background:#222; transform:translateY(-1px); box-shadow:var(--shadow-2);
}

/* -----------------------------
   13) Global rim color lock on hover/focus
----------------------------- */
.sponsor-card a:hover,
.sponsor-card a:focus-visible,
.pub-card:hover,
.pub-card:focus-visible,
.news-list.clean > li > a.cardbox.news-item:hover,
.news-list.clean > li > a.cardbox.news-item:focus-visible,
.partner-card:hover,
.partner-card:focus-visible,
.contact-card:hover,
.contact-card:focus-visible{
  border-color:#b0b5bd;
}

/* -----------------------------
   14) Responsive (layout)
----------------------------- */
@media (max-width:1100px){
  .research-wrap{ grid-template-columns:1fr; } .research-aside{ position:static; }
  .contact-wrap{ grid-template-columns: 1fr; }
  .emblem-panel img{ width:180px; height:180px; }

  .page-wrap{ grid-template-columns:1fr; } .page-aside{ position:static; }
  .page-aside .emblem-panel img{ width:160px; height:160px; }

  /* Orbit sizes */
  .orbit{
    grid-template-columns: minmax(280px,1fr) var(--orbit-center-m) minmax(280px,1fr);
  }
  .round-link.emblem-link{ width:var(--orbit-center-m); height:var(--orbit-center-m); }
  .round-link.circle-card{ width:var(--orbit-side-m); height:var(--orbit-side-m); }

  /* One-column lists on smaller screens */
  .pub-grid{ grid-template-columns: 1fr; }
  .news-list.clean{ grid-template-columns: 1fr; }
}
@media (max-width:960px){ .tile{ grid-column:span 6; } }
@media (max-width:640px){ .tile{ grid-column:span 12; } }
@media (max-width:680px){ .news-entry{ padding:14px; } }

/* -----------------------------
   15) Team utilities
----------------------------- */
.person{ display:flex; align-items:center; gap:12px; margin:10px 0; }
.avatar{ width:140px; height:140px; object-fit:cover; object-position:center 30%; border-radius:12px; }
.photo-rim{ border:2px solid #b0b5bd; border-radius:12px; box-shadow:var(--shadow-1); }

/* Visible, consistent focus ring */
:where(a, button, .cardbox, .partner-card, .contact-card):focus-visible{
  outline:2px solid #0b0d12;
  outline-offset:3px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Minimal print */
@media print{
  header, .hiring-band, .subhero, footer{ display:none !important; }
  body{ background:#fff; color:#000; }
  .page .container{ width:100%; }
  a::after{ content:" (" attr(href) ")"; font-size:90%; }
}

/* ==== Hiring banner ==== */
.hiring{
  display:block;
  margin:32px 0;
  padding:16px 20px;
  max-width:100%;
  border-radius:12px;
  border:2px solid #b0b5bd;           /* metal rim */
  background:#fff;
  box-shadow:var(--shadow-1);
  color:inherit;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.hiring:hover,
.hiring:focus-visible{
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
  filter:brightness(1.02);
}
.hiring .row{ display:flex; align-items:center; gap:12px; }
.hiring .dot{
  width:14px; height:14px; border-radius:50%;
  background:#e63946; flex-shrink:0;
  box-shadow:0 0 0 4px rgba(230,57,70,.2);
}
.hiring .copy{ font-size:1.05rem; font-weight:600; line-height:1.3; }

/* ==== Hiring full-width band wrapper ==== */
.hiring-band{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  padding:40px 0;
  background:#f5f7f9;
  border-top:1px solid #e6eaee;
  border-bottom:1px solid #e6eaee;
}
@media (min-width:1024px){
  .hiring-band{ padding:56px 0; }
}

/* ===== Desktop Textkomfort (≥901px) — etwas mehr Luft ===== */
@media (min-width: 901px){
  /* Listen: Fließtext einrücken – NICHT unsere Grid-Listen */
  .page > .container ul:not(.pub-grid):not(.news-list):not(.sponsor-grid),
  .section > .container ul:not(.pub-grid):not(.news-list):not(.sponsor-grid),
  .news-entry ul,
  .pub-card ul,
  .paper-card ul,
  .contact-card ul,
  .cards ul,
  .page > .container ol,
  .section > .container ol {
    line-height: 1.56;
    padding-left: 1.2em;
  }

  /* Überschriften-Rhythmus (leicht luftiger) */
  .page > .container h2,
  .page > .container h3,
  .section > .container h2,
  .section > .container h3 {
    margin-top: 1.15em;
    margin-bottom: 0.6em;
  }

  /* Kleine Meta-Zeilen nicht zu eng */
  .news-entry .meta,
  .pub-meta {
    line-height: 1.5;
  }
}


/* ===== Research · Streams (arbeiten mit .grid-2.cards) ===== */
[data-page="research"] .grid-2.cards{
  align-items: stretch;
  gap: 16px;
}
[data-page="research"] .grid-2.cards h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
}

@media (max-width: 480px){
  [data-page="research"] .grid-2.cards{
    grid-template-columns: 1fr; /* sehr schmal: einspaltig */
  }
}

footer .foot-partners .partner-card:hover,
footer .foot-partners .partner-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.12));
}

footer .foot-partners .partner-card:focus-visible{
  outline: 2px solid #0b0d12;
  outline-offset: 3px;
}

/* Marker/Listenstil restlos entfernen (alle Browser) */
details.mnav > summary::-webkit-details-marker{ display: none; }
details.mnav > summary::marker{ content: ""; }
details.mnav > summary{ list-style: none; }

/* ===== Mobile gesammelt ===== */
@media (max-width: 900px){

  /* Header · Navigation */
  #site-nav{ display: none; }
  details.mnav{ display: block; margin-left: auto; position: relative; }
  header{
    border: 0;
    box-shadow: none;
    background: var(--bg);
    background-image: none;
  }
  .hamburger{
    display:flex;
    flex-direction:column;
    justify-content:center; align-items:center;
    width:44px; height:44px; gap:5px; margin:0; padding:0;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    background:#fff; border:2px solid #b0b5bd; border-radius:12px;
    box-shadow:var(--shadow-1);
  }
  .hamburger .bar{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

  .mnav-panel{
    position:absolute; top:calc(100% + 8px); right:0;
    display:none; flex-direction:column;
    width:min(560px, calc(100vw - 24px));
    max-height:70vh; overflow:auto;
    background:var(--bg); background-image:inherit; background-repeat:repeat;
    background-size:180px 180px; background-position:0 0;
    border:0; border-radius:12px; box-shadow:var(--shadow-2); padding:6px 0;
  }
  .mnav[open] .mnav-panel{ display:flex; }
  .mnav-panel a{
    display:block; color:var(--ink); white-space:nowrap; text-decoration:none;
    font-size:17px; line-height:1.4; padding:12px 14px;
  }
  .mnav-panel a:hover, .mnav-panel a:focus-visible{ background:rgba(0,0,0,.06); }

  /* Orbit zentriert */
  .orbit-center,
  .orbit-left,
  .orbit-rt,
  .orbit-rb{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .round-link.emblem-link,
  .round-link.circle-card{
    margin-left: auto;
    margin-right: auto;
  }
  .orbit{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    padding-top: 100px; /* iPhone-Puffer unter dem Header */
  }
  .orbit .body{ text-align: center; }

  /* Subhero Außenabstand */
  .subhero.subhero--boxed{
    margin-left: 12px;
    margin-right: 12px;
  }
  .subhero--boxed .subhero-frame{ max-width: 100%; }

  /* Text-Padding unter Subheros */
  .page > .container,
  .section > .container,
  .subhero + .page > .container,
  .subhero + .section > .container{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Textkomfort mobil */
  .page > .container p,
  .section > .container p{
    line-height: 1.58;
    word-spacing: 0.02em;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: anywhere;
    word-break: normal;
    margin-top: 0.6em;
    margin-bottom: 0;
  }

  /* Research Streams mobil */
  [data-page="research"] .grid-2.cards{
    grid-template-columns: 1fr;
  }
  [data-page="research"] .grid-2.cards .mini-btn{ margin: 0; }

  /* Publications iPhone Overflow Fix */
  #pub-layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #pub-layout > *{ min-width: 0; }
  #pub-cover img{
    max-width: 100%;
    height: auto;
    display: block;
  }
  .paper-list{ width: 100%; }
/* Utility-Grids mobil einkolumnig */
.grid-2,
.grid-3,
.grid-4,
.grid-auto-200{
  grid-template-columns: 1fr;
}

/* Contact mobil: eine Spalte */
.contact-wrap{ grid-template-columns: 1fr; }

/* France 2030 Pill Breite begrenzen */
.funding-band .funding-pill{
  width: min(92vw, 360px);
}
}