/* =========================================
   BASICS.CSS
   Design System
   =========================================

   Aufbau:
   1.  Primitive Tokens       — rohe Werte, keine Bedeutung
   2.  Semantic Tokens        — Bedeutung, referenzieren Primitives
   3.  Reset & Base
   4.  Typography
   5.  Buttons
   6.  Focus
   7.  Layout & Container
   8.  Grid Utilities
   9.  Section Utilities
   10. Tabellen
   11. Blockquotes
   12. Code
   13. Gutenberg Utilities
   14. Bilder & Alignment
   15. Formulare (CF7)
   ========================================= */


/* =========================================
   1. PRIMITIVE TOKENS
   ========================================= */
:root {

    /* --- KRAUTZBERGER BRAND TOKENS --- */
    --bd-color-body: #222;
    --bd-color-primary: #353D92;
    --bd-color-secondary: #F5F7FA;
    --bd-color-hover: #141C6F;
    /* XLINE-Gruen ist Produktlinien-Semantik, keine generische Highlightfarbe. */
    --bd-color-xline: #C4CD26;
    --bd-color-xline-rgb: 196, 205, 38;
    --bd-color-tertiary: #F8FAF5;
    --bd-color-darker: #1d1d1b;
    --bd-color-lightgrey: #f5f7fa;
    --bd-color-darkgrey: #222;
    --bd-color-altgrey: #999;
    --bd-color-text-muted: #6b6b6b;
    --bd-color-white: #fff;
    --bd-color-black: #000;
    --bd-color-alternative: #ccc;
    --bd-color-border: #e5e7eb;

    --bd-color-primary-rgb: 53, 61, 146;
    --bd-color-hover-rgb: 20, 28, 111;
    --bd-color-secondary-rgb: 245, 247, 250;
    --bd-color-tertiary-rgb: 248, 250, 245;
    --bd-color-darker-rgb: 29, 29, 27;
    --bd-color-white-rgb: 255, 255, 255;
    --bd-color-black-rgb: 0, 0, 0;
    --bd-shadow-rgb: 15, 23, 42;
    --bd-color-primary-10: rgba(var(--bd-color-primary-rgb), 0.10);
    --bd-color-primary-15: rgba(var(--bd-color-primary-rgb), 0.15);
    --bd-color-primary-20: rgba(var(--bd-color-primary-rgb), 0.20);
    --bd-color-primary-65: rgba(var(--bd-color-primary-rgb), 0.65);

    /* Produktkarten: Default ist BasicLINE, XLINE ueberschreibt nur Line-Tokens. */
    --bd-product-line-rgb: var(--bd-color-primary-rgb);
    --bd-product-line-ink: var(--bd-color-primary);
    --bd-product-card-bg: var(--bd-color-white);
    --bd-product-card-border: rgba(var(--bd-product-line-rgb), 0.24);
    --bd-product-card-border-soft: rgba(var(--bd-product-line-rgb), 0.18);
    --bd-product-card-border-hover: rgba(var(--bd-product-line-rgb), 0.48);
    --bd-product-card-shadow: var(--card-shadow-elevated);
    --bd-product-card-shadow-hover: var(--card-shadow-hover);
    --bd-product-line-marker: rgba(var(--bd-product-line-rgb), 0.78);
    --bd-product-media-bg:
        radial-gradient(circle at 72% 20%, rgba(var(--bd-color-white-rgb), 0.9), transparent 42%),
        linear-gradient(
            145deg,
            rgba(var(--bd-product-line-rgb), 0.22) 0%,
            rgba(var(--bd-product-line-rgb), 0.1) 50%,
            rgba(var(--bd-product-line-rgb), 0.02) 100%
        ),
        linear-gradient(var(--bd-color-secondary), var(--bd-color-secondary));

    --bd-font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bd-font-heading: var(--bd-font-family);
    --bd-font-body: var(--bd-font-family);

    /* --- BRAND PRIMITIVES --- */
    --color-brand-primary:       var(--bd-color-primary);
    --color-brand-primary-hover: var(--bd-color-hover);
    --color-brand-accent:        var(--bd-color-primary);

    /* --- GREY SCALE --- */
    --color-grey-900: var(--bd-color-darker); /* Dunkelgrau für Text/Headlines */
    --color-grey-800: var(--bd-color-darkgrey); /* Footer/Navi etc. */
    --color-grey-600: var(--bd-color-body);
    --color-grey-300: var(--bd-color-alternative); /* Rahmen */
    --color-grey-200: var(--bd-color-lightgrey); /* Hover-States, Panels */
    --color-grey-100: var(--bd-color-secondary); /* Sehr helle Hintergründe */
    --color-white:    var(--bd-color-white);
    --color-black:    var(--bd-color-black);

    /* Opacity Variants */
    --color-black-75: rgba(var(--bd-color-black-rgb), 0.75);
    --color-black-45: rgba(var(--bd-color-black-rgb), 0.45);
    --color-black-40: rgba(var(--bd-color-black-rgb), 0.4);
    --color-black-10: rgba(var(--bd-color-black-rgb), 0.1);
    --color-black-8:  rgba(var(--bd-color-black-rgb), 0.08);
    --color-black-2:  rgba(var(--bd-color-black-rgb), 0.02);
    --color-white-90: rgba(var(--bd-color-white-rgb), 0.9);
    --color-white-50: rgba(var(--bd-color-white-rgb), 0.5);
    --color-white-35: rgba(var(--bd-color-white-rgb), 0.35);
    --color-white-30: rgba(var(--bd-color-white-rgb), 0.3);

    /* --- FEEDBACK PRIMITIVES --- */
    --color-success-base: #2ecc71;
    --color-error-base:   #e74c3c;
    --color-info-base:    #3498db;
    --color-warning-base: #f39c12;
    --color-success-bg:   #d1fae5;
    --color-success-line: #a7f3d0;
    --color-error-bg:     #fee2e2;
    --color-error-line:   #fecaca;
    --color-info-bg:      #dbeafe;
    --color-info-line:    #bfdbfe;
    --color-warning-bg:   #fef3c7;
    --color-warning-line: #fde68a;

    /* --- SIZE PRIMITIVES --- */
    --size-0:    0;
    --size-1:    0.125rem;   /* 2px */
    --size-2:    0.25rem;    /* 4px */
    --size-3:    0.5rem;     /* 8px */
    --size-4:    1rem;       /* 16px */
    --size-5:    1.5rem;     /* 24px */
    --size-6:    2rem;       /* 32px */
    --size-7:    3rem;       /* 48px */
    --size-8:    4rem;       /* 64px */

    /* --- FONT SIZE PRIMITIVES --- */
    --font-size-base: 1.03125rem;  /* 16.5px */
    --font-size-2xs:  0.625rem;    /* 10px */
    --font-size-sm:   0.875rem;    /* 14px */
    --font-size-s:    0.75rem;     /* 12px */
    --font-size-xs:   0.6875rem;   /* 11px */
    --font-size-compact: 0.8125rem; /* 13px */
    --font-size-ui:   0.9375rem;   /* 15px */
    --font-size-md:   1rem;        /* 16px */
    --font-size-md-plus: 1.0625rem; /* 17px */
    --font-size-lead: 1.25rem;     /* 20px */
    --font-size-lg:   1.375rem;    /* 22px */
    --font-size-xl:   1.5rem;      /* 24px */
    --font-size-2xl:  1.75rem;     /* 28px */
    --font-size-3xl:  2.25rem;     /* 36px */
    --font-size-h6:   1.5rem;      /* 24px */
    --font-size-h5:   1.875rem;    /* 30px */
    --font-size-h4:   2.5rem;      /* 40px */
    --font-size-h3:   2.5rem;      /* 40px */
    --font-size-h2:   2.5rem;      /* 40px */
    --font-size-h1:   2.5rem;      /* 40px */

    /* --- BORDER RADIUS PRIMITIVES --- */
    --radius-1: 0;
    --radius-2: 0;
    --radius-3: 0;
    --radius-4: 0;
    --radius-full: 0;

    /* --- SHADOW PRIMITIVES --- */
    --shadow-1: 0 1px 2px rgba(var(--bd-color-black-rgb), 0.05);
    --shadow-2: 0 4px 8px var(--color-black-8);
    --shadow-3: 0 0 5px var(--color-black-10);

    /* --- MOTION PRIMITIVES --- */
    --ease-ui:         cubic-bezier(0.4, 0, 0.2, 1);
    --ease-enter:      cubic-bezier(0.0, 0, 0.2, 1);
    --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
    --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   0.15s;
    --duration-normal: 0.25s;
    --duration-slow:   0.4s;

    /* --- BREAKPOINTS --- */
    --bp-sm:  767px;
    --bp-md:  1199px;
    --bp-lg:  1200px;
}

/* =========================================
   2. SEMANTIC TOKENS
   ========================================= */
:root {

    /* --- COLORS – SEMANTIC --- */
    --color-bg:        var(--color-white);
    --color-bg-light:  var(--bd-color-secondary);
    --color-bg-alt:    var(--bd-color-lightgrey);
    --color-bg-dark:   var(--color-grey-900);
    --color-surface:   var(--color-white);

    --color-text:      var(--bd-color-body);
    --color-muted:     var(--bd-color-text-muted);
    --color-heading:   var(--bd-color-darker);

    --color-border:    var(--bd-color-border);
    --color-text-link: var(--color-primary);
    --color-text-link-hover: var(--bd-color-hover);

    /* Brand Primary: BasicLINE/Krautzberger-Blau. XLINE bleibt separat über --bd-color-xline. */
    --color-primary:       var(--bd-color-primary);
    --color-primary-hover: var(--bd-color-hover);
    --color-primary-text:  var(--color-white);

    /* Brand Accent */
    --color-accent:       var(--bd-color-primary);
    --color-accent-hover: var(--bd-color-hover);
    --color-accent-dark:  var(--color-accent-hover);
    --color-accent-text:  var(--color-white);

    --color-success:  var(--color-success-base);
    --color-error:    var(--color-error-base);
    --color-info:     var(--color-info-base);
    --color-warning:  var(--color-warning-base);

    --color-row-alt:  var(--color-black-2);

    /* --- TYPOGRAPHY – SEMANTIC ---
       Eine Familie für alles – Source Sans 3. Lokal gehostet über 1-base/fonts.css. */
    --font-base:    var(--bd-font-body);
    --font-body:    var(--bd-font-body);
    --font-heading: var(--bd-font-heading);
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --text-2xs:     var(--font-size-2xs);
    --text-xs:      var(--font-size-xs);
    --text-s:       var(--font-size-s);
    --text-compact: var(--font-size-compact);
    --text-sm:      var(--font-size-sm);
    --text-ui:      var(--font-size-ui);
    --text-md:      var(--font-size-md);
    --text-md-plus: var(--font-size-md-plus);
    --text-body:    var(--font-size-base);
    --text-lead:    var(--font-size-lead);
    --text-lg:      var(--font-size-lg);
    --text-xl:      var(--font-size-xl);
    --text-2xl:     var(--font-size-2xl);
    --text-3xl:     var(--font-size-3xl);
    --text-topline: var(--font-size-xl);
    --text-subline: var(--font-size-xl);
    --text-h6:      var(--font-size-h6);
    --text-h5:      var(--font-size-h5);
    --text-h4:      var(--font-size-h4);
    --text-h3:      var(--font-size-h3);
    --text-h2:      var(--font-size-h2);
    --text-h1:      var(--font-size-h1);
    --bd-fs-h1:     clamp(2rem, 2.5vw, 2.6rem);
    --bd-fs-h2:     clamp(1.7rem, 2vw, 2.1rem);
    --bd-fs-h3:     clamp(1.3rem, 1.6vw, 1.6rem);
    --bd-fs-h4:     clamp(1.1rem, 1.3vw, 1.3rem);
    --bd-fs-h5:     1.05rem;
    --bd-fs-h6:     0.95rem;
    --bd-fs-content: var(--text-body);
    --bd-fs-content-large: var(--text-body);
    --bd-fs-topline: 0.8em;
    --bd-fs-subline: 0.85em;
    --bd-lh-tight: 1.1;
    --bd-lh-snug: 1.2;
    --bd-lh-normal: 1.35;
    --bd-lh-loose: 1.4;
    --bd-color-topline: var(--color-muted);
    --bd-color-subline: var(--color-muted);
    --bd-space-headline-bottom: 0.5em;

    /* Geladene Source-Sans-3-Weights: 200-900, jeweils normal und italic. */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-light:    300;
    --weight-heavy:    800;
    --weight-black:    900;
    --weight-h1-light: 400;
    --weight-h1-bold:  700;

    --leading-tight:   1.2em;
    --leading-snug:    1.4em;
    --leading-base:    1.7em;
    --leading-relaxed: 1.8em;
    --leading-loose:   2em;

    --tracking-tight:  0em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-h1:      0em;
    --tracking-h2:      0em;
    --tracking-h3:      0em;
    --tracking-body:    0em;

    /* --- SPACING – SEMANTIC --- */
    --space-xxs: var(--size-1);
    --space-xs:  var(--size-2);
    --space-sm:  var(--size-3);
    --space-md:  var(--size-4);
    --space-lg:  clamp(1.25rem, 2vw,  1.5rem);
    --space-xl:  clamp(1.5rem,  3vw,  2rem);
    --space-2xl: clamp(2rem,    4vw,  3rem);
    --space-3xl: clamp(2.5rem,  6vw,  4rem);
    --bd-space-1: 0.5rem;
    --bd-space-2: 1rem;
    --bd-space-3: 1.5rem;
    --bd-space-4: 2rem;
    --bd-space-5: 3rem;
    --bd-section-rhythm: var(--bd-space-5);
    --bd-gap-mobile: var(--bd-space-2);
    --bd-gap-desktop: var(--bd-space-3);
    --bd-gap: var(--bd-gap-desktop);

    /* --- BORDERS & RADIUS – SEMANTIC --- */
    --radius-sm:   var(--radius-1);
    --radius-base: var(--radius-2);
    --radius-md:   var(--radius-3);
    --radius-lg:   var(--radius-3);
    --radius-pill: var(--radius-full);
    --bd-radius-xs: var(--radius-2);
    --bd-radius-s:  var(--radius-3);
    --bd-radius-m:  var(--radius-3);
    --bd-radius-l:  var(--radius-3);
    --bd-radius-pill: var(--radius-pill);
    --bd-card-radius: var(--bd-radius-s);
    --bd-btn-radius: var(--btn-radius);

    --border-radius-sm:   var(--radius-sm);
    --border-radius:      var(--radius-base);
    --border-radius-md:   var(--radius-md);
    --border-radius-lg:   var(--radius-lg);
    --border-radius-pill: var(--radius-pill);

    /* --- SHADOWS – SEMANTIC --- */
    --shadow-sm: var(--shadow-1);
    --shadow-md: var(--shadow-2);
    --shadow-lg: var(--shadow-3);
    --shadow-line: 0 1px 0 rgba(var(--bd-shadow-rgb), .03);
    --shadow-surface: 0 12px 34px rgba(var(--bd-shadow-rgb), .08);
    --shadow-popover: 0 18px 48px rgba(var(--bd-shadow-rgb), .12);
    --shadow-focus: 0 0 0 3px rgba(var(--bd-color-primary-rgb), .1);
    --bd-shadow-card: var(--shadow-sm);
    --bd-shadow-card-hover: var(--shadow-surface);
    --bd-shadow-strong: var(--shadow-surface);
    --bd-shadow-elevated: var(--shadow-popover);
    --bd-shadow-soft: 0 4px 16px var(--bd-color-primary-10);

    --shadow-btn-primary: none;
    --shadow-btn-accent:  none;

    --btn-shadow-primary: var(--shadow-btn-primary);
    --btn-shadow-accent:  var(--shadow-btn-accent);

    /* --- MOTION – SEMANTIC --- */
    --transition:         var(--duration-normal) var(--ease-ui);
    --transition-fast:    var(--duration-fast)   var(--ease-ui);
    --transition-enter:   var(--duration-normal) var(--ease-enter);
    --transition-exit:    var(--duration-fast)   var(--ease-exit);

    --easing-default: var(--ease-ui);
    --easing-in:      var(--ease-exit);
    --easing-out:     var(--ease-enter);

    --motion-duration-fast:       var(--duration-fast);
    --motion-duration-base:       var(--duration-normal);
    --motion-duration-slow:       var(--duration-slow);
    --motion-ease:                var(--ease-ui);
    --motion-ease-in:             var(--ease-exit);
    --motion-ease-out:            var(--ease-enter);
    --motion-ease-expressive:     var(--ease-expressive);
    --motion-shift-sm:            var(--size-1);
    --motion-shift-md:            var(--size-2);
    --motion-reveal-distance:     var(--size-5);
    --motion-scale-sm:            1.01;

    /* --- LAYOUT – SEMANTIC --- */
    --container-xs:       480px;
    --container-sm:       767px;
    --container-narrow:   900px;
    --container-md:       1199px;
    --container-lg:       1200px;
    --container-xl:       1200px;
    --container-2xl:      1400px;
    --container-reading:  72ch;

    --max-width:          1170px;
    --container-default:  var(--max-width);
    --container-wide:     var(--container-2xl);

    --container-padding:        15px;
    --container-padding-mobile: 20px;

    --header-height:      89px;
    --site-min-height:    calc(100vh - var(--header-height));
    --layout-sidebar-min: 18rem;

    --bd-container-gutter:      25px;
    --bd-site-frame-max:        1920px;
    --bd-floating-frame-inset:  20px;
    --bd-container-content-max: 1216px;
    --bd-container-max:         1520px;
    --bd-container-narrow:      800px;
    --bd-container-wide:        1600px;
    --bd-container-shell-max:   calc(var(--bd-container-max) + var(--bd-container-gutter) + var(--bd-container-gutter));
    --bd-header-height:         var(--header-height);
    --bd-sticky-gap:            var(--bd-space-3);
    --bd-sticky-header-offset:  var(--header-height);
    --bd-hero-viewport-offset:  72px;
    --bd-sticky-top:            calc(var(--bd-sticky-header-offset) + var(--bd-sticky-gap));
    --bd-grid-gap:              var(--grid-gap);
    --vh:                       1vh;

    /* --- GRID – SEMANTIC --- */
    --grid-gap:          var(--space-lg);
    --grid-gap-xs:       var(--space-xs);
    --grid-gap-sm:       var(--space-md);
    --grid-gap-md:       var(--space-lg);
    --grid-gap-lg:       var(--space-2xl);
    --grid-gap-xl:       var(--space-3xl);
    --grid-min-col:      280px;
    --grid-min-col-sm:   220px;
    --grid-min-col-lg:   360px;

    /* --- HERO – SEMANTIC --- */
    --hero-bg:              var(--color-bg);
    --hero-bg-muted-end:    var(--bd-color-secondary);
    --hero-bg-muted:        linear-gradient(135deg, var(--color-white) 0%, var(--color-bg-light) 56%, var(--hero-bg-muted-end) 100%);
    --hero-bg-home:         var(--hero-bg-muted);
    --hero-bg-page:         var(--color-bg);
    --hero-bg-brand:        var(--bd-color-primary);
    --hero-bg-compact:      var(--color-bg-light);
    --hero-bg-overlay:      linear-gradient(90deg, rgba(var(--bd-color-primary-rgb), .9), rgba(var(--bd-color-primary-rgb), .68));
    --hero-bg-product:      var(--hero-bg-muted);
    --hero-color:           var(--color-text);
    --hero-title:           var(--color-heading);
    --hero-muted:           var(--color-muted);
    --hero-invert-color:    var(--color-white);
    --hero-invert-muted:    var(--color-white-90);
    --hero-accent:          var(--color-primary);
    --hero-padding-y:       clamp(5rem, 8vw, 8rem);
    --hero-padding-x:       clamp(1.25rem, 4vw, 4rem);
    --hero-gap:             clamp(2rem, 5vw, 5rem);
    --hero-min-height:      min(760px, calc(100vh - var(--header-height)));
    --hero-title-size-home: clamp(3rem, 7vw, 6.25rem);
    --hero-title-size-page: clamp(2.8rem, 6vw, 5.5rem);
    --hero-title-size-compact: var(--text-h2);
    --hero-title-size-product: var(--text-h1);
    --hero-padding-y-compact: var(--space-xl);
    --hero-padding-y-overlay: var(--space-3xl);
    --hero-text-size:       clamp(1.05rem, 1.8vw, 1.25rem);
    --hero-topline-size:    clamp(.82rem, 1.1vw, .95rem);
    --hero-media-radius:    var(--radius-md);
    --hero-media-shadow:    0 24px 70px rgba(var(--bd-shadow-rgb), .14);
    --hero-media-bg:        var(--color-bg-light);
    --hero-media-placeholder-bg:      radial-gradient(circle at 74% 24%, var(--bd-color-primary-10), transparent 24%), linear-gradient(135deg, var(--bd-color-secondary), var(--color-bg-light));
    --hero-media-placeholder-line:    rgba(var(--bd-shadow-rgb), .14);
    --hero-media-placeholder-primary: var(--bd-color-primary);
    --hero-media-placeholder-accent:  var(--bd-color-primary-20);
    --hero-brand-panel-bg:  repeating-linear-gradient(120deg, rgba(var(--bd-color-white-rgb), .08) 0 2px, transparent 2px 34px), linear-gradient(135deg, rgba(var(--bd-color-white-rgb), .06), transparent 44%), var(--hero-bg-brand);
    --hero-overlay-scrim:   linear-gradient(90deg, rgba(var(--bd-color-primary-rgb), .88) 0%, rgba(var(--bd-color-primary-rgb), .62) 56%, rgba(var(--bd-color-primary-rgb), .28) 100%);
    --hero-meta-bg:         rgba(var(--bd-color-white-rgb), .12);
    --hero-meta-border:     rgba(var(--bd-color-white-rgb), .18);

    /* --- CARDS – SEMANTIC --- */
    --card-bg:              var(--color-surface);
    --card-bg-muted:        var(--color-bg-light);
    --card-bg-dark:         var(--color-grey-900);
    --card-color:           var(--color-text);
    --card-muted:           var(--color-muted);
    --card-title:           var(--color-heading);
    --card-border:          var(--color-border);
    --card-border-hover:    var(--color-primary);
    --card-radius:          var(--radius-md);
    --card-padding:         clamp(1.25rem, 2.8vw, 2rem);
    --card-padding-lg:      clamp(1.6rem, 3.4vw, 2.5rem);
    --card-gap:             var(--space-md);
    --card-grid-gap:        var(--grid-gap);
    --card-grid-min:        var(--grid-min-col);
    --card-icon-size:       44px;
    --card-media-radius:    var(--radius-md);
    --card-shadow:          none;
    --card-shadow-elevated: 0 18px 44px rgba(var(--bd-shadow-rgb), .08);
    --card-shadow-hover:    0 22px 54px rgba(var(--bd-shadow-rgb), .12);

    /* --- CONTENT – SEMANTIC --- */
    --content-bg:             var(--color-bg);
    --content-bg-muted:       var(--color-bg-light);
    --content-bg-dark:        var(--color-grey-900);
    --content-color:          var(--color-text);
    --content-title:          var(--color-heading);
    --content-muted:          var(--color-muted);
    --content-invert-color:   var(--color-white);
    --content-invert-muted:   var(--color-white-90);
    --content-accent:         var(--color-primary);
    --content-border:         var(--color-border);
    --content-width-reading:  var(--container-reading);
    --content-width-default:  860px;
    --content-width-wide:     var(--container-xl);
    --content-gap:            var(--grid-gap);
    --content-stack-gap:      var(--space-lg);
    --content-padding-y:      clamp(4rem, 7vw, 7rem);
    --content-card-padding:   clamp(1.75rem, 4vw, 3.25rem);
    --content-media-radius:   var(--radius-md);
    --content-media-shadow:   var(--card-shadow-elevated);
    --content-media-bg:       var(--color-bg-light);
    --content-panel-bg:       var(--color-surface);
    --content-panel-shadow:   var(--card-shadow-elevated);

    /* --- CTA – SEMANTIC --- */
    --cta-bg:                    var(--content-bg);
    --cta-section-padding-y:     clamp(3rem, 6vw, 6rem);
    --cta-panel-bg:              var(--content-panel-bg);
    --cta-panel-bg-muted:        var(--content-bg-muted);
    --cta-panel-bg-dark:         var(--content-bg-dark);
    --cta-panel-bg-brand:        var(--bd-color-primary);
    --cta-panel-color:           var(--content-color);
    --cta-panel-title:           var(--content-title);
    --cta-panel-muted:           var(--content-muted);
    --cta-panel-invert-color:    var(--content-invert-color);
    --cta-panel-invert-muted:    var(--content-invert-muted);
    --cta-border:                var(--content-border);
    --cta-border-dark:           rgba(var(--bd-color-white-rgb), .14);
    --cta-radius:                var(--radius-md);
    --cta-padding:               clamp(2rem, 5vw, 4rem);
    --cta-gap:                   var(--space-xl);
    --cta-content-width:         66ch;
    --cta-headline-width:        760px;
    --cta-panel-shadow:          var(--content-panel-shadow);
    --cta-panel-shadow-minimal:  var(--shadow-sm);
    --cta-icon-size:             clamp(3.75rem, 7vw, 5.5rem);
    --cta-icon-font-size:        clamp(1.65rem, 3vw, 2.25rem);
    --cta-icon-bg:               rgba(var(--bd-color-primary-rgb), .08);
    --cta-icon-bg-dark:          rgba(var(--bd-color-white-rgb), .1);
    --cta-icon-color:            var(--bd-color-primary);
    --cta-icon-color-dark:       var(--bd-color-white);
    --cta-icon-border:           rgba(var(--bd-color-primary-rgb), .14);
    --cta-icon-border-dark:      rgba(var(--bd-color-white-rgb), .2);
    --cta-icon-radius:           var(--radius-md);

    /* --- MEDIA – SEMANTIC --- */
    --media-bg:                  var(--color-bg);
    --media-bg-muted:            var(--color-bg-light);
    --media-bg-dark:             var(--color-grey-900);
    --media-color:               var(--color-text);
    --media-title:               var(--color-heading);
    --media-muted:               var(--color-muted);
    --media-invert-color:        var(--color-white);
    --media-invert-muted:        var(--color-white-90);
    --media-border:              var(--color-border);
    --media-border-dark:         rgba(var(--bd-color-white-rgb), .18);
    --media-radius:              var(--radius-md);
    --media-gap:                 var(--grid-gap);
    --media-grid-min:            var(--grid-min-col);
    --media-shadow:              var(--card-shadow-elevated);
    --media-shadow-hover:        var(--card-shadow-hover);
    --media-caption-bg:          rgba(var(--bd-color-white-rgb), .92);
    --media-caption-bg-dark:     rgba(var(--bd-color-white-rgb), .08);
    --media-caption-color:       var(--color-text);
    --media-play-bg:             var(--color-primary);
    --media-play-color:          var(--color-grey-900);
    --media-play-size:           4.5rem;
    --media-download-bg:         var(--color-surface);
    --media-download-bg-hover:   var(--color-bg-light);
    --media-download-bg-dark:    rgba(var(--bd-color-white-rgb), .07);
    --media-download-bg-dark-hover: rgba(var(--bd-color-white-rgb), .12);
    --media-download-icon-bg:    var(--color-bg-light);
    --media-download-icon-bg-dark: rgba(var(--bd-color-white-rgb), .1);
    --media-download-icon-color: var(--color-primary);
    --media-download-icon-size:  2.75rem;

    /* --- TRUST – SEMANTIC --- */
    --trust-bg:                 var(--color-bg);
    --trust-bg-muted:           var(--color-bg-light);
    --trust-bg-dark:            var(--color-grey-900);
    --trust-color:              var(--color-text);
    --trust-title:              var(--color-heading);
    --trust-muted:              var(--color-muted);
    --trust-invert-color:       var(--color-white);
    --trust-invert-muted:       var(--color-white-90);
    --trust-border:             var(--color-border);
    --trust-border-dark:        rgba(var(--bd-color-white-rgb), .18);
    --trust-radius:             var(--radius-md);
    --trust-gap:                var(--grid-gap);
    --trust-grid-min:           var(--grid-min-col);
    --trust-card-bg:            var(--color-surface);
    --trust-card-bg-muted:      var(--color-bg-light);
    --trust-card-bg-dark:       rgba(var(--bd-color-white-rgb), .07);
    --trust-card-bg-muted-dark: rgba(var(--bd-color-white-rgb), .1);
    --trust-card-shadow:        var(--card-shadow-elevated);
    --trust-card-shadow-hover:  var(--card-shadow-hover);
    --trust-accent:             var(--color-primary);
    --trust-avatar-size:        3rem;
    --trust-logo-height:        3.5rem;
    --trust-logo-bg:            var(--color-surface);
    --trust-logo-bg-dark:       rgba(var(--bd-color-white-rgb), .07);

    /* --- DYNAMIC CONTENT – SEMANTIC --- */
    --dynamic-bg:                 var(--color-bg);
    --dynamic-bg-muted:           var(--color-bg-light);
    --dynamic-bg-dark:            var(--color-grey-900);
    --dynamic-color:              var(--color-text);
    --dynamic-title:              var(--color-heading);
    --dynamic-muted:              var(--color-muted);
    --dynamic-invert-color:       var(--color-white);
    --dynamic-invert-muted:       var(--color-white-90);
    --dynamic-border:             var(--color-border);
    --dynamic-border-dark:        rgba(var(--bd-color-white-rgb), .18);
    --dynamic-radius:             var(--radius-md);
    --dynamic-gap:                var(--grid-gap);
    --dynamic-grid-min:           var(--grid-min-col);
    --dynamic-card-bg:            var(--color-surface);
    --dynamic-card-bg-muted:      var(--color-bg-light);
    --dynamic-card-bg-dark:       rgba(var(--bd-color-white-rgb), .07);
    --dynamic-card-shadow:        var(--card-shadow-elevated);
    --dynamic-card-shadow-hover:  var(--card-shadow-hover);
    --dynamic-accent:             var(--color-primary);
    --dynamic-media-bg:           var(--color-bg-light);
    --dynamic-media-radius:       var(--radius-md);
    --dynamic-tag-bg:             var(--color-bg-light);
    --dynamic-tag-color:          var(--color-heading);
    --dynamic-tag-bg-dark:        rgba(var(--bd-color-white-rgb), .1);
    --dynamic-avatar-size:        4.25rem;

    /* --- SHOP – SEMANTIC --- */
    --shop-bg:                    var(--color-bg);
    --shop-bg-muted:              var(--color-bg-light);
    --shop-bg-dark:               var(--color-grey-900);
    --shop-color:                 var(--color-text);
    --shop-title:                 var(--color-heading);
    --shop-muted:                 var(--color-muted);
    --shop-invert-color:          var(--color-white);
    --shop-invert-muted:          var(--color-white-90);
    --shop-border:                var(--color-border);
    --shop-border-dark:           rgba(var(--bd-color-white-rgb), .18);
    --shop-radius:                var(--radius-md);
    --shop-gap:                   var(--grid-gap);
    --shop-grid-min:              var(--grid-min-col);
    --shop-card-bg:               var(--color-surface);
    --shop-card-bg-muted:         var(--color-bg-light);
    --shop-card-bg-dark:          rgba(var(--bd-color-white-rgb), .07);
    --shop-card-shadow:           var(--card-shadow-elevated);
    --shop-card-shadow-hover:     var(--card-shadow-hover);
    --shop-accent:                var(--color-primary);
    --shop-price-color:           var(--color-heading);
    --shop-badge-bg:              var(--color-primary);
    --shop-badge-color:           var(--color-grey-900);
    --shop-media-bg:              var(--color-bg-light);
    --shop-summary-bg:            var(--color-surface);
    --shop-summary-bg-muted:      var(--color-bg-light);
    --shop-pause-bg:              var(--color-warning-bg);
    --shop-pause-border:          var(--color-warning-line);
    --shop-pause-accent:          var(--color-warning);
    --shop-pause-color:           var(--color-grey-900);

    /* --- PRICING & TABLES – SEMANTIC --- */
    --pricing-bg:                 var(--color-bg);
    --pricing-bg-muted:           var(--color-bg-light);
    --pricing-bg-dark:            var(--color-grey-900);
    --pricing-color:              var(--color-text);
    --pricing-title:              var(--color-heading);
    --pricing-muted:              var(--color-muted);
    --pricing-invert-color:       var(--color-white);
    --pricing-invert-muted:       var(--color-white-90);
    --pricing-border:             var(--color-border);
    --pricing-border-dark:        rgba(var(--bd-color-white-rgb), .18);
    --pricing-radius:             var(--radius-md);
    --pricing-gap:                var(--grid-gap);
    --pricing-grid-min:           var(--grid-min-col);
    --pricing-card-bg:            var(--color-surface);
    --pricing-card-bg-muted:      var(--color-bg-light);
    --pricing-card-bg-dark:       rgba(var(--bd-color-white-rgb), .07);
    --pricing-card-shadow:        var(--card-shadow-elevated);
    --pricing-card-shadow-hover:  var(--card-shadow-hover);
    --pricing-accent:             var(--color-primary);
    --pricing-badge-bg:           var(--color-primary);
    --pricing-badge-color:        var(--color-grey-900);
    --pricing-price-color:        var(--color-heading);
    --pricing-feature-icon-bg:    var(--color-bg-light);
    --pricing-feature-icon-color: var(--color-primary);

    --table-bg:                   var(--color-surface);
    --table-bg-muted:             var(--color-bg-light);
    --table-bg-dark:              rgba(var(--bd-color-white-rgb), .07);
    --table-color:                var(--color-text);
    --table-title:                var(--color-heading);
    --table-muted:                var(--color-muted);
    --table-invert-color:         var(--color-white);
    --table-invert-muted:         var(--color-white-90);
    --table-border:               var(--color-border);
    --table-border-dark:          rgba(var(--bd-color-white-rgb), .18);
    --table-header-bg:            var(--color-bg-light);
    --table-header-bg-dark:       rgba(var(--bd-color-white-rgb), .1);
    --table-row-hover:            var(--color-bg-light);
    --table-row-hover-dark:       rgba(var(--bd-color-white-rgb), .09);
    --table-radius:               var(--radius-md);
    --table-shadow:               var(--card-shadow-elevated);

    /* --- SECTION – SEMANTIC --- */
    --section-padding-none: 0;
    --section-padding-xs:   var(--space-xs);
    --section-padding-sm:   var(--space-sm);
    --section-padding-md:   var(--space-md);
    --section-padding-lg:   var(--space-lg);
    --section-padding-xl:   var(--space-xl);
    --section-padding-2xl:  var(--space-2xl);
    --section-padding-3xl:  var(--space-3xl);

    /* --- FORMS – SEMANTIC --- */
    --input-padding:       10px;
    --input-bg:            var(--color-bg);
    --input-border:        1px solid var(--color-border);
    --input-border-focus:  var(--color-primary);
    --input-radius:        var(--radius-base);
    --form-bg:             var(--color-bg);
    --form-bg-muted:       var(--color-bg-light);
    --form-bg-dark:        var(--color-grey-900);
    --form-color:          var(--color-text);
    --form-title:          var(--color-heading);
    --form-muted:          var(--color-muted);
    --form-invert-color:   var(--color-white);
    --form-invert-muted:   var(--color-white-90);
    --form-panel-bg:       var(--color-surface);
    --form-panel-bg-muted: var(--color-bg-light);
    --form-panel-bg-dark:  rgba(var(--bd-color-white-rgb), .07);
    --form-border:         var(--color-border);
    --form-border-dark:    rgba(var(--bd-color-white-rgb), .18);
    --form-radius:         var(--radius-md);
    --form-gap:            var(--grid-gap);
    --form-field-gap:      var(--space-sm);
    --form-field-height:   3rem;
    --form-field-padding:  .78rem .9rem;
    --form-field-bg:       var(--color-surface);
    --form-field-bg-focus: var(--color-surface);
    --form-field-bg-dark:  rgba(var(--bd-color-white-rgb), .08);
    --form-field-bg-dark-focus: rgba(var(--bd-color-white-rgb), .1);
    --form-field-border:   var(--color-border);
    --form-field-border-dark: rgba(var(--bd-color-white-rgb), .18);
    --form-field-focus:    var(--color-primary);
    --form-shadow:         var(--card-shadow-elevated);
    --form-shadow-hover:   var(--card-shadow-hover);
    --form-success:        var(--color-success);
    --form-error:          var(--color-error);
    --bd-sidebar-font-size: 0.95rem;
    --bd-sidebar-leading:   1.55;

    --contact-bg:          var(--color-bg-light);
    --contact-panel-bg:    var(--color-surface);
    --contact-icon-bg:     var(--color-bg-light);
    --contact-icon-bg-dark: rgba(var(--bd-color-white-rgb), .1);
    --contact-icon-color:  var(--color-primary);
    --contact-map-bg:      var(--color-bg-light);

    /* --- BUTTONS – SEMANTIC --- */
    --btn-height-sm:         36px;
    --btn-height:            44px;
    --btn-height-lg:         52px;
    --btn-padding-sm:        0.55rem 0.85rem;
    --btn-padding:           0.72rem 1.1rem;
    --btn-padding-lg:        0.9rem 1.35rem;
    --btn-gap:               0.5rem;
    --btn-radius:            0;
    --btn-border-width:      1px;
    --btn-font-size-sm:      var(--text-sm);
    --btn-font-size:         0.95rem;
    --btn-font-size-lg:      var(--text-body);
    --btn-font-weight:       var(--weight-semibold);
    --btn-icon-size:         0.95em;
    --btn-translate-hover:   -1px;
    --btn-shadow-hover:      0 10px 26px rgba(var(--bd-shadow-rgb), .12);
    --bd-btn-weight:         var(--btn-font-weight);
    --bd-btn-trans:          background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition-fast);
    --bd-btn-fs:             var(--btn-font-size);
    --bd-btn-fs-s:           var(--btn-font-size-sm);
    --bd-btn-fs-l:           var(--btn-font-size-lg);
    --bd-btn-py:             0.72rem;
    --bd-btn-px:             1.1rem;
    --bd-btn-py-s:           0.55rem;
    --bd-btn-px-s:           0.85rem;
    --bd-btn-py-l:           0.9rem;
    --bd-btn-px-l:           1.35rem;
    --bd-btn-min-h:          var(--btn-height);
    --bd-btn-min-h-s:        var(--btn-height-sm);
    --bd-btn-min-h-l:        var(--btn-height-lg);
    --bd-btn-shadow:         var(--btn-shadow-hover);
    --bd-btn-shadow-none:    none;
    --bd-btn-focus-ring:     0 0 0 4px var(--bd-color-primary-20);

    --btn-primary-bg:        var(--bd-color-primary);
    --btn-primary-bg-hover:  var(--bd-color-hover);
    --btn-primary-color:     var(--bd-color-white);
    --btn-primary-border:    var(--btn-primary-bg);

    --btn-secondary-bg:      var(--bd-color-white);
    --btn-secondary-hover:   var(--bd-color-secondary);
    --btn-secondary-color:   var(--bd-color-primary);
    --btn-secondary-border:  rgba(var(--bd-color-primary-rgb), 0.22);
    --btn-secondary-hover-border: var(--bd-color-primary);

    --btn-accent-bg:         var(--color-accent);
    --btn-accent-hover:      var(--bd-color-hover);
    --btn-accent-color:      var(--color-white);
    --btn-accent-border:     var(--btn-accent-bg);

    --btn-outline-bg:        transparent;
    --btn-outline-color:     var(--bd-color-primary);
    --btn-outline-border:    rgba(var(--bd-color-primary-rgb), 0.34);
    --btn-outline-hover-bg:  var(--bd-color-primary);
    --btn-outline-hover:     var(--bd-color-white);

    --btn-ghost-bg:          rgba(var(--bd-color-primary-rgb), 0.07);
    --btn-ghost-hover:       rgba(var(--bd-color-primary-rgb), 0.12);
    --btn-ghost-color:       var(--bd-color-primary);
    --btn-ghost-border:      transparent;

    --btn-link-color:        var(--bd-color-primary);
    --btn-link-hover:        var(--bd-color-hover);

    --btn-inverse-bg:        var(--bd-color-white);
    --btn-inverse-bg-hover:  rgba(var(--bd-color-white-rgb), 0.9);
    --btn-inverse-color:     var(--bd-color-primary);
    --btn-inverse-border:    var(--bd-color-white);

    --btn-inverse-outline-bg: transparent;
    --btn-inverse-outline-color: var(--bd-color-white);
    --btn-inverse-outline-border: rgba(var(--bd-color-white-rgb), 0.46);
    --btn-inverse-outline-hover-bg: rgba(var(--bd-color-white-rgb), 0.12);
    --btn-inverse-outline-hover: var(--bd-color-white);

    --btn-disabled-bg:       var(--color-grey-200);
    --btn-disabled-border:   var(--color-grey-200);
    --btn-disabled-color:    var(--color-muted);

    /* --- FOCUS – SEMANTIC --- */
    --focus-ring:    2px solid var(--color-accent);
    --focus-offset:  2px;

}

body.admin-bar {
    --bd-sticky-header-offset: calc(32px + var(--header-height));
    --bd-hero-viewport-offset: calc(32px + 72px);
}

@media (max-width: 782px) {
    body.admin-bar {
        --bd-sticky-header-offset: calc(46px + var(--header-height));
        --bd-hero-viewport-offset: calc(46px + 72px);
    }
}

@media (min-width: 1121px) {
    :root {
        --bd-hero-viewport-offset: 203px;
    }

    body.admin-bar {
        --bd-hero-viewport-offset: calc(32px + 203px);
    }
}

@media (min-width: 768px) {
    :root {
        --bd-container-gutter: clamp(28px, 4vw, 70px);
    }
}

@media (min-width: 1200px) {
    :root {
        --bd-container-gutter: 100px;
    }
}


/* =========================================
   3. RESET & BASE
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    font-size: var(--text-body);
    line-height: var(--leading-base);
    letter-spacing: var(--tracking-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

@supports not (overflow: clip) {
    body {
        overflow-x: hidden;
    }
}

/* Site-Frame: centered, visually neutral on standard desktops. */
.site-frame {
    max-width: var(--bd-site-frame-max);
    margin-inline: auto;
    background-color: var(--color-bg);
    box-shadow: 0 0 32px var(--color-black-8);
}

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

a {
    color: var(--color-text-link);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: var(--transition);
}

a:where(:not(.btn):not(.bd-link-action):not(.wp-element-button):hover) {
    color: var(--color-text-link-hover);
}


/* =========================================
   4. TYPOGRAPHY
   ========================================= */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    -webkit-hyphens: manual;
    hyphens: manual;
    -webkit-hyphenate-limit-lines: 2;
    hyphenate-limit-chars: 10 4 4;
    hyphenate-limit-lines: 2;
    overflow-wrap: break-word;
    word-break: normal;
}

h1, h2, h3 {
    text-wrap: balance;
}

@media (max-width: 900px) {
    h1, h2, h3 {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* -----------------------------------------
   H1
----------------------------------------- */
h1 {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-h1);
    margin-bottom: var(--space-lg);
}

/* Innenseiten */
body:not(.home):not(.page-template-page-contained) h1 {
    font-size: clamp(1.875rem, 4vw, var(--font-size-h1));
}

/* Contained */
body.page-template-page-contained h1 {
    font-size: clamp(1.75rem, 3vw, var(--font-size-h2));
    letter-spacing: var(--tracking-h2);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-xl);
}

/* H1 Split Spans */
h1 .light {
    display: block;
    font-weight: var(--weight-h1-light);
}

h1 .bold {
    display: block;
    font-weight: var(--weight-h1-bold);
    font-style: italic;
}

h1 .topline {
    margin-bottom: var(--space-xs);
    letter-spacing: var(--tracking-wide);
}

h1 .subline {
    margin-top: var(--space-sm);
    letter-spacing: var(--tracking-body);
}

/* -----------------------------------------
   TOPLINE
----------------------------------------- */
.topline {
    display: block;
    font-family: var(--font-base);
    font-size: var(--text-topline);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-sm);
}

.bd-sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 1px;
    max-width: 1px;
    min-height: 1px;
    max-height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.bd-skip-link {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 100000;
    transform: translateY(-150%);
    padding: 0.75rem 1rem;
    border: 2px solid var(--bd-color-white);
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    font-size: var(--font-size-base);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--shadow-2);
}

.bd-skip-link:visited {
    color: var(--bd-color-white);
}

.bd-skip-link:focus,
.bd-skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid rgba(var(--bd-color-primary-rgb), 0.35);
    outline-offset: 3px;
}

/* -----------------------------------------
   SUBLINE
----------------------------------------- */
.subline {
    display: block;
    font-family: var(--font-base);
    font-size: var(--text-subline);
    font-weight: var(--weight-regular);
    line-height: var(--leading-base);
    color: var(--color-text);
    margin-top: var(--space-sm);
}

/* -----------------------------------------
   H2
----------------------------------------- */
h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-h2);
    margin-bottom: var(--space-md);
}

/* -----------------------------------------
   H3
----------------------------------------- */
h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-h3);
    margin-bottom: var(--space-md);
}

/* -----------------------------------------
   H4 – H6
----------------------------------------- */
h4 {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

h5 {
    font-size: var(--text-h5);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

h6 {
    font-size: var(--text-h6);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

/* -----------------------------------------
   BODY TEXT
----------------------------------------- */
p {
    margin-bottom: 5px;
}

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

ul,
ol {
    margin-bottom: var(--space-md);
    padding-left: 1.5rem;
}


/* =========================================
   5. BUTTONS
   ========================================= */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font: inherit;
}

.btn,
.button,
.bd_submit,
.wpcf7-submit.bd_submit,
.wp-element-button,
.wp-block-button .wp-block-button__link {
    --_btn-bg: var(--btn-primary-bg);
    --_btn-bg-hover: var(--btn-primary-bg-hover);
    --_btn-border: var(--btn-primary-border);
    --_btn-border-hover: var(--btn-primary-bg-hover);
    --_btn-color: var(--btn-primary-color);
    --_btn-color-hover: var(--btn-primary-color);
    --_btn-height: var(--btn-height);
    --_btn-padding: var(--btn-padding);
    --_btn-font-size: var(--btn-font-size);
    --_btn-shadow-hover: var(--btn-shadow-hover);
    --_btn-transform-hover: translateY(var(--btn-translate-hover));

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--_btn-height);
    padding: var(--_btn-padding);
    border: var(--btn-border-width) solid var(--_btn-border);
    border-radius: var(--btn-radius);
    background: var(--_btn-bg);
    color: var(--_btn-color);
    font-family: var(--font-base);
    font-size: var(--_btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    appearance: none;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-fast),
        opacity var(--transition);
}

.btn:hover,
.button:hover,
.bd_submit:hover,
.wpcf7-submit.bd_submit:hover,
.wp-element-button:hover,
.wp-block-button .wp-block-button__link:hover {
    background: var(--_btn-bg-hover);
    border-color: var(--_btn-border-hover);
    color: var(--_btn-color-hover);
    box-shadow: var(--_btn-shadow-hover);
    transform: var(--_btn-transform-hover);
    opacity: 1;
}

.btn:active,
.button:active,
.bd_submit:active,
.wpcf7-submit.bd_submit:active,
.wp-element-button:active,
.wp-block-button .wp-block-button__link:active {
    box-shadow: none;
    transform: translateY(0);
}

.btn-primary,
.btn,
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-element-button,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-fill .wp-element-button {
    --_btn-bg: var(--btn-primary-bg);
    --_btn-bg-hover: var(--btn-primary-bg-hover);
    --_btn-border: var(--btn-primary-border);
    --_btn-border-hover: var(--btn-primary-bg-hover);
    --_btn-color: var(--btn-primary-color);
    --_btn-color-hover: var(--btn-primary-color);
}

.btn-secondary {
    --_btn-bg: var(--btn-secondary-bg);
    --_btn-bg-hover: var(--btn-secondary-hover);
    --_btn-border: var(--btn-secondary-border);
    --_btn-border-hover: var(--btn-secondary-hover-border);
    --_btn-color: var(--btn-secondary-color);
    --_btn-color-hover: var(--btn-secondary-color);
}

.btn-accent {
    --_btn-bg: var(--btn-accent-bg);
    --_btn-bg-hover: var(--btn-accent-hover);
    --_btn-border: var(--btn-accent-border);
    --_btn-border-hover: var(--btn-accent-hover);
    --_btn-color: var(--btn-accent-color);
    --_btn-color-hover: var(--btn-accent-color);
}

.btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
    --_btn-bg: var(--btn-outline-bg);
    --_btn-bg-hover: var(--btn-outline-hover-bg);
    --_btn-border: var(--btn-outline-border);
    --_btn-border-hover: var(--btn-outline-hover-bg);
    --_btn-color: var(--btn-outline-color);
    --_btn-color-hover: var(--btn-outline-hover);
}

.btn-outline-accent {
    --_btn-bg: transparent;
    --_btn-bg-hover: var(--btn-accent-bg);
    --_btn-border: var(--btn-accent-bg);
    --_btn-border-hover: var(--btn-accent-bg);
    --_btn-color: var(--btn-accent-bg);
    --_btn-color-hover: var(--btn-accent-color);
}

.btn-inverse,
.btn-white {
    --_btn-bg: var(--btn-inverse-bg);
    --_btn-bg-hover: var(--btn-inverse-bg-hover);
    --_btn-border: var(--btn-inverse-border);
    --_btn-border-hover: var(--btn-inverse-bg-hover);
    --_btn-color: var(--btn-inverse-color);
    --_btn-color-hover: var(--btn-inverse-color);
}

.btn-outline-inverse {
    --_btn-bg: var(--btn-inverse-outline-bg);
    --_btn-bg-hover: var(--btn-inverse-outline-hover-bg);
    --_btn-border: var(--btn-inverse-outline-border);
    --_btn-border-hover: var(--btn-inverse-outline-border);
    --_btn-color: var(--btn-inverse-outline-color);
    --_btn-color-hover: var(--btn-inverse-outline-hover);
}

.btn-ghost,
.bd-contact-link {
    --_btn-bg: var(--btn-ghost-bg);
    --_btn-bg-hover: var(--btn-ghost-hover);
    --_btn-border: var(--btn-ghost-border);
    --_btn-border-hover: var(--btn-ghost-hover);
    --_btn-color: var(--btn-ghost-color);
    --_btn-color-hover: var(--btn-ghost-color);
}

.btn-link {
    --_btn-bg: transparent;
    --_btn-bg-hover: transparent;
    --_btn-border: transparent;
    --_btn-border-hover: transparent;
    --_btn-color: var(--btn-link-color);
    --_btn-color-hover: var(--btn-link-hover);
    --_btn-height: auto;
    --_btn-padding: 0;
    --_btn-shadow-hover: none;
    --_btn-transform-hover: none;
}

.btn-link:hover {
    box-shadow: none;
    transform: none;
    text-decoration: underline;
}

.btn-success {
    --_btn-bg: var(--color-success);
    --_btn-bg-hover: var(--color-success);
    --_btn-border: var(--color-success);
    --_btn-border-hover: var(--color-success);
    --_btn-color: var(--color-white);
    --_btn-color-hover: var(--color-white);
}

.btn-warning {
    --_btn-bg: var(--color-warning);
    --_btn-bg-hover: var(--color-warning);
    --_btn-border: var(--color-warning);
    --_btn-border-hover: var(--color-warning);
    --_btn-color: var(--color-grey-900);
    --_btn-color-hover: var(--color-grey-900);
}

.btn-danger {
    --_btn-bg: var(--color-error);
    --_btn-bg-hover: var(--color-error);
    --_btn-border: var(--color-error);
    --_btn-border-hover: var(--color-error);
    --_btn-color: var(--color-white);
    --_btn-color-hover: var(--color-white);
}

.btn-sm {
    --_btn-height: var(--btn-height-sm);
    --_btn-padding: var(--btn-padding-sm);
    --_btn-font-size: var(--btn-font-size-sm);
}

.btn-lg {
    --_btn-height: var(--btn-height-lg);
    --_btn-padding: var(--btn-padding-lg);
    --_btn-font-size: var(--btn-font-size-lg);
}

.btn-block {
    width: 100%;
}

.btn-icon {
    width: var(--btn-height);
    min-width: var(--btn-height);
    padding-inline: 0;
    aspect-ratio: 1;
}

.btn-icon.btn-sm {
    width: var(--btn-height-sm);
    min-width: var(--btn-height-sm);
}

.btn-icon.btn-lg {
    width: var(--btn-height-lg);
    min-width: var(--btn-height-lg);
}

.btn i,
.btn svg,
.btn .fa,
.btn .fa-light,
.btn .fa-brands,
.btn .fab,
.button i,
.bd-contact-link i,
.wp-element-button i,
.wp-block-button .wp-block-button__link i {
    flex: 0 0 auto;
    font-size: var(--btn-icon-size);
    line-height: 1;
    color: inherit;
}

.btn:hover .bd-icon-slide { transform: translateX(4px); }
.btn:hover .bd-icon-slide-left { transform: translateX(-4px); }

.button.disabled,
.btn.disabled,
.btn.is-disabled,
.btn[aria-disabled="true"],
.bd_submit:disabled,
.wpcf7-submit.bd_submit:disabled,
.btn:disabled,
.btn.bd-is-disabled,
.wp-element-button.disabled,
.wp-element-button[aria-disabled="true"],
.wp-block-button__link.disabled,
.wp-block-button__link[aria-disabled="true"] {
    background: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    color: var(--btn-disabled-color);
    cursor: not-allowed;
    box-shadow: none;
    opacity: .72;
    pointer-events: none;
    transform: none;
}

.btn.is-loading {
    position: relative;
    color: transparent;
    --btn-loading-color: var(--btn-primary-color);
    pointer-events: none;
}

.btn-secondary.is-loading,
.btn-accent.is-loading,
.btn-success.is-loading,
.btn-danger.is-loading {
    --btn-loading-color: var(--color-white);
}

.btn-warning.is-loading,
.btn-outline.is-loading,
.btn-ghost.is-loading {
    --btn-loading-color: var(--color-grey-900);
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid var(--btn-loading-color);
    border-right-color: transparent;
    border-radius: 999px;
    animation: bd-button-spin .75s linear infinite;
}

.bd-link-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--btn-link-color);
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    text-decoration: none;
}

.bd-link-action:hover,
.bd-link-action:focus-visible {
    color: var(--btn-link-hover);
}

.bd-link-action i,
.bd-link-action .fa,
.bd-link-action .fa-light,
.bd-link-action .fa-brands {
    color: currentColor;
    transition: transform var(--transition-fast);
}

.bd-link-action:hover i,
.bd-link-action:focus-visible i {
    transform: translateX(4px);
}

@keyframes bd-button-spin {
    to { transform: rotate(360deg); }
}


/* =========================================
   6. FOCUS
   ========================================= */
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}


/* =========================================
   7. LAYOUT & CONTAINER
   ========================================= */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--xl  { max-width: var(--container-xl); }
.container--2xl { max-width: var(--container-2xl); }

.bd-container {
    width: 100%;
    max-width: var(--bd-container-shell-max);
    margin-inline: auto;
    padding-inline: var(--bd-container-gutter);
}

.bd-container--full {
    max-width: none;
    padding-inline: 0;
}

.bd-container--wide {
    max-width: var(--bd-container-shell-max);
}

.bd-container--default {
    max-width: var(--container-default);
}

.bd-container--narrow {
    max-width: var(--container-narrow);
}

.bd-container--reading {
    max-width: var(--container-reading);
}

.container--reading {
    max-width: var(--container-reading);
    margin-inline: auto;
}

@media (max-width: 767px) {
    .container {
        padding-inline: var(--container-padding-mobile);
    }

    .bd-container--full {
        padding-inline: 0;
    }
}

.site-content {
    min-height: var(--site-min-height);
}

.entry-content.container {
    padding-block: var(--space-3xl);
}


/* =========================================
   8. GRID UTILITIES
   ========================================= */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--_cols, 1), 1fr);
    gap: var(--grid-gap);
}

.grid--gap-xs  { gap: var(--grid-gap-xs); }
.grid--gap-sm  { gap: var(--grid-gap-sm); }
.grid--gap-md  { gap: var(--grid-gap-md); }
.grid--gap-lg  { gap: var(--grid-gap-lg); }
.grid--gap-xl  { gap: var(--grid-gap-xl); }
.grid--gap-none { gap: 0; }

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-col), 100%), 1fr));
}

.grid--1  { --_cols: 1; }
.grid--2  { --_cols: 2; }
.grid--3  { --_cols: 3; }
.grid--4  { --_cols: 4; }
.grid--6  { --_cols: 6; }
.grid--12 { --_cols: 12; }

.bd-grid {
    display: grid;
    grid-template-columns: repeat(var(--bd-grid-cols, 1), minmax(0, 1fr));
    gap: var(--bd-grid-gap);
    align-items: var(--bd-grid-align, stretch);
}

.bd-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--bd-grid-min, var(--grid-min-col)), 100%), 1fr));
}

.bd-grid--auto-sm { --bd-grid-min: var(--grid-min-col-sm); }
.bd-grid--auto-lg { --bd-grid-min: var(--grid-min-col-lg); }

.bd-grid--gap-none { --bd-grid-gap: 0; }
.bd-grid--gap-xs   { --bd-grid-gap: var(--grid-gap-xs); }
.bd-grid--gap-sm   { --bd-grid-gap: var(--grid-gap-sm); }
.bd-grid--gap-md   { --bd-grid-gap: var(--grid-gap-md); }
.bd-grid--gap-lg   { --bd-grid-gap: var(--grid-gap-lg); }
.bd-grid--gap-xl   { --bd-grid-gap: var(--grid-gap-xl); }

.bd-grid--align-start  { --bd-grid-align: start; }
.bd-grid--align-center { --bd-grid-align: center; }
.bd-grid--align-end    { --bd-grid-align: end; }
.bd-grid--dense        { grid-auto-flow: dense; }

.bd-grid--cols-1 { --bd-grid-cols: 1; }
.bd-grid--cols-2 { --bd-grid-cols: 2; }
.bd-grid--cols-3 { --bd-grid-cols: 3; }
.bd-grid--cols-4 { --bd-grid-cols: 4; }
.bd-grid--cols-12 { --bd-grid-cols: 12; }

.bd-grid--6-6,
.bd-grid--5-7,
.bd-grid--7-5,
.bd-grid--4-8,
.bd-grid--8-4 {
    --bd-grid-cols: initial;
}

.bd-grid--6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bd-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bd-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bd-grid--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.bd-grid--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }

.bd-stack {
    display: grid;
    gap: var(--bd-stack-gap, var(--space-md));
}

.bd-stack--xs  { --bd-stack-gap: var(--space-xs); }
.bd-stack--sm  { --bd-stack-gap: var(--space-sm); }
.bd-stack--lg  { --bd-stack-gap: var(--space-lg); }
.bd-stack--xl  { --bd-stack-gap: var(--space-xl); }
.bd-stack--2xl { --bd-stack-gap: var(--space-2xl); }

.bd-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bd-cluster-gap, var(--space-sm));
    align-items: var(--bd-cluster-align, center);
    justify-content: var(--bd-cluster-justify, flex-start);
}

.bd-cluster--between { --bd-cluster-justify: space-between; }
.bd-cluster--center  { --bd-cluster-justify: center; }
.bd-cluster--end     { --bd-cluster-justify: flex-end; }
.bd-cluster--start   { --bd-cluster-justify: flex-start; }
.bd-cluster--align-start { --bd-cluster-align: flex-start; }

.bd-split {
    display: grid;
    gap: var(--bd-split-gap, var(--grid-gap));
    align-items: var(--bd-split-align, center);
}

.bd-split--sidebar,
.bd-split.bd-sidebar {
    display: grid;
    gap: var(--bd-sidebar-gap, var(--grid-gap));
}

@media (min-width: 768px) {
    .bd-split--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bd-split--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .bd-split--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .bd-split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .bd-split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

    .bd-split--sidebar,
    .bd-split.bd-sidebar {
        grid-template-columns: minmax(0, 1fr) minmax(var(--layout-sidebar-min), .38fr);
    }

    .bd-split--sidebar-left,
    .bd-split.bd-sidebar--left {
        grid-template-columns: minmax(var(--layout-sidebar-min), .38fr) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .bd-grid--cols-2,
    .bd-grid--cols-3,
    .bd-grid--cols-4,
    .bd-grid--cols-12,
    .bd-grid--6-6,
    .bd-grid--5-7,
    .bd-grid--7-5,
    .bd-grid--4-8,
    .bd-grid--8-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .grid--md-1  { --_cols: 1; }
    .grid--md-2  { --_cols: 2; }
    .grid--md-3  { --_cols: 3; }
    .grid--md-4  { --_cols: 4; }
    .grid--md-6  { --_cols: 6; }
    .grid--md-12 { --_cols: 12; }
}

@media (min-width: 1200px) {
    .grid--lg-1  { --_cols: 1; }
    .grid--lg-2  { --_cols: 2; }
    .grid--lg-3  { --_cols: 3; }
    .grid--lg-4  { --_cols: 4; }
    .grid--lg-6  { --_cols: 6; }
    .grid--lg-12 { --_cols: 12; }
}

.grid--1x2  { --_cols: 1; }
.grid--1x3  { --_cols: 1; }
.grid--2x4  { --_cols: 2; }

@media (min-width: 768px) {
    .grid--1x2 { --_cols: 2; }
    .grid--2x4 { --_cols: 4; }
}

@media (min-width: 1200px) {
    .grid--1x3 { --_cols: 3; }
}

.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-6  { grid-column: span 6; }
.col-span-full { grid-column: 1 / -1; }

@media (max-width: 767px) {
    .col-span-2,
    .col-span-3,
    .col-span-4,
    .col-span-6 {
        grid-column: span 1;
    }
}


/* =========================================
   9. SECTION UTILITIES
   ========================================= */
.bd-section {
    position: relative;
    padding-block: var(--bd-section-padding-y, var(--section-padding-lg));
    background: var(--bd-section-bg, transparent);
    color: var(--bd-section-color, inherit);
}

.bd-section--flush { --bd-section-padding-y: 0; }
.bd-section--xs    { --bd-section-padding-y: var(--section-padding-xs); }
.bd-section--sm    { --bd-section-padding-y: var(--section-padding-sm); }
.bd-section--md    { --bd-section-padding-y: var(--section-padding-md); }
.bd-section--lg    { --bd-section-padding-y: var(--section-padding-lg); }
.bd-section--xl    { --bd-section-padding-y: var(--section-padding-xl); }
.bd-section--2xl   { --bd-section-padding-y: var(--section-padding-2xl); }
.bd-section--3xl   { --bd-section-padding-y: var(--section-padding-3xl); }

.bg-alt,
.section--bg-alt   { background-color: var(--color-bg-alt); }

.bg-dark,
.section--bg-dark  { background-color: var(--color-bg-dark); }

.bg-light,
.section--bg-light { background-color: var(--color-bg-light); }

.section--bg-white { background-color: var(--color-bg); }

.section--spacing-none { padding-block: var(--section-padding-none); }
.section--spacing-sm   { padding-block: var(--section-padding-sm); }
.section--spacing-md   { padding-block: var(--section-padding-md); }
.section--spacing-lg   { padding-block: var(--section-padding-lg); }
.section--spacing-xl   { padding-block: var(--section-padding-xl); }
.section--spacing-2xl  { padding-block: var(--section-padding-2xl); }
.section--spacing-3xl  { padding-block: var(--section-padding-3xl); }

.bd-block {
    position: relative;
}

.bd-spacing-top--none { padding-top: 0; }
.bd-spacing-top--xs   { padding-top: var(--section-padding-xs); }
.bd-spacing-top--sm   { padding-top: var(--section-padding-sm); }
.bd-spacing-top--md   { padding-top: var(--section-padding-md); }
.bd-spacing-top--lg   { padding-top: var(--section-padding-lg); }
.bd-spacing-top--xl   { padding-top: var(--section-padding-xl); }
.bd-spacing-top--xxl  { padding-top: var(--section-padding-2xl); }

.bd-spacing-bottom--none { padding-bottom: 0; }
.bd-spacing-bottom--xs   { padding-bottom: var(--section-padding-xs); }
.bd-spacing-bottom--sm   { padding-bottom: var(--section-padding-sm); }
.bd-spacing-bottom--md   { padding-bottom: var(--section-padding-md); }
.bd-spacing-bottom--lg   { padding-bottom: var(--section-padding-lg); }
.bd-spacing-bottom--xl   { padding-bottom: var(--section-padding-xl); }
.bd-spacing-bottom--xxl  { padding-bottom: var(--section-padding-2xl); }

.bd-variant--default {
    background: var(--color-bg);
    color: var(--color-text);
}

.bd-variant--light,
.bd-variant--boxed {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.bd-variant--muted,
.bd-variant--minimal {
    background: transparent;
    color: var(--color-muted);
}

.bd-variant--dark {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.bd-variant--primary {
    background: var(--color-primary);
    color: var(--color-text);
}

.bd-variant--secondary {
    background: var(--color-accent);
    color: var(--color-accent-text);
}


/* =========================================
   10. TABELLEN
   ========================================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
    text-align: left;
    font-size: var(--text-body);
}

th,
td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

th {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    background-color: var(--color-bg-light);
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:nth-child(even) {
    background-color: var(--color-row-alt);
}

@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* =========================================
   11. BLOCKQUOTES
   ========================================= */
blockquote {
    margin: var(--space-md) 0;
    padding: var(--space-md) var(--space-lg);
    border-left: 4px solid var(--color-accent);
    background-color: unset;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

blockquote p {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--color-heading);
    margin-bottom: 0;
}

blockquote cite,
blockquote footer {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--color-muted);
}


/* =========================================
   12. CODE
   ========================================= */
code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

p code,
li code,
td code {
    background-color: var(--color-bg-light);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--color-heading);
}

pre {
    background-color: var(--color-grey-900);
    color: var(--color-white);
    padding: var(--space-md);
    border-radius: var(--radius-base);
    overflow-x: auto;
    margin-bottom: var(--space-md);
    line-height: var(--leading-base);
}

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


/* =========================================
   13. GUTENBERG UTILITIES
   ========================================= */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    align-items: center;
}

.wp-block-button {
    margin: 0;
}


/* =========================================
   14. BILDER & GUTENBERG ALIGNMENT
   ========================================= */
figure {
    margin-bottom: var(--space-md);
}

figcaption,
.wp-block-image figcaption {
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-align: center;
}

.alignleft {
    float: left;
    margin-right: var(--space-md);
    margin-bottom: var(--space-sm);
    max-width: 50%;
}

.alignright {
    float: right;
    margin-left: var(--space-md);
    margin-bottom: var(--space-sm);
    max-width: 50%;
}

.aligncenter {
    display: block;
    margin-inline: auto;
    text-align: center;
}

.entry-content::after,
.wp-block-group::after {
    content: "";
    display: table;
    clear: both;
}

.alignfull {
    width: calc(100% + 2 * var(--container-padding));
    max-width: none;
    margin-inline: calc(-1 * var(--container-padding));
}

.alignwide {
    width: calc(100% + 2 * var(--container-padding));
    max-width: none;
    margin-inline: calc(-1 * var(--container-padding));
}

@media (min-width: 1200px) {
    .alignwide {
        width: min(calc(var(--max-width) + 200px), 95vw);
        max-width: none;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}


/* =========================================
   15. FORMULARE (CF7)
   ========================================= */
.bd_fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.bd_visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bd-container-narrow { max-width: calc(var(--bd-container-narrow) + var(--bd-container-gutter) + var(--bd-container-gutter)); }
.bd-container-wide { max-width: calc(var(--bd-container-wide) + var(--bd-container-gutter) + var(--bd-container-gutter)); }
.bd-container-fluid { max-width: 100%; }

.bd-section--spaced { margin-block: var(--bd-section-rhythm); }
.bd-section--tight { margin-block: var(--bd-space-3); }
.bd-section--loose { margin-block: calc(var(--bd-section-rhythm) * 1.5); }
.bd-section--xl { margin-block: calc(var(--bd-section-rhythm) * 2); }

/* SERVICE DEMO TOKENS BEGIN — staging presentation, 2026-09-13 */
:root {
    --sd-line: 1px;
    --sd-accent-line: 3px;
    --sd-muted: #626879;
    --sd-navy: var(--bd-color-primary);
    --sd-green: #176446;
    --sd-amber: #865813;
    --sd-blue: var(--bd-color-primary);
    --sd-panel-padding: clamp(1.25rem, 3vw, 2.5rem);
    --sd-side-width: 20rem;
    --sd-inbox-width: 22rem;
    --sd-step-number: 2.25rem;
    --sd-symbol-size: 3.5rem;
    --sd-small-icon: 1.25rem;
    --sd-choice-icon: 1.75rem;
    --sd-avatar-size: 2.5rem;
    --sd-attachment-height: 8rem;
    --sd-dialog-width: 58rem;
    --sd-dialog-height: 85vh;
    --sd-dialog-media-height: 62vh;
    --sd-dialog-small-width: 34rem;
    --sd-meter-height: 0.35rem;
    --sd-inbox-max-height: 58rem;
    --sd-toast-bottom: 2rem;
    --sd-toast-width: 38rem;
    --sd-toast-z: 10050;
    --sd-backdrop: rgba(15, 20, 45, .65);
    --sd-scroll-margin: 7rem;
    --sd-step-tracking: .075em;
    --sd-line-height: 1.5;
    --sd-tight-height: 1.2;
    --sd-min-touch: 2.75rem;
    --sd-medium-weight: 600;
    --sd-bold-weight: 700;
    --sd-product-results-height: 22rem;
    --sd-product-results-z: 20;
}
/* SERVICE DEMO TOKENS END */