/* ============================================================
   INNER PAGES — geometry-faithful styles measured from the XD
   artboards (1600 design px; container x145→1455 = 1310).
   pct(x) = (x-145)/1310. Key columns:
   x241=7.3% · x337=14.7% · x433=22% · x495=26.7% · x591=34.1%
   x625=36.6% · x687=41.4% · x817=51.3% · x879=56% · x913=58.6%
   x977=63.5% · x1057=69.6% · x1129=75.1% · x1167=78%
   ============================================================ */

/* ---------- shared ---------- */
.page-top { padding: 120px 0 0; }
.page-title {
  font-size: 60px; font-weight: 300; line-height: 1.25;
  color: var(--blue-700);
  margin-left: 7.3%;
}
.page-lede { margin: 45px 0 0 22%; max-width: 720px; font-size: 22px; }

.centered-head { text-align: center; padding-top: 160px; }
.centered-head h2 { font-size: 60px; font-weight: 300; color: var(--blue-700); }
.centered-head p { max-width: 980px; margin: 10px auto 0; font-size: 22px; }

/* ---------- data table (Projects · Archiv · Publications) ---------- */
.data-table { margin-top: 110px; }
.data-table .dt-head {
  display: grid;
  grid-template-columns: 26.7% 51.3% 22%;
  font-size: 14px; font-weight: 600; letter-spacing: .5px;
  color: var(--blue-300); text-transform: uppercase;
  padding-bottom: 40px;
}
.dt-row {
  display: grid;
  grid-template-columns: 26.7% 51.3% 22%;
  align-items: start;
  padding-bottom: 86px;
}
.dt-row .dt-img { width: 254px; max-width: 92%; }
.dt-row .dt-img img { width: 100%; height: auto; }
.dt-row h3 { font-size: 33px; font-weight: 400; line-height: 1.2; max-width: 560px; }
.dt-row .dt-desc { font-size: 18px; margin-top: 26px; max-width: 560px; }
.dt-row .dt-authors { font-size: 22px; margin-top: 26px; }
.dt-row .dt-source { font-size: 18px; }
.dt-row .dt-source .src-note { margin-top: 26px; }
.dt-row .dt-source .doi { display: inline-block; margin-top: 12px; }
.dt-row .recommend {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 20px; margin-top: 34px; color: var(--blue-700);
}
.dt-row .recommend .icon-corner { margin-top: -4px; }   /* icon rides top right, like .link-arrow */

/* ---------- RESEARCH OLD ---------- */
.highlights { margin-top: 100px; color: var(--blue-900); }  /* harmonized with Projects-head rhythm */
.highlights h2 {
  font-size: 60px; font-weight: 300; color: var(--blue-900);
  margin: 0 0 70px .2%;
}
.hl-grid-a {
  display: grid; grid-template-columns: 48.5% 44%; gap: 7.5%;
  align-items: start;
}
.hl-grid-a img { width: 100%; height: auto; }
/* pull the headings' cap height up to the image edge (line-height leading),
   so the vertical gap below the image equals the horizontal grid gutter */
.hl-grid-a h3, .hl-grid-bc h3 { margin-top: -12px; }
.hl-grid-bc {
  display: grid; grid-template-columns: 48.5% 44%; gap: 7.5%;
  margin-top: 7.5%;   /* same visual gap as the grid gutter next to the image */
}
.highlights h3 { font-size: 33px; font-weight: 600; margin-bottom: 22px; }
.highlights p { font-size: 22px; color: var(--blue-900); }
/* archive banner after the Projects table (XD has it at the page bottom) */
.archiv-bottom { padding: 60px 24px 160px; }
.archiv-bottom .banner-btn { margin-left: 56%; }

/* ---------- ARCHIV / PROJECTS section heads ---------- */
.projects-head { text-align: center; padding-top: 100px; }  /* ~symmetric air around the heading */
.projects-head h2 { font-size: 60px; font-weight: 300; color: var(--blue-700); }

/* ---------- MEMBERS ---------- */
.members-intro { position: relative; margin-top: 40px; min-height: 560px; }
.members-intro .intro-photo {
  width: 56%; margin-left: 0;
}
.members-intro .intro-photo img { width: 100%; height: auto; }
.members-intro .intro-text {
  position: absolute; left: 63.5%; top: 95px; width: 36.5%;   /* XD: heading glyphs 107px below photo top */
}
.members-intro .intro-text h2 {
  font-size: 60px; font-weight: 300; line-height: 1.15; margin-bottom: 40px;
}
.members-intro .intro-text p { font-size: 22px; }
.members-intro .join-banner { margin: 22px 0 0 calc(56% - 384px); }   /* right edge = photo right edge */

.leader-block {
  display: grid; grid-template-columns: 34.7% 58%; gap: 6.6%;
  margin-top: 250px;
}
.leader-block .portrait img { width: 100%; height: auto; }
.leader-block h3 { font-size: 33px; font-weight: 600; line-height: 1; margin-top: -4px; }   /* cap height optically level with portrait top */
.leader-block .role { font-size: 22px; margin-top: 20px; }
.leader-block .bio { font-size: 22px; margin-top: 28px; }
.leader-block .links { display: flex; gap: 38px; margin-top: 60px; flex-wrap: wrap; }

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 22%);
  column-gap: 4%;
  row-gap: 90px;
  margin-top: 120px;
}
.member-card .photo { aspect-ratio: 1/1; background: var(--blue-200); overflow: hidden; }
.member-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.member-card .plate {
  background: var(--blue-300); color: var(--blue-700);
  padding: 10px 12px 12px; min-height: 74px;
}
.member-card .plate .name { font-size: 20px; font-weight: 500; display: block; }
.member-card .plate .role { font-size: 18px; display: block; }

.alumni-head { padding-top: 170px; }
.alumni-head h2 { font-size: 60px; font-weight: 300; margin-left: 14.7%; }
.alumni-head p { margin: 12px 0 0 14.7%; max-width: 980px; font-size: 22px; }

/* ---------- PUBLICATIONS ---------- */
.pub-intro {
  display: grid; grid-template-columns: 53% 25%; gap: 22%;
  margin-top: 45px; margin-left: 22%;
}
.pub-intro { grid-template-columns: 58% 27%; gap: 15%; }
.pub-intro .lede { font-size: 22px; }
.pub-aside h4 { font-size: 22px; font-weight: 600; margin-bottom: 15px; }
.pub-aside img { width: 273px; max-width: 100%; height: auto; }
.pub-aside .cap { font-size: 14px; margin-top: 25px; }
.pub-aside .zoom { display: inline-block; font-size: 18px; margin-top: 30px; text-decoration: underline; }

/* ---------- OUR LAB ---------- */
.lab-hero { position: relative; margin-top: 55px; min-height: 0; }
.lab-hero .img-left {
  position: absolute; left: 0; top: 134px; width: 44%; max-width: 576px;
}
.lab-hero .img-right {
  position: absolute; left: 48.7%; top: 0; width: 51.3%; max-width: 672px;
}
.lab-hero img { width: 100%; height: auto; }
/* IMD-1 block: right column beside the hero images (XD: right text at 573px) */
.lab-imd .inner { margin-left: 51.3%; width: 48.7%; }
.lab-imd { margin-top: 573px; }
.lab-imd p { font-size: 22px; }
.lab-imd .join-banner { margin-top: 100px; }

/* ER-C + FZJ side by side, headlines top-aligned */
.lab-cols {
  display: grid; grid-template-columns: 44% 48.7%; gap: 7.3%;
  /* pull up beside the IMD-1 column: gap below the left hero image = the 7.3% gutter */
  margin-top: -128px; align-items: start;
}
.lab-imd h3, .lab-cols h3 { font-size: 33px; font-weight: 600; margin-bottom: 60px; }
.lab-cols p { font-size: 22px; }

/* FZJ band: dark card overlaps the photo top (XD: panel x779 w676 h379, 189px above image) */
.fzj-band { position: relative; margin-top: 150px; }
.fzj-band img { width: 100%; height: auto; display: block; }
.fzj-band .band-anchor { position: relative; }
.fzj-band .band-card {
  position: absolute; left: 48.4%; right: 24px; top: -189px; z-index: 1;
  background: var(--blue-900); color: var(--blue-300);
  padding: 40px 50px 44px;
}
.band-card h3 { font-size: 33px; font-weight: 600; color: var(--blue-300); }
.band-card p { font-size: 22px; margin-top: 30px; }
.band-card a { display: inline-block; font-size: 18px; margin-top: 40px; text-decoration: underline; }

.partner-head { text-align: center; padding-top: 190px; }
.partner-head h2 { font-size: 60px; font-weight: 300; }
.partner-head p { max-width: 940px; margin: 8px auto 0; font-size: 22px; }

.partner-table { margin-top: 140px; }
.partner-table .pt-head {
  display: grid; grid-template-columns: 34.1% 24.5% 41.4%;
  font-size: 14px; font-weight: 600; letter-spacing: .5px;
  color: var(--blue-300); text-transform: uppercase;
  padding-bottom: 48px;
}
.partner-table .pt-row {
  display: grid; grid-template-columns: 34.1% 24.5% 41.4%;
  font-size: 18px; padding-bottom: 100px; align-items: start;
}
.partner-table .pt-row .info { max-width: 500px; }
/* institution cell: name, logo (PRG-blue version, true colors on hover), group link.
   Two stacked <img>s (color + pre-generated blue variant) - no CSS masks, works everywhere */
.pt-inst { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-right: 32px; }
.pt-inst .p-logo { position: relative; display: inline-block; }
.pt-inst .p-logo:hover { opacity: 1; }
.pt-inst .p-logo img { height: 44px; width: auto; display: block; transition: opacity .2s ease; }
.pt-inst .p-logo .lc { opacity: 0; }               /* color version only on hover */
.pt-inst .p-logo:hover .lc { opacity: 1; }
.pt-inst .p-logo .lb { position: absolute; left: 0; top: 0; }
.pt-inst .p-logo:hover .lb { opacity: 0; }
.pt-inst .p-group {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 16px; color: var(--blue-700);
}
.pt-inst .p-group .icon-corner { width: 12px; height: 12px; stroke: var(--blue-700); fill: none; stroke-width: 1.4; margin-top: -2px; }

/* ---------- CONTACT ---------- */
.contact-top { position: relative; margin-top: 100px; }  /* air below "Work with us" title, per XD */
/* form toggles (XD: x145 y595/y690, 384x76 banners, no corner icon) */
.form-toggles {
  position: absolute; left: 0; top: 13px;
  display: flex; flex-direction: column; gap: 19px;
}
.form-toggles .form-toggle {
  border: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.form-toggles .form-toggle.is-active,
.form-toggles .form-toggle:hover { background: var(--blue-300); }
.contact-panel {
  margin-left: 35.7%; width: 68.9%; max-width: 902px;
  padding: 13px 0 60px 1%;
}
.contact-panel h2 { font-size: 33px; font-weight: 600; }
.contact-panel .sub { font-size: 33px; font-weight: 400; margin-top: 8px; max-width: 830px; }

.contact-form { margin-top: 90px; max-width: 830px; }
.contact-form .field { margin-bottom: 44px; }
.contact-form label {
  display: block; font-size: 18px; color: var(--blue-300); margin-bottom: 4px;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
  width: 100%; max-width: 620px;
  border: 0; border-bottom: 1px solid var(--blue-300);
  background: transparent; font: inherit; font-size: 33px; color: var(--blue-700);
  padding: 2px 0 8px;
}
.contact-form textarea {
  width: 100%; max-width: 829px; min-height: 358px;
  border: 1px solid var(--blue-700); background: transparent;
  font: inherit; font-size: 22px; color: var(--blue-700);
  padding: 16px; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 1px solid var(--blue-500); }

.contact-form .consent {
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; margin-top: 30px;
}
.contact-form .consent input {
  appearance: none; width: 23px; height: 23px;
  border: 1px solid var(--blue-700); background: transparent; cursor: pointer;
}
.contact-form .consent input:checked { background: var(--blue-700); }
.contact-form .send-row { margin-top: 24px; text-align: right; }

.stay-in-touch { position: absolute; left: .6%; top: 256px; width: 30%; }   /* XD y838 */
.stay-in-touch h3 { font-size: 33px; font-weight: 600; margin-bottom: 24px; }
.stay-in-touch .social a { display: block; font-size: 33px; padding: 5px 0; }
.stay-in-touch .adr-label { font-size: 18px; color: var(--blue-300); margin-top: 55px; }
.stay-in-touch address { font-style: normal; font-size: 33px; line-height: 1.4; margin-top: 12px; }

.map-band { position: relative; margin-top: 90px; }
.map-band img { width: 100%; height: auto; display: block; }

/* ---------- RESPONSE ---------- */
.response-main { padding-bottom: 160px; }
.response-main .msg { margin: 45px 0 0 22%; font-size: 33px; }
.response-main .back-row { margin: 100px 0 0 21.5%; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .page-title, .page-lede { margin-left: 0; }
  .page-lede { margin-top: 30px; }
  .members-intro { min-height: 0; }
  .members-intro .intro-photo { width: 100%; }
  .members-intro .intro-text { position: static; width: auto; margin-top: 40px; }
  .members-intro .join-banner { margin-left: 0; }
  .leader-block { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .alumni-head h2, .alumni-head p { margin-left: 0; }
  .pub-intro { grid-template-columns: 1fr; gap: 48px; margin-left: 0; }
  .dt-head { display: none; }
  .dt-row, .data-table .dt-head { grid-template-columns: 1fr; }
  .dt-row { gap: 24px; padding-bottom: 64px; }
  .hl-grid-a, .hl-grid-bc { grid-template-columns: 1fr; gap: 40px; }
  .archiv-bottom .banner-btn { margin-left: 0; }
  .lab-hero { min-height: 0; }
  .lab-hero .img-left, .lab-hero .img-right { position: static; width: 100%; margin-top: 24px; }
  .lab-imd { margin-top: 48px; }
  .lab-imd .inner { margin-left: 0; width: auto; }
  .lab-cols { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
  .fzj-band .band-card { position: static; margin-top: 48px; }
  .partner-table .pt-head { display: none; }
  .partner-table .pt-row { grid-template-columns: 1fr; gap: 12px; padding-bottom: 48px; }
  .contact-panel { margin-left: 0; width: auto; padding-left: 0; }
  .stay-in-touch { position: static; width: auto; margin-top: 70px; }
  .form-toggles { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 32px; }
  .response-main .msg, .response-main .back-row { margin-left: 0; }
}
@media (max-width: 720px) {
  .page-title { font-size: 38px; }
  .centered-head h2, .projects-head h2, .partner-head h2,
  .alumni-head h2, .highlights h2 { font-size: 36px; }
  .member-grid { grid-template-columns: 1fr; }
  .dt-row h3, .contact-panel h2, .contact-panel .sub,
  .stay-in-touch .social a, .stay-in-touch address,
  .response-main .msg { font-size: 24px; }
  .contact-form input[type="text"], .contact-form input[type="email"] { font-size: 24px; }
}

/* ---------- IMPRINT / PRIVACY ---------- */
.legal-text { max-width: 830px; margin-left: 22%; padding: 30px 24px 160px; }
.legal-text h2 { font-size: 33px; font-weight: 600; color: var(--blue-700); margin: 70px 0 24px; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p { font-size: 22px; }
.legal-text a { text-decoration: underline; }
@media (max-width: 1100px) { .legal-text { margin-left: 0; } }

/* ---------- PUBLICATIONS (real list) ---------- */
.pub-row { padding-bottom: 70px; }
.pub-row .dt-year { font-size: 33px; font-weight: 300; color: var(--blue-500); }
.pub-row h3 { font-size: 26px; }
.pub-row .dt-authors { font-size: 18px; margin-top: 14px; max-width: 620px; color: var(--blue-500); }
.pub-row .dt-authors strong { color: var(--blue-700); font-weight: 600; }
.pub-row .dt-source p { margin-bottom: 10px; }
.pub-row .dt-source em { font-style: normal; font-weight: 600; }
.pub-row .doi { font-size: 16px; word-break: break-all; text-decoration: underline; }
.pub-aside .profile-links { list-style: none; margin-top: 8px; }
.pub-aside .profile-links li { padding: 8px 0; border-bottom: 1px solid var(--blue-300); }
.pub-aside .profile-links a { font-size: 20px; display: flex; justify-content: space-between; align-items: center; }
.pub-aside .profile-links .icon-corner { width: 12px; height: 12px; stroke: var(--blue-700); fill: none; stroke-width: 1.4; }
.pub-chart { margin-top: 44px; }
.pub-chart .chart-cap { font-size: 15px; font-weight: 500; color: var(--blue-500); letter-spacing: .5px; margin-bottom: 10px; }
.pub-chart-svg { width: 100%; height: auto; display: block; }

.dt-empty { font-size: 22px; color: var(--blue-500); padding: 20px 0 120px; }

.contact-form .hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.dt-row .dt-period { font-size: 33px; font-weight: 300; color: var(--blue-500); margin-bottom: 24px; }

/* ---------- dual-mode contact form ---------- */
.contact-form[data-mode="contact"] .join-only { display: none; }
.contact-form[data-mode="join"] .contact-only { display: none; }
/* when hovering the other toggle, the active one drops to the inactive tone */
.form-toggles:hover .form-toggle.is-active:not(:hover) { background: var(--blue-200); }

.form-row2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6%; }
.upload-row { display: flex; align-items: center; gap: 24px; margin-top: 44px; max-width: 829px; }
.upload-note { font-size: 18px; color: var(--blue-700); flex: 1; }
/* upload box mirrors .banner-btn (384x76, text bottom-left, icon top-right);
   .contact-form label.upload-box outweighs the generic .contact-form label rule */
.contact-form label.upload-box {
  position: relative; flex: 0 0 384px;
  width: 384px; max-width: 80vw; height: 76px;
  margin-left: auto; margin-bottom: 0;
  background: var(--blue-200);
  font-size: 33px; color: var(--blue-700); cursor: pointer;
  transition: background .15s ease;
}
.upload-box:hover { background: var(--blue-300); }
.upload-box .icon-doc { position: absolute; top: 8px; right: 9px; width: 24px; height: 24px; color: var(--blue-700); }
.upload-box input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-box #cv-label {
  position: absolute; left: 8px; right: 14px; bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* clear-file button: hidden until a file is chosen, then replaces the doc icon */
.upload-clear {
  display: none;
  position: absolute; top: 8px; right: 9px;
  z-index: 1;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--blue-700); color: var(--bg);
  font-size: 16px; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .15s ease;
}
.upload-clear:hover { background: var(--blue-900); }
.upload-box.has-file .icon-doc { display: none; }
.upload-box.has-file .upload-clear { display: flex; }
.contact-form .consent a { text-decoration: underline; }