@font-face{font-family:'Open Sans Condensed';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/OpenSansCondensed-Light.woff2') format('woff2');}
@font-face{font-family:'Open Sans Condensed';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/OpenSansCondensed-Bold.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/OpenSans-Regular.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/OpenSans-SemiBold.woff2') format('woff2');}

/* ============================================================
   GRO-EB — Designsystem
   CD: Reflex Blue #003D99, Navy #080F1A, Grau #4D4D4D
   Schrift: Open Sans Condensed (Display) / Open Sans (Text)
   ============================================================ */

:root{
  --paper:        #ffffff;
  --paper-2:      #f3f6fb;

  --blue:         #003d99;
  --blue-deep:    #002356;
  --navy:         #080f1a;
  --blue-bright:  #1d5fd4;
  --blue-wash:    #e6edf9;

  --ink:          #4d4d4d;
  --ink-strong:   #333333;
  --ink-soft:     #5b6572;
  --ink-mute:     #646e80;
  --rule:         #dde3ec;
  --rule-strong:  #c3ccda;

  --on-dark:      #ffffff;
  --on-dark-soft: rgba(255,255,255,.76);
  --on-dark-mute: rgba(255,255,255,.62);
  --on-dark-rule: rgba(255,255,255,.16);

  --display: 'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
  --text:    'Open Sans',Arial,sans-serif;

  --t-display: clamp(2.5rem, 5vw, 4.3rem);
  --t-h2:      clamp(2rem, 4.1vw, 3.3rem);
  --t-h3:      clamp(1.3rem, 2vw, 1.62rem);
  --t-lead:    clamp(1.06rem, 1.35vw, 1.2rem);
  --t-body:    1.02rem;
  --t-small:   .92rem;

  --shell: 1240px;
  --gut: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ overflow-x:clip; max-width:100%; }
body{
  margin:0; font-family:var(--text); font-size:var(--t-body);
  line-height:1.62; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1.1em; max-width:68ch; }

h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; margin:0;
  line-height:1.05; letter-spacing:-.005em; color:var(--blue-deep);
  text-wrap:balance;
}
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); }

:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; }

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; top:12px; left:12px; z-index:999;
  background:var(--blue); color:#fff; padding:14px 20px;
  font-family:var(--display); font-weight:700;
  clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap;
}
.skip:focus{ clip-path:none; width:auto; height:auto; }

.band{ padding-block:clamp(64px, 9vw, 130px); }
.band--tight{ padding-block:clamp(46px, 6vw, 82px); }
.band--paper2{ background:var(--paper-2); }
.band--deep{ background:var(--blue-deep); color:var(--on-dark-soft); }
.band--deep h2{ color:var(--on-dark); }

.lede{ max-width:56ch; margin-bottom:clamp(36px,5vw,60px); }
.lede p{ font-size:var(--t-lead); color:var(--ink-soft); margin:.85em 0 0; }
.band--deep .lede p{ color:var(--on-dark-soft); }

.node{ width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; display:inline-block; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--blue); --fg:#fff; --bd:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--display); font-weight:700; font-size:1.04rem;
  padding:16px 30px; min-height:54px;
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd); border-radius:2px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .18s var(--ease);
}
.btn:hover{ --bg:var(--blue-bright); --bd:var(--blue-bright); }
.btn:active{ transform:translateY(1px); }
.btn--line{ --bg:transparent; --fg:var(--blue); --bd:var(--rule-strong); }
.btn--line:hover{ --bg:var(--blue); --fg:#fff; --bd:var(--blue); }
.btn--onDark{ --bg:transparent; --fg:#fff; --bd:var(--on-dark-rule); }
.btn--onDark:hover{ --bg:rgba(255,255,255,.1); --bd:rgba(255,255,255,.5); }

/* ---------- Kopfbereich ---------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
          backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
/* Ohne Weichzeichner wuerde die Ueberschrift durch den Streifen scheinen
   und das Menue unlesbar machen - dann deckend. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .masthead{ background:#fff; }
}
.masthead.is-stuck{ border-bottom-color:var(--rule); background:rgba(255,255,255,.96); }
.masthead__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:88px; transition:height .3s var(--ease);
}
.masthead.is-stuck .masthead__in{ height:70px; }

.brand{ display:inline-flex; align-items:center; flex:none; }
.brand img{ height:46px; width:auto; transition:height .3s var(--ease); }
.masthead.is-stuck .brand img{ height:38px; }

.mainnav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,32px); margin-left:auto; }
.mainnav a{
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  color:var(--ink-strong); padding:8px 0; position:relative;
}
.mainnav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:2px; height:2px;
  background:var(--blue); transition:right .32s var(--ease);
}
.mainnav a:hover::after{ right:0; }
.mainnav a[aria-current="page"]{ color:var(--blue); }
.mainnav a[aria-current="page"]::after{ right:0; }

.mast-tools{ display:flex; align-items:center; gap:14px; flex:none; }
.lang{ display:flex; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.lang button{
  font-family:var(--display); font-weight:700; font-size:.9rem;
  background:transparent; border:0; color:var(--ink-mute);
  padding:8px 12px; cursor:pointer; transition:.2s var(--ease); min-height:38px;
}
.lang button:hover{ color:var(--ink-strong); }
.lang button.is-on{ background:var(--blue); color:#fff; }

/* Bestaetigungsseite nach dem Absenden des Formulars (mail-handler.php).
   Eigene Klasse statt style-Attribut, weil die Content-Security-Policy
   keine eingebetteten Formatangaben zulaesst. */
.thanks{ padding-block:clamp(80px,12vw,160px); max-width:60ch; }
.thanks h1{ margin-bottom:16px; }

/* Spamschutz-Feld im Kontaktformular: aus dem Bild geschoben statt
   display:none, weil viele Bots ausgeblendete Felder erkennen und
   ueberspringen. Fuer Vorlesesoftware ist es per aria-hidden weg. */
.trap{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.burger{
  display:none; width:46px; height:46px; padding:11px;
  background:transparent; border:1px solid var(--rule); border-radius:2px; cursor:pointer;
}
.burger span{ display:block; height:1.5px; background:var(--ink-strong); margin:5px 0; transition:.3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; background:var(--paper); overflow:hidden; }
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(32px,5vw,72px); align-items:center;
  padding-block:clamp(52px,7vw,100px);
}
.lattice{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 34%,#000 62%);
  mask-image:linear-gradient(100deg,transparent 0%,transparent 34%,#000 62%);
}
.lattice circle{ fill:var(--blue); opacity:.055; }
.lattice path{ stroke:var(--blue); stroke-width:1.1; fill:none; opacity:.13; }

.hero__text{ position:relative; z-index:1; }
.hero h1{
  font-size:var(--t-display); line-height:1.06; letter-spacing:-.018em;
  color:var(--blue-deep); margin-bottom:.4em;
}
/* Die Maske fuer die Einblend-Animation muss unter den Unterlaengen liegen,
   sonst werden g/j/p in Zeilen wie "gelten"/"Regeln" abgeschnitten. */
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.hero h1 .ln > span{ display:block; }
.hero__sub{ font-size:var(--t-lead); color:var(--ink-soft); max-width:46ch; margin-bottom:2em; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__side{ position:relative; z-index:1; }
/* picture ist nur ein Behaelter fuer die Formatauswahl und soll das
   Layout nicht beeinflussen - alle img-Regeln greifen unveraendert. */
picture{ display:contents; }
.hero__shot{ position:relative; aspect-ratio:4/3.1; overflow:hidden; background:var(--blue-wash); }
.hero__shot img{ width:100%; height:100%; object-fit:cover; }
.hero__shot::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(0,35,86,.12); }

.facts{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--rule); }
.facts > div{ padding:16px 18px 14px; border-bottom:1px solid var(--rule); }
.facts > div:nth-child(odd){ border-right:1px solid var(--rule); }
.facts dt{ font-size:.86rem; color:var(--ink-mute); margin-bottom:2px; }
.facts dd{
  margin:0; font-family:var(--display); font-weight:700; font-size:1.18rem;
  color:var(--blue-deep); font-variant-numeric:tabular-nums;
}

/* ============================================================
   VERSPRECHEN
   ============================================================ */
.promise{ border-block:1px solid var(--rule); }
.promise__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.promise__item{ padding:32px clamp(22px,2.6vw,36px); border-right:1px solid var(--rule); }
.promise__item:first-child{ padding-left:0; }
.promise__item:last-child{ border-right:0; padding-right:0; }
.promise__item h3{
  font-size:1.1rem; color:var(--ink-strong); margin-bottom:.35em;
  display:flex; align-items:baseline; gap:9px;
}
.promise__item p{ font-size:var(--t-small); color:var(--ink-soft); margin:0; }

/* ============================================================
   INTRO
   ============================================================ */
.intro__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,6vw,86px); align-items:start;
}
.intro__body h2{ margin:.3em 0 .7em; }
.intro__body p:first-of-type{ font-size:var(--t-lead); color:var(--ink-strong); }
.intro__shot img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; background:var(--blue-wash); }
.intro__quote{
  margin-top:22px; padding-top:20px; border-top:2px solid var(--blue);
  font-family:var(--display); font-weight:700; font-size:1.3rem;
  line-height:1.24; color:var(--blue-deep); max-width:32ch;
}

/* ============================================================
   LEISTUNGEN (Startseite)
   ============================================================ */
.svc{ border-top:1px solid var(--rule); }
.svc__row{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px); padding-block:clamp(34px,4vw,50px);
  border-bottom:1px solid var(--rule); position:relative;
}
.svc__row::before{
  content:''; position:absolute; left:0; top:-1px; height:2px; width:0;
  background:var(--blue); transition:width .55s var(--ease-out);
}
.svc__row:hover::before{ width:100%; }
.svc__name{ display:flex; align-items:flex-start; gap:14px; }
.svc__name .node{ margin-top:.62em; transition:transform .4s var(--ease); }
.svc__row:hover .svc__name .node{ transform:scale(1.8); }
.svc__claim{ font-size:var(--t-lead); color:var(--ink-strong); margin:0 0 1.1em; max-width:52ch; }
.svc__list{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.svc__list li{
  font-size:var(--t-small); color:var(--ink-soft);
  border:1px solid var(--rule); padding:6px 12px; background:var(--paper);
}

/* ============================================================
   KENNZAHLEN
   ============================================================ */
.metrics__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.metric b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2.4rem,4.4vw,3.4rem); line-height:1;
  color:var(--on-dark); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.metric--tight b{ font-size:clamp(2rem,3.4vw,2.7rem); }
.metric span{ display:block; margin-top:.5em; font-size:var(--t-small); color:var(--on-dark-soft); }

/* ============================================================
   ABLAUF — echte Abfolge, daher nummeriert
   ============================================================ */
.flow{ position:relative; }
.flow__rail{ position:absolute; left:0; right:0; top:19px; height:2px; background:var(--rule); z-index:0; }
.flow__rail i{ display:block; height:100%; width:0; background:var(--blue); transition:width 1.2s var(--ease-out); }
.flow__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,36px); position:relative; z-index:1; }
.step__dot{
  width:40px; height:40px; border-radius:50%;
  background:var(--paper-2); border:2px solid var(--rule-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:.98rem;
  color:var(--ink-mute); font-variant-numeric:tabular-nums; margin-bottom:22px;
  transition:background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.flow.is-live .step__dot{ background:var(--blue); border-color:var(--blue); color:#fff; }
.flow.is-live .step:nth-child(1) .step__dot{ transition-delay:.05s; }
.flow.is-live .step:nth-child(2) .step__dot{ transition-delay:.28s; }
.flow.is-live .step:nth-child(3) .step__dot{ transition-delay:.51s; }
.flow.is-live .step:nth-child(4) .step__dot{ transition-delay:.74s; }
.step h3{ font-size:1.22rem; margin-bottom:.4em; }
.step p{ font-size:var(--t-small); color:var(--ink-soft); margin:0; }
.band--deep .step__dot{ background:rgba(255,255,255,.08); border-color:var(--on-dark-rule); color:var(--on-dark-mute); }
.band--deep .flow__rail{ background:var(--on-dark-rule); }
.band--deep .flow__rail i{ background:#5b9bff; }
.band--deep .flow.is-live .step__dot{ background:#5b9bff; border-color:#5b9bff; color:var(--navy); }
.band--deep .step p{ color:var(--on-dark-soft); }
.band--deep .step h3{ color:var(--on-dark); }

/* ============================================================
   SCOPE
   ============================================================ */
.scope{ background:var(--blue-deep); color:var(--on-dark-soft); }
.scope h2{ color:var(--on-dark); }
.scope .lede p{ color:var(--on-dark-soft); }
.scope__in{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,80px);
  padding-top:clamp(28px,4vw,46px); border-top:1px solid var(--on-dark-rule);
}
.scope__col h3{
  font-size:1.14rem; color:var(--on-dark); margin-bottom:1.1em;
  padding-bottom:.7em; border-bottom:1px solid var(--on-dark-rule);
}
.scope__col li{
  font-size:1.05rem; line-height:1.45; padding:13px 0 13px 30px;
  position:relative; color:var(--on-dark);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.scope__col--yes li::before{
  content:''; position:absolute; left:2px; top:1.15em;
  width:9px; height:9px; border-radius:50%; background:#5b9bff;
}
.scope__col--no li{ color:var(--on-dark-mute); }
.scope__col--no li::before{
  content:''; position:absolute; left:2px; top:1.42em;
  width:11px; height:1.5px; background:var(--on-dark-mute);
}
.scope__note{ margin-top:1.4em; font-size:var(--t-small); color:var(--on-dark-soft); max-width:42ch; }

/* ============================================================
   REFERENZEN
   ============================================================ */
.refs{ border-top:1px solid var(--rule); }
.refs__row{
  display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(16px,3vw,40px); align-items:baseline;
  padding-block:26px; border-bottom:1px solid var(--rule);
  transition:padding-left .4s var(--ease), background .4s var(--ease);
}
.refs__row:hover{ padding-left:14px; background:var(--paper-2); }
.refs__sector{ font-size:var(--t-small); color:var(--ink-mute); }
.refs__name{ font-family:var(--display); font-weight:700; font-size:1.24rem; color:var(--blue-deep); }
.refs__what{ font-size:var(--t-small); color:var(--ink-soft); margin:0; }

/* ============================================================
   TEAM
   ============================================================ */
.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,32px); }
.person{
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:22px; align-items:center;
  padding:26px; border:1px solid var(--rule); background:var(--paper);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.person:hover{ border-color:var(--rule-strong); box-shadow:0 14px 40px rgba(0,35,86,.08); }
.person__pic{ width:104px; height:104px; border-radius:50%; overflow:hidden; background:var(--blue-wash); }
.person__pic img{ width:100%; height:100%; object-fit:cover; }
.person h3{ font-size:1.26rem; margin-bottom:.15em; }
.person__role{ font-size:var(--t-small); color:var(--ink-mute); display:block; margin-bottom:.6em; }
.person p{ font-size:var(--t-small); color:var(--ink-soft); margin:0 0 .7em; }
.person a{
  display:inline-block; padding:5px 0; font-size:var(--t-small);
  color:var(--blue); font-weight:600; border-bottom:1px solid var(--blue-wash);
}
.person a:hover{ border-bottom-color:var(--blue); }

/* ============================================================
   QUALITAET
   ============================================================ */
.quality{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(32px,5vw,72px); }
.quality li{
  padding:22px 0; border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start;
}
.quality .node{ margin-top:.55em; }
.quality h3{ font-size:1.08rem; color:var(--ink-strong); margin-bottom:.25em; }
.quality p{ font-size:var(--t-small); color:var(--ink-soft); margin:0; }

/* ============================================================
   TEASER (Sparten-Querverweis)
   ============================================================ */
.teaser{ background:var(--navy); color:var(--on-dark-soft); position:relative; overflow:hidden; }
.teaser__in{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px); align-items:center; position:relative; z-index:1;
}
.teaser h2{ color:var(--on-dark); margin-bottom:.5em; }
.teaser p{ color:var(--on-dark-soft); font-size:var(--t-lead); }
.teaser__flag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:.94rem;
  color:#8fb8ff; margin-bottom:1.1em;
}
.teaser__flag .node{ background:#5b9bff; }
.teaser__pts{ margin:0 0 2em; }
.teaser__pts li{
  padding:12px 0 12px 28px; position:relative;
  border-bottom:1px solid rgba(255,255,255,.1); font-size:1rem; color:var(--on-dark);
}
.teaser__pts li::before{
  content:''; position:absolute; left:2px; top:1.3em;
  width:8px; height:8px; border-radius:50%; background:#5b9bff;
}
.teaser .btn{ --bg:#fff; --fg:var(--navy); --bd:#fff; }
.teaser .btn:hover{ --bg:var(--blue-wash); --bd:var(--blue-wash); --fg:var(--navy); }
.teaser__date{
  font-family:var(--display); font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}
.teaser__date b{ display:block; font-size:clamp(3.4rem,7vw,5.4rem); color:#fff; letter-spacing:-.03em; }
.teaser__date span{ display:block; margin-top:.7em; font-size:1rem; line-height:1.6; color:var(--on-dark-soft); font-family:var(--text); font-weight:400; }
.teaser__box{ border:1px solid var(--on-dark-rule); padding:clamp(26px,3.4vw,40px); }

/* ============================================================
   CE-SEITE: Leistungskarten
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.card{
  border:1px solid var(--rule); background:var(--paper);
  padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.card:hover{ border-color:var(--rule-strong); box-shadow:0 16px 44px rgba(0,35,86,.09); transform:translateY(-3px); }
.card__icon{ width:38px; height:38px; margin-bottom:18px; color:var(--blue); }
.card__icon svg{ width:100%; height:100%; display:block; }
.card h3{ font-size:1.26rem; margin-bottom:.55em; }
.card ul{ margin-top:0; }
.card li{
  position:relative; padding:7px 0 7px 20px; font-size:var(--t-small);
  color:var(--ink-soft); line-height:1.5;
}
.card li::before{
  content:''; position:absolute; left:0; top:1.05em;
  width:6px; height:6px; border-radius:50%; background:var(--blue);
}
.card__note{
  margin:18px 0 0; padding-top:14px; border-top:1px solid var(--rule);
  font-size:.86rem; color:var(--ink-mute);
}

/* ============================================================
   CE-SEITE: Was sich aendert
   ============================================================ */
.change{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--on-dark-rule); }
.change__item{ padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px); border-right:1px solid var(--on-dark-rule); }
.change__item:first-child{ padding-left:0; }
.change__item:last-child{ border-right:0; padding-right:0; }
.change__item h3{ color:var(--on-dark); font-size:1.22rem; margin-bottom:.5em; }
.change__item p{ font-size:var(--t-small); color:var(--on-dark-soft); margin:0; }

/* ============================================================
   CE-SEITE: Alleinstellung, zweispaltig
   ============================================================ */
.usp__in{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px; background:var(--rule); border:1px solid var(--rule);
}
.usp__col{ background:var(--paper); padding:clamp(28px,3.2vw,40px); }
.usp__col h3{ font-size:1.2rem; margin-bottom:.7em; display:flex; align-items:baseline; gap:11px; }
.usp__col p{ font-size:var(--t-small); color:var(--ink-soft); margin:0 0 1em; }
.usp__col li{
  position:relative; padding:8px 0 8px 20px; font-size:var(--t-small); color:var(--ink-soft);
}
.usp__col li::before{
  content:''; position:absolute; left:0; top:1.1em;
  width:6px; height:6px; border-radius:50%; background:var(--blue);
}
.usp__join{
  margin-top:clamp(24px,3vw,36px); padding:clamp(22px,2.6vw,30px);
  background:var(--blue-wash); border-left:3px solid var(--blue);
}
.usp__join p{ margin:0; font-size:1.04rem; color:var(--blue-deep); max-width:none; }

/* ============================================================
   CE-SEITE: Vertrauen
   ============================================================ */
.trust{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(32px,5vw,72px); }
.trust li{
  padding:20px 0; border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start;
}
.trust .node{ margin-top:.55em; }
.trust h3{ font-size:1.06rem; color:var(--ink-strong); margin-bottom:.25em; }
.trust p{ font-size:var(--t-small); color:var(--ink-soft); margin:0; }

/* ============================================================
   CE-SEITE: FAQ
   ============================================================ */
.faq{ max-width:76ch; border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.18rem;
  color:var(--blue-deep); line-height:1.25;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after,.faq summary::before{
  content:''; position:absolute; right:8px; top:50%; background:var(--blue);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq summary::after{ width:15px; height:2px; transform:translateY(-50%); }
.faq summary::before{ width:2px; height:15px; right:14px; transform:translateY(-50%); }
.faq details[open] summary::before{ transform:translateY(-50%) rotate(90deg); opacity:0; }
.faq summary:hover{ color:var(--blue-bright); }
.faq__body{ padding:0 44px 26px 0; }
.faq__body p{ font-size:var(--t-small); color:var(--ink-soft); margin:0 0 .9em; }
.faq__body p:last-child{ margin-bottom:0; }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact__in{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px,5vw,80px); align-items:start;
}
.contact h2{ margin-bottom:.5em; }
.contact__lead{ font-size:var(--t-lead); color:var(--ink-soft); margin-bottom:2em; }
.lines li{
  display:grid; grid-template-columns:minmax(88px,auto) minmax(0,1fr); gap:16px;
  padding:16px 0; border-top:1px solid var(--rule); align-items:baseline;
}
.lines .k{ font-size:var(--t-small); color:var(--ink-mute); }
.lines .v{ font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--blue-deep); }
.lines .v a:hover{ color:var(--blue-bright); }
.lines .v small{
  display:block; font-family:var(--text); font-weight:400; font-size:.88rem;
  color:var(--ink-soft); margin-top:2px;
}

.form{ background:var(--paper); border:1px solid var(--rule); padding:clamp(24px,3.4vw,40px); }
.field{ margin-bottom:18px; }
.field--pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.92rem; color:var(--ink-strong); margin-bottom:7px;
}
input,select,textarea{
  width:100%; font-family:var(--text); font-size:1rem; color:var(--ink-strong);
  background:var(--paper); border:1px solid var(--rule-strong);
  border-radius:2px; padding:13px 15px; min-height:50px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
input:hover,select:hover,textarea:hover{ border-color:var(--ink-mute); }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash);
}
textarea{ resize:vertical; min-height:128px; line-height:1.55; }
.check{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  font-size:.88rem; color:var(--ink-soft); align-items:start; margin-bottom:22px;
}
.check input{ width:24px; height:24px; min-height:0; margin-top:1px; accent-color:var(--blue); }
.check a{ color:var(--blue); text-decoration:underline; }
.form .btn{ width:100%; }
.form__note{ font-size:.84rem; color:var(--ink-mute); margin:14px 0 0; }

/* ============================================================
   SCHLUSSAUFRUF
   ============================================================ */
.closer{ background:var(--navy); color:var(--on-dark-soft); position:relative; overflow:hidden; }
.closer__in{ position:relative; z-index:1; max-width:46ch; }
.closer h2{ color:var(--on-dark); font-size:clamp(2rem,4.4vw,3.1rem); margin-bottom:.45em; }
.closer p{ color:var(--on-dark-soft); font-size:var(--t-lead); margin-bottom:2em; }
.closer .btn{ --bg:#fff; --fg:var(--navy); --bd:#fff; }
.closer .btn:hover{ --bg:var(--blue-wash); --bd:var(--blue-wash); --fg:var(--navy); }
.closer__mark{
  position:absolute; right:-40px; bottom:-60px; width:min(46%,420px);
  opacity:.07; z-index:0; pointer-events:none;
}
.closer__mark circle{ fill:#fff; }
.closer__lines{ margin-top:2.2em; padding-top:1.6em; border-top:1px solid var(--on-dark-rule); }
.closer__lines li{ padding:4px 0; font-size:var(--t-small); color:var(--on-dark-soft); }
.closer__lines a{ display:inline-block; padding:7px 0; color:var(--on-dark); font-weight:600; }
.closer__lines a:hover{ color:#8fb8ff; }

/* ============================================================
   FUSSBEREICH
   ============================================================ */
.foot{ background:var(--blue-deep); color:var(--on-dark-soft); }
.foot__top{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,48px); padding-block:clamp(48px,6vw,74px) 40px;
}
.foot__brand img{ height:52px; width:auto; }
.foot__claim{
  font-family:var(--display); font-weight:700; font-size:1.2rem;
  color:var(--on-dark); margin:18px 0 0; max-width:24ch; line-height:1.2;
}
.foot h3{ font-family:var(--display); font-size:.98rem; color:var(--on-dark); margin-bottom:14px; }
.foot li{ margin-bottom:2px; }
.foot li a{ display:inline-block; padding:7px 0; }
.foot a{ font-size:var(--t-small); color:var(--on-dark-soft); }
.foot a:hover{ color:var(--on-dark); }
.foot__meta{ font-size:var(--t-small); color:var(--on-dark-mute); }
.foot__bottom{
  border-top:1px solid var(--on-dark-rule); padding-block:22px;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; font-size:.86rem; color:var(--on-dark-mute);
}
.foot__bottom nav{ display:flex; gap:20px; }
.foot__bottom nav a{ display:inline-block; padding:7px 0; }

/* ============================================================
   COOKIE-HINWEIS
   ============================================================ */
.cookie{
  position:fixed; right:20px; bottom:20px; left:auto; z-index:200;
  width:min(400px, calc(100vw - 40px));
  background:var(--navy); color:var(--on-dark-soft);
  box-shadow:0 26px 70px rgba(0,15,40,.4); padding:22px 24px;
  transform:translateY(160%); transition:transform .55s var(--ease-out);
}
.cookie.is-up{ transform:translateY(0); }
.cookie[hidden]{ display:none; }
.cookie__title{
  font-size:1.06rem; line-height:1.3; color:#fff; margin:0 0 10px;
  font-family:var(--display); font-weight:700; letter-spacing:.005em;
}
.cookie p{ margin:0 0 16px; font-size:.9rem; color:var(--on-dark-soft); max-width:none; }
/* Beide Schaltflaechen gleich gewichtet: die sparsamere Wahl darf nicht
   schwerer erreichbar sein als die andere. */
.cookie__acts{ display:flex; flex-direction:column; gap:10px; }
.cookie .btn{ width:100%; padding:12px 18px; min-height:46px; font-size:.95rem; }
.cookie .btn--onDark{ --bd:rgba(255,255,255,.4); }
.cookie__more{
  display:inline-block; margin-top:14px; font-size:.85rem;
  color:var(--on-dark-mute); text-decoration:underline; padding:5px 0;
}
.cookie__more:hover{ color:#fff; }

/* Schaltflaeche, die wie ein Fusszeilen-Link aussieht */
.foot__linkbtn{
  background:none; border:0; padding:7px 0; cursor:pointer; text-align:left;
  font-family:var(--text); font-size:inherit; color:inherit;
  text-decoration:underline; text-underline-offset:3px;
}
.foot__linkbtn:hover{ color:#fff; }

/* ============================================================
   RECHTSSEITEN
   ============================================================ */
.legal__head{ padding-block:clamp(40px,5vw,62px) 0; }
.legal__h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); margin-bottom:.7em; }
.foot__bottom--solo{ border-top:0; }
.check__label{ font-family:var(--text); font-weight:400; margin:0; }
.faq__note{ margin-top:2em; font-size:.88rem; color:var(--ink-mute); max-width:70ch; }
.tabs{
  display:flex; gap:clamp(18px,3vw,38px);
  border-bottom:1px solid var(--rule); margin-bottom:clamp(32px,4vw,50px);
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tabs button{
  font-family:var(--display); font-weight:700; font-size:1.06rem;
  background:none; border:0; cursor:pointer; white-space:nowrap;
  color:var(--ink-mute); padding:16px 2px; min-height:52px;
  border-bottom:3px solid transparent; margin-bottom:-1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.tabs button:hover{ color:var(--ink-strong); }
.tabs button[aria-selected="true"]{ color:var(--blue); border-bottom-color:var(--blue); }

.panel{ display:none; max-width:74ch; padding-bottom:clamp(48px,6vw,86px); }
.panel.is-on{ display:block; }
.panel h2{ font-size:1.5rem; margin:2.2em 0 .6em; line-height:1.2; }
.panel h2:first-child{ margin-top:0; }
.panel h3{ font-size:1.12rem; color:var(--ink-strong); margin:1.8em 0 .45em; line-height:1.3; }
.panel p,.panel li{ font-size:.98rem; line-height:1.68; color:var(--ink-strong); }
.panel ul{ list-style:disc; padding-left:22px; margin-bottom:1.2em; }
.panel a{ color:var(--blue); text-decoration:underline; word-break:break-word; overflow-wrap:anywhere; }
.panel__card{ background:var(--paper-2); border-left:3px solid var(--blue); padding:24px 26px; margin-bottom:1.8em; }
.panel__card p{ margin:0; }
.panel__stamp{ font-size:.86rem; color:var(--ink-mute); margin-top:2.4em; }

.cookrow{
  display:flex; justify-content:space-between; align-items:center; gap:22px;
  border:1px solid var(--rule); padding:20px 24px; margin-bottom:12px;
}
.cookrow h3{ margin:0 0 .3em; font-size:1.04rem; }
.cookrow p{ margin:0; font-size:.9rem; color:var(--ink-soft); }
.cookrow__state{ font-family:var(--display); font-weight:700; font-size:.88rem; color:var(--ink-mute); white-space:nowrap; flex:none; }
.cookrow__state.is-on{ color:var(--blue); }

/* Speicher-Tabelle: ab 760px als Definitionsliste gestapelt, nie Spalten */
.store{ border:1px solid var(--rule); padding:0; margin:0 0 14px; }
.store__head{
  background:var(--paper-2); padding:14px 22px; border-bottom:1px solid var(--rule);
  font-family:var(--display); font-weight:700; font-size:1.04rem; color:var(--blue-deep);
}
.store dl{ margin:0; padding:16px 22px 20px; }
.store dt{
  font-family:var(--display); font-weight:700; font-size:.82rem;
  text-transform:none; color:var(--ink-mute); margin-top:12px; line-height:1.5;
}
.store dt:first-child{ margin-top:0; }
.store dd{ margin:2px 0 0; font-size:.95rem; line-height:1.6; color:var(--ink-strong); }
.legal__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.8em; }
.store dd code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em; background:var(--blue-wash); padding:2px 6px; border-radius:2px;
  overflow-wrap:anywhere;
}

/* ============================================================
   SPRACHE
   ============================================================ */
html[data-lang="de"] [data-en]{ display:none !important; }
html[data-lang="en"] [data-de]{ display:none !important; }

/* ============================================================
   BEWEGUNG
   ============================================================ */
.hero h1 .ln > span{ transform:translateY(102%); animation:riseIn .95s var(--ease-out) forwards; }
.hero h1 .ln:nth-child(1) > span{ animation-delay:.08s; }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.2s; }
.hero__sub,.hero__acts{ opacity:0; animation:fadeIn .8s var(--ease-out) .42s forwards; }
.hero__side{ opacity:0; animation:fadeIn 1s var(--ease-out) .3s forwards; }
.lattice path{ stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.4s var(--ease-out) .25s forwards; }

@keyframes riseIn{ to{ transform:translateY(0); } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---- Einblenden beim Scrollen -------------------------------
   Greift nur, wenn das Skript laeuft (html.js). Ohne JavaScript
   bleibt jeder Inhalt sichtbar.                                 */
/* "translate" statt "transform", damit transform fuer Hover-Effekte frei
   bleibt. Browser ohne die Eigenschaft blenden nur ein, ohne Versatz. */
html.js .rv{
  opacity:0; translate:0 18px;
  transition:opacity .66s var(--ease-out), translate .66s var(--ease-out);
  transition-delay:var(--rv-d,0ms);
}
html.js .rv.is-in{ opacity:1; translate:0 0; }

/* ---- Fortschrittslinie unter dem Kopfbereich ---------------- */
.progress{
  position:fixed; top:0; left:0; height:2px; z-index:220;
  width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--blue-bright); pointer-events:none;
  transition:opacity .3s var(--ease);
}
.masthead:not(.is-stuck) ~ .progress{ opacity:0; }

/* ---- Feineres Hover-Verhalten ------------------------------- */
.btn{ overflow:hidden; }
.card{ transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,35,86,.1); border-color:var(--rule-strong); }
.svc__row{ transition:background-color .35s var(--ease); }
.svc__row:hover{ background-color:color-mix(in srgb, var(--blue-wash) 42%, transparent); }
.refs__row{ transition:transform .35s var(--ease-out), border-color .3s var(--ease); }
.refs__row:hover{ transform:translateX(5px); border-color:var(--blue); }
.quality li .node,.trust li .node,.svc__name .node{
  transition:transform .35s var(--ease-out), background-color .3s var(--ease);
}
.quality li:hover .node,.trust li:hover .node,.svc__row:hover .svc__name .node{
  transform:scale(1.45);
}
.cookrow,.store{ transition:border-color .3s var(--ease); }
.cookrow:hover,.store:hover{ border-color:var(--rule-strong); }

@media (hover:none){
  .card:hover,.refs__row:hover{ transform:none; box-shadow:none; }
  .svc__row:hover{ background-color:transparent; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-delay:0s !important;
    transition-duration:.001ms !important;
  }
  .hero h1 .ln > span{ transform:none; }
  .hero__sub,.hero__acts,.hero__side{ opacity:1; }
  .lattice path{ stroke-dashoffset:0; }
  .flow__rail i{ width:100% !important; }
  html.js .rv{ opacity:1 !important; translate:none !important; }
  .progress{ display:none; }
  .card:hover,.refs__row:hover{ transform:none; }
  .quality li:hover .node,.trust li:hover .node,.svc__row:hover .svc__name .node{ transform:none; }
}

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .hero__side{ max-width:580px; }
  .promise__in{ grid-template-columns:repeat(2,1fr); }
  .promise__item{ padding:28px clamp(22px,3vw,32px); border-bottom:1px solid var(--rule); }
  .promise__item:nth-child(2n+1){ padding-left:0; }
  .promise__item:nth-child(2n){ border-right:0; padding-right:0; }
  .promise__item:nth-last-child(-n+2){ border-bottom:0; }
  .intro__in{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .metrics__in{ grid-template-columns:repeat(2,1fr); gap:34px 24px; }
  .flow__in{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .flow__rail{ display:none; }
  .scope__in{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .people{ grid-template-columns:minmax(0,1fr); }
  .contact__in{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .quality,.trust{ grid-template-columns:minmax(0,1fr); }
  .foot__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .svc__row{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .change{ grid-template-columns:minmax(0,1fr); }
  .change__item{ padding:26px 0; border-right:0; border-bottom:1px solid var(--on-dark-rule); }
  .change__item:last-child{ border-bottom:0; padding-bottom:0; }
  .usp__in{ grid-template-columns:minmax(0,1fr); }
  .teaser__in{ grid-template-columns:minmax(0,1fr); gap:36px; }
}

@media (max-width:900px){
  /* Auf dem Telefon deckend statt durchscheinend: der Weichzeichner ist
     dort unzuverlaessig, und ohne ihn liegt die Ueberschrift sichtbar
     hinter dem Menueknopf. */
  /* Der Weichzeichner muss hier weg, nicht nur optisch: ein Element mit
     backdrop-filter wird zum Bezugsrahmen fuer position:fixed darin.
     Dadurch bezog sich das Menue-Overlay auf den 70 px hohen Streifen
     statt auf den Bildschirm - es hatte keine Flaeche, und die Links
     standen durchsichtig ueber der Ueberschrift. */
  .masthead{
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
    background:#fff;
    border-bottom-color:var(--rule);
  }
  .masthead.is-stuck{ background:#fff; }
  .masthead__in{ height:70px; }
  .brand img{ height:38px; }
  /* Bewusst absolut statt fix: absolute Positionierung bezieht sich immer
     auf den Kopfbereich darueber und kann von keinem Filter, Transform
     oder Backdrop-Effekt eines Elternelements umgehaengt werden. Bei
     position:fixed war genau das die Ursache, warum das Overlay keine
     Flaeche hatte und die Links durchsichtig ueber der Seite standen. */
  .mainnav{
    position:absolute; top:100%; left:0; right:0; z-index:1;
    height:calc(100vh - 70px);
    height:calc(100dvh - 70px);
    background:#fff;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--gut) 40px; margin:0;
    transform:translateX(100%); visibility:hidden;
    transition:transform .4s var(--ease-out), visibility .4s;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .mainnav.is-open{ transform:translateX(0); visibility:visible; }
  .mainnav a{ font-size:1.4rem; padding:20px 0; border-bottom:1px solid var(--rule); }
  .mainnav a::after{ display:none; }
  .burger{
    display:block; position:relative; z-index:2;
    background:#fff; border-color:var(--rule-strong);
  }
  .burger span{ height:2px; }
  .mast-tools .btn{ display:none; }
}

@media (max-width:760px){
  .hero__in{ padding-block:38px 54px; gap:36px; }
  .hero h1{ line-height:1.1; }
  .hero__acts{ flex-direction:column; align-items:stretch; }
  .hero__acts .btn{ width:100%; }
  .lattice{ opacity:.35; }

  .promise__in{ grid-template-columns:minmax(0,1fr); }
  .promise__item{ border-right:0; padding:24px 0; border-bottom:1px solid var(--rule); }
  .promise__item:first-child,.promise__item:last-child{ padding-left:0; padding-right:0; }
  .promise__item:last-child{ border-bottom:0; }

  .metrics__in{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .facts{ grid-template-columns:minmax(0,1fr); }
  .facts > div:nth-child(odd){ border-right:0; }
  .flow__in{ grid-template-columns:minmax(0,1fr); row-gap:30px; }
  .step__dot{ margin-bottom:16px; }

  .refs__row{ grid-template-columns:minmax(0,1fr); gap:6px; padding-block:22px; }
  .refs__row:hover{ padding-left:0; }

  .person{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; padding:28px 22px; }
  .person__pic{ width:92px; height:92px; }

  .cards{ grid-template-columns:minmax(0,1fr); }
  .faq summary{ font-size:1.08rem; padding-right:40px; }

  .field--pair{ grid-template-columns:minmax(0,1fr); gap:0; }
  .form{ padding:24px 20px; }
  .teaser__box{ padding:24px 20px; }

  .foot__top{ grid-template-columns:minmax(0,1fr); gap:34px; padding-block:44px 30px; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
  .foot__bottom nav{ flex-direction:column; gap:10px; }

  .cookie{ left:12px; right:12px; bottom:12px; width:auto; padding:20px; }
  .cookie__acts{ flex-direction:column; }

  /* Reiter auf dem Telefon untereinander, volle Breite, grosse Tippflaeche */
  .tabs{
    display:block; gap:0; overflow:visible;
    border-bottom:0; border-top:1px solid var(--rule);
  }
  .tabs button{
    display:block; width:100%; text-align:left; font-size:1.02rem;
    padding:17px 0 17px 16px; min-height:56px; white-space:normal;
    border-bottom:1px solid var(--rule); border-left:3px solid transparent;
    margin-bottom:0;
  }
  .tabs button[aria-selected="true"]{
    border-left-color:var(--blue); border-bottom-color:var(--rule);
    background:var(--paper-2);
  }
  .cookrow{ flex-direction:column; align-items:flex-start; gap:10px; padding:20px; }

  .facts dt,.svc__list li,.refs__sector,.refs__what,.person__role,
  .person p,.person a,.quality p,.trust p,.metric span,.foot a,.foot__meta,
  .form__note,.check,.cookie p,.lines .k,.lines .v small,.card li,
  .card__note,.change__item p,.usp__col p,.usp__col li,.faq__body p,
  .closer__lines li{ font-size:.88rem; }
  .foot__bottom{ font-size:.85rem; }
}

@media (max-width:400px){
  .tabs button{ font-size:.98rem; padding-left:14px; }
}

@media print{
  .masthead,.cookie,.mainnav,.closer,.lattice{ display:none !important; }
  body{ color:#000; }
  .faq details{ open:true; }
}