/* TTSL-Rennsporttechnik — modernisiertes Stylesheet, Version 2 (helleres, freundlicheres Grau-Rot)
   Ablöst format.css + tc.css. Kein IE-Hack, kein Tabellenlayout, responsive. */

:root {
  --bg: #f3f1ef;
  --bg-panel: #ffffff;
  --bg-panel-2: #f7f5f3;
  --red: #e2001a;
  --red-dark: #b3000f;
  --red-light: #ff3347;
  --red-soft: #fdeceb;
  --text: #241f1d;
  --text-dim: #6a6560;
  --border: #e5e0da;
  --header-bg: #201d1b;
  --header-bg-2: #141211;
  --max-width: 1180px;
  --shadow: 0 2px 10px rgba(30, 20, 15, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 20, 15, 0.10);
  --shadow-lg: 0 16px 40px rgba(20, 15, 12, 0.16);
  --radius: 10px;
  --radius-lg: 16px;
  --font: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;

  /* Leicht transparente Varianten, damit das seitenweite Hintergrundbild
     durch die Felder hindurchschimmert (siehe .site-bg). Nur auf den
     öffentlichen Seiten wirksam; der Admin-Bereich bleibt bewusst blickdicht. */
  --bg-t: rgba(243, 241, 239, 0.55);
  --bg-panel-t: rgba(255, 255, 255, 0.72);
  --bg-panel-2-t: rgba(247, 245, 243, 0.72);
  --bg-panel-t-dense: rgba(255, 255, 255, 0.9);
  --bg-panel-2-t-dense: rgba(247, 245, 243, 0.9);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Verhindert, dass der Browser den (transparenten) body-Hintergrund auf die
     Canvas "durchreicht" und dabei vor den fixierten Hintergrundbildern
     (.site-bg, z-index -2) landet. Mit einem eigenen, deckenden
     html-Hintergrund bleibt body's leicht transparente Fläche eine normale,
     lokale Ebene ÜBER dem Bild — erst dadurch wirkt die Abdunkelung/
     Transparenz wie beabsichtigt. */
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-t);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }

/* Sticky-Footer: der Inhalt zwischen Header und Footer wächst, damit der
   Footer auch auf kurzen Platzhalterseiten am unteren Rand bleibt und dort
   nicht unbedeckte, ungedämpfte Hintergrundfläche sichtbar wird. */
.site-content { flex: 1 0 auto; }

/* ---------- Seitenweiter Hintergrund ---------- */
/* Fest positionierte Werkstattfotos hinter der ganzen Seite, deutlich sichtbar
   (R.T., Schritt 13: die vorherige, sehr dezente Version war kaum zu erkennen).
   Die Felder (.panel, Kacheln, Preistabellen ...) sind leicht transparent
   (siehe --bg-panel-t), sodass das Bild dort weiterhin durchscheint, ohne die
   Lesbarkeit zu stören. Wird von inc/header.php auf jeder Seite eingebunden. */
.site-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.site-bg-layer {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease;
  filter: saturate(0.75) brightness(1.02);
}
.site-bg-layer.is-active { opacity: 0.65; }
@media (prefers-reduced-motion: reduce) {
  .site-bg-layer { transition: none; }
}

a { color: var(--red-dark); text-decoration: none; }
a:hover, a:focus { color: var(--red); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Logo-Einblendung beim ersten Aufruf der Startseite ---------- */
/* Läuft rein über CSS-Keyframes (kein JS nötig, damit sie nie "hängen" bleibt, falls JavaScript
   deaktiviert ist): knapp 2,7s stehen lassen, dann über ~1,5s ausblenden, danach dauerhaft
   unsichtbar UND aus dem Klickfluss entfernt (visibility:hidden). pointer-events:none von Anfang
   an, damit auch während der Einblendung nichts blockiert wird.
   (R.T., 16.09.2026: erste Version mit 1,3s Standzeit war "bisserl sehr kurz" - deutlich verlängert.) */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: linear-gradient(160deg, var(--header-bg) 0%, var(--header-bg-2) 100%);
  pointer-events: none;
  animation: ttsl-intro-fade 4.2s ease forwards;
}
.intro-overlay .intro-logo {
  width: min(58vw, 260px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
.intro-overlay .intro-welcome {
  margin: 0;
  padding: 0 24px;
  max-width: 520px;
  text-align: center;
  color: #f2efec;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .01em;
}
@keyframes ttsl-intro-fade {
  0%   { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-overlay { animation-duration: .01s; animation-delay: .6s; }
}

/* ---------- Header ---------- */
.site-header {
  background: linear-gradient(180deg, var(--header-bg) 0%, var(--header-bg-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  position: relative;
}
.site-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, var(--red-dark), var(--red), var(--red-light));
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  flex-wrap: wrap;
  position: relative;
}

.logo img { height: 60px; width: auto; }

/* Marken-Logos im Wechsel (R.T., 22.09.2026, im Admin-Tab "Markenlogos" pflegbar, siehe
   inc/admin-brandlogos.php). Absolut positioniert und seitenmittig (R.T., 22.09.2026: "sollte
   Seitenmittig sein") relativ zum .header-inner-Container (derselben Breite wie der übrige
   Seiteninhalt, siehe --max-width) - unabhängig davon, wie breit Logo/Navigation/Anfragekorb gerade
   sind bzw. ob die Navigation gerade zwei- oder dreizeilig umbricht. Fest auf der Höhe des oberen
   Logos verankert (top: 16px = exakt das Padding von .header-inner), damit es bei umbrechender
   Navigation nicht mit nach unten wandert. Alle Logos übereinandergestapelt und per Überblendung
   (main.js) durchgewechselt, dadurch zwangsläufig alle auf derselben (jetzt größeren) Höhe -
   unabhängig vom Seitenverhältnis der jeweils hochgeladenen Datei. */
.brand-logos {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  height: 66px; width: 240px;
}
.brand-logos img {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 66px; width: auto; max-width: 240px; object-fit: contain;
  opacity: 0; transition: opacity 1.1s ease;
}
.brand-logos img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .brand-logos img { transition: none; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #55504b;
  color: #fff;
  font-size: 1.5rem;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.main-nav li { display: flex; flex: 0 0 auto; }

.main-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  color: #f2efec;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 11px 12px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  position: relative;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.main-nav a:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.main-nav a.active {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-color: var(--red);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(226, 0, 26, 0.35);
}

.main-nav a.nav-highlight {
  border: 2px solid var(--red);
  box-shadow: 0 0 0 1px rgba(226, 0, 26, 0.25);
}
.main-nav a.nav-highlight:hover { border-color: var(--red); }
/* R.T., 01.10.2026: "einen roten Rahmen, keine rote Fläche" - auch auf der eigenen Seite
   (.active) bleibt dieser Button bei seinem normalen dunklen Hintergrund, nur der rote Rahmen
   zeigt die Hervorhebung, statt wie die anderen Buttons komplett rot auszufüllen. */
.main-nav a.nav-highlight.active {
  background: rgba(255,255,255,0.05);
  border-color: var(--red);
  color: #f2efec;
  box-shadow: 0 0 0 1px rgba(226, 0, 26, 0.25);
}

.main-nav .nav-icon { height: 16px; vertical-align: -3px; margin-right: 6px; }
.main-nav .nav-logo { max-height: 26px; max-width: 140px; width: auto; height: auto; display: block; margin: 0 auto; }


/* ---------- Layout ---------- */
.page {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  padding: 32px 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: start;
}

.page.no-sidebar { grid-template-columns: 1fr; }

/* Grid-Kinder haben standardmäßig min-width:auto, d.h. sie weichen NICHT unter die Breite ihres
   breitesten, nicht umbrechenden Inhalts zurück (z.B. das <select> mit dem langen Markennamen
   "Hydraulische Vorspannungs-Kits (diverse Hersteller)" auf marke.php) - das sprengt sonst die
   ganze Seite seitlich auf dem Handy, obwohl die einzelnen Elemente selbst längst responsiv sind.
   min-width:0 hier behebt das, ohne dass main/aside sich sonst anders verhalten. */
.page > main, .page > .sidebar { min-width: 0; }

@media (max-width: 860px) {
  .page { grid-template-columns: 1fr; }
}

/* ---------- Cards / panels ---------- */
.panel {
  background: var(--bg-panel-t);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(3px);
  transition: box-shadow .2s ease;
}

.panel-title {
  background: linear-gradient(120deg, var(--red-dark), var(--red) 60%, var(--red-light));
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 14px 20px;
  font-size: 1.08rem;
}

.panel-body { padding: 20px 22px; }

.panel-body p:first-child { margin-top: 0; }
.panel-body p:last-child { margin-bottom: 0; }

.legal-text h2 { font-size: 1.15rem; color: var(--red-dark); margin: 28px 0 10px; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text h3 { font-size: 1rem; margin: 20px 0 8px; }
.legal-text ul { margin: 0 0 14px; padding-left: 20px; }
.legal-text li { margin-bottom: 8px; }
.legal-text p { margin: 0 0 14px; }
.legal-text small { color: var(--text-dim); }

.panel.panel-accent { border-color: var(--red); }
.panel.panel-accent .panel-title { background: linear-gradient(90deg, #7a6a4f, #a68a5b); }

/* ---------- Hero ---------- */
/* Kein eigenes Hintergrundbild mehr (R.T., 22.09.2026: "da sind 2 Hintergrundbilder untereinander"
   - der Hero-Bereich hatte bisher einen eigenen Foto-Wechsel UND darunter schimmerte durch die
   halbtransparenten Felder das seitenweite Hintergrundbild durch, macht also zwei unterschiedliche
   Fotos gleichzeitig sichtbar). Jetzt transparent: dasselbe, seitenweite Hintergrundbild (.site-bg,
   siehe inc/header.php) scheint auch hier durch, nur per Verlauf zusätzlich abgedunkelt - dadurch
   genau EIN durchgängiges Hintergrundbild auf der ganzen Startseite. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 54px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(20,18,17,0.42) 0%, rgba(20,18,17,0.68) 100%);
}

.hero-content { position: relative; z-index: 1; }

.hero h1 { margin: 0 0 14px; }

/* Großes TTSL-Logo statt Schriftzug (R.T., 22.09.2026: "Statt des Schriftzuges TTSL
   Rennsporttechnik hätte ich da auch lieber mein Logo") - deutlich größer als das kleine Logo oben
   im Header, mit leichtem Schlagschatten für Kontrast auf hellen wie dunklen Hintergrundfotos.
   display:block + margin:0 auto zum Zentrieren ist hier nötig, weil die globale img-Regel weiter
   oben ("img { display:block }") sonst die text-align:center-Zentrierung von .hero aushebeln würde
   (R.T., 22.09.2026: "Das logo auf der Startseite sollte schon mittig sein"). */
.hero-logo { display: block; height: 130px; width: auto; max-width: 92%; margin: 0 auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)); }

.hero p { color: #d8d3ce; max-width: 640px; margin: 0 auto; }

@media (max-width: 720px) {
  .hero-logo { height: 88px; }
}

/* ---------- Sidebar ---------- */
.sidebar .panel-body { padding: 16px; text-align: center; font-size: 0.92rem; }

.contact-box {
  background: linear-gradient(135deg, var(--red-dark), var(--red) 65%, var(--red-light));
  color: #fff;
  padding: 18px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.contact-box .contact-owner { font-size: 0.86rem; opacity: .85; margin-bottom: 8px; letter-spacing: .02em; text-transform: uppercase; }
.contact-box strong { display: block; font-size: 1.1rem; margin-bottom: 6px; }
.contact-box a { color: #fff; }
.contact-box a:hover, .contact-box a:focus { color: #fff; text-decoration: underline; }
.contact-box .hours { font-size: 0.88rem; opacity: .92; }

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.partner-logos img { max-height: 40px; width: auto; }

/* ---------- News ---------- */
.news-panel .panel-body {
  text-align: left;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.news-item {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}
.news-item:last-child { border-bottom: none; }
.news-item .news-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
}
.news-item .news-date {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.news-item .news-title {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--text);
}
.news-item .news-text {
  font-size: 0.92rem;
  color: var(--text-dim);
}
.news-item .news-text p { margin: 0 0 8px; }
.news-item .news-text p:last-child { margin-bottom: 0; }

/* ---------- Product/nav grid on homepage ---------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.category-grid a {
  background: var(--bg-panel-t);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 16px;
  text-align: center;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  backdrop-filter: blur(2px);
  transition: border-color .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease;
}
.category-grid a:hover {
  border-color: var(--red);
  color: var(--red-dark);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
.category-grid a.tile-cta {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red-dark);
}
.category-grid a.tile-cta:hover { background: var(--red); color: #fff; }

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

/* ---------- Seitenbild + Text nebeneinander (generische Platzhalterseiten, z.B. TTX40) ---------- */
.page-content-flex {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 28px;
  align-items: start;
}
.page-content-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.page-content-text p:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .page-content-flex { grid-template-columns: 1fr; }
}

/* ---------- Seitenfoto, vom Fließtext umlaufen (R.T., 29.09.2026: Über uns / Öhlins-Center /
   Andreani-Import) - bewusst per float statt Grid/Flex wie .page-content-flex oben, damit der
   Text wirklich um das Bild herumfließt statt daneben in einer eigenen Spalte zu stehen. */
.page-photo-wrap::after { content: ""; display: block; clear: both; }
.page-photo-wrap .page-photo {
  float: left;
  width: 42%;
  max-width: 320px;
  height: auto;
  margin: 4px 22px 14px 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.page-photo-wrap p:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .page-photo-wrap .page-photo { float: none; width: 100%; max-width: none; margin: 0 0 16px; }
}

/* ---------- Katalog-Verlinkung (Öhlins-Center / Andreani-Import Hubs) ---------- */
.catalog-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 18px 0 6px;
}
.catalog-link-card {
  display: block;
  background: var(--bg-panel-t);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(2px);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.catalog-link-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.catalog-link-card .clc-title { font-weight: 700; color: var(--red-dark); margin-bottom: 6px; font-size: 1.02rem; }
.catalog-link-card .clc-desc { font-size: 0.86rem; color: var(--text-dim); }
.catalog-link-card .clc-count { display: inline-block; margin-top: 10px; font-size: 0.78rem;
  background: var(--red-soft); color: var(--red-dark); border-radius: 10px; padding: 2px 9px; }

.catalog-back { font-size: 0.86rem; margin-bottom: 14px; }
.catalog-back a { color: var(--text-dim); }

/* ---------- Leistungen-Übersicht (Kacheln zu den vier Service-Unterseiten) ---------- */
.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 18px 0 6px;
}
.leistungen-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-panel-t);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(2px);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.leistungen-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.leistungen-card-title { font-weight: 700; color: var(--red-dark); font-size: 1.05rem; }
.leistungen-card-teaser { font-size: 0.88rem; color: var(--text-dim); flex-grow: 1; }
.leistungen-card-more { font-size: 0.86rem; font-weight: 600; color: var(--red); }

/* ---------- Produkt-Kärtchen auf generischen Seiten (z.B. Leistungen-Unterseiten) ---------- */
.service-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 22px 0 6px;
}
.service-product-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-panel-t);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(2px);
}
.spc-title { font-weight: 700; color: var(--red-dark); font-size: 1rem; }
.spc-price { font-size: 0.9rem; color: var(--text-dim); }
.spc-price-net { font-size: 0.78rem; color: var(--text-dim); opacity: 0.8; }
.spc-price-hint { font-size: 0.85em; font-weight: 400; }
.spc-add-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.spc-add-label { font-size: 0.82rem; color: var(--text-dim); }
.service-product-card .add-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--red-dark);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.service-product-card .add-btn:hover { background: var(--red-soft); border-color: var(--red); transform: translateY(-1px); }
.service-product-card .add-btn.in-cart { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Hinweis "Anfragekorb statt Warenkorb" ---------- */
.consult-notice {
  background: var(--red-soft);
  border: 1px solid rgba(226, 0, 26, 0.25);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 0.92rem;
  color: var(--text);
}
.consult-notice p { margin: 0; }

/* ---------- SetupLog (eingebettet, setuplog.php) ---------- */
.setuplog-panel { background: var(--bg-panel-t-dense); }
.setuplog-frame {
  display: block;
  width: 100%;
  height: 82vh;
  min-height: 520px;
  border: 0;
}

/* ---------- Kompakte Katalog-Buttons (Produkte-Seite, artikellisten.php) ---------- */
.catalog-btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 6px;
}
.catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-panel-t);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: var(--shadow);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.catalog-btn:hover { border-color: var(--red); background: var(--red-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.catalog-btn .cb-title { color: var(--red-dark); }
.catalog-btn .cb-count {
  font-size: 0.76rem;
  color: var(--text-dim);
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
  padding: 1px 8px;
}
.catalog-back a:hover { color: var(--red-dark); }

/* ---------- Produktgruppen (Produkte-Seite, artikellisten.php): Gruppen als kleine Quadrate,
   Untergruppen als Pulldown-Menü darunter (R.T., 16.09.2026) ---------- */
.produkt-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin: 18px 0 6px;
}
.produkt-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pg-square {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 8px;
}
/* Logo statt rotem Feld (R.T., 01.10.2026: "statt der roten Vierecke mit Schrift auch
   Markenlogos einsetzen können") - heller Hintergrund, damit auch Logos mit dunkler/transparenter
   Zeichnung gut erkennbar bleiben; Bild wird proportional in die Kachel eingepasst. */
.pg-square.pg-logo { background: #fff; padding: 10px; }
.pg-square.pg-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg-select {
  width: 100%;
  max-width: 220px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.86rem;
  background: #fff;
  color: var(--text);
}
.pg-fallback-links { list-style: none; margin: 0; padding: 0; text-align: center; }
.pg-fallback-links li { margin: 3px 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--header-bg-2);
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  padding: 20px;
  text-align: center;
  color: #cfcac5;
  font-size: 0.88rem;
}
.site-footer a { color: #cfcac5; margin: 0 10px; }
.site-footer a:hover { color: #fff; }

/* ---------- Cart widget ---------- */
.cart-widget {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  position: relative;
  margin-left: 6px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cart-widget:hover {
  background: linear-gradient(135deg, var(--red-light), var(--red-dark));
  border-color: var(--red);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(226, 0, 26, 0.35);
}
.cart-widget .cart-icon { font-size: 1.05rem; }
.cart-widget .cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--header-bg-2);
}
.cart-widget .cart-badge[hidden] {
  /* "display:flex" oben hat dieselbe Spezifität wie die Browser-Vorgabe für [hidden] und würde sie
     sonst überschreiben, sodass ein leerer Anfragekorb fälschlich eine "0" anzeigen würde. */
  display: none;
}
@media (max-width: 780px) {
  .cart-widget .cart-label { display: none; }
  .cart-widget { padding: 9px 10px; margin-left: auto; order: 1; }
  .nav-toggle { order: 2; }
}

/* ---------- Produkt-/Preistabellen (Kataloge) ---------- */
.catalog-intro {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 900px;
  margin: 0 0 18px;
}
.catalog-quicklinks {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.9;
}
.catalog-quicklinks a { color: var(--red-dark); }
.catalog-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.catalog-controls input[type=text] {
  padding: 11px 14px;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.catalog-controls input[type=text]:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,0,26,0.12);
}

/* Suchfeld mit Lupe: Klick auf die Lupe wendet den Filter (nochmal) explizit an - die Suche filtert
   zwar bereits automatisch während der Eingabe, die Lupe gibt zusätzlich einen sichtbaren "Los geht's"-
   Auslöser (R.T.: soll die Suche "aktiv in Kraft setzen"). */
.cf-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
  display: flex;
}
.cf-search-wrap .cf-search {
  width: 100%;
  padding-right: 42px;
}
.cf-search-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-soft);
  color: var(--red-dark);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.cf-search-btn:hover { background: var(--red); color: #fff; }
.cf-search-btn:active { transform: scale(0.94); }
.catalog-controls select {
  padding: 11px 14px;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-family: inherit;
  /* Ohne min-width:0 verhindert der lange Markenname "Hydraulische Vorspannungs-Kits (diverse
     Hersteller)" in der Marken-Auswahl (marke.php), dass sich das <select> in seinem Flex-Container
     unter die Bildschirmbreite verkleinert - das erzwingt auf dem Handy seitliches Scrollen der
     ganzen Seite, selbst wenn die darunterliegende Preistabelle selbst schon fürs Handy optimiert ist. */
  min-width: 0;
  max-width: 100%;
}
.catalog-controls .catalog-stat { font-size: 0.85rem; color: var(--text-dim); }
.catalog-controls .catalog-stat strong { color: var(--text); }

.price-table-wrap {
  overflow-x: auto;
  /* Damit die fixierte Kopfzeile (thead th mit position:sticky weiter unten) beim Scrollen wirklich
     stehen bleibt, statt mit dem Rest der Seite mit hochzuwandern (R.T.-Feedback, 16.09.2026):
     "position:sticky" bezieht sich immer auf den NÄCHSTEN Vorfahren mit eigenem Scroll-Mechanismus.
     "overflow-x: auto" macht diesen Bereich technisch bereits zu so einem Vorfahren (Browser setzen
     überflow-y dann automatisch auf "auto" mit), aber ohne eine feste max-height passiert innerhalb
     dieses Bereichs nie ein eigener Bildlauf - die Kopfzeile hatte dadurch effektiv gar keinen
     funktionierenden Bezugsrahmen zum Fixieren. Mit max-height + overflow-y:auto wird daraus ein
     bewusst eigenständig scrollender Tabellenbereich (wie bei einer Tabellenkalkulation): breite
     Tabellen bleiben weiterhin seitlich scrollbar, UND die Kopfzeile bleibt jetzt zuverlässig oben
     stehen, während nur die Zeilen darunter durchlaufen. Auf dem Handy (Kartenansicht, siehe weiter
     unten) wird das wieder aufgehoben, da dort ohnehin kein <thead> mehr angezeigt wird. */
  overflow-y: auto;
  max-height: 72vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--bg-panel-t-dense);
  backdrop-filter: blur(2px);
}
table.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
table.price-table thead th {
  background: linear-gradient(90deg, var(--red-dark), var(--red));
  color: #fff;
  text-align: left;
  padding: 10px 10px;
  position: sticky;
  top: 0;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
}
table.price-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.price-table tbody tr.item-row:nth-of-type(even) td { background: var(--bg-panel-2-t-dense); }
table.price-table tbody tr.item-row:hover td { background: var(--red-soft); }
table.price-table tr.group-row td {
  background: #efe8dd;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 9px 10px;
  color: #6b4a1f;
}
table.price-table .badge {
  display: inline-block;
  background: #fff;
  color: #6b4a1f;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.75rem;
  margin-left: 6px;
}
table.price-table td.price, table.price-table th.price { text-align: right; white-space: nowrap; }
table.price-table td.code { white-space: nowrap; color: var(--text-dim); }
table.price-table td.spring { white-space: nowrap; text-align: center; }
table.price-table td.add-col, table.price-table th.add-col { text-align: center; width: 44px; }
table.price-table .add-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--red-dark);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
table.price-table .add-btn:hover { background: var(--red-soft); border-color: var(--red); transform: translateY(-1px); }
table.price-table .add-btn.in-cart { background: var(--red); border-color: var(--red); color: #fff; }
table.price-table .add-btn.in-cart:hover { background: var(--red-dark); }
table.price-table .add-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ---------- Anfragekorb: Bestätigungs-/Erfolgs-Leiste (unten fixiert) ---------- */
.cart-confirm-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 140%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(92vw, 560px);
  background: var(--header-bg-2);
  color: #fff;
  padding: 14px 12px 14px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  transition: transform .25s ease;
}
.cart-confirm-bar.is-visible { transform: translate(-50%, 0); }
.cart-confirm-bar.is-success { background: #1e6b34; }
.cart-confirm-bar .ccb-text { flex: 1; font-size: 0.92rem; line-height: 1.4; }
.cart-confirm-bar .ccb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cart-confirm-bar .ccb-actions button {
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.cart-confirm-bar .ccb-confirm { background: var(--red); color: #fff; }
.cart-confirm-bar .ccb-confirm:hover { background: var(--red-dark); }
.cart-confirm-bar .ccb-cancel { background: rgba(255,255,255,0.14); color: #fff; }
.cart-confirm-bar .ccb-cancel:hover { background: rgba(255,255,255,0.24); }
.cart-confirm-bar .ccb-close {
  background: none;
  border: none;
  color: #fff;
  opacity: .75;
  font-size: 1.3rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.cart-confirm-bar .ccb-close:hover { opacity: 1; }
@media (max-width: 620px) {
  .cart-confirm-bar { left: 12px; right: 12px; bottom: 12px; transform: translateY(140%); max-width: none; }
  .cart-confirm-bar.is-visible { transform: translateY(0); }
}
table.price-table tr.item-row.hidden, table.price-table tr.group-row.hidden { display: none; }

/* ---------- Preistabellen auf dem Handy: Karten statt breiter Tabelle ---------- */
/* Breite Tabellen (bis zu 12 Spalten bei der Federtabelle) zwingen auf dem Handy sonst zu ständigem
   seitlichem Hin- und Herscrollen (R.T.-Feedback, 16.09.2026). Unterhalb der Breakpoint-Grenze wird
   jede Zeile stattdessen zu einer eigenen Karte mit "Spalte: Wert"-Zeilen (Spaltenname kommt per CSS
   aus dem data-label-Attribut, siehe inc/catalog.php) - kein horizontales Scrollen mehr nötig, nur
   noch normales Scrollen nach unten wie auf dem Rest der Seite. Leere Zellen (z.B. oft leeres
   Baujahr) werden automatisch ausgeblendet (:empty), der "+"-Anfrage-Button wandert oben rechts in
   die Karte. */
@media (max-width: 700px) {
  .price-table-wrap { overflow-x: visible; overflow-y: visible; max-height: none; border: none; box-shadow: none; background: transparent; backdrop-filter: none; }
  table.price-table, table.price-table tbody, table.price-table tr, table.price-table td {
    display: block;
    width: 100%;
  }
  table.price-table thead { display: none; }

  table.price-table tbody tr.item-row {
    position: relative;
    margin-bottom: 12px;
    padding: 14px 56px 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-panel-t-dense);
    box-shadow: var(--shadow-md);
  }
  table.price-table tbody tr.item-row:nth-of-type(even) td { background: none; }
  table.price-table tbody tr.item-row:hover td { background: none; }

  table.price-table tbody tr.item-row td {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
    border: none;
    font-size: 0.9rem;
    /* Lange, leerzeichenlose Werte (z.B. "Ducati 749/848/999/1098/1198/Multistrada") sonst nicht
       umbrechen und die Karte (und die ganze Seite) seitlich aufsprengen. */
    overflow-wrap: anywhere;
    min-width: 0;
  }
  table.price-table tbody tr.item-row td:empty { display: none; }
  table.price-table tbody tr.item-row td::before {
    content: attr(data-label);
    flex: 0 0 44%;
    max-width: 44%;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-dim);
  }
  table.price-table tbody tr.item-row td.price,
  table.price-table tbody tr.item-row td.code,
  table.price-table tbody tr.item-row td.spring {
    text-align: left;
    white-space: normal;
  }

  table.price-table tbody tr.item-row td.add-col {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    display: block;
  }
  table.price-table tbody tr.item-row td.add-col::before { content: none; }

  table.price-table tr.group-row {
    margin: 18px 0 10px;
    border-radius: var(--radius);
  }
  table.price-table tr.group-row td { padding: 9px 14px; }
}

/* ---------- Anfragekorb / Kontaktformular ---------- */
.cart-list { margin: 10px 0 20px; }
.cart-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.cart-item .ci-main { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cart-item .ci-label { flex: 1; font-size: 0.92rem; }
.cart-item .ci-price { font-weight: 600; color: var(--red-dark); white-space: nowrap; }
.cart-item .ci-remove {
  background: none; border: none; color: var(--text-dim); font-size: 1.3rem; cursor: pointer;
  line-height: 1; padding: 0 4px;
}
.cart-item .ci-remove:hover { color: var(--red); }
.cart-empty { color: var(--text-dim); font-size: 0.92rem; }
.cart-actions { margin: 6px 0 22px; }

/* ---------- Preisvorschlag je Artikel im Anfragekorb (R.T., 16.09.2026, siehe anfrage.php) ---------- */
.ci-proposal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; }
.ci-proposal-toggle, .ci-proposal-edit, .ci-proposal-clear, .ci-proposal-confirm, .ci-proposal-cancel {
  background: none; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
  font-size: 0.8rem; font-weight: 600; color: var(--red-dark); cursor: pointer;
}
.ci-proposal-toggle:hover, .ci-proposal-edit:hover, .ci-proposal-confirm:hover { border-color: var(--red); background: var(--red-soft); }
.ci-proposal-clear, .ci-proposal-cancel { color: var(--text-dim); }
.ci-proposal-value { color: var(--text-dim); }
.ci-proposal-label { color: var(--text-dim); }
.ci-proposal-input {
  width: 100px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px;
  font: inherit; font-size: 0.85rem;
}
.ci-proposal-input.has-error { border-color: #c0392b; background: #fdeceb; }
/* Fehlermeldung bei zu hohem Rabatt (R.T., 30.09.2026: soll nur die Preisvorschlag-Eingabe
   betreffen, nicht das ganze Formular zurücksetzen - siehe anfrage.php) - eigene Zeile unter der
   Eingabe, damit der Rest des Anfragekorbs unangetastet bleibt. R.T., 01.10.2026: als deutlich
   sichtbare Box (wie .form-flash-error) statt nur als kleine rote Textzeile - war vorher zu
   unauffällig. */
.ci-proposal-error {
  flex-basis: 100%; display: flex; align-items: center; gap: 7px;
  background: #fdeceb; border: 1px solid #f3b9b4; color: #8a1c14;
  padding: 8px 12px; border-radius: 6px; font-size: 0.82rem; font-weight: 600;
}
.ci-proposal-error::before { content: "\2715"; font-weight: 700; }
/* Hinweis bei einem akzeptierten (innerhalb der Toleranz liegenden) Preisvorschlag (R.T., 01.10.2026)
   - bewusst zurückhaltender als die Ablehnungs-Box, da hier nichts abgelehnt wurde. */
.ci-proposal-note {
  flex-basis: 100%; color: var(--text-dim); font-size: 0.78rem; font-style: italic;
}

.site-form label { display: block; font-weight: 600; margin: 14px 0 4px; font-size: 0.92rem; }
.site-form input[type=text], .site-form input[type=email], .site-form input[type=tel], .site-form input[type=password], .site-form textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 5px; font: inherit; background: #fff;
}
.site-form textarea { min-height: 110px; resize: vertical; }
.site-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .site-form-row { grid-template-columns: 1fr; } }
.site-form .btn {
  display: inline-block; margin-top: 16px; padding: 12px 26px;
  background: linear-gradient(135deg, var(--red-light), var(--red-dark)); color: #fff;
  border: none; border-radius: 999px; font-weight: 600; cursor: pointer; font-size: 0.95rem;
  box-shadow: 0 8px 20px rgba(226, 0, 26, 0.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.site-form .btn:hover { background: linear-gradient(135deg, var(--red), var(--red-dark)); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(226, 0, 26, 0.32); }
.site-form .btn-secondary { background: #6a6560; box-shadow: none; }
.site-form .btn-secondary:hover { background: #504c48; box-shadow: none; }
.site-form .form-hint { font-size: 0.8rem; color: var(--text-dim); margin-top: 6px; }
.honeypot-field { position: absolute; left: -9999px; top: -9999px; }
/* ---------- Spam-Schutz (inc/formguard.php, R.T., 01.10.2026) ---------- */
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.form-captcha { margin: 14px 0; padding: 12px 14px; background: #f7f6f4; border: 1px solid var(--border); border-radius: 6px; }
.form-captcha label { font-weight: 600; font-size: 0.86rem; display: block; margin-bottom: 6px; }
.form-captcha input { max-width: 120px; }
.form-flash-success { background: #e9f7ec; border: 1px solid #bfe6c9; color: #1e6b34; padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; }
.form-flash-error { background: #fdeceb; border: 1px solid #f3b9b4; color: #8a1c14; padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; }

/* ---------- Händlerbereich (haendler.php) ---------- */
.haendler-gate { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) { .haendler-gate { grid-template-columns: 1fr; } }
.haendler-hint { color: var(--text-dim); font-size: 0.86rem; }
.haendler-file-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.haendler-file-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 6px;
  background: var(--bg-panel-2-t); border: 1px solid var(--border); font-weight: 600; width: fit-content;
}
.haendler-file-link:hover { border-color: var(--red); color: var(--red-dark); text-decoration: none; background: var(--red-soft); }

/* ---------- Auftragsformular (auftragsformular.php, R.T., 01.10.2026) ---------- */
.af-section {
  margin: 26px 0 6px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 1.02rem; color: var(--red-dark);
}
.af-form h3.af-section:first-of-type { border-top: none; padding-top: 0; margin-top: 10px; }
.af-check-inline {
  display: flex; align-items: flex-start; gap: 9px; font-weight: 400 !important;
  margin: 10px 0 4px !important; cursor: pointer;
}
.af-check-inline input[type=checkbox] { width: auto; margin-top: 3px; flex: none; }
.af-check-grid { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 10px; }
.af-check-grid .af-check-inline { margin: 4px 0 !important; flex: 1 1 220px; }
.af-check-grid-3 .af-check-inline { flex-basis: 30%; }
.af-problem-list { display: flex; flex-direction: column; margin: 6px 0 16px; }
.af-problem-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.af-problem-item:first-child { border-top: 1px solid var(--border); }
.af-problem-item input[type=checkbox] { width: auto; margin-top: 3px; flex: none; }
.af-problem-text { font-size: 0.92rem; line-height: 1.4; }
.af-problem-desc { color: var(--text-dim); font-weight: 400; }
.af-check-confirm {
  background: #fff8e6; border: 1px solid #ecd9a6; border-radius: 6px; padding: 12px 14px !important;
  font-weight: 600 !important; margin-top: 10px !important;
}
@media (max-width: 680px) {
  .af-check-grid-3 .af-check-inline, .af-check-grid .af-check-inline { flex-basis: 100%; }
}

/* ---------- Mobile nav ---------- */
@media (max-width: 780px) {
  .nav-toggle { display: inline-block; }
  .main-nav { display: none; width: 100%; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; }
  .main-nav a { width: 100%; }
  .header-inner { flex-direction: row; }
  .brand-logos { display: none; }
}