/* ALTHOM — the shared page system.
   site.css owns the palette, the header and the hero. home.css owns the
   homepage compositions. This file owns what both of them share: the four
   surfaces, the one heading pattern, the reveal, and the detail pages.

   DESIGN RULE, and it overrides every other instinct in this file:
   one idea per section. A headline, one visual, one short explanation, then
   the next idea. No card walls, no grids of six, no section that shows all
   of its detail at once. Depth lives on a page of its own, never spread
   across the homepage.

   Colour works in long blocks, not in component-level accents: white, a
   pale red tint, white, technical grey, one saturated brand section. Rhythm
   comes from the surfaces and the spacing, not from decoration. */

:root{
  --graphite:#1C2021;
  --tint:#FBF3F2;
  --tint-rule:#BEBEBE;       /* CI grey K25 */
  --red-deep:#9C111B;
  /* Sections are allowed to be tall. Ideas need room more than the page
     needs to show what is coming next. */
  --pad:clamp(96px, 13vh, 182px);
  --measure:min(1320px, 100%);
}

html{scroll-behavior:smooth}
h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.04em}

.site-head{position:fixed}
.site-head.stuck{
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}

.section{padding:var(--pad) var(--edge); scroll-margin-top:calc(var(--head) + 8px)}
.wrap{max-width:var(--measure); margin:0 auto}

/* Surfaces. Four of them, used in long blocks. */
.s-white{background:#fff}
.s-tint{background:var(--tint)}
.s-red{background:var(--ci-red); color:#fff}
.s-graphite{background:var(--graphite); color:#fff}

/* ---------------- the single heading pattern ----------------
   One label, one headline, at most one paragraph. Used by every section,
   which is what lets a dozen different compositions read as one page. */
/* The measure belongs on the element that carries the large type, not on
   its container. `ch` resolves against the element's own font size, so
   24ch on this wrapper meant 24 body characters, about 190px, and every
   headline broke after two words. */
.lead{max-width:min(980px, 94vw); margin:0 0 clamp(48px,7vh,110px)}
.lead.wide{max-width:min(1140px, 96vw)}
.lead-label{
  margin:0 0 clamp(22px,3vh,38px); font-family:var(--mono);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ci-red);
}
.lead h2{
  margin:0; font-size:clamp(38px, 5.6vw, 92px); line-height:.98;
  letter-spacing:-.045em; text-wrap:balance;
  max-width:min(17ch, 100%);
}
.lead h2 em{font-style:normal; color:var(--ci-grey)}
.lead p{
  margin:clamp(26px,3.4vh,44px) 0 0; max-width:54ch;
  font-size:clamp(16px,1.25vw,20px); line-height:1.58; color:var(--ink-2);
}
.s-red .lead-label{color:#F5C9CC}
.s-red .lead h2, .s-graphite .lead h2{color:#fff}
.s-red .lead h2 em{color:#F5C9CC}
.s-red .lead p{color:rgba(255,255,255,.82)}
.s-graphite .lead-label{color:#E36A72}
.s-graphite .lead p{color:rgba(255,255,255,.7)}

/* ---------------- motion ----------------
   One subtle motion per section. A mask reveal for type, a fade and rise
   for everything else, and lines that draw themselves. Nothing loops,
   nothing repeats, nothing competes. */
.reveal{opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.75,.25,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.24s}
.reveal[data-d="3"]{transition-delay:.36s}

.draw{transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.2s cubic-bezier(.2,.75,.25,1) .2s}
.in .draw{transform:scaleX(1)}

/* The panel easing, kept because the tabbed engineering view in home.css
   still drives it. Everything else that used it has been replaced. */
@keyframes open{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

/* ================ 07 · Publisher ================
   The brand takes the whole ground once. The stage itself lives in
   home.css; only the product name survives here, because it is set
   against the red surface this file defines. */
.pub-name{
  margin:0 0 clamp(26px,3.6vh,48px); font-family:var(--mono);
  font-size:clamp(11px,1vw,13px); letter-spacing:.36em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.s-red .btn.light{background:#fff; color:var(--ci-red)}
.s-red .btn.light:hover{background:var(--graphite); color:#fff}

/* ================ 10 · Hamburg and Patras ================
   Two words, one line between them, four words under each. Understood in
   five seconds, which is the whole requirement. */
.duo{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(16px,3vw,48px); margin:0 0 clamp(40px,6vh,80px);
}
.duo-city{margin:0; font-size:clamp(30px,6.2vw,104px); line-height:.9;
  letter-spacing:-.05em; font-weight:600}
.duo-city.r{text-align:right}
.duo-link{position:relative; min-width:clamp(60px,12vw,220px); height:1px;
  background:var(--rule)}
.duo-link i{position:absolute; inset:0; background:var(--ci-red); transform-origin:0 50%}
.duo-link::after{
  content:""; position:absolute; left:50%; top:-4px; width:9px; height:9px;
  margin-left:-4px; background:var(--ci-red); border-radius:50%;
  opacity:0; transition:opacity .6s ease 1.1s;
}
.in .duo-link::after{opacity:1}
.duo-feet{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,48px);
  border-top:1px solid var(--rule); padding-top:22px}
.duo-feet p{margin:0; font-family:var(--mono); font-size:clamp(10px,.95vw,12px);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); line-height:2}
.duo-feet p:last-child{text-align:right}
.duo-note{margin:clamp(40px,6vh,80px) 0 0; max-width:60ch;
  font-size:clamp(15.5px,1.15vw,18px); line-height:1.62; color:var(--ink-2)}

/* ================ 11 · proof ================
   Five facts at scale. No paragraph beside any of them. */
.proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(30px,4vw,60px) clamp(20px,3vw,44px); border-top:1px solid var(--rule);
  padding-top:clamp(36px,5vh,64px)}
.proof div{min-width:0}
.proof b{display:block; font-size:clamp(26px,3.4vw,52px); line-height:1;
  letter-spacing:-.045em; margin-bottom:12px}
.proof span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.7}

/* ================ 09 · industries ================
   A list at display size. The description belongs to the row the visitor is
   on and to no other. On touch, where there is no hover, every description
   is simply shown. */
.inds{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.ind{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,4vw,70px); align-items:center;
  padding:clamp(24px,3.4vh,46px) 0; border-bottom:1px solid var(--rule);
}
.ind h3{font-size:clamp(28px,4.6vw,74px); line-height:.98; letter-spacing:-.05em;
  color:var(--ink-3); transition:color .45s ease}
.ind:hover h3, .ind:focus-within h3{color:var(--ci-red)}
.ind p{margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-2); max-width:42ch;
  opacity:0; transform:translateX(-12px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.75,.25,1)}
.ind:hover p, .ind:focus-within p{opacity:1; transform:none}

/* ================ 14 · closing ================ */
.close{max-width:min(1100px, 96vw)}
.close h2{font-size:clamp(42px,7.4vw,124px); line-height:.94; letter-spacing:-.05em;
  color:#fff; margin:0; max-width:min(15ch, 100%)}
.close h2 em{font-style:normal; color:var(--ci-red)}
.close .actions{margin-top:clamp(40px,6vh,76px)}
.close-meta{margin:clamp(56px,8vh,110px) 0 0; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.2);
  display:flex; gap:clamp(24px,5vw,80px); flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.55)}
.close-meta a{color:#fff; text-decoration:none}
.close-meta a:hover{color:var(--ci-red)}

/* ---------------- footer ----------------
   Light, on the paper tone of the page. The claim closes the page with one
   call to action; the two locations sit side by side with their local time;
   the page links, one line of credentials and one base line follow. Built
   by _werkzeuge/althom-footer.mjs. */
.site-foot{background:var(--paper); border-top:1px solid var(--rule);
  padding:clamp(64px,10vh,128px) var(--edge) 28px}
.site-foot a{color:inherit; text-decoration:none; transition:color .2s}
.site-foot a:hover{color:var(--ci-red)}
.site-foot .btn, .site-foot .btn:hover{color:#fff}
.site-foot p{margin:0}
.sf-top{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:28px 48px}
.sf-logo{grid-column:1 / -1; height:64px; width:auto; margin-bottom:clamp(20px,3vh,36px)}
.sf-claim{font-size:clamp(34px,4.6vw,76px); line-height:1.02; letter-spacing:-.04em; font-weight:600;
  color:var(--ink); text-wrap:balance}
.sf-claim em{font-style:normal; color:var(--ink-2)}
.sf-cta{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.sf-mail{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-2); padding:4px 0}
.sf-sites{display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(56px,8vh,96px); border-top:1px solid var(--ink)}
.sf-site{padding:28px clamp(0px,3vw,48px) 30px 0}
.sf-site + .sf-site{border-left:1px solid var(--rule); padding-left:clamp(20px,3vw,48px)}
.sf-site p{margin:0 0 8px; font-size:14px; line-height:1.7; color:var(--ink-2)}
.sf-site .sf-k{margin:0 0 14px; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ci-red)}
.sf-site .sf-name{margin:0 0 10px; font-size:clamp(20px,1.8vw,26px); letter-spacing:-.03em;
  font-weight:600; color:var(--ink)}
.sf-site a{display:inline-block; padding:3px 0}
.sf-reg{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3)}
.sf-site .sf-time{display:flex; align-items:center; gap:9px; margin-top:14px; font-family:var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.sf-time i{width:6px; height:6px; border-radius:50%; background:var(--ci-red);
  animation:sfPulse 2.4s ease-in-out infinite}
@keyframes sfPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.sf-time time{color:var(--ink); letter-spacing:.06em}
.sf-nav{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 32px;
  padding:18px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.sf-nav nav{display:flex; flex-wrap:wrap; gap:4px 28px}
.sf-nav nav a{font-size:15px; color:var(--ink); padding:6px 0}
.sf-li{display:inline-flex; align-items:center; gap:10px; padding:6px 0; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.sf-creds{margin-top:18px !important; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.sf-base{display:flex; flex-wrap:wrap; align-items:center; gap:6px 32px; margin-top:clamp(40px,6vh,72px);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.sf-base > p:first-child{flex:1}
.sf-legal{display:flex; flex-wrap:wrap; gap:4px 24px}
.sf-legal a, .sf-legal button, .sf-credit a{display:inline-block; padding:6px 0; color:var(--ink-2)}
.sf-legal button{background:none; border:0; font:inherit; letter-spacing:inherit; text-transform:inherit;
  cursor:pointer; transition:color .2s}
.sf-legal button:hover{color:var(--ci-red)}
.sf-note{margin-top:12px !important; font-size:12px; line-height:1.7; color:var(--ink-3); max-width:80ch}
@media (max-width: 900px){
  .sf-top{grid-template-columns:1fr}
  .sf-sites{grid-template-columns:1fr}
  .sf-site + .sf-site{border-left:0; border-top:1px solid var(--rule); padding-left:0}
  .sf-base > p:first-child{flex:0 0 100%}
}
@media (prefers-reduced-motion: reduce){ .sf-time i{animation:none} }

/* ---------------- narrow ---------------- */
@media (max-width: 900px){
  :root{--pad:clamp(72px, 11vh, 120px)}
  .duo-feet, .ind{grid-template-columns:1fr; gap:16px}
  .duo{grid-template-columns:1fr; gap:14px; text-align:left}
  .duo-city.r{text-align:left}
  .duo-link{width:100%; min-width:0; margin:6px 0}
  .duo-feet p:last-child{text-align:left}
  /* No hover on touch, so the descriptions are simply present. */
  .ind p{opacity:1; transform:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .draw{transform:none; transition:none}
  .duo-link::after{opacity:1; transition:none}
  /* The description still belongs to the row being read. Reduced motion
     asks for less movement, not for all six descriptions at once: setting
     opacity to 1 here turned the editorial list into a wall of text for
     exactly the visitors who asked for calm. Only the travel is removed. */
  .ind p{transform:none; transition:none}
  .ind h3{transition:none}
}

/* Without a pointer there is nothing to hover, so the descriptions are
   simply present. This is about the input device, not about motion. */
@media (hover: none){
  .ind p{opacity:1; transform:none}
}

/* ============================================================
   DETAIL PAGES
   Everything below is used only by expertise.html, company.html and
   careers.html. The homepage deliberately does not load any of these
   patterns: depth lives here, so the front page can stay quiet.

   Same rules as the homepage, one level denser. A page someone opened on
   purpose may ask more of them than a page they landed on.
   ============================================================ */

/* The subpage opener. No canvas, no film: a label, a title, one paragraph
   and a rule. It has to be recognisably the same family as the homepage
   sections without pretending to be a hero. */
.page-head{
  background:var(--tint); border-bottom:1px solid var(--tint-rule);
  padding:calc(var(--head) + 8px + clamp(60px,9vh,130px)) var(--edge) clamp(56px,8vh,110px);
}
.page-head .wrap{max-width:var(--measure); margin:0 auto}
.page-head .crumb{
  margin:0 0 clamp(22px,3vh,38px); font-family:var(--mono); font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ci-red);
}
.page-head .crumb a{color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px}
.page-head .crumb a:hover{color:var(--ci-red)}
.page-head h1{
  margin:0; font-size:clamp(40px,6.4vw,104px); line-height:.96; letter-spacing:-.048em;
  max-width:min(16ch,100%); text-wrap:balance; font-weight:600;
}
.page-head h1 em{font-style:normal; color:var(--ci-grey)}
.page-head p{
  margin:clamp(26px,3.4vh,44px) 0 0; max-width:60ch;
  font-size:clamp(16px,1.2vw,19px); line-height:1.6; color:var(--ink-2);
}

/* A register: hanging code, title, body. The one repeating row pattern on
   the detail pages, used for capability groups, milestones and jobs, so
   three long pages still read as one system. */
.reg{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.reg > li{
  display:grid; grid-template-columns:clamp(72px,7vw,132px) minmax(0,.8fr) minmax(0,1.4fr);
  column-gap:clamp(20px,3vw,56px);
  padding:clamp(28px,3.6vh,54px) 0; border-bottom:1px solid var(--rule);
}
.reg-code{margin:0; padding-top:8px; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--ci-red)}
.reg h3{font-size:clamp(22px,2.4vw,38px); line-height:1.02; letter-spacing:-.04em}
.reg h3 span{display:block; margin-top:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.reg-body > p{margin:0 0 18px; font-size:15.5px; line-height:1.62; color:var(--ink-2);
  max-width:56ch}
.reg-body ul{list-style:none; margin:0; padding:0;
  columns:2; column-gap:clamp(20px,3vw,48px)}
.reg-body li{break-inside:avoid; padding:0 0 9px; font-size:14.5px; line-height:1.5;
  color:var(--ink-2)}
.reg-body li::before{content:""; display:inline-block; width:7px; height:1px;
  background:var(--ci-red); vertical-align:middle; margin-right:11px}
.reg-body ul.one{columns:1}

/* A plain data table for facts that really are a table: certificate
   numbers, validity, scopes. */
.data{width:100%; border-collapse:collapse; font-size:15px;
  border-top:1px solid var(--ink)}
.data th, .data td{text-align:left; padding:16px 20px 16px 0; vertical-align:top;
  border-bottom:1px solid var(--rule)}
.data th{font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400; width:clamp(150px,20vw,270px)}
.data td{color:var(--ink-2)}
.data td b{color:var(--ink); font-weight:600}
.data td .mono{font-family:var(--mono); font-size:13px; letter-spacing:.04em}

/* Leadership. The frame holds the photograph; the initials behind a drawing
   hatch remain as the fallback for a person without one. Portraits sit in
   greyscale, in keeping with the drawings around them, and take their
   colour when the card is hovered. */
/* Four, two, one. auto-fit chose three at some widths and left the fourth
   person alone on a row of her own, which reads as a mistake rather than
   as a layout. With four items the column count is worth deciding. */
.people{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,34px)}
@media (max-width:1180px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.people{grid-template-columns:1fr}}
.person{position:relative; padding:clamp(24px,2.2vw,34px); border:1px solid var(--rule);
  display:flex; flex-direction:column; gap:13px; transition:border-color .35s, background .35s}
.person:hover{border-color:var(--ink-3); background:#fff}
.person-photo{
  position:relative; aspect-ratio:4/5; overflow:hidden; display:grid; place-items:center;
  margin:calc(-1 * clamp(24px,2.2vw,34px)) calc(-1 * clamp(24px,2.2vw,34px)) 6px;
  border-bottom:1px solid var(--rule); background:var(--paper-3);
  background-image:repeating-linear-gradient(-45deg,
    transparent 0 8px, rgba(118,124,122,.09) 8px 9px);
}
.person-photo span{font-family:var(--mono); font-size:clamp(20px,2.2vw,28px);
  letter-spacing:.24em; color:var(--ink-3); padding-left:.24em}
.person-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.03); transition:filter .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1)}
.person:hover .person-photo img, .people-line li:hover .person-photo img{filter:none; transform:scale(1.025)}
@media (prefers-reduced-motion: reduce){ .person-photo img{transition:none} .person:hover .person-photo img, .people-line li:hover .person-photo img{transform:none} }
.person-photo::before, .person-photo::after{content:""; position:absolute; z-index:1;
  width:10px; height:10px; border-color:var(--ci-red); border-style:solid}
.person-photo::before{top:9px; left:9px; border-width:1px 0 0 1px}
.person-photo::after{bottom:9px; right:9px; border-width:0 1px 1px 0}
.person-role{margin:0; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ci-red)}
.person h3{font-size:clamp(19px,1.5vw,23px); line-height:1.18}
.person-bio{margin:0; font-size:13.6px; line-height:1.64; color:var(--ink-2); flex:1}
.person-since{margin:0; display:flex; justify-content:space-between; gap:12px;
  padding-top:14px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3)}
.person-since b{color:var(--ink); font-weight:400}
.person-con{margin:0; display:flex; flex-direction:column; gap:5px;
  font-family:var(--mono); font-size:11px}
.person-con a{color:var(--ink-2); text-decoration:none; overflow-wrap:anywhere}
.person-con a:hover{color:var(--ci-red)}

/* Jobs. The keyword is the loudest thing in the row because it is what the
   applicant has to put in the subject line. */
.job-act a{display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule);
  padding-bottom:5px; transition:color .2s, border-color .2s}
.job-act a:hover{color:var(--ci-red); border-color:var(--ci-red)}
.job-meta{margin:14px 0 0; display:flex; flex-wrap:wrap; gap:6px 18px;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3)}

/* A quiet block for the things that need saying once and no more: the
   recruitment note, the confidentiality note, the application route. */
.aside-note{margin:clamp(44px,6vh,80px) 0 0; padding-top:24px;
  border-top:1px solid var(--rule); max-width:66ch;
  font-size:15px; line-height:1.66; color:var(--ink-2)}
.aside-note b{color:var(--ink)}
.aside-note a{color:var(--ci-red); text-decoration:underline; text-underline-offset:3px}
.aside-note a:hover{text-decoration-thickness:2px}

@media (max-width: 900px){
  .reg > li{grid-template-columns:1fr; gap:14px}
  .reg-body ul{columns:1}
  .data th{width:auto; display:block; padding-bottom:4px; border:0}
  .data td{display:block; padding-top:0}
  .data tr{display:block; border-bottom:1px solid var(--rule); padding:14px 0}
  .data th, .data td{border-bottom:0}
}

/* ---------------- newsroom ----------------
   A dated list, newest first, with a narrow column beside it for the two
   standing links: LinkedIn for the day-to-day, and a press contact. Each
   item is date and category in mono, a headline, one paragraph and one
   onward link. Nothing else, so a new item is a copy of the block above. */
.news-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(34px,6vw,110px); align-items:start}
.news{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.news-item{padding:clamp(30px,4.4vh,54px) 0; border-bottom:1px solid var(--rule)}
.news-meta{display:flex; gap:18px; margin:0 0 16px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.news-meta span{color:var(--ci-red)}
.news-item h2{font-size:clamp(24px,2.6vw,40px); line-height:1.04; letter-spacing:-.04em;
  max-width:24ch}
.news-item > p:not(.news-meta){margin:18px 0 0; max-width:62ch; font-size:16px;
  line-height:1.62; color:var(--ink-2)}
.news-more{display:inline-flex; gap:10px; margin-top:20px; font-size:12.5px;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  transition:color .2s}
.news-more:hover{color:var(--ci-red)}
.news-side{position:sticky; top:calc(var(--head) + 30px); display:grid; gap:18px}
.news-box{border:1px solid var(--rule); padding:clamp(22px,2.2vw,30px); background:var(--paper-2)}
.news-box h3{font-size:19px; letter-spacing:-.03em}
.news-box p{margin:10px 0 18px; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.news-links{display:grid; gap:8px; margin-bottom:0!important}
.news-links a{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:6px}
.news-links a:hover{color:var(--ci-red); border-color:var(--ci-red)}
@media (max-width: 900px){
  .news-wrap{grid-template-columns:1fr}
  .news-side{position:static}
}

/* ---------------- legal pages ----------------
   Impressum and Datenschutz: plain reading at a comfortable measure, the
   section numbers in red mono so a long text can be scanned by number. */
.legal{max-width:74ch}
.legal h2{display:flex; gap:16px; align-items:baseline; margin:clamp(40px,5vh,60px) 0 14px;
  font-size:clamp(20px,1.8vw,26px); line-height:1.2; letter-spacing:-.03em;
  scroll-margin-top:calc(var(--head) + 20px)}
.legal h2:first-child{margin-top:0}
.legal h2 span{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ci-red);
  font-weight:400; min-width:2.2em}
.legal p, .legal li{font-size:15.5px; line-height:1.68; color:var(--ink-2)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px; padding-left:20px}
.legal li{margin-bottom:6px}
.legal li::marker{color:var(--ci-red)}
.legal a{color:var(--ink); text-underline-offset:3px; text-decoration-color:var(--rule)}
.legal a:hover{color:var(--ci-red); text-decoration-color:var(--ci-red)}
.legal-note{font-family:var(--mono); font-size:11px!important; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3)!important; margin-bottom:28px!important}
.legal-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px clamp(24px,4vw,60px);
  border-top:1px solid var(--rule); padding-top:30px}
.legal-grid h2{display:block; margin:0 0 10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ci-red); font-weight:400}
@media (max-width: 620px){ .legal-grid{grid-template-columns:1fr} }

/* ---------------- cookie consent ----------------
   A card in the bottom corner rather than a wall across the page: the site
   stays readable while the choice is open. Both buttons are identical in
   size and weight. */
.consent{position:fixed; z-index:60; right:clamp(12px,2vw,28px); bottom:clamp(12px,2vw,28px);
  width:min(440px, calc(100vw - 24px)); background:var(--paper-2, #FBFAF8); color:var(--ink);
  border:1px solid var(--rule); border-top:3px solid var(--ci-red);
  box-shadow:0 24px 60px -24px rgba(20,20,20,.35); padding:20px 22px 18px; outline:none;
  animation:consentIn .4s cubic-bezier(.2,.75,.25,1)}
@keyframes consentIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.consent-title{margin:0 0 8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ci-red)}
.consent-text{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.consent-text em{font-style:normal; color:var(--ink)}
.consent-text a{color:var(--ink); text-underline-offset:3px}
.consent-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 0}
.consent-btn{min-height:44px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font:inherit; font-size:12px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition:background .2s, border-color .2s}
.consent-btn:hover, .consent-btn:focus-visible{background:var(--ci-red); border-color:var(--ci-red)}
@media (prefers-reduced-motion: reduce){ .consent{animation:none} }
.consent-facts{margin:12px 0 0; display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; font-size:11.5px; line-height:1.45}
.consent-facts div{display:contents}
.consent-facts dt{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-top:1px}
.consent-facts dd{margin:0; color:var(--ink-2)}

/* "German only" note above the legal text on the English and Greek routes. */
.legal-lang-note{max-width:660px; margin:0 0 28px; padding:14px 18px; border-left:2px solid var(--ci-red);
  background:var(--paper-3); font-size:14px; line-height:1.55; color:var(--ink-2)}

/* Touch targets of at least 24px for the small text links (WCAG 2.2, 2.5.8). */
.person-con a{display:inline-block; padding:5px 0}


/* Company page: the four certificate documents in the quality table. */
.doc-links a{display:inline-block; margin:0 22px 6px 0; padding:4px 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink-3)}
.doc-links a:hover, .doc-links a:focus-visible{color:var(--ci-red); border-color:var(--ci-red)}

/* Newsroom: the media contact. */
.news-box .press-name{margin:18px 0 2px; font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.news-box .press-role, .news-box .press-org{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.7}
.news-box .press-org + .news-links{margin-top:16px}