/*
Theme Name: OutdoorExpert
Theme URI: https://www.camping-outdoorshop.de/
Author: OutdoorExpert Redaktion
Description: Redaktionelles Camping- und Outdoor-Ratgeber-Theme für camping-outdoorshop.de. Swiss-typografisches Editorial-Layout, hairline-rule Raster, self-hosted Fonts.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: outdoor-expert
Tags: custom-menu, featured-images, translation-ready, custom-post-types
*/

/* ============================================================
   Self-hosted fonts (NO Google/Fontshare CDN footprint)
   Bespoke Serif (Didone display) + Archivo (grotesk body)
   ============================================================ */
@font-face {
  font-family: 'Bespoke Serif';
  src: url('assets/fonts/bespoke-serif-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bespoke Serif';
  src: url('assets/fonts/bespoke-serif-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bespoke Serif';
  src: url('assets/fonts/bespoke-serif-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   Design tokens — B-swiss locked palette (ocean family)
   ============================================================ */
:root {
  --oe-ink:    #1a1a1a;   /* body text / hairlines-dark */
  --oe-ocean:  #14425f;   /* headings, primary brand (ocean) */
  --oe-coral:  #ff8b6b;   /* coral-sand accent (hover/accent line ONLY) */
  --oe-white:  #ffffff;   /* page background */
  --oe-paper:  #fdfdfd;   /* alt section background */
  --oe-rule:   #f0f0f0;   /* hairline rules / cell borders */
  --oe-mute:   #6b7280;   /* muted prose */
  --oe-mute-2: #9ca3af;   /* labels / metadata */
  --oe-wrap:   80rem;     /* max-w-7xl equivalent */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  background-color: var(--oe-white);
  color: var(--oe-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, .oe-didone {
  font-family: 'Bespoke Serif', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--oe-ocean);
  line-height: 1.05;
  margin: 0 0 0.5em;
}
a { color: inherit; text-decoration: none; }

/* ---------- layout primitives ---------- */
.oe-wrap { max-width: var(--oe-wrap); margin: 0 auto; padding: 0 1.5rem; }
.oe-accent-line { height: 1px; width: 100%; background-color: var(--oe-coral); }
.oe-section-num {
  font-family: 'Archivo', sans-serif;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--oe-ink);
}
.oe-eyebrow {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--oe-mute-2);
}

/* ---------- header / nav (IDENTICAL on every page — Gate 18) ---------- */
.oe-header { border-bottom: 1px solid var(--oe-ink); }
.oe-header .oe-wrap {
  height: 6rem; display: flex; align-items: flex-end;
  padding-bottom: 1.5rem; justify-content: space-between;
}
.oe-logo { display: flex; align-items: baseline; gap: 1rem; }
.oe-logo .oe-mark {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--oe-ocean); text-transform: uppercase;
  font-family: 'Archivo', sans-serif;
}
.oe-logo .oe-mark em { font-weight: 400; font-style: italic; }
.oe-nav { display: none; align-items: center; gap: 1.75rem; }
.oe-nav a {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; transition: color 0.15s; white-space: nowrap;
}
.oe-nav a:hover, .oe-nav a[aria-current="page"] { color: var(--oe-coral); }
.oe-burger { background: none; border: 0; cursor: pointer; color: var(--oe-ink); padding: 0; }
@media (min-width: 1024px) { .oe-nav { display: flex; } .oe-burger { display: none; } }

/* mobile nav panel */
.oe-mobile-nav { display: none; border-bottom: 1px solid var(--oe-ink); }
.oe-mobile-nav.is-open { display: block; }
.oe-mobile-nav a {
  display: block; padding: 1rem 1.5rem; border-top: 1px solid var(--oe-rule);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
}

/* ---------- hero ---------- */
/* R3-F1: photographic hero. Layers, bottom → top:
   z0 photo (.oe-hero-media) · z1 scrim (.oe-hero-scrim) · z2 topo signature ·
   z3 text (.oe-wrap). The scrim is a bottom-anchored near-black ocean gradient
   sized so the composited worst-case pixel behind any text box keeps white
   text ≥ WCAG AA — the pass does NOT depend on where the photo is bright.
   All hero text is reversed to white (the former ocean/ink fail on the photo). */
.oe-hero { padding: 8rem 0 5rem; position: relative; overflow: hidden; background: var(--oe-ocean); }
.oe-hero-media { position: absolute; inset: 0; z-index: 0; }
.oe-hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%;
}
.oe-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block;
  background:
    linear-gradient(to top,
      rgba(8, 22, 32, 0.94) 0%,
      rgba(8, 22, 32, 0.72) 34%,
      rgba(8, 22, 32, 0.46) 64%,
      rgba(8, 22, 32, 0.38) 100%),
    linear-gradient(rgba(20, 66, 95, 0.30), rgba(20, 66, 95, 0.30));
}
.oe-hero > .oe-wrap { position: relative; z-index: 3; }
/* signature moment (niche = "Kompass für Outdoor-Kultur"): faint topographic
   contour lines. R3-F1: re-toned to light strokes ABOVE the scrim so they read
   as contours etched into the dusk sky; full-bleed (mask dropped). */
.oe-topo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--oe-paper); opacity: 0.14; z-index: 2; pointer-events: none;
}
.oe-hero .oe-eyebrow { color: #fff; }
.oe-hero h1 { font-size: clamp(3rem, 9vw, 7.5rem); margin: 1.5rem 0 2.5rem; color: #fff; }
.oe-hero h1 em { font-weight: 400; font-style: italic; }
.oe-hero-lede { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 300; color: #fff; line-height: 1.3; max-width: 46rem; }
.oe-arrow-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 2px solid #fff; padding-bottom: 0.5rem; color: #fff;
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  transition: border-color 0.15s, color 0.15s;
}
/* keep the CTA text white on hover (coral on the dark scrim is 3.65:1 — fails
   AA); the coral accent lives on the underline only. */
.oe-arrow-cta:hover { border-color: var(--oe-coral); color: #fff; }

/* ---------- disciplines grid (hairline cells, no boxes) ---------- */
.oe-disciplines { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--oe-rule); }
.oe-discipline { padding: 3rem 2rem 3rem 0; border-bottom: 1px solid var(--oe-rule); }
.oe-discipline .oe-dnum { font-size: 0.625rem; font-weight: 700; color: var(--oe-mute-2); display: block; margin-bottom: 2rem; }
.oe-discipline h3 { font-size: 1.875rem; margin-bottom: 1rem; }
.oe-discipline p { font-size: 0.875rem; color: var(--oe-mute); margin: 0 0 2rem; }
.oe-discipline .oe-detail { font-size: 0.625rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; border-bottom: 1px solid var(--oe-ink); padding-bottom: 0.25rem; }
@media (min-width: 768px) { .oe-disciplines { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .oe-disciplines { grid-template-columns: repeat(5, 1fr); }
  .oe-discipline { border-bottom: 0; border-right: 1px solid var(--oe-rule); padding: 3rem 2rem; }
  .oe-discipline:first-child { padding-left: 0; }
  .oe-discipline:last-child { border-right: 0; padding-right: 0; }
}

/* ---------- editorial article list ---------- */
.oe-articles { display: grid; grid-template-columns: 1fr; gap: 4rem 5rem; }
@media (min-width: 768px) { .oe-articles { grid-template-columns: repeat(2, 1fr); } }
.oe-article { border-top: 1px solid var(--oe-ink); padding-top: 2rem; }
.oe-article .oe-date { font-size: 0.625rem; font-weight: 700; color: var(--oe-mute-2); display: block; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; }
.oe-article h3 { font-size: 1.875rem; margin-bottom: 1.5rem; }
.oe-article p { color: var(--oe-mute); margin: 0 0 2rem; }
.oe-read { font-size: 0.625rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---------- comparison table (strict grid) ---------- */
.oe-bench { background: var(--oe-paper); }
/* F3: the wrapper is a <figure>, so the browser's default figure margin
   (1em 40px) shrank its content box to 608px < the 640px min-width below,
   forcing a hidden horizontal scroll on desktop. Neutralise it on the class
   (element-agnostic: works for figure OR div; beats the UA sheet). */
.oe-table-wrap { border-top: 2px solid var(--oe-ink); overflow-x: auto; margin: 0 0 2.75rem; }
table.oe-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 640px; }
.oe-table thead { border-bottom: 1px solid var(--oe-rule); }
.oe-table th { padding: 1.5rem 0.75rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; }
.oe-table tbody tr { border-bottom: 1px solid var(--oe-rule); }
.oe-table td { padding: 2rem 0.75rem; vertical-align: middle; }
.oe-table .oe-model { font-size: 1.125rem; font-weight: 700; }
.oe-table .oe-score { text-align: center; font-weight: 700; color: var(--oe-ocean); }
.oe-table .oe-tech { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.oe-offer {
  font-size: 0.5625rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.12em;
  border: 1px solid var(--oe-ink); padding: 0.45rem 1rem; display: inline-block;
  margin-top: 0.65rem; line-height: 1.2;
  transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap;
}
.oe-offer:hover { background: var(--oe-ink); color: var(--oe-white); }

/* mobile: stack the wide table as cards (avoids page overflow — memory: shared-table min-width) */
@media (max-width: 640px) {
  .oe-table-wrap { overflow-x: visible; }
  table.oe-table { min-width: 0; }
  .oe-table thead { display: none; }
  .oe-table, .oe-table tbody, .oe-table tr, .oe-table td { display: block; width: 100%; }
  .oe-table tr { padding: 1.25rem 0; }
  .oe-table td {
    padding: 0.4rem 0; text-align: left !important;
    min-width: 0; overflow-wrap: anywhere;
  }
  /* F3: these themed tables previously stacked with NO field labels. The filter
     now lifts the header onto each cell as data-label; surface it here. */
  .oe-table td[data-label]::before {
    content: attr(data-label);
    display: block; font-size: 0.625rem; text-transform: uppercase;
    letter-spacing: 0.1em; font-weight: 700; color: var(--oe-mute-2);
    margin-bottom: 0.15rem;
  }
  .oe-table td.oe-score::before { content: "Score: "; font-weight: 400; color: var(--oe-mute); }
}

/* ---------- bare content tables: stack as Label:Wert cards on mobile ----------
   Prose tables authored as a plain <table> (no .oe-table) kept their natural
   column widths and pushed the PAGE sideways at 390px (camping-toiletten:
   scrollWidth 479). inc/stackable-tables.php lifts the thead labels onto each
   cell as data-label; below 640px each row becomes a card and the label is
   restored via ::before. A scroll wrapper is deliberately NOT used — it hides
   columns behind a scroll the reader has to find.

   NOTE: the three rules below the media query DO change desktop. These tables
   previously had no class at all, so they rendered with browser defaults
   (centered bold headers, no rules) next to 123 themed .oe-table siblings.
   They now pick up the same hairline grid. Small, deliberate, and the reason
   is consistency — not a side effect of the mobile fix. */
.oe-prose table.oe-stapel { width: 100%; border-collapse: collapse; text-align: left; }
.oe-prose table.oe-stapel th { padding: 0.9rem 0.75rem 0.9rem 0; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; border-bottom: 1px solid var(--oe-ink); }
.oe-prose table.oe-stapel td { padding: 0.9rem 0.75rem 0.9rem 0; vertical-align: top; border-bottom: 1px solid var(--oe-rule); }

@media (max-width: 640px) {
  .oe-prose table.oe-stapel,
  .oe-prose table.oe-stapel tbody,
  .oe-prose table.oe-stapel tr { display: block; width: 100%; }
  .oe-prose table.oe-stapel thead { display: none; }
  .oe-prose table.oe-stapel tr {
    margin: 0 0 1rem; padding: 0.4rem 0.9rem;
    border: 1px solid var(--oe-rule); border-left: 3px solid var(--oe-coral);
  }
  .oe-prose table.oe-stapel td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--oe-rule); text-align: right;
    min-width: 0; overflow-wrap: anywhere;
  }
  .oe-prose table.oe-stapel tr td:last-child { border-bottom: 0; }
  .oe-prose table.oe-stapel td::before {
    content: attr(data-label);
    font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 700; color: var(--oe-mute-2); text-align: left;
    /* F3: a 29-char compound label ("Acryl (z. B. Isacryl, Dralon)") with
       flex:0 0 auto held its intrinsic width and pushed the page past 390px.
       Allow it to shrink and break. */
    flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere;
  }
  .oe-prose table.oe-stapel td:first-child { font-weight: 700; }
}

/* ---------- F3: WIDE tables (>=6 columns) — card layout at ALL widths ----------
   A 6+-column table needs ~800px intrinsic and cannot fit the 46rem (688px)
   prose measure at any desktop width. An overflow scrollbar fails acceptance
   (the container itself must not scroll). The filter tags these .is-wide by
   column count; here we promote the mobile label:value card layout to every
   width. A single-column card stack structurally cannot overflow its column. */
.oe-prose table.oe-stapel.is-wide,
.oe-prose table.oe-stapel.is-wide tbody,
.oe-prose table.oe-stapel.is-wide tr,
.oe-table-wrap table.oe-table.is-wide,
.oe-table-wrap table.oe-table.is-wide tbody,
.oe-table-wrap table.oe-table.is-wide tr { display: block; width: 100%; }
.oe-prose table.oe-stapel.is-wide thead,
.oe-table-wrap table.oe-table.is-wide thead { display: none; }
.oe-table-wrap table.oe-table.is-wide { min-width: 0; }
.oe-prose table.oe-stapel.is-wide tr,
.oe-table-wrap table.oe-table.is-wide tr {
  margin: 0 0 1rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--oe-rule); border-left: 3px solid var(--oe-coral);
}
.oe-prose table.oe-stapel.is-wide td,
.oe-table-wrap table.oe-table.is-wide td {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0 !important; border: 0; border-bottom: 1px solid var(--oe-rule);
  text-align: right !important; min-width: 0; overflow-wrap: anywhere;
}
.oe-prose table.oe-stapel.is-wide tr td:last-child,
.oe-table-wrap table.oe-table.is-wide tr td:last-child { border-bottom: 0; }
.oe-prose table.oe-stapel.is-wide td[data-label]::before,
.oe-table-wrap table.oe-table.is-wide td[data-label]::before {
  content: attr(data-label);
  display: inline; margin: 0; font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 700; color: var(--oe-mute-2);
  text-align: left; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.oe-table-wrap table.oe-table.is-wide td.oe-score { text-align: right !important; }

/* Long German compounds must break rather than push the page sideways —
   "Verbraucherstreitbeilegung" as an <h2> overflowed /impressum/ at 390px
   (scrollWidth 455). <html lang="de"> is set, so hyphens:auto hyphenates
   correctly. Applied to every heading: this will recur otherwise. */
.oe-prose h1, .oe-prose h2, .oe-prose h3, .oe-prose h4 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---------- prose (single / page content) ---------- */
/* Article template wraps content in .oe-article — ONE centered reading measure so
   breadcrumbs, h1, hero, prose, tables and the calc share a column. Fixes the
   left-crowding (prose was 46rem left-aligned inside the 80rem wrap → big right
   gutter) and the wide-thin tables. */
.oe-article { max-width: 46rem; }
.oe-article > figure { margin: 0 0 2.75rem; }
/* CC image credit under a page's featured image (only rendered when the
   attachment carries a caption; AI-generated heroes have none → no line). */
.oe-img-credit { font-size: 0.75rem; color: var(--oe-mute-2); margin-top: 0.5rem; letter-spacing: 0.01em; }
/* CC image credit under a page's featured image (only rendered when the
   attachment carries a caption; AI-generated heroes have none → no line). */
.oe-img-credit { font-size: 0.75rem; color: var(--oe-mute-2); margin-top: 0.5rem; letter-spacing: 0.01em; }
.oe-prose { max-width: 46rem; }
.oe-article .oe-prose { max-width: none; }
.oe-prose h2 { font-size: 2rem; margin-top: 2.5rem; }
.oe-prose h3 { font-size: 1.375rem; margin-top: 2rem; }
.oe-prose p, .oe-prose li { font-size: 1.0625rem; line-height: 1.75; color: #2b2b2b; }
.oe-prose a { color: var(--oe-ocean); border-bottom: 1px solid var(--oe-coral); }
.oe-prose img { margin: 2rem 0; }
.oe-prose figcaption { font-size: 0.8125rem; color: var(--oe-mute); margin-top: 0.5rem; }

/* Homepage prose sits in the SAME centered 46rem reading measure as the article
   pages (page.php wraps content in .oe-article). Without this the homepage prose
   is 46rem but left-aligned in the 80rem wrap → its left edge lands at the wrap
   padding while every subpage's column is centered, so the homepage reads
   "off to the left" next to the rest of the site. Centering the label + prose
   column aligns them. The .oe-guides card grid and .oe-side-row stay full-width
   (deliberate wide showcase, not a reading column). */
body.home .oe-prose { margin-inline: auto; }
body.home .oe-py > .oe-wrap > .oe-section-num,
body.home .oe-py-sm > .oe-wrap > .oe-section-num,
body.home .oe-bench > .oe-wrap > .oe-section-num { display: block; max-width: 46rem; margin-inline: auto; }

/* site-specific callout (NOT the AI-slop bg/10 + border-l-4 idiom) —
   a flush ocean keyline tab, no tinted box, no stock "Tipp" label */
.oe-note { margin: 2rem 0; padding-left: 1.25rem; border-left: 3px solid var(--oe-ocean); }
.oe-note > :first-child { margin-top: 0; }

/* FAQ accordion (Gate 19 — expandable, not a flat wall).
   F5: the styling is keyed to `.oe-prose details/summary`, NOT the `.oe-faq`
   wrapper — that wrapper was present on only 4 of 14 FAQ pages, so the other 10
   rendered as raw browser disclosure widgets. Every FAQ on this site lives
   inside `.oe-prose`, so scoping there styles all three authored markup
   variants (summary>h3.oe-faq-q · summary>bare-h3 · legacy .oe-faq wrapper) and
   can no longer silently break when a new FAQ is authored without the wrapper. */
.oe-prose details { border-top: 1px solid var(--oe-rule); padding: 1.25rem 0; }
.oe-prose summary {
  cursor: pointer; font-family: 'Bespoke Serif', serif; font-weight: 700;
  color: var(--oe-ocean); font-size: 1.125rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.oe-prose summary::-webkit-details-marker { display: none; }
/* the question heading sits ON the summary line at the summary's size, whether
   it carries .oe-faq-q (variant A) or is a bare <h3> (variant B). */
.oe-prose summary > h3,
.oe-prose summary .oe-faq-q,
.oe-faq-q { font: inherit; color: inherit; margin: 0; padding: 0; display: inline; }
.oe-prose summary::after { content: "+"; font-family: 'Archivo'; flex: 0 0 auto; }
.oe-prose details[open] summary::after { content: "–"; }
.oe-prose details > div { padding-top: 1rem; }
.oe-prose details > div > :first-child { margin-top: 0; }

/* ---------- footer ---------- */
.oe-footer { border-top: 2px solid var(--oe-ink); padding: 6rem 0 0; margin-top: 6rem; }
.oe-footer h4 { font-family: 'Archivo'; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; color: var(--oe-mute-2); margin-bottom: 2rem; }
.oe-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.oe-footer a { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.oe-footer a:hover { color: var(--oe-coral); }
.oe-foot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
/* F6: the affiliate disclosure moved out of the Transparenz column (col 4) into
   the OutdoorExpert column (col 1), under the publication blurb it qualifies.
   Col 4 now carries only the legal links, so the old 4fr slot is rebalanced. */
@media (min-width: 1024px) { .oe-foot-grid { grid-template-columns: 3fr 2fr 2fr 2fr; } }
.oe-foot-blurb { font-size: 0.75rem; color: var(--oe-mute); line-height: 1.7; margin: 0 0 1.25rem; }
.oe-disclosure { font-size: 0.625rem; color: var(--oe-mute-2); line-height: 1.8; font-style: italic; margin: 0; }
.oe-foot-bar { display: flex; flex-direction: column; gap: 0.75rem; justify-content: space-between; border-top: 1px solid var(--oe-rule); padding: 3rem 0; margin-top: 6rem; }
.oe-foot-bar p { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }
@media (min-width: 768px) { .oe-foot-bar { flex-direction: row; align-items: baseline; } }

/* breadcrumbs */
.oe-crumbs { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--oe-mute-2); padding: 1.5rem 0; }
.oe-crumbs a:hover { color: var(--oe-coral); }

/* generic grid helpers for templates */
.oe-grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.oe-mt { margin-top: 2rem; } .oe-mb-lg { margin-bottom: 6rem; }

/* ---------- real inline-SVG logo (Gate 20: ≥4 drawing elements) ---------- */
.oe-logo svg { width: 2rem; height: 2rem; flex: none; align-self: center; }
.oe-logo svg .oe-l-peak { fill: var(--oe-ocean); }
.oe-logo svg .oe-l-sun  { fill: var(--oe-coral); }
.oe-logo svg .oe-l-ridge{ stroke: var(--oe-ocean); }

/* ---------- sticky hairline header + scroll progress ---------- */
.oe-header { position: sticky; top: 0; z-index: 50; background: var(--oe-white); }
.oe-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--oe-coral); z-index: 60; transition: width 0.1s linear; }

/* ---------- scroll-reveal (progressive enhancement — visible without JS) ---------- */
.oe-reveal { opacity: 1; transform: none; }
.js .oe-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .oe-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .oe-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- side-thread row (minor secondary: Winter / Genuss) ---------- */
.oe-side-row { display: grid; grid-template-columns: 1fr; gap: 2rem; border-top: 1px solid var(--oe-rule); padding-top: 2rem; }
@media (min-width: 768px) { .oe-side-row { grid-template-columns: repeat(2, 1fr); } }
.oe-side { padding: 0; }
.oe-side h3 { font-size: 1.25rem; }
.oe-side p { font-size: 0.875rem; color: var(--oe-mute); margin: 0.5rem 0 1rem; }
.oe-side .oe-read { color: var(--oe-ocean); }

/* featured-guides cards (homepage module — replaces the invented benchmark table) */
.oe-guides { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--oe-ink); }
.oe-guide { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; border-bottom: 1px solid var(--oe-rule); align-items: center; }
.oe-guide img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.oe-guide .oe-g-body h3 { font-size: 1.75rem; margin-bottom: 0.75rem; }
.oe-guide .oe-g-body p { color: var(--oe-mute); margin: 0 0 1.25rem; }
@media (min-width: 768px) {
  .oe-guide { grid-template-columns: 5fr 7fr; gap: 3rem; }
  .oe-guide:nth-child(even) { grid-template-columns: 7fr 5fr; }
  .oe-guide:nth-child(even) .oe-g-media { order: 2; }
}
.oe-py { padding: 5.5rem 0; } .oe-py-sm { padding: 3.5rem 0; }

/* ---------- interactive calculator (Zuladungs-/Stützlast-Rechner) ----------
   Swiss hairline-rule idiom: no tinted callout box, no border-l-4 + bold label.
   Static-safe: renders as a labelled form + explained formula with JS off;
   JS only fills the .oe-calc-out region. */
.oe-calc { border-top: 2px solid var(--oe-ink); border-bottom: 2px solid var(--oe-ink); margin: 3rem 0; padding: 2rem 0; }
.oe-calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.oe-calc-head h3 { font-size: 1.5rem; margin: 0; color: var(--oe-ocean); }
.oe-calc-kicker { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; color: var(--oe-mute); }
.oe-calc-lead { color: var(--oe-mute); font-size: 0.9375rem; margin: 0 0 1.5rem; max-width: 46rem; }
.oe-calc-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; }
@media (min-width: 640px) { .oe-calc-grid { grid-template-columns: repeat(2, 1fr); } }
.oe-field { display: flex; flex-direction: column; gap: 0.35rem; }
.oe-field label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
.oe-field .oe-hint { font-size: 0.75rem; color: var(--oe-mute); font-weight: 400; }
.oe-field input, .oe-field select {
  font: inherit; font-size: 1rem; padding: 0.6rem 0.75rem; background: var(--oe-white);
  border: 1px solid var(--oe-ink); border-radius: 0; color: var(--oe-ink); width: 100%;
}
.oe-field input:focus, .oe-field select:focus { outline: 2px solid var(--oe-ocean); outline-offset: 1px; }
.oe-calc-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.oe-calc-btn {
  font: inherit; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.75rem;
  padding: 0.75rem 1.5rem; cursor: pointer; border: 1px solid var(--oe-ink);
  background: var(--oe-ink); color: var(--oe-white);
}
.oe-calc-btn:hover { background: var(--oe-ocean); border-color: var(--oe-ocean); }
.oe-calc-btn.is-ghost { background: transparent; color: var(--oe-ink); }
.oe-calc-btn.is-ghost:hover { background: var(--oe-paper); color: var(--oe-ink); }
/* output region — hairline-framed rows, no coloured tint box */
.oe-calc-out { margin-top: 2rem; border-top: 1px solid var(--oe-rule); }
.oe-calc-out[hidden] { display: none; }
.oe-res-h { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--oe-mute); margin: 1.75rem 0 0.25rem; }
.oe-res-h:first-child { margin-top: 1.25rem; }
.oe-calc-group { grid-column: 1 / -1; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--oe-ocean); border-bottom: 1px solid var(--oe-rule); padding-bottom: 0.35rem; margin-top: 0.5rem; }
.oe-field-full { grid-column: 1 / -1; }
.oe-res-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--oe-rule); font-size: 0.9375rem; }
.oe-res-row .oe-res-k { color: var(--oe-mute); }
.oe-res-row .oe-res-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.oe-res-row.is-total { border-bottom: 2px solid var(--oe-ink); }
.oe-res-row.is-total .oe-res-k, .oe-res-row.is-total .oe-res-v { font-size: 1.125rem; color: var(--oe-ink); }
/* verdict line — status shown by a leading rule + word, not a filled box */
.oe-verdict { margin-top: 1.5rem; padding-left: 1rem; border-left: 4px solid var(--oe-mute); }
.oe-verdict[data-state="ok"]   { border-left-color: var(--oe-ocean); }
.oe-verdict[data-state="warn"] { border-left-color: var(--oe-coral); }
.oe-verdict[data-state="bad"]  { border-left-color: #b3261e; }
.oe-verdict .oe-verdict-t { font-family: 'Bespoke Serif', serif; font-weight: 700; font-size: 1.0625rem; display: block; margin-bottom: 0.25rem; }
.oe-verdict[data-state="ok"]   .oe-verdict-t { color: var(--oe-ocean); }
.oe-verdict[data-state="bad"]  .oe-verdict-t { color: #b3261e; }
.oe-verdict p { margin: 0; font-size: 0.9375rem; color: #2b2b2b; }
.oe-calc-fine { font-size: 0.75rem; color: var(--oe-mute); margin-top: 1.25rem; }

/* Data infographic (hand-coded inline SVG, per silo) --------------------- */
.oe-fig-wrap { margin: 2.5rem 0; }
.oe-fig-wrap figcaption { font-size: 0.8125rem; color: var(--oe-mute); margin-top: 0.6rem; line-height: 1.5; }
.oe-fig { width: 100%; height: auto; border: 1px solid var(--oe-rule); border-radius: 2px; }

/* ============================================================
   Vorzelt-Größenrechner (Umlaufmaß) — diagram + table highlight
   ============================================================ */
.oe-calc-diagram { max-width: 40rem; margin: 0 0 1.5rem; }
.oe-calc-diagram svg { width: 100%; height: auto; display: block; }
.oe-calc-diagram figcaption { font-size: 0.8125rem; color: var(--oe-mute-2); margin-top: 0.5rem; }
.oe-table tr.is-match { background: var(--oe-paper); box-shadow: inset 3px 0 0 var(--oe-coral); }
.oe-table tr.is-match .oe-model { font-weight: 700; }

/* ============================================================
   Design refinement pass 2026-07-09 — signature layer + polish
   (within the locked B-swiss system; coral now lives on the page,
   not only on hover; tighter rhythm; Layer-0 cheap wins)
   ============================================================ */

/* Section eyebrow gets a short coral tick — accent presence without a box */
.oe-section-num { display: inline-flex; align-items: center; gap: 0.6rem; }
.oe-section-num::before {
  content: ""; width: 1.5rem; height: 2px; background: var(--oe-coral); flex: none;
}

/* Layer 0 — cheap wins (all CSS, niche-accent = coral/ocean) */
::selection { background: var(--oe-ocean); color: var(--oe-white); }
html { scrollbar-color: var(--oe-coral) var(--oe-white); }
:focus-visible { outline: 2px solid var(--oe-ocean); outline-offset: 3px; }
:root { accent-color: var(--oe-ocean); }

/* Discipline (Themenfelder) hover — the numbered cell lifts its rule to coral,
   tying the cheap grid to the brand accent on interaction */
.oe-discipline { transition: background 0.25s ease; }
.oe-discipline h3 { transition: color 0.2s ease; }
.oe-discipline:hover h3 { color: var(--oe-coral); }

/* ---------- related silos (editorial lateral-link module, hairline idiom) ----------
   Matches the Swiss grid: a 2px ink section-rule, then hairline rows. No tinted
   box, no left-border callout, no bold-label — deliberately NOT the AI-slop
   callout idiom (Gate 14). Each row: full silo label + descriptive anchor. */
.oe-related { border-top: 2px solid var(--oe-ink); margin-top: 4rem; padding-top: 1.5rem; }
.oe-related-title { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--oe-mute-2); margin: 0 0 0.5rem; }
.oe-related-list { list-style: none; margin: 0; padding: 0; }
.oe-related-list li { border-bottom: 1px solid var(--oe-rule); }
.oe-related-list li:last-child { border-bottom: 0; }
.oe-related-list a { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 0; text-decoration: none; transition: padding-left 0.25s ease; }
.oe-related-list a:hover { padding-left: 0.75rem; }
.oe-related-label { font-family: 'Bespoke Serif', Georgia, serif; font-size: 1.25rem; font-weight: 700; color: var(--oe-ocean); }
.oe-related-list a:hover .oe-related-label { color: var(--oe-coral); }
.oe-related-anchor { font-size: 0.95rem; color: var(--oe-mute); }

/* cluster (pillar → spokes) reuses the related-module treatment */
.oe-cluster { border-top: 2px solid var(--oe-ink); margin-top: 4rem; padding-top: 1.5rem; }
.oe-cluster + .oe-related { margin-top: 3rem; }