/* ============================================================
   DTF Joker — Main Stylesheet (GO DTF design system)
   ============================================================ */

/* ----- Design tokens (design-fixes.md §2) ----- */
:root {
  /* Color */
  /* Primary = the client's official brand magenta, taken straight from the
     Joker Werbung vector logo (#E5007E). Was #f82858 (too red); this matches
     the header/footer logo exactly so the pink reads as one colour site-wide. */
  --color-primary: #e5007e;
  --color-primary-rgb: 229, 0, 126;
  --color-primary-soft: #f26fb1;
  --color-primary-pale: #ffd2ea;
  --color-primary-hover: #c00069;
  --color-text: #141414;
  --color-text-rgb: 20, 20, 20;
  /* Body copy. Deliberately close to the heading black: at #3d3d3d the text
     technically passed contrast but read washed-out next to the headings, and
     the client compared us unfavourably to go-dtf (which sets #333). */
  --color-text-muted: #2f2f2f;
  --color-text-light: #6b6b6b;
  /* Warm off-white page base — a hair off pure #fff so large light areas read
     intentional/warm rather than clinical. Cards + header stay pure #fff to pop. */
  --color-bg: #ffffff;
  /* Homepage section rhythm: pure white base + one soft neutral grey, grouped
     in pairs (matches the go-dtf reference). No pastel section washes. */
  --color-section-alt: #f4f4f5;
  /* Neutrals warmed a hair toward the brand pink so light sections read
     intentional rather than clinical grey. Swap freely when re-theming. */
  --color-bg-soft: #f5eff2;
  --color-bg-panel: #efe8ec;
  --color-tint: #fff4f7;
  --color-footer: #606060;
  --color-footer-rgb: 96, 96, 96;
  --color-success: #2e8b3d;
  --color-info: #2196c4;
  --color-border: #e6e6e6;
  --color-border-soft: #eeeeee;

  /* ---- Client brand accent palette ----
     The client's company colours. Pink (--color-primary) stays the primary
     workhorse (buttons/links/prices); teal, yellow and orange are STRUCTURAL
     accents only — the top brand bar, feature icons, per-card colour cap and
     section markers. Raw yellow/teal fail as text on white, so the *-ink
     variants exist for any text/contrast use. Swap freely when re-theming. */
  /* Structural accents pulled toward the client brand: a cleaner, brighter aqua
     at the brand's mint hue (was a deeper, flatter #00a8a8 that read "blue"),
     the brand's golden yellow (#F8DD05, was a greenish #f0f000) and a warmer
     brand orange. The *-ink variants stay dark enough for text/contrast on white. */
  --color-teal: #12aec0;
  --color-yellow: #f8dd05;
  --color-orange: #e8601c;
  --color-teal-rgb: 18, 174, 192;
  --color-yellow-rgb: 248, 221, 5;
  --color-orange-rgb: 232, 96, 28;
  --color-teal-ink: #0a7d8b; /* WCAG AA: 4.86:1 on white — for teal TEXT + icons */
  --color-orange-ink: #bf4f12;
  /* Soft mint straight from the brand — background-only (fails as text on white). */
  --color-mint: #93d7e0;
  /* Four-colour brand bar — soft blended gradient (diffused, not hard segments).
     Hues ordered cool→warm so every transition stays clean (teal→yellow→orange
     →pink); a pink↔teal fade would pass through muddy grey, so it's avoided. */
  --brand-bar: linear-gradient(90deg,
    var(--color-teal) 0%,
    var(--color-yellow) 34%,
    var(--color-orange) 64%,
    var(--color-primary) 100%);
  /* Barely-there tint bands — a hint of colour, not a colour block. */
  --color-band-teal: #eef8f8;
  --color-band-warm: #fdf5ec;

  /* ---- Astra bridge ----
     Astra builds its own buttons, links and focus states from these palette
     variables (defaults: a blue #046bd2 / #045cb4). Point them at our brand
     tokens so Astra's native components render on-brand automatically — this
     is what stops Astra and our CSS fighting, and removes the need for
     per-component !important overrides. Single source of truth = our tokens. */
  --ast-global-color-0: var(--color-primary);
  --ast-global-color-1: var(--color-primary-hover);

  /* Layout */
  --container: 1280px;
  --container-wide: 1400px;
  /* Reading measure for long-form prose. Line length, not the container, is what
     makes body text readable: unbounded, the Ratgeber ran ~150 characters per
     line; capped in px it goes narrow again the moment the type grows. In ch it
     tracks the font size, so the line stays ~75 characters at any scale. */
  --measure: 75ch;

  /* Typography */
  --font-body: 'Inter', Arial, Helvetica, sans-serif;
  --font-display: 'Playfair Display', Georgia, "Times New Roman", serif;
  --fs-h1: 44px;
  --fs-h2: 36px;
  --fs-h3: 24px;
  --fs-body: 17px;
  --fs-meta: 15px;
  --fs-nav: 15px;

  /* Spacing (8px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Radius */
  --radius-pill: 999px;
  --radius-card: 12px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Shadow */
  --shadow-card: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-float: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-subtle: 0 6px 18px rgba(0,0,0,0.06);
}

/* ----- Global reset / typography ----- */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--fs-body);
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }

img { max-width: 100%; height: auto; }

::selection { background: var(--color-primary); color: #fff; }
html { scroll-behavior: smooth; }

/* ----- Layout ----- */
.dtf-container {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.dtf-container--narrow { max-width: 760px; }

/* ----- Buttons / links ----- */
.button,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link,
.add_to_cart_button,
.dtf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 15px 30px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.28);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Slide-in arrow affordance on hover (skipped by browsers on <input>, degrades gracefully) */
.button::after,
.wp-element-button::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.wp-block-button__link::after,
.add_to_cart_button::after,
.dtf-btn::after {
  content: '\2192';
  display: inline-block;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-width 0.2s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-block-button__link:hover,
.add_to_cart_button:hover,
.dtf-btn:hover {
  background: var(--color-primary-hover);
  color: #fff;
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
  transform: translateY(-2px);
}

.button:hover::after,
.wp-element-button:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.wp-block-button__link:hover::after,
.add_to_cart_button:hover::after,
.dtf-btn:hover::after {
  opacity: 1;
  max-width: 20px;
}

/* Astra's WC-block buttons (.wp-block-button__link, .add_to_cart_button) now
   inherit our brand via the --ast-global-color-0 bridge in :root, so no
   per-component background override is needed here — they pick up the shared
   button styling above and Astra's own pink. */

.dtf-btn--sm { padding: 10px 20px; font-size: 14px; }

/* =============================================================
   HEADER / NAVIGATION
   ============================================================= */

/* Sticky header: SOLID white, no backdrop-filter.
   It used to be rgba(255,255,255,0.68) + blur(16px) "frosted glass". Body text stayed
   legible through it as the page scrolled and collided with the nav labels. The frosted
   look also leans entirely on backdrop-filter, and where that is unsupported the alpha is
   the ONLY thing between the nav and the text behind it, so it degrades to an unreadable
   header rather than a plain one. On a white storefront the glass buys nothing visually,
   so this is solid white plus the existing hairline shadow: identical intent, legible in
   every browser. */
.dtf-site-header {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Front page only: the header rides TRANSPARENT over the hero photo on load, so
   the artwork reads full-bleed, then turns solid white once JS adds .dtf-scrolled
   past the hero (see the header-scroll snippet in functions.php). With JS off the
   header stays solid white (the default above), so nothing is ever unreadable.
   While transparent, the header text flips to white — the hero's top scrim
   (.dtf-home-hero::before) guarantees the contrast. */
.dtf-full-width-front .dtf-site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.dtf-full-width-front .dtf-site-header:not(.dtf-scrolled) {
  background: transparent;
  box-shadow: none;
}
.dtf-full-width-front .dtf-site-header:not(.dtf-scrolled) .site-title__lead,
.dtf-full-width-front .dtf-site-header:not(.dtf-scrolled) .site-title__accent,
.dtf-full-width-front .dtf-site-header:not(.dtf-scrolled) .dtf-header-nav a {
  color: #fff;
}
.dtf-full-width-front .dtf-site-header:not(.dtf-scrolled) .dtf-header-account {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.dtf-full-width-front .dtf-site-header:not(.dtf-scrolled) .dtf-mobile-toggle span {
  background: #fff;
}

.dtf-header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 94px;
  gap: 24px;
}

.dtf-header-logo {
  grid-column: 1;
  justify-self: start;
}
.dtf-header-logo img {
  width: 110px;
  height: auto;
  display: block;
}
.dtf-header-logo .site-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
.dtf-header-logo .site-title__lead { color: var(--color-primary); }
.dtf-header-logo .site-title__accent { color: var(--color-teal-ink); }

/* Jester mark before the wordmark. Out-specifies the generic `.dtf-header-logo img`
   (0,1,1) sizing above with (0,2,0). Colour finish is the default (solid header on
   every non-front page and the front page once scrolled); the white finish is revealed
   only while the front-page header is transparent (rule in the transparent block above).
   Both are rendered; CSS toggles which is shown, so the swap is instant with no JS. */
.dtf-header-logo .dtf-header-mark {
  height: 74px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}
.dtf-header-logo .dtf-header-mark--white { display: none; }
.dtf-header-logo .dtf-header-mark--color { display: block; }
.dtf-full-width-front .dtf-site-header:not(.dtf-scrolled) .dtf-header-mark--white { display: block; }
.dtf-full-width-front .dtf-site-header:not(.dtf-scrolled) .dtf-header-mark--color { display: none; }

/* Desktop nav — centred on the page via the middle grid column (equal 1fr
   side columns), so it is not pushed off-centre by unequal logo/controls. */
.dtf-header-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  justify-content: center;
}

.dtf-header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 36px;
}

.dtf-header-nav a {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  padding: 8px 0;
  position: relative;
  transition: color 0.2s;
}

.dtf-header-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.dtf-header-nav a:hover,
.dtf-header-nav .current-menu-item > a {
  color: var(--color-teal-ink);
}

.dtf-header-nav a:hover::after,
.dtf-header-nav .current-menu-item > a::after {
  transform: scaleX(1);
}

.dtf-header-nav .sub-menu a::after {
  display: none;
}

/* Dropdown */
.dtf-header-nav .menu-item-has-children { position: relative; }
.dtf-header-nav .sub-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 200px;
  box-shadow: var(--shadow-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.dtf-header-nav .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dtf-header-nav .sub-menu a {
  padding: 10px 22px;
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: none;
  transition: background-color 0.15s, color 0.15s;
}
.dtf-header-nav .sub-menu a:hover {
  background: var(--color-primary-pale);
}

/* Header right */
.dtf-header-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

.dtf-header-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-primary);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  transition: border-color 0.2s, color 0.2s;
}
.dtf-header-account:hover { border-color: var(--color-teal-ink); color: var(--color-teal-ink); }
.dtf-header-account__label { line-height: 1; }

/* Header cart — icon button with a pink item-count badge */
/* Floating cart button — fixed bottom-right, mirrors the go-dtf reference.
   Pink disc + teal count badge (the two brand colours). */
.dtf-cart-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--color-primary-rgb), 0.40);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dtf-cart-fab:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(var(--color-primary-rgb), 0.50);
}
.dtf-cart-fab__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-teal-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  border: 2px solid #fff;
}

/* Keep Astra's scroll-to-top clear of the cart button (stack it above). */
#ast-scroll-top { bottom: 96px !important; }

/* Mobile header */
.dtf-mobile-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--color-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  color: #fff;
  transition: background-color 0.2s;
}
.dtf-mobile-toggle:hover {
  background: var(--color-primary-hover);
}
.dtf-mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  margin: 3px auto;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.dtf-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.dtf-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.dtf-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* =============================================================
   FOOTER
   ============================================================= */

.site-footer {
  background: var(--color-footer);
  color: #fff;
  padding: 48px 0 30px;
  margin-top: 0;
}

/* Footer brand logo — the monochrome die-cut mark sits directly on the dark
   footer (its white sticker outline + grey fills carry it; no white chip). */
.dtf-footer-logo {
  display: inline-block;
  margin-bottom: 18px;
  line-height: 0;
}
.dtf-footer-logo img {
  width: 156px;
  height: auto;
  display: block;
}

.site-footer .dtf-footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  /* The last column must hold three 64px payment chips on ONE row (3 x 64 + 2 x 8 =
     208px); anything narrower wraps PayPal onto a line of its own. */
  grid-template-columns: 1.2fr 0.9fr 0.9fr 1.15fr 1.35fr;
  gap: 44px;
}

.site-footer .dtf-footer-col h3 {
  color: #fff;
  font-size: 21px;
  margin-bottom: 14px;
  position: relative;
}

.site-footer .dtf-footer-col h3::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--color-primary);
  margin-top: 8px;
}

.site-footer a,
.site-footer p {
  color: #fff;
  font-size: 16px;
  line-height: 1.75;
  opacity: 0.92;
}

.site-footer a:hover { opacity: 1; color: var(--color-primary); }

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer ul li { margin-bottom: 8px; }

.site-footer .dtf-footer-bottom {
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 0 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  font-size: 14px;
  opacity: 0.6;
}

/* =============================================================
   HOMEPAGE
   ============================================================= */

/* ----- Hero ----- */
/* Hero uses the client mascot illustration (light background). A left→right
   white scrim keeps the dark headline legible over the busy artwork while the
   mascot stays visible centre-right. WebP with JPG fallback via image-set. */
.dtf-home-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background:
    image-set(
      url("../images/hero_cover.webp?v=2") type("image/webp"),
      url("../images/hero_cover.jpg?v=2") type("image/jpeg")
    )
    center center / cover no-repeat,
    var(--color-band-warm);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Two scrims baked into one layer: a soft top wash so the transparent header's
   nav stays legible over any part of the photo, and a stronger bottom-left well
   so the white wordmark clears WCAG against the busy artwork. */
.dtf-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 18%),
    linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0) 52%);
}

.dtf-home-hero__content {
  position: relative;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 96px 24px 88px;
}

/* Poster wordmark — self-hosted Playfair Display (already the site's display serif),
   stacked DTF / JOKER at 700. High-contrast enough to read as "flashy" but with strokes
   heavy enough to hold up over the busy hero photo, including on mobile; a firm
   text-shadow seats it against the artwork.
   text-transform prints the caps; the DOM text stays "DTF Joker" for the a11y name. */
.dtf-home-hero .dtf-hero-wordmark {
  font-family: var(--font-display), Georgia, serif;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(58px, 10.5vw, 150px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.dtf-home-hero .dtf-hero-wordmark span { display: block; }

/* Full-height hero with the glass header floating transparently over it:
   the header is sticky (94px in flow), so pulling the front-page content up
   by that height slides the hero underneath it — first screen = one viewport. */
.dtf-full-width-front #content { margin-top: -94px; }

/* ----- Eyebrow + Section headings ----- */
.dtf-eyebrow {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.dtf-section-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 14px;
  line-height: 1.15;
}

.dtf-section-sub {
  color: var(--color-text-muted);
  font-size: 19px;
  line-height: 1.6;
  margin-bottom: 36px;
}

/* ----- Product intro section (below hero) ----- */
.dtf-products-intro {
  padding: 88px 0 48px;
}
.dtf-products-intro .dtf-section-sub { max-width: 720px; }

.dtf-products-intro-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.dtf-products-intro-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.dtf-products-intro-list li:last-child { border-bottom: none; }
.dtf-products-intro-list li a {
  color: var(--color-primary);
  font-weight: 700;
}
.dtf-products-intro-list li a:hover { text-decoration: underline; }

/* ----- Product grid (homepage) ----- */
.dtf-home-products {
  padding: 0 0 88px;
}

.dtf-home-products .dtf-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* Column flex so the CTA can be pinned to the bottom of the card. Product names
   wrap onto two lines unevenly ("DTF Bogenware A4" vs "DTF Meterware
   570x1000mm"), which otherwise leaves the price and button of each card sitting
   at a different height across the row. */
.dtf-home-products .dtf-product-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 0 0 18px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.dtf-home-products .dtf-product-card:hover {
  box-shadow: 0 14px 32px rgba(var(--color-text-rgb), 0.14);
  border-color: var(--color-primary-pale);
  transform: translateY(-4px);
}

/* Square image well. It was 1 / .82, which letterboxed the artwork and left the
   card looking half-empty — the whole reason the reference site's cards read as
   "bigger" at almost identical card width (273px vs our 267px). */
.dtf-home-products .dtf-product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f7f7f7;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.dtf-home-products .dtf-product-info {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Reserve two lines: half the names wrap and half do not, and without this the
   prices below them sit at two different heights across the row. */
.dtf-home-products .dtf-product-info h3 {
  font-size: 19px;
  font-weight: 700;
  min-height: 2.3em;
  margin-bottom: 8px;
}

.dtf-home-products .dtf-product-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.dtf-home-products .dtf-product-tax {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 2px;
}

.dtf-home-products .dtf-product-delivery {
  font-size: 13px;
  color: var(--color-success);
  font-weight: 600;
  margin-bottom: 14px;
}

/* margin-top:auto pins the CTA to the card's bottom edge, so all four line up
   however many lines the product name takes. */
.dtf-home-products .dtf-product-card .dtf-btn {
  width: 100%;
  text-align: center;
  padding: 13px 18px;
  font-size: 15px;
  margin-top: auto;
}

/* ----- Feature icon row ----- */
.dtf-features {
  padding: 72px 0 80px;
  background: var(--color-bg-soft);
}

.dtf-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

.dtf-feature-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  background: var(--color-primary-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 26px;
}

.dtf-feature h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.dtf-feature p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ----- Quickstart / tips section ----- */
.dtf-quickstart {
  padding: 96px 0;
  background: var(--color-bg);
}

.dtf-quickstart .dtf-eyebrow { text-align: center; }
.dtf-quickstart .dtf-section-title { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }

.dtf-quickstart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.dtf-quickstart-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  text-align: center;
  padding-bottom: 24px;
}

.dtf-quickstart-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: #f7f7f7;
}

.dtf-quickstart-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 20px 22px 10px;
}

.dtf-quickstart-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 22px 18px;
}

/* ----- Benefits long-form grey section ----- */
.dtf-benefits-long {
  padding: 96px 0;
  background: var(--color-bg);
}

.dtf-benefits-long .dtf-section-title {
  margin-bottom: 40px;
}

.dtf-benefits-long h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  counter-increment: benefit-counter;
}

.dtf-benefits-long h3::before {
  content: counter(benefit-counter) ". ";
  color: var(--color-primary);
}

/* Two up, not one 760px column. The four benefits used to stack in a single
   narrow column inside a much wider container, which is what made the page read
   as a thin ribbon of text floating in white. Two columns fill the container
   without stretching any line past a readable length. */
.dtf-benefits-long__content {
  counter-reset: benefit-counter;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 64px;
}

.dtf-benefits-long p {
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ----- FAQ accordion (homepage) ----- */
.dtf-faq-section {
  padding: 96px 0;
  background: var(--color-bg-soft);
}

.dtf-faq-section .dtf-section-title {
  text-align: center;
  margin-bottom: 40px;
}

.dtf-accordion {
  max-width: 980px;
  margin: 0 auto;
}

.dtf-accordion__item {
  border-bottom: 1px solid var(--color-border);
}

/* Each FAQ question is a real <h2> wrapping the button: search engines and screen readers
   get a heading they can navigate, the accordion keeps looking like an accordion. The
   heading is a semantic wrapper only, so strip every visual trace of it.

   Specificity is deliberate: Astra styles `.entry-content h2` and would otherwise win,
   leaving an 11px gap between each question and its answer panel. */
.dtf-accordion .dtf-accordion__item .dtf-accordion__heading,
.entry-content .dtf-accordion__heading {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
  border: none;
}

.dtf-accordion__trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 21px 0;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-body);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.2s;
}

/* Reset Astra's global button background/color on every interaction state —
   its `button:hover`/`button:focus` rules otherwise paint the trigger blue. */
.dtf-accordion__trigger:hover,
.dtf-accordion__trigger:focus,
.dtf-accordion__trigger:active,
.dtf-accordion__trigger[aria-expanded="true"] {
  background: transparent;
  color: var(--color-primary);
}

.dtf-accordion__trigger:focus {
  outline: none;
}
.dtf-accordion__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.dtf-accordion__trigger::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--color-text-light);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.dtf-accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(45deg);
  color: var(--color-primary);
}

.dtf-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Headroom, not a fit: the panel animates on max-height, so this only has to
   exceed the tallest answer. The type scale grew, so the old 500px would clip. */
.dtf-accordion__panel[aria-hidden="false"] {
  max-height: 640px;
}

.dtf-accordion__panel p {
  padding: 0 0 22px;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.7;
  max-width: 1080px; /* match .dtf-content-page so FAQ answers fill the same measure */
  margin: 0;
}

/* ----- CTA strip (before footer) ----- */
.dtf-cta-strip {
  padding: 80px 0;
  background: var(--color-bg);
}

.dtf-cta-strip__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: center;
}

.dtf-cta-strip__image img {
  width: 240px;
  height: auto;
  display: block;
}

.dtf-cta-strip h2 {
  font-size: 34px;
  font-weight: 700;
}

.dtf-cta-strip p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 560px;
}

/* =============================================================
   PAYMENT BRAND MARKS  (shared: product summary + site footer)

   Everything else that styles the single product page lives in
   product-page.css, which is enqueued only on is_product() and AFTER this file.
   The product page used to be styled in BOTH files: 22 selectors were defined
   twice, main.css always lost, and one of its rules
   (.dtf-product-left .product_title) matched nothing at all because Astra
   renders the title in the RIGHT column. Editing the dead copy and seeing no
   change is a trap; keep the product page in one file.
   ============================================================= */

/* ----- Payment brand marks (product summary + footer) -----
   The <img> carries its own width/height, so the row reserves space before the SVGs
   load and CLS stays 0. The chip is white in BOTH variants: the brand marks are drawn
   for a light background and several (Visa's blue, Mastercard's dark text) lose contrast
   or look grubby placed straight onto the charcoal footer. */
.dtf-paymarks {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dtf-paymark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  line-height: 0;
}

.dtf-paymark img {
  display: block;
  width: 48px;
  height: 31px;
}

/* Fallback chip for a gateway with no brand mark (e.g. Vorkasse, if re-enabled). */
.dtf-paymark__text {
  display: inline-flex;
  align-items: center;
  height: 31px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-muted);
}

.dtf-paymarks--footer {
  margin-bottom: 16px;
}

/* =============================================================
   SHOP PAGE
   ============================================================= */

/* `.dtf-shop-header` was styled here but no template emits it — the theme has no
   shop archive override, so the archive heading is Astra's. */
.woocommerce-shop ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  list-style: none;
  padding: 0;
}

.woocommerce-shop .products::before { display: none !important; }

/* =============================================================
   BLOG ARCHIVE
   ============================================================= */

.dtf-blog-list {
  max-width: 1000px;
  margin: 48px auto;
  padding: 0 24px;
}

.dtf-blog-list h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  margin-bottom: 8px;
}

.dtf-post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 48px;
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--color-primary-soft);
}

.dtf-post-card:first-child {
  padding-top: 32px;
}

.dtf-post-card h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}

.dtf-post-card .dtf-post-date {
  font-size: var(--fs-meta);
  color: var(--color-text-light);
  margin-bottom: 12px;
}

.dtf-post-card .dtf-post-excerpt {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 12px;
}

.dtf-post-card .dtf-read-more {
  color: var(--color-primary);
  font-size: var(--fs-meta);
  text-decoration: none;
}

.dtf-post-card .dtf-read-more:hover {
  text-decoration: underline;
}

.dtf-post-card img {
  width: 220px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* =============================================================
   FAQ PAGE
   ============================================================= */

.dtf-faq-page {
  max-width: 980px;
  margin: 64px auto;
  padding: 0 24px;
}

.dtf-faq-page h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  margin-bottom: 40px;
}

.dtf-faq-page .dtf-accordion {
  max-width: none;
}

/* =============================================================
   CONTENT PAGE (Verarbeitung + generic prose pages)
   ============================================================= */

/* No horizontal padding: the H1 sits OUTSIDE this wrapper and gets its gutter from the
   theme container, so any padding here indents the body copy relative to its own heading.
   It was a consistent 24px on every content page. The container's gutter is enough.

   The `.entry-content[data-ast-blocks-layout] >` prefix is load-bearing, not decoration.
   Astra prints that exact selector inline (specificity 0,2,0) and forces every direct
   child to its own 1200px content width, which silently BEAT a bare `.dtf-content-page`
   (0,1,0): the cap below never applied, and the Ratgeber was running ~150-character
   lines. Out-specify it rather than reaching for !important.

   Left-aligned, NOT `margin: auto`. The H1 is rendered by the theme outside this
   wrapper and sits on the container's left gutter, so centring the capped column
   indents every paragraph ~150px away from its own heading.

   1080px (was 900): at 900 the column stopped well short of the header's right edge and
   read as a half-empty page. 1080 fills the content area and lines up under the heading;
   the lines run longer but these are scan-heavy legal/info pages broken up by headings. */
.entry-content[data-ast-blocks-layout] > .dtf-content-page,
.dtf-content-page {
  max-width: 1080px;
  margin: 64px 0;
  padding: 0;
}

.dtf-content-page .dtf-content-lead {
  font-size: 21px;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 40px;
}

.dtf-content-page h2 {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 52px 0 20px;
}

.dtf-content-page h3 {
  font-size: 22px;
  margin: 32px 0 12px;
}

.dtf-content-page p {
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 18px;
}

.dtf-content-page ul {
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.75;
  padding-left: 22px;
  margin: 0 0 18px;
}

.dtf-content-page ul li {
  margin-bottom: 10px;
}

/* Numbered process steps — real sequence, so numbers carry meaning */
.dtf-content-page ol.dtf-steps {
  list-style: none;
  counter-reset: dtf-step;
  padding: 0;
  margin: 0 0 16px;
}

.dtf-content-page ol.dtf-steps li {
  position: relative;
  counter-increment: dtf-step;
  padding: 4px 0 20px 56px;
  color: var(--color-text-muted);
  min-height: 40px;
}

.dtf-content-page ol.dtf-steps li::before {
  content: counter(dtf-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}

.dtf-content-page ol.dtf-steps li strong {
  color: var(--color-text);
}

.dtf-content-page .dtf-btn {
  margin-top: 16px;
}

/* =============================================================
   CART / CHECKOUT
   ============================================================= */

.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .col2-set {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.woocommerce-checkout h3 {
  font-size: 20px;
  font-weight: 700;
}

/* =============================================================
   MY-ACCOUNT / FORMS / SELECTION ACCENTS
   Brand polish for the account dashboard, the WooCommerce data
   tables (orders / downloads), form focus states, and the block
   checkout/cart selection controls. Keeps everything on-brand
   pink instead of Astra's default blue / grey.
   ============================================================= */

/* ----- Account navigation (left tabs) ----- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--color-tint);
  color: var(--color-primary);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-tint);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

/* ----- Account + Woo data tables (orders, downloads) ----- */
.woocommerce table.shop_table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table thead th {
  background: var(--color-primary-pale);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: none;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th {
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}
/* WooCommerce renders some body cells (e.g. the order number) as <th scope=row>
   — keep them looking like normal data cells, not header cells. */
.woocommerce table.shop_table tbody th {
  background: transparent;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
/* Emphasise the order status without a fragile pill (the cell text is direct). */
.woocommerce-orders-table__cell-order-status {
  font-weight: 700;
  color: var(--color-teal-ink);
}

/* ----- Form focus: brand pink (kills Astra's blue focus ring) ----- */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-account input:not([type="checkbox"]):not([type="radio"]):focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
  outline: none !important;
}

/* ----- Selection controls → brand pink, everywhere ----- */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-primary);
}
/* Block checkout/cart draw their own controls (appearance:none), so paint
   their checked state explicitly. */
.wc-block-components-radio-control__input:checked {
  border-color: var(--color-primary) !important;
}
.wc-block-components-radio-control__input:checked::before {
  background: var(--color-primary) !important;
}
.wc-block-components-checkbox__input:checked {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* =============================================================
   ASTRA OVERRIDES
   ============================================================= */

/* Bug #1 fix: Force #primary to full width on product pages.
   Astra's .ast-container is display:flex and splits content+sidebar
   even when no sidebar exists, collapsing our 1fr grid column. */
.dtf-full-width-product #primary {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

.dtf-full-width-product .ast-container {
  display: block !important;
  max-width: var(--container) !important;
  padding: 0 24px !important;
}

/* Full-bleed front page: unconstrain Astra's .ast-container so the hero and
   section backgrounds span the full viewport. Each section's inner
   .dtf-container (and the hero's __content) keeps the actual content centered
   at --container width, so text never gets over-wide. */
.dtf-full-width-front .ast-container {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Kill Astra's default header background / border */
.site-header,
.ast-primary-header-bar,
.ast-above-header-bar,
.ast-below-header-bar {
  background: #fff !important;
  border-bottom: 1px solid #f1f1f1 !important;
}

.ast-site-identity { padding: 0.5rem 0; }

/* Nav typography overrides */
.main-header-menu a,
.ast-header-break-point .main-header-menu a {
  font-size: var(--fs-nav) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--color-text) !important;
}

.main-header-menu a:hover,
.main-header-menu .current-menu-item > a {
  color: var(--color-primary) !important;
}

/* Header bottom shadow (§4.1) */
.dtf-site-header {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* Kill purple/blue buttons */
.woocommerce a.button,
.woocommerce button.button {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
}

/* Kill default shadows / borders */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  box-shadow: var(--shadow-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: 0 12px 28px rgba(var(--color-text-rgb), 0.12) !important;
  border-color: var(--color-primary-pale) !important;
  transform: translateY(-4px);
}
/* Subtle image zoom on card hover (image clipped by the card's overflow). */
.woocommerce ul.products li.product img {
  transition: transform 0.45s ease;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}
/* Match the homepage card's image-zoom too. */
.dtf-home-products .dtf-product-card img {
  transition: transform 0.45s ease;
}
.dtf-home-products .dtf-product-card:hover img {
  transform: scale(1.04);
}

/* Comfortable inner padding for the card text. Astra wraps the below-image
   content in .astra-shop-summary-wrap with 0 padding, so the category/title/
   price sat flush against the card edge — pad the wrap (not the card) so the
   image stays full-bleed. */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
  padding: 18px 20px 20px;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-woo-product-category {
  display: block;
  margin-bottom: 4px;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .woocommerce-loop-product__title {
  margin-bottom: 6px;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .price {
  display: block;
  margin-bottom: 14px;
}

/* Kill typical Woo styles */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none !important;
}

.woocommerce .woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 16px;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-text-muted);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin-bottom: 24px;
}

/* Sale badges */
.woocommerce span.onsale {
  background: var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  min-height: auto !important;
  line-height: 1.4 !important;
}

/* =============================================================
   CLIENT BRAND PALETTE — multi-colour accents (self-contained)
   Pink stays primary. Teal/yellow/orange appear only in the structural
   spots below. Kept as one block so the whole treatment can be reverted
   in isolation without touching the base design system.
   ============================================================= */

/* ----- Top brand bar (every page) + footer bookend ----- */
.dtf-site-header { position: sticky; top: 0; }
.dtf-site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--brand-bar);
}
.site-footer {
  /* Softer dark grey (lifted off near-black) — premium but not heavy; sits in
     the same neutral family as the body text. White text ~13:1 (WCAG AAA). */
  background: #2c2c2e;
  border-top: 4px solid transparent;
  border-image: var(--brand-bar) 1;
}
/* Content sits crisply above the background. */
.site-footer .dtf-footer-grid,
.site-footer .dtf-footer-bottom { position: relative; z-index: 1; }
/* White text on charcoal; muted copyright still clears AA. */
.site-footer,
.site-footer p,
.site-footer .dtf-footer-col h3 { color: #ffffff; }
.site-footer a { color: #ffffff; opacity: 0.82; }
.site-footer a:hover { opacity: 1; color: var(--color-primary); }
.site-footer .dtf-footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); }
.site-footer .dtf-footer-bottom p { color: rgba(255, 255, 255, 0.6); }

/* Each footer column header underline takes a different palette colour so the
   whole footer nods to the jester palette (pink / orange / yellow / cyan). */
.site-footer .dtf-footer-grid > .dtf-footer-col:nth-child(1) h3::after { background: var(--color-primary); }
.site-footer .dtf-footer-grid > .dtf-footer-col:nth-child(2) h3::after { background: var(--color-orange); }
.site-footer .dtf-footer-grid > .dtf-footer-col:nth-child(3) h3::after { background: var(--color-yellow); }
.site-footer .dtf-footer-grid > .dtf-footer-col:nth-child(4) h3::after { background: var(--color-teal-ink); }

/* ----- Feature icons: one brand colour each (yellow gets a dark glyph
   since white on yellow is unreadable), plus a soft coloured glow so they
   read as premium coloured elevation rather than flat discs. ----- */
.dtf-features-grid .dtf-feature-icon { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.dtf-features-grid .dtf-feature:nth-child(1) .dtf-feature-icon { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.32); }
.dtf-features-grid .dtf-feature:nth-child(2) .dtf-feature-icon { background: var(--color-teal-ink); color: #fff; box-shadow: 0 8px 20px rgba(var(--color-teal-rgb), 0.34); }
.dtf-features-grid .dtf-feature:nth-child(3) .dtf-feature-icon { background: var(--color-orange);  color: #fff; box-shadow: 0 8px 20px rgba(var(--color-orange-rgb), 0.34); }
.dtf-features-grid .dtf-feature:nth-child(4) .dtf-feature-icon { background: var(--color-yellow);  color: #2a2a00; box-shadow: 0 8px 20px rgba(var(--color-yellow-rgb), 0.45); }
/* Gentle lift + stronger glow when its feature is hovered. */
.dtf-features-grid .dtf-feature:hover .dtf-feature-icon { transform: translateY(-3px); }

/* ----- Product cards: colour-coded top cap, rotating through the palette.
   Reads as an intentional product-line colour system, not random colour. ----- */
.dtf-home-products .dtf-product-card { border-top-width: 3px; }
.dtf-home-products .dtf-product-grid > .dtf-product-card:nth-child(4n+1) { border-top-color: var(--color-primary); }
.dtf-home-products .dtf-product-grid > .dtf-product-card:nth-child(4n+2) { border-top-color: var(--color-teal); }
.dtf-home-products .dtf-product-grid > .dtf-product-card:nth-child(4n+3) { border-top-color: var(--color-orange); }
.dtf-home-products .dtf-product-grid > .dtf-product-card:nth-child(4n+4) { border-top-color: var(--color-yellow); }

/* Resting shadow stays neutral (professional); on hover each card blooms a soft
   glow in its OWN accent and the border picks up the cap colour, so the card's
   identity holds through the hover instead of resetting to pink. */
.dtf-home-products .dtf-product-grid > .dtf-product-card:nth-child(4n+1):hover { box-shadow: 0 16px 34px rgba(var(--color-primary-rgb), 0.26); border-color: var(--color-primary); }
.dtf-home-products .dtf-product-grid > .dtf-product-card:nth-child(4n+2):hover { box-shadow: 0 16px 34px rgba(var(--color-teal-rgb), 0.30); border-color: var(--color-teal); }
.dtf-home-products .dtf-product-grid > .dtf-product-card:nth-child(4n+3):hover { box-shadow: 0 16px 34px rgba(var(--color-orange-rgb), 0.30); border-color: var(--color-orange); }
.dtf-home-products .dtf-product-grid > .dtf-product-card:nth-child(4n+4):hover { box-shadow: 0 16px 34px rgba(var(--color-yellow-rgb), 0.42); border-color: var(--color-yellow); }

/* Same colour cap on the shop / related-products Woo cards (its base rule uses
   !important, so match it to win the cascade). */
.woocommerce ul.products li.product { border-top-width: 3px !important; }
.woocommerce ul.products li.product:nth-child(4n+1) { border-top-color: var(--color-primary) !important; }
.woocommerce ul.products li.product:nth-child(4n+2) { border-top-color: var(--color-teal) !important; }
.woocommerce ul.products li.product:nth-child(4n+3) { border-top-color: var(--color-orange) !important; }
.woocommerce ul.products li.product:nth-child(4n+4) { border-top-color: var(--color-yellow) !important; }
/* Matching per-accent hover glow on the Woo cards. */
.woocommerce ul.products li.product:nth-child(4n+1):hover { box-shadow: 0 16px 34px rgba(var(--color-primary-rgb), 0.26) !important; border-color: var(--color-primary) !important; }
.woocommerce ul.products li.product:nth-child(4n+2):hover { box-shadow: 0 16px 34px rgba(var(--color-teal-rgb), 0.30) !important; border-color: var(--color-teal) !important; }
.woocommerce ul.products li.product:nth-child(4n+3):hover { box-shadow: 0 16px 34px rgba(var(--color-orange-rgb), 0.30) !important; border-color: var(--color-orange) !important; }
.woocommerce ul.products li.product:nth-child(4n+4):hover { box-shadow: 0 16px 34px rgba(var(--color-yellow-rgb), 0.42) !important; border-color: var(--color-yellow) !important; }

/* ----- WooCommerce Blocks product grid (empty-cart "Neu im Shop" and any
   block-based product grid) — mirror the classic product-card look so block
   grids stay visually consistent with the shop (chrome + colour caps). ----- */
.wc-block-grid__products { list-style: none; margin: 0; padding: 0; }
.wc-block-grid__product {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top-width: 3px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0 0 20px;
  text-align: left;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.wc-block-grid__product-link { display: block; text-decoration: none !important; }
.wc-block-grid__product-title { text-decoration: none; }
.wc-block-grid__product-image { display: block; overflow: hidden; }
.wc-block-grid__product-image img { width: 100%; display: block; transition: transform 0.45s ease; }
.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.04); }
.wc-block-grid__product-title {
  display: block;
  padding: 16px 20px 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--color-text);
}
.wc-block-grid__product-price { padding: 8px 20px 0; color: var(--color-primary); font-weight: 700; }
.wc-block-grid__product-add-to-cart { padding: 14px 20px 0; }

/* Colour-coded top cap + hover glow, matching the classic cards. */
.wc-block-grid__product:nth-child(4n+1) { border-top-color: var(--color-primary); }
.wc-block-grid__product:nth-child(4n+2) { border-top-color: var(--color-teal); }
.wc-block-grid__product:nth-child(4n+3) { border-top-color: var(--color-orange); }
.wc-block-grid__product:nth-child(4n+4) { border-top-color: var(--color-yellow); }
.wc-block-grid__product:nth-child(4n+1):hover { box-shadow: 0 16px 34px rgba(var(--color-primary-rgb), 0.26); border-color: var(--color-primary); transform: translateY(-4px); }
.wc-block-grid__product:nth-child(4n+2):hover { box-shadow: 0 16px 34px rgba(var(--color-teal-rgb), 0.30);    border-color: var(--color-teal);    transform: translateY(-4px); }
.wc-block-grid__product:nth-child(4n+3):hover { box-shadow: 0 16px 34px rgba(var(--color-orange-rgb), 0.30);  border-color: var(--color-orange);  transform: translateY(-4px); }
.wc-block-grid__product:nth-child(4n+4):hover { box-shadow: 0 16px 34px rgba(var(--color-yellow-rgb), 0.42);  border-color: var(--color-yellow);  transform: translateY(-4px); }

/* ----- Section eyebrow accent variants (text-safe colours only) ----- */
.dtf-eyebrow--orange { color: var(--color-orange-ink); }

/* ----- Section-title underline: short accent bar, colour keyed per section
   so the palette threads through the page in a controlled way. ----- */
.dtf-front-page .dtf-section-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  margin-top: 14px;
  background: var(--color-primary);
}
/* Centred section titles get a centred bar. */
.dtf-quickstart .dtf-section-title::after,
.dtf-faq-section .dtf-section-title::after {
  margin-left: auto;
  margin-right: auto;
}
.dtf-quickstart .dtf-section-title::after        { background: var(--color-orange); }
.dtf-products-overview .dtf-section-title::after { background: var(--color-teal); }
.dtf-faq-section .dtf-section-title::after       { background: var(--color-teal); }

/* ----- Cross-page heading signature -----
   Inner pages (FAQ, Verarbeitung, legal, cart, checkout, account = Astra
   .entry-title on .page; shop = the Woo archive title) are single-purpose, so
   they get NO colour bands. Instead they share ONE restrained brand mark: a
   single pink accent bar under the page title, echoing the homepage section
   underline. The product title is intentionally excluded — it already carries
   a pink category eyebrow, and stacking both would clutter it. */
.page:not(.home) .entry-title::after,
.woocommerce-products-header__title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  margin-top: 16px;
  background: var(--color-primary);
}

/* ----- Section-band rhythm — alternate light/tint. The intro heading + its
   product grid stay light (one logical unit — a tint band there collided with
   the cards' coloured caps), then tint/light alternate cleanly below:
   hero(dark)→intro+grid(light)→features(tint)→quickstart(light)→overview(tint)
   →benefits(light)→faq(tint)→cta(light)→footer. ----- */
/* Section rhythm — white base with one soft grey grouped in pairs.
   features + quickstart = grey;  overview + benefits = white;  faq + cta = grey. */
.dtf-features          { background: var(--color-section-alt); }
.dtf-quickstart        { background: var(--color-section-alt); }
.dtf-products-overview { background: var(--color-bg); }
.dtf-benefits-long     { background: var(--color-bg); }
.dtf-faq-section       { background: var(--color-section-alt); }
.dtf-cta-strip         { background: var(--color-section-alt); }

/* =============================================================
   MOTION — hero entrance + scroll reveal (subtle, professional)
   ============================================================= */

@keyframes dtf-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Hero wordmark fades up on load, one line after the other. */
.dtf-home-hero .dtf-hero-wordmark span {
  animation: dtf-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dtf-home-hero .dtf-hero-wordmark span:nth-child(1) { animation-delay: 0.08s; }
.dtf-home-hero .dtf-hero-wordmark span:nth-child(2) { animation-delay: 0.20s; }

/* Scroll reveal — only active when JS is present (html.dtf-js is set in <head>
   before paint), so no-JS visitors always see content. */
html.dtf-js .dtf-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.dtf-js .dtf-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Respect users who prefer reduced motion — no entrance/reveal/transitions. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.dtf-js .dtf-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1024px) {
  .dtf-home-products .dtf-product-grid,
  .related.products ul.products,
  .woocommerce-shop ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .dtf-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer .dtf-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .dtf-cta-strip__inner {
    grid-template-columns: 160px 1fr;
    gap: 32px;
  }

  .dtf-post-card {
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .dtf-home-hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-end;
    background-position: center top;
    background-size: cover;
  }

  /* Header is 72px tall on mobile — match the overlay offset. */
  .dtf-full-width-front #content { margin-top: -72px; }

  /* Portrait crops the sides hard, so deepen the bottom well for the wordmark
     while keeping the soft top wash for the nav. */
  .dtf-home-hero::before {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 16%),
      linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0) 60%);
  }

  .dtf-home-hero .dtf-hero-wordmark {
    font-size: clamp(50px, 12vw, 104px);
  }

  .dtf-home-hero__content {
    padding: 50px 24px 56px;
  }

  .dtf-section-title {
    font-size: 30px;
  }

  .dtf-section-sub {
    font-size: 17px;
  }

  .dtf-content-page h2 {
    font-size: 26px;
  }

  /* Stack product grids */
  .dtf-home-products .dtf-product-grid,
  .related.products ul.products,
  .woocommerce-shop ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .dtf-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .dtf-quickstart-grid {
    grid-template-columns: 1fr;
  }

  /* One column: two columns of prose on a phone would be unreadable. */
  .dtf-benefits-long__content {
    grid-template-columns: 1fr;
    gap: 32px;
  }



  /* Stack CTA */
  .dtf-cta-strip__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .dtf-cta-strip__image { display: none; }

  /* Stack footer */
  .site-footer .dtf-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Stack blog posts */
  .dtf-post-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px 0 28px;
  }

  .dtf-post-card img {
    width: 100%;
    height: 200px;
  }

  /* Mobile header */
  .dtf-header-inner {
    height: 72px;
    gap: 12px;
  }

  .dtf-header-logo .site-title {
    font-size: 20px;
    white-space: nowrap;
  }

  /* Mark scaled to the shorter 72px mobile header */
  .dtf-header-logo .dtf-header-mark {
    height: 54px;
  }

  /* Icon-only account on mobile to save space */
  .dtf-header-account {
    padding: 0;
    width: 44px;
    min-height: 44px;
    border: none;
    justify-content: center;
  }
  .dtf-header-account__label { display: none; }

  .dtf-header-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0;
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .dtf-header-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dtf-header-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .dtf-header-nav a {
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-soft);
    transition: background-color 0.15s;
  }

  .dtf-header-nav a::after { display: none; }

  .dtf-header-nav a:hover {
    background: var(--color-primary-pale);
  }

  .dtf-header-nav .sub-menu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-left: 16px;
  }

  .dtf-mobile-toggle { display: flex; }

  .dtf-header-right {
    gap: 8px;
  }
}

/* Art direction: phones get a portrait-cropped hero (face + flower crown) instead
   of the landscape cover, which `cover` would zoom in on until only a slice shows.
   Scoped to <=600px so tablets keep the wide image. Preload is swapped to match in
   dtf_preload_critical_assets() via a media attribute, so a phone never fetches the
   desktop cover. */
@media (max-width: 600px) {
  .dtf-home-hero {
    background:
      image-set(
        url("../images/hero_cover_mobile.webp?v=1") type("image/webp"),
        url("../images/hero_cover_mobile.jpg?v=1") type("image/jpeg")
      )
      center center / cover no-repeat,
      var(--color-band-warm);
  }
}

@media (max-width: 480px) {
  .dtf-home-hero .dtf-hero-wordmark {
    font-size: clamp(46px, 14vw, 84px);
  }

  .dtf-home-products .dtf-product-grid,
  .related.products ul.products,
  .woocommerce-shop ul.products {
    grid-template-columns: 1fr;
  }

  .dtf-features-grid {
    grid-template-columns: 1fr;
  }

  .dtf-section-title {
    font-size: 26px;
  }

}

/* =============================================================
   LEGAL / CONTENT PAGES  (AGB, Widerruf, Datenschutz, Bezahlung)
   ============================================================= */

.dtf-legal-page h2 {
  font-size: 28px;
  margin: 44px 0 16px;
}
.dtf-legal-page h3 {
  font-size: 21px;
  margin: 30px 0 10px;
}
.dtf-legal-page p { margin-bottom: 16px; }

/* Company block (address used in the withdrawal declaration, AGB, privacy). */
.dtf-legal-address {
  background: var(--color-section-alt);
  border-left: 3px solid var(--color-primary);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  line-height: 1.7;
}

/* The statutory Muster-Widerrufsformular. */
.dtf-legal-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  background: #fff;
}
.dtf-legal-box p { margin-bottom: 12px; }

.dtf-content-page .dtf-list {
  margin: 0 0 18px 20px;
  line-height: 1.8;
}
.dtf-content-page .dtf-list li { margin-bottom: 6px; }

/* UNFILLED LEGAL PLACEHOLDER — deliberately loud.
   The legal pages carry [[FIRMA]] / [[ANSCHRIFT]] / [[TELEFON]] until the client
   supplies his company details. Shipping those as literal text would be worse than
   an empty page: a wrong Impressum/AGB is itself abmahnbar. So they scream. */
.dtf-placeholder {
  background: #ffe14d;
  color: #7a1200;
  font-weight: 700;
  padding: 1px 6px;
  border: 2px dashed #d92e00;
  border-radius: 4px;
  white-space: nowrap;
}

/* =============================================================
   KONTAKT PAGE + CONTACT FORM
   ============================================================= */

.dtf-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 12px;
}
.dtf-contact-card {
  background: var(--color-section-alt);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  border-top: 3px solid var(--color-primary);
}
.dtf-contact-card h3 { font-size: 19px; margin: 0 0 8px; }
.dtf-contact-card p { margin: 0 0 6px; }
.dtf-contact-meta { font-size: var(--fs-meta); color: var(--color-text-muted); }

.dtf-contact-form { max-width: 680px; margin-top: 8px; }
.dtf-field { display: block; margin-bottom: 18px; }
.dtf-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.dtf-field input[type="text"],
.dtf-field input[type="email"],
.dtf-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}
.dtf-field input:focus,
.dtf-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
.dtf-field--check label {
  font-weight: 400;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.6;
}
.dtf-field--check input { margin-top: 4px; flex: 0 0 auto; }
.dtf-form-hint { font-size: 13px; color: var(--color-text-muted); }

/* Honeypot: must be reachable by bots but never seen (or focused) by humans. */
.dtf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dtf-form-notice {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
  font-weight: 500;
}
.dtf-form-notice--ok {
  background: #e7f6ea;
  border-left: 3px solid var(--color-success);
  color: #14532d;
}
.dtf-form-notice--error {
  background: var(--color-primary-pale);
  border-left: 3px solid var(--color-primary);
  color: #7a0040;
}

/* ---------------------------------------------------------------------------
   BREADCRUMBS
   Visible trail matching the BreadcrumbList schema Rank Math emits. Links use
   --color-text-muted, which must stay AA (4.5:1) since this is body-size text;
   the separator is decorative and hidden from the accessibility tree.
   --------------------------------------------------------------------------- */
.dtf-breadcrumbs {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.4;
}

.dtf-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dtf-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.dtf-breadcrumbs li + li::before {
  content: "/";
  color: var(--color-border, #d9d9d9);
  speak: never;
}

.dtf-breadcrumbs a {
  color: var(--color-text-muted, #6b6b6b);
  text-decoration: none;
}

.dtf-breadcrumbs a:hover,
.dtf-breadcrumbs a:focus {
  color: var(--color-primary, #e5007e);
  text-decoration: underline;
}

.dtf-breadcrumbs [aria-current="page"] {
  color: var(--color-text, #141414);
  font-weight: 600;
}

@media (max-width: 480px) {
  .dtf-breadcrumbs {
    margin-bottom: 16px;
    font-size: 13px;
  }
}

/* The shop intro reuses .dtf-content-page, whose `margin: 0 auto` centres it inside its
   820px measure. That is right for a standalone page, but on the shop it is nested in the
   1200px products header, so auto-centring pushed it ~190px right of the H1 and the
   product grid. Keep the readable measure, drop the centring. */
.woocommerce-products-header .dtf-content-page,
.page-description .dtf-content-page {
  margin-left: 0;
  padding-left: 0;
}