/* Static-site shell and accessible enhancement layer; v20 design utilities live in design.css. */
[hidden] {
  display: none !important;
}
html {
  scroll-padding-top: 110px;
}
body {
  background: #f5f3eb;
  color: #142233;
}
.reveal,
.fade-in,
.route-node,
.line-draw-y {
  opacity: 1 !important;
  transform: none;
  visibility: visible;
}
.route-path {
  stroke-dashoffset: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px;
  background: #f5f3eb;
  color: #142233;
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: none;
}
:focus-visible {
  outline: 3px solid #0099b0;
  outline-offset: 5px;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 92px;
}
.brand,
.header-actions,
.desktop-nav,
.languages {
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand {
  flex-shrink: 0;
  gap: 12px;
}
.brand-symbol {
  height: 64px;
  width: auto;
}
.brand-wordmark {
  width: 150px;
  height: auto;
}
.desktop-nav {
  gap: 22px;
}
.desktop-nav a {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.desktop-nav [aria-current='page'],
.languages [aria-current] {
  color: #008294;
}
.languages a {
  padding: 8px 2px;
}
.languages [aria-current] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.header-actions .btn-primary {
  padding: 14px 20px;
  font-size: 10px;
  white-space: nowrap;
}
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid #14223355;
  font-size: 24px;
}
.mobile-nav > a {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid #14223322;
}
.mobile-nav .languages {
  padding: 18px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 1fr;
  gap: 48px;
}
.footer-brand {
  width: 160px;
  height: auto;
  mix-blend-mode: screen;
}
.footer-links li {
  border-top: 1px solid #f5f3eb30;
}
.footer-links a,
.footer-links button {
  display: block;
  padding: 12px 0;
  text-align: left;
}
.site-dialog {
  color: #142233;
  background: #f5f3eb;
  border: 1px solid #14223340;
  max-width: 680px;
  width: calc(100% - 32px);
  max-height: calc(100dvh - 48px);
  padding: 48px;
  margin: auto;
  overflow-y: auto;
}
.site-dialog::backdrop {
  background: #142233bb;
}
.dialog-open {
  overflow: hidden;
}
.dialog-close {
  position: absolute;
  right: 16px;
  top: 8px;
  min-width: 44px;
  min-height: 44px;
  font-size: 32px;
}
.site-dialog label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-top: 24px;
}
.site-dialog input,
.site-dialog select,
.site-dialog textarea {
  display: block;
  width: 100%;
  border: 1px solid #14223355;
  padding: 12px;
  margin-top: 8px;
  background: transparent;
  color: #142233;
  font: inherit;
  font-size: 16px;
}
.site-dialog a {
  text-decoration: underline;
}
.legal-document h2 {
  font-family: Manrope, 'Manrope Fallback', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 48px 0 24px;
  padding-top: 32px;
  border-top: 1px solid #14223330;
  color: #142233;
}
/* A document that opens with an intro instead of a heading gets the same rule above it. */
.legal-document > :first-child:not(h2) {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #14223330;
}
.legal-document p,
.legal-document ul,
.legal-document ol {
  margin-bottom: 24px;
  white-space: pre-line;
}
.legal-document ul {
  list-style: disc;
  padding-left: 24px;
}
.legal-document ol {
  list-style: decimal;
  padding-left: 24px;
}
.legal-document a {
  text-decoration: underline;
  overflow-wrap: anywhere;
}
@media (max-width: 1279px) {
  .desktop-nav {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}
@media (min-width: 1280px) {
  .mobile-nav {
    display: none;
  }
}
@media (max-width: 767px) {
  .desktop-language {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .header-inner {
    min-height: 68px;
    gap: 8px;
  }
  .brand-symbol {
    height: 40px;
  }
  .brand-wordmark {
    width: 96px;
  }
  .brand {
    gap: 8px;
  }
  .header-actions {
    gap: 8px;
  }
  .header-actions .btn-primary {
    padding: 12px 8px;
    font-size: 10px;
  }
  .site-dialog {
    padding: 48px 24px 24px;
  }
  html {
    scroll-padding-top: 80px;
  }
}
@media (max-width: 479px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .brand-symbol {
    height: 32px;
  }
  .brand-wordmark {
    width: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Wrap prose at word boundaries; never force a word into two fragments. */
body {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.legal-document {
  overflow-wrap: normal;
}
h1[class],
h2[class],
h3[class],
h4[class],
h5[class],
h6[class] {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  min-width: 0;
  max-width: 100%;
}
.heading-word {
  white-space: nowrap;
}

/* Keep the header controls inside the smallest supported phone width. */
@media (max-width: 380px) {
  .brand-wordmark {
    width: 68px;
  }
  .brand-symbol {
    height: 26px;
  }
  .brand,
  .header-inner {
    gap: 6px;
  }
  .header-actions .btn-primary {
    font-size: 8px;
    padding: 10px 6px;
    gap: 8px;
    letter-spacing: 0.08em;
  }
  .menu-toggle {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
}

/* WCAG AA text contrast: retain the navy/ivory/teal palette with readable labels. */
:root {
  --text-teal-accessible: #007385;
}
.bg-navy,
.bg-navy-deep {
  --text-teal-accessible: #65c6d3;
}
.bg-ivory,
.site-dialog {
  --text-teal-accessible: #007385;
}
.text-teal,
.text-teal\/70,
.desktop-nav [aria-current='page'],
.languages [aria-current],
.hover\:text-teal:hover,
.group:hover .group-hover\:text-teal {
  color: var(--text-teal-accessible);
}
.btn-primary {
  background-color: #007385;
}
.btn-primary:hover {
  background-color: #006575;
  color: #f7f1e8;
}
.text-navy\/25,
.text-navy\/30,
.text-navy\/35,
.text-navy\/40,
.text-navy\/45,
.text-navy\/50,
.text-navy\/55,
.text-navy\/60 {
  color: rgb(13 24 38 / 72%);
}
.text-ivory\/30,
.text-ivory\/40,
.text-ivory\/55,
.text-ivory\/60 {
  color: rgb(247 241 232 / 72%);
}

.btn-outline-navy:hover {
  color: #007385;
  border-color: #007385;
}
.text-aqua\/40,
.text-aqua\/50,
.text-aqua\/60 {
  color: rgb(140 207 214 / 80%);
}

/* Keep the same reading order for the illustration and actions on small screens. */
@media (max-width: 1023px) {
 .feedback-split { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 .feedback-copy { display:contents; }
 .feedback-copy > h1, .feedback-copy > h2 { order:0; }
 .feedback-copy > p { order:1; }
 .feedback-visual { order:2; margin-top:2rem; }
 .feedback-copy > div { order:3; }
}

@keyframes chipiron-lantern { 0%,35%,60%,100% {opacity:.2} 42%,50% {opacity:1} }
.lighthouse-flash { animation:chipiron-lantern 6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .lighthouse-flash {animation:none;opacity:.65} }

.route-dot {transition:fill .25s ease-out}
.route-dot.is-lit {fill:#F2C94C}

.advisory-introduction {display:grid;gap:3rem;border-top:1px solid #14223330;padding-top:2rem;align-items:center}
.advisory-notebook {max-width:440px;margin:0}
.advisory-introduction-copy {max-width:48ch}
.registration-statements {font-size:.9rem;line-height:1.7;margin-top:3rem;max-width:90ch}
.registration-statements p+p {margin-top:.8rem}
@media(min-width:1024px){.advisory-introduction {grid-template-columns:1fr 1fr;gap:4rem}}

/* Preserve the original emblem with a legible, balanced wordmark at every size. */
.brand-wordmark {display:flex;flex-direction:column;width:180px;gap:5px;line-height:1}
.brand-name {font-family:Manrope,sans-serif;font-size:29px;font-weight:800;letter-spacing:.05em;display:block}
.brand-tagline {font-family:Manrope,sans-serif;font-size:13px;font-weight:600;letter-spacing:.07em;white-space:nowrap;display:block}
.footer-brand {width:225px;display:flex;flex-direction:column;align-items:center;gap:12px;color:#f5f3eb;mix-blend-mode:normal}
.footer-brand img {width:105px;mix-blend-mode:screen}
.footer-brand .brand-name {font-size:34px}
.footer-brand .brand-tagline {font-size:16px}
@media(max-width:767px){.brand-wordmark{width:145px;gap:4px}.brand-name{font-size:24px}.brand-tagline{font-size:11px}.header-actions>.btn-primary{display:none}}
@media(max-width:380px){.brand-wordmark{width:145px}.brand-symbol{height:40px}}

.site-dialog {max-width:720px;padding:48px 34px 34px}
.dialog-close {font-size:11px;right:20px;top:15px;padding:8px}
.enquiry-fields {display:grid;grid-template-columns:1fr 1fr;gap:24px 30px;margin-top:48px;border-top:1px solid #14223325;padding-top:20px}
.form-wide {grid-column:1/-1}
.site-dialog .enquiry-fields input:not([type=radio]),.site-dialog .enquiry-fields textarea {border:0;border-bottom:1px solid #14223355;padding:12px 0;border-radius:0;min-height:50px}
.topic-options {margin-top:16px}
.topic-choices {display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.site-dialog .topic-choice {margin:0;position:relative}
.site-dialog .topic-choice input {position:absolute;width:1px;height:1px;opacity:0}
.topic-choice span {display:block;padding:13px 16px;border:1px solid #14223355;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.topic-choice input:checked+span {background:#007385;color:#fff;border-color:#007385}
.topic-choice input:focus-visible+span {outline:3px solid #007385;outline-offset:3px}
.enquiry-actions {display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.cookie-category {display:grid;grid-template-columns:1fr 100px;gap:24px;padding:32px 0;border-bottom:1px solid #14223325}
.cookie-category:first-child {margin-top:30px;border-top:1px solid #14223325}
.site-dialog .cookie-switch {margin:0;text-align:right;align-self:start}
.site-dialog .cookie-switch input {appearance:none;width:40px;height:21px;padding:0;display:inline-block;position:relative;opacity:1}
.cookie-switch input:before {content:'';position:absolute;left:3px;top:3px;width:13px;height:13px;background:#14223370}
.cookie-switch input:checked {background:#007385;border-color:#007385}
.cookie-switch input:checked:before {left:22px;background:#fff}
.cookie-switch span {display:block;font-size:9px;line-height:1.6}
.cookie-actions {display:flex;align-items:center;gap:30px;margin-top:36px;flex-wrap:wrap}
.cookie-accept {padding:16px}
@media(max-width:600px){.enquiry-fields{grid-template-columns:1fr}.form-wide{grid-column:1}.site-dialog{padding:48px 24px 24px}.cookie-category{grid-template-columns:1fr 80px;gap:12px}}

.impressum-compass{width:min(100%,400px);height:auto;grid-column:2;grid-row:1/3;justify-self:center}
@media(max-width:1023px){.impressum-compass{grid-column:1;grid-row:auto;justify-self:start;width:min(100%,320px)}}

.brand-wordmark{width:205px}.brand-name{font-family:Georgia,serif;font-size:25px;white-space:nowrap}.brand-tagline{font-size:11px;letter-spacing:.06em}.footer-brand .brand-name{font-size:30px}.footer-brand .brand-tagline{font-size:12px}
@media(max-width:767px){.brand-wordmark{width:170px}.brand-name{font-size:21px}.brand-tagline{font-size:9px}}

/* Stefanie V2: her wordmark in the header and her full logo in the footer. */
.brand-wordmark{width:190px;height:auto;display:block}
.footer-brand{width:200px;height:auto;mix-blend-mode:normal}
@media(max-width:767px){.brand-wordmark{width:150px}}
@media(max-width:380px){.brand-wordmark{width:128px}}
/* Without the old blue tile behind the hero artwork, keep the lantern beam a soft glow. */
[data-home-lantern]{filter:blur(14px)}

/* Artwork still downloading stays hidden, then fades in whole (see site.js). */
img.image-fade {
  transition: opacity 300ms ease-out;
}
img.is-loading {
  opacity: 0;
}

/* Smooth page change: in browsers with cross-document view transitions, the header
   stays in place while the old page fades out and the new page fades in. Opacity only:
   nothing moves or scales. Both fades share one duration and curve, so together they
   stay fully opaque and the page never flashes the background between them. Other browsers simply navigate as before. Skipped entirely
   when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  .site-header {
    view-transition-name: site-header;
  }
  ::view-transition-group(site-header) {
    animation-duration: 0s;
  }
  ::view-transition-old(root) {
    animation: chipiron-page-out 250ms ease-in-out both;
  }
  ::view-transition-new(root) {
    animation: chipiron-page-in 250ms ease-in-out both;
  }
}
@keyframes chipiron-page-out {
  to {
    opacity: 0;
  }
}
@keyframes chipiron-page-in {
  from {
    opacity: 0;
  }
}

/* Keep German navigation labels on one line, as in English. The German
   labels and contact button are longer, so tighten the spacing slightly to
   keep the header within its 1248px frame. */
.desktop-nav a,
.desktop-nav .tech {
  white-space: nowrap;
}
:lang(de) .header-inner {
  gap: 16px;
}
:lang(de) .desktop-nav {
  gap: 14px;
}
:lang(de) .header-actions .btn-primary {
  padding-inline: 16px;
}

/* Long German compounds must not widen the philosophy heading column and
   squeeze the principles list; the heading fit scales the heading instead. */
@media (min-width: 1024px) {
  .lg\:grid-cols-\[0\.42fr_0\.58fr\] {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }
}

/* Consent banner: shown only when measurement is configured and no choice is stored yet.
   Accept and Reject share one style so neither choice is pushed. */
.consent-banner {position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin:0 auto;padding:24px;background:#f7f1e8;color:#142233;border:1px solid #14223340;box-shadow:0 12px 40px #14223326}
.consent-banner p {font-size:14px;line-height:1.6}
.consent-banner a {text-decoration:underline}
.consent-actions {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.consent-choice {min-width:140px;padding:14px 24px;border:1px solid #142233;background:#142233;color:#f7f1e8;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-family:Manrope,'Manrope Fallback',sans-serif;cursor:pointer}
.consent-choice:hover,.consent-choice:focus-visible {background:#007385;border-color:#007385}
.consent-settings {padding:14px 8px;background:none;border:0;color:#142233;font-size:13px;text-decoration:underline;cursor:pointer}
@media(max-width:600px){.consent-banner{left:8px;right:8px;bottom:8px;padding:18px}.consent-choice{flex:1 1 0;min-width:0}}