/* Gemeinsames Design der deutschen und englischen Landingpage. */

:root {
  --navy:#042645;
  --ink:#17364e;
  --muted:#587082;
  --sky:#60c6ef;
  --teal:#008caa;
  --pale:#eef8fc;
  --line:#d7e6ed;
  --width:1200px;
  --header-logo-width:480px
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font:16px/1.75 Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

img,svg {
  display:block;
  max-width:100%
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  color:var(--navy);
  line-height:1.16;
  letter-spacing:-.035em
}

h1 {
  font-size:clamp(40px,4.6vw,64px);
  font-weight:600
}

h2 {
  font-size:clamp(30px,2.9vw,38px);
  font-weight:600
}

p + p {
  margin-top:18px
}

button,a,summary {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:5px
}

.container {
  width:min(var(--width),calc(100% - 96px));
  margin-inline:auto
}

.skip {
  position:absolute;
  z-index:5;
  top:-90px;
  left:20px;
  padding:12px 20px;
  background:var(--navy);
  color:#fff
}

.skip:focus {
  top:12px
}

.site-header {
  border-bottom:1px solid var(--line);
  background:#fff
}

.header-inner {
  min-height:104px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:36px;
  padding-block:22px
}

.brands {
  position:relative;
  width:var(--header-logo-width);
  max-width:100%;
  flex-shrink:0
}

.brand-combined {
  display:block;
  width:100%;
  max-width:var(--header-logo-width);
  height:auto
}

.brand-link {
  position:absolute;
  top:0;
  bottom:0;
  border-radius:3px
}

.brand-link-or {
  left:0;
  width:40.833333%
}

.brand-link-hallmarq {
  right:0;
  width:40.833333%
}

.nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:26px;
  min-width:0;
  font-size:13px;
  line-height:1.4
}

.nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

.nav a:not(.nav-cta) {
  padding-block:10px
}

.nav a:not(.nav-cta):hover {
  text-decoration:underline;
  text-underline-offset:6px
}

.nav-cta {
  padding:13px 18px;
  border:1px solid var(--navy);
  border-radius:3px;
  font-weight:600;
  white-space:nowrap
}

.nav-cta:hover {
  background:var(--pale)
}

.eyebrow {
  color:#00758d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.5
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid var(--teal);
  padding-bottom:7px;
  font-size:14px;
  font-weight:600;
  line-height:1.4
}

.text-link:hover {
  color:var(--teal)
}

.text-link svg {
  width:18px;
  height:18px;
  flex-shrink:0
}

.body-copy {
  color:var(--muted)
}

.hero-grid > *,.stand-grid > *,.connection-grid > *,.connection .body-copy > *,.faq-grid > *,.meeting-grid > *,.announcements-grid > *,.event-grid > * {
  min-width:0
}

.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:62px 0 60px;
  background:radial-gradient(ellipse at 0 100%,#008caa80 0%,transparent 60%),linear-gradient(112deg,#006b83 0%,#03445f 44%,#042645 78%);
  color:#fff
}

.hero .container {
  position:relative;
  z-index:1
}

.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;
  gap:56px
}

.hero h1 {
  color:#fff;
  font-size:clamp(40px,4.3vw,60px)
}

.hero h1 span {
  color:#a1e4fa
}

.hero .eyebrow {
  color:#fff;
  margin-bottom:22px
}

.hero-copy > p:not(.eyebrow) {
  max-width:545px;
  color:#e1edf2;
  font-size:16px;
  line-height:1.75
}

.hero-copy > h1 + p {
  margin-top:25px
}

.hero .text-link {
  color:#fff;
  border-color:#96dce9
}

.hero .text-link:hover {
  color:#b6edff
}

.hero-copy > .text-link {
  margin-top:27px
}

.hero .text-link:focus-visible {
  outline-color:#a1e4fa
}

.event-strip {
  background:#f6fbfe;
  border-bottom:1px solid var(--line)
}

.event-grid {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  padding-block:23px;
  align-items:center
}

.event-item + .event-item {
  padding-left:34px;
  border-left:1px solid #bddae7
}

.event-label {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase
}

.event-item strong {
  display:block;
  margin-top:5px;
  color:var(--navy);
  font-size:18px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.015em
}

.section {
  padding-block:72px
}

.section .eyebrow {
  margin-bottom:20px
}

.stand-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:74px;
  align-items:start
}

.stand-grid h2 {
  max-width:480px
}
.stand-highlight {
  display:block;
  margin:0;
  padding:30px 36px;
  border-radius:0;
  background:none;
  color:#fff
}
.stand-highlight p {
  max-width:1000px;
  font-size:20px;
  line-height:1.65
}
.modalities {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0;
  border-top:1px solid #ffffff30;
  border-bottom:0
}
.modality {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  padding:30px clamp(12px,1.5vw,18px) 32px;
  color:#fff;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.01em
}
.modality + .modality {
  border-left:1px solid #ffffff30
}
.modality svg {
  width:62px;
  height:62px;
  color:#a1e4fa;
  flex-shrink:0
}

.connection {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#f3f9fc
}

.connection > .container {
  position:relative;
  z-index:1
}

.connection-grid {
  display:block
}

.connection-grid > div:first-child {
  padding:28px 34px 30px;
  border-radius:5px;
  background:linear-gradient(105deg,#007b96 0%,#04506b 43%,#042645 100%)
}

.connection .eyebrow {
  color:#fff;
  margin-bottom:12px
}

.connection h2 {
  max-width:1000px;
  color:#fff;
  font-size:clamp(30px,2.9vw,38px)
}

.connection .body-copy {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px 60px;
  margin-top:32px;
  max-width:1120px
}

.connection .body-copy > p {
  margin:0
}

.connection .body-copy > p:first-child {
  grid-column:1;
  grid-row:1/span 2
}

.connection .body-copy > p:nth-child(n+2) {
  grid-column:2
}
.group-members {
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  list-style:none;
  margin:32px 0 0;
  padding:24px 0 0;
  border-top:1px solid #c5dfe9;
  color:var(--navy);
  font-size:14px;
  font-weight:600
}

.group-members li + li {
  position:relative
}
.group-members li + li::before {
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--teal);
  left:-15px;
  top:11px
}

.faq-grid {
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:74px;
  align-items:start
}

.faq-grid h2::after {
  content:"";
  display:block;
  width:55px;
  height:3px;
  background:var(--teal);
  margin-top:24px
}

.faq-list {
  border-top:1px solid var(--line)
}

details {
  border-bottom:1px solid var(--line)
}

summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:23px 0;
  cursor:pointer;
  color:var(--navy);
  font-size:17px;
  font-weight:600;
  line-height:1.5
}

summary::-webkit-details-marker {
  display:none
}

summary svg {
  width:20px;
  height:20px;
  flex-shrink:0;
  transition:transform .18s ease;
  color:var(--teal)
}

details[open] summary svg {
  transform:rotate(180deg)
}

.faq-answer {
  padding:0 32px 25px 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.8
}

.meeting {
  background:var(--sky)
}

.meeting-grid {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:100px;
  align-items:start
}

.meeting .eyebrow {
  color:var(--navy)
}

.meeting h2 {
  font-size:clamp(34px,3.5vw,48px)
}

.meeting-copy > p:not(.eyebrow) {
  margin-top:22px;
  max-width:600px;
  color:#173e57
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:16px 22px;
  background:var(--navy);
  color:#fff;
  border-radius:3px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.5
}

.button:hover {
  background:#164764
}

.button svg {
  width:18px;
  height:18px;
  flex-shrink:0
}

.meeting .button {
  margin-top:30px
}

.meeting a:focus-visible {
  outline-color:var(--navy)
}

.meeting-info {
  border-left:1px solid #319ecb;
  padding-left:38px
}

.meeting-info .event-label {
  color:#214960
}

.meeting-info .date {
  margin-top:9px;
  color:var(--navy);
  font-size:25px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.025em
}

.meeting-info .location {
  margin-top:6px;
  color:var(--navy);
  font-size:18px
}

.stand-number {
  display:block;
  margin-top:20px;
  font-size:clamp(36px,4.2vw,58px);
  font-weight:600;
  color:var(--navy);
  line-height:1.15;
  letter-spacing:-.035em
}

.customer-note {
  margin-top:30px;
  padding-top:25px;
  border-top:1px solid #319ecb
}

.customer-note h3 {
  font-size:17px;
  letter-spacing:-.015em
}

.customer-note p {
  margin-top:10px;
  color:#173e57;
  font-size:14px;
  line-height:1.8
}
.announcements {
  padding-block:76px;
  background:var(--pale);
  border-top:1px solid var(--line)
}
.announcements-grid {
  display:block
}
.announcements h2 {
  font-size:clamp(30px,2.9vw,38px)
}
.announcements p:not(.eyebrow) {
  margin-top:18px;
  max-width:760px;
  color:var(--muted);
  font-size:16px
}
.press-links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:34px
}
.press-link {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:30px;
  min-width:0;
  min-height:236px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff
}
.press-link span {
  display:block;
  color:var(--navy);
  font-size:15px;
  font-weight:600;
  line-height:1.5
}
.press-link svg {
  width:21px;
  height:21px;
  color:var(--teal);
  flex-shrink:0
}

.site-footer {
  border-top:1px solid var(--line);
  padding-block:25px
}

.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  color:var(--muted);
  font-size:11px
}

.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:24px
}

.footer-links a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.footer-signature {
  display:flex;
  align-items:center;
  gap:13px
}

.footer-logo {
  display:block;
  width:360px;
  max-width:100%;
  height:auto
}

@media (min-width:1500px) {
  .hero {
    padding-top:74px;
    padding-bottom:70px
  }

}

@media (max-width:1100px) {
  .header-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:22px
  }

  .nav {
    width:100%;
    justify-content:space-between
  }

  .container {
    width:calc(100% - 64px)
  }

  .brands {
    width:var(--header-logo-width)
  }

  .nav {
    gap:18px
  }

  .hero-grid {
    gap:38px
  }

  .stand-grid,.faq-grid {
    gap:48px
  }

  .meeting-grid {
    gap:55px
  }

  .connection .body-copy {
    column-gap:44px
  }

}

@media (max-width:920px) {
  .header-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:22px
  }

  .nav {
    width:100%;
    justify-content:space-between
  }

  .brands {
    width:var(--header-logo-width)
  }

  .hero {
    padding-block:48px
  }

  .hero-grid {
    grid-template-columns:minmax(0,1fr);
    gap:34px
  }

  .hero h1 {
    font-size:clamp(38px,6.4vw,54px)
  }

  .hero-copy {
    max-width:700px
  }

  .hero-copy > p:not(.eyebrow) {
    max-width:680px
  }

  .section {
    padding-block:60px
  }

  .stand-grid,.faq-grid {
    grid-template-columns:minmax(0,1fr);
    gap:28px
  }

  .stand-grid h2 {
    max-width:650px
  }

  .meeting-grid {
    grid-template-columns:minmax(0,1fr);
    gap:32px
  }

  .meeting-info {
    border-left:0;
    border-top:1px solid #319ecb;
    padding:28px 0 0
  }

  .connection .body-copy {
    gap:18px 35px
  }

}

@media (max-width:600px) {
  .container {
    width:calc(100% - 40px)
  }

  .brands {
    width:100%;
    max-width:var(--header-logo-width)
  }

  .nav {
    font-size:11px;
    gap:8px
  }

  .nav-cta {
    padding:10px 12px
  }

  .hero {
    padding:40px 0
  }

  .hero-grid {
    gap:30px
  }

  .hero h1 {
    font-size:clamp(36px,8.9vw,49px)
  }

  .hero .eyebrow {
    font-size:10px;
    margin-bottom:20px
  }

  .hero-copy > h1 + p {
    margin-top:23px
  }

  .event-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 24px;
    padding-block:24px
  }

  .event-item:first-child {
    grid-column:1/-1
  }

  .event-item + .event-item {
    padding-left:0;
    border-left:0
  }

  .event-item strong {
    font-size:17px
  }

  .event-label {
    font-size:9px
  }

  .section {
    padding-block:46px
  }

  .section .eyebrow {
    margin-bottom:16px
  }

  .connection .eyebrow {
    margin-bottom:12px
  }

  .stand-grid,.faq-grid {
    gap:23px
  }

  .body-copy {
    font-size:15px
  }
.stand-highlight {
  margin:0;
  padding:25px 22px
}
.stand-highlight p {
  font-size:18px
}
.modalities {
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0
}
.modality {
  justify-content:center;
  padding:25px 16px;
  font-size:20px;
  gap:13px
}

  .modality:nth-child(3) {
    border-left:0
  }
.modality:nth-child(n+3) {
  border-top:1px solid #ffffff30
}
.modality svg {
  width:52px;
  height:52px
}

  .connection-grid > div:first-child {
    padding:23px 21px 25px
  }

  .connection h2 {
    font-size:29px
  }

  .connection .body-copy {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    margin-top:25px
  }

  .connection .body-copy > p:nth-child(n) {
    grid-row:auto;
    grid-column:auto
  }
.group-members {
  gap:14px 25px;
  font-size:13px;
  margin-top:27px
}

  .group-members li:first-child {
    width:100%
  }

  .group-members li:nth-child(2)::before {
    display:none
  }

  .faq-grid h2::after {
    margin-top:19px
  }

  summary {
    font-size:16px;
    padding-block:20px;
    gap:20px
  }

  .faq-answer {
    padding-right:0;
    font-size:14px
  }

  .meeting-copy > p:not(.eyebrow) {
    font-size:15px
  }

  .meeting .button {
    padding:15px 18px;
    font-size:10px;
    gap:18px
  }

  .meeting-info .date {
    font-size:23px
  }
.announcements {
  padding-block:48px
}

  .footer-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:15px
  }

  .footer-links {
    gap:23px
  }

  .footer-signature {
    gap:10px
  }

}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  summary svg {
    transition:none
  }

}

h1,h2,h3 {
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
  word-break:normal
}

@media(max-width:600px) {
  .hero h1 {
    font-size:clamp(32px,8.5vw,49px)
  }

}

/* Keep the stand at a restrained size within a wider navy background. */
.hero {
  padding:64px 0 60px;
  background:#042645
}

.hero-grid {
  display:block
}

.hero>.container {
  z-index:3
}

.hero-copy {
  position:relative;
  z-index:2;
  width:52%;
  max-width:620px
}

.hero-visual {
  position:absolute;
  top:50%;
  right:max(0px,calc((100% - 1600px)/2));
  width:min(60vw,800px);
  height:auto;
  aspect-ratio:3/2;
  transform:translateY(-50%);
  z-index:0;
  margin:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 94%,transparent 100%)
}

.hero-visual img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center
}

.hero-visual::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#042645 0%,transparent 14%,transparent 85%,#042645 100%)
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,#042645 0%,#042645 40%,#042645e6 50%,#04264533 62%,transparent 78%)
}

@media(max-width:920px) {
  .hero {
    display:flex;
    flex-direction:column;
    padding:48px 0 0
  }

  .hero>.container {
    order:1;
    flex:none
  }

  .hero-copy {
    width:100%;
    max-width:700px
  }

  .hero::after {
    display:none
  }

  .hero-visual {
    position:relative;
    inset:auto;
    order:2;
    flex:none;
    width:min(100%,800px);
    height:auto;
    aspect-ratio:3/2;
    transform:none;
    margin:34px auto 0;
    -webkit-mask-image:none;
    mask-image:none
  }

  .hero-visual::after {
    background:linear-gradient(180deg,#042645 0%,transparent 17%)
  }

}

@media(max-width:600px) {
  .hero {
    padding-top:40px
  }

  .hero-visual {
    margin-top:30px
  }

}

/* Dezente Sprachwahl vor den bestehenden Navigationslinks. */
.language-switch {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  gap:3px;
  color:var(--muted);
  font:10px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.04em
}
.language-switch[hidden] {display:none}
.language-switch button {
  appearance:none;
  border:0;
  border-radius:0;
  background:none;
  padding:0 2px;
  min-width:23px;
  min-height:44px;
  color:var(--muted);
  font:inherit;
  letter-spacing:inherit;
  cursor:pointer
}
.language-switch button[aria-pressed="true"] {
  color:var(--navy);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px
}
.language-switch button:hover {color:var(--navy)}
.language-switch button:focus-visible {
  outline:2px solid var(--teal);
  outline-offset:2px
}

/* Gemeinsame Hervorhebungen für beide Sprachfassungen. */
.stand-focus {margin-top:36px; border-radius:6px; overflow:hidden; background:var(--navy)}
.stand-highlight strong {color:#a1e4fa}
.group-members a {text-decoration:underline; text-underline-offset:4px; text-decoration-color:#8bb5c7}
.group-members a::after {content:"↗"; display:inline-block; margin-left:6px; color:var(--teal); font-weight:400}
.group-members a:hover {color:var(--teal); text-decoration-color:currentColor}
.faq-press-links {display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:18px}
.faq-press-links a {color:var(--navy); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:4px}
.faq-press-links a:hover {color:var(--teal)}
.meeting-actions {display:flex; align-items:center; gap:32px; margin-top:30px}
.meeting .meeting-actions .button {margin-top:0}
.meeting-image {width:140px; max-width:100%; margin:0; border-radius:12%; overflow:hidden; flex-shrink:0}
.meeting-image img {width:100%; height:auto}
.press-logo {display:flex; align-items:center; height:82px}
.press-logo img {width:auto; height:auto; max-width:min(100%,280px); max-height:76px}
.press-action {display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--line); padding-top:20px}
.press-link:hover {border-color:var(--teal); box-shadow:0 8px 24px #0426450b}
@media (max-width:600px) {
  .stand-focus {margin-top:28px}
  .press-links {grid-template-columns:minmax(0,1fr); gap:18px; margin-top:28px}
  .press-link {padding:25px; min-height:210px; gap:24px}
  .press-logo {height:76px}
  .meeting-actions {flex-direction:column; align-items:flex-start; gap:22px}
}

/* Rubriken stehen über der gemeinsamen Inhaltszeile beider Spalten. */
.split-heading {row-gap:0}
.split-heading > .eyebrow {grid-column:1 / -1}
@media (min-width:921px) {
  .split-heading > .faq-list {border-top:0}
  .split-heading > .faq-list > details:first-child > summary {padding-top:0}
}
@media (max-width:920px) {
  .split-heading > :last-child {margin-top:28px}
}
@media (max-width:600px) {
  .split-heading > :last-child {margin-top:23px}
}

@media (max-width:600px) {
  h2,.connection h2,.announcements h2 {font-size:clamp(25px,7.7vw,30px)}
  .modality:last-child {grid-column:1 / -1; border-left:0}
}
