/* SWISS: three fixes. Load after the other stylesheets. No style attributes anywhere. */

/* ---------- 1. the consent row in the form ---------- */
/* The label used to collapse to one word per line, because something around it limited its
   width. This lays the row out explicitly and lets the text use the full width. */

.quote__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0 0 24px;
}

.quote__consent input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--brand, #c2272b);
}

.quote__consent label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
  color: var(--text-muted, #a3a3a3);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.quote__consent label a { color: var(--text, #f2f2f0); }

.quote__form,
.quote__form p,
.quote__field { min-width: 0; }

/* ---------- 2. the call to action band ---------- */
/* The picture steps back and blurs, a dark veil sits over it, and the text steps forward. */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cta-band__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
  opacity: 0.92;
  transform: scale(1.02);
  pointer-events: none;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* only a soft shadow right under the words, so the picture stays visible */
  background: radial-gradient(ellipse 48% 44% at 50% 42%,
    rgba(21, 21, 21, 0.92), rgba(21, 21, 21, 0.5) 64%, rgba(21, 21, 21, 0) 100%);
}

.cta-band__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 104px 24px;
  text-align: center;
}

.cta-band__title {
  margin: 0 0 20px;
  color: var(--text, #f2f2f0);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.cta-band__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--text, #f2f2f0);
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 700;
  text-decoration: none;
}

.cta-band__phone:hover { text-decoration: underline; text-underline-offset: 6px; }

.cta-band__or {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 240px;
  margin: 18px auto;
  color: var(--text-subtle, #8a8a8a);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cta-band__or::before,
.cta-band__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, #2a2a2a);
}

.cta-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: 4px;
  background: var(--brand, #c2272b);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease-out;
}

.cta-band__btn:hover { background: var(--brand-hover, #b33f2e); }

@media (max-width: 999px) {
  .cta-band__art { opacity: 0.88; }
  .cta-band__inner { padding: 64px 16px; }
}

/* ---------- 3. the language button ---------- */
/* Croatian page: red button. German page: white button with red text.
   It must never grow out of the bar it sits in, and changing the language must not flash. */

.topbar__inner,
.site-header__inner,
.site-drawer { min-width: 0; }

.topbar__list { flex-wrap: wrap; min-width: 0; }
.topbar__list > li { min-width: 0; }

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--brand, #c2272b);
  border-radius: 999px;
  background: var(--brand, #c2272b);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.lang-switch svg { flex: none; width: 16px; height: 16px; }

.lang-switch:hover {
  background: var(--brand-hover, #b33f2e);
  border-color: var(--brand-hover, #b33f2e);
}

.lang-switch--de {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--brand, #c2272b);
}

.lang-switch--de:hover {
  background: #f2f2f0;
  border-color: #f2f2f0;
  color: var(--brand-hover, #b33f2e);
}

.lang-switch:focus-visible {
  outline: 2px solid var(--focus, #f2f2f0);
  outline-offset: 2px;
}

/* in the mobile menu it stands on its own line and is easy to hit */
.site-drawer .lang-switch {
  min-height: 48px;
  padding: 0 20px;
  font-size: 0.9375rem;
}

@media (max-width: 999px) {
  .lang-switch { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch,
  .cta-band__btn { transition: none; }
}