/* =====================
   GRUNDSYSTEM
===================== */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI", Arial, sans-serif;
}


body {

    background:#080b12;
    color:#ffffff;
    line-height:1.6;

}


a {

    color:inherit;

}


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


header {

    position:fixed;
    width:100%;
    top:0;
    z-index:1000;

    background:rgba(8,11,18,.9);

    backdrop-filter:blur(10px);

}



.navbar {

    max-width:1200px;

    height:80px;

    margin:auto;

    padding:0 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img {

    height:55px;

}



.nav-links {

    display:flex;

    list-style:none;

    gap:35px;

}



.nav-links a {

    color:white;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}



.nav-links a:hover {

    color:#00a8ff;

}



.menu-toggle {

    display:none;

    font-size:32px;

    cursor:pointer;

}



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


.hero {

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:0 10%;

    background:

    linear-gradient(
        90deg,
        rgba(8,11,18,.95),
        rgba(8,11,18,.65)
    ),

    url("../img/server.jpg");

    background-size:cover;

    background-position:center;

}



.small-hero {

    min-height:60vh;

}



.hero-content {

    max-width:800px;

}



.hero-badge {

    display:inline-block;

    padding:8px 18px;

    border:1px solid #00a8ff;

    border-radius:30px;

    color:#00a8ff;

    margin-bottom:25px;

    letter-spacing:2px;

    font-size:14px;

}



.hero h1 {

    font-size:64px;

    line-height:1.1;

    margin-bottom:25px;

}



.hero h1 span {

    color:#00a8ff;

}



.hero p {

    font-size:20px;

    color:#d0d0d0;

    margin-bottom:40px;

}



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


.hero-buttons {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



.button {

    display:inline-block;

    padding:15px 35px;

    background:#00a8ff;

    color:white;

    text-decoration:none;

    border-radius:6px;

    font-weight:bold;

    transition:.3s;

}



.button:hover {

    background:#0077b6;

    transform:translateY(-3px);

}



.button.secondary {

    background:transparent;

    border:1px solid #00a8ff;

}



.button.secondary:hover {

    background:#00a8ff;

}



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


.stats {

    display:grid;

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

    gap:30px;

    padding:40px 10%;

    text-align:center;

    background:#05070c;

}



.stats strong {

    font-size:40px;

    color:#00a8ff;

}



.stats p {

    color:#aaa;

}



/* =====================
   SECTIONS
===================== */


section {

    padding:100px 10%;

}



h2 {

    text-align:center;

    font-size:42px;

    margin-bottom:50px;

}



/* =====================
   KARTEN
===================== */


.cards {

    display:grid;

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

    gap:30px;

}



.card {

    background:

    linear-gradient(
        145deg,
        #111827,
        #0b1220
    );

    padding:35px;

    border-radius:15px;

    border:1px solid #1e293b;

    transition:.35s;

}



.card:hover {

    transform:translateY(-10px);

    border-color:#00a8ff;

    box-shadow:

    0 20px 40px rgba(0,168,255,.15);

}



.card h3 {

    color:#00a8ff;

    margin-bottom:15px;

}



/* =====================
   TECHNOLOGIEN
===================== */


.technology {

    background:#0d111b;

}



.tech-grid {

    display:grid;

    grid-template-columns:

    repeat(4,minmax(150px,220px));

    justify-content:center;

    gap:25px;

}



.tech {

    background:

    linear-gradient(
        145deg,
        #111827,
        #0b1220
    );

    padding:25px;

    min-height:170px;

    border-radius:15px;

    border:1px solid #1f2937;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.35s;

}



.tech-icon {

    font-size:45px;

    margin-bottom:15px;

}



.tech h3 {

    color:#00a8ff;

    margin-bottom:10px;

}



.tech p {

    color:#aeb8c5;

    font-size:14px;

}



.tech:hover {

    transform:translateY(-8px);

    border-color:#00a8ff;

}
/* =====================
   KONTAKT
===================== */


.contact-area {

    display:grid;

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

    gap:50px;

}



.contact-box,
.contact-info {

    background:#111827;

    padding:35px;

    border-radius:12px;

}



.contact-box h2,
.contact-info h2 {

    text-align:left;

}



form {

    display:flex;

    flex-direction:column;

    gap:15px;

}



input,
textarea {

    background:#080b12;

    border:1px solid #263244;

    color:white;

    padding:15px;

    border-radius:6px;

    font-size:16px;

}



input:focus,
textarea:focus {

    outline:none;

    border-color:#00a8ff;

}



/* =====================
   RECHTLICHE SEITEN
===================== */


.legal {

    max-width:1000px;

    margin:auto;

}



.legal h2 {

    text-align:left;

    color:#00a8ff;

}



.legal p {

    color:#ccc;

    font-size:18px;

}



/* =====================
   UNTERNEHMENS-ZEITSTRAHL
===================== */


.timeline-section {

    background:#080b12;

}



.timeline {

    position:relative;

    max-width:1000px;

    margin:auto;

    padding:40px 0;

}



/* Linie */

.timeline::before {

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:3px;

    background:

    linear-gradient(
        to bottom,
        transparent,
        #00a8ff 10%,
        #00a8ff 90%,
        transparent
    );

    transform:translateX(-50%);

}



/* Eintrag */


.timeline-item {

    position:relative;

    width:50%;

    padding:25px 45px;

}



.timeline-item:nth-child(odd) {

    left:0;

    text-align:right;

}



.timeline-item:nth-child(even) {

    left:50%;

}



/* Punkt */


.timeline-dot {

    position:absolute;

    top:45px;

    width:22px;

    height:22px;

    background:#00a8ff;

    border-radius:50%;

    box-shadow:

    0 0 0 6px rgba(0,168,255,.15),

    0 0 25px rgba(0,168,255,.8);

}



.timeline-item:nth-child(odd) .timeline-dot {

    right:-11px;

}



.timeline-item:nth-child(even) .timeline-dot {

    left:-11px;

}



/* Karte */


.timeline-content {

    background:

    linear-gradient(
        145deg,
        #111827,
        #0b1220
    );

    border:1px solid #1e293b;

    border-radius:18px;

    padding:35px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}



.timeline-content::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:#00a8ff;

}



.timeline-content:hover {

    transform:translateY(-8px);

    border-color:#00a8ff;

    box-shadow:

    0 20px 45px rgba(0,168,255,.18);

}



.timeline-content span {

    display:block;

    color:#00a8ff;

    font-size:34px;

    font-weight:700;

    margin-bottom:10px;

}



.timeline-content h3 {

    font-size:24px;

    margin-bottom:15px;

}



.timeline-content p {

    color:#cbd5e1;

    line-height:1.7;

}



/* Erster Meilenstein */

.timeline-item:first-child .timeline-content span {

    color:#d4af37;

}



.timeline-item:first-child .timeline-content::before {

    background:#d4af37;

}



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


footer {

    background:#05070c;

    padding:60px 10% 20px;

    border-top:1px solid #1f2937;

}



.footer-grid {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:40px;

}



.footer-column h3 {

    color:#00a8ff;

    margin-bottom:20px;

}



.footer-column p,
.footer-column li {

    color:#aeb8c5;

}



.footer-column ul {

    list-style:none;

}



.footer-column li {

    margin-bottom:12px;

}



.footer-column a {

    color:#aeb8c5;

    text-decoration:none;

}



.footer-column a:hover {

    color:#00a8ff;

}



.footer-bottom {

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid #1f2937;

    text-align:center;

    color:#667085;

}



/* =====================
   RESPONSIVE
===================== */


@media(max-width:1000px){


.tech-grid {

    grid-template-columns:
    repeat(2,minmax(150px,220px));

}


}



@media(max-width:850px){


.nav-links {

    position:absolute;

    top:80px;

    right:0;

    width:100%;

    background:#080b12;

    flex-direction:column;

    text-align:center;

    padding:30px;

    display:none;

}



.nav-links.active {

    display:flex;

}



.menu-toggle {

    display:block;

}



.hero h1 {

    font-size:42px;

}



section {

    padding:70px 5%;

}



/* Timeline mobil */


.timeline::before {

    left:12px;

}



.timeline-item,
.timeline-item:nth-child(even),
.timeline-item:nth-child(odd) {

    width:100%;

    left:0;

    padding-left:50px;

    padding-right:0;

    text-align:left;

}



.timeline-item:nth-child(odd) .timeline-dot,
.timeline-item:nth-child(even) .timeline-dot {

    left:1px;

    right:auto;

}



}



@media(max-width:550px){


.tech-grid {

    grid-template-columns:1fr;

}



.hero h1 {

    font-size:36px;

}



.timeline-content {

    padding:25px;

}



.timeline-content span {

    font-size:28px;

}


}

/* =====================
   GRÜNDERKARTE 1878
===================== */


.founder-card {

    background:

    linear-gradient(
        rgba(8,11,18,.82),
        rgba(8,11,18,.95)
    ),

    url("../img/proebstl.jpg");


    background-size:cover;

    background-position:center;

    min-height:350px;

}



.founder-card span {

    color:#d4af37;

}



.founder-card::before {

    background:#d4af37;

}