:root{
--bg:#030506;
--sidebar:#050809;
--panel:#080d10;
--panel-soft:#0d1418;
--border:rgba(103,231,231,.16);
--border-soft:rgba(255,255,255,.08);
--cyan:#2fc8c8;
--cyan-light:#67e7e7;
--cyan-dark:#0e777a;
--text:#f4f7f8;
--muted:#8b989e;
--shadow:rgba(47,200,200,.22);
}

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

body{
min-height:100vh;
background:
radial-gradient(circle at 70% 15%,rgba(47,200,200,.12),transparent 28%),
radial-gradient(circle at 25% 75%,rgba(47,200,200,.08),transparent 32%),
linear-gradient(180deg,#020304,#070b0d);
color:var(--text);
font-family:Inter,Arial,sans-serif;
}

body:before{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:42px 42px;
opacity:.16;
pointer-events:none;
}

.app-shell{
min-height:100vh;
display:grid;
grid-template-columns:280px 1fr;
padding:18px;
gap:0;
}

.sidebar{
background:
linear-gradient(180deg,rgba(5,8,9,.98),rgba(3,5,6,.98));
border:1px solid var(--border-soft);
border-right:1px solid rgba(47,200,200,.12);
border-radius:18px 0 0 18px;
padding:28px 22px;
display:flex;
flex-direction:column;
box-shadow:
0 0 50px rgba(0,0,0,.65),
inset -1px 0 0 rgba(47,200,200,.07);
}

.brand{
display:flex;
align-items:center;
gap:12px;
margin-bottom:48px;
}

.brand-icon{
width:34px;
height:34px;
display:grid;
place-items:center;
font-size:11px;
font-weight:900;
letter-spacing:-1px;
color:#031014;
background:linear-gradient(135deg,var(--cyan),var(--cyan-light));
clip-path:polygon(50% 0,100% 30%,78% 100%,50% 76%,22% 100%,0 30%);
box-shadow:0 0 25px var(--shadow);
}

.brand-text{
font-size:25px;
font-weight:900;
letter-spacing:-.05em;
}

.brand-text span,
h1 span{
color:var(--cyan);
}

.nav{
display:flex;
flex-direction:column;
gap:14px;
}

.nav-item{
height:52px;
display:flex;
align-items:center;
padding:0 18px;
border-radius:10px;
color:#c4cdd1;
text-decoration:none;
font-size:16px;
font-weight:700;
border:1px solid transparent;
transition:.2s;
}

.nav-item:hover,
.nav-item.active{
background:
linear-gradient(90deg,rgba(47,200,200,.22),rgba(47,200,200,.04));
color:var(--cyan-light);
border-color:rgba(47,200,200,.18);
box-shadow:0 0 28px rgba(47,200,200,.08);
}

.sidebar-bottom{
margin-top:auto;
}

.login-button{
height:54px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(47,200,200,.55);
border-radius:10px;
color:var(--cyan-light);
text-decoration:none;
font-weight:900;
background:rgba(47,200,200,.05);
box-shadow:inset 0 0 22px rgba(47,200,200,.06);
}

.main{
background:
linear-gradient(135deg,rgba(8,13,16,.98),rgba(3,5,6,.98));
border:1px solid var(--border-soft);
border-left:none;
border-radius:0 18px 18px 0;
padding:48px 54px;
position:relative;
overflow:hidden;
}

.main:before{
content:"";
position:absolute;
top:20px;
right:80px;
width:430px;
height:230px;
background:
linear-gradient(135deg,rgba(47,200,200,.2),transparent 60%);
clip-path:polygon(0 0,100% 0,62% 100%);
opacity:.32;
}

.hero{
display:flex;
justify-content:space-between;
align-items:flex-start;
position:relative;
z-index:1;
margin-bottom:44px;
}

.welcome{
font-size:24px;
font-weight:600;
color:#f5f7f8;
margin-bottom:10px;
}

h1{
font-size:58px;
line-height:.95;
font-weight:950;
letter-spacing:-.06em;
text-shadow:0 0 30px rgba(47,200,200,.18);
}

.subtitle{
margin-top:16px;
color:#c4cdd1;
font-size:17px;
}

.hero-mark{
font-size:120px;
line-height:.8;
font-weight:950;
letter-spacing:-.15em;
color:rgba(47,200,200,.22);
text-shadow:
0 0 40px rgba(47,200,200,.18);
transform:skew(-12deg);
margin-right:70px;
}

.stats-grid{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-bottom:26px;
}

.stat-card,
.panel{
background:
linear-gradient(180deg,rgba(13,20,24,.94),rgba(5,8,9,.96));
border:1px solid var(--border-soft);
border-radius:12px;
box-shadow:
0 18px 50px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.02);
}

.stat-card{
min-height:150px;
padding:24px;
position:relative;
}

.stat-card p{
font-size:18px;
font-weight:800;
margin-bottom:14px;
}

.stat-card strong{
display:block;
font-size:42px;
line-height:1;
color:var(--cyan-light);
font-weight:400;
text-shadow:0 0 22px rgba(47,200,200,.25);
margin-bottom:12px;
}

.stat-card span{
color:var(--muted);
font-size:14px;
}

.stat-card b{
position:absolute;
right:22px;
bottom:26px;
font-size:34px;
color:#b8c2c8;
font-weight:300;
}

.content-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:24px;
}

.panel{
padding:26px;
min-height:255px;
}

.panel h2{
font-size:19px;
margin-bottom:24px;
}

.chart{
height:180px;
position:relative;
overflow:hidden;
border-radius:8px;
background:
linear-gradient(180deg,rgba(255,255,255,.02),rgba(47,200,200,.04));
}

.chart:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(transparent 24%,rgba(255,255,255,.06) 25%,transparent 26%),
linear-gradient(90deg,transparent 24%,rgba(255,255,255,.04) 25%,transparent 26%);
background-size:100% 45px,95px 100%;
}

.chart-line{
position:absolute;
left:70px;
right:20px;
top:35px;
height:110px;
background:
linear-gradient(135deg,
transparent 0 6%,
var(--cyan) 6% 10%,
transparent 10% 18%,
var(--cyan) 18% 23%,
transparent 23% 33%,
var(--cyan) 33% 38%,
transparent 38% 52%,
var(--cyan) 52% 58%,
transparent 58% 66%,
var(--cyan) 66% 73%,
transparent 73% 82%,
var(--cyan) 82% 88%,
transparent 88%);
filter:drop-shadow(0 0 8px var(--cyan));
clip-path:polygon(0 72%,8% 42%,17% 55%,27% 51%,39% 36%,50% 44%,61% 18%,72% 48%,82% 20%,90% 34%,100% 0);
border-top:4px solid var(--cyan);
}

.chart-fill{
position:absolute;
left:70px;
right:20px;
bottom:28px;
height:95px;
background:linear-gradient(180deg,rgba(47,200,200,.26),transparent);
clip-path:polygon(0 82%,8% 52%,17% 65%,27% 61%,39% 46%,50% 54%,61% 28%,72% 58%,82% 30%,90% 44%,100% 10%,100% 100%,0 100%);
}

.y{
position:absolute;
left:12px;
font-size:13px;
color:#b5c0c6;
}

.y1{top:16px;}
.y2{top:58px;}
.y3{top:102px;}
.y4{bottom:26px;}

.days{
position:absolute;
left:70px;
right:20px;
bottom:6px;
display:flex;
justify-content:space-between;
font-size:13px;
color:#b5c0c6;
}

.activity{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}

.activity span{
color:#d8e0e3;
font-size:15px;
}

.activity span::first-letter{
color:var(--cyan);
}

.activity small{
color:#9aa4aa;
font-size:13px;
}

@media(max-width:1100px){
.app-shell{
grid-template-columns:1fr;
}

.sidebar{
border-radius:18px 18px 0 0;
}

.main{
border-radius:0 0 18px 18px;
border-left:1px solid var(--border-soft);
}

.stats-grid,
.content-grid{
grid-template-columns:1fr;
}

.hero-mark{
display:none;
}
}

.alert{
background:rgba(47,200,200,.12);
border:1px solid rgba(47,200,200,.35);
color:var(--cyan-light);
padding:14px 18px;
border-radius:10px;
margin-bottom:18px;
font-weight:800;
}

.alert.error{
background:rgba(255,60,80,.12);
border-color:rgba(255,60,80,.35);
color:#ff8a9a;
}

.form-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.input,
.textarea,
select.input{
width:100%;
background:#050809;
border:1px solid rgba(103,231,231,.18);
color:var(--text);
border-radius:10px;
padding:13px 14px;
font-size:15px;
outline:none;
}

.textarea{
min-height:90px;
resize:vertical;
}

.btn,
.btn-danger{
border:none;
border-radius:10px;
padding:13px 18px;
font-weight:900;
cursor:pointer;
}

.btn{
background:linear-gradient(135deg,var(--cyan),var(--cyan-light));
color:#031014;
}

.btn-danger{
background:rgba(255,60,80,.12);
border:1px solid rgba(255,60,80,.35);
color:#ff8a9a;
}

.mt{
margin-top:24px;
}

.user-row{
display:grid;
grid-template-columns:1fr 1fr 1fr 160px 100px 120px;
gap:12px;
align-items:center;
margin-bottom:10px;
}

.check-row{
display:flex;
align-items:center;
gap:8px;
color:var(--muted);
font-weight:800;
}

.delete-form{
display:flex;
justify-content:flex-end;
margin-bottom:18px;
}

.line{
border:0;
border-top:1px solid rgba(255,255,255,.08);
margin:18px 0;
}

@media(max-width:1100px){
.form-grid,
.user-row{
grid-template-columns:1fr;
}
}


.page-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-bottom:20px;
}

.step-form{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.wide{
grid-column:1 / -1;
}

.btn-secondary{
background:rgba(255,255,255,.04);
color:var(--cyan-light);
border:1px solid rgba(47,200,200,.3);
text-decoration:none;
}

.timeline{
display:flex;
flex-direction:column;
gap:18px;
}

.step-card{
display:grid;
grid-template-columns:80px 1fr;
gap:18px;
background:linear-gradient(180deg,rgba(13,20,24,.94),rgba(5,8,9,.96));
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
padding:20px;
}

.step-number{
height:56px;
width:56px;
border-radius:14px;
display:grid;
place-items:center;
background:rgba(47,200,200,.12);
border:1px solid rgba(47,200,200,.35);
color:var(--cyan-light);
font-weight:900;
}

.step-top{
display:flex;
justify-content:space-between;
gap:16px;
margin-bottom:16px;
}

.step-top strong{
font-size:20px;
display:block;
}

.step-top span{
display:inline-block;
margin-top:8px;
color:var(--cyan-light);
font-size:12px;
font-weight:900;
letter-spacing:.14em;
}

.step-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.step-grid div{
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
padding:12px;
}

.step-grid label{
display:block;
font-size:12px;
color:var(--muted);
margin-bottom:8px;
}

.step-grid p{
font-size:15px;
font-weight:800;
color:var(--text);
}

.step-note{
margin-top:14px;
padding:14px;
border-radius:10px;
background:rgba(47,200,200,.07);
border:1px solid rgba(47,200,200,.18);
color:#c9fafa;
}

.empty{
color:var(--muted);
}

@media(max-width:1100px){
.step-form,
.step-grid,
.step-card{
grid-template-columns:1fr;
}
}


.calculator-form{
display:grid;
grid-template-columns:1.2fr 1fr 1fr auto;
gap:14px;
align-items:end;
}

.calculator-form label,
.summary-grid label{
display:block;
color:var(--muted);
font-weight:800;
font-size:13px;
margin-bottom:8px;
}

.summary-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.summary-grid div{
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.07);
border-radius:12px;
padding:18px;
}

.summary-grid strong{
display:block;
color:var(--cyan-light);
font-size:28px;
font-weight:500;
}

@media(max-width:1100px){
.calculator-form,
.summary-grid{
grid-template-columns:1fr;
}
}


.calculator-form{

display:grid;

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

gap:15px;

align-items:end;

}


.route-edit-card{
position:relative;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
padding:18px;
margin-top:16px;
}

.route-edit-form{
display:grid;
gap:12px;
}

.route-title-row{
display:grid;
grid-template-columns:1fr 120px;
gap:12px;
align-items:center;
}

.route-actions{
display:flex;
gap:12px;
align-items:center;
}

.route-delete-form{
position:absolute;
right:18px;
bottom:18px;
}

.route-meta{
display:flex;
gap:10px;
margin-top:12px;
color:var(--muted);
font-size:13px;
font-weight:800;
}

.route-meta span{
border:1px solid rgba(47,200,200,.18);
background:rgba(47,200,200,.06);
color:var(--cyan-light);
padding:6px 10px;
border-radius:999px;
}

@media(max-width:900px){
.route-title-row{
grid-template-columns:1fr;
}

.route-delete-form{
position:static;
margin-top:12px;
}
}


.edit-step-card{
align-items:flex-start;
}

.step-edit-form{
display:block;
}

.step-title-input{
font-size:22px;
font-weight:900;
border-color:rgba(47,200,200,.22);
}

.step-type-select{
margin-top:10px;
max-width:620px;
color:var(--cyan-light);
font-weight:900;
}

.step-actions{
display:flex;
gap:10px;
align-items:flex-start;
}

.step-edit-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:16px;
}

.step-edit-grid label{
display:block;
color:var(--muted);
font-size:12px;
font-weight:800;
margin-bottom:8px;
}

.mt-small{
margin-top:12px;
}

.delete-step-form{
margin-top:12px;
display:flex;
justify-content:flex-end;
}

@media(max-width:1100px){
.step-edit-grid{
grid-template-columns:1fr;
}
}

.time-summary{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:14px;
}

.time-summary div{
background:rgba(47,200,200,.06);
border:1px solid rgba(47,200,200,.18);
border-radius:10px;
padding:12px;
color:var(--muted);
font-weight:800;
}

.time-summary strong{
display:block;
color:var(--cyan-light);
font-size:16px;
margin-top:6px;
}

@media(max-width:1100px){
.time-summary{
grid-template-columns:1fr;
}
}


.material-needed-list{
display:grid;
gap:12px;
margin-top:16px;
}

.material-needed-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
background:rgba(255,255,255,.035);
border:1px solid rgba(47,200,200,.18);
border-radius:12px;
padding:16px;
}

.material-needed-item strong{
display:block;
color:var(--cyan-light);
font-size:20px;
}

.material-needed-item span,
.material-needed-item label{
display:block;
color:var(--muted);
font-size:13px;
margin-top:6px;
}

.material-needed-item b{
display:block;
font-size:24px;
color:var(--text);
margin-top:4px;
}

@media(max-width:900px){
.material-needed-item{
flex-direction:column;
align-items:flex-start;
}
}

.production-card{

padding:20px;

border-radius:14px;

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

border:
1px solid rgba(
47,
200,
200,
.18
);

margin-top:15px;

}

.production-arrow{

display:flex;

flex-direction:column;

gap:8px;

font-size:24px;

font-weight:900;

color:
var(--cyan-light);

}

.production-arrow span{

color:
white;

font-size:20px;

}

.summary-list{

display:grid;

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

gap:15px;

}

.summary-list div{

padding:20px;

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

border-radius:12px;

}

.summary-list label{

display:block;

font-size:13px;

color:
var(--muted);

margin-bottom:10px;

}

.summary-list strong{

font-size:24px;

}

@media(max-width:1100px){

.summary-list{

grid-template-columns:
1fr;

}

}


.production-list{
display:grid;
gap:14px;
margin-top:18px;
}

.production-chain-card{
display:grid;
grid-template-columns:1fr 60px 1fr;
gap:14px;
align-items:center;
background:rgba(255,255,255,.035);
border:1px solid rgba(47,200,200,.18);
border-radius:14px;
padding:18px;
}

.production-box{
background:rgba(0,0,0,.28);
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
padding:16px;
}

.production-box label{
display:block;
color:var(--muted);
font-size:13px;
font-weight:800;
margin-bottom:8px;
}

.production-box strong{
display:block;
color:var(--cyan-light);
font-size:24px;
}

.production-arrow-center{
color:var(--cyan-light);
font-size:34px;
font-weight:900;
text-align:center;
}

@media(max-width:900px){
.production-chain-card{
grid-template-columns:1fr;
}

.production-arrow-center{
transform:rotate(90deg);
}
}


.calc-top-panel,
.mega-panel,
.profit-bar,
.hint-box{
background:linear-gradient(180deg,rgba(13,20,24,.96),rgba(5,8,9,.98));
border:1px solid rgba(103,231,231,.15);
border-radius:14px;
box-shadow:0 20px 50px rgba(0,0,0,.32);
}

.calc-top-panel{
padding:18px;
margin-top:20px;
}

.calc-top-form{
display:grid;
grid-template-columns:1.4fr .7fr .6fr auto;
gap:18px;
align-items:end;
}

.calc-top-form label{
display:block;
color:var(--muted);
font-weight:800;
font-size:13px;
margin-bottom:8px;
}

.calc-btn{
height:48px;
padding:0 28px;
}

.calc-mega-grid{
display:grid;
grid-template-columns:1fr 1fr 1.05fr;
gap:18px;
margin-top:20px;
}

.mega-panel{
padding:22px;
}

.mega-panel h2{
margin-bottom:18px;
font-size:22px;
}

.flow-list{
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
}

.flow-card{
border:1px solid rgba(47,200,200,.55);
background:linear-gradient(135deg,rgba(47,200,200,.14),rgba(47,200,200,.04));
border-radius:12px;
padding:18px;
}

.flow-card small{
display:block;
color:var(--cyan-light);
font-weight:900;
margin-bottom:8px;
}

.flow-card strong{
display:block;
font-size:26px;
color:var(--text);
}

.flow-process{
border-color:rgba(0,170,255,.65);
background:linear-gradient(135deg,rgba(0,170,255,.14),rgba(0,170,255,.04));
}

.flow-sell{
border-color:rgba(255,180,0,.7);
background:linear-gradient(135deg,rgba(255,180,0,.15),rgba(255,180,0,.04));
}

.flow-details{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
border-top:1px solid rgba(255,255,255,.08);
margin-top:14px;
padding-top:14px;
}

.flow-details span{
color:var(--muted);
font-size:13px;
}

.flow-details b{
display:block;
color:var(--text);
margin-top:5px;
}

.flow-arrow{
text-align:center;
font-size:32px;
color:#9bd6ff;
font-weight:900;
}

.money-card{
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
border-radius:12px;
padding:15px;
margin-bottom:12px;
}

.money-card > div:first-child{
display:flex;
justify-content:space-between;
font-weight:900;
margin-bottom:14px;
}

.money-card span{
color:var(--muted);
}

.money-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
border-top:1px solid rgba(255,255,255,.08);
padding-top:12px;
}

.money-row b{
display:block;
color:var(--text);
font-size:18px;
margin-top:4px;
}

.red{color:#ff5c66!important;}
.green{color:#4ade80!important;}

.total-line{
display:flex;
justify-content:space-between;
align-items:center;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
border-radius:10px;
padding:14px;
font-weight:900;
}

.time-route-list{
display:grid;
gap:14px;
}

.time-route-card{
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
padding:16px;
}

.time-route-card strong{
display:block;
margin-bottom:14px;
}

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

.time-grid span{
color:var(--muted);
font-size:13px;
}

.time-grid b{
display:block;
color:var(--text);
font-size:18px;
margin-top:5px;
}

.time-total{
margin-top:16px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
padding:18px;
}

.time-total div{
display:flex;
justify-content:space-between;
margin-bottom:14px;
}

.time-total span{
color:var(--muted);
}

.time-total strong{
color:var(--text);
}

.time-total hr{
border:0;
border-top:1px solid rgba(255,255,255,.12);
margin:12px 0;
}

.time-total .cyan span,
.time-total .cyan strong{
color:var(--cyan-light);
font-size:20px;
font-weight:900;
}

.profit-bar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
margin-top:20px;
padding:22px;
}

.profit-bar div{
border-right:1px solid rgba(255,255,255,.12);
padding:0 24px;
}

.profit-bar div:last-child{
border-right:0;
}

.profit-bar span{
display:block;
color:var(--text);
font-weight:900;
margin-bottom:8px;
}

.profit-bar strong{
display:block;
color:#4ade80;
font-size:34px;
margin-bottom:8px;
}

.profit-bar small{
color:var(--muted);
}

.hint-box{
margin-top:18px;
padding:18px;
border-color:rgba(47,200,200,.35);
}

.hint-box strong{
color:var(--cyan-light);
}

.hint-box p{
color:var(--muted);
margin-top:8px;
}

@media(max-width:1300px){
.calc-mega-grid,
.profit-bar,
.calc-top-form{
grid-template-columns:1fr;
}

.profit-bar div{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.12);
padding:18px 0;
}

.profit-bar div:last-child{
border-bottom:0;
}
}


.sidebar-brand{
display:flex;
align-items:center;
gap:14px;
font-size:32px;
font-weight:900;
padding-bottom:20px;
}

.sidebar-brand span{
color:white;
}

.sidebar-logo{
width:56px;
height:56px;
object-fit:contain;

filter:
drop-shadow(0 0 20px rgba(80,255,255,.35));
}



/* GROSSES LOGO OBEN LINKS */

.sidebar-brand{

display:flex;
justify-content:center;
align-items:center;

padding:

10px
0
35px
0;

border-bottom:

1px solid rgba(255,255,255,.06);

margin-bottom:35px;
}


.sidebar-big-logo{

width:150px;

height:auto;

object-fit:contain;

filter:

drop-shadow(
0 0 30px
rgba(80,255,255,.25)
);

transition:.25s;
}


.sidebar-big-logo:hover{

transform:scale(1.03);

filter:

drop-shadow(
0 0 45px
rgba(80,255,255,.4)
);

}


/* Logo oben links komplett ohne Text */
.brand.logo-only{
display:flex !important;
justify-content:center !important;
align-items:center !important;
margin:0 0 42px 0 !important;
padding:18px 0 30px 0 !important;
border-bottom:1px solid rgba(47,200,200,.14) !important;
}

.brand.logo-only .brand-icon,
.brand.logo-only .brand-text{
display:none !important;
}

.sidebar-full-logo{
width:320px !important;
max-width:95% !important;
height:auto !important;
object-fit:contain !important;
display:block !important;
filter:drop-shadow(0 0 28px rgba(47,200,200,.35)) !important;
}


/* LOGO FINAL GROSS */
.app-shell{
grid-template-columns:360px 1fr !important;
}

.sidebar{
width:360px !important;
}

.brand.logo-only{
padding:25px 0 38px 0 !important;
margin-bottom:36px !important;
}

.sidebar-full-logo{
width:320px !important;
max-width:320px !important;
height:auto !important;
display:block !important;
object-fit:contain !important;
}


/* LOGIN DESIGN */
.login-body{
min-height:100vh;
margin:0;
background:
radial-gradient(circle at 50% 0%, rgba(47,200,200,.16), transparent 35%),
linear-gradient(180deg,#020405,#071012);
color:var(--text);
font-family:Inter,Arial,sans-serif;
display:flex;
align-items:center;
justify-content:center;
}

.login-shell{
width:100%;
max-width:520px;
padding:30px;
display:flex;
flex-direction:column;
align-items:center;
}

.login-logo{
width:620px;
max-width:100%;
height:auto;
object-fit:contain;
margin-bottom:45px;
filter:drop-shadow(0 0 35px rgba(47,200,200,.45));
}

.login-card{
width:100%;
background:linear-gradient(180deg,rgba(13,20,24,.96),rgba(5,8,9,.98));
border:1px solid rgba(47,200,200,.22);
border-radius:18px;
padding:30px;
box-shadow:0 25px 70px rgba(0,0,0,.55);
}

.login-card label{
color:#dce7ea !important;
font-weight:800;
}

.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"]{
width:100%;
background:#030607 !important;
border:1px solid rgba(47,200,200,.25) !important;
color:white !important;
border-radius:12px !important;
padding:13px 14px !important;
outline:none !important;
}

.login-card input:focus{
border-color:var(--cyan-light) !important;
box-shadow:0 0 0 3px rgba(47,200,200,.12) !important;
}

.login-card button{
background:linear-gradient(135deg,var(--cyan),var(--cyan-light)) !important;
color:#031014 !important;
border:none !important;
border-radius:12px !important;
padding:12px 20px !important;
font-weight:900 !important;
}

.login-card a{
color:var(--cyan-light) !important;
}

.login-card span{
color:#b7c4c9 !important;
}


/* LOGIN LOGO EXTREM GROSS */
.login-logo{

width:900px !important;

max-width:none !important;

height:auto !important;

margin-bottom:60px !important;

filter:
drop-shadow(
0 0 55px rgba(47,200,200,.55)
);

}

.login-shell{

max-width:1000px !important;

}



/* ===== KOMPAKTER MODUS ===== */

:root{

--sidebar-width:220px;

}


/* Sidebar schmaler */

.sidebar{

width:220px !important;
min-width:220px !important;

}

.app-shell{

grid-template-columns:
220px
1fr !important;

}


/* Logo kleiner */

.sidebar-full-logo{

width:170px !important;

}


/* Hauptbereich enger */

.main{

padding:22px !important;

}


/* Überschrift */

.page-title,
h1{

font-size:58px !important;

margin-bottom:10px !important;

}


/* Karten kompakter */

.card,
.route-card,
.calc-card{

padding:16px !important;

border-radius:16px !important;

}


/* Produktionskette enger */

.production-step{

padding:14px !important;

margin-bottom:12px !important;

}


/* Eingabefelder kleiner */

input,
select,
textarea{

padding:10px 12px !important;

font-size:14px !important;

height:auto !important;

}


/* Buttons */

button{

padding:
10px
18px !important;

font-size:14px !important;

}


/* Statistiken unten */

.stats-grid{

gap:10px !important;
}

.stats-card{

padding:14px !important;

}


/* Gewinnboxen */

.summary-card{

padding:14px !important;

}


/* Tabellen/Kosten */

.cost-card{

padding:14px !important;

}


/* Alles etwas kleiner */

body{

font-size:14px;

}


/* Rechner oben */

.calc-header{

margin-bottom:18px !important;

}


/* Produktionskette schmal */

.production-chain{

gap:10px !important;

}


/* ===== RECHNER VARIANTE 4 - KACHEL DESIGN ===== */

.v4-page{
max-width:100%;
}

.v4-head{
display:grid;
grid-template-columns:1fr 1.45fr;
gap:24px;
align-items:end;
margin-bottom:18px;
}

.v4-head h1{
font-size:46px !important;
margin:0 0 8px 0 !important;
}

.v4-head p{
color:#9aa7ad;
font-weight:700;
}

.v4-form{
display:grid;
grid-template-columns:1.2fr .65fr .55fr auto;
gap:14px;
align-items:end;
}

.v4-form label{
display:block;
font-size:12px;
font-weight:900;
color:#98a6ab;
margin-bottom:7px;
}

.v4-form input,
.v4-form select{
width:100%;
background:#030708;
border:1px solid rgba(47,200,200,.22);
color:white;
border-radius:9px;
padding:10px 12px;
font-weight:800;
}

.v4-form button{
height:42px;
border:0;
border-radius:9px;
background:linear-gradient(135deg,#30d6d8,#67eeee);
color:#021014;
font-weight:1000;
padding:0 22px;
cursor:pointer;
}

.v4-top-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-bottom:18px;
}

.v4-top-stats div,
.v4-panel,
.v4-profit-grid div,
.v4-hint{
background:linear-gradient(180deg,rgba(15,24,28,.96),rgba(5,8,9,.98));
border:1px solid rgba(103,231,231,.15);
border-radius:13px;
box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.v4-top-stats div{
padding:18px 22px;
}

.v4-top-stats span{
display:block;
color:#b8c3c7;
font-size:15px;
font-weight:800;
margin-bottom:10px;
}

.v4-top-stats strong{
font-size:34px;
}

.v4-main-grid{
display:grid;
grid-template-columns:1.45fr .95fr;
gap:18px;
}

.v4-panel{
padding:20px;
min-height:315px;
}

.v4-panel h2{
font-size:22px;
margin-bottom:18px;
}

.v4-chain{
display:flex;
align-items:stretch;
gap:10px;
overflow-x:auto;
padding-bottom:8px;
}

.v4-chain-card{
min-width:150px;
max-width:170px;
flex:1;
background:rgba(255,255,255,.04);
border:1px solid rgba(47,200,200,.22);
border-radius:11px;
padding:14px;
display:flex;
flex-direction:column;
gap:12px;
justify-content:space-between;
}

.v4-chain-card.sell{
border-color:rgba(255,190,30,.65);
background:linear-gradient(180deg,rgba(255,190,30,.16),rgba(255,190,30,.04));
}

.v4-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
background:rgba(47,200,200,.12);
border-radius:10px;
font-size:21px;
}

.v4-chain-card strong{
font-size:16px;
line-height:1.2;
}

.v4-chain-card span{
font-size:12px;
color:#9ba8ad;
line-height:1.35;
}

.v4-chain-card b{
color:white;
}

.v4-arrow{
align-self:center;
color:#b7e9ff;
font-size:28px;
font-weight:900;
}

.v4-time-list{
display:grid;
gap:9px;
}

.v4-time-row{
display:grid;
grid-template-columns:1.35fr .75fr .75fr .75fr;
gap:10px;
align-items:center;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.07);
border-radius:9px;
padding:11px 13px;
font-size:13px;
}

.v4-time-row span,
.v4-time-row strong{
font-weight:900;
}

.v4-time-total{
margin-top:14px;
padding:14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
}

.v4-time-total div{
display:flex;
justify-content:space-between;
margin-bottom:9px;
}

.v4-time-total span{
color:#9ba8ad;
}

.v4-time-total strong{
color:white;
}

.v4-time-total .cyan span,
.v4-time-total .cyan strong{
color:#55eff2;
font-size:18px;
font-weight:1000;
}

.v4-profit-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:18px;
}

.v4-profit-grid div{
padding:18px;
}

.v4-profit-grid span{
display:block;
font-weight:900;
margin-bottom:8px;
}

.v4-profit-grid strong{
display:block;
font-size:30px;
color:#4ade80;
margin-bottom:7px;
}

.v4-profit-grid small{
color:#9ba8ad;
}

.v4-hint{
margin-top:16px;
padding:14px 18px;
display:flex;
gap:10px;
align-items:center;
border-color:rgba(47,200,200,.35);
}

.v4-hint strong{
color:#55eff2;
}

.v4-hint span{
color:#9ba8ad;
}

.red{color:#ff5c66!important;}
.green{color:#4ade80!important;}
.cyan{color:#55eff2!important;}

@media(max-width:1300px){
.v4-head,
.v4-form,
.v4-top-stats,
.v4-main-grid,
.v4-profit-grid{
grid-template-columns:1fr;
}
}


.calc-v4{

max-width:100%;

}

.calc-v4 h1{

font-size:64px;

margin-bottom:0;

}

.sub{

margin-bottom:20px;

color:#9aa6aa;

}

.topbar{

display:grid;

grid-template-columns:
1fr
180px
120px
180px;

gap:14px;

margin-bottom:20px;

}

.topbar input,
.topbar select{

background:#060b0d;

border:1px solid #17363a;

padding:12px;

border-radius:10px;

color:white;

}

.topbar button{

background:#4ce4e8;

border:0;

border-radius:10px;

font-weight:900;

}

.stats{

display:grid;

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

gap:14px;

margin-bottom:20px;

}

.stats div{

padding:18px;

background:#0a1114;

border-radius:12px;

}

.stats span{

display:block;

margin-bottom:8px;

}

.stats strong{

font-size:34px;

}

.grid{

display:grid;

grid-template-columns:
1.6fr
1fr;

gap:20px;

}

.panel{

background:#0a1114;

padding:22px;

border-radius:14px;

}

.chain{

display:flex;

gap:10px;

overflow:auto;

}

.chain-card{

min-width:160px;

padding:18px;

background:#10191d;

border-radius:12px;

}

.chain-card small{

display:block;

margin-top:12px;

color:#a9b1b3;

}

.time{

display:grid;

grid-template-columns:
1fr
120px
120px
120px;

padding:12px;

background:#10191d;

border-radius:10px;

margin-bottom:10px;

}

.green{

color:#45e287;

}

.red{

color:#ff6262;

}