/* =========================================================================
   wgiere.de – responsives Layout
   Markup:  .container > .row > [Sidebar: #header(Bild+Menü)] + [Inhalt]
            danach  #footer
   ========================================================================= */

:root {
    --maxw: 1100px;     /* maximale Gesamtbreite          */
    --sidebar: 210px;   /* Breite der linken Spalte (Desktop) */
    --gap: 36px;        /* Abstand zwischen den Spalten    */
    --ink: #242420;     /* Textfarbe                       */
    --muted: #6b6b63;   /* gedämpfter Text (Datum, Footer) */
    --accent: #5a6e52;  /* Akzent / Links                  */
    --line: #dcdcd4;    /* Trennlinien                     */
    --bg: #faf9f6;      /* Seitenhintergrund               */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 28px 18px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); }
a:hover { color: #455540; }

/* ------------------------------------------------------------------ Layout */
.container { max-width: var(--maxw); margin: 0 auto; }

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

/* linke Spalte (Sidebar) / rechte Spalte (Inhalt) – robust über Position */
.row > div:first-child { flex: 0 0 var(--sidebar); }
.row > div:last-child  { flex: 1 1 0; min-width: 0; }

/* ------------------------------------------------------------------ Sidebar */
#header { text-align: center; }

#header img {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

#header p {
    margin: .6rem 0 1.2rem;
    color: var(--muted);
    font-style: italic;
}

/* Menü (TMENU rendert <b>Link</b><br>) – vertikal in der Sidebar */
#header b { display: block; font-weight: 600; }
#header a {
    display: inline-block;
    padding: .3rem 0;
    text-decoration: none;
}
#header a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Inhalt */
.ce-bodytext { max-width: 72ch; }              /* angenehme Lesebreite        */
.ce-bodytext table { max-width: 100%; }

/* ------------------------------------------------------------------ Footer */
#footer {
    max-width: var(--maxw);
    margin: 40px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: .9em;
}
#footer a { color: var(--muted); }

/* ------------------------------------------------------------ Mobile (≤768px) */
@media (max-width: 768px) {
    body { padding: 20px 16px; }

    .row { flex-direction: column; gap: 22px; }
    .row > div:first-child,
    .row > div:last-child { flex: 1 1 100%; }

    /* Sidebar wird zu einem zentrierten Kopfbereich */
    #header { display: flex; flex-direction: column; align-items: center; }
    #header img { max-width: 220px; }
    #header b { display: inline-block; margin: 0 .6rem; }   /* Menü horizontal */
}