/* --- GLOBALE EINSTELLUNGEN --- */
body {
    background-color: #dcdde1; /* Mattes Grau für den Bereich AUẞERHALB des Kastens */
    font-family: verdana, geneva, helvetica, arial, sans-serif;
    color: #000000;
    margin: 0;
    padding: 0;
}

/* --- HEADER-BILD OBEN ZÄHMEN (Jetzt optimiert für SVG) --- */
p.head {
    width: 92% !important;
    max-width: 450px !important; /* Hier stellst du ein, wie breit das Logo maximal sein darf */
    margin: 30px auto 15px auto !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* Verhindert, dass der Schatten-Kasten hier reinpfuscht */
}

img.header-bild {
    display: block;
    width: 100% !important;      /* Dehnt das SVG bis zur maximalen Breite von 450px aus */
    height: auto !important;     /* Ganz wichtig bei SVGs: Verhindert, dass das Bild gestaucht oder verzerrt wird! */
}

/* Die Navigation über dem Kasten befreien */
.nav-leiste {
    background: none !important; /* Kein Kasten-Hintergrund für das Menü! */
    box-shadow: none !important; /* Kein Schatten für das Menü! */
    margin-bottom: 10px !important;
}

/* --- DER STYLISCHE SCHATTEN-KASTEN (Gesamthülle) --- */
.seite-kasten {
    background-color: #eeeff0; /* Deine gewohnte helle Hintergrundfarbe IM Kasten */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Der weiche, plastische Edel-Schatten */
    padding: 40px !important;       /* Gleichmäßige Knautschzone rundherum im Kasten */
    box-sizing: border-box;         /* Verhindert, dass das Padding das Layout verzerrt */

    /* ELASTISCHE BASIS (Standard-Monitore) */
    width: 92%;
    max-width: 750px;        /* Stoppt bei perfekten 750px Textbreite */
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* --- DEINE ELEMENTE (Nutzen die Breite des Hauptkastens) --- */
h1, h2, h3, h4, h5,
p.big, p.narrow, p.narrowc, hr.narrow,
ul.narrow, ol.narrow, table, .nav-leiste {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
}

/* Zentrierungen innerhalb des Kastens */
h1, h2, h3, h4, h5, hr.narrow, .nav-leiste, table {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- ÜBERSCHRIFTEN --- */
h1, h2, h3, h4, h5 {
    font-weight: bold;
    text-align: center;
}
h1 { font-size: 20px; margin-top: 0; padding-top: 0; }
h2 { font-size: 18px; margin-top: 25px; }
h3 { font-size: 16px; margin-top: 20px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }

/* --- TEXTABSÄTZE & TRENNLINIEN --- */
p.big     { font-size: 14px; text-align: justify; margin-top: 10px; margin-bottom: 10px; }
p.narrow  { font-size: 12px; text-align: justify; margin-top: 10px; margin-bottom: 10px; overflow: auto; }
p.narrowc { font-size: 12px; text-align: center; margin-top: 10px; margin-bottom: 10px; }

p.head {
    margin-left: auto;
    margin-right: auto;
    width: 92%;
    max-width: 450px;
    text-align: center;
}

hr.narrow {
    border: none;
    border-top: 1px solid #000000;
    margin-top: 25px;
    margin-bottom: 25px;
    height: 0;
}

p.small  { font-size: 10px; text-align: justify; margin: 10px 0; }
p.usual  { font-size: 12px; text-align: justify; margin: 10px 0; }
p.n      { font-size: 12px; text-align: justify; margin: 10px 0; }
p.center { font-size: 12px; text-align: center; margin: 10px 0; }

/* --- LISTEN --- */
ul.narrow, ol.narrow {
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 25px !important;
}

ul.narrow li, ol.narrow li {
    font-family: verdana, geneva, helvetica, arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 8px;
    text-align: justify;
    color: #000000;
}

/* --- MODERNE NAVIGATION (Ersatz für die Tabelle) --- */
.nav-leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-top: 0;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
}

/* --- TABELLEN --- */
table {
    border: none;
}

table.content        { height: 40px; font-size: 14px; text-align: justify; }
table.content2       { font-size: 12px; text-align: justify; }
table.contentnarrow  { max-width: 350px !important; font-size: 12px; text-align: center; }
table.contentnarrow2 { max-width: 390px !important; font-size: 12px; text-align: center; }
table.contentnarrow3 { max-width: 550px !important; font-size: 12px; text-align: justify; }
table.contentnarrow4 { max-width: 550px !important; font-size: 12px; text-align: center; }
table.contentpoem    { max-width: 420px !important; font-size: 12px; text-align: center; }
table.contentlinks   { max-width: 690px !important; font-size: 12px; text-align: center; }

table.content3 {
    font-size: 12px;
    text-align: justify;
}

/* --- BILDER-REGEL & MITTELGROSSER UMLAUF --- */
p.narrow img, table img {
    display: block;
    width: 100%;
    height: auto;
    margin: 20px auto;
}

img.bild-links {
    display: block !important;
    float: left !important;
    width: auto !important;
    max-width: 350px !important;
    height: auto !important;
    margin-top: 0px !important;
    margin-right: 18px !important;  /* Knautschzone nach rechts */
    margin-bottom: 8px !important;
    margin-left: 0px !important;
}

/* --- LINKS (Dunkler Hintergrund) --- */
a.darkbg:link, a.darkbg:visited { text-decoration: none; color: #eeeff0; }
a.darkbg:hover                  { text-decoration: none; color: #fb556d; }
a.darkbg:active                 { text-decoration: none; color: #000000; }

/* --- LINKS (Heller Hintergrund) --- */
a.litebg:link, a.litebg:visited, a.litebg:hover, a.litebg:active {
    text-decoration: underline;
    font-weight: bold;
}
a.litebg:link    { color: #000000; }
a.litebg:visited { color: #5d5d63; }
a.litebg:hover   { color: #ef0955; }
a.litebg:active  { color: #ffffff; }

/* =========================================================================
 *   --- AUTOMATISCHE ANPASSUNG FÜR RIESIGE BILDSCHIRME (4K / Ultra-Wide) ---
 *   ========================================================================= */
@media screen and (min-width: 1900px) {
    body {
        font-size: 18px;
    }

    p.narrow, ul.narrow li, ol.narrow li {
        font-size: 18px;
        line-height: 1.75;
    }

    h1 { font-size: 36px; }
    h2 { font-size: 30px; }
    h3 { font-size: 26px; }
    h4 { font-size: 22px; }
    h5 { font-size: 18px; }

    .nav-leiste {
        font-size: 18px;
    }

    /* Nur der Hauptkasten wird auf 4K breiter und bekommt mehr Luft */
    .seite-kasten {
        max-width: 950px;
        padding: 60px !important; /* Mehr edler Freiraum auf 4K */
        margin-top: 60px;
        margin-bottom: 60px;
    }

    /* Feinjustierung für fließende Bilder im 4K-Modus */
    img.bild-links {
        max-width: 440px !important;
        margin-right: 25px !important;
        margin-bottom: 12px !important;
    }
}

/* --- BOT-SCHUTZ FÜR IMPRESSUM (CSS-Injektion) --- */
.kontakt-mail::after {
    content: "webmaster" "@" "katzenkopfnebel.de";
}