/* Styles of the three area pages (Software solutions, Networked foundry, Consulting & company) and the parts of the homepage they
   share with it (customer benefits, people). Loaded after the base stylesheet and the solution page styles.
   The graphic language is the one of the logo: lines with orange dots. A filled dot is something the software does today,
   a dashed dot something built in a project, an open dashed circle a direction for the future. */

/* long German compound words ("Entscheidungsgrundlagen", "Produktionsplanung") may hyphenate in headings and titles */
.phero h1, .ben b, .net-side b, .stage h3, .cards b, .directions b { hyphens: auto; overflow-wrap: break-word; }

/* ---------- Central visualization: the foundry processes on lines into CASCULATE, the ERP above it ---------- */
.netmap { padding: 100px 0 80px; }
.net { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 56px; }
.net-core { order: -1; justify-self: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 34px; }
.net-erp { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 22px; text-align: center; }
.net-erp small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.net-erp b { display: block; margin-top: 4px; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 21px; line-height: 1.1; }
.net-up { display: block; width: 2px; height: 26px; background: var(--ink); }
.net-hub { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 30px 20px; border-radius: 28px; text-align: center;
  color: #fff; background: radial-gradient(260px 180px at 70% 20%, var(--navy-2), var(--navy)); box-shadow: 0 18px 40px rgba(6,18,47,.22); }
.net-hub img { height: 40px; width: auto; }
.net-hub b { font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: .05em; line-height: 1; }
.net-hub span { font-size: 13px; line-height: 1.4; color: var(--muted-dark); max-width: 190px; }
.net-side { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.net-side li { position: relative; }
.net-side a { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 16px; color: inherit; text-decoration: none; border-radius: 12px; }
.net-side .dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--drop); box-shadow: 0 8px 18px rgba(223,13,28,.22); transition: transform .2s; }
.net-side .off .dot { width: 22px; height: 22px; margin: 2px; background: var(--sand); border: 2px dashed rgba(17,21,48,.45); box-shadow: none; }
.net-side .lbl { min-width: 0; }
.net-side b { display: block; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 25px; line-height: 1.05; }
.net-side small { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 340px; }
.net-side .off b { color: rgba(17,21,48,.58); }
.net-side a:hover b, .net-side a:focus-visible b { color: var(--orange-text); }
.net-side a:hover .dot { transform: scale(1.1); }
/* narrow screens: one column, a thin line runs down through the dots (dashed where the steps are built in a project) */
.net-side li::before { content: ""; position: absolute; left: 12px; top: 26px; width: 2px; height: calc(100% + 26px); background: var(--ink); }
.net-side li.off::before { background: repeating-linear-gradient(180deg, rgba(17,21,48,.4) 0 6px, transparent 6px 11px); }
.net-left { margin-bottom: 26px; }
.net-right li:last-child::before { display: none; }
.net-legend { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.net-legend span { display: inline-flex; align-items: center; gap: 10px; }
.net-legend i { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.net-legend i.on { background: var(--drop); }
.net-legend i.off { border: 2px dashed rgba(17,21,48,.45); }

/* ---------- Customer benefits: a title and one sentence each, on the line and dots of the logo ---------- */
.benefits { padding: 100px 0 70px; }
.ben { list-style: none; margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px 40px; }
.ben li { position: relative; padding-left: 42px; }
.ben li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--drop); box-shadow: 0 8px 18px rgba(223,13,28,.2); }
.ben b { display: block; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.08; margin-bottom: 8px; text-wrap: balance; }
.ben span { display: block; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 380px; }

/* ---------- Next to your ERP: today / with CASCULATE ----------
   The ERP and shop-floor boxes span both rows (they do not change). Two bands in the middle: today on top (dashed line, muted),
   CASCULATE below (one orange line). Thin lines, little orange, no decorative animation. */
.erp { padding: 100px 0; }
.erp .lead { margin-top: 18px; }
.layers { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 56px; }
.tier { border-radius: 24px; padding: 24px 28px; }
.tier-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.tier strong { display: block; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 29px; line-height: 1.05; margin: 10px 0 16px; }
.tier.today { border: 1.5px dashed rgba(255,255,255,.3); color: var(--muted-dark); }
.tier.today strong { color: #d7dbef; }
/* "Today": the notes are scattered (each slightly rotated); a tangled dashed line runs below them. Its counterpart in the lower band:
   one straight line with dots. The visual idea comes from the logo. */
.tags { list-style: none; margin: 0; padding: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 12px 10px; }
.tags li { border: 1px solid rgba(255,255,255,.26); border-radius: 6px; padding: 6px 10px; font-size: 14px; background: rgba(255,255,255,.04); }
.tags li:nth-child(4n+1) { transform: rotate(-2.2deg); }
.tags li:nth-child(4n+2) { transform: rotate(1.6deg) translateY(3px); }
.tags li:nth-child(4n+3) { transform: rotate(-1deg) translateY(-2px); }
.tags li:nth-child(4n) { transform: rotate(2.6deg) translateY(2px); }
.cons { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.cons li { display: flex; gap: 10px; align-items: baseline; }
.cons li::before { content: "–"; opacity: .7; }
.tangle { height: 34px; margin: 14px -28px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 17 C30 17 40 4 62 6 C92 9 70 30 98 28 C126 26 118 6 150 8 C176 10 170 22 160 22 C148 22 152 8 184 10 C214 12 206 29 236 27 C262 25 250 6 282 7 C310 8 300 28 330 26 C356 24 362 17 400 17' fill='none' stroke='%23fff' stroke-opacity='.4' stroke-width='2' stroke-dasharray='6 5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.tier.with strong, .tier.with .tier-k { padding-right: 52px; }
.tier.with { position: relative; border: 1.5px solid var(--orange); background: rgba(243,144,42,.08); }
.tier.with .tier-k { color: var(--orange); }
.tier.with .mk { position: absolute; right: 22px; top: 15px; height: 26px; width: auto; }
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; color: #e3e6f5; }
.pts li { display: flex; align-items: flex-start; gap: 10px; }
.pts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; margin-top: .5em; margin-top: calc((1lh - 7px) / 2); }
.tier-out { margin: 16px 0 0; font-size: 15px; font-weight: 600; color: #fff; }
.oneline { position: relative; display: flex; justify-content: space-around; align-items: center; height: 14px; margin: 18px -28px 0; }
.oneline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--orange); }
.oneline i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--drop); }
.arr { position: relative; min-height: 44px; padding-left: calc(50% + 16px); display: flex; align-items: center; color: var(--orange);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.arr::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 8px; width: 2px; margin-left: -1px; background: currentColor; }
.arr::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 8px; height: 8px; margin-left: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.arr.today { display: none; color: rgba(255,255,255,.4); }
.box { border: 1px solid rgba(255,255,255,.2); border-radius: 24px; padding: 28px; background: rgba(255,255,255,.03); }
.box small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); font-weight: 600; }
.box strong { display: block; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 33px; line-height: 1.05; margin: 10px 0 18px; }
.box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--muted-dark); }
.box li { display: flex; align-items: flex-start; gap: 10px; }
.box li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; flex: none; margin-top: .5em; margin-top: calc((1lh - 7px) / 2); }
.erp-facts { list-style: none; display: grid; grid-template-columns: 1fr; gap: 22px 50px; margin: 56px 0 0; padding: 30px 0 0; border-top: 1px solid rgba(255,255,255,.15); }
.erp-facts li { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted-dark); max-width: 460px; }
.erp-facts b { display: block; color: #fff; font-weight: 600; margin-bottom: 4px; }

/* ---------- Three stages: available today, in the project, our vision ---------- */
.stages { padding: 100px 0 80px; }
.stage-row { list-style: none; margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.stage { border-radius: 24px; padding: 28px 30px; border: 1px solid var(--line); background: #fff; }
.stage.project { background: transparent; border: 1.5px dashed rgba(17,21,48,.32); }
.stage.vision { background: var(--sand); border-color: transparent; }
.stage-k { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); }
.stage h3 { margin: 0 0 18px; font-size: 28px; line-height: 1.05; }
.stage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stage li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.stage li::before { content: ""; position: absolute; left: 0; top: .32em; width: 13px; height: 13px; border-radius: 50%; background: var(--drop); }
.stage.project li::before { background: none; border: 2px dashed rgba(17,21,48,.45); }
.stage.vision li::before { background: none; border: 2px dashed rgba(17,21,48,.3); width: 15px; height: 15px; top: .26em; }
.stage-note { margin: 30px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 720px; }

/* ---------- Vision: directions, drawn with dashed dots ---------- */
/* the section only: the "Our vision" card on the same page is li.stage.vision */
.band.vision { padding: 100px 0; }
.band.vision .lead { max-width: 720px; }
.directions { list-style: none; margin: 50px 0 0; padding: 30px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: 26px 50px; }
.directions li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 400px; }
.directions li::before { content: ""; position: absolute; left: 0; top: .38em; width: 15px; height: 15px; border-radius: 50%; border: 2px dashed rgba(17,21,48,.45); }
.directions b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.vision-note { margin: 34px 0 0; font-size: 14px; color: var(--muted); max-width: 720px; }

/* ---------- How we work: three steps on one line ---------- */
.start { padding: 110px 0 100px; }
.phases { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 34px; position: relative; }
.phases li { position: relative; }
.phases p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 340px; }
.phases-note { margin: 44px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 500; max-width: 640px; }
.start .cta { margin-top: 34px; }

/* ---------- People and trust ---------- */
.people-home { padding: 110px 0 90px; }
.ph-grid { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 40px; }
.founder-light { margin: 0; display: grid; grid-template-columns: 1fr; gap: 24px; }
.founder-light img { width: min(340px, 78%); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.founder-light blockquote { margin: 0 0 16px; }
.founder-light blockquote p { margin: 0; font-size: 20px; line-height: 1.5; max-width: 420px; }
.founder-light figcaption { font-size: 14px; color: var(--muted); }
.founder-light figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.ph-text .lead { max-width: 560px; }
.contacts { list-style: none; margin: 34px 0 34px; padding: 0; display: grid; gap: 16px; }
.contacts li { display: flex; align-items: center; gap: 16px; }
.contacts img, .contacts .face { width: 60px; height: 60px; flex: none; }
.contacts b { display: block; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 25px; line-height: 1.05; }
.contacts small { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); line-height: 1.5; }

/* ---------- Breakpoints ---------- */
@media (min-width: 700px) {
  .ben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ph-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 70px; align-items: center; }
  .directions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .ben { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the processes on both sides of CASCULATE: every dot sits on a line that runs into a vertical line next to the center,
     which joins the center box; left side mirrored (text right-aligned, dot on the right) */
  .net { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .net-core { order: 0; margin: 0 44px; }
  .net-left { margin-bottom: 0; }
  .net-hub::before, .net-hub::after { content: ""; position: absolute; top: 50%; width: 44px; height: 2px; margin-top: -1px; background: var(--ink); }
  .net-hub::before { right: 100%; }
  .net-hub::after { left: 100%; }
  .net-side li::before { top: 13px; height: calc(100% + 26px); }
  .net-side li:last-child::before { display: none; }
  .net-left a { flex-direction: row-reverse; text-align: right; padding-right: 60px; }
  .net-left small { margin-left: auto; }
  .net-left li::before { left: auto; right: 0; }
  .net-right a { padding-left: 60px; }
  .net-right li::before { left: 0; }
  /* the short horizontal line from each dot to the vertical line */
  .net-side li::after { content: ""; position: absolute; top: 12px; width: 60px; height: 2px; background: var(--ink); }
  .net-left li::after { right: 0; }
  .net-right li::after { left: 0; }
  .net-side li.off::after { background: repeating-linear-gradient(90deg, rgba(17,21,48,.4) 0 6px, transparent 6px 11px); }
  .net-right li.off::before, .net-left li.off::before { background: repeating-linear-gradient(180deg, rgba(17,21,48,.4) 0 6px, transparent 6px 11px); }
  /* ERP diagram: ERP on the left, shop floor on the right, both spanning two rows; today (top) and CASCULATE (bottom) in the middle */
  .layers { grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1.4fr) 118px minmax(0, 1fr); gap: 14px 0; }
  .layers .box { display: flex; flex-direction: column; justify-content: center; }
  .layers .erp-box { grid-column: 1; grid-row: 1 / 3; }
  .layers .floor-box { grid-column: 5; grid-row: 1 / 3; }
  .tier.today { grid-column: 3; grid-row: 1; }
  .tier.with { grid-column: 3; grid-row: 2; }
  .arr { align-self: center; min-height: 16px; padding: 0 8px 10px; display: block; text-align: center; line-height: 1.3; letter-spacing: .08em; }
  .arr::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; margin: 0; }
  .arr::after { left: auto; right: 1px; bottom: -4px; margin: 0; transform: rotate(-45deg); }
  .arr.today { display: block; }
  .arr.today::before { background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 11px); }
  .arr.t-in { grid-column: 2; grid-row: 1; } .arr.t-out { grid-column: 4; grid-row: 1; }
  .arr.w-in { grid-column: 2; grid-row: 2; } .arr.w-out { grid-column: 4; grid-row: 2; }
  /* the arrows sit level with the line inside the band. Offset from the bottom of the band:
     padding 24 + half the line (straight 7, tangled 17) + border 1.5 − half the arrow stroke 1 */
  .arr.with { align-self: end; margin-bottom: 31.5px; }
  .arr.today { align-self: end; margin-bottom: 41.5px; }
  .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .phases::before { content: ""; position: absolute; top: 20px; left: 21px; right: 0; height: 3px; border-radius: 2px; background: rgba(17,21,48,.14); }
}
/* between 1000 and 1199 the boxes are narrow: padding and arrow column shrink, so long words ("Abteilungsansichten") fit */
@media (min-width: 1000px) and (max-width: 1199px) {
  .layers { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.3fr) 110px minmax(0, 1fr); }
  .layers .box, .tier { padding: 22px 20px; }
  .tier.with .mk { right: 18px; }
  .arr { padding: 0 4px 10px; }
  .oneline, .tangle { margin-left: -20px; margin-right: -20px; }
  .arr.with { margin-bottom: 29.5px; }
  .arr.today { margin-bottom: 39.5px; }
  .net-core { margin: 0 28px; }
  .net-hub::before, .net-hub::after { width: 28px; }
  .net-left a { padding-right: 44px; } .net-right a { padding-left: 44px; }
  .net-side li::after { width: 44px; }
}
@media (min-width: 1200px) { .tier.with .mk { right: 24px; top: 22px; height: 36px; } }
/* on narrow screens the three steps stack; the line runs down through the centers of the number circles */
@media (max-width: 999px) {
  .phases::before { content: ""; position: absolute; top: 21px; bottom: 30px; left: 20px; width: 3px; border-radius: 2px; background: rgba(17,21,48,.14); }
  .phases p { padding-left: 50px; }
}
@media (max-width: 599px) {
  .net-side b { font-size: 22px; }
  .stage { padding: 24px 22px; }
}