/* Site-wide additions on top of the page designs: phone layout and cookie banner. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }

@media (max-width: 640px) {
  h1 { font-size: clamp(40px, 12vw, 96px) !important; }
  h2 { font-size: clamp(30px, 9vw, 60px) !important; }
  [style*="grid-column: span 2"] { grid-column: auto !important; }
  [style*="padding: 48px;"] { padding: 28px !important; }
  p[style*="font-size: 30px"] { font-size: 22px !important; }
  [style*="height: 600px; perspective"] { height: 440px !important; }
}

/* Cookie banner «Partnercheck» */
.ec-ck [hidden] { display: none !important; }
.ec-ck-backdrop { position: fixed; inset: 0; background: rgba(8, 36, 36, 0.62); z-index: 1000; }
.ec-ck-wrap { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1001; width: min(640px, calc(100vw - 32px));
  animation: ecckdrop .5s cubic-bezier(.3, .7, .2, 1); }
.ec-ck {
  max-height: calc(100vh - 120px); overflow: auto; box-sizing: border-box;
  background: #FFFFFF; color: #135E5D; border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  padding: 56px 32px 28px; display: flex; flex-direction: column; gap: 18px;
  font-family: 'Denim WD Regular', 'Denim WD', 'Poppins', system-ui, sans-serif;
}
.ec-ck-cookie { position: absolute; left: 50%; top: -48px; width: 88px; height: 88px; margin-left: -44px; pointer-events: none;
  animation: ecckswing 3s ease-in-out infinite; transform-origin: 50% 0; }
.ec-ck-head { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.ec-ck-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.ec-ck h2 { margin: 0; font-family: 'Denim WD INK Medium', 'Denim WD', 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 42px !important; line-height: 1; }
.ec-ck p { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 300; max-width: 480px; }
.ec-ck ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ec-ck li { display: flex; gap: 14px; align-items: center; background: #F4F5F6; border-radius: 12px; padding: 14px 16px; }
.ec-ck-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-ck-txt b { font-weight: 600; font-size: 16px; }
.ec-ck-txt span { font-size: 14px; line-height: 1.45; font-weight: 300; }
.ec-ck-sw { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 999px; border: none; padding: 3px; display: flex; cursor: pointer;
  justify-content: flex-start; background: #AEB4BA; }
.ec-ck-sw[aria-checked="true"] { justify-content: flex-end; background: #135E5D; }
.ec-ck-sw:disabled { cursor: not-allowed; background: #6E9C9B; }
.ec-ck-sw::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; display: block; }
.ec-ck-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ec-ck-btns button { height: 54px; border-radius: 999px; border: 1.5px solid #135E5D; background: #FFFFFF; color: #135E5D;
  font-family: inherit; font-weight: 500; font-size: 16px; cursor: pointer; }
.ec-ck-btns button.ec-ck-primary { background: #135E5D; color: #FFFFFF; }
.ec-ck-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.ec-ck-links button { min-height: 44px; border: none; background: transparent; color: #135E5D; font-family: inherit; font-size: 14px;
  text-decoration: underline; cursor: pointer; padding: 0; }
.ec-ck-links button.ec-ck-save { font-weight: 600; text-decoration: none; }
.ec-ck-reopen { position: fixed; left: 16px; bottom: 16px; z-index: 999; width: 52px; height: 52px; border-radius: 50%; border: none;
  background: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
@keyframes ecckdrop { from { opacity: 0; margin-top: 24px; } to { opacity: 1; margin-top: 0; } }
@keyframes ecckswing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .ec-ck-wrap, .ec-ck-cookie { animation: none; } }

/* ------------------------------------------------------------------ shell */
body { margin: 0; font-family: 'Denim WD Regular', 'Denim WD', 'Poppins', system-ui, sans-serif; color: #135E5D; }
main:focus { outline: none; }
a { color: #135E5D; }
a:hover { color: #0C4140; }
.ec-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ec-skip { position: absolute; left: 16px; top: -60px; z-index: 1200; background: #FFFFFF; color: #135E5D; padding: 10px 18px;
  border-radius: 999px; font-weight: 500; text-decoration: none; }
.ec-skip:focus { top: 12px; }
:focus-visible { outline: 3px solid #14DA14; outline-offset: 2px; }
.ec-noscript { max-width: 1280px; margin: 0 auto; padding: 32px; font-size: 17px; }

/* Header */
.ec-notice { background: #14DA14; color: #0E2A2A; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 48px; position: relative; font-size: 15px; font-weight: 500; text-align: center; }
.ec-notice p { margin: 0; }
.ec-notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ec-notice-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.ec-notice-x:hover, .ec-notice-x:focus-visible { background: rgba(14, 42, 42, 0.12); }
.ec-notice.is-hidden { display: none; }
.ec-header { background: #135E5D; color: #FFFFFF; }
.ec-header-in { max-width: 1280px; margin: 0 auto; padding: 18px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; box-sizing: border-box; }
.ec-logo { display: flex; align-items: center; }
.ec-menu-btn { display: none; margin-left: auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #4E8786; background: transparent; color: #FFFFFF; font: 500 15px 'Poppins', system-ui, sans-serif; cursor: pointer; }
.ec-nav-wrap { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 22px; }
.ec-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.ec-nav a { color: #FFFFFF; text-decoration: none; font-weight: 500; font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; }
.ec-nav a:hover, .ec-nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: #14DA14; }
/* Submenu: opens on hover or keyboard focus (desktop); always open inside the mobile menu. */
.ec-nav-item { position: relative; display: flex; }
.ec-sub { display: none; position: absolute; top: 100%; left: -18px; z-index: 60; min-width: 250px; flex-direction: column;
  padding: 10px 0; margin-top: 4px; background: #0E4847; border-radius: 10px; box-shadow: 0 16px 36px rgba(14, 42, 42, .35); }
.ec-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ec-nav-item:hover .ec-sub, .ec-nav-item:focus-within .ec-sub { display: flex; }
.ec-nav .ec-sub a { padding: 9px 18px; border-bottom: none; font-size: 14px; font-weight: 400; white-space: nowrap; }
.ec-nav .ec-sub a:hover, .ec-nav .ec-sub a:focus-visible { background: #135E5D; }
.ec-langs { display: flex; gap: 2px; border: 1px solid #4E8786; border-radius: 999px; padding: 3px; }
.ec-lang { min-width: 44px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; text-decoration: none; color: #FFFFFF; box-sizing: border-box; }
.ec-lang:hover { color: #FFFFFF; background: #0E4847; }
.ec-lang.is-on, .ec-lang.is-on:hover { background: #FFFFFF; color: #135E5D; }
.ec-cta { background: #E6E7E7; color: #135E5D; text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 22px; border-radius: 999px; }
.ec-cta:hover { background: #FFFFFF; color: #135E5D; }
@media (max-width: 1080px) {
  .ec-menu-btn { display: inline-flex; }
  .ec-nav-wrap { display: none; flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: 18px; padding: 8px 0 12px; }
  .ec-header.is-open .ec-nav-wrap { display: flex; }
  .ec-nav { flex-direction: column; gap: 4px; width: 100%; }
  .ec-nav a { font-size: 20px; padding: 10px 0; border-bottom: 1px solid #2E6E6D; }
  .ec-nav a[aria-current="page"] { border-bottom-color: #14DA14; }
  .ec-nav-item { flex-direction: column; }
  .ec-sub, .ec-nav-item:hover .ec-sub { display: flex; position: static; min-width: 0; margin: 0; padding: 4px 0 10px 16px;
    background: none; box-shadow: none; border-radius: 0; }
  .ec-nav .ec-sub a { font-size: 16px; padding: 7px 0; white-space: normal; }
  .ec-nav .ec-sub a:hover { background: none; text-decoration: underline; }
}
@media (max-width: 640px) { .ec-header-in { padding: 14px 16px; } }

/* Footer */
.ec-footer { background: #135E5D; color: #E6EFEE; }
.ec-footer a { color: #E6EFEE; text-decoration: none; }
.ec-footer a:hover { text-decoration: underline; }
.ec-footer a:hover { color: #FFFFFF; }
.ec-footer-in { max-width: 1280px; margin: 0 auto; padding: 72px 32px 40px; display: flex; flex-direction: column; gap: 56px; box-sizing: border-box; }
.ec-nl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 40px; align-items: end; }
.ec-nl-text { display: flex; flex-direction: column; gap: 12px; }
.ec-nl-text h2 { margin: 0; font-family: 'Denim WD INK Medium', 'Denim WD', 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 52px; color: #14DA14; line-height: 1; }
.ec-nl-text p { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 300; }
.ec-nl-form { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-nl-form input { flex: 1 1 240px; height: 52px; border-radius: 999px; border: 1px solid #E6EFEE; background: transparent; color: #FFFFFF;
  padding: 0 20px; font-size: 16px; font-family: inherit; box-sizing: border-box; min-width: 0; }
.ec-nl-form input::placeholder { color: #B9CFCE; }
.ec-nl-form button { height: 52px; padding: 0 26px; border-radius: 999px; border: none; background: #E6E7E7; cursor: pointer; color: #135E5D;
  font-weight: 500; font-size: 16px; font-family: inherit; }
.ec-nl-form button:hover { background: #FFFFFF; }
.ec-nl-form button:disabled { opacity: .6; cursor: wait; }
.ec-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 32px; border-top: 1px solid #4E8786;
  padding-top: 32px; font-size: 15px; line-height: 1.8; font-weight: 300; }
.ec-footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.ec-footer-col img { margin-bottom: 10px; }
.ec-footer-col h3 { margin: 0; color: #FFFFFF; font-weight: 500; font-size: 15px; }
.ec-footer .ec-footer-hl { color: #3DEA3D; font-weight: 500; }
.ec-linkbtn { border: none; background: none; padding: 0; color: #E6EFEE; font: inherit; text-decoration: underline; cursor: pointer; text-align: left; }
.ec-linkbtn:hover { color: #FFFFFF; }
.ec-footer .ec-footer-muted { color: #B4D2D1; font-size: 13px; margin-top: 8px; }

/* Photo placeholder until a picture is uploaded in the admin: the eClimber mountains */
.ec-ph { position: relative; overflow: hidden; background: #135E5D; }
.ec-ph::before, .ec-ph::after { content: ""; position: absolute; bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ec-ph::before { left: -6%; width: 55%; height: 58%; background: #E6E7E7; }
.ec-ph::after { right: -12%; width: 68%; height: 82%; background: #14DA14; }
.ec-ph-dark { background: #0E4847; }

/* Server-rendered pages: blog, legal texts, messages */
.ec-hero { background: #135E5D; color: #FFFFFF; }
.ec-hero-in { max-width: 1280px; margin: 0 auto; padding: 72px 32px 64px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
/* Until the page script has filled it, the content keeps a screen height, so the footer does not flash up and jump. */
#app:empty { min-height: 100vh; }
/* Small green text on petrol: a lighter green than the brand #14DA14 so it reaches the WCAG AA contrast of 4.5:1. */
.ec-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #3DEA3D; }
.ec-hero h1 { margin: 0; font-family: 'Denim WD INK Medium', 'Denim WD', 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 76px; line-height: .95; max-width: 960px; }
.ec-hero p { margin: 0; font-size: 19px; line-height: 1.6; font-weight: 300; color: #E6EFEE; max-width: 760px; }
.ec-hero a { color: #FFFFFF; }
.ec-section { max-width: 1280px; margin: 0 auto; padding: 64px 32px 96px; box-sizing: border-box; }
.ec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.ec-card { text-decoration: none; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border-radius: 8px; padding: 16px 16px 22px;
  color: #135E5D; transition: transform .25s ease, box-shadow .25s ease; }
.ec-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(19, 94, 93, .16); color: #135E5D; }
.ec-card img, .ec-card .ec-ph { height: 200px; width: 100%; object-fit: cover; border-radius: 6px; display: block; }
.ec-card time { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.ec-card b { font-size: 21px; font-weight: 500; line-height: 1.3; }
.ec-card span { font-size: 15px; line-height: 1.6; font-weight: 300; }
.ec-card u { margin-top: auto; text-decoration: none; font-weight: 500; font-size: 15px; }
.ec-empty { font-size: 17px; font-weight: 300; }
.ec-article { max-width: 820px; margin: 0 auto; padding: 56px 32px 96px; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; }
.ec-article > img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 12px; display: block; }
.ec-back { align-self: flex-start; text-decoration: none; font-weight: 500; font-size: 16px; }
.ec-prose { font-size: 18px; line-height: 1.7; font-weight: 300; color: #24302F; overflow-wrap: anywhere; }
.ec-prose h2 { font-family: 'Denim WD INK Medium', 'Denim WD', 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 34px !important;
  line-height: 1.1; color: #135E5D; margin: 40px 0 12px; }
.ec-prose h3 { font-size: 21px; font-weight: 600; color: #135E5D; margin: 28px 0 8px; }
.ec-prose p, .ec-prose ul, .ec-prose ol { margin: 0 0 16px; }
.ec-prose img { border-radius: 8px; }
.ec-prose blockquote { margin: 0 0 16px; padding: 4px 0 4px 20px; border-left: 3px solid #14DA14; }
.ec-prose table { border-collapse: collapse; margin: 0 0 16px; }
.ec-prose td, .ec-prose th { border-bottom: 1px solid #DDE3E3; padding: 8px 16px 8px 0; text-align: left; }
.ec-msg { background: #135E5D; color: #FFFFFF; min-height: 60vh; display: flex; align-items: center; }
.ec-msg-in { max-width: 1280px; width: 100%; margin: 0 auto; padding: 96px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.ec-msg h1 { margin: 0; font-family: 'Denim WD INK Medium', 'Denim WD', 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: clamp(48px, 10vw, 96px); line-height: .92; }
.ec-msg h1 span { color: #14DA14; }
.ec-msg p { margin: 0; font-size: 19px; line-height: 1.6; font-weight: 300; color: #E6EFEE; max-width: 640px; }
.ec-msg p a { color: #FFFFFF; }
.ec-btn { background: #E6E7E7; color: #135E5D; text-decoration: none; font-weight: 500; font-size: 17px; padding: 15px 26px; border-radius: 999px; }
.ec-btn:hover { background: #FFFFFF; color: #135E5D; }
@media (max-width: 640px) {
  .ec-hero-in, .ec-section, .ec-article, .ec-msg-in, .ec-footer-in { padding-left: 16px; padding-right: 16px; }
  .ec-nl-text h2 { font-size: 40px; }
}
@media print { .ec-header, .ec-footer, .ec-ck-reopen { display: none; } }
.ec-prose img { max-width: 100%; height: auto; display: block; margin: 8px 0; }
.ec-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.ec-gallery a { display: block; border-radius: 8px; overflow: hidden; }
.ec-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .2s; }
.ec-gallery a:hover img, .ec-gallery a:focus-visible img { transform: scale(1.03); }
.ec-files h2 { font-family: 'Denim WD INK Medium', 'Denim WD', 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 28px; margin: 0 0 12px; }
.ec-files ul { list-style: none; margin: 0; padding: 0; }
.ec-files li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #DDE3E3; font-size: 16px; }
.ec-files li span { color: #4A5058; font-size: 14px; white-space: nowrap; }
/* Hero parallax (site.js sets --mx/--my from -1 to 1 and --sy in px); the device sits closest, the green range furthest */
.ec-px { will-change: transform; transition: transform .25s ease-out; }
.ec-px-back { transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -6px + var(--sy, 0) * 0.10px), 0); }
.ec-px-front { transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -10px + var(--sy, 0) * 0.22px), 0); }
.ec-px-dev { transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 10px + var(--sy, 0) * -0.12px), 0); }
@media (prefers-reduced-motion: reduce) { .ec-px { transform: none !important; transition: none; } }

.ec-preview { margin: 0; padding: 10px 32px; background: #FFE7B3; color: #0E2A2A; font-size: 14px; font-weight: 500; text-align: center; }

/* Form fields side by side: inputs line up at the bottom even when one label wraps. */
form div[style*="display: grid"] > div[style*="flex-direction: column"] { justify-content: flex-end; }

/* Long words (Forschungspartnerschaft, électroniquement) never push the page wider than the screen. */
#app h1, #app h2, #app h3, #app h4 { overflow-wrap: break-word; }
@media (max-width: 640px) { #app h1, #app h2, #app h3, #app h4 { hyphens: auto; } }