:root{

  --ink:    #16191A;
  --slate:  #444F50;
  --red:    #B61F29;
  --paper:  #F1F0EE;
  --glass:  #C7CAC5;

  --ease:   cubic-bezier(.16, 1, .3, 1);
  --luft-band: 64px;
  --schatten: rgba(22, 25, 26, .45);

  --spalte: clamp(1080px, 75vw, 1320px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;

  min-height:100vh;
  min-height:100dvh;
  overflow-x:clip;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:"Plex", ui-sans-serif, system-ui, sans-serif;
  font-weight:300;

  font-size:clamp(19px, 1.32vw, 22px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
h1,p{margin:0}
a{color:inherit}

a:focus-visible{
  outline:2px solid var(--red);
  outline-offset:4px;
  border-radius:2px;
}

.eyebrow{
  font-weight:500;
  font-stretch:82%;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
}

main{
  position:relative;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}

.aura{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  overflow:clip;
  translate:var(--gx, 0px) var(--gy, 0px);
  transition:translate 1s cubic-bezier(.22, 1, .36, 1);
}

.aura__feld{
  position:absolute;
  display:block;
  aspect-ratio:1;
  border-radius:50%;
  translate:-50% -50%;
  will-change:transform, opacity;
}

.aura__feld--1{
  left:20%;
  top:14%;
  width:min(1180px, 128vw);
  background:radial-gradient(circle at center,
    rgba(182, 31, 41, .30)  0%,
    rgba(182, 31, 41, .16) 32%,
    rgba(182, 31, 41, .05) 56%,
    rgba(182, 31, 41, 0)   74%);
}

.aura__feld--2{
  left:84%;
  top:82%;
  width:min(1000px, 112vw);
  background:radial-gradient(circle at center,
    rgba(192, 39, 40, .22)  0%,
    rgba(192, 39, 40, .12) 34%,
    rgba(192, 39, 40, .04) 58%,
    rgba(192, 39, 40, 0)   76%);
}

.aura__feld--3{
  left:74%;
  top:10%;
  width:min(860px, 96vw);
  background:radial-gradient(circle at center,
    rgba(68, 79, 80, .13)  0%,
    rgba(68, 79, 80, .07) 34%,
    rgba(68, 79, 80, .02) 58%,
    rgba(68, 79, 80, 0)   76%);
}

.page{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--spalte);
  margin-inline:auto;

  display:flex;
  flex-direction:column;
  flex:1;
  padding:var(--luft-band) 32px;
}

.masthead{text-align:left; margin-bottom:46px}

.masthead__logo{
  width:clamp(192px, 22.3vw, 289px);
  height:auto;
}

.logo__claim{
  clip-path:inset(0 100% 0 0);
}

.statement{
  display:grid;
  grid-template-columns:clamp(340px, 23.6vw, 420px) minmax(0, 1fr);
  grid-template-areas:
    "bild titel"
    "bild text";
  column-gap:60px;
  row-gap:24px;
  align-content:center;

  margin-top:auto;
  margin-bottom:auto;
}

.statement__portrait{grid-area:bild; align-self:center}

.statement__title  {grid-area:titel; align-self:end}
.statement__body   {grid-area:text}

.statement__portrait{margin:0}
.statement__portrait picture{display:block}

.statement__portrait img{
  width:100%;
  height:auto;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:50% 15%;
  border-radius:14px;
}

.statement__title{
  margin:0;
  font-weight:600;
  font-stretch:88%;
  font-size:clamp(1.6rem, 2.9vw, 2.25rem);
  line-height:1;
  letter-spacing:-.025em;
  text-wrap:balance;
  hyphens:auto;
  overflow-wrap:break-word;
}

.statement__title span{
  display:inline-block;
  vertical-align:top;
}

.statement__body p + p{margin-top:1.1em}

.statement__lead{
  font-weight:400;
  color:var(--ink);
}

.statement__body p:not(.statement__lead):not(.statement__name){
  color:var(--slate);
}

.statement__name{
  margin-top:1.7em;
  font-stretch:100%;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--ink);
}

.statement__name a{

  white-space:nowrap;
  text-decoration:underline;
  text-decoration-color:var(--glass);
  text-decoration-thickness:1px;
  text-underline-offset:.3em;
  transition:text-decoration-color .16s var(--ease);
}

@media (hover:hover){
  .statement__name a:hover{text-decoration-color:var(--red)}
}

.cta-reihe{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:2.2em;
}

.cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.75em;
  padding:1.05em 1.9em;
  background:var(--red);
  color:var(--paper);
  text-decoration:none;
  font-weight:500;
  font-stretch:88%;
  font-size:13px;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-radius:8px;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}

.cta--zweit{
  background:none;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--slate);
}

.cta__pfeil{
  transition:transform .16s var(--ease);
}

@media (hover:hover){
  .cta:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px -8px var(--schatten);
  }
  .cta:hover .cta__pfeil{transform:translateX(3px)}

  .cta--zweit:hover{
    box-shadow:inset 0 0 0 1px var(--ink), 0 8px 20px -8px var(--schatten);
  }
  .cta--zweit:hover .cta__pfeil{transform:translateY(3px)}
}

.cta:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.footband{
  position:relative;
}

.footband::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--red);
  transform-origin:left center;
}

.footband__inner{
  position:relative;
  max-width:var(--spalte);
  margin-inline:auto;
  padding:26px 32px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 32px;
}

.footband__nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2.2em;
  color:var(--paper);
}

.footband__nav a{
  text-decoration:none;
  padding-block:.35em;
  border-bottom:1px solid transparent;
  transition:border-color .16s var(--ease);
}

.footband__nav a:hover{border-bottom-color:var(--paper)}

.footband__nav a:focus-visible,
.footband__copy a:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:4px;
}

.footband__copy{
  margin:0;
  color:var(--paper);
  opacity:.9;
  letter-spacing:.12em;
}

.doc{
  max-width:680px;
  margin-inline:auto;
  padding:40px 22px 72px;

  min-width:0;
  overflow-wrap:break-word;
}

.doc h1, .doc h2, .doc h3, .doc h4{hyphens:auto}

.doc__zurueck{
  display:inline-block;
  margin-bottom:44px;
}

.doc__logo{width:min(62vw, 236px);height:auto}

.doc h1{
  font-weight:600;
  font-stretch:88%;
  font-size:clamp(1.75rem, 5vw, 2.5rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 8px;
}

.doc h2{
  margin:44px 0 10px;
  font-weight:500;
  font-stretch:92%;
  font-size:1.06rem;
  line-height:1.35;
  letter-spacing:-.005em;
}

.doc h3{
  margin:32px 0 8px;
  font-weight:600;
  font-stretch:88%;
  font-size:1rem;
  line-height:1.35;
}

.doc h4{
  margin:22px 0 6px;
  font-weight:500;
  font-stretch:100%;
  font-size:.94rem;
  line-height:1.4;
  letter-spacing:.01em;
}

.doc p{margin-bottom:1.1em;color:var(--slate)}
.doc p strong{color:var(--ink);font-weight:500}
.doc ul{margin:0 0 1.1em;padding-left:1.25em;color:var(--slate)}
.doc li{margin-bottom:.4em}
.doc a{
  color:var(--red);
  text-decoration-thickness:1px;
  text-underline-offset:3px;

  overflow-wrap:anywhere;
}
.doc__zurueck{text-decoration:none}

.doc__adresse{
  color:var(--ink);
  font-style:normal;
  margin-bottom:1.1em;
}

.doc__stand{
  margin-top:52px;
  padding-top:20px;
  border-top:1px solid var(--glass);
}

@keyframes ip-aufsteigen{
  from{opacity:0; transform:translateY(18px)}
  to  {opacity:1; transform:none}
}
@keyframes ip-schaerfen{
  from{opacity:0; filter:blur(6px);  transform:translateY(8px)}
  to  {opacity:1; filter:blur(0);    transform:none}
}
@keyframes ip-portrait{
  from{opacity:0; filter:blur(12px); transform:scale(1.04)}
  to  {opacity:1; filter:blur(0);    transform:none}
}
@keyframes ip-aufziehen{
  from{transform:scaleX(0)}
  to  {transform:none}
}
@keyframes ip-blenden{
  from{opacity:0}
  to  {opacity:1}
}

@keyframes ip-aura-bloom{
  from{opacity:0; scale:.82}
  to  {opacity:1; scale:1}
}
@keyframes ip-schreiben{
  from{clip-path:inset(0 100% 0 0)}
  to  {clip-path:inset(0 -3% 0 0)}
}
@keyframes ip-drift-a{
  0%,100%{transform:translate(0, 0)        scale(1);    opacity:1}
  34%    {transform:translate(5%, -4%)     scale(1.16); opacity:.82}
  67%    {transform:translate(-4%, 5%)     scale(.9);   opacity:1}
}
@keyframes ip-drift-b{
  0%,100%{transform:translate(0, 0)        scale(1.06); opacity:.9}
  40%    {transform:translate(-7%, -6%)    scale(.88);  opacity:1}
  70%    {transform:translate(3%, 4%)      scale(1.18); opacity:.78}
}
@keyframes ip-drift-c{
  0%,100%{transform:translate(0, 0)        scale(.94);  opacity:.85}
  45%    {transform:translate(6%, 7%)      scale(1.2);  opacity:1}
}

.js-an body:not(.is-revealed) [data-reveal]{opacity:0}
.js-an body:not(.is-revealed) .footband::before{transform:scaleX(0)}
.js-an body:not(.is-revealed) .aura{opacity:0}

html:not(.js-an) .logo__claim{clip-path:none}

.is-revealed [data-reveal]{
  animation-duration:.62s;
  animation-timing-function:var(--ease);
  animation-fill-mode:both;
}

.is-revealed .aura{
  animation:ip-aura-bloom 1.6s cubic-bezier(.16, 1, .3, 1) 0s both;
}
.is-revealed .aura__feld--1{animation:ip-drift-a 19s ease-in-out  -2s infinite}
.is-revealed .aura__feld--2{animation:ip-drift-b 25s ease-in-out  -9s infinite}
.is-revealed .aura__feld--3{animation:ip-drift-c 22s ease-in-out -15s infinite}

.is-revealed [data-reveal="logo"]{animation-name:ip-schaerfen; animation-delay:0s}
.is-revealed .logo__claim{
  animation:ip-schreiben 1.15s cubic-bezier(.33, 1, .68, 1) .5s both;
}

.is-revealed [data-reveal="wort"]{animation-name:ip-aufsteigen; animation-delay:.30s}
.is-revealed .statement__title span:nth-child(2){animation-delay:.36s}
.is-revealed .statement__title span:nth-child(3){animation-delay:.42s}
.is-revealed .statement__title span:nth-child(4){animation-delay:.48s}
.is-revealed .statement__title span:nth-child(5){animation-delay:.54s}

.is-revealed [data-reveal="portrait"]{
  animation-name:ip-portrait; animation-delay:.16s; animation-duration:.8s;
}

.is-revealed [data-reveal="text"]{animation-name:ip-aufsteigen; animation-delay:.62s}
.is-revealed .statement__body p:nth-of-type(2){animation-delay:.70s}
.is-revealed .statement__name{animation-delay:.78s}

.is-revealed [data-reveal="cta"]{animation-name:ip-aufsteigen; animation-delay:.88s}
.is-revealed .cta--zweit{animation-delay:.94s}

.is-revealed .footband::before{
  animation:ip-aufziehen .72s var(--ease) .82s both;
}
.is-revealed [data-reveal="fuss"]{
  animation-name:ip-blenden; animation-delay:1.18s; animation-duration:.4s;
}

@media (max-width: 860px){
  :root{--luft-band:46px}

  .page{padding:var(--luft-band) 22px}
  .masthead{margin-bottom:32px}

  .statement{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:
      "titel"
      "bild"
      "text";
    row-gap:30px;
    justify-items:start;
  }

  .statement__portrait{
    width:min(76vw, 320px);
    align-self:start;
  }
  .statement__title{align-self:start}

  .footband__inner{
    padding:22px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}

@media (max-width: 380px){
  .page{padding:var(--luft-band) 16px}
  body{font-size:17px}
  .masthead__logo{width:min(56.7vw, 168px)}
  .statement__portrait{width:82vw}
  .footband__nav{gap:1.5em}
  .cta{padding:.95em 1.5em; letter-spacing:.08em; font-size:12px}
}

@media (prefers-reduced-motion: reduce){
  .is-revealed [data-reveal],
  .is-revealed .footband::before{
    animation-name:ip-blenden;
    animation-duration:.2s;
    animation-delay:0s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    transform:none;
    filter:none;
  }

  .js-an body:not(.is-revealed) .footband::before{transform:none}

  .logo__claim,
  .is-revealed .logo__claim{
    animation:ip-blenden .2s linear both;
    clip-path:none;
  }

  .is-revealed .aura{
    animation:ip-blenden .2s linear both;
    scale:1;
    translate:0 0;
    transition:none;
  }
  .is-revealed .aura__feld--1,
  .is-revealed .aura__feld--2,
  .is-revealed .aura__feld--3{
    animation:none;
    transform:none;
  }

  .cta,
  .cta__pfeil,
  .statement__name a,
  .footband__nav a{transition:none}
}