:root {
  --ink: #1a1919;
  --muted: #4b4948;
  --surface: #ffffff;
  --canvas: #ffffff;
  --line: #e5e5e5;
  --leaf: #1a1919;
  --leaf-dark: #1a1919;
  --sun: #1a1919;
  /* Akzent- und Pastellfarben aus dem UMS-Booklet. */
  --booklet-blue: #3572ac;
  --booklet-blue-pastel: #ced8e5;
  --booklet-pink: #dc2d74;
  --booklet-pink-pastel: #f7d3d8;
  --booklet-orange: #eb8b2d;
  --booklet-orange-pastel: #fce3c4;
  --booklet-turquoise: #00a3a3;
  --booklet-turquoise-pastel: #cbe7e4;
  --radius: 1rem;
  --shadow: 0 0.75rem 2rem rgb(26 25 25 / 8%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 20rem; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.6; }
a { color: inherit; }
.container { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; top: 0.75rem; left: 0.75rem; padding: 0.55rem 0.8rem; background: var(--ink); color: white; border-radius: 0.4rem; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { background: rgb(255 255 255 / 92%); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px); }
.header-inner { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }.brand img { display: block; width: clamp(10rem, 19vw, 13rem); height: 3.2rem; object-fit: contain; object-position: left center; }
.site-nav ul { display: flex; align-items: center; gap: 0.25rem; padding: 0; margin: 0; list-style: none; }
.site-nav a { display: block; padding: 0.5rem 0.7rem; border-radius: 0.45rem; color: var(--muted); font-size: 0.94rem; font-weight: 650; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { background: #f5f5f5; color: var(--ink); }.site-nav a[aria-current="page"] { background: var(--ink); color: white; }
.site-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }.site-nav a[aria-current="page"]:focus-visible { outline-color: white; }
.menu-toggle { display: none; }
@media (min-width: 45.001rem) and (max-width: 56rem) { .menu-toggle { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 0.45rem; background: white; color: var(--ink); cursor: pointer; }.menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after { display: block; width: 1.2rem; height: 2px; background: currentColor; transition: transform 160ms ease; }.menu-toggle-icon { position: relative; }.menu-toggle-icon::before, .menu-toggle-icon::after { position: absolute; left: 0; content: ""; }.menu-toggle-icon::before { top: -0.4rem; }.menu-toggle-icon::after { top: 0.4rem; }.menu-toggle[aria-expanded="true"] .menu-toggle-icon { background: transparent; }.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { transform: translateY(0.4rem) rotate(45deg); }.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { transform: translateY(-0.4rem) rotate(-45deg); }.site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; padding: 0.7rem max(1.25rem, calc((100% - 72rem) / 2)); border-bottom: 1px solid var(--line); background: white; box-shadow: 0 1rem 1.5rem rgb(23 54 50 / 8%); }.site-nav.is-open { display: block; }.site-nav ul { display: block; }.site-nav a { padding: 0.75rem; } }

.project-banner { background: linear-gradient(105deg, #073c39, #0b544b); color: white; }.project-banner-inner { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 0.9rem; }.project-banner-copy { display: grid; gap: 0.12rem; }.project-banner-copy strong { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -0.03em; }.project-banner-copy span { max-width: 34rem; font-size: clamp(0.9rem, 1.8vw, 1.1rem); }.project-logos { display: flex; align-items: center; justify-content: end; }.project-logos img { width: clamp(10rem, 16vw, 13.5rem); height: 4rem; padding: 0.38rem 0.55rem; border-radius: 0.55rem; background: white; object-fit: contain; }
.hero { padding: clamp(4rem, 8vw, 6.5rem) 0; background: radial-gradient(circle at 5% 95%, rgb(176 217 190 / 36%) 0 11%, transparent 11.2%), linear-gradient(120deg, #eff7ef 0%, #fafbf5 54%, #eaf5ee 100%); border-bottom: 1px solid var(--line); }.hero-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 1.08fr); align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
.eyebrow { margin: 0 0 0.7rem; color: var(--leaf); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }h1, h2 { line-height: 1.14; letter-spacing: -0.04em; }h1 { max-width: 13ch; margin-bottom: 0.25rem; font-size: clamp(4rem, 8vw, 6.6rem); }h2 { margin-bottom: 0.75rem; font-size: clamp(1.45rem, 3vw, 2rem); }.lead { max-width: 38rem; margin-bottom: 0; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.25rem); }.hero-subtitle { margin: 0; font-size: clamp(2rem, 4.5vw, 4.15rem); font-weight: 750; letter-spacing: -0.055em; line-height: 1.05; }
.hero-image { min-height: clamp(22rem, 34vw, 28rem); aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 0.9rem; }.hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro-placeholder { max-width: 31rem; margin-top: 2rem; padding: 0.9rem 1rem; border-left: 3px solid #75a897; background: rgb(255 255 255 / 48%); color: var(--muted); }.intro-placeholder p { margin: 0; }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }.section-heading { margin-bottom: 1.8rem; }
.section-heading-wide { max-width: 42rem; }.section-placeholder { margin: 0; color: var(--muted); font-size: 1.05rem; }.station-intro { max-width: 47rem; color: var(--muted); }.station-intro h3 { margin: 0 0 0.9rem; color: var(--ink); font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.025em; line-height: 1.2; }.station-intro p { margin: 0; }.station-intro p + p { margin-top: 1rem; }.station-intro .station-conclusion { margin-top: clamp(1.5rem, 3vw, 2rem); padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--leaf-dark); font-size: clamp(1.08rem, 1.8vw, 1.2rem); font-weight: 650; line-height: 1.5; }.station-section { background: #fbfcf8; }.measurement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; list-style: none; }.measurement-card { min-height: 11.25rem; position: relative; padding: 1.35rem; overflow: hidden; border: 1px solid #dce8df; border-radius: 0.8rem; background: white; }.measurement-card::after { content: ""; position: absolute; width: 5.8rem; height: 5.8rem; right: -1.75rem; bottom: -2.25rem; border-radius: 50%; background: #eff6f0; }.measurement-symbol { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; margin-bottom: 1.25rem; border-radius: 50%; background: #e3f1e6; }.measurement-symbol img { display: block; width: 1.4rem; height: 1.4rem; }.measurement-card h3 { position: relative; z-index: 1; margin: 0 0 0.35rem; color: var(--ink); font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.2; }.measurement-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 0.9rem; }
.process-chain { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.55rem; padding: 0; margin: 0; list-style: none; counter-reset: process; }.process-chain li { min-width: 0; position: relative; display: grid; justify-items: center; gap: 0.65rem; color: var(--ink); font-size: clamp(0.74rem, 1.25vw, 0.92rem); font-weight: 750; line-height: 1.2; text-align: center; }.process-chain li::before { content: counter(process); counter-increment: process; position: absolute; z-index: 1; top: -0.15rem; left: 0.1rem; display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; background: #e9f3ec; color: var(--leaf-dark); font-size: 0.68rem; }.process-chain li:not(:last-child)::after { content: "→"; position: absolute; top: 1.45rem; right: -0.6rem; z-index: 2; color: var(--sun); font-size: 1.4rem; font-weight: 500; }.process-symbol { display: grid; width: clamp(3.5rem, 5.2vw, 4.8rem); aspect-ratio: 1; place-items: center; border-radius: 50%; background: #eaf4ed; }.process-symbol img { display: block; width: 47%; height: 47%; }
.dataway-placeholder-copy { max-width: 47rem; margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--muted); }.dataway-placeholder-copy h3 { margin: 0 0 0.9rem; color: var(--ink); font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.025em; line-height: 1.2; }.dataway-placeholder-copy p { margin: 0; }.dataway-placeholder-copy p + p { margin-top: 1rem; }
.document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.document-card { min-height: 16.5rem; display: flex; flex-direction: column; padding: 1.45rem; border: 1px solid #dce8df; border-radius: 0.8rem; background: white; box-shadow: var(--shadow); }.document-icon { display: grid; width: 2.9rem; height: 2.9rem; place-items: center; margin-bottom: 1.5rem; border-radius: 50%; background: #e3f1e6; }.document-icon img { display: block; width: 1.45rem; height: 1.45rem; }.document-card h2 { margin-bottom: 0.55rem; font-size: 1.3rem; }.document-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }.document-status { display: inline-flex; align-self: start; margin-top: auto; padding-top: 1.25rem; color: var(--leaf-dark); font-size: 0.88rem; font-weight: 750; text-decoration: none; }.document-status:hover, .document-status:focus-visible { color: var(--leaf); text-decoration: underline; }.insights-section { background: linear-gradient(135deg, #edf6ef, #f8faf5); }.insights-intro { max-width: 47rem; margin: 0; color: var(--muted); font-size: 1.05rem; }.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.insight-card { min-height: 19rem; display: flex; flex-direction: column; padding: 1.4rem; border-radius: 0.8rem; background: var(--ink); color: white; text-decoration: none; box-shadow: 0 0.8rem 1.6rem rgb(7 60 57 / 12%); transition: transform 160ms ease, box-shadow 160ms ease; }.insight-card:hover, .insight-card:focus-visible { transform: translateY(-0.2rem); box-shadow: 0 1rem 2rem rgb(7 60 57 / 18%); }.insight-card:nth-child(2) { background: #0b6256; }.insight-card:nth-child(3) { background: #176f62; }.insight-icon { display: grid; width: 2.9rem; height: 2.9rem; place-items: center; margin-bottom: auto; border: 1px solid rgb(255 255 255 / 36%); border-radius: 50%; background: white; }.insight-icon img { display: block; width: 1.45rem; height: 1.45rem; }.insight-card-content { display: grid; gap: 0.65rem; }.insight-title { font-size: 1.2rem; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; }.insight-description { color: rgb(255 255 255 / 83%); font-size: 0.9rem; line-height: 1.5; }.insight-note { color: #dceeb2; font-size: 0.9rem; font-weight: 700; }.card-arrow { margin-top: 0.75rem; color: #dceeb2; font-size: 1.35rem; }
.page-intro { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); background: linear-gradient(120deg, #e6f1e9, #f7f8ef); border-bottom: 1px solid var(--line); }.page-intro h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.about-page-title { max-width: 18ch; }.about-statement { max-width: 47rem; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--leaf-dark); font-size: clamp(1.08rem, 1.8vw, 1.2rem); font-weight: 650; line-height: 1.5; }.about-section-heading { max-width: 48rem; }.about-section-heading p { margin-bottom: 0; color: var(--muted); }.about-partners { background: #fbfcf8; }.about-partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.about-partner-card { display: flex; min-height: 28rem; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--surface); box-shadow: 0 0.35rem 1rem rgb(23 54 50 / 5%); }.partner-mark { margin: 0 0 1.45rem; color: var(--leaf); font-size: 0.8rem; font-weight: 850; letter-spacing: 0.1em; line-height: 1; }.about-partner-card h3 { margin: 0 0 0.5rem; color: var(--ink); font-size: 1.2rem; letter-spacing: -0.025em; line-height: 1.2; }.about-partner-card p { margin: 0; color: var(--muted); font-size: 0.93rem; }.about-partner-card p + p { margin-top: 1rem; }.about-partner-card .partner-subtitle { margin-top: 0; color: var(--leaf-dark); font-size: 0.9rem; font-weight: 700; }.about-partner-card .partner-role { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line); }.about-partner-card .partner-role p { margin: 0; }.about-partner-card .partner-role-label { color: var(--muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }.about-partner-card .partner-role-text { margin-top: 0.3rem !important; color: var(--leaf-dark); font-size: 0.9rem; font-weight: 700; line-height: 1.45; }.about-funding { padding: clamp(3rem, 6vw, 4.5rem) 0; background: linear-gradient(120deg, #e9f3ec, #f8faf5); }.about-funding-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16.25rem, 18rem); align-items: center; gap: clamp(2rem, 5vw, 4rem); }.about-funding-copy { max-width: 44rem; }.about-funding h2 { max-width: 33rem; }.about-funding-copy p { margin-bottom: 0; color: var(--muted); }.about-funding-copy .funding-period { margin-top: 1.25rem; }.funding-period-label { color: var(--muted) !important; font-size: 0.78rem !important; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }.funding-period-value { margin-top: 0.2rem !important; color: var(--leaf-dark) !important; font-weight: 700; }.about-funding-logo { display: grid; justify-self: end; width: min(100%, 18rem); place-items: center; padding: 0.75rem; border: 1px solid #d9e7dd; border-radius: 0.8rem; background: white; }.about-funding-logo img { display: block; width: min(100%, 18rem); height: auto; max-height: 4rem; object-fit: contain; }
.contact-intro-followup { max-width: 42rem; margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; }.contact-section { background: #fbfcf8; }.contact-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.contact-card { display: flex; min-width: 0; min-height: 29rem; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--surface); box-shadow: 0 0.35rem 1rem rgb(23 54 50 / 5%); }.contact-mark { margin: 0 0 1.45rem; color: var(--leaf); font-size: 0.8rem; font-weight: 850; letter-spacing: 0.1em; line-height: 1; }.contact-card h2 { margin: 0 0 1.2rem; font-size: 1.25rem; }.contact-details { display: grid; gap: 1.1rem; }.contact-detail p, .contact-detail address { margin: 0; }.contact-detail-label { color: var(--muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }.contact-detail-value { margin-top: 0.25rem !important; color: var(--ink); font-size: 0.93rem; font-style: normal; line-height: 1.5; }.contact-email-group { display: flex; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line); }.contact-email-action { display: inline-flex; align-items: center; align-self: start; gap: 0.5rem; padding: 0; border: 0; background: transparent; color: var(--leaf-dark); cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 750; text-decoration: none; }.contact-email-action img { display: block; width: 1.1rem; height: 1.1rem; }.contact-email-action:hover, .contact-email-action:focus-visible { color: var(--leaf); text-decoration: underline; }.contact-note { max-width: 47rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--muted); }.contact-note p { margin: 0; }.contact-note p + p { margin-top: 0.45rem; }.contact-note-title { color: var(--leaf-dark); font-size: 1.05rem; font-weight: 700; }
.workshop-statement { max-width: 47rem; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--leaf-dark); font-size: clamp(1.08rem, 1.8vw, 1.2rem); font-weight: 650; line-height: 1.5; }.workshop-concept { background: #fbfcf8; }.workshop-section-heading { max-width: 48rem; }.workshop-section-heading p { margin-bottom: 0; color: var(--muted); }.workshop-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; list-style: none; }.workshop-step { min-width: 0; min-height: 19rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--surface); box-shadow: 0 0.35rem 1rem rgb(23 54 50 / 5%); }.workshop-step-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.45rem; }.workshop-step-number { color: var(--leaf); font-size: 0.8rem; font-weight: 850; letter-spacing: 0.1em; }.workshop-step-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: 50%; background: #e3f1e6; }.workshop-step-icon img { display: block; width: 1.35rem; height: 1.35rem; }.workshop-step h3 { margin: 0 0 0.65rem; color: var(--ink); font-size: 1.3rem; letter-spacing: -0.025em; line-height: 1.2; }.workshop-step p { margin: 0; color: var(--muted); font-size: 0.93rem; }.workshop-research { background: #fdfdf9; }.workshop-research-content { max-width: 48rem; }.workshop-research-statement { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--leaf-dark); font-size: clamp(1.08rem, 1.8vw, 1.2rem); font-weight: 650; line-height: 1.5; }.workshop-research-intro, .workshop-research-conclusion { margin-bottom: 0; color: var(--muted); }.workshop-question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.25rem; padding: 0; margin: 2rem 0; list-style: none; }.workshop-question-grid li { padding-left: 0.85rem; border-left: 2px solid #b9d7c2; color: var(--ink); font-weight: 650; line-height: 1.45; }
.workshop-stations { background: #eef5ef; }.workshop-stations-heading { max-width: 48rem; }.workshop-stations-heading p { margin-bottom: 0; color: var(--muted); }.workshop-station-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.workshop-station { display: flex; min-width: 0; min-height: 16.5rem; flex-direction: column; padding: 1.3rem; border: 1px solid #d5e3d9; border-radius: 0.8rem; background: rgb(255 255 255 / 84%); }.workshop-station-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }.workshop-station-number { color: var(--leaf); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.1em; }.workshop-station-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; background: #e3f1e6; }.workshop-station-icon img { display: block; width: 1.15rem; height: 1.15rem; }.workshop-station h3 { margin: 0 0 0.35rem; color: var(--ink); font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; }.workshop-station p { margin: 0; color: var(--muted); font-size: 0.9rem; }.workshop-station .workshop-station-subtitle { margin-bottom: 0.9rem; color: var(--leaf-dark); font-size: 0.88rem; font-weight: 700; }
.workshop-materials { background: #fdfdf9; }.workshop-materials-heading { max-width: 48rem; }.workshop-materials-heading p { margin-bottom: 0; color: var(--muted); }.workshop-material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }.workshop-material-group { min-width: 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--surface); scroll-margin-top: 6rem; }.workshop-material-group-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; margin-bottom: 1.25rem; }.workshop-material-icon { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; background: #e3f1e6; }.workshop-material-icon img { display: block; width: 1.15rem; height: 1.15rem; }.workshop-material-group h3 { margin: 0 0 0.35rem; color: var(--ink); font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; }.workshop-material-group-heading p { margin: 0; color: var(--muted); font-size: 0.9rem; }.workshop-material-list { padding: 0; margin: 0; list-style: none; }.workshop-material-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid #e3ece5; color: var(--ink); font-size: 0.92rem; }.workshop-material-status, .workshop-material-pending { color: var(--leaf-dark); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }.workshop-material-pending { margin: 0; padding-top: 0.8rem; border-top: 1px solid #e3ece5; }
.sensorbox-statement { max-width: 47rem; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--leaf-dark); font-size: clamp(1.08rem, 1.8vw, 1.2rem); font-weight: 650; line-height: 1.5; }.sensorbox-overview { background: #fbfcf8; }.sensorbox-overview-heading { max-width: 48rem; }.sensorbox-overview-heading p { margin-bottom: 0; color: var(--muted); }.sensorbox-function-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }.sensorbox-function { min-width: 0; min-height: 14rem; padding: 1.2rem; border: 1px solid #d7e5db; border-top: 3px solid #7eb19a; border-radius: 0.65rem; background: rgb(255 255 255 / 78%); }.sensorbox-function-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }.sensorbox-function-number { color: var(--leaf); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.1em; }.sensorbox-function-icon { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: #e3f1e6; }.sensorbox-function-icon img { display: block; width: 1.1rem; height: 1.1rem; }.sensorbox-function h3 { margin: 0 0 0.55rem; color: var(--ink); font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.2; }.sensorbox-function p { margin: 0; color: var(--muted); font-size: 0.89rem; }.sensorbox-mobile { background: #fdfdf9; }.sensorbox-mobile-content { max-width: 48rem; }.sensorbox-mobile-content p { margin-bottom: 0; color: var(--muted); }.sensorbox-mobile-content p + p { margin-top: 1rem; }.sensorbox-mobile-content .sensorbox-mobile-conclusion { margin-top: clamp(1.5rem, 3vw, 2rem); padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--leaf-dark); font-size: clamp(1.08rem, 1.8vw, 1.2rem); font-weight: 650; line-height: 1.5; }
.sensorbox-lessons { background: #f2f7f1; }.sensorbox-lessons-heading { max-width: 48rem; }.sensorbox-lessons-heading p { margin-bottom: 0; color: var(--muted); }.sensorbox-lessons-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 5rem); row-gap: 0; }.sensorbox-lesson { min-width: 0; padding: 1.5rem 0; border-top: 1px solid #cfe0d4; }.sensorbox-lesson:nth-child(-n + 2) { padding-top: 0; border-top: 0; }.sensorbox-lesson h3 { margin: 0 0 0.55rem; color: var(--ink); font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; }.sensorbox-lesson p { max-width: 35rem; margin: 0; color: var(--muted); font-size: 0.93rem; }.sensorbox-lessons-conclusion { max-width: 48rem; margin: clamp(2rem, 4vw, 3rem) 0 0; padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--leaf-dark); font-size: clamp(1.08rem, 1.8vw, 1.2rem); font-weight: 650; line-height: 1.5; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }.content-card { min-height: 14rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }.content-card h2 { font-size: 1.35rem; }.content-card p:last-child { margin-bottom: 0; color: var(--muted); }.placeholder-card { border-style: dashed; }.card-icon { display: inline-grid; width: 2.65rem; height: 2.65rem; place-items: center; margin-bottom: 1.7rem; border-radius: 0.5rem; background: #e7f0e9; color: var(--leaf-dark); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.06em; }.card-kicker { margin-bottom: 2rem; color: var(--sun); font-size: 0.8rem; font-weight: 850; }.dashboard-card { display: flex; min-height: 17rem; flex-direction: column; }.dashboard-placeholder { display: block; height: 4.5rem; margin-bottom: 1.7rem; border-radius: 0.5rem; background: repeating-linear-gradient(90deg, #e4eee7 0 1.2rem, transparent 1.2rem 1.8rem), linear-gradient(135deg, transparent 45%, #83aa9a 46% 48%, transparent 49%) center / 100% 100%, #f4f8f4; }
.legal-content { max-width: 47rem; }.legal-content section + section { margin-top: 2rem; }.legal-content h2 { margin-bottom: 0.65rem; }.legal-content p, .legal-content address { margin: 0; font-style: normal; }.site-footer { border-top: 1px solid var(--line); background: #eaf1ec; }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; color: var(--muted); font-size: 0.9rem; }.footer-inner p { margin: 0; }.footer-nav { display: flex; gap: 1rem; }.footer-nav a { color: var(--muted); text-decoration: none; }.footer-nav a:hover, .footer-nav a:focus-visible, .footer-nav a[aria-current="page"] { color: var(--leaf-dark); text-decoration: underline; }.footer-note { text-align: right; }

.project-journey { border-top: 1px solid var(--line); background: #fbfcf8; }.project-journey-heading { max-width: 48rem; }.project-journey-heading p { margin-bottom: 0; color: var(--muted); }.project-timeline { max-width: 52rem; padding: 0; margin: 0; list-style: none; counter-reset: project-timeline; }.project-timeline li { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; counter-increment: project-timeline; }.project-timeline li::before { z-index: 1; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: #e3f1e6; color: var(--leaf-dark); content: counter(project-timeline, decimal-leading-zero); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.08em; }.project-timeline li:not(:last-child)::after { position: absolute; top: 2.5rem; bottom: 0; left: 1.2rem; width: 1px; background: #bfd8c6; content: ""; }.project-timeline-entry { min-width: 0; padding: 0 0 2rem; }.project-timeline li:last-child .project-timeline-entry { padding-bottom: 0; }.project-timeline-label { margin: 0 0 0.35rem; color: var(--leaf); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }.project-timeline-entry h3 { margin: 0 0 0.55rem; color: var(--ink); font-size: clamp(1.12rem, 2vw, 1.3rem); letter-spacing: -0.025em; line-height: 1.2; }.project-timeline-entry p:last-child { max-width: 44rem; margin: 0; color: var(--muted); font-size: 0.94rem; }.project-figures { max-width: 60rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid #cfe0d4; }.project-figures h3 { margin: 0 0 1.2rem; color: var(--ink); font-size: clamp(1.2rem, 2.3vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.2; }.project-figures-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; }.project-figures-list div { min-width: 0; padding-left: 1rem; border-left: 2px solid #9cc7a9; }.project-figures-list dt { color: var(--leaf-dark); font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }.project-figures-list dd { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }.project-journey-conclusion { max-width: 48rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--leaf-dark); font-size: clamp(1.08rem, 1.8vw, 1.2rem); font-weight: 650; line-height: 1.5; }

@media (max-width: 62rem) { .process-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2rem; }.process-chain li::after { display: none; }.document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.about-partner-grid, .contact-card-grid, .workshop-process, .workshop-station-grid, .sensorbox-function-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 45rem) { .header-inner { min-height: 4.25rem; }.menu-toggle { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 0.45rem; background: white; color: var(--ink); cursor: pointer; }.menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after { display: block; width: 1.2rem; height: 2px; background: currentColor; transition: transform 160ms ease; }.menu-toggle-icon { position: relative; }.menu-toggle-icon::before, .menu-toggle-icon::after { position: absolute; left: 0; content: ""; }.menu-toggle-icon::before { top: -0.4rem; }.menu-toggle-icon::after { top: 0.4rem; }.menu-toggle[aria-expanded="true"] .menu-toggle-icon { background: transparent; }.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { transform: translateY(0.4rem) rotate(45deg); }.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { transform: translateY(-0.4rem) rotate(-45deg); }.site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; padding: 0.7rem max(1.25rem, calc((100% - 72rem) / 2)); border-bottom: 1px solid var(--line); background: white; box-shadow: 0 1rem 1.5rem rgb(23 54 50 / 8%); }.site-nav.is-open { display: block; }.site-nav ul { display: block; }.site-nav a { padding: 0.75rem; }.project-banner-inner { align-items: center; flex-direction: row; gap: 1rem; }.project-banner-copy { min-width: 0; flex: 1 1 auto; }.project-logos { width: auto; flex: none; justify-content: end; }.project-logos img { width: clamp(8rem, 34vw, 10.5rem); height: 3.35rem; }.hero-grid { grid-template-columns: 1fr; }.card-grid { grid-template-columns: 1fr; }.content-card { min-height: auto; }.footer-inner { display: block; }.footer-nav { margin-top: 0.4rem; }.footer-note { margin-top: 0.3rem !important; text-align: left; }.process-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }.process-chain li::after { display: none; } }
@media (max-width: 22rem) { .project-banner-inner { align-items: start; flex-direction: column; }.project-logos { width: 100%; justify-content: start; }.project-logos img { width: min(100%, 10.5rem); } }
@media (max-width: 45rem) { .measurement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.measurement-card { min-height: 10.5rem; padding: 1.1rem; }.document-grid { grid-template-columns: 1fr; }.document-card { min-height: 0; }.insight-grid { grid-template-columns: 1fr; }.insight-card { min-height: 12.5rem; }.about-partner-grid, .about-funding-inner, .contact-card-grid, .workshop-process, .workshop-question-grid, .workshop-station-grid, .workshop-material-grid, .sensorbox-function-grid { grid-template-columns: 1fr; }.about-partner-card, .contact-card, .workshop-step, .workshop-station, .sensorbox-function { min-height: 0; }.about-funding-logo { justify-self: start; width: min(100%, 16rem); }.workshop-material-list li { align-items: start; flex-direction: column; gap: 0.2rem; }.workshop-material-status { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }
@media (max-width: 45rem) { .sensorbox-lessons-grid { grid-template-columns: 1fr; }.sensorbox-lesson:nth-child(-n + 2) { padding-top: 1.5rem; border-top: 1px solid #cfe0d4; }.sensorbox-lesson:first-child { padding-top: 0; border-top: 0; } }
@media (max-width: 45rem) { .project-timeline li { grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0.75rem; }.project-timeline li::before { width: 2.25rem; height: 2.25rem; }.project-timeline li:not(:last-child)::after { top: 2.25rem; left: 1.05rem; }.project-figures-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .project-figures-list { grid-template-columns: 1fr; } }
@media (max-width: 56rem) { .hero-image { min-height: 0; aspect-ratio: 3 / 2; }.hero-image img { object-fit: contain; } }
.homepage { --home-section-space: clamp(3.5rem, 7vw, 6rem); --home-section-space-compact: clamp(2.5rem, 5vw, 4rem); --home-content-space: clamp(1.75rem, 4vw, 3rem); }.homepage > .section { padding-block: var(--home-section-space); }.homepage > .station-section { padding-bottom: var(--home-section-space-compact); }.homepage > .process-section { padding-block: var(--home-section-space-compact); }.homepage > .insights-section { padding-top: var(--home-section-space-compact); }.homepage > .project-introduction { padding-bottom: var(--home-section-space-compact); }.homepage > .project-journey { padding-top: var(--home-section-space-compact); border-top: 0; }.homepage .project-figures { margin-top: var(--home-content-space); padding-top: 0; border-top: 0; }.homepage .project-journey-conclusion { margin-top: var(--home-content-space); }
.homepage > .booklet-section { padding-top: var(--home-section-space-compact); }
@media (max-width: 45rem) { .homepage { --home-section-space: clamp(3rem, 10vw, 4rem); --home-section-space-compact: clamp(2.25rem, 8vw, 3rem); --home-content-space: clamp(1.5rem, 6vw, 2.25rem); } }
.build-measure-understand { background: #fbfcf8; }.build-measure-understand-heading .eyebrow { color: var(--booklet-turquoise); }.build-measure-understand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; list-style: none; }.build-measure-understand-item { min-width: 0; }.build-measure-understand-card { --accent: var(--booklet-pink); position: relative; display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; border: 1px solid var(--line); border-top: 0.45rem solid var(--accent); border-radius: 0.8rem; background: var(--surface); box-shadow: 0 0.35rem 1rem rgb(23 54 50 / 5%); }.build-measure-understand-item:nth-child(2) .build-measure-understand-card { --accent: var(--booklet-blue); }.build-measure-understand-item:nth-child(3) .build-measure-understand-card { --accent: var(--booklet-orange); }.build-measure-understand-card::after { position: absolute; top: -2.75rem; right: -2.75rem; width: 8rem; height: 8rem; border-radius: 50%; background: var(--accent); content: ""; opacity: 0.13; }.build-measure-understand-number { position: relative; z-index: 1; display: inline-grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 2px solid var(--accent); border-radius: 0.5rem; background: var(--surface); color: var(--ink); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.08em; }.build-measure-understand-card h3 { position: relative; z-index: 1; margin: 1.75rem 0 0.55rem; color: var(--ink); font-size: clamp(1.45rem, 2.5vw, 1.8rem); letter-spacing: -0.035em; line-height: 1.1; }.build-measure-understand-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); }.build-measure-understand-card a { position: relative; z-index: 1; align-self: start; color: var(--ink); font-size: 0.92rem; font-weight: 750; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }.build-measure-understand-card a:hover, .build-measure-understand-card a:focus-visible { color: var(--leaf-dark); text-decoration-color: currentColor; }
/* Gleiche Kartenhöhe auf breiten Layouts; die Links bleiben am Kartenfuß. */
.build-measure-understand-item { display: flex; }.build-measure-understand-card { flex: 1; }.build-measure-understand-card a { margin-top: auto; }
.build-measure-understand { position: relative; isolation: isolate; overflow: hidden; }.build-measure-understand::before { position: absolute; z-index: 0; top: 6rem; right: -8rem; width: 25rem; height: 16rem; border-radius: 67% 33% 58% 42% / 31% 58% 42% 69%; background: var(--booklet-turquoise); content: ""; opacity: 0.09; pointer-events: none; transform: rotate(-13deg); }.build-measure-understand > .container { position: relative; z-index: 1; }
@media (max-width: 45rem) { .build-measure-understand-grid { grid-template-columns: 1fr; }.build-measure-understand-card h3 { margin-top: 1.25rem; }.build-measure-understand::before { top: 3.5rem; right: -6rem; width: 14rem; height: 11rem; } }
.booklet-section { border-top: 1px solid var(--line); background: var(--surface); }.booklet-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }.booklet-cover-link { display: block; justify-self: center; width: min(100%, 22rem); overflow: hidden; border-radius: 0.8rem; box-shadow: 0 1rem 2rem rgb(26 25 25 / 14%); }.booklet-cover-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 0.3rem; }.booklet-cover-link img { display: block; width: 100%; height: auto; }.booklet-copy { max-width: 38rem; }.booklet-eyebrow { padding-left: 0.75rem; border-left: 3px solid var(--booklet-turquoise); }.booklet-copy h2 { max-width: 18ch; }.booklet-copy > p:not(.eyebrow) { max-width: 42rem; margin-bottom: 0; color: var(--muted); font-size: clamp(1.03rem, 1.7vw, 1.15rem); }.booklet-download { display: inline-flex; align-items: center; min-height: 2.9rem; margin-top: 1.75rem; padding: 0.65rem 1rem; border-radius: 0.5rem; background: var(--leaf-dark); box-shadow: inset 0 -0.2rem 0 var(--booklet-orange); color: var(--surface); font-weight: 750; text-decoration: none; }.booklet-download:hover, .booklet-download:focus-visible { background: var(--leaf); }.booklet-download:focus-visible { outline: 3px solid var(--ink); outline-offset: 0.25rem; }
@media (max-width: 45rem) { .booklet-layout { grid-template-columns: 1fr; gap: 2rem; }.booklet-cover-link { width: min(100%, 19rem); justify-self: start; } }
.booklet-resource { max-width: 47rem; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-left: 3px solid var(--booklet-turquoise); border-radius: 0.8rem; background: var(--surface); }.booklet-resource h3 { margin: 0 0 0.55rem; color: var(--ink); font-size: clamp(1.08rem, 2vw, 1.25rem); letter-spacing: -0.02em; line-height: 1.2; }.booklet-resource p { margin: 0; color: var(--muted); }.booklet-resource a { display: inline-flex; margin-top: 0.9rem; color: var(--leaf-dark); font-size: 0.92rem; font-weight: 750; text-decoration-color: var(--booklet-turquoise); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }.booklet-resource a:hover, .booklet-resource a:focus-visible { color: var(--leaf); text-decoration-color: currentColor; }
.sensorbox-overview-intro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); margin-bottom: clamp(2rem, 4vw, 3rem); }.sensorbox-overview-intro .section-heading { margin-bottom: 0; }.sensorbox-photo { margin: 0; }.sensorbox-photo img { display: block; width: 100%; height: auto; border-radius: 0.8rem; }.sensorbox-photo figcaption { margin-top: 0.65rem; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }.sensorbox-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }.sensorbox-construction-photo { width: min(100%, 42rem); margin: clamp(2rem, 4vw, 3rem) 0 0 auto; }.sensorbox-visual-detail { padding-bottom: clamp(3.5rem, 7vw, 6rem); }.sensorbox-interior-photo { max-width: 66rem; }.sensorbox-display-photo { width: min(100%, 29rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0 auto; }.sensorbox-final-visual { padding-bottom: clamp(3.5rem, 7vw, 6rem); }.sensorbox-final-photo { width: min(100%, 56rem); margin-inline: auto; }
@media (max-width: 62rem) { .sensorbox-overview-intro { grid-template-columns: 1fr; }.sensorbox-overview-photo { width: min(100%, 42rem); }.sensorbox-photo-pair { grid-template-columns: 1fr; }.sensorbox-construction-photo, .sensorbox-display-photo { margin-left: 0; } }
@media (max-width: 45rem) { .sensorbox-overview-intro { gap: 1.5rem; }.sensorbox-photo-pair { gap: 1.5rem; }.sensorbox-visual-detail, .sensorbox-final-visual { padding-bottom: clamp(3rem, 10vw, 4rem); } }
.sensorbox-overview { padding-bottom: clamp(3rem, 6vw, 4.5rem); }.sensorbox-electronics { margin-top: clamp(2rem, 4vw, 3rem); }.sensorbox-editorial-copy { max-width: 44rem; }.sensorbox-editorial-copy h3 { margin: 0 0 0.65rem; color: var(--ink); font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.025em; line-height: 1.2; }.sensorbox-editorial-copy p { margin: 0; color: var(--muted); }.sensorbox-electronics .sensorbox-photo-pair { margin-top: clamp(1.5rem, 3vw, 2rem); }.sensorbox-construction { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }.sensorbox-construction .sensorbox-construction-photo { width: auto; margin: 0; }.sensorbox-mobile { padding-top: clamp(3rem, 6vw, 4.5rem); }.sensorbox-visual-detail { padding-bottom: clamp(2rem, 4vw, 3rem); }.sensorbox-display-detail { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }.sensorbox-display-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }.sensorbox-display-layout h2 { margin-bottom: 0.75rem; }.sensorbox-display-layout .sensorbox-display-photo { width: auto; margin: 0; }.sensorbox-lessons { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 62rem) { .sensorbox-construction, .sensorbox-display-layout { grid-template-columns: 1fr; }.sensorbox-construction .sensorbox-construction-photo, .sensorbox-display-layout .sensorbox-display-photo { width: min(100%, 42rem); } }

/* Neutrale Grundflächen und Standardkarten der Schwarz-Weiß-Basis. */
.hero, .page-intro { background: #ffffff; }
.intro-placeholder { border-left-color: var(--ink); background: #fafafa; }
.station-section, .project-journey, .about-partners, .about-funding, .contact-section, .workshop-concept, .workshop-research, .workshop-stations, .workshop-materials, .sensorbox-overview, .sensorbox-mobile, .sensorbox-lessons { background: #fafafa; }
.measurement-card, .document-card, .workshop-station, .about-funding-logo { border-color: var(--line); }
.measurement-card::after, .measurement-symbol, .document-icon, .workshop-step-icon, .workshop-station-icon, .workshop-material-icon, .card-icon, .project-timeline li::before { background: #f5f5f5; }
.workshop-question-grid li, .workshop-material-list li, .workshop-material-pending, .sensorbox-lesson, .project-figures { border-color: var(--line); }
.workshop-station { background: var(--surface); }
.about-partner-card, .contact-card, .workshop-step { box-shadow: 0 0.35rem 1rem rgb(26 25 25 / 5%); }
.project-timeline li:not(:last-child)::after { background: var(--line); }
.project-figures-list div { border-left-color: var(--ink); }

/* Bereiche mit eigener Farbentscheidung bleiben bis zu den Folgeschritten unverändert. */
.booklet-section {
  --ink: #1a1919;
  --muted: #4b4948;
  --line: #e5e5e5;
  --leaf: #1a1919;
  --leaf-dark: #1a1919;
}
.booklet-section {
  --shadow: 0 0.75rem 2rem rgb(26 25 25 / 8%);
}

@media (min-width: 45.001rem) and (max-width: 56rem), (max-width: 45rem) {
  .site-nav { box-shadow: 0 1rem 1.5rem rgb(26 25 25 / 8%); }
}

/* Booklet-Akzente im Arbeitsablauf auf der Startseite. */
.build-measure-understand-heading .eyebrow { color: var(--ink); }
.build-measure-understand-card { --accent: var(--booklet-blue); --accent-pastel: var(--booklet-blue-pastel); box-shadow: 0 0.35rem 1rem rgb(26 25 25 / 5%); }
.build-measure-understand-item:nth-child(2) .build-measure-understand-card { --accent: var(--booklet-pink); --accent-pastel: var(--booklet-pink-pastel); }
.build-measure-understand-item:nth-child(3) .build-measure-understand-card { --accent: var(--booklet-orange); --accent-pastel: var(--booklet-orange-pastel); }
.build-measure-understand-card::after { background: var(--accent-pastel); opacity: 1; }
.build-measure-understand::before { background: var(--booklet-turquoise-pastel); opacity: 0.75; }


/* Förderung und Footer in der neutralen Grundgestaltung. */
.project-banner { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f5f5f5; color: var(--ink); }
.site-footer { background: #f5f5f5; }

/* Technischer Datenweg in der ergänzenden Türkis-Farbwelt. */
.process-chain li::before { border: 1px solid var(--booklet-turquoise); background: var(--booklet-turquoise-pastel); color: var(--ink); }
.process-chain li:not(:last-child)::after { color: var(--booklet-turquoise); }
.process-symbol { background: var(--booklet-turquoise-pastel); }
.process-symbol img { filter: brightness(0) saturate(100%); }

/* Allgemeine Karten behalten neutrale Flächen; technische Funktionskarten werden türkis akzentuiert. */
.measurement-symbol img, .document-icon img, .workshop-step-icon img, .workshop-station-icon img, .workshop-material-icon img, .sensorbox-function-icon img, .insight-icon img { filter: brightness(0) saturate(100%); }
.sensorbox-function { border-color: var(--line); border-top-color: var(--booklet-turquoise); background: var(--surface); }
.sensorbox-function-number { color: var(--ink); }
.sensorbox-function-icon { background: var(--booklet-turquoise-pastel); }

/* Auswertungs- und Hinweisbereiche als neutrale Karten. */
.insights-section { background: #fafafa; }
.insight-card, .insight-card:nth-child(2), .insight-card:nth-child(3) { border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.insight-card:hover { box-shadow: 0 1rem 2rem rgb(26 25 25 / 12%); }
.insight-card:focus-visible { outline: 3px solid var(--booklet-turquoise); outline-offset: 0.25rem; box-shadow: 0 1rem 2rem rgb(26 25 25 / 12%); }
.insight-icon { background: #f5f5f5; }
.insight-description, .insight-note, .card-arrow { color: var(--muted); }

/* Die vorhandene Booklet-Form bleibt angeschnitten, tritt aber weiter zurück. */
.build-measure-understand::before { top: 6.5rem; right: -7rem; width: 21rem; height: 13rem; }
@media (max-width: 45rem) { .build-measure-understand::before { top: 3.5rem; right: -5.5rem; width: 12rem; height: 9.5rem; } }