/* Brauprozess – interaktive Grafik [schwendl_brauprozess]
   Typography is inherited from the site (Crimson Pro), colours follow the Schwendl palette. */

.abm-bp {
	--bp-gold: #ab9160;
	--bp-gold-light: #d6c08f;
	--bp-cream: #f4ecdc;
	--bp-dark: #232a2c;
	--bp-ink: #282f31;
	--bp-muted: #9aa3a6;
	--bp-line: rgba(171, 145, 96, .28);
	color: var(--bp-cream);
	font-family: inherit;
}

/* ---------- board ---------- */
.abm-bp__board { position: relative; }
.abm-bp__scroller { border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); }
.abm-bp__svg {
	display: block;
	width: 100%;
	height: auto;
	font-family: inherit;
}
.abm-bp__hint {
	margin: 0;
	padding: 18px 24px 0;
	font-size: 17px;
	font-style: italic;
	color: var(--bp-muted);
	text-align: center;
}
.abm-bp__hint-mobile { display: none; }

.abm-bp .bp-bg { fill: url(#bp-g-bg); }
.abm-bp .bp-panel { fill: rgba(255, 255, 255, .022); stroke: rgba(171, 145, 96, .2); stroke-width: 1; }
.abm-bp .bp-zone { fill: var(--bp-gold); font-size: 14px; font-weight: 600; letter-spacing: .24em; }
.abm-bp .bp-zone-line { stroke: var(--bp-gold); stroke-width: 1; opacity: .45; }
.abm-bp .bp-num { fill: var(--bp-gold); font-size: 14px; font-weight: 600; letter-spacing: .14em; }
.abm-bp .bp-name { fill: var(--bp-cream); font-weight: 600; transition: fill .2s; }
.abm-bp .bp-note { fill: var(--bp-muted); font-size: 16px; font-style: italic; }
.abm-bp .bp-ingredient-name { fill: var(--bp-gold-light); font-size: 17px; font-style: italic; font-weight: 500; }
.abm-bp .bp-logo { opacity: .95; }

/* equipment */
.abm-bp .bp-steel { fill: url(#bp-g-steel); stroke: #3d4549; stroke-width: 1.2; }
.abm-bp .bp-hood { fill: url(#bp-g-hood); stroke: #3d4549; stroke-width: 1.2; }
.abm-bp .bp-hood-shade { fill: #000; opacity: .08; }
.abm-bp .bp-hatch { fill: url(#bp-g-glass); stroke: #3d4549; stroke-width: 1; }
.abm-bp .bp-ring { fill: #9aa3a8; stroke: #3d4549; stroke-width: 1; }
.abm-bp .bp-base { fill: #353d41; }
.abm-bp .bp-seam { stroke: #5e676c; stroke-width: 1; opacity: .7; }
.abm-bp .bp-glass { fill: url(#bp-g-glass); }
.abm-bp .bp-glass-rim { fill: none; stroke: #3d4549; stroke-width: 1.4; }
.abm-bp .bp-glint { stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .16; }
.abm-bp .bp-surface { fill: none; stroke: #ffe2a3; stroke-width: 1.5; opacity: .7; }
.abm-bp .bp-inner { stroke: #eef1f2; stroke-width: 2; fill: none; stroke-linecap: round; opacity: .85; }
.abm-bp .bp-inner--soft { opacity: .45; stroke-width: 1.5; }
.abm-bp .bp-inner-fill { fill: #eef1f2; opacity: .85; }
.abm-bp .bp-heater { fill: #b9c1c5; opacity: .55; }
.abm-bp .bp-bubble { fill: #fff8e3; opacity: .7; }
.abm-bp .bp-foam { fill: #fbf3df; }
.abm-bp .bp-swirl { stroke: #ffe7b5; stroke-width: 2; fill: none; stroke-linecap: round; opacity: .8; }
.abm-bp .bp-roller { fill: #c3c9cc; stroke: #3d4549; stroke-width: 1.2; }
.abm-bp .bp-floor { fill: url(#bp-g-floor); }
.abm-bp .bp-ladder line { stroke: #7c868b; stroke-width: 1.4; }
.abm-bp .bp-spray { stroke: #8ec5e2; stroke-width: 2; stroke-linecap: round; opacity: .9; }
.abm-bp .bp-bottle { fill: url(#bp-g-bottle); stroke: #2a1806; stroke-width: .8; }
.abm-bp .bp-bottle--empty { fill: #b8a47f; fill-opacity: .35; stroke: #d8cdb6; stroke-opacity: .7; }
.abm-bp .bp-bottle-shine { stroke: #fff; stroke-width: 1.2; stroke-linecap: round; opacity: .28; }
.abm-bp .bp-bottle-label { fill: var(--bp-cream); }
.abm-bp .bp-crown, .abm-bp .bp-crown-big { fill: var(--bp-gold); }
.abm-bp .bp-crate { fill: #a3151b; stroke: #6d0e12; stroke-width: 1; }
.abm-bp .bp-pallet { fill: #7a5f39; }
.abm-bp .bp-panel-strip { fill: #2c3438; }
.abm-bp .bp-ingredient { fill: #1b2123; stroke: var(--bp-gold); stroke-width: 1.5; }

/* pipes & flow */
.abm-bp .bp-pipe { fill: none; stroke: #2f373a; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.abm-bp .bp-pipe-core { fill: none; stroke: #7d878c; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.abm-bp .bp-flow { fill: none; stroke: #f0d9a6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 26; opacity: .8; animation: abm-bp-flow 1.8s linear infinite; }
.abm-bp .bp-valve path { fill: #a7b0b4; stroke: #3d4549; stroke-width: 1; }
.abm-bp .bp-valve rect { fill: #a3151b; }
.abm-bp .bp-flange { fill: #a7b0b4; stroke: #3d4549; stroke-width: .8; }
.abm-bp .bp-conveyor { stroke: #4b5458; stroke-width: 5; stroke-linecap: round; }
.abm-bp .bp-roller-dot { fill: #7d878c; }
.abm-bp .bp-chevron { fill: none; stroke: var(--bp-gold); stroke-width: 1.6; opacity: .6; }
.abm-bp .bp-arrow { stroke: var(--bp-gold); stroke-width: 1.6; fill: none; }
.abm-bp .bp-arrow--dashed { stroke-dasharray: 4 4; }
.abm-bp .bp-arrow--muted { stroke: var(--bp-muted); }

@keyframes abm-bp-flow { to { stroke-dashoffset: -26.1; } }

/* interaction */
.abm-bp .bp-hit { fill: transparent; stroke: transparent; stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.abm-bp.is-ready .bp-station { cursor: pointer; outline: none; }
.abm-bp.is-ready .bp-station:hover .bp-hit,
.abm-bp.is-ready .bp-station.is-active .bp-hit { fill: rgba(214, 192, 143, .07); stroke: rgba(214, 192, 143, .45); }
.abm-bp.is-ready .bp-station:focus-visible .bp-hit { fill: rgba(214, 192, 143, .1); stroke: var(--bp-gold-light); stroke-width: 2.5; }
.abm-bp.is-ready .bp-station:hover .bp-name,
.abm-bp.is-ready .bp-station:focus-visible .bp-name,
.abm-bp.is-ready .bp-station.is-active .bp-name { fill: var(--bp-gold-light); }
.abm-bp.is-ready .bp-station--ingredient:hover .bp-ingredient { fill: #2a3134; }

/* ---------- step list (accordion; mobile + no-JS) ---------- */
.abm-bp__list { margin-top: 36px; }
.abm-bp .abm-bp__group {
	margin: 32px 0 6px;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bp-gold);
}
.abm-bp .abm-bp__group:first-child { margin-top: 0; }
.abm-bp .abm-bp__steps { list-style: none; margin: 0; padding: 0; }
.abm-bp .abm-bp__step { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--bp-line); }
.abm-bp__step summary {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 14px 2px;
	cursor: pointer;
	list-style: none;
	font-size: 21px;
	line-height: 1.3;
	color: var(--bp-cream);
}
.abm-bp__step summary::-webkit-details-marker { display: none; }
.abm-bp__step summary::after {
	content: '+';
	margin-left: auto;
	font-size: 24px;
	line-height: 1;
	color: var(--bp-gold);
}
.abm-bp__step details[open] summary::after { content: '–'; }
.abm-bp__step summary:focus-visible { outline: 2px solid var(--bp-gold); outline-offset: 2px; }
.abm-bp__nr {
	flex: 0 0 28px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--bp-gold);
	font-variant-numeric: tabular-nums;
}
.abm-bp__nr--ingredient::before { content: '◆'; font-size: 10px; letter-spacing: 0; position: relative; top: -2px; }
.abm-bp__body { padding: 0 2px 20px 42px; }
.abm-bp__figure { margin: 0 0 14px; }
.abm-bp__img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 10px;
}
.abm-bp__text p { margin: 0 0 .7em; padding: 0; font-size: 19px; line-height: 1.6; color: inherit; }
.abm-bp__text p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.abm-bp.is-ready .abm-bp__list { display: none; }
}

/* ---------- dialog ---------- */
.abm-bp__dialog {
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #fbf8f2;
	color: var(--bp-ink);
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .55);
	font-family: inherit;
}
.abm-bp__dialog[open] { display: flex; flex-direction: column; animation: abm-bp-in .25s ease-out; }
.abm-bp__dialog::backdrop { background: rgba(18, 22, 24, .72); backdrop-filter: blur(2px); }
@keyframes abm-bp-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.abm-bp__dialog-inner { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.abm-bp__close {
	position: absolute;
	z-index: 2;
	top: 14px;
	right: 14px;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	color: var(--bp-ink);
	font: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.abm-bp__close:hover, .abm-bp__close:focus-visible { background: var(--bp-gold); color: #fff; outline: none; }
.abm-bp__dialog-body .abm-bp__body { padding: 0; }
.abm-bp__dialog-media .abm-bp__figure { margin: 0; }
.abm-bp__dialog-media .abm-bp__img { width: 100%; max-width: none; aspect-ratio: 16 / 9; border-radius: 0; }
.abm-bp__dialog-head { padding: 26px 32px 0; }
.abm-bp__dialog.has-image .abm-bp__dialog-head { padding-top: 22px; }
.abm-bp__dialog:not(.has-image) .abm-bp__dialog-head { padding-top: 34px; padding-right: 72px; }
.abm-bp__kicker {
	margin: 0 0 4px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bp-gold);
}
.abm-bp .abm-bp__dialog-title {
	margin: 0 0 10px;
	padding: 0;
	font-family: inherit;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--bp-ink);
}
.abm-bp__dialog-body { padding: 0; }
.abm-bp__dialog-body .abm-bp__text { padding: 0 32px; }
.abm-bp__dialog-body .abm-bp__text p { font-size: 20px; line-height: 1.6; color: #3b4144; }
.abm-bp__progress { height: 3px; margin: 24px 32px 0; background: #e9e1d1; border-radius: 3px; overflow: hidden; }
.abm-bp__progress span { display: block; height: 100%; width: 0; background: var(--bp-gold); transition: width .3s ease; }
.abm-bp__nav { display: flex; justify-content: space-between; gap: 16px; padding: 16px 32px 26px; }
.abm-bp__navbtn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 48%;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--bp-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.abm-bp__navbtn[data-bp-next] { align-items: flex-end; text-align: right; margin-left: auto; }
.abm-bp__navbtn small { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bp-gold); }
.abm-bp__navbtn span { font-size: 20px; font-weight: 600; line-height: 1.25; transition: color .2s; }
.abm-bp__navbtn:hover span, .abm-bp__navbtn:focus-visible span { color: var(--bp-gold); }
.abm-bp__navbtn:focus-visible { outline: 2px solid var(--bp-gold); outline-offset: 4px; border-radius: 4px; }
.abm-bp__navbtn[hidden] { display: none; }

/* ---------- small screens: horizontally scrollable board ---------- */
@media (max-width: 899px) {
	.abm-bp__scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 14px; -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0, 0, 0, .25)); mask-image: linear-gradient(90deg, #000 88%, rgba(0, 0, 0, .25)); }
	.abm-bp__scroller .abm-bp__svg { width: 1040px; max-width: none; }
	.abm-bp__hint-desktop { display: none; }
	.abm-bp__hint-mobile { display: inline; }
	.abm-bp__dialog-head, .abm-bp__nav { padding-left: 22px; padding-right: 22px; }
	.abm-bp__dialog-body .abm-bp__text { padding: 0 22px; }
	.abm-bp__progress { margin-left: 22px; margin-right: 22px; }
	.abm-bp .abm-bp__dialog-title { font-size: 30px; }
	.abm-bp__dialog-body .abm-bp__text p { font-size: 19px; }
	.abm-bp__navbtn span { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.abm-bp .bp-flow { animation: none; }
	.abm-bp__dialog[open] { animation: none; }
	.abm-bp .bp-hit, .abm-bp .bp-name, .abm-bp__progress span { transition: none; }
}