@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,400;1,500;1,600&display=swap');


:root {
    --mint:         #91c8bb;
    --mint-soft:    #b6dad0;
    --mint-deep:    #6fb0a2;
    --mint-tint:    #e7f3f0;

    --paper:        #ffffff;
    --off-white:    #fafaf8;
    --rule:         rgba(0, 0, 0, 0.08);

    --ink:          #2c2c2c;
    --ink-soft:     #555555;
    --ink-muted:    #8a8a8a;

    --topbar:       #4a4a4a;
    --topbar-text:  #d8d8d8;

    --footer-bg:    #9a9a9a;
    --footer-text:  #ffffff;

    --overlay:      rgba(245, 245, 243, 0.92);

    --serif:        'Lora', Georgia, 'Times New Roman', serif;
    --sans:         'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --max:          1180px;
    --gutter:       28px;

    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.03),
                    0 6px 16px -6px rgba(0, 0, 0, 0.08);
}


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color 200ms ease, background 200ms ease, opacity 200ms ease; }
p { margin: 0 0 1em; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.2; }

.clearfix::after { content: ''; display: table; clear: both; }

.visuallyhidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

::selection { background: var(--mint); color: var(--paper); }


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.container { width: 100%; overflow-x: hidden; }

.inner {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

@media (max-width: 600px) {
    :root { --gutter: 18px; }
}


/* --------------------------------------------------------------------------
   4. TOP BAR (.meta) — dark gray with issue + social links
   -------------------------------------------------------------------------- */

.meta {
    background: var(--topbar);
    color: var(--topbar-text);
    font-size: 12px;
    position: relative;
    z-index: 5;
}

.meta .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.meta .latest-issue {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-weight: 600;
    color: var(--mint-soft);
    text-transform: none;
    letter-spacing: 0.02em;
}

.meta .latest-issue .cover {
    display: inline-block;
    width: 46px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    margin: 0 6px;
    transform: translateY(8px);
    transition: transform 250ms ease;
}

.meta .latest-issue .cover img {
    width: 100%;
    height: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border: 2px solid var(--paper);
}

.meta .latest-issue .cover:hover { transform: translateY(8px) scale(1.05); }

.meta .latest-issue .cta {
    color: var(--mint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px;
    white-space: nowrap;
}
.meta .latest-issue .cta:hover { color: var(--paper); }
.meta .latest-issue .cta .icon-right::before { content: ' \203A'; font-size: 13px; }

nav.secondary ul {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--mint);
}

nav.secondary li {
    padding: 0 12px;
    cursor: pointer;
    transition: color 180ms ease;
    border-right: 1px solid rgba(255,255,255,0.18);
}
nav.secondary li:last-child { border-right: none; padding-right: 0; }
nav.secondary li:hover { color: var(--paper); }

nav.secondary .btn-search { padding: 0 0 0 12px; }
nav.secondary .btn-search a {
    display: inline-flex;
    align-items: center;
    color: var(--mint);
}
nav.secondary .btn-search a:hover { color: var(--paper); }
nav.secondary .icon-search::before { content: '\1F50D'; font-size: 12px; }


/* --------------------------------------------------------------------------
   5. HEADER — TEAL HERO BANNER
   -------------------------------------------------------------------------- */

header.main {
    background: var(--mint);
    color: var(--paper);
    position: relative;
}

header.main > .inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    padding-top: 36px;
    padding-bottom: 24px;
    position: relative;
    min-height: 180px;
}

/* Logo — the circular monogram (lebenlang.png) */
header.main h1 {
    margin: 0;
    flex-shrink: 0;
}

header.main h1 a {
    display: inline-block;
    background: var(--paper);
    border-radius: 50%;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

header.main h1 img {
    max-width: 75%;
    max-height: 75%;
    width: auto;
    height: auto;
}

/* Tagline image "PFLEGE . VIELFALT . LEIDENSCHAFT" */
.site-name {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 8px;
}

.site-name a {
    display: block;
    line-height: 0;
}

.site-name img {
    max-height: 130px;
    width: auto;
    filter: brightness(0) invert(1);  /* render the tagline image as white */
}

/* Mobile hamburger — hidden on desktop */
.btn-menu {
    display: none;
    margin-left: auto;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    color: var(--paper);
    transition: background 180ms ease;
}
.btn-menu:hover { background: rgba(255,255,255,0.35); }
.btn-menu .icon-menu::before {
    content: '';
    display: block;
    width: 20px; height: 14px;
    background:
        linear-gradient(currentColor, currentColor) top/100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) bottom/100% 2px no-repeat;
}


/* --------------------------------------------------------------------------
   6. PRIMARY NAV — buttons sitting on the teal banner
   -------------------------------------------------------------------------- */

nav.primary { background: var(--mint); }

.primary-top { background: var(--mint); }

.primary-top .inner {
    display: flex;
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: 0;
}

#menu-primary-menu {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}

/* Hide the text "Home" on desktop — the grid icon serves as home */
#menu-primary-menu > li.btn-home-mobile { display: none; }

#menu-primary-menu > li {
    position: relative;
}

#menu-primary-menu > li > a {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    background: var(--paper);
    color: var(--mint-deep);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 4px 4px 0 0;
    border-bottom: 3px solid transparent;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

#menu-primary-menu > li > a:hover,
#menu-primary-menu > li.current-menu-item > a {
    color: var(--ink);
    border-bottom-color: var(--mint-deep);
}

/* Grid icon button (the "btn-home" square at the end) */
#menu-primary-menu > li.btn-home > a {
    padding: 0;
    width: 44px;
    justify-content: center;
}

#menu-primary-menu > li.btn-home .icon-contenthub {
    width: 18px; height: 18px;
    display: inline-block;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-size: 7px 7px;
    background-position: 0 0, 11px 0, 0 11px, 11px 11px;
    background-repeat: no-repeat;
    color: var(--mint-deep);
}

#menu-primary-menu > li.btn-home > a em { display: none; }

/* Submenus */
.sub-menu {
    position: absolute;
    top: 100%; left: 50%;
    transform: translate(-50%, 6px);
    min-width: 220px;
    background: var(--paper);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    padding: 8px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 100;
}

#menu-primary-menu > li:hover .sub-menu {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.sub-menu li { display: block; }
.sub-menu a {
    display: block;
    padding: 9px 22px;
    font-size: 13px;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    transition: background 150ms ease, color 150ms ease;
}
.sub-menu a:hover { background: var(--mint-tint); color: var(--mint-deep); }


/* --------------------------------------------------------------------------
   7. SUB BAR — category filter + line-icon row
   -------------------------------------------------------------------------- */

.primary-sub {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.primary-sub .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.category-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.category-dropdown .label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-muted);
}

.category-dropdown > a.current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
    padding-bottom: 3px;
    border-bottom: 2px solid var(--mint);
}

.category-dropdown .icon-down::before {
    content: '\25BE';
    color: var(--mint-deep);
    font-size: 10px;
    margin-left: 4px;
}

.category-dropdown .dropdown {
    position: absolute;
    top: 100%; left: 0;
    margin-top: 8px;
    min-width: 200px;
    background: var(--paper);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    padding: 6px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 90;
}
.category-dropdown:hover .dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.category-dropdown .dropdown a {
    display: block;
    padding: 8px 18px;
    font-size: 13px;
    color: var(--ink-soft);
}
.category-dropdown .dropdown a:hover { background: var(--mint-tint); color: var(--mint-deep); }

/* Category icon bar — thin line-art icons in a row */
.category-icon-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.category-icon-bar li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 4px;
    color: var(--ink-soft);
    transition: color 180ms ease, background 180ms ease;
}
.category-icon-bar li a:hover { color: var(--mint-deep); background: var(--mint-tint); }

.category-icon-bar i {
    width: 24px; height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    font-style: normal;
}

/* SVG line icons — inlined as data URIs, currentColor via mask */
.category-icon-bar i {
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.category-icon-bar .icon-aktuelles {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='4' width='14' height='16' rx='1'/><path d='M17 8h3v10a2 2 0 0 1-2 2H6'/><line x1='6' y1='8' x2='14' y2='8'/><line x1='6' y1='12' x2='14' y2='12'/><line x1='6' y1='16' x2='11' y2='16'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='4' width='14' height='16' rx='1'/><path d='M17 8h3v10a2 2 0 0 1-2 2H6'/><line x1='6' y1='8' x2='14' y2='8'/><line x1='6' y1='12' x2='14' y2='12'/><line x1='6' y1='16' x2='11' y2='16'/></svg>");
}

.category-icon-bar .icon-essen {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M7 3v6c0 1 .5 2 2 2v10'/><line x1='9' y1='3' x2='9' y2='9'/><path d='M16 3c-1.5 0-3 1.5-3 4s1.5 4 3 4v10'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M7 3v6c0 1 .5 2 2 2v10'/><line x1='9' y1='3' x2='9' y2='9'/><path d='M16 3c-1.5 0-3 1.5-3 4s1.5 4 3 4v10'/></svg>");
}

.category-icon-bar .icon-aktivitaet {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><circle cx='6' cy='17' r='4'/><circle cx='18' cy='17' r='4'/><path d='M6 17l4-8h6l-3 8'/><circle cx='10' cy='9' r='1.5' fill='%23000'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><circle cx='6' cy='17' r='4'/><circle cx='18' cy='17' r='4'/><path d='M6 17l4-8h6l-3 8'/><circle cx='10' cy='9' r='1.5' fill='%23000'/></svg>");
}

.category-icon-bar .icon-reisen {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='4' y='8' width='16' height='12' rx='1'/><path d='M9 8V5h6v3'/><line x1='12' y1='11' x2='12' y2='17'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='4' y='8' width='16' height='12' rx='1'/><path d='M9 8V5h6v3'/><line x1='12' y1='11' x2='12' y2='17'/></svg>");
}

.category-icon-bar .icon-digitales {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='5' width='18' height='12' rx='1'/><line x1='9' y1='20' x2='15' y2='20'/><line x1='12' y1='17' x2='12' y2='20'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='5' width='18' height='12' rx='1'/><line x1='9' y1='20' x2='15' y2='20'/><line x1='12' y1='17' x2='12' y2='20'/></svg>");
}

.category-icon-bar .icon-beauty {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M5 21l8-8'/><path d='M13 13l3-3c2-2 5-2 6 0s0 4-2 5l-4 1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M5 21l8-8'/><path d='M13 13l3-3c2-2 5-2 6 0s0 4-2 5l-4 1'/></svg>");
}

.category-icon-bar .icon-menschen {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><circle cx='12' cy='8' r='3.5'/><path d='M5 20c1-4 4-6 7-6s6 2 7 6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><circle cx='12' cy='8' r='3.5'/><path d='M5 20c1-4 4-6 7-6s6 2 7 6'/></svg>");
}

.category-icon-bar .icon-best-ager {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><path d='M12 3l9 4-9 4-9-4 9-4z'/><path d='M6 9v4c0 2 3 4 6 4s6-2 6-4V9'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><path d='M12 3l9 4-9 4-9-4 9-4z'/><path d='M6 9v4c0 2 3 4 6 4s6-2 6-4V9'/></svg>");
}

.category-icon-bar .icon-gesundheit {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,12 7,12 9,8 12,16 14,12 17,12 18,10 21,12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,12 7,12 9,8 12,16 14,12 17,12 18,10 21,12'/></svg>");
}

.category-icon-bar .icon-pflege {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16c2-3 5-4 8-4l5-2c1 0 2 1 1 2l-3 2'/><path d='M3 16c2 1 5 2 8 2s6-1 8-3l3-3c1-1 0-3-1-2l-4 3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16c2-3 5-4 8-4l5-2c1 0 2 1 1 2l-3 2'/><path d='M3 16c2 1 5 2 8 2s6-1 8-3l3-3c1-1 0-3-1-2l-4 3'/></svg>");
}

/* Hide the blank icon (Politik has no icon class) */
.category-icon-bar i.icon-empty,
.category-icon-bar i[class=""] { display: none; }


/* --------------------------------------------------------------------------
   8. MAIN CONTENT WRAPPER
   -------------------------------------------------------------------------- */

div.main { padding: 36px 0 60px; background: var(--paper); }


/* --------------------------------------------------------------------------
   9. FEATURED ARTICLES (HERO)
   -------------------------------------------------------------------------- */

.module-featured-articles {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: 28px;
    margin-bottom: 28px;
}

/* The latest issue cover block (left) */
.module-featured-articles .latest-issue {
    position: relative;
    background: var(--mint-tint);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 300ms ease;
}
.module-featured-articles .latest-issue:hover { transform: translateY(-3px); }

.module-featured-articles .latest-issue a { display: block; position: relative; height: 100%; }
.module-featured-articles .latest-issue figure { margin: 0; height: 100%; }
.module-featured-articles .latest-issue figure img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 500ms ease;
}
.module-featured-articles .latest-issue:hover figure img { transform: scale(1.03); }

.module-featured-articles .latest-issue .cta {
    position: absolute;
    inset: auto 0 0 0;
    background: var(--overlay);
    padding: 20px 24px;
    text-align: center;
    color: var(--ink-soft);
}
.module-featured-articles .latest-issue .cta strong {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 4px;
}
.module-featured-articles .latest-issue .cta span {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--mint-deep);
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   10. TEASER CARDS — image with overlay containing icon + kicker + headline
   -------------------------------------------------------------------------- */

article.teaser {
    position: relative;
    background: var(--mint-tint);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: block;
    aspect-ratio: 4 / 3;
    transition: transform 300ms ease, box-shadow 300ms ease;
}

article.teaser:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 18px 40px -10px rgba(0,0,0,0.16);
}

article.teaser figure {
    margin: 0;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

article.teaser figure a { display: block; height: 100%; }

article.teaser figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

article.teaser:hover figure img { transform: scale(1.04); }

/* Meta overlay — covers lower portion of the card */
article.teaser .meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay);
    padding: 22px 24px 24px;
    text-align: center;
    z-index: 2;
}

article.teaser .meta > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Category icon — circular outline with a thin line drawing inside */
article.teaser .category {
    width: 40px; height: 40px;
    border: 1.5px solid var(--ink-soft);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    color: var(--ink-soft);
}

article.teaser .category i {
    width: 22px; height: 22px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    font-style: normal;
}

article.teaser .category .icon-aktuelles    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='4' width='14' height='16' rx='1'/><path d='M17 8h3v10a2 2 0 0 1-2 2H6'/><line x1='6' y1='8' x2='14' y2='8'/><line x1='6' y1='12' x2='14' y2='12'/><line x1='6' y1='16' x2='11' y2='16'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='4' width='14' height='16' rx='1'/><path d='M17 8h3v10a2 2 0 0 1-2 2H6'/><line x1='6' y1='8' x2='14' y2='8'/><line x1='6' y1='12' x2='14' y2='12'/><line x1='6' y1='16' x2='11' y2='16'/></svg>"); }
article.teaser .category .icon-essen        { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M7 3v6c0 1 .5 2 2 2v10'/><line x1='9' y1='3' x2='9' y2='9'/><path d='M16 3c-1.5 0-3 1.5-3 4s1.5 4 3 4v10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M7 3v6c0 1 .5 2 2 2v10'/><line x1='9' y1='3' x2='9' y2='9'/><path d='M16 3c-1.5 0-3 1.5-3 4s1.5 4 3 4v10'/></svg>"); }
article.teaser .category .icon-aktivitaet   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><circle cx='6' cy='17' r='4'/><circle cx='18' cy='17' r='4'/><path d='M6 17l4-8h6l-3 8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><circle cx='6' cy='17' r='4'/><circle cx='18' cy='17' r='4'/><path d='M6 17l4-8h6l-3 8'/></svg>"); }
article.teaser .category .icon-reisen       { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='4' y='8' width='16' height='12' rx='1'/><path d='M9 8V5h6v3'/><line x1='12' y1='11' x2='12' y2='17'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='4' y='8' width='16' height='12' rx='1'/><path d='M9 8V5h6v3'/><line x1='12' y1='11' x2='12' y2='17'/></svg>"); }
article.teaser .category .icon-digitales    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='5' width='18' height='12' rx='1'/><line x1='9' y1='20' x2='15' y2='20'/><line x1='12' y1='17' x2='12' y2='20'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='5' width='18' height='12' rx='1'/><line x1='9' y1='20' x2='15' y2='20'/><line x1='12' y1='17' x2='12' y2='20'/></svg>"); }
article.teaser .category .icon-beauty       { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M5 21l8-8'/><path d='M13 13l3-3c2-2 5-2 6 0s0 4-2 5l-4 1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M5 21l8-8'/><path d='M13 13l3-3c2-2 5-2 6 0s0 4-2 5l-4 1'/></svg>"); }
article.teaser .category .icon-menschen     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><circle cx='12' cy='8' r='3.5'/><path d='M5 20c1-4 4-6 7-6s6 2 7 6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><circle cx='12' cy='8' r='3.5'/><path d='M5 20c1-4 4-6 7-6s6 2 7 6'/></svg>"); }
article.teaser .category .icon-best-ager    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><path d='M12 3l9 4-9 4-9-4 9-4z'/><path d='M6 9v4c0 2 3 4 6 4s6-2 6-4V9'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><path d='M12 3l9 4-9 4-9-4 9-4z'/><path d='M6 9v4c0 2 3 4 6 4s6-2 6-4V9'/></svg>"); }
article.teaser .category .icon-gesundheit   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,12 7,12 9,8 12,16 14,12 17,12 18,10 21,12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,12 7,12 9,8 12,16 14,12 17,12 18,10 21,12'/></svg>"); }
article.teaser .category .icon-pflege       { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16c2-3 5-4 8-4l5-2c1 0 2 1 1 2l-3 2'/><path d='M3 16c2 1 5 2 8 2s6-1 8-3l3-3c1-1 0-3-1-2l-4 3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16c2-3 5-4 8-4l5-2c1 0 2 1 1 2l-3 2'/><path d='M3 16c2 1 5 2 8 2s6-1 8-3l3-3c1-1 0-3-1-2l-4 3'/></svg>"); }

/* Kicker: "CATEGORY | AUSGABE" */
article.teaser h2 {
    margin: 0;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    line-height: 1.3;
}
article.teaser h2 a { color: inherit; }
article.teaser h2 a:hover { color: var(--mint-deep); }

/* Headline */
article.teaser h1 {
    margin: 2px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--ink);
}

article.teaser h1 a { color: var(--ink); transition: color 180ms ease; }
article.teaser h1 a:hover { color: var(--mint-deep); }

/* Social row — hidden inside cards (it's noise; the whole card is clickable) */
.social-wrapper { display: none; }


/* --- Featured (hero) teaser — same overlay treatment, just larger image area --- */
.module-featured-articles article.teaser {
    aspect-ratio: 16 / 9;
}

.module-featured-articles article.teaser h1 {
    font-size: 28px;
}

@media (max-width: 900px) {
    .module-featured-articles {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .module-featured-articles .latest-issue { aspect-ratio: 4 / 3; }
    .module-featured-articles article.teaser { aspect-ratio: 16 / 10; }
}


/* --------------------------------------------------------------------------
   11. ARTICLE GRID
   -------------------------------------------------------------------------- */

.all-articles { margin: 28px 0; }

ul.col-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

ul.col-list > li.item {
    list-style: none;
    display: block;
}

@media (max-width: 900px) {
    ul.col-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
    ul.col-list { grid-template-columns: 1fr; gap: 16px; }
}

/* Load more button */
.load-more { text-align: center; margin-top: 40px; }

.btn-load-more a {
    display: inline-block;
    padding: 14px 36px;
    background: var(--paper);
    color: var(--mint-deep);
    border: 2px solid var(--mint);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-radius: 999px;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.btn-load-more a:hover {
    background: var(--mint);
    color: var(--paper);
    transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   12. ARCHIVE MODULE — teal background section with cover thumbnails
   -------------------------------------------------------------------------- */

.module-issue-archive {
    background: var(--mint);
    margin: 56px calc(50% - 50vw) 0;
    padding: 60px calc(50vw - 50%);
}

.module-issue-archive > div:first-child {
    max-width: var(--max);
    margin: 0 auto 40px;
    text-align: center;
    padding: 0 var(--gutter);
}

.module-issue-archive h1 {
    margin: 0 0 14px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--paper);
}

.module-issue-archive > div:first-child > a {
    display: inline-block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--paper);
    opacity: 0.9;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding-bottom: 2px;
}
.module-issue-archive > div:first-child > a:hover { opacity: 1; border-color: var(--paper); }

ul.archive-list {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}

ul.archive-list li.item { list-style: none; text-align: center; }
ul.archive-list li[class*='item-break'] { display: none; }

ul.archive-list li a {
    display: block;
    transition: transform 350ms ease;
}
ul.archive-list li a:hover { transform: translateY(-4px); }

ul.archive-list figure {
    margin: 0 0 16px;
    overflow: hidden;
    aspect-ratio: 424 / 608;
    background: var(--mint-soft);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

ul.archive-list figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

ul.archive-list a:hover figure img { transform: scale(1.03); }

ul.archive-list h2 {
    margin: 0;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--paper);
}

@media (max-width: 700px) {
    ul.archive-list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}


/* --------------------------------------------------------------------------
   13. FOOTER — gray with download badges + nav + social
   -------------------------------------------------------------------------- */

footer.main {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 50px 0 40px;
}

footer.main .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.download-footer {
    text-align: center;
}

.download-footer h1 {
    color: var(--footer-text);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin: 0 0 22px;
}

.download-footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.download-footer ul li { display: inline-flex; }

.download-footer img {
    height: 56px;
    width: auto;
    transition: transform 200ms ease, opacity 200ms ease;
    cursor: pointer;
}
.download-footer img:hover { transform: translateY(-2px); opacity: 0.92; }

/* Footer link menu */
nav.footer {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding: 22px 0;
}

nav.footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 32px;
}

nav.footer li {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
}

nav.footer a {
    color: var(--footer-text);
    transition: opacity 180ms ease;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}
nav.footer a:hover,
nav.footer .current-menu-item a {
    border-bottom-color: var(--footer-text);
}
nav.footer .current-menu-item a { border-bottom-color: var(--footer-text); }

/* Social icons — outlined circle icons centered */
.social-footer ul {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.social-footer li {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--footer-text);
}

.social-footer li em { display: none; }

.social-footer li span {
    display: inline-flex;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
    transition: transform 200ms ease, opacity 200ms ease;
}
.social-footer li:hover span { transform: translateY(-2px); }

.social-footer li i {
    width: 28px; height: 28px;
    background-color: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    font-style: normal;
}

.social-footer .icon-instagram {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='1' fill='%23000'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='1' fill='%23000'/></svg>");
}
.social-footer .icon-twitter {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'><path d='M22 5.8c-.7.3-1.5.5-2.3.6.8-.5 1.5-1.3 1.8-2.3-.8.5-1.7.8-2.6 1-.7-.8-1.8-1.3-3-1.3-2.3 0-4.1 1.9-4.1 4.1 0 .3 0 .6.1.9C8.5 8.7 5.4 7 3.4 4.5c-.3.6-.5 1.3-.5 2 0 1.4.7 2.7 1.8 3.4-.7 0-1.3-.2-1.9-.5v.1c0 2 1.4 3.6 3.3 4-.3.1-.7.1-1.1.1-.3 0-.5 0-.8-.1.5 1.6 2.1 2.8 3.9 2.9-1.4 1.1-3.2 1.8-5.2 1.8-.3 0-.7 0-1-.1 1.9 1.2 4.1 1.9 6.5 1.9 7.8 0 12-6.5 12-12.1v-.5c.8-.6 1.5-1.3 2.1-2.2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'><path d='M22 5.8c-.7.3-1.5.5-2.3.6.8-.5 1.5-1.3 1.8-2.3-.8.5-1.7.8-2.6 1-.7-.8-1.8-1.3-3-1.3-2.3 0-4.1 1.9-4.1 4.1 0 .3 0 .6.1.9C8.5 8.7 5.4 7 3.4 4.5c-.3.6-.5 1.3-.5 2 0 1.4.7 2.7 1.8 3.4-.7 0-1.3-.2-1.9-.5v.1c0 2 1.4 3.6 3.3 4-.3.1-.7.1-1.1.1-.3 0-.5 0-.8-.1.5 1.6 2.1 2.8 3.9 2.9-1.4 1.1-3.2 1.8-5.2 1.8-.3 0-.7 0-1-.1 1.9 1.2 4.1 1.9 6.5 1.9 7.8 0 12-6.5 12-12.1v-.5c.8-.6 1.5-1.3 2.1-2.2z'/></svg>");
}
.social-footer .icon-facebook {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><path d='M14 3h3v4h-3c-.5 0-1 .5-1 1v3h4l-.5 4H13v8h-4v-8H6v-4h3V8c0-2.8 2.2-5 5-5z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><path d='M14 3h3v4h-3c-.5 0-1 .5-1 1v3h4l-.5 4H13v8h-4v-8H6v-4h3V8c0-2.8 2.2-5 5-5z'/></svg>");
}


/* --------------------------------------------------------------------------
   14. NEWSLETTER OVERLAY
   -------------------------------------------------------------------------- */

.newsletter-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(44, 44, 44, 0.85);
    backdrop-filter: blur(6px);
    z-index: 1000;
    align-items: center; justify-content: center;
    padding: 24px;
}

.newsletter-overlay.is-visible { display: flex; flex-direction: column; }

.newsletter-overlay p.intro {
    max-width: 480px;
    color: var(--paper);
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(20px, 2.6vw, 28px);
    text-align: center;
    line-height: 1.3;
    margin: 0 0 24px;
}

.newsletter-overlay form {
    width: 100%; max-width: 480px;
    display: flex; flex-direction: column; gap: 12px;
}

.newsletter-overlay input[type="email"] {
    width: 100%;
    padding: 14px 18px;
    background: var(--paper);
    border: none;
    border-radius: 2px;
    font-size: 15px;
    color: var(--ink);
    font-family: var(--sans);
}

.newsletter-overlay input[type="email"]:focus {
    outline: 2px solid var(--mint);
    outline-offset: 2px;
}

.newsletter-overlay input[type="submit"] {
    padding: 14px 28px;
    background: var(--mint);
    color: var(--paper);
    border: none;
    border-radius: 2px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 180ms ease;
}
.newsletter-overlay input[type="submit"]:hover { background: var(--mint-deep); }

.btn-close-newsletter-overlay {
    position: absolute;
    top: 24px; right: 24px;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--paper);
    font-size: 22px;
    transition: transform 180ms ease;
}
.btn-close-newsletter-overlay:hover { transform: rotate(90deg); }
.btn-close-newsletter-overlay .icon-close::before { content: '\00D7'; font-family: var(--sans); }


/* --------------------------------------------------------------------------
   15. RESPONSIVE — MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .btn-menu { display: inline-flex; }

    .meta .inner { flex-wrap: wrap; gap: 10px; }
    .meta .latest-issue .cover { display: none; }

    header.main > .inner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding-top: 24px;
        padding-bottom: 18px;
        min-height: 0;
    }
    header.main h1 a { width: 110px; height: 110px; }
    .site-name { align-items: center; padding-left: 0; }
    .site-name img { max-height: 70px; }

    nav.primary .primary-top { display: none; }
    nav.primary.is-open .primary-top { display: block; }

    #menu-primary-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
    }
    #menu-primary-menu > li > a {
        height: auto;
        padding: 14px 22px;
        background: var(--paper);
        border-radius: 0;
        border-bottom: 1px solid var(--rule);
        text-align: left;
        justify-content: flex-start;
    }
    #menu-primary-menu > li.btn-home { display: none; }
    #menu-primary-menu > li.btn-home-mobile { display: block; }

    .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        box-shadow: none;
        background: var(--mint-tint);
        border-radius: 0;
        padding: 0;
    }
    .sub-menu a { padding-left: 40px; }

    .primary-sub .inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .category-icon-bar {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .meta nav.secondary li { padding: 0 8px; }
    .meta nav.secondary { font-size: 10px; }

    .module-issue-archive { margin-top: 36px; padding: 40px var(--gutter); }
    .module-issue-archive h1 { font-size: 15px; }

    nav.footer ul { gap: 14px 20px; }
    nav.footer li { font-size: 10px; }
}


/* --------------------------------------------------------------------------
   16. ENTRANCE MOTION
   -------------------------------------------------------------------------- */

@keyframes ll-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.module-featured-articles,
.module-issue-archive {
    animation: ll-fade-up 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

ul.col-list > li.item {
    animation: ll-fade-up 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

ul.col-list > li.item:nth-child(n+4)  { animation-delay: 80ms; }
ul.col-list > li.item:nth-child(n+7)  { animation-delay: 140ms; }
ul.col-list > li.item:nth-child(n+10) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */

@media print {
    .meta, nav.primary, .newsletter-overlay, footer.main { display: none; }
    body { background: #fff; color: #000; }
    article.teaser { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
    .module-issue-archive { background: #fff; color: #000; }
    .module-issue-archive h1, ul.archive-list h2 { color: #000; }
}