body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
        }

        header {
            background-color: #ffffff;
            border-bottom: 1px solid #e0e0e0;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 22px;
            font-weight: bold;
            color: #111;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px;
        }

        nav ul li a {
            text-decoration: none;
            color: #555;
            font-size: 14px;
            font-weight: 600;
            transition: color 0.2s;
        }

        nav ul li a:hover {
            color: #000;
        }

        main {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 40px; /* První číslo je horní/dolní mezera, druhé (40px) je levá a pravá mezera */
}

        h1 {
            font-size: 32px;
            border-bottom: 2px solid #111;
            padding-bottom: 10px;
            margin-bottom: 5px;
        }

        .subtitle {
            font-size: 18px;
            color: #666;
            margin-bottom: 40px;
        }

        .setup-section {
            background: #fff;
            padding: 25px;
            margin-bottom: 35px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .setup-section h2 {
            margin-top: 0;
            color: #111;
            border-bottom: 2px solid #ff4444;
            padding-bottom: 8px;
            font-size: 22px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .parameter {
            margin-top: 25px;
            margin-bottom: 25px;
            padding-left: 15px;
            border-left: 3px solid #111;
        }

        .parameter h3 {
            margin: 0 0 10px 0;
            font-size: 19px;
            color: #ff4444;
        }

        .parameter p {
            margin: 0 0 10px 0;
            color: #333;
            line-height: 1.6;
        }

        .parameter ul {
            margin: 5px 0 0 0;
            padding-left: 20px;
        }

        .parameter li {
            margin-bottom: 5px;
            line-height: 1.5;
            color: #444;
        }

        .summary-box {
            background-color: #f5f5f5;
            padding: 15px;
            border-left: 3px solid #ff4444;
            margin-top: 20px;
        }

        .summary-box h4 {
            margin: 0 0 10px 0;
            font-size: 16px;
            text-transform: uppercase;
        }
/* Styling pro tlačítka */
.parameter-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.param-tab {
    background-color: #e0e0e0;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}

.param-tab:hover {
    background-color: #d0d0d0;
}

.param-tab.active {
    background-color: #007bff; /* Tvá modrá */
    color: white;
}
/* Horní lišta s menu */
.main-header {
    position: -webkit-sticky;   /* Podpora pro starší Safari prohlížeče */
    position: sticky;           /* Udělá z menu lepicí lištu */
    top: 0;                     /* Přišpendlí ji hned, jak narazí na horní okraj */
    z-index: 1000;              /* Zajistí, že menu bude vždy navrchu nad rolujícím textem */
    background-color: #ffffff;  /* Pevné bílé pozadí, aby pod ním text neprosvítal */
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Jemný stín pro oddělení od obsahu */
}

/* Nastavení pro celý kontejner loga (obrázek + text) */
.logo {
    display: flex;
    align-items: center;        /* Zarovná obrázek loga a text dokonale na střed vedle sebe */
    gap: 12px;                  /* Mezera mezi obrázkem a textem */
    font-weight: bold;
    font-size: 20px;            /* Velikost textu značky */
}

/* Nastavení samotného obrázku loga */
.logo-img {
    height: 30px; /* Pevná výška, aby logo přesně pasovalo do lišty */
    width: auto;  /* Šířka se dopočítá sama, aby se logo nedeformovalo */
    object-fit: contain;
}

/* Velký banner s fotkou */
.hero-banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/vseonastaveni.jpg.jpeg');
    background-size: cover;
    background-position: center 22%; /* Tvé přesné usazení obličeje mechanika */
    background-repeat: no-repeat;
    height: 350px;
    display: flex;
    align-items: center;        /* Vycentruje text vertikálně */
    justify-content: flex-start;/* Zarovná text doleva jako na starém webu */
    padding-left: 10%;          /* Odsazení textu od levého kraje */
}

/* Styl pro textový blok uvnitř fotky */
.hero-content {
    max-width: 600px;
}

.hero-title {
    background-color: #ffb703; /* Krásná žlutá barva z tvého starého webu */
    color: #000000;
    font-size: 42px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px;
    margin: 0 0 10px 0;
    display: inline-block; /* Aby žluté pozadí bylo jen kolem textu */
}

.hero-subtitle {
    background-color: #ffffff;
    color: #000000;
    font-size: 18px;
    padding: 10px 20px;
    margin: 0;
    display: inline-block;
}

/* Styl pro nadpisy hlavních skupin nastavení */
h2 {
    font-size: 26px;             /* Výrazná velikost */
    font-weight: 800;             /* Extra tučné písmo */
    text-transform: uppercase;    /* Všechna písmena velká pro závodní vzhled */
    letter-spacing: 0.5px;        /* Jemné rozestupy mezi písmeny */
    color: #111111;              /* Tmavá, ostrá barva */
    margin-top: 50px;            /* Pořádná mezera shora od předchozí sekce */
    margin-bottom: 15px;         /* Mezera pod nadpisem */
}

/* Zvýraznění klíčových slov na začátku odstavců a seznamů */
p strong, li strong, p b, li b {
    font-weight: 800;         /* Výrazně tučné písmo */
    color: #111111;           /* Sytě černá barva, aby slovo vystoupilo */
    letter-spacing: 0.3px;    /* Jemné rozestupy pro modernější vzhled */
}

/* Volitelné: Mírné zvětšení mezery mezi jednotlivými bloky parametrů, aby to nesplývalo */
p {
    margin-bottom: 12px;      /* Udělá drobnou mezeru pod každým odstavcem */
    line-height: 1.6;         /* Zlepší čitelnost textu větším rozestupem řádků */
}

li {
    margin-bottom: 6px;       /* Udělá drobnou mezeru mezi asfaltem a šotolinou */
}

/* Oprava: Nastavení absolutní černé pro veškerý text uvnitř hlavního obsahu */
body, div, p, li {
    color: #000000 !important;   /* Vynutí si absolutní černou pro úplně všechno */
}

/* Styl pro červené podnadpisy jednotlivých dílů v motorsport stylu */
h3 {
    font-size: 19px;             /* Velikost ideální pro podnadpis */
    font-weight: 800;             /* Extra tučné písmo jako u hlavního nadpisu */
    text-transform: uppercase;    /* Všechna písmena velká pro sjednocení stylu */
    letter-spacing: 0.5px;        /* Jemné závodní rozestupy mezi písmeny */
    color: #ff0000;              /* Tvá čistá dravá červená */
    margin-top: 40px;            /* O kousek větší prostor shora, aby to dýchalo */
    margin-bottom: 12px;         
    padding-bottom: 6px;         
    border-bottom: 1px dashed #e0e0e0; 
}

.setup-section {
    max-width: 1200px;      /* Tohle omezí šířku textu, aby se neroztahoval do krajů */
    margin: 0 auto;         /* Tohle automaticky vytvoří ty stejné volné mezery vlevo i vpravo */
    padding: 0 30px;        /* Bezpečná mezera od okrajů, až na to budeš koukat na mobilu */
}