/* ============================================
   DIPUENTES - HelpScout Docs - Custom CSS
   Brand: #007b43 - Premium - Minimalistisch

   Struktursystem 1:1 aus HelpScouts eigenem Design-System übernommen
   (docs.helpscout.com's "hs-docs-site-2024.css" + das per @import
   eingebundene markenweite "evolution.css"), Farben & Schriftarten
   sind DIPUENTES. Kein eigenes, geratenes Spacing/Radius-Raster mehr -
   eine einzige fluid Skala für die ganze Datei.
   ============================================ */

:root {
    /* --- FARBEN (DIPUENTES-Branding) --- */
    --dp-color-brand: #007b43;
    --dp-color-brand-dark: #005f34;
    /* --dp-color-ink bleibt Hintergrundfarbe (Nav/Footer/Codeblock) -
       NICHT für Text verwenden, dafür --dp-color-text. */
    --dp-color-ink: #111111;
    --dp-color-ink-soft: #1f1f1f;
    /* Textfarbe = eure echte Website-Farbe (dipuentes.com nutzt
       rgb(45,45,45)). Gilt für Fließtext UND Überschriften. */
    --dp-color-text: #2d2d2d;
    --dp-color-text-secondary: #2d2d2d;
    --dp-color-text-muted: #9a9a94;
    --dp-color-border: #e8e8e6;
    --dp-color-border-strong: #d4d4d0;
    --dp-color-surface: #f0f0f0;
    --dp-color-surface-alt: #f4f4f2;
    --dp-color-white: #ffffff;

    /* --- SCHRIFTARTEN (DIPUENTES-Branding) ---
       Satoshi & JetBrains Mono werden über Fontshare im "Headers"-
       Custom-Code-Feld von HelpScout geladen (zwei <link>-Tags auf
       api.fontshare.com). Direkt auf Systemfonts zurückfallen, falls
       (noch) nicht geladen - keine Zwischenstufen wie Inter/Inconsolata. */
    --dp-font-family:
        "Satoshi",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    --dp-font-family-mono:
        "JetBrains Mono",
        ui-monospace,
        SFMono-Regular,
        "Menlo",
        "Consolas",
        monospace;

    /* --- FLUID-SKALA ---
       1:1 aus HelpScouts "evolution.css" übernommen: ein einziger
       Basiswert (clamp(), skaliert leicht mit der Viewport-Breite),
       aus dem Spacing, Schriftgrößen, Radius und Control-Höhen per
       Multiplikation abgeleitet werden. Kein Pixel-Wert ist mehr frei
       erfunden - jeder Multiplikator ist HelpScouts eigener Wert. */
    --dp-base-unit: clamp(0.5rem, calc(0.653vw + 0.347rem), 1rem);

    /* Grobe, semantische Stufen (Layout-Rhythmus: Sektionen, Hero, Cards) */
    --dp-space-xs: calc(var(--dp-base-unit) * 1);
    --dp-space-s: calc(var(--dp-base-unit) * 2);
    --dp-space-m: calc(var(--dp-base-unit) * 3);
    --dp-space-l: calc(var(--dp-base-unit) * 5);
    --dp-space-xl: calc(var(--dp-base-unit) * 8);
    --dp-space-2xl: calc(var(--dp-base-unit) * 13);

    /* Feine Zwischenstufen (Nav-Gaps, Control-Innenabstände) */
    --dp-space-base-0-5: calc(var(--dp-base-unit) * 0.5);
    --dp-space-base-0-75: calc(var(--dp-base-unit) * 0.75);
    --dp-space-base-1-5: calc(var(--dp-base-unit) * 1.5);
    --dp-space-base-2-5: calc(var(--dp-base-unit) * 2.5);

    --dp-font-size-xs: clamp(0.625rem, calc(0.163vw + 0.587rem), 0.75rem);
    --dp-font-size-s: clamp(0.75rem, calc(0.163vw + 0.712rem), 0.875rem);
    --dp-font-size-m: clamp(0.875rem, calc(0.163vw + 0.837rem), 1rem);
    --dp-font-size-l: clamp(1rem, calc(0.163vw + 0.962rem), 1.125rem);
    --dp-font-size-xl: clamp(1.125rem, calc(0.163vw + 1.087rem), 1.25rem);
    --dp-font-size-2xl: clamp(1.25rem, calc(0.327vw + 1.173rem), 1.5rem);
    --dp-font-size-3xl: clamp(1.5rem, calc(0.490vw + 1.385rem), 1.875rem);
    --dp-font-size-4xl: clamp(1.75rem, calc(0.653vw + 1.597rem), 2.25rem);
    --dp-font-size-5xl: clamp(3rem, calc(0.625vw + 2.375rem), 3.375rem);

    /* Control-Höhen exakt nach HelpScouts Formel:
       (Faktor * Schriftgröße * 2) + (1.2 * Schriftgröße) */
    --dp-control-height-s: calc(0.5 * var(--dp-font-size-s) * 2 + (1.2 * var(--dp-font-size-s)));
    --dp-control-height-m: calc(0.75 * var(--dp-font-size-m) * 2 + (1.2 * var(--dp-font-size-m)));
    --dp-control-height-l: calc(1 * var(--dp-font-size-l) * 2 + (1.2 * var(--dp-font-size-l)));
    --dp-control-padding-x-m: calc(1.25 * var(--dp-font-size-s));
    --dp-control-padding-x-l: calc(1.25 * var(--dp-font-size-m));

    /* Schatten (rgba-Basis = HelpScouts --color--charcoal-900, #314351).
       Hover-Zustand von Cards nutzt zusätzlich einen markenfarbenen
       Schatten statt HelpScouts neutralem Grau - Struktur von
       HelpScout, Farbe von DIPUENTES. */
    --dp-elevation-s:
        0px 1px 1px 0px rgba(49, 67, 81, 0.02),
        0px 2px 2px 0.5px rgba(49, 67, 81, 0.04),
        0px 4px 4px 1px rgba(49, 67, 81, 0.06);
    --dp-elevation-m: var(--dp-elevation-s), 0px 8px 8px 1.5px rgba(49, 67, 81, 0.08);
    --dp-elevation-brand: 0 2px 12px rgba(0, 123, 67, 0.12);

    /* Radius: gleiche Formel wie HelpScout (Basiswert * Faktor). */
    --dp-radius-xs: calc(var(--dp-base-unit) * 0.125);
    --dp-radius-s: calc(var(--dp-base-unit) * 0.25);
    --dp-radius-m: calc(var(--dp-base-unit) * 0.375);
    --dp-radius-l: calc(var(--dp-base-unit) * 0.5);
    --dp-radius-2xl: calc(var(--dp-base-unit) * 1);

    /* Logo & Nav-Geometrie: Höhe wird berechnet statt hart verdrahtet.
       HelpScouts eigene Formel nutzt oben/unten unterschiedlich viel
       Padding (S oben, M unten) - für deren breites Wordmark-Logo
       gedacht. Bei unserem runden Icon-Logo wirkte das sichtbar
       "nicht mittig" - deshalb hier bewusst symmetrisch (S oben/unten). */
    --dp-logo-height: 3rem;
    --dp-nav-height: calc(var(--dp-space-s) * 2 + var(--dp-logo-height));

    /* Content-Breite: HelpScout selbst nutzt zufällig denselben
       Maximalwert (1280px = eure eigene Website-Breite), zusätzlich
       mit deren fluid min()-Formel für sauberen Randabstand auch
       zwischen den Breakpoints, nicht nur einen festen Umbruchpunkt. */
    --dp-container-width: min(calc(100vw - var(--dp-space-m) * 2), 1280px);
}

/* --- TYPOGRAFIE --- */

/* HelpScouts Basis-Theme gibt body ab 768px "padding-left/right:20px"
   mit (klassisches Bootstrap-2-Gutter-Pattern) - dadurch war #mainNav
   auf Mobile links/rechts eingerückt statt volle Breite zu zeigen.
   Unsere eigenen Komponenten (Nav, Content) regeln ihre Ränder längst
   selbst über max-width/padding, daher body-Padding komplett auf 0. */
body {
    font-family: var(--dp-font-family);
    color: var(--dp-color-text);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- HEADER / NAVIGATION ---
   Struktur 1:1 aus HelpScouts eigenem Desktop-Nav-Pattern (deren
   "@media (min-width: 1140px)"-Block) übernommen: line-height der
   Links = Logo-Höhe (übernimmt die vertikale Zentrierung, keine
   künstlich aufgeblasene line-height mehr, die bei Zeilenumbruch
   die ganze Nav sprengt), Abstand zwischen Items per "gap" statt
   Innenabstand pro Link, keine Farbverläufe/Unterstreichungen im
   aktiven Zustand - nur Farbe + Schriftgewicht, wie im Original. */

#mainNav {
    background-color: var(--dp-color-ink) !important;
    border-bottom: 1px solid var(--dp-color-ink-soft) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: var(--dp-nav-height) !important;
}

#mainNav .navbar-inner {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: var(--dp-nav-height) !important;
}

#mainNav .navbar-inner::before,
#mainNav .navbar-inner::after {
    content: none !important;
}

#mainNav .container-fluid {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: var(--dp-nav-height) !important;
    padding: var(--dp-space-s) 0 !important;
    max-width: var(--dp-container-width) !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

#mainNav .container-fluid::before,
#mainNav .container-fluid::after {
    content: none !important;
}

#mainNav .brand {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

#mainNav .brand img {
    height: var(--dp-logo-height) !important;
    width: var(--dp-logo-height) !important;
}

#mainNav .nav-collapse {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    position: static !important;
}

/* HelpScouts Basis-Theme setzt ab 769px "@media (min-width:769px)
   .navbar .nav { position: absolute }" - dadurch fällt .nav aus dem
   Flex-Fluss von .container-fluid und wird stattdessen frei/mittig
   positioniert. Hier wie schon beim Such-Button explizit zurückgesetzt,
   damit unser Flexbox-Layout (justify-content:space-between) greift. */
#mainNav .nav {
    position: static !important;
    float: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: var(--dp-space-base-0-5) !important;
    margin: 0 !important;
}

/* Ab ca. 1320px breiterem Desktop etwas mehr Luft zwischen den
   Nav-Punkten - HelpScout macht denselben Sprung an derselben Stelle. */
@media (min-width: 1320px) {
    #mainNav .nav {
        gap: var(--dp-space-base-1-5) !important;
    }
}

#mainNav .nav > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#mainNav .nav > li > a {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 1rem !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0 var(--dp-space-base-0-75) !important;
    line-height: var(--dp-logo-height) !important;
    transition: color 0.2s ease;
    display: block !important;
}

#mainNav .nav > li > a:hover,
#mainNav .nav > li.active > a {
    color: var(--dp-color-white) !important;
    background: transparent !important;
}

#mainNav .nav > li.active > a {
    font-weight: 600;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Jeder Nav-Link bringt aus HelpScouts Basis-Theme ein <b class="caret">
   für Dropdown-Untermenüs mit. Wir nutzen diese Untermenü-Funktion
   nicht, daher komplett ausgeblendet (HelpScout selbst blendet den
   Caret zumindest beim aktiven Item aus: ".navbar .nav .active .caret
   { display:none }" - wir gehen einen Schritt weiter und lassen ihn
   nirgends mehr sichtbar, passend zum minimalistischen Nav-Look). */
#mainNav .nav .caret {
    display: none !important;
}

/* Contact-Link auf Desktop ausgeblendet (Wunsch: keine Contact-Nav
   auf Desktop). #contactMobile war ohnehin schon ein Duplikat von
   #contact und blieb daher separat ausgeblendet. Sobald die Mobile-Phase
   ansteht: prüfen, ob/wie ein Contact-Zugang dort zurückkommen soll. */
#mainNav #contact,
#mainNav #contactMobile {
    display: none !important;
}

/* --- HEADER / NAVIGATION: MOBILE (Hamburger-Menü) ---
   Der bisherige Bug: ".nav-collapse" blieb beim Öffnen als drittes
   Flex-Item INNERHALB von ".container-fluid" (justify-content:
   space-between verteilte Logo / Hamburger / geöffnetes Menü
   nebeneinander in der Leiste), statt als Panel darunter zu
   erscheinen - dadurch wirkten auch die Links "wild angeordnet".
   Nachgebaut nach HelpScouts eigenem Mobile-Pattern (unser DOM ist
   strukturell identisch: ".nav-collapse > nav > ul.nav > li > a"). */
@media (max-width: 768px) {
    /* HelpScouts Basis-Theme gibt ".container-fluid" ein fest
       eincodiertes "position:relative" mit (in derselben Regel wie das
       alte max-width:1080px, das wir schon überschrieben hatten - nur
       "position" dabei übersehen). Dadurch positionierte sich
       .nav-collapse relativ zu .container-fluid (das durch unsere
       eigene max-width/margin:auto-Formel eingerückt ist) statt
       relativ zu #mainNav (volle Breite) - sichtbar als Rand links/
       rechts am geöffneten Menü. */
    #mainNav {
        position: relative !important;
    }

    #mainNav .container-fluid {
        position: static !important;
    }

    /* Sobald .nav-collapse (siehe unten) per position:absolute aus dem
       Flex-Fluss von .container-fluid genommen wird, bleiben nur noch
       .brand und .btn-navbar als Flex-Items übrig - "justify-content:
       space-between" positioniert den Button dadurch von selbst ganz
       rechts, vertikal zentriert. Der Button hatte aber zusätzlich
       noch ein eigenes "position:absolute; top:0; right:10px" aus dem
       Basis-Theme, das unseren Flexbox-Ansatz komplett ausgehebelt
       hat - deshalb hier explizit auf "static" zurückgesetzt. */
    #mainNav .btn-navbar {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #mainNav .btn-navbar .icon-bar {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        margin: 0 !important;
        background: var(--dp-color-white) !important;
        border-radius: 1px !important;
        box-shadow: none !important;
    }

    /* .nav-collapse wird zum eigenständigen Dropdown-Panel unter der
       Nav-Leiste, statt wie auf Desktop inline in der Flex-Row zu
       sitzen. #mainNav (oben) ist der positionierte Anker dafür. */
    #mainNav .nav-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        display: block !important;
        background: var(--dp-color-white) !important;
        box-shadow: var(--dp-elevation-m) !important;
        z-index: 20 !important;
    }

    #mainNav .nav-collapse nav {
        display: block !important;
    }

    #mainNav .nav {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: var(--dp-space-xs) 0 !important;
    }

    #mainNav .nav > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #mainNav .nav > li > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        color: var(--dp-color-text) !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        padding: var(--dp-space-xs) var(--dp-space-m) !important;
    }

    #mainNav .nav > li > a:hover,
    #mainNav .nav > li.active > a {
        color: var(--dp-color-brand) !important;
        background: var(--dp-color-surface) !important;
    }
}

/* --- SEARCH HERO --- */

#docsSearch {
    background-color: var(--dp-color-surface) !important;
    border-bottom: 1px solid var(--dp-color-border) !important;
    padding: var(--dp-space-xl) var(--dp-space-m) !important;
}

#docsSearch h1 {
    font-family: var(--dp-font-family);
    font-size: var(--dp-font-size-4xl) !important;
    font-weight: 600 !important;
    color: var(--dp-color-text) !important;
    letter-spacing: -0.02em;
    margin: 0 0 var(--dp-space-s) !important;
}

#searchBar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    max-width: 616px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    height: var(--dp-control-height-l) !important;
}

/* HelpScouts Basis-Theme positioniert #searchBar button absolut
   (position:absolute; right:-1px) und zieht #searchBar .search-query
   per negativem margin-right darunter - ein Bootstrap-2-Pattern für
   einen Button, der über dem Input schwebt. Das kollidiert mit unserem
   Flexbox-Layout: der Button fällt aus dem Flex-Fluss, das Input
   streckt sich durch den negativen Margin über den Container hinaus.
   Beides unten explizit zurückgesetzt, damit Flexbox die Kontrolle hat.

   Wichtig: #searchBar wird von HelpScout für ZWEI unterschiedliche
   Such-Widgets wiederverwendet - die große Hero-Suche auf der
   Startseite UND die kompakte Sidebar-Suche (Klasse ".sm") auf
   Collection-/Category-/Artikel-Seiten. Die Regeln unten mit
   ":not(.sm)" greifen nur für die große Variante. */
#searchBar:not(.sm) .search-query {
    background: var(--dp-color-white) !important;
    border: 1px solid var(--dp-color-border-strong) !important;
    border-right: none !important;
    box-shadow: none !important;
    color: var(--dp-color-text) !important;
    font-size: var(--dp-font-size-m) !important;
    border-radius: var(--dp-radius-m) 0 0 var(--dp-radius-m) !important;
    height: var(--dp-control-height-l) !important;
    line-height: var(--dp-control-height-l) !important;
    padding: 0 var(--dp-control-padding-x-l) !important;
    margin-right: 0 !important;
    flex: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#searchBar .search-query::placeholder {
    color: var(--dp-color-text-muted) !important;
}

#searchBar .search-query:focus {
    outline: none !important;
    border-color: var(--dp-color-brand) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 67, 0.15) !important;
}

#searchBar:not(.sm) button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    background: var(--dp-color-brand) !important;
    border: none !important;
    color: var(--dp-color-white) !important;
    font-size: var(--dp-font-size-l) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    height: var(--dp-control-height-l) !important;
    padding: 0 var(--dp-control-padding-x-l) !important;
    border-radius: 0 var(--dp-radius-m) var(--dp-radius-m) 0 !important;
    line-height: var(--dp-control-height-l) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
    transition: background 0.2s ease;
}

#searchBar:not(.sm) button:hover {
    background: var(--dp-color-brand-dark) !important;
    color: var(--dp-color-white) !important;
}

/* Kompakte Sidebar-Suche (Collection-/Category-/Artikel-Seiten):
   deutlich kleiner als die Hero-Suche. Button bleibt dezent/icon-only
   statt vollem grünem Button - genau wie im HelpScout-Referenz-CSS
   ("#searchBar.sm button { background: none }"). Margin-bottom (40px)
   ist bei HelpScout selbst ein hartkodierter Wert, kein Token -
   exakt übernommen statt einen Token draufzupressen. */
#searchBar.sm {
    height: var(--dp-control-height-m) !important;
    margin-bottom: 40px !important;
}

#searchBar.sm .search-query {
    background: var(--dp-color-white) !important;
    border: 1px solid var(--dp-color-border-strong) !important;
    box-shadow: none !important;
    color: var(--dp-color-text) !important;
    font-size: var(--dp-font-size-s) !important;
    border-radius: var(--dp-radius-s) !important;
    height: var(--dp-control-height-m) !important;
    line-height: var(--dp-control-height-m) !important;
    padding: 0 var(--dp-control-padding-x-m) !important;
    margin: 0 !important;
    flex: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#searchBar.sm button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: var(--dp-control-height-m) !important;
    width: var(--dp-control-height-m) !important;
    padding: 0 !important;
    color: var(--dp-color-text-muted) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

#searchBar.sm button:hover {
    background: none !important;
}

/* Autocomplete-Ergebnisliste unter der Suche (#serp-dd) - existiert im
   DOM, war bisher komplett unstyled und fiel dadurch aus dem Look. */
/* #serp-dd ist bereits direktes Kind von #searchBar (position:relative)
   - "top: 100%" setzt es also relativ zur tatsächlichen Höhe der
   Suchleiste, egal ob große Hero-Suche oder kompakte Sidebar-Suche
   (.sm), und egal wie die fluid Schriftgröße die Höhe gerade berechnet.
   Ein fester px-Wert (wie zuvor "top: 94px") passt dagegen immer nur
   zufällig für eine einzige Kombination aus Breite/Variante. */
#serp-dd {
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-top: 0 !important;
    border-radius: var(--dp-radius-s) !important;
    background: var(--dp-color-white) !important;
    box-shadow: var(--dp-elevation-m) !important;
    border: 1px solid var(--dp-color-border) !important;
}

#serp-dd .result > li a {
    padding: var(--dp-space-xs) var(--dp-space-s) !important;
    font-size: var(--dp-font-size-m) !important;
    color: var(--dp-color-text) !important;
}

#serp-dd .result > li a:hover,
#serp-dd .result > li.active {
    background: var(--dp-color-surface) !important;
    color: var(--dp-color-brand) !important;
}

/* --- HAUPTBEREICH / CONTENT-BREITE --- */

/* HelpScouts Basis-Theme begrenzt #contentArea (wie auch die Nav) über
   die generische .container-fluid-Klasse auf 1080px. Hier auf die
   gleiche Content-Breite wie dipuentes.com angehoben. */
#contentArea {
    max-width: var(--dp-container-width) !important;
}

/* Abstand zwischen Such-Hero/Nav und dem eigentlichen Content
   (main-content + sidebar) - HelpScout nutzt hier "--spacing--M". */
#contentArea .row-fluid {
    padding-top: var(--dp-space-m) !important;
}

/* Homepage: jede Collection-Gruppe ("Pre-sales", "Webflow", ...) ist
   ein eigener ".collection-category"-Abschnitt mit eigenem h2 - lief
   bisher komplett unstyled (Browser-Default), da unsere alte Regel auf
   ".docsSection"/"h2.section-title" zielte, was es im DOM nie gab. */
.collection-category h2 {
    font-size: var(--dp-font-size-2xl) !important;
    font-weight: 600;
    color: var(--dp-color-text) !important;
    letter-spacing: -0.01em;
    margin: 0 0 var(--dp-space-s) !important;
    padding: 0;
}

.collection-category h2 a,
.collection-category h2 a:hover {
    color: var(--dp-color-text) !important;
    text-decoration: none !important;
    border-bottom: none;
}

/* Abstand zwischen den Collection-Gruppen (erste Gruppe braucht keinen
   Extra-Abstand, der kommt schon über #contentArea .row-fluid). */
.collection-category + .collection-category {
    margin-top: var(--dp-space-xl);
}

/* --- CATEGORY / COLLECTION CARDS ---
   Schatten-basierte "Card"-Optik statt Rahmen - HelpScouts eigenes
   Pattern (border:none, elevation-Schatten, kleiner Radius). Hover
   nutzt einen markenfarbenen statt neutralen Schatten (Branding). */

.twoCol .collection,
.threeCol .collection,
.category-list .category {
    background: var(--dp-color-white) !important;
    border: 1px solid #cecece;
    border-radius: var(--dp-radius-s) !important;
    transition: box-shadow 0.2s ease;
    padding: var(--dp-space-s) !important;
}

.twoCol .collection:hover,
.threeCol .collection:hover,
.category-list .category:hover {
    background: #f0f0f0 !important;
}

.twoCol .collection h3,
.threeCol .collection h3,
.category-list .category h3 {
    font-size: var(--dp-font-size-l) !important;
    font-weight: 600;
    color: var(--dp-color-text) !important;
    margin-bottom: var(--dp-space-xs) !important;
}

.twoCol .collection .article-count,
.threeCol .collection .article-count,
.category-list .category .article-count,
.twoCol .collection a.article-count,
.threeCol .collection a.article-count {
    color: var(--dp-color-brand) !important;
    font-size: var(--dp-font-size-m) !important;
    font-weight: 500;
}

/* --- COLLECTION / CATEGORY-SEITE ---
   HelpScouts eigenes Pattern: #main-content IST die Karte (Hintergrund,
   Schatten, Radius), .contentWrapper selbst ist nur noch ein
   Padding-loser innerer Container. */

/* box-shadow allein reichte oben nicht als sichtbare Kante (lief
   Weiß-in-Weiß gegen den Bereich darüber) - zusätzlich eine subtile
   Trennlinie oben, garantiert sichtbar unabhängig vom Schatten. */
#main-content {
    position: relative !important;
    background: var(--dp-color-white) !important;
    padding: var(--dp-space-m) !important;
    border-top: 1px solid var(--dp-color-border) !important;
    border-radius: var(--dp-radius-m) !important;
    box-shadow: var(--dp-elevation-m) !important;
}

#main-content .contentWrapper {
    padding: 0 !important;
    border: none !important;
}

/* Größe 1:1 aus HelpScouts ".contentWrapper h1" (font-size--2XL). */
#main-content h1 {
    font-size: var(--dp-font-size-2xl) !important;
    font-weight: 600 !important;
    color: var(--dp-color-text) !important;
    letter-spacing: -0.02em;
    margin: 0 0 var(--dp-space-s) !important;
}

/* Größe/Padding/Radius 1:1 nach HelpScouts eigenem Sort-Select
   übernommen (deren "#categoryHead .sort select"), nur ohne deren
   Pfeil-Icon als Hintergrundbild - der native Browser-Pfeil reicht. */
#main-content select#sortBy {
    font-family: inherit !important;
    font-size: var(--dp-font-size-s) !important;
    color: var(--dp-color-text) !important;
    padding: 0 var(--dp-control-padding-x-m) !important;
    height: var(--dp-control-height-m) !important;
    line-height: var(--dp-control-height-m) !important;
    border: 1px solid var(--dp-color-border-strong) !important;
    border-radius: var(--dp-radius-s) !important;
    box-shadow: none !important;
}

/* Artikelliste 1:1 nach HelpScouts eigenem Pattern übernommen: eine
   Trennlinie ÜBER der ganzen Liste (nicht zwischen jedem Eintrag) plus
   Flex+Gap statt einzelner Margins. */
.articleList {
    border-top: 1px solid var(--dp-color-border);
    padding-top: var(--dp-space-s) !important;
    display: flex;
    flex-direction: column;
    gap: var(--dp-space-xs);
    margin: 0 !important;
    font-size: var(--dp-font-size-m);
}

.articleList li {
    padding: 0 !important;
    margin: 0 !important;
}

/* Generischer Selektor wie im HelpScout-Original (".articleList a i"),
   trifft jedes Icon vor dem Linktext, unabhängig von der Icon-Klasse. */
.articleList a i {
    display: none !important;
}

.articleList li a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--dp-font-size-l) !important;
    line-height: 1.6;
    font-weight: 500;
    color: var(--dp-color-text) !important;
}

#sidebar {
    margin-top: 0 !important;
}

/* "Categories"-Label: HelpScout nutzt hier bewusst KEIN Uppercase/Bold
   (nur "text-transform: capitalize", normales Schriftgewicht) - haben
   wir 1:1 übernommen. JetBrains Mono bleibt wie besprochen unser Wert
   anstelle von HelpScouts eigenem "Geist Mono". Der margin-bottom-Wert
   (20px) ist bei HelpScout selbst hartkodiert, kein Token. */
#sidebar h3 {
    font-family: var(--dp-font-family-mono) !important;
    /* Bewusst fix statt fluid (nicht var(--dp-font-size-s), das läge
       hier bei ~14px) - 15px exakt wie gewünscht. */
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    text-transform: capitalize;
    letter-spacing: normal;
    line-height: 1.6;
    color: var(--dp-color-text) !important;
    margin: 0 0 20px !important;
}

#sidebar .nav-list {
    margin: 0 !important;
}

#sidebar .nav-list li {
    margin: 0 !important;
}

#sidebar .nav-list li a {
    display: block !important;
    font-size: var(--dp-font-size-m) !important;
    line-height: 1.6;
    font-weight: 400 !important;
    color: var(--dp-color-text) !important;
    padding: var(--dp-radius-s) 0 !important;
    margin: 0 !important;
    text-decoration: none;
}

/* Hover ändert nur die Unterstreichung, nie das Font-Weight - das
   bleibt ausschließlich dem aktiven Zustand vorbehalten. HelpScouts
   Basis-Theme setzt bei Hover selbst ein font-weight, das unsere alte
   Regel ohne !important überschrieben hat - deshalb hier explizit
   erzwungen, in allen vier Kombinationen aus Hover/Active. */
#sidebar .nav-list li a:hover {
    font-weight: 400 !important;
    color: var(--dp-color-text) !important;
    text-decoration: underline;
}

#sidebar .nav-list li.active a {
    font-weight: 500 !important;
    color: var(--dp-color-text) !important;
}

#sidebar .nav-list li.active a:hover {
    font-weight: 500 !important;
    color: var(--dp-color-text) !important;
    text-decoration: underline;
}

/* --- ARTIKEL-SEITE --- */

/* Kein Abstand mehr UNTER den Überschriften (Text darunter rückt
   dicht auf), stattdessen ein kleiner Abstand DARÜBER (Trennung vom
   vorherigen Absatz). */

#fullArticle .title {
    font-size: 28px !important;
     font-weight: 600;
     color: var(--dp-color-text) !important;
     margin: 0rem 0 0.5rem !important;
     padding-right: 22px;
   }

#fullArticle h1 {
    font-size: var(--dp-font-size-2xl) !important;
    font-weight: 600;
    color: var(--dp-color-text) !important;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 3rem 0 0.75rem !important;
}

#fullArticle h2 {
    font-size: var(--dp-font-size-xl) !important;
    font-weight: 600;
    color: var(--dp-color-text) !important;
    margin: var(--dp-space-xs) 0 0.75rem !important;
    letter-spacing: -0.01em;
}

#fullArticle h3 {
    font-size: var(--dp-font-size-l) !important;
    font-weight: 600;
    color: var(--dp-color-text) !important;
    margin: var(--dp-space-xs) 0 0.75rem !important;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    font-size: 1.125rem !important;
    font-weight: 400;
    color: var(--dp-color-text-secondary) !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem;
}

#fullArticle table td, #fullArticle table th {
    border-top: 1px solid #2d2d2d !important;
}

/* Textfarbe auf Weiß gesetzt, da #2d2d2d als Hintergrund sonst mit der
   normalen (ebenfalls dunklen) Fließtextfarbe unlesbar wäre. */
#fullArticle table th {
    background-color: #2d2d2d !important;
    color: var(--dp-color-white) !important;
}

/* Fließtext-Links: unterstrichen, Textfarbe statt Markenfarbe - bei
   Hover verschwindet nur die Unterstreichung, Farbe bleibt gleich. */
#fullArticle a {
    color: var(--dp-color-text) !important;
    text-decoration: underline;
}

#fullArticle a:hover {
    color: var(--dp-color-text) !important;
    text-decoration: none;
}

#fullArticle code {
    font-family: var(--dp-font-family-mono) !important;
    background: var(--dp-color-surface-alt) !important;
    border: 1px solid var(--dp-color-border) !important;
    color: var(--dp-color-text) !important;
    font-size: 0.875em !important;
    padding: 2px 6px !important;
    border-radius: var(--dp-radius-s) !important;
}

#fullArticle pre {
    font-family: var(--dp-font-family-mono) !important;
    background: var(--dp-color-ink) !important;
    border: none !important;
    border-radius: var(--dp-radius-s) !important;
    padding: var(--dp-space-s) !important;
}

#fullArticle pre code {
    background: transparent !important;
    border: none !important;
    color: var(--dp-color-border) !important;
}

/* Manuelle Trennlinien im Artikeltext (Markdown "---"). */
#fullArticle hr[role="separator"] {
    border: none;
    border-top: 1px solid var(--dp-color-text);
}

/* Druck-Button oben am Artikel (existiert im DOM, war unstyled).
   #main-content ist bereits position:relative (siehe oben), dient
   hier als Anker für top/right. */
#main-content .printArticle {
    position: absolute !important;
    top: 10px !important;
    right: 0 !important;
    color: var(--dp-color-text-muted) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

#main-content .printArticle:hover {
    color: var(--dp-color-brand) !important;
}

/* Artikel-Fußbereich: "Noch Hilfe nötig? Contact Us"-Prompt +
   Zeitstempel der letzten Aktualisierung. Existiert wirklich im DOM
   (anders als die zuvor gepflegten, aber toten Selektoren für
   Breadcrumb/Bewertung/"Related Articles" - diese drei Features sind
   in eurem HelpScout-Account offenbar nicht aktiviert und wurden
   deshalb entfernt; einfach nachzurüsten, sobald ihr sie einschaltet). */
#main-content .articleFoot {
    margin-top: var(--dp-space-m) !important;
    padding-top: var(--dp-space-s) !important;
    border-top: 1px solid var(--dp-color-border) !important;
}

#main-content .articleFoot .icon-contact {
    color: var(--dp-color-brand) !important;
}

/* HelpScouts Basis-Theme setzt für ".articleFoot p, .articleFoot time"
   standardmäßig Georgia kursiv - hier grundsätzlich zurückgesetzt,
   die spezifischeren Regeln unten (.help / .lu) justieren dann Größe/
   Farbe/Font pro Element weiter. */
#main-content .articleFoot p,
#main-content .articleFoot time {
    font-family: var(--dp-font-family) !important;
    font-style: normal !important;
}

#main-content .articleFoot .help {
    font-size: var(--dp-font-size-m) !important;
    color: var(--dp-color-text-secondary) !important;
    margin: 0 0 var(--dp-space-xs) !important;
}

/* Textfarbe statt Markengrün - Unterstreichung bleibt als
   Link-Kennzeichnung, verschwindet bei Hover (gleiches Pattern wie
   die Fließtext-Links in #fullArticle). HelpScouts Basis-Theme gibt
   ".contactUs" zusätzlich einen eigenen "border-bottom: 1px dotted"
   mit - zusammen mit unserer text-decoration ergab das eine doppelte
   Linie, daher hier explizit entfernt. */
#main-content .articleFoot .contactUs {
    color: var(--dp-color-text) !important;
    font-weight: 500;
    text-decoration: underline;
    border-bottom: none !important;
}

#main-content .articleFoot .contactUs:hover {
    color: var(--dp-color-text) !important;
    text-decoration: none;
}

/* Zeitstempel in JetBrains Mono - HelpScout macht das bei sich genauso
   (".articleFoot p, .articleFoot time { font-family: var(--font-family--mono) }"). */
/* HelpScouts Basis-Theme gibt ".lu" ein "float:right" mit - bei
   breiten Viewports sitzt der Zeitstempel dadurch neben dem "Kontakt"-
   Text, bei schmaleren bricht er um. Da ".articleFoot" kein Clearfix
   hat, ragte der umgebrochene Float dann unten aus dem Element raus
   und fraß sich sichtbar ins Padding von #main-content. Float komplett
   entfernt, damit der Zeitstempel bei jeder Breite konsistent als
   eigene Zeile darunter steht statt breitenabhängig zu wechseln. */
#main-content .articleFoot p.lu,
#main-content .articleFoot time.lu {
    display: block;
    float: none !important;
    width: 100%;
    font-family: var(--dp-font-family-mono) !important;
    font-size: var(--dp-font-size-xs) !important;
    color: var(--dp-color-text-muted) !important;
    font-style: normal !important;
    margin-top: 8px !important;
}

/* --- FOOTER ---
   "#footer" gab es im DOM nie (nur ein Element namens "footer" ohne
   ID) - jede bisherige "#footer"-Regel war totes CSS, das Copyright/
   Powered-by lief immer nur mit HelpScouts unstyled Default. Auf
   Element-Selektoren umgestellt, damit es endlich wirkt. */

footer {
    background-color: transparent !important;
    padding: var(--dp-space-s) !important;
}

footer,
footer a {
    color: var(--dp-color-text-muted) !important;
    font-size: var(--dp-font-size-s) !important;
}

/* Etwas kleiner als der Rest des Footers. */
footer p {
    color: var(--dp-color-text-muted) !important;
    font-size: var(--dp-font-size-xs) !important;
}

footer a:hover {
    color: var(--dp-color-text) !important;
}

footer .hs-branding {
    opacity: 0.4;
}