/* water Partner Resource Center (HubSpot Knowledge Base) – ergänzt nur, was der KB-Theme-Editor nicht kann.
   Schriften, Farben, Buttons, Suchleiste, Layout, Schriftgrößen und Footer-Farben bleiben im Theme-Editor; das Menü bekommt nur die Pillenform.
   Eingebunden über Einstellungen → Knowledge Base → Header HTML (Datei im Dateimanager /water/kb/kb.css). Quelle: Repo kb/kb.css. */

.kb-body-wrapper { --w-pink: #FF0071; --w-violet: #6537BF; --w-blue: #378FFF; --w-bg: #101334; --w-primary: #0E24EA; --w-surface: #F4F4F5; --w-muted: #6E739A; --w-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }

/* Liquid-Blur oben rechts im Suchbereich – legt sich über die im Editor gewählte Hintergrundfarbe */
.kb-body-wrapper .hs-kb-search-input-wrapper { position: relative; overflow: hidden; }
.kb-body-wrapper .hs-kb-search-input-wrapper::before {
  content: ''; position: absolute; top: -560px; right: -620px; width: 1500px; height: 1500px; pointer-events: none; z-index: 0;
  background: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/water-theme/images/liquid/liquid-blur-lg.png') center / 1300px no-repeat; opacity: .9;
}
.kb-body-wrapper .hs-kb-search-input-wrapper > * { position: relative; z-index: 1; }

/* Hauptmenü: Einträge als Pillen wie in der Portal-Navigation (Hover hell, aktiver Eintrag Navy) – Schrift und Farben bleiben beim Editor */
.kb-body-wrapper .header__menu--desktop .header__menu-item--depth-1 { padding: 0 4px; }
.kb-body-wrapper .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link { padding: .55rem .9rem; border-radius: 999px; transition: background .25s ease, color .25s ease; }
.kb-body-wrapper .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link:hover, .kb-body-wrapper .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link:focus { background: var(--w-surface); }
.kb-body-wrapper .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link--active-link, .kb-body-wrapper .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link--active-link:hover, .kb-body-wrapper .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link--active-link:focus { background: var(--w-bg); color: #FFFFFF; }

/* Startseite: Kategorie-Kacheln als Blog-Karte (weiße Karte, Verlaufsfläche mit Icon oben, Artikel-Links, „Mehr anzeigen“) – der Editor bietet für Kacheln nur die Layout-Auswahl. Titel- und Linkfarbe kommen aus dem Editor. */
.kb-body-wrapper .hs-kb-home-list { gap: 24px; }
.kb-body-wrapper .hs-kb-home-list__category { background: #FFFFFF; border: 1px solid #E3E6F0; border-radius: 16px; padding: 1rem 1rem 1.25rem; box-shadow: 0 1px 2px rgba(16,19,52,.06); display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.kb-body-wrapper .hs-kb-home-list__category:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16,19,52,.10); }
.kb-body-wrapper .hs-kb-home-list__category-link { display: block; }
.kb-body-wrapper .hs-kb-home-list__icon { aspect-ratio: 16 / 9; width: 100%; margin: 0 0 1rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FF0071 0%, #6537BF 55%, #378FFF 100%); }
.kb-body-wrapper .hs-kb-home-list__icon .hs-kb-home-list__icon-svg { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 8px 24px rgba(16,19,52,.18); } /* weißer Kreis, damit die Icon-Farbe aus dem Editor auf dem Verlauf sichtbar bleibt */
.kb-body-wrapper .hs-kb-home-list__icon svg { width: 32px; height: 32px; fill: currentColor; }
.kb-body-wrapper .hs-kb-home-list__text { padding: 0 .25rem; }
.kb-body-wrapper .hs-kb-home-list__text__category-title { margin: 0 0 .4rem; }
.kb-body-wrapper .hs-kb-home-list__text__category-description { color: #6E739A; font-size: .9375rem; margin: 0 0 .75rem; }
.kb-body-wrapper .hs-kb-home-list__category .hs-kb-category-article-list { list-style: none; margin: 0 .25rem 1rem; padding: 0; }
.kb-body-wrapper .hs-kb-home-list__category .hs-kb-category-article-list__link { display: block; padding: .45rem 0; border-top: 1px solid #EAECF6; } /* nur auf der Startseite; Linkfarbe kommt aus dem Editor */
.kb-body-wrapper .hs-kb-home-list__text__category-link { margin: auto .25rem 0; font-weight: 600; text-decoration: none; }

/* Breadcrumb in Mono-Schrift und Versalien */
.kb-body-wrapper .hs-kb-breadcrumbs { font-family: var(--w-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

/* Seitenleiste: Einträge als Pillen, aktiver Eintrag Navy */
.kb-body-wrapper .hs-kb-category-accordion_link { display: block; padding: .55rem 1rem; border-radius: 999px; text-decoration: none; }
.kb-body-wrapper .hs-kb-category-accordion_link:hover { background: var(--w-surface); }
.kb-body-wrapper .hs-kb-category-accordion_link--active > .hs-kb-category-accordion_link, .kb-body-wrapper .hs-kb-category-accordion_link--active { background: var(--w-bg); color: #FFFFFF; border-radius: 999px; }

/* Artikel: Swoosh vor Zwischenüberschriften, Tabellen mit Zebra, Bilder abgerundet */
.kb-body-wrapper .knowledgebase-post .hs_cos_wrapper_type_inline_richtext_field h2::before { content: ''; display: block; width: 44px; height: 14px; margin-bottom: .6rem; background: linear-gradient(86deg, #D900FC 0%, #2B3BCD 64%); -webkit-mask: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/water-theme/images/portal/swoosh.svg') no-repeat center / contain; mask: url('https://147936508.fs1.hubspotusercontent-eu1.net/hubfs/147936508/raw_assets/public/water-theme/images/portal/swoosh.svg') no-repeat center / contain; }
.kb-body-wrapper .knowledgebase-post img { border-radius: 12px; }
.kb-body-wrapper .knowledgebase-post table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; }
.kb-body-wrapper .knowledgebase-post th { text-align: left; font-family: var(--w-mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--w-muted); padding: .6rem .75rem; border-bottom: 2px solid var(--w-bg); background: transparent; }
.kb-body-wrapper .knowledgebase-post td { padding: .7rem .75rem; border-bottom: 1px solid #E6E7EE; vertical-align: top; }
.kb-body-wrapper .knowledgebase-post tbody tr:nth-child(even) td { background: var(--w-surface); }

/* Callouts des KB-Editors in water-Farben – Zuordnung wie HubSpot-Standard: Note grün, Tip blau, Warning orange, Caution rot */
.kb-body-wrapper .hs-callout-type-note, .kb-body-wrapper .hs-callout-type-tip, .kb-body-wrapper .hs-callout-type-warning, .kb-body-wrapper .hs-callout-type-caution { border-radius: 12px; border-left-width: 4px; padding: 1rem 1.25rem 1rem 1.1rem; }
.kb-body-wrapper .hs-callout-type-note { background: #E8F8EF; border-left-color: #0F7A45; }
.kb-body-wrapper .hs-callout-type-tip { background: #EEF1FF; border-left-color: var(--w-primary); }
.kb-body-wrapper .hs-callout-type-warning { background: #FFF4D6; border-left-color: #B26A00; }
.kb-body-wrapper .hs-callout-type-caution { background: #FFE4EE; border-left-color: var(--w-pink); }

/* Feedback-Box als Karte */
.kb-body-wrapper .hs-kb-feedback { background: var(--w-surface); border-radius: 16px; padding: 1.5rem; margin-top: 2.5rem; }

/* Verlaufslinie oben am Footer – Farben und Inhalt des Footers bleiben beim Editor */
.kb-body-wrapper .footer { position: relative; }
.kb-body-wrapper .footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--w-pink), var(--w-violet), var(--w-blue)); }

/* Bausteine für Artikel (im Quellcode nutzbar), rein additiv */
.kb-body-wrapper .w-label { font-family: var(--w-mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--w-muted); }
.kb-body-wrapper .w-panel { border-radius: 12px; padding: 1rem 1.25rem 1rem 1.1rem; margin: 1.25rem 0; border-left: 4px solid var(--w-primary); background: #EEF1FF; }
.kb-body-wrapper .w-panel--tip { border-left-color: #0F7A45; background: #E8F8EF; }
.kb-body-wrapper .w-panel--warn { border-left-color: #B26A00; background: #FFF4D6; }
.kb-body-wrapper .w-panel--stop { border-left-color: var(--w-pink); background: #FFE4EE; }
.kb-body-wrapper .w-pill { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 500; white-space: nowrap; background: #E3E8FF; color: var(--w-primary); }
.kb-body-wrapper .w-pill--review { background: #FFF4D6; color: #7A4B00; }
.kb-body-wrapper .w-pill--ok { background: #DDF5E8; color: #0F7A45; }
.kb-body-wrapper .w-pill--off { background: #ECEEF2; color: #4B4F6B; }
.kb-body-wrapper .w-pill--no { background: #FFE4EE; color: #B3004F; }
.kb-body-wrapper .w-kbd { display: inline-block; padding: .05rem .45rem; border: 1px solid #C9CBD8; border-radius: 6px; background: #F8F8FA; font-size: .9em; }

@media (max-width: 600px) { .kb-body-wrapper .hs-kb-search-input-wrapper::before { top: -640px; right: -760px; } }

/* HubSpot Cookie-Banner und Einstellungs-Modal im water-Look – gleiche Regeln wie im Theme (css/main.css), hier mit festen Werten, weil die KB das Theme-CSS nicht lädt */
#hs-eu-cookie-confirmation, #hs-eu-cookie-confirmation *, #hs-modal, #hs-modal * { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important; }
#hs-eu-cookie-confirmation { background: #FFFFFF !important; border: 1px solid #E3E6F0 !important; border-radius: 16px !important; box-shadow: 0 24px 60px -24px rgba(16,19,52,.35) !important; }
#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner { background: transparent !important; padding: 1.5rem 1.75rem !important; }
#hs-eu-cookie-confirmation #hs-eu-policy-wording, #hs-eu-cookie-confirmation #hs-eu-policy-wording p, #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer, #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer p { color: #0A0A0A !important; font-size: .9375rem !important; line-height: 1.55 !important; }
#hs-eu-cookie-confirmation #hs-eu-policy-wording a { color: #0E24EA !important; text-decoration: underline; text-underline-offset: 3px; }
#hs-eu-cookie-confirmation #hs-eu-confirmation-button, #hs-eu-cookie-confirmation #hs-eu-decline-button, #hs-modal #hs-modal-accept-all, #hs-modal #hs-modal-save-settings { border-radius: 999px !important; padding: .75rem 1.4rem !important; font: 500 .9375rem/1 'Inter', 'Helvetica Neue', Arial, sans-serif !important; transition: background .25s ease, color .25s ease, border-color .25s ease; }
#hs-eu-cookie-confirmation #hs-eu-confirmation-button, #hs-modal #hs-modal-accept-all { background: #101334 !important; border: 1px solid #101334 !important; color: #FFFFFF !important; }
#hs-eu-cookie-confirmation #hs-eu-confirmation-button:hover, #hs-modal #hs-modal-accept-all:hover { background: #0E24EA !important; border-color: #0E24EA !important; }
#hs-eu-cookie-confirmation #hs-eu-decline-button, #hs-modal #hs-modal-save-settings { background: transparent !important; border: 1px solid rgba(10,10,10,.5) !important; color: #0A0A0A !important; }
#hs-eu-cookie-confirmation #hs-eu-decline-button:hover, #hs-modal #hs-modal-save-settings:hover { background: #101334 !important; border-color: #101334 !important; color: #FFFFFF !important; }
#hs-eu-cookie-confirmation #hs-eu-cookie-settings-button { color: #0E24EA !important; font-weight: 500 !important; text-decoration: underline; text-underline-offset: 3px; }
#hs-eu-cookie-confirmation #hs-eu-close-button svg, #hs-modal #hs-modal-close-button svg { fill: #0A0A0A !important; }
#hs-modal #hs-modal-content { background: #FFFFFF !important; border-radius: 16px !important; box-shadow: 0 24px 60px -24px rgba(16,19,52,.45) !important; }
#hs-modal #hs-modal-header, #hs-modal #hs-modal-footer { background: transparent !important; border: 0 !important; }
#hs-modal #hs-modal-introduction, #hs-modal #hs-modal-introduction h2, #hs-modal #hs-modal-introduction h3 { font-family: 'Spock Pro', 'Spock Pro Regular', 'Helvetica Neue', Arial, sans-serif !important; font-weight: 400 !important; color: #0A0A0A !important; }
#hs-modal #hs-modal-introduction-description, #hs-modal #hs-modal-introduction-description p { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important; color: #0A0A0A !important; font-size: .9375rem !important; line-height: 1.55 !important; }
#hs-modal #hs-modal-introduction > span { font-family: 'Spock Pro', 'Spock Pro Regular', 'Helvetica Neue', Arial, sans-serif !important; font-weight: 400 !important; font-size: 1.375rem !important; letter-spacing: -.01em; color: #0A0A0A !important; } /* Modal-Überschrift „Über Cookies“ ist ein nacktes span */
#hs-modal .hs-category-row { background: #F4F4F5 !important; border: 1px solid #E3E6F0 !important; border-radius: 12px !important; box-shadow: none !important; }
#hs-modal .hs-category-label, #hs-modal .hs-category-row-header { color: #0A0A0A !important; font-weight: 500 !important; }
#hs-modal .hs-always-active-label { color: #6E739A !important; font: 500 11px/1.3 'IBM Plex Mono', ui-monospace, Menlo, monospace !important; letter-spacing: .08em; text-transform: uppercase; }
#hs-modal .hs-category-description, #hs-modal .hs-category-description p { color: #4A4F6E !important; font-size: .875rem !important; line-height: 1.5 !important; }
#hs-modal .hs-toggle-switch { background: #C9CBD8 !important; border-radius: 999px !important; }
#hs-modal .hs-toggle-switch-input:checked + .hs-toggle-switch, #hs-modal .hs-toggle-switch.hs-toggle-switch-checked, #hs-modal .hs-toggle-switch:has(input:checked) { background: #0E24EA !important; }
#hs-modal .hs-toggle-switch-nob { background: #FFFFFF !important; }