/* Einfache, dezente Styles für eine klare, moderne Optik */
:root { --brand:#0d6efd; --ink:#1a1a1a; --muted:#6c757d; --bg:#ffffff; }
html, body { height:100%; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; color:var(--ink); background:var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.header { display:flex; gap:1rem; align-items:center; justify-content: space-between; padding: 1rem 0; }
.brand { font-weight: 700; letter-spacing:.2px; font-size: 1.1rem; }
.nav a { margin-right: 1rem; }
.nav a.active { font-weight: 700; }
.hero { padding: 3rem 0; }
.hero h1 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom:.5rem; }
.hero p { color: var(--muted); max-width: 60ch; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; }
.card { border: 1px solid #eee; border-radius: 14px; padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.footer { color: var(--muted); font-size:.9rem; padding: 2rem 0; border-top:1px solid #eee; margin-top:2rem; }
.btn { display:inline-block; padding:.7rem 1rem; border-radius: 10px; border:1px solid var(--brand); color:white; background:var(--brand); }
.btn:visited { color:white; }
.badge { display:inline-block; font-size:.8rem; padding:.2rem .5rem; border-radius:8px; background:#eef5ff; color:#0b5ed7; border:1px solid #d6e6ff;}
.kicker { text-transform: uppercase; letter-spacing:.12em; font-size:.78rem; color:var(--muted); }
.section { padding: 2rem 0; }
dl { display:grid; grid-template-columns: auto 1fr; gap:.5rem 1rem; }
dt { color: var(--muted); }
address { font-style: normal; }
.form { max-width: 680px; }
.form label { display:block; margin:.6rem 0 .2rem; }
.form input, .form textarea { width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid #ddd; }
.form button { margin-top: .8rem; }
.small { font-size:.9rem; color:var(--muted); }
/* site.css – Utility, damit ein Element die ganze Grid-Breite nutzt */
.span-3 {
    grid-column: 1 / -1;
}

.card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: .75rem;
    margin: 1rem 0
}

.form-control {
    width: 100%;
    margin: .25rem 0 .75rem 0;
    padding: .5rem
}

.btn {
    padding: .5rem .9rem;
    border: 0;
    border-radius: .5rem;
    cursor: pointer
}

.boxed {
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: .5rem;
    padding: .75rem;
    white-space: pre-wrap
}

.grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .75rem
}

.small {
    opacity: .8
}

address {
    font-style: normal;
}

:root {
    --brand-blue: #24A9DC; /* dts-Blau aus dem Logo */
    --brand-blue-strong: #1e97c5; /* etwas dunkler (Hover) */
}

/* Header-Hintergrund in Markenblau */
.brand-nav {
    background-color: var(--brand-blue);
}

    /* Linkfarben im Navbar dunkel/hell steuern via .navbar-dark */
    .brand-nav.navbar-dark {
        --bs-navbar-color: rgba(255,255,255,.9); /* Text/Links */
        --bs-navbar-hover-color: #fff; /* Hover */
        --bs-navbar-brand-color: #fff; /* Brand */
        --bs-navbar-active-color: #fff; /* aktiver Link */
        --bs-navbar-toggler-border-color: rgba(255,255,255,.25);
    }

    /* Optional: aktiver NavLink sichtbarer */
    .brand-nav .nav-link.active {
        text-decoration: underline;
        text-underline-offset: .25rem;
    }

/* Logo-Größenfix */
.brand-logo {
    height: 48px;
    width: auto;
    display: block;
}

/* Address überall nicht kursiv */
address {
    font-style: normal;
}

:root {
    --brand-blue: #24A9DC;
}

.brand-nav {
    background-color: var(--brand-blue);
}

    /* Falls der Burger trotzdem „unsichtbar“ ist, Icon explizit weiß setzen: */
    .brand-nav .navbar-toggler-icon {
        background-image: var(--bs-navbar-toggler-icon-bg) !important;
    }


:root {
    --brand-blue: #24A9DC;
}
/* dein Blau */

/* Nur im mobilen Zustand (unter lg) den Collapse einfärben */
@media (max-width: 991.98px) {
    .brand-nav .navbar-collapse {
        background-color: var(--brand-blue); /* sichtbar */
        padding: .75rem 1rem; /* Luft innen */
        border-top: 1px solid rgba(255,255,255,.25); /* dezente Trennung */
    }

    .brand-nav .nav-link {
        color: rgba(255,255,255,.9) !important; /* Links sichtbar */
    }

        .brand-nav .nav-link:hover,
        .brand-nav .nav-link.active {
            color: #fff !important;
            text-decoration: underline;
            text-underline-offset: .25rem;
        }
}