/* ---------------------------------------------------------------------------
   Static prelaunch stylesheet.

   Values are taken from the reference implementation in
   mietwagenvergleichlaminas/public/frontend_dektop/css/{style,homepage-redesign,
   mietwagen-home-2026}.css. Deviations are listed in DESIGN-SYSTEM.md.
   This is the only stylesheet; nothing is concatenated at build time.
   --------------------------------------------------------------------------- */

/* Latin-Extended must be declared before Latin so that the narrower Latin subset wins for the
   codepoints it actually covers. Without unicode-range the last declaration would win for every
   codepoint and the extended glyphs (ğ, ş, ı, ő, ā …) would never load. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("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;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("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: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/outfit-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;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/outfit-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;
}

:root {
  --slate-900: #1a1c20;
  --ivory: #f8f7f4;
  --petrol-500: #0b8a99;
  --petrol-550: #087584;
  --petrol-600: #065a66;
  --petrol-700: #033e47;
  --petrol-50: #e6f4f6;
  --petrol-100: #c0e2e7;
  --stone: #8e939c;
  --ash: #e8eaed;
  --white: #fff;
  --text: #1a1c20;
  --muted: #62676f;
  --footer-bg: #1f2937;
  --footer-text: #e5e7eb;
  --hero-scrim: rgba(17, 28, 20, 0.85);
  --hero-base: #111c14;
  --ring: rgba(11, 138, 153, 0.3);
  --content: 1170px;
  --wide: 1400px;
  --reading: 760px;
  --radius-sm: 8px;
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-feature: 20px;
  --radius-panel: 24px;
  --shadow-card: 0 1px 2px rgba(26, 28, 32, 0.04);
  --shadow-hover: 0 15px 32px rgba(26, 28, 32, 0.08);
  --shadow-panel: 0 15px 40px rgba(26, 28, 32, 0.08);
  --shadow-button: 0 12px 28px rgba(8, 117, 132, 0.18);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--ivory);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--petrol-550);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  color: var(--petrol-600);
}

:focus-visible {
  outline: 3px solid var(--petrol-550);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--ring);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.55em;
  color: var(--slate-900);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 5vw, 3.35rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.45rem);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.42rem);
}

p,
ul,
ol {
  margin: 0 0 1.2rem;
}

ul,
ol {
  padding-inline-start: 1.35rem;
}

li + li {
  margin-top: 0.45rem;
}

.container {
  width: min(100% - 32px, var(--content));
  margin-inline: auto;
}

.wide-container {
  width: min(100% - 32px, var(--wide));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset: 10px auto auto 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--slate-900);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.draft-banner {
  padding: 9px 16px;
  border-bottom: 1px solid #d4a84f;
  background: #fff5d9;
  color: #5c4313;
  font-size: 0.875rem;
  font-weight: 650;
  text-align: center;
}

/* --------------------------------------------------------------- hero band
   The reference site renders a full-bleed photo header with a dark scrim and the navigation
   sitting on top of it. The header and the first content block share one fixed-attachment
   background so they read as a single band without nesting main inside the banner. */
.site-header,
.hero,
.page-hero {
  background-color: var(--hero-base);
  background-image:
    linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url("images/hero-bg.png");
  background-image:
    linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    image-set(
      url("images/hero-bg.webp") type("image/webp"),
      url("images/hero-bg.png") type("image/png")
    );
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.site-header {
  position: relative;
  z-index: 20;
  color: var(--white);
}

.header-inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
}

.brand-link {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  color: var(--white);
  text-decoration: none;
}

.brand-link:hover {
  color: var(--white);
}

.brand-logo {
  width: auto;
  height: 50px;
  max-width: min(260px, 48vw);
  object-fit: contain;
}

.primary-nav,
.header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.primary-nav a,
.header-tools summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.primary-nav a:hover,
.header-tools summary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.primary-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-weight: 650;
}

.market-switcher,
.mobile-navigation {
  position: relative;
}

.market-switcher summary,
.mobile-navigation summary {
  list-style: none;
}

.market-switcher summary::-webkit-details-marker,
.mobile-navigation summary::-webkit-details-marker {
  display: none;
}

.market-menu,
.mobile-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  right: 0;
  padding: 8px;
  border-radius: 0.75rem;
  background: var(--white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.market-menu {
  width: min(300px, calc(100vw - 32px));
}

.mobile-menu {
  width: min(320px, calc(100vw - 32px));
}

.market-menu a,
.mobile-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--slate-900);
  font-size: 0.9rem;
  text-decoration: none;
}

.mobile-menu a {
  min-height: 44px;
  font-weight: 600;
}

.market-menu a:hover,
.mobile-menu a:hover {
  background: var(--petrol-50);
  color: var(--petrol-600);
}

.mobile-menu hr {
  margin: 8px 0;
  border: 0;
  border-top: 1px solid var(--ash);
}

.mobile-navigation {
  display: none;
}

.mobile-navigation summary {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.5rem;
  cursor: pointer;
}

.burger,
.burger::before,
.burger::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
}

.burger {
  position: relative;
}

.burger::before,
.burger::after {
  position: absolute;
  left: 0;
  content: "";
}

.burger::before {
  top: -6px;
}

.burger::after {
  top: 6px;
}

/* ------------------------------------------------------------------- heroes */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 8vw, 104px);
  color: var(--white);
}

.hero-grid {
  display: grid;
  align-items: center;
  gap: clamp(36px, 6vw, 72px);
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
}

.hero h1,
.page-hero h1 {
  color: var(--white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.24);
}

.hero-lead,
.page-hero .lede {
  max-width: 720px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.page-hero {
  padding: clamp(30px, 5vw, 46px) 0 clamp(46px, 6vw, 68px);
  color: var(--white);
}

.page-hero .lede {
  margin-bottom: 0;
}

.eyebrow,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 12px;
  border: 1px solid var(--petrol-100);
  border-radius: 9999px;
  background: var(--petrol-50);
  color: var(--petrol-600);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero .eyebrow,
.page-hero .eyebrow {
  border-color: rgba(142, 220, 228, 0.42);
  background: rgba(11, 138, 153, 0.2);
  color: #d9f4f6;
}

/* Breadcrumbs sit inside the hero band, directly under the navigation, as on the reference
   country pages. They are rendered light on dark instead of on a white bar (see DESIGN-SYSTEM). */
.breadcrumb-bar {
  margin-bottom: 20px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
}

.breadcrumbs li {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.breadcrumbs li + li::before {
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.45);
  content: "›";
}

.breadcrumbs a {
  color: rgba(255, 255, 255, 0.88);
}

.breadcrumbs a:hover {
  color: var(--white);
}

.breadcrumbs [aria-current="page"] {
  color: var(--white);
  font-weight: 600;
}

/* ------------------------------------------------------------------ buttons */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--petrol-550);
  border-radius: var(--radius-control);
  background: var(--petrol-550);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-button);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  border-color: var(--petrol-600);
  background: var(--petrol-600);
  color: var(--white);
  transform: translateY(-1px);
}

.button.secondary {
  border-color: var(--ash);
  background: var(--white);
  color: var(--slate-900);
  box-shadow: none;
}

.button.secondary:hover {
  border-color: var(--petrol-550);
  color: var(--petrol-600);
  box-shadow: 0 10px 24px rgba(26, 28, 32, 0.06);
}

.hero .button.secondary {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.hero .button.secondary:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--petrol-600);
}

/* --------------------------------------------------------- comparison panel */
.comparison-preview {
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--ash);
  border-radius: var(--radius-feature);
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.35);
}

.comparison-preview h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.preview-note {
  padding: 10px 12px;
  border-left: 4px solid var(--petrol-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--petrol-50);
  color: #37474a;
  font-size: 0.88rem;
}

.criteria-list {
  display: grid;
  margin: 20px 0 0;
  padding: 0;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.criteria-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #3a3d42;
  font-size: 0.9rem;
}

.criteria-list li::before {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.52em;
  border-radius: 50%;
  background: var(--petrol-500);
  content: "";
}

/* ----------------------------------------------------------------- sections */
.section {
  padding: clamp(58px, 8vw, 88px) 0;
}

.section.white {
  background: var(--white);
}

.section.tint {
  background: var(--petrol-50);
}

.section-header {
  max-width: var(--reading);
  margin-bottom: 44px;
}

.section-header.center {
  margin-inline: auto;
  text-align: center;
}

.section-header p {
  color: var(--muted);
  font-size: 1.05rem;
}

/* -------------------------------------------------------------------- cards */
.card-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--ash);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

a.card {
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.card:hover {
  border-color: var(--petrol-550);
  color: var(--text);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.card p:last-child,
.card ul:last-child {
  margin-bottom: 0;
}

.card-kicker {
  margin-bottom: 10px;
  color: var(--petrol-600);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-link {
  margin-top: auto;
  padding-top: 12px;
  color: var(--petrol-550);
  font-weight: 700;
}

.icon-slot {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  place-items: center;
  border-radius: 13px;
  background: var(--petrol-50);
  color: var(--petrol-600);
  font-family: "Outfit", sans-serif;
  font-weight: 750;
}

.steps {
  counter-reset: steps;
}

.steps .card {
  counter-increment: steps;
}

.steps .icon-slot::before {
  content: counter(steps);
}

/* ------------------------------------------------------------ article pages */
.notice {
  padding: 18px 20px;
  border: 1px solid var(--petrol-100);
  border-radius: var(--radius-control);
  background: var(--petrol-50);
  color: #344649;
}

.notice strong {
  color: var(--petrol-700);
}

.notice-detail {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.article-layout {
  display: grid;
  align-items: start;
  gap: 44px;
  grid-template-columns: minmax(0, var(--reading)) minmax(220px, 1fr);
}

.prose {
  min-width: 0;
}

.prose > * + h2,
.prose > section + section {
  margin-top: 2.7rem;
}

.prose h2 {
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.prose h3 {
  margin-top: 1.8rem;
}

.prose p,
.prose li {
  color: #363a40;
}

.aside-card {
  position: sticky;
  top: 24px;
  padding: 20px;
  border: 1px solid var(--ash);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}

.aside-card h2,
.aside-card h3 {
  font-size: 1.1rem;
}

.aside-card ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.aside-card li {
  margin: 0;
  border-top: 1px solid var(--ash);
}

.aside-card li:first-child {
  border-top: 0;
}

.aside-card a {
  display: block;
  padding: 9px 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.checklist {
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  min-height: 30px;
  margin: 0;
  padding: 6px 0 6px 34px;
}

.checklist li::before {
  position: absolute;
  top: 7px;
  left: 0;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--petrol-100);
  border-radius: 6px;
  background: var(--petrol-50);
  color: var(--petrol-600);
  content: "✓";
  font-size: 0.78rem;
  font-weight: 800;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  padding: 0 18px;
  border: 1px solid var(--ash);
  border-radius: var(--radius-control);
  background: var(--white);
}

.faq-list summary {
  padding: 16px 28px 16px 0;
  cursor: pointer;
  color: var(--slate-900);
  font-family: "Outfit", sans-serif;
  font-weight: 650;
}

.faq-list details[open] summary {
  color: var(--petrol-600);
}

.faq-list details p {
  padding-bottom: 16px;
}

.destination-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.destination-meta li {
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
}

.operator-address {
  font-style: normal;
}

/* ------------------------------------------------------------------- footer */
.site-footer {
  padding: 56px 0 28px;
  background: var(--footer-bg);
  color: var(--footer-text);
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1.2fr 1fr;
}

.footer-links-row {
  display: grid;
  gap: 32px;
  margin-top: 40px;
  grid-template-columns: 1fr 1fr;
}

.site-footer h2 {
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
}

.site-footer p,
.site-footer li,
.site-footer a {
  font-size: 0.88rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-brand .brand-logo {
  height: 43px;
  margin-bottom: 16px;
}

.footer-brand .brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin: 0 0 8px;
}

.footer-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 40px;
  margin: 36px 0 0;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 600;
}

.trust-mark {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 138, 153, 0.18);
}

/* Check mark drawn in CSS. The reference uses a Lucide icon; the prelaunch ships no JavaScript
   and no icon font, so the mark is two borders rotated into a tick. */
.trust-mark::before {
  width: 12px;
  height: 7px;
  margin-top: -3px;
  border-bottom: 2px solid var(--petrol-500);
  border-left: 2px solid var(--petrol-500);
  content: "";
  transform: rotate(-45deg);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.8rem;
}

/* The standing content notice. It sits above the copyright row on every page and is set
   quieter than body copy without dropping below the contrast floor. */
.footer-disclaimer {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 90ch;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal li {
  margin: 0;
}

/* --------------------------------------------------------------- error page */
.error-page {
  display: grid;
  min-height: 62vh;
  place-items: center;
  padding: 72px 0;
  text-align: center;
}

.error-page .button-row {
  justify-content: center;
}

.error-code {
  margin: 0;
  color: var(--petrol-550);
  font-family: "Outfit", sans-serif;
  font-size: clamp(4rem, 18vw, 9rem);
  font-weight: 700;
  line-height: 0.9;
}

/* -------------------------------------------------------------- breakpoints */
@media (min-width: 768px) {
  .container {
    width: min(100% - 60px, var(--content));
  }

  .wide-container {
    width: min(100% - 64px, var(--wide));
  }
}

@media (min-width: 1400px) {
  .container {
    width: min(100% - 80px, var(--content));
  }

  .wide-container {
    width: min(100% - 80px, var(--wide));
  }
}

@media (max-width: 991px) {
  .primary-nav,
  .header-tools {
    display: none;
  }

  .mobile-navigation {
    display: block;
  }

  .hero-grid,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 800px;
  }

  .card-grid,
  .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aside-card {
    position: static;
  }

  .footer-grid,
  .footer-links-row {
    grid-template-columns: 1fr;
  }

  .footer-trust {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Fixed attachment is unreliable on touch platforms and prevents the image from covering. */
  .site-header,
  .hero,
  .page-hero {
    background-attachment: scroll;
    background-position: 58% center;
  }

  /* The reference project serves a separate mobile template whose header bar is a solid dark
     band across the full viewport width, not a transparent overlay on the hero photo
     (frontend_mobile/css/redesign-2026.css:2014-2020, confirmed against
     spanien-lp-mobile-real.jpeg). Only the desktop header is transparent. The bar spans edge to
     edge, so the container drops its gutters and carries the background itself. */
  .header-inner {
    width: 100%;
    padding-inline: 16px;
    background: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }
}

@media (max-width: 640px) {
  .header-inner {
    min-height: 64px;
    gap: 10px;
  }

  .brand-logo {
    height: 34px;
    max-width: 205px;
  }

  /* The artwork shrinks to 34px here, which would leave the only standalone tap target in the
     mobile header below the 44px minimum. The link box is enlarged instead of the artwork, so
     the logo keeps its size and position and only the touch area grows. */
  .brand-link {
    min-height: 44px;
  }

  .hero {
    padding: 44px 0 52px;
  }

  .criteria-list,
  .card-grid,
  .card-grid.four {
    grid-template-columns: 1fr;
  }

  .button-row,
  .button {
    width: 100%;
  }

  .card {
    padding: 20px;
  }

  .section {
    padding: 56px 0;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header,
  .hero,
  .page-hero {
    background-attachment: scroll;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .button-row,
  .aside-card,
  .breadcrumb-bar {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hero,
  .page-hero {
    background: none;
    color: #000;
  }

  .hero h1,
  .page-hero h1,
  .hero-lead,
  .page-hero .lede {
    color: #000;
    text-shadow: none;
  }
}