/* @modell /var/www/_shared_dev/web-assets/typografie.json#tokens */
:root{--font-family-base:'Avenir', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;--font-family-headings:var(--font-family-base);--font-family-mono:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;--font-sans:var(--font-family-base);--font-size-2xl:1.875rem;--font-size-3xl:2.25rem;--font-size-base:var(--font-size-ui);--font-size-h1:clamp(1.75rem, 8vw, 2.8rem);--font-size-h2:clamp(1.4rem, 6vw, 2.1rem);--font-size-h3:clamp(1.05rem, 4vw, 1.575rem);--font-size-h4:clamp(0.875rem, 3vw, 1.3125rem);--font-size-h5:clamp(1rem, 2.5vw, 1.2rem);--font-size-h6:clamp(0.7rem, 1.5vw, 0.875rem);--font-size-lg:var(--font-size-ui-title);--font-size-md:var(--font-size-ui);--font-size-meta:.875rem;--font-size-reading:1.2rem;--font-size-sm:var(--font-size-meta);--font-size-ui:1rem;--font-size-ui-title:1.25rem;--font-size-xl:1.5rem;--font-size-xs:var(--font-size-meta);--line-height-base:1.8;--line-height-h1:1.15;--line-height-h2:1.2;--line-height-loose:2;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-snug:1.375;--line-height-tight:1.25}
/* === Critical Layout Rules === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family-base,system-ui,sans-serif);color:var(--color-text-primary,#111);background:var(--color-bg-primary,#fff);line-height:var(--line-height-base,1.8)}
.site-header{position:sticky;top:0;z-index:1000;background:var(--color-bg-primary,#fff);border-bottom:1px solid var(--color-border,#d0d0d0)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;width:100%;gap:10px;flex-wrap:wrap}
.site-header__logo{flex:0 0 auto}
.site-header__logo img{display:block;width:50px;height:50px}
.site-header__actions{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;max-width:100%}
.nav-desktop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.nav-mobile{display:none;position:relative}
.content{max-width:var(--max-width,96ch);margin:0 auto;padding:var(--space-8,2rem) var(--space-4,1rem)}
@media(max-width:1149px){.nav-desktop{display:none!important}.nav-mobile{display:block!important}}
@media(min-width:1150px){.nav-desktop{gap:2px}.nav-desktop .nav-link{font-size:var(--font-size-ui);padding:0.2rem 0.3rem}.nav-desktop .nav-icon{width:18px;height:18px}}
/* Typography roles; the article reading scale stays separate from UI text. */
[data-typografie="ui"], [data-typografie="ui"] *, [data-typografie="ui"] *::before, [data-typografie="ui"] *::after { box-sizing:border-box; }
[data-typografie="ui"] :where(main,fieldset,input,select,textarea) { min-inline-size:0;max-inline-size:100%; }
[data-typografie="ui"] { overflow-wrap:anywhere; }
.typografie-tabelle { max-inline-size:100%;overflow:auto;overflow-wrap:normal; }
.typografie-tabelle table { min-inline-size:100%;width:max-content; }
:where(button,input,select,textarea) { font-family:inherit;font-size:var(--font-size-ui);line-height:var(--line-height-normal); }
[data-typografie="ui"] { font-family:var(--font-family-base);font-size:var(--font-size-ui);line-height:var(--line-height-base); }
[data-typografie="ui"] :where(p,li,table,label,button,input,select,textarea) { font-size:var(--font-size-ui); }
[data-typografie="ui"] :where(h1,h2,h3,legend) { font-size:var(--font-size-ui-title); }
[data-typografie="ui"] :where(small,.hint,.form-hint,.field-error) { font-size:var(--font-size-meta); }