/* ============================================================
   VeloVault · LIGHT ROAD DESIGN
   White · Blue · Yellow

   Design layer only.
   Die bestehenden CSS-Dateien kümmern sich weiter um Layout,
   dieses Stylesheet übernimmt Farben, Flächen und Dekoration.
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

    /* Alte Variablen */
    --bg: #f3f7fb;
    --bg-soft: #eaf2f8;

    --panel: #ffffff;
    --panel-2: #f8fbfe;
    --panel-3: #edf4f9;

    --line: #d6e2eb;
    --line-bright: #b9cddd;

    --text: #183249;
    --muted: #718697;

    --accent: #2478bd;
    --accent-deep: #14598e;

    --good: #49a86c;
    --watch: #d79a20;
    --danger: #d85d5d;

    --shadow:
        0 12px 34px
        rgba(39, 78, 110, .10);

    --radius: 20px;


    /* Neuere VV-Variablen */

    --vv-bg: #f3f7fb;
    --vv-bg-alt: #eaf2f8;
    --vv-bg-deep: #e4edf5;

    --vv-panel: #ffffff;
    --vv-panel-soft: #f7fafc;

    --vv-card: #ffffff;
    --vv-card-light: #f7fafc;

    --vv-surface: #ffffff;
    --vv-surface-strong: #ffffff;
    --vv-surface-soft: #f7fafc;

    --vv-line: #d6e2eb;
    --vv-line-soft: #e5edf3;

    --vv-text: #183249;
    --vv-text-soft: #4c6579;

    --vv-muted: #718697;
    --vv-muted-dark: #8799a7;

    --vv-accent: #2478bd;
    --vv-accent-strong: #14598e;
    --vv-accent-dark: #0e4a79;
    --vv-accent-soft: #e6f1fa;

    --vv-yellow: #f3c84b;
    --vv-yellow-strong: #dbad20;
    --vv-yellow-soft: #fff5ce;

    --vv-highlight: #f3c84b;
    --vv-highlight-strong: #dbad20;
    --vv-highlight-soft: #fff5ce;

    --vv-good: #49a86c;
    --vv-success: #49a86c;
    --vv-watch: #d79a20;
    --vv-warning: #d79a20;
    --vv-danger: #d85d5d;
    --vv-info: #4c95ca;

    --vv-shadow-soft:
        0 7px 22px
        rgba(39, 78, 110, .07);

    --vv-shadow-card:
        0 10px 28px
        rgba(39, 78, 110, .09);

    --vv-shadow-strong:
        0 18px 48px
        rgba(39, 78, 110, .13);

    --vv-radius-xl: 24px;
    --vv-radius-lg: 18px;
    --vv-radius-md: 14px;
    --vv-radius-sm: 10px;

    color-scheme: light;
}


/* ============================================================
   GLOBAL
   ============================================================ */

html {
    background:
        #f3f7fb !important;

    color-scheme:
        light !important;
}


html body {
    background:

        radial-gradient(
            circle
            at 100% 0,
            rgba(36, 120, 189, .08),
            transparent 28rem
        ),

        radial-gradient(
            circle
            at -5% 16%,
            rgba(243, 200, 75, .10),
            transparent 24rem
        ),

        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #f2f7fb 56%,
            #edf4f9 100%
        )

        !important;

    color:
        var(--vv-text) !important;
}


/*
 * Dezente technische Hintergrundlinien.
 */

html body::before {
    content: "";

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    opacity:
        .52;

    background:

        linear-gradient(
            rgba(36,120,189,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(36,120,189,.025) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

}


/*
 * Großes, sehr dezentes Ritzel rechts oben.
 */

html body::after {
    content: "";

    position:
        fixed;

    top:
        115px;

    right:
        -105px;

    z-index:
        0;

    width:
        265px;

    height:
        265px;

    border-radius:
        50%;

    pointer-events:
        none;

    opacity:
        .16;

    background:
        repeating-conic-gradient(
            from 0deg,
            #2478bd 0deg 5deg,
            transparent 5deg 14deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 38%,
            #000 39% 49%,
            transparent 50%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 38%,
            #000 39% 49%,
            transparent 50%
        );
}


html body > * {
    position:
        relative;

    z-index:
        1;
}


html body a {
    color:
        inherit;
}


html body .muted,
html body .help,
html body .hint,
html body small {
    color:
        var(--vv-muted) !important;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

html body h1,
html body h2,
html body h3,
html body h4,
html body strong {
    color:
        var(--vv-text);
}


html body .eyebrow,
html body .section-index {
    color:
        var(--vv-accent) !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

html body .sidebar {
    background:
        rgba(255,255,255,.94) !important;

    border-color:
        var(--vv-line) !important;

    box-shadow:
        10px 0 28px
        rgba(31,72,102,.05) !important;

    backdrop-filter:
        blur(18px);
}


html body .brand-lockup {
    color:
        var(--vv-text) !important;
}


html body .brand-lockup strong {
    color:
        var(--vv-text) !important;
}


html body .brand-lockup small {
    color:
        var(--vv-muted) !important;
}


html body .brand-mark {
    background:
        linear-gradient(
            145deg,
            #ffe47d,
            #f3c84b
        ) !important;

    color:
        #17324a !important;

    border:
        1px solid
        rgba(219,173,32,.48) !important;

    box-shadow:
        0 8px 22px
        rgba(219,173,32,.20) !important;
}


html body .brand-bike {
    stroke:
        #17324a !important;
}


html body .side-rule {
    background:
        var(--vv-line) !important;
}


html body .side-rule span {
    background:
        var(--vv-yellow) !important;
}


html body .sidebar nav a {
    color:
        #567084 !important;

    background:
        transparent !important;

    border:
        1px solid
        transparent !important;
}


html body .sidebar nav a:hover {
    background:
        #eef6fc !important;

    border-color:
        #dbe8f1 !important;

    color:
        var(--vv-accent-strong) !important;
}


html body .sidebar nav a.active {
    background:

        linear-gradient(
            90deg,
            #e7f2fb,
            #fff8db
        ) !important;

    border-color:
        #cde1ef !important;

    color:
        var(--vv-accent-strong) !important;

    box-shadow:
        inset 3px 0
        var(--vv-yellow) !important;
}


html body .sidebar nav a.active span {
    color:
        var(--vv-accent) !important;
}


html body .sidebar nav a span {
    color:
        #9aabba !important;
}


html body .sidebar-slogan {
    color:
        #dfe9f0 !important;
}


html body .sidebar-slogan b {
    color:
        #cadbe6 !important;
}


html body .sidebar-foot {
    border-color:
        var(--vv-line) !important;

    color:
        var(--vv-muted) !important;
}


/* ============================================================
   CONTENT / TOPBAR
   ============================================================ */

html body .content {
    background:
        transparent !important;
}


html body .topbar {
    border-color:
        var(--vv-line) !important;
}


html body .topbar h1 {
    color:
        var(--vv-text) !important;
}


html body .topbar-mark {
    color:
        rgba(36,120,189,.12) !important;
}


/* ============================================================
   GENERIC PANELS / CARDS
   ============================================================ */

html body .panel,
html body .card,
html body .dashboard-card,
html body .service-card {
    background:
        rgba(255,255,255,.96) !important;

    border-color:
        var(--vv-line) !important;

    color:
        var(--vv-text) !important;

    box-shadow:
        var(--vv-shadow-card) !important;
}


/* ============================================================
   GARAGE HERO
   ============================================================ */

html body .garage-intro {
    min-height:
        220px;

    background:

        radial-gradient(
            circle
            at 88% 16%,
            rgba(243,200,75,.20),
            transparent 16rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #eaf4fb
        )

        !important;

    border:
        1px solid
        #cbddea !important;

    border-left:
        5px solid
        var(--vv-accent) !important;

    color:
        var(--vv-text) !important;

    box-shadow:
        var(--vv-shadow-strong) !important;
}


/*
 * Ritzel im Hero statt altem VV-Geistertext.
 */

html body .garage-intro::after {
    content:
        "" !important;

    position:
        absolute;

    width:
        210px;

    height:
        210px;

    right:
        -38px;

    top:
        -32px;

    border-radius:
        50%;

    opacity:
        .17;

    transform:
        none !important;

    background:
        repeating-conic-gradient(
            from 0deg,
            #2478bd 0deg 6deg,
            transparent 6deg 15deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 37%,
            #000 38% 49%,
            transparent 50%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 37%,
            #000 38% 49%,
            transparent 50%
        );
}


html body .garage-intro::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        16px;

    height:
        14px;

    opacity:
        .12;

    background:
        radial-gradient(
            ellipse at center,
            transparent 0 42%,
            #2478bd 44% 54%,
            transparent 56%
        )
        0 0 / 26px 13px
        repeat-x;

    pointer-events:
        none;
}


html body .garage-intro h2,
html body .garage-intro h2 em {
    color:
        var(--vv-text) !important;
}


html body .garage-intro .eyebrow {
    color:
        var(--vv-accent) !important;
}


/* ============================================================
   STATS
   ============================================================ */

html body .stat-card {
    background:
        #ffffff !important;

    border:
        1px solid
        var(--vv-line) !important;

    box-shadow:
        var(--vv-shadow-soft) !important;

    color:
        var(--vv-text) !important;
}


html body .stat-card::after {
    background:
        var(--vv-yellow) !important;

    width:
        34px;

    height:
        4px;

    border-radius:
        99px;
}


html body .stat-card > span {
    color:
        var(--vv-muted) !important;
}


html body .stat-card strong {
    color:
        var(--vv-accent-strong) !important;
}

html body .stat-card small {
    color:
        var(--vv-muted) !important;
}


html body .stat-card.tone-good strong {
    color:
        var(--vv-good) !important;
}


html body .stat-card.tone-watch strong {
    color:
        var(--vv-watch) !important;
}


html body .stat-card.tone-danger strong {
    color:
        var(--vv-danger) !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

html body .btn,
html body button.btn,
html body a.btn {
    background:
        #ffffff !important;

    color:
        var(--vv-accent-strong) !important;

    border:
        1px solid
        #bdd4e4 !important;

    box-shadow:
        0 5px 15px
        rgba(35,79,111,.06) !important;
}


html body .btn:hover {
    background:
        #f2f8fc !important;

    border-color:
        #8eb8d6 !important;
}


html body .btn.primary,
html body button.btn.primary,
html body a.btn.primary {
    background:
        linear-gradient(
            145deg,
            #3288cb,
            #1768aa
        ) !important;

    color:
        #ffffff !important;

    border-color:
        #1768aa !important;

    box-shadow:
        0 10px 25px
        rgba(23,104,170,.20) !important;
}


html body .btn.primary:hover {
    background:
        #1768aa !important;
}


html body .btn.secondary {
    background:
        var(--vv-yellow-soft) !important;

    color:
        #6c5200 !important;

    border-color:
        #e8cd67 !important;
}


html body .btn.ghost,
html body .btn.glass {
    background:
        rgba(255,255,255,.70) !important;

    color:
        var(--vv-accent-strong) !important;
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

html body .section-head h2 {
    color:
        var(--vv-text) !important;
}


html body .section-head p {
    color:
        var(--vv-muted) !important;
}


html body .text-link {
    color:
        var(--vv-accent-strong) !important;
}


/* ============================================================
   BIKE CARDS
   ============================================================ */

/*
 * WICHTIG:
 * Fahrradbilder werden in VeloVault auf .bike-card-photo.has-photo
 * als background-image gesetzt.
 *
 * Deshalb darf das helle Theme bei Karten MIT Foto niemals per
 * "background: ... !important" das komplette Background-Shorthand
 * überschreiben. Genau das hatte die Bilder unsichtbar gemacht.
 */

html body .bike-card.visual {
    position:
        relative;

    overflow:
        hidden;

    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;

    box-shadow:
        var(--vv-shadow-card) !important;
}


/*
 * Nur Karten OHNE Foto bekommen unseren hellblauen Platzhalter.
 */

html body .bike-card-photo:not(.has-photo) {
    background:
        linear-gradient(
            145deg,
            #e7f1f7,
            #dceaf3
        )

        !important;
}


/*
 * Karten MIT Foto:
 * background-image bewusst NICHT setzen oder überschreiben.
 * So bleibt das von VeloVault gesetzte Fahrradfoto erhalten.
 */

html body .bike-card-photo.has-photo {
    background-color:
        #dceaf3 !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;
}


/*
 * Falls eine ältere/andere Kartenvariante ein echtes <img> nutzt.
 */

html body .bike-card-photo img,
html body .bike-card.visual img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/*
 * Dezentes technisches Muster nur beim Platzhalter.
 */

html body .bike-card-photo:not(.has-photo)::before {
    background:

        repeating-linear-gradient(
            120deg,
            transparent 0 24px,
            rgba(36,120,189,.035) 24px 25px
        )

        !important;
}


/*
 * Bei echten Fotos nur ein leichter Verlauf für bessere Lesbarkeit.
 */

html body .bike-card-photo.has-photo::before {
    background:
        linear-gradient(
            180deg,
            rgba(10,35,55,.01) 0%,
            rgba(10,35,55,.04) 38%,
            rgba(10,35,55,.22) 100%
        )

        !important;
}


/*
 * Der eigentliche Text-Overlay bleibt etwas kräftiger,
 * damit Modellname und Bezeichnung auf jedem Foto lesbar sind.
 */

html body .bike-card-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(18,48,70,0) 28%,
            rgba(18,48,70,.18) 52%,
            rgba(18,48,70,.88) 100%
        )

        !important;
}


html body .bike-card-name {
    position:
        relative;

    z-index:
        2;
}


html body .bike-card-name h3 {
    color:
        #ffffff !important;

    text-shadow:
        0 2px 12px
        rgba(7,27,42,.30);
}


html body .bike-card-name small {
    color:
        #e6f0f6 !important;

    text-shadow:
        0 1px 8px
        rgba(7,27,42,.26);
}


/*
 * Unterer Datenbereich bleibt hell und gehört damit zum neuen Theme.
 */

html body .bike-card-data {
    background:
        rgba(255,255,255,.98) !important;

    border-top:
        1px solid
        var(--vv-line-soft);
}


html body .bike-card-data strong {
    color:
        var(--vv-text) !important;
}


html body .bike-card-data strong small {
    color:
        var(--vv-accent) !important;
}


html body .bike-card-data > span {
    color:
        var(--vv-muted) !important;
}


/*
 * "Bereit"-Badge auf dem Foto heller und freundlicher.
 */

html body .bike-card .status-ready,
html body .bike-card .bike-ready,
html body .bike-card .bike-status {
    background:
        rgba(255,255,255,.91) !important;

    color:
        var(--vv-good) !important;

    border-color:
        rgba(73,168,108,.42) !important;

    box-shadow:
        0 6px 18px
        rgba(18,48,70,.10);
}


/*
 * Platzhalter ohne Bild.
 */

html body .bike-placeholder span,
html body .bike-placeholder b {
    color:
        #aac3d4 !important;
}


/* ============================================================
   MAINTENANCE
   ============================================================ */

html body .maintenance-card {
    background:
        #ffffff !important;

    border:
        1px solid
        var(--vv-line) !important;

    color:
        var(--vv-text) !important;

    box-shadow:
        var(--vv-shadow-soft) !important;
}


html body .maintenance-card.level-watch {
    background:
        linear-gradient(
            145deg,
            #fffdf5,
            #ffffff
        )

        !important;
}


html body .maintenance-card.level-due {
    background:
        linear-gradient(
            145deg,
            #fff8f8,
            #ffffff
        )

        !important;
}


html body .maintenance-card h3 {
    color:
        var(--vv-text) !important;
}


html body .maintenance-card p {
    color:
        var(--vv-text-soft) !important;
}


html body .maintenance-card footer {
    color:
        var(--vv-muted) !important;
}


html body .maintenance-kind {
    color:
        var(--vv-muted) !important;
}


/* ============================================================
   BIKE DETAIL
   ============================================================ */

html body .bike-hero-detail.no-photo {
    background:

        radial-gradient(
            circle
            at 80% 20%,
            rgba(243,200,75,.22),
            transparent 16rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #e8f3fa
        )

        !important;

    border-color:
        #cbddea !important;
}


html body .bike-hero-detail.no-photo::before {
    background:
        repeating-linear-gradient(
            118deg,
            transparent 0 40px,
            rgba(36,120,189,.04) 40px 41px
        )

        !important;
}


html body .bike-status-strip {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;

    box-shadow:
        var(--vv-shadow-soft);
}


html body .status-strip-label strong {
    color:
        var(--vv-text) !important;
}


html body .status-strip-last {
    border-color:
        var(--vv-line) !important;
}


html body .status-strip-last small,
html body .status-strip-last span {
    color:
        var(--vv-muted) !important;
}


html body .status-strip-last strong {
    color:
        var(--vv-text) !important;
}


/* ============================================================
   BUILD SHEET / COMPONENTS
   ============================================================ */

html body .build-group {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .build-group > header {
    background:
        #f3f8fb !important;

    border-color:
        var(--vv-line) !important;
}


html body .build-group > header b {
    background:
        #e7f2fa !important;

    color:
        var(--vv-accent) !important;
}


html body .build-row {
    border-color:
        var(--vv-line-soft) !important;
}


html body .build-type small,
html body .build-mounted small {
    color:
        var(--vv-muted) !important;
}


html body .build-part span,
html body .build-mounted span {
    color:
        var(--vv-muted) !important;
}


/* ============================================================
   FORMS
   ============================================================ */

html body label {
    color:
        var(--vv-text-soft) !important;
}


html body label small {
    color:
        var(--vv-muted) !important;
}


html body input,
html body select,
html body textarea {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;

    border:
        1px solid
        #bfd2e0 !important;

    box-shadow:
        inset 0 1px 2px
        rgba(27,68,98,.025);
}


html body input:focus,
html body select:focus,
html body textarea:focus {
    border-color:
        var(--vv-accent) !important;

    box-shadow:
        0 0 0 3px
        rgba(36,120,189,.11) !important;
}


html body input::placeholder,
html body textarea::placeholder {
    color:
        #9aabba !important;
}


html body .photo-upload-box {
    background:
        #f7fafc !important;

    border-color:
        #bfd2e0 !important;
}


html body .photo-preview {
    background:
        linear-gradient(
            145deg,
            #e9f2f8,
            #dceaf3
        )

        !important;
}


html body .file-button {
    background:
        #ffffff !important;

    color:
        var(--vv-accent-strong) !important;

    border-color:
        #bfd2e0 !important;
}


html body .check-card {
    background:
        #f8fbfd !important;

    border-color:
        var(--vv-line) !important;
}


html body .tubeless-settings {
    background:
        linear-gradient(
            120deg,
            #edf7fb,
            #ffffff
        )

        !important;

    border-color:
        #c8dde8 !important;
}


/* ============================================================
   TABLES
   ============================================================ */

html body .table-wrap {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body table {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;
}


html body th {
    background:
        #edf5fa !important;

    color:
        #60788b !important;

    border-color:
        var(--vv-line) !important;
}

html body td {
    color:
        var(--vv-text) !important;

    border-color:
        var(--vv-line-soft) !important;
}


html body .parts-table tbody tr:hover {
    background:
        #f7fbfd !important;
}


/* ============================================================
   COMPONENT DETAIL
   ============================================================ */

html body .part-hero {
    background:

        radial-gradient(
            circle
            at 88% 0,
            rgba(243,200,75,.17),
            transparent 15rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #edf5fa
        )

        !important;

    border-color:
        #cbddea !important;
}


html body .part-hero::after {
    color:
        rgba(36,120,189,.06) !important;
}


html body .part-hero p {
    color:
        var(--vv-muted) !important;
}


html body .chain-highlight {
    background:
        linear-gradient(
            125deg,
            #fff8da,
            #ffffff 65%
        )

        !important;

    border-color:
        #ead27a !important;
}


html body .chain-highlight p {
    color:
        var(--vv-text-soft) !important;
}


html body .wax-box {
    background:
        rgba(255,255,255,.75) !important;
}


html body .wax-box span,
html body .wax-box small {
    color:
        var(--vv-muted) !important;
}


html body .tubeless-hero {
    background:
        linear-gradient(
            125deg,
            #eaf6fb,
            #ffffff
        )

        !important;

    border-color:
        #c6dfe9 !important;
}


html body .tubeless-metrics > div {
    background:
        rgba(255,255,255,.8) !important;
}


/* ============================================================
   TIMELINE
   ============================================================ */

html body .timeline-row {
    border-color:
        var(--vv-line-soft) !important;
}


html body .timeline-row time,
html body .timeline-row em,
html body .timeline-row span {
    color:
        var(--vv-muted) !important;
}


/* ============================================================
   EMPTY / NOTICE / ALERT
   ============================================================ */

html body .empty {
    background:
        rgba(255,255,255,.55);

    border-color:
        #bfd2e0 !important;

    color:
        var(--vv-muted) !important;
}


html body .notice {
    background:
        var(--vv-yellow-soft) !important;

    border-color:
        #ead27a !important;

    color:
        #6b5300 !important;
}


html body .alert {
    background:
        #fff4f4 !important;

    border-color:
        #efc2c2 !important;

    color:
        #a73e3e !important;
}


/* ============================================================
   LIFECYCLE
   ============================================================ */

html body .lifecycle-settings {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .lifecycle-settings-copy p,
html body .lifecycle-setting-card > span {
    color:
        var(--vv-muted) !important;
}


html body .lifecycle-setting-card {
    background:
        #f7fafc !important;

    border-color:
        var(--vv-line) !important;
}


html body .lifecycle-track {
    background:
        #e5edf2 !important;
}


html body .lifecycle-head span,
html body .lifecycle-meta {
    color:
        var(--vv-muted) !important;
}


html body .component-lifecycle-panel {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;

    border-left-color:
        var(--vv-accent) !important;
}


/* ============================================================
   NEXT ACTIONS
   ============================================================ */

html body .vv-next-actions {
    background:

        radial-gradient(
            circle
            at 95% 0,
            rgba(243,200,75,.16),
            transparent 17rem
        ),

        #ffffff

        !important;

    border:
        1px solid
        var(--vv-line) !important;

    border-left:
        5px solid
        var(--vv-yellow) !important;

    box-shadow:
        var(--vv-shadow-card) !important;
}


html body .vv-next-actions-head h2 {
    color:
        var(--vv-text) !important;
}


html body .vv-next-actions-head p {
    color:
        var(--vv-muted) !important;
}


html body .vv-next-summary {
    background:
        #f5f9fc !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-next-summary strong {
    color:
        var(--vv-accent) !important;
}


html body .vv-next-summary span {
    color:
        var(--vv-muted) !important;
}


html body .vv-next-card {
    background:
        #f9fbfd !important;

    border-color:
        var(--vv-line) !important;

    color:
        var(--vv-text) !important;
}


html body .vv-next-card:hover {
    background:
        #f2f8fc !important;

    border-color:
        #a8c7dc !important;
}


html body .vv-next-kind,
html body .vv-next-copy p,
html body .vv-next-due span {
    color:
        var(--vv-muted) !important;
}


html body .vv-next-progress {
    background:
        #e2ebf1 !important;
}


html body .vv-next-clear {
    background:
        #f7fafc !important;

    border-color:
        #bfd2e0 !important;
}


/* ============================================================
   DOCUMENTS
   ============================================================ */

html body .vv-documents-empty,
html body .vv-document-card {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-document-preview {
    background:
        linear-gradient(
            145deg,
            #edf5fa,
            #f9fcfe
        )

        !important;

    border-color:
        #bfd2e0 !important;
}


html body .vv-document-copy p,
html body .vv-document-meta {
    color:
        var(--vv-muted) !important;
}


html body .vv-document-copy small {
    color:
        var(--vv-text-soft) !important;
}


html body .vv-doc-upload-dialog {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-doc-close {
    background:
        #f2f7fa !important;

    color:
        var(--vv-text-soft) !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-doc-upload-hint {
    background:
        #f7fafc !important;

    color:
        var(--vv-muted) !important;

    border-color:
        var(--vv-line) !important;
}


/* ============================================================
   ROUTE / GPX
   ============================================================ */

html body .vv-route-map {
    background:
        #e8f1f6 !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-route-stats > div,
html body .vv-route-profile {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-route-stats span,
html body .vv-route-profile-labels {
    color:
        var(--vv-muted) !important;
}


html body .vv-route-profile-area {
    fill:
        rgba(36,120,189,.09) !important;
}


html body .vv-route-empty {
    background:

        linear-gradient(
            120deg,
            #eef6fb,
            #ffffff
        )

        !important;

    border-color:
        #bfd2e0 !important;
}


/* ============================================================
   RIDES
   ============================================================ */

html body .vv-rides-hero {
    background:

        radial-gradient(
            circle
            at 88% 16%,
            rgba(243,200,75,.18),
            transparent 18rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #eaf4fb
        )

        !important;

    border-color:
        #cbddea !important;

    border-left-color:
        var(--vv-accent) !important;

    box-shadow:
        var(--vv-shadow-card);
}


html body .vv-rides-hero h2,
html body .vv-rides-hero h2 em {
    color:
        var(--vv-text) !important;
}


html body .vv-rides-hero p {
    color:
        var(--vv-text-soft) !important;
}


html body .vv-rides-stats article {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;

    box-shadow:
        var(--vv-shadow-soft);
}


html body .vv-ride-card,
html body .vv-ride-edit {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-ride-date {
    background:
        #edf6fb !important;

    border-color:
        #b7d3e5 !important;
}


html body .vv-ride-main p,
html body .vv-ride-odo {
    color:
        var(--vv-muted) !important;
}


/* ============================================================
   PRESSURE
   ============================================================ */

html body .vv-pressure-hero {
    background:

        radial-gradient(
            circle
            at 86% 15%,
            rgba(243,200,75,.18),
            transparent 18rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #eaf4fb
        )

        !important;

    border-color:
        #cbddea !important;

    border-left-color:
        var(--vv-accent) !important;

    box-shadow:
        var(--vv-shadow-card);
}


html body .vv-pressure-hero h2,
html body .vv-pressure-hero h2 em {
    color:
        var(--vv-text) !important;
}


html body .vv-pressure-hero p {
    color:
        var(--vv-text-soft) !important;
}


html body .vv-pressure-hero-mark {
    color:
        rgba(36,120,189,.14) !important;
}


html body .vv-pressure-wheel,
html body .vv-pressure-bike-tires > div {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-pressure-result {
    background:

        linear-gradient(
            145deg,
            #f4f9fc,
            #ffffff
        )

        !important;

    border-color:
        #b8d4e5 !important;

    border-left-color:
        var(--vv-yellow) !important;
}


html body .vv-pressure-result-card {
    background:

        linear-gradient(
            145deg,
            #ffffff,
            #edf6fb
        )

        !important;

    border-color:
        #bfd7e5 !important;
}


html body .vv-pressure-result-card::before {
    border-color:
        rgba(36,120,189,.05) !important;
}


html body .vv-pressure-setup-card,
html body .vv-pressure-setup-values > div,
html body .vv-race-pressure-card {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


/* ============================================================
   RACES
   ============================================================ */

html body .race-season-head {
    background:

        radial-gradient(
            circle
            at 88% 0,
            rgba(243,200,75,.18),
            transparent 17rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #edf6fb
        )

        !important;

    border-color:
        #cbddea !important;

    border-left-color:
        var(--vv-accent) !important;

    box-shadow:
        var(--vv-shadow-card);
}


html body .race-season-head::after {
    color:
        rgba(36,120,189,.06) !important;
}


html body .race-season-head h2,

html body .race-season-head h2 em {
    color:
        var(--vv-text) !important;
}


html body .race-season-head p {
    color:
        var(--vv-muted) !important;
}


html body .race-year-switch a {
    background:
        #ffffff !important;

    color:
        var(--vv-text-soft) !important;

    border-color:
        var(--vv-line) !important;
}


html body .race-year-switch a.active {
    background:
        var(--vv-accent) !important;

    color:
        #ffffff !important;

    border-color:
        var(--vv-accent) !important;
}


html body .race-month {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;

    box-shadow:
        var(--vv-shadow-soft);
}


html body .race-month > header {
    background:
        #f0f6fa !important;

    border-color:
        var(--vv-line) !important;
}


html body .race-calendar-card {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line-soft) !important;
}


html body .race-calendar-card:hover {
    background:
        #f5f9fc !important;

    border-color:
        #a9c9dc !important;
}


html body .race-calendar-date {
    border-color:
        var(--vv-line) !important;
}


html body .race-calendar-copy p {
    color:
        var(--vv-muted) !important;
}


html body .race-calendar-copy > div {
    color:
        var(--vv-text-soft) !important;
}


/*
 * Race Heroes MIT Bild dürfen ein dunkleres Overlay behalten,
 * weil die Schrift sonst auf Fotos nicht zuverlässig lesbar wäre.
 */

html body .next-race-hero:not(.has-photo) {
    background:

        radial-gradient(
            circle
            at 85% 15%,
            rgba(243,200,75,.18),
            transparent 18rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #eaf4fb
        )

        !important;

    border-color:
        #cbddea !important;
}


html body .next-race-hero:not(.has-photo)
.next-race-overlay {
    background:
        transparent !important;
}


html body .next-race-hero:not(.has-photo)
.next-race-copy h2 {
    color:
        var(--vv-text) !important;
}


html body .next-race-hero:not(.has-photo)
.next-race-copy p {
    color:
        var(--vv-muted) !important;
}


html body .next-race-hero:not(.has-photo)
.next-race-date {
    background:
        #ffffff !important;

    border-color:
        #d4bb57 !important;

    color:
        var(--vv-text) !important;
}


html body .next-race-metrics > div {
    background:
        rgba(255,255,255,.90) !important;

    border-color:
        var(--vv-yellow) !important;

    color:
        var(--vv-text) !important;
}


html body .race-facts-strip {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .race-facts-strip > div {
    border-color:
        var(--vv-line-soft) !important;
}


html body .race-result-board {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;

    border-left-color:
        var(--vv-yellow) !important;
}


html body .race-result-main > div,
html body .race-link-card,
html body .race-cover-upload {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .race-cover-preview {
    background:
        #edf5fa !important;

    border-color:
        #bfd2e0 !important;
}


html body .race-info-list > div {
    border-color:
        var(--vv-line-soft) !important;
}


html body .race-note-block p {
    color:
        var(--vv-text-soft) !important;
}


/* ============================================================
   CHECKLIST
   ============================================================ */

html body .vv-race-ready-badge {
    background:
        #f6fafc !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-race-checklist-progress {
    background:
        #e1ebf1 !important;
}


html body .vv-race-check-item {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-race-check-item.done {
    background:
        #f2faf5 !important;

    border-color:
        #bfe0c9 !important;
}


html body .vv-race-check-toggle {
    background:
        #f4f8fb !important;

    border-color:
        #bfd2e0 !important;
}


html body .vv-race-check-item.done
.vv-race-check-toggle {
    background:
        var(--vv-good) !important;

    border-color:
        var(--vv-good) !important;

    color:
        #ffffff !important;
}


/* ============================================================
   DISPOSAL
   ============================================================ */

html body .vv-disposal-dialog {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;

    border-color:
        #e5bcbc !important;
}


html body .vv-disposal-close {
    background:
        #f5f8fa !important;

    color:
        var(--vv-muted) !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-disposal-warning {
    background:
        #fff9e5 !important;

    color:
        var(--vv-text) !important;
}


html body .vv-disposal-warning span {
    color:
        var(--vv-text-soft) !important;
}


html body .vv-disposal-confirm {
    background:
        #fff5f5 !important;
}


html body .vv-disposed-panel {
    background:
        #fff7f7 !important;
}


html body .vv-disposed-copy p,
html body .vv-disposal-confirm p {
    color:
        var(--vv-muted) !important;
}


html body .vv-disposed-copy blockquote {
    background:
        #ffffff !important;

    color:
        var(--vv-text-soft) !important;

    border-color:
        #d8e2e9 !important;
}


html body .vv-disposal-toast {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;

    border-color:
        var(--vv-line) !important;
}


/* ============================================================
   BACKUP
   ============================================================ */

html body .vv-backup-hero {
    background:

        radial-gradient(
            circle
            at 88% 10%,
            rgba(243,200,75,.16),
            transparent 18rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #eaf4fb
        )

        !important;

    border-color:
        #cbddea !important;

    border-left-color:
        var(--vv-accent) !important;
}


html body .vv-backup-hero h2,
html body .vv-backup-hero h2 em {
    color:
        var(--vv-text) !important;
}


html body .vv-backup-hero p {
    color:
        var(--vv-text-soft) !important;
}


html body .vv-backup-row {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-backup-filemark {
    background:
        #edf6fb !important;

    border-color:
        #bdd8e8 !important;
}


html body .vv-restore-warning {
    background:
        #fff9e5 !important;
}


/* ============================================================
   PWA
   ============================================================ */

html body .vv-pwa-dialog {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-pwa-close,
html body .vv-header-tool {
    background:
        #ffffff !important;

    color:
        var(--vv-text-soft) !important;

    border-color:
        var(--vv-line) !important;
}


/* ============================================================
   TRAINING
   ============================================================ */

/*
 * Höhere Spezifität + !important,
 * weil training.css bewusst nach anderen Styles geladen wird.
 */

html body .vv-tplan-weekhead {
    background:

        radial-gradient(
            circle
            at 92% 6%,
            rgba(243,200,75,.18),
            transparent 16rem
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #eaf4fb
        )

        !important;

    border-color:
        #cbddea !important;

    border-left-color:
        var(--vv-accent) !important;

    box-shadow:
        var(--vv-shadow-card) !important;
}


html body .vv-tplan-weekhead h2 {
    color:
        var(--vv-text) !important;
}


html body .vv-tplan-weekhead p,
html body .vv-tplan-weekhead-main > div > strong {
    color:
        var(--vv-text-soft) !important;
}


html body .vv-tplan-phase {
    background:
        #eaf4fb !important;

    border-color:
        #bfd9ea !important;

    color:
        var(--vv-accent-strong) !important;
}


html body .vv-tplan-nav a {
    background:
        #ffffff !important;

    border-color:
        #c8dae6 !important;

    color:
        var(--vv-text) !important;
}


html body .vv-tplan-nav a.today {
    background:
        var(--vv-yellow-soft) !important;

    color:
        #6b5200 !important;

    border-color:
        #e8cf72 !important;
}


html body .vv-tplan-kpis > div {
    background:
        rgba(255,255,255,.78) !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-tplan-kpis span {
    color:
        var(--vv-muted) !important;
}


html body .vv-tplan-kpis strong {
    color:
        var(--vv-accent-strong) !important;
}


html body .vv-tplan-card {
    background:
        #ffffff !important;

    border:
        1px solid
        var(--vv-line) !important;

    color:
        var(--vv-text) !important;

    box-shadow:
        var(--vv-shadow-soft) !important;
}


html body .vv-tplan-card.completed {
    background:
        linear-gradient(
            145deg,
            #f4fbf6,
            #ffffff
        )

        !important;

    border-color:
        #bcdcc6 !important;
}


html body .vv-tplan-card.rest {
    background:
        linear-gradient(
            145deg,
            #f7fafc,
            #ffffff
        )

        !important;
}


html body .vv-tplan-card.race {
    background:
        linear-gradient(
            145deg,
            #fff8db,
            #ffffff
        )

        !important;

    border-color:
        #e9d075 !important;
}


html body .vv-tplan-card.is-today {
    background:

        linear-gradient(
            145deg,
            #e9f5fd,
            #fff8dc
        )

        !important;

    border:
        2px solid
        var(--vv-accent) !important;

    box-shadow:
        0 0 0 3px
        rgba(36,120,189,.08),
        var(--vv-shadow-card)
        !important;
}


html body .vv-tplan-card.is-today::before {
    background:
        var(--vv-yellow) !important;

    color:
        #5b4500 !important;

    box-shadow:
        0 5px 14px
        rgba(161,126,16,.16) !important;
}


html body .vv-tplan-card.is-today h3 {
    color:
        var(--vv-text) !important;
}


html body .vv-tplan-day {
    color:
        var(--vv-accent-strong) !important;
}


html body .vv-tplan-type,
html body .vv-tplan-intensity {
    color:
        var(--vv-muted) !important;
}


html body .vv-tplan-state {
    background:
        #f4f8fb !important;

    border-color:
        #c8d9e5 !important;

    color:
        var(--vv-muted) !important;
}

html body .vv-tplan-state.completed {
    background:
        #eaf7ee !important;

    color:
        #3d915c !important;

    border-color:
        #b9dec5 !important;
}


html body .vv-tplan-chips span {
    background:
        #f3f7fa !important;

    border-color:
        var(--vv-line) !important;

    color:
        var(--vv-text-soft) !important;
}


html body .vv-tplan-result-mini {
    background:
        #edf8f1 !important;
}


html body .vv-tplan-open {
    background:
        #edf6fb !important;

    border-color:
        #bbd6e7 !important;

    color:
        var(--vv-accent-strong) !important;
}


html body .vv-tplan-card.is-today
.vv-tplan-open {
    background:
        #ffffff !important;

    border-color:
        #9ec5de !important;

    color:
        var(--vv-accent-strong) !important;
}


html body .vv-tplan-dialog {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;

    border-color:
        var(--vv-line) !important;

    box-shadow:
        var(--vv-shadow-strong) !important;
}


html body .vv-tplan-dialog header {
    background:
        rgba(255,255,255,.96) !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-tplan-dialog-close {
    background:
        #f5f8fa !important;

    color:
        var(--vv-text-soft) !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-tplan-dialog-summary > div,
html body .vv-tplan-info-grid > div {
    background:
        #f7fafc !important;

    border-color:
        var(--vv-line) !important;
}


html body .vv-tplan-workout {
    background:
        #eef7fc !important;

    border-left-color:
        var(--vv-yellow) !important;
}


html body .vv-tplan-workout p {
    color:
        var(--vv-text-soft) !important;
}


html body .vv-tplan-result-form {
    background:
        #f3f9fc !important;

    border-color:
        #c6dce9 !important;
}


html body .vv-tplan-edit-details,
html body .vv-tplan-admin-panel,
html body .vv-tplan-admin-grid > section,
html body .vv-tplan-weekstrip a {
    background:
        #ffffff !important;

    border-color:
        var(--vv-line) !important;
}


/* ============================================================
   QUICK KM
   ============================================================ */

html body .quick-km-fab {
    background:

        linear-gradient(
            145deg,
            #ffe16b,
            #f3c84b
        )

        !important;

    color:
        #17324a !important;

    border-color:
        #dfb832 !important;

    box-shadow:
        0 12px 28px
        rgba(180,137,12,.22)
        !important;
}


html body .quick-km-dialog {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;

    border-color:
        var(--vv-line) !important;
}


html body .quick-km-close {
    background:
        #f4f8fa !important;

    color:
        var(--vv-text-soft) !important;

    border-color:
        var(--vv-line) !important;
}


html body .quick-km-current > div,
html body .quick-km-preview {
    background:
        #f7fafc !important;

    border-color:
        var(--vv-line) !important;
}


html body .quick-km-presets button {
    background:
        #ffffff !important;

    color:
        var(--vv-text-soft) !important;

    border-color:
        var(--vv-line) !important;
}


html body .quick-km-preview {
    background:
        linear-gradient(
            110deg,
            #fff8d8,
            #ffffff 70%
        )

        !important;
}


html body .vv-toast {
    background:
        #ffffff !important;

    color:
        var(--vv-text) !important;

    border-color:
        var(--vv-line) !important;
}


/* ============================================================
   MOBILE NAV
   ============================================================ */

/*
 * absichtlich sehr spezifisch:
 * mobile-ux.css verwendet dort selbst !important.
 */

@media (max-width: 900px) {

    html body .vv-mobile-nav {
        background:
            rgba(255,255,255,.96) !important;

        border:
            1px solid
            #c8d9e5 !important;

        box-shadow:
            0 13px 34px
            rgba(31,72,102,.14) !important;

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }


    html body .vv-mobile-nav > a,
    html body .vv-mobile-nav > button {
        color:
            #7b91a1 !important;
    }


    html body .vv-mobile-nav > a.active,
    html body .vv-mobile-nav > button.active {
        position:
            relative;

        background:
            #e8f3fb !important;

        color:
            var(--vv-accent-strong) !important;
    }


    /*
     * Gelber Marker auf aktivem Menüpunkt.
     */

    html body .vv-mobile-nav > a.active::after,
    html body .vv-mobile-nav > button.active::after {
        content:
            "";

        position:
            absolute;

        top:
            4px;

        left:
            50%;

        width:
            18px;

        height:
            3px;

        border-radius:
            99px;

        transform:
            translateX(-50%);

        background:
            var(--vv-yellow);
    }


    html body .vv-mobile-nav b {
        color:
            currentColor !important;
    }


    html body .vv-mobile-menu-sheet {
        background:
            #f8fbfd !important;

        color:
            var(--vv-text) !important;

        border-color:
            var(--vv-line) !important;

        box-shadow:
            0 -14px 45px
            rgba(31,72,102,.16)
            !important;
    }


    html body .vv-mobile-menu-sheet::backdrop {
        background:
            rgba(31,63,86,.28) !important;
    }


    html body .vv-mobile-menu-handle {
        background:
            #bfd0dc !important;
    }


    html body .vv-mobile-menu-close {
        background:
            #ffffff !important;

        color:
            var(--vv-text-soft) !important;

        border-color:
            var(--vv-line) !important;
    }


    html body .vv-mobile-menu-grid > a,
    html body .vv-mobile-menu-grid > button {
        background:
            #ffffff !important;

        color:
            var(--vv-text) !important;

        border-color:
            var(--vv-line) !important;

        box-shadow:
            var(--vv-shadow-soft);
    }


    html body .vv-mobile-menu-icon,
    html body
    .vv-mobile-menu-grid > a > span,
    html body
    .vv-mobile-menu-grid > button > span {
        background:
            #e9f3fa !important;

        color:
            var(--vv-accent-strong) !important;
    }


    html body .vv-mobile-menu-grid small {
        color:
            var(--vv-muted) !important;
    }


    /*
     * Allgemeine mobile Panels
     */

    html body .panel,
    html body .card,
    html body .dashboard-card {
        box-shadow:
            0 8px 22px
            rgba(31,72,102,.08)
            !important;
    }


    /*
     * Mobile Teile-Karten,
     * die mobile.css selbst dunkel erzeugt.
     */

    html body .parts-table tbody tr {
        background:
            #ffffff !important;

        border-color:
            var(--vv-line) !important;
    }


    html body .parts-table td {
        border-color:
            var(--vv-line-soft) !important;
    }


    html body .build-lifecycle {
        border-color:
            var(--vv-line-soft) !important;
    }
}


/* ============================================================
   DECORATIVE CHAIN DETAIL
   ============================================================ */

/*
 * Kleine Kettenlinie bei ausgewählten Heroes.
 */

html body .vv-rides-hero::before,
html body .vv-pressure-hero::before,
html body .vv-backup-hero::before,
html body .race-season-head::before,
html body .vv-tplan-weekhead::before {
    content:
        "";

    position:
        absolute;

    right:
        20px;

    bottom:
        14px;

    width:
        150px;

    height:
        11px;

    pointer-events:
        none;

    opacity:
        .18;

    background:
        radial-gradient(
            ellipse at center,
            transparent 0 40%,
            #2478bd 43% 55%,
            transparent 58%
        )
        0 0 / 25px 11px
        repeat-x;
}


/* ============================================================
   FOOTER
   ============================================================ */

html body .site-footer {
    border-color:
        var(--vv-line) !important;

    color:
        var(--vv-muted) !important;
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

    html body::after {
        width:
            185px;

        height:
            185px;

        right:
            -85px;

        top:
            130px;

        opacity:
            .10;
    }

}