/* ==========================================================
   CASTIGLIONE CONSULTING
   Executive Website
   Version 2026
========================================================== */

:root{

--blue:#14324d;
--gold:#b8903f;
--gold-light:#d8bc79;
--light:#f8f9fb;
--grey:#6d7882;
--dark:#24303d;
--white:#ffffff;

--shadow:0 20px 50px rgba(0,0,0,.08);

--radius:18px;

--transition:.35s;

}


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

html{

scroll-behavior:smooth;

}

body{

font-family:"Inter",sans-serif;

font-size:18px;

line-height:1.8;

color:var(--dark);

background:white;

overflow-x:hidden;

}


img{

max-width:100%;

display:block;

}


a{

text-decoration:none;

transition:.3s;

}

ul{

list-style:none;

}


/* ==========================================
Container
========================================== */

.container{

width:min(1180px,92%);

margin:auto;

}

.narrow{

max-width:900px;

}


/* ==========================================
Header
========================================== */

.header{

position:fixed;

top:0;

left:0;

right:0;

height:86px;

background:rgba(255,255,255,.95);

backdrop-filter:blur(12px);

box-shadow:0 4px 20px rgba(0,0,0,.04);

z-index:1000;

}


.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

height:86px;

}


.logo img{

height:62px;

width:auto;

}


.navigation ul{

display:flex;

gap:34px;

}


.navigation a{

font-size:15px;

font-weight:600;

letter-spacing:.03em;

text-transform:uppercase;

color:var(--blue);

position:relative;

}


.navigation a:after{

content:"";

position:absolute;

bottom:-6px;

left:0;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}


.navigation a:hover{

color:var(--gold);

}

.navigation a:hover:after{

width:100%;

}


/* ==========================================
Hero
========================================== */

.hero{

padding-top:150px;

padding-bottom:110px;

background:

linear-gradient(135deg,#f9fbfd 0%,#eef3f8 100%);

}


.hero-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

}


.hero-label{

display:inline-block;

padding:8px 18px;

background:#edf2f7;

border-radius:40px;

font-size:13px;

font-weight:700;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--gold);

margin-bottom:25px;

}


.hero h1{

font-family:"Playfair Display",serif;

font-size:62px;

line-height:1.05;

color:var(--blue);

margin-bottom:18px;

}


.hero h2{

font-size:28px;

font-weight:500;

color:#5d6872;

margin-bottom:20px;

}


.claim{

font-size:24px;

font-weight:700;

color:var(--gold);

margin-bottom:15px;

}


.hero-subtitle{

font-size:20px;

font-style:italic;

color:var(--grey);

margin-bottom:30px;

}


.hero-text{

max-width:620px;

color:#56616d;

margin-bottom:45px;

}


.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}


.button-primary{

background:var(--blue);

color:white;

padding:16px 34px;

border-radius:40px;

font-weight:600;

box-shadow:var(--shadow);

}


.button-primary:hover{

background:var(--gold);

transform:translateY(-2px);

}


.button-secondary{

border:2px solid var(--blue);

color:var(--blue);

padding:14px 34px;

border-radius:40px;

font-weight:600;

}


.button-secondary:hover{

background:var(--blue);

color:white;

}


.hero-image{

display:flex;

justify-content:center;

}


.hero-image img{

width:430px;

border-radius:24px;

box-shadow:

0 35px 80px rgba(0,0,0,.12);

}


/* ==========================================
Facts
========================================== */

.facts{

background:var(--blue);

padding:55px 0;

color:white;

}


.facts-grid{

display:grid;

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

gap:25px;

text-align:center;

}


.fact span{

display:block;

font-size:46px;

font-weight:700;

font-family:"Playfair Display",serif;

color:var(--gold-light);

margin-bottom:8px;

}


.fact p{

font-size:16px;

letter-spacing:.03em;

}
/* ==========================================================
   ALLGEMEINE SEKTIONEN
========================================================== */

.section{

    padding:110px 0;

}

.section.light{

    background:#f7f9fc;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

.section-title h2{

    font-family:"Playfair Display",serif;

    font-size:48px;

    color:var(--blue);

    margin-bottom:20px;

}

.section-title p{

    max-width:760px;

    margin:auto;

    color:var(--grey);

}



/* ==========================================================
   ÜBER MICH
========================================================== */

.about-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:70px;

    align-items:start;

}

.about-text p{

    margin-bottom:28px;

    color:#4d5965;

    text-align:justify;

}

.about-highlight{

    background:white;

    border-radius:var(--radius);

    padding:35px;

    box-shadow:var(--shadow);

    border-top:5px solid var(--gold);

}

.about-highlight h3{

    color:var(--blue);

    margin-bottom:25px;

    font-size:24px;

    font-family:"Playfair Display",serif;

}

.about-highlight ul li{

    padding:12px 0;

    border-bottom:1px solid #edf0f3;

    font-weight:500;

}

.about-highlight ul li:last-child{

    border:none;

}



/* ==========================================================
   LEISTUNGEN
========================================================== */

.services-grid{

    display:grid;

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

    gap:35px;

}

.service-card{

    background:white;

    border-radius:var(--radius);

    padding:42px;

    box-shadow:var(--shadow);

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--gold);

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:var(--blue);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    margin-bottom:25px;

}

.service-card h3{

    font-family:"Playfair Display",serif;

    color:var(--blue);

    font-size:25px;

    margin-bottom:18px;

}

.service-card p{

    color:var(--grey);

}



/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    position:relative;

    max-width:960px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:180px;

    top:0;

    bottom:0;

    width:3px;

    background:#dfe6ec;

}

.timeline-item{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:45px;

    margin-bottom:70px;

    position:relative;

}

.timeline-year{

    font-weight:700;

    color:var(--gold);

    font-size:20px;

    text-align:right;

    padding-top:8px;

}

.timeline-content{

    background:white;

    padding:34px;

    border-radius:18px;

    box-shadow:var(--shadow);

    position:relative;

}

.timeline-content::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    background:var(--gold);

    border-radius:50%;

    left:-54px;

    top:38px;

}

.timeline-content h3{

    font-family:"Playfair Display",serif;

    color:var(--blue);

    font-size:28px;

    margin-bottom:15px;

}

.timeline-content small{

    font-size:16px;

    color:var(--grey);

    font-weight:400;

}

.timeline-content p{

    color:#596470;

}



/* ==========================================================
   DOZENTENBEREICH
========================================================== */

.academy-grid{

    display:grid;

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

    gap:35px;

}

.academy-card{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:.3s;

}

.academy-card:hover{

    transform:translateY(-6px);

}

.academy-card h3{

    color:var(--blue);

    font-family:"Playfair Display",serif;

    margin-bottom:15px;

}

.academy-card p{

    color:var(--grey);

}
/* ==========================================================
   PUBLIKATION
========================================================== */

.book-grid{

    display:grid;
    grid-template-columns:320px 1fr;
    gap:80px;
    align-items:center;

}

.book-image{

    text-align:center;

}

.book-image img{

    width:240px;
    border-radius:14px;
    box-shadow:0 20px 45px rgba(0,0,0,.18);
    transition:.35s;

}

.book-image img:hover{

    transform:translateY(-8px);

}

.section-label{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

.book-content h2{

    font-family:"Playfair Display",serif;

    font-size:42px;

    color:var(--blue);

    margin-bottom:30px;

}

.book-content p{

    margin-bottom:22px;

    color:var(--grey);

}



/* ==========================================================
   KOMPETENZEN
========================================================== */

.competence-grid{

    display:grid;

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

    gap:35px;

}

.competence-grid div{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.competence-grid h3{

    color:var(--blue);

    font-family:"Playfair Display",serif;

    margin-bottom:18px;

    font-size:28px;

}

.competence-grid ul{

    padding-left:20px;

}

.competence-grid li{

    list-style:disc;

    margin-bottom:12px;

    color:var(--grey);

}



/* ==========================================================
   BRANCHENERFAHRUNG
========================================================== */

.industry-grid{

    display:grid;

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

    gap:35px;

}

.industry-card{

    background:white;

    border-radius:18px;

    padding:38px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-6px);

}

.industry-card h3{

    color:var(--blue);

    font-family:"Playfair Display",serif;

    margin-bottom:15px;

}

.industry-card p{

    color:var(--grey);

}



/* ==========================================================
   PHILOSOPHIE
========================================================== */

.quote-section{

    background:linear-gradient(135deg,#14324d,#21486b);

    color:white;

    text-align:center;

}

.quote-section blockquote{

    font-family:"Playfair Display",serif;

    font-size:34px;

    line-height:1.5;

    font-style:italic;

    margin-bottom:35px;

}

.quote-author{

    font-size:18px;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#d8bc79;

}



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

.contact-section{

    background:#f8f9fb;

}

.contact-grid{

    display:grid;

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

    gap:35px;

    margin-top:50px;

}

.contact-card{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.contact-card h3{

    font-family:"Playfair Display",serif;

    color:var(--blue);

    margin-bottom:15px;

}

.contact-card p{

    color:var(--grey);

}



/* ==========================================================
   CALL TO ACTION
========================================================== */

.cta-section{

    background:var(--blue);

    color:white;

    text-align:center;

    padding:90px 0;

}

.cta-section h2{

    font-family:"Playfair Display",serif;

    font-size:46px;

    margin-bottom:20px;

}

.cta-section p{

    font-size:20px;

    margin-bottom:35px;

}

.cta-section .button-primary{

    background:var(--gold);

    color:white;

}

.cta-section .button-primary:hover{

    background:white;

    color:var(--blue);

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

footer{

    background:#182633;

    color:#d7dde3;

    padding-top:70px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

    padding-bottom:50px;

}

.footer-grid h3{

    color:white;

    font-family:"Playfair Display",serif;

    font-size:24px;

    margin-bottom:20px;

}

.footer-grid p{

    color:#c5cdd4;

    margin-bottom:12px;

    line-height:1.8;

}

.footer-grid ul{

    list-style:none;

}

.footer-grid li{

    margin-bottom:12px;

}

.footer-grid a{

    color:#d5dce3;

    transition:.3s;

}

.footer-grid a:hover{

    color:var(--gold-light);

}

.footer-bottom{

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

    padding:25px 0;

    text-align:center;

    color:#aab4be;

    font-size:15px;

}



/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--gold);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:bold;

    text-decoration:none;

    box-shadow:0 10px 25px rgba(0,0,0,.20);

    transition:.3s;

    z-index:999;

}

.back-to-top:hover{

    transform:translateY(-4px);

    background:var(--blue);

}



/* ==========================================================
   KLEINE ANIMATIONEN
========================================================== */

.service-card,
.academy-card,
.industry-card,
.contact-card,
.timeline-content,
.about-highlight{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.service-card:hover,
.academy-card:hover,
.industry-card:hover,
.contact-card:hover,
.timeline-content:hover,
.about-highlight:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 55px rgba(0,0,0,.12);

}

.button-primary,
.button-secondary{

    transition:all .35s ease;

}



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

@media (max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-text{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:50px;

}

.hero-image img{

width:360px;

}

.about-grid{

grid-template-columns:1fr;

}

.book-grid{

grid-template-columns:1fr;

text-align:center;

}

.timeline::before{

left:28px;

}

.timeline-item{

grid-template-columns:1fr;

padding-left:65px;

}

.timeline-year{

text-align:left;

padding:0;

}

.timeline-content::before{

left:-47px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}
/* ==========================================================
   RESPONSIVE SMARTPHONE
========================================================== */

@media (max-width:768px){

body{

font-size:16px;

}

.header{

height:auto;

padding:18px 0;

}

.nav-container{

flex-direction:column-reverse;

gap:20px;

}

.logo img{

height:54px;

}

.navigation ul{

flex-wrap:wrap;

justify-content:center;

gap:16px;

}

.navigation a{

font-size:13px;

}

.hero{

padding-top:170px;

padding-bottom:70px;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:24px;

}

.claim{

font-size:20px;

}

.hero-subtitle{

font-size:18px;

}

.hero-image img{

width:280px;

border-radius:20px;

}

.facts-grid{

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

gap:25px;

}

.fact span{

font-size:34px;

}

.section{

padding:75px 0;

}

.section-title h2{

font-size:34px;

}

.services-grid{

grid-template-columns:1fr;

}

.academy-grid{

grid-template-columns:1fr;

}

.book-grid{

grid-template-columns:1fr;

gap:40px;

}

.book-image img{

width:180px;

}

.competence-grid{

grid-template-columns:1fr;

}

.industry-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.quote-section blockquote{

font-size:27px;

}

.cta-section h2{

font-size:34px;

}

.footer-grid{

gap:35px;

}

.back-to-top{

right:18px;

bottom:18px;

width:48px;

height:48px;

font-size:20px;

}

}


/* ==========================================================
   KLEINE BILDSCHIRME
========================================================== */

@media (max-width:480px){

.hero h1{

font-size:34px;

}

.hero h2{

font-size:20px;

}

.hero-image img{

width:240px;

}

.button-primary,
.button-secondary{

display:block;

width:100%;

text-align:center;

margin-bottom:14px;

}

.hero-buttons{

display:block;

}

.section-title h2{

font-size:30px;

}

.book-content h2{

font-size:30px;

}

.timeline-item{

padding-left:45px;

}

.timeline::before{

left:18px;

}

.timeline-content::before{

left:-38px;

}

}



/* ==========================================================
   DRUCKANSICHT
========================================================== */

@media print{

.header,
.back-to-top,
.cta-section{

display:none;

}

body{

background:white;

color:black;

}

a{

color:black;

text-decoration:none;

}

.section{

padding:30px 0;

}

}



/* ==========================================================
   FEINSCHLIFF
========================================================== */

::selection{

background:var(--gold);

color:white;

}

.hero-image img,
.book-image img{

user-select:none;

}

section{

scroll-margin-top:110px;

}

html{

scroll-padding-top:110px;

}
/* ==========================================
Animationen
========================================== */

.hidden{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.visible{

opacity:1;

transform:translateY(0);

}



/* ==========================================
Back To Top
========================================== */

.back-to-top{

opacity:0;

visibility:hidden;

transition:.35s;

}