/* Seite für Maschinenbauer: Problem, Mehrwert, Module als Karten mit Fenster (2026-10-17, Gerd: «A und 1, bau») */
.hs-drei{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hs-drei li{border-top:3px solid var(--blau);padding-top:16px}
.hs-drei.hs-rot li{border-top-color:var(--rot)}
.hs-drei h3{font-size:22px;line-height:1.2;margin:0 0 8px;color:var(--navy)}
.hs-drei p{margin:0;color:var(--grau)}
.hs-problem{padding-bottom:24px}
.hs-text{color:var(--grau);font-size:18px;max-width:760px;margin:-12px 0 26px}

.modul-karten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.modul-karte{position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:22px 22px 20px;border:1px solid var(--linie);border-radius:var(--radius);background:#fff;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.modul-karte:hover,.modul-karte:focus-visible{border-color:var(--blau);box-shadow:0 10px 24px rgba(36,54,76,.10);transform:translateY(-2px)}
.modul-icon{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:#E8EFF8;color:#3F6890;flex:0 0 auto}
.modul-karte .modul-icon{margin-bottom:14px}
.modul-marke{position:absolute;top:22px;right:20px;font-family:var(--schrift-kopf);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#3F6890;background:#E8EFF8;border-radius:6px;padding:3px 8px}
.modul-karte h3{font-size:21px;line-height:1.2;margin:0 0 8px;color:var(--navy)}
.modul-karte p{margin:0 0 16px;color:var(--grau);font-size:16px}
.modul-mehr{margin-top:auto;font-weight:600;color:var(--navy)}

.modul-fenster{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border:0;border-radius:16px;padding:28px 30px 26px;box-shadow:0 30px 70px rgba(27,42,58,.30);color:var(--text)}
.modul-fenster::backdrop{background:rgba(27,42,58,.55)}
.mf-kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mf-kopf h3{font-size:26px;margin:0;color:var(--navy)}
.mf-zeile{margin:0 0 2px;font-family:var(--schrift-kopf);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#3F6890}
.modul-zu{margin-left:auto;align-self:flex-start;width:40px;height:40px;border-radius:50%;border:1px solid var(--linie);background:#fff;color:var(--navy);font-size:24px;line-height:1;cursor:pointer}
.modul-zu:hover{background:var(--papier)}
.mf-satz{font-family:var(--schrift-kopf);font-weight:500;font-size:20px;color:var(--rot);margin:0 0 8px}
.modul-fenster p{margin:0 0 12px}
.mf-titel{font-family:var(--schrift-kopf);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin:18px 0 8px!important}
.mf-punkte{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.mf-punkte li{position:relative;padding-left:26px}
.mf-punkte li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);transform:rotate(-45deg)}
.mf-wirkung{font-weight:600;color:var(--navy)}
.modul-fenster .knopfreihe{margin-top:20px}
/* Ersatz nur ohne JavaScript: replaceState beim Schließen hebt :target nicht auf, sonst stünde das Fenster nach dem Schließen
   unten im Abschnitt (Gerd, 2026-10-19, Fußlink «E-Commerce») */
html:not(.mf-js) .modul-fenster:target:not([open]){display:block;position:static;margin:24px auto;box-shadow:none;border:1px solid var(--linie)}

@media (max-width:1100px){.modul-karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.hs-drei{grid-template-columns:minmax(0,1fr)}.modul-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.modul-karten{grid-template-columns:minmax(0,1fr)}.modul-fenster{padding:22px 20px;max-height:calc(100vh - 24px)}.mf-kopf h3{font-size:22px}}

/* Mehrwert ohne Farbklasse: Linie in der Bereichsfarbe; .modul-karten.drei für sechs Karten */
.hs-mehrwert .hs-drei li{border-top-color:var(--blau)}
@media (min-width:1101px){.modul-karten.drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
.modul-marke.frei{background:var(--petrol);color:#fff}

/* Instandhaltung in Petrol (Gerd, 2026-10-17: «INstandhaltung bauen») */
.hs-petrol .hs-drei li{border-top-color:var(--petrol)}
.hs-petrol .hs-drei.hs-rot li{border-top-color:var(--rot)}
.hs-petrol .modul-icon,.hs-petrol .modul-marke{background:#E1EDEE;color:var(--petrol)}
.hs-petrol .modul-marke.frei{background:var(--petrol);color:#fff}
.hs-petrol .modul-karte:hover,.hs-petrol .modul-karte:focus-visible{border-color:var(--petrol)}
.hs-petrol .mf-zeile{color:var(--petrol)}
.hs-petrol .mf-punkte li::before{border-color:var(--petrol)}
.stimme .stimme-link{margin:18px 0 0 28px;color:#fff}
.stimme .stimme-link span{color:var(--hellpetrol)}

/* Leiste Maschinenbauer: Klappmenü «Module» (Gerd, 2026-10-17: «Maschinenbauer 3 und 1») */
.ml-module{position:relative}
.ml-module summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:600;padding:11px 0 9px;border-bottom:2px solid transparent}
.ml-module summary::-webkit-details-marker{display:none}
.ml-module summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.ml-module[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.ml-module summary:hover,.ml-module[open] summary{border-color:#fff}
.ml-module summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ml-liste{position:absolute;top:calc(100% + 6px);left:-14px;width:310px;background:#fff;border-radius:12px;box-shadow:0 18px 44px rgba(27,42,58,.24);padding:8px;z-index:60}
.ml-liste ul{list-style:none;margin:0;padding:0}
.bereich-nav.mb-leiste .ml-liste a{display:flex;align-items:center;gap:12px;color:var(--navy);font-size:15px;font-weight:600;padding:7px 10px;border:0;border-radius:8px;opacity:1}
.bereich-nav.mb-leiste .ml-liste a:hover,.bereich-nav.mb-leiste .ml-liste a:focus-visible{background:var(--papier);outline:none}
.ml-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#E8EFF8;color:#3F6890;flex:0 0 auto}
.ml-icon svg{width:18px;height:18px}
.bereich-nav.mb-leiste .ml-liste a.ml-alle{border-top:1px solid var(--linie);border-radius:0 0 8px 8px;margin-top:6px;padding:11px 10px 7px;color:#3F6890}
.ml-anker{display:none}
@media (max-width:700px){.ml-module{display:none}.bereich-nav .ml-anker{display:inline-block}}

/* So sieht es aus: links die Schritte, rechts das Bild */
.tour{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start}
.tour-wahl{display:grid;gap:12px}
.tour-wahl button{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 12px;text-align:left;font:inherit;color:var(--text);background:#fff;border:1px solid var(--linie);border-radius:12px;padding:16px 16px 16px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tour-wahl button:hover{border-color:var(--blau)}
.tour-wahl button[aria-selected="true"]{border-color:var(--blau);box-shadow:inset 4px 0 0 var(--blau),0 10px 24px rgba(36,54,76,.08)}
.tour-wahl .nr{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--blau);color:#fff;font-weight:700;font-size:15px}
.tour-wahl strong{font-family:var(--schrift-kopf);font-size:18px;line-height:1.25;color:var(--navy)}
.tour-wahl .kurz{color:var(--grau);font-size:15px;line-height:1.45}
.tour-bilder{display:grid;gap:28px}
.tour-bild{margin:0}
.tour-bild img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--linie);background:#F6F6FE;box-shadow:0 20px 44px rgba(27,42,58,.12)}
.tour-bild figcaption{margin-top:10px;color:var(--grau);font-size:14px}
.tour-an .tour-bild img{max-height:620px;width:auto;max-width:100%;margin:0 auto}
@media (max-width:980px){.tour{grid-template-columns:minmax(0,1fr)}.tour-wahl{grid-template-columns:repeat(3,minmax(0,1fr))}.tour-wahl button{grid-template-columns:minmax(0,1fr)}.tour-wahl .nr{grid-row:auto;margin-bottom:6px}}
@media (max-width:700px){
  .tour-wahl,.tour-bilder{display:contents}
  .tour{display:flex;flex-direction:column;gap:10px}
  .tour-wahl button{order:var(--o);pointer-events:none;border:0;box-shadow:none!important;padding:18px 0 0;background:none;grid-template-columns:34px minmax(0,1fr)}
  .tour-wahl .nr{grid-row:span 2;margin:0}
  .tour-bild,.tour-bild[hidden]{display:block;order:var(--o)}
}
/* Reihenfolge auf dem Handy als Klasse statt style="…" (CSP, 2026-10-17); reicht für vier Ansichten */
.tour-o1{--o:1}.tour-o2{--o:2}.tour-o3{--o:3}.tour-o4{--o:4}.tour-o5{--o:5}.tour-o6{--o:6}.tour-o7{--o:7}.tour-o8{--o:8}

/* Eingeladener Hersteller unter dem Grundpreis (Gerd, 2026-10-17: «ja so machen»; Wortlaut OEM-Flyer FINAL v03) */
.preis-kopf .lead{margin-bottom:22px}
.hs-eingeladen{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px 40px;align-items:center;background:#fff;border:2px solid var(--blau);border-radius:var(--radius);padding:22px 28px;margin-bottom:38px;box-shadow:0 12px 28px rgba(36,54,76,.08)}
.ei-zeile{margin:0 0 6px;font-family:var(--schrift-kopf);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rot)}
.hs-eingeladen h3{margin:0 0 8px;font-size:22px;line-height:1.25;color:var(--navy)}
.hs-eingeladen p{margin:0;color:var(--grau);font-size:16px}
.ei-rechts{border-left:1px solid var(--linie);padding-left:32px}
.hs-eingeladen .ei-preis{margin-bottom:14px;color:var(--navy);font-size:17px;line-height:1.4}
.ei-preis strong{display:block;font-family:var(--schrift-kopf);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);font-weight:500;margin-bottom:4px}
.hs-eingeladen .ei-datei{margin-top:14px;font-size:15px}
.ei-datei .pdf-link{color:var(--navy)}
@media (max-width:860px){.hs-eingeladen{grid-template-columns:minmax(0,1fr);padding:20px}.ei-rechts{border-left:0;border-top:1px solid var(--linie);padding:16px 0 0}}

/* Service Brain für Maschinenbauer (Gerd, 2026-10-17): Text links, Beispiel-Fenster rechts wie auf der Service-Brain-Seite,
   aber in der Farbe der Maschinenbauer (Navy und Blau statt Petrol und Rot) */
.hs-brain .innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
.hs-brain .hs-text{margin:0 0 22px}
.hs-brain .schritte-liste .nr{background:var(--navy)}  /* Navy statt Rot: Maschinenbauer sind Navy und Blau */
.hs-brain-preis{margin:0 0 10px;font-size:15px;color:var(--text)}
.hs-brain-wirkung{margin:0 0 10px;font-family:var(--schrift-kopf);font-weight:500;font-size:clamp(19px,1.7vw,22px);line-height:1.35;color:var(--navy)}
.hs-brain-grenze{margin:0;font-size:14px;color:var(--grau);max-width:620px}
.hs-brain .chat-frage,.hs-brain .chat-teil .chat-knopf{background:var(--blau)}
.hs-brain .chat-teil{border-left-color:var(--blau)}
#service-brain{scroll-margin-top:132px}
@media (min-width:701px){body #service-brain{scroll-margin-top:152px}}
@media (max-width:980px){.hs-brain .innen{grid-template-columns:minmax(0,1fr);gap:28px}}

/* Service Brain als KI-Kachel (Gerd, 2026-10-17: «designtechnisch noch etwas aufwerten und das AI als Kennzeichen»): Navy-Grund,
   feiner Verlaufsrand in der Farbe der Seite (Blau Maschinenbauer, Petrol Instandhaltung), Kennzeichen «AI» oben rechts neben
   einem Preis-Kennzeichen und im Kopf des Fensters; keine eigene Bewegung. Kontrast (WCAG): Weiß 12,3:1 und #C3CDE1 7,7:1 auf Navy, «AI» 7,7:1 bzw. 6,8:1 */
.modul-karte.ki{--ki-akzent:var(--blau);--ki-hell:#C3CDE1;border:2px solid transparent;background:linear-gradient(var(--navy),var(--navy)) padding-box,linear-gradient(135deg,var(--ki-akzent),var(--ki-hell)) border-box;color:#fff}
.hs-petrol .modul-karte.ki{--ki-akzent:var(--petrol);--ki-hell:#A7C7C9}
.modul-karte.ki h3,.modul-karte.ki .modul-mehr{color:#fff}
.modul-karte.ki p{color:#C3CDE1}
.modul-karte.ki .modul-icon,.hs-petrol .modul-karte.ki .modul-icon{background:rgba(255,255,255,.12);color:#fff}
.modul-karte.ki:hover,.modul-karte.ki:focus-visible{border-color:transparent;box-shadow:0 10px 24px rgba(27,42,58,.28)}
.modul-marken{position:absolute;top:22px;right:20px;left:84px;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
.modul-marken .modul-marke{text-align:right}  /* rechts vom Symbol (22 + 50 + 12 px) */
/* Schmale KI-Kachel mit Preis (Innenbreite unter 300 px, gemessen 2026-10-17: Preis und «AI» passen dann nicht mehr neben
   das Symbol): Kennzeichen als eigene Zeile unter dem Symbol. Nur «AI» passt immer oben rechts */
.modul-karte.ki{container-type:inline-size}
@container (max-width:299px){.modul-karte.ki .modul-marken:has(.modul-marke){position:static;justify-content:flex-start;margin:0 0 12px}.modul-karte.ki .modul-marken .modul-marke{text-align:left}}
.modul-marken .modul-marke{position:static}
.ki-marke{display:inline-block;font-family:var(--schrift-kopf);font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.5;color:var(--navy);background:var(--ki-hell,#C3CDE1);border-radius:6px;padding:2px 8px}
.mf-kopf .ki-marke{vertical-align:middle;font-size:13px}
.hs-petrol .mf-kopf .ki-marke{background:#A7C7C9}
/* Modulübersicht aus den Master Visuals über den Karten (2026-10-19): eigene helle Fläche, bündig mit dem Kartenraster,
   klar abgesetzt; darunter die leise Zeile «Die Module im Einzelnen» (Gerd: «die Abstände … müssen klarer sein») */
.modul-uebersicht{margin:10px 0 56px;padding:28px 32px;background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius)}
.modul-uebersicht .master-bild{margin:0}
.modul-einzeln{margin:0 0 18px;font-family:var(--schrift-kopf);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
@media (max-width:700px){.modul-uebersicht{padding:12px;margin:6px 0 36px}}
/* Einleitung über der Modulübersicht auf voller Breite, damit sie bei Maschinenbauer in einer Zeile steht (Gerd, 2026-10-19) */
.hs-module .hs-text{max-width:none}
/* «So sieht es aus» auf der Instandhaltung in Petrol (2026-10-19) */
.hs-tour.hs-petrol .tour-wahl button:hover{border-color:var(--petrol)}
.hs-tour.hs-petrol .tour-wahl button[aria-selected="true"]{border-color:var(--petrol);box-shadow:inset 4px 0 0 var(--petrol),0 10px 24px rgba(36,54,76,.08)}
.hs-tour.hs-petrol .tour-wahl .nr{background:var(--petrol)}