/* RESET */

    
           Grundgestaltung
           --------------------------------------------------------- */

        body {
            background: #f3f5f7;
            color: var(--article-text);
        }


        /* ---------------------------------------------------------
           Artikelbereich
           --------------------------------------------------------- */

        .article-content {
            width: 100%;
            max-width: 1120px;
            margin: 0 auto;
            padding: 60px 30px 80px;
            box-sizing: border-box;
        }


        /* ---------------------------------------------------------
           Artikelkopf
           --------------------------------------------------------- */

        .article-header {
            max-width: 950px;
            margin: 0 auto 40px;
            text-align: center;
        }

        .article-header h2 {
            margin: 0;
            padding: 0;

            font-family: "Playfair Display", Georgia, serif;
            font-size: clamp(2.1rem, 4vw, 2.4rem);
            line-height: 2.15;
            font-weight: 700;

            color: var(--article-dark);
        }

        .article-date {
            margin: 16px 0 0;

            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;

            color: #7c858c;
        }


        /* ---------------------------------------------------------
           Weißer Artikelbereich
           --------------------------------------------------------- */

        .article-box {
            background: var(--article-white);

            padding: clamp(28px, 6vw, 70px);

            border-radius: 14px;

            box-shadow:
                0 3px 10px rgba(0, 0, 0, 0.025),
                0 15px 45px rgba(0, 0, 0, 0.065);
        }


        /* ---------------------------------------------------------
           Lauftext
           --------------------------------------------------------- */

        .article-box p {
            max-width: 800px;

            margin: 0 auto 2rem;

            font-family: "Source Sans Pro", Arial, sans-serif;

            font-size: 1.08rem;
            line-height: 1.82;

            color: var(--article-text);
        }


        /* Einleitungsabsatz */

        .article-box .intro {
            font-size: 1.16rem;
            line-height: 1.8;
            color: #46515b;
        }


        /* ---------------------------------------------------------
           Zwischenüberschriften
           --------------------------------------------------------- */

        .article-box h3 {
            max-width: 800px;

            margin: 4.5rem auto 1.6rem;
            padding-top: 1.4rem;

            border-top: 1px solid var(--article-border);

            font-family: "Playfair Display", Georgia, serif;
            font-size: clamp(1.45rem, 3vw, 1.9rem);
            font-weight: 600;
            line-height: 1.3;

            text-align: left;
            color: var(--article-dark);
        }


        /* ---------------------------------------------------------
           Bilder
           --------------------------------------------------------- */

        .article-figure {
            width: min(94%, 900px);

            margin: 3.5rem auto;

            text-align: center;
        }

        .article-figure a {
            display: block;
        }

        .article-figure img {
            display: block;

            width: 100%;
            height: auto;

            margin: 0 auto;

            border-radius: 8px;

            box-shadow:
                0 3px 8px rgba(0, 0, 0, 0.08),
                0 14px 32px rgba(0, 0, 0, 0.10);

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;
        }


        /* Leichter Effekt beim Überfahren */

        .article-figure a:hover img {
            transform: translateY(-2px);

            box-shadow:
                0 5px 10px rgba(0, 0, 0, 0.09),
                0 18px 38px rgba(0, 0, 0, 0.14);
        }


        /* ---------------------------------------------------------
           Bildunterschriften
           --------------------------------------------------------- */

        .article-figure figcaption {
            max-width: 780px;

            margin: 18px auto 0;
            padding-top: 13px;

            border-top: 1px solid var(--article-border);

            font-size: 0.94rem;
            line-height: 1.55;

            color: var(--article-muted);
        }

        .article-figure figcaption strong {
            color: #4b535a;
        }


        /* ---------------------------------------------------------
           Etwas schmalere Bilder
           --------------------------------------------------------- */

        .article-figure.medium {
            width: min(82%, 800px);
        }


        /* ---------------------------------------------------------
           Bild + Text nebeneinander
           --------------------------------------------------------- */

        .image-info-grid {
            display: grid;

            grid-template-columns:
                minmax(0, 1.4fr) minmax(230px, 0.6fr);

            gap: 38px;
            align-items: center;

            max-width: 900px;

            margin: 3.5rem auto;
        }

        .image-info-grid figure {
            margin: 0;
        }

        .image-info-grid img {
            display: block;

            width: 100%;
            height: auto;

            border-radius: 8px;

            box-shadow:
                0 3px 8px rgba(0, 0, 0, 0.08),
                0 14px 32px rgba(0, 0, 0, 0.10);
        }

        .image-info-grid figcaption {
            padding-left: 22px;

            border-left: 3px solid #d6e1eb;

            font-size: 0.96rem;
            line-height: 1.6;

            color: var(--article-muted);
        }


        /* ---------------------------------------------------------
           Autor
           --------------------------------------------------------- */

        .author {
            max-width: 800px;

            margin: 4rem auto 0;
            padding-top: 25px;

            border-top: 1px solid var(--article-border);

            font-family: "Playfair Display", Georgia, serif;
            font-size: 1.1rem;
            font-style: italic;

            text-align: right;

            color: #606870;
        }


        /* ---------------------------------------------------------
           Navigation am Seitenende
           --------------------------------------------------------- */

        .article-links {
            max-width: 800px;

            margin: 3rem auto 0;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            gap: 12px;
        }

        .article-links a {
            display: inline-block;

            padding: 11px 20px;

            background: #eef4f9;

            border: 1px solid #d5e1ec;
            border-radius: 7px;

            color: var(--article-blue);

            font-size: 0.96rem;
            font-weight: 600;
            text-decoration: none;

            transition:
                background 0.2s ease,
                color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }

        .article-links a:hover {
            background: var(--article-blue);
            color: #fff;

            transform: translateY(-2px);

            box-shadow: 0 6px 16px rgba(36, 75, 120, 0.20);<style>
        /* =========================================================
           KLASSENTREFFEN 2016
           moderne Artikelgestaltung
           ========================================================= */


        /* ---------------------------------------------------------
           Grundfarben
           --------------------------------------------------------- */

        :root {
            --article-blue: #244b78;
            --article-dark: #24364b;
            --article-text: #343a40;
            --article-muted: #707981;
            --article-light: #f5f7f9;
            --article-border: #e0e5ea;
            --article-white: #ffffff;
        }


        /* ---------------------------------------------------------
        }


        /* ---------------------------------------------------------
           Mobile Darstellung
           --------------------------------------------------------- */

        @media (max-width: 760px) {

            .article-content {
                padding: 35px 14px 50px;
            }

            .article-header {
                margin-bottom: 28px;
            }

            .article-box {
                padding: 28px 18px 40px;
                border-radius: 8px;
            }

            .article-box p {
                font-size: 1.02rem;
                line-height: 1.75;
            }

            .article-box .intro {
                font-size: 1.07rem;
            }

            .article-box h3 {
                margin-top: 3.5rem;
            }

            .article-figure,
            .article-figure.medium {
                width: 100%;
                margin: 2.7rem auto;
            }

            .image-info-grid {
                grid-template-columns: 1fr;
                gap: 17px;

                margin: 2.7rem auto;
            }

            .image-info-grid figcaption {
                padding: 14px 0 0;

                border-left: none;
                border-top: 1px solid var(--article-border);

                text-align: center;
            }

            .article-links {
                flex-direction: column;
            }

            .article-links a {
                text-align: center;
            }
        }