/* susannehartmann.eu — hand-written stylesheet (replaces the WordPress page-builder theme).
   Values are measured from the WordPress site (computed styles at 375/768/1440 px)
   and its generated CSS; see analysis/ in the project root.
   Breakpoints as on the original site: mobile <= 767px, tablet 768–1024px, desktop >= 1025px. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --c-primary: #e19a35;     /* orange */
  --c-secondary: #052742;   /* navy */
  --c-text: #4d4d4d;
  --c-wine: #632b30;
  --c-sky: #98c1d9;
  --c-mist: #bdd2df;
  --c-card: #c6d3dc;        /* #DEDDDD under a 34 % #98C1D9 overlay, flattened */
  --c-white: #fff;

  --f-text: "Open Sans", sans-serif;
  --f-head: "Montserrat", sans-serif;
  --f-foot: "Poppins", sans-serif;

  --t-size: 20px;
  --t-line: 25px;
  --t-track: -0.5px;

  --h-xl: 3rem;                 /* hero title */
  --h-lg: 2.6rem;               /* page/card titles (kit e543f35) */
  --h-lg-track: -2.9px;
  --h-md: 2.2rem;               /* card headings h4 (kit 91ebfd0) */
  --h-md-line: 1.2em;
  --h-md-track: -0.5px;

  --container: 1140px;
  --gap: 20px;
  --radius: 15px;
  --shadow: 0 0 20px -7px rgba(0, 0, 0, .5);
}
@media (max-width: 767px) {
  :root {
    --t-track: -0.7px;
    --h-lg: 1.75rem; --h-lg-track: -1.3px;
    --h-md: 1.5rem;  --h-md-line: 1em; --h-md-track: -1.8px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--f-text);
  font-size: var(--t-size);
  font-weight: 400;
  line-height: var(--t-line);
  letter-spacing: var(--t-track);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-primary); }
/* The original text blocks keep the 14.4px after the last paragraph too — part of every card height */
p { margin: 0 0 14.4px; }
p.flush { margin-bottom: 0; } /* text the original rendered without a <p> */
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-head); font-weight: 600; }
b, strong { font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 10px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--c-primary); color: var(--c-secondary); border-radius: 10px; }
.skip-link:focus { top: 10px; color: var(--c-secondary); }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 10px; left: 0; right: 0; z-index: 99;
  width: 100%; max-width: var(--container); margin: 0 auto;
}
.site-header-spacer { height: 86px; }
.header-bar {
  display: flex; align-items: center;
  min-height: 86px;
  padding: 10px;
  background: var(--c-secondary);
  border: 1px solid rgba(5, 39, 66, .62);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(5.8px);
  backdrop-filter: blur(5.8px);
  transition: background .5s ease, padding .5s ease, min-height .5s ease, border-radius .5s ease;
}
.site-header.is-scrolled .header-bar {
  background: rgba(5, 39, 66, .75);
  border-color: var(--c-secondary);
  border-radius: 10px;
  padding: 2px;
  min-height: 70px;
}
.header-logo { flex: 0 0 25%; padding: 10px 10px 10px 29px; }
.header-logo img { width: 87px; height: auto; }
.header-nav { flex: 1 1 75%; display: flex; justify-content: flex-end; padding: 10px; }
.nav-list { display: flex; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px;
  color: var(--c-primary);
  font-size: 16px; line-height: 24px;
}
.nav-link .icon { width: 16px; height: 16px; }
.nav-link:hover { color: var(--c-white); }
.nav-link[aria-current="page"] { color: var(--c-sky); }
.nav-toggle {
  display: none;
  width: 40px; height: 40px; margin: 0; padding: 10px;
  background: var(--c-primary); color: var(--c-secondary);
  border: 0; border-radius: 10px; cursor: pointer;
}
.nav-toggle .icon { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1024px) {
  .site-header { max-width: none; }
  .header-nav { position: static; }
  .nav-toggle { display: block; }
  .nav-list {
    display: none;
    position: absolute; left: 0; right: 0; top: 84px;
    flex-direction: column;
    background: var(--c-secondary);
  }
  .nav-list.is-open { display: flex; }
  .nav-link { justify-content: center; padding: 8px 16px; min-height: 40px; }
}
@media (max-width: 767px) {
  .site-header-spacer { height: 66px; }
  .header-logo { flex-basis: 39%; }
  .header-nav { flex-basis: 61%; }
}

/* ---------- Layout ---------- */
.main { display: block; }
.row {
  display: flex; gap: var(--gap);
  width: 100%; max-width: var(--container);
  margin: 0 auto;
  padding: 20px 0 0;
}
.row--hero { padding-top: 0; margin-top: 50px; }
.row--last { padding-bottom: 80px; }
.row > .card { flex: 1 1 calc(50% - var(--gap) / 2); min-width: 0; }
.row > .card:only-child { flex-basis: 100%; }
@media (max-width: 1024px) {
  .row { max-width: 1024px; }
}
@media (max-width: 767px) {
  .row { flex-direction: column; max-width: 767px; }
  /* flex-basis 0 would collapse overflow:hidden cards to zero height in a column */
  .row > .card { flex: 0 0 auto; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--gap);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--c-card);
  color: var(--c-secondary);
}
.card--dark { background: var(--c-secondary); color: var(--c-primary); }
.card--flush { padding: 0; }
.card--clip { overflow: hidden; }
.card__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.card > :not(.card__bg) { position: relative; z-index: 1; }

.title-lg { font-size: var(--h-lg); line-height: 1em; letter-spacing: var(--h-lg-track); color: var(--c-secondary); }
.title-md { font-size: var(--h-md); line-height: var(--h-md-line); letter-spacing: var(--h-md-track); color: var(--c-secondary); }
.card--dark .title-md, .card--dark .title-lg { color: var(--c-primary); }
.prose { color: inherit; }

/* glass box on photo cards */
.glass {
  background: rgba(5, 39, 66, .72);
  border-radius: 20px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--c-primary);
  color: var(--c-wine);
  border-radius: 10px;
  font-size: 20px; line-height: 25px; text-align: center;
  transition: background .3s, color .3s;
}
.btn:hover { background: var(--c-secondary); color: var(--c-primary); }

/* Lottie button (animated label drawn by the animation itself) */
.lottie-link { display: block; width: 286px; max-width: 100%; margin-bottom: 6px; }
.lottie-link .lottie { width: 286px; height: 54px; margin-bottom: 0; }
.lottie-link:focus-visible { outline-offset: 4px; }

/* ---------- Lottie ---------- */
/* The original renders the Lottie SVG inline: the widget is 6px taller than the animation (descender gap) */
.lottie { display: block; width: 100%; margin-bottom: 6px; }
.lottie svg { width: 100% !important; height: 100% !important; }

/* ---------- Hero (home) ---------- */
.hero {
  flex: 1 1 100%;
  min-height: 362px;
  justify-content: space-around;
  overflow: hidden;
  background-color: var(--c-sky);
}
.hero__top { display: flex; gap: var(--gap); }
.hero__sig { flex: 0 0 60%; padding: 10px; }
.hero__sig .lottie { width: 40%; aspect-ratio: 631 / 488; }
.hero__title { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; padding: 10px; }
.hero__title h1 {
  padding: 16px;
  background: rgba(5, 39, 66, .72);
  border-radius: 20px;
  color: var(--c-primary);
  font-size: var(--h-xl); line-height: 1em; letter-spacing: var(--t-track);
}
.hero__buttons { display: flex; gap: var(--gap); padding: 10px; }
@media (max-width: 1024px) {
  .row--hero { padding-top: 20px; }
  .hero__title h1 { font-size: 48px; }
}
@media (max-width: 767px) {
  .hero__top { flex-direction: column; }
  .hero__sig { flex-basis: auto; }
  .hero__sig .lottie { width: 52%; }
  .hero__title h1 { font-size: 2.6rem; letter-spacing: -2.4px; }
  .hero__buttons { display: none; }
}

/* ---------- Intro card (portrait + text) ---------- */
.intro { flex-direction: row; padding: 0; }
.intro__media {
  flex: 0 1 420px; align-self: flex-end;
  display: flex; flex-direction: column;
  padding: 20px 10px 0; overflow: hidden;
}
.intro__media picture, .intro__media img { width: 53%; margin: 0 auto -31px; }
.intro__media picture img { width: 100%; margin: 0; }
@media (min-width: 1025px) { .intro--wide-img .intro__media img { width: 68%; } }
.intro__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); padding: 20px; }
.intro__body .lottie { width: 400px; max-width: 100%; aspect-ratio: 400 / 70; }
@media (max-width: 1024px) {
  .intro__media { flex-basis: 45.45%; padding: 20px 10px 0; }
  /* the image widget itself gets 20px 10px 0 padding from here down */
  .intro__media picture, .intro__media img { width: calc(.97 * (100% - 20px)); margin: 20px auto -13px; }
}
@media (max-width: 767px) {
  .intro { flex-direction: column; }
  .intro__body { order: -1; }
  .intro__media { flex-basis: auto; align-self: stretch; }
  .intro__media picture, .intro__media img { width: calc(.95 * (100% - 20px)); margin-bottom: -28px; }
}

/* ---------- Photo card with glass headline ---------- */
.photo-card { justify-content: space-around; background-color: var(--c-sky); }
.photo-card .glass h2 {
  padding: 10px;
  color: var(--c-primary);
  font-size: var(--h-lg); line-height: 1em; letter-spacing: var(--h-lg-track);
}
.photo-card--plain { padding: 0; min-height: 100%; background-color: var(--c-secondary); }
.photo-card--plain .card__bg { object-position: top center; }
@media (max-width: 767px) {
  /* The WordPress original collapses this image-only card to 0 px on phones. */
  .photo-card--plain { display: none; }
}

/* ---------- Accordion (conflict types) ---------- */
.accordion { padding: 0 20px 50px; z-index: 1000; }
.accordion details { padding-bottom: 20px; }
.accordion summary {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--c-primary);
  cursor: pointer; list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { flex: 0 0 13px; width: 13px; height: 15px; margin-top: 5px; }
.accordion summary .icon-minus { display: none; }
.accordion details[open] summary .icon-plus { display: none; }
.accordion details[open] summary .icon-minus { display: block; }
.accordion summary:hover { color: var(--c-white); }
.accordion__panel { overflow: hidden; }
.accordion__panel p { margin: 0; padding-top: 10px; color: var(--c-primary); }
.card--berge { padding: 0; overflow: hidden; }
.card--berge .title-md { padding: 20px 20px 0; }
.card--berge .berge { margin: -34px 0 -39px; z-index: 2000; opacity: .26; }
.card--berge .berge .lottie { aspect-ratio: 1200 / 600; }

/* ---------- Icon lists ---------- */
.ilist li { display: flex; align-items: flex-start; }
.ilist .icon { flex: 0 0 auto; color: var(--c-secondary); }
.ilist__text { padding-left: 5px; color: var(--c-secondary); }
.ilist--chevron li + li { margin-top: 20px; }
.ilist--chevron .icon { width: 21px; height: 21px; margin-right: 5.25px; }
.ilist--cap li { padding-bottom: 10.5px; }
.ilist--cap li + li { margin-top: 10.5px; }
.ilist--cap li:last-child { padding-bottom: 0; }
.ilist--cap .icon { width: 37px; height: 37px; margin-right: 9.25px; }
.ilist--check li { padding-bottom: 6.5px; }
.ilist--check li + li { margin-top: 6.5px; }
.ilist--check li:last-child { padding-bottom: 0; }
.ilist--check .icon { width: 18px; height: 18px; margin: 3px 8.5px 0 0; }

/* ---------- Home: "about" + "why" cards ---------- */
.about-img { width: 45%; border-radius: 20px; }
.why__end { display: flex; flex-direction: column; gap: var(--gap); min-height: 180px; }
.why__end .lottie { width: 29%; margin: 70px auto 6px; aspect-ratio: 1; }

/* ---------- Contact form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 10px; }
.contact-form .field {
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  background: var(--c-primary);
  color: var(--c-secondary);
  border: 1px solid #69727d;
  border-radius: 5px;
  font: inherit; letter-spacing: inherit;
}
.contact-form .field::placeholder { color: var(--c-secondary); opacity: .6; }
.contact-form textarea.field { padding: 5px 14px; height: 112px; resize: vertical; }
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button {
  min-height: 40px;
  padding: 0;
  background: var(--c-primary); color: var(--c-secondary);
  border: 3px solid var(--c-primary); border-radius: 5px;
  font: inherit; font-size: 15px; line-height: 15px; letter-spacing: inherit;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.contact-form button:hover, .contact-form button:focus-visible { background: var(--c-secondary); color: var(--c-primary); }
.contact-form button[disabled] { opacity: .6; cursor: wait; }
.form-status { min-height: 0; margin: 0; font-size: 16px; line-height: 20px; color: var(--c-white); }
.form-status:empty { display: none; }
.form-status.is-error { color: #ffb4a8; }
.form-note { font-size: 13px; line-height: 14px; color: var(--c-primary); }
.form-note a { text-decoration: underline; }
.cf-turnstile { min-height: 65px; }

/* ---------- Sub pages ---------- */
.feature-media { flex: 0 1 420px; align-self: flex-end; padding: 20px 10px 0; overflow: hidden; display: flex; }
.feature-media img { width: 53%; margin: 0 auto -31px; }
.list-card .berg-figure { width: 33%; margin: 150px auto 6px; aspect-ratio: 1; }
.route-card__head { display: flex; align-items: center; gap: 20px; }
.route-card__head .lottie { flex: 0 0 auto; width: 3.364%; margin-bottom: 0; aspect-ratio: 1; }
.route-card { color: var(--c-text); }
@media (max-width: 767px) {
  .route-card__head .lottie { width: 22px; }
}

/* Legal pages: one text box */
.legal { max-width: calc(var(--container) + 20px); margin: 20px auto 80px; padding: 10px 10px 0; }
.legal__box {
  overflow-wrap: anywhere;
  flex: 1 1 100%;
  padding: 20px;
  background: rgba(189, 210, 223, .28);
  border: 1px solid var(--c-mist);
  border-radius: 20px;
  color: var(--c-text);
}
.legal__box h1, .legal__box h2, .legal__box h3, .legal__box h4 {
  font-size: var(--h-md); line-height: var(--h-md-line); color: var(--c-text);
}
.legal__box h1, .legal__box h2, .legal__box h3, .legal__box h4 { margin: 8px 0 16px; }
.legal__box p { margin: 0; }
.legal--wide { max-width: none; margin-bottom: 0; padding: 80px; }
.legal--wide .legal__box { max-width: var(--container); margin: 0 auto; }
@media (max-width: 767px) {
  /* Live uses 80px side padding here on phones too, leaving a ~170px text column — fixed. */
  .legal--wide { padding: 10px 10px 80px; }
}
.legal__box ul { margin: 0 0 16px; padding-left: 40px; list-style: disc; }
.legal__box a { text-decoration: none; }
.legal__box a:hover { color: var(--c-primary); }


/* ---------- Footer ---------- */
.site-footer { background: var(--c-secondary); color: var(--c-sky); font-family: var(--f-foot); font-weight: 300; font-size: 16px; line-height: 1.5em; letter-spacing: 0; }
.footer-main { display: flex; align-items: stretch; padding: 5% 8%; }
.footer-brand { flex: 0 0 46%; display: flex; flex-direction: column; gap: 50px; padding-right: 20%; }
.footer-brand__logo { width: 16%; margin-bottom: 24px; }
.footer-brand__logo img { width: 100%; }
.footer-brand__text { margin: 0; max-width: 315px; }
.footer-brand .lottie { width: 44%; aspect-ratio: 631 / 488; max-width: 139px; }
.footer-col { flex: 0 0 17%; display: flex; flex-direction: column; gap: 20px; }
.footer-col--contact { flex-basis: 20%; }
.footer-col h2 { font-family: var(--f-foot); font-size: 22px; font-weight: 600; line-height: 1.2em; color: var(--c-primary); }
.footer-col a, .footer-col span { display: block; }
.footer-links li + li { margin-top: 5px; }
.footer-links li { padding-bottom: 5px; }
.footer-links li:last-child { padding-bottom: 0; }
.footer-links a { color: var(--c-primary); }
.footer-links a:hover, .footer-contact a:hover { color: #c8d5dc; }
.footer-contact a { color: var(--c-sky); }
.footer-figure { align-items: center; }
.footer-figure .lottie { width: 49%; aspect-ratio: 1; }
.social { display: flex; gap: 20px; }
.social a { color: var(--c-primary); }
.social a:hover { color: #c8d5dc; }
.social .icon { width: 23px; height: 23px; }
.footer-bottom { display: flex; flex-direction: column; justify-content: center; min-height: 45px; padding: 0 8%; text-align: center; }
.footer-bottom p { margin: 0; }

@media (max-width: 1024px) {
  .footer-main { flex-direction: row-reverse; flex-wrap: wrap; padding: 8% 5%; }
  .footer-brand { order: 99999; flex-basis: 100%; gap: 30px; margin-top: 8%; padding-right: 35%; }
  .footer-brand__text { font-size: 14px; max-width: none; }
  .footer-col { flex-basis: 25%; }
  .footer-col--contact { flex-basis: 50%; padding-right: 15%; }
  .footer-links a, .footer-contact a, .footer-contact span, .footer-bottom p { font-size: 14px; }
  .social .icon { width: 18px; height: 18px; }
  .footer-bottom { padding: 0 5%; }
}
@media (max-width: 767px) {
  .footer-main { padding: 20% 5%; }
  .footer-brand { margin-top: 25%; padding-right: 0; }
  .footer-brand__logo { margin-bottom: 0; }
  .footer-col { flex-basis: 50%; }
  .footer-col h2 { font-size: 18px; }
  .footer-links li + li { margin-top: 4px; }
  .footer-links li { padding-bottom: 4px; }
  .footer-col--contact { order: -99999; flex-basis: 100%; margin-bottom: 25%; padding-right: 0; }
}

/* ---------- Motion ---------- */
/* Elements GSAP reveals start hidden only when JS runs (html.js), so no-JS and
   reduced-motion visitors always see the content. */
html.js [data-reveal] { visibility: hidden; }
/* Above the fold the same entrance runs as pure CSS, so the hero (LCP) paints without waiting for JS.
   Start opacity .001 instead of 0: Chrome ignores fully transparent elements as LCP candidates. */
@keyframes reveal-up { from { opacity: .001; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes reveal-down { from { opacity: .001; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
[data-reveal-css="fade-up"] { animation: reveal-up 1.25s cubic-bezier(.25, .46, .45, .94) both; }
[data-reveal-css="fade-down"] { animation: reveal-down 1.25s cubic-bezier(.25, .46, .45, .94) both; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { visibility: visible; }
  [data-reveal-css] { animation: none; }
  * { scroll-behavior: auto !important; }
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }