/* =============================================================================
   gkd-seo.css  -  Bausteine der SEO-/Inhaltsseiten von Gummiketten-Discount.de
   =============================================================================
   Geladen NACH theme-gkd.css (includes/head.php, nur gkd). Nutzt dieselben
   Tokens wie das Design-System (tools/design.css): flach, neutrale Grauflaechen,
   Grau-Violett nur fuer Bedienbares. Keine Verlaeufe, keine Schatten-Effekte.
   Eigene Datei statt design.css, weil hier Inhaltstypografie lebt, die mit der
   Farbrotation von build-theme.php nichts zu tun hat.
   ============================================================================= */

.gkd-page { max-width: 1140px; margin: 0 auto; padding: 28px 16px 56px; }
.gkd-page--narrow { max-width: 820px; }

/* ---------- Breadcrumb ---------- */
.gkd-crumbs { font-size: .86rem; color: var(--gkd-muted, #6B6B6B); margin: 0 0 18px; }
.gkd-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.gkd-crumbs li { display: inline-flex; align-items: center; }
.gkd-crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--gkd-line-strong, #C4C4C4); }
/* !important: das Theme faerbt Links in Kopf-/Produktbereichen hell ein */
.gkd-crumbs a, .gkd-crumbs a:visited { color: var(--gkd-violet, #4A3E6A) !important; text-decoration: none; }
.gkd-crumbs a:hover { text-decoration: underline; }
.gkd-crumbs [aria-current] { color: var(--gkd-ink-2, #333); }
#product .gkd-crumbs, .gkd-catcrumbs .gkd-crumbs { margin-bottom: 10px; }

/* ---------- Kopf von Inhaltsseiten ---------- */
.gkd-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 12px; }
.gkd-lead { font-size: 1.12rem; line-height: 1.6; color: var(--gkd-ink-2, #333); max-width: 760px; margin: 0 0 8px; }

/* ---------- Byline / Autor ---------- */
.gkd-byline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .86rem; color: var(--gkd-muted, #6B6B6B); margin: 0 0 26px; }
.gkd-byline a { color: var(--gkd-violet, #4A3E6A); }

/* ---------- Artikel-Typografie ---------- */
.gkd-article { font-size: 1.02rem; line-height: 1.7; color: var(--gkd-ink-2, #333); }
.gkd-article h2 { font-size: 1.45rem; line-height: 1.25; margin: 2.2em 0 .6em; letter-spacing: -.01em; color: var(--gkd-ink, #222); }
.gkd-article h3 { font-size: 1.12rem; margin: 1.6em 0 .4em; color: var(--gkd-ink, #222); }
.gkd-article p, .gkd-article ul, .gkd-article ol { margin: 0 0 1em; }
.gkd-article li { margin-bottom: .35em; }
.gkd-article a { color: var(--gkd-violet, #4A3E6A); text-decoration: underline; text-underline-offset: 2px; }
.gkd-article strong { color: var(--gkd-ink, #222); }

.gkd-toc { background: #fff; border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r-lg, 8px); padding: 16px 20px; margin: 0 0 28px; }
.gkd-toc strong { display: block; margin-bottom: 6px; font-size: .92rem; }
.gkd-toc ol { margin: 0; padding-left: 20px; font-size: .95rem; }
/* !important: Breadcrumb und TOC sind <nav> - das Theme faerbt "nav a" fuer die dunkle Leiste hell */
.gkd-toc a, .gkd-toc a:visited { color: var(--gkd-violet, #4A3E6A) !important; text-decoration: none; }
.gkd-toc a:hover { text-decoration: underline; }

/* Kurzantwort, Hinweis, Warnung */
.gkd-box { border-radius: var(--gkd-r-lg, 8px); padding: 16px 20px; margin: 0 0 1.4em; border: 1px solid var(--gkd-line, #DADADA); background: #fff; }
.gkd-box > :last-child { margin-bottom: 0; }
.gkd-box__t { display: block; font-weight: 700; color: var(--gkd-ink, #222); margin-bottom: 6px; }
.gkd-box--answer { border-left: 4px solid var(--gkd-violet, #4A3E6A); }
.gkd-box--warn { border-left: 4px solid #B3261E; background: #FDF6F5; }
.gkd-box--tip { background: var(--gkd-violet-50, #F3F2F6); border-color: var(--gkd-violet-100, #E2DFEA); }

/* Schritte (Anleitungen) */
.gkd-steps { list-style: none; counter-reset: gkdstep; padding: 0; margin: 0 0 1.4em; }
.gkd-steps > li { counter-increment: gkdstep; position: relative; padding: 0 0 0 52px; margin: 0 0 22px; }
.gkd-steps > li::before {
    content: counter(gkdstep); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
    background: var(--gkd-ink-2, #333); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.gkd-steps h3 { margin-top: 4px; }

/* ---------- Tabellen ---------- */
.gkd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4em; border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r-lg, 8px); background: #fff; }
.gkd-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gkd-table th, .gkd-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--gkd-line, #DADADA); vertical-align: top; }
.gkd-table thead th { background: var(--gkd-bg, #F2F2F2); font-weight: 700; color: var(--gkd-ink, #222); white-space: nowrap; }
.gkd-table tbody tr:last-child td, .gkd-table tbody tr:last-child th { border-bottom: 0; }
.gkd-table tbody tr:hover { background: var(--gkd-violet-50, #F3F2F6); }
.gkd-table a { color: var(--gkd-violet, #4A3E6A); font-weight: 600; text-decoration: none; }
.gkd-table a:hover { text-decoration: underline; }
.gkd-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gkd-table .muted { color: var(--gkd-muted, #6B6B6B); }

/* Technische Daten auf der Produktseite */
.gkd-specs { margin-top: 24px; }
.gkd-specs h2, .gkd-fit h2 { font-size: 1.25rem; margin: 0 0 12px; }
.gkd-specs th { width: 42%; font-weight: 600; color: var(--gkd-muted, #6B6B6B); background: transparent; }

/* ---------- "Passt zu" (Produktseite) ---------- */
.gkd-fit { background: #fff; border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r-lg, 8px); padding: 22px; margin: 28px 0; }
.gkd-fit__intro { color: var(--gkd-muted, #6B6B6B); margin: 0 0 14px; }
.gkd-fit__group { margin: 0 0 12px; }
.gkd-fit__group h3 { font-size: 1rem; margin: 0 0 4px; }
.gkd-fit__group h3 a { color: var(--gkd-violet, #4A3E6A); text-decoration: none; }
.gkd-fit__models { margin: 0; color: var(--gkd-ink-2, #333); font-size: .95rem; line-height: 1.6; }
.gkd-fit details summary { cursor: pointer; color: var(--gkd-violet, #4A3E6A); font-weight: 600; margin: 8px 0; }
.gkd-pairlink { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 600; color: var(--gkd-violet, #4A3E6A); }

/* ---------- Link-Raster (Hersteller, Groessen) ---------- */
.gkd-linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 1.6em; padding: 0; list-style: none; }
.gkd-linkgrid a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px; height: 100%;
    background: #fff; border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r, 6px);
    padding: 11px 14px; color: var(--gkd-ink, #222); font-weight: 600; text-decoration: none;
    transition: border-color var(--gkd-t, 170ms), background var(--gkd-t, 170ms);
}
.gkd-linkgrid a:hover { border-color: var(--gkd-violet, #4A3E6A); background: var(--gkd-violet-50, #F3F2F6); }
.gkd-linkgrid small { color: var(--gkd-muted, #6B6B6B); font-weight: 400; font-size: .8rem; white-space: nowrap; }

.gkd-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.gkd-az a { display: inline-block; min-width: 34px; text-align: center; padding: 5px 8px; border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r-sm, 4px); background: #fff; color: var(--gkd-violet, #4A3E6A); font-weight: 700; text-decoration: none; }
.gkd-az a:hover { background: var(--gkd-violet-50, #F3F2F6); }

/* ---------- Karten (Ratgeber-Teaser) ---------- */
.gkd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 1.6em; }
.gkd-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r-lg, 8px); padding: 20px; color: var(--gkd-ink-2, #333); text-decoration: none; transition: border-color var(--gkd-t, 170ms); }
.gkd-card:hover { border-color: var(--gkd-violet, #4A3E6A); color: var(--gkd-ink-2, #333); }
.gkd-card h2, .gkd-card h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 8px; color: var(--gkd-ink, #222); }
.gkd-card p { font-size: .93rem; margin: 0 0 12px; line-height: 1.5; }
.gkd-card span { margin-top: auto; color: var(--gkd-violet, #4A3E6A); font-weight: 700; font-size: .9rem; }

/* ---------- FAQ ---------- */
.gkd-faq { margin: 40px 0; }
.gkd-faq__title { font-size: 1.5rem; margin: 0 0 16px; }
.gkd-faq__item { background: #fff; border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r-lg, 8px); margin: 0 0 10px; }
.gkd-faq__item summary { list-style: none; cursor: pointer; padding: 15px 48px 15px 18px; position: relative; }
.gkd-faq__item summary::-webkit-details-marker { display: none; }
.gkd-faq__item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--gkd-violet, #4A3E6A); }
.gkd-faq__item[open] summary::after { content: "–"; }
.gkd-faq__item summary h3 { display: inline; font-size: 1.02rem; margin: 0; font-weight: 700; color: var(--gkd-ink, #222); }
.gkd-faq__a { padding: 0 18px 14px; color: var(--gkd-ink-2, #333); line-height: 1.65; }
.gkd-faq__a p:last-child { margin-bottom: 0; }
.gkd-faq__a a { color: var(--gkd-violet, #4A3E6A); }

/* ---------- Experten-/Firmenbox ---------- */
.gkd-expert { background: var(--gkd-bg, #F2F2F2); border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r-lg, 8px); padding: 20px 22px; margin: 40px 0 0; font-size: .95rem; line-height: 1.6; }
.gkd-expert h2 { font-size: 1.1rem; margin: 0 0 8px; }
.gkd-expert p:last-child { margin-bottom: 0; }
.gkd-expert a { color: var(--gkd-violet, #4A3E6A); }

/* ---------- CTA ---------- */
.gkd-cta { margin: 40px 0 0; }
.gkd-cta h2 { font-size: 1.35rem; margin: 0 0 14px; }
.gkd-cta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.gkd-cta__item { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--gkd-line, #DADADA); border-radius: var(--gkd-r-lg, 8px); padding: 16px 18px; text-decoration: none; color: var(--gkd-ink-2, #333); transition: border-color var(--gkd-t, 170ms); }
.gkd-cta__item strong { color: var(--gkd-violet, #4A3E6A); font-size: 1.02rem; }
.gkd-cta__item span { font-size: .88rem; color: var(--gkd-muted, #6B6B6B); }
.gkd-cta__item:hover { border-color: var(--gkd-violet, #4A3E6A); }

/* ---------- SEO-Textblock (Startseite / Kategorie) ---------- */
.gkd-seo-text { max-width: 860px; font-size: 1rem; line-height: 1.7; color: var(--gkd-ink-2, #333); }
.gkd-seo-text h2 { font-size: 1.45rem; margin: 0 0 .6em; }
.gkd-seo-text h3 { font-size: 1.1rem; margin: 1.5em 0 .4em; }
.gkd-seo-text a { color: var(--gkd-violet, #4A3E6A); }
.gkd-cat-intro { max-width: 860px; color: var(--gkd-ink-2, #333); font-size: 1.04rem; line-height: 1.6; margin: -8px 0 4px; }
.gkd-cat-intro a { color: var(--gkd-violet, #4A3E6A); }

/* Hersteller-Seite: Schnellfilter ueber der Modelltabelle */
.gkd-filter { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; }
.gkd-filter input {
    height: 46px; min-width: 260px; flex: 1 1 260px; max-width: 420px; padding: 0 14px;
    border: 1px solid var(--gkd-line-strong, #C4C4C4); border-radius: var(--gkd-r, 6px); font-size: 1rem; background: #fff;
}
.gkd-filter input:focus { outline: 2px solid var(--gkd-violet, #4A3E6A); outline-offset: 1px; }
.gkd-filter small { color: var(--gkd-muted, #6B6B6B); }

/* Kennzahlen-Zeile */
.gkd-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 24px; padding: 0; list-style: none; color: var(--gkd-ink-2, #333); font-size: .95rem; }
.gkd-facts strong { color: var(--gkd-ink, #222); }

@media (max-width: 767px) {
    .gkd-page { padding: 18px 16px 40px; }
    .gkd-table th, .gkd-table td { padding: 9px 10px; }
    .gkd-steps > li { padding-left: 46px; }
    .gkd-filter input { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gkd-linkgrid a, .gkd-card, .gkd-cta__item { transition: none; }
}