/* =================================================
   🌐 BASIS
================================================= */

body{
 font-family:Arial, sans-serif;
 background:#f4f6f8;
 margin:0;
 padding:20px;
}

/* =================================================
   📦 BOX – RESPONSIVE PRO
================================================= */

.box{
 background:#fff;
 padding:30px;
 border-radius:12px;
 box-shadow:0 0 20px rgba(0,0,0,.08);

 /* ⭐ RESPONSIVE */
 width:95%;
 max-width:1600px;
 margin:20px auto;
}

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

.btn{
 display:inline-block;
 background:#0066cc;
 color:#fff;
 padding:10px 14px;
 text-decoration:none;
 border-radius:6px;
 margin-top:10px;
 transition:.2s;
}

.btn:hover{
 background:#0052a3;
}

/* =================================================
   🧾 FORM ELEMENTE
================================================= */

input,button{
 padding:10px;
 margin:5px 0;
 width:100%;
 box-sizing:border-box;
}

/* =================================================
   📊 TABELLEN
================================================= */

.kasse{
 width:100%;
 border-collapse:collapse;
 margin-top:20px;
}

.kasse th,
.kasse td{
 padding:10px;
 border-bottom:1px solid #ddd;
 text-align:left;
}

.kasse tr:hover{
 background:#f2f6ff;
}

/* Einnahme / Ausgabe Farben */

.ein{
 color:#1a8f2a;
 font-weight:bold;
}

.aus{
 color:#c0392b;
 font-weight:bold;
}

.saldo{
 font-weight:bold;
}

/* =================================================
   📈 DASHBOARD CARDS
================================================= */

.stats{
 display:flex;
 flex-wrap:wrap;
 gap:15px;
 margin-top:20px;
}

.card{
 background:#f5f7fb;
 padding:15px;
 border-radius:10px;
 min-width:220px;
 flex:1;
}

.card p{
 font-size:20px;
 font-weight:bold;
 margin:0;
}

.card.ein{ background:#e8f7ec; }
.card.aus{ background:#fdeaea; }
.card.saldo{ background:#e7f0ff; }

/* =================================================
   🧭 NAV TOP
================================================= */

.nav-top{
 margin-bottom:15px;
}

/* =================================================
   📱 MOBILE BREAKPOINTS
================================================= */

@media(max-width:900px){

 body{
  padding:10px;
 }

 .box{
  width:100%;
  padding:20px;
 }

 .kasse th,
 .kasse td{
  font-size:14px;
 }

}

@media(max-width:600px){

 h2{
  font-size:20px;
 }

 .btn{
  width:100%;
  text-align:center;
 }

 .stats{
  flex-direction:column;
 }

}

/* =================================================
   🧭 TOP NAVIGATION PRO
================================================= */

.topnav{
 position:sticky;
 top:0;
 background:#0066cc;
 padding:10px;
 display:flex;
 gap:15px;
 flex-wrap:wrap;
 z-index:1000;
}

.topnav a{
 color:#fff;
 text-decoration:none;
 padding:8px 10px;
 border-radius:6px;
}

.topnav a:hover{
 background:#0052a3;
}

.topnav .right{
 margin-left:auto;
 background:#c0392b;
}

/* =================================================
   🧭 TOPNAV PRO++
================================================= */

.topnav{
 position:sticky;
 top:0;
 background:#0066cc;
 padding:10px 15px;
 display:flex;
 align-items:center;
 gap:10px;
 flex-wrap:wrap;
 z-index:999;
}

.topnav a{
 color:#fff;
 text-decoration:none;
 padding:8px 12px;
 border-radius:6px;
 transition:.2s;
}

.topnav a:hover{
 background:#0052a3;
}

.topnav a.active{
 background:#004a99;
 font-weight:bold;
}

.topnav .right{
 margin-left:auto;
 display:flex;
 align-items:center;
 gap:10px;
}

.topnav .role{
 color:#fff;
 opacity:.9;
 font-size:14px;
}

.topnav .logout{
 background:#c0392b;
}

/* Mobile */

@media(max-width:700px){

 .topnav{
  gap:5px;
 }

 .topnav a{
  font-size:14px;
  padding:6px 8px;
 }

}


/* =================================================
   🧭 TOPNAV ULTRA – BREITE VERSION
================================================= */

.topnav{
 position:sticky;
 top:0;
 background:#0066cc;
 padding:12px 40px;

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

 z-index:999;
}

/* LINKER BEREICH */

.topnav .left{
 display:flex;
 gap:12px;
}

.topnav a{
 color:#fff;
 text-decoration:none;
 padding:8px 14px;
 border-radius:6px;
 white-space:nowrap;
}

.topnav a:hover{
 background:#0052a3;
}

.topnav a.active{
 background:#004a99;
 font-weight:bold;
}

/* RECHTER BEREICH */

.topnav .right{
 display:flex;
 align-items:center;
 gap:15px;
}

.topnav .saldo{
 display:flex;
 align-items:center;
 gap:6px;

 color:#fff;
 font-weight:bold;
 font-size:16px;

 background:#004a99;
 padding:10px 16px;
 border-radius:10px;

 min-width:120px;     /* ⭐ verhindert zusammendrücken */
 justify-content:center;
}

.topnav .saldo{
 background:#004a99;
}

.topnav .saldo.minus{
 background:#c0392b;
}

.topnav .saldo.plus{
 background:#1a8f2a;
}





.topnav .role{
 color:#fff;
 opacity:.9;
}

.topnav .logout{
 background:#c0392b;
}

.darkbtn{
 background:#222;
 color:#fff;
 border:none;
 padding:6px 12px;
 border-radius:6px;
 cursor:pointer;
}


/* =================================================
   🌙 DARK MODE
================================================= */

body.darkmode{
 background:#1e1e1e;
 color:#eee;
}

body.darkmode .box{
 background:#2b2b2b;
}

body.darkmode .kasse th,
body.darkmode .kasse td{
 border-color:#444;
}

body.darkmode .kasse tr:hover{
 background:#333;
}


/* =================================================
   🧭 PRO NAV ALIGNMENT
================================================= */

.topnav{
 position:sticky;
 top:0;
 background:#0066cc;
 padding:12px 40px;

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

 z-index:999;
}

/* LINKS — SALDO */

.nav-left{
 flex:1;
}

.topnav .saldo{
 display:inline-flex;
 align-items:center;
 gap:6px;
 color:#fff;
 font-weight:bold;
 background:#004a99;
 padding:10px 16px;
 border-radius:10px;
 min-width:140px;
 justify-content:center;
}

/* MITTE — MENÜ */

.nav-center{
 flex:2;
 display:flex;
 justify-content:center;
 gap:12px;
 flex-wrap:wrap;
}

.nav-center a{
 color:#fff;
 text-decoration:none;
 padding:8px 14px;
 border-radius:6px;
 white-space:nowrap;
}

.nav-center a:hover{
 background:#0052a3;
}

.nav-center a.active{
 background:#004a99;
 font-weight:bold;
}

/* RECHTS — USER */

.nav-right{
 flex:1;
 display:flex;
 justify-content:flex-end;
 align-items:center;
 gap:12px;
}

.topnav .role{
 color:#fff;
}

.topnav .logout{
 background:#c0392b;
}

.darkbtn{
 background:#222;
 color:#fff;
 border:none;
 padding:6px 12px;
 border-radius:6px;
 cursor:pointer;
}


/* =================================================
   🧭 ULTRA CLEAN NAV
================================================= */

.topnav{
 position:sticky;
 top:0;

 /* ⭐ Glas Effekt */
 background:rgba(0,102,204,0.92);
 backdrop-filter:blur(8px);

 padding:14px 50px;

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

 box-shadow:0 4px 15px rgba(0,0,0,.08);

 z-index:9999;
}

/* Inhalt soll direkt unter Nav starten */
body{
 padding-top:0;
}

/* BOX Abstand anpassen */
.box{
 margin-top:25px;
}

/* Links / Mitte / Rechts bleiben aus PRO ALIGNMENT */
.nav-left{ flex:1; }

.nav-center{
 flex:2;
 display:flex;
 justify-content:center;
 gap:14px;
}

.nav-right{
 flex:1;
 display:flex;
 justify-content:flex-end;
 align-items:center;
 gap:14px;
}

/* Saldo schöner */
.topnav .saldo{
 background:linear-gradient(135deg,#004a99,#0066cc);
 box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* Logout softer */
.topnav .logout{
 background:#e74c3c;
}


/* =================================================
   🧭 ULTRA CLEAN PRO++
================================================= */

/* ⭐ Menü Links clean */
.nav-center a{
 position:relative;
 color:#fff;
 text-decoration:none;
 padding:8px 10px;
 border-radius:4px;
}

/* aktiver Link = Unterstrich */
.nav-center a.active{
 background:none;
 font-weight:bold;
}

.nav-center a.active::after{
 content:"";
 position:absolute;
 left:0;
 bottom:-6px;
 width:100%;
 height:3px;
 background:#fff;
 border-radius:2px;
}

/* Hover weich */
.nav-center a:hover{
 background:rgba(255,255,255,.12);
}

/* ⭐ Saldo Farben */

.topnav .saldo.plus{
 background:linear-gradient(135deg,#1a8f2a,#2ecc71);
}

.topnav .saldo.minus{
 background:linear-gradient(135deg,#c0392b,#e74c3c);
}

/* =================================================
   🌙 DARKMODE PRO++
================================================= */

body.darkmode{
 background:#121212;
 color:#eee;
}

body.darkmode .box{
 background:#1e1e1e;
 box-shadow:0 0 20px rgba(0,0,0,.5);
}

body.darkmode .topnav{
 background:rgba(20,20,20,.9);
}

body.darkmode .nav-center a.active::after{
 background:#4da3ff;
}

body.darkmode .kasse tr:hover{
 background:#2a2a2a;
}


/* =================================================
   ✨ ULTRA DESIGN FINAL
================================================= */

/* ⭐ Nav wird beim Scrollen kompakter */

.topnav.scrolled{
 backdrop-filter:blur(12px);
 background:rgba(0,80,170,0.85);
 box-shadow:0 6px 20px rgba(0,0,0,.15);
}

/* ⭐ Seitenwechsel Fade */

.box{
 animation:fadeIn .35s ease;
}

@keyframes fadeIn{
 from{ opacity:0; transform:translateY(6px); }
 to{ opacity:1; transform:translateY(0); }
}

/* ⭐ Saldo Pulse */

.topnav .saldo.pulse{
 animation:pulseSaldo .6s ease;
}

@keyframes pulseSaldo{
 0%{ transform:scale(1); }
 40%{ transform:scale(1.08); }
 100%{ transform:scale(1); }
}