/* =========================================================
   KASSENMONITOR MASTER CSS (km-v1.css)
   ========================================================= */

:root {
  --color-primary: #1d2433;    
  --color-bg: #f7f8fa;         
  --color-surface: #ffffff;
  --color-accent: #2e8b78;     
  --color-text: #334155;
  --color-text-soft: #5b6678;
  --color-border: rgba(17, 24, 39, 0.1);
  --color-sand: #eee7de;
  --font-main: 'Inter', sans-serif;
  --container-width: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

body { 
    margin: 0; padding: 0; background: var(--color-bg); 
    color: var(--color-text); font-family: var(--font-main); 
    line-height: 1.6; -webkit-font-smoothing: antialiased;
}

/* ANTI-BLAU-LINK-GARANTIE */
a { color: var(--color-primary); text-decoration: none; transition: 0.2s; }
a:hover { color: var(--color-accent); }

/* ZENTRIERUNG */
.container { 
    max-width: var(--container-width); 
    width: 90%; 
    margin: 0 auto !important; 
    position: relative; 
}

/* HEADER */
.site-header { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1000; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); }
.nav { display: flex; gap: 25px; }
.nav a { font-weight: 700; font-size: 0.95rem; }

/* SECTIONS */
.section { padding: 80px 0; clear: both; }
.section--soft { background: var(--color-sand); border-top: 1px solid var(--color-border); }

/* CARDS & GRIDS */
.grid { display: grid; gap: 30px; margin-top: 40px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card { background: #fff; padding: 40px; border-radius: 20px; border: 1px solid var(--color-border); height: 100%; }

/* TABELLE */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--color-border); border-radius: 20px; margin: 40px 0; }
.comp-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.comp-table th, .comp-table td { padding: 20px; text-align: left; border-bottom: 1px solid var(--color-border); }
.is-featured { background: rgba(46, 139, 120, 0.05); }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 99px; font-weight: 700; background: var(--color-primary); color: #fff !important; border: none; cursor: pointer; }
.btn--accent { background: var(--color-accent); }

/* FOOTER */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.7); padding: 80px 0 40px; margin-top: 80px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-title { color: #fff; margin-bottom: 20px; font-weight: 800; text-transform: uppercase; font-size: 0.85rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 10px; }
.footer-list a { color: rgba(255,255,255,0.8); }

@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } .nav { display: none; } }