body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #fff;
    color: #333;
}

/* Prevent iOS/Safari from automatically enlarging text in narrow viewports */
html, body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Ensure main content has a solid white background */
/* Main content shell: center and cap width so text and images align
   and don't grow excessively on very wide screens. */
main, article {
    background: #fff;
    padding: 0 10px 50px; /* horizontal + Footer-Abstand */
    box-sizing: border-box;
    max-width: 1200px;      /* feste Max-Breite */
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;      /* füllt mindestens Viewport-Höhe */
    overflow-x: hidden;     /* verhindert horizontales Scrollen */
    overflow-y: auto;       /* vertikales Scrollen innerhalb main */
    -webkit-overflow-scrolling: touch; /* smooth scroll auf iOS */
}

a {
    text-decoration: none;
    color: #c00; /* Rot vom Logo */
}

a:hover {
    color: #900;
}

/* NOTE: `.site-footer-bg` styles moved to `footer.css` where background-image
   and parallax behavior are defined. */

/*
 Limit article images so on very wide screens they don't become excessively
 wide. Images keep their original proportions (`height:auto`) and will be
 capped to a maximum width derived from a 4:3 aspect ratio relative to the
 viewport height: `max-width: min(100%, calc((4/3) * 100vh))`.

 Behavior:
 - On narrow/taller viewports the image uses full container width.
 - On very wide/short viewports the image width will not exceed the 4:3
     equivalent of the viewport height, preventing ultra-wide images.
*/
.article-image,
main article img,
article img {
        display: block;
        width: 100%;
        height: auto;
        max-width: min(100%, calc((4/3) * 100vh));
        margin: 0; /* keep left-aligned with the article content */
}

/* Landscape mobile phones: allow main content to use most of the viewport width
   because the viewport height is small and the previous 4:3 height-based cap
   made the content column too narrow. */
@media (orientation: landscape) and (max-height: 700px) {
    /* For phones held horizontally: allow main/article to expand but keep
       a safe margin from device edges (camera/sensor area). */
    main, article {
        max-width: none !important;
        width: calc(100vw - 64px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        padding: 0 !important; /* remove inner horizontal padding */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .article-image,
    main article img,
    article img {
        max-width: calc(100vw - 64px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        width: auto;
    }

    /* Ensure long paragraphs don't get constrained by an unexpected
       container width; allow normal wrapping across the wider column. */
    main p, article p {
        max-width: none !important;
    }
}