/* ==========================================================================
   Klein Automobile — Erscheinungsbild
   Liegt bewusst neben der kompilierten theme.css und wird über das Plugin
   "System - Klein Automobile Branding" eingebunden. Dadurch überlebt es
   sowohl Template-Updates als auch jedes Speichern im Customizer.
   ========================================================================== */

/* Schriften vom eigenen Server: keine Verbindung zu Dritten, damit dafür
   auch keine Einwilligung nötig ist. */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/klein/bodoni-moda-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/klein/bodoni-moda-latin-opsz-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/klein/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}


:root {
  --k-ink:        #050505;
  --k-ink-raised: #0e0e0d;
  --k-ink-card:   #141312;
  --k-ivory:      #f3eee4;
  --k-muted:      #a49f95;
  --k-muted-dim:  #6f6a63;
  --k-gold:       #c9a665;
  --k-gold-light: #e1c890;
  --k-line:       rgba(243, 238, 228, 0.10);
  --k-line-strong:rgba(243, 238, 228, 0.18);
  --k-line-gold:  rgba(201, 166, 101, 0.32);

  --k-serif: 'Bodoni Moda', Didot, 'Bodoni MT', Georgia, serif;
  --k-sans:  Inter, 'Helvetica Neue', Arial, sans-serif;
}

/* ------------------------------------------------------------- Grundlage */
html { background: var(--k-ink); }

body,
.uk-section-default,
.tm-page {
  background: var(--k-ink);
  color: var(--k-ivory);
  font-family: var(--k-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Der Fließtext bleibt ruhig, die Überschriften tragen die Marke. */
h1, h2, h3, h4,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
  font-family: var(--k-serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--k-ivory);
  text-wrap: balance;
}

h1, .uk-h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2, .uk-h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3, .uk-h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { color: var(--k-muted); }
.uk-text-lead { font-family: var(--k-sans); font-size: 1.0625rem; color: var(--k-muted); font-weight: 400; }

a { color: var(--k-gold); }
a:hover { color: var(--k-gold-light); }

/* Gold nur dort, wo es etwas bedeutet — nicht in jeder Überschrift. */
.k-accent { color: var(--k-gold-light); font-style: italic; }

.k-eyebrow {
  display: block;
  font-family: var(--k-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-gold);
  margin-bottom: 1rem;
}
.k-eyebrow--muted { color: var(--k-muted-dim); }

.k-num { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Sektionen */
.uk-section { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.uk-section-muted { background: var(--k-ink-raised); }
.uk-section-secondary, .uk-section-primary { background: var(--k-ink-raised); color: var(--k-ivory); }
hr, .uk-hr { border-top: 1px solid var(--k-line); }

/* ------------------------------------------------------------ Kopfbereich */
.tm-header, .tm-headerbar {
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--k-line);
}
.uk-navbar-nav > li > a,
.uk-navbar-item, .uk-navbar-toggle {
  font-family: var(--k-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-muted);
  min-height: 68px;
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a { color: var(--k-ivory); }
.uk-logo img { max-height: 46px; width: auto; }

/* --------------------------------------------------------------- Schalter */
.uk-button {
  font-family: var(--k-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 0 1.6rem;
  line-height: 46px;
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.uk-button-primary { background: var(--k-gold); color: #120d04; }
.uk-button-primary:hover, .uk-button-primary:focus { background: var(--k-gold-light); color: #120d04; }
.uk-button-default {
  background: transparent;
  color: var(--k-ivory);
  border-color: var(--k-line-strong);
}
.uk-button-default:hover, .uk-button-default:focus { border-color: var(--k-ivory); color: var(--k-ivory); background: transparent; }
.uk-button-text { color: var(--k-gold); letter-spacing: .14em; }
.uk-button-text::before { border-bottom-color: var(--k-line-gold); }

/* ----------------------------------------------------------------- Karten */
.uk-card-default, .uk-card-secondary {
  background: var(--k-ink-raised);
  color: var(--k-ivory);
  border: 1px solid var(--k-line);
  border-radius: 3px;
  box-shadow: none;
  transition: border-color .2s ease, transform .2s ease;
}
.uk-card-default:hover { border-color: var(--k-line-strong); transform: translateY(-3px); }
.uk-card-title { font-family: var(--k-serif); }

/* Die eine goldene Karte: der Hauptweg zum Kontakt. */
.k-card-gold {
  background: var(--k-gold);
  border-color: var(--k-gold);
  color: #120d04;
}
.k-card-gold:hover { background: var(--k-gold-light); border-color: var(--k-gold-light); }
.k-card-gold p, .k-card-gold .uk-card-title, .k-card-gold .k-eyebrow { color: #120d04; }
.k-card-gold .k-eyebrow { color: rgba(18, 13, 4, .7); }

/* ---------------------------------------------------------------- Bilder */
.k-shot img, .uk-cover { border-radius: 3px; }
.k-tile { position: relative; overflow: hidden; border-radius: 3px; display: block; }
.k-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.k-tile:hover img { transform: scale(1.03); }

/* Auslieferungen */
.k-delivery img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: 3px; filter: saturate(.93); transition: filter .3s ease, transform .3s ease; }
.k-delivery:hover img { filter: saturate(1); transform: translateY(-4px); }
.k-delivery figcaption { padding-top: .75rem; }
.k-delivery .k-model { display: block; font-size: .9rem; color: var(--k-ivory); line-height: 1.35; }
.k-delivery .k-month { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--k-muted-dim); }

/* ------------------------------------------------------------ Fußbereich */
.tm-footer, .uk-section-footer { background: var(--k-ink); border-top: 1px solid var(--k-line); color: var(--k-muted); }
.tm-footer a { color: var(--k-muted); }
.tm-footer a:hover { color: var(--k-ivory); }

/* ----------------------------------------------------------- Zugänglich */
:focus-visible { outline: 2px solid var(--k-gold-light); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------- Fahrzeugbestand */
.k-vehicles__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * .75rem) / 4);
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--k-line-strong) transparent;
}
.k-vehicle { scroll-snap-align: start; }
.k-vehicle a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--k-ink-raised);
  border: 1px solid var(--k-line);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.k-vehicle a:hover { border-color: var(--k-line-strong); transform: translateY(-3px); }
.k-vehicle__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--k-ink-card); }
.k-vehicle__body { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem; }
.k-vehicle__title { font-family: var(--k-serif); font-size: 1.1rem; margin: 0; color: var(--k-ivory); }
.k-vehicle__sub {
  font-size: .78rem; color: var(--k-muted-dim); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.k-vehicle__specs {
  list-style: none; display: flex; flex-wrap: wrap; gap: .1rem .85rem;
  margin: 0; padding: 0; font-size: .8rem; color: var(--k-muted);
}
.k-vehicle__price { margin: auto 0 0; padding-top: .4rem; color: var(--k-gold); font-size: 1.2rem; }

@media (max-width: 1100px) { .k-vehicles__track { grid-auto-columns: calc((100% - 2 * .75rem) / 3); } }
@media (max-width: 820px)  { .k-vehicles__track { grid-auto-columns: calc((100% - .75rem) / 2); } }
@media (max-width: 560px)  { .k-vehicles__track { grid-auto-columns: 82%; } }

/* ------------------------------------------------------------- Fußzeile */
.k-footer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 3rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  border-top: 1px solid var(--k-line);
}
.k-footer__name { font-family: var(--k-serif); font-size: 1.2rem; color: var(--k-ivory); display: block; }
.k-footer__sub { font-size: .85rem; color: var(--k-muted-dim); }
.k-footer__nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.k-footer__nav a { font-size: .85rem; color: var(--k-muted); }
.k-footer__nav a:hover { color: var(--k-ivory); }
.k-footer__legal {
  width: 100%; margin: 0; padding-top: 1.25rem;
  border-top: 1px solid var(--k-line);
  font-size: .8rem; color: var(--k-muted-dim);
}

/* Verweise innerhalb von Karten übernehmen die Kartenfarbe, damit nicht
   einzelne Werte golden aus der Reihe fallen. */
.uk-card a, .uk-card a:hover { color: inherit; }
.k-card-gold, .k-card-gold * { color: #120d04; }
.k-card-gold .k-eyebrow { color: rgba(18, 13, 4, .7); }

/* ------------------------------------------------- Einwilligung für Bilder */
.klein-consent {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(3, 3, 3, .72);
  backdrop-filter: blur(4px);
  animation: klein-veil .35s ease both;
}
.klein-consent[hidden] { display: none; }

.klein-consent__box {
  width: min(560px, 100%);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--k-ink-raised);
  border: 1px solid var(--k-line-gold);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: klein-rise .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes klein-veil { from { opacity: 0 } to { opacity: 1 } }
@keyframes klein-rise {
  from { opacity: 0; transform: translateY(18px) scale(.97) }
  to   { opacity: 1; transform: none }
}

.klein-consent__titel {
  font-family: var(--k-serif);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--k-ivory);
  margin: 0 0 .75rem;
}
.klein-consent__text { font-size: .9rem; color: var(--k-muted); margin: 0; }
.klein-consent__text a { color: var(--k-gold); border-bottom: 1px solid var(--k-line-gold); }

/* Beide Schalter gleich gross und gleich prominent. */
.klein-consent__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.klein-consent__aktionen .uk-button { flex: 1 1 0; min-width: 11rem; }
@media (max-width: 460px) {
  .klein-consent__aktionen { flex-direction: column; }
  .klein-consent__aktionen .uk-button { min-width: 0; }
}

/* Solange nicht zugestimmt wurde, bleibt die Bildfläche leer und trägt einen Hinweis. */
.k-vehicle__media { position: relative; display: block; }
.k-consent-hinweis {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: .75rem;
  color: var(--k-muted-dim);
  background: var(--k-ink-card);
}
:root[data-klein-consent='granted'] .k-consent-hinweis { display: none; }
.k-vehicle__img:not([src]) { visibility: hidden; }

/* --------------------------------------------------------- Öffnungszeiten */
.k-hours {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--k-line);
}
.k-hours__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 2.5rem;
  max-width: 760px;
}
.k-hours__list li {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: .5rem;
  border-bottom: 1px solid var(--k-line);
  font-size: .92rem;
  color: var(--k-ivory);
}
.k-hours__list li span:last-child { color: var(--k-muted); }
.k-hours__hint { margin-top: 1rem; font-size: .85rem; color: var(--k-muted-dim); }

/* ------------------------------------------------------------ Kartenraster
   Eigene Klassen statt uk-grid: Joomlas Textfilter entfernt das Attribut
   "uk-grid" beim Speichern von Beiträgen, wodurch die Karten untereinander
   fallen. Reines CSS-Raster ist davon nicht betroffen. */
.k-cards {
  display: grid;
  gap: .75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.k-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.k-cards > * {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.4rem;
  background: var(--k-ink-raised);
  border: 1px solid var(--k-line);
  border-radius: 3px;
}
.k-cards h3 { font-family: var(--k-serif); font-size: 1.25rem; margin: 0 0 .5rem; color: var(--k-ivory); }
.k-cards p  { font-size: .9rem; color: var(--k-muted); margin: 0; }

@media (max-width: 960px) {
  .k-cards--3, .k-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .k-cards--2, .k-cards--3, .k-cards--4 { grid-template-columns: 1fr; }
}

/* Zweispaltiger Textblock (Einsatzgebiet / Erreichbarkeit) */
.k-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--k-line);
}

/* Verschachtelte Karten im eigenen Raster nicht doppelt rahmen. */
.k-cards .uk-card,
.k-cards > div > div {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}