:root {

--primary: #1c6ed5;
--primary-dark: #1558b0;

--text: #3f4b57;
--heading: #1f2d3d;

--light-bg: #f6f9fc;
--border: #e6edf3;

--accent: #5b8fb9;

--down: #d9480f;
--up: #2f9e44;

}

/* BASE */

body{

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

color:var(--text);

line-height:1.65;

margin:0;

background:#ffffff;

}

.container{

max-width:1150px;

margin:0 auto;

padding:25px;

}

/* STICKY HEADER */

.wacc-sticky-header{

position:sticky;

top:0;

z-index:1000;

background:rgba(255,255,255,0.92);

backdrop-filter:blur(10px);

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

padding:12px 0;

box-shadow:0 3px 12px rgba(0,0,0,0.05);

}

.sticky-container{

display:flex;

flex-direction:column;

align-items:center;

}

.sticky-row{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

font-weight:600;

}

.sticky-publication{

width:100%;

text-align:right;

font-size:0.75rem;

color:#999;

margin-top:4px;

}

.wacc-value{

font-size:20px;

font-weight:700;

color:var(--primary);

}

.wacc-trend{

color:var(--down);

font-weight:600;

font-size:14px;

}

/* HEADLINES */

h1{

font-size:38px;

font-weight:700;

line-height:1.25;

color:var(--heading);

margin:40px 0 20px;

position:relative;

padding-bottom:14px;

}

h1::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:70px;

height:4px;

background:var(--primary);

border-radius:2px;

}

h2{

margin-top:60px;

font-size:28px;

font-weight:600;

color:var(--heading);

position:relative;

padding-bottom:12px;

}

h2::after{

content:"";

display:block;

width:40px;

height:3px;

background:var(--primary);

margin-top:10px;

}

h3{

font-size:20px;

font-weight:600;

margin-top:30px;

color:var(--heading);

}

.lead{

font-size:1.1rem;

color:#333;

margin-bottom:30px;

}

/* KPI GRID */

.kpi-grid{

display:grid;

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

gap:22px;

margin-bottom:40px;

}

.kpi-box{

background:#fff;

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

padding:26px;

text-align:center;

border-radius:10px;

transition:all 0.25s ease;

box-shadow:0 3px 10px rgba(0,0,0,0.04);

}

.kpi-box:hover{

transform:translateY(-3px);

box-shadow:0 8px 22px rgba(0,0,0,0.07);

}

.kpi-value{

display:block;

font-size:2.6rem;

font-weight:700;

color:var(--primary);

}

.kpi-label{

text-transform:uppercase;

font-size:0.85rem;

letter-spacing:1px;

color:#6b7a8c;

margin-top:6px;

}

/* CALCULATION GRID */

.calc-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

background:#fff;

padding:24px;

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

border-radius:8px;

}

.calc-result-bar{

text-align:center;

margin-top:20px;

font-weight:bold;

background:var(--primary);

color:#fff;

padding:12px;

border-radius:6px;

}

/* TABLES */

.wacc-table{

width:100%;

border-collapse:collapse;

margin:30px 0;

font-size:15px;

}

.wacc-table th{

background:#f3f7fb;

padding:14px;

text-align:left;

font-weight:600;

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

}

.wacc-table td{

padding:14px;

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

}

.wacc-table tr:hover{

background:#fafcff;

}

.trend-neg{

color:var(--down);

font-weight:600;

}

.trend-pos{

color:var(--up);

font-weight:600;

}

/* BLOCKQUOTE */

blockquote{

background:#f7fafc;

border-left:4px solid var(--primary);

padding:20px 24px;

margin:30px 0;

border-radius:6px;

}

/* ALERT */

.alert-vse{

background:#fff5f5;

border:1px solid #feb2b2;

padding:24px;

border-radius:8px;

margin:35px 0;

}

.alert-vse h3{

color:#c53030;

margin-top:0;

}

/* CHART */

.chart-wrapper{

position:relative;

height:460px;

width:100%;

margin:50px 0;

background:#fff;

padding:25px;

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

border-radius:14px;

box-shadow:0 6px 18px rgba(0,0,0,0.04);

}

.chart-wrapper canvas{

width:100% !important;

height:100% !important;

}

/* CTA CONTACT */

.contact-cta{

background:linear-gradient(135deg,#1c6ed5,#1558b0);

color:#fff;

padding:55px 40px;

border-radius:14px;

text-align:center;

margin-top:60px;

box-shadow:0 10px 30px rgba(28,110,213,0.25);

}

.contact-cta h2{

color:#fff;

border:none;

margin-top:0;

}

.contact-cta p{

opacity:0.95;

font-size:17px;

margin-bottom:20px;

}

/* CTA BUTTON */

.contact-button{

display:inline-block;

background:#ffffff;

color:var(--primary) !important;

padding:16px 34px;

border-radius:8px;

text-decoration:none;

font-weight:600;

margin-top:20px;

font-size:16px;

box-shadow:0 4px 14px rgba(0,0,0,0.15);

transition:all 0.25s ease;

}

.contact-button:hover{

background:#f2f6ff;

transform:translateY(-2px);

}

/* MOBILE */

@media (max-width:768px){

h1{

font-size:28px;

}

.container{

padding:18px;

}

.kpi-grid{

grid-template-columns:1fr;

}

.calc-grid{

grid-template-columns:1fr;

}

.sticky-row{

flex-direction:column;

gap:6px;

text-align:center;

}

.chart-wrapper{

height:320px;

}

}

.cta-box{
border:1px solid #e5e7eb;
background:#f8fafc;
padding:26px;
border-radius:8px;
margin:50px 0;
}

.cta-author{
display:flex;
align-items:center;
gap:14px;
margin-bottom:15px;
}

.cta-avatar{
width:52px;
height:52px;
border-radius:50%;
object-fit:cover;
}

.cta-author-text{
font-size:0.9rem;
line-height:1.4;
}

.cta-role{
color:#666;
font-size:0.85rem;
}

.cta-box h3{
font-size:1.3rem;
margin-bottom:10px;
}

.cta-box p{
margin-bottom:12px;
color:#444;
}

.cta-link{
color:#1c6ed5;
font-weight:600;
text-decoration:none;
}

.cta-link:hover{
text-decoration:underline;
}

.formula-container {
    background: #f8fafc; /* Sehr helles Blau-Grau */
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0056b3; /* Ihre Primärfarbe */
    padding: 25px;
    border-radius: 8px;
    margin: 30px 0;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.formula-label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 15px;
    font-weight: 700;
}

.formula-display {
    font-size: 1.6rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.math {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}

.math-term {
    font-family: "Times New Roman", Times, serif; /* Klassischer Mathe-Look */
    font-style: italic;
    font-weight: 600;
}

.math-term sub {
    font-style: normal;
    font-size: 0.7em;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

.math-dot {
    margin: 0 4px;
    font-style: normal;
}

.math-plus, .math-equal {
    margin: 0 10px;
    color: #0056b3;
}

.math-bracket {
    color: #94a3b8;
    font-weight: 300;
}

/* Responsive Anpassung für Handys */
@media (max-width: 576px) {
    .formula-display {
        font-size: 1.2rem;
    }
}