/* =========================================
   HERO (INDEX)
========================================= */

.hero{
    padding:280px 20px 80px;
    max-width:1100px;
    margin:auto;
}

.hero h1{
    font-size:clamp(2.8rem,6vw,4.8rem);
    line-height:1.1;
    margin-bottom:20px;
}

.hero h1 .intro{
    font-size:0.7em;
    font-weight:500;
    color:var(--black);
}

.accent-acht{
    font-family:'Inter',"Helvetica Neue",Arial,sans-serif;
    font-weight:700;
    letter-spacing:-0.5pt;
    text-transform:uppercase;
    background:radial-gradient(
        circle at var(--x,50%) var(--y,50%),
        #ff4d4d,
        #EC0016 35%,
        #7a0000
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;
}

.hero p{
    color:var(--gray-dark);
    max-width:500px;
    margin-bottom:30px;
}

.line{
    height:2px;
    width:100%;
    background:var(--red);
    margin-top:60px;
    opacity:0.5;
    animation:move 7s linear infinite;
}

@keyframes move{
    from{transform:translateX(-160vw);}
    to{transform:translateX(120vw);}
}

@media(max-width:700px){
    .hero{
        padding:240px 20px 80px;
        overflow:hidden;
    }
}


/* =========================================
   DIFFERENCE / USP (INDEX)
========================================= */

.difference{
    max-width:1100px;
    margin:auto;
    padding:70px 20px;
}

.difference-inner{
    background:#ffffff;
    border-radius:18px;
    padding:70px 60px;
    box-shadow:0 20px 60px rgba(0,0,0,0.07);
    border:1px solid rgba(0,0,0,0.04);
}

.difference-label{
    display:inline-block;
    color:var(--red);
    font-weight:700;
    letter-spacing:-0.5pt;
    margin-bottom:24px;
    font-size:0.9rem;
    text-transform:uppercase;
}

.difference h2{
    color:var(--black);
    font-size:clamp(1.8rem,4vw,2.6rem);
    line-height:1.15;
    max-width:780px;
    margin-bottom:28px;
    overflow-wrap:break-word;
    hyphens:auto;
}

.difference-intro{
    color:var(--gray-dark);
    font-size:1.05rem;
    line-height:1.7;
    max-width:720px;
    margin-bottom:60px;
}

.difference-grid{
    display:grid;
    gap:32px;
}

@media(min-width:800px){
    .difference-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

.difference-card{
    background:var(--light);
    border-radius:14px;
    padding:34px 30px;
    text-align:left;
    border:1px solid transparent;
    transition:all 0.25s ease;
}

.difference-card:hover,
.difference-card.is-scrolled{
    border-color:var(--red);
    transform:translateY(-4px);
    box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

.difference-card .number{
    display:block;
    color:var(--red);
    font-weight:700;
    margin-bottom:22px;
    font-size:0.9rem;
}

.difference-card h3{
    color:var(--black);
    margin-bottom:16px;
    font-size:1.1rem;
    line-height:1.35;
    transition:color 0.25s ease;
}

.difference-card:hover h3,
.difference-card.is-scrolled h3{
    color:var(--red);
}

.difference-card p{
    color:var(--gray);
    line-height:1.7;
    font-size:0.95rem;
}

.difference-closing{
    margin-top:60px;
    padding-top:34px;
    color:var(--gray-dark);
    line-height:1.7;
    max-width:780px;
    position:relative;
}

.difference-closing::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:60px;
    height:2px;
    background:var(--red);
    opacity:0.75;
}

@media(max-width:700px){
    .difference{
        padding:70px 20px;
        padding-top:40px;
    }

    .difference-inner{
        padding:45px 28px;
    }

    .difference-intro{
        margin-bottom:42px;
    }

    .difference-grid{
        gap:24px;
    }

    .difference-closing{
        margin-top:42px;
    }
}


/* =========================================
   TEAM TEASER (INDEX)
========================================= */

.team-teaser{
    max-width:1100px;
    margin:0 auto;
    padding:20px 20px 90px;
}

.team-teaser-inner{
    background:#ffffff;
    border-radius:18px;
    padding:55px 60px;
    text-align:left;
    border:1px solid rgba(0,0,0,0.04);
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
}

.team-teaser h2{
    color:var(--black);
    font-size:clamp(1.8rem,3vw,2.4rem);
    margin-bottom:18px;
    max-width:720px;
}

.team-teaser p{
    color:var(--gray-dark);
    max-width:650px;
    margin:0 0 32px;
    line-height:1.7;
}

@media(max-width:700px){
    .team-teaser{
        padding:20px 20px 70px;
    }

    .team-teaser-inner{
        padding:42px 28px;
    }
}


/* =========================================
   SERVICES + USP GEMEINSAMER BLOCK (INDEX)
========================================= */

/* Gemeinsamer Block – Breite wie die anderen Hauptbereiche */
.services-usp-block{
    max-width:1060px;
    width:calc(100% - 40px);
    margin:0 auto;
    padding:60px;
    background:var(--light);
    border-radius:18px;
    border:none;
    box-shadow:0 20px 60px rgba(0,0,0,0.07);
    scroll-margin-top:140px;
}

/* Innerer Inhaltscontainer */
.services-usp-inner{
    width:100%;
    margin:0;
    padding:0;
}

/* Leistungen-Bereich innerhalb des gemeinsamen Blocks */
.services-usp-inner .services{
    padding:0;
    margin:0;
    background:transparent;
}

/* Leistungen-Überschrift */
.services-usp-inner .services h2{
    margin-bottom:30px;
}

/* USP-Bereich innerhalb des gemeinsamen Blocks */
.services-usp-inner .usp{
    position:relative;
    padding:34px 0 0;
    margin:60px 0 0;
    background:transparent;
}

/* Rote Trennlinie vor dem USP-Bereich */
.services-usp-inner .usp::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:60px;
    height:2px;
    background:var(--red);
    opacity:0.75;
    border-radius:0;
}

/* Mobile Anpassung */
@media(max-width:700px){
    .services-usp-block{
        width:calc(100% - 40px);
        padding:42px 28px;
        border-radius:18px;
    }

    .services-usp-inner .services{
    padding-bottom:0;
    }

    .services-usp-inner .usp{
        margin-top:42px;
        padding-top:30px;
        padding-bottom:0;
    }
}

.grid{
    display:grid;
    gap:20px;
    grid-template-columns:1fr;
}

@media(min-width:700px){
    .grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(min-width:1000px){
    .grid{
        grid-template-columns:repeat(3,1fr);
    }
}

.service{
    background:#ffffff;
    padding:30px;
    border-radius:12px;
    border:1px solid #eee;
    color:var(--gray-dark);
    transition:all 0.25s ease;
}

.service strong{
    display:block;
    margin-bottom:6px;
    color:var(--black);
}

.service:hover,
.service.is-scrolled{
    border-color:var(--red);
    transform:translateY(-4px);
    box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

.service:hover strong,
.service.is-scrolled strong{
    color:var(--red);
}


/* =========================================
   USP (INDEX)
========================================= */

.usp h2{
    color:var(--black);
}

.usp p{
    color:var(--gray-dark);
    line-height:1.7;
}

@media(max-width:700px){
    .usp{
        padding-bottom:80px;
    }

    .usp p{
        line-height:1.7;
        max-width:720px;
        overflow-wrap:break-word;
    }
}


/* =========================================
   TRUST (INDEX)
========================================= */

.trust{
    max-width:1060px;
    width:calc(100% - 40px);
    margin:40px auto 0;
    background:#ffffff;
    border-radius:18px;
    padding:60px;
    border:1px solid rgba(0,0,0,0.04);
    box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

.trust h2{
    color:var(--black);
}

.trust ul{
    list-style:none;
}

.trust li{
    position:relative;
    padding-left:32px; /* mehr Platz fürs Icon */
    margin-bottom:16px;
    color:var(--gray-dark);
    line-height:1.5;
}

.trust li:last-child{
    margin-bottom:0;
}

.trust li::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);

    width:16px;
    height:16px;

    background-image:url("/pictures/GLEISACHT_Aufzählungszeichen_kreis_freigestellt.png");
    background-size:contain;
    background-repeat:no-repeat;

    display:block;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.trust strong{
    color:var(--black);
}

@media(max-width:700px){
    .trust{
        padding:40px 24px;
        margin-top:20px;
    }
}


/* =========================================
   STANDARDS (INDEX)
========================================= */

.standards{
    max-width:1060px;
    width:calc(100% - 40px);
    margin:0 auto;
    padding:50px 60px;
}

.standards h2{
    color:var(--black);
    font-size:clamp(1.8rem,3vw,2.4rem);
    line-height:1.15;
    margin-bottom:30px;
}

.standards-grid{
    display:grid;
    gap:20px;
}

@media(max-width:700px){
    .standards{
        width:calc(100% - 40px);
        padding:50px 28px;
    }
}

@media(min-width:800px){
    .standards-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

.standard-item{
    background:#ffffff;
    border:1px solid rgba(0,0,0,0.04);
    border-radius:14px;
    padding:28px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);

    transition:all 0.25s ease;
}

.standard-item:hover,
.standard-item.is-scrolled{
    border-color:var(--red);
    transform:translateY(-4px);
    box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

.standard-item:hover strong,
.standard-item.is-scrolled strong{
    color:var(--red);
}

.standard-item strong{
    display:block;
    color:var(--black);
    margin-bottom:12px;
}

.standard-item p{
    color:var(--gray-dark);
    line-height:1.7;
    font-size:0.95rem;
}

.standard-item a{
    color:var(--black);
    text-decoration:none;
    font-weight:700;
    border-bottom:1px solid transparent;
    transition:
        color 0.2s ease,
        border-bottom-color 0.2s ease;
}

.standard-item a:hover{
    color:var(--red);
    border-bottom-color:var(--red);
}


/* =========================================
   CONTACT (INDEX)
========================================= */

.contact{
    text-align:center;
}

.phone{
    color:var(--black);
    font-size:1.6rem;
    font-weight:700;
    margin:15px 0;
    text-align:center;
    white-space:nowrap;
}

.phone-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--black);
    text-decoration:none;
    font-weight:700;
    width:fit-content;
    max-width:fit-content;
    margin:0 auto;
    padding:0;
    line-height:1.2;
    transition:color 0.2s ease;
}

.phone-link:hover{
    color:var(--red);
}

@media(max-width:480px){
    .phone{
        font-size:1.15rem;
    }

    .phone svg{
        width:24px;
        height:24px;
        flex-shrink:0;
    }
}

.email{
    display:block;
    width:fit-content;
    max-width:fit-content;
    margin:0 auto 25px;
    padding:0;
    color:var(--black);
    text-decoration:none;
    font-weight:400;
}

.contact .email{
    width:fit-content;
    max-width:fit-content;
    margin-left:auto;
    margin-right:auto;
}

.email-part{
    color:var(--black);
    font-weight:400;
    transition:color 0.2s ease, font-weight 0.2s ease;
}

.email .gleis{
    color:var(--black);
    font-weight:400;
    letter-spacing:-0.5pt;
}

.email .acht{
    color:var(--red);
    font-weight:700;
    letter-spacing:-0.5pt;
}

.email-link:hover .email-part{
    color:var(--red);
    font-weight:700;
}

.email-link:hover .gleis{
    color:var(--black);
    font-weight:400;
    letter-spacing:-0.5pt;
}

.email-link:hover .acht{
    color:var(--red);
    font-weight:700;
    letter-spacing:-0.5pt;
}

.contact-phone:hover{
    color:var(--red);
    font-weight:700;
    border-bottom-color:transparent;
}

.email-link:hover{
    color:var(--red);
    font-weight:700;
    border-bottom-color:transparent;
    text-decoration:none;
}

.email-link:hover .gleis{
    color:var(--black);
    font-weight:400;
    letter-spacing:-0.5pt;
}

.email-link:hover .acht{
    color:var(--red);
    font-weight:700;
    letter-spacing:-0.5pt;
}

/* Layout: Logo links / Inhalt rechts */
.contact-layout{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:50px;
    flex-wrap:wrap;
}

/* Logo Bereich */
.contact-logo-wrap{
    flex-shrink:0;
}

.contact-logo{
    width:160px;
    height:auto;
    display:block;
    opacity:0.95;
}

/* Inhalt rechts leicht linksbündig */
.contact-content{
    max-width:400px;
    text-align:left;
}

.contact-content .cta{
    display:inline-block;
    margin-top:10px;
}

/* Button zentrieren */
.contact-content .cta{
    display:block;
    margin:15px auto 0;
    width:fit-content;
}

/* Mobile Anpassung */
@media(max-width:700px){
    .contact-layout{
        flex-direction:column;
        text-align:center;
        gap:30px;
    }

    .contact-content{
        text-align:center;
    }

    .contact-logo{
        width:90px;
    }
}


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

/* Hauptcontainer der Team-Seite */
.section{
    flex:1;
    max-width:900px;
    margin:160px auto 80px;
    padding:0 20px;
    text-align:center;
    scroll-margin-top:140px;
}

/* Hauptüberschrift */
.section h1{
    color:var(--black);
    font-size:clamp(2rem,4vw,3rem);
    margin-bottom:25px;
}

/* Mobile Abstand zum fixierten Header */
@media(max-width:700px){
    .section{
        margin:140px auto 60px;
    }
}

/* Einleitung */
.intro{
    color:var(--gray-dark);
    line-height:1.6;
    max-width:650px;
    margin:auto;
    margin-bottom:60px;
}

/* Raster */
.team-grid{
    display:grid;
    gap:60px;
    margin-bottom:90px;
}

@media(min-width:700px){
    .team-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* Einzelne Person */
.person{
    text-align:center;
}

/* Bildcontainer */
.image-wrapper{
    position:relative;
    width:160px;
    height:160px;
    margin:0 auto 20px;
}

/* Beide Bilder liegen genau übereinander */
.image-wrapper img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    transition:opacity 0.4s ease;
}

/* Fun-Bild standardmäßig unsichtbar */
.image-wrapper img.fun{
    opacity:0;
}

/* Desktop-Hover-Bildwechsel */
@media (hover:hover) and (pointer:fine){
    .image-wrapper:hover img.fun{
        opacity:1;
    }

    .image-wrapper:hover img.main{
        opacity:0;
    }
}

/* Touch-Geräte: antippbar + Hinweis-Icon */
@media (hover:none), (pointer:coarse){
    .image-wrapper{
        cursor:pointer;
    }

    .image-wrapper::after{
        content:"↻";
        position:absolute;
        right:4px;
        bottom:4px;
        width:34px;
        height:34px;
        border-radius:50%;
        background:var(--red);
        color:white;
        font-size:1rem;
        font-weight:700;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 8px 20px rgba(0,0,0,0.18);
        z-index:3;
        opacity:0.95;
    }

    .image-wrapper.show-fun img.fun{
        opacity:1;
    }

    .image-wrapper.show-fun img.main{
        opacity:0;
    }
}

/* Name */
.person h3{
    color:var(--black);
    font-size:1.2rem;
    margin-bottom:6px;
}

/* Rolle */
.role{
    color:var(--gray-dark);
    margin-bottom:12px;
}

/* Zuständigkeiten */
.structure{
    font-size:0.9rem;
    color:var(--gray);
    line-height:1.5;
    margin-bottom:18px;
}

/* Kontaktbereich */
.contact-details{
    font-size:0.9rem;
    line-height:1.7;
    margin-bottom:24px;
}

.contact-details a{
    color:var(--black);
    text-decoration:none;
}

.contact-details a:hover{
    color:var(--red);
    font-weight:700;
}

/* Zitat */
.quote{
    margin:0 auto;
    padding-top:20px;
    max-width:340px;
    color:var(--gray-dark);
    font-size:0.95rem;
    line-height:1.6;
    position:relative;
}

.quote::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:42px;
    height:2px;
    background:var(--red);
    opacity:0.75;
    border-radius:2px;
}

/* Gemeinsamer Story-Text */
.story{
    color:var(--gray-dark);
    max-width:600px;
    margin:100px auto 40px;
    padding-top:30px;
    position:relative;
    line-height:1.6;
}

.story::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:2px;
    background:var(--red);
    opacity:0.75;
    border-radius:2px;
}

/* Karriere-Box */
.career-teaser{
    max-width:700px;
    margin:70px auto 0;
    padding:40px;
    background:var(--light);
    border-radius:18px;
    text-align:center;
    border:1px solid rgba(0,0,0,0.04);
}

.career-teaser h2{
    margin-bottom:20px;
    font-size:clamp(1.5rem,3vw,2rem);
}

.career-teaser p{
    color:var(--gray-dark);
    line-height:1.7;
    margin-bottom:28px;
    text-align:justify;
    hyphens:auto;
    -webkit-hyphens:auto;
    overflow-wrap:break-word;
    word-break:normal;
}

.career-link{
    display:inline-block;
    background:var(--black);
    color:white;
    padding:14px 26px;
    border-radius:6px;
    text-decoration:none;
    font-weight:700;
    transition:background 0.25s ease;
}

.career-link:hover{
    background:var(--red);
}

@media(max-width:700px){
    .career-teaser{
        padding:36px 26px;
        margin-top:60px;
    }
}

/* Kunden-CTA – bewusst näher an der Career-Box */
.client-teaser{
    max-width:700px;
    margin:70px auto 0;
    padding:40px;
    background:var(--light);
    border-radius:18px;
    text-align:center;
    border:1px solid rgba(0,0,0,0.04);
    box-shadow:none;
}

.client-teaser h2{
    color:var(--black);
    margin-bottom:18px;
    font-size:clamp(1.4rem,3vw,1.8rem);
    line-height:1.25;
}

.client-teaser p{
    color:var(--gray-dark);
    line-height:1.7;
    margin-bottom:28px;
}

.client-teaser p a{
    color:var(--black);
    text-decoration:none;
    font-weight:700;
    border-bottom:1px solid transparent;
    transition:
        color 0.2s ease,
        border-bottom-color 0.2s ease;
}

.client-teaser p a:hover{
    color:var(--red);
    border-bottom-color:transparent;
    text-decoration:none;
}

.client-link{
    display:inline-block;
    background:var(--red);
    color:white;
    padding:14px 26px;
    border-radius:6px;
    text-decoration:none;
    font-weight:700;
    transition:background 0.25s ease;
}

.client-link:hover{
    background:#c40012;
}

@media(max-width:700px){
    .client-teaser{
        padding:36px 26px;
        margin-top:55px;
    }
}


/* =========================================
   IMPRESSUM
========================================= */

/* Oberer Impressum-Bereich */
.imprint-hero{
    padding:158px 20px 24px;
    max-width:1100px;
    margin:auto;
    scroll-margin-top:150px;
}

/* Hauptüberschrift – etwas ruhiger */
.imprint-hero h1{
    display:inline-block;
    position:relative;
    font-size:clamp(2.35rem,4.7vw,3.7rem);
    line-height:1.08;
    color:var(--black);
    margin-bottom:0;
    padding-bottom:12px;
}

/* Dezenter roter Akzent unter dem Seitentitel */
.imprint-hero h1::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:46px;
    height:2px;
    background:var(--red);
    opacity:0.58;
    border-radius:2px;
}

@media(max-width:700px){
    .imprint-hero{
        padding:136px 20px 20px;
    }
}

/* Inhaltsbereich */
.imprint-section{
    padding:18px 20px 26px;
    max-width:1100px;
    margin:auto;
    scroll-margin-top:140px;
}

/* Karte – kompakter und ruhiger */
.imprint-card{
    background:#ffffff;
    border-radius:16px;
    padding:36px 40px;
    box-shadow:0 12px 34px rgba(0,0,0,0.045);
    border:1px solid rgba(0,0,0,0.05);
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

@media(max-width:700px){
    .imprint-card{
        padding:28px 22px;
        border-radius:14px;
        overflow:hidden;
    }
}

/* Einzelne Inhaltsblöcke – enger gesetzt */
.imprint-block{
    margin-bottom:18px;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.imprint-block:last-child{
    margin-bottom:0;
}

@media(max-width:700px){
    .imprint-block{
        margin-bottom:16px;
    }
}

/* Zwischenüberschriften – OHNE roten Balken davor */
.imprint-block h2{
    color:var(--black);
    font-size:clamp(1.04rem,1.65vw,1.16rem);
    line-height:1.28;
    margin-bottom:8px;
    padding-left:0;
    border-left:none;
    letter-spacing:-0.15pt;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

/* Firmenname im ersten Block größer, aber nicht dominant */
.imprint-block:first-child h2{
    margin-bottom:10px;
    font-size:clamp(1.42rem,2.35vw,1.85rem);
    line-height:1.12;
}

.imprint-block:first-child{
    margin-bottom:26px;
}

/* Rechtsform bewusst etwas ruhiger */
.legal-form{
    font-weight:400;
    color:var(--gray-dark);
}

/* Fließtext kompakter */
.imprint-block p{
    color:var(--gray-dark);
    line-height:1.48;
    font-size:0.98rem;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.imprint-block strong{
    color:var(--black);
    font-weight:700;
}

/* Links im Impressum */
.imprint-block a{
    color:var(--black);
    text-decoration:none;
    font-weight:400;
    border-bottom:1px solid transparent;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
    transition:
        color 0.2s ease,
        font-weight 0.2s ease,
        border-bottom-color 0.2s ease;
}

.imprint-block a:hover{
    color:var(--red);
    border-bottom-color:transparent;
}

/* Mobile Absicherung für lange Begriffe */
@media(max-width:700px){
    .imprint-block h2,
    .imprint-block p,
    .imprint-block a{
        overflow-wrap:anywhere;
        word-break:normal;
        hyphens:auto;
        -webkit-hyphens:auto;
    }

    .nowrap{
        white-space:nowrap;
    }
}

/* Zurück-zur-Startseite-Bereich – ebenfalls dezenter */
.back-link-box{
    margin-top:34px;
    padding-top:20px;
    position:relative;
    text-align:left;
}

.back-link-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:42px;
    height:2px;
    background:var(--red);
    opacity:0.5;
}


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

.privacy-hero{
    padding:170px 20px 35px;
    max-width:1100px;
    margin:auto;
    scroll-margin-top:160px;
}

.privacy-hero h1{
    display:inline-block;
    position:relative;
    font-size:clamp(2.4rem,5vw,4rem);
    line-height:1.1;
    color:var(--black);
    margin-bottom:0;
    padding-bottom:18px;
    overflow-wrap:break-word;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.privacy-hero h1::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:64px;
    height:2px;
    background:var(--red);
    opacity:0.85;
    border-radius:2px;
}

@media(max-width:700px){
    .privacy-hero{
        padding:140px 20px 30px;
    }
}


/* =========================================
   PRIVACY LAYOUT
========================================= */

.privacy-section{
    max-width:1100px;
    margin:auto;
    padding:30px 20px;
    scroll-margin-top:140px;
}

.privacy-card{
    background:#ffffff;
    border-radius:18px;
    padding:52px 58px;
    box-shadow:0 20px 60px rgba(0,0,0,0.07);
    border:1px solid rgba(0,0,0,0.04);
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.nowrap{
    white-space:nowrap;
}

@media(max-width:700px){
    .privacy-card{
        padding:34px 24px;
        overflow:hidden;
    }
}


/* =========================================
   PRIVACY CONTENT
========================================= */

.privacy-block{
    margin-bottom:34px;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.privacy-block:last-child{
    margin-bottom:0;
}

.privacy-block h2{
    color:var(--black);
    font-size:clamp(1.35rem,2.4vw,1.75rem);
    line-height:1.25;
    margin-bottom:22px;
    padding-left:14px;
    border-left:4px solid var(--red);
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.privacy-block h3{
    color:var(--black);
    font-size:clamp(1.1rem,2vw,1.3rem);
    line-height:1.3;
    margin-top:26px;
    margin-bottom:10px;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.privacy-block h4{
    color:var(--black);
    font-size:1rem;
    line-height:1.35;
    margin-top:18px;
    margin-bottom:8px;
    font-weight:700;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.privacy-block p{
    color:var(--gray-dark);
    line-height:1.62;
    font-size:0.98rem;
    margin-bottom:14px;
    text-align:justify;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.privacy-block ul{
    list-style:none;
    margin:0 0 18px 0;
    padding:0;

    /* behalten */
    color:var(--gray-dark);
    line-height:1.62;
    font-size:0.98rem;

    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.privacy-block li{
    position:relative;
    padding-left:30px;     /* Platz für dein Icon */
    margin-bottom:10px;
    text-align:justify;

    color:var(--gray-dark);
    line-height:1.6;
}

/* Custom Bullet */
.privacy-block li::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);

    width:14px;
    height:14px;

    background-image:url("/pictures/GLEISACHT_Aufzählungszeichen_kreis_freigestellt.png");
    background-size:contain;
    background-repeat:no-repeat;

    display:block;
}

.privacy-block a{
    color:var(--black);
    text-decoration:none;
    font-weight:700;
    border-bottom:1px solid transparent;
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
    -webkit-hyphens:auto;
    transition:
        color 0.2s ease,
        border-bottom-color 0.2s ease,
        font-weight 0.2s ease;
}

.privacy-block a:hover{
    color:var(--red);
    border-bottom-color:var(--red);
}


/* =========================================
   LEGAL NOTICE
========================================= */

.legal-notice{
    background:var(--light);
    border-radius:14px;
    padding:26px 28px;
    margin:28px 0;
    border:1px solid rgba(0,0,0,0.04);
}

.legal-notice p{
    color:var(--gray-dark);
    margin-bottom:14px;
    text-align:left;
}

.legal-notice p:last-child{
    margin-bottom:0;
}


/* =========================================
   MOBILE TEXT SAFETY
========================================= */

@media(max-width:700px){
    .privacy-block,
    .privacy-block h2,
    .privacy-block h3,
    .privacy-block h4,
    .privacy-block p,
    .privacy-block ul,
    .privacy-block a{
        overflow-wrap:anywhere;
        word-break:normal;
        hyphens:auto;
        -webkit-hyphens:auto;
    }

    .privacy-block p,
    .privacy-block li{
        text-align:left;
    }

    .privacy-block{
        margin-bottom:30px;
    }

    .privacy-block h2{
        margin-bottom:18px;
    }

    .privacy-block h3{
        margin-top:22px;
    }

    .legal-notice{
        padding:22px 20px;
    }

    .nowrap{
        white-space:nowrap;
    }
}


/* =========================================
   CONTACT LINKS (PRIVACY)
========================================= */

.privacy-block a.contact-phone{
    color:var(--black);
    text-decoration:none;
    font-weight:400;
    border-bottom:1px solid transparent;
    transition:
        color 0.2s ease,
        font-weight 0.2s ease,
        border-bottom-color 0.2s ease;
}

.privacy-block a.contact-phone:hover{
    color:var(--red);
    font-weight:700;
    border-bottom-color:transparent;
    text-decoration:none;
}

.privacy-block a.email-link{
    color:var(--black);
    text-decoration:none;
    font-weight:400;
    border-bottom:1px solid transparent;
    transition:
        color 0.2s ease,
        font-weight 0.2s ease,
        border-bottom-color 0.2s ease;
}

.email-part{
    color:var(--black);
    font-weight:400;
    transition:
        color 0.2s ease,
        font-weight 0.2s ease;
}

.email-link .gleis{
    color:var(--black);
    font-weight:400;
    letter-spacing:-0.5pt;
}

.email-link .acht{
    color:var(--red);
    font-weight:700;
    letter-spacing:-0.5pt;
}

.privacy-block a.email-link:hover{
    border-bottom-color:transparent;
    text-decoration:none;
}

.privacy-block a.email-link:hover .email-part{
    color:var(--red);
    font-weight:700;
}

.privacy-block a.email-link:hover .gleis{
    color:var(--black);
    font-weight:400;
    letter-spacing:-0.5pt;
}

.privacy-block a.email-link:hover .acht{
    color:var(--red);
    font-weight:700;
    letter-spacing:-0.5pt;
}


/* =========================================
   BACK CTA
========================================= */

.back-link-box{
    margin-top:48px;
    padding-top:30px;
    position:relative;
    text-align:left;
}

.back-link-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:60px;
    height:2px;
    background:var(--red);
    opacity:0.75;
}

.back-btn{
    display:inline-block;
    background:var(--red);
    color:white;
    padding:14px 28px;
    border-radius:6px;
    text-decoration:none;
    font-weight:700;
    transition:background 0.25s ease;
}

.back-btn:hover{
    background:#c40012;
}

/* =========================================
   ERROR PAGE
========================================= */

.error-page{
    --redirect-duration:15s;
}

/* Fehlerseite nutzt statischen Header */
.error-page .header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 30px;
    background:transparent;
    box-shadow:none;
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    z-index:1000;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

/* Keine Smart-Header-Effekte auf Error-Seite */
.error-page .header.smart-active,
.error-page .header.header-hidden,
.error-page .header.no-transition{
    padding:20px 30px;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

.error-page .logo{
    display:block;
    height:64px;
    width:auto;
    flex-shrink:0;
}

.error-page .logotype{
    display:block;
    height:26px;
    width:auto;
    flex-shrink:0;
}

.error-page .menu-icon{
    height:28px;
    transform:translateY(2px);
    transition:none;
}

/* Layout */
.error-main{
    flex:1;
    padding:44px 20px 90px;
}

.error-stage{
    max-width:1100px;
    margin:auto;
}

.error-layout{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
}

/* Linke Textspalte */
.error-copy{
    position:relative;
}

.error-code{
    color:var(--red);
    font-size:clamp(4.6rem,12vw,8rem);
    line-height:0.9;
    font-weight:800;
    letter-spacing:-0.07em;
    margin-bottom:28px;
}

.error-copy h1{
    display:inline-block;
    position:relative;
    color:var(--black);
    font-size:clamp(2.4rem,5vw,4.2rem);
    line-height:1.08;
    margin-bottom:28px;
    padding-bottom:18px;
}

.error-copy h1::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:64px;
    height:2px;
    background:var(--red);
    opacity:0.85;
    border-radius:2px;
}

.subtitle{
    color:var(--gray-dark);
    font-size:1.08rem;
    line-height:1.7;
    max-width:560px;
    margin-bottom:28px;
}

.error-actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.error-actions .back-btn,
.secondary-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:14px 26px;
    color:white;
    text-align:center;
    border-radius:6px;
    text-decoration:none;
    font-size:1rem;
    font-weight:700;
    line-height:1.2;
    box-sizing:border-box;
    white-space:normal;
    transition:background 0.25s ease;
}

.error-actions .back-btn{
    background:var(--red);
}

.error-actions .back-btn:hover{
    background:#c40012;
}

.secondary-link{
    background:var(--black);
    border-bottom:none;
}

.secondary-link:hover{
    color:white;
    background:var(--red);
    font-weight:700;
    border-bottom:none;
}

/* Rechte visuelle Spalte */
.error-visual{
    position:relative;
}

.error-panel{
    position:relative;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 58%, rgba(245,244,241,0.55) 100%);
    border-radius:18px;
    padding:48px 42px;
    border:1px solid rgba(26,26,26,0.06);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.07),
        inset 0 1px 0 rgba(255,255,255,0.85);
    overflow:hidden;
}

.error-panel::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:4px;
    background:
        linear-gradient(
            90deg,
            var(--red) 0%,
            rgba(236,0,22,0.85) 28%,
            rgba(236,0,22,0.22) 58%,
            transparent 100%
        );
    z-index:0;
    pointer-events:none;
}

.error-panel::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(26,26,26,0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(26,26,26,0.020) 1px, transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(135deg, transparent 0%, black 38%, black 100%);
    -webkit-mask-image:linear-gradient(135deg, transparent 0%, black 38%, black 100%);
    opacity:0.55;
    z-index:0;
    pointer-events:none;
}

.error-panel-inner{
    position:relative;
    z-index:1;
}

.error-label{
    display:inline-block;
    color:var(--red);
    font-weight:700;
    letter-spacing:-0.5pt;
    margin-bottom:22px;
    font-size:0.9rem;
    text-transform:uppercase;
}

.error-panel-title{
    color:var(--black);
    font-size:clamp(1.6rem,3vw,2.1rem);
    line-height:1.2;
    margin-bottom:18px;
}

.error-panel-text{
    color:var(--gray-dark);
    line-height:1.7;
    font-size:0.98rem;
    margin-bottom:30px;
}

/* Zugbereich */
.train-wrapper{
    position:relative;
    height:150px;
    overflow:hidden;
    margin:4px 0 20px;
    border-radius:10px;
}

.train-wrapper::before{
    content:none;
}

.train{
    position:absolute;
    left:-720px;
    bottom:6px;
    width:680px;
    animation:trainMove var(--redirect-duration) linear forwards;
    z-index:2;
}

.train svg{
    display:block;
    width:680px;
    height:auto;
    overflow:visible;
}

@keyframes trainMove{
    0%{left:-720px;}
    100%{left:112%;}
}

.train-inner{
    position:relative;
    animation:weight 1.6s ease-in-out infinite;
    transform-origin:center bottom;
}

@keyframes weight{
    0%{transform:translateY(0) rotate(0deg);}
    35%{transform:translateY(1px) rotate(-0.06deg);}
    65%{transform:translateY(2px) rotate(0.06deg);}
    100%{transform:translateY(0) rotate(0deg);}
}

.train-shadow{
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    height:15px;
    background:radial-gradient(ellipse at center, rgba(0,0,0,0.28) 0%, transparent 72%);
    filter:blur(3px);
    opacity:0.8;
}

.track{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:26px;
    z-index:1;
}

.track::before{
    content:"";
    position:absolute;
    left:-20px;
    right:-20px;
    bottom:0;
    height:24px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 20px,
            #1a1a1a 20px,
            #1a1a1a 29px
        );
    opacity:0.82;
}

.track::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:10px;
    height:9px;
    background:
        linear-gradient(
            to bottom,
            #1A1A1A 0 3px,
            transparent 3px 6px,
            #1A1A1A 6px 9px
        );
    border-radius:2px;
    box-shadow:0 2px 0 rgba(26,26,26,0.22);
}

.rail-spark{
    animation:spark 1.8s ease-in-out infinite;
    opacity:0;
}

@keyframes spark{
    0%,70%,100%{opacity:0; transform:translateY(0);}
    74%{opacity:1; transform:translateY(-1px);}
    78%{opacity:0.35; transform:translateY(1px);}
}

.beacon{
    animation:beaconBlink 0.9s steps(2,end) infinite;
    transform-origin:center;
}

@keyframes beaconBlink{
    0%,45%{opacity:1; filter:drop-shadow(0 0 5px rgba(236,0,22,0.75));}
    46%,100%{opacity:0.35; filter:none;}
}

.cabin-glow{
    animation:cabinGlow 2.4s ease-in-out infinite;
}

@keyframes cabinGlow{
    0%,100%{opacity:0.82;}
    50%{opacity:1;}
}

.rail-wheel{
    animation:wheelRoll 0.9s linear infinite;
    transform-box:fill-box;
    transform-origin:center;
}

@keyframes wheelRoll{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

.hook{
    animation:hookSwing 2s ease-in-out infinite;
    transform-box:fill-box;
    transform-origin:top center;
}

@keyframes hookSwing{
    0%,100%{transform:rotate(-2deg);}
    50%{transform:rotate(3deg);}
}

.crane-arm{
    animation:craneWork 4s ease-in-out infinite;
    transform-box:fill-box;
    transform-origin:25% 80%;
}

@keyframes craneWork{
    0%,100%{transform:rotate(0deg);}
    50%{transform:rotate(-1.5deg);}
}

.smoke{
    position:absolute;
    right:26px;
    top:-18px;
    width:95px;
    height:76px;
    z-index:20;
    pointer-events:none;
}

.smoke span{
    position:absolute;
    right:30px;
    top:38px;
    width:10px;
    height:10px;
    background:radial-gradient(circle, rgba(70,70,70,0.55) 0%, rgba(150,150,150,0.32) 46%, transparent 72%);
    border-radius:50%;
    filter:blur(0.25px);
    animation:smokeFlow 3.2s linear infinite;
}

.smoke span:nth-child(1){ animation-delay:0s; }
.smoke span:nth-child(2){ animation-delay:0.55s; }
.smoke span:nth-child(3){ animation-delay:1.1s; }
.smoke span:nth-child(4){ animation-delay:1.65s; }

@keyframes smokeFlow{
    0%{
        transform:translate(0,0) scale(0.45);
        opacity:0.78;
    }
    25%{
        transform:translate(-6px,-10px) scale(0.95);
        opacity:0.58;
    }
    60%{
        transform:translate(-22px,-24px) scale(1.45);
        opacity:0.30;
    }
    100%{
        transform:translate(-42px,-40px) scale(2.05);
        opacity:0;
    }
}

/* Fortschrittsleiste */
.progress-container{
    margin:30px auto 0;
}

.progress-text{
    color:var(--gray);
    font-size:0.92rem;
    margin-bottom:10px;
}

.progress-bar{
    width:100%;
    height:8px;
    background:#eee;
    border-radius:8px;
    overflow:hidden;
}

.progress-fill{
    height:100%;
    background:var(--red);
    animation:loadProgress var(--redirect-duration) linear forwards;
}

@keyframes loadProgress{
    from{width:0%;}
    to{width:100%;}
}

/* Mobile */
@media(max-width:900px){
    .error-layout{
        grid-template-columns:1fr;
        gap:46px;
    }

    .error-panel{
        max-width:680px;
    }
}

@media(max-width:700px){
    .error-main{
        padding:32px 20px 70px;
    }

    .error-layout{
        gap:38px;
    }

    .error-panel{
        padding:42px 28px;
    }

    .error-panel::before{
        height:4px;
    }

    .error-panel::after{
        background-size:28px 28px;
        opacity:0.42;
    }

    .subtitle{
        font-size:1rem;
    }

    .error-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .error-actions .back-btn,
    .secondary-link{
        width:100%;
        min-width:0;
    }

    .train-wrapper{
        height:136px;
    }

    .train{
        left:-640px;
        bottom:6px;
        width:600px;
    }

    .train svg{
        width:600px;
    }

    @keyframes trainMove{
        0%{left:-640px;}
        100%{left:112%;}
    }
}

/* Footer auf Error-Seite ohne Extra-Abstand */
.error-page footer{
    margin-top:0;
}


/* =========================================
   FINAL BUTTON MOTION OVERRIDE
   Muss ganz am Ende der pages.css stehen
========================================= */

.cta,
.back-btn,
.career-link,
.client-link,
.secondary-link,
.floating-btn{
    transform:translateY(0);
    will-change:transform;
    backface-visibility:hidden;

    transition:
        background 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.25s ease;
}

/* Hover-Lift für normale Buttons */
.cta:hover,
.back-btn:hover,
.career-link:hover,
.client-link:hover,
.secondary-link:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* Klickgefühl für normale Buttons */
.cta:active,
.back-btn:active,
.career-link:active,
.client-link:active,
.secondary-link:active{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
}

/* Floating Buttons inkl. Telefon, Mail und Nach-oben */
.floating-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,0.22);
}

.floating-btn:active{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,0.16);
}

/* CTA-Farbe beim Hover */
.cta:hover{
    background:#c40012;
}