/* UTSCH brand tokens, taken from the current live site's stylesheet */
:root {
  --utsch-red: #D90000;
  --utsch-red-dark: #B20000;
  --utsch-text: #424241;
  --utsch-bg-light: #F2F2F2;
  --utsch-hairline: #E4E4E4;
}

/* Inter — SIL Open Font License 1.1, free for commercial use.
   Self-hosted (downloaded from Google Fonts, v20) so the site has no
   runtime dependency on fonts.googleapis.com/fonts.gstatic.com and always
   renders this exact free font rather than a possibly non-free system font
   like Helvetica or Arial. It's a variable font, so one file per subset
   covers the whole 400-700 weight range used on this site. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html {
  /* Smooth scrolling for the hero's scroll cue and any other in-page anchor */
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--utsch-text);
}

a {
  color: var(--utsch-red);
}
a:hover {
  color: var(--utsch-red-dark);
}

/* ---------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */
.navbar-nav .nav-link {
  color: var(--utsch-text);
  font-weight: 500;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--utsch-red);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--utsch-red);
}

/* Language switcher flags */
.flag-icon {
  height: 14px;
  width: 20px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--utsch-red);
  border-color: var(--utsch-red);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--utsch-red-dark);
  border-color: var(--utsch-red-dark);
}
.btn-outline-primary {
  color: var(--utsch-red);
  border-color: var(--utsch-red);
}
.btn-outline-primary:hover {
  background-color: var(--utsch-red);
  border-color: var(--utsch-red);
}

/* ---------------------------------------------------------------------------
   Cinematic hero: the showcase photo fills the viewport, a dark gradient
   scrim keeps the type legible, and the copy sits left, vertically centred.
   ------------------------------------------------------------------------- */
.hero-cinematic {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 820px);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* Two stacked gradients: one darkens the bottom so the whole hero grounds
   itself, the other darkens the left where the copy sits — without that the
   intro text washes out against the bright glass facade. The right half of
   the photo (flags, facade) stays open. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(10, 10, 10, 0.82) 0%,
      rgba(10, 10, 10, 0.62) 38%,
      rgba(10, 10, 10, 0.18) 68%,
      rgba(10, 10, 10, 0) 88%
    ),
    linear-gradient(
      to top,
      rgba(10, 10, 10, 0.75) 0%,
      rgba(10, 10, 10, 0.35) 45%,
      rgba(10, 10, 10, 0.1) 75%,
      rgba(10, 10, 10, 0.25) 100%
    );
}
.hero-content {
  position: relative;
  width: 100%;
  /* As a flex item this would default to min-width:auto and refuse to shrink
     below the widest button label, pushing the layout wider than the phone
     viewport (which overflow:hidden then clips). */
  min-width: 0;
  /* Equal top and bottom padding so the copy sits truly centred; 5.5rem
     keeps it clear of the scroll cue at the bottom edge. */
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
.hero-copy {
  max-width: 46rem;
  color: #fff;
}
/* Short red bar as a brand accent — carries the brand without repeating the
   logo that already sits in the header (and on the building in the photo). */
.hero-rule {
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-bottom: 1.75rem;
  background-color: var(--utsch-red);
}
.hero-title {
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  overflow-wrap: break-word;
}
.hero-lead {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.94);
  margin-bottom: 1.25rem;
}
.hero-intro {
  max-width: 40rem;
  margin-bottom: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
}
.hero-cinematic .btn-outline-light:hover {
  color: #111;
}
/* Long CTA labels (e.g. "Zum Online-Shop für Geschäftskunden") must be able
   to wrap on narrow screens instead of forcing the hero wider than the phone. */
.hero-copy .btn {
  white-space: normal;
}
@media (max-width: 575.98px) {
  .hero-copy .btn {
    width: 100%;
  }
}

/* Mobile-only language switcher pinned to the top of the hero photo. Below
   lg the main nav is tucked behind the burger icon, so without this the
   language switch would take an extra tap to reach; above lg it stays in
   the always-visible header nav instead (see .hero-lang-mobile's d-lg-none). */
.hero-lang-mobile {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}
.hero-lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background-color: rgba(10, 10, 10, 0.35);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
}
.hero-lang-toggle:hover,
.hero-lang-toggle:focus {
  background-color: rgba(10, 10, 10, 0.55);
  color: #fff;
}

/* Bobbing chevron inviting the visitor to scroll to the link list */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  animation: hero-bob 2.4s ease-in-out infinite;
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus {
  color: #fff;
}
@keyframes hero-bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 7px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-scroll-cue {
    animation: none;
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------------
   News strip (German homepage): one card at a time; with several items it
   scrolls horizontally and endlessly (see the script in de/index.njk).
   ------------------------------------------------------------------------- */
.news-section {
  padding: 3.5rem 0 2.5rem;
  background-color: var(--utsch-bg-light);
  scroll-margin-top: 5rem;
}
.news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.news-heading {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.news-heading::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin-bottom: 1rem;
  background-color: var(--utsch-red);
}
.news-nav {
  display: flex;
  gap: 0.5rem;
}
.news-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #cfcfcf;
  border-radius: 50%;
  background-color: #fff;
  color: var(--utsch-text);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.news-nav-btn:not(:disabled):hover,
.news-nav-btn:not(:disabled):focus-visible {
  border-color: var(--utsch-red);
  color: var(--utsch-red);
}
.news-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Sits inside .container, so each card spans exactly the width of the quick
   links below and only one card is visible at a time. */
.news-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0.25rem 0 1rem;
}
.news-track::-webkit-scrollbar {
  display: none;
}
.news-track:focus-visible {
  outline: 2px solid var(--utsch-red);
  outline-offset: 2px;
}
.news-card {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-top: 4px solid var(--utsch-red);
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease;
}
.news-card:hover,
.news-card:focus-within {
  box-shadow: 0 12px 18px -12px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
  .news-card {
    padding: 2.25rem 2.5rem;
  }
}
.news-kicker {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--utsch-red);
}
.news-card-title {
  margin-bottom: 0.75rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}
.news-card-title a {
  color: var(--utsch-text);
  text-decoration: none;
}
.news-card-teaser {
  margin-bottom: 1.25rem;
  line-height: 1.65;
}
.news-card-more {
  margin-top: auto;
  font-weight: 600;
  color: var(--utsch-red);
}
.news-card-more .bi {
  display: inline-block;
  transition: transform 0.15s ease;
}
.news-card:hover .news-card-more .bi {
  transform: translateX(5px);
}
.news-article {
  max-width: 52rem;
}
.news-article h1 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   Quick links: six boxes in two rows of three
   ------------------------------------------------------------------------- */
#shortcuts {
  /* Generous breathing room above and below the list (3× Bootstrap's py-5);
     a bit less on phones so the list isn't lost in white space. */
  padding-top: 6rem;
  padding-bottom: 6rem;
  /* Keeps the sticky header from covering the list when scrolled to */
  scroll-margin-top: 5rem;
}
@media (min-width: 768px) {
  #shortcuts {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
}
/* Three boxes per row (two rows of three) from tablet width up, stacked on
   phones. The red top edge echoes the news cards above. */
.quick-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .quick-links {
    grid-template-columns: repeat(3, 1fr);
    /* Both rows as tall as the tallest box, so the grid stays even */
    grid-auto-rows: 1fr;
  }
}
.quick-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  height: 100%;
  padding: calc(1.75rem + 3px) 1.75rem 1.75rem;
  border: 1px solid var(--utsch-hairline);
  border-radius: 0.5rem;
  /* The red top edge is an inset shadow rather than border-top, so it
     follows the rounded corners instead of bleeding into the grey border. */
  box-shadow: inset 0 4px 0 var(--utsch-red);
  background-color: #fff;
  color: var(--utsch-text);
  text-decoration: none;
  transition: box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.quick-link:hover,
.quick-link:focus {
  box-shadow: inset 0 4px 0 var(--utsch-red), 0 10px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  color: var(--utsch-red);
}
.quick-link-icon {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--utsch-red);
}
.quick-link-label {
  flex: 1 1 auto;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}
.quick-link-arrow {
  align-self: flex-end;
  color: var(--utsch-red);
  transition: transform 0.15s ease;
}
.quick-link:hover .quick-link-arrow,
.quick-link:focus .quick-link-arrow {
  transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
  .quick-link,
  .quick-link-arrow {
    transition: none;
  }
  .quick-link:hover,
  .quick-link:focus {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Legal / long-form text pages
   ------------------------------------------------------------------------- */
.legal-content h2 {
  font-size: 1.35rem;
  margin-top: 2rem;
}
.legal-content h3 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
}
.legal-content p {
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer a {
  color: #fff;
}
.site-footer a:hover {
  color: var(--utsch-red);
}
/* The certificate badge is dark text on a light background, so it needs its
   own light backing plate to stay legible against the dark footer. */
.footer-certificate {
  background-color: #fff;
  padding: 0.4rem 0.75rem;
  border-radius: 0.25rem;
  line-height: 0;
}