/* ==========================================================================
   About Us — the outstanding-material bands on /unternehmen/ and /en/company/.

   One idea runs through all of it: the dashed hairline is this theme's
   existing grammar for "a slot, not a thing" (see .ph in style.css). Every
   empty field here wears it, so a reader who has met one image placeholder
   already knows what an empty milestone or team card means, and no band can
   be mistaken for finished content.

   Tokens come from style.css and assets/css/sections.css. Nothing is
   redefined here.

   Scope. Every selector below that is not prefixed .cx-/.ab-/.pg- targets a
   component this sheet is allowed to reach because the component renders on
   this page and nowhere else: en_vision_mission() (#selbstverstaendnis),
   en_values() (#grundsaetze) and en_memberships() (#verbaende, .mems) are each
   called from exactly one file, page-templates/template-unternehmen.php. The
   two shapes they share with other pages — .val/.vm and .cert/.mem — are
   therefore always reached through the page-exclusive id or list class, never
   bare, so the Quality page's .cert row is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icon registry — two additions.

   These two lines belong in assets/css/icons.css beside the other twenty, and
   that is where they should be moved. They are here because this task owns
   inc/icons.php and assets/icons/lucide/ but not assets/css/icons.css, and an
   icon registered in the PHP allowlist without its url() renders a correctly
   classed span that paints nothing — silently, with no error and no failed
   request. Splitting the registry is the smaller of the two faults.

   They set mask-image rather than --en-icon, and that is not a style choice.
   A relative url() inside a custom property is resolved where the property is
   SUBSTITUTED, not where it is declared: icons.css consumes --en-icon from
   assets/css/, so `--en-icon:url("../../icons/…")` written here resolved to
   themes/essenznatur/icons/… and painted nothing — measured, not assumed.
   Declaring mask-image directly keeps the url() in this file's own rule, where
   it resolves against assets/css/zip/ as written. Equal specificity to
   .en-icon and a later sheet, so it wins on order.

   Moving them into icons.css is therefore two edits, not one: change
   ../../icons/ to ../icons/, and they may go back to the --en-icon form.

   flag   a founding event   — the first milestone
   users  people             — the team's reserved block, the careers route
   -------------------------------------------------------------------------- */
.en-icon--flag{
  -webkit-mask-image:url("../../icons/lucide/flag.svg");
  mask-image:url("../../icons/lucide/flag.svg");
}
.en-icon--users{
  -webkit-mask-image:url("../../icons/lucide/users.svg");
  mask-image:url("../../icons/lucide/users.svg");
}

/* --------------------------------------------------------------------------
   Acts — the chapter grouping.

   The page's nine bands are grouped into three acts and the white/mist
   alternation moved up from the band to the act, because alternating the
   ground between every pair of bands is what made nine bands read as nine
   equals. en_about_act() in inc/zip/85-about.php carries the full reasoning.

   Two mechanical notes:

   .cx-act > .sec beats both .sec--mist (0,1,0) and round2.css's
   .sec--mist + .sec--mist (0,2,0) on specificity, so a band inside an act
   takes the act's ground whatever class it was emitted with, and the
   two-adjacent-mist-bands guard cannot fire inside an act. It does not beat an
   id, which is why #grundsaetze no longer sets its own background.

   .cx-act-hd carries --sec-y on top and nothing on the bottom. The previous
   band's --sec-y sits above it, so a chapter break measures the same 60+60 (or
   30+30) that already separates any two bands; below it the act's first band
   contributes its own --sec-y, so the marker stands half as far from what it
   introduces as from what it follows. No new spacing value is involved, and
   .cx-act is not .sec so it never enters the section-padding measurement.
   -------------------------------------------------------------------------- */
.cx-act--mist{background:var(--band)}
.cx-act--paper{background:var(--paper)}
.cx-act > .sec{background:transparent}

.cx-act-hd{padding-top:var(--sec-y)}

/* Number, icon, label, then a rule to the container edge. The rule is what
   makes this read as a divider rather than as one more heading — it is the
   only full-width horizontal line on the page. */
.cx-act-k{
  display:flex;align-items:center;gap:var(--s-3);margin:0;
}
.cx-act-n{
  font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);
  line-height:var(--lh-micro);letter-spacing:var(--ls-micro);color:var(--sage-2);
  flex:0 0 auto;
}
.cx-act-i{width:var(--s-5);height:var(--s-5);color:var(--sage)}
.cx-act-t{
  font-family:var(--display);font-weight:var(--fw-heading);font-size:var(--fs-body);
  line-height:var(--lh-h3);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--sage);flex:0 1 auto;min-width:0;
}
.cx-act-r{flex:1 1 var(--s-6);height:1px;background:var(--line-2);min-width:var(--s-5)}
.cx-act-p{
  margin:var(--s-3) 0 0;font-size:var(--fs-small);line-height:var(--lh-small);
  color:var(--muted);max-width:64ch;
}

/* --------------------------------------------------------------------------
   Hero supporting row

   The three statements that used to be a band of three H2s. Same rule-over-
   heading device as .vm one act below, so the page opens in the grammar it
   then keeps, and at .vm's own type size rather than at H2.
   -------------------------------------------------------------------------- */
.cx-intro{
  margin-top:var(--s-8);display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.cx-intro-i{border-top:2px solid var(--sage-2);padding-top:var(--s-5)}
.cx-intro-t{font-size:var(--fs-h3);line-height:var(--lh-h3);margin:0 0 var(--s-3)}
.cx-intro-i p{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}

/* The dashed rule that stands in for a value. Sized to the line it replaces
   so a filled row and an empty one keep the same rhythm. */
.ab-blank{
  display:block;height:1px;width:100%;max-width:180px;
  border-top:1px dashed var(--line);margin:var(--s-2) 0 0;
}

.ab-sub{
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--sage);margin:0 0 var(--s-4);
}

/* --------------------------------------------------------------------------
   Hero fact strip
   -------------------------------------------------------------------------- */
.ab-facts{border:1px solid var(--line);background:var(--card);padding:var(--s-5) var(--s-5) var(--s-4)}
.ab-facts-h{
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--sage);margin:0 0 var(--s-4);
}
.ab-facts-l{margin:0;border-top:1px solid var(--line-2)}
/* flex-wrap, and a dd that is allowed to shrink. Without both, the term and
   the value are locked side by side: at 320 the English row "Facility / Pending
   confirmation" measured dt + 16px gap + a 200px dd inside a 230.4px row and
   pushed the document to scrollWidth 342 against clientWidth 320. Wrapped, the
   value drops to its own line and the row fits. */
.ab-facts-r{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding:var(--s-3) 0;border-bottom:1px solid var(--line-2);
}
.ab-facts-r dt{font-size:var(--fs-small);color:var(--ink);min-width:0}
.ab-facts-r dd{margin:0;flex:0 1 auto;min-width:0}
.ab-facts .flag{margin-top:var(--s-4)}

/* --------------------------------------------------------------------------
   Milestone rail

   Four nodes on one hairline. The rail is drawn on the node rather than
   behind the list so it survives the single-column reflow without a second
   set of rules chasing it. It stays dashed on purpose: the dash is this
   theme's "slot, not a thing", and not one date on this timeline is
   confirmed — so the rail states the status of what it carries.

   Two things changed here. The 7px dot became a disc carrying the event's own
   icon, because four identical dots differentiate nothing and four different
   marks let the row be read before the headings are; and the node became a
   flex column with a growing description, because the four chips previously
   landed at four different heights — the two-line descriptions pushed theirs
   23px below the one-line ones and the row read as ragged rather than as a
   set. p{flex:1} bottom-aligns all four against the grid row's own height.
   -------------------------------------------------------------------------- */
.ab-rail{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.ab-node{
  display:flex;flex-direction:column;align-items:flex-start;
  border-top:1px dashed var(--line);padding-top:var(--s-7);position:relative;
}
/* The disc straddles the rail: 32px tall, pulled up by half its height, so
   the dashed line runs through its centre. Its fill is the act's ground, which
   is what cuts the line rather than a second rule doing it. */
.ab-node-i{
  position:absolute;top:calc(var(--s-4) * -1);left:0;
  width:var(--s-6);height:var(--s-6);border-radius:var(--radius-full);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--sage-2);background:var(--band);color:var(--sage);
}
.cx-act--paper .ab-node-i{background:var(--paper)}
.ab-node-i .en-icon{width:var(--s-4);height:var(--s-4)}
.ab-node h3{font-size:var(--fs-h3);margin:0}
.ab-node .ab-blank{margin:var(--s-3) 0 0}
.ab-node p{
  margin:var(--s-3) 0 var(--s-4);font-size:var(--fs-small);color:var(--muted);
  max-width:30ch;flex:1 0 auto;
}

/* --------------------------------------------------------------------------
   Team cards — photo on top, fields below, per the Designer Brief
   -------------------------------------------------------------------------- */
.ab-team{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
.ab-card{border:1px solid var(--line-2);background:var(--card);display:flex;flex-direction:column}
/* Kept for en_about_team()/en_pages_team(), neither of which the Company page
   calls any more — see en_about_team_reserved(). If either is wired back on a
   band that sits on mist, --card is 4/255 away from the ground and stops being
   a boundary; this is the line to change. */
.pg-team .ab-card{border:1px dashed var(--line);background:var(--paper)}

/* --------------------------------------------------------------------------
   Reserved block

   One panel that says a thing is coming and on whose say-so, in place of a
   grid of empty fields that says nothing and looks broken. Dashed frame,
   because dashed is this theme's "slot, not a thing" throughout; the icon is
   at --s-6 rather than at text size so the panel reads as a designed object
   from across the page rather than as a paragraph that lost its band.
   -------------------------------------------------------------------------- */
.ab-reserve{
  display:flex;align-items:flex-start;gap:var(--s-5);
  border:1px dashed var(--line);background:var(--paper);
  padding:var(--s-6) var(--s-5);
}
.ab-reserve-i{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:var(--s-6);height:var(--s-6);color:var(--sage-2);
}
.ab-reserve-i .en-icon{width:100%;height:100%}
.ab-reserve-b{min-width:0}
.ab-reserve-h{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);margin:0 0 var(--s-3);
}
.ab-reserve-h > span{
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--sage);
}
.ab-reserve-b p:last-child{
  margin:0;font-size:var(--fs-small);line-height:var(--lh-small);
  color:var(--muted);max-width:62ch;
}

/* --------------------------------------------------------------------------
   Founders — approved, text-led profiles
   -------------------------------------------------------------------------- */
.ab-founders-intro{
  max-width:76ch;margin:0 0 var(--s-7);
  display:grid;gap:var(--s-3);
}
.ab-founders-intro p{margin:0;color:var(--muted)}
.ab-founders-intro p:first-child{font-size:var(--fs-body);color:var(--ink)}

.ab-founders{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
}
.ab-founder{
  display:flex;flex-direction:column;min-width:0;
  padding:var(--s-6);border:1px solid var(--line-2);border-top:2px solid var(--sage-2);
  border-radius:var(--r-md);background:var(--card);box-shadow:var(--e-1);
}
.ab-founder-head{padding-bottom:var(--s-5);border-bottom:1px solid var(--line-2)}
.ab-founder-head h3{margin:0 0 var(--s-2);font-size:var(--fs-h2)}
.ab-founder-head p{
  margin:0;font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--sage);
}
.ab-founder-bio{padding-top:var(--s-5)}
.ab-founder-bio p{margin:0 0 var(--s-4);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.ab-founder-focus{
  margin:auto 0 0;padding:var(--s-4);border-left:2px solid var(--sage-2);
  background:var(--mist);font-size:var(--fs-small);line-height:var(--lh-small);
}
.ab-founder-focus strong{color:var(--sage)}

.ab-founders-close{
  max-width:82ch;margin:var(--s-7) auto 0;padding:var(--s-7);
  border-radius:var(--r-md);background:var(--deep);color:var(--on-deep);text-align:center;
}
.ab-founders-close h3{margin:0 0 var(--s-3);font-size:var(--fs-h2);color:var(--on-deep)}
.ab-founders-close-lead{font-family:var(--display);font-size:var(--fs-h3);color:var(--on-deep)}
.ab-founders-close p{max-width:68ch;margin:0 auto var(--s-4);color:var(--on-deep-2)}
.ab-founders-close p:last-child{margin-bottom:0;font-weight:var(--fw-heading);color:var(--on-deep)}

@media (max-width:760px){
  .ab-founders{grid-template-columns:1fr}
  .ab-founder{padding:var(--s-5)}
  .ab-founders-close{padding:var(--s-6) var(--s-5)}
}

.ab-portrait{border:0;border-bottom:1px solid var(--line)}
.ab-card-b{padding:var(--gap)}
.ab-card-t{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.ab-fields{margin:0;border-top:1px solid var(--line-2)}
.ab-field{padding:var(--s-2) 0;border-bottom:1px solid var(--line-2)}
.ab-field dt{
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--muted);
}
.ab-field dd{margin:0}
.ab-field .ab-blank{max-width:none}

/* --------------------------------------------------------------------------
   Facility — the stand-in photograph

   The image is real and looks real, which is the whole problem: its own
   caption in the media library says it is not their plant and nobody outside
   wp-admin could see that. The banner below sits hard against the frame and
   is not dismissible.
   -------------------------------------------------------------------------- */
.ab-stand{margin:0 0 var(--s-6);border:1px solid var(--amber)}
.ab-stand .ph{border:0}
.ab-stand-n{
  display:flex;gap:var(--s-3);align-items:flex-start;margin:0;
  padding:var(--s-3) var(--s-4);background:var(--amber-bg);
  border-top:1px solid var(--amber-bd);
  font-size:var(--fs-micro);line-height:var(--lh-h3);color:var(--amber);
}
.ab-stand-n .pend{flex:0 0 auto}

.ab-shots{list-style:none;margin:0;padding:0}
.ab-shots li{
  padding:var(--s-2) 0 var(--s-2) var(--s-5);border-top:1px dashed var(--line);
  font-size:var(--fs-small);color:var(--muted);position:relative;
}
.ab-shots li::before{
  content:"";position:absolute;left:0;top:16px;width:10px;height:1px;background:var(--sage-2);
}

/* --------------------------------------------------------------------------
   Field lists — facility data and partner data share one form
   -------------------------------------------------------------------------- */
.ab-spec{margin:0;border-top:1px solid var(--line)}
.ab-spec-r{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-5);
  padding:var(--s-3) 0;border-bottom:1px solid var(--line-2);
}
.ab-spec-r dt{font-size:var(--fs-small);color:var(--ink)}
.ab-spec-r dt span{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:var(--s-1);max-width:36ch}
.ab-spec-r dd{margin:0;flex:0 0 auto}
/* The one row on the page that is answered. */
.ab-spec-r--on dt{color:var(--sage)}

/* --------------------------------------------------------------------------
   Partner — the deliberately empty picture column
   -------------------------------------------------------------------------- */
.ab-noimg{
  border:1px dashed var(--line);background:var(--card);padding:var(--s-6) var(--s-5);
  align-self:start;
}
.ab-noimg p{margin:0 0 var(--s-4);font-size:var(--fs-small);color:var(--muted);max-width:38ch}
.ab-noimg .ab-sub{color:var(--sage)}

.ab-cta{margin-top:0}

/* --------------------------------------------------------------------------
   Memberships row (#verbaende, .mems from inc/sections.php)

   Reached through .mems, which only en_memberships() emits, so the Quality
   page's .cert row keeps its own fill.

   No Lucide icon is added to these rows and that is a decision, not an
   omission: en_cert_mark() already draws one — a dashed ring around a check,
   the site's own mark for a credential that is claimed and not yet evidenced.
   A second icon beside it would mark the same row twice and would say the
   less specific of the two things. The act marker above the band carries
   shield-check for the whole run instead.
   -------------------------------------------------------------------------- */
.mems .mem{background:var(--paper)}
/* Three descriptions of one, two and three lines put the three chips at three
   heights. The description grows instead. */
.mems .mem-d{flex:1 0 auto}

/* --------------------------------------------------------------------------
   Values band (#grundsaetze, markup from inc/sections.php)

   The band no longer sets its own ground — its act does. The boxes keep the
   light-green fill the Designer Brief asks for, and #e8f5e9 on the act's
   #f5f5f5 is a real boundary where #e8f5e9 on white was a stronger one; the
   1px --line grid the .g2 shape ships with stays off, so what separates the
   four is the fill and 16px of band.

   On the icons. Four principles is a set, and inside a set the icons do work
   that no icon on a lone heading can: they tell the four apart before the
   headings are read. They are attached by position rather than by markup
   because inc/sections.php is not this task's to edit — which makes them
   order-dependent, so the mapping is written out. If the band's copy is ever
   reordered, reorder these with it:

     1  Nachweis vor Aussage / Evidence before claim   circle-check-big
     2  Rückverfolgbare Beschaffung / Traceable …      sprout
     3  Qualitätsdokumentation / Quality documentation file-text
     4  Technische Partnerschaft / Technical …         network

   Each is the icon this theme already uses for that referent site-wide; the
   table in inc/icons.php is the register.

   On the column floor. It was 196px, which produced four 288px tracks at
   1440 and 237px of content inside each — three pixels under the 240px the
   word "Qualitätsdokumentation" needs at --fs-h3. style.css:326 puts
   overflow-wrap:break-word on every heading, so it broke as
   "Qualitätsdokumentatio / n". 240px floor plus hyphens:auto: the floor fixes
   this word and hyphens covers the next one.
   -------------------------------------------------------------------------- */
#grundsaetze .g2{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--s-4);background:transparent;
}
#grundsaetze .g2>*{background:var(--mist);padding:var(--s-5)}
#grundsaetze .val{border-top:2px solid var(--sage-2)}
#grundsaetze .val h3{font-size:var(--fs-h3);hyphens:auto}
#grundsaetze .val p{font-size:var(--fs-small);max-width:none}

#grundsaetze .val::before{
  content:"";display:block;width:var(--s-5);height:var(--s-5);
  margin-bottom:var(--s-3);background:var(--sage);
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;
  mask-position:center;mask-repeat:no-repeat;mask-size:contain;
}
#grundsaetze .val:nth-child(1)::before{
  -webkit-mask-image:url("../../icons/lucide/circle-check-big.svg");
  mask-image:url("../../icons/lucide/circle-check-big.svg");
}
#grundsaetze .val:nth-child(2)::before{
  -webkit-mask-image:url("../../icons/lucide/sprout.svg");
  mask-image:url("../../icons/lucide/sprout.svg");
}
#grundsaetze .val:nth-child(3)::before{
  -webkit-mask-image:url("../../icons/lucide/file-text.svg");
  mask-image:url("../../icons/lucide/file-text.svg");
}
#grundsaetze .val:nth-child(4)::before{
  -webkit-mask-image:url("../../icons/lucide/network.svg");
  mask-image:url("../../icons/lucide/network.svg");
}
/* A fifth principle would arrive without a mark rather than with the wrong
   one — en_about_values_override() names five and is currently removed by
   functions.php:58. */
#grundsaetze .val:nth-child(n+5)::before{display:none}

@media (max-width:860px){
  .ab-blank{max-width:none}
  .ab-spec-r{flex-direction:column;gap:var(--s-3);align-items:flex-start}
  .ab-spec-r dt span{max-width:none}
}

/* At 375 the act marker's label, number and rule stop fitting on one line.
   The rule is decoration and goes; the number and the label stay together. */
@media (max-width:520px){
  .cx-act-r{display:none}
  .cx-intro{margin-top:var(--s-6)}
}