/* HIHB Fachartikel - Shared Styles v0.2 (external)
   Stand: 2026-05-22 - extrahiert aus briefing-statt-recruiting.html als kanonische Basis.
   Linked from /fachartikel/*.html and /en/articles/*.html
*/
@font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); } @font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); } @font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-700.woff2') format('woff2'); } @font-face{ font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/roboto-400.woff2') format('woff2'); } @font-face{ font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/roboto-500.woff2') format('woff2'); } @font-face{ font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/roboto-700.woff2') format('woff2'); } :root { --color-bg-primary: #FFFFFF; --color-bg-elevated: #F8F9FA; --color-bg-inverse: #0A0A0A; --color-text-primary: #0A0A0A; --color-text-inverse: #FFFFFF; --color-text-muted: #6B7280; --color-text-secondary: #374151; --color-border: #E5E7EB; --color-accent-primary: #25B309; --color-accent-strong: #1F7A08; --font-display: 'Poppins',system-ui,-apple-system,sans-serif; --font-body: 'Roboto',system-ui,-apple-system,sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; --space-12: 96px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.7; color: var(--color-text-primary); background: var(--color-bg-primary); } a { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } header.site-nav { position: sticky; top: 0; z-index: 50; background: var(--color-bg-inverse); color: var(--color-text-inverse); border-bottom: 1px solid rgba(255,255,255,0.06); } .site-nav__inner { max-width: 1200px; margin: 0 auto; padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .site-nav__logo { display: flex; align-items: center; height: 36px; } .site-nav__logo img { height: 36px; width: auto; display: block; } .site-nav__back { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--color-text-inverse); text-decoration: none; padding: var(--space-2) var(--space-4); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); } .site-nav__back:hover { background: rgba(255,255,255,0.08); } article.long-form { max-width: 780px; margin: 0 auto; padding: var(--space-10) var(--space-5); } .article-header { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); } .article-header .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-strong); margin-bottom: var(--space-3); } .article-header h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,4vw,2.6rem); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 var(--space-4); } .article-header .meta { font-size: 0.9rem; color: var(--color-text-muted); display: flex; gap: var(--space-4); flex-wrap: wrap; } .toc { padding: var(--space-5) var(--space-6); background: var(--color-bg-elevated); border-radius: var(--radius-md); margin-bottom: var(--space-8); } .toc strong { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); display: block; margin-bottom: var(--space-3); } .toc ol { margin: 0; padding-left: var(--space-5); font-size: 0.95rem; line-height: 1.8; } .toc a { color: var(--color-text-primary); text-decoration: none; } .toc a:hover { color: var(--color-accent-strong); text-decoration: underline; } article h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem,2.5vw,1.8rem); line-height: 1.25; margin: var(--space-10) 0 var(--space-4); scroll-margin-top: 80px; } article h2 .num { color: var(--color-accent-primary); margin-right: var(--space-3); } article h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin: var(--space-6) 0 var(--space-3); } article p { margin: 0 0 var(--space-4); } article ul, article ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); } article li { margin-bottom: var(--space-2); } .pullquote { border-left: 4px solid var(--color-accent-primary); padding: var(--space-3) var(--space-5); margin: var(--space-6) 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.4; color: var(--color-text-primary); } .data-callout { padding: var(--space-5) var(--space-6); background: var(--color-bg-inverse); color: var(--color-text-inverse); border-radius: var(--radius-md); margin: var(--space-6) 0; } .data-callout .label { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-primary); margin-bottom: var(--space-3); } .data-callout .stat { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; margin-bottom: var(--space-3); color: #fff; } .data-callout .stat .accent { color: var(--color-accent-primary); } .data-callout .desc { font-size: 0.95rem; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0; } .data-table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: 0.95rem; } .data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); } .data-table th { background: var(--color-bg-elevated); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); } .data-table tr:last-child td { border-bottom: none; } .vignette { padding: var(--space-5) var(--space-6); background: var(--color-bg-elevated); border-left: 3px solid var(--color-text-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-6) 0; } .vignette .label { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: var(--space-3); } .vignette p { margin-bottom: var(--space-3); font-size: 0.98rem; font-style: italic; color: var(--color-text-secondary); } .vignette p:last-child { margin-bottom: 0; font-style: normal; color: var(--color-text-primary); } .todo-slot { padding: var(--space-4) var(--space-5); background: #FFF7E6; border: 2px dashed #E5A300; border-radius: var(--radius-md); margin: var(--space-5) 0; font-size: 0.95rem; color: #7A4F00; } .todo-slot strong { display: block; font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); } .faq-block { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 2px solid var(--color-border); } .faq-block h2 { margin-top: 0; } .faq-block details { margin-bottom: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-bg-elevated); border-radius: var(--radius-md); cursor: pointer; } .faq-block summary { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); } .faq-block summary::-webkit-details-marker { display: none; } .faq-block summary::after { content: "+"; color: var(--color-accent-primary); font-size: 1.4rem; font-weight: 400; } .faq-block details[open] summary::after { content: "–"; } .faq-block details p { margin: var(--space-4) 0 0; } .author-box { margin-top: var(--space-10); padding: var(--space-6); background: var(--color-bg-elevated); border-radius: var(--radius-md); display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; } .author-box .avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--color-bg-elevated); } .author-box .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .author-box .info { flex: 1; min-width: 220px; } .author-box .info .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .author-box .info .role { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 2px; } .author-box .info .bio { font-size: 0.95rem; line-height: 1.55; margin-top: var(--space-3); } .cta-end { margin-top: var(--space-8); padding: var(--space-8); background: var(--color-bg-inverse); color: var(--color-text-inverse); border-radius: var(--radius-lg); } .cta-end h3 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 var(--space-3); } .cta-end h3 .accent { color: var(--color-accent-primary); } .cta-end p { color: rgba(255,255,255,0.8); margin: 0 0 var(--space-5); font-size: 1rem; line-height: 1.55; } .cta-end .btn { display: inline-block; padding: var(--space-4) var(--space-6); background: var(--color-accent-primary); color: #fff; font-family: var(--font-display); font-weight: 600; border-radius: var(--radius-md); text-decoration: none; } .cta-end .btn:hover { background: var(--color-accent-strong); text-decoration: none; } footer.site-footer { background: var(--color-bg-inverse); color: rgba(255,255,255,0.6); padding: var(--space-8) 0; margin-top: var(--space-10); border-top: 1px solid rgba(255,255,255,0.06); } .site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-size: 0.9rem; } .site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; } @media (max-width:768px){ article.long-form {  padding: var(--space-6) var(--space-4); }  .data-callout .stat {  font-size: 1.8rem; } } figure.inline-graphic{margin:var(--space-8) 0;padding:0;text-align:center}figure.inline-graphic img{width:100%;max-width:780px;height:auto;border-radius:var(--radius-md);background:#FAFAFA;display:block;padding:var(--space-3);cursor:zoom-in;transition:opacity 200ms ease,box-shadow 200ms ease}figure.inline-graphic img:hover{opacity:0.95;box-shadow:0 8px 24px rgba(0,0,0,0.08)}figure.inline-graphic img:focus-visible{outline:3px solid var(--color-accent-primary);outline-offset:4px}figure.inline-graphic figcaption{font-family:var(--font-display);font-weight:500;font-size:0.9rem;line-height:1.5;color:var(--color-text-muted);margin-top:var(--space-3);text-align:left;padding:0 var(--space-2)} .zoom-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,10,10,0.92);display:none;align-items:center;justify-content:center;padding:var(--space-5);cursor:zoom-out;animation:zoomFade 200ms ease}.zoom-overlay.is-open{display:flex}@keyframes zoomFade{from{opacity:0}to{opacity:1}}.zoom-overlay__img{max-width:96%;max-height:92%;width:auto;height:auto;background:#FAFAFA;border-radius:var(--radius-md);padding:var(--space-4);box-shadow:0 30px 80px rgba(0,0,0,0.5);cursor:default}.zoom-overlay__close{position:absolute;top:24px;right:24px;width:48px;height:48px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);border-radius:50%;color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);padding:0;transition:background 150ms ease}.zoom-overlay__close:hover{background:rgba(255,255,255,0.2)}.zoom-overlay__hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:0.85rem;color:rgba(255,255,255,0.7);background:rgba(0,0,0,0.4);padding:6px 14px;border-radius:var(--radius-md);letter-spacing:0.02em}body.zoom-open{overflow:hidden}@media(max-width:768px){.zoom-overlay{padding:var(--space-3)}.zoom-overlay__close{top:12px;right:12px;width:40px;height:40px;font-size:24px}.zoom-overlay__hint{font-size:0.78rem;bottom:12px}} sup.fn-marker{font-family:var(--font-display);font-weight:600;font-size:0.7em;color:var(--color-accent-strong);text-decoration:none;padding:0 1px} sup.fn-marker a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor} sup.fn-marker a:hover{color:var(--color-accent-primary)} .footnotes{margin-top:var(--space-10);padding-top:var(--space-5);border-top:1px solid var(--color-border);font-size:0.88rem;line-height:1.6;color:var(--color-text-secondary)} .footnotes h3{font-family:var(--font-display);font-weight:600;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-text-muted);margin:0 0 var(--space-3)} .footnotes ol{margin:0;padding-left:var(--space-5)} .footnotes li{margin-bottom:var(--space-3);padding-left:4px} .footnotes li:target{background:rgba(37,179,9,0.08);border-radius:var(--radius-sm);padding:6px 8px;margin-left:-8px} .footnotes a{color:var(--color-accent-strong)}

/* Edition V Puzzle-Grafik (1:1 square) - kompakt, statt 780 */
figure.inline-graphic img[src*="puzzle-de"],
figure.inline-graphic img[src*="puzzle-en"]{max-width:480px}

/* Footer brand tagline (sitewide, since 2026-05-25) */
.brand-tagline{font-style:italic;font-size:0.92em;color:rgba(255,255,255,0.55);letter-spacing:0.02em;display:inline-block;margin-top:2px}

/* Edition VII / Stille Fehlbesetzung - additions 2026-06-03 */
.article-header .subtitle{font-family:var(--font-display);font-weight:500;font-size:1.15rem;line-height:1.4;color:var(--color-text-muted);margin:0 0 var(--space-4);max-width:60ch}
figure.article-hero{margin:0 0 var(--space-8);padding:0}
figure.article-hero img{width:100%;height:auto;display:block;border-radius:var(--radius-md)}
figure.article-hero figcaption{font-family:var(--font-display);font-weight:500;font-size:0.92rem;line-height:1.55;color:var(--color-text-muted);margin-top:var(--space-3);font-style:italic}
article p.lead{font-family:var(--font-display);font-weight:500;font-size:1.25rem;line-height:1.5;color:var(--color-text-primary);margin:0 0 var(--space-6);max-width:62ch}
aside.related{margin-top:var(--space-10);padding:var(--space-6);background:var(--color-bg-elevated);border-left:3px solid var(--color-accent-primary);border-radius:0 var(--radius-md) var(--radius-md) 0}
aside.related h3{font-family:var(--font-display);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-muted);margin:0 0 var(--space-3)}
aside.related ul{margin:0;padding-left:var(--space-5);font-size:0.95rem;line-height:1.7}
aside.related li{margin-bottom:var(--space-2)}
aside.related a{color:var(--color-accent-strong);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 150ms ease}
aside.related a:hover{border-bottom-color:var(--color-accent-strong)}