/* ============================================================================
   BIKE ABK — SEITENSPEZIFISCHE ABSCHNITTE
   ============================================================================
   Alles, was nur auf einzelnen Seiten vorkommt. Design-Tokens, Nav, Footer und
   Formulare stehen in style.css.
   Farben hier nie hartcodieren — immer die var(--th-*)-Tokens verwenden.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   BILD-EBENEN — GEMEINSAME REGEL
   ---------------------------------------------------------------------------
   Gilt für Hero, Bento-Karten und Seitenköpfe.

   Warum die Bilder hier absolut positioniert werden: Ein Foto soll seinen Block
   füllen, unabhängig davon, wie groß die Datei ist. Verlässt man sich nur auf
   width/height in Prozent, hängt das Ergebnis daran, dass der Elternbereich
   schon eine Höhe hat — sonst nimmt das Bild seine natürliche Größe an und
   sprengt den Block. Mit inset: 0 kann das nicht passieren: Das Bild ist immer
   genau so groß wie seine Ebene, ob die Quelle 800 oder 4000 Pixel breit ist.

   object-fit: cover schneidet dabei zu, statt zu verzerren — wie ein
   Bildausschnitt, nicht wie ein gestauchtes Foto.
   --------------------------------------------------------------------------- */

.th-hero-media,
.th-card-media,
.th-page-header-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.th-hero-media img,
.th-card-media img,
.th-page-header-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;   /* die globale img-Regel darf hier nicht bremsen */
  min-width: 0;
  object-fit: cover;
  display: block;
  /* Verhindert, dass ein sehr großes Bild vor dem Laden der Stylesheets
     kurz in Originalgröße aufblitzt. */
  contain: paint;
}


/* ---------------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------------- */

.th-hero {
  position: relative;
  background:
    repeating-radial-gradient(circle at 82% 15%,
      transparent 0, transparent 42px,
      rgba(236, 233, 222, 0.05) 43px, rgba(236, 233, 222, 0.05) 44px),
    radial-gradient(circle at 82% 15%, #232922 0%, var(--th-graphite) 55%),
    var(--th-graphite);
  padding: 84px var(--th-gutter) 0;
}


/* ---------------------------------------------------------------------------
   HERO MIT FOTO
   ---------------------------------------------------------------------------
   Greift nur, wenn im Customizer ein Hero-Bild gesetzt ist. Ohne Bild bleibt
   das Punktraster-Design von oben unverändert.

   Das Foto steckt als echtes <img> in .th-hero-media (siehe inc/images.php),
   nicht als CSS-Hintergrund — dadurch liefert WordPress automatisch die für
   das Gerät passende Auflösung aus.
   --------------------------------------------------------------------------- */

.th-hero--media {
  /* Punktraster aus, sonst liegt es über dem Foto */
  background: var(--th-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(84vh, 760px);
  /* Mehr Luft nach oben als in der bildlosen Variante, damit die Headline nicht
     an der Sticky-Nav klebt. */
  padding-top: 140px;
}

.th-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.th-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Motive liegen meist rechts, der Text links. Bei Beschnitt lieber oben
     halten, damit Himmel/Berge erhalten bleiben. */
  object-position: center 35%;
  display: block;
}

/* Verlauf für die Lesbarkeit. --th-hero-shade kommt aus dem Customizer
   (Standard 0.7) und regelt, wie stark abgedunkelt wird.
   Der Verlauf ist links am stärksten, weil dort die Headline steht, und wird
   nach unten wieder dichter, damit die Kennzahlen-Leiste lesbar bleibt. */
.th-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(15, 18, 16, calc(var(--th-hero-shade, 0.7) * 1.25)) 0%,
      rgba(15, 18, 16, calc(var(--th-hero-shade, 0.7) * 1.05)) 30%,
      rgba(15, 18, 16, calc(var(--th-hero-shade, 0.7) * 0.5)) 62%,
      rgba(15, 18, 16, calc(var(--th-hero-shade, 0.7) * 0.35)) 100%),
    linear-gradient(to top,
      rgba(15, 18, 16, 0.85) 0%,
      rgba(15, 18, 16, 0.25) 28%,
      transparent 55%);
}

/* Inhalte über die Bild-Ebene heben */
.th-hero--media > *:not(.th-hero-media) {
  position: relative;
  z-index: 1;
}

/* Über einem Foto braucht der Text mehr Gewicht und einen leichten Schatten,
   sonst flimmert er auf unruhigen Bildbereichen. */
.th-hero--media h1 {
  text-shadow: 0 2px 24px rgba(15, 18, 16, 0.55);
}
.th-hero--media .th-lead {
  color: var(--th-paper);
  text-shadow: 0 1px 12px rgba(15, 18, 16, 0.6);
  max-width: 42ch;
}
.th-hero--media .th-eyebrow {
  text-shadow: 0 1px 10px rgba(15, 18, 16, 0.7);
}

/* Die Höhenprofil-Linie konkurriert auf einem Foto mit dem Bildinhalt und
   wird dort ausgeblendet — sie ist das Signature-Element für die
   bildlose Variante. */
.th-hero--media .th-elev { display: none; }

/* Kennzahlen-Leiste auf dem Foto abheben */
.th-hero--media .th-hud {
  border-top-color: rgba(236, 233, 222, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.th-hero--media .th-hud > div { border-right-color: rgba(236, 233, 222, 0.25); }
.th-hero--media .th-hud .th-lbl { color: var(--th-paper-2); }

@media (max-width: 860px) {
  /* Hochkant ist links kein Platz für "ruhige Bildhälfte" — der Verlauf muss
     deshalb flächig abdunkeln, sonst wird der Text unlesbar. */
  .th-hero-media::after {
    background:
      linear-gradient(to top,
        rgba(15, 18, 16, 0.95) 0%,
        rgba(15, 18, 16, 0.8) 45%,
        rgba(15, 18, 16, 0.55) 100%);
  }
  .th-hero-media img { object-position: center 30%; }
  .th-hero--media {
    padding-top: 100px;
    min-height: min(80vh, 620px);
  }
}

.th-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--th-hivis);
  margin-bottom: 26px;
}
.th-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--th-hivis);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(200, 255, 61, 0.6);
}

.th-hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 0.98;
  margin: 0 0 22px;
  max-width: 14ch;
}
.th-hero h1 em { font-style: normal; color: var(--th-hivis); }

.th-hero .th-lead { margin: 0 0 36px; }

.th-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }

/* Höhenprofil-Linie — das Signature-Element des Designs, ersetzt ein Hero-Foto */
.th-elev { width: 100%; max-width: 720px; margin-bottom: 8px; display: block; }
.th-elev path {
  fill: none;
  stroke: var(--th-rust);
  stroke-width: 2;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: th-draw 1.6s ease-out 0.3s forwards;
}
@keyframes th-draw { to { stroke-dashoffset: 0; } }

/* Kennzahlen-Leiste */
.th-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--th-line);
  margin-top: 10px;
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.th-hud > div {
  padding: 22px 20px 30px 0;
  border-right: 1px solid var(--th-line);
}
.th-hud > div:last-child { border-right: none; }
.th-hud .th-num {
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--th-paper);
  display: block;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  text-transform: none;
}
.th-hud .th-lbl { font-size: 0.68rem; color: var(--th-stone); }

@media (max-width: 860px) {
  .th-hud { grid-template-columns: 1fr; }
  .th-hud > div {
    border-right: none;
    border-bottom: 1px solid var(--th-line);
    padding: 18px 0;
  }
}
@media (max-width: 700px) {
  .th-hero { padding: 56px var(--th-gutter-mobile) 0; }
}


/* ---------------------------------------------------------------------------
   BENTO-GRID (Service / Community / Verkauf)
   --------------------------------------------------------------------------- */

.th-bento {
  display: grid;
  gap: 2px;
  background: var(--th-line);
  margin-top: 64px;
}

/* Drei Karten: links eine hohe über beide Zeilen, rechts zwei gestapelt.
   Die linke Spalte ist etwas breiter, damit die hohe Karte trägt. */
.th-bento--3 {
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Vier Karten: gleichmäßiges 2x2. Die hohe Karte wird hier zurückgesetzt,
   sonst würde sie beide Zeilen belegen und rechts bliebe ein Loch. */
.th-bento--4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.th-bento--4 .th-card--tall { grid-row: auto; }

/* ---------------------------------------------------------------------------
   GEMISCHTE REIHE — manche Karten mit Foto, andere ohne
   ---------------------------------------------------------------------------
   Vier Karten ganz ohne Fotos sind ein stimmiges Design. Drei mit Foto und eine
   ohne sehen aus, als wäre etwas nicht geladen — und genau das ist der Zustand,
   solange ein Bild fehlt.

   Die Karte ohne Foto bekommt deshalb hier eine eigene Gestaltung: derselbe
   Verlauf und dieselbe Ringstruktur wie der Seitenkopf, dazu die Mindesthöhe der
   Bildkarten. Damit steht sie gleichwertig in der Reihe statt wie eine Lücke.

   Die Klasse th-bento--mixed setzt template-parts/bento.php nur, wenn wirklich
   gemischt ist. Sind alle Karten ohne Foto, greift nichts davon — dann ist die
   ruhige Flächenvariante richtig.
   --------------------------------------------------------------------------- */

.th-bento--mixed .th-card:not(.th-card--media) {
  min-height: 380px;
  background:
    repeating-radial-gradient(circle at 78% 22%,
      transparent 0, transparent 38px,
      rgba(236, 233, 222, 0.045) 39px, rgba(236, 233, 222, 0.045) 40px),
    radial-gradient(circle at 78% 22%, #232922 0%, var(--th-card-bg) 62%),
    var(--th-card-bg);
}

/* Das Symbol größer und ruhiger — es trägt die Karte jetzt allein, wo sonst ein
   Foto steht. */
.th-bento--mixed .th-card:not(.th-card--media) .th-icn {
  width: 64px;
  height: 64px;
  border-color: rgba(200, 255, 61, 0.45);
}
.th-bento--mixed .th-card:not(.th-card--media) .th-icn svg { width: 28px; height: 28px; }

/* Rückfall für andere Anzahlen (2, 5, 6 …): automatisch umbrechende Spalten. */
.th-bento:not(.th-bento--3):not(.th-bento--4) {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.th-bento:not(.th-bento--3):not(.th-bento--4) .th-card--tall { grid-row: auto; }
.th-card {
  position: relative;
  background: var(--th-card-bg);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease;
}
.th-card:hover { box-shadow: inset 0 0 0 1px rgba(200, 255, 61, 0.35); }
.th-card--tall { grid-row: 1 / 3; }
.th-card h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin: 0 0 10px; }
.th-card p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--th-paper-3);
  max-width: 34ch;
  margin: 0;
}
.th-card .th-icn {
  position: absolute;
  top: 34px; right: 34px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--th-hivis);
  display: flex; align-items: center; justify-content: center;
}
.th-card .th-icn svg {
  width: 22px; height: 22px;
  stroke: var(--th-hivis); fill: none; stroke-width: 1.6;
}


/* ---------------------------------------------------------------------------
   BENTO-KARTEN MIT FOTO
   ---------------------------------------------------------------------------
   Greift nur bei gesetztem Bild. Ohne Bild bleibt die Karte wie oben:
   Flächenfarbe, Icon oben rechts als Outline-Kreis.
   --------------------------------------------------------------------------- */

.th-card--media {
  overflow: hidden;
  min-height: 380px;
  padding: 34px 30px 30px;
}

.th-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/*
 * Bildausschnitt kommt aus dem Customizer (BIKE ABK — Bilder):
 *   contain  ganzes Bild, ggf. schmale dunkle Streifen
 *   cover    randlos gefüllt, schneidet zu
 * Standard ist contain — abgeschnittene Motive fallen mehr auf als Streifen.
 */
.th-card-media img {
  object-fit: var(--th-card-fit, cover);
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Der Streifen neben dem Bild soll wie Teil der Karte wirken, nicht wie ein
   Fehler — deshalb dieselbe Flächenfarbe wie die Karte selbst. */
.th-card-media { background: var(--th-graphite-2); }
/* Sanftes Heranfahren beim Hover. Nur auf Zeigergeräten, damit es auf
   Touchscreens nicht beim Scrollen auslöst. */
@media (hover: hover) {
  .th-card--media:hover .th-card-media img { transform: scale(1.05); }
}

/* Abdunkelung von unten, damit Titel und Text auf jedem Foto lesbar sind.
   Oben bleibt das Bild fast unangetastet, unten wird es fast deckend. */
.th-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* --th-card-shade kommt aus dem Customizer und ist schwächer, wenn das ganze
     Bild gezeigt wird — siehe bike_abk_overlay_css(). */
  background: linear-gradient(to top,
    rgba(15, 18, 16, var(--th-card-shade, 0.94)) 0%,
    rgba(15, 18, 16, calc(var(--th-card-shade, 0.94) * 0.87)) 26%,
    rgba(15, 18, 16, calc(var(--th-card-shade, 0.94) * 0.48)) 55%,
    rgba(15, 18, 16, calc(var(--th-card-shade, 0.94) * 0.16)) 100%);
}

.th-card--media > *:not(.th-card-media) {
  position: relative;
  z-index: 1;
}

/* Icon und Titel in einer Zeile — wie im Entwurf. Der Outline-Kreis oben
   rechts geht auf einem Foto unter, der gefüllte Kreis hält sich. */
.th-card--media .th-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.th-card--media .th-icn {
  position: static;
  flex: none;
  width: 44px; height: 44px;
  background: var(--th-hivis);
  border-color: var(--th-hivis);
  box-shadow: 0 2px 14px rgba(15, 18, 16, 0.4);
}
.th-card--media .th-icn svg { stroke: var(--th-ink); stroke-width: 1.9; }
.th-card--media .th-card-head h3 { margin: 0; }

.th-card--media .th-tag {
  margin-bottom: 12px;
  text-shadow: 0 1px 8px rgba(15, 18, 16, 0.8);
}
.th-card--media h3 { text-shadow: 0 1px 12px rgba(15, 18, 16, 0.6); }
.th-card--media p {
  color: var(--th-paper-2);
  text-shadow: 0 1px 10px rgba(15, 18, 16, 0.7);
}

/* Kurzclaim wie "Professionell. Zuverlässig. Schnell." */
.th-card--media .th-card-claim {
  font-family: var(--th-font-body);
  font-size: 0.88rem;
  color: var(--th-paper);
  margin: 0 0 10px;
  text-shadow: 0 1px 10px rgba(15, 18, 16, 0.7);
}

/* Hover-Rahmen sitzt über der Bild-Ebene */
.th-card--media:hover { box-shadow: inset 0 0 0 1px rgba(200, 255, 61, 0.5); }

@media (max-width: 860px) {
  .th-card--media { min-height: 320px; }
}

/* Marken-Laufband */
.th-marquee {
  margin-top: 20px;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.th-marquee-track {
  display: inline-flex;
  gap: 34px;
  animation: th-scroll 22s linear infinite;
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.th-marquee:hover .th-marquee-track { animation-play-state: paused; }
.th-marquee-track span { font-size: 0.75rem; color: var(--th-stone); }
/* Auf einem Foto braucht die Markenzeile mehr Kontrast als das gedämpfte Grau */
.th-card--media .th-marquee-track span {
  color: var(--th-paper-2);
  text-shadow: 0 1px 8px rgba(15, 18, 16, 0.9);
}
@keyframes th-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 860px) {
  /* Auf schmalen Bildschirmen stapeln alle Karten untereinander, unabhängig
     von der Anzahl. */
  .th-bento,
  .th-bento--3,
  .th-bento--4,
  .th-bento:not(.th-bento--3):not(.th-bento--4) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .th-card--tall { grid-row: auto; }
}


/* ---------------------------------------------------------------------------
   SCROLL-REVEAL
   Startzustand nur setzen, wenn JS läuft — sonst bleiben Inhalte unsichtbar,
   falls das Skript blockiert wird.
   --------------------------------------------------------------------------- */

.js .th-reveal { opacity: 0; transform: translateY(24px); }
.js .th-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}


/* ---------------------------------------------------------------------------
   BIKE-FINDER QUIZ
   --------------------------------------------------------------------------- */

.th-quiz-box {
  max-width: 620px;
  margin: 0 auto;
  background: var(--th-graphite-2);
  border: 1px solid var(--th-line);
  padding: 44px;
}
.th-quiz-dots { display: flex; gap: 8px; margin-bottom: 26px; }
.th-quiz-dots span { width: 24px; height: 3px; background: var(--th-line); }
.th-quiz-dots span.is-active { background: var(--th-hivis); }
.th-quiz-step { display: none; }
.th-quiz-step.is-active { display: block; }
.th-quiz-step h3 { font-size: 1.3rem; margin: 0 0 22px; }
.th-quiz-options { display: flex; flex-direction: column; gap: 10px; }
.th-quiz-opt {
  text-align: left;
  background: var(--th-ink);
  border: 1px solid var(--th-line);
  color: var(--th-paper);
  padding: 14px 18px;
  font-family: var(--th-font-body);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.th-quiz-opt:hover { border-color: var(--th-hivis); color: var(--th-hivis); }
.th-quiz-result { text-align: center; display: none; }
.th-quiz-result.is-active { display: block; }
.th-quiz-result h3 { font-size: 1.6rem; margin: 8px 0 12px; }
.th-quiz-result p { color: var(--th-paper-3); font-size: 0.92rem; margin: 0 0 26px; }
.th-quiz-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.th-quiz-restart {
  background: transparent;
  border: none;
  color: var(--th-stone);
  font-family: var(--th-font-mono);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 18px;
}
.th-quiz-restart:hover { color: var(--th-paper); }

/* Ohne JS ist das Quiz nicht bedienbar — dann Hinweis statt kaputter Box */
.th-quiz-box .th-quiz-nojs { display: block; color: var(--th-stone); font-size: 0.9rem; }
.js .th-quiz-box .th-quiz-nojs { display: none; }

@media (max-width: 600px) {
  .th-quiz-box { padding: 28px 20px; }
}


/* ---------------------------------------------------------------------------
   BEWERTUNGEN
   --------------------------------------------------------------------------- */

.th-rating-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--th-stone);
}
.th-rating-badge .th-stars { color: var(--th-hivis); letter-spacing: 2px; }
.th-rating-badge strong { color: var(--th-paper); font-family: var(--th-font-disp); }

.th-review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--th-line);
}
.th-review-card { background: var(--th-card-bg); padding: var(--th-card-pad) 28px; }
.th-review-card .th-stars {
  color: var(--th-hivis);
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 14px;
  display: block;
}
.th-review-card blockquote {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--th-paper-2);
  margin: 0 0 18px;
}
.th-review-card .th-who {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--th-line);
  padding-top: 14px;
}
.th-review-card .th-who-name { font-size: 0.85rem; color: var(--th-paper); }
.th-review-card .th-who-meta {
  font-family: var(--th-font-mono);
  font-size: 0.68rem;
  color: var(--th-stone);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/*
 * Überschrift links, Durchschnittsnote rechts auf derselben Höhe. Bei wenig
 * Platz rutscht die Note unter die Überschrift statt zu schrumpfen — eine
 * zusammengequetschte Note liest sich wie ein Fehler.
 */
.th-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}
.th-review-head h2 { margin: 0; }

.th-review-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 18px;
}
/*
 * Der Pflichthinweis nach § 5b Abs 3 UWG. Klein, aber nicht versteckt: Er muss
 * lesbar bleiben, deshalb keine Farbe unterhalb des Kontrastminimums und eine
 * Breitenbegrenzung, damit er nicht als eine sehr lange Zeile über den ganzen
 * Bildschirm läuft.
 */
.th-review-foot .th-hint {
  flex: 1 1 34ch;
  max-width: 88ch;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
}

.th-review-cta {
  flex: none;
  font-family: var(--th-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-hivis);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.th-review-cta:hover { color: var(--th-paper); }

@media (max-width: 860px) { .th-review-grid { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------------------
   ANKAUF-BANNER
   --------------------------------------------------------------------------- */

.th-tradein {
  margin: 0 var(--th-gutter) 80px;
  background: var(--th-graphite-2);
  border-left: 3px solid var(--th-hivis);
  padding: 36px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.th-tradein h3 { font-size: 1.3rem; margin: 0 0 8px; }
.th-tradein p { font-size: 0.9rem; color: var(--th-paper-3); margin: 0; max-width: 48ch; }

@media (max-width: 700px) {
  .th-tradein { margin-left: var(--th-gutter-mobile); margin-right: var(--th-gutter-mobile); padding: 28px 22px; }
}


/* ---------------------------------------------------------------------------
   EDITOR-INHALT INNERHALB EINES TEMPLATES
   ---------------------------------------------------------------------------
   Für Templates, die den Seiteninhalt zwischen ihre eigenen Abschnitte setzen
   (Verkauf, Kontakt, Werkstatt).

   Die Lesebreite liegt auf den TEXTBLÖCKEN, nicht auf dem Container. Läge sie
   auf dem Container, würden auch eingefügte Bausteine wie Bike-Finder oder
   Ankauf-Banner auf Textbreite gequetscht — die sollen aber die ganze Breite
   nutzen. Seitlichen Abstand gibt es hier keinen, den bringt das umgebende
   .th-section schon mit.
   --------------------------------------------------------------------------- */

.th-inline-content > *:not(section):not(.th-bento):not(.th-tradein):not(.th-panel) {
  max-width: 76ch;
}

/* Eingefügte Bausteine: eigenen Seitenabstand und Trennlinie zurücknehmen,
   beides ist durch das umgebende .th-section bereits vorhanden. */
.th-inline-content > .th-section {
  padding-left: 0;
  padding-right: 0;
  border-top: none;
  background: none;
}
.th-inline-content > .th-section:first-child { padding-top: 0; }
.th-inline-content > .th-tradein { margin-left: 0; margin-right: 0; }


/* ---------------------------------------------------------------------------
   ZWEISPALTIGER ABSCHNITT
   ---------------------------------------------------------------------------
   Für Inhalte, die nebeneinander gehören: Preise und häufige Fragen,
   Formular und Bewertungskriterien.

   align-items: start ist hier wichtig. Ohne das würden beide Spalten auf die
   Höhe der längeren gestreckt, und der kürzere Inhalt hinge in der Mitte.

   Unter 900 Pixeln wird gestapelt — zwei Spalten mit Formularfeldern sind auf
   dem Handy unbedienbar.
   --------------------------------------------------------------------------- */

.th-split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 60px;
  align-items: start;
}
.th-split--even { grid-template-columns: 1fr 1fr; }
.th-split--wide-right { grid-template-columns: 1fr 1.35fr; }

/*
 * Die Breitenbegrenzungen der Bausteine aufheben. Preisliste, FAQ und Panel
 * begrenzen sich sonst zusätzlich auf 780 bis 820 Pixel — in einer Spalte, die
 * schon schmaler ist, entstünde dadurch eine zweite, unbeabsichtigte
 * Einrückung.
 */
.th-split .th-price-list,
.th-split .th-faq,
.th-split .th-panel,
.th-split .th-note,
.th-split .th-crit-list,
.th-split .th-entry-content { max-width: none; }

/* Überschrift einer Spalte: gleiche Höhe wie ein th-section-head, damit die
   beiden Spalten oben auf einer Linie beginnen. */
.th-split-head {
  margin: 0 0 26px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

/*
 * Editor-Inhalt als Spalte: oben auf dieselbe Linie bringen.
 *
 * .th-entry-content h2 hat einen oberen Abstand von 40 Pixeln — richtig für eine
 * Überschrift mitten im Text, falsch für die erste in einer Spalte. Sie begann
 * dadurch 40 Pixel tiefer als die Überschrift der Nachbarspalte, und die beiden
 * standen sichtbar versetzt.
 *
 * Zusätzlich die Größe angleichen: Nebeneinander gehören die zwei Überschriften
 * zusammen und sollen gleich schwer wiegen. Im laufenden Text bleibt h2 kleiner,
 * dort ist sie eine Zwischenüberschrift und keine Spaltenüberschrift.
 */
.th-split .th-entry-content > *:first-child { margin-top: 0; }
.th-split .th-entry-content > h2:first-child {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 26px;
}

/*
 * Mehrere Blöcke untereinander in einer Spalte.
 *
 * Der Abstand sitzt ZWISCHEN den Blöcken (* + *), nicht an jedem Block. Das ist
 * der Unterschied, der zählt: Auf der Kontaktseite kann jeder der Blöcke
 * wegfallen — steht ein Baustein schon als Shortcode im Seiteninhalt, gibt das
 * Template ihn nicht zusätzlich aus. Mit einem Abstand nach oben an jedem Block
 * hätte der erste sichtbare je nach Kombination eine Lücke über sich oder eben
 * nicht, und der Kopf der rechten Spalte stünde nicht mehr auf einer Linie mit
 * dem der linken.
 */
.th-stack > * + * { margin-top: 44px; }

@media (max-width: 900px) {
  .th-split,
  .th-split--even,
  .th-split--wide-right {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}


/* ---------------------------------------------------------------------------
   SERVICE-SEITE: Badges und FAQ
   --------------------------------------------------------------------------- */

.th-badges { display: flex; flex-wrap: wrap; gap: 14px; }
.th-badge {
  border: 1px solid var(--th-line);
  padding: 10px 18px;
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--th-paper-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-badge svg { width: 16px; height: 16px; stroke: var(--th-hivis); fill: none; stroke-width: 1.8; flex: none; }

.th-faq { max-width: 820px; }
.th-faq-item { border-bottom: 1px solid var(--th-line); }
.th-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--th-paper);
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: 1rem;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.th-faq-q .th-faq-icon {
  color: var(--th-hivis);
  font-size: 1.2rem;
  flex: none;
  transition: transform 0.2s ease;
}
.th-faq-q[aria-expanded="true"] .th-faq-icon { transform: rotate(45deg); }
.th-faq-a { display: none; }
.th-faq-a.is-open { display: block; }
.th-faq-a p {
  font-size: 0.9rem;
  color: var(--th-paper-3);
  line-height: 1.6;
  padding: 0 0 20px;
  margin: 0;
  max-width: 62ch;
}
/* Aufzählungen in Antworten — für Abläufe und Checklisten. Steht ein Absatz
   davor, nimmt dessen Innenabstand nach unten zurück, sonst klafft eine Lücke
   zwischen Text und erstem Punkt. */
.th-faq-a p:not(:last-child) { padding-bottom: 10px; }
.th-faq-a ul {
  font-size: 0.9rem;
  color: var(--th-paper-3);
  line-height: 1.6;
  margin: 0;
  padding: 0 0 20px 20px;
  max-width: 62ch;
}
.th-faq-a li { margin-bottom: 8px; }
.th-faq-a li:last-child { margin-bottom: 0; }
/* Hervorhebungen im ersten Halbsatz — bei einem Ablauf ist das der Schritt
   selbst, der soll ins Auge fallen. */
.th-faq-a strong { color: var(--th-paper); }
/* Ohne JS alle Antworten offen, damit die Inhalte lesbar bleiben */
.js .th-faq-a:not(.is-open) { display: none; }
html:not(.js) .th-faq-a { display: block; }


/* ---------------------------------------------------------------------------
   BIKES-SEITE: Filter und Produktraster
   --------------------------------------------------------------------------- */

.th-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 40px; }
.th-filter-btn {
  border: 1px solid var(--th-line);
  background: transparent;
  color: var(--th-paper);
  border-radius: 22px;
  padding: 9px 18px;
  font-family: var(--th-font-body);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.th-filter-btn:hover { border-color: var(--th-hivis); }
.th-filter-btn.is-active {
  background: var(--th-hivis);
  border-color: var(--th-hivis);
  color: var(--th-on-accent);
  font-weight: 500;
}

.th-bike-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--th-line);
}
.th-bike-card { background: var(--th-card-bg); display: flex; flex-direction: column; }
.th-bike-card.is-hidden { display: none; }
.th-bike-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--th-graphite);
  display: block;
}
.th-bike-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-bike-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.th-bike-cat {
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--th-hivis);
  margin-bottom: 8px;
}
.th-bike-card h3 { font-size: 1.15rem; margin: 0 0 6px; }
.th-bike-card h3 a { color: inherit; text-decoration: none; }
.th-bike-card h3 a:hover { color: var(--th-hivis); }
.th-bike-desc { font-size: 0.85rem; color: var(--th-paper-3); margin: 0 0 16px; }
.th-bike-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.th-bike-price {
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: 1.05rem;
}
.th-bike-price del { color: var(--th-stone); font-weight: 400; font-size: 0.85rem; margin-right: 6px; }
.th-bike-price ins { text-decoration: none; }
.th-bike-link {
  font-size: 0.82rem;
  color: var(--th-paper);
  text-decoration: none;
  border-bottom: 1px solid var(--th-hivis);
  white-space: nowrap;
}
.th-bike-link:hover { color: var(--th-hivis); }

@media (max-width: 900px) { .th-bike-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .th-bike-grid { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------------------
   ANKAUF-SEITE: Prozess-Schritte und Kriterien
   --------------------------------------------------------------------------- */

.th-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--th-line);
}
.th-step { background: var(--th-graphite-2); padding: 32px; }
.th-step .th-step-num {
  font-family: var(--th-font-disp);
  font-weight: 700;
  color: var(--th-hivis);
  font-size: 1.6rem;
  margin-bottom: 12px;
  display: block;
}
.th-step h3 { font-size: 1.05rem; margin: 0 0 8px; }
.th-step p { font-size: 0.88rem; color: var(--th-paper-3); margin: 0; }

.th-crit-list { list-style: none; margin: 0; padding: 0; max-width: 660px; }
.th-crit-list li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--th-line);
  font-size: 0.92rem;
  color: var(--th-paper-2);
}
.th-crit-list svg {
  flex: none;
  width: 18px; height: 18px;
  stroke: var(--th-hivis); fill: none; stroke-width: 1.8;
  margin-top: 3px;
}

.th-panel {
  max-width: 760px;
  background: var(--th-card-bg);
  border: 1px solid var(--th-line);
  padding: 40px;
}
.th-panel h2 { font-size: 1.4rem; margin: 0 0 6px; }
.th-panel > p.th-hint { font-size: 0.85rem; color: var(--th-stone); margin: 0 0 26px; }

@media (max-width: 860px) { .th-steps { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .th-panel { padding: 28px 20px; } }


/* ---------------------------------------------------------------------------
   TOUREN / JOURNAL
   --------------------------------------------------------------------------- */

.th-featured {
  background: var(--th-card-bg);
  border: 1px solid var(--th-line);
  padding: 40px;
}
.th-featured h2 { font-size: 1.6rem; margin: 0 0 14px; }
.th-featured p { color: var(--th-paper-3); font-size: 0.95rem; max-width: 60ch; margin: 0 0 24px; line-height: 1.6; }
.th-featured-stats { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 22px; }
.th-featured-stats .th-num {
  display: block;
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--th-paper);
}
.th-featured-stats .th-lbl {
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--th-stone);
}
.th-elev-featured { width: 100%; max-width: 600px; display: block; }
.th-elev-featured path { fill: none; stroke: var(--th-rust); stroke-width: 2; }

.th-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--th-line);
}
.th-post-card { background: var(--th-card-bg); display: flex; flex-direction: column; }
.th-post-img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--th-graphite);
}
.th-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-post-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.th-post-cat {
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--th-hivis);
  margin-bottom: 8px;
}
.th-post-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.th-post-card h3 a { color: inherit; text-decoration: none; }
.th-post-card h3 a:hover { color: var(--th-hivis); }
.th-post-card p { font-size: 0.86rem; color: var(--th-paper-3); margin: 0 0 16px; }
.th-post-link {
  font-size: 0.82rem;
  color: var(--th-paper);
  text-decoration: none;
  border-bottom: 1px solid var(--th-hivis);
  align-self: flex-start;
  margin-top: auto;
}
.th-post-link:hover { color: var(--th-hivis); }

@media (max-width: 900px) { .th-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .th-post-grid { grid-template-columns: 1fr; }
  .th-featured { padding: 28px 20px; }
}


/* ---------------------------------------------------------------------------
   ÜBER UNS
   --------------------------------------------------------------------------- */

.th-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--th-line);
  margin: 0 var(--th-gutter);
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.th-about-stats > div { padding: 22px 24px 30px 0; border-right: 1px solid var(--th-line); }
.th-about-stats > div:last-child { border-right: none; }
.th-about-stats .th-num {
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  display: block;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  text-transform: none;
}
.th-about-stats .th-lbl { font-size: 0.66rem; color: var(--th-stone); }

.th-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--th-line); }

/* Wenn die Anzahl der Karten nicht feststeht: Spalten automatisch verteilen.
   Feste drei Spalten ergäben bei vier Karten drei plus eine einzelne darunter —
   das sieht nach Fehler aus, nicht nach Absicht. Auf der Fehlerseite hängt die
   Anzahl davon ab, welche Seiten es überhaupt gibt. */
.th-values--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.th-value-card { background: var(--th-card-bg); padding: var(--th-card-pad); }
.th-value-card h3 { font-size: 1.05rem; margin: 0 0 8px; }
.th-value-card p { font-size: 0.88rem; color: var(--th-paper-3); margin: 0; }

/* Dieselbe Karte als Link, etwa auf der Fehlerseite. Der Pfeil sagt, dass es
   weitergeht — Farbe allein wäre für Farbenblinde kein Hinweis (WCAG 1.4.1). */
.th-value-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.th-value-card--link h3::after { content: " \2192"; color: var(--th-hivis); }
.th-value-card--link:hover,
.th-value-card--link:focus-visible {
  background: var(--th-graphite);
  box-shadow: inset 0 0 0 1px rgba(200, 255, 61, 0.35);
}

/* Spalten automatisch verteilen: Wie viele Einträge es gibt, steht nicht fest.
   Bei fest vier Spalten hinterlässt eine Dreierbesetzung rechts ein Loch. */
.th-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.th-team-card { text-align: center; }

/* Eintrag ohne Foto: als Karte statt als Porträt. Sonst stünde der Text allein
   und mittig in einer großen leeren Fläche. */
.th-team-card--text {
  text-align: left;
  background: var(--th-graphite-2);
  padding: 26px 24px;
}
.th-team-card--text h3 { margin-top: 0; }
.th-team-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: 16px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.th-team-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.th-team-card h3 { font-size: 1rem; margin: 0 0 4px; }
.th-team-card p { font-size: 0.8rem; color: var(--th-stone); margin: 0; }

@media (max-width: 900px) {
  .th-team-grid { grid-template-columns: repeat(2, 1fr); }
  .th-values { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .th-about-stats { grid-template-columns: 1fr; margin: 0 var(--th-gutter-mobile); }
  .th-about-stats > div { border-right: none; border-bottom: 1px solid var(--th-line); padding: 18px 0; }
}


/* ---------------------------------------------------------------------------
   EINHEITLICHER SEITENKOPF
   ---------------------------------------------------------------------------
   Greift auf jeder Seite, auch auf einer gerade neu angelegten, und ebenso auf
   den WooCommerce-Seiten: Shop-Übersicht, Produktseite, Warenkorb, Kasse und
   Kundenkonto. Ohne Beitragsbild sorgt der Hintergrund dafür, dass der Kopf
   trotzdem nicht leer wirkt.

   HINTERGRUND WIE IM HERO
   Hier fehlte die Ringstruktur — der Kopf hatte nur den Farbverlauf, während
   der Hero auf Startseite, Werkstatt und Über uns zusätzlich die konzentrischen
   Ringe zeigt. Das war der sichtbare Unterschied zwischen „Über uns" und
   „Kasse": gleiche Farbe, aber eine Seite mit Struktur und eine ohne.

   Die Ringe liegen als erste Ebene über dem Verlauf, mit demselben Mittelpunkt
   (82 % / 20 %) und denselben Abständen wie im Hero. Sie kosten kein Bild und
   keinen Request — reines CSS.
   --------------------------------------------------------------------------- */

.th-page-header {
  position: relative;
  padding: 96px var(--th-gutter) 56px;
  background:
    repeating-radial-gradient(circle at 82% 20%,
      transparent 0, transparent 42px,
      rgba(236, 233, 222, 0.05) 43px, rgba(236, 233, 222, 0.05) 44px),
    radial-gradient(circle at 82% 20%, #232922 0%, var(--th-graphite) 60%),
    var(--th-graphite);
  border-bottom: 1px solid var(--th-line);
  overflow: hidden;
}

.th-page-header-inner { position: relative; z-index: 1; }

/*
 * Brotkrumen. Bewusst zurückhaltend: Sie sind Orientierung, kein Inhalt — wer
 * sie nicht braucht, soll nicht darüber stolpern.
 *
 * Die Liste bricht um, statt zu überlaufen: Ein Produktname wie
 * „Shop / E-Bikes / Trekking / Marke Modell 2026 XL" passt auf einem Handy nicht
 * in eine Zeile, und waagrechtes Scrollen der ganzen Seite wäre der schlechtere
 * Ausweg.
 */
.th-crumbs { margin: 0 0 18px; font-family: var(--th-font-mono); font-size: 0.72rem; }
.th-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.th-crumbs li { display: flex; align-items: center; }
.th-crumbs a { color: var(--th-stone); text-decoration: none; }
.th-crumbs a:hover { color: var(--th-hivis); }
.th-crumbs [aria-current="page"] { color: var(--th-paper-3); }
.th-crumbs-sep { color: var(--th-line); margin: 0 8px; }

/* ---------------------------------------------------------------------------
   REPARATUR-RECHNER
   ---------------------------------------------------------------------------
   Das Ergebnis unterscheidet sich in Farbe UND Wortlaut. Nur über die Farbe
   wäre die Empfehlung für Farbenblinde nicht erkennbar (WCAG 1.4.1) — deshalb
   steht die Aussage immer als Satz da, die Farbe ist die Zugabe.

   Und bewusst kein Rot bei „überlegen": Es ist keine Fehlermeldung, sondern ein
   Rat. Rot würde Alarm auslösen, wo Nachdenken gemeint ist.
   --------------------------------------------------------------------------- */

.th-repair { max-width: 720px; }
.th-repair h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 10px; }

.th-repair-list { border: none; margin: 0 0 22px; padding: 0; }
.th-repair-list legend {
  font-family: var(--th-font-mono);
  font-size: var(--th-label-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-stone);
  padding: 0;
  margin-bottom: 10px;
}
.th-repair-list label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--th-line);
  cursor: pointer;
  font-size: 0.92rem;
}
.th-repair-list label:hover { color: var(--th-paper); }
.th-repair-list input { flex: none; }
.th-repair-price {
  margin-left: auto;
  font-family: var(--th-font-mono);
  font-size: 0.8rem;
  color: var(--th-hivis);
  white-space: nowrap;
}

.th-repair-result {
  margin-top: 26px;
  padding: 22px 24px;
  background: var(--th-card-bg);
  border-left: 3px solid var(--th-hivis);
}
.th-repair-result--against { border-left-color: var(--th-rust); }

.th-repair-sum {
  font-family: var(--th-font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-stone);
  margin: 0 0 10px;
}
.th-repair-verdict {
  font-family: var(--th-font-disp);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--th-paper);
  margin: 0 0 14px;
}


/* ---------------------------------------------------------------------------
   SOFORTSCHÄTZUNG ANKAUF
   --------------------------------------------------------------------------- */

.th-estimate {
  border: 1px solid var(--th-line);
  border-left: 3px solid var(--th-hivis);
  padding: 26px 28px;
  margin-bottom: 44px;
  max-width: 720px;
}
.th-estimate h3 { font-size: 1.2rem; margin: 0 0 8px; }

.th-estimate-result {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--th-line);
}
/* Die Spanne groß, aber nicht in der Akzentfarbe: Sie ist eine Auskunft, kein
   Angebot — und ein leuchtender Preis liest sich wie eine Zusage. */
.th-estimate-range {
  display: block;
  font-family: var(--th-font-disp);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.1;
  color: var(--th-paper);
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .th-estimate { padding: 20px 20px; }
}


/* ---------------------------------------------------------------------------
   WERKSTATT-STATUS
   ---------------------------------------------------------------------------
   Der Zustand wird über Farbe UND Text unterschieden. Nur über die Farbe wäre er
   für Farbenblinde nicht erkennbar (WCAG 1.4.1) — deshalb steht der Stand immer
   auch als Wort da, und die Farbe ist die Zugabe.
   --------------------------------------------------------------------------- */

.th-job-status { max-width: 640px; }
.th-job-status h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 10px; }

/*
 * Kompakte Fassung für die Startseite — über die volle Inhaltsbreite.
 *
 * Dort ist die Abfrage ein Angebot am Rande und nicht das Thema der Seite. Der
 * Rahmen setzt sie ab, ohne sie hervorzuheben.
 *
 * WARUM ZWEI SPALTEN UND NICHT NUR BREITER
 * Ein Kasten über die ganze Seitenbreite mit einem 1700 Pixel breiten
 * Eingabefeld darin sieht nach einem Fehler aus. Nebeneinander wird dieselbe
 * Breite sinnvoll gefüllt: links wozu, rechts womit. Unter 900 Pixeln
 * untereinander, dort ist für zwei Spalten kein Platz.
 */
.th-job-status--compact {
  border: 1px solid var(--th-line);
  border-left: 3px solid var(--th-line);
  padding: 26px 30px;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 48px;
  align-items: center;
}
.th-job-status--compact h2 { font-size: 1.2rem; margin: 0 0 6px; }
.th-job-status--compact .th-hint { margin: 0; }
.th-job-status--compact form { margin: 0; }

@media (min-width: 900px) {
  /* 1.1fr links: Die Beschriftung „Auftragsnummer" über dem Feld braucht rechts
     etwas weniger Platz als der Text links. */
  .th-job-status--compact { grid-template-columns: 1.1fr 1fr; }

  /* Das Ergebnis erstreckt sich über beide Spalten — es gehört zu keiner davon
     und wäre in einer halben Breite unnötig gestaucht. */
  .th-job-status--compact .th-job-result,
  .th-job-status--compact .th-form-notice { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .th-job-status--compact { padding: 22px 20px; }
}

.th-job-result {
  margin-top: 26px;
  padding: 22px 24px;
  background: var(--th-card-bg);
  border-left: 3px solid var(--th-stone);
}
.th-job-result--working { border-left-color: var(--th-paper-3); }
.th-job-result--waiting { border-left-color: var(--th-rust); }
.th-job-result--done    { border-left-color: var(--th-hivis); }
.th-job-result--picked  { border-left-color: var(--th-line); }

.th-job-state {
  display: block;
  font-family: var(--th-font-mono);
  font-size: var(--th-label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-stone);
  margin-bottom: 10px;
}
.th-job-result--done .th-job-state { color: var(--th-hivis); }

.th-job-text {
  font-family: var(--th-font-disp);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--th-paper);
  margin: 0 0 12px;
}
.th-job-note {
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 1px solid var(--th-line);
  font-size: 0.92rem;
  color: var(--th-paper-2);
}
.th-job-result .th-btn { margin-top: 8px; }

/* Trefferliste der Suche für Seiten und Beiträge — Produkte stehen darüber im
   Raster. Trennlinien statt Kästen, damit die Liste nicht mit den Produktkarten
   um Aufmerksamkeit konkurriert. */
.th-crumbs-results { max-width: 76ch; }
.th-result { padding: 22px 0; border-bottom: 1px solid var(--th-line); }
.th-result:first-child { padding-top: 0; }
.th-result h3 { font-size: 1.1rem; margin: 0 0 6px; }
.th-result h3 a { color: var(--th-paper); text-decoration: none; }
.th-result h3 a:hover { color: var(--th-hivis); }
.th-result p { margin: 0; font-size: 0.9rem; color: var(--th-paper-3); line-height: 1.6; }

.th-page-header h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin: 0;
  max-width: 26ch;
}

.th-page-header .th-lead {
  margin: 18px 0 0;
  max-width: 56ch;
}

.th-page-meta {
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--th-stone);
  margin: 22px 0 0;
}

/* Mit Beitragsbild */
.th-page-header--media { background: var(--th-ink); padding-top: 130px; }

.th-page-header-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.th-page-header-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
/* Von links abdunkeln, weil dort der Text steht, und von unten, damit die
   Kante zum Inhalt nicht hart bricht. */
.th-page-header-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(15, 18, 16, 0.92) 0%,
      rgba(15, 18, 16, 0.78) 40%,
      rgba(15, 18, 16, 0.45) 100%),
    linear-gradient(to top, rgba(15, 18, 16, 0.9) 0%, transparent 60%);
}
.th-page-header--media h1 { text-shadow: 0 2px 20px rgba(15, 18, 16, 0.55); }
.th-page-header--media .th-lead { color: var(--th-paper); }

@media (max-width: 700px) {
  .th-page-header {
    padding-left: var(--th-gutter-mobile);
    padding-right: var(--th-gutter-mobile);
    padding-top: 64px;
  }
  .th-page-header--media { padding-top: 96px; }
  /* Hochkant gibt es keine ruhige linke Hälfte — flächig abdunkeln. */
  .th-page-header-media::after {
    background: linear-gradient(to top,
      rgba(15, 18, 16, 0.94) 0%,
      rgba(15, 18, 16, 0.8) 60%,
      rgba(15, 18, 16, 0.6) 100%);
  }
}


/* ---------------------------------------------------------------------------
   SEITENINHALT
   ---------------------------------------------------------------------------
   Drei Varianten:
     standard   Lesebreite 76 Zeichen — für normale Seiten
     legal      Lesebreite 70 Zeichen, größere Absatzabstände, nummerierte
                Abschnitte — für Rechtstexte, die man tatsächlich liest
     fullwidth  keine Begrenzung — siehe .th-page-content in style.css
   --------------------------------------------------------------------------- */

.th-page-body {
  padding: 64px var(--th-gutter) 90px;
}

/*
 * Lesebreite auf die TEXTBLÖCKE legen, nicht auf den Container.
 *
 * Lag die Begrenzung auf .th-entry-content selbst, wurden auch ganzbreite
 * Theme-Abschnitte eingeklemmt — eine per Shortcode eingefügte Preisliste
 * landete dann in einer halb so breiten Spalte, zusätzlich doppelt eingerückt,
 * weil der Abschnitt seinen eigenen Seitenabstand mitbringt.
 */
.th-page-body--standard .th-entry-content > *:not(section):not(.th-bento):not(.th-tradein):not(.th-panel):not(.th-hours-block) {
  max-width: 76ch;
}

.th-page-body--legal .th-entry-content { font-size: 1rem; }

.th-page-body--legal .th-entry-content > *:not(section):not(.th-bento):not(.th-tradein):not(.th-panel) {
  max-width: 70ch;
}

/* ---------------------------------------------------------------------------
   THEME-ABSCHNITTE INNERHALB VON EDITOR-INHALTEN
   ---------------------------------------------------------------------------
   Fügst du auf einer normalen Seite einen Baustein ein — Preisliste,
   Bike-Finder, Karten, Ankauf-Formular — bringt der seinen eigenen
   Seitenabstand und eine Trennlinie mit, weil er auch allein auf der
   Startseite stehen können muss. Innerhalb von .th-page-body ist dieser
   Abstand schon vorhanden. Hier wird er deshalb zurückgenommen.
   --------------------------------------------------------------------------- */

.th-page-body .th-section,
.th-page-body .th-hero {
  padding-left: 0;
  padding-right: 0;
  border-top: none;
  background: none;
  min-height: 0;
}

/* Erster Abschnitt schließt direkt an den Seitenkopf an, die folgenden
   bekommen Luft und eine Trennlinie. */
.th-page-body .th-entry-content > .th-section:first-child,
.th-page-body .th-entry-content > .th-hero:first-child { padding-top: 0; }

.th-page-body .th-entry-content > .th-section ~ .th-section {
  padding-top: 56px;
  border-top: 1px solid var(--th-line);
}

.th-page-body .th-section:last-child { padding-bottom: 0; }

/* Die Karten laufen im Seiteninhalt bis zum Seitenrand, nicht bis zum
   Bildschirmrand — der Rand kommt schon von .th-page-body. */
.th-page-body .th-bento { margin-top: 40px; }
.th-page-body .th-tradein { margin-left: 0; margin-right: 0; }

/* Das Quiz braucht innerhalb einer Seite keinen eigenen dunklen Hintergrund */
.th-page-body .th-section--ink { background: none; }
/* Rechtstexte sind lange Texte. Etwas mehr Zeilen- und Absatzabstand macht
   den Unterschied zwischen „lesbar" und „wird weggeklickt". */
.th-page-body--legal .th-entry-content p {
  line-height: 1.75;
  margin: 0 0 20px;
}
.th-page-body--legal .th-entry-content h2 {
  font-size: 1.35rem;
  margin: 46px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--th-line);
}
.th-page-body--legal .th-entry-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.th-page-body--legal .th-entry-content h3 { font-size: 1.1rem; margin: 32px 0 10px; }
.th-page-body--legal .th-entry-content ul,
.th-page-body--legal .th-entry-content ol { margin: 0 0 20px; padding-left: 24px; }
.th-page-body--legal .th-entry-content li { margin-bottom: 10px; line-height: 1.7; }
/* Anschriften und Kontaktblöcke in Rechtstexten hervorheben */
.th-page-body--legal .th-entry-content address {
  font-style: normal;
  padding: 18px 20px;
  border-left: 2px solid var(--th-line);
  margin: 0 0 24px;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .th-page-body {
    padding-left: var(--th-gutter-mobile);
    padding-right: var(--th-gutter-mobile);
    padding-top: 44px;
  }
}


/* ---------------------------------------------------------------------------
   QUERVERWEISE UNTER DEM INHALT
   --------------------------------------------------------------------------- */

.th-child-pages,
.th-legal-nav {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--th-line);
  max-width: 76ch;
}
.th-child-pages ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.th-child-pages a {
  display: inline-block;
  border: 1px solid var(--th-line);
  border-radius: 22px;
  padding: 9px 18px;
  font-size: 0.85rem;
  color: var(--th-paper);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.th-child-pages a:hover { border-color: var(--th-hivis); color: var(--th-hivis); }

.th-legal-nav p { margin: 0; font-size: 0.9rem; color: var(--th-stone); }
.th-legal-nav a { color: var(--th-paper); text-decoration: none; border-bottom: 1px solid var(--th-hivis); }
.th-legal-nav a:hover { color: var(--th-hivis); }


/* ---------------------------------------------------------------------------
   BEITRAG, SEITE, 404
   --------------------------------------------------------------------------- */

.th-entry { max-width: 760px; }
.th-entry h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 16px; }
.th-entry-meta {
  font-family: var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--th-stone);
  margin-bottom: 34px;
}
.th-entry-content { font-size: 1rem; line-height: 1.7; color: var(--th-paper-2); }
.th-entry-content h2 { font-size: 1.5rem; margin: 40px 0 14px; color: var(--th-paper); }
.th-entry-content h3 { font-size: 1.2rem; margin: 32px 0 12px; color: var(--th-paper); }
.th-entry-content p { margin: 0 0 18px; }
.th-entry-content ul, .th-entry-content ol { margin: 0 0 18px; padding-left: 22px; }
.th-entry-content li { margin-bottom: 8px; }
/* Buttons ausnehmen — sonst wird die Schrift grün auf grün und verschwindet.
   Grund: Dieser Selektor hat zwei Klassen, .th-btn--primary nur eine. Er würde
   dessen Schriftfarbe also überschreiben, obwohl er nur Textlinks meint. Ein
   Ankauf-Banner oder ein Termin-Button im Seiteninhalt wäre dann ein leerer
   grüner Kasten. */
.th-entry-content a:not(.th-btn) { color: var(--th-hivis); }
.th-entry-content img { margin: 24px 0; }
.th-entry-content blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--th-hivis);
  color: var(--th-paper);
}
.th-entry-content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.th-entry-content th, .th-entry-content td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--th-line);
  font-size: 0.9rem;
}
.th-entry-content code {
  font-family: var(--th-font-mono);
  font-size: 0.85em;
  background: var(--th-graphite-2);
  padding: 2px 6px;
}
.th-entry-content pre {
  background: var(--th-graphite-2);
  border: 1px solid var(--th-line);
  padding: 18px;
  overflow-x: auto;
}

.th-pagination { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 50px; }
.th-pagination .page-numbers {
  border: 1px solid var(--th-line);
  padding: 9px 16px;
  color: var(--th-paper);
  text-decoration: none;
  font-size: 0.85rem;
}
.th-pagination .page-numbers:hover { border-color: var(--th-hivis); color: var(--th-hivis); }
.th-pagination .page-numbers.current {
  background: var(--th-hivis);
  border-color: var(--th-hivis);
  color: var(--th-on-accent);
}