/* Same content frame and fluid type scale as the existing logo guidelines.
   1920px is the full-size design; cards reflow instead of scaling their text. */
body:not(.page-index) .brand-library{
 --content-left:353px;
 --section-space:clamp(96px,calc(-10.666667px + 8.888889vw),160px);
 grid-template-columns:255px minmax(0,1fr);gap:48px;
 padding-left:50px;padding-right:clamp(82px,calc(-46px + 12.5vw),194px);
}
body:not(.page-index) .brand-section{padding-block:var(--section-space)}
body:not(.page-index) .section-sidebar{padding-top:var(--section-space);font-size:clamp(14px,calc(10.666667px + .277778vw),16px)}
body:not(.page-index) .section-sidebar nav{top:var(--section-space)}
body:not(.page-index) .section-heading{font-weight:600;overflow-wrap:break-word}
body:not(.page-index) .section-content h2{scroll-margin-top:var(--section-space)}
body:not(.page-index) .intro-width{width:clamp(340px,calc(180px + 13.35vw),436.336px);max-width:100%}
body:not(.page-index) .intro-copy{max-width:min(100%,65ch);min-width:0;white-space:normal}
body:not(.page-index) .section-intro [class*="w-[109"],
body:not(.page-index) .section-intro [class*="w-[795"],
body:not(.page-index) .section-intro [class*="w-[815"]{width:min(100%,795px);max-width:100%}
body:not(.page-index) .section-content{gap:clamp(40px,3.333333vw,64px)}
body:not(.page-index) .section-intro{gap:clamp(20px,1.666667vw,32px)}
.page-farben .primary-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.page-farben .secondary-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.page-farben :is(.primary-palette,.secondary-palette)>div{width:auto!important;height:auto;min-width:0}
.page-farben :is(.primary-palette,.secondary-palette)>div>div{height:clamp(300px,22.725vw,436.33px);padding:32px;min-width:0}
.page-farben .full-bleed>.flex{padding:clamp(32px,3.333333vw,64px)}
.page-farben .full-bleed .color-shades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:32px}
.page-farben .color-shades>.color-swatch{grid-area:auto!important;width:auto;height:auto;min-height:342px;padding:32px 24px;min-width:0;overflow:visible}
.page-farben .color-swatch :is(div,p){max-width:100%;min-width:0}
.page-farben .color-swatch p{white-space:normal;overflow-wrap:normal}
.page-farben .color-swatch [class*="w-[min-content]"]{width:auto}
.page-farben .color-swatch [class*="whitespace-nowrap"]{white-space:normal}
/* Retain the original two-column sample grids until they need to stack. */
body:not(.page-index) .responsive-grid:not(.color-shades){grid-template-columns:repeat(2,minmax(0,1fr))}
body:not(.page-index) .responsive-grid:not(.color-shades)>*{grid-area:auto!important}
body.page-icons [data-node-id="848:2616"] .responsive-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(min-width:992px) and (max-width:1199px){
 body:not(.page-index) .brand-library{--content-left:236px;grid-template-columns:180px minmax(0,1fr);gap:24px;padding-inline:32px}
}
@media(max-width:1399px){
 body:not(.page-index) .full-bleed{flex-direction:column}
 body:not(.page-index) .full-bleed>*{width:100%!important;flex:auto!important}
 .page-farben .full-bleed .color-shades{grid-template-columns:repeat(3,minmax(0,1fr))}
 .page-farben .full-bleed>.flex{padding:48px}
}
@media(min-width:1400px) and (max-width:1700px){
 .page-farben .full-bleed .color-shades{gap:20px}
 .page-farben .color-shades>.color-swatch{padding:24px 16px;min-height:300px}
}
@media(max-width:991px){
 body:not(.page-index) .brand-library{display:block;--content-left:clamp(20px,calc(5.0877px + 4.38596vw),50px);padding-inline:var(--content-left);--section-space:64px}
 body:not(.page-index) .section-sidebar{display:none}
 body:not(.page-index) .section-content>.responsive-row{flex-direction:column}
 body:not(.page-index) .section-content>.responsive-row>*{width:100%;max-width:100%;min-width:0}
 .page-farben .primary-palette{grid-template-columns:1fr}
 .page-farben .secondary-palette{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:not(.page-index) .responsive-grid:not(.color-shades){grid-template-columns:1fr}
 body.page-icons [data-node-id="848:2616"] .responsive-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .page-farben .full-bleed .color-shades{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-farben .color-shades>.color-swatch{min-height:280px}
 body:not(.page-index) .section-heading{font-size:32px;line-height:1.05}
 body:not(.page-index) .section-intro .intro-copy{font-size:18px;line-height:1.5}
}
@media(max-width:599px){
 .page-farben .secondary-palette{grid-template-columns:1fr}
 .page-farben .full-bleed .color-shades{grid-template-columns:1fr}
 .page-farben .full-bleed>.flex{padding:48px clamp(20px,calc(5.0877px + 4.38596vw),50px)}
 .page-farben .color-shades>.color-swatch{min-height:300px;padding:32px}
 body.page-icons [data-node-id="848:2616"] .responsive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Fluid type generated from original design sizes; compositions retain their internal geometry. */
@media(min-width:992px){
body:not(.page-index) .brand-sections .text-\[112px\]:not(.artboard *){font-size:clamp(64px,calc(-16.000000px + 6.666667vw),112px)}
body:not(.page-index) .brand-sections .text-\[18px\]:not(.artboard *){font-size:clamp(16px,calc(12.666667px + 0.277778vw),18px)}
body:not(.page-index) .brand-sections .text-\[20px\]:not(.artboard *){font-size:clamp(16px,calc(9.333333px + 0.555556vw),20px)}
body:not(.page-index) .brand-sections .text-\[24px\]:not(.artboard *){font-size:clamp(18px,calc(8.000000px + 0.833333vw),24px)}
body:not(.page-index) .brand-sections .text-\[32px\]:not(.artboard *){font-size:clamp(24px,calc(10.666667px + 1.111111vw),32px)}
body:not(.page-index) .brand-sections .text-\[36px\]:not(.artboard *){font-size:clamp(24px,calc(4.000000px + 1.666667vw),36px)}
body:not(.page-index) .brand-sections .text-\[44px\]:not(.artboard *){font-size:clamp(33px,calc(14.666667px + 1.527778vw),44px)}
body:not(.page-index) .brand-sections .text-\[48px\]:not(.artboard *){font-size:clamp(32px,calc(5.333333px + 2.222222vw),48px)}
body:not(.page-index) .brand-sections .text-\[56px\]:not(.artboard *){font-size:clamp(36px,calc(2.666667px + 2.777778vw),56px)}
body:not(.page-index) .brand-sections .text-\[72px\]:not(.artboard *){font-size:clamp(48px,calc(8.000000px + 3.333333vw),72px)}
body:not(.page-index) .brand-sections .text-\[88px\]:not(.artboard *){font-size:clamp(56px,calc(2.666667px + 4.444444vw),88px)}
body:not(.page-index) .brand-sections .text-\[length\:var\(--mw-scale-05\,20px\)\]:not(.artboard *){font-size:clamp(16px,calc(9.333333px + 0.555556vw),20px)}
body:not(.page-index) .brand-sections .text-\[length\:var\(--mw-scale-06\,24px\)\]:not(.artboard *){font-size:clamp(18px,calc(8.000000px + 0.833333vw),24px)}
body:not(.page-index) .brand-sections .text-\[length\:var\(--mw-scale-09\,36px\)\]:not(.artboard *){font-size:clamp(24px,calc(4.000000px + 1.666667vw),36px)}
body:not(.page-index) .brand-sections .text-\[length\:var\(--mw-scale-12\,48px\)\]:not(.artboard *){font-size:clamp(32px,calc(5.333333px + 2.222222vw),48px)}
body:not(.page-index) .brand-sections .text-\[length\:var\(--mw-scale-13\,56px\)\]:not(.artboard *){font-size:clamp(36px,calc(2.666667px + 2.777778vw),56px)}
body:not(.page-index) .brand-sections .text-\[length\:var\(--mw-scale-14\,72px\)\]:not(.artboard *){font-size:clamp(48px,calc(8.000000px + 3.333333vw),72px)}
body:not(.page-index) .brand-sections .text-\[length\:var\(--mw-scale-15\,88px\)\]:not(.artboard *){font-size:clamp(56px,calc(2.666667px + 4.444444vw),88px)}
body:not(.page-index) .brand-sections .text-\[length\:var\(--mw-scale-16\,112px\)\]:not(.artboard *){font-size:clamp(64px,calc(-16.000000px + 6.666667vw),112px)}
}

body:not(.page-index) .brand-sections .full-bleed{max-width:none!important}
/* Typeface examples use the available column and wrap naturally. */
.page-typografie .section-content [class~="w-[932px]"]:not(.artboard *){width:100%;min-width:0;flex:0 1 auto}
.page-typografie .section-content [class~="w-[856px]"]:not(.artboard *){width:100%;max-width:100%}
.page-typografie .brand-sections [class*="max-h-"]:not(.artboard *){max-height:none;overflow:visible}
.page-typografie .brand-sections p:not(.artboard *){overflow-wrap:break-word}
@media(max-width:991px){.page-typografie .section-content [class~="w-[932px]"]:not(.artboard *){flex:auto;width:100%}}
@media(min-width:992px){.menu-inner{padding-inline:clamp(50px,10.052083vw,193px)}}
/* Light/dark type samples: natural line boxes leave room for all glyphs.
   Exported 20px heights and text-box trimming clipped descenders. */
.page-typografie .full-bleed :is(.type-color-kicker,.type-color-heading,.type-color-copy){
 height:auto;min-height:0;max-height:none;overflow:visible;text-overflow:clip;
 text-box-trim:none;width:100%;min-width:0;white-space:normal;
}
.page-typografie .full-bleed .type-color-kicker{line-height:1.25}
.page-typografie .full-bleed .type-color-heading{line-height:1.1}
.page-typografie .full-bleed .type-color-copy{line-height:1.5}
.page-typografie .full-bleed :is(.type-color-heading,.type-color-copy)>span{line-height:inherit}
/* Updated Figma code labels: one two-line block, not two spaced paragraphs. */
.page-typografie .full-bleed .type-color-codes{
 width:100%;margin:0;line-height:1.5;text-box-trim:none;overflow:visible;
 height:auto;max-height:none;white-space:normal;font-variant-numeric:normal;
}
.page-typografie .type-color-codes>span{display:block}
/* The misuse stroke always spans the visual, above its text and imagery. */
.page-typografie .type-misuse-card{height:auto;min-width:0}
.page-typografie .type-misuse-visual{position:relative;isolation:isolate;width:100%;height:315px;flex:none;min-height:0;overflow:hidden}
.page-typografie .type-misuse-visual>.misuse-strike{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;z-index:2;pointer-events:none}
.page-typografie .type-misuse-card>p{white-space:normal}
/* Typography examples use natural text flow at every breakpoint.
   No min-content columns, fixed text heights or cap-height clipping. */
body.page-typografie .type-natural-text p{
 height:auto;min-height:0;max-height:none;overflow:visible;text-overflow:clip;
 text-box-trim:none;white-space:normal;word-break:normal;overflow-wrap:normal;
}
body.page-typografie .type-natural-text p[class*="family-headline"],
body.page-typografie .type-misuse-visual [class*="family-headline"] p{line-height:1.1}
body.page-typografie .type-natural-text p[class*="family-body"]{line-height:1.5}
body.page-typografie .type-natural-text p>span{line-height:inherit}
body.page-typografie .type-combination-row{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:end;gap:32px;width:100%;min-width:0}
body.page-typografie .type-combination-row>p{width:auto;max-width:100%;min-width:0}
body.page-typografie .type-combination-example,
body.page-typografie .type-combination-example>div,
body.page-typografie .type-combination-example p{width:100%!important;min-width:0!important;max-width:100%;flex:0 1 auto!important}
body.page-typografie .type-combination-example p[class*="font-[var(--mw-weight-bold"]{line-height:1.25}
body.page-typografie .type-misuse-visual{height:auto;min-height:315px;flex:1 0 auto;padding:24px}
body.page-typografie .type-misuse-visual div,
body.page-typografie .type-misuse-visual p{height:auto;min-height:0;max-height:none;flex:0 1 auto;overflow:visible}
body.page-typografie .type-misuse-visual p{width:100%}
@media(max-width:1199px){
 body.page-typografie .type-combination-row{grid-template-columns:minmax(0,1fr);align-items:start;gap:24px}
 body.page-typografie .type-combination-row>*{width:100%;min-width:0}
}
/* Icon component variants live outside the source page frame in Figma. */
.page-icons .icon-sizes-content{padding-bottom:0}
.page-icons .icon-size-scroll{width:647px;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.icon-size-scroll:focus-visible{outline:2px solid #2d23e8;outline-offset:6px}
.icon-size-table{border-collapse:collapse;width:647px;table-layout:fixed;text-align:left}
.icon-size-table th{font:500 12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:400;text-align:center}
.icon-size-table th:first-child{width:127px;text-align:left}
.icon-size-table thead th{height:48px;vertical-align:top}
.icon-size-table td{height:80px;vertical-align:middle;padding:0 8px;text-align:center}
.icon-size-example{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.page-icons .icon-size-example img{display:block;max-width:none;flex:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Keep the original Figma image frames and their internal crop proportional. */
body.page-icons .brand-sections .icon-example-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
body.page-icons .icon-example-image{width:100%;height:auto;aspect-ratio:436.336 / 584;overflow:hidden;padding:0}
@media(max-width:1199px){body.page-icons .brand-sections .icon-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){body.page-icons .brand-sections .icon-example-grid{grid-template-columns:minmax(0,1fr)}}

/* Intro text must fill its column instead of collapsing to min-content. */
body.page-icons .section-intro > :is(h2, p, div){width:100%;min-width:0;max-width:100%}
body.page-icons .section-intro :is(h2, p){word-break:normal;overflow-wrap:normal}
/* Equal-width cells keep every icon and label on the same center axis. */
body.page-icons .brand-sections .fixed-icon-grid > .fixed-icon-item{width:100%;min-width:0;justify-self:stretch;align-self:stretch;align-items:center;justify-content:flex-start;text-align:center;gap:8px;padding:8px}
body.page-icons .fixed-icon-frame{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none}
body.page-icons .fixed-icon-item > p{width:100%;height:auto;min-width:0;white-space:normal;word-break:normal;overflow-wrap:normal;line-height:1.5;text-box-trim:none;text-align:center}

/* Flowing introductory copy always uses the available text column. */
body:not(.page-index) .brand-sections .intro-copy{width:100%;min-width:0;word-break:normal;overflow-wrap:normal}

/* The staggered tiles extend to y=349.36; reserve room for their shadows. */
.page-farben .artboard-viewport:has(> .color-combination-art){overflow:visible}

/* Bildwelt: exported min-content headings must fill their responsive column. */
body:is(.page-bildwelt,.page-illustrationen) .brand-sections h2{width:100%;min-width:0;max-width:100%;line-height:1.15}
body:is(.page-bildwelt,.page-illustrationen) .brand-sections :is(h2,h3,p):not(.artboard *){height:auto;max-height:none;overflow:visible;text-box-trim:none;word-break:normal;overflow-wrap:normal;white-space:normal}
body:is(.page-bildwelt,.page-illustrationen) .brand-sections p.leading-none:not(.artboard *){line-height:1.15}
body:is(.page-bildwelt,.page-illustrationen) .brand-sections div[class~="w-[min-content]"]:not(.artboard):not(.artboard *){width:100%;min-width:0}
body:is(.page-bildwelt,.page-illustrationen) .brand-sections div:not(.artboard):not(.artboard *){text-box-trim:none}
body:is(.page-bildwelt,.page-illustrationen) .brand-sections div[class~="leading-[0]"]:not(a *):not(.artboard *){line-height:1.5}

/* Shared section headings must not shrink to individual letters. */
body:not(.page-index) .brand-sections h2.section-heading{width:100%;min-width:0;max-width:100%;height:auto;line-height:1.15;text-box-trim:none;word-break:normal;overflow-wrap:normal}
/* Text in illustration examples needs real line boxes as well. */
body.page-illustrationen .artboard :is(p,div){text-box-trim:none}
body.page-illustrationen .artboard div[class~="leading-[0]"]{line-height:1.5;max-height:none;overflow:visible}
body.page-illustrationen .artboard p.leading-none{line-height:1.15}

/* Footer and header logo share one responsive page inset. */
body .brand-footer{padding-inline:var(--brand-edge-inset)}
body .brand-footer .footer-title{margin:0}
body .brand-footer :is(.footer-title,h2){line-height:1.15;overflow-wrap:normal;word-break:normal}
body .brand-footer h2{width:342px;max-width:100%}

/* End the sticky containing block before the footer, preserving breathing room. */
@media(min-width:992px){
 body :is(.section-sidebar,.mw-logos__sidebar){margin-bottom:clamp(96px,calc(-10.666667px + 8.888889vw),160px)}
}