/* einbrennkompass.de — eigene Gestaltung nach dem Stitch-Entwurf (Projekt 3997975635305613921, 2026-10-17).
   Werkstatt/Schmiede: Anthrazit-Bänder für Kopf, Hero und Fuß, Papier-Beige für Inhalt, Glut-Kupfer nur für
   Knöpfe und Markierungen. Kantig (2 px Radius), 2-px-Rahmen, harter Versatz-Schatten ohne Unschärfe,
   nummerierte Abschnitte, Etiketten in Monospace.
   Liegt über site.css. Schriften aus dem System (Space Grotesk/Work Sans/Space Mono nur, wenn lokal installiert) —
   keine Schriften von Dritten (LG München I, 3 O 17493/20). */
:root {
    --accent: #c2410c;
    --ink: #1f1d1b;
    --muted: #5a554f;
    --bg: #f4efe7;
    --surface: #fbf8f2;
    --line: #2d2a27;
    --hair: #cfc6b8;
    --iron: #1f1d1b;
    --iron-2: #2d2a27;
    --iron-line: #3e3a35;
    --on-iron: #f4efe7;
    --on-iron-muted: #b9b0a4;
    --ember-light: #f0a27a;
    --soft: #efe3d4;
    --radius: 2px;
    --shadow: 3px 3px 0 var(--line);
    --grotesk: "Space Grotesk", Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --sans: "Work Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
    --serif: var(--grotesk);
    --cta: #c2410c;
    --cta-hover: #9a3412;
    --illu-bg: #ece3d6;
    --illu-body: #e6d9c7;
    --illu-dark: #2d2a27;
    --illu-accent: #c2410c;
}

.theme-einbrennkompass { font-family: var(--sans); }
.theme-einbrennkompass h1,
.theme-einbrennkompass h2,
.theme-einbrennkompass h3 { font-family: var(--grotesk); font-weight: 700; letter-spacing: -.015em; }

/* Kopf: Anthrazit, Wortmarke mit glühendem Quadrat */
.theme-einbrennkompass .site-header { background: var(--iron); border-bottom: 2px solid var(--iron-line); }
.theme-einbrennkompass .brand { color: var(--on-iron); font-family: var(--grotesk); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.theme-einbrennkompass .brand::before { width: .8rem; height: .8rem; border-radius: 0; transform: none; background: var(--accent); box-shadow: 2px 2px 0 var(--iron-line); }
.theme-einbrennkompass .main-nav a { color: var(--on-iron-muted); font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.theme-einbrennkompass .main-nav a:hover,
.theme-einbrennkompass .main-nav a.active { color: var(--ember-light); border-bottom-color: var(--accent); }

/* Hero: dunkles Band über die ganze Breite, ohne zusätzliches Markup */
.theme-einbrennkompass .hero { background: var(--iron); box-shadow: 0 0 0 100vmax var(--iron); clip-path: inset(0 -100vmax); color: var(--on-iron); padding: 3.2rem 0 3.4rem; }
.theme-einbrennkompass .hero .label { display: inline-block; color: var(--ember-light); font-family: var(--mono); font-weight: 700; border: 1.5px solid var(--iron-line); padding: .2rem .55rem; letter-spacing: .08em; }
.theme-einbrennkompass .hero .label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .5rem; vertical-align: .12em; background: var(--accent); }
.theme-einbrennkompass .hero h1 { font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; color: var(--on-iron); }
.theme-einbrennkompass .hero-lead { color: var(--on-iron-muted); }
.theme-einbrennkompass .hero-figure { border: 2px solid var(--iron-line); padding: .45rem; background: var(--iron-2); }
.theme-einbrennkompass .hero-figure img,
.theme-einbrennkompass .hero-video { border: 0; border-radius: 0; }
.theme-einbrennkompass .hero-figure figcaption { color: var(--on-iron-muted); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; padding: .1rem .2rem 0; }
.theme-einbrennkompass .hero .text-link { color: var(--ember-light); }

/* Knöpfe: kantig, Monospace, harter Schatten. Primär Glut-Kupfer, Kontur auf dem dunklen Hero hell. */
.theme-einbrennkompass .button,
.theme-einbrennkompass .cta { font-family: var(--mono); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
    border-radius: var(--radius); border: 2px solid var(--iron); padding: .8rem 1.3rem; background: var(--cta); color: #fff; box-shadow: 3px 3px 0 var(--iron); transform: none; }
.theme-einbrennkompass .button:hover,
.theme-einbrennkompass .cta:hover,
.theme-einbrennkompass .cta:focus-visible { background: var(--cta-hover); filter: none; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--iron); }
.theme-einbrennkompass .hero .button { border-color: var(--accent); box-shadow: 3px 3px 0 #000; }
.theme-einbrennkompass .hero .button-ghost { background: transparent; color: var(--on-iron); border: 2px solid var(--on-iron); box-shadow: none; }
.theme-einbrennkompass .hero .button-ghost:hover { background: var(--on-iron); color: var(--iron); }
.theme-einbrennkompass .button-dark,
.theme-einbrennkompass .pick .button { background: var(--iron); color: var(--on-iron); }
.theme-einbrennkompass .text-link,
.theme-einbrennkompass .path-more,
.theme-einbrennkompass .card-more { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); border-bottom: 2px solid var(--accent); text-decoration: none; }
.theme-einbrennkompass .path-more,
.theme-einbrennkompass .card-more { align-self: flex-start; padding-bottom: .1rem; }

/* Abschnitte: Stahllinie oben, fortlaufende Nummer vor dem Etikett */
.theme-einbrennkompass main { counter-reset: abschnitt; }
.theme-einbrennkompass .section { padding: 3.2rem 0; border-top: 2px solid var(--line); }
.theme-einbrennkompass .hero + .section { border-top: 0; }
.theme-einbrennkompass .section > .label { counter-increment: abschnitt; font-family: var(--mono); color: var(--muted); letter-spacing: .08em; }
.theme-einbrennkompass .section > .label::before { content: counter(abschnitt, decimal-leading-zero); display: inline-block; margin-right: .6rem; padding: .1rem .4rem;
    background: var(--iron); color: var(--on-iron); font-weight: 700; }
.theme-einbrennkompass .section-title { font-size: clamp(1.6rem, 3.2vw, 2.1rem); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 1.6rem; }

/* Karten: Werkstatt-Karteikarten mit 2-px-Rahmen und Versatz-Schatten */
.theme-einbrennkompass .card,
.theme-einbrennkompass .path,
.theme-einbrennkompass .pick,
.theme-einbrennkompass .criterion,
.theme-einbrennkompass .compare-card,
.theme-einbrennkompass .pick-card,
.theme-einbrennkompass .aside-box,
.theme-einbrennkompass .product,
.theme-einbrennkompass .finder,
.theme-einbrennkompass .toc,
.theme-einbrennkompass .trust { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.theme-einbrennkompass .card:hover,
.theme-einbrennkompass .path:hover,
.theme-einbrennkompass .compare-card:hover { border-color: var(--line); box-shadow: 5px 5px 0 var(--accent); }
.theme-einbrennkompass .card-image { margin: -1.2rem -1.25rem .8rem; border-bottom: 2px solid var(--line); }
.theme-einbrennkompass .card-image img { border-radius: 0; }
.theme-einbrennkompass .card-kicker,
.theme-einbrennkompass .pick-badge,
.theme-einbrennkompass .aside-title { font-family: var(--mono); color: var(--accent); letter-spacing: .06em; }
.theme-einbrennkompass .card-title,
.theme-einbrennkompass .path-title,
.theme-einbrennkompass .pick-name,
.theme-einbrennkompass .compare-title,
.theme-einbrennkompass .pick-card-name,
.theme-einbrennkompass .aside-pick-name,
.theme-einbrennkompass .criterion strong { font-family: var(--grotesk); font-weight: 700; }
.theme-einbrennkompass .path-title { font-size: 1.2rem; }

/* Wege: Nummer als Stempel in eckigen Klammern */
.theme-einbrennkompass .path-no { font-family: var(--mono); font-size: .72rem; color: var(--accent); border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 0 0 .4rem; align-self: stretch; }
.theme-einbrennkompass .path-no::before { content: "["; }
.theme-einbrennkompass .path-no::after { content: "]"; }

/* „Anzeige“ und Etiketten: eckige Marken */
.theme-einbrennkompass .product-label { font-family: var(--mono); border: 1.5px solid var(--line); border-radius: 0; color: var(--ink); background: transparent; padding: .05rem .45rem; }
.theme-einbrennkompass .product-badge,
.theme-einbrennkompass .pick-card-badge { border-radius: 0; background: var(--iron); color: var(--on-iron); font-family: var(--mono); }
.theme-einbrennkompass .pick-suited strong,
.theme-einbrennkompass .product-suited strong { color: var(--accent); font-family: var(--mono); font-size: .8em; text-transform: uppercase; letter-spacing: .04em; }
.theme-einbrennkompass .fineprint,
.theme-einbrennkompass .pick-card-ad,
.theme-einbrennkompass .picks-note { font-family: var(--mono); font-style: normal; font-size: .72rem; }

/* So arbeiten wir: Ziffer als dunkles Quadrat */
.theme-einbrennkompass .criterion-no { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .8rem; background: var(--iron); color: var(--on-iron); font-family: var(--mono); font-size: .8rem; }
.theme-einbrennkompass .disclosure { border: 2px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); background: var(--surface); color: var(--ink); }

/* Artikel */
.theme-einbrennkompass .article h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.1; }
.theme-einbrennkompass .article h2 { border-top: 2px solid var(--line); padding-top: 1rem; }
.theme-einbrennkompass .meta { font-family: var(--mono); font-size: .76rem; }
.theme-einbrennkompass .body blockquote { border-left: 6px solid var(--accent); background: var(--soft); border-radius: 0; }
.theme-einbrennkompass .table-wrap { border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.theme-einbrennkompass .table-wrap thead th { background: var(--iron); color: var(--on-iron); font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.theme-einbrennkompass .pros-cons { background: var(--bg); border: 1px solid var(--hair); border-radius: 0; }
.theme-einbrennkompass .pros-title,
.theme-einbrennkompass .cons-title { font-family: var(--mono); }
.theme-einbrennkompass .finder-frage select { border: 2px solid var(--line); border-radius: var(--radius); background: #fff; }
.theme-einbrennkompass .finder-frage select:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 2px 2px 0 var(--accent); }
.theme-einbrennkompass .finder-ergebnis { border-left: 6px solid var(--accent); border-radius: 0; background: var(--bg); }
.theme-einbrennkompass .breadcrumb { font-family: var(--mono); font-size: .74rem; }

/* Fuß: Anthrazit */
.theme-einbrennkompass .site-footer { background: var(--iron); color: var(--on-iron-muted); border-top: 2px solid var(--iron-line); }
.theme-einbrennkompass .site-footer a { color: var(--on-iron); }
.theme-einbrennkompass .footer-brand { color: var(--on-iron); font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .02em; }

/* Einwilligung: kantig wie die Knöpfe */
.theme-einbrennkompass .consent { border-top: 2px solid var(--line); }
.theme-einbrennkompass .consent-button { border-radius: var(--radius); border: 2px solid var(--ink); font-family: var(--mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 560px) {
    .theme-einbrennkompass .section { padding: 2.4rem 0; }
    .theme-einbrennkompass .hero { padding: 1.6rem 0 2.4rem; }
    .theme-einbrennkompass .hero-links .button { width: 100%; text-align: center; }
    .theme-einbrennkompass .main-nav { flex-wrap: wrap; gap: .1rem .9rem; }
    .theme-einbrennkompass .main-nav a { font-size: .7rem; white-space: nowrap; }
}