@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/big-shoulders-display-800.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: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/big-shoulders-display-900.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-grotesk-400.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-grotesk-600.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-700.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;
}

/* Entwurf 3 – Gelbes Blech */
:root {
  --yellow: #f5c400;
  --black: #000;
  --graphite: #1b1b1b;
  --white: #fff;
  --grey: #c9c9c9;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { margin: 0; overflow-x: clip; font: 400 1.0625rem/1.6 var(--body); color: var(--black); background: var(--yellow); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }
::selection { background: var(--black); color: var(--yellow); }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.services :focus-visible, .contact :focus-visible { outline-color: var(--yellow); }
.wrap { width: min(1240px, 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: .6rem 1rem; background: var(--black); color: var(--yellow); font-weight: 700; }
.skip:focus { top: 1rem; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: var(--yellow); border-bottom: 3px solid var(--black); }
.top__in { display: flex; align-items: center; gap: 2rem; min-height: 3.75rem; }
.brand { font: 900 1.9rem/1 var(--display); text-transform: uppercase; text-decoration: none; letter-spacing: .01em; }
.nav { display: flex; gap: 1.6rem; margin: 0 0 0 auto; padding: 0; list-style: none; font: 800 1.25rem/1 var(--display); text-transform: uppercase; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.top__tel { padding: .55rem 1.1rem; background: var(--black); color: var(--yellow); font: 800 1.2rem/1 var(--display); text-transform: uppercase; text-decoration: none; }
.top__tel:hover { background: var(--graphite); }

/* Hero */
.hero { padding: clamp(1.5rem, 4vw, 3rem) 0 0; }
.mark { margin: 0; font: 900 clamp(6rem, 35vw, 33rem)/.78 var(--display); text-transform: uppercase; letter-spacing: -.01em; margin-left: -.04em; }
.car { width: clamp(9rem, 26vw, 20rem); height: auto; margin: clamp(-2.5rem, -3vw, -1rem) 0 0 auto; color: var(--black); stroke-dasharray: 1400; stroke-dashoffset: 0; animation: draw 2.4s cubic-bezier(.16, 1, .3, 1) .2s both; }
@keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
.hero__grid { display: grid; gap: 2rem; margin-top: 1.5rem; }
.hero h1 { margin: 0; font: 800 clamp(2.2rem, 4.6vw, 3.75rem)/.98 var(--display); text-transform: uppercase; max-width: 14ch; text-wrap: balance; }
.hero__text > p { max-width: 40ch; font-size: 1.15rem; margin: 1.1rem 0 1.75rem; }
.call { display: inline-flex; flex-direction: column; padding: 1rem 1.5rem 1.1rem; background: var(--black); color: var(--yellow); text-decoration: none; transition: transform .15s ease; }
.call:hover { transform: translateY(-2px); }
.call__label { font-weight: 600; font-size: .95rem; color: var(--white); }
.call__num { font: 900 clamp(2rem, 4.4vw, 3rem)/1 var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.route { display: block; width: fit-content; margin-top: 1rem; font-weight: 700; }
.hero__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Section titles */
.title { margin: 0 0 1.75rem; font: 900 clamp(2.6rem, 7vw, 5.5rem)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; }

/* Services as livery stripes */
.services { margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--black); color: var(--white); }
.services .title { color: var(--yellow); }
.stripes { margin: 0; padding: 0; list-style: none; border-top: 4px solid var(--yellow); }
.stripes li { display: grid; gap: .4rem 2.5rem; padding: 1.4rem 0 1.5rem; border-bottom: 1px solid #4a4a4a; }
.stripes h3 { margin: 0; font: 800 clamp(2rem, 4.4vw, 3.25rem)/.95 var(--display); text-transform: uppercase; color: var(--yellow); }
.stripes p { margin: 0; max-width: 52ch; color: #e6e6e6; align-self: center; }
.stripes q { color: var(--white); font-weight: 700; quotes: "„" "“"; }

/* Volvo */
.volvo { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.volvo__grid { display: grid; gap: 2.5rem; align-items: center; }
.volvo p { max-width: 44ch; font-size: 1.1rem; }
.models { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 4px solid var(--black); border-left: 4px solid var(--black); }
.models li { display: flex; flex-direction: column; justify-content: flex-end; min-height: 8rem; padding: .75rem 1rem; border-right: 4px solid var(--black); border-bottom: 4px solid var(--black); }
.models b { font: 900 clamp(3.5rem, 8vw, 6rem)/.85 var(--display); }
.models small { font-weight: 700; font-size: 1rem; }
.volvo__draw { margin: 0; }
.volvo__draw svg { width: 100%; height: 8rem; color: var(--black); }
.volvo__draw figcaption { margin-top: .5rem; }

.btn { display: inline-flex; align-items: center; min-height: 3.1rem; padding: .75rem 1.3rem; background: var(--black); color: var(--yellow); font: 800 1.3rem/1 var(--display); text-transform: uppercase; text-decoration: none; letter-spacing: .02em; }
.btn:hover { background: var(--graphite); }
.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--yellow:hover { background: #ffd21a; }

/* About */
.about { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--white); }
.about__grid { display: grid; gap: 2.5rem; align-items: center; }
.about__photo { width: 100%; filter: grayscale(1) contrast(1.1); }
.about .big { font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.05 var(--display); text-transform: uppercase; margin: 0 0 .75rem; }
.about p { max-width: 50ch; }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.strip img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }

/* Contact */
.contact { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--graphite); color: var(--white); }
.contact .title { color: var(--yellow); margin-bottom: .5rem; }
.bignum { display: block; width: fit-content; font: 900 clamp(3rem, 11vw, 9rem)/.95 var(--display); color: var(--yellow); text-decoration: none; font-variant-numeric: tabular-nums; }
.bignum:hover { text-decoration: underline; text-decoration-thickness: 4px; }
.contact__grid { display: grid; gap: 2rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 4px solid var(--yellow); }
.contact h3 { margin: 0 0 .6rem; font: 800 1.5rem/1 var(--display); text-transform: uppercase; color: var(--yellow); }
.contact p { margin: 0 0 1rem; color: #e6e6e6; }
address { font-style: normal; font-size: 1.15rem; margin-bottom: 1rem; }
.hours { margin: 0 0 1rem; }
.hours div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid #444; }
.hours dt { color: #cfcfcf; }
.hours dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.ph { display: inline-block; padding: .05rem .4rem; font-size: .78rem; font-weight: 700; color: #4d3c00; background: #fff4c2; border: 1px dashed #8a6d00; vertical-align: middle; }
.contact .ph, .services .ph { color: #4d3c00; }

/* Footer */
.foot { padding: 2.5rem 0 3rem; font-size: .9rem; border-top: 3px solid var(--black); }
.foot h2 { margin: 0 0 .4rem; font: 900 1.4rem/1 var(--display); text-transform: uppercase; }
.foot p { margin: 0; line-height: 1.7; }
.foot__grid { display: grid; gap: 1.5rem; }

@media (min-width: 760px) {
  .stripes li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .contact__grid { grid-template-columns: repeat(3, 1fr); }
  .foot__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1fr 1.35fr; align-items: end; }
  .volvo__grid { grid-template-columns: 1fr 1.1fr; }
  .volvo__draw { grid-column: 1; grid-row: 2; }
  .models { grid-row: span 2; }
  .about__grid { grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 759px) {
  .top__in { flex-wrap: wrap; gap: .4rem 1rem; padding-top: .55rem; justify-content: space-between; }
  .top nav { order: 3; width: 100%; }
  .nav { margin: 0; gap: .35rem 1.1rem; flex-wrap: wrap; padding-bottom: .55rem; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .car { animation: none; }
  *, *::before, *::after { transition: none !important; }
}