/* ==========================================================================
   The Zone Media, Seitentyp «hub» (Übersichtsseiten)
   Referenzseiten: /leistungen, /cases. Welle 2: /blog, /ressourcen.
   Wird nach /css/site.css geladen. Nur Tokens aus site.css, Präfix hub-.
   Wiederverwendet aus site.css: .page-glow, .eyebrow, .h2, .lead, .btn, .tlink,
   .ill*, .bar*, .stack, .surface, .factbar, .clients/.logo-wall, .faq*, .final*.

   Aufbau
     1  Hero (Glow kleiner, Breadcrumb, Beleg-Chips, Hero-Objekt)
     2  Hero-Objekte: Nachfrage-Sequenz (.hub-seq), Resultat-Karte (.hub-score)
     3  Sektionskopf, Notiz, Weiterlesen
     4  Grosse Panels (Leistungen, Werkzeuge): .hub-panel
     5  Vergleichstabelle: .hub-table
     6  Kacheln (Einstiege, Passung, Werkzeuge kompakt): .hub-tile
     7  Karten mit Titelbild (Cases, Blog): .hub-card
     8  Beleg-Karten auf Navy: .hub-proof
     9  Navy-Umfang, Eigenbeleg, Abschluss-Person
     10 Responsive
   ========================================================================== */


/* ==========================================================================
   1 Hero
   ========================================================================== */

/* Glow wie Startseite, aber kleiner und weiter rechts */
.hub-glow { height: 900px; }
.hub-glow .page-glow-orb { top: -420px; right: -560px; width: 1240px; height: 1080px; opacity: .85; }

.hub-hero { position: relative; }
.hub-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding-top: var(--tz-hero-top);
}
.hub-hero-grid--solo { grid-template-columns: minmax(0, 1fr); }
.hub-hero-copy { position: relative; z-index: 1; min-width: 0; }
.hub-hero-copy .eyebrow { margin-bottom: 20px; }
.hub-hero h1 {
  max-width: 16ch;
  font: 700 var(--tz-h1-display)/1.04 var(--tz-font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hub-hero h1 .accent { display: block; }
.hub-hero-lead { margin-top: 24px; max-width: 34em; }
.hub-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* Breadcrumb: Bauteil in site.css (Audit B2) */

/* Beleg-Chips unter dem Hero (Standards, keine Links) */
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hub-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 14px;
  background: var(--tz-paper); border: 1px solid var(--tz-line); border-radius: var(--tz-radius-pill);
  font: 500 14px/1.2 var(--tz-font-display); color: var(--tz-navy);
}
.hub-chips li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tz-orange); }

/* Hero-Objekt: weiss, gekippt wie das Suchobjekt */
.hub-scene { position: relative; perspective: 1600px; }
.hub-scene::before {
  content: ""; position: absolute; z-index: -1; left: -60px; bottom: -40px;
  width: 380px; height: 320px;
  border-radius: 46% 54% 58% 42% / 44% 40% 60% 56%;
  background: linear-gradient(135deg, var(--tz-g4-light), var(--tz-g1-orange));
  filter: blur(80px); opacity: .45; pointer-events: none;
}
.hub-object {
  position: relative;
  padding: 22px 24px 24px;
  background: var(--tz-paper);
  border-radius: var(--tz-radius-panel);
  box-shadow: var(--tz-shadow-blue), 0 2px 6px rgb(37 73 120 / 6%);
  transform: rotateY(-9deg) rotateX(4deg) rotateZ(-1.5deg);
  transform-origin: 30% 50%;
}
.hub-object-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.hub-object-kicker { display: block; font: 500 11px/1.3 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-muted); }
.hub-object-title { display: block; margin-top: 6px; font: 700 19px/1.25 var(--tz-font-display); letter-spacing: -0.01em; }
.hub-object-pill {
  flex: none; padding: 6px 12px;
  border: 1px solid var(--tz-line); border-radius: var(--tz-radius-pill);
  font: 500 11px/1.2 var(--tz-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tz-muted); white-space: nowrap;
}


/* ==========================================================================
   2 Hero-Objekte
   ========================================================================== */

/* Nachfrage-Sequenz (Leistungen, Ressourcen): Zahl, Suchbegriff, Balken im echten Verhältnis */
.hub-seq-list { display: grid; gap: 8px; }
.hub-seq-item { padding: 14px 16px; border: 1px solid var(--tz-line); border-radius: var(--tz-radius-compact); }
.hub-seq-item:first-child { background: var(--tz-peach-surface); border-color: var(--tz-peach-line); }
.hub-seq-top { display: flex; align-items: baseline; gap: 14px; }
.hub-seq-num { flex: none; font: 700 30px/1 var(--tz-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hub-seq-item:first-child .hub-seq-num { color: var(--tz-orange-ink); }
.hub-seq-term { min-width: 0; font: 500 12px/1.3 var(--tz-font-display); letter-spacing: .1em; text-transform: uppercase; }
.hub-seq-bar { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--tz-orange); }
.hub-seq-item:not(:first-child) .hub-seq-bar { background: var(--tz-blue-line); }
.hub-seq-unit { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--tz-muted); }
.hub-seq-arrow { display: block; text-align: center; font: 700 14px/1 var(--tz-font-display); color: var(--tz-muted); }
.hub-seq-source { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--tz-line); font-size: 12px; line-height: 1.45; color: var(--tz-muted); }

/* Resultat-Karte (Cases): ein echtes Resultat mit Logo */
.hub-score {
  position: relative; display: block;
  padding: 20px 20px 18px;
  background: var(--tz-blue-surface); border: 1px solid var(--tz-blue-line); border-radius: var(--tz-radius-compact);
  color: var(--tz-navy); text-decoration: none;
  transition: border-color var(--tz-dur-fast) var(--tz-ease), transform var(--tz-dur-base) var(--tz-ease);
}
.hub-score:hover { border-color: var(--tz-blue); transform: translateY(-2px); }
.hub-score-logo { width: 128px; }
.hub-score-name { display: block; margin-top: 16px; font: 500 12px/1.3 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-muted); }
.hub-score-num { display: block; margin-top: 6px; font: 700 clamp(56px, 5.4vw, 76px)/.95 var(--tz-font-display); letter-spacing: -0.045em; color: var(--tz-orange); }
.hub-score-num .cur { font-size: .42em; letter-spacing: -0.01em; margin-right: .1em; }
.hub-score-sub { display: block; margin-top: 8px; font: 500 18px/1.3 var(--tz-font-display); }
.hub-score-time { display: block; margin-top: 6px; font-size: 14px; color: var(--tz-muted); }
.hub-score-go {
  position: absolute; top: 18px; right: 18px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--tz-navy); color: var(--tz-stage-ink); font: 700 16px/1 var(--tz-font-display);
  transition: background-color var(--tz-dur-fast) var(--tz-ease), color var(--tz-dur-fast) var(--tz-ease);
}
.hub-score:hover .hub-score-go { background: var(--tz-orange); color: var(--tz-navy); }
.hub-object-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 14px; font-size: 13px; line-height: 1.4; color: var(--tz-muted); }
.hub-object-foot strong { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--tz-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tz-green); }
.hub-object-foot strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }


/* ==========================================================================
   3 Sektionskopf, Notiz, Weiterlesen
   ========================================================================== */

.hub-section { padding-top: var(--tz-section); }
.hub-section--tight { padding-top: var(--tz-section-tight); }
.hub-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.hub-head .h2 { margin-top: 16px; max-width: 20ch; }
.hub-head--solo { grid-template-columns: minmax(0, 1fr); }
.hub-head .lead strong { color: var(--tz-navy); }
.on-dark .hub-head .lead { color: var(--tz-stage-ink-muted); }
.on-dark .hub-head .lead strong { color: var(--tz-stage-ink); }
.on-dark .h2 { color: var(--tz-stage-ink); }

/* Notiz: kleines Label links, Text rechts (Rechnung, Abrechnung, Einordnung) */
.hub-note {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px 32px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--tz-line);
}
.hub-note-label { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); padding-top: 4px; }
.hub-note p { max-width: 34em; font-size: 16px; line-height: 1.6; color: var(--tz-muted); }
.on-dark .hub-note { border-top-color: var(--tz-stage-line); }
.on-dark .hub-note-label, .on-dark .hub-note p { color: var(--tz-stage-ink-muted); }

/* Leitfaden-Zeile */
.hub-guide {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  margin-top: 24px; padding: 22px 28px;
  border: 1px solid var(--tz-line); border-radius: var(--tz-radius-panel);
}
.hub-guide-title { font: 700 18px/1.3 var(--tz-font-display); color: var(--tz-navy); }
.hub-guide p:not([class]) { margin-top: 4px; font-size: 16px; color: var(--tz-muted); }

/* Weiterlesen */
.hub-readnext { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--tz-line); }
.hub-readnext-label { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.on-dark .hub-readnext { border-top-color: var(--tz-stage-line); }
.on-dark .hub-readnext-label { color: var(--tz-orange); }

/* Faktenleiste auf Weiss (site.css .factbar ist Stone) */
.hub-factbar--paper { background: var(--tz-paper); box-shadow: inset 0 0 0 1px var(--tz-line); }
.hub-factbar--peach { background: var(--tz-peach-surface); box-shadow: inset 0 0 0 1px var(--tz-peach-line); }
.hub-factbar--peach > div + div { border-left-color: var(--tz-peach-line); }
.factbar.hub-factbar--prices dt { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; }


/* ==========================================================================
   4 Grosse Panels (Leistungen je Mandat; Welle 2: Werkzeuge auf /ressourcen)
   ========================================================================== */

.hub-panels { display: grid; gap: 20px; }
.hub-panel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 80px);
  padding: clamp(32px, 4vw, 56px);
  border-radius: var(--tz-radius-surface);
  transition: box-shadow var(--tz-dur-base) var(--tz-ease);
}
.hub-panel--blue { background: var(--tz-blue-surface); }
.hub-panel--stone { background: var(--tz-stone); }
.hub-panel--peach { background: var(--tz-peach-surface); }
.hub-panel:hover { box-shadow: var(--tz-shadow-blue); }
.hub-panel:hover .ill-card { transform: rotate(-2deg) translateY(-2px); }
.hub-panel-main { min-width: 0; }
.hub-panel-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
.hub-panel-index { font: 700 clamp(28px, 2.6vw, 40px)/1 var(--tz-font-display); letter-spacing: -0.02em; color: var(--tz-orange); }
.hub-panel-label { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.hub-panel h3 { margin-top: 18px; max-width: 24ch; font: 700 clamp(28px, 2.8vw, 40px)/1.1 var(--tz-font-display); letter-spacing: -0.02em; text-wrap: balance; }
.hub-panel-text { margin-top: 16px; max-width: 34em; font-size: 17px; line-height: 1.65; color: var(--tz-muted); }
.hub-panel-aside { display: flex; flex-direction: column; justify-content: center; gap: 20px; min-width: 0; }
.hub-panel-aside .ill { align-self: flex-end; width: 220px; height: 144px; }

/* Häkchenliste (Leistungsrahmen, Passung) */
.hub-ticks { display: grid; gap: 10px; margin-top: 22px; }
.hub-ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); font-size: 16px; line-height: 1.55; }
.hub-ticks li::before { content: "→"; font: 700 16px/1.55 var(--tz-font-display); color: var(--tz-orange-ink); }
.hub-ticks--no li::before { content: "×"; color: var(--tz-muted); }
.hub-panel .hub-ticks li { padding-top: 10px; border-top: 1px solid rgb(2 10 24 / 8%); }

/* Preis-Karte im Panel */
.hub-price {
  margin-top: 0;
  padding: 24px;
  background: var(--tz-paper); border-radius: var(--tz-radius-panel);
  box-shadow: var(--tz-shadow-compact);
}
.hub-price-line strong { display: block; font: 700 clamp(36px, 3.4vw, 48px)/1 var(--tz-font-display); letter-spacing: -0.03em; }
.hub-price-line span { display: block; margin-top: 8px; font: 500 15px/1.35 var(--tz-font-display); color: var(--tz-muted); }
.hub-price .hub-link { margin-top: 18px; }

/* Link mit rundem Pfeil (wie Panel-Link der Startseite, ohne Ganzflächen-Klick) */
.hub-link {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  font: 700 15px/1.3 var(--tz-font-display); color: var(--tz-navy); text-decoration: none;
}
.hub-link .arrow {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tz-navy); color: var(--tz-stage-ink); font-size: 15px;
  transition: transform var(--tz-dur-base) var(--tz-ease), background-color var(--tz-dur-fast) var(--tz-ease), color var(--tz-dur-fast) var(--tz-ease);
}
.hub-link:hover { color: var(--tz-orange-ink); }
.hub-link:hover .arrow { transform: translateX(4px); background: var(--tz-orange); color: var(--tz-navy); }


/* ==========================================================================
   5 Vergleichstabelle (Preise exakt, Hervorhebung nur wie im Staging)
   ========================================================================== */

.hub-compare {
  padding: clamp(20px, 2.6vw, 36px);
  background: var(--tz-paper); border-radius: var(--tz-radius-panel);
  box-shadow: var(--tz-shadow-compact);
}
.hub-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hub-table caption { caption-side: top; padding-bottom: 20px; text-align: left; font-size: 15px; line-height: 1.5; color: var(--tz-muted); }
.hub-table th, .hub-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tz-line); font-size: 15px; line-height: 1.5; }
.hub-table thead th { padding-top: 20px; padding-bottom: 20px; vertical-align: bottom; border-bottom: 2px solid var(--tz-navy); }
.hub-table thead th:first-child, .hub-table tbody th {
  width: 19%;
  font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-muted);
}
.hub-table tbody tr:last-child th, .hub-table tbody tr:last-child td { border-bottom: 0; }
.hub-col-name { display: block; font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-muted); }
.hub-col-price { display: block; margin-top: 8px; font: 700 clamp(26px, 2.4vw, 34px)/1 var(--tz-font-display); letter-spacing: -0.02em; color: var(--tz-navy); }
.hub-col-price .cur { font-size: .5em; letter-spacing: 0; }
.hub-col-unit { display: block; margin-top: 8px; font: 500 14px/1.35 var(--tz-font-display); color: var(--tz-muted); }
/* Staging markiert Zone Start als belegten Einstieg (orange Linie oben), sonst nichts */
.hub-table .hub-col--proven { box-shadow: inset 0 4px 0 var(--tz-orange); }
.hub-compare-foot { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--tz-muted); }


/* ==========================================================================
   6 Kacheln (Einstiege, Passung; Welle 2: Werkzeug-Karten auf /ressourcen)
   ========================================================================== */

.hub-grid { display: grid; gap: 20px; }
.hub-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-grid + .hub-grid { margin-top: 20px; }
.hub-grid > * { min-width: 0; }

.hub-tile {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: var(--tz-radius-panel);
  background: var(--tz-paper); box-shadow: inset 0 0 0 1px var(--tz-line);
  transition: transform var(--tz-dur-base) var(--tz-ease), box-shadow var(--tz-dur-base) var(--tz-ease);
}
.hub-tile--blue { background: var(--tz-blue-surface); box-shadow: inset 0 0 0 1px var(--tz-blue-line); }
.hub-tile--stone { background: var(--tz-stone); box-shadow: none; }
.hub-tile--peach { background: var(--tz-gradient-peach-glow); box-shadow: var(--tz-shadow-peach), inset 0 0 0 1px var(--tz-peach-line); }
.hub-tile-label { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.hub-tile--blue .hub-tile-label { color: var(--tz-blue); }
.hub-tile--peach .hub-tile-label { color: var(--tz-orange-ink); }
.hub-tile h3 { margin-top: 12px; font: 700 clamp(21px, 1.9vw, 26px)/1.2 var(--tz-font-display); letter-spacing: -0.01em; text-wrap: balance; }
.hub-tile-price { display: block; margin-top: 14px; font: 700 clamp(30px, 2.8vw, 40px)/1 var(--tz-font-display); letter-spacing: -0.03em; }
.hub-tile p:not([class]) { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--tz-muted); }
.hub-tile-foot { margin-top: auto; padding-top: 20px; }
/* ganze Kachel klickbar, wenn .hub-tile--link gesetzt ist (Werkzeug-Karten) */
.hub-tile--link .hub-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hub-tile--link:hover { transform: translateY(-4px); }
.hub-tile--link:has(.hub-link:focus-visible) { outline: 3px solid var(--tz-orange); outline-offset: 4px; }
.hub-tile--link .hub-link:focus-visible { outline: none; }
.hub-tile .btn { align-self: flex-start; }


/* ==========================================================================
   7 Karten mit Titelbild (Cases; Welle 2: Blog-Artikel)
   Aufbau: .hub-card > .hub-card-media > img, .hub-card-body > .hub-card-top
   (.hub-card-logo | .hub-card-kicker, .hub-card-date), h3.hub-card-title,
   .hub-tags, .hub-card-text, .hub-card-num + .hub-card-numsub, .hub-card-meta,
   .hub-card-foot > .hub-link. Variante .hub-card--feature: Bild links, breit.
   ========================================================================== */

.hub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hub-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-cards > * { min-width: 0; display: flex; }
.hub-card {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--tz-radius-panel);
  background: var(--tz-paper); box-shadow: inset 0 0 0 1px var(--tz-line);
  transition: transform var(--tz-dur-base) var(--tz-ease), box-shadow var(--tz-dur-base) var(--tz-ease);
}
.hub-card--blue { background: var(--tz-blue-surface); box-shadow: none; }
.hub-card--stone { background: var(--tz-stone); box-shadow: none; }
.hub-card--peach { background: var(--tz-peach-surface); box-shadow: none; }
.hub-card:hover { transform: translateY(-4px); box-shadow: var(--tz-shadow-blue); }
.hub-card-media { display: block; margin: 10px 10px 0; overflow: hidden; border-radius: var(--tz-radius-compact); background: var(--tz-line); }
.hub-card-media img { width: 100%; aspect-ratio: 800 / 436; object-fit: cover; transition: transform var(--tz-dur-slow) var(--tz-ease); }
.hub-card:hover .hub-card-media img { transform: scale(1.03); }
.hub-card-body { flex: 1; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); }
.hub-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-height: 36px; }
.hub-card-logo { height: 30px; width: auto; max-width: 132px; object-fit: contain; object-position: left center; filter: brightness(0); }
.hub-card-logo--square { height: 40px; }
.hub-card-kicker { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-muted); }
.hub-card-top .hub-card-logo + .hub-card-kicker { padding-left: 16px; border-left: 1px solid var(--tz-line); }
.hub-card-date { font: 500 13px/1.4 var(--tz-font-display); color: var(--tz-muted); font-variant-numeric: tabular-nums; }
.hub-card-title { margin-top: 16px; font: 700 clamp(22px, 2vw, 28px)/1.2 var(--tz-font-display); letter-spacing: -0.015em; text-wrap: balance; }
.hub-card-text { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--tz-muted); }
.hub-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hub-tags li {
  padding: 5px 11px; border-radius: var(--tz-radius-pill);
  background: var(--tz-paper); box-shadow: inset 0 0 0 1px var(--tz-line);
  font: 500 12px/1.2 var(--tz-font-display); letter-spacing: .02em; color: var(--tz-navy);
}
.hub-card-num { margin-top: 22px; font: 700 clamp(44px, 4.4vw, 60px)/1 var(--tz-font-display); letter-spacing: -0.035em; color: var(--tz-orange); }
.hub-card-num .cur { font-size: .46em; letter-spacing: 0; margin-right: .14em; }
.hub-card-numsub { margin-top: 8px; font: 500 18px/1.3 var(--tz-font-display); }
.hub-card-meta { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgb(2 10 24 / 10%); }
.hub-card-meta dt { font: 500 11px/1.4 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-muted); }
.hub-card-meta dd { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.hub-card-foot { margin-top: auto; padding-top: 20px; }
.hub-card-byline { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--tz-muted); }
.hub-card-byline img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* Breite Variante (Blog: hervorgehobener Artikel). Standard wie normale Karte
   (Bild oben); horizontal geteilt erst per Container-Abfrage in Abschnitt 12,
   wenn die Textspalte mindestens 320 px Satzbreite bekommt. */


/* ==========================================================================
   8 Beleg-Karten auf Navy (Leistungen: drei Google-Ads-Cases)
   ========================================================================== */

.hub-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tz-stage-line); border-bottom: 1px solid var(--tz-stage-line); }
.hub-proof-item { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); }
.hub-proof-item:first-child { padding-left: 0; }
.hub-proof-item:last-child { padding-right: 0; }
.hub-proof-item + .hub-proof-item { border-left: 1px solid var(--tz-stage-line); }
.hub-proof-logo { height: 30px; width: auto; max-width: 132px; object-fit: contain; object-position: left center; filter: brightness(0) invert(.92); }
.hub-proof-logo--square { height: 40px; }
.hub-proof-kicker { display: block; margin-top: 20px; font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-stage-ink-muted); }
.hub-proof-item .hub-proof-num { margin-top: 12px; font: 700 clamp(44px, 4.4vw, 60px)/1 var(--tz-font-display); letter-spacing: -0.035em; color: var(--tz-orange); }
.hub-proof-item .hub-proof-num .cur { font-size: .46em; letter-spacing: 0; margin-right: .14em; }
.hub-proof-item h3 { margin-top: 8px; font: 500 18px/1.3 var(--tz-font-display); }
.hub-proof-item p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--tz-stage-ink-muted); }
.hub-proof-item .hub-proof-time { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--tz-stage-ink-muted); }
.hub-proof-item .tlink { display: inline-block; margin-top: auto; padding-top: 20px; }
.hub-proof-note { margin-top: 20px; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--tz-stage-ink-muted); }


/* ==========================================================================
   9 Navy-Umfang (Cases), Eigenbeleg, Abschluss-Person
   ========================================================================== */

.hub-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.hub-scope > div { padding-top: 22px; border-top: 1px solid var(--tz-stage-line); }
.hub-scope dt { display: flex; flex-direction: column; gap: 6px; }
.hub-scope dt a { align-self: flex-start; }
.hub-scope-kind { font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-orange); }
.hub-scope dt strong { font: 700 clamp(20px, 1.8vw, 24px)/1.25 var(--tz-font-display); color: var(--tz-stage-ink); }
.hub-scope dd { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--tz-stage-ink-muted); }
.hub-scope dd a, .hub-scope-note a { color: var(--tz-stage-ink); text-decoration: underline 1px var(--tz-stage-line); text-underline-offset: 4px; }
.hub-scope dd a:hover, .hub-scope-note a:hover { color: var(--tz-orange); text-decoration-color: var(--tz-orange); }
.hub-scope-note { max-width: calc(34em + 50px); margin-top: clamp(28px, 3vw, 40px); padding: 20px 24px; border: 1px solid var(--tz-stage-line); border-radius: var(--tz-radius-panel); background: var(--tz-stage-fill); font-size: 16px; line-height: 1.6; color: var(--tz-stage-ink-muted); }

/* Eigenbeleg (SEO thezone.ch): grosser Satz im Blue-Panel, Wortlaut unverändert */
.hub-self {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px 48px; align-items: end;
  margin-top: 24px;
  padding: clamp(28px, 3.6vw, 52px);
  background: var(--tz-blue-surface); border-radius: var(--tz-radius-panel);
  box-shadow: inset 0 0 0 1px var(--tz-blue-line);
}
.hub-self h3 { font: 700 clamp(24px, 2.4vw, 34px)/1.15 var(--tz-font-display); letter-spacing: -0.02em; }
.hub-self p { margin-top: 14px; max-width: 34em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--tz-muted); }
.hub-self p strong { color: var(--tz-navy); }
.hub-self .hub-link { justify-self: end; }

/* Abschluss: Verantwortlicher statt Teamfoto (in .final-panel) */
.hub-owner {
  position: relative; z-index: 1;
  align-self: center; justify-self: center;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px;
  margin: clamp(0px, 3vw, 48px);
  padding: 18px 26px 18px 18px;
  background: var(--tz-paper); border-radius: var(--tz-radius-pill);
  box-shadow: var(--tz-shadow-peach), inset 0 0 0 1px var(--tz-peach-line);
  color: var(--tz-navy); text-decoration: none;
  transition: transform var(--tz-dur-base) var(--tz-ease);
}
.hub-owner:hover { transform: translateY(-3px); }
.hub-owner img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: 55% 28%; box-shadow: 0 0 0 3px var(--tz-paper), 0 0 0 5px var(--tz-orange); }
.hub-owner strong { display: block; font: 700 19px/1.25 var(--tz-font-display); }
.hub-owner small { display: block; margin-top: 2px; font-size: 15px; color: var(--tz-muted); }
.hub-owner em { display: inline-block; margin-top: 8px; font: 700 15px/1.3 var(--tz-font-display); font-style: normal; text-decoration: underline 2px var(--tz-line); text-underline-offset: 6px; }
.hub-owner:hover em { color: var(--tz-orange-ink); text-decoration-color: var(--tz-orange); }

/* Logo-Wand mit Dateilogos (site.css .logo-wall erwartet Inline-SVG) */
.hub-logo-img { filter: brightness(0); }


/* ==========================================================================
   10 Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .hub-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .hub-panel { grid-template-columns: minmax(0, 1fr); }
  .hub-panel-aside .ill { display: none; }
}

@media (max-width: 1023px) {
  .hub-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-scene { width: 100%; max-width: 520px; }
  .hub-object { transform: none; }
  .hub-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-head { grid-template-columns: minmax(0, 1fr); }
  .hub-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .hub-proof { grid-template-columns: minmax(0, 1fr); }
  .hub-proof-item, .hub-proof-item:first-child, .hub-proof-item:last-child { padding: 28px 0; }
  .hub-proof-item + .hub-proof-item { border-left: 0; border-top: 1px solid var(--tz-stage-line); }
  .hub-scope { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hub-self { grid-template-columns: minmax(0, 1fr); }
  .hub-self .hub-link { justify-self: start; }
  .hub-owner { justify-self: start; margin: 0 clamp(22px, 4.4vw, 64px) clamp(28px, 4vw, 48px); }

  /* Vergleichstabelle als Kriterien-Blöcke */
  .hub-compare { padding: 20px; }
  .hub-table, .hub-table tbody, .hub-table tr { display: block; }
  .hub-table thead { display: block; }
  .hub-table thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hub-table thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hub-table thead th { display: block; width: auto; padding: 14px 12px; border: 1px solid var(--tz-line); border-radius: var(--tz-radius-compact); }
  .hub-table caption { display: block; }
  .hub-table tbody tr { padding: 16px 0; border-bottom: 1px solid var(--tz-line); }
  .hub-table tbody tr:last-child { border-bottom: 0; }
  .hub-table tbody th { display: block; width: auto; padding: 0 0 8px; border: 0; }
  .hub-table tbody td { display: block; padding: 6px 0; border: 0; }
  .hub-table tbody td::before { content: attr(data-label); display: block; font: 700 13px/1.5 var(--tz-font-display); color: var(--tz-navy); }
  .hub-col-price .cur { display: block; font-size: 12px; letter-spacing: .08em; }
  .hub-col-price { white-space: nowrap; }
}

@media (max-width: 900px) {
  .factbar.hub-factbar--prices dt { font-size: 24px; }
}

@media (max-width: 767px) {
  .hub-glow { height: 760px; }
  .hub-glow .page-glow-orb { top: -320px; right: -560px; width: 900px; height: 900px; }
  .hub-hero-grid { gap: 32px; }
  .hub-hero-lead { margin-top: 18px; }
  .hub-hero-actions { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 26px; }
  .hub-hero-actions .tlink { align-self: center; }
  .hub-chips { margin-top: 18px; }
  .hub-chips li { font-size: 13px; min-height: 32px; padding: 5px 12px; }
  .hub-object { padding: 16px 14px 16px; }
  .hub-object-head { margin-bottom: 12px; }
  .hub-seq-item { padding: 12px 14px; }
  .hub-seq-num { font-size: 26px; }
  .hub-seq-term { font-size: 11px; letter-spacing: .06em; }
  .hub-scene::before { width: 280px; height: 240px; left: -40px; }

  .hub-panel { padding: 24px 20px; border-radius: 24px; gap: 20px; }
  .hub-panel h3 { margin-top: 12px; font-size: 26px; }
  .hub-panel-text { font-size: 16px; line-height: 1.55; }
  .hub-ticks li { font-size: 15px; }
  .hub-price { padding: 20px; }
  .hub-price-line strong { font-size: 36px; }

  .hub-note { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hub-guide { padding: 18px 20px; }

  .hub-compare { padding: 14px; }
  .hub-table thead th { padding: 12px 8px; }
  .hub-col-name { font-size: 10px; letter-spacing: .08em; }
  .hub-col-price { font-size: 19px; letter-spacing: -0.01em; }
  .hub-col-price .cur { font-size: .5em; letter-spacing: 0; }
.hub-col-unit { font-size: 12px; }
  .hub-table tbody td { font-size: 15px; }

  .hub-cards, .hub-cards--3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hub-card:hover { transform: none; }
  .hub-card-body { padding: 20px; }
  .hub-card-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hub-card-num { font-size: 44px; }
  .hub-grid, .hub-grid--2, .hub-grid--3, .hub-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hub-grid + .hub-grid { margin-top: 12px; }
  .hub-tile { padding: 22px 20px; }
  .hub-tile .btn { align-self: stretch; }
  .hub-self { padding: 24px 20px; }

  .hub-owner { grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 0 22px 28px; padding: 12px 18px 12px 12px; border-radius: 24px; }
  .hub-owner img { width: 72px; height: 72px; }
  .hub-owner strong { font-size: 17px; }
}

@media (max-width: 359px) {
  .hub-table thead tr { gap: 4px; }
  .hub-table thead th { padding: 10px 6px; }
  .hub-col-price { font-size: 16px; }
  .hub-owner img { width: 56px; height: 56px; }
}


/* ==========================================================================
   11 Ergänzungen (Abstände, Navy-Varianten, aktiver Nav-Link)
   ========================================================================== */

/* Sektionsabstand gehört der oberen Kante der unteren Sektion (Audit B5):
   Sektionen tragen nur padding-top, Flächenstapel danach bekommen einen Abstand
   nach oben, das Abschluss-Panel nach der FAQ keinen zweiten. */
.hub-hero + .hub-section--flush { padding-top: var(--tz-section-tight); }
.hub-hero + .clients { padding-top: var(--tz-section); }
.hub-section + .stack { margin-top: var(--tz-section); }
.hub-final { padding-top: var(--tz-section-tight); }
.faq + .hub-final { padding-top: 0; }
.hub-head-link { justify-self: end; }
.hub-card-label { margin-top: 22px; font: 500 11px/1.4 var(--tz-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tz-muted); }
.hub-card-label + .hub-card-num { margin-top: 6px; }
.hub-tile h3.hub-tile-label { margin-top: 0; font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; }
.hub-tile .hub-ticks { margin-top: 16px; }
.hub-tile .hub-ticks li { font-size: 17px; }
.hub-compare-foot .tlink { font-size: 15px; white-space: normal; }

/* Navy-Varianten */
.on-dark .hub-link { color: var(--tz-stage-ink); }
.on-dark .hub-link .arrow { background: var(--tz-orange); color: var(--tz-navy); }
.on-dark .hub-link:hover { color: var(--tz-orange); }
.on-dark .hub-self { background: var(--tz-stage-fill); box-shadow: inset 0 0 0 1px var(--tz-stage-line); }
.on-dark .hub-self h3 { color: var(--tz-stage-ink); }
.on-dark .hub-self p { color: var(--tz-stage-ink-muted); }
.on-dark .hub-self p strong { color: var(--tz-orange); }
.hub-scope .tlink.hub-scope-kind { padding-block: 10px; font: 500 12px/1.4 var(--tz-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tz-orange); text-decoration-color: rgb(252 76 1 / 40%); }

/* Aktiver Nav-Link: Regel in site.css (Audit B6) */

@media (max-width: 1023px) {
  .hub-head-link { justify-self: start; }
}

/* Case-Karten: Logo ist die Überschrift (alt = Firmenname), Kicker darüber */
.hub-card-body > .hub-card-kicker:first-child { min-height: 20px; }
.hub-card-title--logo { margin-top: 14px; display: flex; align-items: center; min-height: 52px; }
.hub-card-title--logo .hub-card-logo { height: 38px; max-width: 170px; }
.hub-card-title--logo .hub-card-logo--square { height: 52px; }

/* Welle 2 (Blog): ganze Karte klickbar über den Titel-Link */
.hub-card-title a { color: inherit; text-decoration: none; }
.hub-card-title a:hover { color: var(--tz-orange-ink); }
.hub-card--link .hub-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hub-card--link:has(.hub-card-title a:focus-visible) { outline: 3px solid var(--tz-orange); outline-offset: 4px; }
.hub-card--link .hub-card-title a:focus-visible { outline: none; }


/* ==========================================================================
   12 Responsive-Feinschliff (Bericht _berichte/responsive-a.md, 2026-09-23)
   Raster 768 bis 1023 zweispaltig, darunter einspaltig. Karten im Raster
   gleich hoch, Inhalt als Spalte. Titel ohne automatische Trennung.
   ========================================================================== */

.hub-cards { align-items: stretch; }
.hub-card-title { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }

/* Featured-Karte (Blog): über die ganze Rasterbreite ab 768 px, darunter normale Karte */
.hub-cards > :has(> .hub-card--feature) { container-type: inline-size; container-name: hubfeature; }
@media (min-width: 768px) {
  .hub-cards > :has(> .hub-card--feature) { grid-column: 1 / -1; }
}
/* Querformat erst, wenn die Textspalte (5/12, mind. 400 px) nach Innenabstand
   mindestens 320 px Satzbreite hat: ab 900 px Kartenbreite */
@container hubfeature (min-width: 900px) {
  .hub-card--feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(400px, 5fr); }
  .hub-card--feature .hub-card-media { margin: 10px 0 10px 10px; }
  .hub-card--feature .hub-card-media img { height: 100%; aspect-ratio: auto; min-height: 340px; }
  .hub-card--feature .hub-card-body { justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
  .hub-card--feature .hub-card-title { font-size: clamp(26px, 2.4vw, 34px); }
}
/* Gestapelt, aber breit (768 bis 1023): flacheres Bild statt 375 px hohem Block */
@container hubfeature (min-width: 600px) and (max-width: 899.98px) {
  .hub-card--feature .hub-card-media img { aspect-ratio: 2 / 1; object-position: 50% 45%; }
  .hub-card--feature .hub-card-title { font-size: clamp(24px, 3.2vw, 30px); }
}

/* Kacheln zweispaltig ab 768 (vorher erst ab 901) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hub-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Case-Karten: Kennzahlen untereinander, sonst 159 px schmale Spalte */
  .hub-card-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Leistungen, Einstiege: die Kachel mit Button bekommt bei 1024 bis 1279
   eine eigene Zeile, sonst bricht «30-Minuten-Fit-Call buchen» zweizeilig */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hub-grid--3:has(> .hub-tile .btn) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-grid--3 > .hub-tile:has(.btn) { grid-column: 1 / -1; }
}

/* Touch-Ziele: Umfang-Links auf /cases («SEO», «GEO») */
.hub-scope .tlink.hub-scope-kind { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 0; }

/* Lange zusammengesetzte Wörter in Panel-Titeln (z. B. «Google-Sichtbarkeit») */
.hub-panel h3, .hub-tile h3 { overflow-wrap: break-word; hyphens: manual; }

/* Werkzeug-Buttons auf /ressourcen: bis 767 px bricht eine lange Beschriftung
   zweizeilig um, Grundform bleibt (Audit C1, Regel in site.css) */

@media (max-width: 359px) {
  .hub-panel .btn { font-size: 13px; line-height: 1.2; }
  .hub-panel h3 { font-size: 23px; }
  .hub-hero-actions .btn, .hub-tile .btn { padding-inline: 14px; font-size: 13px; letter-spacing: 0; line-height: 1.2; }
}