/*
Theme Name:  Keyhafen
Description: Storefront-Child-Theme mit Keyhafen CI – maritim-modern.
Template:    storefront
Version:     0.9.2
Author:      Keyhafen
Text Domain: keyhafen
*/

:root {
  --kh-hafenblau: #0B2545;
  --kh-ozean: #1B6CA8;
  --kh-welle: #7FB6E0;
  --kh-orange: #FF6B35;
  --kh-orange-hover: #E5551F;
  --kh-gischt: #F4F7FA;
  --kh-gruen: #2E9E6B;
  --kh-text: #1C2B39;
  --kh-font-head: 'Sora', -apple-system, 'Segoe UI', sans-serif;
  --kh-font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--kh-font-body);
  color: var(--kh-text);
  background: var(--kh-gischt);
}

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.price, .button, .btn {
  font-family: var(--kh-font-head);
}

h1, h2, h3 { color: var(--kh-hafenblau); }

/*
 * Header weiß statt Hafenblau (Nutzer-Referenz): sorgt für sichtbaren
 * Kontrast des Logos, das selbst viel Weiß/Hafenblau enthält und auf
 * dunklem Grund kaum zu erkennen war. Footer bleibt im Hafenblau.
 */
.site-header {
  background-color: #fff;
  border-bottom: 1px solid #E3EAF1;
}
.storefront-handheld-footer-bar {
  background-color: var(--kh-hafenblau);
}
.site-header a, .site-header .site-title a, .main-navigation ul li a {
  color: var(--kh-hafenblau);
}
.site-header-cart .cart-contents {
  color: var(--kh-hafenblau);
}
.main-navigation ul li a:hover { color: var(--kh-ozean); }
/* Mega-Menü-Trigger "Shop" etwas kräftiger hervorheben, wie ein aktiver Menüpunkt. */
.main-navigation ul.menu > li.kh-megamenu-item > a { font-weight: 700; }

.site-footer {
  background-color: var(--kh-hafenblau);
  color: var(--kh-welle);
}
.site-footer a { color: #fff; }

/* Buttons: Container-Orange als CTA */
.button, button, input[type="submit"],
.woocommerce #respond input#submit, .wc-block-components-button {
  background-color: var(--kh-orange);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
}
.button:hover, button:hover, input[type="submit"]:hover {
  background-color: var(--kh-orange-hover);
  color: #fff;
}
.button.alt, .single_add_to_cart_button {
  background-color: var(--kh-orange);
}

/* Links */
a { color: var(--kh-ozean); }

/* Preise */
.woocommerce-Price-amount, .price {
  color: var(--kh-hafenblau);
  font-weight: 700;
}
.price ins .woocommerce-Price-amount { color: var(--kh-orange); }

/* Trust-Badge "Sofort per E-Mail" – eigene Zeile direkt über dem Kaufen-Button */
.kh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kh-gruen);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--kh-font-head);
  margin: 4px 0 12px;
}
.single-product div.product .summary .kh-badge { display: flex; width: fit-content; }

/* Produktkarten */
ul.products li.product {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(11, 37, 69, 0.08);
}

/* Onsale-Badge in Orange */
.onsale {
  background-color: var(--kh-orange);
  border-radius: 999px;
}

/* Store Notice */
.woocommerce-store-notice, p.demo_store {
  background-color: var(--kh-ozean);
}

/* ==========================================================================
   Startseite (Aufgabe 008) – Blöcke nach SHOP-KONZEPT.md / mockup/startseite.html
   ========================================================================== */

/*
 * Storefront reserviert standardmäßig ~22% Breite für eine Sidebar
 * (.content-area = 73.9%), auch wenn keine Sidebar aktiv ist – das erzeugt
 * viel verschenkten Leerraum am rechten Rand. Unsere Startseite nutzt nie
 * eine Sidebar, daher hier auf volle Breite erzwingen.
 */
body.kh-start-page .content-area {
  width: 100%;
  float: none;
  margin-right: 0;
}
body.kh-start-page .widget-area { display: none; }
/* Storefronts Standard-Container ist mit ~1064px auf großen Screens recht
   eng und lässt viel Rand – für die Startseite etwas großzügiger fassen. */
body.kh-start-page #content > .col-full { max-width: 1400px; }

.kh-start-main { padding: 0; }
.kh-wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.kh-wrap--narrow { max-width: 1320px; }

.kh-hero {
  background: var(--kh-hafenblau);
  color: #fff;
  padding: 56px 0 0;
  position: relative;
}
.kh-hero-inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 56px;
}
.kh-hero h1 {
  font-size: 40px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.kh-hero h1 span { color: var(--kh-orange); }
.kh-hero-sub { color: var(--kh-welle); font-size: 18px; margin: 16px 0 24px; }
.kh-search {
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 520px;
}
.kh-search input {
  flex: 1;
  border: none;
  padding: 16px 18px;
  font-size: 16px;
  font-family: var(--kh-font-body);
  outline: none;
}
.kh-search button {
  background: var(--kh-orange);
  border: none;
  color: #fff;
  padding: 0 26px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--kh-font-head);
}
.kh-search button:hover { background: var(--kh-orange-hover); }
.kh-hero-ship { display: flex; justify-content: center; }
.kh-waves { display: block; width: 100%; height: 60px; margin-bottom: -1px; }

.kh-usps { background: #fff; border-bottom: 1px solid #E3EAF1; }
.kh-usps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 20px 24px;
}
.kh-usp {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  justify-content: center;
}

.kh-section { padding: 56px 0; }
.kh-section--tight { padding-top: 0; }
.kh-section h2 { font-size: 28px; margin-bottom: 6px; }
.kh-sub { color: var(--kh-text); opacity: .7; margin-bottom: 28px; }

.kh-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kh-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.kh-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 5px rgba(11, 37, 69, .08);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
}
.kh-card-icon { display: flex; justify-content: center; margin-bottom: 6px; }
.kh-card h3 { margin: 10px 0 4px; color: var(--kh-hafenblau); font-size: 18px; }
.kh-card-from { color: var(--kh-text); opacity: .7; font-size: 14px; }

.kh-prod {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 5px rgba(11, 37, 69, .08);
  position: relative;
  text-align: left;
  text-decoration: none;
  color: inherit;
  display: block;
}
.kh-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--kh-gruen);
  color: #fff;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
}
.kh-prod-art { display: flex; justify-content: center; padding: 22px 0 8px; }
.kh-prod-art img { max-height: 64px; width: auto; }
.kh-prod h3 { font-size: 16px; color: var(--kh-hafenblau); min-height: 40px; margin: 0 0 6px; }
.kh-prod-stock { font-size: 12.5px; color: var(--kh-gruen); font-weight: 600; margin-bottom: 8px; }
.kh-prod-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.kh-prod-price { font-size: 20px; font-weight: 800; color: var(--kh-hafenblau); }
.kh-prod-old { font-size: 13px; color: var(--kh-text); opacity: .6; text-decoration: line-through; font-weight: 400; display: block; }
.kh-prod-mini {
  background: var(--kh-orange);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px 14px;
  font-weight: 700;
  font-family: var(--kh-font-head);
  font-size: 14px;
}

/* .kh-steps ist keine .kh-section (eigener dunkler Vollbreite-Block) und
   bekam dadurch kein vertikales Padding – der Kasten klebte direkt am
   vorherigen/nächsten Abschnitt. */
.kh-steps { background: var(--kh-hafenblau); color: #fff; padding: 56px 0; }
.kh-steps h2 { color: #fff; }
.kh-steps .kh-sub { color: var(--kh-welle); opacity: 1; }
.kh-step {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(127, 182, 224, .25);
  border-radius: 14px;
  padding: 26px;
  text-align: center;
}
.kh-step-n {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kh-orange);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-family: var(--kh-font-head);
}
.kh-step h3 { color: #fff; font-size: 17px; margin-bottom: 8px; }
.kh-step p { color: var(--kh-welle); font-size: 14.5px; margin: 0; }

.kh-trustnums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: center; }
.kh-tn { background: #fff; border-radius: 14px; padding: 26px; box-shadow: 0 1px 5px rgba(11, 37, 69, .08); }
.kh-tn-big { font-family: var(--kh-font-head); font-size: 32px; font-weight: 800; color: var(--kh-hafenblau); }
.kh-tn-lbl { color: var(--kh-text); opacity: .7; font-size: 14px; }

.kh-faq-banner {
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;
}
.kh-faq-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.kh-start details {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(11, 37, 69, .06);
}
.kh-start summary { font-weight: 600; cursor: pointer; color: var(--kh-hafenblau); font-family: var(--kh-font-head); }
.kh-start details p { margin-top: 10px; color: var(--kh-text); opacity: .75; font-size: 15px; }

@media (max-width: 860px) {
  .kh-hero-inner,
  .kh-grid4,
  .kh-usps-grid,
  .kh-grid3,
  .kh-trustnums { grid-template-columns: 1fr 1fr; }
  .kh-hero-inner { grid-template-columns: 1fr; }
  .kh-hero h1 { font-size: 32px; }
}

@media (max-width: 500px) {
  .kh-grid4, .kh-usps-grid, .kh-grid3, .kh-trustnums { grid-template-columns: 1fr; }
  .kh-wrap { padding: 0 16px; }
}

/* ==========================================================================
   Produktseite (Aufgabe 009) – UVP, Live-Bestand, Zahlarten, Tabs
   Buy-Box-Layout: die Summary-Spalte wird zur eigenständigen Kaufkarte
   (Preis groß, Menge+Warenkorb in einer Zeile, Trust-Checkliste, sticky).
   Kein Countdown/Besucherzähler – bewusst nicht laut SHOP-KONZEPT.md.
   ========================================================================== */

.single-product div.product .summary {
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 2px 18px rgba(11, 37, 69, .1);
  align-self: start;
}
@media (min-width: 768px) {
  .single-product div.product .summary {
    position: sticky;
    top: 24px;
  }
}

.single-product div.product .summary .product_title { margin-top: 0; }

.single-product div.product p.price {
  font-size: 34px;
  font-weight: 800;
  color: var(--kh-hafenblau);
  margin: 4px 0 2px;
}

/* Menge + Warenkorb-Button in einer Zeile (statt untereinander). */
.single-product div.product form.cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 0;
}
.single-product div.product form.cart .quantity { margin-right: 0; }
.single-product div.product form.cart .quantity .qty {
  height: 48px;
  width: 64px;
  border: 1px solid #D7E1EA;
  border-radius: 10px;
  text-align: center;
}
.single-product div.product .single_add_to_cart_button {
  flex: 1;
  min-width: 160px;
  height: 48px;
  font-size: 16px;
  border-radius: 10px;
}

.kh-uvp { margin: 4px 0 8px; font-size: 15px; }
.kh-uvp-old {
  color: var(--kh-text);
  opacity: .6;
  text-decoration: line-through;
  margin-right: 8px;
}
.kh-uvp-save {
  color: var(--kh-gruen);
  font-weight: 700;
  font-family: var(--kh-font-head);
}

.kh-stock { font-size: 14px; font-weight: 600; margin: 4px 0 12px; }
.kh-stock--available { color: var(--kh-gruen); }
.kh-stock--empty { color: var(--kh-text); opacity: .7; }
.kh-stock--empty a { color: var(--kh-ozean); }

.kh-payment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #E3EAF1;
  font-size: 13.5px;
  color: var(--kh-text);
  opacity: .85;
}
.kh-payment-icons { display: inline-flex; gap: 6px; }
.kh-payment-icons svg { vertical-align: middle; }

.kh-trust-checklist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kh-trust-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--kh-text);
}
.kh-trust-checklist svg { flex-shrink: 0; }

.kh-activation-guide ol {
  margin: 0;
  padding-left: 22px;
}
.kh-activation-guide li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.kh-sysreq-table {
  width: 100%;
  border-collapse: collapse;
}
.kh-sysreq-table th,
.kh-sysreq-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #E3EAF1;
}
.kh-sysreq-table th {
  color: var(--kh-hafenblau);
  font-family: var(--kh-font-head);
  font-weight: 600;
  width: 40%;
}

@media (max-width: 500px) {
  .kh-sysreq-table th, .kh-sysreq-table td { padding: 8px 10px; font-size: 14px; }
}

/* ==========================================================================
   Aufgabe 010 – Live-Lieferstatus, Key-Vault, Magic-Link-Seite
   ========================================================================== */

.kh-status {
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 2px 18px rgba(11, 37, 69, .1);
  margin: 24px 0 40px;
}
.kh-status-title {
  color: var(--kh-hafenblau);
  margin: 0 0 20px;
  font-size: 22px;
}
.kh-status-stations {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.kh-station {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--kh-gischt);
  color: var(--kh-text);
  opacity: .55;
  font-size: 13.5px;
  font-weight: 600;
}
.kh-station-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kh-welle);
  margin: 0 auto 8px;
}
.kh-station--active {
  opacity: 1;
  background: rgba(27, 108, 168, .1);
}
.kh-station--active .kh-station-dot { background: var(--kh-ozean); }
.kh-station--done {
  opacity: 1;
}
.kh-station--done .kh-station-dot { background: var(--kh-gruen); }

.kh-status-msg { color: var(--kh-text); opacity: .8; margin: 0; }
.kh-status-product { margin: 16px 0 6px; color: var(--kh-hafenblau); font-family: var(--kh-font-head); }

.kh-key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.kh-key-value {
  flex: 1;
  background: var(--kh-gischt);
  border: 1px solid var(--kh-welle);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: monospace;
  word-break: break-all;
}
.kh-key-copy {
  flex-shrink: 0;
  background: var(--kh-ozean);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  font-family: var(--kh-font-head);
  font-size: 13.5px;
  cursor: pointer;
}
.kh-key-copy:hover { background: var(--kh-hafenblau); }

.kh-status--delivered .kh-status-title::after { content: " 🎉"; }

/* Key-Vault im Kundenkonto */
.kh-vault-order {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 5px rgba(11, 37, 69, .08);
}
.kh-vault-order-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  border-bottom: 1px solid #E3EAF1;
  padding-bottom: 10px;
}
.kh-vault-order-head h3 { margin: 0; color: var(--kh-hafenblau); font-size: 17px; }
.kh-vault-date { color: var(--kh-text); opacity: .65; font-size: 13.5px; }
.kh-vault-invoice { margin-left: auto; font-size: 13.5px; font-weight: 600; }
.kh-vault-product { margin-bottom: 14px; }
.kh-vault-product-name { margin: 0 0 6px; font-size: 14.5px; }

/* Magic-Link-Abrufseite (/key-abruf/) */
.kh-guestlink-wrap { padding: 48px 0; }
.kh-guestlink-wrap h1 { color: var(--kh-hafenblau); margin-bottom: 16px; }

/* ==========================================================================
   Mega-Menü "Shop" – Hover-Panel mit Kategorie-Spalten + Promo-Karte
   ========================================================================== */

.main-navigation { position: relative; }

/* Das Shop-<li> selbst ist der Hover-Auslöser UND der Positionierungs-
   Anker für das Panel – Panel liegt strukturell als Kind darin. */
.main-navigation ul.menu li.kh-megamenu-item {
  position: relative;
}

.kh-megamenu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 500;
  background: #fff;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 30px rgba(11, 37, 69, .18);
  padding: 28px 24px;
  gap: 28px;
  /* Breite an der Hauptnavigation ausrichten statt an der schmalen <li>-Breite. */
  width: max(760px, 90vw);
  max-width: 900px;
}

/* Panel öffnet sich bei Hover ODER Tastatur-Fokus auf das Shop-<li>,
   und bleibt offen solange die Maus über dem Panel selbst steht –
   direkte Eltern-Kind-Beziehung, kein :has()-Fallstrick mit Lücken
   zwischen Trigger und Panel. */
.kh-megamenu-item:hover .kh-megamenu-panel,
.kh-megamenu-item:focus-within .kh-megamenu-panel,
.kh-megamenu-panel:hover {
  display: flex;
}

.kh-megamenu-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  flex: 1;
}

.kh-megamenu-panel .kh-megamenu-col-title {
  /* Storefront setzt ".main-navigation a { padding: 0 1em 2.29em }" für die
     Dropdown-Pfeil-Klickfläche im normalen Menü – das trifft auch unsere
     Mega-Menü-Links und drückt sie optisch nach unten weg. Zurücksetzen.
     Selektor bewusst mit Elternklasse verschärft, damit unsere Farbe/Optik
     zuverlässig vor Storefronts generischen Menü-Link-Regeln gewinnt. */
  padding: 0 !important;
  display: block !important;
  font-family: var(--kh-font-head);
  font-weight: 700 !important;
  color: var(--kh-hafenblau) !important;
  text-decoration: none !important;
  margin-bottom: 10px;
  font-size: 15px;
}
.kh-megamenu-panel .kh-megamenu-col-title:hover { color: var(--kh-ozean) !important; }

/*
 * Storefront hat für verschachtelte Dropdown-Untermenüs die Regel
 * ".main-navigation ul ul { position:absolute; left:-9999px; float:left; }".
 * Unsere Kategorie-Listen liegen als <ul> innerhalb des Hauptmenüs
 * (li.kh-megamenu-item > .kh-megamenu-panel > ... > ul) und wurden dadurch
 * ungewollt off-screen geschoben – nur der Spalten-Titel (ein <a>, kein
 * Listenelement) blieb sichtbar. Mit !important zurücksetzen, da Storefronts
 * Regel dieselbe Spezifität hat und in der Stylesheet-Reihenfolge nach uns
 * geladen werden kann.
 */
.kh-megamenu-col ul {
  position: static !important;
  left: auto !important;
  float: none !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.kh-megamenu-col li {
  display: block !important;
  margin-bottom: 6px;
}
.kh-megamenu-col a {
  position: static !important;
  width: auto !important;
  padding: 0 !important;
  color: var(--kh-text);
  text-decoration: none;
  font-size: 14px;
  display: inline;
}
.kh-megamenu-col a:hover { color: var(--kh-ozean); text-decoration: underline; }
.kh-megamenu-empty {
  color: var(--kh-text);
  opacity: .55;
  font-size: 13.5px;
  font-style: italic;
}

.kh-megamenu-promo {
  flex-shrink: 0;
  width: 200px;
  background: var(--kh-gischt);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.kh-megamenu-promo:hover { background: #ECF1F6; }
.kh-megamenu-promo-label {
  align-self: flex-start;
  background: var(--kh-orange);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  font-family: var(--kh-font-head);
}
.kh-megamenu-promo-art { margin: 4px 0; }
.kh-megamenu-promo-art img { max-height: 70px; width: auto; border-radius: 6px; }
.kh-megamenu-promo-name {
  font-family: var(--kh-font-head);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--kh-hafenblau);
}
.kh-megamenu-promo-price { font-weight: 800; color: var(--kh-orange); font-size: 15px; }

@media (max-width: 860px) {
  .kh-megamenu-panel { position: static; display: none !important; }
}

/* ==========================================================================
   Hersteller-Portfolio ([kh_brand_portfolio])
   ========================================================================== */

.kh-brands-empty { color: var(--kh-text); opacity: .7; }

.kh-brands-az {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E3EAF1;
}
.kh-brands-az a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--kh-gischt);
  color: var(--kh-hafenblau);
  font-family: var(--kh-font-head);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.kh-brands-az a:hover { background: var(--kh-ozean); color: #fff; }

.kh-brands-group { margin-bottom: 36px; scroll-margin-top: 90px; }
.kh-brands-group-letter {
  color: var(--kh-hafenblau);
  font-size: 20px;
  margin-bottom: 14px;
}
.kh-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.kh-brand-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 16px;
  box-shadow: 0 1px 5px rgba(11, 37, 69, .08);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.kh-brand-card:hover { box-shadow: 0 4px 14px rgba(11, 37, 69, .14); }
.kh-brand-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.kh-brand-card-logo img { max-height: 48px; max-width: 100%; }
.kh-brand-card-logo-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kh-gischt);
  color: var(--kh-ozean);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kh-font-head);
  font-weight: 700;
  font-size: 20px;
}
.kh-brand-card-name {
  font-family: var(--kh-font-head);
  font-weight: 600;
  color: var(--kh-hafenblau);
  font-size: 14.5px;
}
.kh-brand-card-count { color: var(--kh-text); opacity: .6; font-size: 12.5px; }