/* ============================================================
   steuerrechner24.de — Hauptstylesheet (Bootstrap 5)
   ============================================================ */

:root {
    --primary:       #16a34a;
    --primary-dark:  #15803d;
    --primary-light: #f0fdf4;
    --primary-mid:   #dcfce7;
    --text:          #1e293b;
    --text-muted:    #64748b;
    --border:        #e2e8f0;
    --bg:            #f8fafc;
    --white:         #ffffff;
    --shadow-xs:     0 1px 2px rgba(0,0,0,.06);
    --shadow-sm:     0 1px 4px rgba(0,0,0,.08);
    --shadow:        0 4px 16px rgba(0,0,0,.08);
    --radius:        10px;
    --radius-sm:     6px;
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

h1,h2,h3,h4,h5,h6 { font-weight: 600; color: var(--text); }

/* ---- Navbar ---- */
.site-header { background: var(--white); }

.navbar { padding-top: .6rem; padding-bottom: .6rem; }

.brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -.02em;
}
.brand-accent {
    color: var(--primary);
}

/* Nav links */
.navbar-nav .nav-link {
    color: var(--text);
    font-size: .875rem;
    font-weight: 500;
    padding: .45rem .7rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    background: var(--primary-light);
    color: var(--primary-dark);
}
.navbar-nav .nav-item.dropdown:hover > .nav-link { color: var(--primary); }

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .5rem;
    min-width: 220px;
    font-size: .875rem;
}
.dropdown-item {
    border-radius: var(--radius-sm);
    padding: .35rem .75rem;
    color: var(--text);
    transition: background .12s;
}
.dropdown-item:hover { background: var(--primary-light); color: var(--primary-dark); }

/* Multi-column dropdown */
.dropdown-menu.multi-col {
    min-width: 520px;
    display: none;
    flex-wrap: wrap;
}
.dropdown-menu.multi-col.show { display: flex; }
.dropdown-menu.multi-col .col-half {
    width: 50%;
    padding: 0 .25rem;
}
.dropdown-menu.multi-col .col-half ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dropdown-menu.multi-col .col-half ul li a {
    display: block;
    border-radius: var(--radius-sm);
    padding: .3rem .75rem;
    color: var(--text);
    text-decoration: none;
    font-size: .8rem;
    line-height: 1.4;
    transition: background .12s;
}
.dropdown-menu.multi-col .col-half ul li a:hover { background: var(--primary-light); color: var(--primary-dark); }

/* ---- AdSense ---- */
.ad-leaderboard { background: var(--white); padding: .5rem 0; border-bottom: 1px solid var(--border); text-align: center; }

/* ---- Page Header Bar ---- */
.page-header-bar {
    background: var(--white);
    border-bottom: 3px solid var(--primary);
    padding: 1rem 0;
}
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
    padding-left: .85rem;
    border-left: 4px solid var(--primary);
}

/* ---- Content ---- */
.content-body { background: var(--white); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-xs); }

.content-body h2 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: .6rem; color: var(--text); }
.content-body h2:first-child { margin-top: 0; }
.content-body h2 a { color: var(--text); text-decoration: none; }
.content-body h2 a:hover { color: var(--primary); }
.content-body h3 { font-size: 1.05rem; margin-top: 1.25rem; margin-bottom: .5rem; }
.content-body p { margin-bottom: .9rem; }
.content-body a { color: var(--primary); font-weight: 500; }
.content-body a:hover { color: var(--primary-dark); }
.content-body ul, .content-body ol { padding-left: 1.4rem; margin-bottom: .9rem; }
.content-body li { margin-bottom: .25rem; }
.content-body table { width: 100%; font-size: .9rem; margin-bottom: 1rem; border-collapse: collapse; }
.content-body table th, .content-body table td { padding: .5rem .75rem; border: 1px solid var(--border); }
.content-body table th { background: var(--bg); font-weight: 600; }
.content-body table tr:nth-child(even) td { background: #f9fafb; }

/* ---- Rechner-Boxen (kompatibel mit alten Seiten) ---- */
.rechner {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-xs);
    background: var(--white);
}
.rechner_top {
    background: var(--primary);
    color: white;
    padding: .75rem 1rem;
}
h2.rechner_top {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: white;
}
.rechner form { padding: 1rem; }
.rechner input[type="text"],
.rechner input[type="number"],
.rechner select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .4rem .65rem;
    font-size: .9rem;
    width: 100%;
}
.rechner input[type="submit"],
.rechner button[type="submit"] {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: .45rem 1.25rem;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rechner input[type="submit"]:hover,
.rechner button[type="submit"]:hover { background: var(--primary-dark); }

/* ---- Bootstrap btn-primary Override ---- */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:active { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-primary:focus { box-shadow: 0 0 0 .25rem rgba(22,163,74,.3); }

/* ---- Sidebar ---- */
.sidebar-widget {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--shadow-xs);
}
.partner-box a { color: var(--primary); font-weight: 500; }
.partner-box a:hover { color: var(--primary-dark); }

.product-cta {
    background: var(--primary);
    color: white;
    text-align: center;
    padding: .55rem .75rem;
    font-size: .83rem;
    font-weight: 500;
    line-height: 1.4;
}

/* ---- Footer ---- */
.site-footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}
.site-footer p { color: #94a3b8; margin-bottom: .4rem; }
.site-footer a { color: #94a3b8; text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: white; }
.site-footer h6 { color: #cbd5e1; }
.footer-brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: .4rem;
    letter-spacing: -.03em;
}
.footer-brand span { color: var(--primary); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .35rem; font-size: .875rem; }
.footer-divider { border-color: #1e293b; margin: 1.5rem 0 1rem; }

/* ---- Cookie Banner ---- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    z-index: 9999;
    padding: .9rem 0;
}
.cookie-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-text { font-size: .875rem; flex: 1; }
.cookie-text a { color: var(--primary); }
.cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* ---- Inhaltsverzeichnis ---- */
.inhaltsverzeichnis ul { padding-left: 1.25rem; }
.inhaltsverzeichnis a { font-weight: 400; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .dropdown-menu.multi-col { min-width: 100%; }
    .dropdown-menu.multi-col .col-half { width: 100%; }
}

@media (max-width: 767px) {
    .page-title { font-size: 1.2rem; }
    .content-body { padding: 1.1rem; }
    .cookie-inner { flex-direction: column; gap: .75rem; }
    .cookie-actions { width: 100%; justify-content: flex-end; }
}