/*
Theme Name: Rehub Modern Trust
Theme URI: https://bitcoinvergleich.com
Author: forgecoreai
Author URI: https://forgecoreai.com
Description: Modern child theme for Rehub. Cleaner header (no banner ad cluttering the logo row), refined typography (IBM Plex Sans), preserved brand colors. Reverses instantly by switching back to rehub-theme.
Template: rehub-theme
Version: 1.6.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rehub-modern-trust
*/

/* ==========================================================================
   1. Design Tokens — preserve brand colors, add typography tokens
   ========================================================================== */

:root {
  /* BRAND COLORS — kept verbatim from the original Rehub palette */
  --wmt-brand-blue:        #150782;
  --wmt-brand-blue-dark:   #0a0466;
  --wmt-brand-blue-soft:   #ebe9f9;
  --wmt-accent-orange:     #ff7f00;
  --wmt-accent-orange-soft:#fff3e0;
  --wmt-accent-green:      #3bb738;
  --wmt-accent-green-soft: #e8f7e7;
  --wmt-rating-green:      #63da38;

  /* NEUTRALS */
  --wmt-bg:                #ffffff;
  --wmt-bg-warm:           #fafbfc;
  --wmt-bg-cool:           #f5f7fa;
  --wmt-text:              #111827;
  --wmt-text-muted:        #6b7280;
  --wmt-text-soft:         #4b5563;
  --wmt-border:            #e5e7eb;
  --wmt-border-strong:     #d1d5db;
  --wmt-border-soft:       #f3f4f6;

  /* TYPOGRAPHY */
  --wmt-font-head: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --wmt-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wmt-font-mono: "IBM Plex Mono", "SF Mono", Monaco, Consolas, monospace;

  /* SPACING — 4px scale */
  --wmt-space-1: 0.25rem;
  --wmt-space-2: 0.5rem;
  --wmt-space-3: 0.75rem;
  --wmt-space-4: 1rem;
  --wmt-space-5: 1.5rem;
  --wmt-space-6: 2rem;
  --wmt-space-7: 3rem;
  --wmt-space-8: 4rem;

  /* RADIUS — restrained */
  --wmt-radius:    4px;
  --wmt-radius-md: 6px;
  --wmt-radius-lg: 8px;
  --wmt-radius-pill: 999px;

  /* SHADOWS — extremely subtle */
  --wmt-shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.04);
  --wmt-shadow-md: 0 1px 3px rgba(10, 37, 64, 0.08), 0 1px 2px rgba(10, 37, 64, 0.04);
  --wmt-shadow-lg: 0 10px 20px -8px rgba(10, 37, 64, 0.12), 0 4px 8px -4px rgba(10, 37, 64, 0.06);

  /* MOTION */
  --wmt-transition: 150ms ease-out;

  /* CONTAINER */
  --wmt-container: 1200px;
}

/* ==========================================================================
   2. Base typography — IBM Plex Sans headlines + system sans body.
   Colors are INHERITED from the parent theme / inline styles, so brand
   blue headings (#150782), orange accents (#ff7f00), green ratings (#3bb738)
   all continue to render in their original colors.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--wmt-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--wmt-text);
  background: var(--wmt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headlines — IBM Plex Sans.
   Color is inherited so brand colors are preserved. */
h1, h2, h3, h4, h5, h6,
.entry-title, .vc_custom_heading {
  font-family: var(--wmt-font-head) !important;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-bottom: var(--wmt-space-4);
}

h1, .entry-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 600;
  margin-top: var(--wmt-space-6);
  margin-bottom: var(--wmt-space-3);
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  margin-top: var(--wmt-space-5);
  margin-bottom: var(--wmt-space-2);
}

h4, h5, h6 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: var(--wmt-space-4);
  margin-bottom: var(--wmt-space-2);
}

p {
  margin: 0 0 var(--wmt-space-4) 0;
  line-height: 1.6;
}

p:last-child { margin-bottom: 0; }

/* Links — use brand blue, not a generic accent */
a {
  color: var(--wmt-brand-blue);
  text-decoration: none;
  transition: color var(--wmt-transition);
}

a:hover {
  color: var(--wmt-brand-blue-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }

ul, ol {
  margin: 0 0 var(--wmt-space-4) 0;
  padding-left: var(--wmt-space-5);
}

li {
  margin-bottom: var(--wmt-space-2);
  line-height: 1.6;
}

li:last-child { margin-bottom: 0; }

/* Blockquote — refined, brand-blue accent */
blockquote {
  margin: var(--wmt-space-5) 0;
  padding: var(--wmt-space-4) var(--wmt-space-5);
  border-left: 3px solid var(--wmt-brand-blue);
  background: var(--wmt-bg-warm);
  font-size: 1.0625rem;
  color: var(--wmt-text-soft);
  line-height: 1.5;
  font-style: normal;
  border-radius: 0 var(--wmt-radius-md) var(--wmt-radius-md) 0;
}

blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: var(--wmt-font-mono);
  font-size: 0.875em;
  background: var(--wmt-brand-blue-soft);
  padding: 2px 6px;
  border-radius: var(--wmt-radius);
  color: var(--wmt-brand-blue);
}

pre {
  font-family: var(--wmt-font-mono);
  background: #1f2937;
  color: #f8f9fa;
  padding: var(--wmt-space-4);
  border-radius: var(--wmt-radius-md);
  overflow-x: auto;
  margin: var(--wmt-space-5) 0;
  font-size: 0.875rem;
}

pre code { background: transparent; color: inherit; padding: 0; }

/* ==========================================================================
   2a. Layout & Container — constrain main content width for readability.
   Rehub's .rh-container defaults to full width (no max-width), which makes
   text and tables span the entire viewport. This makes lines too long to
   read comfortably (over 100 chars per line on desktop) and looks unpolished.
   We constrain the container to 1200px and center it with auto margins.
   ========================================================================== */

/* Main content container — applies to ALL page types */
.rh-container,
.rh-content-wrap,
.rh-post-wrapper,
.main-side {
  max-width: var(--wmt-container, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--wmt-space-4) !important;
  padding-right: var(--wmt-space-4) !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .rh-container,
  .rh-content-wrap,
  .rh-post-wrapper,
  .main-side {
    padding-left: var(--wmt-space-5) !important;
    padding-right: var(--wmt-space-5) !important;
  }
}

/* On single blog posts, narrow the article body to ~720px for readability
   (about 70 characters per line — the optimal reading measure).
   The outer .rh-container stays at 1200px so the sidebar (if present)
   has space. */
.single-post .main-side,
.single-post .rh-post-wrapper,
.single-post article.post {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Pages (not single posts) — slightly wider for table-heavy content */
.page .main-side,
.page .rh-post-wrapper,
.page article.post,
.page .entry-content {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* But keep WPBakery rows full-width within the page container so layouts
   don't break. These are inside .entry-content. */
.entry-content .vc_row,
.entry-content .wpb_row,
.entry-content .vc_column_container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Body content paragraphs inside WPBakery vc_column_text — constrain for
   readability even within full-width rows. */
.entry-content .vc_column_text > p,
.entry-content .wpb_text_column > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero illustration containers (ratgeber, vergleich) — keep illustration
   contained within the page width, don't let it overflow horizontally */
.wpb_single_image img,
.wpb_single_image,
.vc_single_image-wrapper,
.vc_single_image-wrapper img,
figure img,
figure a img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* Rehub's hero illustrations (ratgeber-hub-hero.webp etc.) use <figure><img>
   with width set inline to naturalWidth. Force them to fit the container. */
figure img,
figure[class] img,
article.post figure img,
.entry-content figure img,
.post-content figure img,
.entry-content img.size-full,
.entry-content img.size-large,
.entry-content img.attachment-full,
.entry-content img.attachment-large {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The <figure> itself should also be contained */
figure,
article.post figure,
.entry-content figure,
.post-content figure {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
}

/* Featured images on single posts — must respect the article's max-width
   (Rehub sets width:1200px and max-width:none on these, which breaks
   the constrained layout). Force them to fit the container. */
.top_featured_image,
.top_featured_image img,
article.post .wp-post-image,
article.post img.size-full,
article.post img.attachment-full,
article.post img.attachment-large {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--wmt-radius-md);
}

/* Social share buttons that were floating outside the article — constrain
   them inside the readable column */
.post_share,
.share-buttons,
.social-share,
[class*="post_share"],
[class*="share-buttons"] {
  max-width: 100% !important;
  width: 100% !important;
  margin: var(--wmt-space-4) 0 !important;
  overflow: visible;
}

/* postNavigation — the next/prev arrows that Rehub positions fixed outside
   the article. Hide them on small screens since they overflow. */
.postNavigation,
.postnavprev,
.postnavnext {
  max-width: 40px;
  overflow: visible;
}

@media (max-width: 1200px) {
  .postNavigation,
  .postnavprev,
  .postnavnext {
    display: none !important;
  }
}

/* Featured image caption */
.top_featured_image figcaption,
figure figcaption {
  font-size: 0.8125rem;
  color: var(--wmt-text-muted);
  text-align: center;
  padding: var(--wmt-space-2);
  font-style: normal;
}

/* Prevent horizontal overflow on the whole document — any element wider
   than the viewport gets clipped rather than causing a scrollbar.
   IMPORTANT: This is a safety net. The container max-widths above should
   prevent overflow in the first place, but if anything slips through
   (e.g. an iframe, a wide table, a code block), this hides the scrollbar
   instead of letting the page break. */
html {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Long words / URLs should break, not stretch the container */
.entry-content p,
.entry-content li,
.post-content p,
.post-content li,
.entry-content a,
.post-content a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Code blocks and pre — allow horizontal scroll inside, not on the page */
pre {
  overflow-x: auto;
  max-width: 100%;
}

/* Force tables to scroll horizontally instead of breaking the layout */
.entry-content table,
.post-content table,
.rh-top-table,
.top_table_block,
table.tablesaw,
table:not([class]) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* But keep the table's internal layout natural */
.entry-content table > tbody,
.entry-content table > thead,
.post-content table > tbody,
.post-content table > thead,
.rh-top-table table,
.top_table_block table,
table.tablesaw > tbody,
table.tablesaw > thead,
table:not([class]) > tbody,
table:not([class]) > thead {
  display: table;
  width: 100%;
}

/* ==========================================================================
   3. Modern Header — custom layout from header.php override
   ========================================================================== */

#main_header.wmt-header {
  background: var(--wmt-bg) !important;
  border-bottom: 1px solid var(--wmt-border) !important;
  box-shadow: var(--wmt-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

#main_header.wmt-header.white_style {
  background: var(--wmt-bg) !important;
}

.wmt-header-wrap { padding: 0; }

/* The modern header inner uses flex: logo | nav | search | mobile-trigger */
.wmt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wmt-space-5);
  min-height: 72px;
  padding-top: var(--wmt-space-3);
  padding-bottom: var(--wmt-space-3);
}

/* Logo */
.wmt-logo {
  flex-shrink: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.wmt-logo img {
  max-height: 40px;
  width: auto;
  display: block;
}

.wmt-logo .textlogo {
  font-family: var(--wmt-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wmt-brand-blue);
}

.wmt-logo .textlogo-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}

.wmt-logo .sloganlogo {
  font-size: 0.75rem;
  color: var(--wmt-text-muted);
  margin-top: 2px;
}

/* Nav */
.wmt-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.wmt-nav ul.menu,
.wmt-nav .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wmt-space-1);
  align-items: center;
}

.wmt-nav .menu > li {
  margin: 0;
  padding: 0;
  position: relative;
}

.wmt-nav .menu > li > a {
  display: block;
  padding: var(--wmt-space-3) var(--wmt-space-4);
  font-family: var(--wmt-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--wmt-text);
  text-decoration: none;
  border-radius: var(--wmt-radius);
  transition: background var(--wmt-transition), color var(--wmt-transition);
  letter-spacing: 0;
  text-transform: none;
}

.wmt-nav .menu > li > a:hover,
.wmt-nav .menu > li.current-menu-item > a,
.wmt-nav .menu > li.current-menu-ancestor > a {
  background: var(--wmt-brand-blue-soft);
  color: var(--wmt-brand-blue);
  text-decoration: none;
}

/* Sub-menu dropdowns */
.wmt-nav .menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--wmt-bg);
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-md);
  box-shadow: var(--wmt-shadow-md);
  padding: var(--wmt-space-2);
  min-width: 220px;
  display: none;
  z-index: 50;
}

.wmt-nav .menu li:hover > .sub-menu {
  display: block;
}

.wmt-nav .menu .sub-menu li {
  width: 100%;
}

.wmt-nav .menu .sub-menu a {
  padding: var(--wmt-space-2) var(--wmt-space-3);
  font-size: 0.875rem;
  color: var(--wmt-text-soft);
  border-radius: var(--wmt-radius);
  display: block;
}

.wmt-nav .menu .sub-menu a:hover {
  background: var(--wmt-bg-warm);
  color: var(--wmt-brand-blue);
}

/* Search in header */
.wmt-search {
  flex-shrink: 0;
  width: auto;
  max-width: 240px;
}

.wmt-search .search-form {
  display: flex;
  align-items: center;
  gap: var(--wmt-space-2);
  background: var(--wmt-bg-warm);
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-pill);
  padding: var(--wmt-space-1) var(--wmt-space-3);
  transition: border-color var(--wmt-transition), background var(--wmt-transition);
}

.wmt-search .search-form:focus-within {
  border-color: var(--wmt-brand-blue);
  background: var(--wmt-bg);
  box-shadow: 0 0 0 3px var(--wmt-brand-blue-soft);
}

.wmt-search input[type="text"] {
  border: none;
  background: transparent;
  font-family: var(--wmt-font-body);
  font-size: 0.875rem;
  color: var(--wmt-text);
  padding: var(--wmt-space-2) 0;
  width: 100%;
  outline: none;
}

.wmt-search input[type="text"]::placeholder {
  color: var(--wmt-text-muted);
}

.wmt-search button[type="submit"],
.wmt-search .btnsearch {
  background: transparent;
  border: none;
  color: var(--wmt-text-muted);
  padding: var(--wmt-space-1) var(--wmt-space-2);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--wmt-transition), background var(--wmt-transition);
}

.wmt-search button[type="submit"]:hover {
  color: var(--wmt-brand-blue);
  background: var(--wmt-brand-blue-soft);
}

/* Mobile menu trigger — hidden on desktop */
.wmt-mobile-trigger {
  display: none;
}

/* Top ad strip (TradingView ticker moved here from logo row) */
.wmt-top-ad-strip {
  background: var(--wmt-bg-warm);
  border-bottom: 1px solid var(--wmt-border);
  padding: var(--wmt-space-2) 0;
  min-height: 0;
  overflow: hidden;
}

.wmt-top-ad-strip .rh-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wmt-space-4);
}

.wmt-top-ad-strip .tradingview-widget-container {
  max-height: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.wmt-top-ad-strip .tradingview-widget-container > div,
.wmt-top-ad-strip .tradingview-widget-container__widget {
  max-height: 60px;
  overflow: hidden;
}

/* ==========================================================================
   4. Mobile responsive — header switches to hamburger
   ========================================================================== */

@media (max-width: 992px) {
  .wmt-header-inner {
    justify-content: space-between;
    gap: var(--wmt-space-3);
  }

  .wmt-nav {
    display: none;
  }

  .wmt-search {
    flex: 1 1 auto;
    max-width: none;
  }

  .wmt-mobile-trigger {
    display: block;
    flex-shrink: 0;
  }

  .wmt-mobile-trigger #dl-menu {
    display: flex;
    align-items: center;
    gap: var(--wmt-space-2);
  }

  .wmt-mobile-trigger .dl-trigger {
    background: transparent;
    border: 1px solid var(--wmt-border);
    border-radius: var(--wmt-radius);
    padding: var(--wmt-space-2);
    cursor: pointer;
    color: var(--wmt-text);
  }

  .wmt-mobile-trigger .dl-trigger svg line {
    stroke: currentColor;
    stroke-width: 2;
  }

  /* TradingView strip: hide on small phones to save space */
  .wmt-top-ad-strip {
    display: none;
  }
}

@media (max-width: 600px) {
  .wmt-search {
    display: none; /* Mobile uses the search icon in mobile-trigger */
  }

  .wmt-mobile-trigger #mobile-menu-icons {
    display: flex;
    gap: var(--wmt-space-1);
  }
}

/* ==========================================================================
   5. Comparison tables — refined but keep colors
   ========================================================================== */

.rh-top-table table,
.top_table_block,
table.tablesaw {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-md);
  overflow: hidden;
  margin: var(--wmt-space-5) 0;
  background: var(--wmt-bg);
}

/* Generic HTML tables (used on /anbieter/ overview, etc.) */
.entry-content table,
.post-content table,
table:not([class]) {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-md);
  overflow: hidden;
  margin: var(--wmt-space-5) 0;
  background: var(--wmt-bg);
  font-size: 0.9375rem;
}

.entry-content table th,
.post-content table th,
table:not([class]) th {
  background: var(--wmt-brand-blue) !important;
  color: #fff !important;
  font-family: var(--wmt-font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--wmt-space-3) var(--wmt-space-4);
  text-align: left;
  border-bottom: none;
}

.entry-content table td,
.post-content table td,
table:not([class]) td {
  padding: var(--wmt-space-3) var(--wmt-space-4);
  border-bottom: 1px solid var(--wmt-border);
  vertical-align: middle;
  color: var(--wmt-text);
}

.entry-content table tbody tr:last-child td,
.post-content table tbody tr:last-child td,
table:not([class]) tbody tr:last-child td {
  border-bottom: none;
}

.entry-content table tbody tr:nth-child(even),
.post-content table tbody tr:nth-child(even),
table:not([class]) tbody tr:nth-child(even) {
  background: var(--wmt-bg-warm);
}

.entry-content table tbody tr:hover,
.post-content table tbody tr:hover,
table:not([class]) tbody tr:hover {
  background: var(--wmt-brand-blue-soft);
}

.top_rating_heading th,
.rh-top-table thead th {
  background: var(--wmt-brand-blue) !important;
  color: #fff !important;
  font-family: var(--wmt-font-head);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding: var(--wmt-space-3) var(--wmt-space-4);
  text-align: left;
  border-bottom: none;
}

.top_rating_item td,
.rh-top-table tbody td {
  padding: var(--wmt-space-4);
  border-bottom: 1px solid var(--wmt-border);
  vertical-align: middle;
  font-size: 0.9375rem;
}

.top_rating_item:last-child td { border-bottom: none; }

.top_rating_item:nth-child(even) { background: var(--wmt-bg-warm); }

.top_rating_item:hover { background: var(--wmt-brand-blue-soft); }

/* Radial progress / rating circles */
.radial-progress .percentage,
.rating_num,
.review_score {
  font-family: var(--wmt-font-mono);
  font-weight: 600;
  color: var(--wmt-brand-blue);
}

/* Re-line badges ("Top Anbieter" etc.) — keep their original colors */
.re-line-badge {
  font-family: var(--wmt-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--wmt-radius);
  padding: var(--wmt-space-1) var(--wmt-space-2);
}

/* ==========================================================================
   6. Cards — refined borders + hover. Scoped to actual card containers.
   ========================================================================== */

/* Target only the col_item that's actually a card (not footer widgets,
   not list items in widgets) */
.column_grid > .col_item,
.col_wrap_three > .col_item,
.col_wrap_two > .col_item,
.news_no_col .col_item,
.newsblock > .col_item {
  background: var(--wmt-bg);
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-md);
  padding: var(--wmt-space-5);
  box-shadow: var(--wmt-shadow-sm);
  transition: box-shadow var(--wmt-transition), border-color var(--wmt-transition), transform var(--wmt-transition);
  margin-bottom: var(--wmt-space-4);
}

.column_grid > .col_item:hover,
.col_wrap_three > .col_item:hover,
.col_wrap_two > .col_item:hover {
  box-shadow: var(--wmt-shadow-lg);
  border-color: var(--wmt-border-strong);
  transform: translateY(-2px);
}

.column_grid > .col_item h2,
.column_grid > .col_item h3,
.col_wrap_three > .col_item h2,
.col_wrap_three > .col_item h3 {
  font-size: 1.125rem !important;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--wmt-space-3) 0;
}

.column_grid > .col_item h2 a,
.column_grid > .col_item h3 a,
.col_wrap_three > .col_item h2 a {
  color: var(--wmt-brand-blue);
  text-decoration: none;
}

.column_grid > .col_item h2 a:hover,
.column_grid > .col_item h3 a:hover {
  color: var(--wmt-brand-blue-dark);
  text-decoration: none;
}

/* ==========================================================================
   7. Buttons — refined typography, KEEP original colors
   ========================================================================== */

.btn, .wpsm-button, .rehub-main-btn,
.btn_offer_block, .vc_btn3, .vc_general,
.button, input[type="submit"], input[type="button"] {
  font-family: var(--wmt-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--wmt-radius-md) !important;
  padding: var(--wmt-space-3) var(--wmt-space-5) !important;
  transition: transform var(--wmt-transition), box-shadow var(--wmt-transition), filter var(--wmt-transition) !important;
  box-shadow: var(--wmt-shadow-sm);
  line-height: 1.4 !important;
  display: inline-block;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  cursor: pointer;
}

/* Keep WPBakery's color classes — orange stays orange, etc. */
.btn_offer_block:hover, .rehub-main-btn:hover,
.vc_btn3:hover, .vc_general:hover,
.btn:hover, .button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--wmt-shadow-md);
  filter: brightness(0.95);
  text-decoration: none !important;
}

/* ==========================================================================
   8. Single blog post — refined typography with proper max-width for readability.
   ========================================================================== */

.post, article.post {
  background: var(--wmt-bg);
}

/* Constrain body text to readable measure (~70 chars per line).
   WPBakery content blocks (vc_row) intentionally NOT constrained so
   layouts still work. Only the actual <p> body copy gets the measure. */
.single-post .entry-content > p,
.single-post .post-content > p,
.single-page .entry-content > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--wmt-text-soft);
}

/* Lead paragraph — slightly larger, muted */
.single-post .entry-content > p:first-of-type,
.single-post .post > p:first-of-type {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--wmt-text-soft);
  font-weight: 400;
}

/* Post meta — refined, no SaveSavedRemoved glitch */
.post-meta, .rh_post_header_meta {
  font-size: 0.8125rem;
  color: var(--wmt-text-muted);
  font-family: var(--wmt-font-body);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wmt-space-3);
  padding: var(--wmt-space-3) 0;
  border-bottom: 1px solid var(--wmt-border);
  margin-bottom: var(--wmt-space-5);
}

.post-meta .meta-item,
.rh_post_header_meta > * {
  display: inline-flex;
  align-items: center;
  gap: var(--wmt-space-1);
}

.post-meta a {
  color: var(--wmt-text-soft);
  text-decoration: none;
  font-weight: 500;
}

.post-meta a:hover {
  color: var(--wmt-brand-blue);
  text-decoration: underline;
}

/* Hide the "Save/Saved/Removed" wishlist spans cleanly (already done in
   section 14a but reinforce here for blog post context) */
.post-meta .wishaddwrap,
.post-meta .wishaddedwrap,
.post-meta .wishremovedwrap {
  display: none !important;
}

.entry-content img,
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--wmt-radius-md);
  margin: var(--wmt-space-5) 0;
}

.wp-caption, .wp-caption-text {
  font-size: 0.8125rem;
  color: var(--wmt-text-muted);
  text-align: center;
  font-style: normal;
  margin: var(--wmt-space-3) 0;
}

/* Headings inside content — refined spacing, keep colors */
.entry-content h2,
.post-content h2 {
  margin-top: var(--wmt-space-7);
  padding-top: var(--wmt-space-4);
  border-top: 1px solid var(--wmt-border);
  font-size: 1.5rem;
}

.entry-content h2:first-child,
.post-content h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: var(--wmt-space-4);
}

.entry-content h3,
.post-content h3 {
  margin-top: var(--wmt-space-6);
  font-size: 1.1875rem;
}

/* TOC+ */
#toc_container, .toc_screen {
  background: var(--wmt-bg-warm);
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-md);
  padding: var(--wmt-space-5);
  margin: var(--wmt-space-6) 0;
  font-size: 0.875rem;
}

#toc_container .toc_title,
.toc_screen .toc_title {
  font-family: var(--wmt-font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wmt-brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--wmt-space-3);
  padding-bottom: var(--wmt-space-2);
  border-bottom: 1px solid var(--wmt-border);
}

#toc_container a, .toc_screen a {
  color: var(--wmt-text-soft);
  text-decoration: none;
  font-size: 0.875rem;
}

#toc_container a:hover, .toc_screen a:hover {
  color: var(--wmt-brand-blue);
}

/* ==========================================================================
   9. Breadcrumbs — refined typography with better contrast
   ========================================================================== */

.breadcrumb, .breadcrumbs, [class*="breadcrumb"] {
  font-size: 0.8125rem;
  color: var(--wmt-text-soft) !important;
  font-family: var(--wmt-font-body);
  padding: var(--wmt-space-2) 0;
  margin-bottom: var(--wmt-space-3);
}

.breadcrumb a, .breadcrumbs a, [class*="breadcrumb"] a {
  color: var(--wmt-text-soft) !important;
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb a:hover, .breadcrumbs a:hover {
  color: var(--wmt-brand-blue) !important;
  text-decoration: underline;
}

.breadcrumb_separator, .breadcrumbs_sep, .breadcrumb span {
  color: var(--wmt-text-muted) !important;
  margin: 0 var(--wmt-space-1);
}

/* ==========================================================================
   10. Sidebar widgets — refined typography only, no layout change
   ========================================================================== */

.widget-title, .widget h3, .widget h4 {
  font-family: var(--wmt-font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wmt-brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--wmt-space-4);
  padding-bottom: var(--wmt-space-2);
  border-bottom: 1px solid var(--wmt-border);
}

.widget ul li {
  padding: var(--wmt-space-2) 0;
  border-bottom: 1px solid var(--wmt-border);
  font-size: 0.875rem;
}

.widget ul li:last-child { border-bottom: none; }

.widget ul li a {
  color: var(--wmt-text-soft);
  text-decoration: none;
}

.widget ul li a:hover { color: var(--wmt-brand-blue); }

/* ==========================================================================
   11. Footer — refined typography only, keep its existing dark/blue background
   ========================================================================== */

#footer, .footer_wrap, footer#footer, .footer-bottom {
  font-size: 0.875rem;
  font-family: var(--wmt-font-body);
}

#footer .widget-title, #footer .widget h3,
footer .widget-title, footer .widget h3 {
  font-family: var(--wmt-font-head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   12. Cookie banner — fixed to bottom-right, smaller, doesn't overlap content
   ========================================================================== */

/* The Jetpack EU cookie law widget is position:fixed by default and spans
   the full width (left:16px, right:16px, width:1408px) which overlays
   primary content on every page. We constrain it to a small bottom-right
   card that doesn't obstruct reading.

   IMPORTANT: Rehub's widget CSS sets width:50px on .widget_eu_cookie_law_widget
   We must use !important + min-width to override that. */

#eu_cookie_law_widget-2,
.widget_eu_cookie_law_widget {
  position: fixed !important;
  bottom: var(--wmt-space-4) !important;
  right: var(--wmt-space-4) !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  min-width: 320px !important;
  max-width: 380px !important;
  border-radius: var(--wmt-radius-lg) !important;
  box-shadow: var(--wmt-shadow-lg) !important;
  padding: 0 !important;
  z-index: 9999;
  background: var(--wmt-bg) !important;
  border: 1px solid var(--wmt-border) !important;
  overflow: hidden;
}

#eu-cookie-law,
.eu-cookie-law {
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--wmt-space-4) var(--wmt-space-5) !important;
  font-family: var(--wmt-font-body) !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  background: var(--wmt-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#eu-cookie-law .accept,
.eu-cookie-law .accept,
#eu-cookie-law input[type="submit"],
.eu-cookie-law input[type="submit"] {
  border-radius: var(--wmt-radius) !important;
  font-family: var(--wmt-font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  background: var(--wmt-brand-blue) !important;
  color: #fff !important;
  padding: var(--wmt-space-2) var(--wmt-space-4) !important;
  border: none !important;
  margin: var(--wmt-space-3) 0 0 !important;
  cursor: pointer;
  transition: background var(--wmt-transition) !important;
  width: auto !important;
  display: inline-block !important;
}

#eu-cookie-law .accept:hover,
.eu-cookie-law .accept:hover {
  background: var(--wmt-brand-blue-dark) !important;
}

/* Add bottom padding to body so the cookie banner doesn't permanently cover
   the footer when scrolling to the bottom of the page. */
body {
  padding-bottom: 200px;
}

@media (max-width: 600px) {
  #eu_cookie_law_widget-2,
  .widget_eu_cookie_law_widget {
    left: var(--wmt-space-3) !important;
    right: var(--wmt-space-3) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body {
    padding-bottom: 280px;
  }
}

/* ==========================================================================
   13. Utility — normalize Rehub's font-size shortcodes
   (these set font sizes in px via class names like .font130, .font120)
   We let them inherit from the parent element instead.
   DOES NOT touch colors.
   ========================================================================== */

.font130, .font120, .font110, .font100 {
  font-size: inherit !important;
}

.fontbold { font-weight: 600 !important; }
.fontnormal { font-weight: 400 !important; }
.fontitalic { font-style: italic !important; }

.lineheight25 { line-height: 1.4 !important; }
.lineheight20 { line-height: 1.6 !important; }

.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.mb15 { margin-bottom: var(--wmt-space-3) !important; }
.mb10 { margin-bottom: var(--wmt-space-2) !important; }
.mb20 { margin-bottom: var(--wmt-space-4) !important; }
.mt10 { margin-top: var(--wmt-space-2) !important; }
.mt20 { margin-top: var(--wmt-space-4) !important; }
.mr20 { margin-right: var(--wmt-space-4) !important; }

/* ==========================================================================
   14. Focus states (a11y)
   ========================================================================== */

a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--wmt-brand-blue);
  outline-offset: 2px;
}

/* ==========================================================================
   14a. Rehub wishlist fix — hide "Save Saved Removed" labels when JS fails
   ========================================================================== */

/* Rehub's wishlist button shows three labels (Save / Saved / Removed) and
   toggles their visibility via JS. When JS fails or before it loads, all
   three show as plain text. Hide the inactive states by default; JS will
   un-hide the appropriate one based on user state. */
.wishaddwrap,
.wishaddedwrap,
.wishremovedwrap {
  display: none !important;
}

/* When JS marks an item as wished, .alreadywish class is added — show the
   "Saved" label only in that case. */
.alreadywish .wishaddedwrap,
.wishaddedwrap.is-active {
  display: inline !important;
}

/* Active "Save" button (not yet wished) — show as a clean icon button */
.favour_in_row .heart_thumb_wrap,
.favour_in_image .heart_thumb_wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--wmt-space-1);
  background: transparent !important;
  color: var(--wmt-text-muted) !important;
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-pill);
  padding: var(--wmt-space-1) var(--wmt-space-3) !important;
  font-size: 0.75rem !important;
  font-family: var(--wmt-font-body) !important;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--wmt-transition);
}

.favour_in_row .heart_thumb_wrap:hover,
.favour_in_image .heart_thumb_wrap:hover {
  background: var(--wmt-brand-blue-soft) !important;
  color: var(--wmt-brand-blue) !important;
  border-color: var(--wmt-brand-blue);
}

.favour_in_row .heart_thumb_wrap .heartplus,
.favour_in_image .heart_thumb_wrap .heartplus {
  color: inherit !important;
  font-size: 0.875rem;
}

.favour_in_row .heart_thumb_wrap .thumbscount,
.favour_in_image .heart_thumb_wrap .thumbscount {
  position: static !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0.75rem !important;
  font-family: var(--wmt-font-mono) !important;
}

/* ==========================================================================
   15a. Homepage Hero + Card Grids
   ========================================================================== */

/* Hero section — first viewport on homepage */
.wmt-hero {
  padding: var(--wmt-space-7) 0 var(--wmt-space-6);
  text-align: center;
  border-bottom: 1px solid var(--wmt-border);
  margin-bottom: var(--wmt-space-6);
}

.wmt-hero-subtitle {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--wmt-text-soft);
  max-width: 720px;
  margin: 0 auto var(--wmt-space-5);
  font-weight: 400;
}

.wmt-hero-buttons {
  display: flex;
  gap: var(--wmt-space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--wmt-space-4);
}

.wmt-cta-primary,
.wmt-cta-secondary {
  display: inline-block;
  padding: var(--wmt-space-3) var(--wmt-space-6) !important;
  font-family: var(--wmt-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: var(--wmt-radius-md) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all var(--wmt-transition) !important;
  border: 1px solid transparent !important;
  line-height: 1.4 !important;
  cursor: pointer;
}

.wmt-cta-primary {
  background: var(--wmt-brand-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -2px rgba(21, 7, 130, 0.3);
}

.wmt-cta-primary:hover {
  background: var(--wmt-brand-blue-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(21, 7, 130, 0.4);
}

.wmt-cta-secondary {
  background: transparent !important;
  color: var(--wmt-brand-blue) !important;
  border-color: var(--wmt-brand-blue) !important;
}

.wmt-cta-secondary:hover {
  background: var(--wmt-brand-blue-soft) !important;
  color: var(--wmt-brand-blue-dark) !important;
  text-decoration: none !important;
}

.wmt-hero-meta {
  font-size: 0.8125rem;
  color: var(--wmt-text-muted);
  margin: var(--wmt-space-3) 0 0;
}

/* Section titles — consistent across the homepage */
.wmt-section-title {
  font-family: var(--wmt-font-head) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  color: var(--wmt-brand-blue) !important;
  text-align: center;
  margin: var(--wmt-space-7) 0 var(--wmt-space-5) !important;
  letter-spacing: -0.015em;
}

.wmt-section-link {
  text-align: center;
  margin: var(--wmt-space-3) 0 var(--wmt-space-6);
}

.wmt-section-link a {
  font-weight: 600;
  color: var(--wmt-brand-blue);
  text-decoration: none;
}

.wmt-section-link a:hover {
  color: var(--wmt-brand-blue-dark);
  text-decoration: underline;
}

/* Card grid — used for "So arbeiten wir" and "Was möchtest du zuerst klären?" */
.wmt-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wmt-space-4);
  margin: var(--wmt-space-5) 0;
}

@media (min-width: 768px) {
  .wmt-card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .wmt-card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Individual card */
.wmt-card {
  background: var(--wmt-bg);
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-lg);
  padding: var(--wmt-space-6);
  box-shadow: var(--wmt-shadow-sm);
  transition: box-shadow var(--wmt-transition), border-color var(--wmt-transition), transform var(--wmt-transition);
  position: relative;
  display: block;
  text-decoration: none !important;
  color: inherit;
}

.wmt-card:hover {
  box-shadow: var(--wmt-shadow-lg);
  border-color: var(--wmt-brand-blue);
  transform: translateY(-2px);
}

.wmt-card h3 {
  font-family: var(--wmt-font-head) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--wmt-brand-blue) !important;
  margin: 0 0 var(--wmt-space-2) !important;
  line-height: 1.3;
}

.wmt-card p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--wmt-text-soft);
  margin: 0;
}

/* Card icon (for "So arbeiten wir" cards) */
.wmt-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--wmt-brand-blue-soft);
  color: var(--wmt-brand-blue);
  border-radius: 50%;
  font-family: var(--wmt-font-head);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: var(--wmt-space-3);
}

/* Card step number (for "Was möchtest du zuerst klären?" cards) */
.wmt-card-step {
  font-family: var(--wmt-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wmt-text-muted);
  letter-spacing: 0.08em;
  margin-bottom: var(--wmt-space-3);
}

/* Card arrow indicator (for clickable cards) */
.wmt-card-arrow {
  display: inline-block;
  margin-top: var(--wmt-space-3);
  color: var(--wmt-brand-blue);
  font-size: 1.25rem;
  font-weight: 600;
  transition: transform var(--wmt-transition);
}

.wmt-card-link:hover .wmt-card-arrow {
  transform: translateX(4px);
}

/* Clickable card variant */
.wmt-card-link {
  cursor: pointer;
}

.wmt-card-link:hover h3 {
  text-decoration: none;
}

/* Disclaimer box — moved to bottom of hero section */
.wmt-disclaimer {
  background: var(--wmt-bg-warm);
  border: 1px solid var(--wmt-border);
  border-radius: var(--wmt-radius-md);
  padding: var(--wmt-space-5) var(--wmt-space-6);
  margin: var(--wmt-space-7) 0 var(--wmt-space-6);
  font-size: 0.875rem;
  color: var(--wmt-text-soft);
}

.wmt-disclaimer h3 {
  font-family: var(--wmt-font-head) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--wmt-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--wmt-space-3) !important;
  padding-bottom: var(--wmt-space-2);
  border-bottom: 1px solid var(--wmt-border);
}

.wmt-disclaimer p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--wmt-text-muted);
  margin: 0 0 var(--wmt-space-2);
}

.wmt-disclaimer p:last-child {
  margin-bottom: 0;
}

.wmt-disclaimer strong {
  color: var(--wmt-text-soft);
}

/* Mobile responsive — cards stack vertically */
@media (max-width: 767px) {
  .wmt-card-grid {
    grid-template-columns: 1fr;
    gap: var(--wmt-space-3);
  }

  .wmt-card {
    padding: var(--wmt-space-5);
  }

  .wmt-hero-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto var(--wmt-space-4);
  }

  .wmt-cta-primary,
  .wmt-cta-secondary {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   16. Print
   ========================================================================== */

@media print {
  #main_header, #footer, #sidebar, .breadcrumb,
  .tradingview-widget-container, #eu-cookie-law,
  .responsive_nav_wrap, .wmt-top-ad-strip {
    display: none !important;
  }

  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}