/* Anbaugeräte-Bühne (gemeinsam für Produktseiten und Welten, 03.10.2026). Aus maschine-seite.css v27–v29 übernommen. */
/* v27 (02.10.2026): Passende Anbaugeräte auf jeder Produktseite (8 Karten, Bild nie beschnitten, Knopf zur Übersicht) */
.mp-anbau { padding: clamp(64px, 8vw, 110px) 0; }
.mp-anbau-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(26px, 3vw, 42px); }
.mp-anbau-kopf .lead { margin: 0; }
.mp-anbau-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.mp-ag { display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; background: var(--surface, #fbfbfa); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 30, 20, .05), 0 18px 40px -30px rgba(25, 31, 21, .45); transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s; }
.mp-ag:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20, 30, 20, .05), 0 26px 50px -30px rgba(21, 26, 18, .5); }
.mp-ag-bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; background: var(--surface-2); }
.mp-ag-bild::before { content: ''; position: absolute; inset: -12%; z-index: -1; background: var(--bg) center / cover; filter: blur(22px) saturate(.8) brightness(.95); opacity: .85; }
.mp-ag-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(23, 28, 21, .25)); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.mp-ag:hover .mp-ag-bild img { transform: scale(1.04); }
.mp-ag-text { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.mp-ag-text b { font: 700 17px/1.1 var(--display); text-transform: uppercase; }
.mp-ag-text small { flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.mp-ag-text em { font: 700 15px/1 var(--display); font-style: normal; color: var(--olive); }
.mp-anbau-mehr { margin: clamp(22px, 2.6vw, 34px) 0 0; text-align: center; }
.mp-anbau-mehr .btn { width: auto; height: auto; min-height: 54px; padding: 0 26px; display: inline-flex; align-items: center; border-radius: 4px; }
@media (max-width: 960px) { .mp-anbau-kopf { grid-template-columns: minmax(0, 1fr); } .mp-anbau-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mp-ag-text { padding: 10px 12px 12px; } .mp-ag-text small { display: none; } .mp-ag-text b { font-size: 15px; } }
/* Lange Modellnamen (SAM 1000Z MAX) nicht breiter als 26 % der Bühne: Schrift schrumpft, kurze Namen bleiben gleich */

/* v28 (02.10.2026): Anbaugeräte als Bühne. Maschine mit Punkt an der Schnellwechselaufnahme, Geräte fächern sich im
   Halbkreis auf (Nutzer: 8 Karten waren zu viel). Alle Maße in cqw der Bühne (Breite 100, Höhe 78). */
.mp-anbau-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.mp-anbau-text .lead { margin: 18px 0 0; }
.mp-ag-info { position: relative; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 18px 20px 18px 24px; border-radius: 6px; background: var(--surface, #fbfbfa);
  box-shadow: 0 1px 2px rgba(20, 30, 20, .05), 0 18px 40px -30px rgba(25, 31, 21, .45); display: grid; gap: 6px; min-height: 148px; align-content: start;
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.mp-ag-info::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--lime, #a4c639); }
.mp-anbau.ist-offen .mp-ag-info { opacity: 1; transform: none; }
.mp-ag-info small { font: 600 11px/1 var(--body, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mp-ag-info b { font: 700 clamp(20px, 1.8vw, 26px)/1.05 var(--display); text-transform: uppercase; }
.mp-ag-info span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.mp-ag-info em { font: 700 17px/1 var(--display); font-style: normal; color: var(--olive); margin-top: 4px; }
.mp-ag-info.wechsel b, .mp-ag-info.wechsel span, .mp-ag-info.wechsel em { animation: mp-ag-wechsel .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes mp-ag-wechsel { from { opacity: 0; transform: translateY(6px); } }
.mp-anbau-text .mp-anbau-mehr { text-align: left; }

.mp-ag-buehne { position: relative; container-type: inline-size; aspect-ratio: 100 / 78; }
.mp-ag-buehne::after { content: ''; position: absolute; left: 50%; bottom: 2.5cqw; width: calc(var(--mw) * 1.15cqw); height: 5cqw; transform: translateX(-50%); z-index: 0;
  background: radial-gradient(closest-side, rgba(25, 31, 21, .32), transparent); pointer-events: none; }
.mp-ag-masch { position: absolute; z-index: 1; left: 50%; bottom: 5cqw; width: calc(var(--mw) * 1cqw); height: auto; transform: translateX(-50%); transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1); }   /* 08.10.2026: Boden aus dem Hero statt Schlagschatten (build_maschinen_vorschau.py) */
.mp-ag-bogen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.mp-ag-bogen path { fill: none; stroke: var(--olive, #6f7f3a); stroke-width: 1.4; stroke-dasharray: .006 .012; vector-effect: non-scaling-stroke; opacity: 0;
  transition: opacity .6s .15s; }
.mp-anbau.ist-offen .mp-ag-bogen path { opacity: .45; }

.mp-ag-punkt { position: absolute; z-index: 4; left: calc(var(--dx) * 1cqw); top: calc(var(--dy) * 1cqw); width: clamp(40px, 6.4cqw, 54px); aspect-ratio: 1; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--lime, #a4c639); color: #1d2416; cursor: pointer; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 8px 22px rgba(25, 31, 21, .35); transition: transform .5s cubic-bezier(.22, 1, .36, 1), background .3s; }
.mp-ag-punkt::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--lime, #a4c639); animation: mp-ag-puls 2s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes mp-ag-puls { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.mp-ag-punkt i, .mp-ag-punkt i::after { position: absolute; left: 50%; top: 50%; width: 38%; height: 3px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.mp-ag-punkt i::after { content: ''; width: 100%; transform: translate(-50%, -50%) rotate(90deg); }
.mp-ag-punkt:hover { transform: translate(-50%, -50%) scale(1.08); }
.mp-ag-punkt:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.mp-anbau.ist-offen .mp-ag-punkt { transform: translate(-50%, -50%) rotate(135deg) scale(.82); background: #fff; }
.mp-anbau.ist-offen .mp-ag-punkt::before { animation: none; opacity: 0; }

.mp-ag-teil { position: absolute; z-index: 3; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: 19cqw; height: 15cqw; margin: 0; padding: 0; border: 0;
  background: none; cursor: pointer; color: var(--ink); opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) translate(calc((var(--dx) - var(--x)) * 1cqw), calc((var(--dy) - var(--y)) * 1cqw)) scale(.12) rotate(-25deg);
  transition: transform .75s cubic-bezier(.22, 1.25, .36, 1), opacity .35s; transition-delay: calc((5 - var(--i)) * 30ms); }
.mp-anbau.ist-offen .mp-ag-teil { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); transition-delay: calc(var(--i) * 70ms + 80ms); }
.mp-ag-teil::before { content: ''; position: absolute; left: 50%; top: 50%; width: 17cqw; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.6); z-index: -1;
  background: radial-gradient(closest-side, rgba(164, 198, 57, .55), rgba(164, 198, 57, 0)); opacity: 0; transition: opacity .4s, transform .5s cubic-bezier(.22, 1, .36, 1); }
.mp-ag-teil img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 8px 10px rgba(23, 28, 21, .28)); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.mp-ag-teil span { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); width: max-content; max-width: 22cqw; font: 600 clamp(10px, 1.15cqw, 13px)/1.2 var(--body, inherit);
  text-align: center; color: var(--muted); transition: color .3s; }
.mp-ag-teil:hover img { transform: scale(1.06); }
.mp-ag-teil[aria-pressed="true"]::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mp-ag-teil[aria-pressed="true"] img { transform: scale(1.1); }
.mp-ag-teil[aria-pressed="true"] span { color: var(--ink); }
.mp-ag-teil:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 960px) {
  .mp-anbau-wrap { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mp-anbau-text { display: contents; }
  .mp-anbau-text > .eyebrow, .mp-anbau-text > h2, .mp-anbau-text > .lead { order: 1; margin-top: 0; margin-bottom: 0; }
  .mp-ag-buehne { order: 2; }
  .mp-ag-info { order: 3; margin: 0; min-height: 0; }
  .mp-anbau-text .mp-anbau-mehr { order: 4; margin: 0; }
}
@media (max-width: 560px) {
  .mp-ag-teil span { display: none; }
  .mp-ag-teil { width: 21cqw; height: 16cqw; }
  .mp-anbau-text .mp-anbau-mehr .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mp-ag-punkt::before { animation: none; } .mp-ag-teil, .mp-ag-masch { transition-duration: .01s; } }
/* Info-Kasten erst nach dem Öffnen: klappt weich auf, statt leeren Platz zu halten */
.mp-ag-info { min-height: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; overflow: hidden;
  transition: opacity .5s .1s, transform .6s cubic-bezier(.22, 1, .36, 1), max-height .6s cubic-bezier(.22, 1, .36, 1), padding .6s, margin .6s; }
.mp-anbau.ist-offen .mp-ag-info { max-height: 320px; padding-top: 18px; padding-bottom: 18px; margin-top: clamp(22px, 2.6vw, 34px); }
@media (max-width: 960px) { .mp-anbau.ist-offen .mp-ag-info { margin-top: 0; } .mp-anbau:not(.ist-offen) .mp-ag-info { margin-bottom: -22px; } }
/* Maschine + Punkt in einem Halter: geschlossen größer (füllt die Bühne), beim Öffnen macht sie dem Halbkreis Platz */
.mp-ag-buehne::after { display: none; }
/* 09.10.2026: --mu = Länge des weich auslaufenden Hallenbodens unter dem alten Bildausschnitt; so steht die Maschine wie vorher */
.mp-ag-m { position: absolute; z-index: 2; left: 50%; bottom: calc(5cqw - var(--mu, 0) * 1cqw); width: calc(var(--mw) * 1cqw); transform: translateX(-50%); transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
/* 08.10.2026 Nutzer: kein Schatten unter der Maschine, der Boden im Vorschaubild reicht (build_maschinen_vorschau.py) */
.mp-ag-m .mp-ag-masch { position: relative; left: auto; bottom: auto; width: 100%; transform: none; display: block; }
.mp-anbau:not(.ist-offen) .mp-ag-m { transform: translateX(-50%) translateY(-4cqw) scale(1.38); }
.mp-anbau.ist-offen .mp-ag-m { transform: translateX(-50%) scale(.84); }   /* 08.10.: geschlossen größer, offen Platz für die Geräte */
.mp-ag-m .mp-ag-punkt { left: 30%; top: 60%; }
.mp-anbau:not(.ist-offen) .mp-ag-punkt { transform: translate(-50%, -50%) scale(.72); }
.mp-anbau:not(.ist-offen) .mp-ag-punkt:hover { transform: translate(-50%, -50%) scale(.8); }
.mp-anbau.ist-offen .mp-ag-punkt { transform: translate(-50%, -50%) rotate(135deg) scale(.8); }
@media (min-width: 961px) { .mp-ag-buehne { width: min(100%, 680px, calc((100svh - 170px) * 1.28)); justify-self: center; } }

/* v29 (02.10.2026): Kapitelfotos füllen ihr Feld (Nutzer: keine grauen Streifen), Grafiken mit Schrift bleiben ganz */
.mp-ag-info b, .mp-ag-info span, .mp-ag-info em { transition: opacity .2s ease, transform .2s ease, filter .2s ease; }
.mp-ag-info.wechsel b, .mp-ag-info.wechsel span, .mp-ag-info.wechsel em { animation: none; }
.mp-anbau.ist-offen .mp-ag-info { transition: opacity .5s .1s, transform .6s cubic-bezier(.22, 1, .36, 1), max-height .6s cubic-bezier(.22, 1, .36, 1), padding .6s, margin .6s, height .45s cubic-bezier(.22, 1, .36, 1); }
.mp-ag-info.raus b, .mp-ag-info.raus span, .mp-ag-info.raus em { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
.mp-ag-info.rein b, .mp-ag-info.rein span, .mp-ag-info.rein em { animation: mp-ag-rein .55s cubic-bezier(.22, 1, .36, 1) both; }
.mp-ag-info.rein span { animation-delay: .07s; }
.mp-ag-info.rein em { animation-delay: .14s; }
@keyframes mp-ag-rein { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.mp-ag-info::before { transition: transform .45s cubic-bezier(.22, 1, .36, 1); transform-origin: 50% 0; }
.mp-ag-info.raus::before { transform: scaleY(.3); }


/* Welten (03.10.2026): Kennwerte und zwei Knöpfe im Info-Kasten; Sektion behält den Welten-Abstand */
.welt-anbau.mp-anbau { padding: clamp(72px, 9vw, 130px) 0; }
.mp-ag-werte { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; padding: 0; list-style: none; }
.mp-ag-werte li { padding: 5px 9px; border-radius: 3px; background: rgba(86, 112, 31, .1); color: #3f4a2c; font: 600 12.5px/1.2 var(--text); }
.mp-ag-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mp-ag-knoepfe .btn { width: auto; height: auto; min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 4px; font-size: 15px; }
.mp-anbau.ist-offen .mp-ag-info { max-height: 460px; }
.mp-ag-info.raus ul, .mp-ag-info.rein ul { transition: opacity .2s; }
.mp-ag-info.raus .mp-ag-werte { opacity: 0; }
.mp-ag-info.rein .mp-ag-werte { animation: mp-ag-rein .55s .1s cubic-bezier(.22, 1, .36, 1) both; }
@media (max-width: 560px) { .mp-ag-knoepfe .btn { flex: 1 1 auto; justify-content: center; } }
/* Nutzer 05.10.: Bild im Zeichenstil (Gerät farbig, Maschine als Strich) im Halbkreis größer */
.mp-ag-teil img[src*="anbau-frei/plus/forstmulcher"] { scale: 1.45; transform-origin: 50% 100%; translate: 0 -4%; }

/* Anbaugeräte als Auswahl am Handy (07.10.2026, Nutzer, zuerst am SAM 1200; Builder-Schalter anbau_wahl, Skript in
   anbau-buehne.js). Desktop behält die Halbkreis-Bühne, bis 760 px stehen die Geräte in einer wischbaren Leiste.
   Motiv mit Boden (anbau_bild): der Boden läuft unten und seitlich weich aus. */
.maschine-seite:has(#anbau.mp-anbau-wahl) { overflow-x: clip; }
#anbau.mp-anbau-wahl { background: radial-gradient(ellipse at 78% 60%, rgba(164,198,57,.09), transparent 58%), var(--bg); }
.mp-ag-fokus, .mp-ag-auswahl-hinweis { display: none; }
@media (max-width: 760px) {
  .maschine-seite.anbau-im-blick .side-cta { opacity: 0; visibility: hidden; pointer-events: none; }
  #anbau.mp-anbau-wahl { padding: 32px 0; }
  #anbau.mp-anbau-wahl .mp-anbau-wrap { gap: 10px; }
  #anbau.mp-anbau-wahl h2 { font-size: clamp(26px, 7.4vw, 34px); }
  #anbau.mp-anbau-wahl .lead { font-size: 15px; line-height: 1.45; }
  #anbau.mp-anbau-wahl .mp-ag-buehne { display: flex; flex-direction: column; aspect-ratio: auto; width: 100%; min-width: 0; }
  #anbau.mp-anbau-wahl .mp-ag-m { position: relative; left: auto; bottom: auto; width: 100%; transform: none; }
  #anbau.mp-anbau-wahl .mp-ag-masch { width: 100%; height: clamp(130px, 39vw, 180px); object-fit: contain; filter: none; }
  #anbau.mp-anbau-wahl .mp-ag-m::after, #anbau.mp-anbau-wahl .mp-ag-punkt, #anbau.mp-anbau-wahl .mp-ag-bogen { display: none; }
  #anbau.mp-anbau-wahl .mp-ag-auswahl-hinweis { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; font-size: 12px; color: var(--muted); }
  #anbau.mp-anbau-wahl .mp-ag-auswahl { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--lime) transparent; }
  #anbau.mp-anbau-wahl .mp-ag-teil { position: relative; inset: auto; flex: 0 0 112px; width: 112px; height: 108px; opacity: 1; pointer-events: auto; transform: none; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); scroll-snap-align: start; transition: border-color .2s, background .2s; }
  #anbau.mp-anbau-wahl .mp-ag-teil::before { display: none; }
  #anbau.mp-anbau-wahl .mp-ag-teil img { height: 60px; width: 100%; scale: 1; translate: none; transform: none; filter: none; }
  #anbau.mp-anbau-wahl .mp-ag-teil span { position: static; display: block; width: auto; max-width: none; transform: none; font-size: 12px; line-height: 1.15; margin-top: 4px; }
  #anbau.mp-anbau-wahl .mp-ag-teil[aria-pressed="true"] { border-color: var(--olive); background: #e9efda; box-shadow: inset 0 -3px var(--lime); }
  #anbau.mp-anbau-wahl .mp-ag-info { display: grid; grid-template-columns: 96px minmax(0,1fr); column-gap: 14px; row-gap: 6px; max-height: none; height: auto !important; padding: 16px; margin: 0; opacity: 1; transform: none; box-shadow: none; border: 1px solid var(--line); }
  #anbau.mp-anbau-wahl .mp-ag-fokus { display: block; grid-column: 1; grid-row: 1 / 4; width: 96px; height: 100px; object-fit: contain; align-self: center; }
  #anbau.mp-anbau-wahl .mp-ag-info > small { grid-column: 2; grid-row: 1; align-self: end; font-size: 10px; }
  #anbau.mp-anbau-wahl .mp-ag-info > b { grid-column: 2; grid-row: 2; font-size: 22px; overflow-wrap: anywhere; }
  #anbau.mp-anbau-wahl .mp-ag-info > em { grid-column: 2; grid-row: 3; margin: 0; font-size: 15px; }
  #anbau.mp-anbau-wahl .mp-ag-info > span { grid-column: 1 / -1; grid-row: 4; font-size: 14px; line-height: 1.4; }
  #anbau.mp-anbau-wahl .mp-ag-knoepfe { grid-column: 1 / -1; grid-row: 5; margin-top: 6px; }
  #anbau.mp-anbau-wahl .mp-ag-knoepfe .btn { flex: 1 1 0; min-height: 46px; width: auto; padding: 0 8px; font-size: 14px; }
}