/* Eigenständiges Website-Layout; Farben und Bedienelemente stammen aus dem Designsystem. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
/* KingComposer bleibt der Inhaltseditor; seine äußeren Raster werden nur hier neutralisiert. */
.website.mj2026-wordpress .kc_row,
.website.mj2026-wordpress .kc-row-container,
.website.mj2026-wordpress .kc-wrap-columns,
.website.mj2026-wordpress .kc_column,
.website.mj2026-wordpress .kc-col-container
	{
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	display: block;
	}
.website.mj2026-wordpress .kc_row::before,
.website.mj2026-wordpress .kc_row::after { display: none; }
.website .empty-state { padding: 60px 0; color: var(--mj26-muted); }
/* Reduzierte Zeitstrahlen für den ersten Überblick auf der Startseite. */
.website .availability-sketch { margin: 0 0 36px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: 36px; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); background: var(--mj26-surface); }
.website .availability-sketch-chart { min-width: 0; align-self: center; }
.website .availability-days, .website .availability-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.website .availability-days { color: var(--mj26-muted); font-size: 13px; text-align: center; margin-bottom: 12px; }
.website .availability-track { padding: 10px 0; background: repeating-linear-gradient(to right, var(--mj26-border) 0 1px, transparent 1px calc(100% / 7)); }
.website .availability-bar { padding: 13px 10px; border-radius: var(--mj26-radius-small); background: var(--mj26-primary-soft); color: var(--mj26-text); font-weight: 700; font-size: 14px; white-space: nowrap; }
.website .availability-bar.is-stadtfest { grid-column: 3 / 6; border-left: 3px solid var(--mj26-primary); }
.website .availability-bar.is-gala { grid-column: 4 / 7; border-left: 3px solid var(--mj26-primary); }
.website .availability-track.is-conflict span { grid-column: 4 / 6; border-top: 3px solid var(--mj26-danger); color: var(--mj26-danger); padding-top: 8px; font-size: 13px; font-weight: 700; }
.website .availability-sketch figcaption strong { display: block; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.website .availability-sketch figcaption p { color: var(--mj26-muted); }
.website .availability-sketch figcaption small { display: block; margin-top: 18px; color: var(--mj26-muted); font-size: 12px; }
@media (max-width: 850px) { .website .availability-sketch { grid-template-columns: 1fr; gap: 24px; padding: 24px; } }
@media (max-width: 450px) { .website .availability-sketch { padding: 18px 12px; } .website .availability-bar { font-size: 11px; padding: 12px 4px; } .website .availability-track.is-conflict span { font-size: 11px; } }
/* Gemeinsame Unterseiten: verständliche Einstiege, Produktansichten und Lesestrecken. */
/* Zwei neue Funktionen stehen früh auf der Startseite und bleiben in beiden Farbmodi lesbar. */
.website .requirements-section { background: var(--mj26-primary-soft); border-block: 1px solid var(--mj26-border); scroll-margin-top: 30px; }
.website .requirements-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.website .requirement-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px,3vw,42px); border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); background: var(--mj26-surface); min-width: 0; }
.website .requirement-label { color: var(--mj26-primary); font-size: 12px; font-weight: 700; letter-spacing: .1em; margin-bottom: 24px; }
.website .requirement-card h3 { font-size: clamp(26px,3vw,38px); line-height: 1.15; margin-bottom: 20px; }
.website .requirement-card > p { color: var(--mj26-muted); }
.website .requirement-context { border-top: 1px solid var(--mj26-border); padding-top: 20px; font-size: 15px; line-height: 1.65; }
.website .requirement-context strong { display: block; color: var(--mj26-text); margin-bottom: 8px; }
.website .requirement-card .text-link { margin-top: auto; padding-block: 12px; min-height: 44px; }
.website .requirement-card .section-note { margin: 10px 0 0; }
@media (max-width: 700px) { .website .requirements-grid { grid-template-columns: minmax(0,1fr); } }
.website .subhero { padding-block: 44px 64px; max-width: 1200px; }
.website .breadcrumb { display: inline-block; color: var(--mj26-muted); margin-bottom: 36px; font-size: 14px; }
/* Seitenpfad und beschrifteter Rückweg bleiben auf schmalen Displays umbrechbar. */
.website .page-navigation { margin-bottom: 36px; font-size: 14px; }
.website .page-navigation ol { display: flex; flex-wrap: wrap; gap: 8px 12px; list-style: none; padding: 0; margin: 0 0 18px; }
.website .page-navigation li { display: flex; gap: 12px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.website .page-navigation li + li::before { content: '›'; color: var(--mj26-muted); }
.website .page-navigation [aria-current] { color: var(--mj26-muted); }
.website .page-navigation a { text-decoration: underline; text-underline-offset: 3px; }
.website .page-up { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius); background: var(--mj26-surface); color: var(--mj26-text); font-weight: 600; }
.website .page-up-bottom { margin-top: 32px; margin-bottom: 48px; }
.website .page-up:hover { border-color: currentColor; }
.website .page-up:focus-visible, .website .page-navigation a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.website .subhero h1 { font-size: clamp(38px, 5.4vw, 74px); max-width: 1000px; margin-bottom: 30px; }
.website .subhero .lead { max-width: 850px; margin: 0; }
.website .detail-section { padding-bottom: 76px; }
.website .detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.website .detail-card { padding: 30px; background: var(--mj26-surface-raised, var(--mj26-surface)); border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); }
.website .detail-card h3 { margin-bottom: 22px; }
.website .detail-card p { color: var(--mj26-muted); }
/* Zwei gleichgewichtige Bilder führen auf der Zielgruppenübersicht in den eigenen Alltag. */
.website .audience-photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
.website .detail-card.audience-photo-card { padding: 0; overflow: hidden; }
.website .audience-photo { display: block; }
.website .audience-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.website .audience-photo-copy { padding: 30px; }
.website .audience-photo-copy h2 { font-size: clamp(1.45rem,2.4vw,2.2rem); }
.website .workcenter-feature { margin-bottom: 60px; }
.website .knowledge-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
.website .knowledge-jump a { border: 1px solid var(--mj26-border); background: var(--mj26-surface-soft); border-radius: var(--mj26-radius); padding: 12px 20px; font-weight: 700; }
.website .knowledge-section { scroll-margin-top: 24px; }
.website .knowledge-section > .lead { margin-bottom: 32px; }
.website .knowledge-news { padding-top: 55px; background: var(--mj26-primary-soft); border-block: 1px solid var(--mj26-border); }
.website #anleitungen-videos .detail-grid, .website #neues .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media(max-width:650px) { .website #anleitungen-videos .detail-grid, .website #neues .detail-grid { grid-template-columns: 1fr; } }
.website .workflow-steps { padding-left: 24px; }
.website .workflow-steps li { margin-block: 16px; }
@media (max-width: 650px) { .website .audience-photo-grid { grid-template-columns: 1fr; } .website .audience-photo-copy { padding: 24px; } }
.website .story-block, .website .about-story { display: grid; grid-template-columns: 1fr 1.1fr; gap: 54px; align-items: center; padding-block: 30px 80px; }
.website .story-block h2, .website .about-story h2 { margin-bottom: 28px; }
.website .about-story > img { width: 100%; border-radius: var(--mj26-radius-large); }
.website .product-figure { margin: 0; min-width: 0; background: var(--mj26-surface); border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); padding: 16px; }
.website .product-figure img { width: 100%; height: auto; border-radius: var(--mj26-radius-small); }
.website .product-figure a { display: block; cursor: zoom-in; }
.website .product-figure figcaption { font-size: 12px; line-height: 1.6; color: var(--mj26-muted); padding-top: 14px; }
.website .portrait-figure { width: min(100%, 380px); justify-self: center; }
.website .scope-note { padding: 32px; background: var(--mj26-primary-soft); border-radius: var(--mj26-radius-large); }
.website .scope-note h2 { font-size: 26px; margin-bottom: 18px; }
.website .next-step { margin-block: 76px; padding: 44px; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); }
.website .next-step h2 { margin-bottom: 24px; }
.website .next-step .actions { flex-wrap: wrap; }
.website .reading { max-width: 850px; padding-bottom: 40px; }
.website .reading section { margin-bottom: 44px; }
.website .reading h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 24px; }
.website .reading .product-figure { margin-block: 40px; }
.website .steps { padding-left: 26px; }
.website .steps li { padding: 16px; }
.website .steps span { display: block; color: var(--mj26-muted); }
.website .tour-nav { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 30px; }
.website .tour-nav a { padding: 10px 16px; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius); font-size: 14px; }
.website .tour-nav a:hover { background: var(--mj26-primary-soft); }
.website .tour-stop { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; padding-block: 65px; border-top: 1px solid var(--mj26-border); }
.website .tour-copy h2 { margin-bottom: 28px; }
.website .feature-grid .feature-detail-link { display: block; width: fit-content; max-width: 100%; margin: 14px 0 0 auto; text-align: right; }
/* Reale Packeinheiten erklären, ohne eine erfundene Produktoberfläche nachzubilden. */
.website .resource-explainer { padding-block: 48px 64px; }
.website .resource-explainer > h2 { margin-bottom: 24px; }
.website .resource-explainer > .lead { max-width: 960px; margin-bottom: 36px; }
.website .resource-explainer .section-note { margin-top: 24px; }
/* Originale Zeitstrahlen bleiben mobil lesbar und innerhalb der Abbildung verschiebbar. */
.website .availability-figure { margin: 0 0 36px; overflow: hidden; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); background: var(--mj26-surface); }
.website .gantt-scroll { overflow-x: auto; }
.website .gantt-scroll:focus-visible { outline: 2px solid var(--mj26-primary); outline-offset: -3px; }
.website .gantt-scroll a { display: block; min-width: 880px; }
.website .gantt-scroll img { display: block; width: 100%; height: auto; }
.website .availability-figure figcaption { display: grid; gap: 10px; padding: 22px 26px; }
.website .availability-figure figcaption strong { font-size: clamp(18px,2vw,24px); }
.website .availability-figure figcaption span, .website .availability-figure figcaption small { color: var(--mj26-muted); }
.website .structure-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-block: 36px; }
.website .structure-layout h3 { margin-bottom: 20px; }
.website .structure-terms dt { font-weight: 700; margin-top: 18px; }
.website .structure-terms dd { margin: 4px 0 0; color: var(--mj26-muted); }
.website .package-diagram { margin: 0; padding: 28px; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); align-self: start; }
.website .package-diagram figcaption { font-weight: 700; margin-bottom: 20px; }
.website .package-root { padding: 20px; background: var(--mj26-primary-soft); border-radius: var(--mj26-radius); }
.website .package-diagram span { display: block; color: var(--mj26-muted); font-size: 13px; }
.website .package-diagram ul { list-style: none; margin: 0 0 20px 18px; padding: 12px 0 0 22px; border-left: 2px solid var(--mj26-border); }
.website .package-diagram li { position: relative; padding: 10px 0; }
.website .package-diagram li::before { content: ''; position: absolute; left: -22px; top: 23px; width: 14px; border-top: 2px solid var(--mj26-border); }
.website .package-diagram small { display: block; color: var(--mj26-muted); }
@media (max-width: 900px)
	{
	.website .structure-layout { grid-template-columns: 1fr; gap: 24px; }
	.website .package-diagram { padding: 20px; }
	}
.website .image-dialog { width: min(1400px, 96vw); max-width: 96vw; max-height: 94vh; padding: 20px; }
.website .image-dialog img { width: auto; max-width: 100%; max-height: 76vh; margin: 16px auto; object-fit: contain; }
.website .image-dialog p { margin: 0; color: var(--mj26-muted); }
@media (max-width: 900px)
	{
	.website .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.website .story-block, .website .about-story, .website .tour-stop { grid-template-columns: 1fr; gap: 30px; }
	}
@media (max-width: 600px)
	{
	.website .detail-grid { grid-template-columns: 1fr; }
	.website .subhero { padding-block: 24px 40px; }
	.website .detail-card, .website .next-step, .website .scope-note { padding: 24px; }
	.website .tour-stop { padding-block: 38px; }
	.website .subhero h1 { overflow-wrap: anywhere; }
	}
.website
	{
	margin: 0;
	background: var(--mj26-surface);
	color: var(--mj26-text);
	font: 16px/1.6 Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	}
.website * { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
.website img { display: block; max-width: 100%; height: auto; }
.website a { color: inherit; text-decoration: none; }
.website button { font: inherit; cursor: pointer; }
.website a:focus-visible, .website button:focus-visible, .website summary:focus-visible { outline: 3px solid var(--mj26-focus); outline-offset: 5px; }
.website .wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.website h1, .website h2, .website h3 { line-height: 1.1; letter-spacing: -.045em; margin: 0; }
.website h2 { font-size: clamp(32px, 3.4vw, 48px); }
.website h3 { font-size: 26px; }
.website p { margin: 0 0 20px; }
.website .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .13em; color: var(--mj26-primary); margin-bottom: 22px; }
.website .preview { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 3.5%; background: var(--mj26-surface-soft); color: var(--mj26-muted); border-bottom: 1px solid var(--mj26-border); font-size: 10px; letter-spacing: .04em; }
.website .preview button { background: none; border: none; color: var(--mj26-text); font-size: 11px; padding: 4px; }
.website .theme-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.website #theme-auto[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; font-weight: 700; }
.website .header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 27px; }
.website .brand { width: 224px; flex-shrink: 0; }
.website #navigation { display: flex; align-items: center; gap: 18px; font-size: 16px; font-weight: 600; }
.website #navigation > a { display: inline-flex; align-items: center; min-height: 44px; }
.website #navigation .mj26-button { font-size: 15px; padding-inline: 16px; white-space: nowrap; }
.website #navigation a:hover { color: var(--mj26-primary); }
.website .mj26-button { font-family: inherit; min-height: 48px; padding: 12px 22px; font-size: 13px; text-decoration: none; gap: 16px; }
.website .is-primary { background: var(--mj26-primary); border-color: var(--mj26-primary); color: var(--mj26-on-primary); }
.website .is-primary:hover { background: var(--mj26-primary-hover); color: var(--mj26-on-primary); }
.website .menu-toggle { display: none; }
.website .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; padding-block: 44px 66px; }
.website h1 { font-size: clamp(52px, 5.7vw, 82px); letter-spacing: -.064em; margin-bottom: 28px; line-height: 1.02; }
.website h1 em { font-style: normal; color: var(--mj26-primary); }
.website .lead { font-size: 23px; line-height: 1.4; letter-spacing: -.02em; }
.website .intro { max-width: 470px; color: var(--mj26-muted); font-size: 16px; line-height: 1.75; }
.website .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 23px; margin-top: 30px; }
.website .text-link { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; }
.website .text-link:hover { color: var(--mj26-primary); text-decoration: underline; text-underline-offset: 5px; }
.website .small-proof { font-size: 11px; color: var(--mj26-muted); margin: 24px 0 0; }
.website .hero-art { position: relative; height: 530px; margin-left: 20px; }
.website .event-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; border-radius: var(--mj26-radius-large); }
.website .photo-caption { position: absolute; top: 15px; left: 15px; color: var(--mj26-on-primary); background: color-mix(in srgb, var(--mj26-on-primary) 12%, var(--mj26-primary-hover) 88%); padding: 3px 9px; font-size: 9px; border-radius: var(--mj26-radius-small); }
.website .floating-shot { position: absolute; width: 300px; bottom: -24px; left: -54px; margin: 0; background: var(--mj26-surface); padding: 15px; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); box-shadow: var(--mj26-shadow-large); }
.website .floating-shot figcaption { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; margin-bottom: 10px; }
.website .floating-shot figcaption span:last-child { margin-left: auto; }
.website .floating-shot img { border-radius: var(--mj26-radius-small); }
.website .floating-shot small { display: block; font-size: 8px; color: var(--mj26-muted); padding-top: 8px; }
.website .live-dot { display: inline-block; width: 6px; height: 6px; background: var(--mj26-success); border-radius: 50%; }
.website .workflow { display: flex; gap: 35px; justify-content: space-between; align-items: center; border-block: 1px solid var(--mj26-border); padding-block: 24px; font-size: 12px; }
.website .workflow > span { font-weight: 700; }
.website .workflow ol { display: flex; gap: 40px; padding: 0; margin: 0; list-style: none; color: var(--mj26-muted); }
.website .workflow li:not(:last-child)::after { content: '→'; padding-left: 40px; color: var(--mj26-border-strong); }
.website .section { padding-block: 92px; }
.website .section-head { display: flex; justify-content: space-between; align-items: end; gap: 55px; margin-bottom: 42px; }
.website .section-head > p { max-width: 340px; color: var(--mj26-muted); font-size: 14px; margin: 0 0 4px; }
.website .audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.website .audience { position: relative; overflow: hidden; padding: 34px; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); background: var(--mj26-primary-soft); }
.website .audience.rent { background: var(--mj26-surface-soft); }
.website .audience-scene { display: block; width: calc(100% + 68px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 25%; margin: -34px -34px 28px; }
.website .number { display: block; font-size: 10px; font-weight: bold; letter-spacing: .12em; color: var(--mj26-muted); margin-bottom: 25px; }
.website .audience h3 { font-size: 34px; margin-bottom: 18px; }
.website .audience p { max-width: 340px; font-size: 14px; color: var(--mj26-muted); position: relative; z-index: 1; }
.website .audience .text-link { margin-top: 8px; position: relative; z-index: 1; }
.website .line-art { position: absolute; right: 15px; bottom: -36px; font-size: 180px; line-height: 1; color: var(--mj26-primary); opacity: .08; }
.website .section-note { font-size: 11px; line-height: 1.7; color: var(--mj26-muted); margin: 20px 0 0; }
.website .feature-section { background: var(--mj26-surface-soft); border-block: 1px solid var(--mj26-border); }
.website .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 40px; }
.website .feature-grid article { padding-top: 20px; border-top: 1px solid var(--mj26-border-strong); }
.website .feature-no { display: block; color: var(--mj26-primary); font-size: 11px; margin-bottom: 18px; }
.website .feature-grid h3 { font-size: 22px; margin-bottom: 14px; letter-spacing: -.025em; }
.website .feature-grid p { font-size: 14px; color: var(--mj26-muted); margin-bottom: 17px; }
.website .tags { font-size: 10px; font-weight: 700; color: var(--mj26-muted); }
.website .spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.website .product-stage { background: var(--mj26-primary-soft); border-radius: var(--mj26-radius-large); padding: 28px 50px 22px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.website .stage-label { font-size: 9px; font-weight: bold; letter-spacing: .12em; margin-bottom: 24px; }
.website .product-stage img { width: 280px; height: 375px; object-fit: cover; object-position: top; border: 7px solid var(--mj26-border-strong); border-radius: var(--mj26-radius-large); box-shadow: var(--mj26-shadow-large); }
.website .product-stage.workplace-stage { margin: 0; padding: 0; background: var(--mj26-surface); border: 1px solid var(--mj26-border); }
.website .workplace-stage a { display: block; width: 100%; cursor: zoom-in; }
.website .workplace-stage img { width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.website .workplace-stage figcaption { padding: 14px 20px; font-size: 11px; color: var(--mj26-muted); }
.website .dispo-intro { padding-block: 10px 70px; }
.website .dispo-intro h2 { margin-bottom: 26px; }
.website .stage-foot { margin-top: 18px; font-size: 10px; color: var(--mj26-muted); }
.website .spotlight h2 { margin-bottom: 26px; }
.website .check-list { list-style: none; padding: 0; margin: 24px 0; font-size: 13px; }
.website .check-list li { padding-block: 8px; }
.website .check-list li::before { content: '✓'; margin-right: 14px; color: var(--mj26-success); font-weight: bold; }
.website #wissen { border-top: 1px solid var(--mj26-border); }
.website .articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.website .article-img { height: 224px; border-radius: var(--mj26-radius); overflow: hidden; background: var(--mj26-primary-soft); margin-bottom: 25px; }
.website .article-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; transition: transform .25s; }
.website .article-img.screenshot { padding: 24px; }
.website .article-img.screenshot img { object-fit: cover; object-position: top left; border-radius: var(--mj26-radius-small); box-shadow: var(--mj26-shadow-large); }
.website .articles a:hover .article-img img { transform: scale(1.025); }
.website .articles .eyebrow { display: block; margin-bottom: 12px; font-size: 9px; }
.website .articles h3 { margin-bottom: 15px; }
.website .articles p { color: var(--mj26-muted); font-size: 14px; }
.website .questions { border-top: 1px solid var(--mj26-border); display: grid; grid-template-columns: .8fr 1fr; gap: 100px; }
.website .questions h2 { margin-bottom: 24px; }
.website .questions p { color: var(--mj26-muted); font-size: 14px; }
.website details { border-bottom: 1px solid var(--mj26-border); padding-block: 18px; }
.website details:first-child { border-top: 1px solid var(--mj26-border); }
.website summary { cursor: pointer; font-weight: 600; font-size: 14px; padding-right: 16px; }
.website details p { margin: 15px 0; }
.website details a { font-size: 13px; color: var(--mj26-primary); text-decoration: underline; }
.website .closing { text-align: center; padding: 60px 30px; background: var(--mj26-primary-soft); border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); }
.website .closing h2 { margin-bottom: 22px; }
.website .closing > p:not(.eyebrow) { font-size: 14px; color: var(--mj26-muted); }
.website .closing .mj26-button { margin-top: 12px; }
.website .footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; padding-block: 55px 25px; }
.website .footer strong { font-size: 24px; color: var(--mj26-primary); letter-spacing: -.06em; }
.website .footer strong span { color: var(--mj26-muted); }
.website .footer p { font-size: 11px; color: var(--mj26-muted); margin-top: 7px; }
.website .footer > div:nth-child(2) { display: flex; gap: 22px; font-size: 12px; align-items: center; }
.website .preview-note { width: 100%; border-top: 1px solid var(--mj26-border); padding-top: 18px; }
.website dialog { width: min(620px, calc(100% - 32px)); max-height: 85vh; padding: 32px; border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius-large); background: var(--mj26-surface); color: var(--mj26-text); box-shadow: var(--mj26-shadow-large); }
.website dialog::backdrop { background: color-mix(in srgb, var(--mj26-text) 55%, transparent); }
.website .dialog-close { display: block; margin: 0 0 24px auto; }
.website dialog h2 { font-size: 34px; margin-bottom: 25px; }
.website dialog h3 { font-size: 21px; margin: 25px 0 12px; }
.website .skip { position: absolute; left: 16px; top: -90px; z-index: 10; background: var(--mj26-surface); padding: 12px; }
.website .skip:focus { top: 10px; }
html[data-theme="dark"] .website .brand { background: var(--mj26-primary-soft); border-radius: var(--mj26-radius-small); padding: 8px; }
@media (max-width: 1050px)
	{
	.website .wrap { width: calc(100% - 56px); }
	.website #navigation { gap: 14px; }
	.website .brand { width: 180px; }
	.website .hero { gap: 35px; }
	.website .hero-art { height: 470px; }
	.website .floating-shot { width: 255px; left: -25px; }
	.website .workflow ol { gap: 18px; }
	.website .workflow li:not(:last-child)::after { padding-left: 18px; }
	.website .spotlight, .website .questions { gap: 45px; }
	}
/* Bei sieben größeren Menüpunkten rechtzeitig auf das ausklappbare Menü wechseln. */
@media (max-width: 1200px)
	{
	.website .header { position: relative; }
	.website .menu-toggle { display: block; border: 1px solid var(--mj26-border); background: var(--mj26-surface); color: var(--mj26-text); border-radius: var(--mj26-radius-small); padding: 10px 16px; min-height: 44px; font-size: 16px; }
	.website #navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 22px; background: var(--mj26-surface); border: 1px solid var(--mj26-border); border-radius: var(--mj26-radius); z-index: 20; box-shadow: var(--mj26-shadow-large); }
	.website #navigation.is-open { display: flex; flex-direction: column; align-items: stretch; font-size: 17px; }
	.website #navigation a { padding: 10px; }
	}
@media (max-width: 780px)
	{
	.website .wrap { width: calc(100% - 40px); }
	.website .preview > span:nth-child(2) { display: none; }
	.website .header { position: relative; padding-block: 22px; }
	.website .brand { width: 190px; }
	.website .hero { grid-template-columns: 1fr; gap: 35px; padding-block: 26px 54px; }
	.website h1 { font-size: clamp(48px, 10vw, 70px); }
	.website .hero-copy { max-width: 590px; }
	.website .lead { font-size: 21px; }
	.website .hero-art { height: 410px; margin-left: 16px; }
	.website .event-photo { object-position: center 43%; }
	.website .floating-shot { width: 245px; left: -16px; bottom: -22px; }
	.website .workflow { align-items: start; flex-direction: column; gap: 14px; }
	.website .workflow ol { width: 100%; justify-content: space-between; gap: 5px; font-size: 11px; }
	.website .workflow li:not(:last-child)::after { padding-left: 10px; }
	.website .section { padding-block: 60px; }
	.website .section-head { flex-direction: column; align-items: start; gap: 22px; margin-bottom: 30px; }
	.website .section-head > p { max-width: 100%; }
	.website .audiences, .website .spotlight, .website .questions { grid-template-columns: 1fr; gap: 26px; }
	.website .audience { padding: 28px; }
	.website .audience-scene { width: calc(100% + 56px); margin: -28px -28px 24px; }
	.website .feature-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	.website .spotlight-copy { order: -1; }
	.website .product-stage { padding-inline: 25px; }
	.website .articles { grid-template-columns: 1fr; gap: 36px; }
	.website .article-img { height: 240px; }
	.website .article-img.screenshot img { object-fit: contain; }
	.website .articles h3 br { display: none; }
	.website .closing { padding: 40px 22px; }
	.website .closing h2 { font-size: 31px; }
	.website .closing .mj26-button { white-space: normal; }
	.website .footer { padding-top: 40px; }
	.website .footer > div:nth-child(2) { flex-wrap: wrap; }
	}
@media (max-width: 390px)
	{
	.website .feature-grid { grid-template-columns: 1fr; }
	.website .actions { gap: 20px; }
	.website .hero-art { height: 370px; }
	.website .eyebrow { font-size: 10px; }
	}
@media (prefers-reduced-motion: reduce)
	{
	html { scroll-behavior: auto; }
	.website * { transition: none !important; }
	}