/*
===================================
HEADER
===================================
*/

/*
====================================
HEADER
====================================
*/

.header {

    position: sticky;

    top: 0;

    background: white;

    z-index: 1000;

    box-shadow: var(--shadow-sm);

    transition: .4s;

}


.header__nav {

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.header__logo {

    width: 220px;

}


.header__menu {

    display: flex;

    gap: 2rem;

}


.header__link {

    color: var(--color-text);

    font-weight: 600;

    transition: .3s;

}


.header__link:hover {

    color: var(--color-primary);

}


.header__toggle {

    display: none;

    border: none;

    background: none;

    font-size: 2rem;

    cursor: pointer;

}


.header__nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.header__logo {

    display: flex;

    align-items: center;

    width: auto;

}


/* Logo per Höhe begrenzen, damit es nicht über den Header hinausragt */

.header__logo img {

    height: 58px;

    width: auto;

    border-radius: var(--radius-sm);

}


.header--small .header__logo img {

    height: 48px;

}


.header__menu {

    display: flex;

    gap: 2rem;

}


.header__link {

    color: var(--color-text);

    font-weight: 600;

    transition: .3s;

}


.header__link:hover {

    color: var(--color-primary);

}


/*
====================================
SMALL HEADER
====================================
*/

.header--small {

    box-shadow: var(--shadow-md);

}


.header--small .header__nav {

    height: 70px;

}

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

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 2rem;

    border-radius: var(--radius-md);

    font-weight: 600;

    transition: var(--transition-fast);

}


.button--primary {

    background-color: var(--color-primary);

    color: white;

}


.button--primary:hover {

    background-color: var(--color-primary-dark);

}


.button--secondary {

    border: 2px solid var(--color-primary);

    color: var(--color-primary);

}

/*
====================================
MOBILE MENU
====================================
*/

.mobile-menu {

    display: none;

    position: fixed;

    top: 70px;

    left: 0;

    right: 0;

    z-index: 900;

    background: white;

    box-shadow: var(--shadow-md);

    max-height: calc(100vh - 70px);

    overflow-y: auto;

}


.mobile-menu--active {

    display: block;

}


.mobile-menu__list {

    padding: 2rem;

}


.mobile-menu__list li {

    margin-bottom: 1rem;

}

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

.hero {

    min-height: 85vh;

    display: flex;

    align-items: center;

}


.hero__wrapper {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 4rem;

    align-items: center;

}


.hero__subtitle {

    display: inline-block;

    margin-bottom: 1rem;

    color: var(--color-secondary);

    font-weight: 700;

}


.hero__title {

    font-size: 4rem;

    line-height: 1.2;

    margin-bottom: 2rem;

}


.hero__highlight {

    color: var(--color-primary);

}


.hero__text {

    font-size: 1.2rem;

    color: var(--color-text-light);

    margin-bottom: 3rem;

}


.hero__buttons {

    display: flex;

    gap: 1rem;

}


.hero__image img {

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

}

/*
====================================
SERVICES
====================================
*/

.services__grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 2rem;

}


.service-card {

    background: white;

    padding: 3rem 2rem;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-fast);

}


.service-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-md);

}


.service-card__icon {

    font-size: 3rem;

    margin-bottom: 2rem;

}


.service-card__title {

    margin-bottom: 1rem;

    color: var(--color-primary);

}


.service-card__text {

    color: var(--color-text-light);

}

/*
====================================
WHY OTP
====================================
*/

.advantages {

    background-color: var(--color-background-light);

}


.advantages__grid {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 2rem;

}


.advantage-card {

    background: white;

    padding: 2.5rem;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-fast);

}


.advantage-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-md);

}


.advantage-card__icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--color-secondary);

    color: white;

    font-size: 1.5rem;

    border-radius: 50%;

    margin-bottom: 2rem;

}


.advantage-card__title {

    margin-bottom: 1rem;

    color: var(--color-primary);

}


.advantage-card__text {

    color: var(--color-text-light);

}


/*
====================================
PROCESS
====================================
*/

.process__timeline {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 2rem;

}


.process-card {

    position: relative;

    padding: 3rem 2rem;

    background: white;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-fast);

}


.process-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-md);

}


.process-card__number {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-primary);

    color: white;

    font-size: 1.5rem;

    font-weight: 700;

    border-radius: 50%;

    margin-bottom: 2rem;

}


.process-card__title {

    color: var(--color-primary);

    margin-bottom: 1rem;

}


.process-card__text {

    color: var(--color-text-light);

}

/*
====================================
INDUSTRIES
====================================
*/

.industries {

    background-color: var(--color-background-light);

}


.industries__grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 2rem;

}


.industry-card {

    background: white;

    padding: 3rem 2rem;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-fast);

}


.industry-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-md);

}


.industry-card__icon {

    font-size: 3rem;

    margin-bottom: 2rem;

}


.industry-card__title {

    color: var(--color-primary);

    margin-bottom: 1rem;

}


.industry-card__text {

    color: var(--color-text-light);

}

/*
====================================
TEAM
====================================
*/

.team__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 3rem;

}


.team-card {

    background: white;

    padding: 3rem;

    text-align: center;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-fast);

}


.team-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-md);

}


.team-card__image {

    width: 180px;

    margin: auto;

    margin-bottom: 2rem;

}


.team-card__image img {

    border-radius: 50%;

}


.team-card__name {

    color: var(--color-primary);

    margin-bottom: .5rem;

}


.team-card__position {

    font-weight: 700;

}


.team-card__department {

    color: var(--color-text-light);

    margin-bottom: 2rem;

}


.team-card__contact {

    display: flex;

    flex-direction: column;

    gap: .5rem;

}

/*
====================================
CONTACT
====================================
*/

.contact {

    background-color: var(--color-background-light);

}


.contact__wrapper {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 4rem;

}


.contact__details {

    margin-top: 3rem;

}


.contact__item {

    margin-bottom: 2rem;

}


.contact__item h3 {

    color: var(--color-primary);

    margin-bottom: .5rem;

}


.contact-form {

    background: white;

    padding: 3rem;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

}


.contact-form__group {

    display: flex;

    flex-direction: column;

    margin-bottom: 1.5rem;

}


.contact-form__group label {

    margin-bottom: .5rem;

    font-weight: 600;

}


.contact-form__group input,
.contact-form__group textarea {

    padding: 1rem;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-sm);

    font-size: 1rem;

}


.contact-form__group textarea {

    resize: vertical;

}


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

.footer {

    background-color: var(--color-primary-dark);

    color: white;

    padding-top: 5rem;

}


.footer__grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 3rem;

}


.footer__logo {

    width: 220px;

    margin-bottom: 2rem;

    border-radius: var(--radius-sm);

    background: #fff;

    padding: 0.75rem 1rem;

}


.footer__title {

    margin-bottom: 1.5rem;

}


.footer__list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}


.footer__list a {

    color: rgba(255,255,255,.8);

}


.footer__list a:hover {

    color: white;

}


.footer__text {

    color: rgba(255,255,255,.8);

}


.footer__bottom {

    border-top: 1px solid rgba(255,255,255,.15);

    margin-top: 4rem;

    padding: 2rem 0;

    text-align: center;

    color: rgba(255,255,255,.7);

}



/*
====================================
SCROLL TOP
====================================
*/

.scroll-top {

    position: fixed;

    right: 2rem;

    bottom: 2rem;

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background: var(--color-primary);

    color: white;

    font-size: 1.5rem;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition: .3s;

}


.scroll-top--visible {

    opacity: 1;

    pointer-events: all;

}

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

.hero__stats{

    margin-top:4rem;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2rem;

}


.hero-stat{

    background:white;

    padding:1.5rem;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

}


.hero-stat__number{

    display:block;

    color:var(--color-primary);

    font-size:2rem;

    font-weight:700;

    margin-bottom:.5rem;

}


.hero-stat__text{

    color:var(--color-text-light);

}


.header{

    transition:.4s;

}


.header--small{

    box-shadow:var(--shadow-md);

}


.header--small .header__nav{

    height:70px;

}

/*
====================================
ACTIVE LINK
====================================
*/

.header__link--active {

    color: var(--color-primary);

}


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

.hero__stats {

    display: grid;

    /* 2x2 statt 4 nebeneinander: die Kacheln liegen in der schmalen
       linken Hero-Spalte – nur so passen "On-Demand"/"DIN / ISO" hinein */

    grid-template-columns: repeat(2,1fr);

    gap: 1rem;

    margin-top: 4rem;

}


.hero-stat {

    background: white;

    padding: 1.5rem;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

}


.hero-stat__number {

    display: block;

    color: var(--color-primary);

    /* kompakt halten und nur an Leerzeichen/Bindestrich umbrechen
       (nicht mitten im Wort), damit nichts über den Rand läuft */

    font-size: 1.6rem;

    overflow-wrap: normal;

    font-weight: 700;

    margin-bottom: .5rem;

}


.hero-stat__text {

    color: var(--color-text-light);

}