*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Farben */
    --color-background-primary: rgb(238, 239, 240);
    --color-background-secondary: rgb(248, 248, 249);
    --color-text: #111111;
    --color-primary: rgb(153, 181, 205);
    --color-secondary: #3e5467;
    --color-accent: #EE3124;
    --color-border: #dcdcdc;
  
    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-s: 0.5rem;
    --spacing-m: 1rem;
    --spacing-l: 2rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 6rem;
  
    /* Typografie */
    --font-family: 'Poppins', Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-s: 0.875rem;
    --font-size-l: 1.25rem;
    --font-size-xl: 2rem;
  
    /* Container */
    --container-width: 1400px;
  
    /* Animationen */
    --transition-speed: 0.3s;

    /* Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
}

/* GLOBAL */

html,
body{
    font-family: var(--font-family);
    background-color: var(--color-background-secondary);
}

body{
    width: 100%;
    max-width: 1920px;
    margin: auto;
}

.block{
    padding: clamp(var(--spacing-l), 3vw, var(--spacing-xl));
}

h1{
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

h2{
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
}

main{
    width: 100%;
    position: relative;
    height: 100%;
    margin-bottom: var(--spacing-l);
}

/* GENERAL ELEMENTS*/

.button{
    padding: var(--spacing-m) var(--spacing-l);
    font-weight: 500;
}

.button-primary{
    color: white;
    text-decoration: none;
    background-color: var(--color-primary);
    transition: all ease-in-out 200ms;
}

.button-primary:hover{
    background-color: var(--color-secondary);
    border-bottom: 1px solid var(--color-accent);
}

a.card-linked{
    text-decoration: none;
    color: inherit;
}

section.cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Basis-Card-Stile (gemeinsam genutzt) */
.card{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    transition: all ease 200ms;
    height: 100%;
    cursor: default;
}

.headline{
    text-align: center;
    width: 100%;
    padding: clamp(var(--spacing-l), 3vw, var(--spacing-xl));
    text-transform: uppercase;
    color: var(--color-secondary);
    letter-spacing: .5rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}

.headline p{
    letter-spacing: normal;
    text-transform: none;
    max-width: 1020px;
    margin: auto;
}

/* HEADLINE-BORDER für alle relevanten Bereiche */
main.kernbereiche .headline,
main.branchen .headline,
main.leistungen .headline{
    border-bottom: 1px solid var(--color-accent);
}

/* HERO */

.hero h1{
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    color: var(--color-secondary);
    text-transform: uppercase;
}

main.hero{
    position: relative;
    display: flex;
    background-image: url('../img/office.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 70svh;
}

main.hero .block{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.2);
    min-height: 100%;
    width: 100%;
}

section.hero-copy{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    height: 100%;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
}

.hero-image--wrapper {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}

.hero-image--wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.cta-wrapper{
    display: flex;
}

/* KERNBEREICHE */

main.kernbereiche{
    background-color: var(--color-background-primary);
}

.kernbereiche .card{
    padding: clamp(var(--spacing-l), 3vw, var(--spacing-xl));
}

.kernbereiche .card:hover{
    background-color: var(--color-primary);
}

/* BADGES */

main.badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-l);
    width: 100%;
    padding: var(--spacing-xxl) var(--spacing-l);
    background-color: var(--color-background-secondary);
}

.badge img {
    max-height: clamp(68px, 8vh, 100px);
    width: auto;
    height: auto;
    display: block;
}

/* BRANCHENFOKUS */

main.branchen{
    background-color: var(--color-secondary);
    color: white;
}

main.branchen .headline{
    color: white;
}

.branchen section.cards{
    gap: var(--spacing-m);
    padding: var(--spacing-m);
}

.branchen .card{
    justify-content: space-between;
    padding: clamp(var(--spacing-m), 3vw, var(--spacing-l));
    backdrop-filter: blur(0px);
    background: rgba(0, 0, 0, 0.6);
    min-height: 320px;
}

.branchen .card:hover{
    background-color: var(--color-primary);
    backdrop-filter: blur(18px);
    background: rgba(223, 223, 223, 0.2);
}

/* Gemeinsame Hover-Textfarben für alle Card-Bereiche */
.kernbereiche .card:hover p,
.branchen .card:hover p,
.leistungen .card:hover p{
    color: white;
}

.kernbereiche .card:hover h3,
.branchen .card:hover h3,
.leistungen .card:hover h3{
    color: var(--color-secondary);
}

/* Gemeinsame Background-Eigenschaften für Branchen-Cards */
#card-logistik,
#card-gesundheit,
#card-industrie{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#card-logistik{
    background-image: url(../img/AdobeStock_64234043-1024x683.jpeg);
}

#card-gesundheit{
    background-image: url(../img/AdobeStock_172382536-1024x683.jpeg);
}

#card-industrie{
    background-image: url(../img/AdobeStock_301204467-1024x684.jpeg);
}

/* LEISTUNGEN */

main.leistungen{
    background-color: var(--color-background-secondary);
}

main.leistungen .cards{
    grid-template-columns: repeat(3, 1fr);
    padding-top: var(--spacing-l);
}

@media (max-width: 1024px) {
    main.leistungen .cards{
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

.leistungen .card{
    padding: var(--spacing-m) clamp(var(--spacing-l), 3vw, var(--spacing-xl)) ;
    min-height: unset;
}

.leistungen .card h3{
    color: var(--color-secondary);
    transition: all ease 200ms;
}

.leistungen .card p{
    transition: all ease 200ms;
}

.leistungen .card:hover p{
    color: var(--color-secondary);
}

/* TEAM */

main.team{
    background-color: var(--color-primary);
}

.team .headline{
    color: white;
}

.team section.cards{
    display: flex;
    margin: auto;
    max-width: max-content;
    gap: var(--spacing-m);
    overflow-x: scroll;
    overflow-y: hidden;
    padding: var(--spacing-l);
    scroll-snap-type: x mandatory;
    height: 100%;
    box-sizing: border-box;
}
    
    
.team .card{
    all: unset;
    position: relative;
    min-width: 280px;
    max-width: 320px;
    width: 100%;
    scroll-snap-align: center;
    gap: 0;
    display: flex;
    flex-direction: column;
    transition: all ease 200ms;
}

.team .card-head{
    position: relative;
}

.team-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.team-image img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    display: block;
    object-fit: cover;
    object-position: center;
}
          
.team .card .team-tags{
    position: absolute;
    padding: var(--spacing-s);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    align-items: end;
}

.team .card .team-tag{
    background-color: var(--color-secondary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-s);
    border-radius: 4px;
    width: max-content;
    font-size: .75rem;
}


.team .card .card-details{
    margin-top: auto;
    background-color: var(--color-background-secondary);
    width: 100%;
    height: 100%;
    padding: var(--spacing-m);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    justify-content: space-between;
}

.team .card .team-name{
    font-weight: 600;
    color: var(--color-secondary);
    font-size: clamp(1rem, 1vw, 1.25rem);
    transition: all ease 200ms;
}

.team .card .team-job{
    font-weight: 500;
    color: var(--color-secondary);
    font-size: clamp(.85rem, 1vw, .75rem);
}

.team-member-contact{
    font-size: clamp(.85rem, .95vw, 1rem);
}
.team-member-contact a{
    text-decoration: none;
    color: inherit;
}

.team .card:hover .team-name{
    color: var(--color-accent);
}