/* Qabl – Komponenten. Alle Werte aus tokens.css. */
body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); }
.qb, .qb * { box-sizing: border-box; }
.qb { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
:where(.qb) a { color: inherit; }
.qb :focus-visible { outline: 2px solid var(--qabl-schiefer); outline-offset: 2px; }
.qb-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-12); }
.qb-icon { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* Button */
.qb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-md); font: 700 16px/20px var(--font-sans); text-decoration: none; cursor: pointer; text-align: center; }
.qb-btn-primary { background: var(--qabl-rose); color: var(--ink-on-dark); }
.qb-btn-primary:hover { background: var(--qabl-mauve); }
.qb-btn-secondary { background: var(--qabl-schiefer-25); color: var(--ink); }
.qb-btn-secondary:hover { background: var(--qabl-schiefer-70); }
.qb-btn-dark { background: var(--qabl-schiefer-tief); color: var(--ink-on-dark); }
.qb-btn-inverse { background: #FFFFFF; color: #332E2D; }
.qb-btn-link { background: none; padding: 0; min-height: 0; color: var(--qabl-rose); text-decoration: underline; text-underline-offset: 4px; }

/* Stamp */
.qb-stamp { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: #FFFFFF; border: 4px solid var(--qabl-rot); color: var(--qabl-rot-tief); text-transform: uppercase; font-weight: 800; line-height: 1; text-align: center; transform: rotate(-12deg); box-shadow: 0 0 0 4px #FFFFFF; }
.qb-stamp span { display: block; }
.qb-stamp span + span { margin-top: 2px; }

/* PromoBand */
.qb-promo { background: var(--qabl-mauve); color: var(--ink-on-dark); text-align: center; font: 700 16px/24px var(--font-sans); padding: var(--space-2) var(--space-6); letter-spacing: .01em; }

/* SiteHeader */
.qb-header { display: flex; align-items: center; gap: var(--space-16); height: 96px; padding: 0 var(--space-12); background: var(--surface); }
.qb-header img { height: 44px; width: auto; display: block; }
.qb-header nav { display: flex; gap: var(--space-12); flex: 1; }
.qb-header nav a { font-size: 18px; line-height: 28px; text-decoration: none; color: var(--ink); padding-bottom: 2px; border-bottom: 3px solid transparent; }
.qb-header nav a[aria-current="page"] { border-bottom-color: var(--qabl-rot); }
.qb-header nav a:hover { border-bottom-color: var(--qabl-rose-70); }
.qb-burger { background: none; border: 0; color: var(--ink); padding: var(--space-2); cursor: pointer; border-radius: var(--radius-md); }

/* Hero */
.qb-hero { position: relative; display: grid; grid-template-columns: 58% 42%; min-height: 380px; overflow: hidden; }
.qb-hero-media { position: absolute; inset: 0 0 0 40%; }
.qb-hero-panel { position: relative; z-index: 1; padding: var(--space-16) var(--space-16) var(--space-16) var(--space-16); color: var(--ink-on-dark); border-top-right-radius: 140px 50%; border-bottom-right-radius: 140px 50%; display: flex; flex-direction: column; justify-content: center; }
.qb-tone-rot.qb-hero-panel { background: var(--qabl-rot); }
.qb-tone-rose.qb-hero-panel { background: var(--qabl-rose); }
.qb-tone-schiefer.qb-hero-panel { background: var(--qabl-schiefer-tief); }
.qb-hero h1 { margin: 0; font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -.01em; max-width: 12em; }
.qb-hero-lead { margin: var(--space-4) 0 0; font-size: 20px; line-height: 28px; font-weight: 700; max-width: 26em; }
.qb-hero-text { margin: var(--space-3) 0 0; font-size: 17px; line-height: 26px; max-width: 32em; }
.qb-hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.qb-hero-stamp { position: absolute; z-index: 2; left: calc(58% - 72px); bottom: 56px; }

/* Media placeholder + image */
.qb-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.qb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--qabl-schiefer-25); color: var(--ink-muted); font-size: 14px; }

/* PageHero */
.qb-pagehero { position: relative; min-height: 340px; overflow: hidden; background: var(--surface-alt); }
.qb-pagehero-media { position: absolute; inset: 0 45% 0 0; }
.qb-pagehero-panel { position: absolute; inset: 0 0 0 45%; background: var(--qabl-schiefer-tief); color: var(--ink-on-dark); border-top-left-radius: 180px 50%; border-bottom-left-radius: 180px 50%; padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.qb-pagehero-panel > * { position: relative; z-index: 1; }
.qb-pagehero-rings { position: absolute !important; z-index: 0 !important; right: -150px; bottom: -180px; width: 320px; height: 320px; }
.qb-pagehero-rings circle { fill: none; stroke: var(--qabl-mauve-70); stroke-width: 56; }
.qb-pagehero h1 { margin: 0; font-size: 44px; line-height: 50px; font-weight: 700; }
.qb-pagehero-lead { margin: var(--space-2) 0 0; font-size: 18px; line-height: 26px; font-weight: 700; }
.qb-pagehero-text { margin: var(--space-4) 0 0; font-size: 16px; line-height: 24px; max-width: 26em; }

/* ImageCircle */
.qb-circle { position: relative; border-radius: var(--radius-pill); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.qb-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qb-circle.is-cutout img { object-fit: contain; padding: 12%; }
.qb-ring-rot { box-shadow: inset 0 0 0 4px var(--qabl-rot); }
.qb-ring-rose { box-shadow: inset 0 0 0 4px var(--qabl-rose); }
.qb-ring-mauve { box-shadow: inset 0 0 0 4px var(--qabl-mauve); }
.qb-ring-schiefer { box-shadow: inset 0 0 0 4px var(--qabl-schiefer); }
.qb-circle > .qb-circle-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.qb-fill-rot { background: var(--qabl-rot-70); }
.qb-fill-rose { background: var(--qabl-rose-70); }
.qb-fill-mauve { background: var(--qabl-mauve-70); }
.qb-fill-schiefer { background: var(--qabl-schiefer-70); }
.qb-fill-none { background: var(--qabl-schiefer-25); }

/* CategoryCard */
.qb-cat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.qb-cat h3 { margin: var(--space-2) 0 0; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--qabl-rot); }
.qb-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.qb-cat li a { color: var(--qabl-rose); text-decoration: none; font-size: 16px; line-height: 24px; }
.qb-cat li a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* IndustryCard */
.qb-ind { display: flex; flex-direction: column; gap: var(--space-3); max-width: 260px; }
.qb-ind .qb-ind-icon { margin-top: var(--space-2); }
.qb-ind h3 { margin: 0; font-size: 30px; line-height: 34px; font-weight: 700; }
.qb-ind h4 { margin: 0; font-size: 19px; line-height: 26px; font-weight: 700; }
.qb-ind p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.qb-c-rot { color: var(--qabl-rot); }
.qb-c-rose { color: var(--qabl-rose); }
.qb-c-mauve { color: var(--qabl-mauve); }
.qb-c-schiefer { color: var(--qabl-schiefer); }
.qb-ind .qb-c-rot h4, .qb-ind h4.qb-c-rot { color: var(--qabl-rot-tief); }

/* FeatureGrid */
.qb-features { background: var(--qabl-rose); color: var(--ink-on-dark); padding: var(--space-12) var(--space-16) var(--space-16); position: relative; overflow: hidden; }
.qb-features h2 { margin: 0 0 var(--space-8); font-size: 34px; line-height: 40px; font-weight: 700; }
.qb-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-12); }
.qb-feature { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-2) var(--space-4); align-items: center; }
.qb-feature-badge { width: 64px; height: 64px; border-radius: var(--radius-pill); background: #FFFFFF; color: var(--qabl-rose); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--qabl-rose-70); }
.qb-feature h3 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qb-feature p { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 22px; }

/* QuoteList */
.qb-quotes { padding: var(--space-12) var(--space-16); }
.qb-quotes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.qb-quotes li { font-size: 18px; line-height: 26px; color: var(--qabl-rose); font-weight: 300; }
.qb-quotes li::before { content: "\201E"; }
.qb-quotes li::after { content: "\201C"; }
.qb-quotes figcaption { margin-top: var(--space-6); text-align: right; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* StorySection */
.qb-story { position: relative; display: grid; grid-template-columns: 1fr 40%; background: var(--qabl-rose-50); color: var(--ink); overflow: hidden; min-height: 360px; }
.qb-story-body { padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16); }
.qb-story h2 { margin: 0 0 var(--space-4); font-size: 34px; line-height: 40px; font-weight: 700; }
.qb-story p { margin: 0 0 var(--space-4); font-size: 16px; line-height: 24px; }
.qb-story-media { position: relative; border-top-left-radius: 50% 60%; border-bottom-left-radius: 50% 60%; overflow: hidden; }
.qb-checks { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); }
.qb-checks li { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ProductSection */
.qb-product { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); padding: var(--space-12) var(--space-16); align-items: center; }
.qb-product.is-reverse .qb-product-media { order: 2; }
.qb-product-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.qb-product h2 { margin: 0; font-size: 44px; line-height: 50px; font-weight: 700; color: var(--qabl-schiefer); }
.qb-product-code { font-size: 16px; line-height: 24px; color: var(--ink-muted); letter-spacing: .04em; }
.qb-product h3 { margin: 0 0 var(--space-3); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--qabl-schiefer); }
.qb-product-text { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.qb-product-text p { margin: 0 0 var(--space-3); }
.qb-product-media { min-height: 260px; display: flex; align-items: center; justify-content: center; }
.qb-product-media img { max-width: 100%; max-height: 360px; display: block; }
.qb-product-media .qb-ph { min-height: 260px; border-radius: var(--radius-lg); }
.qb-product-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; align-items: center; }
.qb-product.is-band { background: var(--qabl-schiefer-tief); color: var(--ink-on-dark); }
.qb-product.is-band h2, .qb-product.is-band h3, .qb-product.is-band .qb-product-code, .qb-product.is-band .qb-product-text { color: var(--ink-on-dark); }
.qb-product.is-band .qb-ph { background: var(--qabl-schiefer-70); color: var(--ink); }

/* CtaBand */
.qb-cta { background: var(--qabl-rose); color: var(--ink-on-dark); display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; padding: var(--space-8) var(--space-16); }
.qb-cta-stampwrap { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; }
.qb-cta-stampwrap > .qb-icon { position: absolute; inset: 0; color: var(--ink-on-dark); stroke-width: 1.2; }
.qb-cta p { margin: 0; font-size: 22px; line-height: 30px; }
.qb-cta-actions { display: flex; gap: var(--space-12); margin-top: var(--space-6); flex-wrap: wrap; }
.qb-cta-actions a { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 18px; line-height: 24px; font-weight: 700; color: var(--ink-on-dark); text-decoration: none; }
.qb-cta-actions a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ContactActions */
.qb-contact { background: var(--qabl-mauve); color: var(--ink-on-dark); padding: var(--space-8) var(--space-16); }
.qb-contact ul { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--space-4); max-width: 640px; }
.qb-contact li a { display: grid; grid-template-columns: 40px 300px 1fr; align-items: center; gap: var(--space-4); color: inherit; text-decoration: none; }
.qb-contact strong { font-size: 18px; line-height: 24px; }
.qb-contact span { font-size: 16px; line-height: 24px; }
.qb-contact li a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* SiteFooter */
.qb-footer { position: relative; overflow: hidden; background: var(--surface); padding: var(--space-12) var(--space-16) var(--space-16); }
.qb-footer::after { content: ""; position: absolute; right: -380px; top: 0; width: 640px; height: 640px; border-radius: var(--radius-pill); background: var(--surface-alt); z-index: 0; }
.qb-footer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1.2fr .8fr .9fr; gap: var(--space-8); max-width: 960px; }
.qb-footer img { height: 36px; width: auto; display: block; }
.qb-footer-claim { margin: var(--space-3) 0 0; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--qabl-rose); }
.qb-footer-group { margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.qb-footer-contact li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); color: var(--ink-muted); }
.qb-footer-contact .qb-icon { color: var(--qabl-schiefer); margin-top: 1px; }
.qb-footer-links a { color: var(--qabl-rose); text-decoration: none; }
.qb-footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.qb-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.qb-social a { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--qabl-rot-tief); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* SliderArrow + Slider */
.qb-arrow { width: 48px; height: 48px; border-radius: var(--radius-pill); border: 0; background: var(--qabl-rose); color: var(--ink-on-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 4px var(--surface); transition: background .15s; }
.qb-arrow:hover:not(:disabled) { background: var(--qabl-mauve); }
.qb-arrow:disabled { background: var(--qabl-schiefer-25); color: var(--ink-muted); cursor: default; }
.qb-arrow:focus-visible { outline: 2px solid var(--qabl-schiefer); outline-offset: 4px; }
.qb-slider { padding: var(--space-8) 0; }
.qb-slider-title { margin: 0 0 var(--space-8); text-align: center; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; font-weight: 700; color: var(--qabl-rot); }
.qb-slider-stage { position: relative; padding: 0 var(--space-16); }
.qb-slider-stage > .qb-arrow { position: absolute; z-index: 2; }
.qb-arrow-prev { left: var(--space-2); }
.qb-arrow-next { right: var(--space-2); }
.qb-slider-track { display: grid; grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 0; }
.qb-slider-track::-webkit-scrollbar { display: none; }
.qb-slider-track:focus-visible { outline: 2px solid var(--qabl-schiefer); outline-offset: 4px; border-radius: var(--radius-md); }
.qb-slide { scroll-snap-align: start; min-width: 0; }
.qb-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.qb-dots span { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--qabl-schiefer-70); transition: width .2s; }
.qb-dots span.is-on { width: 32px; background: var(--qabl-rose); }
@media (max-width: 900px) { .qb-slider-track { grid-auto-columns: calc(50% - 16px) !important; } }
@media (max-width: 560px) { .qb-slider-stage { padding: 0 var(--space-4); } .qb-slider-track { grid-auto-columns: 85% !important; } .qb-slider-stage > .qb-arrow { display: none; } }

/* ContactForm */
.qb-form { max-width: 720px; }
.qb-form h2 { margin: 0 0 var(--space-2); font-size: 30px; line-height: 36px; font-weight: 700; color: var(--qabl-mauve); }
.qb-form-intro { margin: 0 0 var(--space-6); font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.qb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
.qb-field { display: flex; flex-direction: column; gap: var(--space-2); }
.qb-field.is-wide, .qb-check.is-wide { grid-column: 1 / -1; }
.qb-field label { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); }
.qb-opt { font-weight: 400; color: var(--ink-muted); }
.qb-form input[type=text], .qb-form input[type=email], .qb-form input[type=tel], .qb-form select, .qb-form textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--qabl-schiefer); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-sans); appearance: none; }
.qb-form textarea { resize: vertical; min-height: 128px; }
.qb-form ::placeholder { color: var(--ink-muted); opacity: 1; }
.qb-form input:hover, .qb-form select:hover, .qb-form textarea:hover { border-color: var(--ink); }
.qb-form input:focus-visible, .qb-form select:focus-visible, .qb-form textarea:focus-visible { outline: 2px solid var(--qabl-schiefer); outline-offset: 2px; border-color: var(--ink); }
.qb-select { position: relative; }
.qb-select select { padding-right: var(--space-12); cursor: pointer; }
.qb-select .qb-icon { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--qabl-schiefer); }
.qb-field.has-error input, .qb-field.has-error textarea { border-color: var(--ink-error); border-width: 2px; }
.qb-err { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-error); }
.qb-check { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-2) var(--space-3); align-items: start; margin-top: var(--space-2); }
.qb-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--qabl-rose); cursor: pointer; }
.qb-check label { font-size: 14px; line-height: 22px; color: var(--ink); }
.qb-check label a { color: var(--qabl-rose); text-underline-offset: 3px; }
.qb-check .qb-err { grid-column: 2; }
.qb-form-alert { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-6) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--qabl-rose-50); color: var(--ink); font-size: 15px; line-height: 22px; }
.qb-form-actions { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; }
.qb-form-actions .qb-btn:disabled { opacity: .7; cursor: progress; }
.qb-form-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qb-form-done { text-align: center; padding: var(--space-12) var(--space-6); margin: 0 auto; }
.qb-form-done-icon { display: inline-flex; width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--qabl-rose); color: var(--ink-on-dark); align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.qb-form-done p { margin: var(--space-2) 0 0; color: var(--ink-muted); }
@media (max-width: 640px) { .qb-form-grid { grid-template-columns: 1fr; } }