/* growboxen.eu - Markenseite /marke/<slug>/ (Port der mk-*-Regeln aus design/v13/assets/marken.css).
   Baut auf v13.css + site.css auf; nur deren Farben und Variablen.
   Hinweis: wird vor v13.css/site.css geladen (Slot „head“) → bei gleichen Selektoren gewinnt v13; deshalb hier spezifischer. */

/* ---------- Bühne ---------- */
.mk-hero { position: relative; background: var(--slate); color: #fff; overflow: hidden; isolation: isolate; padding: 28px 0 0; }
.mk-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(img/v12-laub.webp) center / cover; opacity: .28; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
.mk-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; background: linear-gradient(transparent, rgba(17, 26, 31, .9)); }
.mk-word { position: absolute; z-index: -1; left: -.04em; bottom: -.2em; font-size: clamp(7rem, 22vw, 24rem); font-weight: 800; letter-spacing: -.07em; line-height: .8; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(195, 234, 91, .16); pointer-events: none; user-select: none; }
.mk-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .84rem; font-weight: 650; color: rgba(255, 255, 255, .55); margin-bottom: clamp(32px, 5vw, 64px); }
.mk-crumb a { display: inline-flex; align-items: center; min-height: 24px; }
.mk-crumb a:hover { color: #fff; }
.mk-crumb span[aria-current] { color: rgba(255, 255, 255, .9); }
.mk-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.mk-stage.no-col { grid-template-columns: minmax(0, 1fr); }
.mk-copy { padding-bottom: clamp(48px, 6vw, 88px); }
.mk-brand { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-weight: 800; font-size: .95rem; margin-bottom: 22px; }
.mk-brand b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--slate); font-size: .8rem; }
.mk-hero h1 { font-size: clamp(2.6rem, 5.4vw, 5.6rem); letter-spacing: -.055em; line-height: .95; max-width: 11em; overflow-wrap: break-word; hyphens: auto; }
.mk-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-hero .lead { color: rgba(255, 255, 255, .7); margin-top: 22px; max-width: 36em; }
.mk-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.mk-stat { padding: 12px 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mk-stat small { display: block; font-size: .74rem; font-weight: 650; color: rgba(255, 255, 255, .55); }
.mk-stat b { font-size: 1.2rem; letter-spacing: -.03em; white-space: nowrap; }
.mk-stat b.l { color: var(--lime); }
.mk-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.mk-cats a { min-height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; background: #fff; color: var(--ink); transition: transform .25s var(--ease); }
.mk-cats a:hover { transform: translateY(-2px); }
.mk-cats a span { color: var(--ink-3); font-weight: 650; }

/* Collage: bis zu drei Produktfotos, die aus der Bühne herausragen */
.mk-col { position: relative; height: clamp(320px, 34vw, 500px); margin-bottom: -60px; }
.mk-col figure { position: absolute; margin: 0; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .7), 0 0 0 6px rgba(195, 234, 91, .07); }
.mk-col img { width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; display: block; }
.mk-col .f1 { width: 62%; aspect-ratio: 1; right: 4%; bottom: 60px; z-index: 2; }
.mk-col .f2 { width: 40%; aspect-ratio: 1; left: 0; bottom: 140px; transform: rotate(-4deg); }
.mk-col .f3 { width: 34%; aspect-ratio: 1; right: 52%; bottom: 0; z-index: 3; transform: rotate(3deg); }
.mk-col .tag { position: absolute; z-index: 4; right: 0; top: 4%; display: flex; flex-direction: column; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); font-size: .78rem; font-weight: 650; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5); }
.mk-col .tag b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }

/* ---------- Sprungleiste ---------- */
.mk-jump { position: sticky; top: 76px; z-index: 30; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.mk-jump .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.mk-jump .wrap::-webkit-scrollbar { display: none; }
.mk-jump a { flex: none; height: 38px; padding: 0 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 700; color: var(--ink-2); transition: background-color .2s, color .2s; }
.mk-jump a:hover { background: var(--ice); color: var(--ink); }
.mk-jump a.cur { background: var(--slate); color: #fff; }
.mk-jump a small { font-weight: 650; opacity: .6; }

/* ---------- Abschnitt je Marke + Keyword ---------- */
.mk-sec { padding: clamp(64px, 8vw, 112px) 0 0; scroll-margin-top: 130px; }
.mk-jump + .mk-sec { padding-top: 110px; }
.mk-last { padding-bottom: clamp(80px, 10vw, 140px); }
.mk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 28px; }
.mk-head h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); overflow-wrap: break-word; hyphens: auto; }
.mk-head p { margin-top: 12px; color: var(--ink-2); font-size: 1.05rem; }
.mk-head .more { font-weight: 750; font-size: .92rem; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; min-height: 32px; }
.mk-head .more:hover { color: var(--chl-2); }

/* Facetten: Grundriss-Quadrate (Größe) oder Werte-Chips (Watt, Ø) */
.mk-facet { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; align-items: flex-end; }
.mk-facet button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-width: 76px; padding: 12px 12px 10px; border-radius: 18px; background: var(--ice); font-size: .8rem; font-weight: 750; color: var(--ink-2); transition: background-color .2s, color .2s, box-shadow .2s; }
.mk-facet button i { display: block; border-radius: 4px; border: 2px solid currentColor; background: rgba(47, 168, 79, .1); }
.mk-facet button i.all { width: 22px; height: 22px; border-style: dashed; }
.mk-facet button small { font-weight: 650; color: var(--ink-3); font-size: .72rem; margin-top: -6px; }
.mk-facet button:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ice-3); }
.mk-facet button[aria-pressed="true"] { background: var(--slate); color: #fff; }
.mk-facet button[aria-pressed="true"] i { border-color: var(--lime); background: rgba(195, 234, 91, .18); }
.mk-facet button[aria-pressed="true"] small { color: rgba(255, 255, 255, .6); }
.mk-facet.chips button { min-width: 0; flex-direction: row; height: 42px; padding: 0 16px; border-radius: 999px; }
.mk-facet.chips button small { margin: 0; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.mk-grid .dcard { flex: none; min-width: 0; }
.mk-grid > .dcard.mk-off { display: none; }
.mk-grid .dcard:hover .dcard-facts, .mk-grid .dcard:hover .dcard-row { opacity: 1; }
.mk-grid .dcard-hd h3 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.02rem; }
.mk-grid .dcard.tall .dcard-side { min-height: 0; }
.mk-grid .dcard-hint { display: inline-flex; }
.mk-show { margin-top: 22px; }

/* ---------- Vergleichstabelle (scrollt in sich) ---------- */
.mk-cmp { margin-top: 22px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line); overflow: auto; max-height: 720px; }
.mk-cmp.mk-off { display: none; }
.mk-cmp table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.mk-cmp thead th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: .76rem; font-weight: 750; color: var(--ink-3); padding: 14px 18px; background: var(--ice); white-space: nowrap; }
.mk-cmp th button { font-weight: 750; display: inline-flex; gap: 4px; align-items: center; min-height: 28px; color: inherit; }
.mk-cmp th button:hover { color: var(--ink); }
.mk-cmp th[aria-sort="descending"] button::after { content: "↓"; }
.mk-cmp th[aria-sort="ascending"] button::after { content: "↑"; }
.mk-cmp td, .mk-cmp tbody th { padding: 13px 18px; border-top: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: left; }
.mk-cmp tbody th { white-space: normal; font-weight: 700; min-width: 220px; }
.mk-cmp tbody th a { display: flex; align-items: center; gap: 12px; }
.mk-cmp tbody th a:hover span { text-decoration: underline; }
.mk-cmp tbody th img, .mk-cmp tbody th .img-none { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.mk-cmp tr:hover td, .mk-cmp tr:hover tbody th { background: #F8FBFC; }
.mk-cmp td.p { font-weight: 800; }
.mk-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-tabs button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: .86rem; box-shadow: inset 0 0 0 1.5px var(--ice-3); }
.mk-tabs button span { opacity: .55; }
.mk-tabs button[aria-pressed="true"] { background: var(--slate); color: #fff; box-shadow: none; }

/* ---------- Über die Marke + Häufig gesucht ---------- */
.mk-faqwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); }
.mk-faqwrap.solo { grid-template-columns: minmax(0, 1fr); }
.mk-faqwrap h3 { margin-bottom: 4px; }
.mk-faqwrap.solo h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); }
.mk-sought { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mk-sought a { min-height: 38px; padding: 0 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 650; background: var(--ice); color: var(--ink-2); }
.mk-sought a:hover { background: var(--ice-2); color: var(--ink); }
.mk-sought a .ico { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.mk-slot { padding: 28px; border-radius: 24px; border: 2px dashed var(--ice-3); }
.mk-slot small { display: inline-block; font-weight: 750; font-size: .74rem; color: var(--chl-2); background: #EAF7DA; border-radius: 999px; padding: 4px 10px; margin-bottom: 14px; }
.mk-slot h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 12px; }
.mk-slot p { color: var(--ink-2); }

/* ---------- Weitere Marken ---------- */
.mk-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.mk-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 22px; background: var(--ice); transition: background-color .25s, transform .3s var(--ease); min-height: 132px; overflow: hidden; }
.mk-tile:hover { background: var(--ice-2); transform: translateY(-3px); }
.mk-tile b { font-size: 1.35rem; letter-spacing: -.035em; font-weight: 800; position: relative; z-index: 1; max-width: calc(100% - 70px); overflow-wrap: break-word; }
.mk-tile small { color: var(--ink-2); font-weight: 600; font-size: .84rem; position: relative; z-index: 1; }
.mk-tile img { position: absolute; right: -10px; bottom: -10px; width: 92px; height: 92px; object-fit: contain; mix-blend-mode: multiply; opacity: .9; }
.mk-tile .img-none { position: absolute; right: 12px; bottom: 12px; width: 60px; height: 60px; border-radius: 14px; background: #fff; }

/* Ohne JS: alles zeigen, Bedienelemente ausblenden */
html:not(.js) .mk-grid > .dcard.mk-off { display: flex; }
html:not(.js) .mk-cmp.mk-off { display: block; }
html:not(.js) .mk-show, html:not(.js) .mk-head .more[data-all], html:not(.js) .mk-facet, html:not(.js) .mk-tabs { display: none; }

@media (max-width: 860px) {
  .mk-stage { grid-template-columns: 1fr; }
  .mk-copy { padding-bottom: 0; }
  .mk-col { height: 300px; margin-bottom: -40px; }
  .mk-faqwrap { grid-template-columns: 1fr; }
  .mk-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mk-col .f2 { display: none; }
  .mk-col .f1 { width: 70%; }
  .mk-col .f3 { width: 42%; right: auto; left: 0; }
  .mk-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mk-grid .dcard.tall { padding: 6px; border-radius: 22px; }
  .mk-grid .dcard.tall .dcard-side { padding: 10px 6px 4px; gap: 8px; }
  .mk-grid .dcard-hd h3 { font-size: .9rem; }
  .mk-grid .dcard.tall .dcard-facts { padding: 0 8px; }
  .mk-grid .dcard.tall .dcard-facts span:nth-child(n+2) { display: none; }
  .mk-grid .dcard.tall .dcard-row strong { font-size: 1.05rem; }
  .mk-grid .dcard-go .t { display: none; }
  .mk-grid .dcard.tall .dcard-go { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .mk-grid .dcard-hint { display: none; }
  /* Facette einzeilig, wischt seitlich (wie die Größen-Links der Kategorieseite) */
  .mk-facet { gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding: 0 var(--gut) 4px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .mk-facet::-webkit-scrollbar, .mk-tabs::-webkit-scrollbar { display: none; }
  .mk-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding: 0 var(--gut) 4px; }
  .mk-tabs button { flex: none; }
  .mk-facet button { flex: none; min-width: 64px; }
  .mk-grid .dcard.tall .dcard-facts span { flex-direction: column; align-items: flex-start; gap: 2px; }
  .mk-grid .dcard.tall .dcard-facts b { white-space: normal; }
  .mk-grid .dcard.tall .dcard-row { gap: 6px; }
  .mk-grid .dcard-price { flex-wrap: wrap; gap: 0 5px; }
  .mk-grid .dcard-price s { font-size: .72rem; }
  .mk-cmp { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .mk-cats a, .mk-tile { transition: none; } }
@media (min-width: 561px) { .mk-lead span { white-space: nowrap; } }
/* Vergleich: Modellspalte bleibt beim seitlichen Scrollen stehen */
.mk-cmp tbody th { position: sticky; left: 0; z-index: 1; background: var(--white); }
.mk-cmp thead th:first-child { left: 0; z-index: 2; }
@media (max-width: 560px) { .mk-cmp tbody th { min-width: 150px; max-width: 170px; padding-right: 10px; box-shadow: 1px 0 0 var(--line); } .mk-cmp tbody th img, .mk-cmp tbody th .img-none { display: none; } }

/* Bilder füllen den Bildbereich ganz, ohne Rand (Nutzerwunsch, auch Freisteller) */
.mk-sec .dcard-ph.cut { background: #fff; }
.mk-sec .dcard-ph.cut img { object-fit: cover; padding: 0; filter: none; mix-blend-mode: normal; }
.mk-col img { object-fit: cover; padding: 0; }
.mk-cmp tbody th img { object-fit: cover; }

/* Collage einspaltig (Tablet/Handy): Bildgröße richtet sich nach der Höhe der Collage, nicht nach der Breite,
   sonst ragen die Bilder bei 768 nach oben über die Kennzahlen */
@media (max-width: 860px) {
  .mk-col { height: 380px; }
  .mk-col .f1 { width: auto; height: calc(100% - 60px); }
  .mk-col .f2 { width: auto; height: calc(100% - 180px); }
}
@media (max-width: 560px) {
  .mk-col { height: 300px; }
  .mk-col .f1 { width: auto; }
}