/* ================================================================
   BaltiCo v0.15 – responsive pass + Forminator polish
   Loaded after all page-specific styles.
   ================================================================ */

/* ---------- Forminator: stable theme integration ---------- */
.baltico-form-slot,
.baltico-form-slot *,
.baltico-form-slot *::before,
.baltico-form-slot *::after {
  box-sizing: border-box;
}

/* Forminator deliberately exposes a front-end "Edit form" shortcut to logged-in
   administrators. It is useful while building, but should not be part of the
   visual website presentation. */
.baltico-form-slot .forminator-edit-module,
.baltico-form-slot .forminator-edit-form,
.baltico-form-slot a[href*="forminator-cform-wizard"],
.baltico-form-slot a[href*="page=forminator"] {
  display: none !important;
}

/* Neutralise Forminator row/column gutters. This prevents a field from visually
   protruding past the blue contact/application card axis. */
.baltico-form-slot .forminator-row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 15px !important;
  padding: 0 !important;
}

.baltico-form-slot .forminator-row:last-child {
  margin-bottom: 0 !important;
}

.baltico-form-slot .forminator-col,
.baltico-form-slot [class*="forminator-col-"],
.baltico-form-slot .forminator-field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.baltico-form-slot input,
.baltico-form-slot textarea,
.baltico-form-slot select,
.baltico-form-slot button {
  max-width: 100%;
}

/* Tighter labels and field rhythm inside blue cards. */
.contact-card .baltico-form-slot .forminator-label,
.career-apply-card .baltico-form-slot .forminator-label {
  margin-bottom: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
}

.contact-card .baltico-form-slot .forminator-input,
.contact-card .baltico-form-slot .forminator-select,
.career-apply-card .baltico-form-slot .forminator-input,
.career-apply-card .baltico-form-slot .forminator-select {
  min-height: 46px !important;
}

.contact-card .baltico-form-slot .forminator-textarea,
.career-apply-card .baltico-form-slot .forminator-textarea {
  min-height: 138px !important;
}

/* File upload: keep native functionality but make the control look intentional. */
.career-apply-card .baltico-form-slot input[type="file"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.88) !important;
  font-family: var(--font-accent) !important;
  font-size: 12px !important;
  line-height: 1.45;
  overflow: hidden;
}

.career-apply-card .baltico-form-slot input[type="file"]::file-selector-button {
  min-height: 38px;
  margin-right: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 6px;
  background: #fff;
  color: var(--color-dark);
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Consent/checkbox: one clean row, aligned box + copy, without the default
   detached checkbox appearance. */
.baltico-form-slot .forminator-field-consent .forminator-label {
  margin-bottom: 9px !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.baltico-form-slot .forminator-consent,
.baltico-form-slot label.forminator-checkbox,
.baltico-form-slot .forminator-checkbox {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  cursor: pointer;
}

.baltico-form-slot .forminator-consent input[type="checkbox"],
.baltico-form-slot .forminator-checkbox input[type="checkbox"],
.baltico-form-slot input.forminator-checkbox-box[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--color-dark);
}

/* Forminator often renders a visual checkbox span next to its hidden input. */
.baltico-form-slot .forminator-checkbox-box {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 2px 0 0 !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.baltico-form-slot .forminator-checkbox-box::before {
  color: var(--color-primary) !important;
}

.baltico-form-slot .forminator-consent__label,
.baltico-form-slot .forminator-checkbox__label {
  min-width: 0;
  margin: 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere;
}

.baltico-form-slot .forminator-consent__label p,
.baltico-form-slot .forminator-checkbox__label p {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
}

/* The privacy copy can contain a link. Keep it readable, but less visually loud. */
.contact-card .baltico-form-slot .forminator-consent__label a,
.career-apply-card .baltico-form-slot .forminator-consent__label a,
.contact-card .baltico-form-slot .forminator-checkbox__label a,
.career-apply-card .baltico-form-slot .forminator-checkbox__label a {
  color: #fff !important;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Keep application forms inside the same page/grid axis as the surrounding copy. */
.career-sidebar,
.career-single-aside,
.career-apply-card,
.career-apply-card .baltico-form-slot,
.career-apply-card .forminator-ui,
.career-apply-card .forminator-custom-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.career-apply-card {
  overflow: hidden;
}

/* ---------- Tablet landscape / smaller desktop ---------- */
@media (max-width: 1180px) {
  .site-nav__list {
    gap: 24px;
  }

  .site-nav__list > li > a:not(.button) {
    font-size: 14px;
  }

  .service-detail-hero h1,
  .article-hero h1 {
    overflow-wrap: anywhere;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  body {
    font-size: 16px;
  }

  .section {
    padding-block: 78px;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .hero__content {
    max-width: 780px;
  }

  .hero h1 {
    white-space: normal;
    text-wrap: balance;
  }

  .service-card {
    min-height: 300px;
  }

  .service-card__content {
    padding: 28px;
  }

  .contact-card {
    padding: 34px;
  }

  .career-page__layout {
    gap: 54px;
  }

  .career-sidebar {
    gap: 32px;
  }

  .career-apply-card,
  .career-apply-card--single {
    padding: 30px;
  }

  .article-featured-image,
  .article-featured-image img {
    min-height: 380px;
  }

  .service-gallery__media {
    min-height: 390px;
  }

  .site-footer__grid {
    gap: 40px 56px;
  }
}

/* Tablet portrait: prefer one clear reading column for content + forms. */
@media (max-width: 900px) {
  .faq-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .faq-intro,
  .contact-card,
  .contact-content {
    max-width: 720px;
  }

  .contact-layout {
    gap: 56px;
  }

  .contact-card {
    width: 100%;
  }

  .career-sidebar {
    grid-template-columns: 1fr;
  }

  .career-sidebar__intro,
  .career-apply-card,
  .career-single-aside {
    width: 100%;
    max-width: 680px;
  }

  .career-single-aside {
    justify-self: start;
  }

  .about-deck__content {
    max-width: 820px;
  }
}

/* ---------- Mobile / tablet portrait ---------- */
@media (max-width: 767px) {
  html {
    scroll-padding-top: calc(var(--header-height) + var(--admin-bar-offset) + 14px);
  }

  body {
    font-size: 16px;
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  h2 {
    font-size: clamp(1.8rem, 8vw, 2.45rem);
  }

  h3 {
    font-size: clamp(1.2rem, 5.5vw, 1.5rem);
  }

  .button {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 15px;
  }

  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-nav__item > a:not(.button) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hero {
    min-height: min(760px, calc(100svh - var(--header-height) - var(--admin-bar-offset)));
  }

  .hero__inner {
    padding-block: 64px;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero h1 {
    margin-bottom: 12px;
    white-space: normal;
    text-wrap: balance;
  }

  .hero__lead {
    margin-bottom: 22px;
    font-size: 1.15rem;
  }

  .hero__content > p:not(.hero__lead) {
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.65;
  }

  .section {
    padding-block: 58px;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .service-card {
    min-height: 320px;
  }

  .service-card__content {
    padding: 22px;
  }

  .service-card h3 {
    min-height: 0;
  }

  .content-narrow {
    margin-bottom: 34px;
  }

  .team-image {
    margin-bottom: 30px;
  }

  .about-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-actions .button {
    width: 100%;
  }

  .faq-intro p {
    max-width: none;
  }

  .accordion__item summary {
    min-height: 56px;
    padding: 14px 46px 14px 16px;
    font-size: 14px;
    line-height: 1.45;
  }

  .accordion__item summary::after {
    right: 16px;
  }

  .accordion__content {
    padding: 0 16px 18px;
    font-size: 14px;
    line-height: 1.6;
  }

  .contact-card {
    padding: 26px 20px;
  }

  .contact-card h2 {
    font-size: 27px;
  }

  .baltico-form-slot .forminator-row {
    margin-bottom: 13px !important;
  }

  .baltico-form-slot .forminator-input,
  .baltico-form-slot .forminator-select,
  .baltico-form-slot select {
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS focus zoom */
  }

  .baltico-form-slot .forminator-textarea {
    min-height: 128px !important;
    font-size: 16px !important;
  }

  .baltico-form-slot .forminator-button-submit {
    min-height: 48px !important;
  }

  .baltico-form-slot .forminator-consent,
  .baltico-form-slot label.forminator-checkbox,
  .baltico-form-slot .forminator-checkbox {
    column-gap: 9px !important;
  }

  .career-page {
    padding-block: 38px 60px;
  }

  .career-page__header {
    margin-bottom: 42px;
  }

  .career-page__header h1 {
    font-size: clamp(2rem, 9vw, 2.7rem);
  }

  .career-page__header p {
    font-size: 15px;
  }

  .career-jobs {
    gap: 16px;
  }

  .career-card {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 136px;
  }

  .career-card__media {
    min-height: 136px;
  }

  .career-card__body {
    padding: 17px 18px;
  }

  .career-card__body h3 {
    font-size: 1.08rem;
  }

  .career-sidebar {
    gap: 34px;
  }

  .career-apply-card,
  .career-apply-card--single {
    padding: 24px 20px;
  }

  .career-apply-card h2,
  .career-apply-card--single h2 {
    font-size: 1.75rem;
  }

  .career-single-layout {
    gap: 38px;
    padding-bottom: 64px;
  }

  .career-single-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-bottom: 36px;
  }

  /* Aktuelles: tabs remain one compact horizontal navigation instead of three
     full-width buttons stacked above the content. */
  .news-tabs {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 28px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .news-tabs__button {
    width: auto;
    min-width: max-content;
    min-height: 44px;
    padding: 9px 15px;
    white-space: nowrap;
  }

  .news-feature-card:first-child,
  .news-feature-card {
    min-height: 330px;
  }

  .news-feature-card__content {
    padding: 22px;
  }

  .news-list-card {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
  }

  .news-list-card__image {
    min-height: 108px;
  }

  .article-hero {
    padding-block: 40px 30px;
  }

  .article-hero h1 {
    font-size: clamp(2.15rem, 10vw, 3.2rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }

  .article-back-link {
    margin-bottom: 24px;
  }

  .article-media-wrap {
    padding-bottom: 36px;
  }

  .article-featured-image,
  .article-featured-image img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .article-content p,
  .article-content li {
    font-size: 15px;
    line-height: 1.72;
  }

  .service-sibling-nav-wrap {
    padding-top: 18px;
  }

  .service-sibling-nav {
    padding-bottom: 18px;
  }

  .service-sibling-nav__link {
    min-height: 44px;
    padding: 9px 14px;
    font-size: 13px;
  }

  .service-detail-hero {
    padding-block: 0 34px;
  }

  .service-detail-hero h1 {
    font-size: clamp(2.15rem, 9vw, 3rem);
    line-height: 1.07;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .service-detail-hero__intro {
    margin-top: 22px;
  }

  .service-detail-hero__intro p {
    font-size: 15px;
    line-height: 1.65;
  }

  .service-gallery-section {
    padding-bottom: 72px;
  }

  .service-gallery__slide {
    gap: 28px;
  }

  .service-gallery__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    padding: 18px;
  }

  .service-gallery__counter {
    margin-bottom: 10px;
  }

  .service-gallery__copy h2 {
    margin-bottom: 18px;
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  .service-gallery__lead,
  .service-gallery__list {
    font-size: 15px;
    line-height: 1.62;
  }

  .service-gallery__controls {
    margin-top: 24px;
  }

  .service-gallery__arrow {
    width: 40px;
    height: 40px;
  }

  .service-gallery__calculator-note {
    padding: 18px;
  }

  /* Über uns: rebuild the timeline into a mobile-friendly vertical rail. */
  .about-deck__slide {
    padding-bottom: 58px;
  }

  .about-deck__rail {
    padding-top: 46px;
  }

  .about-deck__content,
  .about-deck__content--contacts {
    padding-top: 38px;
  }

  .about-prose p {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.68;
  }

  .about-prose p:first-child {
    font-size: 1.08rem;
  }

  .about-deck-timeline {
    --timeline-year: auto;
    --timeline-node: 20px;
    --timeline-gap: 14px;
    gap: 0;
  }

  .about-deck-timeline::before {
    top: 8px;
    bottom: 18px;
    left: 9px;
    transform: none;
  }

  .about-deck-timeline__item {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-areas:
      "node year"
      "node text";
    column-gap: 14px;
    min-height: 0;
    align-items: start;
    padding-bottom: 34px;
  }

  .about-deck-timeline__year {
    grid-area: year;
    justify-self: start;
    align-self: start;
    margin-bottom: 7px;
    font-size: 1.2rem;
    line-height: 1.2;
    text-align: left;
  }

  .about-deck-timeline__node {
    grid-area: node;
    width: 13px;
    height: 13px;
    align-self: start;
    justify-self: center;
    margin-top: 4px;
    border-width: 2px;
  }

  .about-deck-timeline__text {
    grid-area: text;
    max-width: none;
    font-size: 14px;
    line-height: 1.55;
  }

  .contact-person-card {
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 156px;
  }

  .contact-person-card__media {
    min-height: 156px;
  }

  .contact-person-card__body {
    padding: 18px;
  }

  .bridge-calculator-page__intro h1 {
    font-size: clamp(2.15rem, 9vw, 3.2rem);
  }

  .vbk-tabs {
    margin-inline: -4px;
  }

  .vbk-tab {
    padding-inline: 14px;
  }

  .site-footer__grid {
    gap: 34px;
    padding-bottom: 48px;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 479px) {
  .hero {
    min-height: auto;
  }

  .hero__inner {
    min-height: calc(100svh - var(--header-height) - var(--admin-bar-offset));
    padding-block: 48px;
  }

  .section {
    padding-block: 52px;
  }

  .service-card {
    min-height: 300px;
  }

  .contact-card {
    padding: 24px 18px;
  }

  .career-card {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 124px;
  }

  .career-card__media {
    min-height: 124px;
  }

  .career-card__body {
    padding: 14px;
  }

  .career-card__body h3 {
    margin-bottom: 8px;
    font-size: 1rem;
  }

  .career-card__body .text-link {
    font-size: 12px;
  }

  .career-apply-card,
  .career-apply-card--single {
    padding: 22px 16px;
  }

  .news-feature-card:first-child,
  .news-feature-card {
    min-height: 300px;
  }

  .news-list-card {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .news-card__meta {
    font-size: 11px;
  }

  .news-list-card__content h2 {
    font-size: 1rem;
  }

  .service-sibling-nav > ul > li:first-child {
    margin-left: -16px;
  }

  .service-gallery__media {
    aspect-ratio: 1 / 1;
  }

  .about-deck-keyfacts > div {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .contact-person-card {
    grid-template-columns: 1fr;
  }

  .contact-person-card__media {
    min-height: 200px;
    aspect-ratio: 4 / 3;
  }

  .contact-person-card__body {
    padding: 18px;
  }

  .faq-page__contact {
    padding: 24px 18px;
  }

  .site-footer__brand img {
    width: 146px;
  }
}

/* ================================================================
   BaltiCo v0.15.1 – mobile header + Forminator consent corrections
   ================================================================ */

/* Forminator renders the native checkbox input plus its own visual box.
   Keep the real input accessible but visually hidden so only one checkbox
   is visible. */
.baltico-form-slot .forminator-checkbox input[type="checkbox"],
.baltico-form-slot input.forminator-checkbox__input[type="checkbox"],
.baltico-form-slot .forminator-consent input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
}

.baltico-form-slot label.forminator-checkbox,
.baltico-form-slot .forminator-consent {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  column-gap: 11px !important;
  align-items: start !important;
}

.baltico-form-slot .forminator-checkbox-box {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 1px 0 0 !important;
}

.baltico-form-slot .forminator-checkbox-label,
.baltico-form-slot .forminator-checkbox__label,
.baltico-form-slot .forminator-consent__label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.94) !important;
  font-family: var(--font-accent) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* The admin-bar class can remain on a local/test installation even when the
   toolbar is not actually visible. JavaScript restores the real toolbar height
   when one is present. This prevents the sticky mobile header from floating
   below an empty strip. */
@media (max-width: 1100px) {
  body.admin-bar {
    --admin-bar-offset: 0px;
  }

  .site-header,
  .site-logo,
  .nav-toggle {
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      opacity 180ms ease,
      transform 180ms ease;
  }

  /* After the first bit of scrolling the full header visually disappears.
     Only the menu button remains as a compact floating control. */
  .site-header.is-mobile-compact {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
  }

  .site-header.is-mobile-compact .site-logo {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
  }

  .site-header.is-mobile-compact .nav-toggle {
    position: fixed;
    top: calc(var(--admin-bar-offset) + 12px);
    right: calc(20px + env(safe-area-inset-right, 0px));
    z-index: 110;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
    border: 1px solid rgba(6, 24, 38, .12);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(6, 24, 38, .14);
    pointer-events: auto;
  }

  .site-header.is-mobile-compact .nav-toggle__label {
    display: none;
  }

  .site-header.is-mobile-compact .nav-toggle__icon span {
    width: 22px;
  }
}