@charset "UTF-8";/* ========================================================================== billware – Frontend v2 Eigenstaendiges Stylesheet fuer das oeffentliche Marketing-Frontend (Startseite + Landingpages). Bewusst ohne Bootstrap-3-Grid und ohne das Rhythm-Theme, damit das alte compiled.frontend.css fuer Login, Sign-up und die Rechtsseiten unveraendert bestehen bleiben kann. Alle Klassen sind mit "bw-" praefixiert, der traegt "bw-v2". ========================================================================== *//* ========================================================================== billware Frontend v2 – Design Tokens Alles was Farbe, Abstand, Radius und Typografie definiert, steht hier. Wird ausschliesslich vom no-auth Marketing-Frontend genutzt. ========================================================================== *//* -------------------------------------------------------------------------- Webfont (self-hosted, kein Google-CDN) -------------------------------------------------------------------------- */@font-face{font-family: "Open Sans";font-style: normal;font-weight: 400;font-display: swap;src: url("/resources/webfont/open-sans-v34-latin-ext_latin-regular.woff2") format("woff2"), url("/resources/webfont/open-sans-v34-latin-ext_latin-regular.woff") format("woff");}@font-face{font-family: "Open Sans";font-style: italic;font-weight: 400;font-display: swap;src: url("/resources/webfont/open-sans-v34-latin-ext_latin-italic.woff2") format("woff2"), url("/resources/webfont/open-sans-v34-latin-ext_latin-italic.woff") format("woff");}@font-face{font-family: "Open Sans";font-style: normal;font-weight: 600;font-display: swap;src: url("/resources/webfont/open-sans-v34-latin-ext_latin-600.woff2") format("woff2"), url("/resources/webfont/open-sans-v34-latin-ext_latin-600.woff") format("woff");}@font-face{font-family: "Open Sans";font-style: normal;font-weight: 700;font-display: swap;src: url("/resources/webfont/open-sans-v34-latin-ext_latin-700.woff2") format("woff2"), url("/resources/webfont/open-sans-v34-latin-ext_latin-700.woff") format("woff");}@font-face{font-family: "Open Sans";font-style: normal;font-weight: 800;font-display: swap;src: url("/resources/webfont/open-sans-v34-latin-ext_latin-800.woff2") format("woff2"), url("/resources/webfont/open-sans-v34-latin-ext_latin-800.woff") format("woff");}/* -------------------------------------------------------------------------- Custom Properties -------------------------------------------------------------------------- */:root{/* Marke – Blau */ --bw-blue-50: #eff6fc;--bw-blue-100: #dceafa;--bw-blue-200: #bcd8f1;--bw-blue-400: #6ba7d9;--bw-blue-500: #468dcb;/* Markenblau */ --bw-blue-600: #2f7ab8;--bw-blue-700: #1f6395;/* Text/Links auf Weiss – AA */ --bw-blue-900: #123a59;/* Marke – Gruen */ --bw-green-50: #edf8ec;--bw-green-100: #d8f0d7;--bw-green-500: #4ab848;/* Markengruen */ --bw-green-600: #3aa038;--bw-green-700: #2c7d2b;/* Text auf Weiss – AA */ /* Neutral */ --bw-ink-900: #0e2233;--bw-ink-800: #163348;--bw-ink-700: #2a4459;--bw-ink-500: #56707f;--bw-ink-400: #7b93a2;--bw-ink-300: #a9bcc8;/* Flaechen */ --bw-surface: #ffffff;--bw-surface-2: #f6fafd;--bw-surface-3: #eaf2f9;--bw-surface-dark: #0e2233;--bw-line: #e0eaf2;--bw-line-strong: #c9dae7;/* Signal */ --bw-warn: #f9c851;--bw-danger: #ff5b5b;/* Statuscodes und Meldungen – Flaeche und Schrift immer im Paar */ --bw-ok-bg: #edf8ec;--bw-ok-fg: #2c7d2b;--bw-warn-bg: #fff4e2;--bw-warn-fg: #a45b06;--bw-error-bg: #ffecec;--bw-error-fg: #a92222;/* Partnerfarben */ --bw-woo: #7f54b3;--bw-shopify: #5e8e3e;/* Radius */ --bw-r-sm: 8px;--bw-r-md: 12px;--bw-r-lg: 18px;--bw-r-xl: 26px;--bw-r-pill: 999px;/* Schatten */ --bw-shadow-xs: 0 1px 2px rgba(14, 34, 51, 0.06);--bw-shadow-sm: 0 2px 8px rgba(14, 34, 51, 0.06);--bw-shadow-md: 0 10px 30px rgba(14, 34, 51, 0.08);--bw-shadow-lg: 0 24px 60px rgba(14, 34, 51, 0.14);/* Raster */ --bw-container: 1180px;--bw-container-narrow: 820px;--bw-gutter: 24px;/* Typografie */ --bw-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bw-fs-display: clamp(1.85rem, calc(1.3rem + 1.9vw), 2.5rem);--bw-fs-h2: clamp(1.5rem, calc(1.2rem + 1.35vw), 2.05rem);--bw-fs-h3: clamp(1.15rem, calc(1.05rem + 0.4vw), 1.35rem);--bw-fs-lead: clamp(1.05rem, calc(1rem + 0.3vw), 1.2rem);/* Navigation */ --bw-nav-h: 74px;color-scheme: light;}@media (max-width: 767px){:root{ --bw-gutter: 20px; --bw-nav-h: 64px;}}/* -------------------------------------------------------------------------- Dunkles Theme Das gesamte Design haengt an Custom Properties – hier werden nur die Farbwerte getauscht. Gesetzt wird das Attribut von einem kurzen Skript im , siehe ViewHelper::themeScript(). -------------------------------------------------------------------------- */:root[data-bw-theme=dark]{--bw-blue-50: #16303f;--bw-blue-100: #1c3d50;--bw-blue-200: #27536c;--bw-blue-400: #6fb3e4;--bw-blue-500: #61a9de;--bw-blue-600: #7cbcec;--bw-blue-700: #8ecbf5;--bw-blue-900: #b9e0ff;--bw-green-50: #14301c;--bw-green-100: #1b4326;--bw-green-500: #58c956;--bw-green-600: #3e9d3c;--bw-green-700: #79d977;--bw-ink-900: #eaf3fa;--bw-ink-800: #d7e6f1;--bw-ink-700: #bacddc;--bw-ink-500: #93aabc;--bw-ink-400: #7a92a5;--bw-ink-300: #62798b;--bw-surface: #0f1c27;--bw-surface-2: #16242f;--bw-surface-3: #1e2f3d;--bw-line: #24384a;--bw-line-strong: #375166;--bw-ok-bg: #14301c;--bw-ok-fg: #79d977;--bw-warn-bg: #3a2e12;--bw-warn-fg: #f0c268;--bw-error-bg: #3a1717;--bw-error-fg: #ff9b9b;/* Dunkle Abschnittsbaender heben sich sonst nicht mehr von der Seite ab. */ --bw-surface-dark: #08131c;--bw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);--bw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);--bw-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);--bw-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);color-scheme: dark;}/* ========================================================================== billware Frontend v2 – Reset, Basistypografie, Layout-Primitives ========================================================================== */*,*::before,*::after{box-sizing: border-box;}html{-webkit-text-size-adjust: 100%;scroll-behavior: smooth;scroll-padding-top: calc(var(--bw-nav-h) + 16px);}body.bw-v2{margin: 0;font-family: var(--bw-font);font-size: 16px;line-height: 1.65;color: var(--bw-ink-700);background: var(--bw-surface);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow-x: hidden;}body.bw-v2.is-nav-open{overflow: hidden;}/* Element-Defaults bewusst in :where() – Spezifitaet 0. Sonst schlaegt ".bw-v2 ul" (0,1,1) jede Komponentenklasse wie ".bw-nav__menu" (0,1,0) und schleppt Standardabstaende mit. */:where(.bw-v2 h1, .bw-v2 h2, .bw-v2 h3, .bw-v2 h4){margin: 0 0 0.5em;color: var(--bw-ink-900);font-weight: 800;line-height: 1.18;letter-spacing: -0.02em;text-wrap: balance;}:where(.bw-v2 h1){font-size: var(--bw-fs-display);}:where(.bw-v2 h2){font-size: var(--bw-fs-h2);}:where(.bw-v2 h3){font-size: var(--bw-fs-h3);font-weight: 700;letter-spacing: -0.01em;}:where(.bw-v2 h4){font-size: 1rem;font-weight: 700;letter-spacing: 0;}:where(.bw-v2 p){margin: 0 0 1em;}:where(.bw-v2 p:last-child){margin-bottom: 0;}:where(.bw-v2 a){color: var(--bw-blue-700);text-decoration: none;transition: color 0.15s ease;}:where(.bw-v2 a:hover){color: var(--bw-blue-600);text-decoration: underline;text-underline-offset: 2px;}:where(.bw-v2 img, .bw-v2 svg){max-width: 100%;height: auto;vertical-align: middle;}:where(.bw-v2 strong, .bw-v2 b){font-weight: 700;color: var(--bw-ink-900);}:where(.bw-v2 ul, .bw-v2 ol){margin: 0 0 1em;padding-left: 1.2em;}:where(.bw-v2 figure, .bw-v2 blockquote){margin: 0;}.bw-v2 :focus-visible{outline: 3px solid var(--bw-blue-400);outline-offset: 2px;border-radius: 4px;}.bw-skip-link{position: absolute;left: -9999px;top: 0;z-index: 200;padding: 12px 20px;background: var(--bw-ink-900);color: #fff;border-radius: 0 0 var(--bw-r-sm) 0;}.bw-skip-link:focus{left: 0;color: #fff;}/* -------------------------------------------------------------------------- Layout-Primitives -------------------------------------------------------------------------- */.bw-container{width: 100%;max-width: var(--bw-container);margin: 0 auto;padding: 0 var(--bw-gutter);}.bw-container--narrow{max-width: var(--bw-container-narrow);}.bw-section{padding: clamp(56px, 7vw, 104px) 0;}.bw-section--tight{padding: clamp(40px, 4.5vw, 64px) 0;}.bw-section--flush-top{padding-top: 0;}.bw-section--flush-bottom{padding-bottom: 0;}.bw-section--tint{background: var(--bw-surface-2);}.bw-section--blue{background: var(--bw-surface-3);}.bw-section--dark{background: var(--bw-surface-dark);color: #c6d7e3;}.bw-section--dark h2,.bw-section--dark h3,.bw-section--dark strong{color: #fff;}/* Grid */.bw-grid{display: grid;gap: 24px;}.bw-grid--2{grid-template-columns: repeat(2, minmax(0, 1fr));}.bw-grid--3{grid-template-columns: repeat(3, minmax(0, 1fr));}.bw-grid--4{grid-template-columns: repeat(4, minmax(0, 1fr));}@media (max-width: 959px){.bw-grid--3, .bw-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr));}}@media (max-width: 639px){.bw-grid--2, .bw-grid--3, .bw-grid--4{ grid-template-columns: minmax(0, 1fr);}}/* Split (Text + Visual) */.bw-split{display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: clamp(32px, 5vw, 72px);align-items: center;}.bw-split--text-narrow{grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);}.bw-split--top{align-items: start;}@media (max-width: 899px){.bw-split, .bw-split--text-narrow{ grid-template-columns: minmax(0, 1fr);}.bw-split__visual--first-on-mobile{ order: -1;}}/* Hilfsklassen – bewusst wenige */.bw-center{text-align: center;}.bw-measure{max-width: 62ch;}.bw-measure-center{max-width: 62ch;margin-left: auto;margin-right: auto;}.bw-stack-sm > * + *{margin-top: 12px;}.bw-mt-24{margin-top: 24px;}.bw-mt-40{margin-top: 40px;}.bw-mt-56{margin-top: clamp(36px, 4vw, 56px);}.bw-visually-hidden{position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}/* Reveal-Animation – respektiert reduzierte Bewegung */.bw-reveal{opacity: 0;transform: translateY(18px);transition: opacity 0.6s ease, transform 0.6s ease;}.bw-reveal.is-visible{opacity: 1;transform: none;}@media (prefers-reduced-motion: reduce){html{ scroll-behavior: auto;}.bw-reveal{ opacity: 1; transform: none; transition: none;}.bw-v2 *, .bw-v2 *::before, .bw-v2 *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;}}.bw-mb-24{margin-bottom: 24px;}/* Markenschreibweise "billware". * * Die Klassen kamen bisher nur aus dem alten Stylesheet und fehlten damit im * oeffentlichen Frontend - im Impressum stand "billware" deshalb einfarbig. * Die 700er-Toene sind die auf Weiss lesbaren Varianten. */.text-bw-blue{color: var(--bw-blue-700);}.text-bw-green{color: var(--bw-green-700);}/* ========================================================================== billware Frontend v2 – Komponenten ========================================================================== *//* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */.bw-btn{display: inline-flex;align-items: center;justify-content: center;gap: 10px;padding: 14px 26px;border: 1px solid transparent;border-radius: var(--bw-r-pill);font-family: inherit;font-size: 1rem;font-weight: 700;line-height: 1.2;text-align: center;text-decoration: none;cursor: pointer;transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;}.bw-btn:hover{text-decoration: none;transform: translateY(-1px);}.bw-btn:active{transform: translateY(0);}.bw-btn svg{flex: none;}.bw-btn--primary{background: var(--bw-green-600);color: #fff;box-shadow: var(--bw-shadow-sm);}.bw-btn--primary:hover{background: var(--bw-green-700);color: #fff;box-shadow: var(--bw-shadow-md);}.bw-btn--secondary{background: var(--bw-blue-700);color: #fff;}.bw-btn--secondary:hover{background: var(--bw-blue-900);color: #fff;}.bw-btn--outline{background: transparent;border-color: var(--bw-line-strong);color: var(--bw-ink-800);}.bw-btn--outline:hover{border-color: var(--bw-blue-500);color: var(--bw-blue-700);background: var(--bw-blue-50);}.bw-btn--on-dark{background: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.35);color: #fff;}.bw-btn--on-dark:hover{background: rgba(255, 255, 255, 0.18);color: #fff;}.bw-btn--lg{padding: 17px 34px;font-size: 1.06rem;}.bw-btn--sm{padding: 10px 18px;font-size: 0.9rem;}.bw-btn--block{display: flex;width: 100%;}.bw-btn-row{display: flex;flex-wrap: wrap;align-items: center;gap: 14px;}.bw-btn-row--center{justify-content: center;}.bw-btn-note{margin: 14px 0 0;color: var(--bw-ink-500);font-size: 0.875rem;}/* Textlink mit Pfeil */.bw-link-arrow{display: inline-flex;align-items: center;gap: 7px;font-weight: 700;color: var(--bw-blue-700);}.bw-link-arrow svg{transition: transform 0.15s ease;}.bw-link-arrow:hover{text-decoration: none;}.bw-link-arrow:hover svg{transform: translateX(3px);}/* -------------------------------------------------------------------------- Eyebrow / Badges / Pills -------------------------------------------------------------------------- */.bw-eyebrow{display: inline-flex;align-items: center;gap: 8px;margin-bottom: 16px;padding: 6px 14px 6px 10px;border-radius: var(--bw-r-pill);background: var(--bw-blue-50);color: var(--bw-blue-700);font-size: 0.8rem;font-weight: 700;letter-spacing: 0.02em;text-transform: uppercase;}.bw-eyebrow--green{background: var(--bw-green-50);color: var(--bw-green-700);}.bw-eyebrow--plain{padding: 0;background: none;}.bw-eyebrow img{width: 24px;height: 24px;border-radius: 6px;object-fit: contain;}/* Eyebrow mit Logo darf etwas mehr Luft haben */.bw-eyebrow:has(img){padding: 5px 16px 5px 6px;font-size: 0.82rem;}.bw-pill{display: inline-flex;align-items: center;gap: 6px;padding: 4px 11px;border-radius: var(--bw-r-pill);font-size: 0.75rem;font-weight: 700;background: var(--bw-surface-3);color: var(--bw-ink-700);}.bw-pill--green{background: var(--bw-green-50);color: var(--bw-green-700);}.bw-pill--blue{background: var(--bw-blue-50);color: var(--bw-blue-700);}/* Markenname aus gepflegten Texten (Lang-Keys, SitesFile) */.bw-v2 .billware-text::before{content: "bill";color: var(--bw-blue-500);}.bw-v2 .billware-text::after{content: "ware";color: var(--bw-green-500);}/* -------------------------------------------------------------------------- Section-Kopf -------------------------------------------------------------------------- */.bw-section-head{max-width: 680px;margin: 0 0 clamp(32px, 4vw, 56px);}.bw-section-head--center{margin-left: auto;margin-right: auto;text-align: center;}.bw-section-head p{font-size: var(--bw-fs-lead);color: var(--bw-ink-500);}.bw-section--dark .bw-section-head p,.bw-section--dark p{color: #9db6c7;}/* Kleingedrucktes unter einem Block */.bw-note{font-size: 0.92rem;color: var(--bw-ink-500);}.bw-section--dark .bw-note{color: #9db6c7;}/* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */.bw-card{display: flex;flex-direction: column;padding: 28px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);box-shadow: var(--bw-shadow-xs);}.bw-card--flat{box-shadow: none;}.bw-card--link{transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;}.bw-card--link:hover{transform: translateY(-3px);border-color: var(--bw-blue-200);box-shadow: var(--bw-shadow-md);text-decoration: none;}.bw-card h3{margin-bottom: 8px;}.bw-card p{color: var(--bw-ink-500);}.bw-card__foot{margin-top: auto;padding-top: 18px;}/* Icon-Puck */.bw-icon{display: inline-flex;align-items: center;justify-content: center;width: 46px;height: 46px;margin-bottom: 18px;border-radius: var(--bw-r-md);background: var(--bw-blue-100);color: var(--bw-blue-700);}.bw-icon svg{width: 24px;height: 24px;}.bw-icon--green{background: var(--bw-green-100);color: var(--bw-green-700);}.bw-icon--dark{background: rgba(255, 255, 255, 0.08);color: #8fc0e6;}.bw-icon--sm{width: 36px;height: 36px;margin-bottom: 0;border-radius: var(--bw-r-sm);}.bw-icon--sm svg{width: 19px;height: 19px;}/* Feature-Zeile (Icon links, Text rechts) */.bw-feature{display: grid;grid-template-columns: 46px minmax(0, 1fr);gap: 18px;align-items: start;}.bw-feature .bw-icon{margin-bottom: 0;}.bw-feature h3{margin-bottom: 6px;}.bw-feature p{margin: 0;color: var(--bw-ink-500);}/* -------------------------------------------------------------------------- Checkliste -------------------------------------------------------------------------- */.bw-checklist{margin: 0;padding: 0;list-style: none;}.bw-checklist li{position: relative;padding: 7px 0 7px 34px;}.bw-checklist li::before{content: "";position: absolute;left: 0;top: 12px;width: 20px;height: 20px;border-radius: 50%;background-color: var(--bw-green-50);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c7d2b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size: 13px 13px;background-position: center;background-repeat: no-repeat;}.bw-checklist--tight li{padding-top: 4px;padding-bottom: 4px;}.bw-checklist--tight li::before{top: 9px;}.bw-checklist--dark li::before{background-color: rgba(74, 184, 72, 0.18);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ede6c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}/* -------------------------------------------------------------------------- Logo-Leiste -------------------------------------------------------------------------- */.bw-logos{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 10px;}.bw-chip{display: inline-flex;align-items: center;gap: 9px;padding: 8px 16px 8px 9px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-pill);background: var(--bw-surface);font-size: 0.9rem;font-weight: 600;color: var(--bw-ink-700);transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;}.bw-chip img{width: 26px;height: 26px;border-radius: 6px;object-fit: contain;}a.bw-chip:hover{border-color: var(--bw-blue-200);box-shadow: var(--bw-shadow-sm);transform: translateY(-1px);text-decoration: none;color: var(--bw-ink-900);}.bw-logos__label{margin: 0 0 26px;text-align: center;font-size: 0.82rem;font-weight: 700;letter-spacing: 0.09em;text-transform: uppercase;color: var(--bw-ink-400);}/* -------------------------------------------------------------------------- Trust-Leiste -------------------------------------------------------------------------- */.bw-trust{display: flex;flex-wrap: wrap;justify-content: center;gap: 10px 26px;padding: 0;margin: 0;list-style: none;}.bw-trust li{display: flex;align-items: center;gap: 9px;font-size: 0.9rem;font-weight: 600;color: var(--bw-ink-500);}.bw-trust svg{width: 18px;height: 18px;color: var(--bw-green-600);flex: none;}/* -------------------------------------------------------------------------- Schritt-fuer-Schritt -------------------------------------------------------------------------- */.bw-steps{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 28px;counter-reset: bw-step;}@media (max-width: 767px){.bw-steps{ grid-template-columns: minmax(0, 1fr);}}/* Die Schritte stehen unter dem Flow-Diagramm und muessen exakt in dessen Spalten fallen – das Flow-Raster hat 46px breite Pfeilspalten dazwischen. */.bw-steps--flow-aligned{grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 46px minmax(0, 1fr);gap: 0;}.bw-steps--flow-aligned > *:nth-child(1){grid-column: 1;}.bw-steps--flow-aligned > *:nth-child(2){grid-column: 3;}.bw-steps--flow-aligned > *:nth-child(3){grid-column: 5;}@media (max-width: 767px){.bw-steps--flow-aligned{ grid-template-columns: minmax(0, 1fr); gap: 28px;}.bw-steps--flow-aligned > *:nth-child(1), .bw-steps--flow-aligned > *:nth-child(2), .bw-steps--flow-aligned > *:nth-child(3){ grid-column: 1;}}.bw-step{position: relative;padding-top: 8px;}.bw-step__no{display: inline-flex;align-items: center;justify-content: center;width: 38px;height: 38px;margin-bottom: 16px;border-radius: 50%;background: var(--bw-blue-700);color: #fff;font-weight: 800;font-size: 0.95rem;}.bw-step h3{margin-bottom: 6px;}.bw-step p{margin: 0;color: var(--bw-ink-500);}/* -------------------------------------------------------------------------- FAQ (natives

, kein JS noetig) -------------------------------------------------------------------------- */.bw-faq{max-width: 860px;margin: 0 auto;border-top: 1px solid var(--bw-line);}.bw-faq__item{border-bottom: 1px solid var(--bw-line);}.bw-faq__item > summary{display: flex;align-items: center;justify-content: space-between;gap: 20px;padding: 22px 4px;cursor: pointer;list-style: none;font-size: 1.05rem;font-weight: 700;color: var(--bw-ink-900);}.bw-faq__item > summary::-webkit-details-marker{display: none;}.bw-faq__item > summary::after{content: "";flex: none;width: 22px;height: 22px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6395' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-size: contain;background-repeat: no-repeat;background-position: center;transition: transform 0.2s ease;}.bw-faq__item[open] > summary::after{transform: rotate(180deg);}.bw-faq__item > summary:hover{color: var(--bw-blue-700);}.bw-faq__answer{padding: 0 4px 24px;color: var(--bw-ink-500);max-width: 74ch;}/* -------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------- */.bw-quotes{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 24px;}@media (max-width: 959px){.bw-quotes{ grid-template-columns: repeat(2, minmax(0, 1fr));}}@media (max-width: 639px){.bw-quotes{ grid-template-columns: minmax(0, 1fr);}}.bw-quote{display: flex;flex-direction: column;gap: 14px;margin: 0;padding: 26px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);}.bw-quote__stars{display: flex;gap: 3px;color: #f5b301;}.bw-quote__stars svg{width: 17px;height: 17px;}.bw-quote__stars .is-off{color: var(--bw-line-strong);}.bw-quote__text{margin: 0;color: var(--bw-ink-700);}.bw-quote__author{display: flex;align-items: center;gap: 12px;margin-top: auto;padding-top: 18px;border-top: 1px solid var(--bw-line);font-size: 0.9rem;font-weight: 700;color: var(--bw-ink-900);}.bw-quote__avatar{width: 52px;height: 52px;flex: none;border-radius: 50%;object-fit: cover;background: var(--bw-surface-2);border: 1px solid var(--bw-line);}.bw-quote__author small{display: block;font-size: 0.78rem;font-weight: 600;color: var(--bw-ink-400);}/* -------------------------------------------------------------------------- Preis-Teaser -------------------------------------------------------------------------- */.bw-price{display: flex;flex-direction: column;padding: 32px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-xl);box-shadow: var(--bw-shadow-sm);}.bw-price--accent{border-color: var(--bw-blue-200);box-shadow: var(--bw-shadow-md);}.bw-price__label{font-size: 0.82rem;font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase;color: var(--bw-ink-400);}.bw-price__amount{display: flex;align-items: baseline;gap: 6px;margin: 10px 0 2px;color: var(--bw-ink-900);font-size: 2.9rem;font-weight: 800;letter-spacing: -0.03em;line-height: 1;}.bw-price__unit{font-size: 1rem;font-weight: 600;color: var(--bw-ink-500);letter-spacing: 0;}.bw-price__note{margin: 0 0 22px;font-size: 0.85rem;color: var(--bw-ink-400);}.bw-price .bw-checklist{margin-bottom: 26px;}.bw-price .bw-btn{margin-top: auto;}/* Erweiterungs-Kacheln */.bw-addons{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 14px;}@media (max-width: 639px){.bw-addons{ grid-template-columns: repeat(2, minmax(0, 1fr));}}.bw-addon{display: flex;flex-direction: column;align-items: center;gap: 8px;padding: 18px 12px;text-align: center;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-md);}.bw-addon img{height: 30px;width: auto;}.bw-addon__name{font-size: 0.85rem;font-weight: 700;color: var(--bw-ink-800);line-height: 1.3;}.bw-addon__price{font-size: 0.85rem;font-weight: 700;color: var(--bw-ink-800);line-height: 1.25;}.bw-addon__price small{display: block;font-size: 0.68rem;font-weight: 600;color: var(--bw-ink-400);}/* -------------------------------------------------------------------------- CTA-Band -------------------------------------------------------------------------- */.bw-cta{position: relative;overflow: hidden;padding: clamp(40px, 5vw, 64px);border-radius: var(--bw-r-xl);background: linear-gradient(135deg, #1a4c74 0%, #2f7ab8 55%, #468dcb 100%);color: #dceafa;text-align: center;}.bw-cta h2{color: #fff;margin-bottom: 12px;}.bw-cta p{max-width: 56ch;margin: 0 auto 26px;font-size: var(--bw-fs-lead);}.bw-cta .bw-btn-row{justify-content: center;}/* ".bw-cta p" ist spezifischer als eine einzelne Klasse – deshalb hier ebenfalls zweistufig, sonst bleibt der Abstand nach oben wirkungslos. */.bw-cta .bw-cta__note{max-width: 52ch;margin: 36px auto 0;font-size: 0.85rem;color: rgba(255, 255, 255, 0.75);}/* -------------------------------------------------------------------------- Flashmessages (uebernommen aus dem Bestand, neu gestylt) -------------------------------------------------------------------------- */.bw-v2 .alert{max-width: var(--bw-container);margin: 0 auto 8px;padding: 14px 20px;border-radius: var(--bw-r-md);font-size: 0.95rem;}.bw-v2 .alert.success{background: var(--bw-green-50);color: var(--bw-green-700);}.bw-v2 .alert.error{background: #ffecec;color: #a92222;}.bw-v2 .alert.warning{background: #fff6e0;color: #8a6100;}.bw-v2 .alert.info{background: var(--bw-blue-50);color: var(--bw-blue-700);}/* ========================================================================== billware Frontend v2 – Navigation ========================================================================== */.bw-nav{position: sticky;top: 0;z-index: 100;background: rgba(255, 255, 255, 0.92);backdrop-filter: saturate(180%) blur(12px);-webkit-backdrop-filter: saturate(180%) blur(12px);border-bottom: 1px solid transparent;transition: border-color 0.2s ease, box-shadow 0.2s ease;}.bw-nav.is-stuck{border-bottom-color: var(--bw-line);box-shadow: 0 2px 14px rgba(14, 34, 51, 0.05);}.bw-nav__inner{display: flex;align-items: center;gap: 20px;height: var(--bw-nav-h);max-width: var(--bw-container);margin: 0 auto;padding: 0 var(--bw-gutter);}.bw-nav__logo{flex: none;display: inline-flex;align-items: center;}.bw-nav__logo img{height: 30px;width: auto;}.bw-nav__menu{display: flex;align-items: center;gap: 4px;margin: 0 auto 0 12px;padding: 0;list-style: none;}.bw-nav__actions{display: flex;align-items: center;gap: 10px;flex: none;}.bw-nav__link{display: inline-flex;align-items: center;gap: 6px;padding: 9px 14px;border-radius: var(--bw-r-sm);color: var(--bw-ink-700);font-size: 0.95rem;font-weight: 600;white-space: nowrap;}.bw-nav__link:hover{background: var(--bw-surface-2);color: var(--bw-ink-900);text-decoration: none;}.bw-nav__link[aria-current=page]{color: var(--bw-blue-700);}.bw-nav__link svg{width: 15px;height: 15px;transition: transform 0.15s ease;}/* Dropdown */.bw-nav__item{position: relative;}.bw-nav__panel{position: absolute;top: calc(100% + 8px);left: 0;z-index: 20;width: 560px;padding: 14px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);box-shadow: var(--bw-shadow-lg);opacity: 0;visibility: hidden;transform: translateY(-6px);transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;}.bw-nav__item:hover .bw-nav__panel,.bw-nav__item:focus-within .bw-nav__panel,.bw-nav__item.is-open .bw-nav__panel{opacity: 1;visibility: visible;transform: none;}.bw-nav__item:hover .bw-nav__link svg,.bw-nav__item.is-open .bw-nav__link svg{transform: rotate(180deg);}.bw-nav__panel-grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 4px;}.bw-nav__tile{display: grid;grid-template-columns: 34px minmax(0, 1fr);gap: 12px;align-items: center;padding: 12px;border-radius: var(--bw-r-md);color: var(--bw-ink-700);}.bw-nav__tile:hover{background: var(--bw-surface-2);text-decoration: none;color: var(--bw-ink-700);}.bw-nav__tile img{width: 34px;height: 34px;object-fit: contain;}.bw-nav__tile-icon{display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: var(--bw-r-sm);background: var(--bw-blue-50);color: var(--bw-blue-600);}.bw-nav__tile-icon svg{width: 19px;height: 19px;}.bw-nav__tile-title{display: block;font-weight: 700;font-size: 0.94rem;color: var(--bw-ink-900);line-height: 1.3;}.bw-nav__tile-sub{display: block;font-size: 0.82rem;color: var(--bw-ink-400);line-height: 1.4;}/* Burger */.bw-nav__burger{display: none;align-items: center;justify-content: center;width: 42px;height: 42px;padding: 0;border: 1px solid var(--bw-line);border-radius: var(--bw-r-sm);background: var(--bw-surface);color: var(--bw-ink-800);cursor: pointer;}.bw-nav__burger svg{width: 22px;height: 22px;}.bw-nav__burger .bw-nav__burger-close{display: none;}body.is-nav-open .bw-nav__burger .bw-nav__burger-close{display: block;}body.is-nav-open .bw-nav__burger .bw-nav__burger-open{display: none;}/* Mobile */@media (max-width: 1023px){.bw-nav__burger{ display: inline-flex;}.bw-nav__inner{ justify-content: space-between;}.bw-nav__menu, .bw-nav__actions{ display: none;}.bw-nav__drawer{ position: fixed; top: var(--bw-nav-h); left: 0; right: 0; bottom: 0; z-index: 99; display: block; padding: 20px var(--bw-gutter) 40px; background: var(--bw-surface); overflow-y: auto; /* Kein translateX: ein aus dem Viewport geschobenes fixed-Element erzeugt auf dem Handy horizontales Scrollen. */ visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;}body.is-nav-open .bw-nav__drawer{ visibility: visible; opacity: 1; transform: none;}.bw-nav__drawer-inner{ max-width: var(--bw-container); margin: 0 auto;}.bw-nav__drawer-list{ margin: 0 0 22px; padding: 0; list-style: none;}.bw-nav__drawer-list > li{ border-bottom: 1px solid var(--bw-line);}.bw-nav__drawer-list > li > a{ display: block; padding: 15px 2px; font-size: 1.05rem; font-weight: 700; color: var(--bw-ink-900);}.bw-nav__drawer-group{ padding: 14px 2px 6px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bw-ink-400);}.bw-nav__drawer .bw-nav__tile{ padding: 10px 2px;}.bw-nav__drawer-actions{ display: grid; gap: 10px; margin-top: 8px;}}@media (min-width: 1024px){.bw-nav__drawer{ display: none;}}/* ========================================================================== billware Frontend v2 – Hero, Produktvisual, Flow-Diagramm ========================================================================== *//* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */.bw-hero{position: relative;padding: clamp(44px, 5.5vw, 84px) 0 clamp(52px, 6vw, 92px);background: radial-gradient(1100px 460px at 78% -8%, var(--bw-blue-50) 0%, rgba(239, 246, 252, 0) 70%), radial-gradient(760px 380px at 6% 8%, var(--bw-green-50) 0%, rgba(237, 248, 236, 0) 65%), var(--bw-surface);overflow: hidden;}.bw-hero__grid{display: grid;grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);gap: clamp(32px, 4.5vw, 64px);align-items: center;}@media (max-width: 899px){.bw-hero__grid{ grid-template-columns: minmax(0, 1fr);}}.bw-hero h1{margin-bottom: 18px;}.bw-hero__lead{font-size: var(--bw-fs-lead);color: var(--bw-ink-500);max-width: 54ch;}.bw-hero__list{margin: 22px 0 28px;}.bw-hero__price{margin: 16px 0 0;font-size: 0.95rem;color: var(--bw-ink-500);}.bw-hero__price strong{color: var(--bw-ink-900);}.bw-hero__visual{position: relative;}/* Foto hinter dem Produktfenster: das Fenster ueberlappt die linke untere Ecke, damit Zielgruppe und Produkt in einem Blick zusammenkommen. */.bw-hero__visual--photo{padding: 0 0 56px 0;}.bw-hero__photo{border-radius: var(--bw-r-xl);overflow: hidden;box-shadow: var(--bw-shadow-lg);aspect-ratio: 3/2;}.bw-hero__photo img{width: 100%;height: 100%;object-fit: cover;display: block;}/* Das Fenster behaelt seine Inhaltsgroesse und wird als Ganzes verkleinert, sonst deckt es das Foto fast vollstaendig ab. */.bw-hero__visual--photo .bw-app{position: absolute;left: -4%;bottom: 0;width: 80%;transform: scale(0.64);transform-origin: bottom left;z-index: 2;}/* Unten rechts am Foto, nicht oben: die Gesichter sitzen in der oberen Haelfte und sollen frei bleiben. 56px sind der Ueberhang des Fensters unter dem Foto. */.bw-hero__visual--photo .bw-float--br{position: absolute;bottom: 74px;right: -12px;z-index: 3;}@media (max-width: 1099px){.bw-hero__visual--photo .bw-app{ width: 86%; transform: scale(0.6);}}@media (max-width: 899px){/* Gestapelt: erst das Foto, darunter das Fenster in voller Breite. */ .bw-hero__visual--photo{ padding: 0;}.bw-hero__visual--photo .bw-app{ position: relative; left: 0; width: 100%; margin-top: 20px; transform: none;}.bw-hero__visual--photo .bw-float--br{ bottom: auto; top: 12px; right: 12px;}}/* -------------------------------------------------------------------------- Produktvisual – stilisiertes App-Fenster -------------------------------------------------------------------------- */.bw-app{position: relative;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);box-shadow: var(--bw-shadow-lg);overflow: hidden;}.bw-app__bar{display: flex;align-items: center;gap: 10px;padding: 11px 14px;background: var(--bw-surface-2);border-bottom: 1px solid var(--bw-line);}.bw-app__dots{display: flex;gap: 6px;flex: none;}.bw-app__dots span{width: 9px;height: 9px;border-radius: 50%;background: var(--bw-line-strong);}.bw-app__url{flex: 1;max-width: 230px;margin: 0 auto;padding: 4px 12px;border-radius: var(--bw-r-pill);background: var(--bw-surface);border: 1px solid var(--bw-line);font-size: 0.7rem;color: var(--bw-ink-400);text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.bw-app__body{padding: 20px;}.bw-app__title{display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-bottom: 16px;}.bw-app__title strong{font-size: 0.95rem;color: var(--bw-ink-900);}.bw-app__kpis{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;margin-bottom: 18px;}.bw-kpi{padding: 12px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-sm);background: var(--bw-surface-2);}.bw-kpi__label{font-size: 0.66rem;font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;color: var(--bw-ink-400);}.bw-kpi__value{margin-top: 3px;font-size: 1.02rem;font-weight: 800;color: var(--bw-ink-900);letter-spacing: -0.02em;}.bw-kpi__value--green{color: var(--bw-green-700);}.bw-kpi__value--blue{color: var(--bw-blue-700);}/* Balkendiagramm */.bw-chart{display: flex;align-items: flex-end;gap: 7px;height: 96px;padding: 14px 12px 12px;margin-bottom: 18px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-sm);}.bw-chart span{flex: 1;border-radius: 3px 3px 0 0;background: var(--bw-blue-200);}.bw-chart span.is-accent{background: var(--bw-blue-500);}/* Belegliste */.bw-app__rows{border: 1px solid var(--bw-line);border-radius: var(--bw-r-sm);overflow: hidden;}.bw-app__row{display: grid;grid-template-columns: 22px minmax(0, 1fr) auto auto;gap: 10px;align-items: center;padding: 10px 12px;font-size: 0.78rem;color: var(--bw-ink-500);border-bottom: 1px solid var(--bw-line);}.bw-app__row:last-child{border-bottom: 0;}.bw-app__row-src{width: 22px;height: 22px;border-radius: 5px;background: var(--bw-surface-3);display: flex;align-items: center;justify-content: center;overflow: hidden;}.bw-app__row-src img{max-width: 16px;max-height: 14px;}.bw-app__row-src svg{width: 13px;height: 13px;color: var(--bw-ink-400);}.bw-app__row-no{font-weight: 700;color: var(--bw-ink-800);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.bw-app__row-amount{font-weight: 700;color: var(--bw-ink-900);font-variant-numeric: tabular-nums;}.bw-status{display: inline-flex;align-items: center;gap: 5px;padding: 3px 9px;border-radius: var(--bw-r-pill);font-size: 0.68rem;font-weight: 700;white-space: nowrap;}.bw-status--paid{background: var(--bw-green-50);color: var(--bw-green-700);}.bw-status--sent{background: var(--bw-blue-50);color: var(--bw-blue-700);}.bw-status--open{background: #fff5df;color: #8a6100;}/* Schwebende Notiz */.bw-float{position: absolute;display: flex;align-items: center;gap: 11px;padding: 12px 16px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-md);box-shadow: var(--bw-shadow-md);font-size: 0.8rem;line-height: 1.35;color: var(--bw-ink-500);max-width: 250px;}.bw-float strong{display: block;font-size: 0.85rem;color: var(--bw-ink-900);}.bw-float__icon{display: flex;align-items: center;justify-content: center;flex: none;width: 32px;height: 32px;border-radius: 50%;background: var(--bw-green-50);color: var(--bw-green-700);}.bw-float__icon svg{width: 17px;height: 17px;}.bw-float--bl{left: -18px;bottom: -24px;}.bw-float--tr{right: -18px;top: -26px;}@media (max-width: 1099px){.bw-float--bl{ left: 8px; bottom: -20px;}.bw-float--tr{ right: 8px; top: -18px;}}@media (max-width: 599px){.bw-float{ display: none;}}/* -------------------------------------------------------------------------- Flow-Diagramm (Shop → billware → Rechnung) -------------------------------------------------------------------------- */.bw-flow{display: grid;grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 46px minmax(0, 1fr);align-items: stretch;gap: 0;}@media (max-width: 767px){.bw-flow{ grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0;}}.bw-flow__node{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;padding: 26px 18px;width: 100%;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);box-shadow: var(--bw-shadow-xs);text-align: center;}.bw-flow__node img{height: 56px;width: auto;object-fit: contain;}/* Die billware-Wortmarke ist breit statt quadratisch – sonst wird sie riesig. */.bw-flow__node img.bw-flow__wordmark{height: 34px;}.bw-flow__node .bw-icon{margin-bottom: 0;}.bw-flow__node-title{font-weight: 700;color: var(--bw-ink-900);font-size: 0.95rem;}.bw-flow__node-sub{font-size: 0.82rem;color: var(--bw-ink-400);}.bw-flow__arrow{display: flex;align-items: center;justify-content: center;color: var(--bw-blue-400);}.bw-flow__arrow svg{width: 26px;height: 26px;}@media (max-width: 767px){.bw-flow__arrow{ padding: 10px 0;}.bw-flow__arrow svg{ transform: rotate(90deg);}}/* -------------------------------------------------------------------------- Vergleichs-/Zahlenband -------------------------------------------------------------------------- */.bw-stats{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 24px;text-align: center;}@media (max-width: 767px){.bw-stats{ grid-template-columns: repeat(2, minmax(0, 1fr));}}.bw-stat__value{font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);font-weight: 800;letter-spacing: -0.03em;color: var(--bw-blue-700);line-height: 1.1;}.bw-section--dark .bw-stat__value{color: #7fc0f2;}.bw-stat__label{margin-top: 4px;font-size: 0.9rem;color: var(--bw-ink-500);}.bw-section--dark .bw-stat__label{color: #9db6c7;}/* -------------------------------------------------------------------------- Bild mit Rahmen -------------------------------------------------------------------------- */.bw-shot{border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);box-shadow: var(--bw-shadow-md);overflow: hidden;background: var(--bw-surface);}.bw-shot img{display: block;width: 100%;}/* ========================================================================== billware Frontend v2 – Footer ========================================================================== */.bw-footer{padding: clamp(48px, 5vw, 72px) 0 0;background: var(--bw-surface-dark);color: #9db6c7;font-size: 0.92rem;}.bw-footer a{color: #c6d7e3;}.bw-footer a:hover{color: #fff;text-decoration: none;}.bw-footer__grid{display: grid;grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));gap: 40px 28px;}@media (max-width: 899px){.bw-footer__grid{ grid-template-columns: repeat(2, minmax(0, 1fr));}}@media (max-width: 539px){.bw-footer__grid{ grid-template-columns: minmax(0, 1fr); gap: 30px;}}.bw-footer__brand img{height: 30px;width: auto;margin-bottom: 16px;}.bw-footer__brand p{max-width: 34ch;margin: 0 0 18px;}.bw-footer__col-title{margin: 0 0 14px;color: #fff;font-size: 0.8rem;font-weight: 800;letter-spacing: 0.09em;text-transform: uppercase;}.bw-footer__list{margin: 0;padding: 0;list-style: none;}.bw-footer__list li + li{margin-top: 9px;}.bw-footer__contact{display: flex;align-items: flex-start;gap: 10px;margin-bottom: 12px;}.bw-footer__contact svg{width: 17px;height: 17px;margin-top: 3px;flex: none;color: #6f93aa;}.bw-footer__badges{display: flex;flex-wrap: wrap;gap: 8px;}.bw-footer__badge{display: inline-flex;align-items: center;gap: 7px;padding: 5px 12px;border-radius: var(--bw-r-pill);background: rgba(255, 255, 255, 0.07);font-size: 0.78rem;font-weight: 600;color: #c6d7e3;}.bw-footer__badge svg{width: 14px;height: 14px;color: #6ede6c;}.bw-footer__bottom{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 12px;margin-top: clamp(36px, 4vw, 56px);padding: 22px 0;border-top: 1px solid rgba(255, 255, 255, 0.1);font-size: 0.85rem;}.bw-footer__bottom-links{display: flex;flex-wrap: wrap;gap: 8px 20px;margin: 0;padding: 0;list-style: none;}.bw-footer__made{display: inline-flex;align-items: center;gap: 6px;}.bw-footer__made svg{width: 15px;height: 15px;color: #ff6b6b;}.bw-footer__link-btn{background: none;border: 0;padding: 0;font: inherit;color: #c6d7e3;cursor: pointer;text-align: left;}.bw-footer__link-btn:hover{color: #fff;}/* E-Mail-Obfuskation (aus dem Bestand uebernommen) *//* .mail-information kommt aus den gepflegten Rechtstexten (SitesFile) und muss deshalb genauso funktionieren wie die neue Klasse. */.bw-mail::before,.bw-v2 .mail-information::before{content: attr(data-website) "@" attr(data-user);unicode-bidi: bidi-override;direction: rtl;}/* ========================================================================== billware Frontend v2 – Bausteine der Unterseiten Seitenkopf, Fliesstext, Breadcrumb, Blog, Preistabelle, Videoplayer ========================================================================== *//* -------------------------------------------------------------------------- Seitenkopf (Unterseiten ohne Hero) -------------------------------------------------------------------------- */.bw-page-head{padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px);background: radial-gradient(900px 380px at 80% -20%, var(--bw-blue-50) 0%, rgba(239, 246, 252, 0) 70%), var(--bw-surface);border-bottom: 1px solid var(--bw-line);}.bw-page-head__inner{max-width: 780px;}.bw-page-head--center .bw-page-head__inner{max-width: 780px;margin: 0 auto;text-align: center;}.bw-page-head h1{margin-bottom: 14px;}.bw-page-head__lead{font-size: var(--bw-fs-lead);color: var(--bw-ink-500);margin: 0;}.bw-page-head__meta{display: flex;flex-wrap: wrap;gap: 8px 18px;margin-top: 18px;font-size: 0.88rem;color: var(--bw-ink-400);}/* -------------------------------------------------------------------------- Breadcrumb -------------------------------------------------------------------------- */.bw-breadcrumb{display: flex;flex-wrap: wrap;align-items: center;gap: 6px;margin: 0 0 18px;padding: 0;list-style: none;font-size: 0.85rem;color: var(--bw-ink-400);}.bw-breadcrumb li{display: flex;align-items: center;gap: 6px;}.bw-breadcrumb li + li::before{content: "/";color: var(--bw-line-strong);}.bw-breadcrumb a{color: var(--bw-ink-500);}.bw-breadcrumb a:hover{color: var(--bw-blue-700);}/* -------------------------------------------------------------------------- Fliesstext (Rechtstexte, Blogartikel) -------------------------------------------------------------------------- */.bw-prose{max-width: 74ch;min-width: 0;color: var(--bw-ink-700);font-size: 1.02rem;line-height: 1.75;}/* Rechtstexte: volle Containerbreite und Blocksatz */.bw-prose--wide{max-width: none;}.bw-prose--justify p,.bw-prose--justify li{text-align: justify;hyphens: auto;}.bw-prose > *:first-child{margin-top: 0;}.bw-prose h2{margin: 2em 0 0.6em;font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);}.bw-prose h3{margin: 1.7em 0 0.5em;font-size: 1.15rem;}.bw-prose h4{margin: 1.5em 0 0.4em;}.bw-prose p{margin: 0 0 1.1em;}.bw-prose ul,.bw-prose ol{margin: 0 0 1.2em;padding-left: 1.35em;}.bw-prose li{margin-bottom: 0.45em;}.bw-prose a{color: var(--bw-blue-700);text-decoration: underline;text-underline-offset: 2px;}.bw-prose img{border-radius: var(--bw-r-md);margin: 1.4em 0;}.bw-prose blockquote{margin: 1.6em 0;padding: 4px 0 4px 20px;border-left: 3px solid var(--bw-blue-200);color: var(--bw-ink-500);font-style: italic;}.bw-prose code{padding: 2px 6px;border-radius: 5px;background: var(--bw-surface-3);font-size: 0.92em;}.bw-prose pre{overflow-x: auto;padding: 16px;border-radius: var(--bw-r-md);background: var(--bw-surface-dark);color: #dbe9f6;}.bw-prose pre code{background: none;padding: 0;}.bw-prose hr{margin: 2.2em 0;border: 0;border-top: 1px solid var(--bw-line);}.bw-prose table{width: 100%;border-collapse: collapse;margin: 1.4em 0;font-size: 0.95rem;}.bw-prose th,.bw-prose td{padding: 10px 12px;border-bottom: 1px solid var(--bw-line);text-align: left;vertical-align: top;}.bw-prose th{color: var(--bw-ink-900);font-weight: 700;}/* Tabellen und Codebloecke duerfen scrollen, die Seite nicht */.bw-scroll-x{overflow-x: auto;-webkit-overflow-scrolling: touch;}/* -------------------------------------------------------------------------- Inhaltsverzeichnis / Sprungmarken -------------------------------------------------------------------------- */.bw-toc{position: sticky;top: calc(var(--bw-nav-h) + 24px);padding: 22px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);background: var(--bw-surface-2);font-size: 0.92rem;}.bw-toc__title{margin: 0 0 12px;font-size: 0.78rem;font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase;color: var(--bw-ink-400);}.bw-toc ul{margin: 0;padding: 0;list-style: none;}.bw-toc li + li{margin-top: 9px;}.bw-toc a{color: var(--bw-ink-700);}.bw-toc a:hover{color: var(--bw-blue-700);}@media (max-width: 899px){.bw-toc{ position: static; margin-bottom: 32px;}}.bw-with-toc{display: grid;grid-template-columns: minmax(0, 250px) minmax(0, 1fr);gap: clamp(28px, 4vw, 56px);align-items: start;}@media (max-width: 899px){.bw-with-toc{ grid-template-columns: minmax(0, 1fr);}}/* -------------------------------------------------------------------------- Blog -------------------------------------------------------------------------- */.bw-posts{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 26px;}@media (max-width: 959px){.bw-posts{ grid-template-columns: repeat(2, minmax(0, 1fr));}}@media (max-width: 639px){.bw-posts{ grid-template-columns: minmax(0, 1fr);}}.bw-post{display: flex;flex-direction: column;overflow: hidden;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;}.bw-post:hover{transform: translateY(-3px);border-color: var(--bw-blue-200);box-shadow: var(--bw-shadow-md);}.bw-post__media{aspect-ratio: 16/9;overflow: hidden;background: var(--bw-surface-3);}.bw-post__media img{width: 100%;height: 100%;object-fit: cover;}.bw-post__body{display: flex;flex-direction: column;flex: 1;padding: 22px;}.bw-post__meta{display: flex;flex-wrap: wrap;align-items: center;gap: 8px;margin-bottom: 10px;font-size: 0.8rem;color: var(--bw-ink-400);}.bw-post__title{margin: 0 0 8px;font-size: 1.1rem;font-weight: 700;line-height: 1.35;letter-spacing: -0.01em;}.bw-post__title a{color: var(--bw-ink-900);}.bw-post__title a:hover{color: var(--bw-blue-700);text-decoration: none;}.bw-post__excerpt{margin: 0;color: var(--bw-ink-500);font-size: 0.94rem;}.bw-post__foot{margin-top: auto;padding-top: 16px;}/* Kategoriefilter */.bw-cats{display: flex;flex-wrap: wrap;gap: 8px;margin: 0 0 32px;padding: 0;list-style: none;}.bw-cats a{display: inline-flex;padding: 7px 15px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-pill);background: var(--bw-surface);font-size: 0.88rem;font-weight: 600;color: var(--bw-ink-700);}.bw-cats a:hover,.bw-cats a[aria-current=page]{border-color: var(--bw-blue-500);background: var(--bw-blue-50);color: var(--bw-blue-700);text-decoration: none;}/* Pagination */.bw-pagination{display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;margin: 48px 0 0;padding: 0;list-style: none;}.bw-pagination a,.bw-pagination span{display: inline-flex;align-items: center;justify-content: center;min-width: 42px;height: 42px;padding: 0 12px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-sm);font-size: 0.92rem;font-weight: 600;color: var(--bw-ink-700);}.bw-pagination a:hover{border-color: var(--bw-blue-500);color: var(--bw-blue-700);text-decoration: none;}.bw-pagination .is-current{background: var(--bw-blue-700);border-color: var(--bw-blue-700);color: #fff;}/* -------------------------------------------------------------------------- Preistabelle / Erweiterungsliste -------------------------------------------------------------------------- */.bw-ext-list{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 18px;}@media (max-width: 767px){.bw-ext-list{ grid-template-columns: minmax(0, 1fr);}}.bw-ext{display: grid;grid-template-columns: 48px minmax(0, 1fr);gap: 16px;padding: 22px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);}.bw-ext--highlight{border-color: var(--bw-blue-200);box-shadow: var(--bw-shadow-sm);}.bw-ext__logo{width: 48px;height: 48px;object-fit: contain;}.bw-ext__head{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: 6px 12px;margin-bottom: 6px;}.bw-ext__name{margin: 0;font-size: 1.05rem;font-weight: 700;color: var(--bw-ink-900);letter-spacing: -0.01em;}.bw-ext__price{font-weight: 800;color: var(--bw-blue-700);white-space: nowrap;}.bw-ext__price small{display: block;font-size: 0.7rem;font-weight: 600;color: var(--bw-ink-400);text-align: right;}.bw-ext__text{margin: 0;font-size: 0.94rem;color: var(--bw-ink-500);}/* Zwei-Spalten-Merkmalsliste */.bw-feature-cols{columns: 2;column-gap: 40px;margin: 0;padding: 0;list-style: none;}@media (max-width: 639px){.bw-feature-cols{ columns: 1;}}.bw-feature-cols li{break-inside: avoid;}/* -------------------------------------------------------------------------- Videoplayer (nutzt die vorhandene Klasse aus video_player_no_auth.js) -------------------------------------------------------------------------- */.video-player-no-auth{position: relative;width: 100%;border-radius: var(--bw-r-lg);overflow: hidden;box-shadow: var(--bw-shadow-lg);background: var(--bw-surface-dark);aspect-ratio: 16/9;}.video-player-no-auth .video-responsive{display: block;width: 100%;height: 100%;object-fit: cover;}.video-player-no-auth .play-button{position: absolute;top: 50%;left: 50%;display: flex;align-items: center;justify-content: center;width: 76px;height: 76px;border-radius: 50%;background: rgba(255, 255, 255, 0.94);box-shadow: var(--bw-shadow-md);transform: translate(-50%, -50%);cursor: pointer;z-index: 10;transition: transform 0.18s ease, background-color 0.18s ease;}.video-player-no-auth .play-button:hover{transform: translate(-50%, -50%) scale(1.06);}.video-player-no-auth .play-button img{width: 34px;height: auto;margin-left: 4px;}.video-player-no-auth .play-button::before{content: "";position: absolute;inset: -10px;border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.65);animation: bw-ripple 2.2s infinite ease-out;pointer-events: none;}@keyframes bw-ripple{0%{ transform: scale(1); opacity: 0.7;}100%{ transform: scale(1.7); opacity: 0;}}@media (prefers-reduced-motion: reduce){.video-player-no-auth .play-button::before{ animation: none;}}.bw-video-caption{margin: 14px 0 0;font-size: 0.85rem;color: var(--bw-ink-400);}/* -------------------------------------------------------------------------- Paketrechner -------------------------------------------------------------------------- */.bw-calc{display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 340px);gap: clamp(24px, 3vw, 40px);align-items: start;}@media (max-width: 899px){.bw-calc{ grid-template-columns: minmax(0, 1fr);}}.bw-calc__options{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;margin: 0;padding: 0;border: 0;}@media (max-width: 639px){.bw-calc__options{ grid-template-columns: minmax(0, 1fr);}}.bw-calc__option{display: grid;grid-template-columns: 22px minmax(0, 1fr) auto;gap: 12px;align-items: center;padding: 14px 16px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-md);cursor: pointer;transition: border-color 0.15s ease, background-color 0.15s ease;}.bw-calc__option:hover{border-color: var(--bw-blue-200);}.bw-calc__option:has(input:checked){border-color: var(--bw-green-500);background: var(--bw-green-50);}.bw-calc__option.is-fixed{cursor: default;border-color: var(--bw-line-strong);background: var(--bw-surface-3);}.bw-calc__option input{width: 20px;height: 20px;margin: 0;accent-color: var(--bw-green-600);cursor: inherit;}.bw-calc__option-name{font-weight: 600;color: var(--bw-ink-800);line-height: 1.3;}.bw-calc__option-name small{display: block;font-size: 0.75rem;font-weight: 600;color: var(--bw-ink-400);}.bw-calc__option-price{font-weight: 700;color: var(--bw-ink-900);font-variant-numeric: tabular-nums;white-space: nowrap;}.bw-calc__result{position: sticky;top: calc(var(--bw-nav-h) + 24px);padding: 28px;background: var(--bw-surface);border: 1px solid var(--bw-blue-200);border-radius: var(--bw-r-xl);box-shadow: var(--bw-shadow-md);}@media (max-width: 899px){.bw-calc__result{ position: static;}}.bw-calc__result .bw-price__amount{margin: 10px 0 2px;}.bw-calc__result output{font: inherit;color: var(--bw-green-700);}/* Funktionsseite: Gruppen */.bw-fn-group .bw-icon{margin-bottom: 14px;}.bw-fn-group h2{margin-bottom: 10px;}/* -------------------------------------------------------------------------- Fehlerseiten -------------------------------------------------------------------------- */.bw-error-code{margin: 0 0 8px;font-size: clamp(3.5rem, 2rem + 7vw, 6rem);font-weight: 800;line-height: 1;letter-spacing: -0.04em;color: var(--bw-blue-100);}/* -------------------------------------------------------------------------- Blog-Layout mit Seitenleiste -------------------------------------------------------------------------- */.bw-blog-layout{display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 300px);gap: clamp(28px, 4vw, 56px);align-items: start;}@media (max-width: 899px){.bw-blog-layout{ grid-template-columns: minmax(0, 1fr);}}.bw-blog-main{min-width: 0;}.bw-blog-side{display: grid;gap: 20px;}.bw-blog-cover{margin-bottom: 32px;}.bw-blog-cover img{max-height: 320px;object-fit: cover;}.bw-side-box{padding: 22px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);background: var(--bw-surface);}.bw-side-box__title{margin: 0 0 14px;font-size: 0.78rem;font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase;color: var(--bw-ink-400);}.bw-side-list{margin: 0;padding: 0;list-style: none;font-size: 0.94rem;}.bw-side-list li + li{margin-top: 10px;}.bw-side-list a{color: var(--bw-ink-700);font-weight: 600;}.bw-side-list a:hover{color: var(--bw-blue-700);}.bw-side-list--posts li{display: flex;flex-direction: column;gap: 2px;}.bw-side-list--posts span{font-size: 0.8rem;color: var(--bw-ink-400);}.bw-side-cta{padding: 24px;border-radius: var(--bw-r-lg);background: linear-gradient(150deg, #1a4c74 0%, #2f7ab8 100%);color: #dceafa;}.bw-side-cta__title{margin: 0 0 10px;font-size: 1.05rem;font-weight: 800;line-height: 1.3;color: #fff;letter-spacing: -0.01em;}.bw-side-cta__text{margin: 0 0 18px;font-size: 0.9rem;}.bw-side-cta__note{margin: 12px 0 0;font-size: 0.78rem;color: rgba(255, 255, 255, 0.72);}.bw-article-meta{gap: 16px;margin: 0 0 28px;font-size: 0.88rem;}.bw-article-meta time,.bw-article-meta span{display: inline-flex;align-items: center;gap: 6px;}.bw-article-meta svg{width: 15px;height: 15px;color: var(--bw-ink-300);}.bw-disclaimer{margin-top: 40px;padding: 20px 22px;border-left: 3px solid var(--bw-warn);border-radius: 0 var(--bw-r-md) var(--bw-r-md) 0;background: #fffaf0;font-size: 0.9rem;color: var(--bw-ink-600, var(--bw-ink-500));}.bw-disclaimer a{display: inline-block;margin-top: 8px;color: var(--bw-blue-700);font-weight: 600;}/* Pagination aus BlogModel::getPaginationHtml */.bw-blog-main .pagination{display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;margin: 48px 0 0;}.bw-blog-main .pagination a,.bw-blog-main .pagination span{display: inline-flex;align-items: center;justify-content: center;min-width: 42px;height: 42px;padding: 0 12px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-sm);font-size: 0.92rem;font-weight: 600;color: var(--bw-ink-700);}.bw-blog-main .pagination a:hover{border-color: var(--bw-blue-500);color: var(--bw-blue-700);text-decoration: none;}.bw-blog-main .pagination a.active{background: var(--bw-blue-700);border-color: var(--bw-blue-700);color: #fff;}.bw-blog-main .pagination .disabled,.bw-blog-main .pagination .no-active{color: var(--bw-ink-300);border-color: transparent;}/* Font-Awesome ist im neuen Frontend nicht geladen – Pfeile als Glyphe */.bw-blog-main .pagination .fa-angle-left::before{content: "‹";font-size: 1.4em;line-height: 1;}.bw-blog-main .pagination .fa-angle-right::before{content: "›";font-size: 1.4em;line-height: 1;}/* Im Blog steht neben der Liste eine Seitenleiste – zwei Spalten reichen. */.bw-blog-main .bw-posts{grid-template-columns: repeat(2, minmax(0, 1fr));}@media (max-width: 1099px){.bw-blog-main .bw-posts{ grid-template-columns: minmax(0, 1fr);}}/* Teaser auf drei Zeilen begrenzen, damit die Karten gleich hoch bleiben. */.bw-post__excerpt{display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}/* -------------------------------------------------------------------------- Anwendungsbeispiele -------------------------------------------------------------------------- */.bw-cases{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 24px;}@media (max-width: 959px){.bw-cases{ grid-template-columns: minmax(0, 1fr);}}.bw-case{display: flex;flex-direction: column;padding: 28px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);box-shadow: var(--bw-shadow-xs);}.bw-case__head{display: flex;align-items: center;gap: 12px;margin-bottom: 16px;}.bw-case__who{font-size: 0.78rem;font-weight: 800;letter-spacing: 0.06em;text-transform: uppercase;color: var(--bw-ink-400);line-height: 1.3;}.bw-case h3{margin-bottom: 18px;}.bw-case__steps{margin: 0 0 20px;}.bw-case__steps dt{font-size: 0.74rem;font-weight: 800;letter-spacing: 0.07em;text-transform: uppercase;color: var(--bw-ink-400);}.bw-case__steps dt + dd{margin: 4px 0 16px;}.bw-case__steps dd:last-child{margin-bottom: 0;}.bw-case__steps dd{margin-left: 0;color: var(--bw-ink-500);font-size: 0.95rem;}.bw-case__steps dt:nth-of-type(2){color: var(--bw-green-700);}.bw-case__result{display: flex;align-items: flex-start;gap: 9px;margin: auto 0 0;padding-top: 18px;border-top: 1px solid var(--bw-line);font-size: 0.92rem;font-weight: 600;color: var(--bw-ink-800);}.bw-case__result svg{width: 18px;height: 18px;flex: none;margin-top: 2px;color: var(--bw-green-600);}/* -------------------------------------------------------------------------- Foto im Onboarding-Abschnitt -------------------------------------------------------------------------- */.bw-onboarding__photo{position: relative;border-radius: var(--bw-r-xl);overflow: hidden;box-shadow: var(--bw-shadow-lg);aspect-ratio: 4/3;}.bw-onboarding__photo img{width: 100%;height: 100%;object-fit: cover;}/* Bei vier Beispielen sieht ein Zweierraster besser aus als 3 + 1. */.bw-cases--2{grid-template-columns: repeat(2, minmax(0, 1fr));}@media (max-width: 767px){.bw-cases--2{ grid-template-columns: minmax(0, 1fr);}}/* -------------------------------------------------------------------------- Herkunftsblock im Sicherheitsabschnitt -------------------------------------------------------------------------- */.bw-origin{display: grid;grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);gap: clamp(24px, 4vw, 48px);align-items: center;padding-top: clamp(32px, 4vw, 48px);border-top: 1px solid rgba(255, 255, 255, 0.12);}@media (max-width: 767px){.bw-origin{ grid-template-columns: minmax(0, 1fr);}}.bw-origin__photo{border-radius: var(--bw-r-lg);overflow: hidden;aspect-ratio: 3/2;}.bw-origin__photo img{width: 100%;height: 100%;object-fit: cover;}.bw-calc__hint{grid-column: 1/-1;margin: 6px 0 0;font-size: 0.82rem;color: var(--bw-ink-400);}/* -------------------------------------------------------------------------- Fotostrecken -------------------------------------------------------------------------- */.bw-audience-photos{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 24px;margin-bottom: 32px;}@media (max-width: 639px){.bw-audience-photos{ grid-template-columns: minmax(0, 1fr);}}.bw-audience-photos img{width: 100%;aspect-ratio: 16/10;object-fit: cover;border-radius: var(--bw-r-lg);}.bw-wide-photo{margin-bottom: 40px;border-radius: var(--bw-r-xl);overflow: hidden;}.bw-wide-photo img{width: 100%;aspect-ratio: 21/8;object-fit: cover;display: block;}/* -------------------------------------------------------------------------- Partner-Badge (z. B. eBay Developers Program) -------------------------------------------------------------------------- */.bw-badges{display: flex;flex-direction: column;align-items: center;gap: clamp(20px, 3vw, 32px);}.bw-badge{display: grid;grid-template-columns: 84px minmax(0, 1fr);gap: 18px;align-items: center;max-width: 560px;padding: 18px 24px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);background: var(--bw-surface);box-shadow: var(--bw-shadow-xs);}@media (max-width: 519px){.bw-badge{ grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;}}.bw-badge img{width: 84px;height: auto;}.bw-badge p{margin: 0;font-size: 0.88rem;line-height: 1.5;color: var(--bw-ink-500);}.bw-badge strong{display: block;color: var(--bw-ink-900);}/* -------------------------------------------------------------------------- Erklaerender Fliesstext am Seitenende -------------------------------------------------------------------------- */.bw-seo-text{max-width: 92ch;margin: 0 auto;}/* Der SEO-Text soll trotz .bw-prose--wide seine Lesebreite behalten. */.bw-seo-text .bw-prose--wide{max-width: 92ch;}.bw-seo-text h2{margin-bottom: 20px;}.bw-seo-text .bw-prose{font-size: 0.98rem;color: var(--bw-ink-500);}.bw-seo-text .bw-prose h3{margin: 1.8em 0 0.5em;font-size: 1.05rem;color: var(--bw-ink-900);}.bw-seo-text .bw-prose strong{color: var(--bw-ink-800);}/* -------------------------------------------------------------------------- Partnerprogramm-Teaser auf den Landingpages -------------------------------------------------------------------------- */.bw-affiliate-teaser__visual img{width: 100%;height: auto;border-radius: var(--bw-r-xl);box-shadow: var(--bw-shadow-md);}/* ========================================================================== billware Frontend v2 – Login, Registrierung und verwandte Formulare ========================================================================== */.bw-auth{display: flex;justify-content: center;padding: clamp(36px, 5vw, 72px) var(--bw-gutter) clamp(48px, 6vw, 88px);background: radial-gradient(900px 420px at 50% -10%, var(--bw-blue-50) 0%, rgba(239, 246, 252, 0) 70%), var(--bw-surface);}/* Registrierung und 2FA zeigen zusaetzlich eine Argumentkarte daneben */.bw-auth--split{align-items: flex-start;gap: clamp(20px, 3vw, 36px);}@media (max-width: 899px){.bw-auth--split{ flex-direction: column; align-items: center;}}.bw-auth__main{width: 100%;max-width: 490px;}/* Die 2FA-Seite steht ohne Argumentkarte daneben – dafuer etwas breiter, damit Code-Feld und Hinweise nicht gequetscht wirken. */.bw-auth--wide .bw-auth__main{max-width: 560px;}.bw-auth__card{padding: clamp(32px, 4.5vw, 46px);background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-xl);box-shadow: var(--bw-shadow-md);}.bw-auth__card h1{margin-bottom: 8px;font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.8rem);}.bw-auth__lead{margin: 0 0 26px;color: var(--bw-ink-500);}/* Argumentkarte */.bw-auth__aside{width: 100%;max-width: 340px;padding: 28px;background: var(--bw-surface);border: 1px solid var(--bw-line);border-radius: var(--bw-r-xl);box-shadow: var(--bw-shadow-sm);}@media (max-width: 899px){.bw-auth__aside{ max-width: 440px;}}.bw-auth__aside h2{margin-bottom: 4px;font-size: 1.05rem;font-weight: 700;letter-spacing: -0.01em;color: var(--bw-ink-900);}.bw-auth__aside .bw-checklist li{padding-left: 30px;color: var(--bw-ink-500);font-size: 0.92rem;}.bw-auth__aside .bw-checklist li::before{width: 18px;height: 18px;top: 10px;background-size: 11px 11px;}.bw-auth__quote{display: flex;gap: 12px;margin: 24px 0 0;padding-top: 22px;border-top: 1px solid var(--bw-line);}.bw-auth__quote img{width: 40px;height: 40px;flex: none;border-radius: 50%;object-fit: cover;}.bw-auth__quote p{margin: 0 0 6px;font-size: 0.88rem;color: var(--bw-ink-700);}.bw-auth__quote cite{font-size: 0.8rem;font-style: normal;color: var(--bw-ink-400);}/* -------------------------------------------------------------------------- Formularelemente -------------------------------------------------------------------------- */.bw-form{display: grid;gap: 14px;}.bw-field{display: grid;gap: 6px;}.bw-label{font-size: 0.88rem;font-weight: 600;color: var(--bw-ink-800);}.bw-input{width: 100%;padding: 13px 16px;border: 1px solid var(--bw-line-strong);border-radius: var(--bw-r-md);background: var(--bw-surface);font-family: inherit;font-size: 1rem;color: var(--bw-ink-900);transition: border-color 0.15s ease, box-shadow 0.15s ease;}.bw-input::placeholder{color: var(--bw-ink-300);}.bw-input:focus{outline: none;border-color: var(--bw-blue-500);box-shadow: 0 0 0 3px var(--bw-blue-100);}/* Codefeld: gross, gesperrt und zentriert. Die Breite richtet sich nach der Karte – im linksbuendigen Kasten stand es sonst als schmaler Stummel ueber einem Knopf, der die volle Breite einnimmt. */.bw-input--code{font-size: 1.3rem;font-weight: 700;letter-spacing: 0.25em;text-align: center;}/* In der zentrierten Karte (2FA) darf es schmal bleiben, dort steht es mittig. */.bw-auth__card--center .bw-input--code{max-width: 220px;margin: 0 auto;}.bw-checkbox{display: flex;align-items: flex-start;gap: 10px;font-size: 0.9rem;color: var(--bw-ink-500);cursor: pointer;}.bw-checkbox input{width: 18px;height: 18px;margin: 2px 0 0;accent-color: var(--bw-green-600);}.bw-form__note{margin: 0;font-size: 0.82rem;color: var(--bw-ink-400);}.bw-form__note--terms{margin-top: -2px;text-align: center;}/* Redirect hint above the button on the activation success page. */.bw-form__note--redirect{margin: 4px 0 22px;text-align: center;}.bw-form__note--redirect .fa-spinner{margin-right: 7px;}.bw-form__note a{color: var(--bw-ink-500);text-decoration: underline;text-underline-offset: 2px;}.bw-form__note a:hover{color: var(--bw-blue-700);}.bw-form__links{margin: 24px 0 0;padding: 0;list-style: none;font-size: 0.88rem;}.bw-form__links li + li{margin-top: 8px;}.bw-auth__switch{margin: 28px 0 0;padding-top: 22px;border-top: 1px solid var(--bw-line);font-size: 0.92rem;color: var(--bw-ink-500);}/* Trenner "oder" */.bw-divider{display: flex;align-items: center;gap: 14px;margin: 20px 0;font-size: 0.82rem;text-transform: uppercase;letter-spacing: 0.08em;color: var(--bw-ink-400);}.bw-divider::before,.bw-divider::after{content: "";flex: 1;height: 1px;background: var(--bw-line);}/* Social-Login */.bw-social{display: grid;gap: 10px;}.bw-social__btn{display: flex;align-items: center;justify-content: center;gap: 12px;padding: 12px 18px;border: 1px solid var(--bw-line-strong);border-radius: var(--bw-r-md);background: var(--bw-surface);font-size: 0.95rem;font-weight: 600;color: var(--bw-ink-800);transition: border-color 0.15s ease, background-color 0.15s ease;}.bw-social__btn:hover{border-color: var(--bw-blue-400);background: var(--bw-surface-2);color: var(--bw-ink-900);text-decoration: none;}.bw-social__icon{width: 20px;height: 20px;flex: none;background-size: contain;background-repeat: no-repeat;background-position: 50%;}.bw-social__icon--google{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.1 24.5c0-1.6-.1-2.7-.4-3.9H24v7.1h12.1c-.2 1.8-1.6 4.5-4.5 6.4l6.9 5.3c4.1-3.8 6.6-9.3 6.6-14.9z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.9 0 10.9-2 14.5-5.3l-6.9-5.3c-1.8 1.3-4.3 2.2-7.6 2.2-5.8 0-10.8-3.8-12.5-9.1l-7.1 5.5C8 41.4 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.5 28.5c-.5-1.3-.7-2.8-.7-4.5s.3-3.2.7-4.5l-7.1-5.5C2.9 17 2 20.4 2 24s.9 7 2.4 10z'/%3E%3Cpath fill='%23EA4335' d='M24 10.6c4.1 0 6.9 1.8 8.5 3.3l6.1-6C34.9 4.5 29.9 2 24 2 15.4 2 8 6.6 4.4 14l7.1 5.5c1.7-5.3 6.7-8.9 12.5-8.9z'/%3E%3C/svg%3E");}.bw-social__icon--microsoft{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cpath fill='%23f25022' d='M1 1h9v9H1z'/%3E%3Cpath fill='%2300a4ef' d='M1 11h9v9H1z'/%3E%3Cpath fill='%237fba00' d='M11 1h9v9h-9z'/%3E%3Cpath fill='%23ffb900' d='M11 11h9v9h-9z'/%3E%3C/svg%3E");}.bw-social__icon--facebook{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='%231877F2' d='M30 15.1C30 6.8 23.3 0 15 0S0 6.8 0 15.1c0 7.5 5.5 13.8 12.7 14.9V19.5H8.8v-4.4h3.8v-3.3c0-3.8 2.3-5.9 5.7-5.9 1.6 0 3.4.3 3.4.3v3.7h-1.9c-1.9 0-2.4 1.2-2.4 2.4v2.8h4.2l-.7 4.4h-3.5V30C24.5 28.9 30 22.6 30 15.1z'/%3E%3C/svg%3E");}/* -------------------------------------------------------------------------- Passwortpruefung – die Klassen setzt weiterhin password-check.js. Font Awesome ist im neuen Frontend nicht geladen, deshalb hier als Glyphe. -------------------------------------------------------------------------- */.bw-pw-check{display: grid;gap: 6px;margin: 0;padding: 14px 16px;border-radius: var(--bw-r-md);background: var(--bw-surface-2);font-size: 0.84rem;color: var(--bw-ink-500);}.bw-pw-check label{display: flex;align-items: center;gap: 8px;margin: 0;}.bw-pw-check .fa{display: inline-flex;align-items: center;justify-content: center;width: 18px;height: 18px;flex: none;border-radius: 50%;background: var(--bw-line);color: var(--bw-ink-400);font-size: 0.7rem;font-style: normal;line-height: 1;}.bw-pw-check .fa-info-circle::before{content: "•";}.bw-pw-check .fa-check::before{content: "✓";}.bw-pw-check .fa-times::before{content: "✕";}.bw-pw-check .text-bw-green{background: var(--bw-green-100);color: var(--bw-green-700);}.bw-pw-check .text-bw-red{background: #ffe3e3;color: #b02525;}/* Honigtopf gegen Bots – muss unsichtbar bleiben */.a-bear-would-stumble-in{position: absolute;left: -9999px;}/* reCAPTCHA-Widget mittig */.bw-captcha{display: flex;justify-content: center;}/* -------------------------------------------------------------------------- Klassen, die die bestehende Auth-JS (view.tfa.js, password-check.js) setzt -------------------------------------------------------------------------- */.bw-v2 .hidden{display: none !important;}.bw-v2 .text-danger{color: #b02525;}.bw-v2 .text-success{color: var(--bw-green-700);}/* Rueckmeldung zum Code. Der Kasten haengt an den Statusklassen, die die JS setzt - ohne sie stuende hier ein leerer Kasten unter dem Eingabefeld. (Die JS-Klasse .2fa_code_check_response faengt mit einer Ziffer an und ist als CSS-Selektor nicht nutzbar, deshalb .bw-code-response daneben.) */.bw-code-response.text-success,.bw-code-response.text-danger{margin: 8px 0 4px;padding: 12px 18px;border-radius: var(--bw-r-md);font-size: 0.92rem;line-height: 1.5;text-align: center;}.bw-code-response.text-success{background: var(--bw-ok-bg);color: var(--bw-ok-fg);margin-bottom: 20px;}.bw-code-response.text-danger{background: var(--bw-error-bg);color: var(--bw-error-fg);}/* Nach dem Erfolg blendet die JS nur das Eingabefeld aus - ohne das hier stuende die Beschriftung allein ueber der gruenen Meldung. */.bw-field:has(.bw-code-response.text-success) .bw-label{display: none;}/* Font Awesome laeuft im v2-Layout nicht mit, der Haken kommt aus der Schrift */.bw-v2 .fa-check::before{content: "✓";margin-right: 7px;font-weight: 700;}.bw-v2 .fa-spinner{display: inline-block;width: 14px;height: 14px;border: 2px solid var(--bw-line-strong);border-top-color: var(--bw-blue-600);border-radius: 50%;vertical-align: -2px;}.bw-v2 .fa-spin{animation: bw-spin 0.8s linear infinite;}@keyframes bw-spin{to{ transform: rotate(360deg);}}/* -------------------------------------------------------------------------- Geteiltes Dokument -------------------------------------------------------------------------- */.bw-share-file{display: flex;justify-content: center;}.bw-share-file__link{display: inline-flex;align-items: center;gap: 16px;padding: 18px 24px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-lg);background: var(--bw-surface);box-shadow: var(--bw-shadow-sm);text-align: left;color: var(--bw-ink-700);transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;}.bw-share-file__link:hover{border-color: var(--bw-blue-200);box-shadow: var(--bw-shadow-md);transform: translateY(-2px);text-decoration: none;}.bw-share-file__link strong{display: block;color: var(--bw-ink-900);}.bw-share-file__link small{color: var(--bw-ink-400);}.bw-share-file__link svg{width: 20px;height: 20px;color: var(--bw-blue-600);}/* Ueberschrift mit Icon daneben statt darueber */.bw-auth__title-icon{display: flex;align-items: center;gap: 12px;}.bw-auth__title-icon .bw-icon{flex: none;}/* Zentrierte Variante – genutzt auf der 2FA-Seite */.bw-auth__card--center{text-align: center;}.bw-auth__card--center .bw-auth__title-icon{justify-content: center;margin-bottom: 20px;}.bw-auth__card--center .bw-field{justify-items: center;}.bw-auth__card--center .bw-checkbox{justify-content: center;}.bw-auth__card--center .bw-form__links{padding: 0;}.bw-form__links--strong{font-weight: 700;}/* Neuen Code anfordern: erst der Countdown, dann der Knopf an gleicher Stelle */.bw-auth__resend{margin-top: 22px;}/* ========================================================================== billware Frontend v2 – Cookie-Banner Die Consent-Logik kommt unveraendert vom Anbieter (lokal ausgeliefert unter /resources/framework/cookie-consent-4.1.0/). Hier wird ausschliesslich das mitgelieferte Aussehen ueberschrieben, damit der Banner nicht wie ein Fremdkoerper wirkt. Alle Selektoren brauchen hohe Spezifitaet bzw. !important, weil das Widget sein CSS zur Laufzeit injiziert. ========================================================================== *//* -------------------------------------------------------------------------- Banner -------------------------------------------------------------------------- *//* Der aeussere Container wird zum abgedunkelten Overlay, der innere zur Karte. Zentriert, damit der Mausweg zu den Buttons kurz bleibt. */.freeprivacypolicy-com---nb.freeprivacypolicy-com---nb-simple{position: fixed !important;top: 0 !important;right: 0 !important;bottom: 0 !important;left: 0 !important;transform: none !important;display: flex !important;align-items: center !important;justify-content: center !important;max-width: none !important;width: auto !important;padding: var(--bw-gutter) !important;border: 0 !important;border-radius: 0 !important;background: rgba(14, 34, 51, 0.5) !important;backdrop-filter: blur(2px) !important;box-shadow: none !important;font-family: var(--bw-font) !important;color: var(--bw-ink-700) !important;}/* Das Widget blendet den Banner ueber diese Klasse aus. Ohne die Regel gewinnt das "display: flex !important" von oben und der Banner bleibt nach dem Klick stehen. */.freeprivacypolicy-com---nb.freeprivacypolicy-com---nb-simple.freeprivacypolicy-com---is-hidden{display: none !important;}.freeprivacypolicy-com---nb .cc-nb-main-container{width: 100% !important;max-width: 600px !important;max-height: calc(100vh - 2 * var(--bw-gutter)) !important;overflow-y: auto !important;padding: 28px 30px !important;border-radius: var(--bw-r-xl) !important;background: var(--bw-surface) !important;box-shadow: var(--bw-shadow-lg) !important;}@media (max-width: 599px){.freeprivacypolicy-com---nb .cc-nb-main-container{ padding: 22px !important;}}.freeprivacypolicy-com---nb .cc-nb-title{margin: 0 0 10px !important;font-family: var(--bw-font) !important;font-size: 1.1rem !important;font-weight: 800 !important;letter-spacing: -0.01em !important;color: var(--bw-ink-900) !important;}.freeprivacypolicy-com---nb .cc-nb-text{margin: 0 0 20px !important;font-family: var(--bw-font) !important;font-size: 0.9rem !important;line-height: 1.6 !important;color: var(--bw-ink-500) !important;}.freeprivacypolicy-com---nb .cc-nb-text-urls{margin-top: 14px !important;font-size: 0.82rem !important;}.freeprivacypolicy-com---nb .cc-nb-text-urls a{color: var(--bw-ink-500) !important;text-decoration: underline !important;text-underline-offset: 2px !important;}.freeprivacypolicy-com---nb .cc-nb-text-urls a:hover{color: var(--bw-blue-700) !important;}/* Buttons */.freeprivacypolicy-com---nb .cc-nb-buttons-container{display: flex !important;flex-wrap: wrap !important;align-items: center !important;gap: 10px !important;}/* Einstellungen rechts an den Rand, Zustimmen und Ablehnen bleiben zusammen */.freeprivacypolicy-com---nb.freeprivacypolicy-com---palette-light .cc-nb-changep{margin-left: auto !important;padding-right: 2px !important;padding-left: 2px !important;}@media (max-width: 559px){.freeprivacypolicy-com---nb.freeprivacypolicy-com---palette-light .cc-nb-changep{ margin-left: 0 !important;}}.freeprivacypolicy-com---nb .cc-nb-buttons-container button{margin: 0 !important;padding: 11px 20px !important;border: 1px solid transparent !important;border-radius: var(--bw-r-pill) !important;font-family: var(--bw-font) !important;font-size: 0.9rem !important;font-weight: 700 !important;line-height: 1.2 !important;cursor: pointer !important;transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;}.freeprivacypolicy-com---palette-light .cc-nb-okagree{background: var(--bw-green-600) !important;color: #fff !important;}.freeprivacypolicy-com---palette-light .cc-nb-okagree:hover{background: var(--bw-green-700) !important;}/* Ablehnen muss genauso leicht zu treffen sein wie Zustimmen *//* Ablehnen ist bewusst ruhiger gestaltet, behaelt aber Groesse, Position und Klickflaeche des Zustimmen-Buttons – sonst waere die Einwilligung nach DSGVO angreifbar (Ablehnen muss so einfach sein wie Zustimmen). */.freeprivacypolicy-com---palette-light .cc-nb-reject{background: transparent !important;border-color: var(--bw-line) !important;color: var(--bw-ink-500) !important;}.freeprivacypolicy-com---palette-light .cc-nb-reject:hover{border-color: var(--bw-line-strong) !important;background: var(--bw-surface-2) !important;color: var(--bw-ink-800) !important;}.freeprivacypolicy-com---palette-light .cc-nb-changep{background: transparent !important;border-color: transparent !important;color: var(--bw-ink-500) !important;text-decoration: underline !important;text-underline-offset: 3px !important;}.freeprivacypolicy-com---palette-light .cc-nb-changep:hover{color: var(--bw-blue-700) !important;}/* -------------------------------------------------------------------------- Einstellungen (Preferences Center) -------------------------------------------------------------------------- */.freeprivacypolicy-com---pc-overlay{background: rgba(14, 34, 51, 0.55) !important;backdrop-filter: blur(3px) !important;}.freeprivacypolicy-com---pc-dialog .cc-pc-container{border: 1px solid var(--bw-line) !important;border-radius: var(--bw-r-xl) !important;background: var(--bw-surface) !important;box-shadow: var(--bw-shadow-lg) !important;font-family: var(--bw-font) !important;overflow: hidden !important;}.freeprivacypolicy-com---pc-dialog .cc-pc-head{padding: 22px 26px !important;border-bottom: 1px solid var(--bw-line) !important;background: var(--bw-surface-2) !important;}.freeprivacypolicy-com---pc-dialog .cc-pc-head-title-headline{font-family: var(--bw-font) !important;font-size: 1.1rem !important;font-weight: 800 !important;color: var(--bw-ink-900) !important;}.freeprivacypolicy-com---pc-dialog .cc-pc-head-title-text{font-size: 0.86rem !important;color: var(--bw-ink-500) !important;}.freeprivacypolicy-com---pc-dialog .cc-pc-head-close{background: none !important;border: 0 !important;font-size: 1.4rem !important;line-height: 1 !important;color: var(--bw-ink-400) !important;cursor: pointer !important;}.freeprivacypolicy-com---pc-dialog .cc-pc-head-close:hover{color: var(--bw-ink-900) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-body{background: var(--bw-surface) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-body-tabs{background: var(--bw-surface-2) !important;border-right: 1px solid var(--bw-line) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-body-tabs-item{background: transparent !important;border-bottom: 1px solid var(--bw-line) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-body-tabs-item-link{font-family: var(--bw-font) !important;font-size: 0.9rem !important;font-weight: 600 !important;color: var(--bw-ink-700) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-body-tabs-item[active=true]{background: var(--bw-surface) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-body-tabs-item[active=true] .cc-cp-body-tabs-item-link{color: var(--bw-blue-700) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-body-content-entry-title{font-family: var(--bw-font) !important;font-size: 1rem !important;font-weight: 700 !important;color: var(--bw-ink-900) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-body-content-entry-text{font-size: 0.88rem !important;line-height: 1.6 !important;color: var(--bw-ink-500) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-foot{padding: 18px 26px !important;border-top: 1px solid var(--bw-line) !important;background: var(--bw-surface-2) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-foot-byline{font-size: 0.76rem !important;color: var(--bw-ink-400) !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-foot-save{padding: 11px 22px !important;border: 0 !important;border-radius: var(--bw-r-pill) !important;background: var(--bw-green-600) !important;font-family: var(--bw-font) !important;font-size: 0.9rem !important;font-weight: 700 !important;color: #fff !important;cursor: pointer !important;}.freeprivacypolicy-com---pc-dialog .cc-cp-foot-save:hover{background: var(--bw-green-700) !important;}.freeprivacypolicy-com---pc-dialog .cc-custom-checkbox input[type=checkbox]{accent-color: var(--bw-green-600) !important;}/* ========================================================================== billware Frontend v2 – API-Dokumentation Die Inhaltsseiten (view.order.php, view.customer.php, ...) bleiben unveraendert. Sie bringen Bootstrap-artige Tabellenklassen und eigene Auszeichnungen wie .array-item oder code.string mit – die werden hier im neuen Design nachgebaut, damit an den Beispielen nichts angefasst werden muss. ========================================================================== *//* Auf den Doku-Seiten grenzt die Navigation direkt an die graue Seitenleiste. Ohne Trennlinie wirkt sie dort wie ein weisser Balken quer darueber – die Linie kommt sonst erst beim Scrollen ueber .is-stuck. */.bw-api-page .bw-nav{background: var(--bw-surface);border-bottom-color: var(--bw-line);}.bw-api{display: grid;grid-template-columns: 280px minmax(0, 1fr);align-items: stretch;min-height: calc(100vh - var(--bw-nav-h));}@media (max-width: 991px){.bw-api{ grid-template-columns: minmax(0, 1fr);}}/* -------------------------------------------------------------------------- Seitenleiste -------------------------------------------------------------------------- *//* Die Spalte laeuft ueber die volle Seitenhoehe durch, damit der Hintergrund nicht unter dem letzten Menuepunkt abbricht. Das Menue selbst klebt darin. */.bw-api__side{border-right: 1px solid var(--bw-line);background: var(--bw-surface-2);}.bw-api__side-inner{position: sticky;top: var(--bw-nav-h);max-height: calc(100vh - var(--bw-nav-h));overflow-y: auto;padding: 28px 0 40px;}@media (max-width: 991px){.bw-api__side{ border-right: 0; border-bottom: 1px solid var(--bw-line);}.bw-api__side-inner{ position: static; max-height: none;}}.bw-api__brand{padding: 0 24px 20px;border-bottom: 1px solid var(--bw-line);margin-bottom: 18px;}.bw-api__brand-title{margin: 0;font-size: 1.05rem;font-weight: 800;letter-spacing: -0.01em;color: var(--bw-ink-900);}.bw-api__brand-sub{font-size: 0.8rem;font-weight: 600;letter-spacing: 0.06em;text-transform: uppercase;color: var(--bw-ink-400);}/* Menue – die Klassen .rsm/.headline/.submenu-1 steuert api_layout.js */.bw-api .rsm{width: 100%;margin: 0;padding: 0 12px;list-style: none;}.bw-api .rsm li{width: 100%;background: none;border: 0;}.bw-api .rsm a{display: block;width: auto;height: auto;padding: 9px 12px;border-radius: var(--bw-r-sm);font-size: 0.92rem;line-height: 1.4;color: var(--bw-ink-700);text-decoration: none;}.bw-api .rsm .headline{margin-bottom: 2px;background: none;cursor: pointer;}.bw-api .rsm .headline > a{display: flex;align-items: center;gap: 10px;margin: 0;font-weight: 700;color: var(--bw-ink-900) !important;pointer-events: none;}.bw-api .rsm .headline > a i{color: var(--bw-blue-600);}.bw-api .rsm .headline:hover > a{background: var(--bw-surface-3);}.bw-api .rsm li:hover{background: none;}.bw-api .rsm .submenu-1,.bw-api .rsm .submenu-2{width: 100%;margin: 2px 0 10px;padding: 0 0 0 14px;border-left: 1px solid var(--bw-line-strong);list-style: none;}.bw-api .rsm .headline .submenu-1 > li,.bw-api .rsm .headline .submenu-1 > li ul li{text-indent: 0;}.bw-api .rsm .submenu-1 a{padding: 6px 10px;font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size: 0.84rem;color: var(--bw-ink-500);pointer-events: auto;}.bw-api .rsm .submenu-1 a:hover{background: var(--bw-blue-50);color: var(--bw-blue-700);}/* -------------------------------------------------------------------------- Inhaltsbereich -------------------------------------------------------------------------- */.bw-api__main{--bw-api-pad: clamp(20px, 4vw, 56px);min-width: 0;padding: clamp(28px, 4vw, 48px) var(--bw-api-pad) 72px;}.bw-api__main > .card-box{margin: 0;padding: 0;background: none;border: 0;box-shadow: none;}/* Ueberschriften der Doku – ersetzen die alten Balken aus api_layout.css */.bw-api__main h2{margin: 0 0 28px;padding: 0;background: none;color: var(--bw-ink-900);font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);}.bw-api__main h4{margin: 32px 0 12px;font-size: 0.8rem;font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase;color: var(--bw-ink-400);}.bw-api__main p{max-width: 88ch;color: var(--bw-ink-700);}/* -------------------------------------------------------------------------- Tabellen (Bootstrap-Klassen aus den Inhaltsseiten) -------------------------------------------------------------------------- */.bw-api__main .table{width: 100%;margin: 0 0 28px;border-collapse: collapse;font-size: 0.9rem;}.bw-api__main .table > thead > tr > th{padding: 10px 12px;border-bottom: 2px solid var(--bw-line-strong);text-align: left;font-size: 0.78rem;font-weight: 800;letter-spacing: 0.05em;text-transform: uppercase;color: var(--bw-ink-400);}.bw-api__main .table > tbody > tr > td{padding: 10px 12px;border-top: 1px solid var(--bw-line);vertical-align: top;color: var(--bw-ink-700);}.bw-api__main .table-bordered,.bw-api__main .table-bordered > thead > tr > th,.bw-api__main .table-bordered > tbody > tr > td{border-color: var(--bw-line);}.bw-api__main .table-hover > tbody > tr:hover > td{background: var(--bw-surface-2);}.bw-api__main .table-condensed > tbody > tr > td,.bw-api__main .table-condensed > tbody > tr > th,.bw-api__main .table-condensed > thead > tr > td,.bw-api__main .table-condensed > thead > tr > th{padding: 8px 12px;}/* Eingerueckte Feldebenen */.bw-api__main tr.array-item td{padding: 5px 12px 5px 34px !important;border-top: none !important;}.bw-api__main tr.subarray-item td{padding: 5px 12px 5px 62px !important;border-top: none !important;}.bw-api__main tr.subsubarray-item td{padding: 5px 12px 5px 90px !important;border-top: none !important;}/* -------------------------------------------------------------------------- Auszeichnungen im Text -------------------------------------------------------------------------- */.bw-api__main code{display: inline-block;padding: 2px 7px;border-radius: 5px;background: var(--bw-surface-3);font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size: 0.86em;color: var(--bw-ink-800);}.bw-api__main code.string{background: #fff4e2;color: #a45b06;}.bw-api__main code.number{background: var(--bw-green-50);color: var(--bw-green-700);}/* Nur Inline-Code einfaerben. In

 macht highlight.js die Farben –   eine pauschale Regel auf "code > span" wuerde sie komplett neutralisieren. */.bw-api__main :not(pre) > code > span{color: var(--bw-ink-500);background: none;}.bw-api__main span.required{float: right;display: inline;padding: 3px 9px;border-radius: var(--bw-r-pill);background: var(--bw-green-600) !important;font-size: 0.68rem;font-weight: 700;letter-spacing: 0.03em;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;}/* --------------------------------------------------------------------------   Codebloecke (highlight.js)   -------------------------------------------------------------------------- */.bw-api__main pre{margin: 0 0 28px;padding: 0;border: 1px solid var(--bw-line);border-radius: var(--bw-r-md);background: var(--bw-surface-2);overflow: hidden;}.bw-api__main pre code{display: block;padding: 18px 20px;border-radius: 0;background: none;font-size: 0.85rem;line-height: 1.6;overflow-x: auto;white-space: pre;}.bw-api__main .btn{display: inline-flex;align-items: center;gap: 10px;padding: 12px 22px;border: 1px solid transparent;border-radius: var(--bw-r-pill);font-size: 0.95rem;font-weight: 700;text-decoration: none;}.bw-api__main .btn-primary{background: var(--bw-blue-700);color: #fff;}.bw-api__main .btn-primary:hover{background: var(--bw-blue-900);color: #fff;}/* --------------------------------------------------------------------------   Schmale Viewports: Tabellen scrollen, die Seite nicht   Die Inhaltsseiten liefern die Tabellen ohne Wrapper. Statt das Markup   anzufassen, bekommt die Tabelle selbst einen Scrollbereich.   -------------------------------------------------------------------------- */@media (max-width: 767px){.bw-api__main .table{ display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}.bw-api__main .table > thead,  .bw-api__main .table > tbody{ display: table; width: max-content; min-width: 100%;}.bw-api__main span.required{ float: none; display: inline-block; margin-left: 8px;}}/* --------------------------------------------------------------------------   Code-Beispiele mit Sprachreitern   Markup kommt aus ApiExample::render(). Reiter oben, Code darunter – der   Block sieht dadurch wie ein Fenster aus und nicht wie fuenf lose .   -------------------------------------------------------------------------- */.bw-api__main .bw-tabs{margin: 0 0 28px;border: 1px solid var(--bw-line);border-radius: var(--bw-r-md);background: var(--bw-surface-2);overflow: hidden;}.bw-api__main .bw-tabs__caption{margin: 0;max-width: none;padding: 10px 16px;border-bottom: 1px solid var(--bw-line);background: var(--bw-surface);font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size: 0.8rem;color: var(--bw-ink-500);}.bw-api__main .bw-tabs__bar{display: flex;align-items: stretch;gap: 12px;border-bottom: 1px solid var(--bw-line);background: var(--bw-surface);}.bw-api__main .bw-tabs__list{display: flex;align-items: stretch;flex: 1;min-width: 0;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;}.bw-api__main .bw-tabs__list::-webkit-scrollbar{display: none;}.bw-api__main .bw-tabs__tab{position: relative;flex: none;padding: 11px 16px;border: 0;border-bottom: 2px solid transparent;background: none;font-family: inherit;font-size: 0.85rem;font-weight: 700;line-height: 1.3;color: var(--bw-ink-400);white-space: nowrap;cursor: pointer;transition: color 0.15s ease, border-color 0.15s ease;}.bw-api__main .bw-tabs__tab:hover{color: var(--bw-ink-800);}.bw-api__main .bw-tabs__tab.is-active{color: var(--bw-blue-700);border-bottom-color: var(--bw-blue-700);}.bw-api__main .bw-tabs__copy{flex: none;align-self: center;margin-right: 10px;padding: 5px 12px;border: 1px solid var(--bw-line-strong);border-radius: var(--bw-r-pill);background: var(--bw-surface);font-family: inherit;font-size: 0.75rem;font-weight: 700;color: var(--bw-ink-500);cursor: pointer;transition: color 0.15s ease, border-color 0.15s ease;}.bw-api__main .bw-tabs__copy:hover{color: var(--bw-ink-900);border-color: var(--bw-ink-400);}.bw-api__main .bw-tabs__copy.is-done{color: var(--bw-green-700);border-color: var(--bw-green-600);}.bw-api__main .bw-tabs__panel{display: none;}.bw-api__main .bw-tabs__panel.is-active{display: block;}/* Das  sitzt schon im Rahmen der Tabs – kein zweiter Rahmen, kein Abstand. */.bw-api__main .bw-tabs pre{margin: 0;border: 0;border-radius: 0;background: none;}.bw-api__main .bw-tabs pre code{max-height: 620px;overflow: auto;}/* --------------------------------------------------------------------------   Methodenkopf   Beim Scrollen durch eine lange Seite soll jederzeit klar sein, in welcher   Funktion man gerade ist. Der Kopf zieht sich deshalb ueber die volle Breite   der Inhaltsspalte und bleibt unter der Navigation kleben. Die Trennlinie   davor ist ein eigenes Element und wandert dadurch nicht mit.   -------------------------------------------------------------------------- */.bw-api__sep{margin: 76px calc(-1 * var(--bw-api-pad)) 0;border-top: 1px solid var(--bw-line);}.bw-api__main h3{position: sticky;top: var(--bw-nav-h);z-index: 3;display: flex;align-items: center;gap: 12px;margin: 0 calc(-1 * var(--bw-api-pad)) 26px;padding: 15px var(--bw-api-pad);background: var(--bw-surface);border-bottom: 1px solid var(--bw-line);font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);font-weight: 800;letter-spacing: -0.01em;color: var(--bw-ink-900);scroll-margin-top: var(--bw-nav-h);}.bw-api__main h3[id*="."]::before{content: "POST";flex: none;padding: 4px 9px;border-radius: 5px;background: var(--bw-green-600);font-size: 0.66rem;font-weight: 800;letter-spacing: 0.06em;color: #fff;}@media (max-width: 991px){.bw-api__main h3{ position: static;}}/* Nur fuer den Bruchteil einer Sekunde gesetzt, in dem api_layout.js die   Position einer Ueberschrift misst: solange sie klebt, meldet der Browser   die Klebeposition statt der Position im Textfluss. */.bw-api__main.is-measuring h3{position: static;}/* --------------------------------------------------------------------------   Hinweiskasten   -------------------------------------------------------------------------- */.bw-api__main .bw-note{margin: 0 0 28px;padding: 16px 18px;border: 1px solid var(--bw-line);border-left: 3px solid var(--bw-warn);border-radius: var(--bw-r-sm);background: var(--bw-surface-2);}.bw-api__main .bw-note__label{display: block;margin-bottom: 6px;font-size: 0.72rem;font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase;color: var(--bw-ink-400);}.bw-api__main .bw-note p{margin: 0 0 8px;font-size: 0.92rem;}.bw-api__main .bw-note p:last-child{margin-bottom: 0;}/* Auf den Doku-Seiten grenzt die Leiste direkt an die Seitenleiste und ist   deshalb deckend statt halbtransparent. */[data-bw-theme=dark] .bw-api-page .bw-nav,[data-bw-theme=dark] .bw-api-page .bw-nav.is-stuck{background: var(--bw-surface-2);}[data-bw-theme=dark] .bw-api__main code.string{background: #33270f;color: #e2b878;}[data-bw-theme=dark] .bw-api__main code.number{background: var(--bw-green-50);color: var(--bw-green-700);}/* Syntaxfarben. highlight.js liefert die helle Palette als eigene Datei aus,   fuer dunkel wird sie hier ueberschrieben (Werte aus atom-one-dark). */[data-bw-theme=dark] .bw-api__main .hljs{color: #abb2bf;background: none;}[data-bw-theme=dark] .bw-api__main .hljs-comment,[data-bw-theme=dark] .bw-api__main .hljs-quote{color: #7b8494;}[data-bw-theme=dark] .bw-api__main .hljs-doctag,[data-bw-theme=dark] .bw-api__main .hljs-keyword,[data-bw-theme=dark] .bw-api__main .hljs-formula{color: #c678dd;}[data-bw-theme=dark] .bw-api__main .hljs-section,[data-bw-theme=dark] .bw-api__main .hljs-name,[data-bw-theme=dark] .bw-api__main .hljs-selector-tag,[data-bw-theme=dark] .bw-api__main .hljs-deletion,[data-bw-theme=dark] .bw-api__main .hljs-subst{color: #e06c75;}[data-bw-theme=dark] .bw-api__main .hljs-literal{color: #56b6c2;}[data-bw-theme=dark] .bw-api__main .hljs-string,[data-bw-theme=dark] .bw-api__main .hljs-regexp,[data-bw-theme=dark] .bw-api__main .hljs-addition,[data-bw-theme=dark] .bw-api__main .hljs-attribute,[data-bw-theme=dark] .bw-api__main .hljs-meta-string{color: #98c379;}[data-bw-theme=dark] .bw-api__main .hljs-built_in,[data-bw-theme=dark] .bw-api__main .hljs-class .hljs-title{color: #e6c07b;}[data-bw-theme=dark] .bw-api__main .hljs-attr,[data-bw-theme=dark] .bw-api__main .hljs-variable,[data-bw-theme=dark] .bw-api__main .hljs-template-variable,[data-bw-theme=dark] .bw-api__main .hljs-type,[data-bw-theme=dark] .bw-api__main .hljs-selector-class,[data-bw-theme=dark] .bw-api__main .hljs-selector-attr,[data-bw-theme=dark] .bw-api__main .hljs-selector-pseudo,[data-bw-theme=dark] .bw-api__main .hljs-number{color: #d19a66;}[data-bw-theme=dark] .bw-api__main .hljs-symbol,[data-bw-theme=dark] .bw-api__main .hljs-bullet,[data-bw-theme=dark] .bw-api__main .hljs-link,[data-bw-theme=dark] .bw-api__main .hljs-meta,[data-bw-theme=dark] .bw-api__main .hljs-selector-id,[data-bw-theme=dark] .bw-api__main .hljs-title{color: #61aeee;}/* Gefuellte Akzentflaechen im dunklen Theme: helle Markenfarbe, dunkle Schrift.   Weiss auf dem aufgehellten Blau/Gruen waere nicht mehr lesbar. */[data-bw-theme=dark] .bw-api-page .bw-btn--primary,[data-bw-theme=dark] .bw-api-page .bw-btn--primary:hover{background: var(--bw-green-500);color: #08131c;}[data-bw-theme=dark] .bw-api-page .bw-btn--secondary,[data-bw-theme=dark] .bw-api-page .bw-btn--secondary:hover{background: var(--bw-blue-500);color: #08131c;}[data-bw-theme=dark] .bw-api__main .btn-primary,[data-bw-theme=dark] .bw-api__main .btn-primary:hover{background: var(--bw-blue-500);color: #08131c;}[data-bw-theme=dark] .bw-api__main span.required{background: var(--bw-green-500) !important;color: #08131c;}[data-bw-theme=dark] .bw-api__main h3[id*="."]::before{background: var(--bw-green-500);color: #08131c;}/* Kapitel ohne Methodennamen (Einfuehrung, Request, Authentication) lesen sich   als Fliesstext besser als in der Monospace der Methodenkoepfe. */.bw-api__main h3:not([id*="."]){font-family: var(--bw-font);font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);letter-spacing: -0.02em;}.bw-api__main .bw-api__lead{margin-bottom: 24px;font-size: var(--bw-fs-lead);color: var(--bw-ink-500);}/* --------------------------------------------------------------------------   Statuscodes   Alle Codes gruen einzufaerben verschenkt die Information. 2xx gruen,   4xx gelb, 5xx rot – so ist die Tabelle auf einen Blick lesbar.   -------------------------------------------------------------------------- */.bw-api__main code.bw-code-2xx{background: var(--bw-ok-bg);color: var(--bw-ok-fg);}.bw-api__main code.bw-code-4xx{background: var(--bw-warn-bg);color: var(--bw-warn-fg);}.bw-api__main code.bw-code-5xx{background: var(--bw-error-bg);color: var(--bw-error-fg);}/* Steht bewusst zuletzt: korrigiert Stellen aus allen Bausteinen davor. *//* ==========================================================================   billware Frontend v2 – Korrekturen fuer das dunkle Theme   Die Farbwerte selbst stehen in _tokens.scss. Hier stehen nur die Stellen,   an denen fest verdrahtete helle Farben verwendet werden oder an denen das   Umkehren der Tokens allein nicht reicht.   ========================================================================== */[data-bw-theme=dark] body{background: var(--bw-surface);color: var(--bw-ink-700);}/* --------------------------------------------------------------------------   Navigation   Die helle Leiste ist bewusst halbtransparent gesetzt – der Wert muss   deshalb komplett ersetzt werden, nicht nur das Token.   -------------------------------------------------------------------------- */[data-bw-theme=dark] .bw-nav{background: rgba(15, 28, 39, 0.92);border-bottom-color: var(--bw-line);}[data-bw-theme=dark] .bw-nav.is-stuck{background: rgba(15, 28, 39, 0.97);}/* --------------------------------------------------------------------------   Gefuellte Akzentflaechen   Im dunklen Theme sind Blau und Gruen aufgehellt. Weisse Schrift darauf   waere nicht mehr lesbar, deshalb dunkle Schrift auf heller Marke.   -------------------------------------------------------------------------- */[data-bw-theme=dark] .bw-btn--primary,[data-bw-theme=dark] .bw-btn--primary:hover{background: var(--bw-green-500);color: #08131c;}[data-bw-theme=dark] .bw-btn--secondary,[data-bw-theme=dark] .bw-btn--secondary:hover{background: var(--bw-blue-500);color: #08131c;}/* .bw-btn--on-dark sitzt immer auf einer dunklen Flaeche und bleibt so, wie   es ist – dort ist Weiss auf Weiss-transparent weiterhin richtig. *//* Der Sprunglink liegt im hellen Theme dunkel auf hell – im dunklen Theme   waere --bw-ink-900 fast weiss und die weisse Schrift unsichtbar. */[data-bw-theme=dark] .bw-skip-link,[data-bw-theme=dark] .bw-skip-link:focus{background: var(--bw-blue-500);color: #08131c;}/* --------------------------------------------------------------------------   Meldungen und Hinweise   -------------------------------------------------------------------------- */[data-bw-theme=dark] .bw-v2 .alert.error{background: var(--bw-error-bg);color: var(--bw-error-fg);}[data-bw-theme=dark] .bw-v2 .alert.warning{background: var(--bw-warn-bg);color: var(--bw-warn-fg);}[data-bw-theme=dark] .bw-v2 .text-danger,[data-bw-theme=dark] .bw-pw-check .text-bw-red{color: var(--bw-error-fg);}[data-bw-theme=dark] .bw-pw-check .text-bw-red{background: var(--bw-error-bg);}[data-bw-theme=dark] .bw-disclaimer{background: var(--bw-warn-bg);}[data-bw-theme=dark] .bw-status--open{background: var(--bw-warn-bg);color: var(--bw-warn-fg);}/* Der Cookie-Hinweis nutzt eigene Klassen des Widgets – auch dort gilt   dunkle Schrift auf der aufgehellten Marke. */[data-bw-theme=dark] .freeprivacypolicy-com---palette-light .cc-nb-okagree,[data-bw-theme=dark] .freeprivacypolicy-com---palette-light .cc-nb-okagree:hover,[data-bw-theme=dark] .freeprivacypolicy-com---pc-dialog .cc-cp-foot-save,[data-bw-theme=dark] .freeprivacypolicy-com---pc-dialog .cc-cp-foot-save:hover{background: var(--bw-green-500) !important;color: #08131c !important;}/* --------------------------------------------------------------------------   Fotos   Die Bilder sind fuer helle Seiten aufgenommen und leuchten im Dunkeln.   Etwas Helligkeit heraus, damit sie sich einfuegen.   -------------------------------------------------------------------------- */[data-bw-theme=dark] .bw-onboarding__photo img,[data-bw-theme=dark] .bw-origin__photo img,[data-bw-theme=dark] .bw-shot img{filter: brightness(0.88) saturate(0.94);}/* Partnerlogos sind meist dunkel auf transparent. */[data-bw-theme=dark] .bw-logos img,[data-bw-theme=dark] .bw-flow__node img{filter: brightness(1.12);}/* --------------------------------------------------------------------------   Umschalter   -------------------------------------------------------------------------- */.bw-theme-switch{display: flex;align-items: center;justify-content: center;flex: none;width: 38px;height: 38px;padding: 0;border: 1px solid var(--bw-line);border-radius: 50%;background: var(--bw-surface);color: var(--bw-ink-500);cursor: pointer;transition: color 0.15s ease, border-color 0.15s ease;}.bw-theme-switch:hover{color: var(--bw-ink-900);border-color: var(--bw-line-strong);}.bw-theme-switch svg{width: 18px;height: 18px;}/* Gezeigt wird immer das Ziel, nicht der aktuelle Zustand. */.bw-theme-switch__sun{display: none;}[data-bw-theme=dark] .bw-theme-switch__sun{display: block;}[data-bw-theme=dark] .bw-theme-switch__moon{display: none;}/* In der mobilen Schublade steht der Umschalter mit Beschriftung. */.bw-nav__drawer .bw-theme-switch{width: auto;height: auto;gap: 10px;padding: 12px 14px;border-radius: var(--bw-r-sm);font-family: inherit;font-size: 0.95rem;font-weight: 600;color: var(--bw-ink-700);}.bw-nav__drawer .bw-theme-switch::after{content: "Dunkles Design";}[data-bw-theme=dark] .bw-nav__drawer .bw-theme-switch::after{content: "Helles Design";}