/**
 * Styles for the site-wide Codeconomy header/footer
 * (codeconomy_render_site_header/footer() in functions.php, called from
 * header.php/footer.php) plus the custom homepage body
 * (page-codeconomy-homepage.php). Enqueued site-wide in functions.php —
 * see codeconomy_enqueue_homepage_assets().
 *
 * SPECIFICITY NOTE: `.cc-home .cc-wrap` below is a 2-class selector (0,2,0)
 * that sets a full `padding` shorthand (all 4 sides). Any *bare* 1-class
 * selector combined with `.cc-wrap` on the same element (e.g. a hypothetical
 * `.cc-section-pad { padding: ... }`) loses to it regardless of source
 * order or which one is "more specific-feeling" — CSS resolves by specificity
 * first, source order only breaks ties. This bit us twice already (the news/
 * service section padding, then `.cc-stats-grid`). The fix used throughout
 * this file: give section-specific padding rules the SAME 2-class shape by
 * combining with `.cc-wrap` in the selector (e.g. `.cc-wrap.cc-stats-grid`),
 * and always set all four sides explicitly rather than relying on a partial
 * shorthand from a different rule to fill in the rest.
 */

/* AVADA REMOVAL — three rules deleted here.
   They were pure Avada workarounds and became actively harmful once the theme
   owned its own markup:

     .cc-full-width #main.width-100 { --hundredp_padding-fallback_to_zero: 0 }
       Overrode an Avada CSS variable. Avada's #main.width-100 no longer exists.

     .cc-full-width #main { margin/padding 0 !important; background:#1E1E1E !important }
       Forced a dark background onto #main because Avada's own #main defaulted
       to white and showed through as a stray gap. Our #main has no padding and
       no background of its own, so this is unnecessary — and the !important
       dark background actively broke the cart and checkout, which have to stay
       light. Each page wrapper now owns its own background instead.

     .cc-full-width #sliders-container { display: none !important }
       Hid the always-empty Fusion Builder slider slot that Avada's header.php
       printed on every page. Our header.php never prints it.

   Three !important declarations gone, and the class of bug they papered over
   with them. */

/* mike-style.css's `.single-product .product-fullwidth-bg { margin: 0 -30px; }`
   is a legacy breakout trick — it exists to cancel out #main's normal 30px
   padding so this element's own `padding: 100px 30px` reads as full-bleed.
   On this (.cc-full-width) product page #main's padding is already forced
   to 0 above, so that negative margin has nothing left to cancel out and
   just bleeds the element 30px past the real edge on both sides instead
   (invisible — clipped by body's overflow-x:hidden — but it silently
   widened the page past the viewport, same class of bug as the grid-item
   min-width:auto gotchas elsewhere in this file, different root cause). */
.cc-full-width .product-fullwidth-bg { margin: 0; }

/* Global in the design's own <style> block (`input::placeholder { color:
   #8B8B8B; }`) — scoped here to our own containers instead of a bare
   `input::placeholder` so it doesn't touch unrelated forms elsewhere on the
   site (checkout, contact) that aren't part of this redesign. Without it,
   placeholders fall back to whatever default text color applies (near-black
   here), unreadable against the dark #2B2B2B input backgrounds. */
.cc-home input::placeholder, .cc-shop input::placeholder, .cc-blog input::placeholder, .cc-article input::placeholder { color: #8B8B8B; opacity: 1; }

.cc-home * { box-sizing: border-box; }
.cc-home, .cc-topbar, .cc-header, .cc-footer, .cc-mobile-nav { font-family: "Inter", system-ui, sans-serif; }
/* Avada's `.fusion-row` (the direct parent of every one of these page-level
   wrapper divs) is `display: flex`, so each wrapper is itself a flex item —
   with no explicit flex-basis, its width follows flex-basis:auto, which
   falls back to the item's own *preferred* (max-content) size, floored by
   its automatic minimum size (its min-content) unless min-width is set.
   Any single unbreakable word anywhere inside — a grid/flex-item card
   title, a hero heading, a topic pill, however many levels deep — can
   inflate that min-content and silently widen the ENTIRE page wrapper
   (and therefore every full-bleed section inside it) past the real
   viewport, invisibly clipped by body's own overflow-x:hidden. This hit
   .cc-hero-grid's text column (tablet), .cc-service-card and
   .cc-product-card (mobile) as three separate-looking bugs before the
   shared root cause was found here — min-width:0 on the actual page
   wrapper is the one fix that closes off the whole class of bug, rather
   than patching each new long word's container as it's discovered. Add
   the same line to any new top-level `.cc-*` wrapper div added to a
   future page template. */
.cc-home { background: #1E1E1E; min-width: 0; }
.cc-home a { text-decoration: none; }
.cc-home h1, .cc-home h2, .cc-home h3, .cc-home h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.cc-home p { margin: 0; }
.cc-home .cc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ---------- Top utility bar + header ---------- */
.cc-topbar { background: #000000; font-size: 14px; padding: 10px 0; color: #8B8B8B; }
.cc-topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.cc-topbar a { color: #8B8B8B; text-decoration: none; }
.cc-topbar a:hover { color: #13EBDE; }
.cc-header { position: sticky; top: 0; z-index: 999; background: #1E1E1E; border-bottom: 1px solid #2B2B2B; }
.cc-header-row { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 80px; display: flex; align-items: center; gap: 44px; }
.cc-logo { display: flex; align-items: center; gap: 9px; }
.cc-logo img { height: 20px; width: auto; display: block; }
.cc-logo-fallback { font-weight: 700; font-size: 20px; color: #fff; text-transform: uppercase; }
.cc-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; font-size: 18px; font-weight: 400; }
.cc-nav a { color: #fff; text-decoration: none; white-space: nowrap; }
.cc-nav a:hover { color: #13EBDE; }
.cc-actions { display: flex; align-items: center; gap: 12px; }
.cc-icon-btn { width: 40px; height: 40px; border: 1px solid #2B2B2B; background: transparent; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cc-icon-btn:hover { border-color: #13EBDE; color: #13EBDE; }
.cc-cart-btn { display: flex; align-items: center; gap: 8px; border: 1px solid #2B2B2B; color: #fff; padding: 11px 16px; font-size: 18px; font-weight: 700; text-decoration: none; }
.cc-cart-btn:hover { border-color: #13EBDE; color: #13EBDE; }
.cc-cart-badge { background: #13EBDE; color: #000; font-size: 14px; padding: 1px 7px; }
.cc-burger { display: none; }
.cc-mobile-nav { display: none; flex-direction: column; background: #1E1E1E; border-bottom: 1px solid #2B2B2B; }
.cc-mobile-nav.is-open { display: flex; }
.cc-mobile-nav a { color: #fff; text-decoration: none; font-size: 18px; padding: 14px 32px; border-top: 1px solid #2B2B2B; }
.cc-mobile-nav a:hover { color: #13EBDE; }
@media (max-width: 1120px) { .cc-nav { gap: 22px; } .cc-nav a { font-size: 16px; } }
@media (max-width: 1060px) {
	.cc-nav, .cc-cart-label { display: none !important; }
	.cc-burger { display: flex !important; }
	.cc-header-row { gap: 16px; }
	.cc-actions { margin-left: auto; }
}

/* ---------- Hero ---------- */
.cc-hero { position: relative; overflow: hidden; background: #1E1E1E; }
.cc-hero-bg { position: absolute; inset: 0; background-image: linear-gradient(#2B2B2B 1px, transparent 1px), linear-gradient(90deg, #2B2B2B 1px, transparent 1px); background-size: 80px 80px; }
.cc-hero-grid { position: relative; display: grid; grid-template-columns: 1fr; padding: clamp(56px,6vw,104px) 0 0; }
/* Same "grid item defaults to min-width: auto" gotcha as the blog/article
   sidebars (see CLAUDE.md) — hit tablet widths (~768px) specifically,
   where .cc-hero-grid collapses to a single 1fr column (below) but the
   text column's h1 (a long unbreakable word at a large clamp() font-size)
   still refuses to shrink below its own min-content width, silently
   pushing .cc-wrap ~31px past the viewport (clipped by body's
   overflow-x:hidden, so no scrollbar — but every .cc-wrap's right-edge
   padding effectively vanishes, pressing content flush against the
   viewport edge instead of the intended 32px margin). */
.cc-hero-grid > div { min-width: 0; }
.cc-hero-eyebrow { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #13EBDE; }
.cc-hero h1 { font-size: clamp(26px,7.5vw,66px); line-height: 1.2; text-transform: uppercase; margin: 22px 0 26px; max-width: 20ch; color: #fff; overflow-wrap: break-word; hyphens: auto; }
.cc-hero h1 span { color: #13EBDE; }
.cc-hero p.cc-lead { font-size: 18px; line-height: 1.7; color: #8B8B8B; max-width: 60ch; }
.cc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.cc-btn-solid { background: #13EBDE; color: #000; padding: 16px 30px; font-size: 18px; font-weight: 700; display: inline-block; }
.cc-btn-solid:hover { background: #46FFF4; color: #000; }
.cc-btn-outline { border: 1px solid #8B8B8B; color: #fff; padding: 16px 30px; font-size: 18px; font-weight: 700; display: inline-block; }
.cc-btn-outline:hover { border-color: #13EBDE; color: #13EBDE; }
.cc-topics { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 80px; border-top: 1px solid #2B2B2B; position: relative; }
/* min-width:0 on .cc-topic fixes ITS OWN box (a grid item of .cc-topics),
   but its label text is a bare text node — an anonymous flex item of
   .cc-topic itself (display:flex below) — and overflow-wrap/hyphens don't
   reduce a flex item's automatic minimum size the way min-width:0 does;
   only min-width:0 on the actual overflowing item works, and you can't
   select an anonymous text-node box in CSS. word-break:break-all sidesteps
   this (it does affect the automatic minimum size) at the cost of losing
   "nice" word-boundary/hyphenation breaks — an acceptable tradeoff for a
   short label vs. text visibly overlapping the next grid column, which is
   what happened on real German compound words ("Vertriebsunterstützung")
   at mobile width (2-column layout, ~163px per cell). */
.cc-topic { min-width: 0; padding: 24px 15px; border-right: 1px solid #2B2B2B; font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: flex-start; gap: 11px; overflow-wrap: break-word; word-break: break-all; hyphens: auto; }
.cc-topic span { width: 7px; height: 7px; background: #13EBDE; flex: none; margin-top: 9px; }

/* ---------- Branchen News ---------- */
.cc-news { background: #1E1E1E; }
.cc-news-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 28px; margin-bottom: 48px; }
.cc-news-head h2 { font-size: clamp(32px,3.8vw,50px); text-transform: uppercase; color: #fff; }
.cc-news-head .cc-sub { font-size: 18px; font-weight: 700; color: #8B8B8B; margin-top: 12px; }
.cc-news-more { font-size: 18px; font-weight: 700; color: #13EBDE; border-bottom: 2px solid #13EBDE; padding-bottom: 5px; }
.cc-news-more:hover { color: #46FFF4; }
.cc-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cc-news-card { background: #2B2B2B; display: flex; flex-direction: column; }
.cc-news-card:hover { outline: 1px solid #13EBDE; }
.cc-news-thumb { background: repeating-linear-gradient(135deg, #333333 0 12px, #2E2E2E 12px 24px); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cc-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-news-body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cc-news-date { font-size: 14px; color: #8B8B8B; }
.cc-news-title { font-size: 22px; line-height: 1.35; color: #fff; }
.cc-news-title a { color: inherit; }
.cc-news-excerpt { font-size: 16px; line-height: 1.65; color: #8B8B8B; }
.cc-news-read { margin-top: auto; padding-top: 16px; font-size: 18px; font-weight: 700; color: #13EBDE; }
.cc-news-read:hover { color: #46FFF4; }

/* ---------- Stats band ---------- */
.cc-stats { background: #13EBDE; color: #000; }
.cc-wrap.cc-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding: clamp(40px,8vw,30px) 32px; }
.cc-stat { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; border-left: 2px solid rgba(0,0,0,0.28); }
.cc-stat-value { font-size: clamp(44px,5vw,64px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.cc-stat-label { font-size: 18px; font-weight: 700; line-height: 1.5; max-width: 20ch; }

/* ---------- Service overview ---------- */
.cc-service { background: #F7F7F7; color: #1E1E1E; }
.cc-service-head { max-width: 680px; margin-bottom: 52px; }
.cc-service-head .cc-eyebrow-dark { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #1E1E1E; }
.cc-service-head h2 { font-size: clamp(30px,3.4vw,44px); margin-top: 16px; color: #1E1E1E; }
.cc-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* Same grid-item min-width:auto gotcha as .cc-hero-grid above — hits at
   mobile widths (~390px) once this grid drops to a single 1fr column;
   an unbreakable word in .cc-service-title ("Transaktionsdatenbank")
   refused to shrink below its own min-content, silently widening
   .cc-home (and therefore every full-bleed section on the page) past
   the viewport. */
.cc-service-card { background: #fff; padding: 38px 32px 40px; display: flex; flex-direction: column; gap: 14px; border-top: 4px solid #13EBDE; min-width: 0; }
.cc-service-num { font-size: 15px; font-weight: 700; color: #8B8B8B; }
.cc-service-title { font-size: 22px; line-height: 1.3; color: #1E1E1E; overflow-wrap: break-word; }
.cc-service-body { font-size: 16px; line-height: 1.7; color: #8B8B8B; }

/* News + Service sections share this generous section padding. */
.cc-wrap.cc-section-pad { padding: clamp(64px,7vw,110px) 32px; }

/* ---------- Newsletter ---------- */
/* Reuses the existing #newsletter_form_updated markup/JS (see
   templates/newsletter-form.html) but that markup carries legacy
   Avada-wrapper-scoped CSS (rounded pill box, white inputs, heading color
   scoped to `#wrapper.fusion-wrapper`) that doesn't apply here since this
   template doesn't use Avada's wrapper. Reset it to match the flat dark
   design instead.

   It also nests h2/p/form three levels deep
   (.footer-newsletter > .footer-newsletter-content > (h2, p, .image-row >
   form)) — not a flat structure. `display: contents` on the two wrapper
   divs flattens them out of the box model so their children become direct
   items of one grid, without touching the form's functional markup.
   (.image-row is now a single-child wrapper — it used to pair the form with
   a decorative SVG that QA had removed — and is kept only because the
   flattening rule below is what makes the form a grid item.) */
.cc-newsletter-section { background: #1E1E1E; }
.cc-newsletter-section .cc-wrap { padding-top: clamp(64px,7vw,100px); padding-bottom: clamp(64px,7vw,100px); }
/* row-gap stays 0 deliberately: h2/p/form sit in separate grid ROWS (1/2/3)
   and carry their own margins, so any row `gap` would stack on top of those
   and pull the heading/subtitle/form apart. This was a two-column grid until
   the decorative SVG in column 2 was removed (QA: no valid data, no message);
   the row assignments are kept because the form's placement rules depend on
   them and on `display: contents` flattening the two wrapper divs. */
.cc-newsletter-section .footer-newsletter { display: grid !important; grid-template-columns: 1fr; row-gap: 0; align-items: center; max-width: none !important; margin: 0 !important; background: none !important; backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; }
.cc-newsletter-section .footer-newsletter-content { display: contents; }
.cc-newsletter-section .image-row { display: contents; }
.cc-newsletter-section h2.footer-newsletter-content__title { grid-column: 1; grid-row: 1; color: #fff !important; font-size: clamp(30px,3.4vw,44px) !important; text-transform: uppercase; margin-bottom: 14px !important; align-self: end; }
.cc-newsletter-section p.footer-newsletter-content__subtitle { grid-column: 1; grid-row: 2; color: #8B8B8B !important; font-size: 18px; font-weight: 700; margin-bottom: 32px !important; align-self: start; }
.cc-newsletter-section form { grid-column: 1; grid-row: 3; display: flex !important; flex-direction: column; gap: 14px; max-width: 460px; align-self: start; }
.cc-newsletter-section form label { font-size: 14px; color: #8B8B8B; margin: 0; }
/* The real form markup has inline `margin-bottom:20px; height:40px` on these
   inputs (needed intact elsewhere on the site where this same form is
   reused). Both must be neutralized here: the margin would stack on top of
   the flex `gap` above and roughly double the vertical rhythm, and the fixed
   height would conflict with our padding under content-box sizing (padding
   normally adds to a set height, making the field far taller than intended).
   `box-sizing: border-box` + `height: auto` + `margin: 0` make padding the
   only thing controlling size, and `gap` the only thing controlling spacing. */
.cc-newsletter-section form input[type="text"],
.cc-newsletter-section form input[type="email"] { background: #2B2B2B !important; border: 1px solid #2B2B2B !important; color: #fff !important; border-radius: 0 !important; padding: 14px 16px !important; font-size: 16px; box-sizing: border-box; height: auto !important; margin: 0 !important; width: 100% !important; }
.cc-newsletter-section .tandc { align-items: flex-start; gap: 11px; margin: 0; }
.cc-newsletter-section .tandc span { color: #8B8B8B; font-size: 14px; line-height: 1.6; padding-left: 0; }
.cc-newsletter-section .tandc a { color: #fff; }
.cc-newsletter-section input[type="submit"] { background: #13EBDE !important; color: #000 !important; border: none !important; padding: 17px !important; font-size: 18px; font-weight: 700; cursor: pointer; margin: 4px 0 0 !important; border-radius: 0 !important; }
.cc-newsletter-section input[type="submit"]:hover { background: #46FFF4 !important; }
@media (max-width: 980px) {
	.cc-newsletter-section .footer-newsletter { grid-template-columns: 1fr !important; }
	.cc-newsletter-section h2.footer-newsletter-content__title,
	.cc-newsletter-section p.footer-newsletter-content__subtitle,
	.cc-newsletter-section form { grid-column: 1; }
}

/* ---------- Footer ---------- */
.cc-footer { background: #000000; color: #8B8B8B; font-size: 18px; }
.cc-footer-grid { max-width: 1280px; margin: 0 auto; padding: 76px 32px 44px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; }
.cc-footer a { color: #8B8B8B; text-decoration: none; }
.cc-footer a:hover { color: #13EBDE; }
.cc-footer-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.cc-footer-logo img { height: 18px; width: auto; }
.cc-footer-logo-fallback { font-weight: 700; font-size: 19px; color: #fff; text-transform: uppercase; }
.cc-footer-desc { font-size: 16px; line-height: 1.7; max-width: 40ch; }
.cc-footer h5 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; margin: 0 0 12px; font-weight: 700; }
.cc-footer-col { display: flex; flex-direction: column; gap: 13px; }
.cc-footer-payment { margin-top: 30px; }
.cc-footer-badge { width: 120px; height: 38px; background: #2B2B2B; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #8B8B8B; }
.cc-footer-address { line-height: 1.6; }
.cc-footer-bottom { max-width: 1280px; margin: 0 auto; padding: 22px 32px 40px; border-top: 1px solid #2B2B2B; font-size: 14px; }
@media (max-width: 980px) { .cc-footer-grid { grid-template-columns: 1fr 1fr !important; } }

/* ---------- Shared responsive breakpoints ---------- */
@media (max-width: 1100px) { .cc-topics { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 720px) { .cc-topics { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 980px) {
	.cc-news-grid, .cc-wrap.cc-stats-grid, .cc-service-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Shop archive (archive-product.php) — "Codeconomy Shop" design
   ========================================================================== */
.cc-shop * { box-sizing: border-box; }
/* min-width:0 — see the long comment on .cc-home above; same
   .fusion-row-is-flex root cause, applies to every page wrapper. */
.cc-shop { background: #1E1E1E; font-family: "Inter", system-ui, sans-serif; min-width: 0; }
.cc-shop .cc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.cc-shop-hero { position: relative; overflow: hidden; border-bottom: 1px solid #2B2B2B; background: #1E1E1E; padding: 40px 0; }
.cc-shop-hero-bg { position: absolute; inset: 0; background-image: linear-gradient(#2B2B2B 1px, transparent 1px), linear-gradient(90deg, #2B2B2B 1px, transparent 1px); background-size: 80px 80px; }
.cc-shop-hero-inner { position: relative; padding: clamp(48px,5vw,80px) 0; }
.cc-breadcrumb { font-size: 14px; color: #8B8B8B; }
.cc-breadcrumb a { color: #8B8B8B; }
.cc-breadcrumb a:hover { color: #13EBDE; }
.cc-breadcrumb .current { color: #fff; }
.cc-shop-hero h1 { font-size: clamp(36px,5vw,64px); line-height: 1.16; text-transform: uppercase; margin: 18px 0 14px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
.cc-shop-hero p { font-size: 18px; font-weight: 700; color: #8B8B8B; margin: 0; }
/* .cc-wrap.cc-shop-body (not bare .cc-shop-body) — see the specificity note
   at the top of this file. `.cc-shop .cc-wrap` is a 2-class selector that
   would otherwise win the padding property and zero this out regardless of
   source order. */
.cc-wrap.cc-shop-body { padding: clamp(40px,4vw,64px) 32px clamp(64px,7vw,100px); }
.cc-shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid #2B2B2B; }
.cc-cat-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.cc-cat-tabs a { padding: 13px 22px; background: #2B2B2B; color: #fff; font-size: 18px; font-weight: 400; text-decoration: none; }
.cc-cat-tabs a:hover { color: #13EBDE; }
.cc-cat-tabs a.is-active { background: #13EBDE; color: #000; font-weight: 700; }
.cc-cat-tabs a.is-active:hover { background: #46FFF4; color: #000; }
/* Real Advanced Woo Search (Pro) markup (`[aws_search_form]`, see
   archive-product.php) — its own `common.min.css` (enqueued site-wide by the
   plugin) already draws a light-themed box; these overrides just fit it into
   the dark shop chrome. `.aws-search-field`'s own rule is the same 2-class
   specificity as ours, so !important is needed to win the tie (no anomaly,
   just a real tie — see the project's other plugin-CSS fights for the same
   pattern). The results dropdown (`.aws-search-result`) is deliberately left
   at the plugin's own white/light styling, same as every other live-search
   dropdown on this site (blog sidebar, header search). */
.cc-shop-search { min-width: 280px; flex: 0 1 340px; }
.cc-shop-search .aws-container { width: 100%; }
.cc-shop-search .aws-search-form { border: 1px solid #2B2B2B; background: #2B2B2B !important; }
.cc-shop-search .aws-search-field { background: transparent !important; color: #fff !important; border: none !important; font-size: 16px; font-family: inherit; padding: 13px 14px; }
.cc-shop-search .aws-search-field::placeholder { color: #8B8B8B; opacity: 1; }
.cc-shop-search .aws-search-form .aws-form-btn { background: #13EBDE !important; border: none !important; }
.cc-shop-search .aws-search-form .aws-form-btn:hover { background: #46FFF4 !important; }
.cc-shop-search .aws-search-btn_icon { color: #000; }
.cc-shop-search .aws-search-clear { color: #8B8B8B; }
.cc-shop-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 26px 0; }
.cc-shop-meta > span { font-size: 16px; color: #8B8B8B; }
/* Same flex min-width:auto gotcha as .cc-hero-grid etc. — a native
   <select> with no explicit width defaults to its longest <option>'s text
   (WooCommerce's German sort labels, e.g. "Sortierung nach Durchschnittlicher
   Bewertung", are long), which is fine at desktop/tablet widths but
   overflows the shop-meta row once it's narrower than that at mobile.
   min-width:0 lets it actually shrink instead of forcing the row wider. */
.cc-order-form { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #8B8B8B; min-width: 0; }
.cc-order-form .woocommerce-ordering { display: inline-flex; margin: 0; min-width: 0; }
.cc-order-form select.orderby { background: #1E1E1E; color: #fff; border: 1px solid #2B2B2B; font-family: inherit; font-size: 16px; font-weight: 700; padding: 6px 10px; min-width: 0; max-width: 100%; }
.cc-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
/* Same grid-item min-width:auto gotcha as .cc-hero-grid/.cc-service-card
   (see CLAUDE.md) — a long product title with no natural break point was
   silently widening the whole 2-column shop grid past the tablet
   viewport (columns computed unevenly, e.g. 307px/390px instead of an
   even split, instead of overflowing gracefully). */
.cc-product-card { background: #2B2B2B; display: flex; flex-direction: column; list-style: none; min-width: 0; }
.cc-product-card:hover { outline: 1px solid #13EBDE; }
.cc-product-card-body { padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; border-top: 4px solid #13EBDE; }
.cc-product-cat-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; }
.cc-product-title { font-size: 20px; line-height: 1.35; color: #fff; margin: 0; overflow-wrap: break-word; }
.cc-product-title a { color: inherit; }
.cc-product-bullets { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cc-product-bullets li { display: flex; gap: 10px; font-size: 16px; line-height: 1.55; color: #8B8B8B; }
.cc-product-bullets li span { width: 6px; height: 6px; background: #13EBDE; flex: none; margin-top: 8px; border-radius: 0; }
.cc-product-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid #333333; }
.cc-product-price { font-size: 28px; font-weight: 700; color: #13EBDE; letter-spacing: -0.03em; }
.cc-product-price del { color: #8B8B8B; font-size: 16px; font-weight: 400; opacity: .7; }
.cc-product-price ins { text-decoration: none; }
.cc-product-unit { font-size: 14px; color: #8B8B8B; display: block; }
.cc-product-cta { display: flex; margin-top: 18px; }
.cc-product-cta a, .cc-product-cta .button { background: #13EBDE !important; color: #000 !important; padding: 12px 20px !important; font-size: 18px !important; font-weight: 700 !important; text-decoration: none !important; border: none !important; font-family: inherit !important; cursor: pointer; }
.cc-product-cta a:hover, .cc-product-cta .button:hover { background: #46FFF4 !important; color: #000 !important; }
.cc-shop-pagination { display: flex; align-items: center; gap: 10px; margin-top: 44px; flex-wrap: wrap; }
.cc-shop-pagination .page-numbers { min-width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid #2B2B2B; color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }
.cc-shop-pagination .page-numbers:hover { border-color: #13EBDE; color: #13EBDE; }
.cc-shop-pagination .page-numbers.current { background: #13EBDE; color: #000; border-color: #13EBDE; }
.cc-no-products { color: #8B8B8B; font-size: 18px; padding: 40px 0; }
@media (max-width: 1100px) { .cc-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cc-product-grid { grid-template-columns: 1fr; } .cc-shop-bar > * { flex: 1 1 100%; } }

/* ==========================================================================
   Blog listing (home.php) — "Codeconomy Blog" design
   ========================================================================== */
.cc-blog *, .cc-article *, .cc-product * { box-sizing: border-box; }
/* min-width:0 — see the long comment on .cc-home above; same
   .fusion-row-is-flex root cause, applies to every page wrapper. */
.cc-blog, .cc-article, .cc-product { background: #1E1E1E; font-family: "Inter", system-ui, sans-serif; min-width: 0; }
.cc-blog .cc-wrap, .cc-article .cc-wrap, .cc-product .cc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.cc-blog-hero { position: relative; overflow: hidden; border-bottom: 1px solid #2B2B2B; background: #1E1E1E; padding: 40px 0; }
.cc-wrap.cc-blog-hero-inner { position: relative; padding: clamp(48px,5vw,80px) 32px; }
.cc-blog-hero h1 { font-size: clamp(34px,4.6vw,58px); line-height: 1.16; text-transform: uppercase; margin-top: 18px; max-width: 24ch; color: #fff; font-weight: 700; letter-spacing: -0.02em; }

.cc-wrap.cc-blog-shell { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; padding: clamp(40px,4vw,64px) 32px clamp(64px,7vw,100px); }

/* .cc-blog-main is a grid item of .cc-blog-shell with no width of its own, so
   it defaults to min-width:auto — the nested .cc-blog-posts grid's min-content
   size (from unbreakable card title/meta text) was forcing the outer 1fr
   track wider than the available space, pushing .cc-blog-sidebar off the
   right edge (no visible scrollbar because the theme sets overflow-x:hidden
   on body, so it just silently clipped instead of scrolling). */
.cc-blog-main { min-width: 0; }
.cc-blog-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; min-width: 0; }
.cc-blog-card { background: #2B2B2B; display: flex; flex-direction: column; min-width: 0; }
.cc-blog-card-thumb { display: block; background: repeating-linear-gradient(135deg, #333333 0 12px, #2E2E2E 12px 24px); aspect-ratio: 16/10; overflow: hidden; }
.cc-blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-blog-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cc-blog-card-meta { font-size: 14px; color: #8B8B8B; }
.cc-blog-card-title { font-size: 22px; line-height: 1.35; color: #fff; margin: 0; overflow-wrap: break-word; word-break: break-word; }
.cc-blog-card-title a { color: inherit; text-decoration: none; }
/* Avada's own global `a:hover { color: var(--link_hover_color) }` (theme
   option, resolves to #1e1e1e — near-black) ties in specificity with the
   line above and wins on source order, turning the title almost invisible
   against the dark card background on hover. This selector is one class
   more specific so it wins outright, no !important needed. */
.cc-blog-card-title a:hover { color: #fff; text-decoration: none; }
.cc-blog-card-more { margin-top: auto; padding-top: 16px; font-size: 18px; font-weight: 700; color: #13EBDE; display: inline-block; }
.cc-blog-card-more:hover { color: #46FFF4; }

.cc-blog-sidebar { display: flex; flex-direction: column; gap: 36px; }
.cc-blog-sidebar .widget { margin: 0; }

/* Search widget (Avada's fusion-styled search form) */
.cc-blog-sidebar .widget_search .fusion-search-form-content { display: flex; border: 1px solid #2B2B2B; background: #2B2B2B; }
.cc-blog-sidebar .widget_search .fusion-search-field { flex: 1; }
/* Avada's own dynamic form CSS sets `border-radius: var(--form_border_radius)`
   (theme option, resolves to 50px) on `input.s` among others — same fight as
   .cc-newsletter-section below, needs !important to win regardless of
   selector specificity (see that block's comment for why). It ALSO sets a
   background-color on that same combined selector — missed originally
   because border-radius was the visible symptom at the time; a plain
   `background: transparent` (no !important) silently lost to it, leaving
   a white search input on this dark sidebar (only actually noticed at
   mobile width, but the underlying cause isn't width-specific). */
/* gesundheitsmarkt.css puts a blanket `margin-top: 20px` on both the search
   field and submit button (same selector specificity as these rules, so
   !important rather than relying on source order to win the tie). */
.cc-blog-sidebar .widget_search input.s { width: 100%; padding: 14px; border: none; border-radius: 0 !important; background-color: transparent !important; color: #fff; font-size: 16px; font-family: inherit; outline: none; margin-top: 0 !important; }
/* Avada's dynamic CSS also sets `::placeholder { color: var(--awb-text-color) }`
   on `.fusion-search-element .searchform .fusion-search-form-content
   .fusion-search-field input::placeholder` — 4 classes vs. our 1, a real
   specificity win (not the usual Avada anomaly), so it renders the dark
   theme-option text color instead of white. !important needed to beat it. */
.cc-blog-sidebar .widget_search input.s::placeholder { color: #fff !important; opacity: 1; }
/* The submit button's label IS the icon -- searchform.php sets
   value="&#xf002;" (FontAwesome magnifying-glass) because an
   <input type="submit"> is a replaced element and can't be given a reliable
   ::before. subset.css declares "Font Awesome 6 Pro" at weights 400 and 900;
   900 is the solid face that holds this glyph. Without these two properties
   the button renders the raw private-use codepoint, i.e. nothing -- a blank
   teal square, which is how the blog sidebar and the search results page
   shipped after the Avada migration. */
.cc-blog-sidebar .widget_search input.fusion-search-submit { width: 48px; height: 100%; border: none; background: #13EBDE; color: #000; font-size: 18px; font-family: "Font Awesome 6 Pro"; font-weight: 900; line-height: 1; cursor: pointer; margin-top: 0 !important; }
.cc-blog-sidebar .widget_search input.fusion-search-submit:hover { background: #46FFF4; }

/* Recent posts widget */
.cc-blog-sidebar .widget_recent_entries .widget-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; margin: 0 0 16px; font-weight: 700; }
.cc-blog-sidebar .widget_recent_entries ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cc-blog-sidebar .widget_recent_entries li { border-top: 1px solid #2B2B2B; padding: 14px 0; }
.cc-blog-sidebar .widget_recent_entries a { font-size: 16px; line-height: 1.5; color: #fff; }
.cc-blog-sidebar .widget_recent_entries a:hover { color: #13EBDE; }

/* Newsletter block widget — same functional #newsletter_form_updated form
   used elsewhere, this copy has no inline styles baked in so no box-sizing/
   margin fight needed like templates/newsletter-form.html. */
.cc-blog-sidebar .aside_newsletter-wrapper { background: #2B2B2B; padding: 26px 24px 28px; border-top: 4px solid #13EBDE; }
.cc-blog-sidebar .aside_newsletter-title h3 { font-size: 20px; margin: 0 0 10px; color: #fff; }
.cc-blog-sidebar .aside_newsletter-text p { font-size: 16px; line-height: 1.65; color: #8B8B8B; margin: 0; }
.cc-blog-sidebar .aside_newsletter-wrapper form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.cc-blog-sidebar .aside_newsletter-wrapper form label { font-size: 14px; color: #8B8B8B; }
.cc-blog-sidebar .aside_newsletter-wrapper input[type="text"],
.cc-blog-sidebar .aside_newsletter-wrapper input[type="email"] { width: 100%; padding: 14px; border: 1px solid #3A3A3A; border-radius: 0; background: #1E1E1E; color: #fff; font-size: 16px; font-family: inherit; }
/* global-sites.css also resets `[type="checkbox"]` to appearance:none with a
   30px left-padding box reserved for a custom-drawn check graphic that this
   form never draws (it relies on the native checkbox), leaving a big blank
   invisible hit area that throws off the tandc row's alignment — restore a
   plain native checkbox matching the design. */
.cc-blog-sidebar .aside_newsletter-wrapper input[type="checkbox"] { all: revert; width: 16px; height: 16px; min-width: 16px; margin: 3px 0 0; padding: 0; accent-color: #13EBDE; flex-shrink: 0; }
.cc-blog-sidebar .aside_newsletter-wrapper .tandc { display: flex; gap: 10px; font-size: 14px; color: #8B8B8B; line-height: 1.6; align-items: flex-start; }
.cc-blog-sidebar .aside_newsletter-wrapper .tandc a { color: #fff; }
.cc-blog-sidebar .aside_newsletter-wrapper input[type="submit"] { background: #13EBDE !important; color: #000 !important; border: none !important; padding: 15px !important; font-size: 18px; font-weight: 700; cursor: pointer; margin-top: 4px; font-family: inherit !important; }
.cc-blog-sidebar .aside_newsletter-wrapper input[type="submit"]:hover { background: #46FFF4 !important; }

/* Not in the design's sidebar — real content, but keeping the layout to
   exactly the 3 widgets the design specifies. */
.cc-blog-sidebar .widget_woocommerce_products { display: none; }

@media (max-width: 980px) {
	.cc-wrap.cc-blog-shell { grid-template-columns: 1fr !important; gap: 48px !important; }
	.cc-blog-posts { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) { .cc-blog-posts { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   Single article (single.php) — "Codeconomy Article" design. Reuses
   .cc-blog-sidebar as-is (same real widgets, identical visual design) and
   the .cc-blog/.cc-wrap base resets above. The design's "facts" grid
   (Target/Markt/Land/Käufer/Erwerbertyp) is intentionally not implemented —
   no reliable real per-post data source for it yet (would need matching a
   specific Airtable Deals record to this exact post); revisit if that
   linkage gets built.
   ========================================================================== */
.cc-article a { color: #13EBDE; text-decoration: none; }
/* Avada's bare `a:hover { color: var(--link_hover_color) }` (see the blog
   card title comment above) ties in specificity with plain `.cc-article a`
   — every real link on this page needs its own :hover rule at least this
   specific to avoid the same near-invisible-on-hover bug. */
.cc-article a:hover { color: #46FFF4; }

.cc-wrap.cc-article-shell { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; padding: clamp(36px,4vw,56px) 32px clamp(64px,7vw,100px); }
/* Same min-width:auto grid-overflow bug as .cc-blog-main (see that comment
   above) — the real article text has long unbreakable content pushing the
   1fr track wider than available space without this. */
.cc-article-main { min-width: 0; }

/* Overriding Avada's own default .single-navigation styling (light-grey
   borders, dark icon color meant for a white page background) so the real
   prev/next post links fit the dark theme instead of looking like a
   leftover default-theme element.
   .cc-article-pn-nav is a SIBLING of .cc-article, both flex items of the
   same .fusion-row (display:flex; flex-wrap:wrap) — not a descendant, so
   none of .cc-article's own dark-background/`.cc-wrap` padding rules
   reach it. With only one short link inside and no flex-grow, it only
   takes up its own content's width (~200px) and wraps onto its own row
   (since .cc-article's 100%-width claim doesn't fit next to it) — the
   rest of that first row was .fusion-row's own (default, light) uncovered
   background, a stark white sliver above the real dark article content.
   width:100% makes the nav's own row fully dark instead of mostly bare. */
.cc-article-pn-nav.single-navigation { min-height: 0; line-height: normal; border-top: 1px solid #2B2B2B !important; border-bottom: none !important; margin-bottom: 0; display: flex; justify-content: space-between; gap: 24px; padding: 18px 32px; font-size: 16px; font-weight: 700; background: #1E1E1E; width: 100%; box-sizing: border-box; }
.cc-article-pn-nav a { color: #fff; }
.cc-article-pn-nav a:hover { color: #13EBDE; }
.cc-article-pn-nav a[rel="prev"]:before, .cc-article-pn-nav a[rel="next"]:after { color: inherit; }

.cc-article-back { font-size: 18px; font-weight: 700; }

.cc-article-meta { display: flex; gap: 14px; align-items: center; margin: 26px 0 16px; font-size: 14px; color: #8B8B8B; }
.cc-article-meta-sep { color: #3A3A3A; }

.cc-article-title { font-size: clamp(30px,3.8vw,48px); line-height: 1.2; max-width: 30ch; color: #fff; margin-top: 36px; overflow-wrap: break-word; }

.cc-article-body { margin-top: 36px; max-width: 72ch; font-size: 18px; line-height: 1.75; color: #DDDDDD; }
.cc-article-body > * + * { margin-top: 24px; }
.cc-article-body p { margin: 0; }
.cc-article-body h2, .cc-article-body h3, .cc-article-body h4 { color: #fff; line-height: 1.3; }
.cc-article-body ul, .cc-article-body ol { padding-left: 22px; }
.cc-article-body img { max-width: 100%; height: auto; }
.cc-article-body blockquote { margin: 0; border-left: 4px solid #13EBDE; padding: 6px 0 6px 24px; font-size: 19px; line-height: 1.7; font-style: italic; color: #fff; }
.cc-article-body blockquote p { font-size: inherit; line-height: inherit; color: inherit; font-style: inherit; }

.cc-article-promo { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; background: #2B2B2B; border-top: 4px solid #13EBDE; padding: 30px 30px 32px; margin-top: 44px; }
.cc-article-promo-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; }
.cc-article-promo-title { font-size: 22px; margin: 10px 0 16px; color: #fff; }
.cc-article-promo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-article-promo ul li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.55; color: #8B8B8B; }
.cc-article-promo ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #13EBDE; }
.cc-article-promo-buy { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cc-article-promo-price { font-size: 32px; font-weight: 700; color: #13EBDE; letter-spacing: -0.03em; }
.cc-article-promo-vat { font-size: 14px; color: #8B8B8B; }
.cc-article-promo .cc-btn { background: #13EBDE; color: #000; padding: 13px 24px; font-size: 18px; font-weight: 700; margin-top: 12px; display: inline-block; }
.cc-article-promo .cc-btn:hover { background: #46FFF4; color: #000; }

.cc-article-share { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid #2B2B2B; }
.cc-article-share h5 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; font-weight: 700; }
.cc-article-share-links { display: flex; gap: 10px; }
.cc-article-share-links a { border: 1px solid #2B2B2B; color: #fff; padding: 10px 16px; font-size: 16px; font-weight: 700; }
.cc-article-share-links a:hover { border-color: #13EBDE; color: #13EBDE; }

.cc-article-author { display: flex; gap: 18px; align-items: center; margin-top: 32px; background: #2B2B2B; padding: 24px; }
.cc-article-author img { width: 52px; height: 52px; flex: none; }
.cc-article-author-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; }
.cc-article-author h4 { font-size: 20px; margin-top: 6px; }
.cc-article-author h4 a { color: #fff; }
.cc-article-author h4 a:hover { color: #13EBDE; }

@media (max-width: 980px) {
	.cc-wrap.cc-article-shell { grid-template-columns: 1fr !important; gap: 48px !important; }
	.cc-article-promo { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Single product (woocommerce/content-single-product.php) — "Codeconomy
   Product" design. The "facts" grid style is intentionally not implemented
   here either, same reasoning as the article page: no per-product
   Datensätze/Format/Region/Lieferung fields exist — Format/Region/Lieferung
   are always the same three values across this whole product catalog and
   Datensätze isn't stored anywhere structured, so faking a grid out of one
   real value and three constants isn't worth it. Revisit only if that data
   gets a real field.
   ========================================================================== */
.cc-product a { color: #13EBDE; text-decoration: none; }
.cc-product a:hover { color: #46FFF4; }
/* .cc-product a (class+element) otherwise beats the shared .cc-btn-solid/
   .cc-btn-outline utility classes (class-only) on specificity, turning
   "Hier herunterladen" into invisible teal-on-teal text. */
.cc-product a.cc-btn-solid { color: #000; }
.cc-product a.cc-btn-solid:hover { color: #000; }
.cc-product a.cc-btn-outline { color: #fff; }
.cc-product a.cc-btn-outline:hover { color: #13EBDE; }

.cc-product-breadcrumb { border-bottom: 1px solid #2B2B2B; padding: 16px 32px !important; font-size: 14px; color: #8B8B8B; }
.cc-product-breadcrumb .current { color: #fff; }

.cc-wrap.cc-product-shell { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; padding: clamp(36px,4vw,60px) 32px clamp(64px,7vw,100px); }
/* Same min-width:auto grid-overflow bug documented above (.cc-blog-main,
   .cc-article-main) — add it to every new 1fr-plus-sidebar grid up front. */
.cc-product-main { min-width: 0; }

.cc-product-eyebrow { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; }
/* NOTE: named .cc-product-page-title (not .cc-product-title) — the shop
   archive already uses .cc-product-title for its card titles (see the
   "Shop" section above); reusing that name here would silently rely on
   file order to pick the right rule instead of being unambiguous. */
.cc-product-page-title { font-size: clamp(30px,3.8vw,48px); line-height: 1.2; margin-top: 16px; max-width: 26ch; color: #fff; overflow-wrap: break-word; }

.cc-product-description { margin-top: 32px; max-width: 72ch; font-size: 18px; line-height: 1.75; color: #DDDDDD; }
.cc-product-description > * + * { margin-top: 24px; }
.cc-product-description p { margin: 0; }
.cc-product-description img { max-width: 100%; height: auto; }
.cc-product-description h3 { margin: 20px 0; color: #fff; }

/* Avada's dynamic per-site CSS sets a bare `h2 { color: var(--h2_typography-
   color) }` (dark, meant for a light page background) that — same anomaly
   as the .cc-newsletter-section/input.s fights documented above — keeps
   winning over these even-more-specific selectors; needs !important. */
.cc-product-bullets-section { margin-top: 40px; }
.cc-product-bullets-section h2 { font-size: clamp(24px,2.6vw,32px); text-transform: uppercase; color: #fff !important; }
.cc-product-bullets-section ul { list-style: none; margin: 20px 0 0; padding: 0; max-width: 72ch; }
.cc-product-bullets-section li { position: relative; padding: 16px 0 16px 22px; border-top: 1px solid #2B2B2B; font-size: 18px; line-height: 1.6; color: #DDDDDD; }
.cc-product-bullets-section li::before { content: ""; position: absolute; left: 0; top: 26px; width: 7px; height: 7px; background: #13EBDE; }

.cc-product-testdata { margin-top: 44px; background: #2B2B2B; border-top: 4px solid #13EBDE; padding: 30px; }
.cc-product-testdata h2 { font-size: 24px; text-transform: uppercase; color: #fff !important; }
.cc-product-testdata p { font-size: 18px; line-height: 1.7; color: #8B8B8B; margin-top: 12px; max-width: 64ch; }
.cc-product-testdata-btn { margin-top: 22px !important; }

.cc-product-buy { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cc-product-buy-box { background: #2B2B2B; border-top: 4px solid #13EBDE; padding: 28px 26px 30px; }
.cc-product-buy-box h4 { font-size: 20px; line-height: 1.35; color: #fff; }

/* Real WooCommerce variation form (variable products only — this theme's
   woocommerce/single-product/add-to-cart/variable.php already renders a
   custom-styled select and only appears for product_type=variable; simple
   products get simple.php's plain price+button instead, no dropdown). */
.cc-product-buy-box .variable-product-custom-select-wrapper { margin: 22px 0; }
.cc-product-buy-box .variable-product-custom-select-text h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: #8B8B8B; font-weight: 700; margin-bottom: 10px; }
/* mike-style.css's own .variable-product-custom-select is a rounded white
   250px box with a soft light box-shadow (var(--Blue-100)) meant for a
   light page — on our dark background that shadow shows as a glaring white
   halo. Reset it to plain/full-width/sharp-cornered like every other input
   on these pages. */
.cc-product-buy-box .variable-product-custom-select { width: 100%; min-height: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cc-product-buy-box .variable-product-select-box { position: relative; width: 100%; padding: 15px 44px 15px 16px; background: #1E1E1E; border: 1px solid #3A3A3A; border-radius: 0; color: #fff; font-size: 16px; cursor: pointer; }
.cc-product-buy-box .variable-product-select-box i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #13EBDE; font-size: 12px; }
.cc-product-buy-box .variable-product-select-options { background: #1E1E1E; border: 1px solid #3A3A3A; border-top: none; }
.cc-product-buy-box .variable-product-select-item { padding: 12px 16px; font-size: 16px; color: #fff; cursor: pointer; }
.cc-product-buy-box .variable-product-select-item:hover { background: #2B2B2B; color: #13EBDE; }

/* Real add-to-cart price/button — same markup (span.price, span.price-vat,
   a/button.single_add_to_cart_button, literal "In den Warenkorb" text) for
   both simple.php and variable.php in this theme, so one set of rules
   covers both product types. */
/* mike-style.css's `.single-addtocart-wrapper { align-items: center }` is
   meant for its normal flex-row layout — switching to flex-direction:column
   without also overriding align-items leaves that center value in place,
   which now centers everything on the (now horizontal) cross axis instead
   of vertically. Same for .woocommerce-variation-add-to-cart/.single_variation_wrap. */
.cc-product-buy-box .single_variation_wrap,
.cc-product-buy-box .woocommerce-variation-add-to-cart { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.cc-product-buy-box .single-addtocart-wrapper { display: flex; flex-direction: column; align-items: flex-start; margin-top: 24px; width: 100%; }
/* WooCommerce core's own stylesheet carries
   `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product
   span.price { font-size: 1.25em; color: #77a464 }` -- the `:where()` adds
   nothing, but `.woocommerce` + `div.product` + `span.price` still scores
   (0,3,2), which legitimately beats a two-class `.cc-product-buy-box
   .price.gm-grotesque-number` (0,3,0). Avada used to out-specify it; nothing
   does now, so the price rendered at 22.5px in WooCommerce's olive green
   instead of 38px teal. `.cc-product` (the real single-product wrapper div,
   which also carries WooCommerce's own `.product`) plus a tag-qualified
   `span` brings this to (0,4,1) and wins on plain specificity -- no
   !important needed. Covers both add-to-cart templates: simple.php's static
   span and variation-add-to-cart-button.php's JS-filled one. */
.cc-product .cc-product-buy-box span.price.gm-grotesque-number { font-weight: 700; color: #13EBDE; letter-spacing: -0.03em; font-size: 38px; order: 1; }
/* legacy-global-sites.css bumps every .gm-grotesque-number to
   `font-size: 45px !important` below 768px — that scale belongs to the big
   standalone stat numbers the class was written for, not to a price inside a
   buy box, and it made the mobile price LARGER than the desktop one. This was
   masked until now: WooCommerce's un-!important 1.25em lost to it too, so the
   price was already 45px on mobile before the fix above. !important is the
   only thing that beats !important. */
@media (max-width: 768px) {
	.cc-product .cc-product-buy-box span.price.gm-grotesque-number { font-size: 38px !important; }
}
/* mike-style.css's `.product .woocommerce-variation-add-to-cart .price-vat`
   (3 classes) legitimately beats this on plain specificity (was 2 classes)
   — not the usual Avada-dynamic-CSS anomaly this time, just genuinely more
   specific — and also sets color: var(--Blue-500) (dark, invisible here),
   width: 20% (squishes the label) and margin-top: 20px (too much gap). */
.cc-product-buy-box .price-vat,
.cc-product-buy-box .woocommerce-variation-add-to-cart .price-vat,
.cc-product-buy-box .single-product-description-wrapper .price-vat { font-size: 14px !important; color: #8B8B8B !important; margin-top: 4px !important; width: auto !important; line-height: 1.4 !important; order: 2; }
.cc-product-buy-box .single-price-wrapper,
.cc-product-buy-box .woocommerce-variation-add-to-cart > div:last-of-type { order: 3; }
.cc-product-buy-box a.button, .cc-product-buy-box button.button, .cc-product-buy-box .single_add_to_cart_button { display: block; width: 100%; text-align: center; background: #13EBDE !important; color: #000 !important; border: none !important; border-radius: 0 !important; padding: 17px !important; font-size: 18px !important; font-weight: 700; font-family: inherit; cursor: pointer; margin-top: 22px; }
.cc-product-buy-box a.button:hover, .cc-product-buy-box button.button:hover, .cc-product-buy-box .single_add_to_cart_button:hover { background: #46FFF4 !important; color: #000 !important; }
.cc-product-buy-box a.button.loading::after { margin-left: .53em; top: auto;}

.cc-product-buy-box-assurances { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #333333; }
.cc-product-buy-box-assurances span { display: flex; gap: 10px; font-size: 16px; color: #8B8B8B; line-height: 1.5; }
.cc-product-buy-box-assurances span::before { content: "✓"; color: #13EBDE; }

.cc-product-mini-box { background: #2B2B2B; padding: 24px 26px 26px; }
.cc-product-mini-box--outline { background: none; border: 1px solid #2B2B2B; }
.cc-product-mini-box h5 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; }
.cc-product-mini-box p { font-size: 16px; line-height: 1.65; color: #DDDDDD; margin-top: 10px; }
.cc-product-mini-box .cc-btn-outline { margin-top: 16px; }
.cc-product-contact-link { display: inline-block; margin-top: 14px; font-size: 18px; font-weight: 700; }

@media (max-width: 980px) {
	.cc-wrap.cc-product-shell { grid-template-columns: 1fr !important; gap: 40px !important; }
	.cc-product-buy { position: static !important; }
}

/* ==========================================================================
   "Testdaten" lead-gen popup (Popup Maker popup post 340601, real
   `#test-data-download`/`.cc-product-testdata-btn` trigger via the
   `popmake-340601` class — both "Testdaten-Download" buttons on the product
   page open this instead of linking to the file directly; the file URL is
   read by js/main.js's existing `.test-data-form a#test-data-download` /
   `div#test-data-download a` lookup and injected into the form's real
   `file-url` hidden field, then on successful submit the JS redirects to it
   — none of that logic changed, just which classes trigger the popup).

   gesundheitsmarkt.css already has a dedicated, scoped #pum-340601
   #popmake-340601 block (rounded 20px corners, dark left info panel via
   var(--BU-Primary)) -- that part already looks right and isn't touched.
   The right-hand form panel's own color rules were left commented out
   there (color: var(--GM-Dark), disabled), so it was rendering as an
   unstyled white box with default black text and a broken-looking custom
   checkbox (the checked-state fill color was also disabled the same way).
   Using the SAME #pum-340601 #popmake-340601 scoping convention as that
   existing block so this doesn't leak into any other popup on the site.
   CAUTION: never quote literal CSS comment syntax (slash-star) inside a
   CSS comment block like this one -- it closes the comment early and the
   browser silently drops everything until it resyncs, which is exactly
   what happened here the first time this comment was written.
   ========================================================================== */
#pum-340601 #popmake-340601 .pum-content .testdata-popup-form-wrapper { background: #1E1E1E; color: #DDDDDD; font-size: 16px; line-height: 1.6; padding: 40px !important; }
#pum-340601 #popmake-340601 .pum-content .testdata-popup-form-wrapper p { color: #DDDDDD !important; }

#pum-340601 #popmake-340601 .pum-content .testdata-inputs-wrapper p label { color: #8B8B8B; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }

#pum-340601 #popmake-340601 .wpcf7-form-control.wpcf7-text,
#pum-340601 #popmake-340601 .wpcf7-form-control.wpcf7-email,
#pum-340601 #popmake-340601 .wpcf7-form-control.wpcf7-select,
#pum-340601 #popmake-340601 .wpcf7-form-control.wpcf7-quiz { width: 100%; margin-top: 8px !important; padding: 12px 14px !important; background: #2B2B2B !important; border: 1px solid #3A3A3A !important; border-radius: 0 !important; color: #fff !important; font-size: 16px; font-family: inherit; height: auto !important; }
#pum-340601 #popmake-340601 .wpcf7-select-parent { width: 100%; }
#pum-340601 #popmake-340601 .wpcf7-select-parent .select-arrow { background: transparent; border: none !important; color: #13EBDE; display: flex; align-items: center; justify-content: center; }

#pum-340601 #popmake-340601 .testdata-quiz { margin: 20px 0; }
#pum-340601 #popmake-340601 .testdata-quiz .wpcf7-quiz-label { color: #8B8B8B; font-weight: 700; font-size: 14px; }
#pum-340601 #popmake-340601 .woocommerce .pum-content form input[type="text"].wpcf7-quiz { width: 90px; margin: 0 0 0 14px !important; height: auto !important; padding: 10px 12px !important; }

/* codeconomy-style.css already collapses the native checkbox to 0×0 and
   absolutely positions it, relying entirely on custom :before/:after
   pseudo-elements for the visual box — the same technique as the
   newsletter checkbox fix elsewhere in this file, just implemented
   differently here. Reverting to a plain native checkbox is far more
   robust than trying to realign the custom absolute-positioned graphic,
   which is what was causing the checkbox to visually overlap its label
   text in both screenshots. */
#pum-340601 #popmake-340601 .wpcf7-list-item { margin-left: 0 !important; }
#pum-340601 #popmake-340601 .wpcf7-list-item label { display: flex !important; align-items: flex-start; gap: 10px; margin-bottom: 14px !important; }
#pum-340601 #popmake-340601 .wpcf7-list-item input[type="checkbox"] { all: revert; position: static !important; width: 16px !important; height: 16px !important; min-width: 16px; margin: 3px 0 0 !important; padding: 0; accent-color: #13EBDE; flex-shrink: 0; }
/* gesundheitsmarkt.css draws its own custom checkbox graphic via
   [type=checkbox]:before/:after (a 22x22 bordered box + fill) meant to sit
   on top of the native checkbox this popup zeroes out elsewhere
   (codeconomy-style.css). Reverting the native checkbox above brings it
   back visually, but doesn't remove that separate pseudo-element rule, so
   without this the two were overlapping into one broken-looking icon. */
#pum-340601 #popmake-340601 .pum-content [type="checkbox"]:before,
#pum-340601 #popmake-340601 .pum-content [type="checkbox"]:after { display: none !important; content: none !important; }
/* A THIRD legacy checkbox graphic, from codeconomy-style.css this time:
   `.wpcf7-acceptance .wpcf7-list-item:before` (not the input's own :before —
   the wrapping <span>'s) draws an absolutely-positioned 16×16 box directly
   on top of where the native checkbox sits, which was intercepting clicks
   meant for the real checkbox (confirmed via elementFromPoint — the click
   landed on this span, not the input). Suppress it the same way. */
#pum-340601 #popmake-340601 .wpcf7-list-item:before { display: none !important; content: none !important; }
#pum-340601 #popmake-340601 .wpcf7-list-item label span { margin: 0 !important; font-size: 14px; color: #8B8B8B; line-height: 1.6; }
#pum-340601 #popmake-340601 .wpcf7-list-item label span a { color: #fff !important; }
#pum-340601 #popmake-340601 .wpcf7-list-item label span a:hover { color: #13EBDE !important; }

#pum-340601 #popmake-340601 .testdata-submit__wrapper { margin-top: 8px; }
#pum-340601 #popmake-340601 .testdata-submit__button { background: #13EBDE !important; color: #000 !important; border: none !important; border-radius: 0 !important; padding: 15px 28px !important; font-size: 18px !important; font-weight: 700; font-family: inherit !important; cursor: pointer; height: auto !important; }
#pum-340601 #popmake-340601 .testdata-submit__button:hover { background: #46FFF4 !important; }

#pum-340601 #popmake-340601 .testdata-popup-form-wrapper .error-newsletter { color: #FF6B6B !important; font-size: 14px; margin-top: 12px; }
#pum-340601 #popmake-340601 .testdata-popup-form-wrapper .error-newsletter i { margin-right: 6px; }

/* ==========================================================================
   Ueber Uns (page-codeconomy-ueber-uns.php) -- "Codeconomy Ueber Uns"
   design. Uses .cc-home as its base (background/box-sizing/font-family/
   .cc-wrap sizing already come from that class, see the top of this file)
   -- .cc-ueberuns only adds what's specific to this page.

   The .cc-contact* block below (contact info + real form) is SHARED with
   Kontakt (page-codeconomy-kontakt.php) -- not just visually identical but
   backed by the same real content on both pages (same "Wir freuen uns Sie
   kennenzulernen" copy, same contact-form-7 id="27"), confirmed by reading
   both pages' actual post_content before building either template. Renamed
   from .cc-ueberuns-contact* to the shared .cc-contact* name for this
   reason -- don't re-namespace it per page if a third page ever reuses it.
   ========================================================================== */
.cc-eyebrow { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 0.14em; color: #13EBDE; }

.cc-ueberuns-hero { position: relative; overflow: hidden; border-bottom: 1px solid #2B2B2B; }
.cc-wrap.cc-ueberuns-hero-inner { position: relative; padding: clamp(48px,5vw,80px) 32px clamp(40px,4vw,64px); }
.cc-ueberuns-hero-inner .cc-eyebrow { margin-top: 26px; }
.cc-ueberuns-hero-inner h1 { font-size: clamp(34px,4.6vw,58px); line-height: 1.16; text-transform: uppercase; margin-top: 14px; max-width: 26ch; color: #fff; }
.cc-ueberuns-hero-lead { font-size: 19px; line-height: 1.75; color: #B8B8B8; max-width: 70ch; margin-top: 28px; }
.cc-ueberuns-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.cc-ueberuns-tags span { border: 1px solid #2B2B2B; background: #2B2B2B; color: #fff; font-size: 16px; padding: 10px 18px; }

.cc-wrap.cc-ueberuns-strengths-section { padding-top: clamp(56px,6vw,90px); }
.cc-ueberuns-strengths-section h2 { font-size: clamp(28px,3.2vw,40px); line-height: 1.2; text-transform: uppercase; margin-top: 12px; color: #fff; }
.cc-ueberuns-strengths { display: flex; flex-direction: column; gap: 24px; margin-top: 44px; }
.cc-ueberuns-strength { display: grid; grid-template-columns: 1.25fr 0.75fr; background: #2B2B2B; align-items: stretch; }
.cc-ueberuns-strength-body { padding: clamp(28px,3vw,48px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.cc-ueberuns-strength-num { font-size: 14px; color: #8B8B8B; }
.cc-ueberuns-strength-body h3 { font-size: 26px; line-height: 1.3; color: #fff; }
.cc-ueberuns-strength-body p { font-size: 17px; line-height: 1.75; color: #B8B8B8; max-width: 52ch; }
.cc-ueberuns-strength-media { background: #2B2B2B; overflow: hidden; max-height: 300px; }
.cc-ueberuns-strength-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cc-wrap.cc-ueberuns-team-section { padding-top: clamp(56px,6vw,90px); }
.cc-ueberuns-team-section h2 { font-size: clamp(28px,3.2vw,40px); line-height: 1.2; text-transform: uppercase; color: #fff; }
.cc-ueberuns-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.cc-ueberuns-team-card { background: #2B2B2B; display: flex; flex-direction: column; }
.cc-ueberuns-team-card:hover { outline: 1px solid #13EBDE; }
.cc-ueberuns-team-photo { aspect-ratio: 4/5; overflow: hidden; background: #2E2E2E; }
.cc-ueberuns-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-ueberuns-team-body { padding: 26px 24px 30px; border-top: 4px solid #13EBDE; display: flex; flex-direction: column; gap: 12px; }
.cc-ueberuns-team-body h4 { font-size: 21px; color: #fff; }
.cc-ueberuns-team-role { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; }
.cc-ueberuns-team-body p { font-size: 17px; line-height: 1.7; color: #B8B8B8; }

.cc-wrap.cc-contact-section { padding-top: clamp(56px,6vw,90px); padding-bottom: clamp(64px,7vw,100px) !important; }
.cc-contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; background: #2B2B2B; padding: clamp(28px,3.4vw,52px); }
.cc-contact-info h2 { font-size: clamp(26px,2.8vw,36px); line-height: 1.22; text-transform: uppercase; color: #fff; }
.cc-contact-info p { font-size: 17px; line-height: 1.75; color: #B8B8B8; margin-top: 20px; max-width: 38ch; }
.cc-contact-details { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; font-size: 17px; }
.cc-contact-details a { color: #13EBDE; }
.cc-contact-details a:hover { color: #46FFF4; }
.cc-contact-details span { color: #8B8B8B; line-height: 1.6; }

/* Real contact form (contact-form-7 id="27") -- reused classes from its own
   markup (.contact-form-top__wrapper/.top-wrapper__left/.top-wrapper__right
   group Firma+Telefon in one column and Name+Email in the other, rather
   than the design's row-major 2x2 -- same 4 fields, real DOM grouping kept
   instead of fighting it with grid-area tricks). */
.cc-contact-form .contact-form-top__wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cc-contact-form .top-wrapper__left,
.cc-contact-form .top-wrapper__right { display: flex; flex-direction: column; gap: 14px; }
.cc-contact-form label { display: block; font-size: 14px; color: #8B8B8B; }
/* global-sites.css's blanket `input[type=text]... { background:#FFFFFF;
   border-radius:30px/50px }` (same family of rule documented several times
   above) wins here too since it's the only declaration unless !important'd.
   Scoped to input/textarea specifically -- CF7 also puts the bare
   `.wpcf7-form-control` class on the acceptance/quiz wrapper <span>s, which
   a plain `.wpcf7-form-control` selector would ALSO match, turning those
   into empty bordered/padded boxes with nothing visibly wrong to point at
   (confirmed by inspecting the acceptance span's classList directly). */
/* gesundheitsmarkt.css's generic `form p input { margin-bottom: 35px }`
   (CF7's wpautop wraps each loose label line in a <p>) stacks on top of
   the flex `gap: 14px` on .top-wrapper__left/__right below -- same
   "legacy margin + flex gap doubling" bug as templates/newsletter-form.html
   elsewhere in this project. margin-bottom: 0 !important lets gap alone
   control the spacing. */
.cc-contact-form input.wpcf7-form-control,
.cc-contact-form textarea.wpcf7-form-control { width: 100%; margin-top: 8px; margin-bottom: 0 !important; padding: 14px; border: 1px solid #3A3A3A; background: #1E1E1E !important; color: #fff; font-size: 16px; font-family: inherit; border-radius: 0 !important; }
.cc-contact-form textarea.wpcf7-form-control { resize: vertical; }
.cc-contact-form .right-content { margin-top: 14px; }
.cc-contact-form .pflichtfeld { display: block; font-size: 14px; color: #8B8B8B; margin-top: 16px; }
.cc-contact-form .terms-and-conditions-button.conditions-kontakt { margin-top: 16px; }
.cc-contact-form .wpcf7-form-control-wrap[data-name="quiz-1"] label { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #8B8B8B; }
.cc-contact-form input.wpcf7-quiz { width: 110px; margin-top: 0; padding: 11px 14px; }
.cc-contact-form .wpcf7-list-item { margin-left: 0; margin-top: 14px; }
.cc-contact-form .wpcf7-list-item label { display: flex !important; align-items: flex-start; gap: 10px; }
/* Same "three independent legacy custom-checkbox systems" issue documented
   above for the Testdaten popup -- codeconomy-style.css zeroes the native
   checkbox and draws its own via .wpcf7-list-item:before with a literal
   #000000 border, invisible on our dark background even before considering
   the overlap problem. Same fix: revert native, suppress the old graphic. */
.cc-contact-form .wpcf7-list-item:before { display: none !important; content: none !important; }
.cc-contact-form input[type="checkbox"] { all: revert; position: static !important; width: 16px !important; height: 16px !important; min-width: 16px; margin: 3px 0 0 !important; padding: 0; accent-color: #13EBDE; flex-shrink: 0; }
.cc-contact-form .wpcf7-list-item label span { font-size: 14px; color: #8B8B8B; line-height: 1.6; }
.cc-contact-form .wpcf7-list-item label a { color: #fff; }
.cc-contact-form .wpcf7-list-item label a:hover { color: #13EBDE; }
.cc-contact-form .submit-button { margin-top: 22px; }
.cc-contact-form input.wpcf7-submit { background: #13EBDE !important; color: #000 !important; border: none !important; border-radius: 0 !important; padding: 15px 34px !important; font-size: 18px !important; font-weight: 700; font-family: inherit !important; cursor: pointer; width: auto; margin-top: 0; }
.cc-contact-form input.wpcf7-submit:hover { background: #46FFF4 !important; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7-response-output { color: #ffffff; }

@media (max-width: 980px) {
	.cc-ueberuns-strength { grid-template-columns: 1fr !important; gap: 0 !important; }
	.cc-ueberuns-strength-media { order: 2; aspect-ratio: 16/9 !important; max-height: none; }
	.cc-ueberuns-team { grid-template-columns: 1fr 1fr !important; }
	.cc-contact { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 640px) {
	.cc-ueberuns-team { grid-template-columns: 1fr !important; }
	.cc-contact-form .contact-form-top__wrapper { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Kontakt (page-codeconomy-kontakt.php) -- "Codeconomy Kontakt" design.
   Just a hero + the shared .cc-contact* block above (same real contact
   form and "Wir freuen uns..." copy as Ueber Uns) -- no strengths/team
   sections on this page.
   ========================================================================== */
.cc-kontakt-hero { position: relative; overflow: hidden; border-bottom: 1px solid #2B2B2B; }
.cc-wrap.cc-kontakt-hero-inner { position: relative; padding: clamp(48px,5vw,80px) 32px clamp(40px,4vw,64px); }
.cc-kontakt-hero-inner .cc-eyebrow { margin-top: 26px; }
.cc-kontakt-hero-inner h1 { font-size: clamp(34px,4.6vw,58px); line-height: 1.16; text-transform: uppercase; margin-top: 14px; max-width: 22ch; color: #fff; }
.cc-kontakt-hero-lead { font-size: 19px; line-height: 1.75; color: #B8B8B8; max-width: 68ch; margin-top: 28px; }

/* ==========================================================================
   Firmenprofile (archive-investorprofile.php) -- "Codeconomy Firmenprofile"
   design. Sidebar is .cc-blog-sidebar, reused verbatim (see that block
   above) -- no new sidebar CSS here.
   ========================================================================== */
.cc-firmen-hero { position: relative; overflow: hidden; border-bottom: 1px solid #2B2B2B; }
.cc-wrap.cc-firmen-hero-inner { position: relative; padding: clamp(48px,5vw,80px) 32px clamp(36px,4vw,56px); }
.cc-firmen-hero-inner h1 { font-size: clamp(34px,4.6vw,58px); line-height: 1.16; text-transform: uppercase; margin-top: 24px; color: #fff; }
.cc-firmen-count { font-size: 19px; font-weight: 700; color: #13EBDE; margin-top: 16px; }

.cc-wrap.cc-firmen-shell { display: grid; grid-template-columns: 1fr 330px; gap: 64px; align-items: start; padding: clamp(44px,5vw,72px) 32px clamp(64px,7vw,100px); }
.cc-firmen-main { min-width: 0; }

.cc-firmen-letters { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-firmen-letters a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; border: 1px solid #2B2B2B; background: transparent; color: #fff; font-size: 16px; font-weight: 700; padding: 10px 15px; }
.cc-firmen-letters a:hover { border-color: #13EBDE; color: #13EBDE; }
.cc-firmen-letters a.is-active { border-color: #13EBDE; background: #13EBDE; color: #000; }
.cc-firmen-letters a.is-active:hover { color: #000; }

.cc-firmen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.cc-firmen-item { display: flex; align-items: center; gap: 18px; background: #2B2B2B; padding: 20px 22px; color: #fff; border-left: 4px solid #2B2B2B; }
.cc-firmen-item:hover { border-left-color: #13EBDE; color: #fff; }
.cc-firmen-letter { width: 38px; height: 38px; flex: 0 0 38px; background: #1E1E1E; color: #13EBDE; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.cc-firmen-item span:last-child { font-size: 17px; line-height: 1.45; }

.cc-firmen-result { font-size: 16px; color: #8B8B8B; margin-top: 26px; }

.cc-firmen-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cc-firmen-pagination a, .cc-firmen-pagination span { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; padding: 11px 18px; font-size: 17px; }
.cc-firmen-pagination a { border: 1px solid #2B2B2B; color: #fff; }
.cc-firmen-pagination a:hover { border-color: #13EBDE; color: #13EBDE; }
.cc-firmen-pagination span.is-current { background: #13EBDE; color: #000; }

@media (max-width: 980px) {
	.cc-wrap.cc-firmen-shell { grid-template-columns: 1fr !important; gap: 56px !important; }
}
@media (max-width: 640px) {
	.cc-firmen-list { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Firmenprofil (page-investor-profile.php) -- "Codeconomy Firmenprofil"
   design -- the SINGLE investor-profile view (distinct from the
   Firmenprofile archive above: `.cc-firmen-*` is that plural listing,
   `.cc-firmenprofil-*` is this singular one, deliberately different
   prefixes to avoid the exact class-collision mistake documented earlier
   in this file). Per explicit instruction, the design's own
   "Transaktionen im Portfolio" custom div/bar chart was NOT implemented --
   kept the real, already-working Chart.js line chart (yearly deal counts)
   instead, just recolored to this palette (see the inline <script> in the
   template for the Chart.js options).
   ========================================================================== */
.cc-firmenprofil a { color: #13EBDE; text-decoration: none; }
.cc-firmenprofil a:hover { color: #46FFF4; }
/* Same .cc-product a / .cc-btn-solid specificity collision documented
   further up this file (class+element beats a class-only utility) --
   fixing it here before it ships this time instead of after. */
.cc-firmenprofil a.cc-btn-solid, .cc-firmenprofil a.cc-btn-solid:hover { color: #000; }

.cc-firmenprofil-hero { position: relative; overflow: hidden; border-bottom: 1px solid #2B2B2B; }
.cc-wrap.cc-firmenprofil-hero-inner { position: relative; padding: clamp(44px,4.6vw,72px) 32px clamp(32px,3.6vw,52px); }
.cc-firmenprofil-hero-inner h1 { font-size: clamp(32px,4.2vw,54px); line-height: 1.16; margin-top: 16px; color: #fff; }

.cc-wrap.cc-firmenprofil-shell { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: start; padding: clamp(44px,5vw,72px) 32px clamp(64px,7vw,100px); }
.cc-firmenprofil-main { min-width: 0; }

.cc-firmenprofil-lead { font-size: 18px; line-height: 1.8; color: #B8B8B8; max-width: 74ch; }

.cc-firmenprofil-market { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; background: #2B2B2B; border-left: 4px solid #13EBDE; padding: 20px 24px; margin-top: 36px; margin-bottom: 36px; }
.cc-firmenprofil-market span { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; }
.cc-firmenprofil-market strong { font-size: 19px; font-weight: 700; color: #fff; }

.cc-firmenprofil-h2 { font-size: clamp(24px,2.6vw,32px); text-transform: uppercase; margin-top: 56px; color: #fff; }

.cc-firmenprofil-chart { background: #2B2B2B; padding: 32px 28px 26px; margin-top: 22px; }
.cc-firmenprofil-chart canvas { max-width: 100%; }

.cc-firmenprofil-table-wrap { margin-top: 22px; background: #2B2B2B; }
.cc-firmenprofil-table { border-collapse: collapse; width: 100%; }
.cc-firmenprofil-table th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #8B8B8B; padding: 16px 20px; border-bottom: 2px solid #13EBDE; white-space: break-spaces; }
.cc-firmenprofil-table td { font-size: 17px; color: #B8B8B8; padding: 17px 20px; border-bottom: 1px solid #3A3A3A; }
.cc-firmenprofil-table tr:last-child td { border-bottom: none; }
.cc-firmenprofil-table .cc-firmenprofil-target { font-weight: 700; color: #fff; }
.cc-firmenprofil-table .cc-firmenprofil-target a { color: #fff; }
.cc-firmenprofil-table .cc-firmenprofil-target a:hover { color: #13EBDE; }

.cc-firmenprofil-pager { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding-top: 32px; border-top: 1px solid #2B2B2B; }
.cc-firmenprofil-pager a { border: 1px solid #2B2B2B; color: #fff; padding: 13px 22px; font-size: 17px; font-weight: 700; }
.cc-firmenprofil-pager a:hover { border-color: #13EBDE; color: #13EBDE; }
.cc-firmenprofil-pager-all { border: none !important; padding: 0 !important; font-size: 16px !important; font-weight: 400 !important; color: #8B8B8B !important; }
.cc-firmenprofil-pager-all:hover { color: #13EBDE !important; }

.cc-firmenprofil-aside { display: flex; flex-direction: column; gap: 24px; }
.cc-firmenprofil-contact { background: #2B2B2B; padding: 28px 26px 32px; border-top: 4px solid #13EBDE; }
.cc-firmenprofil-contact h3 { font-size: 21px; margin-bottom: 24px; color: #fff; }
.cc-firmenprofil-contact > div { display: flex; flex-direction: column; gap: 22px; }
.cc-firmenprofil-contact > div + div { margin-top: 22px; }
.cc-firmenprofil-contact span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: #8B8B8B; margin-bottom: 7px; }
.cc-firmenprofil-contact strong { font-size: 17px; line-height: 1.55; font-weight: 400; color: #B8B8B8; }
.cc-firmenprofil-contact a { font-size: 17px; word-break: break-all; }

.cc-firmenprofil-news { list-style: none; margin: 0; padding: 0; }
.cc-firmenprofil-news li { border-top: 1px solid #2B2B2B; padding: 12px 0; }
.cc-firmenprofil-news li:first-child { border-top: none; }
.cc-firmenprofil-news a { color: #fff; font-size: 15px; line-height: 1.5; }
.cc-firmenprofil-news a:hover { color: #13EBDE; }

@media (max-width: 980px) {
	.cc-wrap.cc-firmenprofil-shell { grid-template-columns: 1fr !important; gap: 48px !important; }
}
@media (max-width: 700px) {
	.cc-firmenprofil-table-wrap { overflow-x: auto; }
	.cc-firmenprofil-pager { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; }
}

/* The cart page (still Avada's default boxed page template, not part of the
   cc-full-width series) inherits its "Warenkorb-Summe" rows from mike-style.css'
   .cart-total-row/.cart-total-cell divs. `.cart-total-cell { flex: 1 1 0% }`
   there grows the label/amount cells unevenly by their own content size
   instead of splitting the row evenly, leaving the two flush against each
   other with no visual gap (worst on mobile's narrower cart_totals box).
   Force an explicit split instead of relying on that flex-grow math. The
   checkout page's own order-summary is a real <table>, unaffected by this.

   A plain 50/50 flex:0 1 auto split (an earlier version of this fix) falls
   apart once BOTH label and amount are long at once — a bigger cart total
   ("19% Umsatzsteuer" + "€1.368,00" for a large order) has nowhere to
   shrink, so the *label* wraps to two lines while the amount stays on one,
   an uneven, obviously-broken-looking result.

   Giving the label `flex:1 1 auto; min-width:0` so it absorbs the
   squeeze instead (a second attempt at this fix) is worse, not better:
   `min-width:0` lets the label's own BOX shrink below its text's width,
   but single-word labels like "Zwischensumme" have no space to wrap at,
   so the text can't shrink with it — it just overflows the shrunk box
   and visually overlaps the amount next to it.

   Neither cell should ever wrap or shrink internally — the row itself
   should wrap as a whole instead, dropping the amount to its own line
   when both don't fit together. `margin-left: auto` on the amount keeps
   it pinned to the right edge even when it's alone on the wrapped line
   (`justify-content: space-between` only pushes a *lone* item to
   flex-start, not flex-end).

   No *column* gap is set here on purpose — `justify-content:space-between`
   already pushes label/amount to opposite ends of the row, which is
   already the maximum possible separation; a forced minimum column-gap on
   top of that doesn't add real breathing room, it only shrinks the space
   actually available before wrapping kicks in. With a `gap:12px` here, a
   short one-word label like "Zwischensumme"/"Gesamtsumme" — which can't
   wrap internally either way, nothing about it changed — started wrapping
   to its own line too, for a cart total that fit on one line fine before
   this whole fix existed. row-gap (between wrapped lines) is unaffected. */
body.woocommerce-cart .cart-total-row {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	row-gap: 2px;
}
body.woocommerce-cart .cart-total-cell.cart-total-label,
body.woocommerce-cart .cart-total-cell.cart-total-amount {
	flex: 0 0 auto;
	white-space: nowrap;
}
body.woocommerce-cart .cart-total-cell.cart-total-amount {
	margin-left: auto;
}

/* ==========================================================================
   Search results (search.php) — no Claude Design mockup for this page (it
   isn't part of that series); reuses the same visual language already
   established for the Blog listing (.cc-blog-hero/.cc-wrap patterns, the
   .cc-blog-sidebar widget area reused verbatim) rather than inventing a new
   look. Real WP_Query search loop — results can be any public post type
   (post, product, investorprofile, page), handled generically in the
   template — and the real Avada/Fusion search form (same markup family
   already restyled for the header/blog-sidebar search elsewhere in this
   file; same !important fight against Avada's dynamic form CSS, see the
   .cc-blog-sidebar .widget_search comment above for why).
   ========================================================================== */
.cc-search * { box-sizing: border-box; }
/* min-width:0 — see the long comment on .cc-home above; same
   .fusion-row-is-flex root cause, applies to every page wrapper. */
.cc-search { background: #1E1E1E; font-family: "Inter", system-ui, sans-serif; min-width: 0; }
.cc-search .cc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.cc-search-hero { position: relative; overflow: hidden; border-bottom: 1px solid #2B2B2B; background: #1E1E1E; padding: 40px 0; }
.cc-wrap.cc-search-hero-inner { position: relative; padding: clamp(48px,5vw,80px) 32px clamp(36px,4vw,56px); }
.cc-search-hero-inner h1 { font-size: clamp(34px,4.6vw,58px); line-height: 1.16; text-transform: uppercase; margin-top: 18px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
.cc-search-hero-lead { font-size: 19px; color: #B8B8B8; margin-top: 16px; }

.cc-wrap.cc-search-shell { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; padding: clamp(40px,4vw,64px) 32px clamp(64px,7vw,100px); }
/* .cc-search-main is a grid item with no width of its own, so it defaults to
   min-width:auto — same nested-grid overflow gotcha documented on
   .cc-blog-main above. */
.cc-search-main { min-width: 0; }

.cc-search-form-wrap { margin-bottom: 32px; }
.cc-search-form-wrap .fusion-search-form-content { display: flex; border: 1px solid #2B2B2B; background: #2B2B2B; max-width: 480px; }
.cc-search-form-wrap .fusion-search-field { flex: 1; min-width: 0; }
.cc-search-form-wrap input.s { width: 100%; padding: 14px; border: none; border-radius: 0 !important; background: transparent !important; color: #fff; font-size: 16px; font-family: inherit; outline: none; margin-top: 0 !important; }
.cc-search-form-wrap input.s::placeholder { color: #8B8B8B; opacity: 1; }
.cc-search-form-wrap input.fusion-search-submit { width: 48px; height: 100%; border: none; background: #13EBDE; color: #000; font-size: 18px; font-family: "Font Awesome 6 Pro"; font-weight: 900; line-height: 1; cursor: pointer; margin-top: 0 !important; }
.cc-search-form-wrap input.fusion-search-submit:hover { background: #46FFF4; }

.cc-search-results { display: flex; flex-direction: column; gap: 20px; }
.cc-search-card { background: #2B2B2B; display: flex; gap: 20px; min-width: 0; }
.cc-search-card-thumb { flex: 0 0 220px; display: block; aspect-ratio: 16/10; overflow: hidden; }
.cc-search-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-search-card-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.cc-search-card-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #8B8B8B; }
.cc-search-card-type { display: inline-block; padding: 3px 10px; background: #13EBDE; color: #000; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cc-search-card-title { font-size: 22px; line-height: 1.35; color: #fff; margin: 0; overflow-wrap: break-word; word-break: break-word; }
.cc-search-card-title a { color: inherit; text-decoration: none; }
.cc-search-card-title a:hover { color: #13EBDE; }
.cc-search-card-excerpt { font-size: 16px; line-height: 1.6; color: #B8B8B8; margin: 0; }
.cc-search-card-more { margin-top: auto; padding-top: 4px; font-size: 16px; font-weight: 700; color: #13EBDE; }
.cc-search-card-more:hover { color: #46FFF4; }

.cc-search-empty { background: #2B2B2B; padding: 36px 32px; }
.cc-search-empty p { font-size: 17px; color: #B8B8B8; margin: 0 0 20px; }
.cc-search-empty-links { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-search-empty-links a { padding: 12px 20px; background: #1E1E1E; border: 1px solid #3A3A3A; color: #fff; text-decoration: none; font-weight: 700; }
.cc-search-empty-links a:hover { border-color: #13EBDE; color: #13EBDE; }

@media (max-width: 900px) {
	.cc-wrap.cc-search-shell { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 640px) {
	.cc-search-card { flex-direction: column; }
	.cc-search-card-thumb { flex-basis: auto; }
}

/* ============================================================================
   AVADA REMOVAL — new page types
   ----------------------------------------------------------------------------
   Added when the site moved off Avada onto the standalone Codeconomy theme
   (see plan_without_avada.md). These cover the contexts Avada used to render
   and that now need real templates: generic pages (page.php), the 404, and
   the Fusion Builder shortcode shim's output.

   Every wrapper below follows the two rules this file learned the hard way:
   section padding is written on a COMBINED `.cc-wrap.cc-x` selector, never a
   bare one-class selector that would silently lose the shorthand fight; and
   every top-level page wrapper gets `min-width: 0` so a long German compound
   noun anywhere inside cannot inflate its automatic minimum size and push the
   layout past the viewport.
   ========================================================================== */

/*
 * `.cc-page` is LIGHT, not dark, and that is deliberate.
 *
 * Every page this template serves — the legal pages, the PMPro account pages,
 * cart and checkout — rendered on a white background before the migration
 * (see docs/audit-screenshots/, taken while Avada was still active). Making
 * them dark is a redesign, and this migration is a substrate change: the
 * acceptance test is that nothing looks different.
 *
 * For cart and checkout specifically it is also an explicit product decision
 * already made and recorded in CLAUDE.md: a dark pass was built for them once
 * and the user asked for it to be reverted.
 *
 * It is not merely a preference, either. These pages are full of white card
 * surfaces from mike-style.css (.woocommerce-content-box, .col-1/.col-2,
 * .cart_totals, the PMPro level boxes). A dark page wrapper with light
 * inherited text leaves white-on-white text inside every one of those cards —
 * which is exactly what an earlier attempt at this produced: an unreadable
 * cart with invisible "Zwischensumme" and "Gesamtsumme" rows.
 *
 * If the legal/PMPro pages should get the dark treatment later, that is a
 * design task with a contrast pass over each white card, not a background
 * colour swap here.
 */
.cc-page { background: #fff; color: #1E1E1E; min-width: 0; }
.cc-404 { background: #1E1E1E; color: #fff; min-width: 0; }

/* ---- Generic page (legal, PMPro, newsletter confirmations, cart) --------- */

/* The site had no generic `.cc-wrap` rule — only `.cc-home .cc-wrap` and
   `.cc-shop .cc-wrap`, each restating the same max-width. Every page type
   added since then had to remember to restate it again, and page.php did not,
   so legal-page text ran to the browser edge while the header above it stayed
   centred at 1280px. Declared once here for any page with no more specific
   rule; the existing page-scoped copies still win where they exist. */
.cc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.cc-wrap.cc-page-body { padding: clamp(40px,4vw,72px) 32px clamp(56px,6vw,96px); }

/* Underline links in long-form prose only — legal pages, where an underline is
   the right affordance. NOT site-wide inside .cc-page: that also caught the
   cart's product-title links and WooCommerce's buttons, which are <a> elements. */
.cc-page-content p a,
.cc-page-content li a,
.cc-page-content td a { text-decoration: underline; }
.cc-page-content table { width: 100%; border-collapse: collapse; }
.cc-page-content th,
.cc-page-content td { border: 1px solid #DDD; padding: 10px 12px; text-align: left; }

/* Wide content scrolls inside its own box; the page body never scrolls
   horizontally. */
.cc-page-content .cc-fb-table { overflow-x: auto; }

/* ---- 404 ---------------------------------------------------------------- */

.cc-wrap.cc-404-inner { padding: clamp(72px,10vw,160px) 32px; text-align: center; }
.cc-404-code { font-size: clamp(90px,16vw,190px); line-height: 1; font-weight: 700; color: #13EBDE; margin: 0; letter-spacing: -0.03em; }
.cc-404-title { font-size: clamp(26px,3.4vw,40px); color: #fff; font-weight: 700; margin: 8px 0 18px; }
.cc-404-text { color: #8B8B8B; margin-bottom: 34px; }

/* ---- Fusion Builder shortcode shim output ------------------------------- */
/* inc/shortcodes-fusion.php turns Avada Builder's container/row/column markup
   into these three wrappers. Kept intentionally plain: this content is legal
   text and plugin shortcode output, not designed layouts. */

/* Per-breakpoint visibility, from the builder's `hide_on_mobile` whitelist.
   Breakpoints are Avada's own: small ≤640, medium 641–1024, large ≥1025. See
   the codeconomy_fusion_attrs() docblock for why this exists — without it the
   Impressum page rendered its heading twice, once from the desktop variant and
   once from the mobile one. */
@media (max-width: 640px)                      { .cc-hide-small  { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .cc-hide-medium { display: none !important; } }
@media (min-width: 1025px)                     { .cc-hide-large  { display: none !important; } }

.cc-fb-container { width: 100%; }
.cc-fb-row { display: flex; flex-wrap: wrap; gap: 32px; }
.cc-fb-col { flex: 1 1 100%; min-width: 0; }
.cc-fb-col[data-type="1_2"] { flex-basis: calc(50% - 16px); }
.cc-fb-col[data-type="1_3"] { flex-basis: calc(33.333% - 22px); }
.cc-fb-col[data-type="2_3"] { flex-basis: calc(66.666% - 11px); }
.cc-fb-col[data-type="1_4"] { flex-basis: calc(25% - 24px); }
.cc-fb-col[data-type="3_4"] { flex-basis: calc(75% - 8px); }

@media (max-width: 800px) {
	.cc-fb-col[data-type] { flex-basis: 100%; }
}

.cc-fb-sep { border: 0; border-top: 1px solid #3A3A3A; margin: 28px 0; }
.cc-fb-title { color: #fff; }
.cc-fb-tagline { background: #2B2B2B; border: 1px solid #3A3A3A; padding: 20px 24px; }
.cc-fb-image { margin: 0 0 20px; }
.cc-fb-image img { display: block; max-width: 100%; height: auto; }
.cc-fb-checklist { list-style: none; padding: 0; }
.cc-fb-checklist li { position: relative; padding-left: 26px; margin-bottom: 10px; color: #C9C9C9; }
.cc-fb-checklist li::before { content: "✓"; position: absolute; left: 0; color: #13EBDE; }
.cc-fb-code { background: #141617; border: 1px solid #3A3A3A; padding: 16px; overflow-x: auto; }
.cc-fb-person img { max-width: 180px; height: auto; }
.cc-fb-person-title { color: #8B8B8B; }

/* ---- Shim output inside the DARK article body ---------------------------
   Everything above was written when the shim's only consumers were the LIGHT
   legal/PMPro pages (.cc-page-content). Blog posts imported from the
   codeconomy.tech site are Avada Builder content too, but they land in
   .cc-article-body, which is dark — so tables, the "Quellenangaben" toggles
   and the glossary boxes each need their own treatment here. */

/* Headings. base.css sizes bare h2/h3 for hero use (60px/35px, dark grey on a
   light ground); .cc-article-body only re-coloured them, which was invisible
   until a post carried real prose headings — the deal news posts never did.
   Sizes belong here, not in base.css: this is prose in a 72ch column. */
.cc-article-body h2 { font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -0.2px; margin-top: 8px; }
.cc-article-body h3 { font-size: 24px; line-height: 1.3; font-weight: 700; }
.cc-article-body h4 { font-size: 20px; line-height: 1.35; font-weight: 700; }

/* Tables. .cc-fb-table is the shim's wrapper; the editor-authored markup
   inside it brings its own <div class="table-2">, hence the two wrappers. */
.cc-article-body .cc-fb-table { overflow-x: auto; }
.cc-article-body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.cc-article-body th,
.cc-article-body td { border: 1px solid #3A3A3A; padding: 10px 14px; text-align: left; vertical-align: top; }
.cc-article-body thead th { background: #2B2B2B; color: #fff; font-weight: 700; }
.cc-article-body tbody td { color: #DDDDDD; }

/* Collapsible source lists — the closing block of every imported article.
   <details>/<summary>, so no accordion script is needed; see
   codeconomy_fusion_accordion(). */
.cc-fb-accordion { margin: 8px 0; }
.cc-fb-toggle { border: 1px solid #3A3A3A; border-radius: 8px; background: #2B2B2B; padding: 0 20px; }
.cc-fb-toggle + .cc-fb-toggle { margin-top: 12px; }
.cc-fb-toggle > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; font-weight: 700; color: #13EBDE; list-style: none; }
.cc-fb-toggle > summary::-webkit-details-marker { display: none; }
.cc-fb-toggle > summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: #8B8B8B; }
.cc-fb-toggle[open] > summary::after { content: "\2013"; }
.cc-fb-toggle-body { padding-bottom: 18px; font-size: 16px; line-height: 1.7; color: #C9C9C9; }
/* Source URLs are long and unbreakable; without this they widen the flex row
   they sit in and clip. Same automatic-minimum-size trap as everywhere else. */
.cc-fb-toggle-body a { color: #13EBDE; word-break: break-word; }

/* Glossary boxes ([fusion_content_boxes] / [fusion_content_box]). */
.cc-fb-boxes { display: grid; gap: 20px; }
@media (min-width: 801px) {
	.cc-fb-boxes[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cc-fb-boxes[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cc-fb-boxes[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cc-fb-box { min-width: 0; padding: 20px 24px; border: 1px solid #3A3A3A; border-left: 3px solid #13EBDE; border-radius: 8px; background: #2B2B2B; }
.cc-fb-box-icon { margin-right: 10px; font-size: 18px; color: #13EBDE; }
.cc-fb-box-title { display: inline; font-size: 18px; font-weight: 700; color: #fff; }
.cc-fb-box-body { margin-top: 10px; font-size: 16px; line-height: 1.7; color: #C9C9C9; }
.cc-fb-box-body > :first-child { margin-top: 0; }

/* A container/column whose content IS a background image (post 1262's lead
   graphic). The URL, position, size and the padding that gives the box its
   height all come from post_content via codeconomy_fusion_box_style(); only
   the rounding is a choice made here. */
.cc-fb-has-bg { border-radius: 8px; }

/* ---- Footer: mobile stacking -------------------------------------------
   Pre-existing bug, present before the Avada removal and recorded in
   docs/migration/metrics-phase0.txt: at 390px the footer overflowed the
   viewport on EVERY page. `.cc-footer-grid` dropped to two columns at 980px
   and then stayed there — at 390px that is (390 − 64 padding − 56 gap) / 2 =
   135px per column, narrower than "info@codeconomy.tech" or the phone number.
   Nothing was visibly broken because `body` has `overflow-x: hidden`, so it
   clipped silently; only the geometry walker in docs/migration/baseline.sh
   surfaced it.

   `min-width: 0` on the columns as well: grid items default to
   `min-width: auto`, so an unbreakable string can force its track wider than
   the available space regardless of the track sizing above. This is the same
   root cause as the page-wrapper fixes documented in CLAUDE.md — the footer
   was simply missed by that sweep. */
@media (max-width: 640px) {
	.cc-footer-grid { grid-template-columns: 1fr !important; gap: 40px; padding: 56px 24px 36px; }
}

.cc-footer-col,
.cc-footer-grid > div { min-width: 0; }
.cc-footer-col a,
.cc-footer-address { overflow-wrap: break-word; }

/* Empty-state text on an archive with no posts. Needs an explicit colour:
   without one it inherits body's #1E1E1E onto a #1E1E1E background and renders
   invisible — occupying its line box, so the column reads as "blank" rather
   than "missing text". Exactly the failure mode CLAUDE.md warns about; check
   every new text node's computed colour rather than trusting a screenshot. */
.cc-blog-empty { color: #8B8B8B; }

/* ---- WooCommerce controls on the light pages (cart, checkout, account) ----
   Avada styled WooCommerce's buttons and inputs from its own theme options,
   which resolved to this site's teal accent. With Avada gone they fell back to
   WooCommerce core's defaults — a purple "Weiter zur Kasse", a grey
   "Warenkorb aktualisieren", a raw OS-default number input and a red ✕.

   The values below are measured from the pre-migration rendering, not
   invented: transparent background, #13EBDE text and a 2px #13EBDE border at
   13px/18px padding with square corners.

   Scoped to the light page wrapper so it cannot reach the dark redesigned
   pages, which have their own .cc-btn-* utilities. */
.cc-page .button,
.cc-page a.button,
.cc-page button.button,
.cc-page input.button,
.cc-page .checkout-button,
.cc-page #place_order,
.cc-page .woocommerce-button {
	background: transparent;
	color: #13EBDE;
	border: 2px solid #13EBDE;
	border-radius: 0;
	padding: 13px 18px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.cc-page .button:hover,
.cc-page a.button:hover,
.cc-page button.button:hover,
.cc-page input.button:hover,
.cc-page .checkout-button:hover,
.cc-page #place_order:hover,
.cc-page .woocommerce-button:hover {
	background: #13EBDE;
	color: #000;
}

/* WooCommerce disables the update-cart button until a quantity changes. */
.cc-page .button:disabled,
.cc-page button.button:disabled,
.cc-page input.button:disabled {
	opacity: .45;
	cursor: default;
	background: transparent;
	color: #13EBDE;
}

/* Quantity field: white, borderless, softly rounded — as before. Without this
   it renders as the browser's default inset-bordered number input. */
.cc-page input.qty {
	background: #fff;
	color: #1E1E1E;
	border: none;
	border-radius: 10px;
	padding: 8px;
	text-align: center;
	font-family: inherit;
	font-size: 16px;
}

/* Remove-item control: WooCommerce core paints it red (#a00). It was the same
   colour as the surrounding text before. */
.cc-page .product-remove a,
.cc-page a.remove {
	color: #1E1E1E;
	border-radius: 0;
	text-decoration: none;
}
.cc-page .product-remove a:hover,
.cc-page a.remove:hover { color: #13EBDE; background: transparent; }

/* WooCommerce core out-specifies the block above on two properties. Verified
   by walking document.styleSheets for the rules that actually matched, rather
   than guessing:

     .woocommerce a.button.alt          → (0,3,1), beats .cc-page a.button (0,2,1)
     .woocommerce a.remove { color: … !important }

   Both are fair wins by a more specific / !important rule, not the
   "Avada beats everything" anomaly documented in CLAUDE.md — so matching the
   specificity for the button and using !important for the remove link are the
   right tools, in that order. Don't reach for !important on the button too. */
.cc-page .woocommerce a.button,
.cc-page .woocommerce button.button,
.cc-page .woocommerce input.button,
.cc-page .woocommerce a.button.alt,
.cc-page .woocommerce button.button.alt,
.cc-page .woocommerce input.button.alt,
.cc-page .woocommerce #place_order {
	color: #000;
	background: #13EBDE;
	border: 2px solid #13EBDE;
	border-radius: 0;
	padding: 13px 18px;
}

.cc-page .woocommerce a.button:hover,
.cc-page .woocommerce button.button:hover,
.cc-page .woocommerce input.button:hover,
.cc-page .woocommerce a.button.alt:hover,
.cc-page .woocommerce button.button.alt:hover,
.cc-page .woocommerce input.button.alt:hover,
.cc-page .woocommerce #place_order:hover {
	background: #46FFF4;
	color: #000;
}

.cc-page .woocommerce a.button:disabled,
.cc-page .woocommerce button.button:disabled,
.cc-page .woocommerce input.button:disabled {
	background: #13EBDE;
	color: #000;
	opacity: .45;
}

.cc-page .woocommerce a.remove,
.cc-page .product-remove a.remove { color: #1E1E1E !important; }
.cc-page .woocommerce a.remove:hover,
.cc-page .product-remove a.remove:hover { color: #13EBDE !important; background: transparent !important; }

/* ---- Checkout cards -----------------------------------------------------
   mike-style.css already carries this exact card treatment, but scoped to
   `body.avada-woo-one-page-checkout` — a body class Avada added. With Avada
   gone the class is gone, the rule never matches, and WooCommerce core's own
   `.col-1 { float: left; width: 47% }` takes over: the billing and shipping
   columns floated side by side at half width instead of stacking as full-width
   cards, and the order summary lost its card entirely.

   Re-declared here on our own markup with the values measured from the
   pre-migration rendering (830px card, 20px radius, 50px 50px 35px padding,
   0 4px 20px rgba(0,0,0,.05) shadow), rather than adding an `avada-*` class to
   a theme whose whole point is not having one. */
.cc-page .woocommerce .checkout #customer_details .col-1,
.cc-page .woocommerce .checkout #customer_details .col-2,
.cc-page .woocommerce .checkout .cc-checkout-box {
	float: none;
	width: 100%;
	max-width: 830px;
	margin: 0 auto 30px;
	padding: 50px 50px 35px;
	border: 0;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

/* col2-set uses floats; without a clear the following card overlaps them. */
.cc-page .woocommerce .checkout .col2-set::after { content: ""; display: table; clear: both; }

/* ---- Checkout payment section ------------------------------------------
   WooCommerce core wraps the payment methods in `#payment`, which it paints
   with its own grey-lilac (#ebe9eb) and pads. Avada set `display: contents`
   on it so the box vanished and its children laid out directly inside
   `#order_review`'s flex column — which is what mike-style.css's
   `#payment { order: 1 }` assumes.

   Without it: a lilac panel appeared around the whole payment area, the
   method tiles stretched to half the row each, and `.payment_box` — which
   WooCommerce positions absolutely and expects to span the full row — was
   sized by a now-narrower parent and rendered as a 168px column of text
   overlapping the privacy notice beside it.

   Values below are measured from the pre-migration rendering. */
.cc-page .woocommerce-checkout #payment {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

/* Keep the payment wrappers in normal flow. #order_review is a flex column
   (legacy-mike-style.css) and that file also pushes `#payment { order: 1 }`,
   which used to pair with a PHP hook swap that emitted #payment first. That
   swap is gone (see the long comment in inc/woocommerce.php): the DOM order is
   now WooCommerce's own — summary table, #payment, then whatever a plugin hooks
   onto `woocommerce_review_order_after_payment` — so `order` has to go back to
   its initial value or #payment would jump above the summary again, and
   woocommerce-paypal-payments' smart-button wrappers would keep sorting ahead
   of it to the top of the box. Change these two together or not at all. */
.cc-page .woocommerce-checkout #order_review > #payment { order: 0; }

/* ---- Payment method list ------------------------------------------------
   legacy-mike-style.css lays this out as a flex ROW of tiles with the
   description box torn out of flow underneath:

     .payment_methods    { display: flex; margin-bottom: 100px }
     .payment_methods li { display: flex; align-items: center; padding: 15px }
     li:first-child      { margin-right: 40px }
     li .payment_box     { position: absolute; width: 100%; bottom: -90% }

   That was written for exactly two gateways and a description short enough to
   fit the hardcoded 100px reservation. Neither holds:

   - `bottom: -90%` is 90% of the UL's own height, so the absolutely positioned
     .payment_box lands ON TOP of the tiles it belongs to — at 1280px the
     description covered both method labels completely and only one radio icon
     showed through (the second gateway's, purely because a later positioned
     sibling paints over an earlier one). The visible payment methods were
     literally unreadable, and the tail of the box overlapped the privacy
     notice below.
   - a third gateway (Trustly is configured in production) splits the row three
     ways, wrapping each label onto two lines inside a tile whose height is set
     by the single-line case, so the labels were also clipped.

   Replaced with a plain stacked list: one full-width row per gateway, its own
   description in normal flow inside the same rounded tile. Correct for any
   number of gateways and any description length, and it needs no magic
   spacer. The tile treatment (#F7F7F7, 20px radius, 18px/700 label, the
   FontAwesome circle icon standing in for the radio) is kept from the legacy
   rules so the section still matches the rest of the light checkout.

   Specificity notes, since every rule here is beating a legacy one rather than
   defining something new: the legacy selectors score (0,3,0) for the UL/LI and
   (1,3,1) for the label (`#main .checkout .payment_methods li label`), so the
   `.cc-page .woocommerce-checkout #payment` prefix plus a tag- or
   class-qualified target clears them on plain specificity. No !important. */
.cc-page .woocommerce-checkout #payment ul.payment_methods {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	display: block;
	position: relative;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
	border-radius: 20px;
	background: #F7F7F7;
	overflow: hidden;
}
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child { margin-bottom: 0; }

/* `li:first-child { margin-right: 40px }` only made sense in the flex row. */
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:first-child { margin-right: 0; }

/* The whole label row is the click target, so it carries the padding rather
   than the li — 64px on the left leaves room for the icon. */
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	display: block;
	margin: 0;
	padding: 18px 24px 18px 64px;
	color: #1E1E1E;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

/* The real radio is collapsed to a 0x0 anchor by the legacy rules and draws
   itself through ::after (circle-plus unselected, circle-check selected). Pin
   that anchor to the label's first line instead of letting it sit in flow with
   a `bottom: 22px` nudge, which is what put the icon over the text. */
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	position: absolute;
	top: 17px;
	left: 22px;
	bottom: auto;
	padding: 0;
}
/* Two things the legacy rules get wrong once the icon is pinned:
   - `color: var(--BU-Primary)` resolves to `var(--primary_color)`, an Avada
     theme-options variable that no longer exists, so the whole declaration is
     invalid and the glyph fell back to inherited black. (The same dead
     variable is referenced ~44 more times across the legacy sheets — fixing
     it globally is its own decision, not something to smuggle in here.)
   - the ::after box is sized 32x32 but inherits the body's 1.6 line-height,
     so the glyph's own line box is ~51px tall and it sat well below the box
     it is positioned by. `line-height: 1` makes the 32px box mean 32px.
   `opacity: 0.5` on the unselected state is replaced with a real grey, so the
   unselected icons read as a deliberate colour rather than a faded one. */
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]::after {
	top: 0;
	left: 0;
	line-height: 1;
	color: #A8A8A8;
	opacity: 1;
}
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked::after {
	top: 0;
	color: #1E1E1E;
}

/* Selected-tile affordance. Its own rule, not merged into the block above:
   a browser without :has() drops the whole rule it appears in, and this is
   the only declaration here that is decoration rather than a bug fix. */
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:checked) {
	background: #EFEFEF;
	box-shadow: inset 0 0 0 1px #DDDDDD;
}

/* In flow, inside its own tile, under its own label — no absolute positioning
   and no `bottom` percentage. WooCommerce's ::before is the little pointer
   triangle it draws for the torn-out version; there is nothing left to point
   at. */
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box {
	position: static;
	width: auto;
	margin: 0;
	padding: 0 24px 20px 64px;
	background: transparent;
	color: #1E1E1E;
	font-size: 16px;
	line-height: 1.6;
}
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box::before { display: none; }
.cc-page .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box p:last-child { margin-bottom: 0; }

/* The gateway description sits above the terms/place-order row now, so the
   list needs real separation from it rather than the old 100px spacer. */
.cc-page .woocommerce-checkout #payment div.form-row.place-order { margin-top: 28px; }

/* WooCommerce core's `#payment div.form-row { padding: 1em }` — 18px at this
   site's base font size — inset the terms checkbox and the place-order button
   from the rest of the order review. Avada zeroed it. */
.cc-page .woocommerce-checkout #payment div.form-row,
.cc-page .woocommerce-checkout #payment div.form-row.place-order { padding: 0; }

/* Mobile checkout cards. mike-style.css already drops the card padding from
   50px to 15px below 600px — and, like the desktop rule, does it under the
   `avada-woo-one-page-checkout` body class that no longer exists. Without it
   the 50px padding left the order-review table ~10px wider than a 390px
   viewport (clipped silently, since body has overflow-x: hidden). */
@media only screen and (max-width: 600px) {
	.cc-page .woocommerce .checkout #customer_details .col-1,
	.cc-page .woocommerce .checkout #customer_details .col-2,
	.cc-page .woocommerce .checkout .cc-checkout-box { padding: 15px; }

	.cc-page .woocommerce .checkout .cc-checkout-box .button { width: 100%; }
}

/* The order-review table is a real table with fixed-ish columns; let it scroll
   inside its own box rather than widening the page. */
.cc-page .woocommerce-checkout-review-order { overflow-x: auto; }

/* ---- #main: neutralise legacy per-page-type spacing ----------------------
   gesundheitsmarkt.css carries a set of rules that add vertical space to
   #main for specific WordPress body classes — `.single-product #main
   { margin-top: 50px }`, `.single #main { padding: 100px 0 }`,
   `body.blog #main { margin-top: 100px }` — written to compensate for
   floating elements in Avada-Builder layouts that no longer exist. They still
   match, because they key off real WordPress body classes and the element id,
   neither of which changed with the theme.

   Avada-era CSS suppressed these with `.cc-full-width #main { margin: 0
   !important; padding: 0 !important }`. That rule was deleted along with the
   rest of the Avada workarounds (it also forced a dark background, which broke
   the light cart). This replaces it — same effect, no !important, no colour.

   `#main.cc-main` is (1,1,0), the same specificity as `.single-product #main`;
   main.css loads last, so it wins on source order. Our templates own all of
   #main's spacing. */
#main.cc-main { margin: 0; padding: 0; }

/* ---------- FontAwesome 4 syntax compatibility ----------------------------
   `<i class="fa fa-times-circle">` is FontAwesome *4* markup, and FA6 does not
   support it: FA6 treats bare `.fa` as a base class only. Its own rules put
   `.fa` in the display/line-height/smoothing rule but deliberately leave it
   OUT of the font-family one, which needs `.fa-solid`/`.fas` (or another style
   class) alongside. Verified against the unmodified all.min.css, so this is
   FA6's real behaviour, not something the subsetter dropped.

   Symptom: the icon gets its `content: "\f057"` and its box, but renders in
   the inherited body font (Inter), where that codepoint does not exist — so it
   paints as a blank or tofu box rather than an icon. Nothing errors.

   Fixed here rather than by rewriting the markup because two of the three
   consumers are not ours to edit freely: templates/newsletter-form.html is
   buildustry's original functional form, and the third usage lives in the
   post_content of CF7 form 330656 ("Testdaten Form"), i.e. editor-authored
   content. One rule covers all of them, and any FA4-era markup that arrives
   later with imported content.

   Not in the subset file: that one is generated from measured icon usage and
   must never be hand-edited (see docs/migration/NOTES.md). This is a base-rule
   compatibility shim, which the subsetter cannot infer, so it belongs in ours.

   The :not() guard matters. A bare `.fa { font-family }` here would load after
   subset.css at equal specificity and therefore also override
   `.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}`, breaking every brand
   icon that correctly writes `class="fa fa-brands fa-linkedin"`. The guard
   applies the solid face only when no explicit style class is present. */
.fa:not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.fa-brands):not(.fas):not(.far):not(.fal):not(.fat):not(.fad):not(.fab) {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
}

/* ---- PMPro login (/login/) --------------------------------------------
 *
 * Three separate bugs, all from legacy CSS whose assumptions no longer hold
 * after the move off Avada. Markup is theme/paid-memberships-pro/pages/login.php.
 */

/* 1. White-on-white headings.
 *    legacy-gesundheitsmarkt.css gives the hero box
 *    `background: var(--BU-Primary)` and its h1/h2/h4 an explicit
 *    `color: #FFFFFF`. But legacy-global-sites.css defines
 *    `--BU-Primary: var(--primary_color)` -- and --primary_color was an Avada
 *    *dynamic* CSS variable, emitted into wp-content/uploads/fusion-styles/,
 *    which is now empty (nothing regenerates it; the theme no longer loads
 *    Avada at all). An invalid var() at computed-value time does NOT fall back
 *    to the declaration it would have overridden -- the property drops to its
 *    initial value -- so the box painted transparent over a page that has no
 *    background of its own either, i.e. browser-default white, and the white
 *    headings vanished into it.
 *
 *    NOTE: --BU-Primary is used 46 times across the legacy sheets and ALL of
 *    them are silently broken the same way. This fixes only the login hero;
 *    the one-line global repair is `:root { --BU-Primary: #1E1E1E; }` -- which
 *    is what the trailing Blue-500 annotation on that declaration intends, and
 *    every sibling variable in the same block was already remapped to a
 *    literal hex. It is deliberately NOT done here because it would change 45
 *    other places across the site in one go.
 */
.pmpro-login .post-password-form .restricted-item-image { background: #1E1E1E; }

/* 2. Invisible username field, visible password field.
 *    legacy-gesundheitsmarkt.css:3615 sets
 *    `.post-password-form p input[type="text"] { color: var(--Blue-100) }`.
 *    --Blue-100 is #F7F7F7 -- near-white -- and the form card is #FFF, so the
 *    text was unreadable. The selector lists [type="text"] and
 *    [type="checkbox"] but NOT [type="password"], which is why only
 *    #user_login was affected and the asymmetry looked arbitrary.
 *
 * 3. Uneven gap under the password field.
 *    Same selector's `margin: 0` reset also misses [type="password"], so
 *    #user_pass alone kept the generic `form p input { margin-bottom: 35px }`
 *    (legacy-gesundheitsmarkt.css:1842) stacked on top of .login-wrapper's
 *    flex gap -- the same "legacy margin + flex gap doubling" pattern as the
 *    newsletter and contact forms elsewhere in this file.
 *
 *    Both fields are declared together below so they cannot drift apart again.
 *    Width/padding are intentionally left to the existing rules: only colour
 *    and the stray margin are corrected here.
 */
.pmpro-login #loginform .login-wrapper input#user_login,
.pmpro-login #loginform .login-wrapper input#user_pass {
	background: #FFFFFF;
	color: #1E1E1E;
	margin-bottom: 0;
}
