/* FHS Jahresbericht – Design-Tokens + Bootstrap-Package-Frame-Layer */
/* ---- tokens/fonts.css ---- */
/* Self-hosted brand fonts. Headlines: Open Sans 300/600 · Fließtext: Roboto 300/400 (600 nicht geliefert → Browser-Fallback) */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/open-sans-v43-latin_latin-ext-300.woff2') format('woff2'),url('../fonts/open-sans-v43-latin_latin-ext-300.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/open-sans-v43-latin_latin-ext-300italic.woff2') format('woff2'),url('../fonts/open-sans-v43-latin_latin-ext-300italic.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/open-sans-v43-latin_latin-ext-regular.woff2') format('woff2'),url('../fonts/open-sans-v43-latin_latin-ext-regular.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/open-sans-v43-latin_latin-ext-italic.woff2') format('woff2'),url('../fonts/open-sans-v43-latin_latin-ext-italic.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/open-sans-v43-latin_latin-ext-600.woff2') format('woff2'),url('../fonts/open-sans-v43-latin_latin-ext-600.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;font-display:swap;src:url('../fonts/open-sans-v43-latin_latin-ext-600italic.woff2') format('woff2'),url('../fonts/open-sans-v43-latin_latin-ext-600italic.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/roboto-v48-latin_latin-ext-300.woff2') format('woff2'),url('../fonts/roboto-v48-latin_latin-ext-300.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/roboto-v48-latin_latin-ext-300italic.woff2') format('woff2'),url('../fonts/roboto-v48-latin_latin-ext-300italic.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/roboto-v48-latin_latin-ext-regular.woff2') format('woff2'),url('../fonts/roboto-v48-latin_latin-ext-regular.ttf') format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/roboto-v48-latin_latin-ext-italic.woff2') format('woff2'),url('../fonts/roboto-v48-latin_latin-ext-italic.ttf') format('truetype')}

/* ---- tokens/colors.css ---- */
:root{
/* Brand — from logo.svg + site theme-color */
--fhs-blue:#004b93;
--fhs-blue-dark:#00315f;
--fhs-blue-deep:#0b1f36;
--fhs-blue-light:#778cc1;
--fhs-blue-pale:#dfe5f2;
--fhs-blue-tint:#f2f5fa;
--fhs-magenta:#cb0666;
--fhs-magenta-dark:#a0044f;
--fhs-magenta-tint:#fbe8f1;
--fhs-grey:#808080;
--fhs-grey-light:#b3b3b3;
/* Neutrals */
--neutral-0:#ffffff;
--neutral-50:#f6f7f9;
--neutral-100:#eceef2;
--neutral-300:#c9ced6;
--neutral-500:#808080;
--neutral-700:#4a5360;
--neutral-900:#1c2430;
/* Semantic */
--text-body:var(--neutral-900);
--text-muted:var(--neutral-700);
--text-inverse:#ffffff;
--text-link:var(--fhs-blue);
--text-link-hover:var(--fhs-magenta);
--surface-page:#ffffff;
--surface-subtle:var(--fhs-blue-tint);
--surface-primary:var(--fhs-blue);
--surface-secondary:var(--fhs-blue-light);
--surface-accent:var(--fhs-magenta);
--surface-dark:var(--fhs-blue-deep);
--surface-footer:#f3f2f3;
--surface-footer-bar:#ffffff;
--footer-text:#212529;
--footer-link:#212529;
--footer-link-hover:#004986;
--border-subtle:var(--neutral-100);
--border-default:var(--neutral-300);
--overlay-scrim:rgba(11,31,54,.55);
--overlay-scrim-strong:rgba(11,31,54,.82);
}

/* ---- tokens/typography.css ---- */
:root{
--font-sans:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;/* @kind font */

--font-heading:'Open Sans',system-ui,sans-serif;/* @kind font */

--font-display:var(--font-heading);/* @kind font */

--font-body:var(--font-sans);/* @kind font */

--fw-light:300;/* @kind font */
--fw-regular:400;/* @kind font */
--fw-semibold:600;/* @kind font */
--fw-bold:700;/* @kind font */

--fs-display-xl:clamp(2.75rem,6vw,5.5rem);/* @kind font */

--fs-display:clamp(2.25rem,4.5vw,4rem);/* @kind font */

--fs-h1:clamp(2rem,3.4vw,3rem);/* @kind font */

--fs-h2:clamp(1.625rem,2.6vw,2.25rem);/* @kind font */

--fs-h3:1.5rem;/* @kind font */

--fs-h4:1.25rem;/* @kind font */

--fs-lead:1.3125rem;/* @kind font */

--fs-body:1.125rem;/* @kind font */

--fs-small:.9375rem;/* @kind font */

--fs-eyebrow:.8125rem;/* @kind font */

--fs-stat:clamp(3rem,6vw,5rem);/* @kind font */

--lh-tight:1.1;/* @kind font */
--lh-heading:1.2;/* @kind font */
--lh-body:1.6;/* @kind font */
--lh-lead:1.5;/* @kind font */

--ls-eyebrow:.14em;/* @kind font */
--ls-display:-.015em;/* @kind font */

}

/* ---- tokens/spacing.css ---- */
:root{
--space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:1.5rem;--space-5:3rem;--space-6:4.5rem;--space-7:7.5rem;
/* Bootstrap Package frame spacing (frame-space-before/after) */
--frame-space-xs:1rem;--frame-space-sm:2rem;--frame-space-md:3rem;--frame-space-lg:4.5rem;--frame-space-xl:7.5rem;
/* Container widths (frame layout "container width") */
--container-small:760px;
--container-default:1140px;
--container-large:1320px;
--container-full:100%;
--radius-0:0;--radius-sm:2px;--radius-md:4px;--radius-pill:999px;
--shadow-card:0 1px 2px rgba(11,31,54,.06),0 8px 24px rgba(11,31,54,.08);
--shadow-float:0 24px 60px rgba(11,31,54,.22);
--header-height:84px;
}

/* ---- tokens/motion.css ---- */
:root{
/* Mirrors Content Animations (AOS) defaults */
--aos-duration:800ms;/* @kind other */

--aos-duration-slow:1200ms;/* @kind other */

--aos-offset:120px;/* @kind other */

--ease-standard:cubic-bezier(.25,.1,.25,1);/* @kind other */

--ease-out:cubic-bezier(.16,1,.3,1);/* @kind other */

--ease-in-out:ease-in-out;/* @kind other */

--transition-fast:150ms ease;/* @kind other */

--transition-base:250ms ease;/* @kind other */

--parallax-speed:.5;/* @kind other */

}

/* ---- tokens/base.css ---- */
body{font-family:var(--font-body);color:var(--text-body);font-size:var(--fs-body);line-height:var(--lh-body)}
a{color:var(--text-link)}a:hover{color:var(--text-link-hover)}

/* ---- report.css ---- */
/* Jahresbericht — Bootstrap Package frame layer. Load after bootstrap.min.css + ../../styles.css */
html{scroll-behavior:smooth;scroll-padding-top:var(--header-height)}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-link)}a:hover{color:var(--text-link-hover)}
main,.site-footer{overflow-x:clip}
h1,h2,h3,h4{text-wrap:balance}p{text-wrap:pretty}
h1,h2,h3,h4,h5,.h4,.h5{font-family:var(--font-heading)}
.display-serif{font-family:var(--font-display);font-weight:300;letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:700;color:var(--fhs-magenta);margin-bottom:var(--space-3);display:block}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:300}
.caption{font-size:var(--fs-small);font-style:italic;color:var(--text-muted);margin-top:var(--space-2)}
/* ---------- frames ---------- */
.frame{position:relative;padding-top:var(--frame-space-lg);padding-bottom:var(--frame-space-lg)}
.frame-space-before-none{padding-top:0}.frame-space-after-none{padding-bottom:0}
.frame-space-before-xl{padding-top:var(--frame-space-xl)}.frame-space-after-xl{padding-bottom:var(--frame-space-xl)}
.frame-space-before-sm{padding-top:var(--frame-space-sm)}.frame-space-after-sm{padding-bottom:var(--frame-space-sm)}
.frame-container{margin:0 auto;padding:0 1.5rem;max-width:calc(var(--container-default) + 3rem)}
.frame-container-small{max-width:calc(var(--container-small) + 3rem)}
.frame-container-large{max-width:calc(var(--container-large) + 3rem)}
.frame-container-full{max-width:none;padding:0}
.frame-inner{position:relative;z-index:1}
.frame-background-light{background:var(--surface-subtle)}
.frame-background-primary{background:var(--surface-primary);color:#fff}
.frame-background-secondary{background:var(--surface-secondary);color:var(--fhs-blue-deep)}
.frame-background-tertiary{background:var(--surface-accent);color:#fff}
.frame-background-dark{background:var(--surface-dark);color:#fff}
.frame-background-primary .eyebrow,.frame-background-dark .eyebrow,.frame-has-backgroundimage .eyebrow{color:#fff;opacity:.9}
.frame-background-tertiary .eyebrow{color:#fff}
.frame-background-primary a:not(.btn),.frame-background-dark a:not(.btn),.frame-background-tertiary a:not(.btn),.frame-has-backgroundimage a:not(.btn){color:#fff}
.frame-height-max{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.frame-height-medium{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
/* background image (BP: frame-has-backgroundimage + parallax / fade options) */
.frame-has-backgroundimage{color:#fff;background:var(--surface-dark);overflow:hidden}
.frame-backgroundimage-container{position:absolute;inset:0;overflow:hidden;z-index:0}
.frame-backgroundimage{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform}
.frame-backgroundimage-parallax{top:-25%;bottom:-25%}
.frame-backgroundimage-fixed{background-attachment:fixed}
.frame-backgroundimage-fade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,54,.15) 0%,rgba(11,31,54,.7) 100%)}
.frame-backgroundimage-scrim::after{content:"";position:absolute;inset:0;background:var(--overlay-scrim)}
.frame-backgroundimage-grayscale{filter:grayscale(1)}
/* textmedia */
.gallery-figure{margin:0}.gallery-figure img{width:100%;height:auto;display:block}
.media-full img,.media-full iframe{width:100%;display:block}
.ratio-video{position:relative;aspect-ratio:16/9;background:var(--surface-dark)}.ratio-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* stats */
.stat-value{font-family:var(--font-display);font-size:var(--fs-stat);line-height:1;font-weight:300}
.stat-label{font-size:var(--fs-small);margin-top:var(--space-2);max-width:22ch}
/* quote */
.report-quote{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.3;font-style:italic;margin:0}
.report-quote-source{font-size:var(--fs-small);font-style:normal;font-family:var(--font-sans);letter-spacing:.04em;margin-top:var(--space-4);display:block}
/* buttons (BP btn-primary etc.) */
.btn{border-radius:var(--radius-sm);font-weight:600;padding:.75rem 1.5rem;font-size:1rem;letter-spacing:.01em}
.btn-primary{--bs-btn-bg:var(--fhs-blue);--bs-btn-border-color:var(--fhs-blue);--bs-btn-hover-bg:var(--fhs-blue-dark);--bs-btn-hover-border-color:var(--fhs-blue-dark);--bs-btn-active-bg:var(--fhs-blue-dark)}
.btn-tertiary{--bs-btn-color:#fff;--bs-btn-bg:var(--fhs-magenta);--bs-btn-border-color:var(--fhs-magenta);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--fhs-magenta-dark);--bs-btn-hover-border-color:var(--fhs-magenta-dark)}
.btn-outline-light{--bs-btn-hover-color:var(--fhs-blue)}
/* header */
.report-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:1030;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;transition:background var(--transition-base),box-shadow var(--transition-base)}
.report-header .logo{height:52px;display:block}
.report-header .logo-light{display:none}
.report-header.is-top .logo-light{display:block}.report-header.is-top .logo-dark{display:none}
.report-header:not(.is-top){background:#fff;box-shadow:0 1px 0 var(--border-subtle)}
.report-title-tag{font-size:var(--fs-small);font-weight:600;letter-spacing:.04em;color:var(--fhs-blue)}
.report-header.is-top .report-title-tag{color:#fff}
.nav-toggle{background:none;border:0;display:flex;align-items:center;gap:.75rem;font-weight:600;font-size:1rem;padding:.5rem;color:var(--fhs-blue);cursor:pointer}
.report-header.is-top .nav-toggle{color:#fff}
.nav-toggle i{font-size:1.75rem;line-height:1}
.progress-line{position:fixed;top:0;left:0;height:3px;background:var(--fhs-magenta);z-index:1040;width:0}
/* footer (freie-hochschule-stuttgart.de) */
.site-footer{position:relative;z-index:1;background:var(--surface-footer);color:var(--footer-text);font-size:var(--fs-small)}
.site-footer a{color:var(--footer-link);text-decoration:none}.site-footer a:hover{color:var(--footer-link-hover);text-decoration:underline}
.site-footer h5{font-size:1rem;font-weight:600;margin-bottom:.75rem}
.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin-bottom:.35rem}
.site-footer .address{line-height:1.7}.site-footer .footer-logo{height:72px;width:auto;display:block}.site-footer a{word-break:break-word}
.site-footer-bar{width:100%;background:var(--surface-footer-bar);color:var(--footer-text);font-size:.875rem}
.site-footer-bar a{color:var(--footer-link);text-decoration:none}.site-footer-bar a:hover{color:var(--footer-link-hover);text-decoration:underline}
.site-footer-bar .links{display:flex;gap:.5rem 1.5rem;flex-wrap:wrap}
.to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:48px;height:48px;border-radius:50%;background:var(--fhs-magenta);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1020;opacity:0;pointer-events:none;transition:opacity var(--transition-base);text-decoration:none}
.to-top.show{opacity:1;pointer-events:auto}.to-top:hover{color:#fff;background:var(--fhs-magenta-dark)}
@media (max-width:991px){.frame-backgroundimage-fixed{background-attachment:scroll}}
@media (prefers-reduced-motion:reduce){.frame-backgroundimage-parallax{top:0;bottom:0;transform:none!important}}

/* long-form text (Text element with many paragraphs + menu_section) */
.longread{font-size:var(--fs-body);line-height:1.7;max-width:68ch}
.longread>p{margin:0 0 1.25em}
.longread h3{font-family:var(--font-heading);font-weight:600;font-size:var(--fs-h3);line-height:1.3;margin:2.75rem 0 1rem;color:var(--fhs-blue);scroll-margin-top:calc(var(--header-height) + 1rem)}
.longread h3:first-child{margin-top:0}
.longread ul{padding-left:1.2rem;margin:0 0 1.25em}.longread li{margin-bottom:.4em}.longread li::marker{color:var(--fhs-magenta)}
.longread figure{margin:2.5rem 0}.longread figure img{width:100%;display:block}
.longread .pull{font-family:var(--font-heading);font-weight:300;font-size:1.625rem;line-height:1.35;color:var(--fhs-blue);border-top:2px solid var(--fhs-magenta);padding-top:1.25rem;margin:2.5rem 0}
.longread .footnote{font-size:var(--fs-small);color:var(--text-muted);border-top:1px solid var(--border-default);padding-top:1rem;margin-top:3rem}
.section-toc{position:sticky;top:calc(var(--header-height) + 2rem);font-size:var(--fs-small)}
.section-toc .toc-title{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:700;color:var(--text-muted);margin-bottom:.75rem}
.section-toc a{display:block;padding:.4rem 0 .4rem .9rem;border-left:2px solid var(--border-default);color:var(--text-body);text-decoration:none}
.section-toc a:hover,.section-toc a.active{border-left-color:var(--fhs-magenta);color:var(--fhs-blue)}
.reading-time{font-size:var(--fs-small);color:var(--text-muted);display:flex;align-items:center;gap:.5rem;margin-bottom:2rem}

@media (max-width:575.98px){:root{--header-height:68px}.report-header{padding:0 1rem}.report-header .logo{height:40px}.frame{padding-top:var(--frame-space-md);padding-bottom:var(--frame-space-md)}.frame-space-before-xl{padding-top:var(--frame-space-lg)}.frame-space-after-xl{padding-bottom:var(--frame-space-lg)}.float-card{padding:1.5rem}.to-top{width:44px;height:44px;right:1rem;bottom:1rem}}