/* ============================================================
   Seitenrahmen für alle Unterseiten: Menü oben und Fußzeile unten,
   genau wie auf der Startseite. Gefüllt wird beides von seitenrahmen.js.
   Inhalt von Menü und Fußzeile NICHT hier ändern, sondern in index.html.
   Die Regeln unten sind eine Kopie der Startseite (Abschnitte NAV und FOOTER)
   und gegen die eigenen Regeln der Unterseiten abgeschirmt.
   ============================================================ */

/* Platz für das feste Menü (und den Hinweis-Banner, falls aktiv) */
html body { padding-top: calc(74px + var(--kz-hinweis-h, 0px)); }

.kz-rahmen .nav, .kz-rahmen .footer {
    --white: #ffffff; --anthrazit: #353535; --orange: #ef5a07; --beere: #c91f44;
    --blau: #44b7a9; --sand: #e9d4ae;
    --shadow-sm: 0 2px 8px rgba(53,53,53,.06);
    --transition: .3s ease;
    font-family: 'Comfortaa', sans-serif; font-size: 16px; line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
/* Abschirmen gegen allgemeine Regeln der Unterseiten (z. B. Links, Listen, footer) */
.kz-rahmen .nav *, .kz-rahmen .footer *,
.kz-rahmen .nav *::before, .kz-rahmen .nav *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kz-rahmen .nav ul, .kz-rahmen .footer ul { list-style: none; }
.kz-rahmen .nav a, .kz-rahmen .footer a {
    text-decoration: none; border-bottom: 0; word-break: normal; transition: color var(--transition);
}

/* ===== NAV (wie index.html) ===== */
.kz-rahmen .nav { position: fixed; top: var(--kz-hinweis-h, 0px); left: 0; right: 0; z-index: 1000; padding: 11px 0; background: var(--sand); box-shadow: var(--shadow-sm); }
.kz-rahmen .nav-container { display: flex; align-items: center; justify-content: space-between; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.kz-rahmen .nav-logo { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.12rem; color: var(--anthrazit); }
.kz-rahmen .nav-logo:hover { color: var(--anthrazit); }
.kz-rahmen .nav-logo svg, .kz-rahmen .nav-logo img { width: 42px; height: 42px; flex: 0 0 auto; }
.kz-rahmen .nav-menu { display: flex; align-items: center; gap: 26px; }
.kz-rahmen .nav-link { color: var(--anthrazit); font-weight: 500; font-size: .94rem; position: relative; padding: 4px 0; }
.kz-rahmen .nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background: var(--orange); transition: width var(--transition); }
.kz-rahmen .nav-link:hover, .kz-rahmen .nav-link[aria-current="page"] { color: var(--orange); }
.kz-rahmen .nav-link:hover::after, .kz-rahmen .nav-link[aria-current="page"]::after { width: 100%; }
.kz-rahmen .nav .btn {
    display: inline-block; border-radius: 50px; font-family: 'Comfortaa', sans-serif; font-weight: 600;
    text-align: center; border: none; cursor: pointer; transition: all var(--transition);
    background: var(--beere); color: var(--white); box-shadow: none; width: auto;
}
.kz-rahmen .nav .btn:hover { background: var(--orange); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,31,68,.3); }
.kz-rahmen .nav-cta { padding: 10px 22px; font-size: .9rem; }
@media (min-width:981px){
    .kz-rahmen .nav-menu { gap: 16px; }
    .kz-rahmen .nav-link, .kz-rahmen .nav-cta { white-space: nowrap; }
    .kz-rahmen .nav-cta { padding: 10px 16px; }
}
.kz-rahmen .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; }
.kz-rahmen .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--anthrazit); transition: all var(--transition); }
.kz-rahmen .nav-toggle.active span:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
.kz-rahmen .nav-toggle.active span:nth-child(2){ opacity: 0; }
.kz-rahmen .nav-toggle.active span:nth-child(3){ transform: rotate(-45deg) translate(5px,-5px); }
@media (max-width:980px){
    .kz-rahmen .nav-menu {
        position: fixed; top: 0; right: -100%; width: 290px; height: 100vh;
        background: var(--sand); flex-direction: column; justify-content: center;
        gap: 28px; padding: 40px; transition: right var(--transition);
        box-shadow: -4px 0 20px rgba(0,0,0,.1);
    }
    .kz-rahmen .nav-menu.active { right: 0; }
    .kz-rahmen .nav-toggle { display: flex; }
}

/* ===== FOOTER (wie index.html) ===== */
.kz-rahmen .footer { background: #2b2b2b; color: var(--white); padding: 58px 0 30px; border-top: 0; margin: 0; }
.kz-rahmen .footer .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.kz-rahmen .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 38px; margin-bottom: 38px; }
@media (max-width:860px){ .kz-rahmen .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:500px){ .kz-rahmen .footer-grid { grid-template-columns: 1fr; } }
.kz-rahmen .footer-logo { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 700; font-size: 1.1rem; margin-bottom: 12px; }
.kz-rahmen .footer-logo:hover { color: var(--white); }
.kz-rahmen .footer-logo svg, .kz-rahmen .footer-logo img { width: 34px; height: 34px; flex: 0 0 auto; }
.kz-rahmen .footer-brand p { opacity: .65; font-size: .92rem; }
.kz-rahmen .footer h4 { font-size: .98rem; font-weight: 600; margin-bottom: 14px; color: var(--white); }
.kz-rahmen .footer-list { display: flex; flex-direction: column; gap: 9px; }
.kz-rahmen .footer-list li, .kz-rahmen .footer-list a { opacity: .65; font-size: .92rem; color: var(--white); }
.kz-rahmen .footer-list a:hover { opacity: 1; color: var(--blau); }
.kz-rahmen .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; text-align: center; }
.kz-rahmen .footer-bottom p { opacity: .5; font-size: .82rem; margin: 0; }