.elementor-kit-6{--e-global-color-primary:#1D1816;--e-global-color-secondary:#2A221F;--e-global-color-text:#5C544E;--e-global-color-accent:#D31313;--e-global-color-tope-paper:#FBFAF6;--e-global-color-tope-surface:#F6F3EE;--e-global-color-tope-line:#E5E0DA;--e-global-color-tope-line-2:#F0ECE6;--e-global-color-tope-dim:#9F968F;--e-global-color-tope-red-ink:#A5251C;--e-global-typography-primary-font-family:"Geist";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.08em;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-family:"Geist";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Geist";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.55em;--e-global-typography-accent-font-family:"Geist Mono";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.12em;background-color:#FBFAF6;color:#2A221F;font-family:"Geist", Sans-serif;font-size:16px;font-weight:400;line-height:1.55em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#1D1816;font-family:"Geist", Sans-serif;font-size:15px;font-weight:500;color:#FBFAF6;border-radius:2px 2px 2px 2px;padding:14px 20px 14px 20px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#D31313;color:#FBFAF6;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#1D1816;}.elementor-kit-6 a:hover{color:#D31313;}.elementor-kit-6 h1{color:#1D1816;font-family:"Geist", Sans-serif;font-size:48px;font-weight:600;line-height:1.1em;letter-spacing:-0.025em;}.elementor-kit-6 h2{color:#1D1816;font-family:"Geist", Sans-serif;font-size:36px;font-weight:600;line-height:1.1em;letter-spacing:-0.025em;}.elementor-kit-6 h3{color:#1D1816;font-family:"Geist", Sans-serif;font-size:24px;font-weight:600;line-height:1.1em;letter-spacing:-0.025em;}.elementor-kit-6 h4{color:#1D1816;font-family:"Geist", Sans-serif;font-size:20px;font-weight:600;line-height:1.1em;letter-spacing:-0.025em;}.elementor-kit-6 h5{color:#1D1816;font-family:"Geist", Sans-serif;font-size:18px;font-weight:600;line-height:1.1em;letter-spacing:-0.025em;}.elementor-kit-6 h6{color:#1D1816;font-family:"Geist", Sans-serif;font-size:14px;font-weight:600;line-height:1.1em;letter-spacing:-0.025em;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:"Geist", Sans-serif;color:#2A221F;background-color:#FBFAF6;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 h1{font-size:32px;}.elementor-kit-6 h2{font-size:26px;}.elementor-kit-6 h3{font-size:22px;}.elementor-kit-6 h4{font-size:18px;}.elementor-kit-6 h5{font-size:16px;}.elementor-kit-6 h6{font-size:13px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

/* ===========================================================================
   TOP effektiv Blog — Swiss Editorial design tokens & components.
   Mirrors top-effektiv.com (top-effektiv-site/src/input.css). Self-contained,
   no Tailwind. Inject via Elementor → Site Settings → Custom CSS.
   =========================================================================== */

:root {
  /* Neutrals — barely tinted, not cold, not cream. */
  --tope-paper:   oklch(0.988 0.004 50);
  --tope-surface: oklch(0.975 0.006 50);
  --tope-line:    oklch(0.905 0.008 40);
  --tope-line-2:  oklch(0.948 0.005 40);
  --tope-dim:     oklch(0.670 0.010 35);
  --tope-mid:     oklch(0.400 0.012 30);
  --tope-ink:     oklch(0.180 0.012 28);
  --tope-ink-1:   oklch(0.130 0.010 25);

  --tope-red:     #d31313;
  --tope-red-ink: oklch(0.42 0.18 25);

  --tope-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --tope-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --tope-radius-xs: 2px;
  --tope-radius-sm: 4px;
}

/* ===========================================================================
   Base — typographic foundation
   =========================================================================== */
html { scroll-behavior: smooth; }

body {
  background: var(--tope-paper);
  color: var(--tope-ink);
  font-family: var(--tope-font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "calt", "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tope-font-sans);
  color: var(--tope-ink-1);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

p, li { color: var(--tope-mid); }

a { color: inherit; text-decoration: none; }

code, kbd, samp, .mono {
  font-family: var(--tope-font-mono);
  font-feature-settings: "zero", "ss01";
}

::selection { background: var(--tope-ink-1); color: var(--tope-paper); }

.tnum {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Layout primitives
   =========================================================================== */
.tope-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1280px;
}
@media (min-width: 768px) {
  .tope-container { padding-left: 40px; padding-right: 40px; }
}

.tope-container-edit {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 720px;
}
@media (min-width: 768px) {
  .tope-container-edit { padding-left: 40px; padding-right: 40px; }
}

.tope-section { padding-block: 56px; }
@media (min-width: 768px) {
  .tope-section { padding-block: 88px; }
}

.tope-hairline { border-top: 1px solid var(--tope-line); }

/* ===========================================================================
   Typography components
   =========================================================================== */
.tope-h-display {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
  color: var(--tope-ink-1);
}

.tope-h-section {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
  color: var(--tope-ink-1);
}

.tope-lead {
  font-size: clamp(1.125rem, 1.3vw, 1.375rem);
  line-height: 1.5;
  color: var(--tope-mid);
  max-width: 60ch;
}

.tope-eyebrow {
  font-family: var(--tope-font-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tope-dim);
}
.tope-eyebrow-dot::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--tope-red);
  margin-right: 10px;
  vertical-align: 2px;
  border-radius: 50%;
}

/* ===========================================================================
   Buttons
   Elementor's kit sets a low-specificity global anchor color
   (`.elementor-kit-6 a { color }`, specificity 0,1,1). Our component .elementor-kit-6s
   need to match or exceed that. Using `a.tope-btn--primary` (0,1,1) plus source
   order wins; bare `.tope-btn--primary` (0,1,0) would lose, leaving dark text
   on a dark button (invisible).
   =========================================================================== */
.tope-btn,
a.tope-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-family: var(--tope-font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.003em;
  border-radius: var(--tope-radius-xs);
  transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out, transform 160ms ease-out;
  cursor: pointer;
  border: 1px solid transparent;
}
a.tope-btn--primary,
.tope-btn--primary {
  background: var(--tope-ink-1);
  color: var(--tope-paper);
}
a.tope-btn--primary:hover,
.tope-btn--primary:hover {
  background: var(--tope-red);
  color: var(--tope-paper);
}
a.tope-btn--ghost,
.tope-btn--ghost {
  background: transparent;
  color: var(--tope-ink-1);
  border-color: var(--tope-line);
}
a.tope-btn--ghost:hover,
.tope-btn--ghost:hover { border-color: var(--tope-ink); }
.tope-btn__arrow {
  font-family: var(--tope-font-mono);
  font-weight: 400;
  display: inline-block;
  transition: transform 160ms ease-out;
}
.tope-btn:hover .tope-btn__arrow { transform: translateX(3px); }

/* Underline link — inherit parent text color, ink-1 on hover (not Elementor red)  */
a.tope-link-underline,
.tope-link-underline {
  position: relative;
  display: inline-block;
  color: inherit;
  transition: color 140ms ease-out;
}
a.tope-link-underline:hover,
.tope-link-underline:hover {
  color: var(--tope-ink-1);
}
.tope-link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease-out;
}
.tope-link-underline:hover::after { transform: scaleX(1); }

/* ===========================================================================
   Header / Footer — used inside Elementor templates.
   Elementor 4 doesn't honor `_css_classes` on containers, so the outer
   wrapper styling targets `[data-elementor-type="header"] > .e-con` (Elementor
   injects this `data-elementor-type` attribute on every Theme Builder template
   wrapper). The `.tope-header*` classes still apply when used in plain HTML.
   =========================================================================== */
[data-elementor-type="header"] > .e-con,
.tope-header {
  border-bottom: 1px solid var(--tope-line);
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--tope-paper) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tope-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
  width: 100%;
}

/* ----- Mobile hamburger + overlay (active <1024px) ----- */
/* `button.foo` (0,1,1) bumps specificity past Elementor's
   `.elementor-kit-6 button` (0,1,1) — equal spec, source order wins.
   Without this the hamburger gets the kit's dark fill + red hover state. */
button.tope-header__hamburger,
.tope-header__hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--tope-mid);
  border-radius: var(--tope-radius-xs);
  color: var(--tope-ink-1);
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 60;
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
button.tope-header__hamburger:hover,
.tope-header__hamburger:hover,
button.tope-header__hamburger:focus,
.tope-header__hamburger:focus,
button.tope-header__hamburger:active,
.tope-header__hamburger:active {
  background: var(--tope-surface);
  border-color: var(--tope-ink-1);
  color: var(--tope-ink-1);
}
.tope-header__hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--tope-ink-1);
  transition: transform 220ms ease-out, opacity 160ms ease-out;
  transform-origin: center;
}
.tope-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.tope-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.tope-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}
@media (min-width: 1024px) {
  button.tope-header__hamburger,
  .tope-header__hamburger { display: none; }
}

/* Hide desktop CTA on mobile (it's replicated inside the overlay).
   `a.tope-header__cta` bumps specificity (0,1,1) to beat `a.tope-btn`
   from the button reset, which would otherwise force display: inline-flex. */
@media (max-width: 1023.98px) {
  a.tope-header__cta,
  .tope-header__cta { display: none !important; }
}

.tope-header__menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--tope-paper);
  z-index: 55;
  padding: 88px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}

/* Close X in top-right of overlay — matches hamburger styling for visual rhyme */
button.tope-mobile-menu__close,
.tope-mobile-menu__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tope-mid);
  border-radius: var(--tope-radius-xs);
  color: var(--tope-ink-1);
  cursor: pointer;
  padding: 0;
  z-index: 60;
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
button.tope-mobile-menu__close:hover,
.tope-mobile-menu__close:hover,
button.tope-mobile-menu__close:focus,
.tope-mobile-menu__close:focus,
button.tope-mobile-menu__close:active,
.tope-mobile-menu__close:active {
  background: var(--tope-surface);
  border-color: var(--tope-ink-1);
  color: var(--tope-ink-1);
}
.tope-mobile-menu__close svg { display: block; }
.tope-header__menu-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (min-width: 1024px) {
  .tope-header__menu-overlay { display: none; }
}

.tope-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--tope-line);
}
.tope-mobile-nav a,
a.tope-mobile-nav-link {
  font-family: var(--tope-font-sans);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--tope-ink-1);
  text-decoration: none;
  transition: color 140ms ease-out;
}
.tope-mobile-nav a:hover { color: var(--tope-red); }

.tope-mobile-cta,
a.tope-mobile-cta {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--tope-line);
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--tope-ink-1);
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}
a.tope-mobile-cta:hover {
  color: var(--tope-red);
  background: transparent;
}

body.tope-menu-open {
  overflow: hidden;
}
.tope-header__nav {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
@media (min-width: 1024px) {
  .tope-header__nav { display: flex; }
}
a.tope-header__link,
.tope-header__link {
  font-weight: 500;
  color: var(--tope-mid);
  transition: color 140ms ease-out;
}
a.tope-header__link:hover,
.tope-header__link:hover { color: var(--tope-ink-1); }
.tope-header__logo img {
  height: 20px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .tope-header__logo img { height: 24px; }
}

[data-elementor-type="footer"] > .e-con,
.tope-footer {
  border-top: 1px solid var(--tope-line);
  background: var(--tope-paper);
}
.tope-footer__inner {
  padding-block: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.tope-footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Specificity bump (`img.foo` = 0,1,1) to beat Elementor's `.elementor img`
   rule that hard-sets height:auto on every image inside an Elementor scope */
img.tope-footer__logo,
.tope-footer__logo {
  height: 20px;
  width: auto;
  opacity: 0.8;
}
.tope-footer__copy {
  font-size: 14px;
  color: var(--tope-dim);
  font-feature-settings: "tnum", "lnum";
}
.tope-footer__nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  row-gap: 8px;
  font-size: 14px;
  color: var(--tope-mid);
}

/* ===========================================================================
   Single Post — Pure Editorial layout (720px column)
   =========================================================================== */
.tope-post {
  padding-block: 56px;
}
@media (min-width: 768px) {
  .tope-post { padding-block: 96px; }
}
.tope-post__hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--tope-surface);
  border: 1px solid var(--tope-line);
  overflow: hidden;
  margin-bottom: 40px;
}
.tope-post__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tope-post__title {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--tope-ink-1);
  text-wrap: balance;
  margin-top: 24px;
}
.tope-post__meta {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--tope-line);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--tope-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tope-dim);
}
.tope-post__meta strong { color: var(--tope-ink); font-weight: 500; }

.tope-prose {
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--tope-ink);
}
.tope-prose > * + * { margin-top: 1.2em; }
.tope-prose p { color: var(--tope-ink); max-width: none; }
.tope-prose h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-top: 2em;
  color: var(--tope-ink-1);
}
.tope-prose h3 {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin-top: 1.8em;
  color: var(--tope-ink-1);
}
.tope-prose strong { color: var(--tope-ink-1); font-weight: 600; }
.tope-prose em { font-style: italic; }
.tope-prose a {
  color: var(--tope-ink-1);
  border-bottom: 1px solid var(--tope-line);
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
.tope-prose a:hover { color: var(--tope-red); border-bottom-color: var(--tope-red); }
.tope-prose ul, .tope-prose ol {
  padding-left: 1.4em;
}
.tope-prose ul { list-style-type: square; }
.tope-prose ol { list-style-type: decimal; }
.tope-prose li { color: var(--tope-ink); }
.tope-prose li + li { margin-top: 0.5em; }
.tope-prose blockquote {
  border-left: 2px solid var(--tope-red);
  padding-left: 24px;
  font-size: clamp(1.125rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--tope-ink-1);
  font-weight: 500;
  margin-block: 2em;
}
.tope-prose img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--tope-line);
}
.tope-prose figure {
  margin-block: 2.5em;
}
.tope-prose figure img { margin: 0; }
.tope-prose figcaption {
  margin-top: 12px;
  font-family: var(--tope-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tope-dim);
  text-align: left;
}
.tope-prose code {
  background: var(--tope-surface);
  padding: 2px 6px;
  font-size: 0.92em;
  border-radius: var(--tope-radius-xs);
  color: var(--tope-ink-1);
}
.tope-prose pre {
  background: var(--tope-surface);
  border: 1px solid var(--tope-line);
  padding: 20px;
  overflow-x: auto;
  font-size: 14px;
}
.tope-prose hr {
  border: 0;
  border-top: 1px solid var(--tope-line);
  margin-block: 3em;
}

/* End-of-post CTA */
.tope-post__cta {
  margin-top: 64px;
  padding: 40px;
  background: var(--tope-surface);
  border: 1px solid var(--tope-line);
}
.tope-post__cta-eyebrow {
  font-family: var(--tope-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tope-red);
  margin-bottom: 12px;
}
.tope-post__cta-title {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--tope-ink-1);
  margin-bottom: 12px;
}
.tope-post__cta-body { color: var(--tope-mid); margin-bottom: 24px; }

/* ===========================================================================
   Archive — post grid for blog index / categories
   =========================================================================== */
.tope-archive { padding-block: 56px; }
@media (min-width: 768px) {
  .tope-archive { padding-block: 88px; }
}
/* No internal padding/border/margin — the Elementor flex-gap (56px) on the
   archive container provides uniform spacing between header text, newsletter
   block, and post grid. */
.tope-archive__header {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
.tope-archive__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .tope-archive__grid { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }
}
@media (min-width: 1024px) {
  .tope-archive__grid { grid-template-columns: repeat(3, 1fr); }
}

.tope-card { display: flex; flex-direction: column; }
.tope-card__cover {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--tope-surface);
  border: 1px solid var(--tope-line);
  overflow: hidden;
  transition: border-color 180ms ease-out;
}
.tope-card:hover .tope-card__cover { border-color: var(--tope-ink-1); }
.tope-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 280ms ease-out;
}
.tope-card:hover .tope-card__cover img { transform: scale(1.02); }
.tope-card__meta {
  margin-top: 16px;
  font-family: var(--tope-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tope-dim);
  display: flex;
  gap: 14px;
}
.tope-card__title {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--tope-ink-1);
  text-wrap: balance;
}
.tope-card__excerpt {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tope-mid);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tope-card__arrow {
  margin-top: 16px;
  font-family: var(--tope-font-mono);
  font-size: 12px;
  color: var(--tope-dim);
  transition: color 180ms ease-out;
}
.tope-card:hover .tope-card__arrow { color: var(--tope-red); }

/* ===========================================================================
   Newsletter block — base variant (used in-content) + --hero variant for the
   archive top, which carries the blog's brand identity (eyebrow + H1).
   =========================================================================== */
.tope-newsletter {
  background: var(--tope-surface);
  border: 1px solid var(--tope-line);
  padding: 48px 32px;
}
@media (min-width: 768px) {
  .tope-newsletter { padding: 56px 48px; }
}
.tope-newsletter--hero {
  /* More vertical breathing room — this is the page hero */
  padding: 56px 32px;
}
@media (min-width: 768px) {
  .tope-newsletter--hero { padding: 80px 56px; }
}
.tope-newsletter__inner {
  max-width: 640px;
  margin: 0 auto;
}
.tope-newsletter--hero .tope-newsletter__inner {
  max-width: 760px;
}
.tope-newsletter__title {
  font-family: var(--tope-font-sans);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--tope-ink-1);
  margin-top: 20px;
  text-wrap: balance;
}
.tope-newsletter__title--hero {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-top: 24px;
}
.tope-newsletter__lead {
  margin-top: 16px;
  color: var(--tope-mid);
  font-size: 16px;
  line-height: 1.55;
  max-width: 56ch;
}
.tope-newsletter__form {
  margin-top: 28px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
input.tope-newsletter__input,
.tope-newsletter__input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 16px;
  font-family: var(--tope-font-sans);
  font-size: 15px;
  background: var(--tope-paper);
  border: 1px solid var(--tope-line);
  border-radius: var(--tope-radius-xs);
  color: var(--tope-ink);
  transition: border-color 140ms ease-out;
}
input.tope-newsletter__input:focus,
.tope-newsletter__input:focus {
  outline: none;
  border-color: var(--tope-ink-1);
}
.tope-newsletter__trust {
  margin-top: 16px;
  font-family: var(--tope-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tope-dim);
}

/* ===========================================================================
   Content filter — section heading + search + clickable category tags.
   Sits between the newsletter hero and the post grid.
   =========================================================================== */
.tope-filter {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.tope-filter__head { display: flex; flex-direction: column; gap: 16px; }
.tope-filter__title { margin: 0; }

.tope-filter__search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
input.tope-filter__search-input,
.tope-filter__search-input {
  flex: 1 1 320px;
  min-width: 0;
  padding: 13px 16px;
  font-family: var(--tope-font-sans);
  font-size: 15px;
  background: var(--tope-paper);
  border: 1px solid var(--tope-line);
  border-radius: var(--tope-radius-xs);
  color: var(--tope-ink);
  transition: border-color 140ms ease-out;
}
input.tope-filter__search-input:focus,
.tope-filter__search-input:focus {
  outline: none;
  border-color: var(--tope-ink-1);
}
button.tope-filter__search-btn,
.tope-filter__search-btn { flex-shrink: 0; }

.tope-filter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
a.tope-filter__tag,
.tope-filter__tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--tope-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tope-mid);
  background: var(--tope-paper);
  border: 1px solid var(--tope-line);
  border-radius: var(--tope-radius-xs);
  text-decoration: none;
  transition: border-color 140ms ease-out, color 140ms ease-out, background 140ms ease-out;
}
a.tope-filter__tag:hover,
.tope-filter__tag:hover {
  border-color: var(--tope-ink-1);
  color: var(--tope-ink-1);
}
a.tope-filter__tag.is-active,
.tope-filter__tag.is-active {
  background: var(--tope-ink-1);
  color: var(--tope-paper);
  border-color: var(--tope-ink-1);
}

/* ===========================================================================
   Sticky bottom CTA bar — appears on single posts after ~80vh scroll.
   Dark ink-1 background for contrast against the editorial column.
   =========================================================================== */
.tope-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--tope-ink-1);
  color: var(--tope-paper);
  border-top: 1px solid var(--tope-line);
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16);
}
.tope-sticky-cta[data-state="visible"] {
  transform: translateY(0);
}
.tope-sticky-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 56px 16px 24px;  /* extra right for close button */
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}
@media (min-width: 768px) {
  .tope-sticky-cta__inner { padding: 18px 64px 18px 40px; gap: 32px; }
}
.tope-sticky-cta__copy {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}
.tope-sticky-cta__copy strong {
  display: block;
  color: var(--tope-paper);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tope-sticky-cta__copy span {
  color: oklch(0.78 0.012 35);  /* lighter gray on dark bg */
}
.tope-sticky-cta__form {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
input.tope-sticky-cta__input,
.tope-sticky-cta__input {
  padding: 10px 14px;
  font-family: var(--tope-font-sans);
  font-size: 14px;
  background: var(--tope-paper);
  border: 1px solid transparent;
  border-radius: var(--tope-radius-xs);
  color: var(--tope-ink);
  width: 220px;
  transition: border-color 140ms ease-out;
}
input.tope-sticky-cta__input:focus,
.tope-sticky-cta__input:focus {
  outline: none;
  border-color: var(--tope-red);
}
/* Inverted button on the dark bar — red gets attention against ink-1 */
button.tope-sticky-cta__submit,
.tope-sticky-cta__submit {
  background: var(--tope-red);
  color: var(--tope-paper);
  padding: 10px 16px;
  font-size: 14px;
}
button.tope-sticky-cta__submit:hover,
.tope-sticky-cta__submit:hover {
  background: var(--tope-red-ink);
  color: var(--tope-paper);
}
button.tope-sticky-cta__close,
.tope-sticky-cta__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--tope-paper);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 140ms ease-out;
}
button.tope-sticky-cta__close:hover,
.tope-sticky-cta__close:hover { opacity: 1; }
.tope-sticky-cta__close svg { display: block; }

/* Mobile: stack vertically */
@media (max-width: 767px) {
  .tope-sticky-cta__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 40px 20px 16px;
  }
  .tope-sticky-cta__form { flex-direction: column; }
  input.tope-sticky-cta__input,
  .tope-sticky-cta__input { width: 100%; }
  button.tope-sticky-cta__submit,
  .tope-sticky-cta__submit { width: 100%; justify-content: center; }
}

/* ===========================================================================
   WordPress core overrides — keep the Editorial look on default WP markup
   =========================================================================== */
.entry-content > * + * { margin-top: 1.2em; }
.wp-block-image img { max-width: 100%; height: auto; }
.alignwide { max-width: 960px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }

/* ===========================================================================
   Elementor widget overrides — keep them on-brand
   =========================================================================== */

/* Post Info (single-post meta line) — no icons, mono eyebrow style */
.tope-post__meta .elementor-icon-list-icon { display: none !important; }
.tope-post__meta .elementor-icon-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.tope-post__meta .elementor-icon-list-item {
  display: flex;
  align-items: center;
  font-family: var(--tope-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tope-dim);
}
.tope-post__meta .elementor-icon-list-item a {
  color: inherit;
  transition: color 140ms ease-out;
}
.tope-post__meta .elementor-icon-list-item a:hover { color: var(--tope-ink-1); }
.tope-post__meta .elementor-icon-list-text { padding: 0; }
.tope-post__meta .elementor-icon-list-item time { color: var(--tope-ink); }

/* Posts widget (archive grid) — match the hauptsite card aesthetic:
   static, no zoom, no color-flip on hover. The single affordance is the
   thumbnail border changing from line → ink. Subtle, editorial, premium.
   Whole-card click via a stretched ::after on the thumbnail anchor.        */
.elementor-widget-posts .elementor-post,
.elementor-widget-posts .elementor-post__card {
  background: transparent;
  border: 0;
  position: relative;          /* anchor for the stretched-link ::after */
}
.elementor-widget-posts .elementor-post__thumbnail__link {
  border: 1px solid var(--tope-line);
  overflow: hidden;
  display: block;
  transition: border-color 180ms ease-out;
}
.elementor-widget-posts .elementor-post__thumbnail__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.elementor-widget-posts .elementor-post:hover {
  cursor: pointer;
}
.elementor-widget-posts .elementor-post:hover .elementor-post__thumbnail__link {
  border-color: var(--tope-ink-1);
}
.elementor-widget-posts .elementor-post__thumbnail {
  overflow: hidden;
}
.elementor-widget-posts .elementor-post__thumbnail img {
  transition: none;
}
/* Title — ink-1 always, no red-flip on hover (let the cursor be the cue) */
.elementor-widget-posts .elementor-post__title,
.elementor-widget-posts .elementor-post__title a {
  font-family: var(--tope-font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--tope-ink-1);
  text-wrap: balance;
  margin-top: 16px;
  padding-bottom: 0;
  border-bottom: 0;
  text-decoration: none;
  transition: color 180ms ease-out;
}
.elementor-widget-posts .elementor-post__title a:hover {
  color: var(--tope-ink-1);
}
.elementor-widget-posts .elementor-post__meta-data {
  font-family: var(--tope-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tope-dim);
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
.elementor-widget-posts .elementor-post__excerpt {
  font-family: var(--tope-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tope-mid);
  margin-top: 8px;
}
.elementor-widget-posts .elementor-post__excerpt p { color: var(--tope-mid); margin: 0; }

/* Pagination */
.elementor-widget-posts .e-load-more-pagination-end { display: none; }
.elementor-widget-posts .elementor-pagination {
  margin-top: 56px;
  display: flex;
  gap: 8px;
  font-family: var(--tope-font-mono);
  font-size: 12px;
}
.elementor-widget-posts .page-numbers {
  padding: 8px 12px;
  border: 1px solid var(--tope-line);
  color: var(--tope-ink);
  transition: border-color 140ms ease-out, background 140ms ease-out;
}
.elementor-widget-posts .page-numbers:hover { border-color: var(--tope-ink-1); }
.elementor-widget-posts .page-numbers.current {
  background: var(--tope-ink-1);
  color: var(--tope-paper);
  border-color: var(--tope-ink-1);
}

/* Hello Elementor theme strips margins — fine, we set our own */


/* ===========================================================================
   TOP effektiv — Landingpage components, design direction B ("Bühne").
   Appended to blog.css and injected into the Elementor kit together with it.
   Additive only: nothing here touches the existing blog styles.

   Prefix .tope-e-  (e = Event/Landingpage) to keep it clearly separated.
   =========================================================================== */

:root {
  --tope-dark:     #131313;
  --tope-dark-2:   #1c1c1c;
  --tope-on-dark:  rgba(255, 255, 255, 0.72);
  --tope-on-dark-2:rgba(255, 255, 255, 0.48);
}

/* Elementor wraps every section in .e-con; kill its default gaps so our
   sections can run full-bleed with their own padding. */
/* Gilt nur für die Seiten, die aus einem HTML-Widget bestehen. Auf nativ
   gebauten Elementor-Seiten würde dieser Reset jeden Abstand entfernen. */
body:not(.elementor-page-129) [data-elementor-type="wp-page"] > .e-con,
body:not(.elementor-page-129) [data-elementor-type="wp-page"] > .e-con > .e-con-inner {
  padding: 0;
  margin: 0;
  max-width: none;
}

.tope-e-wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 28px;
}
@media (max-width: 768px) { .tope-e-wrap { padding-inline: 20px; } }

/* ---------------------------------------------------------------- top bar */
.tope-e-topbar {
  background: var(--tope-red);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-family: var(--tope-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.tope-e-topbar b { font-weight: 500; }

/* ------------------------------------------------------------------- hero */
.tope-e-hero {
  background: var(--tope-dark);
  color: #fff;
  padding-top: 76px;
  overflow: hidden;
}
.tope-e-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: end;
}
.tope-e-hero__copy { padding-bottom: 58px; }

.tope-e-kicker {
  color: var(--tope-red);
  font-family: var(--tope-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1.tope-e-h1, .tope-e-h1 {
  color: #fff;
  font-size: clamp(38px, 5.6vw, 70px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 18px 0 24px;
}
.tope-e-h1 span { color: var(--tope-red); }

.tope-e-hero p.tope-e-lead, .tope-e-hero .tope-e-lead {
  color: var(--tope-on-dark);
  font-size: 19px;
  max-width: 48ch;
}

.tope-e-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

a.tope-e-btn, .tope-e-btn {
  display: inline-block;
  background: var(--tope-red);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 30px;
  border-radius: var(--tope-radius-xs);
  border: 1px solid var(--tope-red);
  transition: background 0.15s ease, transform 0.15s ease;
}
a.tope-e-btn:hover, .tope-e-btn:hover { background: var(--tope-red-ink); border-color: var(--tope-red-ink); }
a.tope-e-btn--out, .tope-e-btn--out {
  background: none;
  border-color: rgba(255, 255, 255, 0.28);
  font-weight: 500;
}
a.tope-e-btn--out:hover, .tope-e-btn--out:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5); }
a.tope-e-btn--white, .tope-e-btn--white { background: #fff; color: var(--tope-red); border-color: #fff; font-weight: 700; }
a.tope-e-btn--white:hover, .tope-e-btn--white:hover { background: #f1f1f1; border-color: #f1f1f1; }

.tope-e-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tope-e-stat b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.tope-e-stat span { font-size: 13px; color: var(--tope-on-dark-2); }

.tope-e-hero__media { position: relative; margin-bottom: -6px; }
img.tope-e-portrait, .tope-e-portrait { width: 100%; display: block; height: auto; filter: grayscale(0.3) contrast(1.05); }
/* Softens the photo's top edge into the dark hero — the cut-out has a white
   background and would otherwise read as a pasted-on box. */
.tope-e-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--tope-dark) 0%, rgba(19,19,19,0.85) 12%, rgba(19,19,19,0) 38%);
}

.tope-e-ticket {
  position: absolute;
  z-index: 2;
  left: -40px;
  bottom: 18px;
  background: #fff;
  color: var(--tope-ink-1);
  padding: 20px 24px;
  border-left: 5px solid var(--tope-red);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.tope-e-ticket em {
  font-style: normal;
  font-family: var(--tope-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tope-red);
}
.tope-e-ticket b { display: block; font-size: 20px; letter-spacing: -0.02em; margin: 7px 0 3px; }
.tope-e-ticket span { font-size: 14px; color: var(--tope-mid); }

/* --------------------------------------------------------------- sections */
.tope-e-sec { padding-block: 84px; }
.tope-e-sec--soft { background: var(--tope-surface); }
.tope-e-sec--dark { background: var(--tope-dark); color: #fff; }

.tope-e-head { max-width: 60ch; margin-bottom: 48px; }
h2.tope-e-h2, .tope-e-h2 {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 14px 0 14px;
}
.tope-e-sub { font-size: 18px; color: var(--tope-mid); }

/* ------------------------------------------------------------------ cards */
.tope-e-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tope-e-card {
  background: var(--tope-paper);
  border: 1px solid var(--tope-line);
  border-bottom: 4px solid var(--tope-red);
  padding: 32px 28px;
}
.tope-e-card em {
  font-style: normal;
  font-family: var(--tope-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--tope-red);
}
.tope-e-card h3 { font-size: 20px; margin: 12px 0 10px; font-weight: 700; letter-spacing: -0.02em; }
.tope-e-card p { font-size: 15.5px; }

/* ------------------------------------------------------------ topic table */
.tope-e-topics { border-top: 1px solid var(--tope-line); }
.tope-e-topic {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 28px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--tope-line);
}
.tope-e-topic__date {
  font-family: var(--tope-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--tope-red);
}
.tope-e-topic__title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--tope-ink-1); }
.tope-e-topic__note { font-size: 14px; color: var(--tope-dim); font-family: var(--tope-font-mono); }

/* ------------------------------------------------------------------- form */
.tope-e-signup {
  background: var(--tope-dark);
  color: #fff;
  padding: 52px;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 52px;
  align-items: center;
}
.tope-e-signup h2 { color: #fff; }
.tope-e-signup p { color: var(--tope-on-dark); }
.tope-e-signup .tope-e-meta {
  font-family: var(--tope-font-mono);
  font-size: 13px;
  color: var(--tope-on-dark-2);
  margin-top: 18px;
}
.tope-e-form { display: grid; gap: 12px; }
/* Two-level .elementor-kit-6 on purpose: Elementor's kit ships `.elementor-kit-N input`
   at the same specificity as a bare class and can win on source order, which
   left these fields white-on-white. See blog.css spec-bump notes. */
.tope-e-signup input.tope-e-input,
.tope-e-form input.tope-e-input,
input.tope-e-input, .tope-e-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--tope-font-sans);
  font-size: 16px;
  padding: 15px 16px;
  border-radius: var(--tope-radius-xs);
}
input.tope-e-input::placeholder, .tope-e-input::placeholder { color: rgba(255, 255, 255, 0.4); }
input.tope-e-input:focus, .tope-e-input:focus { outline: none; border-color: var(--tope-red); background: rgba(255,255,255,0.09); }
button.tope-e-submit, .tope-e-submit {
  width: 100%;
  background: var(--tope-red);
  color: #fff;
  border: none;
  font-family: var(--tope-font-sans);
  font-weight: 600;
  font-size: 16px;
  padding: 16px 20px;
  border-radius: var(--tope-radius-xs);
  cursor: pointer;
  transition: background 0.15s ease;
}
button.tope-e-submit:hover, .tope-e-submit:hover { background: var(--tope-red-ink); }
.tope-e-fineprint { font-size: 13px; color: var(--tope-on-dark-2); }
.tope-e-thanks {
  display: none;
  border: 1px solid var(--tope-red);
  padding: 22px 24px;
  font-size: 16px;
  color: #fff;
}
.tope-e-thanks b { display: block; margin-bottom: 6px; }

/* ------------------------------------------------------------------ stage */
.tope-e-stage { background: var(--tope-red); color: #fff; padding-block: 70px; }
.tope-e-stage__in { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; }
.tope-e-stage h2 { color: #fff; }
.tope-e-stage p { color: rgba(255, 255, 255, 0.86); font-size: 17px; margin-top: 12px; }

/* ----------------------------------------------------------------- quotes */
.tope-e-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tope-e-quote { border: 1px solid var(--tope-line); padding: 30px 26px; background: var(--tope-paper); }
.tope-e-quote blockquote { font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--tope-ink-1); letter-spacing: -0.01em; }
.tope-e-quote strong { color: var(--tope-red); font-weight: 700; }
.tope-e-who { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tope-line); }
img.tope-e-who__img, .tope-e-who__img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tope-e-who b { display: block; font-size: 14px; color: var(--tope-ink-1); }
.tope-e-who span { font-size: 13px; color: var(--tope-dim); }

/* -------------------------------------------------------------------- faq */
.tope-e-faq { border-top: 1px solid var(--tope-line); max-width: 820px; }
.tope-e-faq details { border-bottom: 1px solid var(--tope-line); }
.tope-e-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tope-ink-1);
  position: relative;
}
.tope-e-faq summary::-webkit-details-marker { display: none; }
.tope-e-faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 18px;
  font-size: 22px;
  font-weight: 400;
  color: var(--tope-red);
}
.tope-e-faq details[open] summary::after { content: "–"; }
.tope-e-faq p { padding: 0 40px 22px 0; font-size: 16px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .tope-e-hero__grid,
  .tope-e-signup,
  .tope-e-stage__in { grid-template-columns: 1fr; }
  .tope-e-cards,
  .tope-e-quotes { grid-template-columns: 1fr; }
  .tope-e-hero { padding-top: 52px; }
  .tope-e-hero__copy { padding-bottom: 36px; }
  .tope-e-ticket { position: static; margin-top: 18px; box-shadow: none; left: auto; bottom: auto; }
  .tope-e-signup { padding: 32px 24px; }
  .tope-e-topic { grid-template-columns: 1fr; gap: 6px; }
  .tope-e-sec { padding-block: 56px; }
  .tope-e-stats { gap: 24px; }
}

/* ===========================================================================
   Produktkatalog (aus Zoho synchronisiert) — Präfix .tope-k-
   =========================================================================== */

.tope-k-top { background: var(--tope-dark); color: #fff; padding: 72px 0 64px; }
.tope-k-top .tope-e-kicker { display: inline-block; margin-bottom: 16px; }

h1.tope-k-h1, .tope-k-h1 {
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: inherit;
  margin-bottom: 18px;
}
.tope-k-top .tope-k-h1 { color: #fff; }
.tope-k-lead { font-size: 19px; color: var(--tope-on-dark); max-width: 60ch; }
.tope-k-hero .tope-k-lead { color: var(--tope-mid); }
.tope-k-text { font-size: 17px; color: var(--tope-mid); max-width: 62ch; margin: 16px 0 26px; }

.tope-k-nav { margin-top: 26px; font-family: var(--tope-font-mono); font-size: 13px;
              letter-spacing: 0.06em; color: var(--tope-on-dark-2); }
.tope-k-nav a { color: var(--tope-on-dark); }
.tope-k-nav a:hover { color: #fff; }

/* --- Raster --------------------------------------------------------------- */
.tope-k-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

a.tope-k-card, .tope-k-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tope-line);
  background: var(--tope-paper);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.tope-k-card:hover, .tope-k-card:hover {
  border-color: var(--tope-red);
  transform: translateY(-2px);
}
.tope-k-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tope-surface); }
.tope-k-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tope-k-card__body { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.tope-k-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
                  color: var(--tope-ink-1); margin-bottom: 8px; }
.tope-k-card p { font-size: 15px; color: var(--tope-mid); flex: 1; }
.tope-k-card__more {
  margin-top: 18px;
  font-family: var(--tope-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tope-red);
}

/* --- Produktseite --------------------------------------------------------- */
.tope-k-hero { padding: 64px 0 56px; border-bottom: 1px solid var(--tope-line); }
.tope-k-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.tope-k-hero__media img { width: 100%; height: auto; display: block; border: 1px solid var(--tope-line); }

.tope-k-nutzen { list-style: none; display: grid; gap: 16px; max-width: 74ch; }
.tope-k-nutzen__item {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  color: var(--tope-mid);
}
.tope-k-nutzen__item::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: 2px;
  background: var(--tope-red);
}
.tope-k-nutzen__item b { color: var(--tope-ink-1); }

.tope-k-cta { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.tope-k-cta p { color: var(--tope-mid); margin-top: 10px; max-width: 60ch; }

@media (max-width: 900px) {
  .tope-k-grid { grid-template-columns: 1fr; }
  .tope-k-hero__grid, .tope-k-cta { grid-template-columns: 1fr; }
  .tope-k-top { padding: 48px 0 44px; }
}

/* --- Produktseite: Kopf, Nutzen, Fuß -------------------------------------- */
.tope-k-hero {
  background: var(--tope-dark);
  color: #fff;
  padding: 34px 0 64px;
  border-bottom: none;
}
.tope-k-crumb {
  font-family: var(--tope-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tope-on-dark-2);
  margin-bottom: 40px;
}
.tope-k-crumb a { color: var(--tope-red); }
.tope-k-crumb a:hover { color: #fff; }
.tope-k-crumb span { margin: 0 6px; }

.tope-k-hero .tope-k-hero__grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.tope-k-hero .tope-k-h1 { color: #fff; }
.tope-k-hero .tope-k-lead { color: var(--tope-on-dark); font-size: 19px; max-width: 46ch; }
.tope-k-hero__cta { margin-top: 30px; }

/* Light card behind the product shot: most catalogue images carry their own
   background and would otherwise sit on the dark hero as a hard rectangle. */
.tope-k-hero__media {
  background: #fff;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}
.tope-k-hero__media img { width: 100%; height: auto; display: block; }

.tope-k-intro { padding-block: 64px 0; }
.tope-k-intro .tope-k-text { font-size: 19px; line-height: 1.62; max-width: 68ch; margin: 0; }

.tope-k-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tope-k-benefit {
  border-top: 3px solid var(--tope-red);
  padding-top: 22px;
}
.tope-k-benefit em {
  font-style: normal;
  font-family: var(--tope-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--tope-red);
}
.tope-k-benefit p { font-size: 16px; color: var(--tope-mid); margin-top: 12px; }
.tope-k-benefit b { color: var(--tope-ink-1); font-weight: 600; }

.tope-k-back { border-top: 1px solid var(--tope-line); padding: 34px 0 56px; }
.tope-k-back a {
  font-family: var(--tope-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tope-red);
}
.tope-k-back a:hover { color: var(--tope-ink-1); }

/* CTA-Block am Seitenende in Markenrot statt in Grau */
.tope-e-sec--soft .tope-k-cta { align-items: center; }
.tope-k-cta h2 { margin-top: 0; }

@media (max-width: 900px) {
  .tope-k-hero .tope-k-hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .tope-k-benefits { grid-template-columns: 1fr; gap: 28px; }
  .tope-k-hero { padding: 24px 0 48px; }
}

/* ===========================================================================
   Sprech-Werkstatt, nativ mit Elementor gebaut (Seite 129)
   Elementor bringt eigene Vorgaben mit (Versalien auf Knöpfen, eigener
   Abstandsrhythmus). Hier wird der Rhythmus der Vorlage wiederhergestellt.
   =========================================================================== */
.elementor-page-129 .elementor-button,
.elementor-page-129 .elementor-button-text {
  text-transform: none !important;
  letter-spacing: -0.01em;
}
.elementor-page-129 .elementor-button { box-shadow: 0 8px 22px rgba(211,19,19,.22); }
.elementor-page-129 .elementor-button:hover { transform: translateY(-2px); }

/* Innenabstand der Abschnitte: Elementor legt ihn auf den inneren Container */
.elementor-page-129 .e-con > .e-con-inner { padding-inline: 22px; }

/* Kopfzeile: gezielt über die Element-ID. `:first-of-type` trifft JEDES erste
   Container-Kind, also auch die Blöcke im Zahlenband — die wurden dadurch weiss
   überdeckt und die weisse 800 verschwand. */
.elementor-page-129 .elementor-element-16cd83a {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
}

/* Bilder rund, Porträt größer */
.elementor-page-129 .elementor-widget-image img { border-radius: 999px; }

/* Absätze ohne Eigenabstand, damit die Container-Lücken zählen */
.elementor-page-129 .elementor-widget-text-editor p { margin: 0; }

/* Symbole der drei Schritte */
.elementor-page-129 .elementor-view-framed .elementor-icon {
  border-radius: 14px; border: 0; background: rgba(211,19,19,.08); padding: 13px;
}

/* Zeilenlängen begrenzen, sonst laufen Fließtexte über die volle Breite */
.elementor-page-129 .elementor-widget-text-editor { line-height: 1.6; }

/* Farbflächen (Band, Fußbereich) müssen über die volle Breite laufen,
   der Inhalt darin bleibt auf Lesebreite. */
.elementor-page-129 > .elementor > .e-con { --width: 100%; max-width: none; }
.elementor-page-129 > .elementor > .e-con > .e-con-inner {
  max-width: 1080px; margin-inline: auto; width: 100%;
}

/* Innere Container erben sonst die Flächenfarbe des Kits und legen einen
   weissen Kasten ins schwarze Zahlenband, in dem die weisse 800 verschwindet. */
.elementor-page-129 .e-con-inner,
.elementor-page-129 .e-con.e-con--inner { background-color: transparent !important; }

/* blog.css faerbt `p` direkt ein. Elementor setzt seine Textfarbe dagegen nur
   auf den Widget-Container und vererbt sie — die direkte Regel gewinnt, und
   heller Text auf dunklem Grund wurde dadurch dunkelgrau und unlesbar. */
.elementor-page-129 .elementor-widget-text-editor p,
.elementor-page-129 .elementor-widget-text-editor li { color: inherit; }

/* Der Symbolrahmen ist projektweit rot hinterlegt. Im Garantie-Kasten muss er
   die gruene Farbe der Zusage aufnehmen, sonst wirkt er wie ein Fremdkoerper. */
.elementor-page-129 .elementor-element-a4838ef .elementor-icon {
  background: rgba(23,114,69,.10);
}

/* Mobil: Die Abschnitte haben eine feste Breite von 1080 px, damit sie am
   Rechner sauber sitzen. Auf schmalen Geraeten muss daraus 100 % werden,
   sonst laufen Ueberschriften und Fliesstexte rechts aus dem Bild. */
@media (max-width: 1024px) {
  .elementor-page-129 .e-con { --width: 100% !important; max-width: 100% !important; }
  .elementor-page-129 .elementor-widget { max-width: 100% !important; }
  .elementor-page-129 .e-con > .e-con-inner { padding-inline: 18px; }
}
@media (max-width: 767px) {
  .elementor-page-129 .elementor-button { width: 100%; text-align: center; }
  .elementor-page-129 .e-con.e-flex[style*="row"] { flex-wrap: wrap; }
}

/* --- Sprech-Werkstatt: drei Befunde aus der Sichtpruefung ---------------- */

/* 1. Symbole: Elementor liefert sie als Inline-SVG (Experiment "SVG-Icons").
      Ohne das Font-Awesome-Stylesheet fehlt den SVGs die Groessenangabe, sie
      kollabieren auf null und man sieht nur den leeren Rahmen. */
.elementor-page-129 .elementor-icon svg {
  width: 1em; height: 1em; fill: currentColor; display: block;
}
.elementor-page-129 .elementor-icon { display: inline-flex; line-height: 1; }

/* 2. Zahlenband: Die drei Bloecke werden sonst ueber die volle Breite
      verteilt. 800 und 40 gehoeren als Gegensatzpaar eng zusammen. */
.elementor-page-129 .elementor-element-2f21bbe { gap: 48px; }
.elementor-page-129 .elementor-element-2f21bbe > .e-con {
  width: auto; flex: 0 0 auto;
}

/* 3. Terminkarte: Der rote Kopf lief ueber die abgerundeten Ecken hinaus und
      liess weisse Zwickel stehen. */
.elementor-page-129 .elementor-element-03c4a06 { overflow: hidden; }

/* Beweiszeile: Zahl und Zitat sollen auf einer Achse sitzen, sonst wirken sie
   wie zwei zufaellig nebeneinander gestellte Bloecke. */
.elementor-page-129 .elementor-element-d88c6e3 { align-items: center; gap: 56px; }

/* Mobil gehoert das Gegensatzpaar untereinander, sonst rutscht "gegen" neben
   die 800 und der Vergleich ist nicht mehr lesbar. */
@media (max-width: 767px) {
  .elementor-page-129 .elementor-element-2f21bbe { flex-direction: column; gap: 20px; }
}

/* Die Terminkarte darf keinen eigenen Innenabstand haben, sonst wird der rote
   Kopfbalken eingerueckt und laesst links und rechts weisse Streifen stehen.
   Das seitliche Padding kommt aus den Bloecken darin, nicht aus der Karte. */
.elementor-page-129 .elementor-element-03c4a06 > .e-con-inner { padding-inline: 0; }
.elementor-page-129 .elementor-element-03c4a06 > .e-con-inner > .e-con { width: 100%; }

/* Die Karte ist ein Container ohne inneren Wrapper, deshalb greift die Regel
   darueber nicht. Padding direkt auf der Karte auf null. */
.elementor-page-129 .elementor-element-03c4a06 { padding: 0 !important; }
.elementor-page-129 .elementor-element-03c4a06 > .e-con:first-child { width: 100%; max-width: none; }/* End custom CSS */