/* 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 bottom-left over it.
   ------------------------------------------------------------------------- */
.hero-cinematic {
  position: relative;
  display: flex;
  align-items: flex-end;
  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;
  padding-top: 7rem;
  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%);
  }
}

/* ---------------------------------------------------------------------------
   Quick links: a quiet hairline list rather than boxed cards
   ------------------------------------------------------------------------- */
#shortcuts {
  /* Keeps the sticky header from covering the list when scrolled to */
  scroll-margin-top: 5rem;
}
.quick-links {
  border-top: 1px solid var(--utsch-hairline);
}
.quick-links li {
  border-bottom: 1px solid var(--utsch-hairline);
}
.quick-link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.9rem 0.75rem;
  color: var(--utsch-text);
  text-decoration: none;
  transition: background-color 0.15s ease, padding 0.15s ease, color 0.15s ease;
}
.quick-link:hover,
.quick-link:focus {
  background-color: #fafafa;
  padding-left: 1.5rem;
  color: var(--utsch-red);
}
.quick-link-icon {
  flex: none;
  width: 2rem;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  color: var(--utsch-red);
}
.quick-link-label {
  flex: 1 1 auto;
  font-size: 1.125rem;
  font-weight: 500;
}
.quick-link-arrow {
  flex: none;
  color: var(--utsch-red);
  transition: transform 0.15s ease;
}
.quick-link:hover .quick-link-arrow,
.quick-link:focus .quick-link-arrow {
  transform: translateX(5px);
}

/* ---------------------------------------------------------------------------
   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;
}