/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from main.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 43
 */
/* =============================================================
   Inverta — Main Stylesheet
   Design: Deep navy + electric orange
   Architecture: Modular Component-Based CSS

   TABLE OF CONTENTS:
   -------------------------------------------------------------
   01. BASE
       - variables.css          : Design tokens, CSS custom properties
       - reset.css              : HTML5 box-sizing, typography, resets
       - layout.css             : Containers, section-padding, grid utilities

   02. CORE COMPONENTS
       - buttons.css            : Primary, outline, sizing states
       - cards.css              : Card surfaces, borders, hover states
       - forms.css              : Inputs, selects, textareas, validation
       - modals.css             : Video lightbox, gallery lightbox overlays
       - breadcrumb.css         : Page breadcrumb navigation

   03. SHELL & NAVIGATION
       - header.css             : Header bar, desktop menu, mobile menu
       - sections-nav.css       : Floating scrollspy navigation dots
       - footer.css             : Footer columns, copyright, newsletter
       - back-to-top.css        : Floating back to top button
       - widgets.css            : Sidebar widgets and search widget

   04. FRONTPAGE SECTIONS
       - hero.css               : Hero section, badges, video bg, stats
       - promises.css           : 4-column promises & guarantees
       - services.css           : Category filter tabs, service cards
       - explainer.css          : 3-step process cards
       - pricing.css            : Pricing tables and guarantee banner
       - testimonials.css       : Review cards, star ratings, quotes
       - contact.css            : Contact info grid & form container
       - location.css           : Map embed, opening hours, contact card
       - faq.css                : Searchable accordion & tags
       - brands.css             : Partner and manufacturer logos
       - business.css           : B2B services & sustainability
       - calculator.css         : Interactive price calculator
       - process.css            : Mail-in, shipping and repair process
       - video.css              : Video teaser with play button
       - cta.css                : Call to action banner
       - counter.css            : Animated counter metrics
       - team.css               : Team cards and social media links
       - clients.css            : Client logos showcase
       - gallery.css            : Photo gallery grid
       - map.css                : Google Maps embed section
       - slider.css             : Responsive hero/content slider
       - pricing-plans.css      : Tiered pricing plans with badges
       - projects.css           : Portfolio projects grid

   05. TEMPLATES & INTEGRATIONS
       - templates.css          : Page header banner, sidebar layouts
       - blog.css               : Post cards, entry-content, comments
       - woocommerce.css        : loaded only on shop pages, see inc/woocommerce.php

   06. UTILITIES
       - animations.css         : Fade-in animations, scroll-reveal
       - metabox.css            : Page settings meta toggles
       - rtl.css                : Right-to-left language support
       - responsive.css         : Global mobile viewport adjustments
       - a11y.css                : .screen-reader-text, der Sprunglink
       - print.css              : Print media formatting
   ============================================================= */

/* -------------------------------------------------------------
   01. BASE
   ------------------------------------------------------------- */

/* ── variables.css ── */
/* =============================================================
   Inverta Theme — Design Tokens & CSS Variables (--inv-*)
   ============================================================= */

/* Die Lesebreite als feste Länge.

   --inv-measure ist 68ch, und „ch“ ist die Breite der Ziffer 0 in der Schrift
   des Elements, das die Breite liest — nicht der Schrift des Fließtexts. Eine
   Überschrift (Space Grotesk, 24 px) wurde dadurch 1058 px breit statt 680 px
   und begann 190 px links vom Absatz darunter (gemessen am 14.10.2026, vorne
   und im Editor gleich falsch). Der Trenner „Kurz“ hatte dieselbe Ursache.

   Als registrierte Länge wird der Wert dort in px umgerechnet, wo er gesetzt
   wird — auf .entry-content und .editor-styles-wrapper, in der Schrift des
   Fließtexts (components/content.css) — und geht so an jedes Kind weiter.
   Nicht auf :root: dort steht keine Schrift des Themes, sondern Times, und
   68ch wären 544 px. Ein Browser ohne @property liest den Text unverändert
   weiter und rechnet wie bisher. */
@property --inv-measure-abs {
    syntax: '<length>';
    inherits: true;
    initial-value: 680px;
}

:root {
    /* Radii — the whole scale is derived from the two knobs in
       "Design-Grundlagen", so moving "Ecken-Rundung" moves every component
       that uses the scale instead of only the handful of rules that happened
       to name --inv-radius directly.

       --inv-radius (16px) and --inv-radius-sm (10px) are written by
       Inverta_CSS; base/section-chrome.css carries their design defaults.
       The multipliers reproduce the previous fixed values exactly at those
       two numbers, so nothing moves until someone moves the slider. */
    --inv-radius-md:       var(--inv-radius-sm, 10px);
    --inv-radius-lg:       var(--inv-radius, 16px);
    --inv-radius-xl:       calc(var(--inv-radius, 16px) * 1.25);
    --inv-radius-2xl:      calc(var(--inv-radius, 16px) * 1.5);
    --inv-radius-full:     9999px;

    /* Awwwards Architectural Light & Dark Palette */
    --inv-bg:              #f8f9fa;
    --inv-fg:              #0f172a;
    --inv-surface:         #ffffff;
    --inv-border:          #e2e8f0;
    --inv-primary:         #111827;
    --inv-accent:          #24a9b3;
    --inv-primary-fg:      #ffffff;
    /* Die Schrift auf einer Fläche aus der Akzentfarbe.

       Eigene Zeile, weil --inv-primary-fg sie nicht vertreten kann: der
       Auslieferungsakzent ist ein mittelhelles Türkis, und Weiss darauf
       misst 2,84:1 — unter den 4,5 aus WCAG AA. Dieselbe Rechnung gilt für
       jede andere helle Akzentfarbe, und in vier der fünf Stil-Vorlagen
       stand sie genauso. Anthrazit darauf misst 6,29:1. */
    --inv-accent-fg:       #0f172a;
    --inv-btn-hover:       #1e293b;
    --inv-link-hover:      #000000;
    --inv-brand-soft:      #f1f5f9;
    --inv-muted:           #f1f5f9;
    --inv-muted-fg:        #64748b;
    --inv-destructive:     #ef4444;

    /* Gradients & Shadows.

       Both are derived from the palette, and both used to be composed in PHP
       and printed into the page — the primary colour was split into three
       hex pairs by hand so it could be put back together as rgba(). color-mix()
       does that in the stylesheet, which means they follow the colour picker
       live instead of only after a save. */
    --inv-gradient-hero:
        radial-gradient(ellipse at top right,
            color-mix(in srgb, var(--inv-primary, #111827) 6%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--inv-bg, #f8f9fa), var(--inv-surface, #ffffff));
    --inv-shadow-glow: 0 12px 30px -10px color-mix(in srgb, var(--inv-primary, #111827) 25%, transparent);
    --inv-shadow-elegant:  0 30px 80px -30px rgba(15,23,42,.1);
    --inv-shadow-card:     0 4px 20px -4px rgba(15,23,42,.06);

    /* Typography */
    --inv-font-sans:       'Inter', system-ui, -apple-system, sans-serif;
    --inv-font-display:    'Space Grotesk', system-ui, sans-serif;

    /* Dimensions & Spacing
       Ein Token, nicht zwei: "Container-Breite" schreibt --inv-container, und
       --inv-container-max war eine zweite Zahl, die dieselbe Sache meinte. Was
       sie las — .entry-content, .inv-container, die Vorlagen — blieb bei 1280,
       egal wo der Regler stand. */
    --inv-container:       1280px;
    --inv-container-max:   var(--inv-container, 1280px);
    /* Die Lesebreite für Fließtext. Gilt für die Kinder von .entry-content,
       damit ein Block mit .alignwide sie verlassen kann. */
    --inv-measure:         68ch;
    /*
     * Der vertikale Abstand von Seiten und Vorlagen — nicht von Sektionen.
     *
     * Hier stand 6rem als feste Zahl, und daneben gab es "Standard-Abstand
     * zwischen Sektionen" (--inv-section-rhythm) als Regler. Zwei Zahlen fuer
     * dieselbe Sache: .vf-section-padding las die feste, section-vars.css las
     * den Regler. Auf einer Startseite stand Team auf 96 px und News auf 80 px,
     * und kein Regler erklaerte den Unterschied.
     *
     * Jetzt liest diese Variable den Regler. 6rem bleibt als Rueckfall, falls
     * der Regler nie kompiliert wurde (Kindtheme ohne Customizer-Werte).
     */
    --inv-section-py:      var(--inv-section-rhythm, 6rem);
    --inv-header-bar-h:        68px;
    /* --inv-ease belongs to "Design-Grundlagen → Bewegung". Defining it twice
       made which one wins a question of stylesheet import order. */

    /* Backward compatibility aliases */
    --vf-radius:          var(--inv-radius);
    --vf-radius-sm:       var(--inv-radius-sm);
    --vf-radius-lg:       var(--inv-radius-lg);
    --vf-radius-xl:       var(--inv-radius-xl);
    --vf-radius-2xl:      var(--inv-radius-2xl);
    --vf-radius-full:     var(--inv-radius-full);
    --vf-bg:              var(--inv-bg);
    --vf-fg:              var(--inv-fg);
    --vf-surface:         var(--inv-surface);
    --vf-border:          var(--inv-border);
    --vf-primary:         var(--inv-primary);
    --vf-accent:          var(--inv-accent);
    --vf-cyan:            var(--inv-accent);
    --vf-primary-fg:      var(--inv-primary-fg);
    --vf-btn-hover:       var(--inv-btn-hover);
    --vf-link-hover:      var(--inv-link-hover);
    --vf-brand-soft:      var(--inv-brand-soft);
    --vf-muted:           var(--inv-muted);
    --vf-muted-fg:        var(--inv-muted-fg);
    --vf-destructive:     var(--inv-destructive);
    --vf-gradient-hero:   var(--inv-gradient-hero);
    --vf-shadow-glow:     var(--inv-shadow-glow);
    --vf-shadow-elegant:  var(--inv-shadow-elegant);
    --vf-shadow-card:     var(--inv-shadow-card);
    --vf-font-sans:       var(--inv-font-sans);
    --vf-font-display:    var(--inv-font-display);
    --vf-container-max:   var(--inv-container-max);
    --vf-section-py:      var(--inv-section-py);
}


/* ── reset.css ── */
/* =============================================================
   Inverta — Reset & Base Styles
   ============================================================= */

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

/*
 * The hidden attribute has to win.
 *
 * The browser hides [hidden] with `display: none` from its own stylesheet, and
 * any author rule setting `display` on the same element beats it — so a
 * component styled `display: flex` stayed on screen with hidden="hidden"
 * sitting right there in the markup. That is how "Suchfeld anzeigen" could be
 * switched off and the search field still show.
 *
 * Renderers across this theme print `hidden` rather than dropping a node, so
 * the Customizer has something to toggle in place. This is what makes that
 * work, and it is the rule the HTML spec itself recommends shipping.
 */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Anchor targets land below the floating header instead of under it.
       smooth-scroll.js applies the same offset when it takes a link over, so
       both paths come to rest in the same place. */
    scroll-padding-top: calc(var(--inv-header-bar-pt, 10px) + var(--inv-header-bar-h, 60px) + 12px);
}

/* Sanftes Scrollen is on: the wheel loop in smooth-scroll.js moves the real
   scroll position every frame, and the CSS smoothing would animate each of
   those moves against it — the page lags behind the wheel and rubber-bands.
   An explicit behaviour passed to scrollTo or scrollIntoView still wins, so
   the sections nav and back-to-top keep their own easing. */
html.inv-smooth {
    scroll-behavior: auto;
}

body {
    background: var(--inv-bg);
    color: var(--inv-fg);
    font-family: var(--inv-font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--inv-font-display);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

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

/* 30 % der umgebenden Schriftfarbe dazu: auf hellem Grund bleibt das
   praktisch die Primaerfarbe (gemessen 16,86 gegen 16,88), auf einer
   dunklen Palette hebt es den Link aus dem Grund heraus — vorher 2,45
   bzw. 2,71 (08.10.2026), jetzt 4,99 auf der Seite und 4,52 auf der Karte. Gemischt wird mit --inv-fg
   und nicht mit currentColor: in einer Karte mit gedaempfter Schrift zog
   currentColor die Mischung mit nach unten, gemessene 3,37. */
a {
    color: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-fg, #0f172a));
    text-decoration: none;
    border-bottom: none;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
    border-bottom: none;
}

/* =============================================================
   Page ground and links

   These three rules were printed from PHP: the body colours only while a
   palette colour was set, and the link reset unconditionally. As stylesheet
   rules they follow the colour picker live, and the body can be given back
   its default by clearing the setting — which a printed rule could never do,
   because clearing it simply stopped printing anything.
   ============================================================= */
body {
    background-color: var(--inv-bg, #f8f9fa);
    color: var(--inv-fg, #0f172a);
}

a,
a:hover,
a:focus,
a:active {
    border-bottom: none;
    text-decoration: none;
}

/* A retina logo replaces the uploaded one when the option holds a URL.
   Unset, var() resolves to the guaranteed-invalid value and `content` falls
   back to its initial state — the image renders exactly as uploaded. */
.inv-logo img,
.inv-nav-logo img,
.custom-logo {
    content: var(--inv-retina-logo);
}


/* ── layout.css ── */
/* =============================================================
   Inverta Theme — Layout Utilities & Grid (.inv-*)
   ============================================================= */

/* Container */
.inv-container,
/* Centring only. The width and the side padding are set in
   base/section-chrome.css, which reads the design tokens — declaring them here
   as well meant two files fighting over the same container, and the one that
   won was whichever came last in main.css. */
.vf-container {
    margin-inline: auto;
}

/* -------------------------------------------------------------
   Block content: the reading measure, and how a block leaves it

   `.entry-content { max-width: 68ch }` used to sit in pages/blog.css. A measure
   is right for a blog post and wrong for everything else that WordPress puts
   through the same container: the cart block came out 680 px wide on a 1440 px
   screen, its two columns squeezed into a column meant for prose, and nothing
   could escape it — `add_theme_support( 'align-wide' )` was declared in
   functions.php with no rule anywhere behind it.

   So the measure moves to the children and the container opens up. A block that
   asked to be wide is wide; everything else still reads at a comfortable width.
   ------------------------------------------------------------- */
/* Die Lesebreite in px, in der Schrift des Fließtexts (base/variables.css).
   Auf body, damit auch ein Block außerhalb des Seiteninhalts — eine Gruppe
   im Fußbereich — die eingestellte Breite liest und nicht die Vorgabe. */
body {
    --inv-measure-abs: var(--inv-measure, 68ch);
}

.entry-content {
    max-width: var(--inv-container-max, 1280px);
    margin-inline: auto;
}

.entry-content > * {
    max-width: var(--inv-measure-abs, var(--inv-measure, 68ch));
    margin-inline: auto;
}

.entry-content > .alignwide {
    max-width: var(--inv-container-max, 1280px);
}

/* Edge to edge as far as the content area reaches — deliberately not to the
   viewport edge. That needs `100vw`, which counts the scrollbar, and the page
   would scroll sideways by its width on every desktop that shows one. */
.entry-content > .alignfull {
    max-width: none;
}

/* Floated blocks keep their own margins. */
.entry-content > .alignleft,
.entry-content > .alignright {
    margin-inline: 0;
}

/* -------------------------------------------------------------
   Eine Sektion im Seiteninhalt ist kein Absatz

   Sektionen kommen auf zwei Wegen in eine Seite: über den Shortcode
   [inverta_section key="…"] mitten im Inhalt, und über die Häkchen im
   Metabox-Kasten, die sie unter den Inhalt hängen. Beide Wege enden als Kind
   von .entry-content — und dort galt für jedes Kind die Lesebreite. Eine
   FAQ-Kapsel, die auf der Startseite 1410 px breit ist, stand auf einer
   gewöhnlichen Seite auf 68 Zeichen zusammengeschoben, mit riesigen leeren
   Rändern links und rechts. Sie bringt ihren eigenen Randabstand mit; eine
   Lesebreite gehört um Text, nicht um sie.
   ------------------------------------------------------------- */
.entry-content > [class*="vf-section-"],
.entry-content > p:has(> [class*="vf-section-"]) {
    max-width: none;
    margin-inline: 0;
}

/* -------------------------------------------------------------
   „Volle Breite (kein Container)“

   Das Häkchen im Seiten-Metabox gab es schon; es schrieb eine Regel auf
   .vf-content-area — ein Element, das auf den Volle-Breite-Vorlagen gar nicht
   vorkommt, und das auf den übrigen zwar breiter wurde, während der Text darin
   an der Lesebreite hängen blieb. Es hat also auf keiner Vorlage das getan, was
   daraufsteht. Jetzt setzt es eine Klasse auf <body>, und hier steht, was sie
   bedeutet.
   ------------------------------------------------------------- */
.inv-page-fullwidth .vf-content-area {
    max-width: 100%;
}

.inv-page-fullwidth .entry-content,
.inv-page-fullwidth .entry-content > * {
    max-width: none;
    margin-inline: 0;
}

/* -------------------------------------------------------------
   Der Rand bleibt, das Randlose wird randlos

   Bis zum 10.10.2026 stand hier `padding-inline: 0`. Das Haekchen hiess damit
   nicht „kein Container“, sondern „kein Abstand“: ein Absatz, den jemand in
   den Editor getippt hatte, begann bei 0 und endete bei der Fensterbreite.
   Auf einem Telefon von 390 px gemessen — 0 px links, 0 px rechts, die
   Buchstaben am Glas. Gemeldet von der Person, die die Theme testet.

   Richtig ist beides zugleich: Text behaelt den Seitenrand, den er ohne das
   Haekchen auch haette, und alles, was ausdruecklich randlos sein will, holt
   sich genau diesen Betrag als negativen Rand zurueck. Deshalb steht die Zahl
   als --inv-content-pad in pages/templates.css und nicht zweimal.

   Gemeint sind die beiden Faelle, die „randlos“ wirklich sagen: ein Block mit
   „Volle Breite“ aus dem Editor, und eine Sektion des Themes — die bringt
   ihren eigenen Innenabstand mit und soll ihn nicht doppelt bekommen.

   Der negative Rand steht ausdruecklich nur unter .vf-content-area, also nur
   dort, wo der Abstand auch wirklich dasteht. Die gestreckte Vorlage hat
   dieses Element nicht; ohne diese Einschraenkung wuerde dort ein Block um
   24 px ueber den Bildschirm hinausragen und die Seite seitlich scrollbar
   machen. Seite 518 auf diesem System ist genau so eine Seite.
   ------------------------------------------------------------- */
.inv-page-fullwidth .vf-content-area .entry-content > .alignfull,
.inv-page-fullwidth .vf-content-area .entry-content > [class*="vf-section-"],
.inv-page-fullwidth .vf-content-area .entry-content > p:has(> [class*="vf-section-"]) {
    margin-inline: calc(var(--inv-content-pad, 1.5rem) * -1);
}

/* Die gestreckte Vorlage heißt so, weil sie streckt: der Inhaltsbereich hört
   hier nicht an der Container-Breite auf. Der Text darin behält seine
   Lesebreite und steht mittig — nur alles, was breit sein will, darf es. */
.inv-stretched .entry-content {
    max-width: none;
}

/* Ohne Container fehlt hier aber auch dessen Seitenrand: auf dem Telefon
   stand der Text bei 0 px, Buchstaben am Glas. Statt eines Innenabstands,
   den „Volle Breite“ sich mit negativem Rand zurückholen müsste, wird jedes
   Kind um den Rand schmaler als der Bildschirm — mittig steht es ohnehin.
   Randlos bleiben „Volle Breite“ und die Sektionen des Themes; die bringen
   ihren eigenen Innenabstand mit. :where hält die Regel so schwach, dass
   .alignwide darunter seine eigene Breite behält. */
.inv-stretched .entry-content > :where(:not(.alignfull, [class*="vf-section-"], p:has(> [class*="vf-section-"]))) {
    max-width: min(var(--inv-measure-abs, var(--inv-measure, 68ch)), 100% - 2 * var(--inv-gutter, 24px));
}

.inv-stretched .entry-content > .alignwide {
    max-width: min(var(--inv-container-max, 1280px), 100% - 2 * var(--inv-gutter, 24px));
}

/* Dasselbe auf Seiten des Shops. Dort ist der Seitenrand auf dem Telefon
   absichtlich 0 (--inv-edge mobil, woo-base.css): Warenkorb, Konto und
   Katalog bringen ihre Karten mit eigenem Innenabstand und sollen die
   Breite nutzen. Aber alles andere im Seiteninhalt stand dann am Glas —
   ein Absatz über dem Warenkorb, und vor allem das Widerrufsformular von
   Germanized: dessen Seite trägt die Klassen des Shops, und dieses Formular
   braucht ab 2026 jeder Shop in Deutschland. Randlos bleibt, was von
   WooCommerce kommt: die Hülle .woocommerce des Shortcodes und seine Blöcke. */
.woocommerce-page .vf-content-area .entry-content > :where(:not(.woocommerce, [class*="wp-block-woocommerce-"], [class*="wc-block-"], .alignwide, .alignfull, [class*="vf-section-"], p:has(> [class*="vf-section-"]))) {
    max-width: min(var(--inv-measure-abs, var(--inv-measure, 68ch)), 100% - 2 * var(--inv-gutter, 24px));
}

/* Eine randlose Gruppe ohne Farbe hat keinen Innenabstand (den gibt
   blocks.css nur farbigen Gruppen) — ihr Text stünde wieder am Glas. */
.inv-stretched .entry-content > .wp-block-group.alignfull:not(.has-background) {
    padding-inline: var(--inv-gutter, 24px);
}

/*
 * Vertikaler Abstand fuer Seiten, Archive und Vorlagen.
 *
 * Nicht fuer Sektionen. Jede Sektion bekommt ihren Abstand in
 * base/section-vars.css, und zwar aus ihrem eigenen Feld "Abstand oben/unten"
 * mit dem globalen Rhythmus als Rueckfall. Diese Klasse kennt kein Sektionsfeld
 * und wuerde es ueberschreiben oder von ihm ueberschrieben werden, je nach
 * Ladereihenfolge — deshalb steht sie auf keiner Sektionswurzel mehr.
 */
.inv-section-padding,
.vf-section-padding {
    padding-block: var(--inv-section-py);
}

.inv-section-padding-sm,
.vf-section-padding-sm {
    padding-block: 3rem;
}

/* Section Header */
.inv-section-title-area,
.vf-section-title-area {
    max-width: 42rem;
}

.inv-eyebrow,
.vf-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--inv-primary);
}

.inv-section-title,
.vf-section-title {
    margin-top: .75rem;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--inv-fg);
}

.inv-section-desc,
.vf-section-desc {
    margin-top: 1rem;
    color: var(--inv-muted-fg);
    max-width: 38rem;
}

/* Grids */
.inv-grid,
.vf-grid {
    display: grid;
    gap: 1.25rem;
}

.inv-grid-2,
.vf-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.inv-grid-3,
.vf-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.inv-grid-4,
.vf-grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (min-width: 1024px) {
.inv-grid-2,
.vf-grid-2 { grid-template-columns: repeat(2, 1fr); }

.inv-grid-3,
.vf-grid-3 { grid-template-columns: repeat(3, 1fr); }

.inv-grid-4,
.vf-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------
   Das Band für den Seiteninhalt auf Vorlagen, die ihre Seite selbst bauen

   Die Startseite baut sich aus den angeordneten Sektionen, die Portfolio-Seite
   aus einer Abfrage. Was jemand zusätzlich im Editor schreibt, steht hier — in
   einem eigenen Band, damit es Abstand zu den Sektionen hat und nicht an ihnen
   klebt. Siehe inverta_page_blocks().
   ------------------------------------------------------------- */
.vf-page-blocks > .vf-container,
.vf-page-blocks > .vf-portfolio-intro {
    margin-inline: auto;
    max-width: var(--inv-container, var(--inv-container-max, 1280px));
    padding-inline: var(--inv-section-px, var(--inv-gutter, 24px));
}

/* Die Einleitung über einer Projektliste ist Text, keine Fläche: sie liest sich
   in der Lesebreite, während die Liste darunter die ganze Spalte nimmt. */
.vf-page-blocks > .vf-portfolio-intro {
    max-width: var(--inv-measure, 68ch);
    padding-inline: 0;
}


/* ── section-chrome.css ── */
/* =============================================================
   Inverta — section chrome

   Backgrounds and edge dividers shared by every schema section.
   Values arrive as custom properties written by Inverta_CSS.
   ============================================================= */

/* -------------------------------------------------------------
   Global design tokens
   ------------------------------------------------------------- */
:root {
  /* How much the WordPress toolbar takes off the top of the viewport. Any
     section that sizes itself against the screen needs this, so it is
     declared once here rather than inside whichever section asked first. */
  --vf-adminbar-h: 0px;
  --inv-radius: 16px;
  --inv-radius-sm: 10px;
  --inv-border-w: 1px;
  --inv-container: 1280px;
  --inv-motion: 400ms;
  --inv-ease: cubic-bezier(.22, .61, .36, 1);
  --inv-hover-lift: 4px;
}

/* --inv-edge, --inv-gutter and --inv-section-rhythm are responsive: Inverta_CSS
   resolves them per breakpoint, so the design default belongs on the consumer, never on the variable — a variable defined in terms of itself is thrown away.

   Two distinct distances, deliberately kept apart:

     --inv-edge    how far a section sits from the edge of the screen (10px)
     --inv-gutter  how far text sits from the edge of its own section (24px)

   Both resolve the same way: the section's own value wins, then the global one
   from "Design-Grundlagen", then the number written here. A section that wants
   to sit flush against the screen edge sets its own value to 0.

   The capsule sections (hero, brands, about, services, bento) carry --inv-edge
   on the section element in their own stylesheets. They must not be padded a
   second time here, or the two distances would stack. */
.vf-container {
  max-width: min(var(--inv-container), var(--inv-shell-max, 100%));
  padding-inline: var(--inv-section-px, var(--inv-gutter, 24px));
}

/* -------------------------------------------------------------
   --inv-shell-max: wo die Seite aufhört, mitzuwachsen

   "Breiten & Rhythmus → Maximale Breite der Seite". Jede Kapsel und jeder
   Container liest ihn als zweite, obere Grenze; die eigene "Maximale Breite"
   einer Sektion bleibt die erste. Es gewinnt immer die kleinere der beiden.

   Warum es das braucht: die Kapsel-Sektionen — Hero, Marken, Über uns,
   Leistungen, Bento, CTA, Kontakt, Blog, FAQ — waren bewusst randvoll, mit
   --inv-edge als einzigem Abstand zum Bildschirm. Auf einem 1440er Monitor
   heißt das 1410 px und sieht so aus, wie es gedacht ist. Gemessen auf 2560 px
   waren es 2530, auf 3440 px 3410: ein Bento-Raster von dreieinhalb Metern
   Bildschirmbreite, ein Kontaktformular von 1700 px, eine Textzeile, die das
   Auge nicht mehr am Stück liest. Die Seite ist nie seitlich gescrollt — das
   Gegenteil war der Fehler: sie wuchs endlos weiter.

   Der Hintergrund einer Sektion bleibt randvoll. Gedeckelt wird nur, was
   Inhalt trägt — sonst würde ein farbiges Band auf einem breiten Monitor in
   der Mitte aufhören, und das wäre ein zweiter Fehler anstelle des ersten.

   Der Standard (1920) ändert auf keinem Monitor etwas, der heute benutzt wird:
   bei 1920 px ist die Kapsel 1890 px breit und bleibt es. Er greift erst dort,
   wo es vorher keine Antwort gab.

   Der Vorgabewert steht beim Verbraucher, nicht auf der Variable: eine
   Variable, die sich im Stylesheet selbst definiert, würde die Einstellung
   überschreiben, wenn das Stylesheet nach dem Inline-CSS geladen wird.
   ------------------------------------------------------------- */

/* Schattentiefe.

   This used to name three card classes directly, so the setting reached three
   elements and nothing else — not one glass capsule, not the header. Depth is
   a set of tokens now: the body class redefines them, and every surface that
   casts a shadow reads one. "Weich" reproduces the shadows that were written
   into each stylesheet by hand, so nothing moves at the default.

   Two capsule tokens, because the bento capsule has always sat a little
   lighter than the others and that difference is deliberate. */
:root {
  --inv-shadow-capsule:
    0 2px 6px -1px rgba(15, 23, 42, .06),
    0 10px 30px -4px rgba(15, 23, 42, .12),
    0 20px 45px -10px rgba(15, 23, 42, .08),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
  --inv-shadow-capsule-airy:
    0 2px 6px -1px rgba(15, 23, 42, .04),
    0 12px 36px -4px rgba(15, 23, 42, .08),
    0 24px 50px -10px rgba(15, 23, 42, .05),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
  --inv-shadow-card: 0 4px 16px -6px rgba(15, 23, 42, .14);
}

/* Flat: the inset highlight stays, because it is the glass edge, not a shadow.
   Removing it would turn the capsules into plain rectangles. */
.inv-shadow-none {
  --inv-shadow-capsule: inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
  --inv-shadow-capsule-airy: inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
  --inv-shadow-card: none;
}

.inv-shadow-hard {
  --inv-shadow-capsule:
    0 4px 10px -2px rgba(15, 23, 42, .12),
    0 18px 44px -6px rgba(15, 23, 42, .24),
    0 34px 70px -14px rgba(15, 23, 42, .18),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
  --inv-shadow-capsule-airy:
    0 4px 10px -2px rgba(15, 23, 42, .09),
    0 20px 48px -6px rgba(15, 23, 42, .18),
    0 38px 76px -14px rgba(15, 23, 42, .12),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
  --inv-shadow-card: 0 16px 40px -12px rgba(15, 23, 42, .3);
}

.vf-card,
.vf-testimonial,
.vf-plan-card { box-shadow: var(--inv-shadow-card); }

/* Motion, and the switch that stops all of it.
   .vf-btn is not in this list: components/buttons.css loads after this file
   and defines the button's own, longer transition, so naming it here only
   produced a declaration that was overwritten a few kilobytes later. */
/* .vf-card is not in this list either, and for the same reason: cards.css
   loads after this file and gives the card its own transition. */
.vf-testimonial { transition: transform var(--inv-motion) var(--inv-ease), box-shadow var(--inv-motion) var(--inv-ease); }

.vf-card:hover { transform: translateY(calc(var(--inv-hover-lift) * -1)); }

.inv-no-motion *,
.inv-no-motion *::before,
.inv-no-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {*,
*::before,
*::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* -------------------------------------------------------------
   Section backgrounds
   The ::before layer carries image or gradient plus its overlay, so section content never inherits the overlay's opacity.
   ------------------------------------------------------------- */
[class*="vf-section-"] { position: relative; isolation: isolate; }

[class*="vf-section-"].vf-bg-image::before,
[class*="vf-section-"].vf-bg-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-repeat: no-repeat;
}

[class*="vf-section-"].vf-bg-image::before {
  background-image: var(--vf-bg-image);
  background-position: var(--vf-bg-pos, center center);
  background-size: var(--vf-bg-size, cover);
}

[class*="vf-section-"].vf-bg-image.vf-bg-fixed::before { background-attachment: fixed; }

[class*="vf-section-"].vf-bg-gradient::before {
  background-image: linear-gradient(
    var(--vf-grad-angle, 180deg),
    var(--vf-grad-from, #0f172a),
    var(--vf-grad-to, #1e293b)
  );
}

[class*="vf-section-"].vf-bg-image::after,
[class*="vf-section-"].vf-bg-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vf-overlay-c, #0f172a);
  opacity: calc(var(--vf-overlay-o, 0) / 100);
  pointer-events: none;
}

/* -------------------------------------------------------------
   Edge dividers
   ------------------------------------------------------------- */
.vf-divider {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--vf-divider-h, 60px);
  line-height: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.vf-divider--top    { top: 0; }

.vf-divider--bottom { bottom: 0; }

.vf-divider svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--vf-divider-c, #ffffff);
}

.vf-divider--top svg { transform: rotate(180deg); }

/* The soft variant needs no shape, just a colour ramp. */
.vf-divider--fade {
  background: linear-gradient(to top, var(--vf-divider-c, #fff), transparent);
}

.vf-divider--top.vf-divider--fade {
  background: linear-gradient(to bottom, var(--vf-divider-c, #fff), transparent);
}

@media (max-width: 640px) {
.vf-divider { height: calc(var(--vf-divider-h, 60px) * .6); }
}

/* =============================================================
   Wiring the remaining schema variables

   Each rule below is what makes an option actually do something:
   the schema writes the property, this reads it.
   ============================================================= */

/* -------------------------------------------------------------
   Max width — applies to the section's inner container
   ------------------------------------------------------------- */
.vf-section-brands       .vf-container { max-width: min(var(--vf-brands-max-w,   var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-business     .vf-container { max-width: min(var(--vf-business-max-w, var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-contact      .vf-container { max-width: min(var(--vf-contact-max-w,  var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-counter      .vf-container { max-width: min(var(--vf-counter-max-w,  var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-explainer    .vf-container { max-width: min(var(--vf-explainer-max-w, var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-faq          .vf-container { max-width: min(var(--vf-faq-max-w,      var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-features     .vf-container { max-width: min(var(--vf-features-max-w, var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-gallery      .vf-container { max-width: min(var(--vf-gallery-max-w,  var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-location     .vf-container { max-width: min(var(--vf-location-max-w, var(--inv-container)), var(--inv-shell-max, 100%)); }

/* Blog & News hat keinen .vf-container mehr: die Breite sitzt auf der Kapsel,
   siehe sections/news.css. */

.vf-section-pricing      .vf-container { max-width: min(var(--vf-pricing-max-w,  var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-pricing-plans .vf-container { max-width: min(var(--vf-plans-max-w,   var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-projects     .vf-container { max-width: min(var(--vf-projects-max-w, var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-team         .vf-container { max-width: min(var(--vf-team-max-w,     var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-testimonials .vf-container { max-width: min(var(--vf-testi-max-w,    var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-video        .vf-container { max-width: min(var(--vf-video-max-w,    var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-slider       .vf-container { max-width: min(var(--vf-slider-max-w,   var(--inv-container)), var(--inv-shell-max, 100%)); }

.vf-section-map          .vf-map-embed { max-width: min(var(--vf-map-max-w,  100%), var(--inv-shell-max, 100%)); margin-inline: auto; }

/* -------------------------------------------------------------
   Accent colour — links, icons, emphasis and the section eyebrow
   ------------------------------------------------------------- */
.vf-section-business     { --vf-accent: var(--vf-business-accent, var(--vf-primary)); }

.vf-section-contact      { --vf-accent: var(--vf-contact-accent, var(--vf-primary)); }

.vf-section-counter      { --vf-accent: var(--vf-counter-accent, var(--vf-primary)); }

.vf-section-explainer    { --vf-accent: var(--vf-explainer-accent, var(--vf-primary)); }

.vf-section-faq          { --vf-accent: var(--vf-faq-accent, var(--vf-primary)); }

.vf-section-features     { --vf-accent: var(--vf-features-accent, var(--vf-primary)); }

.vf-section-gallery      { --vf-accent: var(--vf-gallery-accent, var(--vf-primary)); }

.vf-section-location     { --vf-accent: var(--vf-location-accent, var(--vf-primary)); }

.vf-section-news         { --vf-accent: var(--vf-news-accent, var(--vf-primary)); }

.vf-section-pricing      { --vf-accent: var(--vf-pricing-accent, var(--vf-primary)); }

.vf-section-pricing-plans { --vf-accent: var(--vf-plans-accent, var(--vf-primary)); }

.vf-section-projects     { --vf-accent: var(--vf-projects-accent, var(--vf-primary)); }

.vf-section-team         { --vf-accent: var(--vf-team-accent, var(--vf-primary)); }

.vf-section-testimonials { --vf-accent: var(--vf-testi-accent, var(--vf-primary)); }

.vf-section-video        { --vf-accent: var(--vf-video-accent, var(--vf-primary)); }

.vf-section-slider       { --vf-accent: var(--vf-slider-accent, var(--vf-primary)); }

.vf-section-map          { --vf-accent: var(--vf-map-accent, var(--vf-primary)); }

.vf-section-cta          { --vf-accent: var(--vf-cta-accent, var(--vf-primary)); }

[class*="vf-section-"] .vf-eyebrow,
[class*="vf-section-"] .vf-section-desc a,
[class*="vf-section-"] .vf-price-amount,
[class*="vf-section-"] .vf-step-n,
[class*="vf-section-"] .vf-counter-num { color: var(--vf-accent, var(--vf-primary)); }

[class*="vf-section-"] .vf-btn-primary {
  background: var(--vf-accent, var(--vf-primary));
  border-color: var(--vf-accent, var(--vf-primary));
}

[class*="vf-section-"] .vf-plan-featured { border-color: var(--vf-accent, var(--vf-primary)); }

/* -------------------------------------------------------------
   Sections whose colour and padding had no rule at all
   ------------------------------------------------------------- */
.vf-section-video {
  background-color: var(--vf-video-bg);
  color: var(--vf-video-fg);
  padding-block: var(--vf-video-pt, 0) var(--vf-video-pb, 0);
}

.vf-section-slider {
  background-color: var(--vf-slider-bg);
  color: var(--vf-slider-fg);
  padding-block: var(--vf-slider-pt, 0) var(--vf-slider-pb, 0);
}

.vf-section-map {
  background-color: var(--vf-map-bg);
  color: var(--vf-map-fg);
  padding-block: var(--vf-map-pt, 0) var(--vf-map-pb, 0);
}

/* -------------------------------------------------------------
   Border width token

   Width and style only. The rounding was here too, on six classes that each
   have a stylesheet of their own — cards.css, forms.css, testimonials.css,
   the plans section — and every one of them set it again a few kilobytes
   later. Six declarations that never applied, and a `--inv-radius` that
   looked like it drove them.

   Rounding belongs to whichever file owns the component. This file owns the
   token those files read.
   ------------------------------------------------------------- */
.vf-card,
.vf-testimonial,
.vf-plan-card,
.vf-input,
.vf-select,
.vf-textarea {
  border-width: var(--inv-border-w, 1px);
  border-style: solid;
}

body.admin-bar {
  --vf-adminbar-h: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --vf-adminbar-h: 46px;
  }
}

/* -------------------------------------------------------------
   Frosted glass, within reason

   The design is built on backdrop-filter — 52 declarations in the
   main stylesheet and 14 more in the shop. Each one makes the
   browser copy the pixels behind the element and blur them, every
   frame the element or the page moves. On a desktop GPU that is
   free. On a phone it is the single most expensive thing the
   theme does, and a row of ten category chips means ten blurred
   layers stacked over a scrolling page.

   So the blur narrows on small screens rather than disappearing:
   the material still reads as glass, at a fraction of the cost.
   The chips drop it entirely — at 38px tall there is nothing to
   see through, and they are the ones that come in tens.
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  .inv-header__bar,
  .inv-mega,
  .inv-drawer,
  .inv-cart-drawer__panel {
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }

  .inv-shop-chip,
  .inv-shop-search input[type="search"],
  .woocommerce .inv-shop-toolbar .woocommerce-ordering select {
    --inv-chip-blur: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* A pointer that cannot hover is a touch device, whatever its screen size —
   a tablet in landscape is wider than 900px and has the same GPU budget. */
@media (hover: none) {
  .inv-shop-chip {
    --inv-chip-blur: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* -------------------------------------------------------------
   Ausrichtung des Sektionskopfes

   „Ausrichtung des Kopfes“ in jeder Sektion. Die Regeln sitzen am
   gemeinsamen Block .vf-section-title-area, nicht an jeder Zeile einzeln:
   text-align trägt Untertitel, Titel und Beschreibung zusammen.

   Die automatischen Ränder sind der Teil, den man leicht vergisst. Der Block
   ist 42 rem breit (base/layout.css); den Text in einem 672 px breiten Kasten
   zu zentrieren, der am linken Rand einer 1322 px breiten Kapsel klebt, ist
   nicht „mittig“ — in der Kontakt-Sektion lag die Mitte so um 325 px daneben,
   gemessen. Deshalb rückt auch der Kasten selbst.
   ------------------------------------------------------------- */
.vf-head-left .vf-section-title-area {
  margin-inline: 0 auto;
  text-align: start;
}

.vf-head-center .vf-section-title-area {
  margin-inline: auto;
  text-align: center;
}

.vf-head-center .vf-section-title,
.vf-head-center .vf-section-desc {
  margin-inline: auto;
}

.vf-head-right .vf-section-title-area {
  margin-inline: auto 0;
  text-align: end;
}

.vf-head-right .vf-section-title,
.vf-head-right .vf-section-desc {
  margin-inline-start: auto;
}

/* -------------------------------------------------------------
   Die Stelle, an der eine Sektion noch nichts zu zeigen hat
   — nur in der Live-Vorschau, siehe inverta_section_empty_notice().

   Bewusst eine gestrichelte Umrandung und kein Hintergrund: der Kasten
   soll nach einer Baustelle aussehen und nicht nach einem Entwurf, den
   man für fertig halten könnte. Er steht hier und nicht im Bündel einer
   Sektion, weil er genau dann gebraucht wird, wenn diese Sektion nichts
   gedruckt hat — und dann ist von ihrem Stylesheet nichts zu erwarten.
   ------------------------------------------------------------- */
.vf-section-empty {
  margin-inline: auto;
  max-width: 44rem;
  padding: 2rem 1.5rem;
  border: 2px dashed var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-lg, 18px);
  color: var(--inv-muted-fg, #64748b);
  text-align: center;
}

.vf-section-empty__name {
  margin: 0 0 .4rem;
  color: var(--inv-fg, #0f172a);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vf-section-empty__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.vf-section-empty__foot {
  margin: .9rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  opacity: .75;
}

@media (max-width: 480px) {
  .vf-section-empty {
    padding: 1.4rem 1rem;
  }
}


/* -------------------------------------------------------------
   02. CORE COMPONENTS
   ------------------------------------------------------------- */

/* ── blocks.css ── */
/* =============================================================
   Inverta — die Blöcke des Editors

   Was ein Redakteur auf eine Seite setzt, hat das Theme bisher nicht gekannt:
   nachgezählt gab es im ganzen Stylesheet keine einzige Regel für wp-block-*.
   Ein Knopf, eine Tabelle, ein Zitat sahen also aus wie WordPress und nicht wie
   dieses Theme — auf denselben Seiten, unter denselben Überschriften.

   Alles hier steht unter .entry-content. Die Sektionen der Startseite bringen
   ihre eigene Gestaltung mit, und eine unbeschränkte Regel für .wp-block-button
   würde in den Hero hineinreichen.

   Die Regeln gelten unter zwei Wurzeln: .entry-content vorne und
   .editor-styles-wrapper im Editor. Ohne die zweite sah ein Redakteur im Editor
   unformatierte Blöcke und auf der Seite formatierte — also nicht, was er baute.
   Geladen wird die Datei dafür auch über add_editor_style(), siehe
   inc/admin/editor-styles.php.

   `add_theme_support( 'wp-block-styles' )` ist aktiv, WordPress liefert also
   schon Grundformen für Zitat, Trenner und Tabelle mit. Hier werden sie nicht
   ersetzt, sondern an die Tokens gehängt.
   ============================================================= */

/* -------------------------------------------------------------
   Knöpfe
   ------------------------------------------------------------- */
.entry-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
  background: var(--inv-primary, #111827);
  color: var(--inv-primary-fg, #fff);
  border-radius: var(--inv-radius-md, 10px);
  padding: .8em 1.6em;
  font-family: var(--inv-font-display, inherit);
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, filter .18s ease;
}

.entry-content .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button__link:hover {
  background: var(--inv-btn-hover, var(--inv-primary, #111827));
  filter: brightness(1.05);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--inv-primary, #111827);
  border: 1px solid currentcolor;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--inv-primary, #111827);
  color: var(--inv-primary-fg, #fff);
}

/* -------------------------------------------------------------
   Tabelle — die einzige Stelle, an der Blockinhalt breiter werden darf
   als die Spalte, deshalb mit eigenem Rollbereich statt Überstand.
   ------------------------------------------------------------- */
.entry-content .wp-block-table,
.editor-styles-wrapper .wp-block-table {
  overflow-x: auto;
}

.entry-content .wp-block-table table,
.editor-styles-wrapper .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
}

.entry-content .wp-block-table th,
.editor-styles-wrapper .wp-block-table th,
.entry-content .wp-block-table td,
.editor-styles-wrapper .wp-block-table td {
  border: 1px solid var(--inv-border, #e2e8f0);
  padding: .6em .8em;
  text-align: start;
}

.entry-content .wp-block-table th,
.editor-styles-wrapper .wp-block-table th {
  font-family: var(--inv-font-display, inherit);
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 4%, transparent);
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 3%, transparent);
}

/* -------------------------------------------------------------
   Zitate
   ------------------------------------------------------------- */
.entry-content .wp-block-quote,
.editor-styles-wrapper .wp-block-quote {
  border-inline-start: 3px solid var(--inv-accent, #24a9b3);
  padding-inline-start: clamp(14px, 2vw, 22px);
  font-style: normal;
  color: var(--inv-fg, #0f172a);
}

.entry-content .wp-block-quote cite,
.editor-styles-wrapper .wp-block-quote cite,
.entry-content .wp-block-pullquote cite,
.editor-styles-wrapper .wp-block-pullquote cite {
  display: block;
  margin-top: .6em;
  font-size: .9rem;
  font-style: normal;
  color: var(--inv-muted-fg, #64748b);
}

.entry-content .wp-block-pullquote,
.editor-styles-wrapper .wp-block-pullquote {
  border-block: 1px solid var(--inv-border, #e2e8f0);
  padding-block: clamp(20px, 3vw, 32px);
  font-family: var(--inv-font-display, inherit);
}

/* -------------------------------------------------------------
   Trenner, Listen, Bilder
   ------------------------------------------------------------- */
.entry-content .wp-block-separator,
.editor-styles-wrapper .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--inv-border, #e2e8f0);
  max-width: 100%;
}

/* Vorne ist der Trenner eine Linie über die ganze Spalte: WordPress lädt dort
   die Datei nicht, die ihn auf 100 px kürzt (separator/theme.css), im Editor
   aber schon. Der Editor zeigt jetzt, was vorne steht. Das kurze Strichlein
   gibt es als eigenen Stil „Kurz“. */
.editor-styles-wrapper hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: auto;
}

.entry-content .wp-block-separator.is-style-dots::before,
.editor-styles-wrapper .wp-block-separator.is-style-dots::before {
  color: var(--inv-muted-fg, #64748b);
}

.entry-content .wp-block-list li::marker,
.editor-styles-wrapper .wp-block-list li::marker {
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}

.entry-content .wp-block-image img,
.editor-styles-wrapper .wp-block-image img,
.entry-content .wp-block-gallery img,
.editor-styles-wrapper .wp-block-gallery img,
.entry-content .wp-block-media-text__media img,
.editor-styles-wrapper .wp-block-media-text__media img {
  border-radius: var(--inv-radius-md, 10px);
}

.entry-content .wp-block-image figcaption,
.editor-styles-wrapper .wp-block-image figcaption,
.entry-content .wp-block-gallery figcaption,
.editor-styles-wrapper .wp-block-gallery figcaption,
.entry-content .wp-block-embed figcaption,
.editor-styles-wrapper .wp-block-embed figcaption {
  color: var(--inv-muted-fg, #64748b);
  font-size: .875rem;
  text-align: center;
}

/* -------------------------------------------------------------
   Code
   ------------------------------------------------------------- */
.entry-content .wp-block-code,
.editor-styles-wrapper .wp-block-code,
.entry-content .wp-block-preformatted,
.editor-styles-wrapper .wp-block-preformatted {
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 5%, transparent);
  border: 1px solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-md, 10px);
  padding: clamp(12px, 2vw, 18px);
  overflow-x: auto;
}

.entry-content .wp-block-code code,
.editor-styles-wrapper .wp-block-code code,
.entry-content .wp-block-preformatted,
.editor-styles-wrapper .wp-block-preformatted {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem;
}

/* -------------------------------------------------------------
   Gruppen, Spalten, Cover
   ------------------------------------------------------------- */
.entry-content .wp-block-columns,
.editor-styles-wrapper .wp-block-columns {
  gap: clamp(20px, 3vw, 40px);
}

.entry-content .wp-block-group.has-background,
.editor-styles-wrapper .wp-block-group.has-background,
.entry-content .wp-block-cover,
.editor-styles-wrapper .wp-block-cover {
  border-radius: var(--inv-radius-lg, 16px);
}

/* Eine farbige Gruppe braucht Innenabstand, sonst steht der Text an ihrer
   Kante. WordPress gibt ihr 1.25em 2.375em, aber in :where() — und
   base/reset.css setzt jedes Element auf padding: 0 und kommt später. Vorne war
   der Abstand deshalb 0, im Editor 20/38 px: gemessen am 13.10.2026. Wer in
   der Seitenleiste einen eigenen Abstand setzt, schreibt ihn ins style-Attribut
   und gewinnt weiter. */
.entry-content .wp-block-group.has-background,
.editor-styles-wrapper .wp-block-group.has-background {
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* -------------------------------------------------------------
   Aufklapper
   ------------------------------------------------------------- */
.entry-content .wp-block-details,
.editor-styles-wrapper .wp-block-details {
  border: 1px solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-md, 10px);
  padding: clamp(12px, 2vw, 18px);
}

.entry-content .wp-block-details summary,
.editor-styles-wrapper .wp-block-details summary {
  font-family: var(--inv-font-display, inherit);
  font-weight: 600;
  cursor: pointer;
}

/* -------------------------------------------------------------
   Eingebettetes Video: das Seitenverhältnis halten, nicht überstehen
   ------------------------------------------------------------- */
.entry-content .wp-block-embed iframe,
.editor-styles-wrapper .wp-block-embed iframe,
.entry-content .wp-block-video video,
.editor-styles-wrapper .wp-block-video video {
  max-width: 100%;
  border-radius: var(--inv-radius-md, 10px);
}


/* -------------------------------------------------------------
   Links im Seiteninhalt

   „Link & Icon Hover-Farbe“ (Farben) schrieb --inv-link-hover, die Variable
   wurde in zwei weitere umbenannt (--color-link-hover, --vf-link-hover) — und
   keine einzige Eigenschaft im ganzen Theme hat eine davon gelesen. Der Regler
   bewegte sich und färbte nichts; gemessen am 01.10.2026.

   Gelesen wird sie hier, wo Links ohne eigene Gestaltung stehen: im Text von
   Seiten, Beiträgen und Blogartikeln. Kopfzeile, Fußzeile, Shop und Konto
   haben jeweils eigene Einstellungen dafür — die bleiben, wo sie sind.
   ------------------------------------------------------------- */
.entry-content a:hover,
.entry-content a:focus-visible,
.vf-content-area .entry-content a:hover,
.editor-styles-wrapper a:hover {
  color: var(--inv-link-hover, var(--inv-accent, #24a9b3));
}


/* =============================================================
   Eigene Stile (inc/block-styles.php)

   Jeder Stil steht unter beiden Wurzeln, wie alles in dieser Datei. Gebaut nur
   aus Tokens, damit er der Akzentfarbe, den Radien und den Schriften aus dem
   Customizer folgt. tools/tests/block_styles.php prüft, dass jeder
   angemeldete Stil hier eine Regel hat — für beide Wurzeln.
   ============================================================= */

/* Knopf „Akzent“: die zweite Farbe des Themes. --inv-accent-fg ist die
   lesbare Schrift auf genau dieser Farbe (Inverta_CSS rechnet sie aus). */
.entry-content .wp-block-button.is-style-inv-akzent .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-inv-akzent .wp-block-button__link {
  background: var(--inv-accent, #24a9b3);
  color: var(--inv-accent-fg, #0f172a);
}

.entry-content .wp-block-button.is-style-inv-akzent .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-inv-akzent .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 88%, #000);
  filter: none;
}

/* Knopf „Weich“: getönt statt gefüllt — der zweite Knopf neben einem ersten,
   ohne mit ihm um das Auge zu streiten. */
.entry-content .wp-block-button.is-style-inv-weich .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-inv-weich .wp-block-button__link {
  background: color-mix(in srgb, var(--inv-primary, #111827) 8%, transparent);
  color: var(--inv-primary, #111827);
}

.entry-content .wp-block-button.is-style-inv-weich .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-inv-weich .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--inv-primary, #111827) 14%, transparent);
  filter: none;
}

/* Gruppe „Karte“: dieselbe Fläche wie die Karten der Sektionen. */
.entry-content .wp-block-group.is-style-inv-karte,
.editor-styles-wrapper .wp-block-group.is-style-inv-karte {
  background: var(--inv-surface, #fff);
  border: 1px solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-lg, 16px);
  box-shadow: var(--inv-shadow-card, 0 4px 20px -4px rgba(15, 23, 42, .06));
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* Karten in Spalten gleich hoch: die Spalte streckt sich schon (Flex), die
   Karte darin bisher nicht — drei Karten mit verschieden langem Text standen
   als Treppe da. */
.entry-content .wp-block-column > .wp-block-group.is-style-inv-karte:only-child,
.editor-styles-wrapper .wp-block-column > .wp-block-group.is-style-inv-karte:only-child {
  height: 100%;
}

/* Gruppe „Hinweis“: ein Kasten, der gelesen werden will — Garantie,
   Öffnungszeiten an Feiertagen, „Bitte Daten sichern“. */
.entry-content .wp-block-group.is-style-inv-hinweis,
.editor-styles-wrapper .wp-block-group.is-style-inv-hinweis {
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 9%, var(--inv-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--inv-accent, #24a9b3) 28%, transparent);
  border-inline-start: 4px solid var(--inv-accent, #24a9b3);
  border-radius: var(--inv-radius-md, 10px);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
}

/* Gruppe „Dunkel“: Fläche in der Primärfarbe, alles darin in ihrer Schrift.
   Absätze und Listen tragen vorne eine eigene, gedämpfte Farbe
   (components/content.css) — hier muss sie mit, sonst steht grauer Text auf
   Dunkelblau. */
.entry-content .wp-block-group.is-style-inv-dunkel,
.editor-styles-wrapper .wp-block-group.is-style-inv-dunkel {
  background: var(--inv-primary, #111827);
  color: var(--inv-primary-fg, #fff);
  border-radius: var(--inv-radius-lg, 16px);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.entry-content .wp-block-group.is-style-inv-dunkel :is(h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link)),
.editor-styles-wrapper .wp-block-group.is-style-inv-dunkel :is(h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link)) {
  color: inherit;
}

.entry-content .wp-block-group.is-style-inv-dunkel :is(p, ul, ol),
.editor-styles-wrapper .wp-block-group.is-style-inv-dunkel :is(p, ul, ol) {
  color: color-mix(in srgb, var(--inv-primary-fg, #fff) 78%, transparent);
}

.entry-content .wp-block-group.is-style-inv-dunkel .is-style-inv-ueberzeile,
.editor-styles-wrapper .wp-block-group.is-style-inv-dunkel .is-style-inv-ueberzeile {
  color: var(--inv-accent, #24a9b3);
}

/* Ein gewöhnlicher Knopf wäre auf der dunklen Fläche Primärfarbe auf
   Primärfarbe, also unsichtbar. Dort nimmt er die Akzentfarbe, und der weiche
   Knopf eine helle Tönung. */
.entry-content .wp-block-group.is-style-inv-dunkel .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.editor-styles-wrapper .wp-block-group.is-style-inv-dunkel .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
  background: var(--inv-accent, #24a9b3);
  color: var(--inv-accent-fg, #0f172a);
}

.entry-content .wp-block-group.is-style-inv-dunkel .wp-block-button.is-style-inv-weich .wp-block-button__link,
.editor-styles-wrapper .wp-block-group.is-style-inv-dunkel .wp-block-button.is-style-inv-weich .wp-block-button__link {
  background: color-mix(in srgb, var(--inv-primary-fg, #fff) 14%, transparent);
  color: var(--inv-primary-fg, #fff);
}

/* Der Kontur-Knopf nimmt auf der dunklen Fläche ihre Schrift. */
.entry-content .wp-block-group.is-style-inv-dunkel .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-group.is-style-inv-dunkel .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--inv-primary-fg, #fff);
}

.entry-content .wp-block-group.is-style-inv-dunkel .wp-block-button.is-style-outline .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-group.is-style-inv-dunkel .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--inv-primary-fg, #fff);
  color: var(--inv-primary, #111827);
}

/* Absatz „Überzeile“: die kleine Zeile über einer Überschrift, wie in den
   Sektionen (.inv-eyebrow in base/layout.css). */
.entry-content p.is-style-inv-ueberzeile,
.editor-styles-wrapper p.is-style-inv-ueberzeile {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--inv-primary, #111827);
  margin-bottom: .5rem;
}

/* Liste „Häkchen“: für das, was inklusive ist. Der Haken ist eine Maske, also
   nimmt er die Akzentfarbe an und braucht keine Bilddatei. */
.entry-content .wp-block-list.is-style-inv-haken,
.editor-styles-wrapper .wp-block-list.is-style-inv-haken,
.entry-content .wp-block-list.is-style-inv-schlicht,
.editor-styles-wrapper .wp-block-list.is-style-inv-schlicht {
  list-style: none;
  padding-inline-start: 0;
}

.entry-content .wp-block-list.is-style-inv-haken > li,
.editor-styles-wrapper .wp-block-list.is-style-inv-haken > li {
  position: relative;
  padding-inline-start: 1.9em;
}

.entry-content .wp-block-list.is-style-inv-haken > li + li,
.editor-styles-wrapper .wp-block-list.is-style-inv-haken > li + li,
.entry-content .wp-block-list.is-style-inv-schlicht > li + li,
.editor-styles-wrapper .wp-block-list.is-style-inv-schlicht > li + li {
  margin-top: .4em;
}

.entry-content .wp-block-list.is-style-inv-haken > li::before,
.editor-styles-wrapper .wp-block-list.is-style-inv-haken > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .3em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 16%, transparent);
}

.entry-content .wp-block-list.is-style-inv-haken > li::after,
.editor-styles-wrapper .wp-block-list.is-style-inv-haken > li::after {
  content: "";
  position: absolute;
  inset-inline-start: .25em;
  top: .55em;
  width: .7em;
  height: .7em;
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 75%, var(--inv-fg, #0f172a));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tabelle „Preisliste“: Leistung links, Preis rechts, nur waagerechte
   Linien. Die letzte Spalte steht rechtsbündig und in Ziffern gleicher
   Breite, damit die Beträge untereinander stehen. */
.entry-content .wp-block-table.is-style-inv-preise :is(th, td),
.editor-styles-wrapper .wp-block-table.is-style-inv-preise :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--inv-border, #e2e8f0);
  padding: .8em .25em;
  background: none;
}

.entry-content .wp-block-table.is-style-inv-preise thead :is(th, td),
.editor-styles-wrapper .wp-block-table.is-style-inv-preise thead :is(th, td) {
  border-bottom: 2px solid var(--inv-fg, #0f172a);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--inv-muted-fg, #64748b);
}

.entry-content .wp-block-table.is-style-inv-preise :is(th, td):last-child,
.editor-styles-wrapper .wp-block-table.is-style-inv-preise :is(th, td):last-child {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.entry-content .wp-block-table.is-style-inv-preise tbody td:last-child,
.editor-styles-wrapper .wp-block-table.is-style-inv-preise tbody td:last-child {
  font-family: var(--inv-font-display, inherit);
  font-weight: 600;
  color: var(--inv-fg, #0f172a);
}

/* Aufklapper „Nur Linie“: für eine Reihe von Fragen untereinander. Zehn
   Kästen mit Rahmen sind zehn Kästen; zehn Linien sind eine Liste. */
.entry-content .wp-block-details.is-style-inv-linie,
.editor-styles-wrapper .wp-block-details.is-style-inv-linie {
  border: 0;
  border-bottom: 1px solid var(--inv-border, #e2e8f0);
  border-radius: 0;
  padding: 0 0 1rem;
}

.entry-content .wp-block-details.is-style-inv-linie + .wp-block-details.is-style-inv-linie,
.editor-styles-wrapper .wp-block-details.is-style-inv-linie + .wp-block-details.is-style-inv-linie {
  margin-block-start: 1rem;
}

.entry-content .wp-block-details.is-style-inv-linie summary,
.editor-styles-wrapper .wp-block-details.is-style-inv-linie summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.entry-content .wp-block-details.is-style-inv-linie summary::-webkit-details-marker,
.editor-styles-wrapper .wp-block-details.is-style-inv-linie summary::-webkit-details-marker {
  display: none;
}

.entry-content .wp-block-details.is-style-inv-linie summary::after,
.editor-styles-wrapper .wp-block-details.is-style-inv-linie summary::after {
  content: "+";
  flex: none;
  font-size: 1.25em;
  line-height: 1;
  color: var(--inv-muted-fg, #64748b);
  transition: transform .2s ease;
}

.entry-content .wp-block-details.is-style-inv-linie[open] summary::after,
.editor-styles-wrapper .wp-block-details.is-style-inv-linie[open] summary::after {
  transform: rotate(45deg);
}

.entry-content .wp-block-details.is-style-inv-linie > :not(summary),
.editor-styles-wrapper .wp-block-details.is-style-inv-linie > :not(summary) {
  margin-top: .6rem;
}

/* Trenner „Kurz“: der Strich unter einer Überschrift. Die Linie bleibt so
   breit wie die Textspalte und malt nur ihren Anfang: ein 3rem schmales <hr>
   mit margin-inline: 0 stand am Rand des Containers statt am Rand des Textes
   darüber (gemessen am 13.10.2026: 200 px weiter links). Zentriert, wenn der
   Trenner zentriert ist; in RTL am rechten Anfang. */
.entry-content .wp-block-separator.is-style-inv-kurz,
.editor-styles-wrapper hr.wp-block-separator.is-style-inv-kurz {
  width: auto;
  max-width: var(--inv-measure-abs, var(--inv-measure, 68ch));
  height: 3px;
  border: 0;
  background: linear-gradient(var(--inv-accent, #24a9b3), var(--inv-accent, #24a9b3)) left center / 3rem 3px no-repeat;
  opacity: 1;
}

.entry-content .wp-block-separator.is-style-inv-kurz:dir(rtl),
.editor-styles-wrapper hr.wp-block-separator.is-style-inv-kurz:dir(rtl) {
  background-position: right center;
}

.entry-content .wp-block-separator.is-style-inv-kurz.aligncenter,
.editor-styles-wrapper hr.wp-block-separator.is-style-inv-kurz.aligncenter {
  background-position: center;
}

/* Bild „Mit Schatten“. */
.entry-content .wp-block-image.is-style-inv-schatten img,
.editor-styles-wrapper .wp-block-image.is-style-inv-schatten img {
  box-shadow: var(--inv-shadow-elegant, 0 30px 80px -30px rgba(15, 23, 42, .1)), var(--inv-shadow-card, 0 4px 20px -4px rgba(15, 23, 42, .06));
}

@media (prefers-reduced-motion: reduce) {
  .entry-content .wp-block-details.is-style-inv-linie summary::after,
  .editor-styles-wrapper .wp-block-details.is-style-inv-linie summary::after {
    transition: none;
  }
}


/* ── buttons.css ── */
/* =============================================================
   Inverta Theme — Buttons (.inv-btn)
   ============================================================= */

/* Radius, motion and hover lift all come from "Design-Grundlagen". A button is
   the most visible thing a style preset touches, so hardcoding any of them here
   is what made a preset look like it only changed the font. */
.inv-btn,
.vf-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: var(--inv-radius-sm, 10px);
    font-weight: 600;
    font-size: var(--inv-btn-size, .9375rem);
    padding: var(--inv-btn-py, .75rem) var(--inv-btn-px, 1.5rem);
    cursor: pointer;
    border: var(--inv-border-w, 1px) solid transparent;
    font-family: inherit;
    transition:
        background-color calc(var(--inv-motion, 400ms) * .5) var(--inv-ease),
        color calc(var(--inv-motion, 400ms) * .5) var(--inv-ease),
        transform calc(var(--inv-motion, 400ms) * .375) var(--inv-ease),
        box-shadow calc(var(--inv-motion, 400ms) * .5) var(--inv-ease);
    text-decoration: none;
    white-space: nowrap;
}

.inv-btn-primary,
.vf-btn-primary {
    background: var(--inv-primary);
    color: var(--inv-primary-fg);
    box-shadow: var(--inv-shadow-glow);
}

.inv-btn-primary:hover,
.vf-btn-primary:hover {
    background: var(--inv-btn-hover);
    color: var(--inv-primary-fg);
    transform: translateY(calc(var(--inv-hover-lift, 4px) * -0.25));
    text-decoration: none;
}

.inv-btn-outline,
.vf-btn-outline {
    background: transparent;
    color: var(--inv-fg);
    border: var(--inv-border-w, 1px) solid var(--inv-border);
}

.inv-btn-outline:hover,
.vf-btn-outline:hover {
    background: var(--inv-surface);
    border-color: var(--inv-primary);
    text-decoration: none;
}

.inv-btn-sm,
.vf-btn-sm {
    padding: .5rem 1.125rem;
    font-size: .875rem;
}

/* Buttons WordPress itself renders — blocks, comment and search forms — used
   the browser default rounding. They read the same knob now, so "Kleine
   Rundung" means the same thing everywhere.

   WooCommerce's shop buttons are deliberately pill-shaped and keep their own
   rule in pages/woocommerce.css; repeating them here would only add a
   declaration that loses. */
.wp-block-button__link,
.wp-element-button,
input[type="submit"],
#respond input#submit,
.search-form input[type="submit"] {
    border-radius: var(--inv-radius-sm, 10px);
}

/* Loading & debounce state: disable pointer events to prevent duplicate clicks */
.button.loading,
.button.is-adding,
.add_to_cart_button.loading,
.add_to_cart_button.is-adding {
    pointer-events: none !important;
    opacity: 0.7;
    cursor: default;
}

/* =============================================================
   The hover, once

   Every section had been growing its own button: the CTA had a sheen and a
   lift, the FAQ had a pill with a tint, the hero had a third thing. They are
   one object now — same rounding, same lift, same sheen crossing once — so a
   button behaves the same wherever somebody meets it.

   Sections opt in by putting .inv-btn on their own class; the modifier
   (--primary / --ghost / --quiet) chooses the surface.
   ============================================================= */

.inv-btn,
.vf-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.inv-btn:hover,
.vf-btn:hover,
.inv-btn:focus-visible,
.vf-btn:focus-visible {
    transform: translateY(calc(var(--inv-hover-lift, 4px) * -0.25));
}

/* A single pass of light across the face. One transform, nothing behind it
   repaints, and it never runs on its own — only in answer to a pointer. */
.inv-btn::after,
.vf-btn::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
    transform: translateX(-140%) skewX(-14deg);
    transition: transform calc(var(--inv-motion, 400ms) * 1.9) var(--inv-ease);
    pointer-events: none;
}

.inv-btn:hover::after,
.vf-btn:hover::after,
.inv-btn:focus-visible::after,
.vf-btn:focus-visible::after {
    transform: translateX(360%) skewX(-14deg);
}

/* An outline button has no fill for the sheen to cross. */
.inv-btn-outline::after,
.vf-btn-outline::after,
.inv-btn--quiet::after {
    display: none;
}

/* Quiet: a text link that behaves like a button. The underline is drawn by
   the box shadow, so it can take the accent colour without moving anything. */
.inv-btn--quiet {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    padding-inline: 0;
    color: inherit;
    box-shadow: inset 0 -1px 0 0 color-mix(in srgb, currentColor 32%, transparent);
}

.inv-btn--quiet:hover,
.inv-btn--quiet:focus-visible {
    transform: none;
    color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
    box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}

/* Ghost: a glass surface that belongs on a photograph or a dark panel. */
.inv-btn--ghost {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 26%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.inv-btn--ghost:hover {
    background: color-mix(in srgb, currentColor 15%, transparent);
    border-color: color-mix(in srgb, currentColor 44%, transparent);
}

/* The arrow turns 45° up on hover — the "opens this" gesture — and travels a
   little with it. One rule for every button on the site, so the CTA, the hero,
   the header and the footer all answer a pointer the same way. */
.inv-btn svg,
.vf-btn svg {
    transition: transform var(--inv-btn-arrow-dur, calc(var(--inv-motion, 400ms) * 0.9)) var(--inv-ease);
}

.inv-btn:hover svg,
.inv-btn:focus-visible svg,
.vf-btn:hover svg,
.vf-btn:focus-visible svg {
    transform: translate(3px, -3px) rotate(-45deg);
}

/* The label rolls up and the same label arrives from below.
 *
 * The markup is <span class="txt-anim"><span class="txt-anim__inner"
 * data-text="…">…</span></span>; the copy underneath is the ::after, drawn
 * from data-text, so there is one string in the document and one to translate.
 *
 * GSAP takes this over where the header wires it and marks those with
 * data-gsap-roll. Everything it did not claim runs here — which used to be
 * nothing at all, because the fallback was switched off for the whole document
 * the moment GSAP loaded. */
.txt-anim__inner:not([data-gsap-roll]) {
    transition: transform var(--inv-btn-roll-dur, 520ms) var(--inv-ease);
}

.inv-btn:hover .txt-anim__inner:not([data-gsap-roll]),
.inv-btn:focus-visible .txt-anim__inner:not([data-gsap-roll]),
.vf-btn:hover .txt-anim__inner:not([data-gsap-roll]),
.vf-btn:focus-visible .txt-anim__inner:not([data-gsap-roll]) {
    transform: translateY(-130%);
}

@media (prefers-reduced-motion: reduce) {
    .inv-btn svg,
    .vf-btn svg,
    .txt-anim__inner { transition: none; }

    .inv-btn:hover svg,
    .vf-btn:hover svg { transform: none; }

    .inv-btn:hover .txt-anim__inner,
    .vf-btn:hover .txt-anim__inner { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .inv-btn::after,
    .vf-btn::after { display: none; }
    .inv-btn, .vf-btn { transition: none; }
}

/* =============================================================
   Button styles

   One switch in "Design-Grundlagen → Form & Tiefe" decides how every
   button on the site is finished, and a section may override it for
   its own. The class lands on <body> (global) or on the section, and
   the modifier below is what each one resolves to.

     solid    the filled panel button — the theme's default
     glass    the header's "Termin buchen": accent gradient under a
              blur, a lit top edge and a soft glow around it
     outline  hairline and transparent, filling on hover
     soft     a low-contrast tint of the accent, no border

   Glass is written once here rather than copied out of
   header-actions.css, so the header CTA, the hero's buttons and the
   section buttons cannot drift apart again.
   ============================================================= */

.inv-btn--glass,
.inv-btnstyle-glass .inv-btn:not(.inv-btn--plain),
.inv-btnstyle-glass .vf-btn:not(.inv-btn--plain),
.vf-btnstyle-glass .inv-btn:not(.inv-btn--plain),
/* --inv-btn-ink first, everywhere a style sets a colour.
 *
 * A style rule like `.vf-btnstyle-glass .vf-btn` carries three classes; a
 * section's own `.vf-cta-btn--primary` carries one. So the moment a section
 * chose a button style, its "Textfarbe im Button" setting lost the cascade and
 * did nothing at all — the control moved and the button did not.
 *
 * Each section maps its own ink onto --inv-btn-ink on its root. Unset, the
 * mapping is invalid and drops out, and the style's own colour applies. */
.vf-btnstyle-glass .vf-btn:not(.inv-btn--plain) {
    /* --inv-btn-bg ist zur Flaeche, was --inv-btn-ink zur Schrift ist: eine
       Sektion legt ihre eigene Farbe darauf, und ohne sie faellt die Regel auf
       das zurueck, was der Stil von sich aus mitbringt. */
    background: var(--inv-btn-bg, linear-gradient(
        135deg,
        rgba(var(--inv-accent-rgb, 36, 169, 179), .45) 0%,
        rgba(var(--inv-accent-rgb, 36, 169, 179), .22) 100%));
    /* currentColor, nicht --inv-fg.
     *
     * Glas ist durchscheinend: was darunter liegt, bestimmt die lesbare
     * Schrift. Als Zahl stand hier die dunkle Textfarbe der Seite — und der
     * Abschnitt-Knopf steht im Auslieferungszustand auf der anthrazitfarbenen
     * Kapsel des CTA-Abschnitts. Gemessen am 08.10.2026: Kontrast 1,01:1, die
     * Beschriftung war unsichtbar. currentColor nimmt die Schriftfarbe der
     * Umgebung — auf der dunklen Kapsel Weiss, 7,86:1, auf hellem Grund
     * weiterhin die dunkle Textfarbe. */
    color: var(--inv-btn-ink, var(--inv-btn-glass-ink, currentColor));
    border: 1px solid rgba(var(--inv-accent-rgb, 36, 169, 179), .55);
    border-top: 1.5px solid rgba(255, 255, 255, .7);
    box-shadow:
        0 4px 16px -2px rgba(var(--inv-accent-rgb, 36, 169, 179), .35),
        0 0 14px rgba(var(--inv-accent-rgb, 36, 169, 179), .22),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    backdrop-filter: blur(16px) saturate(190%);
}

.inv-btn--glass:hover,
.inv-btnstyle-glass .inv-btn:not(.inv-btn--plain):hover,
.inv-btnstyle-glass .vf-btn:not(.inv-btn--plain):hover,
.vf-btnstyle-glass .inv-btn:not(.inv-btn--plain):hover,
.vf-btnstyle-glass .vf-btn:not(.inv-btn--plain):hover {
    background: linear-gradient(
        135deg,
        rgba(var(--inv-accent-rgb, 36, 169, 179), .58) 0%,
        rgba(var(--inv-accent-rgb, 36, 169, 179), .32) 100%);
    border-color: rgba(var(--inv-accent-rgb, 36, 169, 179), .7);
}

.inv-btn--outline,
.inv-btnstyle-outline .inv-btn:not(.inv-btn--plain),
.inv-btnstyle-outline .vf-btn:not(.inv-btn--plain),
.vf-btnstyle-outline .inv-btn:not(.inv-btn--plain),
.vf-btnstyle-outline .vf-btn:not(.inv-btn--plain) {
    background: var(--inv-btn-bg, transparent);
    color: var(--inv-btn-ink, var(--inv-fg, #0f172a));
    border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 22%, transparent);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.inv-btn--outline:hover,
.inv-btnstyle-outline .inv-btn:not(.inv-btn--plain):hover,
.inv-btnstyle-outline .vf-btn:not(.inv-btn--plain):hover,
.vf-btnstyle-outline .inv-btn:not(.inv-btn--plain):hover,
.vf-btnstyle-outline .vf-btn:not(.inv-btn--plain):hover {
    background: color-mix(in srgb, var(--inv-accent, #24a9b3) 12%, transparent);
    border-color: var(--inv-accent, #24a9b3);
    color: var(--inv-btn-ink, var(--inv-fg, #0f172a));
}

.inv-btn--soft,
.inv-btnstyle-soft .inv-btn:not(.inv-btn--plain),
.inv-btnstyle-soft .vf-btn:not(.inv-btn--plain),
.vf-btnstyle-soft .inv-btn:not(.inv-btn--plain),
.vf-btnstyle-soft .vf-btn:not(.inv-btn--plain) {
    background: var(--inv-btn-bg, color-mix(in srgb, var(--inv-accent, #24a9b3) 16%, transparent));
    color: var(--inv-btn-ink, var(--inv-fg, #0f172a));
    border: 1px solid transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.inv-btn--soft:hover,
.inv-btnstyle-soft .inv-btn:not(.inv-btn--plain):hover,
.inv-btnstyle-soft .vf-btn:not(.inv-btn--plain):hover,
.vf-btnstyle-soft .inv-btn:not(.inv-btn--plain):hover,
.vf-btnstyle-soft .vf-btn:not(.inv-btn--plain):hover {
    background: color-mix(in srgb, var(--inv-accent, #24a9b3) 26%, transparent);
}

/* The quiet secondary — a text link, not a second filled box — keeps its own
   treatment whichever style is chosen. */
.inv-btnstyle-glass .inv-btn--quiet,
.inv-btnstyle-outline .inv-btn--quiet,
.inv-btnstyle-soft .inv-btn--quiet,
.vf-btnstyle-glass .inv-btn--quiet,
.vf-btnstyle-outline .inv-btn--quiet,
.vf-btnstyle-soft .inv-btn--quiet {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .inv-btn--glass,
    .inv-btnstyle-glass .inv-btn,
    .vf-btnstyle-glass .inv-btn {
        transition: none;
    }
}


/* -------------------------------------------------------------
   Der Knopf auf Tablett und Telefon

   Die drei Werte darüber standen fest im Stylesheet: derselbe Knopf bei
   1280, 768 und 390 px, gemessen am 06.10.2026. Jetzt sind sie
   einstellbar, und zwar je Gerät — darum liest jeder Medienblock
   `var(--x-mob, var(--x-tab, <Entwurfswert>))`: ein Wert in einem
   Medienblock schlägt jede Variable, und der Entwurfswert bleibt der
   letzte Rückfall, damit sich ohne Einstellung nichts ändert.

   Die Vorgaben werden kleiner, nicht beliebig klein: 13px Schrift mit
   10px Abstand ergibt 33px Höhe und bleibt damit über den 24px, die
   WCAG 2.5.8 als Mindestziel verlangt.
   ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .vf-btn {
        font-size: var(--inv-btn-size-tab, .875rem);
        padding: var(--inv-btn-py-tab, .6875rem) var(--inv-btn-px-tab, 1.25rem);
    }
}

@media (max-width: 640px) {
    .vf-btn {
        font-size: var(--inv-btn-size-mob, var(--inv-btn-size-tab, .8125rem));
        padding:
            var(--inv-btn-py-mob, var(--inv-btn-py-tab, .625rem))
            var(--inv-btn-px-mob, var(--inv-btn-px-tab, 1.125rem));
    }
}


/* ── cards.css ── */
/* =============================================================
   Inverta Theme — Cards (.inv-card)
   ============================================================= */

.inv-card,
.vf-card {
    background: var(--inv-surface);
    border: var(--inv-border-w, 1px) solid var(--inv-border);
    border-radius: var(--inv-radius-xl);
    padding: 1.75rem;
    box-shadow: var(--inv-shadow-card);
    transition: border-color .2s var(--inv-ease), box-shadow .2s var(--inv-ease), transform .2s var(--inv-ease);
}

.inv-card:hover,
.vf-card:hover {
    border-color: var(--inv-fg);
    box-shadow: var(--inv-shadow-elegant);
}


/* ── forms.css ── */
/* =============================================================
   Inverta — Forms & Inputs
   ============================================================= */

.vf-form-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .vf-form-row.vf-two-col {
        grid-template-columns: 1fr 1fr;
    }
}

.vf-field {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.vf-label {
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--inv-muted-fg);
}

.vf-input,
.vf-select,
.vf-textarea {
    background: var(--inv-muted);
    /* Rahmenstärke aus den Design-Grundlagen: das Kurzschreiben stand hier mit
       fester 1px und hat die Regel in base/section-chrome.css, die genau diese
       Felder nennt, wieder zurückgesetzt. */
    border: var(--inv-border-w, 1px) solid var(--inv-border);
    border-radius: var(--inv-radius-lg);
    padding: .625rem .875rem;
    color: var(--inv-fg);
    font-size: .9rem;
    font-family: inherit;
    width: 100%;
    transition: border-color .15s;
    appearance: none;
}

.vf-input:focus,
.vf-select:focus,
.vf-textarea:focus {
    outline: none;
    border-color: var(--inv-primary);
    box-shadow: 0 0 0 3px rgba(224, 123, 48, .15);
}

.vf-textarea {
    resize: vertical;
    min-height: 100px;
}

.vf-select-wrap {
    position: relative;
}

.vf-select-wrap::after {
    content: '▾';
    position: absolute;
    right: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--inv-muted-fg);
    pointer-events: none;
}

.vf-consent-wrap {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-block: 1rem;
}

.vf-consent-wrap input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    margin-top: .15rem;
    accent-color: var(--inv-primary);
    flex-shrink: 0;
}

.vf-consent-label {
    font-size: .8rem;
    color: var(--inv-muted-fg);
    line-height: 1.5;
}

.vf-consent-label a {
    color: var(--inv-primary);
}

.vf-form-error {
    font-size: .8rem;
    color: var(--inv-destructive);
    margin-bottom: .75rem;
}

.vf-form-success {
    text-align: center;
    padding: 2rem;
}

.vf-form-success svg {
    width: 3rem;
    height: 3rem;
    color: var(--inv-primary);
    margin-inline: auto;
}

.vf-form-success h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 1rem;
}

.vf-form-success p {
    color: var(--inv-muted-fg);
    font-size: .9rem;
    margin-top: .5rem;
}

/* -------------------------------------------------------------
   Formulare von Plugins im Seiteninhalt

   Contact Form 7 bringt kein Aussehen mit: seine Felder standen als
   Browser-Vorgabe auf der Seite — 20 px hoch, graue eingedrückte Kante,
   13 px Schrift, „Senden“ als grauer Knopf. Hier bekommen sie dasselbe
   Aussehen wie die Formulare des Themes.

   Alles steht in :where() und hat damit die Spezifität null: ein Plugin,
   das eigene Regeln mitbringt, gewinnt jede Eigenschaft, die es selbst
   setzt. Ausgenommen sind Formulare, die schon ihr eigenes Aussehen haben —
   WooCommerce (auch Germanized, das dessen Klassen trägt, und „In den
   Warenkorb“ per Shortcode als form.cart), die Blöcke von Warenkorb und Kasse, WPForms (unten über seine Variablen), die Suche und
   der Terminkalender.

   16 px Schrift im Feld ist Absicht: darunter vergrößert Safari auf dem
   iPhone die ganze Seite, sobald man ins Feld tippt.
   ------------------------------------------------------------- */
:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(
    input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="search"], [type="date"], [type="time"], [type="datetime-local"]),
    input:not([type]),
    select,
    textarea
) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin-block-start: .375rem;
    padding: .625rem .875rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--inv-fg);
    background-color: var(--inv-muted);
    border: var(--inv-border-w, 1px) solid var(--inv-border);
    border-radius: var(--inv-radius-lg);
    transition: border-color .15s, box-shadow .15s;
}

/* Textfelder ohne Innenschatten von iOS; die Auswahlliste behält ihren
   Pfeil vom Browser. Häkchen und Knöpfe zur Auswahl ausdrücklich nicht —
   ohne ihr Aussehen vom Browser wären sie unsichtbar. */
:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea) {
    appearance: none;
}

:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(textarea) {
    min-height: 8rem;
    resize: vertical;
}

:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(input, select, textarea):focus {
    outline: none;
    border-color: var(--inv-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 18%, transparent);
}

:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(label) {
    font-size: .9rem;
    font-weight: 500;
    color: var(--inv-fg);
}

:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(input:is([type="checkbox"], [type="radio"])) {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    margin-inline-end: .5rem;
    vertical-align: -.2em;
    accent-color: var(--inv-primary);
}

/* Der Knopf zum Absenden sieht aus wie .inv-btn-primary. */
:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(input:is([type="submit"], [type="button"]), button:is([type="submit"], :not([type]))) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--inv-btn-py, .75rem) var(--inv-btn-px, 1.5rem);
    font: inherit;
    font-size: var(--inv-btn-size, .9375rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--inv-primary-fg);
    background: var(--inv-primary);
    border: var(--inv-border-w, 1px) solid transparent;
    border-radius: var(--inv-radius-sm, 10px);
    box-shadow: var(--inv-shadow-glow);
    cursor: pointer;
    transition: background-color .2s, transform .15s;
}

:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(input:is([type="submit"], [type="button"]), button:is([type="submit"], :not([type]))):hover {
    background: var(--inv-btn-hover, var(--inv-primary));
    transform: translateY(calc(var(--inv-hover-lift, 4px) * -0.25));
}

:where(.entry-content) :where(form:not([class*="woocommerce"], [class*="wc-block"], .cart, .wpforms-form, .wp-block-search, .search-form, .inverta-termine form)) :where(input, select, textarea, button):disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Contact Form 7: Pflichtfeld-Hinweis, fehlerhaftes Feld, Antwort nach dem
   Absenden. Seine eigenen Regeln setzen dort nur Farben und einen Rahmen in
   Gelb, Rot oder Grün — die Form kommt von hier. */
:where(.entry-content) .wpcf7-not-valid {
    border-color: var(--inv-destructive);
}

:where(.entry-content) .wpcf7-not-valid-tip {
    margin-block-start: .375rem;
    font-size: .8rem;
    color: var(--inv-destructive);
}

:where(.entry-content) .wpcf7 form .wpcf7-response-output {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    font-size: .9rem;
    border-radius: var(--inv-radius-lg);
}

:where(.entry-content) .wpcf7-list-item {
    margin-inline: 0 1.25rem;
}

/* Ohne „label“ steht der Text einer Auswahl in einem span — sonst in der
   blassen Farbe des Absatzes, neben dem dunklen Text der Häkchen. */
:where(.entry-content) .wpcf7-list-item-label {
    font-size: .9rem;
    color: var(--inv-fg);
}

/* WPForms hat sein eigenes Aussehen, gesteuert über CSS-Variablen, die es
   auf :root mit seinem Blau setzt. Hier stehen sie eine Ebene tiefer mit den
   Farben des Themes. Was jemand im Block von WPForms selbst einstellt,
   schreibt WPForms auf #wpforms-<id> — das ist spezifischer und gewinnt. */
.wpforms-container {
    --wpforms-field-border-radius: var(--inv-radius-lg);
    --wpforms-field-background-color: var(--inv-muted);
    --wpforms-field-border-color: var(--inv-border);
    --wpforms-field-border-color-spare: var(--inv-muted-fg);
    --wpforms-field-text-color: var(--inv-fg);
    --wpforms-field-menu-color: var(--inv-bg, #ffffff);
    --wpforms-label-color: var(--inv-fg);
    --wpforms-label-sublabel-color: var(--inv-muted-fg);
    --wpforms-label-error-color: var(--inv-destructive);
    --wpforms-button-border-radius: var(--inv-radius-sm, 10px);
    --wpforms-button-background-color: var(--inv-primary);
    --wpforms-button-border-color: var(--inv-primary);
    --wpforms-button-text-color: var(--inv-primary-fg);
    --wpforms-page-break-color: var(--inv-primary);
}


/* ── modals.css ── */
/* =============================================================
   Inverta — Modals & Lightboxes
   ============================================================= */

/* Video / Gallery Lightbox Overlay */
#vf-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#vf-lightbox.vf-open {
    display: flex;
}

#vf-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

#vf-lightbox iframe {
    max-width: 90vw;
    max-height: 80vh;
    max-height: 80dvh;
    width: 900px;
    height: 506px;
    border: none;
    border-radius: var(--inv-radius-xl);
}


/* ── breadcrumb.css ── */
/* =============================================================
   Inverta — Breadcrumb
   ============================================================= */

.vf-breadcrumb {
    font-size: .8rem;
    color: var(--inv-muted-fg);
    margin-bottom: 1.5rem;
}

.vf-breadcrumb a {
    color: var(--inv-muted-fg);
    text-decoration: none;
}

.vf-breadcrumb a:hover {
    color: var(--inv-fg);
}

.vf-breadcrumb span::after {
    content: ' / ';
    margin-inline: .25rem;
}

.vf-breadcrumb span:last-child::after {
    content: '';
}

/* WooCommerce faerbt die eigenen Brotkrumen mit
   `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb`
   — zwei Klassen, weil `:where()` nichts zaehlt, gegen die eine von
   `.vf-breadcrumb`. Gemessen am 08.10.2026 gewann #767676: 4,31:1 auf dem
   Seitengrund, unter den 4,5 aus WCAG AA. `.woocommerce` steht dabei auf dem
   <body>, also wird hier angeschrieben und nicht abgesetzt. */
body.woocommerce .vf-breadcrumb,
body.woocommerce-page .vf-breadcrumb,
body.woocommerce .vf-breadcrumb a,
body.woocommerce-page .vf-breadcrumb a {
    color: var(--inv-muted-fg, #64748b);
}

body.woocommerce .vf-breadcrumb a:hover,
body.woocommerce-page .vf-breadcrumb a:hover {
    color: var(--inv-fg, #0f172a);
}


/* ── subsidy.css ── */
/* =============================================================
   Der Förderhinweis

   Ein Kasten, der sagt, dass jemand anderes einen Teil der Rechnung
   bezahlt. Er steht neben einem Preis, also darf er den Preis nicht
   überstimmen: vier Formen von der gerahmten Karte bis zur einzelnen
   Zeile, und keine davon bringt eine eigene Schriftart mit.

   Die Schriftgröße und der Innenabstand sind für Schreibtisch, Tablett
   und Telefon getrennt einstellbar. Darum liest jede Regel in einem
   Medienblock `var(--x-mob, var(--x-tab, <Entwurfswert>))`: ein Wert in
   einem Medienblock schlägt jede Variable, und der Entwurfswert bleibt
   der letzte Rückfall, damit sich ohne Einstellung nichts ändert.
   ============================================================= */

.inv-subsidy {
  --inv-subsidy-ink: var(--inv-fg, #0f172a);
  --inv-subsidy-hue: var(--inv-accent, #24a9b3);

  box-sizing: border-box;
  width: 100%;
  max-width: var(--inv-subsidy-maxw, 100%);
  margin-block: clamp(14px, 2vw, 22px);
  color: var(--inv-subsidy-ink);
  font-family: var(--vf-font-sans, inherit);
  font-size: var(--inv-subsidy-size, 15px);
  line-height: 1.55;
}

.inv-subsidy__inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: var(--inv-subsidy-pad, 20px);
}

.inv-subsidy__body {
  min-width: 0;
  flex: 1 1 auto;
}

.inv-subsidy__icon {
  flex: none;
  font-size: 1.5em;
  line-height: 1.1;
}

.inv-subsidy__badge {
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--inv-subsidy-hue) 76%, var(--inv-subsidy-ink));
  font-size: 0.78em;
  font-weight: 650;
  letter-spacing: var(--inv-subsidy-badge-ls, 0.08em);
  text-transform: uppercase;
}

.inv-subsidy__title {
  margin: 0 0 8px;
  color: var(--inv-subsidy-ink);
  font-family: var(--vf-font-heading, var(--vf-font-sans, inherit));
  font-size: 1.22em;
  font-weight: 650;
  line-height: 1.25;
}

.inv-subsidy__text {
  margin: 0;
  color: color-mix(in srgb, var(--inv-subsidy-ink) 84%, transparent);
}

/* ---- Die Bedingungen als Liste ---- */
.inv-subsidy__points {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.inv-subsidy__point {
  position: relative;
  padding-inline-start: 1.65em;
}

/* Der Haken ist Schmuck, keine Information: er steht in ::before und
   erscheint damit nie in der Vorlesereihenfolge. */
.inv-subsidy__point::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.42em;
  width: 0.72em;
  height: 0.4em;
  border-inline-start: 2px solid var(--inv-subsidy-hue);
  border-bottom: 2px solid var(--inv-subsidy-hue);
  transform: rotate(-45deg);
}

/* ---- oder als Kapseln nebeneinander ---- */
.inv-subsidy--pts-chips .inv-subsidy__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inv-subsidy--pts-chips .inv-subsidy__point {
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--inv-subsidy-hue) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--inv-subsidy-hue) 10%, transparent);
  font-size: 0.92em;
}

.inv-subsidy--pts-chips .inv-subsidy__point::before {
  content: none;
}

/* ---- Der Link ---- */
.inv-subsidy__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 24 px ist das Mindestmaß aus WCAG 2.5.8 für ein Ziel, das man mit dem
     Finger trifft. Der Link steht nicht mitten in einem Satz, also gilt die
     Ausnahme für Links im Fließtext hier nicht. */
  min-height: 24px;
  margin-top: 12px;
  color: color-mix(in srgb, var(--inv-subsidy-hue) 80%, var(--inv-subsidy-ink));
  font-weight: 600;
  text-decoration: none;
}

.inv-subsidy__link .inv-subsidy__link-text {
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

/* Beim Überfahren wird die Farbe dunkler, nicht blasser — derselbe Grundsatz
   wie bei den Knöpfen im Konto. */
.inv-subsidy__link:hover,
.inv-subsidy__link:focus-visible {
  color: color-mix(in srgb, var(--inv-subsidy-hue) 86%, #000);
}

.inv-subsidy__link:hover .inv-subsidy__link-text,
.inv-subsidy__link:focus-visible .inv-subsidy__link-text {
  border-bottom-color: currentColor;
}

.inv-subsidy__arrow {
  width: 1em;
  height: 1em;
  flex: none;
}

.inv-subsidy__note {
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--inv-subsidy-ink) 58%, transparent);
  font-size: 0.82em;
  line-height: 1.5;
}

/* -------------------------------------------------------------
   Die vier Formen
   ------------------------------------------------------------- */

.inv-subsidy--card .inv-subsidy__inner {
  border: 1px solid color-mix(in srgb, var(--inv-subsidy-hue) 30%, transparent);
  border-radius: var(--inv-subsidy-radius, var(--inv-radius, 14px));
  background: color-mix(in srgb, var(--inv-subsidy-hue) 7%, var(--inv-surface, #fff));
  box-shadow: 0 10px 28px -20px color-mix(in srgb, var(--inv-subsidy-hue) 70%, transparent);
}

.inv-subsidy--glass .inv-subsidy__inner {
  border: 1px solid color-mix(in srgb, var(--inv-subsidy-hue) 34%, transparent);
  border-radius: var(--inv-subsidy-radius, var(--inv-radius, 14px));
  background: color-mix(in srgb, var(--inv-subsidy-hue) 14%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 8px 26px -18px color-mix(in srgb, var(--inv-subsidy-hue) 70%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, #fff 50%, transparent);
}

.inv-subsidy--stripe .inv-subsidy__inner {
  border-radius: 0;
  border-inline-start: 3px solid var(--inv-subsidy-hue);
  background: color-mix(in srgb, var(--inv-subsidy-hue) 8%, transparent);
}

.inv-subsidy--plain .inv-subsidy__inner {
  padding-inline: 0;
  border: 0;
  background: none;
}

/* -------------------------------------------------------------
   Die vier Farben

   Nur die Leitfarbe wechselt; alles andere rechnet sich daraus, damit
   keine Kombination entstehen kann, in der Text auf gleich hellem Grund
   steht.
   ------------------------------------------------------------- */

.inv-subsidy--tone-neutral {
  --inv-subsidy-hue: var(--inv-muted-fg, #64748b);
}

.inv-subsidy--tone-warm {
  --inv-subsidy-hue: #b4830f;
}

.inv-subsidy--tone-green {
  --inv-subsidy-hue: #15803d;
}

/* -------------------------------------------------------------
   Wo er steht

   Auf der Seite eines Artikels steht er in der Spalte neben dem Bild und
   darf keinen eigenen Außenabstand nach oben mitbringen: dort sitzt
   schon der Abstand des Knopfes darüber.
   ------------------------------------------------------------- */

.inv-subsidy--at-product {
  margin-block: 14px 4px;
}

.inv-subsidy--at-shop {
  margin-block: 0 clamp(16px, 2.5vw, 26px);
}

.inv-subsidy--at-cart {
  margin-block: 0 clamp(16px, 2.5vw, 26px);
}

/* -------------------------------------------------------------
   Tablett und Telefon

   Ein Kasten, der am Rechner angenehm wirkt, nimmt auf dem Telefon sonst
   den halben Bildschirm — deshalb sind Schrift und Innenabstand hier
   kleiner, und beide Werte sind einstellbar.
   ------------------------------------------------------------- */

@media (max-width: 1024px) {
  .inv-subsidy {
    font-size: var(--inv-subsidy-size-tab, 14px);
  }

  .inv-subsidy__inner {
    padding: var(--inv-subsidy-pad-tab, 17px);
  }
}

@media (max-width: 640px) {
  .inv-subsidy {
    font-size: var(--inv-subsidy-size-mob, var(--inv-subsidy-size-tab, 13.5px));
  }

  .inv-subsidy__inner {
    gap: 10px;
    padding: var(--inv-subsidy-pad-mob, var(--inv-subsidy-pad-tab, 14px));
  }

  .inv-subsidy__icon {
    font-size: 1.25em;
  }

  /* Kapseln, die nebeneinander stehen sollten, stehen auf 360 px
     untereinander — und ein ganzer Satz in einer Kapsel wird zu einem
     Block mit Rahmen. Darum werden aus Kapseln hier wieder Zeilen. */
  .inv-subsidy--pts-chips .inv-subsidy__points {
    display: grid;
  }

  .inv-subsidy--pts-chips .inv-subsidy__point {
    border-radius: var(--inv-subsidy-radius, var(--inv-radius, 10px));
  }
}


/* -------------------------------------------------------------
   03. SHELL & NAVIGATION
   ------------------------------------------------------------- */

/* ── header.css ── */
/* =============================================================
   Inverta Theme — Header & Navigation (Master Importer)
   Modular Architecture for Maintainability & Zero Collisions
   ============================================================= */

/* 1. Design Tokens, CSS Variables & Layout Offsets */

/* ── header-tokens.css ── */
/* =============================================================
   Inverta Theme — Header & Navigation
   Style: Inverta Floating Glass-Pill Bar & Mega-Menu
   ============================================================= */

/* -------------------------------------------------------------
   Design Tokens for Header
   ------------------------------------------------------------- */
:root {
    --color-brand:        var(--inv-primary, #111827);
    --color-brand-ink:    var(--inv-btn-hover, #1e293b);
    --color-brand-soft:   var(--inv-brand-soft, #f1f5f9);
    --color-ink:          var(--inv-fg, #0f172a);
    --color-muted:        var(--inv-muted-fg, #64748b);
    --color-surface:      var(--inv-surface, #ffffff);
    --color-line:         var(--inv-border, #e2e8f0);
    --color-link-hover:   var(--inv-link-hover, #000000);

    /* The header kept a radius scale of its own, disconnected from
       "Design-Grundlagen" — which is why the small rounding reached the
       sections but nothing in the bar. The scale is derived now, and the
       multipliers reproduce the previous numbers exactly at the defaults
       (10 and 16), so nothing moves until the slider does. */
    --radius-pill: 9999px;
    --radius-lg:   var(--inv-radius, 16px);
    --radius-md:   calc(var(--inv-radius-sm, 10px) * 1.2);
    --radius-sm:   var(--inv-radius-sm, 10px);

    --inv-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* The Customizer writes --inv-header-*; the theme keeps its own value as
       the fallback, which is what preserves the smaller header on tablet and
       phone when no custom value is set. Naming them apart is deliberate: a
       custom property defined in terms of itself is discarded outright.

       The side padding resolves in three steps — the header's own value, then
       the site-wide edge distance from "Design-Grundlagen", then the theme's
       own number. That middle step is what keeps the header aligned with the
       section capsules by default while still letting either move alone. */
    --inv-header-bar-h: var(--inv-header-h, 60px);
    --inv-header-bar-pt: var(--inv-header-pt, 10px);
    --inv-header-bar-px: var(--inv-header-px, var(--inv-edge, 10px));
    --inv-hero-gap: 14px; /* Matches the exact spacing between Hero and Brands */
}

@media (max-width: 1024px) {
    :root {
        --inv-header-bar-h: var(--inv-header-h, 54px);
        --inv-header-bar-pt: var(--inv-header-pt, 8px);
        --inv-header-bar-px: var(--inv-header-px, var(--inv-edge, 8px));
        --inv-hero-gap: 12px; /* Matches tablet spacing between Hero and Brands */
    }
}

@media (max-width: 600px) {
    :root {
        --inv-header-bar-h: var(--inv-header-h, 52px);
        --inv-header-bar-pt: var(--inv-header-pt, 6px);
        --inv-header-bar-px: var(--inv-header-px, var(--inv-edge, 6px));
        --inv-hero-gap: 10px; /* Matches mobile spacing between Hero and Brands */
    }
}

/* Offset non-home pages so content is not obscured by the fixed header */
body:not(.home) #inv-content,
body:not(.home) #vf-content {
    padding-top: calc(var(--inv-header-bar-h) + 24px);
}

/* Sprunglink für Screenreader
 *
 * Versteckt durch Zuschneiden, nicht durch Verschieben. `left: -9999px` stand
 * hier und kostete die Seite auf Arabisch oder Hebräisch zehntausend Pixel
 * Rollfläche: in einem Dokument mit dir="rtl" zählt ein Kasten links außerhalb
 * zum scrollbaren Bereich, und die Seite ließ sich seitwärts schieben —
 * gemessen 11440 px bei 1440 px Fenster, auf jeder Seite.
 *
 * Im Fokus erscheint er in der Ecke, an der zu lesen begonnen wird: dafür
 * inset-inline-start statt left, sonst stünde er auf Arabisch links und der
 * Text begänne rechts.
 */
.inv-skip {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    z-index: 200;
}

.inv-skip:focus {
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;

    inset-block-start: 16px;
    inset-inline-start: 16px;

    padding: 10px 16px;
    background: var(--color-ink);
    color: #fff;
    border-radius: var(--radius-sm);
}



/* 2. Floating Glass-Pill Bar, Grain Animation & Logo */

/* ── header-bar.css ── */
/* -------------------------------------------------------------
   Fixed Glass-Pill Floating Header
   ------------------------------------------------------------- */
@keyframes invGrainBgJitter {0%   { background-position: 0 0; }

20%  { background-position: -40px 30px; }

40%  { background-position: 25px -35px; }

60%  { background-position: -50px -20px; }

80%  { background-position: 30px 45px; }

100% { background-position: 0 0; }
}

.inv-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000000 !important;
    padding: var(--inv-header-bar-pt) var(--inv-header-bar-px) 0 !important;
    pointer-events: none;
    transition: padding 0.35s var(--inv-ease);
}

.inv-header[data-scrolled],
.inv-header.inv-scrolled {
    padding-top: var(--inv-header-bar-pt) !important;
}

/* Initial State: Authentic Frosted Glass Capsule with Grain (Identical to Cart Drawer) */
.inv-header__bar {
    position: relative;
    pointer-events: auto;
    max-width: min(var(--inv-header-max-w, 100%), var(--inv-shell-max, 100%));
    width: 100%;
    margin: 0 auto;
    height: var(--inv-header-bar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-radius: var(--inv-header-radius, 20px);
    /* Kante und Flaeche aus der Palette, nicht als Zahl.
     *
     * `rgba(15,23,42,.1)` ist `--inv-fg` im Auslieferungszustand zu 10 %, und
     * `rgba(255,255,255,.88)` weiter unten ist `--inv-surface` zu 88 %. Als
     * Zahlen geschrieben blieb die Kapsel weiss, wenn eine Stil-Vorlage die
     * Website dunkel machte: gemessen am 08.10.2026 mit „Dunkel" — Dokument
     * auf rgb(10,15,26), Kapsel weiter auf Weiss. Die Mischungen ergeben bei
     * der Standardpalette genau dieselben Zahlen, es aendert sich also nichts,
     * bis jemand die Palette wechselt.
     *
     * Die obere Kante bleibt weiss: das ist der Glanz auf dem Glas, und der
     * ist auf einer dunklen Flaeche genauso richtig wie auf einer hellen. */
    border: var(--inv-border-w, 1px) solid color-mix(in srgb, var(--inv-fg, #0f172a) 10%, transparent);
    border-top: 1px solid rgba(255, 255, 255, 0.95);
    padding: 0 18px;
    box-shadow: var(--inv-shadow-capsule);
    -webkit-backdrop-filter: blur(var(--inv-header-blur, 32px)) saturate(190%) contrast(104%);
    backdrop-filter: blur(var(--inv-header-blur, 32px)) saturate(190%) contrast(104%);
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(135deg,
            var(--inv-header-bg, color-mix(in srgb, var(--inv-surface, #fff) 88%, transparent)) 0%,
            var(--inv-header-bg, color-mix(in srgb, var(--inv-surface, #fff) 72%, transparent)) 100%);
    background-size: 160px 160px, 100% 100%;
    background-repeat: repeat, no-repeat;
    overflow: visible;
    transition: background 0.35s var(--inv-ease), border-color 0.35s var(--inv-ease), box-shadow 0.35s var(--inv-ease), backdrop-filter 0.35s var(--inv-ease), -webkit-backdrop-filter 0.35s var(--inv-ease), transform 0.35s var(--inv-ease);
}


/* Scrolled State: Maintain pristine frosted glass capsule */

.inv-header[data-scrolled] .inv-header__bar,
.inv-header.inv-scrolled .inv-header__bar {
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(135deg,
            var(--inv-header-bg, color-mix(in srgb, var(--inv-surface, #fff) 92%, transparent)) 0%,
            var(--inv-header-bg, color-mix(in srgb, var(--inv-surface, #fff) 78%, transparent)) 100%) !important;
    /* Die Unschaerfe stand hier als Zahl, und zwar mit !important auf einem
       spezifischeren Selektor als die Regel darueber. Gemessen am 09.10.2026:
       "Glas-Unschaerfe" wirkte, solange die Seite oben stand, und war ab dem
       ersten Scrollen wirkungslos — der Header behielt 32px, was der Regler
       auch sagte. Aufgefallen ist es auf der Kasse, weil die Seite dort schon
       gescrollt geladen wird; betroffen war jede Seite. */
    backdrop-filter: blur(var(--inv-header-blur, 32px)) saturate(190%) contrast(104%) !important;
    -webkit-backdrop-filter: blur(var(--inv-header-blur, 32px)) saturate(190%) contrast(104%) !important;
    border: var(--inv-border-w, 1px) solid color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 
        0 2px 6px -1px rgba(15, 23, 42, 0.06),
        0 12px 32px -4px rgba(15, 23, 42, 0.14),
        0 24px 50px -10px rgba(15, 23, 42, 0.1),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Modifier: Header Grain Disabled */
.inv-header--no-grain .inv-header__bar::before,
.inv-header--no-grain .inv-mega::before,
.inv-header.inv-header--no-grain .inv-header__bar::before,
.inv-header.inv-header--no-grain .inv-mega::before {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

/* Modifier: Bottom Border Line Header (Classic line instead of capsule) */
.inv-header.inv-header--border-line {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.inv-header.inv-header--border-line .inv-header__bar {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 clamp(16px, 4vw, 40px);
}

.inv-header.inv-header--border-line[data-scrolled] .inv-header__bar,
.inv-header.inv-header--border-line.inv-scrolled .inv-header__bar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--color-line) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Modifier: Sticky Header Disabled */
.inv-header.inv-no-sticky,
#inv-header.inv-no-sticky,
#vf-header.inv-no-sticky {
    position: absolute !important;
}

/* WordPress Admin Bar Compatibility
 *
 * One token rather than two literals, so everything that has to clear the
 * admin bar — this header, the mobile drawer, a pinned section — reads the
 * same number, and the 782px breakpoint where the bar grows to 46px is
 * described in one place (base/section-chrome.css). */
body.admin-bar .inv-header {
    top: var(--vf-adminbar-h, 32px) !important;
}

/* Und unter der Adminleiste, nicht darüber.
 *
 * WordPress zeichnet #wpadminbar auf z-index 99999. Der Header stand auf einer
 * Million — die Klappmenüs der Adminleiste fielen also hinter das Glas des
 * Headers und waren ab der zweiten Zeile nicht mehr zu sehen. Betroffen ist nur,
 * wer angemeldet ist; für Besucher ändert sich nichts, weil body.admin-bar bei
 * ihnen gar nicht steht. */
body.admin-bar .inv-header {
    z-index: 99990 !important;
}

/* Der seitliche Abstand stand hier ein zweites Mal — Zeichen fuer Zeichen
   dasselbe wie in header-custom.css, wo der Kommentar daneben die Einstellung
   erklaert. Zwei gleiche Regeln mit !important: wer eine von ihnen aendert,
   aendert nichts, weil die andere weiter gilt. Jetzt steht sie nur dort.

   Ganz weg kann sie nicht: `.inv-header.inv-header--full` ist spezifischer als
   `.inv-header--border_line`, das `padding-left: 0 !important` setzt. Ohne den
   zweiten Selektor wuerde die Variante "Linie" bei voller Breite den Abstand
   auf 0 ziehen — eine andere Website als heute. Dasselbe gilt fuer `max-width`
   im Absatz darunter. */

/* `max-width` der vollen Breite stand hier ein zweites Mal — mit !important
   und auf einem spezifischeren Selektor als in header-custom.css, wo dasselbe
   steht. Es hat also nicht die Datei gewonnen, die zuletzt lädt, sondern diese;
   die Regel dort war dekorativ. Jetzt gibt es sie nur einmal, und der Deckel
   der Seite kommt an. */

/* Modifier: Header Position Below Hero
 *
 * „Unter dem Hero-Bereich" war bis zum 08.10.2026 `position: relative`. Die
 * Kopfzeile steht aber am Anfang des Dokuments, nicht hinter dem Hero — sie
 * nahm mit `relative` also oben Platz im Fluss ein, und zwar zusaetzlich zu
 * dem Platz, den der Hero fuer eine schwebende Kopfzeile ohnehin freilaesst.
 * Zwischen Kopfzeile und Hero-Karte lagen dadurch 108 px statt 14. Nach 20 px
 * Scrollen schreibt header.js `data-scrolled`, die Kopfzeile wurde `fixed`,
 * ihre 94 px fielen aus dem Fluss — und die Seite sprang. Gemeldet von der
 * Person, die die Theme testet; nachgemessen: 108 px Luecke, 94 px Sprung.
 *
 * `absolute` loest beides mit einem Wort. Ein absolut positioniertes Element
 * nimmt keinen Platz im Fluss ein, es gibt also nichts, was beim Wechsel zu
 * `fixed` wegfallen koennte — der Sprung ist weg. Und `top` am unteren Rand des
 * ersten Bildschirms stellt die Kopfzeile dorthin, wo die Einstellung sie
 * verspricht: unter den Hero statt darueber.
 *
 * Der Platz dafuer kommt aus dem Hero selbst — sections/hero.css tauscht in
 * dieser Betriebsart den oberen Innenabstand gegen einen unteren. Beide Seiten
 * rechnen mit denselben Marken, damit die Kapsel genau in der Luecke sitzt.
 */
body.home .inv-header.inv-header-below-hero:not([data-scrolled]),
body.home .inv-header.inv-header-pos-below_hero:not([data-scrolled]) {
    position: absolute !important;
    /* svh, nicht vh — derselbe Grund wie beim Hero: die Adressleiste eines
       Telefons soll die Kopfzeile nicht bei jedem Frame verschieben. Die vh-
       Zeile darueber ist der Rueckfall fuer aeltere Browser. */
    /* Der eigene obere Innenabstand faellt weg und wandert in `top`: so ist
       der Abstand zum unteren Bildschirmrand genau derselbe, den die Kapsel
       oben hat, wenn sie oben steht — und nicht der Randabstand der
       Sektionen, der auf dem Telefon 0 sein kann. */
    padding-top: 0 !important;
    top: calc(100vh  - var(--inv-header-bar-h) - var(--inv-header-bar-pt)) !important;
    top: calc(100svh - var(--inv-header-bar-h) - var(--inv-header-bar-pt)) !important;
    margin-bottom: 0;
}

body.home .inv-header.inv-header-below-hero[data-scrolled],
body.home .inv-header.inv-header-below-hero.inv-scrolled,
body.home .inv-header.inv-header-pos-below_hero[data-scrolled],
body.home .inv-header.inv-header-pos-below_hero.inv-scrolled {
    position: fixed !important;
    top: 0 !important;
    padding-top: 10px;
}

/* -------------------------------------------------------------
   Logo & Site Identity
   ------------------------------------------------------------- */
.inv-logo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-ink);
    flex-shrink: 0;
}

.inv-logo a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.inv-logo img,
.inv-logo .custom-logo {
    height: var(--inv-logo-h, 44px);
    width: auto;
    object-fit: contain;
    display: block;
}

.inv-logo__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.inv-logo__tagline {
    font-size: 11px;
    color: var(--color-muted);
    margin-left: 6px;
    display: block;
}


/* 3. Desktop Navigation, Rolling Text Animation & Chevrons */

/* ── header-nav.css ── */
/* -------------------------------------------------------------
   Desktop Navigation
   ------------------------------------------------------------- */
.inv-nav {
    display: none;
    align-items: center;
    position: static;
    z-index: 1;
}

@media (min-width: 992px) {
    .inv-nav {
        display: flex;
    }
}

.inv-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    position: static;
}

.inv-nav__item {
    position: relative;
}

/* Mega-Menu item MUST be static so the mega-panel expands to the full width of .inv-header__bar */
.inv-nav__item[data-mega],
[data-mega] {
    position: static !important;
}

.inv-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 14.5px;
    font-weight: 550;
    /* Die Farbe der Website, nicht eine Farbe.
     *
     * Hier stand `#0f172a` als Zahl — und `#000000` beim Zeigen. Beides ist
     * genau der Auslieferungszustand der Palette, nur eben festgenagelt: wer
     * eine Stil-Vorlage waehlte, bekam Anthrazit-Schrift auch dann, wenn die
     * Kapsel darunter dunkel wurde. Gemessen am 08.10.2026 mit der Vorlage
     * „Dunkel": alles andere drehte, die Menue-Schrift blieb auf
     * rgb(15,23,42) — schwarz auf Nacht. `--color-ink` loest sich zu
     * `var(--inv-fg, #0f172a)` auf (siehe header-tokens.css), also zur
     * gleichen Zahl, solange niemand etwas anderes waehlt.
     *
     * `--inv-nav-ink` davor, damit die Leiste eine eigene Schriftfarbe haben
     * kann: „Header → Menü-Links → Textfarbe". */
    color: var(--inv-nav-ink, var(--color-ink, #0f172a));
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.2s var(--inv-ease), background-color 0.2s var(--inv-ease), border-color 0.2s var(--inv-ease);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
}

.inv-nav__link:hover,
.inv-nav__link.inv-active {
    color: var(--inv-nav-ink-hover, var(--color-link-hover, #000));
    background: var(--inv-nav-hover-bg, transparent);
    border-color: transparent;
    text-decoration: none;
}

/* -------------------------------------------------------------
   Text Rolling Animation Effect
   ------------------------------------------------------------- */
.txt-anim {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 1.4em;
    /* The window is 1.4em tall, so the line inside it has to be 1.4em too.
       Without this the line-height came from whatever carried the label — a
       chip sets `line-height: 1` — and a 1em line sat at the top of a 1.4em
       window: the word rode visibly high in the chip and looked as though it
       lifted on hover, when in truth it had never been centred. The roll needs
       the two to agree as well, because `top: 130%` on the ::after and
       `translateY(-130%)` on the inner are both measured against this line. */
    line-height: 1.4em;
    vertical-align: middle;
}

.txt-anim__inner {
    display: block;
    position: relative;
    transform: translateY(0);
    will-change: transform;
}

.txt-anim__inner::after {
    content: attr(data-text);
    position: absolute;
    top: 130%;
    left: 0;
    width: 100%;
    white-space: nowrap;
}

/* The CSS roll, for anything GSAP did not take over.
 *
 * This used to be gated on html:not(.js-gsap) — a class added the moment GSAP
 * loaded — so on the front page the fallback was off for the whole document
 * while GSAP only ever wired a fixed list of selectors. Any other .txt-anim
 * simply did not move. The marker now sits on the elements GSAP actually
 * claimed, so the two never overlap and nothing is left unanimated. */
.inv-nav__link:hover .txt-anim__inner:not([data-gsap-roll]),
.inv-cta:hover .txt-anim__inner:not([data-gsap-roll]),
.inv-mega__row:hover .txt-anim__inner:not([data-gsap-roll]),
.inv-mega__all:hover .txt-anim__inner:not([data-gsap-roll]) {
    transform: translateY(-130%);
}

.inv-chevron {
    width: 15px;
    height: 15px;
    transition: transform 0.3s var(--inv-ease);
}

[data-mega][data-open] .inv-chevron,
.inv-acc__trigger[aria-expanded="true"] .inv-chevron {
    transform: rotate(180deg);
}


/* =============================================================
   Dropdowns

   The nav walker has emitted <ul class="inv-dropdown"> for a
   submenu since the theme was written, and nothing in the
   stylesheet ever matched it. On the site this theme was built
   for the menu had no submenus, so nobody saw it. On a menu that
   has them, every submenu rendered as a bare bulleted list at
   full height, laid over the page — the header appeared to
   explode and the sections underneath looked empty because a
   column of menu links was sitting on top of them.

   The panel copies the mega-menu's material so the two read as
   one system, at the width of its own item rather than the bar.
   ============================================================= */
/* The item goes static, like the mega-menu's, so its panel can measure itself
   against the header bar rather than against the link. That is what lets the
   panel run the full width of the bar instead of hanging under one word. */
.inv-nav__item.inv-has-dropdown {
  position: static;
}

.inv-dropdown {
  position: absolute;
  top: calc(100% + var(--inv-mega-gap, 14px));
  left: 0;
  right: 0;
  width: 100%;
  z-index: 30;

  display: flex;
  align-items: stretch;
  gap: var(--inv-mega-pad, 16px);

  margin: 0;
  padding: var(--inv-mega-pad, 16px);

  /* The header's own material: the same grain over the same frosted glass.
     A flat white sheet under a frosted bar reads as two different surfaces. */
  border: 1px solid rgba(15, 23, 42, .1);
  border-top: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent);
  border-radius: var(--radius-lg);
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    linear-gradient(135deg,
      var(--inv-header-bg, color-mix(in srgb, var(--inv-surface, #fff) 94%, transparent)) 0%,
      var(--inv-header-bg, color-mix(in srgb, var(--inv-surface, #fff) 82%, transparent)) 100%);
  background-size: 160px 160px, 100% 100%;
  background-repeat: repeat, no-repeat;
  box-shadow: var(--inv-shadow-capsule, 0 24px 60px -15px rgba(15, 23, 42, .18));
  -webkit-backdrop-filter: blur(var(--inv-header-blur, 32px)) saturate(190%) contrast(104%);
  backdrop-filter: blur(var(--inv-header-blur, 32px)) saturate(190%) contrast(104%);
  /* Und darunter eine deckende Fläche.

     Das Glas oben wirkt hier nicht: die Kopfleiste, in der das Panel steckt,
     trägt selbst einen backdrop-filter, und damit ist sie der Hintergrund,
     den der Browser für das Panel weichzeichnet — nicht die Seite darunter.
     Beim Freund stand „Defekt heute. Funktioniert morgen.“ aus dem Hero
     scharf zwischen den Einträgen von „Mein Konto“ (15.10.2026). Das
     Mega-Menü hatte das Problem nie: es ist weiß. Hier dieselbe Farbe wie
     die Kopfleiste, nur ohne Durchsicht; wo der Browser das nicht rechnen
     kann, die Fläche des Themes. */
  background-color: var(--inv-surface, #fff);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.985);
  transform-origin: top center;
  transition:
    opacity .28s var(--inv-ease),
    transform .28s var(--inv-ease),
    visibility .28s var(--inv-ease);
}

@supports (color: rgb(from red r g b)) {
  .inv-dropdown {
    background-color: rgb(from var(--inv-header-bg, var(--inv-surface, #fff)) r g b);
  }
}

/* ---- the card on the left ---- */
.inv-dropdown__card {
  flex: 0 0 clamp(190px, 22%, 260px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;

  padding: 18px;
  border-radius: var(--radius-md, 14px);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--inv-accent, #24a9b3) 16%, transparent) 0%,
    color-mix(in srgb, var(--inv-primary, #0f172a) 8%, transparent) 100%);
}

.inv-dropdown__card-title {
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--inv-fg, #0f172a);
}

.inv-dropdown__card-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--inv-fg, #0f172a);
  text-decoration: none;
}

.inv-dropdown__card-link svg {
  width: 15px;
  height: 15px;
  transition: transform .28s var(--inv-ease);
}

.inv-dropdown__card-link:hover svg {
  transform: translate(3px, -3px) rotate(-45deg);
}

.inv-dropdown__card-link:hover .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

/* ---- the links, three to a column ---- */
.inv-dropdown__list {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px 10px;
}

/* Four or more columns and the links get too narrow to read; the rows grow
   instead. */
@media (max-width: 1100px) {
  .inv-dropdown__list { grid-template-rows: repeat(4, auto); }
}

@media (max-width: 820px) {
  .inv-dropdown { flex-direction: column; }
  .inv-dropdown__card { flex: 0 0 auto; }
  .inv-dropdown__list { grid-auto-flow: row; grid-template-rows: none; }
}

.inv-dropdown__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inv-dropdown__sub {
  margin: 4px 0 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--inv-border, #e2e8f0);
  list-style: none;
}

/* The bridge across the gap belongs to the panel, not to the item.
 *
 * It used to be an ::after on the <li>. Once the item went position:static so
 * the panel could span the bar, that pseudo-element spanned the bar too — an
 * invisible strip the full width of the header, sitting over the top of the
 * hero. Anything that left the item in a hovered or focused state made the
 * strip live, and then moving the pointer across the hero opened the panel.
 *
 * On the panel it can only exist while the panel does: a hidden panel hides
 * its own generated content, so nothing can be opened by a strip that is not
 * there. */
.inv-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--inv-mega-gap, 14px) + 14px);
}

.inv-nav__item.inv-has-dropdown:hover > .inv-dropdown,
.inv-nav__item.inv-has-dropdown:focus-within > .inv-dropdown,
.inv-nav__item.inv-has-dropdown[data-open] > .inv-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.inv-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 10px);

  color: var(--inv-nav-ink, var(--color-ink, #0f172a));
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;

  transition:
    background-color .24s var(--inv-ease),
    border-color .24s var(--inv-ease),
    transform .24s var(--inv-ease),
    color .24s var(--inv-ease);
}

.inv-dropdown-link:hover,
.inv-dropdown-link:focus-visible {
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 9%, var(--inv-surface, #fff));
  border-color: color-mix(in srgb, var(--inv-accent, #24a9b3) 28%, transparent);
  color: var(--inv-nav-ink-hover, var(--color-link-hover, #000));
}

/* The label rolls over, exactly as it does in the bar above. */
.inv-dropdown-link:hover .txt-anim__inner:not([data-gsap-roll]),
.inv-dropdown-link:focus-visible .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

.inv-dropdown-link .inv-dropdown-arrow {
  width: 16px;
  height: 16px;
}

.inv-dropdown-arrow {
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity .2s var(--inv-ease),
    transform .2s var(--inv-ease);
}

.inv-dropdown-link:hover .inv-dropdown-arrow,
.inv-dropdown-link:focus-visible .inv-dropdown-arrow {
  opacity: .6;
  transform: none;
}

/* The chevron on a top-level item turns over while its panel is open. */
.inv-nav__item.inv-has-dropdown:hover > .inv-nav__link .inv-chevron,
.inv-nav__item.inv-has-dropdown[data-open] > .inv-nav__link .inv-chevron {
  transform: rotate(180deg);
}

.inv-nav__link .inv-chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform .28s var(--inv-ease);
}

@media (prefers-reduced-motion: reduce) {
  .inv-dropdown,
  .inv-dropdown-arrow,
  .inv-nav__link .inv-chevron {
    transition: none;
  }
}


/* 4. Mega-Menu Flyout, Cards, Categories & Quick-Links */

/* ── header-mega.css ── */
/* -------------------------------------------------------------
   Mega Menu
   ------------------------------------------------------------- */
.inv-mega {
    position: absolute;
    /* The distance to the bar is a setting: 0 joins the panel to the header so
       the two read as one surface, and the invisible bridge below shrinks with
       it so the pointer never crosses a dead gap on the way down. */
    top: calc(100% + var(--inv-mega-gap, 14px));
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(10px) scale(.985);
    transform-origin: top center;
    /* Die Fläche der Palette — unter „Standard“ weiß wie bisher; mit
       „Dunkel“ stand hier ein weißes Panel mit heller Schrift. */
    background: var(--color-surface, #ffffff) !important;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 24px 60px -15px rgba(15, 23, 42, 0.18),
        0 36px 90px -25px rgba(15, 23, 42, 0.12),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
    padding: var(--inv-mega-pad, 16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    /* Timed from the site's own motion tokens, so the flyout arrives at the
       same pace as everything else instead of on a number of its own. It
       leaves faster than it comes: a menu that lingers on the way out feels
       stuck, one that lingers on the way in feels considered. */
    transition:
        opacity calc(var(--inv-motion, 400ms) * 0.9) var(--inv-ease, cubic-bezier(.22, .61, .36, 1)),
        transform calc(var(--inv-motion, 400ms) * 1.05) var(--inv-ease, cubic-bezier(.22, .61, .36, 1)),
        visibility calc(var(--inv-motion, 400ms) * 0.9);
    z-index: 90;
}

/* Active Buzzing Film Grain Texture on Mega Menu */
.inv-mega::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    animation: invGrainBgJitter 0.22s steps(4) infinite;
}

/* Hover hit-area bridge to avoid mouseleave when crossing 14px gap */
.inv-mega::after {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: calc(var(--inv-mega-gap, 14px) + 10px);
    pointer-events: auto;
}

/* Opening is driven by the data-open attribute alone.
 *
 * A bare :hover rule opened the panel the instant the pointer crossed the
 * link, which is what made it feel like a flash rather than a reveal — and it
 * fired while the pointer was only passing through on its way somewhere else.
 * header.js waits out a short intent delay before setting the attribute. */
[data-mega][data-open] .inv-mega,
.inv-nav__item[data-mega][data-open] .inv-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* The cards arrive just behind the panel, in order. */
[data-mega][data-open] .inv-mega__cards > * {
    animation: inv-mega-card calc(var(--inv-motion, 400ms) * 1.1) var(--inv-ease, cubic-bezier(.22, .61, .36, 1)) both;
}

[data-mega][data-open] .inv-mega__cards > *:nth-child(2) { animation-delay: 60ms; }
[data-mega][data-open] .inv-mega__cards > *:nth-child(3) { animation-delay: 120ms; }

@keyframes inv-mega-card {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .inv-mega { transition: none; }
    [data-mega][data-open] .inv-mega__cards > * { animation: none; }
}

.inv-mega__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 0.42fr;
    gap: 14px;
}

/* Ohne Einträge rechts gibt es keine rechte Spalte.
 *
 * Die zweite Spalte war fest im Raster, gefüllt wurde sie von fünf Marken, die
 * im Template standen. Wer keine Kategorien und keine eigenen Einträge hat, hätte
 * sonst ein Panel mit einer leeren Hälfte — und das sieht nicht nach "nichts
 * eingetragen" aus, sondern nach kaputt. */
.inv-mega__inner:not(:has(.inv-mega__row)) {
    grid-template-columns: 1fr;
}

.inv-mega__inner:not(:has(.inv-mega__row)) .inv-mega__cards {
    padding-inline-end: 0;
    border-inline-end: 0;
}

.inv-mega__inner:not(:has(.inv-mega__row)) .inv-mega__list {
    flex-direction: row;
    justify-content: flex-end;
}

/* Und ohne Karten links gibt es keine linke Spalte — und kein Panel über die
   ganze Leiste.
 *
 * Die Karten werden im Template nur gedruckt, wenn es welche gibt; fehlen sie,
 * fehlt .inv-mega__cards ganz. Vorher stand die Spalte immer im Raster, also
 * blieb neben den Einträgen eine leere weiße Hälfte stehen — und das Panel zog
 * sich trotzdem über die volle Breite des Headers, weil der Menüpunkt dafür
 * position:static trägt.
 *
 * Mit nur einer Spalte ist das falsch herum: dann gehört das Panel unter seinen
 * eigenen Menüpunkt und nur so breit, wie die Einträge sind. Der Punkt bekommt
 * seinen Positionsrahmen zurück, und das Panel hängt an ihm. */
/* Zwei getrennte :has() nebeneinander, nicht ineinander: ein :has() innerhalb
   eines :has() ist ungültig, und ein ungültiger Selektor wirft die ganze Regel
   weg — sie sah richtig aus und tat nachweislich nichts. */
.inv-nav__item[data-mega]:has(.inv-mega):not(:has(.inv-mega__cards, .inv-mega__inner--links)) {
    position: relative !important;
}

.inv-mega__inner:not(:has(.inv-mega__cards)) {
    grid-template-columns: 1fr;
}

/* Nur die Liste, aber eine lange: zwei Spalten statt einer Säule über
   die halbe Seite. */
.inv-mega__inner:not(:has(.inv-mega__cards)) .inv-mega__list:has(.inv-mega__row:nth-of-type(9)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    column-gap: 8px;
}

.inv-mega__inner:not(:has(.inv-mega__cards)) .inv-mega__list:has(.inv-mega__row:nth-of-type(9)) .inv-mega__all {
    grid-column: 1 / -1;
}

/* In der halben Breite drängt sich der Hinweis an den Namen. */
.inv-mega__inner:not(:has(.inv-mega__cards)) .inv-mega__list:has(.inv-mega__row:nth-of-type(9)) .inv-mega__hint {
    display: none;
}

.inv-mega:not(:has(.inv-mega__cards, .inv-mega__inner--links)) {
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: max-content;
    min-width: 240px;
    max-width: min(560px, calc(100vw - 2 * var(--inv-header-bar-px, 10px)));
}

.inv-mega__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    /* Der Trenner steht zwischen den zwei Hälften des Megamenüs, nicht rechts:
       logisch geschrieben wandert er auf Arabisch mit an die andere Seite. */
    padding-inline-end: 14px;
    border-inline-end: 1px solid var(--color-line);
}

/* .inv-card used to ride along in this selector — a leftover from the prefix
   consolidation, where two different card classes collapsed onto one name. It
   made the mega-menu's card the definition of every card on the site, because
   this file loads after components/cards.css. .inv-mega__card is already on
   every one of these elements, so nothing here looks different. */
.inv-mega__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
    padding: 16px 14px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 0.35s var(--inv-ease), transform 0.35s var(--inv-ease), box-shadow 0.35s var(--inv-ease);
    text-decoration: none;
    color: var(--color-ink);
}

/* -------------------------------------------------------------
   Drei Karten, keine davon mit Bild

   Bis 1.3.2 wurden sie dann flach (nur Name, oben in der Spalte), und unter
   ihnen blieb so viel leer, wie die Liste daneben hoch war — beim Freund
   „nicht schön“. Seit die Liste kurz ist (inc/megamenu-split.php), stehen
   sie so hoch wie die Liste, wie Karten mit Bild, und an der Stelle des
   Bildes steht das Gerät: getönte Fläche, großes Symbol in der Mitte, Name
   unten. Ein Platzhalter, der nach Absicht aussieht, bis jemand im
   Customizer ein Bild wählt.

   Die Klasse setzt das Template, wenn keine einzige Karte ein Bild trägt.
   ------------------------------------------------------------- */
.inv-mega__cards--flat .inv-mega__card {
    min-height: 0;
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--inv-accent, #24a9b3) 12%, var(--color-surface)) 0%,
            var(--color-surface) 72%);
}

.inv-mega__cards--flat .inv-card__icon {
    inset-block: 0;
    inset-inline: 0;
    margin: auto;
    translate: 0 -14px;
    width: 76px;
    height: 76px;
    color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, var(--color-ink));
    opacity: .3;
}

.inv-mega__cards--flat .inv-mega__card:hover .inv-card__icon {
    opacity: .45;
}

.inv-mega__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    color: var(--color-ink);
}

.inv-card--has-img {
    border-color: rgba(255, 255, 255, 0.18);
}

/* 100% Width & Height Background Cover Image */
.inv-card__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
    will-change: transform;
}

.inv-card--has-img:hover .inv-card__bg-img {
    transform: scale(1.08);
}

/* Clean, bright gradient overlay only at the bottom for high contrast text */
.inv-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.0) 0%,
        rgba(0, 0, 0, 0.15) 45%,
        rgba(0, 0, 0, 0.8) 100%
    );
    transition: opacity 0.35s var(--inv-ease);
}

.inv-card--has-img:hover .inv-card__overlay {
    opacity: 0.9;
}

.inv-card__grid {
    position: absolute;
    inset: -30%;
    z-index: -2;
    background-image:
        linear-gradient(to right, var(--color-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--color-line) 1px, transparent 1px);
    background-size: 26px 26px;
    transform: skewY(-12deg) translateY(10px);
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
    mask-image: linear-gradient(225deg, #000, transparent 70%);
    transition: transform 0.4s var(--inv-ease);
}

.inv-mega__card:hover .inv-card__grid,
.inv-card:hover .inv-card__grid {
    transform: skewY(-12deg) translateY(0);
}

.inv-card__glow {
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: radial-gradient(circle at 70% 20%, var(--color-brand), transparent 60%);
    filter: blur(38px);
    opacity: 0;
    transition: opacity 0.4s var(--inv-ease);
}

.inv-mega__card:hover .inv-card__glow,
.inv-card:hover .inv-card__glow {
    opacity: 0.22;
}

/* -------------------------------------------------------------
   Das Symbol auf einer Karte ohne Bild

   Hatte keine einzige Regel. Ein <span> mit einem SVG darin, mitten im
   Flusslayout der Karte: der Browser gab ihm seine Eigengrösse, 280 px,
   und die Karte war damit 357 px hoch — gemessen am 06.10.2026. Was als
   Verzierung gedacht war, bestimmte die Höhe der Karte.

   Jetzt liegt es wie Raster und Schimmer hinter dem Inhalt, oben rechts,
   und hebt sich beim Überfahren ein wenig — dieselbe Bewegung wie die
   beiden anderen.
   ------------------------------------------------------------- */
.inv-card__icon {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    z-index: -1;
    /* 44, nicht 64: eine flache Karte ist 77 px hoch, und ein Symbol von
       64 px darin ist keine Verzierung mehr, sondern der Inhalt. */
    width: 44px;
    height: 44px;
    color: var(--color-ink);
    opacity: .13;
    transition: transform 0.4s var(--inv-ease), opacity 0.4s var(--inv-ease);
    pointer-events: none;
}

.inv-card__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.inv-mega__card:hover .inv-card__icon {
    transform: translateY(-4px);
    opacity: .22;
}

.inv-card__body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inv-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* White readable title on photo cards */
.inv-card--has-img .inv-card__title {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.inv-card__chips,
.inv-mega__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.inv-card__chips span,
.inv-mega__chips span,
.inv-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--color-brand-soft);
    color: var(--color-muted);
    border: 1px solid var(--color-line);
    line-height: 1.2;
}

/* Glassmorphism Chips over Photos */
.inv-card--has-img .inv-card__chips span {
    background: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Right Side Category List */
.inv-mega__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inv-mega__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color 0.2s var(--inv-ease), color 0.2s var(--inv-ease);
}

.inv-mega__row:hover {
    background: var(--inv-nav-hover-bg, transparent);
    color: var(--inv-nav-ink-hover, var(--color-link-hover, #000));
    text-decoration: none;
}

.inv-mega__hint {
    font-size: 11.5px;
    color: var(--color-muted);
    margin-left: auto;
    margin-right: 8px;
}

.inv-arrow {
    width: 14px;
    height: 14px;
    color: currentColor;
    opacity: 0;
    transform: translate(-3px, 3px) rotate(0deg);
    transition: opacity 0.22s var(--inv-ease), transform 0.22s var(--inv-ease), color 0.22s var(--inv-ease);
}

.inv-mega__row:hover .inv-arrow {
    color: var(--color-ink);
    opacity: 1;
    transform: translate(0, 0) rotate(-45deg);
}

.inv-mega__all,
.inv-acc__all.inv-mega__all {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    height: 42px;
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.45) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22) 100%) !important;
    border: 1px solid rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 550;
    letter-spacing: 0;
    color: var(--inv-cta-color, currentColor) !important;
    text-decoration: none;
    box-shadow: 
        0 4px 16px -2px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        0 0 14px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
    backdrop-filter: blur(16px) saturate(190%) !important;
    transition: all 0.25s ease;
    cursor: pointer;
}

.inv-mega__all:hover,
.inv-acc__all.inv-mega__all:hover {
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.65) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35) 100%) !important;
    color: var(--inv-cta-color, currentColor) !important;
    border-color: rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.8) !important;
    border-top-color: #ffffff !important;
    transform: translateY(-1.5px);
    box-shadow: 
        0 6px 22px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55),
        0 0 20px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        inset 0 1.5px 1px 0 #ffffff !important;
    text-decoration: none;
}

.inv-mega__all .inv-arrow {
    opacity: 1;
    transform: rotate(0deg);
    color: var(--inv-cta-color, currentColor) !important;
    width: 15px;
    height: 15px;
    transition: transform 0.25s ease;
}

.inv-mega__all:hover .inv-arrow {
    transform: rotate(-45deg);
    color: var(--inv-cta-color, currentColor) !important;
}

/* Solid Mode for Mega All Button */
.inv-mega__all.inv-cta--solid,
.inv-acc__all.inv-cta--solid {
    background: var(--inv-cta-bg, var(--inv-accent, #24a9b3)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--inv-cta-bg, var(--inv-accent, #24a9b3)) !important;
    box-shadow: 0 4px 14px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.4) !important;
}

.inv-mega__all.inv-cta--solid:hover,
.inv-acc__all.inv-cta--solid:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 18px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
}


/* -------------------------------------------------------------
   Aufbau „Wie Mein Konto“: Karte links, Kategorien in Spalten —
   dieselben Bausteine wie ein gewöhnliches Untermenü (header-nav.css).
   ------------------------------------------------------------- */
.inv-mega__inner--links {
    display: flex;
    align-items: stretch;
    gap: var(--inv-mega-pad, 16px);
}

.inv-mega__links {
    grid-template-rows: repeat(var(--inv-mega-rows, 3), auto);
}




/* 5. Header Actions (Search, Cart Badge, Theme, Account & SVG Burger) */

/* ── header-actions.css ── */
/* -------------------------------------------------------------
   Right Side Header Actions
   ------------------------------------------------------------- */
.inv-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.inv-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    /* Dieselbe Farbe wie die Menue-Links — siehe header-nav.css. */
    color: var(--inv-nav-ink, var(--color-ink, #0f172a));
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    transition: color 0.25s var(--inv-ease), transform 0.25s var(--inv-ease);
    text-decoration: none;
}

.inv-icon-btn:hover {
    background: transparent !important;
    color: var(--inv-nav-ink-hover, var(--color-link-hover, #000));
    text-decoration: none;
}

.inv-icon-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

/* Micro-animations on hover */
.inv-icon-btn:hover svg {
    transform: translateY(-2px) scale(1.12);
}

.inv-cart-btn:hover svg {
    transform: translateY(-2px) rotate(-8deg) scale(1.12);
}

/* Live Cart Badge (scoped to header button) */
.inv-cart-btn .inv-cart-count,
.inv-cart-btn .vf-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    /* --color-brand ist die Primaerfarbe; die Zahl Weiss darauf ergab
       unter einer Vorlage mit heller Primaerfarbe 1,51:1. */
    color: var(--inv-primary-fg, #ffffff);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inv-cart-btn:hover .inv-cart-count,
.inv-cart-btn:hover .vf-cart-count {
    transform: scale(1.22);
}

/* CTA Button */
.inv-cta
/* Glas zeigt, was dahinter liegt: die Schrift des Knopfes nimmt deshalb
   currentColor und nicht die dunkle Textfarbe der hellen Seite. Als Zahl
   geschrieben ergab sie auf einer Nachtseite gemessene 1,07:1
   (08.10.2026). Gilt fuer alle vier Zustaende unten. */ {
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9px 18px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.45) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22) 100%) !important;
    color: var(--inv-cta-color, currentColor) !important;
    font-size: 14.5px !important;
    font-weight: 550;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 
        0 4px 16px -2px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        0 0 14px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
    backdrop-filter: blur(16px) saturate(190%) !important;
    transition: all 0.25s ease;
    cursor: pointer;
}

@media (min-width: 768px) {
    .inv-cta {
        display: inline-flex;
    }
}

.inv-cta:hover {
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.65) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35) 100%) !important;
    color: var(--inv-cta-color, currentColor) !important;
    border-color: rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.8) !important;
    border-top-color: #ffffff !important;
    transform: translateY(-1.5px);
    box-shadow: 
        0 6px 22px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55),
        0 0 20px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        inset 0 1.5px 1px 0 #ffffff !important;
    text-decoration: none;
}

.inv-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.inv-cta--block {
    display: flex;
    width: 100%;
    margin-top: 14px;
    padding: 10px 18px;
    height: 42px;
    font-size: var(--inv-mob-link-size, 15px) !important;
    font-weight: 600;
    letter-spacing: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.45) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22) 100%) !important;
    color: var(--inv-cta-color, currentColor) !important;
    border: 1px solid rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 
        0 6px 20px -2px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        0 0 16px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.25),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
    backdrop-filter: blur(16px) saturate(190%) !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.inv-cta--block:hover {
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.65) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35) 100%) !important;
    color: var(--inv-cta-color, currentColor) !important;
    border-color: rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.8) !important;
    border-top-color: #ffffff !important;
    transform: translateY(-1.5px);
    box-shadow: 
        0 8px 25px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55),
        0 0 22px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.4),
        inset 0 1.5px 1px 0 #ffffff !important;
    text-decoration: none;
}

.inv-cta--block:active {
    transform: translateY(0);
    box-shadow: 0 3px 12px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Strict Text Centering inside CTA buttons */
.inv-cta > span,
.inv-cta--block > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.inv-cta .txt-anim,
.inv-cta--block .txt-anim {
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.inv-cta .txt-anim__inner,
.inv-cta--block .txt-anim__inner {
    text-align: center !important;
    width: 100% !important;
}

.inv-cta .txt-anim__inner::after,
.inv-cta--block .txt-anim__inner::after {
    text-align: center !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* Solid CTA button mode (when glass effect is disabled in customizer) */
.inv-cta.inv-cta--solid,
.inv-cta--block.inv-cta--solid {
    background: var(--inv-cta-bg, var(--inv-accent, #24a9b3)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--inv-cta-bg, var(--inv-accent, #24a9b3)) !important;
    box-shadow: 0 4px 14px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.4) !important;
}

.inv-cta.inv-cta--solid:hover,
.inv-cta--block.inv-cta--solid:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 18px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
}

/* Die zweite, ältere Fassung dieser Regel stand hier — mit dem Akzent als feste
   Zahl statt als --inv-cta-rgb. Sie stand später im Blatt und gewann: wer die
   Farbe des CTA umstellte, bekam beim Drücken trotzdem Türkis. Die Regel
   selbst steht weiter oben, mit der Variablen. */

/* Mobile Burger */
.inv-burger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    color: var(--color-ink);
    z-index: 100000 !important;
    position: relative;
    border-radius: 0 !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

@media (min-width: 992px) {
    .inv-burger {
        display: none;
    }
}

/* -------------------------------------------------------------
   Mikael Ainalem SVG Hamburger to Cross (X) Animation (ham1)
   ------------------------------------------------------------- */
.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 650ms cubic-bezier(0.25, 1, 0.35, 1);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    width: 32px;
    height: 32px;
    pointer-events: none !important;
}

.hamRotate.active,
.inv-burger[aria-expanded="true"] .hamRotate {
    transform: rotate(45deg);
}

.ham .line {
    fill: none;
    transition: stroke-dasharray 650ms cubic-bezier(0.25, 1, 0.35, 1), stroke-dashoffset 650ms cubic-bezier(0.25, 1, 0.35, 1);
    stroke: currentColor;
    stroke-width: 5.5;
    stroke-linecap: round;
}

.ham1 .top {
    stroke-dasharray: 40 139;
}

.ham1 .bottom {
    stroke-dasharray: 40 180;
}

.ham1.active .top,
.inv-burger[aria-expanded="true"] .ham1 .top {
    stroke-dashoffset: -98px;
}

.ham1.active .bottom,
.inv-burger[aria-expanded="true"] .ham1 .bottom {
    stroke-dashoffset: -138px;
}



/* 6. Mobile Dropdown Drawer, Accordions & Tablet/Mobile Responsive */

/* ── header-mobile.css ── */
/* -------------------------------------------------------------
   Mobile Dropdown Capsule: Identical to Brands Glass Capsule
   ------------------------------------------------------------- */
.inv-drawer {
    position: fixed;
    /* The admin bar belongs in this sum. Without it the drawer opened behind
       the header for anyone logged in, and the first menu item was cut off at
       the top — visible to the site's owner and to nobody else, which is the
       worst kind of bug to be told about. */
    top: calc(var(--vf-adminbar-h, 0px) + var(--inv-header-bar-pt) + var(--inv-header-bar-h) + 6px);
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -16px) scale(0.97);
    width: calc(100% - (var(--inv-header-bar-px) * 2)) !important;
    max-width: 100% !important;
    max-height: calc(100vh  - (var(--vf-adminbar-h, 0px) + var(--inv-header-bar-pt) + var(--inv-header-bar-h) + 20px));
    max-height: calc(100dvh - (var(--vf-adminbar-h, 0px) + var(--inv-header-bar-pt) + var(--inv-header-bar-h) + 20px));
    border-radius: var(--inv-mob-radius, 20px) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-top: 1.5px solid color-mix(in srgb, var(--inv-surface, #fff) 100%, transparent) !important;
    box-shadow: 
        0 2px 6px -1px rgba(15, 23, 42, 0.06),
        0 10px 30px -4px rgba(15, 23, 42, 0.10),
        0 20px 45px -10px rgba(15, 23, 42, 0.06),
        inset 0 1.5px 1px 0 color-mix(in srgb, var(--inv-surface, #fff) 100%, transparent) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%) !important;
    backdrop-filter: blur(32px) saturate(190%) contrast(104%) !important;
    background: linear-gradient(135deg, var(--inv-mob-bg, color-mix(in srgb, var(--inv-surface, #fff) 96%, transparent)) 0%, var(--inv-mob-bg, color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent)) 100%) !important;
    z-index: 999998 !important;
    padding: var(--inv-mob-pad-y, 16px) var(--inv-mob-pad-x, 18px) var(--inv-mob-pad-y, 20px) var(--inv-mob-pad-x, 18px) !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top center;
    transition: 
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.inv-drawer[data-open] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
}

/* Staggered smooth reveal for nav links and button */
.inv-drawer .inv-drawer__nav > *,
.inv-drawer .inv-cta--block {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.inv-drawer[data-open] .inv-drawer__nav > *,
.inv-drawer[data-open] .inv-cta--block {
    opacity: 1;
    transform: translateY(0);
}

.inv-drawer[data-open] .inv-drawer__nav > *:nth-child(1) { transition-delay: 0.06s; }

.inv-drawer[data-open] .inv-drawer__nav > *:nth-child(2) { transition-delay: 0.10s; }

.inv-drawer[data-open] .inv-drawer__nav > *:nth-child(3) { transition-delay: 0.14s; }

.inv-drawer[data-open] .inv-drawer__nav > *:nth-child(4) { transition-delay: 0.18s; }

.inv-drawer[data-open] .inv-drawer__nav > *:nth-child(5) { transition-delay: 0.22s; }

.inv-drawer[data-open] .inv-drawer__nav > *:nth-child(6) { transition-delay: 0.26s; }

.inv-drawer[data-open] .inv-drawer__nav > *:nth-child(7) { transition-delay: 0.30s; }

.inv-drawer[data-open] .inv-cta--block { transition-delay: 0.34s; }

/* Header inside drawer is hidden because main header remains in place at top */
.inv-drawer__head {
    display: none !important;
}

.inv-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.inv-drawer__link {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    font-size: var(--inv-mob-link-size, 15px) !important;
    font-weight: 600;
    color: var(--inv-mob-link-color, color-mix(in srgb, var(--inv-fg, #0f172a) 94%, var(--inv-surface, #fff))) !important;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.inv-drawer__link:hover {
    background: rgba(36, 169, 179, 0.12);
    color: var(--inv-mob-link-hover, var(--color-brand, #24a9b3)) !important;
    text-decoration: none;
    transform: translateX(3px);
}

.inv-acc__trigger {
    font-size: var(--inv-mob-link-size, 15px) !important;
    color: var(--inv-mob-link-color, color-mix(in srgb, var(--inv-fg, #0f172a) 94%, var(--inv-surface, #fff))) !important;
}

.inv-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 999990 !important;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.inv-backdrop[data-show] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* -------------------------------------------------------------
   Header Responsive Proportions for Mobile & Tablet
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
.inv-header,
.inv-header.inv-header--full {
        padding: var(--inv-header-bar-pt) var(--inv-header-bar-px) 0 !important;
    }

.inv-header__bar {
        height: var(--inv-header-bar-h) !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        gap: 10px !important;
    }

.inv-logo img,
.inv-logo .custom-logo {
        height: var(--inv-logo-h-mobile, 30px) !important;
        width: auto !important;
        max-width: 125px !important;
    }

.inv-actions {
        gap: 4px !important;
    }

.inv-icon-btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
    }

.inv-icon-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

.inv-cart-btn .inv-cart-count,
.inv-cart-btn .vf-cart-count {
        top: 2px !important;
        right: 2px !important;
        min-width: 15px !important;
        height: 15px !important;
        font-size: 9px !important;
        padding: 0 3px !important;
    }

.inv-burger {
        width: 34px !important;
        height: 34px !important;
        gap: 3.5px !important;
    }

.inv-burger span {
        width: 16px !important;
        height: 1.8px !important;
    }
}

/* Mobile Accordion */
.inv-acc {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.inv-acc__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.inv-acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s var(--inv-ease);
}

.inv-acc__trigger[aria-expanded="true"] + .inv-acc__panel {
    grid-template-rows: 1fr;
}

.inv-acc__panel > div {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-left: 14px;
    gap: 4px;
}

.inv-acc__panel a {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--color-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.inv-acc__panel a:hover {
    color: var(--color-ink);
    background: var(--color-brand-soft);
}

.inv-acc__all {
    font-weight: 600;
    color: var(--color-brand) !important;
}


/* Customizer overrides — must load after every rule they replace. */

/* ── header-custom.css ── */
/* =============================================================
   Inverta — Customizer-driven header rules

   Loaded after every other header stylesheet on purpose: each rule
   below replaces an `!important` declaration that used to be printed
   from PHP, and it has to win against the component defaults it
   overrides. As variables they can be patched live in the preview;
   as printed CSS they could only ever change after a save.
   ============================================================= */

/* Background colour, in both the resting and the scrolled state.

   The bar paints itself with a `background` shorthand: a grain texture over a
   white glass gradient. A `background-color` underneath it was only ever
   visible through that gradient's alpha — and the scrolled state repainted the
   whole shorthand with `!important`, so a chosen colour vanished the moment
   the page moved. That is the "цвет возвращается к дефолтному при скролле".

   The colour is a layer now, not a base. Naming --inv-header-bg as the fallback
   for BOTH gradient stops means: unset, the two stops differ and the original
   frosted gradient is reproduced exactly; set, both stops are the same colour
   and the bar is that colour. One declaration covers both cases. */
/* The rounding, the width and the background now carry their tokens in
   header-bar.css itself, where the bar is built. Repeating them here meant two
   files setting the same property on the same selector, and the settings only
   worked because this file happened to load second. */
/* Der Rückfall ist eine Mischung aus der Palette, keine Zahl.
   `color-mix(in srgb, #0f172a 10%, transparent)` ist genau `rgba(15,23,42,.1)`,
   solange die Textfarbe der Website der Auslieferungszustand ist — es ändert
   sich also nichts, bis jemand die Palette wechselt. Vorher blieb die Kante
   anthrazit, auch wenn die Stil-Vorlage die Website dunkel machte. */
.inv-header__bar {
  border-color: var(--inv-header-border-c, color-mix(in srgb, var(--inv-fg, #0f172a) 10%, transparent));
  border-top-color: var(--inv-header-border-c, rgba(255, 255, 255, 0.95));
}

.inv-header[data-scrolled] .inv-header__bar,
.inv-header.inv-scrolled .inv-header__bar {
  /* The scrolled background carries its token in header-bar.css now; only the
     border colours are this file's. */
  border-color: var(--inv-header-border-c, color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent)) !important;
  border-top-color: var(--inv-header-border-c, rgba(255, 255, 255, 0.95)) !important;
}

/* Grain off means the texture layer goes with it, in both states. */
.inv-header--no-grain .inv-header__bar,
.inv-header--no-grain[data-scrolled] .inv-header__bar {
  background-image: linear-gradient(135deg,
    var(--inv-header-bg, rgba(255, 255, 255, 0.88)) 0%,
    var(--inv-header-bg, rgba(255, 255, 255, 0.72)) 100%) !important;
}

/* No min-width guard on the cap, on purpose: the Customizer preview runs in an
   iframe a few hundred pixels narrower than the screen, so a `min-width: 1025px`
   rule never matched while the slider was being dragged and the option looked
   broken. `width: 100%` keeps the bar in bounds on a narrow screen by itself.
   The cap itself lives on the bar's own rule in header-bar.css. */
.inv-header--full .inv-header__bar {
  /* "Volle Breite" heißt: keine Kapsel-Einrückung — nicht "ohne Grenze".
     Der Deckel der Seite (--inv-shell-max) gilt weiter, sonst stünde das Logo
     auf einem 3440-px-Monitor 1500 px neben der Inhaltsspalte darunter, und
     der Besucher sieht eine Kopfzeile, die zu einer anderen Seite gehört. Wer
     die Leiste wirklich bis zum Rand will, zieht "Maximale Breite der Seite"
     ganz nach rechts — oder nimmt "Randlos" darunter. */
  max-width: var(--inv-shell-max, 100%);
  width: 100%;
}

/* Randlos ist ein Band, kein Element: es gehört an den Bildschirmrand, so wie
   der Hintergrund einer Sektion dort bleibt. Hier gilt der Deckel deshalb
   nicht. */
.inv-header--full.inv-header--edge-flush .inv-header__bar {
  max-width: 100%;
}

/* Distance from the screen edge. 0 puts the header flush against it. */
.inv-header,
.inv-header.inv-header--full {
  padding-left: var(--inv-header-bar-px, 10px) !important;
  padding-right: var(--inv-header-bar-px, 10px) !important;
}

/* Flush against the edge means no rounding and no side border either. */
.inv-header--edge-flush .inv-header__bar {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

.inv-nav__link,
.vf-nav-link,
.vf-nav-btn {
  padding-left: var(--inv-nav-pad-x, 14px);
  padding-right: var(--inv-nav-pad-x, 14px);
}

/* The radius only shows once a hover colour is actually set. */
.inv-nav__link:hover,
.inv-mega__row:hover {
  background-color: var(--inv-nav-hover-bg, transparent);
  border-radius: 8px;
}

.inv-logo img,
.inv-logo .custom-logo,

/* The logo's height carries its token in header-bar.css. */
@media (max-width: 1024px) {
.inv-logo img,

  /* The mobile logo height carries its token in header-mobile.css. */
}

/* CTA: solid variant, previously printed from PHP whenever the option was on. */
.inv-cta--solid,
.inv-cta.inv-cta--solid,
.inv-cta--block.inv-cta--solid {
  background: var(--inv-cta-bg, var(--inv-accent, #24a9b3)) !important;
  border-color: var(--inv-cta-bg, var(--inv-accent, #24a9b3)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 14px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.4) !important;
}

.inv-cta--solid:hover {
  filter: brightness(1.12);
  box-shadow: 0 6px 18px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
}

/* Mobile drawer: full-width variant as a class the preview can swap. */
@media (max-width: 1024px) {
.inv-drawer--fullwidth,
.inv-drawer.inv-drawer--fullwidth {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    transform: translateY(-16px) !important;
  }

.inv-drawer--fullwidth[data-open] {
    transform: translateY(0) !important;
  }
}

/* -------------------------------------------------------------
   Header state classes

   Each block below used to be printed from PHP only while its option
   was on, which meant the preview could turn the look on but never off.
   ------------------------------------------------------------- */

.inv-no-sticky {
  position: absolute !important;
}

.inv-header--no-grain .inv-header__bar::before,
.inv-header--no-grain .inv-mega::before {
  display: none !important;
}

/* Header-Designstil.

   The option's value is `border_line`, and header.php renders it through
   sanitize_html_class(), which keeps the underscore. Only the hyphen spelling
   was ever written here, so the whole setting used to do nothing. Both are
   listed now, so neither spelling can silently miss again.

   The floating capsule needs no rules of its own: it is what the header
   component already is, which is why "capsule" is the default. */
.inv-header--border_line,
.inv-header--border-line {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.inv-header--border_line .inv-header__bar,
.inv-header--border-line .inv-header__bar {
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--inv-header-border-c, var(--inv-border, #e2e8f0)) !important;
  padding-left: clamp(16px, 4vw, 40px) !important;
  padding-right: clamp(16px, 4vw, 40px) !important;
}

/* No breakpoint override of the edge distance here.

   A `@media (min-width: 1025px)` block used to hardcode the side padding of
   the full-width header, which meant "Abstand zum Bildschirmrand" was ignored
   on every desktop screen — and it never even applied, because the rule it was
   fighting carries a higher specificity. The option owns this distance. */

body.home .inv-header-transparent:not([data-scrolled]) .inv-header__bar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}



/* ── cart-drawer.css ── */
/* =============================================================
   Inverta Theme — Flyout Mini-Cart Drawer (Master Importer)
   Modular Architecture for Maintainability & Zero Collisions
   ============================================================= */

/* 1. Base Framework & Layout (Structure, Panel, Header, Items, Stepper, Footer) */

/* ── cart-base.css ── */
/* =============================================================
   Inverta Theme — Flyout Mini-Cart Drawer
   Minimal Awwwards-Level Slide-Out WooCommerce Cart Component
   ============================================================= */

/* -------------------------------------------------------------
   Container & Backdrop Overlay
   ------------------------------------------------------------- */
body.inv-cart-drawer-open {
    overflow: hidden;
}

.inv-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000000 !important;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: visibility 0s 0.44s;
}

/* WordPress Admin Bar Compatibility */
body.admin-bar .inv-cart-drawer {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    /* dvh here: an overlay should fill what is on screen, and the page
       behind it is locked, so nothing reflows while the bar moves. */
    height: calc(100dvh - 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .inv-cart-drawer {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }
}

.inv-cart-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s 0s;
}

.inv-cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.42s cubic-bezier(0.25, 1, 0.5, 1);
}

.inv-cart-drawer.is-open .inv-cart-drawer__backdrop {
    opacity: 1;
}

/* -------------------------------------------------------------
   Sliding Drawer Panel
   ------------------------------------------------------------- */
.inv-cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--inv-cart-width, 440px), 94vw);
    height: 100%;
    background: #ffffff;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
    border-left: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    transform: translate3d(105%, 0, 0);
    will-change: transform;
    transition: transform 0.42s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    overflow: hidden;
}

.inv-cart-drawer.is-open .inv-cart-drawer__panel {
    transform: translate3d(0, 0, 0);
}

/* -------------------------------------------------------------
   Drawer Header
   ------------------------------------------------------------- */
.inv-cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    flex-shrink: 0;
}

.inv-cart-drawer__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--inv-cart-title-color, var(--inv-fg, #0f172a));
    margin: 0;
    letter-spacing: -0.01em;
}

.inv-cart-drawer__close {
    position: relative;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    width: 34px;
    height: 34px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    color: var(--inv-ink-strong, #000000) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transform-origin: center center;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, opacity 0.25s ease;
}

.inv-cart-drawer__close::after {
    content: '';
    position: absolute;
    inset: -8px;
    background: transparent;
    pointer-events: auto;
}

.inv-cart-drawer__close:hover {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--inv-ink-strong, #000000) !important;
    transform: rotate(180deg) scale(1.18);
}

.inv-cart-drawer__close svg {
    width: 20px;
    height: 20px;
    pointer-events: none !important;
}

/* -------------------------------------------------------------
   Cart Content & Items List
   ------------------------------------------------------------- */
.inv-cart-drawer__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #ffffff;
}

.inv-cart-drawer__panel,
.inv-cart-drawer__content,
.inv-cart-drawer__items-wrap,
.inv-cart-drawer__items {
    overflow-x: hidden !important;
}

.inv-cart-drawer__items-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden !important;
    padding: 0 24px;
    -webkit-overflow-scrolling: touch;
}

.inv-cart-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
}

.inv-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #f1f5f9;
    box-sizing: border-box;
    overflow: hidden;
    will-change: transform, opacity, height, margin;
    transition: 
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease,
        height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        margin 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease;
}

.inv-cart-item:last-child {
    border-bottom: none;
}

.inv-cart-item.is-removing {
    opacity: 0 !important;
    transform: translateX(45px) scale(0.92) !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.inv-cart-item__thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.inv-cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inv-cart-item__details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.inv-cart-item__top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inv-cart-item__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
    color: var(--inv-fg, #0f172a);
}

.inv-cart-item__title a {
    color: var(--inv-fg, #0f172a);
    text-decoration: none;
    transition: color 0.2s;
}

.inv-cart-item__title a:hover {
    color: var(--inv-primary, #2563eb);
}

.inv-cart-item__price {
    font-size: 15px;
    font-weight: 600;
    color: var(--inv-cart-price-color, #0f172a);
    white-space: nowrap;
    text-align: end;
}

.inv-cart-item__meta {
    font-size: 13px;
    color: #64748b;
    margin: 4px 0 12px;
    line-height: 1.4;
}

.inv-cart-item__meta .variation {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.inv-cart-item__meta dt {
    font-weight: 500;
}

.inv-cart-item__meta dd {
    margin: 0 8px 0 0;
}

.inv-cart-item__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Minimal Quantity Stepper */
.inv-cart-item__stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 6px;
    background: #ffffff;
    gap: 6px;
    height: 30px;
}

.inv-qty-btn {
    width: 20px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.inv-qty-btn:hover {
    color: var(--inv-fg, #0f172a);
}

.inv-qty-val {
    min-width: 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--inv-fg, #0f172a);
    user-select: none;
}

/* Minimal Remove X Button */
.inv-cart-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--inv-ink-strong, #000000);
    cursor: pointer;
    transform-origin: center center;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, opacity 0.25s ease;
}

.inv-cart-item__remove:hover {
    color: var(--inv-ink-strong, #000000);
    transform: rotate(180deg) scale(1.18);
}

.inv-cart-item__remove svg {
    width: 16px;
    height: 16px;
}

/* -------------------------------------------------------------
   Drawer Footer & Checkout Summary
   ------------------------------------------------------------- */
.inv-cart-drawer__footer {
    padding: 20px 24px 24px;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
    flex-shrink: 0;
}

.inv-cart-drawer__subtotal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.inv-cart-drawer__subtotal-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--inv-fg, #0f172a);
}

.inv-cart-drawer__subtotal-val {
    font-size: 16px;
    font-weight: 600;
    color: var(--inv-fg, #0f172a);
    letter-spacing: -0.01em;
}

.inv-cart-btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: #0f172a;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--inv-cart-btn-radius, var(--inv-radius-sm, 8px));
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
}

.inv-cart-btn-checkout:hover {
    background: #1e293b;
    color: #ffffff !important;
    text-decoration: none;
}

/* Payment Badges Row */
.inv-cart-drawer__payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.inv-pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    line-height: 1;
}

.inv-pay-badge--visa {
    font-style: italic;
    font-weight: 800;
    color: #1a1f71;
}

.inv-pay-badge--stripe {
    color: #635bff;
    font-weight: 700;
}

.inv-pay-badge--paypal {
    color: #003087;
    font-weight: 700;
}

.inv-pay-badge--apple {
    font-weight: 600;
    color: #000000;
}

/* -------------------------------------------------------------
   Empty Cart State
   ------------------------------------------------------------- */
.inv-cart-drawer__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 32px;
}

.inv-cart-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    margin-bottom: 20px;
}

.inv-cart-empty__icon svg {
    width: 28px;
    height: 28px;
}

.inv-cart-empty__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--inv-fg, #0f172a);
    margin: 0 0 8px;
}

.inv-cart-empty__desc {
    font-size: 13.5px;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.5;
    max-width: 280px;
}

.inv-cart-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #0f172a;
    color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--inv-cart-btn-radius, var(--inv-radius-sm, 8px));
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.inv-cart-empty__btn:hover {
    background: #1e293b;
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.inv-cart-empty__btn svg {
    width: 14px;
    height: 14px;
    transform-origin: center center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.inv-cart-empty__btn:hover svg {
    transform: rotate(-45deg);
}

/* -------------------------------------------------------------
   Continue Shopping Button
   ------------------------------------------------------------- */
.inv-cart-btn-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    background: transparent;
    color: var(--inv-fg, #0f172a);
    font-size: 14px;
    font-weight: 550;
    border: 1px solid #e2e8f0;
    border-radius: var(--inv-cart-btn-radius, var(--inv-radius-sm, 8px));
    text-decoration: none;
    margin-top: 8px;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
}

.inv-cart-btn-continue:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--inv-fg, #0f172a);
    text-decoration: none;
}


/* -------------------------------------------------------------
   Menge geändert, Summe wird gerechnet

   cart-drawer.js setzt is-pending, sobald „+“ oder „−“ gedrückt ist, und
   nimmt es mit der neuen Schublade vom Server wieder weg. Die Menge steht
   da schon richtig; nur die Zahl, die noch nicht stimmt, schimmert — in
   ihrer eigenen Breite, damit nichts rückt (utilities/skeleton.css).
   ------------------------------------------------------------- */
.inv-cart-drawer__content.is-pending .inv-cart-drawer__subtotal-val {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--inv-skel-a) 0%, var(--inv-skel-b) 50%, var(--inv-skel-a) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: inv-skel-shimmer 1.2s ease-in-out infinite;
}

.inv-cart-drawer__content.is-pending .inv-cart-drawer__subtotal-val * {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.inv-cart-drawer__content.is-pending .inv-cart-btn-checkout {
  pointer-events: none;
  opacity: .6;
  transition: opacity .2s ease;
}

.inv-cart-item.is-pending .inv-qty-val {
  animation: inv-fresh-in .3s var(--inv-ease, ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .inv-cart-drawer__content.is-pending .inv-cart-drawer__subtotal-val {
    animation: none;
    background-image: none;
    background-color: var(--inv-skel-b);
  }
}

/* Der Artikel, der gerade in den Korb geht (cart-drawer.js, „Schublade
   öffnen“): Bild und Name stehen schon, Preis und Menge schimmern. */
.inv-cart-item--ghost {
  pointer-events: none;
  animation: inv-fresh-in .35s var(--inv-ease, ease) both;
}

.inv-cart-item--ghost .inv-cart-item__details {
  display: grid;
  gap: 8px;
  align-content: start;
}

.inv-cart-item--ghost .inv-cart-ghost-line {
  display: block;
  width: 70%;
  height: 12px;
}

.inv-cart-item--ghost .inv-cart-ghost-line--short {
  width: 35%;
}

.inv-cart-item--ghost .inv-cart-ghost-pill {
  display: block;
  width: 84px;
  height: 28px;
  border-radius: 8px;
}


/* 2. Glassmorphism Variant (Floating Islands, Grain Texture, Translucent Materials) */

/* ── cart-glass.css ── */
/* -------------------------------------------------------------
   Drawer Style Variants: Glass (mit Körnung) & Pure Dark (#000000)
   ------------------------------------------------------------- */

/* 1. GLASSMORPHISM WITH VIBRATING FILM GRAIN NOISE & FLOATING ISLANDS */
.inv-cart-drawer--glass .inv-cart-drawer__panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px;
    width: min(var(--inv-cart-width, 440px), 94vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    pointer-events: none;
}

.inv-cart-drawer--glass .inv-cart-drawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 14px; /* The explicit gap (разрыв) between the 3 floating islands! */
    background: transparent !important;
    min-height: 0;
    pointer-events: none;
}

/* Base style for the floating glass capsules (Clean glass highlight without dark shadows in the gaps) */
.inv-cart-drawer--glass .inv-cart-drawer__head,
.inv-cart-drawer--glass .inv-cart-drawer__empty,
.inv-cart-drawer--glass .inv-cart-drawer__footer {
    position: relative;
    background: var(--inv-cart-card-bg, linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 82%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 65%, transparent) 100%)) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%) !important;
    backdrop-filter: blur(32px) saturate(190%) contrast(104%) !important;
    border: 1px solid var(--inv-cart-card-border, color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent)) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 2px 10px rgba(15, 23, 42, 0.03),
        inset 0 1.5px 1px 0 color-mix(in srgb, var(--inv-surface, #fff) 100%, transparent) !important;
    overflow: hidden;
    pointer-events: auto;
}

/* Film Grain Noise on static glass islands (head, empty, footer) */
.inv-cart-drawer--glass .inv-cart-drawer__head::before,
.inv-cart-drawer--glass .inv-cart-drawer__empty::before,
.inv-cart-drawer--glass .inv-cart-drawer__footer::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 160px 160px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85 !important;
    animation: invGrainBgJitter 0.22s steps(4) infinite;
}

/* Island 1: Header (Screenshot 1) */
.inv-cart-drawer--glass .inv-cart-drawer__head {
    padding: 16px 22px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--inv-cart-card-border, color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent)) !important;
    z-index: 2;
}

.inv-cart-drawer--glass .inv-cart-drawer__title {
    position: relative;
    z-index: 1;
    color: var(--inv-cart-title-color, var(--inv-fg, #0f172a)) !important;
}

.inv-cart-drawer--glass .inv-cart-drawer__close {
    position: relative;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    width: 34px;
    height: 34px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    color: var(--inv-ink-strong, #000000) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transform-origin: center center;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, opacity 0.25s ease;
}

.inv-cart-drawer--glass .inv-cart-drawer__close::after {
    content: '';
    position: absolute;
    inset: -8px;
    background: transparent;
    pointer-events: auto;
}

.inv-cart-drawer--glass .inv-cart-drawer__close:hover {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--inv-ink-strong, #000000) !important;
    transform: rotate(180deg) scale(1.18);
}

.inv-cart-drawer--glass .inv-cart-drawer__close svg {
    width: 20px;
    height: 20px;
    pointer-events: none !important;
}

/* Island 2: Items List (Seamless Scroll Container without double background layers) */
.inv-cart-drawer--glass .inv-cart-drawer__items-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    position: relative !important;
    z-index: 2;
    pointer-events: auto !important;
    border-radius: 20px !important;
    border: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent) !important;
    box-shadow: 
        0 2px 10px rgba(15, 23, 42, 0.03),
        inset 0 1.5px 1px 0 color-mix(in srgb, var(--inv-surface, #fff) 100%, transparent) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%) !important;
    backdrop-filter: blur(32px) saturate(190%) contrast(104%) !important;
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 85%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 68%, transparent) 100%) !important;
    background-size: 160px 160px, 100% 100% !important;
    background-repeat: repeat, no-repeat !important;
    background-attachment: scroll, scroll !important;
}

/* Eliminate detached scrolling pseudo-element on scroll container */
.inv-cart-drawer--glass .inv-cart-drawer__items-wrap::before {
    display: none !important;
}

.inv-cart-drawer--glass .inv-cart-drawer__items-wrap::-webkit-scrollbar {
    width: 5px;
}

.inv-cart-drawer--glass .inv-cart-drawer__items-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.inv-cart-drawer--glass .inv-cart-drawer__items-wrap::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 10px;
}

.inv-cart-drawer--glass .inv-cart-drawer__empty {
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 24px !important;
    z-index: 2;
}

.inv-cart-drawer--glass .inv-cart-drawer__items {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

.inv-cart-drawer--glass .inv-cart-empty__icon,
.inv-cart-drawer--glass .inv-cart-empty__title,
.inv-cart-drawer--glass .inv-cart-empty__desc,
.inv-cart-drawer--glass .inv-cart-empty__btn {
    position: relative;
    z-index: 1;
}

/* Items inside Island 2: Crisp frosted cards without nested backdrop-filter lag */
.inv-cart-drawer--glass .inv-cart-item {
    background: color-mix(in srgb, var(--inv-surface, #fff) 72%, transparent) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 
        0 4px 14px -2px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 color-mix(in srgb, var(--inv-surface, #fff) 100%, transparent) !important;
    position: relative;
    z-index: 1;
    will-change: transform, opacity, height, margin;
    transition: 
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease,
        height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        margin 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.inv-cart-drawer--glass .inv-cart-item.is-removing {
    opacity: 0 !important;
    transform: translateX(45px) scale(0.92) !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.inv-cart-drawer--glass .inv-cart-item:last-child {
    margin-bottom: 0 !important;
}

.inv-cart-drawer--glass .inv-cart-item__thumb {
    background: color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent) !important;
    border-radius: 10px;
}

.inv-cart-drawer--glass .inv-cart-item__stepper {
    background: color-mix(in srgb, var(--inv-surface, #fff) 80%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.inv-cart-drawer--glass .inv-cart-item__remove {
    color: var(--inv-ink-strong, #000000) !important;
    transform-origin: center center;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, opacity 0.25s ease;
}

.inv-cart-drawer--glass .inv-cart-item__remove:hover {
    color: var(--inv-ink-strong, #000000) !important;
    transform: rotate(180deg) scale(1.18);
}

/* Island 3: Footer (Screenshot 3) */
.inv-cart-drawer--glass .inv-cart-drawer__footer {
    padding: 20px 22px !important;
    flex-shrink: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent) !important;
    z-index: 2;
}

.inv-cart-drawer--glass .inv-cart-drawer__subtotal-row,
.inv-cart-drawer--glass .inv-cart-drawer__actions,
.inv-cart-drawer--glass .inv-cart-drawer__payments {
    position: relative;
    z-index: 1;
}

.inv-cart-drawer--glass .inv-cart-btn-checkout,
.inv-cart-drawer--glass .inv-cart-empty__btn {
    height: var(--inv-cart-btn-height, 44px) !important;
    font-size: var(--inv-cart-btn-font-size, 14px) !important;
    border-radius: var(--inv-cart-btn-radius, var(--inv-radius-sm, 12px)) !important;
    background: var(--inv-cart-btn-checkout-color, linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.45) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22) 100%)) !important;
    color: var(--inv-cart-btn-checkout-text-color, var(--inv-cta-color, currentColor)) !important;
    font-weight: 600;
    border: 1px solid rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
    border-top: 1.5px solid color-mix(in srgb, var(--inv-surface, #fff) 75%, transparent) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
    backdrop-filter: blur(16px) saturate(190%) !important;
    transition: all 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.inv-cart-drawer--glass .inv-cart-btn-checkout:hover,
.inv-cart-drawer--glass .inv-cart-empty__btn:hover {
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.65) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35) 100%) !important;
    color: var(--inv-cart-btn-checkout-text-color, var(--inv-cta-color, currentColor)) !important;
    border-color: rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.8) !important;
    border-top-color: #ffffff !important;
    transform: translateY(-1.5px);
    box-shadow: none !important;
    text-decoration: none;
}

.inv-cart-drawer--glass .inv-cart-btn-checkout:active,
.inv-cart-drawer--glass .inv-cart-empty__btn:active {
    transform: translateY(0);
    box-shadow: none !important;
}

.inv-cart-drawer--glass .inv-cart-btn-continue {
    height: var(--inv-cart-btn-height, 44px) !important;
    font-size: var(--inv-cart-btn-font-size, 14px) !important;
    border-radius: var(--inv-cart-btn-radius, var(--inv-radius-sm, 12px)) !important;
    background: var(--inv-cart-btn-continue-bg, linear-gradient(135deg, color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent) 0%, color-mix(in srgb, var(--inv-fg, #0f172a) 6%, transparent) 100%)) !important;
    border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 16%, transparent) !important;
    border-top: 1.5px solid color-mix(in srgb, var(--inv-surface, #fff) 70%, transparent) !important;
    color: var(--inv-cart-btn-continue-color, var(--inv-fg, #0f172a)) !important;
    font-weight: 600;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
    backdrop-filter: blur(16px) saturate(190%) !important;
    transition: all 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.inv-cart-drawer--glass .inv-cart-btn-continue:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--inv-fg, #0f172a) 22%, transparent) 0%, color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent) 100%) !important;
    border-color: color-mix(in srgb, var(--inv-fg, #0f172a) 28%, transparent) !important;
    border-top-color: #ffffff !important;
    color: var(--inv-cart-btn-continue-color, var(--inv-fg, #0f172a)) !important;
    transform: translateY(-1.5px);
    box-shadow: none !important;
    text-decoration: none;
}

.inv-cart-drawer--glass .inv-cart-btn-continue:active {
    transform: translateY(0);
    box-shadow: none !important;
}



/* 3. Pure OLED Dark Mode (#000000) */

/* ── cart-dark.css ── */
/* 2. PURE BLACK DARK MODE (#000000 / Deep OLED Black) */
.inv-cart-drawer--dark .inv-cart-drawer__panel {
    background: #000000 !important;
    color: #ffffff !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: -24px 0 80px rgba(0, 0, 0, 0.85) !important;
}

.inv-cart-drawer--dark .inv-cart-drawer__head,
.inv-cart-drawer--dark .inv-cart-drawer__content,
.inv-cart-drawer--dark .inv-cart-drawer__items-wrap,
.inv-cart-drawer--dark .inv-cart-drawer__footer {
    background: #000000 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.inv-cart-drawer--dark .inv-cart-drawer__title,
.inv-cart-drawer--dark .inv-cart-item__title,
.inv-cart-drawer--dark .inv-cart-item__title a,
.inv-cart-drawer--dark .inv-cart-item__price,
.inv-cart-drawer--dark .inv-cart-drawer__subtotal-label,
.inv-cart-drawer--dark .inv-cart-drawer__subtotal-val,
.inv-cart-drawer--dark .inv-qty-val,
.inv-cart-drawer--dark .inv-cart-empty__title {
    color: #ffffff !important;
}

.inv-cart-drawer--dark .inv-cart-drawer__close {
    color: #a1a1aa !important;
}

.inv-cart-drawer--dark .inv-cart-drawer__close:hover {
    color: #ffffff !important;
}

.inv-cart-drawer--dark .inv-cart-item {
    background: #0d0d11 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.inv-cart-drawer--dark .inv-cart-item__thumb {
    background: #141419 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.inv-cart-drawer--dark .inv-cart-item__stepper {
    background: #18181f !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.inv-cart-drawer--dark .inv-qty-btn {
    color: #e4e4e7 !important;
}

.inv-cart-drawer--dark .inv-qty-btn:hover {
    color: #ffffff !important;
}

.inv-cart-drawer--dark .inv-cart-item__remove {
    color: #71717a !important;
}

.inv-cart-drawer--dark .inv-cart-item__remove:hover {
    color: #ffffff !important;
}

.inv-cart-drawer--dark .inv-cart-btn-checkout {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

.inv-cart-drawer--dark .inv-cart-btn-checkout:hover {
    background: #f4f4f5 !important;
    color: #000000 !important;
    transform: translateY(-1px);
}

.inv-cart-drawer--dark .inv-cart-btn-continue {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.inv-cart-drawer--dark .inv-cart-btn-continue:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

.inv-cart-drawer--dark .inv-pay-badge {
    background: #111115 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #a1a1aa !important;
}

.inv-cart-drawer--dark .inv-cart-empty__icon {
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.inv-cart-drawer--dark .inv-cart-empty__desc {
    color: #a1a1aa !important;
}

.inv-cart-drawer--dark .inv-cart-empty__btn {
    background: #ffffff !important;
    color: #000000 !important;
}

.inv-cart-drawer--dark .inv-cart-empty__btn:hover {
    background: #e4e4e7 !important;
    color: #000000 !important;
}


/* 4. Motion, Polish & Responsive Media Queries (Text-Roll, Pulse, Tablets, Mobiles) */

/* ── cart-responsive.css ── */
/* -------------------------------------------------------------
   Cart Buttons Text Rolling Animation
   ------------------------------------------------------------- */
.inv-cart-btn-checkout .txt-anim,
.inv-cart-btn-continue .txt-anim,
.inv-cart-empty__btn .txt-anim {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 1.4em;
    line-height: 1.4em;
    vertical-align: middle;
    pointer-events: none;
}

.inv-cart-btn-checkout .txt-anim__inner,
.inv-cart-btn-continue .txt-anim__inner,
.inv-cart-empty__btn .txt-anim__inner {
    display: block;
    position: relative;
    transform: translateY(0);
    will-change: transform;
    line-height: 1.4em;
}

.inv-cart-btn-checkout .txt-anim__inner::after,
.inv-cart-btn-continue .txt-anim__inner::after,
.inv-cart-empty__btn .txt-anim__inner::after {
    content: attr(data-text);
    position: absolute;
    top: 130%;
    left: 0;
    width: 100%;
    white-space: nowrap;
    text-align: center;
}

/* Fallback pure-CSS transition when GSAP not loaded */
html:not(.js-gsap) .inv-cart-btn-checkout .txt-anim__inner,
html:not(.js-gsap) .inv-cart-btn-continue .txt-anim__inner,
html:not(.js-gsap) .inv-cart-empty__btn .txt-anim__inner {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

html:not(.js-gsap) .inv-cart-btn-checkout:hover .txt-anim__inner,
html:not(.js-gsap) .inv-cart-btn-continue:hover .txt-anim__inner,
html:not(.js-gsap) .inv-cart-empty__btn:hover .txt-anim__inner {
    transform: translateY(-130%);
}


/* The price colour carries its token in cart-base.css. */

.inv-cart-drawer--glass .inv-pay-badge {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* Fade out header, burger & mobile drawer when cart drawer is open */
body.inv-cart-drawer-open .inv-header,
body.inv-cart-drawer-open .inv-burger,
body.inv-cart-drawer-open #inv-nav-toggle,
body.inv-cart-drawer-open .inv-drawer,
body.inv-cart-drawer-open .inv-backdrop {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s !important;
}


body.customize-support #inv-cart-drawer.is-open .inv-cart-drawer__head {
    overflow: visible !important;
}

body.customize-support #inv-cart-drawer.is-open .inv-cart-drawer__title {
    padding-left: 38px !important;
}

/* Cart Icon Pulse Feedback Animation */
@keyframes vfCartPulse {0% { transform: scale(1); }

30% { transform: scale(1.3) rotate(-10deg); color: var(--color-brand, #24a9b3); }

60% { transform: scale(0.95); }

100% { transform: scale(1); }
}

.vf-cart-pulse svg {
    animation: vfCartPulse 0.55s ease-in-out 2 !important;
}

/* Tablet (577px - 991px): Docked to right side, full smooth slide without stopping */
@media (min-width: 577px) and (max-width: 991px) {
    .inv-cart-drawer--glass .inv-cart-drawer__panel {
        left: auto !important;
        right: 0 !important;
        margin: 0 !important;
        width: min(var(--inv-cart-width, 420px), 88vw) !important;
        transform: translate3d(105%, 0, 0) !important;
        transition: transform 0.42s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

.inv-cart-drawer.is-open .inv-cart-drawer__panel {
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Mobile Screens (<= 768px): Compact typography, buttons and badges */
@media (max-width: 768px) {
    .inv-cart-drawer--glass .inv-cart-drawer__content {
        gap: 8px !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__head {
        padding: 10px 14px !important;
        border-radius: 16px !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__title {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__close {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__close svg {
        width: 18px !important;
        height: 18px !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__items-wrap {
        padding: 8px !important;
        border-radius: 16px !important;
    }

.inv-cart-drawer--glass .inv-cart-item {
        padding: 8px 10px !important;
        border-radius: 12px !important;
        margin-bottom: 6px !important;
        gap: 8px !important;
    }

.inv-cart-drawer--glass .inv-cart-item__thumb,
.inv-cart-item__thumb {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

.inv-cart-drawer--glass .inv-cart-item__title,
.inv-cart-item__title {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

.inv-cart-drawer--glass .inv-cart-item__price,
.inv-cart-item__price {
        font-size: 12px !important;
        font-weight: 700 !important;
    }

.inv-cart-drawer--glass .inv-cart-item__stepper,
.inv-cart-item__stepper {
        height: 25px !important;
        border-radius: 6px !important;
    }

.inv-cart-drawer--glass .inv-qty-btn,
.inv-qty-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 12px !important;
    }

.inv-cart-drawer--glass .inv-qty-val,
.inv-qty-val {
        font-size: 11.5px !important;
        min-width: 16px !important;
    }

.inv-cart-drawer--glass .inv-cart-item__remove,
.inv-cart-item__remove {
        width: 22px !important;
        height: 22px !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__footer {
        padding: 12px 14px !important;
        border-radius: 16px !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__subtotal-row {
        margin-bottom: 8px !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__subtotal-label,
.inv-cart-drawer--glass .inv-cart-drawer__subtotal-val {
        font-size: 13.5px !important;
    }

.inv-cart-drawer--glass .inv-cart-btn-checkout {
        height: 38px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

.inv-cart-drawer--glass .inv-cart-btn-continue {
        height: 34px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        margin-top: 6px !important;
    }

.inv-cart-drawer--glass .inv-cart-drawer__payments {
        gap: 4px !important;
        margin-top: 8px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

.inv-cart-drawer--glass .inv-pay-badge {
        padding: 0 5px !important;
        font-size: 8.5px !important;
        height: 18px !important;
        border-radius: 3px !important;
        line-height: 18px !important;
    }

.inv-cart-drawer--glass .inv-pay-badge svg {
        max-height: 11px !important;
        width: auto !important;
    }
}

/* Small Mobile (<= 576px): Centered, slides off-screen completely with 100vw */
@media (max-width: 576px) {
    .inv-cart-drawer--glass .inv-cart-drawer__panel {
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: min(360px, calc(100vw - 20px)) !important;
        padding: 8px !important;
        transform: translate3d(100vw, 0, 0) !important;
        transition: transform 0.42s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

.inv-cart-drawer.is-open .inv-cart-drawer__panel {
        transform: translate3d(0, 0, 0) !important;
    }
}




/* ── cart-notice.css ── */
/* =============================================================
   Inverta Theme — der Hinweis nach „In den Warenkorb“
   (assets/js/modules/cart-notice.js)

   Unten rechts auf dem Rechner, unten über die ganze Breite auf dem Telefon.
   Farben, Rundung und Schatten aus denselben Variablen wie der Shop, damit
   er unter jeder Vorlage aussieht, als gehörte er dazu — auch unter „Dunkel".
   Über der Kaufleiste der Produktseite (z-index 900), unter der Schublade.
   ============================================================= */

.inv-cart-notice {
  --inv-cn-surface: var(--inv-shop-surface, var(--inv-surface, #ffffff));
  --inv-cn-line: var(--inv-shop-line, var(--inv-border, #e2e8f0));
  --inv-cn-ink: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  --inv-cn-muted: var(--inv-muted-fg, #64748b);
  --inv-cn-accent: var(--inv-shop-accent, var(--inv-accent, #24a9b3));
  --inv-cn-accent-ink: var(--inv-accent-fg, var(--inv-fg, #0f172a));
  --inv-cn-radius: var(--inv-shop-radius, var(--inv-radius, 16px));

  position: fixed;
  inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 24px;
  z-index: 9990;
  width: min(380px, calc(100vw - 32px));
  padding: 16px 16px 18px;
  border: 1px solid var(--inv-cn-line);
  border-radius: var(--inv-cn-radius);
  background: color-mix(in srgb, var(--inv-cn-surface) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  color: var(--inv-cn-ink);
  box-shadow:
    0 24px 60px -24px rgba(15, 23, 42, .45),
    0 2px 6px -2px rgba(15, 23, 42, .12);
  overflow: hidden;
  font-size: .9375rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition:
    opacity .28s var(--inv-ease, cubic-bezier(.22, 1, .36, 1)),
    transform .38s var(--inv-ease, cubic-bezier(.22, 1, .36, 1));
  pointer-events: none;
}

.inv-cart-notice.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.inv-cart-notice__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-cart-notice__badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--inv-cn-accent);
  color: var(--inv-cn-accent-ink);
}

.inv-cart-notice__badge svg {
  width: 15px;
  height: 15px;
}

.inv-cart-notice.is-on .inv-cart-notice__badge {
  animation: inv-cn-pop .45s var(--inv-ease, cubic-bezier(.22, 1, .36, 1)) .08s both;
}

.inv-cart-notice__title {
  font-weight: 700;
  font-size: 1rem;
}

.inv-cart-notice__close {
  display: inline-grid;
  place-items: center;
  margin-inline-start: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--inv-cn-muted);
  cursor: pointer;
}

.inv-cart-notice__close:hover,
.inv-cart-notice__close:focus-visible {
  background: color-mix(in srgb, var(--inv-cn-ink) 8%, transparent);
  color: var(--inv-cn-ink);
}

.inv-cart-notice__close svg {
  width: 18px;
  height: 18px;
}

.inv-cart-notice__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.inv-cart-notice__img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: calc(var(--inv-cn-radius) * .6);
  border: 1px solid var(--inv-cn-line);
  object-fit: cover;
  background: color-mix(in srgb, var(--inv-cn-ink) 4%, transparent);
}

.inv-cart-notice__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.inv-cart-notice__name {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inv-cart-notice__price {
  color: var(--inv-cn-muted);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

/* Beide Knöpfe in einer Reihe, der Weg zum Warenkorb als der größere.
   Erst wenn die Breite für beide Wörter nicht reicht, untereinander. */
.inv-cart-notice__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 340px) {
  .inv-cart-notice__actions { grid-template-columns: 1fr; }
}

.inv-cart-notice__go,
.inv-cart-notice__stay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
  border-radius: var(--inv-radius-sm, 10px);
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.inv-cart-notice__go {
  border: 0;
  background: var(--inv-cn-accent);
  color: var(--inv-cn-accent-ink);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--inv-cn-accent) 80%, transparent);
}

.inv-cart-notice__go:hover,
.inv-cart-notice__go:focus-visible {
  color: var(--inv-cn-accent-ink);
  text-decoration: none;
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--inv-cn-accent) 88%, var(--inv-cn-ink));
}

.inv-cart-notice__go svg {
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}

.inv-cart-notice__go:hover svg {
  transform: translateX(3px);
}

[dir="rtl"] .inv-cart-notice__go svg {
  transform: scaleX(-1);
}

[dir="rtl"] .inv-cart-notice__go:hover svg {
  transform: scaleX(-1) translateX(3px);
}

.inv-cart-notice__stay {
  border: 1px solid var(--inv-cn-line);
  background: transparent;
  color: var(--inv-cn-ink);
}

.inv-cart-notice__stay:hover,
.inv-cart-notice__stay:focus-visible {
  background: color-mix(in srgb, var(--inv-cn-ink) 6%, transparent);
}

/* Die verbleibende Zeit, als Strich am unteren Rand. */
.inv-cart-notice__timer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: var(--inv-cn-accent);
  opacity: .55;
  transform-origin: left center;
  transform: scaleX(0);
}

[dir="rtl"] .inv-cart-notice__timer {
  transform-origin: right center;
}

.inv-cart-notice.is-on .inv-cart-notice__timer {
  animation: inv-cn-timer var(--inv-cart-notice-ms, 6000ms) linear both;
}

.inv-cart-notice.is-paused .inv-cart-notice__timer {
  animation-play-state: paused;
}

/* Abgelehnt */
.inv-cart-notice.is-error .inv-cart-notice__badge {
  background: var(--inv-destructive, #dc2626);
  color: #ffffff;
}

.inv-cart-notice__errors {
  margin-top: 10px;
  color: var(--inv-cn-ink);
  font-size: .9rem;
}

.inv-cart-notice__errors p {
  margin: 0 0 4px;
}

.inv-cart-notice__errors a {
  color: inherit;
}

@keyframes inv-cn-timer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@keyframes inv-cn-pop {
  0%   { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

@media (max-width: 600px) {
  .inv-cart-notice {
    inset-inline: 12px;
    inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inv-cart-notice {
    transform: none;
    transition: opacity .15s linear;
  }
  .inv-cart-notice.is-on .inv-cart-notice__badge {
    animation: none;
  }
}

body.inv-no-motion .inv-cart-notice {
  transform: none;
  transition: opacity .15s linear;
}

@media print {
  .inv-cart-notice { display: none !important; }
}


/* ── sections-nav.css ── */
/* =============================================================
   Inverta — Sektions-Navigation

   Eine Spalte kleiner Marken am Bildschirmrand, eine je Sektion. Die aktive
   ist größer und kräftiger als die übrigen — der Zustand hängt nie an der
   Farbe allein, sonst trägt er für niemanden, der die beiden nicht
   auseinanderhält.

   Fünf Formen, eine Klasse je Form auf dem <nav>. Alles andere — Größe,
   Stärke, Abstand, Farbe, Seite — sind Tokens, die der Customizer schreibt.
   Es war einmal ein Strich in einer Größe, und dafür gab es einen einzigen
   Regler: die Farbe.
   ============================================================= */

#vf-sections-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    pointer-events: none;

    /* Was eine Form aus diesen Zahlen macht, steht weiter unten. */
    --inv-snav-ink: var(--inv-snav-dot, var(--inv-fg, #0f172a));
    --inv-snav-on: var(--inv-snav-active-color, var(--inv-snav-dot, var(--inv-accent, #24a9b3)));
    --inv-snav-halo: color-mix(in srgb, var(--inv-surface, #fff) 70%, transparent);
    /* Der Ruhezustand ist eine gemischte Farbe, keine gesenkte Deckkraft.
     *
     * Mit opacity verblasst der Halo mit — und der Halo ist genau das, was die
     * Marke über einem dunklen Hero überhaupt sichtbar macht. Auf der
     * Startseite dieser Werkstatt war die halbe Spalte schlicht unsichtbar:
     * dunkle Marke auf dunklem Foto, der weiße Schimmer dahinter zu 45 %
     * mitgedimmt. */
    --inv-snav-rest: color-mix(in srgb, var(--inv-snav-ink) 55%, transparent);
    --inv-snav-glow:
        0 0 0 1px var(--inv-snav-halo),
        0 1px 6px var(--inv-snav-halo);
}

.vf-snav-side-right { inset-inline-end: var(--inv-snav-offset, 18px); }
.vf-snav-side-left  { inset-inline-start: var(--inv-snav-offset, 18px); }

/* The reset belongs on the list, which is the element that draws markers. */
#vf-sections-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--inv-snav-gap, 10px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vf-snav-side-right ul { align-items: flex-end; }
.vf-snav-side-left  ul { align-items: flex-start; }

.vf-snav-item {
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: auto;
}

.vf-snav-item a {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    padding: 3px 0;

    /* Das Ziel bleibt 24 Pixel hoch, auch wenn die Marke 2 Pixel hoch ist.
     *
     * Ohne das war die Hoehe die der Marke plus 6 Pixel Polster: mit
     * abgeschalteten Beschriftungen also 10 x 8 Pixel. Gemessen am
     * 08.10.2026. Zwei Folgen, beide gemeldet — die Spalte sah aus wie ein
     * Bueschel aneinandergeklebter Striche, weil zwischen zwei Marken nur
     * 16 statt 32 Pixel lagen, und treffen liess sich ein 8 Pixel hoher
     * Streifen kaum. 24 x 24 ist das Mindestmass aus WCAG 2.5.8 (AA); die
     * Marke selbst bleibt so klein, wie sie eingestellt ist.
     *
     * `position: relative`, weil die Beschriftung daran haengt. */
    position: relative;
    min-height: 24px;
    min-width: 24px;
}

/* Links liegt die Beschriftung rechts von der Marke, rechts links davon —
   in beiden Fällen zwischen Marke und Bildschirmrand steht nichts. */
.vf-snav-side-right .vf-snav-item a { justify-content: flex-end; }
.vf-snav-side-left  .vf-snav-item a { flex-direction: row-reverse; justify-content: flex-end; }

/* -------------------------------------------------------------
   Die Marke, in allem, was alle Formen teilen
   ------------------------------------------------------------- */
.vf-snav-dot {
    display: block;
    flex: none;
    box-sizing: border-box;
    background: var(--inv-snav-rest);
    box-shadow: var(--inv-snav-glow);
    transition:
        width var(--inv-motion, 400ms) var(--inv-ease, cubic-bezier(.22, .61, .36, 1)),
        height var(--inv-motion, 400ms) var(--inv-ease),
        opacity var(--inv-motion, 400ms) var(--inv-ease),
        transform var(--inv-motion, 400ms) var(--inv-ease),
        border-color var(--inv-motion, 400ms) var(--inv-ease),
        background-color var(--inv-motion, 400ms) var(--inv-ease);
}

.vf-snav-item.vf-active .vf-snav-dot,
.vf-snav-item.inv-active .vf-snav-dot {
    background: var(--inv-snav-on);
}

/* -------------------------------------------------------------
   1. Strich — die ursprüngliche Form: wächst zur Seite

   Legible on anything the page scrolls past. A dark rule vanishes over a dark
   photograph and a light one over a white capsule, and this column passes over
   both within a single scroll. The rule carries its own soft halo, so the
   contrast comes from the pair rather than from the background being kind.
   ------------------------------------------------------------- */
.vf-snav-shape-bar .vf-snav-dot {
    width: var(--inv-snav-size, 10px);
    height: var(--inv-snav-thick, 2px);
    border-radius: var(--inv-snav-thick, 2px);
}

.vf-snav-side-right.vf-snav-shape-bar .vf-snav-dot { transform-origin: right center; }
.vf-snav-side-left.vf-snav-shape-bar  .vf-snav-dot { transform-origin: left center; }

.vf-snav-shape-bar .vf-snav-item a:hover .vf-snav-dot,
.vf-snav-shape-bar .vf-snav-item a:focus-visible .vf-snav-dot {
    width: calc((var(--inv-snav-size, 10px) + var(--inv-snav-active-size, 24px)) / 2);
    background: var(--inv-snav-ink);
}

.vf-snav-shape-bar .vf-snav-item.vf-active .vf-snav-dot {
    width: var(--inv-snav-active-size, 24px);
    box-shadow:
        0 0 0 1px var(--inv-snav-halo),
        0 2px 10px color-mix(in srgb, var(--inv-snav-on) 45%, transparent);
}

/* -------------------------------------------------------------
   2. Punkt — rund, füllt sich
   ------------------------------------------------------------- */
.vf-snav-shape-dot .vf-snav-dot {
    width: var(--inv-snav-size, 10px);
    height: var(--inv-snav-size, 10px);
    border-radius: 50%;
}

.vf-snav-shape-dot .vf-snav-item a:hover .vf-snav-dot,
.vf-snav-shape-dot .vf-snav-item a:focus-visible .vf-snav-dot { background: var(--inv-snav-ink); }

.vf-snav-shape-dot .vf-snav-item.vf-active .vf-snav-dot {
    width: var(--inv-snav-active-size, 24px);
    height: var(--inv-snav-active-size, 24px);
    box-shadow:
        0 0 0 1px var(--inv-snav-halo),
        0 0 0 calc(var(--inv-snav-thick, 2px) + 2px) color-mix(in srgb, var(--inv-snav-on) 18%, transparent);
}

/* -------------------------------------------------------------
   3. Ring — offen, schließt sich

   Im Ruhezustand nur ein Umriss. Die aktive Sektion füllt ihn: der Punkt in
   der Mitte wächst über das Pseudo-Element, der Ring bleibt stehen, damit die
   Spalte nicht springt.
   ------------------------------------------------------------- */
.vf-snav-shape-ring .vf-snav-dot {
    position: relative;
    width: var(--inv-snav-size, 10px);
    height: var(--inv-snav-size, 10px);
    border-radius: 50%;
    background: none;
    border: var(--inv-snav-thick, 2px) solid var(--inv-snav-rest);
}

.vf-snav-shape-ring .vf-snav-dot::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    background: var(--inv-snav-on);
    transform: scale(0);
    transition: transform var(--inv-motion, 400ms) var(--inv-ease, ease);
}

.vf-snav-shape-ring .vf-snav-item a:hover .vf-snav-dot,
.vf-snav-shape-ring .vf-snav-item a:focus-visible .vf-snav-dot { border-color: var(--inv-snav-ink); }

.vf-snav-shape-ring .vf-snav-item.vf-active .vf-snav-dot {
    width: var(--inv-snav-active-size, 24px);
    height: var(--inv-snav-active-size, 24px);
    background: none;
    border-color: var(--inv-snav-on);
}

.vf-snav-shape-ring .vf-snav-item.vf-active .vf-snav-dot::after { transform: scale(.55); }

/* -------------------------------------------------------------
   4. Zahlen — 01, 02, 03

   Der Zähler steht auf der Liste, nicht im Markup: eine Sektion mehr heißt
   eine Zahl mehr, ohne dass irgendwo eine Nummer gepflegt werden muss.
   ------------------------------------------------------------- */
.vf-snav-shape-num ul { counter-reset: inv-snav; }

.vf-snav-shape-num .vf-snav-item { counter-increment: inv-snav; }

.vf-snav-shape-num .vf-snav-dot {
    width: auto;
    height: auto;
    background: none;
    font-family: var(--inv-font-display, system-ui, sans-serif);
    font-size: var(--inv-snav-size, 10px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--inv-snav-rest);
    box-shadow: none;
    text-shadow: 0 0 3px var(--inv-snav-halo), 0 1px 8px var(--inv-snav-halo);
}

.vf-snav-shape-num .vf-snav-dot::before { content: counter(inv-snav, decimal-leading-zero); }

.vf-snav-shape-num .vf-snav-item a:hover .vf-snav-dot,
.vf-snav-shape-num .vf-snav-item a:focus-visible .vf-snav-dot { color: var(--inv-snav-ink); }

.vf-snav-shape-num .vf-snav-item.vf-active .vf-snav-dot {
    background: none;
    color: var(--inv-snav-on);
    font-size: var(--inv-snav-active-size, 24px);
}

/* -------------------------------------------------------------
   5. Leiste — eine durchgehende Linie mit Kerben

   Die Linie gehört der Liste und läuft hinter allen Marken durch; die Marken
   selbst sind Kerben darauf. Die aktive Kerbe ist ein Stück gefüllte Leiste.
   ------------------------------------------------------------- */
.vf-snav-shape-line ul {
    position: relative;
    gap: var(--inv-snav-gap, 10px);
}

.vf-snav-shape-line ul::before {
    content: '';
    position: absolute;
    inset-block: 0;
    width: var(--inv-snav-thick, 2px);
    border-radius: var(--inv-snav-thick, 2px);
    background: color-mix(in srgb, var(--inv-snav-ink) 30%, transparent);
    /* Wie bei den Marken: die Leiste braucht ihren eigenen Schimmer, sonst
       verschwindet sie über einem dunklen Hero. */
    box-shadow: 0 0 0 1px var(--inv-snav-halo);
}

.vf-snav-side-right.vf-snav-shape-line ul::before { inset-inline-end: calc(var(--inv-snav-size, 10px) / 2 - var(--inv-snav-thick, 2px) / 2); }
.vf-snav-side-left.vf-snav-shape-line  ul::before { inset-inline-start: calc(var(--inv-snav-size, 10px) / 2 - var(--inv-snav-thick, 2px) / 2); }

.vf-snav-shape-line .vf-snav-dot {
    width: var(--inv-snav-size, 10px);
    height: var(--inv-snav-thick, 2px);
    border-radius: var(--inv-snav-thick, 2px);
}

.vf-snav-shape-line .vf-snav-item a:hover .vf-snav-dot,
.vf-snav-shape-line .vf-snav-item a:focus-visible .vf-snav-dot { background: var(--inv-snav-ink); }

.vf-snav-shape-line .vf-snav-item.vf-active .vf-snav-dot {
    height: var(--inv-snav-active-size, 24px);
    width: calc(var(--inv-snav-thick, 2px) * 2);
    border-radius: calc(var(--inv-snav-thick, 2px) * 2);
}

.vf-snav-side-right.vf-snav-shape-line .vf-snav-item.vf-active .vf-snav-dot { margin-inline-end: calc((var(--inv-snav-size, 10px) - var(--inv-snav-thick, 2px) * 2) / 2); }
.vf-snav-side-left.vf-snav-shape-line  .vf-snav-item.vf-active .vf-snav-dot { margin-inline-start: calc((var(--inv-snav-size, 10px) - var(--inv-snav-thick, 2px) * 2) / 2); }

/* -------------------------------------------------------------
   Die Beschriftung

   Sie kommt hinter der Marke hervor statt an Ort und Stelle einzublenden, damit
   beides als eine Bewegung liest. Wer sie dauerhaft sehen will — auf einem
   Touchgerät gibt es kein Überfahren —, schaltet "Immer sichtbar" ein.
   ------------------------------------------------------------- */
.vf-snav-label {
    /* Absolut, nicht im Fluss.
     *
     * Im Fluss war die Beschriftung auch unsichtbar so breit wie ihr Text:
     * das Ziel des Links war 85 Pixel breit, und dieser Streifen lag als
     * durchsichtige Spalte am rechten Rand ueber dem Inhalt der Seite und
     * nahm dort jeden Klick an. Gemessen am 08.10.2026: 85 x 32 Pixel pro
     * Zeile, bei neun Sektionen eine 85 Pixel breite Spalte ueber die ganze
     * Hoehe. Absolut positioniert kostet sie keine Breite, steht aber an
     * derselben Stelle wie vorher — links neben der Marke, rechts davon bei
     * einer Spalte am linken Rand. */
    position: absolute;
    inset-inline-end: 100%;
    margin-inline-end: .55rem;
    /* Unsichtbar heisst: nicht im Weg. */
    pointer-events: none;

    font-family: var(--inv-font-display, system-ui, sans-serif);
    font-size: var(--inv-snav-label-size, 11px);
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--inv-fg);
    background: color-mix(in srgb, var(--inv-surface, #fff) 68%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    padding: .2rem .5rem;
    border-radius: var(--inv-radius-sm, 10px);
    border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 8%, transparent);
    box-shadow: 0 4px 16px -6px rgba(15, 23, 42, .18);
    opacity: 0;
    transform: translateX(8px);
    transition:
        opacity var(--inv-motion, 400ms) var(--inv-ease),
        transform var(--inv-motion, 400ms) var(--inv-ease);
}

.vf-snav-side-left .vf-snav-label {
    inset-inline-start: 100%;
    inset-inline-end: auto;
    margin-inline-start: .55rem;
    margin-inline-end: 0;
    transform: translateX(-8px);
}

.vf-snav-item a:hover .vf-snav-label,
.vf-snav-item a:focus-visible .vf-snav-label,
.vf-snav-labels-always .vf-snav-label {
    opacity: 1;
    transform: none;
    /* Sichtbar darf sie auch angeklickt werden. */
    pointer-events: auto;
}

.vf-snav-labels-always .vf-snav-item.vf-active .vf-snav-label {
    color: var(--inv-snav-on);
    border-color: color-mix(in srgb, var(--inv-snav-on) 35%, transparent);
}

@media (max-width: 768px) {
    #vf-sections-nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vf-snav-dot,
    .vf-snav-dot::after,
    .vf-snav-label {
        transition: none;
    }
}


/* ── back-to-top.css ── */
/* =============================================================
   Inverta — Back To Top Button
   ============================================================= */

#vf-btt {
    position: fixed;
    bottom: 5.5rem;
    right: 1.5rem;
    z-index: 49;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    color: var(--inv-muted-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .3s, transform .3s;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
}

#vf-btt.vf-visible {
    opacity: 1;
    pointer-events: auto;
}

#vf-btt:hover {
    background: var(--inv-primary);
    color: var(--inv-primary-fg);
    border-color: var(--inv-primary);
    transform: translateY(-2px);
}

#vf-btt svg {
    width: 16px;
    height: 16px;
}


/* ── footer.css ── */
/* =============================================================
   Inverta — Footer, widgets and newsletter

   Three bands, one shell:

     lead    a closing sentence at headline size, with the last ask
     inner   brand, menu, legal, contact
     bottom  copyright and tagline on a hairline

   The footer is the one band that is on every page, so it takes all of
   its material from the global tokens — rounding, edge padding, motion,
   accent, surface. Change "Ecken-Rundung" once and this moves with
   everything else, which is the whole reason those tokens exist.
   ============================================================= */

/* The footer's own tokens live on :root, not on the footer element.
   An option writes its value at :root too, and a declaration on the element
   itself would outrank it however late it was printed — the footer would show
   the theme default and the colour picker would appear to do nothing. */
:root {
  --inv-footer-fg: var(--inv-fg, #0f172a);
  --inv-footer-muted: var(--inv-muted-fg, #64748b);
  --inv-footer-line: var(--inv-border, #e2e8f0);
  --inv-footer-accent: var(--inv-accent, #24a9b3);
  --inv-footer-ease: cubic-bezier(.16, 1, .3, 1);
}

#inv-footer,
.vf-footer {
  position: relative;
  isolation: isolate;
  margin-top: var(--inv-footer-gap, var(--inv-footer-gap-set, clamp(48px, 7vw, 96px)));
  color: var(--inv-footer-fg);

  /* The footer background is a setting. Unset it stays transparent, which is
     what the footer has always been — it used to be printed from
     dynamic-css.php only while a colour was chosen, so the preview could turn
     it on and never off again. */
  background-color: var(--inv-footer-bg, transparent);
}

/* A single wash of the accent, low and wide, sitting behind everything.
   It is what stops the band reading as a white box bolted under the page. */
.inv-footer-aura {
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: min(70%, 420px);
  pointer-events: none;
  opacity: var(--inv-footer-aura-opacity, var(--inv-footer-aura-opacity-set, .5));
  background:
    radial-gradient(120% 100% at 15% 100%,
      color-mix(in srgb, var(--inv-footer-accent) 16%, transparent) 0%,
      transparent 62%),
    radial-gradient(90% 90% at 88% 100%,
      color-mix(in srgb, var(--inv-primary, #111827) 10%, transparent) 0%,
      transparent 58%);
}

.inv-footer-shell {
  max-width: var(--inv-container, var(--inv-container-max, 1280px));
  margin-inline: auto;
  padding-inline: var(--inv-footer-px, var(--inv-edge, 10px));
}

/* -------------------------------------------------------------
   2. The columns
   ------------------------------------------------------------- */
.vf-footer-inner {
  display: grid;
  gap: var(--inv-footer-col-gap, var(--inv-footer-col-gap-set, clamp(28px, 3.5vw, 48px)));
  grid-template-columns: 1fr;

  /*
   * Dieser Innenabstand kam zu dem der Kapsel noch hinzu.
   *
   * Die Kapsel hat 56px oben, und hier standen noch einmal bis zu 64 —
   * zusammen 120px, bevor das erste Wort kam, und gesteuert von keiner
   * einzigen Einstellung. Gemeldet wurde es als "der Footer ist sehr weit
   * von der Sektion darüber": gemessen stimmte der Abstand *zwischen* den
   * beiden Kapseln (20px, so eingestellt) — die Luft lag innen.
   */
  padding-block-start: var(--inv-footer-rows-top, var(--inv-footer-rows-pad, var(--inv-footer-rows-pad-set, clamp(36px, 5vw, 64px))));
  padding-block-end: var(--inv-footer-rows-bottom, var(--inv-footer-rows-pad, var(--inv-footer-rows-pad-set, clamp(36px, 5vw, 64px))));
}

@media (min-width: 720px) {
  .vf-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .vf-footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

.vf-footer-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Die Höhe ist eine Einstellung, die Breite folgt dem Bild.
   Vorher stand hier 28 × 28 fest: ein Wortmarken-Logo wurde darin auf ein
   Quadrat gequetscht, und eine Einstellung dafür gab es nicht. */
.vf-footer-brand img {
  width: auto;
  height: var(--inv-footer-logo-size, 28px);
  max-width: 100%;
  object-fit: contain;
}

.vf-footer-desc {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--inv-footer-muted);
  max-width: 30ch;
  line-height: 1.7;
}

/* Größe, Stärke und Farbe kommen aus „Schrift im Footer“.
 *
 * Sie standen hier als feste Werte — und weiter unten noch einmal als Tokens,
 * auf `.inv-footer-col-title` allein. Das Element trägt beide Klassen, und
 * `.vf-footer-col h4` ist der spezifischere Selektor: die drei Regler in der
 * Live-Vorschau bewegten sich, und im Footer änderte sich nichts. Jetzt steht
 * jede der drei Eigenschaften genau einmal, an der Stelle mit dem größten
 * Gewicht. */
.inv-footer-col-title,
.vf-footer-col h4 {
  margin: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-footer-head-size, 13px);
  font-weight: var(--inv-footer-head-weight, 700);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inv-footer-head-color, var(--inv-footer-muted));
}

.vf-footer-col ul {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* gap steht weiter unten als Token — hier stand es noch einmal als Zahl. */
}

/* Dasselbe für die Links: `.vf-footer-col li a` schlug `.inv-footer-col a`,
   also blieben „Links: Größe“ und „Links: Stärke“ wirkungslos. */
.vf-footer-col li a,
.inv-footer-address {
  display: inline-block;
  font-size: var(--inv-footer-link-size, 15px);
  font-weight: var(--inv-footer-link-weight, 500);
  line-height: 1.5;
  color: var(--inv-footer-muted);
  text-decoration: none;
  transition: color var(--inv-motion, 400ms) var(--inv-ease, ease);
}

.vf-footer-col li a:hover,
.vf-footer-col li a:focus-visible {
  color: var(--inv-footer-fg);
  text-decoration: none;
}

/* -------------------------------------------------------------
   3. The word swap

   Hovering a link rolls the word up and the same word in from below. The
   markup is built by modules/link-swap.js: one mask, two identical copies,
   letter by letter. The link keeps an aria-label and the split copy is
   hidden from assistive tech, so what is read out is still one word.

   Per letter, with a small stagger, on a long curve — it should read as the
   word turning over, not as a flicker. Without the script, or with motion
   switched off, the link is simply a link.
   ------------------------------------------------------------- */
.inv-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Room for descenders, taken back off the layout so the line box is
     unchanged — without it the mask shears the tail off every g and y. */
  padding-bottom: .16em;
  margin-bottom: -.16em;
}

.inv-swap__layer {
  display: block;
  white-space: pre;
}

/* The incoming copy is taken out of flow, so the link's height is still the
   height of one word and nothing below it moves. */
.inv-swap__layer--b {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--inv-footer-accent);
}

.inv-swap__ch {
  display: inline-block;
  transition: transform var(--inv-swap-dur, 620ms) var(--inv-footer-ease);
  transition-delay: calc(var(--inv-i, 0) * var(--inv-swap-step, 26ms));
  will-change: transform;
}

.inv-swap__layer--b .inv-swap__ch {
  transform: translateY(112%);
}

a:hover .inv-swap__layer--a .inv-swap__ch,
a:focus-visible .inv-swap__layer--a .inv-swap__ch {
  transform: translateY(-112%);
}

a:hover .inv-swap__layer--b .inv-swap__ch,
a:focus-visible .inv-swap__layer--b .inv-swap__ch {
  transform: translateY(0);
}

/* A link that swaps does not also need to change colour under it — the
   arriving copy is already the accent. */
.vf-footer-col li a:has(.inv-swap):hover {
  color: var(--inv-footer-muted);
}

/* -------------------------------------------------------------
   4. The bottom bar
   ------------------------------------------------------------- */
.vf-footer-bottom {
  border-top: 1px solid var(--inv-footer-line);
}

/* Und in der untersten Zeile: die Schriftgröße stand auf dem inneren Kasten,
   das Token auf dem äußeren — ein Kind schlägt sein Elternteil bei geerbten
   Eigenschaften immer. */
.vf-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-block: 1.25rem;
  font-size: var(--inv-footer-bottom-size, 13px);
  color: var(--inv-footer-muted);
}

@media (min-width: 768px) {
  .vf-footer-bottom-inner {
    flex-direction: row;
  }
}

.vf-footer-bottom-inner a {
  color: var(--inv-footer-muted);
}

.vf-footer-bottom-inner a:hover {
  color: var(--inv-footer-fg);
}

/* -------------------------------------------------------------
   Footer widgets
   ------------------------------------------------------------- */
.vf-footer-widgets {
  max-width: var(--inv-container, var(--inv-container-max, 1280px));
  margin-inline: auto;
  padding: 2.5rem var(--inv-edge, 10px);
  border-top: 1px solid var(--inv-footer-line, var(--inv-border));
  display: grid;
  gap: 2rem;
}

.vf-footer-widgets.cols-1 { grid-template-columns: 1fr; }

.vf-footer-widgets.cols-2 { grid-template-columns: repeat(2, 1fr); }

.vf-footer-widgets.cols-3 { grid-template-columns: repeat(3, 1fr); }

.vf-footer-widgets.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
.vf-footer-widgets.cols-3,
.vf-footer-widgets.cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
.vf-footer-widgets.cols-2,
.vf-footer-widgets.cols-3,
.vf-footer-widgets.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------
   Social icons
   ------------------------------------------------------------- */
.vf-footer-socials {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1.35rem;
}

.vf-social-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--inv-radius-sm, 10px);
  border: 1px solid var(--inv-footer-line);
  color: var(--inv-footer-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition:
    color var(--inv-motion, 400ms) var(--inv-ease, ease),
    border-color var(--inv-motion, 400ms) var(--inv-ease, ease),
    transform var(--inv-motion, 400ms) var(--inv-ease, ease);
}

.vf-social-icon:hover {
  border-color: var(--inv-footer-accent);
  color: var(--inv-footer-accent);
  transform: translateY(calc(var(--inv-hover-lift, 4px) * -.5));
  text-decoration: none;
}

.vf-social-icon svg {
  width: 15px;
  height: 15px;
}

/* -------------------------------------------------------------
   Newsletter
   ------------------------------------------------------------- */
.vf-newsletter-title {
  font-size: var(--inv-nl-title-size, inherit);
  color: var(--inv-nl-title-color, var(--inv-footer-head-color, inherit));
}

.vf-newsletter-form {
  display: flex;
  gap: var(--inv-nl-gap, .5rem);
  flex-wrap: wrap;
  margin-top: var(--inv-nl-top, 1.35rem);
}

/* „Untereinander" ist nicht der schmale Notfall, sondern eine Wahl: in einer
   engen Spalte ist ein Feld neben einem Knopf zweimal zu klein. */
body.inv-nl-stack .vf-newsletter-form {
  flex-direction: column;
  align-items: stretch;
}

.vf-newsletter-input {
  flex: 1;
  min-width: 180px;
  min-height: var(--inv-nl-field-h, 0);
  background: var(--inv-nl-field-bg, color-mix(in srgb, var(--inv-surface, #fff) 65%, transparent));
  border: 1px solid var(--inv-footer-line);
  border-radius: var(--inv-nl-field-radius, var(--inv-radius-sm, 10px));
  padding: .6rem 1rem;
  color: var(--inv-footer-fg);
  font-size: var(--inv-nl-text-size, .875rem);
  font-family: inherit;
  transition: border-color var(--inv-motion, 400ms) var(--inv-ease, ease);
}

/* ---- Der Knopf ---------------------------------------------------------- */
.vf-newsletter-submit {
  min-height: var(--inv-nl-btn-h, var(--inv-nl-field-h, 0));
  padding-inline: var(--inv-nl-btn-px, 1.25rem);
  border-radius: var(--inv-nl-btn-radius, var(--inv-radius-sm, 10px));
  font-size: var(--inv-nl-btn-size, var(--inv-nl-text-size, .875rem));
}

body.inv-nlbtn-weich  { --inv-nl-btn-radius: 14px; }
body.inv-nlbtn-kapsel { --inv-nl-btn-radius: 999px; --inv-nl-btn-px: 1.75rem; }
body.inv-nlbtn-eckig  { --inv-nl-btn-radius: 0px; }

body.inv-nlfuell-umriss .vf-newsletter-submit {
  background: transparent;
  border: 1px solid var(--inv-footer-accent, currentColor);
  color: var(--inv-footer-accent, currentColor);
}

body.inv-nlfuell-umriss .vf-newsletter-submit:hover {
  background: var(--inv-footer-accent, currentColor);
  color: var(--inv-surface, #fff);
}

body.inv-nlfuell-getoent .vf-newsletter-submit {
  background: color-mix(in srgb, var(--inv-footer-accent, #24a9b3) 18%, transparent);
  border-color: transparent;
  color: var(--inv-footer-fg, inherit);
}

body.inv-nlfuell-getoent .vf-newsletter-submit:hover {
  background: var(--inv-footer-accent, #24a9b3);
  color: var(--inv-surface, #fff);
}

.vf-newsletter-input:focus {
  outline: none;
  border-color: var(--inv-footer-accent);
}

/* -------------------------------------------------------------
   Off
   ------------------------------------------------------------- */
.inv-no-motion .inv-swap__ch,
.vf-animation-disabled .inv-swap__ch {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .inv-swap__ch {
    transition: none;
  }
}

/* =============================================================
   Shape and skin

   The footer used to be a band bolted under the page: full width,
   a hairline on top, and whatever colour the page had. Everything
   above it stands in a capsule, so it read as a different site.

   It is a capsule now, and the skin is a choice. Each skin only
   says what it changes; everything else keeps following the
   design tokens, so a shop that never opens these settings still
   gets a footer that matches its own colours.
   ============================================================= */
/* "Abstand zum Bildschirmrand" gehört in der Kapsel-Form hierher.
 *
 * Auf .inv-footer-shell stand er als padding-inline — und die Kapsel setzt
 * darauf ein padding-Kurzschreiben, das die logische Eigenschaft überschreibt.
 * Der Regler bewegte sich in der Vorschau und der Footer blieb stehen. In der
 * Kapsel-Form ist der Abstand zum Rand ohnehin der des Footers, nicht der der
 * Kapsel: innen entscheidet "Innenabstand links & rechts". */
.inv-footershell-capsule .vf-footer {
  border-top: 0;
  background-color: transparent;
  padding-inline: var(--inv-footer-px, var(--inv-edge, 10px));

  /* Unten stand derselbe Wert wie an den Seiten — zwei Abstände an einem
     Regler, und der untere ist der, den man sieht. Jetzt hat er einen
     eigenen und fällt auf den seitlichen zurück, solange keiner gesetzt ist. */
  padding-bottom: var(--inv-footer-gap-bottom, var(--inv-footer-gap-bottom-set, var(--inv-footer-px, var(--inv-edge, 10px))));
}

.inv-footershell-capsule .inv-footer-shell {
  max-width: min(var(--inv-footer-max-w, 100%), var(--inv-shell-max, 100%));
  /*
   * Oben und unten als eigene Zeilen, nicht als Kurzform.
   *
   * "Innenabstand oben & unten" war ein Regler fuer zwei Abstaende. Wer unten
   * Luft wollte und oben nicht, konnte das nicht sagen. Die beiden neuen
   * Regler stehen davor und fallen auf den gemeinsamen zurueck, solange sie
   * leer sind — dieselbe Kette wie beim Abstand unter dem Footer.
   */
  padding-block-start: var(--inv-footer-pad-top, var(--inv-footer-pad-y, var(--inv-footer-pad-y-set, 56px)));
  padding-block-end: var(--inv-footer-pad-bottom, var(--inv-footer-pad-y, var(--inv-footer-pad-y-set, 56px)));
  padding-inline: var(--inv-footer-pad-x, var(--inv-footer-pad-x-set, 40px));
  border: 1px solid var(--inv-footer-edge, var(--inv-footer-edge-skin, var(--inv-footer-line)));
  border-radius: var(--inv-footer-radius, var(--inv-footer-radius-set, var(--inv-radius-capsule, 20px)));
  background: var(--inv-footer-surface, var(--inv-footer-surface-skin, var(--inv-surface, #fff)));
  overflow: hidden;
}

/* The aura belongs to the capsule now, not to the page behind it. */
.inv-footershell-capsule .inv-footer-aura {
  inset: auto var(--inv-footer-px, var(--inv-edge, 10px)) var(--inv-footer-px, var(--inv-edge, 10px));
  border-radius: var(--inv-footer-radius, var(--inv-footer-radius-set, var(--inv-radius-capsule, 20px)));
}

.inv-footershell-full .inv-footer-shell {
  padding-block-start: var(--inv-footer-pad-top, var(--inv-footer-pad-y, var(--inv-footer-pad-y-set, 56px)));
  padding-block-end: var(--inv-footer-pad-bottom, var(--inv-footer-pad-y, var(--inv-footer-pad-y-set, 56px)));
}

/* ---- skins ----------------------------------------------------------
 *
 * Ein Stil setzt --inv-footer-surface-skin, nicht --inv-footer-surface.
 *
 * Vorher definierte er die Variable selbst — und zwar auf <body>, während die
 * Farbwähler sie auf :root schreiben. Body liegt näher an der Kapsel, also
 * gewann immer der Stil: "Farbe der Fläche" und "Farbe des Rahmens" taten bei
 * jedem Stil außer "Papier" nichts. Jetzt bringt der Stil nur die Vorgabe mit,
 * und eine gesetzte Farbe steht davor. */
.inv-footerskin-glass {
  --inv-footer-surface-skin: color-mix(in srgb, var(--inv-surface, #fff) 72%, transparent);
  --inv-footer-edge-skin: color-mix(in srgb, var(--inv-fg, #0f172a) 10%, transparent);
}

.inv-footerskin-glass .inv-footer-shell {
  border-top-color: color-mix(in srgb, #fff 85%, transparent);
  box-shadow:
    0 20px 60px -30px rgba(15, 23, 42, .3),
    inset 0 1px 0 rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.inv-footerskin-ink {
  --inv-footer-surface-skin: var(--inv-primary, #0f172a);
  --inv-footer-edge-skin: transparent;
  --inv-footer-fg: #f8fafc;
  --inv-footer-muted: color-mix(in srgb, #f8fafc 62%, transparent);
  --inv-footer-line: color-mix(in srgb, #f8fafc 14%, transparent);
  --inv-footer-head-color: #ffffff;
}

.inv-footerskin-accent {
  --inv-footer-surface-skin: color-mix(in srgb, var(--inv-accent, #24a9b3) 12%, var(--inv-surface, #fff));
  --inv-footer-edge-skin: color-mix(in srgb, var(--inv-accent, #24a9b3) 26%, transparent);
}

.inv-footerskin-outline {
  --inv-footer-surface-skin: transparent;
  --inv-footer-edge-skin: color-mix(in srgb, var(--inv-fg, #0f172a) 16%, transparent);
}

.inv-footerskin-outline .inv-footer-aura { display: none; }

/* ---- Vorlagen ---------------------------------------------------------
 *
 * Eine Vorlage ist kein zweiter Satz Regeln, sondern ein Satz Vorgaben.
 *
 * Sie schreibt `--x-set`, nie `--x`. Der Grund steht ein Stück weiter oben
 * schon einmal: eine Klasse am <body> liegt naeher am Element als das :root,
 * in das der Customizer schreibt — eine Vorlage, die `--inv-footer-pad-y`
 * selbst setzte, wuerde den Regler daneben stumm schalten. So herum gilt:
 * Regler vor Vorlage vor Vorgabe.
 *
 * Was hier bewusst fehlt: Abzeichen, blinkende Punkte, Zaehler. Eine
 * Fusszeile, die blinkt, sieht nicht teuer aus.
 * --------------------------------------------------------------------- */

/* Eng — fuer eine Seite, die unten zum Schluss kommen soll. */
body.inv-footerset-kompakt {
  --inv-footer-pad-y-set: 32px;
  --inv-footer-pad-x-set: 28px;
  --inv-footer-rows-pad-set: 24px;
  --inv-footer-col-gap-set: 24px;
  --inv-footer-gap-set: 16px;
  --inv-footer-radius-set: 16px;
  --inv-footer-aura-opacity-set: 0;
}

/* Weit — Luft als Gestaltungsmittel, fuer wenige Spalten. */
body.inv-footerset-weit {
  --inv-footer-pad-y-set: 88px;
  --inv-footer-pad-x-set: 64px;
  --inv-footer-rows-pad-set: 64px;
  --inv-footer-col-gap-set: 64px;
  --inv-footer-gap-set: 72px;
  --inv-footer-radius-set: 28px;
}

/* Band — laeuft bis an die Kanten, auch als Kapsel. */
body.inv-footerset-band {
  --inv-footer-pad-y-set: 64px;
  --inv-footer-pad-x-set: 48px;
  --inv-footer-rows-pad-set: 40px;
  --inv-footer-gap-set: 0px;
  --inv-footer-gap-bottom-set: 0px;
  --inv-footer-radius-set: 0px;
}

body.inv-footerset-band .inv-footer-shell {
  box-shadow: none;
}

/* Linie — ganz ruhig: kein Schein, keine Rundung, ein Haarstrich oben. */
body.inv-footerset-linie {
  --inv-footer-pad-y-set: 40px;
  --inv-footer-pad-x-set: 0px;
  --inv-footer-rows-pad-set: 28px;
  --inv-footer-col-gap-set: 40px;
  --inv-footer-gap-set: 40px;
  --inv-footer-radius-set: 0px;
  --inv-footer-aura-opacity-set: 0;
}

body.inv-footerset-linie .inv-footer-shell {
  border-inline: 0;
  border-block-end: 0;
  box-shadow: none;
  background: transparent;
}

/* Karte — die Fusszeile als eigenes Stueck Papier. */
body.inv-footerset-karte {
  --inv-footer-pad-y-set: 72px;
  --inv-footer-pad-x-set: 56px;
  --inv-footer-rows-pad-set: 48px;
  --inv-footer-col-gap-set: 56px;
  --inv-footer-gap-set: 56px;
  --inv-footer-radius-set: 32px;
}

body.inv-footerset-karte .inv-footer-shell {
  box-shadow: 0 40px 90px -50px rgba(15, 23, 42, .45);
}

/* ---- type ------------------------------------------------------------ */
/* Nur noch der Zeilenabstand steht hier: Größe, Stärke und Farbe stehen weiter
   oben, dort wo die Regel spezifisch genug ist, um auch zu gelten. */
.vf-footer-col ul,
.inv-footer-col ul,
.inv-footer-nav {
  gap: var(--inv-footer-link-gap, 10px);
}

/* =============================================================
   Die Karte

   Eine fünfte Spalte, rechts neben den Listen. Sie lädt erst, wenn jemand
   darauf klickt: das <template> im Markup steht im Dokument, der Browser holt
   aber nichts daraus, solange es niemand herausnimmt. Deshalb sieht die Spalte
   vorher aus wie eine Karte und ist doch keine — die Fläche, der Hinweis, der
   Knopf.
   ============================================================= */
.inv-footer-map__frame {
  /* Die Karte hatte nur eine Hoehe. In einer schmalen Spalte ist das genug,
     in einer breiten wird sie dadurch ein Band. */
  max-width: var(--inv-footer-map-w, none);
  position: relative;
  margin-top: 1.1rem;
  height: var(--inv-footer-map-h, 200px);
  border-radius: var(--inv-footer-map-radius, var(--inv-radius, 16px));
  border: 1px solid var(--inv-footer-line);
  overflow: hidden;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--inv-footer-accent) 10%, transparent) 0%,
      color-mix(in srgb, var(--inv-footer-muted) 8%, transparent) 100%);
}

.inv-footer-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(var(--inv-footer-map-gray, 0%));
}

.inv-footer-map__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  text-align: center;
}

.inv-footer-map__note {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--inv-footer-muted);
  max-width: 28ch;
}

.inv-footer-map__btn {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  padding: .5rem 1rem;
  border-radius: var(--inv-radius-sm, 10px);
  border: 1px solid var(--inv-footer-accent);
  background: color-mix(in srgb, var(--inv-footer-accent) 14%, transparent);
  color: var(--inv-footer-fg);
  transition:
    background-color var(--inv-motion, 400ms) var(--inv-ease, ease),
    transform var(--inv-motion, 400ms) var(--inv-ease, ease);
}

.inv-footer-map__btn:hover,
.inv-footer-map__btn:focus-visible {
  background: color-mix(in srgb, var(--inv-footer-accent) 26%, transparent);
  transform: translateY(calc(var(--inv-hover-lift, 4px) * -.4));
}

.inv-footer-map__link {
  display: inline-block;
  margin-top: .7rem;
  font-size: var(--inv-footer-link-size, 15px);
  font-weight: var(--inv-footer-link-weight, 500);
  color: var(--inv-footer-muted);
  text-decoration: none;
}

.inv-footer-map__link:hover {
  color: var(--inv-footer-fg);
}

/* Wie viele Spalten wirklich dastehen.
 *
 * Die Kontakt-Spalte trägt `hidden`, solange Telefon, E-Mail und Adresse leer
 * sind — im Raster stand ihre Spalte trotzdem, also endete der Footer rechts
 * mit einem leeren Viertel. Mit der Karte wäre daraus ein leeres Fünftel
 * geworden. Vier Fälle, weil es vier gibt.
 *
 * Alle vier gehören zur Anordnung „Standard" und stehen deshalb hinter ihrer
 * Körperklasse. Ohne sie gewannen sie gegen jede andere Anordnung: zwei
 * `:has()` hintereinander wiegen vier Klassen, `body.inv-footercols-equal
 * .vf-footer-inner` nur zwei — „Gleich breit" ließ sich auswählen und tat
 * nichts, gemessen am 05.10.2026. Die Regeln sollen auch gar nicht für die
 * anderen gelten: die bringen ihre Spalten selbst mit.
 *
 * Die Klasse steht immer da — der Standardwert der Einstellung ist `brand`,
 * und der body_class-Filter druckt auch den. */
@media (min-width: 1024px) {
  body.inv-footercols-brand .vf-footer-inner:has(.inv-footer-contact[hidden]) {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  body.inv-footercols-brand .vf-footer-inner:has(.inv-footer-map) {
    grid-template-columns: 1.3fr .85fr .85fr .9fr 1.1fr;
  }

  body.inv-footercols-brand .vf-footer-inner:has(.inv-footer-map):has(.inv-footer-contact[hidden]) {
    grid-template-columns: 1.25fr .85fr .85fr 1.15fr;
  }
}

@media (max-width: 700px) {
  .inv-footershell-capsule .inv-footer-shell {
    padding: max(24px, calc(var(--inv-footer-pad-y, 56px) * .6))
             max(18px, calc(var(--inv-footer-pad-x, 40px) * .5));
  }
}

/* Der Satz, der nur in der Live-Vorschau steht (siehe inc/template-tags.php). */
.vf-newsletter-hint {
  margin: 1.35rem 0 0;
  padding: .75rem .9rem;
  border: 1px dashed var(--inv-footer-line);
  border-radius: var(--inv-radius-sm, 10px);
  color: var(--inv-footer-muted);
  font-size: .8125rem;
  line-height: 1.5;
}

/* =============================================================
   Wie die Spalten im Footer stehen

   Ab Werk ist die Markenspalte breiter als die drei daneben — sie trägt Logo,
   Satz, Symbole und die Anmeldung zum Newsletter. Das ist eine gute Vorgabe
   und eine schlechte Regel: ein Laden mit vier gleich schweren Spalten will
   sie gleich breit, einer mit zweien will sie an den Rändern.

   Unter 1024 px bleibt alles, wie es ist: dort stehen die Spalten ohnehin
   untereinander, und eine Anordnung nebeneinander hat nichts zu ordnen.
   ============================================================= */
@media (min-width: 1024px) {

  /* Gleich breit — jede Spalte bekommt denselben Anteil.
   *
   * Der Mindestwert muss echt sein. Mit `minmax(0, 1fr)` legt auto-fit so
   * viele Spuren an, wie in die Zeile passen — bei einer Spur ohne
   * Mindestbreite sind das beliebig viele, und gemessen standen hinter drei
   * gefuellten Spalten zweiundfuenfzig leere mit 0 px. 180 px deckelt die
   * Zahl und laesst die Spalten umbrechen, wenn es eng wird. */
  body.inv-footercols-equal .vf-footer-inner,
  body.inv-footercols-center .vf-footer-inner {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  /* Dasselbe, und alles darin mittig. */
  body.inv-footercols-center .vf-footer-inner {
    justify-items: center;
    text-align: center;
  }

  body.inv-footercols-center .inv-footer-brand,
  body.inv-footercols-center .vf-footer-social,
  body.inv-footercols-center .vf-newsletter-form {
    justify-content: center;
  }

  /*
   * Zwei an den Rändern, der Rest dazwischen verteilt.
   *
   * Flex mit space-between, und sonst nichts. Hier standen zuerst automatische
   * Ränder auf der zweiten und der vorletzten Spalte, um die mittleren zu
   * einem Block in der Mitte zusammenzuziehen. Das ging schief, und zwar an
   * einer Stelle, die man nur im Browser sieht: `:nth-child` zählt auch die
   * Spalten mit `hidden`. Auf dieser Website sind Rechtliches und Kontakt
   * ausgeblendet, also traf `:nth-last-child(2)` eine Spalte mit
   * `display:none` — der rechte Rand kam nie zustande, der linke nahm den
   * ganzen freien Platz, und die Navigation klebte an der Karte.
   *
   * space-between braucht nicht zu zählen: die erste Spalte steht an der
   * linken Kante, die letzte an der rechten, der Rest verteilt sich gleich
   * dazwischen — bei drei Spalten heißt das genau „eine in der Mitte".
   */
  body.inv-footercols-edges .vf-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  /* Alles in einer Zeile, gleich breit, gleiche Abstände. */
  body.inv-footercols-row .vf-footer-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  body.inv-footercols-row .vf-footer-inner > * {
    flex: 1 1 0;
    min-width: 0;
  }
}


/* ── widgets.css ── */
/* =============================================================
   Inverta — Widgets (Sidebar)
   ============================================================= */

.widget {
    margin-bottom: 2rem;
}

.widget-title {
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--inv-border);
    color: var(--inv-fg);
}

.widget ul {
    list-style: none;
}

.widget ul li {
    padding: .375rem 0;
    border-bottom: 1px solid rgba(45, 53, 85, .5);
    font-size: .875rem;
    color: var(--inv-muted-fg);
}

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

.widget ul li a {
    color: var(--inv-muted-fg);
    text-decoration: none;
    transition: color .15s;
}

.widget ul li a:hover {
    color: var(--inv-fg);
}

.widget .search-form {
    display: flex;
    gap: .5rem;
}

.widget .search-field {
    flex: 1;
    background: var(--inv-muted);
    border: 1px solid var(--inv-border);
    border-radius: var(--inv-radius-full);
    padding: .5rem .875rem;
    color: var(--inv-fg);
    font-family: inherit;
    font-size: .875rem;
}

.widget .search-submit {
    background: var(--inv-primary);
    color: var(--inv-primary-fg);
    border: none;
    border-radius: var(--inv-radius-full);
    padding: .5rem 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}


/* -------------------------------------------------------------
   04. FRONTPAGE SECTIONS

   Moved to sections.css, which is built into its own bundle and loaded
   only where a section is actually rendered. Twenty-four stylesheets for
   the front page were arriving on every blog post, every product and
   every account screen — about half the weight of the shell they came
   wrapped in.
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   05. TEMPLATES & INTEGRATIONS
   ------------------------------------------------------------- */

/* ── templates.css ── */
/* =============================================================
   Inverta — Page Templates & Layouts
   ============================================================= */

.vf-page-header {
    padding-block: 4rem;
    text-align: center;
    background: var(--inv-gradient-hero);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--inv-border);
}

.vf-page-header h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
}

.vf-page-header p {
    margin-top: .875rem;
    color: var(--inv-muted-fg);
    font-size: 1.05rem;
    max-width: 44rem;
    margin-inline: auto;
}

.vf-page-header-cover {
    min-height: 280px;
    display: flex;
    align-items: center;
}

.vf-page-header-cover-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.vf-page-header-cover-overlay {
    position: absolute;
    inset: 0;
}

.vf-page-header-cover-content {
    position: relative;
    z-index: 1;
}

/* Layout Templates */
.vf-content-area {
    max-width: var(--inv-container-max);
    margin-inline: auto;
    /* Der seitliche Abstand traegt einen Namen, weil eine zweite Stelle ihn
       kennen muss: „Volle Breite“ holt sich in base/layout.css genau diesen
       Betrag als negativen Rand wieder heraus. Zwei Zahlen, die dasselbe
       meinen und auseinanderlaufen koennen, waeren hier ein Spalt oder eine
       Ueberlappung von ein paar Pixeln — je nachdem, wer zuerst geaendert wird. */
    padding: 3rem var(--inv-content-pad, 1.5rem) 5rem;
    display: grid;
    gap: 2.5rem;
}

.vf-layout-sidebar-right .vf-main { order: 1; }

.vf-layout-sidebar-right .vf-sidebar { order: 2; }

.vf-layout-sidebar-left .vf-main { order: 2; }

.vf-layout-sidebar-left .vf-sidebar { order: 1; }

@media (min-width: 768px) {
.vf-layout-sidebar-right {
        grid-template-columns: 1fr 300px;
    }

/* Gespiegelt, nicht nur umsortiert. Hier stand dieselbe Spaltenfolge wie
   rechts, und `order` setzte den Inhalt dann in die zweite Spalte — die mit
   300 px. Ein Beitrag mit linker Sidebar war 300 px breit, die Sidebar 752
   (gemessen am 15.10.2026; dieselbe Regel trägt die Vorlage „Linke Sidebar“). */
.vf-layout-sidebar-left {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 767px) {
.vf-layout-sidebar-right,
.vf-layout-sidebar-left {
        grid-template-columns: 1fr;
    }

.vf-layout-sidebar-right .vf-main,
.vf-layout-sidebar-right .vf-sidebar,
.vf-layout-sidebar-left .vf-main,
.vf-layout-sidebar-left .vf-sidebar {
        order: unset;
    }
}

/* =============================================================
   Page title area

   Padding, alignment and the cover overlay used to be printed from
   dynamic-css.php as three literal rules, so they could only change
   after a save. As custom properties they move in the live preview
   like every other option.
   ============================================================= */
.inv-page-header,
.vf-page-header {
  padding-top: var(--inv-page-title-pt, 60px);
  padding-bottom: var(--inv-page-title-pb, 60px);
  text-align: var(--inv-page-title-align, center);
}

.inv-page-header-cover-overlay,
.vf-page-header-cover-overlay {
  background: var(--inv-page-title-overlay, rgba(15, 23, 42, .55));
}


/* ── content.css ── */
/* =============================================================
   Inverta — Fließtext im Seiteninhalt

   Bis 1.1.9 stand das in pages/blog.css und galt nur unter .entry-content.
   Der Editor lädt blog.css nicht, und auch sonst nichts davon: gemessen am
   13.10.2026 auf derselben Seite, vorne und im Editor, unterschieden sich
   Zeilenhöhe (1,8 gegen „normal“), Textfarbe (gedämpft gegen voll), Links
   (Primärfarbe ohne Unterstrich gegen Akzent mit), Zitat (Karte gegen Linie)
   und jeder Abstand zwischen zwei Blöcken. Wer im Editor eine Seite baute,
   sah eine andere als die, die er veröffentlichte.

   Jetzt dieselbe Datei für beide Wurzeln — .entry-content vorne,
   .editor-styles-wrapper im Editor (geladen über add_editor_style(), siehe
   inc/admin/editor-styles.php), wie components/blocks.css. Sie steht in
   main.css an der Stelle, an der blog.css stand, damit sich vorne an der
   Reihenfolge nichts verschiebt.
   ============================================================= */

.entry-content,
.editor-styles-wrapper {
    line-height: 1.8;
    /* In px umgerechnet in dieser Schrift, siehe base/variables.css. */
    --inv-measure-abs: var(--inv-measure, 68ch);
}

.entry-content h2,
.editor-styles-wrapper h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.entry-content h3,
.editor-styles-wrapper h3 {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}

.entry-content p,
.editor-styles-wrapper p {
    margin-bottom: 1.25rem;
    color: var(--inv-muted-fg);
}

/* Dieselbe Mischung wie für jeden Link (base/reset.css): auf hellem Grund
   praktisch die Primärfarbe, auf einer dunklen Palette lesbar. Hier stand
   die reine Primärfarbe, und weil sie eine Klasse mehr hat, überstimmte sie
   auch die Links, die es anders wollten — „Passwort vergessen?“ und die AGB
   an der Kasse mit „Dunkel“: 2,45:1 und 2,71:1 (15.10.2026). */
.entry-content a,
.editor-styles-wrapper a {
    color: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-fg, #0f172a));
}

.entry-content blockquote,
.editor-styles-wrapper blockquote {
    border-left: 3px solid var(--inv-primary);
    padding: 1rem 1.5rem;
    margin-block: 1.5rem;
    background: var(--inv-surface);
    border-radius: 0 var(--inv-radius-lg) var(--inv-radius-lg) 0;
    color: var(--inv-muted-fg);
    font-style: italic;
}

.entry-content code,
.editor-styles-wrapper code {
    background: var(--inv-surface);
    padding: .2rem .4rem;
    border-radius: .25rem;
    font-size: .875em;
}

.entry-content pre,
.editor-styles-wrapper pre {
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--inv-radius-lg);
    padding: 1.25rem;
    overflow-x: auto;
    margin-block: 1.5rem;
}

.entry-content ul,
.entry-content ol,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: var(--inv-muted-fg);
}

.entry-content img,
.editor-styles-wrapper img {
    border-radius: var(--inv-radius-xl);
    margin-block: 1rem;
}

/* -------------------------------------------------------------
   Abstand zwischen zwei Blöcken

   Vorne hatte nur, wer eine eigene Regel trug, einen Abstand: Absatz, Liste,
   Überschrift, Zitat. Eine Tabelle direkt über einem Aufklapper, ein Trenner,
   eine farbige Gruppe, eine Knopfreihe — die stießen ohne Luft aneinander. Im
   Editor dagegen stand zwischen allem 24 px, so dass die Lücke dort nie
   auffiel.

   Jetzt ein Abstand für alle, so groß wie der eines Absatzes; er fällt mit dem
   unteren Rand eines Absatzes zusammen, an Absätzen ändert sich also nichts.
   Nach einer Überschrift keiner — deren eigener unterer Rand ist der
   gewollte, kleinere. Sektionen bringen ihren Abstand selbst mit.

   :where() hält das Gewicht bei einer Klasse, so dass jede Regel oben
   (.entry-content h2 und so weiter) gewinnt.
   ------------------------------------------------------------- */
.entry-content > :where(* + *),
.editor-styles-wrapper :where(.is-root-container > * + *) {
    margin-block-start: 1.25rem;
}

.entry-content > :where(:is(h1, h2, h3, h4, h5, h6, [class*="vf-section-"]) + *, [class*="vf-section-"]),
.editor-styles-wrapper :where(.is-root-container > :is(h1, h2, h3, h4, h5, h6) + *) {
    margin-block-start: 0;
}

/* Ein Abschnitt ist kein Absatz: Gruppen, Spalten, Cover und alles, was
   breit sein will, bekommen oben und unten den Abstand eines Abschnitts. Mit
   den 1,25rem darüber standen zwei Vorlagen (inc/block-patterns.php) so dicht
   untereinander, dass die Karten der einen an die Überschrift der nächsten
   stießen — gemessen am 13.10.2026: 20 px. */
.entry-content > :where(* + :is(.wp-block-group, .wp-block-columns, .wp-block-cover, .alignwide, .alignfull)),
.entry-content > :where(:is(.wp-block-group, .wp-block-columns, .wp-block-cover, .alignwide, .alignfull) + *),
.editor-styles-wrapper :where(.is-root-container > * + :is(.wp-block-group, .wp-block-columns, .wp-block-cover, .alignwide, .alignfull)),
.editor-styles-wrapper :where(.is-root-container > :is(.wp-block-group, .wp-block-columns, .wp-block-cover, .alignwide, .alignfull) + *) {
    margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
}


/* ── blog.css ── */
/* =============================================================
   Inverta — Blog, Single Post & Comments
   ============================================================= */

/* Post Card */
/* The option first: base/section-vars.css reads --vf-news-radius, but this
   file loads after it, so a bare value here shadowed the control. */
.vf-post-card {
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--vf-news-radius, var(--inv-radius-2xl));
    overflow: hidden;
    transition: border-color .2s;
}

/* Die Farbe des Themes statt eines festen Orange, das zu keiner Palette
   gehörte (rgba(224, 123, 48) stand hier aus der Zeit vor den Farbreglern). */
.vf-post-card:hover {
    border-color: color-mix(in srgb, var(--inv-accent, #24a9b3) 50%, transparent);
}

.vf-post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* „Bildformat in der Karte“. In der Liste bestimmt der Text die Höhe, dort
   gilt das Format nicht (unten, .vf-list-layout). */
body[class*="inv-blogthumb-"] .vf-posts-grid:not(.vf-list-layout) .vf-post-thumbnail img {
    height: auto;
}
body.inv-blogthumb-16-9 .vf-post-thumbnail img { aspect-ratio: 16 / 9; }
body.inv-blogthumb-3-2 .vf-post-thumbnail img { aspect-ratio: 3 / 2; }
body.inv-blogthumb-4-3 .vf-post-thumbnail img { aspect-ratio: 4 / 3; }
body.inv-blogthumb-1-1 .vf-post-thumbnail img { aspect-ratio: 1 / 1; }

/* Unter dem Text eines Beitrags: Kategorien und Schlagwörter. Stand bis 1.2.2
   als style-Attribut im Template — ein Child-Theme kam nicht heran. */
.single .entry-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--inv-border);
    font-size: .8rem;
    color: var(--inv-muted-fg);
}

.vf-post-body {
    padding: 1.5rem;
}

.vf-post-meta {
    font-size: .75rem;
    color: var(--inv-muted-fg);
    margin-bottom: .625rem;
}

/* Datum und Autor in einer Zeile, mit einem Punkt dazwischen — nur wenn beide
   stehen. */
.vf-post-meta .vf-entry-posted + .vf-entry-author::before {
    content: "·";
    margin-inline: .45em;
}

.vf-post-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .75rem;
}

.vf-post-title a {
    color: var(--inv-fg);
    text-decoration: none;
}

.vf-post-title a:hover {
    color: var(--inv-primary);
}

.vf-post-excerpt {
    font-size: .875rem;
    color: var(--inv-muted-fg);
    line-height: 1.65;
}

/* Der Link unter einem Beitrag — ein Link, kein Knopf. */
.vf-read-more {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .875rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.vf-read-more:hover {
    text-decoration: none;
    border-bottom: none;
}

/* In der Sektion "Blog & News" trägt dasselbe Element zusätzlich .vf-btn und
   .vf-btn-outline: dort ist es der Abschluss der Sektion und soll aussehen wie
   die Knöpfe daneben. Die Textfarbe oben hätte die des Knopfstils überschrieben
   — sie steht deshalb nicht mehr in der Grundregel, sondern hier. */
.vf-read-more:not(.vf-btn) {
    color: var(--inv-primary);
}

/* Zwei Spalten: der ältere Beitrag links, der neuere rechts — auch wenn ein
   langer Titel umbricht oder nur einer von beiden da ist. Als Flexbox mit
   Umbruch rutschte „Nächster“ unter „Vorheriger“ an den linken Rand. */
.vf-post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--inv-border);
}

.vf-post-nav a {
    color: var(--inv-fg);
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
}

.vf-post-nav a:hover {
    color: var(--inv-primary);
}

.vf-post-nav a[rel="next"] {
    grid-column: 2;
    text-align: end;
}

.comment-form .form-submit {
    margin-top: 1rem;
}

/* Nur der Abstand.
 *
 * Hier stand auch die Spaltenzahl — `repeat(auto-fill, minmax(280px, 1fr))` ab
 * 640 px —, und diese Datei lädt nach base/section-vars.css, wo dasselbe
 * Raster aus --vf-news-cols gerechnet wird. Gleiche Spezifität, später im
 * Stapel: die Regel hier gewann, und zwei Einstellungen liefen ins Leere —
 * "Spalten (Desktop)" der Sektion "Blog & News" und "Spalten im Raster" der
 * Blog-Übersicht. Die Spaltenzahl steht jetzt an einer Stelle. */
.vf-posts-grid {
    display: grid;
    gap: 1.5rem;
}

/* Die Spalten der Blog-Übersicht — nur dort (.vf-main > …), nicht in der
 * Sektion „Blog & News“, die ihre eigenen Werte für Tablet und Telefon hat.
 *
 * Der Satz oben stimmte nur auf der Startseite. base/section-vars.css lädt
 * ausschließlich auf Seiten mit Sektionen; auf der Beitragsseite und in jedem
 * Archiv fehlte die Regel ganz, und die Beiträge standen in einer Spalte über
 * die volle Breite — „Spalten im Raster“ tat nichts (gemessen am 15.10.2026:
 * 3 eingestellt, 1 Spalte von 1232 px). */
.vf-main > .vf-posts-grid {
    grid-template-columns: repeat(var(--vf-news-cols, 3), minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .vf-main > .vf-posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .vf-main > .vf-posts-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vf-posts-grid.vf-list-layout,
.vf-main > .vf-posts-grid.vf-list-layout {
    grid-template-columns: minmax(0, 1fr);
}

/* „Liste“ war bis 1.2.2 nur eine Spalte derselben Karten — 1232 px breit, das
 * Bild 1232 × 200 px. Jetzt eine Liste: Bild links, Text rechts, in der
 * Lesebreite der Seite; auf dem Telefon untereinander wie im Raster. */
.vf-main > .vf-posts-grid.vf-list-layout {
    max-width: 60rem;
    margin-inline: auto;
}

@media (min-width: 641px) {
    .vf-list-layout .vf-post-card:has(> .vf-post-thumbnail) {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: stretch;
    }

    /* Die Höhe gibt der Text vor, nicht das Bild: ein quadratisches
       Beitragsbild machte jede Zeile 380 px hoch. */
    .vf-list-layout .vf-post-thumbnail {
        position: relative;
        min-height: 13rem;
    }

    .vf-list-layout .vf-post-thumbnail img {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .vf-list-layout .vf-post-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Single Entry Content: steht jetzt in components/content.css, für die Seite
   und den Editor zugleich. */

/* Comments */
.vf-comments {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--inv-border);
}

.vf-comment-list {
    list-style: none;
}

.vf-comment {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--inv-border);
}

.vf-comment:last-child {
    border-bottom: none;
}

.vf-comment-meta {
    font-size: .8rem;
    color: var(--inv-muted-fg);
    margin-bottom: .5rem;
}

/* Nicht das Häkchen „Name, E-Mail … speichern“: mit width:100% stand es
   allein mitten in der Zeile, seine Beschriftung darunter. 16 px gegen den
   Zoom von Safari auf dem iPhone. */
.comment-form input:not([type="checkbox"], [type="radio"], [type="submit"]),
.comment-form textarea {
    width: 100%;
    background: var(--inv-muted);
    border: 1px solid var(--inv-border);
    border-radius: var(--inv-radius-lg);
    padding: .625rem .875rem;
    color: var(--inv-fg);
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: .75rem;
}

.comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .85rem;
    color: var(--inv-muted-fg);
}

.comment-form .comment-form-cookies-consent input {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .2rem 0 0;
    accent-color: var(--inv-primary);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--inv-primary);
}

.comment-form input[type=submit] {
    background: var(--inv-primary);
    color: var(--inv-primary-fg);
    border: none;
    border-radius: var(--inv-radius-full);
    padding: .75rem 2rem;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}

/* Der einzelne Beitrag: eine Breite für alles, was zum Text gehört.
 *
 * „Maximale Inhaltsbreite“ setzte bis 1.2.2 nur die Breite von
 * .entry-content — dessen Absätze aber hatten weiter die Lesebreite (68ch,
 * 680 px), jeder Wert darüber änderte nichts. Und unter dem Text standen
 * Kategorien, Teilen, Kommentare und „Vorheriger / Nächster“ über die ganze
 * Breite, 276 px links vom Text (gemessen am 15.10.2026).
 *
 * Jetzt ist die Einstellung die Lesebreite dieses Beitrags, und alles unter
 * dem Text steht in derselben Spalte. Das Beitragsbild oben bleibt breit. */
.single .vf-main > article,
.single .vf-main > article .entry-content {
  --inv-measure-abs: var(--inv-single-content-w, var(--inv-measure, 68ch));
}

.single .entry-content {
  max-width: none;
}

.vf-single-thumb {
  margin-block-end: 2rem;
}

.vf-single-thumb__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--inv-radius-lg, 1rem);
}

.single .vf-main > article > :is(.vf-single-thumb, .vf-post-meta, .entry-footer, .vf-post-share, .vf-comments, .vf-post-nav) {
  max-width: min(var(--inv-measure-abs, 680px), 100%);
  margin-inline: auto;
}


/* -------------------------------------------------------------
   Teilen

   Drei Links, keine Fremdskripte: siehe den Kommentar in
   template-parts/content-single.php. Sie sehen aus wie die Chips des Shops,
   damit der Beitrag nicht plötzlich eine zweite Designsprache spricht.
   ------------------------------------------------------------- */
.vf-post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-block: 1.5rem 0;
  padding-block-start: 1rem;
  border-top: 1px solid var(--inv-border, #e2e8f0);
}

.vf-post-share__label {
  margin-inline-end: .25rem;
  color: var(--inv-muted-fg, #64748b);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vf-post-share__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: .9rem;
  border: var(--inv-border-w, 1px) solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-full, 9999px);
  background: var(--inv-surface, #fff);
  color: var(--inv-fg, #0f172a);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color var(--inv-motion, 400ms) var(--inv-ease, ease),
    color var(--inv-motion, 400ms) var(--inv-ease, ease);
}

.vf-post-share__link:hover,
.vf-post-share__link:focus-visible {
  border-color: var(--inv-accent, #24a9b3);
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}


/* ── 404.css ── */
/* =============================================================
   Inverta — the 404 page

   One column, centred, with the numeral doing the shouting so
   the words underneath can be calm. Everything below the button
   is there to get the visitor moving again: the search, then a
   handful of real destinations.
   ============================================================= */

.inv-404 {
  padding-block: var(--vf-404-pt, 80px) var(--vf-404-pb, 100px);
  padding-inline: var(--vf-404-px, var(--inv-edge, 10px));
}

.inv-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);

  max-width: var(--vf-404-max-w, 760px);
  margin-inline: auto;
  text-align: center;
}

/* The capsule, the same material every section on the front page stands on. */
.inv-404--capsule .inv-404__inner {
  max-width: min(var(--vf-404-max-w, 1180px), 100%);
  padding: clamp(36px, 6vw, 88px) clamp(20px, 4vw, 64px);
  border: 1px solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-capsule, 20px);
  background: var(--inv-surface, #fff);
  box-shadow: var(--inv-shadow-card, 0 4px 16px -6px rgba(15, 23, 42, .14));
}

/* -------------------------------------------------------------
   The numeral
   ------------------------------------------------------------- */
.inv-404__numeral {
  margin: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  /* min() so a 200px numeral cannot be wider than a phone. */
  font-size: min(var(--inv-404-numeral, 200px), 34vw);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.05em;
  color: var(--inv-404-numeral-color, var(--inv-fg, #0f172a));
}

/* -------------------------------------------------------------
   The heading, with one word marked
   ------------------------------------------------------------- */
.inv-404__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .45em;

  margin: clamp(8px, 1.2vw, 14px) 0 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-404-title, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.inv-404__accent {
  padding: .06em .34em .12em;
  border-radius: var(--inv-radius-sm, 10px);
  background: var(--inv-404-accent-bg, var(--inv-accent, #24a9b3));
  color: var(--inv-404-accent-ink, var(--inv-accent-fg, var(--inv-fg, #0f172a)));
}

.inv-404__text {
  max-width: 52ch;
  margin: .3rem 0 0;
  font-size: var(--inv-404-text, 16px);
  line-height: 1.65;
  color: var(--inv-muted-fg, #64748b);
}

/* -------------------------------------------------------------
   Actions
   ------------------------------------------------------------- */
.inv-404__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-top: clamp(14px, 2vw, 22px);
}

.inv-404__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--inv-fg, #0f172a);
  font-size: var(--vf-404-btn-size, 15px);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.inv-404__link:hover .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

@media (max-width: 600px) {
  .inv-404__head { font-size: max(22px, calc(var(--inv-404-title, 38px) * .72)); }
}

/* The button's own settings — size, weight, ink and rounding come from the
   shared button group, the same four every section offers. */
/* .inv-btn on its own is a shape, not a surface — the fill comes from a
   modifier like .inv-btn-primary. Setting only the ink here left white text
   on a white page: a button you could click and not see.
   A button style chosen in the Customizer paints over this. */
.inv-404__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  min-height: 46px;
  padding: 0 clamp(18px, 2.2vw, 28px);
  border: 1px solid transparent;
  border-radius: var(--vf-404-btn-radius, var(--inv-radius-sm, 10px));

  background: var(--inv-accent, #24a9b3);
  color: var(--vf-404-btn-ink, #fff);

  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--vf-404-btn-size, 15px);
  font-weight: var(--vf-404-btn-weight, 600);
  text-decoration: none;

  box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--inv-accent, #24a9b3) 80%, transparent);
  transition:
    background-color var(--inv-motion, 400ms) var(--inv-ease),
    box-shadow var(--inv-motion, 400ms) var(--inv-ease);
}

.inv-404__btn:hover {
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 88%, #000);
}

.inv-404__link {
  font-weight: var(--vf-404-btn-weight, 600);
}

/* The section's own button ink, handed to the shared button styles. Unset it
   resolves to nothing and the chosen style keeps its own colour. */
.inv-404 {
  --inv-btn-ink: var(--vf-404-btn-ink);
}

/* =============================================================
   The two cards under the message

   A 404 that ends at the button leaves the rest of the screen
   empty and the visitor with one option. These are the two
   things a repair shop can offer someone who has just hit a dead
   end: bring the device in, or ask first.
   ============================================================= */
.inv-404-cards {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(14px, 1.6vw, 20px);

  max-width: var(--vf-404-cards-max-w, 1180px);
  margin: clamp(28px, 4vw, 56px) auto 0;
}

.inv-404-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 30px);

  min-height: 240px;
  padding: clamp(26px, 3.2vw, 44px);
  border-radius: var(--inv-radius-capsule, 20px);
  overflow: hidden;
}

.inv-404-card--dark {
  background: var(--inv-404-c1-bg, var(--inv-primary, #0f172a));
  color: #fff;
}

.inv-404-card--light {
  border: 1px solid var(--inv-border, #e2e8f0);
  background: color-mix(in srgb, var(--inv-surface, #fff) 60%, transparent);
}

.inv-404-card__body {
  position: relative;
  z-index: 2;
  max-width: 30ch;
  text-align: start;
}

.inv-404-card__title {
  margin: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.inv-404-card__text {
  margin: .7rem 0 0;
  font-size: .9rem;
  line-height: 1.6;
  opacity: .78;
}

.inv-404-card__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2.4vw, 28px);
}

.inv-404-card__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--inv-radius-sm, 10px);

  background: #fff;
  color: var(--inv-primary, #0f172a);

  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color var(--inv-motion, 400ms) var(--inv-ease),
    border-color var(--inv-motion, 400ms) var(--inv-ease),
    color var(--inv-motion, 400ms) var(--inv-ease);
}

.inv-404-card__btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

.inv-404-card__btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
}

.inv-404-card__btn--dark {
  align-self: flex-start;
  background: var(--inv-primary, #0f172a);
  color: #fff;
}

/* The arrow turns up and to the right, the same 45° every arrow in the theme
   makes — the header's links, the CTA, the mega-menu rows. */
.inv-404-card__btn svg,
.inv-404__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--inv-motion, 400ms) var(--inv-ease);
}

.inv-404-card__btn:hover svg,
.inv-404-card__btn:focus-visible svg,
.inv-404__link:hover svg,
.inv-404__link:focus-visible svg {
  transform: translate(3px, -3px) rotate(-45deg);
}

.inv-404-card__btn:hover .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

/* The picture sits in the corner, cropped by the card — the same trick the
   reference uses, without a mock-up to maintain. */
.inv-404-card__img {
  position: absolute;
  right: -6%;
  bottom: -18%;
  z-index: 1;
  width: min(46%, 260px);
  height: auto;
  transform: rotate(7deg);
  pointer-events: none;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .45));
}

@media (max-width: 900px) {
  .inv-404-cards { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .inv-404-card__img { display: none; }
  .inv-404-card__body { max-width: none; }
}


/* ── search.css ── */
/* =============================================================
   Inverta — search results

   A list, not a grid, by default: a search result is read as a
   line of text, and a card per hit turns four answers into a
   wall. The grid is there for a shop that wants pictures.
   ============================================================= */

.inv-search {
  padding-block: var(--vf-search-pt, 40px) var(--vf-search-pb, 80px);
  padding-inline: var(--vf-search-px, var(--inv-edge, 10px));
  max-width: var(--vf-search-max-w, 1180px);
  margin-inline: auto;
}

/* -------------------------------------------------------------
   Head
   ------------------------------------------------------------- */
.inv-search__head {
  margin-bottom: clamp(20px, 3vw, 36px);
}

.inv-search--capsule .inv-search__head {
  padding: clamp(24px, 3.6vw, 46px) clamp(20px, 3vw, 40px);
  border: 1px solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-capsule, 20px);
  background: var(--inv-surface, #fff);
}

.inv-search__eyebrow {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}

.inv-search__title {
  margin: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-search-title, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.inv-search__query {
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}

.inv-search__count {
  margin: .5rem 0 0;
  font-size: .875rem;
  color: var(--inv-muted-fg, #64748b);
  font-variant-numeric: tabular-nums;
}

.inv-search__form {
  position: relative;
  display: flex;
  align-items: center;
  width: min(460px, 100%);
  margin-top: clamp(14px, 2vw, 22px);
}

.inv-search__form input[type="search"] {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 46px 0 16px;
  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 85%, transparent);
  border-radius: var(--inv-radius-sm, 10px);
  background-color: color-mix(in srgb, var(--inv-surface, #fff) 65%, transparent);
  color: inherit;
  font-size: .95rem;
  box-shadow:
    0 4px 16px -6px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}

.inv-search__form input[type="search"]:focus {
  outline: none;
  border-color: var(--inv-accent, #24a9b3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent, #24a9b3) 26%, transparent);
}

.inv-search__form button {
  position: absolute;
  right: 5px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--inv-radius-sm, 10px);
  background: transparent;
  color: var(--inv-muted-fg, #64748b);
  cursor: pointer;
}

.inv-search__form button:hover { color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor); }
.inv-search__form svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------
   Body
   ------------------------------------------------------------- */
.inv-search__body--sidebar {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

@media (min-width: 900px) {
  .inv-search__body--sidebar {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* -------------------------------------------------------------
   Results
   ------------------------------------------------------------- */
.inv-search__list {
  display: grid;
  gap: var(--inv-search-gap, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.inv-searchlay-grid .inv-search__list {
  grid-template-columns: repeat(auto-fill, minmax(var(--inv-search-col, 280px), 1fr));
}

.inv-search__link {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);

  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius, 16px);
  background: var(--inv-surface, #fff);
  color: inherit;
  text-decoration: none;

  transition:
    border-color var(--inv-motion, 400ms) var(--inv-ease),
    box-shadow var(--inv-motion, 400ms) var(--inv-ease);
}

.inv-search__link:hover {
  border-color: color-mix(in srgb, var(--inv-accent, #24a9b3) 45%, var(--inv-border, #e2e8f0));
  box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .4);
}

.inv-searchlay-grid .inv-search__link {
  flex-direction: column;
  align-items: stretch;
}

.inv-search__thumb {
  flex: 0 0 auto;
  width: clamp(72px, 9vw, 108px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--inv-radius-sm, 10px);
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 4%, transparent);
}

.inv-searchlay-grid .inv-search__thumb {
  width: 100%;
}

.inv-search__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inv-search__text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.inv-search__kind {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}

.inv-search__name {
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-search-item, 19px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.inv-search__excerpt {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--inv-muted-fg, #64748b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inv-search__date {
  font-size: .78rem;
  color: var(--inv-muted-fg, #64748b);
}

.inv-search__arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--inv-muted-fg, #64748b);
  transition: transform var(--inv-motion, 400ms) var(--inv-ease);
}

.inv-searchlay-grid .inv-search__arrow { display: none; }

.inv-search__link:hover .inv-search__arrow {
  transform: translate(3px, -3px) rotate(-45deg);
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}

.inv-search__link:hover .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

/* -------------------------------------------------------------
   Nothing found
   ------------------------------------------------------------- */
.inv-search__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;

  padding: clamp(28px, 4vw, 56px);
  border: 1px dashed var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-capsule, 20px);
  background: color-mix(in srgb, var(--inv-surface, #fff) 55%, transparent);
}

.inv-search__empty-title {
  margin: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.inv-search__empty-text {
  max-width: 56ch;
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--inv-muted-fg, #64748b);
}

/* .inv-btn on its own is a shape, not a surface — the fill comes from a
   modifier like .inv-btn-primary. Setting only the ink here left white text
   on a white page: a button you could click and not see.
   A button style chosen in the Customizer paints over this. */
.inv-search__btn {
  margin-top: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  min-height: 46px;
  padding: 0 clamp(18px, 2.2vw, 28px);
  border: 1px solid transparent;
  border-radius: var(--vf-search-btn-radius, var(--inv-radius-sm, 10px));

  background: var(--inv-accent, #24a9b3);
  color: var(--vf-search-btn-ink, #fff);

  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--vf-search-btn-size, 15px);
  font-weight: var(--vf-search-btn-weight, 600);
  text-decoration: none;

  box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--inv-accent, #24a9b3) 80%, transparent);
  transition:
    background-color var(--inv-motion, 400ms) var(--inv-ease),
    box-shadow var(--inv-motion, 400ms) var(--inv-ease);
}

.inv-search__btn:hover {
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 88%, #000);
}

.inv-search__btn svg {
  width: 16px;
  height: 16px;
  transition: transform var(--inv-motion, 400ms) var(--inv-ease);
}

.inv-search__btn:hover svg { transform: translate(3px, -3px) rotate(-45deg); }

/* The section's own button ink, handed to the shared button styles. */
.inv-search {
  --inv-btn-ink: var(--vf-search-btn-ink);
}


/* -------------------------------------------------------------
   06. UTILITIES
   ------------------------------------------------------------- */

/* ── a11y.css ── */
/* =============================================================
   Inverta — nur für Screenreader

   Das Theme benutzt .screen-reader-text an fünf Stellen: der Sprunglink im
   Header, die Beschriftung der Suchfelder auf der Suchseite und im Shop, die
   der FAQ-Suche, und der Name einer Marke in der Sektions-Navigation, wenn die
   sichtbaren Beschriftungen abgeschaltet sind.

   Definiert hat die Klasse bisher WooCommerce. Auf dieser Website fällt das
   nicht auf, weil WooCommerce läuft — auf einer ohne wären fünf Texte
   plötzlich sichtbar, mitten im Layout. Eine Klasse, die das Theme selbst
   benutzt, gehört dem Theme.

   Versteckt wird mit clip-path, nicht mit einem Weg nach links aus dem Bild:
   ein Element auf left:-9999px liegt auf Arabisch rechts *im* Bild, und die
   Seite scrollt seitwegs. tools/tests/rtl.php prüft genau das.
   ============================================================= */

.screen-reader-text,
.inv-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    /* Das Kürzen der Zeile darf den vorgelesenen Text nicht mitkürzen. */
    word-wrap: normal !important;
}

/* Was fokussierbar ist, muss beim Ankommen mit der Tabulatortaste sichtbar
   werden — sonst ist es ein Versprechen, das niemand einlöst.
   Der Sprunglink des Themes hat seine eigene, feiner abgestimmte Fassung in
   components/header/header-tokens.css und ist hier ausgenommen: sonst gewönne
   diese Regel allein dadurch, dass sie später geladen wird. */
.screen-reader-text:focus:not(.inv-skip),
.inv-sr-only:focus {
    z-index: 1000000;
    top: var(--vf-adminbar-h, 0px);
    inset-inline-start: 8px;
    display: block;
    width: auto;
    height: auto;
    margin: 8px;
    padding: .75rem 1.25rem;
    clip-path: none;
    font-size: .95rem;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    color: var(--inv-fg, #0f172a);
    background: var(--inv-surface, #fff);
    border-radius: var(--inv-radius-sm, 10px);
    box-shadow: var(--inv-shadow-capsule, 0 10px 30px -8px rgba(15, 23, 42, .3));
}


/* =============================================================
   Der Fokusrahmen als Grundlage

   Jedes Bauteil dieses Themes bringt seinen eigenen Fokus mit — ein Ring aus
   box-shadow bei den Formularfeldern, eine Umrandung bei Knöpfen und Links.
   Wo eines das vergessen hat, war beim Durchlaufen mit der Tabulatortaste
   nicht zu sehen, wo man gerade steht; gefunden wurde das so, nicht gelesen.

   Diese Regel steht in :where() und hat damit kein Gewicht: jedes Bauteil
   überschreibt sie weiterhin mit seiner eigenen Fassung. Sie ist die Antwort
   für alles, was keine hat — und für alles, was künftig dazukommt.

   Drei Stellschrauben, damit ein Child-Theme den Ring an seine Farben
   anpassen kann, ohne jede Regel einzeln zu suchen.
   ============================================================= */
:root {
    --inv-focus-w: 2px;
    --inv-focus-off: 2px;
}

:where(a[href], area, button, input, select, textarea, summary, iframe, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--inv-focus-w, 2px) solid var(--inv-focus-c, var(--inv-accent, #24a9b3));
    outline-offset: var(--inv-focus-off, 2px);
}

/* Windows-Kontrastmodus: dort malt das System den Rahmen, und eine Farbe aus
   dem Theme wäre genau die Farbe, die der Nutzer abgeschaltet hat. */
@media (forced-colors: active) {
    :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
        outline-color: Highlight;
    }
}


/* ── animations.css ── */
/* =============================================================
   Inverta — Animations & Scroll Reveal
   ============================================================= */

@keyframes vf-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* .vf-animate used to sit at opacity:0 and wait for a script to reveal it, which means the page was blank to anything that never ran that script.
   The resting state is the finished state now; utilities/reveal.css owns the
   entrance, and it does it with a keyframe that only ever runs forwards. */
.vf-animate {
    transition: opacity .5s, transform .5s;
}

.vf-animation-disabled .vf-animate {
    transition: none;
}


/* ── skeleton.css ── */
/* =============================================================
   Skelette — „hier kommt gleich etwas“

   Ein Preis, der neu gerechnet wird, oder eine Reihe Karten, die
   nachlädt: statt der alten Zahl, die stehen bleibt und dann springt,
   eine schimmernde Fläche in ihrer Form — und danach gleitet der neue
   Wert hinein.

   Zwei Werkzeuge für alle Stellen:
     .inv-skel        die schimmernde Fläche (Text darin unsichtbar,
                      die Breite bleibt — nichts rückt nach)
     .inv-fresh       der neue Wert kommt herein

   Die Farben folgen dem Text: 7 % und 14 % davon auf dem Grund, also
   auf hell und dunkel gleich zurückhaltend.
   ============================================================= */
:root {
  --inv-skel-a: color-mix(in srgb, var(--inv-fg, #0f172a) 7%, transparent);
  --inv-skel-b: color-mix(in srgb, var(--inv-fg, #0f172a) 14%, transparent);
}

@keyframes inv-skel-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

@keyframes inv-fresh-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.inv-skel {
  width: fit-content;
  max-width: 100%;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--inv-skel-a) 0%, var(--inv-skel-b) 50%, var(--inv-skel-a) 100%) !important;
  background-size: 200% 100% !important;
  border-radius: 6px;
  animation: inv-skel-shimmer 1.2s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}

.inv-skel * {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  border-color: transparent !important;
  background: none !important;
}

.inv-fresh {
  animation: inv-fresh-in .45s var(--inv-ease, cubic-bezier(.22, 1, .36, 1)) both;
}

/* Eine Zeile Text bewegt sich nur als Kasten. */
:where(span, a, bdi, strong, em).inv-fresh {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .inv-skel { animation: none; background-image: none !important; background-color: var(--inv-skel-b) !important; }
  .inv-fresh { animation: none; }
}


/* ── reveal.css ── */
/* =============================================================
   Inverta — Einblend-Animationen (scroll reveal)

   One system, four looks, chosen in "Design-Grundlagen → Bewegung"
   and overridable per section.

   Two rules hold throughout:

   1. Nothing is hidden at rest. Every effect is a @keyframes that runs
      once `is-revealed` lands on the section. If the observer never
      fires — no JavaScript, an old browser, a print stylesheet — the
      page is simply the finished page. The older .vf-animate system
      parked its targets at opacity:0 and depended on a script to bring
      them back, which is a blank page waiting to happen.

   2. Timing comes from the site's own tokens, --inv-motion and
      --inv-ease, so the reveal breathes in time with hovers and
      transitions instead of being a second, unrelated tempo.
   ============================================================= */

:root {
  /* The reveal is a deliberate beat slower than an interaction. */
  --inv-reveal-dur: calc(var(--inv-motion, 400ms) * 1.6);
  --inv-reveal-step: 70ms;
  --inv-reveal-ease: var(--inv-ease, cubic-bezier(.22, .61, .36, 1));
}

/* --inv-i is the item's position in its group, written by reveal.js.
   Capped in JS, so a long list never ends in a two-second wait. */
.inv-reveal {
  --inv-i: 0;
}

/* -------------------------------------------------------------
   1. Standard — rise and fade. The theme's existing feel.
   ------------------------------------------------------------- */
@keyframes inv-reveal-standard {
from { opacity: 0; transform: translate3d(0, 18px, 0); }

to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------
   2. Kinematisch — a mask opens from below while the frame settles.
      clip-path does the work, so nothing is repainted outside the
      element's own box and the edges stay crisp on a photo.
   ------------------------------------------------------------- */
@keyframes inv-reveal-cinematic {
from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(0, 34px, 0) scale(.985);
  }

to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

/* -------------------------------------------------------------
   3. Tiefe — the element arrives from further back, out of focus, and resolves. Reads as depth rather than movement.
   ------------------------------------------------------------- */
@keyframes inv-reveal-depth {
from {
    opacity: 0;
    transform: translate3d(0, 46px, 0) scale(.93);
    filter: blur(7px);
  }

to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* -------------------------------------------------------------
   4. Zeilenweise — the line treatment, extended from the headings
      (which get it in every style) to the supporting copy as well.
   ------------------------------------------------------------- */

/* The mask reveal.js builds around each word.
 *
 * Words rather than whole lines, because a heading carrying markup of its own
 * — the accent <em> in the CTA headline — cannot be cut into lines without
 * losing it. Every word on one rendered line shares a delay, so what the eye
 * follows is still a line rising.
 *
 * The padding/negative-margin pair is the descender allowance: without it the
 * mask cuts the tails off g, j and y at rest, which is worse than no
 * animation at all. */
.inv-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}

.inv-word > span {
  display: inline-block;
  will-change: transform;
}

/* The heading itself stops animating once it is split — the words carry it
   now, and running both is what made the whole block slide as one slab. */
.inv-reveal.inv-split {
  animation: none !important;
  opacity: 1;
  clip-path: none;
}

/* -------------------------------------------------------------
   The word rise

   Slower and later than anything else on the page, on a curve with a long
   tail: quick off the mark, then a settle you can watch finish. Duration and
   stagger are multiples of --inv-motion, so the two sliders in
   "Design-Grundlagen → Bewegung" still govern the whole tempo.
   ------------------------------------------------------------- */
@keyframes inv-reveal-word {
  from {
    transform: translate3d(0, 108%, 0) rotate(2.5deg);
    opacity: .4;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.is-revealed .inv-split .inv-word > span,
.is-revealed.inv-split .inv-word > span {
  animation-name: inv-reveal-word;
  animation-duration: calc(var(--inv-motion, 400ms) * 2.4);
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: both;
  animation-delay: calc(var(--inv-i) * var(--inv-reveal-line-step, 105ms));
}

/* Each style keeps its own character in the headline too, rather than every
   section opening with the same rise. */
.inv-anim-cinematic .is-revealed .inv-split .inv-word > span {
  animation-duration: calc(var(--inv-motion, 400ms) * 3);
  --inv-reveal-line-step: 130ms;
}

.inv-anim-depth .is-revealed .inv-split .inv-word > span {
  animation-name: inv-reveal-word-depth;
  animation-duration: calc(var(--inv-motion, 400ms) * 2.8);
}

@keyframes inv-reveal-word-depth {
  from {
    transform: translate3d(0, 70%, 0);
    opacity: 0;
    filter: blur(6px);
  }

  to {
    transform: none;
    opacity: 1;
    filter: blur(0);
  }
}

/* -------------------------------------------------------------
   Wiring

   The style class sits on <body> (global) or on the section
   (override). The section class is written second, so it wins.
   ------------------------------------------------------------- */
.inv-anim-standard  .is-revealed .inv-reveal,
.vf-anim-standard.is-revealed  .inv-reveal { animation-name: inv-reveal-standard; }

.inv-anim-cinematic .is-revealed .inv-reveal,
.vf-anim-cinematic.is-revealed .inv-reveal { animation-name: inv-reveal-cinematic; }

.inv-anim-depth     .is-revealed .inv-reveal,
.vf-anim-depth.is-revealed     .inv-reveal { animation-name: inv-reveal-depth; }

.inv-anim-lines     .is-revealed .inv-reveal,
.vf-anim-lines.is-revealed     .inv-reveal { animation-name: inv-reveal-standard; }

.inv-anim-cinematic .is-revealed .inv-reveal { --inv-reveal-dur: calc(var(--inv-motion, 400ms) * 2.1); }

.inv-anim-depth     .is-revealed .inv-reveal { --inv-reveal-dur: calc(var(--inv-motion, 400ms) * 1.9); }

.is-revealed .inv-reveal {
  animation-duration: var(--inv-reveal-dur);
  animation-timing-function: var(--inv-reveal-ease);
  animation-fill-mode: both;
  animation-delay: calc(var(--inv-i) * var(--inv-reveal-step));
}


/* -------------------------------------------------------------
   Headings get a longer, slower arrival than the things around them

   A headline that rises at the same speed as the cards below it reads as
   one block sliding up. Giving it more distance, more time and a later
   settle is what separates the two — the heading arrives, then the page
   fills in behind it. This is the difference between "things move" and
   something that looks directed.
   ------------------------------------------------------------- */
@keyframes inv-reveal-heading {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    clip-path: inset(-20% 0 100% 0);
    letter-spacing: .01em;
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-20% 0 -20% 0);
    letter-spacing: inherit;
  }
}

.is-revealed .vf-section-title.inv-reveal,
.is-revealed .vf-services-title.inv-reveal,
.is-revealed .vf-faq-title.inv-reveal,
.is-revealed .vf-cta-title.inv-reveal {
  animation-name: inv-reveal-heading;
  animation-duration: calc(var(--inv-reveal-dur) * 1.45);
  /* A long tail on the curve: fast off the mark, then a slow settle. */
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* The sub-heading follows a beat behind its own heading rather than
   sharing its delay slot, so the pair reads as a sentence. */
.is-revealed .vf-section-subtitle.inv-reveal,
.is-revealed .vf-services-subtitle.inv-reveal,
.is-revealed .vf-faq-desc.inv-reveal,
.is-revealed .vf-cta-eyebrow.inv-reveal,
.is-revealed .vf-cta-desc.inv-reveal {
  animation-duration: calc(var(--inv-reveal-dur) * 1.15);
  /* The headline now takes two and a half beats to land, so its sub-line
     waits that much longer before starting rather than racing it. */
  animation-delay: calc(var(--inv-i) * var(--inv-reveal-step) + var(--inv-motion, 400ms) * 0.55);
}

/* The cinematic style pushes both further: a wider mask and a deeper
   start, because it is the style chosen for exactly that. */
.inv-anim-cinematic .is-revealed .vf-section-title.inv-reveal,
.inv-anim-cinematic .is-revealed .vf-services-title.inv-reveal,
.inv-anim-cinematic .is-revealed .vf-faq-title.inv-reveal,
.inv-anim-cinematic .is-revealed .vf-cta-title.inv-reveal,
.vf-anim-cinematic.is-revealed .vf-section-title.inv-reveal,
.vf-anim-cinematic.is-revealed .vf-cta-title.inv-reveal {
  animation-duration: calc(var(--inv-reveal-dur) * 1.9);
}

/* -------------------------------------------------------------
   Off — by choice, by section, or by the visitor's own setting
   ------------------------------------------------------------- */
.inv-anim-none .inv-reveal,
.vf-anim-none .inv-reveal,
.inv-no-motion .inv-reveal,
.vf-animation-disabled .inv-reveal {
  animation: none !important;
}

.inv-anim-none .inv-word > span,
.vf-anim-none .inv-word > span,
.inv-no-motion .inv-word > span {
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
.inv-reveal,
.inv-word > span {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* -------------------------------------------------------------
   The older .vf-animate pair, kept working but no longer hiding
   anything before its script arrives.
   ------------------------------------------------------------- */
.vf-animate {
  transition: opacity .5s, transform .5s;
}

.vf-animation-disabled .vf-animate {
  transition: none;
}


/* ── metabox.css ── */
/* =============================================================
   Inverta — Metabox (Page Settings Overrides)
   ============================================================= */

.vf-metabox-hide-header #vf-header {
    display: none !important;
}

.vf-metabox-hide-footer #inv-footer,
.vf-metabox-hide-footer .vf-footer {
    display: none !important;
}


/* ── rtl.css ── */
/* =============================================================
   Inverta — RTL (Right-to-Left Support)
   ============================================================= */

[dir=rtl] .vf-hero-inner,
[dir=rtl] .vf-footer-inner {
    direction: rtl;
}

[dir=rtl] .vf-nav-logo {
    flex-direction: row-reverse;
}

/* Die Sektions-Navigation braucht hier nichts mehr: sie steht auf
   inset-inline, das auf Arabisch von selbst die Seite wechselt — und die
   Einstellung "Abstand zum Bildschirmrand" ging an dieser Regel kaputt,
   weil 1.5rem hier fest stand und spezifischer war. */


/* ── responsive.css ── */
/* =============================================================
   Inverta — Global Responsive Tweaks
   ============================================================= */

@media (max-width: 640px) {:root {
        /* Eine Obergrenze fuer das Telefon, kein zweiter Wert: min() laesst
           einen kleineren Reglerwert durch und deckelt nur nach oben. Vorher
           stand hier 3.5rem flach, und damit war der Regler auf dem Telefon
           ohne Wirkung — in beide Richtungen. */
        --inv-section-py: min(var(--inv-section-rhythm, 6rem), 3.5rem);
    }

.vf-hero-title {
        font-size: 2.25rem;
    }

.vf-hero-inner {
        padding: 3rem 1rem 4rem;
    }

.vf-hero-stats {
        gap: 1rem;
    }

}

/* =============================================================
   Tippflächen auf Telefon und Tablett
   =============================================================

   Gemessen am 06.10.2026 mit Chrome auf 390px Breite: die Verweise im
   Fußmenü waren 23px hoch, die Brotkrumen 15px, der Knopf „Antworten“ unter
   einem Kommentar 20px, das Auge am Passwortfeld 22 × 22. WCAG 2.5.8 (AA)
   verlangt 24 × 24 CSS-Pixel für alles, was angetippt wird, und nimmt davon
   nur aus, was mitten in einem Satz steht. Keiner dieser Verweise steht
   mitten in einem Satz — sie stehen in Listen und Leisten, also gilt das
   Maß.

   Gesetzt wird eine Mindesthöhe über die Fläche, nicht über die Schrift: die
   Schriftgröße bleibt, wie der Entwurf sie wollte, und der Verweis wird nur
   höher. Auf einem Zeigegerät bleibt alles, wie es war — die Regeln gelten
   erst ab der Tablett-Breite der Theme, 1024px, derselben Grenze, an der
   auch die Geräte-Regler umschalten.
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Fußmenü: eine Liste von Verweisen, einer pro Zeile */
    #inv-footer .menu-item > a,
    .vf-footer .menu-item > a,
    #inv-footer .inv-footer-map__link,
    .vf-footer .inv-footer-map__link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }

    /* Brotkrumen, Beitrags-Angaben, Antwort-Knopf */
    .vf-breadcrumb a,
    .vf-entry-author a,
    .vf-cat-links a,
    .vf-read-more,
    .comment-reply-link,
    .product_meta a,
    .inv-auth__back,
    .inv-auth__link {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
    }

    /* Das Auge am Passwortfeld kommt aus WooCommerce und ist 22 × 22. */
    .woocommerce form .show-password-input {
        width: 28px;
        height: 28px;
        min-width: 28px;
        background-size: 18px 18px;
        background-position: center;
    }

    /* Die drei Knöpfe in der Kopfzeile: 34 × 34 erfüllt das Maß, bleibt aber
       unter den 44px, die für den wichtigsten Knopf eines Telefons — das
       Menü — allgemein empfohlen werden. */
    .inv-icon-btn {
        width: 40px !important;
        height: 40px !important;
    }

    #inv-nav-toggle.inv-burger,
    .inv-burger {
        width: 44px !important;
        height: 44px !important;
    }

    /* Der Logo-Verweis war 40 × 30: das Bild ist 30 hoch, und der Verweis war
       genau so hoch wie das Bild. */
    .custom-logo-link,
    .inv-logo {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* =============================================================
   Schriftgrößen, die kein Telefon mehr lesen kann
   =============================================================

   Dieselbe Messung fand Text von 8.5px (die Pille in „Über uns“), 10.9px
   (die Art eines Suchergebnisses) und 10.8px (die Pflichtangaben, die
   Germanized unter jeden Preis setzt — in Deutschland vorgeschrieben, also
   das Letzte, was klein sein darf).

   Diese Zahlen sind keine Regler, sondern die Untergrenze eines clamp(): sie
   wachsen mit der Breite mit und wurden nur nach unten zu klein.
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .inv-search__kind,
    .inv-search__eyebrow {
        font-size: 12px;
    }

    .wc-gzd-additional-info,
    .wc-gzd-additional-info-loop {
        font-size: 12px;
    }

    /*
     * Im Block-Raster schreibt Germanized selbst 0.9em, und das sind dort
     * 10.8px. Die Regel darueber verliert dagegen, und zwar unentschieden:
     * beide Selektoren wiegen genau gleich viel, also entscheidet, welches
     * Blatt zuletzt geladen wird — und das ist nicht unseres. Deshalb hier
     * das !important: es gilt fuer eine Angabe, die in Deutschland
     * vorgeschrieben ist, und es gibt keine Einstellung, der es im Weg
     * stuende. Gemessen auf /cart/ am 06.10.2026: 10.8px.
     */
    ul.wc-block-grid__products li.wc-block-grid__product .wc-gzd-additional-info,
    .wc-block-grid__product .wc-gzd-additional-info {
        font-size: 12px !important;
    }
}


/* ── print.css ── */
/* =============================================================
   Inverta — Print Styles
   ============================================================= */

@media print {
/* #vf-header was never an id this theme printed — the element is #inv-header,
   the same mismatch the footer rule had. #vf-btt is correct: that is the id
   inc/template-tags.php renders for the back-to-top link. */
#inv-header,
#inv-footer,
.vf-footer,
#vf-btt,
#vf-sections-nav {
        display: none !important;
    }

body {
        background: #fff;
        color: #000;
    }
}