/*
 * hydrop systems Help Scout Docs theme
 *
 * Design direction:
 * - reference: https://hydrop-systems.com/
 *
 * Keep this file focused on calm, readable documentation UI with strong hierarchy,
 * FAQ clarity, and safe/serious callout styles for warnings.
 */

:root {
  /*
   * Brand tokens
   * Keep these aligned with hydrop support/homepage brand colors.
   * Update values here first when brand hex values are refreshed.
   */
  --color-primary: #0079c6; /* main hydrop blue */
  --color-primary-strong: #1b64f6;
  --color-secondary: #36c9ff; /* optional accent */
  --color-accent-light: #36c9ff;

  /* Semantic feedback */
  --color-success: #02c960;
  --color-warning: #fcb900;
  --color-danger: #cf2e2e;

  /* Neutrals */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f9fb;
  --color-border: #e6e6e6;
  --color-text: #153243;
  --color-text-muted: #555d66;

  /* Optional additional accents from site palette */
  --color-purple: #9b51e0;
  --color-teal: #339eb1;

  /* Typography and layout */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-small: 4px;
  --radius-medium: 8px;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.06);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Code tokens */
  --code-bg: #f2f7fa;
  --code-border: #d7e4ec;

  /* Category card icon presets (non-emoji SVG data URIs) */
  --icon-category-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z'/%3E%3C/svg%3E");
  --icon-category-general: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z'/%3E%3C/svg%3E");
  --icon-category-api: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 18H6a4 4 0 010-8 5.5 5.5 0 0110.6-1.9A4.2 4.2 0 0119 18zm-8-8h2v4h2.5L12 18l-3.5-4H11v-4z'/%3E%3C/svg%3E");
  --icon-category-app: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm0 4v12h10V6H7zm5 15a1.2 1.2 0 110-2.4A1.2 1.2 0 0112 21z'/%3E%3C/svg%3E");
  --icon-category-compatibility: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 13.5l-3.3-3.3 1.4-1.4 1.9 1.9 4.5-4.5 1.4 1.4-5.9 5.9z'/%3E%3C/svg%3E");
  --icon-category-troubleshooting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M22.7 19.3l-6.4-6.4a5.9 5.9 0 01-7.2-7.2l3.1 3.1 2.2-2.2-3.1-3.1a5.9 5.9 0 017.2 7.2l6.4 6.4-2.2 2.2zM4 20l4.8-4.8 2.2 2.2L6.2 22H4v-2z'/%3E%3C/svg%3E");
  --icon-category-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3C7 3 3 4.79 3 7v10c0 2.21 4 4 9 4s9-1.79 9-4V7c0-2.21-4-4-9-4zm0 2c4.42 0 7 .99 7 2s-2.58 2-7 2-7-.99-7-2 2.58-2 7-2zm0 14c-4.42 0-7-.99-7-2v-2c1.53 1.03 4.07 1.5 7 1.5s5.47-.47 7-1.5v2c0 1.01-2.58 2-7 2zm0-5.5c-4.42 0-7-.99-7-2v-2c1.53 1.03 4.07 1.5 7 1.5s5.47-.47 7-1.5v2c0 1.01-2.58 2-7 2z'/%3E%3C/svg%3E");
  --icon-category-installation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 3h2v8l2.5-2.5 1.4 1.4L12 15.8 7.1 9.9l1.4-1.4L11 11V3zM4 17h16v4H4v-4z'/%3E%3C/svg%3E");
  --icon-category-shop-shipping: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3L3 7.5l9 4.5 9-4.5L12 3zm-7 7.7l6 3v6.8l-6-3v-6.8zm8 9.8v-6.8l6-3v6.8l-6 3z'/%3E%3C/svg%3E");
  --icon-category-smart-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 4l8 7h-2v9h-5v-6h-2v6H6v-9H4l8-7z'/%3E%3C/svg%3E");
  --icon-category-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 4h16a2 2 0 012 2v9a2 2 0 01-2 2H9l-5 4v-4H4a2 2 0 01-2-2V6a2 2 0 012-2zm2 4v2h12V8H6zm0 4v2h8v-2H6z'/%3E%3C/svg%3E");
  --icon-category-water: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2s6 6.6 6 11a6 6 0 11-12 0c0-4.4 6-11 6-11zm0 17a4 4 0 004-4c0-2.3-2.2-5.5-4-7.7C10.2 9.5 8 12.7 8 15a4 4 0 004 4z'/%3E%3C/svg%3E");
  --icon-category-device: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm0 4v12h10V6H7zm5 15a1.2 1.2 0 110-2.4A1.2 1.2 0 0112 21z'/%3E%3C/svg%3E");
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.65;
  background:
    radial-gradient(circle at 10% -20%, rgba(54, 201, 255, 0.12), transparent 36%),
    radial-gradient(circle at 90% 0%, rgba(0, 121, 198, 0.1), transparent 30%),
    var(--color-bg);
}

p,
ul,
ol,
div,
li,
dd,
table,
blockquote {
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-decoration-color: rgba(0, 121, 198, 0.4);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 2px;
}

/* Main navigation */
#mainNav .navbar-inner {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(21, 50, 67, 0.08);
  backdrop-filter: blur(5px);
}

#mainNav .container-fluid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
}

#mainNav .brand {
  display: inline-flex;
  align-items: center;
  min-height: 70px;
  order: 2;
  margin-left: auto;
  float: none !important;
}

#mainNav .brand img {
  max-height: 52px;
  width: auto;
}

#mainNav .nav-collapse {
  order: 1;
  float: none !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  position: static !important;
  flex: 0 0 auto !important;
  min-width: max-content;
}

#mainNav .nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  float: none !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  min-width: max-content;
}

#mainNav .navbar-inner .container-fluid > .nav-collapse.collapse,
#mainNav .navbar-inner .container-fluid > .nav-collapse.collapse > nav,
#mainNav .navbar-inner .container-fluid > .nav-collapse.collapse > nav > ul.nav {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: max-content !important;
  overflow: visible !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

#mainNav .navbar-inner .container-fluid > .nav-collapse.collapse > nav > ul.nav {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mainNav .nav li {
  float: none;
}

#mainNav .nav li,
#mainNav .nav li a {
  position: static !important;
}

#mainNav .nav li a {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.2;
  padding: 0.85rem 1rem;
  letter-spacing: 0.01em;
}

#mainNav .nav li a:hover,
#mainNav .nav li a:focus,
#mainNav .nav .active a {
  color: var(--color-primary-strong);
  background: transparent;
}

/* Emphasize top-right Start nav item as a clear call-to-action */
#mainNav .nav li a[href="/"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.05rem;
  margin-top: 0;
  position: relative;
  top: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  box-shadow: 0 8px 18px rgba(0, 121, 198, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#mainNav .nav li a[href="/"]:hover,
#mainNav .nav li a[href="/"]:focus,
#mainNav .nav li.active a[href="/"] {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary));
  box-shadow: 0 12px 24px rgba(0, 121, 198, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  text-decoration: none;
}

/* Docs homepage hero/search area */
#docsSearch {
  padding: clamp(28px, 5vw, 56px) var(--space-md) clamp(22px, 4vw, 38px);
  background: linear-gradient(140deg, #eef8fc 0%, #f5fbff 55%, #ffffff 100%);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

#docsSearch h1 {
  margin: 0 auto var(--space-lg);
  max-width: 860px;
  color: var(--color-text);
  font-size: clamp(1.5rem, 3vw, 2.45rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 750;
}

#searchBar {
  margin: 0 auto;
  width: min(820px, 100%);
  display: flex;
  align-items: center;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

#searchBar .search-query {
  flex: 1;
  height: 58px;
  border: 0;
  margin: 0;
  padding: 0 var(--space-lg);
  font-size: 1rem;
  color: var(--color-text);
  background: transparent;
}

#searchBar .search-query::placeholder {
  color: #7891a1;
}

#searchBar button {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 50px;
  margin-right: var(--space-xs);
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  font-weight: 650;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

#searchBar button:hover,
#searchBar button:focus {
  background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary));
}

/* Shared content width */
#contentArea {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-lg) clamp(var(--space-md), 3.5vw, 30px) var(--space-xl);
}

/* Homepage support sections */
.most-pop-articles,
.category-list {
  margin: var(--space-lg) auto;
}

#contentArea > .most-pop-articles,
#contentArea > .category-list,
#contentArea > hr.sep,
#contentArea > footer {
  margin-left: auto;
  margin-right: auto;
}

#contentArea > .category-list,
#contentArea > hr.sep,
#contentArea > footer {
  width: min(940px, calc(100% - (var(--space-lg) * 2)));
}

.most-pop-articles h2,
.category-list h2 {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.most-pop-articles .popArticles,
.category-list {
  list-style: none;
  padding: 0;
}

.most-pop-articles .popArticles,
.most-pop-articles.two-col .popArticles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.category-list,
.category-list.two-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.most-pop-articles .popArticles li,
.category-list .category {
  margin: 0;
}

.most-pop-articles .popArticles li a,
.category-list .category {
  display: block;
  height: 100%;
  padding: calc(var(--space-md) + 2px) var(--space-lg);
  min-height: 78px;
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(21, 50, 67, 0.03);
  color: var(--color-text);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.most-pop-articles .popArticles li a {
  position: relative;
  display: flex;
  align-items: center;
  padding: calc(var(--space-md) + 2px) var(--space-lg) calc(var(--space-md) + 2px)
    calc(var(--space-xl) + 6px);
  line-height: 1.45;
}

.most-pop-articles .popArticles li a:hover,
.category-list .category:hover,
.most-pop-articles .popArticles li a:focus,
.category-list .category:focus {
  transform: translateY(-2px);
  border-color: rgba(0, 121, 198, 0.28);
  box-shadow: 0 10px 18px rgba(0, 121, 198, 0.1);
  color: var(--color-text);
  text-decoration: none;
}

.most-pop-articles .popArticles li i {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translate(1px, -50%);
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  box-shadow: 0 6px 14px rgba(0, 121, 198, 0.26);
  font-size: 0.78rem;
  overflow: hidden;
}

.most-pop-articles .popArticles li i::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0;
}

.category-list .category h3 {
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
  font-size: clamp(1.2rem, 2.1vw, 1.42rem);
  line-height: 1.25;
}

.category-list .category .article-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.category-list .category {
  --category-icon-svg: var(--icon-category-default);
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 154px;
}

.category-list .category::before {
  content: "";
  width: 2.05rem;
  height: 2.05rem;
  margin: 0 auto 0.72rem;
  border-radius: 999px;
  display: block;
  background-image: var(--category-icon-svg),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 62%, 100%;
  box-shadow: 0 6px 14px rgba(0, 121, 198, 0.24);
  flex: 0 0 auto;
}

/* Category icon mapping by Help Scout category id.
 * Add new mappings here as you publish categories.
 * Unmapped categories use --icon-category-default automatically.
 */
#category-16 {
  --category-icon-svg: var(--icon-category-compatibility);
}

#category-14 {
  --category-icon-svg: var(--icon-category-troubleshooting);
}

/*
 * Future category icon mapping by slug (works before numeric IDs are known).
 * You can choose icons per category here.
 */
.category-list .category[href$="-allgemeines"] {
  --category-icon-svg: var(--icon-category-general);
}

.category-list .category[href$="-api"] {
  --category-icon-svg: var(--icon-category-api);
}

.category-list .category[href$="-app"] {
  --category-icon-svg: var(--icon-category-app);
}

.category-list .category[href$="-daten"] {
  --category-icon-svg: var(--icon-category-data);
}

.category-list .category[href$="-installation"] {
  --category-icon-svg: var(--icon-category-installation);
}

.category-list .category[href*="-shop-"][href*="versand"] {
  --category-icon-svg: var(--icon-category-shop-shipping);
}

.category-list .category[href*="smart-home"],
.category-list .category[href*="smarthome"],
.category-list .category[href*="smahrt-home"] {
  --category-icon-svg: var(--icon-category-smart-home);
}

.category-list .category[href$="-support"] {
  --category-icon-svg: var(--icon-category-support);
}

.category-list .category h3,
.category-list .category .article-count {
  width: 100%;
  text-align: center;
}

hr.sep {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

/* Article page layout */
#contentArea .row-fluid {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
}

#main-content {
  flex: 1 1 auto;
  min-width: 0;
  order: 2;
  float: right;
}

#sidebar {
  width: min(300px, 32%);
  flex: 0 0 auto;
  order: 1;
  float: left;
}

.contentWrapper {
  max-width: 780px;
}

/* Category overview pages */
#main-content #categoryHead {
  margin: 0 auto;
  max-width: 780px;
  padding: var(--space-lg) 0 var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title sort"
    "desc sort";
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#main-content #categoryHead h1 {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.24;
}

#main-content #categoryHead .descrip {
  grid-area: desc;
  min-width: 0;
  margin: var(--space-sm) 0 0;
  color: var(--color-text-muted);
}

#main-content #categoryHead .sort {
  grid-area: sort;
  margin: 0;
  justify-self: end;
  align-self: center;
  float: none;
  position: static;
}

#main-content #categoryHead .sort form {
  margin: 0;
}

#main-content #categoryHead #sortBy {
  width: min(320px, 100%);
  min-height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: #fff;
  color: var(--color-text);
}

#main-content .articleList {
  list-style: none;
  margin: 0 auto;
  max-width: 780px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#main-content .articleList li {
  margin: 0;
}

#main-content .articleList li + li {
  margin-top: 2px;
}

#main-content .articleList li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 46px;
  padding: 0.62rem var(--space-md) 0.62rem calc(var(--space-xl) + 2px);
  border-radius: var(--radius-small);
  color: var(--color-text);
}

#main-content .articleList li a:hover,
#main-content .articleList li a:focus {
  color: var(--color-primary-strong);
  text-decoration: none;
  background: #f3faff;
}

#main-content .articleList li a i.icon-article-doc {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 121, 198, 0.12);
  color: transparent;
  overflow: hidden;
}

#main-content .articleList li a i.icon-article-doc::before {
  content: "";
}

#fullArticle {
  color: var(--color-text);
}

#fullArticle .title,
#fullArticle h1 {
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

#fullArticle h2 {
  margin: var(--space-xl) 0 var(--space-sm);
  color: var(--color-text);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.26;
  letter-spacing: -0.01em;
}

#fullArticle h3 {
  margin: calc(var(--space-lg) + 2px) 0 var(--space-sm);
  color: var(--color-text);
  font-size: clamp(1.12rem, 2.1vw, 1.34rem);
  line-height: 1.32;
}

#fullArticle h4 {
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.35;
}

#fullArticle p,
#fullArticle div,
#fullArticle li,
#fullArticle dd,
#fullArticle table,
#fullArticle blockquote {
  color: var(--color-text);
  max-width: 72ch;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle pre,
#fullArticle blockquote,
#fullArticle table {
  margin: 0 0 var(--space-md);
}

#fullArticle ul,
#fullArticle ol {
  padding-left: 1.35rem;
}

#fullArticle li + li {
  margin-top: var(--space-sm);
}

#fullArticle blockquote {
  margin-left: 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface-alt);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

/* FAQ component classes for article HTML blocks */
.kb-faq-question {
  margin: var(--space-lg) 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-primary);
  background: #edf7ff;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

.kb-faq-answer {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) 0 var(--space-md) var(--space-md);
  border-left: 2px solid #d9e9f4;
  color: var(--color-text);
}

/* Generic callout component */
.kb-callout {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
}

.kb-callout p:last-child {
  margin-bottom: 0;
}

.kb-callout--info {
  background: #edf8ff;
  border-left-color: var(--color-primary);
}

.kb-callout--warning {
  background: #fff7e8;
  border-color: #f6dfaa;
  border-left-color: var(--color-warning);
}

.kb-callout--warning strong {
  color: #875b00;
}

/* Step-by-step procedure component */
.kb-steps {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  counter-reset: kb-step;
}

.kb-steps > li {
  list-style: none;
  counter-increment: kb-step;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: var(--space-md);
}

.kb-steps > li:last-child {
  margin-bottom: 0;
}

.kb-steps > li::before {
  content: counter(kb-step);
  position: absolute;
  left: 0;
  top: 0.02rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Code and preformatted text */
#fullArticle code,
#fullArticle pre,
.kb-code,
code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

#fullArticle :not(pre) > code,
.contentWrapper :not(pre) > code,
.kb-callout :not(pre) > code {
  display: inline;
  padding: 0.1rem 0.38rem;
  border-radius: 5px;
  background: #edf3f8;
  border: 1px solid #d9e4ed;
  color: #113042;
  font-size: 0.92em;
  word-break: break-word;
}

#fullArticle pre,
.contentWrapper pre,
pre.kb-code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-medium);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  padding: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

#fullArticle pre code,
.contentWrapper pre code,
pre.kb-code code {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre;
}

/* Sidebar on article pages */
#sidebar h3 {
  margin-top: 0;
  font-size: 1.02rem;
  color: var(--color-text);
}

#sidebar .nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar .nav-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-small);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
}

#sidebar .nav-list li.active a,
#sidebar .nav-list li a:hover,
#sidebar .nav-list li a:focus {
  color: var(--color-primary-strong);
  border-color: #d5e8f9;
  background: #f3faff;
  text-decoration: none;
}

/* Footer */
footer,
#contentArea footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

#contentArea footer::before {
  content: "Falls du hier noch keine Antwort findest, wende dich bitte an unser Support Team unter: support@hydrop-systems.com";
  display: block;
  margin-bottom: var(--space-md);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-small);
  border: 1px solid #d5e8f7;
  background: #f2f9ff;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Responsive behavior */
@media (max-width: 1024px) {
  .most-pop-articles .popArticles,
  .most-pop-articles.two-col .popArticles {
    grid-template-columns: 1fr;
  }

  .category-list,
  .category-list.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #contentArea .row-fluid {
    gap: var(--space-lg);
  }
}

@media (max-width: 840px) {
  #contentArea .row-fluid {
    display: block;
  }

  #main-content,
  #sidebar {
    float: none;
  }

  #sidebar {
    width: 100%;
    margin-top: var(--space-xl);
  }

  .contentWrapper,
  #fullArticle p,
  #fullArticle div,
  #fullArticle li,
  #fullArticle dd,
  #fullArticle table,
  #fullArticle blockquote {
    max-width: none;
  }
}

@media (max-width: 640px) {
  #docsSearch {
    padding-top: var(--space-lg);
  }

  #searchBar {
    border-radius: var(--radius-medium);
    padding: var(--space-xs);
    gap: var(--space-xs);
  }

  #searchBar .search-query {
    min-width: 0;
    height: 50px;
    padding: 0 var(--space-md);
    font-size: 0.96rem;
  }

  #searchBar button {
    height: 46px;
    margin-right: 0;
    padding: 0 14px;
  }

  #searchBar button span {
    display: none;
  }

  #contentArea > .category-list,
  #contentArea > hr.sep,
  #contentArea > footer {
    width: 100%;
  }

  .category-list,
  .category-list.two-col {
    grid-template-columns: 1fr;
  }

  #fullArticle .title,
  #fullArticle h1 {
    font-size: 1.65rem;
  }

  #main-content #categoryHead {
    padding: var(--space-md) 0 var(--space-sm);
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "desc"
      "sort";
  }

  #main-content .articleList {
    padding: 0;
  }

  #main-content #categoryHead .sort {
    justify-self: start;
    width: 100%;
  }

  #main-content #categoryHead #sortBy {
    width: 100%;
    max-width: none;
  }

  #main-content .articleList li a {
    min-height: 44px;
    padding-left: calc(var(--space-lg) + 12px);
  }

  #main-content .articleList li a i.icon-article-doc {
    left: calc(var(--space-sm) + 2px);
  }

  .kb-faq-question,
  .kb-callout,
  .kb-steps,
  #fullArticle pre,
  .contentWrapper pre,
  pre.kb-code {
    padding: var(--space-md);
  }
}