html { outline: 8px solid lime !important; }
/*
Theme Name: TheGem Child Clean
Description: Safe minimal child for TheGem (KTM Köstler)
Author: KTM Köstler
Template: thegem
Version: 1.0.0
Text Domain: thegem-child-clean
*/
/* =========================
   KTM NEXT LEVEL – Design C
   ========================= */
   

/* 0) Grundlook: Typo + Hintergrund */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root{
  --kc-radius: 14px;
  --kc-shadow: 0 10px 30px rgba(0,0,0,.08);
  --kc-dark: #121826;
  --kc-dark-2: #1b2335;
  --kc-border: rgba(0,0,0,.08);
}

/* 1) Top-Bar (Kontakt/Probefahrt/Mein Konto) – in C erstmal weg */
.top-area,
.top-area-background,
#top-area {
  display: none !important;
}

/* 2) Header: schmaler, weniger “leeres Weiß” */
#site-header-wrapper,
#site-header,
.site-header {
  background: #fff;
}

#site-header-wrapper .site-header,
#site-header-wrapper {
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* TheGem nutzt je nach Header-Setup unterschiedliche Container.
   Wir reduzieren pauschal vertikales Padding. */
#site-header-wrapper .container,
#site-header .container,
.site-header .container {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 3) Titlebar: Orange Balken entschärfen (dunkel/modern), Höhe reduzieren */
.page-title-block,
.titlebar,
#page-title,
.page-title {
  background: linear-gradient(90deg, var(--kc-dark), var(--kc-dark-2)) !important;
}

.page-title-block,
#page-title {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.page-title-block .page-title-title h1,
#page-title .title h1,
.page-title h1 {
  color: #fff !important;
  letter-spacing: .02em;
}

/* Breadcrumbs lesbar */
.page-title-block .breadcrumbs,
#page-title .breadcrumbs,
.breadcrumbs {
  color: rgba(255,255,255,.75) !important;
}
.page-title-block .breadcrumbs a,
#page-title .breadcrumbs a,
.breadcrumbs a {
  color: rgba(255,255,255,.9) !important;
  text-decoration: none;
}
.page-title-block .breadcrumbs a:hover,
#page-title .breadcrumbs a:hover,
.breadcrumbs a:hover {
  text-decoration: underline;
}

/* 4) Inhalt: generelles Spacing etwas “wertiger” */
#main,
.site-content,
.content-area {
  padding-top: 26px;
}

/* 5) Cards allgemein moderner (News, Downloads, Shop-Teaser) */
article,
.post,
.wpb_wrapper .wpb_content_element,
.woocommerce ul.products li.product,
.wpdm-download,
.download-card {
  border-radius: var(--kc-radius);
}

/* 6) News-Grid: Cards optisch “zusammenziehen” */
.blog .post,
.archive .post,
.single .post {
  border: 1px solid var(--kc-border);
  box-shadow: var(--kc-shadow);
  overflow: hidden;
  background: #fff;
}

.blog .post .entry-title a,
.archive .post .entry-title a {
  text-decoration: none;
}

/* 7) Shop (Kategorie-Kacheln / Archive) – Grid zentrieren & größer wirken lassen */
.woocommerce-page .products,
.woocommerce ul.products {
  justify-content: center;
}

.woocommerce ul.products li.product {
  border: 1px solid var(--kc-border);
  box-shadow: var(--kc-shadow);
  overflow: hidden;
  background: #fff;
}

/* 8) Downloads: Buttons und Kacheln moderner (falls WPDM Cards) */
.wpdm-download,
.w3eden .card,
.w3eden .panel {
  border: 1px solid var(--kc-border) !important;
  box-shadow: var(--kc-shadow) !important;
  border-radius: var(--kc-radius) !important;
}

/* 9) Footer optisch sauber */
#footer,
.footer,
.site-footer {
  background: var(--kc-dark) !important;
}
#footer, #footer *,
.footer, .footer * {
  color: rgba(255,255,255,.85) !important;
}